@phcdevworks/spectre-tokens 0.0.3 → 0.1.0

package/dist/index.js

@@ -93,56 +93,280 @@ var core_default = {
   },
   surface: {
     page: {
-      value: "#0f172a",
+      value: "#f8fafc",
       description: "primary app background"
     },
     card: {
-      value: "#1e293b",
+      value: "#ffffff",
       description: "containers and tiles"
     },
     input: {
-      value: "#334155",
+      value: "#ffffff",
       description: "form inputs, textareas"
     },
     overlay: {
-      value: "#1e293b",
+      value: "rgba(15,23,42,0.6)",
       description: "modals, dropdowns, flyouts"
     }
   },
   text: {
     onPage: {
-      default: "#f8fafc",
-      muted: "#cbd5f5",
-      subtle: "#94a3b8"
+      default: "#0f172a",
+      muted: "#475569",
+      subtle: "#94a3b8",
+      meta: "#94a3b8"
     },
     onSurface: {
-      default: "#f1f5f9",
-      muted: "#cbd5f5",
-      subtle: "#94a3b8"
+      default: "#0f172a",
+      muted: "#6b7280",
+      subtle: "#94a3b8",
+      meta: "#94a3b8"
     }
   },
   component: {
     card: {
-      text: "#f1f5f9",
-      textMuted: "#cbd5f5"
+      text: "#0f172a",
+      textMuted: "#6b7280"
     },
     input: {
-      text: "#f1f5f9",
+      text: "#0f172a",
       placeholder: "#94a3b8"
     },
     button: {
-      textDefault: "#f1f5f9",
+      textDefault: "#0f172a",
       textOnPrimary: "#ffffff"
+    },
+    badge: {
+      primary: {
+        bg: "#8652ff",
+        text: "#0f172a"
+      },
+      success: {
+        bg: "#22c55e",
+        text: "#0f172a"
+      },
+      warning: {
+        bg: "#f59e0b",
+        text: "#0f172a"
+      },
+      danger: {
+        bg: "#ef4444",
+        text: "#0f172a"
+      }
     }
   },
   modes: {
     default: {
-      surface: {},
-      text: {}
+      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"
+          },
+          meta: {
+            value: "#94a3b8"
+          }
+        },
+        onSurface: {
+          default: {
+            value: "#0f172a"
+          },
+          muted: {
+            value: "#6b7280"
+          },
+          subtle: {
+            value: "#94a3b8"
+          },
+          meta: {
+            value: "#94a3b8"
+          }
+        }
+      },
+      component: {
+        card: {
+          text: {
+            value: "#0f172a"
+          },
+          textMuted: {
+            value: "#6b7280"
+          }
+        },
+        input: {
+          text: {
+            value: "#0f172a"
+          },
+          placeholder: {
+            value: "#94a3b8"
+          }
+        },
+        button: {
+          textDefault: {
+            value: "#0f172a"
+          },
+          textOnPrimary: {
+            value: "#ffffff"
+          }
+        },
+        badge: {
+          primary: {
+            bg: {
+              value: "#8652ff"
+            },
+            text: {
+              value: "#0f172a"
+            }
+          },
+          success: {
+            bg: {
+              value: "#22c55e"
+            },
+            text: {
+              value: "#0f172a"
+            }
+          },
+          warning: {
+            bg: {
+              value: "#f59e0b"
+            },
+            text: {
+              value: "#0f172a"
+            }
+          },
+          danger: {
+            bg: {
+              value: "#ef4444"
+            },
+            text: {
+              value: "#0f172a"
+            }
+          }
+        }
+      }
     },
     dark: {
-      surface: {},
-      text: {}
+      surface: {
+        page: {
+          value: "#0f172a"
+        },
+        card: {
+          value: "#1e293b"
+        },
+        input: {
+          value: "#334155"
+        },
+        overlay: {
+          value: "#1e293b"
+        }
+      },
+      text: {
+        onPage: {
+          default: {
+            value: "#f8fafc"
+          },
+          muted: {
+            value: "#cbd5f5"
+          },
+          subtle: {
+            value: "#94a3b8"
+          },
+          meta: {
+            value: "#94a3b8"
+          }
+        },
+        onSurface: {
+          default: {
+            value: "#f1f5f9"
+          },
+          muted: {
+            value: "#cbd5f5"
+          },
+          subtle: {
+            value: "#94a3b8"
+          },
+          meta: {
+            value: "#94a3b8"
+          }
+        }
+      },
+      component: {
+        card: {
+          text: {
+            value: "#f1f5f9"
+          },
+          textMuted: {
+            value: "#cbd5f5"
+          }
+        },
+        input: {
+          text: {
+            value: "#f1f5f9"
+          },
+          placeholder: {
+            value: "#94a3b8"
+          }
+        },
+        button: {
+          textDefault: {
+            value: "#f1f5f9"
+          },
+          textOnPrimary: {
+            value: "#ffffff"
+          }
+        },
+        badge: {
+          primary: {
+            bg: {
+              value: "#8652ff"
+            },
+            text: {
+              value: "#f1f5f9"
+            }
+          },
+          success: {
+            bg: {
+              value: "#22c55e"
+            },
+            text: {
+              value: "#f1f5f9"
+            }
+          },
+          warning: {
+            bg: {
+              value: "#f59e0b"
+            },
+            text: {
+              value: "#f1f5f9"
+            }
+          },
+          danger: {
+            bg: {
+              value: "#ef4444"
+            },
+            text: {
+              value: "#f1f5f9"
+            }
+          }
+        }
+      }
     }
   },
   opacity: {
@@ -259,6 +483,38 @@ var core_default = {
     card: "#334155",
     input: "#cbd5f5"
   },
+  font: {
+    xs: {
+      size: "0.75rem",
+      lineHeight: "1.25rem",
+      weight: 400
+    },
+    sm: {
+      size: "0.875rem",
+      lineHeight: "1.5rem",
+      weight: 400
+    },
+    md: {
+      size: "1rem",
+      lineHeight: "1.75rem",
+      weight: 500
+    },
+    lg: {
+      size: "1.25rem",
+      lineHeight: "2rem",
+      weight: 500
+    },
+    xl: {
+      size: "1.5rem",
+      lineHeight: "2.125rem",
+      weight: 600
+    },
+    "2xl": {
+      size: "1.875rem",
+      lineHeight: "2.5rem",
+      weight: 600
+    }
+  },
   typography: {
     families: {
       sans: "'Inter', 'Helvetica Neue', Arial, sans-serif",
@@ -399,77 +655,365 @@ var toVariableName = (prefix, ...parts) => {
 var createCssVariableMap = (tokens2, options = {}) => {
   const prefix = options.prefix ?? DEFAULT_PREFIX;
   const map = {};
+  const baseTokens = tokens2;
   const assign = (name, value) => {
     if (value === void 0) return;
     map[name] = String(value);
   };
-  Object.entries(tokens2.colors).forEach(([group, scale]) => {
+  Object.entries(baseTokens.colors).forEach(([group, scale]) => {
     Object.entries(scale).forEach(([step, value]) => {
       assign(toVariableName(prefix, "color", group, step), value);
     });
   });
-  Object.entries(tokens2.spacing).forEach(([key, value]) => {
+  Object.entries(baseTokens.spacing).forEach(([key, value]) => {
     assign(toVariableName(prefix, "space", key), value);
   });
-  Object.entries(tokens2.radii).forEach(([key, value]) => {
+  Object.entries(baseTokens.radii).forEach(([key, value]) => {
     assign(toVariableName(prefix, "radius", key), value);
   });
-  Object.entries(tokens2.typography.families).forEach(([key, value]) => {
+  Object.entries(baseTokens.typography.families).forEach(([key, value]) => {
     assign(toVariableName(prefix, "font-family", key), value);
   });
-  Object.entries(tokens2.typography.scale).forEach(([key, entry]) => {
-    assign(toVariableName(prefix, "font", key, "size"), entry.fontSize);
-    assign(toVariableName(prefix, "font", key, "line-height"), entry.lineHeight);
-    assign(toVariableName(prefix, "font", key, "weight"), entry.fontWeight);
+  const typographyScale = baseTokens.typography?.scale ?? {};
+  const fontScale = baseTokens.font;
+  if (fontScale && Object.keys(fontScale).length > 0) {
+    Object.entries(fontScale).forEach(([key, entry]) => {
+      assign(toVariableName(prefix, "font", key, "size"), entry.size);
+      assign(toVariableName(prefix, "font", key, "line-height"), entry.lineHeight);
+      assign(toVariableName(prefix, "font", key, "weight"), entry.weight);
+    });
+  } else {
+    Object.entries(typographyScale).forEach(([key, entry]) => {
+      assign(toVariableName(prefix, "font", key, "size"), entry.fontSize);
+      assign(toVariableName(prefix, "font", key, "line-height"), entry.lineHeight);
+      assign(toVariableName(prefix, "font", key, "weight"), entry.fontWeight);
+    });
+  }
+  Object.entries(typographyScale).forEach(([key, entry]) => {
     assign(toVariableName(prefix, "font", key, "letter-spacing"), entry.letterSpacing);
   });
-  Object.entries(tokens2.shadows).forEach(([key, value]) => {
+  assign(toVariableName(prefix, "text", "on", "page", "default"), tokens2.text.onPage.default);
+  assign(toVariableName(prefix, "text", "on", "page", "muted"), tokens2.text.onPage.muted);
+  assign(toVariableName(prefix, "text", "on", "surface", "default"), tokens2.text.onSurface.default);
+  assign(toVariableName(prefix, "text", "on", "surface", "muted"), tokens2.text.onSurface.muted);
+  assign(toVariableName(prefix, "text", "on", "surface", "meta"), tokens2.text.onSurface.meta);
+  const badge = tokens2.component?.badge;
+  if (badge) {
+    assign(toVariableName(prefix, "badge", "primary", "bg"), badge.primary.bg);
+    assign(toVariableName(prefix, "badge", "primary", "text"), badge.primary.text);
+    assign(toVariableName(prefix, "badge", "success", "bg"), badge.success.bg);
+    assign(toVariableName(prefix, "badge", "success", "text"), badge.success.text);
+    assign(toVariableName(prefix, "badge", "warning", "bg"), badge.warning.bg);
+    assign(toVariableName(prefix, "badge", "warning", "text"), badge.warning.text);
+    assign(toVariableName(prefix, "badge", "danger", "bg"), badge.danger.bg);
+    assign(toVariableName(prefix, "badge", "danger", "text"), badge.danger.text);
+  }
+  Object.entries(baseTokens.shadows).forEach(([key, value]) => {
     assign(toVariableName(prefix, "shadow", key), value);
   });
-  Object.entries(tokens2.breakpoints).forEach(([key, value]) => {
+  Object.entries(baseTokens.breakpoints).forEach(([key, value]) => {
     assign(toVariableName(prefix, "breakpoint", key), value);
   });
-  Object.entries(tokens2.zIndex).forEach(([key, value]) => {
+  Object.entries(baseTokens.zIndex).forEach(([key, value]) => {
     assign(toVariableName(prefix, "z-index", key), value);
   });
-  Object.entries(tokens2.transitions.duration).forEach(([key, value]) => {
+  Object.entries(baseTokens.transitions.duration).forEach(([key, value]) => {
     assign(toVariableName(prefix, "duration", key), value);
   });
-  Object.entries(tokens2.transitions.easing).forEach(([key, value]) => {
+  Object.entries(baseTokens.transitions.easing).forEach(([key, value]) => {
     assign(toVariableName(prefix, "easing", key), value);
   });
-  Object.entries(tokens2.opacity).forEach(([key, value]) => {
+  Object.entries(baseTokens.opacity).forEach(([key, value]) => {
     assign(toVariableName(prefix, "opacity", key), value);
   });
-  assign(toVariableName(prefix, "focus-ring-width"), tokens2.accessibility.focusRing.width);
-  assign(toVariableName(prefix, "focus-ring-offset"), tokens2.accessibility.focusRing.offset);
-  assign(toVariableName(prefix, "focus-ring-style"), tokens2.accessibility.focusRing.style);
-  assign(toVariableName(prefix, "min-touch-target"), tokens2.accessibility.minTouchTarget);
-  assign(toVariableName(prefix, "min-text-size"), tokens2.accessibility.minTextSize);
-  Object.entries(tokens2.buttons).forEach(([variant, states]) => {
+  assign(toVariableName(prefix, "focus-ring-width"), baseTokens.accessibility.focusRing.width);
+  assign(toVariableName(prefix, "focus-ring-offset"), baseTokens.accessibility.focusRing.offset);
+  assign(toVariableName(prefix, "focus-ring-style"), baseTokens.accessibility.focusRing.style);
+  assign(toVariableName(prefix, "min-touch-target"), baseTokens.accessibility.minTouchTarget);
+  assign(toVariableName(prefix, "min-text-size"), baseTokens.accessibility.minTextSize);
+  Object.entries(baseTokens.buttons).forEach(([variant, states]) => {
     Object.entries(states).forEach(([state, value]) => {
       assign(toVariableName(prefix, "button", variant, state), value);
     });
   });
-  Object.entries(tokens2.forms).forEach(([state, properties]) => {
+  Object.entries(baseTokens.forms).forEach(([state, properties]) => {
     Object.entries(properties).forEach(([prop, value]) => {
       if (value) assign(toVariableName(prefix, "form", state, prop), value);
     });
   });
-  Object.entries(tokens2.animations).forEach(([name, animation]) => {
+  Object.entries(baseTokens.animations).forEach(([name, animation]) => {
     assign(toVariableName(prefix, "animation", name, "duration"), animation.duration);
     assign(toVariableName(prefix, "animation", name, "easing"), animation.easing);
     assign(toVariableName(prefix, "animation", name, "keyframes"), animation.keyframes);
   });
   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", "page", "meta"), pickSemantic(getPath(defaultMode, ["text", "onPage", "meta"]), getPath(textAliases, ["onPage", "meta"])));
+  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, "text", "on", "surface", "meta"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "meta"]), getPath(textAliases, ["onSurface", "meta"])));
+  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"])));
+  addBase(
+    toVariableName(prefix, "badge", "primary", "bg"),
+    pickSemantic(getPath(defaultMode, ["component", "badge", "primary", "bg"]), getPath(componentAliases, ["badge", "primary", "bg"]))
+  );
+  addBase(
+    toVariableName(prefix, "badge", "primary", "text"),
+    pickSemantic(getPath(defaultMode, ["component", "badge", "primary", "text"]), getPath(componentAliases, ["badge", "primary", "text"]))
+  );
+  addBase(
+    toVariableName(prefix, "badge", "success", "bg"),
+    pickSemantic(getPath(defaultMode, ["component", "badge", "success", "bg"]), getPath(componentAliases, ["badge", "success", "bg"]))
+  );
+  addBase(
+    toVariableName(prefix, "badge", "success", "text"),
+    pickSemantic(getPath(defaultMode, ["component", "badge", "success", "text"]), getPath(componentAliases, ["badge", "success", "text"]))
+  );
+  addBase(
+    toVariableName(prefix, "badge", "warning", "bg"),
+    pickSemantic(getPath(defaultMode, ["component", "badge", "warning", "bg"]), getPath(componentAliases, ["badge", "warning", "bg"]))
+  );
+  addBase(
+    toVariableName(prefix, "badge", "warning", "text"),
+    pickSemantic(getPath(defaultMode, ["component", "badge", "warning", "text"]), getPath(componentAliases, ["badge", "warning", "text"]))
+  );
+  addBase(
+    toVariableName(prefix, "badge", "danger", "bg"),
+    pickSemantic(getPath(defaultMode, ["component", "badge", "danger", "bg"]), getPath(componentAliases, ["badge", "danger", "bg"]))
+  );
+  addBase(
+    toVariableName(prefix, "badge", "danger", "text"),
+    pickSemantic(getPath(defaultMode, ["component", "badge", "danger", "text"]), getPath(componentAliases, ["badge", "danger", "text"]))
+  );
+  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", "page", "meta"),
+    pickSemantic(
+      getPath(darkMode, ["text", "onPage", "meta"]),
+      getPath(defaultMode, ["text", "onPage", "meta"]),
+      getPath(textAliases, ["onPage", "meta"])
+    )
+  );
+  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, "text", "on", "surface", "meta"),
+    pickSemantic(
+      getPath(darkMode, ["text", "onSurface", "meta"]),
+      getPath(defaultMode, ["text", "onSurface", "meta"]),
+      getPath(textAliases, ["onSurface", "meta"])
+    )
+  );
+  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"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "badge", "primary", "bg"),
+    pickSemantic(
+      getPath(darkMode, ["component", "badge", "primary", "bg"]),
+      getPath(defaultMode, ["component", "badge", "primary", "bg"]),
+      getPath(componentAliases, ["badge", "primary", "bg"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "badge", "primary", "text"),
+    pickSemantic(
+      getPath(darkMode, ["component", "badge", "primary", "text"]),
+      getPath(defaultMode, ["component", "badge", "primary", "text"]),
+      getPath(componentAliases, ["badge", "primary", "text"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "badge", "success", "bg"),
+    pickSemantic(
+      getPath(darkMode, ["component", "badge", "success", "bg"]),
+      getPath(defaultMode, ["component", "badge", "success", "bg"]),
+      getPath(componentAliases, ["badge", "success", "bg"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "badge", "success", "text"),
+    pickSemantic(
+      getPath(darkMode, ["component", "badge", "success", "text"]),
+      getPath(defaultMode, ["component", "badge", "success", "text"]),
+      getPath(componentAliases, ["badge", "success", "text"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "badge", "warning", "bg"),
+    pickSemantic(
+      getPath(darkMode, ["component", "badge", "warning", "bg"]),
+      getPath(defaultMode, ["component", "badge", "warning", "bg"]),
+      getPath(componentAliases, ["badge", "warning", "bg"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "badge", "warning", "text"),
+    pickSemantic(
+      getPath(darkMode, ["component", "badge", "warning", "text"]),
+      getPath(defaultMode, ["component", "badge", "warning", "text"]),
+      getPath(componentAliases, ["badge", "warning", "text"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "badge", "danger", "bg"),
+    pickSemantic(
+      getPath(darkMode, ["component", "badge", "danger", "bg"]),
+      getPath(defaultMode, ["component", "badge", "danger", "bg"]),
+      getPath(componentAliases, ["badge", "danger", "bg"])
+    )
+  );
+  addDark(
+    toVariableName(prefix, "badge", "danger", "text"),
+    pickSemantic(
+      getPath(darkMode, ["component", "badge", "danger", "text"]),
+      getPath(defaultMode, ["component", "badge", "danger", "text"]),
+      getPath(componentAliases, ["badge", "danger", "text"])
+    )
+  );
+  const rootBlock = `${selector} {
+${rootLines.join("\n")}
+}`;
+  const darkBlock = `${selector}[data-spectre-theme="dark"] {
+${darkLines.join("\n")}
+}`;
+  return `${rootBlock}
+${darkBlock}
 `;
 };