@nexub/tokens 1.8.0 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/js/roles.d.ts +17 -0
  2. package/dist/js/roles.js +77 -0
  3. package/dist/js/seed.d.ts +30 -0
  4. package/dist/js/seed.js +51 -0
  5. package/dist/tailwind/theme.css +816 -0
  6. package/package.json +9 -2
package/dist/js/roles.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ /** Tonal palette from a hex colour: its own hue and chroma (brand fidelity).
2
+ * @param {string} hex */
3
+ export function tonalPalette(hex: string): TonalPalette;
4
+ /** @typedef {[palette: string, light: number, dark: number, highLight: number, highDark: number]} RoleTones */
5
+ /** @typedef {'standard' | 'medium' | 'high'} ContrastLevel */
6
+ export const TONES: number[];
7
+ export function toneHex(pal: TonalPalette, tone: number): string;
8
+ export function accent(pal: string): Record<string, RoleTones>;
9
+ /** @type {Record<string, RoleTones>} */
10
+ export const ROLES: Record<string, RoleTones>;
11
+ export function tertiary(product: string): Record<string, RoleTones>;
12
+ /** @type {ContrastLevel[]} */
13
+ export const LEVELS: ContrastLevel[];
14
+ export function tonesAt([pal, l, d, hl, hd]: RoleTones, level: ContrastLevel): [string, number, number];
15
+ export type RoleTones = [palette: string, light: number, dark: number, highLight: number, highDark: number];
16
+ export type ContrastLevel = "standard" | "medium" | "high";
17
+ import { TonalPalette } from '@material/material-color-utilities';
package/dist/js/roles.js ADDED
@@ -0,0 +1,77 @@
1
+ // @ts-check
2
+ // Role → tone table and HCT palette generation, shared by the build
3
+ // (scripts/generate.mjs → dist/css/roles.css) and the runtime seed theming
4
+ // entry (@nexub/tokens/seed). Plain JS so the build script can import it
5
+ // before tsc runs; tsc (allowJs) emits it and its .d.ts into dist/js.
6
+ //
7
+ // @material/material-color-utilities is pinned to 0.3.0: 0.4.0 ships broken ESM.
8
+ import { Hct, TonalPalette, argbFromHex, hexFromArgb } from '@material/material-color-utilities';
9
+ /** @typedef {[palette: string, light: number, dark: number, highLight: number, highDark: number]} RoleTones */
10
+ /** @typedef {'standard' | 'medium' | 'high'} ContrastLevel */
11
+ // 5/15/25/35/45/65/76/85 exist for data-contrast="medium" (halfway tones).
12
+ export const TONES = [0, 4, 5, 6, 10, 12, 15, 17, 20, 22, 24, 25, 30, 35, 40, 45, 50, 60, 65, 70, 72, 76, 80, 85, 87, 90, 92, 94, 95, 96, 98, 99, 100];
13
+ /** Tonal palette from a hex colour: its own hue and chroma (brand fidelity).
14
+ * @param {string} hex */
15
+ export function tonalPalette(hex) {
16
+ const hct = Hct.fromInt(argbFromHex(hex));
17
+ return TonalPalette.fromHueAndChroma(hct.hue, hct.chroma);
18
+ }
19
+ /** @param {TonalPalette} pal @param {number} tone */
20
+ export const toneHex = (pal, tone) => hexFromArgb(pal.tone(tone));
21
+ // role → [palette, light tone, dark tone, light tone (high), dark tone (high)]
22
+ // High contrast pushes accents/outlines/secondary text further from surfaces.
23
+ /** @param {string} pal @returns {Record<string, RoleTones>} */
24
+ export const accent = (pal) => ({
25
+ [pal]: [pal, 40, 80, 30, 90],
26
+ [`on-${pal}`]: [pal, 100, 20, 100, 10],
27
+ [`${pal}-container`]: [pal, 90, 30, 90, 30],
28
+ [`on-${pal}-container`]: [pal, 10, 90, 0, 100],
29
+ });
30
+ /** @type {Record<string, RoleTones>} */
31
+ export const ROLES = {
32
+ ...accent('primary'),
33
+ ...accent('secondary'),
34
+ ...accent('error'),
35
+ ...accent('success'),
36
+ ...accent('warning'),
37
+ ...accent('info'),
38
+ // Product accents, always available (badges, dots, tags), whatever the
39
+ // data-product. Tertiary is the *current* product; these name each one.
40
+ ...accent('leap'),
41
+ ...accent('bookub'),
42
+ ...accent('payub'),
43
+ ...accent('founderub'),
44
+ surface: ['neutral', 98, 6, 98, 6],
45
+ 'surface-dim': ['neutral', 87, 6, 87, 6],
46
+ 'surface-bright': ['neutral', 98, 24, 98, 24],
47
+ 'surface-container-lowest': ['neutral', 100, 4, 100, 4],
48
+ 'surface-container-low': ['neutral', 96, 10, 96, 10],
49
+ 'surface-container': ['neutral', 94, 12, 94, 12],
50
+ 'surface-container-high': ['neutral', 92, 17, 92, 17],
51
+ 'surface-container-highest': ['neutral', 90, 22, 90, 22],
52
+ // Not an M3 role: floating layers (menus, popovers, dialogs). White in light,
53
+ // lighter than the page in dark (Apple's elevated background).
54
+ 'surface-elevated': ['neutral', 100, 17, 100, 17],
55
+ 'on-surface': ['neutral', 10, 90, 0, 100],
56
+ 'on-surface-variant': ['neutral-variant', 30, 80, 20, 90],
57
+ // Not an M3 role: tertiary text that still clears 4.5:1 on every container.
58
+ 'on-surface-muted': ['neutral-variant', 40, 72, 30, 80],
59
+ outline: ['neutral-variant', 50, 60, 30, 80],
60
+ 'outline-variant': ['neutral-variant', 80, 30, 50, 60],
61
+ 'inverse-surface': ['neutral', 20, 90, 20, 90],
62
+ 'inverse-on-surface': ['neutral', 95, 20, 100, 0],
63
+ 'inverse-primary': ['primary', 80, 40, 80, 40],
64
+ // Behind modals and under image captions; black in both themes.
65
+ scrim: ['neutral', 0, 0, 0, 0],
66
+ };
67
+ // Product brands remap the tertiary family.
68
+ /** @param {string} product @returns {Record<string, RoleTones>} */
69
+ export const tertiary = (product) => Object.fromEntries(Object.entries(accent('tertiary')).map(([role, [, ...tones]]) => [role, [product, ...tones]]));
70
+ // Contrast levels. Medium sits halfway between standard and high, snapped
71
+ // to the nearest generated tone.
72
+ /** @type {ContrastLevel[]} */
73
+ export const LEVELS = ['standard', 'medium', 'high'];
74
+ /** @param {number} t */
75
+ const snap = (t) => TONES.reduce((a, b) => (Math.abs(b - t) < Math.abs(a - t) ? b : a));
76
+ /** @param {RoleTones} entry @param {ContrastLevel} level @returns {[string, number, number]} */
77
+ export const tonesAt = ([pal, l, d, hl, hd], level) => level === 'high' ? [pal, hl, hd] : level === 'medium' ? [pal, snap((l + hl) / 2), snap((d + hd) / 2)] : [pal, l, d];
package/dist/js/seed.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ /**
2
+ * CSS custom properties for the accent family derived from `seed`, as
3
+ * `light-dark(<light>, <dark>)` values (same shape as dist/css/roles.css).
4
+ * target 'primary': primary, on-primary, primary-container, on-primary-container, inverse-primary.
5
+ * target 'tertiary': tertiary, on-tertiary, tertiary-container, on-tertiary-container.
6
+ * @param {string} seed Hex colour, `#rgb` or `#rrggbb`.
7
+ * @param {SeedThemeOptions} [options]
8
+ * @returns {Record<string, string>} e.g. `createSeedTheme('#4099f1')['--color-primary'] === 'light-dark(#0061a6, #a0c9ff)'`
9
+ */
10
+ export function createSeedTheme(seed: string, { contrast, target }?: SeedThemeOptions): Record<string, string>;
11
+ /**
12
+ * The same theme as a CSS rule, for SSR / static stylesheets (no flash, no JS):
13
+ * `:root {\n --color-primary: light-dark(…);\n …\n}\n`.
14
+ * @param {string} seed
15
+ * @param {SeedThemeOptions & { selector?: string }} [options] `selector` defaults to ':root'.
16
+ * @returns {string}
17
+ */
18
+ export function createSeedThemeCss(seed: string, { selector, ...options }?: SeedThemeOptions & {
19
+ selector?: string;
20
+ }): string;
21
+ export type SeedThemeOptions = {
22
+ /**
23
+ * Contrast level (matches `data-contrast`). Default 'standard'.
24
+ */
25
+ contrast?: "standard" | "medium" | "high" | undefined;
26
+ /**
27
+ * Accent family to seed. 'tertiary' is the product brand. Default 'primary'.
28
+ */
29
+ target?: "primary" | "tertiary" | undefined;
30
+ };
package/dist/js/seed.js ADDED
@@ -0,0 +1,51 @@
1
+ // @ts-check
2
+ // @nexub/tokens/seed — runtime brand theming from one seed colour (white-label).
3
+ // Uses the same HCT palette generation and role → tone table as the build
4
+ // (src/roles.js), so a seeded accent family meets the same WCAG pairs as the
5
+ // built-in ones: roles are HCT tones, and tone gaps fix contrast for any hue.
6
+ import { LEVELS, ROLES, accent, tonalPalette, toneHex, tonesAt } from './roles.js';
7
+ /**
8
+ * @typedef {object} SeedThemeOptions
9
+ * @property {'standard' | 'medium' | 'high'} [contrast] Contrast level (matches `data-contrast`). Default 'standard'.
10
+ * @property {'primary' | 'tertiary'} [target] Accent family to seed. 'tertiary' is the product brand. Default 'primary'.
11
+ */
12
+ const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
13
+ /**
14
+ * CSS custom properties for the accent family derived from `seed`, as
15
+ * `light-dark(<light>, <dark>)` values (same shape as dist/css/roles.css).
16
+ * target 'primary': primary, on-primary, primary-container, on-primary-container, inverse-primary.
17
+ * target 'tertiary': tertiary, on-tertiary, tertiary-container, on-tertiary-container.
18
+ * @param {string} seed Hex colour, `#rgb` or `#rrggbb`.
19
+ * @param {SeedThemeOptions} [options]
20
+ * @returns {Record<string, string>} e.g. `createSeedTheme('#4099f1')['--color-primary'] === 'light-dark(#0061a6, #a0c9ff)'`
21
+ */
22
+ export function createSeedTheme(seed, { contrast = 'standard', target = 'primary' } = {}) {
23
+ if (typeof seed !== 'string' || !HEX.test(seed))
24
+ throw new TypeError(`@nexub/tokens/seed: seed must be a hex colour (#rgb or #rrggbb), got ${JSON.stringify(seed)}`);
25
+ if (!LEVELS.includes(contrast))
26
+ throw new TypeError(`@nexub/tokens/seed: contrast must be one of ${LEVELS.join(', ')}, got ${JSON.stringify(contrast)}`);
27
+ if (target !== 'primary' && target !== 'tertiary')
28
+ throw new TypeError(`@nexub/tokens/seed: target must be 'primary' or 'tertiary', got ${JSON.stringify(target)}`);
29
+ const pal = tonalPalette(seed);
30
+ const roles = { ...accent(target) };
31
+ if (target === 'primary' && ROLES['inverse-primary'])
32
+ roles['inverse-primary'] = ROLES['inverse-primary'];
33
+ /** @type {Record<string, string>} */
34
+ const vars = {};
35
+ for (const [role, entry] of Object.entries(roles)) {
36
+ const [, l, d] = tonesAt(entry, contrast);
37
+ vars[`--color-${role}`] = `light-dark(${toneHex(pal, l)}, ${toneHex(pal, d)})`;
38
+ }
39
+ return vars;
40
+ }
41
+ /**
42
+ * The same theme as a CSS rule, for SSR / static stylesheets (no flash, no JS):
43
+ * `:root {\n --color-primary: light-dark(…);\n …\n}\n`.
44
+ * @param {string} seed
45
+ * @param {SeedThemeOptions & { selector?: string }} [options] `selector` defaults to ':root'.
46
+ * @returns {string}
47
+ */
48
+ export function createSeedThemeCss(seed, { selector = ':root', ...options } = {}) {
49
+ const decls = Object.entries(createSeedTheme(seed, options)).map(([k, v]) => ` ${k}: ${v};`);
50
+ return `${selector} {\n${decls.join('\n')}\n}\n`;
51
+ }
package/dist/tailwind/theme.css ADDED
@@ -0,0 +1,816 @@
1
+ /* Auto-generated by @nexub/tokens build script. Do not edit. */
2
+ /* Tailwind v4: @import "tailwindcss"; @import "@nexub/tokens/tailwind.css"; */
3
+ /* Needs the token CSS loaded too (@nexub/tokens/css + /css/roles, or @nexub/themes). */
4
+ @theme inline reference {
5
+ --color-primary: var(--color-primary);
6
+ --color-on-primary: var(--color-on-primary);
7
+ --color-primary-container: var(--color-primary-container);
8
+ --color-on-primary-container: var(--color-on-primary-container);
9
+ --color-secondary: var(--color-secondary);
10
+ --color-on-secondary: var(--color-on-secondary);
11
+ --color-secondary-container: var(--color-secondary-container);
12
+ --color-on-secondary-container: var(--color-on-secondary-container);
13
+ --color-error: var(--color-error);
14
+ --color-on-error: var(--color-on-error);
15
+ --color-error-container: var(--color-error-container);
16
+ --color-on-error-container: var(--color-on-error-container);
17
+ --color-success: var(--color-success);
18
+ --color-on-success: var(--color-on-success);
19
+ --color-success-container: var(--color-success-container);
20
+ --color-on-success-container: var(--color-on-success-container);
21
+ --color-warning: var(--color-warning);
22
+ --color-on-warning: var(--color-on-warning);
23
+ --color-warning-container: var(--color-warning-container);
24
+ --color-on-warning-container: var(--color-on-warning-container);
25
+ --color-info: var(--color-info);
26
+ --color-on-info: var(--color-on-info);
27
+ --color-info-container: var(--color-info-container);
28
+ --color-on-info-container: var(--color-on-info-container);
29
+ --color-leap: var(--color-leap);
30
+ --color-on-leap: var(--color-on-leap);
31
+ --color-leap-container: var(--color-leap-container);
32
+ --color-on-leap-container: var(--color-on-leap-container);
33
+ --color-bookub: var(--color-bookub);
34
+ --color-on-bookub: var(--color-on-bookub);
35
+ --color-bookub-container: var(--color-bookub-container);
36
+ --color-on-bookub-container: var(--color-on-bookub-container);
37
+ --color-payub: var(--color-payub);
38
+ --color-on-payub: var(--color-on-payub);
39
+ --color-payub-container: var(--color-payub-container);
40
+ --color-on-payub-container: var(--color-on-payub-container);
41
+ --color-founderub: var(--color-founderub);
42
+ --color-on-founderub: var(--color-on-founderub);
43
+ --color-founderub-container: var(--color-founderub-container);
44
+ --color-on-founderub-container: var(--color-on-founderub-container);
45
+ --color-surface-warm: var(--color-surface-warm);
46
+ --color-surface-muted: var(--color-surface-muted);
47
+ --color-surface-raised: var(--color-surface-raised);
48
+ --color-surface-sunken: var(--color-surface-sunken);
49
+ --color-surface-inverse: var(--color-surface-inverse);
50
+ --color-surface-dim: var(--color-surface-dim);
51
+ --color-surface-bright: var(--color-surface-bright);
52
+ --color-surface-container-lowest: var(--color-surface-container-lowest);
53
+ --color-surface-container-low: var(--color-surface-container-low);
54
+ --color-surface-container: var(--color-surface-container);
55
+ --color-surface-container-high: var(--color-surface-container-high);
56
+ --color-surface-container-highest: var(--color-surface-container-highest);
57
+ --color-surface-elevated: var(--color-surface-elevated);
58
+ --color-on-surface: var(--color-on-surface);
59
+ --color-on-surface-variant: var(--color-on-surface-variant);
60
+ --color-on-surface-muted: var(--color-on-surface-muted);
61
+ --color-outline: var(--color-outline);
62
+ --color-outline-variant: var(--color-outline-variant);
63
+ --color-inverse-surface: var(--color-inverse-surface);
64
+ --color-inverse-on-surface: var(--color-inverse-on-surface);
65
+ --color-inverse-primary: var(--color-inverse-primary);
66
+ --color-scrim: var(--color-scrim);
67
+ --color-tertiary: var(--color-tertiary);
68
+ --color-on-tertiary: var(--color-on-tertiary);
69
+ --color-tertiary-container: var(--color-tertiary-container);
70
+ --color-on-tertiary-container: var(--color-on-tertiary-container);
71
+ --color-palette-primary-0: var(--color-palette-primary-0);
72
+ --color-palette-primary-4: var(--color-palette-primary-4);
73
+ --color-palette-primary-5: var(--color-palette-primary-5);
74
+ --color-palette-primary-6: var(--color-palette-primary-6);
75
+ --color-palette-primary-10: var(--color-palette-primary-10);
76
+ --color-palette-primary-12: var(--color-palette-primary-12);
77
+ --color-palette-primary-15: var(--color-palette-primary-15);
78
+ --color-palette-primary-17: var(--color-palette-primary-17);
79
+ --color-palette-primary-20: var(--color-palette-primary-20);
80
+ --color-palette-primary-22: var(--color-palette-primary-22);
81
+ --color-palette-primary-24: var(--color-palette-primary-24);
82
+ --color-palette-primary-25: var(--color-palette-primary-25);
83
+ --color-palette-primary-30: var(--color-palette-primary-30);
84
+ --color-palette-primary-35: var(--color-palette-primary-35);
85
+ --color-palette-primary-40: var(--color-palette-primary-40);
86
+ --color-palette-primary-45: var(--color-palette-primary-45);
87
+ --color-palette-primary-50: var(--color-palette-primary-50);
88
+ --color-palette-primary-60: var(--color-palette-primary-60);
89
+ --color-palette-primary-65: var(--color-palette-primary-65);
90
+ --color-palette-primary-70: var(--color-palette-primary-70);
91
+ --color-palette-primary-72: var(--color-palette-primary-72);
92
+ --color-palette-primary-76: var(--color-palette-primary-76);
93
+ --color-palette-primary-80: var(--color-palette-primary-80);
94
+ --color-palette-primary-85: var(--color-palette-primary-85);
95
+ --color-palette-primary-87: var(--color-palette-primary-87);
96
+ --color-palette-primary-90: var(--color-palette-primary-90);
97
+ --color-palette-primary-92: var(--color-palette-primary-92);
98
+ --color-palette-primary-94: var(--color-palette-primary-94);
99
+ --color-palette-primary-95: var(--color-palette-primary-95);
100
+ --color-palette-primary-96: var(--color-palette-primary-96);
101
+ --color-palette-primary-98: var(--color-palette-primary-98);
102
+ --color-palette-primary-99: var(--color-palette-primary-99);
103
+ --color-palette-primary-100: var(--color-palette-primary-100);
104
+ --color-palette-error-0: var(--color-palette-error-0);
105
+ --color-palette-error-4: var(--color-palette-error-4);
106
+ --color-palette-error-5: var(--color-palette-error-5);
107
+ --color-palette-error-6: var(--color-palette-error-6);
108
+ --color-palette-error-10: var(--color-palette-error-10);
109
+ --color-palette-error-12: var(--color-palette-error-12);
110
+ --color-palette-error-15: var(--color-palette-error-15);
111
+ --color-palette-error-17: var(--color-palette-error-17);
112
+ --color-palette-error-20: var(--color-palette-error-20);
113
+ --color-palette-error-22: var(--color-palette-error-22);
114
+ --color-palette-error-24: var(--color-palette-error-24);
115
+ --color-palette-error-25: var(--color-palette-error-25);
116
+ --color-palette-error-30: var(--color-palette-error-30);
117
+ --color-palette-error-35: var(--color-palette-error-35);
118
+ --color-palette-error-40: var(--color-palette-error-40);
119
+ --color-palette-error-45: var(--color-palette-error-45);
120
+ --color-palette-error-50: var(--color-palette-error-50);
121
+ --color-palette-error-60: var(--color-palette-error-60);
122
+ --color-palette-error-65: var(--color-palette-error-65);
123
+ --color-palette-error-70: var(--color-palette-error-70);
124
+ --color-palette-error-72: var(--color-palette-error-72);
125
+ --color-palette-error-76: var(--color-palette-error-76);
126
+ --color-palette-error-80: var(--color-palette-error-80);
127
+ --color-palette-error-85: var(--color-palette-error-85);
128
+ --color-palette-error-87: var(--color-palette-error-87);
129
+ --color-palette-error-90: var(--color-palette-error-90);
130
+ --color-palette-error-92: var(--color-palette-error-92);
131
+ --color-palette-error-94: var(--color-palette-error-94);
132
+ --color-palette-error-95: var(--color-palette-error-95);
133
+ --color-palette-error-96: var(--color-palette-error-96);
134
+ --color-palette-error-98: var(--color-palette-error-98);
135
+ --color-palette-error-99: var(--color-palette-error-99);
136
+ --color-palette-error-100: var(--color-palette-error-100);
137
+ --color-palette-success-0: var(--color-palette-success-0);
138
+ --color-palette-success-4: var(--color-palette-success-4);
139
+ --color-palette-success-5: var(--color-palette-success-5);
140
+ --color-palette-success-6: var(--color-palette-success-6);
141
+ --color-palette-success-10: var(--color-palette-success-10);
142
+ --color-palette-success-12: var(--color-palette-success-12);
143
+ --color-palette-success-15: var(--color-palette-success-15);
144
+ --color-palette-success-17: var(--color-palette-success-17);
145
+ --color-palette-success-20: var(--color-palette-success-20);
146
+ --color-palette-success-22: var(--color-palette-success-22);
147
+ --color-palette-success-24: var(--color-palette-success-24);
148
+ --color-palette-success-25: var(--color-palette-success-25);
149
+ --color-palette-success-30: var(--color-palette-success-30);
150
+ --color-palette-success-35: var(--color-palette-success-35);
151
+ --color-palette-success-40: var(--color-palette-success-40);
152
+ --color-palette-success-45: var(--color-palette-success-45);
153
+ --color-palette-success-50: var(--color-palette-success-50);
154
+ --color-palette-success-60: var(--color-palette-success-60);
155
+ --color-palette-success-65: var(--color-palette-success-65);
156
+ --color-palette-success-70: var(--color-palette-success-70);
157
+ --color-palette-success-72: var(--color-palette-success-72);
158
+ --color-palette-success-76: var(--color-palette-success-76);
159
+ --color-palette-success-80: var(--color-palette-success-80);
160
+ --color-palette-success-85: var(--color-palette-success-85);
161
+ --color-palette-success-87: var(--color-palette-success-87);
162
+ --color-palette-success-90: var(--color-palette-success-90);
163
+ --color-palette-success-92: var(--color-palette-success-92);
164
+ --color-palette-success-94: var(--color-palette-success-94);
165
+ --color-palette-success-95: var(--color-palette-success-95);
166
+ --color-palette-success-96: var(--color-palette-success-96);
167
+ --color-palette-success-98: var(--color-palette-success-98);
168
+ --color-palette-success-99: var(--color-palette-success-99);
169
+ --color-palette-success-100: var(--color-palette-success-100);
170
+ --color-palette-warning-0: var(--color-palette-warning-0);
171
+ --color-palette-warning-4: var(--color-palette-warning-4);
172
+ --color-palette-warning-5: var(--color-palette-warning-5);
173
+ --color-palette-warning-6: var(--color-palette-warning-6);
174
+ --color-palette-warning-10: var(--color-palette-warning-10);
175
+ --color-palette-warning-12: var(--color-palette-warning-12);
176
+ --color-palette-warning-15: var(--color-palette-warning-15);
177
+ --color-palette-warning-17: var(--color-palette-warning-17);
178
+ --color-palette-warning-20: var(--color-palette-warning-20);
179
+ --color-palette-warning-22: var(--color-palette-warning-22);
180
+ --color-palette-warning-24: var(--color-palette-warning-24);
181
+ --color-palette-warning-25: var(--color-palette-warning-25);
182
+ --color-palette-warning-30: var(--color-palette-warning-30);
183
+ --color-palette-warning-35: var(--color-palette-warning-35);
184
+ --color-palette-warning-40: var(--color-palette-warning-40);
185
+ --color-palette-warning-45: var(--color-palette-warning-45);
186
+ --color-palette-warning-50: var(--color-palette-warning-50);
187
+ --color-palette-warning-60: var(--color-palette-warning-60);
188
+ --color-palette-warning-65: var(--color-palette-warning-65);
189
+ --color-palette-warning-70: var(--color-palette-warning-70);
190
+ --color-palette-warning-72: var(--color-palette-warning-72);
191
+ --color-palette-warning-76: var(--color-palette-warning-76);
192
+ --color-palette-warning-80: var(--color-palette-warning-80);
193
+ --color-palette-warning-85: var(--color-palette-warning-85);
194
+ --color-palette-warning-87: var(--color-palette-warning-87);
195
+ --color-palette-warning-90: var(--color-palette-warning-90);
196
+ --color-palette-warning-92: var(--color-palette-warning-92);
197
+ --color-palette-warning-94: var(--color-palette-warning-94);
198
+ --color-palette-warning-95: var(--color-palette-warning-95);
199
+ --color-palette-warning-96: var(--color-palette-warning-96);
200
+ --color-palette-warning-98: var(--color-palette-warning-98);
201
+ --color-palette-warning-99: var(--color-palette-warning-99);
202
+ --color-palette-warning-100: var(--color-palette-warning-100);
203
+ --color-palette-info-0: var(--color-palette-info-0);
204
+ --color-palette-info-4: var(--color-palette-info-4);
205
+ --color-palette-info-5: var(--color-palette-info-5);
206
+ --color-palette-info-6: var(--color-palette-info-6);
207
+ --color-palette-info-10: var(--color-palette-info-10);
208
+ --color-palette-info-12: var(--color-palette-info-12);
209
+ --color-palette-info-15: var(--color-palette-info-15);
210
+ --color-palette-info-17: var(--color-palette-info-17);
211
+ --color-palette-info-20: var(--color-palette-info-20);
212
+ --color-palette-info-22: var(--color-palette-info-22);
213
+ --color-palette-info-24: var(--color-palette-info-24);
214
+ --color-palette-info-25: var(--color-palette-info-25);
215
+ --color-palette-info-30: var(--color-palette-info-30);
216
+ --color-palette-info-35: var(--color-palette-info-35);
217
+ --color-palette-info-40: var(--color-palette-info-40);
218
+ --color-palette-info-45: var(--color-palette-info-45);
219
+ --color-palette-info-50: var(--color-palette-info-50);
220
+ --color-palette-info-60: var(--color-palette-info-60);
221
+ --color-palette-info-65: var(--color-palette-info-65);
222
+ --color-palette-info-70: var(--color-palette-info-70);
223
+ --color-palette-info-72: var(--color-palette-info-72);
224
+ --color-palette-info-76: var(--color-palette-info-76);
225
+ --color-palette-info-80: var(--color-palette-info-80);
226
+ --color-palette-info-85: var(--color-palette-info-85);
227
+ --color-palette-info-87: var(--color-palette-info-87);
228
+ --color-palette-info-90: var(--color-palette-info-90);
229
+ --color-palette-info-92: var(--color-palette-info-92);
230
+ --color-palette-info-94: var(--color-palette-info-94);
231
+ --color-palette-info-95: var(--color-palette-info-95);
232
+ --color-palette-info-96: var(--color-palette-info-96);
233
+ --color-palette-info-98: var(--color-palette-info-98);
234
+ --color-palette-info-99: var(--color-palette-info-99);
235
+ --color-palette-info-100: var(--color-palette-info-100);
236
+ --color-palette-leap-0: var(--color-palette-leap-0);
237
+ --color-palette-leap-4: var(--color-palette-leap-4);
238
+ --color-palette-leap-5: var(--color-palette-leap-5);
239
+ --color-palette-leap-6: var(--color-palette-leap-6);
240
+ --color-palette-leap-10: var(--color-palette-leap-10);
241
+ --color-palette-leap-12: var(--color-palette-leap-12);
242
+ --color-palette-leap-15: var(--color-palette-leap-15);
243
+ --color-palette-leap-17: var(--color-palette-leap-17);
244
+ --color-palette-leap-20: var(--color-palette-leap-20);
245
+ --color-palette-leap-22: var(--color-palette-leap-22);
246
+ --color-palette-leap-24: var(--color-palette-leap-24);
247
+ --color-palette-leap-25: var(--color-palette-leap-25);
248
+ --color-palette-leap-30: var(--color-palette-leap-30);
249
+ --color-palette-leap-35: var(--color-palette-leap-35);
250
+ --color-palette-leap-40: var(--color-palette-leap-40);
251
+ --color-palette-leap-45: var(--color-palette-leap-45);
252
+ --color-palette-leap-50: var(--color-palette-leap-50);
253
+ --color-palette-leap-60: var(--color-palette-leap-60);
254
+ --color-palette-leap-65: var(--color-palette-leap-65);
255
+ --color-palette-leap-70: var(--color-palette-leap-70);
256
+ --color-palette-leap-72: var(--color-palette-leap-72);
257
+ --color-palette-leap-76: var(--color-palette-leap-76);
258
+ --color-palette-leap-80: var(--color-palette-leap-80);
259
+ --color-palette-leap-85: var(--color-palette-leap-85);
260
+ --color-palette-leap-87: var(--color-palette-leap-87);
261
+ --color-palette-leap-90: var(--color-palette-leap-90);
262
+ --color-palette-leap-92: var(--color-palette-leap-92);
263
+ --color-palette-leap-94: var(--color-palette-leap-94);
264
+ --color-palette-leap-95: var(--color-palette-leap-95);
265
+ --color-palette-leap-96: var(--color-palette-leap-96);
266
+ --color-palette-leap-98: var(--color-palette-leap-98);
267
+ --color-palette-leap-99: var(--color-palette-leap-99);
268
+ --color-palette-leap-100: var(--color-palette-leap-100);
269
+ --color-palette-bookub-0: var(--color-palette-bookub-0);
270
+ --color-palette-bookub-4: var(--color-palette-bookub-4);
271
+ --color-palette-bookub-5: var(--color-palette-bookub-5);
272
+ --color-palette-bookub-6: var(--color-palette-bookub-6);
273
+ --color-palette-bookub-10: var(--color-palette-bookub-10);
274
+ --color-palette-bookub-12: var(--color-palette-bookub-12);
275
+ --color-palette-bookub-15: var(--color-palette-bookub-15);
276
+ --color-palette-bookub-17: var(--color-palette-bookub-17);
277
+ --color-palette-bookub-20: var(--color-palette-bookub-20);
278
+ --color-palette-bookub-22: var(--color-palette-bookub-22);
279
+ --color-palette-bookub-24: var(--color-palette-bookub-24);
280
+ --color-palette-bookub-25: var(--color-palette-bookub-25);
281
+ --color-palette-bookub-30: var(--color-palette-bookub-30);
282
+ --color-palette-bookub-35: var(--color-palette-bookub-35);
283
+ --color-palette-bookub-40: var(--color-palette-bookub-40);
284
+ --color-palette-bookub-45: var(--color-palette-bookub-45);
285
+ --color-palette-bookub-50: var(--color-palette-bookub-50);
286
+ --color-palette-bookub-60: var(--color-palette-bookub-60);
287
+ --color-palette-bookub-65: var(--color-palette-bookub-65);
288
+ --color-palette-bookub-70: var(--color-palette-bookub-70);
289
+ --color-palette-bookub-72: var(--color-palette-bookub-72);
290
+ --color-palette-bookub-76: var(--color-palette-bookub-76);
291
+ --color-palette-bookub-80: var(--color-palette-bookub-80);
292
+ --color-palette-bookub-85: var(--color-palette-bookub-85);
293
+ --color-palette-bookub-87: var(--color-palette-bookub-87);
294
+ --color-palette-bookub-90: var(--color-palette-bookub-90);
295
+ --color-palette-bookub-92: var(--color-palette-bookub-92);
296
+ --color-palette-bookub-94: var(--color-palette-bookub-94);
297
+ --color-palette-bookub-95: var(--color-palette-bookub-95);
298
+ --color-palette-bookub-96: var(--color-palette-bookub-96);
299
+ --color-palette-bookub-98: var(--color-palette-bookub-98);
300
+ --color-palette-bookub-99: var(--color-palette-bookub-99);
301
+ --color-palette-bookub-100: var(--color-palette-bookub-100);
302
+ --color-palette-payub-0: var(--color-palette-payub-0);
303
+ --color-palette-payub-4: var(--color-palette-payub-4);
304
+ --color-palette-payub-5: var(--color-palette-payub-5);
305
+ --color-palette-payub-6: var(--color-palette-payub-6);
306
+ --color-palette-payub-10: var(--color-palette-payub-10);
307
+ --color-palette-payub-12: var(--color-palette-payub-12);
308
+ --color-palette-payub-15: var(--color-palette-payub-15);
309
+ --color-palette-payub-17: var(--color-palette-payub-17);
310
+ --color-palette-payub-20: var(--color-palette-payub-20);
311
+ --color-palette-payub-22: var(--color-palette-payub-22);
312
+ --color-palette-payub-24: var(--color-palette-payub-24);
313
+ --color-palette-payub-25: var(--color-palette-payub-25);
314
+ --color-palette-payub-30: var(--color-palette-payub-30);
315
+ --color-palette-payub-35: var(--color-palette-payub-35);
316
+ --color-palette-payub-40: var(--color-palette-payub-40);
317
+ --color-palette-payub-45: var(--color-palette-payub-45);
318
+ --color-palette-payub-50: var(--color-palette-payub-50);
319
+ --color-palette-payub-60: var(--color-palette-payub-60);
320
+ --color-palette-payub-65: var(--color-palette-payub-65);
321
+ --color-palette-payub-70: var(--color-palette-payub-70);
322
+ --color-palette-payub-72: var(--color-palette-payub-72);
323
+ --color-palette-payub-76: var(--color-palette-payub-76);
324
+ --color-palette-payub-80: var(--color-palette-payub-80);
325
+ --color-palette-payub-85: var(--color-palette-payub-85);
326
+ --color-palette-payub-87: var(--color-palette-payub-87);
327
+ --color-palette-payub-90: var(--color-palette-payub-90);
328
+ --color-palette-payub-92: var(--color-palette-payub-92);
329
+ --color-palette-payub-94: var(--color-palette-payub-94);
330
+ --color-palette-payub-95: var(--color-palette-payub-95);
331
+ --color-palette-payub-96: var(--color-palette-payub-96);
332
+ --color-palette-payub-98: var(--color-palette-payub-98);
333
+ --color-palette-payub-99: var(--color-palette-payub-99);
334
+ --color-palette-payub-100: var(--color-palette-payub-100);
335
+ --color-palette-founderub-0: var(--color-palette-founderub-0);
336
+ --color-palette-founderub-4: var(--color-palette-founderub-4);
337
+ --color-palette-founderub-5: var(--color-palette-founderub-5);
338
+ --color-palette-founderub-6: var(--color-palette-founderub-6);
339
+ --color-palette-founderub-10: var(--color-palette-founderub-10);
340
+ --color-palette-founderub-12: var(--color-palette-founderub-12);
341
+ --color-palette-founderub-15: var(--color-palette-founderub-15);
342
+ --color-palette-founderub-17: var(--color-palette-founderub-17);
343
+ --color-palette-founderub-20: var(--color-palette-founderub-20);
344
+ --color-palette-founderub-22: var(--color-palette-founderub-22);
345
+ --color-palette-founderub-24: var(--color-palette-founderub-24);
346
+ --color-palette-founderub-25: var(--color-palette-founderub-25);
347
+ --color-palette-founderub-30: var(--color-palette-founderub-30);
348
+ --color-palette-founderub-35: var(--color-palette-founderub-35);
349
+ --color-palette-founderub-40: var(--color-palette-founderub-40);
350
+ --color-palette-founderub-45: var(--color-palette-founderub-45);
351
+ --color-palette-founderub-50: var(--color-palette-founderub-50);
352
+ --color-palette-founderub-60: var(--color-palette-founderub-60);
353
+ --color-palette-founderub-65: var(--color-palette-founderub-65);
354
+ --color-palette-founderub-70: var(--color-palette-founderub-70);
355
+ --color-palette-founderub-72: var(--color-palette-founderub-72);
356
+ --color-palette-founderub-76: var(--color-palette-founderub-76);
357
+ --color-palette-founderub-80: var(--color-palette-founderub-80);
358
+ --color-palette-founderub-85: var(--color-palette-founderub-85);
359
+ --color-palette-founderub-87: var(--color-palette-founderub-87);
360
+ --color-palette-founderub-90: var(--color-palette-founderub-90);
361
+ --color-palette-founderub-92: var(--color-palette-founderub-92);
362
+ --color-palette-founderub-94: var(--color-palette-founderub-94);
363
+ --color-palette-founderub-95: var(--color-palette-founderub-95);
364
+ --color-palette-founderub-96: var(--color-palette-founderub-96);
365
+ --color-palette-founderub-98: var(--color-palette-founderub-98);
366
+ --color-palette-founderub-99: var(--color-palette-founderub-99);
367
+ --color-palette-founderub-100: var(--color-palette-founderub-100);
368
+ --color-palette-secondary-0: var(--color-palette-secondary-0);
369
+ --color-palette-secondary-4: var(--color-palette-secondary-4);
370
+ --color-palette-secondary-5: var(--color-palette-secondary-5);
371
+ --color-palette-secondary-6: var(--color-palette-secondary-6);
372
+ --color-palette-secondary-10: var(--color-palette-secondary-10);
373
+ --color-palette-secondary-12: var(--color-palette-secondary-12);
374
+ --color-palette-secondary-15: var(--color-palette-secondary-15);
375
+ --color-palette-secondary-17: var(--color-palette-secondary-17);
376
+ --color-palette-secondary-20: var(--color-palette-secondary-20);
377
+ --color-palette-secondary-22: var(--color-palette-secondary-22);
378
+ --color-palette-secondary-24: var(--color-palette-secondary-24);
379
+ --color-palette-secondary-25: var(--color-palette-secondary-25);
380
+ --color-palette-secondary-30: var(--color-palette-secondary-30);
381
+ --color-palette-secondary-35: var(--color-palette-secondary-35);
382
+ --color-palette-secondary-40: var(--color-palette-secondary-40);
383
+ --color-palette-secondary-45: var(--color-palette-secondary-45);
384
+ --color-palette-secondary-50: var(--color-palette-secondary-50);
385
+ --color-palette-secondary-60: var(--color-palette-secondary-60);
386
+ --color-palette-secondary-65: var(--color-palette-secondary-65);
387
+ --color-palette-secondary-70: var(--color-palette-secondary-70);
388
+ --color-palette-secondary-72: var(--color-palette-secondary-72);
389
+ --color-palette-secondary-76: var(--color-palette-secondary-76);
390
+ --color-palette-secondary-80: var(--color-palette-secondary-80);
391
+ --color-palette-secondary-85: var(--color-palette-secondary-85);
392
+ --color-palette-secondary-87: var(--color-palette-secondary-87);
393
+ --color-palette-secondary-90: var(--color-palette-secondary-90);
394
+ --color-palette-secondary-92: var(--color-palette-secondary-92);
395
+ --color-palette-secondary-94: var(--color-palette-secondary-94);
396
+ --color-palette-secondary-95: var(--color-palette-secondary-95);
397
+ --color-palette-secondary-96: var(--color-palette-secondary-96);
398
+ --color-palette-secondary-98: var(--color-palette-secondary-98);
399
+ --color-palette-secondary-99: var(--color-palette-secondary-99);
400
+ --color-palette-secondary-100: var(--color-palette-secondary-100);
401
+ --color-palette-neutral-0: var(--color-palette-neutral-0);
402
+ --color-palette-neutral-4: var(--color-palette-neutral-4);
403
+ --color-palette-neutral-5: var(--color-palette-neutral-5);
404
+ --color-palette-neutral-6: var(--color-palette-neutral-6);
405
+ --color-palette-neutral-10: var(--color-palette-neutral-10);
406
+ --color-palette-neutral-12: var(--color-palette-neutral-12);
407
+ --color-palette-neutral-15: var(--color-palette-neutral-15);
408
+ --color-palette-neutral-17: var(--color-palette-neutral-17);
409
+ --color-palette-neutral-20: var(--color-palette-neutral-20);
410
+ --color-palette-neutral-22: var(--color-palette-neutral-22);
411
+ --color-palette-neutral-24: var(--color-palette-neutral-24);
412
+ --color-palette-neutral-25: var(--color-palette-neutral-25);
413
+ --color-palette-neutral-30: var(--color-palette-neutral-30);
414
+ --color-palette-neutral-35: var(--color-palette-neutral-35);
415
+ --color-palette-neutral-40: var(--color-palette-neutral-40);
416
+ --color-palette-neutral-45: var(--color-palette-neutral-45);
417
+ --color-palette-neutral-50: var(--color-palette-neutral-50);
418
+ --color-palette-neutral-60: var(--color-palette-neutral-60);
419
+ --color-palette-neutral-65: var(--color-palette-neutral-65);
420
+ --color-palette-neutral-70: var(--color-palette-neutral-70);
421
+ --color-palette-neutral-72: var(--color-palette-neutral-72);
422
+ --color-palette-neutral-76: var(--color-palette-neutral-76);
423
+ --color-palette-neutral-80: var(--color-palette-neutral-80);
424
+ --color-palette-neutral-85: var(--color-palette-neutral-85);
425
+ --color-palette-neutral-87: var(--color-palette-neutral-87);
426
+ --color-palette-neutral-90: var(--color-palette-neutral-90);
427
+ --color-palette-neutral-92: var(--color-palette-neutral-92);
428
+ --color-palette-neutral-94: var(--color-palette-neutral-94);
429
+ --color-palette-neutral-95: var(--color-palette-neutral-95);
430
+ --color-palette-neutral-96: var(--color-palette-neutral-96);
431
+ --color-palette-neutral-98: var(--color-palette-neutral-98);
432
+ --color-palette-neutral-99: var(--color-palette-neutral-99);
433
+ --color-palette-neutral-100: var(--color-palette-neutral-100);
434
+ --color-palette-neutral-variant-0: var(--color-palette-neutral-variant-0);
435
+ --color-palette-neutral-variant-4: var(--color-palette-neutral-variant-4);
436
+ --color-palette-neutral-variant-5: var(--color-palette-neutral-variant-5);
437
+ --color-palette-neutral-variant-6: var(--color-palette-neutral-variant-6);
438
+ --color-palette-neutral-variant-10: var(--color-palette-neutral-variant-10);
439
+ --color-palette-neutral-variant-12: var(--color-palette-neutral-variant-12);
440
+ --color-palette-neutral-variant-15: var(--color-palette-neutral-variant-15);
441
+ --color-palette-neutral-variant-17: var(--color-palette-neutral-variant-17);
442
+ --color-palette-neutral-variant-20: var(--color-palette-neutral-variant-20);
443
+ --color-palette-neutral-variant-22: var(--color-palette-neutral-variant-22);
444
+ --color-palette-neutral-variant-24: var(--color-palette-neutral-variant-24);
445
+ --color-palette-neutral-variant-25: var(--color-palette-neutral-variant-25);
446
+ --color-palette-neutral-variant-30: var(--color-palette-neutral-variant-30);
447
+ --color-palette-neutral-variant-35: var(--color-palette-neutral-variant-35);
448
+ --color-palette-neutral-variant-40: var(--color-palette-neutral-variant-40);
449
+ --color-palette-neutral-variant-45: var(--color-palette-neutral-variant-45);
450
+ --color-palette-neutral-variant-50: var(--color-palette-neutral-variant-50);
451
+ --color-palette-neutral-variant-60: var(--color-palette-neutral-variant-60);
452
+ --color-palette-neutral-variant-65: var(--color-palette-neutral-variant-65);
453
+ --color-palette-neutral-variant-70: var(--color-palette-neutral-variant-70);
454
+ --color-palette-neutral-variant-72: var(--color-palette-neutral-variant-72);
455
+ --color-palette-neutral-variant-76: var(--color-palette-neutral-variant-76);
456
+ --color-palette-neutral-variant-80: var(--color-palette-neutral-variant-80);
457
+ --color-palette-neutral-variant-85: var(--color-palette-neutral-variant-85);
458
+ --color-palette-neutral-variant-87: var(--color-palette-neutral-variant-87);
459
+ --color-palette-neutral-variant-90: var(--color-palette-neutral-variant-90);
460
+ --color-palette-neutral-variant-92: var(--color-palette-neutral-variant-92);
461
+ --color-palette-neutral-variant-94: var(--color-palette-neutral-variant-94);
462
+ --color-palette-neutral-variant-95: var(--color-palette-neutral-variant-95);
463
+ --color-palette-neutral-variant-96: var(--color-palette-neutral-variant-96);
464
+ --color-palette-neutral-variant-98: var(--color-palette-neutral-variant-98);
465
+ --color-palette-neutral-variant-99: var(--color-palette-neutral-variant-99);
466
+ --color-palette-neutral-variant-100: var(--color-palette-neutral-variant-100);
467
+ --color-brand-mark-1: var(--color-brand-mark-1);
468
+ --color-brand-mark-2: var(--color-brand-mark-2);
469
+ --color-brand-mark-3: var(--color-brand-mark-3);
470
+ --color-brand-mark-4: var(--color-brand-mark-4);
471
+ --color-brand-mark-5: var(--color-brand-mark-5);
472
+ --color-brand-mark-6: var(--color-brand-mark-6);
473
+ --color-brand-mark-7: var(--color-brand-mark-7);
474
+ --color-brand-mark-8: var(--color-brand-mark-8);
475
+ --color-brand-mark-9: var(--color-brand-mark-9);
476
+ --color-brand-mark-10: var(--color-brand-mark-10);
477
+ --color-brand-mark-11: var(--color-brand-mark-11);
478
+ --color-brand-mark-12: var(--color-brand-mark-12);
479
+ --color-brand-mark-13: var(--color-brand-mark-13);
480
+ --color-brand-mark-14: var(--color-brand-mark-14);
481
+ --color-brand-mark-15: var(--color-brand-mark-15);
482
+ --color-brand-mark-16: var(--color-brand-mark-16);
483
+ --color-brand-mark-17: var(--color-brand-mark-17);
484
+ --color-brand-mark-18: var(--color-brand-mark-18);
485
+ --color-brand-mark-19: var(--color-brand-mark-19);
486
+ --color-brand-mark-20: var(--color-brand-mark-20);
487
+ --color-brand-mark-21: var(--color-brand-mark-21);
488
+ --color-brand-mark-22: var(--color-brand-mark-22);
489
+ --color-brand-mark-23: var(--color-brand-mark-23);
490
+ --color-brand-mark-24: var(--color-brand-mark-24);
491
+ --color-brand-mark-25: var(--color-brand-mark-25);
492
+ --color-brand-mark-26: var(--color-brand-mark-26);
493
+ --color-brand-mark-27: var(--color-brand-mark-27);
494
+ --color-brand-mark-28: var(--color-brand-mark-28);
495
+ --color-brand-mark-29: var(--color-brand-mark-29);
496
+ --color-brand-mark-30: var(--color-brand-mark-30);
497
+ --color-brand-mark-31: var(--color-brand-mark-31);
498
+ --color-brand-mark-32: var(--color-brand-mark-32);
499
+ --color-brand-mark-33: var(--color-brand-mark-33);
500
+ --color-brand-mark-34: var(--color-brand-mark-34);
501
+ --color-brand-mark-35: var(--color-brand-mark-35);
502
+ --color-brand-mark-36: var(--color-brand-mark-36);
503
+ --color-brand-mark-37: var(--color-brand-mark-37);
504
+ --color-brand-mark-38: var(--color-brand-mark-38);
505
+ --color-brand-mark-39: var(--color-brand-mark-39);
506
+ --color-brand-mark-40: var(--color-brand-mark-40);
507
+ --color-brand-mark-41: var(--color-brand-mark-41);
508
+ --color-brand-mark-42: var(--color-brand-mark-42);
509
+ --color-brand-mark-43: var(--color-brand-mark-43);
510
+ --color-brand-mark-44: var(--color-brand-mark-44);
511
+ --color-brand-mark-45: var(--color-brand-mark-45);
512
+ --color-brand-mark-46: var(--color-brand-mark-46);
513
+ --color-brand-mark-47: var(--color-brand-mark-47);
514
+ --color-brand-primary-50: var(--color-brand-primary-50);
515
+ --color-brand-primary-100: var(--color-brand-primary-100);
516
+ --color-brand-primary-200: var(--color-brand-primary-200);
517
+ --color-brand-primary-300: var(--color-brand-primary-300);
518
+ --color-brand-primary-400: var(--color-brand-primary-400);
519
+ --color-brand-primary-500: var(--color-brand-primary-500);
520
+ --color-brand-primary-600: var(--color-brand-primary-600);
521
+ --color-brand-primary-700: var(--color-brand-primary-700);
522
+ --color-brand-primary-800: var(--color-brand-primary-800);
523
+ --color-brand-primary-900: var(--color-brand-primary-900);
524
+ --color-brand-primary-950: var(--color-brand-primary-950);
525
+ --color-accent-leap-50: var(--color-accent-leap-50);
526
+ --color-accent-leap-100: var(--color-accent-leap-100);
527
+ --color-accent-leap-200: var(--color-accent-leap-200);
528
+ --color-accent-leap-300: var(--color-accent-leap-300);
529
+ --color-accent-leap-400: var(--color-accent-leap-400);
530
+ --color-accent-leap-500: var(--color-accent-leap-500);
531
+ --color-accent-leap-600: var(--color-accent-leap-600);
532
+ --color-accent-leap-700: var(--color-accent-leap-700);
533
+ --color-accent-leap-800: var(--color-accent-leap-800);
534
+ --color-accent-leap-900: var(--color-accent-leap-900);
535
+ --color-accent-leap-950: var(--color-accent-leap-950);
536
+ --color-accent-bookub-50: var(--color-accent-bookub-50);
537
+ --color-accent-bookub-100: var(--color-accent-bookub-100);
538
+ --color-accent-bookub-200: var(--color-accent-bookub-200);
539
+ --color-accent-bookub-300: var(--color-accent-bookub-300);
540
+ --color-accent-bookub-400: var(--color-accent-bookub-400);
541
+ --color-accent-bookub-500: var(--color-accent-bookub-500);
542
+ --color-accent-bookub-600: var(--color-accent-bookub-600);
543
+ --color-accent-bookub-700: var(--color-accent-bookub-700);
544
+ --color-accent-bookub-800: var(--color-accent-bookub-800);
545
+ --color-accent-bookub-900: var(--color-accent-bookub-900);
546
+ --color-accent-bookub-950: var(--color-accent-bookub-950);
547
+ --color-accent-payub-50: var(--color-accent-payub-50);
548
+ --color-accent-payub-100: var(--color-accent-payub-100);
549
+ --color-accent-payub-200: var(--color-accent-payub-200);
550
+ --color-accent-payub-300: var(--color-accent-payub-300);
551
+ --color-accent-payub-400: var(--color-accent-payub-400);
552
+ --color-accent-payub-500: var(--color-accent-payub-500);
553
+ --color-accent-payub-600: var(--color-accent-payub-600);
554
+ --color-accent-payub-700: var(--color-accent-payub-700);
555
+ --color-accent-payub-800: var(--color-accent-payub-800);
556
+ --color-accent-payub-900: var(--color-accent-payub-900);
557
+ --color-accent-payub-950: var(--color-accent-payub-950);
558
+ --color-accent-founderub-50: var(--color-accent-founderub-50);
559
+ --color-accent-founderub-100: var(--color-accent-founderub-100);
560
+ --color-accent-founderub-200: var(--color-accent-founderub-200);
561
+ --color-accent-founderub-300: var(--color-accent-founderub-300);
562
+ --color-accent-founderub-400: var(--color-accent-founderub-400);
563
+ --color-accent-founderub-500: var(--color-accent-founderub-500);
564
+ --color-accent-founderub-600: var(--color-accent-founderub-600);
565
+ --color-accent-founderub-700: var(--color-accent-founderub-700);
566
+ --color-accent-founderub-800: var(--color-accent-founderub-800);
567
+ --color-accent-founderub-900: var(--color-accent-founderub-900);
568
+ --color-accent-founderub-950: var(--color-accent-founderub-950);
569
+ --color-neutral-0: var(--color-neutral-0);
570
+ --color-neutral-50: var(--color-neutral-50);
571
+ --color-neutral-100: var(--color-neutral-100);
572
+ --color-neutral-200: var(--color-neutral-200);
573
+ --color-neutral-300: var(--color-neutral-300);
574
+ --color-neutral-400: var(--color-neutral-400);
575
+ --color-neutral-500: var(--color-neutral-500);
576
+ --color-neutral-600: var(--color-neutral-600);
577
+ --color-neutral-700: var(--color-neutral-700);
578
+ --color-neutral-800: var(--color-neutral-800);
579
+ --color-neutral-900: var(--color-neutral-900);
580
+ --color-neutral-950: var(--color-neutral-950);
581
+ --color-neutral-1000: var(--color-neutral-1000);
582
+ --color-semantic-success-default: var(--color-semantic-success-default);
583
+ --color-semantic-success-bg: var(--color-semantic-success-bg);
584
+ --color-semantic-success-border: var(--color-semantic-success-border);
585
+ --color-semantic-success-strong: var(--color-semantic-success-strong);
586
+ --color-semantic-error-default: var(--color-semantic-error-default);
587
+ --color-semantic-error-bg: var(--color-semantic-error-bg);
588
+ --color-semantic-error-border: var(--color-semantic-error-border);
589
+ --color-semantic-error-strong: var(--color-semantic-error-strong);
590
+ --color-semantic-warning-default: var(--color-semantic-warning-default);
591
+ --color-semantic-warning-bg: var(--color-semantic-warning-bg);
592
+ --color-semantic-warning-border: var(--color-semantic-warning-border);
593
+ --color-semantic-warning-strong: var(--color-semantic-warning-strong);
594
+ --color-semantic-info-default: var(--color-semantic-info-default);
595
+ --color-semantic-info-bg: var(--color-semantic-info-bg);
596
+ --color-semantic-info-border: var(--color-semantic-info-border);
597
+ --color-semantic-info-strong: var(--color-semantic-info-strong);
598
+ --color-text-primary: var(--color-text-primary);
599
+ --color-text-secondary: var(--color-text-secondary);
600
+ --color-text-muted: var(--color-text-muted);
601
+ --color-text-subtle: var(--color-text-subtle);
602
+ --color-text-inverse: var(--color-text-inverse);
603
+ --color-text-link: var(--color-text-link);
604
+ --color-text-disabled: var(--color-text-disabled);
605
+ --color-bg-default: var(--color-bg-default);
606
+ --color-bg-subtle: var(--color-bg-subtle);
607
+ --color-bg-muted: var(--color-bg-muted);
608
+ --color-bg-raised: var(--color-bg-raised);
609
+ --color-bg-inverse: var(--color-bg-inverse);
610
+ --color-border-default: var(--color-border-default);
611
+ --color-border-subtle: var(--color-border-subtle);
612
+ --color-border-strong: var(--color-border-strong);
613
+ --color-border-inverse: var(--color-border-inverse);
614
+ --color-ring-default: var(--color-ring-default);
615
+ --color-ring-offset: var(--color-ring-offset);
616
+ --color-chart-1: var(--color-chart-1);
617
+ --color-chart-2: var(--color-chart-2);
618
+ --color-chart-3: var(--color-chart-3);
619
+ --color-chart-4: var(--color-chart-4);
620
+ --color-chart-5: var(--color-chart-5);
621
+ --color-chart-6: var(--color-chart-6);
622
+ --color-chart-7: var(--color-chart-7);
623
+ --color-chart-8: var(--color-chart-8);
624
+ --color-chart-seq-1: var(--color-chart-seq-1);
625
+ --color-chart-seq-2: var(--color-chart-seq-2);
626
+ --color-chart-seq-3: var(--color-chart-seq-3);
627
+ --color-chart-seq-4: var(--color-chart-seq-4);
628
+ --color-chart-seq-5: var(--color-chart-seq-5);
629
+ --color-chart-seq-6: var(--color-chart-seq-6);
630
+ --color-chart-seq-7: var(--color-chart-seq-7);
631
+ --color-chart-div-1: var(--color-chart-div-1);
632
+ --color-chart-div-2: var(--color-chart-div-2);
633
+ --color-chart-div-3: var(--color-chart-div-3);
634
+ --color-chart-div-4: var(--color-chart-div-4);
635
+ --color-chart-div-5: var(--color-chart-div-5);
636
+ --color-chart-div-6: var(--color-chart-div-6);
637
+ --color-chart-div-7: var(--color-chart-div-7);
638
+ --spacing-0: var(--spacing-0);
639
+ --spacing-1: var(--spacing-1);
640
+ --spacing-2: var(--spacing-2);
641
+ --spacing-3: var(--spacing-3);
642
+ --spacing-4: var(--spacing-4);
643
+ --spacing-5: var(--spacing-5);
644
+ --spacing-6: var(--spacing-6);
645
+ --spacing-7: var(--spacing-7);
646
+ --spacing-8: var(--spacing-8);
647
+ --spacing-9: var(--spacing-9);
648
+ --spacing-10: var(--spacing-10);
649
+ --spacing-11: var(--spacing-11);
650
+ --spacing-12: var(--spacing-12);
651
+ --spacing-14: var(--spacing-14);
652
+ --spacing-16: var(--spacing-16);
653
+ --spacing-20: var(--spacing-20);
654
+ --spacing-24: var(--spacing-24);
655
+ --spacing-28: var(--spacing-28);
656
+ --spacing-32: var(--spacing-32);
657
+ --spacing-40: var(--spacing-40);
658
+ --spacing-48: var(--spacing-48);
659
+ --spacing-56: var(--spacing-56);
660
+ --spacing-64: var(--spacing-64);
661
+ --spacing-control-xs: var(--size-control-xs);
662
+ --spacing-control-sm: var(--size-control-sm);
663
+ --spacing-control-md: var(--size-control-md);
664
+ --spacing-control-lg: var(--size-control-lg);
665
+ --spacing-control-xl: var(--size-control-xl);
666
+ --spacing-px: var(--spacing-px);
667
+ --spacing-0-5: var(--spacing-0-5);
668
+ --spacing-1-5: var(--spacing-1-5);
669
+ --spacing-2-5: var(--spacing-2-5);
670
+ --spacing-3-5: var(--spacing-3-5);
671
+ --spacing-container-sm: var(--container-sm);
672
+ --spacing-container-md: var(--container-md);
673
+ --spacing-container-lg: var(--container-lg);
674
+ --spacing-container-xl: var(--container-xl);
675
+ --spacing-container-2xl: var(--container-2xl);
676
+ --spacing-container-nexub: var(--container-nexub);
677
+ --spacing-container-prose: var(--container-prose);
678
+ --radius-none: var(--radius-none);
679
+ --radius-xs: var(--radius-xs);
680
+ --radius-sm: var(--radius-sm);
681
+ --radius-md: var(--radius-md);
682
+ --radius-lg: var(--radius-lg);
683
+ --radius-xl: var(--radius-xl);
684
+ --radius-2xl: var(--radius-2xl);
685
+ --radius-3xl: var(--radius-3xl);
686
+ --radius-full: var(--radius-full);
687
+ --radius-shape-control: var(--shape-control);
688
+ --radius-shape-field: var(--shape-field);
689
+ --radius-shape-container: var(--shape-container);
690
+ --radius-shape-overlay: var(--shape-overlay);
691
+ --radius-shape-tooltip: var(--shape-tooltip);
692
+ --radius-shape-min: var(--shape-min);
693
+ --shadow-elevation-0: var(--elevation-0);
694
+ --shadow-elevation-1: var(--elevation-1);
695
+ --shadow-elevation-2: var(--elevation-2);
696
+ --shadow-elevation-3: var(--elevation-3);
697
+ --shadow-xs: var(--shadow-xs);
698
+ --shadow-sm: var(--shadow-sm);
699
+ --shadow-md: var(--shadow-md);
700
+ --shadow-lg: var(--shadow-lg);
701
+ --shadow-xl: var(--shadow-xl);
702
+ --shadow-2xl: var(--shadow-2xl);
703
+ --shadow-card: var(--shadow-card);
704
+ --shadow-plans: var(--shadow-plans);
705
+ --shadow-glow: var(--shadow-glow);
706
+ --shadow-inner: var(--shadow-inner);
707
+ --shadow-inner-highlight: var(--shadow-inner-highlight);
708
+ --shadow-focus: var(--shadow-focus);
709
+ --shadow-lift: var(--shadow-lift);
710
+ --z-index-hide: var(--z-hide);
711
+ --z-index-base: var(--z-base);
712
+ --z-index-raised: var(--z-raised);
713
+ --z-index-dropdown: var(--z-dropdown);
714
+ --z-index-sticky: var(--z-sticky);
715
+ --z-index-banner: var(--z-banner);
716
+ --z-index-overlay: var(--z-overlay);
717
+ --z-index-modal: var(--z-modal);
718
+ --z-index-popover: var(--z-popover);
719
+ --z-index-skipLink: var(--z-skipLink);
720
+ --z-index-toast: var(--z-toast);
721
+ --z-index-tooltip: var(--z-tooltip);
722
+ --z-index-commandK: var(--z-commandK);
723
+ --font-sans: var(--font-family-sans);
724
+ --font-display: var(--font-family-display);
725
+ --font-mono: var(--font-family-mono);
726
+ --font-devanagari: var(--font-family-devanagari);
727
+ --font-tamil: var(--font-family-tamil);
728
+ --text-display-lg: var(--type-display-lg-size);
729
+ --text-display-lg--line-height: var(--type-display-lg-lineHeight);
730
+ --text-display-lg--letter-spacing: var(--type-display-lg-letterSpacing);
731
+ --text-display-lg--font-weight: var(--type-display-lg-weight);
732
+ --text-display-md: var(--type-display-md-size);
733
+ --text-display-md--line-height: var(--type-display-md-lineHeight);
734
+ --text-display-md--letter-spacing: var(--type-display-md-letterSpacing);
735
+ --text-display-md--font-weight: var(--type-display-md-weight);
736
+ --text-display-sm: var(--type-display-sm-size);
737
+ --text-display-sm--line-height: var(--type-display-sm-lineHeight);
738
+ --text-display-sm--letter-spacing: var(--type-display-sm-letterSpacing);
739
+ --text-display-sm--font-weight: var(--type-display-sm-weight);
740
+ --text-headline-lg: var(--type-headline-lg-size);
741
+ --text-headline-lg--line-height: var(--type-headline-lg-lineHeight);
742
+ --text-headline-lg--letter-spacing: var(--type-headline-lg-letterSpacing);
743
+ --text-headline-lg--font-weight: var(--type-headline-lg-weight);
744
+ --text-headline-md: var(--type-headline-md-size);
745
+ --text-headline-md--line-height: var(--type-headline-md-lineHeight);
746
+ --text-headline-md--letter-spacing: var(--type-headline-md-letterSpacing);
747
+ --text-headline-md--font-weight: var(--type-headline-md-weight);
748
+ --text-headline-sm: var(--type-headline-sm-size);
749
+ --text-headline-sm--line-height: var(--type-headline-sm-lineHeight);
750
+ --text-headline-sm--letter-spacing: var(--type-headline-sm-letterSpacing);
751
+ --text-headline-sm--font-weight: var(--type-headline-sm-weight);
752
+ --text-title-lg: var(--type-title-lg-size);
753
+ --text-title-lg--line-height: var(--type-title-lg-lineHeight);
754
+ --text-title-lg--letter-spacing: var(--type-title-lg-letterSpacing);
755
+ --text-title-lg--font-weight: var(--type-title-lg-weight);
756
+ --text-title-md: var(--type-title-md-size);
757
+ --text-title-md--line-height: var(--type-title-md-lineHeight);
758
+ --text-title-md--letter-spacing: var(--type-title-md-letterSpacing);
759
+ --text-title-md--font-weight: var(--type-title-md-weight);
760
+ --text-title-sm: var(--type-title-sm-size);
761
+ --text-title-sm--line-height: var(--type-title-sm-lineHeight);
762
+ --text-title-sm--letter-spacing: var(--type-title-sm-letterSpacing);
763
+ --text-title-sm--font-weight: var(--type-title-sm-weight);
764
+ --text-body-lg: var(--type-body-lg-size);
765
+ --text-body-lg--line-height: var(--type-body-lg-lineHeight);
766
+ --text-body-lg--letter-spacing: var(--type-body-lg-letterSpacing);
767
+ --text-body-lg--font-weight: var(--type-body-lg-weight);
768
+ --text-body-md: var(--type-body-md-size);
769
+ --text-body-md--line-height: var(--type-body-md-lineHeight);
770
+ --text-body-md--letter-spacing: var(--type-body-md-letterSpacing);
771
+ --text-body-md--font-weight: var(--type-body-md-weight);
772
+ --text-body-sm: var(--type-body-sm-size);
773
+ --text-body-sm--line-height: var(--type-body-sm-lineHeight);
774
+ --text-body-sm--letter-spacing: var(--type-body-sm-letterSpacing);
775
+ --text-body-sm--font-weight: var(--type-body-sm-weight);
776
+ --text-label-lg: var(--type-label-lg-size);
777
+ --text-label-lg--line-height: var(--type-label-lg-lineHeight);
778
+ --text-label-lg--letter-spacing: var(--type-label-lg-letterSpacing);
779
+ --text-label-lg--font-weight: var(--type-label-lg-weight);
780
+ --text-label-md: var(--type-label-md-size);
781
+ --text-label-md--line-height: var(--type-label-md-lineHeight);
782
+ --text-label-md--letter-spacing: var(--type-label-md-letterSpacing);
783
+ --text-label-md--font-weight: var(--type-label-md-weight);
784
+ --text-label-sm: var(--type-label-sm-size);
785
+ --text-label-sm--line-height: var(--type-label-sm-lineHeight);
786
+ --text-label-sm--letter-spacing: var(--type-label-sm-letterSpacing);
787
+ --text-label-sm--font-weight: var(--type-label-sm-weight);
788
+ --ease-spatial-fast: var(--motion-spring-spatial-fast-easing);
789
+ --ease-spatial-default: var(--motion-spring-spatial-default-easing);
790
+ --ease-spatial-slow: var(--motion-spring-spatial-slow-easing);
791
+ --ease-effects-fast: var(--motion-spring-effects-fast-easing);
792
+ --ease-effects-default: var(--motion-spring-effects-default-easing);
793
+ --ease-effects-slow: var(--motion-spring-effects-slow-easing);
794
+ --ease-expressive-fast: var(--motion-spring-expressive-fast-easing);
795
+ --ease-expressive-default: var(--motion-spring-expressive-default-easing);
796
+ --ease-expressive-slow: var(--motion-spring-expressive-slow-easing);
797
+ --transition-duration-spatial-fast: var(--motion-spring-spatial-fast-duration);
798
+ --transition-duration-spatial-default: var(--motion-spring-spatial-default-duration);
799
+ --transition-duration-spatial-slow: var(--motion-spring-spatial-slow-duration);
800
+ --transition-duration-effects-fast: var(--motion-spring-effects-fast-duration);
801
+ --transition-duration-effects-default: var(--motion-spring-effects-default-duration);
802
+ --transition-duration-effects-slow: var(--motion-spring-effects-slow-duration);
803
+ --transition-duration-expressive-fast: var(--motion-spring-expressive-fast-duration);
804
+ --transition-duration-expressive-default: var(--motion-spring-expressive-default-duration);
805
+ --transition-duration-expressive-slow: var(--motion-spring-expressive-slow-duration);
806
+ --animate-accordion-down: accordion-down var(--motion-spring-spatial-default-duration) var(--motion-spring-spatial-default-easing);
807
+ --animate-accordion-up: accordion-up var(--motion-spring-spatial-fast-duration) var(--motion-spring-spatial-fast-easing);
808
+ @keyframes accordion-down {
809
+ from { height: 0; }
810
+ to { height: var(--radix-accordion-content-height, var(--radix-collapsible-content-height)); }
811
+ }
812
+ @keyframes accordion-up {
813
+ from { height: var(--radix-accordion-content-height, var(--radix-collapsible-content-height)); }
814
+ to { height: 0; }
815
+ }
816
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nexub/tokens",
3
- "version": "1.8.0",
3
+ "version": "1.9.0",
4
4
  "description": "Design tokens for Nexub Design System — colours, typography, spacing, radii, shadows, and motion as CSS variables and Tailwind preset.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -38,19 +38,26 @@
38
38
  },
39
39
  "./css": "./dist/css/variables.css",
40
40
  "./css/roles": "./dist/css/roles.css",
41
+ "./seed": {
42
+ "types": "./dist/js/seed.d.ts",
43
+ "default": "./dist/js/seed.js"
44
+ },
41
45
  "./tailwind": {
42
46
  "types": "./dist/tailwind/preset.d.ts",
43
47
  "default": "./dist/tailwind/preset.js"
44
48
  },
49
+ "./tailwind.css": "./dist/tailwind/theme.css",
45
50
  "./json": "./dist/json/tokens.json",
46
51
  "./package.json": "./package.json"
47
52
  },
48
53
  "devDependencies": {
49
- "@material/material-color-utilities": "0.3.0",
50
54
  "style-dictionary": "^5.7.0",
55
+ "tailwindcss": "^3.4.19",
56
+ "tailwindcss-v4": "npm:tailwindcss@^4.3.3",
51
57
  "typescript": "^5.9.3"
52
58
  },
53
59
  "dependencies": {
60
+ "@material/material-color-utilities": "0.3.0",
54
61
  "tailwindcss-animate": "^1.0.7"
55
62
  },
56
63
  "peerDependencies": {