@aleph-alpha/config-css 0.22.0 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aleph-alpha/config-css",
   "license": "Apache-2.0",
-  "version": "0.22.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": "0.4.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/sd.config.js

@@ -38,7 +38,10 @@ StyleDictionary.registerTransform({
     return token.type === 'typography';
   },
   transform: function (token) {
-    return token.name.split('-').splice(1, token.name.split('-').length).join('-');
+    return token.name
+      .split('-')
+      .splice(1, token.name.split('-').length)
+      .join('-');
   },
 });
 
@@ -85,7 +88,9 @@ StyleDictionary.registerTransform({
 
     const css = {};
     keys.forEach((key) => {
-      const newKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+      const newKey = key
+        .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
+        .toLowerCase();
 
       if (allowedKeys.includes(newKey)) {
         css[newKey] = value[key];
@@ -110,7 +115,8 @@ StyleDictionary.registerTransform({
     if (!value) return;
 
     if (value['font-family']) {
-      value['font-family'] = `var(--custom-font-family, ${value['font-family']})`;
+      value['font-family'] =
+        `var(--custom-font-family, ${value['font-family']})`;
     }
 
     return value;

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;
@@ -106,7 +138,10 @@ const tokenPreset: Preset<Theme> = definePreset<Theme>(() => {
         },
       },
     ],
-    rules: [...Object.entries(typographySet), ['h-screen', { height: '100vh' }]],
+    rules: [
+      ...Object.entries(typographySet),
+      ['h-screen', { height: '100vh' }],
+    ],
     theme: {
       colors: lightModeSet,
       spacing: spacingsSet,

package/src/presetWebFontsAlephAlpha.ts

@@ -12,7 +12,10 @@ import { inter500 } from './assets/fonts/inter500.woff2';
 import { inter600 } from './assets/fonts/inter600.woff2';
 import { inter700 } from './assets/fonts/inter700.woff2';
 
-const normalizeEmbeddedFontDataUri = (fontDataUri: string, mimeType = 'font/woff2') => {
+const normalizeEmbeddedFontDataUri = (
+  fontDataUri: string,
+  mimeType = 'font/woff2',
+) => {
   const normalizedUri = fontDataUri.trim();
   const legacyPrefixes = [
     'data:@file/octet-stream;base64,',
@@ -21,7 +24,9 @@ const normalizeEmbeddedFontDataUri = (fontDataUri: string, mimeType = 'font/woff
     'data:%40file/binary;base64,',
   ];
 
-  const matchedPrefix = legacyPrefixes.find((prefix) => normalizedUri.startsWith(prefix));
+  const matchedPrefix = legacyPrefixes.find((prefix) =>
+    normalizedUri.startsWith(prefix),
+  );
   if (matchedPrefix) {
     return `data:${mimeType};base64,${normalizedUri.slice(matchedPrefix.length)}`;
   }

package/src/utils/convert-fonts.js

@@ -32,7 +32,9 @@ const args = process.argv.slice(2);
 
 if (args.length < 2) {
   console.log('Usage: node convert-fonts.js <input.woff2> <output.ts>');
-  console.log('Example: node convert-fonts.js montserrat600.woff2 montserrat600.woff2.ts');
+  console.log(
+    'Example: node convert-fonts.js montserrat600.woff2 montserrat600.woff2.ts',
+  );
   process.exit(1);
 }