@gitlab/ui 137.1.2 → 137.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/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +196 -191
- package/dist/tokens/build/js/tokens.js +218 -213
- package/dist/utils/constants.js +5 -5
- package/package.json +4 -4
- package/src/components/base/alert/alert.scss +13 -48
- package/src/scss/themes.scss +23 -5
- package/src/tokens/build/css/tokens.css +20 -15
- package/src/tokens/build/css/tokens.dark.css +32 -27
- package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +199 -199
- package/src/tokens/build/docs/tokens-tailwind-docs.json +198 -198
- package/src/tokens/build/figma/constants.dark.json +33 -33
- package/src/tokens/build/figma/constants.json +33 -33
- package/src/tokens/build/figma/mode.dark.json +66 -16
- package/src/tokens/build/figma/mode.json +54 -4
- package/src/tokens/build/js/tokens.dark.js +195 -190
- package/src/tokens/build/js/tokens.js +217 -212
- package/src/tokens/build/json/tokens.dark.json +378 -218
- package/src/tokens/build/json/tokens.json +388 -228
- package/src/tokens/build/scss/_tokens.dark.scss +32 -27
- package/src/tokens/build/scss/_tokens.scss +20 -15
- package/src/tokens/build/scss/_tokens_custom_properties.scss +5 -0
- package/src/tokens/constant/color.neutral.tokens.json +33 -33
- package/src/tokens/contextual/alert.tokens.json +80 -35
- package/src/tokens/semantic/action.tokens.json +3 -3
- package/src/tokens/semantic/feedback.tokens.json +6 -6
- package/src/utils/constants.js +5 -5
|
@@ -30,10 +30,7 @@
|
|
|
30
30
|
},
|
|
31
31
|
"background": {
|
|
32
32
|
"color": {
|
|
33
|
-
"$value": {
|
|
34
|
-
"default": "{feedback.neutral.background.color}",
|
|
35
|
-
"dark": "{background.color.subtle}"
|
|
36
|
-
},
|
|
33
|
+
"$value": "{feedback.neutral.background.color}",
|
|
37
34
|
"$type": "color",
|
|
38
35
|
"$description": "Used for the background color of a neutral alert.",
|
|
39
36
|
"$extensions": {
|
|
@@ -45,6 +42,16 @@
|
|
|
45
42
|
}
|
|
46
43
|
},
|
|
47
44
|
"border": {
|
|
45
|
+
"color": {
|
|
46
|
+
"$value": "{feedback.neutral.border.color}",
|
|
47
|
+
"$type": "color",
|
|
48
|
+
"$description": "Used for the border color of a neutral alert.",
|
|
49
|
+
"$extensions": {
|
|
50
|
+
"com.figma.scopes": [
|
|
51
|
+
"STROKE_COLOR"
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
48
55
|
"top": {
|
|
49
56
|
"color": {
|
|
50
57
|
"$value": {
|
|
@@ -52,13 +59,14 @@
|
|
|
52
59
|
"dark": "{color.neutral.400}"
|
|
53
60
|
},
|
|
54
61
|
"$type": "color",
|
|
55
|
-
"$description": "Used for the border
|
|
62
|
+
"$description": "Used for the border color of a neutral alert.",
|
|
56
63
|
"$extensions": {
|
|
57
64
|
"com.figma.scopes": [
|
|
58
65
|
"STROKE_COLOR"
|
|
59
66
|
]
|
|
60
67
|
}
|
|
61
|
-
}
|
|
68
|
+
},
|
|
69
|
+
"$deprecated": true
|
|
62
70
|
},
|
|
63
71
|
"bottom": {
|
|
64
72
|
"color": {
|
|
@@ -70,7 +78,8 @@
|
|
|
70
78
|
"STROKE_COLOR"
|
|
71
79
|
]
|
|
72
80
|
}
|
|
73
|
-
}
|
|
81
|
+
},
|
|
82
|
+
"$deprecated": true
|
|
74
83
|
}
|
|
75
84
|
}
|
|
76
85
|
},
|
|
@@ -79,7 +88,7 @@
|
|
|
79
88
|
"color": {
|
|
80
89
|
"$value": {
|
|
81
90
|
"default": "{text.color.heading}",
|
|
82
|
-
"dark": "{color.blue.
|
|
91
|
+
"dark": "{color.blue.200}"
|
|
83
92
|
},
|
|
84
93
|
"$type": "color",
|
|
85
94
|
"$description": "Used for the title color of an info alert.",
|
|
@@ -92,10 +101,7 @@
|
|
|
92
101
|
},
|
|
93
102
|
"background": {
|
|
94
103
|
"color": {
|
|
95
|
-
"$value": {
|
|
96
|
-
"default": "{feedback.info.background.color}",
|
|
97
|
-
"dark": "{background.color.subtle}"
|
|
98
|
-
},
|
|
104
|
+
"$value": "{feedback.info.background.color}",
|
|
99
105
|
"$type": "color",
|
|
100
106
|
"$description": "Used for the background color of an info alert.",
|
|
101
107
|
"$extensions": {
|
|
@@ -107,6 +113,16 @@
|
|
|
107
113
|
}
|
|
108
114
|
},
|
|
109
115
|
"border": {
|
|
116
|
+
"color": {
|
|
117
|
+
"$value": "{feedback.info.border.color}",
|
|
118
|
+
"$type": "color",
|
|
119
|
+
"$description": "Used for the border color of an info alert.",
|
|
120
|
+
"$extensions": {
|
|
121
|
+
"com.figma.scopes": [
|
|
122
|
+
"STROKE_COLOR"
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
},
|
|
110
126
|
"top": {
|
|
111
127
|
"color": {
|
|
112
128
|
"$value": {
|
|
@@ -120,14 +136,16 @@
|
|
|
120
136
|
"STROKE_COLOR"
|
|
121
137
|
]
|
|
122
138
|
}
|
|
123
|
-
}
|
|
139
|
+
},
|
|
140
|
+
"$deprecated": true
|
|
124
141
|
},
|
|
125
142
|
"bottom": {
|
|
126
143
|
"color": {
|
|
127
144
|
"$value": "{color.alpha.0}",
|
|
128
145
|
"$type": "color",
|
|
129
146
|
"$description": "Used for the border bottom color of an info alert."
|
|
130
|
-
}
|
|
147
|
+
},
|
|
148
|
+
"$deprecated": true
|
|
131
149
|
}
|
|
132
150
|
}
|
|
133
151
|
},
|
|
@@ -136,7 +154,7 @@
|
|
|
136
154
|
"color": {
|
|
137
155
|
"$value": {
|
|
138
156
|
"default": "{text.color.heading}",
|
|
139
|
-
"dark": "{color.green.
|
|
157
|
+
"dark": "{color.green.200}"
|
|
140
158
|
},
|
|
141
159
|
"$type": "color",
|
|
142
160
|
"$description": "Used for the title color of a success alert.",
|
|
@@ -149,10 +167,7 @@
|
|
|
149
167
|
},
|
|
150
168
|
"background": {
|
|
151
169
|
"color": {
|
|
152
|
-
"$value": {
|
|
153
|
-
"default": "{feedback.success.background.color}",
|
|
154
|
-
"dark": "{background.color.subtle}"
|
|
155
|
-
},
|
|
170
|
+
"$value": "{feedback.success.background.color}",
|
|
156
171
|
"$type": "color",
|
|
157
172
|
"$description": "Used for the background color of a success alert.",
|
|
158
173
|
"$extensions": {
|
|
@@ -164,6 +179,16 @@
|
|
|
164
179
|
}
|
|
165
180
|
},
|
|
166
181
|
"border": {
|
|
182
|
+
"color": {
|
|
183
|
+
"$value": "{feedback.success.border.color}",
|
|
184
|
+
"$type": "color",
|
|
185
|
+
"$description": "Used for the border color of a success alert.",
|
|
186
|
+
"$extensions": {
|
|
187
|
+
"com.figma.scopes": [
|
|
188
|
+
"STROKE_COLOR"
|
|
189
|
+
]
|
|
190
|
+
}
|
|
191
|
+
},
|
|
167
192
|
"top": {
|
|
168
193
|
"color": {
|
|
169
194
|
"$value": {
|
|
@@ -177,7 +202,8 @@
|
|
|
177
202
|
"STROKE_COLOR"
|
|
178
203
|
]
|
|
179
204
|
}
|
|
180
|
-
}
|
|
205
|
+
},
|
|
206
|
+
"$deprecated": true
|
|
181
207
|
},
|
|
182
208
|
"bottom": {
|
|
183
209
|
"color": {
|
|
@@ -189,7 +215,8 @@
|
|
|
189
215
|
"STROKE_COLOR"
|
|
190
216
|
]
|
|
191
217
|
}
|
|
192
|
-
}
|
|
218
|
+
},
|
|
219
|
+
"$deprecated": true
|
|
193
220
|
}
|
|
194
221
|
}
|
|
195
222
|
},
|
|
@@ -198,7 +225,7 @@
|
|
|
198
225
|
"color": {
|
|
199
226
|
"$value": {
|
|
200
227
|
"default": "{text.color.heading}",
|
|
201
|
-
"dark": "{color.orange.
|
|
228
|
+
"dark": "{color.orange.200}"
|
|
202
229
|
},
|
|
203
230
|
"$type": "color",
|
|
204
231
|
"$description": "Used for the title color of a warning alert.",
|
|
@@ -211,10 +238,7 @@
|
|
|
211
238
|
},
|
|
212
239
|
"background": {
|
|
213
240
|
"color": {
|
|
214
|
-
"$value": {
|
|
215
|
-
"default": "{feedback.warning.background.color}",
|
|
216
|
-
"dark": "{background.color.subtle}"
|
|
217
|
-
},
|
|
241
|
+
"$value": "{feedback.warning.background.color}",
|
|
218
242
|
"$type": "color",
|
|
219
243
|
"$description": "Used for the background color of a warning alert.",
|
|
220
244
|
"$extensions": {
|
|
@@ -226,6 +250,16 @@
|
|
|
226
250
|
}
|
|
227
251
|
},
|
|
228
252
|
"border": {
|
|
253
|
+
"color": {
|
|
254
|
+
"$value": "{feedback.warning.border.color}",
|
|
255
|
+
"$type": "color",
|
|
256
|
+
"$description": "Used for the border color of a warning alert.",
|
|
257
|
+
"$extensions": {
|
|
258
|
+
"com.figma.scopes": [
|
|
259
|
+
"STROKE_COLOR"
|
|
260
|
+
]
|
|
261
|
+
}
|
|
262
|
+
},
|
|
229
263
|
"top": {
|
|
230
264
|
"color": {
|
|
231
265
|
"$value": {
|
|
@@ -239,7 +273,8 @@
|
|
|
239
273
|
"STROKE_COLOR"
|
|
240
274
|
]
|
|
241
275
|
}
|
|
242
|
-
}
|
|
276
|
+
},
|
|
277
|
+
"$deprecated": true
|
|
243
278
|
},
|
|
244
279
|
"bottom": {
|
|
245
280
|
"color": {
|
|
@@ -251,7 +286,8 @@
|
|
|
251
286
|
"STROKE_COLOR"
|
|
252
287
|
]
|
|
253
288
|
}
|
|
254
|
-
}
|
|
289
|
+
},
|
|
290
|
+
"$deprecated": true
|
|
255
291
|
}
|
|
256
292
|
}
|
|
257
293
|
},
|
|
@@ -260,7 +296,7 @@
|
|
|
260
296
|
"color": {
|
|
261
297
|
"$value": {
|
|
262
298
|
"default": "{text.color.heading}",
|
|
263
|
-
"dark": "{color.red.
|
|
299
|
+
"dark": "{color.red.200}"
|
|
264
300
|
},
|
|
265
301
|
"$type": "color",
|
|
266
302
|
"$description": "Used for the title color of a danger alert.",
|
|
@@ -273,10 +309,7 @@
|
|
|
273
309
|
},
|
|
274
310
|
"background": {
|
|
275
311
|
"color": {
|
|
276
|
-
"$value": {
|
|
277
|
-
"default": "{feedback.danger.background.color}",
|
|
278
|
-
"dark": "{background.color.subtle}"
|
|
279
|
-
},
|
|
312
|
+
"$value": "{feedback.danger.background.color}",
|
|
280
313
|
"$type": "color",
|
|
281
314
|
"$description": "Used for the background color of a danger alert.",
|
|
282
315
|
"$extensions": {
|
|
@@ -288,6 +321,16 @@
|
|
|
288
321
|
}
|
|
289
322
|
},
|
|
290
323
|
"border": {
|
|
324
|
+
"color": {
|
|
325
|
+
"$value": "{feedback.danger.border.color}",
|
|
326
|
+
"$type": "color",
|
|
327
|
+
"$description": "Used for the border color of a danger alert.",
|
|
328
|
+
"$extensions": {
|
|
329
|
+
"com.figma.scopes": [
|
|
330
|
+
"STROKE_COLOR"
|
|
331
|
+
]
|
|
332
|
+
}
|
|
333
|
+
},
|
|
291
334
|
"top": {
|
|
292
335
|
"color": {
|
|
293
336
|
"$value": {
|
|
@@ -301,7 +344,8 @@
|
|
|
301
344
|
"STROKE_COLOR"
|
|
302
345
|
]
|
|
303
346
|
}
|
|
304
|
-
}
|
|
347
|
+
},
|
|
348
|
+
"$deprecated": true
|
|
305
349
|
},
|
|
306
350
|
"bottom": {
|
|
307
351
|
"color": {
|
|
@@ -313,7 +357,8 @@
|
|
|
313
357
|
"STROKE_COLOR"
|
|
314
358
|
]
|
|
315
359
|
}
|
|
316
|
-
}
|
|
360
|
+
},
|
|
361
|
+
"$deprecated": true
|
|
317
362
|
}
|
|
318
363
|
}
|
|
319
364
|
}
|
|
@@ -542,7 +542,7 @@
|
|
|
542
542
|
"color": {
|
|
543
543
|
"default": {
|
|
544
544
|
"$value": {
|
|
545
|
-
"default": "{color.red.
|
|
545
|
+
"default": "{color.red.600}",
|
|
546
546
|
"dark": "{color.red.200}"
|
|
547
547
|
},
|
|
548
548
|
"$type": "color",
|
|
@@ -556,7 +556,7 @@
|
|
|
556
556
|
},
|
|
557
557
|
"hover": {
|
|
558
558
|
"$value": {
|
|
559
|
-
"default": "{color.red.
|
|
559
|
+
"default": "{color.red.800}",
|
|
560
560
|
"dark": "{color.red.100}"
|
|
561
561
|
},
|
|
562
562
|
"$type": "color",
|
|
@@ -581,7 +581,7 @@
|
|
|
581
581
|
},
|
|
582
582
|
"active": {
|
|
583
583
|
"$value": {
|
|
584
|
-
"default": "{color.red.
|
|
584
|
+
"default": "{color.red.950}",
|
|
585
585
|
"dark": "{color.red.100}"
|
|
586
586
|
},
|
|
587
587
|
"$type": "color",
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
"color": {
|
|
131
131
|
"$value": {
|
|
132
132
|
"default": "{color.neutral.600}",
|
|
133
|
-
"dark": "{color.neutral.
|
|
133
|
+
"dark": "{color.neutral.200}"
|
|
134
134
|
},
|
|
135
135
|
"$type": "color",
|
|
136
136
|
"$description": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.",
|
|
@@ -194,7 +194,7 @@
|
|
|
194
194
|
"color": {
|
|
195
195
|
"$value": {
|
|
196
196
|
"default": "{color.blue.600}",
|
|
197
|
-
"dark": "{color.blue.
|
|
197
|
+
"dark": "{color.blue.200}"
|
|
198
198
|
},
|
|
199
199
|
"$type": "color",
|
|
200
200
|
"$description": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
|
|
@@ -258,7 +258,7 @@
|
|
|
258
258
|
"color": {
|
|
259
259
|
"$value": {
|
|
260
260
|
"default": "{color.green.600}",
|
|
261
|
-
"dark": "{color.green.
|
|
261
|
+
"dark": "{color.green.200}"
|
|
262
262
|
},
|
|
263
263
|
"$type": "color",
|
|
264
264
|
"$description": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.",
|
|
@@ -322,7 +322,7 @@
|
|
|
322
322
|
"color": {
|
|
323
323
|
"$value": {
|
|
324
324
|
"default": "{color.orange.600}",
|
|
325
|
-
"dark": "{color.orange.
|
|
325
|
+
"dark": "{color.orange.200}"
|
|
326
326
|
},
|
|
327
327
|
"$type": "color",
|
|
328
328
|
"$description": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.",
|
|
@@ -386,7 +386,7 @@
|
|
|
386
386
|
"color": {
|
|
387
387
|
"$value": {
|
|
388
388
|
"default": "{color.red.600}",
|
|
389
|
-
"dark": "{color.red.
|
|
389
|
+
"dark": "{color.red.200}"
|
|
390
390
|
},
|
|
391
391
|
"$type": "color",
|
|
392
392
|
"$description": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
|
|
@@ -450,7 +450,7 @@
|
|
|
450
450
|
"color": {
|
|
451
451
|
"$value": {
|
|
452
452
|
"default": "{color.purple.600}",
|
|
453
|
-
"dark": "{color.purple.
|
|
453
|
+
"dark": "{color.purple.200}"
|
|
454
454
|
},
|
|
455
455
|
"$type": "color",
|
|
456
456
|
"$description": "Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab.",
|
package/src/utils/constants.js
CHANGED
|
@@ -393,9 +393,9 @@ export const loadingIconVariants = {
|
|
|
393
393
|
|
|
394
394
|
export const themes = [
|
|
395
395
|
{ class: null, value: 'default', title: 'Default' },
|
|
396
|
-
{ class: '
|
|
397
|
-
{ class: '
|
|
398
|
-
{ class: '
|
|
399
|
-
{ class: '
|
|
400
|
-
{ class: '
|
|
396
|
+
{ class: 'ui-indigo', value: 'indigo', title: 'Indigo' },
|
|
397
|
+
{ class: 'ui-blue', value: 'blue', title: 'Blue' },
|
|
398
|
+
{ class: 'ui-green', value: 'green', title: 'Green' },
|
|
399
|
+
{ class: 'ui-red', value: 'red', title: 'Red' },
|
|
400
|
+
{ class: 'ui-gray', value: 'gray', title: 'Gray' },
|
|
401
401
|
];
|