@nexub/tokens 7.8.0 → 8.0.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.
- package/bin/README.md +1 -0
- package/bin/nexub-migrate.mjs +47 -1
- package/dist/css/roles.css +414 -0
- package/dist/css/variables.css +0 -11
- package/dist/js/generated/native.d.ts +234 -14
- package/dist/js/generated/native.js +234 -44
- package/dist/js/generated/tokens.d.ts +0 -15
- package/dist/js/generated/tokens.js +0 -15
- package/dist/json/tokens.json +0 -11
- 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,390 @@
|
|
|
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 (the default since 8.0): neutral palettes, brand-indigo primary, ~10px controls, crisp elevation. */
|
|
410
|
+
|
|
411
|
+
:root, [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
|
+
/* Classic style (data-style="classic", the 7.x look; removed in 9.0). */
|
|
487
|
+
|
|
488
|
+
[data-style='classic'] {
|
|
489
|
+
--color-palette-primary-0: #000000;
|
|
490
|
+
--color-palette-primary-5: #000f2f;
|
|
491
|
+
--color-palette-primary-10: #001944;
|
|
492
|
+
--color-palette-primary-15: #002358;
|
|
493
|
+
--color-palette-primary-20: #002d6d;
|
|
494
|
+
--color-palette-primary-30: #004299;
|
|
495
|
+
--color-palette-primary-35: #004db0;
|
|
496
|
+
--color-palette-primary-40: #0059c7;
|
|
497
|
+
--color-palette-primary-50: #3373e2;
|
|
498
|
+
--color-palette-primary-60: #538dfe;
|
|
499
|
+
--color-palette-primary-70: #84aaff;
|
|
500
|
+
--color-palette-primary-80: #afc6ff;
|
|
501
|
+
--color-palette-primary-85: #c4d4ff;
|
|
502
|
+
--color-palette-primary-90: #d9e2ff;
|
|
503
|
+
--color-palette-primary-95: #edf0ff;
|
|
504
|
+
--color-palette-primary-100: #ffffff;
|
|
505
|
+
--color-palette-secondary-0: #000000;
|
|
506
|
+
--color-palette-secondary-5: #091121;
|
|
507
|
+
--color-palette-secondary-10: #141b2c;
|
|
508
|
+
--color-palette-secondary-15: #1e2636;
|
|
509
|
+
--color-palette-secondary-20: #293042;
|
|
510
|
+
--color-palette-secondary-30: #404759;
|
|
511
|
+
--color-palette-secondary-35: #4b5265;
|
|
512
|
+
--color-palette-secondary-40: #575e71;
|
|
513
|
+
--color-palette-secondary-80: #bfc6dc;
|
|
514
|
+
--color-palette-secondary-85: #cdd4eb;
|
|
515
|
+
--color-palette-secondary-90: #dbe2f9;
|
|
516
|
+
--color-palette-secondary-95: #edf0ff;
|
|
517
|
+
--color-palette-secondary-100: #ffffff;
|
|
518
|
+
--color-palette-neutral-0: #000000;
|
|
519
|
+
--color-palette-neutral-4: #0d0e11;
|
|
520
|
+
--color-palette-neutral-5: #0f1114;
|
|
521
|
+
--color-palette-neutral-6: #121316;
|
|
522
|
+
--color-palette-neutral-10: #1a1c1e;
|
|
523
|
+
--color-palette-neutral-12: #1e2022;
|
|
524
|
+
--color-palette-neutral-17: #292a2d;
|
|
525
|
+
--color-palette-neutral-20: #2f3033;
|
|
526
|
+
--color-palette-neutral-22: #333538;
|
|
527
|
+
--color-palette-neutral-24: #38393c;
|
|
528
|
+
--color-palette-neutral-87: #dad9dd;
|
|
529
|
+
--color-palette-neutral-90: #e3e2e6;
|
|
530
|
+
--color-palette-neutral-92: #e8e8eb;
|
|
531
|
+
--color-palette-neutral-94: #eeedf1;
|
|
532
|
+
--color-palette-neutral-95: #f1f0f4;
|
|
533
|
+
--color-palette-neutral-96: #f4f3f7;
|
|
534
|
+
--color-palette-neutral-98: #faf9fd;
|
|
535
|
+
--color-palette-neutral-100: #ffffff;
|
|
536
|
+
--color-palette-neutral-variant-20: #2c3137;
|
|
537
|
+
--color-palette-neutral-variant-25: #373c43;
|
|
538
|
+
--color-palette-neutral-variant-30: #43474e;
|
|
539
|
+
--color-palette-neutral-variant-35: #4e535a;
|
|
540
|
+
--color-palette-neutral-variant-40: #5a5f66;
|
|
541
|
+
--color-palette-neutral-variant-45: #676b72;
|
|
542
|
+
--color-palette-neutral-variant-50: #73777f;
|
|
543
|
+
--color-palette-neutral-variant-60: #8d9199;
|
|
544
|
+
--color-palette-neutral-variant-65: #9a9ea6;
|
|
545
|
+
--color-palette-neutral-variant-70: #a7abb4;
|
|
546
|
+
--color-palette-neutral-variant-72: #adb1b9;
|
|
547
|
+
--color-palette-neutral-variant-76: #b8bbc4;
|
|
548
|
+
--color-palette-neutral-variant-80: #c3c6cf;
|
|
549
|
+
--color-palette-neutral-variant-85: #d1d4dd;
|
|
550
|
+
--color-palette-neutral-variant-90: #dfe2eb;
|
|
551
|
+
--shape-control: 9999px;
|
|
552
|
+
--shape-field: 0.75rem;
|
|
553
|
+
--shape-container: 1rem;
|
|
554
|
+
--type-display-xl-letterSpacing: -0.045em;
|
|
555
|
+
--type-display-lg-letterSpacing: -0.03em;
|
|
556
|
+
--type-display-md-letterSpacing: -0.025em;
|
|
557
|
+
--type-display-sm-letterSpacing: -0.02em;
|
|
558
|
+
--elevation-1: 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.06)), 0 1px 2px light-dark(rgb(26 28 30 / 0.06), rgb(0 0 0 / 0.4)), 0 2px 6px light-dark(rgb(26 28 30 / 0.04), rgb(0 0 0 / 0.3));
|
|
559
|
+
--elevation-2: 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 2px 4px light-dark(rgb(26 28 30 / 0.06), rgb(0 0 0 / 0.4)), 0 8px 20px light-dark(rgb(26 28 30 / 0.08), rgb(0 0 0 / 0.45));
|
|
560
|
+
--elevation-3: 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 4px 8px light-dark(rgb(26 28 30 / 0.08), rgb(0 0 0 / 0.45)), 0 20px 48px light-dark(rgb(26 28 30 / 0.16), rgb(0 0 0 / 0.55));
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
:not(:root)[data-style='signature'] {
|
|
564
|
+
--color-primary: light-dark(var(--color-palette-primary-40), var(--color-palette-primary-80));
|
|
565
|
+
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-20));
|
|
566
|
+
--color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
|
|
567
|
+
--color-on-primary-container: light-dark(var(--color-palette-primary-10), var(--color-palette-primary-90));
|
|
568
|
+
--color-secondary: light-dark(var(--color-palette-secondary-40), var(--color-palette-secondary-80));
|
|
569
|
+
--color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-20));
|
|
570
|
+
--color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
|
|
571
|
+
--color-on-secondary-container: light-dark(var(--color-palette-secondary-10), var(--color-palette-secondary-90));
|
|
572
|
+
--color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
|
|
573
|
+
--color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
|
|
574
|
+
--color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
|
|
575
|
+
--color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
|
|
576
|
+
--color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
|
|
577
|
+
--color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
|
|
578
|
+
--color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
|
|
579
|
+
--color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
|
|
580
|
+
--color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
|
|
581
|
+
--color-on-surface: light-dark(var(--color-palette-neutral-10), var(--color-palette-neutral-90));
|
|
582
|
+
--color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
583
|
+
--color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-40), var(--color-palette-neutral-variant-72));
|
|
584
|
+
--color-outline: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
|
|
585
|
+
--color-outline-variant: light-dark(var(--color-palette-neutral-variant-80), var(--color-palette-neutral-variant-30));
|
|
586
|
+
--color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
|
|
587
|
+
--color-inverse-on-surface: light-dark(var(--color-palette-neutral-95), var(--color-palette-neutral-20));
|
|
588
|
+
--color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
|
|
589
|
+
--color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
|
|
590
|
+
}
|
|
591
|
+
[data-contrast='medium']:not(:root)[data-style='signature'], [data-contrast='medium'] :not(:root)[data-style='signature'] {
|
|
592
|
+
--color-primary: light-dark(var(--color-palette-primary-35), var(--color-palette-primary-85));
|
|
593
|
+
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-15));
|
|
594
|
+
--color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
|
|
595
|
+
--color-on-primary-container: light-dark(var(--color-palette-primary-5), var(--color-palette-primary-95));
|
|
596
|
+
--color-secondary: light-dark(var(--color-palette-secondary-35), var(--color-palette-secondary-85));
|
|
597
|
+
--color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-15));
|
|
598
|
+
--color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
|
|
599
|
+
--color-on-secondary-container: light-dark(var(--color-palette-secondary-5), var(--color-palette-secondary-95));
|
|
600
|
+
--color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
|
|
601
|
+
--color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
|
|
602
|
+
--color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
|
|
603
|
+
--color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
|
|
604
|
+
--color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
|
|
605
|
+
--color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
|
|
606
|
+
--color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
|
|
607
|
+
--color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
|
|
608
|
+
--color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
|
|
609
|
+
--color-on-surface: light-dark(var(--color-palette-neutral-5), var(--color-palette-neutral-95));
|
|
610
|
+
--color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-25), var(--color-palette-neutral-variant-85));
|
|
611
|
+
--color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-35), var(--color-palette-neutral-variant-76));
|
|
612
|
+
--color-outline: light-dark(var(--color-palette-neutral-variant-40), var(--color-palette-neutral-variant-70));
|
|
613
|
+
--color-outline-variant: light-dark(var(--color-palette-neutral-variant-65), var(--color-palette-neutral-variant-45));
|
|
614
|
+
--color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
|
|
615
|
+
--color-inverse-on-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-10));
|
|
616
|
+
--color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
|
|
617
|
+
--color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
|
|
618
|
+
}
|
|
619
|
+
[data-contrast='high']:not(:root)[data-style='signature'], [data-contrast='high'] :not(:root)[data-style='signature'] {
|
|
620
|
+
--color-primary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
|
|
621
|
+
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
|
|
622
|
+
--color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
|
|
623
|
+
--color-on-primary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
|
|
624
|
+
--color-secondary: light-dark(var(--color-palette-secondary-30), var(--color-palette-secondary-90));
|
|
625
|
+
--color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-10));
|
|
626
|
+
--color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
|
|
627
|
+
--color-on-secondary-container: light-dark(var(--color-palette-secondary-0), var(--color-palette-secondary-100));
|
|
628
|
+
--color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
|
|
629
|
+
--color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
|
|
630
|
+
--color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
|
|
631
|
+
--color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
|
|
632
|
+
--color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
|
|
633
|
+
--color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
|
|
634
|
+
--color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
|
|
635
|
+
--color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
|
|
636
|
+
--color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
|
|
637
|
+
--color-on-surface: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-100));
|
|
638
|
+
--color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-20), var(--color-palette-neutral-variant-90));
|
|
639
|
+
--color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
640
|
+
--color-outline: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
641
|
+
--color-outline-variant: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
|
|
642
|
+
--color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
|
|
643
|
+
--color-inverse-on-surface: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-0));
|
|
644
|
+
--color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
|
|
645
|
+
--color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
|
|
646
|
+
}
|
|
647
|
+
@media (prefers-contrast: more) {
|
|
648
|
+
:root:not([data-contrast]):not(:root)[data-style='signature'], :root:not([data-contrast]) :not(:root)[data-style='signature'] {
|
|
649
|
+
--color-primary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
|
|
650
|
+
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
|
|
651
|
+
--color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
|
|
652
|
+
--color-on-primary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
|
|
653
|
+
--color-secondary: light-dark(var(--color-palette-secondary-30), var(--color-palette-secondary-90));
|
|
654
|
+
--color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-10));
|
|
655
|
+
--color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
|
|
656
|
+
--color-on-secondary-container: light-dark(var(--color-palette-secondary-0), var(--color-palette-secondary-100));
|
|
657
|
+
--color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
|
|
658
|
+
--color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
|
|
659
|
+
--color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
|
|
660
|
+
--color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
|
|
661
|
+
--color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
|
|
662
|
+
--color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
|
|
663
|
+
--color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
|
|
664
|
+
--color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
|
|
665
|
+
--color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
|
|
666
|
+
--color-on-surface: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-100));
|
|
667
|
+
--color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-20), var(--color-palette-neutral-variant-90));
|
|
668
|
+
--color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
669
|
+
--color-outline: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
670
|
+
--color-outline-variant: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
|
|
671
|
+
--color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
|
|
672
|
+
--color-inverse-on-surface: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-0));
|
|
673
|
+
--color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
|
|
674
|
+
--color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
|
|
675
|
+
}
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
:not(:root)[data-style='classic'] {
|
|
679
|
+
--color-primary: light-dark(var(--color-palette-primary-40), var(--color-palette-primary-80));
|
|
680
|
+
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-20));
|
|
681
|
+
--color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
|
|
682
|
+
--color-on-primary-container: light-dark(var(--color-palette-primary-10), var(--color-palette-primary-90));
|
|
683
|
+
--color-secondary: light-dark(var(--color-palette-secondary-40), var(--color-palette-secondary-80));
|
|
684
|
+
--color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-20));
|
|
685
|
+
--color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
|
|
686
|
+
--color-on-secondary-container: light-dark(var(--color-palette-secondary-10), var(--color-palette-secondary-90));
|
|
687
|
+
--color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
|
|
688
|
+
--color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
|
|
689
|
+
--color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
|
|
690
|
+
--color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
|
|
691
|
+
--color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
|
|
692
|
+
--color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
|
|
693
|
+
--color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
|
|
694
|
+
--color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
|
|
695
|
+
--color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
|
|
696
|
+
--color-on-surface: light-dark(var(--color-palette-neutral-10), var(--color-palette-neutral-90));
|
|
697
|
+
--color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
698
|
+
--color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-40), var(--color-palette-neutral-variant-72));
|
|
699
|
+
--color-outline: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
|
|
700
|
+
--color-outline-variant: light-dark(var(--color-palette-neutral-variant-80), var(--color-palette-neutral-variant-30));
|
|
701
|
+
--color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
|
|
702
|
+
--color-inverse-on-surface: light-dark(var(--color-palette-neutral-95), var(--color-palette-neutral-20));
|
|
703
|
+
--color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
|
|
704
|
+
--color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
|
|
705
|
+
}
|
|
706
|
+
[data-contrast='medium']:not(:root)[data-style='classic'], [data-contrast='medium'] :not(:root)[data-style='classic'] {
|
|
707
|
+
--color-primary: light-dark(var(--color-palette-primary-35), var(--color-palette-primary-85));
|
|
708
|
+
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-15));
|
|
709
|
+
--color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
|
|
710
|
+
--color-on-primary-container: light-dark(var(--color-palette-primary-5), var(--color-palette-primary-95));
|
|
711
|
+
--color-secondary: light-dark(var(--color-palette-secondary-35), var(--color-palette-secondary-85));
|
|
712
|
+
--color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-15));
|
|
713
|
+
--color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
|
|
714
|
+
--color-on-secondary-container: light-dark(var(--color-palette-secondary-5), var(--color-palette-secondary-95));
|
|
715
|
+
--color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
|
|
716
|
+
--color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
|
|
717
|
+
--color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
|
|
718
|
+
--color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
|
|
719
|
+
--color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
|
|
720
|
+
--color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
|
|
721
|
+
--color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
|
|
722
|
+
--color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
|
|
723
|
+
--color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
|
|
724
|
+
--color-on-surface: light-dark(var(--color-palette-neutral-5), var(--color-palette-neutral-95));
|
|
725
|
+
--color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-25), var(--color-palette-neutral-variant-85));
|
|
726
|
+
--color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-35), var(--color-palette-neutral-variant-76));
|
|
727
|
+
--color-outline: light-dark(var(--color-palette-neutral-variant-40), var(--color-palette-neutral-variant-70));
|
|
728
|
+
--color-outline-variant: light-dark(var(--color-palette-neutral-variant-65), var(--color-palette-neutral-variant-45));
|
|
729
|
+
--color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
|
|
730
|
+
--color-inverse-on-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-10));
|
|
731
|
+
--color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
|
|
732
|
+
--color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
|
|
733
|
+
}
|
|
734
|
+
[data-contrast='high']:not(:root)[data-style='classic'], [data-contrast='high'] :not(:root)[data-style='classic'] {
|
|
735
|
+
--color-primary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
|
|
736
|
+
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
|
|
737
|
+
--color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
|
|
738
|
+
--color-on-primary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
|
|
739
|
+
--color-secondary: light-dark(var(--color-palette-secondary-30), var(--color-palette-secondary-90));
|
|
740
|
+
--color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-10));
|
|
741
|
+
--color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
|
|
742
|
+
--color-on-secondary-container: light-dark(var(--color-palette-secondary-0), var(--color-palette-secondary-100));
|
|
743
|
+
--color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
|
|
744
|
+
--color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
|
|
745
|
+
--color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
|
|
746
|
+
--color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
|
|
747
|
+
--color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
|
|
748
|
+
--color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
|
|
749
|
+
--color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
|
|
750
|
+
--color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
|
|
751
|
+
--color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
|
|
752
|
+
--color-on-surface: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-100));
|
|
753
|
+
--color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-20), var(--color-palette-neutral-variant-90));
|
|
754
|
+
--color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
755
|
+
--color-outline: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
756
|
+
--color-outline-variant: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
|
|
757
|
+
--color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
|
|
758
|
+
--color-inverse-on-surface: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-0));
|
|
759
|
+
--color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
|
|
760
|
+
--color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
|
|
761
|
+
}
|
|
762
|
+
@media (prefers-contrast: more) {
|
|
763
|
+
:root:not([data-contrast]):not(:root)[data-style='classic'], :root:not([data-contrast]) :not(:root)[data-style='classic'] {
|
|
764
|
+
--color-primary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
|
|
765
|
+
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
|
|
766
|
+
--color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
|
|
767
|
+
--color-on-primary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
|
|
768
|
+
--color-secondary: light-dark(var(--color-palette-secondary-30), var(--color-palette-secondary-90));
|
|
769
|
+
--color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-10));
|
|
770
|
+
--color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
|
|
771
|
+
--color-on-secondary-container: light-dark(var(--color-palette-secondary-0), var(--color-palette-secondary-100));
|
|
772
|
+
--color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
|
|
773
|
+
--color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
|
|
774
|
+
--color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
|
|
775
|
+
--color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
|
|
776
|
+
--color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
|
|
777
|
+
--color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
|
|
778
|
+
--color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
|
|
779
|
+
--color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
|
|
780
|
+
--color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
|
|
781
|
+
--color-on-surface: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-100));
|
|
782
|
+
--color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-20), var(--color-palette-neutral-variant-90));
|
|
783
|
+
--color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
784
|
+
--color-outline: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
785
|
+
--color-outline-variant: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
|
|
786
|
+
--color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
|
|
787
|
+
--color-inverse-on-surface: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-0));
|
|
788
|
+
--color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
|
|
789
|
+
--color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
|
|
409
793
|
@media (color-gamut: p3) {
|
|
410
794
|
@supports (color: oklch(from red l c h)) {
|
|
411
795
|
:root, [data-contrast='standard'] {
|
|
@@ -521,5 +905,35 @@
|
|
|
521
905
|
--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
906
|
}
|
|
523
907
|
}
|
|
908
|
+
|
|
909
|
+
:not(:root)[data-style='signature'] {
|
|
910
|
+
--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));
|
|
911
|
+
}
|
|
912
|
+
[data-contrast='medium']:not(:root)[data-style='signature'], [data-contrast='medium'] :not(:root)[data-style='signature'] {
|
|
913
|
+
--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));
|
|
914
|
+
}
|
|
915
|
+
[data-contrast='high']:not(:root)[data-style='signature'], [data-contrast='high'] :not(:root)[data-style='signature'] {
|
|
916
|
+
--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));
|
|
917
|
+
}
|
|
918
|
+
@media (prefers-contrast: more) {
|
|
919
|
+
:root:not([data-contrast]):not(:root)[data-style='signature'], :root:not([data-contrast]) :not(:root)[data-style='signature'] {
|
|
920
|
+
--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));
|
|
921
|
+
}
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
:not(:root)[data-style='classic'] {
|
|
925
|
+
--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));
|
|
926
|
+
}
|
|
927
|
+
[data-contrast='medium']:not(:root)[data-style='classic'], [data-contrast='medium'] :not(:root)[data-style='classic'] {
|
|
928
|
+
--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));
|
|
929
|
+
}
|
|
930
|
+
[data-contrast='high']:not(:root)[data-style='classic'], [data-contrast='high'] :not(:root)[data-style='classic'] {
|
|
931
|
+
--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));
|
|
932
|
+
}
|
|
933
|
+
@media (prefers-contrast: more) {
|
|
934
|
+
:root:not([data-contrast]):not(:root)[data-style='classic'], :root:not([data-contrast]) :not(:root)[data-style='classic'] {
|
|
935
|
+
--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));
|
|
936
|
+
}
|
|
937
|
+
}
|
|
524
938
|
}
|
|
525
939
|
}
|
package/dist/css/variables.css
CHANGED
|
@@ -582,17 +582,6 @@
|
|
|
582
582
|
--marketing-accent-line: linear-gradient(90deg, var(--color-primary) 0%, var(--color-bookub) 35%, var(--color-founderub) 70%, var(--color-payub) 100%); /** Brand accent line: Nexub and the product colours */
|
|
583
583
|
--marketing-lift: -6px; /** Card hover lift */
|
|
584
584
|
--marketing-button-lift: -2px; /** Hero button hover lift */
|
|
585
|
-
--duration-instant: 0s;
|
|
586
|
-
--duration-fast: 0.15s;
|
|
587
|
-
--duration-normal: 0.2s;
|
|
588
|
-
--duration-slow: 0.3s;
|
|
589
|
-
--duration-slower: 0.5s;
|
|
590
|
-
--ease-linear: cubic-bezier(0, 0, 1, 1);
|
|
591
|
-
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
592
|
-
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
593
|
-
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
594
|
-
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
595
|
-
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
596
585
|
--radius-none: 0px;
|
|
597
586
|
--radius-xs: 0.125rem;
|
|
598
587
|
--radius-sm: 0.25rem;
|
|
@@ -788,22 +788,242 @@ 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
|
|
792
|
-
readonly
|
|
793
|
-
readonly
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
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
|
+
};
|
|
798
991
|
};
|
|
799
|
-
readonly
|
|
800
|
-
readonly
|
|
801
|
-
readonly
|
|
802
|
-
readonly
|
|
803
|
-
readonly "in-out": readonly [0.4, 0, 0.2, 1];
|
|
804
|
-
readonly "out-expo": readonly [0.16, 1, 0.3, 1];
|
|
805
|
-
readonly spring: readonly [0.34, 1.56, 0.64, 1];
|
|
992
|
+
readonly shape: {
|
|
993
|
+
readonly control: 10;
|
|
994
|
+
readonly field: 10;
|
|
995
|
+
readonly container: 16;
|
|
806
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
|
+
};
|
|
1026
|
+
readonly motion: {
|
|
807
1027
|
readonly spring: {
|
|
808
1028
|
readonly spatial: {
|
|
809
1029
|
readonly fast: {
|
|
@@ -790,52 +790,242 @@ 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
|
-
"
|
|
794
|
-
"
|
|
795
|
-
"
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
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
|
+
}
|
|
800
993
|
},
|
|
801
|
-
"
|
|
802
|
-
"
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
1,
|
|
806
|
-
1
|
|
807
|
-
],
|
|
808
|
-
"in": [
|
|
809
|
-
0.4,
|
|
810
|
-
0,
|
|
811
|
-
1,
|
|
812
|
-
1
|
|
813
|
-
],
|
|
814
|
-
"out": [
|
|
815
|
-
0,
|
|
816
|
-
0,
|
|
817
|
-
0.2,
|
|
818
|
-
1
|
|
819
|
-
],
|
|
820
|
-
"in-out": [
|
|
821
|
-
0.4,
|
|
822
|
-
0,
|
|
823
|
-
0.2,
|
|
824
|
-
1
|
|
825
|
-
],
|
|
826
|
-
"out-expo": [
|
|
827
|
-
0.16,
|
|
828
|
-
1,
|
|
829
|
-
0.3,
|
|
830
|
-
1
|
|
831
|
-
],
|
|
832
|
-
"spring": [
|
|
833
|
-
0.34,
|
|
834
|
-
1.56,
|
|
835
|
-
0.64,
|
|
836
|
-
1
|
|
837
|
-
]
|
|
994
|
+
"shape": {
|
|
995
|
+
"control": 10,
|
|
996
|
+
"field": 10,
|
|
997
|
+
"container": 16
|
|
838
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
|
+
},
|
|
1028
|
+
"motion": {
|
|
839
1029
|
"spring": {
|
|
840
1030
|
"spatial": {
|
|
841
1031
|
"fast": {
|
|
@@ -670,21 +670,6 @@ export declare const tokens: {
|
|
|
670
670
|
readonly lift: "-6px";
|
|
671
671
|
readonly "button-lift": "-2px";
|
|
672
672
|
};
|
|
673
|
-
readonly duration: {
|
|
674
|
-
readonly instant: "0ms";
|
|
675
|
-
readonly fast: "150ms";
|
|
676
|
-
readonly normal: "200ms";
|
|
677
|
-
readonly slow: "300ms";
|
|
678
|
-
readonly slower: "500ms";
|
|
679
|
-
};
|
|
680
|
-
readonly ease: {
|
|
681
|
-
readonly linear: "cubic-bezier(0, 0, 1, 1)";
|
|
682
|
-
readonly in: "cubic-bezier(0.4, 0, 1, 1)";
|
|
683
|
-
readonly out: "cubic-bezier(0, 0, 0.2, 1)";
|
|
684
|
-
readonly "in-out": "cubic-bezier(0.4, 0, 0.2, 1)";
|
|
685
|
-
readonly "out-expo": "cubic-bezier(0.16, 1, 0.3, 1)";
|
|
686
|
-
readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
|
|
687
|
-
};
|
|
688
673
|
readonly radius: {
|
|
689
674
|
readonly none: "0px";
|
|
690
675
|
readonly xs: "2px";
|
|
@@ -672,21 +672,6 @@ export const tokens = {
|
|
|
672
672
|
"lift": "-6px",
|
|
673
673
|
"button-lift": "-2px"
|
|
674
674
|
},
|
|
675
|
-
"duration": {
|
|
676
|
-
"instant": "0ms",
|
|
677
|
-
"fast": "150ms",
|
|
678
|
-
"normal": "200ms",
|
|
679
|
-
"slow": "300ms",
|
|
680
|
-
"slower": "500ms"
|
|
681
|
-
},
|
|
682
|
-
"ease": {
|
|
683
|
-
"linear": "cubic-bezier(0, 0, 1, 1)",
|
|
684
|
-
"in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
685
|
-
"out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
686
|
-
"in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
687
|
-
"out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
688
|
-
"spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
|
|
689
|
-
},
|
|
690
675
|
"radius": {
|
|
691
676
|
"none": "0px",
|
|
692
677
|
"xs": "2px",
|
package/dist/json/tokens.json
CHANGED
|
@@ -578,17 +578,6 @@
|
|
|
578
578
|
"marketing-accent-line": "linear-gradient(90deg, var(--color-primary) 0%, var(--color-bookub) 35%, var(--color-founderub) 70%, var(--color-payub) 100%)",
|
|
579
579
|
"marketing-lift": "-6px",
|
|
580
580
|
"marketing-button-lift": "-2px",
|
|
581
|
-
"duration-instant": "0ms",
|
|
582
|
-
"duration-fast": "150ms",
|
|
583
|
-
"duration-normal": "200ms",
|
|
584
|
-
"duration-slow": "300ms",
|
|
585
|
-
"duration-slower": "500ms",
|
|
586
|
-
"ease-linear": "cubic-bezier(0, 0, 1, 1)",
|
|
587
|
-
"ease-in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
588
|
-
"ease-out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
589
|
-
"ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
590
|
-
"ease-out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
591
|
-
"ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
592
581
|
"radius-none": "0px",
|
|
593
582
|
"radius-xs": "2px",
|
|
594
583
|
"radius-sm": "4px",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexub/tokens",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.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",
|