@acorex/styles 19.8.0-next.6 → 19.8.0-next.8

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/icons/fontawesome/index.scss +10 -11
  2. package/icons/huge/huge-bulk/index.scss +4 -4
  3. package/icons/huge/huge-duotone/index.scss +4 -4
  4. package/icons/huge/huge-solid-sharp/index.scss +4 -4
  5. package/icons/huge/huge-solid-standard/index.scss +4 -4
  6. package/icons/huge/huge-stroke-rounded/index.scss +4 -4
  7. package/icons/huge/huge-stroke-sharp/index.scss +4 -4
  8. package/icons/huge/huge-stroke-standard/index.scss +4 -4
  9. package/icons/huge/huge-twotone/index.scss +4 -4
  10. package/icons/material/index.scss +4 -5
  11. package/index.css +319 -2016
  12. package/index.min.css +1 -1
  13. package/index.scss +1 -0
  14. package/package.json +1 -1
  15. package/src/base/index.scss +2 -4
  16. package/src/components/editors/_base.scss +50 -0
  17. package/src/components/editors/index.scss +60 -0
  18. package/src/components/editors/looks/_fill.scss +17 -0
  19. package/src/components/editors/looks/_flat.scss +18 -0
  20. package/src/components/editors/looks/_outline.scss +18 -0
  21. package/src/components/editors/looks/_solid.scss +20 -0
  22. package/src/components/editors/looks/index.scss +4 -0
  23. package/src/components/index.scss +1 -0
  24. package/src/mixins/_look.scss +20 -35
  25. package/src/shared/_action-item.scss +3 -3
  26. package/src/shared/_actionsheet.scss +7 -6
  27. package/src/shared/_check-box.scss +8 -14
  28. package/src/shared/_drop-down.scss +7 -16
  29. package/src/shared/_editor-container.scss +35 -75
  30. package/src/shared/_general-button.scss +11 -12
  31. package/src/shared/_inputs.scss +0 -16
  32. package/src/shared/_list.scss +15 -41
  33. package/src/shared/_radio.scss +8 -14
  34. package/src/shared/_ripple.scss +13 -0
  35. package/src/shared/_table.scss +9 -30
  36. package/src/shared/_utils.scss +10 -16
  37. package/src/shared/index.scss +4 -2
  38. package/src/utility/index.scss +2 -22
  39. package/src/variables/_colors.scss +1 -1
  40. package/tailwind-base.js +89 -56
  41. package/themes/default.css +1 -1
  42. package/themes/default.scss +240 -139
  43. package/themes/test.scss +237 -0
  44. package/src/shared/_color-look.scss +0 -822
package/themes/default.scss CHANGED
@@ -1,145 +1,246 @@
1
1
  :root,
2
2
  .ax-light {
3
- --ax-size-base: 2.5rem;
4
- --ax-size-default: var(--ax-size-base);
5
- --ax-icon-weight: 400;
6
- --ax-icon-size: 100%;
7
-
8
- --ax-rounded-border-default: 0.5rem;
9
-
10
- --ax-color-border-default: 233, 234, 235;
11
-
12
- --ax-color-background-default: 249, 250, 251;
13
- --ax-color-text-default: 22, 22, 22;
14
-
15
- --ax-color-surface: 255, 255, 255;
16
- --ax-color-surface-fore: 22, 22, 22;
17
-
18
- --ax-color-on-surface: 250, 250, 250;
19
- --ax-color-on-surface-fore: 22, 22, 22;
20
-
21
- --ax-color-input-surface: 255, 255, 255;
22
- --ax-color-input-surface-fore: 22, 22, 22;
23
- --ax-color-input-border: 213, 215, 218;
24
-
25
- --ax-color-ghost: 255, 255, 255;
26
- --ax-color-ghost-fore: 22, 22, 22;
27
-
28
- --ax-color-primary-fore: 255, 255, 255;
29
- --ax-color-primary-fore-tint: 11, 30, 71;
30
- --ax-color-primary-50: 244, 247, 254;
31
- --ax-color-primary-100: 233, 239, 253;
32
- --ax-color-primary-200: 190, 208, 249;
33
- --ax-color-primary-300: 146, 177, 245;
34
- --ax-color-primary-400: 102, 146, 241;
35
- --ax-color-primary-500: 37, 99, 235;
36
- --ax-color-primary-600: 33, 89, 212;
37
- --ax-color-primary-700: 26, 69, 165;
38
- --ax-color-primary-800: 19, 50, 118;
39
- --ax-color-primary-900: 11, 30, 71;
40
- --ax-color-primary-950: 4, 10, 23;
41
-
42
- --ax-color-secondary-fore: 255, 255, 255;
43
- --ax-color-secondary-fore-tint: 9, 12, 18;
44
- --ax-color-secondary-50: 244, 244, 245;
45
- --ax-color-secondary-100: 233, 234, 235;
46
- --ax-color-secondary-200: 188, 191, 196;
47
- --ax-color-secondary-300: 143, 148, 157;
48
- --ax-color-secondary-400: 98, 105, 118;
49
- --ax-color-secondary-500: 30, 41, 59;
50
- --ax-color-secondary-600: 27, 37, 53;
51
- --ax-color-secondary-700: 21, 29, 41;
52
- --ax-color-secondary-800: 15, 21, 30;
53
- --ax-color-secondary-900: 9, 12, 18;
54
- --ax-color-secondary-950: 3, 4, 6;
55
-
56
- --ax-color-success-fore: 255, 255, 255;
57
- --ax-color-success-fore-tint: 6, 78, 59;
58
- --ax-color-success-50: 236, 253, 245;
59
- --ax-color-success-100: 209, 250, 229;
60
- --ax-color-success-200: 167, 243, 208;
61
- --ax-color-success-300: 110, 231, 183;
62
- --ax-color-success-400: 52, 211, 153;
63
- --ax-color-success-500: 16, 185, 129;
64
- --ax-color-success-600: 5, 150, 105;
65
- --ax-color-success-700: 4, 120, 87;
66
- --ax-color-success-800: 6, 95, 70;
67
- --ax-color-success-900: 6, 78, 59;
68
- --ax-color-success-950: 2, 44, 34;
69
-
70
- --ax-color-warning-fore: 48, 26, 10;
71
- --ax-color-warning-fore-tint: 255, 111, 0;
72
- --ax-color-warning-50: 255, 248, 225;
73
- --ax-color-warning-100: 255, 236, 179;
74
- --ax-color-warning-200: 255, 224, 130;
75
- --ax-color-warning-300: 255, 213, 79;
76
- --ax-color-warning-400: 255, 202, 40;
77
- --ax-color-warning-500: 255, 193, 7;
78
- --ax-color-warning-600: 255, 179, 0;
79
- --ax-color-warning-700: 255, 160, 0;
80
- --ax-color-warning-800: 255, 143, 0;
81
- --ax-color-warning-900: 255, 111, 0;
82
- --ax-color-warning-950: 72, 40, 15;
83
-
84
- --ax-color-danger-fore: 255, 255, 255;
85
- --ax-color-danger-fore-tint: 127, 29, 29;
86
- --ax-color-danger-50: 254, 242, 242;
87
- --ax-color-danger-100: 254, 226, 226;
88
- --ax-color-danger-200: 254, 202, 202;
89
- --ax-color-danger-300: 252, 165, 165;
90
- --ax-color-danger-400: 248, 113, 113;
91
- --ax-color-danger-500: 239, 68, 68;
92
- --ax-color-danger-600: 220, 38, 38;
93
- --ax-color-danger-700: 185, 28, 28;
94
- --ax-color-danger-800: 153, 27, 27;
95
- --ax-color-danger-900: 127, 29, 29;
96
- --ax-color-danger-950: 69, 10, 10;
97
-
98
- --ax-color-info-fore: 255, 255, 255;
99
- --ax-color-info-fore-tint: 49, 46, 129;
100
- --ax-color-info-50: 238, 242, 255;
101
- --ax-color-info-100: 224, 231, 255;
102
- --ax-color-info-200: 199, 210, 254;
103
- --ax-color-info-300: 165, 180, 252;
104
- --ax-color-info-400: 129, 140, 248;
105
- --ax-color-info-500: 99, 102, 241;
106
- --ax-color-info-600: 79, 70, 229;
107
- --ax-color-info-700: 67, 56, 202;
108
- --ax-color-info-800: 55, 48, 163;
109
- --ax-color-info-900: 49, 46, 129;
110
- --ax-color-info-950: 30, 27, 75;
111
-
112
- --ax-color-neutral-fore: 255, 255, 255;
113
- --ax-color-neutral-fore-tint: 17, 24, 39;
114
- --ax-color-neutral-50: 249, 250, 251;
115
- --ax-color-neutral-100: 243, 244, 246;
116
- --ax-color-neutral-200: 229, 231, 235;
117
- --ax-color-neutral-300: 209, 213, 219;
118
- --ax-color-neutral-400: 156, 163, 175;
119
- --ax-color-neutral-500: 107, 114, 128;
120
- --ax-color-neutral-600: 75, 85, 99;
121
- --ax-color-neutral-700: 55, 65, 81;
122
- --ax-color-neutral-800: 31, 41, 55;
123
- --ax-color-neutral-900: 17, 24, 39;
124
- --ax-color-neutral-950: 3, 7, 18;
3
+ --ax-sys-body-font-size: 1rem;
4
+ --ax-sys-size-base: 2.5rem;
5
+ --ax-sys-transition-duration: 150ms;
6
+ --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
7
+ --ax-sys-border-radius: 0.5rem;
8
+ --ax-sys-border-color: 233, 234, 235;
9
+ --ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);
10
+ --ax-sys-body-text-color: 22, 22, 22;
11
+
12
+ // Surfaces
13
+ --ax-sys-surface-light-bg-color: 255, 255, 255;
14
+ --ax-sys-on-surface-light-color: 0, 0, 0;
15
+ --ax-sys-surface-light-border-color: 0, 0, 0;
16
+
17
+ --ax-sys-surface-lowest-bg-color: 255, 255, 255;
18
+ --ax-sys-on-surface-lowest-color: 40, 40, 40;
19
+ --ax-sys-surface-lowest-border-color: 233, 236, 239;
20
+
21
+ --ax-sys-surface-low-bg-color: 248, 249, 250;
22
+ --ax-sys-on-surface-low-color: 40, 40, 40;
23
+ --ax-sys-surface-low-border-color: 233, 236, 239;
24
+
25
+ --ax-sys-surface-bg-color: 239, 241, 243;
26
+ --ax-sys-on-surface-color: 30, 30, 30;
27
+ --ax-sys-surface-border-color: 232, 235, 238;
28
+
29
+ --ax-sys-surface-high-bg-color: 234, 237, 239;
30
+ --ax-sys-on-surface-high-color: 20, 20, 20;
31
+ --ax-sys-surface-high-border-color: 228, 231, 234;
32
+
33
+ --ax-sys-surface-highest-bg-color: 230, 233, 236;
34
+ --ax-sys-on-surface-highest-color: 10, 10, 10;
35
+ --ax-sys-surface-highest-border-color: 225, 229, 233;
36
+
37
+ --ax-sys-surface-input-bg-color: 255, 255, 255;
38
+ --ax-sys-surface-input-text-color: 30, 30, 30;
39
+ --ax-sys-surface-input-placeholder-color: 180, 180, 180;
40
+ --ax-sys-surface-input-border-color: 220, 220, 220;
41
+
42
+ --ax-sys-surface-dark-bg-color: 0, 0, 0;
43
+ --ax-sys-on-surface-dark-color: 255, 255, 255;
44
+ --ax-sys-surface-dark-border-color: 255, 255, 255;
45
+
46
+ // Base Colors
47
+ --ax-sys-color-on-primary: 255, 255, 255;
48
+ --ax-sys-color-on-contrast-primary: 11, 30, 71;
49
+ --ax-sys-color-primary-50: 239, 246, 255;
50
+ --ax-sys-color-primary-100: 219, 234, 254;
51
+ --ax-sys-color-primary-200: 191, 219, 254;
52
+ --ax-sys-color-primary-300: 147, 197, 253;
53
+ --ax-sys-color-primary-400: 96, 165, 250;
54
+ --ax-sys-color-primary-500: 59, 130, 246;
55
+ --ax-sys-color-primary-600: 37, 99, 235;
56
+ --ax-sys-color-primary-700: 29, 78, 216;
57
+ --ax-sys-color-primary-800: 30, 64, 175;
58
+ --ax-sys-color-primary-900: 30, 58, 138;
59
+ --ax-sys-color-primary-950: 23, 37, 84;
60
+
61
+ --ax-sys-color-on-secondary: 255, 255, 255;
62
+ --ax-sys-color-on-contrast-secondary: 9, 9, 11;
63
+ --ax-sys-color-secondary-50: 249, 250, 251;
64
+ --ax-sys-color-secondary-100: 243, 244, 246;
65
+ --ax-sys-color-secondary-200: 229, 231, 235;
66
+ --ax-sys-color-secondary-300: 209, 213, 219;
67
+ --ax-sys-color-secondary-400: 156, 163, 175;
68
+ --ax-sys-color-secondary-500: 107, 114, 128;
69
+ --ax-sys-color-secondary-600: 75, 85, 99;
70
+ --ax-sys-color-secondary-700: 55, 65, 81;
71
+ --ax-sys-color-secondary-800: 31, 41, 55;
72
+ --ax-sys-color-secondary-900: 24, 24, 27;
73
+ --ax-sys-color-secondary-950: 9, 9, 11;
74
+
75
+ --ax-sys-color-on-success: 255, 255, 255;
76
+ --ax-sys-color-on-contrast-success: 5, 46, 22;
77
+ --ax-sys-color-success-50: 240, 253, 244;
78
+ --ax-sys-color-success-100: 220, 252, 231;
79
+ --ax-sys-color-success-200: 187, 247, 208;
80
+ --ax-sys-color-success-300: 134, 239, 172;
81
+ --ax-sys-color-success-400: 74, 222, 128;
82
+ --ax-sys-color-success-500: 34, 197, 94;
83
+ --ax-sys-color-success-600: 22, 163, 74;
84
+ --ax-sys-color-success-700: 21, 128, 61;
85
+ --ax-sys-color-success-800: 22, 101, 52;
86
+ --ax-sys-color-success-900: 20, 83, 45;
87
+ --ax-sys-color-success-950: 5, 46, 22;
88
+
89
+ --ax-sys-color-on-warning: 255, 255, 255;
90
+ --ax-sys-color-on-contrast-warning: 69, 26, 3;
91
+ --ax-sys-color-warning-50: 255, 251, 235;
92
+ --ax-sys-color-warning-100: 254, 243, 199;
93
+ --ax-sys-color-warning-200: 253, 230, 138;
94
+ --ax-sys-color-warning-300: 252, 211, 77;
95
+ --ax-sys-color-warning-400: 251, 191, 36;
96
+ --ax-sys-color-warning-500: 245, 158, 11;
97
+ --ax-sys-color-warning-600: 217, 119, 6;
98
+ --ax-sys-color-warning-700: 180, 83, 9;
99
+ --ax-sys-color-warning-800: 146, 64, 14;
100
+ --ax-sys-color-warning-900: 120, 53, 15;
101
+ --ax-sys-color-warning-950: 69, 26, 3;
102
+
103
+ --ax-sys-color-on-danger: 255, 255, 255;
104
+ --ax-sys-color-on-contrast-danger: 76, 5, 25;
105
+ --ax-sys-color-danger-50: 255, 241, 242;
106
+ --ax-sys-color-danger-100: 255, 228, 230;
107
+ --ax-sys-color-danger-200: 254, 205, 211;
108
+ --ax-sys-color-danger-300: 253, 164, 175;
109
+ --ax-sys-color-danger-400: 251, 113, 133;
110
+ --ax-sys-color-danger-500: 244, 63, 94;
111
+ --ax-sys-color-danger-600: 225, 29, 72;
112
+ --ax-sys-color-danger-700: 190, 18, 60;
113
+ --ax-sys-color-danger-800: 159, 18, 57;
114
+ --ax-sys-color-danger-900: 136, 19, 55;
115
+ --ax-sys-color-danger-950: 76, 5, 25;
116
+
117
+ --ax-sys-color-on-ghost: 255, 255, 255;
118
+ --ax-sys-color-on-contrast-ghost: 24, 24, 27;
119
+ --ax-sys-color-ghost-50: 255, 255, 255;
120
+ --ax-sys-color-ghost-100: 244, 244, 245;
121
+ --ax-sys-color-ghost-200: 228, 228, 231;
122
+ --ax-sys-color-ghost-300: 212, 212, 216;
123
+ --ax-sys-color-ghost-400: 161, 161, 170;
124
+ --ax-sys-color-ghost-500: 113, 113, 122;
125
+ --ax-sys-color-ghost-600: 82, 82, 91;
126
+ --ax-sys-color-ghost-700: 63, 63, 70;
127
+ --ax-sys-color-ghost-800: 39, 39, 42;
128
+ --ax-sys-color-ghost-900: 24, 24, 27;
129
+ --ax-sys-color-ghost-950: 9, 9, 11;
125
130
  }
126
131
 
127
132
  .ax-dark {
128
- --ax-color-border-default: 34, 38, 47;
129
-
130
- --ax-color-background-default: 12, 14, 18;
131
- --ax-color-text-default: 255, 255, 255;
132
-
133
- --ax-color-surface: 19, 22, 27;
134
- --ax-color-surface-fore: 255, 255, 255;
135
-
136
- --ax-color-on-surface: 34, 38, 47;
137
- --ax-color-on-surface-fore: 255, 255, 255;
138
-
139
- --ax-color-input-surface: 12, 14, 18;
140
- --ax-color-input-surface-fore: 224, 224, 224;
141
- --ax-color-input-border: 55, 58, 65;
142
-
143
- --ax-color-ghost: 77, 91, 113;
144
- --ax-color-ghost-fore: 255, 255, 255;
133
+ --ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);
134
+ --ax-sys-body-text-color: 255, 255, 255;
135
+
136
+ --ax-sys-border-color: 34, 38, 47;
137
+
138
+ --ax-sys-surface-lowest-bg-color: 15, 15, 15;
139
+ --ax-sys-on-surface-lowest-color: 220, 220, 220;
140
+ --ax-sys-surface-lowest-border-color: 20, 20, 20;
141
+
142
+ --ax-sys-surface-low-bg-color: 20, 20, 20;
143
+ --ax-sys-on-surface-low-color: 230, 230, 230;
144
+ --ax-sys-surface-low-border-color: 25, 25, 25;
145
+
146
+ --ax-sys-surface-bg-color: 25, 25, 25;
147
+ --ax-sys-on-surface-color: 240, 240, 240;
148
+ --ax-sys-surface-border-color: 34, 34, 34;
149
+
150
+ --ax-sys-surface-high-bg-color: 29, 29, 29;
151
+ --ax-sys-on-surface-high-color: 250, 250, 250;
152
+ --ax-sys-surface-high-border-color: 43, 43, 43;
153
+
154
+ --ax-sys-surface-highest-bg-color: 34, 34, 34;
155
+ --ax-sys-on-surface-highest-color: 255, 255, 255;
156
+ --ax-sys-surface-highest-border-color: 52, 52, 52;
157
+
158
+ --ax-sys-surface-input-bg-color: var(--ax-sys-surface-lowest-bg-color);
159
+ --ax-sys-surface-input-text-color: var(--ax-sys-on-surface-lowest-color);
160
+ --ax-sys-surface-input-placeholder-color: 100, 100, 100;
161
+ --ax-sys-surface-input-border-color: var(--ax-sys-surface-border-color);
162
+
163
+ --ax-sys-color-on-primary: 11, 30, 71;
164
+ --ax-sys-color-on-contrast-primary: 57, 62, 75;
165
+ --ax-sys-color-primary-50: 252, 253, 255;
166
+ --ax-sys-color-primary-100: 249, 250, 254;
167
+ --ax-sys-color-primary-200: 236, 241, 253;
168
+ --ax-sys-color-primary-300: 224, 232, 252;
169
+ --ax-sys-color-primary-400: 211, 222, 251;
170
+ --ax-sys-color-primary-500: 192, 208, 249;
171
+ --ax-sys-color-primary-600: 173, 187, 224;
172
+ --ax-sys-color-primary-700: 134, 146, 174;
173
+ --ax-sys-color-primary-800: 96, 104, 125;
174
+ --ax-sys-color-primary-900: 58, 62, 75;
175
+ --ax-sys-color-primary-950: 19, 21, 25;
176
+
177
+ --ax-sys-color-on-secondary: 58, 62, 69;
178
+ --ax-sys-color-on-contrast-secondary: 70, 74, 83;
179
+ --ax-sys-color-secondary-50: 255, 255, 255;
180
+ --ax-sys-color-secondary-100: 241, 242, 243;
181
+ --ax-sys-color-secondary-200: 227, 229, 232;
182
+ --ax-sys-color-secondary-300: 213, 216, 220;
183
+ --ax-sys-color-secondary-400: 199, 202, 209;
184
+ --ax-sys-color-secondary-500: 172, 176, 185;
185
+ --ax-sys-color-secondary-600: 144, 150, 162;
186
+ --ax-sys-color-secondary-700: 116, 124, 139;
187
+ --ax-sys-color-secondary-800: 93, 99, 111;
188
+ --ax-sys-color-secondary-900: 70, 74, 83;
189
+ --ax-sys-color-secondary-950: 58, 62, 69;
190
+
191
+ --ax-sys-color-on-success: 19, 109, 52;
192
+ --ax-sys-color-on-contrast-success: 23, 130, 62;
193
+ --ax-sys-color-success-50: 255, 255, 255;
194
+ --ax-sys-color-success-100: 233, 251, 240;
195
+ --ax-sys-color-success-200: 212, 247, 225;
196
+ --ax-sys-color-success-300: 190, 244, 210;
197
+ --ax-sys-color-success-400: 168, 240, 195;
198
+ --ax-sys-color-success-500: 125, 232, 164;
199
+ --ax-sys-color-success-600: 81, 225, 134;
200
+ --ax-sys-color-success-700: 38, 217, 104;
201
+ --ax-sys-color-success-800: 30, 174, 83;
202
+ --ax-sys-color-success-900: 23, 130, 62;
203
+ --ax-sys-color-success-950: 19, 109, 52;
204
+
205
+ --ax-sys-color-on-warning: 122, 79, 5;
206
+ --ax-sys-color-on-contrast-warning: 147, 95, 6;
207
+ --ax-sys-color-warning-50: 255, 255, 255;
208
+ --ax-sys-color-warning-100: 254, 245, 231;
209
+ --ax-sys-color-warning-200: 253, 236, 206;
210
+ --ax-sys-color-warning-300: 252, 226, 182;
211
+ --ax-sys-color-warning-400: 251, 216, 157;
212
+ --ax-sys-color-warning-500: 249, 197, 108;
213
+ --ax-sys-color-warning-600: 247, 177, 59;
214
+ --ax-sys-color-warning-700: 245, 158, 10;
215
+ --ax-sys-color-warning-800: 196, 126, 8;
216
+ --ax-sys-color-warning-900: 147, 95, 6;
217
+ --ax-sys-color-warning-950: 122, 79, 5;
218
+
219
+ --ax-sys-color-on-danger: 121, 7, 26;
220
+ --ax-sys-color-on-contrast-danger: 145, 8, 32;
221
+ --ax-sys-color-danger-50: 255, 255, 255;
222
+ --ax-sys-color-danger-100: 254, 231, 235;
223
+ --ax-sys-color-danger-200: 252, 207, 215;
224
+ --ax-sys-color-danger-300: 251, 183, 194;
225
+ --ax-sys-color-danger-400: 249, 159, 174;
226
+ --ax-sys-color-danger-500: 247, 110, 134;
227
+ --ax-sys-color-danger-600: 244, 62, 93;
228
+ --ax-sys-color-danger-700: 241, 14, 53;
229
+ --ax-sys-color-danger-800: 193, 11, 42;
230
+ --ax-sys-color-danger-900: 145, 8, 32;
231
+ --ax-sys-color-danger-950: 121, 7, 26;
232
+
233
+ --ax-sys-color-on-ghost: 24, 24, 27;
234
+ --ax-sys-color-on-contrast-ghost: 244, 244, 245;
235
+ --ax-sys-color-ghost-50: 9, 9, 11;
236
+ --ax-sys-color-ghost-100: 24, 24, 27;
237
+ --ax-sys-color-ghost-200: 39, 39, 42;
238
+ --ax-sys-color-ghost-300: 63, 63, 70;
239
+ --ax-sys-color-ghost-400: 82, 82, 91;
240
+ --ax-sys-color-ghost-500: 113, 113, 122;
241
+ --ax-sys-color-ghost-600: 161, 161, 170;
242
+ --ax-sys-color-ghost-700: 212, 212, 216;
243
+ --ax-sys-color-ghost-800: 228, 228, 231;
244
+ --ax-sys-color-ghost-900: 244, 244, 245;
245
+ --ax-sys-color-ghost-950: 250, 250, 250;
145
246
  }
package/themes/test.scss ADDED
@@ -0,0 +1,237 @@
1
+ :root {
2
+ --ax-sys-body-font-size: 1rem;
3
+ --ax-sys-size-base: 2.5rem;
4
+ --ax-sys-transition-duration: 150ms;
5
+ --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
6
+ --ax-sys-border-radius: 0.5rem;
7
+ --ax-sys-border-color: 233, 234, 235;
8
+ --ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);
9
+ --ax-sys-body-text-color: 22, 22, 22;
10
+
11
+ // Surfaces
12
+ --ax-sys-surface-light-bg-color: 255, 255, 255;
13
+ --ax-sys-on-surface-light-color: 0, 0, 0;
14
+ --ax-sys-surface-light-border-color: 0, 0, 0;
15
+
16
+ --ax-sys-surface-lowest-bg-color: 255, 255, 255;
17
+ --ax-sys-on-surface-lowest-color: 40, 40, 40;
18
+ --ax-sys-surface-lowest-border-color: 233, 236, 239;
19
+
20
+ --ax-sys-surface-low-bg-color: 248, 249, 250;
21
+ --ax-sys-on-surface-low-color: 40, 40, 40;
22
+ --ax-sys-surface-low-border-color: 233, 236, 239;
23
+
24
+ --ax-sys-surface-bg-color: 239, 241, 243;
25
+ --ax-sys-on-surface-color: 30, 30, 30;
26
+ --ax-sys-surface-border-color: 232, 235, 238;
27
+
28
+ --ax-sys-surface-high-bg-color: 234, 237, 239;
29
+ --ax-sys-on-surface-high-color: 20, 20, 20;
30
+ --ax-sys-surface-high-border-color: 228, 231, 234;
31
+
32
+ --ax-sys-surface-highest-bg-color: 230, 233, 236;
33
+ --ax-sys-on-surface-highest-color: 10, 10, 10;
34
+ --ax-sys-surface-highest-border-color: 225, 229, 233;
35
+
36
+ --ax-sys-surface-input-bg-color: 255, 255, 255;
37
+ --ax-sys-surface-input-text-color: 30, 30, 30;
38
+ --ax-sys-surface-input-placeholder-color: 180, 180, 180;
39
+ --ax-sys-surface-input-border-color: 220, 220, 220;
40
+
41
+ --ax-sys-surface-dark-bg-color: 0, 0, 0;
42
+ --ax-sys-on-surface-dark-color: 255, 255, 255;
43
+ --ax-sys-surface-dark-border-color: 255, 255, 255;
44
+ }
45
+
46
+ .ax-dark {
47
+ --ax-sys-body-text-color: 255, 255, 255;
48
+
49
+ --ax-sys-border-color: 34, 38, 47;
50
+
51
+ --ax-sys-surface-lowest-bg-color: 15, 15, 15;
52
+ --ax-sys-on-surface-lowest-color: 220, 220, 220;
53
+ --ax-sys-surface-lowest-border-color: 20, 20, 20;
54
+
55
+ --ax-sys-surface-low-bg-color: 20, 20, 20;
56
+ --ax-sys-on-surface-low-color: 230, 230, 230;
57
+ --ax-sys-surface-low-border-color: 25, 25, 25;
58
+
59
+ --ax-sys-surface-bg-color: 25, 25, 25;
60
+ --ax-sys-on-surface-color: 240, 240, 240;
61
+ --ax-sys-surface-border-color: 34, 34, 34;
62
+
63
+ --ax-sys-surface-high-bg-color: 29, 29, 29;
64
+ --ax-sys-on-surface-high-color: 250, 250, 250;
65
+ --ax-sys-surface-high-border-color: 43, 43, 43;
66
+
67
+ --ax-sys-surface-highest-bg-color: 34, 34, 34;
68
+ --ax-sys-on-surface-highest-color: 255, 255, 255;
69
+ --ax-sys-surface-highest-border-color: 52, 52, 52;
70
+
71
+ --ax-sys-surface-input-bg-color: var(--ax-sys-surface-lowest-bg-color);
72
+ --ax-sys-surface-input-text-color: var(--ax-sys-on-surface-lowest-color);
73
+ --ax-sys-surface-input-placeholder-color: 100, 100, 100;
74
+ --ax-sys-surface-input-border-color: var(--ax-sys-surface-border-color);
75
+ }
76
+
77
+ :root {
78
+ --ax-sys-color-primary-50: 232, 238, 253;
79
+ --ax-sys-color-primary-100: 208, 222, 251;
80
+ --ax-sys-color-primary-200: 162, 188, 246;
81
+ --ax-sys-color-primary-300: 115, 155, 242;
82
+ --ax-sys-color-primary-400: 68, 121, 238;
83
+ --ax-sys-color-primary-500: 21, 88, 234;
84
+ --ax-sys-color-primary-600: 17, 70, 187;
85
+ --ax-sys-color-primary-700: 13, 53, 140;
86
+ --ax-sys-color-primary-800: 9, 35, 93;
87
+ --ax-sys-color-primary-900: 4, 18, 47;
88
+ --ax-sys-color-primary-950: 2, 9, 23;
89
+ --ax-sys-on-primary: 255, 255, 255;
90
+ --ax-sys-on-contrast-primary: 0, 0, 0;
91
+ --ax-sys-color-secondary-50: 243, 242, 241;
92
+ --ax-sys-color-secondary-100: 231, 230, 228;
93
+ --ax-sys-color-secondary-200: 207, 204, 201;
94
+ --ax-sys-color-secondary-300: 183, 179, 174;
95
+ --ax-sys-color-secondary-400: 159, 153, 147;
96
+ --ax-sys-color-secondary-500: 135, 128, 120;
97
+ --ax-sys-color-secondary-600: 108, 102, 96;
98
+ --ax-sys-color-secondary-700: 81, 77, 72;
99
+ --ax-sys-color-secondary-800: 54, 51, 48;
100
+ --ax-sys-color-secondary-900: 27, 26, 24;
101
+ --ax-sys-color-secondary-950: 14, 13, 12;
102
+ --ax-sys-on-secondary: 0, 0, 0;
103
+ --ax-sys-on-contrast-secondary: 0, 0, 0;
104
+ --ax-sys-color-success-50: 232, 253, 246;
105
+ --ax-sys-color-success-100: 208, 251, 237;
106
+ --ax-sys-color-success-200: 161, 247, 218;
107
+ --ax-sys-color-success-300: 114, 243, 200;
108
+ --ax-sys-color-success-400: 67, 239, 182;
109
+ --ax-sys-color-success-500: 20, 235, 164;
110
+ --ax-sys-color-success-600: 16, 188, 131;
111
+ --ax-sys-color-success-700: 12, 141, 98;
112
+ --ax-sys-color-success-800: 8, 94, 65;
113
+ --ax-sys-color-success-900: 4, 47, 33;
114
+ --ax-sys-color-success-950: 2, 23, 16;
115
+ --ax-sys-on-success: 0, 0, 0;
116
+ --ax-sys-on-contrast-success: 0, 0, 0;
117
+ --ax-sys-color-warning-50: 254, 245, 231;
118
+ --ax-sys-color-warning-100: 253, 236, 206;
119
+ --ax-sys-color-warning-200: 251, 216, 157;
120
+ --ax-sys-color-warning-300: 249, 197, 108;
121
+ --ax-sys-color-warning-400: 247, 177, 59;
122
+ --ax-sys-color-warning-500: 245, 158, 10;
123
+ --ax-sys-color-warning-600: 196, 126, 8;
124
+ --ax-sys-color-warning-700: 147, 95, 6;
125
+ --ax-sys-color-warning-800: 98, 63, 4;
126
+ --ax-sys-color-warning-900: 49, 32, 2;
127
+ --ax-sys-color-warning-950: 24, 16, 1;
128
+ --ax-sys-on-warning: 0, 0, 0;
129
+ --ax-sys-on-contrast-warning: 0, 0, 0;
130
+ --ax-sys-color-danger-50: 254, 231, 235;
131
+ --ax-sys-color-danger-100: 252, 207, 215;
132
+ --ax-sys-color-danger-200: 249, 159, 174;
133
+ --ax-sys-color-danger-300: 247, 110, 134;
134
+ --ax-sys-color-danger-400: 244, 62, 93;
135
+ --ax-sys-color-danger-500: 241, 14, 53;
136
+ --ax-sys-color-danger-600: 193, 11, 42;
137
+ --ax-sys-color-danger-700: 145, 8, 32;
138
+ --ax-sys-color-danger-800: 96, 6, 21;
139
+ --ax-sys-color-danger-900: 48, 3, 11;
140
+ --ax-sys-color-danger-950: 24, 1, 5;
141
+ --ax-sys-on-danger: 255, 255, 255;
142
+ --ax-sys-on-contrast-danger: 0, 0, 0;
143
+ --ax-sys-color-ghost-50: 242, 242, 242;
144
+ --ax-sys-color-ghost-100: 230, 230, 230;
145
+ --ax-sys-color-ghost-200: 204, 204, 204;
146
+ --ax-sys-color-ghost-300: 179, 179, 179;
147
+ --ax-sys-color-ghost-400: 153, 153, 153;
148
+ --ax-sys-color-ghost-500: 128, 128, 128;
149
+ --ax-sys-color-ghost-600: 102, 102, 102;
150
+ --ax-sys-color-ghost-700: 77, 77, 77;
151
+ --ax-sys-color-ghost-800: 51, 51, 51;
152
+ --ax-sys-color-ghost-900: 26, 26, 26;
153
+ --ax-sys-color-ghost-950: 13, 13, 13;
154
+ --ax-sys-on-ghost: 255, 255, 255;
155
+ --ax-sys-on-contrast-ghost: 0, 0, 0;
156
+ }
157
+
158
+ .dark {
159
+ --ax-sys-color-primary-50: 255, 255, 255;
160
+ --ax-sys-color-primary-100: 232, 238, 253;
161
+ --ax-sys-color-primary-200: 208, 222, 251;
162
+ --ax-sys-color-primary-300: 185, 205, 249;
163
+ --ax-sys-color-primary-400: 162, 188, 246;
164
+ --ax-sys-color-primary-500: 115, 155, 242;
165
+ --ax-sys-color-primary-600: 68, 121, 238;
166
+ --ax-sys-color-primary-700: 21, 88, 234;
167
+ --ax-sys-color-primary-800: 17, 70, 187;
168
+ --ax-sys-color-primary-900: 13, 53, 140;
169
+ --ax-sys-color-primary-950: 11, 44, 117;
170
+ --ax-sys-on-primary: 255, 255, 255;
171
+ --ax-sys-on-contrast-primary: 0, 0, 0;
172
+ --ax-sys-color-secondary-50: 255, 255, 255;
173
+ --ax-sys-color-secondary-100: 243, 242, 241;
174
+ --ax-sys-color-secondary-200: 231, 230, 228;
175
+ --ax-sys-color-secondary-300: 219, 217, 214;
176
+ --ax-sys-color-secondary-400: 207, 204, 201;
177
+ --ax-sys-color-secondary-500: 183, 179, 174;
178
+ --ax-sys-color-secondary-600: 159, 153, 147;
179
+ --ax-sys-color-secondary-700: 135, 128, 120;
180
+ --ax-sys-color-secondary-800: 108, 102, 96;
181
+ --ax-sys-color-secondary-900: 81, 77, 72;
182
+ --ax-sys-color-secondary-950: 68, 64, 60;
183
+ --ax-sys-on-secondary: 0, 0, 0;
184
+ --ax-sys-on-contrast-secondary: 0, 0, 0;
185
+ --ax-sys-color-success-50: 255, 255, 255;
186
+ --ax-sys-color-success-100: 232, 253, 246;
187
+ --ax-sys-color-success-200: 208, 251, 237;
188
+ --ax-sys-color-success-300: 185, 249, 228;
189
+ --ax-sys-color-success-400: 161, 247, 218;
190
+ --ax-sys-color-success-500: 114, 243, 200;
191
+ --ax-sys-color-success-600: 67, 239, 182;
192
+ --ax-sys-color-success-700: 20, 235, 164;
193
+ --ax-sys-color-success-800: 16, 188, 131;
194
+ --ax-sys-color-success-900: 12, 141, 98;
195
+ --ax-sys-color-success-950: 10, 117, 82;
196
+ --ax-sys-on-success: 0, 0, 0;
197
+ --ax-sys-on-contrast-success: 0, 0, 0;
198
+ --ax-sys-color-warning-50: 255, 255, 255;
199
+ --ax-sys-color-warning-100: 254, 245, 231;
200
+ --ax-sys-color-warning-200: 253, 236, 206;
201
+ --ax-sys-color-warning-300: 252, 226, 182;
202
+ --ax-sys-color-warning-400: 251, 216, 157;
203
+ --ax-sys-color-warning-500: 249, 197, 108;
204
+ --ax-sys-color-warning-600: 247, 177, 59;
205
+ --ax-sys-color-warning-700: 245, 158, 10;
206
+ --ax-sys-color-warning-800: 196, 126, 8;
207
+ --ax-sys-color-warning-900: 147, 95, 6;
208
+ --ax-sys-color-warning-950: 122, 79, 5;
209
+ --ax-sys-on-warning: 0, 0, 0;
210
+ --ax-sys-on-contrast-warning: 0, 0, 0;
211
+ --ax-sys-color-danger-50: 255, 255, 255;
212
+ --ax-sys-color-danger-100: 254, 231, 235;
213
+ --ax-sys-color-danger-200: 252, 207, 215;
214
+ --ax-sys-color-danger-300: 251, 183, 194;
215
+ --ax-sys-color-danger-400: 249, 159, 174;
216
+ --ax-sys-color-danger-500: 247, 110, 134;
217
+ --ax-sys-color-danger-600: 244, 62, 93;
218
+ --ax-sys-color-danger-700: 241, 14, 53;
219
+ --ax-sys-color-danger-800: 193, 11, 42;
220
+ --ax-sys-color-danger-900: 145, 8, 32;
221
+ --ax-sys-color-danger-950: 121, 7, 26;
222
+ --ax-sys-on-danger: 255, 255, 255;
223
+ --ax-sys-on-contrast-danger: 0, 0, 0;
224
+ --ax-sys-color-ghost-50: 255, 255, 255;
225
+ --ax-sys-color-ghost-100: 242, 242, 242;
226
+ --ax-sys-color-ghost-200: 230, 230, 230;
227
+ --ax-sys-color-ghost-300: 217, 217, 217;
228
+ --ax-sys-color-ghost-400: 204, 204, 204;
229
+ --ax-sys-color-ghost-500: 179, 179, 179;
230
+ --ax-sys-color-ghost-600: 153, 153, 153;
231
+ --ax-sys-color-ghost-700: 128, 128, 128;
232
+ --ax-sys-color-ghost-800: 102, 102, 102;
233
+ --ax-sys-color-ghost-900: 77, 77, 77;
234
+ --ax-sys-color-ghost-950: 64, 64, 64;
235
+ --ax-sys-on-ghost: 255, 255, 255;
236
+ --ax-sys-on-contrast-ghost: 0, 0, 0;
237
+ }