@nexub/tokens 7.7.0 → 7.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/bin/README.md +1 -0
  2. package/bin/nexub-migrate.mjs +47 -1
  3. package/dist/css/roles.css +207 -0
  4. package/dist/js/generated/native.d.ts +235 -0
  5. package/dist/js/generated/native.js +235 -0
  6. package/package.json +1 -1
package/bin/README.md CHANGED
@@ -18,6 +18,7 @@ npx nexub-migrate --rules logical-classes --ignore 'src/legacy/**'
18
18
  | `opacity-modifier` | Reports `bg-[var(--x)]/10` (Tailwind 3 emits nothing). `--fix` rewrites to `bg-[color-mix(in_srgb,var(--x)_10%,transparent)]`. |
19
19
  | `keep-5-defaults` | **Opt-in** (`--rules keep-5-defaults`). Keeps 5.x behaviour on 6.0 by adding the defaults 6.0 changes as explicit props, in files that import from `@nexub/react`: `<Autocomplete>` without `mode` gets `mode="inline"`; `<DataTable>`/`<DataTableVirtual>` with `enableRowSelection` and no `selectionColumn` get `selectionColumn={false}`. Tags with a `{...spread}` are reported, not changed. |
20
20
  | `deprecated-components` | `@nexub/react` components removed in 3.0, in files that import from `@nexub/react`: `Banner`/`Callout` → `Alert`; `Tag` → `<Badge variant="soft">`; `StatusPill label="x"` → `<Badge variant="soft">x</Badge>`; `*Props` types renamed; imports deduped; aliases (`Tag as T`) keep their local name. Reported only: `StatusPill dot`, `*Variants`, and uses outside JSX (`typeof Banner`, `styled(Tag)`). |
21
+ | `changes-in-8` | Report only, on by default. What 8.0 removes and flips: the legacy `--duration-*` / `--ease-{linear,in,out,in-out,out-expo,spring}` tokens (use the `--motion-spring-*` tokens); `easing` on `Fade`/`Scale`/`Slide`/`Collapse`; `Dialog`/`AlertDialog`/`Drawer`/`Sheet` `.Root` and `CommandPalette` without `scrollLock` (the default becomes `"class"`, which needs `@nexub/themes/base`); `safeHref()` calls without `strict` and `*href` literals with a custom scheme (`slack:`, `zoommtg:` …) in files that import Nexub (8.0 drops them); and, where `@nexub/themes` is imported without `data-style`, a note that Signature becomes the default look (`data-style="classic"` keeps 7.x). |
21
22
 
22
23
  **Where classes are looked for.** `.html`/`.mdx`: `class=`/`className=` attributes. `.css`/`.scss`: `@apply`.
23
24
  JS/TS: string and template literals (static parts only) that are either in an explicit class context —
package/bin/nexub-migrate.mjs CHANGED
@@ -6,7 +6,7 @@ import path from 'node:path';
6
6
  import { fileURLToPath } from 'node:url';
7
7
  import { parseArgs } from 'node:util';
8
8
 
9
- export const RULES = ['legacy-tokens', 'logical-classes', 'tw-animate', 'opacity-modifier', 'deprecated-components', 'tailwind-3-preset', 'keep-5-defaults', 'removed-in-7'];
9
+ export const RULES = ['legacy-tokens', 'logical-classes', 'tw-animate', 'opacity-modifier', 'deprecated-components', 'tailwind-3-preset', 'keep-5-defaults', 'removed-in-7', 'changes-in-8'];
10
10
  // Run only when asked for by --rules: they keep old behaviour instead of moving code forward.
11
11
  const OPT_IN = new Set(['keep-5-defaults']);
12
12
  export const DEFAULT_RULES = RULES.filter((r) => !OPT_IN.has(r));
@@ -408,6 +408,48 @@ function pinDefaults(src) {
408
408
  return { output, items };
409
409
  }
410
410
 
411
+ // ─── changes-in-8: report what 8.0 removes and which defaults it flips ───────
412
+ // Report only: each needs a choice (adopt the new default now, or pin the old one).
413
+ // The 7.x legacy motion tokens (tokens/motion.json); the spring tokens (--ease-spatial-* …) stay.
414
+ const LEGACY_MOTION = /(?<![\w-])--(?:duration-(?:instant|fast|normal|slow|slower)|ease-(?:linear|in|out|in-out|out-expo|spring))(?![\w-])(?!['"]?\s*:)/g;
415
+ const EASING_COMPONENTS = /<(Fade|Scale|Slide|Collapse)\b[^>]*\beasing=/g;
416
+ const SCROLL_LOCKED = /<((?:Dialog|AlertDialog|Drawer|Sheet)\.Root|CommandPalette)(?![\w.$-])/g;
417
+ const STRICT_SCHEMES = new Set(['http', 'https', 'mailto', 'tel', 'sms']);
418
+ const SCRIPT_SCHEMES = new Set(['javascript', 'vbscript', 'data', 'file']); // already dropped in 7.x
419
+ const SIGNATURE_NOTE = 'Signature becomes the default look in 8.0: try it now with data-style="signature" on <html>, or set data-style="classic" to keep the 7.x (Material 3) look';
420
+ const HREF_LITERAL = /\b\w*href\s*[=:]\s*\{?\s*(['"`])\s*([a-z][a-z0-9+.-]*):/gi;
421
+
422
+ function changesIn8(src, ext, report) {
423
+ for (const m of src.matchAll(LEGACY_MOTION))
424
+ report(m.index, `${m[0]} is removed in 8.0 (deprecated in 7.3): use the spring tokens, e.g. var(--motion-spring-effects-default-duration) and var(--motion-spring-effects-default-easing)`);
425
+ if (!COMPONENT_EXTS.has(ext)) {
426
+ if (ext === '.css' && /@nexub\/themes/.test(src) && !/data-style/.test(src))
427
+ for (const m of src.matchAll(/@import\s+(?:url\()?['"]@nexub\/themes/g)) { report(m.index, SIGNATURE_NOTE); break; }
428
+ return;
429
+ }
430
+ if (/@nexub\/react['"/]/.test(src)) {
431
+ for (const m of src.matchAll(EASING_COMPONENTS))
432
+ report(m.index, `<${m[1]} easing> is removed in 8.0 (deprecated in 7.3): drop easing and use duration, which rides the spring tokens`);
433
+ for (const m of src.matchAll(SCROLL_LOCKED)) {
434
+ const tag = readTag(src, m.index + m[0].length);
435
+ if (tag && tag.attrs.some((a) => a.name === 'scrollLock')) continue;
436
+ const spread = tag && src.slice(m.index, tag.end).includes('{...') ? ' (unless the spread sets scrollLock)' : '';
437
+ report(m.index, `<${m[1]}> uses the default scrollLock${spread}, which becomes "class" in 8.0: load @nexub/themes/base CSS (it styles html.nexub-scroll-lock) and try scrollLock="class" now, or pin scrollLock="style" to keep 7.x`);
438
+ }
439
+ for (const m of src.matchAll(/\bsafeHref\(([^()]*)\)/g))
440
+ if (!/\bstrict\b/.test(m[1])) report(m.index, 'safeHref() turns strict in 8.0 (only relative, http(s), mailto, tel, sms): pass { strict: true } now, or { strict: false } to keep custom schemes');
441
+ }
442
+ if (/@nexub\/(react|patterns|marketing)['"/]/.test(src)) {
443
+ for (const m of src.matchAll(HREF_LITERAL)) {
444
+ const s = m[2].toLowerCase();
445
+ if (!STRICT_SCHEMES.has(s) && !SCRIPT_SCHEMES.has(s))
446
+ report(m.index, `"${m[2]}:" link: 8.0 Nexub links use strict safeHref and drop it (only relative, http(s), mailto, tel, sms); render your own <a> for custom schemes`);
447
+ }
448
+ }
449
+ const themes = /\bimport\s+['"]@nexub\/themes/.exec(src);
450
+ if (themes && !/data-style/.test(src)) report(themes.index, SIGNATURE_NOTE);
451
+ }
452
+
411
453
  // ─── per-file migration ──────────────────────────────────────────────────────
412
454
  /**
413
455
  * Migrate one file's text. Returns { output, manual: [{ line, rule, message }] }.
@@ -458,6 +500,7 @@ export function migrateSource(src, { ext, rules = new Set(DEFAULT_RULES), fix =
458
500
  for (const m of src.matchAll(/<Autocomplete\b[^>]*\bmode=/g))
459
501
  items.push({ at: m.index, rule: 'removed-in-7', message: 'Autocomplete `mode` is removed in 7.0 (the popover is the only layout): remove it; for an always-open list use the Combobox parts' });
460
502
  }
503
+ if (rules.has('changes-in-8')) changesIn8(src, ext, (at, message) => items.push({ at, rule: 'changes-in-8', message }));
461
504
  // Rewrites never add or remove newlines, so offsets in src and text share line numbers.
462
505
  const lineOf = (at) => src.slice(0, at).split('\n').length;
463
506
  const manual = items.map(({ at, line, rule, message }) => ({ line: line ?? lineOf(at), rule, message })).sort((a, b) => a.line - b.line);
@@ -525,6 +568,9 @@ Rules:
525
568
  (Autocomplete's inline layout is gone in 7.0, so it is not pinned)
526
569
  removed-in-7 report what 7.0 removes: <StepIndicator> (use Stepper) and
527
570
  Autocomplete's mode prop
571
+ changes-in-8 report what 8.0 removes and flips: legacy --duration-*/--ease-* tokens,
572
+ the Motion easing prop, the default scrollLock (becomes "class"),
573
+ non-strict safeHref and custom-scheme links, and the Signature look
528
574
 
529
575
  Ignored: node_modules, dist, build, .next, out, coverage, files over 1 MB.
530
576
  Exit codes: 0 ok, 1 --check found something, 2 usage error.`;
package/dist/css/roles.css CHANGED
@@ -406,6 +406,198 @@
406
406
  --color-chart-div-7: light-dark(var(--color-palette-primary-40), var(--color-palette-primary-80));
407
407
  }
408
408
 
409
+ /* Signature style (7.9 opt-in): neutral palettes, brand-indigo primary, ~10px controls, crisp elevation. */
410
+
411
+ [data-style='signature'] {
412
+ --color-palette-primary-0: #000000;
413
+ --color-palette-primary-5: #00004e;
414
+ --color-palette-primary-10: #00016d;
415
+ --color-palette-primary-15: #00018c;
416
+ --color-palette-primary-20: #0001ac;
417
+ --color-palette-primary-30: #1a21d7;
418
+ --color-palette-primary-35: #2c34e2;
419
+ --color-palette-primary-40: #3b44ee;
420
+ --color-palette-primary-50: #5964ff;
421
+ --color-palette-primary-60: #7c85ff;
422
+ --color-palette-primary-70: #9da3ff;
423
+ --color-palette-primary-80: #bec2ff;
424
+ --color-palette-primary-85: #cfd1ff;
425
+ --color-palette-primary-90: #e0e0ff;
426
+ --color-palette-primary-95: #f1efff;
427
+ --color-palette-primary-100: #ffffff;
428
+ --color-palette-secondary-0: #000000;
429
+ --color-palette-secondary-5: #101016;
430
+ --color-palette-secondary-10: #1b1b21;
431
+ --color-palette-secondary-15: #25252b;
432
+ --color-palette-secondary-20: #303036;
433
+ --color-palette-secondary-30: #47464c;
434
+ --color-palette-secondary-35: #525258;
435
+ --color-palette-secondary-40: #5e5e64;
436
+ --color-palette-secondary-80: #c8c5cd;
437
+ --color-palette-secondary-85: #d6d3db;
438
+ --color-palette-secondary-90: #e4e1e9;
439
+ --color-palette-secondary-95: #f2eff7;
440
+ --color-palette-secondary-100: #ffffff;
441
+ --color-palette-neutral-0: #000000;
442
+ --color-palette-neutral-4: #0e0e0e;
443
+ --color-palette-neutral-5: #111111;
444
+ --color-palette-neutral-6: #131313;
445
+ --color-palette-neutral-10: #1b1b1b;
446
+ --color-palette-neutral-12: #1f1f1f;
447
+ --color-palette-neutral-17: #2a2a2a;
448
+ --color-palette-neutral-20: #303030;
449
+ --color-palette-neutral-22: #353535;
450
+ --color-palette-neutral-24: #393939;
451
+ --color-palette-neutral-87: #dadada;
452
+ --color-palette-neutral-90: #e2e2e2;
453
+ --color-palette-neutral-92: #e8e8e8;
454
+ --color-palette-neutral-94: #eeeeee;
455
+ --color-palette-neutral-95: #f1f1f1;
456
+ --color-palette-neutral-96: #f3f3f3;
457
+ --color-palette-neutral-98: #f9f9f9;
458
+ --color-palette-neutral-100: #ffffff;
459
+ --color-palette-neutral-variant-20: #32302e;
460
+ --color-palette-neutral-variant-25: #3e3b39;
461
+ --color-palette-neutral-variant-30: #494644;
462
+ --color-palette-neutral-variant-35: #555250;
463
+ --color-palette-neutral-variant-40: #615e5b;
464
+ --color-palette-neutral-variant-45: #6e6a67;
465
+ --color-palette-neutral-variant-50: #7a7674;
466
+ --color-palette-neutral-variant-60: #94908d;
467
+ --color-palette-neutral-variant-65: #a29d9a;
468
+ --color-palette-neutral-variant-70: #afaaa7;
469
+ --color-palette-neutral-variant-72: #b5b0ad;
470
+ --color-palette-neutral-variant-76: #c0bab8;
471
+ --color-palette-neutral-variant-80: #cbc5c2;
472
+ --color-palette-neutral-variant-85: #d9d3d0;
473
+ --color-palette-neutral-variant-90: #e7e1de;
474
+ --shape-control: 0.625rem;
475
+ --shape-field: 0.625rem;
476
+ --shape-container: 1rem;
477
+ --type-display-xl-letterSpacing: -0.05em;
478
+ --type-display-lg-letterSpacing: -0.035em;
479
+ --type-display-md-letterSpacing: -0.03em;
480
+ --type-display-sm-letterSpacing: -0.025em;
481
+ --elevation-1: 0 0 0 1px light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08)), 0 1px 2px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.4));
482
+ --elevation-2: 0 0 0 1px light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.1)), 0 1px 2px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.4)), 0 6px 16px -4px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5));
483
+ --elevation-3: 0 0 0 1px light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.1)), 0 2px 4px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.45)), 0 16px 36px -8px light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.6));
484
+ }
485
+
486
+ :not(:root)[data-style='signature'] {
487
+ --color-primary: light-dark(var(--color-palette-primary-40), var(--color-palette-primary-80));
488
+ --color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-20));
489
+ --color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
490
+ --color-on-primary-container: light-dark(var(--color-palette-primary-10), var(--color-palette-primary-90));
491
+ --color-secondary: light-dark(var(--color-palette-secondary-40), var(--color-palette-secondary-80));
492
+ --color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-20));
493
+ --color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
494
+ --color-on-secondary-container: light-dark(var(--color-palette-secondary-10), var(--color-palette-secondary-90));
495
+ --color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
496
+ --color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
497
+ --color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
498
+ --color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
499
+ --color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
500
+ --color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
501
+ --color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
502
+ --color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
503
+ --color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
504
+ --color-on-surface: light-dark(var(--color-palette-neutral-10), var(--color-palette-neutral-90));
505
+ --color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
506
+ --color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-40), var(--color-palette-neutral-variant-72));
507
+ --color-outline: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
508
+ --color-outline-variant: light-dark(var(--color-palette-neutral-variant-80), var(--color-palette-neutral-variant-30));
509
+ --color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
510
+ --color-inverse-on-surface: light-dark(var(--color-palette-neutral-95), var(--color-palette-neutral-20));
511
+ --color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
512
+ --color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
513
+ }
514
+ [data-contrast='medium']:not(:root)[data-style='signature'], [data-contrast='medium'] :not(:root)[data-style='signature'] {
515
+ --color-primary: light-dark(var(--color-palette-primary-35), var(--color-palette-primary-85));
516
+ --color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-15));
517
+ --color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
518
+ --color-on-primary-container: light-dark(var(--color-palette-primary-5), var(--color-palette-primary-95));
519
+ --color-secondary: light-dark(var(--color-palette-secondary-35), var(--color-palette-secondary-85));
520
+ --color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-15));
521
+ --color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
522
+ --color-on-secondary-container: light-dark(var(--color-palette-secondary-5), var(--color-palette-secondary-95));
523
+ --color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
524
+ --color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
525
+ --color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
526
+ --color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
527
+ --color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
528
+ --color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
529
+ --color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
530
+ --color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
531
+ --color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
532
+ --color-on-surface: light-dark(var(--color-palette-neutral-5), var(--color-palette-neutral-95));
533
+ --color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-25), var(--color-palette-neutral-variant-85));
534
+ --color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-35), var(--color-palette-neutral-variant-76));
535
+ --color-outline: light-dark(var(--color-palette-neutral-variant-40), var(--color-palette-neutral-variant-70));
536
+ --color-outline-variant: light-dark(var(--color-palette-neutral-variant-65), var(--color-palette-neutral-variant-45));
537
+ --color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
538
+ --color-inverse-on-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-10));
539
+ --color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
540
+ --color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
541
+ }
542
+ [data-contrast='high']:not(:root)[data-style='signature'], [data-contrast='high'] :not(:root)[data-style='signature'] {
543
+ --color-primary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
544
+ --color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
545
+ --color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
546
+ --color-on-primary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
547
+ --color-secondary: light-dark(var(--color-palette-secondary-30), var(--color-palette-secondary-90));
548
+ --color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-10));
549
+ --color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
550
+ --color-on-secondary-container: light-dark(var(--color-palette-secondary-0), var(--color-palette-secondary-100));
551
+ --color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
552
+ --color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
553
+ --color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
554
+ --color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
555
+ --color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
556
+ --color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
557
+ --color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
558
+ --color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
559
+ --color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
560
+ --color-on-surface: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-100));
561
+ --color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-20), var(--color-palette-neutral-variant-90));
562
+ --color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
563
+ --color-outline: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
564
+ --color-outline-variant: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
565
+ --color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
566
+ --color-inverse-on-surface: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-0));
567
+ --color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
568
+ --color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
569
+ }
570
+ @media (prefers-contrast: more) {
571
+ :root:not([data-contrast]):not(:root)[data-style='signature'], :root:not([data-contrast]) :not(:root)[data-style='signature'] {
572
+ --color-primary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
573
+ --color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
574
+ --color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
575
+ --color-on-primary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
576
+ --color-secondary: light-dark(var(--color-palette-secondary-30), var(--color-palette-secondary-90));
577
+ --color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-10));
578
+ --color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
579
+ --color-on-secondary-container: light-dark(var(--color-palette-secondary-0), var(--color-palette-secondary-100));
580
+ --color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
581
+ --color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
582
+ --color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
583
+ --color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
584
+ --color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
585
+ --color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
586
+ --color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
587
+ --color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
588
+ --color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
589
+ --color-on-surface: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-100));
590
+ --color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-20), var(--color-palette-neutral-variant-90));
591
+ --color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
592
+ --color-outline: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
593
+ --color-outline-variant: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
594
+ --color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
595
+ --color-inverse-on-surface: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-0));
596
+ --color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
597
+ --color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
598
+ }
599
+ }
600
+
409
601
  @media (color-gamut: p3) {
410
602
  @supports (color: oklch(from red l c h)) {
411
603
  :root, [data-contrast='standard'] {
@@ -521,5 +713,20 @@
521
713
  --color-tertiary: light-dark(oklch(from var(--color-palette-founderub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-founderub-90) l calc(c * 1.18) h));
522
714
  }
523
715
  }
716
+
717
+ :not(:root)[data-style='signature'] {
718
+ --color-primary: light-dark(oklch(from var(--color-palette-primary-40) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-80) l calc(c * 1.18) h));
719
+ }
720
+ [data-contrast='medium']:not(:root)[data-style='signature'], [data-contrast='medium'] :not(:root)[data-style='signature'] {
721
+ --color-primary: light-dark(oklch(from var(--color-palette-primary-35) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-85) l calc(c * 1.18) h));
722
+ }
723
+ [data-contrast='high']:not(:root)[data-style='signature'], [data-contrast='high'] :not(:root)[data-style='signature'] {
724
+ --color-primary: light-dark(oklch(from var(--color-palette-primary-30) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-90) l calc(c * 1.18) h));
725
+ }
726
+ @media (prefers-contrast: more) {
727
+ :root:not([data-contrast]):not(:root)[data-style='signature'], :root:not([data-contrast]) :not(:root)[data-style='signature'] {
728
+ --color-primary: light-dark(oklch(from var(--color-palette-primary-30) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-90) l calc(c * 1.18) h));
729
+ }
730
+ }
524
731
  }
525
732
  }
package/dist/js/generated/native.d.ts CHANGED
@@ -788,6 +788,241 @@ export declare const native: {
788
788
  readonly dark: "0 0 0 1px rgba(255,255,255,0.08), 0 4px 8px rgba(0,0,0,0.45), 0 20px 48px rgba(0,0,0,0.55)";
789
789
  };
790
790
  };
791
+ readonly signature: {
792
+ readonly roles: {
793
+ readonly standard: {
794
+ readonly light: {
795
+ readonly primary: "#3b44ee";
796
+ readonly "on-primary": "#ffffff";
797
+ readonly "primary-container": "#e0e0ff";
798
+ readonly "on-primary-container": "#00016d";
799
+ readonly secondary: "#5e5e64";
800
+ readonly "on-secondary": "#ffffff";
801
+ readonly "secondary-container": "#e4e1e9";
802
+ readonly "on-secondary-container": "#1b1b21";
803
+ readonly surface: "#f9f9f9";
804
+ readonly "surface-dim": "#dadada";
805
+ readonly "surface-bright": "#f9f9f9";
806
+ readonly "surface-container-lowest": "#ffffff";
807
+ readonly "surface-container-low": "#f3f3f3";
808
+ readonly "surface-container": "#eeeeee";
809
+ readonly "surface-container-high": "#e8e8e8";
810
+ readonly "surface-container-highest": "#e2e2e2";
811
+ readonly "surface-elevated": "#ffffff";
812
+ readonly "on-surface": "#1b1b1b";
813
+ readonly "on-surface-variant": "#494644";
814
+ readonly "on-surface-muted": "#615e5b";
815
+ readonly outline: "#7a7674";
816
+ readonly "outline-variant": "#cbc5c2";
817
+ readonly "inverse-surface": "#303030";
818
+ readonly "inverse-on-surface": "#f1f1f1";
819
+ readonly "inverse-primary": "#bec2ff";
820
+ readonly scrim: "#000000";
821
+ readonly tertiary: "#3b44ee";
822
+ readonly "on-tertiary": "#ffffff";
823
+ readonly "tertiary-container": "#e0e0ff";
824
+ readonly "on-tertiary-container": "#00016d";
825
+ };
826
+ readonly dark: {
827
+ readonly primary: "#bec2ff";
828
+ readonly "on-primary": "#0001ac";
829
+ readonly "primary-container": "#1a21d7";
830
+ readonly "on-primary-container": "#e0e0ff";
831
+ readonly secondary: "#c8c5cd";
832
+ readonly "on-secondary": "#303036";
833
+ readonly "secondary-container": "#47464c";
834
+ readonly "on-secondary-container": "#e4e1e9";
835
+ readonly surface: "#131313";
836
+ readonly "surface-dim": "#131313";
837
+ readonly "surface-bright": "#393939";
838
+ readonly "surface-container-lowest": "#0e0e0e";
839
+ readonly "surface-container-low": "#1b1b1b";
840
+ readonly "surface-container": "#1f1f1f";
841
+ readonly "surface-container-high": "#2a2a2a";
842
+ readonly "surface-container-highest": "#353535";
843
+ readonly "surface-elevated": "#2a2a2a";
844
+ readonly "on-surface": "#e2e2e2";
845
+ readonly "on-surface-variant": "#cbc5c2";
846
+ readonly "on-surface-muted": "#b5b0ad";
847
+ readonly outline: "#94908d";
848
+ readonly "outline-variant": "#494644";
849
+ readonly "inverse-surface": "#e2e2e2";
850
+ readonly "inverse-on-surface": "#303030";
851
+ readonly "inverse-primary": "#3b44ee";
852
+ readonly scrim: "#000000";
853
+ readonly tertiary: "#bec2ff";
854
+ readonly "on-tertiary": "#0001ac";
855
+ readonly "tertiary-container": "#1a21d7";
856
+ readonly "on-tertiary-container": "#e0e0ff";
857
+ };
858
+ };
859
+ readonly medium: {
860
+ readonly light: {
861
+ readonly primary: "#2c34e2";
862
+ readonly "on-primary": "#ffffff";
863
+ readonly "primary-container": "#e0e0ff";
864
+ readonly "on-primary-container": "#00004e";
865
+ readonly secondary: "#525258";
866
+ readonly "on-secondary": "#ffffff";
867
+ readonly "secondary-container": "#e4e1e9";
868
+ readonly "on-secondary-container": "#101016";
869
+ readonly surface: "#f9f9f9";
870
+ readonly "surface-dim": "#dadada";
871
+ readonly "surface-bright": "#f9f9f9";
872
+ readonly "surface-container-lowest": "#ffffff";
873
+ readonly "surface-container-low": "#f3f3f3";
874
+ readonly "surface-container": "#eeeeee";
875
+ readonly "surface-container-high": "#e8e8e8";
876
+ readonly "surface-container-highest": "#e2e2e2";
877
+ readonly "surface-elevated": "#ffffff";
878
+ readonly "on-surface": "#111111";
879
+ readonly "on-surface-variant": "#3e3b39";
880
+ readonly "on-surface-muted": "#555250";
881
+ readonly outline: "#615e5b";
882
+ readonly "outline-variant": "#a29d9a";
883
+ readonly "inverse-surface": "#303030";
884
+ readonly "inverse-on-surface": "#f9f9f9";
885
+ readonly "inverse-primary": "#bec2ff";
886
+ readonly scrim: "#000000";
887
+ readonly tertiary: "#2c34e2";
888
+ readonly "on-tertiary": "#ffffff";
889
+ readonly "tertiary-container": "#e0e0ff";
890
+ readonly "on-tertiary-container": "#00004e";
891
+ };
892
+ readonly dark: {
893
+ readonly primary: "#cfd1ff";
894
+ readonly "on-primary": "#00018c";
895
+ readonly "primary-container": "#1a21d7";
896
+ readonly "on-primary-container": "#f1efff";
897
+ readonly secondary: "#d6d3db";
898
+ readonly "on-secondary": "#25252b";
899
+ readonly "secondary-container": "#47464c";
900
+ readonly "on-secondary-container": "#f2eff7";
901
+ readonly surface: "#131313";
902
+ readonly "surface-dim": "#131313";
903
+ readonly "surface-bright": "#393939";
904
+ readonly "surface-container-lowest": "#0e0e0e";
905
+ readonly "surface-container-low": "#1b1b1b";
906
+ readonly "surface-container": "#1f1f1f";
907
+ readonly "surface-container-high": "#2a2a2a";
908
+ readonly "surface-container-highest": "#353535";
909
+ readonly "surface-elevated": "#2a2a2a";
910
+ readonly "on-surface": "#f1f1f1";
911
+ readonly "on-surface-variant": "#d9d3d0";
912
+ readonly "on-surface-muted": "#c0bab8";
913
+ readonly outline: "#afaaa7";
914
+ readonly "outline-variant": "#6e6a67";
915
+ readonly "inverse-surface": "#e2e2e2";
916
+ readonly "inverse-on-surface": "#1b1b1b";
917
+ readonly "inverse-primary": "#3b44ee";
918
+ readonly scrim: "#000000";
919
+ readonly tertiary: "#cfd1ff";
920
+ readonly "on-tertiary": "#00018c";
921
+ readonly "tertiary-container": "#1a21d7";
922
+ readonly "on-tertiary-container": "#f1efff";
923
+ };
924
+ };
925
+ readonly high: {
926
+ readonly light: {
927
+ readonly primary: "#1a21d7";
928
+ readonly "on-primary": "#ffffff";
929
+ readonly "primary-container": "#e0e0ff";
930
+ readonly "on-primary-container": "#000000";
931
+ readonly secondary: "#47464c";
932
+ readonly "on-secondary": "#ffffff";
933
+ readonly "secondary-container": "#e4e1e9";
934
+ readonly "on-secondary-container": "#000000";
935
+ readonly surface: "#f9f9f9";
936
+ readonly "surface-dim": "#dadada";
937
+ readonly "surface-bright": "#f9f9f9";
938
+ readonly "surface-container-lowest": "#ffffff";
939
+ readonly "surface-container-low": "#f3f3f3";
940
+ readonly "surface-container": "#eeeeee";
941
+ readonly "surface-container-high": "#e8e8e8";
942
+ readonly "surface-container-highest": "#e2e2e2";
943
+ readonly "surface-elevated": "#ffffff";
944
+ readonly "on-surface": "#000000";
945
+ readonly "on-surface-variant": "#32302e";
946
+ readonly "on-surface-muted": "#494644";
947
+ readonly outline: "#494644";
948
+ readonly "outline-variant": "#7a7674";
949
+ readonly "inverse-surface": "#303030";
950
+ readonly "inverse-on-surface": "#ffffff";
951
+ readonly "inverse-primary": "#bec2ff";
952
+ readonly scrim: "#000000";
953
+ readonly tertiary: "#1a21d7";
954
+ readonly "on-tertiary": "#ffffff";
955
+ readonly "tertiary-container": "#e0e0ff";
956
+ readonly "on-tertiary-container": "#000000";
957
+ };
958
+ readonly dark: {
959
+ readonly primary: "#e0e0ff";
960
+ readonly "on-primary": "#00016d";
961
+ readonly "primary-container": "#1a21d7";
962
+ readonly "on-primary-container": "#ffffff";
963
+ readonly secondary: "#e4e1e9";
964
+ readonly "on-secondary": "#1b1b21";
965
+ readonly "secondary-container": "#47464c";
966
+ readonly "on-secondary-container": "#ffffff";
967
+ readonly surface: "#131313";
968
+ readonly "surface-dim": "#131313";
969
+ readonly "surface-bright": "#393939";
970
+ readonly "surface-container-lowest": "#0e0e0e";
971
+ readonly "surface-container-low": "#1b1b1b";
972
+ readonly "surface-container": "#1f1f1f";
973
+ readonly "surface-container-high": "#2a2a2a";
974
+ readonly "surface-container-highest": "#353535";
975
+ readonly "surface-elevated": "#2a2a2a";
976
+ readonly "on-surface": "#ffffff";
977
+ readonly "on-surface-variant": "#e7e1de";
978
+ readonly "on-surface-muted": "#cbc5c2";
979
+ readonly outline: "#cbc5c2";
980
+ readonly "outline-variant": "#94908d";
981
+ readonly "inverse-surface": "#e2e2e2";
982
+ readonly "inverse-on-surface": "#000000";
983
+ readonly "inverse-primary": "#3b44ee";
984
+ readonly scrim: "#000000";
985
+ readonly tertiary: "#e0e0ff";
986
+ readonly "on-tertiary": "#00016d";
987
+ readonly "tertiary-container": "#1a21d7";
988
+ readonly "on-tertiary-container": "#ffffff";
989
+ };
990
+ };
991
+ };
992
+ readonly shape: {
993
+ readonly control: 10;
994
+ readonly field: 10;
995
+ readonly container: 16;
996
+ };
997
+ readonly type: {
998
+ readonly "display-xl": {
999
+ readonly letterSpacing: -3.2;
1000
+ };
1001
+ readonly "display-lg": {
1002
+ readonly letterSpacing: -1.96;
1003
+ };
1004
+ readonly "display-md": {
1005
+ readonly letterSpacing: -1.32;
1006
+ };
1007
+ readonly "display-sm": {
1008
+ readonly letterSpacing: -0.9;
1009
+ };
1010
+ };
1011
+ readonly elevation: {
1012
+ readonly "1": {
1013
+ readonly light: "0 0 0 1px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05)";
1014
+ readonly dark: "0 0 0 1px rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.4)";
1015
+ };
1016
+ readonly "2": {
1017
+ readonly light: "0 0 0 1px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05), 0 6px 16px -4px rgba(0,0,0,0.1)";
1018
+ readonly dark: "0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.4), 0 6px 16px -4px rgba(0,0,0,0.5)";
1019
+ };
1020
+ readonly "3": {
1021
+ readonly light: "0 0 0 1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06), 0 16px 36px -8px rgba(0,0,0,0.16)";
1022
+ readonly dark: "0 0 0 1px rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.45), 0 16px 36px -8px rgba(0,0,0,0.6)";
1023
+ };
1024
+ };
1025
+ };
791
1026
  readonly motion: {
792
1027
  readonly duration: {
793
1028
  readonly instant: 0;
package/dist/js/generated/native.js CHANGED
@@ -790,6 +790,241 @@ export const native = {
790
790
  "dark": "0 0 0 1px rgba(255,255,255,0.08), 0 4px 8px rgba(0,0,0,0.45), 0 20px 48px rgba(0,0,0,0.55)"
791
791
  }
792
792
  },
793
+ "signature": {
794
+ "roles": {
795
+ "standard": {
796
+ "light": {
797
+ "primary": "#3b44ee",
798
+ "on-primary": "#ffffff",
799
+ "primary-container": "#e0e0ff",
800
+ "on-primary-container": "#00016d",
801
+ "secondary": "#5e5e64",
802
+ "on-secondary": "#ffffff",
803
+ "secondary-container": "#e4e1e9",
804
+ "on-secondary-container": "#1b1b21",
805
+ "surface": "#f9f9f9",
806
+ "surface-dim": "#dadada",
807
+ "surface-bright": "#f9f9f9",
808
+ "surface-container-lowest": "#ffffff",
809
+ "surface-container-low": "#f3f3f3",
810
+ "surface-container": "#eeeeee",
811
+ "surface-container-high": "#e8e8e8",
812
+ "surface-container-highest": "#e2e2e2",
813
+ "surface-elevated": "#ffffff",
814
+ "on-surface": "#1b1b1b",
815
+ "on-surface-variant": "#494644",
816
+ "on-surface-muted": "#615e5b",
817
+ "outline": "#7a7674",
818
+ "outline-variant": "#cbc5c2",
819
+ "inverse-surface": "#303030",
820
+ "inverse-on-surface": "#f1f1f1",
821
+ "inverse-primary": "#bec2ff",
822
+ "scrim": "#000000",
823
+ "tertiary": "#3b44ee",
824
+ "on-tertiary": "#ffffff",
825
+ "tertiary-container": "#e0e0ff",
826
+ "on-tertiary-container": "#00016d"
827
+ },
828
+ "dark": {
829
+ "primary": "#bec2ff",
830
+ "on-primary": "#0001ac",
831
+ "primary-container": "#1a21d7",
832
+ "on-primary-container": "#e0e0ff",
833
+ "secondary": "#c8c5cd",
834
+ "on-secondary": "#303036",
835
+ "secondary-container": "#47464c",
836
+ "on-secondary-container": "#e4e1e9",
837
+ "surface": "#131313",
838
+ "surface-dim": "#131313",
839
+ "surface-bright": "#393939",
840
+ "surface-container-lowest": "#0e0e0e",
841
+ "surface-container-low": "#1b1b1b",
842
+ "surface-container": "#1f1f1f",
843
+ "surface-container-high": "#2a2a2a",
844
+ "surface-container-highest": "#353535",
845
+ "surface-elevated": "#2a2a2a",
846
+ "on-surface": "#e2e2e2",
847
+ "on-surface-variant": "#cbc5c2",
848
+ "on-surface-muted": "#b5b0ad",
849
+ "outline": "#94908d",
850
+ "outline-variant": "#494644",
851
+ "inverse-surface": "#e2e2e2",
852
+ "inverse-on-surface": "#303030",
853
+ "inverse-primary": "#3b44ee",
854
+ "scrim": "#000000",
855
+ "tertiary": "#bec2ff",
856
+ "on-tertiary": "#0001ac",
857
+ "tertiary-container": "#1a21d7",
858
+ "on-tertiary-container": "#e0e0ff"
859
+ }
860
+ },
861
+ "medium": {
862
+ "light": {
863
+ "primary": "#2c34e2",
864
+ "on-primary": "#ffffff",
865
+ "primary-container": "#e0e0ff",
866
+ "on-primary-container": "#00004e",
867
+ "secondary": "#525258",
868
+ "on-secondary": "#ffffff",
869
+ "secondary-container": "#e4e1e9",
870
+ "on-secondary-container": "#101016",
871
+ "surface": "#f9f9f9",
872
+ "surface-dim": "#dadada",
873
+ "surface-bright": "#f9f9f9",
874
+ "surface-container-lowest": "#ffffff",
875
+ "surface-container-low": "#f3f3f3",
876
+ "surface-container": "#eeeeee",
877
+ "surface-container-high": "#e8e8e8",
878
+ "surface-container-highest": "#e2e2e2",
879
+ "surface-elevated": "#ffffff",
880
+ "on-surface": "#111111",
881
+ "on-surface-variant": "#3e3b39",
882
+ "on-surface-muted": "#555250",
883
+ "outline": "#615e5b",
884
+ "outline-variant": "#a29d9a",
885
+ "inverse-surface": "#303030",
886
+ "inverse-on-surface": "#f9f9f9",
887
+ "inverse-primary": "#bec2ff",
888
+ "scrim": "#000000",
889
+ "tertiary": "#2c34e2",
890
+ "on-tertiary": "#ffffff",
891
+ "tertiary-container": "#e0e0ff",
892
+ "on-tertiary-container": "#00004e"
893
+ },
894
+ "dark": {
895
+ "primary": "#cfd1ff",
896
+ "on-primary": "#00018c",
897
+ "primary-container": "#1a21d7",
898
+ "on-primary-container": "#f1efff",
899
+ "secondary": "#d6d3db",
900
+ "on-secondary": "#25252b",
901
+ "secondary-container": "#47464c",
902
+ "on-secondary-container": "#f2eff7",
903
+ "surface": "#131313",
904
+ "surface-dim": "#131313",
905
+ "surface-bright": "#393939",
906
+ "surface-container-lowest": "#0e0e0e",
907
+ "surface-container-low": "#1b1b1b",
908
+ "surface-container": "#1f1f1f",
909
+ "surface-container-high": "#2a2a2a",
910
+ "surface-container-highest": "#353535",
911
+ "surface-elevated": "#2a2a2a",
912
+ "on-surface": "#f1f1f1",
913
+ "on-surface-variant": "#d9d3d0",
914
+ "on-surface-muted": "#c0bab8",
915
+ "outline": "#afaaa7",
916
+ "outline-variant": "#6e6a67",
917
+ "inverse-surface": "#e2e2e2",
918
+ "inverse-on-surface": "#1b1b1b",
919
+ "inverse-primary": "#3b44ee",
920
+ "scrim": "#000000",
921
+ "tertiary": "#cfd1ff",
922
+ "on-tertiary": "#00018c",
923
+ "tertiary-container": "#1a21d7",
924
+ "on-tertiary-container": "#f1efff"
925
+ }
926
+ },
927
+ "high": {
928
+ "light": {
929
+ "primary": "#1a21d7",
930
+ "on-primary": "#ffffff",
931
+ "primary-container": "#e0e0ff",
932
+ "on-primary-container": "#000000",
933
+ "secondary": "#47464c",
934
+ "on-secondary": "#ffffff",
935
+ "secondary-container": "#e4e1e9",
936
+ "on-secondary-container": "#000000",
937
+ "surface": "#f9f9f9",
938
+ "surface-dim": "#dadada",
939
+ "surface-bright": "#f9f9f9",
940
+ "surface-container-lowest": "#ffffff",
941
+ "surface-container-low": "#f3f3f3",
942
+ "surface-container": "#eeeeee",
943
+ "surface-container-high": "#e8e8e8",
944
+ "surface-container-highest": "#e2e2e2",
945
+ "surface-elevated": "#ffffff",
946
+ "on-surface": "#000000",
947
+ "on-surface-variant": "#32302e",
948
+ "on-surface-muted": "#494644",
949
+ "outline": "#494644",
950
+ "outline-variant": "#7a7674",
951
+ "inverse-surface": "#303030",
952
+ "inverse-on-surface": "#ffffff",
953
+ "inverse-primary": "#bec2ff",
954
+ "scrim": "#000000",
955
+ "tertiary": "#1a21d7",
956
+ "on-tertiary": "#ffffff",
957
+ "tertiary-container": "#e0e0ff",
958
+ "on-tertiary-container": "#000000"
959
+ },
960
+ "dark": {
961
+ "primary": "#e0e0ff",
962
+ "on-primary": "#00016d",
963
+ "primary-container": "#1a21d7",
964
+ "on-primary-container": "#ffffff",
965
+ "secondary": "#e4e1e9",
966
+ "on-secondary": "#1b1b21",
967
+ "secondary-container": "#47464c",
968
+ "on-secondary-container": "#ffffff",
969
+ "surface": "#131313",
970
+ "surface-dim": "#131313",
971
+ "surface-bright": "#393939",
972
+ "surface-container-lowest": "#0e0e0e",
973
+ "surface-container-low": "#1b1b1b",
974
+ "surface-container": "#1f1f1f",
975
+ "surface-container-high": "#2a2a2a",
976
+ "surface-container-highest": "#353535",
977
+ "surface-elevated": "#2a2a2a",
978
+ "on-surface": "#ffffff",
979
+ "on-surface-variant": "#e7e1de",
980
+ "on-surface-muted": "#cbc5c2",
981
+ "outline": "#cbc5c2",
982
+ "outline-variant": "#94908d",
983
+ "inverse-surface": "#e2e2e2",
984
+ "inverse-on-surface": "#000000",
985
+ "inverse-primary": "#3b44ee",
986
+ "scrim": "#000000",
987
+ "tertiary": "#e0e0ff",
988
+ "on-tertiary": "#00016d",
989
+ "tertiary-container": "#1a21d7",
990
+ "on-tertiary-container": "#ffffff"
991
+ }
992
+ }
993
+ },
994
+ "shape": {
995
+ "control": 10,
996
+ "field": 10,
997
+ "container": 16
998
+ },
999
+ "type": {
1000
+ "display-xl": {
1001
+ "letterSpacing": -3.2
1002
+ },
1003
+ "display-lg": {
1004
+ "letterSpacing": -1.96
1005
+ },
1006
+ "display-md": {
1007
+ "letterSpacing": -1.32
1008
+ },
1009
+ "display-sm": {
1010
+ "letterSpacing": -0.9
1011
+ }
1012
+ },
1013
+ "elevation": {
1014
+ "1": {
1015
+ "light": "0 0 0 1px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05)",
1016
+ "dark": "0 0 0 1px rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.4)"
1017
+ },
1018
+ "2": {
1019
+ "light": "0 0 0 1px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05), 0 6px 16px -4px rgba(0,0,0,0.1)",
1020
+ "dark": "0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.4), 0 6px 16px -4px rgba(0,0,0,0.5)"
1021
+ },
1022
+ "3": {
1023
+ "light": "0 0 0 1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06), 0 16px 36px -8px rgba(0,0,0,0.16)",
1024
+ "dark": "0 0 0 1px rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.45), 0 16px 36px -8px rgba(0,0,0,0.6)"
1025
+ }
1026
+ }
1027
+ },
793
1028
  "motion": {
794
1029
  "duration": {
795
1030
  "instant": 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nexub/tokens",
3
- "version": "7.7.0",
3
+ "version": "7.9.0",
4
4
  "description": "Design tokens for Nexub Design System — colours, typography, spacing, radii, shadows, and motion as CSS variables, a Tailwind 4 theme, Figma variables and native (React Native, SwiftUI, Compose) tokens.",
5
5
  "type": "module",
6
6
  "license": "MIT",