@gitlab/ui 124.4.3 → 126.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.
Files changed (50) hide show
  1. package/dist/components/base/alert/alert.js +1 -10
  2. package/dist/components/base/form/form_select/form_select.js +1 -9
  3. package/dist/index.css +2 -2
  4. package/dist/index.css.map +1 -1
  5. package/dist/tailwind.css +1 -1
  6. package/dist/tailwind.css.map +1 -1
  7. package/dist/tokens/build/js/tokens.dark.js +193 -1
  8. package/dist/tokens/build/js/tokens.js +193 -1
  9. package/package.json +5 -10
  10. package/src/components/base/alert/alert.scss +0 -4
  11. package/src/components/base/alert/alert.vue +1 -10
  12. package/src/components/base/form/form_select/form_select.vue +1 -15
  13. package/src/tokens/build/css/tokens.css +192 -0
  14. package/src/tokens/build/css/tokens.dark.css +192 -0
  15. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +59 -0
  16. package/src/tokens/build/docs/tokens-tailwind-docs.json +59 -0
  17. package/src/tokens/build/figma/constants.tokens.json +180 -0
  18. package/src/tokens/build/figma/semantic.tokens.json +209 -0
  19. package/src/tokens/build/js/tokens.dark.js +198 -0
  20. package/src/tokens/build/js/tokens.js +198 -0
  21. package/src/tokens/build/json/tokens.dark.json +1117 -0
  22. package/src/tokens/build/json/tokens.json +1117 -0
  23. package/src/tokens/build/scss/_tokens.dark.scss +192 -0
  24. package/src/tokens/build/scss/_tokens.scss +192 -0
  25. package/src/tokens/build/scss/_tokens_custom_properties.scss +192 -0
  26. package/src/tokens/build/tailwind/components.cjs +253 -0
  27. package/src/tokens/build/tailwind/tokens.cjs +2 -0
  28. package/src/tokens/constant/heading.tokens.json +182 -0
  29. package/src/tokens/semantic/font.tokens.json +11 -0
  30. package/src/tokens/semantic/heading.tokens.json +178 -0
  31. package/src/tokens/semantic/letter_spacing.tokens.json +13 -0
  32. package/src/tokens/semantic/line_height.tokens.json +13 -0
  33. package/tailwind.defaults.js +2 -253
  34. package/bin/migrate_custom_utils_to_tw.bundled.mjs +0 -205443
  35. package/dist/tokens/css/tokens.css +0 -1156
  36. package/dist/tokens/css/tokens.dark.css +0 -1156
  37. package/dist/tokens/docs/tokens-tailwind-docs.dark.json +0 -42846
  38. package/dist/tokens/docs/tokens-tailwind-docs.json +0 -42846
  39. package/dist/tokens/figma/constants.tokens.json +0 -2756
  40. package/dist/tokens/figma/contextual.tokens.json +0 -5929
  41. package/dist/tokens/figma/deprecated.tokens.json +0 -2899
  42. package/dist/tokens/figma/semantic.tokens.json +0 -2479
  43. package/dist/tokens/js/tokens.dark.js +0 -1286
  44. package/dist/tokens/js/tokens.js +0 -1275
  45. package/dist/tokens/json/tokens.dark.json +0 -36934
  46. package/dist/tokens/json/tokens.json +0 -36934
  47. package/dist/tokens/scss/_tokens.dark.scss +0 -1153
  48. package/dist/tokens/scss/_tokens.scss +0 -1153
  49. package/dist/tokens/scss/_tokens_custom_properties.scss +0 -1154
  50. package/dist/tokens/tailwind/tokens.cjs +0 -558
@@ -1,558 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- const baseColors = {
6
- 'blue-50': 'var(--blue-50)',
7
- 'blue-100': 'var(--blue-100)',
8
- 'blue-200': 'var(--blue-200)',
9
- 'blue-300': 'var(--blue-300)',
10
- 'blue-400': 'var(--blue-400)',
11
- 'blue-500': 'var(--blue-500)',
12
- 'blue-600': 'var(--blue-600)',
13
- 'blue-700': 'var(--blue-700)',
14
- 'blue-800': 'var(--blue-800)',
15
- 'blue-900': 'var(--blue-900)',
16
- 'blue-950': 'var(--blue-950)',
17
- 'gray-10': 'var(--gray-10)',
18
- 'gray-50': 'var(--gray-50)',
19
- 'gray-100': 'var(--gray-100)',
20
- 'gray-200': 'var(--gray-200)',
21
- 'gray-300': 'var(--gray-300)',
22
- 'gray-400': 'var(--gray-400)',
23
- 'gray-500': 'var(--gray-500)',
24
- 'gray-600': 'var(--gray-600)',
25
- 'gray-700': 'var(--gray-700)',
26
- 'gray-800': 'var(--gray-800)',
27
- 'gray-900': 'var(--gray-900)',
28
- 'gray-950': 'var(--gray-950)',
29
- 'green-50': 'var(--green-50)',
30
- 'green-100': 'var(--green-100)',
31
- 'green-200': 'var(--green-200)',
32
- 'green-300': 'var(--green-300)',
33
- 'green-400': 'var(--green-400)',
34
- 'green-500': 'var(--green-500)',
35
- 'green-600': 'var(--green-600)',
36
- 'green-700': 'var(--green-700)',
37
- 'green-800': 'var(--green-800)',
38
- 'green-900': 'var(--green-900)',
39
- 'green-950': 'var(--green-950)',
40
- 'orange-50': 'var(--orange-50)',
41
- 'orange-100': 'var(--orange-100)',
42
- 'orange-200': 'var(--orange-200)',
43
- 'orange-300': 'var(--orange-300)',
44
- 'orange-400': 'var(--orange-400)',
45
- 'orange-500': 'var(--orange-500)',
46
- 'orange-600': 'var(--orange-600)',
47
- 'orange-700': 'var(--orange-700)',
48
- 'orange-800': 'var(--orange-800)',
49
- 'orange-900': 'var(--orange-900)',
50
- 'orange-950': 'var(--orange-950)',
51
- 'purple-50': 'var(--purple-50)',
52
- 'purple-100': 'var(--purple-100)',
53
- 'purple-200': 'var(--purple-200)',
54
- 'purple-300': 'var(--purple-300)',
55
- 'purple-400': 'var(--purple-400)',
56
- 'purple-500': 'var(--purple-500)',
57
- 'purple-600': 'var(--purple-600)',
58
- 'purple-700': 'var(--purple-700)',
59
- 'purple-800': 'var(--purple-800)',
60
- 'purple-900': 'var(--purple-900)',
61
- 'purple-950': 'var(--purple-950)',
62
- 'red-50': 'var(--red-50)',
63
- 'red-100': 'var(--red-100)',
64
- 'red-200': 'var(--red-200)',
65
- 'red-300': 'var(--red-300)',
66
- 'red-400': 'var(--red-400)',
67
- 'red-500': 'var(--red-500)',
68
- 'red-600': 'var(--red-600)',
69
- 'red-700': 'var(--red-700)',
70
- 'red-800': 'var(--red-800)',
71
- 'red-900': 'var(--red-900)',
72
- 'red-950': 'var(--red-950)',
73
- };
74
- const themeColors = {
75
- 'theme-indigo-10': 'var(--theme-indigo-10)',
76
- 'theme-indigo-50': 'var(--theme-indigo-50)',
77
- 'theme-indigo-100': 'var(--theme-indigo-100)',
78
- 'theme-indigo-200': 'var(--theme-indigo-200)',
79
- 'theme-indigo-300': 'var(--theme-indigo-300)',
80
- 'theme-indigo-400': 'var(--theme-indigo-400)',
81
- 'theme-indigo-500': 'var(--theme-indigo-500)',
82
- 'theme-indigo-600': 'var(--theme-indigo-600)',
83
- 'theme-indigo-700': 'var(--theme-indigo-700)',
84
- 'theme-indigo-800': 'var(--theme-indigo-800)',
85
- 'theme-indigo-900': 'var(--theme-indigo-900)',
86
- 'theme-indigo-950': 'var(--theme-indigo-950)',
87
- 'theme-blue-10': 'var(--theme-blue-10)',
88
- 'theme-blue-50': 'var(--theme-blue-50)',
89
- 'theme-blue-100': 'var(--theme-blue-100)',
90
- 'theme-blue-200': 'var(--theme-blue-200)',
91
- 'theme-blue-300': 'var(--theme-blue-300)',
92
- 'theme-blue-400': 'var(--theme-blue-400)',
93
- 'theme-blue-500': 'var(--theme-blue-500)',
94
- 'theme-blue-600': 'var(--theme-blue-600)',
95
- 'theme-blue-700': 'var(--theme-blue-700)',
96
- 'theme-blue-800': 'var(--theme-blue-800)',
97
- 'theme-blue-900': 'var(--theme-blue-900)',
98
- 'theme-blue-950': 'var(--theme-blue-950)',
99
- 'theme-light-blue-10': 'var(--theme-light-blue-10)',
100
- 'theme-light-blue-50': 'var(--theme-light-blue-50)',
101
- 'theme-light-blue-100': 'var(--theme-light-blue-100)',
102
- 'theme-light-blue-200': 'var(--theme-light-blue-200)',
103
- 'theme-light-blue-300': 'var(--theme-light-blue-300)',
104
- 'theme-light-blue-400': 'var(--theme-light-blue-400)',
105
- 'theme-light-blue-500': 'var(--theme-light-blue-500)',
106
- 'theme-light-blue-600': 'var(--theme-light-blue-600)',
107
- 'theme-light-blue-700': 'var(--theme-light-blue-700)',
108
- 'theme-light-blue-800': 'var(--theme-light-blue-800)',
109
- 'theme-light-blue-900': 'var(--theme-light-blue-900)',
110
- 'theme-light-blue-950': 'var(--theme-light-blue-950)',
111
- 'theme-green-10': 'var(--theme-green-10)',
112
- 'theme-green-50': 'var(--theme-green-50)',
113
- 'theme-green-100': 'var(--theme-green-100)',
114
- 'theme-green-200': 'var(--theme-green-200)',
115
- 'theme-green-300': 'var(--theme-green-300)',
116
- 'theme-green-400': 'var(--theme-green-400)',
117
- 'theme-green-500': 'var(--theme-green-500)',
118
- 'theme-green-600': 'var(--theme-green-600)',
119
- 'theme-green-700': 'var(--theme-green-700)',
120
- 'theme-green-800': 'var(--theme-green-800)',
121
- 'theme-green-900': 'var(--theme-green-900)',
122
- 'theme-green-950': 'var(--theme-green-950)',
123
- 'theme-red-10': 'var(--theme-red-10)',
124
- 'theme-red-50': 'var(--theme-red-50)',
125
- 'theme-red-100': 'var(--theme-red-100)',
126
- 'theme-red-200': 'var(--theme-red-200)',
127
- 'theme-red-300': 'var(--theme-red-300)',
128
- 'theme-red-400': 'var(--theme-red-400)',
129
- 'theme-red-500': 'var(--theme-red-500)',
130
- 'theme-red-600': 'var(--theme-red-600)',
131
- 'theme-red-700': 'var(--theme-red-700)',
132
- 'theme-red-800': 'var(--theme-red-800)',
133
- 'theme-red-900': 'var(--theme-red-900)',
134
- 'theme-red-950': 'var(--theme-red-950)',
135
- 'theme-light-red-10': 'var(--theme-light-red-10)',
136
- 'theme-light-red-50': 'var(--theme-light-red-50)',
137
- 'theme-light-red-100': 'var(--theme-light-red-100)',
138
- 'theme-light-red-200': 'var(--theme-light-red-200)',
139
- 'theme-light-red-300': 'var(--theme-light-red-300)',
140
- 'theme-light-red-400': 'var(--theme-light-red-400)',
141
- 'theme-light-red-500': 'var(--theme-light-red-500)',
142
- 'theme-light-red-600': 'var(--theme-light-red-600)',
143
- 'theme-light-red-700': 'var(--theme-light-red-700)',
144
- 'theme-light-red-800': 'var(--theme-light-red-800)',
145
- 'theme-light-red-900': 'var(--theme-light-red-900)',
146
- 'theme-light-red-950': 'var(--theme-light-red-950)',
147
- };
148
- const dataVizColors = {
149
- 'data-viz-green-50': 'var(--data-viz-green-50)',
150
- 'data-viz-green-100': 'var(--data-viz-green-100)',
151
- 'data-viz-green-200': 'var(--data-viz-green-200)',
152
- 'data-viz-green-300': 'var(--data-viz-green-300)',
153
- 'data-viz-green-400': 'var(--data-viz-green-400)',
154
- 'data-viz-green-500': 'var(--data-viz-green-500)',
155
- 'data-viz-green-600': 'var(--data-viz-green-600)',
156
- 'data-viz-green-700': 'var(--data-viz-green-700)',
157
- 'data-viz-green-800': 'var(--data-viz-green-800)',
158
- 'data-viz-green-900': 'var(--data-viz-green-900)',
159
- 'data-viz-green-950': 'var(--data-viz-green-950)',
160
- 'data-viz-aqua-50': 'var(--data-viz-aqua-50)',
161
- 'data-viz-aqua-100': 'var(--data-viz-aqua-100)',
162
- 'data-viz-aqua-200': 'var(--data-viz-aqua-200)',
163
- 'data-viz-aqua-300': 'var(--data-viz-aqua-300)',
164
- 'data-viz-aqua-400': 'var(--data-viz-aqua-400)',
165
- 'data-viz-aqua-500': 'var(--data-viz-aqua-500)',
166
- 'data-viz-aqua-600': 'var(--data-viz-aqua-600)',
167
- 'data-viz-aqua-700': 'var(--data-viz-aqua-700)',
168
- 'data-viz-aqua-800': 'var(--data-viz-aqua-800)',
169
- 'data-viz-aqua-900': 'var(--data-viz-aqua-900)',
170
- 'data-viz-aqua-950': 'var(--data-viz-aqua-950)',
171
- 'data-viz-blue-50': 'var(--data-viz-blue-50)',
172
- 'data-viz-blue-100': 'var(--data-viz-blue-100)',
173
- 'data-viz-blue-200': 'var(--data-viz-blue-200)',
174
- 'data-viz-blue-300': 'var(--data-viz-blue-300)',
175
- 'data-viz-blue-400': 'var(--data-viz-blue-400)',
176
- 'data-viz-blue-500': 'var(--data-viz-blue-500)',
177
- 'data-viz-blue-600': 'var(--data-viz-blue-600)',
178
- 'data-viz-blue-700': 'var(--data-viz-blue-700)',
179
- 'data-viz-blue-800': 'var(--data-viz-blue-800)',
180
- 'data-viz-blue-900': 'var(--data-viz-blue-900)',
181
- 'data-viz-blue-950': 'var(--data-viz-blue-950)',
182
- 'data-viz-magenta-50': 'var(--data-viz-magenta-50)',
183
- 'data-viz-magenta-100': 'var(--data-viz-magenta-100)',
184
- 'data-viz-magenta-200': 'var(--data-viz-magenta-200)',
185
- 'data-viz-magenta-300': 'var(--data-viz-magenta-300)',
186
- 'data-viz-magenta-400': 'var(--data-viz-magenta-400)',
187
- 'data-viz-magenta-500': 'var(--data-viz-magenta-500)',
188
- 'data-viz-magenta-600': 'var(--data-viz-magenta-600)',
189
- 'data-viz-magenta-700': 'var(--data-viz-magenta-700)',
190
- 'data-viz-magenta-800': 'var(--data-viz-magenta-800)',
191
- 'data-viz-magenta-900': 'var(--data-viz-magenta-900)',
192
- 'data-viz-magenta-950': 'var(--data-viz-magenta-950)',
193
- 'data-viz-orange-50': 'var(--data-viz-orange-50)',
194
- 'data-viz-orange-100': 'var(--data-viz-orange-100)',
195
- 'data-viz-orange-200': 'var(--data-viz-orange-200)',
196
- 'data-viz-orange-300': 'var(--data-viz-orange-300)',
197
- 'data-viz-orange-400': 'var(--data-viz-orange-400)',
198
- 'data-viz-orange-500': 'var(--data-viz-orange-500)',
199
- 'data-viz-orange-600': 'var(--data-viz-orange-600)',
200
- 'data-viz-orange-700': 'var(--data-viz-orange-700)',
201
- 'data-viz-orange-800': 'var(--data-viz-orange-800)',
202
- 'data-viz-orange-900': 'var(--data-viz-orange-900)',
203
- 'data-viz-orange-950': 'var(--data-viz-orange-950)',
204
- };
205
- const neutralColors = {
206
- 'neutral-0': 'var(--gl-color-neutral-0)',
207
- 'neutral-10': 'var(--gl-color-neutral-10)',
208
- 'neutral-50': 'var(--gl-color-neutral-50)',
209
- 'neutral-100': 'var(--gl-color-neutral-100)',
210
- 'neutral-200': 'var(--gl-color-neutral-200)',
211
- 'neutral-300': 'var(--gl-color-neutral-300)',
212
- 'neutral-400': 'var(--gl-color-neutral-400)',
213
- 'neutral-500': 'var(--gl-color-neutral-500)',
214
- 'neutral-600': 'var(--gl-color-neutral-600)',
215
- 'neutral-700': 'var(--gl-color-neutral-700)',
216
- 'neutral-800': 'var(--gl-color-neutral-800)',
217
- 'neutral-900': 'var(--gl-color-neutral-900)',
218
- 'neutral-950': 'var(--gl-color-neutral-950)',
219
- 'neutral-1000': 'var(--gl-color-neutral-1000)',
220
- };
221
- const textColors = {
222
- default: 'var(--gl-text-color-default)',
223
- subtle: 'var(--gl-text-color-subtle)',
224
- strong: 'var(--gl-text-color-strong)',
225
- heading: 'var(--gl-text-color-heading)',
226
- link: 'var(--gl-text-color-link)',
227
- warning: 'var(--gl-text-color-warning)',
228
- danger: 'var(--gl-text-color-danger)',
229
- success: 'var(--gl-text-color-success)',
230
- disabled: 'var(--gl-text-color-disabled)',
231
- };
232
- const backgroundColors = {
233
- default: 'var(--gl-background-color-default)',
234
- subtle: 'var(--gl-background-color-subtle)',
235
- strong: 'var(--gl-background-color-strong)',
236
- disabled: 'var(--gl-background-color-disabled)',
237
- overlap: 'var(--gl-background-color-overlap)',
238
- section: 'var(--gl-background-color-section)',
239
- overlay: 'var(--gl-background-color-overlay)',
240
- };
241
- const borderColors = {
242
- transparent: 'var(--gl-border-color-transparent)',
243
- default: 'var(--gl-border-color-default)',
244
- subtle: 'var(--gl-border-color-subtle)',
245
- strong: 'var(--gl-border-color-strong)',
246
- section: 'var(--gl-border-color-section)',
247
- };
248
- const iconColors = {
249
- default: 'var(--gl-icon-color-default)',
250
- subtle: 'var(--gl-icon-color-subtle)',
251
- strong: 'var(--gl-icon-color-strong)',
252
- disabled: 'var(--gl-icon-color-disabled)',
253
- link: 'var(--gl-icon-color-link)',
254
- info: 'var(--gl-icon-color-info)',
255
- warning: 'var(--gl-icon-color-warning)',
256
- danger: 'var(--gl-icon-color-danger)',
257
- success: 'var(--gl-icon-color-success)',
258
- };
259
- const alphaDarkColors = {
260
- 2: 'var(--gl-color-alpha-dark-2)',
261
- 4: 'var(--gl-color-alpha-dark-4)',
262
- 6: 'var(--gl-color-alpha-dark-6)',
263
- 8: 'var(--gl-color-alpha-dark-8)',
264
- 16: 'var(--gl-color-alpha-dark-16)',
265
- 24: 'var(--gl-color-alpha-dark-24)',
266
- 40: 'var(--gl-color-alpha-dark-40)',
267
- };
268
- const alphaLightColors = {
269
- 2: 'var(--gl-color-alpha-light-2)',
270
- 4: 'var(--gl-color-alpha-light-4)',
271
- 6: 'var(--gl-color-alpha-light-6)',
272
- 8: 'var(--gl-color-alpha-light-8)',
273
- 16: 'var(--gl-color-alpha-light-16)',
274
- 24: 'var(--gl-color-alpha-light-24)',
275
- 36: 'var(--gl-color-alpha-light-36)',
276
- };
277
- const brandColors = {
278
- 'brand-white': 'var(--gl-color-brand-white)',
279
- 'brand-charcoal': 'var(--gl-color-brand-charcoal)',
280
- 'brand-orange': {
281
- '01g': 'var(--gl-color-brand-orange-01g)',
282
- '01p': 'var(--gl-color-brand-orange-01p)',
283
- '02p': 'var(--gl-color-brand-orange-02p)',
284
- '03p': 'var(--gl-color-brand-orange-03p)',
285
- },
286
- 'brand-purple': {
287
- '01g': 'var(--gl-color-brand-purple-01g)',
288
- '01p': 'var(--gl-color-brand-purple-01p)',
289
- '02p': 'var(--gl-color-brand-purple-02p)',
290
- },
291
- 'brand-gray': {
292
- '01': 'var(--gl-color-brand-gray-01)',
293
- '02': 'var(--gl-color-brand-gray-02)',
294
- '03': 'var(--gl-color-brand-gray-03)',
295
- '04': 'var(--gl-color-brand-gray-04)',
296
- '05': 'var(--gl-color-brand-gray-05)',
297
- },
298
- 'brand-pink': { '01g': 'var(--gl-color-brand-pink-01g)' },
299
- };
300
- const statusBackgroundColors = {
301
- 'status-neutral': 'var(--gl-status-neutral-background-color)',
302
- 'status-info': 'var(--gl-status-info-background-color)',
303
- 'status-success': 'var(--gl-status-success-background-color)',
304
- 'status-warning': 'var(--gl-status-warning-background-color)',
305
- 'status-danger': 'var(--gl-status-danger-background-color)',
306
- 'status-brand': 'var(--gl-status-brand-background-color)',
307
- };
308
- const statusTextColors = {
309
- 'status-neutral': 'var(--gl-status-neutral-text-color)',
310
- 'status-info': 'var(--gl-status-info-text-color)',
311
- 'status-success': 'var(--gl-status-success-text-color)',
312
- 'status-warning': 'var(--gl-status-warning-text-color)',
313
- 'status-danger': 'var(--gl-status-danger-text-color)',
314
- 'status-brand': 'var(--gl-status-brand-text-color)',
315
- };
316
- const statusIconColors = {
317
- 'status-neutral': 'var(--gl-status-neutral-icon-color)',
318
- 'status-info': 'var(--gl-status-info-icon-color)',
319
- 'status-success': 'var(--gl-status-success-icon-color)',
320
- 'status-warning': 'var(--gl-status-warning-icon-color)',
321
- 'status-danger': 'var(--gl-status-danger-icon-color)',
322
- 'status-brand': 'var(--gl-status-brand-icon-color)',
323
- };
324
- const feedbackBackgroundColors = {
325
- 'feedback-strong': 'var(--gl-feedback-strong-background-color)',
326
- 'feedback-neutral': 'var(--gl-feedback-neutral-background-color)',
327
- 'feedback-info': 'var(--gl-feedback-info-background-color)',
328
- 'feedback-success': 'var(--gl-feedback-success-background-color)',
329
- 'feedback-warning': 'var(--gl-feedback-warning-background-color)',
330
- 'feedback-danger': 'var(--gl-feedback-danger-background-color)',
331
- };
332
- const feedbackTextColors = {
333
- 'feedback-strong': 'var(--gl-feedback-strong-text-color)',
334
- 'feedback-neutral': 'var(--gl-feedback-neutral-text-color)',
335
- 'feedback-info': 'var(--gl-feedback-info-text-color)',
336
- 'feedback-success': 'var(--gl-feedback-success-text-color)',
337
- 'feedback-warning': 'var(--gl-feedback-warning-text-color)',
338
- 'feedback-danger': 'var(--gl-feedback-danger-text-color)',
339
- };
340
- const feedbackIconColors = {
341
- 'feedback-strong': 'var(--gl-feedback-strong-icon-color)',
342
- 'feedback-neutral': 'var(--gl-feedback-neutral-icon-color)',
343
- 'feedback-info': 'var(--gl-feedback-info-icon-color)',
344
- 'feedback-success': 'var(--gl-feedback-success-icon-color)',
345
- 'feedback-warning': 'var(--gl-feedback-warning-icon-color)',
346
- 'feedback-danger': 'var(--gl-feedback-danger-icon-color)',
347
- };
348
- const spacingScale = {
349
- 0: 'var(--gl-spacing-scale-0)',
350
- 1: 'var(--gl-spacing-scale-1)',
351
- 2: 'var(--gl-spacing-scale-2)',
352
- 3: 'var(--gl-spacing-scale-3)',
353
- 4: 'var(--gl-spacing-scale-4)',
354
- 5: 'var(--gl-spacing-scale-5)',
355
- 6: 'var(--gl-spacing-scale-6)',
356
- 7: 'var(--gl-spacing-scale-7)',
357
- 8: 'var(--gl-spacing-scale-8)',
358
- 9: 'var(--gl-spacing-scale-9)',
359
- 10: 'var(--gl-spacing-scale-10)',
360
- 11: 'var(--gl-spacing-scale-11)',
361
- 12: 'var(--gl-spacing-scale-12)',
362
- 13: 'var(--gl-spacing-scale-13)',
363
- 15: 'var(--gl-spacing-scale-15)',
364
- 18: 'var(--gl-spacing-scale-18)',
365
- 20: 'var(--gl-spacing-scale-20)',
366
- 26: 'var(--gl-spacing-scale-26)',
367
- 28: 'var(--gl-spacing-scale-28)',
368
- 30: 'var(--gl-spacing-scale-30)',
369
- 31: 'var(--gl-spacing-scale-31)',
370
- 33: 'var(--gl-spacing-scale-33)',
371
- 34: 'var(--gl-spacing-scale-34)',
372
- 37: 'var(--gl-spacing-scale-37)',
373
- 48: 'var(--gl-spacing-scale-48)',
374
- 62: 'var(--gl-spacing-scale-62)',
375
- 75: 'var(--gl-spacing-scale-75)',
376
- 80: 'var(--gl-spacing-scale-80)',
377
- 88: 'var(--gl-spacing-scale-88)',
378
- px: 'var(--gl-spacing-scale-px)',
379
- '2-5': 'var(--gl-spacing-scale-2-5)',
380
- '11-5': 'var(--gl-spacing-scale-11-5)',
381
- };
382
- const borderRadius = {
383
- none: 'var(--gl-border-radius-none)',
384
- xs: 'var(--gl-border-radius-xs)',
385
- sm: 'var(--gl-border-radius-sm)',
386
- md: 'var(--gl-border-radius-md)',
387
- lg: 'var(--gl-border-radius-lg)',
388
- xl: 'var(--gl-border-radius-xl)',
389
- '2xl': 'var(--gl-border-radius-2xl)',
390
- '3xl': 'var(--gl-border-radius-3xl)',
391
- full: 'var(--gl-border-radius-full)',
392
- default: 'var(--gl-border-radius-default)',
393
- action: 'var(--gl-action-border-radius)',
394
- control: 'var(--gl-control-border-radius)',
395
- feedback: 'var(--gl-feedback-border-radius)',
396
- };
397
- const opacity = {
398
- 0: 'var(--gl-opacity-0)',
399
- 1: 'var(--gl-opacity-1)',
400
- 2: 'var(--gl-opacity-2)',
401
- 3: 'var(--gl-opacity-3)',
402
- 4: 'var(--gl-opacity-4)',
403
- 5: 'var(--gl-opacity-5)',
404
- 6: 'var(--gl-opacity-6)',
405
- 7: 'var(--gl-opacity-7)',
406
- 8: 'var(--gl-opacity-8)',
407
- 9: 'var(--gl-opacity-9)',
408
- 10: 'var(--gl-opacity-10)',
409
- };
410
- const zindexes = {
411
- 0: 'var(--gl-zindex-0)',
412
- 1: 'var(--gl-zindex-1)',
413
- 2: 'var(--gl-zindex-2)',
414
- 3: 'var(--gl-zindex-3)',
415
- 4: 'var(--gl-zindex-4)',
416
- 200: 'var(--gl-zindex-200)',
417
- 9999: 'var(--gl-zindex-9999)',
418
- };
419
- const boxShadow = {
420
- sm: 'var(--gl-shadow-sm)',
421
- md: 'var(--gl-shadow-md)',
422
- lg: 'var(--gl-shadow-lg)',
423
- };
424
- const lineHeight = {
425
- 12: 'var(--gl-line-height-12)',
426
- 16: 'var(--gl-line-height-16)',
427
- 20: 'var(--gl-line-height-20)',
428
- 24: 'var(--gl-line-height-24)',
429
- 28: 'var(--gl-line-height-28)',
430
- 32: 'var(--gl-line-height-32)',
431
- 36: 'var(--gl-line-height-36)',
432
- 42: 'var(--gl-line-height-42)',
433
- 44: 'var(--gl-line-height-44)',
434
- 52: 'var(--gl-line-height-52)',
435
- };
436
- const fontFamily = {
437
- regular: 'var(--gl-font-family-regular)',
438
- monospace: 'var(--gl-font-family-monospace)',
439
- };
440
- const fontSize = {
441
- 100: 'var(--gl-font-size-100)',
442
- 200: 'var(--gl-font-size-200)',
443
- 300: 'var(--gl-font-size-300)',
444
- 400: 'var(--gl-font-size-400)',
445
- 500: 'var(--gl-font-size-500)',
446
- 600: 'var(--gl-font-size-600)',
447
- 700: 'var(--gl-font-size-700)',
448
- 800: 'var(--gl-font-size-800)',
449
- xs: 'var(--gl-font-size-xs)',
450
- sm: 'var(--gl-font-size-sm)',
451
- md: 'var(--gl-font-size-md)',
452
- lg: 'var(--gl-font-size-lg)',
453
- '100-fixed': 'var(--gl-font-size-100-fixed)',
454
- '200-fixed': 'var(--gl-font-size-200-fixed)',
455
- '300-fixed': 'var(--gl-font-size-300-fixed)',
456
- '400-fixed': 'var(--gl-font-size-400-fixed)',
457
- '500-fixed': 'var(--gl-font-size-500-fixed)',
458
- '600-fixed': 'var(--gl-font-size-600-fixed)',
459
- '700-fixed': 'var(--gl-font-size-700-fixed)',
460
- '800-fixed': 'var(--gl-font-size-800-fixed)',
461
- base: 'var(--gl-font-size-base)',
462
- };
463
- const fontWeight = {
464
- 100: 'var(--gl-font-weight-100)',
465
- 300: 'var(--gl-font-weight-300)',
466
- normal: 'var(--gl-font-weight-normal)',
467
- semibold: 'var(--gl-font-weight-semibold)',
468
- bold: 'var(--gl-font-weight-bold)',
469
- };
470
-
471
- const colors = {
472
- inherit: 'inherit',
473
- current: 'currentColor',
474
- transparent: 'transparent',
475
- white: 'var(--white)',
476
- black: 'var(--black)',
477
- alpha: {
478
- dark: { ...alphaDarkColors },
479
- light: { ...alphaLightColors },
480
- },
481
- ...baseColors,
482
- ...themeColors,
483
- ...dataVizColors,
484
- ...neutralColors,
485
- ...brandColors,
486
- };
487
-
488
- const backgroundColor = {
489
- ...colors,
490
- ...backgroundColors,
491
- ...statusBackgroundColors,
492
- ...feedbackBackgroundColors,
493
- dropdown: 'var(--gl-dropdown-background-color)',
494
- control: {
495
- default: 'var(--gl-control-background-color-default)',
496
- disabled: 'var(--gl-control-background-color-disabled)',
497
- concatenation: 'var(--gl-control-background-color-concatenation)',
498
- readonly: 'var(--gl-control-background-color-readonly)',
499
- },
500
- };
501
-
502
- const borderColor = {
503
- ...colors,
504
- ...borderColors,
505
- dropdown: 'var(--gl-dropdown-border-color)',
506
- 'dropdown-divider': 'var(--gl-dropdown-divider-color)',
507
- control: {
508
- default: 'var(--gl-control-border-color-default)',
509
- disabled: 'var(--gl-control-border-color-disabled)',
510
- error: 'var(--gl-control-border-color-error)',
511
- },
512
- };
513
-
514
- const outlineColor = {
515
- focus: 'var(--gl-focus-ring-outer-color)',
516
- };
517
-
518
- const fill = {
519
- ...colors,
520
- ...statusIconColors,
521
- ...feedbackIconColors,
522
- icon: {
523
- ...iconColors,
524
- },
525
- };
526
-
527
- const textColor = {
528
- ...colors,
529
- ...textColors,
530
- ...statusTextColors,
531
- ...feedbackTextColors,
532
- primary: 'var(--gl-text-primary)',
533
- secondary: 'var(--gl-text-secondary)',
534
- tertiary: 'var(--gl-text-tertiary)',
535
- control: {
536
- placeholder: 'var(--gl-control-placeholder-color)',
537
- error: 'var(--gl-control-text-color-error)',
538
- valid: 'var(--gl-control-text-color-valid)',
539
- },
540
- };
541
-
542
- module.exports = {
543
- colors,
544
- backgroundColor,
545
- borderColor,
546
- outlineColor,
547
- textColor,
548
- fill,
549
- spacing: spacingScale,
550
- borderRadius,
551
- opacity,
552
- zIndex: zindexes,
553
- boxShadow,
554
- lineHeight,
555
- fontFamily,
556
- fontSize,
557
- fontWeight,
558
- };