@alfalab/core-components-vars 5.0.0 → 5.3.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/colors-addons.css +7 -14
  2. package/colors-bluetint.css +122 -120
  3. package/colors-indigo.css +130 -132
  4. package/cssm/colors-addons.css +0 -7
  5. package/cssm/colors-bluetint.css +2 -0
  6. package/cssm/colors-indigo.css +2 -0
  7. package/cssm/index.css +2 -7
  8. package/package.json +1 -1
  9. package/typography.css +100 -0
package/colors-addons.css CHANGED
@@ -45,18 +45,11 @@
45
45
  --color-static-status-purple: #673ab7;
46
46
  --color-static-status-red: #d91d0b;
47
47
  --color-static-status-teal: #219187;
48
- --color-static-status-blue-tint-90: color-mod(#007aff tint(90%));
49
- --color-static-status-blue-alpha-10: color-mod(#007aff alpha(10%));
50
- --color-static-status-green-tint-90: color-mod(#13a463 tint(90%));
51
- --color-static-status-green-alpha-10: color-mod(#13a463 alpha(10%));
52
- --color-static-status-grey-tint-90: color-mod(#6d7986 tint(90%));
53
- --color-static-status-grey-alpha-10: color-mod(#6d7986 alpha(10%));
54
- --color-static-status-orange-tint-90: color-mod(#de6a00 tint(90%));
55
- --color-static-status-orange-alpha-10: color-mod(#de6a00 alpha(10%));
56
- --color-static-status-purple-tint-90: color-mod(#673ab7 tint(90%));
57
- --color-static-status-purple-alpha-10: color-mod(#673ab7 alpha(10%));
58
- --color-static-status-red-tint-90: color-mod(#d91d0b tint(90%));
59
- --color-static-status-red-alpha-10: color-mod(#d91d0b alpha(10%));
60
- --color-static-status-teal-tint-90: color-mod(#219187 tint(90%));
61
- --color-static-status-teal-alpha-10: color-mod(#219187 alpha(10%));
48
+ --color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
49
+ --color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
50
+ --color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
51
+ --color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
52
+ --color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
53
+ --color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
54
+ --color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
62
55
  }
package/colors-bluetint.css CHANGED
@@ -127,124 +127,126 @@
127
127
  --color-static-text-tertiary-dark-transparent: rgba(60, 60, 67, 0.3);
128
128
  --color-static-text-tertiary-light: #464649;
129
129
  --color-static-text-tertiary-light-transparent: rgba(235, 235, 245, 0.3);
130
- --color-dark-bg-accent-alpha-30: color-mod(#ef3124 alpha(30%));
131
- --color-dark-bg-accent-tint-7: color-mod(#ef3124 tint(7%));
132
- --color-dark-bg-accent-tint-10: color-mod(#ef3124 tint(10%));
133
- --color-dark-bg-accent-tint-15: color-mod(#ef3124 tint(15%));
134
- --color-dark-bg-accent-tint-30: color-mod(#ef3124 tint(30%));
135
- --color-dark-bg-neutral-alpha-30: color-mod(#3a3a3c alpha(30%));
136
- --color-dark-bg-neutral-tint-7: color-mod(#3a3a3c tint(7%));
137
- --color-dark-bg-neutral-tint-10: color-mod(#3a3a3c tint(10%));
138
- --color-dark-bg-neutral-tint-15: color-mod(#3a3a3c tint(15%));
139
- --color-dark-bg-neutral-tint-30: color-mod(#3a3a3c tint(30%));
140
- --color-dark-bg-neutral-shade-15: color-mod(#3a3a3c shade(15%));
141
- --color-dark-bg-primary-alpha-8: color-mod(#121212 alpha(8%));
142
- --color-dark-bg-primary-inverted-alpha-3: color-mod(#fff alpha(3%));
143
- --color-dark-bg-primary-inverted-alpha-7: color-mod(#fff alpha(7%));
144
- --color-dark-bg-primary-inverted-alpha-10: color-mod(#fff alpha(10%));
145
- --color-dark-bg-primary-inverted-alpha-15: color-mod(#fff alpha(15%));
146
- --color-dark-bg-primary-inverted-alpha-20: color-mod(#fff alpha(20%));
147
- --color-dark-bg-primary-inverted-alpha-40: color-mod(#fff alpha(40%));
148
- --color-dark-bg-primary-inverted-alpha-50: color-mod(#fff alpha(50%));
149
- --color-dark-bg-secondary-inverted-alpha-7: color-mod(#f3f4f5 alpha(7%));
150
- --color-dark-bg-secondary-inverted-alpha-15: color-mod(#f3f4f5 alpha(15%));
151
- --color-dark-bg-tertiary-tint-7: color-mod(#2c2c2e tint(7%));
152
- --color-dark-border-tertiary-inverted-alpha-30: color-mod(#f3f4f5 alpha(30%));
153
- --color-dark-graphic-accent-alpha-30: color-mod(#ef3124 alpha(30%));
154
- --color-dark-graphic-accent-tint-10: color-mod(#ef3124 tint(10%));
155
- --color-dark-graphic-accent-tint-30: color-mod(#ef3124 tint(30%));
156
- --color-dark-graphic-negative-shade-30: color-mod(#d91d0b shade(30%));
157
- --color-dark-graphic-negative-shade-50: color-mod(#d91d0b shade(50%));
158
- --color-dark-graphic-neutral-tint-10: color-mod(#2a2a2c tint(10%));
159
- --color-dark-graphic-positive-tint-10: color-mod(#2fc26e tint(10%));
160
- --color-dark-graphic-positive-tint-30: color-mod(#2fc26e tint(30%));
161
- --color-dark-graphic-primary-alpha-30: color-mod(#fff alpha(30%));
162
- --color-dark-graphic-primary-alpha-40: color-mod(#fff alpha(40%));
163
- --color-dark-graphic-primary-alpha-50: color-mod(#fff alpha(50%));
164
- --color-dark-graphic-primary-shade-30: color-mod(#fff shade(30%));
165
- --color-dark-graphic-primary-shade-50: color-mod(#fff shade(50%));
166
- --color-dark-graphic-primary-tint-10: color-mod(#fff tint(10%));
167
- --color-dark-graphic-primary-tint-30: color-mod(#fff tint(30%));
168
- --color-dark-graphic-secondary-alpha-30: color-mod(#8d8d93 alpha(30%));
169
- --color-dark-graphic-secondary-tint-30: color-mod(#8d8d93 tint(30%));
170
- --color-dark-graphic-secondary-tint-50: color-mod(#8d8d93 tint(50%));
171
- --color-dark-text-link-shade-30: color-mod(#0072ef shade(30%));
172
- --color-dark-text-link-shade-50: color-mod(#0072ef shade(50%));
173
- --color-dark-text-link-tint-20: color-mod(#0072ef tint(20%));
174
- --color-dark-text-link-tint-40: color-mod(#0072ef tint(40%));
175
- --color-dark-text-primary-alpha-30: color-mod(#fff alpha(30%));
176
- --color-dark-text-primary-shade-30: color-mod(#fff shade(30%));
177
- --color-dark-text-primary-shade-50: color-mod(#fff shade(50%));
178
- --color-dark-text-primary-tint-20: color-mod(#fff tint(20%));
179
- --color-dark-text-primary-tint-40: color-mod(#fff tint(40%));
180
- --color-dark-text-primary-inverted-alpha-40: color-mod(#000 alpha(40%));
181
- --color-dark-text-primary-inverted-shade-30: color-mod(#000 shade(30%));
182
- --color-dark-text-primary-inverted-shade-50: color-mod(#000 shade(50%));
183
- --color-dark-text-secondary-shade-30: color-mod(#8d8d93 shade(30%));
184
- --color-dark-text-secondary-shade-50: color-mod(#8d8d93 shade(50%));
185
- --color-dark-text-secondary-tint-20: color-mod(#8d8d93 tint(20%));
186
- --color-dark-text-secondary-tint-40: color-mod(#8d8d93 tint(40%));
187
- --color-dark-text-secondary-inverted-shade-30: color-mod(#8a8a8e shade(30%));
188
- --color-dark-text-secondary-inverted-shade-50: color-mod(#8a8a8e shade(50%));
189
- --color-light-bg-accent-alpha-30: color-mod(#ef3124 alpha(30%));
190
- --color-light-bg-accent-shade-7: color-mod(#ef3124 shade(7%));
191
- --color-light-bg-accent-shade-10: color-mod(#ef3124 shade(10%));
192
- --color-light-bg-accent-shade-15: color-mod(#ef3124 shade(15%));
193
- --color-light-bg-accent-shade-30: color-mod(#ef3124 shade(30%));
194
- --color-light-bg-neutral-alpha-30: color-mod(#dcdcdd alpha(30%));
195
- --color-light-bg-neutral-shade-7: color-mod(#dcdcdd shade(7%));
196
- --color-light-bg-neutral-shade-10: color-mod(#dcdcdd shade(10%));
197
- --color-light-bg-neutral-shade-15: color-mod(#dcdcdd shade(15%));
198
- --color-light-bg-neutral-shade-30: color-mod(#dcdcdd shade(30%));
199
- --color-light-bg-neutral-tint-15: color-mod(#dcdcdd tint(15%));
200
- --color-light-bg-primary-alpha-8: color-mod(#fff alpha(8%));
201
- --color-light-bg-primary-inverted-alpha-3: color-mod(#121212 alpha(3%));
202
- --color-light-bg-primary-inverted-alpha-7: color-mod(#121212 alpha(7%));
203
- --color-light-bg-primary-inverted-alpha-10: color-mod(#121212 alpha(10%));
204
- --color-light-bg-primary-inverted-alpha-15: color-mod(#121212 alpha(15%));
205
- --color-light-bg-primary-inverted-alpha-20: color-mod(#121212 alpha(20%));
206
- --color-light-bg-primary-inverted-alpha-40: color-mod(#121212 alpha(40%));
207
- --color-light-bg-primary-inverted-alpha-50: color-mod(#121212 alpha(50%));
208
- --color-light-bg-secondary-inverted-alpha-7: color-mod(#202022 alpha(7%));
209
- --color-light-bg-secondary-inverted-alpha-15: color-mod(#202022 alpha(15%));
210
- --color-light-bg-tertiary-shade-7: color-mod(#e9e9eb shade(7%));
211
- --color-light-border-tertiary-inverted-alpha-30: color-mod(#1c1c1e alpha(30%));
212
- --color-light-graphic-accent-alpha-30: color-mod(#ef3124 alpha(30%));
213
- --color-light-graphic-accent-shade-10: color-mod(#ef3124 shade(10%));
214
- --color-light-graphic-accent-shade-30: color-mod(#ef3124 shade(30%));
215
- --color-light-graphic-negative-tint-30: color-mod(#f15045 tint(30%));
216
- --color-light-graphic-negative-tint-50: color-mod(#f15045 tint(50%));
217
- --color-light-graphic-neutral-shade-10: color-mod(#dcdcdd shade(10%));
218
- --color-light-graphic-positive-shade-10: color-mod(#2fc26e shade(10%));
219
- --color-light-graphic-positive-shade-30: color-mod(#2fc26e shade(30%));
220
- --color-light-graphic-primary-alpha-30: color-mod(#000 alpha(30%));
221
- --color-light-graphic-primary-alpha-40: color-mod(#000 alpha(40%));
222
- --color-light-graphic-primary-alpha-50: color-mod(#000 alpha(50%));
223
- --color-light-graphic-primary-tint-30: color-mod(#000 tint(30%));
224
- --color-light-graphic-primary-tint-50: color-mod(#000 tint(50%));
225
- --color-light-graphic-primary-shade-10: color-mod(#000 shade(10%));
226
- --color-light-graphic-primary-shade-30: color-mod(#000 shade(30%));
227
- --color-light-graphic-secondary-alpha-30: color-mod(#8a8a8e alpha(30%));
228
- --color-light-graphic-secondary-shade-30: color-mod(#8a8a8e shade(30%));
229
- --color-light-graphic-secondary-shade-50: color-mod(#8a8a8e shade(50%));
230
- --color-light-text-link-tint-30: color-mod(#0072ef tint(30%));
231
- --color-light-text-link-tint-50: color-mod(#0072ef tint(50%));
232
- --color-light-text-link-shade-20: color-mod(#0072ef shade(20%));
233
- --color-light-text-link-shade-40: color-mod(#0072ef shade(40%));
234
- --color-light-text-primary-alpha-30: color-mod(#000 alpha(30%));
235
- --color-light-text-primary-tint-30: color-mod(#000 tint(30%));
236
- --color-light-text-primary-tint-50: color-mod(#000 tint(50%));
237
- --color-light-text-primary-shade-20: color-mod(#000 shade(20%));
238
- --color-light-text-primary-shade-40: color-mod(#000 shade(40%));
239
- --color-light-text-primary-inverted-alpha-40: color-mod(#fff alpha(40%));
240
- --color-light-text-primary-inverted-tint-30: color-mod(#fff tint(30%));
241
- --color-light-text-primary-inverted-tint-50: color-mod(#fff tint(50%));
242
- --color-light-text-secondary-tint-30: color-mod(#8a8a8e tint(30%));
243
- --color-light-text-secondary-tint-50: color-mod(#8a8a8e tint(50%));
244
- --color-light-text-secondary-shade-20: color-mod(#8a8a8e shade(20%));
245
- --color-light-text-secondary-shade-40: color-mod(#8a8a8e shade(40%));
246
- --color-light-text-secondary-inverted-tint-30: color-mod(#8d8d93 tint(30%));
247
- --color-light-text-secondary-inverted-tint-50: color-mod(#8d8d93 tint(50%));
248
- --color-static-bg-primary-dark-alpha-10: color-mod(#121212 alpha(10%));
249
- --color-static-bg-primary-dark-alpha-20: color-mod(#121212 alpha(20%));
130
+ --color-dark-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
131
+ --color-dark-bg-accent-tint-7: rgb(240, 63, 51);
132
+ --color-dark-bg-accent-tint-10: rgb(241, 70, 58);
133
+ --color-dark-bg-accent-tint-15: rgb(241, 80, 69);
134
+ --color-dark-bg-accent-tint-30: rgb(244, 111, 102);
135
+ --color-dark-bg-neutral-alpha-30: rgba(58, 58, 60, 0.3);
136
+ --color-dark-bg-neutral-tint-7: rgb(72, 72, 74);
137
+ --color-dark-bg-neutral-tint-10: rgb(78, 78, 80);
138
+ --color-dark-bg-neutral-tint-15: rgb(88, 88, 89);
139
+ --color-dark-bg-neutral-tint-30: rgb(117, 117, 119);
140
+ --color-dark-bg-neutral-shade-15: rgb(49, 49, 51);
141
+ --color-dark-bg-primary-alpha-8: rgba(18, 18, 18, 0.08);
142
+ --color-dark-bg-primary-inverted-alpha-3: rgba(255, 255, 255, 0.03);
143
+ --color-dark-bg-primary-inverted-alpha-7: rgba(255, 255, 255, 0.07);
144
+ --color-dark-bg-primary-inverted-alpha-10: rgba(255, 255, 255, 0.1);
145
+ --color-dark-bg-primary-inverted-alpha-15: rgba(255, 255, 255, 0.15);
146
+ --color-dark-bg-primary-inverted-alpha-20: rgba(255, 255, 255, 0.2);
147
+ --color-dark-bg-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
148
+ --color-dark-bg-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
149
+ --color-dark-bg-secondary-inverted-alpha-7: rgba(243, 244, 245, 0.07);
150
+ --color-dark-bg-secondary-inverted-alpha-15: rgba(243, 244, 245, 0.15);
151
+ --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
152
+ --color-dark-border-tertiary-inverted-alpha-30: rgba(243, 244, 245, 0.3);
153
+ --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
154
+ --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
155
+ --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
156
+ --color-dark-graphic-negative-shade-30: rgb(152, 20, 8);
157
+ --color-dark-graphic-negative-shade-50: rgb(109, 15, 6);
158
+ --color-dark-graphic-neutral-tint-10: rgb(63, 63, 65);
159
+ --color-dark-graphic-positive-tint-10: rgb(68, 200, 125);
160
+ --color-dark-graphic-positive-tint-30: rgb(109, 212, 154);
161
+ --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
162
+ --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
163
+ --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
164
+ --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
165
+ --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
166
+ --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
167
+ --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
168
+ --color-dark-graphic-primary-tint-30: rgb(255, 255, 255);
169
+ --color-dark-graphic-secondary-alpha-30: rgba(141, 141, 147, 0.3);
170
+ --color-dark-graphic-secondary-tint-30: rgb(175, 175, 179);
171
+ --color-dark-graphic-secondary-tint-50: rgb(198, 198, 201);
172
+ --color-dark-text-link-shade-30: rgb(0, 80, 167);
173
+ --color-dark-text-link-shade-50: rgb(0, 57, 120);
174
+ --color-dark-text-link-tint-20: rgb(51, 142, 242);
175
+ --color-dark-text-link-tint-40: rgb(102, 170, 245);
176
+ --color-dark-text-primary-alpha-30: rgba(255, 255, 255, 0.3);
177
+ --color-dark-text-primary-shade-30: rgb(179, 179, 179);
178
+ --color-dark-text-primary-shade-50: rgb(128, 128, 128);
179
+ --color-dark-text-primary-tint-20: rgb(255, 255, 255);
180
+ --color-dark-text-primary-tint-40: rgb(255, 255, 255);
181
+ --color-dark-text-primary-inverted-alpha-40: rgba(0, 0, 0, 0.4);
182
+ --color-dark-text-primary-inverted-shade-30: rgb(0, 0, 0);
183
+ --color-dark-text-primary-inverted-shade-50: rgb(0, 0, 0);
184
+ --color-dark-text-secondary-shade-30: rgb(99, 99, 103);
185
+ --color-dark-text-secondary-shade-50: rgb(71, 71, 74);
186
+ --color-dark-text-secondary-tint-20: rgb(164, 164, 169);
187
+ --color-dark-text-secondary-tint-40: rgb(187, 187, 190);
188
+ --color-dark-text-secondary-inverted-shade-30: rgb(97, 97, 99);
189
+ --color-dark-text-secondary-inverted-shade-50: rgb(69, 69, 71);
190
+ --color-light-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
191
+ --color-light-bg-accent-shade-7: rgb(222, 46, 33);
192
+ --color-light-bg-accent-shade-10: rgb(215, 44, 32);
193
+ --color-light-bg-accent-shade-15: rgb(203, 42, 31);
194
+ --color-light-bg-accent-shade-30: rgb(167, 34, 25);
195
+ --color-light-bg-neutral-alpha-30: rgba(220, 220, 221, 0.3);
196
+ --color-light-bg-neutral-shade-7: rgb(205, 205, 206);
197
+ --color-light-bg-neutral-shade-10: rgb(198, 198, 199);
198
+ --color-light-bg-neutral-shade-15: rgb(187, 187, 188);
199
+ --color-light-bg-neutral-shade-30: rgb(154, 154, 155);
200
+ --color-light-bg-neutral-tint-15: rgb(225, 225, 226);
201
+ --color-light-bg-primary-alpha-8: rgba(255, 255, 255, 0.08);
202
+ --color-light-bg-primary-inverted-alpha-3: rgba(18, 18, 18, 0.03);
203
+ --color-light-bg-primary-inverted-alpha-7: rgba(18, 18, 18, 0.07);
204
+ --color-light-bg-primary-inverted-alpha-10: rgba(18, 18, 18, 0.1);
205
+ --color-light-bg-primary-inverted-alpha-15: rgba(18, 18, 18, 0.15);
206
+ --color-light-bg-primary-inverted-alpha-20: rgba(18, 18, 18, 0.2);
207
+ --color-light-bg-primary-inverted-alpha-40: rgba(18, 18, 18, 0.4);
208
+ --color-light-bg-primary-inverted-alpha-50: rgba(18, 18, 18, 0.5);
209
+ --color-light-bg-secondary-inverted-alpha-7: rgba(32, 32, 34, 0.07);
210
+ --color-light-bg-secondary-inverted-alpha-15: rgba(32, 32, 34, 0.15);
211
+ --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
212
+ --color-light-border-tertiary-inverted-alpha-30: rgba(28, 28, 30, 0.3);
213
+ --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
214
+ --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
215
+ --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
216
+ --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
217
+ --color-light-graphic-negative-tint-50: rgb(248, 168, 162);
218
+ --color-light-graphic-neutral-shade-10: rgb(198, 198, 199);
219
+ --color-light-graphic-positive-shade-10: rgb(42, 175, 99);
220
+ --color-light-graphic-positive-shade-30: rgb(33, 136, 77);
221
+ --color-light-graphic-primary-alpha-30: rgba(0, 0, 0, 0.3);
222
+ --color-light-graphic-primary-alpha-40: rgba(0, 0, 0, 0.4);
223
+ --color-light-graphic-primary-alpha-50: rgba(0, 0, 0, 0.5);
224
+ --color-light-graphic-primary-tint-15: rgb(38, 38, 38);
225
+ --color-light-graphic-primary-tint-30: rgb(77, 77, 77);
226
+ --color-light-graphic-primary-tint-50: rgb(128, 128, 128);
227
+ --color-light-graphic-primary-shade-10: rgb(0, 0, 0);
228
+ --color-light-graphic-primary-shade-30: rgb(0, 0, 0);
229
+ --color-light-graphic-secondary-alpha-30: rgba(138, 138, 142, 0.3);
230
+ --color-light-graphic-secondary-shade-30: rgb(97, 97, 99);
231
+ --color-light-graphic-secondary-shade-50: rgb(69, 69, 71);
232
+ --color-light-text-link-tint-30: rgb(77, 156, 244);
233
+ --color-light-text-link-tint-50: rgb(128, 185, 247);
234
+ --color-light-text-link-shade-20: rgb(0, 91, 191);
235
+ --color-light-text-link-shade-40: rgb(0, 68, 143);
236
+ --color-light-text-primary-alpha-30: rgba(0, 0, 0, 0.3);
237
+ --color-light-text-primary-tint-30: rgb(77, 77, 77);
238
+ --color-light-text-primary-tint-50: rgb(128, 128, 128);
239
+ --color-light-text-primary-shade-20: rgb(0, 0, 0);
240
+ --color-light-text-primary-shade-40: rgb(0, 0, 0);
241
+ --color-light-text-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
242
+ --color-light-text-primary-inverted-tint-30: rgb(255, 255, 255);
243
+ --color-light-text-primary-inverted-tint-50: rgb(255, 255, 255);
244
+ --color-light-text-secondary-tint-30: rgb(173, 173, 176);
245
+ --color-light-text-secondary-tint-50: rgb(197, 197, 199);
246
+ --color-light-text-secondary-shade-20: rgb(110, 110, 114);
247
+ --color-light-text-secondary-shade-40: rgb(83, 83, 85);
248
+ --color-light-text-secondary-inverted-tint-30: rgb(175, 175, 179);
249
+ --color-light-text-secondary-inverted-tint-50: rgb(198, 198, 201);
250
+ --color-static-bg-primary-dark-alpha-10: rgba(18, 18, 18, 0.1);
251
+ --color-static-bg-primary-dark-alpha-20: rgba(18, 18, 18, 0.2);
250
252
  }
package/colors-indigo.css CHANGED
@@ -137,136 +137,134 @@
137
137
  --color-static-text-tertiary-dark-transparent: rgba(11, 31, 53, 0.3);
138
138
  --color-static-text-tertiary-light: #6d7986;
139
139
  --color-static-text-tertiary-light-transparent: rgba(255, 255, 255, 0.4);
140
- --color-dark-bg-accent-alpha-30: color-mod(#ef3124 alpha(30%));
141
- --color-dark-bg-accent-tint-7: color-mod(#ef3124 tint(7%));
142
- --color-dark-bg-accent-tint-10: color-mod(#ef3124 tint(10%));
143
- --color-dark-bg-accent-tint-15: color-mod(#ef3124 tint(15%));
144
- --color-dark-bg-accent-tint-30: color-mod(#ef3124 tint(30%));
145
- --color-dark-bg-neutral-alpha-30: color-mod(#485767 alpha(30%));
146
- --color-dark-bg-neutral-tint-7: color-mod(#485767 tint(7%));
147
- --color-dark-bg-neutral-tint-10: color-mod(#485767 tint(10%));
148
- --color-dark-bg-neutral-tint-15: color-mod(#485767 tint(15%));
149
- --color-dark-bg-neutral-tint-30: color-mod(#485767 tint(30%));
150
- --color-dark-bg-neutral-shade-15: color-mod(#485767 shade(15%));
151
- --color-dark-bg-primary-alpha-8: color-mod(#0b1f35 alpha(8%));
152
- --color-dark-bg-primary-inverted-alpha-3: color-mod(#fff alpha(3%));
153
- --color-dark-bg-primary-inverted-alpha-7: color-mod(#fff alpha(7%));
154
- --color-dark-bg-primary-inverted-alpha-10: color-mod(#fff alpha(10%));
155
- --color-dark-bg-primary-inverted-alpha-15: color-mod(#fff alpha(15%));
156
- --color-dark-bg-primary-inverted-alpha-20: color-mod(#fff alpha(20%));
157
- --color-dark-bg-primary-inverted-alpha-40: color-mod(#fff alpha(40%));
158
- --color-dark-bg-primary-inverted-alpha-50: color-mod(#fff alpha(50%));
159
- --color-dark-bg-secondary-inverted-alpha-7: color-mod(#b6bcc3 alpha(7%));
160
- --color-dark-bg-secondary-inverted-alpha-15: color-mod(#b6bcc3 alpha(15%));
161
- --color-dark-bg-tertiary-tint-7: color-mod(#3c4c5d tint(7%));
162
- --color-dark-border-tertiary-inverted-alpha-30: color-mod(#b6bcc3 alpha(30%));
163
- --color-dark-graphic-accent-alpha-30: color-mod(#ef3124 alpha(30%));
164
- --color-dark-graphic-accent-tint-10: color-mod(#ef3124 tint(10%));
165
- --color-dark-graphic-accent-tint-30: color-mod(#ef3124 tint(30%));
166
- --color-dark-graphic-negative-shade-30: color-mod(#f15045 shade(30%));
167
- --color-dark-graphic-negative-shade-50: color-mod(#f15045 shade(50%));
168
- --color-dark-graphic-neutral-tint-10: color-mod(#485767 tint(10%));
169
- --color-dark-graphic-positive-tint-10: color-mod(#2fc26e tint(10%));
170
- --color-dark-graphic-positive-tint-30: color-mod(#2fc26e tint(30%));
171
- --color-dark-graphic-primary-alpha-30: color-mod(#fff alpha(30%));
172
- --color-dark-graphic-primary-alpha-40: color-mod(#fff alpha(40%));
173
- --color-dark-graphic-primary-alpha-50: color-mod(#fff alpha(50%));
174
- --color-dark-graphic-primary-shade-30: color-mod(#fff shade(30%));
175
- --color-dark-graphic-primary-shade-50: color-mod(#fff shade(50%));
176
- --color-dark-graphic-primary-tint-10: color-mod(#fff tint(10%));
177
- --color-dark-graphic-primary-tint-30: color-mod(#fff tint(30%));
178
- --color-dark-graphic-secondary-alpha-30: color-mod(#b6bcc3 alpha(30%));
179
- --color-dark-graphic-secondary-tint-30: color-mod(#b6bcc3 tint(30%));
180
- --color-dark-graphic-secondary-tint-50: color-mod(#b6bcc3 tint(50%));
181
- --color-dark-specialbg-component-tint-7: color-mod(#485767 tint(7%));
182
- --color-dark-specialbg-component-tint-10: color-mod(#485767 tint(10%));
183
- --color-dark-specialbg-component-tint-30: color-mod(#485767 tint(30%));
184
- --color-dark-specialbg-component-inverted-shade-15: color-mod(
185
- rgba(11, 31, 53, 0.07) blenda(black 15%)
186
- );
187
- --color-dark-text-link-shade-30: color-mod(#007aff shade(30%));
188
- --color-dark-text-link-shade-50: color-mod(#007aff shade(50%));
189
- --color-dark-text-link-tint-20: color-mod(#007aff tint(20%));
190
- --color-dark-text-link-tint-40: color-mod(#007aff tint(40%));
191
- --color-dark-text-primary-alpha-30: color-mod(#fff alpha(30%));
192
- --color-dark-text-primary-shade-30: color-mod(#fff shade(30%));
193
- --color-dark-text-primary-shade-50: color-mod(#fff shade(50%));
194
- --color-dark-text-primary-tint-20: color-mod(#fff tint(20%));
195
- --color-dark-text-primary-tint-40: color-mod(#fff tint(40%));
196
- --color-dark-text-primary-inverted-alpha-40: color-mod(#0b1f35 alpha(40%));
197
- --color-dark-text-primary-inverted-shade-30: color-mod(#0b1f35 shade(30%));
198
- --color-dark-text-primary-inverted-shade-50: color-mod(#0b1f35 shade(50%));
199
- --color-dark-text-secondary-shade-30: color-mod(#b6bcc3 shade(30%));
200
- --color-dark-text-secondary-shade-50: color-mod(#b6bcc3 shade(50%));
201
- --color-dark-text-secondary-tint-20: color-mod(#b6bcc3 tint(20%));
202
- --color-dark-text-secondary-tint-40: color-mod(#b6bcc3 tint(40%));
203
- --color-dark-text-secondary-inverted-shade-30: color-mod(#6d7986 shade(30%));
204
- --color-dark-text-secondary-inverted-shade-50: color-mod(#6d7986 shade(50%));
205
- --color-light-bg-accent-alpha-30: color-mod(#ef3124 alpha(30%));
206
- --color-light-bg-accent-shade-7: color-mod(#ef3124 shade(7%));
207
- --color-light-bg-accent-shade-10: color-mod(#ef3124 shade(10%));
208
- --color-light-bg-accent-shade-15: color-mod(#ef3124 shade(15%));
209
- --color-light-bg-accent-shade-30: color-mod(#ef3124 shade(30%));
210
- --color-light-bg-neutral-alpha-30: color-mod(#dbdee1 alpha(30%));
211
- --color-light-bg-neutral-shade-7: color-mod(#dbdee1 shade(7%));
212
- --color-light-bg-neutral-shade-10: color-mod(#dbdee1 shade(10%));
213
- --color-light-bg-neutral-shade-15: color-mod(#dbdee1 shade(15%));
214
- --color-light-bg-neutral-shade-30: color-mod(#dbdee1 shade(30%));
215
- --color-light-bg-neutral-tint-15: color-mod(#dbdee1 tint(15%));
216
- --color-light-bg-primary-alpha-8: color-mod(#fff alpha(8%));
217
- --color-light-bg-primary-inverted-alpha-3: color-mod(#0b1f35 alpha(3%));
218
- --color-light-bg-primary-inverted-alpha-7: color-mod(#0b1f35 alpha(7%));
219
- --color-light-bg-primary-inverted-alpha-10: color-mod(#0b1f35 alpha(10%));
220
- --color-light-bg-primary-inverted-alpha-15: color-mod(#0b1f35 alpha(15%));
221
- --color-light-bg-primary-inverted-alpha-20: color-mod(#0b1f35 alpha(20%));
222
- --color-light-bg-primary-inverted-alpha-40: color-mod(#0b1f35 alpha(40%));
223
- --color-light-bg-primary-inverted-alpha-50: color-mod(#0b1f35 alpha(50%));
224
- --color-light-bg-secondary-inverted-alpha-7: color-mod(#233549 alpha(7%));
225
- --color-light-bg-secondary-inverted-alpha-15: color-mod(#233549 alpha(15%));
226
- --color-light-bg-tertiary-shade-7: color-mod(#e7e9eb shade(7%));
227
- --color-light-border-tertiary-inverted-alpha-30: color-mod(#6d7986 alpha(30%));
228
- --color-light-graphic-accent-alpha-30: color-mod(#ef3124 alpha(30%));
229
- --color-light-graphic-accent-shade-10: color-mod(#ef3124 shade(10%));
230
- --color-light-graphic-accent-shade-30: color-mod(#ef3124 shade(30%));
231
- --color-light-graphic-negative-tint-30: color-mod(#f15045 tint(30%));
232
- --color-light-graphic-negative-tint-50: color-mod(#f15045 tint(50%));
233
- --color-light-graphic-neutral-shade-10: color-mod(#dbdee1 shade(10%));
234
- --color-light-graphic-positive-shade-10: color-mod(#2fc26e shade(10%));
235
- --color-light-graphic-positive-shade-30: color-mod(#2fc26e shade(30%));
236
- --color-light-graphic-primary-alpha-30: color-mod(#0b1f35 alpha(30%));
237
- --color-light-graphic-primary-alpha-40: color-mod(#0b1f35 alpha(40%));
238
- --color-light-graphic-primary-alpha-50: color-mod(#0b1f35 alpha(50%));
239
- --color-light-graphic-primary-tint-30: color-mod(#0b1f35 tint(30%));
240
- --color-light-graphic-primary-tint-50: color-mod(#0b1f35 tint(50%));
241
- --color-light-graphic-primary-shade-10: color-mod(#0b1f35 shade(10%));
242
- --color-light-graphic-primary-shade-30: color-mod(#0b1f35 shade(30%));
243
- --color-light-graphic-secondary-alpha-30: color-mod(#6d7986 alpha(30%));
244
- --color-light-graphic-secondary-shade-30: color-mod(#6d7986 shade(30%));
245
- --color-light-graphic-secondary-shade-50: color-mod(#6d7986 shade(50%));
246
- --color-light-specialbg-component-shade-7: color-mod(rgba(11, 31, 53, 0.07) blenda(black 7%));
247
- --color-light-specialbg-component-shade-10: color-mod(rgba(11, 31, 53, 0.07) blenda(black 10%));
248
- --color-light-specialbg-component-shade-30: color-mod(rgba(11, 31, 53, 0.07) blenda(black 30%));
249
- --color-light-specialbg-component-inverted-tint-15: color-mod(
250
- rgba(255, 255, 255, 0.15) blenda(white 15%)
251
- );
252
- --color-light-text-link-tint-30: color-mod(#007aff tint(30%));
253
- --color-light-text-link-tint-50: color-mod(#007aff tint(50%));
254
- --color-light-text-link-shade-20: color-mod(#007aff shade(20%));
255
- --color-light-text-link-shade-40: color-mod(#007aff shade(40%));
256
- --color-light-text-primary-alpha-30: color-mod(#0b1f35 alpha(30%));
257
- --color-light-text-primary-tint-30: color-mod(#0b1f35 tint(30%));
258
- --color-light-text-primary-tint-50: color-mod(#0b1f35 tint(50%));
259
- --color-light-text-primary-shade-20: color-mod(#0b1f35 shade(20%));
260
- --color-light-text-primary-shade-40: color-mod(#0b1f35 shade(40%));
261
- --color-light-text-primary-inverted-alpha-40: color-mod(#fff alpha(40%));
262
- --color-light-text-primary-inverted-tint-30: color-mod(#fff tint(30%));
263
- --color-light-text-primary-inverted-tint-50: color-mod(#fff tint(50%));
264
- --color-light-text-secondary-tint-30: color-mod(#546272 tint(30%));
265
- --color-light-text-secondary-tint-50: color-mod(#546272 tint(50%));
266
- --color-light-text-secondary-shade-20: color-mod(#546272 shade(20%));
267
- --color-light-text-secondary-shade-40: color-mod(#546272 shade(40%));
268
- --color-light-text-secondary-inverted-tint-30: color-mod(#b6bcc3 tint(30%));
269
- --color-light-text-secondary-inverted-tint-50: color-mod(#b6bcc3 tint(50%));
270
- --color-static-bg-primary-dark-alpha-10: color-mod(#000 alpha(10%));
271
- --color-static-bg-primary-dark-alpha-20: color-mod(#000 alpha(20%));
140
+ --color-dark-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
141
+ --color-dark-bg-accent-tint-7: rgb(240, 63, 51);
142
+ --color-dark-bg-accent-tint-10: rgb(241, 70, 58);
143
+ --color-dark-bg-accent-tint-15: rgb(241, 80, 69);
144
+ --color-dark-bg-accent-tint-30: rgb(244, 111, 102);
145
+ --color-dark-bg-neutral-alpha-30: rgba(72, 87, 103, 0.3);
146
+ --color-dark-bg-neutral-tint-7: rgb(85, 99, 114);
147
+ --color-dark-bg-neutral-tint-10: rgb(90, 104, 118);
148
+ --color-dark-bg-neutral-tint-15: rgb(99, 112, 126);
149
+ --color-dark-bg-neutral-tint-30: rgb(127, 137, 149);
150
+ --color-dark-bg-neutral-shade-15: rgb(61, 74, 88);
151
+ --color-dark-bg-primary-alpha-8: rgba(11, 31, 53, 0.08);
152
+ --color-dark-bg-primary-inverted-alpha-3: rgba(255, 255, 255, 0.03);
153
+ --color-dark-bg-primary-inverted-alpha-7: rgba(255, 255, 255, 0.07);
154
+ --color-dark-bg-primary-inverted-alpha-10: rgba(255, 255, 255, 0.1);
155
+ --color-dark-bg-primary-inverted-alpha-15: rgba(255, 255, 255, 0.15);
156
+ --color-dark-bg-primary-inverted-alpha-20: rgba(255, 255, 255, 0.2);
157
+ --color-dark-bg-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
158
+ --color-dark-bg-primary-inverted-alpha-50: rgba(255, 255, 255, 0.5);
159
+ --color-dark-bg-secondary-inverted-alpha-7: rgba(182, 188, 195, 0.07);
160
+ --color-dark-bg-secondary-inverted-alpha-15: rgba(182, 188, 195, 0.15);
161
+ --color-dark-bg-tertiary-tint-7: rgb(74, 89, 104);
162
+ --color-dark-border-tertiary-inverted-alpha-30: rgba(182, 188, 195, 0.3);
163
+ --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
164
+ --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
165
+ --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
166
+ --color-dark-graphic-negative-shade-30: rgb(169, 56, 48);
167
+ --color-dark-graphic-negative-shade-50: rgb(121, 40, 35);
168
+ --color-dark-graphic-neutral-tint-10: rgb(90, 104, 118);
169
+ --color-dark-graphic-positive-tint-10: rgb(68, 200, 125);
170
+ --color-dark-graphic-positive-tint-30: rgb(109, 212, 154);
171
+ --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
172
+ --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
173
+ --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
174
+ --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
175
+ --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
176
+ --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
177
+ --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
178
+ --color-dark-graphic-primary-tint-30: rgb(255, 255, 255);
179
+ --color-dark-graphic-secondary-alpha-30: rgba(182, 188, 195, 0.3);
180
+ --color-dark-graphic-secondary-tint-30: rgb(204, 208, 213);
181
+ --color-dark-graphic-secondary-tint-50: rgb(219, 222, 225);
182
+ --color-dark-specialbg-component-tint-7: rgb(85, 99, 114);
183
+ --color-dark-specialbg-component-tint-10: rgb(90, 104, 118);
184
+ --color-dark-specialbg-component-tint-30: rgb(127, 137, 149);
185
+ --color-dark-specialbg-component-inverted-shade-15: rgba(9, 26, 45, 0.2095);
186
+ --color-dark-text-link-shade-30: rgb(0, 85, 179);
187
+ --color-dark-text-link-shade-50: rgb(0, 61, 128);
188
+ --color-dark-text-link-tint-20: rgb(51, 149, 255);
189
+ --color-dark-text-link-tint-40: rgb(102, 175, 255);
190
+ --color-dark-text-primary-alpha-30: rgba(255, 255, 255, 0.3);
191
+ --color-dark-text-primary-shade-30: rgb(179, 179, 179);
192
+ --color-dark-text-primary-shade-50: rgb(128, 128, 128);
193
+ --color-dark-text-primary-tint-20: rgb(255, 255, 255);
194
+ --color-dark-text-primary-tint-40: rgb(255, 255, 255);
195
+ --color-dark-text-primary-inverted-alpha-40: rgba(11, 31, 53, 0.4);
196
+ --color-dark-text-primary-inverted-shade-30: rgb(8, 22, 37);
197
+ --color-dark-text-primary-inverted-shade-50: rgb(6, 16, 26);
198
+ --color-dark-text-secondary-shade-30: rgb(127, 132, 136);
199
+ --color-dark-text-secondary-shade-50: rgb(91, 94, 98);
200
+ --color-dark-text-secondary-tint-20: rgb(197, 201, 207);
201
+ --color-dark-text-secondary-tint-40: rgb(211, 215, 219);
202
+ --color-dark-text-secondary-inverted-shade-30: rgb(76, 85, 94);
203
+ --color-dark-text-secondary-inverted-shade-50: rgb(55, 61, 67);
204
+ --color-light-bg-accent-alpha-30: rgba(239, 49, 36, 0.3);
205
+ --color-light-bg-accent-shade-7: rgb(222, 46, 33);
206
+ --color-light-bg-accent-shade-10: rgb(215, 44, 32);
207
+ --color-light-bg-accent-shade-15: rgb(203, 42, 31);
208
+ --color-light-bg-accent-shade-30: rgb(167, 34, 25);
209
+ --color-light-bg-neutral-alpha-30: rgba(219, 222, 225, 0.3);
210
+ --color-light-bg-neutral-shade-7: rgb(204, 206, 209);
211
+ --color-light-bg-neutral-shade-10: rgb(197, 200, 203);
212
+ --color-light-bg-neutral-shade-15: rgb(186, 189, 191);
213
+ --color-light-bg-neutral-shade-30: rgb(153, 155, 157);
214
+ --color-light-bg-neutral-tint-15: rgb(224, 227, 230);
215
+ --color-light-bg-primary-alpha-8: rgba(255, 255, 255, 0.08);
216
+ --color-light-bg-primary-inverted-alpha-3: rgba(11, 31, 53, 0.03);
217
+ --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
218
+ --color-light-bg-primary-inverted-alpha-10: rgba(11, 31, 53, 0.1);
219
+ --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
220
+ --color-light-bg-primary-inverted-alpha-20: rgba(11, 31, 53, 0.2);
221
+ --color-light-bg-primary-inverted-alpha-40: rgba(11, 31, 53, 0.4);
222
+ --color-light-bg-primary-inverted-alpha-50: rgba(11, 31, 53, 0.5);
223
+ --color-light-bg-secondary-inverted-alpha-7: rgba(35, 53, 73, 0.07);
224
+ --color-light-bg-secondary-inverted-alpha-15: rgba(35, 53, 73, 0.15);
225
+ --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
226
+ --color-light-border-tertiary-inverted-alpha-30: rgba(109, 121, 134, 0.3);
227
+ --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
228
+ --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
229
+ --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
230
+ --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
231
+ --color-light-graphic-negative-tint-50: rgb(248, 168, 162);
232
+ --color-light-graphic-neutral-shade-10: rgb(197, 200, 203);
233
+ --color-light-graphic-positive-shade-10: rgb(42, 175, 99);
234
+ --color-light-graphic-positive-shade-30: rgb(33, 136, 77);
235
+ --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
236
+ --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
237
+ --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
238
+ --color-light-graphic-primary-tint-15: rgb(48, 65, 83);
239
+ --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
240
+ --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
241
+ --color-light-graphic-primary-shade-10: rgb(10, 28, 48);
242
+ --color-light-graphic-primary-shade-30: rgb(8, 22, 37);
243
+ --color-light-graphic-secondary-alpha-30: rgba(109, 121, 134, 0.3);
244
+ --color-light-graphic-secondary-shade-30: rgb(76, 85, 94);
245
+ --color-light-graphic-secondary-shade-50: rgb(55, 61, 67);
246
+ --color-light-specialbg-component-shade-7: rgba(10, 29, 49, 0.1351);
247
+ --color-light-specialbg-component-shade-10: rgba(10, 28, 48, 0.163);
248
+ --color-light-specialbg-component-shade-30: rgba(8, 22, 37, 0.349);
249
+ --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.2775);
250
+ --color-light-text-link-tint-30: rgb(77, 162, 255);
251
+ --color-light-text-link-tint-50: rgb(128, 189, 255);
252
+ --color-light-text-link-shade-20: rgb(0, 98, 204);
253
+ --color-light-text-link-shade-40: rgb(0, 73, 153);
254
+ --color-light-text-primary-alpha-30: rgba(11, 31, 53, 0.3);
255
+ --color-light-text-primary-tint-30: rgb(84, 98, 114);
256
+ --color-light-text-primary-tint-50: rgb(133, 143, 154);
257
+ --color-light-text-primary-shade-20: rgb(9, 25, 42);
258
+ --color-light-text-primary-shade-40: rgb(7, 19, 32);
259
+ --color-light-text-primary-inverted-alpha-40: rgba(255, 255, 255, 0.4);
260
+ --color-light-text-primary-inverted-tint-30: rgb(255, 255, 255);
261
+ --color-light-text-primary-inverted-tint-50: rgb(255, 255, 255);
262
+ --color-light-text-secondary-tint-30: rgb(135, 145, 156);
263
+ --color-light-text-secondary-tint-50: rgb(170, 177, 185);
264
+ --color-light-text-secondary-shade-20: rgb(67, 78, 91);
265
+ --color-light-text-secondary-shade-40: rgb(50, 59, 68);
266
+ --color-light-text-secondary-inverted-tint-30: rgb(204, 208, 213);
267
+ --color-light-text-secondary-inverted-tint-50: rgb(219, 222, 225);
268
+ --color-static-bg-primary-dark-alpha-10: rgba(0, 0, 0, 0.1);
269
+ --color-static-bg-primary-dark-alpha-20: rgba(0, 0, 0, 0.2);
272
270
  }
package/cssm/colors-addons.css CHANGED
@@ -45,18 +45,11 @@
45
45
  --color-static-status-purple: #673ab7;
46
46
  --color-static-status-red: #d91d0b;
47
47
  --color-static-status-teal: #219187;
48
- --color-static-status-blue-tint-90: rgb(230, 242, 255);
49
48
  --color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
50
- --color-static-status-green-tint-90: rgb(231, 246, 239);
51
49
  --color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
52
- --color-static-status-grey-tint-90: rgb(240, 242, 243);
53
50
  --color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
54
- --color-static-status-orange-tint-90: rgb(252, 240, 230);
55
51
  --color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
56
- --color-static-status-purple-tint-90: rgb(240, 235, 248);
57
52
  --color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
58
- --color-static-status-red-tint-90: rgb(251, 232, 231);
59
53
  --color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
60
- --color-static-status-teal-tint-90: rgb(233, 244, 243);
61
54
  --color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
62
55
  }
package/cssm/colors-bluetint.css CHANGED
@@ -161,6 +161,7 @@
161
161
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
162
162
  --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
163
163
  --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
164
+ --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
164
165
  --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
165
166
  --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
166
167
  --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
@@ -220,6 +221,7 @@
220
221
  --color-light-graphic-primary-alpha-30: rgba(0, 0, 0, 0.3);
221
222
  --color-light-graphic-primary-alpha-40: rgba(0, 0, 0, 0.4);
222
223
  --color-light-graphic-primary-alpha-50: rgba(0, 0, 0, 0.5);
224
+ --color-light-graphic-primary-tint-15: rgb(38, 38, 38);
223
225
  --color-light-graphic-primary-tint-30: rgb(77, 77, 77);
224
226
  --color-light-graphic-primary-tint-50: rgb(128, 128, 128);
225
227
  --color-light-graphic-primary-shade-10: rgb(0, 0, 0);
package/cssm/colors-indigo.css CHANGED
@@ -171,6 +171,7 @@
171
171
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
172
172
  --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
173
173
  --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
174
+ --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
174
175
  --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
175
176
  --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
176
177
  --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
@@ -234,6 +235,7 @@
234
235
  --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
235
236
  --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
236
237
  --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
238
+ --color-light-graphic-primary-tint-15: rgb(48, 65, 83);
237
239
  --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
238
240
  --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
239
241
  --color-light-graphic-primary-shade-10: rgb(10, 28, 48);
package/cssm/index.css CHANGED
@@ -116,19 +116,12 @@
116
116
  --color-static-status-purple: #673ab7;
117
117
  --color-static-status-red: #d91d0b;
118
118
  --color-static-status-teal: #219187;
119
- --color-static-status-blue-tint-90: rgb(230, 242, 255);
120
119
  --color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
121
- --color-static-status-green-tint-90: rgb(231, 246, 239);
122
120
  --color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
123
- --color-static-status-grey-tint-90: rgb(240, 242, 243);
124
121
  --color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
125
- --color-static-status-orange-tint-90: rgb(252, 240, 230);
126
122
  --color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
127
- --color-static-status-purple-tint-90: rgb(240, 235, 248);
128
123
  --color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
129
- --color-static-status-red-tint-90: rgb(251, 232, 231);
130
124
  --color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
131
- --color-static-status-teal-tint-90: rgb(233, 244, 243);
132
125
  --color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
133
126
  }
134
127
  :root {
@@ -304,6 +297,7 @@
304
297
  --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
305
298
  --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
306
299
  --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
300
+ --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
307
301
  --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
308
302
  --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
309
303
  --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
@@ -367,6 +361,7 @@
367
361
  --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
368
362
  --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
369
363
  --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
364
+ --color-light-graphic-primary-tint-15: rgb(48, 65, 83);
370
365
  --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
371
366
  --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
372
367
  --color-light-graphic-primary-shade-10: rgb(10, 28, 48);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-vars",
3
- "version": "5.0.0",
3
+ "version": "5.3.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;