@ohhwells/bridge 0.1.18 → 0.1.19

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
@@ -3,16 +3,31 @@
3
3
  @layer ohw-theme {
4
4
  :root, :host {
5
5
  --font-sans: Figtree, sans-serif;
6
+ --color-black: #000;
7
+ --color-white: #fff;
6
8
  --spacing: 0.25rem;
7
9
  --text-xs: 12px;
8
10
  --text-xs--line-height: 16px;
9
11
  --text-sm: 14px;
10
12
  --text-sm--line-height: 20px;
13
+ --text-base: 16px;
14
+ --text-base--line-height: 24px;
15
+ --text-lg: 18px;
16
+ --text-lg--line-height: 28px;
17
+ --text-xl: 20px;
18
+ --text-xl--line-height: 28px;
19
+ --text-5xl: 48px;
20
+ --text-5xl--line-height: 1;
21
+ --font-weight-normal: 400;
11
22
  --font-weight-medium: 500;
12
23
  --font-weight-semibold: 600;
24
+ --font-weight-bold: 700;
13
25
  --radius-md: 6px;
26
+ --radius-lg: 0.5rem;
14
27
  --default-transition-duration: 150ms;
15
28
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
29
+ --font-display: 'Instrument Serif', 'Times New Roman', serif;
30
+ --font-body: 'Red Hat Display', system-ui, sans-serif;
16
31
  --color-primary: var(--ohw-primary, #0885FE);
17
32
  --color-primary-foreground: var(--ohw-primary-foreground, #FAFAF9);
18
33
  --color-background: var(--ohw-background, #ffffff);
@@ -27,8 +42,15 @@
27
42
  --color-destructive-foreground: var(--ohw-destructive-foreground, #f8fafc);
28
43
  --color-input: var(--ohw-input, #e2e8f0);
29
44
  --color-ring: var(--ohw-ring, #64748b);
45
+ --text-5xl--letter-spacing: -0.025em;
46
+ --text-xl--letter-spacing: -0.025em;
47
+ --text-lg--letter-spacing: 0em;
48
+ --text-base--letter-spacing: 0em;
30
49
  --text-sm--letter-spacing: 0em;
31
50
  --text-xs--letter-spacing: 0em;
51
+ --text-body: 18px;
52
+ --text-body--line-height: 1.5;
53
+ --tracking-display-tight: -0.030em;
32
54
  }
33
55
  }
34
56
  .pointer-events-auto {
@@ -55,9 +77,15 @@
55
77
  .sticky {
56
78
  position: sticky;
57
79
  }
80
+ .inset-0 {
81
+ inset: calc(var(--spacing) * 0);
82
+ }
58
83
  .left-0 {
59
84
  left: calc(var(--spacing) * 0);
60
85
  }
86
+ .z-10 {
87
+ z-index: 10;
88
+ }
61
89
  .z-2147483646 {
62
90
  z-index: 2147483646;
63
91
  }
@@ -82,6 +110,15 @@
82
110
  max-width: 96rem;
83
111
  }
84
112
  }
113
+ .m-0 {
114
+ margin: calc(var(--spacing) * 0);
115
+ }
116
+ .mx-auto {
117
+ margin-inline: auto;
118
+ }
119
+ .box-border {
120
+ box-sizing: border-box;
121
+ }
85
122
  .block {
86
123
  display: block;
87
124
  }
@@ -103,12 +140,24 @@
103
140
  .h-8 {
104
141
  height: calc(var(--spacing) * 8);
105
142
  }
143
+ .h-9 {
144
+ height: calc(var(--spacing) * 9);
145
+ }
106
146
  .h-10 {
107
147
  height: calc(var(--spacing) * 10);
108
148
  }
149
+ .h-\[70px\] {
150
+ height: 70px;
151
+ }
152
+ .h-\[264px\] {
153
+ height: 264px;
154
+ }
109
155
  .h-dvh {
110
156
  height: 100dvh;
111
157
  }
158
+ .h-px {
159
+ height: 1px;
160
+ }
112
161
  .h-screen {
113
162
  height: 100vh;
114
163
  }
@@ -118,18 +167,46 @@
118
167
  .min-h-screen {
119
168
  min-height: 100vh;
120
169
  }
170
+ .w-10 {
171
+ width: calc(var(--spacing) * 10);
172
+ }
173
+ .w-14 {
174
+ width: calc(var(--spacing) * 14);
175
+ }
176
+ .w-\[72px\] {
177
+ width: 72px;
178
+ }
179
+ .w-\[120px\] {
180
+ width: 120px;
181
+ }
182
+ .w-\[200px\] {
183
+ width: 200px;
184
+ }
121
185
  .w-full {
122
186
  width: 100%;
123
187
  }
188
+ .max-w-\[1280px\] {
189
+ max-width: 1280px;
190
+ }
191
+ .min-w-0 {
192
+ min-width: calc(var(--spacing) * 0);
193
+ }
124
194
  .min-w-8 {
125
195
  min-width: calc(var(--spacing) * 8);
126
196
  }
127
197
  .min-w-10 {
128
198
  min-width: calc(var(--spacing) * 10);
129
199
  }
200
+ .min-w-max {
201
+ min-width: -moz-max-content;
202
+ min-width: max-content;
203
+ }
130
204
  .flex-1 {
131
205
  flex: 1;
132
206
  }
207
+ .flex-none {
208
+ flex: none;
209
+ }
133
210
  .shrink-0 {
134
211
  flex-shrink: 0;
135
212
  }
@@ -139,27 +216,80 @@
139
216
  .transform {
140
217
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
141
218
  }
219
+ .cursor-default {
220
+ cursor: default;
221
+ }
142
222
  .cursor-pointer {
143
223
  cursor: pointer;
144
224
  }
145
225
  .resize {
146
226
  resize: both;
147
227
  }
228
+ .flex-col {
229
+ flex-direction: column;
230
+ }
148
231
  .items-center {
149
232
  align-items: center;
150
233
  }
234
+ .items-end {
235
+ align-items: flex-end;
236
+ }
237
+ .items-stretch {
238
+ align-items: stretch;
239
+ }
240
+ .justify-between {
241
+ justify-content: space-between;
242
+ }
151
243
  .justify-center {
152
244
  justify-content: center;
153
245
  }
154
246
  .gap-1 {
155
247
  gap: calc(var(--spacing) * 1);
156
248
  }
249
+ .gap-1\.5 {
250
+ gap: calc(var(--spacing) * 1.5);
251
+ }
157
252
  .gap-2 {
158
253
  gap: calc(var(--spacing) * 2);
159
254
  }
255
+ .gap-3 {
256
+ gap: calc(var(--spacing) * 3);
257
+ }
258
+ .gap-4 {
259
+ gap: calc(var(--spacing) * 4);
260
+ }
261
+ .gap-6 {
262
+ gap: calc(var(--spacing) * 6);
263
+ }
264
+ .gap-10 {
265
+ gap: calc(var(--spacing) * 10);
266
+ }
267
+ .gap-16 {
268
+ gap: calc(var(--spacing) * 16);
269
+ }
270
+ .gap-\[60px\] {
271
+ gap: 60px;
272
+ }
273
+ .gap-px {
274
+ gap: 1px;
275
+ }
276
+ .truncate {
277
+ overflow: hidden;
278
+ text-overflow: ellipsis;
279
+ white-space: nowrap;
280
+ }
281
+ .overflow-x-auto {
282
+ overflow-x: auto;
283
+ }
284
+ .rounded-\[10px\] {
285
+ border-radius: 10px;
286
+ }
160
287
  .rounded-full {
161
288
  border-radius: calc(infinity * 1px);
162
289
  }
290
+ .rounded-lg {
291
+ border-radius: var(--radius-lg);
292
+ }
163
293
  .rounded-md {
164
294
  border-radius: var(--radius-md);
165
295
  }
@@ -171,12 +301,38 @@
171
301
  border-style: var(--tw-border-style);
172
302
  border-width: 0px;
173
303
  }
304
+ .border-2 {
305
+ border-style: var(--tw-border-style);
306
+ border-width: 2px;
307
+ }
308
+ .border-dashed {
309
+ --tw-border-style: dashed;
310
+ border-style: dashed;
311
+ }
312
+ .border-\[\#E7E5E4\] {
313
+ border-color: #E7E5E4;
314
+ }
174
315
  .border-input {
175
316
  border-color: var(--color-input);
176
317
  }
177
318
  .border-transparent {
178
319
  border-color: transparent;
179
320
  }
321
+ .bg-\(--color-light\,\#FEFFF0\) {
322
+ background-color: var(--color-light,#FEFFF0);
323
+ }
324
+ .bg-\[\#F5F5F4\] {
325
+ background-color: #F5F5F4;
326
+ }
327
+ .bg-\[\#FAFAF9\] {
328
+ background-color: #FAFAF9;
329
+ }
330
+ .bg-black\/20 {
331
+ background-color: color-mix(in srgb, #000 20%, transparent);
332
+ @supports (color: color-mix(in lab, red, red)) {
333
+ background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
334
+ }
335
+ }
180
336
  .bg-destructive {
181
337
  background-color: var(--color-destructive);
182
338
  }
@@ -192,9 +348,21 @@
192
348
  .bg-transparent {
193
349
  background-color: transparent;
194
350
  }
351
+ .bg-white {
352
+ background-color: var(--color-white);
353
+ }
195
354
  .p-1 {
196
355
  padding: calc(var(--spacing) * 1);
197
356
  }
357
+ .p-10 {
358
+ padding: calc(var(--spacing) * 10);
359
+ }
360
+ .p-12 {
361
+ padding: calc(var(--spacing) * 12);
362
+ }
363
+ .px-1 {
364
+ padding-inline: calc(var(--spacing) * 1);
365
+ }
198
366
  .px-1\.5 {
199
367
  padding-inline: calc(var(--spacing) * 1.5);
200
368
  }
@@ -204,39 +372,117 @@
204
372
  .px-2\.5 {
205
373
  padding-inline: calc(var(--spacing) * 2.5);
206
374
  }
375
+ .px-3 {
376
+ padding-inline: calc(var(--spacing) * 3);
377
+ }
378
+ .px-5 {
379
+ padding-inline: calc(var(--spacing) * 5);
380
+ }
207
381
  .px-8 {
208
382
  padding-inline: calc(var(--spacing) * 8);
209
383
  }
384
+ .px-16 {
385
+ padding-inline: calc(var(--spacing) * 16);
386
+ }
210
387
  .py-0\.5 {
211
388
  padding-block: calc(var(--spacing) * 0.5);
212
389
  }
213
390
  .py-1 {
214
391
  padding-block: calc(var(--spacing) * 1);
215
392
  }
393
+ .py-1\.5 {
394
+ padding-block: calc(var(--spacing) * 1.5);
395
+ }
396
+ .py-4 {
397
+ padding-block: calc(var(--spacing) * 4);
398
+ }
399
+ .py-8 {
400
+ padding-block: calc(var(--spacing) * 8);
401
+ }
402
+ .py-20 {
403
+ padding-block: calc(var(--spacing) * 20);
404
+ }
405
+ .py-\[10px\] {
406
+ padding-block: 10px;
407
+ }
408
+ .text-center {
409
+ text-align: center;
410
+ }
411
+ .font-body {
412
+ font-family: var(--font-body);
413
+ }
414
+ .font-display {
415
+ font-family: var(--font-display);
416
+ }
216
417
  .font-sans {
217
418
  font-family: var(--font-sans);
218
419
  }
420
+ .text-5xl {
421
+ font-size: var(--text-5xl);
422
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
423
+ letter-spacing: var(--tw-tracking, var(--text-5xl--letter-spacing));
424
+ }
425
+ .text-base {
426
+ font-size: var(--text-base);
427
+ line-height: var(--tw-leading, var(--text-base--line-height));
428
+ letter-spacing: var(--tw-tracking, var(--text-base--letter-spacing));
429
+ }
430
+ .text-lg {
431
+ font-size: var(--text-lg);
432
+ line-height: var(--tw-leading, var(--text-lg--line-height));
433
+ letter-spacing: var(--tw-tracking, var(--text-lg--letter-spacing));
434
+ }
219
435
  .text-sm {
220
436
  font-size: var(--text-sm);
221
437
  line-height: var(--tw-leading, var(--text-sm--line-height));
222
438
  letter-spacing: var(--tw-tracking, var(--text-sm--letter-spacing));
223
439
  }
440
+ .text-xl {
441
+ font-size: var(--text-xl);
442
+ line-height: var(--tw-leading, var(--text-xl--line-height));
443
+ letter-spacing: var(--tw-tracking, var(--text-xl--letter-spacing));
444
+ }
224
445
  .text-xs {
225
446
  font-size: var(--text-xs);
226
447
  line-height: var(--tw-leading, var(--text-xs--line-height));
227
448
  letter-spacing: var(--tw-tracking, var(--text-xs--letter-spacing));
228
449
  }
450
+ .text-body {
451
+ font-size: var(--text-body);
452
+ line-height: var(--tw-leading, var(--text-body--line-height));
453
+ }
454
+ .font-bold {
455
+ --tw-font-weight: var(--font-weight-bold);
456
+ font-weight: var(--font-weight-bold);
457
+ }
229
458
  .font-medium {
230
459
  --tw-font-weight: var(--font-weight-medium);
231
460
  font-weight: var(--font-weight-medium);
232
461
  }
462
+ .font-normal {
463
+ --tw-font-weight: var(--font-weight-normal);
464
+ font-weight: var(--font-weight-normal);
465
+ }
233
466
  .font-semibold {
234
467
  --tw-font-weight: var(--font-weight-semibold);
235
468
  font-weight: var(--font-weight-semibold);
236
469
  }
470
+ .tracking-display-tight {
471
+ --tw-tracking: var(--tracking-display-tight);
472
+ letter-spacing: var(--tracking-display-tight);
473
+ }
237
474
  .whitespace-nowrap {
238
475
  white-space: nowrap;
239
476
  }
477
+ .text-\(--color-accent\,\#A89B83\) {
478
+ color: var(--color-accent,#A89B83);
479
+ }
480
+ .text-\(--color-dark\,\#200C02\) {
481
+ color: var(--color-dark,#200C02);
482
+ }
483
+ .text-\[\#0A0A0A\] {
484
+ color: #0A0A0A;
485
+ }
240
486
  .text-destructive-foreground {
241
487
  color: var(--color-destructive-foreground);
242
488
  }
@@ -255,6 +501,15 @@
255
501
  .underline {
256
502
  text-decoration-line: underline;
257
503
  }
504
+ .opacity-50 {
505
+ opacity: 50%;
506
+ }
507
+ .opacity-80 {
508
+ opacity: 80%;
509
+ }
510
+ .opacity-100 {
511
+ opacity: 100%;
512
+ }
258
513
  .shadow-popover {
259
514
  --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));
260
515
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -470,6 +725,8 @@
470
725
  }
471
726
  }
472
727
  [data-ohw-bridge-root] {
728
+ --color-primary: var(--ohw-primary, #0885FE);
729
+ --color-primary-foreground: var(--ohw-primary-foreground, #FAFAF9);
473
730
  --ohw-primary: #0885FE;
474
731
  --ohw-primary-foreground: #FAFAF9;
475
732
  --ohw-background: #ffffff;
@@ -478,8 +735,6 @@
478
735
  --ohw-card-foreground: #020617;
479
736
  --ohw-popover: #ffffff;
480
737
  --ohw-popover-foreground: #020617;
481
- --ohw-primary: #0f172a;
482
- --ohw-primary-foreground: #f8fafc;
483
738
  --ohw-hover-primary: #1e293b;
484
739
  --ohw-secondary: #f1f5f9;
485
740
  --ohw-secondary-foreground: #0f172a;
@@ -582,6 +837,10 @@
582
837
  syntax: "*";
583
838
  inherits: false;
584
839
  }
840
+ @property --tw-tracking {
841
+ syntax: "*";
842
+ inherits: false;
843
+ }
585
844
  @property --tw-shadow {
586
845
  syntax: "*";
587
846
  inherits: false;
@@ -715,6 +974,7 @@
715
974
  --tw-skew-y: initial;
716
975
  --tw-border-style: solid;
717
976
  --tw-font-weight: initial;
977
+ --tw-tracking: initial;
718
978
  --tw-shadow: 0 0 #0000;
719
979
  --tw-shadow-color: initial;
720
980
  --tw-shadow-alpha: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ohhwells/bridge",
3
- "version": "0.1.18",
3
+ "version": "0.1.19",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",