@onereach/styles 2.9.0-beta.607.0 → 2.9.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 (3) hide show
  1. package/package.json +5 -3
  2. package/tailwind.config.js +6 -308
  3. package/tailwind.config.preset.js +312 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/styles",
3
- "version": "2.9.0-beta.607.0",
3
+ "version": "2.9.0",
4
4
  "description": "Styles for or-ui-next",
5
5
  "main": "./main.css",
6
6
  "unpkg": "./main.css",
@@ -25,7 +25,8 @@
25
25
  "tw-color-variables.css",
26
26
  "legacy-ui-warning.scss",
27
27
  "preflight-revert.css",
28
- "tailwind.config.js"
28
+ "tailwind.config.js",
29
+ "tailwind.config.preset.js"
29
30
  ],
30
31
  "license": "UNLICENSED",
31
32
  "devDependencies": {
@@ -40,5 +41,6 @@
40
41
  "sass": "^1.35.1",
41
42
  "stylelint": "^13.13.1",
42
43
  "tailwindcss": "^3.1.3"
43
- }
44
+ },
45
+ "gitHead": "1f22b4766a3dc715dffc894cac8a272c3ac91951"
44
46
  }
package/tailwind.config.js CHANGED
@@ -1,312 +1,10 @@
1
- /** @type {import('tailwindcss').Config} */
2
-
3
- const defaultTheme = require('tailwindcss/defaultTheme');
4
- const plugin = require('tailwindcss/plugin');
5
-
6
1
  module.exports = {
7
- darkMode: ['class', '[data-theme="dark-mode"]'],
8
- theme: {
9
- colors: {
10
- inherit: 'inherit',
11
- current: 'currentColor',
12
- transparent: 'transparent',
13
-
14
- white: 'rgba(var(--tw-c-white), <alpha-value>)',
15
- black: 'rgba(var(--tw-c-black), <alpha-value>)',
16
-
17
- primary: {
18
- 100: 'rgba(var(--tw-c-primary-100), <alpha-value>)',
19
- 99: 'rgba(var(--tw-c-primary-99), <alpha-value>)',
20
- 95: 'rgba(var(--tw-c-primary-95), <alpha-value>)',
21
- 90: 'rgba(var(--tw-c-primary-90), <alpha-value>)',
22
- 80: 'rgba(var(--tw-c-primary-80), <alpha-value>)',
23
- 70: 'rgba(var(--tw-c-primary-70), <alpha-value>)',
24
- 60: 'rgba(var(--tw-c-primary-60), <alpha-value>)',
25
- 50: 'rgba(var(--tw-c-primary-50), <alpha-value>)',
26
- 40: 'rgba(var(--tw-c-primary-40), <alpha-value>)',
27
- 30: 'rgba(var(--tw-c-primary-30), <alpha-value>)',
28
- 20: 'rgba(var(--tw-c-primary-20), <alpha-value>)',
29
- 10: 'rgba(var(--tw-c-primary-10), <alpha-value>)',
30
- 0: 'rgba(var(--tw-c-primary-0), <alpha-value>)',
31
- 'DEFAULT': 'rgba(var(--tw-c-primary), <alpha-value>)',
32
- },
33
-
34
- 'on-primary': 'rgba(var(--tw-c-on-primary), <alpha-value>)',
35
- 'primary-container': 'rgba(var(--tw-c-primary-container), <alpha-value>)',
36
- 'on-primary-container': 'rgba(var(--tw-c-on-primary-container), <alpha-value>)',
37
-
38
- secondary: {
39
- 100: 'rgba(var(--tw-c-secondary-100), <alpha-value>)',
40
- 99: 'rgba(var(--tw-c-secondary-99), <alpha-value>)',
41
- 95: 'rgba(var(--tw-c-secondary-95), <alpha-value>)',
42
- 90: 'rgba(var(--tw-c-secondary-90), <alpha-value>)',
43
- 80: 'rgba(var(--tw-c-secondary-80), <alpha-value>)',
44
- 70: 'rgba(var(--tw-c-secondary-70), <alpha-value>)',
45
- 60: 'rgba(var(--tw-c-secondary-60), <alpha-value>)',
46
- 50: 'rgba(var(--tw-c-secondary-50), <alpha-value>)',
47
- 40: 'rgba(var(--tw-c-secondary-40), <alpha-value>)',
48
- 30: 'rgba(var(--tw-c-secondary-30), <alpha-value>)',
49
- 20: 'rgba(var(--tw-c-secondary-20), <alpha-value>)',
50
- 10: 'rgba(var(--tw-c-secondary-10), <alpha-value>)',
51
- 0: 'rgba(var(--tw-c-secondary-0), <alpha-value>)',
52
- 'DEFAULT': 'rgba(var(--tw-c-secondary), <alpha-value>)',
53
- },
54
-
55
- 'on-secondary': 'rgba(var(--tw-c-on-secondary), <alpha-value>)',
56
- 'secondary-container': 'rgba(var(--tw-c-secondary-container), <alpha-value>)',
57
- 'on-secondary-container': 'rgba(var(--tw-c-on-secondary-container), <alpha-value>)',
58
-
59
- tertiary: {
60
- 100: 'rgba(var(--tw-c-tertiary-100), <alpha-value>)',
61
- 99: 'rgba(var(--tw-c-tertiary-99), <alpha-value>)',
62
- 95: 'rgba(var(--tw-c-tertiary-95), <alpha-value>)',
63
- 90: 'rgba(var(--tw-c-tertiary-90), <alpha-value>)',
64
- 80: 'rgba(var(--tw-c-tertiary-80), <alpha-value>)',
65
- 70: 'rgba(var(--tw-c-tertiary-70), <alpha-value>)',
66
- 60: 'rgba(var(--tw-c-tertiary-60), <alpha-value>)',
67
- 50: 'rgba(var(--tw-c-tertiary-50), <alpha-value>)',
68
- 40: 'rgba(var(--tw-c-tertiary-40), <alpha-value>)',
69
- 30: 'rgba(var(--tw-c-tertiary-30), <alpha-value>)',
70
- 20: 'rgba(var(--tw-c-tertiary-20), <alpha-value>)',
71
- 10: 'rgba(var(--tw-c-tertiary-10), <alpha-value>)',
72
- 0: 'rgba(var(--tw-c-tertiary-0), <alpha-value>)',
73
- 'DEFAULT': 'rgba(var(--tw-c-tertiary), <alpha-value>)',
74
- },
75
-
76
- 'on-tertiary': 'rgba(var(--tw-c-on-tertiary), <alpha-value>)',
77
- 'tertiary-container': 'rgba(var(--tw-c-tertiary-container), <alpha-value>)',
78
- 'on-tertiary-container': 'rgba(var(--tw-c-on-tertiary-container), <alpha-value>)',
79
-
80
- error: {
81
- 100: 'rgba(var(--tw-c-error-100), <alpha-value>)',
82
- 99: 'rgba(var(--tw-c-error-99), <alpha-value>)',
83
- 95: 'rgba(var(--tw-c-error-95), <alpha-value>)',
84
- 90: 'rgba(var(--tw-c-error-90), <alpha-value>)',
85
- 80: 'rgba(var(--tw-c-error-80), <alpha-value>)',
86
- 70: 'rgba(var(--tw-c-error-70), <alpha-value>)',
87
- 60: 'rgba(var(--tw-c-error-60), <alpha-value>)',
88
- 50: 'rgba(var(--tw-c-error-50), <alpha-value>)',
89
- 40: 'rgba(var(--tw-c-error-40), <alpha-value>)',
90
- 30: 'rgba(var(--tw-c-error-30), <alpha-value>)',
91
- 20: 'rgba(var(--tw-c-error-20), <alpha-value>)',
92
- 10: 'rgba(var(--tw-c-error-10), <alpha-value>)',
93
- 0: 'rgba(var(--tw-c-error-0), <alpha-value>)',
94
- 'DEFAULT': 'rgba(var(--tw-c-error), <alpha-value>)',
95
- },
96
-
97
- 'on-error': 'rgba(var(--tw-c-on-error), <alpha-value>)',
98
- 'error-container': 'rgba(var(--tw-c-error-container), <alpha-value>)',
99
- 'on-error-container': 'rgba(var(--tw-c-on-error-container), <alpha-value>)',
100
-
101
- neutral: {
102
- 100: 'rgba(var(--tw-c-neutral-100), <alpha-value>)',
103
- 99: 'rgba(var(--tw-c-neutral-99), <alpha-value>)',
104
- 95: 'rgba(var(--tw-c-neutral-95), <alpha-value>)',
105
- 90: 'rgba(var(--tw-c-neutral-90), <alpha-value>)',
106
- 80: 'rgba(var(--tw-c-neutral-80), <alpha-value>)',
107
- 70: 'rgba(var(--tw-c-neutral-70), <alpha-value>)',
108
- 60: 'rgba(var(--tw-c-neutral-60), <alpha-value>)',
109
- 50: 'rgba(var(--tw-c-neutral-50), <alpha-value>)',
110
- 40: 'rgba(var(--tw-c-neutral-40), <alpha-value>)',
111
- 30: 'rgba(var(--tw-c-neutral-30), <alpha-value>)',
112
- 20: 'rgba(var(--tw-c-neutral-20), <alpha-value>)',
113
- 10: 'rgba(var(--tw-c-neutral-10), <alpha-value>)',
114
- 0: 'rgba(var(--tw-c-neutral-0), <alpha-value>)',
115
- },
116
-
117
- 'background': 'rgba(var(--tw-c-background), <alpha-value>)',
118
- 'on-background': 'rgba(var(--tw-c-on-background), <alpha-value>)',
119
-
120
- // https://github.com/csstools/postcss-color-mod-function/issues/41#issuecomment-1007309849
121
- 'surface': {
122
- 1: 'rgba(var(--tw-c-surface-1), <alpha-value>)',
123
- 2: 'rgba(var(--tw-c-surface-2), <alpha-value>)',
124
- 3: 'rgba(var(--tw-c-surface-3), <alpha-value>)',
125
- 4: 'rgba(var(--tw-c-surface-4), <alpha-value>)',
126
- 5: 'rgba(var(--tw-c-surface-5), <alpha-value>)',
127
- 'DEFAULT': 'rgba(var(--tw-c-surface), <alpha-value>)',
128
- },
129
-
130
- 'on-surface': 'rgba(var(--tw-c-on-surface), <alpha-value>)',
131
-
132
- 'neutral-variant': {
133
- 100: 'rgba(var(--tw-c-neutral-variant-100), <alpha-value>)',
134
- 99: 'rgba(var(--tw-c-neutral-variant-99), <alpha-value>)',
135
- 95: 'rgba(var(--tw-c-neutral-variant-95), <alpha-value>)',
136
- 90: 'rgba(var(--tw-c-neutral-variant-90), <alpha-value>)',
137
- 80: 'rgba(var(--tw-c-neutral-variant-80), <alpha-value>)',
138
- 70: 'rgba(var(--tw-c-neutral-variant-70), <alpha-value>)',
139
- 60: 'rgba(var(--tw-c-neutral-variant-60), <alpha-value>)',
140
- 50: 'rgba(var(--tw-c-neutral-variant-50), <alpha-value>)',
141
- 40: 'rgba(var(--tw-c-neutral-variant-40), <alpha-value>)',
142
- 30: 'rgba(var(--tw-c-neutral-variant-30), <alpha-value>)',
143
- 20: 'rgba(var(--tw-c-neutral-variant-20), <alpha-value>)',
144
- 10: 'rgba(var(--tw-c-neutral-variant-10), <alpha-value>)',
145
- 0: 'rgba(var(--tw-c-neutral-variant-0), <alpha-value>)',
146
- },
147
-
148
- 'surface-variant': 'rgba(var(--tw-c-surface-variant), <alpha-value>)',
149
- 'on-surface-variant': 'rgba(var(--tw-c-on-surface-variant), <alpha-value>)',
150
- 'outline': 'rgba(var(--tw-c-outline), <alpha-value>)',
151
- 'disable': 'rgba(var(--tw-c-disable), 0.3)',
152
-
153
- success: {
154
- 100: 'rgba(var(--tw-c-success-100), <alpha-value>)',
155
- 99: 'rgba(var(--tw-c-success-99), <alpha-value>)',
156
- 95: 'rgba(var(--tw-c-success-95), <alpha-value>)',
157
- 90: 'rgba(var(--tw-c-success-90), <alpha-value>)',
158
- 80: 'rgba(var(--tw-c-success-80), <alpha-value>)',
159
- 70: 'rgba(var(--tw-c-success-70), <alpha-value>)',
160
- 60: 'rgba(var(--tw-c-success-60), <alpha-value>)',
161
- 50: 'rgba(var(--tw-c-success-50), <alpha-value>)',
162
- 40: 'rgba(var(--tw-c-success-40), <alpha-value>)',
163
- 30: 'rgba(var(--tw-c-success-30), <alpha-value>)',
164
- 20: 'rgba(var(--tw-c-success-20), <alpha-value>)',
165
- 10: 'rgba(var(--tw-c-success-10), <alpha-value>)',
166
- 0: 'rgba(var(--tw-c-success-0), <alpha-value>)',
167
- 'DEFAULT': 'rgba(var(--tw-c-success), <alpha-value>)',
168
- },
169
-
170
- 'on-success': 'rgba(var(--tw-c-on-success), <alpha-value>)',
171
- 'success-container': 'rgba(var(--tw-c-success-container), <alpha-value>)',
172
- 'on-success-container': 'rgba(var(--tw-c-on-success-container), <alpha-value>)',
173
-
174
-
175
- warning: {
176
- 100: 'rgba(var(--tw-c-warning-100), <alpha-value>)',
177
- 99: 'rgba(var(--tw-c-warning-99), <alpha-value>)',
178
- 95: 'rgba(var(--tw-c-warning-95), <alpha-value>)',
179
- 90: 'rgba(var(--tw-c-warning-90), <alpha-value>)',
180
- 80: 'rgba(var(--tw-c-warning-80), <alpha-value>)',
181
- 70: 'rgba(var(--tw-c-warning-70), <alpha-value>)',
182
- 60: 'rgba(var(--tw-c-warning-60), <alpha-value>)',
183
- 50: 'rgba(var(--tw-c-warning-50), <alpha-value>)',
184
- 40: 'rgba(var(--tw-c-warning-40), <alpha-value>)',
185
- 30: 'rgba(var(--tw-c-warning-30), <alpha-value>)',
186
- 20: 'rgba(var(--tw-c-warning-20), <alpha-value>)',
187
- 10: 'rgba(var(--tw-c-warning-10), <alpha-value>)',
188
- 0: 'rgba(var(--tw-c-warning-0), <alpha-value>)',
189
- 'DEFAULT': 'rgba(var(--tw-c-warning), <alpha-value>)',
190
- },
191
-
192
- 'on-warning': 'rgba(var(--tw-c-on-warning), <alpha-value>)',
193
- 'warning-container': 'rgba(var(--tw-c-warning-container), <alpha-value>)',
194
- 'on-warning-container': 'rgba(var(--tw-c-on-warning-container), <alpha-value>)',
195
- },
196
-
197
- textColor: {
198
- inherit: 'inherit',
199
- current: 'currentColor',
200
- transparent: 'transparent',
201
-
202
- 'primary': 'rgba(var(--tw-c-on-primary), <alpha-value>)',
203
- 'primary-container': 'rgba(var(--tw-c-on-primary-container), <alpha-value>)',
204
- 'secondary': 'rgba(var(--tw-c-on-secondary), <alpha-value>)',
205
- 'secondary-container': 'rgba(var(--tw-c-on-secondary-container), <alpha-value>)',
206
- 'tertiary': 'rgba(var(--tw-c-on-tertiary), <alpha-value>)',
207
- 'tertiary-container': 'rgba(var(--tw-c-on-tertiary-container), <alpha-value>)',
208
- 'error': 'rgba(var(--tw-c-on-error), <alpha-value>)',
209
- 'error-container': 'rgba(var(--tw-c-on-error-container), <alpha-value>)',
210
- 'background': 'rgba(var(--tw-c-on-background), <alpha-value>)',
211
- 'surface': 'rgba(var(--tw-c-on-surface), <alpha-value>)',
212
- 'surface-variant': 'rgba(var(--tw-c-on-surface-variant), <alpha-value>)',
213
- 'success': 'rgba(var(--tw-c-on-success), <alpha-value>)',
214
- 'success-container': 'rgba(var(--tw-c-on-success-container), <alpha-value>)',
215
- 'warning': 'rgba(var(--tw-c-on-warning), <alpha-value>)',
216
- 'warning-container': 'rgba(var(--tw-c-on-warning-container), <alpha-value>)',
217
- 'disable': 'rgba(var(--tw-c-disable), 0.3)',
218
- },
219
-
220
- extend: {
221
- fontFamily: {
222
- 'sans': ['Inter', ...defaultTheme.fontFamily.sans],
223
- 'inter': ['Inter', ...defaultTheme.fontFamily.sans],
224
- },
225
- fontSize: {
226
- 'xs': ['.75rem', '1.125rem'],
227
- 'sm': ['.875rem', '1.3125rem'],
228
- },
229
- zIndex: { // TODO: css vars
230
- selectDropdown: 10, // TODO: move to the project level
231
- overlayZIndex: 25, // ?
232
- modal: 50,
233
- headerPopup: 45, // modal - 5 // TODO: move to the project level
234
- headerLoader: 40, // headerPopup - 5 // TODO: project level
235
- },
236
- },
237
- },
238
- plugins: [
239
- plugin(function ({ addBase, addVariant, addUtilities, theme }) {
240
- addBase({
241
- '@font-face': [
242
- {
243
- 'font-family': '"Inter"',
244
- 'font-style': 'normal',
245
- 'font-weight': '400',
246
- 'font-display': 'swap',
247
- 'src': 'url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19") format("woff2")',
248
- },
249
- {
250
- 'font-family': '"Inter"',
251
- 'font-style': 'normal',
252
- 'font-weight': '500',
253
- 'font-display': 'swap',
254
- 'src': 'url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.19") format("woff2")',
255
- },
256
- {
257
- 'font-family': '"Inter"',
258
- 'font-style': 'normal',
259
- 'font-weight': '600',
260
- 'font-display': 'swap',
261
- 'src': 'url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.19") format("woff2")',
262
- },
263
- {
264
- 'font-family': '"Inter"',
265
- 'font-style': 'normal',
266
- 'font-weight': '700',
267
- 'font-display': 'swap',
268
- 'src': 'url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.19") format("woff2")',
269
- },
270
- ],
271
-
272
- body: {
273
- fontSize: '0.875rem',
274
- lineHeight: '1.3125rem',
275
- color: 'rgb(var(--tw-c-on-background))',
276
- },
277
-
278
- // default - https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings
279
- 'h1': { // TODO: add
280
- fontSize: theme('fontSize.2xl'),
281
- fontWeight: theme('fontWeight.bold'),
282
- lineHeight: '1.8125rem',
283
- },
284
- 'h2': {
285
- fontSize: theme('fontSize.2xl'),
286
- fontWeight: theme('fontWeight.bold'),
287
- lineHeight: '1.8125rem',
288
- },
289
- 'h3': {
290
- fontSize: theme('fontSize.xl'),
291
- fontWeight: theme('fontWeight.bold'),
292
- lineHeight: '1.5rem',
293
- },
294
- 'h4': {
295
- fontSize: theme('fontSize.base'),
296
- fontWeight: theme('fontWeight.bold'),
297
- },
298
- });
299
-
300
- addVariant('disabled', '&[disabled]');
301
-
302
- addUtilities({
303
- '.visually-hidden': {
304
- width: 0,
305
- height: 0,
306
- visibility: 'hidden',
307
- },
308
- });
309
- }),
2
+ content: [
3
+ './src/**/*.{vue,js,ts,jsx,tsx}',
4
+ './node_modules/@onereach/ui-components/dist/auto/**/*.{vue,js,ts,jsx,tsx}',
5
+ ],
6
+ presets: [
7
+ require('@onereach/styles/tailwind.config.preset.js'),
310
8
  ],
311
9
  };
312
10
 
package/tailwind.config.preset.js ADDED
@@ -0,0 +1,312 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+
3
+ const defaultTheme = require('tailwindcss/defaultTheme');
4
+ const plugin = require('tailwindcss/plugin');
5
+
6
+ module.exports = {
7
+ darkMode: ['class', '[data-theme="dark-mode"]'],
8
+ theme: {
9
+ colors: {
10
+ inherit: 'inherit',
11
+ current: 'currentColor',
12
+ transparent: 'transparent',
13
+
14
+ white: 'rgba(var(--tw-c-white), <alpha-value>)',
15
+ black: 'rgba(var(--tw-c-black), <alpha-value>)',
16
+
17
+ primary: {
18
+ 100: 'rgba(var(--tw-c-primary-100), <alpha-value>)',
19
+ 99: 'rgba(var(--tw-c-primary-99), <alpha-value>)',
20
+ 95: 'rgba(var(--tw-c-primary-95), <alpha-value>)',
21
+ 90: 'rgba(var(--tw-c-primary-90), <alpha-value>)',
22
+ 80: 'rgba(var(--tw-c-primary-80), <alpha-value>)',
23
+ 70: 'rgba(var(--tw-c-primary-70), <alpha-value>)',
24
+ 60: 'rgba(var(--tw-c-primary-60), <alpha-value>)',
25
+ 50: 'rgba(var(--tw-c-primary-50), <alpha-value>)',
26
+ 40: 'rgba(var(--tw-c-primary-40), <alpha-value>)',
27
+ 30: 'rgba(var(--tw-c-primary-30), <alpha-value>)',
28
+ 20: 'rgba(var(--tw-c-primary-20), <alpha-value>)',
29
+ 10: 'rgba(var(--tw-c-primary-10), <alpha-value>)',
30
+ 0: 'rgba(var(--tw-c-primary-0), <alpha-value>)',
31
+ 'DEFAULT': 'rgba(var(--tw-c-primary), <alpha-value>)',
32
+ },
33
+
34
+ 'on-primary': 'rgba(var(--tw-c-on-primary), <alpha-value>)',
35
+ 'primary-container': 'rgba(var(--tw-c-primary-container), <alpha-value>)',
36
+ 'on-primary-container': 'rgba(var(--tw-c-on-primary-container), <alpha-value>)',
37
+
38
+ secondary: {
39
+ 100: 'rgba(var(--tw-c-secondary-100), <alpha-value>)',
40
+ 99: 'rgba(var(--tw-c-secondary-99), <alpha-value>)',
41
+ 95: 'rgba(var(--tw-c-secondary-95), <alpha-value>)',
42
+ 90: 'rgba(var(--tw-c-secondary-90), <alpha-value>)',
43
+ 80: 'rgba(var(--tw-c-secondary-80), <alpha-value>)',
44
+ 70: 'rgba(var(--tw-c-secondary-70), <alpha-value>)',
45
+ 60: 'rgba(var(--tw-c-secondary-60), <alpha-value>)',
46
+ 50: 'rgba(var(--tw-c-secondary-50), <alpha-value>)',
47
+ 40: 'rgba(var(--tw-c-secondary-40), <alpha-value>)',
48
+ 30: 'rgba(var(--tw-c-secondary-30), <alpha-value>)',
49
+ 20: 'rgba(var(--tw-c-secondary-20), <alpha-value>)',
50
+ 10: 'rgba(var(--tw-c-secondary-10), <alpha-value>)',
51
+ 0: 'rgba(var(--tw-c-secondary-0), <alpha-value>)',
52
+ 'DEFAULT': 'rgba(var(--tw-c-secondary), <alpha-value>)',
53
+ },
54
+
55
+ 'on-secondary': 'rgba(var(--tw-c-on-secondary), <alpha-value>)',
56
+ 'secondary-container': 'rgba(var(--tw-c-secondary-container), <alpha-value>)',
57
+ 'on-secondary-container': 'rgba(var(--tw-c-on-secondary-container), <alpha-value>)',
58
+
59
+ tertiary: {
60
+ 100: 'rgba(var(--tw-c-tertiary-100), <alpha-value>)',
61
+ 99: 'rgba(var(--tw-c-tertiary-99), <alpha-value>)',
62
+ 95: 'rgba(var(--tw-c-tertiary-95), <alpha-value>)',
63
+ 90: 'rgba(var(--tw-c-tertiary-90), <alpha-value>)',
64
+ 80: 'rgba(var(--tw-c-tertiary-80), <alpha-value>)',
65
+ 70: 'rgba(var(--tw-c-tertiary-70), <alpha-value>)',
66
+ 60: 'rgba(var(--tw-c-tertiary-60), <alpha-value>)',
67
+ 50: 'rgba(var(--tw-c-tertiary-50), <alpha-value>)',
68
+ 40: 'rgba(var(--tw-c-tertiary-40), <alpha-value>)',
69
+ 30: 'rgba(var(--tw-c-tertiary-30), <alpha-value>)',
70
+ 20: 'rgba(var(--tw-c-tertiary-20), <alpha-value>)',
71
+ 10: 'rgba(var(--tw-c-tertiary-10), <alpha-value>)',
72
+ 0: 'rgba(var(--tw-c-tertiary-0), <alpha-value>)',
73
+ 'DEFAULT': 'rgba(var(--tw-c-tertiary), <alpha-value>)',
74
+ },
75
+
76
+ 'on-tertiary': 'rgba(var(--tw-c-on-tertiary), <alpha-value>)',
77
+ 'tertiary-container': 'rgba(var(--tw-c-tertiary-container), <alpha-value>)',
78
+ 'on-tertiary-container': 'rgba(var(--tw-c-on-tertiary-container), <alpha-value>)',
79
+
80
+ error: {
81
+ 100: 'rgba(var(--tw-c-error-100), <alpha-value>)',
82
+ 99: 'rgba(var(--tw-c-error-99), <alpha-value>)',
83
+ 95: 'rgba(var(--tw-c-error-95), <alpha-value>)',
84
+ 90: 'rgba(var(--tw-c-error-90), <alpha-value>)',
85
+ 80: 'rgba(var(--tw-c-error-80), <alpha-value>)',
86
+ 70: 'rgba(var(--tw-c-error-70), <alpha-value>)',
87
+ 60: 'rgba(var(--tw-c-error-60), <alpha-value>)',
88
+ 50: 'rgba(var(--tw-c-error-50), <alpha-value>)',
89
+ 40: 'rgba(var(--tw-c-error-40), <alpha-value>)',
90
+ 30: 'rgba(var(--tw-c-error-30), <alpha-value>)',
91
+ 20: 'rgba(var(--tw-c-error-20), <alpha-value>)',
92
+ 10: 'rgba(var(--tw-c-error-10), <alpha-value>)',
93
+ 0: 'rgba(var(--tw-c-error-0), <alpha-value>)',
94
+ 'DEFAULT': 'rgba(var(--tw-c-error), <alpha-value>)',
95
+ },
96
+
97
+ 'on-error': 'rgba(var(--tw-c-on-error), <alpha-value>)',
98
+ 'error-container': 'rgba(var(--tw-c-error-container), <alpha-value>)',
99
+ 'on-error-container': 'rgba(var(--tw-c-on-error-container), <alpha-value>)',
100
+
101
+ neutral: {
102
+ 100: 'rgba(var(--tw-c-neutral-100), <alpha-value>)',
103
+ 99: 'rgba(var(--tw-c-neutral-99), <alpha-value>)',
104
+ 95: 'rgba(var(--tw-c-neutral-95), <alpha-value>)',
105
+ 90: 'rgba(var(--tw-c-neutral-90), <alpha-value>)',
106
+ 80: 'rgba(var(--tw-c-neutral-80), <alpha-value>)',
107
+ 70: 'rgba(var(--tw-c-neutral-70), <alpha-value>)',
108
+ 60: 'rgba(var(--tw-c-neutral-60), <alpha-value>)',
109
+ 50: 'rgba(var(--tw-c-neutral-50), <alpha-value>)',
110
+ 40: 'rgba(var(--tw-c-neutral-40), <alpha-value>)',
111
+ 30: 'rgba(var(--tw-c-neutral-30), <alpha-value>)',
112
+ 20: 'rgba(var(--tw-c-neutral-20), <alpha-value>)',
113
+ 10: 'rgba(var(--tw-c-neutral-10), <alpha-value>)',
114
+ 0: 'rgba(var(--tw-c-neutral-0), <alpha-value>)',
115
+ },
116
+
117
+ 'background': 'rgba(var(--tw-c-background), <alpha-value>)',
118
+ 'on-background': 'rgba(var(--tw-c-on-background), <alpha-value>)',
119
+
120
+ // https://github.com/csstools/postcss-color-mod-function/issues/41#issuecomment-1007309849
121
+ 'surface': {
122
+ 1: 'rgba(var(--tw-c-surface-1), <alpha-value>)',
123
+ 2: 'rgba(var(--tw-c-surface-2), <alpha-value>)',
124
+ 3: 'rgba(var(--tw-c-surface-3), <alpha-value>)',
125
+ 4: 'rgba(var(--tw-c-surface-4), <alpha-value>)',
126
+ 5: 'rgba(var(--tw-c-surface-5), <alpha-value>)',
127
+ 'DEFAULT': 'rgba(var(--tw-c-surface), <alpha-value>)',
128
+ },
129
+
130
+ 'on-surface': 'rgba(var(--tw-c-on-surface), <alpha-value>)',
131
+
132
+ 'neutral-variant': {
133
+ 100: 'rgba(var(--tw-c-neutral-variant-100), <alpha-value>)',
134
+ 99: 'rgba(var(--tw-c-neutral-variant-99), <alpha-value>)',
135
+ 95: 'rgba(var(--tw-c-neutral-variant-95), <alpha-value>)',
136
+ 90: 'rgba(var(--tw-c-neutral-variant-90), <alpha-value>)',
137
+ 80: 'rgba(var(--tw-c-neutral-variant-80), <alpha-value>)',
138
+ 70: 'rgba(var(--tw-c-neutral-variant-70), <alpha-value>)',
139
+ 60: 'rgba(var(--tw-c-neutral-variant-60), <alpha-value>)',
140
+ 50: 'rgba(var(--tw-c-neutral-variant-50), <alpha-value>)',
141
+ 40: 'rgba(var(--tw-c-neutral-variant-40), <alpha-value>)',
142
+ 30: 'rgba(var(--tw-c-neutral-variant-30), <alpha-value>)',
143
+ 20: 'rgba(var(--tw-c-neutral-variant-20), <alpha-value>)',
144
+ 10: 'rgba(var(--tw-c-neutral-variant-10), <alpha-value>)',
145
+ 0: 'rgba(var(--tw-c-neutral-variant-0), <alpha-value>)',
146
+ },
147
+
148
+ 'surface-variant': 'rgba(var(--tw-c-surface-variant), <alpha-value>)',
149
+ 'on-surface-variant': 'rgba(var(--tw-c-on-surface-variant), <alpha-value>)',
150
+ 'outline': 'rgba(var(--tw-c-outline), <alpha-value>)',
151
+ 'disable': 'rgba(var(--tw-c-disable), 0.3)',
152
+
153
+ success: {
154
+ 100: 'rgba(var(--tw-c-success-100), <alpha-value>)',
155
+ 99: 'rgba(var(--tw-c-success-99), <alpha-value>)',
156
+ 95: 'rgba(var(--tw-c-success-95), <alpha-value>)',
157
+ 90: 'rgba(var(--tw-c-success-90), <alpha-value>)',
158
+ 80: 'rgba(var(--tw-c-success-80), <alpha-value>)',
159
+ 70: 'rgba(var(--tw-c-success-70), <alpha-value>)',
160
+ 60: 'rgba(var(--tw-c-success-60), <alpha-value>)',
161
+ 50: 'rgba(var(--tw-c-success-50), <alpha-value>)',
162
+ 40: 'rgba(var(--tw-c-success-40), <alpha-value>)',
163
+ 30: 'rgba(var(--tw-c-success-30), <alpha-value>)',
164
+ 20: 'rgba(var(--tw-c-success-20), <alpha-value>)',
165
+ 10: 'rgba(var(--tw-c-success-10), <alpha-value>)',
166
+ 0: 'rgba(var(--tw-c-success-0), <alpha-value>)',
167
+ 'DEFAULT': 'rgba(var(--tw-c-success), <alpha-value>)',
168
+ },
169
+
170
+ 'on-success': 'rgba(var(--tw-c-on-success), <alpha-value>)',
171
+ 'success-container': 'rgba(var(--tw-c-success-container), <alpha-value>)',
172
+ 'on-success-container': 'rgba(var(--tw-c-on-success-container), <alpha-value>)',
173
+
174
+
175
+ warning: {
176
+ 100: 'rgba(var(--tw-c-warning-100), <alpha-value>)',
177
+ 99: 'rgba(var(--tw-c-warning-99), <alpha-value>)',
178
+ 95: 'rgba(var(--tw-c-warning-95), <alpha-value>)',
179
+ 90: 'rgba(var(--tw-c-warning-90), <alpha-value>)',
180
+ 80: 'rgba(var(--tw-c-warning-80), <alpha-value>)',
181
+ 70: 'rgba(var(--tw-c-warning-70), <alpha-value>)',
182
+ 60: 'rgba(var(--tw-c-warning-60), <alpha-value>)',
183
+ 50: 'rgba(var(--tw-c-warning-50), <alpha-value>)',
184
+ 40: 'rgba(var(--tw-c-warning-40), <alpha-value>)',
185
+ 30: 'rgba(var(--tw-c-warning-30), <alpha-value>)',
186
+ 20: 'rgba(var(--tw-c-warning-20), <alpha-value>)',
187
+ 10: 'rgba(var(--tw-c-warning-10), <alpha-value>)',
188
+ 0: 'rgba(var(--tw-c-warning-0), <alpha-value>)',
189
+ 'DEFAULT': 'rgba(var(--tw-c-warning), <alpha-value>)',
190
+ },
191
+
192
+ 'on-warning': 'rgba(var(--tw-c-on-warning), <alpha-value>)',
193
+ 'warning-container': 'rgba(var(--tw-c-warning-container), <alpha-value>)',
194
+ 'on-warning-container': 'rgba(var(--tw-c-on-warning-container), <alpha-value>)',
195
+ },
196
+
197
+ textColor: {
198
+ inherit: 'inherit',
199
+ current: 'currentColor',
200
+ transparent: 'transparent',
201
+
202
+ 'primary': 'rgba(var(--tw-c-on-primary), <alpha-value>)',
203
+ 'primary-container': 'rgba(var(--tw-c-on-primary-container), <alpha-value>)',
204
+ 'secondary': 'rgba(var(--tw-c-on-secondary), <alpha-value>)',
205
+ 'secondary-container': 'rgba(var(--tw-c-on-secondary-container), <alpha-value>)',
206
+ 'tertiary': 'rgba(var(--tw-c-on-tertiary), <alpha-value>)',
207
+ 'tertiary-container': 'rgba(var(--tw-c-on-tertiary-container), <alpha-value>)',
208
+ 'error': 'rgba(var(--tw-c-on-error), <alpha-value>)',
209
+ 'error-container': 'rgba(var(--tw-c-on-error-container), <alpha-value>)',
210
+ 'background': 'rgba(var(--tw-c-on-background), <alpha-value>)',
211
+ 'surface': 'rgba(var(--tw-c-on-surface), <alpha-value>)',
212
+ 'surface-variant': 'rgba(var(--tw-c-on-surface-variant), <alpha-value>)',
213
+ 'success': 'rgba(var(--tw-c-on-success), <alpha-value>)',
214
+ 'success-container': 'rgba(var(--tw-c-on-success-container), <alpha-value>)',
215
+ 'warning': 'rgba(var(--tw-c-on-warning), <alpha-value>)',
216
+ 'warning-container': 'rgba(var(--tw-c-on-warning-container), <alpha-value>)',
217
+ 'disable': 'rgba(var(--tw-c-disable), 0.3)',
218
+ },
219
+
220
+ extend: {
221
+ fontFamily: {
222
+ 'sans': ['Inter', ...defaultTheme.fontFamily.sans],
223
+ 'inter': ['Inter', ...defaultTheme.fontFamily.sans],
224
+ },
225
+ fontSize: {
226
+ 'xs': ['.75rem', '1.125rem'],
227
+ 'sm': ['.875rem', '1.3125rem'],
228
+ },
229
+ zIndex: { // TODO: css vars
230
+ selectDropdown: 10, // TODO: move to the project level
231
+ overlayZIndex: 25, // ?
232
+ modal: 50,
233
+ headerPopup: 45, // modal - 5 // TODO: move to the project level
234
+ headerLoader: 40, // headerPopup - 5 // TODO: project level
235
+ },
236
+ },
237
+ },
238
+ plugins: [
239
+ plugin(function ({ addBase, addVariant, addUtilities, theme }) {
240
+ addBase({
241
+ '@font-face': [
242
+ {
243
+ 'font-family': '"Inter"',
244
+ 'font-style': 'normal',
245
+ 'font-weight': '400',
246
+ 'font-display': 'swap',
247
+ 'src': 'url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19") format("woff2")',
248
+ },
249
+ {
250
+ 'font-family': '"Inter"',
251
+ 'font-style': 'normal',
252
+ 'font-weight': '500',
253
+ 'font-display': 'swap',
254
+ 'src': 'url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.19") format("woff2")',
255
+ },
256
+ {
257
+ 'font-family': '"Inter"',
258
+ 'font-style': 'normal',
259
+ 'font-weight': '600',
260
+ 'font-display': 'swap',
261
+ 'src': 'url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.19") format("woff2")',
262
+ },
263
+ {
264
+ 'font-family': '"Inter"',
265
+ 'font-style': 'normal',
266
+ 'font-weight': '700',
267
+ 'font-display': 'swap',
268
+ 'src': 'url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.19") format("woff2")',
269
+ },
270
+ ],
271
+
272
+ body: {
273
+ fontSize: '0.875rem',
274
+ lineHeight: '1.3125rem',
275
+ color: 'rgb(var(--tw-c-on-background))',
276
+ },
277
+
278
+ // default - https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings
279
+ 'h1': { // TODO: add
280
+ fontSize: theme('fontSize.2xl'),
281
+ fontWeight: theme('fontWeight.bold'),
282
+ lineHeight: '1.8125rem',
283
+ },
284
+ 'h2': {
285
+ fontSize: theme('fontSize.2xl'),
286
+ fontWeight: theme('fontWeight.bold'),
287
+ lineHeight: '1.8125rem',
288
+ },
289
+ 'h3': {
290
+ fontSize: theme('fontSize.xl'),
291
+ fontWeight: theme('fontWeight.bold'),
292
+ lineHeight: '1.5rem',
293
+ },
294
+ 'h4': {
295
+ fontSize: theme('fontSize.base'),
296
+ fontWeight: theme('fontWeight.bold'),
297
+ },
298
+ });
299
+
300
+ addVariant('disabled', '&[disabled]');
301
+
302
+ addUtilities({
303
+ '.visually-hidden': {
304
+ width: 0,
305
+ height: 0,
306
+ visibility: 'hidden',
307
+ },
308
+ });
309
+ }),
310
+ ],
311
+ };
312
+