infinity-ui-elements 1.0.1 → 1.0.3
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/dist/components/Button/Button.d.ts +18 -9
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.stories.d.ts +12 -1
- package/dist/components/Button/Button.stories.d.ts.map +1 -1
- package/dist/components/Button/index.d.ts +2 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/index.css +1 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +3504 -9
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +3522 -7
- package/dist/index.js.map +1 -1
- package/dist/lib/utils.d.ts +3 -0
- package/dist/lib/utils.d.ts.map +1 -0
- package/package.json +12 -2
- package/src/components/Button/Button.stories.tsx +411 -15
- package/src/components/Button/Button.tsx +306 -33
- package/src/components/Button/index.ts +2 -1
- package/src/index.css +543 -51
- package/src/index.ts +3 -0
- package/src/lib/utils.ts +6 -0
package/src/index.css
CHANGED
|
@@ -1,54 +1,546 @@
|
|
|
1
|
-
@import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
--color-
|
|
7
|
-
--color-
|
|
8
|
-
--color-
|
|
9
|
-
--color-
|
|
10
|
-
--color-
|
|
11
|
-
--color-
|
|
12
|
-
--color-
|
|
1
|
+
@import 'tailwindcss';
|
|
2
|
+
@theme {
|
|
3
|
+
/* PRIMITIVE COLORS */
|
|
4
|
+
|
|
5
|
+
/* Blue Night */
|
|
6
|
+
--color-blue-night-50: #E6E9EAFF;
|
|
7
|
+
--color-blue-night-100: #B3BCBEFF;
|
|
8
|
+
--color-blue-night-200: #8E9B9FFF;
|
|
9
|
+
--color-blue-night-300: #5A6E73FF;
|
|
10
|
+
--color-blue-night-400: #3A5158FF;
|
|
11
|
+
--color-blue-night-500: #09262EFF;
|
|
12
|
+
--color-blue-night-600: #08232AFF;
|
|
13
|
+
--color-blue-night-700: #061B21FF;
|
|
14
|
+
--color-blue-night-800: #051519FF;
|
|
15
|
+
--color-blue-night-900: #041013FF;
|
|
16
|
+
|
|
17
|
+
/* Teal */
|
|
18
|
+
--color-teal-50: #E8EFF1FF;
|
|
19
|
+
--color-teal-100: #B9CDD2FF;
|
|
20
|
+
--color-teal-200: #97B5BCFF;
|
|
21
|
+
--color-teal-300: #67939EFF;
|
|
22
|
+
--color-teal-400: #497E8BFF;
|
|
23
|
+
--color-teal-500: #1C5E6EFF;
|
|
24
|
+
--color-teal-600: #195664FF;
|
|
25
|
+
--color-teal-700: #14434EFF;
|
|
26
|
+
--color-teal-800: #0F343DFF;
|
|
27
|
+
--color-teal-900: #0C272EFF;
|
|
28
|
+
--color-teal-900-9: #1C5E6E17;
|
|
29
|
+
--color-teal-900-18: #1C5E6E2E;
|
|
30
|
+
|
|
31
|
+
/* Sun */
|
|
32
|
+
--color-sun-50: #FEF0EAFF;
|
|
33
|
+
--color-sun-100: #FBD0BCFF;
|
|
34
|
+
--color-sun-200: #F9B99CFF;
|
|
35
|
+
--color-sun-300: #F6986FFF;
|
|
36
|
+
--color-sun-400: #F58553FF;
|
|
37
|
+
--color-sun-500: #F26628FF;
|
|
38
|
+
--color-sun-600: #DC5D24FF;
|
|
39
|
+
--color-sun-700: #AC481CFF;
|
|
40
|
+
--color-sun-800: #853816FF;
|
|
41
|
+
--color-sun-900: #662B11FF;
|
|
42
|
+
|
|
43
|
+
/* Wine */
|
|
44
|
+
--color-wine-50: #F1EAEFFF;
|
|
45
|
+
--color-wine-100: #D5BFCDFF;
|
|
46
|
+
--color-wine-200: #C0A0B5FF;
|
|
47
|
+
--color-wine-300: #A47593FF;
|
|
48
|
+
--color-wine-400: #925A7EFF;
|
|
49
|
+
--color-wine-500: #77315EFF;
|
|
50
|
+
--color-wine-600: #6C2D56FF;
|
|
51
|
+
--color-wine-700: #542343FF;
|
|
52
|
+
--color-wine-800: #411B34FF;
|
|
53
|
+
--color-wine-900: #321527FF;
|
|
54
|
+
|
|
55
|
+
/* Ripple */
|
|
56
|
+
--color-ripple-50: #F2F6FEFF;
|
|
57
|
+
--color-ripple-100: #D5E3FCFF;
|
|
58
|
+
--color-ripple-200: #C1D5FAFF;
|
|
59
|
+
--color-ripple-300: #A5C2F8FF;
|
|
60
|
+
--color-ripple-400: #94B6F7FF;
|
|
61
|
+
--color-ripple-500: #79A4F5FF;
|
|
62
|
+
--color-ripple-600: #6E95DFFF;
|
|
63
|
+
--color-ripple-700: #5674AEFF;
|
|
64
|
+
--color-ripple-800: #435A87FF;
|
|
65
|
+
--color-ripple-900: #334567FF;
|
|
66
|
+
|
|
67
|
+
/* Grove */
|
|
68
|
+
--color-grove-50: #EBF6F2FF;
|
|
69
|
+
--color-grove-100: #C1E3D6FF;
|
|
70
|
+
--color-grove-200: #A3D6C3FF;
|
|
71
|
+
--color-grove-300: #78C3A7FF;
|
|
72
|
+
--color-grove-400: #5EB796FF;
|
|
73
|
+
--color-grove-500: #36A57CFF;
|
|
74
|
+
--color-grove-600: #319671FF;
|
|
75
|
+
--color-grove-700: #267558FF;
|
|
76
|
+
--color-grove-800: #1E5B44FF;
|
|
77
|
+
--color-grove-900: #174534FF;
|
|
78
|
+
|
|
79
|
+
/* Brick */
|
|
80
|
+
--color-brick-50: #FAECEBFF;
|
|
81
|
+
--color-brick-100: #EEC3BFFF;
|
|
82
|
+
--color-brick-200: #E6A7A1FF;
|
|
83
|
+
--color-brick-300: #DA7E76FF;
|
|
84
|
+
--color-brick-400: #D3655BFF;
|
|
85
|
+
--color-brick-500: #C83F32FF;
|
|
86
|
+
--color-brick-600: #B6392EFF;
|
|
87
|
+
--color-brick-700: #8E2D24FF;
|
|
88
|
+
--color-brick-800: #6E231CFF;
|
|
89
|
+
--color-brick-900: #541A15FF;
|
|
90
|
+
|
|
91
|
+
/* Ember */
|
|
92
|
+
--color-ember-50: #FDF5EBFF;
|
|
93
|
+
--color-ember-100: #F8E0C0FF;
|
|
94
|
+
--color-ember-200: #F4D1A2FF;
|
|
95
|
+
--color-ember-300: #F0BC78FF;
|
|
96
|
+
--color-ember-400: #EDAF5DFF;
|
|
97
|
+
--color-ember-500: #E89B35FF;
|
|
98
|
+
--color-ember-600: #D38D30FF;
|
|
99
|
+
--color-ember-700: #A56E26FF;
|
|
100
|
+
--color-ember-800: #80551DFF;
|
|
101
|
+
--color-ember-900: #614116FF;
|
|
102
|
+
|
|
103
|
+
/* Horizon */
|
|
104
|
+
--color-horizon-50: #ECF2F6FF;
|
|
105
|
+
--color-horizon-100: #C3D7E2FF;
|
|
106
|
+
--color-horizon-200: #A5C4D4FF;
|
|
107
|
+
--color-horizon-300: #7CA9C0FF;
|
|
108
|
+
--color-horizon-400: #6398B4FF;
|
|
109
|
+
--color-horizon-500: #3C7EA1FF;
|
|
110
|
+
--color-horizon-600: #377393FF;
|
|
111
|
+
--color-horizon-700: #2B5972FF;
|
|
112
|
+
--color-horizon-800: #214559FF;
|
|
113
|
+
--color-horizon-900: #193544FF;
|
|
114
|
+
|
|
115
|
+
/* Neutral */
|
|
116
|
+
--color-neutral-00: #FFFFFFFF;
|
|
117
|
+
--color-neutral-10: #FAFAFAFF;
|
|
118
|
+
--color-neutral-20: #F5F6F6FF;
|
|
119
|
+
--color-neutral-30: #EBECECFF;
|
|
120
|
+
--color-neutral-40: #DFE0E1FF;
|
|
121
|
+
--color-neutral-50: #C1C4C5FF;
|
|
122
|
+
--color-neutral-60: #B2B6B7FF;
|
|
123
|
+
--color-neutral-70: #A6AAABFF;
|
|
124
|
+
--color-neutral-80: #979C9DFF;
|
|
125
|
+
--color-neutral-90: #888E8FFF;
|
|
126
|
+
--color-neutral-100: #7A8081FF;
|
|
127
|
+
--color-neutral-200: #6B7273FF;
|
|
128
|
+
--color-neutral-300: #5C6465FF;
|
|
129
|
+
--color-neutral-400: #50585AFF;
|
|
130
|
+
--color-neutral-500: #414A4CFF;
|
|
131
|
+
--color-neutral-600: #343E40FF;
|
|
132
|
+
--color-neutral-700: #232E30FF;
|
|
133
|
+
--color-neutral-800: #142022FF;
|
|
134
|
+
--color-neutral-900: #081416FF;
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
/* SEMENTIC COLORS */
|
|
138
|
+
|
|
139
|
+
/* Surface */
|
|
140
|
+
--color-surface-fill-neutral-intense: var(--color-neutral-00);
|
|
141
|
+
--color-surface-fill-neutral-moderate: var(--color-neutral-20);
|
|
142
|
+
--color-surface-fill-neutral-subtle: var(--color-neutral-30);
|
|
143
|
+
|
|
144
|
+
--color-surface-fill-primary-intense: var(--color-blue-night-500);
|
|
145
|
+
--color-surface-fill-primary-moderate: var(--color-neutral-00);
|
|
146
|
+
|
|
147
|
+
--color-surface-outline-neutral-normal: var(--color-neutral-60);
|
|
148
|
+
--color-surface-outline-neutral-subtle: var(--color-neutral-30);
|
|
149
|
+
--color-surface-outline-neutral-muted: var(--color-neutral-10);
|
|
150
|
+
|
|
151
|
+
--color-surface-outline-primary-normal: var(--color-teal-500);
|
|
152
|
+
--color-surface-outline-primary-muted: var(--color-teal-50);
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
--color-surface-ink-neutral-normal: var(--color-neutral-900);
|
|
156
|
+
--color-surface-ink-neutral-subtle: var(--color-neutral-700);
|
|
157
|
+
--color-surface-ink-neutral-muted: var(--color-neutral-100);
|
|
158
|
+
--color-surface-ink-neutral-disabled: var(--color-neutral-50);
|
|
159
|
+
|
|
160
|
+
--color-surface-ink-primary-normal: var(--color-teal-500);
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
/* Feedback */
|
|
165
|
+
|
|
166
|
+
/* Fill */
|
|
167
|
+
--color-feedback-fill-positive-subtle: var(--color-grove-50);
|
|
168
|
+
--color-feedback-fill-positive-intense: var(--color-grove-600);
|
|
169
|
+
|
|
170
|
+
--color-feedback-fill-negative-subtle: var(--color-brick-50);
|
|
171
|
+
--color-feedback-fill-negative-intense: var(--color-brick-600);
|
|
172
|
+
|
|
173
|
+
--color-feedback-fill-notice-subtle: var(--color-ember-50);
|
|
174
|
+
--color-feedback-fill-notice-intense: var(--color-ember-600);
|
|
175
|
+
|
|
176
|
+
--color-feedback-fill-info-subtle: var(--color-horizon-50);
|
|
177
|
+
--color-feedback-fill-info-intense: var(--color-horizon-600);
|
|
178
|
+
|
|
179
|
+
--color-feedback-fill-neutral-intense: var(--color-neutral-20);
|
|
180
|
+
--color-feedback-fill-neutral-intense: var(--color-neutral-800);
|
|
181
|
+
|
|
182
|
+
/* Outline */
|
|
183
|
+
--color-feedback-outline-positive-subtle: var(--color-grove-100);
|
|
184
|
+
/* --color-feedback-outline-positive-intense: var(--color-grove-600); */
|
|
185
|
+
|
|
186
|
+
--color-feedback-outline-negative-subtle: var(--color-brick-200);
|
|
187
|
+
/* --color-feedback-outline-negative-intense: var(--color-brick-600); */
|
|
188
|
+
|
|
189
|
+
--color-feedback-outline-notice-subtle: var(--color-ember-200);
|
|
190
|
+
/* --color-feedback-outline-notice-intense: var(--color-ember-600); */
|
|
191
|
+
|
|
192
|
+
--color-feedback-outline-info-subtle: var(--color-horizon-200);
|
|
193
|
+
/* --color-feedback-outline-info-intense: var(--color-horizon-600); */
|
|
194
|
+
|
|
195
|
+
--color-feedback-outline-neutral-intense: var(--color-neutral-20);
|
|
196
|
+
/* --color-feedback-outline-neutral-intense: var(--color-neutral-800); */
|
|
197
|
+
|
|
198
|
+
/* Ink */
|
|
199
|
+
|
|
200
|
+
/* --color-feedback-ink-positive-subtle: var(--color-grove-500); */
|
|
201
|
+
--color-feedback-ink-positive-intense: var(--color-grove-500);
|
|
202
|
+
|
|
203
|
+
--color-feedback-ink-negative-subtle: var(--color-brick-500);
|
|
204
|
+
/* --color-feedback-ink-negative-intense: var(--color-brick-600); */
|
|
205
|
+
|
|
206
|
+
--color-feedback-ink-notice-subtle: var(--color-ember-500);
|
|
207
|
+
/* --color-feedback-ink-notice-intense: var(--color-ember-600); */
|
|
208
|
+
|
|
209
|
+
--color-feedback-ink-info-subtle: var(--color-horizon-500);
|
|
210
|
+
/* --color-feedback-ink-info-intense: var(--color-horizon-600); */
|
|
211
|
+
|
|
212
|
+
/* --color-feedback-ink-neutral-intense: var(--color-neutral-20); */
|
|
213
|
+
--color-feedback-ink-neutral-intense: var(--color-neutral-800);
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
/* Action */
|
|
218
|
+
|
|
219
|
+
/* Fill */
|
|
220
|
+
--color-action-fill-positive-default: var(--color-grove-500);
|
|
221
|
+
--color-action-fill-positive-hover: var(--color-grove-700);
|
|
222
|
+
--color-action-fill-positive-disabled: var(--color-grove-50);
|
|
223
|
+
--color-action-fill-positive-faded: var(--color-grove-50);
|
|
224
|
+
--color-action-fill-positive-faded-hover: var(--color-grove-300);
|
|
225
|
+
|
|
226
|
+
--color-action-fill-negative-default: var(--color-brick-500);
|
|
227
|
+
--color-action-fill-negative-hover: var(--color-brick-700);
|
|
228
|
+
--color-action-fill-negative-disabled: var(--color-brick-50);
|
|
229
|
+
--color-action-fill-negative-faded: var(--color-brick-50);
|
|
230
|
+
--color-action-fill-negative-faded-hover: var(--color-brick-300);
|
|
231
|
+
|
|
232
|
+
--color-action-fill-notice-default: var(--color-ember-500);
|
|
233
|
+
--color-action-fill-notice-hover: var(--color-ember-700);
|
|
234
|
+
--color-action-fill-notice-disabled: var(--color-ember-50);
|
|
235
|
+
--color-action-fill-notice-faded: var(--color-ember-50);
|
|
236
|
+
--color-action-fill-notice-faded-hover: var(--color-ember-300);
|
|
237
|
+
|
|
238
|
+
--color-action-fill-info-default: var(--color-horizon-500);
|
|
239
|
+
--color-action-fill-info-hover: var(--color-horizon-700);
|
|
240
|
+
--color-action-fill-info-disabled: var(--color-horizon-50);
|
|
241
|
+
--color-action-fill-info-faded: var(--color-horizon-50);
|
|
242
|
+
--color-action-fill-info-faded-hover: var(--color-horizon-300);
|
|
243
|
+
|
|
244
|
+
--color-action-fill-neutral-default: var(--color-neutral-600);
|
|
245
|
+
--color-action-fill-neutral-hover: var(--color-neutral-800);
|
|
246
|
+
--color-action-fill-neutral-disabled: var(--color-neutral-50);
|
|
247
|
+
--color-action-fill-neutral-faded: var(--color-neutral-50);
|
|
248
|
+
--color-action-fill-neutral-faded-hover: var(--color-neutral-80);
|
|
249
|
+
|
|
250
|
+
--color-action-fill-primary-default: var(--color-teal-500);
|
|
251
|
+
--color-action-fill-primary-hover: var(--color-teal-700);
|
|
252
|
+
--color-action-fill-primary-disabled: var(--color-teal-50);
|
|
253
|
+
--color-action-fill-primary-faded: var(--color-teal-50);
|
|
254
|
+
--color-action-fill-primary-faded-hover: var(--color-teal-300);
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
/* Outline */
|
|
258
|
+
--color-action-outline-positive-default: var(--color-grove-500);
|
|
259
|
+
--color-action-outline-positive-hover: var(--color-grove-700);
|
|
260
|
+
--color-action-outline-positive-disabled: var(--color-grove-200);
|
|
261
|
+
--color-action-outline-positive-faded: var(--color-grove-200);
|
|
262
|
+
--color-action-outline-positive-faded-hover: var(--color-grove-300);
|
|
263
|
+
|
|
264
|
+
--color-action-outline-negative-default: var(--color-brick-500);
|
|
265
|
+
--color-action-outline-negative-hover: var(--color-brick-700);
|
|
266
|
+
--color-action-outline-negative-disabled: var(--color-brick-50);
|
|
267
|
+
--color-action-outline-negative-faded: var(--color-brick-200);
|
|
268
|
+
--color-action-outline-negative-faded-hover: var(--color-brick-300);
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
--color-action-outline-notice-default: var(--color-ember-500);
|
|
272
|
+
--color-action-outline-notice-hover: var(--color-ember-700);
|
|
273
|
+
--color-action-outline-notice-disabled: var(--color-ember-50);
|
|
274
|
+
--color-action-outline-notice-faded: var(--color-ember-200);
|
|
275
|
+
--color-action-outline-notice-faded-hover: var(--color-ember-300);
|
|
276
|
+
|
|
277
|
+
|
|
278
|
+
--color-action-outline-info-default: var(--color-horizon-500);
|
|
279
|
+
--color-action-outline-info-hover: var(--color-horizon-700);
|
|
280
|
+
--color-action-outline-info-disabled: var(--color-horizon-50);
|
|
281
|
+
--color-action-outline-info-faded: var(--color-horizon-200);
|
|
282
|
+
--color-action-outline-info-faded-hover: var(--color-horizon-300);
|
|
283
|
+
|
|
284
|
+
|
|
285
|
+
--color-action-outline-neutral-default: var(--color-neutral-600);
|
|
286
|
+
--color-action-outline-neutral-hover: var(--color-neutral-800);
|
|
287
|
+
--color-action-outline-neutral-disabled: var(--color-neutral-50);
|
|
288
|
+
--color-action-outline-neutral-faded: var(--color-neutral-70);
|
|
289
|
+
--color-action-outline-neutral-faded-hover: var(--color-neutral-80);
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
/* Ink */
|
|
293
|
+
|
|
294
|
+
--color-action-ink-positive-normal: var(--color-grove-700);
|
|
295
|
+
--color-action-ink-positive-subtle: var(--color-grove-600);
|
|
296
|
+
--color-action-ink-positive-muted: var(--color-grove-400);
|
|
297
|
+
--color-action-ink-positive-disabled: var(--color-grove-200);
|
|
298
|
+
|
|
299
|
+
--color-action-ink-negative-normal: var(--color-brick-600);
|
|
300
|
+
--color-action-ink-negative-subtle: var(--color-brick-600);
|
|
301
|
+
--color-action-ink-negative-muted: var(--color-brick-400);
|
|
302
|
+
--color-action-ink-negative-disabled: var(--color-brick-200);
|
|
303
|
+
|
|
304
|
+
|
|
305
|
+
--color-action-ink-notice-normal: var(--color-ember-600);
|
|
306
|
+
--color-action-ink-notice-subtle: var(--color-ember-600);
|
|
307
|
+
--color-action-ink-notice-muted: var(--color-ember-400);
|
|
308
|
+
--color-action-ink-notice-disabled: var(--color-ember-200);
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
--color-action-ink-info-normal: var(--color-horizon-700);
|
|
312
|
+
--color-action-ink-info-subtle: var(--color-horizon-600);
|
|
313
|
+
--color-action-ink-info-muted: var(--color-horizon-400);
|
|
314
|
+
--color-action-ink-info-disabled: var(--color-horizon-200);
|
|
315
|
+
|
|
316
|
+
|
|
13
317
|
|
|
14
|
-
|
|
15
|
-
--
|
|
16
|
-
--
|
|
318
|
+
--color-action-ink-neutral-normal: var(--color-neutral-900);
|
|
319
|
+
--color-action-ink-neutral-subtle: var(--color-neutral-700);
|
|
320
|
+
--color-action-ink-neutral-muted: var(--color-neutral-400);
|
|
321
|
+
--color-action-ink-neutral-disabled: var(--color-neutral-60);
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
--color-action-ink-primary-normal: var(--color-teal-600);
|
|
325
|
+
--color-action-ink-primary-subtle: var(--color-teal-500);
|
|
326
|
+
--color-action-ink-primary-muted: var(--color-teal-400);
|
|
327
|
+
--color-action-ink-primary-disabled: var(--color-teal-100);
|
|
328
|
+
|
|
329
|
+
--color-action-ink-on-primary-normal: var(--color-neutral-00);
|
|
330
|
+
--color-action-ink-on-primary-subtle: var(--color-neutral-20);
|
|
331
|
+
--color-action-ink-on-primary-muted: var(--color-neutral-60);
|
|
332
|
+
--color-action-ink-on-primary-disabled: var(--color-neutral-100);
|
|
333
|
+
|
|
334
|
+
|
|
335
|
+
|
|
336
|
+
|
|
337
|
+
|
|
338
|
+
|
|
339
|
+
|
|
340
|
+
/* Size */
|
|
341
|
+
--size-0: 0px;
|
|
342
|
+
--size-1: 1px;
|
|
343
|
+
--size-2: 2px;
|
|
344
|
+
--size-4: 4px;
|
|
345
|
+
--size-6: 6px;
|
|
346
|
+
--size-8: 8px;
|
|
347
|
+
--size-12: 12px;
|
|
348
|
+
--size-14: 14px;
|
|
349
|
+
--size-16: 16px;
|
|
350
|
+
--size-20: 20px;
|
|
351
|
+
--size-24: 96px;
|
|
352
|
+
--size-28: 28px;
|
|
353
|
+
--size-32: 32px;
|
|
354
|
+
--size-36: 36px;
|
|
355
|
+
--size-40: 40px;
|
|
356
|
+
--size-44: 44px;
|
|
357
|
+
--size-48: 48px;
|
|
358
|
+
--size-52: 52px;
|
|
359
|
+
--size-56: 56px;
|
|
360
|
+
--size-60: 60px;
|
|
361
|
+
--size-64: 64px;
|
|
362
|
+
--size-72: 72px;
|
|
363
|
+
--size-80: 80px;
|
|
364
|
+
--size-100: 100px;
|
|
365
|
+
--size-120: 120px;
|
|
366
|
+
--size-1000: 1000px;
|
|
367
|
+
|
|
368
|
+
--size-full: 100%;
|
|
369
|
+
--size-screen: 100vh;
|
|
370
|
+
--size-min-content: min-content;
|
|
371
|
+
--size-max-content: max-content;
|
|
372
|
+
--size-fit-content: fit-content;
|
|
373
|
+
--size-content: content;
|
|
374
|
+
--size-auto: auto;
|
|
375
|
+
--size-inherit: inherit;
|
|
376
|
+
--size-initial: initial;
|
|
377
|
+
|
|
378
|
+
--spacing-0: 0px;
|
|
379
|
+
--spacing-1: 2px;
|
|
380
|
+
--spacing-2: 4px;
|
|
381
|
+
--spacing-3: 8px;
|
|
382
|
+
--spacing-4: 12px;
|
|
383
|
+
--spacing-5: 16px;
|
|
384
|
+
--spacing-6: 20px;
|
|
385
|
+
--spacing-7: 24px;
|
|
386
|
+
--spacing-8: 32px;
|
|
387
|
+
--spacing-9: 40px;
|
|
388
|
+
--spacing-10: 48px;
|
|
389
|
+
--spacing-11: 56px;
|
|
390
|
+
|
|
391
|
+
|
|
392
|
+
|
|
393
|
+
--border-width-none: 0px;
|
|
394
|
+
--border-width-thinner: 0.5px;
|
|
395
|
+
--border-width-thin: 1px;
|
|
396
|
+
--border-width-thick: 1.5px;
|
|
397
|
+
--border-width-thicker: 2px;
|
|
398
|
+
|
|
399
|
+
|
|
400
|
+
--radius-none: 0px;
|
|
401
|
+
--radius-xsmall: 1px;
|
|
402
|
+
--radius-small: 2px;
|
|
403
|
+
--radius-medium: 4px;
|
|
404
|
+
--radius-large: 6px;
|
|
405
|
+
--radius-xlarge: 8px;
|
|
406
|
+
--radius-2xlarge: 12px;
|
|
407
|
+
--radius-3xlarge: 16px;
|
|
408
|
+
--radius-max: 1000px;
|
|
409
|
+
|
|
410
|
+
|
|
411
|
+
--icon-size-xsmall: 8px;
|
|
412
|
+
--icon-size-small: 12px;
|
|
413
|
+
--icon-size-medium: 16px;
|
|
414
|
+
--icon-size-large: 20px;
|
|
415
|
+
--icon-size-xlarge: 24px;
|
|
416
|
+
--icon-size-2xlarge: 32px;
|
|
417
|
+
|
|
418
|
+
|
|
419
|
+
|
|
420
|
+
|
|
421
|
+
|
|
422
|
+
|
|
423
|
+
--font-functional: "Clash Grotesk", system-ui, sans-serif;
|
|
424
|
+
--font-display: "Switzer", system-ui, sans-serif;
|
|
425
|
+
|
|
426
|
+
|
|
427
|
+
--font-size-25: 10px;
|
|
428
|
+
--font-size-50: 11px;
|
|
429
|
+
--font-size-75: 12px;
|
|
430
|
+
--font-size-100: 14px;
|
|
431
|
+
--font-size-200: 16px;
|
|
432
|
+
--font-size-300: 18px;
|
|
433
|
+
--font-size-400: 20px;
|
|
434
|
+
--font-size-500: 24px;
|
|
435
|
+
--font-size-600: 32px;
|
|
436
|
+
--font-size-700: 40px;
|
|
437
|
+
--font-size-800: 48px;
|
|
438
|
+
--font-size-900: 56px;
|
|
439
|
+
--font-size-1000: 64px;
|
|
440
|
+
--font-size-1100: 72px;
|
|
441
|
+
|
|
442
|
+
|
|
443
|
+
--font-weight-regular: 400;
|
|
444
|
+
--font-wieght-medium: 500;
|
|
445
|
+
--font-wieght-semibold: 600;
|
|
446
|
+
--font-wieght-bold: 700;
|
|
447
|
+
|
|
448
|
+
|
|
449
|
+
--line-height-00: 0px;
|
|
450
|
+
--line-height-25: 14px;
|
|
451
|
+
--line-height-50: 16px;
|
|
452
|
+
--line-height-75: 18px;
|
|
453
|
+
--line-height-100: 20px;
|
|
454
|
+
--line-height-200: 24px;
|
|
455
|
+
--line-height-300: 24px;
|
|
456
|
+
--line-height-400: 26px;
|
|
457
|
+
--line-height-500: 32px;
|
|
458
|
+
--line-height-600: 38px;
|
|
459
|
+
--line-height-700: 46px;
|
|
460
|
+
--line-height-800: 56px;
|
|
461
|
+
--line-height-900: 64px;
|
|
462
|
+
--line-height-1000: 70px;
|
|
463
|
+
--line-height-1100: 78px;
|
|
464
|
+
|
|
465
|
+
|
|
466
|
+
--paragraph-spacing-00: 0px;
|
|
467
|
+
--paragraph-spacing-100: 8px;
|
|
468
|
+
--paragraph-spacing-200: 10px;
|
|
469
|
+
--paragraph-spacing-300: 11px;
|
|
470
|
+
--paragraph-spacing-400: 12px;
|
|
471
|
+
|
|
472
|
+
|
|
473
|
+
/* optionally override Tailwind defaults */
|
|
474
|
+
/* --font-display: var(--font-functional);
|
|
475
|
+
--font-sans: var(--font-display); */
|
|
476
|
+
/* --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; */
|
|
477
|
+
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
@layer base {
|
|
481
|
+
h1{
|
|
482
|
+
@apply font-medium
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
@layer components {
|
|
487
|
+
.btn-primary {
|
|
488
|
+
background-color: var(--color-blue-night-500);
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
@layer utilities{
|
|
494
|
+
.primary-gradient {
|
|
495
|
+
background: linear-gradient(to right, var(--color-teal-300), var(--color-teal-700));
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
|
|
500
|
+
|
|
501
|
+
|
|
502
|
+
|
|
503
|
+
|
|
504
|
+
@media (min-width: 767px) { /* sm */
|
|
505
|
+
@theme {
|
|
506
|
+
--font-size-25: 10px;
|
|
507
|
+
--font-size-50: 11px;
|
|
508
|
+
--font-size-75: 12px;
|
|
509
|
+
--font-size-100: 14px;
|
|
510
|
+
--font-size-200: 16px;
|
|
511
|
+
--font-size-300: 18px;
|
|
512
|
+
--font-size-400: 18px;
|
|
513
|
+
--font-size-500: 20px;
|
|
514
|
+
--font-size-600: 24px;
|
|
515
|
+
--font-size-700: 32px;
|
|
516
|
+
--font-size-800: 34px;
|
|
517
|
+
--font-size-900: 36px;
|
|
518
|
+
--font-size-1000: 38px;
|
|
519
|
+
--font-size-1100: 40px;
|
|
520
|
+
|
|
521
|
+
|
|
522
|
+
--line-height-00: 0px;
|
|
523
|
+
--line-height-25: 14px;
|
|
524
|
+
--line-height-50: 16px;
|
|
525
|
+
--line-height-75: 18px;
|
|
526
|
+
--line-height-100: 20px;
|
|
527
|
+
--line-height-200: 24px;
|
|
528
|
+
--line-height-300: 22px;
|
|
529
|
+
--line-height-400: 24px;
|
|
530
|
+
--line-height-500: 26px;
|
|
531
|
+
--line-height-600: 32px;
|
|
532
|
+
--line-height-700: 38px;
|
|
533
|
+
--line-height-800: 40px;
|
|
534
|
+
--line-height-900: 42px;
|
|
535
|
+
--line-height-1000: 46px;
|
|
536
|
+
--line-height-1100: 48px;
|
|
537
|
+
}
|
|
17
538
|
}
|
|
18
539
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
@utility bg-light { background-color: var(--color-light); }
|
|
27
|
-
@utility bg-dark { background-color: var(--color-dark); }
|
|
28
|
-
|
|
29
|
-
@utility text-primary { color: var(--color-primary); }
|
|
30
|
-
@utility text-secondary { color: var(--color-secondary); }
|
|
31
|
-
@utility text-success { color: var(--color-success); }
|
|
32
|
-
@utility text-danger { color: var(--color-danger); }
|
|
33
|
-
@utility text-warning { color: var(--color-warning); }
|
|
34
|
-
@utility text-info { color: var(--color-info); }
|
|
35
|
-
@utility text-light { color: var(--color-light); }
|
|
36
|
-
@utility text-dark { color: var(--color-dark); }
|
|
37
|
-
|
|
38
|
-
@utility border-primary { border-color: var(--color-primary); }
|
|
39
|
-
@utility border-secondary { border-color: var(--color-secondary); }
|
|
40
|
-
@utility border-success { border-color: var(--color-success); }
|
|
41
|
-
@utility border-danger { border-color: var(--color-danger); }
|
|
42
|
-
@utility border-warning { border-color: var(--color-warning); }
|
|
43
|
-
@utility border-info { border-color: var(--color-info); }
|
|
44
|
-
@utility border-light { border-color: var(--color-light); }
|
|
45
|
-
@utility border-dark { border-color: var(--color-dark); }
|
|
46
|
-
|
|
47
|
-
@utility ring-primary { --tw-ring-color: var(--color-primary); }
|
|
48
|
-
@utility ring-secondary { --tw-ring-color: var(--color-secondary); }
|
|
49
|
-
@utility ring-success { --tw-ring-color: var(--color-success); }
|
|
50
|
-
@utility ring-danger { --tw-ring-color: var(--color-danger); }
|
|
51
|
-
@utility ring-warning { --tw-ring-color: var(--color-warning); }
|
|
52
|
-
@utility ring-info { --tw-ring-color: var(--color-info); }
|
|
53
|
-
@utility ring-light { --tw-ring-color: var(--color-light); }
|
|
54
|
-
@utility ring-dark { --tw-ring-color: var(--color-dark); }
|
|
540
|
+
|
|
541
|
+
|
|
542
|
+
|
|
543
|
+
|
|
544
|
+
|
|
545
|
+
|
|
546
|
+
|
package/src/index.ts
CHANGED