@phcdevworks/spectre-tokens 2.9.0 → 3.1.0

package/dist/index.css

@@ -3,8 +3,12 @@
   --sp-surface-card: #ffffff;
   --sp-surface-input: #ffffff;
   --sp-surface-overlay: rgba(0, 0, 0, 0.6);
-  --sp-surface-alternate: #eef1f6;
+  --sp-surface-subtle: #eef1f6;
   --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
+  --sp-surface-hover: #eef1f6;
+  --sp-surface-selected: #f0f9ff;
+  --sp-surface-active: #d9dfeb;
+  --sp-surface-divider: #d9dfeb;
   --sp-text-on-page-default: #141b24;
   --sp-text-on-page-muted: #4b576a;
   --sp-text-on-page-subtle: #657287;
@@ -72,6 +76,10 @@
   --sp-dropdown-item-hover: #eef1f6;
   --sp-dropdown-item-active: #f0f9ff;
   --sp-dropdown-item-text: #141b24;
+  --sp-link-default: #1f57db;
+  --sp-link-hover: #1946b4;
+  --sp-link-active: #173b8f;
+  --sp-link-visited: #5d28b8;
   --sp-color-brand-50: #eef4ff;
   --sp-color-brand-100: #d9e7ff;
   --sp-color-brand-200: #b9d2ff;
@@ -184,6 +192,8 @@
   --sp-layout-container-padding-inline-md: 1.5rem;
   --sp-layout-container-padding-inline-lg: 2rem;
   --sp-layout-container-max-width: 72rem;
+  --sp-layout-container-max-width-prose: 65ch;
+  --sp-layout-sidebar-width: 16rem;
   --sp-border-width-none: 0;
   --sp-border-width-base: 1px;
   --sp-border-width-thick: 2px;
@@ -422,8 +432,12 @@
   --sp-surface-card: #222b38;
   --sp-surface-input: #374253;
   --sp-surface-overlay: rgba(0, 0, 0, 0.6);
-  --sp-surface-alternate: #222b38;
+  --sp-surface-subtle: #222b38;
   --sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 100%);
+  --sp-surface-hover: #374253;
+  --sp-surface-selected: #082f49;
+  --sp-surface-active: #4b576a;
+  --sp-surface-divider: #374253;
   --sp-text-on-page-default: #f7f8fb;
   --sp-text-on-page-muted: #b7c1d4;
   --sp-text-on-page-subtle: #8a96ad;
@@ -491,4 +505,8 @@
   --sp-dropdown-item-hover: #374253;
   --sp-dropdown-item-active: #082f49;
   --sp-dropdown-item-text: #eef1f6;
+  --sp-link-default: #1f57db;
+  --sp-link-hover: #1946b4;
+  --sp-link-active: #173b8f;
+  --sp-link-visited: #5d28b8;
 }

package/dist/index.d.cts

@@ -233,7 +233,7 @@ interface SpectreGeneratedTokens {
                 card: string;
                 input: string;
                 overlay: string;
-                alternate: string;
+                subtle: string;
                 hero: string;
                 hover: string;
                 selected: string;
@@ -379,7 +379,7 @@ interface SpectreGeneratedTokens {
                 card: string;
                 input: string;
                 overlay: string;
-                alternate: string;
+                subtle: string;
                 hero: string;
                 hover: string;
                 selected: string;
@@ -899,6 +899,10 @@ interface SpectreGeneratedTokens {
                 lg: string;
             };
             maxWidth: string;
+            maxWidthProse: string;
+        };
+        sidebar: {
+            width: string;
         };
     };
     font: {
@@ -1208,7 +1212,7 @@ interface SpectreModeTokens {
         card: SemanticTokenValue;
         input: SemanticTokenValue;
         overlay: SemanticTokenValue;
-        alternate: SemanticTokenValue;
+        subtle: SemanticTokenValue;
         hero: SemanticTokenValue;
         hover: SemanticTokenValue;
         selected: SemanticTokenValue;
@@ -1245,6 +1249,10 @@ interface LayoutTokens {
     container: {
         paddingInline: TokenScale;
         maxWidth: string;
+        maxWidthProse: string;
+    };
+    sidebar: {
+        width: string;
     };
 }
 type Tokens = SpectreGeneratedTokens;
@@ -1269,6 +1277,7 @@ interface TailwindTheme {
     transitionTimingFunction: SpectreGeneratedTokens['transitions']['easing'];
     opacity: SpectreGeneratedTokens['opacity'];
     maxWidth: Record<string, string | undefined>;
+    width: Record<string, string | undefined>;
     borderWidth: Record<string, string | undefined>;
 }
 

package/dist/index.d.ts

@@ -233,7 +233,7 @@ interface SpectreGeneratedTokens {
                 card: string;
                 input: string;
                 overlay: string;
-                alternate: string;
+                subtle: string;
                 hero: string;
                 hover: string;
                 selected: string;
@@ -379,7 +379,7 @@ interface SpectreGeneratedTokens {
                 card: string;
                 input: string;
                 overlay: string;
-                alternate: string;
+                subtle: string;
                 hero: string;
                 hover: string;
                 selected: string;
@@ -899,6 +899,10 @@ interface SpectreGeneratedTokens {
                 lg: string;
             };
             maxWidth: string;
+            maxWidthProse: string;
+        };
+        sidebar: {
+            width: string;
         };
     };
     font: {
@@ -1208,7 +1212,7 @@ interface SpectreModeTokens {
         card: SemanticTokenValue;
         input: SemanticTokenValue;
         overlay: SemanticTokenValue;
-        alternate: SemanticTokenValue;
+        subtle: SemanticTokenValue;
         hero: SemanticTokenValue;
         hover: SemanticTokenValue;
         selected: SemanticTokenValue;
@@ -1245,6 +1249,10 @@ interface LayoutTokens {
     container: {
         paddingInline: TokenScale;
         maxWidth: string;
+        maxWidthProse: string;
+    };
+    sidebar: {
+        width: string;
     };
 }
 type Tokens = SpectreGeneratedTokens;
@@ -1269,6 +1277,7 @@ interface TailwindTheme {
     transitionTimingFunction: SpectreGeneratedTokens['transitions']['easing'];
     opacity: SpectreGeneratedTokens['opacity'];
     maxWidth: Record<string, string | undefined>;
+    width: Record<string, string | undefined>;
     borderWidth: Record<string, string | undefined>;
 }
 

package/dist/index.js

@@ -234,7 +234,7 @@ var coreTokens = {
         "card": "{colors.white}",
         "input": "{colors.white}",
         "overlay": "{colors.black} / 0.6",
-        "alternate": "{colors.neutral.100}",
+        "subtle": "{colors.neutral.100}",
         "hero": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)",
         "hover": "{colors.neutral.100}",
         "selected": "{colors.info.50}",
@@ -380,7 +380,7 @@ var coreTokens = {
         "card": "{colors.neutral.800}",
         "input": "{colors.neutral.700}",
         "overlay": "{colors.black} / 0.6",
-        "alternate": "{colors.neutral.800}",
+        "subtle": "{colors.neutral.800}",
         "hero": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)",
         "hover": "{colors.neutral.700}",
         "selected": "{colors.info.900}",
@@ -899,7 +899,11 @@ var coreTokens = {
         "md": "1.5rem",
         "lg": "2rem"
       },
-      "maxWidth": "72rem"
+      "maxWidth": "72rem",
+      "maxWidthProse": "65ch"
+    },
+    "sidebar": {
+      "width": "16rem"
     }
   },
   "font": {
@@ -1201,6 +1205,13 @@ var createCssVariableMap = (tokens2, options = {}) => {
     if (container?.maxWidth) {
       assign(toVariableName(prefix, "layout", "container", "max-width"), container.maxWidth);
     }
+    if (container?.maxWidthProse) {
+      assign(toVariableName(prefix, "layout", "container", "max-width-prose"), container.maxWidthProse);
+    }
+    const sidebar = layout.sidebar;
+    if (sidebar?.width) {
+      assign(toVariableName(prefix, "layout", "sidebar", "width"), sidebar.width);
+    }
   }
   const border = baseTokens.border;
   if (border?.width) {
@@ -1302,13 +1313,18 @@ var generateCssVariables = (tokens2, options = {}) => {
   const surfaceAliases = tokens2.surface ?? {};
   const textAliases = tokens2.text ?? {};
   const componentAliases = tokens2.component ?? {};
+  const linkTokens = tokens2.link ?? {};
   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", "subtle"], modePath: ["surface", "subtle"] },
     { varParts: ["surface", "hero"], modePath: ["surface", "hero"], aliasSrc: surfaceAliases, aliasPath: ["hero"] },
+    { varParts: ["surface", "hover"], modePath: ["surface", "hover"], aliasSrc: surfaceAliases, aliasPath: ["hover"] },
+    { varParts: ["surface", "selected"], modePath: ["surface", "selected"], aliasSrc: surfaceAliases, aliasPath: ["selected"] },
+    { varParts: ["surface", "active"], modePath: ["surface", "active"], aliasSrc: surfaceAliases, aliasPath: ["active"] },
+    { varParts: ["surface", "divider"], modePath: ["surface", "divider"], aliasSrc: surfaceAliases, aliasPath: ["divider"] },
     { 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"] },
@@ -1380,6 +1396,12 @@ var generateCssVariables = (tokens2, options = {}) => {
     addBase(varName, pickSemantic(tokens2, getPath(defaultMode, modePath), ...aliasCandidate));
     addDark(varName, pickSemantic(tokens2, getPath(darkMode, modePath), getPath(defaultMode, modePath), ...aliasCandidate));
   });
+  Object.entries(linkTokens).forEach(([key, value]) => {
+    const varName = toVariableName(prefix, "link", key);
+    const resolved = pickSemantic(tokens2, value);
+    addBase(varName, resolved);
+    addDark(varName, resolved);
+  });
   const rootBlock = `${selector} {
 ${[...baseLines, ...mapLines].join("\n")}
 }`;
@@ -1431,7 +1453,11 @@ var createTailwindTheme = (source = tokens) => {
     transitionTimingFunction: { ...source.transitions.easing },
     opacity: { ...source.opacity },
     maxWidth: {
-      container: source.layout?.container?.maxWidth
+      container: source.layout?.container?.maxWidth,
+      prose: source.layout?.container?.maxWidthProse
+    },
+    width: {
+      sidebar: source.layout?.sidebar?.width
     },
     borderWidth: {
       DEFAULT: source.border?.width.base,