@phcdevworks/spectre-tokens 2.2.0 → 2.3.0

package/dist/index.css

@@ -3,15 +3,18 @@
   --sp-surface-card: #ffffff;
   --sp-surface-input: #ffffff;
   --sp-surface-overlay: rgba(20, 27, 36, 0.6);
+  --sp-surface-alternate: #eef1f6;
   --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-page-brand: #1f57db;
   --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-text-on-surface-brand: #1f57db;
   --sp-component-card-text: #141b24;
   --sp-component-card-text-muted: #4b576a;
   --sp-component-input-text: #141b24;
@@ -110,20 +113,8 @@
   --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-color-white: #ffffff;
+  --sp-color-black: #000000;
   --sp-space-0: 0rem;
   --sp-space-4: 0.25rem;
   --sp-space-8: 0.5rem;
@@ -262,7 +253,7 @@
   --sp-button-primary-text: #ffffff;
   --sp-button-primary-textdisabled: #8a96ad;
   --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
-  --sp-button-primary-focusvisible: {colors.info.500} / 0.4;
+  --sp-button-primary-focusvisible: rgba(14, 165, 233, 0.4);
   --sp-button-secondary-bg: #ffffff;
   --sp-button-secondary-bghover: #f7f8fb;
   --sp-button-secondary-bgactive: #eef1f6;
@@ -272,7 +263,7 @@
   --sp-button-secondary-border: #075985;
   --sp-button-secondary-borderdisabled: #d9dfeb;
   --sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
-  --sp-button-secondary-focusvisible: {colors.info.500} / 0.4;
+  --sp-button-secondary-focusvisible: rgba(14, 165, 233, 0.4);
   --sp-button-ghost-bg: transparent;
   --sp-button-ghost-bghover: #f0f9ff;
   --sp-button-ghost-bgactive: #e0f2fe;
@@ -280,7 +271,7 @@
   --sp-button-ghost-text: #075985;
   --sp-button-ghost-textdisabled: #8a96ad;
   --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
-  --sp-button-ghost-focusvisible: {colors.info.500} / 0.4;
+  --sp-button-ghost-focusvisible: rgba(14, 165, 233, 0.4);
   --sp-button-danger-bg: #dc2626;
   --sp-button-danger-bghover: #b91c1c;
   --sp-button-danger-bgactive: #991b1b;
@@ -310,7 +301,7 @@
   --sp-button-accent-text: #ffffff;
   --sp-button-accent-textdisabled: #8a96ad;
   --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
-  --sp-button-accent-focusvisible: {colors.accent.500} / 0.4;
+  --sp-button-accent-focusvisible: rgba(133, 79, 247, 0.4);
   --sp-form-default-bg: #ffffff;
   --sp-form-default-border: #b7c1d4;
   --sp-form-default-text: #141b24;
@@ -318,8 +309,8 @@
   --sp-form-hover-border: #0ea5e9;
   --sp-form-focus-border: #0ea5e9;
   --sp-form-focus-ring: #0ea5e9;
-  --sp-form-focusvisible-border: {colors.info.500};
-  --sp-form-focusvisible-ring: {colors.info.500};
+  --sp-form-focusvisible-border: #0ea5e9;
+  --sp-form-focusvisible-ring: #0ea5e9;
   --sp-form-valid-border: #22c55e;
   --sp-form-valid-bg: #f0fdf4;
   --sp-form-valid-text: #15803d;
@@ -359,15 +350,18 @@
   --sp-surface-card: #222b38;
   --sp-surface-input: #374253;
   --sp-surface-overlay: #222b38;
-  --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
+  --sp-surface-alternate: #222b38;
+  --sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 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-page-brand: #5a92ff;
   --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-text-on-surface-brand: #5a92ff;
   --sp-component-card-text: #eef1f6;
   --sp-component-card-text-muted: #b7c1d4;
   --sp-component-input-text: #eef1f6;

package/dist/index.d.cts

@@ -649,6 +649,7 @@ interface SpectreGeneratedTokens {
             size: string;
             lineHeight: string;
             weight: number;
+            letterSpacing: string;
         };
         sm: {
             size: string;
@@ -799,6 +800,7 @@ interface ButtonStateTokens {
     borderDisabled?: string;
     shadow?: string;
     focusRing?: string;
+    focusVisible?: string;
 }
 interface FormStateTokens {
     bg?: string;
@@ -809,14 +811,19 @@ interface FormStateTokens {
 }
 interface ComponentBadgeTokens<Value = string> {
     neutralBg: Value;
+    neutralBgHover?: Value;
     neutralText: Value;
     infoBg: Value;
+    infoBgHover?: Value;
     infoText: Value;
     successBg: Value;
+    successBgHover?: Value;
     successText: Value;
     warningBg: Value;
+    warningBgHover?: Value;
     warningText: Value;
     dangerBg: Value;
+    dangerBgHover?: Value;
     dangerText: Value;
 }
 interface ComponentIconBoxTokens<Value = string> {
@@ -829,6 +836,7 @@ interface ComponentIconBoxTokens<Value = string> {
 }
 interface ComponentTestimonialTokens<Value = string> {
     bg: Value;
+    bgHover?: Value;
     border: Value;
     text: Value;
     authorName: Value;
@@ -837,6 +845,7 @@ interface ComponentTestimonialTokens<Value = string> {
 }
 interface ComponentPricingCardTokens<Value = string> {
     bg: Value;
+    bgHover?: Value;
     border: Value;
     featuredBg: Value;
     featuredText: Value;
@@ -887,17 +896,18 @@ interface SpectreModeTokens {
             muted: SemanticTokenValue;
             subtle: SemanticTokenValue;
             meta: SemanticTokenValue;
+            brand: SemanticTokenValue;
         };
         onSurface: {
             default: SemanticTokenValue;
             muted: SemanticTokenValue;
             subtle: SemanticTokenValue;
             meta: SemanticTokenValue;
+            brand: SemanticTokenValue;
         };
     };
     component: ComponentTokens<SemanticTokenValue>;
 }
-
 type SpectreTokens = SpectreGeneratedTokens;
 interface LayoutTokens {
     section: {

package/dist/index.d.ts

@@ -649,6 +649,7 @@ interface SpectreGeneratedTokens {
             size: string;
             lineHeight: string;
             weight: number;
+            letterSpacing: string;
         };
         sm: {
             size: string;
@@ -799,6 +800,7 @@ interface ButtonStateTokens {
     borderDisabled?: string;
     shadow?: string;
     focusRing?: string;
+    focusVisible?: string;
 }
 interface FormStateTokens {
     bg?: string;
@@ -809,14 +811,19 @@ interface FormStateTokens {
 }
 interface ComponentBadgeTokens<Value = string> {
     neutralBg: Value;
+    neutralBgHover?: Value;
     neutralText: Value;
     infoBg: Value;
+    infoBgHover?: Value;
     infoText: Value;
     successBg: Value;
+    successBgHover?: Value;
     successText: Value;
     warningBg: Value;
+    warningBgHover?: Value;
     warningText: Value;
     dangerBg: Value;
+    dangerBgHover?: Value;
     dangerText: Value;
 }
 interface ComponentIconBoxTokens<Value = string> {
@@ -829,6 +836,7 @@ interface ComponentIconBoxTokens<Value = string> {
 }
 interface ComponentTestimonialTokens<Value = string> {
     bg: Value;
+    bgHover?: Value;
     border: Value;
     text: Value;
     authorName: Value;
@@ -837,6 +845,7 @@ interface ComponentTestimonialTokens<Value = string> {
 }
 interface ComponentPricingCardTokens<Value = string> {
     bg: Value;
+    bgHover?: Value;
     border: Value;
     featuredBg: Value;
     featuredText: Value;
@@ -887,17 +896,18 @@ interface SpectreModeTokens {
             muted: SemanticTokenValue;
             subtle: SemanticTokenValue;
             meta: SemanticTokenValue;
+            brand: SemanticTokenValue;
         };
         onSurface: {
             default: SemanticTokenValue;
             muted: SemanticTokenValue;
             subtle: SemanticTokenValue;
             meta: SemanticTokenValue;
+            brand: SemanticTokenValue;
         };
     };
     component: ComponentTokens<SemanticTokenValue>;
 }
-
 type SpectreTokens = SpectreGeneratedTokens;
 interface LayoutTokens {
     section: {

package/dist/index.js

@@ -45,7 +45,7 @@ var coreTokens = {
       "text": "{colors.neutral.700}",
       "authorName": "{colors.neutral.900}",
       "authorTitle": "{colors.neutral.500}",
-      "quoteMark": "{colors.neutral.300}"
+      "quoteMark": "{colors.neutral.500}"
     },
     "pricingCard": {
       "bg": "{colors.white}",
@@ -73,7 +73,7 @@ var coreTokens = {
       "text": "{colors.white}",
       "textDisabled": "{colors.neutral.400}",
       "focusRing": "{colors.info.500} / 0.4",
-      "focusVisible": "{buttons.primary.focusRing}"
+      "focusVisible": "{colors.info.500} / 0.4"
     },
     "secondary": {
       "bg": "{colors.white}",
@@ -85,7 +85,7 @@ var coreTokens = {
       "border": "{colors.info.700}",
       "borderDisabled": "{colors.neutral.200}",
       "focusRing": "{colors.info.500} / 0.4",
-      "focusVisible": "{buttons.secondary.focusRing}"
+      "focusVisible": "{colors.info.500} / 0.4"
     },
     "ghost": {
       "bg": "transparent",
@@ -95,7 +95,7 @@ var coreTokens = {
       "text": "{colors.info.700}",
       "textDisabled": "{colors.neutral.400}",
       "focusRing": "{colors.info.500} / 0.4",
-      "focusVisible": "{buttons.ghost.focusRing}"
+      "focusVisible": "{colors.info.500} / 0.4"
     },
     "danger": {
       "bg": "{colors.error.600}",
@@ -133,7 +133,7 @@ var coreTokens = {
       "text": "{colors.white}",
       "textDisabled": "{colors.neutral.400}",
       "focusRing": "{colors.accent.500} / 0.4",
-      "focusVisible": "{buttons.accent.focusRing}"
+      "focusVisible": "{colors.accent.500} / 0.4"
     }
   },
   "forms": {
@@ -151,8 +151,8 @@ var coreTokens = {
       "ring": "{colors.info.500}"
     },
     "focusVisible": {
-      "border": "{forms.focus.border}",
-      "ring": "{forms.focus.ring}"
+      "border": "{colors.info.500}",
+      "ring": "{colors.info.500}"
     },
     "valid": {
       "border": "{colors.success.500}",
@@ -265,7 +265,7 @@ var coreTokens = {
         "input": "{colors.neutral.700}",
         "overlay": "{colors.neutral.800}",
         "alternate": "{colors.neutral.800}",
-        "hero": "linear-gradient(135deg, {colors.accent.900} 0%, {colors.accent.700} 100%)"
+        "hero": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)"
       },
       "text": {
         "onPage": {
@@ -649,7 +649,8 @@ var coreTokens = {
     "xs": {
       "size": "0.75rem",
       "lineHeight": "1.25rem",
-      "weight": 400
+      "weight": 400,
+      "letterSpacing": "0.02em"
     },
     "sm": {
       "size": "0.875rem",
@@ -833,6 +834,10 @@ var createCssVariableMap = (tokens2, options = {}) => {
     map[name] = resolveValue(tokens2, value);
   };
   Object.entries(baseTokens.colors).forEach(([group, scale]) => {
+    if (typeof scale === "string" || typeof scale === "number") {
+      assign(toVariableName(prefix, "color", group), scale);
+      return;
+    }
     Object.entries(scale).forEach(([step, value]) => {
       assign(toVariableName(prefix, "color", group, step), value);
     });
@@ -998,15 +1003,18 @@ var generateCssVariables = (tokens2, options = {}) => {
   addBase(toVariableName(prefix, "surface", "card"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "card"]), getPath(surfaceAliases, ["card"])));
   addBase(toVariableName(prefix, "surface", "input"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "input"]), getPath(surfaceAliases, ["input"])));
   addBase(toVariableName(prefix, "surface", "overlay"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"])));
+  addBase(toVariableName(prefix, "surface", "alternate"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "alternate"])));
   addBase(toVariableName(prefix, "surface", "hero"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "hero"]), getPath(surfaceAliases, ["hero"])));
   addBase(toVariableName(prefix, "text", "on", "page", "default"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "default"]), getPath(textAliases, ["onPage", "default"])));
   addBase(toVariableName(prefix, "text", "on", "page", "muted"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "muted"]), getPath(textAliases, ["onPage", "muted"])));
   addBase(toVariableName(prefix, "text", "on", "page", "subtle"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "subtle"]), getPath(textAliases, ["onPage", "subtle"])));
   addBase(toVariableName(prefix, "text", "on", "page", "meta"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "meta"]), getPath(textAliases, ["onPage", "meta"])));
+  addBase(toVariableName(prefix, "text", "on", "page", "brand"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "brand"]), getPath(textAliases, ["onPage", "brand"])));
   addBase(toVariableName(prefix, "text", "on", "surface", "default"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "default"]), getPath(textAliases, ["onSurface", "default"])));
   addBase(toVariableName(prefix, "text", "on", "surface", "muted"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "muted"]), getPath(textAliases, ["onSurface", "muted"])));
   addBase(toVariableName(prefix, "text", "on", "surface", "subtle"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "subtle"]), getPath(textAliases, ["onSurface", "subtle"])));
   addBase(toVariableName(prefix, "text", "on", "surface", "meta"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "meta"]), getPath(textAliases, ["onSurface", "meta"])));
+  addBase(toVariableName(prefix, "text", "on", "surface", "brand"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "brand"]), getPath(textAliases, ["onSurface", "brand"])));
   addBase(toVariableName(prefix, "component", "card", "text"), pickSemantic(tokens2, getPath(defaultMode, ["component", "card", "text"]), getPath(componentAliases, ["card", "text"])));
   addBase(toVariableName(prefix, "component", "card", "text-muted"), pickSemantic(tokens2, getPath(defaultMode, ["component", "card", "textMuted"]), getPath(componentAliases, ["card", "textMuted"])));
   addBase(toVariableName(prefix, "component", "input", "text"), pickSemantic(tokens2, getPath(defaultMode, ["component", "input", "text"]), getPath(componentAliases, ["input", "text"])));
@@ -1050,6 +1058,10 @@ var generateCssVariables = (tokens2, options = {}) => {
     toVariableName(prefix, "surface", "overlay"),
     pickSemantic(tokens2, getPath(darkMode, ["surface", "overlay"]), getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"]))
   );
+  addDark(
+    toVariableName(prefix, "surface", "alternate"),
+    pickSemantic(tokens2, getPath(darkMode, ["surface", "alternate"]), getPath(defaultMode, ["surface", "alternate"]))
+  );
   addDark(
     toVariableName(prefix, "surface", "hero"),
     pickSemantic(tokens2, getPath(darkMode, ["surface", "hero"]), getPath(defaultMode, ["surface", "hero"]), getPath(surfaceAliases, ["hero"]))
@@ -1090,6 +1102,15 @@ var generateCssVariables = (tokens2, options = {}) => {
       getPath(textAliases, ["onPage", "meta"])
     )
   );
+  addDark(
+    toVariableName(prefix, "text", "on", "page", "brand"),
+    pickSemantic(
+      tokens2,
+      getPath(darkMode, ["text", "onPage", "brand"]),
+      getPath(defaultMode, ["text", "onPage", "brand"]),
+      getPath(textAliases, ["onPage", "brand"])
+    )
+  );
   addDark(
     toVariableName(prefix, "text", "on", "surface", "default"),
     pickSemantic(
@@ -1126,6 +1147,15 @@ var generateCssVariables = (tokens2, options = {}) => {
       getPath(textAliases, ["onSurface", "meta"])
     )
   );
+  addDark(
+    toVariableName(prefix, "text", "on", "surface", "brand"),
+    pickSemantic(
+      tokens2,
+      getPath(darkMode, ["text", "onSurface", "brand"]),
+      getPath(defaultMode, ["text", "onSurface", "brand"]),
+      getPath(textAliases, ["onSurface", "brand"])
+    )
+  );
   addDark(
     toVariableName(prefix, "component", "card", "text"),
     pickSemantic(