@mild-ui/tokens 0.0.0-stage → 1.2.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/LICENSE +21 -0
- package/README.md +132 -2
- package/dist/_tokens.scss +315 -0
- package/dist/tokens.css +318 -0
- package/dist/tokens.json +314 -0
- package/dist/tokens.ts +404 -0
- package/package.json +56 -3
- package/src/primitives/animation.json +21 -0
- package/src/primitives/breakpoints.json +12 -0
- package/src/primitives/colors.json +267 -0
- package/src/primitives/dimensions.json +51 -0
- package/src/primitives/elevation.json +14 -0
- package/src/primitives/radius.json +15 -0
- package/src/primitives/spacing.json +46 -0
- package/src/primitives/typography.json +90 -0
- package/src/semantics/animation.json +12 -0
- package/src/semantics/colors.json +261 -0
- package/src/semantics/dark.json +77 -0
- package/src/semantics/high-contrast.json +77 -0
- package/src/semantics/light.json +77 -0
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"primary": {
|
|
4
|
+
"$description": "Alias of color.blue. Source: $mild-semantic-colors.primary.",
|
|
5
|
+
"$type": "color",
|
|
6
|
+
"50": {
|
|
7
|
+
"$value": "{color.blue.50}"
|
|
8
|
+
},
|
|
9
|
+
"100": {
|
|
10
|
+
"$value": "{color.blue.100}"
|
|
11
|
+
},
|
|
12
|
+
"200": {
|
|
13
|
+
"$value": "{color.blue.200}"
|
|
14
|
+
},
|
|
15
|
+
"300": {
|
|
16
|
+
"$value": "{color.blue.300}"
|
|
17
|
+
},
|
|
18
|
+
"400": {
|
|
19
|
+
"$value": "{color.blue.400}"
|
|
20
|
+
},
|
|
21
|
+
"500": {
|
|
22
|
+
"$value": "{color.blue.500}"
|
|
23
|
+
},
|
|
24
|
+
"600": {
|
|
25
|
+
"$value": "{color.blue.600}"
|
|
26
|
+
},
|
|
27
|
+
"700": {
|
|
28
|
+
"$value": "{color.blue.700}"
|
|
29
|
+
},
|
|
30
|
+
"800": {
|
|
31
|
+
"$value": "{color.blue.800}"
|
|
32
|
+
},
|
|
33
|
+
"900": {
|
|
34
|
+
"$value": "{color.blue.900}"
|
|
35
|
+
},
|
|
36
|
+
"950": {
|
|
37
|
+
"$value": "{color.blue.950}"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
"secondary": {
|
|
41
|
+
"$description": "Alias of color.gray. Source: $mild-semantic-colors.secondary.",
|
|
42
|
+
"$type": "color",
|
|
43
|
+
"50": {
|
|
44
|
+
"$value": "{color.gray.50}"
|
|
45
|
+
},
|
|
46
|
+
"100": {
|
|
47
|
+
"$value": "{color.gray.100}"
|
|
48
|
+
},
|
|
49
|
+
"200": {
|
|
50
|
+
"$value": "{color.gray.200}"
|
|
51
|
+
},
|
|
52
|
+
"300": {
|
|
53
|
+
"$value": "{color.gray.300}"
|
|
54
|
+
},
|
|
55
|
+
"400": {
|
|
56
|
+
"$value": "{color.gray.400}"
|
|
57
|
+
},
|
|
58
|
+
"500": {
|
|
59
|
+
"$value": "{color.gray.500}"
|
|
60
|
+
},
|
|
61
|
+
"600": {
|
|
62
|
+
"$value": "{color.gray.600}"
|
|
63
|
+
},
|
|
64
|
+
"700": {
|
|
65
|
+
"$value": "{color.gray.700}"
|
|
66
|
+
},
|
|
67
|
+
"800": {
|
|
68
|
+
"$value": "{color.gray.800}"
|
|
69
|
+
},
|
|
70
|
+
"900": {
|
|
71
|
+
"$value": "{color.gray.900}"
|
|
72
|
+
},
|
|
73
|
+
"950": {
|
|
74
|
+
"$value": "{color.gray.950}"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
"success": {
|
|
78
|
+
"$description": "Alias of color.green. Source: $mild-semantic-colors.success.",
|
|
79
|
+
"$type": "color",
|
|
80
|
+
"50": {
|
|
81
|
+
"$value": "{color.green.50}"
|
|
82
|
+
},
|
|
83
|
+
"100": {
|
|
84
|
+
"$value": "{color.green.100}"
|
|
85
|
+
},
|
|
86
|
+
"200": {
|
|
87
|
+
"$value": "{color.green.200}"
|
|
88
|
+
},
|
|
89
|
+
"300": {
|
|
90
|
+
"$value": "{color.green.300}"
|
|
91
|
+
},
|
|
92
|
+
"400": {
|
|
93
|
+
"$value": "{color.green.400}"
|
|
94
|
+
},
|
|
95
|
+
"500": {
|
|
96
|
+
"$value": "{color.green.500}"
|
|
97
|
+
},
|
|
98
|
+
"600": {
|
|
99
|
+
"$value": "{color.green.600}"
|
|
100
|
+
},
|
|
101
|
+
"700": {
|
|
102
|
+
"$value": "{color.green.700}"
|
|
103
|
+
},
|
|
104
|
+
"800": {
|
|
105
|
+
"$value": "{color.green.800}"
|
|
106
|
+
},
|
|
107
|
+
"900": {
|
|
108
|
+
"$value": "{color.green.900}"
|
|
109
|
+
},
|
|
110
|
+
"950": {
|
|
111
|
+
"$value": "{color.green.950}"
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
"warning": {
|
|
115
|
+
"$description": "Alias of color.yellow. Source: $mild-semantic-colors.warning.",
|
|
116
|
+
"$type": "color",
|
|
117
|
+
"50": {
|
|
118
|
+
"$value": "{color.yellow.50}"
|
|
119
|
+
},
|
|
120
|
+
"100": {
|
|
121
|
+
"$value": "{color.yellow.100}"
|
|
122
|
+
},
|
|
123
|
+
"200": {
|
|
124
|
+
"$value": "{color.yellow.200}"
|
|
125
|
+
},
|
|
126
|
+
"300": {
|
|
127
|
+
"$value": "{color.yellow.300}"
|
|
128
|
+
},
|
|
129
|
+
"400": {
|
|
130
|
+
"$value": "{color.yellow.400}"
|
|
131
|
+
},
|
|
132
|
+
"500": {
|
|
133
|
+
"$value": "{color.yellow.500}"
|
|
134
|
+
},
|
|
135
|
+
"600": {
|
|
136
|
+
"$value": "{color.yellow.600}"
|
|
137
|
+
},
|
|
138
|
+
"700": {
|
|
139
|
+
"$value": "{color.yellow.700}"
|
|
140
|
+
},
|
|
141
|
+
"800": {
|
|
142
|
+
"$value": "{color.yellow.800}"
|
|
143
|
+
},
|
|
144
|
+
"900": {
|
|
145
|
+
"$value": "{color.yellow.900}"
|
|
146
|
+
},
|
|
147
|
+
"950": {
|
|
148
|
+
"$value": "{color.yellow.950}"
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
"danger": {
|
|
152
|
+
"$description": "Alias of color.red. Source: $mild-semantic-colors.danger.",
|
|
153
|
+
"$type": "color",
|
|
154
|
+
"50": {
|
|
155
|
+
"$value": "{color.red.50}"
|
|
156
|
+
},
|
|
157
|
+
"100": {
|
|
158
|
+
"$value": "{color.red.100}"
|
|
159
|
+
},
|
|
160
|
+
"200": {
|
|
161
|
+
"$value": "{color.red.200}"
|
|
162
|
+
},
|
|
163
|
+
"300": {
|
|
164
|
+
"$value": "{color.red.300}"
|
|
165
|
+
},
|
|
166
|
+
"400": {
|
|
167
|
+
"$value": "{color.red.400}"
|
|
168
|
+
},
|
|
169
|
+
"500": {
|
|
170
|
+
"$value": "{color.red.500}"
|
|
171
|
+
},
|
|
172
|
+
"600": {
|
|
173
|
+
"$value": "{color.red.600}"
|
|
174
|
+
},
|
|
175
|
+
"700": {
|
|
176
|
+
"$value": "{color.red.700}"
|
|
177
|
+
},
|
|
178
|
+
"800": {
|
|
179
|
+
"$value": "{color.red.800}"
|
|
180
|
+
},
|
|
181
|
+
"900": {
|
|
182
|
+
"$value": "{color.red.900}"
|
|
183
|
+
},
|
|
184
|
+
"950": {
|
|
185
|
+
"$value": "{color.red.950}"
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
"error": {
|
|
189
|
+
"$description": "Alias of color.red. Source: $mild-semantic-colors.error.",
|
|
190
|
+
"$type": "color",
|
|
191
|
+
"50": {
|
|
192
|
+
"$value": "{color.red.50}"
|
|
193
|
+
},
|
|
194
|
+
"100": {
|
|
195
|
+
"$value": "{color.red.100}"
|
|
196
|
+
},
|
|
197
|
+
"200": {
|
|
198
|
+
"$value": "{color.red.200}"
|
|
199
|
+
},
|
|
200
|
+
"300": {
|
|
201
|
+
"$value": "{color.red.300}"
|
|
202
|
+
},
|
|
203
|
+
"400": {
|
|
204
|
+
"$value": "{color.red.400}"
|
|
205
|
+
},
|
|
206
|
+
"500": {
|
|
207
|
+
"$value": "{color.red.500}"
|
|
208
|
+
},
|
|
209
|
+
"600": {
|
|
210
|
+
"$value": "{color.red.600}"
|
|
211
|
+
},
|
|
212
|
+
"700": {
|
|
213
|
+
"$value": "{color.red.700}"
|
|
214
|
+
},
|
|
215
|
+
"800": {
|
|
216
|
+
"$value": "{color.red.800}"
|
|
217
|
+
},
|
|
218
|
+
"900": {
|
|
219
|
+
"$value": "{color.red.900}"
|
|
220
|
+
},
|
|
221
|
+
"950": {
|
|
222
|
+
"$value": "{color.red.950}"
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
"accent": {
|
|
226
|
+
"$type": "color",
|
|
227
|
+
"$value": "{color.primary.500}",
|
|
228
|
+
"$description": "The brand color behind primary buttons, checked controls, focus rings and active tabs. Override this (and the shades below) to re-theme. Source: the :root block of packages/core/src/sass/index.scss."
|
|
229
|
+
},
|
|
230
|
+
"accent-hover": {
|
|
231
|
+
"$type": "color",
|
|
232
|
+
"$value": "{color.primary.600}",
|
|
233
|
+
"$description": "Accent on hover. Source: the :root block of packages/core/src/sass/index.scss."
|
|
234
|
+
},
|
|
235
|
+
"accent-active": {
|
|
236
|
+
"$type": "color",
|
|
237
|
+
"$value": "{color.primary.700}",
|
|
238
|
+
"$description": "Accent while pressed. Source: the :root block of packages/core/src/sass/index.scss."
|
|
239
|
+
},
|
|
240
|
+
"accent-foreground": {
|
|
241
|
+
"$type": "color",
|
|
242
|
+
"$value": "{color.white}",
|
|
243
|
+
"$description": "Text and icons on top of the accent. Source: the :root block of packages/core/src/sass/index.scss."
|
|
244
|
+
},
|
|
245
|
+
"accent-soft": {
|
|
246
|
+
"$type": "color",
|
|
247
|
+
"$value": "{color.primary.300}",
|
|
248
|
+
"$description": "Accent-tinted borders, e.g. hover on a checkbox. Source: the :root block of packages/core/src/sass/index.scss."
|
|
249
|
+
},
|
|
250
|
+
"accent-subtle": {
|
|
251
|
+
"$type": "color",
|
|
252
|
+
"$value": "{color.primary.50}",
|
|
253
|
+
"$description": "Accent-tinted backgrounds, e.g. hover on a ghost button. Source: the :root block of packages/core/src/sass/index.scss."
|
|
254
|
+
},
|
|
255
|
+
"accent-muted": {
|
|
256
|
+
"$type": "color",
|
|
257
|
+
"$value": "{color.primary.100}",
|
|
258
|
+
"$description": "Stronger accent-tinted backgrounds, e.g. a pressed ghost button. Source: the :root block of packages/core/src/sass/index.scss."
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
{
|
|
2
|
+
"background": {
|
|
3
|
+
"$type": "color",
|
|
4
|
+
"$value": "#0a0a0a",
|
|
5
|
+
"$description": "Matches $mild-background in packages/core/src/sass/themes/dark.scss. Not a palette shade: core hardcodes this hex rather than referencing color.gray.950 (#030712)."
|
|
6
|
+
},
|
|
7
|
+
"foreground": {
|
|
8
|
+
"$type": "color",
|
|
9
|
+
"$value": "#fafafa",
|
|
10
|
+
"$description": "Matches $mild-foreground in packages/core/src/sass/themes/dark.scss. Not a palette shade; see background above."
|
|
11
|
+
},
|
|
12
|
+
"muted": {
|
|
13
|
+
"$type": "color",
|
|
14
|
+
"$value": "#262626",
|
|
15
|
+
"$description": "Matches $mild-muted in packages/core/src/sass/themes/dark.scss. Not a palette shade; see background above."
|
|
16
|
+
},
|
|
17
|
+
"muted-foreground": {
|
|
18
|
+
"$type": "color",
|
|
19
|
+
"$value": "#a3a3a3",
|
|
20
|
+
"$description": "Matches $mild-muted-foreground in packages/core/src/sass/themes/dark.scss: 7.85:1 on background, 6.00:1 on muted. Not a palette shade; see background above."
|
|
21
|
+
},
|
|
22
|
+
"border": {
|
|
23
|
+
"$type": "color",
|
|
24
|
+
"$value": "{color.gray.500}",
|
|
25
|
+
"$description": "core hardcodes #262626 here (same as muted), which is 1.31:1 on background and fails the 3:1 non-text contrast minimum (WCAG 1.4.11). color.gray.500 is 4.10:1; see scripts/check-contrast.ts."
|
|
26
|
+
},
|
|
27
|
+
"input": {
|
|
28
|
+
"$type": "color",
|
|
29
|
+
"$value": "{color.gray.500}",
|
|
30
|
+
"$description": "Same value as border, and the same fix; core hardcodes #262626 here too."
|
|
31
|
+
},
|
|
32
|
+
"ring": {
|
|
33
|
+
"$type": "color",
|
|
34
|
+
"$value": "{color.primary.400}",
|
|
35
|
+
"$description": "Matches $mild-ring in packages/core/src/sass/themes/dark.scss: 9.24:1 on background, already well above the 3:1 non-text minimum."
|
|
36
|
+
},
|
|
37
|
+
"card": {
|
|
38
|
+
"$type": "color",
|
|
39
|
+
"$value": "#0a0a0a",
|
|
40
|
+
"$description": "Matches $mild-card in packages/core/src/sass/themes/dark.scss. Not a palette shade; see background above."
|
|
41
|
+
},
|
|
42
|
+
"card-foreground": {
|
|
43
|
+
"$type": "color",
|
|
44
|
+
"$value": "#fafafa",
|
|
45
|
+
"$description": "Matches $mild-card-foreground in packages/core/src/sass/themes/dark.scss. Not a palette shade; see background above."
|
|
46
|
+
},
|
|
47
|
+
"popover": {
|
|
48
|
+
"$type": "color",
|
|
49
|
+
"$value": "#0a0a0a",
|
|
50
|
+
"$description": "Matches $mild-popover in packages/core/src/sass/themes/dark.scss. Not a palette shade; see background above."
|
|
51
|
+
},
|
|
52
|
+
"popover-foreground": {
|
|
53
|
+
"$type": "color",
|
|
54
|
+
"$value": "#fafafa",
|
|
55
|
+
"$description": "Matches $mild-popover-foreground in packages/core/src/sass/themes/dark.scss. Not a palette shade; see background above."
|
|
56
|
+
},
|
|
57
|
+
"accent": {
|
|
58
|
+
"$type": "color",
|
|
59
|
+
"$value": "#262626",
|
|
60
|
+
"$description": "Matches $mild-accent in packages/core/src/sass/themes/dark.scss. Not a palette shade; see background above."
|
|
61
|
+
},
|
|
62
|
+
"accent-foreground": {
|
|
63
|
+
"$type": "color",
|
|
64
|
+
"$value": "#fafafa",
|
|
65
|
+
"$description": "Matches $mild-accent-foreground in packages/core/src/sass/themes/dark.scss: 14.50:1 on accent."
|
|
66
|
+
},
|
|
67
|
+
"destructive": {
|
|
68
|
+
"$type": "color",
|
|
69
|
+
"$value": "{color.red.400}",
|
|
70
|
+
"$description": "Matches $mild-destructive in packages/core/src/sass/themes/dark.scss."
|
|
71
|
+
},
|
|
72
|
+
"destructive-foreground": {
|
|
73
|
+
"$type": "color",
|
|
74
|
+
"$value": "{color.gray.900}",
|
|
75
|
+
"$description": "Matches $mild-destructive-foreground in packages/core/src/sass/themes/dark.scss: 6.41:1 on destructive."
|
|
76
|
+
}
|
|
77
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
{
|
|
2
|
+
"background": {
|
|
3
|
+
"$type": "color",
|
|
4
|
+
"$value": "#ffffff",
|
|
5
|
+
"$description": "New theme, not present in @mild-ui/core. Pure white/black maximize contrast (21:1) instead of referencing the gray scale."
|
|
6
|
+
},
|
|
7
|
+
"foreground": {
|
|
8
|
+
"$type": "color",
|
|
9
|
+
"$value": "#000000",
|
|
10
|
+
"$description": "New theme, not present in @mild-ui/core. 21:1 on background."
|
|
11
|
+
},
|
|
12
|
+
"muted": {
|
|
13
|
+
"$type": "color",
|
|
14
|
+
"$value": "{color.gray.200}",
|
|
15
|
+
"$description": "New theme, not present in @mild-ui/core. Text stays pure black rather than gray, so muted surfaces don't need a dimmer foreground to read as 'muted'."
|
|
16
|
+
},
|
|
17
|
+
"muted-foreground": {
|
|
18
|
+
"$type": "color",
|
|
19
|
+
"$value": "#000000",
|
|
20
|
+
"$description": "New theme, not present in @mild-ui/core. 16.96:1 on muted; see muted above."
|
|
21
|
+
},
|
|
22
|
+
"border": {
|
|
23
|
+
"$type": "color",
|
|
24
|
+
"$value": "#000000",
|
|
25
|
+
"$description": "New theme, not present in @mild-ui/core. 21:1 on background, far above the 3:1 non-text minimum (WCAG 1.4.11)."
|
|
26
|
+
},
|
|
27
|
+
"input": {
|
|
28
|
+
"$type": "color",
|
|
29
|
+
"$value": "#000000",
|
|
30
|
+
"$description": "Same value as border."
|
|
31
|
+
},
|
|
32
|
+
"ring": {
|
|
33
|
+
"$type": "color",
|
|
34
|
+
"$value": "{color.primary.900}",
|
|
35
|
+
"$description": "New theme, not present in @mild-ui/core. 9.46:1 on background; a distinct hue from the black border/text so focus is still visible as a separate signal."
|
|
36
|
+
},
|
|
37
|
+
"card": {
|
|
38
|
+
"$type": "color",
|
|
39
|
+
"$value": "#ffffff",
|
|
40
|
+
"$description": "Same value as background."
|
|
41
|
+
},
|
|
42
|
+
"card-foreground": {
|
|
43
|
+
"$type": "color",
|
|
44
|
+
"$value": "#000000",
|
|
45
|
+
"$description": "Same value as foreground."
|
|
46
|
+
},
|
|
47
|
+
"popover": {
|
|
48
|
+
"$type": "color",
|
|
49
|
+
"$value": "#ffffff",
|
|
50
|
+
"$description": "Same value as background."
|
|
51
|
+
},
|
|
52
|
+
"popover-foreground": {
|
|
53
|
+
"$type": "color",
|
|
54
|
+
"$value": "#000000",
|
|
55
|
+
"$description": "Same value as foreground."
|
|
56
|
+
},
|
|
57
|
+
"accent": {
|
|
58
|
+
"$type": "color",
|
|
59
|
+
"$value": "{color.gray.900}",
|
|
60
|
+
"$description": "New theme, not present in @mild-ui/core. A solid near-black block instead of a subtle tint, so the accented state stays unambiguous."
|
|
61
|
+
},
|
|
62
|
+
"accent-foreground": {
|
|
63
|
+
"$type": "color",
|
|
64
|
+
"$value": "#ffffff",
|
|
65
|
+
"$description": "New theme, not present in @mild-ui/core. 17.74:1 on accent."
|
|
66
|
+
},
|
|
67
|
+
"destructive": {
|
|
68
|
+
"$type": "color",
|
|
69
|
+
"$value": "{color.red.700}",
|
|
70
|
+
"$description": "New theme, not present in @mild-ui/core. Darker than light.json's destructive for extra margin."
|
|
71
|
+
},
|
|
72
|
+
"destructive-foreground": {
|
|
73
|
+
"$type": "color",
|
|
74
|
+
"$value": "#ffffff",
|
|
75
|
+
"$description": "New theme, not present in @mild-ui/core. 6.47:1 on destructive."
|
|
76
|
+
}
|
|
77
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
{
|
|
2
|
+
"background": {
|
|
3
|
+
"$type": "color",
|
|
4
|
+
"$value": "{color.gray.50}",
|
|
5
|
+
"$description": "Matches $mild-background in packages/core/src/sass/themes/light.scss."
|
|
6
|
+
},
|
|
7
|
+
"foreground": {
|
|
8
|
+
"$type": "color",
|
|
9
|
+
"$value": "{color.gray.900}",
|
|
10
|
+
"$description": "Matches $mild-foreground in packages/core/src/sass/themes/light.scss."
|
|
11
|
+
},
|
|
12
|
+
"muted": {
|
|
13
|
+
"$type": "color",
|
|
14
|
+
"$value": "{color.gray.100}",
|
|
15
|
+
"$description": "Matches $mild-muted in packages/core/src/sass/themes/light.scss."
|
|
16
|
+
},
|
|
17
|
+
"muted-foreground": {
|
|
18
|
+
"$type": "color",
|
|
19
|
+
"$value": "{color.gray.600}",
|
|
20
|
+
"$description": "core uses color.gray.500 here, which is 4.39:1 on muted and fails WCAG AA (4.5:1) for text. color.gray.600 is 6.87:1 on muted and 7.23:1 on background; see scripts/check-contrast.ts."
|
|
21
|
+
},
|
|
22
|
+
"border": {
|
|
23
|
+
"$type": "color",
|
|
24
|
+
"$value": "{color.gray.500}",
|
|
25
|
+
"$description": "core uses color.gray.200 here, which is 1.18:1 on background and fails the 3:1 non-text contrast minimum (WCAG 1.4.11). color.gray.500 is 4.63:1; see scripts/check-contrast.ts."
|
|
26
|
+
},
|
|
27
|
+
"input": {
|
|
28
|
+
"$type": "color",
|
|
29
|
+
"$value": "{color.gray.500}",
|
|
30
|
+
"$description": "Same value as border, and the same fix; core uses color.gray.200 here too."
|
|
31
|
+
},
|
|
32
|
+
"ring": {
|
|
33
|
+
"$type": "color",
|
|
34
|
+
"$value": "{color.primary.600}",
|
|
35
|
+
"$description": "core uses color.primary.500 here, which is 2.65:1 on background and fails the 3:1 non-text contrast minimum (WCAG 1.4.11). color.primary.600 is 3.92:1; see scripts/check-contrast.ts."
|
|
36
|
+
},
|
|
37
|
+
"card": {
|
|
38
|
+
"$type": "color",
|
|
39
|
+
"$value": "{color.gray.50}",
|
|
40
|
+
"$description": "Matches $mild-card in packages/core/src/sass/themes/light.scss."
|
|
41
|
+
},
|
|
42
|
+
"card-foreground": {
|
|
43
|
+
"$type": "color",
|
|
44
|
+
"$value": "{color.gray.900}",
|
|
45
|
+
"$description": "Matches $mild-card-foreground in packages/core/src/sass/themes/light.scss."
|
|
46
|
+
},
|
|
47
|
+
"popover": {
|
|
48
|
+
"$type": "color",
|
|
49
|
+
"$value": "{color.gray.50}",
|
|
50
|
+
"$description": "Matches $mild-popover in packages/core/src/sass/themes/light.scss."
|
|
51
|
+
},
|
|
52
|
+
"popover-foreground": {
|
|
53
|
+
"$type": "color",
|
|
54
|
+
"$value": "{color.gray.900}",
|
|
55
|
+
"$description": "Matches $mild-popover-foreground in packages/core/src/sass/themes/light.scss."
|
|
56
|
+
},
|
|
57
|
+
"accent": {
|
|
58
|
+
"$type": "color",
|
|
59
|
+
"$value": "{color.gray.100}",
|
|
60
|
+
"$description": "Matches $mild-accent in packages/core/src/sass/themes/light.scss."
|
|
61
|
+
},
|
|
62
|
+
"accent-foreground": {
|
|
63
|
+
"$type": "color",
|
|
64
|
+
"$value": "{color.gray.900}",
|
|
65
|
+
"$description": "Matches $mild-accent-foreground in packages/core/src/sass/themes/light.scss."
|
|
66
|
+
},
|
|
67
|
+
"destructive": {
|
|
68
|
+
"$type": "color",
|
|
69
|
+
"$value": "{color.red.600}",
|
|
70
|
+
"$description": "core uses color.red.500 here, which only reaches 3.60:1 (3.76:1 with a pure white foreground) and fails WCAG AA (4.5:1) for text. color.red.600 is 4.83:1 with a white foreground; see scripts/check-contrast.ts."
|
|
71
|
+
},
|
|
72
|
+
"destructive-foreground": {
|
|
73
|
+
"$type": "color",
|
|
74
|
+
"$value": "#ffffff",
|
|
75
|
+
"$description": "core uses color.gray.50 here. Pure white gives a little more margin on the darker destructive red above (4.83:1 vs. 4.62:1) and there is no #ffffff primitive to reference."
|
|
76
|
+
}
|
|
77
|
+
}
|