@leta-io/design-tokens 0.2.0 → 0.4.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/dist/index.d.ts +8 -4
- package/dist/index.js +8 -4
- package/dist/map-elevation.css +12 -0
- package/dist/scroll-utilities.css +20 -5
- package/dist/tailwind.preset.cjs +6 -4
- package/dist/tokens.css +45 -42
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -773,6 +773,8 @@ declare const tokens: {
|
|
|
773
773
|
readonly sizeContainersXxxl: "--size-containers-xxxl";
|
|
774
774
|
/** Padding/1px */
|
|
775
775
|
readonly padding1px: "--padding-1px";
|
|
776
|
+
/** Rounding/xxxl */
|
|
777
|
+
readonly roundingXxxl: "--rounding-xxxl";
|
|
776
778
|
/** Text/default/sub-heading */
|
|
777
779
|
readonly textDefaultSubHeading: "--text-default-sub-heading";
|
|
778
780
|
/** Text/primary/default */
|
|
@@ -1047,8 +1049,8 @@ declare const tokens: {
|
|
|
1047
1049
|
readonly surfacePrimaryDesktopBadge: "--surface-primary-desktop-badge";
|
|
1048
1050
|
/** Surface/neutral/desktop-badge */
|
|
1049
1051
|
readonly surfaceNeutralDesktopBadge: "--surface-neutral-desktop-badge";
|
|
1050
|
-
/** Surface/neutral/badge-
|
|
1051
|
-
readonly
|
|
1052
|
+
/** Surface/neutral/desktop-badge-pressed */
|
|
1053
|
+
readonly surfaceNeutralDesktopBadgePressed: "--surface-neutral-desktop-badge-pressed";
|
|
1052
1054
|
/** Border/neutral/desktop-badge-hover */
|
|
1053
1055
|
readonly borderNeutralDesktopBadgeHover: "--border-neutral-desktop-badge-hover";
|
|
1054
1056
|
/** Border/secondary/card-active */
|
|
@@ -1585,8 +1587,6 @@ declare const tokens: {
|
|
|
1585
1587
|
readonly surfacePrimaryActiveCarouselPagination: "--surface-primary-active-carousel-pagination";
|
|
1586
1588
|
/** Surface/neutral/search-field */
|
|
1587
1589
|
readonly surfaceNeutralSearchField: "--surface-neutral-search-field";
|
|
1588
|
-
/** Surface/neutral/alt-search-field */
|
|
1589
|
-
readonly surfaceNeutralAltSearchField: "--surface-neutral-alt-search-field";
|
|
1590
1590
|
/** Surface/caution/rating-progress-bar */
|
|
1591
1591
|
readonly surfaceCautionRatingProgressBar: "--surface-caution-rating-progress-bar";
|
|
1592
1592
|
/** Surface/neutral/mobile-chip-active */
|
|
@@ -1705,6 +1705,10 @@ declare const tokens: {
|
|
|
1705
1705
|
readonly borderDisabledInputField: "--border-disabled-input-field";
|
|
1706
1706
|
/** Border/neutral/text-area */
|
|
1707
1707
|
readonly borderNeutralTextArea: "--border-neutral-text-area";
|
|
1708
|
+
/** Surface/neutral/desktop-badge-hover */
|
|
1709
|
+
readonly surfaceNeutralDesktopBadgeHover: "--surface-neutral-desktop-badge-hover";
|
|
1710
|
+
/** Border/neutral/desktop-badge-pressed */
|
|
1711
|
+
readonly borderNeutralDesktopBadgePressed: "--border-neutral-desktop-badge-pressed";
|
|
1708
1712
|
/** Inter Family */
|
|
1709
1713
|
readonly interFamily: "--inter-family";
|
|
1710
1714
|
/** Breakpoint */
|
package/dist/index.js
CHANGED
|
@@ -790,6 +790,8 @@ var tokens = {
|
|
|
790
790
|
sizeContainersXxxl: "--size-containers-xxxl",
|
|
791
791
|
/** Padding/1px */
|
|
792
792
|
padding1px: "--padding-1px",
|
|
793
|
+
/** Rounding/xxxl */
|
|
794
|
+
roundingXxxl: "--rounding-xxxl",
|
|
793
795
|
/** Text/default/sub-heading */
|
|
794
796
|
textDefaultSubHeading: "--text-default-sub-heading",
|
|
795
797
|
/** Text/primary/default */
|
|
@@ -1064,8 +1066,8 @@ var tokens = {
|
|
|
1064
1066
|
surfacePrimaryDesktopBadge: "--surface-primary-desktop-badge",
|
|
1065
1067
|
/** Surface/neutral/desktop-badge */
|
|
1066
1068
|
surfaceNeutralDesktopBadge: "--surface-neutral-desktop-badge",
|
|
1067
|
-
/** Surface/neutral/badge-
|
|
1068
|
-
|
|
1069
|
+
/** Surface/neutral/desktop-badge-pressed */
|
|
1070
|
+
surfaceNeutralDesktopBadgePressed: "--surface-neutral-desktop-badge-pressed",
|
|
1069
1071
|
/** Border/neutral/desktop-badge-hover */
|
|
1070
1072
|
borderNeutralDesktopBadgeHover: "--border-neutral-desktop-badge-hover",
|
|
1071
1073
|
/** Border/secondary/card-active */
|
|
@@ -1602,8 +1604,6 @@ var tokens = {
|
|
|
1602
1604
|
surfacePrimaryActiveCarouselPagination: "--surface-primary-active-carousel-pagination",
|
|
1603
1605
|
/** Surface/neutral/search-field */
|
|
1604
1606
|
surfaceNeutralSearchField: "--surface-neutral-search-field",
|
|
1605
|
-
/** Surface/neutral/alt-search-field */
|
|
1606
|
-
surfaceNeutralAltSearchField: "--surface-neutral-alt-search-field",
|
|
1607
1607
|
/** Surface/caution/rating-progress-bar */
|
|
1608
1608
|
surfaceCautionRatingProgressBar: "--surface-caution-rating-progress-bar",
|
|
1609
1609
|
/** Surface/neutral/mobile-chip-active */
|
|
@@ -1722,6 +1722,10 @@ var tokens = {
|
|
|
1722
1722
|
borderDisabledInputField: "--border-disabled-input-field",
|
|
1723
1723
|
/** Border/neutral/text-area */
|
|
1724
1724
|
borderNeutralTextArea: "--border-neutral-text-area",
|
|
1725
|
+
/** Surface/neutral/desktop-badge-hover */
|
|
1726
|
+
surfaceNeutralDesktopBadgeHover: "--surface-neutral-desktop-badge-hover",
|
|
1727
|
+
/** Border/neutral/desktop-badge-pressed */
|
|
1728
|
+
borderNeutralDesktopBadgePressed: "--border-neutral-desktop-badge-pressed",
|
|
1725
1729
|
/** Inter Family */
|
|
1726
1730
|
interFamily: "--inter-family",
|
|
1727
1731
|
/** Breakpoint */
|
package/dist/map-elevation.css
CHANGED
|
@@ -93,6 +93,18 @@
|
|
|
93
93
|
--map-pin-edge: var(--colors-neutral-200);
|
|
94
94
|
--map-pin-content: var(--colors-neutral-50);
|
|
95
95
|
|
|
96
|
+
/**
|
|
97
|
+
* Ink for text drawn on a `--map-pin-body` chip — the driver-to-depot distance
|
|
98
|
+
* pills on the dispatch map, and anything else that puts a dark label on a white
|
|
99
|
+
* overlay sitting on map imagery.
|
|
100
|
+
*
|
|
101
|
+
* Distinct from `--map-pin-content`, which is the light glyph/number knocked out
|
|
102
|
+
* of a *coloured* pin. Same reasoning as the rest of this block: a label on map
|
|
103
|
+
* substrate must not invert with the app theme, so it comes off the primitive
|
|
104
|
+
* layer rather than `--text-default-heading`.
|
|
105
|
+
*/
|
|
106
|
+
--map-chip-label: var(--colors-neutral-900);
|
|
107
|
+
|
|
96
108
|
/**
|
|
97
109
|
* Status colours for a pin's inner shape. Callers pass one of these rather than an
|
|
98
110
|
* app-surface token, for the reason above — a pin's red has to stay red on a dark
|
|
@@ -110,9 +110,21 @@
|
|
|
110
110
|
--scroll-edge-fade-1: 0.045;
|
|
111
111
|
--scroll-edge-fade-2: 0.028;
|
|
112
112
|
--scroll-edge-fade-3: 0.012;
|
|
113
|
-
/** Chrome edge shadows — `down` for a header above content, `up` for a footer below.
|
|
114
|
-
|
|
115
|
-
|
|
113
|
+
/** Chrome edge shadows — `down` for a header above content, `up` for a footer below.
|
|
114
|
+
*
|
|
115
|
+
* ⚠ The offset must EXCEED the spread, or nothing protrudes. These used to be
|
|
116
|
+
* `0 ±4px 10px -4px` — copied from `--shadow-neutral-1`, a card drop shadow.
|
|
117
|
+
* A -4px spread shrinks the shadow's box 4px inward and the 4px offset moves it
|
|
118
|
+
* 4px back out, so its edge landed exactly on the chrome's own edge and only the
|
|
119
|
+
* outer half of the blur ever showed: a ~5px band peaking near 5% ink, which is
|
|
120
|
+
* invisible on `#fefefe`. The detection lit this correctly the whole time;
|
|
121
|
+
* there was nothing to see (reported 2026-09-28, "no drop shadow in the drawer").
|
|
122
|
+
*
|
|
123
|
+
* No negative spread now: the chrome is full-width inside a panel that clips
|
|
124
|
+
* (`overflow: hidden`), so the side bleed a spread was guarding against never
|
|
125
|
+
* reaches the screen anyway. */
|
|
126
|
+
--scroll-edge-shadow-down: 0 4px 12px rgb(var(--scroll-edge-ink) / 0.1);
|
|
127
|
+
--scroll-edge-shadow-up: 0 -4px 12px rgb(var(--scroll-edge-ink) / 0.1);
|
|
116
128
|
}
|
|
117
129
|
|
|
118
130
|
/* Dark mode: light ink, and LOWER alphas than light mode.
|
|
@@ -132,8 +144,11 @@
|
|
|
132
144
|
--scroll-edge-fade-1: 0.05;
|
|
133
145
|
--scroll-edge-fade-2: 0.028;
|
|
134
146
|
--scroll-edge-fade-3: 0.01;
|
|
135
|
-
|
|
136
|
-
|
|
147
|
+
/* Same geometry as light (see the note there). The 2026-08-24 tuning of this
|
|
148
|
+
alpha was done against the self-cancelling geometry, so it tuned an effect
|
|
149
|
+
nobody could see — re-tuned 2026-09-28 against the working one. */
|
|
150
|
+
--scroll-edge-shadow-down: 0 4px 12px rgb(var(--scroll-edge-ink) / 0.05);
|
|
151
|
+
--scroll-edge-shadow-up: 0 -4px 12px rgb(var(--scroll-edge-ink) / 0.05);
|
|
137
152
|
}
|
|
138
153
|
|
|
139
154
|
/** Isolate scroll chain — for nested lists, panels, and navigation drawers. */
|
package/dist/tailwind.preset.cjs
CHANGED
|
@@ -372,7 +372,7 @@ module.exports = {
|
|
|
372
372
|
"surface-notice-desktop-badge": "var(--surface-notice-desktop-badge)",
|
|
373
373
|
"surface-primary-desktop-badge": "var(--surface-primary-desktop-badge)",
|
|
374
374
|
"surface-neutral-desktop-badge": "var(--surface-neutral-desktop-badge)",
|
|
375
|
-
"surface-neutral-badge-
|
|
375
|
+
"surface-neutral-desktop-badge-pressed": "var(--surface-neutral-desktop-badge-pressed)",
|
|
376
376
|
"border-neutral-desktop-badge-hover": "var(--border-neutral-desktop-badge-hover)",
|
|
377
377
|
"border-secondary-card-active": "var(--border-secondary-card-active)",
|
|
378
378
|
"text-highlight-default": "var(--text-highlight-default)",
|
|
@@ -641,7 +641,6 @@ module.exports = {
|
|
|
641
641
|
"surface-neutral-inactive-carousel-pagination": "var(--surface-neutral-inactive-carousel-pagination)",
|
|
642
642
|
"surface-primary-active-carousel-pagination": "var(--surface-primary-active-carousel-pagination)",
|
|
643
643
|
"surface-neutral-search-field": "var(--surface-neutral-search-field)",
|
|
644
|
-
"surface-neutral-alt-search-field": "var(--surface-neutral-alt-search-field)",
|
|
645
644
|
"surface-caution-rating-progress-bar": "var(--surface-caution-rating-progress-bar)",
|
|
646
645
|
"surface-neutral-mobile-chip-active": "var(--surface-neutral-mobile-chip-active)",
|
|
647
646
|
"surface-neutral-filter-group-pressed": "var(--surface-neutral-filter-group-pressed)",
|
|
@@ -700,7 +699,9 @@ module.exports = {
|
|
|
700
699
|
"border-neutral-table-cell-selected": "var(--border-neutral-table-cell-selected)",
|
|
701
700
|
"border-neutral-input-field": "var(--border-neutral-input-field)",
|
|
702
701
|
"border-disabled-input-field": "var(--border-disabled-input-field)",
|
|
703
|
-
"border-neutral-text-area": "var(--border-neutral-text-area)"
|
|
702
|
+
"border-neutral-text-area": "var(--border-neutral-text-area)",
|
|
703
|
+
"surface-neutral-desktop-badge-hover": "var(--surface-neutral-desktop-badge-hover)",
|
|
704
|
+
"border-neutral-desktop-badge-pressed": "var(--border-neutral-desktop-badge-pressed)"
|
|
704
705
|
},
|
|
705
706
|
"fontSize": {
|
|
706
707
|
"8px": "var(--fonts-size-8px)",
|
|
@@ -751,7 +752,8 @@ module.exports = {
|
|
|
751
752
|
"xl": "var(--rounding-xl)",
|
|
752
753
|
"xxl": "var(--rounding-xxl)",
|
|
753
754
|
"round": "var(--rounding-round)",
|
|
754
|
-
"none": "var(--rounding-none)"
|
|
755
|
+
"none": "var(--rounding-none)",
|
|
756
|
+
"xxxl": "var(--rounding-xxxl)"
|
|
755
757
|
},
|
|
756
758
|
"opacity": {
|
|
757
759
|
"60": "var(--opacity-60)"
|
package/dist/tokens.css
CHANGED
|
@@ -376,6 +376,7 @@
|
|
|
376
376
|
--size-containers-xxl: var(--scale-1100);
|
|
377
377
|
--size-containers-xxxl: var(--scale-1300);
|
|
378
378
|
--padding-1px: var(--scale-25);
|
|
379
|
+
--rounding-xxxl: var(--scale-600);
|
|
379
380
|
|
|
380
381
|
/* Mapped Colors — Light Mode (default) */
|
|
381
382
|
--text-default-sub-heading: var(--colors-neutral-default);
|
|
@@ -458,7 +459,7 @@
|
|
|
458
459
|
--surface-success-mobile-button-idle: var(--colors-success-default);
|
|
459
460
|
--surface-success-button-hover: var(--colors-success-600);
|
|
460
461
|
--surface-error-ghost-button-hover: var(--colors-error-50);
|
|
461
|
-
--border-neutral-default: color-mix(in srgb, var(--colors-neutral-200)
|
|
462
|
+
--border-neutral-default: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
|
|
462
463
|
--border-neutral-card-hover: var(--colors-neutral-200);
|
|
463
464
|
--border-secondary-primary-button: var(--colors-secondary-900);
|
|
464
465
|
--border-secondary-primary-button-hover: var(--colors-secondary-700);
|
|
@@ -515,8 +516,8 @@
|
|
|
515
516
|
--surface-notice-desktop-badge: var(--colors-notice-50);
|
|
516
517
|
--surface-primary-desktop-badge: var(--colors-primary-100);
|
|
517
518
|
--surface-neutral-desktop-badge: var(--colors-neutral-100);
|
|
518
|
-
--surface-neutral-badge-
|
|
519
|
-
--border-neutral-desktop-badge-hover: var(--colors-neutral-
|
|
519
|
+
--surface-neutral-desktop-badge-pressed: var(--colors-neutral-150);
|
|
520
|
+
--border-neutral-desktop-badge-hover: var(--colors-neutral-300);
|
|
520
521
|
--border-secondary-card-active: var(--colors-secondary-900);
|
|
521
522
|
--text-highlight-default: var(--colors-highlight-default);
|
|
522
523
|
--text-highlight-label: var(--colors-highlight-600);
|
|
@@ -580,7 +581,7 @@
|
|
|
580
581
|
--surface-neutral-card-pressed: var(--colors-neutral-white);
|
|
581
582
|
--text-secondary-plain-button-idle: var(--colors-secondary-900);
|
|
582
583
|
--icons-secondary-plain-button-idle: var(--colors-secondary-900);
|
|
583
|
-
--border-neutral-card-idle: color-mix(in srgb, var(--colors-neutral-200)
|
|
584
|
+
--border-neutral-card-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
|
|
584
585
|
--border-neutral-card-pressed: var(--colors-neutral-300);
|
|
585
586
|
--surface-neutral-card-active: var(--colors-neutral-white);
|
|
586
587
|
--surface-neutral-sidebar-main-navigation-hover: var(--colors-neutral-150);
|
|
@@ -591,18 +592,18 @@
|
|
|
591
592
|
--surface-neutral-sidebar: var(--colors-neutral-white);
|
|
592
593
|
--border-neutral-sidebar: var(--colors-neutral-200);
|
|
593
594
|
--surface-neutral-sidebar-main-navigation-active: var(--colors-neutral-150);
|
|
594
|
-
--surface-disabled-input-field: var(--colors-neutral-
|
|
595
|
+
--surface-disabled-input-field: var(--colors-neutral-50);
|
|
595
596
|
--surface-disabled-toggle-disabled: var(--colors-neutral-400);
|
|
596
597
|
--text-disabled-placeholder-disabled: var(--colors-neutral-300);
|
|
597
598
|
--surface-neutral-selector-field: var(--colors-neutral-white);
|
|
598
|
-
--surface-neutral-input-field: var(--colors-neutral-
|
|
599
|
+
--surface-neutral-input-field: var(--colors-neutral-white);
|
|
599
600
|
--surface-disabled-secondary-button: var(--colors-neutral-white);
|
|
600
601
|
--text-disabled-helper-disabled: var(--colors-neutral-300);
|
|
601
602
|
--surface-neutral-chip-idle: var(--colors-neutral-white);
|
|
602
603
|
--surface-neutral-chip-hover: var(--colors-neutral-100);
|
|
603
604
|
--surface-neutral-chip-pressed: var(--colors-neutral-100);
|
|
604
605
|
--surface-neutral-chip-active: var(--colors-neutral-white);
|
|
605
|
-
--border-neutral-chip-idle: color-mix(in srgb, var(--colors-neutral-200)
|
|
606
|
+
--border-neutral-chip-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
|
|
606
607
|
--border-neutral-chip-hover: var(--colors-neutral-200);
|
|
607
608
|
--border-neutral-chip-pressed: var(--colors-neutral-300);
|
|
608
609
|
--border-secondary-chip-active: var(--colors-secondary-900);
|
|
@@ -649,7 +650,7 @@
|
|
|
649
650
|
--border-neutral-time-picker-hover: var(--colors-neutral-100);
|
|
650
651
|
--border-neutral-time-picker-pressed: var(--colors-neutral-150);
|
|
651
652
|
--surface-neutral-filter-group-idle: var(--colors-neutral-white);
|
|
652
|
-
--border-neutral-filter-group-idle: color-mix(in srgb, var(--colors-neutral-200)
|
|
653
|
+
--border-neutral-filter-group-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
|
|
653
654
|
--surface-neutral-filter-group-hover: var(--colors-neutral-100);
|
|
654
655
|
--border-neutral-filter-group-hover: var(--colors-neutral-200);
|
|
655
656
|
--border-secondary-filter-group-active: var(--colors-secondary-900);
|
|
@@ -657,10 +658,10 @@
|
|
|
657
658
|
--surface-neutral-pagination-idle: var(--colors-neutral-white);
|
|
658
659
|
--surface-neutral-pagination-hover: var(--colors-neutral-100);
|
|
659
660
|
--surface-neutral-pagination-pressed: var(--colors-neutral-150);
|
|
660
|
-
--surface-secondary-pagination-active: var(--colors-secondary-
|
|
661
|
+
--surface-secondary-pagination-active: var(--colors-secondary-100);
|
|
661
662
|
--border-neutral-pagination-hover: var(--colors-neutral-100);
|
|
662
663
|
--border-neutral-pagination-pressed: var(--colors-neutral-150);
|
|
663
|
-
--border-secondary-pagination-active: var(--colors-secondary-
|
|
664
|
+
--border-secondary-pagination-active: var(--colors-secondary-200);
|
|
664
665
|
--surface-neutral-dropdown-advanced-hover: var(--colors-neutral-100);
|
|
665
666
|
--surface-neutral-dropdown-advanced-pressed: var(--colors-neutral-150);
|
|
666
667
|
--surface-neutral-dropdown-advanced-idle: var(--colors-neutral-white);
|
|
@@ -676,7 +677,7 @@
|
|
|
676
677
|
--surface-neutral-user-menu-pressed: var(--colors-neutral-150);
|
|
677
678
|
--border-neutral-user-menu-hover: var(--colors-neutral-100);
|
|
678
679
|
--border-neutral-user-menu-pressed: var(--colors-neutral-150);
|
|
679
|
-
--border-neutral-user-menu-idle: color-mix(in srgb, var(--colors-neutral-white)
|
|
680
|
+
--border-neutral-user-menu-idle: color-mix(in srgb, var(--colors-neutral-white) 80%, transparent);
|
|
680
681
|
--surface-neutral-ghost-button-idle: var(--colors-neutral-white);
|
|
681
682
|
--border-neutral-ghost-button-idle: var(--colors-neutral-white);
|
|
682
683
|
--surface-success-bg-raised: var(--colors-success-100);
|
|
@@ -699,15 +700,15 @@
|
|
|
699
700
|
--surface-neutral-sub-filter-tab-pressed: var(--colors-neutral-150);
|
|
700
701
|
--surface-neutral-sub-filter-tab-active: var(--colors-neutral-white);
|
|
701
702
|
--surface-neutral-top-filter-tab-idle: var(--colors-neutral-white);
|
|
702
|
-
--surface-neutral-top-filter-tab-hover: var(--colors-neutral-
|
|
703
|
-
--surface-neutral-top-filter-tab-pressed: var(--colors-neutral-
|
|
703
|
+
--surface-neutral-top-filter-tab-hover: var(--colors-neutral-50);
|
|
704
|
+
--surface-neutral-top-filter-tab-pressed: var(--colors-neutral-100);
|
|
704
705
|
--surface-neutral-top-filter-tab-active: var(--colors-neutral-white);
|
|
705
|
-
--border-neutral-sub-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-white)
|
|
706
|
+
--border-neutral-sub-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-white) 80%, transparent);
|
|
706
707
|
--border-neutral-sub-filter-tab-hover: var(--colors-neutral-100);
|
|
707
708
|
--border-neutral-sub-filter-tab-pressed: var(--colors-neutral-150);
|
|
708
709
|
--border-neutral-top-filter-tab-pressed: var(--colors-neutral-300);
|
|
709
710
|
--border-neutral-sub-filter-tab-active: var(--colors-neutral-white);
|
|
710
|
-
--border-neutral-top-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-200)
|
|
711
|
+
--border-neutral-top-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
|
|
711
712
|
--border-neutral-top-filter-tab-hover: var(--colors-neutral-200);
|
|
712
713
|
--border-secondary-top-filter-tab-active: var(--colors-secondary-900);
|
|
713
714
|
--border-secondary-slider-track-idle: var(--colors-secondary-200);
|
|
@@ -767,11 +768,11 @@
|
|
|
767
768
|
--surface-neutral-avatar-bg: var(--colors-neutral-200);
|
|
768
769
|
--surface-neutral-mobile-chip-idle: var(--colors-neutral-white);
|
|
769
770
|
--surface-neutral-mobile-chip-pressed: var(--colors-neutral-100);
|
|
770
|
-
--border-neutral-mobile-chip-idle: color-mix(in srgb, var(--colors-neutral-200)
|
|
771
|
+
--border-neutral-mobile-chip-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
|
|
771
772
|
--border-neutral-mobile-chip-pressed: var(--colors-neutral-300);
|
|
772
773
|
--border-secondary-mobile-chip-active: var(--colors-secondary-900);
|
|
773
774
|
--surface-neutral-mobile-metric-card: var(--colors-neutral-white);
|
|
774
|
-
--border-neutral-mobile-metric-card: color-mix(in srgb, var(--colors-neutral-150)
|
|
775
|
+
--border-neutral-mobile-metric-card: color-mix(in srgb, var(--colors-neutral-150) 80%, transparent);
|
|
775
776
|
--surface-neutral-mobile-day-cell-idle: var(--colors-neutral-white);
|
|
776
777
|
--surface-neutral-mobile-day-cell-pressed: var(--colors-neutral-150);
|
|
777
778
|
--surface-secondary-mobile-day-cell-active: var(--colors-secondary-900);
|
|
@@ -783,8 +784,7 @@
|
|
|
783
784
|
--border-neutral-white: var(--colors-neutral-white);
|
|
784
785
|
--surface-neutral-inactive-carousel-pagination: var(--colors-neutral-300);
|
|
785
786
|
--surface-primary-active-carousel-pagination: var(--colors-primary-default);
|
|
786
|
-
--surface-neutral-search-field: var(--colors-neutral-
|
|
787
|
-
--surface-neutral-alt-search-field: var(--colors-neutral-white);
|
|
787
|
+
--surface-neutral-search-field: var(--colors-neutral-white);
|
|
788
788
|
--surface-caution-rating-progress-bar: var(--colors-caution-default);
|
|
789
789
|
--surface-neutral-mobile-chip-active: var(--colors-neutral-white);
|
|
790
790
|
--surface-neutral-filter-group-pressed: var(--colors-neutral-150);
|
|
@@ -836,14 +836,16 @@
|
|
|
836
836
|
--surface-primary-bg-alt: var(--colors-primary-900);
|
|
837
837
|
--surface-neutral-bg-alt: var(--colors-neutral-black);
|
|
838
838
|
--surface-secondary-table-cell-selected-pressed: var(--colors-secondary-50);
|
|
839
|
-
--border-neutral-table-cell-idle: color-mix(in srgb, var(--colors-neutral-200)
|
|
839
|
+
--border-neutral-table-cell-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
|
|
840
840
|
--border-neutral-table-cell-pressed: var(--colors-neutral-300);
|
|
841
841
|
--border-neutral-table-cell-hover: var(--colors-neutral-200);
|
|
842
842
|
--border-secondary-table-cell-selected-pressed: var(--colors-secondary-200);
|
|
843
843
|
--border-neutral-table-cell-selected: var(--colors-neutral-300);
|
|
844
844
|
--border-neutral-input-field: var(--colors-neutral-200);
|
|
845
845
|
--border-disabled-input-field: var(--colors-neutral-200);
|
|
846
|
-
--border-neutral-text-area: color-mix(in srgb, var(--colors-neutral-200)
|
|
846
|
+
--border-neutral-text-area: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
|
|
847
|
+
--surface-neutral-desktop-badge-hover: var(--colors-neutral-100);
|
|
848
|
+
--border-neutral-desktop-badge-pressed: var(--colors-neutral-400);
|
|
847
849
|
|
|
848
850
|
/* Mapped Type — Desktop (default) */
|
|
849
851
|
--inter-family: var(--fonts-primary);
|
|
@@ -1139,7 +1141,7 @@
|
|
|
1139
1141
|
--surface-success-mobile-button-idle: var(--colors-success-400);
|
|
1140
1142
|
--surface-success-button-hover: var(--colors-success-default);
|
|
1141
1143
|
--surface-error-ghost-button-hover: var(--colors-error-900);
|
|
1142
|
-
--border-neutral-default: color-mix(in srgb, var(--colors-neutral-600)
|
|
1144
|
+
--border-neutral-default: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1143
1145
|
--border-neutral-card-hover: var(--colors-neutral-600);
|
|
1144
1146
|
--border-secondary-primary-button: var(--colors-secondary-50);
|
|
1145
1147
|
--border-secondary-primary-button-hover: var(--colors-secondary-100);
|
|
@@ -1196,8 +1198,8 @@
|
|
|
1196
1198
|
--surface-notice-desktop-badge: var(--colors-notice-950);
|
|
1197
1199
|
--surface-primary-desktop-badge: var(--colors-primary-800);
|
|
1198
1200
|
--surface-neutral-desktop-badge: var(--colors-neutral-800);
|
|
1199
|
-
--surface-neutral-badge-
|
|
1200
|
-
--border-neutral-desktop-badge-hover: var(--colors-neutral-
|
|
1201
|
+
--surface-neutral-desktop-badge-pressed: var(--colors-neutral-700);
|
|
1202
|
+
--border-neutral-desktop-badge-hover: var(--colors-neutral-default);
|
|
1201
1203
|
--border-secondary-card-active: var(--colors-secondary-50);
|
|
1202
1204
|
--text-highlight-default: var(--colors-highlight-400);
|
|
1203
1205
|
--text-highlight-label: var(--colors-highlight-400);
|
|
@@ -1261,7 +1263,7 @@
|
|
|
1261
1263
|
--surface-neutral-card-pressed: var(--colors-neutral-900);
|
|
1262
1264
|
--text-secondary-plain-button-idle: var(--colors-secondary-50);
|
|
1263
1265
|
--icons-secondary-plain-button-idle: var(--colors-secondary-50);
|
|
1264
|
-
--border-neutral-card-idle: color-mix(in srgb, var(--colors-neutral-600)
|
|
1266
|
+
--border-neutral-card-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1265
1267
|
--border-neutral-card-pressed: var(--colors-neutral-200);
|
|
1266
1268
|
--surface-neutral-card-active: var(--colors-neutral-900);
|
|
1267
1269
|
--surface-neutral-sidebar-main-navigation-hover: var(--colors-neutral-800);
|
|
@@ -1272,18 +1274,18 @@
|
|
|
1272
1274
|
--surface-neutral-sidebar: var(--colors-neutral-black);
|
|
1273
1275
|
--border-neutral-sidebar: var(--colors-neutral-600);
|
|
1274
1276
|
--surface-neutral-sidebar-main-navigation-active: var(--colors-neutral-800);
|
|
1275
|
-
--surface-disabled-input-field: var(--colors-neutral-
|
|
1277
|
+
--surface-disabled-input-field: var(--colors-neutral-800);
|
|
1276
1278
|
--surface-disabled-toggle-disabled: var(--colors-neutral-default);
|
|
1277
1279
|
--text-disabled-placeholder-disabled: var(--colors-neutral-600);
|
|
1278
1280
|
--surface-neutral-selector-field: var(--colors-neutral-black);
|
|
1279
|
-
--surface-neutral-input-field: var(--colors-neutral-
|
|
1281
|
+
--surface-neutral-input-field: var(--colors-neutral-black);
|
|
1280
1282
|
--surface-disabled-secondary-button: var(--colors-neutral-black);
|
|
1281
1283
|
--text-disabled-helper-disabled: var(--colors-neutral-600);
|
|
1282
1284
|
--surface-neutral-chip-idle: var(--colors-neutral-black);
|
|
1283
1285
|
--surface-neutral-chip-hover: var(--colors-neutral-800);
|
|
1284
1286
|
--surface-neutral-chip-pressed: var(--colors-neutral-800);
|
|
1285
1287
|
--surface-neutral-chip-active: var(--colors-neutral-black);
|
|
1286
|
-
--border-neutral-chip-idle: color-mix(in srgb, var(--colors-neutral-600)
|
|
1288
|
+
--border-neutral-chip-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1287
1289
|
--border-neutral-chip-hover: var(--colors-neutral-600);
|
|
1288
1290
|
--border-neutral-chip-pressed: var(--colors-neutral-700);
|
|
1289
1291
|
--border-secondary-chip-active: var(--colors-secondary-50);
|
|
@@ -1330,7 +1332,7 @@
|
|
|
1330
1332
|
--border-neutral-time-picker-hover: var(--colors-neutral-800);
|
|
1331
1333
|
--border-neutral-time-picker-pressed: var(--colors-neutral-700);
|
|
1332
1334
|
--surface-neutral-filter-group-idle: var(--colors-neutral-black);
|
|
1333
|
-
--border-neutral-filter-group-idle: color-mix(in srgb, var(--colors-neutral-600)
|
|
1335
|
+
--border-neutral-filter-group-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1334
1336
|
--surface-neutral-filter-group-hover: var(--colors-neutral-800);
|
|
1335
1337
|
--border-neutral-filter-group-hover: var(--colors-neutral-600);
|
|
1336
1338
|
--border-secondary-filter-group-active: var(--colors-secondary-50);
|
|
@@ -1338,10 +1340,10 @@
|
|
|
1338
1340
|
--surface-neutral-pagination-idle: var(--colors-neutral-black);
|
|
1339
1341
|
--surface-neutral-pagination-hover: var(--colors-neutral-800);
|
|
1340
1342
|
--surface-neutral-pagination-pressed: var(--colors-neutral-700);
|
|
1341
|
-
--surface-secondary-pagination-active: var(--colors-secondary-
|
|
1343
|
+
--surface-secondary-pagination-active: var(--colors-secondary-800);
|
|
1342
1344
|
--border-neutral-pagination-hover: var(--colors-neutral-800);
|
|
1343
1345
|
--border-neutral-pagination-pressed: var(--colors-neutral-700);
|
|
1344
|
-
--border-secondary-pagination-active: var(--colors-secondary-
|
|
1346
|
+
--border-secondary-pagination-active: var(--colors-secondary-400);
|
|
1345
1347
|
--surface-neutral-dropdown-advanced-hover: var(--colors-neutral-800);
|
|
1346
1348
|
--surface-neutral-dropdown-advanced-pressed: var(--colors-neutral-700);
|
|
1347
1349
|
--surface-neutral-dropdown-advanced-idle: var(--colors-neutral-black);
|
|
@@ -1357,7 +1359,7 @@
|
|
|
1357
1359
|
--surface-neutral-user-menu-pressed: var(--colors-neutral-700);
|
|
1358
1360
|
--border-neutral-user-menu-hover: var(--colors-neutral-800);
|
|
1359
1361
|
--border-neutral-user-menu-pressed: var(--colors-neutral-700);
|
|
1360
|
-
--border-neutral-user-menu-idle: color-mix(in srgb, var(--colors-neutral-black)
|
|
1362
|
+
--border-neutral-user-menu-idle: color-mix(in srgb, var(--colors-neutral-black) 80%, transparent);
|
|
1361
1363
|
--surface-neutral-ghost-button-idle: var(--colors-neutral-black);
|
|
1362
1364
|
--border-neutral-ghost-button-idle: var(--colors-neutral-black);
|
|
1363
1365
|
--surface-success-bg-raised: var(--colors-success-900);
|
|
@@ -1380,15 +1382,15 @@
|
|
|
1380
1382
|
--surface-neutral-sub-filter-tab-pressed: var(--colors-neutral-700);
|
|
1381
1383
|
--surface-neutral-sub-filter-tab-active: var(--colors-neutral-black);
|
|
1382
1384
|
--surface-neutral-top-filter-tab-idle: var(--colors-neutral-black);
|
|
1383
|
-
--surface-neutral-top-filter-tab-hover: var(--colors-neutral-
|
|
1384
|
-
--surface-neutral-top-filter-tab-pressed: var(--colors-neutral-
|
|
1385
|
+
--surface-neutral-top-filter-tab-hover: var(--colors-neutral-900);
|
|
1386
|
+
--surface-neutral-top-filter-tab-pressed: var(--colors-neutral-800);
|
|
1385
1387
|
--surface-neutral-top-filter-tab-active: var(--colors-neutral-black);
|
|
1386
|
-
--border-neutral-sub-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-black)
|
|
1388
|
+
--border-neutral-sub-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-black) 80%, transparent);
|
|
1387
1389
|
--border-neutral-sub-filter-tab-hover: var(--colors-neutral-800);
|
|
1388
1390
|
--border-neutral-sub-filter-tab-pressed: var(--colors-neutral-700);
|
|
1389
1391
|
--border-neutral-top-filter-tab-pressed: var(--colors-neutral-700);
|
|
1390
1392
|
--border-neutral-sub-filter-tab-active: var(--colors-neutral-black);
|
|
1391
|
-
--border-neutral-top-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-600)
|
|
1393
|
+
--border-neutral-top-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1392
1394
|
--border-neutral-top-filter-tab-hover: var(--colors-neutral-600);
|
|
1393
1395
|
--border-secondary-top-filter-tab-active: var(--colors-secondary-50);
|
|
1394
1396
|
--border-secondary-slider-track-idle: var(--colors-secondary-700);
|
|
@@ -1448,11 +1450,11 @@
|
|
|
1448
1450
|
--surface-neutral-avatar-bg: var(--colors-neutral-600);
|
|
1449
1451
|
--surface-neutral-mobile-chip-idle: var(--colors-neutral-black);
|
|
1450
1452
|
--surface-neutral-mobile-chip-pressed: var(--colors-neutral-800);
|
|
1451
|
-
--border-neutral-mobile-chip-idle: color-mix(in srgb, var(--colors-neutral-600)
|
|
1453
|
+
--border-neutral-mobile-chip-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1452
1454
|
--border-neutral-mobile-chip-pressed: var(--colors-neutral-700);
|
|
1453
1455
|
--border-secondary-mobile-chip-active: var(--colors-secondary-50);
|
|
1454
1456
|
--surface-neutral-mobile-metric-card: var(--colors-neutral-900);
|
|
1455
|
-
--border-neutral-mobile-metric-card: color-mix(in srgb, var(--colors-neutral-700)
|
|
1457
|
+
--border-neutral-mobile-metric-card: color-mix(in srgb, var(--colors-neutral-700) 80%, transparent);
|
|
1456
1458
|
--surface-neutral-mobile-day-cell-idle: var(--colors-neutral-black);
|
|
1457
1459
|
--surface-neutral-mobile-day-cell-pressed: var(--colors-neutral-700);
|
|
1458
1460
|
--surface-secondary-mobile-day-cell-active: var(--colors-secondary-50);
|
|
@@ -1464,8 +1466,7 @@
|
|
|
1464
1466
|
--border-neutral-white: var(--colors-neutral-black);
|
|
1465
1467
|
--surface-neutral-inactive-carousel-pagination: var(--colors-neutral-default);
|
|
1466
1468
|
--surface-primary-active-carousel-pagination: var(--colors-primary-100);
|
|
1467
|
-
--surface-neutral-search-field: var(--colors-neutral-
|
|
1468
|
-
--surface-neutral-alt-search-field: var(--colors-neutral-black);
|
|
1469
|
+
--surface-neutral-search-field: var(--colors-neutral-black);
|
|
1469
1470
|
--surface-caution-rating-progress-bar: var(--colors-caution-400);
|
|
1470
1471
|
--surface-neutral-mobile-chip-active: var(--colors-neutral-black);
|
|
1471
1472
|
--surface-neutral-filter-group-pressed: var(--colors-neutral-700);
|
|
@@ -1517,14 +1518,16 @@
|
|
|
1517
1518
|
--surface-primary-bg-alt: var(--colors-primary-50);
|
|
1518
1519
|
--surface-neutral-bg-alt: var(--colors-neutral-white);
|
|
1519
1520
|
--surface-secondary-table-cell-selected-pressed: var(--colors-secondary-800);
|
|
1520
|
-
--border-neutral-table-cell-idle: color-mix(in srgb, var(--colors-neutral-600)
|
|
1521
|
+
--border-neutral-table-cell-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1521
1522
|
--border-neutral-table-cell-pressed: var(--colors-neutral-700);
|
|
1522
1523
|
--border-neutral-table-cell-hover: var(--colors-neutral-600);
|
|
1523
1524
|
--border-secondary-table-cell-selected-pressed: var(--colors-secondary-400);
|
|
1524
1525
|
--border-neutral-table-cell-selected: var(--colors-neutral-700);
|
|
1525
1526
|
--border-neutral-input-field: var(--colors-neutral-600);
|
|
1526
1527
|
--border-disabled-input-field: var(--colors-neutral-600);
|
|
1527
|
-
--border-neutral-text-area: color-mix(in srgb, var(--colors-neutral-600)
|
|
1528
|
+
--border-neutral-text-area: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1529
|
+
--surface-neutral-desktop-badge-hover: var(--colors-neutral-800);
|
|
1530
|
+
--border-neutral-desktop-badge-pressed: var(--colors-neutral-400);
|
|
1528
1531
|
}
|
|
1529
1532
|
|
|
1530
1533
|
@media (max-width: 1023px) {
|