@kuniversedev/design-tokens 1.0.0

package/dist/css.cjs

@@ -0,0 +1,348 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/css-vars.ts
+var css_vars_exports = {};
+__export(css_vars_exports, {
+  applyCSSVarsToDocument: () => applyCSSVarsToDocument,
+  cssVarsString: () => cssVarsString,
+  darkThemeCSS: () => darkThemeCSS,
+  flattenTokens: () => flattenTokens,
+  generateCSSVars: () => generateCSSVars,
+  generateCompleteCSS: () => generateCompleteCSS,
+  generateDarkThemeCSS: () => generateDarkThemeCSS,
+  generateLightThemeCSS: () => generateLightThemeCSS,
+  getCSSVar: () => getCSSVar,
+  lightThemeCSS: () => lightThemeCSS,
+  setCSSVar: () => setCSSVar
+});
+module.exports = __toCommonJS(css_vars_exports);
+
+// src/index.ts
+var colorsImpl = {
+  // Base neutrals
+  black: "#000000",
+  white: "#FFFFFF",
+  gray: {
+    100: "#F5F5F5",
+    300: "#D4D4D4",
+    500: "#737373",
+    700: "#404040",
+    900: "#171717"
+  },
+  // Dark mode semantic surfaces
+  background: "#0A0A0A",
+  surface: "#1A1A1A",
+  foreground: "#FFFFFF",
+  muted: "#2A2A2A",
+  border: "#333333",
+  // Accent / status
+  primary: "#0066FF",
+  secondary: "#00CC88",
+  success: "#00DD77",
+  error: "#FF3333",
+  warning: "#FFAA00"
+};
+var typographyImpl = {
+  fontFamily: {
+    sans: 'Power Grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    mono: 'JetBrains Mono, "Fira Code", monospace',
+    display: 'Power Grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  },
+  scale: {
+    hero: { size: "4rem", lineHeight: "1.125", weight: 700 },
+    // 64px
+    h1: { size: "3rem", lineHeight: "1.167", weight: 700 },
+    // 48px
+    h2: { size: "2rem", lineHeight: "1.25", weight: 600 },
+    // 32px
+    h3: { size: "1.5rem", lineHeight: "1.333", weight: 600 },
+    // 24px
+    body: { size: "1rem", lineHeight: "1.5", weight: 400 },
+    // 16px
+    small: { size: "0.875rem", lineHeight: "1.429", weight: 400 },
+    // 14px
+    tiny: { size: "0.75rem", lineHeight: "1.333", weight: 400 }
+    // 12px
+  },
+  fontWeight: {
+    thin: 200,
+    light: 300,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    black: 900
+  }
+};
+var spacingImpl = {
+  0: "0",
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  7: "28px",
+  8: "32px",
+  9: "36px",
+  10: "40px",
+  12: "48px",
+  14: "56px",
+  15: "60px",
+  // K-Universe 60px margin principle
+  16: "64px",
+  18: "72px",
+  20: "80px",
+  24: "96px",
+  32: "128px"
+};
+var motionImpl = {
+  duration: {
+    instant: "100ms",
+    fast: "200ms",
+    default: "300ms",
+    slow: "500ms",
+    crawl: "800ms"
+  },
+  easing: {
+    default: "cubic-bezier(0.4, 0, 0.2, 1)",
+    smooth: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+    sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
+    accelerate: "cubic-bezier(0.4, 0, 1, 1)",
+    decelerate: "cubic-bezier(0, 0, 0.2, 1)"
+  }
+};
+var layoutImpl = {
+  margin: "60px",
+  // primary horizontal landmark
+  sectionSpacing: "96px",
+  container: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    max: "1320px"
+    // K-Universe max-width
+  },
+  measure: "65ch"
+};
+var radiusImpl = {
+  none: "0",
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px",
+  "2xl": "16px",
+  "3xl": "24px",
+  round: "9999px"
+};
+var shadowsImpl = {
+  xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+  "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)",
+  cardHover: "0 20px 55px rgba(0, 0, 0, 0.55)",
+  elevated: "0 24px 60px rgba(0, 0, 0, 0.45)"
+};
+var zIndexImpl = {
+  bg: -1,
+  base: 0,
+  content: 10,
+  dropdown: 100,
+  sticky: 200,
+  overlay: 300,
+  modal: 400,
+  popover: 500,
+  tooltip: 600,
+  toast: 700
+};
+var borderWidthImpl = {
+  thin: "1px",
+  base: "2px",
+  thick: "4px"
+};
+var tokens = {
+  colors: colorsImpl,
+  typography: typographyImpl,
+  spacing: spacingImpl,
+  motion: motionImpl,
+  layout: layoutImpl,
+  radius: radiusImpl,
+  shadows: shadowsImpl,
+  zIndex: zIndexImpl,
+  borderWidth: borderWidthImpl
+};
+var colors = tokens.colors;
+var typography = tokens.typography;
+var spacing = tokens.spacing;
+var motion = tokens.motion;
+var layout = tokens.layout;
+var radius = tokens.radius;
+var shadows = tokens.shadows;
+var zIndex = tokens.zIndex;
+var borderWidth = tokens.borderWidth;
+
+// src/css-vars.ts
+function toKebab(str) {
+  return str.replace(/([a-z\d])([A-Z])/g, "$1-$2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").toLowerCase();
+}
+var CATEGORY_PREFIXES = {
+  colors: "color",
+  typography: "",
+  // further split per sub-key (font-family, scale, font-weight)
+  spacing: "spacing",
+  motion: "",
+  // split: duration, easing
+  layout: "layout",
+  radius: "radius",
+  shadows: "shadow",
+  zIndex: "z-index",
+  borderWidth: "border-width"
+};
+function flattenTokens(obj, prefix) {
+  if (obj === null || obj === void 0) return [];
+  if (typeof obj !== "object" || Array.isArray(obj)) {
+    return [[`--${prefix}`, String(obj)]];
+  }
+  const pairs = [];
+  for (const [key, value] of Object.entries(obj)) {
+    const segment = toKebab(key);
+    const nextPrefix = prefix ? `${prefix}-${segment}` : segment;
+    pairs.push(...flattenTokens(value, nextPrefix));
+  }
+  return pairs;
+}
+function pairsForCategory(categoryKey, value) {
+  const prefix = CATEGORY_PREFIXES[categoryKey];
+  return flattenTokens(value, prefix);
+}
+function buildPairs(t) {
+  const pairs = [];
+  for (const key of Object.keys(t)) {
+    pairs.push(...pairsForCategory(key, t[key]));
+  }
+  return pairs;
+}
+function pairsToLines(pairs, indent = "  ") {
+  return pairs.map(([name, val]) => `${indent}${name}: ${val};`).join("\n");
+}
+var SECTION_LABELS = {
+  colors: "Colors",
+  typography: "Typography",
+  spacing: "Spacing",
+  motion: "Motion",
+  layout: "Layout",
+  radius: "Border Radius",
+  shadows: "Shadows",
+  zIndex: "Z-Index",
+  borderWidth: "Border Width"
+};
+function buildSectionedCSSBody(t, indent = "  ") {
+  const sections = [];
+  for (const key of Object.keys(t)) {
+    const label = SECTION_LABELS[key] ?? key;
+    const pairs = pairsForCategory(key, t[key]);
+    if (pairs.length === 0) continue;
+    sections.push(`${indent}/* ${label} */`);
+    sections.push(pairsToLines(pairs, indent));
+  }
+  return sections.join("\n");
+}
+var LIGHT_THEME_OVERRIDES = [
+  ["--color-background", "#FFFFFF"],
+  ["--color-foreground", "#000000"],
+  ["--color-surface", "#F5F5F5"],
+  ["--color-muted", "#E5E5E5"],
+  ["--color-border", "#D4D4D4"]
+];
+function generateCSSVars(t, prefix) {
+  let pairs = buildPairs(t);
+  if (prefix) {
+    pairs = pairs.map(([name, val]) => [`--${prefix}-${name.slice(2)}`, val]);
+  }
+  return `:root {
+${pairsToLines(pairs)}
+}`;
+}
+function generateDarkThemeCSS(t) {
+  const body = buildSectionedCSSBody(t);
+  return `:root {
+${body}
+}`;
+}
+function generateLightThemeCSS(_t) {
+  const lines = LIGHT_THEME_OVERRIDES.map(([name, val]) => `  ${name}: ${val};`).join("\n");
+  return `[data-theme="light"] {
+${lines}
+}`;
+}
+function generateCompleteCSS(t) {
+  return [
+    generateDarkThemeCSS(t),
+    "",
+    generateLightThemeCSS(t)
+  ].join("\n");
+}
+function applyCSSVarsToDocument(theme) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const pairs = buildPairs(tokens);
+  for (const [name, value] of pairs) {
+    root.style.setProperty(name, value);
+  }
+  if (theme === "light") {
+    root.setAttribute("data-theme", "light");
+    for (const [name, value] of LIGHT_THEME_OVERRIDES) {
+      root.style.setProperty(name, value);
+    }
+  } else {
+    root.removeAttribute("data-theme");
+  }
+}
+function getCSSVar(name) {
+  if (typeof document === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function setCSSVar(name, value) {
+  if (typeof document === "undefined") return;
+  document.documentElement.style.setProperty(name, value);
+}
+var cssVarsString = generateCSSVars(tokens);
+var darkThemeCSS = generateDarkThemeCSS(tokens);
+var lightThemeCSS = generateLightThemeCSS(tokens);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  applyCSSVarsToDocument,
+  cssVarsString,
+  darkThemeCSS,
+  flattenTokens,
+  generateCSSVars,
+  generateCompleteCSS,
+  generateDarkThemeCSS,
+  generateLightThemeCSS,
+  getCSSVar,
+  lightThemeCSS,
+  setCSSVar
+});
+//# sourceMappingURL=css.cjs.map

package/dist/css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/css-vars.ts","../src/index.ts"],"sourcesContent":["/**\n * @k-universe/design-tokens — CSS custom properties generation\n *\n * Generates CSS variable strings from the token object and provides\n * browser utilities for applying / reading / writing CSS vars at runtime.\n *\n * Package exports needed (add to package.json exports — handled by Agent 5 / build config):\n *   \"./css\": \"./src/css-vars.ts\"\n *   \"./standalone/css\": \"./src/standalone/tokens.css\"\n */\n\n// Package exports needed: \"./css\": \"./src/css-vars.ts\", \"./standalone/css\": \"./src/standalone/tokens.css\"\n\nimport type { DesignTokens } from './types.js';\nimport { tokens } from './index.js';\n\n// ---------------------------------------------------------------------------\n// Internal: camelCase / PascalCase → kebab-case\n// ---------------------------------------------------------------------------\n\n/**\n * Converts a camelCase or PascalCase segment to kebab-case.\n * Numeric-only segments are left as-is (e.g. '100', '2xl').\n */\nfunction toKebab(str: string): string {\n  return str\n    // Insert hyphen before uppercase letters that follow a lowercase/digit\n    .replace(/([a-z\\d])([A-Z])/g, '$1-$2')\n    // Insert hyphen before uppercase letters that are followed by lowercase (e.g. XMLParser → xml-parser)\n    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')\n    .toLowerCase();\n}\n\n// ---------------------------------------------------------------------------\n// Internal: CSS-var name prefix map per top-level token category\n// ---------------------------------------------------------------------------\n\nconst CATEGORY_PREFIXES: Record<string, string> = {\n  colors:      'color',\n  typography:  '',          // further split per sub-key (font-family, scale, font-weight)\n  spacing:     'spacing',\n  motion:      '',          // split: duration, easing\n  layout:      'layout',\n  radius:      'radius',\n  shadows:     'shadow',\n  zIndex:      'z-index',\n  borderWidth: 'border-width',\n};\n\n// ---------------------------------------------------------------------------\n// Internal: flattenTokens\n// ---------------------------------------------------------------------------\n\n/**\n * Recursively walks an object and produces a flat array of\n * `['--name', 'value']` pairs for every leaf node.\n *\n * @param obj    - The (sub-)object to walk.\n * @param prefix - Accumulated CSS-var name prefix (without leading `--`).\n * @returns      Array of `[varName, value]` tuples.\n */\nexport function flattenTokens(\n  obj: unknown,\n  prefix: string,\n): Array<[string, string]> {\n  if (obj === null || obj === undefined) return [];\n\n  if (typeof obj !== 'object' || Array.isArray(obj)) {\n    // Leaf value — emit the var\n    return [[`--${prefix}`, String(obj)]];\n  }\n\n  const pairs: Array<[string, string]> = [];\n\n  for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {\n    const segment = toKebab(key);\n    const nextPrefix = prefix ? `${prefix}-${segment}` : segment;\n    pairs.push(...flattenTokens(value, nextPrefix));\n  }\n\n  return pairs;\n}\n\n// ---------------------------------------------------------------------------\n// Internal: build pairs for one top-level token category\n// ---------------------------------------------------------------------------\n\nfunction pairsForCategory(\n  categoryKey: keyof DesignTokens,\n  value: unknown,\n): Array<[string, string]> {\n  const prefix = CATEGORY_PREFIXES[categoryKey as string];\n  return flattenTokens(value, prefix);\n}\n\n// ---------------------------------------------------------------------------\n// Internal: build the full flat pairs map from a DesignTokens object\n// ---------------------------------------------------------------------------\n\nfunction buildPairs(t: DesignTokens): Array<[string, string]> {\n  const pairs: Array<[string, string]> = [];\n\n  for (const key of Object.keys(t) as Array<keyof DesignTokens>) {\n    pairs.push(...pairsForCategory(key, t[key]));\n  }\n\n  return pairs;\n}\n\n// ---------------------------------------------------------------------------\n// Internal: pairs → CSS property lines, indented\n// ---------------------------------------------------------------------------\n\nfunction pairsToLines(pairs: Array<[string, string]>, indent = '  '): string {\n  return pairs.map(([name, val]) => `${indent}${name}: ${val};`).join('\\n');\n}\n\n// ---------------------------------------------------------------------------\n// Internal: section-commented block builder\n// ---------------------------------------------------------------------------\n\nconst SECTION_LABELS: Partial<Record<keyof DesignTokens, string>> = {\n  colors:      'Colors',\n  typography:  'Typography',\n  spacing:     'Spacing',\n  motion:      'Motion',\n  layout:      'Layout',\n  radius:      'Border Radius',\n  shadows:     'Shadows',\n  zIndex:      'Z-Index',\n  borderWidth: 'Border Width',\n};\n\nfunction buildSectionedCSSBody(t: DesignTokens, indent = '  '): string {\n  const sections: string[] = [];\n\n  for (const key of Object.keys(t) as Array<keyof DesignTokens>) {\n    const label = SECTION_LABELS[key] ?? key;\n    const pairs = pairsForCategory(key, t[key]);\n    if (pairs.length === 0) continue;\n\n    sections.push(`${indent}/* ${label} */`);\n    sections.push(pairsToLines(pairs, indent));\n  }\n\n  return sections.join('\\n');\n}\n\n// ---------------------------------------------------------------------------\n// Light-theme overrides (semantic surface colours only)\n// ---------------------------------------------------------------------------\n\n/**\n * The light theme overrides only the semantic surface tokens.\n * All other tokens (spacing, motion, etc.) remain unchanged.\n */\nconst LIGHT_THEME_OVERRIDES: Array<[string, string]> = [\n  ['--color-background',  '#FFFFFF'],\n  ['--color-foreground',  '#000000'],\n  ['--color-surface',     '#F5F5F5'],\n  ['--color-muted',       '#E5E5E5'],\n  ['--color-border',      '#D4D4D4'],\n];\n\n// ---------------------------------------------------------------------------\n// Public: generateCSSVars\n// ---------------------------------------------------------------------------\n\n/**\n * Generates a `:root { ... }` CSS block string from a DesignTokens object.\n *\n * @param t      - Token object to generate from.\n * @param prefix - Optional additional prefix for all var names (rarely needed).\n *\n * @example\n * ```typescript\n * import { generateCSSVars, tokens } from \"@k-universe/design-tokens/css\";\n * const css = generateCSSVars(tokens);\n * // \":root {\\n  --color-background: #0A0A0A;\\n  ...\\n}\"\n * ```\n */\nexport function generateCSSVars(t: DesignTokens, prefix?: string): string {\n  let pairs = buildPairs(t);\n\n  if (prefix) {\n    pairs = pairs.map(([name, val]) => [`--${prefix}-${name.slice(2)}`, val]);\n  }\n\n  return `:root {\\n${pairsToLines(pairs)}\\n}`;\n}\n\n// ---------------------------------------------------------------------------\n// Public: generateDarkThemeCSS\n// ---------------------------------------------------------------------------\n\n/**\n * Generates the dark-theme `:root { ... }` block.\n * Dark mode is the default / primary context for K-Universe.\n *\n * @example\n * ```typescript\n * const css = generateDarkThemeCSS(tokens);\n * ```\n */\nexport function generateDarkThemeCSS(t: DesignTokens): string {\n  const body = buildSectionedCSSBody(t);\n  return `:root {\\n${body}\\n}`;\n}\n\n// ---------------------------------------------------------------------------\n// Public: generateLightThemeCSS\n// ---------------------------------------------------------------------------\n\n/**\n * Generates the `[data-theme=\"light\"] { ... }` override block.\n * Only overrides semantic surface colours — all other tokens are inherited.\n *\n * @example\n * ```typescript\n * const css = generateLightThemeCSS(tokens);\n * ```\n */\nexport function generateLightThemeCSS(_t: DesignTokens): string {\n  const lines = LIGHT_THEME_OVERRIDES\n    .map(([name, val]) => `  ${name}: ${val};`)\n    .join('\\n');\n  return `[data-theme=\"light\"] {\\n${lines}\\n}`;\n}\n\n// ---------------------------------------------------------------------------\n// Public: generateCompleteCSS\n// ---------------------------------------------------------------------------\n\n/**\n * Generates the complete CSS: dark `:root` block + light `[data-theme=\"light\"]` block.\n *\n * @example\n * ```typescript\n * import { generateCompleteCSS, tokens } from \"@k-universe/design-tokens/css\";\n *\n * // In a Next.js layout or global stylesheet:\n * const css = generateCompleteCSS(tokens);\n * ```\n */\nexport function generateCompleteCSS(t: DesignTokens): string {\n  return [\n    generateDarkThemeCSS(t),\n    '',\n    generateLightThemeCSS(t),\n  ].join('\\n');\n}\n\n// ---------------------------------------------------------------------------\n// Public: applyCSSVarsToDocument\n// ---------------------------------------------------------------------------\n\n/**\n * Applies all design tokens as CSS custom properties to `document.documentElement`.\n * SSR-safe — no-ops when `document` is not available.\n *\n * @param theme - Optional theme override. Defaults to dark (no attribute set).\n *                Passing `'light'` sets `data-theme=\"light\"` on `<html>`.\n *                Passing `'dark'` removes the attribute.\n *\n * @example\n * ```typescript\n * // In a client-only bootstrap file:\n * import { applyCSSVarsToDocument } from \"@k-universe/design-tokens/css\";\n * applyCSSVarsToDocument(); // dark theme (default)\n * applyCSSVarsToDocument('light'); // light theme\n * ```\n */\nexport function applyCSSVarsToDocument(theme?: 'dark' | 'light'): void {\n  if (typeof document === 'undefined') return;\n\n  const root = document.documentElement;\n  const pairs = buildPairs(tokens);\n\n  for (const [name, value] of pairs) {\n    root.style.setProperty(name, value);\n  }\n\n  if (theme === 'light') {\n    root.setAttribute('data-theme', 'light');\n    for (const [name, value] of LIGHT_THEME_OVERRIDES) {\n      root.style.setProperty(name, value);\n    }\n  } else {\n    root.removeAttribute('data-theme');\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Public: getCSSVar / setCSSVar\n// ---------------------------------------------------------------------------\n\n/**\n * Reads a CSS custom property value from `document.documentElement` at runtime.\n * Returns an empty string when called server-side.\n *\n * @param name - Full CSS var name including `--`, e.g. `'--color-primary'`.\n *\n * @example\n * ```typescript\n * const primary = getCSSVar('--color-primary'); // '#0066FF'\n * ```\n */\nexport function getCSSVar(name: string): string {\n  if (typeof document === 'undefined') return '';\n  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n}\n\n/**\n * Sets a CSS custom property on `document.documentElement` at runtime.\n * No-ops when called server-side.\n *\n * @param name  - Full CSS var name including `--`, e.g. `'--color-primary'`.\n * @param value - The new value.\n *\n * @example\n * ```typescript\n * setCSSVar('--color-primary', '#FF6600');\n * ```\n */\nexport function setCSSVar(name: string, value: string): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.style.setProperty(name, value);\n}\n\n// ---------------------------------------------------------------------------\n// Pre-computed exports (generated at module load time)\n// ---------------------------------------------------------------------------\n\n/**\n * Pre-computed flat `:root { ... }` CSS string from the default token set.\n * Import and inject directly into a `<style>` tag or CSS-in-JS system.\n *\n * @example\n * ```typescript\n * import { cssVarsString } from \"@k-universe/design-tokens/css\";\n * // inject into a <style> tag in layout.tsx\n * ```\n */\nexport const cssVarsString: string = generateCSSVars(tokens);\n\n/**\n * Pre-computed dark-theme `:root { ... }` block with section comments.\n */\nexport const darkThemeCSS: string = generateDarkThemeCSS(tokens);\n\n/**\n * Pre-computed `[data-theme=\"light\"] { ... }` override block.\n */\nexport const lightThemeCSS: string = generateLightThemeCSS(tokens);\n","/**\n * @k-universe/design-tokens\n *\n * Foundational design token implementation for K-Universe.\n * All values are authoritative — derived from the K-Universe design system spec.\n *\n * @example\n * ```typescript\n * import { tokens } from \"@k-universe/design-tokens\";\n *\n * tokens.colors.background     // '#0A0A0A'\n * tokens.colors.foreground     // '#FFFFFF'\n * tokens.colors.secondary      // '#00CC88'\n * tokens.typography.fontFamily.sans  // 'Power Grotesk, ...'\n * ```\n */\n\n// Re-export all types from the types module\nexport type {\n  ColorToken,\n  DimensionToken,\n  DurationToken,\n  EasingToken,\n  ShadowToken,\n  ColorScale,\n  ColorTokens,\n  TypeScaleEntry,\n  FontFamilyTokens,\n  TypeScaleTokens,\n  FontWeightTokens,\n  TypographyTokens,\n  SpacingTokens,\n  DurationTokens,\n  EasingTokens,\n  MotionTokens,\n  ContainerTokens,\n  LayoutTokens,\n  RadiusTokens,\n  ShadowTokens,\n  ZIndexTokens,\n  BorderWidthTokens,\n  DesignTokens,\n} from './types.js';\n\nimport type { DesignTokens } from './types.js';\n\n// ---------------------------------------------------------------------------\n// Colors\n// ---------------------------------------------------------------------------\n\nconst colorsImpl = {\n  // Base neutrals\n  black: '#000000',\n  white: '#FFFFFF',\n  gray: {\n    100: '#F5F5F5',\n    300: '#D4D4D4',\n    500: '#737373',\n    700: '#404040',\n    900: '#171717',\n  },\n\n  // Dark mode semantic surfaces\n  background: '#0A0A0A',\n  surface: '#1A1A1A',\n  foreground: '#FFFFFF',\n  muted: '#2A2A2A',\n  border: '#333333',\n\n  // Accent / status\n  primary: '#0066FF',\n  secondary: '#00CC88',\n  success: '#00DD77',\n  error: '#FF3333',\n  warning: '#FFAA00',\n} as const satisfies DesignTokens['colors'];\n\n// ---------------------------------------------------------------------------\n// Typography\n// ---------------------------------------------------------------------------\n\nconst typographyImpl = {\n  fontFamily: {\n    sans: 'Power Grotesk, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    mono: 'JetBrains Mono, \"Fira Code\", monospace',\n    display: 'Power Grotesk, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n  },\n\n  scale: {\n    hero:  { size: '4rem',     lineHeight: '1.125', weight: 700 },  // 64px\n    h1:    { size: '3rem',     lineHeight: '1.167', weight: 700 },  // 48px\n    h2:    { size: '2rem',     lineHeight: '1.25',  weight: 600 },  // 32px\n    h3:    { size: '1.5rem',   lineHeight: '1.333', weight: 600 },  // 24px\n    body:  { size: '1rem',     lineHeight: '1.5',   weight: 400 },  // 16px\n    small: { size: '0.875rem', lineHeight: '1.429', weight: 400 },  // 14px\n    tiny:  { size: '0.75rem',  lineHeight: '1.333', weight: 400 },  // 12px\n  },\n\n  fontWeight: {\n    thin:     200,\n    light:    300,\n    regular:  400,\n    medium:   500,\n    semibold: 600,\n    bold:     700,\n    black:    900,\n  },\n} as const satisfies DesignTokens['typography'];\n\n// ---------------------------------------------------------------------------\n// Spacing — 8px base grid\n// ---------------------------------------------------------------------------\n\nconst spacingImpl = {\n  0:  '0',\n  1:  '4px',\n  2:  '8px',\n  3:  '12px',\n  4:  '16px',\n  5:  '20px',\n  6:  '24px',\n  7:  '28px',\n  8:  '32px',\n  9:  '36px',\n  10: '40px',\n  12: '48px',\n  14: '56px',\n  15: '60px',  // K-Universe 60px margin principle\n  16: '64px',\n  18: '72px',\n  20: '80px',\n  24: '96px',\n  32: '128px',\n} as const satisfies DesignTokens['spacing'];\n\n// ---------------------------------------------------------------------------\n// Motion\n// ---------------------------------------------------------------------------\n\nconst motionImpl = {\n  duration: {\n    instant: '100ms',\n    fast:    '200ms',\n    default: '300ms',\n    slow:    '500ms',\n    crawl:   '800ms',\n  },\n\n  easing: {\n    default:    'cubic-bezier(0.4, 0, 0.2, 1)',\n    smooth:     'cubic-bezier(0.25, 0.1, 0.25, 1)',\n    sharp:      'cubic-bezier(0.4, 0, 0.6, 1)',\n    accelerate: 'cubic-bezier(0.4, 0, 1, 1)',\n    decelerate: 'cubic-bezier(0, 0, 0.2, 1)',\n  },\n} as const satisfies DesignTokens['motion'];\n\n// ---------------------------------------------------------------------------\n// Layout\n// ---------------------------------------------------------------------------\n\nconst layoutImpl = {\n  margin:         '60px',   // primary horizontal landmark\n  sectionSpacing: '96px',\n  container: {\n    sm:  '640px',\n    md:  '768px',\n    lg:  '1024px',\n    xl:  '1280px',\n    max: '1320px',          // K-Universe max-width\n  },\n  measure: '65ch',\n} as const satisfies DesignTokens['layout'];\n\n// ---------------------------------------------------------------------------\n// Border radius\n// ---------------------------------------------------------------------------\n\nconst radiusImpl = {\n  none: '0',\n  xs:   '2px',\n  sm:   '4px',\n  md:   '6px',\n  lg:   '8px',\n  xl:   '12px',\n  '2xl': '16px',\n  '3xl': '24px',\n  round: '9999px',\n} as const satisfies DesignTokens['radius'];\n\n// ---------------------------------------------------------------------------\n// Shadows — neutral black only, no colored glow\n// ---------------------------------------------------------------------------\n\nconst shadowsImpl = {\n  xs:        '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n  sm:        '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',\n  md:        '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',\n  lg:        '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',\n  xl:        '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',\n  '2xl':     '0 25px 50px -12px rgba(0, 0, 0, 0.25)',\n  inner:     'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)',\n  cardHover: '0 20px 55px rgba(0, 0, 0, 0.55)',\n  elevated:  '0 24px 60px rgba(0, 0, 0, 0.45)',\n} as const satisfies DesignTokens['shadows'];\n\n// ---------------------------------------------------------------------------\n// Z-index\n// ---------------------------------------------------------------------------\n\nconst zIndexImpl = {\n  bg:       -1,\n  base:      0,\n  content:   10,\n  dropdown:  100,\n  sticky:    200,\n  overlay:   300,\n  modal:     400,\n  popover:   500,\n  tooltip:   600,\n  toast:     700,\n} as const satisfies DesignTokens['zIndex'];\n\n// ---------------------------------------------------------------------------\n// Border width\n// ---------------------------------------------------------------------------\n\nconst borderWidthImpl = {\n  thin:  '1px',\n  base:  '2px',\n  thick: '4px',\n} as const satisfies DesignTokens['borderWidth'];\n\n// ---------------------------------------------------------------------------\n// Root tokens object\n// ---------------------------------------------------------------------------\n\n/**\n * Primary design tokens export.\n *\n * @example\n * ```typescript\n * import { tokens } from \"@k-universe/design-tokens\";\n *\n * tokens.colors.background          // '#0A0A0A'\n * tokens.colors.foreground          // '#FFFFFF'\n * tokens.colors.secondary           // '#00CC88'\n * tokens.typography.fontFamily.sans // 'Power Grotesk, ...'\n * tokens.spacing[15]                // '60px'  — 60px margin principle\n * tokens.motion.duration.default    // '300ms'\n * ```\n */\nexport const tokens: DesignTokens = {\n  colors:      colorsImpl,\n  typography:  typographyImpl,\n  spacing:     spacingImpl,\n  motion:      motionImpl,\n  layout:      layoutImpl,\n  radius:      radiusImpl,\n  shadows:     shadowsImpl,\n  zIndex:      zIndexImpl,\n  borderWidth: borderWidthImpl,\n};\n\n// ---------------------------------------------------------------------------\n// Convenience shortcut exports\n// ---------------------------------------------------------------------------\n\n/** Alias for tokens — backwards compatibility. */\nexport const designTokens: DesignTokens = tokens;\n\n/** Shortcut: tokens.colors */\nexport const colors = tokens.colors;\n\n/** Shortcut: tokens.typography */\nexport const typography = tokens.typography;\n\n/** Shortcut: tokens.spacing */\nexport const spacing = tokens.spacing;\n\n/** Shortcut: tokens.motion */\nexport const motion = tokens.motion;\n\n/** Shortcut: tokens.layout */\nexport const layout = tokens.layout;\n\n/** Shortcut: tokens.radius */\nexport const radius = tokens.radius;\n\n/** Shortcut: tokens.shadows */\nexport const shadows = tokens.shadows;\n\n/** Shortcut: tokens.zIndex */\nexport const zIndex = tokens.zIndex;\n\n/** Shortcut: tokens.borderWidth */\nexport const borderWidth = tokens.borderWidth;\n\n// ---------------------------------------------------------------------------\n// Utility: mergeTokens\n// ---------------------------------------------------------------------------\n\ntype DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\n/**\n * Deep-merges override tokens into a base token set.\n * Returns a new object — does not mutate the base.\n *\n * @example\n * ```typescript\n * import { tokens, mergeTokens } from \"@k-universe/design-tokens\";\n *\n * const theme = mergeTokens(tokens, {\n *   colors: { primary: '#FF6600' },\n * });\n * ```\n */\nexport function mergeTokens(\n  base: DesignTokens,\n  overrides: DeepPartial<DesignTokens>,\n): DesignTokens {\n  return deepMerge(base, overrides) as DesignTokens;\n}\n\nfunction deepMerge<T extends object>(target: T, source: DeepPartial<T>): T {\n  const result: T = { ...target };\n\n  for (const key in source) {\n    if (!Object.prototype.hasOwnProperty.call(source, key)) continue;\n\n    const sourceVal = source[key as keyof typeof source];\n    const targetVal = target[key as keyof T];\n\n    if (\n      sourceVal !== null &&\n      typeof sourceVal === 'object' &&\n      !Array.isArray(sourceVal) &&\n      targetVal !== null &&\n      typeof targetVal === 'object' &&\n      !Array.isArray(targetVal)\n    ) {\n      (result as Record<string, unknown>)[key] = deepMerge(\n        targetVal as object,\n        sourceVal as DeepPartial<typeof targetVal>,\n      );\n    } else if (sourceVal !== undefined) {\n      (result as Record<string, unknown>)[key] = sourceVal;\n    }\n  }\n\n  return result;\n}\n\n// ---------------------------------------------------------------------------\n// Utility: getTokenByPath\n// ---------------------------------------------------------------------------\n\n/**\n * Retrieves a token value using dot-notation path access.\n *\n * @param obj  - The token object to traverse (typically `tokens`).\n * @param path - Dot-notation path string, e.g. `'colors.primary'`.\n * @returns The value at the given path, or `undefined` if not found.\n *\n * @example\n * ```typescript\n * import { tokens, getTokenByPath } from \"@k-universe/design-tokens\";\n *\n * getTokenByPath(tokens, 'colors.primary')          // '#0066FF'\n * getTokenByPath(tokens, 'motion.duration.default') // '300ms'\n * getTokenByPath(tokens, 'spacing.15')              // '60px'\n * ```\n */\nexport function getTokenByPath(\n  obj: unknown,\n  path: string,\n): unknown {\n  if (!path) return obj;\n\n  const segments = path.split('.');\n  let current: unknown = obj;\n\n  for (const segment of segments) {\n    if (current === null || current === undefined) return undefined;\n    if (typeof current !== 'object') return undefined;\n    current = (current as Record<string, unknown>)[segment];\n  }\n\n  return current;\n}\n"],"mappings":"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","names":[]}

package/dist/css.d.cts

@@ -0,0 +1,131 @@
+import { D as DesignTokens } from './types-BcWm9ccA.cjs';
+
+/**
+ * @k-universe/design-tokens — CSS custom properties generation
+ *
+ * Generates CSS variable strings from the token object and provides
+ * browser utilities for applying / reading / writing CSS vars at runtime.
+ *
+ * Package exports needed (add to package.json exports — handled by Agent 5 / build config):
+ *   "./css": "./src/css-vars.ts"
+ *   "./standalone/css": "./src/standalone/tokens.css"
+ */
+
+/**
+ * Recursively walks an object and produces a flat array of
+ * `['--name', 'value']` pairs for every leaf node.
+ *
+ * @param obj    - The (sub-)object to walk.
+ * @param prefix - Accumulated CSS-var name prefix (without leading `--`).
+ * @returns      Array of `[varName, value]` tuples.
+ */
+declare function flattenTokens(obj: unknown, prefix: string): Array<[string, string]>;
+/**
+ * Generates a `:root { ... }` CSS block string from a DesignTokens object.
+ *
+ * @param t      - Token object to generate from.
+ * @param prefix - Optional additional prefix for all var names (rarely needed).
+ *
+ * @example
+ * ```typescript
+ * import { generateCSSVars, tokens } from "@k-universe/design-tokens/css";
+ * const css = generateCSSVars(tokens);
+ * // ":root {\n  --color-background: #0A0A0A;\n  ...\n}"
+ * ```
+ */
+declare function generateCSSVars(t: DesignTokens, prefix?: string): string;
+/**
+ * Generates the dark-theme `:root { ... }` block.
+ * Dark mode is the default / primary context for K-Universe.
+ *
+ * @example
+ * ```typescript
+ * const css = generateDarkThemeCSS(tokens);
+ * ```
+ */
+declare function generateDarkThemeCSS(t: DesignTokens): string;
+/**
+ * Generates the `[data-theme="light"] { ... }` override block.
+ * Only overrides semantic surface colours — all other tokens are inherited.
+ *
+ * @example
+ * ```typescript
+ * const css = generateLightThemeCSS(tokens);
+ * ```
+ */
+declare function generateLightThemeCSS(_t: DesignTokens): string;
+/**
+ * Generates the complete CSS: dark `:root` block + light `[data-theme="light"]` block.
+ *
+ * @example
+ * ```typescript
+ * import { generateCompleteCSS, tokens } from "@k-universe/design-tokens/css";
+ *
+ * // In a Next.js layout or global stylesheet:
+ * const css = generateCompleteCSS(tokens);
+ * ```
+ */
+declare function generateCompleteCSS(t: DesignTokens): string;
+/**
+ * Applies all design tokens as CSS custom properties to `document.documentElement`.
+ * SSR-safe — no-ops when `document` is not available.
+ *
+ * @param theme - Optional theme override. Defaults to dark (no attribute set).
+ *                Passing `'light'` sets `data-theme="light"` on `<html>`.
+ *                Passing `'dark'` removes the attribute.
+ *
+ * @example
+ * ```typescript
+ * // In a client-only bootstrap file:
+ * import { applyCSSVarsToDocument } from "@k-universe/design-tokens/css";
+ * applyCSSVarsToDocument(); // dark theme (default)
+ * applyCSSVarsToDocument('light'); // light theme
+ * ```
+ */
+declare function applyCSSVarsToDocument(theme?: 'dark' | 'light'): void;
+/**
+ * Reads a CSS custom property value from `document.documentElement` at runtime.
+ * Returns an empty string when called server-side.
+ *
+ * @param name - Full CSS var name including `--`, e.g. `'--color-primary'`.
+ *
+ * @example
+ * ```typescript
+ * const primary = getCSSVar('--color-primary'); // '#0066FF'
+ * ```
+ */
+declare function getCSSVar(name: string): string;
+/**
+ * Sets a CSS custom property on `document.documentElement` at runtime.
+ * No-ops when called server-side.
+ *
+ * @param name  - Full CSS var name including `--`, e.g. `'--color-primary'`.
+ * @param value - The new value.
+ *
+ * @example
+ * ```typescript
+ * setCSSVar('--color-primary', '#FF6600');
+ * ```
+ */
+declare function setCSSVar(name: string, value: string): void;
+/**
+ * Pre-computed flat `:root { ... }` CSS string from the default token set.
+ * Import and inject directly into a `<style>` tag or CSS-in-JS system.
+ *
+ * @example
+ * ```typescript
+ * import { cssVarsString } from "@k-universe/design-tokens/css";
+ * // inject into a <style> tag in layout.tsx
+ * ```
+ */
+declare const cssVarsString: string;
+/**
+ * Pre-computed dark-theme `:root { ... }` block with section comments.
+ */
+declare const darkThemeCSS: string;
+/**
+ * Pre-computed `[data-theme="light"] { ... }` override block.
+ */
+declare const lightThemeCSS: string;
+
+export { applyCSSVarsToDocument, cssVarsString, darkThemeCSS, flattenTokens, generateCSSVars, generateCompleteCSS, generateDarkThemeCSS, generateLightThemeCSS, getCSSVar, lightThemeCSS, setCSSVar };

package/dist/css.d.ts

@@ -0,0 +1,131 @@
+import { D as DesignTokens } from './types-BcWm9ccA.js';
+
+/**
+ * @k-universe/design-tokens — CSS custom properties generation
+ *
+ * Generates CSS variable strings from the token object and provides
+ * browser utilities for applying / reading / writing CSS vars at runtime.
+ *
+ * Package exports needed (add to package.json exports — handled by Agent 5 / build config):
+ *   "./css": "./src/css-vars.ts"
+ *   "./standalone/css": "./src/standalone/tokens.css"
+ */
+
+/**
+ * Recursively walks an object and produces a flat array of
+ * `['--name', 'value']` pairs for every leaf node.
+ *
+ * @param obj    - The (sub-)object to walk.
+ * @param prefix - Accumulated CSS-var name prefix (without leading `--`).
+ * @returns      Array of `[varName, value]` tuples.
+ */
+declare function flattenTokens(obj: unknown, prefix: string): Array<[string, string]>;
+/**
+ * Generates a `:root { ... }` CSS block string from a DesignTokens object.
+ *
+ * @param t      - Token object to generate from.
+ * @param prefix - Optional additional prefix for all var names (rarely needed).
+ *
+ * @example
+ * ```typescript
+ * import { generateCSSVars, tokens } from "@k-universe/design-tokens/css";
+ * const css = generateCSSVars(tokens);
+ * // ":root {\n  --color-background: #0A0A0A;\n  ...\n}"
+ * ```
+ */
+declare function generateCSSVars(t: DesignTokens, prefix?: string): string;
+/**
+ * Generates the dark-theme `:root { ... }` block.
+ * Dark mode is the default / primary context for K-Universe.
+ *
+ * @example
+ * ```typescript
+ * const css = generateDarkThemeCSS(tokens);
+ * ```
+ */
+declare function generateDarkThemeCSS(t: DesignTokens): string;
+/**
+ * Generates the `[data-theme="light"] { ... }` override block.
+ * Only overrides semantic surface colours — all other tokens are inherited.
+ *
+ * @example
+ * ```typescript
+ * const css = generateLightThemeCSS(tokens);
+ * ```
+ */
+declare function generateLightThemeCSS(_t: DesignTokens): string;
+/**
+ * Generates the complete CSS: dark `:root` block + light `[data-theme="light"]` block.
+ *
+ * @example
+ * ```typescript
+ * import { generateCompleteCSS, tokens } from "@k-universe/design-tokens/css";
+ *
+ * // In a Next.js layout or global stylesheet:
+ * const css = generateCompleteCSS(tokens);
+ * ```
+ */
+declare function generateCompleteCSS(t: DesignTokens): string;
+/**
+ * Applies all design tokens as CSS custom properties to `document.documentElement`.
+ * SSR-safe — no-ops when `document` is not available.
+ *
+ * @param theme - Optional theme override. Defaults to dark (no attribute set).
+ *                Passing `'light'` sets `data-theme="light"` on `<html>`.
+ *                Passing `'dark'` removes the attribute.
+ *
+ * @example
+ * ```typescript
+ * // In a client-only bootstrap file:
+ * import { applyCSSVarsToDocument } from "@k-universe/design-tokens/css";
+ * applyCSSVarsToDocument(); // dark theme (default)
+ * applyCSSVarsToDocument('light'); // light theme
+ * ```
+ */
+declare function applyCSSVarsToDocument(theme?: 'dark' | 'light'): void;
+/**
+ * Reads a CSS custom property value from `document.documentElement` at runtime.
+ * Returns an empty string when called server-side.
+ *
+ * @param name - Full CSS var name including `--`, e.g. `'--color-primary'`.
+ *
+ * @example
+ * ```typescript
+ * const primary = getCSSVar('--color-primary'); // '#0066FF'
+ * ```
+ */
+declare function getCSSVar(name: string): string;
+/**
+ * Sets a CSS custom property on `document.documentElement` at runtime.
+ * No-ops when called server-side.
+ *
+ * @param name  - Full CSS var name including `--`, e.g. `'--color-primary'`.
+ * @param value - The new value.
+ *
+ * @example
+ * ```typescript
+ * setCSSVar('--color-primary', '#FF6600');
+ * ```
+ */
+declare function setCSSVar(name: string, value: string): void;
+/**
+ * Pre-computed flat `:root { ... }` CSS string from the default token set.
+ * Import and inject directly into a `<style>` tag or CSS-in-JS system.
+ *
+ * @example
+ * ```typescript
+ * import { cssVarsString } from "@k-universe/design-tokens/css";
+ * // inject into a <style> tag in layout.tsx
+ * ```
+ */
+declare const cssVarsString: string;
+/**
+ * Pre-computed dark-theme `:root { ... }` block with section comments.
+ */
+declare const darkThemeCSS: string;
+/**
+ * Pre-computed `[data-theme="light"] { ... }` override block.
+ */
+declare const lightThemeCSS: string;
+
+export { applyCSSVarsToDocument, cssVarsString, darkThemeCSS, flattenTokens, generateCSSVars, generateCompleteCSS, generateDarkThemeCSS, generateLightThemeCSS, getCSSVar, lightThemeCSS, setCSSVar };