@ohhwells/bridge 0.1.37 → 0.1.38-next.56

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;
@@ -22,10 +23,6 @@
22
23
  --text-lg--line-height: 28px;
23
24
  --text-xl: 20px;
24
25
  --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
26
  --font-weight-normal: 400;
30
27
  --font-weight-medium: 500;
31
28
  --font-weight-semibold: 600;
@@ -36,6 +33,8 @@
36
33
  --radius-md: 6px;
37
34
  --radius-lg: 0.5rem;
38
35
  --radius-xl: 0.75rem;
36
+ --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
37
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
39
38
  --default-transition-duration: 150ms;
40
39
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
41
40
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
@@ -58,8 +57,6 @@
58
57
  --color-border: var(--ohw-border, #e2e8f0);
59
58
  --color-input: var(--ohw-input, #e2e8f0);
60
59
  --color-ring: var(--ohw-ring, #64748b);
61
- --text-5xl--letter-spacing: -0.025em;
62
- --text-4xl--letter-spacing: -0.025em;
63
60
  --text-xl--letter-spacing: -0.025em;
64
61
  --text-lg--letter-spacing: 0em;
65
62
  --text-base--letter-spacing: 0em;
@@ -67,6 +64,7 @@
67
64
  --text-xs--letter-spacing: 0em;
68
65
  --text-body: 18px;
69
66
  --text-body--line-height: 1.5;
67
+ --radius-none: 0px;
70
68
  --tracking-display-tight: -0.030em;
71
69
  }
72
70
  }
@@ -106,6 +104,9 @@
106
104
  .top-2\.5 {
107
105
  top: calc(var(--spacing) * 2.5);
108
106
  }
107
+ .top-3 {
108
+ top: calc(var(--spacing) * 3);
109
+ }
109
110
  .top-\[9px\] {
110
111
  top: 9px;
111
112
  }
@@ -121,6 +122,9 @@
121
122
  .right-1\.5 {
122
123
  right: calc(var(--spacing) * 1.5);
123
124
  }
125
+ .right-3 {
126
+ right: calc(var(--spacing) * 3);
127
+ }
124
128
  .right-\[9px\] {
125
129
  right: 9px;
126
130
  }
@@ -136,6 +140,9 @@
136
140
  .left-1\/2 {
137
141
  left: calc(1 / 2 * 100%);
138
142
  }
143
+ .left-5 {
144
+ left: calc(var(--spacing) * 5);
145
+ }
139
146
  .z-10 {
140
147
  z-index: 10;
141
148
  }
@@ -148,6 +155,12 @@
148
155
  .z-2147483647 {
149
156
  z-index: 2147483647;
150
157
  }
158
+ .z-\[1\] {
159
+ z-index: 1;
160
+ }
161
+ .z-\[2\] {
162
+ z-index: 2;
163
+ }
151
164
  .z-\[2147483646\] {
152
165
  z-index: 2147483646;
153
166
  }
@@ -208,6 +221,9 @@
208
221
  .flex {
209
222
  display: flex;
210
223
  }
224
+ .grid {
225
+ display: grid;
226
+ }
211
227
  .hidden {
212
228
  display: none;
213
229
  }
@@ -221,6 +237,18 @@
221
237
  width: calc(var(--spacing) * 4);
222
238
  height: calc(var(--spacing) * 4);
223
239
  }
240
+ .size-5 {
241
+ width: calc(var(--spacing) * 5);
242
+ height: calc(var(--spacing) * 5);
243
+ }
244
+ .size-7 {
245
+ width: calc(var(--spacing) * 7);
246
+ height: calc(var(--spacing) * 7);
247
+ }
248
+ .size-8 {
249
+ width: calc(var(--spacing) * 8);
250
+ height: calc(var(--spacing) * 8);
251
+ }
224
252
  .h-6 {
225
253
  height: calc(var(--spacing) * 6);
226
254
  }
@@ -236,9 +264,6 @@
236
264
  .h-10 {
237
265
  height: calc(var(--spacing) * 10);
238
266
  }
239
- .h-20 {
240
- height: calc(var(--spacing) * 20);
241
- }
242
267
  .h-\[70px\] {
243
268
  height: 70px;
244
269
  }
@@ -357,9 +382,16 @@
357
382
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
358
383
  translate: var(--tw-translate-x) var(--tw-translate-y);
359
384
  }
385
+ .translate-y-1\/2 {
386
+ --tw-translate-y: calc(1 / 2 * 100%);
387
+ translate: var(--tw-translate-x) var(--tw-translate-y);
388
+ }
360
389
  .transform {
361
390
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
362
391
  }
392
+ .animate-pulse {
393
+ animation: var(--animate-pulse);
394
+ }
363
395
  .cursor-default {
364
396
  cursor: default;
365
397
  }
@@ -440,6 +472,9 @@
440
472
  .overflow-hidden {
441
473
  overflow: hidden;
442
474
  }
475
+ .overflow-visible {
476
+ overflow: visible;
477
+ }
443
478
  .overflow-x-auto {
444
479
  overflow-x: auto;
445
480
  }
@@ -458,6 +493,9 @@
458
493
  .rounded-md {
459
494
  border-radius: var(--radius-md);
460
495
  }
496
+ .rounded-none {
497
+ border-radius: var(--radius-none);
498
+ }
461
499
  .rounded-sm {
462
500
  border-radius: var(--radius-sm);
463
501
  }
@@ -525,6 +563,12 @@
525
563
  .bg-background {
526
564
  background-color: var(--color-background);
527
565
  }
566
+ .bg-background\/90 {
567
+ background-color: var(--color-background);
568
+ @supports (color: color-mix(in lab, red, red)) {
569
+ background-color: color-mix(in oklab, var(--color-background) 90%, transparent);
570
+ }
571
+ }
528
572
  .bg-black\/20 {
529
573
  background-color: color-mix(in srgb, #000 20%, transparent);
530
574
  @supports (color: color-mix(in lab, red, red)) {
@@ -546,9 +590,18 @@
546
590
  .bg-foreground {
547
591
  background-color: var(--color-foreground);
548
592
  }
593
+ .bg-gray-300 {
594
+ background-color: var(--color-gray-300);
595
+ }
549
596
  .bg-muted {
550
597
  background-color: var(--color-muted);
551
598
  }
599
+ .bg-muted\/40 {
600
+ background-color: var(--color-muted);
601
+ @supports (color: color-mix(in lab, red, red)) {
602
+ background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
603
+ }
604
+ }
552
605
  .bg-popover {
553
606
  background-color: var(--color-popover);
554
607
  }
@@ -600,6 +653,9 @@
600
653
  .px-3 {
601
654
  padding-inline: calc(var(--spacing) * 3);
602
655
  }
656
+ .px-4 {
657
+ padding-inline: calc(var(--spacing) * 4);
658
+ }
603
659
  .px-5 {
604
660
  padding-inline: calc(var(--spacing) * 5);
605
661
  }
@@ -624,6 +680,9 @@
624
680
  .py-2 {
625
681
  padding-block: calc(var(--spacing) * 2);
626
682
  }
683
+ .py-3 {
684
+ padding-block: calc(var(--spacing) * 3);
685
+ }
627
686
  .py-4 {
628
687
  padding-block: calc(var(--spacing) * 4);
629
688
  }
@@ -681,11 +740,6 @@
681
740
  .font-sans {
682
741
  font-family: var(--font-sans);
683
742
  }
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
743
  .text-base {
690
744
  font-size: var(--text-base);
691
745
  line-height: var(--tw-leading, var(--text-base--line-height));
@@ -715,6 +769,10 @@
715
769
  font-size: var(--text-body);
716
770
  line-height: var(--tw-leading, var(--text-body--line-height));
717
771
  }
772
+ .leading-4 {
773
+ --tw-leading: calc(var(--spacing) * 4);
774
+ line-height: calc(var(--spacing) * 4);
775
+ }
718
776
  .leading-5 {
719
777
  --tw-leading: calc(var(--spacing) * 5);
720
778
  line-height: calc(var(--spacing) * 5);
@@ -739,6 +797,10 @@
739
797
  --tw-font-weight: var(--font-weight-medium);
740
798
  font-weight: var(--font-weight-medium);
741
799
  }
800
+ .font-medium\! {
801
+ --tw-font-weight: var(--font-weight-medium) !important;
802
+ font-weight: var(--font-weight-medium) !important;
803
+ }
742
804
  .font-normal {
743
805
  --tw-font-weight: var(--font-weight-normal);
744
806
  font-weight: var(--font-weight-normal);
@@ -747,6 +809,10 @@
747
809
  --tw-font-weight: var(--font-weight-semibold);
748
810
  font-weight: var(--font-weight-semibold);
749
811
  }
812
+ .tracking-\[0\.18px\] {
813
+ --tw-tracking: 0.18px;
814
+ letter-spacing: 0.18px;
815
+ }
750
816
  .tracking-display-tight {
751
817
  --tw-tracking: var(--tracking-display-tight);
752
818
  letter-spacing: var(--tracking-display-tight);
@@ -785,6 +851,9 @@
785
851
  .text-foreground {
786
852
  color: var(--color-foreground);
787
853
  }
854
+ .text-foreground\! {
855
+ color: var(--color-foreground) !important;
856
+ }
788
857
  .text-muted-foreground {
789
858
  color: var(--color-muted-foreground);
790
859
  }
@@ -800,6 +869,9 @@
800
869
  .text-stone-500 {
801
870
  color: var(--color-stone-500);
802
871
  }
872
+ .text-white {
873
+ color: var(--color-white);
874
+ }
803
875
  .italic {
804
876
  font-style: italic;
805
877
  }
@@ -869,6 +941,11 @@
869
941
  .filter {
870
942
  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
943
  }
944
+ .transition-\[background-color\] {
945
+ transition-property: background-color;
946
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
947
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
948
+ }
872
949
  .transition-\[border-color\,box-shadow\] {
873
950
  transition-property: border-color,box-shadow;
874
951
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -889,10 +966,23 @@
889
966
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
890
967
  transition-duration: var(--tw-duration, var(--default-transition-duration));
891
968
  }
969
+ .transition-opacity {
970
+ transition-property: opacity;
971
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
972
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
973
+ }
974
+ .duration-150 {
975
+ --tw-duration: 150ms;
976
+ transition-duration: 150ms;
977
+ }
892
978
  .duration-200 {
893
979
  --tw-duration: 200ms;
894
980
  transition-duration: 200ms;
895
981
  }
982
+ .ease-out {
983
+ --tw-ease: var(--ease-out);
984
+ transition-timing-function: var(--ease-out);
985
+ }
896
986
  .outline-none {
897
987
  --tw-outline-style: none;
898
988
  outline-style: none;
@@ -1013,6 +1103,13 @@
1013
1103
  }
1014
1104
  }
1015
1105
  }
1106
+ .hover\:bg-background {
1107
+ &:hover {
1108
+ @media (hover: hover) {
1109
+ background-color: var(--color-background);
1110
+ }
1111
+ }
1112
+ }
1016
1113
  .hover\:bg-destructive\/80 {
1017
1114
  &:hover {
1018
1115
  @media (hover: hover) {
@@ -1364,13 +1461,6 @@
1364
1461
  padding-block: calc(var(--spacing) * 20);
1365
1462
  }
1366
1463
  }
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
1464
  .md\:w-md {
1375
1465
  @media (width >= 48rem) {
1376
1466
  width: var(--container-md);
@@ -1548,6 +1638,41 @@
1548
1638
  border-color: var(--ohw-border) !important;
1549
1639
  color: var(--ohw-foreground) !important;
1550
1640
  }
1641
+ [data-ohw-section-picker] {
1642
+ --ohw-background: #ffffff;
1643
+ --ohw-foreground: #0c0a09;
1644
+ --ohw-primary: #0885fe;
1645
+ --ohw-primary-foreground: #fafaf9;
1646
+ --ohw-muted: #f5f5f4;
1647
+ --ohw-muted-foreground: #78716c;
1648
+ --ohw-border: #e7e5e4;
1649
+ --ohw-popover-foreground: #0c0a09;
1650
+ --color-muted-foreground: var(--ohw-muted-foreground);
1651
+ --font-sans: Figtree, ui-sans-serif, system-ui, sans-serif;
1652
+ font-family: var(--font-sans);
1653
+ }
1654
+ html[data-ohw-section-picking] [data-ohw-hovered] {
1655
+ outline: none !important;
1656
+ box-shadow: none !important;
1657
+ }
1658
+ html[data-ohw-section-picking] [data-ohw-item-interaction],
1659
+ html[data-ohw-section-picking] [data-ohw-section-insert-line],
1660
+ html[data-ohw-section-picking] [data-ohw-navbar-container-chrome],
1661
+ html[data-ohw-section-picking] [data-ohw-edit-chrome],
1662
+ html[data-ohw-section-picking] [data-ohw-toolbar],
1663
+ html[data-ohw-section-picking] [data-ohw-max-badge],
1664
+ html[data-ohw-section-picking] [data-ohw-state-toggle] {
1665
+ display: none !important;
1666
+ pointer-events: none !important;
1667
+ }
1668
+ [data-ohw-navbar-container-chrome] {
1669
+ --ohw-primary: #0885fe;
1670
+ --ohw-background: #ffffff;
1671
+ --ohw-foreground: #0c0a09;
1672
+ --ohw-border: #e7e5e4;
1673
+ --font-sans: Figtree, ui-sans-serif, system-ui, sans-serif;
1674
+ font-family: var(--font-sans);
1675
+ }
1551
1676
  [data-ohw-bridge-root].dark {
1552
1677
  --ohw-background: #020617;
1553
1678
  --ohw-foreground: #f8fafc;
@@ -1777,11 +1902,20 @@
1777
1902
  syntax: "*";
1778
1903
  inherits: false;
1779
1904
  }
1905
+ @property --tw-ease {
1906
+ syntax: "*";
1907
+ inherits: false;
1908
+ }
1780
1909
  @property --tw-content {
1781
1910
  syntax: "*";
1782
1911
  initial-value: "";
1783
1912
  inherits: false;
1784
1913
  }
1914
+ @keyframes pulse {
1915
+ 50% {
1916
+ opacity: 0.5;
1917
+ }
1918
+ }
1785
1919
  @layer properties {
1786
1920
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1787
1921
  *, ::before, ::after, ::backdrop {
@@ -1826,6 +1960,7 @@
1826
1960
  --tw-drop-shadow-alpha: 100%;
1827
1961
  --tw-drop-shadow-size: initial;
1828
1962
  --tw-duration: initial;
1963
+ --tw-ease: initial;
1829
1964
  --tw-content: "";
1830
1965
  }
1831
1966
  }
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.56",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",