@skdx/tokens 0.26.0

package/dist/utils/aliases.d.ts

@@ -0,0 +1,121 @@
+/**
+ * The semantic alias layer: the vocabulary component skins are allowed to name.
+ *
+ * Why this file exists
+ * -------------------
+ * `@skdx/skins` is forbidden from containing a colour literal — every colour
+ * it declares must resolve through a token. But the surface a theme actually
+ * defines is small: five ramps (`primary`, `neutral`, `success`, `warning`,
+ * `danger`) and ten `semantic` entries. A button skin needs more than that. It
+ * needs to say "the background of a pressed primary action" and "the border of
+ * an invalid field", and neither exists as a theme-authored token.
+ *
+ * The naive fix is to add those names to `SemanticColors` and set them in all
+ * 38 themes. That is 38 files edited per alias added, and every one of those
+ * edits is a chance for a theme to drift out of step with the others.
+ *
+ * This layer takes the other option: aliases are **pure `var()` indirection**,
+ * declared once at `:root`, pointing at ramp steps and semantic entries the
+ * themes already define. No alias holds a colour — it holds the *name of* a
+ * colour. So when `[data-skdx-theme="nord-dark"]` redeclares
+ * `--skdx-color-primary-600` at its own higher-specificity selector, every alias
+ * pointing at that step re-resolves to Nord's value automatically. Adding a
+ * theme costs nothing here, and adding an alias costs one line rather than 38.
+ *
+ * This is also why the aliases are emitted at `:root` rather than inside each
+ * theme block: they must sit *below* the theme declarations in the cascade so a
+ * theme can still override an alias outright when the derivation is wrong for
+ * it. {@link darkColorAliases} is exactly that escape hatch in use: a ramp runs
+ * light-to-dark in every theme, so the aliases that put ink directly on the
+ * page need the opposite end in dark mode.
+ *
+ * Choosing the ramp step
+ * ----------------------
+ * A dark theme's ramp is authored for dark — `NordDark`'s `primary-600` is
+ * already a step that works as a filled background on a dark surface, the same
+ * way `DefaultTheme`'s is on a light one. So a single step choice per alias is
+ * correct in both modes for the *filled* aliases. It does not hold for aliases
+ * that put ink or a wash directly on the page — see {@link darkColorAliases},
+ * which was written after measuring 22 of 38 themes failing WCAG contrast.
+ *
+ * @see docs/architecture/skin-token-map.md for the per-property mapping table.
+ */
+/**
+ * Every alias, as `[name, value]` pairs where `value` is always a `var()`
+ * reference — never a literal. Grouped by the question a skin author asks.
+ *
+ * Kept as data rather than a hand-written CSS string so
+ * `aliases.test.ts` can assert the no-literal rule mechanically over the whole
+ * set, which is the only thing standing between this file and the exact class
+ * of drift the skins package's Stylelint rule exists to prevent.
+ */
+export declare const colorAliases: ReadonlyArray<readonly [string, string]>;
+/**
+ * The aliases a dark theme re-points, and what it re-points them to.
+ *
+ * Why this exists
+ * ---------------
+ * The base table above picks one ramp step per alias and claims that is correct
+ * in both modes. For most aliases it is: a theme authors its ramp for its own
+ * mode, so `primary-600` is a usable filled background whichever way the page
+ * faces.
+ *
+ * It is *not* true for the aliases that put ink directly on the page. A ramp
+ * runs light at 50 to dark at 950 in every theme, dark ones included — that is
+ * what makes a ramp a ramp. So `--skdx-color-text-danger: danger-700` is dark
+ * red: correct on a white page, and nearly invisible on a charcoal one. The
+ * same applies to every "wash + dark ink" status pairing, and to the neutral
+ * fills (`surface-sunken`, `track`, `skeleton`) that assume the page is lighter
+ * than they are.
+ *
+ * Measured before writing this: 22 of the 38 themes had at least one contrast
+ * failure, every one of them a dark theme, and every failure in this list.
+ * Input text sat at 1.07:1 and the tooltip at 1.00:1.
+ *
+ * The fix uses the escape hatch the base table was designed around — a theme
+ * may override an alias, because `[data-skdx-theme="…"]` outranks `:root`. These
+ * overrides are emitted automatically for every theme whose `mode` is `'dark'`,
+ * so the cost stays "one line per alias" rather than "one edit per theme", and
+ * a new dark theme is correct the day it lands without anyone remembering this
+ * file exists.
+ *
+ * Steps mirror around the middle of the ramp: 700 → 300, 800 → 200, 50 → 950.
+ * That keeps the light and dark treatments the same *distance* from their
+ * background rather than merely both legible.
+ */
+export declare const darkColorAliases: ReadonlyArray<readonly [string, string]>;
+/**
+ * Renders {@link darkColorAliases} at `selector`, for a theme whose mode is dark.
+ *
+ * @param selector - The theme's own selector, e.g. `'[data-skdx-theme="nord-dark"]'`.
+ * @public
+ */
+export declare function darkAliasesToCss(selector: string): string;
+/**
+ * Renders {@link colorAliases} as a `:root` rule block.
+ *
+ * Emitted *after* `foundationToCss()` and *before* the theme blocks in
+ * `@skdx/tokens/css`. Order matters in one direction only: an alias must be
+ * able to be overridden by a theme, and `:root` loses to
+ * `[data-skdx-theme="…"]` on specificity regardless of source order, so the
+ * position here is for readability rather than correctness.
+ *
+ * @returns A CSS string, e.g. `':root {\n  --skdx-color-action-primary-bg: var(--skdx-color-primary-600);\n  …\n}\n'`.
+ *
+ * @example
+ * ```ts
+ * import { foundationToCss, aliasesToCss } from '@skdx/tokens';
+ *
+ * fs.writeFileSync('tokens.css', foundationToCss() + aliasesToCss());
+ * ```
+ *
+ * @public
+ */
+export declare function aliasesToCss(): string;
+/**
+ * {@link colorAliases} as a plain object, for consumers applying tokens through
+ * JS rather than a stylesheet (the alias counterpart to `themeToCssVars`).
+ *
+ * @public
+ */
+export declare function aliasesToCssVars(): Record<string, string>;

package/dist/utils/aliases.js

@@ -0,0 +1,9 @@
+var c=[["--skdx-color-surface-inverse","var(--skdx-color-neutral-900)"],["--skdx-color-text-on-inverse","var(--skdx-color-neutral-50)"],["--skdx-color-surface-page","var(--skdx-color-semantic-background)"],["--skdx-color-surface-default","var(--skdx-color-semantic-surface)"],["--skdx-color-surface-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-surface-raised","var(--skdx-color-semantic-background)"],["--skdx-color-surface-sunken","var(--skdx-color-semantic-surface)"],["--skdx-color-surface-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-surface-selected","var(--skdx-color-primary-50)"],["--skdx-color-surface-disabled","var(--skdx-color-neutral-100)"],["--skdx-color-surface-overlay","var(--skdx-color-semantic-overlay)"],["--skdx-color-text-default","var(--skdx-color-semantic-text)"],["--skdx-color-text-muted","var(--skdx-color-semantic-text-muted)"],["--skdx-color-text-on-accent","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-text-accent","var(--skdx-color-primary-700)"],["--skdx-color-text-disabled","var(--skdx-color-neutral-600)"],["--skdx-color-text-placeholder","var(--skdx-color-semantic-text-muted)"],["--skdx-color-text-danger","var(--skdx-color-danger-700)"],["--skdx-color-text-success","var(--skdx-color-success-800)"],["--skdx-color-text-warning","var(--skdx-color-warning-900)"],["--skdx-color-text-info","var(--skdx-color-primary-700)"],["--skdx-color-border-default","var(--skdx-color-semantic-border)"],["--skdx-color-border-strong","var(--skdx-color-semantic-border-strong)"],["--skdx-color-border-subtle","var(--skdx-color-neutral-200)"],["--skdx-color-border-accent","var(--skdx-color-primary-600)"],["--skdx-color-border-disabled","var(--skdx-color-neutral-200)"],["--skdx-color-border-danger","var(--skdx-color-danger-600)"],["--skdx-color-border-success","var(--skdx-color-success-600)"],["--skdx-color-border-warning","var(--skdx-color-warning-600)"],["--skdx-color-action-primary-bg","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-bg-hover","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-bg-pressed","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-border-hover","var(--skdx-color-primary-800)"],["--skdx-color-action-primary-text","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-action-primary-border","var(--skdx-color-primary-600)"],["--skdx-color-action-secondary-bg","var(--skdx-color-semantic-surface)"],["--skdx-color-action-secondary-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-secondary-bg-pressed","var(--skdx-color-neutral-300)"],["--skdx-color-action-secondary-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-secondary-border","var(--skdx-color-semantic-border)"],["--skdx-color-action-outline-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-outline-border","var(--skdx-color-semantic-border-strong)"],["--skdx-color-action-outline-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-outline-bg-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-action-ghost-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-ghost-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-ghost-bg-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-action-danger-bg","var(--skdx-color-danger-700)"],["--skdx-color-action-danger-bg-hover","var(--skdx-color-danger-800)"],["--skdx-color-action-danger-bg-pressed","var(--skdx-color-danger-900)"],["--skdx-color-action-danger-text","var(--skdx-color-danger-50)"],["--skdx-color-action-danger-border","var(--skdx-color-danger-700)"],["--skdx-color-action-disabled-bg","var(--skdx-color-neutral-100)"],["--skdx-color-action-disabled-text","var(--skdx-color-neutral-700)"],["--skdx-color-action-disabled-border","var(--skdx-color-neutral-200)"],["--skdx-color-field-bg","var(--skdx-color-semantic-background)"],["--skdx-color-field-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-field-bg-disabled","var(--skdx-color-neutral-100)"],["--skdx-color-field-bg-readonly","var(--skdx-color-neutral-50)"],["--skdx-color-field-border","var(--skdx-color-semantic-border-strong)"],["--skdx-color-field-border-hover","var(--skdx-color-neutral-500)"],["--skdx-color-field-border-focus","var(--skdx-color-primary-600)"],["--skdx-color-field-border-invalid","var(--skdx-color-danger-700)"],["--skdx-color-field-text","var(--skdx-color-semantic-text)"],["--skdx-color-selection-bg","var(--skdx-color-primary-600)"],["--skdx-color-selection-bg-hover","var(--skdx-color-primary-600)"],["--skdx-color-selection-mark","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-highlight-bg","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-highlight-text","var(--skdx-color-semantic-text)"],["--skdx-color-status-info-bg","var(--skdx-color-primary-50)"],["--skdx-color-status-info-border","var(--skdx-color-primary-200)"],["--skdx-color-status-info-text","var(--skdx-color-primary-800)"],["--skdx-color-status-info-icon","var(--skdx-color-primary-600)"],["--skdx-color-status-success-bg","var(--skdx-color-success-50)"],["--skdx-color-status-success-border","var(--skdx-color-success-200)"],["--skdx-color-status-success-text","var(--skdx-color-success-800)"],["--skdx-color-status-success-icon","var(--skdx-color-success-600)"],["--skdx-color-status-warning-bg","var(--skdx-color-warning-50)"],["--skdx-color-status-warning-border","var(--skdx-color-warning-200)"],["--skdx-color-status-warning-text","var(--skdx-color-warning-800)"],["--skdx-color-status-warning-icon","var(--skdx-color-warning-600)"],["--skdx-color-status-danger-bg","var(--skdx-color-danger-50)"],["--skdx-color-status-danger-border","var(--skdx-color-danger-200)"],["--skdx-color-status-danger-text","var(--skdx-color-danger-800)"],["--skdx-color-status-danger-icon","var(--skdx-color-danger-600)"],["--skdx-color-status-neutral-bg","var(--skdx-color-semantic-surface)"],["--skdx-color-status-neutral-border","var(--skdx-color-semantic-border)"],["--skdx-color-status-neutral-text","var(--skdx-color-semantic-text)"],["--skdx-color-status-neutral-icon","var(--skdx-color-semantic-text-muted)"],["--skdx-color-focus-ring","var(--skdx-color-semantic-focus-ring)"],["--skdx-color-focus-ring-offset","var(--skdx-color-semantic-background)"],["--skdx-color-separator","var(--skdx-color-semantic-border)"],["--skdx-color-track","var(--skdx-color-neutral-100)"],["--skdx-color-track-fill","var(--skdx-color-primary-600)"],["--skdx-color-skeleton","var(--skdx-color-neutral-200)"],["--skdx-color-skeleton-sheen","var(--skdx-color-neutral-100)"]],d=[["--skdx-color-text-accent","var(--skdx-color-primary-300)"],["--skdx-color-text-danger","var(--skdx-color-danger-300)"],["--skdx-color-text-success","var(--skdx-color-success-300)"],["--skdx-color-text-warning","var(--skdx-color-warning-300)"],["--skdx-color-text-info","var(--skdx-color-primary-300)"],["--skdx-color-text-disabled","var(--skdx-color-neutral-400)"],["--skdx-color-field-border-invalid","var(--skdx-color-danger-400)"],["--skdx-color-border-danger","var(--skdx-color-danger-400)"],["--skdx-color-border-success","var(--skdx-color-success-400)"],["--skdx-color-border-warning","var(--skdx-color-warning-400)"],["--skdx-color-surface-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-secondary-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-outline-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-ghost-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-field-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-highlight-bg","var(--skdx-color-neutral-800)"],["--skdx-color-surface-sunken","var(--skdx-color-neutral-800)"],["--skdx-color-surface-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-surface-selected","var(--skdx-color-primary-950)"],["--skdx-color-surface-disabled","var(--skdx-color-neutral-800)"],["--skdx-color-action-disabled-bg","var(--skdx-color-neutral-800)"],["--skdx-color-action-disabled-text","var(--skdx-color-neutral-400)"],["--skdx-color-action-disabled-border","var(--skdx-color-neutral-700)"],["--skdx-color-action-secondary-bg-pressed","var(--skdx-color-neutral-600)"],["--skdx-color-action-outline-bg-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-action-ghost-bg-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-border-subtle","var(--skdx-color-neutral-800)"],["--skdx-color-border-disabled","var(--skdx-color-neutral-700)"],["--skdx-color-track","var(--skdx-color-neutral-900)"],["--skdx-color-skeleton","var(--skdx-color-neutral-800)"],["--skdx-color-skeleton-sheen","var(--skdx-color-neutral-700)"],["--skdx-color-field-bg-readonly","var(--skdx-color-neutral-900)"],["--skdx-color-field-bg-disabled","var(--skdx-color-neutral-800)"],["--skdx-color-status-info-bg","var(--skdx-color-primary-950)"],["--skdx-color-status-info-border","var(--skdx-color-primary-800)"],["--skdx-color-status-info-text","var(--skdx-color-primary-200)"],["--skdx-color-status-info-icon","var(--skdx-color-primary-400)"],["--skdx-color-status-success-bg","var(--skdx-color-success-950)"],["--skdx-color-status-success-border","var(--skdx-color-success-800)"],["--skdx-color-status-success-text","var(--skdx-color-success-200)"],["--skdx-color-status-success-icon","var(--skdx-color-success-400)"],["--skdx-color-status-warning-bg","var(--skdx-color-warning-950)"],["--skdx-color-status-warning-border","var(--skdx-color-warning-800)"],["--skdx-color-status-warning-text","var(--skdx-color-warning-200)"],["--skdx-color-status-warning-icon","var(--skdx-color-warning-400)"],["--skdx-color-status-danger-bg","var(--skdx-color-danger-950)"],["--skdx-color-status-danger-border","var(--skdx-color-danger-800)"],["--skdx-color-status-danger-text","var(--skdx-color-danger-200)"],["--skdx-color-status-danger-icon","var(--skdx-color-danger-400)"],["--skdx-color-surface-inverse","var(--skdx-color-neutral-100)"],["--skdx-color-text-on-inverse","var(--skdx-color-neutral-900)"]];function e(o){let r=d.map(([s,a])=>`  ${s}: ${a};`);return`${o} {
+${r.join(`
+`)}
+}
+`}function l(){return`:root {
+${c.map(([r,s])=>`  ${r}: ${s};`).join(`
+`)}
+}
+`}function t(){return Object.fromEntries(c.map(([o,r])=>[o,r]))}export{l as aliasesToCss,t as aliasesToCssVars,c as colorAliases,e as darkAliasesToCss,d as darkColorAliases};

package/dist/utils/contrast.cjs

@@ -0,0 +1 @@
+"use strict";var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(n,t)=>{for(var e in t)m(n,e,{get:t[e],enumerable:!0})},b=(n,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of d(t))!f.call(n,r)&&r!==e&&m(n,r,{get:()=>t[r],enumerable:!(s=h(t,r))||s.enumerable});return n};var w=n=>b(m({},"__esModule",{value:!0}),n);var R={};g(R,{contrastRatio:()=>k});module.exports=w(R);function k(n,t){let e=o=>{if(!/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(o))throw new TypeError(`contrastRatio() needs a hex color, got "${o}". Translucent and named colors cannot be measured without a backdrop \u2014 composite the value in the theme and state it as hex.`);let a=o.replace("#",""),p=a.length===3?a.split("").map(c=>c+c).join(""):a,i=Number.parseInt(p,16),l=[i>>16&255,i>>8&255,i&255].map(c=>{let u=c/255;return u<=.03928?u/12.92:Math.pow((u+.055)/1.055,2.4)});return .2126*l[0]+.7152*l[1]+.0722*l[2]},[s,r]=[e(n),e(t)].sort((o,a)=>a-o);return(s+.05)/(r+.05)}0&&(module.exports={contrastRatio});

package/dist/utils/contrast.d.cts

@@ -0,0 +1,27 @@
+/**
+ * WCAG 2.x relative-luminance contrast ratio between two `#rrggbb`/`#rgb`
+ * colors, per the standard formula (https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio).
+ * Returns a value from 1 (no contrast) to 21 (black on white).
+ *
+ * **Throws on anything that is not a hex color.** This used to coerce silently:
+ * `hex.replace('#','')` then `Number.parseInt(full, 16)` yields `NaN` for
+ * `rgb(0 0 0 / 0.45)`, and `(NaN >> 16) & 255` is `0`, so a translucent value
+ * was measured as opaque black. `ant-daybreak`'s `textMuted` scored a perfect
+ * 21:1 while rendering at 3.36:1 — a live AA failure passing as a perfect
+ * score, which is worse than no guard at all.
+ *
+ * Throwing rather than compositing is deliberate. Compositing would need a
+ * backdrop this function does not have and cannot infer, and it would let the
+ * next translucent value into the theme set silently. Rejecting forces every
+ * theme to state its colors as measurable values, which makes the whole set
+ * auditable by construction instead of by vigilance.
+ *
+ * `#rgba` and `#rrggbbaa` are rejected too: an alpha channel is exactly the
+ * thing that needs a backdrop, and the luminance math below would read those
+ * extra digits as colour.
+ *
+ * @throws {TypeError} if either argument is not `#rgb` or `#rrggbb`
+ *
+ * @public
+ */
+export declare function contrastRatio(hexA: string, hexB: string): number;

package/dist/utils/contrast.d.ts

@@ -0,0 +1,27 @@
+/**
+ * WCAG 2.x relative-luminance contrast ratio between two `#rrggbb`/`#rgb`
+ * colors, per the standard formula (https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio).
+ * Returns a value from 1 (no contrast) to 21 (black on white).
+ *
+ * **Throws on anything that is not a hex color.** This used to coerce silently:
+ * `hex.replace('#','')` then `Number.parseInt(full, 16)` yields `NaN` for
+ * `rgb(0 0 0 / 0.45)`, and `(NaN >> 16) & 255` is `0`, so a translucent value
+ * was measured as opaque black. `ant-daybreak`'s `textMuted` scored a perfect
+ * 21:1 while rendering at 3.36:1 — a live AA failure passing as a perfect
+ * score, which is worse than no guard at all.
+ *
+ * Throwing rather than compositing is deliberate. Compositing would need a
+ * backdrop this function does not have and cannot infer, and it would let the
+ * next translucent value into the theme set silently. Rejecting forces every
+ * theme to state its colors as measurable values, which makes the whole set
+ * auditable by construction instead of by vigilance.
+ *
+ * `#rgba` and `#rrggbbaa` are rejected too: an alpha channel is exactly the
+ * thing that needs a backdrop, and the luminance math below would read those
+ * extra digits as colour.
+ *
+ * @throws {TypeError} if either argument is not `#rgb` or `#rrggbb`
+ *
+ * @public
+ */
+export declare function contrastRatio(hexA: string, hexB: string): number;

package/dist/utils/contrast.js

@@ -0,0 +1 @@
+function p(c,i){let s=t=>{if(!/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(t))throw new TypeError(`contrastRatio() needs a hex color, got "${t}". Translucent and named colors cannot be measured without a backdrop \u2014 composite the value in the theme and state it as hex.`);let n=t.replace("#",""),m=n.length===3?n.split("").map(e=>e+e).join(""):n,r=Number.parseInt(m,16),o=[r>>16&255,r>>8&255,r&255].map(e=>{let a=e/255;return a<=.03928?a/12.92:Math.pow((a+.055)/1.055,2.4)});return .2126*o[0]+.7152*o[1]+.0722*o[2]},[l,u]=[s(c),s(i)].sort((t,n)=>n-t);return(l+.05)/(u+.05)}export{p as contrastRatio};

package/dist/utils/cssVars.cjs

@@ -0,0 +1,2 @@
+"use strict";var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var k=(n,t)=>{for(var r in t)i(n,r,{get:t[r],enumerable:!0})},b=(n,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of d(t))!$.call(n,e)&&e!==r&&i(n,e,{get:()=>t[e],enumerable:!(o=g(t,e))||o.enumerable});return n};var l=n=>b(i({},"__esModule",{value:!0}),n);var y={};k(y,{reducedMotionVarNames:()=>w,sectionsToCssVars:()=>j,varsToDeclarations:()=>x});module.exports=l(y);var c="skdx";function p(n){return n!==null&&typeof n=="object"}function a(n,t,r){for(let[o,e]of Object.entries(n))e!==void 0&&(p(e)?a(e,[...t,o],r):r[[...t,o].join("-")]=String(e));return r}function R(n){return n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function j(n){let t={};for(let[r,o]of n)if(o)for(let[e,u]of Object.entries(a(o,[],{}))){let s=R(e),f=s.startsWith(`${r}-`)||s===r?s:`${r}-${s}`;t[`--${c}-${f}`]=u}return t}function x(n,t="  "){return Object.entries(n).map(([r,o])=>`${t}${r}: ${o};`).join(`
+`)}function w(n){return Object.keys(n).filter(t=>t.startsWith(`--${c}-motion-duration-`)||t.startsWith(`--${c}-motion-stagger-`))}0&&(module.exports={reducedMotionVarNames,sectionsToCssVars,varsToDeclarations});

package/dist/utils/cssVars.d.cts

@@ -0,0 +1,37 @@
+/**
+ * The one place `--skdx-*` custom property *names* are derived from token
+ * object keys.
+ *
+ * Both halves of the token system emit CSS variables — `themeToCssVars` for
+ * the per-theme colors, `foundationToCssVars` for everything shared — and they
+ * have to agree byte-for-byte, because a consumer writing
+ * `var(--skdx-font-size-md)` cannot tell (and should not care) which half
+ * declared it. Two copies of this naming logic would drift the first time
+ * someone added a camelCase token, and the failure mode is silent: the
+ * variable simply never resolves.
+ *
+ * @internal
+ */
+/** A token group and the `--skdx-<prefix>-…` namespace its keys render under. @internal */
+export type CssVarSection = [prefix: string, tokens: Record<string, unknown> | undefined];
+/**
+ * Flattens token groups into a `{ '--skdx-…': value }` map.
+ *
+ * A section whose tokens are `undefined` contributes nothing — that is how an
+ * optional group (a theme's `typography` or `motion`) opts out without the caller
+ * needing a conditional.
+ *
+ * @internal
+ */
+export declare function sectionsToCssVars(sections: CssVarSection[]): Record<string, string>;
+/** Renders a var map as the indented declaration lines of a CSS rule block. @internal */
+export declare function varsToDeclarations(vars: Record<string, string>, indent?: string): string;
+/**
+ * The `--skdx-motion-*` variables that a `prefers-reduced-motion: reduce` block
+ * has to zero: every duration *and* every stagger. A stagger is a delay, so
+ * zeroing the durations without zeroing it would leave a still page that still
+ * arrives late.
+ *
+ * @internal
+ */
+export declare function reducedMotionVarNames(vars: Record<string, string>): string[];

package/dist/utils/cssVars.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The one place `--skdx-*` custom property *names* are derived from token
+ * object keys.
+ *
+ * Both halves of the token system emit CSS variables — `themeToCssVars` for
+ * the per-theme colors, `foundationToCssVars` for everything shared — and they
+ * have to agree byte-for-byte, because a consumer writing
+ * `var(--skdx-font-size-md)` cannot tell (and should not care) which half
+ * declared it. Two copies of this naming logic would drift the first time
+ * someone added a camelCase token, and the failure mode is silent: the
+ * variable simply never resolves.
+ *
+ * @internal
+ */
+/** A token group and the `--skdx-<prefix>-…` namespace its keys render under. @internal */
+export type CssVarSection = [prefix: string, tokens: Record<string, unknown> | undefined];
+/**
+ * Flattens token groups into a `{ '--skdx-…': value }` map.
+ *
+ * A section whose tokens are `undefined` contributes nothing — that is how an
+ * optional group (a theme's `typography` or `motion`) opts out without the caller
+ * needing a conditional.
+ *
+ * @internal
+ */
+export declare function sectionsToCssVars(sections: CssVarSection[]): Record<string, string>;
+/** Renders a var map as the indented declaration lines of a CSS rule block. @internal */
+export declare function varsToDeclarations(vars: Record<string, string>, indent?: string): string;
+/**
+ * The `--skdx-motion-*` variables that a `prefers-reduced-motion: reduce` block
+ * has to zero: every duration *and* every stagger. A stagger is a delay, so
+ * zeroing the durations without zeroing it would leave a still page that still
+ * arrives late.
+ *
+ * @internal
+ */
+export declare function reducedMotionVarNames(vars: Record<string, string>): string[];

package/dist/utils/cssVars.js

@@ -0,0 +1,2 @@
+var i="skdx";function f(n){return n!==null&&typeof n=="object"}function c(n,t,r){for(let[e,o]of Object.entries(n))o!==void 0&&(f(o)?c(o,[...t,e],r):r[[...t,e].join("-")]=String(o));return r}function g(n){return n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function d(n){let t={};for(let[r,e]of n)if(e)for(let[o,a]of Object.entries(c(e,[],{}))){let s=g(o),u=s.startsWith(`${r}-`)||s===r?s:`${r}-${s}`;t[`--${i}-${u}`]=a}return t}function $(n,t="  "){return Object.entries(n).map(([r,e])=>`${t}${r}: ${e};`).join(`
+`)}function k(n){return Object.keys(n).filter(t=>t.startsWith(`--${i}-motion-duration-`)||t.startsWith(`--${i}-motion-stagger-`))}export{k as reducedMotionVarNames,d as sectionsToCssVars,$ as varsToDeclarations};

package/dist/utils/foundation.cjs

@@ -0,0 +1,15 @@
+"use strict";var i=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var n in e)i(o,n,{get:e[n],enumerable:!0})},z=(o,e,n,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of v(e))!C.call(o,a)&&a!==n&&i(o,a,{get:()=>e[a],enumerable:!(m=$(e,a))||m.enumerable});return o};var M=o=>z(i({},"__esModule",{value:!0}),o);var V={};b(V,{borderWidth:()=>y,breakpoints:()=>F,coarsePointerToCssVars:()=>S,controls:()=>f,controlsCoarse:()=>w,focusRing:()=>h,foundationToCss:()=>I,foundationToCssVars:()=>T,motion:()=>x,opacity:()=>k,radii:()=>l,shadows:()=>g,space:()=>d,typography:()=>c,zIndex:()=>u});module.exports=M(V);var t=require("./cssVars.cjs"),p=require("./theme.cjs"),r="skdx",c={fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",fontFamilyMono:"'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem"},fontWeight:{regular:400,medium:500,semibold:600,bold:700},lineHeight:{tight:"1.25",snug:"1.43",normal:"1.5",relaxed:"1.75"},letterSpacing:{tight:"-0.015em",normal:"0em",wide:"0.025em",wider:"0.05em"}},d={1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem"},l={sm:"0.25rem",inner:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem",full:"9999px"},g={sm:`0 1px 2px 0 ${s(.05)}`,md:`0 4px 6px -1px ${s(.1)}, 0 2px 4px -2px ${s(.1)}`,lg:`0 10px 15px -3px ${s(.1)}, 0 4px 6px -4px ${s(.1)}`,overlay:`0 25px 50px -12px ${s(.25)}`};function s(o){return`rgb(var(--${r}-shadow-color) / calc(${o} * var(--${r}-shadow-strength)))`}var x=p.defaultMotion,u={base:0,dropdown:10,sticky:20,overlay:30,modal:35,popover:40,toast:50,max:9999},h={width:"2px",offset:"2px",offsetInset:"calc(-1 * var(--skdx-focus-ring-width))"},y={thin:"1px",thick:"2px",thicker:"4px"},f={control:{height:{sm:"1.875rem",md:"2.25rem",lg:"2.625rem",compact:"2rem"},padding:{sm:"0.625rem",md:`var(--${r}-space-3)`,lg:`var(--${r}-space-4)`},gap:{sm:`var(--${r}-space-1)`,md:`var(--${r}-space-2)`,lg:`var(--${r}-space-2)`}},iconSize:{sm:"1rem",md:"1.25rem",lg:"1.5rem"},indicatorSize:{sm:"1rem",md:"1.25rem",lg:"1.5rem"},item:{height:{sm:"1.75rem",md:"2.25rem",lg:"2.5rem"},gap:"2px"},overlay:{padding:`var(--${r}-space-1)`,radius:`var(--${r}-radius-lg)`,minWidth:"7.5rem"},field:{gap:`var(--${r}-space-1)`,labelGap:`var(--${r}-space-1)`},target:{min:"24px"}},w={control:{height:{sm:"2.25rem",md:"2.75rem",lg:"3rem",compact:"2.75rem"}},item:{height:{sm:"2.25rem",md:"2.75rem",lg:"3rem"}},target:{min:"44px"}},k={disabled:"0.5",scrim:"0.6"},F={sm:640,md:768,lg:1024,xl:1280};function T(){return(0,t.sectionsToCssVars)([["font",c],["space",d],["radius",l],["shadow",g],["motion",x],["z-index",u],["focus-ring",h],["border-width",y],["opacity",k],...R(f)])}function R(o){let e=n=>o[n];return[["control",e("control")],["icon-size",e("iconSize")],["indicator-size",e("indicatorSize")],["item",e("item")],["overlay",e("overlay")],["field",e("field")],["target",e("target")]]}function S(){return(0,t.sectionsToCssVars)(R(w))}function I(){let o=T(),e=(0,t.reducedMotionVarNames)(o).map(n=>`    ${n}: 0ms;`);return`:root {
+${(0,t.varsToDeclarations)(o)}
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+${e.join(`
+`)}
+  }
+}
+@media (pointer: coarse) {
+  :root {
+${(0,t.varsToDeclarations)(S(),"    ")}
+  }
+}
+`}0&&(module.exports={borderWidth,breakpoints,coarsePointerToCssVars,controls,controlsCoarse,focusRing,foundationToCss,foundationToCssVars,motion,opacity,radii,shadows,space,typography,zIndex});

package/dist/utils/foundation.d.cts

@@ -0,0 +1,300 @@
+import { type ThemeControls, type ThemeControlsCoarse, type ThemeMotion, type ThemeRadii, type ThemeShadows, type ThemeSpace, type ThemeTypography } from './theme.cjs';
+/**
+ * The type system: one font stack, one scale, one set of weights,
+ * line-heights and tracking steps, shared by every theme.
+ *
+ * A theme picks colors. It does not get to resize the type scale, because a
+ * layout that reflows when you switch brand is a layout that was never
+ * designed — it was designed once, against one scale, and every other brand
+ * was hoping. The two font *stacks* are the only part a theme can override,
+ * and only through {@link ThemeTypographyDeviation}, because impersonating a
+ * design language means impersonating its typeface.
+ *
+ * @public
+ */
+export declare const typography: ThemeTypography;
+/**
+ * The spacing scale — a 4px base with the usual gaps (no `7`, no `9`) so the
+ * steps stay memorable rather than exhaustive. Structural: gap and padding are
+ * rhythm, and rhythm is a property of the design system, not of the brand
+ * painted on top of it.
+ *
+ * @public
+ */
+export declare const space: ThemeSpace;
+/**
+ * The corner-radius scale. Shared for the same reason {@link space} is: a
+ * component's silhouette is part of the system's shape language, and a brand
+ * that rounds its corners differently is a different component library
+ * wearing the same class names.
+ *
+ * @public
+ */
+export declare const radii: ThemeRadii;
+/**
+ * The elevation scale — geometry only. Every value defers its color to
+ * `var(--skdx-shadow-color)` and scales its alpha by
+ * `var(--skdx-shadow-strength)`, both of which a theme supplies (see
+ * {@link ThemeShadowColor}).
+ *
+ * This split is the whole reason shadows can be shared at all. A shadow is one
+ * CSS string that welds geometry to a color, so before this every theme
+ * restated `0 4px 6px -1px` purely to be able to change `rgb(…)` at the end of
+ * it — 38 copies of the same three offsets, and no way to tell a deliberate
+ * elevation change from a color change.
+ *
+ * The base alphas below are the original `skanda-light` values, so a theme
+ * with `strength: '1'` renders exactly what it did before the split.
+ * Substitution is lazy: these live at `:root`, but `var(--skdx-shadow-color)`
+ * resolves against the element the shadow is finally *used* on, so the active
+ * `[data-skdx-theme]` block wins. `calc()` is legal in the alpha slot, and an
+ * alpha above 1 clamps rather than erroring — which is what keeps a
+ * high-strength dark theme from being a footgun.
+ *
+ * @public
+ */
+export declare const shadows: ThemeShadows;
+/**
+ * The shared animation timing — re-exported from {@link defaultMotion}, which
+ * remains the single source so that `themeToCssVars` can keep merging it under
+ * a theme's {@link Theme.motion} without importing this module.
+ *
+ * See {@link ThemeMotion} for why motion is theme-invariant.
+ *
+ * @public
+ */
+export declare const motion: Required<ThemeMotion>;
+/**
+ * A structural stacking-order scale for overlay-class UI (dropdowns, sticky
+ * headers, dialog/popover backdrops, floating content, toasts). Unlike the
+ * rest of the token system, z-index isn't a per-brand visual choice — every
+ * theme should stack the same way — so it's exported once here rather than
+ * duplicated into all 38 {@link Theme} objects. Consumers building an app
+ * with multiple concurrent overlay types (e.g. a `Select` opened from inside
+ * a `Dialog`, with a `Toast` on top of both) should coordinate their own
+ * z-indices against this scale instead of picking ad hoc numbers per
+ * component.
+ *
+ * @example
+ * ```css
+ * .dialog-overlay { z-index: var(--skdx-z-index-overlay); }
+ * .select-content { z-index: var(--skdx-z-index-popover); }
+ * .toast-viewport { z-index: var(--skdx-z-index-toast); }
+ * ```
+ *
+ * @public
+ */
+export declare const zIndex: {
+    readonly base: 0;
+    readonly dropdown: 10;
+    readonly sticky: 20;
+    /** The scrim behind a modal surface. */
+    readonly overlay: 30;
+    /** The modal surface itself — above its own scrim, below any popover opened from inside it. */
+    readonly modal: 35;
+    readonly popover: 40;
+    readonly toast: 50;
+    /**
+     * Escape hatch for the one thing that must sit above everything, e.g. a
+     * debug overlay or an "app is offline" banner. Deliberately far above
+     * `toast` so app code never has to guess a bigger number.
+     */
+    readonly max: 9999;
+};
+/** The shape of the {@link zIndex} scale — a map of named stacking layers (`sticky`, `overlay`, `popover`, `toast`, …) to their numeric `z-index`. @public */
+export type ZIndexScale = typeof zIndex;
+/**
+ * Structural focus-ring geometry (width/offset) — the *color* half of the
+ * focus-ring contract is themed per brand ({@link SemanticColors.focusRing}),
+ * but the ring's thickness and offset are a layout constant every theme
+ * should share, so they live here rather than being repeated as identical
+ * values across all 38 bundled themes.
+ *
+ * @example
+ * ```css
+ * :focus-visible {
+ *   outline: var(--skdx-focus-ring-width) solid var(--skdx-color-semantic-focus-ring);
+ *   outline-offset: var(--skdx-focus-ring-offset);
+ * }
+ * ```
+ *
+ * @public
+ */
+export declare const focusRing: {
+    readonly width: "2px";
+    readonly offset: "2px";
+    /**
+     * The offset a *clipping* container hands down to its children.
+     *
+     * An outline is painted outward from the border edge and is clipped by an
+     * ancestor's `overflow` exactly like any other overflowing paint — which
+     * sliced the ring off inside every control group that rounds its corners by
+     * clipping. Because `outline-offset` is read from a custom property, such a
+     * container sets this on itself and every descendant ring moves *inside* the
+     * border box, where nothing can reach it. One declaration per clipping
+     * container, no per-part focus rules.
+     *
+     * Negative by exactly the ring width, which lands it flush against the
+     * inside of the edge rather than floating in from it.
+     */
+    readonly offsetInset: "calc(-1 * var(--skdx-focus-ring-width))";
+};
+/** The shape of the {@link focusRing} geometry — the structural `width`/`offset` of the focus ring (its color is themed separately). @public */
+export type FocusRingScale = typeof focusRing;
+/**
+ * Border thicknesses. Structural for the same reason {@link focusRing}'s
+ * geometry is: a brand changes border *color* (see
+ * {@link SemanticColors.border}), not how many pixels thick a hairline is.
+ * Three steps only — a hairline, an emphasis weight (focus/selected/invalid
+ * outlines drawn without the focus ring), and a heavy weight for deliberate
+ * structural rules. There is no `0`: that's `border: none`, not a token.
+ *
+ * @example
+ * ```css
+ * .card { border: var(--skdx-border-width-thin) solid var(--skdx-color-semantic-border); }
+ * .card[data-invalid] { border-width: var(--skdx-border-width-thick); }
+ * ```
+ *
+ * @public
+ */
+export declare const borderWidth: {
+    readonly thin: "1px";
+    readonly thick: "2px";
+    readonly thicker: "4px";
+};
+/** The shape of the {@link borderWidth} scale — `thin`/`thick`/`thicker` border thicknesses. @public */
+export type BorderWidthScale = typeof borderWidth;
+/**
+ * The shared control geometry — heights, paddings, icon boxes, row heights and
+ * overlay insets. See {@link ThemeControls} for why this is structural rather
+ * than per-brand, and for the retuning escape hatch.
+ *
+ * The ladder is an even 6px step (30/36/42) and every rung sits inside the
+ * range the two reference libraries surveyed occupy. Several values are
+ * `var()` references rather than lengths on purpose: a control's inline
+ * padding *is* a step of {@link space}, and restating `0.75rem` here would let
+ * the two drift. The exceptions are the four numbers that are deliberately off
+ * a scale — `padding.sm` (10px), `height.compact` (32px), `item.gap` (2px) and
+ * `target.min` (24px) — each documented where it is declared.
+ *
+ * @public
+ */
+export declare const controls: ThemeControls;
+/**
+ * What a coarse pointer overrides. Emitted by {@link foundationToCss} as a
+ * `@media (pointer: coarse)` block; see {@link ThemeControlsCoarse} for why
+ * only hit sizes are listed.
+ *
+ * @public
+ */
+export declare const controlsCoarse: ThemeControlsCoarse;
+/**
+ * The two opacities the system actually has an opinion about. Deliberately
+ * *not* a 0–100 ramp: an arbitrary ramp invents decisions nobody made, while
+ * these two are real, repeated cross-component choices — how faded a disabled
+ * control is, and how much a modal scrim dims the page behind it.
+ *
+ * Scrim *color* is themed ({@link SemanticColors.overlay}); this is the
+ * structural strength of the dim, so every brand's scrim occludes equally.
+ *
+ * @example
+ * ```css
+ * [data-disabled] { opacity: var(--skdx-opacity-disabled); }
+ * .dialog-overlay { background: var(--skdx-color-semantic-overlay); opacity: var(--skdx-opacity-scrim); }
+ * ```
+ *
+ * @public
+ */
+export declare const opacity: {
+    readonly disabled: "0.5";
+    readonly scrim: "0.6";
+};
+/** The shape of the {@link opacity} scale — the `disabled` and `scrim` opacities. @public */
+export type OpacityScale = typeof opacity;
+/**
+ * Viewport widths, in pixels, as **TypeScript exports only** — deliberately
+ * not emitted as CSS custom properties by {@link foundationToCss}. A custom
+ * property cannot be used in a `@media` query's condition (`@media (min-width:
+ * var(--x))` is invalid CSS), so a `--skdx-breakpoint-*` variable would be a
+ * token that looks usable and isn't. Consume these from JS/TS, or from a
+ * build step that inlines the number into your own media queries.
+ *
+ * The components themselves are headless and ship no responsive behavior;
+ * this exists so consumers building a styled layer on top don't have to
+ * invent their own set.
+ *
+ * @example
+ * ```ts
+ * import { breakpoints } from '@skdx/tokens';
+ *
+ * const isDesktop = window.matchMedia(`(min-width: ${breakpoints.lg}px)`).matches;
+ * ```
+ *
+ * @public
+ */
+export declare const breakpoints: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+/** The shape of the {@link breakpoints} scale — named viewport widths in pixels. @public */
+export type BreakpointScale = typeof breakpoints;
+/**
+ * Flattens every shared token into a map of CSS custom property names to
+ * values — the foundation's counterpart to `themeToCssVars`. Together the two
+ * maps are the complete `--skdx-*` surface, and they never overlap.
+ *
+ * {@link breakpoints} is not included — see its docs for why a breakpoint
+ * can't be a CSS custom property.
+ *
+ * @returns A plain object keyed by CSS custom property name (e.g. `'--skdx-space-4'`), unprefixed by any selector.
+ *
+ * @public
+ */
+export declare function foundationToCssVars(): Record<string, string>;
+/**
+ * The control metrics a coarse pointer overrides, as a var map — the
+ * `@media (pointer: coarse)` counterpart to {@link foundationToCssVars}.
+ *
+ * Exported because `@skdx/skins` renders its own no-tokens fallback copy of
+ * both blocks from these functions rather than restating the values, which is
+ * the only thing that keeps the two in step.
+ *
+ * @public
+ */
+export declare function coarsePointerToCssVars(): Record<string, string>;
+/**
+ * Renders every shared token as a `:root`-scoped `--skdx-*` rule block — the
+ * theme-invariant counterpart to {@link themeToCss}. **Inject this exactly
+ * once**, then inject `themeToCss(theme)` per theme alongside it. Without it
+ * the type scale, spacing, radii, shadow geometry and motion are simply
+ * absent, because no theme declares them any more.
+ *
+ * Followed by a `@media (prefers-reduced-motion: reduce)` block that
+ * re-declares every `--skdx-motion-duration-*` and `--skdx-motion-stagger-*` as
+ * `0ms`. Components are headless and animate nothing themselves, so honoring
+ * the preference has to happen where the durations are *defined* rather than
+ * where they're used — this way a consumer who writes `transition-duration:
+ * var(--skdx-motion-duration-normal)` gets WCAG 2.3.3 behavior for free instead
+ * of having to remember the media query at every call site. The easing curve
+ * is left alone: it's a shape, not a duration, and is inert at `0ms`. A theme
+ * that retunes motion via `ThemeMotionDeviation` emits its own copy of this
+ * block, so the guarantee survives the escape hatch.
+ *
+ * Then a `@media (pointer: coarse)` block re-declaring the hit sizes from
+ * {@link controlsCoarse}, for the same reason: the preference has to be honored
+ * where the metric is *defined*, so a consumer who writes
+ * `block-size: var(--skdx-control-height-md)` gets a touch-sized control without
+ * having to remember the query.
+ *
+ * @example
+ * ```ts
+ * import { foundationToCss, themeToCss, themes } from '@skdx/tokens';
+ *
+ * const css = foundationToCss() + themes.map((t) => themeToCss(t)).join('');
+ * ```
+ *
+ * @public
+ */
+export declare function foundationToCss(): string;