@hfunlabs/hypurr-connect 0.1.15 → 0.1.18

package/src/UserProfileModal.tsx

@@ -33,6 +33,7 @@ import {
 } from "./icons/lucide";
 import {
   closeBtnStyle as makeCloseBtnStyle,
+  colorWithAlpha,
   fontFamily,
   modalBackdropStyle,
   modalHeaderStyle,
@@ -42,7 +43,6 @@ import {
   type PrincipalColorOverrides,
   type PrincipalColors,
   profileColors,
-  raisedButtonStyle,
   resolvePrincipalColors,
   titleStyle,
   upperLabelStyle,
@@ -104,7 +104,7 @@ export interface UserProfileModalProps {
 
 const backdropStyle = modalBackdropStyle(100);
 const wrapperStyle = modalWrapperStyle(101);
-const panelStyle = modalPanelStyle(false);
+const panelStyle = modalPanelStyle(true);
 const headerStyle = modalHeaderStyle;
 
 const profileSectionStyle: CSSProperties = {
@@ -138,23 +138,18 @@ const tabButtonLayoutStyle: CSSProperties = {
 };
 
 const statBoxStyle: CSSProperties = {
-  background: "rgba(255,255,255,0.03)",
+  background: "rgb(var(--btn-bevel) / 0.03)",
   borderRadius: 8,
   padding: 12,
   border: `1px solid ${profileColors.border}`,
 };
 
-const slippageBtnBaseStyle: CSSProperties = {
-  flex: 1,
-  padding: "4px 0",
-  borderRadius: 4,
-  fontSize: 12.5,
-  lineHeight: "1rem",
-  fontFamily: fontFamily.mono,
-  fontWeight: 500,
-  cursor: "pointer",
-  transition: "background-color 150ms, color 150ms, border-color 150ms",
-};
+const slippageBtnBaseClass =
+  "flex-1 rounded border px-2 py-1 font-mono font-medium text-base transition-colors";
+const slippageBtnSelectedClass =
+  "bg-surface-btn-active text-content border-surface-bd-active";
+const slippageBtnIdleClass =
+  "bg-surface-btn text-content-muted border-surface-bd hover:bg-surface-btn-hover hover:border-surface-bd-hover hover:text-content-tertiary";
 
 const walletRowStyle: CSSProperties = {
   display: "flex",
@@ -179,9 +174,9 @@ function getWalletTypeMeta(wallet: HyperliquidWallet): WalletTypeMeta {
   if (wallet.isAgent) {
     return {
       label: "Agent wallet",
-      color: "#38bdf8",
-      background: "rgba(56,189,248,0.16)",
-      border: "rgba(56,189,248,0.34)",
+      color: "rgb(var(--blue-500))",
+      background: "rgb(var(--blue-500) / 0.16)",
+      border: "rgb(var(--blue-500) / 0.34)",
       icon: <Bot size={10} />,
     };
   }
@@ -189,18 +184,18 @@ function getWalletTypeMeta(wallet: HyperliquidWallet): WalletTypeMeta {
   if (wallet.isReadOnly) {
     return {
       label: "Read-only wallet",
-      color: "#a78bfa",
-      background: "rgba(167,139,250,0.16)",
-      border: "rgba(167,139,250,0.34)",
+      color: "rgb(var(--purple-400))",
+      background: "rgb(var(--purple-400) / 0.16)",
+      border: "rgb(var(--purple-400) / 0.34)",
       icon: <Eye size={10} />,
     };
   }
 
   return {
     label: "Private-key wallet",
-    color: "#34d399",
-    background: "rgba(52,211,153,0.16)",
-    border: "rgba(52,211,153,0.34)",
+    color: "rgb(var(--green-400))",
+    background: "rgb(var(--green-400) / 0.16)",
+    border: "rgb(var(--green-400) / 0.34)",
     icon: <KeyRound size={10} />,
   };
 }
@@ -227,7 +222,9 @@ function ToggleSwitch({
         alignItems: "center",
         borderRadius: 9999,
         border: "none",
-        background: checked ? accentColor : "rgba(255,255,255,0.08)",
+        background: checked
+          ? colorWithAlpha(accentColor, 0.85)
+          : "rgb(var(--btn-bevel) / 0.08)",
         cursor: "pointer",
         padding: 0,
         transition: "background 150ms",
@@ -261,20 +258,12 @@ function RaisedButton({
   children: ReactNode;
   style?: CSSProperties;
 }) {
-  const [hovered, setHovered] = useState(false);
   return (
     <button
       type="button"
       onClick={onClick}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      style={{
-        ...tabButtonLayoutStyle,
-        ...raisedButtonStyle(
-          selected ? "active" : hovered ? "hover" : "default",
-        ),
-        ...style,
-      }}
+      className={selected ? "btn-raised-active" : "btn-raised"}
+      style={{ ...tabButtonLayoutStyle, ...style }}
     >
       {children}
     </button>
@@ -290,33 +279,13 @@ function SlippageButton({
   onClick: () => void;
   children: ReactNode;
 }) {
-  const [hovered, setHovered] = useState(false);
   return (
     <button
       type="button"
       onClick={onClick}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      style={{
-        ...slippageBtnBaseStyle,
-        background: selected
-          ? profileColors.surfaceBtnActive
-          : hovered
-            ? profileColors.surfaceBtnHover
-            : profileColors.surfaceBtn,
-        border: `1px solid ${
-          selected
-            ? profileColors.surfaceBdActive
-            : hovered
-              ? profileColors.surfaceBdHover
-              : profileColors.surfaceBd
-        }`,
-        color: selected
-          ? profileColors.text
-          : hovered
-            ? "#d1d5db"
-            : profileColors.muted,
-      }}
+      className={`${slippageBtnBaseClass} ${
+        selected ? slippageBtnSelectedClass : slippageBtnIdleClass
+      }`}
     >
       {children}
     </button>
@@ -426,7 +395,7 @@ export function UserProfileModal({
                     <div
                       style={{
                         padding: "10px 12px",
-                        background: "rgba(255,255,255,0.03)",
+                        background: "rgb(var(--btn-bevel) / 0.03)",
                         border: `1px solid ${profileColors.border}`,
                         borderRadius: 8,
                       }}
@@ -561,11 +530,15 @@ export function UserProfileModal({
                             display: "flex",
                             alignItems: "center",
                             gap: 6,
-                            color: "#eab308",
+                            color: "rgb(var(--amber-400))",
                             marginBottom: 6,
                           }}
                         >
-                          <Star size={13} color="#eab308" fill="#eab308" />
+                          <Star
+                            size={13}
+                            color="rgb(var(--amber-400))"
+                            fill="rgb(var(--amber-400))"
+                          />
                           <span style={upperLabelStyle}>Hfun Score</span>
                         </div>
                         <p
@@ -762,7 +735,7 @@ export function UserProfileModal({
                               width: 40,
                               height: 40,
                               borderRadius: "50%",
-                              background: "rgba(255,255,255,0.04)",
+                              background: "rgb(var(--btn-bevel) / 0.04)",
                               display: "flex",
                               alignItems: "center",
                               justifyContent: "center",
@@ -833,8 +806,8 @@ export function UserProfileModal({
                 <div style={{ padding: "0 24px 24px" }}>
                   <button
                     onClick={onClose}
+                    className="btn-raised"
                     style={{
-                      ...raisedButtonStyle("default"),
                       width: "100%",
                       padding: "6px 0",
                       fontSize: 12.5,
@@ -890,10 +863,6 @@ function WalletRow({
   const [hovered, setHovered] = useState(false);
   const agentExpiryTitle = getAgentExpiryTitle(wallet);
   const isAgentExpired = !!agentExpiryTitle;
-  const displayAddress =
-    wallet.isAgent && wallet.agentEthereumAddress?.value
-      ? wallet.agentEthereumAddress.value
-      : wallet.ethereumAddress;
   const typeMeta = getWalletTypeMeta(wallet);
   return (
     <div
@@ -960,7 +929,7 @@ function WalletRow({
             color: typeMeta.color,
             background: typeMeta.background,
             border: `1px solid ${typeMeta.border}`,
-            boxShadow: "0 1px 4px rgba(0,0,0,0.35)",
+            boxShadow: "0 1px 4px rgb(var(--btn-bevel) / 0.18)",
           }}
         >
           {typeMeta.icon}
@@ -1001,8 +970,8 @@ function WalletRow({
             fontFamily: fontFamily.mono,
           }}
         >
-          {displayAddress?.slice(0, 6)}...
-          {displayAddress?.slice(-4)}
+          {wallet.ethereumAddress?.slice(0, 6)}...
+          {wallet.ethereumAddress?.slice(-4)}
         </p>
       </div>
       {agentExpiryTitle && (

package/src/WalletSelectorDropdown.tsx

@@ -14,6 +14,7 @@ import {
   EXPIRED_AGENT_COLOR,
 } from "./AgentExpiryWarning";
 import { useHypurrConnectInternal } from "./HypurrConnectProvider";
+import { useIsMobile } from "./useIsMobile";
 import { UserProfileModal, type SlippageOption } from "./UserProfileModal";
 import { getAgentExpiryTitle } from "./agentWallet";
 import {
@@ -95,7 +96,7 @@ export interface ExtraFooterItem {
   hoverColor?: string;
 }
 
-const DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
+const DEFAULT_BACKGROUND_COLOR = "rgb(var(--surface-dropdown))";
 
 interface DropdownWallet {
   id: number;
@@ -201,11 +202,6 @@ const formatCompactAddress = (addr: string | undefined) => {
   return `${addr.slice(0, 4)}...${addr.slice(-2)}`;
 };
 
-const getDisplayAddress = (wallet: DropdownWallet) =>
-  wallet.isAgent && wallet.agentEthereumAddress?.value
-    ? wallet.agentEthereumAddress.value
-    : wallet.ethereumAddress;
-
 type WalletTypeMeta = {
   label: string;
   color: string;
@@ -241,23 +237,21 @@ const rootStyle: CSSProperties = {
   right: 0,
   top: "calc(100% + 4px)",
   width: 240,
-  backdropFilter: "blur(10px)",
-  WebkitBackdropFilter: "blur(10px)",
   borderRadius: 9,
-  boxShadow: "0 8px 40px rgba(0,0,0,0.85)",
-  border: "1px solid rgba(255,255,255,0.08)",
+  boxShadow: "var(--shadow-dropdown)",
+  border: "1px solid rgb(var(--line))",
   zIndex: 50,
   transformOrigin: "top right",
   overflow: "hidden",
 };
 
-const sectionBorder = "1px solid rgba(255,255,255,0.06)";
+const sectionBorder = "1px solid rgb(var(--line))";
 
 const sectionHeaderStyle: CSSProperties = {
   padding: "8px 16px",
   fontSize: 12,
   fontWeight: 600,
-  color: "#9ca3af",
+  color: "rgb(var(--content-muted))",
   textTransform: "uppercase",
   letterSpacing: "0.05em",
 };
@@ -273,7 +267,7 @@ const footerBtnStyle: CSSProperties = {
   display: "flex",
   alignItems: "center",
   gap: 8,
-  color: "#9ca3af",
+  color: "rgb(var(--content-muted))",
   transition: "background 120ms, color 120ms",
 };
 
@@ -336,8 +330,7 @@ export function WalletSelectorDropdown({
   const renderWalletRow = (item: WalletListItem, depth: number): ReactNode => {
     const { wallet, label } = item;
     const isSelected = wallet.id === selectedWalletId;
-    const displayAddress = getDisplayAddress(wallet);
-    const compactAddress = formatCompactAddress(displayAddress);
+    const compactAddress = formatCompactAddress(wallet.ethereumAddress);
     const agentExpiryTitle = getAgentExpiryTitle({
       isAgent: !!wallet.isAgent,
       agentExpiresAt: wallet.agentExpiresAt,
@@ -362,7 +355,7 @@ export function WalletSelectorDropdown({
               }
             : undefined
         }
-        onCopy={() => handleCopyAddress(displayAddress)}
+        onCopy={() => handleCopyAddress(wallet.ethereumAddress)}
         agentExpiryTitle={agentExpiryTitle}
         onRenewAgentWallet={
           wallet.isAgent && onRenewAgentWallet
@@ -400,7 +393,7 @@ export function WalletSelectorDropdown({
                 gap: 12,
                 background: "transparent",
                 border: "none",
-                borderBottomColor: "rgba(255,255,255,0.06)",
+                borderBottomColor: "rgb(var(--btn-bevel) / 0.06)",
                 borderBottomStyle: "solid",
                 borderBottomWidth: 1,
                 cursor: "pointer",
@@ -408,7 +401,8 @@ export function WalletSelectorDropdown({
                 transition: "background 120ms",
               }}
               onMouseEnter={(e) =>
-                (e.currentTarget.style.background = "rgba(255,255,255,0.06)")
+                (e.currentTarget.style.background =
+                  "rgb(var(--btn-bevel) / 0.06)")
               }
               onMouseLeave={(e) =>
                 (e.currentTarget.style.background = "transparent")
@@ -509,7 +503,7 @@ export function WalletSelectorDropdown({
                       margin: 0,
                       fontSize: 14,
                       fontWeight: 500,
-                      color: "#fff",
+                      color: "rgb(var(--content))",
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       whiteSpace: "nowrap",
@@ -568,7 +562,9 @@ export function WalletSelectorDropdown({
                           fontWeight: 600,
                           textTransform: "uppercase",
                           letterSpacing: "0.05em",
-                          color: isSelectedGroup ? "#e5e7eb" : "#6b7280",
+                          color: isSelectedGroup
+                            ? "rgb(var(--content-secondary))"
+                            : "rgb(var(--content-faint))",
                         }}
                       >
                         <Folder size={12} style={{ flexShrink: 0 }} />
@@ -587,7 +583,7 @@ export function WalletSelectorDropdown({
                           style={{
                             flexShrink: 0,
                             fontVariantNumeric: "tabular-nums",
-                            color: "#4b5563",
+                            color: "rgb(var(--content-disabled))",
                           }}
                         >
                           {entry.items.length}
@@ -620,7 +616,7 @@ export function WalletSelectorDropdown({
                   }}
                   onMouseEnter={(e) =>
                     (e.currentTarget.style.background =
-                      "rgba(255,255,255,0.06)")
+                      "rgb(var(--btn-bevel) / 0.06)")
                   }
                   onMouseLeave={(e) =>
                     (e.currentTarget.style.background = "transparent")
@@ -690,7 +686,7 @@ function FooterBtn({
   onClick,
   icon,
   label,
-  hoverColor = "#fff",
+  hoverColor = "rgb(var(--content))",
 }: {
   onClick: () => void;
   icon: ReactNode;
@@ -702,12 +698,12 @@ function FooterBtn({
       onClick={onClick}
       style={footerBtnStyle}
       onMouseEnter={(e) => {
-        e.currentTarget.style.background = "rgba(255,255,255,0.06)";
+        e.currentTarget.style.background = "rgb(var(--btn-bevel) / 0.06)";
         e.currentTarget.style.color = hoverColor;
       }}
       onMouseLeave={(e) => {
         e.currentTarget.style.background = "transparent";
-        e.currentTarget.style.color = "#9ca3af";
+        e.currentTarget.style.color = "rgb(var(--content-muted))";
       }}
     >
       {icon}
@@ -742,8 +738,14 @@ function WalletRow({
   colors: PrincipalColors;
 }) {
   const isAgentExpired = !!agentExpiryTitle;
-  const walletTextColor = isAgentExpired ? EXPIRED_AGENT_COLOR : "#d1d5db";
-  const mutedTextColor = isAgentExpired ? "rgba(245,158,11,0.78)" : "#6b7280";
+  const walletTextColor = isAgentExpired
+    ? EXPIRED_AGENT_COLOR
+    : "rgb(var(--content-tertiary))";
+  const mutedTextColor = isAgentExpired
+    ? "rgba(245,158,11,0.78)"
+    : "rgb(var(--content-faint))";
+  // Touch devices have no hover, so keep row actions visible on mobile.
+  const isMobile = useIsMobile();
   return (
     <div
       style={{
@@ -756,19 +758,21 @@ function WalletRow({
         color: walletTextColor,
         display: "flex",
         alignItems: "center",
-        background: isSelected ? "rgba(255,255,255,0.06)" : "transparent",
+        background: isSelected ? "rgb(var(--btn-bevel) / 0.06)" : "transparent",
         transition: "background 120ms",
       }}
       onMouseEnter={(e) => {
-        e.currentTarget.style.background = "rgba(255,255,255,0.06)";
+        e.currentTarget.style.background = "rgb(var(--btn-bevel) / 0.06)";
+        if (isMobile) return;
         const actions =
           e.currentTarget.querySelector<HTMLDivElement>("[data-row-actions]");
         if (actions) actions.style.opacity = "1";
       }}
       onMouseLeave={(e) => {
         e.currentTarget.style.background = isSelected
-          ? "rgba(255,255,255,0.06)"
+          ? "rgb(var(--btn-bevel) / 0.06)"
           : "transparent";
+        if (isMobile) return;
         const actions =
           e.currentTarget.querySelector<HTMLDivElement>("[data-row-actions]");
         if (actions) actions.style.opacity = "0";
@@ -813,7 +817,7 @@ function WalletRow({
                 color: isAgentExpired
                   ? walletTextColor
                   : isSelected
-                    ? "#fff"
+                    ? "rgb(var(--content))"
                     : undefined,
                 fontWeight: isSelected ? 500 : undefined,
               }}
@@ -838,8 +842,8 @@ function WalletRow({
               color: isAgentExpired
                 ? walletTextColor
                 : isSelected
-                  ? "#fff"
-                  : "#9ca3af",
+                  ? "rgb(var(--content))"
+                  : "rgb(var(--content-muted))",
               fontWeight: isSelected ? 500 : undefined,
             }}
           >
@@ -858,7 +862,7 @@ function WalletRow({
         style={{
           display: "flex",
           alignItems: "center",
-          opacity: 0,
+          opacity: isMobile ? 1 : 0,
           transition: "opacity 120ms",
         }}
       >
@@ -921,7 +925,7 @@ function RowIconBtn({
         marginLeft: 4,
         background: "transparent",
         border: "none",
-        color: "#4b5563",
+        color: "rgb(var(--content-disabled))",
         cursor: "pointer",
         display: "flex",
         alignItems: "center",
@@ -929,7 +933,9 @@ function RowIconBtn({
         transition: "color 120ms",
       }}
       onMouseEnter={(e) => (e.currentTarget.style.color = hoverColor)}
-      onMouseLeave={(e) => (e.currentTarget.style.color = "#4b5563")}
+      onMouseLeave={(e) =>
+        (e.currentTarget.style.color = "rgb(var(--content-disabled))")
+      }
     >
       {children}
     </button>

package/src/profileStyles.ts

@@ -1,25 +1,39 @@
 import type { CSSProperties } from "react";
 
+/**
+ * Theme tokens consumed by inline `style={{}}` props. Values resolve to
+ * `rgb(var(--token) / alpha)` strings so the active theme (set by the host
+ * via `:root` / `.light` in `src/tailwind.css`) flows through on every paint
+ * without any JS-side reactivity.
+ */
 export const profileColors = {
+  // Accent stays a literal hex — host may override via the accentColor prop
+  // and helpers below expect a parseable color.
   accent: "#a855f7",
-  panel: "rgba(14,18,24,0.8)",
-  panelSolid: "#0e1218",
-  backdrop: "rgba(0,0,0,0.7)",
-  border: "#1f2937",
-  surfaceBtn: "#0D1219",
-  surfaceBtnHover: "#15171A",
-  surfaceBtnActive: "#1E2124",
-  surfaceBd: "#262A30",
-  surfaceBdHover: "#444548",
-  surfaceBdActive: "#4B4D50",
-  text: "#ffffff",
-  muted: "#aab1c1",
-  subdued: "#7d8597",
-  disabled: "#4b5563",
-  danger: "#f87171",
+
+  panel: "rgb(var(--surface-modal) / 0.8)",
+  panelSolid: "rgb(var(--surface-modal))",
+  backdrop: "rgb(var(--overlay) / 0.7)",
+  border: "rgb(var(--line))",
+
+  surfaceBtn: "rgb(var(--surface-btn))",
+  surfaceBtnHover: "rgb(var(--surface-btn-hover))",
+  surfaceBtnActive: "rgb(var(--surface-btn-active))",
+  surfaceBd: "rgb(var(--surface-bd))",
+  surfaceBdHover: "rgb(var(--surface-bd-hover))",
+  surfaceBdActive: "rgb(var(--surface-bd-active))",
+
+  text: "rgb(var(--content))",
+  muted: "rgb(var(--content-muted))",
+  subdued: "rgb(var(--content-subtle))",
+  disabled: "rgb(var(--content-disabled))",
+
+  danger: "rgb(var(--trade-down))",
+  // Keep the punchier red literal for hover backgrounds where we want a
+  // specific warm tint regardless of theme.
   dangerStrong: "#ef4444",
-  purple: "#d8b4fe",
-  yellow: "#eab308",
+  purple: "rgb(var(--purple-400))",
+  yellow: "rgb(var(--amber-400))",
 };
 
 export const fontFamily = {
@@ -87,7 +101,7 @@ export const relativeLuminance = (color: string): number | null => {
  */
 export const pickContrastColor = (
   background: string,
-  lightFg: string = profileColors.text,
+  lightFg: string = "#ffffff",
   darkFg: string = "#0a0a0a",
 ): string => {
   const lum = relativeLuminance(background);
@@ -95,7 +109,7 @@ export const pickContrastColor = (
   return lum > 0.5 ? darkFg : lightFg;
 };
 
-const colorWithAlpha = (color: string, alpha: number): string => {
+export const colorWithAlpha = (color: string, alpha: number): string => {
   const hex = color.trim();
   const shortHex = /^#([0-9a-f]{3})$/i.exec(hex);
   const longHex = /^#([0-9a-f]{6})$/i.exec(hex);
@@ -166,7 +180,7 @@ export const modalPanelStyle = (solid = false): CSSProperties => ({
   WebkitBackdropFilter: solid ? undefined : "blur(10px)",
   border: `1px solid ${profileColors.border}`,
   borderRadius: 8,
-  boxShadow: "0 25px 50px -12px rgba(0,0,0,0.6)",
+  boxShadow: "var(--shadow-modal)",
   overflow: "hidden",
   fontFamily: fontFamily.sans,
 });
@@ -209,6 +223,11 @@ export const upperLabelStyle: CSSProperties = {
   letterSpacing: "0.1em",
 };
 
+/**
+ * Raised button surface, computed inline. Uses `--btn-bevel` for the top
+ * sheen so dark theme keeps the white-bevel look while light theme picks up
+ * a dark bevel (host sets `--btn-bevel: 15 23 42` under `.light`).
+ */
 export const raisedButtonStyle = (
   state: "default" | "hover" | "active" | "disabled" = "default",
 ): CSSProperties => {
@@ -216,9 +235,9 @@ export const raisedButtonStyle = (
     return {
       backgroundColor: profileColors.surfaceBtnActive,
       backgroundImage:
-        "linear-gradient(to bottom, rgba(255,255,255,0.05), transparent)",
+        "linear-gradient(to bottom, rgb(var(--btn-bevel) / 0.05), transparent)",
       boxShadow:
-        "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)",
+        "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)",
       color: profileColors.text,
       border: "none",
     };
@@ -228,9 +247,9 @@ export const raisedButtonStyle = (
     return {
       backgroundColor: profileColors.surfaceBtn,
       backgroundImage:
-        "linear-gradient(to bottom, rgba(255,255,255,0.02), transparent)",
+        "linear-gradient(to bottom, rgb(var(--btn-bevel) / 0.02), transparent)",
       boxShadow:
-        "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",
+        "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)",
       color: profileColors.subdued,
       border: "none",
       cursor: "not-allowed",
@@ -241,10 +260,10 @@ export const raisedButtonStyle = (
     return {
       backgroundColor: profileColors.surfaceBtnHover,
       backgroundImage:
-        "linear-gradient(to bottom, rgba(255,255,255,0.04), transparent)",
+        "linear-gradient(to bottom, rgb(var(--btn-bevel) / 0.04), transparent)",
       boxShadow:
-        "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",
-      color: "#d1d5db",
+        "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))",
+      color: "rgb(var(--content-tertiary))",
       border: "none",
     };
   }
@@ -252,9 +271,9 @@ export const raisedButtonStyle = (
   return {
     backgroundColor: profileColors.surfaceBtn,
     backgroundImage:
-      "linear-gradient(to bottom, rgba(255,255,255,0.03), transparent)",
+      "linear-gradient(to bottom, rgb(var(--btn-bevel) / 0.03), transparent)",
     boxShadow:
-      "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",
+      "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))",
     color: profileColors.muted,
     border: "none",
   };
@@ -265,7 +284,9 @@ export const dangerOutlineButtonStyle = (
   hovered = false,
 ): CSSProperties => ({
   background: enabled && hovered ? "rgba(248,113,113,0.1)" : "transparent",
-  border: `1px solid ${enabled ? profileColors.danger : "#374151"}`,
+  border: `1px solid ${
+    enabled ? profileColors.danger : "rgb(var(--line-strong))"
+  }`,
   color: enabled ? profileColors.danger : profileColors.disabled,
   cursor: enabled ? "pointer" : "not-allowed",
 });