import { CORE_DESIGN_SYSTEMS, type DesignSystem, type TokenMap } from "@wrnexus/design-system"; type Palette = [string, string, string, string, string, string, string, string]; function palette(tokens: TokenMap, values: Palette) { const [bg, surface, muted, text, subtle, border, primary, contrast] = values; const colors: Record = { bg, background: bg, surface, "surface-2": muted, text, foreground: text, "text-muted": subtle, border, primary, "primary-hover": primary, "primary-active": primary, "primary-contrast": contrast, "primary-text": primary, "primary-soft": muted, "surface-raised": surface, "surface-muted": muted, "surface-soft": muted, "text-subtle": subtle, "border-strong": border, "primary-muted": muted, }; for (const [name, value] of Object.entries(colors)) tokens[`color.${name}`] = { ...tokens[`color.${name}`]!, value }; } function direction( id: string, name: string, light: Palette, dark: Palette, radius: string, font: string, shadow = "none", mode = "light", ): DesignSystem { const system = structuredClone(CORE_DESIGN_SYSTEMS.soft); system.id = id; system.name = name; system.defaultMode = mode; palette(system.tokens, mode === "dark" ? dark : light); palette(system.modes!.light!, light); palette(system.modes!.dark!, dark); for (const name of ["shape.control", "shape.panel", "shape.dialog", "shape.base"]) system.tokens[name] = { ...system.tokens[name]!, value: radius }; for (const name of ["type.body", "type.heading"]) system.tokens[name] = { ...system.tokens[name]!, value: font }; system.tokens["elevation.panel"] = { ...system.tokens["elevation.panel"]!, value: shadow }; return system; } const sans = '"Helvetica Neue", Arial, sans-serif'; const serif = 'Georgia, "Times New Roman", serif'; const mono = '"Courier New", monospace'; /** Studio choices extend the original three without changing the engine's core preset API. */ export const STUDIO_PRESETS: Record = { ...CORE_DESIGN_SYSTEMS, swiss: direction( "swiss", "Swiss / Blue", ["#FFFFFF", "#FFFFFF", "#F7F7F8", "#101114", "#53565E", "#C9CBD1", "#002FA7", "#FFFFFF"], ["#101114", "#181A20", "#252832", "#F7F7F8", "#BABEC9", "#51596B", "#91B2FF", "#101114"], "0", sans, ), forest: direction( "forest", "Forest / Sage", ["#E8DCC7", "#D4B895", "#C7CCB5", "#283320", "#48543E", "#7B866A", "#43552D", "#E8DCC7"], ["#20291C", "#2C3726", "#394530", "#E8DCC7", "#BDC5A5", "#718060", "#B7D092", "#20291C"], "24px", serif, ), ocean: direction( "ocean", "Ocean / Teal", ["#F0FAFC", "#FFFFFF", "#DDF0F4", "#103846", "#42636E", "#99C4CE", "#00677B", "#FFFFFF"], ["#091F29", "#10303D", "#194452", "#E4F5FA", "#A3C5CE", "#477783", "#60D5DF", "#091F29"], "8px", sans, ), rose: direction( "rose", "Rose / Rounded", ["#FFF3F5", "#FFFFFF", "#FADFE7", "#421E2C", "#76505F", "#D9A4B5", "#A32957", "#FFFFFF"], ["#29131E", "#3D202F", "#512C3D", "#FFEAF1", "#DBB2C2", "#955A71", "#FF9BBC", "#29131E"], "20px", sans, ), violet: direction( "violet", "Violet / Studio", ["#F5F3FF", "#FFFFFF", "#E7E1FA", "#282044", "#625775", "#B9ADD4", "#6336AD", "#FFFFFF"], ["#1B142C", "#2A203E", "#3B2B54", "#F3EDFF", "#C2B2D8", "#7C649E", "#C8ABFF", "#1B142C"], "12px", sans, "0 8px 24px #00000018", ), ember: direction( "ember", "Ember / Terracotta", ["#E8DCC7", "#D4B895", "#CEB094", "#3D241C", "#694837", "#A7795A", "#8E3C21", "#E8DCC7"], ["#2B1B15", "#3B2820", "#50362B", "#E8DCC7", "#CEB094", "#9C7057", "#F4AE80", "#2B1B15"], "16px", serif, ), editorial: direction( "editorial", "Editorial / Ink", ["#FFFFFF", "#FFFFFF", "#F0F0F0", "#171717", "#555555", "#A3A3A3", "#171717", "#FFFFFF"], ["#101010", "#1C1C1C", "#2B2B2B", "#FAFAFA", "#BCBCBC", "#747474", "#FAFAFA", "#101010"], "0", serif, ), terminal: direction( "terminal", "Terminal / Green", ["#FFFFFF", "#FFFFFF", "#E4F7EB", "#001C0D", "#375D44", "#609B77", "#00642C", "#FFFFFF"], ["#000000", "#0B0C0A", "#102318", "#E1FFE9", "#9DCDA9", "#3A7550", "#00E676", "#000000"], "0", mono, "none", "dark", ), brutalist: direction( "brutalist", "Brutalist / Primary", ["#FFFFFF", "#FFFF00", "#FFFFFF", "#000000", "#000000", "#000000", "#0000FF", "#FFFFFF"], ["#000000", "#000000", "#202020", "#FFFFFF", "#FFFFFF", "#FFFFFF", "#FFFF00", "#000000"], "0", mono, "4px 4px 0 #000000", ), contrast: direction( "contrast", "Contrast / Clear", ["#FFFFFF", "#FFFFFF", "#E6E6E6", "#000000", "#333333", "#000000", "#002FA7", "#FFFFFF"], ["#000000", "#000000", "#1B1B1B", "#FFFFFF", "#E0E0E0", "#FFFFFF", "#FFFF00", "#000000"], "4px", sans, ), };