feat: glass ui pass
This commit is contained in:
Brooklyn Nicholson
@@ -159,6 +159,14 @@ function applyTheme(theme: DesktopTheme, mode: 'light' | 'dark') {
|
||||
const rendered = renderedModeFor(c, mode)
|
||||
const midground = c.midground ?? c.ring
|
||||
const skinName = theme.name.endsWith(`-${mode}`) ? theme.name.slice(0, -mode.length - 1) : theme.name
|
||||
const neutralChrome = rendered === 'dark' ? '#0d0d0e' : '#f3f3f3'
|
||||
const neutralSidebar = rendered === 'dark' ? '#0a0a0b' : '#f3f3f3'
|
||||
const neutralCard = rendered === 'dark' ? '#161618' : '#fcfcfc'
|
||||
const chromeMix = rendered === 'dark' ? 36 : 44
|
||||
const sidebarMix = rendered === 'dark' ? 42 : 36
|
||||
const cardMix = rendered === 'dark' ? 38 : 22
|
||||
const elevatedMix = rendered === 'dark' ? 46 : 28
|
||||
const bubbleMix = rendered === 'dark' ? 48 : 30
|
||||
|
||||
root.style.setProperty('color-scheme', rendered)
|
||||
root.dataset.hermesTheme = skinName
|
||||
@@ -166,31 +174,74 @@ function applyTheme(theme: DesktopTheme, mode: 'light' | 'dark') {
|
||||
root.classList.toggle('dark', rendered === 'dark')
|
||||
|
||||
const set = (k: string, v: string) => root.style.setProperty(k, v)
|
||||
set('--dt-background', c.background)
|
||||
set('--dt-foreground', c.foreground)
|
||||
set('--dt-card', c.card)
|
||||
set('--dt-card-foreground', c.cardForeground)
|
||||
set('--theme-foreground', c.foreground)
|
||||
set('--theme-primary', c.primary)
|
||||
set('--theme-secondary', c.secondary)
|
||||
set('--theme-accent-soft', c.accent)
|
||||
set('--theme-midground', midground)
|
||||
set('--theme-warm', c.primary)
|
||||
set('--theme-background-seed', c.background)
|
||||
set('--theme-sidebar-seed', c.sidebarBackground ?? c.background)
|
||||
set('--theme-card-seed', c.card)
|
||||
set('--theme-elevated-seed', c.popover)
|
||||
set('--theme-bubble-seed', c.userBubble ?? c.popover)
|
||||
set('--theme-neutral-chrome', neutralChrome)
|
||||
set('--theme-neutral-sidebar', neutralSidebar)
|
||||
set('--theme-neutral-card', neutralCard)
|
||||
set('--theme-mix-chrome', `${chromeMix}%`)
|
||||
set('--theme-mix-sidebar', `${sidebarMix}%`)
|
||||
set('--theme-mix-card', `${cardMix}%`)
|
||||
set('--theme-mix-elevated', `${elevatedMix}%`)
|
||||
set('--theme-mix-bubble', `${bubbleMix}%`)
|
||||
set('--theme-fill-primary-accent-mix', '16%')
|
||||
set('--theme-fill-secondary-accent-mix', '11%')
|
||||
set('--theme-fill-tertiary-accent-mix', '8%')
|
||||
set('--theme-fill-quaternary-accent-mix', '5%')
|
||||
set('--theme-fill-quinary-accent-mix', '3%')
|
||||
set('--theme-stroke-primary-accent-mix', '24%')
|
||||
set('--theme-stroke-secondary-accent-mix', '16%')
|
||||
set('--theme-stroke-tertiary-accent-mix', '10%')
|
||||
set('--theme-stroke-quaternary-accent-mix', '6%')
|
||||
set('--ui-base', 'var(--theme-foreground)')
|
||||
set('--ui-accent', 'var(--theme-midground)')
|
||||
set('--ui-accent-secondary', 'var(--theme-primary)')
|
||||
set('--ui-warm', 'var(--theme-warm)')
|
||||
set('--ui-bg-chrome', 'color-mix(in srgb, var(--theme-background-seed) var(--theme-mix-chrome), var(--theme-neutral-chrome))')
|
||||
set('--ui-bg-sidebar', 'color-mix(in srgb, var(--theme-sidebar-seed) var(--theme-mix-sidebar), var(--theme-neutral-sidebar))')
|
||||
set('--ui-bg-editor', 'color-mix(in srgb, var(--theme-card-seed) var(--theme-mix-card), var(--theme-neutral-card))')
|
||||
set('--ui-bg-elevated', 'color-mix(in srgb, var(--theme-elevated-seed) var(--theme-mix-elevated), var(--theme-neutral-card))')
|
||||
set('--ui-bg-input', 'var(--ui-bg-editor)')
|
||||
set('--glass-surface-background', 'var(--ui-bg-editor)')
|
||||
set('--glass-sidebar-surface-background', 'var(--ui-bg-sidebar)')
|
||||
set('--glass-chat-surface-background', 'var(--ui-bg-chrome)')
|
||||
set('--glass-editor-surface-background', 'var(--ui-bg-chrome)')
|
||||
set('--glass-chat-bubble-background', 'color-mix(in srgb, var(--theme-bubble-seed) var(--theme-mix-bubble), var(--theme-neutral-card))')
|
||||
set('--glass-chat-bubble-opaque-background', 'var(--ui-bg-editor)')
|
||||
set('--dt-background', 'var(--ui-bg-chrome)')
|
||||
set('--dt-foreground', 'var(--ui-text-primary)')
|
||||
set('--dt-card', 'var(--ui-bg-editor)')
|
||||
set('--dt-card-foreground', 'var(--ui-text-primary)')
|
||||
set('--dt-muted', c.muted)
|
||||
set('--dt-muted-foreground', c.mutedForeground)
|
||||
set('--dt-popover', c.popover)
|
||||
set('--dt-popover-foreground', c.popoverForeground)
|
||||
set('--dt-primary', c.primary)
|
||||
set('--dt-muted-foreground', 'var(--ui-text-tertiary)')
|
||||
set('--dt-popover', 'var(--ui-bg-elevated)')
|
||||
set('--dt-popover-foreground', 'var(--ui-text-primary)')
|
||||
set('--dt-primary', 'var(--theme-primary)')
|
||||
set('--dt-primary-foreground', c.primaryForeground)
|
||||
set('--dt-secondary', c.secondary)
|
||||
set('--dt-secondary', 'var(--theme-secondary)')
|
||||
set('--dt-secondary-foreground', c.secondaryForeground)
|
||||
set('--dt-accent', c.accent)
|
||||
set('--dt-accent', 'var(--theme-accent-soft)')
|
||||
set('--dt-accent-foreground', c.accentForeground)
|
||||
set('--dt-border', c.border)
|
||||
set('--dt-input', c.input)
|
||||
set('--dt-ring', c.ring)
|
||||
set('--dt-midground', midground)
|
||||
set('--dt-midground', 'var(--theme-midground)')
|
||||
set('--dt-midground-foreground', c.midgroundForeground ?? readableOn(midground))
|
||||
set('--dt-composer-ring', c.composerRing ?? midground)
|
||||
set('--dt-destructive', c.destructive)
|
||||
set('--dt-destructive-foreground', c.destructiveForeground)
|
||||
set('--dt-sidebar-bg', c.sidebarBackground ?? c.background)
|
||||
set('--dt-sidebar-bg', 'var(--ui-bg-sidebar)')
|
||||
set('--dt-sidebar-border', c.sidebarBorder ?? c.border)
|
||||
set('--dt-user-bubble', c.userBubble ?? c.muted)
|
||||
set('--dt-user-bubble', 'var(--glass-chat-bubble-background)')
|
||||
set('--dt-user-bubble-border', c.userBubbleBorder ?? c.border)
|
||||
set('--dt-font-sans', typo.fontSans)
|
||||
set('--dt-font-mono', typo.fontMono)
|
||||
|
||||
@@ -6,10 +6,9 @@
|
||||
import type { DesktopTheme, DesktopThemeTypography } from './types'
|
||||
|
||||
const SYSTEM_SANS =
|
||||
'ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif'
|
||||
'"Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif'
|
||||
|
||||
const SYSTEM_MONO =
|
||||
'ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Monaco, Consolas, "Liberation Mono", monospace'
|
||||
const SYSTEM_MONO = '"Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace'
|
||||
|
||||
export const DEFAULT_TYPOGRAPHY: DesktopThemeTypography = { fontSans: SYSTEM_SANS, fontMono: SYSTEM_MONO }
|
||||
|
||||
@@ -17,43 +16,44 @@ const NOUS_BLUE = '#0053FD'
|
||||
const PSYCHE_BLUE = '#1540B1'
|
||||
const PSYCHE_WARM = '#FFE6CB'
|
||||
|
||||
const tint = (pct: number) => `color-mix(in srgb, ${NOUS_BLUE} ${pct}%, #FFFFFF)`
|
||||
const tintTransparent = (pct: number) => `color-mix(in srgb, ${NOUS_BLUE} ${pct}%, transparent)`
|
||||
const nousTint = (pct: number) => `color-mix(in srgb, ${NOUS_BLUE} ${pct}%, #FFFFFF)`
|
||||
const nousTintTransparent = (pct: number) => `color-mix(in srgb, ${NOUS_BLUE} ${pct}%, transparent)`
|
||||
|
||||
/**
|
||||
* Nous — canonical Hermes/Nous identity. Replaces the historical trio of
|
||||
* `nous-light`, `default`, and `gold`. Light = bright Nous blue on white;
|
||||
* dark = Hermes lens-blue with cream foreground.
|
||||
* Nous — canonical Hermes desktop identity. The palette keeps the current
|
||||
* glass geometry neutral, then lets the old bb/gui blue and psyche cream
|
||||
* return as accent seeds.
|
||||
*/
|
||||
export const nousTheme: DesktopTheme = {
|
||||
name: 'nous',
|
||||
label: 'Nous',
|
||||
description: 'Bright Nous blue in light mode, Hermes blue in dark mode',
|
||||
description: 'Glass neutrals with Nous blue accents',
|
||||
colors: {
|
||||
background: '#FFFFFF',
|
||||
background: '#F8FAFF',
|
||||
foreground: '#17171A',
|
||||
card: '#FFFFFF',
|
||||
cardForeground: '#17171A',
|
||||
muted: tint(5),
|
||||
muted: nousTint(5),
|
||||
mutedForeground: '#666678',
|
||||
popover: '#FFFFFF',
|
||||
popoverForeground: '#17171A',
|
||||
primary: NOUS_BLUE,
|
||||
primaryForeground: '#FFFFFF',
|
||||
secondary: tint(7),
|
||||
primaryForeground: '#FCFCFC',
|
||||
secondary: nousTint(7),
|
||||
secondaryForeground: '#242432',
|
||||
accent: tint(10),
|
||||
accent: nousTint(10),
|
||||
accentForeground: '#202030',
|
||||
border: tintTransparent(22),
|
||||
input: tintTransparent(30),
|
||||
border: nousTintTransparent(22),
|
||||
input: nousTintTransparent(30),
|
||||
ring: NOUS_BLUE,
|
||||
midground: NOUS_BLUE,
|
||||
composerRing: NOUS_BLUE,
|
||||
destructive: '#C72E4D',
|
||||
destructiveForeground: '#FFFFFF',
|
||||
sidebarBackground: tint(2.5),
|
||||
sidebarBorder: tintTransparent(18),
|
||||
userBubble: tint(6),
|
||||
userBubbleBorder: tintTransparent(24)
|
||||
sidebarBackground: '#F3F7FF',
|
||||
sidebarBorder: nousTintTransparent(18),
|
||||
userBubble: nousTint(6),
|
||||
userBubbleBorder: nousTintTransparent(24)
|
||||
},
|
||||
darkColors: {
|
||||
background: '#0D2F86',
|
||||
|
||||
Reference in New Issue
Block a user