@ohhwells/bridge 0.1.14 → 0.1.16-next.12

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/styles.css CHANGED
@@ -2,53 +2,69 @@
2
2
  @layer properties;
3
3
  @layer ohw-theme {
4
4
  :root, :host {
5
- --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
6
- 'Noto Color Emoji';
5
+ --font-sans: Figtree, sans-serif;
6
+ --color-red-500: oklch(63.7% 0.237 25.331);
7
+ --color-black: #000;
8
+ --color-white: #fff;
7
9
  --spacing: 0.25rem;
8
- --text-xs: 0.75rem;
9
- --text-xs--line-height: calc(1 / 0.75);
10
- --text-sm: 0.875rem;
11
- --text-sm--line-height: calc(1.25 / 0.875);
12
- --text-base: 1rem;
13
- --text-base--line-height: calc(1.5 / 1);
14
- --text-lg: 1.125rem;
15
- --text-lg--line-height: calc(1.75 / 1.125);
16
- --text-xl: 1.25rem;
17
- --text-xl--line-height: calc(1.75 / 1.25);
18
- --text-2xl: 1.5rem;
19
- --text-2xl--line-height: calc(2 / 1.5);
20
- --text-3xl: 1.875rem;
21
- --text-3xl--line-height: calc(2.25 / 1.875);
22
- --text-4xl: 2.25rem;
23
- --text-4xl--line-height: calc(2.5 / 2.25);
24
- --text-5xl: 3rem;
10
+ --text-xs: 12px;
11
+ --text-xs--line-height: 16px;
12
+ --text-sm: 14px;
13
+ --text-sm--line-height: 20px;
14
+ --text-base: 16px;
15
+ --text-base--line-height: 24px;
16
+ --text-lg: 18px;
17
+ --text-lg--line-height: 28px;
18
+ --text-xl: 20px;
19
+ --text-xl--line-height: 28px;
20
+ --text-4xl: 36px;
21
+ --text-4xl--line-height: 40px;
22
+ --text-5xl: 48px;
25
23
  --text-5xl--line-height: 1;
26
- --text-6xl: 3.75rem;
27
- --text-6xl--line-height: 1;
28
- --text-7xl: 4.5rem;
29
- --text-7xl--line-height: 1;
30
- --text-8xl: 6rem;
31
- --text-8xl--line-height: 1;
32
- --text-9xl: 8rem;
33
- --text-9xl--line-height: 1;
24
+ --font-weight-normal: 400;
34
25
  --font-weight-medium: 500;
26
+ --font-weight-semibold: 600;
27
+ --font-weight-bold: 700;
28
+ --leading-tight: 1.25;
35
29
  --radius-md: 6px;
30
+ --radius-lg: 0.5rem;
31
+ --radius-xl: 0.75rem;
36
32
  --default-transition-duration: 150ms;
37
33
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
34
+ --font-display: 'Instrument Serif', 'Times New Roman', serif;
35
+ --font-body: 'Red Hat Display', system-ui, sans-serif;
36
+ --color-primary: var(--ohw-primary, #0885FE);
37
+ --color-primary-foreground: var(--ohw-primary-foreground, #FAFAF9);
38
38
  --color-background: var(--ohw-background, #ffffff);
39
39
  --color-foreground: var(--ohw-foreground, #020617);
40
+ --color-secondary: var(--ohw-secondary, #f1f5f9);
41
+ --color-secondary-foreground: var(--ohw-secondary-foreground, #0f172a);
40
42
  --color-muted: var(--ohw-muted, #f1f5f9);
41
43
  --color-muted-foreground: var(--ohw-muted-foreground, #64748b);
42
44
  --color-accent: var(--ohw-accent, #f1f5f9);
43
45
  --color-accent-foreground: var(--ohw-accent-foreground, #0f172a);
44
46
  --color-destructive: var(--ohw-destructive, #dc2626);
47
+ --color-destructive-foreground: var(--ohw-destructive-foreground, #f8fafc);
45
48
  --color-input: var(--ohw-input, #e2e8f0);
46
49
  --color-ring: var(--ohw-ring, #64748b);
50
+ --text-5xl--letter-spacing: -0.025em;
51
+ --text-4xl--letter-spacing: -0.025em;
52
+ --text-xl--letter-spacing: -0.025em;
53
+ --text-lg--letter-spacing: 0em;
54
+ --text-base--letter-spacing: 0em;
55
+ --text-sm--letter-spacing: 0em;
56
+ --text-xs--letter-spacing: 0em;
57
+ --text-body: 18px;
58
+ --text-body--line-height: 1.5;
59
+ --tracking-display-tight: -0.030em;
47
60
  }
48
61
  }
49
62
  .pointer-events-auto {
50
63
  pointer-events: auto;
51
64
  }
65
+ .pointer-events-none {
66
+ pointer-events: none;
67
+ }
52
68
  .visible {
53
69
  visibility: visible;
54
70
  }
@@ -67,6 +83,42 @@
67
83
  .sticky {
68
84
  position: sticky;
69
85
  }
86
+ .inset-0 {
87
+ inset: calc(var(--spacing) * 0);
88
+ }
89
+ .top-0 {
90
+ top: calc(var(--spacing) * 0);
91
+ }
92
+ .top-1\/2 {
93
+ top: calc(1 / 2 * 100%);
94
+ }
95
+ .top-2\.5 {
96
+ top: calc(var(--spacing) * 2.5);
97
+ }
98
+ .right-0 {
99
+ right: calc(var(--spacing) * 0);
100
+ }
101
+ .right-1\.5 {
102
+ right: calc(var(--spacing) * 1.5);
103
+ }
104
+ .bottom-0 {
105
+ bottom: calc(var(--spacing) * 0);
106
+ }
107
+ .left-0 {
108
+ left: calc(var(--spacing) * 0);
109
+ }
110
+ .left-1\/2 {
111
+ left: calc(1 / 2 * 100%);
112
+ }
113
+ .z-10 {
114
+ z-index: 10;
115
+ }
116
+ .z-50 {
117
+ z-index: 50;
118
+ }
119
+ .z-2147483646 {
120
+ z-index: 2147483646;
121
+ }
70
122
  .z-2147483647 {
71
123
  z-index: 2147483647;
72
124
  }
@@ -88,6 +140,21 @@
88
140
  max-width: 96rem;
89
141
  }
90
142
  }
143
+ .m-0 {
144
+ margin: calc(var(--spacing) * 0);
145
+ }
146
+ .mx-auto {
147
+ margin-inline: auto;
148
+ }
149
+ .mt-0\.5 {
150
+ margin-top: calc(var(--spacing) * 0.5);
151
+ }
152
+ .mb-8 {
153
+ margin-bottom: calc(var(--spacing) * 8);
154
+ }
155
+ .box-border {
156
+ box-sizing: border-box;
157
+ }
91
158
  .block {
92
159
  display: block;
93
160
  }
@@ -106,15 +173,30 @@
106
173
  .inline-flex {
107
174
  display: inline-flex;
108
175
  }
176
+ .h-7 {
177
+ height: calc(var(--spacing) * 7);
178
+ }
109
179
  .h-8 {
110
180
  height: calc(var(--spacing) * 8);
111
181
  }
182
+ .h-9 {
183
+ height: calc(var(--spacing) * 9);
184
+ }
112
185
  .h-10 {
113
186
  height: calc(var(--spacing) * 10);
114
187
  }
188
+ .h-\[70px\] {
189
+ height: 70px;
190
+ }
191
+ .h-\[264px\] {
192
+ height: 264px;
193
+ }
115
194
  .h-dvh {
116
195
  height: 100dvh;
117
196
  }
197
+ .h-px {
198
+ height: 1px;
199
+ }
118
200
  .h-screen {
119
201
  height: 100vh;
120
202
  }
@@ -124,39 +206,142 @@
124
206
  .min-h-screen {
125
207
  min-height: 100vh;
126
208
  }
209
+ .w-7 {
210
+ width: calc(var(--spacing) * 7);
211
+ }
212
+ .w-8 {
213
+ width: calc(var(--spacing) * 8);
214
+ }
215
+ .w-10 {
216
+ width: calc(var(--spacing) * 10);
217
+ }
218
+ .w-14 {
219
+ width: calc(var(--spacing) * 14);
220
+ }
221
+ .w-full {
222
+ width: 100%;
223
+ }
224
+ .max-w-\[1280px\] {
225
+ max-width: 1280px;
226
+ }
227
+ .min-w-0 {
228
+ min-width: calc(var(--spacing) * 0);
229
+ }
127
230
  .min-w-8 {
128
231
  min-width: calc(var(--spacing) * 8);
129
232
  }
130
233
  .min-w-10 {
131
234
  min-width: calc(var(--spacing) * 10);
132
235
  }
236
+ .flex-1 {
237
+ flex: 1;
238
+ }
239
+ .shrink-0 {
240
+ flex-shrink: 0;
241
+ }
133
242
  .grow {
134
243
  flex-grow: 1;
135
244
  }
245
+ .-translate-x-1\/2 {
246
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
247
+ translate: var(--tw-translate-x) var(--tw-translate-y);
248
+ }
249
+ .-translate-y-1\/2 {
250
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
251
+ translate: var(--tw-translate-x) var(--tw-translate-y);
252
+ }
136
253
  .transform {
137
254
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
138
255
  }
256
+ .cursor-default {
257
+ cursor: default;
258
+ }
139
259
  .cursor-pointer {
140
260
  cursor: pointer;
141
261
  }
142
262
  .resize {
143
263
  resize: both;
144
264
  }
265
+ .flex-col {
266
+ flex-direction: column;
267
+ }
145
268
  .items-center {
146
269
  align-items: center;
147
270
  }
271
+ .items-end {
272
+ align-items: flex-end;
273
+ }
274
+ .items-start {
275
+ align-items: flex-start;
276
+ }
277
+ .items-stretch {
278
+ align-items: stretch;
279
+ }
280
+ .justify-between {
281
+ justify-content: space-between;
282
+ }
148
283
  .justify-center {
149
284
  justify-content: center;
150
285
  }
286
+ .justify-end {
287
+ justify-content: flex-end;
288
+ }
151
289
  .gap-1 {
152
290
  gap: calc(var(--spacing) * 1);
153
291
  }
292
+ .gap-1\.5 {
293
+ gap: calc(var(--spacing) * 1.5);
294
+ }
154
295
  .gap-2 {
155
296
  gap: calc(var(--spacing) * 2);
156
297
  }
298
+ .gap-3 {
299
+ gap: calc(var(--spacing) * 3);
300
+ }
301
+ .gap-4 {
302
+ gap: calc(var(--spacing) * 4);
303
+ }
304
+ .gap-6 {
305
+ gap: calc(var(--spacing) * 6);
306
+ }
307
+ .gap-10 {
308
+ gap: calc(var(--spacing) * 10);
309
+ }
310
+ .gap-16 {
311
+ gap: calc(var(--spacing) * 16);
312
+ }
313
+ .gap-\[60px\] {
314
+ gap: 60px;
315
+ }
316
+ .gap-px {
317
+ gap: 1px;
318
+ }
319
+ .truncate {
320
+ overflow: hidden;
321
+ text-overflow: ellipsis;
322
+ white-space: nowrap;
323
+ }
324
+ .overflow-hidden {
325
+ overflow: hidden;
326
+ }
327
+ .overflow-x-auto {
328
+ overflow-x: auto;
329
+ }
330
+ .rounded-\[10px\] {
331
+ border-radius: 10px;
332
+ }
333
+ .rounded-full {
334
+ border-radius: calc(infinity * 1px);
335
+ }
336
+ .rounded-lg {
337
+ border-radius: var(--radius-lg);
338
+ }
157
339
  .rounded-md {
158
340
  border-radius: var(--radius-md);
159
341
  }
342
+ .rounded-xl {
343
+ border-radius: var(--radius-xl);
344
+ }
160
345
  .border {
161
346
  border-style: var(--tw-border-style);
162
347
  border-width: 1px;
@@ -165,18 +350,75 @@
165
350
  border-style: var(--tw-border-style);
166
351
  border-width: 0px;
167
352
  }
353
+ .border-2 {
354
+ border-style: var(--tw-border-style);
355
+ border-width: 2px;
356
+ }
357
+ .border-dashed {
358
+ --tw-border-style: dashed;
359
+ border-style: dashed;
360
+ }
361
+ .border-none {
362
+ --tw-border-style: none;
363
+ border-style: none;
364
+ }
365
+ .border-\[\#E7E5E4\] {
366
+ border-color: #E7E5E4;
367
+ }
168
368
  .border-input {
169
369
  border-color: var(--color-input);
170
370
  }
371
+ .border-transparent {
372
+ border-color: transparent;
373
+ }
374
+ .bg-\(--color-light\,\#FEFFF0\) {
375
+ background-color: var(--color-light,#FEFFF0);
376
+ }
377
+ .bg-\[\#F5F5F4\] {
378
+ background-color: #F5F5F4;
379
+ }
380
+ .bg-\[\#FAFAF9\] {
381
+ background-color: #FAFAF9;
382
+ }
383
+ .bg-black\/20 {
384
+ background-color: color-mix(in srgb, #000 20%, transparent);
385
+ @supports (color: color-mix(in lab, red, red)) {
386
+ background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
387
+ }
388
+ }
389
+ .bg-destructive {
390
+ background-color: var(--color-destructive);
391
+ }
171
392
  .bg-muted {
172
393
  background-color: var(--color-muted);
173
394
  }
395
+ .bg-primary {
396
+ background-color: var(--color-primary);
397
+ }
398
+ .bg-secondary {
399
+ background-color: var(--color-secondary);
400
+ }
174
401
  .bg-transparent {
175
402
  background-color: transparent;
176
403
  }
404
+ .bg-white {
405
+ background-color: var(--color-white);
406
+ }
407
+ .p-0 {
408
+ padding: calc(var(--spacing) * 0);
409
+ }
177
410
  .p-1 {
178
411
  padding: calc(var(--spacing) * 1);
179
412
  }
413
+ .p-6 {
414
+ padding: calc(var(--spacing) * 6);
415
+ }
416
+ .p-12 {
417
+ padding: calc(var(--spacing) * 12);
418
+ }
419
+ .px-1 {
420
+ padding-inline: calc(var(--spacing) * 1);
421
+ }
180
422
  .px-1\.5 {
181
423
  padding-inline: calc(var(--spacing) * 1.5);
182
424
  }
@@ -186,84 +428,168 @@
186
428
  .px-2\.5 {
187
429
  padding-inline: calc(var(--spacing) * 2.5);
188
430
  }
431
+ .px-3 {
432
+ padding-inline: calc(var(--spacing) * 3);
433
+ }
434
+ .px-5 {
435
+ padding-inline: calc(var(--spacing) * 5);
436
+ }
437
+ .px-7 {
438
+ padding-inline: calc(var(--spacing) * 7);
439
+ }
440
+ .px-8 {
441
+ padding-inline: calc(var(--spacing) * 8);
442
+ }
443
+ .py-0\.5 {
444
+ padding-block: calc(var(--spacing) * 0.5);
445
+ }
189
446
  .py-1 {
190
447
  padding-block: calc(var(--spacing) * 1);
191
448
  }
192
- .font-sans {
193
- font-family: var(--font-sans);
449
+ .py-1\.5 {
450
+ padding-block: calc(var(--spacing) * 1.5);
194
451
  }
195
- .text-2xl {
196
- font-size: var(--text-2xl);
197
- line-height: var(--tw-leading, var(--text-2xl--line-height));
452
+ .py-4 {
453
+ padding-block: calc(var(--spacing) * 4);
198
454
  }
199
- .text-3xl {
200
- font-size: var(--text-3xl);
201
- line-height: var(--tw-leading, var(--text-3xl--line-height));
455
+ .py-8 {
456
+ padding-block: calc(var(--spacing) * 8);
202
457
  }
203
- .text-4xl {
204
- font-size: var(--text-4xl);
205
- line-height: var(--tw-leading, var(--text-4xl--line-height));
458
+ .py-10 {
459
+ padding-block: calc(var(--spacing) * 10);
460
+ }
461
+ .py-12 {
462
+ padding-block: calc(var(--spacing) * 12);
206
463
  }
207
- .text-5xl {
208
- font-size: var(--text-5xl);
209
- line-height: var(--tw-leading, var(--text-5xl--line-height));
464
+ .py-\[10px\] {
465
+ padding-block: 10px;
210
466
  }
211
- .text-6xl {
212
- font-size: var(--text-6xl);
213
- line-height: var(--tw-leading, var(--text-6xl--line-height));
467
+ .pt-2 {
468
+ padding-top: calc(var(--spacing) * 2);
214
469
  }
215
- .text-7xl {
216
- font-size: var(--text-7xl);
217
- line-height: var(--tw-leading, var(--text-7xl--line-height));
470
+ .pb-6 {
471
+ padding-bottom: calc(var(--spacing) * 6);
218
472
  }
219
- .text-8xl {
220
- font-size: var(--text-8xl);
221
- line-height: var(--tw-leading, var(--text-8xl--line-height));
473
+ .text-center {
474
+ text-align: center;
222
475
  }
223
- .text-9xl {
224
- font-size: var(--text-9xl);
225
- line-height: var(--tw-leading, var(--text-9xl--line-height));
476
+ .font-body {
477
+ font-family: var(--font-body);
478
+ }
479
+ .font-display {
480
+ font-family: var(--font-display);
481
+ }
482
+ .font-sans {
483
+ font-family: var(--font-sans);
484
+ }
485
+ .text-4xl {
486
+ font-size: var(--text-4xl);
487
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
488
+ letter-spacing: var(--tw-tracking, var(--text-4xl--letter-spacing));
226
489
  }
227
490
  .text-base {
228
491
  font-size: var(--text-base);
229
492
  line-height: var(--tw-leading, var(--text-base--line-height));
493
+ letter-spacing: var(--tw-tracking, var(--text-base--letter-spacing));
230
494
  }
231
495
  .text-lg {
232
496
  font-size: var(--text-lg);
233
497
  line-height: var(--tw-leading, var(--text-lg--line-height));
498
+ letter-spacing: var(--tw-tracking, var(--text-lg--letter-spacing));
234
499
  }
235
500
  .text-sm {
236
501
  font-size: var(--text-sm);
237
502
  line-height: var(--tw-leading, var(--text-sm--line-height));
503
+ letter-spacing: var(--tw-tracking, var(--text-sm--letter-spacing));
238
504
  }
239
505
  .text-xl {
240
506
  font-size: var(--text-xl);
241
507
  line-height: var(--tw-leading, var(--text-xl--line-height));
508
+ letter-spacing: var(--tw-tracking, var(--text-xl--letter-spacing));
242
509
  }
243
510
  .text-xs {
244
511
  font-size: var(--text-xs);
245
512
  line-height: var(--tw-leading, var(--text-xs--line-height));
513
+ letter-spacing: var(--tw-tracking, var(--text-xs--letter-spacing));
514
+ }
515
+ .text-body {
516
+ font-size: var(--text-body);
517
+ line-height: var(--tw-leading, var(--text-body--line-height));
518
+ }
519
+ .leading-tight {
520
+ --tw-leading: var(--leading-tight);
521
+ line-height: var(--leading-tight);
522
+ }
523
+ .font-bold {
524
+ --tw-font-weight: var(--font-weight-bold);
525
+ font-weight: var(--font-weight-bold);
246
526
  }
247
527
  .font-medium {
248
528
  --tw-font-weight: var(--font-weight-medium);
249
529
  font-weight: var(--font-weight-medium);
250
530
  }
531
+ .font-normal {
532
+ --tw-font-weight: var(--font-weight-normal);
533
+ font-weight: var(--font-weight-normal);
534
+ }
535
+ .font-semibold {
536
+ --tw-font-weight: var(--font-weight-semibold);
537
+ font-weight: var(--font-weight-semibold);
538
+ }
539
+ .tracking-display-tight {
540
+ --tw-tracking: var(--tracking-display-tight);
541
+ letter-spacing: var(--tracking-display-tight);
542
+ }
251
543
  .whitespace-nowrap {
252
544
  white-space: nowrap;
253
545
  }
546
+ .text-\(--color-accent\,\#A89B83\) {
547
+ color: var(--color-accent,#A89B83);
548
+ }
549
+ .text-\(--color-dark\,\#200C02\) {
550
+ color: var(--color-dark,#200C02);
551
+ }
552
+ .text-\[\#0A0A0A\] {
553
+ color: #0A0A0A;
554
+ }
555
+ .text-destructive-foreground {
556
+ color: var(--color-destructive-foreground);
557
+ }
254
558
  .text-foreground {
255
559
  color: var(--color-foreground);
256
560
  }
561
+ .text-primary-foreground {
562
+ color: var(--color-primary-foreground);
563
+ }
564
+ .text-red-500 {
565
+ color: var(--color-red-500);
566
+ }
567
+ .text-secondary-foreground {
568
+ color: var(--color-secondary-foreground);
569
+ }
257
570
  .italic {
258
571
  font-style: italic;
259
572
  }
260
573
  .underline {
261
574
  text-decoration-line: underline;
262
575
  }
576
+ .opacity-50 {
577
+ opacity: 50%;
578
+ }
579
+ .opacity-80 {
580
+ opacity: 80%;
581
+ }
582
+ .opacity-100 {
583
+ opacity: 100%;
584
+ }
263
585
  .shadow-popover {
264
586
  --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0px 1px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.06));
265
587
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
266
588
  }
589
+ .shadow-xl {
590
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
591
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
592
+ }
267
593
  .shadow-xs {
268
594
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
269
595
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -280,6 +606,11 @@
280
606
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
281
607
  transition-duration: var(--tw-duration, var(--default-transition-duration));
282
608
  }
609
+ .transition-colors {
610
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
611
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
612
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
613
+ }
283
614
  .outline-none {
284
615
  --tw-outline-style: none;
285
616
  outline-style: none;
@@ -291,6 +622,16 @@
291
622
  }
292
623
  }
293
624
  }
625
+ .hover\:bg-destructive\/80 {
626
+ &:hover {
627
+ @media (hover: hover) {
628
+ background-color: var(--color-destructive);
629
+ @supports (color: color-mix(in lab, red, red)) {
630
+ background-color: color-mix(in oklab, var(--color-destructive) 80%, transparent);
631
+ }
632
+ }
633
+ }
634
+ }
294
635
  .hover\:bg-muted {
295
636
  &:hover {
296
637
  @media (hover: hover) {
@@ -298,6 +639,23 @@
298
639
  }
299
640
  }
300
641
  }
642
+ .hover\:bg-primary {
643
+ &:hover {
644
+ @media (hover: hover) {
645
+ background-color: var(--color-primary);
646
+ }
647
+ }
648
+ }
649
+ .hover\:bg-secondary\/80 {
650
+ &:hover {
651
+ @media (hover: hover) {
652
+ background-color: var(--color-secondary);
653
+ @supports (color: color-mix(in lab, red, red)) {
654
+ background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
655
+ }
656
+ }
657
+ }
658
+ }
301
659
  .hover\:bg-transparent {
302
660
  &:hover {
303
661
  @media (hover: hover) {
@@ -326,6 +684,29 @@
326
684
  }
327
685
  }
328
686
  }
687
+ .focus\:ring-2 {
688
+ &:focus {
689
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
690
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
691
+ }
692
+ }
693
+ .focus\:ring-ring {
694
+ &:focus {
695
+ --tw-ring-color: var(--color-ring);
696
+ }
697
+ }
698
+ .focus\:ring-offset-2 {
699
+ &:focus {
700
+ --tw-ring-offset-width: 2px;
701
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
702
+ }
703
+ }
704
+ .focus\:outline-none {
705
+ &:focus {
706
+ --tw-outline-style: none;
707
+ outline-style: none;
708
+ }
709
+ }
329
710
  .focus-visible\:border-ring {
330
711
  &:focus-visible {
331
712
  border-color: var(--color-ring);
@@ -350,6 +731,11 @@
350
731
  pointer-events: none;
351
732
  }
352
733
  }
734
+ .disabled\:cursor-not-allowed {
735
+ &:disabled {
736
+ cursor: not-allowed;
737
+ }
738
+ }
353
739
  .disabled\:opacity-50 {
354
740
  &:disabled {
355
741
  opacity: 50%;
@@ -403,6 +789,68 @@
403
789
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
404
790
  }
405
791
  }
792
+ .sm\:contents {
793
+ @media (width >= 40rem) {
794
+ display: contents;
795
+ }
796
+ }
797
+ .sm\:flex {
798
+ @media (width >= 40rem) {
799
+ display: flex;
800
+ }
801
+ }
802
+ .sm\:hidden {
803
+ @media (width >= 40rem) {
804
+ display: none;
805
+ }
806
+ }
807
+ .sm\:w-\[120px\] {
808
+ @media (width >= 40rem) {
809
+ width: 120px;
810
+ }
811
+ }
812
+ .sm\:w-\[200px\] {
813
+ @media (width >= 40rem) {
814
+ width: 200px;
815
+ }
816
+ }
817
+ .sm\:shrink-0 {
818
+ @media (width >= 40rem) {
819
+ flex-shrink: 0;
820
+ }
821
+ }
822
+ .sm\:items-center {
823
+ @media (width >= 40rem) {
824
+ align-items: center;
825
+ }
826
+ }
827
+ .sm\:gap-\[60px\] {
828
+ @media (width >= 40rem) {
829
+ gap: 60px;
830
+ }
831
+ }
832
+ .sm\:p-10 {
833
+ @media (width >= 40rem) {
834
+ padding: calc(var(--spacing) * 10);
835
+ }
836
+ }
837
+ .sm\:px-16 {
838
+ @media (width >= 40rem) {
839
+ padding-inline: calc(var(--spacing) * 16);
840
+ }
841
+ }
842
+ .sm\:py-20 {
843
+ @media (width >= 40rem) {
844
+ padding-block: calc(var(--spacing) * 20);
845
+ }
846
+ }
847
+ .sm\:text-5xl {
848
+ @media (width >= 40rem) {
849
+ font-size: var(--text-5xl);
850
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
851
+ letter-spacing: var(--tw-tracking, var(--text-5xl--letter-spacing));
852
+ }
853
+ }
406
854
  .\[\&_svg\]\:pointer-events-none {
407
855
  & svg {
408
856
  pointer-events: none;
@@ -420,14 +868,16 @@
420
868
  }
421
869
  }
422
870
  [data-ohw-bridge-root] {
871
+ --color-primary: var(--ohw-primary, #0885FE);
872
+ --color-primary-foreground: var(--ohw-primary-foreground, #FAFAF9);
873
+ --ohw-primary: #0885FE;
874
+ --ohw-primary-foreground: #FAFAF9;
423
875
  --ohw-background: #ffffff;
424
876
  --ohw-foreground: #020617;
425
877
  --ohw-card: #ffffff;
426
878
  --ohw-card-foreground: #020617;
427
879
  --ohw-popover: #ffffff;
428
880
  --ohw-popover-foreground: #020617;
429
- --ohw-primary: #0f172a;
430
- --ohw-primary-foreground: #f8fafc;
431
881
  --ohw-hover-primary: #1e293b;
432
882
  --ohw-secondary: #f1f5f9;
433
883
  --ohw-secondary-foreground: #0f172a;
@@ -486,6 +936,9 @@
486
936
  --ohw-hover-success: #16a34a;
487
937
  }
488
938
  @layer base {
939
+ [data-ohw-bridge-root] {
940
+ font-family: var(--font-sans);
941
+ }
489
942
  [data-ohw-bridge-root] button {
490
943
  border: none;
491
944
  background: none;
@@ -498,6 +951,21 @@
498
951
  appearance: none;
499
952
  }
500
953
  }
954
+ @property --tw-translate-x {
955
+ syntax: "*";
956
+ inherits: false;
957
+ initial-value: 0;
958
+ }
959
+ @property --tw-translate-y {
960
+ syntax: "*";
961
+ inherits: false;
962
+ initial-value: 0;
963
+ }
964
+ @property --tw-translate-z {
965
+ syntax: "*";
966
+ inherits: false;
967
+ initial-value: 0;
968
+ }
501
969
  @property --tw-rotate-x {
502
970
  syntax: "*";
503
971
  inherits: false;
@@ -523,10 +991,18 @@
523
991
  inherits: false;
524
992
  initial-value: solid;
525
993
  }
994
+ @property --tw-leading {
995
+ syntax: "*";
996
+ inherits: false;
997
+ }
526
998
  @property --tw-font-weight {
527
999
  syntax: "*";
528
1000
  inherits: false;
529
1001
  }
1002
+ @property --tw-tracking {
1003
+ syntax: "*";
1004
+ inherits: false;
1005
+ }
530
1006
  @property --tw-shadow {
531
1007
  syntax: "*";
532
1008
  inherits: false;
@@ -653,13 +1129,18 @@
653
1129
  @layer properties {
654
1130
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
655
1131
  *, ::before, ::after, ::backdrop {
1132
+ --tw-translate-x: 0;
1133
+ --tw-translate-y: 0;
1134
+ --tw-translate-z: 0;
656
1135
  --tw-rotate-x: initial;
657
1136
  --tw-rotate-y: initial;
658
1137
  --tw-rotate-z: initial;
659
1138
  --tw-skew-x: initial;
660
1139
  --tw-skew-y: initial;
661
1140
  --tw-border-style: solid;
1141
+ --tw-leading: initial;
662
1142
  --tw-font-weight: initial;
1143
+ --tw-tracking: initial;
663
1144
  --tw-shadow: 0 0 #0000;
664
1145
  --tw-shadow-color: initial;
665
1146
  --tw-shadow-alpha: 100%;