/* * Cedar Wallet — Design Tokens * Source: packages/ui/styles/theme.css, apps/web/app/globals.css, apps/native/constants/theme.ts * * Usage: link this file, then set data-theme="a" (dark) or data-theme="b" (light) on . */ @font-face { font-family: "BBH Sans Bartle"; src: url("./fonts/BBHSansBartle-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } /* ─── Shared Scales ──────────────────────────────────────────────── */ :root { /* Spacing */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Border Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-card: 20px; --radius-button: 14px; --radius-pill: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2); --shadow-accent-sm: 0 4px 24px rgba(0, 196, 143, 0.3); --shadow-accent-lg: 0 8px 32px rgba(0, 196, 143, 0.3); --shadow-status-glow: 0 0 8px rgba(0, 196, 143, 0.3); /* Typography Scale */ --type-h1: 48px; --type-h2: 32px; --type-h3: 22px; --type-section: 16px; --type-body: 14px; --type-caption: 12px; --type-label: 11px; --type-balance: 52px; --type-balance-mobile: 36px; /* Font Families */ --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, "Courier New", monospace; --font-serif: "Instrument Serif", ui-serif, Georgia, serif; --font-brand: "BBH Sans Bartle", "DM Sans", sans-serif; /* Z-index */ --z-dropdown: 1000; --z-tooltip: 1100; --z-dialog: 1200; --z-toast: 1300; /* Focus ring */ --ring-color: #00c48f; --ring-width: 2px; --ring-offset: 2px; /* Animation */ --animation-btn: 0.2s; --animation-input: 0.2s; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ─── Theme A — Dark (default) ───────────────────────────────────── */ :root, html[data-theme="a"] { color-scheme: dark; /* Surfaces */ --bg-main: #0a0e17; --bg-elevated: #111827; --bg-card: #151d2e; --btn-hover-bg: #151d2e; /* Borders */ --border: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.14); --border-accent: rgba(0, 196, 143, 0.2); --card-hover: #1a2438; /* Text */ --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; /* Accent / Primary — teal-green */ --accent-primary: #00c48f; --accent-hover: #009e73; --accent-contrast: #0a0e17; --accent-dim: rgba(0, 196, 143, 0.15); --accent-glow: rgba(0, 196, 143, 0.3); --accent-alt: #818cf8; /* indigo accent */ --accent-alt-hover: #6366f1; /* Semantic colors */ --color-success: #00c48f; --color-warning: #f59e0b; --color-caution: #f59e0b; --color-error: #ef4444; --color-info: #3b82f6; --color-success-contrast: #0a0e17; --color-warning-contrast: #0a0e17; --color-error-contrast: #f1f5f9; --color-info-contrast: #f1f5f9; /* Activity/token action colors */ --act-send: rgba(239, 68, 68, 0.1); --act-send-fg: #ef4444; --act-receive: rgba(0, 196, 143, 0.1); --act-receive-fg: #00c48f; --act-contract: rgba(139, 92, 246, 0.12); --act-contract-fg: #8b5cf6; --act-approve: rgba(245, 158, 11, 0.1); --act-approve-fg: #f59e0b; --token-eth: rgba(98, 126, 234, 0.15); --token-eth-fg: #627eea; --token-usdc: rgba(39, 117, 202, 0.15); --token-usdc-fg: #2775ca; --token-arb: rgba(40, 160, 240, 0.15); --token-arb-fg: #28a0f0; /* Gradients */ --wallet-gradient: linear-gradient(135deg, #00c48f 0%, #818cf8 100%); --app-gradient: linear-gradient(135deg, #818cf8 0%, #00c48f 100%); --glow-green: radial-gradient( circle, rgba(0, 196, 143, 0.12) 0%, transparent 70% ); --progress-gradient: linear-gradient(90deg, #00c48f 0%, #009e73 100%); /* Semantic aliases (for @repo/ui compatibility) */ --color-bg: var(--bg-main); --color-bg-primary: var(--bg-main); --color-bg-secondary: var(--bg-elevated); --color-border: var(--border); --color-text: var(--text-primary); --color-text-muted: var(--text-muted); --color-text-secondary: var(--text-secondary); --color-accent: var(--accent-primary); --color-accent-hover: var(--accent-hover); --color-accent-contrast: var(--accent-contrast); --color-accent-alt: var(--accent-alt); /* Card shadow */ --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.35), 0 0 1px rgba(255, 255, 255, 0.06); --shadow-card-elevated: 0 4px 16px rgba(0, 0, 0, 0.4); /* Overlay */ --color-overlay: color-mix(in oklab, #000 50%, transparent); } /* ─── Theme B — Light ─────────────────────────────────────────────── */ html[data-theme="b"] { color-scheme: light; --ring-color: #006951; /* Surfaces */ --bg-main: #f7f9fa; --bg-elevated: #ffffff; --bg-card: #ffffff; --btn-hover-bg: #e9eef5; /* Borders */ --border: rgba(15, 23, 42, 0.08); --border-subtle: rgba(15, 23, 42, 0.06); --border-strong: rgba(15, 23, 42, 0.14); --border-accent: rgba(0, 105, 81, 0.2); --card-hover: #f1f5f9; /* Text */ --text-primary: #1f2937; --text-secondary: #4b5563; --text-muted: #6b7280; /* Accent / Primary — forest green (light) */ --accent-primary: #006951; --accent-hover: #00543f; --accent-contrast: #ffffff; --accent-dim: rgba(0, 105, 81, 0.08); --accent-glow: rgba(0, 105, 81, 0.15); --accent-alt: #818cf8; --accent-alt-hover: #6366f1; /* Semantic colors */ --color-success: #006951; --color-warning: #f59e0b; --color-caution: #f59e0b; --color-error: #ef4444; --color-info: #3b82f6; --color-success-contrast: #ffffff; --color-warning-contrast: #0a0e17; --color-error-contrast: #ffffff; --color-info-contrast: #ffffff; /* Activity/token action colors */ --act-send: rgba(239, 68, 68, 0.1); --act-send-fg: #dc2626; --act-receive: rgba(0, 105, 81, 0.1); --act-receive-fg: #006951; --act-contract: rgba(139, 92, 246, 0.12); --act-contract-fg: #7c3aed; --act-approve: rgba(245, 158, 11, 0.12); --act-approve-fg: #d97706; --token-eth: rgba(98, 126, 234, 0.12); --token-eth-fg: #4f46e5; --token-usdc: rgba(39, 117, 202, 0.12); --token-usdc-fg: #1d4ed8; --token-arb: rgba(40, 160, 240, 0.12); --token-arb-fg: #0284c7; /* Gradients */ --wallet-gradient: linear-gradient(135deg, #006951 0%, #818cf8 100%); --app-gradient: linear-gradient(135deg, #818cf8 0%, #006951 100%); --glow-green: transparent; --progress-gradient: #006951; /* Semantic aliases */ --color-bg: var(--bg-main); --color-bg-primary: var(--bg-main); --color-bg-secondary: var(--bg-elevated); --color-border: var(--border); --color-text: var(--text-primary); --color-text-muted: var(--text-muted); --color-text-secondary: var(--text-secondary); --color-accent: var(--accent-primary); --color-accent-hover: var(--accent-hover); --color-accent-contrast: var(--accent-contrast); --color-accent-alt: var(--accent-alt); /* Card shadow */ --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.06); --shadow-card-elevated: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-accent-sm: 0 4px 24px rgba(0, 105, 81, 0.15); --shadow-accent-lg: 0 8px 32px rgba(0, 105, 81, 0.2); /* Overlay */ --color-overlay: color-mix(in oklab, #000 30%, transparent); } /* ─── Semantic Typography Classes ─────────────────────────────────── */ .cedar-h1 { font-family: var(--font-sans); font-size: var(--type-h1); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-primary); } .cedar-h2 { font-family: var(--font-sans); font-size: var(--type-h2); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-primary); } .cedar-h3 { font-family: var(--font-sans); font-size: var(--type-h3); font-weight: 600; line-height: 1.3; color: var(--text-primary); } .cedar-section { font-family: var(--font-sans); font-size: var(--type-section); font-weight: 600; line-height: 1.35; color: var(--text-primary); } .cedar-body { font-family: var(--font-sans); font-size: var(--type-body); font-weight: 400; line-height: 1.5; color: var(--text-primary); } .cedar-caption { font-family: var(--font-sans); font-size: var(--type-caption); font-weight: 400; line-height: 1.4; color: var(--text-muted); } .cedar-label { font-family: var(--font-sans); font-size: var(--type-label); font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .cedar-balance { font-family: var(--font-mono); font-size: var(--type-balance); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--text-primary); } .cedar-balance-mobile { font-family: var(--font-mono); font-size: var(--type-balance-mobile); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--text-primary); } .cedar-mono { font-family: var(--font-mono); font-size: var(--type-body); color: var(--text-secondary); } /* Wordmark style */ .cedar-wordmark-bold { font-family: var(--font-sans); font-size: 13px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-primary); } .cedar-wordmark-light { font-family: var(--font-sans); font-size: 13px; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-primary); }