feat(studio): add Charcoal Pink dashboard preset

bun.lock

@@ -391,7 +391,7 @@
     },
     "packages/design-studio": {
       "name": "@wrnexus/design-studio",
-      "version": "0.1.10",
+      "version": "0.1.11",
       "bin": {
         "wrnexus-design-studio": "src/cli.ts",
       },

packages/design-studio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/design-studio",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/design-studio/src/presets.ts

@@ -1,4 +1,5 @@
 import { CORE_DESIGN_SYSTEMS, type DesignSystem, type TokenMap } from "@wrnexus/design-system";
+import { manualDesign } from "./manual.ts";
 
 type Palette = [string, string, string, string, string, string, string, string];
 function palette(tokens: TokenMap, values: Palette) {
@@ -181,3 +182,58 @@ for (const tokens of [
     };
   }
 }
+
+// Dark dashboard direction based on charcoal surfaces and a pink action color.
+let charcoal = direction(
+  "charcoal",
+  "Charcoal / Pink",
+  ["#F7F5F8", "#FFFFFF", "#EFEBF2", "#222128", "#625D6C", "#D7CFDF", "#B81F5B", "#FFFFFF"],
+  ["#19181E", "#222128", "#2B2833", "#F5F5F7", "#B9BAC5", "#34303D", "#FA3D87", "#19181E"],
+  "6px",
+  '"Poppins", sans-serif',
+  "none",
+  "dark",
+);
+charcoal.description =
+  "A compact dark dashboard with charcoal panels, pink actions and Poppins typography. Includes a matching light palette.";
+for (const [name, value] of Object.entries({
+  "shape.control": "4px",
+  "shape.panel": "6px",
+  "shape.dialog": "8px",
+  "space.control": "10px",
+  "space.panel": "24px",
+  "type.body-size": "14px",
+  "type.heading-size": "24px",
+  "type.body-weight": "400",
+  "type.heading-weight": "700",
+  "type.body-leading": "1.5",
+  "type.heading-leading": "1.2",
+  "type.body-tracking": "0px",
+  "type.heading-tracking": "-0.3px",
+}))
+  charcoal = manualDesign(charcoal, { kind: "token", name, value });
+charcoal = manualDesign(charcoal, { kind: "googleFont", name: "type.body", value: "Poppins" });
+charcoal = manualDesign(charcoal, { kind: "googleFont", name: "type.heading", value: "Poppins" });
+charcoal = manualDesign(charcoal, { kind: "buttonStyle", value: "solid" });
+charcoal = manualDesign(charcoal, { kind: "tilt", value: "none" });
+for (const [mode, colors] of Object.entries({
+  dark: {
+    primary: "#FA3D87",
+    secondary: "#7650B5",
+    success: "#43C6A3",
+    warning: "#F4C34F",
+    danger: "#FF795E",
+    info: "#779DE0",
+  },
+  light: {
+    primary: "#B81F5B",
+    secondary: "#7650B5",
+    success: "#087D62",
+    warning: "#8B6200",
+    danger: "#B93E29",
+    info: "#355FA6",
+  },
+}))
+  for (const [name, value] of Object.entries(colors))
+    charcoal = manualDesign(charcoal, { kind: "color", mode, name, value });
+STUDIO_PRESETS.charcoal = charcoal;

packages/design-studio/test/presets.test.ts

@@ -8,8 +8,8 @@ import { STUDIO_PRESETS } from "../src/presets.ts";
 import { studioHtml } from "../src/shell.ts";
 import { StudioSession } from "../src/session.ts";
 
-test("thirteen distinct Studio presets validate and compile both modes without changing core presets", () => {
+test("fourteen distinct Studio presets validate and compile both modes without changing core presets", () => {
-  expect(Object.keys(STUDIO_PRESETS)).toHaveLength(13);
+  expect(Object.keys(STUDIO_PRESETS)).toHaveLength(14);
   expect(Object.keys(CORE_DESIGN_SYSTEMS)).toEqual(["square", "soft", "angular"]);
   const signatures = new Set<string>();
   for (const [id, system] of Object.entries(STUDIO_PRESETS)) {
@@ -20,7 +20,7 @@ test("thirteen distinct Studio presets validate and compile both modes without c
     for (const mode of ["light", "dark"])
       expect(() => compileDesignSystem(system, { mode })).not.toThrow();
   }
-  expect(signatures.size).toBe(13);
+  expect(signatures.size).toBe(14);
 });
 
 test("choosing a new preset stays undoable and never mutates the catalog", () => {
@@ -48,3 +48,23 @@ test("revised directions stay distinct and Editorial status tokens remain monoch
     }
   }
 });
+
+test("Charcoal / Pink defaults to dark and carries its fonts, geometry and accessible primary contrast", () => {
+  const preset = STUDIO_PRESETS.charcoal!;
+  expect(preset.defaultMode).toBe("dark");
+  expect(preset.googleFonts).toEqual(["Poppins"]);
+  expect(preset.modes!.dark!["color.bg"]!.value).toBe("#19181E");
+  expect(preset.modes!.dark!["color.primary"]!.value).toBe("#FA3D87");
+  expect(preset.modes!.dark!["color.primary-contrast"]!.value).toBe("#000000");
+  expect(preset.tokens["shape.control"]!.value).toBe("4px");
+  const session = new StudioSession(STUDIO_PRESETS.square);
+  session.replace(preset, "Selected Charcoal / Pink");
+  const css = compileDesignSystem(session.valid).css;
+  expect(css.startsWith('@import url("https://fonts.googleapis.com/css2?family=Poppins')).toBe(
+    true,
+  );
+  expect(css).toContain("font-size:14px");
+  expect(css).toContain("letter-spacing:-0.3px");
+  session.undo();
+  expect(session.valid.id).toBe("square");
+});