WRNexusJS/packages/design-studio/src/presets.ts

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<string, string> = {
    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<string, DesignSystem> = {
  ...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,
  ),
};