From eb634e4e3068bbb296d2078aa04c157b07f0098d Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Sun, 25 Oct 2026 15:23:18 +0530 Subject: [PATCH] feat(studio): add Charcoal Pink dashboard preset --- bun.lock | 2 +- packages/design-studio/package.json | 2 +- packages/design-studio/src/presets.ts | 56 +++++++++++++++++++++ packages/design-studio/test/presets.test.ts | 26 ++++++++-- 4 files changed, 81 insertions(+), 5 deletions(-) diff --git a/bun.lock b/bun.lock index 59df384e..c3e51140 100644 --- a/bun.lock +++ b/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", }, diff --git a/packages/design-studio/package.json b/packages/design-studio/package.json index ddc3c646..f0810bc8 100644 --- a/packages/design-studio/package.json +++ b/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", diff --git a/packages/design-studio/src/presets.ts b/packages/design-studio/src/presets.ts index 3f1b5c61..9e1cfa5a 100644 --- a/packages/design-studio/src/presets.ts +++ b/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; diff --git a/packages/design-studio/test/presets.test.ts b/packages/design-studio/test/presets.test.ts index a3d03e82..abf0f402 100644 --- a/packages/design-studio/test/presets.test.ts +++ b/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", () => { - expect(Object.keys(STUDIO_PRESETS)).toHaveLength(13); +test("fourteen distinct Studio presets validate and compile both modes without changing core presets", () => { + expect(Object.keys(STUDIO_PRESETS)).toHaveLength(14); expect(Object.keys(CORE_DESIGN_SYSTEMS)).toEqual(["square", "soft", "angular"]); const signatures = new Set(); 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"); +});