@chayns-ui/tokens 0.5.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/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.5.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"
   }
 }