@gitlab/ui 133.0.0 → 134.0.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/components/base/broadcast_message/broadcast_message.js +3 -3
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +1 -145
- package/dist/tokens/build/js/tokens.js +1 -145
- package/dist/utils/constants.js +12 -12
- package/package.json +1 -1
- package/src/components/base/broadcast_message/broadcast_message.vue +3 -3
- package/src/tokens/build/css/tokens.css +16 -160
- package/src/tokens/build/css/tokens.dark.css +16 -160
- package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +15293 -26883
- package/src/tokens/build/docs/tokens-tailwind-docs.json +15293 -26883
- package/src/tokens/build/figma/constants.dark.json +0 -1152
- package/src/tokens/build/figma/constants.json +0 -1152
- package/src/tokens/build/figma/mode.dark.json +160 -16
- package/src/tokens/build/figma/mode.json +160 -16
- package/src/tokens/build/js/tokens.dark.js +0 -144
- package/src/tokens/build/js/tokens.js +0 -144
- package/src/tokens/build/json/tokens.dark.json +15296 -19354
- package/src/tokens/build/json/tokens.json +15173 -19231
- package/src/tokens/build/scss/_tokens.dark.scss +16 -160
- package/src/tokens/build/scss/_tokens.scss +16 -160
- package/src/tokens/build/scss/_tokens_custom_properties.scss +0 -144
- package/src/tokens/build/tailwind/tokens.cjs +0 -75
- package/src/tokens/contextual/broadcast.tokens.json +160 -16
- package/src/utils/constants.js +11 -11
- package/tailwind.defaults.js +0 -2
- package/src/tokens/constant/color.theme.tokens.json +0 -1168
- package/src/tokens/deprecated/deprecated.color.theme.tokens.json +0 -2248
|
@@ -158,78 +158,6 @@
|
|
|
158
158
|
--gl-color-red-800: #812713;
|
|
159
159
|
--gl-color-red-900: #582014;
|
|
160
160
|
--gl-color-red-950: #3e1a14;
|
|
161
|
-
--gl-color-theme-indigo-10: #f8f8ff;
|
|
162
|
-
--gl-color-theme-indigo-50: #f1f1ff;
|
|
163
|
-
--gl-color-theme-indigo-100: #dbdbf8;
|
|
164
|
-
--gl-color-theme-indigo-200: #c7c7f2;
|
|
165
|
-
--gl-color-theme-indigo-300: #a2a2e6;
|
|
166
|
-
--gl-color-theme-indigo-400: #8181d7;
|
|
167
|
-
--gl-color-theme-indigo-500: #6666c4;
|
|
168
|
-
--gl-color-theme-indigo-600: #5252b5;
|
|
169
|
-
--gl-color-theme-indigo-700: #41419f;
|
|
170
|
-
--gl-color-theme-indigo-800: #303083;
|
|
171
|
-
--gl-color-theme-indigo-900: #222261;
|
|
172
|
-
--gl-color-theme-indigo-950: #14143d;
|
|
173
|
-
--gl-color-theme-blue-10: #e6ecf0;
|
|
174
|
-
--gl-color-theme-blue-50: #cdd8e3;
|
|
175
|
-
--gl-color-theme-blue-100: #b9cadc;
|
|
176
|
-
--gl-color-theme-blue-200: #a6bdd5;
|
|
177
|
-
--gl-color-theme-blue-300: #81a5c9;
|
|
178
|
-
--gl-color-theme-blue-400: #628eb9;
|
|
179
|
-
--gl-color-theme-blue-500: #4977a5;
|
|
180
|
-
--gl-color-theme-blue-600: #346596;
|
|
181
|
-
--gl-color-theme-blue-700: #235180;
|
|
182
|
-
--gl-color-theme-blue-800: #153c63;
|
|
183
|
-
--gl-color-theme-blue-900: #0b2640;
|
|
184
|
-
--gl-color-theme-blue-950: #04101c;
|
|
185
|
-
--gl-color-theme-light-blue-10: #eef3f7;
|
|
186
|
-
--gl-color-theme-light-blue-50: #dde6ee;
|
|
187
|
-
--gl-color-theme-light-blue-100: #c1d4e6;
|
|
188
|
-
--gl-color-theme-light-blue-200: #a0bedc;
|
|
189
|
-
--gl-color-theme-light-blue-300: #74a3d3;
|
|
190
|
-
--gl-color-theme-light-blue-400: #4f8bc7;
|
|
191
|
-
--gl-color-theme-light-blue-500: #3476b9;
|
|
192
|
-
--gl-color-theme-light-blue-600: #2268ae;
|
|
193
|
-
--gl-color-theme-light-blue-700: #145aa1;
|
|
194
|
-
--gl-color-theme-light-blue-800: #0e4d8d;
|
|
195
|
-
--gl-color-theme-light-blue-900: #0c4277;
|
|
196
|
-
--gl-color-theme-light-blue-950: #0a3764;
|
|
197
|
-
--gl-color-theme-green-10: #eef4ef;
|
|
198
|
-
--gl-color-theme-green-50: #dde9de;
|
|
199
|
-
--gl-color-theme-green-100: #b1d6b5;
|
|
200
|
-
--gl-color-theme-green-200: #8cc497;
|
|
201
|
-
--gl-color-theme-green-300: #69af7d;
|
|
202
|
-
--gl-color-theme-green-400: #499767;
|
|
203
|
-
--gl-color-theme-green-500: #308258;
|
|
204
|
-
--gl-color-theme-green-600: #25744c;
|
|
205
|
-
--gl-color-theme-green-700: #1b653f;
|
|
206
|
-
--gl-color-theme-green-800: #155635;
|
|
207
|
-
--gl-color-theme-green-900: #0e4328;
|
|
208
|
-
--gl-color-theme-green-950: #052e19;
|
|
209
|
-
--gl-color-theme-red-10: #faf4f3;
|
|
210
|
-
--gl-color-theme-red-50: #f4e9e7;
|
|
211
|
-
--gl-color-theme-red-100: #ecd3d0;
|
|
212
|
-
--gl-color-theme-red-200: #e3bab5;
|
|
213
|
-
--gl-color-theme-red-300: #d59086;
|
|
214
|
-
--gl-color-theme-red-400: #c66e60;
|
|
215
|
-
--gl-color-theme-red-500: #ad4a3b;
|
|
216
|
-
--gl-color-theme-red-600: #a13322;
|
|
217
|
-
--gl-color-theme-red-700: #8f2110;
|
|
218
|
-
--gl-color-theme-red-800: #761405;
|
|
219
|
-
--gl-color-theme-red-900: #580d02;
|
|
220
|
-
--gl-color-theme-red-950: #380700;
|
|
221
|
-
--gl-color-theme-light-red-10: #fdf9f8;
|
|
222
|
-
--gl-color-theme-light-red-50: #faf2f1;
|
|
223
|
-
--gl-color-theme-light-red-100: #f6d9d5;
|
|
224
|
-
--gl-color-theme-light-red-200: #ebada2;
|
|
225
|
-
--gl-color-theme-light-red-300: #e07f6f;
|
|
226
|
-
--gl-color-theme-light-red-400: #d36250;
|
|
227
|
-
--gl-color-theme-light-red-500: #c24b38;
|
|
228
|
-
--gl-color-theme-light-red-600: #b53a26;
|
|
229
|
-
--gl-color-theme-light-red-700: #a02e1c;
|
|
230
|
-
--gl-color-theme-light-red-800: #8b2212;
|
|
231
|
-
--gl-color-theme-light-red-900: #751709;
|
|
232
|
-
--gl-color-theme-light-red-950: #5c1105;
|
|
233
161
|
--gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),'GitLab Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
|
|
234
162
|
--gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'GitLab Mono','JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
|
|
235
163
|
--gl-font-size-100: 0.75rem; /** Used for meta text and small labels. */
|
|
@@ -321,6 +249,22 @@
|
|
|
321
249
|
--gl-avatar-fallback-background-color-green: rgba(145, 212, 168, 0.23921568627450981); /** Green background for avatar fallback with no particular meaning. */
|
|
322
250
|
--gl-avatar-fallback-background-color-orange: rgba(233, 190, 116, 0.23921568627450981); /** Orange background for avatar fallback with no particular meaning. */
|
|
323
251
|
--gl-avatar-fallback-background-color-neutral: rgba(191, 191, 195, 0.23921568627450981); /** Neutral background for avatar fallback with no particular meaning. */
|
|
252
|
+
--gl-broadcast-banner-background-color-blue: #235180; /** Used for the background for the blue banner type. */
|
|
253
|
+
--gl-broadcast-banner-background-color-green: #1b653f; /** Used for the background for the green banner type. */
|
|
254
|
+
--gl-broadcast-banner-background-color-indigo: #41419f; /** Used for the background for the indigo banner type. */
|
|
255
|
+
--gl-broadcast-banner-background-color-lightblue: #4977a5; /** Used for the background for the lightblue banner type. */
|
|
256
|
+
--gl-broadcast-banner-background-color-lightgreen: #308258; /** Used for the background for the lightgreen banner type. */
|
|
257
|
+
--gl-broadcast-banner-background-color-lightindigo: #6666c4; /** Used for the background for the lightindigo banner type. */
|
|
258
|
+
--gl-broadcast-banner-background-color-lightred: #ad4a3b; /** Used for the background for the lightred banner type. */
|
|
259
|
+
--gl-broadcast-banner-background-color-red: #8f2110; /** Used for the background for the red banner type. */
|
|
260
|
+
--gl-broadcast-banner-border-color-blue: #0b2640; /** Used for the border for the blue banner type. */
|
|
261
|
+
--gl-broadcast-banner-border-color-green: #0e4328; /** Used for the border for the green banner type. */
|
|
262
|
+
--gl-broadcast-banner-border-color-indigo: #222261; /** Used for the border for the indigo banner type. */
|
|
263
|
+
--gl-broadcast-banner-border-color-lightblue: #235180; /** Used for the border for the lightblue banner type. */
|
|
264
|
+
--gl-broadcast-banner-border-color-lightgreen: #1b653f; /** Used for the border for the lightgreen banner type. */
|
|
265
|
+
--gl-broadcast-banner-border-color-lightindigo: #41419f; /** Used for the border for the lightindigo banner type. */
|
|
266
|
+
--gl-broadcast-banner-border-color-lightred: #8f2110; /** Used for the border for the lightred banner type. */
|
|
267
|
+
--gl-broadcast-banner-border-color-red: #580d02; /** Used for the border for the red banner type. */
|
|
324
268
|
--gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); /** Used for the background of an default primary button in the default state. */
|
|
325
269
|
--gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); /** Used for the background of an default primary button in the hover state. */
|
|
326
270
|
--gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); /** Used for the background of an default primary button in the active state. */
|
|
@@ -419,78 +363,6 @@
|
|
|
419
363
|
--data-viz-orange-800: #eebd8c;
|
|
420
364
|
--data-viz-orange-900: #f5d6b3;
|
|
421
365
|
--data-viz-orange-950: #fae8d1;
|
|
422
|
-
--theme-indigo-10: #14143d;
|
|
423
|
-
--theme-indigo-50: #222261;
|
|
424
|
-
--theme-indigo-100: #303083;
|
|
425
|
-
--theme-indigo-200: #41419f;
|
|
426
|
-
--theme-indigo-300: #5252b5;
|
|
427
|
-
--theme-indigo-400: #6666c4;
|
|
428
|
-
--theme-indigo-500: #8181d7;
|
|
429
|
-
--theme-indigo-600: #a2a2e6;
|
|
430
|
-
--theme-indigo-700: #c7c7f2;
|
|
431
|
-
--theme-indigo-800: #dbdbf8;
|
|
432
|
-
--theme-indigo-900: #f1f1ff;
|
|
433
|
-
--theme-indigo-950: #f8f8ff;
|
|
434
|
-
--theme-blue-10: #04101c;
|
|
435
|
-
--theme-blue-50: #0b2640;
|
|
436
|
-
--theme-blue-100: #153c63;
|
|
437
|
-
--theme-blue-200: #235180;
|
|
438
|
-
--theme-blue-300: #346596;
|
|
439
|
-
--theme-blue-400: #4977a5;
|
|
440
|
-
--theme-blue-500: #628eb9;
|
|
441
|
-
--theme-blue-600: #81a5c9;
|
|
442
|
-
--theme-blue-700: #a6bdd5;
|
|
443
|
-
--theme-blue-800: #b9cadc;
|
|
444
|
-
--theme-blue-900: #cdd8e3;
|
|
445
|
-
--theme-blue-950: #e6ecf0;
|
|
446
|
-
--theme-light-blue-10: #0a3764;
|
|
447
|
-
--theme-light-blue-50: #0c4277;
|
|
448
|
-
--theme-light-blue-100: #0e4d8d;
|
|
449
|
-
--theme-light-blue-200: #145aa1;
|
|
450
|
-
--theme-light-blue-300: #2268ae;
|
|
451
|
-
--theme-light-blue-400: #3476b9;
|
|
452
|
-
--theme-light-blue-500: #4f8bc7;
|
|
453
|
-
--theme-light-blue-600: #74a3d3;
|
|
454
|
-
--theme-light-blue-700: #a0bedc;
|
|
455
|
-
--theme-light-blue-800: #c1d4e6;
|
|
456
|
-
--theme-light-blue-900: #dde6ee;
|
|
457
|
-
--theme-light-blue-950: #eef3f7;
|
|
458
|
-
--theme-green-10: #052e19;
|
|
459
|
-
--theme-green-50: #0e4328;
|
|
460
|
-
--theme-green-100: #155635;
|
|
461
|
-
--theme-green-200: #1b653f;
|
|
462
|
-
--theme-green-300: #25744c;
|
|
463
|
-
--theme-green-400: #308258;
|
|
464
|
-
--theme-green-500: #499767;
|
|
465
|
-
--theme-green-600: #69af7d;
|
|
466
|
-
--theme-green-700: #8cc497;
|
|
467
|
-
--theme-green-800: #b1d6b5;
|
|
468
|
-
--theme-green-900: #dde9de;
|
|
469
|
-
--theme-green-950: #eef4ef;
|
|
470
|
-
--theme-red-10: #380700;
|
|
471
|
-
--theme-red-50: #580d02;
|
|
472
|
-
--theme-red-100: #761405;
|
|
473
|
-
--theme-red-200: #8f2110;
|
|
474
|
-
--theme-red-300: #a13322;
|
|
475
|
-
--theme-red-400: #ad4a3b;
|
|
476
|
-
--theme-red-500: #c66e60;
|
|
477
|
-
--theme-red-600: #d59086;
|
|
478
|
-
--theme-red-700: #e3bab5;
|
|
479
|
-
--theme-red-800: #ecd3d0;
|
|
480
|
-
--theme-red-900: #f4e9e7;
|
|
481
|
-
--theme-red-950: #faf4f3;
|
|
482
|
-
--theme-light-red-10: #5c1105;
|
|
483
|
-
--theme-light-red-50: #751709;
|
|
484
|
-
--theme-light-red-100: #8b2212;
|
|
485
|
-
--theme-light-red-200: #a02e1c;
|
|
486
|
-
--theme-light-red-300: #b53a26;
|
|
487
|
-
--theme-light-red-400: #c24b38;
|
|
488
|
-
--theme-light-red-500: #d36250;
|
|
489
|
-
--theme-light-red-600: #e07f6f;
|
|
490
|
-
--theme-light-red-700: #ebada2;
|
|
491
|
-
--theme-light-red-800: #f6d9d5;
|
|
492
|
-
--theme-light-red-900: #faf2f1;
|
|
493
|
-
--theme-light-red-950: #fdf9f8;
|
|
494
366
|
--blue-950: #f2f9ff;
|
|
495
367
|
--green-950: #f1fdf6;
|
|
496
368
|
--orange-950: #fff4e1;
|
|
@@ -681,26 +553,10 @@
|
|
|
681
553
|
--gl-banner-promo-background-color: var(--gl-color-purple-950); /** Used for the background of a promo banner. */
|
|
682
554
|
--gl-banner-promo-border-color: var(--gl-color-purple-700); /** Used for the border of a promo banner. */
|
|
683
555
|
--gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /** Used for the breadcrumb level separator. */
|
|
684
|
-
--gl-broadcast-banner-background-color-blue: var(--gl-color-theme-blue-700); /** Used for the background for the blue banner type. */
|
|
685
556
|
--gl-broadcast-banner-background-color-dark: var(--gl-color-neutral-500); /** Used for the background for the dark banner type. */
|
|
686
|
-
--gl-broadcast-banner-background-color-green: var(--gl-color-theme-green-700); /** Used for the background for the green banner type. */
|
|
687
|
-
--gl-broadcast-banner-background-color-indigo: var(--gl-color-theme-indigo-700); /** Used for the background for the indigo banner type. */
|
|
688
557
|
--gl-broadcast-banner-background-color-light: var(--gl-color-neutral-50); /** Used for the background for the light banner type. */
|
|
689
|
-
--gl-broadcast-banner-background-color-lightblue: var(--gl-color-theme-blue-500); /** Used for the background for the lightblue banner type. */
|
|
690
|
-
--gl-broadcast-banner-background-color-lightgreen: var(--gl-color-theme-green-500); /** Used for the background for the lightgreen banner type. */
|
|
691
|
-
--gl-broadcast-banner-background-color-lightindigo: var(--gl-color-theme-indigo-500); /** Used for the background for the lightindigo banner type. */
|
|
692
|
-
--gl-broadcast-banner-background-color-lightred: var(--gl-color-theme-red-500); /** Used for the background for the lightred banner type. */
|
|
693
|
-
--gl-broadcast-banner-background-color-red: var(--gl-color-theme-red-700); /** Used for the background for the red banner type. */
|
|
694
|
-
--gl-broadcast-banner-border-color-blue: var(--gl-color-theme-blue-900); /** Used for the border for the blue banner type. */
|
|
695
558
|
--gl-broadcast-banner-border-color-dark: var(--gl-color-neutral-700); /** Used for the border for the dark banner type. */
|
|
696
|
-
--gl-broadcast-banner-border-color-green: var(--gl-color-theme-green-900); /** Used for the border for the green banner type. */
|
|
697
|
-
--gl-broadcast-banner-border-color-indigo: var(--gl-color-theme-indigo-900); /** Used for the border for the indigo banner type. */
|
|
698
559
|
--gl-broadcast-banner-border-color-light: var(--gl-color-neutral-100); /** Used for the border for the light banner type. */
|
|
699
|
-
--gl-broadcast-banner-border-color-lightblue: var(--gl-color-theme-blue-700); /** Used for the border for the lightblue banner type. */
|
|
700
|
-
--gl-broadcast-banner-border-color-lightgreen: var(--gl-color-theme-green-700); /** Used for the border for the lightgreen banner type. */
|
|
701
|
-
--gl-broadcast-banner-border-color-lightindigo: var(--gl-color-theme-indigo-700); /** Used for the border for the lightindigo banner type. */
|
|
702
|
-
--gl-broadcast-banner-border-color-lightred: var(--gl-color-theme-red-700); /** Used for the border for the lightred banner type. */
|
|
703
|
-
--gl-broadcast-banner-border-color-red: var(--gl-color-theme-red-900); /** Used for the border for the red banner type. */
|
|
704
560
|
--gl-broadcast-banner-icon-color-blue: var(--gl-color-neutral-0); /** Used for the icon for the blue banner type. */
|
|
705
561
|
--gl-broadcast-banner-icon-color-dark: var(--gl-color-neutral-0); /** Used for the icon for the dark banner type. */
|
|
706
562
|
--gl-broadcast-banner-icon-color-green: var(--gl-color-neutral-0); /** Used for the icon for the green banner type. */
|