@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/bundle/site.css CHANGED
@@ -1,5 +1,5 @@
1
- @import './colors-indigo.css';
2
- @import './colors-addons.css';
3
- @import './shadows-indigo.css';
4
- @import './border-radius.css';
5
- @import './gaps.css';
1
+ @import '../colors-indigo.css';
2
+ @import '../colors-addons.css';
3
+ @import '../shadows-indigo.css';
4
+ @import '../border-radius.css';
5
+ @import '../gaps.css';
package/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/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);