@phcdevworks/spectre-tokens 0.0.2 → 0.0.4

package/dist/index.css

@@ -1,4 +1,18 @@
 :root {
+  --sp-surface-page: #f8fafc;
+  --sp-surface-card: #ffffff;
+  --sp-surface-input: #ffffff;
+  --sp-surface-overlay: rgba(15,23,42,0.6);
+  --sp-text-on-page-default: #0f172a;
+  --sp-text-on-page-muted: #475569;
+  --sp-text-on-surface-default: #0f172a;
+  --sp-text-on-surface-muted: #6b7280;
+  --sp-component-card-text: #0f172a;
+  --sp-component-card-text-muted: #6b7280;
+  --sp-component-input-text: #0f172a;
+  --sp-component-input-placeholder: #94a3b8;
+  --sp-button-text-default: #0f172a;
+  --sp-button-text-on-primary: #ffffff;
   --sp-color-brand-50: #f5f0ff;
   --sp-color-brand-100: #ebe2ff;
   --sp-color-brand-200: #d7c6ff;
@@ -224,3 +238,19 @@
   --sp-animation-pulse-easing: cubic-bezier(0.4, 0, 0.2, 1);
   --sp-animation-pulse-keyframes: pulse;
 }
+:root[data-spectre-theme="dark"] {
+  --sp-surface-page: #0f172a;
+  --sp-surface-card: #1e293b;
+  --sp-surface-input: #334155;
+  --sp-surface-overlay: #1e293b;
+  --sp-text-on-page-default: #f8fafc;
+  --sp-text-on-page-muted: #cbd5f5;
+  --sp-text-on-surface-default: #f1f5f9;
+  --sp-text-on-surface-muted: #cbd5f5;
+  --sp-component-card-text: #f1f5f9;
+  --sp-component-card-text-muted: #cbd5f5;
+  --sp-component-input-text: #f1f5f9;
+  --sp-component-input-placeholder: #94a3b8;
+  --sp-button-text-default: #f1f5f9;
+  --sp-button-text-on-primary: #ffffff;
+}

package/dist/index.d.cts

@@ -45,6 +45,45 @@ interface FormStateTokens {
     placeholder?: string;
     ring?: string;
 }
+type SpectreModeName = 'default' | 'dark';
+type SemanticTokenValue = string | {
+    value: string;
+    [key: string]: any;
+};
+interface SpectreModeTokens {
+    surface: {
+        page: SemanticTokenValue;
+        card: SemanticTokenValue;
+        input: SemanticTokenValue;
+        overlay: SemanticTokenValue;
+    };
+    text: {
+        onPage: {
+            default: SemanticTokenValue;
+            muted: SemanticTokenValue;
+            subtle: SemanticTokenValue;
+        };
+        onSurface: {
+            default: SemanticTokenValue;
+            muted: SemanticTokenValue;
+            subtle: SemanticTokenValue;
+        };
+    };
+    component: {
+        card: {
+            text: SemanticTokenValue;
+            textMuted: SemanticTokenValue;
+        };
+        input: {
+            text: SemanticTokenValue;
+            placeholder: SemanticTokenValue;
+        };
+        button: {
+            textDefault: SemanticTokenValue;
+            textOnPrimary: SemanticTokenValue;
+        };
+    };
+}
 interface SpectreTokens {
     colors: any;
     spacing: any;
@@ -59,6 +98,47 @@ interface SpectreTokens {
     accessibility?: any;
     opacity?: any;
     animations?: any;
+    borders?: any;
+    surface: {
+        page: SemanticTokenValue;
+        card: SemanticTokenValue;
+        input: SemanticTokenValue;
+        overlay: SemanticTokenValue;
+        [key: string]: SemanticTokenValue;
+    };
+    text: {
+        onPage: {
+            default: SemanticTokenValue;
+            muted: SemanticTokenValue;
+            subtle?: SemanticTokenValue;
+        };
+        onSurface: {
+            default: SemanticTokenValue;
+            muted: SemanticTokenValue;
+            subtle?: SemanticTokenValue;
+        };
+        [key: string]: any;
+    };
+    component: {
+        card: {
+            text: SemanticTokenValue;
+            textMuted: SemanticTokenValue;
+        };
+        input: {
+            text: SemanticTokenValue;
+            placeholder: SemanticTokenValue;
+        };
+        button: {
+            textDefault: SemanticTokenValue;
+            textOnPrimary: SemanticTokenValue;
+        };
+        [key: string]: any;
+    };
+    modes: {
+        default: Partial<SpectreModeTokens>;
+        dark: Partial<SpectreModeTokens>;
+        [mode: string]: Partial<SpectreModeTokens>;
+    };
 }
 interface Tokens {
     colors: Record<string, ColorScale>;
@@ -97,7 +177,7 @@ interface TailwindTheme {
     opacity: TokenScale;
 }
 
-declare const generateCssVariables: (tokens: Tokens, options?: CssVariableOptions) => string;
+declare const generateCssVariables: (tokens: SpectreTokens, options?: CssVariableOptions) => string;
 
 declare const tokens: SpectreTokens;
 declare const tailwindTheme: TailwindTheme;
@@ -105,4 +185,4 @@ declare const tailwindPreset: {
     theme: TailwindTheme;
 };
 
-export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type FormStateTokens, type SpectreTokens, type TailwindTheme, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tailwindPreset, tailwindTheme, tokens };
+export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type FormStateTokens, type SpectreModeName, type SpectreModeTokens, type SpectreTokens, type TailwindTheme, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tailwindPreset, tailwindTheme, tokens };

package/dist/index.d.ts

@@ -45,6 +45,45 @@ interface FormStateTokens {
     placeholder?: string;
     ring?: string;
 }
+type SpectreModeName = 'default' | 'dark';
+type SemanticTokenValue = string | {
+    value: string;
+    [key: string]: any;
+};
+interface SpectreModeTokens {
+    surface: {
+        page: SemanticTokenValue;
+        card: SemanticTokenValue;
+        input: SemanticTokenValue;
+        overlay: SemanticTokenValue;
+    };
+    text: {
+        onPage: {
+            default: SemanticTokenValue;
+            muted: SemanticTokenValue;
+            subtle: SemanticTokenValue;
+        };
+        onSurface: {
+            default: SemanticTokenValue;
+            muted: SemanticTokenValue;
+            subtle: SemanticTokenValue;
+        };
+    };
+    component: {
+        card: {
+            text: SemanticTokenValue;
+            textMuted: SemanticTokenValue;
+        };
+        input: {
+            text: SemanticTokenValue;
+            placeholder: SemanticTokenValue;
+        };
+        button: {
+            textDefault: SemanticTokenValue;
+            textOnPrimary: SemanticTokenValue;
+        };
+    };
+}
 interface SpectreTokens {
     colors: any;
     spacing: any;
@@ -59,6 +98,47 @@ interface SpectreTokens {
     accessibility?: any;
     opacity?: any;
     animations?: any;
+    borders?: any;
+    surface: {
+        page: SemanticTokenValue;
+        card: SemanticTokenValue;
+        input: SemanticTokenValue;
+        overlay: SemanticTokenValue;
+        [key: string]: SemanticTokenValue;
+    };
+    text: {
+        onPage: {
+            default: SemanticTokenValue;
+            muted: SemanticTokenValue;
+            subtle?: SemanticTokenValue;
+        };
+        onSurface: {
+            default: SemanticTokenValue;
+            muted: SemanticTokenValue;
+            subtle?: SemanticTokenValue;
+        };
+        [key: string]: any;
+    };
+    component: {
+        card: {
+            text: SemanticTokenValue;
+            textMuted: SemanticTokenValue;
+        };
+        input: {
+            text: SemanticTokenValue;
+            placeholder: SemanticTokenValue;
+        };
+        button: {
+            textDefault: SemanticTokenValue;
+            textOnPrimary: SemanticTokenValue;
+        };
+        [key: string]: any;
+    };
+    modes: {
+        default: Partial<SpectreModeTokens>;
+        dark: Partial<SpectreModeTokens>;
+        [mode: string]: Partial<SpectreModeTokens>;
+    };
 }
 interface Tokens {
     colors: Record<string, ColorScale>;
@@ -97,7 +177,7 @@ interface TailwindTheme {
     opacity: TokenScale;
 }
 
-declare const generateCssVariables: (tokens: Tokens, options?: CssVariableOptions) => string;
+declare const generateCssVariables: (tokens: SpectreTokens, options?: CssVariableOptions) => string;
 
 declare const tokens: SpectreTokens;
 declare const tailwindTheme: TailwindTheme;
@@ -105,4 +185,4 @@ declare const tailwindPreset: {
     theme: TailwindTheme;
 };
 
-export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type FormStateTokens, type SpectreTokens, type TailwindTheme, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tailwindPreset, tailwindTheme, tokens };
+export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type FormStateTokens, type SpectreModeName, type SpectreModeTokens, type SpectreTokens, type TailwindTheme, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tailwindPreset, tailwindTheme, tokens };

package/dist/index.js

@@ -91,6 +91,184 @@ var core_default = {
       info: "#3b82f6"
     }
   },
+  surface: {
+    page: {
+      value: "#f8fafc",
+      description: "primary app background"
+    },
+    card: {
+      value: "#ffffff",
+      description: "containers and tiles"
+    },
+    input: {
+      value: "#ffffff",
+      description: "form inputs, textareas"
+    },
+    overlay: {
+      value: "rgba(15,23,42,0.6)",
+      description: "modals, dropdowns, flyouts"
+    }
+  },
+  text: {
+    onPage: {
+      default: "#0f172a",
+      muted: "#475569",
+      subtle: "#94a3b8"
+    },
+    onSurface: {
+      default: "#0f172a",
+      muted: "#6b7280",
+      subtle: "#94a3b8"
+    }
+  },
+  component: {
+    card: {
+      text: "#0f172a",
+      textMuted: "#6b7280"
+    },
+    input: {
+      text: "#0f172a",
+      placeholder: "#94a3b8"
+    },
+    button: {
+      textDefault: "#0f172a",
+      textOnPrimary: "#ffffff"
+    }
+  },
+  modes: {
+    default: {
+      surface: {
+        page: {
+          value: "#f8fafc"
+        },
+        card: {
+          value: "#ffffff"
+        },
+        input: {
+          value: "#ffffff"
+        },
+        overlay: {
+          value: "rgba(15,23,42,0.6)"
+        }
+      },
+      text: {
+        onPage: {
+          default: {
+            value: "#0f172a"
+          },
+          muted: {
+            value: "#475569"
+          },
+          subtle: {
+            value: "#94a3b8"
+          }
+        },
+        onSurface: {
+          default: {
+            value: "#0f172a"
+          },
+          muted: {
+            value: "#6b7280"
+          },
+          subtle: {
+            value: "#94a3b8"
+          }
+        }
+      },
+      component: {
+        card: {
+          text: {
+            value: "#0f172a"
+          },
+          textMuted: {
+            value: "#6b7280"
+          }
+        },
+        input: {
+          text: {
+            value: "#0f172a"
+          },
+          placeholder: {
+            value: "#94a3b8"
+          }
+        },
+        button: {
+          textDefault: {
+            value: "#0f172a"
+          },
+          textOnPrimary: {
+            value: "#ffffff"
+          }
+        }
+      }
+    },
+    dark: {
+      surface: {
+        page: {
+          value: "#0f172a"
+        },
+        card: {
+          value: "#1e293b"
+        },
+        input: {
+          value: "#334155"
+        },
+        overlay: {
+          value: "#1e293b"
+        }
+      },
+      text: {
+        onPage: {
+          default: {
+            value: "#f8fafc"
+          },
+          muted: {
+            value: "#cbd5f5"
+          },
+          subtle: {
+            value: "#94a3b8"
+          }
+        },
+        onSurface: {
+          default: {
+            value: "#f1f5f9"
+          },
+          muted: {
+            value: "#cbd5f5"
+          },
+          subtle: {
+            value: "#94a3b8"
+          }
+        }
+      },
+      component: {
+        card: {
+          text: {
+            value: "#f1f5f9"
+          },
+          textMuted: {
+            value: "#cbd5f5"
+          }
+        },
+        input: {
+          text: {
+            value: "#f1f5f9"
+          },
+          placeholder: {
+            value: "#94a3b8"
+          }
+        },
+        button: {
+          textDefault: {
+            value: "#f1f5f9"
+          },
+          textOnPrimary: {
+            value: "#ffffff"
+          }
+        }
+      }
+    }
+  },
   opacity: {
     disabled: "0.38",
     hover: "0.92",
@@ -201,6 +379,10 @@ var core_default = {
     lg: "8px",
     pill: "999px"
   },
+  borders: {
+    card: "#334155",
+    input: "#cbd5f5"
+  },
   typography: {
     families: {
       sans: "'Inter', 'Helvetica Neue', Arial, sans-serif",
@@ -405,13 +587,158 @@ var createCssVariableMap = (tokens2, options = {}) => {
   });
   return map;
 };
+var resolveSemanticValue = (value) => {
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  if (value && typeof value === "object" && "value" in value) {
+    return String(value.value);
+  }
+  return void 0;
+};
+var getPath = (source, path) => path.reduce((acc, key) => acc && typeof acc === "object" ? acc[key] : void 0, source);
+var pickSemantic = (...candidates) => {
+  for (const candidate of candidates) {
+    const resolved = resolveSemanticValue(candidate);
+    if (resolved !== void 0) return resolved;
+  }
+  return void 0;
+};
 var generateCssVariables = (tokens2, options = {}) => {
   const selector = options.selector ?? DEFAULT_SELECTOR;
-  const declarations = createCssVariableMap(tokens2, options);
-  const lines = Object.entries(declarations).map(([name, value]) => `  ${name}: ${value};`).join("\n");
-  return `${selector} {
-${lines}
-}
+  const prefix = options.prefix ?? DEFAULT_PREFIX;
+  const declarations = createCssVariableMap(tokens2, { ...options, prefix });
+  const mapLines = Object.entries(declarations).map(([name, value]) => `  ${name}: ${value};`);
+  const defaultMode = tokens2.modes?.default ?? {};
+  const darkMode = tokens2.modes?.dark ?? {};
+  const surfaceAliases = tokens2.surface ?? {};
+  const textAliases = tokens2.text ?? {};
+  const componentAliases = tokens2.component ?? {};
+  const baseLines = [];
+  const addBase = (name, value) => {
+    if (value !== void 0) baseLines.push(`  ${name}: ${value};`);
+  };
+  addBase(toVariableName(prefix, "surface", "page"), pickSemantic(getPath(defaultMode, ["surface", "page"]), getPath(surfaceAliases, ["page"])));
+  addBase(toVariableName(prefix, "surface", "card"), pickSemantic(getPath(defaultMode, ["surface", "card"]), getPath(surfaceAliases, ["card"])));
+  addBase(toVariableName(prefix, "surface", "input"), pickSemantic(getPath(defaultMode, ["surface", "input"]), getPath(surfaceAliases, ["input"])));
+  addBase(toVariableName(prefix, "surface", "overlay"), pickSemantic(getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"])));
+  addBase(toVariableName(prefix, "text", "on", "page", "default"), pickSemantic(getPath(defaultMode, ["text", "onPage", "default"]), getPath(textAliases, ["onPage", "default"])));
+  addBase(toVariableName(prefix, "text", "on", "page", "muted"), pickSemantic(getPath(defaultMode, ["text", "onPage", "muted"]), getPath(textAliases, ["onPage", "muted"])));
+  addBase(toVariableName(prefix, "text", "on", "surface", "default"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "default"]), getPath(textAliases, ["onSurface", "default"])));
+  addBase(toVariableName(prefix, "text", "on", "surface", "muted"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "muted"]), getPath(textAliases, ["onSurface", "muted"])));
+  addBase(toVariableName(prefix, "component", "card", "text"), pickSemantic(getPath(defaultMode, ["component", "card", "text"]), getPath(componentAliases, ["card", "text"])));
+  addBase(toVariableName(prefix, "component", "card", "text-muted"), pickSemantic(getPath(defaultMode, ["component", "card", "textMuted"]), getPath(componentAliases, ["card", "textMuted"])));
+  addBase(toVariableName(prefix, "component", "input", "text"), pickSemantic(getPath(defaultMode, ["component", "input", "text"]), getPath(componentAliases, ["input", "text"])));
+  addBase(toVariableName(prefix, "component", "input", "placeholder"), pickSemantic(getPath(defaultMode, ["component", "input", "placeholder"]), getPath(componentAliases, ["input", "placeholder"])));
+  addBase(toVariableName(prefix, "button", "text", "default"), pickSemantic(getPath(defaultMode, ["component", "button", "textDefault"]), getPath(componentAliases, ["button", "textDefault"])));
+  addBase(toVariableName(prefix, "button", "text", "on", "primary"), pickSemantic(getPath(defaultMode, ["component", "button", "textOnPrimary"]), getPath(componentAliases, ["button", "textOnPrimary"])));
+  const rootLines = [...baseLines, ...mapLines];
+  const darkLines = [];
+  const addDark = (name, value) => {
+    if (value !== void 0) darkLines.push(`  ${name}: ${value};`);
+  };
+  addDark(
+    toVariableName(prefix, "surface", "page"),
+    pickSemantic(getPath(darkMode, ["surface", "page"]), getPath(defaultMode, ["surface", "page"]), getPath(surfaceAliases, ["page"]))
+  );
+  addDark(
+    toVariableName(prefix, "surface", "card"),
+    pickSemantic(getPath(darkMode, ["surface", "card"]), getPath(defaultMode, ["surface", "card"]), getPath(surfaceAliases, ["card"]))
+  );
+  addDark(
+    toVariableName(prefix, "surface", "input"),
+    pickSemantic(getPath(darkMode, ["surface", "input"]), getPath(defaultMode, ["surface", "input"]), getPath(surfaceAliases, ["input"]))
+  );
+  addDark(
+    toVariableName(prefix, "surface", "overlay"),
+    pickSemantic(getPath(darkMode, ["surface", "overlay"]), getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"]))
+  );
+  addDark(
+    toVariableName(prefix, "text", "on", "page", "default"),
+    pickSemantic(
+      getPath(darkMode, ["text", "onPage", "default"]),
+      getPath(defaultMode, ["text", "onPage", "default"]),
+      getPath(textAliases, ["onPage", "default"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "text", "on", "page", "muted"),
+    pickSemantic(
+      getPath(darkMode, ["text", "onPage", "muted"]),
+      getPath(defaultMode, ["text", "onPage", "muted"]),
+      getPath(textAliases, ["onPage", "muted"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "text", "on", "surface", "default"),
+    pickSemantic(
+      getPath(darkMode, ["text", "onSurface", "default"]),
+      getPath(defaultMode, ["text", "onSurface", "default"]),
+      getPath(textAliases, ["onSurface", "default"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "text", "on", "surface", "muted"),
+    pickSemantic(
+      getPath(darkMode, ["text", "onSurface", "muted"]),
+      getPath(defaultMode, ["text", "onSurface", "muted"]),
+      getPath(textAliases, ["onSurface", "muted"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "component", "card", "text"),
+    pickSemantic(
+      getPath(darkMode, ["component", "card", "text"]),
+      getPath(defaultMode, ["component", "card", "text"]),
+      getPath(componentAliases, ["card", "text"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "component", "card", "text-muted"),
+    pickSemantic(
+      getPath(darkMode, ["component", "card", "textMuted"]),
+      getPath(defaultMode, ["component", "card", "textMuted"]),
+      getPath(componentAliases, ["card", "textMuted"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "component", "input", "text"),
+    pickSemantic(
+      getPath(darkMode, ["component", "input", "text"]),
+      getPath(defaultMode, ["component", "input", "text"]),
+      getPath(componentAliases, ["input", "text"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "component", "input", "placeholder"),
+    pickSemantic(
+      getPath(darkMode, ["component", "input", "placeholder"]),
+      getPath(defaultMode, ["component", "input", "placeholder"]),
+      getPath(componentAliases, ["input", "placeholder"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "button", "text", "default"),
+    pickSemantic(
+      getPath(darkMode, ["component", "button", "textDefault"]),
+      getPath(defaultMode, ["component", "button", "textDefault"]),
+      getPath(componentAliases, ["button", "textDefault"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "button", "text", "on", "primary"),
+    pickSemantic(
+      getPath(darkMode, ["component", "button", "textOnPrimary"]),
+      getPath(defaultMode, ["component", "button", "textOnPrimary"]),
+      getPath(componentAliases, ["button", "textOnPrimary"])
+    )
+  );
+  const rootBlock = `${selector} {
+${rootLines.join("\n")}
+}`;
+  const darkBlock = `${selector}[data-spectre-theme="dark"] {
+${darkLines.join("\n")}
+}`;
+  return `${rootBlock}
+${darkBlock}
 `;
 };