@baloise/ds-tokens 20.0.0-next.7 → 20.0.0-next.9

package/dist/out-tsc/config.brand.js

@@ -5,7 +5,7 @@ const basePxFontSize = 16;
  * `$value` differs from the base. Keeps the full hierarchy so Style
  * Dictionary can still resolve references.
  */
-function computeTokenDiff(base, brand) {
+export function computeTokenDiff(base, brand) {
     const result = {};
     for (const [key, brandVal] of Object.entries(brand)) {
         if (typeof brandVal !== 'object' || brandVal === null)

package/dist/out-tsc/css-naming.js

@@ -0,0 +1,26 @@
+import { kebabCase } from 'change-case';
+/**
+ * Turns a token's path into its final CSS custom property name, matching Style Dictionary's
+ * `css` transformGroup (`name/kebab`, which itself uses `change-case`'s `kebabCase`) followed by
+ * the `ds/css/name` transform (`transformers.ts`). Returns the bare name (no leading `--`), the
+ * same shape Style Dictionary expects from a `name`-type transform - the SD transform is a thin
+ * wrapper around this function, and `apps/toky`'s live preview imports it directly so both stay
+ * in sync (see ADR-0021).
+ */
+export const tokenNameToCssVar = (pathSegments, prefix = 'ds') => {
+    let tokenName = kebabCase([prefix, ...pathSegments].join(' '));
+    const isComponent = pathSegments.includes('🧩 Component');
+    if (isComponent) {
+        tokenName = tokenName.replace('-component', '');
+    }
+    // we use t-shirt sizes and need to make sure that 2xl becomes 2xl and not 2-xl
+    // check if token names has number followed by xl or xs and replace it with numberxl without dash
+    if (/-?([0-9]+)-(xl|xs)/.test(tokenName)) {
+        tokenName = tokenName.replace(/-?([0-9]+)-(xl|xs)/, '-$1$2');
+    }
+    // check that no name has double dash and replace it with single dash
+    if (tokenName.includes('--')) {
+        tokenName = tokenName.replace(/--+/g, '-');
+    }
+    return tokenName;
+};

package/dist/out-tsc/css-preview.js

@@ -0,0 +1,8 @@
+/**
+ * Public subpath (`@baloise/ds-tokens/css-preview`) for consumers outside the build pipeline —
+ * currently `apps/toky`'s live token preview — that need to turn a token path/resolved value into
+ * the same CSS the build actually produces, without duplicating the Style Dictionary transforms.
+ * See ADR-0021.
+ */
+export { tokenNameToCssVar } from './css-naming.js';
+export { resolvedValueToCss } from './css-value.js';

package/dist/out-tsc/css-value.js

@@ -0,0 +1,86 @@
+import { tokenNameToCssVar } from './css-naming.js';
+/**
+ * Mirrors the `ds/color/rgba` transform: DTCG color values already carry a `hex` field in this
+ * token set (see `tokens/Base.tokens.json`), so this only needs to add an `rgba()` wrapper when
+ * `alpha < 1`.
+ */
+export const colorValueToCss = (value) => {
+    if (typeof value !== 'object' || value === null || !('hex' in value)) {
+        return null;
+    }
+    const { hex, alpha } = value;
+    if (typeof hex !== 'string') {
+        return null;
+    }
+    if (typeof alpha === 'number' && alpha < 1) {
+        const stripped = hex.replace('#', '');
+        const r = parseInt(stripped.substring(0, 2), 16);
+        const g = parseInt(stripped.substring(2, 4), 16);
+        const b = parseInt(stripped.substring(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+    return hex;
+};
+const ROUND_TOKEN_NAME_MARKERS = ['line-height', 'lineheight', 'opacity'];
+/**
+ * Mirrors `ds/size/round`. Case-insensitive because callers pass different name casings
+ * depending on the platform's name transform - kebab-case for CSS/SCSS (`ds/css/name`), PascalCase
+ * for JS (`ds/js/name`).
+ */
+export const roundNumberValue = (value, tokenName) => {
+    const lowerName = tokenName.toLowerCase();
+    if (ROUND_TOKEN_NAME_MARKERS.some(marker => lowerName.includes(marker))) {
+        return Math.round(value * 10) / 10;
+    }
+    return value;
+};
+const NUMBER_ONLY_PATH_MARKERS = [
+    'LineHeight',
+    'FontWeight',
+    'Opacity',
+    '🌫️ Opacity',
+    'ZIndex',
+    'Z-Index',
+    '🗂️ ZIndex',
+    '🗂️ Z-Index',
+    'Interaction',
+    '✨ Interaction',
+];
+const PIXEL_PATH_MARKERS = ['📐 Breakpoint', 'Breakpoint', '🗃️ Container', 'Container'];
+/** Mirrors `ds/size/rem`: converts a px number into rem, unless the token's path says otherwise. */
+export const numberValueToCssSize = (value, path) => {
+    if (`${value}`.endsWith('px') || `${value}`.endsWith('rem')) {
+        return value;
+    }
+    if (NUMBER_ONLY_PATH_MARKERS.some(marker => path.includes(marker))) {
+        return Math.round(value * 10) / 10;
+    }
+    if (PIXEL_PATH_MARKERS.some(marker => path.includes(marker))) {
+        return `${value}px`;
+    }
+    if (value === 9999) {
+        return `${value}px`;
+    }
+    return `${value / 16}rem`;
+};
+/**
+ * Turns a resolved DTCG token value into a CSS-ready string, for the live token preview
+ * (`apps/toky`) to send as a `--ds-*` custom property value. Mirrors the `ds/color/rgba` /
+ * `ds/size/round` / `ds/size/rem` Style Dictionary transforms via the functions above, so the
+ * preview never drifts from what the build actually produces (see ADR-0021). Returns `null` for
+ * value shapes it doesn't recognize, so the caller can skip that token rather than send garbage.
+ */
+export const resolvedValueToCss = (value, type, path) => {
+    if (type === 'color') {
+        return colorValueToCss(value);
+    }
+    if (type === 'number' && typeof value === 'number') {
+        const cssVarName = tokenNameToCssVar(path);
+        const rounded = roundNumberValue(value, cssVarName);
+        return `${numberValueToCssSize(rounded, path)}`;
+    }
+    if (type === 'string' && typeof value === 'string') {
+        return value;
+    }
+    return null;
+};

package/dist/out-tsc/formatter.js

@@ -100,7 +100,7 @@ export const registerCustomFormatters = (sd) => {
             //   `\n}\n` +
             //   '\n'
             return (header +
-                ':root {\n' +
+                ':root, :host {\n' +
                 formattedVariables({
                     format: propertyFormatNames.css,
                     dictionary,
@@ -126,7 +126,7 @@ export const registerCustomFormatters = (sd) => {
                 '\n}\n\n' +
                 '/* Device tokens: Tablet */\n' +
                 `\n@media (min-width: 769px) {\n` +
-                ':root {\n' +
+                ':root, :host {\n' +
                 formattedVariables({
                     format: propertyFormatNames.css,
                     dictionary: deviceTabletDictionary,
@@ -137,7 +137,7 @@ export const registerCustomFormatters = (sd) => {
                 `\n}\n\n` +
                 '/* Device tokens: Desktop */\n' +
                 `\n@media (min-width: 1024px) {\n` +
-                ':root {\n' +
+                ':root, :host {\n' +
                 formattedVariables({
                     format: propertyFormatNames.css,
                     dictionary: deviceDesktopDictionary,

package/dist/out-tsc/transformers.js

@@ -1,3 +1,5 @@
+import { colorValueToCss, numberValueToCssSize, roundNumberValue } from './css-value.js';
+import { tokenNameToCssVar } from './css-naming.js';
 export const registerCustomTransformers = (sd) => {
     /**
      * Transform color tokens with hex and alpha properties to rgba() format
@@ -9,19 +11,7 @@ export const registerCustomTransformers = (sd) => {
         filter: token => token.$type === 'color',
         transform: token => {
             const value = token.$value ?? token.value;
-            // Handle object values with hex and alpha properties
-            if (typeof value === 'object' && value !== null && 'hex' in value && 'alpha' in value && value.alpha < 1) {
-                const hex = value.hex.replace('#', '');
-                const r = parseInt(hex.substring(0, 2), 16);
-                const g = parseInt(hex.substring(2, 4), 16);
-                const b = parseInt(hex.substring(4, 6), 16);
-                const a = parseFloat(value.alpha);
-                return `rgba(${r}, ${g}, ${b}, ${a})`;
-            }
-            if (value.hex) {
-                return value.hex;
-            }
-            return value;
+            return colorValueToCss(value) ?? value;
         },
     });
     /**
@@ -48,23 +38,7 @@ export const registerCustomTransformers = (sd) => {
         type: `name`,
         transitive: true,
         name: `ds/css/name`,
-        transform: token => {
-            let tokenName = token.name;
-            const isComponent = token.path.includes('🧩 Component');
-            if (isComponent) {
-                tokenName = tokenName.replace('-component', '');
-            }
-            // we use t-shirt sizes and need to make sure that 2xl becomes 2xl and not 2-xl
-            // check if token names has number followed by xl or xs and replace it with numberxl without dash
-            if (/-?([0-9]+)-(xl|xs)/.test(tokenName)) {
-                tokenName = tokenName.replace(/-?([0-9]+)-(xl|xs)/, '-$1$2');
-            }
-            // check that no name has double dash and replace it with single dash
-            if (tokenName.includes('--')) {
-                tokenName = tokenName.replace(/--+/g, '-');
-            }
-            return tokenName;
-        },
+        transform: (token, config) => tokenNameToCssVar(token.path, config.prefix ?? 'ds'),
     });
     /**
      * Transform token names for CSS usage
@@ -88,47 +62,7 @@ export const registerCustomTransformers = (sd) => {
         transitive: true,
         name: `ds/size/rem`,
         filter: token => token.$type === 'number',
-        transform: token => {
-            // const name = token.name
-            const value = token.$value;
-            // const originalValue = token.original.$value
-            const path = token.path;
-            // const isReference =
-            //   typeof originalValue === 'string' && originalValue.startsWith('{') && originalValue.endsWith('}')
-            if (`${value}`.endsWith('px')) {
-                return value;
-            }
-            if (`${value}`.endsWith('rem')) {
-                return value;
-            }
-            // Number only values with no unit
-            const tokenToBeNumberOnly = [
-                'LineHeight',
-                'FontWeight',
-                'Opacity',
-                '🌫️ Opacity',
-                'ZIndex',
-                'Z-Index',
-                '🗂️ ZIndex',
-                '🗂️ Z-Index',
-                'Interaction',
-                '✨ Interaction',
-            ];
-            if (tokenToBeNumberOnly.some(ignored => path.includes(ignored))) {
-                return Math.round(value * 10) / 10;
-            }
-            // Number only values with no unit
-            const tokenToBeNumberPixel = ['📐 Breakpoint', 'Breakpoint', '🗃️ Container', 'Container'];
-            if (tokenToBeNumberPixel.some(ignored => path.includes(ignored))) {
-                return value + 'px';
-            }
-            // Extra case for rounded radius
-            if (value === 9999) {
-                return value + 'px';
-            }
-            // turn pixel into rem
-            return value / 16 + 'rem';
-        },
+        transform: token => numberValueToCssSize(token.$value, token.path),
     });
     sd.registerTransform({
         type: `value`,
@@ -139,14 +73,7 @@ export const registerCustomTransformers = (sd) => {
             const value = token.$value ?? token.value;
             const name = token.name;
             const tokenName = Array.isArray(name) ? name.join('-') : String(name ?? '');
-            // if line-height round the value to 1 decimal place
-            if (tokenName.includes('line-height') ||
-                tokenName.includes('opacity') ||
-                tokenName.includes('LineHeight') ||
-                tokenName.includes('Opacity')) {
-                return Math.round(value * 10) / 10;
-            }
-            return value;
+            return roundNumberValue(value, tokenName);
         },
     });
 };