@phcdevworks/spectre-tokens 3.3.0 → 3.4.0

package/dist/index.css

@@ -26,8 +26,10 @@
   --sp-button-text-default: #141b24;
   --sp-button-text-on-primary: #ffffff;
   --sp-badge-neutral-bg: #eef1f6;
+  --sp-badge-neutral-bg-hover: #d9dfeb;
   --sp-badge-neutral-text: #374253;
   --sp-badge-info-bg: #e0f2fe;
+  --sp-badge-info-bg-hover: #bae6fd;
   --sp-badge-info-text: #075985;
   --sp-badge-success-bg: #dcfce7;
   --sp-badge-success-text: #15803d;
@@ -41,6 +43,25 @@
   --sp-icon-box-icon-success: #16a34a;
   --sp-icon-box-icon-warning: #d48806;
   --sp-icon-box-icon-danger: #dc2626;
+  --sp-testimonial-bg: #ffffff;
+  --sp-testimonial-bg-hover: #f7f8fb;
+  --sp-testimonial-border: #d9dfeb;
+  --sp-testimonial-text: #374253;
+  --sp-testimonial-author-name: #141b24;
+  --sp-testimonial-author-title: #4b576a;
+  --sp-testimonial-quote-mark: #4b576a;
+  --sp-pricing-card-bg: #ffffff;
+  --sp-pricing-card-bg-hover: #f7f8fb;
+  --sp-pricing-card-border: #d9dfeb;
+  --sp-pricing-card-featured-bg: #0369a1;
+  --sp-pricing-card-featured-text: #ffffff;
+  --sp-pricing-card-featured-badge-bg: #f5ad00;
+  --sp-pricing-card-featured-badge-text: #141b24;
+  --sp-pricing-card-price: #141b24;
+  --sp-pricing-card-price-description: #4b576a;
+  --sp-rating-star-filled: #f5ad00;
+  --sp-rating-star-empty: #d9dfeb;
+  --sp-rating-text: #657287;
   --sp-nav-bg: #ffffff;
   --sp-nav-text: #141b24;
   --sp-nav-link: #374253;
@@ -109,6 +130,17 @@
   --sp-label-text: #141b24;
   --sp-label-disabled-text: #8a96ad;
   --sp-label-required-indicator-text: #dc2626;
+  --sp-badge-success-bg-hover: #bbf7d0;
+  --sp-badge-warning-bg-hover: #ffe08a;
+  --sp-badge-danger-bg-hover: #fecaca;
+  --sp-select-border-invalid: #ef4444;
+  --sp-select-bg-invalid: #fef2f2;
+  --sp-select-border-success: #22c55e;
+  --sp-select-bg-success: #f0fdf4;
+  --sp-textarea-border-invalid: #ef4444;
+  --sp-textarea-bg-invalid: #fef2f2;
+  --sp-textarea-border-success: #22c55e;
+  --sp-textarea-bg-success: #f0fdf4;
   --sp-link-default: #1f57db;
   --sp-link-hover: #1946b4;
   --sp-link-active: #173b8f;
@@ -243,6 +275,20 @@
   --sp-radius-3xl: 24px;
   --sp-radius-4xl: 32px;
   --sp-radius-pill: 999px;
+  --sp-icon-xs: 12px;
+  --sp-icon-sm: 16px;
+  --sp-icon-md: 20px;
+  --sp-icon-lg: 24px;
+  --sp-icon-xl: 32px;
+  --sp-icon-2xl: 40px;
+  --sp-icon-3xl: 48px;
+  --sp-aspect-ratio-square: 1/1;
+  --sp-aspect-ratio-video: 16/9;
+  --sp-aspect-ratio-classic: 3/2;
+  --sp-aspect-ratio-portrait: 3/4;
+  --sp-aspect-ratio-landscape: 4/3;
+  --sp-aspect-ratio-ultrawide: 21/9;
+  --sp-aspect-ratio-hero: 2/1;
   --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   --sp-font-family-serif: 'Times New Roman', Times, serif;
   --sp-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
@@ -335,6 +381,7 @@
   --sp-min-touch-target: 44px;
   --sp-min-text-size: 16px;
   --sp-reduced-motion: 0.01ms;
+  --sp-forced-colors: auto;
   --sp-button-primary-bg: #0369a1;
   --sp-button-primary-bghover: #075985;
   --sp-button-primary-bgactive: #0c4a6e;
@@ -488,8 +535,10 @@
   --sp-button-text-default: #eef1f6;
   --sp-button-text-on-primary: #ffffff;
   --sp-badge-neutral-bg: #374253;
+  --sp-badge-neutral-bg-hover: #4b576a;
   --sp-badge-neutral-text: #f7f8fb;
   --sp-badge-info-bg: #0c4a6e;
+  --sp-badge-info-bg-hover: #075985;
   --sp-badge-info-text: #e0f2fe;
   --sp-badge-success-bg: #166534;
   --sp-badge-success-text: #dcfce7;
@@ -503,6 +552,25 @@
   --sp-icon-box-icon-success: #4ade80;
   --sp-icon-box-icon-warning: #ffc21a;
   --sp-icon-box-icon-danger: #f87171;
+  --sp-testimonial-bg: #222b38;
+  --sp-testimonial-bg-hover: #374253;
+  --sp-testimonial-border: #374253;
+  --sp-testimonial-text: #d9dfeb;
+  --sp-testimonial-author-name: #eef1f6;
+  --sp-testimonial-author-title: #b7c1d4;
+  --sp-testimonial-quote-mark: #b7c1d4;
+  --sp-pricing-card-bg: #222b38;
+  --sp-pricing-card-bg-hover: #374253;
+  --sp-pricing-card-border: #374253;
+  --sp-pricing-card-featured-bg: #0369a1;
+  --sp-pricing-card-featured-text: #ffffff;
+  --sp-pricing-card-featured-badge-bg: #f5ad00;
+  --sp-pricing-card-featured-badge-text: #141b24;
+  --sp-pricing-card-price: #eef1f6;
+  --sp-pricing-card-price-description: #b7c1d4;
+  --sp-rating-star-filled: #ffc21a;
+  --sp-rating-star-empty: #374253;
+  --sp-rating-text: #8a96ad;
   --sp-nav-bg: #141b24;
   --sp-nav-text: #f7f8fb;
   --sp-nav-link: #b7c1d4;
@@ -571,6 +639,17 @@
   --sp-label-text: #f7f8fb;
   --sp-label-disabled-text: #4b576a;
   --sp-label-required-indicator-text: #f87171;
+  --sp-badge-success-bg-hover: #15803d;
+  --sp-badge-warning-bg-hover: #8f5200;
+  --sp-badge-danger-bg-hover: #b91c1c;
+  --sp-select-border-invalid: #ef4444;
+  --sp-select-bg-invalid: #fef2f2;
+  --sp-select-border-success: #22c55e;
+  --sp-select-bg-success: #f0fdf4;
+  --sp-textarea-border-invalid: #ef4444;
+  --sp-textarea-bg-invalid: #fef2f2;
+  --sp-textarea-border-success: #22c55e;
+  --sp-textarea-bg-success: #f0fdf4;
   --sp-link-default: #1f57db;
   --sp-link-hover: #1946b4;
   --sp-link-active: #173b8f;

package/dist/index.d.cts

@@ -1339,6 +1339,10 @@ interface ComponentSelectTokens<Value = string> {
     disabledBg: Value;
     disabledBorder: Value;
     focusBorder: Value;
+    borderInvalid: Value;
+    bgInvalid: Value;
+    borderSuccess: Value;
+    bgSuccess: Value;
 }
 interface ComponentTextareaTokens<Value = string> {
     bg: Value;
@@ -1348,6 +1352,10 @@ interface ComponentTextareaTokens<Value = string> {
     disabledBg: Value;
     disabledBorder: Value;
     focusBorder: Value;
+    borderInvalid: Value;
+    bgInvalid: Value;
+    borderSuccess: Value;
+    bgSuccess: Value;
 }
 interface ComponentFieldsetTokens<Value = string> {
     border: Value;

package/dist/index.d.ts

@@ -1339,6 +1339,10 @@ interface ComponentSelectTokens<Value = string> {
     disabledBg: Value;
     disabledBorder: Value;
     focusBorder: Value;
+    borderInvalid: Value;
+    bgInvalid: Value;
+    borderSuccess: Value;
+    bgSuccess: Value;
 }
 interface ComponentTextareaTokens<Value = string> {
     bg: Value;
@@ -1348,6 +1352,10 @@ interface ComponentTextareaTokens<Value = string> {
     disabledBg: Value;
     disabledBorder: Value;
     focusBorder: Value;
+    borderInvalid: Value;
+    bgInvalid: Value;
+    borderSuccess: Value;
+    bgSuccess: Value;
 }
 interface ComponentFieldsetTokens<Value = string> {
     border: Value;

package/dist/index.js

@@ -1185,98 +1185,13 @@ var coreTokens = {
 // src/css.ts
 var DEFAULT_PREFIX = "sp";
 var DEFAULT_SELECTOR = ":root";
+var LEGACY_COMPONENT_PREFIX_GROUPS = /* @__PURE__ */ new Set(["card", "input"]);
 var formatKey = (segment) => segment.replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "").toLowerCase();
 var toVariableName = (prefix, ...parts) => {
   const filtered = parts.filter(Boolean).map(formatKey);
   return `--${prefix}-${filtered.join("-")}`;
 };
-var BADGE_VARIANTS = [
-  { variant: "neutral", bgKey: "neutralBg", textKey: "neutralText" },
-  { variant: "info", bgKey: "infoBg", textKey: "infoText" },
-  { variant: "success", bgKey: "successBg", textKey: "successText" },
-  { variant: "warning", bgKey: "warningBg", textKey: "warningText" },
-  { variant: "danger", bgKey: "dangerBg", textKey: "dangerText" }
-];
-var ICON_BOX_FIELDS = [
-  { name: "bg", tokenKey: "bg" },
-  { name: "border", tokenKey: "border" },
-  { name: "icon-default", tokenKey: "iconDefault" },
-  { name: "icon-success", tokenKey: "iconSuccess" },
-  { 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 SELECTION_CONTROL_FIELDS = [
-  { name: "bg", tokenKey: "bg" },
-  { name: "border", tokenKey: "border" },
-  { name: "checked-bg", tokenKey: "checkedBg" },
-  { name: "checked-border", tokenKey: "checkedBorder" },
-  { name: "text", tokenKey: "text" },
-  { name: "disabled-bg", tokenKey: "disabledBg" },
-  { name: "disabled-border", tokenKey: "disabledBorder" }
-];
-var SELECT_FIELDS = [
-  { name: "bg", tokenKey: "bg" },
-  { name: "border", tokenKey: "border" },
-  { name: "text", tokenKey: "text" },
-  { name: "placeholder-text", tokenKey: "placeholderText" },
-  { name: "disabled-bg", tokenKey: "disabledBg" },
-  { name: "disabled-border", tokenKey: "disabledBorder" },
-  { name: "focus-border", tokenKey: "focusBorder" }
-];
-var TEXTAREA_FIELDS = [
-  { name: "bg", tokenKey: "bg" },
-  { name: "border", tokenKey: "border" },
-  { name: "text", tokenKey: "text" },
-  { name: "placeholder", tokenKey: "placeholder" },
-  { name: "disabled-bg", tokenKey: "disabledBg" },
-  { name: "disabled-border", tokenKey: "disabledBorder" },
-  { name: "focus-border", tokenKey: "focusBorder" }
-];
-var FIELDSET_FIELDS = [
-  { name: "border", tokenKey: "border" },
-  { name: "legend-text", tokenKey: "legendText" }
-];
-var LABEL_FIELDS = [
-  { name: "text", tokenKey: "text" },
-  { name: "disabled-text", tokenKey: "disabledText" },
-  { name: "required-indicator-text", tokenKey: "requiredIndicatorText" }
-];
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 var resolveTokenReference = (tokens2, reference) => {
   const path = reference.slice(1, -1).split(".");
   let current = tokens2;
@@ -1314,14 +1229,21 @@ var resolveValue = (tokens2, value) => {
   str = str.replace(opacityRegex, (match, hex, opacity) => hexToRgba(hex, opacity));
   return str;
 };
-var resolveSemanticValue = (value, tokens2) => {
+var resolveSemanticValue = (value, tokens2, path) => {
+  if (value === void 0) return void 0;
   if (typeof value === "string" || typeof value === "number") {
     return resolveValue(tokens2, value);
   }
-  if (value && typeof value === "object" && "value" in value) {
-    return resolveValue(tokens2, value.value);
+  if (isPlainObject(value)) {
+    if ("value" in value) {
+      return resolveValue(tokens2, value.value);
+    }
+    if ("metadata" in value || "description" in value) {
+      throw new Error(`Unsupported token value shape at "${path ?? "(unknown path)"}": expected a string, number, or { value } wrapper.`);
+    }
+    return void 0;
   }
-  return void 0;
+  throw new Error(`Unsupported token value shape at "${path ?? "(unknown path)"}": ${JSON.stringify(value)}`);
 };
 var getPath = (source, path) => path.reduce((acc, key) => acc && typeof acc === "object" ? acc[key] : void 0, source);
 var pickSemantic = (tokens2, ...candidates) => {
@@ -1406,6 +1328,18 @@ var createCssVariableMap = (tokens2, options = {}) => {
   Object.entries(baseTokens.radii).forEach(([key, value]) => {
     assign(toVariableName(prefix, "radius", key), value);
   });
+  const icons = baseTokens.icons;
+  if (icons) {
+    Object.entries(icons).forEach(([key, value]) => {
+      assign(toVariableName(prefix, "icon", key), value);
+    });
+  }
+  const aspectRatios = baseTokens.aspectRatios;
+  if (aspectRatios) {
+    Object.entries(aspectRatios).forEach(([key, value]) => {
+      assign(toVariableName(prefix, "aspect-ratio", key), value);
+    });
+  }
   Object.entries(baseTokens.typography.families).forEach(([key, value]) => {
     assign(toVariableName(prefix, "font-family", key), value);
   });
@@ -1452,6 +1386,7 @@ var createCssVariableMap = (tokens2, options = {}) => {
   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);
+  assign(toVariableName(prefix, "forced-colors"), baseTokens.accessibility.forcedColors);
   Object.entries(baseTokens.buttons).forEach(([variant, states]) => {
     Object.entries(states).forEach(([state, value]) => {
       assign(toVariableName(prefix, "button", variant, state), value);
@@ -1493,110 +1428,7 @@ var generateCssVariables = (tokens2, options = {}) => {
   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", "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"] },
-    { 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]
-    })),
-    ...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]
-    })),
-    ...SELECTION_CONTROL_FIELDS.map(({ name, tokenKey }) => ({
-      varParts: ["checkbox", name],
-      modePath: ["component", "checkbox", tokenKey],
-      aliasSrc: componentAliases,
-      aliasPath: ["checkbox", tokenKey]
-    })),
-    ...SELECTION_CONTROL_FIELDS.map(({ name, tokenKey }) => ({
-      varParts: ["radio", name],
-      modePath: ["component", "radio", tokenKey],
-      aliasSrc: componentAliases,
-      aliasPath: ["radio", tokenKey]
-    })),
-    ...SELECT_FIELDS.map(({ name, tokenKey }) => ({
-      varParts: ["select", name],
-      modePath: ["component", "select", tokenKey],
-      aliasSrc: componentAliases,
-      aliasPath: ["select", tokenKey]
-    })),
-    ...TEXTAREA_FIELDS.map(({ name, tokenKey }) => ({
-      varParts: ["textarea", name],
-      modePath: ["component", "textarea", tokenKey],
-      aliasSrc: componentAliases,
-      aliasPath: ["textarea", tokenKey]
-    })),
-    ...FIELDSET_FIELDS.map(({ name, tokenKey }) => ({
-      varParts: ["fieldset", name],
-      modePath: ["component", "fieldset", tokenKey],
-      aliasSrc: componentAliases,
-      aliasPath: ["fieldset", tokenKey]
-    })),
-    ...LABEL_FIELDS.map(({ name, tokenKey }) => ({
-      varParts: ["label", name],
-      modePath: ["component", "label", tokenKey],
-      aliasSrc: componentAliases,
-      aliasPath: ["label", tokenKey]
-    }))
-  ];
+  const componentVarParts = (group, kebabGroup, path) => LEGACY_COMPONENT_PREFIX_GROUPS.has(group) ? ["component", kebabGroup, ...path] : [kebabGroup, ...path];
   const baseLines = [];
   const darkLines = [];
   const addBase = (name, value) => {
@@ -1605,12 +1437,56 @@ var generateCssVariables = (tokens2, options = {}) => {
   const addDark = (name, value) => {
     if (value !== void 0) darkLines.push(`  ${name}: ${value};`);
   };
-  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 walkSemanticGroup = (namespace, varPartsFor, aliasSrc) => {
+    const defaultNode = defaultMode[namespace];
+    const darkNode = darkMode[namespace];
+    const paths = /* @__PURE__ */ new Set();
+    const collectPaths = (node, path) => {
+      if (node === void 0) return;
+      const leaf = resolveSemanticValue(node, tokens2, [namespace, ...path].join("."));
+      if (leaf !== void 0) {
+        paths.add(path.join("."));
+        return;
+      }
+      if (isPlainObject(node)) {
+        Object.keys(node).forEach((key) => collectPaths(node[key], [...path, key]));
+      }
+    };
+    collectPaths(defaultNode, []);
+    collectPaths(darkNode, []);
+    collectPaths(aliasSrc, []);
+    paths.forEach((joinedPath) => {
+      const path = joinedPath.split(".");
+      const varName = toVariableName(prefix, ...varPartsFor(path));
+      const aliasCandidate = getPath(aliasSrc, path);
+      const baseValue = pickSemantic(tokens2, getPath(defaultNode, path), aliasCandidate);
+      const darkValue = pickSemantic(tokens2, getPath(darkNode, path), getPath(defaultNode, path), aliasCandidate);
+      addBase(varName, baseValue);
+      addDark(varName, darkValue);
+    });
+  };
+  const kebabPathSegment = (segment) => formatKey(segment.replace(/([a-z0-9])([A-Z])/g, "$1-$2"));
+  walkSemanticGroup(
+    "surface",
+    (path) => ["surface", ...path.map(kebabPathSegment)],
+    surfaceAliases
+  );
+  walkSemanticGroup(
+    "text",
+    (path) => {
+      const [scope, ...rest] = path;
+      return ["text", ...kebabPathSegment(scope).split("-"), ...rest.map(kebabPathSegment)];
+    },
+    textAliases
+  );
+  walkSemanticGroup(
+    "component",
+    (path) => {
+      const [group, ...rest] = path;
+      return componentVarParts(group, kebabPathSegment(group), rest.map(kebabPathSegment));
+    },
+    componentAliases
+  );
   Object.entries(linkTokens).forEach(([key, value]) => {
     const varName = toVariableName(prefix, "link", key);
     const resolved = pickSemantic(tokens2, value);