@phcdevworks/spectre-tokens 2.8.0 → 2.9.0

package/README.md

@@ -128,11 +128,12 @@ mode-aware styling.
 
 | Namespace | What it expresses |
 |---|---|
-| `surface` | Background roles: page, card, overlay, sidebar |
+| `surface` | Background roles: page, card, overlay, sidebar, hover, selected, active, divider |
 | `text` | Foreground roles: default, muted, subtle, meta, on-surface, on-page |
-| `component` | Role-specific tokens for icon boxes, badges, ratings, testimonials, pricing cards |
+| `component` | Role-specific tokens for icon boxes, badges, ratings, testimonials, pricing cards, nav, modal, toast, tooltip, dropdown |
 | `buttons` | Button state tokens: default, hover, active, disabled, CTA |
 | `forms` | Form state tokens: default, focused, error, disabled |
+| `link` | Inline link color roles: default, hover, active, visited |
 | `modes` | Mode-aware overrides under `modes.default` and `modes.dark` |
 
 ```ts
@@ -252,6 +253,7 @@ The generated token object includes these namespaces:
 - `accessibility`
 - `buttons`
 - `forms`
+- `link`
 - `surface`
 - `text`
 - `component`

package/dist/index.cjs

@@ -92,6 +92,61 @@ var coreTokens = {
       "starFilled": "{colors.warning.500}",
       "starEmpty": "{colors.neutral.200}",
       "text": "{colors.neutral.500}"
+    },
+    "nav": {
+      "bg": "{colors.white}",
+      "text": "{colors.neutral.900}",
+      "link": "{colors.neutral.700}",
+      "linkHover": "{colors.brand.600}",
+      "linkActive": "{colors.brand.700}",
+      "border": "{colors.neutral.200}"
+    },
+    "modal": {
+      "bg": "{colors.white}",
+      "shadow": "0 20px 48px -12px {colors.black} / 0.20",
+      "border": "{colors.neutral.200}",
+      "overlay": "{colors.black} / 0.6"
+    },
+    "toast": {
+      "success": {
+        "bg": "{colors.success.50}",
+        "text": "{colors.success.800}",
+        "border": "{colors.success.200}",
+        "icon": "{colors.success.600}"
+      },
+      "warning": {
+        "bg": "{colors.warning.50}",
+        "text": "{colors.warning.800}",
+        "border": "{colors.warning.200}",
+        "icon": "{colors.warning.600}"
+      },
+      "danger": {
+        "bg": "{colors.error.50}",
+        "text": "{colors.error.800}",
+        "border": "{colors.error.200}",
+        "icon": "{colors.error.600}"
+      },
+      "info": {
+        "bg": "{colors.info.50}",
+        "text": "{colors.info.800}",
+        "border": "{colors.info.200}",
+        "icon": "{colors.info.600}"
+      }
+    },
+    "tooltip": {
+      "bg": "{colors.neutral.900}",
+      "text": "{colors.white}",
+      "border": "{colors.neutral.700}"
+    },
+    "dropdown": {
+      "bg": "{colors.white}",
+      "border": "{colors.neutral.200}",
+      "item": {
+        "default": "transparent",
+        "hover": "{colors.neutral.100}",
+        "active": "{colors.info.50}",
+        "text": "{colors.neutral.900}"
+      }
     }
   },
   "buttons": {
@@ -210,7 +265,11 @@ var coreTokens = {
         "input": "{colors.white}",
         "overlay": "{colors.black} / 0.6",
         "alternate": "{colors.neutral.100}",
-        "hero": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
+        "hero": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)",
+        "hover": "{colors.neutral.100}",
+        "selected": "{colors.info.50}",
+        "active": "{colors.neutral.200}",
+        "divider": "{colors.neutral.200}"
       },
       "text": {
         "onPage": {
@@ -287,6 +346,61 @@ var coreTokens = {
           "starFilled": "{colors.warning.500}",
           "starEmpty": "{colors.neutral.200}",
           "text": "{colors.neutral.500}"
+        },
+        "nav": {
+          "bg": "{colors.white}",
+          "text": "{colors.neutral.900}",
+          "link": "{colors.neutral.700}",
+          "linkHover": "{colors.brand.600}",
+          "linkActive": "{colors.brand.700}",
+          "border": "{colors.neutral.200}"
+        },
+        "modal": {
+          "bg": "{colors.white}",
+          "shadow": "0 20px 48px -12px {colors.black} / 0.20",
+          "border": "{colors.neutral.200}",
+          "overlay": "{colors.black} / 0.6"
+        },
+        "toast": {
+          "success": {
+            "bg": "{colors.success.50}",
+            "text": "{colors.success.800}",
+            "border": "{colors.success.200}",
+            "icon": "{colors.success.600}"
+          },
+          "warning": {
+            "bg": "{colors.warning.50}",
+            "text": "{colors.warning.800}",
+            "border": "{colors.warning.200}",
+            "icon": "{colors.warning.600}"
+          },
+          "danger": {
+            "bg": "{colors.error.50}",
+            "text": "{colors.error.800}",
+            "border": "{colors.error.200}",
+            "icon": "{colors.error.600}"
+          },
+          "info": {
+            "bg": "{colors.info.50}",
+            "text": "{colors.info.800}",
+            "border": "{colors.info.200}",
+            "icon": "{colors.info.600}"
+          }
+        },
+        "tooltip": {
+          "bg": "{colors.neutral.900}",
+          "text": "{colors.white}",
+          "border": "{colors.neutral.700}"
+        },
+        "dropdown": {
+          "bg": "{colors.white}",
+          "border": "{colors.neutral.200}",
+          "item": {
+            "default": "transparent",
+            "hover": "{colors.neutral.100}",
+            "active": "{colors.info.50}",
+            "text": "{colors.neutral.900}"
+          }
         }
       }
     },
@@ -297,7 +411,11 @@ var coreTokens = {
         "input": "{colors.neutral.700}",
         "overlay": "{colors.black} / 0.6",
         "alternate": "{colors.neutral.800}",
-        "hero": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)"
+        "hero": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)",
+        "hover": "{colors.neutral.700}",
+        "selected": "{colors.info.900}",
+        "active": "{colors.neutral.600}",
+        "divider": "{colors.neutral.700}"
       },
       "text": {
         "onPage": {
@@ -377,6 +495,61 @@ var coreTokens = {
           "starFilled": "{colors.warning.400}",
           "starEmpty": "{colors.neutral.700}",
           "text": "{colors.neutral.400}"
+        },
+        "nav": {
+          "bg": "{colors.neutral.900}",
+          "text": "{colors.neutral.50}",
+          "link": "{colors.neutral.300}",
+          "linkHover": "{colors.brand.400}",
+          "linkActive": "{colors.brand.300}",
+          "border": "{colors.neutral.700}"
+        },
+        "modal": {
+          "bg": "{colors.neutral.800}",
+          "shadow": "0 20px 48px -12px {colors.black} / 0.20",
+          "border": "{colors.neutral.700}",
+          "overlay": "{colors.black} / 0.6"
+        },
+        "toast": {
+          "success": {
+            "bg": "{colors.success.900}",
+            "text": "{colors.success.100}",
+            "border": "{colors.success.700}",
+            "icon": "{colors.success.400}"
+          },
+          "warning": {
+            "bg": "{colors.warning.900}",
+            "text": "{colors.warning.100}",
+            "border": "{colors.warning.700}",
+            "icon": "{colors.warning.400}"
+          },
+          "danger": {
+            "bg": "{colors.error.900}",
+            "text": "{colors.error.100}",
+            "border": "{colors.error.700}",
+            "icon": "{colors.error.400}"
+          },
+          "info": {
+            "bg": "{colors.info.900}",
+            "text": "{colors.info.100}",
+            "border": "{colors.info.700}",
+            "icon": "{colors.info.400}"
+          }
+        },
+        "tooltip": {
+          "bg": "{colors.neutral.50}",
+          "text": "{colors.neutral.900}",
+          "border": "{colors.neutral.300}"
+        },
+        "dropdown": {
+          "bg": "{colors.neutral.800}",
+          "border": "{colors.neutral.700}",
+          "item": {
+            "default": "transparent",
+            "hover": "{colors.neutral.700}",
+            "active": "{colors.info.900}",
+            "text": "{colors.neutral.100}"
+          }
         }
       }
     }
@@ -543,6 +716,7 @@ var coreTokens = {
   },
   "transitions": {
     "duration": {
+      "reduced": "0.01ms",
       "instant": "75ms",
       "fast": "150ms",
       "base": "200ms",
@@ -602,6 +776,48 @@ var coreTokens = {
       "duration": "{transitions.duration.slowest}",
       "easing": "{transitions.easing.spring}",
       "keyframes": "pulse"
+    },
+    "reducedMotion": {
+      "fadeIn": {
+        "duration": "{transitions.duration.reduced}",
+        "easing": "{transitions.easing.linear}",
+        "keyframes": "fade-in"
+      },
+      "fadeOut": {
+        "duration": "{transitions.duration.reduced}",
+        "easing": "{transitions.easing.linear}",
+        "keyframes": "fade-out"
+      },
+      "slideUp": {
+        "duration": "{transitions.duration.reduced}",
+        "easing": "{transitions.easing.linear}",
+        "keyframes": "slide-up"
+      },
+      "slideDown": {
+        "duration": "{transitions.duration.reduced}",
+        "easing": "{transitions.easing.linear}",
+        "keyframes": "slide-down"
+      },
+      "scaleIn": {
+        "duration": "{transitions.duration.reduced}",
+        "easing": "{transitions.easing.linear}",
+        "keyframes": "scale-in"
+      },
+      "bounce": {
+        "duration": "{transitions.duration.reduced}",
+        "easing": "{transitions.easing.linear}",
+        "keyframes": "bounce"
+      },
+      "shake": {
+        "duration": "{transitions.duration.reduced}",
+        "easing": "{transitions.easing.linear}",
+        "keyframes": "shake"
+      },
+      "pulse": {
+        "duration": "{transitions.duration.reduced}",
+        "easing": "{transitions.easing.linear}",
+        "keyframes": "pulse"
+      }
     }
   },
   "opacity": {
@@ -637,6 +853,8 @@ var coreTokens = {
       "offset": "2px",
       "style": "solid"
     },
+    "reducedMotion": "{transitions.duration.reduced}",
+    "forcedColors": "auto",
     "minTouchTarget": "44px",
     "minTextSize": "16px"
   },
@@ -657,7 +875,17 @@ var coreTokens = {
     "page": "{colors.neutral.50}",
     "card": "{colors.white}",
     "input": "{colors.white}",
-    "overlay": "{colors.black} / 0.6"
+    "overlay": "{colors.black} / 0.6",
+    "hover": "{colors.neutral.100}",
+    "selected": "{colors.info.50}",
+    "active": "{colors.neutral.200}",
+    "divider": "{colors.neutral.200}"
+  },
+  "link": {
+    "default": "{colors.brand.600}",
+    "hover": "{colors.brand.700}",
+    "active": "{colors.brand.800}",
+    "visited": "{colors.accent.700}"
   },
   "text": {
     "onPage": {
@@ -860,6 +1088,42 @@ var ICON_BOX_FIELDS = [
   { name: "icon-warning", tokenKey: "iconWarning" },
   { name: "icon-danger", tokenKey: "iconDanger" }
 ];
+var NAV_FIELDS = [
+  { name: "bg", tokenKey: "bg" },
+  { name: "text", tokenKey: "text" },
+  { name: "link", tokenKey: "link" },
+  { name: "link-hover", tokenKey: "linkHover" },
+  { name: "link-active", tokenKey: "linkActive" },
+  { name: "border", tokenKey: "border" }
+];
+var MODAL_FIELDS = [
+  { name: "bg", tokenKey: "bg" },
+  { name: "shadow", tokenKey: "shadow" },
+  { name: "border", tokenKey: "border" },
+  { name: "overlay", tokenKey: "overlay" }
+];
+var TOAST_VARIANTS = ["success", "warning", "danger", "info"].map((variant) => ({
+  variant,
+  fields: [
+    { name: "bg", tokenKey: "bg" },
+    { name: "text", tokenKey: "text" },
+    { name: "border", tokenKey: "border" },
+    { name: "icon", tokenKey: "icon" }
+  ]
+}));
+var TOOLTIP_FIELDS = [
+  { name: "bg", tokenKey: "bg" },
+  { name: "text", tokenKey: "text" },
+  { name: "border", tokenKey: "border" }
+];
+var DROPDOWN_FIELDS = [
+  { name: "bg", modePath: ["bg"], aliasPath: ["bg"] },
+  { name: "border", modePath: ["border"], aliasPath: ["border"] },
+  { name: "item-default", modePath: ["item", "default"], aliasPath: ["item", "default"] },
+  { name: "item-hover", modePath: ["item", "hover"], aliasPath: ["item", "hover"] },
+  { name: "item-active", modePath: ["item", "active"], aliasPath: ["item", "active"] },
+  { name: "item-text", modePath: ["item", "text"], aliasPath: ["item", "text"] }
+];
 var resolveTokenReference = (tokens2, reference) => {
   const path = reference.slice(1, -1).split(".");
   let current = tokens2;
@@ -1027,6 +1291,7 @@ var createCssVariableMap = (tokens2, options = {}) => {
   assign(toVariableName(prefix, "focus-ring-style"), baseTokens.accessibility.focusRing.style);
   assign(toVariableName(prefix, "min-touch-target"), baseTokens.accessibility.minTouchTarget);
   assign(toVariableName(prefix, "min-text-size"), baseTokens.accessibility.minTextSize);
+  assign(toVariableName(prefix, "reduced-motion"), baseTokens.accessibility.reducedMotion);
   Object.entries(baseTokens.buttons).forEach(([variant, states]) => {
     Object.entries(states).forEach(([state, value]) => {
       assign(toVariableName(prefix, "button", variant, state), value);
@@ -1038,11 +1303,22 @@ var createCssVariableMap = (tokens2, options = {}) => {
     });
   });
   if (baseTokens.animations) {
-    Object.entries(baseTokens.animations).forEach(([name, animation]) => {
-      assign(toVariableName(prefix, "animation", name, "duration"), animation.duration);
-      assign(toVariableName(prefix, "animation", name, "easing"), animation.easing);
-      assign(toVariableName(prefix, "animation", name, "keyframes"), animation.keyframes);
-    });
+    Object.entries(baseTokens.animations).forEach(
+      ([name, animation]) => {
+        if (name === "reducedMotion") {
+          Object.entries(animation).forEach(([subName, subAnimation]) => {
+            assign(toVariableName(prefix, "animation", "reduced-motion", subName, "duration"), subAnimation.duration);
+            assign(toVariableName(prefix, "animation", "reduced-motion", subName, "easing"), subAnimation.easing);
+            assign(toVariableName(prefix, "animation", "reduced-motion", subName, "keyframes"), subAnimation.keyframes);
+          });
+        } else {
+          const entry = animation;
+          assign(toVariableName(prefix, "animation", name, "duration"), entry.duration);
+          assign(toVariableName(prefix, "animation", name, "easing"), entry.easing);
+          assign(toVariableName(prefix, "animation", name, "keyframes"), entry.keyframes);
+        }
+      }
+    );
   }
   return map;
 };
@@ -1088,6 +1364,36 @@ var generateCssVariables = (tokens2, options = {}) => {
       modePath: ["component", "iconBox", tokenKey],
       aliasSrc: componentAliases,
       aliasPath: ["iconBox", tokenKey]
+    })),
+    ...NAV_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["nav", name],
+      modePath: ["component", "nav", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["nav", tokenKey]
+    })),
+    ...MODAL_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["modal", name],
+      modePath: ["component", "modal", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["modal", tokenKey]
+    })),
+    ...TOAST_VARIANTS.flatMap(({ variant, fields }) => fields.map(({ name, tokenKey }) => ({
+      varParts: ["toast", variant, name],
+      modePath: ["component", "toast", variant, tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["toast", variant, tokenKey]
+    }))),
+    ...TOOLTIP_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["tooltip", name],
+      modePath: ["component", "tooltip", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["tooltip", tokenKey]
+    })),
+    ...DROPDOWN_FIELDS.map(({ name, modePath, aliasPath }) => ({
+      varParts: ["dropdown", name],
+      modePath: ["component", "dropdown", ...modePath],
+      aliasSrc: componentAliases,
+      aliasPath: ["dropdown", ...aliasPath]
     }))
   ];
   const baseLines = [];