@asafarim/design-tokens 0.3.6 → 0.4.2

package/css/tokens.base.css

@@ -1,10 +1,50 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap");
+/* ------------------------------------------------------------------ */
+/* 20 fonts (100-900) Google Fonts */
+/* ------------------------------------------------------------------ */
+@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Figtree:ital,wght@0,300..900;1,300..900&family=Jost:ital,wght@0,100..900;1,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lexend:wght@100..900&family=Manrope:wght@200..800&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Overpass:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@100..800&family=Space+Grotesk:wght@300..700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Barriecito&family=Borel&family=DynaPuff:wght@400..700&family=Gabarito:wght@400..900&family=Kranky&family=Macondo&family=Playpen+Sans:wght@100..800&family=Rubik+Spray+Paint&family=Shadows+Into+Light+Two&family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap");
 
 :root {
-  --asm-font-family-primary: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
-  --asm-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --asm-font-family-base: "Inter", "Lato", "Open Sans", "Roboto";
+  --asm-font-family-inter: "Inter", ui-sans-serif, system-ui, -apple-system,
+    Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  --asm-font-family-primary: "Inter", "Lato", "Open Sans", "Roboto";
+  --asm-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --asm-font-family-poppins: "Poppins", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-open-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-lato: "Lato", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-rubik: "Rubik", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-nunito: "Nunito", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-work-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-manrope: "Manrope", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-figtree: "Figtree", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-sora: "Sora", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-outfit: "Outfit", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-lexend: "Lexend", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-public-sans: "Public Sans", ui-sans-serif, system-ui,
+    sans-serif;
+  --asm-font-family-dm-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-overpass: "Overpass", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-quicksand: "Quicksand", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-karla: "Karla", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-barlow: "Barlow", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-space-grotesk: "Space Grotesk", ui-sans-serif, system-ui,
+    sans-serif;
+  --asm-font-family-red-hat: "Red Hat Display", ui-sans-serif, system-ui,
+    sans-serif;
+  --asm-font-family-jost: "Jost", ui-sans-serif, system-ui, sans-serif;
+  --asm-font-family-barriecito: "Barriecito", cursive, sans-serif;
+  --asm-font-family-borel: "Borel", cursive, sans-serif;
+  --asm-font-family-dynapuff: "DynaPuff", cursive, sans-serif;
+  --asm-font-family-gabarito: "Gabarito", sans-serif;
+  --asm-font-family-kranky: "Kranky", cursive, sans-serif;
+  --asm-font-family-macondo: "Macondo", cursive, sans-serif;
+  --asm-font-family-playpen-sans: "Playpen Sans", cursive, sans-serif;
+  --asm-font-family-rubik-spray: "Rubik Spray Paint", cursive, sans-serif;
+  --asm-font-family-shadows-light: "Shadows Into Light Two", cursive, sans-serif;
+  --asm-font-family-zalando: "Zalando Sans", ui-sans-serif, system-ui,
+    sans-serif;
 
   --asm-font-weight-100: 100;
   --asm-font-weight-200: 200;
@@ -79,7 +119,7 @@
   --asm-border-thick: 3px;
 
   --asm-effect-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
-  --asm-effect-shadow-md: 0 6px 20px rgba(17, 24, 39, 0.10);
+  --asm-effect-shadow-md: 0 6px 20px rgba(17, 24, 39, 0.1);
   --asm-effect-shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.14);
   --asm-effect-shadow-xl: 0 24px 60px rgba(17, 24, 39, 0.18);
 
@@ -96,9 +136,12 @@
   --asm-motion-easing-entrance: cubic-bezier(0, 0, 0, 1);
   --asm-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
 
-  --asm-transition-fade: opacity var(--asm-motion-duration-normal) var(--asm-motion-easing-standard);
-  --asm-transition-slide: transform var(--asm-motion-duration-normal) var(--asm-motion-easing-standard);
-  --asm-transition-scale: transform var(--asm-motion-duration-fast) var(--asm-motion-easing-emphasized);
+  --asm-transition-fade: opacity var(--asm-motion-duration-normal)
+    var(--asm-motion-easing-standard);
+  --asm-transition-slide: transform var(--asm-motion-duration-normal)
+    var(--asm-motion-easing-standard);
+  --asm-transition-scale: transform var(--asm-motion-duration-fast)
+    var(--asm-motion-easing-emphasized);
 
   --asm-z-base: 0;
   --asm-z-dropdown: 100;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@asafarim/design-tokens",
-  "version": "0.3.6",
+  "version": "0.4.2",
   "private": false,
-  "description": "ASafariM design tokens (CSS variables) with multi-theme support.",
+  "description": "ASafariM design tokens (CSS variables) with multi-theme support and 30 variable fonts (100-900).",
   "license": "MIT",
   "author": "ASafariM",
   "repository": {
@@ -22,6 +22,7 @@
   "style": "css/index.css",
   "files": [
     "css",
+    "src",
     "README.md",
     "CHANGELOG.md",
     "LICENSE"
@@ -30,6 +31,10 @@
     "css/*.css"
   ],
   "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
     "./css": {
       "style": "./css/index.css",
       "default": "./css/index.css"
@@ -48,6 +53,8 @@
   },
   "homepage": "https://github.com/AliSafari-IT/design-tokens#readme",
   "scripts": {
-    "demo": "pnpm --filter design-tokens-demo dev"
+    "demo": "pnpm --filter design-tokens-demo dev",
+    "build": "tsup",
+    "build:demo": "cd demo && pnpm build"
   }
 }

package/src/build/index.ts

@@ -0,0 +1,5 @@
+export { toCssVars, toCssVarNames, tokenPathToCssVarName } from "./toCssVars";
+export { toJson } from "./toJson";
+export { validateTokens } from "./validate";
+export type { CssVarDict } from "./toCssVars";
+export type { FlatTokenJson } from "./toJson";

package/src/build/toCssVars.ts

@@ -0,0 +1,31 @@
+import type { TokenTree } from "../core/types";
+import { toKebabCase, walkTokenTree } from "../core/utils";
+
+export type CssVarDict = Record<string, string>;
+
+export function tokenPathToCssVarName(path: string[]): string {
+  const kebabParts = path.map(toKebabCase);
+  return `--asm-${kebabParts.join("-")}`;
+}
+
+export function toCssVars(tree: TokenTree): CssVarDict {
+  const out: CssVarDict = {};
+
+  walkTokenTree(tree, ({ path, leaf }) => {
+    const cssVar = tokenPathToCssVarName(path);
+    out[cssVar] = String(leaf.value);
+  });
+
+  return out;
+}
+
+export function toCssVarNames(tree: TokenTree): Record<string, string> {
+  const out: Record<string, string> = {};
+
+  walkTokenTree(tree, ({ path }) => {
+    const dotPath = path.join(".");
+    out[dotPath] = tokenPathToCssVarName(path);
+  });
+
+  return out;
+}

package/src/build/toJson.ts

@@ -0,0 +1,20 @@
+import type { TokenTree } from "../core/types";
+import { walkTokenTree } from "../core/utils";
+
+export type FlatTokenJson = Record<string, { value: string | number; description: string; meta?: Record<string, unknown> }>;
+
+export function toJson(tree: TokenTree): FlatTokenJson {
+  const out: FlatTokenJson = {};
+
+  walkTokenTree(tree, ({ path, leaf }) => {
+    const key = path.join(".");
+    if (leaf.meta) {
+      out[key] = { value: leaf.value, description: leaf.description, meta: leaf.meta };
+      return;
+    }
+
+    out[key] = { value: leaf.value, description: leaf.description };
+  });
+
+  return out;
+}

package/src/build/validate.ts

@@ -0,0 +1,90 @@
+import type { ThemeDefinition, TokenTree, ValidateResult } from "../core/types";
+import { walkTokenTree } from "../core/utils";
+import { tokenPathToCssVarName } from "./toCssVars";
+
+const HEX_COLOR = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+
+export function validateTokens(args: {
+  tokens: TokenTree;
+  themes: ThemeDefinition[];
+}): ValidateResult {
+  const errors: string[] = [];
+  const warnings: string[] = [];
+
+  const seenDotKeys = new Set<string>();
+  const seenCssVars = new Set<string>();
+
+  walkTokenTree(args.tokens, ({ path, leaf }) => {
+    const dotKey = path.join(".");
+    if (seenDotKeys.has(dotKey)) {
+      errors.push(`Duplicate token key: ${dotKey}`);
+    } else {
+      seenDotKeys.add(dotKey);
+    }
+
+    if (!leaf.description || leaf.description.trim().length === 0) {
+      errors.push(`Missing description for token: ${dotKey}`);
+    }
+
+    const cssVar = tokenPathToCssVarName(path);
+    if (!cssVar.startsWith("--asm-")) {
+      errors.push(`Invalid CSS var prefix (must be --asm-): ${cssVar}`);
+    }
+
+    if (seenCssVars.has(cssVar)) {
+      errors.push(`Duplicate CSS var name generated: ${cssVar} (from ${dotKey})`);
+    } else {
+      seenCssVars.add(cssVar);
+    }
+
+    const v = leaf.value;
+    if (typeof v === "string" && v.startsWith("#") && !HEX_COLOR.test(v)) {
+      errors.push(`Invalid hex color for ${dotKey}: ${v}`);
+    }
+  });
+
+  const requiredThemeVars = [
+    "--asm-color-bg",
+    "--asm-color-surface",
+    "--asm-color-text",
+    "--asm-color-border",
+    "--asm-color-button-primary-bg",
+    "--asm-color-input-border-focus",
+    "--asm-color-focus-ring",
+    "--asm-color-overlay-scrim"
+  ];
+
+  const themeNames = new Set(args.themes.map(t => t.name));
+  for (const name of ["light", "dark", "high-contrast"] as const) {
+    if (!themeNames.has(name)) {
+      errors.push(`Missing required theme: ${name}`);
+    }
+  }
+
+  for (const theme of args.themes) {
+    if (theme.name !== "light" && theme.name !== "dark" && theme.name !== "high-contrast") {
+      warnings.push(`Theme has non-standard name: ${theme.name}`);
+    }
+
+    for (const varName of requiredThemeVars) {
+      if (!(varName in theme.tokens)) {
+        errors.push(`Theme '${theme.name}' missing required token override: ${varName}`);
+      }
+    }
+
+    for (const [key, value] of Object.entries(theme.tokens)) {
+      if (!key.startsWith("--asm-")) {
+        errors.push(`Theme '${theme.name}' contains non --asm- var: ${key}`);
+      }
+      if (typeof value === "string" && value.startsWith("#") && !HEX_COLOR.test(value)) {
+        errors.push(`Theme '${theme.name}' invalid hex for ${key}: ${value}`);
+      }
+    }
+  }
+
+  return {
+    ok: errors.length === 0,
+    errors,
+    warnings
+  };
+}

package/src/core/types.ts

@@ -0,0 +1,29 @@
+export type Token<T extends string | number = string> = {
+  value: T;
+  description: string;
+  meta?: Record<string, unknown>;
+};
+
+export type ThemeName = "light" | "dark" | "high-contrast";
+
+export type ThemeDefinition = {
+  name: ThemeName;
+  tokens: Record<string, string | number>;
+};
+
+export type DensityName = "compact" | "comfortable";
+
+export type DensityDefinition = {
+  name: DensityName;
+  tokens: Record<string, string | number>;
+};
+
+export type TokenTree = Record<string, unknown>;
+
+export type TokenLeaf = Token<string | number>;
+
+export type ValidateResult = {
+  ok: boolean;
+  errors: string[];
+  warnings: string[];
+};

package/src/core/utils.ts

@@ -0,0 +1,42 @@
+import type { TokenLeaf, TokenTree } from "./types";
+
+export function isTokenLeaf(value: unknown): value is TokenLeaf {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "value" in value &&
+    "description" in value &&
+    (typeof (value as any).value === "string" || typeof (value as any).value === "number") &&
+    typeof (value as any).description === "string"
+  );
+}
+
+export function toKebabCase(input: string): string {
+  return input
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/[_\s]+/g, "-")
+    .toLowerCase();
+}
+
+export function joinPath(path: string[], sep = "."): string {
+  return path.filter(Boolean).join(sep);
+}
+
+export function walkTokenTree(
+  tree: TokenTree,
+  visitor: (args: { path: string[]; leaf: TokenLeaf }) => void,
+  path: string[] = []
+) {
+  for (const [key, value] of Object.entries(tree)) {
+    const nextPath = [...path, key];
+
+    if (isTokenLeaf(value)) {
+      visitor({ path: nextPath, leaf: value });
+      continue;
+    }
+
+    if (typeof value === "object" && value !== null) {
+      walkTokenTree(value as TokenTree, visitor, nextPath);
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,60 @@
+import type { DensityDefinition, ThemeDefinition, Token, ValidateResult } from "./core/types";
+import { themes } from "./themes";
+import { tokens } from "./tokens";
+import { toCssVars, toCssVarNames } from "./build/toCssVars";
+import { validateTokens as validateTokensInternal } from "./build/validate";
+
+export type { ThemeDefinition, Token };
+export type { ValidateResult };
+
+export { tokens };
+export { themes };
+
+export const cssVarNames = toCssVarNames(tokens as any);
+
+export { toCssVars };
+
+export type ApplyThemeOptions = {
+  overrides?: Record<string, string | number>;
+  cleanup?: boolean;
+};
+
+export function applyThemeToElement(
+  element: { style: { setProperty: (k: string, v: string) => void; removeProperty: (k: string) => void } },
+  theme: ThemeDefinition | DensityDefinition,
+  options?: ApplyThemeOptions
+) {
+  const cleanup = options?.cleanup ?? false;
+
+  const keys = Object.keys(theme.tokens);
+  if (cleanup) {
+    for (const k of keys) {
+      element.style.removeProperty(k);
+    }
+  }
+
+  for (const [k, v] of Object.entries(theme.tokens)) {
+    element.style.setProperty(k, String(v));
+  }
+
+  if (options?.overrides) {
+    for (const [k, v] of Object.entries(options.overrides)) {
+      element.style.setProperty(k, String(v));
+    }
+  }
+}
+
+export function prefersColorScheme(): "light" | "dark" | undefined {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return undefined;
+  }
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export function validateTokens(): ValidateResult {
+  return validateTokensInternal({
+    tokens: tokens as any,
+    themes: [themes.light, themes.dark, themes.highContrast]
+  });
+}

package/src/themes/dark.ts

@@ -0,0 +1,64 @@
+import type { ThemeDefinition } from "../core/types";
+import { brand } from "../tokens/color/brand";
+import { neutral } from "../tokens/color/neutral";
+import { semantic } from "../tokens/color/semantic";
+import { overlays } from "../tokens/color/overlays";
+
+export const dark: ThemeDefinition = {
+  name: "dark",
+  tokens: {
+    "--asm-color-bg": "#0B1220",
+    "--asm-color-surface": "#0F172A",
+    "--asm-color-surface-muted": "#111B2E",
+    "--asm-color-panel": "#0F172A",
+    "--asm-color-modal": "#0F172A",
+
+    "--asm-color-text": "#E5E7EB",
+    "--asm-color-text-muted": "#9CA3AF",
+    "--asm-color-border": "#1F2937",
+
+    "--asm-color-brand-primary-50": brand.primary50.value,
+    "--asm-color-brand-primary-500": brand.primary500.value,
+    "--asm-color-brand-primary-600": brand.primary500.value,
+    "--asm-color-brand-primary-700": brand.primary600.value,
+
+    "--asm-color-semantic-success": semantic.success.value,
+    "--asm-color-semantic-warning": semantic.warning.value,
+    "--asm-color-semantic-error": semantic.error.value,
+    "--asm-color-semantic-info": semantic.info.value,
+
+    "--asm-color-button-primary-bg": brand.primary500.value,
+    "--asm-color-button-primary-bg-hover": brand.primary600.value,
+    "--asm-color-button-primary-bg-active": brand.primary600.value,
+    "--asm-color-button-primary-text": neutral.white.value,
+
+    "--asm-color-button-secondary-bg": "#111B2E",
+    "--asm-color-button-secondary-text": "#E5E7EB",
+
+    "--asm-color-button-ghost-bg-hover": "rgba(229, 231, 235, 0.08)",
+
+    "--asm-color-button-destructive-bg": "#F87171",
+    "--asm-color-button-destructive-text": "#0B1220",
+
+    "--asm-color-button-disabled-bg": "#1F2937",
+    "--asm-color-button-disabled-text": "#9CA3AF",
+
+    "--asm-color-input-bg": "#0B1220",
+    "--asm-color-input-text": "#E5E7EB",
+    "--asm-color-input-border": "#1F2937",
+    "--asm-color-input-border-hover": "#374151",
+    "--asm-color-input-border-focus": brand.primary500.value,
+    "--asm-color-input-placeholder": "#9CA3AF",
+    "--asm-color-input-error-border": "#F87171",
+    "--asm-color-input-success-border": "#22C55E",
+
+    "--asm-color-focus-ring": brand.primary500.value,
+
+    "--asm-color-overlay-scrim": overlays.scrimStrong.value,
+
+    "--asm-color-dataviz-gridline": "#1F2937",
+    "--asm-color-dataviz-axis": "#9CA3AF",
+    "--asm-color-dataviz-tooltip-bg": "#111827",
+    "--asm-color-dataviz-tooltip-text": "#F9FAFB"
+  }
+};

package/src/themes/densityComfortable.ts

@@ -0,0 +1,11 @@
+import type { DensityDefinition } from "../core/types";
+
+export const densityComfortable: DensityDefinition = {
+  name: "comfortable",
+  tokens: {
+    "--asm-density-factor": 1.05,
+    "--asm-space-component-gap": "18px",
+    "--asm-space-control-padding-y": "10px",
+    "--asm-space-control-padding-x": "14px"
+  }
+};

package/src/themes/densityCompact.ts

@@ -0,0 +1,11 @@
+import type { DensityDefinition } from "../core/types";
+
+export const densityCompact: DensityDefinition = {
+  name: "compact",
+  tokens: {
+    "--asm-density-factor": 0.9,
+    "--asm-space-component-gap": "12px",
+    "--asm-space-control-padding-y": "6px",
+    "--asm-space-control-padding-x": "10px"
+  }
+};

package/src/themes/highContrast.ts

@@ -0,0 +1,60 @@
+import type { ThemeDefinition } from "../core/types";
+
+export const highContrast: ThemeDefinition = {
+  name: "high-contrast",
+  tokens: {
+    "--asm-color-bg": "#000000",
+    "--asm-color-surface": "#000000",
+    "--asm-color-surface-muted": "#000000",
+    "--asm-color-panel": "#000000",
+    "--asm-color-modal": "#000000",
+
+    "--asm-color-text": "#FFFFFF",
+    "--asm-color-text-muted": "#FFFFFF",
+    "--asm-color-border": "#FFFFFF",
+
+    "--asm-color-brand-primary-50": "#FFFFFF",
+    "--asm-color-brand-primary-500": "#FFFFFF",
+    "--asm-color-brand-primary-600": "#FFFFFF",
+    "--asm-color-brand-primary-700": "#FFFFFF",
+
+    "--asm-color-semantic-success": "#00FF00",
+    "--asm-color-semantic-warning": "#FFFF00",
+    "--asm-color-semantic-error": "#FF0000",
+    "--asm-color-semantic-info": "#00FFFF",
+
+    "--asm-color-button-primary-bg": "#FFFFFF",
+    "--asm-color-button-primary-bg-hover": "#FFFFFF",
+    "--asm-color-button-primary-bg-active": "#FFFFFF",
+    "--asm-color-button-primary-text": "#000000",
+
+    "--asm-color-button-secondary-bg": "#000000",
+    "--asm-color-button-secondary-text": "#FFFFFF",
+
+    "--asm-color-button-ghost-bg-hover": "#FFFFFF",
+
+    "--asm-color-button-destructive-bg": "#FF0000",
+    "--asm-color-button-destructive-text": "#000000",
+
+    "--asm-color-button-disabled-bg": "#000000",
+    "--asm-color-button-disabled-text": "#FFFFFF",
+
+    "--asm-color-input-bg": "#000000",
+    "--asm-color-input-text": "#FFFFFF",
+    "--asm-color-input-border": "#FFFFFF",
+    "--asm-color-input-border-hover": "#FFFFFF",
+    "--asm-color-input-border-focus": "#FFFFFF",
+    "--asm-color-input-placeholder": "#FFFFFF",
+    "--asm-color-input-error-border": "#FF0000",
+    "--asm-color-input-success-border": "#00FF00",
+
+    "--asm-color-focus-ring": "#FFFFFF",
+
+    "--asm-color-overlay-scrim": "rgba(255, 255, 255, 0.9)",
+
+    "--asm-color-dataviz-gridline": "#FFFFFF",
+    "--asm-color-dataviz-axis": "#FFFFFF",
+    "--asm-color-dataviz-tooltip-bg": "#FFFFFF",
+    "--asm-color-dataviz-tooltip-text": "#000000"
+  }
+};

package/src/themes/index.ts

@@ -0,0 +1,21 @@
+export { light } from "./light";
+export { dark } from "./dark";
+export { highContrast } from "./highContrast";
+export { densityCompact } from "./densityCompact";
+export { densityComfortable } from "./densityComfortable";
+
+import { light } from "./light";
+import { dark } from "./dark";
+import { highContrast } from "./highContrast";
+import { densityCompact } from "./densityCompact";
+import { densityComfortable } from "./densityComfortable";
+
+export const themes = {
+  light,
+  dark,
+  highContrast,
+  density: {
+    compact: densityCompact,
+    comfortable: densityComfortable
+  }
+} as const;

package/src/themes/light.ts

@@ -0,0 +1,64 @@
+import type { ThemeDefinition } from "../core/types";
+import { brand } from "../tokens/color/brand";
+import { neutral } from "../tokens/color/neutral";
+import { semantic } from "../tokens/color/semantic";
+import { overlays } from "../tokens/color/overlays";
+
+export const light: ThemeDefinition = {
+  name: "light",
+  tokens: {
+    "--asm-color-bg": neutral.gray50.value,
+    "--asm-color-surface": neutral.white.value,
+    "--asm-color-surface-muted": "#F3F4F6",
+    "--asm-color-panel": neutral.white.value,
+    "--asm-color-modal": neutral.white.value,
+
+    "--asm-color-text": neutral.gray900.value,
+    "--asm-color-text-muted": neutral.gray500.value,
+    "--asm-color-border": neutral.gray300.value,
+
+    "--asm-color-brand-primary-50": brand.primary50.value,
+    "--asm-color-brand-primary-500": brand.primary500.value,
+    "--asm-color-brand-primary-600": brand.primary600.value,
+    "--asm-color-brand-primary-700": brand.primary700.value,
+
+    "--asm-color-semantic-success": semantic.success.value,
+    "--asm-color-semantic-warning": semantic.warning.value,
+    "--asm-color-semantic-error": semantic.error.value,
+    "--asm-color-semantic-info": semantic.info.value,
+
+    "--asm-color-button-primary-bg": brand.primary600.value,
+    "--asm-color-button-primary-bg-hover": brand.primary700.value,
+    "--asm-color-button-primary-bg-active": brand.primary700.value,
+    "--asm-color-button-primary-text": neutral.white.value,
+
+    "--asm-color-button-secondary-bg": neutral.white.value,
+    "--asm-color-button-secondary-text": neutral.gray900.value,
+
+    "--asm-color-button-ghost-bg-hover": "rgba(17, 24, 39, 0.06)",
+
+    "--asm-color-button-destructive-bg": semantic.error.value,
+    "--asm-color-button-destructive-text": neutral.white.value,
+
+    "--asm-color-button-disabled-bg": neutral.gray300.value,
+    "--asm-color-button-disabled-text": neutral.gray700.value,
+
+    "--asm-color-input-bg": neutral.white.value,
+    "--asm-color-input-text": neutral.gray900.value,
+    "--asm-color-input-border": neutral.gray300.value,
+    "--asm-color-input-border-hover": neutral.gray500.value,
+    "--asm-color-input-border-focus": brand.primary600.value,
+    "--asm-color-input-placeholder": neutral.gray500.value,
+    "--asm-color-input-error-border": semantic.error.value,
+    "--asm-color-input-success-border": semantic.success.value,
+
+    "--asm-color-focus-ring": brand.primary500.value,
+
+    "--asm-color-overlay-scrim": overlays.scrim.value,
+
+    "--asm-color-dataviz-gridline": neutral.gray300.value,
+    "--asm-color-dataviz-axis": neutral.gray500.value,
+    "--asm-color-dataviz-tooltip-bg": neutral.gray900.value,
+    "--asm-color-dataviz-tooltip-text": neutral.gray50.value
+  }
+};

package/src/tokens/color/accent.ts

@@ -0,0 +1,20 @@
+import type { Token } from "../../core/types";
+
+export const accent = {
+  purple500: {
+    value: "#8B5CF6",
+    description: "Accent purple for special contexts (e.g., highlights)."
+  } satisfies Token,
+  cyan500: {
+    value: "#06B6D4",
+    description: "Accent cyan for special contexts (e.g., data accents)."
+  } satisfies Token,
+  pink500: {
+    value: "#EC4899",
+    description: "Accent pink for special contexts."
+  } satisfies Token,
+  lime500: {
+    value: "#84CC16",
+    description: "Accent lime for special contexts."
+  } satisfies Token
+} as const;