@skdx/tokens 0.28.0 → 0.30.0

package/dist/utils/theme.d.ts

@@ -1,6 +1,3 @@
-/**
- * A theme is a plain JSON-serializable object; `themeToCss()` turns it into CSS custom properties.
- */
 /**
  * The two resolved color modes a theme renders in (resolved via `prefers-color-scheme`).
  * @public
@@ -64,11 +61,7 @@ export interface ThemeColors {
     /** Role-based colors from scales; components prefer these over raw steps. */
     semantic: SemanticColors;
 }
-/**
- * Font stacks, type scale, weight/line-height tokens, rendered as `--skdx-font-*`.
- * Theme-invariant except the two font stacks (see {@link ThemeTypographyDeviation}).
- * @public
- */
+/** Font stacks, type scale, weight/line-height tokens, rendered as `--skdx-font-*`; theme-invariant except the two font stacks (see {@link ThemeTypographyDeviation}). @public */
 export interface ThemeTypography {
     /** Body font stack. */
     fontFamily: string;
@@ -106,10 +99,7 @@ export interface ThemeTypography {
         wider: string;
     };
 }
-/**
- * Spacing scale (margin, padding, gap), rendered as `--skdx-space-<step>`.
- * Lives once in `foundation.ts` (see {@link space}). @public
- */
+/** Spacing scale (margin, padding, gap), rendered as `--skdx-space-<step>`; lives once in `foundation.ts` (see {@link space}). @public */
 export interface ThemeSpace {
     '1': string;
     '2': string;
@@ -122,10 +112,7 @@ export interface ThemeSpace {
     '12': string;
     '16': string;
 }
-/**
- * Border-radius scale, rendered as `--skdx-radius-<size>`.
- * Lives once in `foundation.ts` (see {@link radii}). @public
- */
+/** Border-radius scale, rendered as `--skdx-radius-<size>`; lives once in `foundation.ts` (see {@link radii}). @public */
 export interface ThemeRadii {
     sm: string;
     /** Nested box radius (relationship between `sm` and `md`, not a size step). */
@@ -136,10 +123,7 @@ export interface ThemeRadii {
     /** Fully round, for pills and circular avatars. */
     full: string;
 }
-/**
- * Control geometry: metrics Button, Input and Select snap to.
- * Lives once in `foundation.ts` (see {@link controls}). @public
- */
+/** Control geometry: metrics Button, Input and Select snap to, living once in `foundation.ts` (see {@link controls}). @public */
 export interface ThemeControls {
     /** Vertical rhythm, inline padding and icon gap. */
     control: {
@@ -198,10 +182,7 @@ export interface ThemeControls {
         min: string;
     };
 }
-/**
- * {@link ThemeControls} overrides for coarse pointers. Only hit-target sizes;
- * padding, gaps, radii, icons unchanged. @public
- */
+/** {@link ThemeControls} overrides for coarse pointers — only hit-target sizes; padding, gaps, radii, icons unchanged. @public */
 export interface ThemeControlsCoarse {
     control: {
         height: {
@@ -222,11 +203,7 @@ export interface ThemeControlsCoarse {
         min: string;
     };
 }
-/**
- * Box-shadow scale, rendered as `--skdx-shadow-<size>`. Geometry lives once
- * in `foundation.ts` (see {@link shadows}); color defers to {@link ThemeShadowColor}.
- * @public
- */
+/** Box-shadow scale, rendered as `--skdx-shadow-<size>`; geometry lives once in `foundation.ts` (see {@link shadows}), color defers to {@link ThemeShadowColor}. @public */
 export interface ThemeShadows {
     sm: string;
     md: string;
@@ -234,40 +211,20 @@ export interface ThemeShadows {
     /** Elevated overlay surfaces (dialogs, popovers, dropdowns). */
     overlay: string;
 }
-/**
- * Shadow color: the only part of {@link shadows} a theme owns;
- * geometry lives in the base.  @public
- */
+/** Shadow color: the only part of {@link shadows} a theme owns; geometry lives in the base. @public */
 export interface ThemeShadowColor {
     /** sRGB channels (e.g. `'2 6 23'`), substituted into `rgb(<color> / <alpha>)`. */
     color: string;
-    /**
-     * Multiplier for base alphas in {@link shadows}. `'1'` for light themes;
-     * dark themes ~`'5'` (shadow must work on dark surface).
-     */
+    /** Multiplier for base alphas in {@link shadows}: `'1'` for light themes, ~`'5'` for dark. */
     strength: string;
 }
-/**
- * Font stacks a theme may override (only part of {@link typography} not fixed).
- * Only `fluent` and `material-you` declare it. @public
- */
+/** Font stacks a theme may override — the only part of {@link typography} not fixed; only `fluent` and `material-you` declare it. @public */
 export type ThemeTypographyDeviation = Partial<Pick<ThemeTypography, 'fontFamily' | 'fontFamilyMono'>>;
-/**
- * Motion tokens a theme may retune. Optional ones (exit, staggers) stay uniform.
- * Only `material-you`, `fluent` and `ant-daybreak` declare. @public
- */
+/** Motion tokens a theme may retune; only `material-you`, `fluent` and `ant-daybreak` declare. @public */
 export type ThemeMotionDeviation = Partial<Pick<ThemeMotion, 'durationFast' | 'durationNormal' | 'durationSlow' | 'easing'>>;
-/**
- * Animation durations, easing curves, and staggers rendered as `--skdx-motion-*`.
- * Theme-invariant by default (timing shift reads as bug, affects vestibular users).
- * Lives once in `foundation.ts` (see {@link motion}). `materialBrand`, `antBrand`,
- * `fluentBrand` retune via {@link ThemeMotionDeviation}. @public
- */
+/** Animation durations, easing curves, and staggers rendered as `--skdx-motion-*`; theme-invariant by default, lives once in `foundation.ts` (see {@link motion}). @public */
 export interface ThemeMotion {
-    /**
-     * Zero for state changes that feel like data, not animation (value updates).
-     * @default '0ms'
-     */
+    /** Zero for state changes that feel like data, not animation (value updates). @default '0ms' */
     durationInstant?: string;
     /** Hover/focus/press micro-interactions (direct manipulation). */
     durationFast: string;
@@ -277,43 +234,20 @@ export interface ThemeMotion {
     durationSlow: string;
     /** Default curve: fast start, soft landing (for entering/opening). */
     easing: string;
-    /**
-     * Mirror of {@link ThemeMotion.easing} (slow start, accelerates). For exits.
-     * @default 'cubic-bezier(0.4, 0, 1, 1)'
-     */
+    /** Mirror of {@link ThemeMotion.easing} (slow start, accelerates), for exits. @default 'cubic-bezier(0.4, 0, 1, 1)' */
     easingExit?: string;
-    /**
-     * Symmetric ease-in-out, no overshoot (in-place: color swaps, toggles).
-     * @default 'cubic-bezier(0.4, 0, 0.2, 1)'
-     */
+    /** Symmetric ease-in-out, no overshoot (in-place: color swaps, toggles). @default 'cubic-bezier(0.4, 0, 0.2, 1)' */
     easingSteady?: string;
-    /**
-     * Constant rate (indeterminate loops: spinner, shimmer).
-     * @default 'linear'
-     */
+    /** Constant rate for indeterminate loops (spinner, shimmer). @default 'linear' */
     easingLinear?: string;
-    /**
-     * Per-item sweep delay (reads as one gesture for large/unbounded lists).
-     * @default '4ms'
-     */
+    /** Per-item sweep delay, reads as one gesture for large/unbounded lists. @default '4ms' */
     staggerTight?: string;
-    /**
-     * Per-item sequence delay (distinct arrival, short/bounded lists only).
-     * @default '40ms'
-     */
+    /** Per-item sequence delay, for distinct arrival on short/bounded lists only. @default '40ms' */
     staggerLoose?: string;
 }
-/**
- * Default motion values; merged under a theme's `motion` so every theme
- * emits the complete `--skdx-motion-*` surface.
- */
+/** Default motion values, merged under a theme's `motion` so every theme emits the complete `--skdx-motion-*` surface. */
 export declare const defaultMotion: Required<ThemeMotion>;
-/**
- * Complete theme object flowing through {@link createTheme}, {@link themeToCss},
- * and {@link applyTheme}. Contains only colors; type scale, spacing, radii,
- * shadow, motion are theme-invariant (see `foundation.ts`). `typography` and
- * `motion` are escape hatches for impersonating design languages. @public
- */
+/** Complete theme object flowing through {@link createTheme}, {@link themeToCss} and {@link applyTheme}; contains only colors, since the rest is theme-invariant (see `foundation.ts`). @public */
 export interface Theme {
     /** Unique theme name (e.g. `"skanda-light"`), used as `[data-skdx-theme="..."]` selector. */
     name: string;
@@ -328,8 +262,7 @@ export interface Theme {
     motion?: ThemeMotionDeviation;
 }
 /**
- * Partial {@link Theme} describing only what a brand changes. Passed to
- * {@link createTheme}, which deep-merges onto a base theme.
+ * Partial {@link Theme} describing only what a brand changes, passed to {@link createTheme} which deep-merges it onto a base theme.
  * @example
  * ```ts
  * const override: ThemeOverride = {
@@ -339,8 +272,8 @@ export interface Theme {
  * ```
  * @public
  */
-export type ThemeOverride = {
-    [K in keyof Theme]?: Theme[K] extends object ? {
-        [K2 in keyof Theme[K]]?: Theme[K][K2] extends object ? Partial<Theme[K][K2]> : Theme[K][K2];
-    } : Theme[K];
+export type ThemeOverride = DeepPartial<Theme>;
+type DeepPartial<T> = {
+    [K in keyof T]?: (T[K] extends object ? DeepPartial<T[K]> : T[K]) | undefined;
 };
+export {};

package/dist/utils/toCss.cjs

@@ -1,10 +1,10 @@
-"use strict";var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var l=(n,o)=>{for(var s in o)i(n,s,{get:o[s],enumerable:!0})},k=(n,o,s,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of f(o))!T.call(n,e)&&e!==s&&i(n,e,{get:()=>o[e],enumerable:!(t=p(o,e))||t.enumerable});return n};var g=n=>k(i({},"__esModule",{value:!0}),n);var x={};l(x,{applyTheme:()=>h,themeToCss:()=>w,themeToCssVars:()=>a});module.exports=g(x);var r=require("./cssVars.cjs"),d=require("./theme.cjs");function a(n){return(0,r.sectionsToCssVars)([["color",n.colors],["shadow",n.shadow],["font",n.typography],["motion",n.motion?{...d.defaultMotion,...n.motion}:void 0]])}function w(n,o={}){let s=o.selector??`[data-skdx-theme="${n.name}"]`,t=a(n),e=`${s} {
-${(0,r.varsToDeclarations)(t)}
+"use strict";var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var l=(o,e)=>{for(var s in e)i(o,s,{get:e[s],enumerable:!0})},C=(o,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!T.call(o,t)&&t!==s&&i(o,t,{get:()=>e[t],enumerable:!(n=u(e,t))||n.enumerable});return o};var h=o=>C(i({},"__esModule",{value:!0}),o);var V={};l(V,{applyTheme:()=>x,themeToCss:()=>y,themeToCssVars:()=>a});module.exports=h(V);var r=require("./cssVars.cjs"),m=require("./theme.cjs");function a(o){return(0,r.sectionsToCssVars)([["color",o.colors],["shadow",o.shadow],["font",o.typography],["motion",o.motion?{...m.defaultMotion,...o.motion}:void 0]])}function y(o,e={}){let s=e.selector??`[data-skdx-theme="${o.name}"]`,n=a(o),t=`${s} {
+${(0,r.varsToDeclarations)(n)}
 }
-`,c=(0,r.reducedMotionVarNames)(t);if(c.length===0)return e;let m=c.map(u=>`    ${u}: 0ms;`);return e+`@media (prefers-reduced-motion: reduce) {
+`,c=(0,r.reducedMotionVarNames)(n);if(c.length===0)return t;let d=c.map(p=>`    ${p}: 0ms;`);return t+`@media (prefers-reduced-motion: reduce) {
   ${s} {
-${m.join(`
+${d.join(`
 `)}
   }
 }
-`}function h(n,o=document.documentElement){let s=a(n);for(let[t,e]of Object.entries(s))o.style.setProperty(t,e);o.setAttribute("data-skdx-theme",n.name),o.setAttribute("data-skdx-mode",n.mode)}0&&(module.exports={applyTheme,themeToCss,themeToCssVars});
+`}function x(o,e=document.documentElement){let s=a(o);for(let[n,t]of Object.entries(s))e.style.setProperty(n,t);e.setAttribute("data-skdx-theme",o.name),e.setAttribute("data-skdx-mode",o.mode)}0&&(module.exports={applyTheme,themeToCss,themeToCssVars});

package/dist/utils/toCss.d.cts

@@ -1,3 +1,4 @@
+import { type CssVar } from './cssVars.cjs';
 import { type Theme } from './theme.cjs';
 /**
  * Flatten {@link Theme} into `{ '--skdx-…': value }` map. Colors only
@@ -9,7 +10,7 @@ import { type Theme } from './theme.cjs';
  * ```
  * @public
  */
-export declare function themeToCssVars(theme: Theme): Record<string, string>;
+export declare function themeToCssVars(theme: Theme): Record<CssVar, string>;
 /** Options for {@link themeToCss}. @public */
 export interface ThemeToCssOptions {
     /**
@@ -44,9 +45,9 @@ export declare function themeToCss(theme: Theme, options?: ThemeToCssOptions): s
  * @param element - Target element. @default document.documentElement
  * @example
  * ```ts
- * import { applyTheme, midnightBrand } from '@skdx/tokens';
- * applyTheme(midnightBrand); // whole page
- * applyTheme(midnightBrand, el); // scoped
+ * import { applyTheme, midnightDark } from '@skdx/tokens';
+ * applyTheme(midnightDark); // whole page
+ * applyTheme(midnightDark, el); // scoped
  * ```
  * @public
  */

package/dist/utils/toCss.d.ts

@@ -1,3 +1,4 @@
+import { type CssVar } from './cssVars.js';
 import { type Theme } from './theme.js';
 /**
  * Flatten {@link Theme} into `{ '--skdx-…': value }` map. Colors only
@@ -9,7 +10,7 @@ import { type Theme } from './theme.js';
  * ```
  * @public
  */
-export declare function themeToCssVars(theme: Theme): Record<string, string>;
+export declare function themeToCssVars(theme: Theme): Record<CssVar, string>;
 /** Options for {@link themeToCss}. @public */
 export interface ThemeToCssOptions {
     /**
@@ -44,9 +45,9 @@ export declare function themeToCss(theme: Theme, options?: ThemeToCssOptions): s
  * @param element - Target element. @default document.documentElement
  * @example
  * ```ts
- * import { applyTheme, midnightBrand } from '@skdx/tokens';
- * applyTheme(midnightBrand); // whole page
- * applyTheme(midnightBrand, el); // scoped
+ * import { applyTheme, midnightDark } from '@skdx/tokens';
+ * applyTheme(midnightDark); // whole page
+ * applyTheme(midnightDark, el); // scoped
  * ```
  * @public
  */

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.28.0",
+  "version": "0.30.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/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,8 +0,0 @@
-/**
- * Midnight purple dark theme: violet actions on deep indigo surfaces.
- * Generated from `BrandSeed` via {@link createBrandTheme}, which drives
- * every WCAG AA pair to threshold. Shadow stack is hand-tuned.
- *
- * @public
- */
-export declare const midnightBrand: import("../index.cjs").Theme;

package/dist/themes/MidnightBrand.d.ts

@@ -1,8 +0,0 @@
-/**
- * Midnight purple dark theme: violet actions on deep indigo surfaces.
- * Generated from `BrandSeed` via {@link createBrandTheme}, which drives
- * every WCAG AA pair to threshold. Shadow stack is hand-tuned.
- *
- * @public
- */
-export declare const midnightBrand: import("../index.js").Theme;