@acorex/styles 7.1.2 → 7.1.5

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 (34) hide show
  1. package/index.scss +14 -14
  2. package/package.json +18 -18
  3. package/src/animations/index.scss +86 -86
  4. package/src/base/_normalize.scss +422 -422
  5. package/src/base/index.scss +16 -16
  6. package/src/icons/demo.html +892 -892
  7. package/src/icons/fonts/acorex-icons.svg +70 -70
  8. package/src/icons/style.css +210 -210
  9. package/src/icons/style.scss +335 -335
  10. package/src/icons/variables.scss +65 -65
  11. package/src/mixins/_media.scss +27 -27
  12. package/src/mixins/_util.scss +20 -20
  13. package/src/mixins/index.scss +1 -1
  14. package/src/shared/_actionsheet.scss +40 -40
  15. package/src/shared/_check-box.scss +42 -42
  16. package/src/shared/_decoration.scss +45 -45
  17. package/src/shared/_drop-down.scss +155 -155
  18. package/src/shared/_editor-container.scss +168 -168
  19. package/src/shared/_general-button.scss +42 -42
  20. package/src/shared/_inputs.scss +12 -12
  21. package/src/shared/_list.scss +144 -144
  22. package/src/shared/_radio.scss +38 -38
  23. package/src/shared/_skeleton.scss +26 -26
  24. package/src/shared/_table.scss +111 -111
  25. package/src/shared/_utils.scss +52 -52
  26. package/src/shared/index.scss +12 -12
  27. package/src/themes/default copy.scss +129 -129
  28. package/src/themes/default.scss +142 -142
  29. package/src/utility/_mixins.scss +71 -71
  30. package/src/utility/index.scss +55 -55
  31. package/src/variables/_colors.scss +2 -2
  32. package/src/variables/_degrees.scss +1 -1
  33. package/src/variables/index.scss +1 -1
  34. package/tailwind.config.js +199 -183
package/tailwind.config.js CHANGED
@@ -1,183 +1,199 @@
1
- const plugin = require('tailwindcss/plugin');
2
- const { withAnimations } = require('animated-tailwindcss');
3
-
4
- function withOpacityValue(variable) {
5
- return ({ opacityValue }) => {
6
- if (opacityValue === undefined) {
7
- return `rgb(var(${variable}))`;
8
- }
9
- return `rgb(var(${variable}) ,${opacityValue})`;
10
- };
11
- }
12
-
13
- const childSelector = plugin(function ({ addVariant }) {
14
- addVariant('child', '& > *');
15
- addVariant('child-hover', '& > *:hover');
16
- addVariant('child-focus', '& > *:focus');
17
- addVariant('child-focus-within', '& > *:focus-within');
18
- });
19
-
20
- module.exports = withAnimations({
21
- prefix: 'ax-',
22
- corePlugins: {
23
- preflight: false,
24
- },
25
- content: ['./src/**/*.{html,ts,scss}', './projects/**/*.{html,ts,scss}'],
26
- darkMode: 'class',
27
- theme: {
28
- extend: {
29
- colors: {
30
- ghost: {
31
- DEFAULT: withOpacityValue('--ax-color-ghost-500'),
32
- 50: withOpacityValue('--ax-color-ghost-50'),
33
- 100: withOpacityValue('--ax-color-ghost-100'),
34
- 200: withOpacityValue('--ax-color-ghost-200'),
35
- 300: withOpacityValue('--ax-color-ghost-300'),
36
- 400: withOpacityValue('--ax-color-ghost-400'),
37
- 500: withOpacityValue('--ax-color-ghost-500'),
38
- 600: withOpacityValue('--ax-color-ghost-600'),
39
- 700: withOpacityValue('--ax-color-ghost-700'),
40
- 800: withOpacityValue('--ax-color-ghost-800'),
41
- 900: withOpacityValue('--ax-color-ghost-900'),
42
- },
43
- primary: {
44
- DEFAULT: withOpacityValue('--ax-color-primary-500'),
45
- 50: withOpacityValue('--ax-color-primary-50'),
46
- 100: withOpacityValue('--ax-color-primary-100'),
47
- 200: withOpacityValue('--ax-color-primary-200'),
48
- 300: withOpacityValue('--ax-color-primary-300'),
49
- 400: withOpacityValue('--ax-color-primary-400'),
50
- 500: withOpacityValue('--ax-color-primary-500'),
51
- 600: withOpacityValue('--ax-color-primary-600'),
52
- 700: withOpacityValue('--ax-color-primary-700'),
53
- 800: withOpacityValue('--ax-color-primary-800'),
54
- 900: withOpacityValue('--ax-color-primary-900'),
55
- },
56
- secondary: {
57
- DEFAULT: withOpacityValue('--ax-color-secondary-500'),
58
- 50: withOpacityValue('--ax-color-secondary-50'),
59
- 100: withOpacityValue('--ax-color-secondary-100'),
60
- 200: withOpacityValue('--ax-color-secondary-200'),
61
- 300: withOpacityValue('--ax-color-secondary-300'),
62
- 400: withOpacityValue('--ax-color-secondary-400'),
63
- 500: withOpacityValue('--ax-color-secondary-500'),
64
- 600: withOpacityValue('--ax-color-secondary-600'),
65
- 700: withOpacityValue('--ax-color-secondary-700'),
66
- 800: withOpacityValue('--ax-color-secondary-800'),
67
- 900: withOpacityValue('--ax-color-secondary-900'),
68
- },
69
- success: {
70
- DEFAULT: withOpacityValue('--ax-color-success-500'),
71
- 50: withOpacityValue('--ax-color-success-50'),
72
- 100: withOpacityValue('--ax-color-success-100'),
73
- 200: withOpacityValue('--ax-color-success-200'),
74
- 300: withOpacityValue('--ax-color-success-300'),
75
- 400: withOpacityValue('--ax-color-success-400'),
76
- 500: withOpacityValue('--ax-color-success-500'),
77
- 600: withOpacityValue('--ax-color-success-600'),
78
- 700: withOpacityValue('--ax-color-success-700'),
79
- 800: withOpacityValue('--ax-color-success-800'),
80
- 900: withOpacityValue('--ax-color-success-900'),
81
- },
82
- danger: {
83
- DEFAULT: withOpacityValue('--ax-color-danger-500'),
84
- 50: withOpacityValue('--ax-color-danger-50'),
85
- 100: withOpacityValue('--ax-color-danger-100'),
86
- 200: withOpacityValue('--ax-color-danger-200'),
87
- 300: withOpacityValue('--ax-color-danger-300'),
88
- 400: withOpacityValue('--ax-color-danger-400'),
89
- 500: withOpacityValue('--ax-color-danger-500'),
90
- 600: withOpacityValue('--ax-color-danger-600'),
91
- 700: withOpacityValue('--ax-color-danger-700'),
92
- 800: withOpacityValue('--ax-color-danger-800'),
93
- 900: withOpacityValue('--ax-color-danger-900'),
94
- },
95
- warning: {
96
- DEFAULT: withOpacityValue('--ax-color-warning-500'),
97
- 50: withOpacityValue('--ax-color-warning-50'),
98
- 100: withOpacityValue('--ax-color-warning-100'),
99
- 200: withOpacityValue('--ax-color-warning-200'),
100
- 300: withOpacityValue('--ax-color-warning-300'),
101
- 400: withOpacityValue('--ax-color-warning-400'),
102
- 500: withOpacityValue('--ax-color-warning-500'),
103
- 600: withOpacityValue('--ax-color-warning-600'),
104
- 700: withOpacityValue('--ax-color-warning-700'),
105
- 800: withOpacityValue('--ax-color-warning-800'),
106
- 900: withOpacityValue('--ax-color-warning-900'),
107
- },
108
- },
109
- textColor: {
110
- DEFAULT: withOpacityValue('--ax-color-text-default'),
111
- default: withOpacityValue('--ax-color-text-default'),
112
- 'surface-fore': withOpacityValue('--ax-color-surface-fore'),
113
- 'on-surface-fore': withOpacityValue('--ax-color-on-surface-fore'),
114
- 'primary-fore': withOpacityValue('--ax-color-primary-fore'),
115
- 'secondary-fore': withOpacityValue('--ax-color-secondary-fore'),
116
- 'success-fore': withOpacityValue('--ax-color-success-fore'),
117
- 'warning-fore': withOpacityValue('--ax-color-warning-fore'),
118
- 'danger-fore': withOpacityValue('--ax-color-danger-fore'),
119
- 'ghost-fore': withOpacityValue('--ax-color-ghost-fore'),
120
- },
121
- backgroundColor: {
122
- default: withOpacityValue('--ax-color-background-default'),
123
- surface: withOpacityValue('--ax-color-surface'),
124
- 'on-surface': withOpacityValue('--ax-color-on-surface'),
125
- },
126
- borderColor: {
127
- DEFAULT: 'rgba(var(--ax-color-border-default))',
128
- default: 'rgba(var(--ax-color-border-default))',
129
- },
130
- maxWidth: {
131
- '8xl': '90rem',
132
- },
133
- borderRadius: {
134
- default: 'var(--ax-rounded-border-default)',
135
- },
136
- },
137
- },
138
-
139
- plugins: [
140
- plugin(function ({ addUtilities }) {
141
- const acorexClasses = {
142
- '.animate-fast': {
143
- animationDuration: '800ms',
144
- },
145
- '.animate-faster': {
146
- animationDuration: '500ms',
147
- },
148
- '.card': {
149
- backgroundColor: 'rgb(var(--ax-color-surface))',
150
- border: '1px solid',
151
- borderColor: 'rgb(var(--ax-color-border-default))',
152
- borderRadius: 'var(--ax-rounded-border-default)',
153
- },
154
- '.tabs-fit': {
155
- width: '100%',
156
- },
157
- '.skeleton': {
158
- position: 'relative',
159
- overflow: 'hidden',
160
- backgroundColor: 'rgba(var(--ax-color-ghost), 0.15)',
161
- },
162
- '.skeleton-animate': {},
163
- '.xs': {
164
- '--ax-size-default': '2rem',
165
- },
166
- '.sm': {
167
- '--ax-size-default': '2.25rem',
168
- },
169
- '.md': {
170
- '--ax-size-default': '2.5rem',
171
- },
172
- '.lg': {
173
- '--ax-size-default': '3rem',
174
- },
175
- '.xl': {
176
- '--ax-size-default': '3.5rem',
177
- },
178
- };
179
- addUtilities(acorexClasses, ['responsive', 'hover', 'focus']);
180
- }),
181
- childSelector,
182
- ],
183
- });
1
+ const plugin = require('tailwindcss/plugin');
2
+ const { withAnimations } = require('animated-tailwindcss');
3
+
4
+ function withOpacityValue(variable) {
5
+ return ({ opacityValue }) => {
6
+ if (opacityValue === undefined) {
7
+ return `rgb(var(${variable}))`;
8
+ }
9
+ return `rgb(var(${variable}) ,${opacityValue})`;
10
+ };
11
+ }
12
+
13
+ const childSelector = plugin(function ({ addVariant }) {
14
+ addVariant('child', '& > *');
15
+ addVariant('child-hover', '& > *:hover');
16
+ addVariant('child-focus', '& > *:focus');
17
+ addVariant('child-focus-within', '& > *:focus-within');
18
+ });
19
+
20
+ module.exports = withAnimations({
21
+ prefix: 'ax-',
22
+ corePlugins: {
23
+ preflight: false,
24
+ },
25
+ content: ['./src/**/*.{html,ts,scss}', './projects/**/*.{html,ts,scss}'],
26
+ darkMode: 'class',
27
+ theme: {
28
+ extend: {
29
+ colors: {
30
+ ghost: {
31
+ DEFAULT: withOpacityValue('--ax-color-ghost-500'),
32
+ 50: withOpacityValue('--ax-color-ghost-50'),
33
+ 100: withOpacityValue('--ax-color-ghost-100'),
34
+ 200: withOpacityValue('--ax-color-ghost-200'),
35
+ 300: withOpacityValue('--ax-color-ghost-300'),
36
+ 400: withOpacityValue('--ax-color-ghost-400'),
37
+ 500: withOpacityValue('--ax-color-ghost-500'),
38
+ 600: withOpacityValue('--ax-color-ghost-600'),
39
+ 700: withOpacityValue('--ax-color-ghost-700'),
40
+ 800: withOpacityValue('--ax-color-ghost-800'),
41
+ 900: withOpacityValue('--ax-color-ghost-900'),
42
+ },
43
+ primary: {
44
+ DEFAULT: withOpacityValue('--ax-color-primary-500'),
45
+ 50: withOpacityValue('--ax-color-primary-50'),
46
+ 100: withOpacityValue('--ax-color-primary-100'),
47
+ 200: withOpacityValue('--ax-color-primary-200'),
48
+ 300: withOpacityValue('--ax-color-primary-300'),
49
+ 400: withOpacityValue('--ax-color-primary-400'),
50
+ 500: withOpacityValue('--ax-color-primary-500'),
51
+ 600: withOpacityValue('--ax-color-primary-600'),
52
+ 700: withOpacityValue('--ax-color-primary-700'),
53
+ 800: withOpacityValue('--ax-color-primary-800'),
54
+ 900: withOpacityValue('--ax-color-primary-900'),
55
+ },
56
+ secondary: {
57
+ DEFAULT: withOpacityValue('--ax-color-secondary-500'),
58
+ 50: withOpacityValue('--ax-color-secondary-50'),
59
+ 100: withOpacityValue('--ax-color-secondary-100'),
60
+ 200: withOpacityValue('--ax-color-secondary-200'),
61
+ 300: withOpacityValue('--ax-color-secondary-300'),
62
+ 400: withOpacityValue('--ax-color-secondary-400'),
63
+ 500: withOpacityValue('--ax-color-secondary-500'),
64
+ 600: withOpacityValue('--ax-color-secondary-600'),
65
+ 700: withOpacityValue('--ax-color-secondary-700'),
66
+ 800: withOpacityValue('--ax-color-secondary-800'),
67
+ 900: withOpacityValue('--ax-color-secondary-900'),
68
+ },
69
+ success: {
70
+ DEFAULT: withOpacityValue('--ax-color-success-500'),
71
+ 50: withOpacityValue('--ax-color-success-50'),
72
+ 100: withOpacityValue('--ax-color-success-100'),
73
+ 200: withOpacityValue('--ax-color-success-200'),
74
+ 300: withOpacityValue('--ax-color-success-300'),
75
+ 400: withOpacityValue('--ax-color-success-400'),
76
+ 500: withOpacityValue('--ax-color-success-500'),
77
+ 600: withOpacityValue('--ax-color-success-600'),
78
+ 700: withOpacityValue('--ax-color-success-700'),
79
+ 800: withOpacityValue('--ax-color-success-800'),
80
+ 900: withOpacityValue('--ax-color-success-900'),
81
+ },
82
+ danger: {
83
+ DEFAULT: withOpacityValue('--ax-color-danger-500'),
84
+ 50: withOpacityValue('--ax-color-danger-50'),
85
+ 100: withOpacityValue('--ax-color-danger-100'),
86
+ 200: withOpacityValue('--ax-color-danger-200'),
87
+ 300: withOpacityValue('--ax-color-danger-300'),
88
+ 400: withOpacityValue('--ax-color-danger-400'),
89
+ 500: withOpacityValue('--ax-color-danger-500'),
90
+ 600: withOpacityValue('--ax-color-danger-600'),
91
+ 700: withOpacityValue('--ax-color-danger-700'),
92
+ 800: withOpacityValue('--ax-color-danger-800'),
93
+ 900: withOpacityValue('--ax-color-danger-900'),
94
+ },
95
+ warning: {
96
+ DEFAULT: withOpacityValue('--ax-color-warning-500'),
97
+ 50: withOpacityValue('--ax-color-warning-50'),
98
+ 100: withOpacityValue('--ax-color-warning-100'),
99
+ 200: withOpacityValue('--ax-color-warning-200'),
100
+ 300: withOpacityValue('--ax-color-warning-300'),
101
+ 400: withOpacityValue('--ax-color-warning-400'),
102
+ 500: withOpacityValue('--ax-color-warning-500'),
103
+ 600: withOpacityValue('--ax-color-warning-600'),
104
+ 700: withOpacityValue('--ax-color-warning-700'),
105
+ 800: withOpacityValue('--ax-color-warning-800'),
106
+ 900: withOpacityValue('--ax-color-warning-900'),
107
+ },
108
+ },
109
+ textColor: {
110
+ DEFAULT: withOpacityValue('--ax-color-text-default'),
111
+ default: withOpacityValue('--ax-color-text-default'),
112
+ 'surface-fore': withOpacityValue('--ax-color-surface-fore'),
113
+ 'on-surface-fore': withOpacityValue('--ax-color-on-surface-fore'),
114
+ 'primary-fore': withOpacityValue('--ax-color-primary-fore'),
115
+ 'secondary-fore': withOpacityValue('--ax-color-secondary-fore'),
116
+ 'success-fore': withOpacityValue('--ax-color-success-fore'),
117
+ 'warning-fore': withOpacityValue('--ax-color-warning-fore'),
118
+ 'danger-fore': withOpacityValue('--ax-color-danger-fore'),
119
+ 'ghost-fore': withOpacityValue('--ax-color-ghost-fore'),
120
+ },
121
+ fill: {
122
+ 'primary-fore': withOpacityValue('--ax-color-primary-fore'),
123
+ 'secondary-fore': withOpacityValue('--ax-color-secondary-fore'),
124
+ 'success-fore': withOpacityValue('--ax-color-success-fore'),
125
+ 'warning-fore': withOpacityValue('--ax-color-warning-fore'),
126
+ 'danger-fore': withOpacityValue('--ax-color-danger-fore'),
127
+ 'ghost-fore': withOpacityValue('--ax-color-ghost-fore'),
128
+ },
129
+ backgroundColor: {
130
+ default: withOpacityValue('--ax-color-background-default'),
131
+ surface: withOpacityValue('--ax-color-surface'),
132
+ 'on-surface': withOpacityValue('--ax-color-on-surface'),
133
+ },
134
+ borderColor: {
135
+ DEFAULT: 'rgba(var(--ax-color-border-default))',
136
+ default: 'rgba(var(--ax-color-border-default))',
137
+ },
138
+ maxWidth: {
139
+ '8xl': '90rem',
140
+ },
141
+ borderRadius: {
142
+ default: 'var(--ax-rounded-border-default)',
143
+ },
144
+ lineHeight: {
145
+ 11: '2.5rem',
146
+ 12: '3rem',
147
+ 12: '3rem',
148
+ 14: '3.5rem',
149
+ 16: '4rem',
150
+ 20: '5rem',
151
+ },
152
+ },
153
+ },
154
+
155
+ plugins: [
156
+ plugin(function ({ addUtilities }) {
157
+ const acorexClasses = {
158
+ '.animate-fast': {
159
+ animationDuration: '800ms',
160
+ },
161
+ '.animate-faster': {
162
+ animationDuration: '500ms',
163
+ },
164
+ '.card': {
165
+ backgroundColor: 'rgb(var(--ax-color-surface))',
166
+ border: '1px solid',
167
+ borderColor: 'rgb(var(--ax-color-border-default))',
168
+ borderRadius: 'var(--ax-rounded-border-default)',
169
+ },
170
+ '.tabs-fit': {
171
+ width: '100%',
172
+ },
173
+ '.skeleton': {
174
+ position: 'relative',
175
+ overflow: 'hidden',
176
+ backgroundColor: 'rgba(var(--ax-color-ghost), 0.15)',
177
+ },
178
+ '.skeleton-animate': {},
179
+ '.xs': {
180
+ '--ax-size-default': '2rem',
181
+ },
182
+ '.sm': {
183
+ '--ax-size-default': '2.25rem',
184
+ },
185
+ '.md': {
186
+ '--ax-size-default': '2.5rem',
187
+ },
188
+ '.lg': {
189
+ '--ax-size-default': '3rem',
190
+ },
191
+ '.xl': {
192
+ '--ax-size-default': '3.5rem',
193
+ },
194
+ };
195
+ addUtilities(acorexClasses, ['responsive', 'hover', 'focus']);
196
+ }),
197
+ childSelector,
198
+ ],
199
+ });