@chayns-ui/tokens 0.4.0 → 0.6.0

package/README.md

@@ -1,3 +1,25 @@
 # @chayns-ui/tokens
 
-Resolved, generated chayns UI Baseline and Patch CSS. This package has no JavaScript runtime.
+Resolved chayns UI Baseline and Patch CSS plus a framework-independent global theme API.
+
+```ts
+import { applyTheme } from '@chayns-ui/tokens';
+import '@chayns-ui/tokens/baseline.css';
+import '@chayns-ui/tokens/patch.css';
+
+applyTheme({
+  colorMode: 'dark',
+  density: 'm',
+  accessibilityMode: 'high-contrast',
+});
+```
+
+`applyTheme` adds the selected global classes to `document.documentElement`. Calls are partial:
+omitted options retain their current setting. Supported values are:
+
+* `colorMode`: `light` or `dark`
+* `density`: `s`, `m`, or `l`
+* `accessibilityMode`: `standard`, `high-contrast`, or `color-deficiency`
+
+A freely configurable primary/accent color is intentionally not part of this API until its required
+token derivation and contrast-calibration rules are specified.

package/dist/baseline.css

@@ -61,6 +61,16 @@
   --fs-meta: calc(13 * var(--u));
   --fs-caption: calc(12 * var(--u));
   --fs-micro: calc(11 * var(--u));
+  --grey-000: #ffffff;
+  --grey-001: #f7f7f7;
+  --grey-002: #e5e5e5;
+  --grey-003: #bfbfbf;
+  --grey-004: #999999;
+  --grey-005: #7f7f7f;
+  --grey-006: #666666;
+  --grey-007: #3f3f3f;
+  --grey-008: #191919;
+  --grey-009: #000000;
   --page: #f4f6f6;
   --surface: #ffffff;
   --surface-2: #fbfcfc;
@@ -78,7 +88,15 @@
   --accent-active: #0a4e5b;
   --on-accent: #ffffff;
   --accent-rgb: 15, 109, 126;
+  --on-accent-rgb: 255, 255, 255;
+  --accent-100: #eef7f8;
+  --accent-200: #d3e7eb;
   --accent-300: #a8c3ca;
+  --accent-400: #629fac;
+  --accent-500: #3f93a1;
+  --accent-600: #278090;
+  --accent-700: #0d6271;
+  --accent-800: #0c5765;
   --tint: #eef7f8;
   --toggle-bg: #e9eded;
   --danger: #a31919;
@@ -103,6 +121,16 @@
 }
 
 .chayns-theme--dark {
+  --grey-000: #000000;
+  --grey-001: #070707;
+  --grey-002: #191919;
+  --grey-003: #3f3f3f;
+  --grey-004: #666666;
+  --grey-005: #7f7f7f;
+  --grey-006: #999999;
+  --grey-007: #bfbfbf;
+  --grey-008: #e5e5e5;
+  --grey-009: #ffffff;
   --page: #0e171b;
   --surface: #16242a;
   --surface-2: #101b20;
@@ -120,7 +148,15 @@
   --accent-active: #3eaec4;
   --on-accent: #0d161a;
   --accent-rgb: 85, 191, 212;
+  --on-accent-rgb: 14, 23, 27;
+  --accent-100: #e2f7fa;
+  --accent-200: #caeff3;
   --accent-300: #aee4ed;
+  --accent-400: #90d8e5;
+  --accent-500: #72cbdd;
+  --accent-600: #55bfd4;
+  --accent-700: #3eaec4;
+  --accent-800: #2f90a3;
   --tint: #1a3138;
   --toggle-bg: #22333a;
   --danger: #ffb3ae;

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export declare const COLOR_MODES: readonly ["light", "dark"];
+export declare const DENSITIES: readonly ["s", "m", "l"];
+export declare const ACCESSIBILITY_MODES: readonly ["standard", "high-contrast", "color-deficiency"];
+export type ColorMode = (typeof COLOR_MODES)[number];
+export type Density = (typeof DENSITIES)[number];
+export type AccessibilityMode = (typeof ACCESSIBILITY_MODES)[number];
+export interface ApplyThemeOptions {
+    accessibilityMode?: AccessibilityMode;
+    colorMode?: ColorMode;
+    density?: Density;
+}
+/**
+ * Applies global chayns UI theme classes to the document root.
+ * Omitted options retain their current setting.
+ */
+export declare function applyTheme(options: ApplyThemeOptions): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,4BAA6B,CAAC;AACtD,eAAO,MAAM,SAAS,0BAA2B,CAAC;AAClD,eAAO,MAAM,mBAAmB,4DAA6D,CAAC;AAE9F,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACrD,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AACjD,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAErE,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA6BD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAoC3D"}

package/dist/index.js

@@ -0,0 +1,49 @@
+//#region src/index.ts
+var COLOR_MODES = ["light", "dark"];
+var DENSITIES = [
+	"s",
+	"m",
+	"l"
+];
+var ACCESSIBILITY_MODES = [
+	"standard",
+	"high-contrast",
+	"color-deficiency"
+];
+var COLOR_MODE_CLASSES = COLOR_MODES.map((mode) => `chayns-theme--${mode}`);
+var DENSITY_CLASSES = DENSITIES.map((density) => `chayns-density--${density}`);
+var ACCESSIBILITY_CLASSES = ["chayns-contrast--high", "chayns-theme--color-deficiency"];
+function assertSupportedOption(name, value, supportedValues) {
+	if (typeof value !== "string" || !supportedValues.some((supportedValue) => supportedValue === value)) throw new TypeError(`${name} must be one of: ${supportedValues.map((supportedValue) => `'${supportedValue}'`).join(", ")}.`);
+}
+function documentRoot() {
+	if (typeof document === "undefined") throw new ReferenceError("applyTheme requires a browser document.");
+	return document.documentElement;
+}
+/**
+* Applies global chayns UI theme classes to the document root.
+* Omitted options retain their current setting.
+*/
+function applyTheme(options) {
+	if (Object.hasOwn(options, "colorMode")) assertSupportedOption("colorMode", options.colorMode, COLOR_MODES);
+	if (Object.hasOwn(options, "density")) assertSupportedOption("density", options.density, DENSITIES);
+	if (Object.hasOwn(options, "accessibilityMode")) assertSupportedOption("accessibilityMode", options.accessibilityMode, ACCESSIBILITY_MODES);
+	const root = documentRoot();
+	if (Object.hasOwn(options, "colorMode")) {
+		root.classList.remove(...COLOR_MODE_CLASSES);
+		root.classList.add(`chayns-theme--${options.colorMode}`);
+	}
+	if (Object.hasOwn(options, "density")) {
+		root.classList.remove(...DENSITY_CLASSES);
+		root.classList.add(`chayns-density--${options.density}`);
+	}
+	if (Object.hasOwn(options, "accessibilityMode")) {
+		root.classList.remove(...ACCESSIBILITY_CLASSES);
+		if (options.accessibilityMode === "high-contrast") root.classList.add("chayns-contrast--high");
+		if (options.accessibilityMode === "color-deficiency") root.classList.add("chayns-theme--color-deficiency");
+	}
+}
+//#endregion
+export { ACCESSIBILITY_MODES, COLOR_MODES, DENSITIES, applyTheme };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["export const COLOR_MODES = ['light', 'dark'] as const;\nexport const DENSITIES = ['s', 'm', 'l'] as const;\nexport const ACCESSIBILITY_MODES = ['standard', 'high-contrast', 'color-deficiency'] as const;\n\nexport type ColorMode = (typeof COLOR_MODES)[number];\nexport type Density = (typeof DENSITIES)[number];\nexport type AccessibilityMode = (typeof ACCESSIBILITY_MODES)[number];\n\nexport interface ApplyThemeOptions {\n  accessibilityMode?: AccessibilityMode;\n  colorMode?: ColorMode;\n  density?: Density;\n}\n\nconst COLOR_MODE_CLASSES = COLOR_MODES.map((mode) => `chayns-theme--${mode}`);\nconst DENSITY_CLASSES = DENSITIES.map((density) => `chayns-density--${density}`);\nconst ACCESSIBILITY_CLASSES = ['chayns-contrast--high', 'chayns-theme--color-deficiency'] as const;\n\nfunction assertSupportedOption<Value extends string>(\n  name: string,\n  value: unknown,\n  supportedValues: readonly Value[],\n): asserts value is Value {\n  if (\n    typeof value !== 'string' ||\n    !supportedValues.some((supportedValue) => supportedValue === value)\n  ) {\n    throw new TypeError(\n      `${name} must be one of: ${supportedValues.map((supportedValue) => `'${supportedValue}'`).join(', ')}.`,\n    );\n  }\n}\n\nfunction documentRoot(): HTMLElement {\n  if (typeof document === 'undefined') {\n    throw new ReferenceError('applyTheme requires a browser document.');\n  }\n\n  return document.documentElement;\n}\n\n/**\n * Applies global chayns UI theme classes to the document root.\n * Omitted options retain their current setting.\n */\nexport function applyTheme(options: ApplyThemeOptions): void {\n  if (Object.hasOwn(options, 'colorMode')) {\n    assertSupportedOption('colorMode', options.colorMode, COLOR_MODES);\n  }\n\n  if (Object.hasOwn(options, 'density')) {\n    assertSupportedOption('density', options.density, DENSITIES);\n  }\n\n  if (Object.hasOwn(options, 'accessibilityMode')) {\n    assertSupportedOption('accessibilityMode', options.accessibilityMode, ACCESSIBILITY_MODES);\n  }\n\n  const root = documentRoot();\n\n  if (Object.hasOwn(options, 'colorMode')) {\n    root.classList.remove(...COLOR_MODE_CLASSES);\n    root.classList.add(`chayns-theme--${options.colorMode}`);\n  }\n\n  if (Object.hasOwn(options, 'density')) {\n    root.classList.remove(...DENSITY_CLASSES);\n    root.classList.add(`chayns-density--${options.density}`);\n  }\n\n  if (Object.hasOwn(options, 'accessibilityMode')) {\n    root.classList.remove(...ACCESSIBILITY_CLASSES);\n\n    if (options.accessibilityMode === 'high-contrast') {\n      root.classList.add('chayns-contrast--high');\n    }\n\n    if (options.accessibilityMode === 'color-deficiency') {\n      root.classList.add('chayns-theme--color-deficiency');\n    }\n  }\n}\n"],"mappings":";AAAA,IAAa,cAAc,CAAC,SAAS,MAAM;AAC3C,IAAa,YAAY;CAAC;CAAK;CAAK;AAAG;AACvC,IAAa,sBAAsB;CAAC;CAAY;CAAiB;AAAkB;AAYnF,IAAM,qBAAqB,YAAY,KAAK,SAAS,iBAAiB,MAAM;AAC5E,IAAM,kBAAkB,UAAU,KAAK,YAAY,mBAAmB,SAAS;AAC/E,IAAM,wBAAwB,CAAC,yBAAyB,gCAAgC;AAExF,SAAS,sBACP,MACA,OACA,iBACwB;CACxB,IACE,OAAO,UAAU,YACjB,CAAC,gBAAgB,MAAM,mBAAmB,mBAAmB,KAAK,GAElE,MAAM,IAAI,UACR,GAAG,KAAK,mBAAmB,gBAAgB,KAAK,mBAAmB,IAAI,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,EAAE,EACvG;AAEJ;AAEA,SAAS,eAA4B;CACnC,IAAI,OAAO,aAAa,aACtB,MAAM,IAAI,eAAe,yCAAyC;CAGpE,OAAO,SAAS;AAClB;;;;;AAMA,SAAgB,WAAW,SAAkC;CAC3D,IAAI,OAAO,OAAO,SAAS,WAAW,GACpC,sBAAsB,aAAa,QAAQ,WAAW,WAAW;CAGnE,IAAI,OAAO,OAAO,SAAS,SAAS,GAClC,sBAAsB,WAAW,QAAQ,SAAS,SAAS;CAG7D,IAAI,OAAO,OAAO,SAAS,mBAAmB,GAC5C,sBAAsB,qBAAqB,QAAQ,mBAAmB,mBAAmB;CAG3F,MAAM,OAAO,aAAa;CAE1B,IAAI,OAAO,OAAO,SAAS,WAAW,GAAG;EACvC,KAAK,UAAU,OAAO,GAAG,kBAAkB;EAC3C,KAAK,UAAU,IAAI,iBAAiB,QAAQ,WAAW;CACzD;CAEA,IAAI,OAAO,OAAO,SAAS,SAAS,GAAG;EACrC,KAAK,UAAU,OAAO,GAAG,eAAe;EACxC,KAAK,UAAU,IAAI,mBAAmB,QAAQ,SAAS;CACzD;CAEA,IAAI,OAAO,OAAO,SAAS,mBAAmB,GAAG;EAC/C,KAAK,UAAU,OAAO,GAAG,qBAAqB;EAE9C,IAAI,QAAQ,sBAAsB,iBAChC,KAAK,UAAU,IAAI,uBAAuB;EAG5C,IAAI,QAAQ,sBAAsB,oBAChC,KAAK,UAAU,IAAI,gCAAgC;CAEvD;AACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chayns-ui/tokens",
-  "version": "0.4.0",
-  "description": "Resolved CSS design tokens for chayns UI",
+  "version": "0.6.0",
+  "description": "Resolved CSS design tokens and global theme configuration for chayns UI",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -19,6 +19,10 @@
     "README.md"
   ],
   "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./baseline.css": "./dist/baseline.css",
     "./patch.css": "./dist/patch.css",
     "./package.json": "./package.json"
@@ -30,8 +34,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "node style-dictionary.config.mjs",
+    "build": "vite build && tsc -b tsconfig.build.json --force && node style-dictionary.config.mjs",
     "clean": "node ../../tooling/clean-package.mjs tokens",
-    "test": "vitest run"
+    "test": "vitest run --environment jsdom"
   }
 }

package/src/foundations.tokens.json

@@ -322,6 +322,56 @@
     }
   },
   "color": {
+    "grey-000": {
+      "$type": "color",
+      "$value": "#ffffff",
+      "$extensions": { "chayns": { "cssName": "--grey-000", "dark": "#000000" } }
+    },
+    "grey-001": {
+      "$type": "color",
+      "$value": "#f7f7f7",
+      "$extensions": { "chayns": { "cssName": "--grey-001", "dark": "#070707" } }
+    },
+    "grey-002": {
+      "$type": "color",
+      "$value": "#e5e5e5",
+      "$extensions": { "chayns": { "cssName": "--grey-002", "dark": "#191919" } }
+    },
+    "grey-003": {
+      "$type": "color",
+      "$value": "#bfbfbf",
+      "$extensions": { "chayns": { "cssName": "--grey-003", "dark": "#3f3f3f" } }
+    },
+    "grey-004": {
+      "$type": "color",
+      "$value": "#999999",
+      "$extensions": { "chayns": { "cssName": "--grey-004", "dark": "#666666" } }
+    },
+    "grey-005": {
+      "$type": "color",
+      "$value": "#7f7f7f",
+      "$extensions": { "chayns": { "cssName": "--grey-005", "dark": "#7f7f7f" } }
+    },
+    "grey-006": {
+      "$type": "color",
+      "$value": "#666666",
+      "$extensions": { "chayns": { "cssName": "--grey-006", "dark": "#999999" } }
+    },
+    "grey-007": {
+      "$type": "color",
+      "$value": "#3f3f3f",
+      "$extensions": { "chayns": { "cssName": "--grey-007", "dark": "#bfbfbf" } }
+    },
+    "grey-008": {
+      "$type": "color",
+      "$value": "#191919",
+      "$extensions": { "chayns": { "cssName": "--grey-008", "dark": "#e5e5e5" } }
+    },
+    "grey-009": {
+      "$type": "color",
+      "$value": "#000000",
+      "$extensions": { "chayns": { "cssName": "--grey-009", "dark": "#ffffff" } }
+    },
     "page": {
       "$type": "color",
       "$value": "#f4f6f6",
@@ -407,11 +457,51 @@
       "$value": "15, 109, 126",
       "$extensions": { "chayns": { "cssName": "--accent-rgb", "dark": "85, 191, 212" } }
     },
+    "on-accent-rgb": {
+      "$type": "string",
+      "$value": "255, 255, 255",
+      "$extensions": { "chayns": { "cssName": "--on-accent-rgb", "dark": "14, 23, 27" } }
+    },
+    "accent-100": {
+      "$type": "color",
+      "$value": "#eef7f8",
+      "$extensions": { "chayns": { "cssName": "--accent-100", "dark": "#e2f7fa" } }
+    },
+    "accent-200": {
+      "$type": "color",
+      "$value": "#d3e7eb",
+      "$extensions": { "chayns": { "cssName": "--accent-200", "dark": "#caeff3" } }
+    },
     "accent-300": {
       "$type": "color",
       "$value": "#a8c3ca",
       "$extensions": { "chayns": { "cssName": "--accent-300", "dark": "#aee4ed" } }
     },
+    "accent-400": {
+      "$type": "color",
+      "$value": "#629fac",
+      "$extensions": { "chayns": { "cssName": "--accent-400", "dark": "#90d8e5" } }
+    },
+    "accent-500": {
+      "$type": "color",
+      "$value": "#3f93a1",
+      "$extensions": { "chayns": { "cssName": "--accent-500", "dark": "#72cbdd" } }
+    },
+    "accent-600": {
+      "$type": "color",
+      "$value": "#278090",
+      "$extensions": { "chayns": { "cssName": "--accent-600", "dark": "#55bfd4" } }
+    },
+    "accent-700": {
+      "$type": "color",
+      "$value": "#0d6271",
+      "$extensions": { "chayns": { "cssName": "--accent-700", "dark": "#3eaec4" } }
+    },
+    "accent-800": {
+      "$type": "color",
+      "$value": "#0c5765",
+      "$extensions": { "chayns": { "cssName": "--accent-800", "dark": "#2f90a3" } }
+    },
     "tint": {
       "$type": "color",
       "$value": "#eef7f8",