@phcdevworks/spectre-ui 1.1.0 → 1.1.2

package/dist/tailwind/index.cjs

@@ -1,25 +1,27 @@
 'use strict';
 
 // src/tailwind/theme.ts
+var asTokenTree = (value) => value && typeof value === "object" ? value : {};
 function createSpectreTailwindTheme(options) {
   const mergedTokens = {
     ...options.tokens ?? {},
     ...options.overrides ?? {}
   };
-  const t = mergedTokens;
+  const t = asTokenTree(mergedTokens);
+  const typography = asTokenTree(t.typography);
   const colors = {
-    ...t.colors ?? t.color ?? t.palette ?? {},
-    surface: t.surface ?? {},
-    text: t.text ?? {},
-    buttons: t.buttons ?? {},
-    forms: t.forms ?? {},
-    component: t.component ?? {}
+    ...asTokenTree(t.colors ?? t.color ?? t.palette),
+    surface: asTokenTree(t.surface),
+    text: asTokenTree(t.text),
+    buttons: asTokenTree(t.buttons),
+    forms: asTokenTree(t.forms),
+    component: asTokenTree(t.component)
   };
-  const spacing = t.spacing ?? t.space ?? {};
-  const borderRadius = t.radii ?? t.radius ?? {};
-  const boxShadow = t.shadows ?? t.shadow ?? {};
-  const fontFamily = t.typography?.families ?? t.fonts ?? {};
-  const fontSize = t.typography?.scale ?? t.fontSize ?? {};
+  const spacing = asTokenTree(t.spacing ?? t.space);
+  const borderRadius = asTokenTree(t.radii ?? t.radius);
+  const boxShadow = asTokenTree(t.shadows ?? t.shadow);
+  const fontFamily = asTokenTree(typography.families ?? t.fonts);
+  const fontSize = asTokenTree(typography.scale ?? t.fontSize);
   const theme = {
     colors,
     spacing,
@@ -35,7 +37,9 @@ function createSpectreTailwindTheme(options) {
 var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 var deepMerge = (base, overrides) => {
   if (!overrides) return base;
-  const result = { ...base };
+  const result = {
+    ...base
+  };
   for (const [key, overrideValue] of Object.entries(overrides)) {
     const baseValue = result[key];
     if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {
@@ -54,19 +58,12 @@ var createSpectreTailwindPreset = (options) => {
   }
   const { tokens } = options;
   const { theme } = createSpectreTailwindTheme({ tokens });
-  const mergedTheme = deepMerge(
-    theme,
-    options.themeOverrides
-  );
+  const mergedTheme = deepMerge(theme, options.themeOverrides);
   const basePreset = {
     content: [],
     theme: mergedTheme
-    // theme is guaranteed non-undefined now
   };
-  return deepMerge(
-    basePreset,
-    options.presetOverrides
-  );
+  return deepMerge(basePreset, options.presetOverrides);
 };
 
 exports.createSpectreTailwindPreset = createSpectreTailwindPreset;

package/dist/tailwind/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tailwind/theme.ts","../../src/tailwind/preset.ts"],"names":[],"mappings":"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","file":"index.cjs","sourcesContent":["import type { Config as TailwindConfig } from \"tailwindcss\";\nimport type { SpectreTokens } from \"../tokens\";\n\ntype TailwindTheme = NonNullable<TailwindConfig[\"theme\"]>;\n\nexport interface SpectreTailwindTheme {\n  theme: TailwindTheme;\n}\n\nexport interface CreateSpectreTailwindThemeOptions {\n  tokens: SpectreTokens;\n  overrides?: Partial<SpectreTokens>;\n}\n\n/**\n * Minimal, type-safe theme mapper.\n * Important: theme is NEVER undefined (fixes exactOptionalPropertyTypes + DTS).\n */\nexport function createSpectreTailwindTheme(\n  options: CreateSpectreTailwindThemeOptions\n): SpectreTailwindTheme {\n  const mergedTokens = {\n    ...(options.tokens ?? ({} as SpectreTokens)),\n    ...(options.overrides ?? {}),\n  } as SpectreTokens;\n\n  // We keep mapping shallow + permissive because token shapes will evolve.\n  // Tailwind accepts nested objects of strings for colors.\n  const t: any = mergedTokens;\n\n  const colors = {\n    ...((t.colors ?? t.color ?? t.palette ?? {}) as Record<string, any>),\n    surface: t.surface ?? {},\n    text: t.text ?? {},\n    buttons: t.buttons ?? {},\n    forms: t.forms ?? {},\n    component: t.component ?? {},\n  };\n  const spacing = (t.spacing ?? t.space ?? {}) as Record<string, any>;\n  const borderRadius = (t.radii ?? t.radius ?? {}) as Record<string, any>;\n  const boxShadow = (t.shadows ?? t.shadow ?? {}) as Record<string, any>;\n  const fontFamily = (t.typography?.families ?? t.fonts ?? {}) as Record<string, any>;\n  const fontSize = (t.typography?.scale ?? t.fontSize ?? {}) as Record<string, any>;\n\n  const theme: TailwindTheme = {\n    colors: colors as any,\n    spacing: spacing as any,\n    borderRadius: borderRadius as any,\n    boxShadow: boxShadow as any,\n    fontFamily: fontFamily as any,\n    fontSize: fontSize as any,\n  };\n\n  return { theme };\n}\n","import type { Config as TailwindConfig } from \"tailwindcss\";\nimport type { SpectreTokens } from \"../tokens\";\nimport { createSpectreTailwindTheme } from \"./theme\";\n\ntype TailwindTheme = NonNullable<TailwindConfig[\"theme\"]>;\n\nexport interface CreateSpectreTailwindPresetOptions {\n  tokens: SpectreTokens;\n  themeOverrides?: TailwindTheme;\n  presetOverrides?: TailwindConfig;\n}\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> =>\n  typeof value === \"object\" && value !== null && !Array.isArray(value);\n\n// Deep-merge plain objects only; arrays and primitives replace by override.\nconst deepMerge = <T extends Record<string, unknown>>(\n  base: T,\n  overrides?: Record<string, unknown>\n): T => {\n  if (!overrides) return base;\n\n  const result: Record<string, unknown> = { ...base };\n\n  for (const [key, overrideValue] of Object.entries(overrides)) {\n    const baseValue = result[key];\n    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {\n      result[key] = deepMerge(baseValue, overrideValue);\n    } else {\n      result[key] = overrideValue;\n    }\n  }\n\n  return result as T;\n};\n\nexport const createSpectreTailwindPreset = (\n  options: CreateSpectreTailwindPresetOptions\n): TailwindConfig => {\n  if (!options.tokens) {\n    throw new Error(\n      \"[spectre-ui] createSpectreTailwindPreset requires tokens; pass { tokens } explicitly.\"\n    );\n  }\n  const { tokens } = options;\n  const { theme } = createSpectreTailwindTheme({ tokens });\n  const mergedTheme = deepMerge(\n    theme as Record<string, unknown>,\n    options.themeOverrides as Record<string, unknown> | undefined\n  );\n\n  const basePreset: TailwindConfig = {\n    content: [],\n    theme: mergedTheme, // theme is guaranteed non-undefined now\n  };\n\n  return deepMerge(\n    basePreset as Record<string, unknown>,\n    options.presetOverrides as Record<string, unknown> | undefined\n  ) as TailwindConfig;\n};\n"]}
+{"version":3,"sources":["../../src/tailwind/theme.ts","../../src/tailwind/preset.ts"],"names":[],"mappings":"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","file":"index.cjs","sourcesContent":["import type { Config as TailwindConfig } from \"tailwindcss\";\nimport type { SpectreTokens } from \"../tokens\";\n\ntype TailwindTheme = NonNullable<TailwindConfig[\"theme\"]>;\n\nexport interface SpectreTailwindTheme {\n  theme: TailwindTheme;\n}\n\nexport interface CreateSpectreTailwindThemeOptions {\n  tokens: SpectreTokens;\n  overrides?: Partial<SpectreTokens>;\n}\n\ntype TokenTree = Record<string, unknown>;\n\nconst asTokenTree = (value: unknown): TokenTree =>\n  value && typeof value === \"object\" ? (value as TokenTree) : {};\n\n/**\n * Minimal, type-safe theme mapper.\n * Important: theme is NEVER undefined (fixes exactOptionalPropertyTypes + DTS).\n */\nexport function createSpectreTailwindTheme(\n  options: CreateSpectreTailwindThemeOptions\n): SpectreTailwindTheme {\n  const mergedTokens = {\n    ...(options.tokens ?? ({} as SpectreTokens)),\n    ...(options.overrides ?? {}),\n  } as SpectreTokens;\n\n  // We keep mapping shallow + permissive because token shapes will evolve.\n  // Tailwind accepts nested objects of strings for colors.\n  const t = asTokenTree(mergedTokens);\n  const typography = asTokenTree(t.typography);\n\n  const colors = {\n    ...asTokenTree(t.colors ?? t.color ?? t.palette),\n    surface: asTokenTree(t.surface),\n    text: asTokenTree(t.text),\n    buttons: asTokenTree(t.buttons),\n    forms: asTokenTree(t.forms),\n    component: asTokenTree(t.component),\n  };\n  const spacing = asTokenTree(t.spacing ?? t.space);\n  const borderRadius = asTokenTree(t.radii ?? t.radius);\n  const boxShadow = asTokenTree(t.shadows ?? t.shadow);\n  const fontFamily = asTokenTree(typography.families ?? t.fonts);\n  const fontSize = asTokenTree(typography.scale ?? t.fontSize);\n\n  const theme: TailwindTheme = {\n    colors: colors as TailwindTheme[\"colors\"],\n    spacing: spacing as TailwindTheme[\"spacing\"],\n    borderRadius: borderRadius as TailwindTheme[\"borderRadius\"],\n    boxShadow: boxShadow as TailwindTheme[\"boxShadow\"],\n    fontFamily: fontFamily as TailwindTheme[\"fontFamily\"],\n    fontSize: fontSize as TailwindTheme[\"fontSize\"],\n  };\n\n  return { theme };\n}\n","import type { Config as TailwindConfig } from \"tailwindcss\";\nimport type { SpectreTokens } from \"../tokens\";\nimport { createSpectreTailwindTheme } from \"./theme\";\n\ntype TailwindTheme = NonNullable<TailwindConfig[\"theme\"]>;\n\nexport interface CreateSpectreTailwindPresetOptions {\n  tokens: SpectreTokens;\n  themeOverrides?: TailwindTheme;\n  presetOverrides?: TailwindConfig;\n}\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> =>\n  typeof value === \"object\" && value !== null && !Array.isArray(value);\n\n// Deep-merge plain objects only; arrays and primitives replace by override.\nconst deepMerge = <T extends object>(\n  base: T,\n  overrides?: Partial<T>\n): T => {\n  if (!overrides) return base;\n\n  const result: Record<string, unknown> = {\n    ...(base as Record<string, unknown>),\n  };\n\n  for (const [key, overrideValue] of Object.entries(overrides)) {\n    const baseValue = result[key];\n    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {\n      result[key] = deepMerge(baseValue, overrideValue);\n    } else {\n      result[key] = overrideValue;\n    }\n  }\n\n  return result as T;\n};\n\nexport const createSpectreTailwindPreset = (\n  options: CreateSpectreTailwindPresetOptions\n): TailwindConfig => {\n  if (!options.tokens) {\n    throw new Error(\n      \"[spectre-ui] createSpectreTailwindPreset requires tokens; pass { tokens } explicitly.\"\n    );\n  }\n  const { tokens } = options;\n  const { theme } = createSpectreTailwindTheme({ tokens });\n  const mergedTheme = deepMerge(theme, options.themeOverrides);\n\n  const basePreset: TailwindConfig = {\n    content: [],\n    theme: mergedTheme,\n  };\n\n  return deepMerge(basePreset, options.presetOverrides);\n};\n"]}

package/dist/tailwind/index.js

@@ -1,23 +1,25 @@
 // src/tailwind/theme.ts
+var asTokenTree = (value) => value && typeof value === "object" ? value : {};
 function createSpectreTailwindTheme(options) {
   const mergedTokens = {
     ...options.tokens ?? {},
     ...options.overrides ?? {}
   };
-  const t = mergedTokens;
+  const t = asTokenTree(mergedTokens);
+  const typography = asTokenTree(t.typography);
   const colors = {
-    ...t.colors ?? t.color ?? t.palette ?? {},
-    surface: t.surface ?? {},
-    text: t.text ?? {},
-    buttons: t.buttons ?? {},
-    forms: t.forms ?? {},
-    component: t.component ?? {}
+    ...asTokenTree(t.colors ?? t.color ?? t.palette),
+    surface: asTokenTree(t.surface),
+    text: asTokenTree(t.text),
+    buttons: asTokenTree(t.buttons),
+    forms: asTokenTree(t.forms),
+    component: asTokenTree(t.component)
   };
-  const spacing = t.spacing ?? t.space ?? {};
-  const borderRadius = t.radii ?? t.radius ?? {};
-  const boxShadow = t.shadows ?? t.shadow ?? {};
-  const fontFamily = t.typography?.families ?? t.fonts ?? {};
-  const fontSize = t.typography?.scale ?? t.fontSize ?? {};
+  const spacing = asTokenTree(t.spacing ?? t.space);
+  const borderRadius = asTokenTree(t.radii ?? t.radius);
+  const boxShadow = asTokenTree(t.shadows ?? t.shadow);
+  const fontFamily = asTokenTree(typography.families ?? t.fonts);
+  const fontSize = asTokenTree(typography.scale ?? t.fontSize);
   const theme = {
     colors,
     spacing,
@@ -33,7 +35,9 @@ function createSpectreTailwindTheme(options) {
 var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 var deepMerge = (base, overrides) => {
   if (!overrides) return base;
-  const result = { ...base };
+  const result = {
+    ...base
+  };
   for (const [key, overrideValue] of Object.entries(overrides)) {
     const baseValue = result[key];
     if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {
@@ -52,19 +56,12 @@ var createSpectreTailwindPreset = (options) => {
   }
   const { tokens } = options;
   const { theme } = createSpectreTailwindTheme({ tokens });
-  const mergedTheme = deepMerge(
-    theme,
-    options.themeOverrides
-  );
+  const mergedTheme = deepMerge(theme, options.themeOverrides);
   const basePreset = {
     content: [],
     theme: mergedTheme
-    // theme is guaranteed non-undefined now
   };
-  return deepMerge(
-    basePreset,
-    options.presetOverrides
-  );
+  return deepMerge(basePreset, options.presetOverrides);
 };
 
 export { createSpectreTailwindPreset, createSpectreTailwindTheme };

package/dist/tailwind/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tailwind/theme.ts","../../src/tailwind/preset.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import type { Config as TailwindConfig } from \"tailwindcss\";\nimport type { SpectreTokens } from \"../tokens\";\n\ntype TailwindTheme = NonNullable<TailwindConfig[\"theme\"]>;\n\nexport interface SpectreTailwindTheme {\n  theme: TailwindTheme;\n}\n\nexport interface CreateSpectreTailwindThemeOptions {\n  tokens: SpectreTokens;\n  overrides?: Partial<SpectreTokens>;\n}\n\n/**\n * Minimal, type-safe theme mapper.\n * Important: theme is NEVER undefined (fixes exactOptionalPropertyTypes + DTS).\n */\nexport function createSpectreTailwindTheme(\n  options: CreateSpectreTailwindThemeOptions\n): SpectreTailwindTheme {\n  const mergedTokens = {\n    ...(options.tokens ?? ({} as SpectreTokens)),\n    ...(options.overrides ?? {}),\n  } as SpectreTokens;\n\n  // We keep mapping shallow + permissive because token shapes will evolve.\n  // Tailwind accepts nested objects of strings for colors.\n  const t: any = mergedTokens;\n\n  const colors = {\n    ...((t.colors ?? t.color ?? t.palette ?? {}) as Record<string, any>),\n    surface: t.surface ?? {},\n    text: t.text ?? {},\n    buttons: t.buttons ?? {},\n    forms: t.forms ?? {},\n    component: t.component ?? {},\n  };\n  const spacing = (t.spacing ?? t.space ?? {}) as Record<string, any>;\n  const borderRadius = (t.radii ?? t.radius ?? {}) as Record<string, any>;\n  const boxShadow = (t.shadows ?? t.shadow ?? {}) as Record<string, any>;\n  const fontFamily = (t.typography?.families ?? t.fonts ?? {}) as Record<string, any>;\n  const fontSize = (t.typography?.scale ?? t.fontSize ?? {}) as Record<string, any>;\n\n  const theme: TailwindTheme = {\n    colors: colors as any,\n    spacing: spacing as any,\n    borderRadius: borderRadius as any,\n    boxShadow: boxShadow as any,\n    fontFamily: fontFamily as any,\n    fontSize: fontSize as any,\n  };\n\n  return { theme };\n}\n","import type { Config as TailwindConfig } from \"tailwindcss\";\nimport type { SpectreTokens } from \"../tokens\";\nimport { createSpectreTailwindTheme } from \"./theme\";\n\ntype TailwindTheme = NonNullable<TailwindConfig[\"theme\"]>;\n\nexport interface CreateSpectreTailwindPresetOptions {\n  tokens: SpectreTokens;\n  themeOverrides?: TailwindTheme;\n  presetOverrides?: TailwindConfig;\n}\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> =>\n  typeof value === \"object\" && value !== null && !Array.isArray(value);\n\n// Deep-merge plain objects only; arrays and primitives replace by override.\nconst deepMerge = <T extends Record<string, unknown>>(\n  base: T,\n  overrides?: Record<string, unknown>\n): T => {\n  if (!overrides) return base;\n\n  const result: Record<string, unknown> = { ...base };\n\n  for (const [key, overrideValue] of Object.entries(overrides)) {\n    const baseValue = result[key];\n    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {\n      result[key] = deepMerge(baseValue, overrideValue);\n    } else {\n      result[key] = overrideValue;\n    }\n  }\n\n  return result as T;\n};\n\nexport const createSpectreTailwindPreset = (\n  options: CreateSpectreTailwindPresetOptions\n): TailwindConfig => {\n  if (!options.tokens) {\n    throw new Error(\n      \"[spectre-ui] createSpectreTailwindPreset requires tokens; pass { tokens } explicitly.\"\n    );\n  }\n  const { tokens } = options;\n  const { theme } = createSpectreTailwindTheme({ tokens });\n  const mergedTheme = deepMerge(\n    theme as Record<string, unknown>,\n    options.themeOverrides as Record<string, unknown> | undefined\n  );\n\n  const basePreset: TailwindConfig = {\n    content: [],\n    theme: mergedTheme, // theme is guaranteed non-undefined now\n  };\n\n  return deepMerge(\n    basePreset as Record<string, unknown>,\n    options.presetOverrides as Record<string, unknown> | undefined\n  ) as TailwindConfig;\n};\n"]}
+{"version":3,"sources":["../../src/tailwind/theme.ts","../../src/tailwind/preset.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import type { Config as TailwindConfig } from \"tailwindcss\";\nimport type { SpectreTokens } from \"../tokens\";\n\ntype TailwindTheme = NonNullable<TailwindConfig[\"theme\"]>;\n\nexport interface SpectreTailwindTheme {\n  theme: TailwindTheme;\n}\n\nexport interface CreateSpectreTailwindThemeOptions {\n  tokens: SpectreTokens;\n  overrides?: Partial<SpectreTokens>;\n}\n\ntype TokenTree = Record<string, unknown>;\n\nconst asTokenTree = (value: unknown): TokenTree =>\n  value && typeof value === \"object\" ? (value as TokenTree) : {};\n\n/**\n * Minimal, type-safe theme mapper.\n * Important: theme is NEVER undefined (fixes exactOptionalPropertyTypes + DTS).\n */\nexport function createSpectreTailwindTheme(\n  options: CreateSpectreTailwindThemeOptions\n): SpectreTailwindTheme {\n  const mergedTokens = {\n    ...(options.tokens ?? ({} as SpectreTokens)),\n    ...(options.overrides ?? {}),\n  } as SpectreTokens;\n\n  // We keep mapping shallow + permissive because token shapes will evolve.\n  // Tailwind accepts nested objects of strings for colors.\n  const t = asTokenTree(mergedTokens);\n  const typography = asTokenTree(t.typography);\n\n  const colors = {\n    ...asTokenTree(t.colors ?? t.color ?? t.palette),\n    surface: asTokenTree(t.surface),\n    text: asTokenTree(t.text),\n    buttons: asTokenTree(t.buttons),\n    forms: asTokenTree(t.forms),\n    component: asTokenTree(t.component),\n  };\n  const spacing = asTokenTree(t.spacing ?? t.space);\n  const borderRadius = asTokenTree(t.radii ?? t.radius);\n  const boxShadow = asTokenTree(t.shadows ?? t.shadow);\n  const fontFamily = asTokenTree(typography.families ?? t.fonts);\n  const fontSize = asTokenTree(typography.scale ?? t.fontSize);\n\n  const theme: TailwindTheme = {\n    colors: colors as TailwindTheme[\"colors\"],\n    spacing: spacing as TailwindTheme[\"spacing\"],\n    borderRadius: borderRadius as TailwindTheme[\"borderRadius\"],\n    boxShadow: boxShadow as TailwindTheme[\"boxShadow\"],\n    fontFamily: fontFamily as TailwindTheme[\"fontFamily\"],\n    fontSize: fontSize as TailwindTheme[\"fontSize\"],\n  };\n\n  return { theme };\n}\n","import type { Config as TailwindConfig } from \"tailwindcss\";\nimport type { SpectreTokens } from \"../tokens\";\nimport { createSpectreTailwindTheme } from \"./theme\";\n\ntype TailwindTheme = NonNullable<TailwindConfig[\"theme\"]>;\n\nexport interface CreateSpectreTailwindPresetOptions {\n  tokens: SpectreTokens;\n  themeOverrides?: TailwindTheme;\n  presetOverrides?: TailwindConfig;\n}\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> =>\n  typeof value === \"object\" && value !== null && !Array.isArray(value);\n\n// Deep-merge plain objects only; arrays and primitives replace by override.\nconst deepMerge = <T extends object>(\n  base: T,\n  overrides?: Partial<T>\n): T => {\n  if (!overrides) return base;\n\n  const result: Record<string, unknown> = {\n    ...(base as Record<string, unknown>),\n  };\n\n  for (const [key, overrideValue] of Object.entries(overrides)) {\n    const baseValue = result[key];\n    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {\n      result[key] = deepMerge(baseValue, overrideValue);\n    } else {\n      result[key] = overrideValue;\n    }\n  }\n\n  return result as T;\n};\n\nexport const createSpectreTailwindPreset = (\n  options: CreateSpectreTailwindPresetOptions\n): TailwindConfig => {\n  if (!options.tokens) {\n    throw new Error(\n      \"[spectre-ui] createSpectreTailwindPreset requires tokens; pass { tokens } explicitly.\"\n    );\n  }\n  const { tokens } = options;\n  const { theme } = createSpectreTailwindTheme({ tokens });\n  const mergedTheme = deepMerge(theme, options.themeOverrides);\n\n  const basePreset: TailwindConfig = {\n    content: [],\n    theme: mergedTheme,\n  };\n\n  return deepMerge(basePreset, options.presetOverrides);\n};\n"]}

package/dist/utilities.css

@@ -1,3 +1,378 @@
+:root {
+  --sp-surface-page: #f7f8fb;
+  --sp-surface-card: #ffffff;
+  --sp-surface-input: #ffffff;
+  --sp-surface-overlay: rgba(20, 27, 36, 0.6);
+  --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
+  --sp-text-on-page-default: #141b24;
+  --sp-text-on-page-muted: #4b576a;
+  --sp-text-on-page-subtle: #657287;
+  --sp-text-on-page-meta: #657287;
+  --sp-text-on-surface-default: #141b24;
+  --sp-text-on-surface-muted: #4b576a;
+  --sp-text-on-surface-subtle: #657287;
+  --sp-text-on-surface-meta: #657287;
+  --sp-component-card-text: #141b24;
+  --sp-component-card-text-muted: #657287;
+  --sp-component-input-text: #141b24;
+  --sp-component-input-placeholder: #657287;
+  --sp-button-text-default: #141b24;
+  --sp-button-text-on-primary: #ffffff;
+  --sp-badge-neutral-bg: #eef1f6;
+  --sp-badge-neutral-text: #374253;
+  --sp-badge-info-bg: #e0f2fe;
+  --sp-badge-info-text: #075985;
+  --sp-badge-success-bg: #dcfce7;
+  --sp-badge-success-text: #15803d;
+  --sp-badge-warning-bg: #fff1c2;
+  --sp-badge-warning-text: #8f5200;
+  --sp-badge-danger-bg: #fee2e2;
+  --sp-badge-danger-text: #b91c1c;
+  --sp-icon-box-bg: #ffffff;
+  --sp-icon-box-border: #d9dfeb;
+  --sp-icon-box-icon-default: #0369a1;
+  --sp-icon-box-icon-success: #16a34a;
+  --sp-icon-box-icon-warning: #d48806;
+  --sp-icon-box-icon-danger: #dc2626;
+  --sp-color-brand-50: #eef4ff;
+  --sp-color-brand-100: #d9e7ff;
+  --sp-color-brand-200: #b9d2ff;
+  --sp-color-brand-300: #8ab6ff;
+  --sp-color-brand-400: #5a92ff;
+  --sp-color-brand-500: #336df4;
+  --sp-color-brand-600: #1f57db;
+  --sp-color-brand-700: #1946b4;
+  --sp-color-brand-800: #173b8f;
+  --sp-color-brand-900: #16336f;
+  --sp-color-neutral-50: #f7f8fb;
+  --sp-color-neutral-100: #eef1f6;
+  --sp-color-neutral-200: #d9dfeb;
+  --sp-color-neutral-300: #b7c1d4;
+  --sp-color-neutral-400: #8a96ad;
+  --sp-color-neutral-500: #657287;
+  --sp-color-neutral-600: #4b576a;
+  --sp-color-neutral-700: #374253;
+  --sp-color-neutral-800: #222b38;
+  --sp-color-neutral-900: #141b24;
+  --sp-color-accent-50: #f6f2ff;
+  --sp-color-accent-100: #eee5ff;
+  --sp-color-accent-200: #ddccff;
+  --sp-color-accent-300: #c3a7ff;
+  --sp-color-accent-400: #a279ff;
+  --sp-color-accent-500: #854ff7;
+  --sp-color-accent-600: #7135dd;
+  --sp-color-accent-700: #5d28b8;
+  --sp-color-accent-800: #4d2393;
+  --sp-color-accent-900: #401f75;
+  --sp-color-success-50: #f0fdf4;
+  --sp-color-success-100: #dcfce7;
+  --sp-color-success-200: #bbf7d0;
+  --sp-color-success-300: #86efac;
+  --sp-color-success-400: #4ade80;
+  --sp-color-success-500: #22c55e;
+  --sp-color-success-600: #16a34a;
+  --sp-color-success-700: #15803d;
+  --sp-color-success-800: #166534;
+  --sp-color-success-900: #14532d;
+  --sp-color-warning-50: #fffbea;
+  --sp-color-warning-100: #fff1c2;
+  --sp-color-warning-200: #ffe08a;
+  --sp-color-warning-300: #ffd24d;
+  --sp-color-warning-400: #ffc21a;
+  --sp-color-warning-500: #f5ad00;
+  --sp-color-warning-600: #d48806;
+  --sp-color-warning-700: #ad6800;
+  --sp-color-warning-800: #8f5200;
+  --sp-color-warning-900: #734000;
+  --sp-color-error-50: #fef2f2;
+  --sp-color-error-100: #fee2e2;
+  --sp-color-error-200: #fecaca;
+  --sp-color-error-300: #fca5a5;
+  --sp-color-error-400: #f87171;
+  --sp-color-error-500: #ef4444;
+  --sp-color-error-600: #dc2626;
+  --sp-color-error-700: #b91c1c;
+  --sp-color-error-800: #991b1b;
+  --sp-color-error-900: #7f1d1d;
+  --sp-color-info-50: #f0f9ff;
+  --sp-color-info-100: #e0f2fe;
+  --sp-color-info-200: #bae6fd;
+  --sp-color-info-300: #7dd3fc;
+  --sp-color-info-400: #38bdf8;
+  --sp-color-info-500: #0ea5e9;
+  --sp-color-info-600: #0369a1;
+  --sp-color-info-700: #075985;
+  --sp-color-info-800: #0c4a6e;
+  --sp-color-info-900: #082f49;
+  --sp-color-indigo-500: #5b6ee1;
+  --sp-color-indigo-600: #4d61db;
+  --sp-color-violet-600: #6f3fd7;
+  --sp-color-focus-primary: #336df4;
+  --sp-color-focus-error: #ef4444;
+  --sp-color-focus-info: #0369a1;
+  --sp-color-white-0: #;
+  --sp-color-white-1: f;
+  --sp-color-white-2: f;
+  --sp-color-white-3: f;
+  --sp-color-white-4: f;
+  --sp-color-white-5: f;
+  --sp-color-white-6: f;
+  --sp-color-black-0: #;
+  --sp-color-black-1: 0;
+  --sp-color-black-2: 0;
+  --sp-color-black-3: 0;
+  --sp-color-black-4: 0;
+  --sp-color-black-5: 0;
+  --sp-color-black-6: 0;
+  --sp-space-0: 0rem;
+  --sp-space-4: 0.25rem;
+  --sp-space-8: 0.5rem;
+  --sp-space-12: 0.75rem;
+  --sp-space-16: 1rem;
+  --sp-space-20: 1.25rem;
+  --sp-space-24: 1.5rem;
+  --sp-space-32: 2rem;
+  --sp-space-40: 2.5rem;
+  --sp-space-48: 3rem;
+  --sp-space-56: 3.5rem;
+  --sp-space-64: 4rem;
+  --sp-space-80: 5rem;
+  --sp-space-96: 6rem;
+  --sp-layout-section-padding-sm: 1.5rem;
+  --sp-layout-section-padding-md: 2rem;
+  --sp-layout-section-padding-lg: 3rem;
+  --sp-layout-section-gap-sm: 1rem;
+  --sp-layout-section-gap-md: 1.5rem;
+  --sp-layout-section-gap-lg: 2rem;
+  --sp-layout-stack-gap-sm: 0.5rem;
+  --sp-layout-stack-gap-md: 0.75rem;
+  --sp-layout-stack-gap-lg: 1rem;
+  --sp-layout-container-padding-inline-sm: 1rem;
+  --sp-layout-container-padding-inline-md: 1.5rem;
+  --sp-layout-container-padding-inline-lg: 2rem;
+  --sp-layout-container-max-width: 72rem;
+  --sp-border-width-base: 1px;
+  --sp-border-width-thick: 2px;
+  --sp-radius-none: 0;
+  --sp-radius-sm: 2px;
+  --sp-radius-md: 4px;
+  --sp-radius-lg: 8px;
+  --sp-radius-pill: 999px;
+  --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  --sp-font-family-serif: 'Times New Roman', Times, serif;
+  --sp-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --sp-font-xs-size: 0.75rem;
+  --sp-font-xs-line-height: 1.25rem;
+  --sp-font-xs-weight: 400;
+  --sp-font-sm-size: 0.875rem;
+  --sp-font-sm-line-height: 1.5rem;
+  --sp-font-sm-weight: 400;
+  --sp-font-md-size: 1rem;
+  --sp-font-md-line-height: 1.75rem;
+  --sp-font-md-weight: 500;
+  --sp-font-lg-size: 1.25rem;
+  --sp-font-lg-line-height: 2rem;
+  --sp-font-lg-weight: 500;
+  --sp-font-xl-size: 1.5rem;
+  --sp-font-xl-line-height: 2.125rem;
+  --sp-font-xl-weight: 600;
+  --sp-font-2xl-size: 1.875rem;
+  --sp-font-2xl-line-height: 2.5rem;
+  --sp-font-2xl-weight: 600;
+  --sp-font-xs-letter-spacing: 0.02em;
+  --sp-text-on-page-default: #141b24;
+  --sp-text-on-page-muted: #4b576a;
+  --sp-text-on-page-subtle: #657287;
+  --sp-text-on-page-meta: #657287;
+  --sp-text-on-surface-default: #141b24;
+  --sp-text-on-surface-muted: #4b576a;
+  --sp-text-on-surface-subtle: #657287;
+  --sp-text-on-surface-meta: #657287;
+  --sp-badge-neutral-bg: #eef1f6;
+  --sp-badge-neutral-text: #374253;
+  --sp-badge-info-bg: #e0f2fe;
+  --sp-badge-info-text: #075985;
+  --sp-badge-success-bg: #dcfce7;
+  --sp-badge-success-text: #166534;
+  --sp-badge-warning-bg: #fff1c2;
+  --sp-badge-warning-text: #8f5200;
+  --sp-badge-danger-bg: #fee2e2;
+  --sp-badge-danger-text: #991b1b;
+  --sp-icon-box-bg: #ffffff;
+  --sp-icon-box-border: #d9dfeb;
+  --sp-icon-box-icon-default: #0369a1;
+  --sp-icon-box-icon-success: #16a34a;
+  --sp-icon-box-icon-warning: #d48806;
+  --sp-icon-box-icon-danger: #dc2626;
+  --sp-shadow-none: none;
+  --sp-shadow-sm: 0 1px 2px 0 rgba(34, 43, 56, 0.06);
+  --sp-shadow-md: 0 2px 6px -1px rgba(34, 43, 56, 0.08);
+  --sp-shadow-lg: 0 6px 16px -4px rgba(34, 43, 56, 0.12);
+  --sp-breakpoint-sm: 640px;
+  --sp-breakpoint-md: 768px;
+  --sp-breakpoint-lg: 1024px;
+  --sp-breakpoint-xl: 1280px;
+  --sp-breakpoint-2xl: 1536px;
+  --sp-z-index-base: 0;
+  --sp-z-index-dropdown: 1000;
+  --sp-z-index-sticky: 1100;
+  --sp-z-index-fixed: 1200;
+  --sp-z-index-overlay: 1300;
+  --sp-z-index-modal: 1400;
+  --sp-z-index-popover: 1500;
+  --sp-z-index-tooltip: 1600;
+  --sp-duration-instant: 75ms;
+  --sp-duration-fast: 150ms;
+  --sp-duration-base: 200ms;
+  --sp-duration-moderate: 300ms;
+  --sp-duration-slow: 500ms;
+  --sp-duration-slower: 700ms;
+  --sp-easing-linear: linear;
+  --sp-easing-in: cubic-bezier(0.4, 0, 1, 1);
+  --sp-easing-out: cubic-bezier(0, 0, 0.2, 1);
+  --sp-easing-inout: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-easing-spring: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-opacity-disabled: 0.38;
+  --sp-opacity-hover: 0.92;
+  --sp-opacity-active: 0.84;
+  --sp-opacity-focus: 1;
+  --sp-opacity-overlay: 0.5;
+  --sp-opacity-tooltip: 0.95;
+  --sp-focus-ring-width: 2px;
+  --sp-focus-ring-offset: 2px;
+  --sp-focus-ring-style: solid;
+  --sp-min-touch-target: 44px;
+  --sp-min-text-size: 16px;
+  --sp-button-primary-bg: #0369a1;
+  --sp-button-primary-bghover: #075985;
+  --sp-button-primary-bgactive: #0c4a6e;
+  --sp-button-primary-bgdisabled: #d9dfeb;
+  --sp-button-primary-text: #ffffff;
+  --sp-button-primary-textdisabled: #8a96ad;
+  --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
+  --sp-button-secondary-bg: #ffffff;
+  --sp-button-secondary-bghover: #f7f8fb;
+  --sp-button-secondary-bgactive: #eef1f6;
+  --sp-button-secondary-bgdisabled: #f7f8fb;
+  --sp-button-secondary-text: #075985;
+  --sp-button-secondary-textdisabled: #8a96ad;
+  --sp-button-secondary-border: #075985;
+  --sp-button-secondary-borderdisabled: #d9dfeb;
+  --sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
+  --sp-button-ghost-bg: transparent;
+  --sp-button-ghost-bghover: #f0f9ff;
+  --sp-button-ghost-bgactive: #e0f2fe;
+  --sp-button-ghost-bgdisabled: transparent;
+  --sp-button-ghost-text: #075985;
+  --sp-button-ghost-textdisabled: #8a96ad;
+  --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
+  --sp-button-danger-bg: #dc2626;
+  --sp-button-danger-bghover: #b91c1c;
+  --sp-button-danger-bgactive: #991b1b;
+  --sp-button-danger-bgdisabled: #fecaca;
+  --sp-button-danger-text: #ffffff;
+  --sp-button-danger-textdisabled: #8a96ad;
+  --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
+  --sp-button-success-bg: #15803d;
+  --sp-button-success-bghover: #166534;
+  --sp-button-success-bgactive: #14532d;
+  --sp-button-success-bgdisabled: #bbf7d0;
+  --sp-button-success-text: #ffffff;
+  --sp-button-success-textdisabled: #8a96ad;
+  --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
+  --sp-button-cta-bg: #1f57db;
+  --sp-button-cta-bghover: #1946b4;
+  --sp-button-cta-bgactive: #173b8f;
+  --sp-button-cta-bgdisabled: #b9d2ff;
+  --sp-button-cta-text: #ffffff;
+  --sp-button-cta-textdisabled: #8a96ad;
+  --sp-button-cta-shadow: 0 4px 14px 0 rgba(51, 109, 244, 0.39);
+  --sp-button-cta-focusring: rgba(51, 109, 244, 0.4);
+  --sp-button-accent-bg: #7135dd;
+  --sp-button-accent-bghover: #5d28b8;
+  --sp-button-accent-bgactive: #4d2393;
+  --sp-button-accent-bgdisabled: #ddccff;
+  --sp-button-accent-text: #ffffff;
+  --sp-button-accent-textdisabled: #8a96ad;
+  --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
+  --sp-form-default-bg: #ffffff;
+  --sp-form-default-border: #b7c1d4;
+  --sp-form-default-text: #141b24;
+  --sp-form-default-placeholder: #657287;
+  --sp-form-hover-border: #0ea5e9;
+  --sp-form-focus-border: #0ea5e9;
+  --sp-form-focus-ring: #0ea5e9;
+  --sp-form-valid-border: #22c55e;
+  --sp-form-valid-bg: #f0fdf4;
+  --sp-form-valid-text: #15803d;
+  --sp-form-invalid-border: #ef4444;
+  --sp-form-invalid-bg: #fef2f2;
+  --sp-form-invalid-text: #b91c1c;
+  --sp-form-disabled-bg: #f7f8fb;
+  --sp-form-disabled-border: #d9dfeb;
+  --sp-form-disabled-text: #8a96ad;
+  --sp-animation-fadein-duration: 200ms;
+  --sp-animation-fadein-easing: cubic-bezier(0, 0, 0.2, 1);
+  --sp-animation-fadein-keyframes: fade-in;
+  --sp-animation-fadeout-duration: 150ms;
+  --sp-animation-fadeout-easing: cubic-bezier(0.4, 0, 1, 1);
+  --sp-animation-fadeout-keyframes: fade-out;
+  --sp-animation-slideup-duration: 300ms;
+  --sp-animation-slideup-easing: cubic-bezier(0, 0, 0.2, 1);
+  --sp-animation-slideup-keyframes: slide-up;
+  --sp-animation-slidedown-duration: 300ms;
+  --sp-animation-slidedown-easing: cubic-bezier(0, 0, 0.2, 1);
+  --sp-animation-slidedown-keyframes: slide-down;
+  --sp-animation-scalein-duration: 200ms;
+  --sp-animation-scalein-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --sp-animation-scalein-keyframes: scale-in;
+  --sp-animation-bounce-duration: 300ms;
+  --sp-animation-bounce-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-animation-bounce-keyframes: bounce;
+  --sp-animation-shake-duration: 250ms;
+  --sp-animation-shake-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-animation-shake-keyframes: shake;
+  --sp-animation-pulse-duration: 1200ms;
+  --sp-animation-pulse-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-animation-pulse-keyframes: pulse;
+}
+:root[data-spectre-theme="dark"] {
+  --sp-surface-page: #141b24;
+  --sp-surface-card: #222b38;
+  --sp-surface-input: #374253;
+  --sp-surface-overlay: #222b38;
+  --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
+  --sp-text-on-page-default: #f7f8fb;
+  --sp-text-on-page-muted: #b7c1d4;
+  --sp-text-on-page-subtle: #8a96ad;
+  --sp-text-on-page-meta: #8a96ad;
+  --sp-text-on-surface-default: #eef1f6;
+  --sp-text-on-surface-muted: #b7c1d4;
+  --sp-text-on-surface-subtle: #8a96ad;
+  --sp-text-on-surface-meta: #8a96ad;
+  --sp-component-card-text: #eef1f6;
+  --sp-component-card-text-muted: #b7c1d4;
+  --sp-component-input-text: #eef1f6;
+  --sp-component-input-placeholder: #b7c1d4;
+  --sp-button-text-default: #eef1f6;
+  --sp-button-text-on-primary: #ffffff;
+  --sp-badge-neutral-bg: #374253;
+  --sp-badge-neutral-text: #eef1f6;
+  --sp-badge-info-bg: #0c4a6e;
+  --sp-badge-info-text: #e0f2fe;
+  --sp-badge-success-bg: #166534;
+  --sp-badge-success-text: #dcfce7;
+  --sp-badge-warning-bg: #8f5200;
+  --sp-badge-warning-text: #fff1c2;
+  --sp-badge-danger-bg: #991b1b;
+  --sp-badge-danger-text: #fee2e2;
+  --sp-icon-box-bg: #222b38;
+  --sp-icon-box-border: #374253;
+  --sp-icon-box-icon-default: #7dd3fc;
+  --sp-icon-box-icon-success: #4ade80;
+  --sp-icon-box-icon-warning: #ffc21a;
+  --sp-icon-box-icon-danger: #f87171;
+}
 @layer utilities {
   .sp-stack {
     display: flex;