@skdx/tokens 0.27.0 → 0.29.0

package/dist/utils/toCss.d.cts

@@ -1,92 +1,54 @@
+import { type CssVar } from './cssVars.cjs';
 import { type Theme } from './theme.cjs';
 /**
- * Flattens a {@link Theme} into a map of CSS custom property names to values,
- * e.g. `--skdx-color-primary-500`, `--skdx-shadow-color`.
- * The lower-level primitive behind {@link themeToCss} and {@link applyTheme};
- * reach for one of those two instead unless you need the raw variable map
- * (e.g. to diff two themes, or hand to a non-DOM renderer).
- *
- * **Colors only** (plus a theme's optional `typography`/`motion`). The type scale,
- * spacing, radii, shadow geometry and motion come from `foundationToCssVars()`
- * — see {@link Theme} for why. The two maps are disjoint, so a consumer can
- * merge them without a precedence rule.
- *
- * @returns A plain object keyed by CSS custom property name (e.g. `'--skdx-color-primary-500'`), unprefixed by any selector.
- *
+ * Flatten {@link Theme} into `{ '--skdx-…': value }` map. Colors only
+ * (plus optional `typography`/`motion`). @returns Unscoped CSS variables.
  * @example
  * ```ts
  * themeToCssVars(defaultTheme)
  * // => { '--skdx-color-primary-500': '#3d6eef', '--skdx-shadow-color': '2 6 23', … }
  * ```
- *
  * @public
  */
-export declare function themeToCssVars(theme: Theme): Record<string, string>;
-/** Options for {@link themeToCss} controlling how a theme's CSS rule block is generated. @public */
+export declare function themeToCssVars(theme: Theme): Record<CssVar, string>;
+/** Options for {@link themeToCss}. @public */
 export interface ThemeToCssOptions {
     /**
-     * CSS selector the variables are scoped to.
-     * Defaults to `[data-skdx-theme="<name>"]` so multiple themes can coexist.
+     * CSS selector for variable scope. @default `[data-skdx-theme="<name>"]`
+     * (allows multiple themes to coexist).
      */
     selector?: string;
 }
 /**
- * Renders a {@link Theme} as a CSS rule block ready to inject into a
- * `<style>` tag or write to a `.css` file — the build-time counterpart to
- * {@link applyTheme}'s runtime application.
+ * Render {@link Theme} as CSS rule block (build-time counterpart to {@link applyTheme}).
+ * Colors only; `foundationToCss()` required for complete stylesheet. Emits
+ * `@media (prefers-reduced-motion: reduce)` if theme retunes motion (re-declares
+ * as `0ms` to preserve WCAG 2.3.3 guarantee across higher specificity).
  *
- * **This is not a complete stylesheet on its own.** It emits the theme's
- * colors; `foundationToCss()` emits everything else and must be injected once
- * alongside it.
- *
- * A `@media (prefers-reduced-motion: reduce)` block follows only when the
- * theme retunes motion through `ThemeMotionDeviation` — otherwise the
- * foundation's own block already covers it, and repeating it 38 times was how
- * the old output got to 43% non-color. When it is emitted it re-declares every
- * `--skdx-motion-duration-*` and `--skdx-motion-stagger-*` as `0ms` at this
- * theme's selector, which is what keeps the WCAG 2.3.3 guarantee from being
- * lost to the deviation's higher specificity. The easing curve is left alone:
- * it's a shape, not a duration, and is inert at `0ms`.
- *
- * @param theme - The theme to render.
+ * @param theme - Theme to render.
  * @param options - See {@link ThemeToCssOptions}.
- * @returns A CSS string, e.g. `'[data-skdx-theme="skanda-light"] {\n  --skdx-color-primary-500: #3d6eef;\n  …\n}\n'`.
- *
+ * @returns CSS string.
  * @example
  * ```ts
  * import { foundationToCss, themeToCss, skandaLight } from '@skdx/tokens';
- * import fs from 'node:fs';
- *
- * fs.writeFileSync('skanda-light.css', foundationToCss() + themeToCss(skandaLight));
+ * fs.writeFileSync('skanda.css', foundationToCss() + themeToCss(skandaLight));
  * ```
- *
  * @public
  */
 export declare function themeToCss(theme: Theme, options?: ThemeToCssOptions): string;
 /**
- * Applies a {@link Theme} to an element at runtime by setting its CSS custom
- * properties directly (via `element.style.setProperty`) and stamping
- * `data-skdx-theme="<name>"` plus `data-skdx-mode="<light|dark>"` on it — the
- * mechanism behind live theme preview (e.g. a theme builder, or a runtime
- * brand switcher). Multiple themes can coexist by applying each to a
- * different subtree.
- *
- * Sets the theme's own variables only. The shared tokens are expected to be on
- * the document already (`foundationToCss()` at `:root`) and inherit down into
- * `element` — which is why applying a theme to a subtree re-colors it without
- * re-declaring the type scale for it.
- *
- * @param theme - The theme to apply.
- * @param element - Element to apply the theme to. @default document.documentElement
+ * Apply {@link Theme} at runtime via `element.style.setProperty`, stamping
+ * `data-skdx-theme`/`data-skdx-mode`. Theme-only variables; shared tokens
+ * inherit. Subtree re-colors without re-declaring type scale.
  *
+ * @param theme - Theme to apply.
+ * @param element - Target element. @default document.documentElement
  * @example
  * ```ts
- * import { applyTheme, midnightBrand } from '@skdx/tokens';
- *
- * applyTheme(midnightBrand); // whole page
- * applyTheme(midnightBrand, document.getElementById('preview')!); // scoped subtree
+ * import { applyTheme, midnightDark } from '@skdx/tokens';
+ * applyTheme(midnightDark); // whole page
+ * applyTheme(midnightDark, el); // scoped
  * ```
- *
  * @public
  */
 export declare function applyTheme(theme: Theme, element?: HTMLElement): void;

package/dist/utils/toCss.d.ts

@@ -1,92 +1,54 @@
+import { type CssVar } from './cssVars.js';
 import { type Theme } from './theme.js';
 /**
- * Flattens a {@link Theme} into a map of CSS custom property names to values,
- * e.g. `--skdx-color-primary-500`, `--skdx-shadow-color`.
- * The lower-level primitive behind {@link themeToCss} and {@link applyTheme};
- * reach for one of those two instead unless you need the raw variable map
- * (e.g. to diff two themes, or hand to a non-DOM renderer).
- *
- * **Colors only** (plus a theme's optional `typography`/`motion`). The type scale,
- * spacing, radii, shadow geometry and motion come from `foundationToCssVars()`
- * — see {@link Theme} for why. The two maps are disjoint, so a consumer can
- * merge them without a precedence rule.
- *
- * @returns A plain object keyed by CSS custom property name (e.g. `'--skdx-color-primary-500'`), unprefixed by any selector.
- *
+ * Flatten {@link Theme} into `{ '--skdx-…': value }` map. Colors only
+ * (plus optional `typography`/`motion`). @returns Unscoped CSS variables.
  * @example
  * ```ts
  * themeToCssVars(defaultTheme)
  * // => { '--skdx-color-primary-500': '#3d6eef', '--skdx-shadow-color': '2 6 23', … }
  * ```
- *
  * @public
  */
-export declare function themeToCssVars(theme: Theme): Record<string, string>;
-/** Options for {@link themeToCss} controlling how a theme's CSS rule block is generated. @public */
+export declare function themeToCssVars(theme: Theme): Record<CssVar, string>;
+/** Options for {@link themeToCss}. @public */
 export interface ThemeToCssOptions {
     /**
-     * CSS selector the variables are scoped to.
-     * Defaults to `[data-skdx-theme="<name>"]` so multiple themes can coexist.
+     * CSS selector for variable scope. @default `[data-skdx-theme="<name>"]`
+     * (allows multiple themes to coexist).
      */
     selector?: string;
 }
 /**
- * Renders a {@link Theme} as a CSS rule block ready to inject into a
- * `<style>` tag or write to a `.css` file — the build-time counterpart to
- * {@link applyTheme}'s runtime application.
+ * Render {@link Theme} as CSS rule block (build-time counterpart to {@link applyTheme}).
+ * Colors only; `foundationToCss()` required for complete stylesheet. Emits
+ * `@media (prefers-reduced-motion: reduce)` if theme retunes motion (re-declares
+ * as `0ms` to preserve WCAG 2.3.3 guarantee across higher specificity).
  *
- * **This is not a complete stylesheet on its own.** It emits the theme's
- * colors; `foundationToCss()` emits everything else and must be injected once
- * alongside it.
- *
- * A `@media (prefers-reduced-motion: reduce)` block follows only when the
- * theme retunes motion through `ThemeMotionDeviation` — otherwise the
- * foundation's own block already covers it, and repeating it 38 times was how
- * the old output got to 43% non-color. When it is emitted it re-declares every
- * `--skdx-motion-duration-*` and `--skdx-motion-stagger-*` as `0ms` at this
- * theme's selector, which is what keeps the WCAG 2.3.3 guarantee from being
- * lost to the deviation's higher specificity. The easing curve is left alone:
- * it's a shape, not a duration, and is inert at `0ms`.
- *
- * @param theme - The theme to render.
+ * @param theme - Theme to render.
  * @param options - See {@link ThemeToCssOptions}.
- * @returns A CSS string, e.g. `'[data-skdx-theme="skanda-light"] {\n  --skdx-color-primary-500: #3d6eef;\n  …\n}\n'`.
- *
+ * @returns CSS string.
  * @example
  * ```ts
  * import { foundationToCss, themeToCss, skandaLight } from '@skdx/tokens';
- * import fs from 'node:fs';
- *
- * fs.writeFileSync('skanda-light.css', foundationToCss() + themeToCss(skandaLight));
+ * fs.writeFileSync('skanda.css', foundationToCss() + themeToCss(skandaLight));
  * ```
- *
  * @public
  */
 export declare function themeToCss(theme: Theme, options?: ThemeToCssOptions): string;
 /**
- * Applies a {@link Theme} to an element at runtime by setting its CSS custom
- * properties directly (via `element.style.setProperty`) and stamping
- * `data-skdx-theme="<name>"` plus `data-skdx-mode="<light|dark>"` on it — the
- * mechanism behind live theme preview (e.g. a theme builder, or a runtime
- * brand switcher). Multiple themes can coexist by applying each to a
- * different subtree.
- *
- * Sets the theme's own variables only. The shared tokens are expected to be on
- * the document already (`foundationToCss()` at `:root`) and inherit down into
- * `element` — which is why applying a theme to a subtree re-colors it without
- * re-declaring the type scale for it.
- *
- * @param theme - The theme to apply.
- * @param element - Element to apply the theme to. @default document.documentElement
+ * Apply {@link Theme} at runtime via `element.style.setProperty`, stamping
+ * `data-skdx-theme`/`data-skdx-mode`. Theme-only variables; shared tokens
+ * inherit. Subtree re-colors without re-declaring type scale.
  *
+ * @param theme - Theme to apply.
+ * @param element - Target element. @default document.documentElement
  * @example
  * ```ts
- * import { applyTheme, midnightBrand } from '@skdx/tokens';
- *
- * applyTheme(midnightBrand); // whole page
- * applyTheme(midnightBrand, document.getElementById('preview')!); // scoped subtree
+ * import { applyTheme, midnightDark } from '@skdx/tokens';
+ * applyTheme(midnightDark); // whole page
+ * applyTheme(midnightDark, el); // scoped
  * ```
- *
  * @public
  */
 export declare function applyTheme(theme: Theme, element?: HTMLElement): void;

package/dist/utils/toCss.js

@@ -1,10 +1,10 @@
-import{reducedMotionVarNames as d,sectionsToCssVars as m,varsToDeclarations as u}from"./cssVars.js";import{defaultMotion as p}from"./theme.js";function i(n){return m([["color",n.colors],["shadow",n.shadow],["font",n.typography],["motion",n.motion?{...p,...n.motion}:void 0]])}function l(n,o={}){let e=o.selector??`[data-skdx-theme="${n.name}"]`,s=i(n),t=`${e} {
-${u(s)}
+import{reducedMotionVarNames as m,sectionsToCssVars as d,varsToDeclarations as p}from"./cssVars.js";import{defaultMotion as u}from"./theme.js";function i(o){return d([["color",o.colors],["shadow",o.shadow],["font",o.typography],["motion",o.motion?{...u,...o.motion}:void 0]])}function l(o,e={}){let t=e.selector??`[data-skdx-theme="${o.name}"]`,s=i(o),n=`${t} {
+${p(s)}
 }
-`,r=d(s);if(r.length===0)return t;let a=r.map(c=>`    ${c}: 0ms;`);return t+`@media (prefers-reduced-motion: reduce) {
-  ${e} {
+`,r=m(s);if(r.length===0)return n;let a=r.map(c=>`    ${c}: 0ms;`);return n+`@media (prefers-reduced-motion: reduce) {
+  ${t} {
 ${a.join(`
 `)}
   }
 }
-`}function k(n,o=document.documentElement){let e=i(n);for(let[s,t]of Object.entries(e))o.style.setProperty(s,t);o.setAttribute("data-skdx-theme",n.name),o.setAttribute("data-skdx-mode",n.mode)}export{k as applyTheme,l as themeToCss,i as themeToCssVars};
+`}function C(o,e=document.documentElement){let t=i(o);for(let[s,n]of Object.entries(t))e.style.setProperty(s,n);e.setAttribute("data-skdx-theme",o.name),e.setAttribute("data-skdx-mode",o.mode)}export{C as applyTheme,l as themeToCss,i as themeToCssVars};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skdx/tokens",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "description": "Theme contract and design tokens for the SkandaDX design system",
   "license": "MIT",
   "publishConfig": {
@@ -17,7 +17,7 @@
   },
   "type": "module",
   "engines": {
-    "node": ">=18.18.0"
+    "node": ">=24.15.0"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -41,6 +41,7 @@
     "./css": "./dist/tokens.css",
     "./foundation.css": "./dist/foundation.css",
     "./themes.css": "./dist/themes.css",
+    "./tokens.dtcg.json": "./dist/tokens.dtcg.json",
     "./package.json": "./package.json"
   },
   "sideEffects": [
@@ -60,9 +61,9 @@
     "vitest": "^4.1.10"
   },
   "scripts": {
-    "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsup && tsc --emitDeclarationOnly -p tsconfig.build.json && node ../../scripts/declarations-cjs.mjs && node scripts/build-css.mjs && node ../../scripts/minify-css.mjs dist",
+    "lint": "eslint . --cache --cache-location node_modules/.cache/eslint/",
+    "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsup && tsc --emitDeclarationOnly -p tsconfig.build.json && node ../../scripts/declarations-cjs.mjs && node scripts/build-css.mjs && node scripts/build-dtcg.mjs && node ../../scripts/minify-css.mjs dist",
     "typecheck": "tsc --noEmit --incremental --tsBuildInfoFile node_modules/.cache/tsc/typecheck.tsbuildinfo",
-    "export:dtcg": "node scripts/export-dtcg.mjs",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"

package/dist/themes/MaterialBrand.d.cts

@@ -1,3 +0,0 @@
-import type { Theme } from '../utils/theme.cjs';
-/** Material Design 3 inspired: tonal purple, generous shape scale, emphasized easing. @public */
-export declare const materialBrand: Theme;

package/dist/themes/MaterialBrand.d.ts

@@ -1,3 +0,0 @@
-import type { Theme } from '../utils/theme.js';
-/** Material Design 3 inspired: tonal purple, generous shape scale, emphasized easing. @public */
-export declare const materialBrand: Theme;

package/dist/themes/MidnightBrand.cjs

@@ -1 +0,0 @@
-"use strict";var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var p=(e,r)=>{for(var m in r)o(e,m,{get:r[m],enumerable:!0})},u=(e,r,m,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of i(r))!h.call(e,a)&&a!==m&&o(e,a,{get:()=>r[a],enumerable:!(n=d(r,a))||n.enumerable});return e};var c=e=>u(o({},"__esModule",{value:!0}),e);var l={};p(l,{midnightBrand:()=>g});module.exports=c(l);var t=require("./createBrandTheme.cjs"),g=(0,t.createBrandTheme)({name:"midnight-brand",mode:"dark",primaryHue:271,primaryChroma:91,neutralHue:265,neutralChroma:25,override:{shadow:{color:"0 0 0",strength:"5.2"}}});0&&(module.exports={midnightBrand});

package/dist/themes/MidnightBrand.d.cts

@@ -1,11 +0,0 @@
-/**
- * Midnight purple dark theme: violet actions on deep indigo surfaces.
- *
- * The first brand generated from a `BrandSeed` rather than hand-written — its
- * ramps and semantic roles come out of {@link createBrandTheme}, which drives
- * every WCAG AA pair to threshold instead of leaving it to review. Only the
- * dark shadow stack is hand-kept, since shadow alpha isn't derived from hue.
- *
- * @public
- */
-export declare const midnightBrand: import("../index.cjs").Theme;

package/dist/themes/MidnightBrand.d.ts

@@ -1,11 +0,0 @@
-/**
- * Midnight purple dark theme: violet actions on deep indigo surfaces.
- *
- * The first brand generated from a `BrandSeed` rather than hand-written — its
- * ramps and semantic roles come out of {@link createBrandTheme}, which drives
- * every WCAG AA pair to threshold instead of leaving it to review. Only the
- * dark shadow stack is hand-kept, since shadow alpha isn't derived from hue.
- *
- * @public
- */
-export declare const midnightBrand: import("../index.js").Theme;