@baloise/ds-tokens 19.10.2 → 20.0.0-next.10

package/dist/out-tsc/formatter.js

@@ -0,0 +1,517 @@
+import { fileHeader, formattedVariables } from 'style-dictionary/utils';
+import { propertyFormatNames } from 'style-dictionary/enums';
+import { RESPONSIVE_DIMENSION_EXTENSION_KEY, TYPOGRAPHY_CSS_SUFFIXES, dimensionValueToCss, } from './css-value.js';
+import { tokenNameToCssVar } from './css-naming.js';
+/**
+ * `formattedVariables` (used by both formatters below) renders exactly one CSS declaration per
+ * token in `dictionary.allTokens`, using that token's own `.value` as the declaration's value. A
+ * typography token's `.value` (post `ds/typography` transform) is a `{fontFamily, fontSize,
+ * fontWeight, lineHeight}` object, not a CSS-ready string — printed as-is it would render as
+ * `[object Object]`. This fans every `$type: "typography"` token out into 4 sibling tokens *before*
+ * the token list reaches `formattedVariables`, one per `TYPOGRAPHY_CSS_SUFFIXES` entry (e.g.
+ * `--ds-label-font-lg-font-family`, `-font-size`, `-font-weight`, `-line-height`) — matching the 4
+ * longhand custom properties decision 5 in docs/plans/typography-token-type-plan.md calls for, and
+ * the same split Toky's live preview already produces (`apps/toky/src/tokens/css-preview.ts`'s
+ * `pushTypographyPreviewTokens`), so the built CSS and the preview never disagree. A typography
+ * token whose transform produced `null` (malformed) is dropped silently rather than emitting a
+ * declaration with a blank value.
+ *
+ * Each field is resolved independently rather than trusting Style Dictionary's own
+ * `outputReferences` (which only rewrites a token's *entire* value against another token's, and
+ * can't rewrite one field inside a hand-built shorthand string). A field whose raw (pre-transform)
+ * value is a `{reference}` gets rendered as a `var(--...)`/`$...` reference via `wrapReference`;
+ * everything else falls back to its already-resolved literal from `css`.
+ *
+ * A field (in practice: `fontSize`) that references a *responsive* dimension token (one carrying
+ * `$extensions[RESPONSIVE_DIMENSION_EXTENSION_KEY]`, e.g. `Device.Text.Size.3XL`) is special-cased
+ * to reference that token's bare (auto-switching) var explicitly, by path, rather than trusting
+ * Style Dictionary's own `outputReferences` to do it — which only ever renders the referenced
+ * token's own bare name, but does so *before* this formatter's `-mobile`/`-tablet`/`-desktop`
+ * expansion runs, so nothing here can rely on it accidentally being right. The bare
+ * `--ds-device-text-size-3xl` var, is the auto-switching one (see `docs/plans/
+ * device-token-layer-plan.md` decision 5 — the layer itself being named "device" retired the old
+ * `-device` suffix), redefined inside this same formatter's `@media` blocks (see
+ * `ds/css/variables-responsive`/`-brand` below), so referencing it is what makes a typography
+ * token like `--ds-heading-bold-level1` responsive without itself needing a per-breakpoint
+ * redeclaration. CSS-only (`referenceSyntax === 'css'`): the SCSS platform never emits per-
+ * breakpoint vars (no media queries there), so its bare reference is left untouched.
+ */
+function expandTypographyTokens(tokens, referenceSyntax) {
+    const responsiveDimensionPaths = computeResponsiveDimensionPaths(tokens);
+    const resolveField = (css, field, originalValue) => {
+        const rawField = originalValue?.[field];
+        const refMatch = typeof rawField === 'string' ? /^\{(.+)\}$/.exec(rawField) : null;
+        if (!referenceSyntax || !refMatch)
+            return css[field];
+        if (referenceSyntax === 'css' && responsiveDimensionPaths.has(refMatch[1])) {
+            return `var(--${tokenNameToCssVar(refMatch[1].split('.'))})`;
+        }
+        return wrapReference(refMatch[1], referenceSyntax);
+    };
+    // A whole-token reference (e.g. Modal.Heading: "{Component.Heading.Level.3}") resolves, by the
+    // time this runs, to a plain object copy of the target's own {fontFamily, fontSize, fontWeight,
+    // lineHeight} — Style Dictionary's reference resolution substitutes the target's raw $value
+    // before any transform sees it, so nothing here can tell "this came from aliasing a whole sibling
+    // typography token" apart from "this token was authored with 4 literal/referenced sub-fields"
+    // except by checking token.original.$value's own shape: a string (not an object) means the whole
+    // token was aliased. In that case each of the 4 longhand declarations should reference that
+    // sibling's own 4 longhands directly (e.g. `var(--ds-heading-level-3-font-family)`), not repeat
+    // its already-resolved literal/reference under this token's name — otherwise the alias silently
+    // degrades into a disconnected copy that drifts if the referenced token ever changes.
+    const wrapReferenceField = (path, suffix, syntax) => {
+        const name = `${tokenNameToCssVar(path.split('.'))}-${suffix}`;
+        return syntax === 'css' ? `var(--${name})` : `$${name}`;
+    };
+    const expanded = [];
+    for (const token of tokens) {
+        if (token.$type !== 'typography') {
+            expanded.push(token);
+            continue;
+        }
+        // Style Dictionary stores the post-transform result on `$value`, not `value`, once a token has
+        // passed through a `usesDtcg: true` pipeline (which every caller of formattedVariables below
+        // is) — `token.value` is `undefined` here even though `ds/typography`'s transform runs fine.
+        const css = (token.$value ?? token.value);
+        if (!css)
+            continue;
+        const rawValue = token.original?.$value;
+        const wholeTokenRefMatch = typeof rawValue === 'string' ? /^\{(.+)\}$/.exec(rawValue) : null;
+        const originalValue = rawValue;
+        for (const [field, suffix] of Object.entries(TYPOGRAPHY_CSS_SUFFIXES)) {
+            const fieldValue = wholeTokenRefMatch && referenceSyntax
+                ? wrapReferenceField(wholeTokenRefMatch[1], suffix, referenceSyntax)
+                : resolveField(css, field, originalValue);
+            expanded.push({
+                ...token,
+                name: `${token.name}-${suffix}`,
+                value: fieldValue,
+                $value: fieldValue,
+                original: { ...token.original, $value: fieldValue },
+            });
+        }
+    }
+    return expanded;
+}
+function isRawResponsiveDimensionValue(value) {
+    if (typeof value !== 'object' || value === null)
+        return false;
+    const v = value;
+    return 'mobile' in v && 'tablet' in v && 'desktop' in v;
+}
+/** DTCG paths (dot-joined, e.g. "🔗 Alias.📏 Space.MD") of every token carrying a responsive breakpoint map — shared by expandTypographyTokens (its fontSize field) and resolveResponsiveDimensionReferences (any other token's whole $value) so both agree on which reference targets need the `-device` treatment. */
+function computeResponsiveDimensionPaths(tokens) {
+    const responsiveDimensionPaths = new Set();
+    for (const token of tokens) {
+        const extensions = token.original?.$extensions;
+        if (token.$type === 'dimension' &&
+            isRawResponsiveDimensionValue(extensions?.[RESPONSIVE_DIMENSION_EXTENSION_KEY])) {
+            responsiveDimensionPaths.add(token.path.join('.'));
+        }
+    }
+    return responsiveDimensionPaths;
+}
+/**
+ * Mirrors expandTypographyTokens's fontSize special-case (see its own comment) for every other
+ * token whose *whole* `$value` is a `{reference}` to a responsive dimension token — e.g. a plain
+ * Component.Popup.Space aliasing Device.Space.MD. Left to Style Dictionary's own
+ * `outputReferences`, such a token would render `var(--ds-device-space-md)` — which, post the
+ * device-token-layer-plan naming change, *is* already the auto-switching var, so this mainly
+ * exists to make that explicit and immune to `outputReferences` timing (see this function's twin
+ * above). Typography tokens are skipped — their 4 longhand fields already get this treatment
+ * per-field in expandTypographyTokens, and re-running it here on their (object-shaped) `$value`
+ * would be a no-op anyway. CSS-only, same reasoning as expandTypographyTokens: SCSS never emits
+ * per-breakpoint vars.
+ */
+function resolveResponsiveDimensionReferences(tokens, referenceSyntax) {
+    if (referenceSyntax !== 'css')
+        return tokens;
+    const responsiveDimensionPaths = computeResponsiveDimensionPaths(tokens);
+    if (responsiveDimensionPaths.size === 0)
+        return tokens;
+    return tokens.map(token => {
+        if (token.$type === 'typography')
+            return token;
+        const rawValue = token.original?.$value;
+        const match = typeof rawValue === 'string' ? /^\{(.+)\}$/.exec(rawValue) : null;
+        if (!match || !responsiveDimensionPaths.has(match[1]))
+            return token;
+        const deviceValue = `var(--${tokenNameToCssVar(match[1].split('.'))})`;
+        return { ...token, value: deviceValue, $value: deviceValue, original: { ...token.original, $value: deviceValue } };
+    });
+}
+const wrapReference = (path, syntax) => {
+    const name = tokenNameToCssVar(path.split('.'));
+    return syntax === 'css' ? `var(--${name})` : `$${name}`;
+};
+/**
+ * Resolves one breakpoint value to a CSS/SCSS-ready string, or — on the javascript platform
+ * (`referenceSyntax === false`) — the referenced token's own already-transformed value as-is
+ * (a raw number for a unitless dimension like a Component size token, matching how that same
+ * token's non-responsive sibling is emitted). A literal {value, unit} converts directly
+ * (dimensionValueToCss); a `{reference}` string can't be resolved by Style Dictionary's
+ * own reference resolver — that only ever walks $value, never $extensions (see
+ * docs/plans/responsive-dimension-token-plan.md's "Open technical question") — so it's looked up
+ * here instead, against every other dimension token's own already-transformed (post `ds/dimension`)
+ * CSS value, keyed by its original DTCG path (e.g. "🌐 Global.📏 Dimension.Space16", matching the
+ * braces-stripped form of the `{reference}` string as authored in Base.tokens.json). When
+ * `referenceSyntax` is set (as it is on every platform that calls this, matching that platform's
+ * own `outputReferences`), a resolvable reference renders as a `var(--...)`/`$...` reference
+ * instead of its literal value — matching how Style Dictionary's own reference resolution already
+ * renders every *non*-responsive alias (e.g. `--ds-alias-background-color-white: var(--ds-global-
+ * color-white)` in CSS, `$ds-alias-background-color-white: $ds-global-color-white` in SCSS);
+ * `cssByPath` still gates this on the target actually existing as a real dimension declaration in
+ * this dictionary, so an unresolvable reference still degrades the same way it always has.
+ */
+function resolveResponsiveBreakpointCss(raw, cssByPath, referenceSyntax) {
+    if (typeof raw === 'string') {
+        const match = /^\{(.+)\}$/.exec(raw);
+        if (!match)
+            return null;
+        if (!cssByPath.has(match[1]))
+            return null;
+        return referenceSyntax ? wrapReference(match[1], referenceSyntax) : (cssByPath.get(match[1]) ?? null);
+    }
+    return dimensionValueToCss(raw);
+}
+/**
+ * Mirrors expandTypographyTokens's technique (see its own comment above), fanning one responsive
+ * dimension token out into 3 clones (mobile/tablet/desktop) *before* the existing
+ * -mobile/-tablet/-desktop -> -device media-query splitting below. That splitting logic already
+ * operates purely on name suffixes, with no idea whether they came from the pre-existing
+ * sibling-token pattern or this expansion — so it needs zero code changes to also handle these
+ * (Phase 2's "key design win", see the plan). A malformed responsive token (an unresolvable
+ * breakpoint) degrades to its own plain $value/bare name instead of being dropped entirely —
+ * decision 4 already keeps $value mirroring mobile, so that's still a real, valid dimension value
+ * on its own; this is the DTCG-degradation behavior the whole $extensions design exists for.
+ */
+function expandResponsiveDimensionTokens(tokens, referenceSyntax) {
+    const cssByPath = new Map();
+    for (const token of tokens) {
+        const value = token.$value ?? token.value;
+        if (token.$type === 'dimension' && (typeof value === 'string' || typeof value === 'number')) {
+            cssByPath.set(token.path.join('.'), value);
+        }
+    }
+    const expanded = [];
+    for (const token of tokens) {
+        const extensions = token.original?.$extensions;
+        const responsive = token.$type === 'dimension' ? extensions?.[RESPONSIVE_DIMENSION_EXTENSION_KEY] : undefined;
+        if (!isRawResponsiveDimensionValue(responsive)) {
+            expanded.push(token);
+            continue;
+        }
+        const mobile = resolveResponsiveBreakpointCss(responsive.mobile, cssByPath, referenceSyntax);
+        const tablet = resolveResponsiveBreakpointCss(responsive.tablet, cssByPath, referenceSyntax);
+        const desktop = resolveResponsiveBreakpointCss(responsive.desktop, cssByPath, referenceSyntax);
+        if (mobile === null || tablet === null || desktop === null) {
+            expanded.push(token);
+            continue;
+        }
+        for (const [breakpoint, cssValue] of [
+            ['mobile', mobile],
+            ['tablet', tablet],
+            ['desktop', desktop],
+        ]) {
+            // Each clone gets its own `original.$value: undefined` — same "don't leave a
+            // reference-shaped original.$value shared across clones" defensiveness expandTypographyTokens
+            // needed for outputReferences (see its own comment) — there's no meaningful per-breakpoint
+            // original sub-value to narrow to here the way typography's per-field narrowing has, so this
+            // just removes it instead.
+            expanded.push({
+                ...token,
+                name: `${token.name}-${breakpoint}`,
+                value: cssValue,
+                $value: cssValue,
+                original: { ...token.original, $value: undefined },
+            });
+        }
+    }
+    return expanded;
+}
+// Every token's `path[0]` is one of these four top-level source-tree groups, in the order Style
+// Dictionary is fed the DTCG source (see `tokens/Base.tokens.json`'s top-level keys). Untouched by
+// `name/kebab` or any other transform — those only ever rewrite `.name`/`.value`, never `.path` —
+// so grouping by `path[0]` stays reliable no matter which format/transform pipeline ran first.
+const TOKEN_ORIGIN_GROUPS = [
+    { pathSegment: '🌐 Global', label: 'Global tokens' },
+    { pathSegment: '🔗 Alias', label: 'Alias tokens' },
+    { pathSegment: '📱 Device', label: 'Device tokens' },
+    { pathSegment: '🧩 Component', label: 'Component tokens' },
+];
+/**
+ * Thin wrapper around `formattedVariables` that partitions `dictionary.allTokens` into
+ * Global/Alias/Device/Component groups (see TOKEN_ORIGIN_GROUPS) and renders each through
+ * `formattedVariables` under its own `/* ... *\/` comment header, in that fixed order — so
+ * generated output always reads primitives first, then their semantic aliases, then
+ * component-level overrides, regardless of source JSON key order or any prior name-based
+ * splitting (e.g. the -mobile/-tablet/-desktop dictionaries built above). A group with no tokens
+ * is omitted entirely rather than emitting an empty header.
+ */
+function formattedVariablesByOrigin(params) {
+    const { dictionary, indent = '  ', ...rest } = params;
+    return TOKEN_ORIGIN_GROUPS.map(({ pathSegment, label }) => {
+        const allTokens = dictionary.allTokens.filter(token => token.path[0] === pathSegment);
+        if (allTokens.length === 0)
+            return null;
+        const groupDictionary = { ...dictionary, allTokens };
+        return `${indent}/* ${label} */\n` + formattedVariables({ ...rest, dictionary: groupDictionary });
+    })
+        .filter((group) => group !== null)
+        .join('\n\n');
+}
+export const registerCustomFormatters = (sd) => {
+    /**
+     * CSS Responsive Formatter
+     * ------------------------------------------------------
+     */
+    sd.registerFormat({
+        name: 'ds/css/variables-responsive',
+        format: async ({ dictionary: rawDictionary, file, options }) => {
+            const { outputReferences } = options;
+            const header = await fileHeader({ file });
+            const dictionary = {
+                ...rawDictionary,
+                allTokens: expandResponsiveDimensionTokens(resolveResponsiveDimensionReferences(expandTypographyTokens(rawDictionary.allTokens, outputReferences ? 'css' : false), outputReferences ? 'css' : false), outputReferences ? 'css' : false),
+            };
+            // find responsive tokens in dictionary which end with -mobile, -tablet or -desktop
+            const baseTokensOriginal = dictionary.allTokens.filter(token => token.name.endsWith('-mobile'));
+            //
+            // Base tokens (bare name = auto-switching, per docs/plans/device-token-layer-plan.md
+            // decision 5 — the mobile clone becomes the unsuffixed declaration directly, there's no
+            // longer a separate mobile-mirrored fallback var distinct from the auto-switching one)
+            // ------------------------------------------------------
+            const baseTokens = JSON.parse(JSON.stringify(baseTokensOriginal));
+            baseTokens.forEach(token => {
+                token.name = token.name.replace('-mobile', '');
+            });
+            const baseDictionary = {
+                ...dictionary,
+                allTokens: baseTokens,
+            };
+            const tabletTokensOriginal = dictionary.allTokens.filter(token => token.name.endsWith('-tablet'));
+            const deviceTabletTokens = JSON.parse(JSON.stringify(tabletTokensOriginal));
+            deviceTabletTokens.forEach(token => {
+                token.name = token.name.replace('-tablet', '');
+            });
+            const deviceTabletDictionary = {
+                ...dictionary,
+                allTokens: deviceTabletTokens,
+            };
+            const desktopTokensOriginal = dictionary.allTokens.filter(token => token.name.endsWith('-desktop'));
+            const deviceDesktopTokens = JSON.parse(JSON.stringify(desktopTokensOriginal));
+            deviceDesktopTokens.forEach(token => {
+                token.name = token.name.replace('-desktop', '');
+            });
+            const deviceDesktopDictionary = {
+                ...dictionary,
+                allTokens: deviceDesktopTokens,
+            };
+            return (header +
+                ':host,\n:root {\n' +
+                formattedVariablesByOrigin({
+                    format: propertyFormatNames.css,
+                    dictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                '\n\n' +
+                '  /* Device tokens */\n' +
+                formattedVariablesByOrigin({
+                    format: propertyFormatNames.css,
+                    dictionary: baseDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                '\n}\n\n' +
+                '/* Device tokens: Tablet */\n' +
+                `\n@media (min-width: 769px) {\n` +
+                ':host,\n:root {\n' +
+                formattedVariablesByOrigin({
+                    format: propertyFormatNames.css,
+                    dictionary: deviceTabletDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                `\n}` +
+                `\n}\n\n` +
+                '/* Device tokens: Desktop */\n' +
+                `\n@media (min-width: 1024px) {\n` +
+                ':host,\n:root {\n' +
+                formattedVariablesByOrigin({
+                    format: propertyFormatNames.css,
+                    dictionary: deviceDesktopDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                `\n}` +
+                `\n}\n` +
+                '\n');
+        },
+    });
+    /**
+     * CSS Brand Formatter
+     * ------------------------------------------------------
+     * Renders the FULL token set behind a caller-supplied `options.selector` — used for a brand's
+     * `<brand>.tokens.css` (`:host, :root`) and `<brand>.override.css`
+     * (`[data-theme]`/`:host([data-theme])`) files, and for Base's own `base.override.css`
+     * (see config.base.ts). Unlike its diff-based predecessor, the caller is expected to hand this
+     * a dictionary whose `allTokens` is already the complete, self-sufficient set to render — a
+     * brand's config.brand.ts merges the brand onto Base before this ever runs (mergeTokenTree), so
+     * there's no `include`/`isSource` split to filter here anymore. See
+     * docs/adr/0030-full-merge-brand-token-css.md.
+     */
+    sd.registerFormat({
+        name: 'ds/css/variables-brand',
+        format: async ({ dictionary: rawDictionary, file, options }) => {
+            const { outputReferences } = options;
+            const selector = options.selector ?? ':host, :root';
+            const header = await fileHeader({ file });
+            const dictionary = {
+                ...rawDictionary,
+                allTokens: expandResponsiveDimensionTokens(resolveResponsiveDimensionReferences(expandTypographyTokens(rawDictionary.allTokens, outputReferences ? 'css' : false), outputReferences ? 'css' : false), outputReferences ? 'css' : false),
+            };
+            const sourceTokens = dictionary.allTokens;
+            const baseTokensOriginal = sourceTokens.filter(token => token.name.endsWith('-mobile'));
+            const baseTokens = JSON.parse(JSON.stringify(baseTokensOriginal));
+            baseTokens.forEach(token => {
+                token.name = token.name.replace('-mobile', '');
+            });
+            const baseDictionary = { ...dictionary, allTokens: baseTokens };
+            const tabletTokensOriginal = sourceTokens.filter(token => token.name.endsWith('-tablet'));
+            const deviceTabletTokens = JSON.parse(JSON.stringify(tabletTokensOriginal));
+            deviceTabletTokens.forEach(token => {
+                token.name = token.name.replace('-tablet', '');
+            });
+            const deviceTabletDictionary = { ...dictionary, allTokens: deviceTabletTokens };
+            const desktopTokensOriginal = sourceTokens.filter(token => token.name.endsWith('-desktop'));
+            const deviceDesktopTokens = JSON.parse(JSON.stringify(desktopTokensOriginal));
+            deviceDesktopTokens.forEach(token => {
+                token.name = token.name.replace('-desktop', '');
+            });
+            const deviceDesktopDictionary = { ...dictionary, allTokens: deviceDesktopTokens };
+            return (header +
+                `${selector} {\n` +
+                formattedVariablesByOrigin({
+                    format: propertyFormatNames.css,
+                    dictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                '\n\n  /* Device tokens */\n' +
+                formattedVariablesByOrigin({
+                    format: propertyFormatNames.css,
+                    dictionary: baseDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                '\n}\n\n' +
+                '/* Device tokens: Tablet */\n' +
+                `\n@media (min-width: 769px) {\n` +
+                `${selector} {\n` +
+                formattedVariablesByOrigin({
+                    format: propertyFormatNames.css,
+                    dictionary: deviceTabletDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                `\n}` +
+                `\n}\n\n` +
+                '/* Device tokens: Desktop */\n' +
+                `\n@media (min-width: 1024px) {\n` +
+                `${selector} {\n` +
+                formattedVariablesByOrigin({
+                    format: propertyFormatNames.css,
+                    dictionary: deviceDesktopDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                `\n}` +
+                `\n}\n` +
+                '\n');
+        },
+    });
+    /**
+     * SCSS Variables Formatter
+     * ------------------------------------------------------
+     * A thin wrapper around Style Dictionary's own stock 'scss/variables' format (reproduced here,
+     * not imported — SD doesn't expose the stock format bodies for reuse), needed only because the
+     * stock format has no hook to run expandTypographyTokens first. Every other type's scss output
+     * is unaffected — the expand pass is a no-op for any token that isn't $type: "typography".
+     */
+    sd.registerFormat({
+        name: 'ds/scss/variables',
+        format: async ({ dictionary: rawDictionary, options, file }) => {
+            const { outputReferences, themeable = false, formatting, sort } = options;
+            const dictionary = {
+                ...rawDictionary,
+                allTokens: expandResponsiveDimensionTokens(expandTypographyTokens(rawDictionary.allTokens, outputReferences ? 'sass' : false), outputReferences ? 'sass' : false),
+            };
+            const header = await fileHeader({ file, options });
+            return (header +
+                formattedVariablesByOrigin({
+                    format: propertyFormatNames.sass,
+                    dictionary,
+                    outputReferences,
+                    themeable,
+                    formatting,
+                    usesDtcg: true,
+                    sort,
+                    indent: '',
+                }) +
+                '\n');
+        },
+    });
+    /**
+     * JSON Flat Formatter
+     * ------------------------------------------------------
+     * A thin wrapper around Style Dictionary's own stock 'json/flat' format (reproduced here, not
+     * imported — SD doesn't expose the stock format bodies for reuse), needed only so a responsive
+     * dimension token's mobile/tablet/desktop breakpoints — otherwise invisible past its
+     * mobile-mirrored `$value` (decision 4) — still reach this flat platform, mirroring the
+     * `-mobile`/`-tablet`/`-desktop` expansion the CSS/SCSS formatters above already do.
+     */
+    sd.registerFormat({
+        name: 'ds/json/flat',
+        format: async ({ dictionary: rawDictionary, options }) => {
+            const dictionary = {
+                ...rawDictionary,
+                allTokens: expandResponsiveDimensionTokens(rawDictionary.allTokens, false),
+            };
+            return ('{\n' +
+                dictionary.allTokens
+                    .map(token => `  "${token.name}": ${JSON.stringify(options.usesDtcg ? token.$value : token.value)}`)
+                    .join(',\n') +
+                '\n}\n');
+        },
+    });
+    /**
+     * JavaScript ES6 Formatter
+     * ------------------------------------------------------
+     * Same rationale as 'ds/json/flat' above, for the 'javascript/es6' stock format. Unlike the
+     * kebab-case names 'ds/json/flat' (and the CSS/SCSS formatters above) see, this platform's
+     * `ds/js/name` transform has already produced PascalCase identifiers (e.g.
+     * `DsAliasContainerSpace`) by the time this formatter runs — expandResponsiveDimensionTokens's
+     * `-mobile`/`-tablet`/`-desktop` suffix would otherwise land as an invalid `Name-mobile`
+     * identifier, so it's re-cased to `NameMobile` here before emitting.
+     */
+    sd.registerFormat({
+        name: 'ds/javascript/es6',
+        format: async ({ dictionary: rawDictionary, file, options }) => {
+            const header = await fileHeader({ file, options });
+            const dictionary = {
+                ...rawDictionary,
+                allTokens: expandResponsiveDimensionTokens(rawDictionary.allTokens, false).map(token => {
+                    const match = /^(.+)-(mobile|tablet|desktop)$/.exec(token.name);
+                    if (!match)
+                        return token;
+                    const [, base, breakpoint] = match;
+                    return { ...token, name: `${base}${breakpoint[0].toUpperCase()}${breakpoint.slice(1)}` };
+                }),
+            };
+            const body = dictionary.allTokens
+                .map(token => `export const ${token.name} = ${JSON.stringify(options.usesDtcg ? token.$value : token.value)};`)
+                .join('\n');
+            return `${header}${body}\n`;
+        },
+    });
+};

package/dist/out-tsc/index.js

@@ -0,0 +1,46 @@
+import StyleDictionary from 'style-dictionary';
+import { copy, ensureDir, pathExists } from 'fs-extra';
+import { resolve } from 'path';
+console.log(`
+\x1b[35m┃\x1b[0m
+\x1b[35m┃\x1b[0m  \x1b[1;37m🧩 Helvetia Design System\x1b[0m
+\x1b[35m┃\x1b[0m  \x1b[90m🎨 Building Tokens Package\x1b[0m
+\x1b[35m┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\x1b[0m
+`);
+import { registerCustomTransformers } from './transformers.js';
+import { registerCustomFormatters } from './formatter.js';
+registerCustomTransformers(StyleDictionary);
+registerCustomFormatters(StyleDictionary);
+import ConfigBase from './config.base.js';
+import { createBrandConfig } from './config.brand.js';
+// Base build
+const StyleDictionaryBase = new StyleDictionary(ConfigBase);
+StyleDictionaryBase.buildAllPlatforms();
+// Brand builds — add new brand names here (must match tokens/<Name>.tokens.json)
+const brands = ['Tcs', 'ERV'];
+for (const brand of brands) {
+    const { config, cleanup } = createBrandConfig(brand);
+    try {
+        const sd = new StyleDictionary(config, { verbosity: 'verbose' });
+        await sd.buildAllPlatforms();
+    }
+    finally {
+        cleanup();
+    }
+}
+// copy generated files to css folder in core assets
+const projectRoot = process.cwd();
+const sourceDir = resolve(projectRoot, 'dist', 'css');
+const targetDir = resolve(projectRoot, '..', 'core', 'www', 'assets', 'tokens');
+const storybookTargetDir = resolve(projectRoot, '..', '..', 'apps', 'storybook', 'public', 'assets', 'css');
+(async () => {
+    await ensureDir(targetDir);
+    await ensureDir(storybookTargetDir);
+    if (await pathExists(sourceDir)) {
+        await copy(sourceDir, targetDir, { overwrite: true });
+        await copy(sourceDir, storybookTargetDir, { overwrite: true });
+    }
+    else {
+        console.warn(`Tokens CSS directory not found at: ${sourceDir}`);
+    }
+})();