singularity-components 0.1.61 → 0.1.65

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/main.css CHANGED
@@ -1,50 +1,36 @@
1
- /* lib/tailwind.css */
1
+ /* src/tailwind.css */
2
+ :root {
3
+ --sg-black: 0 0% 15%;
4
+ --sg-white: 30 20% 98%;
5
+ --sg-gray: 30 10% 70%;
6
+ --sg-purple: 250 45% 58%;
7
+ --sg-purple-foreground: 250 50% 98%;
8
+ --sg-orange: 33 75% 54%;
9
+ --sg-orange-foreground: 0 0% 20%;
10
+ --sg-red: 0 65% 51%;
11
+ --sg-red-foreground: 0 0% 98%;
12
+ --sg-green: 120 45% 45%;
13
+ --sg-green-foreground: 120 50% 98%;
14
+ --sg-spacing-1: 0.25rem;
15
+ --sg-spacing-2: 0.5rem;
16
+ --sg-spacing-3: 0.75rem;
17
+ --sg-spacing-4: 1rem;
18
+ --sg-spacing-6: 1.5rem;
19
+ --sg-spacing-8: 2rem;
20
+ --sg-spacing-12: 3rem;
21
+ --sg-spacing-16: 4rem;
22
+ --sg-spacing-20: 5rem;
23
+ --sg-spacing-24: 6rem;
24
+ --sg-spacing-28: 7rem;
25
+ --sg-spacing-32: 8rem;
26
+ --sg-spacing-36: 9rem;
27
+ --sg-spacing-40: 10rem;
28
+ }
2
29
  @layer theme, base, components, utilities;
3
30
  @layer theme {
4
31
  :root,
5
32
  :host {
6
- --sg-font-sans:
7
- ui-sans-serif,
8
- system-ui,
9
- sans-serif,
10
- "Apple Color Emoji",
11
- "Segoe UI Emoji",
12
- "Segoe UI Symbol",
13
- "Noto Color Emoji";
14
- --sg-font-serif:
15
- ui-serif,
16
- Georgia,
17
- Cambria,
18
- "Times New Roman",
19
- Times,
20
- serif;
21
- --sg-font-mono:
22
- ui-monospace,
23
- SFMono-Regular,
24
- Menlo,
25
- Monaco,
26
- Consolas,
27
- "Liberation Mono",
28
- "Courier New",
29
- monospace;
30
- --sg-breakpoint-sm: 40rem;
31
- --sg-breakpoint-md: 48rem;
32
- --sg-breakpoint-lg: 64rem;
33
- --sg-breakpoint-xl: 80rem;
34
- --sg-breakpoint-2xl: 96rem;
35
- --sg-container-3xs: 16rem;
36
- --sg-container-2xs: 18rem;
37
- --sg-container-xs: 20rem;
38
- --sg-container-sm: 24rem;
39
- --sg-container-md: 28rem;
40
- --sg-container-lg: 32rem;
41
- --sg-container-xl: 36rem;
42
- --sg-container-2xl: 42rem;
43
- --sg-container-3xl: 48rem;
44
- --sg-container-4xl: 56rem;
45
- --sg-container-5xl: 64rem;
46
- --sg-container-6xl: 72rem;
47
- --sg-container-7xl: 80rem;
33
+ --sg-spacing: 0.25rem;
48
34
  --sg-text-xs: 0.75rem;
49
35
  --sg-text-xs--line-height: calc(1 / 0.75);
50
36
  --sg-text-sm: 0.875rem;
@@ -63,126 +49,20 @@
63
49
  --sg-text-4xl--line-height: calc(2.5 / 2.25);
64
50
  --sg-text-5xl: 3rem;
65
51
  --sg-text-5xl--line-height: 1;
66
- --sg-text-6xl: 3.75rem;
67
- --sg-text-6xl--line-height: 1;
68
- --sg-text-7xl: 4.5rem;
69
- --sg-text-7xl--line-height: 1;
70
- --sg-text-8xl: 6rem;
71
- --sg-text-8xl--line-height: 1;
72
- --sg-text-9xl: 8rem;
73
- --sg-text-9xl--line-height: 1;
74
- --sg-font-weight-thin: 100;
75
- --sg-font-weight-extralight: 200;
76
- --sg-font-weight-light: 300;
77
52
  --sg-font-weight-normal: 400;
78
53
  --sg-font-weight-medium: 500;
79
54
  --sg-font-weight-semibold: 600;
80
55
  --sg-font-weight-bold: 700;
81
56
  --sg-font-weight-extrabold: 800;
82
- --sg-font-weight-black: 900;
83
- --sg-tracking-tighter: -0.05em;
84
57
  --sg-tracking-tight: -0.025em;
85
- --sg-tracking-normal: 0em;
86
- --sg-tracking-wide: 0.025em;
87
- --sg-tracking-wider: 0.05em;
88
- --sg-tracking-widest: 0.1em;
89
- --sg-leading-tight: 1.25;
90
- --sg-leading-snug: 1.375;
91
- --sg-leading-normal: 1.5;
92
- --sg-leading-relaxed: 1.625;
93
- --sg-leading-loose: 2;
94
- --sg-radius-xs: 0.125rem;
95
- --sg-radius-sm: 0.25rem;
96
- --sg-radius-md: 0.375rem;
97
- --sg-radius-lg: 0.5rem;
98
- --sg-radius-xl: 0.75rem;
99
- --sg-radius-2xl: 1rem;
100
- --sg-radius-3xl: 1.5rem;
101
- --sg-radius-4xl: 2rem;
102
- --sg-shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
103
- --sg-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
104
- --sg-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
105
- --sg-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
106
- --sg-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
107
- --sg-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
108
- --sg-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
109
- --sg-inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
110
- --sg-inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
111
- --sg-inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
112
- --sg-drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
113
- --sg-drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
114
- --sg-drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
115
- --sg-drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
116
- --sg-drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
117
- --sg-drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
118
- --sg-ease-in: cubic-bezier(0.4, 0, 1, 1);
119
- --sg-ease-out: cubic-bezier(0, 0, 0.2, 1);
120
- --sg-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
121
- --sg-animate-spin: spin 1s linear infinite;
122
- --sg-animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
123
- --sg-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
124
- --sg-animate-bounce: bounce 1s infinite;
125
- --sg-blur-xs: 4px;
126
- --sg-blur-sm: 8px;
127
- --sg-blur-md: 12px;
128
- --sg-blur-lg: 16px;
129
- --sg-blur-xl: 24px;
130
- --sg-blur-2xl: 40px;
131
- --sg-blur-3xl: 64px;
132
- --sg-perspective-dramatic: 100px;
133
- --sg-perspective-near: 300px;
134
- --sg-perspective-normal: 500px;
135
- --sg-perspective-midrange: 800px;
136
- --sg-perspective-distant: 1200px;
137
- --sg-aspect-video: 16 / 9;
138
58
  --sg-default-transition-duration: 150ms;
139
59
  --sg-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
140
- --sg-default-font-family: var(--font-sans);
141
- --sg-default-font-feature-settings: var(--font-sans--font-feature-settings);
142
- --sg-default-font-variation-settings: var( --font-sans--font-variation-settings );
143
- --sg-default-mono-font-family: var(--font-mono);
144
- --sg-default-mono-font-feature-settings: var( --font-mono--font-feature-settings );
145
- --sg-default-mono-font-variation-settings: var( --font-mono--font-variation-settings );
146
- --sg-color-transparent: transparent;
147
- --sg-color-current: currentColor;
148
- --sg-color-white: hsl(var(--sg-white));
149
- --sg-color-black: hsl(var(--sg-black));
150
- --sg-color-gray: hsl(var(--sg-gray));
151
- --sg-color-orange: hsl(var(--sg-orange));
152
- --sg-color-orange-foreground: hsl(var(--sg-orange-foreground));
153
- --sg-color-purple: hsl(var(--sg-purple));
154
- --sg-color-purple-foreground: hsl(var(--sg-purple-foreground));
155
- --sg-color-red: hsl(var(--sg-red));
156
- --sg-color-red-foreground: hsl(var(--sg-red-foreground));
157
- --sg-color-green: hsl(var(--sg-green));
158
- --sg-color-green-foreground: hsl(var(--sg-green-foreground));
159
- --sg-color-border: hsl(var(--sg-border));
160
- --sg-color-background: hsl(var(--sg-background));
161
- --sg-color-foreground: hsl(var(--sg-foreground));
162
- --sg-color-ring: hsl(var(--sg-ring));
163
- --sg-color-input: hsl(var(--input));
164
- --sg-color-primary: hsl(var(--primary));
165
- --sg-color-primary-foreground: hsl(var(--primary-foreground));
166
- --sg-color-secondary: hsl(var(--secondary));
167
- --sg-color-secondary-foreground: hsl(var(--secondary-foreground));
168
- --sg-color-destructive: hsl(var(--destructive));
169
- --sg-color-destructive-foreground: hsl(var(--destructive-foreground));
170
- --sg-color-accent: hsl(var(--accent));
171
- --sg-color-accent-foreground: hsl(var(--accent-foreground));
172
- --sg-spacing-1: var(--sg-spacing-1);
173
- --sg-spacing-2: var(--sg-spacing-2);
174
- --sg-spacing-3: var(--sg-spacing-3);
175
- --sg-spacing-4: var(--sg-spacing-4);
176
- --sg-spacing-6: var(--sg-spacing-6);
177
- --sg-spacing-8: var(--sg-spacing-8);
178
- --sg-spacing-12: var(--sg-spacing-12);
179
- --sg-spacing-16: var(--sg-spacing-16);
180
- --sg-spacing-20: var(--sg-spacing-20);
181
- --sg-spacing-24: var(--sg-spacing-24);
182
- --sg-spacing-28: var(--sg-spacing-28);
183
- --sg-spacing-32: var(--sg-spacing-32);
184
- --sg-spacing-36: var(--sg-spacing-36);
185
- --sg-spacing-40: var(--sg-spacing-40);
60
+ --sg-color-black: var(--sg-color-black);
61
+ --sg-color-white: var(--sg-color-white);
62
+ --sg-color-gray: var(--sg-color-gray);
63
+ --sg-color-purple: var(--sg-color-purple);
64
+ --sg-color-background: var(--sg-color-background);
65
+ --sg-color-foreground: var(--sg-color-foreground);
186
66
  }
187
67
  }
188
68
  @layer base {
@@ -201,14 +81,18 @@
201
81
  line-height: 1.5;
202
82
  -webkit-text-size-adjust: 100%;
203
83
  tab-size: 4;
204
- font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
205
- font-feature-settings: var(--default-font-feature-settings, normal);
206
- font-variation-settings: var( --default-font-variation-settings, normal );
84
+ font-family:
85
+ ui-sans-serif,
86
+ system-ui,
87
+ sans-serif,
88
+ "Apple Color Emoji",
89
+ "Segoe UI Emoji",
90
+ "Segoe UI Symbol",
91
+ "Noto Color Emoji";
92
+ font-feature-settings: initial;
93
+ font-variation-settings: initial;
207
94
  -webkit-tap-highlight-color: transparent;
208
95
  }
209
- body {
210
- line-height: inherit;
211
- }
212
96
  hr {
213
97
  height: 0;
214
98
  color: inherit;
@@ -240,9 +124,17 @@
240
124
  kbd,
241
125
  samp,
242
126
  pre {
243
- font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
244
- font-feature-settings: var( --default-mono-font-feature-settings, normal );
245
- font-variation-settings: var( --default-mono-font-variation-settings, normal );
127
+ font-family:
128
+ ui-monospace,
129
+ SFMono-Regular,
130
+ Menlo,
131
+ Monaco,
132
+ Consolas,
133
+ "Liberation Mono",
134
+ "Courier New",
135
+ monospace;
136
+ font-feature-settings: initial;
137
+ font-variation-settings: initial;
246
138
  font-size: 1em;
247
139
  }
248
140
  small {
@@ -322,7 +214,11 @@
322
214
  }
323
215
  ::placeholder {
324
216
  opacity: 1;
325
- color: color-mix(in oklab, currentColor 50%, transparent);
217
+ }
218
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
219
+ ::placeholder {
220
+ color: color-mix(in oklab, currentColor 50%, transparent);
221
+ }
326
222
  }
327
223
  textarea {
328
224
  resize: vertical;
@@ -368,17 +264,46 @@
368
264
  }
369
265
  }
370
266
  @layer utilities {
267
+ .sg\:pointer-events-none {
268
+ pointer-events: none;
269
+ }
270
+ .sg\:relative {
271
+ position: relative;
272
+ }
371
273
  .sg\:mx-auto {
372
274
  margin-inline: auto;
373
275
  }
276
+ .sg\:mt-4 {
277
+ margin-top: calc(var(--sg-spacing) * 4);
278
+ }
279
+ .sg\:flex {
280
+ display: flex;
281
+ }
374
282
  .sg\:grid {
375
283
  display: grid;
376
284
  }
377
285
  .sg\:inline-flex {
378
286
  display: inline-flex;
379
287
  }
288
+ .sg\:size-4 {
289
+ width: calc(var(--sg-spacing) * 4);
290
+ height: calc(var(--sg-spacing) * 4);
291
+ }
292
+ .sg\:size-9 {
293
+ width: calc(var(--sg-spacing) * 9);
294
+ height: calc(var(--sg-spacing) * 9);
295
+ }
380
296
  .sg\:h-8 {
381
- height: var(--sg-spacing-8);
297
+ height: calc(var(--sg-spacing) * 8);
298
+ }
299
+ .sg\:h-9 {
300
+ height: calc(var(--sg-spacing) * 9);
301
+ }
302
+ .sg\:h-10 {
303
+ height: calc(var(--sg-spacing) * 10);
304
+ }
305
+ .sg\:w-fit {
306
+ width: fit-content;
382
307
  }
383
308
  .sg\:w-full {
384
309
  width: 100%;
@@ -386,48 +311,102 @@
386
311
  .sg\:max-w-\[768px\] {
387
312
  max-width: 768px;
388
313
  }
314
+ .sg\:min-w-0 {
315
+ min-width: calc(var(--sg-spacing) * 0);
316
+ }
317
+ .sg\:flex-1 {
318
+ flex: 1;
319
+ }
320
+ .sg\:shrink-0 {
321
+ flex-shrink: 0;
322
+ }
323
+ .sg\:caption-bottom {
324
+ caption-side: bottom;
325
+ }
326
+ .sg\:translate-y-0\.5 {
327
+ --tw-translate-y: calc(var(--sg-spacing) * 0.5);
328
+ translate: var(--tw-translate-x) var(--tw-translate-y);
329
+ }
389
330
  .sg\:grid-cols-1 {
390
331
  grid-template-columns: repeat(1, minmax(0, 1fr));
391
332
  }
392
333
  .sg\:items-center {
393
334
  align-items: center;
394
335
  }
336
+ .sg\:items-start {
337
+ align-items: flex-start;
338
+ }
339
+ .sg\:justify-between {
340
+ justify-content: space-between;
341
+ }
395
342
  .sg\:justify-center {
396
343
  justify-content: center;
397
344
  }
345
+ .sg\:gap-1 {
346
+ gap: calc(var(--sg-spacing) * 1);
347
+ }
348
+ .sg\:gap-1\.5 {
349
+ gap: calc(var(--sg-spacing) * 1.5);
350
+ }
398
351
  .sg\:gap-2 {
399
- gap: var(--sg-spacing-2);
352
+ gap: calc(var(--sg-spacing) * 2);
400
353
  }
401
354
  .sg\:gap-4 {
402
- gap: var(--sg-spacing-4);
355
+ gap: calc(var(--sg-spacing) * 4);
356
+ }
357
+ .sg\:overflow-hidden {
358
+ overflow: hidden;
359
+ }
360
+ .sg\:overflow-x-auto {
361
+ overflow-x: auto;
403
362
  }
404
363
  .sg\:rounded-md {
405
- border-radius: var(--sg-radius-md);
364
+ border-radius: calc(var(--radius) - 2px);
406
365
  }
407
366
  .sg\:border {
408
367
  border-style: var(--tw-border-style);
409
368
  border-width: 1px;
410
369
  }
411
- .sg\:border-orange {
412
- border-color: var(--sg-color-orange);
370
+ .sg\:border-t {
371
+ border-top-style: var(--tw-border-style);
372
+ border-top-width: 1px;
373
+ }
374
+ .sg\:border-b {
375
+ border-bottom-style: var(--tw-border-style);
376
+ border-bottom-width: 1px;
377
+ }
378
+ .sg\:border-input {
379
+ border-color: var(--input);
413
380
  }
414
381
  .sg\:border-transparent {
415
382
  border-color: transparent;
416
383
  }
384
+ .sg\:bg-background {
385
+ background-color: var(--sg-color-background);
386
+ }
417
387
  .sg\:bg-black {
418
388
  background-color: var(--sg-color-black);
419
389
  }
420
- .sg\:bg-green {
421
- background-color: var(--sg-color-green);
390
+ .sg\:bg-destructive {
391
+ background-color: var(--sg-destructive);
392
+ }
393
+ .sg\:bg-foreground {
394
+ background-color: var(--sg-color-foreground);
395
+ }
396
+ .sg\:bg-gray {
397
+ background-color: var(--sg-color-gray);
422
398
  }
423
- .sg\:bg-orange {
424
- background-color: var(--sg-color-orange);
399
+ .sg\:bg-muted\/50 {
400
+ background-color: color-mix(in oklab, var(--muted) 50%, transparent);
401
+ }
402
+ .sg\:bg-primary {
403
+ background-color: var(--sg-primary);
425
404
  }
426
405
  .sg\:bg-purple {
427
406
  background-color: var(--sg-color-purple);
428
407
  }
429
- .sg\:bg-red {
430
- background-color: var(--sg-color-red);
408
+ .sg\:bg-secondary {
409
+ background-color: var(--sg-secondary);
431
410
  }
432
411
  .sg\:bg-transparent {
433
412
  background-color: transparent;
@@ -435,17 +414,44 @@
435
414
  .sg\:bg-white {
436
415
  background-color: var(--sg-color-white);
437
416
  }
417
+ .sg\:p-2 {
418
+ padding: calc(var(--sg-spacing) * 2);
419
+ }
420
+ .sg\:px-2 {
421
+ padding-inline: calc(var(--sg-spacing) * 2);
422
+ }
438
423
  .sg\:px-3 {
439
- padding-inline: var(--sg-spacing-3);
424
+ padding-inline: calc(var(--sg-spacing) * 3);
440
425
  }
441
426
  .sg\:px-4 {
442
- padding-inline: var(--sg-spacing-4);
427
+ padding-inline: calc(var(--sg-spacing) * 4);
428
+ }
429
+ .sg\:px-6 {
430
+ padding-inline: calc(var(--sg-spacing) * 6);
431
+ }
432
+ .sg\:py-0\.5 {
433
+ padding-block: calc(var(--sg-spacing) * 0.5);
443
434
  }
444
- .sg\:px-8 {
445
- padding-inline: var(--sg-spacing-8);
435
+ .sg\:py-1 {
436
+ padding-block: calc(var(--sg-spacing) * 1);
446
437
  }
447
438
  .sg\:py-2 {
448
- padding-block: var(--sg-spacing-2);
439
+ padding-block: calc(var(--sg-spacing) * 2);
440
+ }
441
+ .sg\:py-4 {
442
+ padding-block: calc(var(--sg-spacing) * 4);
443
+ }
444
+ .sg\:pt-0 {
445
+ padding-top: calc(var(--sg-spacing) * 0);
446
+ }
447
+ .sg\:pb-4 {
448
+ padding-bottom: calc(var(--sg-spacing) * 4);
449
+ }
450
+ .sg\:text-left {
451
+ text-align: left;
452
+ }
453
+ .sg\:align-middle {
454
+ vertical-align: middle;
449
455
  }
450
456
  .sg\:text-2xl {
451
457
  font-size: var(--sg-text-2xl);
@@ -507,37 +513,40 @@
507
513
  white-space: nowrap;
508
514
  }
509
515
  .sg\:text-accent-foreground {
510
- color: var(--sg-color-accent-foreground);
516
+ color: var(--accent-foreground);
517
+ }
518
+ .sg\:text-background {
519
+ color: var(--sg-color-background);
511
520
  }
512
521
  .sg\:text-destructive {
513
- color: var(--sg-color-destructive);
522
+ color: var(--sg-destructive);
514
523
  }
515
524
  .sg\:text-foreground {
516
525
  color: var(--sg-color-foreground);
517
526
  }
518
- .sg\:text-green-foreground {
519
- color: var(--sg-color-green-foreground);
520
- }
521
- .sg\:text-orange-foreground {
522
- color: var(--sg-color-orange-foreground);
527
+ .sg\:text-muted-foreground {
528
+ color: var(--muted-foreground);
523
529
  }
524
530
  .sg\:text-primary {
525
- color: var(--sg-color-primary);
531
+ color: var(--sg-primary);
526
532
  }
527
- .sg\:text-purple-foreground {
528
- color: var(--sg-color-purple-foreground);
533
+ .sg\:text-primary-foreground {
534
+ color: var(--sg-primary-foreground);
529
535
  }
530
- .sg\:text-red-foreground {
531
- color: var(--sg-color-red-foreground);
536
+ .sg\:text-purple {
537
+ color: var(--sg-color-purple);
532
538
  }
533
539
  .sg\:text-secondary-foreground {
534
- color: var(--sg-color-secondary-foreground);
540
+ color: var(--sg-secondary-foreground);
541
+ }
542
+ .sg\:text-white {
543
+ color: var(--sg-color-white);
535
544
  }
536
545
  .sg\:underline-offset-4 {
537
546
  text-underline-offset: 4px;
538
547
  }
539
- .sg\:shadow {
540
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
548
+ .sg\:shadow-xs {
549
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
541
550
  box-shadow:
542
551
  var(--tw-inset-shadow),
543
552
  var(--tw-inset-ring-shadow),
@@ -545,14 +554,15 @@
545
554
  var(--tw-ring-shadow),
546
555
  var(--tw-shadow);
547
556
  }
548
- .sg\:shadow-sm {
549
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
550
- box-shadow:
551
- var(--tw-inset-shadow),
552
- var(--tw-inset-ring-shadow),
553
- var(--tw-ring-offset-shadow),
554
- var(--tw-ring-shadow),
555
- var(--tw-shadow);
557
+ .sg\:transition-\[color\,box-shadow\] {
558
+ transition-property: color, box-shadow;
559
+ transition-timing-function: var(--tw-ease, var(--sg-default-transition-timing-function));
560
+ transition-duration: var(--tw-duration, var(--sg-default-transition-duration));
561
+ }
562
+ .sg\:transition-all {
563
+ transition-property: all;
564
+ transition-timing-function: var(--tw-ease, var(--sg-default-transition-timing-function));
565
+ transition-duration: var(--tw-duration, var(--sg-default-transition-duration));
556
566
  }
557
567
  .sg\:transition-colors {
558
568
  transition-property:
@@ -569,140 +579,29 @@
569
579
  transition-timing-function: var(--tw-ease, var(--sg-default-transition-timing-function));
570
580
  transition-duration: var(--tw-duration, var(--sg-default-transition-duration));
571
581
  }
572
- .sg\:hover\:bg-accent {
573
- &:hover {
574
- @media (hover: hover) {
575
- background-color: var(--sg-color-accent);
576
- }
577
- }
578
- }
579
- .sg\:hover\:bg-gray\/20 {
580
- &:hover {
581
- @media (hover: hover) {
582
- background-color: color-mix(in oklab, var(--sg-color-gray) 20%, transparent);
583
- }
584
- }
585
- }
586
- .sg\:hover\:bg-green\/80 {
587
- &:hover {
588
- @media (hover: hover) {
589
- background-color: color-mix(in oklab, var(--sg-color-green) 80%, transparent);
590
- }
591
- }
592
- }
593
- .sg\:hover\:bg-orange\/80 {
594
- &:hover {
595
- @media (hover: hover) {
596
- background-color: color-mix(in oklab, var(--sg-color-orange) 80%, transparent);
597
- }
598
- }
599
- }
600
- .sg\:hover\:bg-orange\/90 {
601
- &:hover {
602
- @media (hover: hover) {
603
- background-color: color-mix(in oklab, var(--sg-color-orange) 90%, transparent);
604
- }
605
- }
606
- }
607
- .sg\:hover\:bg-purple\/80 {
608
- &:hover {
609
- @media (hover: hover) {
610
- background-color: color-mix(in oklab, var(--sg-color-purple) 80%, transparent);
611
- }
612
- }
613
- }
614
- .sg\:hover\:bg-purple\/90 {
615
- &:hover {
616
- @media (hover: hover) {
617
- background-color: color-mix(in oklab, var(--sg-color-purple) 90%, transparent);
618
- }
619
- }
620
- }
621
- .sg\:hover\:bg-red\/90 {
622
- &:hover {
623
- @media (hover: hover) {
624
- background-color: color-mix(in oklab, var(--sg-color-red) 90%, transparent);
625
- }
626
- }
627
- }
628
- .sg\:hover\:text-accent-foreground {
629
- &:hover {
630
- @media (hover: hover) {
631
- color: var(--sg-color-accent-foreground);
632
- }
633
- }
634
- }
635
- .sg\:hover\:underline {
636
- &:hover {
637
- @media (hover: hover) {
638
- text-decoration-line: underline;
639
- }
640
- }
641
- }
642
- .sg\:focus\:ring-2 {
643
- &:focus {
644
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
645
- box-shadow:
646
- var(--tw-inset-shadow),
647
- var(--tw-inset-ring-shadow),
648
- var(--tw-ring-offset-shadow),
649
- var(--tw-ring-shadow),
650
- var(--tw-shadow);
651
- }
652
- }
653
- .sg\:focus\:ring-ring {
654
- &:focus {
655
- --tw-ring-color: var(--sg-color-ring);
656
- }
657
- }
658
- .sg\:focus\:ring-offset-2 {
659
- &:focus {
660
- --tw-ring-offset-width: 2px;
661
- --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
662
- }
663
- }
664
- .sg\:focus\:outline-hidden {
665
- &:focus {
666
- outline-style: none;
667
- @media (forced-colors: active) {
668
- outline: 2px solid transparent;
669
- outline-offset: 2px;
670
- }
671
- }
672
- }
673
- .sg\:focus-visible\:ring-2 {
674
- &:focus-visible {
675
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
676
- box-shadow:
677
- var(--tw-inset-shadow),
678
- var(--tw-inset-ring-shadow),
679
- var(--tw-ring-offset-shadow),
680
- var(--tw-ring-shadow),
681
- var(--tw-shadow);
682
- }
582
+ .sg\:transition-transform {
583
+ transition-property:
584
+ transform,
585
+ translate,
586
+ scale,
587
+ rotate;
588
+ transition-timing-function: var(--tw-ease, var(--sg-default-transition-timing-function));
589
+ transition-duration: var(--tw-duration, var(--sg-default-transition-duration));
683
590
  }
684
- .sg\:focus-visible\:ring-ring {
685
- &:focus-visible {
686
- --tw-ring-color: var(--sg-color-ring);
687
- }
591
+ .sg\:duration-200 {
592
+ --tw-duration: 200ms;
593
+ transition-duration: 200ms;
688
594
  }
689
- .sg\:focus-visible\:outline-hidden {
690
- &:focus-visible {
691
- outline-style: none;
692
- @media (forced-colors: active) {
693
- outline: 2px solid transparent;
694
- outline-offset: 2px;
695
- }
696
- }
595
+ .sg\:outline-none {
596
+ --tw-outline-style: none;
597
+ outline-style: none;
697
598
  }
698
- .sg\:disabled\:pointer-events-none {
699
- &:disabled {
700
- pointer-events: none;
701
- }
599
+ .sg\:duration-200 {
600
+ animation-duration: 200ms;
702
601
  }
703
- .sg\:disabled\:opacity-50 {
704
- &:disabled {
705
- opacity: 50%;
602
+ .sg\:first\:mt-0 {
603
+ &:first-child {
604
+ margin-top: calc(var(--sg-spacing) * 0);
706
605
  }
707
606
  }
708
607
  .sg\:md\:grid-cols-2 {
@@ -720,111 +619,99 @@
720
619
  grid-template-columns: repeat(4, minmax(0, 1fr));
721
620
  }
722
621
  }
622
+ .sg\:md\:px-0 {
623
+ @media (width >= 48rem) {
624
+ padding-inline: calc(var(--sg-spacing) * 0);
625
+ }
626
+ }
723
627
  .sg\:lg\:text-5xl {
724
628
  @media (width >= 64rem) {
725
629
  font-size: var(--sg-text-5xl);
726
630
  line-height: var(--tw-leading, var(--sg-text-5xl--line-height));
727
631
  }
728
632
  }
729
- .sg\:\[\&_svg\]\:pointer-events-none {
730
- & svg {
731
- pointer-events: none;
732
- }
733
- }
734
- .sg\:\[\&_svg\]\:size-4 {
735
- & svg {
736
- width: var(--sg-spacing-4);
737
- height: var(--sg-spacing-4);
738
- }
739
- }
740
- .sg\:\[\&_svg\]\:shrink-0 {
741
- & svg {
742
- flex-shrink: 0;
743
- }
744
- }
745
633
  }
746
- @layer base {
747
- *,
748
- ::after,
749
- ::before,
750
- ::backdrop,
751
- ::file-selector-button {
752
- border-color: var(--color-gray-200, currentColor);
753
- }
634
+ :root {
635
+ --sg-color-black: hsl(var(--sg-black));
636
+ --sg-color-white: hsl(var(--sg-white));
637
+ --sg-color-gray: hsl(var(--sg-gray));
638
+ --sg-color-purple: hsl(var(--sg-purple));
639
+ --sg-color-background: var(--sg-color-white);
640
+ --sg-color-foreground: var(--sg-color-black);
641
+ --sg-primary: hsl(var(--sg-purple));
642
+ --sg-primary-foreground: hsl(var(--sg-purple-foreground));
643
+ --sg-secondary: hsl(var(--sg-orange));
644
+ --sg-secondary-foreground: hsl(var(--sg-orange-foreground));
645
+ --sg-destructive: hsl(var(--sg-red));
646
+ --sg-destructive-foreground: hsl(var(--sg-red-foreground));
647
+ --card: oklch(1 0 0);
648
+ --card-foreground: oklch(0.145 0 0);
649
+ --popover: oklch(1 0 0);
650
+ --popover-foreground: oklch(0.145 0 0);
651
+ --muted: oklch(0.97 0 0);
652
+ --muted-foreground: oklch(0.556 0 0);
653
+ --accent: oklch(0.97 0 0);
654
+ --accent-foreground: oklch(0.205 0 0);
655
+ --border: oklch(0.922 0 0);
656
+ --input: oklch(0.922 0 0);
657
+ --ring: oklch(0.708 0 0);
658
+ --chart-1: oklch(0.646 0.222 41.116);
659
+ --chart-2: oklch(0.6 0.118 184.704);
660
+ --chart-3: oklch(0.398 0.07 227.392);
661
+ --chart-4: oklch(0.828 0.189 84.429);
662
+ --chart-5: oklch(0.769 0.188 70.08);
663
+ --radius: 0.625rem;
664
+ --sidebar: oklch(0.985 0 0);
665
+ --sidebar-foreground: oklch(0.145 0 0);
666
+ --sidebar-primary: oklch(0.205 0 0);
667
+ --sidebar-primary-foreground: oklch(0.985 0 0);
668
+ --sidebar-accent: oklch(0.97 0 0);
669
+ --sidebar-accent-foreground: oklch(0.205 0 0);
670
+ --sidebar-border: oklch(0.922 0 0);
671
+ --sidebar-ring: oklch(0.708 0 0);
672
+ }
673
+ .dark {
674
+ --sg-color-background: hsl(var(--sg-black));
675
+ --sg-color-foreground: hsl(var(--sg-white));
676
+ --card: oklch(0.145 0 0);
677
+ --card-foreground: oklch(0.985 0 0);
678
+ --popover: oklch(0.145 0 0);
679
+ --popover-foreground: oklch(0.985 0 0);
680
+ --primary: oklch(0.985 0 0);
681
+ --primary-foreground: oklch(0.205 0 0);
682
+ --secondary: oklch(0.269 0 0);
683
+ --secondary-foreground: oklch(0.985 0 0);
684
+ --muted: oklch(0.269 0 0);
685
+ --muted-foreground: oklch(0.708 0 0);
686
+ --accent: oklch(0.269 0 0);
687
+ --accent-foreground: oklch(0.985 0 0);
688
+ --destructive: oklch(0.396 0.141 25.723);
689
+ --destructive-foreground: oklch(0.637 0.237 25.331);
690
+ --border: oklch(0.269 0 0);
691
+ --input: oklch(0.269 0 0);
692
+ --ring: oklch(0.439 0 0);
693
+ --chart-1: oklch(0.488 0.243 264.376);
694
+ --chart-2: oklch(0.696 0.17 162.48);
695
+ --chart-3: oklch(0.769 0.188 70.08);
696
+ --chart-4: oklch(0.627 0.265 303.9);
697
+ --chart-5: oklch(0.645 0.246 16.439);
698
+ --sidebar: oklch(0.205 0 0);
699
+ --sidebar-foreground: oklch(0.985 0 0);
700
+ --sidebar-primary: oklch(0.488 0.243 264.376);
701
+ --sidebar-primary-foreground: oklch(0.985 0 0);
702
+ --sidebar-accent: oklch(0.269 0 0);
703
+ --sidebar-accent-foreground: oklch(0.985 0 0);
704
+ --sidebar-border: oklch(0.269 0 0);
705
+ --sidebar-ring: oklch(0.439 0 0);
754
706
  }
755
707
  @layer base {
756
- :root {
757
- --sg-black: 0 0% 15%;
758
- --sg-white: 30 20% 98%;
759
- --sg-gray: 30 10% 70%;
760
- --sg-orange: 33 75% 54%;
761
- --sg-orange-foreground: 0 0% 20%;
762
- --sg-purple: 250 45% 58%;
763
- --sg-purple-foreground: 250 50% 98%;
764
- --sg-red: 0 65% 51%;
765
- --sg-red-foreground: 0 0% 98%;
766
- --sg-green: 120 45% 45%;
767
- --sg-green-foreground: 120 50% 98%;
768
- --sg-primary: var(--sg-orange);
769
- --sg-background: var(--sg-white);
770
- --sg-foreground: var(--sg-black);
771
- --sg-border: var(--sg-primary);
772
- --sg-ring: 210 65% 55%;
773
- --sg-radius: 0.5rem;
774
- --muted: 210 40% 96.1%;
775
- --muted-foreground: 215.4 16.3% 46.9%;
776
- --popover: 0 0% 100%;
777
- --popover-foreground: 222.2 47.4% 11.2%;
778
- --input: 214.3 31.8% 91.4%;
779
- --card: 0 0% 100%;
780
- --card-foreground: 222.2 47.4% 11.2%;
781
- --primary: 222.2 47.4% 11.2%;
782
- --primary-foreground: 210 40% 98%;
783
- --secondary: 210 40% 96.1%;
784
- --secondary-foreground: 222.2 47.4% 11.2%;
785
- --accent: 210 40% 96.1%;
786
- --accent-foreground: 222.2 47.4% 11.2%;
787
- --destructive: 0 100% 50%;
788
- --destructive-foreground: 210 40% 98%;
789
- --test1: 1px;
790
- --sg-spacing-1: 0.25rem;
791
- --sg-spacing-2: 0.5rem;
792
- --sg-spacing-3: 0.75rem;
793
- --sg-spacing-4: 1rem;
794
- --sg-spacing-6: 1.5rem;
795
- --sg-spacing-8: 2rem;
796
- --sg-spacing-12: 3rem;
797
- --sg-spacing-16: 4rem;
798
- --sg-spacing-20: 5rem;
799
- --sg-spacing-24: 6rem;
800
- --sg-spacing-28: 7rem;
801
- --sg-spacing-32: 8rem;
802
- --sg-spacing-36: 9rem;
803
- --sg-spacing-40: 10rem;
804
- body {
805
- background-color: hsl(var(--sg-background));
806
- }
708
+ * {
709
+ border-color: var(--border);
710
+ outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
807
711
  }
808
- .dark {
809
- --background: 224 71% 4%;
810
- --foreground: 213 31% 91%;
811
- --muted: 223 47% 11%;
812
- --muted-foreground: 215.4 16.3% 56.9%;
813
- --accent: 216 34% 17%;
814
- --accent-foreground: 210 40% 98%;
815
- --popover: 224 71% 4%;
816
- --popover-foreground: 215 20.2% 65.1%;
817
- --border: 216 34% 17%;
818
- --input: 216 34% 17%;
819
- --card: 224 71% 4%;
820
- --card-foreground: 213 31% 91%;
821
- --primary: 210 40% 98%;
822
- --primary-foreground: 222.2 47.4% 1.2%;
823
- --secondary: 222.2 47.4% 11.2%;
824
- --secondary-foreground: 210 40% 98%;
825
- --destructive: 0 63% 31%;
826
- --destructive-foreground: 210 40% 98%;
827
- --ring: 216 34% 17%;
712
+ body {
713
+ background-color: var(--sg-color-background);
714
+ color: var(--sg-color-foreground);
828
715
  }
829
716
  }
830
717
  @keyframes enter {
@@ -839,32 +726,9 @@
839
726
  transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
840
727
  }
841
728
  }
842
- @keyframes spin {
843
- to {
844
- transform: rotate(360deg);
845
- }
846
- }
847
- @keyframes ping {
848
- 75%, 100% {
849
- transform: scale(2);
850
- opacity: 0;
851
- }
852
- }
853
- @keyframes pulse {
854
- 50% {
855
- opacity: 0.5;
856
- }
857
- }
858
- @keyframes bounce {
859
- 0%, 100% {
860
- transform: translateY(-25%);
861
- animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
862
- }
863
- 50% {
864
- transform: none;
865
- animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
866
- }
867
- }
729
+ @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
730
+ @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
731
+ @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
868
732
  @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
869
733
  @property --tw-font-weight { syntax: "*"; inherits: false; }
870
734
  @property --tw-tracking { syntax: "*"; inherits: false; }
@@ -880,5 +744,6 @@
880
744
  @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
881
745
  @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
882
746
  @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
883
- /*! tailwindcss v4.0.2 | MIT License | https://tailwindcss.com */
747
+ @property --tw-duration { syntax: "*"; inherits: false; }
748
+ /*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
884
749
  /*# sourceMappingURL=main.css.map */