@acorex/styles 7.11.6 → 7.12.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.
- package/index.css +159 -933
- package/index.min.css +1 -1
- package/index.scss +0 -1
- package/package.json +2 -2
- package/src/base/index.scss +0 -2
- package/src/icons/demo-files/demo.css +27 -19
- package/src/icons/demo-files/demo.js +23 -24
- package/src/icons/selection.json +1289 -1
- package/src/icons/style.css +78 -77
- package/src/icons/style.scss +79 -79
- package/src/icons/variables.scss +77 -78
- package/src/mixins/_look.scss +15 -61
- package/src/mixins/_media.scss +20 -20
- package/src/mixins/_util.scss +0 -15
- package/src/shared/_actionsheet.scss +1 -38
- package/src/shared/_check-box.scss +7 -21
- package/src/shared/_decoration.scss +14 -31
- package/src/shared/_drop-down.scss +10 -37
- package/src/shared/_editor-container.scss +32 -76
- package/src/shared/_general-button.scss +31 -41
- package/src/shared/_inputs.scss +8 -10
- package/src/shared/_list.scss +29 -80
- package/src/shared/_radio.scss +8 -37
- package/src/shared/_table.scss +20 -47
- package/src/shared/_utils.scss +9 -49
- package/src/themes/default.css +1 -1
- package/src/themes/default.scss +107 -86
- package/src/utility/index.scss +0 -36
- package/src/variables/index.scss +2 -2
- package/tailwind-base.js +76 -154
- package/src/animations/index.scss +0 -88
- package/src/base/_normalize.scss +0 -438
- package/src/base/_theme.scss +0 -0
package/src/themes/default.scss
CHANGED
|
@@ -20,103 +20,124 @@
|
|
|
20
20
|
--ax-color-ghost: 255, 255, 255;
|
|
21
21
|
--ax-color-ghost-fore: 22, 22, 22;
|
|
22
22
|
|
|
23
|
+
--ax-color-primary: 59, 130, 246;
|
|
23
24
|
--ax-color-primary-fore: 255, 255, 255;
|
|
24
|
-
--ax-color-primary-fore-lighten: 32 40 136;
|
|
25
|
-
--ax-color-primary-50: 239, 243, 255;
|
|
26
|
-
--ax-color-primary-100: 220, 228, 253;
|
|
27
|
-
--ax-color-primary-200: 192, 208, 253;
|
|
28
|
-
--ax-color-primary-300: 149, 179, 251;
|
|
29
|
-
--ax-color-primary-400: 99, 139, 247;
|
|
30
|
-
--ax-color-primary-500: 62, 99, 243;
|
|
31
|
-
--ax-color-primary-600: 55, 79, 233;
|
|
32
|
-
--ax-color-primary-700: 32, 48, 213;
|
|
33
|
-
--ax-color-primary-800: 33, 40, 172;
|
|
34
|
-
--ax-color-primary-900: 32, 40, 136;
|
|
35
|
-
--ax-color-primary-950: 24, 27, 83;
|
|
36
25
|
|
|
26
|
+
--ax-color-secondary: 0, 0, 0;
|
|
37
27
|
--ax-color-secondary-fore: 255, 255, 255;
|
|
38
|
-
--ax-color-secondary-fore-lighten: 3, 3, 3;
|
|
39
|
-
--ax-color-secondary-50: 186, 186, 186;
|
|
40
|
-
--ax-color-secondary-100: 173, 173, 173;
|
|
41
|
-
--ax-color-secondary-200: 150, 150, 150;
|
|
42
|
-
--ax-color-secondary-300: 117, 117, 117;
|
|
43
|
-
--ax-color-secondary-400: 77, 77, 77;
|
|
44
|
-
--ax-color-secondary-500: 51, 51, 51;
|
|
45
|
-
--ax-color-secondary-600: 33, 33, 33;
|
|
46
|
-
--ax-color-secondary-700: 20, 20, 20;
|
|
47
|
-
--ax-color-secondary-800: 10, 10, 10;
|
|
48
|
-
--ax-color-secondary-900: 3, 3, 3;
|
|
49
|
-
--ax-color-secondary-950: 0, 0, 0;
|
|
50
28
|
|
|
29
|
+
--ax-color-success: 16, 185, 129;
|
|
51
30
|
--ax-color-success-fore: 255, 255, 255;
|
|
52
|
-
--ax-color-success-fore-lighten: 6, 78, 59;
|
|
53
|
-
--ax-color-success-50: 236, 253, 245;
|
|
54
|
-
--ax-color-success-100: 209, 250, 229;
|
|
55
|
-
--ax-color-success-200: 167, 243, 208;
|
|
56
|
-
--ax-color-success-300: 110, 231, 183;
|
|
57
|
-
--ax-color-success-400: 52, 211, 153;
|
|
58
|
-
--ax-color-success-500: 16, 185, 129;
|
|
59
|
-
--ax-color-success-600: 5, 150, 105;
|
|
60
|
-
--ax-color-success-700: 4, 120, 87;
|
|
61
|
-
--ax-color-success-800: 6, 95, 70;
|
|
62
|
-
--ax-color-success-900: 6, 78, 59;
|
|
63
|
-
--ax-color-success-950: 2, 44, 34;
|
|
64
31
|
|
|
32
|
+
--ax-color-warning: 255, 193, 7;
|
|
33
|
+
--ax-color-warning-fore: 0, 0, 0;
|
|
34
|
+
|
|
35
|
+
--ax-color-danger: 239, 68, 68;
|
|
65
36
|
--ax-color-danger-fore: 255, 255, 255;
|
|
66
|
-
--ax-color-danger-fore-lighten: 127, 29, 29;
|
|
67
|
-
--ax-color-danger-50: 254, 242, 242;
|
|
68
|
-
--ax-color-danger-100: 254, 226, 226;
|
|
69
|
-
--ax-color-danger-200: 254, 202, 202;
|
|
70
|
-
--ax-color-danger-300: 252, 165, 165;
|
|
71
|
-
--ax-color-danger-400: 248, 113, 113;
|
|
72
|
-
--ax-color-danger-500: 239, 68, 68;
|
|
73
|
-
--ax-color-danger-600: 220, 38, 38;
|
|
74
|
-
--ax-color-danger-700: 185, 28, 28;
|
|
75
|
-
--ax-color-danger-800: 153, 27, 27;
|
|
76
|
-
--ax-color-danger-900: 127, 29, 29;
|
|
77
|
-
--ax-color-danger-950: 69, 10, 10;
|
|
78
|
-
|
|
79
|
-
--ax-color-warning-fore: 48, 26, 10;
|
|
80
|
-
--ax-color-warning-fore-lighten: 255, 111, 0;
|
|
81
|
-
--ax-color-warning-50: 255, 248, 225;
|
|
82
|
-
--ax-color-warning-100: 255, 236, 179;
|
|
83
|
-
--ax-color-warning-200: 255, 224, 130;
|
|
84
|
-
--ax-color-warning-300: 255, 213, 79;
|
|
85
|
-
--ax-color-warning-400: 255, 202, 40;
|
|
86
|
-
--ax-color-warning-500: 255, 193, 7;
|
|
87
|
-
--ax-color-warning-600: 255, 179, 0;
|
|
88
|
-
--ax-color-warning-700: 255, 160, 0;
|
|
89
|
-
--ax-color-warning-800: 255, 143, 0;
|
|
90
|
-
--ax-color-warning-900: 255, 111, 0;
|
|
91
|
-
--ax-color-warning-950: 72, 40, 15;
|
|
92
37
|
|
|
38
|
+
--ax-color-info: 99, 102, 241;
|
|
93
39
|
--ax-color-info-fore: 255, 255, 255;
|
|
94
|
-
--ax-color-info-fore-lighten: 49, 46, 129;
|
|
95
|
-
--ax-color-info-50: 238, 242, 255;
|
|
96
|
-
--ax-color-info-100: 224, 231, 255;
|
|
97
|
-
--ax-color-info-200: 199, 210, 254;
|
|
98
|
-
--ax-color-info-300: 165, 180, 252;
|
|
99
|
-
--ax-color-info-400: 129, 140, 248;
|
|
100
|
-
--ax-color-info-500: 99, 102, 241;
|
|
101
|
-
--ax-color-info-600: 79, 70, 229;
|
|
102
|
-
--ax-color-info-700: 67, 56, 202;
|
|
103
|
-
--ax-color-info-800: 55, 48, 163;
|
|
104
|
-
--ax-color-info-900: 49, 46, 129;
|
|
105
|
-
--ax-color-info-950: 30, 27, 75;
|
|
106
40
|
|
|
41
|
+
--ax-color-neutral: 107, 114, 128;
|
|
107
42
|
--ax-color-neutral-fore: 255, 255, 255;
|
|
108
|
-
|
|
109
|
-
--ax-color-
|
|
110
|
-
--ax-color-
|
|
111
|
-
--ax-color-
|
|
112
|
-
--ax-color-
|
|
113
|
-
--ax-color-
|
|
114
|
-
--ax-color-
|
|
115
|
-
--ax-color-
|
|
116
|
-
--ax-color-
|
|
117
|
-
--ax-color-
|
|
118
|
-
--ax-color-
|
|
119
|
-
--ax-color-
|
|
43
|
+
|
|
44
|
+
// --ax-color-primary-fore: 255, 255, 255;
|
|
45
|
+
// --ax-color-primary-fore-tint: 30, 58, 138;
|
|
46
|
+
// --ax-color-primary-50: 239, 246, 255;
|
|
47
|
+
// --ax-color-primary-100: 219, 234, 254;
|
|
48
|
+
// --ax-color-primary-200: 191, 219, 254;
|
|
49
|
+
// --ax-color-primary-300: 147, 197, 253;
|
|
50
|
+
// --ax-color-primary-400: 96, 165, 250;
|
|
51
|
+
// --ax-color-primary-500: 59, 130, 246;
|
|
52
|
+
// --ax-color-primary-600: 37, 99, 235;
|
|
53
|
+
// --ax-color-primary-700: 29, 78, 216;
|
|
54
|
+
// --ax-color-primary-800: 30, 64, 175;
|
|
55
|
+
// --ax-color-primary-900: 30, 58, 138;
|
|
56
|
+
// --ax-color-primary-950: 23, 37, 84;
|
|
57
|
+
|
|
58
|
+
// --ax-color-secondary-fore: 255, 255, 255;
|
|
59
|
+
// --ax-color-secondary-fore-tint: 33, 40, 51;
|
|
60
|
+
// --ax-color-secondary-50: 233, 234, 236;
|
|
61
|
+
// --ax-color-secondary-100: 200, 203, 208;
|
|
62
|
+
// --ax-color-secondary-200: 164, 169, 176;
|
|
63
|
+
// --ax-color-secondary-300: 128, 134, 144;
|
|
64
|
+
// --ax-color-secondary-400: 100, 108, 121;
|
|
65
|
+
// --ax-color-secondary-500: 73, 82, 97;
|
|
66
|
+
// --ax-color-secondary-600: 66, 75, 89;
|
|
67
|
+
// --ax-color-secondary-700: 57, 65, 79;
|
|
68
|
+
// --ax-color-secondary-800: 49, 56, 69;
|
|
69
|
+
// --ax-color-secondary-900: 33, 40, 51;
|
|
70
|
+
// --ax-color-secondary-950: 22, 27, 35;
|
|
71
|
+
|
|
72
|
+
// --ax-color-success-fore: 255, 255, 255;
|
|
73
|
+
// --ax-color-success-fore-tint: 6, 78, 59;
|
|
74
|
+
// --ax-color-success-50: 236, 253, 245;
|
|
75
|
+
// --ax-color-success-100: 209, 250, 229;
|
|
76
|
+
// --ax-color-success-200: 167, 243, 208;
|
|
77
|
+
// --ax-color-success-300: 110, 231, 183;
|
|
78
|
+
// --ax-color-success-400: 52, 211, 153;
|
|
79
|
+
// --ax-color-success-500: 16, 185, 129;
|
|
80
|
+
// --ax-color-success-600: 5, 150, 105;
|
|
81
|
+
// --ax-color-success-700: 4, 120, 87;
|
|
82
|
+
// --ax-color-success-800: 6, 95, 70;
|
|
83
|
+
// --ax-color-success-900: 6, 78, 59;
|
|
84
|
+
// --ax-color-success-950: 2, 44, 34;
|
|
85
|
+
|
|
86
|
+
// --ax-color-danger-fore: 255, 255, 255;
|
|
87
|
+
// --ax-color-danger-fore-tint: 127, 29, 29;
|
|
88
|
+
// --ax-color-danger-50: 254, 242, 242;
|
|
89
|
+
// --ax-color-danger-100: 254, 226, 226;
|
|
90
|
+
// --ax-color-danger-200: 254, 202, 202;
|
|
91
|
+
// --ax-color-danger-300: 252, 165, 165;
|
|
92
|
+
// --ax-color-danger-400: 248, 113, 113;
|
|
93
|
+
// --ax-color-danger-500: 239, 68, 68;
|
|
94
|
+
// --ax-color-danger-600: 220, 38, 38;
|
|
95
|
+
// --ax-color-danger-700: 185, 28, 28;
|
|
96
|
+
// --ax-color-danger-800: 153, 27, 27;
|
|
97
|
+
// --ax-color-danger-900: 127, 29, 29;
|
|
98
|
+
// --ax-color-danger-950: 69, 10, 10;
|
|
99
|
+
|
|
100
|
+
// --ax-color-warning-fore: 48, 26, 10;
|
|
101
|
+
// --ax-color-warning-fore-tint: 255, 111, 0;
|
|
102
|
+
// --ax-color-warning-50: 255, 248, 225;
|
|
103
|
+
// --ax-color-warning-100: 255, 236, 179;
|
|
104
|
+
// --ax-color-warning-200: 255, 224, 130;
|
|
105
|
+
// --ax-color-warning-300: 255, 213, 79;
|
|
106
|
+
// --ax-color-warning-400: 255, 202, 40;
|
|
107
|
+
// --ax-color-warning-500: 255, 193, 7;
|
|
108
|
+
// --ax-color-warning-600: 255, 179, 0;
|
|
109
|
+
// --ax-color-warning-700: 255, 160, 0;
|
|
110
|
+
// --ax-color-warning-800: 255, 143, 0;
|
|
111
|
+
// --ax-color-warning-900: 255, 111, 0;
|
|
112
|
+
// --ax-color-warning-950: 72, 40, 15;
|
|
113
|
+
|
|
114
|
+
// --ax-color-info-fore: 255, 255, 255;
|
|
115
|
+
// --ax-color-info-fore-tint: 49, 46, 129;
|
|
116
|
+
// --ax-color-info-50: 238, 242, 255;
|
|
117
|
+
// --ax-color-info-100: 224, 231, 255;
|
|
118
|
+
// --ax-color-info-200: 199, 210, 254;
|
|
119
|
+
// --ax-color-info-300: 165, 180, 252;
|
|
120
|
+
// --ax-color-info-400: 129, 140, 248;
|
|
121
|
+
// --ax-color-info-500: 99, 102, 241;
|
|
122
|
+
// --ax-color-info-600: 79, 70, 229;
|
|
123
|
+
// --ax-color-info-700: 67, 56, 202;
|
|
124
|
+
// --ax-color-info-800: 55, 48, 163;
|
|
125
|
+
// --ax-color-info-900: 49, 46, 129;
|
|
126
|
+
// --ax-color-info-950: 30, 27, 75;
|
|
127
|
+
|
|
128
|
+
// --ax-color-neutral-fore: 3, 7, 18;
|
|
129
|
+
// --ax-color-neutral-fore-tint: 17, 24, 39;
|
|
130
|
+
// --ax-color-neutral-50: 249, 250, 251;
|
|
131
|
+
// --ax-color-neutral-100: 243, 244, 246;
|
|
132
|
+
// --ax-color-neutral-200: 229, 231, 235;
|
|
133
|
+
// --ax-color-neutral-300: 209, 213, 219;
|
|
134
|
+
// --ax-color-neutral-400: 156, 163, 175;
|
|
135
|
+
// --ax-color-neutral-500: 107, 114, 128;
|
|
136
|
+
// --ax-color-neutral-600: 75, 85, 99;
|
|
137
|
+
// --ax-color-neutral-700: 55, 65, 81;
|
|
138
|
+
// --ax-color-neutral-800: 31, 41, 55;
|
|
139
|
+
// --ax-color-neutral-900: 17, 24, 39;
|
|
140
|
+
// --ax-color-neutral-950: 3, 7, 18;
|
|
120
141
|
}
|
|
121
142
|
|
|
122
143
|
.ax-dark {
|
package/src/utility/index.scss
CHANGED
|
@@ -1,35 +1,3 @@
|
|
|
1
|
-
// .ax-xs {
|
|
2
|
-
// --ax-size-default: 2rem;
|
|
3
|
-
// font-size: 0.75rem;
|
|
4
|
-
// * {
|
|
5
|
-
// font-size: 0.75rem;
|
|
6
|
-
// }
|
|
7
|
-
// }
|
|
8
|
-
// .ax-sm {
|
|
9
|
-
// --ax-size-default: 2.25rem;
|
|
10
|
-
// font-size: 0.875rem;
|
|
11
|
-
// * {
|
|
12
|
-
// font-size: 0.875rem;
|
|
13
|
-
// }
|
|
14
|
-
// }
|
|
15
|
-
// .ax-md {
|
|
16
|
-
// --ax-size-default: 2.5rem;
|
|
17
|
-
// font-size: 0.875rem;
|
|
18
|
-
// }
|
|
19
|
-
// .ax-lg {
|
|
20
|
-
// --ax-size-default: 3rem;
|
|
21
|
-
// font-size: 1rem;
|
|
22
|
-
// * {
|
|
23
|
-
// font-size: 1rem;
|
|
24
|
-
// }
|
|
25
|
-
// }
|
|
26
|
-
// .ax-xl {
|
|
27
|
-
// --ax-size-default: 3.5rem;
|
|
28
|
-
// font-size: 1rem;
|
|
29
|
-
// * {
|
|
30
|
-
// font-size: 1rem;
|
|
31
|
-
// }
|
|
32
|
-
// }
|
|
33
1
|
.ax-xs {
|
|
34
2
|
--ax-size-default: calc(var(--ax-size-base) - 0.75rem);
|
|
35
3
|
}
|
|
@@ -50,10 +18,6 @@
|
|
|
50
18
|
--ax-size-default: calc(var(--ax-size-base) + 1rem);
|
|
51
19
|
}
|
|
52
20
|
|
|
53
|
-
.ax-filp {
|
|
54
|
-
transform: scale(-1, 1);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
21
|
.ax-placeholder {
|
|
58
22
|
color: rgba(var(--ax-color-text-default), 0.25);
|
|
59
23
|
font-weight: 500;
|
package/src/variables/index.scss
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@import
|
|
2
|
-
@import
|
|
1
|
+
@import './colors';
|
|
2
|
+
@import './degrees';
|
package/tailwind-base.js
CHANGED
|
@@ -17,183 +17,72 @@ const childSelector = plugin(function ({ addVariant }) {
|
|
|
17
17
|
addVariant('child-focus-within', '& > *:focus-within');
|
|
18
18
|
});
|
|
19
19
|
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
'
|
|
20
|
+
const _colors = {
|
|
21
|
+
ghost: 'rgba(var(--ax-color-ghost), <alpha-value>)',
|
|
22
|
+
'ghost-fore': 'rgba(var(--ax-color-ghost-fore), <alpha-value>)',
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
'
|
|
24
|
+
surface: 'rgba(var(--ax-color-surface), <alpha-value>)',
|
|
25
|
+
'surface-fore': 'rgba(var(--ax-color-surface-fore), <alpha-value>)',
|
|
26
26
|
|
|
27
|
-
'
|
|
28
|
-
'
|
|
27
|
+
'on-surface': 'rgba(var(--ax-color-on-surface), <alpha-value>)',
|
|
28
|
+
'on-surface-fore': 'rgba(var(--ax-color-on-surface-fore), <alpha-value>)',
|
|
29
29
|
|
|
30
|
-
'
|
|
31
|
-
'
|
|
32
|
-
|
|
33
|
-
'secondary-fore': withOpacityValue('--ax-color-secondary-fore'),
|
|
34
|
-
'secondary-fore-lighten': withOpacityValue('--ax-color-secondary-fore-lighten'),
|
|
35
|
-
|
|
36
|
-
'success-fore': withOpacityValue('--ax-color-success-fore'),
|
|
37
|
-
'success-fore-lighten': withOpacityValue('--ax-color-success-fore-lighten'),
|
|
38
|
-
|
|
39
|
-
'warning-fore': withOpacityValue('--ax-color-warning-fore'),
|
|
40
|
-
'warning-fore-lighten': withOpacityValue('--ax-color-warning-fore-lighten'),
|
|
41
|
-
|
|
42
|
-
'danger-fore': withOpacityValue('--ax-color-danger-fore'),
|
|
43
|
-
'danger-fore-lighten': withOpacityValue('--ax-color-danger-fore-lighten'),
|
|
44
|
-
|
|
45
|
-
'info-fore': withOpacityValue('--ax-color-info-fore'),
|
|
46
|
-
'info-fore-lighten': withOpacityValue('--ax-color-info-fore-lighten'),
|
|
30
|
+
'input-surface': 'rgba(var(--ax-color-input-surface), <alpha-value>)',
|
|
31
|
+
'input-surface-fore': 'rgba(var(--ax-color-input-surface-fore), <alpha-value>)',
|
|
32
|
+
};
|
|
47
33
|
|
|
48
|
-
|
|
49
|
-
|
|
34
|
+
const createPalete = function (colorName) {
|
|
35
|
+
return {
|
|
36
|
+
DEFAULT: `rgba(var(--ax-color-${colorName}), <alpha-value>)`,
|
|
37
|
+
fore: `rgba(var(--ax-color-${colorName}-fore), <alpha-value>)`,
|
|
38
|
+
'fore-tint': `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>), black 30%)`,
|
|
39
|
+
50: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>) 5%, white)`,
|
|
40
|
+
100: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>) 10%, white)`,
|
|
41
|
+
200: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>) 30%, white)`,
|
|
42
|
+
300: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>) 50%, white)`,
|
|
43
|
+
400: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>) 70%, white)`,
|
|
44
|
+
500: `rgba(var(--ax-color-${colorName}), <alpha-value>)`,
|
|
45
|
+
600: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>), black 10%)`,
|
|
46
|
+
700: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>), black 30%)`,
|
|
47
|
+
800: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>), black 50%)`,
|
|
48
|
+
900: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>), black 70%)`,
|
|
49
|
+
950: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>), black 90%)`,
|
|
50
|
+
};
|
|
50
51
|
};
|
|
51
52
|
|
|
52
53
|
module.exports = withAnimations({
|
|
53
54
|
prefix: 'ax-',
|
|
54
|
-
corePlugins: {
|
|
55
|
-
|
|
56
|
-
},
|
|
55
|
+
// corePlugins: {
|
|
56
|
+
// preflight: false,
|
|
57
|
+
// },
|
|
57
58
|
content: ['./src/**/*.{html,ts,scss}', './projects/**/*.{html,ts,scss}'],
|
|
59
|
+
|
|
58
60
|
darkMode: 'class',
|
|
59
61
|
theme: {
|
|
60
62
|
extend: {
|
|
61
63
|
colors: {
|
|
62
|
-
primary:
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
400: withOpacityValue('--ax-color-primary-400'),
|
|
71
|
-
500: withOpacityValue('--ax-color-primary-500'),
|
|
72
|
-
600: withOpacityValue('--ax-color-primary-600'),
|
|
73
|
-
700: withOpacityValue('--ax-color-primary-700'),
|
|
74
|
-
800: withOpacityValue('--ax-color-primary-800'),
|
|
75
|
-
900: withOpacityValue('--ax-color-primary-900'),
|
|
76
|
-
950: withOpacityValue('--ax-color-primary-950'),
|
|
77
|
-
},
|
|
78
|
-
secondary: {
|
|
79
|
-
DEFAULT: withOpacityValue('--ax-color-secondary-500'),
|
|
80
|
-
fore: withOpacityValue('--ax-color-secondary-fore'),
|
|
81
|
-
foreLighten: withOpacityValue('--ax-color-secondary-lighten'),
|
|
82
|
-
50: withOpacityValue('--ax-color-secondary-50'),
|
|
83
|
-
100: withOpacityValue('--ax-color-secondary-100'),
|
|
84
|
-
200: withOpacityValue('--ax-color-secondary-200'),
|
|
85
|
-
300: withOpacityValue('--ax-color-secondary-300'),
|
|
86
|
-
400: withOpacityValue('--ax-color-secondary-400'),
|
|
87
|
-
500: withOpacityValue('--ax-color-secondary-500'),
|
|
88
|
-
600: withOpacityValue('--ax-color-secondary-600'),
|
|
89
|
-
700: withOpacityValue('--ax-color-secondary-700'),
|
|
90
|
-
800: withOpacityValue('--ax-color-secondary-800'),
|
|
91
|
-
900: withOpacityValue('--ax-color-secondary-900'),
|
|
92
|
-
950: withOpacityValue('--ax-color-secondary-950'),
|
|
93
|
-
},
|
|
94
|
-
success: {
|
|
95
|
-
DEFAULT: withOpacityValue('--ax-color-success-500'),
|
|
96
|
-
fore: withOpacityValue('--ax-color-success-fore'),
|
|
97
|
-
foreLighten: withOpacityValue('--ax-color-success-lighten'),
|
|
98
|
-
50: withOpacityValue('--ax-color-success-50'),
|
|
99
|
-
100: withOpacityValue('--ax-color-success-100'),
|
|
100
|
-
200: withOpacityValue('--ax-color-success-200'),
|
|
101
|
-
300: withOpacityValue('--ax-color-success-300'),
|
|
102
|
-
400: withOpacityValue('--ax-color-success-400'),
|
|
103
|
-
500: withOpacityValue('--ax-color-success-500'),
|
|
104
|
-
600: withOpacityValue('--ax-color-success-600'),
|
|
105
|
-
700: withOpacityValue('--ax-color-success-700'),
|
|
106
|
-
800: withOpacityValue('--ax-color-success-800'),
|
|
107
|
-
900: withOpacityValue('--ax-color-success-900'),
|
|
108
|
-
950: withOpacityValue('--ax-color-success-950'),
|
|
109
|
-
},
|
|
110
|
-
danger: {
|
|
111
|
-
DEFAULT: withOpacityValue('--ax-color-danger-500'),
|
|
112
|
-
fore: withOpacityValue('--ax-color-danger-fore'),
|
|
113
|
-
foreLighten: withOpacityValue('--ax-color-danger-lighten'),
|
|
114
|
-
50: withOpacityValue('--ax-color-danger-50'),
|
|
115
|
-
100: withOpacityValue('--ax-color-danger-100'),
|
|
116
|
-
200: withOpacityValue('--ax-color-danger-200'),
|
|
117
|
-
300: withOpacityValue('--ax-color-danger-300'),
|
|
118
|
-
400: withOpacityValue('--ax-color-danger-400'),
|
|
119
|
-
500: withOpacityValue('--ax-color-danger-500'),
|
|
120
|
-
600: withOpacityValue('--ax-color-danger-600'),
|
|
121
|
-
700: withOpacityValue('--ax-color-danger-700'),
|
|
122
|
-
800: withOpacityValue('--ax-color-danger-800'),
|
|
123
|
-
900: withOpacityValue('--ax-color-danger-900'),
|
|
124
|
-
950: withOpacityValue('--ax-color-danger-950'),
|
|
125
|
-
},
|
|
126
|
-
warning: {
|
|
127
|
-
DEFAULT: withOpacityValue('--ax-color-warning-500'),
|
|
128
|
-
fore: withOpacityValue('--ax-color-warning-fore'),
|
|
129
|
-
foreLighten: withOpacityValue('--ax-color-warning-lighten'),
|
|
130
|
-
50: withOpacityValue('--ax-color-warning-50'),
|
|
131
|
-
100: withOpacityValue('--ax-color-warning-100'),
|
|
132
|
-
200: withOpacityValue('--ax-color-warning-200'),
|
|
133
|
-
300: withOpacityValue('--ax-color-warning-300'),
|
|
134
|
-
400: withOpacityValue('--ax-color-warning-400'),
|
|
135
|
-
500: withOpacityValue('--ax-color-warning-500'),
|
|
136
|
-
600: withOpacityValue('--ax-color-warning-600'),
|
|
137
|
-
700: withOpacityValue('--ax-color-warning-700'),
|
|
138
|
-
800: withOpacityValue('--ax-color-warning-800'),
|
|
139
|
-
900: withOpacityValue('--ax-color-warning-900'),
|
|
140
|
-
950: withOpacityValue('--ax-color-warning-950'),
|
|
141
|
-
},
|
|
142
|
-
info: {
|
|
143
|
-
DEFAULT: withOpacityValue('--ax-color-info-500'),
|
|
144
|
-
fore: withOpacityValue('--ax-color-info-fore'),
|
|
145
|
-
foreLighten: withOpacityValue('--ax-color-info-lighten'),
|
|
146
|
-
50: withOpacityValue('--ax-color-info-50'),
|
|
147
|
-
100: withOpacityValue('--ax-color-info-100'),
|
|
148
|
-
200: withOpacityValue('--ax-color-info-200'),
|
|
149
|
-
300: withOpacityValue('--ax-color-info-300'),
|
|
150
|
-
400: withOpacityValue('--ax-color-info-400'),
|
|
151
|
-
500: withOpacityValue('--ax-color-info-500'),
|
|
152
|
-
600: withOpacityValue('--ax-color-info-600'),
|
|
153
|
-
700: withOpacityValue('--ax-color-info-700'),
|
|
154
|
-
800: withOpacityValue('--ax-color-info-800'),
|
|
155
|
-
900: withOpacityValue('--ax-color-info-900'),
|
|
156
|
-
950: withOpacityValue('--ax-color-info-950'),
|
|
157
|
-
},
|
|
158
|
-
neutral: {
|
|
159
|
-
DEFAULT: withOpacityValue('--ax-color-neutral-500'),
|
|
160
|
-
fore: withOpacityValue('--ax-color-neutral-fore'),
|
|
161
|
-
foreLighten: withOpacityValue('--ax-color-neutral-lighten'),
|
|
162
|
-
50: withOpacityValue('--ax-color-neutral-50'),
|
|
163
|
-
100: withOpacityValue('--ax-color-neutral-100'),
|
|
164
|
-
200: withOpacityValue('--ax-color-neutral-200'),
|
|
165
|
-
300: withOpacityValue('--ax-color-neutral-300'),
|
|
166
|
-
400: withOpacityValue('--ax-color-neutral-400'),
|
|
167
|
-
500: withOpacityValue('--ax-color-neutral-500'),
|
|
168
|
-
600: withOpacityValue('--ax-color-neutral-600'),
|
|
169
|
-
700: withOpacityValue('--ax-color-neutral-700'),
|
|
170
|
-
800: withOpacityValue('--ax-color-neutral-800'),
|
|
171
|
-
900: withOpacityValue('--ax-color-neutral-900'),
|
|
172
|
-
950: withOpacityValue('--ax-color-neutral-950'),
|
|
173
|
-
},
|
|
64
|
+
primary: createPalete('primary'),
|
|
65
|
+
secondary: createPalete('secondary'),
|
|
66
|
+
success: createPalete('success'),
|
|
67
|
+
danger: createPalete('danger'),
|
|
68
|
+
warning: createPalete('warning'),
|
|
69
|
+
info: createPalete('info'),
|
|
70
|
+
neutral: createPalete('neutral'),
|
|
71
|
+
..._colors,
|
|
174
72
|
},
|
|
175
73
|
textColor: {
|
|
176
74
|
DEFAULT: withOpacityValue('--ax-color-text-default'),
|
|
177
75
|
default: withOpacityValue('--ax-color-text-default'),
|
|
178
|
-
...
|
|
76
|
+
..._colors,
|
|
179
77
|
},
|
|
180
|
-
fill: {
|
|
181
|
-
..._color,
|
|
182
|
-
},
|
|
183
|
-
stroke: {
|
|
184
|
-
..._color,
|
|
185
|
-
},
|
|
186
|
-
|
|
187
78
|
backgroundColor: {
|
|
188
|
-
default:
|
|
189
|
-
surface: withOpacityValue('--ax-color-surface'),
|
|
190
|
-
'on-surface': withOpacityValue('--ax-color-on-surface'),
|
|
191
|
-
'input-surface': withOpacityValue('--ax-color-input-surface'),
|
|
79
|
+
default: 'rgba(var(--ax-color-background-default), <alpha-value>)',
|
|
192
80
|
},
|
|
81
|
+
|
|
193
82
|
borderColor: {
|
|
194
83
|
DEFAULT: 'rgba(var(--ax-color-border-default))',
|
|
195
84
|
default: 'rgba(var(--ax-color-border-default))',
|
|
196
|
-
...
|
|
85
|
+
..._colors,
|
|
197
86
|
},
|
|
198
87
|
maxWidth: {
|
|
199
88
|
'8xl': '90rem',
|
|
@@ -209,6 +98,27 @@ module.exports = withAnimations({
|
|
|
209
98
|
16: '4rem',
|
|
210
99
|
20: '5rem',
|
|
211
100
|
},
|
|
101
|
+
spacing: {
|
|
102
|
+
default: 'var(--ax-size-default)',
|
|
103
|
+
},
|
|
104
|
+
minWidth: {
|
|
105
|
+
default: 'var(--ax-size-default)',
|
|
106
|
+
},
|
|
107
|
+
width: {
|
|
108
|
+
default: 'var(--ax-size-default)',
|
|
109
|
+
},
|
|
110
|
+
maxHeight: {
|
|
111
|
+
default: 'var(--ax-size-default)',
|
|
112
|
+
},
|
|
113
|
+
minHeight: {
|
|
114
|
+
default: 'var(--ax-size-default)',
|
|
115
|
+
},
|
|
116
|
+
height: {
|
|
117
|
+
default: 'var(--ax-size-default)',
|
|
118
|
+
},
|
|
119
|
+
maxHeight: {
|
|
120
|
+
default: 'var(--ax-size-default)',
|
|
121
|
+
},
|
|
212
122
|
},
|
|
213
123
|
},
|
|
214
124
|
|
|
@@ -281,12 +191,24 @@ module.exports = withAnimations({
|
|
|
281
191
|
'.link:visited': {
|
|
282
192
|
color: 'rgba(var(--ax-color-primary-700))',
|
|
283
193
|
},
|
|
194
|
+
'.animate-slow': {
|
|
195
|
+
animationDuration: '2s',
|
|
196
|
+
},
|
|
197
|
+
'.animate-slower': {
|
|
198
|
+
animationDuration: '3s',
|
|
199
|
+
},
|
|
200
|
+
'.animate-2xslower': {
|
|
201
|
+
animationDuration: '5s',
|
|
202
|
+
},
|
|
284
203
|
'.animate-fast': {
|
|
285
204
|
animationDuration: '800ms',
|
|
286
205
|
},
|
|
287
206
|
'.animate-faster': {
|
|
288
207
|
animationDuration: '500ms',
|
|
289
208
|
},
|
|
209
|
+
'.animate-2xfaster': {
|
|
210
|
+
animationDuration: '250ms',
|
|
211
|
+
},
|
|
290
212
|
'.card': {
|
|
291
213
|
backgroundColor: 'rgb(var(--ax-color-surface))',
|
|
292
214
|
border: '1px solid',
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
.ax-animate-fadeIn {
|
|
2
|
-
animation-name: ax-fadeIn;
|
|
3
|
-
animation-duration: 1s;
|
|
4
|
-
animation-duration: 1000ms;
|
|
5
|
-
}
|
|
6
|
-
.ax-animate-bounceIn {
|
|
7
|
-
animation: 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) both ax-bounceIn;
|
|
8
|
-
}
|
|
9
|
-
.ax-animate-faster {
|
|
10
|
-
animation-duration: 0.5s;
|
|
11
|
-
animation-duration: 500ms;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.ax-animate-zoomIn {
|
|
15
|
-
animation-name: ax-zoomIn;
|
|
16
|
-
}
|
|
17
|
-
.ax-animate-slideInUp {
|
|
18
|
-
animation-name: ax-slideInUp;
|
|
19
|
-
}
|
|
20
|
-
@keyframes ax-slideInUp {
|
|
21
|
-
from {
|
|
22
|
-
transform: translate3d(0, 100%, 0);
|
|
23
|
-
visibility: visible;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
to {
|
|
27
|
-
transform: translate3d(0, 0, 0);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@keyframes ax-zoomIn {
|
|
32
|
-
from {
|
|
33
|
-
opacity: 0;
|
|
34
|
-
transform: scale3d(0.3, 0.3, 0.3);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
50% {
|
|
38
|
-
opacity: 1;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@keyframes ax-fadeIn {
|
|
43
|
-
from {
|
|
44
|
-
opacity: 0;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
to {
|
|
48
|
-
opacity: 1;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@keyframes ax-bounceIn {
|
|
53
|
-
from,
|
|
54
|
-
20%,
|
|
55
|
-
40%,
|
|
56
|
-
60%,
|
|
57
|
-
80%,
|
|
58
|
-
to {
|
|
59
|
-
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
0% {
|
|
63
|
-
opacity: 0;
|
|
64
|
-
transform: scale3d(0.3, 0.3, 0.3);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
20% {
|
|
68
|
-
transform: scale3d(1.1, 1.1, 1.1);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
40% {
|
|
72
|
-
transform: scale3d(0.9, 0.9, 0.9);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
60% {
|
|
76
|
-
opacity: 1;
|
|
77
|
-
transform: scale3d(1.03, 1.03, 1.03);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
80% {
|
|
81
|
-
transform: scale3d(0.97, 0.97, 0.97);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
to {
|
|
85
|
-
opacity: 1;
|
|
86
|
-
transform: scale3d(1, 1, 1);
|
|
87
|
-
}
|
|
88
|
-
}
|