@aleph-alpha/config-css 1.0.0 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aleph-alpha/config-css",
   "license": "Apache-2.0",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "prettier": "@aleph-alpha/prettier-config-frontend",
@@ -25,7 +25,7 @@
     "style-dictionary": "^4.0.1",
     "vite-plugin-dts": "^4.0.0",
     "@aleph-alpha/eslint-config-frontend": "0.5.0",
-    "@aleph-alpha/prettier-config-frontend": "2.0.0"
+    "@aleph-alpha/prettier-config-frontend": "2.1.0"
   },
   "scripts": {
     "transform:global": "npx token-transformer ./tokens.json ./transformed-tokens/global.json global,\"Spark Border Radius/Mode 1\",\"Spark Spacings/Mode 1\",\"Spark Text/Mode 1\" \"Spark Colors/Light mode/primitives\" --throwErrorWhenNotResolved",

package/src/index.ts

@@ -16,6 +16,19 @@ type Theme = {
   boxShadow?: Record<keyof typeof boxShadowsSet, string>;
 };
 
+const formatVarBlock = (
+  set: Record<string, string>,
+  options: { prefix?: string; lowercaseKey?: boolean } = {},
+): string => {
+  const { prefix = '', lowercaseKey = false } = options;
+  return Object.entries(set)
+    .map(([key, value]) => {
+      const cssKey = lowercaseKey ? key.toLowerCase() : key;
+      return `--${prefix}${cssKey}: ${value};`;
+    })
+    .join('\n            ');
+};
+
 /**
  * This preset is used to add the aleph alpha specific utilities for tokens from the design system.
  * Only the dark theme tokens are not included.
@@ -27,6 +40,25 @@ const tokenPreset: Preset<Theme> = definePreset<Theme>(() => {
       {
         getCSS() {
           return `
+          /*
+           * Design-system tokens as CSS custom properties.
+           *
+           * Mirrors the entries already registered in \`theme\` (colors, spacing,
+           * box-shadow), so consumers can reach the same tokens from raw CSS,
+           * inline \`:style\` bindings, and \`:global()\` overrides — not just
+           * from utility classes. Light/dark switching cascades automatically:
+           * any \`var(--<token>)\` under \`html.dark\` resolves to the dark value
+           * without needing parallel rules.
+           */
+          :root {
+            ${formatVarBlock(lightModeSet)}
+            ${formatVarBlock(spacingsSet, { prefix: 'spacing-', lowercaseKey: true })}
+            ${formatVarBlock(boxShadowsSet, { prefix: 'shadow-' })}
+          }
+          html.dark {
+            ${formatVarBlock(darkModeSet)}
+          }
+
           html {
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;