@hfunlabs/hypurr-connect 0.1.16 → 0.1.18

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.
Files changed (14) hide show
  1. package/dist/index.js +501 -545
  2. package/dist/index.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/AddWalletModal.tsx +37 -30
  5. package/src/DeleteWalletModal.tsx +5 -8
  6. package/src/LoginModal.tsx +2 -26
  7. package/src/RenameWalletModal.tsx +14 -24
  8. package/src/RenewAgentModal.tsx +26 -21
  9. package/src/UserProfileModal.tsx +36 -63
  10. package/src/WalletSelectorDropdown.tsx +40 -28
  11. package/src/profileStyles.ts +51 -30
  12. package/src/styles.css +1 -1
  13. package/src/tailwind.css +289 -23
  14. package/src/useIsMobile.ts +22 -0
package/src/UserProfileModal.tsx CHANGED
@@ -33,6 +33,7 @@ import {
33
33
  } from "./icons/lucide";
34
34
  import {
35
35
  closeBtnStyle as makeCloseBtnStyle,
36
+ colorWithAlpha,
36
37
  fontFamily,
37
38
  modalBackdropStyle,
38
39
  modalHeaderStyle,
@@ -42,7 +43,6 @@ import {
42
43
  type PrincipalColorOverrides,
43
44
  type PrincipalColors,
44
45
  profileColors,
45
- raisedButtonStyle,
46
46
  resolvePrincipalColors,
47
47
  titleStyle,
48
48
  upperLabelStyle,
@@ -104,7 +104,7 @@ export interface UserProfileModalProps {
104
104
 
105
105
  const backdropStyle = modalBackdropStyle(100);
106
106
  const wrapperStyle = modalWrapperStyle(101);
107
- const panelStyle = modalPanelStyle(false);
107
+ const panelStyle = modalPanelStyle(true);
108
108
  const headerStyle = modalHeaderStyle;
109
109
 
110
110
  const profileSectionStyle: CSSProperties = {
@@ -138,23 +138,18 @@ const tabButtonLayoutStyle: CSSProperties = {
138
138
  };
139
139
 
140
140
  const statBoxStyle: CSSProperties = {
141
- background: "rgba(255,255,255,0.03)",
141
+ background: "rgb(var(--btn-bevel) / 0.03)",
142
142
  borderRadius: 8,
143
143
  padding: 12,
144
144
  border: `1px solid ${profileColors.border}`,
145
145
  };
146
146
 
147
- const slippageBtnBaseStyle: CSSProperties = {
148
- flex: 1,
149
- padding: "4px 0",
150
- borderRadius: 4,
151
- fontSize: 12.5,
152
- lineHeight: "1rem",
153
- fontFamily: fontFamily.mono,
154
- fontWeight: 500,
155
- cursor: "pointer",
156
- transition: "background-color 150ms, color 150ms, border-color 150ms",
157
- };
147
+ const slippageBtnBaseClass =
148
+ "flex-1 rounded border px-2 py-1 font-mono font-medium text-base transition-colors";
149
+ const slippageBtnSelectedClass =
150
+ "bg-surface-btn-active text-content border-surface-bd-active";
151
+ const slippageBtnIdleClass =
152
+ "bg-surface-btn text-content-muted border-surface-bd hover:bg-surface-btn-hover hover:border-surface-bd-hover hover:text-content-tertiary";
158
153
 
159
154
  const walletRowStyle: CSSProperties = {
160
155
  display: "flex",
@@ -179,9 +174,9 @@ function getWalletTypeMeta(wallet: HyperliquidWallet): WalletTypeMeta {
179
174
  if (wallet.isAgent) {
180
175
  return {
181
176
  label: "Agent wallet",
182
- color: "#38bdf8",
183
- background: "rgba(56,189,248,0.16)",
184
- border: "rgba(56,189,248,0.34)",
177
+ color: "rgb(var(--blue-500))",
178
+ background: "rgb(var(--blue-500) / 0.16)",
179
+ border: "rgb(var(--blue-500) / 0.34)",
185
180
  icon: <Bot size={10} />,
186
181
  };
187
182
  }
@@ -189,18 +184,18 @@ function getWalletTypeMeta(wallet: HyperliquidWallet): WalletTypeMeta {
189
184
  if (wallet.isReadOnly) {
190
185
  return {
191
186
  label: "Read-only wallet",
192
- color: "#a78bfa",
193
- background: "rgba(167,139,250,0.16)",
194
- border: "rgba(167,139,250,0.34)",
187
+ color: "rgb(var(--purple-400))",
188
+ background: "rgb(var(--purple-400) / 0.16)",
189
+ border: "rgb(var(--purple-400) / 0.34)",
195
190
  icon: <Eye size={10} />,
196
191
  };
197
192
  }
198
193
 
199
194
  return {
200
195
  label: "Private-key wallet",
201
- color: "#34d399",
202
- background: "rgba(52,211,153,0.16)",
203
- border: "rgba(52,211,153,0.34)",
196
+ color: "rgb(var(--green-400))",
197
+ background: "rgb(var(--green-400) / 0.16)",
198
+ border: "rgb(var(--green-400) / 0.34)",
204
199
  icon: <KeyRound size={10} />,
205
200
  };
206
201
  }
@@ -227,7 +222,9 @@ function ToggleSwitch({
227
222
  alignItems: "center",
228
223
  borderRadius: 9999,
229
224
  border: "none",
230
- background: checked ? accentColor : "rgba(255,255,255,0.08)",
225
+ background: checked
226
+ ? colorWithAlpha(accentColor, 0.85)
227
+ : "rgb(var(--btn-bevel) / 0.08)",
231
228
  cursor: "pointer",
232
229
  padding: 0,
233
230
  transition: "background 150ms",
@@ -261,20 +258,12 @@ function RaisedButton({
261
258
  children: ReactNode;
262
259
  style?: CSSProperties;
263
260
  }) {
264
- const [hovered, setHovered] = useState(false);
265
261
  return (
266
262
  <button
267
263
  type="button"
268
264
  onClick={onClick}
269
- onMouseEnter={() => setHovered(true)}
270
- onMouseLeave={() => setHovered(false)}
271
- style={{
272
- ...tabButtonLayoutStyle,
273
- ...raisedButtonStyle(
274
- selected ? "active" : hovered ? "hover" : "default",
275
- ),
276
- ...style,
277
- }}
265
+ className={selected ? "btn-raised-active" : "btn-raised"}
266
+ style={{ ...tabButtonLayoutStyle, ...style }}
278
267
  >
279
268
  {children}
280
269
  </button>
@@ -290,33 +279,13 @@ function SlippageButton({
290
279
  onClick: () => void;
291
280
  children: ReactNode;
292
281
  }) {
293
- const [hovered, setHovered] = useState(false);
294
282
  return (
295
283
  <button
296
284
  type="button"
297
285
  onClick={onClick}
298
- onMouseEnter={() => setHovered(true)}
299
- onMouseLeave={() => setHovered(false)}
300
- style={{
301
- ...slippageBtnBaseStyle,
302
- background: selected
303
- ? profileColors.surfaceBtnActive
304
- : hovered
305
- ? profileColors.surfaceBtnHover
306
- : profileColors.surfaceBtn,
307
- border: `1px solid ${
308
- selected
309
- ? profileColors.surfaceBdActive
310
- : hovered
311
- ? profileColors.surfaceBdHover
312
- : profileColors.surfaceBd
313
- }`,
314
- color: selected
315
- ? profileColors.text
316
- : hovered
317
- ? "#d1d5db"
318
- : profileColors.muted,
319
- }}
286
+ className={`${slippageBtnBaseClass} ${
287
+ selected ? slippageBtnSelectedClass : slippageBtnIdleClass
288
+ }`}
320
289
  >
321
290
  {children}
322
291
  </button>
@@ -426,7 +395,7 @@ export function UserProfileModal({
426
395
  <div
427
396
  style={{
428
397
  padding: "10px 12px",
429
- background: "rgba(255,255,255,0.03)",
398
+ background: "rgb(var(--btn-bevel) / 0.03)",
430
399
  border: `1px solid ${profileColors.border}`,
431
400
  borderRadius: 8,
432
401
  }}
@@ -561,11 +530,15 @@ export function UserProfileModal({
561
530
  display: "flex",
562
531
  alignItems: "center",
563
532
  gap: 6,
564
- color: "#eab308",
533
+ color: "rgb(var(--amber-400))",
565
534
  marginBottom: 6,
566
535
  }}
567
536
  >
568
- <Star size={13} color="#eab308" fill="#eab308" />
537
+ <Star
538
+ size={13}
539
+ color="rgb(var(--amber-400))"
540
+ fill="rgb(var(--amber-400))"
541
+ />
569
542
  <span style={upperLabelStyle}>Hfun Score</span>
570
543
  </div>
571
544
  <p
@@ -762,7 +735,7 @@ export function UserProfileModal({
762
735
  width: 40,
763
736
  height: 40,
764
737
  borderRadius: "50%",
765
- background: "rgba(255,255,255,0.04)",
738
+ background: "rgb(var(--btn-bevel) / 0.04)",
766
739
  display: "flex",
767
740
  alignItems: "center",
768
741
  justifyContent: "center",
@@ -833,8 +806,8 @@ export function UserProfileModal({
833
806
  <div style={{ padding: "0 24px 24px" }}>
834
807
  <button
835
808
  onClick={onClose}
809
+ className="btn-raised"
836
810
  style={{
837
- ...raisedButtonStyle("default"),
838
811
  width: "100%",
839
812
  padding: "6px 0",
840
813
  fontSize: 12.5,
@@ -956,7 +929,7 @@ function WalletRow({
956
929
  color: typeMeta.color,
957
930
  background: typeMeta.background,
958
931
  border: `1px solid ${typeMeta.border}`,
959
- boxShadow: "0 1px 4px rgba(0,0,0,0.35)",
932
+ boxShadow: "0 1px 4px rgb(var(--btn-bevel) / 0.18)",
960
933
  }}
961
934
  >
962
935
  {typeMeta.icon}
package/src/WalletSelectorDropdown.tsx CHANGED
@@ -14,6 +14,7 @@ import {
14
14
  EXPIRED_AGENT_COLOR,
15
15
  } from "./AgentExpiryWarning";
16
16
  import { useHypurrConnectInternal } from "./HypurrConnectProvider";
17
+ import { useIsMobile } from "./useIsMobile";
17
18
  import { UserProfileModal, type SlippageOption } from "./UserProfileModal";
18
19
  import { getAgentExpiryTitle } from "./agentWallet";
19
20
  import {
@@ -95,7 +96,7 @@ export interface ExtraFooterItem {
95
96
  hoverColor?: string;
96
97
  }
97
98
 
98
- const DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
99
+ const DEFAULT_BACKGROUND_COLOR = "rgb(var(--surface-dropdown))";
99
100
 
100
101
  interface DropdownWallet {
101
102
  id: number;
@@ -236,23 +237,21 @@ const rootStyle: CSSProperties = {
236
237
  right: 0,
237
238
  top: "calc(100% + 4px)",
238
239
  width: 240,
239
- backdropFilter: "blur(10px)",
240
- WebkitBackdropFilter: "blur(10px)",
241
240
  borderRadius: 9,
242
- boxShadow: "0 8px 40px rgba(0,0,0,0.85)",
243
- border: "1px solid rgba(255,255,255,0.08)",
241
+ boxShadow: "var(--shadow-dropdown)",
242
+ border: "1px solid rgb(var(--line))",
244
243
  zIndex: 50,
245
244
  transformOrigin: "top right",
246
245
  overflow: "hidden",
247
246
  };
248
247
 
249
- const sectionBorder = "1px solid rgba(255,255,255,0.06)";
248
+ const sectionBorder = "1px solid rgb(var(--line))";
250
249
 
251
250
  const sectionHeaderStyle: CSSProperties = {
252
251
  padding: "8px 16px",
253
252
  fontSize: 12,
254
253
  fontWeight: 600,
255
- color: "#9ca3af",
254
+ color: "rgb(var(--content-muted))",
256
255
  textTransform: "uppercase",
257
256
  letterSpacing: "0.05em",
258
257
  };
@@ -268,7 +267,7 @@ const footerBtnStyle: CSSProperties = {
268
267
  display: "flex",
269
268
  alignItems: "center",
270
269
  gap: 8,
271
- color: "#9ca3af",
270
+ color: "rgb(var(--content-muted))",
272
271
  transition: "background 120ms, color 120ms",
273
272
  };
274
273
 
@@ -394,7 +393,7 @@ export function WalletSelectorDropdown({
394
393
  gap: 12,
395
394
  background: "transparent",
396
395
  border: "none",
397
- borderBottomColor: "rgba(255,255,255,0.06)",
396
+ borderBottomColor: "rgb(var(--btn-bevel) / 0.06)",
398
397
  borderBottomStyle: "solid",
399
398
  borderBottomWidth: 1,
400
399
  cursor: "pointer",
@@ -402,7 +401,8 @@ export function WalletSelectorDropdown({
402
401
  transition: "background 120ms",
403
402
  }}
404
403
  onMouseEnter={(e) =>
405
- (e.currentTarget.style.background = "rgba(255,255,255,0.06)")
404
+ (e.currentTarget.style.background =
405
+ "rgb(var(--btn-bevel) / 0.06)")
406
406
  }
407
407
  onMouseLeave={(e) =>
408
408
  (e.currentTarget.style.background = "transparent")
@@ -503,7 +503,7 @@ export function WalletSelectorDropdown({
503
503
  margin: 0,
504
504
  fontSize: 14,
505
505
  fontWeight: 500,
506
- color: "#fff",
506
+ color: "rgb(var(--content))",
507
507
  overflow: "hidden",
508
508
  textOverflow: "ellipsis",
509
509
  whiteSpace: "nowrap",
@@ -562,7 +562,9 @@ export function WalletSelectorDropdown({
562
562
  fontWeight: 600,
563
563
  textTransform: "uppercase",
564
564
  letterSpacing: "0.05em",
565
- color: isSelectedGroup ? "#e5e7eb" : "#6b7280",
565
+ color: isSelectedGroup
566
+ ? "rgb(var(--content-secondary))"
567
+ : "rgb(var(--content-faint))",
566
568
  }}
567
569
  >
568
570
  <Folder size={12} style={{ flexShrink: 0 }} />
@@ -581,7 +583,7 @@ export function WalletSelectorDropdown({
581
583
  style={{
582
584
  flexShrink: 0,
583
585
  fontVariantNumeric: "tabular-nums",
584
- color: "#4b5563",
586
+ color: "rgb(var(--content-disabled))",
585
587
  }}
586
588
  >
587
589
  {entry.items.length}
@@ -614,7 +616,7 @@ export function WalletSelectorDropdown({
614
616
  }}
615
617
  onMouseEnter={(e) =>
616
618
  (e.currentTarget.style.background =
617
- "rgba(255,255,255,0.06)")
619
+ "rgb(var(--btn-bevel) / 0.06)")
618
620
  }
619
621
  onMouseLeave={(e) =>
620
622
  (e.currentTarget.style.background = "transparent")
@@ -684,7 +686,7 @@ function FooterBtn({
684
686
  onClick,
685
687
  icon,
686
688
  label,
687
- hoverColor = "#fff",
689
+ hoverColor = "rgb(var(--content))",
688
690
  }: {
689
691
  onClick: () => void;
690
692
  icon: ReactNode;
@@ -696,12 +698,12 @@ function FooterBtn({
696
698
  onClick={onClick}
697
699
  style={footerBtnStyle}
698
700
  onMouseEnter={(e) => {
699
- e.currentTarget.style.background = "rgba(255,255,255,0.06)";
701
+ e.currentTarget.style.background = "rgb(var(--btn-bevel) / 0.06)";
700
702
  e.currentTarget.style.color = hoverColor;
701
703
  }}
702
704
  onMouseLeave={(e) => {
703
705
  e.currentTarget.style.background = "transparent";
704
- e.currentTarget.style.color = "#9ca3af";
706
+ e.currentTarget.style.color = "rgb(var(--content-muted))";
705
707
  }}
706
708
  >
707
709
  {icon}
@@ -736,8 +738,14 @@ function WalletRow({
736
738
  colors: PrincipalColors;
737
739
  }) {
738
740
  const isAgentExpired = !!agentExpiryTitle;
739
- const walletTextColor = isAgentExpired ? EXPIRED_AGENT_COLOR : "#d1d5db";
740
- const mutedTextColor = isAgentExpired ? "rgba(245,158,11,0.78)" : "#6b7280";
741
+ const walletTextColor = isAgentExpired
742
+ ? EXPIRED_AGENT_COLOR
743
+ : "rgb(var(--content-tertiary))";
744
+ const mutedTextColor = isAgentExpired
745
+ ? "rgba(245,158,11,0.78)"
746
+ : "rgb(var(--content-faint))";
747
+ // Touch devices have no hover, so keep row actions visible on mobile.
748
+ const isMobile = useIsMobile();
741
749
  return (
742
750
  <div
743
751
  style={{
@@ -750,19 +758,21 @@ function WalletRow({
750
758
  color: walletTextColor,
751
759
  display: "flex",
752
760
  alignItems: "center",
753
- background: isSelected ? "rgba(255,255,255,0.06)" : "transparent",
761
+ background: isSelected ? "rgb(var(--btn-bevel) / 0.06)" : "transparent",
754
762
  transition: "background 120ms",
755
763
  }}
756
764
  onMouseEnter={(e) => {
757
- e.currentTarget.style.background = "rgba(255,255,255,0.06)";
765
+ e.currentTarget.style.background = "rgb(var(--btn-bevel) / 0.06)";
766
+ if (isMobile) return;
758
767
  const actions =
759
768
  e.currentTarget.querySelector<HTMLDivElement>("[data-row-actions]");
760
769
  if (actions) actions.style.opacity = "1";
761
770
  }}
762
771
  onMouseLeave={(e) => {
763
772
  e.currentTarget.style.background = isSelected
764
- ? "rgba(255,255,255,0.06)"
773
+ ? "rgb(var(--btn-bevel) / 0.06)"
765
774
  : "transparent";
775
+ if (isMobile) return;
766
776
  const actions =
767
777
  e.currentTarget.querySelector<HTMLDivElement>("[data-row-actions]");
768
778
  if (actions) actions.style.opacity = "0";
@@ -807,7 +817,7 @@ function WalletRow({
807
817
  color: isAgentExpired
808
818
  ? walletTextColor
809
819
  : isSelected
810
- ? "#fff"
820
+ ? "rgb(var(--content))"
811
821
  : undefined,
812
822
  fontWeight: isSelected ? 500 : undefined,
813
823
  }}
@@ -832,8 +842,8 @@ function WalletRow({
832
842
  color: isAgentExpired
833
843
  ? walletTextColor
834
844
  : isSelected
835
- ? "#fff"
836
- : "#9ca3af",
845
+ ? "rgb(var(--content))"
846
+ : "rgb(var(--content-muted))",
837
847
  fontWeight: isSelected ? 500 : undefined,
838
848
  }}
839
849
  >
@@ -852,7 +862,7 @@ function WalletRow({
852
862
  style={{
853
863
  display: "flex",
854
864
  alignItems: "center",
855
- opacity: 0,
865
+ opacity: isMobile ? 1 : 0,
856
866
  transition: "opacity 120ms",
857
867
  }}
858
868
  >
@@ -915,7 +925,7 @@ function RowIconBtn({
915
925
  marginLeft: 4,
916
926
  background: "transparent",
917
927
  border: "none",
918
- color: "#4b5563",
928
+ color: "rgb(var(--content-disabled))",
919
929
  cursor: "pointer",
920
930
  display: "flex",
921
931
  alignItems: "center",
@@ -923,7 +933,9 @@ function RowIconBtn({
923
933
  transition: "color 120ms",
924
934
  }}
925
935
  onMouseEnter={(e) => (e.currentTarget.style.color = hoverColor)}
926
- onMouseLeave={(e) => (e.currentTarget.style.color = "#4b5563")}
936
+ onMouseLeave={(e) =>
937
+ (e.currentTarget.style.color = "rgb(var(--content-disabled))")
938
+ }
927
939
  >
928
940
  {children}
929
941
  </button>
package/src/profileStyles.ts CHANGED
@@ -1,25 +1,39 @@
1
1
  import type { CSSProperties } from "react";
2
2
 
3
+ /**
4
+ * Theme tokens consumed by inline `style={{}}` props. Values resolve to
5
+ * `rgb(var(--token) / alpha)` strings so the active theme (set by the host
6
+ * via `:root` / `.light` in `src/tailwind.css`) flows through on every paint
7
+ * without any JS-side reactivity.
8
+ */
3
9
  export const profileColors = {
10
+ // Accent stays a literal hex — host may override via the accentColor prop
11
+ // and helpers below expect a parseable color.
4
12
  accent: "#a855f7",
5
- panel: "rgba(14,18,24,0.8)",
6
- panelSolid: "#0e1218",
7
- backdrop: "rgba(0,0,0,0.7)",
8
- border: "#1f2937",
9
- surfaceBtn: "#0D1219",
10
- surfaceBtnHover: "#15171A",
11
- surfaceBtnActive: "#1E2124",
12
- surfaceBd: "#262A30",
13
- surfaceBdHover: "#444548",
14
- surfaceBdActive: "#4B4D50",
15
- text: "#ffffff",
16
- muted: "#aab1c1",
17
- subdued: "#7d8597",
18
- disabled: "#4b5563",
19
- danger: "#f87171",
13
+
14
+ panel: "rgb(var(--surface-modal) / 0.8)",
15
+ panelSolid: "rgb(var(--surface-modal))",
16
+ backdrop: "rgb(var(--overlay) / 0.7)",
17
+ border: "rgb(var(--line))",
18
+
19
+ surfaceBtn: "rgb(var(--surface-btn))",
20
+ surfaceBtnHover: "rgb(var(--surface-btn-hover))",
21
+ surfaceBtnActive: "rgb(var(--surface-btn-active))",
22
+ surfaceBd: "rgb(var(--surface-bd))",
23
+ surfaceBdHover: "rgb(var(--surface-bd-hover))",
24
+ surfaceBdActive: "rgb(var(--surface-bd-active))",
25
+
26
+ text: "rgb(var(--content))",
27
+ muted: "rgb(var(--content-muted))",
28
+ subdued: "rgb(var(--content-subtle))",
29
+ disabled: "rgb(var(--content-disabled))",
30
+
31
+ danger: "rgb(var(--trade-down))",
32
+ // Keep the punchier red literal for hover backgrounds where we want a
33
+ // specific warm tint regardless of theme.
20
34
  dangerStrong: "#ef4444",
21
- purple: "#d8b4fe",
22
- yellow: "#eab308",
35
+ purple: "rgb(var(--purple-400))",
36
+ yellow: "rgb(var(--amber-400))",
23
37
  };
24
38
 
25
39
  export const fontFamily = {
@@ -87,7 +101,7 @@ export const relativeLuminance = (color: string): number | null => {
87
101
  */
88
102
  export const pickContrastColor = (
89
103
  background: string,
90
- lightFg: string = profileColors.text,
104
+ lightFg: string = "#ffffff",
91
105
  darkFg: string = "#0a0a0a",
92
106
  ): string => {
93
107
  const lum = relativeLuminance(background);
@@ -95,7 +109,7 @@ export const pickContrastColor = (
95
109
  return lum > 0.5 ? darkFg : lightFg;
96
110
  };
97
111
 
98
- const colorWithAlpha = (color: string, alpha: number): string => {
112
+ export const colorWithAlpha = (color: string, alpha: number): string => {
99
113
  const hex = color.trim();
100
114
  const shortHex = /^#([0-9a-f]{3})$/i.exec(hex);
101
115
  const longHex = /^#([0-9a-f]{6})$/i.exec(hex);
@@ -166,7 +180,7 @@ export const modalPanelStyle = (solid = false): CSSProperties => ({
166
180
  WebkitBackdropFilter: solid ? undefined : "blur(10px)",
167
181
  border: `1px solid ${profileColors.border}`,
168
182
  borderRadius: 8,
169
- boxShadow: "0 25px 50px -12px rgba(0,0,0,0.6)",
183
+ boxShadow: "var(--shadow-modal)",
170
184
  overflow: "hidden",
171
185
  fontFamily: fontFamily.sans,
172
186
  });
@@ -209,6 +223,11 @@ export const upperLabelStyle: CSSProperties = {
209
223
  letterSpacing: "0.1em",
210
224
  };
211
225
 
226
+ /**
227
+ * Raised button surface, computed inline. Uses `--btn-bevel` for the top
228
+ * sheen so dark theme keeps the white-bevel look while light theme picks up
229
+ * a dark bevel (host sets `--btn-bevel: 15 23 42` under `.light`).
230
+ */
212
231
  export const raisedButtonStyle = (
213
232
  state: "default" | "hover" | "active" | "disabled" = "default",
214
233
  ): CSSProperties => {
@@ -216,9 +235,9 @@ export const raisedButtonStyle = (
216
235
  return {
217
236
  backgroundColor: profileColors.surfaceBtnActive,
218
237
  backgroundImage:
219
- "linear-gradient(to bottom, rgba(255,255,255,0.05), transparent)",
238
+ "linear-gradient(to bottom, rgb(var(--btn-bevel) / 0.05), transparent)",
220
239
  boxShadow:
221
- "inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.45), inset 0 0 0 1px #4B4D50, 0 1px 2px rgba(0,0,0,0.5)",
240
+ "inset 0 1px 0 rgb(var(--btn-bevel) / 0.18), inset 0 -1px 0 rgba(0,0,0,0.45), inset 0 0 0 1px rgb(var(--surface-bd-active)), 0 1px 2px rgba(0,0,0,0.5)",
222
241
  color: profileColors.text,
223
242
  border: "none",
224
243
  };
@@ -228,9 +247,9 @@ export const raisedButtonStyle = (
228
247
  return {
229
248
  backgroundColor: profileColors.surfaceBtn,
230
249
  backgroundImage:
231
- "linear-gradient(to bottom, rgba(255,255,255,0.02), transparent)",
250
+ "linear-gradient(to bottom, rgb(var(--btn-bevel) / 0.02), transparent)",
232
251
  boxShadow:
233
- "inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.25), inset 0 0 0 1px #1c2026",
252
+ "inset 0 1px 0 rgb(var(--btn-bevel) / 0.05), inset 0 -1px 0 rgba(0,0,0,0.25), inset 0 0 0 1px rgb(var(--surface-bd) / 0.6)",
234
253
  color: profileColors.subdued,
235
254
  border: "none",
236
255
  cursor: "not-allowed",
@@ -241,10 +260,10 @@ export const raisedButtonStyle = (
241
260
  return {
242
261
  backgroundColor: profileColors.surfaceBtnHover,
243
262
  backgroundImage:
244
- "linear-gradient(to bottom, rgba(255,255,255,0.04), transparent)",
263
+ "linear-gradient(to bottom, rgb(var(--btn-bevel) / 0.04), transparent)",
245
264
  boxShadow:
246
- "inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.40), inset 0 0 0 1px #444548",
247
- color: "#d1d5db",
265
+ "inset 0 1px 0 rgb(var(--btn-bevel) / 0.14), inset 0 -1px 0 rgba(0,0,0,0.40), inset 0 0 0 1px rgb(var(--surface-bd-hover))",
266
+ color: "rgb(var(--content-tertiary))",
248
267
  border: "none",
249
268
  };
250
269
  }
@@ -252,9 +271,9 @@ export const raisedButtonStyle = (
252
271
  return {
253
272
  backgroundColor: profileColors.surfaceBtn,
254
273
  backgroundImage:
255
- "linear-gradient(to bottom, rgba(255,255,255,0.03), transparent)",
274
+ "linear-gradient(to bottom, rgb(var(--btn-bevel) / 0.03), transparent)",
256
275
  boxShadow:
257
- "inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.35), inset 0 0 0 1px #262A30",
276
+ "inset 0 1px 0 rgb(var(--btn-bevel) / 0.10), inset 0 -1px 0 rgba(0,0,0,0.35), inset 0 0 0 1px rgb(var(--surface-bd))",
258
277
  color: profileColors.muted,
259
278
  border: "none",
260
279
  };
@@ -265,7 +284,9 @@ export const dangerOutlineButtonStyle = (
265
284
  hovered = false,
266
285
  ): CSSProperties => ({
267
286
  background: enabled && hovered ? "rgba(248,113,113,0.1)" : "transparent",
268
- border: `1px solid ${enabled ? profileColors.danger : "#374151"}`,
287
+ border: `1px solid ${
288
+ enabled ? profileColors.danger : "rgb(var(--line-strong))"
289
+ }`,
269
290
  color: enabled ? profileColors.danger : profileColors.disabled,
270
291
  cursor: enabled ? "pointer" : "not-allowed",
271
292
  });
package/src/styles.css CHANGED
@@ -1 +1 @@
1
- .hypurr-connect .btn-raised{background-color:#0d1219;background-image:linear-gradient(180deg,hsla(0,0%,100%,.03),transparent);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.1),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 0 1px #262a30;color:#aab1c1;transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised:hover:not(:disabled){background-color:#15171a;background-image:linear-gradient(180deg,hsla(0,0%,100%,.04),transparent);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.14),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 0 0 1px #444548;color:#d1d5db}.hypurr-connect .btn-raised-active{background-color:#1e2124;background-image:linear-gradient(180deg,hsla(0,0%,100%,.05),transparent);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.18),inset 0 -1px 0 rgba(0,0,0,.45),inset 0 0 0 1px #4b4d50,0 1px 2px rgba(0,0,0,.5);color:#fff}.hypurr-connect .btn-raised-active,.hypurr-connect .btn-raised-disabled{transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised-disabled{background-color:#0d1219;background-image:linear-gradient(180deg,hsla(0,0%,100%,.02),transparent);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.05),inset 0 -1px 0 rgba(0,0,0,.25),inset 0 0 0 1px #1c2026;color:#7d8597;cursor:not-allowed}.hypurr-connect .\!visible{visibility:visible!important}.hypurr-connect .visible{visibility:visible}.hypurr-connect .fixed{position:fixed}.hypurr-connect .absolute{position:absolute}.hypurr-connect .relative{position:relative}.hypurr-connect .inset-0{inset:0}.hypurr-connect .right-2{right:.5rem}.hypurr-connect .right-6{right:1.5rem}.hypurr-connect .top-1\/2{top:50%}.hypurr-connect .z-\[100\]{z-index:100}.hypurr-connect .z-\[101\]{z-index:101}.hypurr-connect .z-\[110\]{z-index:110}.hypurr-connect .z-\[111\]{z-index:111}.hypurr-connect .mb-1\.5{margin-bottom:.375rem}.hypurr-connect .mb-2{margin-bottom:.5rem}.hypurr-connect .mt-0\.5{margin-top:.125rem}.hypurr-connect .mt-1{margin-top:.25rem}.hypurr-connect .mt-1\.5{margin-top:.375rem}.hypurr-connect .block{display:block}.hypurr-connect .inline-block{display:inline-block}.hypurr-connect .inline{display:inline}.hypurr-connect .flex{display:flex}.hypurr-connect .inline-flex{display:inline-flex}.hypurr-connect .grid{display:grid}.hypurr-connect .contents{display:contents}.hypurr-connect .hidden{display:none}.hypurr-connect .h-8{height:2rem}.hypurr-connect .w-8{width:2rem}.hypurr-connect .w-full{width:100%}.hypurr-connect .min-w-0{min-width:0}.hypurr-connect .max-w-md{max-width:28rem}.hypurr-connect .flex-1{flex:1 1 0%}.hypurr-connect .flex-shrink-0{flex-shrink:0}.hypurr-connect .-translate-y-1\/2{--tw-translate-y:-50%}.hypurr-connect .-translate-y-1\/2,.hypurr-connect .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hypurr-connect .cursor-not-allowed{cursor:not-allowed}.hypurr-connect .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.hypurr-connect .items-start{align-items:flex-start}.hypurr-connect .items-center{align-items:center}.hypurr-connect .justify-center{justify-content:center}.hypurr-connect .justify-between{justify-content:space-between}.hypurr-connect .gap-1\.5{gap:.375rem}.hypurr-connect .gap-2{gap:.5rem}.hypurr-connect .gap-3{gap:.75rem}.hypurr-connect :is(.space-y-2>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-3>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-4>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.hypurr-connect .overflow-hidden{overflow:hidden}.hypurr-connect .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hypurr-connect .break-all{word-break:break-all}.hypurr-connect .rounded{border-radius:.25rem}.hypurr-connect .rounded-lg{border-radius:.5rem}.hypurr-connect .rounded-md{border-radius:.375rem}.hypurr-connect .border{border-width:1px}.hypurr-connect .border-b{border-bottom-width:1px}.hypurr-connect .border-amber-500\/25{border-color:rgba(245,158,11,.25)}.hypurr-connect .border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.hypurr-connect .border-purple-500{--tw-border-opacity:1;border-color:rgb(185 125 241/var(--tw-border-opacity,1))}.hypurr-connect .border-surface-bd{--tw-border-opacity:1;border-color:rgb(38 42 48/var(--tw-border-opacity,1))}.hypurr-connect .border-trade-down\/20{border-color:hsla(0,91%,71%,.2)}.hypurr-connect .border-trade-down\/50{border-color:hsla(0,91%,71%,.5)}.hypurr-connect .border-white\/\[0\.06\]{border-color:hsla(0,0%,100%,.06)}.hypurr-connect .border-white\/\[0\.08\]{border-color:hsla(0,0%,100%,.08)}.hypurr-connect .bg-amber-500\/\[0\.08\]{background-color:rgba(245,158,11,.08)}.hypurr-connect .bg-black\/70{background-color:rgba(0,0,0,.7)}.hypurr-connect .bg-surface-btn\/90{background-color:rgba(13,18,25,.9)}.hypurr-connect .bg-surface-modal{--tw-bg-opacity:1;background-color:rgb(14 18 24/var(--tw-bg-opacity,1))}.hypurr-connect .bg-trade-down\/\[0\.08\]{background-color:hsla(0,91%,71%,.08)}.hypurr-connect .bg-transparent{background-color:transparent}.hypurr-connect .bg-white\/\[0\.03\]{background-color:hsla(0,0%,100%,.03)}.hypurr-connect .bg-white\/\[0\.06\]{background-color:hsla(0,0%,100%,.06)}.hypurr-connect .p-1\.5{padding:.375rem}.hypurr-connect .p-3{padding:.75rem}.hypurr-connect .p-4{padding:1rem}.hypurr-connect .px-3{padding-left:.75rem;padding-right:.75rem}.hypurr-connect .px-6{padding-left:1.5rem;padding-right:1.5rem}.hypurr-connect .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.hypurr-connect .py-2{padding-top:.5rem;padding-bottom:.5rem}.hypurr-connect .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.hypurr-connect .py-5{padding-top:1.25rem}.hypurr-connect .pb-5,.hypurr-connect .py-5{padding-bottom:1.25rem}.hypurr-connect .pb-6{padding-bottom:1.5rem}.hypurr-connect .pr-11{padding-right:2.75rem}.hypurr-connect .pt-5{padding-top:1.25rem}.hypurr-connect .pt-6{padding-top:1.5rem}.hypurr-connect .font-mono{font-family:Google Sans Code,Roboto Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.hypurr-connect .font-sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.hypurr-connect .text-base{font-size:12.5px;line-height:1rem}.hypurr-connect .text-lg{font-size:14px;line-height:1.25rem}.hypurr-connect .font-medium{font-weight:500}.hypurr-connect .font-semibold{font-weight:600}.hypurr-connect .uppercase{text-transform:uppercase}.hypurr-connect .tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.hypurr-connect .tracking-\[0\.1em\]{letter-spacing:.1em}.hypurr-connect .text-amber-200{--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.hypurr-connect .text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.hypurr-connect .text-gray-400{--tw-text-opacity:1;color:rgb(170 177 193/var(--tw-text-opacity,1))}.hypurr-connect .text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.hypurr-connect .text-gray-600{--tw-text-opacity:1;color:rgb(125 133 151/var(--tw-text-opacity,1))}.hypurr-connect .text-purple-400{--tw-text-opacity:1;color:rgb(216 180 254/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-down{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-up{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.hypurr-connect .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hypurr-connect .placeholder-gray-600::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(125 133 151/var(--tw-placeholder-opacity,1))}.hypurr-connect .placeholder-gray-600::placeholder{--tw-placeholder-opacity:1;color:rgb(125 133 151/var(--tw-placeholder-opacity,1))}.hypurr-connect .shadow-modal{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.6);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hypurr-connect .outline{outline-style:solid}.hypurr-connect .blur{--tw-blur:blur(8px)}.hypurr-connect .blur,.hypurr-connect .drop-shadow{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)}.hypurr-connect .drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.hypurr-connect .filter{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)}.hypurr-connect .backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.hypurr-connect .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hypurr-connect .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hypurr-connect .hover\:bg-purple-500\/10:hover{background-color:rgba(185,125,241,.1)}.hypurr-connect .hover\:text-gray-300:hover{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.hypurr-connect .hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hypurr-connect .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.hypurr-connect .disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.hypurr-connect .disabled\:opacity-40:disabled{opacity:.4}.hypurr-connect .disabled\:opacity-50:disabled{opacity:.5}
1
+ .hypurr-connect .btn-raised{background-color:rgb(var(--btn-bg));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.03),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.1),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgb(var(--btn-ring));color:rgb(var(--btn-fg));transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised:hover:not(:disabled){background-color:rgb(var(--surface-btn-hover));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.04),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.14),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 0 0 1px rgb(var(--surface-bd-hover));color:rgb(var(--content-tertiary))}.hypurr-connect .btn-raised-active{background-color:rgb(var(--surface-btn-active));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.05),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.18),inset 0 -1px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgb(var(--surface-bd-active)),0 1px 2px rgba(0,0,0,.5);color:rgb(var(--content))}.hypurr-connect .btn-raised-accent,.hypurr-connect .btn-raised-active{transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised-accent{background-color:rgb(var(--accent-btn-bg));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.03),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.1),inset 0 -1px 0 rgb(var(--accent-btn-inset)/.75);color:rgb(var(--accent-btn-fg))}.hypurr-connect .btn-raised-accent:hover:not(:disabled){background-color:rgb(var(--accent-btn-bg-hover));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.04),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.14),inset 0 -1px 0 rgb(var(--accent-btn-inset)/.8);color:rgb(var(--accent-btn-fg-hover))}.hypurr-connect .btn-raised-disabled{background-color:rgb(var(--btn-bg));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.02),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.05),inset 0 -1px 0 rgba(0,0,0,.25),inset 0 0 0 1px rgb(var(--btn-ring)/.6);color:rgb(var(--content-faint));cursor:not-allowed;transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.light .hypurr-connect .btn-raised{background-image:linear-gradient(to bottom,#fff,rgb(var(--surface-btn)));box-shadow:0 1px 2px rgba(15,23,42,.08),0 1px 1px rgba(15,23,42,.04),inset 0 0 0 1px rgb(var(--surface-bd))}.light .hypurr-connect .btn-raised:hover:not(:disabled){background-image:linear-gradient(to bottom,#fff,rgb(var(--surface-btn-hover)));box-shadow:0 2px 6px rgba(15,23,42,.12),0 1px 2px rgba(15,23,42,.06),inset 0 0 0 1px rgb(var(--surface-bd-hover))}.light .hypurr-connect .btn-raised-active{background-image:none;background-color:rgb(var(--surface-btn-active));box-shadow:inset 0 1px 2px rgba(15,23,42,.12),inset 0 0 0 1px rgb(var(--surface-bd-active))}.light .hypurr-connect .btn-raised-disabled{background-image:none;box-shadow:inset 0 0 0 1px rgb(var(--surface-bd))}.light .hypurr-connect .btn-raised-accent{box-shadow:0 1px 2px rgba(124,58,237,.18),inset 0 0 0 1px rgba(124,58,237,.22)}.light .hypurr-connect .btn-raised-accent:hover:not(:disabled){box-shadow:0 2px 6px rgba(124,58,237,.24),inset 0 0 0 1px rgba(124,58,237,.28)}.hypurr-connect .input{background-color:rgb(var(--input-bg));box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 -1px 0 rgb(var(--btn-bevel)/.05),inset 0 0 0 1px rgb(var(--input-ring));color:rgb(var(--content));transition:box-shadow .15s,background-color .15s}.hypurr-connect .input::-moz-placeholder{color:rgb(var(--content-faint));opacity:1}.hypurr-connect .input::placeholder{color:rgb(var(--content-faint));opacity:1}.hypurr-connect .input:focus,.hypurr-connect .input:focus-within{background-color:rgb(var(--input-bg-focus));box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgb(var(--btn-bevel)/.06),inset 0 0 0 1px rgb(var(--input-ring-focus))}.hypurr-connect .input-error,.hypurr-connect .input-error:focus,.hypurr-connect .input-error:focus-within{box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 -1px 0 rgb(var(--btn-bevel)/.05),inset 0 0 0 1px hsla(0,91%,71%,.7)}.light .hypurr-connect .input{box-shadow:inset 0 2px 3px rgba(15,23,42,.08),inset 0 0 0 1px rgb(var(--input-ring))}.light .hypurr-connect .input:focus,.light .hypurr-connect .input:focus-within{box-shadow:inset 0 2px 4px rgba(15,23,42,.1),inset 0 0 0 1px rgb(var(--input-ring-focus))}.light .hypurr-connect .input-error,.light .hypurr-connect .input-error:focus,.light .hypurr-connect .input-error:focus-within{box-shadow:inset 0 2px 3px rgba(15,23,42,.08),inset 0 0 0 1px rgba(220,38,38,.7)}.hypurr-connect .\!visible{visibility:visible!important}.hypurr-connect .visible{visibility:visible}.hypurr-connect .fixed{position:fixed}.hypurr-connect .absolute{position:absolute}.hypurr-connect .relative{position:relative}.hypurr-connect .inset-0{inset:0}.hypurr-connect .right-2{right:.5rem}.hypurr-connect .right-6{right:1.5rem}.hypurr-connect .top-1\/2{top:50%}.hypurr-connect .z-\[100\]{z-index:100}.hypurr-connect .z-\[101\]{z-index:101}.hypurr-connect .z-\[110\]{z-index:110}.hypurr-connect .z-\[111\]{z-index:111}.hypurr-connect .mb-1\.5{margin-bottom:.375rem}.hypurr-connect .mb-2{margin-bottom:.5rem}.hypurr-connect .mt-0\.5{margin-top:.125rem}.hypurr-connect .mt-1{margin-top:.25rem}.hypurr-connect .mt-1\.5{margin-top:.375rem}.hypurr-connect .block{display:block}.hypurr-connect .inline-block{display:inline-block}.hypurr-connect .inline{display:inline}.hypurr-connect .flex{display:flex}.hypurr-connect .inline-flex{display:inline-flex}.hypurr-connect .grid{display:grid}.hypurr-connect .contents{display:contents}.hypurr-connect .hidden{display:none}.hypurr-connect .h-8{height:2rem}.hypurr-connect .w-8{width:2rem}.hypurr-connect .w-full{width:100%}.hypurr-connect .min-w-0{min-width:0}.hypurr-connect .max-w-md{max-width:28rem}.hypurr-connect .flex-1{flex:1 1 0%}.hypurr-connect .flex-shrink-0{flex-shrink:0}.hypurr-connect .-translate-y-1\/2{--tw-translate-y:-50%}.hypurr-connect .-translate-y-1\/2,.hypurr-connect .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hypurr-connect .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.hypurr-connect .items-start{align-items:flex-start}.hypurr-connect .items-center{align-items:center}.hypurr-connect .justify-center{justify-content:center}.hypurr-connect .justify-between{justify-content:space-between}.hypurr-connect .gap-1\.5{gap:.375rem}.hypurr-connect .gap-2{gap:.5rem}.hypurr-connect .gap-3{gap:.75rem}.hypurr-connect :is(.space-y-2>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-3>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-4>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.hypurr-connect .overflow-hidden{overflow:hidden}.hypurr-connect .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hypurr-connect .break-all{word-break:break-all}.hypurr-connect .rounded{border-radius:.25rem}.hypurr-connect .rounded-lg{border-radius:.5rem}.hypurr-connect .rounded-md{border-radius:.375rem}.hypurr-connect .border{border-width:1px}.hypurr-connect .border-b{border-bottom-width:1px}.hypurr-connect .border-amber-500\/25{border-color:rgb(var(--amber-500)/.25)}.hypurr-connect .border-line{--tw-border-opacity:1;border-color:rgb(var(--line)/var(--tw-border-opacity,1))}.hypurr-connect .border-line-strong{--tw-border-opacity:1;border-color:rgb(var(--line-strong)/var(--tw-border-opacity,1))}.hypurr-connect .border-surface-bd{--tw-border-opacity:1;border-color:rgb(var(--surface-bd)/var(--tw-border-opacity,1))}.hypurr-connect .border-surface-bd-active{--tw-border-opacity:1;border-color:rgb(var(--surface-bd-active)/var(--tw-border-opacity,1))}.hypurr-connect .border-trade-down\/20{border-color:rgb(var(--trade-down)/.2)}.hypurr-connect .bg-amber-500\/\[0\.08\]{background-color:rgb(var(--amber-500)/.08)}.hypurr-connect .bg-overlay\/70{background-color:rgb(var(--overlay)/.7)}.hypurr-connect .bg-surface-btn{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-surface-btn-active{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn-active)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-surface-btn-hover{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-surface-modal{--tw-bg-opacity:1;background-color:rgb(var(--surface-modal)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-trade-down\/\[0\.08\]{background-color:rgb(var(--trade-down)/.08)}.hypurr-connect .p-1\.5{padding:.375rem}.hypurr-connect .p-3{padding:.75rem}.hypurr-connect .p-4{padding:1rem}.hypurr-connect .px-2{padding-left:.5rem;padding-right:.5rem}.hypurr-connect .px-3{padding-left:.75rem;padding-right:.75rem}.hypurr-connect .px-6{padding-left:1.5rem;padding-right:1.5rem}.hypurr-connect .py-1{padding-top:.25rem;padding-bottom:.25rem}.hypurr-connect .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.hypurr-connect .py-2{padding-top:.5rem;padding-bottom:.5rem}.hypurr-connect .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.hypurr-connect .py-5{padding-top:1.25rem}.hypurr-connect .pb-5,.hypurr-connect .py-5{padding-bottom:1.25rem}.hypurr-connect .pb-6{padding-bottom:1.5rem}.hypurr-connect .pr-11{padding-right:2.75rem}.hypurr-connect .pt-5{padding-top:1.25rem}.hypurr-connect .pt-6{padding-top:1.5rem}.hypurr-connect .font-mono{font-family:Google Sans Code,Roboto Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.hypurr-connect .font-sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.hypurr-connect .text-base{font-size:12.5px;line-height:1rem}.hypurr-connect .text-lg{font-size:14px;line-height:1.25rem}.hypurr-connect .font-medium{font-weight:500}.hypurr-connect .uppercase{text-transform:uppercase}.hypurr-connect .tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.hypurr-connect .tracking-\[0\.1em\]{letter-spacing:.1em}.hypurr-connect .text-amber-200{--tw-text-opacity:1;color:rgb(var(--amber-200)/var(--tw-text-opacity,1))}.hypurr-connect .text-amber-400{--tw-text-opacity:1;color:rgb(var(--amber-400)/var(--tw-text-opacity,1))}.hypurr-connect .text-content{--tw-text-opacity:1;color:rgb(var(--content)/var(--tw-text-opacity,1))}.hypurr-connect .text-content-faint{--tw-text-opacity:1;color:rgb(var(--content-faint)/var(--tw-text-opacity,1))}.hypurr-connect .text-content-muted{--tw-text-opacity:1;color:rgb(var(--content-muted)/var(--tw-text-opacity,1))}.hypurr-connect .text-content-subtle{--tw-text-opacity:1;color:rgb(var(--content-subtle)/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-down{--tw-text-opacity:1;color:rgb(var(--trade-down)/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-up{--tw-text-opacity:1;color:rgb(var(--trade-up)/var(--tw-text-opacity,1))}.hypurr-connect .placeholder-content-faint::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(var(--content-faint)/var(--tw-placeholder-opacity,1))}.hypurr-connect .placeholder-content-faint::placeholder{--tw-placeholder-opacity:1;color:rgb(var(--content-faint)/var(--tw-placeholder-opacity,1))}.hypurr-connect .shadow-modal{--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hypurr-connect .outline{outline-style:solid}.hypurr-connect .blur{--tw-blur:blur(8px)}.hypurr-connect .blur,.hypurr-connect .drop-shadow{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)}.hypurr-connect .drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.hypurr-connect .filter{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)}.hypurr-connect .backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.hypurr-connect .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hypurr-connect .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{--surface-btn:13 18 25;--surface-btn-hover:21 23 26;--surface-btn-active:30 33 36;--surface-bd:38 42 48;--surface-bd-hover:68 69 72;--surface-bd-active:75 77 80;--surface-modal:14 18 24;--surface-dropdown:17 24 32;--surface-base:11 14 17;--surface-deep:9 11 14;--surface-raised:17 24 39;--surface-elevated:31 41 55;--surface-inset:55 65 81;--surface-inverse:255 255 255;--content:243 244 246;--content-secondary:229 231 235;--content-tertiary:209 213 219;--content-muted:170 177 193;--content-subtle:125 133 151;--content-faint:107 114 128;--content-disabled:55 65 81;--line:31 41 55;--line-strong:55 65 81;--line-subtle:17 24 39;--line-inverse:255 255 255;--overlay:0 0 0;--accent:168 85 247;--trade-up:52 211 153;--trade-down:248 113 113;--purple-400:216 180 254;--purple-500:185 125 241;--blue-500:90 153 255;--green-400:83 203 127;--amber-200:253 230 138;--amber-400:251 191 36;--amber-500:245 158 11;--btn-bg:13 18 25;--btn-fg:170 177 193;--btn-ring:38 42 48;--btn-bevel:255 255 255;--accent-btn-bg:37 28 57;--accent-btn-bg-hover:52 35 80;--accent-btn-fg:216 180 254;--accent-btn-fg-hover:233 213 255;--accent-btn-inset:15 5 35;--input-bg:18 23 31;--input-bg-focus:26 33 44;--input-ring:45 53 64;--input-ring-focus:59 69 82;--shadow-modal:0 25px 50px -12px rgba(0,0,0,.6);--shadow-dropdown:0 8px 40px rgba(0,0,0,.85)}.light{--surface-btn:244 246 249;--surface-btn-hover:236 239 243;--surface-btn-active:226 230 236;--surface-bd:214 220 228;--surface-bd-hover:194 201 211;--surface-bd-active:168 176 191;--surface-modal:255 255 255;--surface-dropdown:255 255 255;--surface-base:245 244 249;--surface-deep:233 236 242;--surface-raised:255 255 255;--surface-elevated:228 231 237;--surface-inset:225 229 235;--surface-inverse:17 24 39;--content:17 24 39;--content-secondary:31 41 55;--content-tertiary:55 65 81;--content-muted:91 101 115;--content-subtle:107 114 128;--content-faint:148 163 184;--content-disabled:179 185 196;--line:222 226 234;--line-strong:205 211 220;--line-subtle:238 240 243;--line-inverse:17 24 39;--overlay:0 0 0;--accent:147 51 234;--trade-up:5 150 105;--trade-down:220 38 38;--purple-400:124 58 237;--purple-500:109 40 217;--blue-500:37 99 235;--green-400:22 163 74;--amber-200:161 98 7;--amber-400:180 83 9;--amber-500:180 83 9;--btn-bg:255 255 255;--btn-fg:71 85 105;--btn-ring:217 221 228;--btn-bevel:15 23 42;--accent-btn-bg:243 232 255;--accent-btn-bg-hover:233 213 255;--accent-btn-fg:109 40 217;--accent-btn-fg-hover:88 28 135;--accent-btn-inset:147 51 234;--input-bg:238 240 246;--input-bg-focus:230 232 240;--input-ring:200 206 218;--input-ring-focus:168 175 192;--shadow-modal:0 16px 40px -12px rgba(15,23,42,.24),0 4px 12px -4px rgba(15,23,42,.12);--shadow-dropdown:0 12px 28px -8px rgba(15,23,42,.2),0 2px 8px -2px rgba(15,23,42,.1)}.hypurr-connect .hover\:border-surface-bd-hover:hover{--tw-border-opacity:1;border-color:rgb(var(--surface-bd-hover)/var(--tw-border-opacity,1))}.hypurr-connect .hover\:bg-surface-btn-hover:hover{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1))}.hypurr-connect .hover\:text-content:hover{--tw-text-opacity:1;color:rgb(var(--content)/var(--tw-text-opacity,1))}.hypurr-connect .hover\:text-content-tertiary:hover{--tw-text-opacity:1;color:rgb(var(--content-tertiary)/var(--tw-text-opacity,1))}.hypurr-connect .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.hypurr-connect .disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.hypurr-connect .disabled\:opacity-40:disabled{opacity:.4}.hypurr-connect .disabled\:opacity-50:disabled{opacity:.5}