@haiilo/catalyst-tokens 7.0.1 → 7.1.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/css/variables.css +16 -0
- package/dist/export/figma.json +68 -0
- package/dist/export/zeroheight.json +68 -0
- package/dist/js/variables.d.ts +16 -0
- package/dist/js/variables.js +16 -0
- package/dist/json/variables.json +20 -0
- package/dist/scss/_variables.scss +36 -0
- package/package.json +1 -1
package/dist/css/variables.css
CHANGED
|
@@ -65,6 +65,13 @@
|
|
|
65
65
|
--cat-color-base-brand-inverted-400: 147, 180, 242;
|
|
66
66
|
--cat-color-base-brand-inverted-500: 147, 180, 242;
|
|
67
67
|
--cat-color-base-brand-inverted-600: 147, 180, 242;
|
|
68
|
+
--cat-color-base-blue-100: 179, 213, 248;
|
|
69
|
+
--cat-color-base-blue-200: 128, 185, 243;
|
|
70
|
+
--cat-color-base-blue-300: 38, 136, 234;
|
|
71
|
+
--cat-color-base-blue-400: 0, 115, 230;
|
|
72
|
+
--cat-color-base-blue-500: 0, 107, 227;
|
|
73
|
+
--cat-color-base-blue-600: 0, 96, 223;
|
|
74
|
+
--cat-color-base-blue-700: 0, 67, 213;
|
|
68
75
|
--cat-color-base-green-100: 212, 237, 228;
|
|
69
76
|
--cat-color-base-green-200: 0, 187, 125;
|
|
70
77
|
--cat-color-base-green-300: 0, 170, 113;
|
|
@@ -122,6 +129,15 @@
|
|
|
122
129
|
--cat-color-theme-secondary-inverted-text: 255, 255, 255;
|
|
123
130
|
--cat-color-theme-secondary-inverted-text-hover: 255, 255, 255;
|
|
124
131
|
--cat-color-theme-secondary-inverted-text-active: 255, 255, 255;
|
|
132
|
+
--cat-color-theme-info-bg: 0, 115, 230;
|
|
133
|
+
--cat-color-theme-info-bg-hover: 0, 107, 227;
|
|
134
|
+
--cat-color-theme-info-bg-active: 0, 96, 223;
|
|
135
|
+
--cat-color-theme-info-fill: 255, 255, 255;
|
|
136
|
+
--cat-color-theme-info-fill-hover: 255, 255, 255;
|
|
137
|
+
--cat-color-theme-info-fill-active: 255, 255, 255;
|
|
138
|
+
--cat-color-theme-info-text: 0, 115, 230;
|
|
139
|
+
--cat-color-theme-info-text-hover: 0, 107, 227;
|
|
140
|
+
--cat-color-theme-info-text-active: 0, 96, 223;
|
|
125
141
|
--cat-color-theme-success-bg: 0, 132, 88;
|
|
126
142
|
--cat-color-theme-success-bg-hover: 0, 117, 78;
|
|
127
143
|
--cat-color-theme-success-bg-active: 0, 105, 70;
|
package/dist/export/figma.json
CHANGED
|
@@ -89,6 +89,36 @@
|
|
|
89
89
|
"$value": "#93b4f2"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
|
+
"blue": {
|
|
93
|
+
"100": {
|
|
94
|
+
"$type": "color",
|
|
95
|
+
"$value": "#b3d5f8"
|
|
96
|
+
},
|
|
97
|
+
"200": {
|
|
98
|
+
"$type": "color",
|
|
99
|
+
"$value": "#80b9f3"
|
|
100
|
+
},
|
|
101
|
+
"300": {
|
|
102
|
+
"$type": "color",
|
|
103
|
+
"$value": "#2688ea"
|
|
104
|
+
},
|
|
105
|
+
"400": {
|
|
106
|
+
"$type": "color",
|
|
107
|
+
"$value": "#0073e6"
|
|
108
|
+
},
|
|
109
|
+
"500": {
|
|
110
|
+
"$type": "color",
|
|
111
|
+
"$value": "#006be3"
|
|
112
|
+
},
|
|
113
|
+
"600": {
|
|
114
|
+
"$type": "color",
|
|
115
|
+
"$value": "#0060df"
|
|
116
|
+
},
|
|
117
|
+
"700": {
|
|
118
|
+
"$type": "color",
|
|
119
|
+
"$value": "#0043d5"
|
|
120
|
+
}
|
|
121
|
+
},
|
|
92
122
|
"green": {
|
|
93
123
|
"100": {
|
|
94
124
|
"$type": "color",
|
|
@@ -333,6 +363,44 @@
|
|
|
333
363
|
"$value": "#ffffff"
|
|
334
364
|
}
|
|
335
365
|
},
|
|
366
|
+
"info": {
|
|
367
|
+
"bg": {
|
|
368
|
+
"$type": "color",
|
|
369
|
+
"$value": "#0073e6"
|
|
370
|
+
},
|
|
371
|
+
"bgHover": {
|
|
372
|
+
"$type": "color",
|
|
373
|
+
"$value": "#006be3"
|
|
374
|
+
},
|
|
375
|
+
"bgActive": {
|
|
376
|
+
"$type": "color",
|
|
377
|
+
"$value": "#0060df"
|
|
378
|
+
},
|
|
379
|
+
"fill": {
|
|
380
|
+
"$type": "color",
|
|
381
|
+
"$value": "#ffffff"
|
|
382
|
+
},
|
|
383
|
+
"fillHover": {
|
|
384
|
+
"$type": "color",
|
|
385
|
+
"$value": "#ffffff"
|
|
386
|
+
},
|
|
387
|
+
"fillActive": {
|
|
388
|
+
"$type": "color",
|
|
389
|
+
"$value": "#ffffff"
|
|
390
|
+
},
|
|
391
|
+
"text": {
|
|
392
|
+
"$type": "color",
|
|
393
|
+
"$value": "#0073e6"
|
|
394
|
+
},
|
|
395
|
+
"textHover": {
|
|
396
|
+
"$type": "color",
|
|
397
|
+
"$value": "#006be3"
|
|
398
|
+
},
|
|
399
|
+
"textActive": {
|
|
400
|
+
"$type": "color",
|
|
401
|
+
"$value": "#0060df"
|
|
402
|
+
}
|
|
403
|
+
},
|
|
336
404
|
"success": {
|
|
337
405
|
"bg": {
|
|
338
406
|
"$type": "color",
|
|
@@ -267,6 +267,36 @@
|
|
|
267
267
|
"$value": "#93b4f2"
|
|
268
268
|
}
|
|
269
269
|
},
|
|
270
|
+
"blue": {
|
|
271
|
+
"100": {
|
|
272
|
+
"$type": "color",
|
|
273
|
+
"$value": "#b3d5f8"
|
|
274
|
+
},
|
|
275
|
+
"200": {
|
|
276
|
+
"$type": "color",
|
|
277
|
+
"$value": "#80b9f3"
|
|
278
|
+
},
|
|
279
|
+
"300": {
|
|
280
|
+
"$type": "color",
|
|
281
|
+
"$value": "#2688ea"
|
|
282
|
+
},
|
|
283
|
+
"400": {
|
|
284
|
+
"$type": "color",
|
|
285
|
+
"$value": "#0073e6"
|
|
286
|
+
},
|
|
287
|
+
"500": {
|
|
288
|
+
"$type": "color",
|
|
289
|
+
"$value": "#006be3"
|
|
290
|
+
},
|
|
291
|
+
"600": {
|
|
292
|
+
"$type": "color",
|
|
293
|
+
"$value": "#0060df"
|
|
294
|
+
},
|
|
295
|
+
"700": {
|
|
296
|
+
"$type": "color",
|
|
297
|
+
"$value": "#0043d5"
|
|
298
|
+
}
|
|
299
|
+
},
|
|
270
300
|
"green": {
|
|
271
301
|
"100": {
|
|
272
302
|
"$type": "color",
|
|
@@ -511,6 +541,44 @@
|
|
|
511
541
|
"$value": "#ffffff"
|
|
512
542
|
}
|
|
513
543
|
},
|
|
544
|
+
"info": {
|
|
545
|
+
"bg": {
|
|
546
|
+
"$type": "color",
|
|
547
|
+
"$value": "#0073e6"
|
|
548
|
+
},
|
|
549
|
+
"bgHover": {
|
|
550
|
+
"$type": "color",
|
|
551
|
+
"$value": "#006be3"
|
|
552
|
+
},
|
|
553
|
+
"bgActive": {
|
|
554
|
+
"$type": "color",
|
|
555
|
+
"$value": "#0060df"
|
|
556
|
+
},
|
|
557
|
+
"fill": {
|
|
558
|
+
"$type": "color",
|
|
559
|
+
"$value": "#ffffff"
|
|
560
|
+
},
|
|
561
|
+
"fillHover": {
|
|
562
|
+
"$type": "color",
|
|
563
|
+
"$value": "#ffffff"
|
|
564
|
+
},
|
|
565
|
+
"fillActive": {
|
|
566
|
+
"$type": "color",
|
|
567
|
+
"$value": "#ffffff"
|
|
568
|
+
},
|
|
569
|
+
"text": {
|
|
570
|
+
"$type": "color",
|
|
571
|
+
"$value": "#0073e6"
|
|
572
|
+
},
|
|
573
|
+
"textHover": {
|
|
574
|
+
"$type": "color",
|
|
575
|
+
"$value": "#006be3"
|
|
576
|
+
},
|
|
577
|
+
"textActive": {
|
|
578
|
+
"$type": "color",
|
|
579
|
+
"$value": "#0060df"
|
|
580
|
+
}
|
|
581
|
+
},
|
|
514
582
|
"success": {
|
|
515
583
|
"bg": {
|
|
516
584
|
"$type": "color",
|
package/dist/js/variables.d.ts
CHANGED
|
@@ -64,6 +64,13 @@ export const colorBaseBrand700 : string;
|
|
|
64
64
|
export const colorBaseBrandInverted400 : string;
|
|
65
65
|
export const colorBaseBrandInverted500 : string;
|
|
66
66
|
export const colorBaseBrandInverted600 : string;
|
|
67
|
+
export const colorBaseBlue100 : string;
|
|
68
|
+
export const colorBaseBlue200 : string;
|
|
69
|
+
export const colorBaseBlue300 : string;
|
|
70
|
+
export const colorBaseBlue400 : string;
|
|
71
|
+
export const colorBaseBlue500 : string;
|
|
72
|
+
export const colorBaseBlue600 : string;
|
|
73
|
+
export const colorBaseBlue700 : string;
|
|
67
74
|
export const colorBaseGreen100 : string;
|
|
68
75
|
export const colorBaseGreen200 : string;
|
|
69
76
|
export const colorBaseGreen300 : string;
|
|
@@ -121,6 +128,15 @@ export const colorThemeSecondaryInvertedFillActive : string;
|
|
|
121
128
|
export const colorThemeSecondaryInvertedText : string;
|
|
122
129
|
export const colorThemeSecondaryInvertedTextHover : string;
|
|
123
130
|
export const colorThemeSecondaryInvertedTextActive : string;
|
|
131
|
+
export const colorThemeInfoBg : string;
|
|
132
|
+
export const colorThemeInfoBgHover : string;
|
|
133
|
+
export const colorThemeInfoBgActive : string;
|
|
134
|
+
export const colorThemeInfoFill : string;
|
|
135
|
+
export const colorThemeInfoFillHover : string;
|
|
136
|
+
export const colorThemeInfoFillActive : string;
|
|
137
|
+
export const colorThemeInfoText : string;
|
|
138
|
+
export const colorThemeInfoTextHover : string;
|
|
139
|
+
export const colorThemeInfoTextActive : string;
|
|
124
140
|
export const colorThemeSuccessBg : string;
|
|
125
141
|
export const colorThemeSuccessBgHover : string;
|
|
126
142
|
export const colorThemeSuccessBgActive : string;
|
package/dist/js/variables.js
CHANGED
|
@@ -64,6 +64,13 @@ export const colorBaseBrand700 = "#175b63";
|
|
|
64
64
|
export const colorBaseBrandInverted400 = "#93b4f2";
|
|
65
65
|
export const colorBaseBrandInverted500 = "#93b4f2";
|
|
66
66
|
export const colorBaseBrandInverted600 = "#93b4f2";
|
|
67
|
+
export const colorBaseBlue100 = "#b3d5f8";
|
|
68
|
+
export const colorBaseBlue200 = "#80b9f3";
|
|
69
|
+
export const colorBaseBlue300 = "#2688ea";
|
|
70
|
+
export const colorBaseBlue400 = "#0073e6";
|
|
71
|
+
export const colorBaseBlue500 = "#006be3";
|
|
72
|
+
export const colorBaseBlue600 = "#0060df";
|
|
73
|
+
export const colorBaseBlue700 = "#0043d5";
|
|
67
74
|
export const colorBaseGreen100 = "#d4ede4";
|
|
68
75
|
export const colorBaseGreen200 = "#00bb7d";
|
|
69
76
|
export const colorBaseGreen300 = "#00aa71";
|
|
@@ -121,6 +128,15 @@ export const colorThemeSecondaryInvertedFillActive = "#000000";
|
|
|
121
128
|
export const colorThemeSecondaryInvertedText = "#ffffff";
|
|
122
129
|
export const colorThemeSecondaryInvertedTextHover = "#ffffff";
|
|
123
130
|
export const colorThemeSecondaryInvertedTextActive = "#ffffff";
|
|
131
|
+
export const colorThemeInfoBg = "#0073e6";
|
|
132
|
+
export const colorThemeInfoBgHover = "#006be3";
|
|
133
|
+
export const colorThemeInfoBgActive = "#0060df";
|
|
134
|
+
export const colorThemeInfoFill = "#ffffff";
|
|
135
|
+
export const colorThemeInfoFillHover = "#ffffff";
|
|
136
|
+
export const colorThemeInfoFillActive = "#ffffff";
|
|
137
|
+
export const colorThemeInfoText = "#0073e6";
|
|
138
|
+
export const colorThemeInfoTextHover = "#006be3";
|
|
139
|
+
export const colorThemeInfoTextActive = "#0060df";
|
|
124
140
|
export const colorThemeSuccessBg = "#008458";
|
|
125
141
|
export const colorThemeSuccessBgHover = "#00754e";
|
|
126
142
|
export const colorThemeSuccessBgActive = "#006946";
|
package/dist/json/variables.json
CHANGED
|
@@ -81,6 +81,15 @@
|
|
|
81
81
|
"500": "#93b4f2",
|
|
82
82
|
"600": "#93b4f2"
|
|
83
83
|
},
|
|
84
|
+
"blue": {
|
|
85
|
+
"100": "#b3d5f8",
|
|
86
|
+
"200": "#80b9f3",
|
|
87
|
+
"300": "#2688ea",
|
|
88
|
+
"400": "#0073e6",
|
|
89
|
+
"500": "#006be3",
|
|
90
|
+
"600": "#0060df",
|
|
91
|
+
"700": "#0043d5"
|
|
92
|
+
},
|
|
84
93
|
"green": {
|
|
85
94
|
"100": "#d4ede4",
|
|
86
95
|
"200": "#00bb7d",
|
|
@@ -154,6 +163,17 @@
|
|
|
154
163
|
"textHover": "#ffffff",
|
|
155
164
|
"textActive": "#ffffff"
|
|
156
165
|
},
|
|
166
|
+
"info": {
|
|
167
|
+
"bg": "#0073e6",
|
|
168
|
+
"bgHover": "#006be3",
|
|
169
|
+
"bgActive": "#0060df",
|
|
170
|
+
"fill": "#ffffff",
|
|
171
|
+
"fillHover": "#ffffff",
|
|
172
|
+
"fillActive": "#ffffff",
|
|
173
|
+
"text": "#0073e6",
|
|
174
|
+
"textHover": "#006be3",
|
|
175
|
+
"textActive": "#0060df"
|
|
176
|
+
},
|
|
157
177
|
"success": {
|
|
158
178
|
"bg": "#008458",
|
|
159
179
|
"bgHover": "#00754e",
|
|
@@ -98,6 +98,13 @@ $cat-color-base-green-400: 0, 132, 88 !default;
|
|
|
98
98
|
$cat-color-base-green-300: 0, 170, 113 !default;
|
|
99
99
|
$cat-color-base-green-200: 0, 187, 125 !default;
|
|
100
100
|
$cat-color-base-green-100: 212, 237, 228 !default;
|
|
101
|
+
$cat-color-base-blue-700: 0, 67, 213 !default;
|
|
102
|
+
$cat-color-base-blue-600: 0, 96, 223 !default;
|
|
103
|
+
$cat-color-base-blue-500: 0, 107, 227 !default;
|
|
104
|
+
$cat-color-base-blue-400: 0, 115, 230 !default;
|
|
105
|
+
$cat-color-base-blue-300: 38, 136, 234 !default;
|
|
106
|
+
$cat-color-base-blue-200: 128, 185, 243 !default;
|
|
107
|
+
$cat-color-base-blue-100: 179, 213, 248 !default;
|
|
101
108
|
$cat-color-base-brand-inverted-600: 147, 180, 242 !default;
|
|
102
109
|
$cat-color-base-brand-inverted-500: 147, 180, 242 !default;
|
|
103
110
|
$cat-color-base-brand-inverted-400: 147, 180, 242 !default;
|
|
@@ -207,6 +214,15 @@ $cat-color-theme-success-fill: var(--cat-success-fill, $cat-color-base-white) !d
|
|
|
207
214
|
$cat-color-theme-success-bg-active: var(--cat-success-bg-active, $cat-color-base-green-600) !default;
|
|
208
215
|
$cat-color-theme-success-bg-hover: var(--cat-success-bg-hover, $cat-color-base-green-500) !default;
|
|
209
216
|
$cat-color-theme-success-bg: var(--cat-success-bg, $cat-color-base-green-400) !default;
|
|
217
|
+
$cat-color-theme-info-text-active: var(--cat-success-text-active, $cat-color-base-blue-600) !default;
|
|
218
|
+
$cat-color-theme-info-text-hover: var(--cat-success-text-hover, $cat-color-base-blue-500) !default;
|
|
219
|
+
$cat-color-theme-info-text: var(--cat-success-text, $cat-color-base-blue-400) !default;
|
|
220
|
+
$cat-color-theme-info-fill-active: var(--cat-success-fill-active, $cat-color-base-white) !default;
|
|
221
|
+
$cat-color-theme-info-fill-hover: var(--cat-success-fill-hover, $cat-color-base-white) !default;
|
|
222
|
+
$cat-color-theme-info-fill: var(--cat-success-fill, $cat-color-base-white) !default;
|
|
223
|
+
$cat-color-theme-info-bg-active: var(--cat-success-bg-active, $cat-color-base-blue-600) !default;
|
|
224
|
+
$cat-color-theme-info-bg-hover: var(--cat-success-bg-hover, $cat-color-base-blue-500) !default;
|
|
225
|
+
$cat-color-theme-info-bg: var(--cat-success-bg, $cat-color-base-blue-400) !default;
|
|
210
226
|
$cat-color-theme-secondary-inverted-text-active: $cat-color-base-white !default;
|
|
211
227
|
$cat-color-theme-secondary-inverted-text-hover: $cat-color-base-white !default;
|
|
212
228
|
$cat-color-theme-secondary-inverted-text: $cat-color-base-white !default;
|
|
@@ -327,6 +343,15 @@ $tokens: (
|
|
|
327
343
|
'500': $cat-color-base-brand-inverted-500,
|
|
328
344
|
'600': $cat-color-base-brand-inverted-600
|
|
329
345
|
),
|
|
346
|
+
'blue': (
|
|
347
|
+
'100': $cat-color-base-blue-100,
|
|
348
|
+
'200': $cat-color-base-blue-200,
|
|
349
|
+
'300': $cat-color-base-blue-300,
|
|
350
|
+
'400': $cat-color-base-blue-400,
|
|
351
|
+
'500': $cat-color-base-blue-500,
|
|
352
|
+
'600': $cat-color-base-blue-600,
|
|
353
|
+
'700': $cat-color-base-blue-700
|
|
354
|
+
),
|
|
330
355
|
'green': (
|
|
331
356
|
'100': $cat-color-base-green-100,
|
|
332
357
|
'200': $cat-color-base-green-200,
|
|
@@ -400,6 +425,17 @@ $tokens: (
|
|
|
400
425
|
'textHover': $cat-color-theme-secondary-inverted-text-hover,
|
|
401
426
|
'textActive': $cat-color-theme-secondary-inverted-text-active
|
|
402
427
|
),
|
|
428
|
+
'info': (
|
|
429
|
+
'bg': $cat-color-theme-info-bg,
|
|
430
|
+
'bgHover': $cat-color-theme-info-bg-hover,
|
|
431
|
+
'bgActive': $cat-color-theme-info-bg-active,
|
|
432
|
+
'fill': $cat-color-theme-info-fill,
|
|
433
|
+
'fillHover': $cat-color-theme-info-fill-hover,
|
|
434
|
+
'fillActive': $cat-color-theme-info-fill-active,
|
|
435
|
+
'text': $cat-color-theme-info-text,
|
|
436
|
+
'textHover': $cat-color-theme-info-text-hover,
|
|
437
|
+
'textActive': $cat-color-theme-info-text-active
|
|
438
|
+
),
|
|
403
439
|
'success': (
|
|
404
440
|
'bg': $cat-color-theme-success-bg,
|
|
405
441
|
'bgHover': $cat-color-theme-success-bg-hover,
|