@medyll/cssfabric 0.1.0 → 0.1.1

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 (44) hide show
  1. package/lib/styles/core/box/box.css +756 -1842
  2. package/lib/styles/core/box/box.min.css +1 -1
  3. package/lib/styles/core/box/box.responsive.css +3757 -10552
  4. package/lib/styles/core/box/box.responsive.min.css +1 -1
  5. package/lib/styles/core/color/color.css +908 -266
  6. package/lib/styles/core/color/color.min.css +1 -1
  7. package/lib/styles/core/color/color.responsive.css +4011 -2368
  8. package/lib/styles/core/color/color.responsive.min.css +1 -1
  9. package/lib/styles/core/flex/flex.responsive.css +0 -126
  10. package/lib/styles/core/flex/flex.responsive.min.css +1 -1
  11. package/lib/styles/core/grid/grid.responsive.css +0 -121
  12. package/lib/styles/core/grid/grid.responsive.min.css +1 -1
  13. package/lib/styles/core/menu/menu.responsive.css +0 -81
  14. package/lib/styles/core/menu/menu.responsive.min.css +1 -1
  15. package/lib/styles/core/overflow/overflow.responsive.css +0 -61
  16. package/lib/styles/core/overflow/overflow.responsive.min.css +1 -1
  17. package/lib/styles/core/scale/scale.css +286 -206
  18. package/lib/styles/core/scale/scale.min.css +1 -1
  19. package/lib/styles/core/scale/scale.responsive.css +1157 -1478
  20. package/lib/styles/core/scale/scale.responsive.min.css +1 -1
  21. package/lib/styles/core/table/table.responsive.css +0 -74
  22. package/lib/styles/core/table/table.responsive.min.css +1 -1
  23. package/lib/styles/core/text/text.css +4 -0
  24. package/lib/styles/core/text/text.responsive.css +0 -549
  25. package/lib/styles/core/text/text.responsive.min.css +1 -1
  26. package/lib/styles/core/vars.css +261 -125
  27. package/lib/styles/core/vars.min.css +1 -1
  28. package/lib/styles/cssfabric.css +2626 -2850
  29. package/lib/styles/cssfabric.min.css +4 -4
  30. package/lib/styles/cssfabric.responsive.css +10959 -17444
  31. package/lib/styles/cssfabric.responsive.min.css +9 -9
  32. package/package.json +1 -1
  33. package/src/_generated/export.variables.json +77 -78
  34. package/src/cssfabric/_utils.scss +22 -12
  35. package/src/cssfabric/modules/_cssfabric-config.scss +87 -17
  36. package/src/cssfabric/modules/box/_box-build.scss +103 -84
  37. package/src/cssfabric/modules/box/_box-vars.scss +48 -46
  38. package/src/cssfabric/modules/color/_color-build.scss +108 -24
  39. package/src/cssfabric/modules/scale/_scale-build.scss +26 -13
  40. package/src/cssfabric/modules/scale/_scale-vars.scss +50 -51
  41. package/src/cssfabric/modules/text/_text-build.scss +60 -3
  42. package/src/cssfabric/modules/text/text-responsive.scss +1 -0
  43. package/src/cssfabric/modules/theme/_theme-build.scss +27 -10
  44. package/src/cssfabric/modules/vars.scss +19 -86
package/lib/styles/core/vars.css CHANGED
@@ -1,16 +1,16 @@
1
1
  /* cssFabric vars */
2
2
  :root {
3
3
  /* theme primary colors*/
4
- --theme-color-primary: #0288d1;
5
- --theme-color-primary-light: #23b0fd;
6
- --theme-color-primary-lighter: #6ecbfe;
7
- --theme-color-primary-dark: #02679e;
8
- --theme-color-primary-darker: #01466c;
9
- --theme-color-primary-complement: #d14b02;
10
- --theme-color-primary-invert: #fd772e;
11
- --theme-color-primary-alpha-low: rgba(2, 136, 209, 0.8);
12
- --theme-color-primary-alpha-mid: rgba(2, 136, 209, 0.3);
13
- --theme-color-primary-alpha-high: rgba(2, 136, 209, 0.1);
4
+ --theme-color-primary: #431700;
5
+ --theme-color-primary-light: #903100;
6
+ --theme-color-primary-lighter: #dc4c00;
7
+ --theme-color-primary-dark: #100500;
8
+ --theme-color-primary-darker: black;
9
+ --theme-color-primary-complement: #002c43;
10
+ --theme-color-primary-invert: #bce8ff;
11
+ --theme-color-primary-alpha-low: rgba(67, 23, 0, 0.8);
12
+ --theme-color-primary-alpha: rgba(67, 23, 0, 0.3);
13
+ --theme-color-primary-alpha-high: rgba(67, 23, 0, 0.1);
14
14
  /* theme secondary colors*/
15
15
  --theme-color-secondary: #D14B02;
16
16
  --theme-color-secondary-light: #fd7023;
@@ -20,7 +20,7 @@
20
20
  --theme-color-secondary-complement: #0288d1;
21
21
  --theme-color-secondary-invert: #2eb4fd;
22
22
  --theme-color-secondary-alpha-low: rgba(209, 75, 2, 0.8);
23
- --theme-color-secondary-alpha-mid: rgba(209, 75, 2, 0.3);
23
+ --theme-color-secondary-alpha: rgba(209, 75, 2, 0.3);
24
24
  --theme-color-secondary-alpha-high: rgba(209, 75, 2, 0.1);
25
25
  /* theme tertiary colors*/
26
26
  --theme-color-tertiary: #88D102;
@@ -31,192 +31,233 @@
31
31
  --theme-color-tertiary-complement: #4b02d1;
32
32
  --theme-color-tertiary-invert: #772efd;
33
33
  --theme-color-tertiary-alpha-low: rgba(136, 209, 2, 0.8);
34
- --theme-color-tertiary-alpha-mid: rgba(136, 209, 2, 0.3);
34
+ --theme-color-tertiary-alpha: rgba(136, 209, 2, 0.3);
35
35
  --theme-color-tertiary-alpha-high: rgba(136, 209, 2, 0.1);
36
- --theme-color-foreground: #282230;
37
- --theme-color-text: #282230;
38
- --theme-color-background: #f1f1f1;
39
- --theme-color-paper: #ededed;
40
- --theme-color-border: rgba(208, 191, 151, 0.3);
41
- --theme-color-overlay: rgba(208, 191, 151, 0.2);
42
- /* color-scheme */
36
+ /* color-scheme primary secondary tertiary */
43
37
  --color-scheme-discrete: #ccc;
44
38
  --color-scheme-discrete-light: #f2f2f2;
45
39
  --color-scheme-discrete-dark: #b3b3b3;
40
+ --color-scheme-discrete-alpha: rgba(204, 204, 204, 0.3);
41
+ --color-scheme-discrete-alpha-low: rgba(204, 204, 204, 0.8);
42
+ --color-scheme-discrete-alpha-high: rgba(204, 204, 204, 0.1);
46
43
  --color-scheme-success: green;
47
44
  --color-scheme-success-light: #00cd00;
48
45
  --color-scheme-success-dark: #004d00;
46
+ --color-scheme-success-alpha: rgba(0, 128, 0, 0.3);
47
+ --color-scheme-success-alpha-low: rgba(0, 128, 0, 0.8);
48
+ --color-scheme-success-alpha-high: rgba(0, 128, 0, 0.1);
49
49
  --color-scheme-info: #ffdd57;
50
50
  --color-scheme-info-light: #ffeda3;
51
51
  --color-scheme-info-dark: #ffd324;
52
+ --color-scheme-info-alpha: rgba(255, 221, 87, 0.3);
53
+ --color-scheme-info-alpha-low: rgba(255, 221, 87, 0.8);
54
+ --color-scheme-info-alpha-high: rgba(255, 221, 87, 0.1);
52
55
  --color-scheme-warning: #e6b905;
53
56
  --color-scheme-warning-light: #fbd53c;
54
57
  --color-scheme-warning-dark: #b49104;
58
+ --color-scheme-warning-alpha: rgba(230, 185, 5, 0.3);
59
+ --color-scheme-warning-alpha-low: rgba(230, 185, 5, 0.8);
60
+ --color-scheme-warning-alpha-high: rgba(230, 185, 5, 0.1);
55
61
  --color-scheme-alert: #ff7300;
56
62
  --color-scheme-alert-light: #ff9d4d;
57
63
  --color-scheme-alert-dark: #cc5c00;
64
+ --color-scheme-alert-alpha: rgba(255, 115, 0, 0.3);
65
+ --color-scheme-alert-alpha-low: rgba(255, 115, 0, 0.8);
66
+ --color-scheme-alert-alpha-high: rgba(255, 115, 0, 0.1);
58
67
  --color-scheme-error: red;
59
68
  --color-scheme-error-light: #ff4d4d;
60
69
  --color-scheme-error-dark: #cc0000;
70
+ --color-scheme-error-alpha: rgba(255, 0, 0, 0.3);
71
+ --color-scheme-error-alpha-low: rgba(255, 0, 0, 0.8);
72
+ --color-scheme-error-alpha-high: rgba(255, 0, 0, 0.1);
61
73
  /* color-palette */
62
- /* color-palette yellow */
63
74
  --color-palette-yellow: #ffb900;
75
+ --color-palette-yellow-alpha: rgba(255, 185, 0, 0.3);
76
+ --color-palette-yellow-alpha-low: rgba(255, 185, 0, 0.8);
77
+ --color-palette-yellow-alpha-high: rgba(255, 185, 0, 0.1);
64
78
  --color-palette-yellow-lighter: #ffe399;
65
79
  --color-palette-yellow-light: #ffce4d;
66
80
  --color-palette-yellow-dark: #cc9400;
67
81
  --color-palette-yellow-darker: #996f00;
68
82
  --color-palette-yellow-complement: #0046ff;
83
+ --color-palette-yellow-complement-alpha: rgba(0, 70, 255, 0.3);
84
+ --color-palette-yellow-complement-alpha-low: rgba(0, 70, 255, 0.8);
85
+ --color-palette-yellow-complement-alpha-high: rgba(0, 70, 255, 0.1);
69
86
  --color-palette-yellow-invert: #0046ff;
70
- --color-palette-yellow-alpha-low: rgba(255, 185, 0, 0.8);
71
- --color-palette-yellow-alpha-mid: rgba(255, 185, 0, 0.3);
72
- --color-palette-yellow-alpha-high: rgba(255, 185, 0, 0.1);
73
- /* color-palette orange */
87
+ --color-palette-yellow-invert-alpha: rgba(0, 70, 255, 0.3);
88
+ --color-palette-yellow-invert-alpha-low: rgba(0, 70, 255, 0.8);
89
+ --color-palette-yellow-invert-alpha-high: rgba(0, 70, 255, 0.1);
74
90
  --color-palette-orange: #d83b01;
91
+ --color-palette-orange-alpha: rgba(216, 59, 1, 0.3);
92
+ --color-palette-orange-alpha-low: rgba(216, 59, 1, 0.8);
93
+ --color-palette-orange-alpha-high: rgba(216, 59, 1, 0.1);
75
94
  --color-palette-orange-lighter: #fe9974;
76
95
  --color-palette-orange-light: #fe6127;
77
96
  --color-palette-orange-dark: #a52d01;
78
97
  --color-palette-orange-darker: #721f01;
79
98
  --color-palette-orange-complement: #019ed8;
99
+ --color-palette-orange-complement-alpha: rgba(1, 158, 216, 0.3);
100
+ --color-palette-orange-complement-alpha-low: rgba(1, 158, 216, 0.8);
101
+ --color-palette-orange-complement-alpha-high: rgba(1, 158, 216, 0.1);
80
102
  --color-palette-orange-invert: #27c4fe;
81
- --color-palette-orange-alpha-low: rgba(216, 59, 1, 0.8);
82
- --color-palette-orange-alpha-mid: rgba(216, 59, 1, 0.3);
83
- --color-palette-orange-alpha-high: rgba(216, 59, 1, 0.1);
84
- /* color-palette red */
103
+ --color-palette-orange-invert-alpha: rgba(39, 196, 254, 0.3);
104
+ --color-palette-orange-invert-alpha-low: rgba(39, 196, 254, 0.8);
105
+ --color-palette-orange-invert-alpha-high: rgba(39, 196, 254, 0.1);
85
106
  --color-palette-red: #d13438;
107
+ --color-palette-red-alpha: rgba(209, 52, 56, 0.3);
108
+ --color-palette-red-alpha-low: rgba(209, 52, 56, 0.8);
109
+ --color-palette-red-alpha-high: rgba(209, 52, 56, 0.1);
86
110
  --color-palette-red-lighter: #edb1b2;
87
111
  --color-palette-red-light: #df7275;
88
112
  --color-palette-red-dark: #ab272a;
89
113
  --color-palette-red-darker: #821d20;
90
114
  --color-palette-red-complement: #34d1cd;
115
+ --color-palette-red-complement-alpha: rgba(52, 209, 205, 0.3);
116
+ --color-palette-red-complement-alpha-low: rgba(52, 209, 205, 0.8);
117
+ --color-palette-red-complement-alpha-high: rgba(52, 209, 205, 0.1);
91
118
  --color-palette-red-invert: #2ecbc7;
92
- --color-palette-red-alpha-low: rgba(209, 52, 56, 0.8);
93
- --color-palette-red-alpha-mid: rgba(209, 52, 56, 0.3);
94
- --color-palette-red-alpha-high: rgba(209, 52, 56, 0.1);
95
- /* color-palette magenta */
119
+ --color-palette-red-invert-alpha: rgba(46, 203, 199, 0.3);
120
+ --color-palette-red-invert-alpha-low: rgba(46, 203, 199, 0.8);
121
+ --color-palette-red-invert-alpha-high: rgba(46, 203, 199, 0.1);
96
122
  --color-palette-magenta: #b4009e;
123
+ --color-palette-magenta-alpha: rgba(180, 0, 158, 0.3);
124
+ --color-palette-magenta-alpha-low: rgba(180, 0, 158, 0.8);
125
+ --color-palette-magenta-alpha-high: rgba(180, 0, 158, 0.1);
97
126
  --color-palette-magenta-lighter: #ff4ee9;
98
127
  --color-palette-magenta-light: #ff02e0;
99
128
  --color-palette-magenta-dark: #810071;
100
129
  --color-palette-magenta-darker: #4e0044;
101
130
  --color-palette-magenta-complement: #00b416;
131
+ --color-palette-magenta-complement-alpha: rgba(0, 180, 22, 0.3);
132
+ --color-palette-magenta-complement-alpha-low: rgba(0, 180, 22, 0.8);
133
+ --color-palette-magenta-complement-alpha-high: rgba(0, 180, 22, 0.1);
102
134
  --color-palette-magenta-invert: #4bff61;
103
- --color-palette-magenta-alpha-low: rgba(180, 0, 158, 0.8);
104
- --color-palette-magenta-alpha-mid: rgba(180, 0, 158, 0.3);
105
- --color-palette-magenta-alpha-high: rgba(180, 0, 158, 0.1);
106
- /* color-palette purple */
135
+ --color-palette-magenta-invert-alpha: rgba(75, 255, 97, 0.3);
136
+ --color-palette-magenta-invert-alpha-low: rgba(75, 255, 97, 0.8);
137
+ --color-palette-magenta-invert-alpha-high: rgba(75, 255, 97, 0.1);
107
138
  --color-palette-purple: #5c2d91;
139
+ --color-palette-purple-alpha: rgba(92, 45, 145, 0.3);
140
+ --color-palette-purple-alpha-low: rgba(92, 45, 145, 0.8);
141
+ --color-palette-purple-alpha-high: rgba(92, 45, 145, 0.1);
108
142
  --color-palette-purple-lighter: #a980d7;
109
143
  --color-palette-purple-light: #8145c5;
110
144
  --color-palette-purple-dark: #43216a;
111
145
  --color-palette-purple-darker: #2b1543;
112
146
  --color-palette-purple-complement: #62912d;
147
+ --color-palette-purple-complement-alpha: rgba(98, 145, 45, 0.3);
148
+ --color-palette-purple-complement-alpha-low: rgba(98, 145, 45, 0.8);
149
+ --color-palette-purple-complement-alpha-high: rgba(98, 145, 45, 0.1);
113
150
  --color-palette-purple-invert: #a3d26e;
114
- --color-palette-purple-alpha-low: rgba(92, 45, 145, 0.8);
115
- --color-palette-purple-alpha-mid: rgba(92, 45, 145, 0.3);
116
- --color-palette-purple-alpha-high: rgba(92, 45, 145, 0.1);
117
- /* color-palette green */
151
+ --color-palette-purple-invert-alpha: rgba(163, 210, 110, 0.3);
152
+ --color-palette-purple-invert-alpha-low: rgba(163, 210, 110, 0.8);
153
+ --color-palette-purple-invert-alpha-high: rgba(163, 210, 110, 0.1);
118
154
  --color-palette-green: #107c10;
155
+ --color-palette-green-alpha: rgba(16, 124, 16, 0.3);
156
+ --color-palette-green-alpha-low: rgba(16, 124, 16, 0.8);
157
+ --color-palette-green-alpha-high: rgba(16, 124, 16, 0.1);
119
158
  --color-palette-green-lighter: #3fe63f;
120
159
  --color-palette-green-light: #19c019;
121
160
  --color-palette-green-dark: #0a4f0a;
122
161
  --color-palette-green-darker: #042204;
123
162
  --color-palette-green-complement: #7c107c;
163
+ --color-palette-green-complement-alpha: rgba(124, 16, 124, 0.3);
164
+ --color-palette-green-complement-alpha-low: rgba(124, 16, 124, 0.8);
165
+ --color-palette-green-complement-alpha-high: rgba(124, 16, 124, 0.1);
124
166
  --color-palette-green-invert: #ef83ef;
125
- --color-palette-green-alpha-low: rgba(16, 124, 16, 0.8);
126
- --color-palette-green-alpha-mid: rgba(16, 124, 16, 0.3);
127
- --color-palette-green-alpha-high: rgba(16, 124, 16, 0.1);
128
- /* color-palette teal */
167
+ --color-palette-green-invert-alpha: rgba(239, 131, 239, 0.3);
168
+ --color-palette-green-invert-alpha-low: rgba(239, 131, 239, 0.8);
169
+ --color-palette-green-invert-alpha-high: rgba(239, 131, 239, 0.1);
129
170
  --color-palette-teal: #008272;
171
+ --color-palette-teal-alpha: rgba(0, 130, 114, 0.3);
172
+ --color-palette-teal-alpha-low: rgba(0, 130, 114, 0.8);
173
+ --color-palette-teal-alpha-high: rgba(0, 130, 114, 0.1);
130
174
  --color-palette-teal-lighter: #1cffe3;
131
175
  --color-palette-teal-light: #00cfb5;
132
176
  --color-palette-teal-dark: #004f45;
133
177
  --color-palette-teal-darker: #001c19;
134
178
  --color-palette-teal-complement: #820010;
179
+ --color-palette-teal-complement-alpha: rgba(130, 0, 16, 0.3);
180
+ --color-palette-teal-complement-alpha-low: rgba(130, 0, 16, 0.8);
181
+ --color-palette-teal-complement-alpha-high: rgba(130, 0, 16, 0.1);
135
182
  --color-palette-teal-invert: #ff7d8d;
136
- --color-palette-teal-alpha-low: rgba(0, 130, 114, 0.8);
137
- --color-palette-teal-alpha-mid: rgba(0, 130, 114, 0.3);
138
- --color-palette-teal-alpha-high: rgba(0, 130, 114, 0.1);
139
- /* color-palette blue */
183
+ --color-palette-teal-invert-alpha: rgba(255, 125, 141, 0.3);
184
+ --color-palette-teal-invert-alpha-low: rgba(255, 125, 141, 0.8);
185
+ --color-palette-teal-invert-alpha-high: rgba(255, 125, 141, 0.1);
140
186
  --color-palette-blue: #0078d4;
187
+ --color-palette-blue-alpha: rgba(0, 120, 212, 0.3);
188
+ --color-palette-blue-alpha-low: rgba(0, 120, 212, 0.8);
189
+ --color-palette-blue-alpha-high: rgba(0, 120, 212, 0.1);
141
190
  --color-palette-blue-lighter: #6ec0ff;
142
191
  --color-palette-blue-light: #229fff;
143
192
  --color-palette-blue-dark: #005ba1;
144
193
  --color-palette-blue-darker: #003e6e;
145
194
  --color-palette-blue-complement: #d45c00;
195
+ --color-palette-blue-complement-alpha: rgba(212, 92, 0, 0.3);
196
+ --color-palette-blue-complement-alpha-low: rgba(212, 92, 0, 0.8);
197
+ --color-palette-blue-complement-alpha-high: rgba(212, 92, 0, 0.1);
146
198
  --color-palette-blue-invert: #ff872b;
147
- --color-palette-blue-alpha-low: rgba(0, 120, 212, 0.8);
148
- --color-palette-blue-alpha-mid: rgba(0, 120, 212, 0.3);
149
- --color-palette-blue-alpha-high: rgba(0, 120, 212, 0.1);
150
- /* color-palette dark */
199
+ --color-palette-blue-invert-alpha: rgba(255, 135, 43, 0.3);
200
+ --color-palette-blue-invert-alpha-low: rgba(255, 135, 43, 0.8);
201
+ --color-palette-blue-invert-alpha-high: rgba(255, 135, 43, 0.1);
151
202
  --color-palette-dark: #323232;
203
+ --color-palette-dark-alpha: rgba(50, 50, 50, 0.3);
204
+ --color-palette-dark-alpha-low: rgba(50, 50, 50, 0.8);
205
+ --color-palette-dark-alpha-high: rgba(50, 50, 50, 0.1);
152
206
  --color-palette-dark-lighter: #7f7f7f;
153
207
  --color-palette-dark-light: #585858;
154
208
  --color-palette-dark-dark: #191919;
155
209
  --color-palette-dark-darker: black;
156
210
  --color-palette-dark-complement: #323232;
211
+ --color-palette-dark-complement-alpha: rgba(50, 50, 50, 0.3);
212
+ --color-palette-dark-complement-alpha-low: rgba(50, 50, 50, 0.8);
213
+ --color-palette-dark-complement-alpha-high: rgba(50, 50, 50, 0.1);
157
214
  --color-palette-dark-invert: #cdcdcd;
158
- --color-palette-dark-alpha-low: rgba(50, 50, 50, 0.8);
159
- --color-palette-dark-alpha-mid: rgba(50, 50, 50, 0.3);
160
- --color-palette-dark-alpha-high: rgba(50, 50, 50, 0.1);
215
+ --color-palette-dark-invert-alpha: rgba(205, 205, 205, 0.3);
216
+ --color-palette-dark-invert-alpha-low: rgba(205, 205, 205, 0.8);
217
+ --color-palette-dark-invert-alpha-high: rgba(205, 205, 205, 0.1);
161
218
  /* grays */
162
219
  --color-gray-100: #f4f4f4;
220
+ --color-gray-100-alpha: rgba(244, 244, 244, 0.3);
163
221
  --color-gray-100-alpha-low: rgba(244, 244, 244, 0.8);
164
- --color-gray-200: #e9e9e9;
165
- --color-gray-200-alpha-low: rgba(233, 233, 233, 0.8);
166
- --color-gray-300: #dddddd;
167
- --color-gray-300-alpha-low: rgba(221, 221, 221, 0.8);
168
- --color-gray-400: #d2d2d2;
169
- --color-gray-400-alpha-low: rgba(210, 210, 210, 0.8);
170
- --color-gray-500: #c7c7c7;
171
- --color-gray-500-alpha-low: rgba(199, 199, 199, 0.8);
172
- --color-gray-600: #bbbbbb;
173
- --color-gray-600-alpha-low: rgba(187, 187, 187, 0.8);
174
- --color-gray-700: #b0b0b0;
175
- --color-gray-700-alpha-low: rgba(176, 176, 176, 0.8);
176
- --color-gray-800: #a4a4a4;
177
- --color-gray-800-alpha-low: rgba(164, 164, 164, 0.8);
178
- --color-gray-900: #999999;
179
- --color-gray-900-alpha-low: rgba(153, 153, 153, 0.8);
180
- /* shadows */
181
- --box-shad-1: 0 0.8333333333px 1.724137931px 0 rgba(0, 0, 0, 0.15), 0 0.1526717557px 0.4651162791px 0 rgba(0, 0, 0, 0.1);
182
- --box-shad-2: 0 1.6666666667px 3.4482758621px 0 rgba(0, 0, 0, 0.15), 0 0.3053435115px 0.9302325581px 0 rgba(0, 0, 0, 0.1);
183
- --box-shad-3: 0 2.5px 5.1724137931px 0 rgba(0, 0, 0, 0.15), 0 0.4580152672px 1.3953488372px 0 rgba(0, 0, 0, 0.1);
184
- --box-shad-4: 0 3.3333333333px 6.8965517241px 0 rgba(0, 0, 0, 0.15), 0 0.6106870229px 1.8604651163px 0 rgba(0, 0, 0, 0.1);
185
- --box-shad-5: 0 4.1666666667px 8.6206896552px 0 rgba(0, 0, 0, 0.15), 0 0.7633587786px 2.3255813953px 0 rgba(0, 0, 0, 0.1);
222
+ --color-gray-100-alpha-high: rgba(244, 244, 244, 0.1);
223
+ --color-gray-200: #e2e2e2;
224
+ --color-gray-200-alpha: rgba(226, 226, 226, 0.3);
225
+ --color-gray-200-alpha-low: rgba(226, 226, 226, 0.8);
226
+ --color-gray-200-alpha-high: rgba(226, 226, 226, 0.1);
227
+ --color-gray-300: #d0d0d0;
228
+ --color-gray-300-alpha: rgba(208, 208, 208, 0.3);
229
+ --color-gray-300-alpha-low: rgba(208, 208, 208, 0.8);
230
+ --color-gray-300-alpha-high: rgba(208, 208, 208, 0.1);
231
+ --color-gray-400: #bdbdbd;
232
+ --color-gray-400-alpha: rgba(189, 189, 189, 0.3);
233
+ --color-gray-400-alpha-low: rgba(189, 189, 189, 0.8);
234
+ --color-gray-400-alpha-high: rgba(189, 189, 189, 0.1);
235
+ --color-gray-500: #ababab;
236
+ --color-gray-500-alpha: rgba(171, 171, 171, 0.3);
237
+ --color-gray-500-alpha-low: rgba(171, 171, 171, 0.8);
238
+ --color-gray-500-alpha-high: rgba(171, 171, 171, 0.1);
239
+ --color-gray-600: #999999;
240
+ --color-gray-600-alpha: rgba(153, 153, 153, 0.3);
241
+ --color-gray-600-alpha-low: rgba(153, 153, 153, 0.8);
242
+ --color-gray-600-alpha-high: rgba(153, 153, 153, 0.1);
186
243
  /* boxes */
187
- --box-unit-0: 0rem;
188
- --box-unit-1: 0.5rem;
189
- --box-unit-2: 1rem;
190
- --box-unit-3: 1.5rem;
191
- --box-unit-4: 2rem;
192
- --box-unit-5: 2.5rem;
193
- --box-unit-6: 3rem;
194
- --box-unit-7: 3.5rem;
195
- --box-unit-8: 4rem;
196
- --box-unit-9: 4.5rem;
197
- --box-unit-10: 5rem;
198
- --box-unit-11: 5.5rem;
199
- --box-unit-12: 6rem;
200
- --box-unit-13: 6.5rem;
201
- --box-unit-14: 7rem;
202
- --box-unit-15: 7.5rem;
203
- --box-unit-16: 8rem;
204
- --box-unit-17: 8.5rem;
205
- --box-unit-18: 9rem;
206
- --box-unit-19: 9.5rem;
207
- --box-unit-20: 10rem;
208
- --box-unit-21: 10.5rem;
209
- --box-unit-22: 11rem;
210
- --box-unit-23: 11.5rem;
211
- --box-unit-24: 12rem;
212
- --box-unit-25: 12.5rem;
213
- --box-unit-26: 13rem;
214
- --box-unit-27: 13.5rem;
215
- --box-unit-28: 14rem;
216
- --box-unit-29: 14.5rem;
217
- --box-unit-30: 15rem;
218
- --box-unit-31: 15.5rem;
219
- --box-unit-32: 16rem;
244
+ --box-density-0: 0rem;
245
+ --box-density-1: 0.5rem;
246
+ --box-density-2: 1rem;
247
+ --box-density-3: 1.5rem;
248
+ --box-density-4: 2rem;
249
+ --box-density-5: 2.5rem;
250
+ --box-density-6: 3rem;
251
+ --box-density-7: 3.5rem;
252
+ --box-density-8: 4rem;
253
+ --box-density-9: 4.5rem;
254
+ --box-density-10: 5rem;
255
+ --box-density-11: 5.5rem;
256
+ --box-density-12: 6rem;
257
+ --box-density-preset-tiny: 0.25rem;
258
+ --box-density-preset-small: 0.5rem;
259
+ --box-density-preset-medium: 1.5rem;
260
+ --box-density-preset-large: 2rem;
220
261
  /* text */
221
262
  /*Hs*/
222
263
  --font-size-h1: 3.1rem;
@@ -252,23 +293,118 @@
252
293
  --text-shadow-teal: 0 0 0.125em #008272;
253
294
  --text-shadow-blue: 0 0 0.125em #0078d4;
254
295
  --text-shadow-dark: 0 0 0.125em #323232;
255
- }
256
-
257
- /*[data-theme="light"] {
258
-
296
+ /* shadows */
297
+ --box-shad-1: 0 0.8333333333px 1.724137931px 0 rgba(0, 0, 0, 0.15), 0 0.1526717557px 0.4651162791px 0 rgba(0, 0, 0, 0.1);
298
+ --box-shad-2: 0 1.6666666667px 3.4482758621px 0 rgba(0, 0, 0, 0.15), 0 0.3053435115px 0.9302325581px 0 rgba(0, 0, 0, 0.1);
299
+ --box-shad-3: 0 2.5px 5.1724137931px 0 rgba(0, 0, 0, 0.15), 0 0.4580152672px 1.3953488372px 0 rgba(0, 0, 0, 0.1);
300
+ --box-shad-4: 0 3.3333333333px 6.8965517241px 0 rgba(0, 0, 0, 0.15), 0 0.6106870229px 1.8604651163px 0 rgba(0, 0, 0, 0.1);
301
+ --box-shad-5: 0 4.1666666667px 8.6206896552px 0 rgba(0, 0, 0, 0.15), 0 0.7633587786px 2.3255813953px 0 rgba(0, 0, 0, 0.1);
302
+ /* themes */
303
+ /* theme base colors*/
304
+ --theme-color-text: #282230;
259
305
  --theme-color-foreground: #282230;
306
+ --theme-color-foreground-alpha: rgba(40, 34, 48, 0.3);
307
+ --theme-color-foreground-alpha-low: rgba(40, 34, 48, 0.8);
308
+ --theme-color-foreground-alpha-high: rgba(40, 34, 48, 0.1);
309
+ --theme-color-background: #ffffff;
310
+ --theme-color-background-alpha: rgba(40, 34, 48, 0.3);
311
+ --theme-color-background-alpha-low: rgba(40, 34, 48, 0.8);
312
+ --theme-color-background-alpha-high: rgba(40, 34, 48, 0.1);
313
+ --theme-color-paper: #f1f1f1;
314
+ --theme-color-paper-alpha: rgba(241, 241, 241, 0.3);
315
+ --theme-color-paper-alpha-low: rgba(241, 241, 241, 0.8);
316
+ --theme-color-paper-alpha-high: rgba(241, 241, 241, 0.1);
317
+ }
318
+ :root [density=small] {
319
+ --box-density-0: 0rem;
320
+ --box-density-1: 0.25rem;
321
+ --box-density-2: 0.5rem;
322
+ --box-density-3: 0.75rem;
323
+ --box-density-4: 1rem;
324
+ --box-density-5: 1.25rem;
325
+ --box-density-6: 1.5rem;
326
+ --box-density-7: 1.75rem;
327
+ --box-density-8: 2rem;
328
+ --box-density-9: 2.25rem;
329
+ --box-density-10: 2.5rem;
330
+ --box-density-11: 2.75rem;
331
+ --box-density-12: 3rem;
332
+ --box-density-preset-tiny: 0.125rem;
333
+ --box-density-preset-small: 0.25rem;
334
+ --box-density-preset-medium: 0.75rem;
335
+ --box-density-preset-large: 1rem;
336
+ }
337
+ :root [density=default] {
338
+ --box-density-0: 0rem;
339
+ --box-density-1: 0.5rem;
340
+ --box-density-2: 1rem;
341
+ --box-density-3: 1.5rem;
342
+ --box-density-4: 2rem;
343
+ --box-density-5: 2.5rem;
344
+ --box-density-6: 3rem;
345
+ --box-density-7: 3.5rem;
346
+ --box-density-8: 4rem;
347
+ --box-density-9: 4.5rem;
348
+ --box-density-10: 5rem;
349
+ --box-density-11: 5.5rem;
350
+ --box-density-12: 6rem;
351
+ --box-density-preset-tiny: 0.25rem;
352
+ --box-density-preset-small: 0.5rem;
353
+ --box-density-preset-medium: 1.5rem;
354
+ --box-density-preset-large: 2rem;
355
+ }
356
+ :root [density=large] {
357
+ --box-density-0: 0rem;
358
+ --box-density-1: 0.875rem;
359
+ --box-density-2: 1.75rem;
360
+ --box-density-3: 2.625rem;
361
+ --box-density-4: 3.5rem;
362
+ --box-density-5: 4.375rem;
363
+ --box-density-6: 5.25rem;
364
+ --box-density-7: 6.125rem;
365
+ --box-density-8: 7rem;
366
+ --box-density-9: 7.875rem;
367
+ --box-density-10: 8.75rem;
368
+ --box-density-11: 9.625rem;
369
+ --box-density-12: 10.5rem;
370
+ --box-density-preset-tiny: 0.4375rem;
371
+ --box-density-preset-small: 0.875rem;
372
+ --box-density-preset-medium: 2.625rem;
373
+ --box-density-preset-large: 3.5rem;
374
+ }
375
+ :root, :root [data-theme=light] {
376
+ /* theme base colors*/
260
377
  --theme-color-text: #282230;
261
- --theme-color-background: #f1f1f1;
262
- --theme-color-paper: #ededed;
263
-
264
- --theme-color-border: var(--theme-color-primary-alpha-mid);
265
- --theme-color-overlay: '';
266
- }*/
267
- [data-theme=dark] {
268
- --theme-color-foreground: #f1f1f1;
378
+ --theme-color-foreground: #282230;
379
+ --theme-color-foreground-alpha: rgba(40, 34, 48, 0.3);
380
+ --theme-color-foreground-alpha-low: rgba(40, 34, 48, 0.8);
381
+ --theme-color-foreground-alpha-high: rgba(40, 34, 48, 0.1);
382
+ --theme-color-background: #ffffff;
383
+ --theme-color-background-alpha: rgba(40, 34, 48, 0.3);
384
+ --theme-color-background-alpha-low: rgba(40, 34, 48, 0.8);
385
+ --theme-color-background-alpha-high: rgba(40, 34, 48, 0.1);
386
+ --theme-color-paper: #f1f1f1;
387
+ --theme-color-paper-alpha: rgba(241, 241, 241, 0.3);
388
+ --theme-color-paper-alpha-low: rgba(241, 241, 241, 0.8);
389
+ --theme-color-paper-alpha-high: rgba(241, 241, 241, 0.1);
390
+ --theme-color-border: rgba(241, 241, 241, 0.2);
391
+ --theme-color-overlay: rgba(208, 191, 151, 0.2);
392
+ }
393
+ :root [data-theme=dark] {
394
+ /* theme base colors*/
269
395
  --theme-color-text: #f1f1f1;
396
+ --theme-color-foreground: #f1f1f1;
397
+ --theme-color-foreground-alpha: rgba(241, 241, 241, 0.3);
398
+ --theme-color-foreground-alpha-low: rgba(241, 241, 241, 0.8);
399
+ --theme-color-foreground-alpha-high: rgba(241, 241, 241, 0.1);
270
400
  --theme-color-background: #27323a;
271
- --theme-color-paper: #3a3b3b;
272
- --theme-color-border: rgba(255, 255, 255, 0.2);
273
- --theme-color-overlay: rgba(255,255,255,0.1);
401
+ --theme-color-background-alpha: rgba(241, 241, 241, 0.3);
402
+ --theme-color-background-alpha-low: rgba(241, 241, 241, 0.8);
403
+ --theme-color-background-alpha-high: rgba(241, 241, 241, 0.1);
404
+ --theme-color-paper: #f1f1f1;
405
+ --theme-color-paper-alpha: rgba(58, 59, 59, 0.3);
406
+ --theme-color-paper-alpha-low: rgba(58, 59, 59, 0.8);
407
+ --theme-color-paper-alpha-high: rgba(58, 59, 59, 0.1);
408
+ --theme-color-border: rgba(58, 59, 59, 0.2);
409
+ --theme-color-overlay: rgba(255, 255, 255, 0.1);
274
410
  }
package/lib/styles/core/vars.min.css CHANGED
@@ -1 +1 @@
1
- :root{--theme-color-primary:#0288d1;--theme-color-primary-light:#23b0fd;--theme-color-primary-lighter:#6ecbfe;--theme-color-primary-dark:#02679e;--theme-color-primary-darker:#01466c;--theme-color-primary-complement:#d14b02;--theme-color-primary-invert:#fd772e;--theme-color-primary-alpha-low:rgba(2, 136, 209, 0.8);--theme-color-primary-alpha-mid:rgba(2, 136, 209, 0.3);--theme-color-primary-alpha-high:rgba(2, 136, 209, 0.1);--theme-color-secondary:#D14B02;--theme-color-secondary-light:#fd7023;--theme-color-secondary-lighter:#fea16e;--theme-color-secondary-dark:#9e3902;--theme-color-secondary-darker:#6c2701;--theme-color-secondary-complement:#0288d1;--theme-color-secondary-invert:#2eb4fd;--theme-color-secondary-alpha-low:rgba(209, 75, 2, 0.8);--theme-color-secondary-alpha-mid:rgba(209, 75, 2, 0.3);--theme-color-secondary-alpha-high:rgba(209, 75, 2, 0.1);--theme-color-tertiary:#88D102;--theme-color-tertiary-light:#b0fd23;--theme-color-tertiary-lighter:#cbfe6e;--theme-color-tertiary-dark:#679e02;--theme-color-tertiary-darker:#466c01;--theme-color-tertiary-complement:#4b02d1;--theme-color-tertiary-invert:#772efd;--theme-color-tertiary-alpha-low:rgba(136, 209, 2, 0.8);--theme-color-tertiary-alpha-mid:rgba(136, 209, 2, 0.3);--theme-color-tertiary-alpha-high:rgba(136, 209, 2, 0.1);--theme-color-foreground:#282230;--theme-color-text:#282230;--theme-color-background:#f1f1f1;--theme-color-paper:#ededed;--theme-color-border:rgba(208, 191, 151, 0.3);--theme-color-overlay:rgba(208, 191, 151, 0.2);--color-scheme-discrete:#ccc;--color-scheme-discrete-light:#f2f2f2;--color-scheme-discrete-dark:#b3b3b3;--color-scheme-success:green;--color-scheme-success-light:#00cd00;--color-scheme-success-dark:#004d00;--color-scheme-info:#ffdd57;--color-scheme-info-light:#ffeda3;--color-scheme-info-dark:#ffd324;--color-scheme-warning:#e6b905;--color-scheme-warning-light:#fbd53c;--color-scheme-warning-dark:#b49104;--color-scheme-alert:#ff7300;--color-scheme-alert-light:#ff9d4d;--color-scheme-alert-dark:#cc5c00;--color-scheme-error:red;--color-scheme-error-light:#ff4d4d;--color-scheme-error-dark:#cc0000;--color-palette-yellow:#ffb900;--color-palette-yellow-lighter:#ffe399;--color-palette-yellow-light:#ffce4d;--color-palette-yellow-dark:#cc9400;--color-palette-yellow-darker:#996f00;--color-palette-yellow-complement:#0046ff;--color-palette-yellow-invert:#0046ff;--color-palette-yellow-alpha-low:rgba(255, 185, 0, 0.8);--color-palette-yellow-alpha-mid:rgba(255, 185, 0, 0.3);--color-palette-yellow-alpha-high:rgba(255, 185, 0, 0.1);--color-palette-orange:#d83b01;--color-palette-orange-lighter:#fe9974;--color-palette-orange-light:#fe6127;--color-palette-orange-dark:#a52d01;--color-palette-orange-darker:#721f01;--color-palette-orange-complement:#019ed8;--color-palette-orange-invert:#27c4fe;--color-palette-orange-alpha-low:rgba(216, 59, 1, 0.8);--color-palette-orange-alpha-mid:rgba(216, 59, 1, 0.3);--color-palette-orange-alpha-high:rgba(216, 59, 1, 0.1);--color-palette-red:#d13438;--color-palette-red-lighter:#edb1b2;--color-palette-red-light:#df7275;--color-palette-red-dark:#ab272a;--color-palette-red-darker:#821d20;--color-palette-red-complement:#34d1cd;--color-palette-red-invert:#2ecbc7;--color-palette-red-alpha-low:rgba(209, 52, 56, 0.8);--color-palette-red-alpha-mid:rgba(209, 52, 56, 0.3);--color-palette-red-alpha-high:rgba(209, 52, 56, 0.1);--color-palette-magenta:#b4009e;--color-palette-magenta-lighter:#ff4ee9;--color-palette-magenta-light:#ff02e0;--color-palette-magenta-dark:#810071;--color-palette-magenta-darker:#4e0044;--color-palette-magenta-complement:#00b416;--color-palette-magenta-invert:#4bff61;--color-palette-magenta-alpha-low:rgba(180, 0, 158, 0.8);--color-palette-magenta-alpha-mid:rgba(180, 0, 158, 0.3);--color-palette-magenta-alpha-high:rgba(180, 0, 158, 0.1);--color-palette-purple:#5c2d91;--color-palette-purple-lighter:#a980d7;--color-palette-purple-light:#8145c5;--color-palette-purple-dark:#43216a;--color-palette-purple-darker:#2b1543;--color-palette-purple-complement:#62912d;--color-palette-purple-invert:#a3d26e;--color-palette-purple-alpha-low:rgba(92, 45, 145, 0.8);--color-palette-purple-alpha-mid:rgba(92, 45, 145, 0.3);--color-palette-purple-alpha-high:rgba(92, 45, 145, 0.1);--color-palette-green:#107c10;--color-palette-green-lighter:#3fe63f;--color-palette-green-light:#19c019;--color-palette-green-dark:#0a4f0a;--color-palette-green-darker:#042204;--color-palette-green-complement:#7c107c;--color-palette-green-invert:#ef83ef;--color-palette-green-alpha-low:rgba(16, 124, 16, 0.8);--color-palette-green-alpha-mid:rgba(16, 124, 16, 0.3);--color-palette-green-alpha-high:rgba(16, 124, 16, 0.1);--color-palette-teal:#008272;--color-palette-teal-lighter:#1cffe3;--color-palette-teal-light:#00cfb5;--color-palette-teal-dark:#004f45;--color-palette-teal-darker:#001c19;--color-palette-teal-complement:#820010;--color-palette-teal-invert:#ff7d8d;--color-palette-teal-alpha-low:rgba(0, 130, 114, 0.8);--color-palette-teal-alpha-mid:rgba(0, 130, 114, 0.3);--color-palette-teal-alpha-high:rgba(0, 130, 114, 0.1);--color-palette-blue:#0078d4;--color-palette-blue-lighter:#6ec0ff;--color-palette-blue-light:#229fff;--color-palette-blue-dark:#005ba1;--color-palette-blue-darker:#003e6e;--color-palette-blue-complement:#d45c00;--color-palette-blue-invert:#ff872b;--color-palette-blue-alpha-low:rgba(0, 120, 212, 0.8);--color-palette-blue-alpha-mid:rgba(0, 120, 212, 0.3);--color-palette-blue-alpha-high:rgba(0, 120, 212, 0.1);--color-palette-dark:#323232;--color-palette-dark-lighter:#7f7f7f;--color-palette-dark-light:#585858;--color-palette-dark-dark:#191919;--color-palette-dark-darker:black;--color-palette-dark-complement:#323232;--color-palette-dark-invert:#cdcdcd;--color-palette-dark-alpha-low:rgba(50, 50, 50, 0.8);--color-palette-dark-alpha-mid:rgba(50, 50, 50, 0.3);--color-palette-dark-alpha-high:rgba(50, 50, 50, 0.1);--color-gray-100:#f4f4f4;--color-gray-100-alpha-low:rgba(244, 244, 244, 0.8);--color-gray-200:#e9e9e9;--color-gray-200-alpha-low:rgba(233, 233, 233, 0.8);--color-gray-300:#dddddd;--color-gray-300-alpha-low:rgba(221, 221, 221, 0.8);--color-gray-400:#d2d2d2;--color-gray-400-alpha-low:rgba(210, 210, 210, 0.8);--color-gray-500:#c7c7c7;--color-gray-500-alpha-low:rgba(199, 199, 199, 0.8);--color-gray-600:#bbbbbb;--color-gray-600-alpha-low:rgba(187, 187, 187, 0.8);--color-gray-700:#b0b0b0;--color-gray-700-alpha-low:rgba(176, 176, 176, 0.8);--color-gray-800:#a4a4a4;--color-gray-800-alpha-low:rgba(164, 164, 164, 0.8);--color-gray-900:#999999;--color-gray-900-alpha-low:rgba(153, 153, 153, 0.8);--box-shad-1:0 0.8333333333px 1.724137931px 0 rgba(0, 0, 0, 0.15),0 0.1526717557px 0.4651162791px 0 rgba(0, 0, 0, 0.1);--box-shad-2:0 1.6666666667px 3.4482758621px 0 rgba(0, 0, 0, 0.15),0 0.3053435115px 0.9302325581px 0 rgba(0, 0, 0, 0.1);--box-shad-3:0 2.5px 5.1724137931px 0 rgba(0, 0, 0, 0.15),0 0.4580152672px 1.3953488372px 0 rgba(0, 0, 0, 0.1);--box-shad-4:0 3.3333333333px 6.8965517241px 0 rgba(0, 0, 0, 0.15),0 0.6106870229px 1.8604651163px 0 rgba(0, 0, 0, 0.1);--box-shad-5:0 4.1666666667px 8.6206896552px 0 rgba(0, 0, 0, 0.15),0 0.7633587786px 2.3255813953px 0 rgba(0, 0, 0, 0.1);--box-unit-0:0rem;--box-unit-1:0.5rem;--box-unit-2:1rem;--box-unit-3:1.5rem;--box-unit-4:2rem;--box-unit-5:2.5rem;--box-unit-6:3rem;--box-unit-7:3.5rem;--box-unit-8:4rem;--box-unit-9:4.5rem;--box-unit-10:5rem;--box-unit-11:5.5rem;--box-unit-12:6rem;--box-unit-13:6.5rem;--box-unit-14:7rem;--box-unit-15:7.5rem;--box-unit-16:8rem;--box-unit-17:8.5rem;--box-unit-18:9rem;--box-unit-19:9.5rem;--box-unit-20:10rem;--box-unit-21:10.5rem;--box-unit-22:11rem;--box-unit-23:11.5rem;--box-unit-24:12rem;--box-unit-25:12.5rem;--box-unit-26:13rem;--box-unit-27:13.5rem;--box-unit-28:14rem;--box-unit-29:14.5rem;--box-unit-30:15rem;--box-unit-31:15.5rem;--box-unit-32:16rem;--font-size-h1:3.1rem;--font-size-h2:2.68rem;--font-size-h3:2.26rem;--font-size-h4:1.84rem;--font-size-h5:1.42rem;--font-size-h6:1rem;--font-weight-50:50;--font-weight-100:100;--font-weight-300:400;--font-weight-500:500;--font-weight-900:900;--font-weight-light:lighter;--font-weight-cap:normal;--font-weight-bold:bold;--font-weight-bolder:bolder;--text-shadow-discrete:0 0 0.125em #ccc;--text-shadow-success:0 0 0.125em green;--text-shadow-info:0 0 0.125em #ffdd57;--text-shadow-warning:0 0 0.125em #e6b905;--text-shadow-alert:0 0 0.125em #ff7300;--text-shadow-error:0 0 0.125em red;--text-shadow-yellow:0 0 0.125em #ffb900;--text-shadow-orange:0 0 0.125em #d83b01;--text-shadow-red:0 0 0.125em #d13438;--text-shadow-magenta:0 0 0.125em #b4009e;--text-shadow-purple:0 0 0.125em #5c2d91;--text-shadow-green:0 0 0.125em #107c10;--text-shadow-teal:0 0 0.125em #008272;--text-shadow-blue:0 0 0.125em #0078d4;--text-shadow-dark:0 0 0.125em #323232}[data-theme=dark]{--theme-color-foreground:#f1f1f1;--theme-color-text:#f1f1f1;--theme-color-background:#27323a;--theme-color-paper:#3a3b3b;--theme-color-border:rgba(255, 255, 255, 0.2);--theme-color-overlay:rgba(255,255,255,0.1)}
1
+ :root{--theme-color-primary:#431700;--theme-color-primary-light:#903100;--theme-color-primary-lighter:#dc4c00;--theme-color-primary-dark:#100500;--theme-color-primary-darker:black;--theme-color-primary-complement:#002c43;--theme-color-primary-invert:#bce8ff;--theme-color-primary-alpha-low:rgba(67, 23, 0, 0.8);--theme-color-primary-alpha:rgba(67, 23, 0, 0.3);--theme-color-primary-alpha-high:rgba(67, 23, 0, 0.1);--theme-color-secondary:#D14B02;--theme-color-secondary-light:#fd7023;--theme-color-secondary-lighter:#fea16e;--theme-color-secondary-dark:#9e3902;--theme-color-secondary-darker:#6c2701;--theme-color-secondary-complement:#0288d1;--theme-color-secondary-invert:#2eb4fd;--theme-color-secondary-alpha-low:rgba(209, 75, 2, 0.8);--theme-color-secondary-alpha:rgba(209, 75, 2, 0.3);--theme-color-secondary-alpha-high:rgba(209, 75, 2, 0.1);--theme-color-tertiary:#88D102;--theme-color-tertiary-light:#b0fd23;--theme-color-tertiary-lighter:#cbfe6e;--theme-color-tertiary-dark:#679e02;--theme-color-tertiary-darker:#466c01;--theme-color-tertiary-complement:#4b02d1;--theme-color-tertiary-invert:#772efd;--theme-color-tertiary-alpha-low:rgba(136, 209, 2, 0.8);--theme-color-tertiary-alpha:rgba(136, 209, 2, 0.3);--theme-color-tertiary-alpha-high:rgba(136, 209, 2, 0.1);--color-scheme-discrete:#ccc;--color-scheme-discrete-light:#f2f2f2;--color-scheme-discrete-dark:#b3b3b3;--color-scheme-discrete-alpha:rgba(204, 204, 204, 0.3);--color-scheme-discrete-alpha-low:rgba(204, 204, 204, 0.8);--color-scheme-discrete-alpha-high:rgba(204, 204, 204, 0.1);--color-scheme-success:green;--color-scheme-success-light:#00cd00;--color-scheme-success-dark:#004d00;--color-scheme-success-alpha:rgba(0, 128, 0, 0.3);--color-scheme-success-alpha-low:rgba(0, 128, 0, 0.8);--color-scheme-success-alpha-high:rgba(0, 128, 0, 0.1);--color-scheme-info:#ffdd57;--color-scheme-info-light:#ffeda3;--color-scheme-info-dark:#ffd324;--color-scheme-info-alpha:rgba(255, 221, 87, 0.3);--color-scheme-info-alpha-low:rgba(255, 221, 87, 0.8);--color-scheme-info-alpha-high:rgba(255, 221, 87, 0.1);--color-scheme-warning:#e6b905;--color-scheme-warning-light:#fbd53c;--color-scheme-warning-dark:#b49104;--color-scheme-warning-alpha:rgba(230, 185, 5, 0.3);--color-scheme-warning-alpha-low:rgba(230, 185, 5, 0.8);--color-scheme-warning-alpha-high:rgba(230, 185, 5, 0.1);--color-scheme-alert:#ff7300;--color-scheme-alert-light:#ff9d4d;--color-scheme-alert-dark:#cc5c00;--color-scheme-alert-alpha:rgba(255, 115, 0, 0.3);--color-scheme-alert-alpha-low:rgba(255, 115, 0, 0.8);--color-scheme-alert-alpha-high:rgba(255, 115, 0, 0.1);--color-scheme-error:red;--color-scheme-error-light:#ff4d4d;--color-scheme-error-dark:#cc0000;--color-scheme-error-alpha:rgba(255, 0, 0, 0.3);--color-scheme-error-alpha-low:rgba(255, 0, 0, 0.8);--color-scheme-error-alpha-high:rgba(255, 0, 0, 0.1);--color-palette-yellow:#ffb900;--color-palette-yellow-alpha:rgba(255, 185, 0, 0.3);--color-palette-yellow-alpha-low:rgba(255, 185, 0, 0.8);--color-palette-yellow-alpha-high:rgba(255, 185, 0, 0.1);--color-palette-yellow-lighter:#ffe399;--color-palette-yellow-light:#ffce4d;--color-palette-yellow-dark:#cc9400;--color-palette-yellow-darker:#996f00;--color-palette-yellow-complement:#0046ff;--color-palette-yellow-complement-alpha:rgba(0, 70, 255, 0.3);--color-palette-yellow-complement-alpha-low:rgba(0, 70, 255, 0.8);--color-palette-yellow-complement-alpha-high:rgba(0, 70, 255, 0.1);--color-palette-yellow-invert:#0046ff;--color-palette-yellow-invert-alpha:rgba(0, 70, 255, 0.3);--color-palette-yellow-invert-alpha-low:rgba(0, 70, 255, 0.8);--color-palette-yellow-invert-alpha-high:rgba(0, 70, 255, 0.1);--color-palette-orange:#d83b01;--color-palette-orange-alpha:rgba(216, 59, 1, 0.3);--color-palette-orange-alpha-low:rgba(216, 59, 1, 0.8);--color-palette-orange-alpha-high:rgba(216, 59, 1, 0.1);--color-palette-orange-lighter:#fe9974;--color-palette-orange-light:#fe6127;--color-palette-orange-dark:#a52d01;--color-palette-orange-darker:#721f01;--color-palette-orange-complement:#019ed8;--color-palette-orange-complement-alpha:rgba(1, 158, 216, 0.3);--color-palette-orange-complement-alpha-low:rgba(1, 158, 216, 0.8);--color-palette-orange-complement-alpha-high:rgba(1, 158, 216, 0.1);--color-palette-orange-invert:#27c4fe;--color-palette-orange-invert-alpha:rgba(39, 196, 254, 0.3);--color-palette-orange-invert-alpha-low:rgba(39, 196, 254, 0.8);--color-palette-orange-invert-alpha-high:rgba(39, 196, 254, 0.1);--color-palette-red:#d13438;--color-palette-red-alpha:rgba(209, 52, 56, 0.3);--color-palette-red-alpha-low:rgba(209, 52, 56, 0.8);--color-palette-red-alpha-high:rgba(209, 52, 56, 0.1);--color-palette-red-lighter:#edb1b2;--color-palette-red-light:#df7275;--color-palette-red-dark:#ab272a;--color-palette-red-darker:#821d20;--color-palette-red-complement:#34d1cd;--color-palette-red-complement-alpha:rgba(52, 209, 205, 0.3);--color-palette-red-complement-alpha-low:rgba(52, 209, 205, 0.8);--color-palette-red-complement-alpha-high:rgba(52, 209, 205, 0.1);--color-palette-red-invert:#2ecbc7;--color-palette-red-invert-alpha:rgba(46, 203, 199, 0.3);--color-palette-red-invert-alpha-low:rgba(46, 203, 199, 0.8);--color-palette-red-invert-alpha-high:rgba(46, 203, 199, 0.1);--color-palette-magenta:#b4009e;--color-palette-magenta-alpha:rgba(180, 0, 158, 0.3);--color-palette-magenta-alpha-low:rgba(180, 0, 158, 0.8);--color-palette-magenta-alpha-high:rgba(180, 0, 158, 0.1);--color-palette-magenta-lighter:#ff4ee9;--color-palette-magenta-light:#ff02e0;--color-palette-magenta-dark:#810071;--color-palette-magenta-darker:#4e0044;--color-palette-magenta-complement:#00b416;--color-palette-magenta-complement-alpha:rgba(0, 180, 22, 0.3);--color-palette-magenta-complement-alpha-low:rgba(0, 180, 22, 0.8);--color-palette-magenta-complement-alpha-high:rgba(0, 180, 22, 0.1);--color-palette-magenta-invert:#4bff61;--color-palette-magenta-invert-alpha:rgba(75, 255, 97, 0.3);--color-palette-magenta-invert-alpha-low:rgba(75, 255, 97, 0.8);--color-palette-magenta-invert-alpha-high:rgba(75, 255, 97, 0.1);--color-palette-purple:#5c2d91;--color-palette-purple-alpha:rgba(92, 45, 145, 0.3);--color-palette-purple-alpha-low:rgba(92, 45, 145, 0.8);--color-palette-purple-alpha-high:rgba(92, 45, 145, 0.1);--color-palette-purple-lighter:#a980d7;--color-palette-purple-light:#8145c5;--color-palette-purple-dark:#43216a;--color-palette-purple-darker:#2b1543;--color-palette-purple-complement:#62912d;--color-palette-purple-complement-alpha:rgba(98, 145, 45, 0.3);--color-palette-purple-complement-alpha-low:rgba(98, 145, 45, 0.8);--color-palette-purple-complement-alpha-high:rgba(98, 145, 45, 0.1);--color-palette-purple-invert:#a3d26e;--color-palette-purple-invert-alpha:rgba(163, 210, 110, 0.3);--color-palette-purple-invert-alpha-low:rgba(163, 210, 110, 0.8);--color-palette-purple-invert-alpha-high:rgba(163, 210, 110, 0.1);--color-palette-green:#107c10;--color-palette-green-alpha:rgba(16, 124, 16, 0.3);--color-palette-green-alpha-low:rgba(16, 124, 16, 0.8);--color-palette-green-alpha-high:rgba(16, 124, 16, 0.1);--color-palette-green-lighter:#3fe63f;--color-palette-green-light:#19c019;--color-palette-green-dark:#0a4f0a;--color-palette-green-darker:#042204;--color-palette-green-complement:#7c107c;--color-palette-green-complement-alpha:rgba(124, 16, 124, 0.3);--color-palette-green-complement-alpha-low:rgba(124, 16, 124, 0.8);--color-palette-green-complement-alpha-high:rgba(124, 16, 124, 0.1);--color-palette-green-invert:#ef83ef;--color-palette-green-invert-alpha:rgba(239, 131, 239, 0.3);--color-palette-green-invert-alpha-low:rgba(239, 131, 239, 0.8);--color-palette-green-invert-alpha-high:rgba(239, 131, 239, 0.1);--color-palette-teal:#008272;--color-palette-teal-alpha:rgba(0, 130, 114, 0.3);--color-palette-teal-alpha-low:rgba(0, 130, 114, 0.8);--color-palette-teal-alpha-high:rgba(0, 130, 114, 0.1);--color-palette-teal-lighter:#1cffe3;--color-palette-teal-light:#00cfb5;--color-palette-teal-dark:#004f45;--color-palette-teal-darker:#001c19;--color-palette-teal-complement:#820010;--color-palette-teal-complement-alpha:rgba(130, 0, 16, 0.3);--color-palette-teal-complement-alpha-low:rgba(130, 0, 16, 0.8);--color-palette-teal-complement-alpha-high:rgba(130, 0, 16, 0.1);--color-palette-teal-invert:#ff7d8d;--color-palette-teal-invert-alpha:rgba(255, 125, 141, 0.3);--color-palette-teal-invert-alpha-low:rgba(255, 125, 141, 0.8);--color-palette-teal-invert-alpha-high:rgba(255, 125, 141, 0.1);--color-palette-blue:#0078d4;--color-palette-blue-alpha:rgba(0, 120, 212, 0.3);--color-palette-blue-alpha-low:rgba(0, 120, 212, 0.8);--color-palette-blue-alpha-high:rgba(0, 120, 212, 0.1);--color-palette-blue-lighter:#6ec0ff;--color-palette-blue-light:#229fff;--color-palette-blue-dark:#005ba1;--color-palette-blue-darker:#003e6e;--color-palette-blue-complement:#d45c00;--color-palette-blue-complement-alpha:rgba(212, 92, 0, 0.3);--color-palette-blue-complement-alpha-low:rgba(212, 92, 0, 0.8);--color-palette-blue-complement-alpha-high:rgba(212, 92, 0, 0.1);--color-palette-blue-invert:#ff872b;--color-palette-blue-invert-alpha:rgba(255, 135, 43, 0.3);--color-palette-blue-invert-alpha-low:rgba(255, 135, 43, 0.8);--color-palette-blue-invert-alpha-high:rgba(255, 135, 43, 0.1);--color-palette-dark:#323232;--color-palette-dark-alpha:rgba(50, 50, 50, 0.3);--color-palette-dark-alpha-low:rgba(50, 50, 50, 0.8);--color-palette-dark-alpha-high:rgba(50, 50, 50, 0.1);--color-palette-dark-lighter:#7f7f7f;--color-palette-dark-light:#585858;--color-palette-dark-dark:#191919;--color-palette-dark-darker:black;--color-palette-dark-complement:#323232;--color-palette-dark-complement-alpha:rgba(50, 50, 50, 0.3);--color-palette-dark-complement-alpha-low:rgba(50, 50, 50, 0.8);--color-palette-dark-complement-alpha-high:rgba(50, 50, 50, 0.1);--color-palette-dark-invert:#cdcdcd;--color-palette-dark-invert-alpha:rgba(205, 205, 205, 0.3);--color-palette-dark-invert-alpha-low:rgba(205, 205, 205, 0.8);--color-palette-dark-invert-alpha-high:rgba(205, 205, 205, 0.1);--color-gray-100:#f4f4f4;--color-gray-100-alpha:rgba(244, 244, 244, 0.3);--color-gray-100-alpha-low:rgba(244, 244, 244, 0.8);--color-gray-100-alpha-high:rgba(244, 244, 244, 0.1);--color-gray-200:#e2e2e2;--color-gray-200-alpha:rgba(226, 226, 226, 0.3);--color-gray-200-alpha-low:rgba(226, 226, 226, 0.8);--color-gray-200-alpha-high:rgba(226, 226, 226, 0.1);--color-gray-300:#d0d0d0;--color-gray-300-alpha:rgba(208, 208, 208, 0.3);--color-gray-300-alpha-low:rgba(208, 208, 208, 0.8);--color-gray-300-alpha-high:rgba(208, 208, 208, 0.1);--color-gray-400:#bdbdbd;--color-gray-400-alpha:rgba(189, 189, 189, 0.3);--color-gray-400-alpha-low:rgba(189, 189, 189, 0.8);--color-gray-400-alpha-high:rgba(189, 189, 189, 0.1);--color-gray-500:#ababab;--color-gray-500-alpha:rgba(171, 171, 171, 0.3);--color-gray-500-alpha-low:rgba(171, 171, 171, 0.8);--color-gray-500-alpha-high:rgba(171, 171, 171, 0.1);--color-gray-600:#999999;--color-gray-600-alpha:rgba(153, 153, 153, 0.3);--color-gray-600-alpha-low:rgba(153, 153, 153, 0.8);--color-gray-600-alpha-high:rgba(153, 153, 153, 0.1);--box-density-0:0rem;--box-density-1:0.5rem;--box-density-2:1rem;--box-density-3:1.5rem;--box-density-4:2rem;--box-density-5:2.5rem;--box-density-6:3rem;--box-density-7:3.5rem;--box-density-8:4rem;--box-density-9:4.5rem;--box-density-10:5rem;--box-density-11:5.5rem;--box-density-12:6rem;--box-density-preset-tiny:0.25rem;--box-density-preset-small:0.5rem;--box-density-preset-medium:1.5rem;--box-density-preset-large:2rem;--font-size-h1:3.1rem;--font-size-h2:2.68rem;--font-size-h3:2.26rem;--font-size-h4:1.84rem;--font-size-h5:1.42rem;--font-size-h6:1rem;--font-weight-50:50;--font-weight-100:100;--font-weight-300:400;--font-weight-500:500;--font-weight-900:900;--font-weight-light:lighter;--font-weight-cap:normal;--font-weight-bold:bold;--font-weight-bolder:bolder;--text-shadow-discrete:0 0 0.125em #ccc;--text-shadow-success:0 0 0.125em green;--text-shadow-info:0 0 0.125em #ffdd57;--text-shadow-warning:0 0 0.125em #e6b905;--text-shadow-alert:0 0 0.125em #ff7300;--text-shadow-error:0 0 0.125em red;--text-shadow-yellow:0 0 0.125em #ffb900;--text-shadow-orange:0 0 0.125em #d83b01;--text-shadow-red:0 0 0.125em #d13438;--text-shadow-magenta:0 0 0.125em #b4009e;--text-shadow-purple:0 0 0.125em #5c2d91;--text-shadow-green:0 0 0.125em #107c10;--text-shadow-teal:0 0 0.125em #008272;--text-shadow-blue:0 0 0.125em #0078d4;--text-shadow-dark:0 0 0.125em #323232;--box-shad-1:0 0.8333333333px 1.724137931px 0 rgba(0, 0, 0, 0.15),0 0.1526717557px 0.4651162791px 0 rgba(0, 0, 0, 0.1);--box-shad-2:0 1.6666666667px 3.4482758621px 0 rgba(0, 0, 0, 0.15),0 0.3053435115px 0.9302325581px 0 rgba(0, 0, 0, 0.1);--box-shad-3:0 2.5px 5.1724137931px 0 rgba(0, 0, 0, 0.15),0 0.4580152672px 1.3953488372px 0 rgba(0, 0, 0, 0.1);--box-shad-4:0 3.3333333333px 6.8965517241px 0 rgba(0, 0, 0, 0.15),0 0.6106870229px 1.8604651163px 0 rgba(0, 0, 0, 0.1);--box-shad-5:0 4.1666666667px 8.6206896552px 0 rgba(0, 0, 0, 0.15),0 0.7633587786px 2.3255813953px 0 rgba(0, 0, 0, 0.1)}:root [density=small]{--box-density-0:0rem;--box-density-1:0.25rem;--box-density-2:0.5rem;--box-density-3:0.75rem;--box-density-4:1rem;--box-density-5:1.25rem;--box-density-6:1.5rem;--box-density-7:1.75rem;--box-density-8:2rem;--box-density-9:2.25rem;--box-density-10:2.5rem;--box-density-11:2.75rem;--box-density-12:3rem;--box-density-preset-tiny:0.125rem;--box-density-preset-small:0.25rem;--box-density-preset-medium:0.75rem;--box-density-preset-large:1rem}:root [density=default]{--box-density-0:0rem;--box-density-1:0.5rem;--box-density-2:1rem;--box-density-3:1.5rem;--box-density-4:2rem;--box-density-5:2.5rem;--box-density-6:3rem;--box-density-7:3.5rem;--box-density-8:4rem;--box-density-9:4.5rem;--box-density-10:5rem;--box-density-11:5.5rem;--box-density-12:6rem;--box-density-preset-tiny:0.25rem;--box-density-preset-small:0.5rem;--box-density-preset-medium:1.5rem;--box-density-preset-large:2rem}:root [density=large]{--box-density-0:0rem;--box-density-1:0.875rem;--box-density-2:1.75rem;--box-density-3:2.625rem;--box-density-4:3.5rem;--box-density-5:4.375rem;--box-density-6:5.25rem;--box-density-7:6.125rem;--box-density-8:7rem;--box-density-9:7.875rem;--box-density-10:8.75rem;--box-density-11:9.625rem;--box-density-12:10.5rem;--box-density-preset-tiny:0.4375rem;--box-density-preset-small:0.875rem;--box-density-preset-medium:2.625rem;--box-density-preset-large:3.5rem}:root,:root [data-theme=light]{--theme-color-text:#282230;--theme-color-foreground:#282230;--theme-color-foreground-alpha:rgba(40, 34, 48, 0.3);--theme-color-foreground-alpha-low:rgba(40, 34, 48, 0.8);--theme-color-foreground-alpha-high:rgba(40, 34, 48, 0.1);--theme-color-background:#ffffff;--theme-color-background-alpha:rgba(40, 34, 48, 0.3);--theme-color-background-alpha-low:rgba(40, 34, 48, 0.8);--theme-color-background-alpha-high:rgba(40, 34, 48, 0.1);--theme-color-paper:#f1f1f1;--theme-color-paper-alpha:rgba(241, 241, 241, 0.3);--theme-color-paper-alpha-low:rgba(241, 241, 241, 0.8);--theme-color-paper-alpha-high:rgba(241, 241, 241, 0.1);--theme-color-border:rgba(241, 241, 241, 0.2);--theme-color-overlay:rgba(208, 191, 151, 0.2)}:root [data-theme=dark]{--theme-color-text:#f1f1f1;--theme-color-foreground:#f1f1f1;--theme-color-foreground-alpha:rgba(241, 241, 241, 0.3);--theme-color-foreground-alpha-low:rgba(241, 241, 241, 0.8);--theme-color-foreground-alpha-high:rgba(241, 241, 241, 0.1);--theme-color-background:#27323a;--theme-color-background-alpha:rgba(241, 241, 241, 0.3);--theme-color-background-alpha-low:rgba(241, 241, 241, 0.8);--theme-color-background-alpha-high:rgba(241, 241, 241, 0.1);--theme-color-paper:#f1f1f1;--theme-color-paper-alpha:rgba(58, 59, 59, 0.3);--theme-color-paper-alpha-low:rgba(58, 59, 59, 0.8);--theme-color-paper-alpha-high:rgba(58, 59, 59, 0.1);--theme-color-border:rgba(58, 59, 59, 0.2);--theme-color-overlay:rgba(255, 255, 255, 0.1)}