@techv/design-system 0.1.4 → 0.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 (3) hide show
  1. package/README.md +185 -234
  2. package/dist/utility.css +100 -0
  3. package/package.json +6 -4
package/README.md CHANGED
@@ -30,6 +30,12 @@ Import the global CSS in your app entry point. This loads the CSS custom propert
30
30
  import '@techv/design-system/styles.css';
31
31
  ```
32
32
 
33
+ To use utility classes (className-based styling), also import:
34
+
35
+ ```tsx
36
+ import '@techv/design-system/utility.css';
37
+ ```
38
+
33
39
  ---
34
40
 
35
41
  ## Components
@@ -127,109 +133,30 @@ import { IconButton } from '@techv/design-system';
127
133
 
128
134
  ---
129
135
 
130
- ## Design Tokens
131
-
132
- ### Setup
133
-
134
- ```tsx
135
- import '@techv/design-system/styles.css';
136
- ```
137
-
138
- ### Available exports
139
-
140
- | Export | Purpose | Example |
141
- |---|---|---|
142
- | `colors` | Full color palette | `colors.red[500]` → `'#EF4444'` |
143
- | `bg` | Background colors (alias of colors) | `bg.indigo[50]` → `'#EEF2FF'` |
144
- | `tx` | Text colors (alias of colors) | `tx.gray[700]` → `'#374151'` |
145
- | `bd` | Border colors (alias of colors) | `bd.gray[200]` → `'#E5E7EB'` |
146
- | `fl` | SVG fill colors (alias of colors) | `fl.green[400]` → `'#4ADE80'` |
147
- | `spacing` | 4px-base numeric scale | `spacing[4]` → `'16px'` |
148
- | `fs` | Font sizes | `fs.sm` → `'14px'` |
149
- | `fw` | Font weights | `fw[7]` → `'700'` |
150
- | `lh` | Line heights | `lh.base` → `1.5` |
151
- | `ta` | Text alignment | `ta.c` → `'center'` |
152
- | `br` | Border radius | `br.full` → `'9999px'` |
153
- | `bw` | Border widths | `bw[1]` → `'1px'` |
154
- | `sh` | Shadows | `sh[3]` → md elevation |
155
- | `op` | Opacity | `op[50]` → `'0.5'` |
156
- | `duration` | Animation durations | `duration.normal` → `'200ms'` |
157
- | `ease` | Easing curves | `ease.standard` |
158
-
159
- ### CSS Custom Properties
160
-
161
- All tokens are also available as CSS variables:
162
-
163
- ```css
164
- /* Colors */
165
- background-color: var(--indigo-500);
166
- color: var(--gray-700);
167
- border-color: var(--red-200);
168
-
169
- /* Spacing */
170
- padding: var(--spacing-4); /* 16px */
171
- gap: var(--spacing-2); /* 8px */
172
-
173
- /* Typography */
174
- font-size: var(--fs-lg); /* 18px */
175
- font-weight: var(--fw-6); /* 600 */
176
-
177
- /* Border radius / shadow */
178
- border-radius: var(--br-lg); /* 8px */
179
- box-shadow: var(--sh-3);
180
- ```
181
-
182
- ### JavaScript Tokens
136
+ ## Utility Classes
183
137
 
184
- #### Inline styles
138
+ Import `@techv/design-system/utility.css` to use className-based styling. Classes map directly to design tokens.
185
139
 
186
- Use tokens directly in React `style` props:
140
+ ### Badge
187
141
 
188
142
  ```tsx
189
- import { bg, tx, spacing, br, fs, fw } from '@techv/design-system';
190
-
191
- function Badge({ children }: { children: React.ReactNode }) {
192
- return (
193
- <span
194
- style={{
195
- backgroundColor: bg.indigo[50],
196
- color: tx.indigo[700],
197
- padding: `${spacing[1]} ${spacing[2]}`,
198
- borderRadius: br.full,
199
- fontSize: fs.xs,
200
- fontWeight: fw[5],
201
- }}
202
- >
203
- {children}
204
- </span>
205
- );
206
- }
143
+ <span className="bg-indigo-50 tx-indigo-700 px-2 py-1 br-full fs-xs fw-5">
144
+ New
145
+ </span>
207
146
  ```
208
147
 
209
- #### Alert / status banner
148
+ ### Alert / status banner
210
149
 
211
150
  ```tsx
212
- import { bg, tx, bd, spacing, br, fs, bw } from '@techv/design-system';
213
-
214
- type AlertType = 'success' | 'danger' | 'warning';
151
+ function Alert({ type, message }: { type: 'success' | 'danger' | 'warning'; message: string }) {
152
+ const styles = {
153
+ success: 'bg-green-50 tx-green-700 bd-green-300 border bw-1',
154
+ danger: 'bg-red-50 tx-red-700 bd-red-300 border bw-1',
155
+ warning: 'bg-amber-50 tx-amber-700 bd-amber-300 border bw-1',
156
+ };
215
157
 
216
- const alertMap: Record<AlertType, React.CSSProperties> = {
217
- success: { backgroundColor: bg.green[50], color: tx.green[700], border: `${bw[1]} solid ${bd.green[300]}` },
218
- danger: { backgroundColor: bg.red[50], color: tx.red[700], border: `${bw[1]} solid ${bd.red[300]}` },
219
- warning: { backgroundColor: bg.amber[50], color: tx.amber[700], border: `${bw[1]} solid ${bd.amber[300]}` },
220
- };
221
-
222
- function Alert({ type, message }: { type: AlertType; message: string }) {
223
158
  return (
224
- <div
225
- role="alert"
226
- style={{
227
- ...alertMap[type],
228
- padding: `${spacing[2]} ${spacing[4]}`,
229
- borderRadius: br.md,
230
- fontSize: fs.sm,
231
- }}
232
- >
159
+ <div role="alert" className={`${styles[type]} px-4 py-2 br-md fs-sm`}>
233
160
  {message}
234
161
  </div>
235
162
  );
@@ -240,195 +167,195 @@ function Alert({ type, message }: { type: AlertType; message: string }) {
240
167
  <Alert type="warning" message="Your session expires soon." />
241
168
  ```
242
169
 
243
- #### Card component
170
+ ### Card
244
171
 
245
172
  ```tsx
246
- import { bg, tx, bd, spacing, br, sh, fs, fw, bw } from '@techv/design-system';
247
-
248
173
  function Card({ title, body }: { title: string; body: string }) {
249
174
  return (
250
- <div
251
- style={{
252
- backgroundColor: bg.white,
253
- border: `${bw[1]} solid ${bd.gray[200]}`,
254
- borderRadius: br['2xl'],
255
- padding: spacing[8],
256
- boxShadow: sh[3],
257
- maxWidth: '400px',
258
- }}
259
- >
260
- <h2
261
- style={{
262
- margin: 0,
263
- fontSize: fs.lg,
264
- fontWeight: fw[6],
265
- color: tx.gray[900],
266
- marginBottom: spacing[2],
267
- }}
268
- >
269
- {title}
270
- </h2>
271
- <p
272
- style={{
273
- margin: 0,
274
- fontSize: fs.sm,
275
- color: tx.gray[500],
276
- lineHeight: 1.6,
277
- }}
278
- >
279
- {body}
280
- </p>
175
+ <div className="bg-white bd-gray-200 border bw-1 br-2xl p-8 sh-3">
176
+ <h2 className="fs-lg fw-6 tx-gray-900 mb-2">{title}</h2>
177
+ <p className="fs-sm tx-gray-500 lh-relaxed">{body}</p>
281
178
  </div>
282
179
  );
283
180
  }
284
181
  ```
285
182
 
286
- #### Tag
183
+ ### Tag
287
184
 
288
185
  ```tsx
289
- import { bg, tx, bd, spacing, br, fs, fw, bw } from '@techv/design-system';
290
-
291
186
  function Tag({ label }: { label: string }) {
292
187
  return (
293
- <span
294
- style={{
295
- backgroundColor: bg.gray[100],
296
- color: tx.gray[700],
297
- padding: `${spacing[1]} ${spacing[2]}`,
298
- borderRadius: br.md,
299
- border: `${bw[1]} solid ${bd.gray[200]}`,
300
- fontSize: fs.xs,
301
- fontWeight: fw[5],
302
- }}
303
- >
188
+ <span className="bg-gray-100 tx-gray-700 px-2 py-1 br-md bd-gray-200 border bw-1 fs-xs fw-5">
304
189
  {label}
305
190
  </span>
306
191
  );
307
192
  }
308
193
  ```
309
194
 
310
- #### Animated element
195
+ ### Flex layout
311
196
 
312
197
  ```tsx
313
- import { bg, br, spacing, duration, ease } from '@techv/design-system';
314
-
315
- function FadeInBox({ children }: { children: React.ReactNode }) {
316
- return (
317
- <div
318
- style={{
319
- padding: spacing[6],
320
- backgroundColor: bg.indigo[50],
321
- borderRadius: br.xl,
322
- transition: `opacity ${duration.normal} ${ease.standard}`,
323
- }}
324
- >
325
- {children}
326
- </div>
327
- );
328
- }
198
+ <div className="flex items-center gap-4 px-4 py-2">
199
+ <span className="fw-6 tx-gray-900">Title</span>
200
+ <span className="tx-gray-500 fs-sm">Subtitle</span>
201
+ </div>
329
202
  ```
330
203
 
331
- #### Quick reference
204
+ ---
205
+
206
+ ## Class Reference
332
207
 
333
- ```tsx
334
- import { bg, tx, bd, fl, spacing, fs, fw, lh, ta, br, bw, sh, op, duration, ease } from '@techv/design-system';
208
+ ### Colors
335
209
 
336
- bg.indigo[50]
337
- tx.gray[700]
338
- bd.gray[200]
339
- fl.green[400]
340
- bg.red[500]
341
- bg.white
342
- bg.black
343
-
344
- spacing[1]
345
- spacing[2]
346
- spacing[4]
347
- spacing[6]
348
- spacing[8]
349
- spacing.full
350
-
351
- fs.xs
352
- fs.lg
353
- fw[4]
354
- lh.tight
355
- ta.c
356
-
357
- br.sm
358
- bw[1]
359
- sh[1]
360
- op[50]
361
-
362
- duration.fast
363
- ease.standard
364
- ```
210
+ | Pattern | Example | Property |
211
+ |---|---|---|
212
+ | `bg-{color}-{weight}` | `bg-indigo-500` | `background-color` |
213
+ | `tx-{color}-{weight}` | `tx-gray-700` | `color` |
214
+ | `bd-{color}-{weight}` | `bd-gray-200` | `border-color` |
215
+ | `bg-white` / `bg-black` | — | `background-color` |
216
+ | `tx-white` / `tx-black` | — | `color` |
365
217
 
366
- ### Token Reference
218
+ Available colors: `red` `orange` `amber` `yellow` `lime` `green` `teal` `cyan` `sky` `blue` `indigo` `violet` `purple` `pink` `rose` `slate` `gray` `zinc`
367
219
 
368
- #### Colors
220
+ Weights: `50` `100` `200` `300` `400` `500` `600` `700` `800` `900`
369
221
 
370
- | Token | Value |
371
- |---|---|
372
- | `brand 50–900` | Indigo scale |
373
- | `success 50, 500` | Green |
374
- | `danger 50, 500` | Red |
375
- | `warning 50, 500` | Amber |
376
- | `info 50, 500` | Blue |
377
- | `gray 50–900` | Neutral gray scale |
222
+ ### Spacing
223
+
224
+ | Pattern | Example | Values |
225
+ |---|---|---|
226
+ | `p-{n}` | `p-4` → 16px | 0–32 |
227
+ | `px-{n}` | `px-2` → 8px | 0–32 |
228
+ | `py-{n}` | `py-1` → 4px | 0–32 |
229
+ | `pt/pb/pl/pr-{n}` | `pt-2` | 0–32 |
230
+ | `m-{n}` | `m-4` | 0–32 |
231
+ | `mx-{n}` / `my-{n}` | `mx-auto` | 0–32 + auto |
232
+ | `mt/mb/ml/mr-{n}` | `mb-2` | 0–32 |
233
+ | `gap-{n}` / `gap-x-{n}` / `gap-y-{n}` | `gap-4` | 0–32 |
378
234
 
379
- #### Spacing
235
+ Spacing values: 0=0px · 0.5=2px · 1=4px · 1.5=6px · 2=8px · 2.5=10px · 3=12px · 4=16px · 5=20px · 6=24px · 8=32px · 10=40px · 12=48px · 16=64px
380
236
 
381
- | Token | Value |
237
+ ### Typography
238
+
239
+ | Class | Value |
240
+ |---|---|
241
+ | `fs-xs` | 12px |
242
+ | `fs-sm` | 14px |
243
+ | `fs-md` | 16px |
244
+ | `fs-lg` | 18px |
245
+ | `fs-xl` | 20px |
246
+ | `fs-2xl` | 24px |
247
+ | `fs-3xl` | 30px |
248
+ | `fs-4xl` | 36px |
249
+ | `fs-5xl` | 48px |
250
+ | `fw-3` | 300 |
251
+ | `fw-4` | 400 |
252
+ | `fw-5` | 500 |
253
+ | `fw-6` | 600 |
254
+ | `fw-7` | 700 |
255
+ | `fw-8` | 800 |
256
+ | `fw-9` | 900 |
257
+ | `lh-tight` | 1.25 |
258
+ | `lh-base` | 1.5 |
259
+ | `lh-relaxed` | 1.625 |
260
+ | `ta-l` / `ta-c` / `ta-r` | text-align |
261
+
262
+ ### Border
263
+
264
+ | Class | Value |
265
+ |---|---|
266
+ | `border` | `border-style: solid` |
267
+ | `border-t/b/l/r` | per-side solid border |
268
+ | `bw-1` | 1px |
269
+ | `bw-2` | 2px |
270
+ | `bw-4` | 4px |
271
+ | `br-none` | 0px |
272
+ | `br-sm` | 2px |
273
+ | `br-md` | 4px |
274
+ | `br-lg` | 8px |
275
+ | `br-xl` | 12px |
276
+ | `br-2xl` | 16px |
277
+ | `br-full` | 9999px |
278
+
279
+ ### Shadow & Opacity
280
+
281
+ | Class | Description |
382
282
  |---|---|
383
- | `2xs` | 2px |
384
- | `xs` | 4px |
385
- | `sm` | 8px |
386
- | `md` | 16px |
387
- | `lg` | 24px |
388
- | `xl` | 32px |
389
- | `2xl` | 48px |
390
- | `3xl` | 64px |
391
-
392
- #### Border radius
393
-
394
- | Token | Value |
283
+ | `sh-1` – `sh-5` | Elevation levels |
284
+ | `sh-none` | No shadow |
285
+ | `op-0` – `op-100` | Opacity (0–1) |
286
+
287
+ ### Layout
288
+
289
+ | Class | Value |
395
290
  |---|---|
396
- | `none` | 0 |
397
- | `xs` | 2px |
398
- | `sm` | 4px |
399
- | `md` | 6px |
400
- | `lg` | 8px |
401
- | `xl` | 12px |
402
- | `2xl` | 16px |
403
- | `full` | 9999px |
291
+ | `flex` | `display: flex` |
292
+ | `inline-flex` | `display: inline-flex` |
293
+ | `block` | `display: block` |
294
+ | `hidden` | `display: none` |
295
+ | `flex-row` | `flex-direction: row` |
296
+ | `flex-col` | `flex-direction: column` |
297
+ | `flex-wrap` | `flex-wrap: wrap` |
298
+ | `items-center` | `align-items: center` |
299
+ | `items-start` | `align-items: flex-start` |
300
+ | `justify-center` | `justify-content: center` |
301
+ | `justify-between` | `justify-content: space-between` |
302
+ | `justify-end` | `justify-content: flex-end` |
303
+ | `relative` | `position: relative` |
304
+ | `absolute` | `position: absolute` |
305
+ | `w-full` | `width: 100%` |
306
+ | `h-full` | `height: 100%` |
404
307
 
405
308
  ---
406
309
 
407
- ## Dark mode
310
+ ## CSS Custom Properties
408
311
 
409
- The library ships with a built-in dark mode. Toggle it by setting `data-theme="dark"` on any ancestor element (typically `<html>` or `<body>`).
312
+ All tokens are also available as CSS variables:
410
313
 
411
- ```tsx
412
- document.documentElement.setAttribute('data-theme', 'dark');
314
+ ```css
315
+ background-color: var(--indigo-500);
316
+ color: var(--gray-700);
317
+ border-color: var(--red-200);
413
318
 
414
- document.documentElement.removeAttribute('data-theme');
415
- ```
319
+ padding: var(--spacing-4); /* 16px */
320
+ gap: var(--spacing-2); /* 8px */
416
321
 
417
- All components and CSS custom properties respond automatically.
322
+ font-size: var(--fs-lg); /* 18px */
323
+ font-weight: var(--fw-6); /* 600 */
324
+
325
+ border-radius: var(--br-lg); /* 8px */
326
+ box-shadow: var(--sh-3);
327
+ ```
418
328
 
419
329
  ---
420
330
 
421
- ## TypeScript
331
+ ## JavaScript Tokens
422
332
 
423
- Full TypeScript support is included. All component props and token types are exported.
333
+ Import token values for use in styled-components or dynamic styles:
424
334
 
425
335
  ```tsx
426
- import type { ButtonProps, IconButtonProps } from '@techv/design-system';
336
+ import { bg, tx, bd, fl, spacing, fs, fw, lh, ta, br, bw, sh, op, duration, ease } from '@techv/design-system';
427
337
  ```
428
338
 
429
- ---
339
+ | Export | Purpose | Example |
340
+ |---|---|---|
341
+ | `colors` | Full color palette | `colors.red[500]` → `'#EF4444'` |
342
+ | `bg` | Background colors (alias of colors) | `bg.indigo[50]` → `'#EEF2FF'` |
343
+ | `tx` | Text colors (alias of colors) | `tx.gray[700]` → `'#374151'` |
344
+ | `bd` | Border colors (alias of colors) | `bd.gray[200]` → `'#E5E7EB'` |
345
+ | `fl` | SVG fill colors (alias of colors) | `fl.green[400]` → `'#4ADE80'` |
346
+ | `spacing` | 4px-base numeric scale | `spacing[4]` → `'16px'` |
347
+ | `fs` | Font sizes | `fs.sm` → `'14px'` |
348
+ | `fw` | Font weights | `fw[7]` → `'700'` |
349
+ | `lh` | Line heights | `lh.base` → `1.5` |
350
+ | `ta` | Text alignment | `ta.c` → `'center'` |
351
+ | `br` | Border radius | `br.full` → `'9999px'` |
352
+ | `bw` | Border widths | `bw[1]` → `'1px'` |
353
+ | `sh` | Shadows | `sh[3]` → md elevation |
354
+ | `op` | Opacity | `op[50]` → `'0.5'` |
355
+ | `duration` | Animation durations | `duration.normal` → `'200ms'` |
356
+ | `ease` | Easing curves | `ease.standard` |
430
357
 
431
- ## Using tokens in styled-components
358
+ ### Using tokens in styled-components
432
359
 
433
360
  ```tsx
434
361
  import styled from 'styled-components';
@@ -453,3 +380,27 @@ const Body = styled.p`
453
380
  color: ${tx.gray[500]};
454
381
  `;
455
382
  ```
383
+
384
+ ---
385
+
386
+ ## Dark mode
387
+
388
+ The library ships with a built-in dark mode. Toggle it by setting `data-theme="dark"` on any ancestor element (typically `<html>` or `<body>`).
389
+
390
+ ```tsx
391
+ document.documentElement.setAttribute('data-theme', 'dark');
392
+
393
+ document.documentElement.removeAttribute('data-theme');
394
+ ```
395
+
396
+ All components and CSS custom properties respond automatically.
397
+
398
+ ---
399
+
400
+ ## TypeScript
401
+
402
+ Full TypeScript support is included. All component props and token types are exported.
403
+
404
+ ```tsx
405
+ import type { ButtonProps, IconButtonProps } from '@techv/design-system';
406
+ ```
package/dist/utility.css ADDED
@@ -0,0 +1,100 @@
1
+ .bg-red-50{background-color:var(--red-50)}.bg-red-100{background-color:var(--red-100)}.bg-red-200{background-color:var(--red-200)}.bg-red-300{background-color:var(--red-300)}.bg-red-400{background-color:var(--red-400)}.bg-red-500{background-color:var(--red-500)}.bg-red-600{background-color:var(--red-600)}.bg-red-700{background-color:var(--red-700)}.bg-red-800{background-color:var(--red-800)}.bg-red-900{background-color:var(--red-900)}
2
+ .bg-orange-50{background-color:var(--orange-50)}.bg-orange-100{background-color:var(--orange-100)}.bg-orange-200{background-color:var(--orange-200)}.bg-orange-300{background-color:var(--orange-300)}.bg-orange-400{background-color:var(--orange-400)}.bg-orange-500{background-color:var(--orange-500)}.bg-orange-600{background-color:var(--orange-600)}.bg-orange-700{background-color:var(--orange-700)}.bg-orange-800{background-color:var(--orange-800)}.bg-orange-900{background-color:var(--orange-900)}
3
+ .bg-amber-50{background-color:var(--amber-50)}.bg-amber-100{background-color:var(--amber-100)}.bg-amber-200{background-color:var(--amber-200)}.bg-amber-300{background-color:var(--amber-300)}.bg-amber-400{background-color:var(--amber-400)}.bg-amber-500{background-color:var(--amber-500)}.bg-amber-600{background-color:var(--amber-600)}.bg-amber-700{background-color:var(--amber-700)}.bg-amber-800{background-color:var(--amber-800)}.bg-amber-900{background-color:var(--amber-900)}
4
+ .bg-yellow-50{background-color:var(--yellow-50)}.bg-yellow-100{background-color:var(--yellow-100)}.bg-yellow-200{background-color:var(--yellow-200)}.bg-yellow-300{background-color:var(--yellow-300)}.bg-yellow-400{background-color:var(--yellow-400)}.bg-yellow-500{background-color:var(--yellow-500)}.bg-yellow-600{background-color:var(--yellow-600)}.bg-yellow-700{background-color:var(--yellow-700)}.bg-yellow-800{background-color:var(--yellow-800)}.bg-yellow-900{background-color:var(--yellow-900)}
5
+ .bg-lime-50{background-color:var(--lime-50)}.bg-lime-100{background-color:var(--lime-100)}.bg-lime-200{background-color:var(--lime-200)}.bg-lime-300{background-color:var(--lime-300)}.bg-lime-400{background-color:var(--lime-400)}.bg-lime-500{background-color:var(--lime-500)}.bg-lime-600{background-color:var(--lime-600)}.bg-lime-700{background-color:var(--lime-700)}.bg-lime-800{background-color:var(--lime-800)}.bg-lime-900{background-color:var(--lime-900)}
6
+ .bg-green-50{background-color:var(--green-50)}.bg-green-100{background-color:var(--green-100)}.bg-green-200{background-color:var(--green-200)}.bg-green-300{background-color:var(--green-300)}.bg-green-400{background-color:var(--green-400)}.bg-green-500{background-color:var(--green-500)}.bg-green-600{background-color:var(--green-600)}.bg-green-700{background-color:var(--green-700)}.bg-green-800{background-color:var(--green-800)}.bg-green-900{background-color:var(--green-900)}
7
+ .bg-teal-50{background-color:var(--teal-50)}.bg-teal-100{background-color:var(--teal-100)}.bg-teal-200{background-color:var(--teal-200)}.bg-teal-300{background-color:var(--teal-300)}.bg-teal-400{background-color:var(--teal-400)}.bg-teal-500{background-color:var(--teal-500)}.bg-teal-600{background-color:var(--teal-600)}.bg-teal-700{background-color:var(--teal-700)}.bg-teal-800{background-color:var(--teal-800)}.bg-teal-900{background-color:var(--teal-900)}
8
+ .bg-cyan-50{background-color:var(--cyan-50)}.bg-cyan-100{background-color:var(--cyan-100)}.bg-cyan-200{background-color:var(--cyan-200)}.bg-cyan-300{background-color:var(--cyan-300)}.bg-cyan-400{background-color:var(--cyan-400)}.bg-cyan-500{background-color:var(--cyan-500)}.bg-cyan-600{background-color:var(--cyan-600)}.bg-cyan-700{background-color:var(--cyan-700)}.bg-cyan-800{background-color:var(--cyan-800)}.bg-cyan-900{background-color:var(--cyan-900)}
9
+ .bg-sky-50{background-color:var(--sky-50)}.bg-sky-100{background-color:var(--sky-100)}.bg-sky-200{background-color:var(--sky-200)}.bg-sky-300{background-color:var(--sky-300)}.bg-sky-400{background-color:var(--sky-400)}.bg-sky-500{background-color:var(--sky-500)}.bg-sky-600{background-color:var(--sky-600)}.bg-sky-700{background-color:var(--sky-700)}.bg-sky-800{background-color:var(--sky-800)}.bg-sky-900{background-color:var(--sky-900)}
10
+ .bg-blue-50{background-color:var(--blue-50)}.bg-blue-100{background-color:var(--blue-100)}.bg-blue-200{background-color:var(--blue-200)}.bg-blue-300{background-color:var(--blue-300)}.bg-blue-400{background-color:var(--blue-400)}.bg-blue-500{background-color:var(--blue-500)}.bg-blue-600{background-color:var(--blue-600)}.bg-blue-700{background-color:var(--blue-700)}.bg-blue-800{background-color:var(--blue-800)}.bg-blue-900{background-color:var(--blue-900)}
11
+ .bg-indigo-50{background-color:var(--indigo-50)}.bg-indigo-100{background-color:var(--indigo-100)}.bg-indigo-200{background-color:var(--indigo-200)}.bg-indigo-300{background-color:var(--indigo-300)}.bg-indigo-400{background-color:var(--indigo-400)}.bg-indigo-500{background-color:var(--indigo-500)}.bg-indigo-600{background-color:var(--indigo-600)}.bg-indigo-700{background-color:var(--indigo-700)}.bg-indigo-800{background-color:var(--indigo-800)}.bg-indigo-900{background-color:var(--indigo-900)}
12
+ .bg-violet-50{background-color:var(--violet-50)}.bg-violet-100{background-color:var(--violet-100)}.bg-violet-200{background-color:var(--violet-200)}.bg-violet-300{background-color:var(--violet-300)}.bg-violet-400{background-color:var(--violet-400)}.bg-violet-500{background-color:var(--violet-500)}.bg-violet-600{background-color:var(--violet-600)}.bg-violet-700{background-color:var(--violet-700)}.bg-violet-800{background-color:var(--violet-800)}.bg-violet-900{background-color:var(--violet-900)}
13
+ .bg-purple-50{background-color:var(--purple-50)}.bg-purple-100{background-color:var(--purple-100)}.bg-purple-200{background-color:var(--purple-200)}.bg-purple-300{background-color:var(--purple-300)}.bg-purple-400{background-color:var(--purple-400)}.bg-purple-500{background-color:var(--purple-500)}.bg-purple-600{background-color:var(--purple-600)}.bg-purple-700{background-color:var(--purple-700)}.bg-purple-800{background-color:var(--purple-800)}.bg-purple-900{background-color:var(--purple-900)}
14
+ .bg-pink-50{background-color:var(--pink-50)}.bg-pink-100{background-color:var(--pink-100)}.bg-pink-200{background-color:var(--pink-200)}.bg-pink-300{background-color:var(--pink-300)}.bg-pink-400{background-color:var(--pink-400)}.bg-pink-500{background-color:var(--pink-500)}.bg-pink-600{background-color:var(--pink-600)}.bg-pink-700{background-color:var(--pink-700)}.bg-pink-800{background-color:var(--pink-800)}.bg-pink-900{background-color:var(--pink-900)}
15
+ .bg-rose-50{background-color:var(--rose-50)}.bg-rose-100{background-color:var(--rose-100)}.bg-rose-200{background-color:var(--rose-200)}.bg-rose-300{background-color:var(--rose-300)}.bg-rose-400{background-color:var(--rose-400)}.bg-rose-500{background-color:var(--rose-500)}.bg-rose-600{background-color:var(--rose-600)}.bg-rose-700{background-color:var(--rose-700)}.bg-rose-800{background-color:var(--rose-800)}.bg-rose-900{background-color:var(--rose-900)}
16
+ .bg-slate-50{background-color:var(--slate-50)}.bg-slate-100{background-color:var(--slate-100)}.bg-slate-200{background-color:var(--slate-200)}.bg-slate-300{background-color:var(--slate-300)}.bg-slate-400{background-color:var(--slate-400)}.bg-slate-500{background-color:var(--slate-500)}.bg-slate-600{background-color:var(--slate-600)}.bg-slate-700{background-color:var(--slate-700)}.bg-slate-800{background-color:var(--slate-800)}.bg-slate-900{background-color:var(--slate-900)}
17
+ .bg-gray-50{background-color:var(--gray-50)}.bg-gray-100{background-color:var(--gray-100)}.bg-gray-200{background-color:var(--gray-200)}.bg-gray-300{background-color:var(--gray-300)}.bg-gray-400{background-color:var(--gray-400)}.bg-gray-500{background-color:var(--gray-500)}.bg-gray-600{background-color:var(--gray-600)}.bg-gray-700{background-color:var(--gray-700)}.bg-gray-800{background-color:var(--gray-800)}.bg-gray-900{background-color:var(--gray-900)}
18
+ .bg-zinc-50{background-color:var(--zinc-50)}.bg-zinc-100{background-color:var(--zinc-100)}.bg-zinc-200{background-color:var(--zinc-200)}.bg-zinc-300{background-color:var(--zinc-300)}.bg-zinc-400{background-color:var(--zinc-400)}.bg-zinc-500{background-color:var(--zinc-500)}.bg-zinc-600{background-color:var(--zinc-600)}.bg-zinc-700{background-color:var(--zinc-700)}.bg-zinc-800{background-color:var(--zinc-800)}.bg-zinc-900{background-color:var(--zinc-900)}
19
+ .bg-white{background-color:#ffffff}.bg-black{background-color:#000000}
20
+
21
+ .tx-red-50{color:var(--red-50)}.tx-red-100{color:var(--red-100)}.tx-red-200{color:var(--red-200)}.tx-red-300{color:var(--red-300)}.tx-red-400{color:var(--red-400)}.tx-red-500{color:var(--red-500)}.tx-red-600{color:var(--red-600)}.tx-red-700{color:var(--red-700)}.tx-red-800{color:var(--red-800)}.tx-red-900{color:var(--red-900)}
22
+ .tx-orange-50{color:var(--orange-50)}.tx-orange-100{color:var(--orange-100)}.tx-orange-200{color:var(--orange-200)}.tx-orange-300{color:var(--orange-300)}.tx-orange-400{color:var(--orange-400)}.tx-orange-500{color:var(--orange-500)}.tx-orange-600{color:var(--orange-600)}.tx-orange-700{color:var(--orange-700)}.tx-orange-800{color:var(--orange-800)}.tx-orange-900{color:var(--orange-900)}
23
+ .tx-amber-50{color:var(--amber-50)}.tx-amber-100{color:var(--amber-100)}.tx-amber-200{color:var(--amber-200)}.tx-amber-300{color:var(--amber-300)}.tx-amber-400{color:var(--amber-400)}.tx-amber-500{color:var(--amber-500)}.tx-amber-600{color:var(--amber-600)}.tx-amber-700{color:var(--amber-700)}.tx-amber-800{color:var(--amber-800)}.tx-amber-900{color:var(--amber-900)}
24
+ .tx-yellow-50{color:var(--yellow-50)}.tx-yellow-100{color:var(--yellow-100)}.tx-yellow-200{color:var(--yellow-200)}.tx-yellow-300{color:var(--yellow-300)}.tx-yellow-400{color:var(--yellow-400)}.tx-yellow-500{color:var(--yellow-500)}.tx-yellow-600{color:var(--yellow-600)}.tx-yellow-700{color:var(--yellow-700)}.tx-yellow-800{color:var(--yellow-800)}.tx-yellow-900{color:var(--yellow-900)}
25
+ .tx-lime-50{color:var(--lime-50)}.tx-lime-100{color:var(--lime-100)}.tx-lime-200{color:var(--lime-200)}.tx-lime-300{color:var(--lime-300)}.tx-lime-400{color:var(--lime-400)}.tx-lime-500{color:var(--lime-500)}.tx-lime-600{color:var(--lime-600)}.tx-lime-700{color:var(--lime-700)}.tx-lime-800{color:var(--lime-800)}.tx-lime-900{color:var(--lime-900)}
26
+ .tx-green-50{color:var(--green-50)}.tx-green-100{color:var(--green-100)}.tx-green-200{color:var(--green-200)}.tx-green-300{color:var(--green-300)}.tx-green-400{color:var(--green-400)}.tx-green-500{color:var(--green-500)}.tx-green-600{color:var(--green-600)}.tx-green-700{color:var(--green-700)}.tx-green-800{color:var(--green-800)}.tx-green-900{color:var(--green-900)}
27
+ .tx-teal-50{color:var(--teal-50)}.tx-teal-100{color:var(--teal-100)}.tx-teal-200{color:var(--teal-200)}.tx-teal-300{color:var(--teal-300)}.tx-teal-400{color:var(--teal-400)}.tx-teal-500{color:var(--teal-500)}.tx-teal-600{color:var(--teal-600)}.tx-teal-700{color:var(--teal-700)}.tx-teal-800{color:var(--teal-800)}.tx-teal-900{color:var(--teal-900)}
28
+ .tx-cyan-50{color:var(--cyan-50)}.tx-cyan-100{color:var(--cyan-100)}.tx-cyan-200{color:var(--cyan-200)}.tx-cyan-300{color:var(--cyan-300)}.tx-cyan-400{color:var(--cyan-400)}.tx-cyan-500{color:var(--cyan-500)}.tx-cyan-600{color:var(--cyan-600)}.tx-cyan-700{color:var(--cyan-700)}.tx-cyan-800{color:var(--cyan-800)}.tx-cyan-900{color:var(--cyan-900)}
29
+ .tx-sky-50{color:var(--sky-50)}.tx-sky-100{color:var(--sky-100)}.tx-sky-200{color:var(--sky-200)}.tx-sky-300{color:var(--sky-300)}.tx-sky-400{color:var(--sky-400)}.tx-sky-500{color:var(--sky-500)}.tx-sky-600{color:var(--sky-600)}.tx-sky-700{color:var(--sky-700)}.tx-sky-800{color:var(--sky-800)}.tx-sky-900{color:var(--sky-900)}
30
+ .tx-blue-50{color:var(--blue-50)}.tx-blue-100{color:var(--blue-100)}.tx-blue-200{color:var(--blue-200)}.tx-blue-300{color:var(--blue-300)}.tx-blue-400{color:var(--blue-400)}.tx-blue-500{color:var(--blue-500)}.tx-blue-600{color:var(--blue-600)}.tx-blue-700{color:var(--blue-700)}.tx-blue-800{color:var(--blue-800)}.tx-blue-900{color:var(--blue-900)}
31
+ .tx-indigo-50{color:var(--indigo-50)}.tx-indigo-100{color:var(--indigo-100)}.tx-indigo-200{color:var(--indigo-200)}.tx-indigo-300{color:var(--indigo-300)}.tx-indigo-400{color:var(--indigo-400)}.tx-indigo-500{color:var(--indigo-500)}.tx-indigo-600{color:var(--indigo-600)}.tx-indigo-700{color:var(--indigo-700)}.tx-indigo-800{color:var(--indigo-800)}.tx-indigo-900{color:var(--indigo-900)}
32
+ .tx-violet-50{color:var(--violet-50)}.tx-violet-100{color:var(--violet-100)}.tx-violet-200{color:var(--violet-200)}.tx-violet-300{color:var(--violet-300)}.tx-violet-400{color:var(--violet-400)}.tx-violet-500{color:var(--violet-500)}.tx-violet-600{color:var(--violet-600)}.tx-violet-700{color:var(--violet-700)}.tx-violet-800{color:var(--violet-800)}.tx-violet-900{color:var(--violet-900)}
33
+ .tx-purple-50{color:var(--purple-50)}.tx-purple-100{color:var(--purple-100)}.tx-purple-200{color:var(--purple-200)}.tx-purple-300{color:var(--purple-300)}.tx-purple-400{color:var(--purple-400)}.tx-purple-500{color:var(--purple-500)}.tx-purple-600{color:var(--purple-600)}.tx-purple-700{color:var(--purple-700)}.tx-purple-800{color:var(--purple-800)}.tx-purple-900{color:var(--purple-900)}
34
+ .tx-pink-50{color:var(--pink-50)}.tx-pink-100{color:var(--pink-100)}.tx-pink-200{color:var(--pink-200)}.tx-pink-300{color:var(--pink-300)}.tx-pink-400{color:var(--pink-400)}.tx-pink-500{color:var(--pink-500)}.tx-pink-600{color:var(--pink-600)}.tx-pink-700{color:var(--pink-700)}.tx-pink-800{color:var(--pink-800)}.tx-pink-900{color:var(--pink-900)}
35
+ .tx-rose-50{color:var(--rose-50)}.tx-rose-100{color:var(--rose-100)}.tx-rose-200{color:var(--rose-200)}.tx-rose-300{color:var(--rose-300)}.tx-rose-400{color:var(--rose-400)}.tx-rose-500{color:var(--rose-500)}.tx-rose-600{color:var(--rose-600)}.tx-rose-700{color:var(--rose-700)}.tx-rose-800{color:var(--rose-800)}.tx-rose-900{color:var(--rose-900)}
36
+ .tx-slate-50{color:var(--slate-50)}.tx-slate-100{color:var(--slate-100)}.tx-slate-200{color:var(--slate-200)}.tx-slate-300{color:var(--slate-300)}.tx-slate-400{color:var(--slate-400)}.tx-slate-500{color:var(--slate-500)}.tx-slate-600{color:var(--slate-600)}.tx-slate-700{color:var(--slate-700)}.tx-slate-800{color:var(--slate-800)}.tx-slate-900{color:var(--slate-900)}
37
+ .tx-gray-50{color:var(--gray-50)}.tx-gray-100{color:var(--gray-100)}.tx-gray-200{color:var(--gray-200)}.tx-gray-300{color:var(--gray-300)}.tx-gray-400{color:var(--gray-400)}.tx-gray-500{color:var(--gray-500)}.tx-gray-600{color:var(--gray-600)}.tx-gray-700{color:var(--gray-700)}.tx-gray-800{color:var(--gray-800)}.tx-gray-900{color:var(--gray-900)}
38
+ .tx-zinc-50{color:var(--zinc-50)}.tx-zinc-100{color:var(--zinc-100)}.tx-zinc-200{color:var(--zinc-200)}.tx-zinc-300{color:var(--zinc-300)}.tx-zinc-400{color:var(--zinc-400)}.tx-zinc-500{color:var(--zinc-500)}.tx-zinc-600{color:var(--zinc-600)}.tx-zinc-700{color:var(--zinc-700)}.tx-zinc-800{color:var(--zinc-800)}.tx-zinc-900{color:var(--zinc-900)}
39
+ .tx-white{color:#ffffff}.tx-black{color:#000000}
40
+
41
+ .bd-red-50{border-color:var(--red-50)}.bd-red-100{border-color:var(--red-100)}.bd-red-200{border-color:var(--red-200)}.bd-red-300{border-color:var(--red-300)}.bd-red-400{border-color:var(--red-400)}.bd-red-500{border-color:var(--red-500)}.bd-red-600{border-color:var(--red-600)}.bd-red-700{border-color:var(--red-700)}.bd-red-800{border-color:var(--red-800)}.bd-red-900{border-color:var(--red-900)}
42
+ .bd-orange-50{border-color:var(--orange-50)}.bd-orange-100{border-color:var(--orange-100)}.bd-orange-200{border-color:var(--orange-200)}.bd-orange-300{border-color:var(--orange-300)}.bd-orange-400{border-color:var(--orange-400)}.bd-orange-500{border-color:var(--orange-500)}.bd-orange-600{border-color:var(--orange-600)}.bd-orange-700{border-color:var(--orange-700)}.bd-orange-800{border-color:var(--orange-800)}.bd-orange-900{border-color:var(--orange-900)}
43
+ .bd-amber-50{border-color:var(--amber-50)}.bd-amber-100{border-color:var(--amber-100)}.bd-amber-200{border-color:var(--amber-200)}.bd-amber-300{border-color:var(--amber-300)}.bd-amber-400{border-color:var(--amber-400)}.bd-amber-500{border-color:var(--amber-500)}.bd-amber-600{border-color:var(--amber-600)}.bd-amber-700{border-color:var(--amber-700)}.bd-amber-800{border-color:var(--amber-800)}.bd-amber-900{border-color:var(--amber-900)}
44
+ .bd-green-50{border-color:var(--green-50)}.bd-green-100{border-color:var(--green-100)}.bd-green-200{border-color:var(--green-200)}.bd-green-300{border-color:var(--green-300)}.bd-green-400{border-color:var(--green-400)}.bd-green-500{border-color:var(--green-500)}.bd-green-600{border-color:var(--green-600)}.bd-green-700{border-color:var(--green-700)}.bd-green-800{border-color:var(--green-800)}.bd-green-900{border-color:var(--green-900)}
45
+ .bd-blue-50{border-color:var(--blue-50)}.bd-blue-100{border-color:var(--blue-100)}.bd-blue-200{border-color:var(--blue-200)}.bd-blue-300{border-color:var(--blue-300)}.bd-blue-400{border-color:var(--blue-400)}.bd-blue-500{border-color:var(--blue-500)}.bd-blue-600{border-color:var(--blue-600)}.bd-blue-700{border-color:var(--blue-700)}.bd-blue-800{border-color:var(--blue-800)}.bd-blue-900{border-color:var(--blue-900)}
46
+ .bd-indigo-50{border-color:var(--indigo-50)}.bd-indigo-100{border-color:var(--indigo-100)}.bd-indigo-200{border-color:var(--indigo-200)}.bd-indigo-300{border-color:var(--indigo-300)}.bd-indigo-400{border-color:var(--indigo-400)}.bd-indigo-500{border-color:var(--indigo-500)}.bd-indigo-600{border-color:var(--indigo-600)}.bd-indigo-700{border-color:var(--indigo-700)}.bd-indigo-800{border-color:var(--indigo-800)}.bd-indigo-900{border-color:var(--indigo-900)}
47
+ .bd-gray-50{border-color:var(--gray-50)}.bd-gray-100{border-color:var(--gray-100)}.bd-gray-200{border-color:var(--gray-200)}.bd-gray-300{border-color:var(--gray-300)}.bd-gray-400{border-color:var(--gray-400)}.bd-gray-500{border-color:var(--gray-500)}.bd-gray-600{border-color:var(--gray-600)}.bd-gray-700{border-color:var(--gray-700)}.bd-gray-800{border-color:var(--gray-800)}.bd-gray-900{border-color:var(--gray-900)}
48
+ .bd-slate-50{border-color:var(--slate-50)}.bd-slate-100{border-color:var(--slate-100)}.bd-slate-200{border-color:var(--slate-200)}.bd-slate-300{border-color:var(--slate-300)}.bd-slate-400{border-color:var(--slate-400)}.bd-slate-500{border-color:var(--slate-500)}.bd-slate-600{border-color:var(--slate-600)}.bd-slate-700{border-color:var(--slate-700)}.bd-slate-800{border-color:var(--slate-800)}.bd-slate-900{border-color:var(--slate-900)}
49
+ .bd-white{border-color:#ffffff}.bd-black{border-color:#000000}
50
+
51
+ .fl-red-500{fill:var(--red-500)}.fl-green-500{fill:var(--green-500)}.fl-blue-500{fill:var(--blue-500)}.fl-indigo-500{fill:var(--indigo-500)}.fl-gray-400{fill:var(--gray-400)}.fl-gray-500{fill:var(--gray-500)}.fl-gray-600{fill:var(--gray-600)}.fl-white{fill:#ffffff}.fl-black{fill:#000000}
52
+ .fl-red-400{fill:var(--red-400)}.fl-green-400{fill:var(--green-400)}.fl-blue-400{fill:var(--blue-400)}.fl-amber-400{fill:var(--amber-400)}.fl-orange-500{fill:var(--orange-500)}.fl-pink-500{fill:var(--pink-500)}
53
+
54
+ .p-0{padding:var(--spacing-0)}.p-1{padding:var(--spacing-1)}.p-2{padding:var(--spacing-2)}.p-3{padding:var(--spacing-3)}.p-4{padding:var(--spacing-4)}.p-5{padding:var(--spacing-5)}.p-6{padding:var(--spacing-6)}.p-7{padding:var(--spacing-7)}.p-8{padding:var(--spacing-8)}.p-9{padding:var(--spacing-9)}.p-10{padding:var(--spacing-10)}.p-12{padding:var(--spacing-12)}.p-14{padding:var(--spacing-14)}.p-16{padding:var(--spacing-16)}.p-20{padding:var(--spacing-20)}.p-24{padding:var(--spacing-24)}.p-32{padding:var(--spacing-32)}
55
+ .px-0{padding-left:var(--spacing-0);padding-right:var(--spacing-0)}.px-1{padding-left:var(--spacing-1);padding-right:var(--spacing-1)}.px-2{padding-left:var(--spacing-2);padding-right:var(--spacing-2)}.px-3{padding-left:var(--spacing-3);padding-right:var(--spacing-3)}.px-4{padding-left:var(--spacing-4);padding-right:var(--spacing-4)}.px-5{padding-left:var(--spacing-5);padding-right:var(--spacing-5)}.px-6{padding-left:var(--spacing-6);padding-right:var(--spacing-6)}.px-8{padding-left:var(--spacing-8);padding-right:var(--spacing-8)}.px-10{padding-left:var(--spacing-10);padding-right:var(--spacing-10)}.px-12{padding-left:var(--spacing-12);padding-right:var(--spacing-12)}.px-16{padding-left:var(--spacing-16);padding-right:var(--spacing-16)}
56
+ .py-0{padding-top:var(--spacing-0);padding-bottom:var(--spacing-0)}.py-1{padding-top:var(--spacing-1);padding-bottom:var(--spacing-1)}.py-2{padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}.py-3{padding-top:var(--spacing-3);padding-bottom:var(--spacing-3)}.py-4{padding-top:var(--spacing-4);padding-bottom:var(--spacing-4)}.py-5{padding-top:var(--spacing-5);padding-bottom:var(--spacing-5)}.py-6{padding-top:var(--spacing-6);padding-bottom:var(--spacing-6)}.py-8{padding-top:var(--spacing-8);padding-bottom:var(--spacing-8)}.py-10{padding-top:var(--spacing-10);padding-bottom:var(--spacing-10)}.py-12{padding-top:var(--spacing-12);padding-bottom:var(--spacing-12)}
57
+ .pt-0{padding-top:var(--spacing-0)}.pt-1{padding-top:var(--spacing-1)}.pt-2{padding-top:var(--spacing-2)}.pt-3{padding-top:var(--spacing-3)}.pt-4{padding-top:var(--spacing-4)}.pt-5{padding-top:var(--spacing-5)}.pt-6{padding-top:var(--spacing-6)}.pt-8{padding-top:var(--spacing-8)}.pt-10{padding-top:var(--spacing-10)}.pt-12{padding-top:var(--spacing-12)}
58
+ .pb-0{padding-bottom:var(--spacing-0)}.pb-1{padding-bottom:var(--spacing-1)}.pb-2{padding-bottom:var(--spacing-2)}.pb-3{padding-bottom:var(--spacing-3)}.pb-4{padding-bottom:var(--spacing-4)}.pb-5{padding-bottom:var(--spacing-5)}.pb-6{padding-bottom:var(--spacing-6)}.pb-8{padding-bottom:var(--spacing-8)}.pb-10{padding-bottom:var(--spacing-10)}.pb-12{padding-bottom:var(--spacing-12)}
59
+ .pl-0{padding-left:var(--spacing-0)}.pl-1{padding-left:var(--spacing-1)}.pl-2{padding-left:var(--spacing-2)}.pl-3{padding-left:var(--spacing-3)}.pl-4{padding-left:var(--spacing-4)}.pl-5{padding-left:var(--spacing-5)}.pl-6{padding-left:var(--spacing-6)}.pl-8{padding-left:var(--spacing-8)}.pl-10{padding-left:var(--spacing-10)}.pl-12{padding-left:var(--spacing-12)}
60
+ .pr-0{padding-right:var(--spacing-0)}.pr-1{padding-right:var(--spacing-1)}.pr-2{padding-right:var(--spacing-2)}.pr-3{padding-right:var(--spacing-3)}.pr-4{padding-right:var(--spacing-4)}.pr-5{padding-right:var(--spacing-5)}.pr-6{padding-right:var(--spacing-6)}.pr-8{padding-right:var(--spacing-8)}.pr-10{padding-right:var(--spacing-10)}.pr-12{padding-right:var(--spacing-12)}
61
+
62
+ .m-0{margin:var(--spacing-0)}.m-1{margin:var(--spacing-1)}.m-2{margin:var(--spacing-2)}.m-3{margin:var(--spacing-3)}.m-4{margin:var(--spacing-4)}.m-5{margin:var(--spacing-5)}.m-6{margin:var(--spacing-6)}.m-7{margin:var(--spacing-7)}.m-8{margin:var(--spacing-8)}.m-9{margin:var(--spacing-9)}.m-10{margin:var(--spacing-10)}.m-12{margin:var(--spacing-12)}.m-16{margin:var(--spacing-16)}.m-auto{margin:auto}
63
+ .mx-0{margin-left:var(--spacing-0);margin-right:var(--spacing-0)}.mx-1{margin-left:var(--spacing-1);margin-right:var(--spacing-1)}.mx-2{margin-left:var(--spacing-2);margin-right:var(--spacing-2)}.mx-3{margin-left:var(--spacing-3);margin-right:var(--spacing-3)}.mx-4{margin-left:var(--spacing-4);margin-right:var(--spacing-4)}.mx-6{margin-left:var(--spacing-6);margin-right:var(--spacing-6)}.mx-8{margin-left:var(--spacing-8);margin-right:var(--spacing-8)}.mx-auto{margin-left:auto;margin-right:auto}
64
+ .my-0{margin-top:var(--spacing-0);margin-bottom:var(--spacing-0)}.my-1{margin-top:var(--spacing-1);margin-bottom:var(--spacing-1)}.my-2{margin-top:var(--spacing-2);margin-bottom:var(--spacing-2)}.my-3{margin-top:var(--spacing-3);margin-bottom:var(--spacing-3)}.my-4{margin-top:var(--spacing-4);margin-bottom:var(--spacing-4)}.my-6{margin-top:var(--spacing-6);margin-bottom:var(--spacing-6)}.my-8{margin-top:var(--spacing-8);margin-bottom:var(--spacing-8)}.my-auto{margin-top:auto;margin-bottom:auto}
65
+ .mt-0{margin-top:var(--spacing-0)}.mt-1{margin-top:var(--spacing-1)}.mt-2{margin-top:var(--spacing-2)}.mt-3{margin-top:var(--spacing-3)}.mt-4{margin-top:var(--spacing-4)}.mt-5{margin-top:var(--spacing-5)}.mt-6{margin-top:var(--spacing-6)}.mt-8{margin-top:var(--spacing-8)}.mt-10{margin-top:var(--spacing-10)}.mt-12{margin-top:var(--spacing-12)}.mt-auto{margin-top:auto}
66
+ .mb-0{margin-bottom:var(--spacing-0)}.mb-1{margin-bottom:var(--spacing-1)}.mb-2{margin-bottom:var(--spacing-2)}.mb-3{margin-bottom:var(--spacing-3)}.mb-4{margin-bottom:var(--spacing-4)}.mb-5{margin-bottom:var(--spacing-5)}.mb-6{margin-bottom:var(--spacing-6)}.mb-8{margin-bottom:var(--spacing-8)}.mb-10{margin-bottom:var(--spacing-10)}.mb-12{margin-bottom:var(--spacing-12)}.mb-auto{margin-bottom:auto}
67
+ .ml-0{margin-left:var(--spacing-0)}.ml-1{margin-left:var(--spacing-1)}.ml-2{margin-left:var(--spacing-2)}.ml-3{margin-left:var(--spacing-3)}.ml-4{margin-left:var(--spacing-4)}.ml-6{margin-left:var(--spacing-6)}.ml-8{margin-left:var(--spacing-8)}.ml-auto{margin-left:auto}
68
+ .mr-0{margin-right:var(--spacing-0)}.mr-1{margin-right:var(--spacing-1)}.mr-2{margin-right:var(--spacing-2)}.mr-3{margin-right:var(--spacing-3)}.mr-4{margin-right:var(--spacing-4)}.mr-6{margin-right:var(--spacing-6)}.mr-8{margin-right:var(--spacing-8)}.mr-auto{margin-right:auto}
69
+
70
+ .g-0{gap:var(--spacing-0)}.g-1{gap:var(--spacing-1)}.g-2{gap:var(--spacing-2)}.g-3{gap:var(--spacing-3)}.g-4{gap:var(--spacing-4)}.g-5{gap:var(--spacing-5)}.g-6{gap:var(--spacing-6)}.g-7{gap:var(--spacing-7)}.g-8{gap:var(--spacing-8)}.g-10{gap:var(--spacing-10)}.g-12{gap:var(--spacing-12)}
71
+ .gx-1{column-gap:var(--spacing-1)}.gx-2{column-gap:var(--spacing-2)}.gx-3{column-gap:var(--spacing-3)}.gx-4{column-gap:var(--spacing-4)}.gx-6{column-gap:var(--spacing-6)}.gx-8{column-gap:var(--spacing-8)}
72
+ .gy-1{row-gap:var(--spacing-1)}.gy-2{row-gap:var(--spacing-2)}.gy-3{row-gap:var(--spacing-3)}.gy-4{row-gap:var(--spacing-4)}.gy-6{row-gap:var(--spacing-6)}.gy-8{row-gap:var(--spacing-8)}
73
+
74
+ .w-1{width:var(--spacing-1)}.w-2{width:var(--spacing-2)}.w-3{width:var(--spacing-3)}.w-4{width:var(--spacing-4)}.w-5{width:var(--spacing-5)}.w-6{width:var(--spacing-6)}.w-7{width:var(--spacing-7)}.w-8{width:var(--spacing-8)}.w-10{width:var(--spacing-10)}.w-12{width:var(--spacing-12)}.w-16{width:var(--spacing-16)}.w-20{width:var(--spacing-20)}.w-24{width:var(--spacing-24)}.w-32{width:var(--spacing-32)}.w-full{width:100%}.w-auto{width:auto}
75
+ .h-1{height:var(--spacing-1)}.h-2{height:var(--spacing-2)}.h-3{height:var(--spacing-3)}.h-4{height:var(--spacing-4)}.h-5{height:var(--spacing-5)}.h-6{height:var(--spacing-6)}.h-7{height:var(--spacing-7)}.h-8{height:var(--spacing-8)}.h-10{height:var(--spacing-10)}.h-12{height:var(--spacing-12)}.h-16{height:var(--spacing-16)}.h-20{height:var(--spacing-20)}.h-24{height:var(--spacing-24)}.h-32{height:var(--spacing-32)}.h-full{height:100%}.h-auto{height:auto}
76
+
77
+ .fs-xs{font-size:var(--fs-xs)}.fs-sm{font-size:var(--fs-sm)}.fs-md{font-size:var(--fs-md)}.fs-lg{font-size:var(--fs-lg)}.fs-xl{font-size:var(--fs-xl)}.fs-2xl{font-size:var(--fs-2xl)}.fs-3xl{font-size:var(--fs-3xl)}.fs-4xl{font-size:var(--fs-4xl)}.fs-5xl{font-size:var(--fs-5xl)}
78
+ .fw-3{font-weight:var(--fw-3)}.fw-4{font-weight:var(--fw-4)}.fw-5{font-weight:var(--fw-5)}.fw-6{font-weight:var(--fw-6)}.fw-7{font-weight:var(--fw-7)}.fw-8{font-weight:var(--fw-8)}.fw-9{font-weight:var(--fw-9)}
79
+ .lh-none{line-height:1}.lh-tight{line-height:1.25}.lh-snug{line-height:1.375}.lh-base{line-height:1.5}.lh-relaxed{line-height:1.625}.lh-loose{line-height:2}
80
+ .ta-l{text-align:left}.ta-r{text-align:right}.ta-c{text-align:center}.ta-j{text-align:justify}
81
+
82
+ .br-none{border-radius:var(--br-none)}.br-sm{border-radius:var(--br-sm)}.br-md{border-radius:var(--br-md)}.br-lg{border-radius:var(--br-lg)}.br-xl{border-radius:var(--br-xl)}.br-2xl{border-radius:var(--br-2xl)}.br-3xl{border-radius:var(--br-3xl)}.br-full{border-radius:var(--br-full)}
83
+ .bw-0{border-width:0;border-style:solid}.bw-1{border-width:var(--bw-1);border-style:solid}.bw-2{border-width:var(--bw-2);border-style:solid}.bw-4{border-width:var(--bw-4);border-style:solid}
84
+ .sh-none{box-shadow:none}.sh-1{box-shadow:var(--sh-1)}.sh-2{box-shadow:var(--sh-2)}.sh-3{box-shadow:var(--sh-3)}.sh-4{box-shadow:var(--sh-4)}.sh-5{box-shadow:var(--sh-5)}
85
+ .op-0{opacity:0}.op-5{opacity:0.05}.op-10{opacity:0.1}.op-20{opacity:0.2}.op-25{opacity:0.25}.op-30{opacity:0.3}.op-40{opacity:0.4}.op-50{opacity:0.5}.op-60{opacity:0.6}.op-70{opacity:0.7}.op-75{opacity:0.75}.op-80{opacity:0.8}.op-90{opacity:0.9}.op-95{opacity:0.95}.op-100{opacity:1}
86
+
87
+ .flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.hidden{display:none}
88
+ .flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}
89
+ .flex-1{flex:1}.flex-auto{flex:auto}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}
90
+ .items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.items-baseline{align-items:baseline}
91
+ .justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}
92
+ .self-start{align-self:flex-start}.self-center{align-self:center}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}
93
+
94
+ .relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
95
+ .overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-scroll{overflow:scroll}
96
+ .cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}
97
+ .select-none{user-select:none}.whitespace-nowrap{white-space:nowrap}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
98
+ .italic{font-style:italic}.not-italic{font-style:normal}.underline{text-decoration:underline}.no-underline{text-decoration:none}.line-through{text-decoration:line-through}
99
+ .uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}
100
+ .border{border-width:1px;border-style:solid}.border-t{border-top-width:1px;border-top-style:solid}.border-b{border-bottom-width:1px;border-bottom-style:solid}.border-l{border-left-width:1px;border-left-style:solid}.border-r{border-right-width:1px;border-right-style:solid}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@techv/design-system",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "author": "Pranav V K <pranavvk@techversantinfotech.com>",
5
5
  "license": "MIT",
6
6
  "main": "./dist/cjs/index.js",
@@ -17,14 +17,16 @@
17
17
  "default": "./dist/cjs/index.js"
18
18
  }
19
19
  },
20
- "./styles.css": "./dist/styles.css"
20
+ "./styles.css": "./dist/styles.css",
21
+ "./utility.css": "./dist/utility.css"
21
22
  },
22
23
  "files": [
23
24
  "dist",
24
25
  "README.md"
25
26
  ],
26
27
  "sideEffects": [
27
- "./dist/styles.css"
28
+ "./dist/styles.css",
29
+ "./dist/utility.css"
28
30
  ],
29
31
  "peerDependencies": {
30
32
  "react": "^18.0.0",
@@ -47,7 +49,7 @@
47
49
  "access": "public"
48
50
  },
49
51
  "scripts": {
50
- "build": "rollup -c rollup.config.ts --configPlugin typescript && tsc -p tsconfig.build.json && cp node_modules/@techv/tokens/dist/global.css dist/styles.css",
52
+ "build": "rollup -c rollup.config.ts --configPlugin typescript && tsc -p tsconfig.build.json && cp node_modules/@techv/tokens/dist/global.css dist/styles.css && cp node_modules/@techv/tokens/dist/utility.css dist/utility.css",
51
53
  "lint": "tsc --noEmit",
52
54
  "clean": "rm -rf dist"
53
55
  }