@leta-io/design-tokens 0.1.0 → 0.3.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 -2
- package/dist/index.js +8 -2
- package/dist/map-elevation.css +12 -0
- package/dist/scroll-utilities.css +20 -5
- package/dist/tailwind.preset.cjs +6 -3
- package/dist/tokens.css +31 -26
- package/package.json +8 -3
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 */
|
|
@@ -1705,6 +1707,10 @@ declare const tokens: {
|
|
|
1705
1707
|
readonly borderDisabledInputField: "--border-disabled-input-field";
|
|
1706
1708
|
/** Border/neutral/text-area */
|
|
1707
1709
|
readonly borderNeutralTextArea: "--border-neutral-text-area";
|
|
1710
|
+
/** Surface/neutral/desktop-badge-hover */
|
|
1711
|
+
readonly surfaceNeutralDesktopBadgeHover: "--surface-neutral-desktop-badge-hover";
|
|
1712
|
+
/** Border/neutral/desktop-badge-pressed */
|
|
1713
|
+
readonly borderNeutralDesktopBadgePressed: "--border-neutral-desktop-badge-pressed";
|
|
1708
1714
|
/** Inter Family */
|
|
1709
1715
|
readonly interFamily: "--inter-family";
|
|
1710
1716
|
/** 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 */
|
|
@@ -1722,6 +1724,10 @@ var tokens = {
|
|
|
1722
1724
|
borderDisabledInputField: "--border-disabled-input-field",
|
|
1723
1725
|
/** Border/neutral/text-area */
|
|
1724
1726
|
borderNeutralTextArea: "--border-neutral-text-area",
|
|
1727
|
+
/** Surface/neutral/desktop-badge-hover */
|
|
1728
|
+
surfaceNeutralDesktopBadgeHover: "--surface-neutral-desktop-badge-hover",
|
|
1729
|
+
/** Border/neutral/desktop-badge-pressed */
|
|
1730
|
+
borderNeutralDesktopBadgePressed: "--border-neutral-desktop-badge-pressed",
|
|
1725
1731
|
/** Inter Family */
|
|
1726
1732
|
interFamily: "--inter-family",
|
|
1727
1733
|
/** 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)",
|
|
@@ -700,7 +700,9 @@ module.exports = {
|
|
|
700
700
|
"border-neutral-table-cell-selected": "var(--border-neutral-table-cell-selected)",
|
|
701
701
|
"border-neutral-input-field": "var(--border-neutral-input-field)",
|
|
702
702
|
"border-disabled-input-field": "var(--border-disabled-input-field)",
|
|
703
|
-
"border-neutral-text-area": "var(--border-neutral-text-area)"
|
|
703
|
+
"border-neutral-text-area": "var(--border-neutral-text-area)",
|
|
704
|
+
"surface-neutral-desktop-badge-hover": "var(--surface-neutral-desktop-badge-hover)",
|
|
705
|
+
"border-neutral-desktop-badge-pressed": "var(--border-neutral-desktop-badge-pressed)"
|
|
704
706
|
},
|
|
705
707
|
"fontSize": {
|
|
706
708
|
"8px": "var(--fonts-size-8px)",
|
|
@@ -751,7 +753,8 @@ module.exports = {
|
|
|
751
753
|
"xl": "var(--rounding-xl)",
|
|
752
754
|
"xxl": "var(--rounding-xxl)",
|
|
753
755
|
"round": "var(--rounding-round)",
|
|
754
|
-
"none": "var(--rounding-none)"
|
|
756
|
+
"none": "var(--rounding-none)",
|
|
757
|
+
"xxxl": "var(--rounding-xxxl)"
|
|
755
758
|
},
|
|
756
759
|
"opacity": {
|
|
757
760
|
"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);
|
|
@@ -602,7 +603,7 @@
|
|
|
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);
|
|
@@ -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);
|
|
@@ -702,12 +703,12 @@
|
|
|
702
703
|
--surface-neutral-top-filter-tab-hover: var(--colors-neutral-100);
|
|
703
704
|
--surface-neutral-top-filter-tab-pressed: var(--colors-neutral-150);
|
|
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);
|
|
@@ -836,14 +837,16 @@
|
|
|
836
837
|
--surface-primary-bg-alt: var(--colors-primary-900);
|
|
837
838
|
--surface-neutral-bg-alt: var(--colors-neutral-black);
|
|
838
839
|
--surface-secondary-table-cell-selected-pressed: var(--colors-secondary-50);
|
|
839
|
-
--border-neutral-table-cell-idle: color-mix(in srgb, var(--colors-neutral-200)
|
|
840
|
+
--border-neutral-table-cell-idle: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
|
|
840
841
|
--border-neutral-table-cell-pressed: var(--colors-neutral-300);
|
|
841
842
|
--border-neutral-table-cell-hover: var(--colors-neutral-200);
|
|
842
843
|
--border-secondary-table-cell-selected-pressed: var(--colors-secondary-200);
|
|
843
844
|
--border-neutral-table-cell-selected: var(--colors-neutral-300);
|
|
844
845
|
--border-neutral-input-field: var(--colors-neutral-200);
|
|
845
846
|
--border-disabled-input-field: var(--colors-neutral-200);
|
|
846
|
-
--border-neutral-text-area: color-mix(in srgb, var(--colors-neutral-200)
|
|
847
|
+
--border-neutral-text-area: color-mix(in srgb, var(--colors-neutral-200) 80%, transparent);
|
|
848
|
+
--surface-neutral-desktop-badge-hover: var(--colors-neutral-100);
|
|
849
|
+
--border-neutral-desktop-badge-pressed: var(--colors-neutral-400);
|
|
847
850
|
|
|
848
851
|
/* Mapped Type — Desktop (default) */
|
|
849
852
|
--inter-family: var(--fonts-primary);
|
|
@@ -1139,7 +1142,7 @@
|
|
|
1139
1142
|
--surface-success-mobile-button-idle: var(--colors-success-400);
|
|
1140
1143
|
--surface-success-button-hover: var(--colors-success-default);
|
|
1141
1144
|
--surface-error-ghost-button-hover: var(--colors-error-900);
|
|
1142
|
-
--border-neutral-default: color-mix(in srgb, var(--colors-neutral-600)
|
|
1145
|
+
--border-neutral-default: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1143
1146
|
--border-neutral-card-hover: var(--colors-neutral-600);
|
|
1144
1147
|
--border-secondary-primary-button: var(--colors-secondary-50);
|
|
1145
1148
|
--border-secondary-primary-button-hover: var(--colors-secondary-100);
|
|
@@ -1196,8 +1199,8 @@
|
|
|
1196
1199
|
--surface-notice-desktop-badge: var(--colors-notice-950);
|
|
1197
1200
|
--surface-primary-desktop-badge: var(--colors-primary-800);
|
|
1198
1201
|
--surface-neutral-desktop-badge: var(--colors-neutral-800);
|
|
1199
|
-
--surface-neutral-badge-
|
|
1200
|
-
--border-neutral-desktop-badge-hover: var(--colors-neutral-
|
|
1202
|
+
--surface-neutral-desktop-badge-pressed: var(--colors-neutral-700);
|
|
1203
|
+
--border-neutral-desktop-badge-hover: var(--colors-neutral-default);
|
|
1201
1204
|
--border-secondary-card-active: var(--colors-secondary-50);
|
|
1202
1205
|
--text-highlight-default: var(--colors-highlight-400);
|
|
1203
1206
|
--text-highlight-label: var(--colors-highlight-400);
|
|
@@ -1261,7 +1264,7 @@
|
|
|
1261
1264
|
--surface-neutral-card-pressed: var(--colors-neutral-900);
|
|
1262
1265
|
--text-secondary-plain-button-idle: var(--colors-secondary-50);
|
|
1263
1266
|
--icons-secondary-plain-button-idle: var(--colors-secondary-50);
|
|
1264
|
-
--border-neutral-card-idle: color-mix(in srgb, var(--colors-neutral-600)
|
|
1267
|
+
--border-neutral-card-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1265
1268
|
--border-neutral-card-pressed: var(--colors-neutral-200);
|
|
1266
1269
|
--surface-neutral-card-active: var(--colors-neutral-900);
|
|
1267
1270
|
--surface-neutral-sidebar-main-navigation-hover: var(--colors-neutral-800);
|
|
@@ -1283,7 +1286,7 @@
|
|
|
1283
1286
|
--surface-neutral-chip-hover: var(--colors-neutral-800);
|
|
1284
1287
|
--surface-neutral-chip-pressed: var(--colors-neutral-800);
|
|
1285
1288
|
--surface-neutral-chip-active: var(--colors-neutral-black);
|
|
1286
|
-
--border-neutral-chip-idle: color-mix(in srgb, var(--colors-neutral-600)
|
|
1289
|
+
--border-neutral-chip-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1287
1290
|
--border-neutral-chip-hover: var(--colors-neutral-600);
|
|
1288
1291
|
--border-neutral-chip-pressed: var(--colors-neutral-700);
|
|
1289
1292
|
--border-secondary-chip-active: var(--colors-secondary-50);
|
|
@@ -1330,7 +1333,7 @@
|
|
|
1330
1333
|
--border-neutral-time-picker-hover: var(--colors-neutral-800);
|
|
1331
1334
|
--border-neutral-time-picker-pressed: var(--colors-neutral-700);
|
|
1332
1335
|
--surface-neutral-filter-group-idle: var(--colors-neutral-black);
|
|
1333
|
-
--border-neutral-filter-group-idle: color-mix(in srgb, var(--colors-neutral-600)
|
|
1336
|
+
--border-neutral-filter-group-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1334
1337
|
--surface-neutral-filter-group-hover: var(--colors-neutral-800);
|
|
1335
1338
|
--border-neutral-filter-group-hover: var(--colors-neutral-600);
|
|
1336
1339
|
--border-secondary-filter-group-active: var(--colors-secondary-50);
|
|
@@ -1357,7 +1360,7 @@
|
|
|
1357
1360
|
--surface-neutral-user-menu-pressed: var(--colors-neutral-700);
|
|
1358
1361
|
--border-neutral-user-menu-hover: var(--colors-neutral-800);
|
|
1359
1362
|
--border-neutral-user-menu-pressed: var(--colors-neutral-700);
|
|
1360
|
-
--border-neutral-user-menu-idle: color-mix(in srgb, var(--colors-neutral-black)
|
|
1363
|
+
--border-neutral-user-menu-idle: color-mix(in srgb, var(--colors-neutral-black) 80%, transparent);
|
|
1361
1364
|
--surface-neutral-ghost-button-idle: var(--colors-neutral-black);
|
|
1362
1365
|
--border-neutral-ghost-button-idle: var(--colors-neutral-black);
|
|
1363
1366
|
--surface-success-bg-raised: var(--colors-success-900);
|
|
@@ -1383,12 +1386,12 @@
|
|
|
1383
1386
|
--surface-neutral-top-filter-tab-hover: var(--colors-neutral-800);
|
|
1384
1387
|
--surface-neutral-top-filter-tab-pressed: var(--colors-neutral-700);
|
|
1385
1388
|
--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)
|
|
1389
|
+
--border-neutral-sub-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-black) 80%, transparent);
|
|
1387
1390
|
--border-neutral-sub-filter-tab-hover: var(--colors-neutral-800);
|
|
1388
1391
|
--border-neutral-sub-filter-tab-pressed: var(--colors-neutral-700);
|
|
1389
1392
|
--border-neutral-top-filter-tab-pressed: var(--colors-neutral-700);
|
|
1390
1393
|
--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)
|
|
1394
|
+
--border-neutral-top-filter-tab-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1392
1395
|
--border-neutral-top-filter-tab-hover: var(--colors-neutral-600);
|
|
1393
1396
|
--border-secondary-top-filter-tab-active: var(--colors-secondary-50);
|
|
1394
1397
|
--border-secondary-slider-track-idle: var(--colors-secondary-700);
|
|
@@ -1448,11 +1451,11 @@
|
|
|
1448
1451
|
--surface-neutral-avatar-bg: var(--colors-neutral-600);
|
|
1449
1452
|
--surface-neutral-mobile-chip-idle: var(--colors-neutral-black);
|
|
1450
1453
|
--surface-neutral-mobile-chip-pressed: var(--colors-neutral-800);
|
|
1451
|
-
--border-neutral-mobile-chip-idle: color-mix(in srgb, var(--colors-neutral-600)
|
|
1454
|
+
--border-neutral-mobile-chip-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1452
1455
|
--border-neutral-mobile-chip-pressed: var(--colors-neutral-700);
|
|
1453
1456
|
--border-secondary-mobile-chip-active: var(--colors-secondary-50);
|
|
1454
1457
|
--surface-neutral-mobile-metric-card: var(--colors-neutral-900);
|
|
1455
|
-
--border-neutral-mobile-metric-card: color-mix(in srgb, var(--colors-neutral-700)
|
|
1458
|
+
--border-neutral-mobile-metric-card: color-mix(in srgb, var(--colors-neutral-700) 80%, transparent);
|
|
1456
1459
|
--surface-neutral-mobile-day-cell-idle: var(--colors-neutral-black);
|
|
1457
1460
|
--surface-neutral-mobile-day-cell-pressed: var(--colors-neutral-700);
|
|
1458
1461
|
--surface-secondary-mobile-day-cell-active: var(--colors-secondary-50);
|
|
@@ -1517,14 +1520,16 @@
|
|
|
1517
1520
|
--surface-primary-bg-alt: var(--colors-primary-50);
|
|
1518
1521
|
--surface-neutral-bg-alt: var(--colors-neutral-white);
|
|
1519
1522
|
--surface-secondary-table-cell-selected-pressed: var(--colors-secondary-800);
|
|
1520
|
-
--border-neutral-table-cell-idle: color-mix(in srgb, var(--colors-neutral-600)
|
|
1523
|
+
--border-neutral-table-cell-idle: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1521
1524
|
--border-neutral-table-cell-pressed: var(--colors-neutral-700);
|
|
1522
1525
|
--border-neutral-table-cell-hover: var(--colors-neutral-600);
|
|
1523
1526
|
--border-secondary-table-cell-selected-pressed: var(--colors-secondary-400);
|
|
1524
1527
|
--border-neutral-table-cell-selected: var(--colors-neutral-700);
|
|
1525
1528
|
--border-neutral-input-field: var(--colors-neutral-600);
|
|
1526
1529
|
--border-disabled-input-field: var(--colors-neutral-600);
|
|
1527
|
-
--border-neutral-text-area: color-mix(in srgb, var(--colors-neutral-600)
|
|
1530
|
+
--border-neutral-text-area: color-mix(in srgb, var(--colors-neutral-600) 80%, transparent);
|
|
1531
|
+
--surface-neutral-desktop-badge-hover: var(--colors-neutral-800);
|
|
1532
|
+
--border-neutral-desktop-badge-pressed: var(--colors-neutral-400);
|
|
1528
1533
|
}
|
|
1529
1534
|
|
|
1530
1535
|
@media (max-width: 1023px) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leta-io/design-tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "LETA design tokens — generated from Figma. Do not hand-edit dist/.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -19,10 +19,11 @@
|
|
|
19
19
|
"types": "./dist/index.d.ts",
|
|
20
20
|
"exports": {
|
|
21
21
|
".": {
|
|
22
|
-
"
|
|
23
|
-
"
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
23
|
+
"import": "./dist/index.js"
|
|
24
24
|
},
|
|
25
25
|
"./fonts": {
|
|
26
|
+
"types": "./dist/fonts.d.ts",
|
|
26
27
|
"import": "./dist/fonts.js"
|
|
27
28
|
},
|
|
28
29
|
"./css": "./dist/tokens.css",
|
|
@@ -44,6 +45,10 @@
|
|
|
44
45
|
"dependencies": {
|
|
45
46
|
"@fontsource-variable/inter": "^5.2.8"
|
|
46
47
|
},
|
|
48
|
+
"sideEffects": [
|
|
49
|
+
"**/*.css",
|
|
50
|
+
"./dist/fonts.js"
|
|
51
|
+
],
|
|
47
52
|
"scripts": {
|
|
48
53
|
"build": "tsup src/index.ts src/fonts.ts --format esm --dts --out-dir dist --external react && cp src/scroll-utilities.css dist/scroll-utilities.css && cp src/map-elevation.css dist/map-elevation.css && cp src/dark-elevation.css dist/dark-elevation.css && pnpm --filter @leta/cli tokens:generate",
|
|
49
54
|
"lint": "eslint src",
|