@ohhwells/bridge 0.1.37 → 0.1.38-next.57

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
@@ -4,6 +4,7 @@
4
4
  :root, :host {
5
5
  --font-sans: Figtree, sans-serif;
6
6
  --color-red-500: oklch(63.7% 0.237 25.331);
7
+ --color-gray-300: oklch(87.2% 0.01 258.338);
7
8
  --color-stone-200: oklch(92.3% 0.003 48.717);
8
9
  --color-stone-500: #78716C;
9
10
  --color-stone-950: #0C0A09;
@@ -11,7 +12,6 @@
11
12
  --color-white: #fff;
12
13
  --spacing: 0.25rem;
13
14
  --container-xs: 20rem;
14
- --container-md: 28rem;
15
15
  --text-xs: 12px;
16
16
  --text-xs--line-height: 16px;
17
17
  --text-sm: 14px;
@@ -22,10 +22,6 @@
22
22
  --text-lg--line-height: 28px;
23
23
  --text-xl: 20px;
24
24
  --text-xl--line-height: 28px;
25
- --text-4xl: 36px;
26
- --text-4xl--line-height: 40px;
27
- --text-5xl: 48px;
28
- --text-5xl--line-height: 1;
29
25
  --font-weight-normal: 400;
30
26
  --font-weight-medium: 500;
31
27
  --font-weight-semibold: 600;
@@ -36,6 +32,8 @@
36
32
  --radius-md: 6px;
37
33
  --radius-lg: 0.5rem;
38
34
  --radius-xl: 0.75rem;
35
+ --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
36
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
39
37
  --default-transition-duration: 150ms;
40
38
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
41
39
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
@@ -58,8 +56,6 @@
58
56
  --color-border: var(--ohw-border, #e2e8f0);
59
57
  --color-input: var(--ohw-input, #e2e8f0);
60
58
  --color-ring: var(--ohw-ring, #64748b);
61
- --text-5xl--letter-spacing: -0.025em;
62
- --text-4xl--letter-spacing: -0.025em;
63
59
  --text-xl--letter-spacing: -0.025em;
64
60
  --text-lg--letter-spacing: 0em;
65
61
  --text-base--letter-spacing: 0em;
@@ -67,6 +63,7 @@
67
63
  --text-xs--letter-spacing: 0em;
68
64
  --text-body: 18px;
69
65
  --text-body--line-height: 1.5;
66
+ --radius-none: 0px;
70
67
  --tracking-display-tight: -0.030em;
71
68
  }
72
69
  }
@@ -106,6 +103,9 @@
106
103
  .top-2\.5 {
107
104
  top: calc(var(--spacing) * 2.5);
108
105
  }
106
+ .top-3 {
107
+ top: calc(var(--spacing) * 3);
108
+ }
109
109
  .top-\[9px\] {
110
110
  top: 9px;
111
111
  }
@@ -121,6 +121,9 @@
121
121
  .right-1\.5 {
122
122
  right: calc(var(--spacing) * 1.5);
123
123
  }
124
+ .right-3 {
125
+ right: calc(var(--spacing) * 3);
126
+ }
124
127
  .right-\[9px\] {
125
128
  right: 9px;
126
129
  }
@@ -136,6 +139,9 @@
136
139
  .left-1\/2 {
137
140
  left: calc(1 / 2 * 100%);
138
141
  }
142
+ .left-5 {
143
+ left: calc(var(--spacing) * 5);
144
+ }
139
145
  .z-10 {
140
146
  z-index: 10;
141
147
  }
@@ -148,6 +154,12 @@
148
154
  .z-2147483647 {
149
155
  z-index: 2147483647;
150
156
  }
157
+ .z-\[1\] {
158
+ z-index: 1;
159
+ }
160
+ .z-\[2\] {
161
+ z-index: 2;
162
+ }
151
163
  .z-\[2147483646\] {
152
164
  z-index: 2147483646;
153
165
  }
@@ -208,6 +220,9 @@
208
220
  .flex {
209
221
  display: flex;
210
222
  }
223
+ .grid {
224
+ display: grid;
225
+ }
211
226
  .hidden {
212
227
  display: none;
213
228
  }
@@ -221,6 +236,18 @@
221
236
  width: calc(var(--spacing) * 4);
222
237
  height: calc(var(--spacing) * 4);
223
238
  }
239
+ .size-5 {
240
+ width: calc(var(--spacing) * 5);
241
+ height: calc(var(--spacing) * 5);
242
+ }
243
+ .size-7 {
244
+ width: calc(var(--spacing) * 7);
245
+ height: calc(var(--spacing) * 7);
246
+ }
247
+ .size-8 {
248
+ width: calc(var(--spacing) * 8);
249
+ height: calc(var(--spacing) * 8);
250
+ }
224
251
  .h-6 {
225
252
  height: calc(var(--spacing) * 6);
226
253
  }
@@ -236,8 +263,8 @@
236
263
  .h-10 {
237
264
  height: calc(var(--spacing) * 10);
238
265
  }
239
- .h-20 {
240
- height: calc(var(--spacing) * 20);
266
+ .h-\[36px\] {
267
+ height: 36px;
241
268
  }
242
269
  .h-\[70px\] {
243
270
  height: 70px;
@@ -306,18 +333,12 @@
306
333
  .w-px {
307
334
  width: 1px;
308
335
  }
309
- .max-w-\[483px\] {
310
- max-width: 483px;
336
+ .max-w-\[448px\] {
337
+ max-width: 448px;
311
338
  }
312
339
  .max-w-\[1280px\] {
313
340
  max-width: 1280px;
314
341
  }
315
- .max-w-\[calc\(100\%-16px\)\] {
316
- max-width: calc(100% - 16px);
317
- }
318
- .max-w-\[calc\(100vw-16px\)\] {
319
- max-width: calc(100vw - 16px);
320
- }
321
342
  .max-w-xs {
322
343
  max-width: var(--container-xs);
323
344
  }
@@ -357,9 +378,16 @@
357
378
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
358
379
  translate: var(--tw-translate-x) var(--tw-translate-y);
359
380
  }
381
+ .translate-y-1\/2 {
382
+ --tw-translate-y: calc(1 / 2 * 100%);
383
+ translate: var(--tw-translate-x) var(--tw-translate-y);
384
+ }
360
385
  .transform {
361
386
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
362
387
  }
388
+ .animate-pulse {
389
+ animation: var(--animate-pulse);
390
+ }
363
391
  .cursor-default {
364
392
  cursor: default;
365
393
  }
@@ -440,6 +468,9 @@
440
468
  .overflow-hidden {
441
469
  overflow: hidden;
442
470
  }
471
+ .overflow-visible {
472
+ overflow: visible;
473
+ }
443
474
  .overflow-x-auto {
444
475
  overflow-x: auto;
445
476
  }
@@ -458,6 +489,9 @@
458
489
  .rounded-md {
459
490
  border-radius: var(--radius-md);
460
491
  }
492
+ .rounded-none {
493
+ border-radius: var(--radius-none);
494
+ }
461
495
  .rounded-sm {
462
496
  border-radius: var(--radius-sm);
463
497
  }
@@ -525,6 +559,12 @@
525
559
  .bg-background {
526
560
  background-color: var(--color-background);
527
561
  }
562
+ .bg-background\/90 {
563
+ background-color: var(--color-background);
564
+ @supports (color: color-mix(in lab, red, red)) {
565
+ background-color: color-mix(in oklab, var(--color-background) 90%, transparent);
566
+ }
567
+ }
528
568
  .bg-black\/20 {
529
569
  background-color: color-mix(in srgb, #000 20%, transparent);
530
570
  @supports (color: color-mix(in lab, red, red)) {
@@ -546,9 +586,18 @@
546
586
  .bg-foreground {
547
587
  background-color: var(--color-foreground);
548
588
  }
589
+ .bg-gray-300 {
590
+ background-color: var(--color-gray-300);
591
+ }
549
592
  .bg-muted {
550
593
  background-color: var(--color-muted);
551
594
  }
595
+ .bg-muted\/40 {
596
+ background-color: var(--color-muted);
597
+ @supports (color: color-mix(in lab, red, red)) {
598
+ background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
599
+ }
600
+ }
552
601
  .bg-popover {
553
602
  background-color: var(--color-popover);
554
603
  }
@@ -600,6 +649,9 @@
600
649
  .px-3 {
601
650
  padding-inline: calc(var(--spacing) * 3);
602
651
  }
652
+ .px-4 {
653
+ padding-inline: calc(var(--spacing) * 4);
654
+ }
603
655
  .px-5 {
604
656
  padding-inline: calc(var(--spacing) * 5);
605
657
  }
@@ -624,6 +676,9 @@
624
676
  .py-2 {
625
677
  padding-block: calc(var(--spacing) * 2);
626
678
  }
679
+ .py-3 {
680
+ padding-block: calc(var(--spacing) * 3);
681
+ }
627
682
  .py-4 {
628
683
  padding-block: calc(var(--spacing) * 4);
629
684
  }
@@ -681,11 +736,6 @@
681
736
  .font-sans {
682
737
  font-family: var(--font-sans);
683
738
  }
684
- .text-4xl {
685
- font-size: var(--text-4xl);
686
- line-height: var(--tw-leading, var(--text-4xl--line-height));
687
- letter-spacing: var(--tw-tracking, var(--text-4xl--letter-spacing));
688
- }
689
739
  .text-base {
690
740
  font-size: var(--text-base);
691
741
  line-height: var(--tw-leading, var(--text-base--line-height));
@@ -715,6 +765,10 @@
715
765
  font-size: var(--text-body);
716
766
  line-height: var(--tw-leading, var(--text-body--line-height));
717
767
  }
768
+ .leading-4 {
769
+ --tw-leading: calc(var(--spacing) * 4);
770
+ line-height: calc(var(--spacing) * 4);
771
+ }
718
772
  .leading-5 {
719
773
  --tw-leading: calc(var(--spacing) * 5);
720
774
  line-height: calc(var(--spacing) * 5);
@@ -739,6 +793,10 @@
739
793
  --tw-font-weight: var(--font-weight-medium);
740
794
  font-weight: var(--font-weight-medium);
741
795
  }
796
+ .font-medium\! {
797
+ --tw-font-weight: var(--font-weight-medium) !important;
798
+ font-weight: var(--font-weight-medium) !important;
799
+ }
742
800
  .font-normal {
743
801
  --tw-font-weight: var(--font-weight-normal);
744
802
  font-weight: var(--font-weight-normal);
@@ -747,6 +805,10 @@
747
805
  --tw-font-weight: var(--font-weight-semibold);
748
806
  font-weight: var(--font-weight-semibold);
749
807
  }
808
+ .tracking-\[0\.18px\] {
809
+ --tw-tracking: 0.18px;
810
+ letter-spacing: 0.18px;
811
+ }
750
812
  .tracking-display-tight {
751
813
  --tw-tracking: var(--tracking-display-tight);
752
814
  letter-spacing: var(--tracking-display-tight);
@@ -785,6 +847,9 @@
785
847
  .text-foreground {
786
848
  color: var(--color-foreground);
787
849
  }
850
+ .text-foreground\! {
851
+ color: var(--color-foreground) !important;
852
+ }
788
853
  .text-muted-foreground {
789
854
  color: var(--color-muted-foreground);
790
855
  }
@@ -800,6 +865,9 @@
800
865
  .text-stone-500 {
801
866
  color: var(--color-stone-500);
802
867
  }
868
+ .text-white {
869
+ color: var(--color-white);
870
+ }
803
871
  .italic {
804
872
  font-style: italic;
805
873
  }
@@ -869,6 +937,11 @@
869
937
  .filter {
870
938
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
871
939
  }
940
+ .transition-\[background-color\] {
941
+ transition-property: background-color;
942
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
943
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
944
+ }
872
945
  .transition-\[border-color\,box-shadow\] {
873
946
  transition-property: border-color,box-shadow;
874
947
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -889,10 +962,23 @@
889
962
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
890
963
  transition-duration: var(--tw-duration, var(--default-transition-duration));
891
964
  }
965
+ .transition-opacity {
966
+ transition-property: opacity;
967
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
968
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
969
+ }
970
+ .duration-150 {
971
+ --tw-duration: 150ms;
972
+ transition-duration: 150ms;
973
+ }
892
974
  .duration-200 {
893
975
  --tw-duration: 200ms;
894
976
  transition-duration: 200ms;
895
977
  }
978
+ .ease-out {
979
+ --tw-ease: var(--ease-out);
980
+ transition-timing-function: var(--ease-out);
981
+ }
896
982
  .outline-none {
897
983
  --tw-outline-style: none;
898
984
  outline-style: none;
@@ -1013,6 +1099,13 @@
1013
1099
  }
1014
1100
  }
1015
1101
  }
1102
+ .hover\:bg-background {
1103
+ &:hover {
1104
+ @media (hover: hover) {
1105
+ background-color: var(--color-background);
1106
+ }
1107
+ }
1108
+ }
1016
1109
  .hover\:bg-destructive\/80 {
1017
1110
  &:hover {
1018
1111
  @media (hover: hover) {
@@ -1364,18 +1457,6 @@
1364
1457
  padding-block: calc(var(--spacing) * 20);
1365
1458
  }
1366
1459
  }
1367
- .sm\:text-5xl {
1368
- @media (width >= 40rem) {
1369
- font-size: var(--text-5xl);
1370
- line-height: var(--tw-leading, var(--text-5xl--line-height));
1371
- letter-spacing: var(--tw-tracking, var(--text-5xl--letter-spacing));
1372
- }
1373
- }
1374
- .md\:w-md {
1375
- @media (width >= 48rem) {
1376
- width: var(--container-md);
1377
- }
1378
- }
1379
1460
  .\[\&_svg\]\:pointer-events-none {
1380
1461
  & svg {
1381
1462
  pointer-events: none;
@@ -1548,6 +1629,41 @@
1548
1629
  border-color: var(--ohw-border) !important;
1549
1630
  color: var(--ohw-foreground) !important;
1550
1631
  }
1632
+ [data-ohw-section-picker] {
1633
+ --ohw-background: #ffffff;
1634
+ --ohw-foreground: #0c0a09;
1635
+ --ohw-primary: #0885fe;
1636
+ --ohw-primary-foreground: #fafaf9;
1637
+ --ohw-muted: #f5f5f4;
1638
+ --ohw-muted-foreground: #78716c;
1639
+ --ohw-border: #e7e5e4;
1640
+ --ohw-popover-foreground: #0c0a09;
1641
+ --color-muted-foreground: var(--ohw-muted-foreground);
1642
+ --font-sans: Figtree, ui-sans-serif, system-ui, sans-serif;
1643
+ font-family: var(--font-sans);
1644
+ }
1645
+ html[data-ohw-section-picking] [data-ohw-hovered] {
1646
+ outline: none !important;
1647
+ box-shadow: none !important;
1648
+ }
1649
+ html[data-ohw-section-picking] [data-ohw-item-interaction],
1650
+ html[data-ohw-section-picking] [data-ohw-section-insert-line],
1651
+ html[data-ohw-section-picking] [data-ohw-navbar-container-chrome],
1652
+ html[data-ohw-section-picking] [data-ohw-edit-chrome],
1653
+ html[data-ohw-section-picking] [data-ohw-toolbar],
1654
+ html[data-ohw-section-picking] [data-ohw-max-badge],
1655
+ html[data-ohw-section-picking] [data-ohw-state-toggle] {
1656
+ display: none !important;
1657
+ pointer-events: none !important;
1658
+ }
1659
+ [data-ohw-navbar-container-chrome] {
1660
+ --ohw-primary: #0885fe;
1661
+ --ohw-background: #ffffff;
1662
+ --ohw-foreground: #0c0a09;
1663
+ --ohw-border: #e7e5e4;
1664
+ --font-sans: Figtree, ui-sans-serif, system-ui, sans-serif;
1665
+ font-family: var(--font-sans);
1666
+ }
1551
1667
  [data-ohw-bridge-root].dark {
1552
1668
  --ohw-background: #020617;
1553
1669
  --ohw-foreground: #f8fafc;
@@ -1777,11 +1893,20 @@
1777
1893
  syntax: "*";
1778
1894
  inherits: false;
1779
1895
  }
1896
+ @property --tw-ease {
1897
+ syntax: "*";
1898
+ inherits: false;
1899
+ }
1780
1900
  @property --tw-content {
1781
1901
  syntax: "*";
1782
1902
  initial-value: "";
1783
1903
  inherits: false;
1784
1904
  }
1905
+ @keyframes pulse {
1906
+ 50% {
1907
+ opacity: 0.5;
1908
+ }
1909
+ }
1785
1910
  @layer properties {
1786
1911
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1787
1912
  *, ::before, ::after, ::backdrop {
@@ -1826,6 +1951,7 @@
1826
1951
  --tw-drop-shadow-alpha: 100%;
1827
1952
  --tw-drop-shadow-size: initial;
1828
1953
  --tw-duration: initial;
1954
+ --tw-ease: initial;
1829
1955
  --tw-content: "";
1830
1956
  }
1831
1957
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ohhwells/bridge",
3
- "version": "0.1.37",
3
+ "version": "0.1.38-next.57",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",