@alfalab/core-components-vars 6.5.0 → 7.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 (9) hide show
  1. package/bundle/site.css +5 -5
  2. package/colors-bluetint.css +36 -44
  3. package/colors-indigo.css +36 -44
  4. package/cssm/bundle/site.css +608 -0
  5. package/cssm/colors-bluetint.css +36 -44
  6. package/cssm/colors-indigo.css +36 -44
  7. package/cssm/index.css +36 -44
  8. package/package.json +1 -1
  9. package/typography.css +3 -147
package/cssm/colors-bluetint.css CHANGED
@@ -45,26 +45,24 @@
45
45
  --color-dark-specialbg-overlay-fallback: #070707;
46
46
  --color-dark-specialbg-primary-grouped: #202022;
47
47
  --color-dark-specialbg-secondary-grouped: #2c2c2e;
48
+ --color-dark-specialbg-secondary-transparent: rgba(255, 255, 255, 0.06);
49
+ --color-dark-specialbg-secondary-transparent-inverted: rgba(32, 32, 34, 0.05);
48
50
  --color-dark-specialbg-tertiary-grouped: #3a3a3c;
51
+ --color-dark-specialbg-tertiary-transparent: rgba(255, 255, 255, 0.11);
52
+ --color-dark-specialbg-tertiary-transparent-inverted: rgba(32, 32, 34, 0.1);
49
53
  --color-dark-text-accent: #ef3124;
50
54
  --color-dark-text-attention: #cb830f;
51
- --color-dark-text-disabled: #2a2a2c;
52
- --color-dark-text-disabled-inverted: #dcdcdd;
53
- --color-dark-text-disabled-inverted-transparent: rgba(60, 60, 67, 0.18);
54
- --color-dark-text-disabled-transparent: rgba(235, 235, 245, 0.18);
55
+ --color-dark-text-disabled: rgba(235, 235, 245, 0.18);
56
+ --color-dark-text-disabled-inverted: rgba(60, 60, 67, 0.18);
55
57
  --color-dark-text-link: #0072ef;
56
58
  --color-dark-text-negative: #f15045;
57
59
  --color-dark-text-positive: #13a463;
58
60
  --color-dark-text-primary: #fff;
59
61
  --color-dark-text-primary-inverted: #000;
60
- --color-dark-text-secondary: #8d8d93;
61
- --color-dark-text-secondary-inverted: #8a8a8e;
62
- --color-dark-text-secondary-inverted-transparent: rgba(60, 60, 67, 0.6);
63
- --color-dark-text-secondary-transparent: rgba(235, 235, 245, 0.6);
64
- --color-dark-text-tertiary: #464649;
65
- --color-dark-text-tertiary-inverted: #c5c5c7;
66
- --color-dark-text-tertiary-inverted-transparent: rgba(60, 60, 67, 0.3);
67
- --color-dark-text-tertiary-transparent: rgba(235, 235, 245, 0.3);
62
+ --color-dark-text-secondary: rgba(235, 235, 245, 0.6);
63
+ --color-dark-text-secondary-inverted: rgba(60, 60, 67, 0.6);
64
+ --color-dark-text-tertiary: rgba(235, 235, 245, 0.3);
65
+ --color-dark-text-tertiary-inverted: rgba(60, 60, 67, 0.3);
68
66
  --color-light-bg-accent: #ef3124;
69
67
  --color-light-bg-attention-muted: #f7ebd9;
70
68
  --color-light-bg-info: #d6e8fc;
@@ -111,26 +109,24 @@
111
109
  --color-light-specialbg-overlay-fallback: #5c5c5c;
112
110
  --color-light-specialbg-primary-grouped: #f3f4f5;
113
111
  --color-light-specialbg-secondary-grouped: #fff;
112
+ --color-light-specialbg-secondary-transparent: rgba(32, 32, 34, 0.05);
113
+ --color-light-specialbg-secondary-transparent-inverted: rgba(255, 255, 255, 0.06);
114
114
  --color-light-specialbg-tertiary-grouped: #f3f4f5;
115
+ --color-light-specialbg-tertiary-transparent: rgba(32, 32, 34, 0.1);
116
+ --color-light-specialbg-tertiary-transparent-inverted: rgba(255, 255, 255, 0.11);
115
117
  --color-light-text-accent: #ef3124;
116
118
  --color-light-text-attention: #cb830f;
117
- --color-light-text-disabled: #dcdcdd;
118
- --color-light-text-disabled-inverted: #2a2a2c;
119
- --color-light-text-disabled-inverted-transparent: rgba(235, 235, 245, 0.18);
120
- --color-light-text-disabled-transparent: rgba(60, 60, 67, 0.18);
119
+ --color-light-text-disabled: rgba(60, 60, 67, 0.18);
120
+ --color-light-text-disabled-inverted: rgba(235, 235, 245, 0.18);
121
121
  --color-light-text-link: #0072ef;
122
122
  --color-light-text-negative: #d91d0b;
123
123
  --color-light-text-positive: #13a463;
124
124
  --color-light-text-primary: #000;
125
125
  --color-light-text-primary-inverted: #fff;
126
- --color-light-text-secondary: #8a8a8e;
127
- --color-light-text-secondary-inverted: #8d8d93;
128
- --color-light-text-secondary-inverted-transparent: rgba(235, 235, 245, 0.6);
129
- --color-light-text-secondary-transparent: rgba(60, 60, 67, 0.6);
130
- --color-light-text-tertiary: #c5c5c7;
131
- --color-light-text-tertiary-inverted: #464649;
132
- --color-light-text-tertiary-inverted-transparent: rgba(235, 235, 245, 0.3);
133
- --color-light-text-tertiary-transparent: rgba(60, 60, 67, 0.3);
126
+ --color-light-text-secondary: rgba(60, 60, 67, 0.6);
127
+ --color-light-text-secondary-inverted: rgba(235, 235, 245, 0.6);
128
+ --color-light-text-tertiary: rgba(60, 60, 67, 0.3);
129
+ --color-light-text-tertiary-inverted: rgba(235, 235, 245, 0.3);
134
130
  --color-static-bg-accent: #ef3124;
135
131
  --color-static-bg-primary-dark: #121212;
136
132
  --color-static-bg-primary-light: #fff;
@@ -147,14 +143,10 @@
147
143
  --color-static-text-accent: #ef3124;
148
144
  --color-static-text-primary-dark: #000;
149
145
  --color-static-text-primary-light: #fff;
150
- --color-static-text-secondary-dark: #8a8a8e;
151
- --color-static-text-secondary-dark-transparent: rgba(60, 60, 67, 0.6);
152
- --color-static-text-secondary-light: #8d8d93;
153
- --color-static-text-secondary-light-transparent: rgba(235, 235, 245, 0.6);
154
- --color-static-text-tertiary-dark: #c5c5c7;
155
- --color-static-text-tertiary-dark-transparent: rgba(60, 60, 67, 0.3);
156
- --color-static-text-tertiary-light: #464649;
157
- --color-static-text-tertiary-light-transparent: rgba(235, 235, 245, 0.3);
146
+ --color-static-text-secondary-dark: rgba(60, 60, 67, 0.6);
147
+ --color-static-text-secondary-light: rgba(235, 235, 245, 0.6);
148
+ --color-static-text-tertiary-dark: rgba(60, 60, 67, 0.3);
149
+ --color-static-text-tertiary-light: rgba(235, 235, 245, 0.3);
158
150
  --color-dark-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
159
151
  --color-dark-bg-accent-shade-15: rgb(203, 42, 31);
160
152
  --color-dark-bg-accent-shade-20: rgb(191, 39, 29);
@@ -288,12 +280,12 @@
288
280
  --color-dark-text-primary-inverted-tint-15: rgb(38, 38, 38);
289
281
  --color-dark-text-primary-inverted-tint-30: rgb(77, 77, 77);
290
282
  --color-dark-text-primary-inverted-tint-50: rgb(128, 128, 128);
291
- --color-dark-text-secondary-shade-20: rgb(113, 113, 118);
292
- --color-dark-text-secondary-shade-30: rgb(99, 99, 103);
293
- --color-dark-text-secondary-tint-20: rgb(164, 164, 169);
294
- --color-dark-text-secondary-tint-40: rgb(187, 187, 190);
295
- --color-dark-text-secondary-inverted-shade-20: rgb(110, 110, 114);
296
- --color-dark-text-secondary-inverted-shade-30: rgb(97, 97, 99);
283
+ --color-dark-text-secondary-shade-20: rgba(188, 188, 196, 0.68);
284
+ --color-dark-text-secondary-shade-30: rgba(164, 164, 172, 0.72);
285
+ --color-dark-text-secondary-tint-20: rgba(239, 239, 247, 0.68);
286
+ --color-dark-text-secondary-tint-40: rgba(243, 243, 249, 0.76);
287
+ --color-dark-text-secondary-inverted-shade-20: rgba(48, 48, 54, 0.68);
288
+ --color-dark-text-secondary-inverted-shade-30: rgba(42, 42, 47, 0.72);
297
289
  --color-light-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
298
290
  --color-light-bg-accent-tint-15: rgb(241, 80, 69);
299
291
  --color-light-bg-accent-tint-20: rgb(242, 90, 80);
@@ -427,12 +419,12 @@
427
419
  --color-light-text-primary-inverted-shade-15: rgb(217, 217, 217);
428
420
  --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
429
421
  --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
430
- --color-light-text-secondary-tint-20: rgb(161, 161, 165);
431
- --color-light-text-secondary-tint-30: rgb(173, 173, 176);
432
- --color-light-text-secondary-shade-20: rgb(110, 110, 114);
433
- --color-light-text-secondary-shade-40: rgb(83, 83, 85);
434
- --color-light-text-secondary-inverted-tint-20: rgb(164, 164, 169);
435
- --color-light-text-secondary-inverted-tint-30: rgb(175, 175, 179);
422
+ --color-light-text-secondary-tint-20: rgba(99, 99, 105, 0.68);
423
+ --color-light-text-secondary-tint-30: rgba(119, 119, 123, 0.72);
424
+ --color-light-text-secondary-shade-20: rgba(48, 48, 54, 0.68);
425
+ --color-light-text-secondary-shade-40: rgba(36, 36, 40, 0.76);
426
+ --color-light-text-secondary-inverted-tint-20: rgba(239, 239, 247, 0.68);
427
+ --color-light-text-secondary-inverted-tint-30: rgba(241, 241, 248, 0.72);
436
428
  --color-static-bg-primary-dark-alpha-10: rgba(18, 18, 18, 0.1);
437
429
  --color-static-bg-primary-dark-alpha-20: rgba(18, 18, 18, 0.2);
438
430
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
package/cssm/colors-indigo.css CHANGED
@@ -45,26 +45,24 @@
45
45
  --color-dark-specialbg-overlay-fallback: #070707;
46
46
  --color-dark-specialbg-primary-grouped: #0b1f35;
47
47
  --color-dark-specialbg-secondary-grouped: #233549;
48
+ --color-dark-specialbg-secondary-transparent: rgba(255, 255, 255, 0.1);
49
+ --color-dark-specialbg-secondary-transparent-inverted: rgba(11, 31, 53, 0.05);
48
50
  --color-dark-specialbg-tertiary-grouped: #3c4c5d;
51
+ --color-dark-specialbg-tertiary-transparent: rgba(255, 255, 255, 0.2);
52
+ --color-dark-specialbg-tertiary-transparent-inverted: rgba(11, 31, 53, 0.1);
49
53
  --color-dark-text-accent: #ef3124;
50
54
  --color-dark-text-attention: #de6a00;
51
- --color-dark-text-disabled: #485767;
52
- --color-dark-text-disabled-inverted: #dbdee1;
53
- --color-dark-text-disabled-inverted-transparent: rgba(11, 31, 53, 0.15);
54
- --color-dark-text-disabled-transparent: rgba(255, 255, 255, 0.25);
55
+ --color-dark-text-disabled: rgba(255, 255, 255, 0.25);
56
+ --color-dark-text-disabled-inverted: rgba(11, 31, 53, 0.15);
55
57
  --color-dark-text-link: #007aff;
56
58
  --color-dark-text-negative: #d91d0b;
57
59
  --color-dark-text-positive: #13a463;
58
60
  --color-dark-text-primary: #fff;
59
61
  --color-dark-text-primary-inverted: #0b1f35;
60
- --color-dark-text-secondary: #b6bcc3;
61
- --color-dark-text-secondary-inverted: #546272;
62
- --color-dark-text-secondary-inverted-transparent: rgba(11, 31, 53, 0.7);
63
- --color-dark-text-secondary-transparent: rgba(255, 255, 255, 0.7);
64
- --color-dark-text-tertiary: #6d7986;
65
- --color-dark-text-tertiary-inverted: #b6bcc3;
66
- --color-dark-text-tertiary-inverted-transparent: rgba(11, 31, 53, 0.3);
67
- --color-dark-text-tertiary-transparent: rgba(255, 255, 255, 0.4);
62
+ --color-dark-text-secondary: rgba(255, 255, 255, 0.7);
63
+ --color-dark-text-secondary-inverted: rgba(11, 31, 53, 0.7);
64
+ --color-dark-text-tertiary: rgba(255, 255, 255, 0.4);
65
+ --color-dark-text-tertiary-inverted: rgba(11, 31, 53, 0.3);
68
66
  --color-light-bg-accent: #ef3124;
69
67
  --color-light-bg-attention-muted: #fff3e0;
70
68
  --color-light-bg-info: #d6e8fc;
@@ -111,26 +109,24 @@
111
109
  --color-light-specialbg-overlay-fallback: #5c5c5c;
112
110
  --color-light-specialbg-primary-grouped: #f3f4f5;
113
111
  --color-light-specialbg-secondary-grouped: #fff;
112
+ --color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05);
113
+ --color-light-specialbg-secondary-transparent-inverted: rgba(255, 255, 255, 0.1);
114
114
  --color-light-specialbg-tertiary-grouped: #f3f4f5;
115
+ --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1);
116
+ --color-light-specialbg-tertiary-transparent-inverted: rgba(255, 255, 255, 0.2);
115
117
  --color-light-text-accent: #ef3124;
116
118
  --color-light-text-attention: #de6a00;
117
- --color-light-text-disabled: #dbdee1;
118
- --color-light-text-disabled-inverted: #485767;
119
- --color-light-text-disabled-inverted-transparent: rgba(255, 255, 255, 0.25);
120
- --color-light-text-disabled-transparent: rgba(11, 31, 53, 0.15);
119
+ --color-light-text-disabled: rgba(11, 31, 53, 0.15);
120
+ --color-light-text-disabled-inverted: rgba(255, 255, 255, 0.25);
121
121
  --color-light-text-link: #007aff;
122
122
  --color-light-text-negative: #d91d0b;
123
123
  --color-light-text-positive: #13a463;
124
124
  --color-light-text-primary: #0b1f35;
125
125
  --color-light-text-primary-inverted: #fff;
126
- --color-light-text-secondary: #546272;
127
- --color-light-text-secondary-inverted: #b6bcc3;
128
- --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
129
- --color-light-text-secondary-transparent: rgba(11, 31, 53, 0.7);
130
- --color-light-text-tertiary: #b6bcc3;
131
- --color-light-text-tertiary-inverted: #6d7986;
132
- --color-light-text-tertiary-inverted-transparent: rgba(255, 255, 255, 0.4);
133
- --color-light-text-tertiary-transparent: rgba(11, 31, 53, 0.3);
126
+ --color-light-text-secondary: rgba(11, 31, 53, 0.7);
127
+ --color-light-text-secondary-inverted: rgba(255, 255, 255, 0.7);
128
+ --color-light-text-tertiary: rgba(11, 31, 53, 0.3);
129
+ --color-light-text-tertiary-inverted: rgba(255, 255, 255, 0.4);
134
130
  --color-static-bg-accent: #ef3124;
135
131
  --color-static-bg-primary-dark: #0b1f35;
136
132
  --color-static-bg-primary-light: #fff;
@@ -147,14 +143,10 @@
147
143
  --color-static-text-accent: #ef3124;
148
144
  --color-static-text-primary-dark: #0b1f35;
149
145
  --color-static-text-primary-light: #fff;
150
- --color-static-text-secondary-dark: #6d7986;
151
- --color-static-text-secondary-dark-transparent: rgba(11, 31, 53, 0.6);
152
- --color-static-text-secondary-light: #b6bcc3;
153
- --color-static-text-secondary-light-transparent: rgba(255, 255, 255, 0.7);
154
- --color-static-text-tertiary-dark: #b6bcc3;
155
- --color-static-text-tertiary-dark-transparent: rgba(11, 31, 53, 0.3);
156
- --color-static-text-tertiary-light: #6d7986;
157
- --color-static-text-tertiary-light-transparent: rgba(255, 255, 255, 0.4);
146
+ --color-static-text-secondary-dark: rgba(11, 31, 53, 0.6);
147
+ --color-static-text-secondary-light: rgba(255, 255, 255, 0.7);
148
+ --color-static-text-tertiary-dark: rgba(11, 31, 53, 0.3);
149
+ --color-static-text-tertiary-light: rgba(255, 255, 255, 0.4);
158
150
  --color-dark-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
159
151
  --color-dark-bg-accent-shade-15: rgb(203, 42, 31);
160
152
  --color-dark-bg-accent-shade-20: rgb(191, 39, 29);
@@ -288,12 +280,12 @@
288
280
  --color-dark-text-primary-inverted-tint-15: rgb(48, 65, 83);
289
281
  --color-dark-text-primary-inverted-tint-30: rgb(84, 98, 114);
290
282
  --color-dark-text-primary-inverted-tint-50: rgb(133, 143, 154);
291
- --color-dark-text-secondary-shade-20: rgb(146, 150, 156);
292
- --color-dark-text-secondary-shade-30: rgb(127, 132, 136);
293
- --color-dark-text-secondary-tint-20: rgb(197, 201, 207);
294
- --color-dark-text-secondary-tint-40: rgb(211, 215, 219);
295
- --color-dark-text-secondary-inverted-shade-20: rgb(67, 78, 91);
296
- --color-dark-text-secondary-inverted-shade-30: rgb(59, 69, 80);
283
+ --color-dark-text-secondary-shade-20: rgba(204, 204, 204, 0.76);
284
+ --color-dark-text-secondary-shade-30: rgba(179, 179, 179, 0.79);
285
+ --color-dark-text-secondary-tint-20: rgba(255, 255, 255, 0.76);
286
+ --color-dark-text-secondary-tint-40: rgba(255, 255, 255, 0.82);
287
+ --color-dark-text-secondary-inverted-shade-20: rgba(9, 25, 42, 0.76);
288
+ --color-dark-text-secondary-inverted-shade-30: rgba(8, 22, 37, 0.79);
297
289
  --color-light-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
298
290
  --color-light-bg-accent-tint-15: rgb(241, 80, 69);
299
291
  --color-light-bg-accent-tint-20: rgb(242, 90, 80);
@@ -427,12 +419,12 @@
427
419
  --color-light-text-primary-inverted-shade-15: rgb(217, 217, 217);
428
420
  --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
429
421
  --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
430
- --color-light-text-secondary-tint-20: rgb(118, 129, 142);
431
- --color-light-text-secondary-tint-30: rgb(135, 145, 156);
432
- --color-light-text-secondary-shade-20: rgb(67, 78, 91);
433
- --color-light-text-secondary-shade-40: rgb(50, 59, 68);
434
- --color-light-text-secondary-inverted-tint-20: rgb(197, 201, 207);
435
- --color-light-text-secondary-inverted-tint-30: rgb(204, 208, 213);
422
+ --color-light-text-secondary-tint-20: rgba(60, 76, 93, 0.76);
423
+ --color-light-text-secondary-tint-30: rgba(84, 98, 114, 0.79);
424
+ --color-light-text-secondary-shade-20: rgba(9, 25, 42, 0.76);
425
+ --color-light-text-secondary-shade-40: rgba(7, 19, 32, 0.82);
426
+ --color-light-text-secondary-inverted-tint-20: rgba(255, 255, 255, 0.76);
427
+ --color-light-text-secondary-inverted-tint-30: rgba(255, 255, 255, 0.79);
436
428
  --color-static-bg-primary-dark-alpha-10: rgba(11, 31, 53, 0.1);
437
429
  --color-static-bg-primary-dark-alpha-20: rgba(11, 31, 53, 0.2);
438
430
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
package/cssm/index.css CHANGED
@@ -214,26 +214,24 @@
214
214
  --color-dark-specialbg-overlay-fallback: #070707;
215
215
  --color-dark-specialbg-primary-grouped: #0b1f35;
216
216
  --color-dark-specialbg-secondary-grouped: #233549;
217
+ --color-dark-specialbg-secondary-transparent: rgba(255, 255, 255, 0.1);
218
+ --color-dark-specialbg-secondary-transparent-inverted: rgba(11, 31, 53, 0.05);
217
219
  --color-dark-specialbg-tertiary-grouped: #3c4c5d;
220
+ --color-dark-specialbg-tertiary-transparent: rgba(255, 255, 255, 0.2);
221
+ --color-dark-specialbg-tertiary-transparent-inverted: rgba(11, 31, 53, 0.1);
218
222
  --color-dark-text-accent: #ef3124;
219
223
  --color-dark-text-attention: #de6a00;
220
- --color-dark-text-disabled: #485767;
221
- --color-dark-text-disabled-inverted: #dbdee1;
222
- --color-dark-text-disabled-inverted-transparent: rgba(11, 31, 53, 0.15);
223
- --color-dark-text-disabled-transparent: rgba(255, 255, 255, 0.25);
224
+ --color-dark-text-disabled: rgba(255, 255, 255, 0.25);
225
+ --color-dark-text-disabled-inverted: rgba(11, 31, 53, 0.15);
224
226
  --color-dark-text-link: #007aff;
225
227
  --color-dark-text-negative: #d91d0b;
226
228
  --color-dark-text-positive: #13a463;
227
229
  --color-dark-text-primary: #fff;
228
230
  --color-dark-text-primary-inverted: #0b1f35;
229
- --color-dark-text-secondary: #b6bcc3;
230
- --color-dark-text-secondary-inverted: #546272;
231
- --color-dark-text-secondary-inverted-transparent: rgba(11, 31, 53, 0.7);
232
- --color-dark-text-secondary-transparent: rgba(255, 255, 255, 0.7);
233
- --color-dark-text-tertiary: #6d7986;
234
- --color-dark-text-tertiary-inverted: #b6bcc3;
235
- --color-dark-text-tertiary-inverted-transparent: rgba(11, 31, 53, 0.3);
236
- --color-dark-text-tertiary-transparent: rgba(255, 255, 255, 0.4);
231
+ --color-dark-text-secondary: rgba(255, 255, 255, 0.7);
232
+ --color-dark-text-secondary-inverted: rgba(11, 31, 53, 0.7);
233
+ --color-dark-text-tertiary: rgba(255, 255, 255, 0.4);
234
+ --color-dark-text-tertiary-inverted: rgba(11, 31, 53, 0.3);
237
235
  --color-light-bg-accent: #ef3124;
238
236
  --color-light-bg-attention-muted: #fff3e0;
239
237
  --color-light-bg-info: #d6e8fc;
@@ -280,26 +278,24 @@
280
278
  --color-light-specialbg-overlay-fallback: #5c5c5c;
281
279
  --color-light-specialbg-primary-grouped: #f3f4f5;
282
280
  --color-light-specialbg-secondary-grouped: #fff;
281
+ --color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05);
282
+ --color-light-specialbg-secondary-transparent-inverted: rgba(255, 255, 255, 0.1);
283
283
  --color-light-specialbg-tertiary-grouped: #f3f4f5;
284
+ --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1);
285
+ --color-light-specialbg-tertiary-transparent-inverted: rgba(255, 255, 255, 0.2);
284
286
  --color-light-text-accent: #ef3124;
285
287
  --color-light-text-attention: #de6a00;
286
- --color-light-text-disabled: #dbdee1;
287
- --color-light-text-disabled-inverted: #485767;
288
- --color-light-text-disabled-inverted-transparent: rgba(255, 255, 255, 0.25);
289
- --color-light-text-disabled-transparent: rgba(11, 31, 53, 0.15);
288
+ --color-light-text-disabled: rgba(11, 31, 53, 0.15);
289
+ --color-light-text-disabled-inverted: rgba(255, 255, 255, 0.25);
290
290
  --color-light-text-link: #007aff;
291
291
  --color-light-text-negative: #d91d0b;
292
292
  --color-light-text-positive: #13a463;
293
293
  --color-light-text-primary: #0b1f35;
294
294
  --color-light-text-primary-inverted: #fff;
295
- --color-light-text-secondary: #546272;
296
- --color-light-text-secondary-inverted: #b6bcc3;
297
- --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
298
- --color-light-text-secondary-transparent: rgba(11, 31, 53, 0.7);
299
- --color-light-text-tertiary: #b6bcc3;
300
- --color-light-text-tertiary-inverted: #6d7986;
301
- --color-light-text-tertiary-inverted-transparent: rgba(255, 255, 255, 0.4);
302
- --color-light-text-tertiary-transparent: rgba(11, 31, 53, 0.3);
295
+ --color-light-text-secondary: rgba(11, 31, 53, 0.7);
296
+ --color-light-text-secondary-inverted: rgba(255, 255, 255, 0.7);
297
+ --color-light-text-tertiary: rgba(11, 31, 53, 0.3);
298
+ --color-light-text-tertiary-inverted: rgba(255, 255, 255, 0.4);
303
299
  --color-static-bg-accent: #ef3124;
304
300
  --color-static-bg-primary-dark: #0b1f35;
305
301
  --color-static-bg-primary-light: #fff;
@@ -316,14 +312,10 @@
316
312
  --color-static-text-accent: #ef3124;
317
313
  --color-static-text-primary-dark: #0b1f35;
318
314
  --color-static-text-primary-light: #fff;
319
- --color-static-text-secondary-dark: #6d7986;
320
- --color-static-text-secondary-dark-transparent: rgba(11, 31, 53, 0.6);
321
- --color-static-text-secondary-light: #b6bcc3;
322
- --color-static-text-secondary-light-transparent: rgba(255, 255, 255, 0.7);
323
- --color-static-text-tertiary-dark: #b6bcc3;
324
- --color-static-text-tertiary-dark-transparent: rgba(11, 31, 53, 0.3);
325
- --color-static-text-tertiary-light: #6d7986;
326
- --color-static-text-tertiary-light-transparent: rgba(255, 255, 255, 0.4);
315
+ --color-static-text-secondary-dark: rgba(11, 31, 53, 0.6);
316
+ --color-static-text-secondary-light: rgba(255, 255, 255, 0.7);
317
+ --color-static-text-tertiary-dark: rgba(11, 31, 53, 0.3);
318
+ --color-static-text-tertiary-light: rgba(255, 255, 255, 0.4);
327
319
  --color-dark-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
328
320
  --color-dark-bg-accent-shade-15: rgb(203, 42, 31);
329
321
  --color-dark-bg-accent-shade-20: rgb(191, 39, 29);
@@ -457,12 +449,12 @@
457
449
  --color-dark-text-primary-inverted-tint-15: rgb(48, 65, 83);
458
450
  --color-dark-text-primary-inverted-tint-30: rgb(84, 98, 114);
459
451
  --color-dark-text-primary-inverted-tint-50: rgb(133, 143, 154);
460
- --color-dark-text-secondary-shade-20: rgb(146, 150, 156);
461
- --color-dark-text-secondary-shade-30: rgb(127, 132, 136);
462
- --color-dark-text-secondary-tint-20: rgb(197, 201, 207);
463
- --color-dark-text-secondary-tint-40: rgb(211, 215, 219);
464
- --color-dark-text-secondary-inverted-shade-20: rgb(67, 78, 91);
465
- --color-dark-text-secondary-inverted-shade-30: rgb(59, 69, 80);
452
+ --color-dark-text-secondary-shade-20: rgba(204, 204, 204, 0.76);
453
+ --color-dark-text-secondary-shade-30: rgba(179, 179, 179, 0.79);
454
+ --color-dark-text-secondary-tint-20: rgba(255, 255, 255, 0.76);
455
+ --color-dark-text-secondary-tint-40: rgba(255, 255, 255, 0.82);
456
+ --color-dark-text-secondary-inverted-shade-20: rgba(9, 25, 42, 0.76);
457
+ --color-dark-text-secondary-inverted-shade-30: rgba(8, 22, 37, 0.79);
466
458
  --color-light-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
467
459
  --color-light-bg-accent-tint-15: rgb(241, 80, 69);
468
460
  --color-light-bg-accent-tint-20: rgb(242, 90, 80);
@@ -596,12 +588,12 @@
596
588
  --color-light-text-primary-inverted-shade-15: rgb(217, 217, 217);
597
589
  --color-light-text-primary-inverted-shade-30: rgb(179, 179, 179);
598
590
  --color-light-text-primary-inverted-shade-50: rgb(128, 128, 128);
599
- --color-light-text-secondary-tint-20: rgb(118, 129, 142);
600
- --color-light-text-secondary-tint-30: rgb(135, 145, 156);
601
- --color-light-text-secondary-shade-20: rgb(67, 78, 91);
602
- --color-light-text-secondary-shade-40: rgb(50, 59, 68);
603
- --color-light-text-secondary-inverted-tint-20: rgb(197, 201, 207);
604
- --color-light-text-secondary-inverted-tint-30: rgb(204, 208, 213);
591
+ --color-light-text-secondary-tint-20: rgba(60, 76, 93, 0.76);
592
+ --color-light-text-secondary-tint-30: rgba(84, 98, 114, 0.79);
593
+ --color-light-text-secondary-shade-20: rgba(9, 25, 42, 0.76);
594
+ --color-light-text-secondary-shade-40: rgba(7, 19, 32, 0.82);
595
+ --color-light-text-secondary-inverted-tint-20: rgba(255, 255, 255, 0.76);
596
+ --color-light-text-secondary-inverted-tint-30: rgba(255, 255, 255, 0.79);
605
597
  --color-static-bg-primary-dark-alpha-10: rgba(11, 31, 53, 0.1);
606
598
  --color-static-bg-primary-dark-alpha-20: rgba(11, 31, 53, 0.2);
607
599
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-vars",
3
- "version": "6.5.0",
3
+ "version": "7.0.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
package/typography.css CHANGED
@@ -81,12 +81,6 @@
81
81
  font-weight: 400;
82
82
  }
83
83
 
84
- @define-mixin paragraph_component {
85
- font-size: 16px;
86
- line-height: 20px;
87
- font-weight: 400;
88
- }
89
-
90
84
  @define-mixin paragraph_component_primary {
91
85
  font-size: 16px;
92
86
  line-height: 20px;
@@ -143,12 +137,6 @@
143
137
  font-weight: 700;
144
138
  }
145
139
 
146
- @define-mixin accent_component {
147
- font-size: 16px;
148
- line-height: 20px;
149
- font-weight: 700;
150
- }
151
-
152
140
  @define-mixin accent_component_primary {
153
141
  font-size: 16px;
154
142
  line-height: 20px;
@@ -235,12 +223,6 @@
235
223
  font-weight: 500;
236
224
  }
237
225
 
238
- @define-mixin action_component {
239
- font-size: 16px;
240
- line-height: 20px;
241
- font-weight: 500;
242
- }
243
-
244
226
  @define-mixin action_component_primary {
245
227
  font-size: 16px;
246
228
  line-height: 20px;
@@ -441,146 +423,20 @@
441
423
  font-weight: 400;
442
424
  }
443
425
 
444
- @define-mixin legacy_primary_small {
445
- font-size: 14px;
446
- line-height: 18px;
447
- font-weight: 400;
448
- }
449
-
450
- @define-mixin system_48-52_bold {
451
- font-size: 48px;
452
- line-height: 52px;
453
- font-weight: 700;
454
- }
455
-
456
- @define-mixin system_40-48_bold {
457
- font-size: 40px;
458
- line-height: 48px;
459
- font-weight: 700;
460
- }
461
-
462
- @define-mixin system_30-36_bold {
463
- font-size: 30px;
464
- line-height: 36px;
465
- font-weight: 700;
466
- }
467
-
468
- @define-mixin system_22-26_bold {
469
- font-size: 22px;
470
- line-height: 26px;
471
- font-weight: 700;
472
- }
473
-
474
- @define-mixin system_18-22_bold {
475
- font-size: 18px;
476
- line-height: 22px;
477
- font-weight: 700;
478
- }
479
-
480
- @define-mixin system_18-22_regular {
481
- font-size: 18px;
482
- line-height: 22px;
483
- font-weight: 400;
484
- }
485
-
486
- @define-mixin system_18-22_medium {
487
- font-size: 18px;
488
- line-height: 22px;
489
- font-weight: 500;
490
- }
491
-
492
- @define-mixin system_16-24_regular {
493
- font-size: 16px;
494
- line-height: 24px;
495
- font-weight: 400;
496
- }
497
-
498
- @define-mixin system_16-24_medium {
499
- font-size: 16px;
500
- line-height: 24px;
501
- font-weight: 500;
502
- }
503
-
504
- @define-mixin system_16-24_bold {
505
- font-size: 16px;
506
- line-height: 24px;
507
- font-weight: 700;
508
- }
509
-
510
- @define-mixin system_16-20_regular {
426
+ @define-mixin paragraph_component {
511
427
  font-size: 16px;
512
428
  line-height: 20px;
513
429
  font-weight: 400;
514
430
  }
515
431
 
516
- @define-mixin system_16-20_medium {
432
+ @define-mixin action_component {
517
433
  font-size: 16px;
518
434
  line-height: 20px;
519
435
  font-weight: 500;
520
436
  }
521
437
 
522
- @define-mixin system_16-20_bold {
438
+ @define-mixin accent_component {
523
439
  font-size: 16px;
524
440
  line-height: 20px;
525
441
  font-weight: 700;
526
442
  }
527
-
528
- @define-mixin system_14-18_regular {
529
- font-size: 14px;
530
- line-height: 18px;
531
- font-weight: 400;
532
- }
533
-
534
- @define-mixin system_12-16_medium_caps {
535
- font-size: 12px;
536
- line-height: 16px;
537
- font-weight: 500;
538
- letter-spacing: 1.5px;
539
- text-transform: uppercase;
540
- }
541
-
542
- @define-mixin system_12-16_regular {
543
- font-size: 12px;
544
- line-height: 16px;
545
- font-weight: 400;
546
- }
547
-
548
- @define-mixin styrene_40-48_medium {
549
- font-size: 40px;
550
- line-height: 48px;
551
- font-weight: 500;
552
- font-feature-settings: 'ss01';
553
- font-family: var(--font-family-styrene);
554
- }
555
-
556
- @define-mixin styrene_32-40_medium {
557
- font-size: 32px;
558
- line-height: 40px;
559
- font-weight: 500;
560
- font-feature-settings: 'ss01';
561
- font-family: var(--font-family-styrene);
562
- }
563
-
564
- @define-mixin styrene_28-34_medium {
565
- font-size: 28px;
566
- line-height: 34px;
567
- font-weight: 500;
568
- font-feature-settings: 'ss01';
569
- font-family: var(--font-family-styrene);
570
- }
571
-
572
- @define-mixin styrene_24-30_medium {
573
- font-size: 24px;
574
- line-height: 30px;
575
- font-weight: 500;
576
- font-feature-settings: 'ss01';
577
- font-family: var(--font-family-styrene);
578
- }
579
-
580
- @define-mixin styrene_20-24_medium {
581
- font-size: 20px;
582
- line-height: 24px;
583
- font-weight: 500;
584
- font-feature-settings: 'ss01';
585
- font-family: var(--font-family-styrene);
586
- }