@alfalab/core-components-vars 3.1.0 → 5.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 (33) hide show
  1. package/colors-addons.css +7 -0
  2. package/colors-bluetint.css +45 -27
  3. package/colors-bluetint.d.ts +2 -0
  4. package/colors-bluetint.js +12 -0
  5. package/colors-indigo.css +26 -4
  6. package/colors-indigo.d.ts +2 -0
  7. package/colors-indigo.js +12 -0
  8. package/cssm/border-radius.css +9 -0
  9. package/cssm/colors-addons.css +62 -0
  10. package/cssm/colors-bluetint.css +250 -0
  11. package/cssm/colors-bluetint.d.ts +2 -0
  12. package/cssm/colors-bluetint.js +12 -0
  13. package/cssm/colors-indigo.css +268 -0
  14. package/cssm/colors-indigo.d.ts +2 -0
  15. package/cssm/colors-indigo.js +12 -0
  16. package/cssm/colors-transparent.css +22 -0
  17. package/cssm/colors.css +71 -0
  18. package/cssm/gaps.css +30 -0
  19. package/cssm/index.css +506 -0
  20. package/cssm/mixins.css +1 -0
  21. package/cssm/shadows-indigo.css +38 -0
  22. package/cssm/typography.css +6 -0
  23. package/esm/colors-bluetint.d.ts +2 -0
  24. package/esm/colors-bluetint.js +6 -0
  25. package/esm/colors-indigo.d.ts +2 -0
  26. package/esm/colors-indigo.js +6 -0
  27. package/modern/colors-bluetint.d.ts +2 -0
  28. package/modern/colors-bluetint.js +6 -0
  29. package/modern/colors-indigo.d.ts +2 -0
  30. package/modern/colors-indigo.js +6 -0
  31. package/package.json +1 -1
  32. package/send-stats.js +82 -0
  33. package/typography.css +36 -0
package/colors-addons.css CHANGED
@@ -46,10 +46,17 @@
46
46
  --color-static-status-red: #d91d0b;
47
47
  --color-static-status-teal: #219187;
48
48
  --color-static-status-blue-tint-90: color-mod(#007aff tint(90%));
49
+ --color-static-status-blue-alpha-10: color-mod(#007aff alpha(10%));
49
50
  --color-static-status-green-tint-90: color-mod(#13a463 tint(90%));
51
+ --color-static-status-green-alpha-10: color-mod(#13a463 alpha(10%));
50
52
  --color-static-status-grey-tint-90: color-mod(#6d7986 tint(90%));
53
+ --color-static-status-grey-alpha-10: color-mod(#6d7986 alpha(10%));
51
54
  --color-static-status-orange-tint-90: color-mod(#de6a00 tint(90%));
55
+ --color-static-status-orange-alpha-10: color-mod(#de6a00 alpha(10%));
52
56
  --color-static-status-purple-tint-90: color-mod(#673ab7 tint(90%));
57
+ --color-static-status-purple-alpha-10: color-mod(#673ab7 alpha(10%));
53
58
  --color-static-status-red-tint-90: color-mod(#d91d0b tint(90%));
59
+ --color-static-status-red-alpha-10: color-mod(#d91d0b alpha(10%));
54
60
  --color-static-status-teal-tint-90: color-mod(#219187 tint(90%));
61
+ --color-static-status-teal-alpha-10: color-mod(#219187 alpha(10%));
55
62
  }
package/colors-bluetint.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --color-dark-bg-accent: #e81f11;
2
+ --color-dark-bg-accent: #ef3124;
3
3
  --color-dark-bg-attention-muted: #332104;
4
4
  --color-dark-bg-info: #001c3c;
5
5
  --color-dark-bg-negative-muted: #35110d;
@@ -13,7 +13,7 @@
13
13
  --color-dark-bg-secondary-inverted: #f3f4f5;
14
14
  --color-dark-bg-tertiary: #2c2c2e;
15
15
  --color-dark-bg-tertiary-inverted: #e9e9eb;
16
- --color-dark-border-accent: #e81f11;
16
+ --color-dark-border-accent: #ef3124;
17
17
  --color-dark-border-key: #fff;
18
18
  --color-dark-border-key-inverted: #121212;
19
19
  --color-dark-border-primary: #2b2b2e;
@@ -21,7 +21,7 @@
21
21
  --color-dark-border-secondary-inverted: #e9e9eb;
22
22
  --color-dark-border-tertiary: #1c1c1e;
23
23
  --color-dark-border-tertiary-inverted: #f3f4f5;
24
- --color-dark-graphic-accent: #e81f11;
24
+ --color-dark-graphic-accent: #ef3124;
25
25
  --color-dark-graphic-attention: #f6bf65;
26
26
  --color-dark-graphic-link: #0072ef;
27
27
  --color-dark-graphic-negative: #d91d0b;
@@ -35,7 +35,7 @@
35
35
  --color-dark-specialbg-primary-grouped: #202022;
36
36
  --color-dark-specialbg-secondary-grouped: #2c2c2e;
37
37
  --color-dark-specialbg-tertiary-grouped: #3a3a3c;
38
- --color-dark-text-accent: #e81f11;
38
+ --color-dark-text-accent: #ef3124;
39
39
  --color-dark-text-attention: #cb830f;
40
40
  --color-dark-text-disabled: #2a2a2c;
41
41
  --color-dark-text-disabled-transparent: rgba(235, 235, 245, 0.18);
@@ -52,7 +52,7 @@
52
52
  --color-dark-text-tertiary-inverted: #c5c5c7;
53
53
  --color-dark-text-tertiary-inverted-transparent: rgba(60, 60, 67, 0.3);
54
54
  --color-dark-text-tertiary-transparent: rgba(235, 235, 245, 0.3);
55
- --color-light-bg-accent: #e81f11;
55
+ --color-light-bg-accent: #ef3124;
56
56
  --color-light-bg-attention-muted: #f7ebd9;
57
57
  --color-light-bg-info: #d6e8fc;
58
58
  --color-light-bg-negative-muted: #fbe8e7;
@@ -66,7 +66,7 @@
66
66
  --color-light-bg-secondary-inverted: #202022;
67
67
  --color-light-bg-tertiary: #e9e9eb;
68
68
  --color-light-bg-tertiary-inverted: #2c2c2e;
69
- --color-light-border-accent: #e81f11;
69
+ --color-light-border-accent: #ef3124;
70
70
  --color-light-border-key: #000;
71
71
  --color-light-border-key-inverted: #fff;
72
72
  --color-light-border-primary: #dcdcdd;
@@ -74,7 +74,7 @@
74
74
  --color-light-border-secondary-inverted: #262629;
75
75
  --color-light-border-tertiary: #f3f4f5;
76
76
  --color-light-border-tertiary-inverted: #1c1c1e;
77
- --color-light-graphic-accent: #e81f11;
77
+ --color-light-graphic-accent: #ef3124;
78
78
  --color-light-graphic-attention: #f6bf65;
79
79
  --color-light-graphic-link: #0072ef;
80
80
  --color-light-graphic-negative: #f15045;
@@ -88,7 +88,7 @@
88
88
  --color-light-specialbg-primary-grouped: #f3f4f5;
89
89
  --color-light-specialbg-secondary-grouped: #fff;
90
90
  --color-light-specialbg-tertiary-grouped: #f3f4f5;
91
- --color-light-text-accent: #e81f11;
91
+ --color-light-text-accent: #ef3124;
92
92
  --color-light-text-attention: #cb830f;
93
93
  --color-light-text-disabled: #dcdcdd;
94
94
  --color-light-text-disabled-transparent: rgba(60, 60, 67, 0.18);
@@ -105,18 +105,18 @@
105
105
  --color-light-text-tertiary-inverted: #464649;
106
106
  --color-light-text-tertiary-inverted-transparent: rgba(235, 235, 245, 0.3);
107
107
  --color-light-text-tertiary-transparent: rgba(60, 60, 67, 0.3);
108
- --color-static-bg-accent: #e81f11;
108
+ --color-static-bg-accent: #ef3124;
109
109
  --color-static-bg-neutral-dark: #3a3a3c;
110
110
  --color-static-bg-neutral-light: #dcdcdd;
111
111
  --color-static-bg-primary-dark: #121212;
112
112
  --color-static-bg-primary-light: #fff;
113
113
  --color-static-bg-secondary-dark: #202022;
114
114
  --color-static-bg-secondary-light: #f3f4f5;
115
- --color-static-border-accent: #e81f11;
115
+ --color-static-border-accent: #ef3124;
116
116
  --color-static-graphic-accent: #ef3124;
117
117
  --color-static-graphic-dark: #000;
118
118
  --color-static-graphic-light: #fff;
119
- --color-static-text-accent: #e81f11;
119
+ --color-static-text-accent: #ef3124;
120
120
  --color-static-text-primary-dark: #000;
121
121
  --color-static-text-primary-light: #fff;
122
122
  --color-static-text-secondary-dark: #8a8a8e;
@@ -127,29 +127,32 @@
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(#e81f11 alpha(30%));
131
- --color-dark-bg-accent-tint-7: color-mod(#e81f11 tint(7%));
132
- --color-dark-bg-accent-tint-10: color-mod(#e81f11 tint(10%));
133
- --color-dark-bg-accent-tint-15: color-mod(#e81f11 tint(15%));
134
- --color-dark-bg-accent-tint-30: color-mod(#e81f11 tint(30%));
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
135
  --color-dark-bg-neutral-alpha-30: color-mod(#3a3a3c alpha(30%));
136
136
  --color-dark-bg-neutral-tint-7: color-mod(#3a3a3c tint(7%));
137
137
  --color-dark-bg-neutral-tint-10: color-mod(#3a3a3c tint(10%));
138
138
  --color-dark-bg-neutral-tint-15: color-mod(#3a3a3c tint(15%));
139
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%));
140
142
  --color-dark-bg-primary-inverted-alpha-3: color-mod(#fff alpha(3%));
141
143
  --color-dark-bg-primary-inverted-alpha-7: color-mod(#fff alpha(7%));
142
144
  --color-dark-bg-primary-inverted-alpha-10: color-mod(#fff alpha(10%));
143
145
  --color-dark-bg-primary-inverted-alpha-15: color-mod(#fff alpha(15%));
144
146
  --color-dark-bg-primary-inverted-alpha-20: color-mod(#fff alpha(20%));
145
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%));
146
149
  --color-dark-bg-secondary-inverted-alpha-7: color-mod(#f3f4f5 alpha(7%));
147
150
  --color-dark-bg-secondary-inverted-alpha-15: color-mod(#f3f4f5 alpha(15%));
148
151
  --color-dark-bg-tertiary-tint-7: color-mod(#2c2c2e tint(7%));
149
152
  --color-dark-border-tertiary-inverted-alpha-30: color-mod(#f3f4f5 alpha(30%));
150
- --color-dark-graphic-accent-alpha-30: color-mod(#e81f11 alpha(30%));
151
- --color-dark-graphic-accent-tint-10: color-mod(#e81f11 tint(10%));
152
- --color-dark-graphic-accent-tint-30: color-mod(#e81f11 tint(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%));
153
156
  --color-dark-graphic-negative-shade-30: color-mod(#d91d0b shade(30%));
154
157
  --color-dark-graphic-negative-shade-50: color-mod(#d91d0b shade(50%));
155
158
  --color-dark-graphic-neutral-tint-10: color-mod(#2a2a2c tint(10%));
@@ -174,33 +177,41 @@
174
177
  --color-dark-text-primary-shade-50: color-mod(#fff shade(50%));
175
178
  --color-dark-text-primary-tint-20: color-mod(#fff tint(20%));
176
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%));
177
183
  --color-dark-text-secondary-shade-30: color-mod(#8d8d93 shade(30%));
178
184
  --color-dark-text-secondary-shade-50: color-mod(#8d8d93 shade(50%));
179
185
  --color-dark-text-secondary-tint-20: color-mod(#8d8d93 tint(20%));
180
186
  --color-dark-text-secondary-tint-40: color-mod(#8d8d93 tint(40%));
181
- --color-light-bg-accent-alpha-30: color-mod(#e81f11 alpha(30%));
182
- --color-light-bg-accent-shade-7: color-mod(#e81f11 shade(7%));
183
- --color-light-bg-accent-shade-10: color-mod(#e81f11 shade(10%));
184
- --color-light-bg-accent-shade-15: color-mod(#e81f11 shade(15%));
185
- --color-light-bg-accent-shade-30: color-mod(#e81f11 shade(30%));
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%));
186
194
  --color-light-bg-neutral-alpha-30: color-mod(#dcdcdd alpha(30%));
187
195
  --color-light-bg-neutral-shade-7: color-mod(#dcdcdd shade(7%));
188
196
  --color-light-bg-neutral-shade-10: color-mod(#dcdcdd shade(10%));
189
197
  --color-light-bg-neutral-shade-15: color-mod(#dcdcdd shade(15%));
190
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%));
191
201
  --color-light-bg-primary-inverted-alpha-3: color-mod(#121212 alpha(3%));
192
202
  --color-light-bg-primary-inverted-alpha-7: color-mod(#121212 alpha(7%));
193
203
  --color-light-bg-primary-inverted-alpha-10: color-mod(#121212 alpha(10%));
194
204
  --color-light-bg-primary-inverted-alpha-15: color-mod(#121212 alpha(15%));
195
205
  --color-light-bg-primary-inverted-alpha-20: color-mod(#121212 alpha(20%));
196
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%));
197
208
  --color-light-bg-secondary-inverted-alpha-7: color-mod(#202022 alpha(7%));
198
209
  --color-light-bg-secondary-inverted-alpha-15: color-mod(#202022 alpha(15%));
199
210
  --color-light-bg-tertiary-shade-7: color-mod(#e9e9eb shade(7%));
200
211
  --color-light-border-tertiary-inverted-alpha-30: color-mod(#1c1c1e alpha(30%));
201
- --color-light-graphic-accent-alpha-30: color-mod(#e81f11 alpha(30%));
202
- --color-light-graphic-accent-shade-10: color-mod(#e81f11 shade(10%));
203
- --color-light-graphic-accent-shade-30: color-mod(#e81f11 shade(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%));
204
215
  --color-light-graphic-negative-tint-30: color-mod(#f15045 tint(30%));
205
216
  --color-light-graphic-negative-tint-50: color-mod(#f15045 tint(50%));
206
217
  --color-light-graphic-neutral-shade-10: color-mod(#dcdcdd shade(10%));
@@ -225,8 +236,15 @@
225
236
  --color-light-text-primary-tint-50: color-mod(#000 tint(50%));
226
237
  --color-light-text-primary-shade-20: color-mod(#000 shade(20%));
227
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%));
228
242
  --color-light-text-secondary-tint-30: color-mod(#8a8a8e tint(30%));
229
243
  --color-light-text-secondary-tint-50: color-mod(#8a8a8e tint(50%));
230
244
  --color-light-text-secondary-shade-20: color-mod(#8a8a8e shade(20%));
231
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%));
232
250
  }
package/colors-bluetint.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: string;
2
+ export { _default as default };
package/colors-bluetint.js ADDED
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ var styles = require('!!css-loader!@alfalab/core-components/vars/colors-bluetint.css');
4
+
5
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
6
+
7
+ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
8
+
9
+ // eslint-disable-next-line import/no-webpack-loader-syntax
10
+ var colorsBluetint = styles__default['default'].toString();
11
+
12
+ module.exports = colorsBluetint;
package/colors-indigo.css CHANGED
@@ -22,6 +22,8 @@
22
22
  --color-dark-border-secondary-inverted: #6d7986;
23
23
  --color-dark-border-tertiary: #233549;
24
24
  --color-dark-border-tertiary-inverted: #b6bcc3;
25
+ --color-dark-border-underline: #6d7986;
26
+ --color-dark-border-underline-inverted: #b6bcc3;
25
27
  --color-dark-graphic-accent: #ef3124;
26
28
  --color-dark-graphic-attention: #e58933;
27
29
  --color-dark-graphic-link: #007aff;
@@ -34,6 +36,7 @@
34
36
  --color-dark-graphic-secondary-inverted: #233549;
35
37
  --color-dark-graphic-tertiary: #6d7986;
36
38
  --color-dark-specialbg-component: #485767;
39
+ --color-dark-specialbg-component-inverted: rgba(11, 31, 53, 0.07);
37
40
  --color-dark-specialbg-nulled: rgba(11, 31, 53, 0);
38
41
  --color-dark-specialbg-primary-grouped: #0b1f35;
39
42
  --color-dark-specialbg-secondary-grouped: #233549;
@@ -78,6 +81,8 @@
78
81
  --color-light-border-secondary-inverted: #b6bcc3;
79
82
  --color-light-border-tertiary: #f3f4f5;
80
83
  --color-light-border-tertiary-inverted: #6d7986;
84
+ --color-light-border-underline: #b6bcc3;
85
+ --color-light-border-underline-inverted: #6d7986;
81
86
  --color-light-graphic-accent: #ef3124;
82
87
  --color-light-graphic-attention: #e58933;
83
88
  --color-light-graphic-link: #007aff;
@@ -142,12 +147,15 @@
142
147
  --color-dark-bg-neutral-tint-10: color-mod(#485767 tint(10%));
143
148
  --color-dark-bg-neutral-tint-15: color-mod(#485767 tint(15%));
144
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%));
145
152
  --color-dark-bg-primary-inverted-alpha-3: color-mod(#fff alpha(3%));
146
153
  --color-dark-bg-primary-inverted-alpha-7: color-mod(#fff alpha(7%));
147
154
  --color-dark-bg-primary-inverted-alpha-10: color-mod(#fff alpha(10%));
148
155
  --color-dark-bg-primary-inverted-alpha-15: color-mod(#fff alpha(15%));
149
156
  --color-dark-bg-primary-inverted-alpha-20: color-mod(#fff alpha(20%));
150
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%));
151
159
  --color-dark-bg-secondary-inverted-alpha-7: color-mod(#b6bcc3 alpha(7%));
152
160
  --color-dark-bg-secondary-inverted-alpha-15: color-mod(#b6bcc3 alpha(15%));
153
161
  --color-dark-bg-tertiary-tint-7: color-mod(#3c4c5d tint(7%));
@@ -173,6 +181,9 @@
173
181
  --color-dark-specialbg-component-tint-7: color-mod(#485767 tint(7%));
174
182
  --color-dark-specialbg-component-tint-10: color-mod(#485767 tint(10%));
175
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
+ );
176
187
  --color-dark-text-link-shade-30: color-mod(#007aff shade(30%));
177
188
  --color-dark-text-link-shade-50: color-mod(#007aff shade(50%));
178
189
  --color-dark-text-link-tint-20: color-mod(#007aff tint(20%));
@@ -182,10 +193,15 @@
182
193
  --color-dark-text-primary-shade-50: color-mod(#fff shade(50%));
183
194
  --color-dark-text-primary-tint-20: color-mod(#fff tint(20%));
184
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%));
185
199
  --color-dark-text-secondary-shade-30: color-mod(#b6bcc3 shade(30%));
186
200
  --color-dark-text-secondary-shade-50: color-mod(#b6bcc3 shade(50%));
187
201
  --color-dark-text-secondary-tint-20: color-mod(#b6bcc3 tint(20%));
188
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%));
189
205
  --color-light-bg-accent-alpha-30: color-mod(#ef3124 alpha(30%));
190
206
  --color-light-bg-accent-shade-7: color-mod(#ef3124 shade(7%));
191
207
  --color-light-bg-accent-shade-10: color-mod(#ef3124 shade(10%));
@@ -196,12 +212,15 @@
196
212
  --color-light-bg-neutral-shade-10: color-mod(#dbdee1 shade(10%));
197
213
  --color-light-bg-neutral-shade-15: color-mod(#dbdee1 shade(15%));
198
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%));
199
217
  --color-light-bg-primary-inverted-alpha-3: color-mod(#0b1f35 alpha(3%));
200
218
  --color-light-bg-primary-inverted-alpha-7: color-mod(#0b1f35 alpha(7%));
201
219
  --color-light-bg-primary-inverted-alpha-10: color-mod(#0b1f35 alpha(10%));
202
220
  --color-light-bg-primary-inverted-alpha-15: color-mod(#0b1f35 alpha(15%));
203
221
  --color-light-bg-primary-inverted-alpha-20: color-mod(#0b1f35 alpha(20%));
204
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%));
205
224
  --color-light-bg-secondary-inverted-alpha-7: color-mod(#233549 alpha(7%));
206
225
  --color-light-bg-secondary-inverted-alpha-15: color-mod(#233549 alpha(15%));
207
226
  --color-light-bg-tertiary-shade-7: color-mod(#e7e9eb shade(7%));
@@ -239,12 +258,15 @@
239
258
  --color-light-text-primary-tint-50: color-mod(#0b1f35 tint(50%));
240
259
  --color-light-text-primary-shade-20: color-mod(#0b1f35 shade(20%));
241
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%));
242
264
  --color-light-text-secondary-tint-30: color-mod(#546272 tint(30%));
243
265
  --color-light-text-secondary-tint-50: color-mod(#546272 tint(50%));
244
266
  --color-light-text-secondary-shade-20: color-mod(#546272 shade(20%));
245
267
  --color-light-text-secondary-shade-40: color-mod(#546272 shade(40%));
246
-
247
- /* TODO: цвета добавлены руками. Обновить токены */
248
- --color-light-border-underline-inverted: #6d7986;
249
- --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
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%));
250
272
  }
package/colors-indigo.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: string;
2
+ export { _default as default };
package/colors-indigo.js ADDED
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ var styles = require('!!css-loader!@alfalab/core-components/vars/colors-indigo.css');
4
+
5
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
6
+
7
+ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
8
+
9
+ // eslint-disable-next-line import/no-webpack-loader-syntax
10
+ var colorsIndigo = styles__default['default'].toString();
11
+
12
+ module.exports = colorsIndigo;
package/cssm/border-radius.css ADDED
@@ -0,0 +1,9 @@
1
+ :root {
2
+ --border-radius-xs: 2px;
3
+ --border-radius-s: 4px;
4
+ --border-radius-m: 8px;
5
+ --border-radius-l: 12px;
6
+ --border-radius-xl: 16px;
7
+ --border-radius-circle: 50%;
8
+ --border-radius-pill: 99px;
9
+ }
package/cssm/colors-addons.css ADDED
@@ -0,0 +1,62 @@
1
+ :root {
2
+ --color-static-graphic-amethyst: #a489aa;
3
+ --color-static-graphic-blackberry: #bfafc6;
4
+ --color-static-graphic-blue-maya: #7eb3ff;
5
+ --color-static-graphic-blue-moody: #7879cf;
6
+ --color-static-graphic-blue-steel: #4f84ba;
7
+ --color-static-graphic-botticelli: #cee5e5;
8
+ --color-static-graphic-carrot: #e8bba3;
9
+ --color-static-graphic-chick: #f2db9e;
10
+ --color-static-graphic-gallery: #eee;
11
+ --color-static-graphic-green-jungle: #2fc26e;
12
+ --color-static-graphic-lavender: #8888ad;
13
+ --color-static-graphic-olive: #bfd3c9;
14
+ --color-static-graphic-peach: #fcc99b;
15
+ --color-static-graphic-persimmon: #ff5c5c;
16
+ --color-static-graphic-raspberry: #dfb2bb;
17
+ --color-static-graphic-salomie: #fee984;
18
+ --color-static-graphic-sand: #f6bf65;
19
+ --color-static-graphic-seawater: #aecfd9;
20
+ --color-static-graphic-sky: #a6c0db;
21
+ --color-static-graphic-soft-peach: #f3eaeb;
22
+ --color-static-graphic-solitude: #e8f2fe;
23
+ --color-static-graphic-strawberry: #f8b6a9;
24
+ --color-static-graphic-sundust: #d9d6ce;
25
+ --color-static-local-light-blue: #f5f7f9;
26
+ --color-static-overlay-black-high: rgba(0, 0, 0, 0.32);
27
+ --color-static-overlay-black-low: rgba(0, 0, 0, 0.16);
28
+ --color-static-overlay-black-normal: rgba(0, 0, 0, 0.24);
29
+ --color-static-overlay-black-xhigh: rgba(0, 0, 0, 0.4);
30
+ --color-static-overlay-black-xlow: rgba(0, 0, 0, 0.08);
31
+ --color-static-overlay-indigo-high: rgba(11, 31, 53, 0.32);
32
+ --color-static-overlay-indigo-low: rgba(11, 31, 53, 0.16);
33
+ --color-static-overlay-indigo-normal: rgba(11, 31, 53, 0.24);
34
+ --color-static-overlay-indigo-xhigh: rgba(11, 31, 53, 0.4);
35
+ --color-static-overlay-indigo-xlow: rgba(11, 31, 53, 0.08);
36
+ --color-static-overlay-white-high: rgba(255, 255, 255, 0.32);
37
+ --color-static-overlay-white-low: rgba(255, 255, 255, 0.16);
38
+ --color-static-overlay-white-normal: rgba(255, 255, 255, 0.24);
39
+ --color-static-overlay-white-xhigh: rgba(255, 255, 255, 0.4);
40
+ --color-static-overlay-white-xlow: rgba(255, 255, 255, 0.08);
41
+ --color-static-status-blue: #007aff;
42
+ --color-static-status-green: #13a463;
43
+ --color-static-status-grey: #6d7986;
44
+ --color-static-status-orange: #de6a00;
45
+ --color-static-status-purple: #673ab7;
46
+ --color-static-status-red: #d91d0b;
47
+ --color-static-status-teal: #219187;
48
+ --color-static-status-blue-tint-90: rgb(230, 242, 255);
49
+ --color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
50
+ --color-static-status-green-tint-90: rgb(231, 246, 239);
51
+ --color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
52
+ --color-static-status-grey-tint-90: rgb(240, 242, 243);
53
+ --color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
54
+ --color-static-status-orange-tint-90: rgb(252, 240, 230);
55
+ --color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
56
+ --color-static-status-purple-tint-90: rgb(240, 235, 248);
57
+ --color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
58
+ --color-static-status-red-tint-90: rgb(251, 232, 231);
59
+ --color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
60
+ --color-static-status-teal-tint-90: rgb(233, 244, 243);
61
+ --color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
62
+ }