@phcdevworks/spectre-tokens 2.3.0 → 2.4.0

package/dist/index.css

@@ -208,9 +208,9 @@
   --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-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --sp-shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
+  --sp-shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, 0.12);
   --sp-breakpoint-sm: 640px;
   --sp-breakpoint-md: 768px;
   --sp-breakpoint-lg: 1024px;
@@ -349,7 +349,7 @@
   --sp-surface-page: #141b24;
   --sp-surface-card: #222b38;
   --sp-surface-input: #374253;
-  --sp-surface-overlay: #222b38;
+  --sp-surface-overlay: rgba(0, 0, 0, 0.6);
   --sp-surface-alternate: #222b38;
   --sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 100%);
   --sp-text-on-page-default: #f7f8fb;

package/dist/index.js

@@ -3,7 +3,7 @@ var coreTokens = {
   "component": {
     "card": {
       "text": "{colors.neutral.900}",
-      "textMuted": "{colors.neutral.500}"
+      "textMuted": "{colors.neutral.600}"
     },
     "input": {
       "text": "{colors.neutral.900}",
@@ -44,8 +44,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}",
@@ -56,7 +56,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}",
@@ -237,8 +237,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}",
@@ -249,7 +249,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}",
@@ -263,7 +263,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%)"
       },
@@ -327,8 +327,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}",
@@ -339,7 +339,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}",
@@ -474,9 +474,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",
@@ -995,254 +995,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")}