@aveonline/ui-react 2.31.1 → 2.32.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 (34) hide show
  1. package/dist/helpers/translate.d.ts +2 -0
  2. package/dist/tailwind.config.js +261 -258
  3. package/dist/tailwind.css +1 -1
  4. package/dist/ui/atoms/Badge/Badge.d.ts +1 -4
  5. package/dist/ui/atoms/Badge/IBadge.d.ts +5 -0
  6. package/dist/ui/atoms/Button/IButton.d.ts +2 -0
  7. package/dist/ui/atoms/Tooltip/ITooltip.d.ts +2 -0
  8. package/dist/ui/atoms/Tooltip/Tooltip.d.ts +3 -2
  9. package/dist/ui/atoms/Tooltip/TooltipAnchor.d.ts +1 -1
  10. package/dist/ui/atoms/Tooltip/TooltipFloat.d.ts +1 -1
  11. package/dist/ui/atoms/Typography/Heading/Heading.d.ts +1 -1
  12. package/dist/ui/atoms/Typography/Heading/IHeading.d.ts +2 -0
  13. package/dist/ui/atoms/Typography/Link/ILink.d.ts +3 -1
  14. package/dist/ui/atoms/Typography/Link/Link.d.ts +1 -1
  15. package/dist/ui/atoms/Typography/Text/IText.d.ts +1 -0
  16. package/dist/ui/molecules/Cards/CardHistory/CardHistory.d.ts +1 -1
  17. package/dist/ui/molecules/Cards/CardHistory/ICardHistory.d.ts +2 -0
  18. package/dist/ui/molecules/Cards/CardSelect/CardSelect.d.ts +1 -2
  19. package/dist/ui/molecules/Cards/CardSelect/ICardSelect.d.ts +2 -0
  20. package/dist/ui/molecules/DateInputPicker/DateInputPicker.d.ts +1 -2
  21. package/dist/ui/molecules/DateInputPicker/IDateInputPicker.d.ts +2 -0
  22. package/dist/ui/molecules/Dropdowns/DropdownFilter/Command.d.ts +1 -1
  23. package/dist/ui/molecules/Dropdowns/DropdownFilter/Popover.d.ts +1 -1
  24. package/dist/ui/molecules/Field/IField.d.ts +2 -0
  25. package/dist/ui/molecules/Flag/Flag.d.ts +1 -1
  26. package/dist/ui/molecules/Flag/IFlag.d.ts +2 -0
  27. package/dist/ui/molecules/Selectable/Select/ISelect.d.ts +2 -0
  28. package/dist/ui/molecules/Selectable/Select/Select.d.ts +1 -1
  29. package/dist/ui/molecules/Tab/ITab.d.ts +2 -0
  30. package/dist/ui/molecules/Tab/Tab.d.ts +1 -1
  31. package/dist/ui/molecules/TextArea/ITextArea.d.ts +2 -0
  32. package/dist/ui/molecules/TextArea/TextArea.d.ts +2 -0
  33. package/dist/ui-react.mjs +11343 -11506
  34. package/package.json +1 -3
package/dist/helpers/translate.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare function getTranslatedText<T>(value: T, useT: boolean, _t?: (text: string) => string): T;
2
+ export default getTranslatedText;
package/dist/tailwind.config.js CHANGED
@@ -1,258 +1,261 @@
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
- ave: {
21
- white: 'var(--ave-white)',
22
- gray: 'var(--ave-gray)',
23
- primary: 'var(--ave-primary)',
24
- secondary: 'var(--ave-secondary)',
25
- active: 'var(--ave-active)'
26
- },
27
- letter: {
28
- default: 'var(--colors-letter-default)',
29
- subdued: 'var(--colors-letter-subdued)',
30
- disabled: 'var(--colors-letter-disabled)',
31
- warning: 'var(--colors-letter-warning)',
32
- critical: 'var(--colors-letter-critical)',
33
- success: 'var(--colors-letter-success)',
34
- brand: 'var(--colors-letter-brand)',
35
- on: 'var(--colors-letter-on)'
36
- },
37
- action: {
38
- primary: {
39
- default: 'var(--colors-action-primary-default)',
40
- hovered: 'var(--colors-action-primary-hovered)',
41
- active: 'var(--colors-action-primary-active)',
42
- pressed: 'var(--colors-action-primary-pressed)',
43
- disabled: 'var(--colors-action-primary-disabled)',
44
- brand: 'var(--colors-action-primary-brand)'
45
- },
46
- secondary: {
47
- default: 'var(--colors-action-secondary-default)',
48
- hovered: 'var(--colors-action-secondary-hovered)',
49
- active: 'var(--colors-action-secondary-active)',
50
- pressed: 'var(--colors-action-secondary-pressed)',
51
- disabled: 'var(--colors-action-secondary-disabled)',
52
- subdued: 'var(--colors-action-secondary-subdued)'
53
- },
54
- critical: {
55
- default: 'var(--colors-action-critical-default)',
56
- hovered: 'var(--colors-action-critical-hovered)',
57
- active: 'var(--colors-action-critical-active)',
58
- pressed: 'var(--colors-action-critical-pressed)',
59
- disabled: 'var(--colors-action-critical-disabled)'
60
- },
61
- opacity: {
62
- default: 'var(--colors-action-opacity-default)',
63
- hovered: 'var(--colors-action-opacity-hovered)',
64
- active: 'var(--colors-action-opacity-active)',
65
- disabled: 'var(--colors-action-opacity-disabled)'
66
- }
67
- },
68
- border: {
69
- default: 'var(--colors-border-default)',
70
- subdued: 'var(--colors-border-subdued)',
71
- hovered: 'var(--colors-border-hovered)',
72
- active: 'var(--colors-border-active)',
73
- disabled: 'var(--colors-border-disabled)',
74
- brand: 'var(--colors-action-primary-brand)',
75
- success: {
76
- default: 'var(--colors-border-success-default)',
77
- subdued: 'var(--colors-border-success-subdued)'
78
- },
79
- critical: {
80
- default: 'var(--colors-border-critical-default)',
81
- subdued: 'var(--colors-border-critical-subdued)',
82
- disabled: 'var(--colors-border-critical-disabled)'
83
- },
84
- shadow: {
85
- subdued: 'var(--colors-border-shadow-subdued)'
86
- }
87
- },
88
- interactive: {
89
- default: 'var(--colors-interactive-default)',
90
- hovered: 'var(--colors-interactive-hovered)',
91
- active: 'var(--colors-interactive-active)',
92
- disabled: 'var(--colors-interactive-disabled)',
93
- critical: {
94
- default: 'var(--colors-interactive-critical-default)',
95
- hovered: 'var(--colors-interactive-critical-hovered)',
96
- active: 'var(--colors-interactive-critical-active)',
97
- disabled: 'var(--colors-interactive-critical-disabled)'
98
- }
99
- },
100
- icon: {
101
- default: 'var(--colors-icon-default)',
102
- subdued: 'var(--colors-icon-subdued)',
103
- hovered: 'var(--colors-icon-hovered)',
104
- active: 'var(--colors-icon-active)',
105
- disabled: 'var(--colors-icon-disabled)',
106
- critical: 'var(--colors-icon-critical)',
107
- warning: 'var(--colors-icon-warning)',
108
- success: 'var(--colors-icon-success)',
109
- on: 'var(--colors-icon-on)',
110
- brand: 'var(--colors-icon-brand)'
111
- },
112
- focused: {
113
- default: 'var(--colors-focused-default)'
114
- },
115
- surface: {
116
- default: 'var(--colors-surface-default)',
117
- subdued: 'var(--colors-surface-subdued)',
118
- hovered: 'var(--colors-surface-hovered)',
119
- active: 'var(--colors-surface-active)',
120
- pressed: 'var(--colors-surface-pressed)',
121
- disabled: 'var(--colors-surface-disabled)',
122
- brand: 'var(--colors-surface-brand)',
123
- action: {
124
- default: 'var(--colors-surface-action-default)',
125
- subdued: 'var(--colors-surface-action-subdued)',
126
- hovered: 'var(--colors-surface-action-hovered)',
127
- active: 'var(--colors-surface-action-active)',
128
- disabled: 'var(--colors-surface-action-disabled)'
129
- },
130
- warning: {
131
- default: 'var(--colors-surface-warning-default)',
132
- subdued: 'var(--colors-surface-warning-subdued)',
133
- hovered: 'var(--colors-surface-warning-hovered)',
134
- active: 'var(--colors-surface-warning-active)'
135
- },
136
- success: {
137
- default: 'var(--colors-surface-success-default)',
138
- subdued: 'var(--colors-surface-success-subdued)',
139
- hovered: 'var(--colors-surface-success-hovered)',
140
- active: 'var(--colors-surface-success-active)'
141
- },
142
- critical: {
143
- default: 'var(--colors-surface-critical-default)',
144
- subdued: 'var(--colors-surface-critical-subdued)',
145
- hovered: 'var(--colors-surface-critical-hovered)',
146
- active: 'var(--colors-surface-critical-active)',
147
- disabled: 'var(--colors-surface-critical-disabled)'
148
- },
149
- neutral: {
150
- default: 'var(--colors-surface-neutral-default)',
151
- subdued: 'var(--colors-surface-neutral-subdued)',
152
- hovered: 'var(--colors-surface-neutral-hovered)',
153
- active: 'var(--colors-surface-neutral-active)',
154
- disabled: 'var(--colors-surface-neutral-disabled)'
155
- }
156
- },
157
- background: {
158
- default: 'var(--colors-background-default)',
159
- hovered: 'var(--colors-background-hovered)',
160
- active: 'var(--colors-background-active)',
161
- selected: 'var(--colors-background-selected)',
162
- modal: 'var(--colors-background-modal)'
163
- },
164
- radial: {
165
- 10: 'var(--colors-radial-10)',
166
- 20: 'var(--colors-radial-20)',
167
- 30: 'var(--colors-radial-30)',
168
- 40: 'var(--colors-radial-40)',
169
- 50: 'var(--colors-radial-50)',
170
- 60: 'var(--colors-radial-60)',
171
- 70: 'var(--colors-radial-70)',
172
- 80: 'var(--colors-radial-80)',
173
- 90: 'var(--colors-radial-90)',
174
- 100: 'var(--colors-radial-100)'
175
- },
176
- base: {
177
- surface: 'var(--colors-base-surface)',
178
- primary: 'var(--colors-base-primary)',
179
- secondary: 'var(--colors-base-secondary)',
180
- interactive: 'var(--colors-base-interactive)',
181
- brand: 'var(--colors-base-brand)',
182
- critical: 'var(--colors-base-critical)',
183
- warning: 'var(--colors-base-warning)',
184
- success: 'var(--colors-base-success)'
185
- },
186
- special: {
187
- one: 'var(--colors-special-one)',
188
- oneBack: 'var(--colors-special-one-back)',
189
- two: 'var(--colors-special-two)',
190
- twoBack: 'var(--colors-special-two-back)',
191
- three: 'var(--colors-special-three)',
192
- threeBack: 'var(--colors-special-three-back)',
193
- four: 'var(--colors-special-four)',
194
- fourBack: 'var(--colors-special-four-back)'
195
- }
196
- },
197
- fontSize: {
198
- xxs: 'var(--font-size-xxs)',
199
- xs: 'var(--font-size-xs)',
200
- sm: 'var(--font-size-sm)',
201
- md: 'var(--font-size-md)',
202
- lg: 'var(--font-size-lg)',
203
- xl: 'var(--font-size-xl)',
204
- xxl: 'var(--font-size-xxl)'
205
- },
206
- lineHeight: {
207
- xxs: 'var(--line-height-xxs)',
208
- xs: 'var(--line-height-xs)',
209
- sm: 'var(--line-height-sm)',
210
- md: 'var(--line-height-md)',
211
- lg: 'var(--line-height-lg)',
212
- xl: 'var(--line-height-xl)',
213
- xxl: 'var(--line-height-xxl)'
214
- },
215
- fontWeight: {
216
- regular: 'var(--font-weight-regular)',
217
- medium: 'var(--font-weight-medium)',
218
- bold: 'var(--font-weight-bold)'
219
- },
220
- borderRadius: {
221
- xs: 'var(--border-radius-xs)',
222
- sm: 'var(--border-radius-sm)',
223
- md: 'var(--border-radius-md)'
224
- },
225
- boxShadow: {
226
- card: 'var(--box-shadow-card)',
227
- popover: 'var(--box-shadow-popover)',
228
- popup: 'var(--box-shadow-popup)',
229
- pressed: 'var(--box-shadow-pressed)'
230
- },
231
- spacing: {
232
- xxs: 'var(--spacing-xxs)',
233
- xs: 'var(--spacing-xs)',
234
- sm: 'var(--spacing-sm)',
235
- md: 'var(--spacing-md)',
236
- lg: 'var(--spacing-lg)',
237
- xl: 'var(--spacing-xl)',
238
- xxl: 'var(--spacing-xxl)',
239
- '1xl': 'var(--spacing-1xl)'
240
- },
241
- fontFamily: {
242
- sans: ['Inter', ...defaultTheme.fontFamily.sans]
243
- },
244
- animation: {
245
- 'spin-slow': 'spin 3s linear infinite'
246
- }
247
- }
248
- },
249
- variants: {
250
- extend: {
251
- backgroundColor: ['checked', 'active'],
252
- textColor: ['checked', 'active'],
253
- borderColor: ['checked', 'hover', 'active'],
254
- fill: ['hover', 'focus']
255
- }
256
- },
257
- plugins: [require('@tailwindcss/forms')]
258
- }
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
+ ave: {
21
+ white: 'var(--ave-white)',
22
+ gray: 'var(--ave-gray)',
23
+ primary: 'var(--ave-primary)',
24
+ secondary: 'var(--ave-secondary)',
25
+ active: 'var(--ave-active)'
26
+ },
27
+ letter: {
28
+ default: 'var(--colors-letter-default)',
29
+ subdued: 'var(--colors-letter-subdued)',
30
+ disabled: 'var(--colors-letter-disabled)',
31
+ warning: 'var(--colors-letter-warning)',
32
+ critical: 'var(--colors-letter-critical)',
33
+ success: 'var(--colors-letter-success)',
34
+ brand: 'var(--colors-letter-brand)',
35
+ on: 'var(--colors-letter-on)'
36
+ },
37
+ action: {
38
+ primary: {
39
+ default: 'var(--colors-action-primary-default)',
40
+ hovered: 'var(--colors-action-primary-hovered)',
41
+ active: 'var(--colors-action-primary-active)',
42
+ pressed: 'var(--colors-action-primary-pressed)',
43
+ disabled: 'var(--colors-action-primary-disabled)',
44
+ brand: 'var(--colors-action-primary-brand)'
45
+ },
46
+ secondary: {
47
+ default: 'var(--colors-action-secondary-default)',
48
+ hovered: 'var(--colors-action-secondary-hovered)',
49
+ active: 'var(--colors-action-secondary-active)',
50
+ pressed: 'var(--colors-action-secondary-pressed)',
51
+ disabled: 'var(--colors-action-secondary-disabled)',
52
+ subdued: 'var(--colors-action-secondary-subdued)'
53
+ },
54
+ critical: {
55
+ default: 'var(--colors-action-critical-default)',
56
+ hovered: 'var(--colors-action-critical-hovered)',
57
+ active: 'var(--colors-action-critical-active)',
58
+ pressed: 'var(--colors-action-critical-pressed)',
59
+ disabled: 'var(--colors-action-critical-disabled)'
60
+ },
61
+ opacity: {
62
+ default: 'var(--colors-action-opacity-default)',
63
+ hovered: 'var(--colors-action-opacity-hovered)',
64
+ active: 'var(--colors-action-opacity-active)',
65
+ disabled: 'var(--colors-action-opacity-disabled)'
66
+ },
67
+ brand: {
68
+ active: 'var(--colors-action-brand-active)'
69
+ }
70
+ },
71
+ border: {
72
+ default: 'var(--colors-border-default)',
73
+ subdued: 'var(--colors-border-subdued)',
74
+ hovered: 'var(--colors-border-hovered)',
75
+ active: 'var(--colors-border-active)',
76
+ disabled: 'var(--colors-border-disabled)',
77
+ brand: 'var(--colors-border-brand)',
78
+ success: {
79
+ default: 'var(--colors-border-success-default)',
80
+ subdued: 'var(--colors-border-success-subdued)'
81
+ },
82
+ critical: {
83
+ default: 'var(--colors-border-critical-default)',
84
+ subdued: 'var(--colors-border-critical-subdued)',
85
+ disabled: 'var(--colors-border-critical-disabled)'
86
+ },
87
+ shadow: {
88
+ subdued: 'var(--colors-border-shadow-subdued)'
89
+ }
90
+ },
91
+ interactive: {
92
+ default: 'var(--colors-interactive-default)',
93
+ hovered: 'var(--colors-interactive-hovered)',
94
+ active: 'var(--colors-interactive-active)',
95
+ disabled: 'var(--colors-interactive-disabled)',
96
+ critical: {
97
+ default: 'var(--colors-interactive-critical-default)',
98
+ hovered: 'var(--colors-interactive-critical-hovered)',
99
+ active: 'var(--colors-interactive-critical-active)',
100
+ disabled: 'var(--colors-interactive-critical-disabled)'
101
+ }
102
+ },
103
+ icon: {
104
+ default: 'var(--colors-icon-default)',
105
+ subdued: 'var(--colors-icon-subdued)',
106
+ hovered: 'var(--colors-icon-hovered)',
107
+ active: 'var(--colors-icon-active)',
108
+ disabled: 'var(--colors-icon-disabled)',
109
+ critical: 'var(--colors-icon-critical)',
110
+ warning: 'var(--colors-icon-warning)',
111
+ success: 'var(--colors-icon-success)',
112
+ on: 'var(--colors-icon-on)',
113
+ brand: 'var(--colors-icon-brand)'
114
+ },
115
+ focused: {
116
+ default: 'var(--colors-focused-default)'
117
+ },
118
+ surface: {
119
+ default: 'var(--colors-surface-default)',
120
+ subdued: 'var(--colors-surface-subdued)',
121
+ hovered: 'var(--colors-surface-hovered)',
122
+ active: 'var(--colors-surface-active)',
123
+ pressed: 'var(--colors-surface-pressed)',
124
+ disabled: 'var(--colors-surface-disabled)',
125
+ brand: 'var(--colors-surface-brand)',
126
+ action: {
127
+ default: 'var(--colors-surface-action-default)',
128
+ subdued: 'var(--colors-surface-action-subdued)',
129
+ hovered: 'var(--colors-surface-action-hovered)',
130
+ active: 'var(--colors-surface-action-active)',
131
+ disabled: 'var(--colors-surface-action-disabled)'
132
+ },
133
+ warning: {
134
+ default: 'var(--colors-surface-warning-default)',
135
+ subdued: 'var(--colors-surface-warning-subdued)',
136
+ hovered: 'var(--colors-surface-warning-hovered)',
137
+ active: 'var(--colors-surface-warning-active)'
138
+ },
139
+ success: {
140
+ default: 'var(--colors-surface-success-default)',
141
+ subdued: 'var(--colors-surface-success-subdued)',
142
+ hovered: 'var(--colors-surface-success-hovered)',
143
+ active: 'var(--colors-surface-success-active)'
144
+ },
145
+ critical: {
146
+ default: 'var(--colors-surface-critical-default)',
147
+ subdued: 'var(--colors-surface-critical-subdued)',
148
+ hovered: 'var(--colors-surface-critical-hovered)',
149
+ active: 'var(--colors-surface-critical-active)',
150
+ disabled: 'var(--colors-surface-critical-disabled)'
151
+ },
152
+ neutral: {
153
+ default: 'var(--colors-surface-neutral-default)',
154
+ subdued: 'var(--colors-surface-neutral-subdued)',
155
+ hovered: 'var(--colors-surface-neutral-hovered)',
156
+ active: 'var(--colors-surface-neutral-active)',
157
+ disabled: 'var(--colors-surface-neutral-disabled)'
158
+ }
159
+ },
160
+ background: {
161
+ default: 'var(--colors-background-default)',
162
+ hovered: 'var(--colors-background-hovered)',
163
+ active: 'var(--colors-background-active)',
164
+ selected: 'var(--colors-background-selected)',
165
+ modal: 'var(--colors-background-modal)'
166
+ },
167
+ radial: {
168
+ 10: 'var(--colors-radial-10)',
169
+ 20: 'var(--colors-radial-20)',
170
+ 30: 'var(--colors-radial-30)',
171
+ 40: 'var(--colors-radial-40)',
172
+ 50: 'var(--colors-radial-50)',
173
+ 60: 'var(--colors-radial-60)',
174
+ 70: 'var(--colors-radial-70)',
175
+ 80: 'var(--colors-radial-80)',
176
+ 90: 'var(--colors-radial-90)',
177
+ 100: 'var(--colors-radial-100)'
178
+ },
179
+ base: {
180
+ surface: 'var(--colors-base-surface)',
181
+ primary: 'var(--colors-base-primary)',
182
+ secondary: 'var(--colors-base-secondary)',
183
+ interactive: 'var(--colors-base-interactive)',
184
+ brand: 'var(--colors-base-brand)',
185
+ critical: 'var(--colors-base-critical)',
186
+ warning: 'var(--colors-base-warning)',
187
+ success: 'var(--colors-base-success)'
188
+ },
189
+ special: {
190
+ one: 'var(--colors-special-one)',
191
+ oneBack: 'var(--colors-special-one-back)',
192
+ two: 'var(--colors-special-two)',
193
+ twoBack: 'var(--colors-special-two-back)',
194
+ three: 'var(--colors-special-three)',
195
+ threeBack: 'var(--colors-special-three-back)',
196
+ four: 'var(--colors-special-four)',
197
+ fourBack: 'var(--colors-special-four-back)'
198
+ }
199
+ },
200
+ fontSize: {
201
+ xxs: 'var(--font-size-xxs)',
202
+ xs: 'var(--font-size-xs)',
203
+ sm: 'var(--font-size-sm)',
204
+ md: 'var(--font-size-md)',
205
+ lg: 'var(--font-size-lg)',
206
+ xl: 'var(--font-size-xl)',
207
+ xxl: 'var(--font-size-xxl)'
208
+ },
209
+ lineHeight: {
210
+ xxs: 'var(--line-height-xxs)',
211
+ xs: 'var(--line-height-xs)',
212
+ sm: 'var(--line-height-sm)',
213
+ md: 'var(--line-height-md)',
214
+ lg: 'var(--line-height-lg)',
215
+ xl: 'var(--line-height-xl)',
216
+ xxl: 'var(--line-height-xxl)'
217
+ },
218
+ fontWeight: {
219
+ regular: 'var(--font-weight-regular)',
220
+ medium: 'var(--font-weight-medium)',
221
+ bold: 'var(--font-weight-bold)'
222
+ },
223
+ borderRadius: {
224
+ xs: 'var(--border-radius-xs)',
225
+ sm: 'var(--border-radius-sm)',
226
+ md: 'var(--border-radius-md)'
227
+ },
228
+ boxShadow: {
229
+ card: 'var(--box-shadow-card)',
230
+ popover: 'var(--box-shadow-popover)',
231
+ popup: 'var(--box-shadow-popup)',
232
+ pressed: 'var(--box-shadow-pressed)'
233
+ },
234
+ spacing: {
235
+ xxs: 'var(--spacing-xxs)',
236
+ xs: 'var(--spacing-xs)',
237
+ sm: 'var(--spacing-sm)',
238
+ md: 'var(--spacing-md)',
239
+ lg: 'var(--spacing-lg)',
240
+ xl: 'var(--spacing-xl)',
241
+ xxl: 'var(--spacing-xxl)',
242
+ '1xl': 'var(--spacing-1xl)'
243
+ },
244
+ fontFamily: {
245
+ sans: ['Inter', ...defaultTheme.fontFamily.sans]
246
+ },
247
+ animation: {
248
+ 'spin-slow': 'spin 3s linear infinite'
249
+ }
250
+ }
251
+ },
252
+ variants: {
253
+ extend: {
254
+ backgroundColor: ['checked', 'active'],
255
+ textColor: ['checked', 'active'],
256
+ borderColor: ['checked', 'hover', 'active'],
257
+ fill: ['hover', 'focus']
258
+ }
259
+ },
260
+ plugins: [require('@tailwindcss/forms')]
261
+ }