@alfalab/core-components-vars 5.1.1 → 5.4.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 (11) hide show
  1. package/colors-addons.css +43 -0
  2. package/colors-bluetint.css +6 -0
  3. package/colors-indigo.css +4 -0
  4. package/colors-transparent.css +4 -0
  5. package/cssm/colors-addons.css +43 -0
  6. package/cssm/colors-bluetint.css +6 -0
  7. package/cssm/colors-indigo.css +4 -0
  8. package/cssm/colors-transparent.css +4 -0
  9. package/cssm/index.css +51 -0
  10. package/package.json +1 -1
  11. package/typography.css +100 -0
package/colors-addons.css CHANGED
@@ -1,27 +1,70 @@
1
1
  :root {
2
+ --color-static-corpbg-neutral: #bdc0c2;
3
+ --color-static-corpbg-primary: #212a33;
4
+ --color-static-corpbg-secondary: #384048;
5
+ --color-static-corpbg-tertiary: #7a7f85;
2
6
  --color-static-graphic-amethyst: #a489aa;
3
7
  --color-static-graphic-blackberry: #bfafc6;
8
+ --color-static-graphic-blue-chill: #0f9c8c;
4
9
  --color-static-graphic-blue-maya: #7eb3ff;
5
10
  --color-static-graphic-blue-moody: #7879cf;
6
11
  --color-static-graphic-blue-steel: #4f84ba;
7
12
  --color-static-graphic-botticelli: #cee5e5;
13
+ --color-static-graphic-boulder: #7a7a7a;
14
+ --color-static-graphic-brink-pink: #fc617c;
15
+ --color-static-graphic-burnt-sienna: #eb7a58;
8
16
  --color-static-graphic-carrot: #e8bba3;
17
+ --color-static-graphic-chatelle: #bfafc6;
18
+ --color-static-graphic-chathams-blue: #155966;
9
19
  --color-static-graphic-chick: #f2db9e;
20
+ --color-static-graphic-crete: #847128;
21
+ --color-static-graphic-curious-blue: #2381db;
22
+ --color-static-graphic-curious-blue-light: #3b99d9;
23
+ --color-static-graphic-eastern-blue: #269cb3;
24
+ --color-static-graphic-french-lilac: #d3baed;
25
+ --color-static-graphic-fuel-yellow: #f29d32;
26
+ --color-static-graphic-fun-blue: #1d6ab5;
10
27
  --color-static-graphic-gallery: #eee;
11
28
  --color-static-graphic-green-jungle: #2fc26e;
29
+ --color-static-graphic-hippie-blue: #5aa4b0;
30
+ --color-static-graphic-jaffa: #f07134;
31
+ --color-static-graphic-jaffa-light: #f18836;
32
+ --color-static-graphic-java: #15c0e0;
33
+ --color-static-graphic-jungle-green: #2ab79a;
12
34
  --color-static-graphic-lavender: #8888ad;
35
+ --color-static-graphic-mantis: #63cd4f;
36
+ --color-static-graphic-matisse: #16548f;
37
+ --color-static-graphic-milano-red: #cd1501;
38
+ --color-static-graphic-mirage: #1d2434;
39
+ --color-static-graphic-moon-raker: #e9dbf7;
40
+ --color-static-graphic-moss-green: #a6d29c;
41
+ --color-static-graphic-nevada: #626b75;
13
42
  --color-static-graphic-olive: #bfd3c9;
43
+ --color-static-graphic-olivine: #87b965;
14
44
  --color-static-graphic-peach: #fcc99b;
15
45
  --color-static-graphic-persimmon: #ff5c5c;
46
+ --color-static-graphic-pewter: #96a5a5;
47
+ --color-static-graphic-pickled-bluewood: #2d3f50;
48
+ --color-static-graphic-porsche: #e7b965;
16
49
  --color-static-graphic-raspberry: #dfb2bb;
50
+ --color-static-graphic-red-damask: #da713c;
51
+ --color-static-graphic-saffron: #f0c330;
17
52
  --color-static-graphic-salomie: #fee984;
18
53
  --color-static-graphic-sand: #f6bf65;
54
+ --color-static-graphic-sandy-brown: #f38f6f;
19
55
  --color-static-graphic-seawater: #aecfd9;
56
+ --color-static-graphic-serenade: #fff0e3;
20
57
  --color-static-graphic-sky: #a6c0db;
21
58
  --color-static-graphic-soft-peach: #f3eaeb;
22
59
  --color-static-graphic-solitude: #e8f2fe;
23
60
  --color-static-graphic-strawberry: #f8b6a9;
24
61
  --color-static-graphic-sundust: #d9d6ce;
62
+ --color-static-graphic-turkish-rose: #b56a6b;
63
+ --color-static-graphic-turquoise-blue: #6bd3e6;
64
+ --color-static-graphic-valencia: #d8463b;
65
+ --color-static-graphic-waikawa-gray: #5b6d9c;
66
+ --color-static-graphic-whisper: #f2eff6;
67
+ --color-static-graphic-zanah: #e1f0de;
25
68
  --color-static-local-light-blue: #f5f7f9;
26
69
  --color-static-overlay-black-high: rgba(0, 0, 0, 0.32);
27
70
  --color-static-overlay-black-low: rgba(0, 0, 0, 0.16);
package/colors-bluetint.css CHANGED
@@ -32,6 +32,7 @@
32
32
  --color-dark-graphic-secondary: #8d8d93;
33
33
  --color-dark-graphic-tertiary: #464649;
34
34
  --color-dark-specialbg-nulled: rgba(255, 255, 255, 0);
35
+ --color-dark-specialbg-overlay-fallback: #070707;
35
36
  --color-dark-specialbg-primary-grouped: #202022;
36
37
  --color-dark-specialbg-secondary-grouped: #2c2c2e;
37
38
  --color-dark-specialbg-tertiary-grouped: #3a3a3c;
@@ -85,6 +86,7 @@
85
86
  --color-light-graphic-secondary: #8a8a8e;
86
87
  --color-light-graphic-tertiary: #c5c5c7;
87
88
  --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
89
+ --color-light-specialbg-overlay-fallback: #5c5c5c;
88
90
  --color-light-specialbg-primary-grouped: #f3f4f5;
89
91
  --color-light-specialbg-secondary-grouped: #fff;
90
92
  --color-light-specialbg-tertiary-grouped: #f3f4f5;
@@ -151,6 +153,7 @@
151
153
  --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
152
154
  --color-dark-border-tertiary-inverted-alpha-30: rgba(243, 244, 245, 0.3);
153
155
  --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
156
+ --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
154
157
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
155
158
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
156
159
  --color-dark-graphic-negative-shade-30: rgb(152, 20, 8);
@@ -161,6 +164,7 @@
161
164
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
162
165
  --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
163
166
  --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
167
+ --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
164
168
  --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
165
169
  --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
166
170
  --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
@@ -210,6 +214,7 @@
210
214
  --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
211
215
  --color-light-border-tertiary-inverted-alpha-30: rgba(28, 28, 30, 0.3);
212
216
  --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
217
+ --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
213
218
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
214
219
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
215
220
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
@@ -220,6 +225,7 @@
220
225
  --color-light-graphic-primary-alpha-30: rgba(0, 0, 0, 0.3);
221
226
  --color-light-graphic-primary-alpha-40: rgba(0, 0, 0, 0.4);
222
227
  --color-light-graphic-primary-alpha-50: rgba(0, 0, 0, 0.5);
228
+ --color-light-graphic-primary-tint-15: rgb(38, 38, 38);
223
229
  --color-light-graphic-primary-tint-30: rgb(77, 77, 77);
224
230
  --color-light-graphic-primary-tint-50: rgb(128, 128, 128);
225
231
  --color-light-graphic-primary-shade-10: rgb(0, 0, 0);
package/colors-indigo.css CHANGED
@@ -161,6 +161,7 @@
161
161
  --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
162
162
  --color-dark-border-tertiary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
163
163
  --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
164
+ --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
164
165
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
165
166
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
166
167
  --color-dark-graphic-negative-shade-30: rgb(169, 56, 48);
@@ -171,6 +172,7 @@
171
172
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
172
173
  --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
173
174
  --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
175
+ --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
174
176
  --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
175
177
  --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
176
178
  --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
@@ -224,6 +226,7 @@
224
226
  --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
225
227
  --color-light-border-tertiary-inverted-alpha-30: rgba(109, 121, 134, 0.3);
226
228
  --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
229
+ --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
227
230
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
228
231
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
229
232
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
@@ -234,6 +237,7 @@
234
237
  --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
235
238
  --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
236
239
  --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
240
+ --color-light-graphic-primary-tint-15: rgb(48, 65, 83);
237
241
  --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
238
242
  --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
239
243
  --color-light-graphic-primary-shade-10: rgb(10, 28, 48);
package/colors-transparent.css CHANGED
@@ -7,6 +7,8 @@
7
7
  --color-dynamic-quinary-light: rgba(255, 255, 255, 0.16);
8
8
  --color-dynamic-secondary-dark: rgba(0, 0, 0, 0.64);
9
9
  --color-dynamic-secondary-light: rgba(255, 255, 255, 0.64);
10
+ --color-dynamic-senary-dark: rgba(0, 0, 0, 0.12);
11
+ --color-dynamic-senary-light: rgba(255, 255, 255, 0.12);
10
12
  --color-dynamic-tertiary-dark: rgba(0, 0, 0, 0.48);
11
13
  --color-dynamic-tertiary-light: rgba(255, 255, 255, 0.48);
12
14
  --color-static-primary-dark: rgba(0, 0, 0, 0.8);
@@ -17,6 +19,8 @@
17
19
  --color-static-quinary-light: rgba(255, 255, 255, 0.16);
18
20
  --color-static-secondary-dark: rgba(0, 0, 0, 0.64);
19
21
  --color-static-secondary-light: rgba(255, 255, 255, 0.64);
22
+ --color-static-senary-dark: rgba(0, 0, 0, 0.12);
23
+ --color-static-senary-light: rgba(255, 255, 255, 0.12);
20
24
  --color-static-tertiary-dark: rgba(0, 0, 0, 0.48);
21
25
  --color-static-tertiary-light: rgba(255, 255, 255, 0.48);
22
26
  }
package/cssm/colors-addons.css CHANGED
@@ -1,27 +1,70 @@
1
1
  :root {
2
+ --color-static-corpbg-neutral: #bdc0c2;
3
+ --color-static-corpbg-primary: #212a33;
4
+ --color-static-corpbg-secondary: #384048;
5
+ --color-static-corpbg-tertiary: #7a7f85;
2
6
  --color-static-graphic-amethyst: #a489aa;
3
7
  --color-static-graphic-blackberry: #bfafc6;
8
+ --color-static-graphic-blue-chill: #0f9c8c;
4
9
  --color-static-graphic-blue-maya: #7eb3ff;
5
10
  --color-static-graphic-blue-moody: #7879cf;
6
11
  --color-static-graphic-blue-steel: #4f84ba;
7
12
  --color-static-graphic-botticelli: #cee5e5;
13
+ --color-static-graphic-boulder: #7a7a7a;
14
+ --color-static-graphic-brink-pink: #fc617c;
15
+ --color-static-graphic-burnt-sienna: #eb7a58;
8
16
  --color-static-graphic-carrot: #e8bba3;
17
+ --color-static-graphic-chatelle: #bfafc6;
18
+ --color-static-graphic-chathams-blue: #155966;
9
19
  --color-static-graphic-chick: #f2db9e;
20
+ --color-static-graphic-crete: #847128;
21
+ --color-static-graphic-curious-blue: #2381db;
22
+ --color-static-graphic-curious-blue-light: #3b99d9;
23
+ --color-static-graphic-eastern-blue: #269cb3;
24
+ --color-static-graphic-french-lilac: #d3baed;
25
+ --color-static-graphic-fuel-yellow: #f29d32;
26
+ --color-static-graphic-fun-blue: #1d6ab5;
10
27
  --color-static-graphic-gallery: #eee;
11
28
  --color-static-graphic-green-jungle: #2fc26e;
29
+ --color-static-graphic-hippie-blue: #5aa4b0;
30
+ --color-static-graphic-jaffa: #f07134;
31
+ --color-static-graphic-jaffa-light: #f18836;
32
+ --color-static-graphic-java: #15c0e0;
33
+ --color-static-graphic-jungle-green: #2ab79a;
12
34
  --color-static-graphic-lavender: #8888ad;
35
+ --color-static-graphic-mantis: #63cd4f;
36
+ --color-static-graphic-matisse: #16548f;
37
+ --color-static-graphic-milano-red: #cd1501;
38
+ --color-static-graphic-mirage: #1d2434;
39
+ --color-static-graphic-moon-raker: #e9dbf7;
40
+ --color-static-graphic-moss-green: #a6d29c;
41
+ --color-static-graphic-nevada: #626b75;
13
42
  --color-static-graphic-olive: #bfd3c9;
43
+ --color-static-graphic-olivine: #87b965;
14
44
  --color-static-graphic-peach: #fcc99b;
15
45
  --color-static-graphic-persimmon: #ff5c5c;
46
+ --color-static-graphic-pewter: #96a5a5;
47
+ --color-static-graphic-pickled-bluewood: #2d3f50;
48
+ --color-static-graphic-porsche: #e7b965;
16
49
  --color-static-graphic-raspberry: #dfb2bb;
50
+ --color-static-graphic-red-damask: #da713c;
51
+ --color-static-graphic-saffron: #f0c330;
17
52
  --color-static-graphic-salomie: #fee984;
18
53
  --color-static-graphic-sand: #f6bf65;
54
+ --color-static-graphic-sandy-brown: #f38f6f;
19
55
  --color-static-graphic-seawater: #aecfd9;
56
+ --color-static-graphic-serenade: #fff0e3;
20
57
  --color-static-graphic-sky: #a6c0db;
21
58
  --color-static-graphic-soft-peach: #f3eaeb;
22
59
  --color-static-graphic-solitude: #e8f2fe;
23
60
  --color-static-graphic-strawberry: #f8b6a9;
24
61
  --color-static-graphic-sundust: #d9d6ce;
62
+ --color-static-graphic-turkish-rose: #b56a6b;
63
+ --color-static-graphic-turquoise-blue: #6bd3e6;
64
+ --color-static-graphic-valencia: #d8463b;
65
+ --color-static-graphic-waikawa-gray: #5b6d9c;
66
+ --color-static-graphic-whisper: #f2eff6;
67
+ --color-static-graphic-zanah: #e1f0de;
25
68
  --color-static-local-light-blue: #f5f7f9;
26
69
  --color-static-overlay-black-high: rgba(0, 0, 0, 0.32);
27
70
  --color-static-overlay-black-low: rgba(0, 0, 0, 0.16);
package/cssm/colors-bluetint.css CHANGED
@@ -32,6 +32,7 @@
32
32
  --color-dark-graphic-secondary: #8d8d93;
33
33
  --color-dark-graphic-tertiary: #464649;
34
34
  --color-dark-specialbg-nulled: rgba(255, 255, 255, 0);
35
+ --color-dark-specialbg-overlay-fallback: #070707;
35
36
  --color-dark-specialbg-primary-grouped: #202022;
36
37
  --color-dark-specialbg-secondary-grouped: #2c2c2e;
37
38
  --color-dark-specialbg-tertiary-grouped: #3a3a3c;
@@ -85,6 +86,7 @@
85
86
  --color-light-graphic-secondary: #8a8a8e;
86
87
  --color-light-graphic-tertiary: #c5c5c7;
87
88
  --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
89
+ --color-light-specialbg-overlay-fallback: #5c5c5c;
88
90
  --color-light-specialbg-primary-grouped: #f3f4f5;
89
91
  --color-light-specialbg-secondary-grouped: #fff;
90
92
  --color-light-specialbg-tertiary-grouped: #f3f4f5;
@@ -151,6 +153,7 @@
151
153
  --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
152
154
  --color-dark-border-tertiary-inverted-alpha-30: rgba(243, 244, 245, 0.3);
153
155
  --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
156
+ --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
154
157
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
155
158
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
156
159
  --color-dark-graphic-negative-shade-30: rgb(152, 20, 8);
@@ -161,6 +164,7 @@
161
164
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
162
165
  --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
163
166
  --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
167
+ --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
164
168
  --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
165
169
  --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
166
170
  --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
@@ -210,6 +214,7 @@
210
214
  --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
211
215
  --color-light-border-tertiary-inverted-alpha-30: rgba(28, 28, 30, 0.3);
212
216
  --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
217
+ --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
213
218
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
214
219
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
215
220
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
@@ -220,6 +225,7 @@
220
225
  --color-light-graphic-primary-alpha-30: rgba(0, 0, 0, 0.3);
221
226
  --color-light-graphic-primary-alpha-40: rgba(0, 0, 0, 0.4);
222
227
  --color-light-graphic-primary-alpha-50: rgba(0, 0, 0, 0.5);
228
+ --color-light-graphic-primary-tint-15: rgb(38, 38, 38);
223
229
  --color-light-graphic-primary-tint-30: rgb(77, 77, 77);
224
230
  --color-light-graphic-primary-tint-50: rgb(128, 128, 128);
225
231
  --color-light-graphic-primary-shade-10: rgb(0, 0, 0);
package/cssm/colors-indigo.css CHANGED
@@ -161,6 +161,7 @@
161
161
  --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
162
162
  --color-dark-border-tertiary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
163
163
  --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
164
+ --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
164
165
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
165
166
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
166
167
  --color-dark-graphic-negative-shade-30: rgb(169, 56, 48);
@@ -171,6 +172,7 @@
171
172
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
172
173
  --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
173
174
  --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
175
+ --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
174
176
  --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
175
177
  --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
176
178
  --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
@@ -224,6 +226,7 @@
224
226
  --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
225
227
  --color-light-border-tertiary-inverted-alpha-30: rgba(109, 121, 134, 0.3);
226
228
  --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
229
+ --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
227
230
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
228
231
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
229
232
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
@@ -234,6 +237,7 @@
234
237
  --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
235
238
  --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
236
239
  --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
240
+ --color-light-graphic-primary-tint-15: rgb(48, 65, 83);
237
241
  --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
238
242
  --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
239
243
  --color-light-graphic-primary-shade-10: rgb(10, 28, 48);
package/cssm/colors-transparent.css CHANGED
@@ -7,6 +7,8 @@
7
7
  --color-dynamic-quinary-light: rgba(255, 255, 255, 0.16);
8
8
  --color-dynamic-secondary-dark: rgba(0, 0, 0, 0.64);
9
9
  --color-dynamic-secondary-light: rgba(255, 255, 255, 0.64);
10
+ --color-dynamic-senary-dark: rgba(0, 0, 0, 0.12);
11
+ --color-dynamic-senary-light: rgba(255, 255, 255, 0.12);
10
12
  --color-dynamic-tertiary-dark: rgba(0, 0, 0, 0.48);
11
13
  --color-dynamic-tertiary-light: rgba(255, 255, 255, 0.48);
12
14
  --color-static-primary-dark: rgba(0, 0, 0, 0.8);
@@ -17,6 +19,8 @@
17
19
  --color-static-quinary-light: rgba(255, 255, 255, 0.16);
18
20
  --color-static-secondary-dark: rgba(0, 0, 0, 0.64);
19
21
  --color-static-secondary-light: rgba(255, 255, 255, 0.64);
22
+ --color-static-senary-dark: rgba(0, 0, 0, 0.12);
23
+ --color-static-senary-light: rgba(255, 255, 255, 0.12);
20
24
  --color-static-tertiary-dark: rgba(0, 0, 0, 0.48);
21
25
  --color-static-tertiary-light: rgba(255, 255, 255, 0.48);
22
26
  }
package/cssm/index.css CHANGED
@@ -70,29 +70,72 @@
70
70
  --color-light-blue: #f5f7f9;
71
71
  }
72
72
  :root {
73
+ --color-static-corpbg-neutral: #bdc0c2;
74
+ --color-static-corpbg-primary: #212a33;
75
+ --color-static-corpbg-secondary: #384048;
76
+ --color-static-corpbg-tertiary: #7a7f85;
73
77
  --color-static-graphic-amethyst: #a489aa;
74
78
  --color-static-graphic-blackberry: #bfafc6;
79
+ --color-static-graphic-blue-chill: #0f9c8c;
75
80
  --color-static-graphic-blue-maya: #7eb3ff;
76
81
  --color-static-graphic-blue-moody: #7879cf;
77
82
  --color-static-graphic-blue-steel: #4f84ba;
78
83
  --color-static-graphic-botticelli: #cee5e5;
84
+ --color-static-graphic-boulder: #7a7a7a;
85
+ --color-static-graphic-brink-pink: #fc617c;
86
+ --color-static-graphic-burnt-sienna: #eb7a58;
79
87
  --color-static-graphic-carrot: #e8bba3;
88
+ --color-static-graphic-chatelle: #bfafc6;
89
+ --color-static-graphic-chathams-blue: #155966;
80
90
  --color-static-graphic-chick: #f2db9e;
91
+ --color-static-graphic-crete: #847128;
92
+ --color-static-graphic-curious-blue: #2381db;
93
+ --color-static-graphic-curious-blue-light: #3b99d9;
94
+ --color-static-graphic-eastern-blue: #269cb3;
95
+ --color-static-graphic-french-lilac: #d3baed;
96
+ --color-static-graphic-fuel-yellow: #f29d32;
97
+ --color-static-graphic-fun-blue: #1d6ab5;
81
98
  --color-static-graphic-gallery: #eee;
82
99
  --color-static-graphic-green-jungle: #2fc26e;
100
+ --color-static-graphic-hippie-blue: #5aa4b0;
101
+ --color-static-graphic-jaffa: #f07134;
102
+ --color-static-graphic-jaffa-light: #f18836;
103
+ --color-static-graphic-java: #15c0e0;
104
+ --color-static-graphic-jungle-green: #2ab79a;
83
105
  --color-static-graphic-lavender: #8888ad;
106
+ --color-static-graphic-mantis: #63cd4f;
107
+ --color-static-graphic-matisse: #16548f;
108
+ --color-static-graphic-milano-red: #cd1501;
109
+ --color-static-graphic-mirage: #1d2434;
110
+ --color-static-graphic-moon-raker: #e9dbf7;
111
+ --color-static-graphic-moss-green: #a6d29c;
112
+ --color-static-graphic-nevada: #626b75;
84
113
  --color-static-graphic-olive: #bfd3c9;
114
+ --color-static-graphic-olivine: #87b965;
85
115
  --color-static-graphic-peach: #fcc99b;
86
116
  --color-static-graphic-persimmon: #ff5c5c;
117
+ --color-static-graphic-pewter: #96a5a5;
118
+ --color-static-graphic-pickled-bluewood: #2d3f50;
119
+ --color-static-graphic-porsche: #e7b965;
87
120
  --color-static-graphic-raspberry: #dfb2bb;
121
+ --color-static-graphic-red-damask: #da713c;
122
+ --color-static-graphic-saffron: #f0c330;
88
123
  --color-static-graphic-salomie: #fee984;
89
124
  --color-static-graphic-sand: #f6bf65;
125
+ --color-static-graphic-sandy-brown: #f38f6f;
90
126
  --color-static-graphic-seawater: #aecfd9;
127
+ --color-static-graphic-serenade: #fff0e3;
91
128
  --color-static-graphic-sky: #a6c0db;
92
129
  --color-static-graphic-soft-peach: #f3eaeb;
93
130
  --color-static-graphic-solitude: #e8f2fe;
94
131
  --color-static-graphic-strawberry: #f8b6a9;
95
132
  --color-static-graphic-sundust: #d9d6ce;
133
+ --color-static-graphic-turkish-rose: #b56a6b;
134
+ --color-static-graphic-turquoise-blue: #6bd3e6;
135
+ --color-static-graphic-valencia: #d8463b;
136
+ --color-static-graphic-waikawa-gray: #5b6d9c;
137
+ --color-static-graphic-whisper: #f2eff6;
138
+ --color-static-graphic-zanah: #e1f0de;
96
139
  --color-static-local-light-blue: #f5f7f9;
97
140
  --color-static-overlay-black-high: rgba(0, 0, 0, 0.32);
98
141
  --color-static-overlay-black-low: rgba(0, 0, 0, 0.16);
@@ -287,6 +330,7 @@
287
330
  --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
288
331
  --color-dark-border-tertiary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
289
332
  --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
333
+ --color-dark-graphic-accent-shade-15: rgb(203, 42, 31);
290
334
  --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
291
335
  --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
292
336
  --color-dark-graphic-negative-shade-30: rgb(169, 56, 48);
@@ -297,6 +341,7 @@
297
341
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
298
342
  --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
299
343
  --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
344
+ --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
300
345
  --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
301
346
  --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
302
347
  --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
@@ -350,6 +395,7 @@
350
395
  --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
351
396
  --color-light-border-tertiary-inverted-alpha-30: rgba(109, 121, 134, 0.3);
352
397
  --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
398
+ --color-light-graphic-accent-tint-15: rgb(241, 80, 69);
353
399
  --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
354
400
  --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
355
401
  --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
@@ -360,6 +406,7 @@
360
406
  --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
361
407
  --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
362
408
  --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
409
+ --color-light-graphic-primary-tint-15: rgb(48, 65, 83);
363
410
  --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
364
411
  --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
365
412
  --color-light-graphic-primary-shade-10: rgb(10, 28, 48);
@@ -401,6 +448,8 @@
401
448
  --color-dynamic-quinary-light: rgba(255, 255, 255, 0.16);
402
449
  --color-dynamic-secondary-dark: rgba(0, 0, 0, 0.64);
403
450
  --color-dynamic-secondary-light: rgba(255, 255, 255, 0.64);
451
+ --color-dynamic-senary-dark: rgba(0, 0, 0, 0.12);
452
+ --color-dynamic-senary-light: rgba(255, 255, 255, 0.12);
404
453
  --color-dynamic-tertiary-dark: rgba(0, 0, 0, 0.48);
405
454
  --color-dynamic-tertiary-light: rgba(255, 255, 255, 0.48);
406
455
  --color-static-primary-dark: rgba(0, 0, 0, 0.8);
@@ -411,6 +460,8 @@
411
460
  --color-static-quinary-light: rgba(255, 255, 255, 0.16);
412
461
  --color-static-secondary-dark: rgba(0, 0, 0, 0.64);
413
462
  --color-static-secondary-light: rgba(255, 255, 255, 0.64);
463
+ --color-static-senary-dark: rgba(0, 0, 0, 0.12);
464
+ --color-static-senary-light: rgba(255, 255, 255, 0.12);
414
465
  --color-static-tertiary-dark: rgba(0, 0, 0, 0.48);
415
466
  --color-static-tertiary-light: rgba(255, 255, 255, 0.48);
416
467
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-vars",
3
- "version": "5.1.1",
3
+ "version": "5.4.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
package/typography.css CHANGED
@@ -341,6 +341,106 @@
341
341
  font-family: var(--font-family-styrene);
342
342
  }
343
343
 
344
+ @define-mixin headline-mobile_xlarge {
345
+ font-size: 34px;
346
+ line-height: 40px;
347
+ font-weight: 500;
348
+ font-feature-settings: 'ss01';
349
+ font-family: var(--font-family-styrene);
350
+ }
351
+
352
+ @define-mixin headline-mobile_large {
353
+ font-size: 30px;
354
+ line-height: 36px;
355
+ font-weight: 500;
356
+ font-feature-settings: 'ss01';
357
+ font-family: var(--font-family-styrene);
358
+ }
359
+
360
+ @define-mixin headline-mobile_medium {
361
+ font-size: 26px;
362
+ line-height: 32px;
363
+ font-weight: 500;
364
+ font-feature-settings: 'ss01';
365
+ font-family: var(--font-family-styrene);
366
+ }
367
+
368
+ @define-mixin headline-mobile_small {
369
+ font-size: 20px;
370
+ line-height: 28px;
371
+ font-weight: 500;
372
+ font-feature-settings: 'ss01';
373
+ font-family: var(--font-family-styrene);
374
+ }
375
+
376
+ @define-mixin headline-mobile_xsmall {
377
+ font-size: 16px;
378
+ line-height: 24px;
379
+ font-weight: 500;
380
+ font-feature-settings: 'ss01';
381
+ font-family: var(--font-family-styrene);
382
+ }
383
+
384
+ @define-mixin headline-system-mobile_xlarge {
385
+ font-size: 34px;
386
+ line-height: 40px;
387
+ font-weight: 600;
388
+ }
389
+
390
+ @define-mixin headline-system-mobile_large {
391
+ font-size: 30px;
392
+ line-height: 36px;
393
+ font-weight: 600;
394
+ }
395
+
396
+ @define-mixin headline-system-mobile_medium {
397
+ font-size: 26px;
398
+ line-height: 32px;
399
+ font-weight: 600;
400
+ }
401
+
402
+ @define-mixin headline-system-mobile_small {
403
+ font-size: 20px;
404
+ line-height: 28px;
405
+ font-weight: 600;
406
+ }
407
+
408
+ @define-mixin headline-system-mobile_xsmall {
409
+ font-size: 16px;
410
+ line-height: 24px;
411
+ font-weight: 600;
412
+ }
413
+
414
+ @define-mixin promo-system_xlarge {
415
+ font-size: 48px;
416
+ line-height: 52px;
417
+ font-weight: 400;
418
+ }
419
+
420
+ @define-mixin promo-system_large {
421
+ font-size: 40px;
422
+ line-height: 48px;
423
+ font-weight: 400;
424
+ }
425
+
426
+ @define-mixin promo-system_medium {
427
+ font-size: 30px;
428
+ line-height: 36px;
429
+ font-weight: 400;
430
+ }
431
+
432
+ @define-mixin promo-system_small {
433
+ font-size: 22px;
434
+ line-height: 26px;
435
+ font-weight: 400;
436
+ }
437
+
438
+ @define-mixin promo-system_xsmall {
439
+ font-size: 18px;
440
+ line-height: 22px;
441
+ font-weight: 400;
442
+ }
443
+
344
444
  @define-mixin legacy_primary_small {
345
445
  font-size: 14px;
346
446
  line-height: 18px;