@phcdevworks/spectre-tokens 2.3.0 → 2.5.0

package/README.md

@@ -13,6 +13,7 @@ token data while downstream UI packages define structure and adapter packages
 translate those contracts for specific frameworks and runtimes.
 
 [Contributing](CONTRIBUTING.md) | [Changelog](CHANGELOG.md) |
+[Token Contract](TOKEN_CONTRACT.md) | [Roadmap](ROADMAP.md) |
 [Security Policy](SECURITY.md)
 
 ## Key capabilities

package/dist/index.cjs

@@ -33,7 +33,7 @@ var coreTokens = {
   "component": {
     "card": {
       "text": "{colors.neutral.900}",
-      "textMuted": "{colors.neutral.500}"
+      "textMuted": "{colors.neutral.600}"
     },
     "input": {
       "text": "{colors.neutral.900}",
@@ -74,8 +74,8 @@ var coreTokens = {
       "border": "{colors.neutral.200}",
       "text": "{colors.neutral.700}",
       "authorName": "{colors.neutral.900}",
-      "authorTitle": "{colors.neutral.500}",
-      "quoteMark": "{colors.neutral.500}"
+      "authorTitle": "{colors.neutral.600}",
+      "quoteMark": "{colors.neutral.600}"
     },
     "pricingCard": {
       "bg": "{colors.white}",
@@ -86,7 +86,7 @@ var coreTokens = {
       "featuredBadgeBg": "{colors.warning.500}",
       "featuredBadgeText": "{colors.neutral.900}",
       "price": "{colors.neutral.900}",
-      "priceDescription": "{colors.neutral.500}"
+      "priceDescription": "{colors.neutral.600}"
     },
     "rating": {
       "starFilled": "{colors.warning.500}",
@@ -156,9 +156,9 @@ var coreTokens = {
       "focusRing": "{colors.brand.500} / 0.4"
     },
     "accent": {
-      "bg": "{colors.accent.600}",
-      "bgHover": "{colors.accent.700}",
-      "bgActive": "{colors.accent.800}",
+      "bg": "{colors.accent.700}",
+      "bgHover": "{colors.accent.800}",
+      "bgActive": "{colors.accent.900}",
       "bgDisabled": "{colors.accent.200}",
       "text": "{colors.white}",
       "textDisabled": "{colors.neutral.400}",
@@ -267,8 +267,8 @@ var coreTokens = {
           "border": "{colors.neutral.200}",
           "text": "{colors.neutral.700}",
           "authorName": "{colors.neutral.900}",
-          "authorTitle": "{colors.neutral.500}",
-          "quoteMark": "{colors.neutral.500}"
+          "authorTitle": "{colors.neutral.600}",
+          "quoteMark": "{colors.neutral.600}"
         },
         "pricingCard": {
           "bg": "{colors.white}",
@@ -279,7 +279,7 @@ var coreTokens = {
           "featuredBadgeBg": "{colors.warning.500}",
           "featuredBadgeText": "{colors.neutral.900}",
           "price": "{colors.neutral.900}",
-          "priceDescription": "{colors.neutral.500}"
+          "priceDescription": "{colors.neutral.600}"
         },
         "rating": {
           "starFilled": "{colors.warning.500}",
@@ -293,7 +293,7 @@ var coreTokens = {
         "page": "{colors.neutral.900}",
         "card": "{colors.neutral.800}",
         "input": "{colors.neutral.700}",
-        "overlay": "{colors.neutral.800}",
+        "overlay": "{colors.black} / 0.6",
         "alternate": "{colors.neutral.800}",
         "hero": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)"
       },
@@ -357,8 +357,8 @@ var coreTokens = {
           "border": "{colors.neutral.700}",
           "text": "{colors.neutral.200}",
           "authorName": "{colors.neutral.100}",
-          "authorTitle": "{colors.neutral.400}",
-          "quoteMark": "{colors.neutral.400}"
+          "authorTitle": "{colors.neutral.300}",
+          "quoteMark": "{colors.neutral.300}"
         },
         "pricingCard": {
           "bg": "{colors.neutral.800}",
@@ -369,7 +369,7 @@ var coreTokens = {
           "featuredBadgeBg": "{colors.warning.500}",
           "featuredBadgeText": "{colors.neutral.900}",
           "price": "{colors.neutral.100}",
-          "priceDescription": "{colors.neutral.400}"
+          "priceDescription": "{colors.neutral.300}"
         },
         "rating": {
           "starFilled": "{colors.warning.400}",
@@ -504,9 +504,9 @@ var coreTokens = {
   },
   "shadows": {
     "none": "none",
-    "sm": "0 1px 2px 0 {colors.neutral.800} / 0.06",
-    "md": "0 2px 6px -1px {colors.neutral.800} / 0.08",
-    "lg": "0 6px 16px -4px {colors.neutral.800} / 0.12"
+    "sm": "0 1px 2px 0 {colors.black} / 0.06",
+    "md": "0 2px 6px -1px {colors.black} / 0.08",
+    "lg": "0 6px 16px -4px {colors.black} / 0.12"
   },
   "breakpoints": {
     "sm": "640px",
@@ -1025,254 +1025,56 @@ var generateCssVariables = (tokens2, options = {}) => {
   const surfaceAliases = tokens2.surface ?? {};
   const textAliases = tokens2.text ?? {};
   const componentAliases = tokens2.component ?? {};
+  const semanticEntries = [
+    { varParts: ["surface", "page"], modePath: ["surface", "page"], aliasSrc: surfaceAliases, aliasPath: ["page"] },
+    { varParts: ["surface", "card"], modePath: ["surface", "card"], aliasSrc: surfaceAliases, aliasPath: ["card"] },
+    { varParts: ["surface", "input"], modePath: ["surface", "input"], aliasSrc: surfaceAliases, aliasPath: ["input"] },
+    { varParts: ["surface", "overlay"], modePath: ["surface", "overlay"], aliasSrc: surfaceAliases, aliasPath: ["overlay"] },
+    { varParts: ["surface", "alternate"], modePath: ["surface", "alternate"] },
+    { varParts: ["surface", "hero"], modePath: ["surface", "hero"], aliasSrc: surfaceAliases, aliasPath: ["hero"] },
+    { varParts: ["text", "on", "page", "default"], modePath: ["text", "onPage", "default"], aliasSrc: textAliases, aliasPath: ["onPage", "default"] },
+    { varParts: ["text", "on", "page", "muted"], modePath: ["text", "onPage", "muted"], aliasSrc: textAliases, aliasPath: ["onPage", "muted"] },
+    { varParts: ["text", "on", "page", "subtle"], modePath: ["text", "onPage", "subtle"], aliasSrc: textAliases, aliasPath: ["onPage", "subtle"] },
+    { varParts: ["text", "on", "page", "meta"], modePath: ["text", "onPage", "meta"], aliasSrc: textAliases, aliasPath: ["onPage", "meta"] },
+    { varParts: ["text", "on", "page", "brand"], modePath: ["text", "onPage", "brand"], aliasSrc: textAliases, aliasPath: ["onPage", "brand"] },
+    { varParts: ["text", "on", "surface", "default"], modePath: ["text", "onSurface", "default"], aliasSrc: textAliases, aliasPath: ["onSurface", "default"] },
+    { varParts: ["text", "on", "surface", "muted"], modePath: ["text", "onSurface", "muted"], aliasSrc: textAliases, aliasPath: ["onSurface", "muted"] },
+    { varParts: ["text", "on", "surface", "subtle"], modePath: ["text", "onSurface", "subtle"], aliasSrc: textAliases, aliasPath: ["onSurface", "subtle"] },
+    { varParts: ["text", "on", "surface", "meta"], modePath: ["text", "onSurface", "meta"], aliasSrc: textAliases, aliasPath: ["onSurface", "meta"] },
+    { varParts: ["text", "on", "surface", "brand"], modePath: ["text", "onSurface", "brand"], aliasSrc: textAliases, aliasPath: ["onSurface", "brand"] },
+    { varParts: ["component", "card", "text"], modePath: ["component", "card", "text"], aliasSrc: componentAliases, aliasPath: ["card", "text"] },
+    { varParts: ["component", "card", "text-muted"], modePath: ["component", "card", "textMuted"], aliasSrc: componentAliases, aliasPath: ["card", "textMuted"] },
+    { varParts: ["component", "input", "text"], modePath: ["component", "input", "text"], aliasSrc: componentAliases, aliasPath: ["input", "text"] },
+    { varParts: ["component", "input", "placeholder"], modePath: ["component", "input", "placeholder"], aliasSrc: componentAliases, aliasPath: ["input", "placeholder"] },
+    { varParts: ["button", "text", "default"], modePath: ["component", "button", "textDefault"], aliasSrc: componentAliases, aliasPath: ["button", "textDefault"] },
+    { varParts: ["button", "text", "on", "primary"], modePath: ["component", "button", "textOnPrimary"], aliasSrc: componentAliases, aliasPath: ["button", "textOnPrimary"] },
+    ...BADGE_VARIANTS.flatMap(({ variant, bgKey, textKey }) => [
+      { varParts: ["badge", variant, "bg"], modePath: ["component", "badge", bgKey], aliasSrc: componentAliases, aliasPath: ["badge", bgKey] },
+      { varParts: ["badge", variant, "text"], modePath: ["component", "badge", textKey], aliasSrc: componentAliases, aliasPath: ["badge", textKey] }
+    ]),
+    ...ICON_BOX_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["icon-box", name],
+      modePath: ["component", "iconBox", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["iconBox", tokenKey]
+    }))
+  ];
   const baseLines = [];
+  const darkLines = [];
   const addBase = (name, value) => {
     if (value !== void 0) baseLines.push(`  ${name}: ${value};`);
   };
-  addBase(toVariableName(prefix, "surface", "page"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "page"]), getPath(surfaceAliases, ["page"])));
-  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"])));
-  addBase(toVariableName(prefix, "component", "input", "placeholder"), pickSemantic(tokens2, getPath(defaultMode, ["component", "input", "placeholder"]), getPath(componentAliases, ["input", "placeholder"])));
-  addBase(toVariableName(prefix, "button", "text", "default"), pickSemantic(tokens2, getPath(defaultMode, ["component", "button", "textDefault"]), getPath(componentAliases, ["button", "textDefault"])));
-  addBase(toVariableName(prefix, "button", "text", "on", "primary"), pickSemantic(tokens2, getPath(defaultMode, ["component", "button", "textOnPrimary"]), getPath(componentAliases, ["button", "textOnPrimary"])));
-  BADGE_VARIANTS.forEach(({ variant, bgKey, textKey }) => {
-    addBase(
-      toVariableName(prefix, "badge", variant, "bg"),
-      pickSemantic(tokens2, getPath(defaultMode, ["component", "badge", bgKey]), getPath(componentAliases, ["badge", bgKey]))
-    );
-    addBase(
-      toVariableName(prefix, "badge", variant, "text"),
-      pickSemantic(tokens2, getPath(defaultMode, ["component", "badge", textKey]), getPath(componentAliases, ["badge", textKey]))
-    );
-  });
-  ICON_BOX_FIELDS.forEach(({ name, tokenKey }) => {
-    addBase(
-      toVariableName(prefix, "icon-box", name),
-      pickSemantic(tokens2, getPath(defaultMode, ["component", "iconBox", tokenKey]), getPath(componentAliases, ["iconBox", tokenKey]))
-    );
-  });
-  const rootLines = [...baseLines, ...mapLines];
-  const darkLines = [];
   const addDark = (name, value) => {
     if (value !== void 0) darkLines.push(`  ${name}: ${value};`);
   };
-  addDark(
-    toVariableName(prefix, "surface", "page"),
-    pickSemantic(tokens2, getPath(darkMode, ["surface", "page"]), getPath(defaultMode, ["surface", "page"]), getPath(surfaceAliases, ["page"]))
-  );
-  addDark(
-    toVariableName(prefix, "surface", "card"),
-    pickSemantic(tokens2, getPath(darkMode, ["surface", "card"]), getPath(defaultMode, ["surface", "card"]), getPath(surfaceAliases, ["card"]))
-  );
-  addDark(
-    toVariableName(prefix, "surface", "input"),
-    pickSemantic(tokens2, getPath(darkMode, ["surface", "input"]), getPath(defaultMode, ["surface", "input"]), getPath(surfaceAliases, ["input"]))
-  );
-  addDark(
-    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"]))
-  );
-  addDark(
-    toVariableName(prefix, "text", "on", "page", "default"),
-    pickSemantic(
-      tokens2,
-      getPath(darkMode, ["text", "onPage", "default"]),
-      getPath(defaultMode, ["text", "onPage", "default"]),
-      getPath(textAliases, ["onPage", "default"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "text", "on", "page", "muted"),
-    pickSemantic(
-      tokens2,
-      getPath(darkMode, ["text", "onPage", "muted"]),
-      getPath(defaultMode, ["text", "onPage", "muted"]),
-      getPath(textAliases, ["onPage", "muted"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "text", "on", "page", "subtle"),
-    pickSemantic(
-      tokens2,
-      getPath(darkMode, ["text", "onPage", "subtle"]),
-      getPath(defaultMode, ["text", "onPage", "subtle"]),
-      getPath(textAliases, ["onPage", "subtle"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "text", "on", "page", "meta"),
-    pickSemantic(
-      tokens2,
-      getPath(darkMode, ["text", "onPage", "meta"]),
-      getPath(defaultMode, ["text", "onPage", "meta"]),
-      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(
-      tokens2,
-      getPath(darkMode, ["text", "onSurface", "default"]),
-      getPath(defaultMode, ["text", "onSurface", "default"]),
-      getPath(textAliases, ["onSurface", "default"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "text", "on", "surface", "muted"),
-    pickSemantic(
-      tokens2,
-      getPath(darkMode, ["text", "onSurface", "muted"]),
-      getPath(defaultMode, ["text", "onSurface", "muted"]),
-      getPath(textAliases, ["onSurface", "muted"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "text", "on", "surface", "subtle"),
-    pickSemantic(
-      tokens2,
-      getPath(darkMode, ["text", "onSurface", "subtle"]),
-      getPath(defaultMode, ["text", "onSurface", "subtle"]),
-      getPath(textAliases, ["onSurface", "subtle"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "text", "on", "surface", "meta"),
-    pickSemantic(
-      tokens2,
-      getPath(darkMode, ["text", "onSurface", "meta"]),
-      getPath(defaultMode, ["text", "onSurface", "meta"]),
-      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(
-      tokens2,
-      getPath(darkMode, ["component", "card", "text"]),
-      getPath(defaultMode, ["component", "card", "text"]),
-      getPath(componentAliases, ["card", "text"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "component", "card", "text-muted"),
-    pickSemantic(
-      tokens2,
-      getPath(darkMode, ["component", "card", "textMuted"]),
-      getPath(defaultMode, ["component", "card", "textMuted"]),
-      getPath(componentAliases, ["card", "textMuted"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "component", "input", "text"),
-    pickSemantic(
-      tokens2,
-      getPath(darkMode, ["component", "input", "text"]),
-      getPath(defaultMode, ["component", "input", "text"]),
-      getPath(componentAliases, ["input", "text"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "component", "input", "placeholder"),
-    pickSemantic(
-      tokens2,
-      getPath(darkMode, ["component", "input", "placeholder"]),
-      getPath(defaultMode, ["component", "input", "placeholder"]),
-      getPath(componentAliases, ["input", "placeholder"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "button", "text", "default"),
-    pickSemantic(
-      tokens2,
-      getPath(darkMode, ["component", "button", "textDefault"]),
-      getPath(defaultMode, ["component", "button", "textDefault"]),
-      getPath(componentAliases, ["button", "textDefault"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "button", "text", "on", "primary"),
-    pickSemantic(
-      tokens2,
-      getPath(darkMode, ["component", "button", "textOnPrimary"]),
-      getPath(defaultMode, ["component", "button", "textOnPrimary"]),
-      getPath(componentAliases, ["button", "textOnPrimary"])
-    )
-  );
-  BADGE_VARIANTS.forEach(({ variant, bgKey, textKey }) => {
-    addDark(
-      toVariableName(prefix, "badge", variant, "bg"),
-      pickSemantic(
-        tokens2,
-        getPath(darkMode, ["component", "badge", bgKey]),
-        getPath(defaultMode, ["component", "badge", bgKey]),
-        getPath(componentAliases, ["badge", bgKey])
-      )
-    );
-    addDark(
-      toVariableName(prefix, "badge", variant, "text"),
-      pickSemantic(
-        tokens2,
-        getPath(darkMode, ["component", "badge", textKey]),
-        getPath(defaultMode, ["component", "badge", textKey]),
-        getPath(componentAliases, ["badge", textKey])
-      )
-    );
-  });
-  ICON_BOX_FIELDS.forEach(({ name, tokenKey }) => {
-    addDark(
-      toVariableName(prefix, "icon-box", name),
-      pickSemantic(
-        tokens2,
-        getPath(darkMode, ["component", "iconBox", tokenKey]),
-        getPath(defaultMode, ["component", "iconBox", tokenKey]),
-        getPath(componentAliases, ["iconBox", tokenKey])
-      )
-    );
+  semanticEntries.forEach(({ varParts, modePath, aliasSrc, aliasPath }) => {
+    const varName = toVariableName(prefix, ...varParts);
+    const aliasCandidate = aliasSrc && aliasPath ? [getPath(aliasSrc, aliasPath)] : [];
+    addBase(varName, pickSemantic(tokens2, getPath(defaultMode, modePath), ...aliasCandidate));
+    addDark(varName, pickSemantic(tokens2, getPath(darkMode, modePath), getPath(defaultMode, modePath), ...aliasCandidate));
   });
   const rootBlock = `${selector} {
-${rootLines.join("\n")}
+${[...baseLines, ...mapLines].join("\n")}
 }`;
   const darkBlock = `${selector}[data-spectre-theme="dark"] {
 ${darkLines.join("\n")}