@gitlab/ui 80.18.0 → 80.19.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 (23) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/tokens/build/js/tokens.dark.js +73 -1
  3. package/dist/tokens/build/js/tokens.js +73 -1
  4. package/dist/tokens/css/tokens.css +72 -0
  5. package/dist/tokens/css/tokens.dark.css +72 -0
  6. package/dist/tokens/js/tokens.dark.js +72 -0
  7. package/dist/tokens/js/tokens.js +72 -0
  8. package/dist/tokens/json/tokens.dark.json +1236 -0
  9. package/dist/tokens/json/tokens.json +1236 -0
  10. package/dist/tokens/scss/_tokens.dark.scss +72 -0
  11. package/dist/tokens/scss/_tokens.scss +72 -0
  12. package/dist/tokens/scss/_tokens_custom_properties.scss +72 -0
  13. package/package.json +1 -1
  14. package/src/tokens/build/css/tokens.css +72 -0
  15. package/src/tokens/build/css/tokens.dark.css +72 -0
  16. package/src/tokens/build/js/tokens.dark.js +72 -0
  17. package/src/tokens/build/js/tokens.js +72 -0
  18. package/src/tokens/build/json/tokens.dark.json +1236 -0
  19. package/src/tokens/build/json/tokens.json +1236 -0
  20. package/src/tokens/build/scss/_tokens.dark.scss +72 -0
  21. package/src/tokens/build/scss/_tokens.scss +72 -0
  22. package/src/tokens/build/scss/_tokens_custom_properties.scss +72 -0
  23. package/src/tokens/color.constant.tokens.json +300 -0
package/dist/tokens/scss/_tokens.dark.scss CHANGED
@@ -235,6 +235,78 @@ $data-viz-green-300: #366800 !default;
235
235
  $data-viz-green-200: #275600 !default;
236
236
  $data-viz-green-100: #1a4500 !default;
237
237
  $data-viz-green-50: #133a03 !default;
238
+ $gl-color-theme-light-red-950: #5c1105;
239
+ $gl-color-theme-light-red-900: #751709;
240
+ $gl-color-theme-light-red-800: #8b2212;
241
+ $gl-color-theme-light-red-700: #a02e1c;
242
+ $gl-color-theme-light-red-600: #b53a26;
243
+ $gl-color-theme-light-red-500: #c24b38;
244
+ $gl-color-theme-light-red-400: #d36250;
245
+ $gl-color-theme-light-red-300: #e07f6f;
246
+ $gl-color-theme-light-red-200: #ebada2;
247
+ $gl-color-theme-light-red-100: #f6d9d5;
248
+ $gl-color-theme-light-red-50: #faf2f1;
249
+ $gl-color-theme-light-red-10: #fdf9f8;
250
+ $gl-color-theme-red-950: #380700;
251
+ $gl-color-theme-red-900: #580d02;
252
+ $gl-color-theme-red-800: #761405;
253
+ $gl-color-theme-red-700: #8f2110;
254
+ $gl-color-theme-red-600: #a13322;
255
+ $gl-color-theme-red-500: #ad4a3b;
256
+ $gl-color-theme-red-400: #c66e60;
257
+ $gl-color-theme-red-300: #d59086;
258
+ $gl-color-theme-red-200: #e3bab5;
259
+ $gl-color-theme-red-100: #ecd3d0;
260
+ $gl-color-theme-red-50: #f4e9e7;
261
+ $gl-color-theme-red-10: #faf4f3;
262
+ $gl-color-theme-green-950: #052e19;
263
+ $gl-color-theme-green-900: #0e4328;
264
+ $gl-color-theme-green-800: #155635;
265
+ $gl-color-theme-green-700: #1b653f;
266
+ $gl-color-theme-green-600: #25744c;
267
+ $gl-color-theme-green-500: #308258;
268
+ $gl-color-theme-green-400: #499767;
269
+ $gl-color-theme-green-300: #69af7d;
270
+ $gl-color-theme-green-200: #8cc497;
271
+ $gl-color-theme-green-100: #b1d6b5;
272
+ $gl-color-theme-green-50: #dde9de;
273
+ $gl-color-theme-green-10: #eef4ef;
274
+ $gl-color-theme-light-blue-950: #0a3764;
275
+ $gl-color-theme-light-blue-900: #0c4277;
276
+ $gl-color-theme-light-blue-800: #0e4d8d;
277
+ $gl-color-theme-light-blue-700: #145aa1;
278
+ $gl-color-theme-light-blue-600: #2268ae;
279
+ $gl-color-theme-light-blue-500: #3476b9;
280
+ $gl-color-theme-light-blue-400: #4f8bc7;
281
+ $gl-color-theme-light-blue-300: #74a3d3;
282
+ $gl-color-theme-light-blue-200: #a0bedc;
283
+ $gl-color-theme-light-blue-100: #c1d4e6;
284
+ $gl-color-theme-light-blue-50: #dde6ee;
285
+ $gl-color-theme-light-blue-10: #eef3f7;
286
+ $gl-color-theme-blue-950: #04101c;
287
+ $gl-color-theme-blue-900: #0b2640;
288
+ $gl-color-theme-blue-800: #153c63;
289
+ $gl-color-theme-blue-700: #235180;
290
+ $gl-color-theme-blue-600: #346596;
291
+ $gl-color-theme-blue-500: #4977a5;
292
+ $gl-color-theme-blue-400: #628eb9;
293
+ $gl-color-theme-blue-300: #81a5c9;
294
+ $gl-color-theme-blue-200: #a6bdd5;
295
+ $gl-color-theme-blue-100: #b9cadc;
296
+ $gl-color-theme-blue-50: #cdd8e3;
297
+ $gl-color-theme-blue-10: #e6ecf0;
298
+ $gl-color-theme-indigo-950: #14143d;
299
+ $gl-color-theme-indigo-900: #222261;
300
+ $gl-color-theme-indigo-800: #303083;
301
+ $gl-color-theme-indigo-700: #41419f;
302
+ $gl-color-theme-indigo-600: #5252b5;
303
+ $gl-color-theme-indigo-500: #6666c4;
304
+ $gl-color-theme-indigo-400: #8181d7;
305
+ $gl-color-theme-indigo-300: #a2a2e6;
306
+ $gl-color-theme-indigo-200: #c7c7f2;
307
+ $gl-color-theme-indigo-100: #dbdbf8;
308
+ $gl-color-theme-indigo-50: #f1f1ff;
309
+ $gl-color-theme-indigo-10: #f8f8ff;
238
310
  $gl-color-red-950: #4d0a00;
239
311
  $gl-color-red-900: #660e00;
240
312
  $gl-color-red-800: #8d1300;
package/dist/tokens/scss/_tokens.scss CHANGED
@@ -235,6 +235,78 @@ $data-viz-green-300: #94c25e !default;
235
235
  $data-viz-green-200: #b0d97b !default;
236
236
  $data-viz-green-100: #c6ed94 !default;
237
237
  $data-viz-green-50: #ddfab7 !default;
238
+ $gl-color-theme-light-red-950: #5c1105;
239
+ $gl-color-theme-light-red-900: #751709;
240
+ $gl-color-theme-light-red-800: #8b2212;
241
+ $gl-color-theme-light-red-700: #a02e1c;
242
+ $gl-color-theme-light-red-600: #b53a26;
243
+ $gl-color-theme-light-red-500: #c24b38;
244
+ $gl-color-theme-light-red-400: #d36250;
245
+ $gl-color-theme-light-red-300: #e07f6f;
246
+ $gl-color-theme-light-red-200: #ebada2;
247
+ $gl-color-theme-light-red-100: #f6d9d5;
248
+ $gl-color-theme-light-red-50: #faf2f1;
249
+ $gl-color-theme-light-red-10: #fdf9f8;
250
+ $gl-color-theme-red-950: #380700;
251
+ $gl-color-theme-red-900: #580d02;
252
+ $gl-color-theme-red-800: #761405;
253
+ $gl-color-theme-red-700: #8f2110;
254
+ $gl-color-theme-red-600: #a13322;
255
+ $gl-color-theme-red-500: #ad4a3b;
256
+ $gl-color-theme-red-400: #c66e60;
257
+ $gl-color-theme-red-300: #d59086;
258
+ $gl-color-theme-red-200: #e3bab5;
259
+ $gl-color-theme-red-100: #ecd3d0;
260
+ $gl-color-theme-red-50: #f4e9e7;
261
+ $gl-color-theme-red-10: #faf4f3;
262
+ $gl-color-theme-green-950: #052e19;
263
+ $gl-color-theme-green-900: #0e4328;
264
+ $gl-color-theme-green-800: #155635;
265
+ $gl-color-theme-green-700: #1b653f;
266
+ $gl-color-theme-green-600: #25744c;
267
+ $gl-color-theme-green-500: #308258;
268
+ $gl-color-theme-green-400: #499767;
269
+ $gl-color-theme-green-300: #69af7d;
270
+ $gl-color-theme-green-200: #8cc497;
271
+ $gl-color-theme-green-100: #b1d6b5;
272
+ $gl-color-theme-green-50: #dde9de;
273
+ $gl-color-theme-green-10: #eef4ef;
274
+ $gl-color-theme-light-blue-950: #0a3764;
275
+ $gl-color-theme-light-blue-900: #0c4277;
276
+ $gl-color-theme-light-blue-800: #0e4d8d;
277
+ $gl-color-theme-light-blue-700: #145aa1;
278
+ $gl-color-theme-light-blue-600: #2268ae;
279
+ $gl-color-theme-light-blue-500: #3476b9;
280
+ $gl-color-theme-light-blue-400: #4f8bc7;
281
+ $gl-color-theme-light-blue-300: #74a3d3;
282
+ $gl-color-theme-light-blue-200: #a0bedc;
283
+ $gl-color-theme-light-blue-100: #c1d4e6;
284
+ $gl-color-theme-light-blue-50: #dde6ee;
285
+ $gl-color-theme-light-blue-10: #eef3f7;
286
+ $gl-color-theme-blue-950: #04101c;
287
+ $gl-color-theme-blue-900: #0b2640;
288
+ $gl-color-theme-blue-800: #153c63;
289
+ $gl-color-theme-blue-700: #235180;
290
+ $gl-color-theme-blue-600: #346596;
291
+ $gl-color-theme-blue-500: #4977a5;
292
+ $gl-color-theme-blue-400: #628eb9;
293
+ $gl-color-theme-blue-300: #81a5c9;
294
+ $gl-color-theme-blue-200: #a6bdd5;
295
+ $gl-color-theme-blue-100: #b9cadc;
296
+ $gl-color-theme-blue-50: #cdd8e3;
297
+ $gl-color-theme-blue-10: #e6ecf0;
298
+ $gl-color-theme-indigo-950: #14143d;
299
+ $gl-color-theme-indigo-900: #222261;
300
+ $gl-color-theme-indigo-800: #303083;
301
+ $gl-color-theme-indigo-700: #41419f;
302
+ $gl-color-theme-indigo-600: #5252b5;
303
+ $gl-color-theme-indigo-500: #6666c4;
304
+ $gl-color-theme-indigo-400: #8181d7;
305
+ $gl-color-theme-indigo-300: #a2a2e6;
306
+ $gl-color-theme-indigo-200: #c7c7f2;
307
+ $gl-color-theme-indigo-100: #dbdbf8;
308
+ $gl-color-theme-indigo-50: #f1f1ff;
309
+ $gl-color-theme-indigo-10: #f8f8ff;
238
310
  $gl-color-red-950: #4d0a00;
239
311
  $gl-color-red-900: #660e00;
240
312
  $gl-color-red-800: #8d1300;
package/dist/tokens/scss/_tokens_custom_properties.scss CHANGED
@@ -94,6 +94,78 @@ $gl-color-red-700: var(--gl-color-red-700);
94
94
  $gl-color-red-800: var(--gl-color-red-800);
95
95
  $gl-color-red-900: var(--gl-color-red-900);
96
96
  $gl-color-red-950: var(--gl-color-red-950);
97
+ $gl-color-theme-indigo-10: var(--gl-color-theme-indigo-10);
98
+ $gl-color-theme-indigo-50: var(--gl-color-theme-indigo-50);
99
+ $gl-color-theme-indigo-100: var(--gl-color-theme-indigo-100);
100
+ $gl-color-theme-indigo-200: var(--gl-color-theme-indigo-200);
101
+ $gl-color-theme-indigo-300: var(--gl-color-theme-indigo-300);
102
+ $gl-color-theme-indigo-400: var(--gl-color-theme-indigo-400);
103
+ $gl-color-theme-indigo-500: var(--gl-color-theme-indigo-500);
104
+ $gl-color-theme-indigo-600: var(--gl-color-theme-indigo-600);
105
+ $gl-color-theme-indigo-700: var(--gl-color-theme-indigo-700);
106
+ $gl-color-theme-indigo-800: var(--gl-color-theme-indigo-800);
107
+ $gl-color-theme-indigo-900: var(--gl-color-theme-indigo-900);
108
+ $gl-color-theme-indigo-950: var(--gl-color-theme-indigo-950);
109
+ $gl-color-theme-blue-10: var(--gl-color-theme-blue-10);
110
+ $gl-color-theme-blue-50: var(--gl-color-theme-blue-50);
111
+ $gl-color-theme-blue-100: var(--gl-color-theme-blue-100);
112
+ $gl-color-theme-blue-200: var(--gl-color-theme-blue-200);
113
+ $gl-color-theme-blue-300: var(--gl-color-theme-blue-300);
114
+ $gl-color-theme-blue-400: var(--gl-color-theme-blue-400);
115
+ $gl-color-theme-blue-500: var(--gl-color-theme-blue-500);
116
+ $gl-color-theme-blue-600: var(--gl-color-theme-blue-600);
117
+ $gl-color-theme-blue-700: var(--gl-color-theme-blue-700);
118
+ $gl-color-theme-blue-800: var(--gl-color-theme-blue-800);
119
+ $gl-color-theme-blue-900: var(--gl-color-theme-blue-900);
120
+ $gl-color-theme-blue-950: var(--gl-color-theme-blue-950);
121
+ $gl-color-theme-light-blue-10: var(--gl-color-theme-light-blue-10);
122
+ $gl-color-theme-light-blue-50: var(--gl-color-theme-light-blue-50);
123
+ $gl-color-theme-light-blue-100: var(--gl-color-theme-light-blue-100);
124
+ $gl-color-theme-light-blue-200: var(--gl-color-theme-light-blue-200);
125
+ $gl-color-theme-light-blue-300: var(--gl-color-theme-light-blue-300);
126
+ $gl-color-theme-light-blue-400: var(--gl-color-theme-light-blue-400);
127
+ $gl-color-theme-light-blue-500: var(--gl-color-theme-light-blue-500);
128
+ $gl-color-theme-light-blue-600: var(--gl-color-theme-light-blue-600);
129
+ $gl-color-theme-light-blue-700: var(--gl-color-theme-light-blue-700);
130
+ $gl-color-theme-light-blue-800: var(--gl-color-theme-light-blue-800);
131
+ $gl-color-theme-light-blue-900: var(--gl-color-theme-light-blue-900);
132
+ $gl-color-theme-light-blue-950: var(--gl-color-theme-light-blue-950);
133
+ $gl-color-theme-green-10: var(--gl-color-theme-green-10);
134
+ $gl-color-theme-green-50: var(--gl-color-theme-green-50);
135
+ $gl-color-theme-green-100: var(--gl-color-theme-green-100);
136
+ $gl-color-theme-green-200: var(--gl-color-theme-green-200);
137
+ $gl-color-theme-green-300: var(--gl-color-theme-green-300);
138
+ $gl-color-theme-green-400: var(--gl-color-theme-green-400);
139
+ $gl-color-theme-green-500: var(--gl-color-theme-green-500);
140
+ $gl-color-theme-green-600: var(--gl-color-theme-green-600);
141
+ $gl-color-theme-green-700: var(--gl-color-theme-green-700);
142
+ $gl-color-theme-green-800: var(--gl-color-theme-green-800);
143
+ $gl-color-theme-green-900: var(--gl-color-theme-green-900);
144
+ $gl-color-theme-green-950: var(--gl-color-theme-green-950);
145
+ $gl-color-theme-red-10: var(--gl-color-theme-red-10);
146
+ $gl-color-theme-red-50: var(--gl-color-theme-red-50);
147
+ $gl-color-theme-red-100: var(--gl-color-theme-red-100);
148
+ $gl-color-theme-red-200: var(--gl-color-theme-red-200);
149
+ $gl-color-theme-red-300: var(--gl-color-theme-red-300);
150
+ $gl-color-theme-red-400: var(--gl-color-theme-red-400);
151
+ $gl-color-theme-red-500: var(--gl-color-theme-red-500);
152
+ $gl-color-theme-red-600: var(--gl-color-theme-red-600);
153
+ $gl-color-theme-red-700: var(--gl-color-theme-red-700);
154
+ $gl-color-theme-red-800: var(--gl-color-theme-red-800);
155
+ $gl-color-theme-red-900: var(--gl-color-theme-red-900);
156
+ $gl-color-theme-red-950: var(--gl-color-theme-red-950);
157
+ $gl-color-theme-light-red-10: var(--gl-color-theme-light-red-10);
158
+ $gl-color-theme-light-red-50: var(--gl-color-theme-light-red-50);
159
+ $gl-color-theme-light-red-100: var(--gl-color-theme-light-red-100);
160
+ $gl-color-theme-light-red-200: var(--gl-color-theme-light-red-200);
161
+ $gl-color-theme-light-red-300: var(--gl-color-theme-light-red-300);
162
+ $gl-color-theme-light-red-400: var(--gl-color-theme-light-red-400);
163
+ $gl-color-theme-light-red-500: var(--gl-color-theme-light-red-500);
164
+ $gl-color-theme-light-red-600: var(--gl-color-theme-light-red-600);
165
+ $gl-color-theme-light-red-700: var(--gl-color-theme-light-red-700);
166
+ $gl-color-theme-light-red-800: var(--gl-color-theme-light-red-800);
167
+ $gl-color-theme-light-red-900: var(--gl-color-theme-light-red-900);
168
+ $gl-color-theme-light-red-950: var(--gl-color-theme-light-red-950);
97
169
  $data-viz-green-50: var(--data-viz-green-50);
98
170
  $data-viz-green-100: var(--data-viz-green-100);
99
171
  $data-viz-green-200: var(--data-viz-green-200);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "80.18.0",
3
+ "version": "80.19.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
package/src/tokens/build/css/tokens.css CHANGED
@@ -237,6 +237,78 @@
237
237
  --data-viz-green-200: #b0d97b;
238
238
  --data-viz-green-100: #c6ed94;
239
239
  --data-viz-green-50: #ddfab7;
240
+ --gl-color-theme-light-red-950: #5c1105;
241
+ --gl-color-theme-light-red-900: #751709;
242
+ --gl-color-theme-light-red-800: #8b2212;
243
+ --gl-color-theme-light-red-700: #a02e1c;
244
+ --gl-color-theme-light-red-600: #b53a26;
245
+ --gl-color-theme-light-red-500: #c24b38;
246
+ --gl-color-theme-light-red-400: #d36250;
247
+ --gl-color-theme-light-red-300: #e07f6f;
248
+ --gl-color-theme-light-red-200: #ebada2;
249
+ --gl-color-theme-light-red-100: #f6d9d5;
250
+ --gl-color-theme-light-red-50: #faf2f1;
251
+ --gl-color-theme-light-red-10: #fdf9f8;
252
+ --gl-color-theme-red-950: #380700;
253
+ --gl-color-theme-red-900: #580d02;
254
+ --gl-color-theme-red-800: #761405;
255
+ --gl-color-theme-red-700: #8f2110;
256
+ --gl-color-theme-red-600: #a13322;
257
+ --gl-color-theme-red-500: #ad4a3b;
258
+ --gl-color-theme-red-400: #c66e60;
259
+ --gl-color-theme-red-300: #d59086;
260
+ --gl-color-theme-red-200: #e3bab5;
261
+ --gl-color-theme-red-100: #ecd3d0;
262
+ --gl-color-theme-red-50: #f4e9e7;
263
+ --gl-color-theme-red-10: #faf4f3;
264
+ --gl-color-theme-green-950: #052e19;
265
+ --gl-color-theme-green-900: #0e4328;
266
+ --gl-color-theme-green-800: #155635;
267
+ --gl-color-theme-green-700: #1b653f;
268
+ --gl-color-theme-green-600: #25744c;
269
+ --gl-color-theme-green-500: #308258;
270
+ --gl-color-theme-green-400: #499767;
271
+ --gl-color-theme-green-300: #69af7d;
272
+ --gl-color-theme-green-200: #8cc497;
273
+ --gl-color-theme-green-100: #b1d6b5;
274
+ --gl-color-theme-green-50: #dde9de;
275
+ --gl-color-theme-green-10: #eef4ef;
276
+ --gl-color-theme-light-blue-950: #0a3764;
277
+ --gl-color-theme-light-blue-900: #0c4277;
278
+ --gl-color-theme-light-blue-800: #0e4d8d;
279
+ --gl-color-theme-light-blue-700: #145aa1;
280
+ --gl-color-theme-light-blue-600: #2268ae;
281
+ --gl-color-theme-light-blue-500: #3476b9;
282
+ --gl-color-theme-light-blue-400: #4f8bc7;
283
+ --gl-color-theme-light-blue-300: #74a3d3;
284
+ --gl-color-theme-light-blue-200: #a0bedc;
285
+ --gl-color-theme-light-blue-100: #c1d4e6;
286
+ --gl-color-theme-light-blue-50: #dde6ee;
287
+ --gl-color-theme-light-blue-10: #eef3f7;
288
+ --gl-color-theme-blue-950: #04101c;
289
+ --gl-color-theme-blue-900: #0b2640;
290
+ --gl-color-theme-blue-800: #153c63;
291
+ --gl-color-theme-blue-700: #235180;
292
+ --gl-color-theme-blue-600: #346596;
293
+ --gl-color-theme-blue-500: #4977a5;
294
+ --gl-color-theme-blue-400: #628eb9;
295
+ --gl-color-theme-blue-300: #81a5c9;
296
+ --gl-color-theme-blue-200: #a6bdd5;
297
+ --gl-color-theme-blue-100: #b9cadc;
298
+ --gl-color-theme-blue-50: #cdd8e3;
299
+ --gl-color-theme-blue-10: #e6ecf0;
300
+ --gl-color-theme-indigo-950: #14143d;
301
+ --gl-color-theme-indigo-900: #222261;
302
+ --gl-color-theme-indigo-800: #303083;
303
+ --gl-color-theme-indigo-700: #41419f;
304
+ --gl-color-theme-indigo-600: #5252b5;
305
+ --gl-color-theme-indigo-500: #6666c4;
306
+ --gl-color-theme-indigo-400: #8181d7;
307
+ --gl-color-theme-indigo-300: #a2a2e6;
308
+ --gl-color-theme-indigo-200: #c7c7f2;
309
+ --gl-color-theme-indigo-100: #dbdbf8;
310
+ --gl-color-theme-indigo-50: #f1f1ff;
311
+ --gl-color-theme-indigo-10: #f8f8ff;
240
312
  --gl-color-red-950: #4d0a00;
241
313
  --gl-color-red-900: #660e00;
242
314
  --gl-color-red-800: #8d1300;
package/src/tokens/build/css/tokens.dark.css CHANGED
@@ -237,6 +237,78 @@
237
237
  --data-viz-green-200: #275600;
238
238
  --data-viz-green-100: #1a4500;
239
239
  --data-viz-green-50: #133a03;
240
+ --gl-color-theme-light-red-950: #5c1105;
241
+ --gl-color-theme-light-red-900: #751709;
242
+ --gl-color-theme-light-red-800: #8b2212;
243
+ --gl-color-theme-light-red-700: #a02e1c;
244
+ --gl-color-theme-light-red-600: #b53a26;
245
+ --gl-color-theme-light-red-500: #c24b38;
246
+ --gl-color-theme-light-red-400: #d36250;
247
+ --gl-color-theme-light-red-300: #e07f6f;
248
+ --gl-color-theme-light-red-200: #ebada2;
249
+ --gl-color-theme-light-red-100: #f6d9d5;
250
+ --gl-color-theme-light-red-50: #faf2f1;
251
+ --gl-color-theme-light-red-10: #fdf9f8;
252
+ --gl-color-theme-red-950: #380700;
253
+ --gl-color-theme-red-900: #580d02;
254
+ --gl-color-theme-red-800: #761405;
255
+ --gl-color-theme-red-700: #8f2110;
256
+ --gl-color-theme-red-600: #a13322;
257
+ --gl-color-theme-red-500: #ad4a3b;
258
+ --gl-color-theme-red-400: #c66e60;
259
+ --gl-color-theme-red-300: #d59086;
260
+ --gl-color-theme-red-200: #e3bab5;
261
+ --gl-color-theme-red-100: #ecd3d0;
262
+ --gl-color-theme-red-50: #f4e9e7;
263
+ --gl-color-theme-red-10: #faf4f3;
264
+ --gl-color-theme-green-950: #052e19;
265
+ --gl-color-theme-green-900: #0e4328;
266
+ --gl-color-theme-green-800: #155635;
267
+ --gl-color-theme-green-700: #1b653f;
268
+ --gl-color-theme-green-600: #25744c;
269
+ --gl-color-theme-green-500: #308258;
270
+ --gl-color-theme-green-400: #499767;
271
+ --gl-color-theme-green-300: #69af7d;
272
+ --gl-color-theme-green-200: #8cc497;
273
+ --gl-color-theme-green-100: #b1d6b5;
274
+ --gl-color-theme-green-50: #dde9de;
275
+ --gl-color-theme-green-10: #eef4ef;
276
+ --gl-color-theme-light-blue-950: #0a3764;
277
+ --gl-color-theme-light-blue-900: #0c4277;
278
+ --gl-color-theme-light-blue-800: #0e4d8d;
279
+ --gl-color-theme-light-blue-700: #145aa1;
280
+ --gl-color-theme-light-blue-600: #2268ae;
281
+ --gl-color-theme-light-blue-500: #3476b9;
282
+ --gl-color-theme-light-blue-400: #4f8bc7;
283
+ --gl-color-theme-light-blue-300: #74a3d3;
284
+ --gl-color-theme-light-blue-200: #a0bedc;
285
+ --gl-color-theme-light-blue-100: #c1d4e6;
286
+ --gl-color-theme-light-blue-50: #dde6ee;
287
+ --gl-color-theme-light-blue-10: #eef3f7;
288
+ --gl-color-theme-blue-950: #04101c;
289
+ --gl-color-theme-blue-900: #0b2640;
290
+ --gl-color-theme-blue-800: #153c63;
291
+ --gl-color-theme-blue-700: #235180;
292
+ --gl-color-theme-blue-600: #346596;
293
+ --gl-color-theme-blue-500: #4977a5;
294
+ --gl-color-theme-blue-400: #628eb9;
295
+ --gl-color-theme-blue-300: #81a5c9;
296
+ --gl-color-theme-blue-200: #a6bdd5;
297
+ --gl-color-theme-blue-100: #b9cadc;
298
+ --gl-color-theme-blue-50: #cdd8e3;
299
+ --gl-color-theme-blue-10: #e6ecf0;
300
+ --gl-color-theme-indigo-950: #14143d;
301
+ --gl-color-theme-indigo-900: #222261;
302
+ --gl-color-theme-indigo-800: #303083;
303
+ --gl-color-theme-indigo-700: #41419f;
304
+ --gl-color-theme-indigo-600: #5252b5;
305
+ --gl-color-theme-indigo-500: #6666c4;
306
+ --gl-color-theme-indigo-400: #8181d7;
307
+ --gl-color-theme-indigo-300: #a2a2e6;
308
+ --gl-color-theme-indigo-200: #c7c7f2;
309
+ --gl-color-theme-indigo-100: #dbdbf8;
310
+ --gl-color-theme-indigo-50: #f1f1ff;
311
+ --gl-color-theme-indigo-10: #f8f8ff;
240
312
  --gl-color-red-950: #4d0a00;
241
313
  --gl-color-red-900: #660e00;
242
314
  --gl-color-red-800: #8d1300;
package/src/tokens/build/js/tokens.dark.js CHANGED
@@ -94,6 +94,78 @@ export const GL_COLOR_RED_700 = '#ae1800';
94
94
  export const GL_COLOR_RED_800 = '#8d1300';
95
95
  export const GL_COLOR_RED_900 = '#660e00';
96
96
  export const GL_COLOR_RED_950 = '#4d0a00';
97
+ export const GL_COLOR_THEME_INDIGO_10 = '#f8f8ff';
98
+ export const GL_COLOR_THEME_INDIGO_50 = '#f1f1ff';
99
+ export const GL_COLOR_THEME_INDIGO_100 = '#dbdbf8';
100
+ export const GL_COLOR_THEME_INDIGO_200 = '#c7c7f2';
101
+ export const GL_COLOR_THEME_INDIGO_300 = '#a2a2e6';
102
+ export const GL_COLOR_THEME_INDIGO_400 = '#8181d7';
103
+ export const GL_COLOR_THEME_INDIGO_500 = '#6666c4';
104
+ export const GL_COLOR_THEME_INDIGO_600 = '#5252b5';
105
+ export const GL_COLOR_THEME_INDIGO_700 = '#41419f';
106
+ export const GL_COLOR_THEME_INDIGO_800 = '#303083';
107
+ export const GL_COLOR_THEME_INDIGO_900 = '#222261';
108
+ export const GL_COLOR_THEME_INDIGO_950 = '#14143d';
109
+ export const GL_COLOR_THEME_BLUE_10 = '#e6ecf0';
110
+ export const GL_COLOR_THEME_BLUE_50 = '#cdd8e3';
111
+ export const GL_COLOR_THEME_BLUE_100 = '#b9cadc';
112
+ export const GL_COLOR_THEME_BLUE_200 = '#a6bdd5';
113
+ export const GL_COLOR_THEME_BLUE_300 = '#81a5c9';
114
+ export const GL_COLOR_THEME_BLUE_400 = '#628eb9';
115
+ export const GL_COLOR_THEME_BLUE_500 = '#4977a5';
116
+ export const GL_COLOR_THEME_BLUE_600 = '#346596';
117
+ export const GL_COLOR_THEME_BLUE_700 = '#235180';
118
+ export const GL_COLOR_THEME_BLUE_800 = '#153c63';
119
+ export const GL_COLOR_THEME_BLUE_900 = '#0b2640';
120
+ export const GL_COLOR_THEME_BLUE_950 = '#04101c';
121
+ export const GL_COLOR_THEME_LIGHT_BLUE_10 = '#eef3f7';
122
+ export const GL_COLOR_THEME_LIGHT_BLUE_50 = '#dde6ee';
123
+ export const GL_COLOR_THEME_LIGHT_BLUE_100 = '#c1d4e6';
124
+ export const GL_COLOR_THEME_LIGHT_BLUE_200 = '#a0bedc';
125
+ export const GL_COLOR_THEME_LIGHT_BLUE_300 = '#74a3d3';
126
+ export const GL_COLOR_THEME_LIGHT_BLUE_400 = '#4f8bc7';
127
+ export const GL_COLOR_THEME_LIGHT_BLUE_500 = '#3476b9';
128
+ export const GL_COLOR_THEME_LIGHT_BLUE_600 = '#2268ae';
129
+ export const GL_COLOR_THEME_LIGHT_BLUE_700 = '#145aa1';
130
+ export const GL_COLOR_THEME_LIGHT_BLUE_800 = '#0e4d8d';
131
+ export const GL_COLOR_THEME_LIGHT_BLUE_900 = '#0c4277';
132
+ export const GL_COLOR_THEME_LIGHT_BLUE_950 = '#0a3764';
133
+ export const GL_COLOR_THEME_GREEN_10 = '#eef4ef';
134
+ export const GL_COLOR_THEME_GREEN_50 = '#dde9de';
135
+ export const GL_COLOR_THEME_GREEN_100 = '#b1d6b5';
136
+ export const GL_COLOR_THEME_GREEN_200 = '#8cc497';
137
+ export const GL_COLOR_THEME_GREEN_300 = '#69af7d';
138
+ export const GL_COLOR_THEME_GREEN_400 = '#499767';
139
+ export const GL_COLOR_THEME_GREEN_500 = '#308258';
140
+ export const GL_COLOR_THEME_GREEN_600 = '#25744c';
141
+ export const GL_COLOR_THEME_GREEN_700 = '#1b653f';
142
+ export const GL_COLOR_THEME_GREEN_800 = '#155635';
143
+ export const GL_COLOR_THEME_GREEN_900 = '#0e4328';
144
+ export const GL_COLOR_THEME_GREEN_950 = '#052e19';
145
+ export const GL_COLOR_THEME_RED_10 = '#faf4f3';
146
+ export const GL_COLOR_THEME_RED_50 = '#f4e9e7';
147
+ export const GL_COLOR_THEME_RED_100 = '#ecd3d0';
148
+ export const GL_COLOR_THEME_RED_200 = '#e3bab5';
149
+ export const GL_COLOR_THEME_RED_300 = '#d59086';
150
+ export const GL_COLOR_THEME_RED_400 = '#c66e60';
151
+ export const GL_COLOR_THEME_RED_500 = '#ad4a3b';
152
+ export const GL_COLOR_THEME_RED_600 = '#a13322';
153
+ export const GL_COLOR_THEME_RED_700 = '#8f2110';
154
+ export const GL_COLOR_THEME_RED_800 = '#761405';
155
+ export const GL_COLOR_THEME_RED_900 = '#580d02';
156
+ export const GL_COLOR_THEME_RED_950 = '#380700';
157
+ export const GL_COLOR_THEME_LIGHT_RED_10 = '#fdf9f8';
158
+ export const GL_COLOR_THEME_LIGHT_RED_50 = '#faf2f1';
159
+ export const GL_COLOR_THEME_LIGHT_RED_100 = '#f6d9d5';
160
+ export const GL_COLOR_THEME_LIGHT_RED_200 = '#ebada2';
161
+ export const GL_COLOR_THEME_LIGHT_RED_300 = '#e07f6f';
162
+ export const GL_COLOR_THEME_LIGHT_RED_400 = '#d36250';
163
+ export const GL_COLOR_THEME_LIGHT_RED_500 = '#c24b38';
164
+ export const GL_COLOR_THEME_LIGHT_RED_600 = '#b53a26';
165
+ export const GL_COLOR_THEME_LIGHT_RED_700 = '#a02e1c';
166
+ export const GL_COLOR_THEME_LIGHT_RED_800 = '#8b2212';
167
+ export const GL_COLOR_THEME_LIGHT_RED_900 = '#751709';
168
+ export const GL_COLOR_THEME_LIGHT_RED_950 = '#5c1105';
97
169
  export const DATA_VIZ_GREEN_50 = '#133a03';
98
170
  export const DATA_VIZ_GREEN_100 = '#1a4500';
99
171
  export const DATA_VIZ_GREEN_200 = '#275600';
package/src/tokens/build/js/tokens.js CHANGED
@@ -94,6 +94,78 @@ export const GL_COLOR_RED_700 = '#ae1800';
94
94
  export const GL_COLOR_RED_800 = '#8d1300';
95
95
  export const GL_COLOR_RED_900 = '#660e00';
96
96
  export const GL_COLOR_RED_950 = '#4d0a00';
97
+ export const GL_COLOR_THEME_INDIGO_10 = '#f8f8ff';
98
+ export const GL_COLOR_THEME_INDIGO_50 = '#f1f1ff';
99
+ export const GL_COLOR_THEME_INDIGO_100 = '#dbdbf8';
100
+ export const GL_COLOR_THEME_INDIGO_200 = '#c7c7f2';
101
+ export const GL_COLOR_THEME_INDIGO_300 = '#a2a2e6';
102
+ export const GL_COLOR_THEME_INDIGO_400 = '#8181d7';
103
+ export const GL_COLOR_THEME_INDIGO_500 = '#6666c4';
104
+ export const GL_COLOR_THEME_INDIGO_600 = '#5252b5';
105
+ export const GL_COLOR_THEME_INDIGO_700 = '#41419f';
106
+ export const GL_COLOR_THEME_INDIGO_800 = '#303083';
107
+ export const GL_COLOR_THEME_INDIGO_900 = '#222261';
108
+ export const GL_COLOR_THEME_INDIGO_950 = '#14143d';
109
+ export const GL_COLOR_THEME_BLUE_10 = '#e6ecf0';
110
+ export const GL_COLOR_THEME_BLUE_50 = '#cdd8e3';
111
+ export const GL_COLOR_THEME_BLUE_100 = '#b9cadc';
112
+ export const GL_COLOR_THEME_BLUE_200 = '#a6bdd5';
113
+ export const GL_COLOR_THEME_BLUE_300 = '#81a5c9';
114
+ export const GL_COLOR_THEME_BLUE_400 = '#628eb9';
115
+ export const GL_COLOR_THEME_BLUE_500 = '#4977a5';
116
+ export const GL_COLOR_THEME_BLUE_600 = '#346596';
117
+ export const GL_COLOR_THEME_BLUE_700 = '#235180';
118
+ export const GL_COLOR_THEME_BLUE_800 = '#153c63';
119
+ export const GL_COLOR_THEME_BLUE_900 = '#0b2640';
120
+ export const GL_COLOR_THEME_BLUE_950 = '#04101c';
121
+ export const GL_COLOR_THEME_LIGHT_BLUE_10 = '#eef3f7';
122
+ export const GL_COLOR_THEME_LIGHT_BLUE_50 = '#dde6ee';
123
+ export const GL_COLOR_THEME_LIGHT_BLUE_100 = '#c1d4e6';
124
+ export const GL_COLOR_THEME_LIGHT_BLUE_200 = '#a0bedc';
125
+ export const GL_COLOR_THEME_LIGHT_BLUE_300 = '#74a3d3';
126
+ export const GL_COLOR_THEME_LIGHT_BLUE_400 = '#4f8bc7';
127
+ export const GL_COLOR_THEME_LIGHT_BLUE_500 = '#3476b9';
128
+ export const GL_COLOR_THEME_LIGHT_BLUE_600 = '#2268ae';
129
+ export const GL_COLOR_THEME_LIGHT_BLUE_700 = '#145aa1';
130
+ export const GL_COLOR_THEME_LIGHT_BLUE_800 = '#0e4d8d';
131
+ export const GL_COLOR_THEME_LIGHT_BLUE_900 = '#0c4277';
132
+ export const GL_COLOR_THEME_LIGHT_BLUE_950 = '#0a3764';
133
+ export const GL_COLOR_THEME_GREEN_10 = '#eef4ef';
134
+ export const GL_COLOR_THEME_GREEN_50 = '#dde9de';
135
+ export const GL_COLOR_THEME_GREEN_100 = '#b1d6b5';
136
+ export const GL_COLOR_THEME_GREEN_200 = '#8cc497';
137
+ export const GL_COLOR_THEME_GREEN_300 = '#69af7d';
138
+ export const GL_COLOR_THEME_GREEN_400 = '#499767';
139
+ export const GL_COLOR_THEME_GREEN_500 = '#308258';
140
+ export const GL_COLOR_THEME_GREEN_600 = '#25744c';
141
+ export const GL_COLOR_THEME_GREEN_700 = '#1b653f';
142
+ export const GL_COLOR_THEME_GREEN_800 = '#155635';
143
+ export const GL_COLOR_THEME_GREEN_900 = '#0e4328';
144
+ export const GL_COLOR_THEME_GREEN_950 = '#052e19';
145
+ export const GL_COLOR_THEME_RED_10 = '#faf4f3';
146
+ export const GL_COLOR_THEME_RED_50 = '#f4e9e7';
147
+ export const GL_COLOR_THEME_RED_100 = '#ecd3d0';
148
+ export const GL_COLOR_THEME_RED_200 = '#e3bab5';
149
+ export const GL_COLOR_THEME_RED_300 = '#d59086';
150
+ export const GL_COLOR_THEME_RED_400 = '#c66e60';
151
+ export const GL_COLOR_THEME_RED_500 = '#ad4a3b';
152
+ export const GL_COLOR_THEME_RED_600 = '#a13322';
153
+ export const GL_COLOR_THEME_RED_700 = '#8f2110';
154
+ export const GL_COLOR_THEME_RED_800 = '#761405';
155
+ export const GL_COLOR_THEME_RED_900 = '#580d02';
156
+ export const GL_COLOR_THEME_RED_950 = '#380700';
157
+ export const GL_COLOR_THEME_LIGHT_RED_10 = '#fdf9f8';
158
+ export const GL_COLOR_THEME_LIGHT_RED_50 = '#faf2f1';
159
+ export const GL_COLOR_THEME_LIGHT_RED_100 = '#f6d9d5';
160
+ export const GL_COLOR_THEME_LIGHT_RED_200 = '#ebada2';
161
+ export const GL_COLOR_THEME_LIGHT_RED_300 = '#e07f6f';
162
+ export const GL_COLOR_THEME_LIGHT_RED_400 = '#d36250';
163
+ export const GL_COLOR_THEME_LIGHT_RED_500 = '#c24b38';
164
+ export const GL_COLOR_THEME_LIGHT_RED_600 = '#b53a26';
165
+ export const GL_COLOR_THEME_LIGHT_RED_700 = '#a02e1c';
166
+ export const GL_COLOR_THEME_LIGHT_RED_800 = '#8b2212';
167
+ export const GL_COLOR_THEME_LIGHT_RED_900 = '#751709';
168
+ export const GL_COLOR_THEME_LIGHT_RED_950 = '#5c1105';
97
169
  export const DATA_VIZ_GREEN_50 = '#ddfab7';
98
170
  export const DATA_VIZ_GREEN_100 = '#c6ed94';
99
171
  export const DATA_VIZ_GREEN_200 = '#b0d97b';