From 91723a8175e8b60a508b583e8d0decb58bb24e99 Mon Sep 17 00:00:00 2001 From: Logan Sack <12778322+logancsack@users.noreply.github.com> Date: Thu, 1 Oct 2026 00:58:29 +0000 Subject: [PATCH 1/2] feat(web): Prism, a chrome-and-glass theme MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A new built-in theme in the spirit of liquid chrome on black: an ink-black (or pearl) canvas lit by iridescent refractions, silver controls, an electric-blue accent, and glassmorphism throughout. The palette itself stays opaque so the theme editor, exports, and mobile read it like any other theme; the web stylesheet adds the glass: the body paints one static scene (blue-to-violet sweep, gold edge, chrome ribbons, a few sparks) and every pane over it is a translucent tint of its palette color, with blur limited to the sidebar, the thread toolbar, the composer, and the popups that already carry it. The wordmark is set in chrome, and browsers without backdrop-filter fall back to the opaque palette. Also carried: the boot-splash copy in index.html, the maintainer card in Settings → Appearance, and the mobile theme list in the docs. Co-Authored-By: Claude Fable 5.1 --- apps/web/index.html | 15 + .../src/components/settings/ThemeSettings.tsx | 2 + apps/web/src/index.css | 276 +++++++++++++++++- apps/web/src/themeBoot.test.ts | 10 +- apps/web/src/themePalette.ts | 13 +- docs/user/mobile-appearance.md | 6 +- packages/shared/src/themePalettes.ts | 136 ++++++++- 7 files changed, 450 insertions(+), 8 deletions(-) diff --git a/apps/web/index.html b/apps/web/index.html index 8aef3a4286f2..2567309c41bd 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -121,6 +121,20 @@ chrome: "oklch(0.225975 0.031062 293.741)", }, }, + prism: { + light: { + background: "oklch(0.975 0.004 255)", + foreground: "oklch(0.24 0.014 270)", + accent: "oklch(0.58 0.19 262)", + chrome: "oklch(0.965 0.005 255)", + }, + dark: { + background: "oklch(0.145 0.012 272)", + foreground: "oklch(0.955 0.005 250)", + accent: "oklch(0.72 0.145 250)", + chrome: "oklch(0.12 0.01 272)", + }, + }, }; // Keep the built-in mode list in sync with the runtime so the selected // T3 Chat palette is visible before React has mounted. @@ -139,6 +153,7 @@ "ocean", "ember", "iris", + "prism", "t3-chat-dark", "t3-grove", "t3-ocean", diff --git a/apps/web/src/components/settings/ThemeSettings.tsx b/apps/web/src/components/settings/ThemeSettings.tsx index 51a6ca6e1681..5b42dc45e989 100644 --- a/apps/web/src/components/settings/ThemeSettings.tsx +++ b/apps/web/src/components/settings/ThemeSettings.tsx @@ -28,6 +28,7 @@ import { GROVE_THEME, IRIS_THEME, OCEAN_THEME, + PRISM_THEME, } from "../../themePalette"; import { AlertDialog, @@ -61,6 +62,7 @@ const MAINTAINER_THEMES: ReadonlyArray = [ OCEAN_THEME, EMBER_THEME, IRIS_THEME, + PRISM_THEME, ]; function collectionVariantLabels(themes: ReadonlyArray): ReadonlyArray { diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 547f9109c440..b0bdd6aa0d41 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -716,7 +716,34 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil } } - :is(html[data-theme-id="t3-chat"], html[data-theme-id="ocean"], html[data-theme-id="iris"]) { + /* Prism draws the art in polished chrome, with its gold refraction as the + warm note. */ + html[data-theme-id="prism"] { + --stage-art-top: oklch(0.8 0.035 245); + --stage-art-mid: oklch(0.56 0.055 255); + --stage-art-bottom: oklch(0.31 0.035 265); + --stage-art-highlight: oklch(0.98 0.006 250); + --stage-art-secondary: oklch(0.82 0.09 230); + --stage-art-tertiary: oklch(0.84 0.12 82); + --stage-art-line: oklch(0.975 0.008 250); + + @variant dark { + --stage-art-top: oklch(0.6 0.045 250); + --stage-art-mid: oklch(0.42 0.045 258); + --stage-art-bottom: oklch(0.24 0.03 268); + --stage-art-highlight: oklch(0.95 0.012 248); + --stage-art-secondary: oklch(0.74 0.1 232); + --stage-art-tertiary: oklch(0.78 0.13 80); + --stage-art-line: oklch(0.96 0.01 250); + } + } + + :is( + html[data-theme-id="t3-chat"], + html[data-theme-id="ocean"], + html[data-theme-id="iris"], + html[data-theme-id="prism"] + ) { --stage-night-top: color-mix(in oklch, var(--stage-art-top) 38%, var(--stage-night-base-top)); --stage-night-mid: color-mix(in oklch, var(--stage-art-mid) 38%, var(--stage-night-base-mid)); --stage-night-bottom: color-mix( @@ -743,7 +770,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil html[data-theme-id="grove"], html[data-theme-id="ocean"], html[data-theme-id="ember"], - html[data-theme-id="iris"] + html[data-theme-id="iris"], + html[data-theme-id="prism"] ) { --stage-art-celeste-highlight: var(--stage-art-highlight); --stage-art-celeste-secondary: var(--stage-art-secondary); @@ -1357,6 +1385,250 @@ html[data-theme-id="t3-chat"] [data-app-sidebar] { } } +/* Prism: liquid chrome and glass. The palette stays opaque so the editor, + exports, and mobile read it like any other theme; the glass is added here. + The body paints one static scene (iridescent glows, a chrome ribbon, a few + sparks) and every pane over it is a translucent tint of its palette color, + so the scene shows through. Blur stays limited to the panes that float over + other content: the sidebar, the thread toolbar, the composer, and the popups + that already carry it. */ +html[data-theme-id="prism"] { + /* The ink every hairline, fill, and highlight is mixed from: graphite on + the pearl canvas, white on the ink-black one. */ + --prism-ink: oklch(0.22 0.02 268); + --prism-line: color-mix(in srgb, var(--prism-ink) 10%, transparent); + --prism-line-strong: color-mix(in srgb, var(--prism-ink) 16%, transparent); + --prism-fill: color-mix(in srgb, var(--prism-ink) 5%, transparent); + --prism-fill-hover: color-mix(in srgb, var(--prism-ink) 8%, transparent); + --prism-fill-active: color-mix(in srgb, var(--prism-ink) 11%, transparent); + --prism-highlight: oklch(1 0 0 / 85%); + /* The canvas stacks two or three deep (route, view, column), so it stays + thin for the scene to come through. */ + --prism-canvas-opacity: 34%; + --prism-pane-opacity: 56%; + --prism-popup-opacity: 82%; + --prism-shadow: 0 24px 64px -28px oklch(0.25 0.03 268 / 40%); + --prism-chrome-text: linear-gradient( + 180deg, + oklch(0.52 0.02 265) 0%, + oklch(0.24 0.02 268) 44%, + oklch(0.58 0.02 262) 52%, + oklch(0.28 0.02 268) 100% + ); + /* The scene: a blue-to-violet sweep, gold at the right edge, cyan under the + sidebar, a lit spot behind the composer, and two chrome ribbons with + iridescent edges crossing the middle. Static, so it paints once. */ + --prism-scene: + radial-gradient(75% 60% at 26% -12%, oklch(0.72 0.15 262 / 50%), transparent 62%), + radial-gradient(60% 46% at 102% 18%, oklch(0.9 0.11 85 / 60%), transparent 62%), + radial-gradient(64% 54% at 80% 112%, oklch(0.78 0.13 305 / 50%), transparent 62%), + radial-gradient(52% 42% at 6% 108%, oklch(0.88 0.08 220 / 55%), transparent 62%), + radial-gradient(44% 34% at 50% 102%, oklch(0.75 0.13 258 / 30%), transparent 65%), + linear-gradient( + 112deg, + transparent 32%, + oklch(0.78 0.12 262 / 30%) 40%, + oklch(1 0 0 / 95%) 45%, + oklch(0.92 0.1 85 / 35%) 49%, + transparent 58% + ), + linear-gradient( + -28deg, + transparent 54%, + oklch(0.8 0.12 305 / 28%) 62%, + oklch(1 0 0 / 85%) 66%, + oklch(0.86 0.09 220 / 30%) 70%, + transparent 78% + ); + + @variant dark { + --prism-ink: oklch(1 0 0); + --prism-highlight: oklch(1 0 0 / 14%); + --prism-canvas-opacity: 20%; + --prism-pane-opacity: 58%; + --prism-popup-opacity: 80%; + --prism-shadow: 0 28px 72px -28px oklch(0 0 0 / 85%); + --prism-chrome-text: linear-gradient( + 180deg, + oklch(1 0 0) 0%, + oklch(0.86 0.012 250) 42%, + oklch(0.64 0.02 255) 50%, + oklch(0.94 0.01 250) 68%, + oklch(1 0 0) 100% + ); + --prism-scene: + radial-gradient(75% 60% at 26% -12%, oklch(0.66 0.2 262 / 78%), transparent 62%), + radial-gradient(60% 46% at 102% 18%, oklch(0.86 0.14 82 / 55%), transparent 62%), + radial-gradient(64% 54% at 80% 112%, oklch(0.6 0.22 302 / 70%), transparent 62%), + radial-gradient(52% 42% at 6% 108%, oklch(0.8 0.13 222 / 58%), transparent 62%), + radial-gradient(44% 34% at 50% 102%, oklch(0.64 0.18 258 / 40%), transparent 65%), + linear-gradient( + 112deg, + transparent 32%, + oklch(0.72 0.18 262 / 14%) 40%, + oklch(1 0 0 / 20%) 45%, + oklch(0.92 0.12 82 / 14%) 49%, + transparent 58% + ), + linear-gradient( + -28deg, + transparent 54%, + oklch(0.72 0.2 302 / 12%) 62%, + oklch(1 0 0 / 16%) 66%, + oklch(0.82 0.12 222 / 12%) 70%, + transparent 78% + ), + radial-gradient(2px 2px at 84% 10%, oklch(1 0 0 / 85%), transparent), + radial-gradient(1.5px 1.5px at 18% 84%, oklch(1 0 0 / 75%), transparent), + radial-gradient(2px 2px at 64% 72%, oklch(0.95 0.03 250 / 65%), transparent), + radial-gradient(1.5px 1.5px at 92% 58%, oklch(0.9 0.05 80 / 65%), transparent), + radial-gradient(1.5px 1.5px at 40% 22%, oklch(1 0 0 / 55%), transparent); + } + + /* `:root` matches the same element; it only adds the specificity needed to + outrank the generic theme mapping and the root defaults above. */ + &:root { + --glass-blur: 24px; + --glass-saturation: 1.3; + --app-scrollbar-thumb: color-mix(in srgb, var(--prism-ink) 12%, transparent); + --app-scrollbar-thumb-hover: color-mix(in srgb, var(--prism-ink) 18%, transparent); + --background: color-mix( + in srgb, + var(--app-theme-canvas) var(--prism-canvas-opacity), + transparent + ); + --toolbar-background: color-mix( + in srgb, + var(--app-theme-toolbar) var(--prism-pane-opacity), + transparent + ); + --toolbar-border: var(--prism-line); + --toolbar-control: var(--prism-fill); + --toolbar-control-hover: var(--prism-fill-active); + --surface-raised: color-mix(in srgb, var(--app-theme-surface-raised) 70%, transparent); + --card: color-mix(in srgb, var(--app-theme-surface) var(--prism-pane-opacity), transparent); + --popover: color-mix( + in srgb, + var(--app-theme-surface-overlay) var(--prism-popup-opacity), + transparent + ); + --secondary: var(--prism-fill); + --muted: var(--prism-fill); + --accent: var(--prism-fill-hover); + --message-surface: var(--prism-fill-hover); + --border: var(--prism-line); + --input: var(--prism-line-strong); + --sidebar: color-mix(in srgb, var(--app-theme-sidebar) var(--prism-pane-opacity), transparent); + --sidebar-control-surface: var(--prism-fill); + --sidebar-row-hover: var(--prism-fill); + --sidebar-row-active: var(--prism-fill-hover); + --sidebar-row-selected: var(--prism-fill-active); + --sidebar-border: var(--prism-line); + --sidebar-stage-fade: var(--sidebar); + --code-background: color-mix(in srgb, var(--app-theme-code-background) 88%, transparent); + } +} + +/* The scene replaces the body grain: glass wants a clean backdrop. */ +html[data-theme-id="prism"] body { + background-image: var(--prism-scene); + background-repeat: no-repeat; + background-size: 100% 100%; +} + +/* The sidebar owns a local palette (above); give it the same glass. The + container is the pane that blurs, so its inner wrapper stops painting a + second tint over it. */ +html[data-theme-id="prism"] [data-app-sidebar] { + --background: color-mix( + in srgb, + var(--app-theme-canvas) var(--prism-canvas-opacity), + transparent + ); + --card: color-mix(in srgb, var(--app-theme-surface) var(--prism-pane-opacity), transparent); + --accent: var(--prism-fill-hover); + --muted: var(--prism-fill); + --border: var(--prism-line); + --input: var(--prism-line-strong); + --sidebar: color-mix(in srgb, var(--app-theme-sidebar) var(--prism-pane-opacity), transparent); + --sidebar-control-surface: var(--prism-fill); + --sidebar-row-hover: var(--prism-fill); + --sidebar-row-active: var(--prism-fill-hover); + --sidebar-row-selected: var(--prism-fill-active); + --sidebar-border: var(--prism-line); + --sidebar-stage-fade: var(--sidebar); + border-color: var(--prism-line); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); +} + +html[data-theme-id="prism"] [data-app-sidebar] [data-slot="sidebar-inner"] { + background-color: transparent; +} + +html[data-theme-id="prism"] [data-chat-header] { + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); + box-shadow: inset 0 -1px 0 var(--prism-line); +} + +html[data-theme-id="prism"] [data-slot="composer-shell"] { + --chat-composer-glass-surface: color-mix( + in srgb, + var(--app-theme-surface-raised) 72%, + transparent + ); + --chat-composer-outline: var(--prism-line-strong); + --chat-composer-highlight: var(--prism-highlight); +} + +/* Popups already blur; they take Prism's hairline, specular edge, and a deeper + drop so they lift off the scene. */ +html[data-theme-id="prism"] + :is( + [data-slot="menu-popup"], + [data-slot="select-popup"], + [data-slot="popover-popup"], + [data-slot="dialog-popup"] + ) { + border-color: var(--prism-line-strong); + box-shadow: + inset 0 1px 0 var(--prism-highlight), + var(--prism-shadow); +} + +/* A translucent canvas dims too little behind a dialog; dim with the chrome. */ +html[data-theme-id="prism"] [data-slot="dialog-backdrop"] { + background: color-mix(in srgb, var(--app-theme-chrome) 55%, transparent); +} + +/* The wordmark is set in chrome. */ +html[data-theme-id="prism"] .sidebar-brand > span { + background-image: var(--prism-chrome-text); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +/* Without backdrop support a see-through pane is just a see-through pane: + fall back to the opaque palette. */ +@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { + html[data-theme-id="prism"]:root, + html[data-theme-id="prism"] [data-app-sidebar] { + --background: var(--app-theme-canvas); + --toolbar-background: var(--app-theme-toolbar); + --card: var(--app-theme-surface); + --popover: var(--app-theme-surface-overlay); + --surface-raised: var(--app-theme-surface-raised); + --sidebar: var(--app-theme-sidebar); + --sidebar-stage-fade: var(--app-theme-sidebar); + } + + html[data-theme-id="prism"] [data-app-sidebar] [data-slot="sidebar-inner"] { + background-color: var(--sidebar); + } +} + /* Contrast stays in ordinary custom properties so both Tailwind utilities and global/imperative chrome styles resolve the same adjusted role. Redeclare on the sidebar because it owns a local semantic palette. */ diff --git a/apps/web/src/themeBoot.test.ts b/apps/web/src/themeBoot.test.ts index ae82d184e4c6..bfc86b7b44aa 100644 --- a/apps/web/src/themeBoot.test.ts +++ b/apps/web/src/themeBoot.test.ts @@ -12,6 +12,7 @@ import { EMBER_THEME, GROVE_THEME, IRIS_THEME, + PRISM_THEME, OCEAN_THEME, THEME_APPEARANCE_MODE_STORAGE_KEY, THEME_FOLLOW_SYSTEM_STORAGE_KEY, @@ -342,7 +343,14 @@ describe("index.html boot script", () => { // boot script's hand-maintained copy into a CI-enforced contract: any // palette change breaks this test until the copy in index.html is updated. it("keeps every built-in boot splash in sync with the real palettes", () => { - for (const theme of [T3_CHAT_THEME, GROVE_THEME, OCEAN_THEME, EMBER_THEME, IRIS_THEME]) { + for (const theme of [ + T3_CHAT_THEME, + GROVE_THEME, + OCEAN_THEME, + EMBER_THEME, + IRIS_THEME, + PRISM_THEME, + ]) { // The boot script resolves every built-in from a light base appearance. expect(theme.appearance).toBe("light"); for (const mode of ["light", "dark"] as const) { diff --git a/apps/web/src/themePalette.ts b/apps/web/src/themePalette.ts index 458d4539e270..86c284ce2070 100644 --- a/apps/web/src/themePalette.ts +++ b/apps/web/src/themePalette.ts @@ -8,6 +8,7 @@ import { GROVE_THEME, IRIS_THEME, OCEAN_THEME, + PRISM_THEME, T3_CHAT_THEME, RESERVED_THEME_IDS, THEME_COLOR_ROLES, @@ -18,7 +19,15 @@ import { type ThemeVariants, } from "@t3tools/shared/themePalettes"; -export { EMBER_THEME, GROVE_THEME, IRIS_THEME, OCEAN_THEME, T3_CHAT_THEME, THEME_COLOR_ROLES }; +export { + EMBER_THEME, + GROVE_THEME, + IRIS_THEME, + OCEAN_THEME, + PRISM_THEME, + T3_CHAT_THEME, + THEME_COLOR_ROLES, +}; export type { ThemeAppearance, ThemeColorRole, ThemeColors, ThemeDefinition, ThemeVariants }; export const T3_CHAT_THEME_ID = "t3-chat" as const; @@ -31,6 +40,8 @@ export const EMBER_THEME_ID = "ember" as const; export const EMBER_THEME_LABEL = "Ember"; export const IRIS_THEME_ID = "iris" as const; export const IRIS_THEME_LABEL = "Iris"; +export const PRISM_THEME_ID = "prism" as const; +export const PRISM_THEME_LABEL = "Prism"; export const THEME_FILE_VERSION = 1 as const; export const CUSTOM_THEMES_STORAGE_KEY = "t3code:themes:v1"; export const THEME_FOLLOW_SYSTEM_STORAGE_KEY = "t3code:theme-follow-system"; diff --git a/docs/user/mobile-appearance.md b/docs/user/mobile-appearance.md index b7e4d57a6ade..89dea458775a 100644 --- a/docs/user/mobile-appearance.md +++ b/docs/user/mobile-appearance.md @@ -1,8 +1,8 @@ # Mobile appearance -T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris themes. Each theme has -light and dark colors that apply throughout the app, including code reviews, file previews, the -terminal, native headers, and sheets. +T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, Iris, and Prism themes. Each +theme has light and dark colors that apply throughout the app, including code reviews, file +previews, the terminal, native headers, and sheets. On supported iOS versions, the new-task and thread composers, working timer, and scroll-to-end button use the system glass material. Other platforms use a themed background. diff --git a/packages/shared/src/themePalettes.ts b/packages/shared/src/themePalettes.ts index 73b73a4de91e..bf269bf9d25a 100644 --- a/packages/shared/src/themePalettes.ts +++ b/packages/shared/src/themePalettes.ts @@ -1,4 +1,4 @@ -export const BUILT_IN_THEME_IDS = ["t3-chat", "grove", "ocean", "ember", "iris"] as const; +export const BUILT_IN_THEME_IDS = ["t3-chat", "grove", "ocean", "ember", "iris", "prism"] as const; /** The mobile app's own hand-tuned palette, which is not part of the built-in library. */ export const MOBILE_DEFAULT_THEME_ID = "t3-code"; @@ -756,12 +756,146 @@ export const IRIS_THEME: ThemeDefinition = { sidebarArtwork: true, }; +/** + * Chrome and glass: a pearl or ink-black canvas lit by iridescent refractions, + * silver controls, and an electric-blue accent. The web client layers its + * translucent, frosted surfaces over this palette; the colors themselves stay + * opaque so the editor, exports, and mobile read them like any other theme. + */ +export const PRISM_THEME: ThemeDefinition = { + id: "prism", + label: "Prism", + appearance: "light", + colors: { + canvas: "oklch(0.975 0.004 255)", + chrome: "oklch(0.965 0.005 255)", + toolbar: "oklch(0.975 0.004 255)", + toolbarForeground: "oklch(0.26 0.014 270)", + toolbarBorder: "oklch(0.89 0.008 255)", + toolbarControl: "oklch(0.94 0.006 255)", + toolbarControlForeground: "oklch(0.26 0.014 270)", + toolbarControlHover: "oklch(0.905 0.009 255)", + surface: "oklch(0.99 0.002 255)", + surfaceRaised: "oklch(1 0 0)", + surfaceOverlay: "oklch(1 0 0)", + text: "oklch(0.24 0.014 270)", + textMuted: "oklch(0.52 0.016 262)", + border: "oklch(0.9 0.007 255)", + input: "oklch(0.85 0.01 255)", + focus: "oklch(0.58 0.19 262)", + accent: "oklch(0.58 0.19 262)", + accentForeground: "oklch(0.99 0.002 255)", + secondary: "oklch(0.945 0.006 255)", + secondaryForeground: "oklch(0.26 0.014 270)", + muted: "oklch(0.955 0.005 255)", + mutedForeground: "oklch(0.5 0.016 262)", + placeholder: "oklch(0.55 0.014 262)", + secondaryLabel: "oklch(0.52 0.016 262)", + iconMuted: "oklch(0.54 0.016 262)", + error: "oklch(0.62 0.22 25)", + errorForeground: "oklch(0.5 0.19 27)", + errorSurface: "oklch(0.95 0.02 20)", + warning: "oklch(0.77 0.17 68)", + warningForeground: "oklch(0.55 0.15 48)", + warningSurface: "oklch(0.96 0.02 85)", + update: "oklch(0.58 0.19 262)", + updateForeground: "oklch(0.45 0.16 262)", + updateSurface: "oklch(0.93 0.03 262)", + accentSurface: "oklch(0.935 0.008 255)", + accentSurfaceForeground: "oklch(0.22 0.014 270)", + messageSurface: "oklch(0.92 0.012 255)", + messageForeground: "oklch(0.24 0.014 270)", + messageAction: "oklch(0.3 0.02 268)", + messageActionForeground: "oklch(0.985 0.002 255)", + messageActionHover: "oklch(0.24 0.018 268)", + codeBackground: "oklch(0.955 0.006 255)", + codeForeground: "oklch(0.28 0.014 270)", + sidebar: "oklch(0.955 0.006 255)", + sidebarForeground: "oklch(0.24 0.014 270)", + sidebarMutedForeground: "oklch(0.52 0.016 262)", + sidebarControlSurface: "oklch(0.915 0.008 255)", + sidebarRowHover: "oklch(0.925 0.008 255)", + sidebarRowActive: "oklch(0.9 0.01 255)", + sidebarRowSelected: "oklch(0.885 0.012 255)", + sidebarBorder: "oklch(0.885 0.008 255)", + terminalBackground: "oklch(0.985 0.003 255)", + terminalForeground: "oklch(0.26 0.014 270)", + terminalCursor: "oklch(0.58 0.19 262)", + terminalSelection: "oklch(0.88 0.05 262)", + terminalScrollbar: "oklch(0.84 0.008 255)", + terminalScrollbarHover: "oklch(0.76 0.01 255)", + }, + variants: { + dark: { + canvas: "oklch(0.145 0.012 272)", + chrome: "oklch(0.12 0.01 272)", + toolbar: "oklch(0.165 0.013 272)", + toolbarForeground: "oklch(0.93 0.006 250)", + toolbarBorder: "oklch(0.3 0.014 265)", + toolbarControl: "oklch(0.22 0.014 268)", + toolbarControlForeground: "oklch(0.9 0.008 250)", + toolbarControlHover: "oklch(0.28 0.018 265)", + surface: "oklch(0.19 0.014 270)", + surfaceRaised: "oklch(0.225 0.016 268)", + surfaceOverlay: "oklch(0.2 0.015 270)", + text: "oklch(0.955 0.005 250)", + textMuted: "oklch(0.72 0.014 258)", + border: "oklch(0.3 0.014 265)", + input: "oklch(0.36 0.016 262)", + focus: "oklch(0.74 0.13 240)", + accent: "oklch(0.72 0.145 250)", + accentForeground: "oklch(0.12 0.01 272)", + secondary: "oklch(0.24 0.014 268)", + secondaryForeground: "oklch(0.93 0.006 250)", + muted: "oklch(0.22 0.012 268)", + mutedForeground: "oklch(0.72 0.014 258)", + placeholder: "oklch(0.64 0.014 258)", + secondaryLabel: "oklch(0.72 0.014 258)", + iconMuted: "oklch(0.7 0.014 258)", + error: "oklch(0.66 0.21 22)", + errorForeground: "oklch(0.8 0.14 20)", + errorSurface: "oklch(0.26 0.06 20)", + warning: "oklch(0.8 0.16 78)", + warningForeground: "oklch(0.86 0.15 85)", + warningSurface: "oklch(0.28 0.05 75)", + update: "oklch(0.72 0.145 250)", + updateForeground: "oklch(0.84 0.09 240)", + updateSurface: "oklch(0.27 0.05 250)", + accentSurface: "oklch(0.26 0.018 265)", + accentSurfaceForeground: "oklch(0.96 0.005 250)", + messageSurface: "oklch(0.255 0.016 268)", + messageForeground: "oklch(0.96 0.005 250)", + messageAction: "oklch(0.9 0.012 250)", + messageActionForeground: "oklch(0.15 0.012 272)", + messageActionHover: "oklch(0.96 0.008 250)", + codeBackground: "oklch(0.115 0.01 272)", + codeForeground: "oklch(0.9 0.01 250)", + sidebar: "oklch(0.13 0.012 272)", + sidebarForeground: "oklch(0.94 0.006 250)", + sidebarMutedForeground: "oklch(0.7 0.014 258)", + sidebarControlSurface: "oklch(0.21 0.014 268)", + sidebarRowHover: "oklch(0.2 0.014 268)", + sidebarRowActive: "oklch(0.24 0.016 266)", + sidebarRowSelected: "oklch(0.255 0.018 265)", + sidebarBorder: "oklch(0.27 0.014 265)", + terminalBackground: "oklch(0.105 0.01 272)", + terminalForeground: "oklch(0.92 0.008 250)", + terminalCursor: "oklch(0.74 0.13 240)", + terminalSelection: "oklch(0.34 0.07 250)", + terminalScrollbar: "oklch(0.34 0.014 262)", + terminalScrollbarHover: "oklch(0.44 0.016 260)", + }, + }, + sidebarArtwork: true, +}; + export const BUILT_IN_THEMES: ReadonlyArray = [ T3_CHAT_THEME, GROVE_THEME, OCEAN_THEME, EMBER_THEME, IRIS_THEME, + PRISM_THEME, ]; export function getThemeColorsForAppearance( From f0d51bbc544fd5180f44a22d6dff7a6a4290d587 Mon Sep 17 00:00:00 2001 From: Logan Sack <12778322+logancsack@users.noreply.github.com> Date: Thu, 1 Oct 2026 01:12:38 +0000 Subject: [PATCH 2/2] fix(web): Prism on mobile and without backdrop-filter Review follow-ups: the generated Uniwind theme outputs now carry Prism so the mobile picker can apply it; the light accent is darker so primary button labels keep 4.5:1 on mobile (and the test now checks that pair for every built-in); and the no-backdrop fallback also restores the opaque composer surface. Co-Authored-By: Claude Fable 5.1 --- .../mobile/generated-uniwind-theme-names.json | 4 +- apps/mobile/generated-uniwind-themes.css | 250 ++++++++++++++++++ .../scripts/generate-uniwind-themes.test.ts | 2 + apps/mobile/src/lib/mobileTheme.test.ts | 4 + apps/web/index.html | 2 +- apps/web/src/index.css | 4 + packages/shared/src/themePalettes.ts | 8 +- 7 files changed, 268 insertions(+), 6 deletions(-) diff --git a/apps/mobile/generated-uniwind-theme-names.json b/apps/mobile/generated-uniwind-theme-names.json index 4ec9f01f8ee7..2f762fcfbea3 100644 --- a/apps/mobile/generated-uniwind-theme-names.json +++ b/apps/mobile/generated-uniwind-theme-names.json @@ -8,5 +8,7 @@ "ember-light", "ember-dark", "iris-light", - "iris-dark" + "iris-dark", + "prism-light", + "prism-dark" ] diff --git a/apps/mobile/generated-uniwind-themes.css b/apps/mobile/generated-uniwind-themes.css index 7f8f9c16afca..f12ed3cf8b4e 100644 --- a/apps/mobile/generated-uniwind-themes.css +++ b/apps/mobile/generated-uniwind-themes.css @@ -1370,5 +1370,255 @@ --color-adaptive-zinc-500-400: oklch(70.5% 0.015 286.067); --color-adaptive-zinc-600-300: oklch(87.1% 0.006 286.286); } + + @variant prism-light { + --color-screen: #f5f7f9; + --color-sheet: rgba(241, 244, 247, 0.98); + --color-sheet-solid: #f1f4f7; + --color-card: #ffffff; + --color-card-alt: #fbfcfd; + --color-card-translucent: rgba(255, 255, 255, 0.8); + --color-foreground: #1d1f26; + --color-foreground-secondary: #646972; + --color-foreground-muted: #5e636d; + --color-foreground-tertiary: #646972; + --color-border: #dbdee3; + --color-border-subtle: rgba(219, 222, 227, 0.7); + --color-separator: rgba(219, 222, 227, 0.55); + --color-subtle: #eef0f3; + --color-subtle-strong: #eaedf1; + --color-inline-skill-background: #e6eaef; + --color-inline-skill-border: rgba(42, 102, 219, 0.42); + --color-inline-skill-foreground: #181a21; + --color-primary: #2a66db; + --color-primary-foreground: #fbfcfd; + --color-primary-shadow: #000000; + --color-secondary: #eaedf1; + --color-secondary-foreground: #21242b; + --color-secondary-border: #dbdee3; + --color-switch-active-track: #2a66db; + --color-switch-active-thumb: #fbfcfd; + --color-switch-inactive-track: #eaedf1; + --color-switch-inactive-thumb: #5e636d; + --color-danger: #fceae9; + --color-danger-border: rgba(238, 52, 59, 0.32); + --color-danger-foreground: #b7191c; + --color-input: #ffffff; + --color-input-border: #c9ced4; + --color-sidebar-search: #dfe3e8; + --color-placeholder: #6d727a; + --color-icon: #1d1f26; + --color-icon-muted: #6a6f78; + --color-icon-subtle: #646972; + --color-header: rgba(245, 247, 249, 0.97); + --color-header-border: #d7dbe0; + --color-glass-surface: rgba(255, 255, 255, 0.74); + --color-glass-tint: rgba(255, 255, 255, 0.22); + --color-status-bar: #f5f7f9; + --color-md-body: #1d1f26; + --color-md-strong: #21242b; + --color-md-link: #2a66db; + --color-md-blockquote-border: #dbdee3; + --color-md-blockquote-bg: #eef0f3; + --color-md-code-bg: #edf0f4; + --color-md-code-text: #262930; + --color-md-user-code-bg: rgba(29, 31, 38, 0.18); + --color-md-user-code-text: #1d1f26; + --color-md-user-fence-bg: rgba(0, 0, 0, 0.16); + --color-md-user-fence-text: #1d1f26; + --color-md-hr: #dbdee3; + --color-user-bubble: #dfe5ed; + --color-user-bubble-foreground: #1d1f26; + --color-user-bubble-foreground-muted: rgba(29, 31, 38, 0.78); + --color-user-bubble-skill-foreground: #292e38; + --color-backdrop: rgba(0, 0, 0, 0.22); + --color-drawer: rgba(237, 240, 244, 0.99); + --color-drawer-shadow: rgba(0, 0, 0, 0.12); + --color-dot-separator: rgba(100, 105, 114, 0.35); + --color-wordmark: #1d1f26; + --color-chevron: rgba(100, 105, 114, 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%); + --color-adaptive-amber-700-300: oklch(55.5% 0.163 48.998); + --color-adaptive-amber-700-400: oklch(55.5% 0.163 48.998); + --color-adaptive-amber-800-200: oklch(47.3% 0.137 46.201); + --color-adaptive-blue-50-blue-400-a14: oklch(97% 0.014 254.604); + --color-adaptive-blue-300-a50-blue-400-a28: oklch(80.9% 0.105 251.813 / 50%); + --color-adaptive-blue-500-a20-blue-400-a15: oklch(62.3% 0.214 259.815 / 20%); + --color-adaptive-blue-500-400: oklch(62.3% 0.214 259.815); + --color-adaptive-blue-600-400: oklch(54.6% 0.245 262.881); + --color-adaptive-black-a10-a25: rgb(0 0 0 / 10%); + --color-adaptive-black-a15-a35: rgb(0 0 0 / 15%); + --color-adaptive-emerald-500-a12-a16: oklch(69.6% 0.17 162.48 / 12%); + --color-adaptive-emerald-600-400: oklch(59.6% 0.145 163.225); + --color-adaptive-emerald-700-300: oklch(50.8% 0.118 165.612); + --color-adaptive-indigo-500-a12-a16: oklch(58.5% 0.233 277.117 / 12%); + --color-adaptive-indigo-600-300: oklch(51.1% 0.262 276.966); + --color-adaptive-indigo-700-300: oklch(45.7% 0.24 277.023); + --color-adaptive-neutral-100-900: oklch(97% 0 0); + --color-adaptive-neutral-200-700-a60: oklch(92.2% 0 0); + --color-adaptive-neutral-200-800: oklch(92.2% 0 0); + --color-adaptive-neutral-200-a70-white-a8: oklch(92.2% 0 0 / 70%); + --color-adaptive-neutral-200-white-a6: oklch(92.2% 0 0); + --color-adaptive-neutral-200-white-a8: oklch(92.2% 0 0); + --color-adaptive-neutral-200-a80-white-a8: oklch(92.2% 0 0 / 80%); + --color-adaptive-neutral-300-a60-white-a12: oklch(87% 0 0 / 60%); + --color-adaptive-neutral-400-500: oklch(70.8% 0 0); + --color-adaptive-neutral-400-a60-500-a60: oklch(70.8% 0 0 / 60%); + --color-adaptive-neutral-400-a80-500-a80: oklch(70.8% 0 0 / 80%); + --color-adaptive-neutral-500-a10-a16: oklch(55.6% 0 0 / 10%); + --color-adaptive-neutral-500-400: oklch(55.6% 0 0); + --color-adaptive-neutral-500-500: oklch(55.6% 0 0); + --color-adaptive-neutral-600-300: oklch(43.9% 0 0); + --color-adaptive-neutral-600-400: oklch(43.9% 0 0); + --color-adaptive-neutral-950-50: oklch(14.5% 0 0); + --color-adaptive-red-50-950-a80: oklch(97.1% 0.013 17.38); + --color-adaptive-red-200-800: oklch(88.5% 0.062 18.334); + --color-adaptive-red-600-a80-400-a80: oklch(57.7% 0.245 27.325 / 80%); + --color-adaptive-red-700-300: oklch(50.5% 0.213 27.518); + --color-adaptive-rose-100-500-a18: oklch(94.1% 0.03 12.58); + --color-adaptive-rose-100-a80-500-a12: oklch(94.1% 0.03 12.58 / 80%); + --color-adaptive-rose-300-a70-400-a28: oklch(81% 0.117 11.638 / 70%); + --color-adaptive-rose-500-a12-a16: oklch(64.5% 0.246 16.439 / 12%); + --color-adaptive-rose-500-400: oklch(64.5% 0.246 16.439); + --color-adaptive-rose-600-400: oklch(58.6% 0.253 17.585); + --color-adaptive-rose-700-300: oklch(51.4% 0.222 16.935); + --color-adaptive-sky-500-a12-a16: oklch(68.5% 0.169 237.323 / 12%); + --color-adaptive-sky-600-400: oklch(58.8% 0.158 241.966); + --color-adaptive-sky-700-300: oklch(50% 0.134 242.749); + --color-adaptive-violet-500-a12-a16: oklch(60.6% 0.25 292.717 / 12%); + --color-adaptive-violet-600-400: oklch(54.1% 0.281 293.009); + --color-adaptive-violet-700-300: oklch(49.1% 0.27 292.581); + --color-adaptive-white-neutral-950-a70: #fff; + --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); + } + + @variant prism-dark { + --color-screen: #080a0f; + --color-sheet: rgba(5, 6, 9, 0.98); + --color-sheet-solid: #050609; + --color-card: #181c23; + --color-card-alt: #11141a; + --color-card-translucent: rgba(24, 28, 35, 0.8); + --color-foreground: #eef0f3; + --color-foreground-secondary: #9fa5ae; + --color-foreground-muted: #9fa5ae; + --color-foreground-tertiary: #9fa5ae; + --color-border: #2a2e35; + --color-border-subtle: rgba(42, 46, 53, 0.7); + --color-separator: rgba(42, 46, 53, 0.55); + --color-subtle: #181a20; + --color-subtle-strong: #1c1f26; + --color-inline-skill-background: #20242d; + --color-inline-skill-border: rgba(86, 170, 251, 0.42); + --color-inline-skill-foreground: #eff2f5; + --color-primary: #56aafb; + --color-primary-foreground: #050609; + --color-primary-shadow: #000000; + --color-secondary: #1c1f26; + --color-secondary-foreground: #e5e8ec; + --color-secondary-border: #2a2e35; + --color-switch-active-track: #56aafb; + --color-switch-active-thumb: #050609; + --color-switch-inactive-track: #1c1f26; + --color-switch-inactive-thumb: #9fa5ae; + --color-danger: #3c1618; + --color-danger-border: rgba(248, 74, 84, 0.32); + --color-danger-foreground: #ff9798; + --color-input: #181c23; + --color-input-border: #393d46; + --color-sidebar-search: #15181f; + --color-placeholder: #878d95; + --color-icon: #eef0f3; + --color-icon-muted: #999fa7; + --color-icon-subtle: #9fa5ae; + --color-header: rgba(12, 14, 20, 0.97); + --color-header-border: #2a2e35; + --color-glass-surface: rgba(19, 22, 29, 0.74); + --color-glass-tint: rgba(19, 22, 29, 0.22); + --color-status-bar: #080a0f; + --color-md-body: #eef0f3; + --color-md-strong: #e5e8ec; + --color-md-link: #56aafb; + --color-md-blockquote-border: #2a2e35; + --color-md-blockquote-bg: #181a20; + --color-md-code-bg: #040508; + --color-md-code-text: #d9dfe5; + --color-md-user-code-bg: rgba(239, 242, 245, 0.18); + --color-md-user-code-text: #eff2f5; + --color-md-user-fence-bg: rgba(0, 0, 0, 0.28); + --color-md-user-fence-text: #eff2f5; + --color-md-hr: #2a2e35; + --color-user-bubble: #1f232b; + --color-user-bubble-foreground: #eff2f5; + --color-user-bubble-foreground-muted: rgba(239, 242, 245, 0.78); + --color-user-bubble-skill-foreground: #d8dfe6; + --color-backdrop: rgba(0, 0, 0, 0.48); + --color-drawer: rgba(6, 7, 12, 0.99); + --color-drawer-shadow: rgba(0, 0, 0, 0.32); + --color-dot-separator: rgba(159, 165, 174, 0.35); + --color-wordmark: #eef0f3; + --color-chevron: rgba(159, 165, 174, 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%); + --color-adaptive-amber-700-300: oklch(87.9% 0.169 91.605); + --color-adaptive-amber-700-400: oklch(82.8% 0.189 84.429); + --color-adaptive-amber-800-200: oklch(92.4% 0.12 95.746); + --color-adaptive-blue-50-blue-400-a14: oklch(70.7% 0.165 254.624 / 14%); + --color-adaptive-blue-300-a50-blue-400-a28: oklch(70.7% 0.165 254.624 / 28%); + --color-adaptive-blue-500-a20-blue-400-a15: oklch(70.7% 0.165 254.624 / 15%); + --color-adaptive-blue-500-400: oklch(70.7% 0.165 254.624); + --color-adaptive-blue-600-400: oklch(70.7% 0.165 254.624); + --color-adaptive-black-a10-a25: rgb(0 0 0 / 25%); + --color-adaptive-black-a15-a35: rgb(0 0 0 / 35%); + --color-adaptive-emerald-500-a12-a16: oklch(69.6% 0.17 162.48 / 16%); + --color-adaptive-emerald-600-400: oklch(76.5% 0.177 163.223); + --color-adaptive-emerald-700-300: oklch(84.5% 0.143 164.978); + --color-adaptive-indigo-500-a12-a16: oklch(58.5% 0.233 277.117 / 16%); + --color-adaptive-indigo-600-300: oklch(78.5% 0.115 274.713); + --color-adaptive-indigo-700-300: oklch(78.5% 0.115 274.713); + --color-adaptive-neutral-100-900: oklch(20.5% 0 0); + --color-adaptive-neutral-200-700-a60: oklch(37.1% 0 0 / 60%); + --color-adaptive-neutral-200-800: oklch(26.9% 0 0); + --color-adaptive-neutral-200-a70-white-a8: rgb(255 255 255 / 8%); + --color-adaptive-neutral-200-white-a6: rgb(255 255 255 / 6%); + --color-adaptive-neutral-200-white-a8: rgb(255 255 255 / 8%); + --color-adaptive-neutral-200-a80-white-a8: rgb(255 255 255 / 8%); + --color-adaptive-neutral-300-a60-white-a12: rgb(255 255 255 / 12%); + --color-adaptive-neutral-400-500: oklch(55.6% 0 0); + --color-adaptive-neutral-400-a60-500-a60: oklch(55.6% 0 0 / 60%); + --color-adaptive-neutral-400-a80-500-a80: oklch(55.6% 0 0 / 80%); + --color-adaptive-neutral-500-a10-a16: oklch(55.6% 0 0 / 16%); + --color-adaptive-neutral-500-400: oklch(70.8% 0 0); + --color-adaptive-neutral-500-500: oklch(55.6% 0 0); + --color-adaptive-neutral-600-300: oklch(87% 0 0); + --color-adaptive-neutral-600-400: oklch(70.8% 0 0); + --color-adaptive-neutral-950-50: oklch(98.5% 0 0); + --color-adaptive-red-50-950-a80: oklch(25.8% 0.092 26.042 / 80%); + --color-adaptive-red-200-800: oklch(44.4% 0.177 26.899); + --color-adaptive-red-600-a80-400-a80: oklch(70.4% 0.191 22.216 / 80%); + --color-adaptive-red-700-300: oklch(80.8% 0.114 19.571); + --color-adaptive-rose-100-500-a18: oklch(64.5% 0.246 16.439 / 18%); + --color-adaptive-rose-100-a80-500-a12: oklch(64.5% 0.246 16.439 / 12%); + --color-adaptive-rose-300-a70-400-a28: oklch(71.2% 0.194 13.428 / 28%); + --color-adaptive-rose-500-a12-a16: oklch(64.5% 0.246 16.439 / 16%); + --color-adaptive-rose-500-400: oklch(71.2% 0.194 13.428); + --color-adaptive-rose-600-400: oklch(71.2% 0.194 13.428); + --color-adaptive-rose-700-300: oklch(81% 0.117 11.638); + --color-adaptive-sky-500-a12-a16: oklch(68.5% 0.169 237.323 / 16%); + --color-adaptive-sky-600-400: oklch(74.6% 0.16 232.661); + --color-adaptive-sky-700-300: oklch(82.8% 0.111 230.318); + --color-adaptive-violet-500-a12-a16: oklch(60.6% 0.25 292.717 / 16%); + --color-adaptive-violet-600-400: oklch(70.2% 0.183 293.541); + --color-adaptive-violet-700-300: oklch(81.1% 0.111 293.571); + --color-adaptive-white-neutral-950-a70: oklch(14.5% 0 0 / 70%); + --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); + } } } diff --git a/apps/mobile/scripts/generate-uniwind-themes.test.ts b/apps/mobile/scripts/generate-uniwind-themes.test.ts index 48126055bada..affa759efe7b 100644 --- a/apps/mobile/scripts/generate-uniwind-themes.test.ts +++ b/apps/mobile/scripts/generate-uniwind-themes.test.ts @@ -36,6 +36,8 @@ describe("generate mobile Uniwind themes", () => { "ember-dark", "iris-light", "iris-dark", + "prism-light", + "prism-dark", ]); const stylesheet = renderUniwindThemesCSS(); diff --git a/apps/mobile/src/lib/mobileTheme.test.ts b/apps/mobile/src/lib/mobileTheme.test.ts index a3c6712abae8..88ab71d1672c 100644 --- a/apps/mobile/src/lib/mobileTheme.test.ts +++ b/apps/mobile/src/lib/mobileTheme.test.ts @@ -180,6 +180,10 @@ describe("mobile themes", () => { expect( contrastRatio(variables["--color-placeholder"], variables["--color-input"]), ).toBeGreaterThanOrEqual(4.5); + // Primary buttons set normal-sized labels on the accent. + expect( + contrastRatio(variables["--color-primary-foreground"], variables["--color-primary"]), + ).toBeGreaterThanOrEqual(4.5); } } diff --git a/apps/web/index.html b/apps/web/index.html index 2567309c41bd..0c5535545d4a 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -125,7 +125,7 @@ light: { background: "oklch(0.975 0.004 255)", foreground: "oklch(0.24 0.014 270)", - accent: "oklch(0.58 0.19 262)", + accent: "oklch(0.54 0.19 262)", chrome: "oklch(0.965 0.005 255)", }, dark: { diff --git a/apps/web/src/index.css b/apps/web/src/index.css index b0bdd6aa0d41..837dccbdd975 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -1627,6 +1627,10 @@ html[data-theme-id="prism"] .sidebar-brand > span { html[data-theme-id="prism"] [data-app-sidebar] [data-slot="sidebar-inner"] { background-color: var(--sidebar); } + + html[data-theme-id="prism"] [data-slot="composer-shell"] { + --chat-composer-glass-surface: var(--app-theme-surface-raised); + } } /* Contrast stays in ordinary custom properties so both Tailwind utilities and diff --git a/packages/shared/src/themePalettes.ts b/packages/shared/src/themePalettes.ts index bf269bf9d25a..57680366f450 100644 --- a/packages/shared/src/themePalettes.ts +++ b/packages/shared/src/themePalettes.ts @@ -782,8 +782,8 @@ export const PRISM_THEME: ThemeDefinition = { textMuted: "oklch(0.52 0.016 262)", border: "oklch(0.9 0.007 255)", input: "oklch(0.85 0.01 255)", - focus: "oklch(0.58 0.19 262)", - accent: "oklch(0.58 0.19 262)", + focus: "oklch(0.54 0.19 262)", + accent: "oklch(0.54 0.19 262)", accentForeground: "oklch(0.99 0.002 255)", secondary: "oklch(0.945 0.006 255)", secondaryForeground: "oklch(0.26 0.014 270)", @@ -798,7 +798,7 @@ export const PRISM_THEME: ThemeDefinition = { warning: "oklch(0.77 0.17 68)", warningForeground: "oklch(0.55 0.15 48)", warningSurface: "oklch(0.96 0.02 85)", - update: "oklch(0.58 0.19 262)", + update: "oklch(0.54 0.19 262)", updateForeground: "oklch(0.45 0.16 262)", updateSurface: "oklch(0.93 0.03 262)", accentSurface: "oklch(0.935 0.008 255)", @@ -820,7 +820,7 @@ export const PRISM_THEME: ThemeDefinition = { sidebarBorder: "oklch(0.885 0.008 255)", terminalBackground: "oklch(0.985 0.003 255)", terminalForeground: "oklch(0.26 0.014 270)", - terminalCursor: "oklch(0.58 0.19 262)", + terminalCursor: "oklch(0.54 0.19 262)", terminalSelection: "oklch(0.88 0.05 262)", terminalScrollbar: "oklch(0.84 0.008 255)", terminalScrollbarHover: "oklch(0.76 0.01 255)",