@acorex/styles 19.7.0 → 19.8.0-next.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 (42) 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 +314 -2010
  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 +19 -34
  25. package/src/shared/_action-item.scss +2 -2
  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 +13 -39
  33. package/src/shared/_radio.scss +8 -14
  34. package/src/shared/_ripple.scss +13 -0
  35. package/src/shared/_table.scss +6 -27
  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/tailwind-base.js +73 -56
  40. package/themes/default.css +1 -1
  41. package/themes/default.scss +212 -141
  42. package/src/shared/_color-look.scss +0 -822
package/themes/default.scss CHANGED
@@ -1,145 +1,216 @@
1
- :root,
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;
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: 249, 250, 251;
13
+ --ax-sys-surface-light-text-color: 31, 42, 71;
14
+ --ax-sys-surface-light-border-color: 243, 244, 246;
15
+
16
+ --ax-sys-surface-lowest-bg-color: 255, 255, 255;
17
+ --ax-sys-surface-lowest-text-color: 40, 40, 40;
18
+ --ax-sys-surface-lowest-border-color: 250, 250, 250;
19
+
20
+ --ax-sys-surface-low-bg-color: 250, 250, 250;
21
+ --ax-sys-surface-low-text-color: 40, 40, 40;
22
+ --ax-sys-surface-low-border-color: 245, 245, 245;
23
+
24
+ --ax-sys-surface-bg-color: 245, 245, 245;
25
+ --ax-sys-surface-text-color: 30, 30, 30;
26
+ --ax-sys-surface-border-color: 233, 234, 235;
27
+
28
+ --ax-sys-surface-high-bg-color: 233, 234, 235;
29
+ --ax-sys-surface-high-text-color: 20, 20, 20;
30
+ --ax-sys-surface-high-border-color: 213, 215, 218;
31
+
32
+ --ax-sys-surface-highest-bg-color: 213, 215, 218;
33
+ --ax-sys-surface-highest-text-color: 10, 10, 10;
34
+ --ax-sys-surface-highest-border-color: 164, 167, 174;
35
+
36
+ --ax-sys-surface-dark-bg-color: 249, 250, 251;
37
+ --ax-sys-surface-dark-text-color: 31, 42, 71;
38
+ --ax-sys-surface-dark-border-color: 243, 244, 246;
39
+
40
+ --ax-sys-surface-input-bg-color: 255, 255, 255;
41
+ --ax-sys-surface-input-text-color: 30, 30, 30;
42
+ --ax-sys-surface-input-placeholder-color: 180, 180, 180;
43
+ --ax-sys-surface-input-border-color: 220, 220, 220;
44
+
45
+ // Base Colors
46
+ --ax-sys-color-primary-text: 255, 255, 255;
47
+ --ax-sys-color-primary-contrast-text: 11, 30, 71;
48
+ --ax-sys-color-primary-50: 244, 247, 254;
49
+ --ax-sys-color-primary-100: 233, 239, 253;
50
+ --ax-sys-color-primary-200: 190, 208, 249;
51
+ --ax-sys-color-primary-300: 146, 177, 245;
52
+ --ax-sys-color-primary-400: 102, 146, 241;
53
+ --ax-sys-color-primary-500: 37, 99, 235;
54
+ --ax-sys-color-primary-600: 33, 89, 212;
55
+ --ax-sys-color-primary-700: 26, 69, 165;
56
+ --ax-sys-color-primary-800: 19, 50, 118;
57
+ --ax-sys-color-primary-900: 11, 30, 71;
58
+ --ax-sys-color-primary-950: 4, 10, 23;
59
+
60
+ --ax-sys-color-success-text: 255, 255, 255;
61
+ --ax-sys-color-success-contrast-text: 6, 78, 59;
62
+ --ax-sys-color-success-50: 236, 253, 245;
63
+ --ax-sys-color-success-100: 209, 250, 229;
64
+ --ax-sys-color-success-200: 167, 243, 208;
65
+ --ax-sys-color-success-300: 110, 231, 183;
66
+ --ax-sys-color-success-400: 52, 211, 153;
67
+ --ax-sys-color-success-500: 16, 185, 129;
68
+ --ax-sys-color-success-600: 5, 150, 105;
69
+ --ax-sys-color-success-700: 4, 120, 87;
70
+ --ax-sys-color-success-800: 6, 95, 70;
71
+ --ax-sys-color-success-900: 6, 78, 59;
72
+ --ax-sys-color-success-950: 2, 44, 34;
73
+
74
+ --ax-sys-color-warning-text: 48, 26, 10;
75
+ --ax-sys-color-warning-contrast-text: 18, 15, 14;
76
+ --ax-sys-color-warning-50: 255, 248, 225;
77
+ --ax-sys-color-warning-100: 255, 236, 179;
78
+ --ax-sys-color-warning-200: 255, 224, 130;
79
+ --ax-sys-color-warning-300: 255, 213, 79;
80
+ --ax-sys-color-warning-400: 255, 202, 40;
81
+ --ax-sys-color-warning-500: 255, 193, 7;
82
+ --ax-sys-color-warning-600: 255, 179, 0;
83
+ --ax-sys-color-warning-700: 255, 160, 0;
84
+ --ax-sys-color-warning-800: 255, 143, 0;
85
+ --ax-sys-color-warning-900: 255, 111, 0;
86
+ --ax-sys-color-warning-950: 72, 40, 15;
87
+
88
+ --ax-sys-color-danger-text: 255, 255, 255;
89
+ --ax-sys-color-danger-contrast-text: 127, 29, 29;
90
+ --ax-sys-color-danger-50: 254, 242, 242;
91
+ --ax-sys-color-danger-100: 254, 226, 226;
92
+ --ax-sys-color-danger-200: 254, 202, 202;
93
+ --ax-sys-color-danger-300: 252, 165, 165;
94
+ --ax-sys-color-danger-400: 248, 113, 113;
95
+ --ax-sys-color-danger-500: 239, 68, 68;
96
+ --ax-sys-color-danger-600: 220, 38, 38;
97
+ --ax-sys-color-danger-700: 185, 28, 28;
98
+ --ax-sys-color-danger-800: 153, 27, 27;
99
+ --ax-sys-color-danger-900: 127, 29, 29;
100
+ --ax-sys-color-danger-950: 69, 10, 10;
101
+
102
+ --ax-sys-color-neutral-text: 255, 255, 255;
103
+ --ax-sys-color-neutral-contrast-text: 17, 24, 39;
104
+ --ax-sys-color-neutral-50: 249, 250, 251;
105
+ --ax-sys-color-neutral-100: 243, 244, 246;
106
+ --ax-sys-color-neutral-200: 229, 231, 235;
107
+ --ax-sys-color-neutral-300: 209, 213, 219;
108
+ --ax-sys-color-neutral-400: 156, 163, 175;
109
+ --ax-sys-color-neutral-500: 107, 114, 128;
110
+ --ax-sys-color-neutral-600: 75, 85, 99;
111
+ --ax-sys-color-neutral-700: 55, 65, 81;
112
+ --ax-sys-color-neutral-800: 31, 41, 55;
113
+ --ax-sys-color-neutral-900: 17, 24, 39;
114
+ --ax-sys-color-neutral-950: 3, 7, 18;
125
115
  }
126
116
 
127
117
  .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;
118
+ --ax-sys-body-text-color: 255, 255, 255;
119
+
120
+ --ax-sys-border-color: 34, 38, 47;
121
+
122
+ --ax-sys-surface-lowest-bg-color: 2, 6, 23;
123
+ --ax-sys-surface-lowest-text-color: 220, 220, 220;
124
+ --ax-sys-surface-lowest-border-color: 15, 23, 42;
125
+
126
+ --ax-sys-surface-low-bg-color: 15, 23, 42;
127
+ --ax-sys-surface-low-text-color: 230, 230, 230;
128
+ --ax-sys-surface-low-border-color: 30, 41, 59;
129
+
130
+ --ax-sys-surface-bg-color: 30, 41, 59;
131
+ --ax-sys-surface-text-color: 240, 240, 240;
132
+ --ax-sys-surface-border-color: 51, 65, 85;
133
+
134
+ --ax-sys-surface-high-bg-color: 51, 65, 85;
135
+ --ax-sys-surface-high-text-color: 250, 250, 250;
136
+ --ax-sys-surface-high-border-color: 71, 85, 105;
137
+
138
+ --ax-sys-surface-highest-bg-color: 71, 85, 105;
139
+ --ax-sys-surface-highest-text-color: 255, 255, 255;
140
+ --ax-sys-surface-highest-border-color: 100, 116, 139;
141
+
142
+ --ax-sys-surface-input-bg-color: 55, 55, 55;
143
+ --ax-sys-surface-input-text-color: 240, 240, 240;
144
+ --ax-sys-surface-input-placeholder-color: 100, 100, 100;
145
+ --ax-sys-surface-input-border-color: 80, 80, 80;
146
+
147
+ --ax-sys-color-primary-text: 19, 21, 25;
148
+ --ax-sys-color-primary-contrast-text: 57, 62, 75;
149
+ --ax-sys-color-primary-50: 252, 253, 255;
150
+ --ax-sys-color-primary-100: 249, 250, 254;
151
+ --ax-sys-color-primary-200: 236, 241, 253;
152
+ --ax-sys-color-primary-300: 223, 232, 252;
153
+ --ax-sys-color-primary-400: 210, 222, 251;
154
+ --ax-sys-color-primary-500: 190, 208, 249;
155
+ --ax-sys-color-primary-600: 171, 187, 224;
156
+ --ax-sys-color-primary-700: 133, 146, 174;
157
+ --ax-sys-color-primary-800: 95, 104, 125;
158
+ --ax-sys-color-primary-900: 57, 62, 75;
159
+ --ax-sys-color-primary-950: 19, 21, 25;
160
+
161
+ --ax-sys-color-success-text: 255, 255, 255;
162
+ --ax-sys-color-success-contrast-text: 6, 78, 59;
163
+ --ax-sys-color-success-50: 236, 253, 245;
164
+ --ax-sys-color-success-100: 209, 250, 229;
165
+ --ax-sys-color-success-200: 167, 243, 208;
166
+ --ax-sys-color-success-300: 110, 231, 183;
167
+ --ax-sys-color-success-400: 52, 211, 153;
168
+ --ax-sys-color-success-500: 16, 185, 129;
169
+ --ax-sys-color-success-600: 5, 150, 105;
170
+ --ax-sys-color-success-700: 4, 120, 87;
171
+ --ax-sys-color-success-800: 6, 95, 70;
172
+ --ax-sys-color-success-900: 6, 78, 59;
173
+ --ax-sys-color-success-950: 2, 44, 34;
174
+
175
+ --ax-sys-color-warning-text: 25, 22, 13;
176
+ --ax-sys-color-warning-contrast-text: 77, 67, 39;
177
+ --ax-sys-color-warning-50: 255, 253, 249;
178
+ --ax-sys-color-warning-100: 255, 252, 243;
179
+ --ax-sys-color-warning-200: 255, 246, 218;
180
+ --ax-sys-color-warning-300: 255, 240, 193;
181
+ --ax-sys-color-warning-400: 255, 233, 168;
182
+ --ax-sys-color-warning-500: 255, 224, 130;
183
+ --ax-sys-color-warning-600: 230, 202, 117;
184
+ --ax-sys-color-warning-700: 179, 157, 91;
185
+ --ax-sys-color-warning-800: 128, 112, 65;
186
+ --ax-sys-color-warning-900: 77, 67, 39;
187
+ --ax-sys-color-warning-950: 25, 22, 13;
188
+
189
+ --ax-sys-color-danger-text: 24, 15, 15;
190
+ --ax-sys-color-danger-contrast-text: 72, 46, 46;
191
+ --ax-sys-color-danger-50: 254, 250, 250;
192
+ --ax-sys-color-danger-100: 253, 245, 245;
193
+ --ax-sys-color-danger-200: 250, 225, 225;
194
+ --ax-sys-color-danger-300: 247, 205, 205;
195
+ --ax-sys-color-danger-400: 244, 184, 184;
196
+ --ax-sys-color-danger-500: 239, 154, 154;
197
+ --ax-sys-color-danger-600: 215, 139, 139;
198
+ --ax-sys-color-danger-700: 167, 108, 108;
199
+ --ax-sys-color-danger-800: 120, 77, 77;
200
+ --ax-sys-color-danger-900: 72, 46, 46;
201
+ --ax-sys-color-danger-950: 24, 15, 15;
202
+
203
+ --ax-sys-color-neutral-text: 18, 19, 20;
204
+ --ax-sys-color-neutral-contrast-text: 53, 57, 59;
205
+ --ax-sys-color-neutral-50: 251, 252, 252;
206
+ --ax-sys-color-neutral-100: 247, 249, 249;
207
+ --ax-sys-color-neutral-200: 231, 236, 238;
208
+ --ax-sys-color-neutral-300: 216, 223, 226;
209
+ --ax-sys-color-neutral-400: 200, 210, 214;
210
+ --ax-sys-color-neutral-500: 176, 190, 197;
211
+ --ax-sys-color-neutral-600: 158, 171, 177;
212
+ --ax-sys-color-neutral-700: 123, 133, 138;
213
+ --ax-sys-color-neutral-800: 88, 95, 99;
214
+ --ax-sys-color-neutral-900: 53, 57, 59;
215
+ --ax-sys-color-neutral-950: 18, 19, 20;
145
216
  }