@neasg/design-system 0.4.11 → 0.4.13
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/README.md +147 -5
- package/dist/avatar-profile-popover.d.ts +34 -0
- package/dist/avatar-profile-popover.js +27 -0
- package/dist/badge.d.ts +1 -1
- package/dist/button.d.ts +1 -1
- package/dist/card.d.ts +2 -0
- package/dist/card.js +72 -3
- package/dist/command-search.d.ts +47 -2
- package/dist/command-search.js +173 -24
- package/dist/command.d.ts +2 -0
- package/dist/command.js +2 -2
- package/dist/dialog-primitive.js +1 -1
- package/dist/draggable-tabs.d.ts +3 -0
- package/dist/draggable-tabs.js +4 -0
- package/dist/editable-table.js +2 -2
- package/dist/guidance-tip.d.ts +26 -0
- package/dist/guidance-tip.js +162 -0
- package/dist/index.d.ts +15 -6
- package/dist/index.js +6 -2
- package/dist/jump-target-highlight.d.ts +13 -0
- package/dist/jump-target-highlight.js +95 -0
- package/dist/layout.d.ts +27 -5
- package/dist/layout.js +128 -34
- package/dist/message-item.js +9 -10
- package/dist/notification.js +1 -1
- package/dist/page-layout.d.ts +22 -0
- package/dist/page-layout.js +38 -0
- package/dist/page-section.js +1 -1
- package/dist/popover-menu.js +2 -2
- package/dist/routing-timeline.js +1 -1
- package/dist/styles.css +16 -0
- package/dist/table-column-visibility.d.ts +2 -1
- package/dist/table-column-visibility.js +9 -8
- package/dist/table-toolbar.d.ts +2 -1
- package/dist/table-toolbar.js +7 -2
- package/dist/table.d.ts +31 -2
- package/dist/table.js +298 -23
- package/dist/tabs.d.ts +2 -1
- package/dist/tabs.js +8 -5
- package/dist/theme-switcher.d.ts +1 -1
- package/dist/theme-switcher.js +4 -6
- package/dist/theme.d.ts +336 -77
- package/dist/theme.js +269 -55
- package/package.json +1 -1
package/dist/theme.js
CHANGED
|
@@ -1,5 +1,105 @@
|
|
|
1
|
+
export const neaPaletteDarkTokenMapping = {
|
|
2
|
+
"--nea-green-50": "146 100% 15%",
|
|
3
|
+
"--nea-green-100": "145 100% 21%",
|
|
4
|
+
"--nea-green-200": "144 100% 27.5%",
|
|
5
|
+
"--nea-green-300": "144 84% 33%",
|
|
6
|
+
"--nea-green-400": "144 66% 40%",
|
|
7
|
+
"--nea-green-500": "144 50% 53%",
|
|
8
|
+
"--nea-green-600": "143 44% 67%",
|
|
9
|
+
"--nea-green-700": "142 45% 80%",
|
|
10
|
+
"--nea-green-800": "141 50% 90%",
|
|
11
|
+
"--nea-green-900": "140 57% 96%",
|
|
12
|
+
"--nea-blue-50": "224 64% 33%",
|
|
13
|
+
"--nea-blue-100": "226 71% 40%",
|
|
14
|
+
"--nea-blue-200": "224 76% 48%",
|
|
15
|
+
"--nea-blue-300": "221 83% 53%",
|
|
16
|
+
"--nea-blue-400": "217 91% 60%",
|
|
17
|
+
"--nea-blue-500": "213 94% 68%",
|
|
18
|
+
"--nea-blue-600": "213 97% 78%",
|
|
19
|
+
"--nea-blue-700": "213 97% 87%",
|
|
20
|
+
"--nea-blue-800": "214 95% 93%",
|
|
21
|
+
"--nea-blue-900": "214 100% 97%",
|
|
22
|
+
"--nea-amber-50": "22 78% 26%",
|
|
23
|
+
"--nea-amber-100": "22 82% 31%",
|
|
24
|
+
"--nea-amber-200": "26 90% 37%",
|
|
25
|
+
"--nea-amber-300": "32 95% 44%",
|
|
26
|
+
"--nea-amber-400": "38 92% 50%",
|
|
27
|
+
"--nea-amber-500": "43 96% 56%",
|
|
28
|
+
"--nea-amber-600": "43 96% 66%",
|
|
29
|
+
"--nea-amber-700": "48 97% 77%",
|
|
30
|
+
"--nea-amber-800": "48 96% 89%",
|
|
31
|
+
"--nea-amber-900": "48 100% 96%",
|
|
32
|
+
"--nea-red-50": "0 63% 31%",
|
|
33
|
+
"--nea-red-100": "0 74% 35%",
|
|
34
|
+
"--nea-red-200": "0 74% 42%",
|
|
35
|
+
"--nea-red-300": "0 72% 51%",
|
|
36
|
+
"--nea-red-400": "0 84% 60%",
|
|
37
|
+
"--nea-red-500": "0 91% 71%",
|
|
38
|
+
"--nea-red-600": "0 94% 82%",
|
|
39
|
+
"--nea-red-700": "0 96% 89%",
|
|
40
|
+
"--nea-red-800": "0 93% 94%",
|
|
41
|
+
"--nea-red-900": "0 86% 97%",
|
|
42
|
+
"--nea-violet-50": "264 69% 35%",
|
|
43
|
+
"--nea-violet-100": "263 70% 42%",
|
|
44
|
+
"--nea-violet-200": "263 84% 50%",
|
|
45
|
+
"--nea-violet-300": "263 89% 60%",
|
|
46
|
+
"--nea-violet-400": "258 90% 66%",
|
|
47
|
+
"--nea-violet-500": "255 92% 76%",
|
|
48
|
+
"--nea-violet-600": "252 95% 85%",
|
|
49
|
+
"--nea-violet-700": "252 96% 90%",
|
|
50
|
+
"--nea-violet-800": "250 100% 97%",
|
|
51
|
+
"--nea-violet-900": "250 100% 98%",
|
|
52
|
+
"--nea-neutral-0": "220 22% 6.5%",
|
|
53
|
+
"--nea-neutral-50": "220 18% 8%",
|
|
54
|
+
"--nea-neutral-100": "220 16% 9.5%",
|
|
55
|
+
"--nea-neutral-200": "220 14% 11.5%",
|
|
56
|
+
"--nea-neutral-300": "220 12% 13.5%",
|
|
57
|
+
"--nea-neutral-400": "220 10% 16%",
|
|
58
|
+
"--nea-neutral-500": "215 14% 68%",
|
|
59
|
+
"--nea-neutral-600": "214 18% 90%",
|
|
60
|
+
"--nea-neutral-700": "214 18% 92%",
|
|
61
|
+
"--nea-neutral-800": "214 18% 92%",
|
|
62
|
+
"--nea-neutral-900": "214 18% 92%",
|
|
63
|
+
"--nea-dark-neutral-50": "214 18% 92%",
|
|
64
|
+
"--nea-dark-neutral-100": "214 18% 90%",
|
|
65
|
+
"--nea-dark-neutral-200": "215 14% 68%",
|
|
66
|
+
"--nea-dark-neutral-300": "220 10% 16%",
|
|
67
|
+
"--nea-dark-neutral-400": "220 12% 13.5%",
|
|
68
|
+
"--nea-dark-neutral-500": "220 14% 11.5%",
|
|
69
|
+
"--nea-dark-neutral-600": "220 16% 9.5%",
|
|
70
|
+
"--nea-dark-neutral-700": "220 18% 8%",
|
|
71
|
+
"--nea-dark-neutral-800": "220 22% 6.5%",
|
|
72
|
+
};
|
|
73
|
+
export const neaDarkNeutralTokenMapping = {
|
|
74
|
+
"--nea-dark-neutral-50": "214 18% 92%",
|
|
75
|
+
"--nea-dark-neutral-100": "214 18% 90%",
|
|
76
|
+
"--nea-dark-neutral-200": "215 14% 68%",
|
|
77
|
+
"--nea-dark-neutral-300": "220 10% 16%",
|
|
78
|
+
"--nea-dark-neutral-400": "220 12% 13.5%",
|
|
79
|
+
"--nea-dark-neutral-500": "220 14% 11.5%",
|
|
80
|
+
"--nea-dark-neutral-600": "220 16% 9.5%",
|
|
81
|
+
"--nea-dark-neutral-700": "220 18% 8%",
|
|
82
|
+
"--nea-dark-neutral-800": "220 22% 6.5%",
|
|
83
|
+
};
|
|
84
|
+
function withPaletteDarkMappings(colors) {
|
|
85
|
+
return colors.map((color) => ({
|
|
86
|
+
...color,
|
|
87
|
+
darkValue: neaPaletteDarkTokenMapping[color.token],
|
|
88
|
+
}));
|
|
89
|
+
}
|
|
90
|
+
export const neaDarkNeutralPalette = withPaletteDarkMappings([
|
|
91
|
+
{ name: "Dark Neutral 50", token: "--nea-dark-neutral-50" },
|
|
92
|
+
{ name: "Dark Neutral 100", token: "--nea-dark-neutral-100" },
|
|
93
|
+
{ name: "Dark Neutral 200", token: "--nea-dark-neutral-200" },
|
|
94
|
+
{ name: "Dark Neutral 300", token: "--nea-dark-neutral-300" },
|
|
95
|
+
{ name: "Dark Neutral 400", token: "--nea-dark-neutral-400" },
|
|
96
|
+
{ name: "Dark Neutral 500", token: "--nea-dark-neutral-500" },
|
|
97
|
+
{ name: "Dark Neutral 600", token: "--nea-dark-neutral-600" },
|
|
98
|
+
{ name: "Dark Neutral 700", token: "--nea-dark-neutral-700" },
|
|
99
|
+
{ name: "Dark Neutral 800", token: "--nea-dark-neutral-800" },
|
|
100
|
+
]);
|
|
1
101
|
export const neaPalette = {
|
|
2
|
-
green: [
|
|
102
|
+
green: withPaletteDarkMappings([
|
|
3
103
|
{ name: "Green 50", token: "--nea-green-50" },
|
|
4
104
|
{ name: "Green 100", token: "--nea-green-100" },
|
|
5
105
|
{ name: "Green 200", token: "--nea-green-200" },
|
|
@@ -10,8 +110,8 @@ export const neaPalette = {
|
|
|
10
110
|
{ name: "Green 700", token: "--nea-green-700" },
|
|
11
111
|
{ name: "Green 800", token: "--nea-green-800" },
|
|
12
112
|
{ name: "Green 900", token: "--nea-green-900" },
|
|
13
|
-
],
|
|
14
|
-
blue: [
|
|
113
|
+
]),
|
|
114
|
+
blue: withPaletteDarkMappings([
|
|
15
115
|
{ name: "Blue 50", token: "--nea-blue-50" },
|
|
16
116
|
{ name: "Blue 100", token: "--nea-blue-100" },
|
|
17
117
|
{ name: "Blue 200", token: "--nea-blue-200" },
|
|
@@ -22,8 +122,8 @@ export const neaPalette = {
|
|
|
22
122
|
{ name: "Blue 700", token: "--nea-blue-700" },
|
|
23
123
|
{ name: "Blue 800", token: "--nea-blue-800" },
|
|
24
124
|
{ name: "Blue 900", token: "--nea-blue-900" },
|
|
25
|
-
],
|
|
26
|
-
amber: [
|
|
125
|
+
]),
|
|
126
|
+
amber: withPaletteDarkMappings([
|
|
27
127
|
{ name: "Amber 50", token: "--nea-amber-50" },
|
|
28
128
|
{ name: "Amber 100", token: "--nea-amber-100" },
|
|
29
129
|
{ name: "Amber 200", token: "--nea-amber-200" },
|
|
@@ -34,8 +134,8 @@ export const neaPalette = {
|
|
|
34
134
|
{ name: "Amber 700", token: "--nea-amber-700" },
|
|
35
135
|
{ name: "Amber 800", token: "--nea-amber-800" },
|
|
36
136
|
{ name: "Amber 900", token: "--nea-amber-900" },
|
|
37
|
-
],
|
|
38
|
-
red: [
|
|
137
|
+
]),
|
|
138
|
+
red: withPaletteDarkMappings([
|
|
39
139
|
{ name: "Red 50", token: "--nea-red-50" },
|
|
40
140
|
{ name: "Red 100", token: "--nea-red-100" },
|
|
41
141
|
{ name: "Red 200", token: "--nea-red-200" },
|
|
@@ -46,8 +146,8 @@ export const neaPalette = {
|
|
|
46
146
|
{ name: "Red 700", token: "--nea-red-700" },
|
|
47
147
|
{ name: "Red 800", token: "--nea-red-800" },
|
|
48
148
|
{ name: "Red 900", token: "--nea-red-900" },
|
|
49
|
-
],
|
|
50
|
-
violet: [
|
|
149
|
+
]),
|
|
150
|
+
violet: withPaletteDarkMappings([
|
|
51
151
|
{ name: "Violet 50", token: "--nea-violet-50" },
|
|
52
152
|
{ name: "Violet 100", token: "--nea-violet-100" },
|
|
53
153
|
{ name: "Violet 200", token: "--nea-violet-200" },
|
|
@@ -58,8 +158,8 @@ export const neaPalette = {
|
|
|
58
158
|
{ name: "Violet 700", token: "--nea-violet-700" },
|
|
59
159
|
{ name: "Violet 800", token: "--nea-violet-800" },
|
|
60
160
|
{ name: "Violet 900", token: "--nea-violet-900" },
|
|
61
|
-
],
|
|
62
|
-
neutral: [
|
|
161
|
+
]),
|
|
162
|
+
neutral: withPaletteDarkMappings([
|
|
63
163
|
{ name: "Neutral 0", token: "--nea-neutral-0" },
|
|
64
164
|
{ name: "Neutral 50", token: "--nea-neutral-50" },
|
|
65
165
|
{ name: "Neutral 100", token: "--nea-neutral-100" },
|
|
@@ -71,70 +171,184 @@ export const neaPalette = {
|
|
|
71
171
|
{ name: "Neutral 700", token: "--nea-neutral-700" },
|
|
72
172
|
{ name: "Neutral 800", token: "--nea-neutral-800" },
|
|
73
173
|
{ name: "Neutral 900", token: "--nea-neutral-900" },
|
|
74
|
-
],
|
|
75
|
-
darkNeutral:
|
|
76
|
-
{ name: "Dark Neutral 50", token: "--nea-dark-neutral-50" },
|
|
77
|
-
{ name: "Dark Neutral 100", token: "--nea-dark-neutral-100" },
|
|
78
|
-
{ name: "Dark Neutral 200", token: "--nea-dark-neutral-200" },
|
|
79
|
-
{ name: "Dark Neutral 300", token: "--nea-dark-neutral-300" },
|
|
80
|
-
{ name: "Dark Neutral 400", token: "--nea-dark-neutral-400" },
|
|
81
|
-
{ name: "Dark Neutral 500", token: "--nea-dark-neutral-500" },
|
|
82
|
-
{ name: "Dark Neutral 600", token: "--nea-dark-neutral-600" },
|
|
83
|
-
{ name: "Dark Neutral 700", token: "--nea-dark-neutral-700" },
|
|
84
|
-
{ name: "Dark Neutral 800", token: "--nea-dark-neutral-800" },
|
|
85
|
-
],
|
|
174
|
+
]),
|
|
175
|
+
darkNeutral: neaDarkNeutralPalette,
|
|
86
176
|
};
|
|
177
|
+
export const darkThemeTokenMapping = {
|
|
178
|
+
"--background": "var(--nea-dark-neutral-300)",
|
|
179
|
+
"--foreground": "var(--nea-dark-neutral-50)",
|
|
180
|
+
"--card": "var(--nea-dark-neutral-300)",
|
|
181
|
+
"--card-foreground": "var(--nea-dark-neutral-50)",
|
|
182
|
+
"--card-border": "220 10% 28%",
|
|
183
|
+
"--popover": "var(--nea-dark-neutral-300)",
|
|
184
|
+
"--popover-foreground": "var(--nea-dark-neutral-50)",
|
|
185
|
+
"--tooltip-background": "var(--nea-dark-neutral-800)",
|
|
186
|
+
"--tooltip-foreground": "var(--nea-dark-neutral-50)",
|
|
187
|
+
"--primary": "148 30% 38%",
|
|
188
|
+
"--primary-foreground": "var(--nea-dark-neutral-50)",
|
|
189
|
+
"--secondary": "var(--nea-dark-neutral-500)",
|
|
190
|
+
"--secondary-foreground": "var(--nea-dark-neutral-100)",
|
|
191
|
+
"--muted": "var(--nea-dark-neutral-500)",
|
|
192
|
+
"--muted-foreground": "var(--nea-dark-neutral-200)",
|
|
193
|
+
"--accent": "var(--nea-dark-neutral-500)",
|
|
194
|
+
"--accent-foreground": "var(--nea-dark-neutral-50)",
|
|
195
|
+
"--destructive": "0 72% 58%",
|
|
196
|
+
"--destructive-foreground": "var(--nea-dark-neutral-50)",
|
|
197
|
+
"--status-success": "148 20% 18%",
|
|
198
|
+
"--status-success-foreground": "148 28% 62%",
|
|
199
|
+
"--status-warning": "38 22% 18%",
|
|
200
|
+
"--status-warning-foreground": "42 42% 64%",
|
|
201
|
+
"--status-info": "214 22% 19%",
|
|
202
|
+
"--status-info-foreground": "214 36% 66%",
|
|
203
|
+
"--status-accent": "263 18% 20%",
|
|
204
|
+
"--status-accent-foreground": "255 34% 68%",
|
|
205
|
+
"--status-destructive": "0 20% 19%",
|
|
206
|
+
"--status-destructive-foreground": "0 42% 66%",
|
|
207
|
+
"--tab-list-background": "var(--table-header-background)",
|
|
208
|
+
"--tab-trigger-foreground": "var(--nea-dark-neutral-200)",
|
|
209
|
+
"--tab-trigger-hover-background": "var(--nea-dark-neutral-400)",
|
|
210
|
+
"--tab-trigger-active-background": "var(--nea-dark-neutral-300)",
|
|
211
|
+
"--tab-trigger-active-foreground": "var(--nea-dark-neutral-50)",
|
|
212
|
+
"--tab-indicator": "var(--primary)",
|
|
213
|
+
"--card-gradient-from": "var(--nea-green-700)",
|
|
214
|
+
"--card-gradient-to": "var(--nea-green-500)",
|
|
215
|
+
"--card-gradient-border": "var(--nea-green-500)",
|
|
216
|
+
"--card-gradient-foreground": "var(--nea-neutral-0)",
|
|
217
|
+
"--layout-chrome-background": "var(--nea-dark-neutral-500)",
|
|
218
|
+
"--layout-shell-background": "var(--layout-chrome-background)",
|
|
219
|
+
"--layout-sidebar-background": "var(--layout-chrome-background)",
|
|
220
|
+
"--layout-sidebar-logo-background": "hsl(var(--nea-neutral-0))",
|
|
221
|
+
"--layout-sidebar-border": "var(--card-border)",
|
|
222
|
+
"--layout-surface-background": "var(--nea-dark-neutral-400)",
|
|
223
|
+
"--layout-workspace-header-background": "var(--nea-dark-neutral-300)",
|
|
224
|
+
"--layout-surface-border": "var(--card-border)",
|
|
225
|
+
"--layout-surface-shadow": "0 24px 54px -34px rgb(0 0 0 / 0.64), 0 2px 10px rgb(0 0 0 / 0.26)",
|
|
226
|
+
"--overlay-shadow": "0 18px 36px -22px rgb(0 0 0 / 0.58), 0 8px 18px -14px rgb(0 0 0 / 0.34)",
|
|
227
|
+
"--overlay-shadow-strong": "0 10px 42px -24px rgb(0 0 0 / 0.68), 0 4px 16px -12px rgb(0 0 0 / 0.42)",
|
|
228
|
+
"--layout-right-panel-background": "var(--layout-surface-background)",
|
|
229
|
+
"--layout-right-panel-border": "220 10% 32%",
|
|
230
|
+
"--layout-right-panel-shadow": "-18px 0 36px -28px rgb(0 0 0 / 0.58), -2px 0 12px -8px rgb(0 0 0 / 0.46)",
|
|
231
|
+
"--table-header-background": "var(--nea-dark-neutral-500)",
|
|
232
|
+
"--table-row-striped-background": "var(--nea-dark-neutral-500)",
|
|
233
|
+
"--table-row-warning-background": "var(--nea-dark-neutral-300)",
|
|
234
|
+
"--border": "var(--card-border)",
|
|
235
|
+
"--input": "var(--card-border)",
|
|
236
|
+
"--ring": "148 30% 38%",
|
|
237
|
+
"--component-border": "var(--card-border)",
|
|
238
|
+
"--button-outline-background": "var(--nea-dark-neutral-500)",
|
|
239
|
+
"--button-outline-hover-background": "var(--nea-dark-neutral-400)",
|
|
240
|
+
"--button-outline-border": "var(--component-border)",
|
|
241
|
+
"--tab-list-border": "var(--component-border)",
|
|
242
|
+
"--table-border": "var(--component-border)",
|
|
243
|
+
};
|
|
244
|
+
function withDarkThemeMapping(token) {
|
|
245
|
+
return {
|
|
246
|
+
...token,
|
|
247
|
+
darkValue: darkThemeTokenMapping[token.token],
|
|
248
|
+
...(token.foregroundToken
|
|
249
|
+
? { darkForegroundValue: darkThemeTokenMapping[token.foregroundToken] }
|
|
250
|
+
: {}),
|
|
251
|
+
};
|
|
252
|
+
}
|
|
87
253
|
export const semanticColorTokens = [
|
|
88
|
-
{
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
{ name: "
|
|
94
|
-
{
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
254
|
+
withDarkThemeMapping({
|
|
255
|
+
name: "Background",
|
|
256
|
+
token: "--background",
|
|
257
|
+
foregroundToken: "--foreground",
|
|
258
|
+
}),
|
|
259
|
+
withDarkThemeMapping({ name: "Foreground", token: "--foreground" }),
|
|
260
|
+
withDarkThemeMapping({
|
|
261
|
+
name: "Card",
|
|
262
|
+
token: "--card",
|
|
263
|
+
foregroundToken: "--card-foreground",
|
|
264
|
+
}),
|
|
265
|
+
withDarkThemeMapping({ name: "Card Border", token: "--card-border" }),
|
|
266
|
+
withDarkThemeMapping({
|
|
267
|
+
name: "Popover",
|
|
268
|
+
token: "--popover",
|
|
269
|
+
foregroundToken: "--popover-foreground",
|
|
270
|
+
}),
|
|
271
|
+
withDarkThemeMapping({
|
|
272
|
+
name: "Primary",
|
|
273
|
+
token: "--primary",
|
|
274
|
+
foregroundToken: "--primary-foreground",
|
|
275
|
+
}),
|
|
276
|
+
withDarkThemeMapping({
|
|
277
|
+
name: "Secondary",
|
|
278
|
+
token: "--secondary",
|
|
279
|
+
foregroundToken: "--secondary-foreground",
|
|
280
|
+
}),
|
|
281
|
+
withDarkThemeMapping({
|
|
282
|
+
name: "Muted",
|
|
283
|
+
token: "--muted",
|
|
284
|
+
foregroundToken: "--muted-foreground",
|
|
285
|
+
}),
|
|
286
|
+
withDarkThemeMapping({
|
|
287
|
+
name: "Accent",
|
|
288
|
+
token: "--accent",
|
|
289
|
+
foregroundToken: "--accent-foreground",
|
|
290
|
+
}),
|
|
291
|
+
withDarkThemeMapping({
|
|
292
|
+
name: "Destructive",
|
|
293
|
+
token: "--destructive",
|
|
294
|
+
foregroundToken: "--destructive-foreground",
|
|
295
|
+
}),
|
|
296
|
+
withDarkThemeMapping({
|
|
99
297
|
name: "Status Success",
|
|
100
298
|
token: "--status-success",
|
|
101
299
|
foregroundToken: "--status-success-foreground",
|
|
102
|
-
},
|
|
103
|
-
{
|
|
300
|
+
}),
|
|
301
|
+
withDarkThemeMapping({
|
|
104
302
|
name: "Status Warning",
|
|
105
303
|
token: "--status-warning",
|
|
106
304
|
foregroundToken: "--status-warning-foreground",
|
|
107
|
-
},
|
|
108
|
-
{
|
|
305
|
+
}),
|
|
306
|
+
withDarkThemeMapping({
|
|
109
307
|
name: "Status Info",
|
|
110
308
|
token: "--status-info",
|
|
111
309
|
foregroundToken: "--status-info-foreground",
|
|
112
|
-
},
|
|
113
|
-
{
|
|
310
|
+
}),
|
|
311
|
+
withDarkThemeMapping({
|
|
114
312
|
name: "Status Accent",
|
|
115
313
|
token: "--status-accent",
|
|
116
314
|
foregroundToken: "--status-accent-foreground",
|
|
117
|
-
},
|
|
118
|
-
{
|
|
315
|
+
}),
|
|
316
|
+
withDarkThemeMapping({
|
|
119
317
|
name: "Status Destructive",
|
|
120
318
|
token: "--status-destructive",
|
|
121
319
|
foregroundToken: "--status-destructive-foreground",
|
|
122
|
-
},
|
|
123
|
-
{ name: "Tab List", token: "--tab-list-background" },
|
|
124
|
-
{ name: "Tab List Border", token: "--tab-list-border" },
|
|
125
|
-
{
|
|
126
|
-
|
|
320
|
+
}),
|
|
321
|
+
withDarkThemeMapping({ name: "Tab List", token: "--tab-list-background" }),
|
|
322
|
+
withDarkThemeMapping({ name: "Tab List Border", token: "--tab-list-border" }),
|
|
323
|
+
withDarkThemeMapping({
|
|
324
|
+
name: "Tab Trigger",
|
|
325
|
+
token: "--tab-trigger-hover-background",
|
|
326
|
+
foregroundToken: "--tab-trigger-foreground",
|
|
327
|
+
}),
|
|
328
|
+
withDarkThemeMapping({
|
|
127
329
|
name: "Tab Trigger Active",
|
|
128
330
|
token: "--tab-trigger-active-background",
|
|
129
331
|
foregroundToken: "--tab-trigger-active-foreground",
|
|
130
|
-
},
|
|
131
|
-
{ name: "Border", token: "--border" },
|
|
132
|
-
{ name: "Input", token: "--input" },
|
|
133
|
-
{ name: "Ring", token: "--ring" },
|
|
134
|
-
{
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
332
|
+
}),
|
|
333
|
+
withDarkThemeMapping({ name: "Border", token: "--border" }),
|
|
334
|
+
withDarkThemeMapping({ name: "Input", token: "--input" }),
|
|
335
|
+
withDarkThemeMapping({ name: "Ring", token: "--ring" }),
|
|
336
|
+
withDarkThemeMapping({
|
|
337
|
+
name: "Component Border",
|
|
338
|
+
token: "--component-border",
|
|
339
|
+
}),
|
|
340
|
+
withDarkThemeMapping({
|
|
341
|
+
name: "Button Outline",
|
|
342
|
+
token: "--button-outline-background",
|
|
343
|
+
}),
|
|
344
|
+
withDarkThemeMapping({
|
|
345
|
+
name: "Button Outline Hover",
|
|
346
|
+
token: "--button-outline-hover-background",
|
|
347
|
+
}),
|
|
348
|
+
withDarkThemeMapping({
|
|
349
|
+
name: "Button Outline Border",
|
|
350
|
+
token: "--button-outline-border",
|
|
351
|
+
}),
|
|
138
352
|
];
|
|
139
353
|
export const typographyTokens = [
|
|
140
354
|
{ name: "Sans Font", token: "--font-sans" },
|