@onereach/styles 2.13.1-next.945.0 → 2.14.1
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/package.json +3 -2
- package/src/variables/tokens/design-tokens-next.json +212 -106
- package/tailwind-utils.js +41 -30
- package/tailwind.config.preset.js +3 -1
- package/tokens.css +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onereach/styles",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.14.1",
|
|
4
4
|
"description": "Styles for or-ui-next",
|
|
5
5
|
"main": "./main.css",
|
|
6
6
|
"unpkg": "./main.css",
|
|
@@ -47,5 +47,6 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@tailwindcss/typography": "^0.5.4",
|
|
49
49
|
"tailwindcss": "^3.1.3"
|
|
50
|
-
}
|
|
50
|
+
},
|
|
51
|
+
"gitHead": "a0d67a1ac6ae847e5a46b410333d235f5fe9d063"
|
|
51
52
|
}
|
|
@@ -2,427 +2,533 @@
|
|
|
2
2
|
"colors" : [
|
|
3
3
|
{
|
|
4
4
|
"name" : "white",
|
|
5
|
-
"value" : "rgba(255,255,255,1)"
|
|
5
|
+
"value" : "rgba(255,255,255,1)",
|
|
6
|
+
"groupName" : "white"
|
|
6
7
|
},
|
|
7
8
|
{
|
|
8
9
|
"name" : "black",
|
|
9
|
-
"value" : "rgba(0,0,0,1)"
|
|
10
|
+
"value" : "rgba(0,0,0,1)",
|
|
11
|
+
"groupName" : "black"
|
|
10
12
|
},
|
|
11
13
|
{
|
|
12
14
|
"name" : "light-primary",
|
|
13
|
-
"value" : "rgba(0,95,177,1)"
|
|
15
|
+
"value" : "rgba(0,95,177,1)",
|
|
16
|
+
"groupName" : "light/primary"
|
|
14
17
|
},
|
|
15
18
|
{
|
|
16
19
|
"name" : "light-on-primary",
|
|
17
|
-
"value" : "rgba(255,255,255,1)"
|
|
20
|
+
"value" : "rgba(255,255,255,1)",
|
|
21
|
+
"groupName" : "light/on-primary"
|
|
18
22
|
},
|
|
19
23
|
{
|
|
20
24
|
"name" : "light-primary-container",
|
|
21
|
-
"value" : "rgba(211,227,255,1)"
|
|
25
|
+
"value" : "rgba(211,227,255,1)",
|
|
26
|
+
"groupName" : "light/primary-container"
|
|
22
27
|
},
|
|
23
28
|
{
|
|
24
29
|
"name" : "light-on-primary-container",
|
|
25
|
-
"value" : "rgba(0,28,59,1)"
|
|
30
|
+
"value" : "rgba(0,28,59,1)",
|
|
31
|
+
"groupName" : "light/on-primary-container"
|
|
26
32
|
},
|
|
27
33
|
{
|
|
28
34
|
"name" : "light-secondary",
|
|
29
|
-
"value" : "rgba(84,95,113,1)"
|
|
35
|
+
"value" : "rgba(84,95,113,1)",
|
|
36
|
+
"groupName" : "light/secondary"
|
|
30
37
|
},
|
|
31
38
|
{
|
|
32
39
|
"name" : "light-on-secondary",
|
|
33
|
-
"value" : "rgba(255,255,255,1)"
|
|
40
|
+
"value" : "rgba(255,255,255,1)",
|
|
41
|
+
"groupName" : "light/on-secondary"
|
|
34
42
|
},
|
|
35
43
|
{
|
|
36
44
|
"name" : "light-secondary-container",
|
|
37
|
-
"value" : "rgba(216,227,248,1)"
|
|
45
|
+
"value" : "rgba(216,227,248,1)",
|
|
46
|
+
"groupName" : "light/secondary-container"
|
|
38
47
|
},
|
|
39
48
|
{
|
|
40
49
|
"name" : "light-on-secondary-container",
|
|
41
|
-
"value" : "rgba(18,28,43,1)"
|
|
50
|
+
"value" : "rgba(18,28,43,1)",
|
|
51
|
+
"groupName" : "light/on-secondary-container"
|
|
42
52
|
},
|
|
43
53
|
{
|
|
44
54
|
"name" : "light-tertiary",
|
|
45
|
-
"value" : "rgba(109,86,118,1)"
|
|
55
|
+
"value" : "rgba(109,86,118,1)",
|
|
56
|
+
"groupName" : "light/tertiary"
|
|
46
57
|
},
|
|
47
58
|
{
|
|
48
59
|
"name" : "light-on-tertiary",
|
|
49
|
-
"value" : "rgba(255,255,255,1)"
|
|
60
|
+
"value" : "rgba(255,255,255,1)",
|
|
61
|
+
"groupName" : "light/on-tertiary"
|
|
50
62
|
},
|
|
51
63
|
{
|
|
52
64
|
"name" : "light-tertiary-container",
|
|
53
|
-
"value" : "rgba(247,217,255,1)"
|
|
65
|
+
"value" : "rgba(247,217,255,1)",
|
|
66
|
+
"groupName" : "light/tertiary-container"
|
|
54
67
|
},
|
|
55
68
|
{
|
|
56
69
|
"name" : "light-on-tertiary-container",
|
|
57
|
-
"value" : "rgba(39,19,48,1)"
|
|
70
|
+
"value" : "rgba(39,19,48,1)",
|
|
71
|
+
"groupName" : "light/on-tertiary-container"
|
|
58
72
|
},
|
|
59
73
|
{
|
|
60
74
|
"name" : "light-error",
|
|
61
|
-
"value" : "rgba(186,27,27,1)"
|
|
75
|
+
"value" : "rgba(186,27,27,1)",
|
|
76
|
+
"groupName" : "light/error"
|
|
62
77
|
},
|
|
63
78
|
{
|
|
64
79
|
"name" : "light-on-error",
|
|
65
|
-
"value" : "rgba(255,255,255,1)"
|
|
80
|
+
"value" : "rgba(255,255,255,1)",
|
|
81
|
+
"groupName" : "light/on-error"
|
|
66
82
|
},
|
|
67
83
|
{
|
|
68
84
|
"name" : "light-error-container",
|
|
69
|
-
"value" : "rgba(255,237,233,1)"
|
|
85
|
+
"value" : "rgba(255,237,233,1)",
|
|
86
|
+
"groupName" : "light/error-container"
|
|
70
87
|
},
|
|
71
88
|
{
|
|
72
89
|
"name" : "light-on-error-container",
|
|
73
|
-
"value" : "rgba(147,0,6,1)"
|
|
90
|
+
"value" : "rgba(147,0,6,1)",
|
|
91
|
+
"groupName" : "light/on-error-container"
|
|
74
92
|
},
|
|
75
93
|
{
|
|
76
94
|
"name" : "light-success",
|
|
77
|
-
"value" : "rgba(44,137,0,1)"
|
|
95
|
+
"value" : "rgba(44,137,0,1)",
|
|
96
|
+
"groupName" : "light/success"
|
|
78
97
|
},
|
|
79
98
|
{
|
|
80
99
|
"name" : "light-on-success",
|
|
81
|
-
"value" : "rgba(255,255,255,1)"
|
|
100
|
+
"value" : "rgba(255,255,255,1)",
|
|
101
|
+
"groupName" : "light/on-success"
|
|
82
102
|
},
|
|
83
103
|
{
|
|
84
104
|
"name" : "light-success-container",
|
|
85
|
-
"value" : "rgba(204,255,170,1)"
|
|
105
|
+
"value" : "rgba(204,255,170,1)",
|
|
106
|
+
"groupName" : "light/success-container"
|
|
86
107
|
},
|
|
87
108
|
{
|
|
88
109
|
"name" : "light-on-success-container",
|
|
89
|
-
"value" : "rgba(22,82,0,1)"
|
|
110
|
+
"value" : "rgba(22,82,0,1)",
|
|
111
|
+
"groupName" : "light/on-success-container"
|
|
90
112
|
},
|
|
91
113
|
{
|
|
92
114
|
"name" : "light-warning",
|
|
93
|
-
"value" : "rgba(153,112,0,1)"
|
|
115
|
+
"value" : "rgba(153,112,0,1)",
|
|
116
|
+
"groupName" : "light/warning"
|
|
94
117
|
},
|
|
95
118
|
{
|
|
96
119
|
"name" : "light-on-warning",
|
|
97
|
-
"value" : "rgba(255,255,255,1)"
|
|
120
|
+
"value" : "rgba(255,255,255,1)",
|
|
121
|
+
"groupName" : "light/on- warning"
|
|
98
122
|
},
|
|
99
123
|
{
|
|
100
124
|
"name" : "light-warning-container",
|
|
101
|
-
"value" : "rgba(255,239,209,1)"
|
|
125
|
+
"value" : "rgba(255,239,209,1)",
|
|
126
|
+
"groupName" : "light/warning-container"
|
|
102
127
|
},
|
|
103
128
|
{
|
|
104
129
|
"name" : "light-on-warning-container",
|
|
105
|
-
"value" : "rgba(92,66,0,1)"
|
|
130
|
+
"value" : "rgba(92,66,0,1)",
|
|
131
|
+
"groupName" : "light/on- warning-container"
|
|
106
132
|
},
|
|
107
133
|
{
|
|
108
134
|
"name" : "light-background",
|
|
109
|
-
"value" : "rgba(255,255,255,1)"
|
|
135
|
+
"value" : "rgba(255,255,255,1)",
|
|
136
|
+
"groupName" : "light/background"
|
|
110
137
|
},
|
|
111
138
|
{
|
|
112
139
|
"name" : "light-on-background",
|
|
113
|
-
"value" : "rgba(27,27,29,1)"
|
|
140
|
+
"value" : "rgba(27,27,29,1)",
|
|
141
|
+
"groupName" : "light/on-background"
|
|
114
142
|
},
|
|
115
143
|
{
|
|
116
144
|
"name" : "light-surface",
|
|
117
|
-
"value" : "rgba(253,251,255,1)"
|
|
145
|
+
"value" : "rgba(253,251,255,1)",
|
|
146
|
+
"groupName" : "light/surface"
|
|
118
147
|
},
|
|
119
148
|
{
|
|
120
149
|
"name" : "light-surface-1",
|
|
121
|
-
"value" : "rgba(240,243,251,1)"
|
|
150
|
+
"value" : "rgba(240,243,251,1)",
|
|
151
|
+
"groupName" : "light/surface1"
|
|
122
152
|
},
|
|
123
153
|
{
|
|
124
154
|
"name" : "light-surface-2",
|
|
125
|
-
"value" : "rgba(
|
|
155
|
+
"value" : "rgba(233,239,249,1)",
|
|
156
|
+
"groupName" : "light/surface2"
|
|
126
157
|
},
|
|
127
158
|
{
|
|
128
159
|
"name" : "light-surface-3",
|
|
129
|
-
"value" : "rgba(225,234,246,1)"
|
|
160
|
+
"value" : "rgba(225,234,246,1)",
|
|
161
|
+
"groupName" : "light/surface3"
|
|
130
162
|
},
|
|
131
163
|
{
|
|
132
164
|
"name" : "light-surface-4",
|
|
133
|
-
"value" : "rgba(223,232,246,1)"
|
|
165
|
+
"value" : "rgba(223,232,246,1)",
|
|
166
|
+
"groupName" : "light/surface4"
|
|
134
167
|
},
|
|
135
168
|
{
|
|
136
169
|
"name" : "light-surface-5",
|
|
137
|
-
"value" : "rgba(218,229,244,1)"
|
|
170
|
+
"value" : "rgba(218,229,244,1)",
|
|
171
|
+
"groupName" : "light/surface5"
|
|
138
172
|
},
|
|
139
173
|
{
|
|
140
174
|
"name" : "light-on-surface",
|
|
141
|
-
"value" : "rgba(27,27,29,1)"
|
|
175
|
+
"value" : "rgba(27,27,29,1)",
|
|
176
|
+
"groupName" : "light/on-surface"
|
|
142
177
|
},
|
|
143
178
|
{
|
|
144
179
|
"name" : "light-surface-variant",
|
|
145
|
-
"value" : "rgba(223,226,235,1)"
|
|
180
|
+
"value" : "rgba(223,226,235,1)",
|
|
181
|
+
"groupName" : "light/surface-variant"
|
|
146
182
|
},
|
|
147
183
|
{
|
|
148
184
|
"name" : "light-on-surface-variant",
|
|
149
|
-
"value" : "rgba(67,71,78,1)"
|
|
185
|
+
"value" : "rgba(67,71,78,1)",
|
|
186
|
+
"groupName" : "light/on-surface-variant"
|
|
150
187
|
},
|
|
151
188
|
{
|
|
152
189
|
"name" : "light-inverse-surface",
|
|
153
|
-
"value" : "rgba(47,48,51,1)"
|
|
190
|
+
"value" : "rgba(47,48,51,1)",
|
|
191
|
+
"groupName" : "light/inverse-surface"
|
|
154
192
|
},
|
|
155
193
|
{
|
|
156
194
|
"name" : "light-inverse-on-surface",
|
|
157
|
-
"value" : "rgba(241,240,244,1)"
|
|
195
|
+
"value" : "rgba(241,240,244,1)",
|
|
196
|
+
"groupName" : "light/inverse-on-surface"
|
|
158
197
|
},
|
|
159
198
|
{
|
|
160
199
|
"name" : "light-inverse-primary",
|
|
161
|
-
"value" : "rgba(164,200,255,1)"
|
|
200
|
+
"value" : "rgba(164,200,255,1)",
|
|
201
|
+
"groupName" : "light/inverse-primary"
|
|
162
202
|
},
|
|
163
203
|
{
|
|
164
204
|
"name" : "light-outline",
|
|
165
|
-
"value" : "rgba(116,119,127,1)"
|
|
205
|
+
"value" : "rgba(116,119,127,1)",
|
|
206
|
+
"groupName" : "light/outline"
|
|
166
207
|
},
|
|
167
208
|
{
|
|
168
209
|
"name" : "light-shadow",
|
|
169
|
-
"value" : "rgba(0,0,0,1)"
|
|
210
|
+
"value" : "rgba(0,0,0,1)",
|
|
211
|
+
"groupName" : "light/shadow"
|
|
170
212
|
},
|
|
171
213
|
{
|
|
172
214
|
"name" : "light-on-disabled",
|
|
173
|
-
"value" : "rgba(27,27,29,0.3)"
|
|
215
|
+
"value" : "rgba(27,27,29,0.3)",
|
|
216
|
+
"groupName" : "light/on disabled"
|
|
174
217
|
},
|
|
175
218
|
{
|
|
176
219
|
"name" : "light-primary-opacity-0-08",
|
|
177
|
-
"value" : "rgba(0,95,177,0.08)"
|
|
220
|
+
"value" : "rgba(0,95,177,0.08)",
|
|
221
|
+
"groupName" : "light/primary/opacity-0.08"
|
|
178
222
|
},
|
|
179
223
|
{
|
|
180
224
|
"name" : "light-primary-opacity-0-12",
|
|
181
|
-
"value" : "rgba(0,95,177,0.12)"
|
|
225
|
+
"value" : "rgba(0,95,177,0.12)",
|
|
226
|
+
"groupName" : "light/primary/opacity-0.12"
|
|
182
227
|
},
|
|
183
228
|
{
|
|
184
229
|
"name" : "light-primary-opacity-0-16",
|
|
185
|
-
"value" : "rgba(0,95,177,0.16)"
|
|
230
|
+
"value" : "rgba(0,95,177,0.16)",
|
|
231
|
+
"groupName" : "light/primary/opacity-0.16"
|
|
186
232
|
},
|
|
187
233
|
{
|
|
188
234
|
"name" : "dark-primary",
|
|
189
|
-
"value" : "rgba(164,200,255,1)"
|
|
235
|
+
"value" : "rgba(164,200,255,1)",
|
|
236
|
+
"groupName" : "dark/primary"
|
|
190
237
|
},
|
|
191
238
|
{
|
|
192
239
|
"name" : "dark-on-primary",
|
|
193
|
-
"value" : "rgba(0,48,95,1)"
|
|
240
|
+
"value" : "rgba(0,48,95,1)",
|
|
241
|
+
"groupName" : "dark/on-primary"
|
|
194
242
|
},
|
|
195
243
|
{
|
|
196
244
|
"name" : "dark-primary-container",
|
|
197
|
-
"value" : "rgba(0,71,136,1)"
|
|
245
|
+
"value" : "rgba(0,71,136,1)",
|
|
246
|
+
"groupName" : "dark/primary-container"
|
|
198
247
|
},
|
|
199
248
|
{
|
|
200
249
|
"name" : "dark-on-primary-container",
|
|
201
|
-
"value" : "rgba(211,227,255,1)"
|
|
250
|
+
"value" : "rgba(211,227,255,1)",
|
|
251
|
+
"groupName" : "dark/on-primary-container"
|
|
202
252
|
},
|
|
203
253
|
{
|
|
204
254
|
"name" : "dark-secondary",
|
|
205
|
-
"value" : "rgba(188,199,220,1)"
|
|
255
|
+
"value" : "rgba(188,199,220,1)",
|
|
256
|
+
"groupName" : "dark/secondary"
|
|
206
257
|
},
|
|
207
258
|
{
|
|
208
259
|
"name" : "dark-on-secondary",
|
|
209
|
-
"value" : "rgba(38,49,65,1)"
|
|
260
|
+
"value" : "rgba(38,49,65,1)",
|
|
261
|
+
"groupName" : "dark/on-secondary"
|
|
210
262
|
},
|
|
211
263
|
{
|
|
212
264
|
"name" : "dark-secondary-container",
|
|
213
|
-
"value" : "rgba(61,71,88,1)"
|
|
265
|
+
"value" : "rgba(61,71,88,1)",
|
|
266
|
+
"groupName" : "dark/secondary-container"
|
|
214
267
|
},
|
|
215
268
|
{
|
|
216
269
|
"name" : "dark-on-secondary-container",
|
|
217
|
-
"value" : "rgba(216,227,248,1)"
|
|
270
|
+
"value" : "rgba(216,227,248,1)",
|
|
271
|
+
"groupName" : "dark/on-secondary-container"
|
|
218
272
|
},
|
|
219
273
|
{
|
|
220
274
|
"name" : "dark-tertiary",
|
|
221
|
-
"value" : "rgba(218,189,226,1)"
|
|
275
|
+
"value" : "rgba(218,189,226,1)",
|
|
276
|
+
"groupName" : "dark/tertiary"
|
|
222
277
|
},
|
|
223
278
|
{
|
|
224
279
|
"name" : "dark-on-tertiary",
|
|
225
|
-
"value" : "rgba(61,40,70,1)"
|
|
280
|
+
"value" : "rgba(61,40,70,1)",
|
|
281
|
+
"groupName" : "dark/on-tertiary"
|
|
226
282
|
},
|
|
227
283
|
{
|
|
228
284
|
"name" : "dark-tertiary-container",
|
|
229
|
-
"value" : "rgba(85,63,94,1)"
|
|
285
|
+
"value" : "rgba(85,63,94,1)",
|
|
286
|
+
"groupName" : "dark/tertiary-container"
|
|
230
287
|
},
|
|
231
288
|
{
|
|
232
289
|
"name" : "dark-on-tertiary-container",
|
|
233
|
-
"value" : "rgba(247,217,255,1)"
|
|
290
|
+
"value" : "rgba(247,217,255,1)",
|
|
291
|
+
"groupName" : "dark/on-tertiary-container"
|
|
234
292
|
},
|
|
235
293
|
{
|
|
236
294
|
"name" : "dark-error",
|
|
237
|
-
"value" : "rgba(255,180,169,1)"
|
|
295
|
+
"value" : "rgba(255,180,169,1)",
|
|
296
|
+
"groupName" : "dark/error"
|
|
238
297
|
},
|
|
239
298
|
{
|
|
240
299
|
"name" : "dark-on-error",
|
|
241
|
-
"value" : "rgba(104,0,3,1)"
|
|
300
|
+
"value" : "rgba(104,0,3,1)",
|
|
301
|
+
"groupName" : "dark/on-error"
|
|
242
302
|
},
|
|
243
303
|
{
|
|
244
304
|
"name" : "dark-error-container",
|
|
245
|
-
"value" : "rgba(147,0,6,1)"
|
|
305
|
+
"value" : "rgba(147,0,6,1)",
|
|
306
|
+
"groupName" : "dark/error-container"
|
|
246
307
|
},
|
|
247
308
|
{
|
|
248
309
|
"name" : "dark-on-error-container",
|
|
249
|
-
"value" : "rgba(255,218,212,1)"
|
|
310
|
+
"value" : "rgba(255,218,212,1)",
|
|
311
|
+
"groupName" : "dark/on-error-container"
|
|
250
312
|
},
|
|
251
313
|
{
|
|
252
314
|
"name" : "dark-success",
|
|
253
|
-
"value" : "rgba(108,224,54,1)"
|
|
315
|
+
"value" : "rgba(108,224,54,1)",
|
|
316
|
+
"groupName" : "dark/success"
|
|
254
317
|
},
|
|
255
318
|
{
|
|
256
319
|
"name" : "dark-on-success",
|
|
257
|
-
"value" : "rgba(12,57,0,1)"
|
|
320
|
+
"value" : "rgba(12,57,0,1)",
|
|
321
|
+
"groupName" : "dark/on-success"
|
|
258
322
|
},
|
|
259
323
|
{
|
|
260
324
|
"name" : "dark-success-container",
|
|
261
|
-
"value" : "rgba(22,82,0,1)"
|
|
325
|
+
"value" : "rgba(22,82,0,1)",
|
|
326
|
+
"groupName" : "dark/success-container"
|
|
262
327
|
},
|
|
263
328
|
{
|
|
264
329
|
"name" : "dark-on-success-container",
|
|
265
|
-
"value" : "rgba(136,253,82,1)"
|
|
330
|
+
"value" : "rgba(136,253,82,1)",
|
|
331
|
+
"groupName" : "dark/on-success-container"
|
|
266
332
|
},
|
|
267
333
|
{
|
|
268
334
|
"name" : "dark-warning",
|
|
269
|
-
"value" : "rgba(251,188,12,1)"
|
|
335
|
+
"value" : "rgba(251,188,12,1)",
|
|
336
|
+
"groupName" : "dark/warning"
|
|
270
337
|
},
|
|
271
338
|
{
|
|
272
339
|
"name" : "dark-on-warning",
|
|
273
|
-
"value" : "rgba(64,45,0,1)"
|
|
340
|
+
"value" : "rgba(64,45,0,1)",
|
|
341
|
+
"groupName" : "dark/on- warning"
|
|
274
342
|
},
|
|
275
343
|
{
|
|
276
344
|
"name" : "dark-warning-container",
|
|
277
|
-
"value" : "rgba(92,66,0,1)"
|
|
345
|
+
"value" : "rgba(92,66,0,1)",
|
|
346
|
+
"groupName" : "dark/warning-container"
|
|
278
347
|
},
|
|
279
348
|
{
|
|
280
349
|
"name" : "dark-on-warning-container",
|
|
281
|
-
"value" : "rgba(255,223,156,1)"
|
|
350
|
+
"value" : "rgba(255,223,156,1)",
|
|
351
|
+
"groupName" : "dark/on- warning-container"
|
|
282
352
|
},
|
|
283
353
|
{
|
|
284
354
|
"name" : "dark-background",
|
|
285
|
-
"value" : "rgba(27,27,29,1)"
|
|
355
|
+
"value" : "rgba(27,27,29,1)",
|
|
356
|
+
"groupName" : "dark/background"
|
|
286
357
|
},
|
|
287
358
|
{
|
|
288
359
|
"name" : "dark-on-background",
|
|
289
|
-
"value" : "rgba(227,226,230,1)"
|
|
360
|
+
"value" : "rgba(227,226,230,1)",
|
|
361
|
+
"groupName" : "dark/on-background"
|
|
290
362
|
},
|
|
291
363
|
{
|
|
292
364
|
"name" : "dark-surface",
|
|
293
|
-
"value" : "rgba(27,27,29,1)"
|
|
365
|
+
"value" : "rgba(27,27,29,1)",
|
|
366
|
+
"groupName" : "dark/surface"
|
|
294
367
|
},
|
|
295
368
|
{
|
|
296
369
|
"name" : "dark-surface-1",
|
|
297
|
-
"value" : "rgba(34,36,40,1)"
|
|
370
|
+
"value" : "rgba(34,36,40,1)",
|
|
371
|
+
"groupName" : "dark/surface1"
|
|
298
372
|
},
|
|
299
373
|
{
|
|
300
374
|
"name" : "dark-surface-2",
|
|
301
|
-
"value" : "rgba(38,41,47,1)"
|
|
375
|
+
"value" : "rgba(38,41,47,1)",
|
|
376
|
+
"groupName" : "dark/surface2"
|
|
302
377
|
},
|
|
303
378
|
{
|
|
304
379
|
"name" : "dark-surface-3",
|
|
305
|
-
"value" : "rgba(42,46,54,1)"
|
|
380
|
+
"value" : "rgba(42,46,54,1)",
|
|
381
|
+
"groupName" : "dark/surface3"
|
|
306
382
|
},
|
|
307
383
|
{
|
|
308
384
|
"name" : "dark-surface-4",
|
|
309
|
-
"value" : "rgba(43,48,56,1)"
|
|
385
|
+
"value" : "rgba(43,48,56,1)",
|
|
386
|
+
"groupName" : "dark/surface4"
|
|
310
387
|
},
|
|
311
388
|
{
|
|
312
389
|
"name" : "dark-surface-5",
|
|
313
|
-
"value" : "rgba(46,51,61,1)"
|
|
390
|
+
"value" : "rgba(46,51,61,1)",
|
|
391
|
+
"groupName" : "dark/surface5"
|
|
314
392
|
},
|
|
315
393
|
{
|
|
316
394
|
"name" : "dark-on-surface",
|
|
317
|
-
"value" : "rgba(227,226,230,1)"
|
|
395
|
+
"value" : "rgba(227,226,230,1)",
|
|
396
|
+
"groupName" : "dark/on-surface"
|
|
318
397
|
},
|
|
319
398
|
{
|
|
320
399
|
"name" : "dark-surface-variant",
|
|
321
|
-
"value" : "rgba(67,71,78,1)"
|
|
400
|
+
"value" : "rgba(67,71,78,1)",
|
|
401
|
+
"groupName" : "dark/surface-variant"
|
|
322
402
|
},
|
|
323
403
|
{
|
|
324
404
|
"name" : "dark-on-surface-variant",
|
|
325
|
-
"value" : "rgba(195,198,207,1)"
|
|
405
|
+
"value" : "rgba(195,198,207,1)",
|
|
406
|
+
"groupName" : "dark/on-surface-variant"
|
|
326
407
|
},
|
|
327
408
|
{
|
|
328
409
|
"name" : "dark-inverse-surface",
|
|
329
|
-
"value" : "rgba(227,226,230,1)"
|
|
410
|
+
"value" : "rgba(227,226,230,1)",
|
|
411
|
+
"groupName" : "dark/inverse-surface"
|
|
330
412
|
},
|
|
331
413
|
{
|
|
332
414
|
"name" : "dark-inverse-on-surface",
|
|
333
|
-
"value" : "rgba(27,27,29,1)"
|
|
415
|
+
"value" : "rgba(27,27,29,1)",
|
|
416
|
+
"groupName" : "dark/inverse-on-surface"
|
|
334
417
|
},
|
|
335
418
|
{
|
|
336
419
|
"name" : "dark-inverse-primary",
|
|
337
|
-
"value" : "rgba(0,95,177,1)"
|
|
420
|
+
"value" : "rgba(0,95,177,1)",
|
|
421
|
+
"groupName" : "dark/inverse-primary"
|
|
338
422
|
},
|
|
339
423
|
{
|
|
340
424
|
"name" : "dark-outline",
|
|
341
|
-
"value" : "rgba(142,145,153,1)"
|
|
425
|
+
"value" : "rgba(142,145,153,1)",
|
|
426
|
+
"groupName" : "dark/outline"
|
|
342
427
|
},
|
|
343
428
|
{
|
|
344
429
|
"name" : "dark-shadow",
|
|
345
|
-
"value" : "rgba(0,0,0,1)"
|
|
430
|
+
"value" : "rgba(0,0,0,1)",
|
|
431
|
+
"groupName" : "dark/shadow"
|
|
346
432
|
},
|
|
347
433
|
{
|
|
348
434
|
"name" : "dark-on-disabled",
|
|
349
|
-
"value" : "rgba(227,226,230,0.3)"
|
|
435
|
+
"value" : "rgba(227,226,230,0.3)",
|
|
436
|
+
"groupName" : "dark/on disabled"
|
|
350
437
|
},
|
|
351
438
|
{
|
|
352
439
|
"name" : "dark-primary-opacity-0-08",
|
|
353
|
-
"value" : "rgba(164,200,255,0.08)"
|
|
440
|
+
"value" : "rgba(164,200,255,0.08)",
|
|
441
|
+
"groupName" : "dark/primary/opacity-0.08"
|
|
354
442
|
},
|
|
355
443
|
{
|
|
356
444
|
"name" : "dark-primary-opacity-0-12",
|
|
357
|
-
"value" : "rgba(164,200,255,0.12)"
|
|
445
|
+
"value" : "rgba(164,200,255,0.12)",
|
|
446
|
+
"groupName" : "dark/primary/opacity-0.12"
|
|
358
447
|
},
|
|
359
448
|
{
|
|
360
449
|
"name" : "dark-primary-opacity-0-16",
|
|
361
|
-
"value" : "rgba(164,200,255,0.16)"
|
|
450
|
+
"value" : "rgba(164,200,255,0.16)",
|
|
451
|
+
"groupName" : "dark/primary/opacity-0.16"
|
|
362
452
|
},
|
|
363
453
|
{
|
|
364
454
|
"name" : "light-primary-hover",
|
|
365
|
-
"value" : "rgba(0,119,220,1)"
|
|
455
|
+
"value" : "rgba(0,119,220,1)",
|
|
456
|
+
"groupName" : "light/primary-hover"
|
|
366
457
|
},
|
|
367
458
|
{
|
|
368
459
|
"name" : "light-error-hover",
|
|
369
|
-
"value" : "rgba(221,55,48,1)"
|
|
460
|
+
"value" : "rgba(221,55,48,1)",
|
|
461
|
+
"groupName" : "light/error-hover"
|
|
370
462
|
},
|
|
371
463
|
{
|
|
372
464
|
"name" : "light-success-hover",
|
|
373
|
-
"value" : "rgba(56,166,0,1)"
|
|
465
|
+
"value" : "rgba(56,166,0,1)",
|
|
466
|
+
"groupName" : "light/success-hover"
|
|
374
467
|
},
|
|
375
468
|
{
|
|
376
469
|
"name" : "light-warning-hover",
|
|
377
|
-
"value" : "rgba(153,112,0,1)"
|
|
470
|
+
"value" : "rgba(153,112,0,1)",
|
|
471
|
+
"groupName" : "light/warning-hover"
|
|
378
472
|
},
|
|
379
473
|
{
|
|
380
474
|
"name" : "light-error-opacity-0-08",
|
|
381
|
-
"value" : "rgba(186,27,27,0.08)"
|
|
475
|
+
"value" : "rgba(186,27,27,0.08)",
|
|
476
|
+
"groupName" : "light/error/opacity-0.08"
|
|
382
477
|
},
|
|
383
478
|
{
|
|
384
479
|
"name" : "light-error-opacity-0-12",
|
|
385
|
-
"value" : "rgba(186,27,27,0.12)"
|
|
480
|
+
"value" : "rgba(186,27,27,0.12)",
|
|
481
|
+
"groupName" : "light/error/opacity-0.12"
|
|
386
482
|
},
|
|
387
483
|
{
|
|
388
484
|
"name" : "light-error-opacity-0-16",
|
|
389
|
-
"value" : "rgba(186,27,27,0.16)"
|
|
485
|
+
"value" : "rgba(186,27,27,0.16)",
|
|
486
|
+
"groupName" : "light/error/opacity-0.16"
|
|
390
487
|
},
|
|
391
488
|
{
|
|
392
489
|
"name" : "dark-primary-hover",
|
|
393
|
-
"value" : "rgba(111,174,255,1)"
|
|
490
|
+
"value" : "rgba(111,174,255,1)",
|
|
491
|
+
"groupName" : "dark/primary-hover"
|
|
394
492
|
},
|
|
395
493
|
{
|
|
396
494
|
"name" : "dark-error-hover",
|
|
397
|
-
"value" : "rgba(255,137,122,1)"
|
|
495
|
+
"value" : "rgba(255,137,122,1)",
|
|
496
|
+
"groupName" : "dark/error-hover"
|
|
398
497
|
},
|
|
399
498
|
{
|
|
400
499
|
"name" : "dark-success-hover",
|
|
401
|
-
"value" : "rgba(81,195,20,1)"
|
|
500
|
+
"value" : "rgba(81,195,20,1)",
|
|
501
|
+
"groupName" : "dark/success-hover"
|
|
402
502
|
},
|
|
403
503
|
{
|
|
404
504
|
"name" : "dark-warning-hover",
|
|
405
|
-
"value" : "rgba(219,162,0,1)"
|
|
505
|
+
"value" : "rgba(219,162,0,1)",
|
|
506
|
+
"groupName" : "dark/warning-hover"
|
|
406
507
|
},
|
|
407
508
|
{
|
|
408
509
|
"name" : "dark-error-opacity-0-08",
|
|
409
|
-
"value" : "rgba(255,180,169,0.08)"
|
|
510
|
+
"value" : "rgba(255,180,169,0.08)",
|
|
511
|
+
"groupName" : "dark/error/opacity-0.08"
|
|
410
512
|
},
|
|
411
513
|
{
|
|
412
514
|
"name" : "dark-error-opacity-0-12",
|
|
413
|
-
"value" : "rgba(255,180,169,0.12)"
|
|
515
|
+
"value" : "rgba(255,180,169,0.12)",
|
|
516
|
+
"groupName" : "dark/error/opacity-0.12"
|
|
414
517
|
},
|
|
415
518
|
{
|
|
416
519
|
"name" : "dark-error-opacity-0-16",
|
|
417
|
-
"value" : "rgba(255,180,169,0.16)"
|
|
520
|
+
"value" : "rgba(255,180,169,0.16)",
|
|
521
|
+
"groupName" : "dark/error/opacity-0.16"
|
|
418
522
|
},
|
|
419
523
|
{
|
|
420
524
|
"name" : "light-disabled",
|
|
421
|
-
"value" : "rgba(27,27,29,0.12)"
|
|
525
|
+
"value" : "rgba(27,27,29,0.12)",
|
|
526
|
+
"groupName" : "light/disabled"
|
|
422
527
|
},
|
|
423
528
|
{
|
|
424
529
|
"name" : "dark-disabled",
|
|
425
|
-
"value" : "rgba(227,226,230,0.12)"
|
|
530
|
+
"value" : "rgba(227,226,230,0.12)",
|
|
531
|
+
"groupName" : "dark/disabled"
|
|
426
532
|
}
|
|
427
533
|
],
|
|
428
534
|
"Gradients" : [
|
package/tailwind-utils.js
CHANGED
|
@@ -11,7 +11,6 @@ module.exports = {
|
|
|
11
11
|
const isBackground = (name) => /\b(?:container|background|surface)\b/.test(name) && !isText(name);
|
|
12
12
|
const isText = (name) => /\b(?:on)\b/.test(name);
|
|
13
13
|
const isShadow = (name) => /\b(?:shadow)\b/.test(name);
|
|
14
|
-
const isOpacity = (name) => /\b(?:opacity)\b/.test(name);
|
|
15
14
|
|
|
16
15
|
const defineColorGroup = (name) => {
|
|
17
16
|
switch (true) {
|
|
@@ -22,7 +21,6 @@ module.exports = {
|
|
|
22
21
|
return 'text';
|
|
23
22
|
|
|
24
23
|
case isShadow(name):
|
|
25
|
-
case isOpacity(name):
|
|
26
24
|
return null;
|
|
27
25
|
|
|
28
26
|
default:
|
|
@@ -31,54 +29,67 @@ module.exports = {
|
|
|
31
29
|
};
|
|
32
30
|
|
|
33
31
|
return Object.values(designTokens)
|
|
34
|
-
.map((
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
32
|
+
.map((token) => {
|
|
33
|
+
const { name, theme } = token.name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups;
|
|
34
|
+
|
|
35
|
+
return {
|
|
36
|
+
name,
|
|
37
|
+
theme,
|
|
38
|
+
group: defineColorGroup(name),
|
|
39
|
+
color: token.value.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/, 'rgba($1 $2 $3 / $4)'),
|
|
40
|
+
};
|
|
41
|
+
})
|
|
43
42
|
.filter(({ group }) => colorGroups.includes(group))
|
|
44
|
-
.reduce((preset, { name, theme,
|
|
43
|
+
.reduce((preset, { name, theme, color }) => ({
|
|
45
44
|
...preset,
|
|
46
|
-
[!theme || theme === 'light' ? name : `${name}-${theme}`]:
|
|
45
|
+
[!theme || theme === 'light' ? name : `${name}-${theme}`]: color,
|
|
47
46
|
}), {});
|
|
48
47
|
},
|
|
49
48
|
|
|
50
49
|
parseBorderRadiusTokens(designTokens) {
|
|
51
50
|
return Object.values(designTokens)
|
|
52
|
-
.
|
|
51
|
+
.map((token) => ({
|
|
52
|
+
name: token.name,
|
|
53
|
+
borderRadius: token.value,
|
|
54
|
+
}))
|
|
55
|
+
.reduce((preset, { name, borderRadius }) => ({
|
|
53
56
|
...preset,
|
|
54
|
-
[name]:
|
|
57
|
+
[name]: borderRadius,
|
|
55
58
|
}), {});
|
|
56
59
|
},
|
|
57
60
|
|
|
58
61
|
parseBorderWidthTokens(designTokens) {
|
|
59
62
|
return Object.values(designTokens)
|
|
60
|
-
.map((
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
.map((token) => {
|
|
64
|
+
const borderWidth = token.value.split(' ')[0];
|
|
65
|
+
|
|
66
|
+
return {
|
|
67
|
+
name: borderWidth.slice(0, -2),
|
|
68
|
+
borderWidth,
|
|
69
|
+
};
|
|
70
|
+
})
|
|
71
|
+
.reduce((preset, { name, borderWidth }) => ({
|
|
66
72
|
...preset,
|
|
67
|
-
[name]:
|
|
73
|
+
[name]: borderWidth,
|
|
68
74
|
}), {});
|
|
69
75
|
},
|
|
70
76
|
|
|
71
77
|
parseBoxShadowTokens(designTokens) {
|
|
72
78
|
return Object.values(designTokens)
|
|
73
|
-
.map((
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
79
|
+
.map((token) => {
|
|
80
|
+
const { name, theme } = token.name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups;
|
|
81
|
+
|
|
82
|
+
return {
|
|
83
|
+
name,
|
|
84
|
+
theme,
|
|
85
|
+
boxShadow: token.value
|
|
86
|
+
.replace(/\b0px\b/g, '0')
|
|
87
|
+
.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/g, 'rgba($1 $2 $3 / $4)'),
|
|
88
|
+
};
|
|
89
|
+
})
|
|
90
|
+
.reduce((preset, { name, theme, boxShadow }) => ({
|
|
80
91
|
...preset,
|
|
81
|
-
[!theme || theme === 'light' ? name : `${name}-${theme}`]:
|
|
92
|
+
[!theme || theme === 'light' ? name : `${name}-${theme}`]: boxShadow,
|
|
82
93
|
}), {});
|
|
83
94
|
},
|
|
84
95
|
|
|
@@ -21,7 +21,7 @@ const {
|
|
|
21
21
|
} = require('./src/variables/tokens/design-tokens-next.json');
|
|
22
22
|
|
|
23
23
|
module.exports = {
|
|
24
|
-
darkMode: 'class',
|
|
24
|
+
darkMode: ['class', '[data-theme="dark"]'],
|
|
25
25
|
|
|
26
26
|
theme: {
|
|
27
27
|
spacing: parseSpacingTokens(spacingTokens),
|
|
@@ -203,6 +203,8 @@ module.exports = {
|
|
|
203
203
|
'&[type="radio"]:not(:checked)',
|
|
204
204
|
]);
|
|
205
205
|
|
|
206
|
+
addVariant('selected', '&[selected]');
|
|
207
|
+
|
|
206
208
|
addVariant('valid', ['&:valid', '&:not([invalid])']);
|
|
207
209
|
addVariant('invalid', ['&:invalid', '&[invalid]']);
|
|
208
210
|
|
package/tokens.css
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
--or-c-on-background: rgba(27,27,29,1);
|
|
32
32
|
--or-c-surface: rgba(253,251,255,1);
|
|
33
33
|
--or-c-surface-1: rgba(240,243,251,1);
|
|
34
|
-
--or-c-surface-2: rgba(
|
|
34
|
+
--or-c-surface-2: rgba(233,239,249,1);
|
|
35
35
|
--or-c-surface-3: rgba(225,234,246,1);
|
|
36
36
|
--or-c-surface-4: rgba(223,232,246,1);
|
|
37
37
|
--or-c-surface-5: rgba(218,229,244,1);
|