@nexub/tokens 3.1.0 → 3.3.0

package/dist/js/seed.d.ts

@@ -29,6 +29,37 @@ export function createSeedRoles(seed: string, { contrast, target }?: SeedThemeOp
 export function createSeedThemeCss(seed: string, { selector, ...options }?: SeedThemeOptions & {
     selector?: string;
 }): string;
+/**
+ * WCAG 2.x contrast ratio between two hex colours, 1–21.
+ * @param {string} a `#rrggbb`
+ * @param {string} b `#rrggbb`
+ * @returns {number}
+ */
+export function contrastRatio(a: string, b: string): number;
+/**
+ * The full seeded theme as a stylesheet: standard contrast on `selector`, then
+ * `data-contrast="medium"` and `"high"`, and high for `prefers-contrast: more`
+ * when no `data-contrast` is set. Same layering as the built-in roles.css, so a
+ * seeded brand follows the contrast switch like a built-in one.
+ * @param {string} seed
+ * @param {{ target?: 'primary' | 'tertiary', selector?: string }} [options] `selector` defaults to ':root'.
+ * @returns {string}
+ */
+export function createSeedStylesheet(seed: string, { target, selector }?: {
+    target?: "primary" | "tertiary";
+    selector?: string;
+}): string;
+/**
+ * The seeded roles as W3C Design Tokens (DTCG) JSON, one document per scheme,
+ * for Figma Variables / Tokens Studio / Style Dictionary.
+ * @param {string} seed
+ * @param {SeedThemeOptions} [options]
+ * @returns {{ light: Record<string, unknown>, dark: Record<string, unknown> }}
+ */
+export function createSeedTokens(seed: string, options?: SeedThemeOptions): {
+    light: Record<string, unknown>;
+    dark: Record<string, unknown>;
+};
 export type SeedThemeOptions = {
     /**
      * Contrast level (matches `data-contrast`). Default 'standard'.

package/dist/js/seed.js

@@ -65,3 +65,58 @@ export function createSeedThemeCss(seed, { selector = ':root', ...options } = {}
     const decls = Object.entries(createSeedTheme(seed, options)).map(([k, v]) => `  ${k}: ${v};`);
     return `${selector} {\n${decls.join('\n')}\n}\n`;
 }
+/**
+ * WCAG 2.x contrast ratio between two hex colours, 1–21.
+ * @param {string} a `#rrggbb`
+ * @param {string} b `#rrggbb`
+ * @returns {number}
+ */
+export function contrastRatio(a, b) {
+    /** @param {string} hex */
+    const lum = (hex) => {
+        const c = (/** @type {number} */ i) => {
+            const s = parseInt(hex.slice(i, i + 2), 16) / 255;
+            return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+        };
+        return 0.2126 * c(1) + 0.7152 * c(3) + 0.0722 * c(5);
+    };
+    const [x, y] = [lum(a), lum(b)];
+    return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+}
+/**
+ * The full seeded theme as a stylesheet: standard contrast on `selector`, then
+ * `data-contrast="medium"` and `"high"`, and high for `prefers-contrast: more`
+ * when no `data-contrast` is set. Same layering as the built-in roles.css, so a
+ * seeded brand follows the contrast switch like a built-in one.
+ * @param {string} seed
+ * @param {{ target?: 'primary' | 'tertiary', selector?: string }} [options] `selector` defaults to ':root'.
+ * @returns {string}
+ */
+export function createSeedStylesheet(seed, { target = 'primary', selector = ':root' } = {}) {
+    /** @param {'standard' | 'medium' | 'high'} contrast */
+    const decls = (contrast) => Object.entries(createSeedTheme(seed, { contrast, target })).map(([k, v]) => `  ${k}: ${v};`).join('\n');
+    /** @param {string} lvl */
+    const at = (lvl) => `${selector}[data-contrast='${lvl}'], [data-contrast='${lvl}'] ${selector}`;
+    const auto = `${selector}:root:not([data-contrast]), :root:not([data-contrast]) ${selector}`;
+    return [
+        `${selector} {\n${decls('standard')}\n}`,
+        `${at('medium')} {\n${decls('medium')}\n}`,
+        `${at('high')} {\n${decls('high')}\n}`,
+        `@media (prefers-contrast: more) {\n${auto} {\n${decls('high')}\n}\n}`,
+    ].join('\n\n') + '\n';
+}
+/**
+ * The seeded roles as W3C Design Tokens (DTCG) JSON, one document per scheme,
+ * for Figma Variables / Tokens Studio / Style Dictionary.
+ * @param {string} seed
+ * @param {SeedThemeOptions} [options]
+ * @returns {{ light: Record<string, unknown>, dark: Record<string, unknown> }}
+ */
+export function createSeedTokens(seed, options = {}) {
+    const { light, dark } = createSeedRoles(seed, options);
+    /** @param {Record<string, string>} roles */
+    const doc = (roles) => ({
+        color: Object.fromEntries(Object.entries(roles).map(([role, hex]) => [role, { $type: 'color', $value: hex }])),
+    });
+    return { light: doc(light), dark: doc(dark) };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/tokens",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "Design tokens for Nexub Design System — colours, typography, spacing, radii, shadows, and motion as CSS variables, Tailwind presets and React Native objects.",
   "type": "module",
   "license": "MIT",