diff --git a/apps/mobile/clerk-theme.json b/apps/mobile/clerk-theme.json index 119927a04d60038461d7496df55184a10a9b2824..f854f52a0d4967cab3a0139fe0c056d7fa994ecf 100644 --- a/apps/mobile/clerk-theme.json +++ b/apps/mobile/clerk-theme.json @@ -1,36 +1,36 @@ { "colors": { - "primary": "#262626", - "background": "#F2F2F7", - "input": "#FFFFFF", - "danger": "#DC2626", + "primary": "#1b4ed8", + "background": "#fcfcfc", + "input": "#ffffff", + "danger": "#c10007", "success": "#059669", - "warning": "#D97706", - "foreground": "#262626", - "mutedForeground": "#737373", - "primaryForeground": "#FFFFFF", - "inputForeground": "#262626", - "neutral": "#F5F5F5", - "border": "#E5E5EA", - "ring": "#A3A3A3", - "muted": "#F2F2F7", + "warning": "#bb4d00", + "foreground": "#27272a", + "mutedForeground": "#71717b", + "primaryForeground": "#ffffff", + "inputForeground": "#27272a", + "neutral": "#fafafa", + "border": "#e4e4e7", + "ring": "#1b4ed8", + "muted": "#fafafa", "shadow": "#000000" }, "darkColors": { - "primary": "#F5F5F5", - "background": "#0E0E0E", - "input": "#171717", - "danger": "#FCA5A5", - "success": "#34D399", - "warning": "#FBBF24", - "foreground": "#F5F5F5", - "mutedForeground": "#A3A3A3", - "primaryForeground": "#0A0A0A", - "inputForeground": "#F5F5F5", - "neutral": "#1C1C1C", - "border": "#2A2A2A", - "ring": "#525252", - "muted": "#0E0E0E", + "primary": "#346bf1", + "background": "#0a0a0a", + "input": "#111111", + "danger": "#ff6467", + "success": "#34d399", + "warning": "#ffb900", + "foreground": "#f5f5f5", + "mutedForeground": "#818181", + "primaryForeground": "#ffffff", + "inputForeground": "#f5f5f5", + "neutral": "#111111", + "border": "#191919", + "ring": "#346bf1", + "muted": "#111111", "shadow": "#000000" }, "design": { diff --git a/apps/mobile/generated-uniwind-default-theme-variables.json b/apps/mobile/generated-uniwind-default-theme-variables.json index 02430b86aae36e47b38593e29cfe98fe9bb8a137..961a0df24cd46f6932622ecb60f86fb72a8caf29 100644 --- a/apps/mobile/generated-uniwind-default-theme-variables.json +++ b/apps/mobile/generated-uniwind-default-theme-variables.json @@ -1,156 +1,180 @@ { "light": { - "--color-screen": "#f2f2f7", - "--color-sheet": "rgba(242, 242, 247, 0.98)", - "--color-sheet-solid": "#f2f2f7", + "--color-screen": "#fcfcfc", + "--color-sheet": "rgba(252, 252, 252, 0.98)", + "--color-sheet-solid": "#fcfcfc", "--color-card": "#ffffff", - "--color-card-alt": "#f5f5f5", + "--color-grouped-card": "#f4f4f5", + "--color-card-alt": "#fcfcfc", "--color-card-translucent": "rgba(255, 255, 255, 0.8)", - "--color-thread-canvas": "#f5f5f5", + "--color-thread-canvas": "#fcfcfc", "--color-thread-selected": "#ffffff", - "--color-thread-selected-foreground": "#262626", - "--color-thread-selected-foreground-muted": "#737373", - "--color-composer-panel": "rgba(245, 245, 245, 0.88)", - "--color-composer-surface": "rgba(255, 255, 255, 0.94)", - "--color-composer-border": "rgba(0, 0, 0, 0.1)", - "--color-foreground": "#262626", - "--color-foreground-secondary": "#525252", - "--color-foreground-muted": "#737373", - "--color-foreground-tertiary": "#8e8e93", - "--color-border": "rgba(0, 0, 0, 0.08)", - "--color-border-subtle": "rgba(0, 0, 0, 0.06)", - "--color-separator": "rgba(0, 0, 0, 0.04)", - "--color-subtle": "rgba(0, 0, 0, 0.04)", - "--color-subtle-strong": "rgba(0, 0, 0, 0.08)", - "--color-inline-skill-background": "rgba(217, 70, 239, 0.12)", - "--color-inline-skill-border": "rgba(217, 70, 239, 0.25)", - "--color-inline-skill-foreground": "#a21caf", - "--color-primary": "#262626", + "--color-thread-selected-foreground": "#27272a", + "--color-thread-selected-foreground-muted": "#71717b", + "--color-thread-hover": "#fcfcfc", + "--color-row-hover": "#f4f4f5", + "--color-composer-panel": "rgba(252, 252, 252, 0.88)", + "--color-composer-surface": "rgba(244, 244, 245, 0.94)", + "--color-composer-border": "rgba(228, 228, 231, 0.8)", + "--color-foreground": "#27272a", + "--color-foreground-secondary": "#6f6f79", + "--color-foreground-muted": "#6f6f79", + "--color-foreground-tertiary": "#71717b", + "--color-border": "#e4e4e7", + "--color-focus": "#1b4ed8", + "--color-border-subtle": "rgba(228, 228, 231, 0.7)", + "--color-separator": "rgba(228, 228, 231, 0.55)", + "--color-subtle": "#fafafa", + "--color-subtle-strong": "#fafafa", + "--color-inline-skill-background": "#f4f4f5", + "--color-inline-skill-border": "rgba(27, 78, 216, 0.42)", + "--color-inline-skill-foreground": "#18181b", + "--color-primary": "#1b4ed8", "--color-primary-foreground": "#ffffff", + "--color-primary-text": "#1b4ed8", "--color-primary-shadow": "#000000", - "--color-secondary": "#ffffff", - "--color-secondary-foreground": "#262626", - "--color-secondary-border": "rgba(0, 0, 0, 0.08)", - "--color-switch-active-track": "#34c759", + "--color-secondary": "#fafafa", + "--color-secondary-foreground": "#27272a", + "--color-secondary-border": "#e4e4e7", + "--color-switch-active-track": "#1b4ed8", "--color-switch-active-thumb": "#ffffff", - "--color-switch-inactive-track": "rgba(0, 0, 0, 0.08)", - "--color-switch-inactive-thumb": "#8e8e93", - "--color-warning": "#fffbeb", - "--color-warning-border": "#fde68a", - "--color-warning-foreground": "#b45309", - "--color-danger": "#fef2f2", - "--color-danger-border": "rgba(239, 68, 68, 0.12)", - "--color-danger-foreground": "#dc2626", + "--color-switch-inactive-track": "#fafafa", + "--color-switch-inactive-thumb": "#71717b", + "--color-warning": "#fcf4e8", + "--color-warning-border": "rgba(254, 154, 0, 0.32)", + "--color-warning-foreground": "#bb4d00", + "--color-danger": "#fcebec", + "--color-danger-border": "rgba(251, 44, 54, 0.32)", + "--color-danger-foreground": "#c10007", + "--color-update": "#e0e6f7", + "--color-update-foreground": "#1b4ed8", "--color-input": "#ffffff", - "--color-input-border": "rgba(0, 0, 0, 0.1)", - "--color-sidebar-search": "rgba(118, 118, 128, 0.12)", - "--color-placeholder": "#737373", - "--color-icon": "#262626", - "--color-icon-muted": "#525252", - "--color-icon-subtle": "#a3a3a3", - "--color-header": "rgba(255, 255, 255, 0.97)", - "--color-header-border": "rgba(0, 0, 0, 0.06)", - "--color-glass-surface": "rgba(255, 255, 255, 0.72)", - "--color-glass-tint": "rgba(255, 255, 255, 0.18)", - "--color-status-bar": "#f2f2f7", - "--color-md-body": "#111111", - "--color-md-strong": "#000000", - "--color-md-link": "#2563eb", - "--color-md-blockquote-border": "rgba(0, 0, 0, 0.08)", - "--color-md-blockquote-bg": "rgba(0, 0, 0, 0.02)", - "--color-md-code-bg": "rgba(0, 0, 0, 0.04)", - "--color-md-code-text": "#262626", - "--color-md-user-code-bg": "rgba(0, 0, 0, 0.04)", - "--color-md-user-code-text": "#262626", - "--color-md-user-fence-bg": "rgba(0, 0, 0, 0.06)", - "--color-md-user-fence-text": "#262626", - "--color-md-hr": "rgba(0, 0, 0, 0.08)", - "--color-user-bubble": "#ffffff", - "--color-user-bubble-foreground": "#262626", - "--color-user-bubble-foreground-muted": "rgba(38, 38, 38, 0.78)", - "--color-user-bubble-skill-foreground": "#2563eb", + "--color-input-border": "#d4d4d8", + "--color-sidebar-search": "#f4f4f5", + "--color-placeholder": "#6f6f79", + "--color-icon": "#27272a", + "--color-icon-muted": "#71717b", + "--color-icon-subtle": "#71717b", + "--color-header": "rgba(252, 252, 252, 0.97)", + "--color-header-foreground": "#27272a", + "--color-header-border": "#e4e4e7", + "--color-glass-surface": "rgba(255, 255, 255, 0.74)", + "--color-glass-fallback": "rgba(244, 244, 245, 0.94)", + "--color-glass-tint": "rgba(255, 255, 255, 0.22)", + "--color-status-bar": "#fcfcfc", + "--color-md-body": "#27272a", + "--color-md-strong": "#27272a", + "--color-md-link": "#1b4ed8", + "--color-md-blockquote-border": "#e4e4e7", + "--color-md-blockquote-bg": "#fafafa", + "--color-md-code-bg": "#ffffff", + "--color-md-code-text": "#27272a", + "--color-md-user-code-bg": "rgba(39, 39, 42, 0.18)", + "--color-md-user-code-text": "#27272a", + "--color-md-user-fence-bg": "rgba(0, 0, 0, 0.16)", + "--color-md-user-fence-text": "#27272a", + "--color-md-hr": "#e4e4e7", + "--color-user-bubble": "#efeff1", + "--color-user-bubble-foreground": "#27272a", + "--color-user-bubble-foreground-muted": "rgba(39, 39, 42, 0.78)", + "--color-user-bubble-skill-foreground": "#1b4ed8", "--color-backdrop": "rgba(0, 0, 0, 0.22)", - "--color-drawer": "rgba(255, 255, 255, 0.99)", + "--color-drawer": "#fafafa", + "--color-drawer-foreground": "#27272a", + "--color-drawer-foreground-muted": "#71717b", + "--color-drawer-border": "#e4e4e7", "--color-drawer-shadow": "rgba(0, 0, 0, 0.12)", - "--color-dot-separator": "rgba(0, 0, 0, 0.2)", - "--color-wordmark": "#262626", - "--color-chevron": "rgba(0, 0, 0, 0.2)" + "--color-dot-separator": "rgba(113, 113, 123, 0.35)", + "--color-wordmark": "#27272a", + "--color-chevron": "rgba(113, 113, 123, 0.42)" }, "dark": { "--color-screen": "#0a0a0a", - "--color-sheet": "rgba(14, 14, 14, 0.98)", - "--color-sheet-solid": "#0e0e0e", - "--color-card": "#171717", - "--color-card-alt": "#1c1c1c", + "--color-sheet": "rgba(10, 10, 10, 0.98)", + "--color-sheet-solid": "#0a0a0a", + "--color-card": "#111111", + "--color-grouped-card": "#1a1b1b", + "--color-card-alt": "#111111", "--color-card-translucent": "rgba(17, 17, 17, 0.8)", - "--color-thread-canvas": "#1c1c1c", - "--color-thread-selected": "#171717", - "--color-thread-selected-foreground": "#f5f5f5", - "--color-thread-selected-foreground-muted": "#8e8e93", - "--color-composer-panel": "rgba(28, 28, 28, 0.92)", - "--color-composer-surface": "rgba(23, 23, 23, 0.9)", - "--color-composer-border": "rgba(255, 255, 255, 0.08)", + "--color-thread-canvas": "#0a0a0a", + "--color-thread-selected": "#1a1b1b", + "--color-thread-selected-foreground": "#f1f3f7", + "--color-thread-selected-foreground-muted": "#a3a3a3", + "--color-thread-hover": "#131313", + "--color-row-hover": "#141414", + "--color-composer-panel": "rgba(10, 10, 10, 0.92)", + "--color-composer-surface": "rgba(26, 27, 27, 0.9)", + "--color-composer-border": "rgba(25, 25, 25, 0.8)", "--color-foreground": "#f5f5f5", - "--color-foreground-secondary": "#a3a3a3", - "--color-foreground-muted": "#8e8e93", - "--color-foreground-tertiary": "#636366", - "--color-border": "rgba(255, 255, 255, 0.06)", - "--color-border-subtle": "rgba(255, 255, 255, 0.04)", - "--color-separator": "rgba(255, 255, 255, 0.03)", - "--color-subtle": "rgba(255, 255, 255, 0.04)", - "--color-subtle-strong": "rgba(255, 255, 255, 0.08)", - "--color-inline-skill-background": "rgba(217, 70, 239, 0.12)", - "--color-inline-skill-border": "rgba(217, 70, 239, 0.25)", - "--color-inline-skill-foreground": "#f0abfc", - "--color-primary": "#f5f5f5", - "--color-primary-foreground": "#0a0a0a", + "--color-foreground-secondary": "#838383", + "--color-foreground-muted": "#838383", + "--color-foreground-tertiary": "#818181", + "--color-border": "#191919", + "--color-focus": "#346bf1", + "--color-border-subtle": "rgba(25, 25, 25, 0.7)", + "--color-separator": "rgba(25, 25, 25, 0.55)", + "--color-subtle": "#111111", + "--color-subtle-strong": "#111111", + "--color-inline-skill-background": "#141414", + "--color-inline-skill-border": "rgba(52, 107, 241, 0.42)", + "--color-inline-skill-foreground": "#f5f5f5", + "--color-primary": "#346bf1", + "--color-primary-foreground": "#ffffff", + "--color-primary-text": "#4b7cf3", "--color-primary-shadow": "#000000", - "--color-secondary": "rgba(255, 255, 255, 0.04)", + "--color-secondary": "#111111", "--color-secondary-foreground": "#f5f5f5", - "--color-secondary-border": "rgba(255, 255, 255, 0.06)", - "--color-switch-active-track": "#30d158", + "--color-secondary-border": "#191919", + "--color-switch-active-track": "#346bf1", "--color-switch-active-thumb": "#ffffff", - "--color-switch-inactive-track": "rgba(255, 255, 255, 0.06)", - "--color-switch-inactive-thumb": "#8e8e93", - "--color-warning": "rgba(69, 26, 3, 0.4)", - "--color-warning-border": "rgba(120, 53, 15, 0.6)", - "--color-warning-foreground": "#fcd34d", - "--color-danger": "rgba(239, 68, 68, 0.14)", - "--color-danger-border": "rgba(248, 113, 113, 0.18)", - "--color-danger-foreground": "#fca5a5", - "--color-input": "#141414", - "--color-input-border": "rgba(255, 255, 255, 0.08)", - "--color-sidebar-search": "rgba(118, 118, 128, 0.24)", - "--color-placeholder": "#8e8e93", + "--color-switch-inactive-track": "#111111", + "--color-switch-inactive-thumb": "#818181", + "--color-warning": "#312108", + "--color-warning-border": "rgba(254, 154, 0, 0.32)", + "--color-warning-foreground": "#ffb900", + "--color-danger": "#301214", + "--color-danger-border": "rgba(251, 65, 74, 0.32)", + "--color-danger-foreground": "#ff6467", + "--color-update": "#121b34", + "--color-update-foreground": "#51a2ff", + "--color-input": "#111111", + "--color-input-border": "#1e1e1e", + "--color-sidebar-search": "#0a0a0a", + "--color-placeholder": "#838383", "--color-icon": "#f5f5f5", - "--color-icon-muted": "#a3a3a3", - "--color-icon-subtle": "#8e8e93", + "--color-icon-muted": "#818181", + "--color-icon-subtle": "#818181", "--color-header": "rgba(10, 10, 10, 0.97)", - "--color-header-border": "rgba(255, 255, 255, 0.06)", - "--color-glass-surface": "rgba(23, 23, 23, 0.78)", - "--color-glass-tint": "rgba(23, 23, 23, 0.24)", + "--color-header-foreground": "#f5f5f5", + "--color-header-border": "#191919", + "--color-glass-surface": "rgba(17, 17, 17, 0.74)", + "--color-glass-fallback": "rgba(26, 27, 27, 0.9)", + "--color-glass-tint": "rgba(17, 17, 17, 0.22)", "--color-status-bar": "#0a0a0a", - "--color-md-body": "#e5e5e5", + "--color-md-body": "#f5f5f5", "--color-md-strong": "#f5f5f5", - "--color-md-link": "#60a5fa", - "--color-md-blockquote-border": "rgba(255, 255, 255, 0.1)", - "--color-md-blockquote-bg": "rgba(255, 255, 255, 0.03)", - "--color-md-code-bg": "rgba(255, 255, 255, 0.06)", - "--color-md-code-text": "#e5e5e5", - "--color-md-user-code-bg": "rgba(255, 255, 255, 0.06)", - "--color-md-user-code-text": "#e5e5e5", - "--color-md-user-fence-bg": "rgba(255, 255, 255, 0.09)", - "--color-md-user-fence-text": "#e5e5e5", - "--color-md-hr": "rgba(255, 255, 255, 0.08)", - "--color-user-bubble": "#171717", + "--color-md-link": "#3b70f1", + "--color-md-blockquote-border": "#191919", + "--color-md-blockquote-bg": "#111111", + "--color-md-code-bg": "#111111", + "--color-md-code-text": "#f5f5f5", + "--color-md-user-code-bg": "rgba(245, 245, 245, 0.18)", + "--color-md-user-code-text": "#f5f5f5", + "--color-md-user-fence-bg": "rgba(0, 0, 0, 0.28)", + "--color-md-user-fence-text": "#f5f5f5", + "--color-md-hr": "#191919", + "--color-user-bubble": "#161616", "--color-user-bubble-foreground": "#f5f5f5", "--color-user-bubble-foreground-muted": "rgba(245, 245, 245, 0.78)", - "--color-user-bubble-skill-foreground": "#60a5fa", + "--color-user-bubble-skill-foreground": "#4678f2", "--color-backdrop": "rgba(0, 0, 0, 0.48)", - "--color-drawer": "rgba(14, 14, 14, 0.99)", + "--color-drawer": "#000000", + "--color-drawer-foreground": "#f1f3f7", + "--color-drawer-foreground-muted": "#a3a3a3", + "--color-drawer-border": "#141414", "--color-drawer-shadow": "rgba(0, 0, 0, 0.32)", - "--color-dot-separator": "rgba(255, 255, 255, 0.2)", + "--color-dot-separator": "rgba(129, 129, 129, 0.35)", "--color-wordmark": "#f5f5f5", - "--color-chevron": "rgba(255, 255, 255, 0.2)" + "--color-chevron": "rgba(129, 129, 129, 0.42)" } } diff --git a/apps/mobile/generated-uniwind-themes.css b/apps/mobile/generated-uniwind-themes.css index 84c445cf1cb158d62732261dda640a68cc846183..2a1ce3629306733f61c2f4a58060f5a918d2cb0b 100644 --- a/apps/mobile/generated-uniwind-themes.css +++ b/apps/mobile/generated-uniwind-themes.css @@ -2,6 +2,93 @@ @layer theme { :root { @variant light { + --color-screen: #fcfcfc; + --color-sheet: rgba(252, 252, 252, 0.98); + --color-sheet-solid: #fcfcfc; + --color-card: #ffffff; + --color-grouped-card: #f4f4f5; + --color-card-alt: #fcfcfc; + --color-card-translucent: rgba(255, 255, 255, 0.8); + --color-thread-canvas: #fcfcfc; + --color-thread-selected: #ffffff; + --color-thread-selected-foreground: #27272a; + --color-thread-selected-foreground-muted: #71717b; + --color-thread-hover: #fcfcfc; + --color-row-hover: #f4f4f5; + --color-composer-panel: rgba(252, 252, 252, 0.88); + --color-composer-surface: rgba(244, 244, 245, 0.94); + --color-composer-border: rgba(228, 228, 231, 0.8); + --color-foreground: #27272a; + --color-foreground-secondary: #6f6f79; + --color-foreground-muted: #6f6f79; + --color-foreground-tertiary: #71717b; + --color-border: #e4e4e7; + --color-focus: #1b4ed8; + --color-border-subtle: rgba(228, 228, 231, 0.7); + --color-separator: rgba(228, 228, 231, 0.55); + --color-subtle: #fafafa; + --color-subtle-strong: #fafafa; + --color-inline-skill-background: #f4f4f5; + --color-inline-skill-border: rgba(27, 78, 216, 0.42); + --color-inline-skill-foreground: #18181b; + --color-primary: #1b4ed8; + --color-primary-foreground: #ffffff; + --color-primary-text: #1b4ed8; + --color-primary-shadow: #000000; + --color-secondary: #fafafa; + --color-secondary-foreground: #27272a; + --color-secondary-border: #e4e4e7; + --color-switch-active-track: #1b4ed8; + --color-switch-active-thumb: #ffffff; + --color-switch-inactive-track: #fafafa; + --color-switch-inactive-thumb: #71717b; + --color-warning: #fcf4e8; + --color-warning-border: rgba(254, 154, 0, 0.32); + --color-warning-foreground: #bb4d00; + --color-danger: #fcebec; + --color-danger-border: rgba(251, 44, 54, 0.32); + --color-danger-foreground: #c10007; + --color-update: #e0e6f7; + --color-update-foreground: #1b4ed8; + --color-input: #ffffff; + --color-input-border: #d4d4d8; + --color-sidebar-search: #f4f4f5; + --color-placeholder: #6f6f79; + --color-icon: #27272a; + --color-icon-muted: #71717b; + --color-icon-subtle: #71717b; + --color-header: rgba(252, 252, 252, 0.97); + --color-header-foreground: #27272a; + --color-header-border: #e4e4e7; + --color-glass-surface: rgba(255, 255, 255, 0.74); + --color-glass-fallback: rgba(244, 244, 245, 0.94); + --color-glass-tint: rgba(255, 255, 255, 0.22); + --color-status-bar: #fcfcfc; + --color-md-body: #27272a; + --color-md-strong: #27272a; + --color-md-link: #1b4ed8; + --color-md-blockquote-border: #e4e4e7; + --color-md-blockquote-bg: #fafafa; + --color-md-code-bg: #ffffff; + --color-md-code-text: #27272a; + --color-md-user-code-bg: rgba(39, 39, 42, 0.18); + --color-md-user-code-text: #27272a; + --color-md-user-fence-bg: rgba(0, 0, 0, 0.16); + --color-md-user-fence-text: #27272a; + --color-md-hr: #e4e4e7; + --color-user-bubble: #efeff1; + --color-user-bubble-foreground: #27272a; + --color-user-bubble-foreground-muted: rgba(39, 39, 42, 0.78); + --color-user-bubble-skill-foreground: #1b4ed8; + --color-backdrop: rgba(0, 0, 0, 0.22); + --color-drawer: #fafafa; + --color-drawer-foreground: #27272a; + --color-drawer-foreground-muted: #71717b; + --color-drawer-border: #e4e4e7; + --color-drawer-shadow: rgba(0, 0, 0, 0.12); + --color-dot-separator: rgba(113, 113, 123, 0.35); + --color-wordmark: #27272a; + --color-chevron: rgba(113, 113, 123, 0.42); --color-adaptive-amber-50-950-a40: oklch(98.7% 0.022 95.277); --color-adaptive-amber-200-900-a60: oklch(92.4% 0.12 95.746); --color-adaptive-amber-500-a12-a16: oklch(76.9% 0.188 70.08 / 12%); @@ -59,14 +146,101 @@ --color-adaptive-zinc-500-a12-a16: oklch(55.2% 0.016 285.938 / 12%); --color-adaptive-zinc-500-400: oklch(55.2% 0.016 285.938); --color-adaptive-zinc-600-300: oklch(44.2% 0.017 285.786); - --color-clerk-page: #f2f2f7; - --color-clerk-foreground: #262626; - --color-clerk-foreground-muted: #737373; - --color-clerk-border: rgba(229, 229, 234, 0.06); - --color-clerk-danger: #dc2626; + --color-clerk-page: #fcfcfc; + --color-clerk-foreground: #27272a; + --color-clerk-foreground-muted: #71717b; + --color-clerk-border: #e4e4e7; + --color-clerk-danger: #c10007; } @variant dark { + --color-screen: #0a0a0a; + --color-sheet: rgba(10, 10, 10, 0.98); + --color-sheet-solid: #0a0a0a; + --color-card: #111111; + --color-grouped-card: #1a1b1b; + --color-card-alt: #111111; + --color-card-translucent: rgba(17, 17, 17, 0.8); + --color-thread-canvas: #0a0a0a; + --color-thread-selected: #1a1b1b; + --color-thread-selected-foreground: #f1f3f7; + --color-thread-selected-foreground-muted: #a3a3a3; + --color-thread-hover: #131313; + --color-row-hover: #141414; + --color-composer-panel: rgba(10, 10, 10, 0.92); + --color-composer-surface: rgba(26, 27, 27, 0.9); + --color-composer-border: rgba(25, 25, 25, 0.8); + --color-foreground: #f5f5f5; + --color-foreground-secondary: #838383; + --color-foreground-muted: #838383; + --color-foreground-tertiary: #818181; + --color-border: #191919; + --color-focus: #346bf1; + --color-border-subtle: rgba(25, 25, 25, 0.7); + --color-separator: rgba(25, 25, 25, 0.55); + --color-subtle: #111111; + --color-subtle-strong: #111111; + --color-inline-skill-background: #141414; + --color-inline-skill-border: rgba(52, 107, 241, 0.42); + --color-inline-skill-foreground: #f5f5f5; + --color-primary: #346bf1; + --color-primary-foreground: #ffffff; + --color-primary-text: #4b7cf3; + --color-primary-shadow: #000000; + --color-secondary: #111111; + --color-secondary-foreground: #f5f5f5; + --color-secondary-border: #191919; + --color-switch-active-track: #346bf1; + --color-switch-active-thumb: #ffffff; + --color-switch-inactive-track: #111111; + --color-switch-inactive-thumb: #818181; + --color-warning: #312108; + --color-warning-border: rgba(254, 154, 0, 0.32); + --color-warning-foreground: #ffb900; + --color-danger: #301214; + --color-danger-border: rgba(251, 65, 74, 0.32); + --color-danger-foreground: #ff6467; + --color-update: #121b34; + --color-update-foreground: #51a2ff; + --color-input: #111111; + --color-input-border: #1e1e1e; + --color-sidebar-search: #0a0a0a; + --color-placeholder: #838383; + --color-icon: #f5f5f5; + --color-icon-muted: #818181; + --color-icon-subtle: #818181; + --color-header: rgba(10, 10, 10, 0.97); + --color-header-foreground: #f5f5f5; + --color-header-border: #191919; + --color-glass-surface: rgba(17, 17, 17, 0.74); + --color-glass-fallback: rgba(26, 27, 27, 0.9); + --color-glass-tint: rgba(17, 17, 17, 0.22); + --color-status-bar: #0a0a0a; + --color-md-body: #f5f5f5; + --color-md-strong: #f5f5f5; + --color-md-link: #3b70f1; + --color-md-blockquote-border: #191919; + --color-md-blockquote-bg: #111111; + --color-md-code-bg: #111111; + --color-md-code-text: #f5f5f5; + --color-md-user-code-bg: rgba(245, 245, 245, 0.18); + --color-md-user-code-text: #f5f5f5; + --color-md-user-fence-bg: rgba(0, 0, 0, 0.28); + --color-md-user-fence-text: #f5f5f5; + --color-md-hr: #191919; + --color-user-bubble: #161616; + --color-user-bubble-foreground: #f5f5f5; + --color-user-bubble-foreground-muted: rgba(245, 245, 245, 0.78); + --color-user-bubble-skill-foreground: #4678f2; + --color-backdrop: rgba(0, 0, 0, 0.48); + --color-drawer: #000000; + --color-drawer-foreground: #f1f3f7; + --color-drawer-foreground-muted: #a3a3a3; + --color-drawer-border: #141414; + --color-drawer-shadow: rgba(0, 0, 0, 0.32); + --color-dot-separator: rgba(129, 129, 129, 0.35); + --color-wordmark: #f5f5f5; + --color-chevron: rgba(129, 129, 129, 0.42); --color-adaptive-amber-50-950-a40: oklch(27.9% 0.077 45.635 / 40%); --color-adaptive-amber-200-900-a60: oklch(41.4% 0.112 45.904 / 60%); --color-adaptive-amber-500-a12-a16: oklch(76.9% 0.188 70.08 / 16%); @@ -124,32 +298,36 @@ --color-adaptive-zinc-500-a12-a16: oklch(55.2% 0.016 285.938 / 16%); --color-adaptive-zinc-500-400: oklch(70.5% 0.015 286.067); --color-adaptive-zinc-600-300: oklch(87.1% 0.006 286.286); - --color-clerk-page: #0e0e0e; + --color-clerk-page: #0a0a0a; --color-clerk-foreground: #f5f5f5; - --color-clerk-foreground-muted: #a3a3a3; - --color-clerk-border: rgba(42, 42, 42, 0.06); - --color-clerk-danger: #fca5a5; + --color-clerk-foreground-muted: #818181; + --color-clerk-border: #191919; + --color-clerk-danger: #ff6467; } @variant t3-chat-light { --color-screen: #fdf7fd; --color-sheet: rgba(253, 247, 253, 0.98); --color-sheet-solid: #fdf7fd; - --color-card: #fdfafd; - --color-card-alt: #faf3fb; - --color-card-translucent: rgba(253, 250, 253, 0.8); - --color-thread-canvas: #faf3fb; - --color-thread-selected: #fdfafd; - --color-thread-selected-foreground: #501854; + --color-card: #faf3fb; + --color-grouped-card: #faf3fb; + --color-card-alt: #fdfafd; + --color-card-translucent: rgba(250, 243, 251, 0.8); + --color-thread-canvas: #fdf7fd; + --color-thread-selected: #f8f8f7; + --color-thread-selected-foreground: #454554; --color-thread-selected-foreground-muted: #ac1668; - --color-composer-panel: rgba(250, 243, 251, 0.88); - --color-composer-surface: rgba(253, 250, 253, 0.94); + --color-thread-hover: #f8f8f7; + --color-row-hover: #eccfe3; + --color-composer-panel: rgba(253, 247, 253, 0.88); + --color-composer-surface: rgba(250, 243, 251, 0.94); --color-composer-border: rgba(238, 225, 237, 0.54); --color-foreground: #501854; --color-foreground-secondary: #ac1668; --color-foreground-muted: #8d1255; --color-foreground-tertiary: #ac1668; --color-border: #eee1ed; + --color-focus: #db2777; --color-border-subtle: rgba(238, 225, 237, 0.7); --color-separator: rgba(238, 225, 237, 0.55); --color-subtle: #eaa7cb; @@ -159,6 +337,7 @@ --color-inline-skill-foreground: #454554; --color-primary: #db2777; --color-primary-foreground: #ffffff; + --color-primary-text: #d32572; --color-primary-shadow: #000000; --color-secondary: #f1c4e6; --color-secondary-foreground: #77347c; @@ -173,7 +352,9 @@ --color-danger: #fde4f1; --color-danger-border: rgba(247, 8, 108, 0.32); --color-danger-foreground: #9d174d; - --color-input: #fdfafd; + --color-update: #fadfef; + --color-update-foreground: #ac1668; + --color-input: #faf3fb; --color-input-border: #e7c1dc; --color-sidebar-search: #f8f8f7; --color-placeholder: #8b5f90; @@ -181,13 +362,15 @@ --color-icon-muted: #ac1668; --color-icon-subtle: #ac1668; --color-header: rgba(253, 247, 253, 0.97); + --color-header-foreground: #501854; --color-header-border: #efbdeb; --color-glass-surface: rgba(255, 255, 255, 0.74); + --color-glass-fallback: rgba(250, 243, 251, 0.94); --color-glass-tint: rgba(255, 255, 255, 0.22); --color-status-bar: #fdf7fd; --color-md-body: #501854; --color-md-strong: #501854; - --color-md-link: #db2777; + --color-md-link: #d62675; --color-md-blockquote-border: #eee1ed; --color-md-blockquote-bg: #eaa7cb; --color-md-code-bg: #f5ecf9; @@ -202,7 +385,10 @@ --color-user-bubble-foreground-muted: rgba(73, 44, 97, 0.78); --color-user-bubble-skill-foreground: #c12269; --color-backdrop: rgba(0, 0, 0, 0.22); - --color-drawer: rgba(242, 225, 244, 0.99); + --color-drawer: #f2e1f4; + --color-drawer-foreground: #454554; + --color-drawer-foreground-muted: #ac1668; + --color-drawer-border: #eceae9; --color-drawer-shadow: rgba(0, 0, 0, 0.12); --color-dot-separator: rgba(172, 22, 104, 0.35); --color-wordmark: #501854; @@ -264,32 +450,36 @@ --color-adaptive-zinc-500-a12-a16: oklch(55.2% 0.016 285.938 / 12%); --color-adaptive-zinc-500-400: oklch(55.2% 0.016 285.938); --color-adaptive-zinc-600-300: oklch(44.2% 0.017 285.786); - --color-clerk-page: #f2f2f7; - --color-clerk-foreground: #262626; - --color-clerk-foreground-muted: #737373; - --color-clerk-border: rgba(229, 229, 234, 0.06); - --color-clerk-danger: #dc2626; + --color-clerk-page: #fcfcfc; + --color-clerk-foreground: #27272a; + --color-clerk-foreground-muted: #71717b; + --color-clerk-border: #e4e4e7; + --color-clerk-danger: #c10007; } @variant t3-chat-dark { --color-screen: #1f1a24; --color-sheet: rgba(31, 26, 36, 0.98); --color-sheet-solid: #1f1a24; - --color-card: #2c2631; - --color-card-alt: #29232d; - --color-card-translucent: rgba(44, 38, 49, 0.8); - --color-thread-canvas: #29232d; - --color-thread-selected: #2c2631; - --color-thread-selected-foreground: #f9f8fb; + --color-card: #29232d; + --color-grouped-card: #29232d; + --color-card-alt: #2c2631; + --color-card-translucent: rgba(41, 35, 45, 0.8); + --color-thread-canvas: #1f1a24; + --color-thread-selected: #261922; + --color-thread-selected-foreground: #f4f4f5; --color-thread-selected-foreground-muted: #e7d0dd; - --color-composer-panel: rgba(41, 35, 45, 0.92); - --color-composer-surface: rgba(44, 38, 49, 0.9); + --color-thread-hover: #261922; + --color-row-hover: #463753; + --color-composer-panel: rgba(31, 26, 36, 0.92); + --color-composer-surface: rgba(41, 35, 45, 0.9); --color-composer-border: rgba(39, 36, 44, 0.46); --color-foreground: #f9f8fb; --color-foreground-secondary: #e7d0dd; --color-foreground-muted: #e7d0dd; --color-foreground-tertiary: #e7d0dd; --color-border: #27242c; + --color-focus: #db2777; --color-border-subtle: rgba(39, 36, 44, 0.7); --color-separator: rgba(39, 36, 44, 0.55); --color-subtle: #423a45; @@ -299,6 +489,7 @@ --color-inline-skill-foreground: #f8f1f5; --color-primary: #a3004c; --color-primary-foreground: #fbd0e8; + --color-primary-text: #cc729c; --color-primary-shadow: #000000; --color-secondary: #362d3d; --color-secondary-foreground: #d4c7e1; @@ -313,7 +504,9 @@ --color-danger: #331a2b; --color-danger-border: rgba(157, 23, 77, 0.32); --color-danger-foreground: #fbd0e8; - --color-input: #2c2631; + --color-update: #37152b; + --color-update-foreground: #fbd0e8; + --color-input: #29232d; --color-input-border: #302029; --color-sidebar-search: #261922; --color-placeholder: #968d9f; @@ -321,13 +514,15 @@ --color-icon-muted: #d4c7e1; --color-icon-subtle: #e7d0dd; --color-header: rgba(31, 26, 36, 0.97); + --color-header-foreground: #f9f8fb; --color-header-border: #27242c; --color-glass-surface: rgba(16, 10, 14, 0.74); + --color-glass-fallback: rgba(41, 35, 45, 0.9); --color-glass-tint: rgba(16, 10, 14, 0.22); --color-status-bar: #1f1a24; --color-md-body: #f9f8fb; --color-md-strong: #f9f8fb; - --color-md-link: #a3004c; + --color-md-link: #c66290; --color-md-blockquote-border: #27242c; --color-md-blockquote-bg: #423a45; --color-md-code-bg: #1f1a24; @@ -342,7 +537,10 @@ --color-user-bubble-foreground-muted: rgba(242, 235, 250, 0.78); --color-user-bubble-skill-foreground: #cb709a; --color-backdrop: rgba(0, 0, 0, 0.48); - --color-drawer: rgba(23, 16, 24, 0.99); + --color-drawer: #171018; + --color-drawer-foreground: #f4f4f5; + --color-drawer-foreground-muted: #e7d0dd; + --color-drawer-border: #322028; --color-drawer-shadow: rgba(0, 0, 0, 0.32); --color-dot-separator: rgba(231, 208, 221, 0.35); --color-wordmark: #f9f8fb; @@ -404,32 +602,36 @@ --color-adaptive-zinc-500-a12-a16: oklch(55.2% 0.016 285.938 / 16%); --color-adaptive-zinc-500-400: oklch(70.5% 0.015 286.067); --color-adaptive-zinc-600-300: oklch(87.1% 0.006 286.286); - --color-clerk-page: #0e0e0e; + --color-clerk-page: #0a0a0a; --color-clerk-foreground: #f5f5f5; - --color-clerk-foreground-muted: #a3a3a3; - --color-clerk-border: rgba(42, 42, 42, 0.06); - --color-clerk-danger: #fca5a5; + --color-clerk-foreground-muted: #818181; + --color-clerk-border: #191919; + --color-clerk-danger: #ff6467; } @variant grove-light { --color-screen: #f3f7f4; --color-sheet: rgba(243, 247, 244, 0.98); --color-sheet-solid: #f3f7f4; - --color-card: #ecefed; - --color-card-alt: #f3f7f4; - --color-card-translucent: rgba(236, 239, 237, 0.8); + --color-card: #f3f7f4; + --color-grouped-card: #f3f7f4; + --color-card-alt: #ecefed; + --color-card-translucent: rgba(243, 247, 244, 0.8); --color-thread-canvas: #f3f7f4; - --color-thread-selected: #ecefed; + --color-thread-selected: #bad7c9; --color-thread-selected-foreground: #241523; - --color-thread-selected-foreground-muted: #746c73; + --color-thread-selected-foreground-muted: #5d585e; + --color-thread-hover: #cae0d5; + --color-row-hover: #d5e6dd; --color-composer-panel: rgba(243, 247, 244, 0.88); - --color-composer-surface: rgba(236, 239, 237, 0.94); + --color-composer-surface: rgba(243, 247, 244, 0.94); --color-composer-border: rgba(203, 213, 209, 0.54); --color-foreground: #241523; - --color-foreground-secondary: #746c73; + --color-foreground-secondary: #726a71; --color-foreground-muted: #6e696f; --color-foreground-tertiary: #746c73; --color-border: #cbd5d1; + --color-focus: #1b7d50; --color-border-subtle: rgba(203, 213, 209, 0.7); --color-separator: rgba(203, 213, 209, 0.55); --color-subtle: #e6f0ea; @@ -437,13 +639,14 @@ --color-inline-skill-background: #d5e6dd; --color-inline-skill-border: rgba(27, 125, 80, 0.42); --color-inline-skill-foreground: #241523; - --color-primary: #1b7d50; + --color-primary: #8f6410; --color-primary-foreground: #fffaff; + --color-primary-text: #8f6410; --color-primary-shadow: #000000; --color-secondary: #e2ede7; --color-secondary-foreground: #241523; --color-secondary-border: #cbd5d1; - --color-switch-active-track: #1b7d50; + --color-switch-active-track: #8f6410; --color-switch-active-thumb: #fffaff; --color-switch-inactive-track: #e2ede7; --color-switch-inactive-thumb: #6e696f; @@ -453,7 +656,9 @@ --color-danger: #f4e7e5; --color-danger-border: rgba(251, 44, 54, 0.32); --color-danger-foreground: #c10007; - --color-input: #ecefed; + --color-update: #d0e3da; + --color-update-foreground: #125134; + --color-input: #f3f7f4; --color-input-border: #becbc5; --color-sidebar-search: #d3dcd8; --color-placeholder: #716971; @@ -461,13 +666,15 @@ --color-icon-muted: #746c73; --color-icon-subtle: #746c73; --color-header: rgba(243, 247, 244, 0.97); + --color-header-foreground: #241523; --color-header-border: #d5e6dd; --color-glass-surface: rgba(231, 233, 232, 0.74); + --color-glass-fallback: rgba(243, 247, 244, 0.94); --color-glass-tint: rgba(231, 233, 232, 0.22); --color-status-bar: #f3f7f4; --color-md-body: #241523; --color-md-strong: #241523; - --color-md-link: #1b7d50; + --color-md-link: #8f6410; --color-md-blockquote-border: #cbd5d1; --color-md-blockquote-bg: #e6f0ea; --color-md-code-bg: #eef1ef; @@ -482,7 +689,10 @@ --color-user-bubble-foreground-muted: rgba(36, 21, 35, 0.78); --color-user-bubble-skill-foreground: #815a0e; --color-backdrop: rgba(0, 0, 0, 0.22); - --color-drawer: rgba(226, 237, 231, 0.99); + --color-drawer: #e2ede7; + --color-drawer-foreground: #241523; + --color-drawer-foreground-muted: #645f64; + --color-drawer-border: #cbd3d0; --color-drawer-shadow: rgba(0, 0, 0, 0.12); --color-dot-separator: rgba(116, 108, 115, 0.35); --color-wordmark: #241523; @@ -544,32 +754,36 @@ --color-adaptive-zinc-500-a12-a16: oklch(55.2% 0.016 285.938 / 12%); --color-adaptive-zinc-500-400: oklch(55.2% 0.016 285.938); --color-adaptive-zinc-600-300: oklch(44.2% 0.017 285.786); - --color-clerk-page: #f2f2f7; - --color-clerk-foreground: #262626; - --color-clerk-foreground-muted: #737373; - --color-clerk-border: rgba(229, 229, 234, 0.06); - --color-clerk-danger: #dc2626; + --color-clerk-page: #fcfcfc; + --color-clerk-foreground: #27272a; + --color-clerk-foreground-muted: #71717b; + --color-clerk-border: #e4e4e7; + --color-clerk-danger: #c10007; } @variant grove-dark { --color-screen: #1b2821; --color-sheet: rgba(27, 40, 33, 0.98); --color-sheet-solid: #1b2821; - --color-card: #36413c; - --color-card-alt: #1b2821; - --color-card-translucent: rgba(54, 65, 60, 0.8); + --color-card: #1b2821; + --color-grouped-card: #1b2821; + --color-card-alt: #36413c; + --color-card-translucent: rgba(27, 40, 33, 0.8); --color-thread-canvas: #1b2821; - --color-thread-selected: #36413c; + --color-thread-selected: #2f5641; --color-thread-selected-foreground: #fffaff; - --color-thread-selected-foreground-muted: #919595; + --color-thread-selected-foreground-muted: #bbc0bf; + --color-thread-hover: #2a4938; + --color-row-hover: #325c46; --color-composer-panel: rgba(27, 40, 33, 0.92); - --color-composer-surface: rgba(54, 65, 60, 0.9); + --color-composer-surface: rgba(27, 40, 33, 0.9); --color-composer-border: rgba(65, 95, 79, 0.46); --color-foreground: #fffaff; - --color-foreground-secondary: #919595; - --color-foreground-muted: #9da5a2; + --color-foreground-secondary: #a6aaaa; + --color-foreground-muted: #a3aba8; --color-foreground-tertiary: #919595; --color-border: #415f4f; + --color-focus: #69d69a; --color-border-subtle: rgba(65, 95, 79, 0.7); --color-separator: rgba(65, 95, 79, 0.55); --color-subtle: #253e31; @@ -577,13 +791,14 @@ --color-inline-skill-background: #325c46; --color-inline-skill-border: rgba(105, 214, 154, 0.42); --color-inline-skill-foreground: #fffaff; - --color-primary: #69d69a; + --color-primary: #e3b34e; --color-primary-foreground: #241523; + --color-primary-text: #e3b34e; --color-primary-shadow: #000000; --color-secondary: #2a4b39; --color-secondary-foreground: #fffaff; --color-secondary-border: #415f4f; - --color-switch-active-track: #69d69a; + --color-switch-active-track: #e3b34e; --color-switch-active-thumb: #241523; --color-switch-inactive-track: #2a4b39; --color-switch-inactive-thumb: #9da5a2; @@ -593,7 +808,9 @@ --color-danger: #3f2c28; --color-danger-border: rgba(251, 65, 74, 0.32); --color-danger-foreground: #ff6668; - --color-input: #36413c; + --color-update: #345f48; + --color-update-foreground: #9ee4be; + --color-input: #1b2821; --color-input-border: #4f725f; --color-sidebar-search: #45554d; --color-placeholder: #a9abab; @@ -601,13 +818,15 @@ --color-icon-muted: #919595; --color-icon-subtle: #919595; --color-header: rgba(27, 40, 33, 0.97); + --color-header-foreground: #fffaff; --color-header-border: #36654c; --color-glass-surface: rgba(68, 77, 73, 0.74); + --color-glass-fallback: rgba(27, 40, 33, 0.9); --color-glass-tint: rgba(68, 77, 73, 0.22); --color-status-bar: #1b2821; --color-md-body: #fffaff; --color-md-strong: #fffaff; - --color-md-link: #69d69a; + --color-md-link: #e3b34e; --color-md-blockquote-border: #415f4f; --color-md-blockquote-bg: #253e31; --color-md-code-bg: #28342e; @@ -622,7 +841,10 @@ --color-user-bubble-foreground-muted: rgba(255, 250, 255, 0.78); --color-user-bubble-skill-foreground: #eed295; --color-backdrop: rgba(0, 0, 0, 0.48); - --color-drawer: rgba(33, 54, 43, 0.99); + --color-drawer: #21362b; + --color-drawer-foreground: #fffaff; + --color-drawer-foreground-muted: #aab0af; + --color-drawer-border: #6f7a75; --color-drawer-shadow: rgba(0, 0, 0, 0.32); --color-dot-separator: rgba(145, 149, 149, 0.35); --color-wordmark: #fffaff; @@ -684,32 +906,36 @@ --color-adaptive-zinc-500-a12-a16: oklch(55.2% 0.016 285.938 / 16%); --color-adaptive-zinc-500-400: oklch(70.5% 0.015 286.067); --color-adaptive-zinc-600-300: oklch(87.1% 0.006 286.286); - --color-clerk-page: #0e0e0e; + --color-clerk-page: #0a0a0a; --color-clerk-foreground: #f5f5f5; - --color-clerk-foreground-muted: #a3a3a3; - --color-clerk-border: rgba(42, 42, 42, 0.06); - --color-clerk-danger: #fca5a5; + --color-clerk-foreground-muted: #818181; + --color-clerk-border: #191919; + --color-clerk-danger: #ff6467; } @variant ocean-light { --color-screen: #f5f7f8; --color-sheet: rgba(245, 247, 248, 0.98); --color-sheet-solid: #f5f7f8; - --color-card: #edeff1; - --color-card-alt: #f5f7f8; - --color-card-translucent: rgba(237, 239, 241, 0.8); + --color-card: #f5f7f8; + --color-grouped-card: #f5f7f8; + --color-card-alt: #edeff1; + --color-card-translucent: rgba(245, 247, 248, 0.8); --color-thread-canvas: #f5f7f8; - --color-thread-selected: #edeff1; + --color-thread-selected: #bed4e5; --color-thread-selected-foreground: #241523; - --color-thread-selected-foreground-muted: #746c75; + --color-thread-selected-foreground-muted: #5e5862; + --color-thread-hover: #cdddea; + --color-row-hover: #d8e4ee; --color-composer-panel: rgba(245, 247, 248, 0.88); - --color-composer-surface: rgba(237, 239, 241, 0.94); + --color-composer-surface: rgba(245, 247, 248, 0.94); --color-composer-border: rgba(205, 212, 220, 0.54); --color-foreground: #241523; - --color-foreground-secondary: #746c75; + --color-foreground-secondary: #726a73; --color-foreground-muted: #6f6873; --color-foreground-tertiary: #746c75; --color-border: #cdd4dc; + --color-focus: #2672af; --color-border-subtle: rgba(205, 212, 220, 0.7); --color-separator: rgba(205, 212, 220, 0.55); --color-subtle: #e8eff4; @@ -717,13 +943,14 @@ --color-inline-skill-background: #d8e4ee; --color-inline-skill-border: rgba(38, 114, 175, 0.42); --color-inline-skill-foreground: #241523; - --color-primary: #2672af; + --color-primary: #0a6f75; --color-primary-foreground: #fffaff; + --color-primary-text: #0a6f75; --color-primary-shadow: #000000; --color-secondary: #e4ecf2; --color-secondary-foreground: #241523; --color-secondary-border: #cdd4dc; - --color-switch-active-track: #2672af; + --color-switch-active-track: #0a6f75; --color-switch-active-thumb: #fffaff; --color-switch-inactive-track: #e4ecf2; --color-switch-inactive-thumb: #6f6873; @@ -733,7 +960,9 @@ --color-danger: #f5e6e9; --color-danger-border: rgba(251, 44, 54, 0.32); --color-danger-foreground: #c10007; - --color-input: #edeff1; + --color-update: #d4e1ed; + --color-update-foreground: #194a72; + --color-input: #f5f7f8; --color-input-border: #c0c9d4; --color-sidebar-search: #d5dbe2; --color-placeholder: #716972; @@ -741,13 +970,15 @@ --color-icon-muted: #746c75; --color-icon-subtle: #746c75; --color-header: rgba(245, 247, 248, 0.97); + --color-header-foreground: #241523; --color-header-border: #d8e4ee; --color-glass-surface: rgba(232, 233, 235, 0.74); + --color-glass-fallback: rgba(245, 247, 248, 0.94); --color-glass-tint: rgba(232, 233, 235, 0.22); --color-status-bar: #f5f7f8; --color-md-body: #241523; --color-md-strong: #241523; - --color-md-link: #2672af; + --color-md-link: #0a6f75; --color-md-blockquote-border: #cdd4dc; --color-md-blockquote-bg: #e8eff4; --color-md-code-bg: #f0f1f3; @@ -762,7 +993,10 @@ --color-user-bubble-foreground-muted: rgba(36, 21, 35, 0.78); --color-user-bubble-skill-foreground: #0a6c72; --color-backdrop: rgba(0, 0, 0, 0.22); - --color-drawer: rgba(228, 236, 242, 0.99); + --color-drawer: #e4ecf2; + --color-drawer-foreground: #241523; + --color-drawer-foreground-muted: #655e69; + --color-drawer-border: #cdd2d9; --color-drawer-shadow: rgba(0, 0, 0, 0.12); --color-dot-separator: rgba(116, 108, 117, 0.35); --color-wordmark: #241523; @@ -824,32 +1058,36 @@ --color-adaptive-zinc-500-a12-a16: oklch(55.2% 0.016 285.938 / 12%); --color-adaptive-zinc-500-400: oklch(55.2% 0.016 285.938); --color-adaptive-zinc-600-300: oklch(44.2% 0.017 285.786); - --color-clerk-page: #f2f2f7; - --color-clerk-foreground: #262626; - --color-clerk-foreground-muted: #737373; - --color-clerk-border: rgba(229, 229, 234, 0.06); - --color-clerk-danger: #dc2626; + --color-clerk-page: #fcfcfc; + --color-clerk-foreground: #27272a; + --color-clerk-foreground-muted: #71717b; + --color-clerk-border: #e4e4e7; + --color-clerk-danger: #c10007; } @variant ocean-dark { --color-screen: #17212b; --color-sheet: rgba(23, 33, 43, 0.98); --color-sheet-solid: #17212b; - --color-card: #333b45; - --color-card-alt: #17212b; - --color-card-translucent: rgba(51, 59, 69, 0.8); + --color-card: #17212b; + --color-grouped-card: #17212b; + --color-card-alt: #333b45; + --color-card-translucent: rgba(23, 33, 43, 0.8); --color-thread-canvas: #17212b; - --color-thread-selected: #333b45; + --color-thread-selected: #2f495f; --color-thread-selected-foreground: #fffaff; - --color-thread-selected-foreground-muted: #8d8f97; + --color-thread-selected-foreground-muted: #b0b4ba; + --color-thread-hover: #283e50; + --color-row-hover: #324e66; --color-composer-panel: rgba(23, 33, 43, 0.92); - --color-composer-surface: rgba(51, 59, 69, 0.9); + --color-composer-surface: rgba(23, 33, 43, 0.9); --color-composer-border: rgba(64, 85, 103, 0.46); --color-foreground: #fffaff; - --color-foreground-secondary: #8d8f97; - --color-foreground-muted: #969ca6; + --color-foreground-secondary: #a2a3aa; + --color-foreground-muted: #9ea4ad; --color-foreground-tertiary: #8d8f97; --color-border: #405567; + --color-focus: #70b9ee; --color-border-subtle: rgba(64, 85, 103, 0.7); --color-separator: rgba(64, 85, 103, 0.55); --color-subtle: #233544; @@ -857,13 +1095,14 @@ --color-inline-skill-background: #324e66; --color-inline-skill-border: rgba(112, 185, 238, 0.42); --color-inline-skill-foreground: #fffaff; - --color-primary: #70b9ee; + --color-primary: #5bd0d6; --color-primary-foreground: #241523; + --color-primary-text: #5bd0d6; --color-primary-shadow: #000000; --color-secondary: #293f52; --color-secondary-foreground: #fffaff; --color-secondary-border: #405567; - --color-switch-active-track: #70b9ee; + --color-switch-active-track: #5bd0d6; --color-switch-active-thumb: #241523; --color-switch-inactive-track: #293f52; --color-switch-inactive-thumb: #969ca6; @@ -873,7 +1112,9 @@ --color-danger: #3c2630; --color-danger-border: rgba(251, 65, 74, 0.32); --color-danger-foreground: #ff6467; - --color-input: #333b45; + --color-update: #345269; + --color-update-foreground: #a2d2f4; + --color-input: #17212b; --color-input-border: #4f677b; --color-sidebar-search: #424e5a; --color-placeholder: #a4a4ac; @@ -881,13 +1122,15 @@ --color-icon-muted: #8d8f97; --color-icon-subtle: #8d8f97; --color-header: rgba(23, 33, 43, 0.97); + --color-header-foreground: #fffaff; --color-header-border: #36566f; --color-glass-surface: rgba(65, 72, 81, 0.74); + --color-glass-fallback: rgba(23, 33, 43, 0.9); --color-glass-tint: rgba(65, 72, 81, 0.22); --color-status-bar: #17212b; --color-md-body: #fffaff; --color-md-strong: #fffaff; - --color-md-link: #70b9ee; + --color-md-link: #5bd0d6; --color-md-blockquote-border: #405567; --color-md-blockquote-bg: #233544; --color-md-code-bg: #252e38; @@ -902,7 +1145,10 @@ --color-user-bubble-foreground-muted: rgba(255, 250, 255, 0.78); --color-user-bubble-skill-foreground: #75d8dd; --color-backdrop: rgba(0, 0, 0, 0.48); - --color-drawer: rgba(30, 45, 59, 0.99); + --color-drawer: #1e2d3b; + --color-drawer-foreground: #fffaff; + --color-drawer-foreground-muted: #a2a5ae; + --color-drawer-border: #6d757f; --color-drawer-shadow: rgba(0, 0, 0, 0.32); --color-dot-separator: rgba(141, 143, 151, 0.35); --color-wordmark: #fffaff; @@ -964,32 +1210,36 @@ --color-adaptive-zinc-500-a12-a16: oklch(55.2% 0.016 285.938 / 16%); --color-adaptive-zinc-500-400: oklch(70.5% 0.015 286.067); --color-adaptive-zinc-600-300: oklch(87.1% 0.006 286.286); - --color-clerk-page: #0e0e0e; + --color-clerk-page: #0a0a0a; --color-clerk-foreground: #f5f5f5; - --color-clerk-foreground-muted: #a3a3a3; - --color-clerk-border: rgba(42, 42, 42, 0.06); - --color-clerk-danger: #fca5a5; + --color-clerk-foreground-muted: #818181; + --color-clerk-border: #191919; + --color-clerk-danger: #ff6467; } @variant ember-light { --color-screen: #f9f7f5; --color-sheet: rgba(249, 247, 245, 0.98); --color-sheet-solid: #f9f7f5; - --color-card: #f1efee; - --color-card-alt: #f9f7f5; - --color-card-translucent: rgba(241, 239, 238, 0.8); + --color-card: #f9f7f5; + --color-grouped-card: #f9f7f5; + --color-card-alt: #f1efee; + --color-card-translucent: rgba(249, 247, 245, 0.8); --color-thread-canvas: #f9f7f5; - --color-thread-selected: #f1efee; + --color-thread-selected: #e5ccc0; --color-thread-selected-foreground: #241523; - --color-thread-selected-foreground-muted: #766c74; + --color-thread-selected-foreground-muted: #62575d; + --color-thread-hover: #ead8cf; + --color-row-hover: #eee0d9; --color-composer-panel: rgba(249, 247, 245, 0.88); - --color-composer-surface: rgba(241, 239, 238, 0.94); + --color-composer-surface: rgba(249, 247, 245, 0.94); --color-composer-border: rgba(221, 210, 206, 0.54); --color-foreground: #241523; - --color-foreground-secondary: #766c74; + --color-foreground-secondary: #746a72; --color-foreground-muted: #74686f; --color-foreground-tertiary: #766c74; --color-border: #ddd2ce; + --color-focus: #ae552a; --color-border-subtle: rgba(221, 210, 206, 0.7); --color-separator: rgba(221, 210, 206, 0.55); --color-subtle: #f4ede9; @@ -997,13 +1247,14 @@ --color-inline-skill-background: #eee0d9; --color-inline-skill-border: rgba(174, 85, 42, 0.42); --color-inline-skill-foreground: #241523; - --color-primary: #ae552a; + --color-primary: #b23535; --color-primary-foreground: #fffaff; + --color-primary-text: #b23535; --color-primary-shadow: #000000; --color-secondary: #f3eae5; --color-secondary-foreground: #241523; --color-secondary-border: #ddd2ce; - --color-switch-active-track: #ae552a; + --color-switch-active-track: #b23535; --color-switch-active-thumb: #fffaff; --color-switch-inactive-track: #f3eae5; --color-switch-inactive-thumb: #74686f; @@ -1013,7 +1264,9 @@ --color-danger: #f9e7e6; --color-danger-border: rgba(251, 44, 54, 0.32); --color-danger-foreground: #c10007; - --color-input: #f1efee; + --color-update: #edddd5; + --color-update-foreground: #71381b; + --color-input: #f9f7f5; --color-input-border: #d4c6c1; --color-sidebar-search: #e2d9d6; --color-placeholder: #736971; @@ -1021,13 +1274,15 @@ --color-icon-muted: #766c74; --color-icon-subtle: #766c74; --color-header: rgba(249, 247, 245, 0.97); + --color-header-foreground: #241523; --color-header-border: #eee0d9; --color-glass-surface: rgba(236, 233, 233, 0.74); + --color-glass-fallback: rgba(249, 247, 245, 0.94); --color-glass-tint: rgba(236, 233, 233, 0.22); --color-status-bar: #f9f7f5; --color-md-body: #241523; --color-md-strong: #241523; - --color-md-link: #ae552a; + --color-md-link: #b23535; --color-md-blockquote-border: #ddd2ce; --color-md-blockquote-bg: #f4ede9; --color-md-code-bg: #f3f1f0; @@ -1042,7 +1297,10 @@ --color-user-bubble-foreground-muted: rgba(36, 21, 35, 0.78); --color-user-bubble-skill-foreground: #b13535; --color-backdrop: rgba(0, 0, 0, 0.22); - --color-drawer: rgba(243, 234, 229, 0.99); + --color-drawer: #f3eae5; + --color-drawer-foreground: #241523; + --color-drawer-foreground-muted: #6a5d64; + --color-drawer-border: #dad0ce; --color-drawer-shadow: rgba(0, 0, 0, 0.12); --color-dot-separator: rgba(118, 108, 116, 0.35); --color-wordmark: #241523; @@ -1104,32 +1362,36 @@ --color-adaptive-zinc-500-a12-a16: oklch(55.2% 0.016 285.938 / 12%); --color-adaptive-zinc-500-400: oklch(55.2% 0.016 285.938); --color-adaptive-zinc-600-300: oklch(44.2% 0.017 285.786); - --color-clerk-page: #f2f2f7; - --color-clerk-foreground: #262626; - --color-clerk-foreground-muted: #737373; - --color-clerk-border: rgba(229, 229, 234, 0.06); - --color-clerk-danger: #dc2626; + --color-clerk-page: #fcfcfc; + --color-clerk-foreground: #27272a; + --color-clerk-foreground-muted: #71717b; + --color-clerk-border: #e4e4e7; + --color-clerk-danger: #c10007; } @variant ember-dark { --color-screen: #291e1a; --color-sheet: rgba(41, 30, 26, 0.98); --color-sheet-solid: #291e1a; - --color-card: #433835; - --color-card-alt: #291e1a; - --color-card-translucent: rgba(67, 56, 53, 0.8); + --color-card: #291e1a; + --color-grouped-card: #291e1a; + --color-card-alt: #433835; + --color-card-translucent: rgba(41, 30, 26, 0.8); --color-thread-canvas: #291e1a; - --color-thread-selected: #433835; + --color-thread-selected: #5d3f2d; --color-thread-selected-foreground: #fffaff; - --color-thread-selected-foreground-muted: #968e8f; + --color-thread-selected-foreground-muted: #b9b1b0; + --color-thread-hover: #4f3528; + --color-row-hover: #644330; --color-composer-panel: rgba(41, 30, 26, 0.92); - --color-composer-surface: rgba(67, 56, 53, 0.9); + --color-composer-surface: rgba(41, 30, 26, 0.9); --color-composer-border: rgba(102, 76, 63, 0.46); --color-foreground: #fffaff; - --color-foreground-secondary: #968e8f; - --color-foreground-muted: #a59996; + --color-foreground-secondary: #a8a2a2; + --color-foreground-muted: #aca19f; --color-foreground-tertiary: #968e8f; --color-border: #664c3f; + --color-focus: #f09a64; --color-border-subtle: rgba(102, 76, 63, 0.7); --color-separator: rgba(102, 76, 63, 0.55); --color-subtle: #432e23; @@ -1137,13 +1399,14 @@ --color-inline-skill-background: #644330; --color-inline-skill-border: rgba(240, 154, 100, 0.42); --color-inline-skill-foreground: #fffaff; - --color-primary: #f09a64; + --color-primary: #f78a7a; --color-primary-foreground: #241523; + --color-primary-text: #f78a7a; --color-primary-shadow: #000000; --color-secondary: #513728; --color-secondary-foreground: #fffaff; --color-secondary-border: #664c3f; - --color-switch-active-track: #f09a64; + --color-switch-active-track: #f78a7a; --color-switch-active-thumb: #241523; --color-switch-inactive-track: #513728; --color-switch-inactive-thumb: #a59996; @@ -1153,7 +1416,9 @@ --color-danger: #4a2321; --color-danger-border: rgba(251, 65, 74, 0.32); --color-danger-foreground: #ff6467; - --color-input: #433835; + --color-update: #684631; + --color-update-foreground: #f5bd9a; + --color-input: #291e1a; --color-input-border: #7a5d4d; --color-sidebar-search: #584943; --color-placeholder: #aba3a5; @@ -1161,13 +1426,15 @@ --color-icon-muted: #968e8f; --color-icon-subtle: #968e8f; --color-header: rgba(41, 30, 26, 0.97); + --color-header-foreground: #fffaff; --color-header-border: #6e4934; --color-glass-surface: rgba(79, 69, 67, 0.74); + --color-glass-fallback: rgba(41, 30, 26, 0.9); --color-glass-tint: rgba(79, 69, 67, 0.22); --color-status-bar: #291e1a; --color-md-body: #fffaff; --color-md-strong: #fffaff; - --color-md-link: #f09a64; + --color-md-link: #f78a7a; --color-md-blockquote-border: #664c3f; --color-md-blockquote-bg: #432e23; --color-md-code-bg: #362b27; @@ -1182,7 +1449,10 @@ --color-user-bubble-foreground-muted: rgba(255, 250, 255, 0.78); --color-user-bubble-skill-foreground: #fab6ad; --color-backdrop: rgba(0, 0, 0, 0.48); - --color-drawer: rgba(57, 40, 31, 0.99); + --color-drawer: #39281f; + --color-drawer-foreground: #fffaff; + --color-drawer-foreground-muted: #aca2a1; + --color-drawer-border: #7e716e; --color-drawer-shadow: rgba(0, 0, 0, 0.32); --color-dot-separator: rgba(150, 142, 143, 0.35); --color-wordmark: #fffaff; @@ -1244,32 +1514,36 @@ --color-adaptive-zinc-500-a12-a16: oklch(55.2% 0.016 285.938 / 16%); --color-adaptive-zinc-500-400: oklch(70.5% 0.015 286.067); --color-adaptive-zinc-600-300: oklch(87.1% 0.006 286.286); - --color-clerk-page: #0e0e0e; + --color-clerk-page: #0a0a0a; --color-clerk-foreground: #f5f5f5; - --color-clerk-foreground-muted: #a3a3a3; - --color-clerk-border: rgba(42, 42, 42, 0.06); - --color-clerk-danger: #fca5a5; + --color-clerk-foreground-muted: #818181; + --color-clerk-border: #191919; + --color-clerk-danger: #ff6467; } @variant iris-light { --color-screen: #f8f7f9; --color-sheet: rgba(248, 247, 249, 0.98); --color-sheet-solid: #f8f7f9; - --color-card: #f0eff2; - --color-card-alt: #f8f7f9; - --color-card-translucent: rgba(240, 239, 242, 0.8); + --color-card: #f8f7f9; + --color-grouped-card: #f8f7f9; + --color-card-alt: #f0eff2; + --color-card-translucent: rgba(248, 247, 249, 0.8); --color-thread-canvas: #f8f7f9; - --color-thread-selected: #f0eff2; + --color-thread-selected: #d4cce8; --color-thread-selected-foreground: #241523; - --color-thread-selected-foreground-muted: #766c76; + --color-thread-selected-foreground-muted: #605662; + --color-thread-hover: #ded8ed; + --color-row-hover: #e5e0f0; --color-composer-panel: rgba(248, 247, 249, 0.88); - --color-composer-surface: rgba(240, 239, 242, 0.94); + --color-composer-surface: rgba(248, 247, 249, 0.94); --color-composer-border: rgba(214, 209, 222, 0.54); --color-foreground: #241523; - --color-foreground-secondary: #766c76; + --color-foreground-secondary: #746a74; --color-foreground-muted: #726874; --color-foreground-tertiary: #766c76; --color-border: #d6d1de; + --color-focus: #7253b9; --color-border-subtle: rgba(214, 209, 222, 0.7); --color-separator: rgba(214, 209, 222, 0.55); --color-subtle: #f0edf6; @@ -1277,13 +1551,14 @@ --color-inline-skill-background: #e5e0f0; --color-inline-skill-border: rgba(114, 83, 185, 0.42); --color-inline-skill-foreground: #241523; - --color-primary: #7253b9; + --color-primary: #a82c87; --color-primary-foreground: #fffaff; + --color-primary-text: #a82c87; --color-primary-shadow: #000000; --color-secondary: #edeaf4; --color-secondary-foreground: #241523; --color-secondary-border: #d6d1de; - --color-switch-active-track: #7253b9; + --color-switch-active-track: #a82c87; --color-switch-active-thumb: #fffaff; --color-switch-inactive-track: #edeaf4; --color-switch-inactive-thumb: #726874; @@ -1293,7 +1568,9 @@ --color-danger: #f8e6ea; --color-danger-border: rgba(251, 44, 54, 0.32); --color-danger-foreground: #c10007; - --color-input: #f0eff2; + --color-update: #e2ddef; + --color-update-foreground: #4a3678; + --color-input: #f8f7f9; --color-input-border: #ccc5d6; --color-sidebar-search: #ddd9e3; --color-placeholder: #736973; @@ -1301,13 +1578,15 @@ --color-icon-muted: #766c76; --color-icon-subtle: #766c76; --color-header: rgba(248, 247, 249, 0.97); + --color-header-foreground: #241523; --color-header-border: #e5e0f0; --color-glass-surface: rgba(235, 233, 237, 0.74); + --color-glass-fallback: rgba(248, 247, 249, 0.94); --color-glass-tint: rgba(235, 233, 237, 0.22); --color-status-bar: #f8f7f9; --color-md-body: #241523; --color-md-strong: #241523; - --color-md-link: #7253b9; + --color-md-link: #a82c87; --color-md-blockquote-border: #d6d1de; --color-md-blockquote-bg: #f0edf6; --color-md-code-bg: #f2f1f4; @@ -1322,7 +1601,10 @@ --color-user-bubble-foreground-muted: rgba(36, 21, 35, 0.78); --color-user-bubble-skill-foreground: #a82c87; --color-backdrop: rgba(0, 0, 0, 0.22); - --color-drawer: rgba(237, 234, 244, 0.99); + --color-drawer: #edeaf4; + --color-drawer-foreground: #241523; + --color-drawer-foreground-muted: #685d6a; + --color-drawer-border: #d5d0db; --color-drawer-shadow: rgba(0, 0, 0, 0.12); --color-dot-separator: rgba(118, 108, 118, 0.35); --color-wordmark: #241523; @@ -1384,32 +1666,36 @@ --color-adaptive-zinc-500-a12-a16: oklch(55.2% 0.016 285.938 / 12%); --color-adaptive-zinc-500-400: oklch(55.2% 0.016 285.938); --color-adaptive-zinc-600-300: oklch(44.2% 0.017 285.786); - --color-clerk-page: #f2f2f7; - --color-clerk-foreground: #262626; - --color-clerk-foreground-muted: #737373; - --color-clerk-border: rgba(229, 229, 234, 0.06); - --color-clerk-danger: #dc2626; + --color-clerk-page: #fcfcfc; + --color-clerk-foreground: #27272a; + --color-clerk-foreground-muted: #71717b; + --color-clerk-border: #e4e4e7; + --color-clerk-danger: #c10007; } @variant iris-dark { --color-screen: #1d1929; --color-sheet: rgba(29, 25, 41, 0.98); --color-sheet-solid: #1d1929; - --color-card: #383443; - --color-card-alt: #1d1929; - --color-card-translucent: rgba(56, 52, 67, 0.8); + --color-card: #1d1929; + --color-grouped-card: #1d1929; + --color-card-alt: #383443; + --color-card-translucent: rgba(29, 25, 41, 0.8); --color-thread-canvas: #1d1929; - --color-thread-selected: #383443; + --color-thread-selected: #3f345e; --color-thread-selected-foreground: #fffaff; - --color-thread-selected-foreground-muted: #8e8a95; + --color-thread-selected-foreground-muted: #a6a2ae; + --color-thread-hover: #352c4f; + --color-row-hover: #433765; --color-composer-panel: rgba(29, 25, 41, 0.92); - --color-composer-surface: rgba(56, 52, 67, 0.9); + --color-composer-surface: rgba(29, 25, 41, 0.9); --color-composer-border: rgba(77, 67, 102, 0.46); --color-foreground: #fffaff; - --color-foreground-secondary: #8e8a95; - --color-foreground-muted: #9690a1; + --color-foreground-secondary: #a09da6; + --color-foreground-muted: #a19cab; --color-foreground-tertiary: #8e8a95; --color-border: #4d4366; + --color-focus: #9d7df2; --color-border-subtle: rgba(77, 67, 102, 0.7); --color-separator: rgba(77, 67, 102, 0.55); --color-subtle: #2d2643; @@ -1417,13 +1703,14 @@ --color-inline-skill-background: #433765; --color-inline-skill-border: rgba(157, 125, 242, 0.42); --color-inline-skill-foreground: #fffaff; - --color-primary: #9d7df2; + --color-primary: #f099d8; --color-primary-foreground: #241523; + --color-primary-text: #f099d8; --color-primary-shadow: #000000; --color-secondary: #362d51; --color-secondary-foreground: #fffaff; --color-secondary-border: #4d4366; - --color-switch-active-track: #9d7df2; + --color-switch-active-track: #f099d8; --color-switch-active-thumb: #241523; --color-switch-inactive-track: #362d51; --color-switch-inactive-thumb: #9690a1; @@ -1433,7 +1720,9 @@ --color-danger: #40202e; --color-danger-border: rgba(251, 65, 74, 0.32); --color-danger-foreground: #ff6467; - --color-input: #383443; + --color-update: #463969; + --color-update-foreground: #bfabf7; + --color-input: #1d1929; --color-input-border: #5d527b; --color-sidebar-search: #494459; --color-placeholder: #a29ea8; @@ -1441,13 +1730,15 @@ --color-icon-muted: #8e8a95; --color-icon-subtle: #8e8a95; --color-header: rgba(29, 25, 41, 0.97); + --color-header-foreground: #fffaff; --color-header-border: #4a3c70; --color-glass-surface: rgba(69, 66, 80, 0.74); + --color-glass-fallback: rgba(29, 25, 41, 0.9); --color-glass-tint: rgba(69, 66, 80, 0.22); --color-status-bar: #1d1929; --color-md-body: #fffaff; --color-md-strong: #fffaff; - --color-md-link: #9d7df2; + --color-md-link: #f099d8; --color-md-blockquote-border: #4d4366; --color-md-blockquote-bg: #2d2643; --color-md-code-bg: #2a2736; @@ -1462,7 +1753,10 @@ --color-user-bubble-foreground-muted: rgba(255, 250, 255, 0.78); --color-user-bubble-skill-foreground: #f099d8; --color-backdrop: rgba(0, 0, 0, 0.48); - --color-drawer: rgba(39, 33, 57, 0.99); + --color-drawer: #272139; + --color-drawer-foreground: #fffaff; + --color-drawer-foreground-muted: #9b97a4; + --color-drawer-border: #736d7e; --color-drawer-shadow: rgba(0, 0, 0, 0.32); --color-dot-separator: rgba(142, 138, 149, 0.35); --color-wordmark: #fffaff; @@ -1524,11 +1818,11 @@ --color-adaptive-zinc-500-a12-a16: oklch(55.2% 0.016 285.938 / 16%); --color-adaptive-zinc-500-400: oklch(70.5% 0.015 286.067); --color-adaptive-zinc-600-300: oklch(87.1% 0.006 286.286); - --color-clerk-page: #0e0e0e; + --color-clerk-page: #0a0a0a; --color-clerk-foreground: #f5f5f5; - --color-clerk-foreground-muted: #a3a3a3; - --color-clerk-border: rgba(42, 42, 42, 0.06); - --color-clerk-danger: #fca5a5; + --color-clerk-foreground-muted: #818181; + --color-clerk-border: #191919; + --color-clerk-danger: #ff6467; } } } diff --git a/apps/mobile/global.css b/apps/mobile/global.css index 2f686e3a1fa94b67afbb154c46a183100bbb0af1..730b9e1a97f34750e249a20059f00bb844bb2a6d 100644 --- a/apps/mobile/global.css +++ b/apps/mobile/global.css @@ -8,228 +8,6 @@ @variant android { --font-mono: "monospace"; } - - @variant light { - /* Page backgrounds */ - --color-screen: #f2f2f7; - --color-sheet: rgba(242, 242, 247, 0.98); - --color-sheet-solid: #f2f2f7; - - /* Card / surface */ - --color-card: #ffffff; - --color-card-alt: #f5f5f5; - --color-card-translucent: rgba(255, 255, 255, 0.8); - --color-thread-canvas: #f5f5f5; - --color-thread-selected: #ffffff; - --color-thread-selected-foreground: #262626; - --color-thread-selected-foreground-muted: #737373; - --color-composer-panel: rgba(245, 245, 245, 0.88); - --color-composer-surface: rgba(255, 255, 255, 0.94); - --color-composer-border: rgba(0, 0, 0, 0.1); - - /* Text */ - --color-foreground: #262626; - --color-foreground-secondary: #525252; - --color-foreground-muted: #737373; - --color-foreground-tertiary: #8e8e93; - - /* Borders & separators */ - --color-border: rgba(0, 0, 0, 0.08); - --color-border-subtle: rgba(0, 0, 0, 0.06); - --color-separator: rgba(0, 0, 0, 0.04); - - /* Subtle backgrounds (badges, pills, overlays) */ - --color-subtle: rgba(0, 0, 0, 0.04); - --color-subtle-strong: rgba(0, 0, 0, 0.08); - --color-inline-skill-background: rgba(217, 70, 239, 0.12); - --color-inline-skill-border: rgba(217, 70, 239, 0.25); - --color-inline-skill-foreground: #a21caf; - - /* Primary action */ - --color-primary: #262626; - --color-primary-foreground: #ffffff; - --color-primary-shadow: #000000; - - /* Secondary action */ - --color-secondary: #ffffff; - --color-secondary-foreground: #262626; - --color-secondary-border: rgba(0, 0, 0, 0.08); - --color-switch-active-track: #34c759; - --color-switch-active-thumb: #ffffff; - --color-switch-inactive-track: rgba(0, 0, 0, 0.08); - --color-switch-inactive-thumb: #8e8e93; - - /* Warning */ - --color-warning: #fffbeb; - --color-warning-border: #fde68a; - --color-warning-foreground: #b45309; - - /* Danger */ - --color-danger: #fef2f2; - --color-danger-border: rgba(239, 68, 68, 0.12); - --color-danger-foreground: #dc2626; - - /* Inputs */ - --color-input: #ffffff; - --color-input-border: rgba(0, 0, 0, 0.1); - --color-sidebar-search: rgba(118, 118, 128, 0.12); - --color-placeholder: #737373; - - /* Icons */ - --color-icon: #262626; - --color-icon-muted: #525252; - --color-icon-subtle: #a3a3a3; - - /* Header / glass chrome */ - --color-header: rgba(255, 255, 255, 0.97); - --color-header-border: rgba(0, 0, 0, 0.06); - --color-glass-surface: rgba(255, 255, 255, 0.72); - --color-glass-tint: rgba(255, 255, 255, 0.18); - - /* StatusBar */ - --color-status-bar: #f2f2f7; - - /* Markdown */ - --color-md-body: #111111; - --color-md-strong: #000000; - --color-md-link: #2563eb; - --color-md-blockquote-border: rgba(0, 0, 0, 0.08); - --color-md-blockquote-bg: rgba(0, 0, 0, 0.02); - --color-md-code-bg: rgba(0, 0, 0, 0.04); - --color-md-code-text: #262626; - --color-md-user-code-bg: rgba(0, 0, 0, 0.04); - --color-md-user-code-text: #262626; - --color-md-user-fence-bg: rgba(0, 0, 0, 0.06); - --color-md-user-fence-text: #262626; - --color-md-hr: rgba(0, 0, 0, 0.08); - - /* User bubble: a raised card on the thread canvas, matching web's message surface */ - --color-user-bubble: #ffffff; - --color-user-bubble-foreground: #262626; - --color-user-bubble-foreground-muted: rgba(38, 38, 38, 0.78); - --color-user-bubble-skill-foreground: #2563eb; - - /* Drawer / modal backdrop */ - --color-backdrop: rgba(0, 0, 0, 0.22); - --color-drawer: rgba(255, 255, 255, 0.99); - --color-drawer-shadow: rgba(0, 0, 0, 0.12); - - /* Misc */ - --color-dot-separator: rgba(0, 0, 0, 0.2); - --color-wordmark: #262626; - --color-chevron: rgba(0, 0, 0, 0.2); - } - - @variant dark { - /* Page backgrounds */ - --color-screen: #0a0a0a; - --color-sheet: rgba(14, 14, 14, 0.98); - --color-sheet-solid: #0e0e0e; - - /* Card / surface */ - --color-card: #171717; - --color-card-alt: #1c1c1c; - --color-card-translucent: rgba(17, 17, 17, 0.8); - --color-thread-canvas: #1c1c1c; - --color-thread-selected: #171717; - --color-thread-selected-foreground: #f5f5f5; - --color-thread-selected-foreground-muted: #8e8e93; - --color-composer-panel: rgba(28, 28, 28, 0.92); - --color-composer-surface: rgba(23, 23, 23, 0.9); - --color-composer-border: rgba(255, 255, 255, 0.08); - - /* Text */ - --color-foreground: #f5f5f5; - --color-foreground-secondary: #a3a3a3; - --color-foreground-muted: #8e8e93; - --color-foreground-tertiary: #636366; - - /* Borders & separators */ - --color-border: rgba(255, 255, 255, 0.06); - --color-border-subtle: rgba(255, 255, 255, 0.04); - --color-separator: rgba(255, 255, 255, 0.03); - - /* Subtle backgrounds (badges, pills, overlays) */ - --color-subtle: rgba(255, 255, 255, 0.04); - --color-subtle-strong: rgba(255, 255, 255, 0.08); - --color-inline-skill-background: rgba(217, 70, 239, 0.12); - --color-inline-skill-border: rgba(217, 70, 239, 0.25); - --color-inline-skill-foreground: #f0abfc; - - /* Primary action */ - --color-primary: #f5f5f5; - --color-primary-foreground: #0a0a0a; - --color-primary-shadow: #000000; - - /* Secondary action */ - --color-secondary: rgba(255, 255, 255, 0.04); - --color-secondary-foreground: #f5f5f5; - --color-secondary-border: rgba(255, 255, 255, 0.06); - --color-switch-active-track: #30d158; - --color-switch-active-thumb: #ffffff; - --color-switch-inactive-track: rgba(255, 255, 255, 0.06); - --color-switch-inactive-thumb: #8e8e93; - - /* Warning */ - --color-warning: rgba(69, 26, 3, 0.4); - --color-warning-border: rgba(120, 53, 15, 0.6); - --color-warning-foreground: #fcd34d; - - /* Danger */ - --color-danger: rgba(239, 68, 68, 0.14); - --color-danger-border: rgba(248, 113, 113, 0.18); - --color-danger-foreground: #fca5a5; - - /* Inputs */ - --color-input: #141414; - --color-input-border: rgba(255, 255, 255, 0.08); - --color-sidebar-search: rgba(118, 118, 128, 0.24); - --color-placeholder: #8e8e93; - - /* Icons */ - --color-icon: #f5f5f5; - --color-icon-muted: #a3a3a3; - --color-icon-subtle: #8e8e93; - - /* Header / glass chrome */ - --color-header: rgba(10, 10, 10, 0.97); - --color-header-border: rgba(255, 255, 255, 0.06); - --color-glass-surface: rgba(23, 23, 23, 0.78); - --color-glass-tint: rgba(23, 23, 23, 0.24); - - /* StatusBar */ - --color-status-bar: #0a0a0a; - - /* Markdown */ - --color-md-body: #e5e5e5; - --color-md-strong: #f5f5f5; - --color-md-link: #60a5fa; - --color-md-blockquote-border: rgba(255, 255, 255, 0.1); - --color-md-blockquote-bg: rgba(255, 255, 255, 0.03); - --color-md-code-bg: rgba(255, 255, 255, 0.06); - --color-md-code-text: #e5e5e5; - --color-md-user-code-bg: rgba(255, 255, 255, 0.06); - --color-md-user-code-text: #e5e5e5; - --color-md-user-fence-bg: rgba(255, 255, 255, 0.09); - --color-md-user-fence-text: #e5e5e5; - --color-md-hr: rgba(255, 255, 255, 0.08); - - /* User bubble: a raised card on the thread canvas, matching web's message surface */ - --color-user-bubble: #171717; - --color-user-bubble-foreground: #f5f5f5; - --color-user-bubble-foreground-muted: rgba(245, 245, 245, 0.78); - --color-user-bubble-skill-foreground: #60a5fa; - - /* Drawer / modal backdrop */ - --color-backdrop: rgba(0, 0, 0, 0.48); - --color-drawer: rgba(14, 14, 14, 0.99); - --color-drawer-shadow: rgba(0, 0, 0, 0.32); - - /* Misc */ - --color-dot-separator: rgba(255, 255, 255, 0.2); - --color-wordmark: #f5f5f5; - --color-chevron: rgba(255, 255, 255, 0.2); - } } } diff --git a/apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3ContextChip.kt b/apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3ContextChip.kt index 09b49c956407bdca214e82be35522b3a7179a33a..df0dd88724e07b07d8feed47231bd8501bff3059 100644 --- a/apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3ContextChip.kt +++ b/apps/mobile/modules/t3-markdown-text/android/src/main/java/expo/modules/t3markdowntext/T3ContextChip.kt @@ -114,7 +114,15 @@ class T3ContextChip( fun color( value: String, fallback: Int - ): Int = runCatching { Color.parseColor(value) }.getOrDefault(fallback) + ): Int = runCatching { + // React Native hex colors put alpha last; Android's parser puts it first. + val androidColor = if (value.length == 9 && value.startsWith("#")) { + "#${value.takeLast(2)}${value.substring(1, 7)}" + } else { + value + } + Color.parseColor(androidColor) + }.getOrDefault(fallback) private fun blend(accent: Int, base: Int, weight: Float): Int = Color.rgb( (Color.red(accent) * weight + Color.red(base) * (1 - weight)).toInt(), diff --git a/apps/mobile/plugins/withAndroidModernAlertDialog.cjs b/apps/mobile/plugins/withAndroidModernAlertDialog.cjs index 8c8b2b800060bfb0ba41e425b6d9ec3b8cea6d0d..1a677e35e802eb7debfa67201bb6c8e1a27c2cff 100644 --- a/apps/mobile/plugins/withAndroidModernAlertDialog.cjs +++ b/apps/mobile/plugins/withAndroidModernAlertDialog.cjs @@ -1,5 +1,6 @@ const fs = require("node:fs"); const path = require("node:path"); +const themeVariables = require("../generated-uniwind-default-theme-variables.json"); const { AndroidConfig, withAndroidColors, @@ -11,9 +12,10 @@ const { // React Native's Alert renders an AppCompat AlertDialog on Android, which // inherits the dated framework dialog chrome (square gray panel, teal // all-caps buttons) from the app theme. These resources restyle it with the -// app's uniwind tokens from global.css: --color-card panel, --color-foreground -// text, --color-primary buttons, DM Sans type. The @font resources referenced -// here are embedded by the expo-font plugin config in app.config.ts. +// generated default palette: card panel, foreground text, readable primary +// buttons, DM Sans type. Alert exposes no runtime custom-palette API, so these +// build-time resources use the stock palette for each native appearance. +// The fonts are embedded by the expo-font plugin config in app.config.ts. // AppCompat's default dialog window background is an inset rounded rect, so // the replacement keeps the same 16dp inset to preserve the dialog's margins. @@ -30,21 +32,18 @@ const DIALOG_BACKGROUND_DRAWABLE = ` `; -const COLORS = { - light: { - background: "#FFFFFF", // --color-card - text: "#262626", // --color-foreground - secondaryText: "#525252", // --color-foreground-secondary - buttonText: "#262626", // --color-primary - }, - night: { - background: "#171717", - text: "#F5F5F5", - secondaryText: "#A3A3A3", - buttonText: "#F5F5F5", - }, +const colorsFor = (appearance) => { + const variables = themeVariables[appearance]; + return { + background: variables["--color-card"], + text: variables["--color-foreground"], + secondaryText: variables["--color-foreground-secondary"], + buttonText: variables["--color-primary-text"], + }; }; +const COLORS = { light: colorsFor("light"), night: colorsFor("dark") }; + function assignStyleItem(style, name, value) { style.item = style.item ?? []; const existing = style.item.find((item) => item.$?.name === name); diff --git a/apps/mobile/scripts/generate-uniwind-themes.mts b/apps/mobile/scripts/generate-uniwind-themes.mts index a51728458082e866ad487444719b7eb55a1dfbfb..94643c3e413fa3e30c86c05696eb27a705c9bcf0 100644 --- a/apps/mobile/scripts/generate-uniwind-themes.mts +++ b/apps/mobile/scripts/generate-uniwind-themes.mts @@ -5,17 +5,15 @@ import * as NodePath from "node:path"; import tailwindColors from "tailwindcss/colors"; import { BUILT_IN_THEME_IDS, type BuiltInThemeId } from "@t3tools/shared/themePalettes"; -import clerkTheme from "../clerk-theme.json" with { type: "json" }; import { + createMobileThemeVariables, + getMobileThemeColors, getMobileThemeVariables, - MOBILE_THEME_VARIABLE_NAMES, - themeColorWithAlpha, + DEFAULT_MOBILE_THEME_ID, type MobileThemeAppearance, - type MobileThemeVariables, } from "../src/lib/mobileTheme.ts"; const APPEARANCES = ["light", "dark"] as const; -const GLOBAL_CSS_PATH = NodePath.resolve(import.meta.dirname, "../global.css"); const GENERATED_CSS_PATH = NodePath.resolve(import.meta.dirname, "../generated-uniwind-themes.css"); const GENERATED_NAMES_PATH = NodePath.resolve( import.meta.dirname, @@ -25,6 +23,7 @@ const GENERATED_DEFAULT_VARIABLES_PATH = NodePath.resolve( import.meta.dirname, "../generated-uniwind-default-theme-variables.json", ); +const GENERATED_CLERK_THEME_PATH = NodePath.resolve(import.meta.dirname, "../clerk-theme.json"); type TailwindColorFamily = keyof typeof tailwindColors; type TailwindColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950; @@ -159,13 +158,38 @@ const variablesFor = (themeId: BuiltInThemeId, appearance: MobileThemeAppearance // Clerk's native screens use one build-time palette per appearance. Custom // profile pages must match it even when the rest of the app uses a named theme. +const clerkColorsFor = (appearance: MobileThemeAppearance) => { + // Native authentication uses plain cards, rather than tonal settings groups. + const variables = createMobileThemeVariables( + getMobileThemeColors(DEFAULT_MOBILE_THEME_ID, appearance), + appearance, + ); + return { + primary: variables["--color-primary"], + background: variables["--color-sheet-solid"], + input: variables["--color-input"], + danger: variables["--color-danger-foreground"], + success: appearance === "dark" ? "#34d399" : "#059669", + warning: variables["--color-warning-foreground"], + foreground: variables["--color-foreground"], + mutedForeground: variables["--color-foreground-muted"], + primaryForeground: variables["--color-primary-foreground"], + inputForeground: variables["--color-foreground"], + neutral: variables["--color-secondary"], + border: variables["--color-border"], + ring: variables["--color-focus"], + muted: variables["--color-subtle"], + shadow: variables["--color-primary-shadow"], + }; +}; + const clerkVariablesFor = (appearance: MobileThemeAppearance) => { - const colors = appearance === "dark" ? clerkTheme.darkColors : clerkTheme.colors; + const colors = clerkColorsFor(appearance); return { "--color-clerk-page": colors.background.toLowerCase(), "--color-clerk-foreground": colors.foreground.toLowerCase(), "--color-clerk-foreground-muted": colors.mutedForeground.toLowerCase(), - "--color-clerk-border": themeColorWithAlpha(colors.border, 0.06), + "--color-clerk-border": colors.border, "--color-clerk-danger": colors.danger.toLowerCase(), }; }; @@ -181,6 +205,7 @@ export const renderUniwindThemesCSS = () => { const variants = [ ...APPEARANCES.map((appearance) => renderVariant(appearance, { + ...getMobileThemeVariables(DEFAULT_MOBILE_THEME_ID, appearance), ...adaptiveVariablesFor(appearance), ...clerkVariablesFor(appearance), }), @@ -202,50 +227,27 @@ export const renderUniwindThemesCSS = () => { ].join("\n"); }; -const readVariantBody = (css: string, appearance: MobileThemeAppearance): string => { - const marker = `@variant ${appearance} {`; - const markerIndex = css.indexOf(marker); - if (markerIndex === -1) throw new Error(`Could not find ${marker} in global.css.`); - - const openingBraceIndex = css.indexOf("{", markerIndex); - let depth = 0; - for (let index = openingBraceIndex; index < css.length; index += 1) { - if (css[index] === "{") depth += 1; - if (css[index] !== "}") continue; - depth -= 1; - if (depth === 0) return css.slice(openingBraceIndex + 1, index); - } - throw new Error(`Could not find the end of ${marker} in global.css.`); -}; - -export const readDefaultThemeVariables = (css: string) => - Object.fromEntries( - APPEARANCES.map((appearance) => { - const body = readVariantBody(css, appearance); - const variables = Object.fromEntries( - MOBILE_THEME_VARIABLE_NAMES.map((name) => { - const match = new RegExp(`^\\s*${name}:\\s*([^;]+);`, "mu").exec(body); - if (!match?.[1]) { - throw new Error(`Default ${appearance} theme is missing ${name}.`); - } - return [name, match[1].trim()]; - }), - ) as MobileThemeVariables; - return [appearance, variables]; - }), - ) as Readonly>; - -export const renderDefaultThemeVariablesJSON = (css: string) => - `${JSON.stringify(readDefaultThemeVariables(css), null, 2)}\n`; +export const renderDefaultThemeVariablesJSON = () => + `${JSON.stringify( + Object.fromEntries( + APPEARANCES.map((appearance) => [ + appearance, + getMobileThemeVariables(DEFAULT_MOBILE_THEME_ID, appearance), + ]), + ), + null, + 2, + )}\n`; export const getGeneratedUniwindThemeOutputs = (): ReadonlyArray< readonly [filename: string, contents: string] > => [ [GENERATED_CSS_PATH, renderUniwindThemesCSS()], [GENERATED_NAMES_PATH, `${JSON.stringify(customThemeNames, null, 2)}\n`], + [GENERATED_DEFAULT_VARIABLES_PATH, renderDefaultThemeVariablesJSON()], [ - GENERATED_DEFAULT_VARIABLES_PATH, - renderDefaultThemeVariablesJSON(NodeFS.readFileSync(GLOBAL_CSS_PATH, "utf8")), + GENERATED_CLERK_THEME_PATH, + `${JSON.stringify({ colors: clerkColorsFor("light"), darkColors: clerkColorsFor("dark"), design: { borderRadius: 18 } }, null, 2)}\n`, ], ]; diff --git a/apps/mobile/scripts/generate-uniwind-themes.test.ts b/apps/mobile/scripts/generate-uniwind-themes.test.ts index 31663b8de2ffba3ad8db1a461d15b5c40f911d65..a225b7087c8689432ef2cf3a2e451af21d72eaef 100644 --- a/apps/mobile/scripts/generate-uniwind-themes.test.ts +++ b/apps/mobile/scripts/generate-uniwind-themes.test.ts @@ -5,9 +5,10 @@ import { describe, expect, it } from "vite-plus/test"; import { customThemeNames, getGeneratedUniwindThemeOutputs, - readDefaultThemeVariables, + renderDefaultThemeVariablesJSON, renderUniwindThemesCSS, } from "./generate-uniwind-themes.mts"; +import { readDefaultMobileThemeVariables } from "../src/lib/mobileTheme.test-support"; describe("generate mobile Uniwind themes", () => { it("keeps the committed outputs current", () => { @@ -44,12 +45,15 @@ describe("generate mobile Uniwind themes", () => { } }); - it("generates the default runtime bridge from the authored CSS", () => { - const css = NodeFS.readFileSync(NodePath.resolve(import.meta.dirname, "../global.css"), "utf8"); - const variables = readDefaultThemeVariables(css); + it("keeps the default runtime bridge and generated CSS on the same palette", () => { + const variables = JSON.parse(renderDefaultThemeVariablesJSON()); - expect(variables.light["--color-screen"]).toBe("#f2f2f7"); + expect(variables.light).toEqual(readDefaultMobileThemeVariables("light")); + expect(variables.dark).toEqual(readDefaultMobileThemeVariables("dark")); + expect(variables.light["--color-screen"]).toBe("#fcfcfc"); + expect(variables.light["--color-drawer"]).toBe("#fafafa"); expect(variables.dark["--color-screen"]).toBe("#0a0a0a"); + expect(variables.dark["--color-drawer"]).toBe("#000000"); expect(Object.keys(variables.light)).toEqual(Object.keys(variables.dark)); }); @@ -77,11 +81,11 @@ describe("generate mobile Uniwind themes", () => { ), name, ).toEqual({ - "--color-clerk-page": isDark ? "#0e0e0e" : "#f2f2f7", - "--color-clerk-foreground": isDark ? "#f5f5f5" : "#262626", - "--color-clerk-foreground-muted": isDark ? "#a3a3a3" : "#737373", - "--color-clerk-border": isDark ? "rgba(42, 42, 42, 0.06)" : "rgba(229, 229, 234, 0.06)", - "--color-clerk-danger": isDark ? "#fca5a5" : "#dc2626", + "--color-clerk-page": isDark ? "#0a0a0a" : "#fcfcfc", + "--color-clerk-foreground": isDark ? "#f5f5f5" : "#27272a", + "--color-clerk-foreground-muted": isDark ? "#818181" : "#71717b", + "--color-clerk-border": isDark ? "#191919" : "#e4e4e7", + "--color-clerk-danger": isDark ? "#ff6467" : "#c10007", }); } }); diff --git a/apps/mobile/src/components/AndroidScreenHeader.tsx b/apps/mobile/src/components/AndroidScreenHeader.tsx index 2695eee5f01fe7e7204ad79bb746728d4879bda1..537f628b4b3cb9de653a91ce3e4f03af59c9c7dc 100644 --- a/apps/mobile/src/components/AndroidScreenHeader.tsx +++ b/apps/mobile/src/components/AndroidScreenHeader.tsx @@ -25,7 +25,13 @@ export function AndroidHeaderIconButton(props: { readonly disabled?: boolean; readonly selected?: boolean; }) { - return ; + return ( + + ); } export function AndroidScreenHeader(props: { @@ -65,6 +71,7 @@ export function AndroidScreenHeader(props: { ) : null} @@ -72,7 +79,7 @@ export function AndroidScreenHeader(props: { {props.leading} - + {props.title} {props.subtitle ? ( @@ -114,6 +121,7 @@ export function AndroidScreenHeader(props: { )} diff --git a/apps/mobile/src/components/AppText.tsx b/apps/mobile/src/components/AppText.tsx index 805cdb66a3b42514e4195e64ff4b30a16e50e43b..6f96f42469538da139cdd151888130a6974b54bb 100644 --- a/apps/mobile/src/components/AppText.tsx +++ b/apps/mobile/src/components/AppText.tsx @@ -18,7 +18,7 @@ export function AppText({ className, ...props }: AppTextProps) { return ( ); @@ -42,13 +42,9 @@ export function AppTextInput({ className, ref, ...props }: AppTextInputProps) { className, )} placeholderTextColorClassName="accent-placeholder" - selectionColorClassName={ - Platform.OS === "android" ? "accent-primary/32" : "accent-foreground-secondary" - } - cursorColorClassName={ - Platform.OS === "android" ? "accent-primary" : "accent-foreground-secondary" - } - selectionHandleColorClassName={Platform.OS === "android" ? "accent-primary" : undefined} + selectionColorClassName={"accent-focus/32"} + cursorColorClassName={"accent-focus"} + selectionHandleColorClassName={Platform.OS === "android" ? "accent-focus" : undefined} {...props} /> ); diff --git a/apps/mobile/src/components/ComposerContextSheet.tsx b/apps/mobile/src/components/ComposerContextSheet.tsx index 9fd307c9f520dedfd06d43cb64bb0db440c4d403..9bdc10dced99d1d0471b542e6f80aff74d187de1 100644 --- a/apps/mobile/src/components/ComposerContextSheet.tsx +++ b/apps/mobile/src/components/ComposerContextSheet.tsx @@ -187,11 +187,9 @@ export function ComposerContextSheet(props: { onRequestClose={props.onClose} > {Platform.OS === "android" ? ( - + Opening document… diff --git a/apps/mobile/src/components/GlassBackdrop.tsx b/apps/mobile/src/components/GlassBackdrop.tsx index 27104f535dc813d5386507a2faef2b36e69bafb7..ea909f091738b65ed599b7c4484e8533fdc1a1d3 100644 --- a/apps/mobile/src/components/GlassBackdrop.tsx +++ b/apps/mobile/src/components/GlassBackdrop.tsx @@ -6,12 +6,13 @@ import { themeColorWithAlpha } from "../lib/mobileTheme"; /** Frosted backdrop for containers that clip their children to their shape. */ export function GlassBackdrop(props: { readonly fallbackColor?: ColorValue }) { - const { themeAppearance } = useAppearancePreferences(); + const { themeAppearance, themeVariables } = useAppearancePreferences(); const supportsBlur = Platform.OS === "ios"; - const colorStyle = - props.fallbackColor === undefined - ? undefined - : { backgroundColor: themeColorWithAlpha(String(props.fallbackColor), 1) }; + const color = props.fallbackColor ?? themeVariables["--color-glass-fallback"]; + const colorStyle = { + backgroundColor: + supportsBlur || typeof color !== "string" ? color : themeColorWithAlpha(color, 1), + }; return ( <> @@ -25,11 +26,8 @@ export function GlassBackdrop(props: { readonly fallbackColor?: ColorValue }) { ) : null} ); diff --git a/apps/mobile/src/components/GlassSurface.tsx b/apps/mobile/src/components/GlassSurface.tsx index bfbfff2c66cce736ee3c6e87b58188b54228523f..4d899f18a4a0a18309ca785055a8edf4f3eec27b 100644 --- a/apps/mobile/src/components/GlassSurface.tsx +++ b/apps/mobile/src/components/GlassSurface.tsx @@ -1,16 +1,10 @@ import { GlassView, isGlassEffectAPIAvailable } from "expo-glass-effect"; import type { ReactNode, Ref } from "react"; -import { - Platform, - useColorScheme, - View, - type ColorValue, - type ViewProps, - type ViewStyle, -} from "react-native"; +import { Platform, View, type ColorValue, type ViewProps, type ViewStyle } from "react-native"; import { withUniwind } from "uniwind"; import { cn } from "../lib/cn"; +import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider"; import { GlassBackdrop } from "./GlassBackdrop"; // Explicit mappings keep the native glassEffectStyle enum out of style-array conversion. @@ -45,7 +39,8 @@ export function GlassSurface({ style, ...props }: GlassSurfaceProps) { - const isDarkMode = useColorScheme() === "dark"; + const { themeAppearance } = useAppearancePreferences(); + const isDarkMode = themeAppearance === "dark"; const supportsGlass = Platform.OS === "ios" && isGlassEffectAPIAvailable(); const hasShadow = chrome !== "none" && Platform.OS !== "android"; const surfaceStyle: ViewStyle = { diff --git a/apps/mobile/src/components/MaterialButton.android.tsx b/apps/mobile/src/components/MaterialButton.android.tsx index b5a8417fc79984e81579ea092ce9a0f5147c19e3..f2df6464f1037feceaca1141f1450e9c5c9c09d0 100644 --- a/apps/mobile/src/components/MaterialButton.android.tsx +++ b/apps/mobile/src/components/MaterialButton.android.tsx @@ -35,7 +35,7 @@ export function MaterialButton(props: MaterialButtonProps) { : tone === "danger" ? colors["--color-danger-foreground"] : tone === "text" - ? colors["--color-primary"] + ? colors["--color-primary-text"] : colors["--color-secondary-foreground"]; return ( - {props.label} + + {props.label} + ); } diff --git a/apps/mobile/src/components/MaterialConfirmDialog.android.tsx b/apps/mobile/src/components/MaterialConfirmDialog.android.tsx index 3e65d7185eccac26e98fa4df1469485a992e8a23..35057ce10f5f80cf73bb0142b856dd0afccc3986 100644 --- a/apps/mobile/src/components/MaterialConfirmDialog.android.tsx +++ b/apps/mobile/src/components/MaterialConfirmDialog.android.tsx @@ -58,9 +58,9 @@ export function MaterialConfirmDialog(props: MaterialConfirmDialogProps) { colors={{ focusedTextColor: colors["--color-foreground"], unfocusedTextColor: colors["--color-foreground"], - focusedIndicatorColor: colors["--color-primary"], + focusedIndicatorColor: colors["--color-focus"], unfocusedIndicatorColor: colors["--color-border"], - cursorColor: colors["--color-primary"], + cursorColor: colors["--color-focus"], }} > @@ -74,7 +74,10 @@ export function MaterialConfirmDialog(props: MaterialConfirmDialogProps) { ) : null} - + {props.request.cancelText ?? "Cancel"} @@ -84,7 +87,9 @@ export function MaterialConfirmDialog(props: MaterialConfirmDialogProps) { enabled={!props.confirmDisabled} colors={{ contentColor: - colors[props.request.destructive ? "--color-danger" : "--color-primary"], + colors[ + props.request.destructive ? "--color-danger-foreground" : "--color-primary-text" + ], }} > {props.request.confirmText} diff --git a/apps/mobile/src/components/MaterialFloatingActionButton.android.tsx b/apps/mobile/src/components/MaterialFloatingActionButton.android.tsx index 3978712683c095ed9850fa259dcdb8ee8fbe26db..2882d0d91ec0fb0357316253ae0df0444274562c 100644 --- a/apps/mobile/src/components/MaterialFloatingActionButton.android.tsx +++ b/apps/mobile/src/components/MaterialFloatingActionButton.android.tsx @@ -25,9 +25,9 @@ export function MaterialFloatingActionButton(props: { const { themeAppearance, themeVariables: colors } = useAppearancePreferences(); const typography = useScaledTextRole("footnote"); const primary = props.tone === "primary"; - const containerColor = colors[primary ? "--color-primary" : "--color-thread-selected"]; + const containerColor = colors[primary ? "--color-primary" : "--color-secondary"]; const contentColor = - colors[primary ? "--color-primary-foreground" : "--color-thread-selected-foreground"]; + colors[primary ? "--color-primary-foreground" : "--color-secondary-foreground"]; const Component = props.variant === "extended" ? ExtendedFloatingActionButton @@ -76,9 +76,7 @@ export function MaterialFloatingActionButton(props: { diff --git a/apps/mobile/src/components/MaterialFloatingActionButton.tsx b/apps/mobile/src/components/MaterialFloatingActionButton.tsx index eeed5fd1d138bd7e41d046c7ccde02eca1504ea1..53230804a4e55657f6a6bcc71139f09f736b4935 100644 --- a/apps/mobile/src/components/MaterialFloatingActionButton.tsx +++ b/apps/mobile/src/components/MaterialFloatingActionButton.tsx @@ -15,7 +15,7 @@ export function MaterialFloatingActionButton( onPress={props.onPress} className={cn( "min-h-14 min-w-14 flex-row items-center justify-center gap-2 rounded-2xl px-4", - props.tone === "primary" ? "bg-primary" : "bg-thread-selected", + props.tone === "primary" ? "bg-primary" : "bg-secondary", props.className, )} style={props.style} @@ -24,18 +24,14 @@ export function MaterialFloatingActionButton( name={props.icon} size={24} tintColorClassName={ - props.tone === "primary" - ? "accent-primary-foreground" - : "accent-thread-selected-foreground" + props.tone === "primary" ? "accent-primary-foreground" : "accent-secondary-foreground" } /> {props.variant === "extended" && props.expanded !== false ? ( {props.label} diff --git a/apps/mobile/src/components/MaterialIconButton.android.tsx b/apps/mobile/src/components/MaterialIconButton.android.tsx index 9cc6f5dc6ce000f5b7887d5665d3250061374845..21284249f79d1538bab26eb16031e3be677e60f2 100644 --- a/apps/mobile/src/components/MaterialIconButton.android.tsx +++ b/apps/mobile/src/components/MaterialIconButton.android.tsx @@ -17,6 +17,7 @@ export function MaterialIconButton(props: { readonly disabled?: boolean; readonly selected?: boolean; readonly variant?: "standard" | "primary" | "tonal" | "danger"; + readonly tintColorClassName?: string; }) { const { themeAppearance, themeVariables: colors } = useAppearancePreferences(); const variant = props.variant ?? "standard"; @@ -40,7 +41,7 @@ export function MaterialIconButton(props: { ? "accent-danger-foreground" : variant === "tonal" ? "accent-secondary-foreground" - : "accent-foreground"; + : (props.tintColorClassName ?? "accent-foreground"); return ( - + ); } diff --git a/apps/mobile/src/components/MaterialSearchField.tsx b/apps/mobile/src/components/MaterialSearchField.tsx index 5ed3945039d1f5ec314502463d94dd30cd237c46..ab96440f5f095e072b6cc66497d0146359d94e53 100644 --- a/apps/mobile/src/components/MaterialSearchField.tsx +++ b/apps/mobile/src/components/MaterialSearchField.tsx @@ -30,9 +30,9 @@ export function MaterialSearchField({ returnKeyType="search" placeholder={placeholder} placeholderTextColorClassName="accent-placeholder" - selectionColorClassName="accent-primary/32" - cursorColorClassName="accent-primary" - selectionHandleColorClassName="accent-primary" + selectionColorClassName="accent-focus/32" + cursorColorClassName="accent-focus" + selectionHandleColorClassName="accent-focus" className="min-w-0 flex-1 py-2 font-sans text-base text-foreground" value={value} onChangeText={onChangeText} diff --git a/apps/mobile/src/components/RowPressable.tsx b/apps/mobile/src/components/RowPressable.tsx index bd52fbe74f11fd6029d84aaf82145fb94da9588e..959a1a8aba975ada790fef35baa1e3895b7c4923 100644 --- a/apps/mobile/src/components/RowPressable.tsx +++ b/apps/mobile/src/components/RowPressable.tsx @@ -9,22 +9,24 @@ import { useHoverGesture } from "../lib/useHoverGesture"; export function RowPressable({ children, className, - interactionClassName = "bg-primary", + interactionClassName = "bg-row-hover", + interactionOpacity = 1, ...props }: Omit, "children"> & { readonly children: ReactNode; readonly interactionClassName?: string; + readonly interactionOpacity?: number; }) { const { hovered, hoverGesture } = useHoverGesture(props.disabled ?? false); return ( - {({ pressed }) => ( + {() => ( <> {children} diff --git a/apps/mobile/src/components/ScreenHeader.android.tsx b/apps/mobile/src/components/ScreenHeader.android.tsx index f7b70e695ad90e7bd63924a9f674179d7a63e81b..61a38c3a00c280ef4fba60fb9659f26826c7a9d0 100644 --- a/apps/mobile/src/components/ScreenHeader.android.tsx +++ b/apps/mobile/src/components/ScreenHeader.android.tsx @@ -53,7 +53,7 @@ export function ScreenHeader(props: ScreenHeaderProps) { @@ -95,7 +95,7 @@ export function ScreenHeader(props: ScreenHeaderProps) { @@ -104,7 +104,7 @@ export function ScreenHeader(props: ScreenHeaderProps) { {menuView} diff --git a/apps/mobile/src/components/SegmentedControl.tsx b/apps/mobile/src/components/SegmentedControl.tsx index 607062e0579e6d91f3df00747299fa9db7d92bc3..e1e61cda26dff9b1a92656dc3c6a9210cb0203e3 100644 --- a/apps/mobile/src/components/SegmentedControl.tsx +++ b/apps/mobile/src/components/SegmentedControl.tsx @@ -40,7 +40,7 @@ export function SegmentedControl( layout={LinearTransition.duration(200) .easing(Easing.out(Easing.cubic)) .reduceMotion(ReduceMotion.System)} - className="absolute inset-y-0 rounded-full bg-subtle-strong" + className="absolute inset-y-0 rounded-full bg-secondary" style={{ width: `${100 / props.options.length}%`, start: `${ @@ -70,7 +70,7 @@ export function SegmentedControl( {option.label} diff --git a/apps/mobile/src/features/connection/ConnectionStatusDot.tsx b/apps/mobile/src/features/connection/ConnectionStatusDot.tsx index 43c61249a748761de1b4373c5f4ab63f84e6872e..6c01bc8824ae1b6e985786898e52092932faa0d3 100644 --- a/apps/mobile/src/features/connection/ConnectionStatusDot.tsx +++ b/apps/mobile/src/features/connection/ConnectionStatusDot.tsx @@ -10,10 +10,16 @@ import Animated, { } from "react-native-reanimated"; import type { RemoteClientConnectionState } from "../../lib/connection"; +import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider"; +import { themeColorWithAlpha, type MobileThemeVariables } from "../../lib/mobileTheme"; export type ConnectionStatusDotState = RemoteClientConnectionState; -function statusDotTone(state: ConnectionStatusDotState): { +function statusDotTone( + state: ConnectionStatusDotState, + theme: MobileThemeVariables, + dark: boolean, +): { readonly dotColor: string; readonly haloColor: string; } { @@ -23,25 +29,25 @@ function statusDotTone(state: ConnectionStatusDotState): { case "available": case "unsupported": return { - dotColor: "#9ca3af", - haloColor: "rgba(156,163,175,0.42)", + dotColor: theme["--color-icon-muted"], + haloColor: themeColorWithAlpha(theme["--color-icon-muted"], 0.42), }; case "connected": return { - dotColor: "#34d399", - haloColor: "rgba(52,211,153,0.48)", + dotColor: dark ? "#34d399" : "#059669", + haloColor: themeColorWithAlpha(dark ? "#34d399" : "#059669", 0.48), }; case "connecting": case "reconnecting": return { - dotColor: "#f59e0b", - haloColor: "rgba(245,158,11,0.5)", + dotColor: theme["--color-warning-foreground"], + haloColor: themeColorWithAlpha(theme["--color-warning-foreground"], 0.5), }; case "offline": case "error": return { - dotColor: "#ef4444", - haloColor: "rgba(239,68,68,0.48)", + dotColor: theme["--color-danger-foreground"], + haloColor: themeColorWithAlpha(theme["--color-danger-foreground"], 0.48), }; } } @@ -78,7 +84,8 @@ export function ConnectionStatusDot(props: { readonly size?: number; }) { const pulseProgress = usePulseAnimation(props.pulse); - const tone = statusDotTone(props.state); + const { themeAppearance, themeVariables } = useAppearancePreferences(); + const tone = statusDotTone(props.state, themeVariables, themeAppearance === "dark"); const dotSize = props.size ?? 10; const haloSize = dotSize + 4; const containerSize = haloSize + 4; diff --git a/apps/mobile/src/features/connection/connectionTone.ts b/apps/mobile/src/features/connection/connectionTone.ts index 05a654085675438732f6fe87a4e5a2f95a3b4c09..a2d85096e35125bf2d338357e9aa7b7688c7f56c 100644 --- a/apps/mobile/src/features/connection/connectionTone.ts +++ b/apps/mobile/src/features/connection/connectionTone.ts @@ -18,8 +18,8 @@ export function connectionTone(state: RemoteClientConnectionState): StatusTone { case "connecting": return { label: "Connecting", - pillClassName: "bg-primary/10", - textClassName: "text-foreground-secondary", + pillClassName: "bg-update", + textClassName: "text-update-foreground", }; case "unsupported": return { diff --git a/apps/mobile/src/features/devices/DevicePreviewRouteScreen.tsx b/apps/mobile/src/features/devices/DevicePreviewRouteScreen.tsx index 2d85a71f14707c159bb72e7bfdb19369051e4bca..82b2b90fecad149decea06c35a9fafaac83e567a 100644 --- a/apps/mobile/src/features/devices/DevicePreviewRouteScreen.tsx +++ b/apps/mobile/src/features/devices/DevicePreviewRouteScreen.tsx @@ -231,10 +231,10 @@ function DevicePreviewScreen({ - Retry + Retry ) : focused && foreground ? ( @@ -278,7 +278,9 @@ function OpenDevicePreview({ background: themeVariables["--color-sheet-solid"], foreground: themeVariables["--color-foreground"], muted: themeVariables["--color-foreground-muted"], - buttonBackground: themeVariables["--color-subtle"], + buttonBackground: themeVariables["--color-secondary"], + buttonForeground: themeVariables["--color-secondary-foreground"], + buttonBorder: themeVariables["--color-secondary-border"], }} onUnauthorized={onUnauthorized} onInputConnected={onInputConnected} @@ -292,10 +294,10 @@ function OpenDevicePreview({ - Retry + Retry ) : ( diff --git a/apps/mobile/src/features/devices/device-stream-document.ts b/apps/mobile/src/features/devices/device-stream-document.ts index a919e43218c31f6e36a4157dd152e562d6b39ddc..f3b753d5e99c49a81adb22a29b88c038861c8bc2 100644 --- a/apps/mobile/src/features/devices/device-stream-document.ts +++ b/apps/mobile/src/features/devices/device-stream-document.ts @@ -10,6 +10,8 @@ export interface DeviceStreamConfiguration { readonly foreground: string; readonly muted: string; readonly buttonBackground: string; + readonly buttonForeground: string; + readonly buttonBorder: string; }; } diff --git a/apps/mobile/src/features/devices/device-stream.browser.ts b/apps/mobile/src/features/devices/device-stream.browser.ts index 727ea3e8fceb88ba272cb30cf57c4cc79bbfe83d..efa81d9a043a6440807ee9fbb16fddc388588ede 100644 --- a/apps/mobile/src/features/devices/device-stream.browser.ts +++ b/apps/mobile/src/features/devices/device-stream.browser.ts @@ -90,9 +90,9 @@ export function start(configuration: DeviceStreamConfiguration) { Object.assign(retry.style, { padding: "12px 24px", borderRadius: "20px", - border: "0", + border: `1px solid ${colors.buttonBorder}`, background: colors.buttonBackground, - color: colors.foreground, + color: colors.buttonForeground, font: "inherit", display: "none", }); diff --git a/apps/mobile/src/features/files/SourceFileSurface.tsx b/apps/mobile/src/features/files/SourceFileSurface.tsx index 7618497258391bbec100b8682fefebe8e0103471..c7c2310ba936f057dfab3ed50b8e1f7e309ee3a0 100644 --- a/apps/mobile/src/features/files/SourceFileSurface.tsx +++ b/apps/mobile/src/features/files/SourceFileSurface.tsx @@ -74,7 +74,7 @@ const HighlightedSourceLine = memo(function HighlightedSourceLine(props: { void; }) { + const foregroundClassName = props.selected + ? "text-thread-selected-foreground" + : "text-foreground"; + const mutedForegroundClassName = props.selected + ? "text-thread-selected-foreground-muted" + : "text-foreground-muted"; return ( - + - + {props.item.title} {props.searchMatch ? ( - + ) : props.item.detail ? ( - + {props.item.detail} ) : null} {props.index < 9 ? ( - + ⌘{props.index + 1} ) : null} @@ -117,6 +137,7 @@ export function CommandPalette(props: { readonly onCommand: (command: HardwareKeyboardCommand) => void; }) { const navigation = useNavigation(); + const { themeVariables } = useAppearancePreferences(); const { selectThread } = useAdaptiveWorkspaceLayout(); const runCommand = props.onCommand; const projects = useProjects(); @@ -392,14 +413,15 @@ export function CommandPalette(props: { className="flex-1 items-center justify-center p-4" > close()} /> diff --git a/apps/mobile/src/features/review/ReviewSheet.tsx b/apps/mobile/src/features/review/ReviewSheet.tsx index cb55570f9116f5e3aafdc1411210faeafdd41eb3..2fac5376e5b1fc4f50d095d4363a20fa7e3e575a 100644 --- a/apps/mobile/src/features/review/ReviewSheet.tsx +++ b/apps/mobile/src/features/review/ReviewSheet.tsx @@ -262,7 +262,7 @@ const ReviewFileNavigatorRow = memo(function ReviewFileNavigatorRow(props: { Platform.OS === "android" ? cn( "mt-1 min-h-12 justify-center rounded-[20px] px-3 py-2 active:bg-subtle", - selected && "bg-thread-selected", + selected && "bg-subtle-strong", ) : selected ? "mt-1 min-h-12 justify-center rounded-xl bg-subtle-strong px-3 py-2" @@ -281,8 +281,10 @@ const ReviewFileNavigatorRow = memo(function ReviewFileNavigatorRow(props: { {file.path} - +{file.additions} - -{file.deletions} + + +{file.additions} + + -{file.deletions} ); diff --git a/apps/mobile/src/features/review/nativeReviewDiffAdapter.test.ts b/apps/mobile/src/features/review/nativeReviewDiffAdapter.test.ts index 21c86a2beab493e5e1d0f1b60deedc36ef525e81..6f55fef7c2a7c85cfae2aa3cc8704fa6e9414ea2 100644 --- a/apps/mobile/src/features/review/nativeReviewDiffAdapter.test.ts +++ b/apps/mobile/src/features/review/nativeReviewDiffAdapter.test.ts @@ -97,6 +97,19 @@ function appTheme(themeId: MobileThemeId, appearance: MobileThemeAppearance) { : getMobileThemeVariables(themeId, appearance); } +function contrastRatio(first: string, second: string): number { + const luminance = (hex: string) => { + const [red, green, blue] = [1, 3, 5].map((offset) => { + const channel = Number.parseInt(hex.slice(offset, offset + 2), 16) / 255; + return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4; + }); + return 0.2126 * red! + 0.7152 * green! + 0.0722 * blue!; + }; + const a = luminance(first); + const b = luminance(second); + return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05); +} + describe("getCachedNativeReviewDiffData", () => { it.each([true, false])( "preserves available diff rows before a notice (has excerpt: %s)", @@ -251,6 +264,10 @@ describe("createNativeReviewDiffTheme", () => { for (const color of Object.values(theme)) { expect(color, `${themeId}/${appearance}`).toMatch(/^#[\da-f]{6}$/i); } + expect( + contrastRatio(theme.hunkText, theme.hunkBackground), + `${themeId}/${appearance} hunk text`, + ).toBeGreaterThanOrEqual(4.5); } } }); @@ -261,7 +278,7 @@ describe("createNativeReviewDiffTheme", () => { const variables = { ...appTheme("material-you", appearance), "--color-screen": "#101214FF", - "--color-sheet": "#20222480", + "--color-md-code-bg": "#20222480", "--color-md-code-text": "#E3E2E6FF", "--color-foreground-muted": "#C7C5D080", "--color-border": "#44464F80", @@ -273,7 +290,7 @@ describe("createNativeReviewDiffTheme", () => { expect(theme.text).toBe("#e3e2e6"); expect(theme.mutedText).toBe("#707076"); expect(theme.border).toBe("#2e3036"); - expect(theme.hunkText).toBe("#a8c7fa"); + expect(contrastRatio(theme.hunkText, theme.hunkBackground)).toBeGreaterThanOrEqual(4.5); for (const color of Object.values(theme)) { expect(color).toMatch(/^#[\da-f]{6}$/i); } diff --git a/apps/mobile/src/features/review/nativeReviewDiffAdapter.ts b/apps/mobile/src/features/review/nativeReviewDiffAdapter.ts index b35d561a249d3b60b2b2df0ffc535ebf95ba9044..8bea04c524dd37cc11f9d1d47cc87bce39624ddd 100644 --- a/apps/mobile/src/features/review/nativeReviewDiffAdapter.ts +++ b/apps/mobile/src/features/review/nativeReviewDiffAdapter.ts @@ -177,20 +177,19 @@ export function createNativeReviewDiffTheme( appTheme["--color-screen"], scheme === "dark" ? "#000000" : "#ffffff", ); - const background = opaqueNativeHexColor(appTheme["--color-sheet"], screen); + const background = opaqueNativeHexColor(appTheme["--color-md-code-bg"], screen); const nativeColor = (color: string) => opaqueNativeHexColor(color, background); if (scheme === "dark") { return { - // Match the app surface (--color-sheet) so code views blend with the rest of - // the app instead of using a distinct code-editor background. + // Code surfaces share the desktop palette rather than the sheet behind them. background, text: nativeColor(appTheme["--color-md-code-text"]), mutedText: nativeColor(appTheme["--color-foreground-muted"]), headerBackground: background, border: nativeColor(appTheme["--color-border"]), hunkBackground: nativeColor(appTheme["--color-subtle-strong"]), - hunkText: nativeColor(appTheme["--color-primary"]), + hunkText: nativeColor(appTheme["--color-foreground"]), addBackground: "#0d2f28", deleteBackground: "#391415", addBar: "#00cab1", @@ -201,15 +200,13 @@ export function createNativeReviewDiffTheme( } return { - // Match the app surface (--color-sheet) so code views blend with the rest of the - // app instead of using a distinct code-editor background. background, text: nativeColor(appTheme["--color-md-code-text"]), mutedText: nativeColor(appTheme["--color-foreground-muted"]), headerBackground: background, border: nativeColor(appTheme["--color-border"]), hunkBackground: nativeColor(appTheme["--color-subtle-strong"]), - hunkText: nativeColor(appTheme["--color-primary"]), + hunkText: nativeColor(appTheme["--color-foreground"]), addBackground: "#e5f8f5", deleteBackground: "#ffe6e7", addBar: "#00cab1", diff --git a/apps/mobile/src/features/settings/SettingsOpenSourceLicensesRouteScreen.tsx b/apps/mobile/src/features/settings/SettingsOpenSourceLicensesRouteScreen.tsx index efeca40e0ff1f002ffa21c05a33c4d33a8f8a138..6ab20d03854f8224ab43dc32f9b64f13d42907c4 100644 --- a/apps/mobile/src/features/settings/SettingsOpenSourceLicensesRouteScreen.tsx +++ b/apps/mobile/src/features/settings/SettingsOpenSourceLicensesRouteScreen.tsx @@ -44,7 +44,7 @@ function LicenseRow(props: { accessibilityLabel={`${props.entry.name}, ${props.entry.license}`} accessibilityRole="button" onPress={props.onPress} - className="border-b border-border bg-card px-5 py-4 active:bg-card-alt" + className="border-b border-border bg-grouped-card px-5 py-4 active:bg-card-alt" > @@ -235,11 +235,11 @@ export function SettingsOpenSourceLicenseRouteScreen({ route }: LicenseDetailPro onPress={() => void Linking.openURL(sourceUrl)} className="min-h-12 flex-row items-center gap-2 self-start py-2 active:opacity-60" > - Project source + Project source @@ -247,7 +247,7 @@ export function SettingsOpenSourceLicenseRouteScreen({ route }: LicenseDetailPro ) : null} - + {entry.noticeText} diff --git a/apps/mobile/src/features/settings/appearance/sections/ThemeAppearanceSection.tsx b/apps/mobile/src/features/settings/appearance/sections/ThemeAppearanceSection.tsx index 788d04b047bac4183f6b79af01c893e4432529de..b3b76bda3a181a2a0b23de7d6fe94666f2cde80f 100644 --- a/apps/mobile/src/features/settings/appearance/sections/ThemeAppearanceSection.tsx +++ b/apps/mobile/src/features/settings/appearance/sections/ThemeAppearanceSection.tsx @@ -151,7 +151,7 @@ function ThemeCard(props: { ); return ( - + @@ -78,7 +78,7 @@ export function AutoSettleDaysField(props: AutoSettleDaysFieldProps) {