@aveonline/ui-react 2.7.0 → 2.7.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.
@@ -1,246 +1,246 @@
1
- /* eslint-disable @typescript-eslint/no-var-requires */
2
- /** @type {import('tailwindcss').Config} */
3
- const defaultTheme = require('tailwindcss/defaultTheme')
4
-
5
- module.exports = {
6
- content: [
7
- './src/ui/atoms/**/*.{ts,tsx}',
8
- './src/ui/molecules/**/*.{ts,tsx}',
9
- './src/ui/templates/**/*.{ts,tsx}'
10
- ],
11
- theme: {
12
- screens: {
13
- sm: '489px',
14
- md: '768px',
15
- lg: '1039px',
16
- xl: '1440px'
17
- },
18
- extend: {
19
- colors: {
20
- letter: {
21
- default: 'var(--colors-letter-default)',
22
- subdued: 'var(--colors-letter-subdued)',
23
- disabled: 'var(--colors-letter-disabled)',
24
- warning: 'var(--colors-letter-warning)',
25
- critical: 'var(--colors-letter-critical)',
26
- success: 'var(--colors-letter-success)',
27
- on: 'var(--colors-letter-on)'
28
- },
29
- action: {
30
- primary: {
31
- default: 'var(--colors-action-primary-default)',
32
- hovered: 'var(--colors-action-primary-hovered)',
33
- active: 'var(--colors-action-primary-active)',
34
- pressed: 'var(--colors-action-primary-pressed)',
35
- disabled: 'var(--colors-action-primary-disabled)'
36
- },
37
- secondary: {
38
- default: 'var(--colors-action-secondary-default)',
39
- hovered: 'var(--colors-action-secondary-hovered)',
40
- active: 'var(--colors-action-secondary-active)',
41
- pressed: 'var(--colors-action-secondary-pressed)',
42
- disabled: 'var(--colors-action-secondary-disabled)',
43
- subdued: 'var(--colors-action-secondary-subdued)'
44
- },
45
- critical: {
46
- default: 'var(--colors-action-critical-default)',
47
- hovered: 'var(--colors-action-critical-hovered)',
48
- active: 'var(--colors-action-critical-active)',
49
- pressed: 'var(--colors-action-critical-pressed)',
50
- disabled: 'var(--colors-action-critical-disabled)'
51
- },
52
- opacity: {
53
- default: 'var(--colors-action-opacity-default)',
54
- hovered: 'var(--colors-action-opacity-hovered)',
55
- active: 'var(--colors-action-opacity-active)',
56
- disabled: 'var(--colors-action-opacity-disabled)'
57
- }
58
- },
59
- border: {
60
- default: 'var(--colors-border-default)',
61
- subdued: 'var(--colors-border-subdued)',
62
- hovered: 'var(--colors-border-hovered)',
63
- active: 'var(--colors-border-active)',
64
- disabled: 'var(--colors-border-disabled)',
65
- success: {
66
- default: 'var(--colors-border-success-default)',
67
- subdued: 'var(--colors-border-success-subdued)'
68
- },
69
- critical: {
70
- default: 'var(--colors-border-critical-default)',
71
- subdued: 'var(--colors-border-critical-subdued)',
72
- disabled: 'var(--colors-border-critical-disabled)'
73
- },
74
- shadow: {
75
- subdued: 'var(--colors-border-shadow-subdued)'
76
- }
77
- },
78
- interactive: {
79
- default: 'var(--colors-interactive-default)',
80
- hovered: 'var(--colors-interactive-hovered)',
81
- active: 'var(--colors-interactive-active)',
82
- disabled: 'var(--colors-interactive-disabled)',
83
- critical: {
84
- default: 'var(--colors-interactive-critical-default)',
85
- hovered: 'var(--colors-interactive-critical-hovered)',
86
- active: 'var(--colors-interactive-critical-active)',
87
- disabled: 'var(--colors-interactive-critical-disabled)'
88
- }
89
- },
90
- icon: {
91
- default: 'var(--colors-icon-default)',
92
- subdued: 'var(--colors-icon-subdued)',
93
- hovered: 'var(--colors-icon-hovered)',
94
- active: 'var(--colors-icon-active)',
95
- disabled: 'var(--colors-icon-disabled)',
96
- critical: 'var(--colors-icon-critical)',
97
- warning: 'var(--colors-icon-warning)',
98
- success: 'var(--colors-icon-success)',
99
- on: 'var(--colors-icon-on)'
100
- },
101
- focused: {
102
- default: 'var(--colors-focused-default)'
103
- },
104
- surface: {
105
- default: 'var(--colors-surface-default)',
106
- subdued: 'var(--colors-surface-subdued)',
107
- hovered: 'var(--colors-surface-hovered)',
108
- active: 'var(--colors-surface-active)',
109
- pressed: 'var(--colors-surface-pressed)',
110
- disabled: 'var(--colors-surface-disabled)',
111
- action: {
112
- default: 'var(--colors-surface-action-default)',
113
- subdued: 'var(--colors-surface-action-subdued)',
114
- hovered: 'var(--colors-surface-action-hovered)',
115
- active: 'var(--colors-surface-action-active)',
116
- disabled: 'var(--colors-surface-action-disabled)'
117
- },
118
- warning: {
119
- default: 'var(--colors-surface-warning-default)',
120
- subdued: 'var(--colors-surface-warning-subdued)',
121
- hovered: 'var(--colors-surface-warning-hovered)',
122
- active: 'var(--colors-surface-warning-active)'
123
- },
124
- success: {
125
- default: 'var(--colors-surface-success-default)',
126
- subdued: 'var(--colors-surface-success-subdued)',
127
- hovered: 'var(--colors-surface-success-hovered)',
128
- active: 'var(--colors-surface-success-active)'
129
- },
130
- critical: {
131
- default: 'var(--colors-surface-critical-default)',
132
- subdued: 'var(--colors-surface-critical-subdued)',
133
- hovered: 'var(--colors-surface-critical-hovered)',
134
- active: 'var(--colors-surface-critical-active)',
135
- disabled: 'var(--colors-surface-critical-disabled)'
136
- },
137
- neutral: {
138
- default: 'var(--colors-surface-neutral-default)',
139
- subdued: 'var(--colors-surface-neutral-subdued)',
140
- hovered: 'var(--colors-surface-neutral-hovered)',
141
- active: 'var(--colors-surface-neutral-active)',
142
- disabled: 'var(--colors-surface-neutral-disabled)'
143
- }
144
- },
145
- background: {
146
- default: 'var(--colors-background-default)',
147
- hovered: 'var(--colors-background-hovered)',
148
- active: 'var(--colors-background-active)',
149
- selected: 'var(--colors-background-selected)',
150
- modal: 'var(--colors-background-modal)'
151
- },
152
- radial: {
153
- 10: 'var(--colors-radial-10)',
154
- 20: 'var(--colors-radial-20)',
155
- 30: 'var(--colors-radial-30)',
156
- 40: 'var(--colors-radial-40)',
157
- 50: 'var(--colors-radial-50)',
158
- 60: 'var(--colors-radial-60)',
159
- 70: 'var(--colors-radial-70)',
160
- 80: 'var(--colors-radial-80)',
161
- 90: 'var(--colors-radial-90)',
162
- 100: 'var(--colors-radial-100)'
163
- },
164
- base: {
165
- surface: 'var(--colors-base-surface)',
166
- primary: 'var(--colors-base-primary)',
167
- secondary: 'var(--colors-base-secondary)',
168
- interactive: 'var(--colors-base-interactive)',
169
- brand: 'var(--colors-base-brand)',
170
- critical: 'var(--colors-base-critical)',
171
- warning: 'var(--colors-base-warning)',
172
- success: 'var(--colors-base-success)'
173
- },
174
- special: {
175
- one: 'var(--colors-special-one)',
176
- oneBack: 'var(--colors-special-one-back)',
177
- two: 'var(--colors-special-two)',
178
- twoBack: 'var(--colors-special-two-back)',
179
- three: 'var(--colors-special-three)',
180
- threeBack: 'var(--colors-special-three-back)',
181
- four: 'var(--colors-special-four)',
182
- fourBack: 'var(--colors-special-four-back)'
183
- }
184
- },
185
- fontSize: {
186
- xxs: 'var(--font-size-xxs)',
187
- xs: 'var(--font-size-xs)',
188
- sm: 'var(--font-size-sm)',
189
- md: 'var(--font-size-md)',
190
- lg: 'var(--font-size-lg)',
191
- xl: 'var(--font-size-xl)',
192
- xxl: 'var(--font-size-xxl)'
193
- },
194
- lineHeight: {
195
- xxs: 'var(--line-height-xxs)',
196
- xs: 'var(--line-height-xs)',
197
- sm: 'var(--line-height-sm)',
198
- md: 'var(--line-height-md)',
199
- lg: 'var(--line-height-lg)',
200
- xl: 'var(--line-height-xl)',
201
- xxl: 'var(--line-height-xxl)'
202
- },
203
- fontWeight: {
204
- regular: 'var(--font-weight-regular)',
205
- medium: 'var(--font-weight-medium)',
206
- bold: 'var(--font-weight-bold)'
207
- },
208
- borderRadius: {
209
- xs: 'var(--border-radius-xs)',
210
- sm: 'var(--border-radius-sm)',
211
- md: 'var(--border-radius-md)'
212
- },
213
- boxShadow: {
214
- card: 'var(--box-shadow-card)',
215
- popover: 'var(--box-shadow-popover)',
216
- popup: 'var(--box-shadow-popup)',
217
- pressed: 'var(--box-shadow-pressed)'
218
- },
219
- spacing: {
220
- xxs: 'var(--spacing-xxs)',
221
- xs: 'var(--spacing-xs)',
222
- sm: 'var(--spacing-sm)',
223
- md: 'var(--spacing-md)',
224
- lg: 'var(--spacing-lg)',
225
- xl: 'var(--spacing-xl)',
226
- xxl: 'var(--spacing-xxl)',
227
- '1xl': 'var(--spacing-1xl)'
228
- },
229
- fontFamily: {
230
- sans: ['Inter', ...defaultTheme.fontFamily.sans]
231
- },
232
- animation: {
233
- 'spin-slow': 'spin 3s linear infinite'
234
- }
235
- }
236
- },
237
- variants: {
238
- extend: {
239
- backgroundColor: ['checked', 'active'],
240
- textColor: ['checked', 'active'],
241
- borderColor: ['checked', 'hover', 'active'],
242
- fill: ['hover', 'focus']
243
- }
244
- },
245
- plugins: [require('@tailwindcss/forms')]
246
- }
1
+ /* eslint-disable @typescript-eslint/no-var-requires */
2
+ /** @type {import('tailwindcss').Config} */
3
+ const defaultTheme = require('tailwindcss/defaultTheme')
4
+
5
+ module.exports = {
6
+ content: [
7
+ './src/ui/atoms/**/*.{ts,tsx}',
8
+ './src/ui/molecules/**/*.{ts,tsx}',
9
+ './src/ui/templates/**/*.{ts,tsx}'
10
+ ],
11
+ theme: {
12
+ screens: {
13
+ sm: '489px',
14
+ md: '768px',
15
+ lg: '1039px',
16
+ xl: '1440px'
17
+ },
18
+ extend: {
19
+ colors: {
20
+ letter: {
21
+ default: 'var(--colors-letter-default)',
22
+ subdued: 'var(--colors-letter-subdued)',
23
+ disabled: 'var(--colors-letter-disabled)',
24
+ warning: 'var(--colors-letter-warning)',
25
+ critical: 'var(--colors-letter-critical)',
26
+ success: 'var(--colors-letter-success)',
27
+ on: 'var(--colors-letter-on)'
28
+ },
29
+ action: {
30
+ primary: {
31
+ default: 'var(--colors-action-primary-default)',
32
+ hovered: 'var(--colors-action-primary-hovered)',
33
+ active: 'var(--colors-action-primary-active)',
34
+ pressed: 'var(--colors-action-primary-pressed)',
35
+ disabled: 'var(--colors-action-primary-disabled)'
36
+ },
37
+ secondary: {
38
+ default: 'var(--colors-action-secondary-default)',
39
+ hovered: 'var(--colors-action-secondary-hovered)',
40
+ active: 'var(--colors-action-secondary-active)',
41
+ pressed: 'var(--colors-action-secondary-pressed)',
42
+ disabled: 'var(--colors-action-secondary-disabled)',
43
+ subdued: 'var(--colors-action-secondary-subdued)'
44
+ },
45
+ critical: {
46
+ default: 'var(--colors-action-critical-default)',
47
+ hovered: 'var(--colors-action-critical-hovered)',
48
+ active: 'var(--colors-action-critical-active)',
49
+ pressed: 'var(--colors-action-critical-pressed)',
50
+ disabled: 'var(--colors-action-critical-disabled)'
51
+ },
52
+ opacity: {
53
+ default: 'var(--colors-action-opacity-default)',
54
+ hovered: 'var(--colors-action-opacity-hovered)',
55
+ active: 'var(--colors-action-opacity-active)',
56
+ disabled: 'var(--colors-action-opacity-disabled)'
57
+ }
58
+ },
59
+ border: {
60
+ default: 'var(--colors-border-default)',
61
+ subdued: 'var(--colors-border-subdued)',
62
+ hovered: 'var(--colors-border-hovered)',
63
+ active: 'var(--colors-border-active)',
64
+ disabled: 'var(--colors-border-disabled)',
65
+ success: {
66
+ default: 'var(--colors-border-success-default)',
67
+ subdued: 'var(--colors-border-success-subdued)'
68
+ },
69
+ critical: {
70
+ default: 'var(--colors-border-critical-default)',
71
+ subdued: 'var(--colors-border-critical-subdued)',
72
+ disabled: 'var(--colors-border-critical-disabled)'
73
+ },
74
+ shadow: {
75
+ subdued: 'var(--colors-border-shadow-subdued)'
76
+ }
77
+ },
78
+ interactive: {
79
+ default: 'var(--colors-interactive-default)',
80
+ hovered: 'var(--colors-interactive-hovered)',
81
+ active: 'var(--colors-interactive-active)',
82
+ disabled: 'var(--colors-interactive-disabled)',
83
+ critical: {
84
+ default: 'var(--colors-interactive-critical-default)',
85
+ hovered: 'var(--colors-interactive-critical-hovered)',
86
+ active: 'var(--colors-interactive-critical-active)',
87
+ disabled: 'var(--colors-interactive-critical-disabled)'
88
+ }
89
+ },
90
+ icon: {
91
+ default: 'var(--colors-icon-default)',
92
+ subdued: 'var(--colors-icon-subdued)',
93
+ hovered: 'var(--colors-icon-hovered)',
94
+ active: 'var(--colors-icon-active)',
95
+ disabled: 'var(--colors-icon-disabled)',
96
+ critical: 'var(--colors-icon-critical)',
97
+ warning: 'var(--colors-icon-warning)',
98
+ success: 'var(--colors-icon-success)',
99
+ on: 'var(--colors-icon-on)'
100
+ },
101
+ focused: {
102
+ default: 'var(--colors-focused-default)'
103
+ },
104
+ surface: {
105
+ default: 'var(--colors-surface-default)',
106
+ subdued: 'var(--colors-surface-subdued)',
107
+ hovered: 'var(--colors-surface-hovered)',
108
+ active: 'var(--colors-surface-active)',
109
+ pressed: 'var(--colors-surface-pressed)',
110
+ disabled: 'var(--colors-surface-disabled)',
111
+ action: {
112
+ default: 'var(--colors-surface-action-default)',
113
+ subdued: 'var(--colors-surface-action-subdued)',
114
+ hovered: 'var(--colors-surface-action-hovered)',
115
+ active: 'var(--colors-surface-action-active)',
116
+ disabled: 'var(--colors-surface-action-disabled)'
117
+ },
118
+ warning: {
119
+ default: 'var(--colors-surface-warning-default)',
120
+ subdued: 'var(--colors-surface-warning-subdued)',
121
+ hovered: 'var(--colors-surface-warning-hovered)',
122
+ active: 'var(--colors-surface-warning-active)'
123
+ },
124
+ success: {
125
+ default: 'var(--colors-surface-success-default)',
126
+ subdued: 'var(--colors-surface-success-subdued)',
127
+ hovered: 'var(--colors-surface-success-hovered)',
128
+ active: 'var(--colors-surface-success-active)'
129
+ },
130
+ critical: {
131
+ default: 'var(--colors-surface-critical-default)',
132
+ subdued: 'var(--colors-surface-critical-subdued)',
133
+ hovered: 'var(--colors-surface-critical-hovered)',
134
+ active: 'var(--colors-surface-critical-active)',
135
+ disabled: 'var(--colors-surface-critical-disabled)'
136
+ },
137
+ neutral: {
138
+ default: 'var(--colors-surface-neutral-default)',
139
+ subdued: 'var(--colors-surface-neutral-subdued)',
140
+ hovered: 'var(--colors-surface-neutral-hovered)',
141
+ active: 'var(--colors-surface-neutral-active)',
142
+ disabled: 'var(--colors-surface-neutral-disabled)'
143
+ }
144
+ },
145
+ background: {
146
+ default: 'var(--colors-background-default)',
147
+ hovered: 'var(--colors-background-hovered)',
148
+ active: 'var(--colors-background-active)',
149
+ selected: 'var(--colors-background-selected)',
150
+ modal: 'var(--colors-background-modal)'
151
+ },
152
+ radial: {
153
+ 10: 'var(--colors-radial-10)',
154
+ 20: 'var(--colors-radial-20)',
155
+ 30: 'var(--colors-radial-30)',
156
+ 40: 'var(--colors-radial-40)',
157
+ 50: 'var(--colors-radial-50)',
158
+ 60: 'var(--colors-radial-60)',
159
+ 70: 'var(--colors-radial-70)',
160
+ 80: 'var(--colors-radial-80)',
161
+ 90: 'var(--colors-radial-90)',
162
+ 100: 'var(--colors-radial-100)'
163
+ },
164
+ base: {
165
+ surface: 'var(--colors-base-surface)',
166
+ primary: 'var(--colors-base-primary)',
167
+ secondary: 'var(--colors-base-secondary)',
168
+ interactive: 'var(--colors-base-interactive)',
169
+ brand: 'var(--colors-base-brand)',
170
+ critical: 'var(--colors-base-critical)',
171
+ warning: 'var(--colors-base-warning)',
172
+ success: 'var(--colors-base-success)'
173
+ },
174
+ special: {
175
+ one: 'var(--colors-special-one)',
176
+ oneBack: 'var(--colors-special-one-back)',
177
+ two: 'var(--colors-special-two)',
178
+ twoBack: 'var(--colors-special-two-back)',
179
+ three: 'var(--colors-special-three)',
180
+ threeBack: 'var(--colors-special-three-back)',
181
+ four: 'var(--colors-special-four)',
182
+ fourBack: 'var(--colors-special-four-back)'
183
+ }
184
+ },
185
+ fontSize: {
186
+ xxs: 'var(--font-size-xxs)',
187
+ xs: 'var(--font-size-xs)',
188
+ sm: 'var(--font-size-sm)',
189
+ md: 'var(--font-size-md)',
190
+ lg: 'var(--font-size-lg)',
191
+ xl: 'var(--font-size-xl)',
192
+ xxl: 'var(--font-size-xxl)'
193
+ },
194
+ lineHeight: {
195
+ xxs: 'var(--line-height-xxs)',
196
+ xs: 'var(--line-height-xs)',
197
+ sm: 'var(--line-height-sm)',
198
+ md: 'var(--line-height-md)',
199
+ lg: 'var(--line-height-lg)',
200
+ xl: 'var(--line-height-xl)',
201
+ xxl: 'var(--line-height-xxl)'
202
+ },
203
+ fontWeight: {
204
+ regular: 'var(--font-weight-regular)',
205
+ medium: 'var(--font-weight-medium)',
206
+ bold: 'var(--font-weight-bold)'
207
+ },
208
+ borderRadius: {
209
+ xs: 'var(--border-radius-xs)',
210
+ sm: 'var(--border-radius-sm)',
211
+ md: 'var(--border-radius-md)'
212
+ },
213
+ boxShadow: {
214
+ card: 'var(--box-shadow-card)',
215
+ popover: 'var(--box-shadow-popover)',
216
+ popup: 'var(--box-shadow-popup)',
217
+ pressed: 'var(--box-shadow-pressed)'
218
+ },
219
+ spacing: {
220
+ xxs: 'var(--spacing-xxs)',
221
+ xs: 'var(--spacing-xs)',
222
+ sm: 'var(--spacing-sm)',
223
+ md: 'var(--spacing-md)',
224
+ lg: 'var(--spacing-lg)',
225
+ xl: 'var(--spacing-xl)',
226
+ xxl: 'var(--spacing-xxl)',
227
+ '1xl': 'var(--spacing-1xl)'
228
+ },
229
+ fontFamily: {
230
+ sans: ['Inter', ...defaultTheme.fontFamily.sans]
231
+ },
232
+ animation: {
233
+ 'spin-slow': 'spin 3s linear infinite'
234
+ }
235
+ }
236
+ },
237
+ variants: {
238
+ extend: {
239
+ backgroundColor: ['checked', 'active'],
240
+ textColor: ['checked', 'active'],
241
+ borderColor: ['checked', 'hover', 'active'],
242
+ fill: ['hover', 'focus']
243
+ }
244
+ },
245
+ plugins: [require('@tailwindcss/forms')]
246
+ }