aeon-ui-engine 1.0.2 → 1.1.0

package/packages/panda/src/theme/catalog-types.ts

@@ -19,6 +19,8 @@ export interface AeonThemeDefinition {
   id: string
   label: string
   description: string
+  /** Canonical mode for scroll-cycle / one-sided terminal themes. */
+  preferredMode?: AeonMode
   light: AeonPalette
   dark: AeonPalette
 }

package/packages/panda/src/theme/catalog.ts

@@ -6,6 +6,7 @@ export type { AeonMode, AeonPalette, AeonThemeDefinition } from './catalog-types
 export type { AeonPaletteInput, AeonThemeConfigEntry } from './palette.js'
 export { definePalette, themesFromConfig } from './palette.js'
 export { aeonThemesConfig } from './themes.config.js'
+export { OMARCHY_THEME_IDS, OMARCHY_SCROLL_THEME_IDS, omarchyThemesConfig, type OmarchyThemeId } from './omarchy.themes.js'
 
 export const AEON_THEMES: AeonThemeDefinition[] = themesFromConfig(aeonThemesConfig)
 
@@ -22,6 +23,28 @@ export const DEFAULT_MODE: AeonMode = 'dark'
 
 const STORAGE_THEME = 'aeon-theme'
 const STORAGE_MODE = 'aeon-mode'
+const STORAGE_SCROLL = 'aeon-theme-scroll'
+
+export function getAeonPreferredMode(themeId: AeonThemeId, fallback: AeonMode = DEFAULT_MODE): AeonMode {
+  return AEON_THEME_MAP[themeId].preferredMode ?? fallback
+}
+
+export function isAeonScrollThemeMode(): boolean {
+  try {
+    return localStorage.getItem(STORAGE_SCROLL) === '1'
+  } catch {
+    return false
+  }
+}
+
+export function setAeonScrollThemeMode(enabled: boolean) {
+  try {
+    if (enabled) localStorage.setItem(STORAGE_SCROLL, '1')
+    else localStorage.removeItem(STORAGE_SCROLL)
+  } catch {
+    /* private mode */
+  }
+}
 
 export function isAeonThemeId(value: string): value is AeonThemeId {
   return value in AEON_THEME_MAP

package/packages/panda/src/theme/chrome.css

@@ -56,7 +56,8 @@ input[type='number'] {
 select:not([data-aeon-native-select]):focus-visible,
 textarea:focus-visible,
 input:focus-visible {
-  box-shadow: var(--shadows-focus-ring);
+  border-color: var(--colors-aeon-accent);
+  box-shadow: none;
 }
 
 select:not([data-aeon-native-select]) {

package/packages/panda/src/theme/global-theme-css.ts

@@ -28,6 +28,15 @@ function paletteVars(p: AeonPalette): ThemeCssVars {
 export function buildThemeGlobalCss(): Record<string, ThemeCssVars & { colorScheme?: AeonMode }> {
   const rules: Record<string, ThemeCssVars & { colorScheme?: AeonMode }> = {}
 
+  // Safe dark defaults before attribute selectors resolve (prevents light scrollbar FOUC).
+  const defaultDark = AEON_THEMES.find((t) => t.id === 'default')?.dark
+  if (defaultDark) {
+    rules['html'] = {
+      colorScheme: 'dark',
+      ...paletteVars(defaultDark),
+    }
+  }
+
   for (const theme of AEON_THEMES) {
     for (const mode of ['light', 'dark'] as const satisfies AeonMode[]) {
       const selector = `html[data-aeon-theme="${theme.id}"][data-aeon-mode="${mode}"]`

package/packages/panda/src/theme/omarchy.themes.ts

@@ -0,0 +1,607 @@
+/**
+ * Official Omarchy themes — mapped from basecamp/omarchy colors.toml (quattro).
+ * Companion light/dark palettes are derived when Omarchy only ships one mode.
+ */
+import type { AeonThemeConfigEntry } from './palette.js'
+
+export const omarchyThemesConfig = [
+  {
+    id: 'tokyo-night',
+    label: 'Tokyo Night',
+    description: 'City-night blues and lavender (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#0e0e14',
+      surface: '#13141c',
+      surfaceRaised: '#24283b',
+      border: '#292e42',
+      text: '#c0caf5',
+      muted: '#565f89',
+      accent: '#7aa2f7',
+      accentDim: '#7aa2f72e',
+      danger: '#f7768e',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#0e0e14',
+      muted: '#414868',
+      accent: '#7aa2f7',
+      accentDim: '#7aa2f71a',
+      danger: '#f7768e',
+    },
+  },
+  {
+    id: 'osaka-jade',
+    label: 'Osaka Jade',
+    description: 'Jade green on moss dark (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#090f0d',
+      surface: '#0c1512',
+      surfaceRaised: '#23372B',
+      border: '#32473B',
+      text: '#F7E8B2',
+      muted: '#81B8A8',
+      accent: '#509475',
+      accentDim: '#5094752e',
+      danger: '#FF5345',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#090f0d',
+      muted: '#53685B',
+      accent: '#509475',
+      accentDim: '#5094751a',
+      danger: '#FF5345',
+    },
+  },
+  {
+    id: 'rose-pine',
+    label: 'Rose Pine',
+    description: 'Dawn blush — soft rose on cream (Omarchy)',
+    preferredMode: 'light',
+    dark: {
+      bg: '#191724',
+      surface: '#1f1d2e',
+      surfaceRaised: '#26233a',
+      border: '#403d52',
+      text: '#e0def4',
+      muted: '#908caa',
+      accent: '#9ccfd8',
+      accentDim: '#9ccfd82e',
+      danger: '#eb6f92',
+    },
+    light: {
+      bg: '#faf4ed',
+      surface: '#ffffff',
+      surfaceRaised: '#f2e9e1',
+      border: '#dfdad9',
+      text: '#575279',
+      muted: '#9893a5',
+      accent: '#56949f',
+      accentDim: '#56949f1a',
+      danger: '#b4637a',
+    },
+  },
+  {
+    id: 'catppuccin-latte',
+    label: 'Catppuccin Latte',
+    description: 'Light mocha — airy pastels for daytime (Omarchy)',
+    preferredMode: 'light',
+    /* Dark companion = Catppuccin Mocha — never recycle Latte pastels as “dark”. */
+    dark: {
+      bg: '#101019',
+      surface: '#161622',
+      surfaceRaised: '#313244',
+      border: '#45475a',
+      text: '#cdd6f4',
+      muted: '#6c7086',
+      accent: '#89b4fa',
+      accentDim: '#89b4fa2e',
+      danger: '#f38ba8',
+    },
+    light: {
+      bg: '#eff1f5',
+      surface: '#ffffff',
+      surfaceRaised: '#dce0e8',
+      border: '#ccd0da',
+      text: '#4c4f69',
+      muted: '#9ca0b0',
+      accent: '#1e66f5',
+      accentDim: '#1e66f51a',
+      danger: '#d20f39',
+    },
+  },
+  {
+    id: 'everforest',
+    label: 'Everforest',
+    description: 'Muted forest greens — easy on the eyes (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#181d20',
+      surface: '#21272c',
+      surfaceRaised: '#343f44',
+      border: '#3d484d',
+      text: '#d3c6aa',
+      muted: '#4f585e',
+      accent: '#7fbbb3',
+      accentDim: '#7fbbb32e',
+      danger: '#e67e80',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#181d20',
+      muted: '#475258',
+      accent: '#7fbbb3',
+      accentDim: '#7fbbb31a',
+      danger: '#e67e80',
+    },
+  },
+  {
+    id: 'gruvbox',
+    label: 'Gruvbox',
+    description: 'Retro warm earth tones (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#161616',
+      surface: '#1e1e1e',
+      surfaceRaised: '#3c3836',
+      border: '#504945',
+      text: '#d4be98',
+      muted: '#7c6f64',
+      accent: '#7daea3',
+      accentDim: '#7daea32e',
+      danger: '#ea6962',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#161616',
+      muted: '#665c54',
+      accent: '#7daea3',
+      accentDim: '#7daea31a',
+      danger: '#ea6962',
+    },
+  },
+  {
+    id: 'matte-black',
+    label: 'Matte Black',
+    description: 'Flat black with amber hardware accent (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#090909',
+      surface: '#0d0d0d',
+      surfaceRaised: '#1e1e1e',
+      border: '#2a2a2a',
+      text: '#bebebe',
+      muted: '#555555',
+      accent: '#e68e0d',
+      accentDim: '#e68e0d2e',
+      danger: '#D35F5F',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#090909',
+      muted: '#333333',
+      accent: '#e68e0d',
+      accentDim: '#e68e0d1a',
+      danger: '#D35F5F',
+    },
+  },
+  {
+    id: 'catppuccin',
+    label: 'Catppuccin',
+    description: 'Mocha mauve — soft pastels on deep indigo (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#101019',
+      surface: '#161622',
+      surfaceRaised: '#313244',
+      border: '#45475a',
+      text: '#cdd6f4',
+      muted: '#6c7086',
+      accent: '#89b4fa',
+      accentDim: '#89b4fa2e',
+      danger: '#f38ba8',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#101019',
+      muted: '#585b70',
+      accent: '#89b4fa',
+      accentDim: '#89b4fa1a',
+      danger: '#f38ba8',
+    },
+  },
+  {
+    id: 'nord',
+    label: 'Nord',
+    description: 'Arctic blue-gray — cool and calm (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#191c23',
+      surface: '#222730',
+      surfaceRaised: '#3b4252',
+      border: '#434c5e',
+      text: '#d8dee9',
+      muted: '#667080',
+      accent: '#81a1c1',
+      accentDim: '#81a1c12e',
+      danger: '#bf616a',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#191c23',
+      muted: '#4c566a',
+      accent: '#81a1c1',
+      accentDim: '#81a1c11a',
+      danger: '#bf616a',
+    },
+  },
+  {
+    id: 'ristretto',
+    label: 'Ristretto',
+    description: 'Espresso browns with coral foam (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#181414',
+      surface: '#211b1b',
+      surfaceRaised: '#3d2f2a',
+      border: '#403e41',
+      text: '#e6d9db',
+      muted: '#72696a',
+      accent: '#f38d70',
+      accentDim: '#f38d702e',
+      danger: '#fd6883',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#181414',
+      muted: '#72696a',
+      accent: '#f38d70',
+      accentDim: '#f38d701a',
+      danger: '#fd6883',
+    },
+  },
+  {
+    id: 'kanagawa',
+    label: 'Kanagawa',
+    description: 'Japanese ink wash — parchment on deep sea (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#111116',
+      surface: '#17171e',
+      surfaceRaised: '#223249',
+      border: '#363646',
+      text: '#dcd7ba',
+      muted: '#727169',
+      accent: '#dcd7ba',
+      accentDim: '#dcd7ba2e',
+      danger: '#c34043',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#111116',
+      muted: '#54546D',
+      accent: '#dcd7ba',
+      accentDim: '#dcd7ba1a',
+      danger: '#c34043',
+    },
+  },
+  {
+    id: 'ethereal',
+    label: 'Ethereal',
+    description: 'Deep space indigo with warm peach light (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#030610',
+      surface: '#040816',
+      surfaceRaised: '#131a3a',
+      border: '#252e56',
+      text: '#ffcead',
+      muted: '#6d7db6',
+      accent: '#7d82d9',
+      accentDim: '#7d82d92e',
+      danger: '#ED5B5A',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#030610',
+      muted: '#6d7db6',
+      accent: '#7d82d9',
+      accentDim: '#7d82d91a',
+      danger: '#ED5B5A',
+    },
+  },
+  {
+    id: 'flexoki-light',
+    label: 'Flexoki Light',
+    description: 'Warm paper white with ink blue accent (Omarchy)',
+    preferredMode: 'light',
+    /* Dark companion = Flexoki dark ink — not a dimmed paper wash. */
+    dark: {
+      bg: '#100F0F',
+      surface: '#1C1B1A',
+      surfaceRaised: '#282726',
+      border: '#403E3C',
+      text: '#CECDC3',
+      muted: '#878580',
+      accent: '#4385BE',
+      accentDim: '#4385BE2e',
+      danger: '#D14D41',
+    },
+    light: {
+      bg: '#FFFCF0',
+      surface: '#ffffff',
+      surfaceRaised: '#E6E4D9',
+      border: '#CECDC3',
+      text: '#100F0F',
+      muted: '#878580',
+      accent: '#205EA6',
+      accentDim: '#205EA61a',
+      danger: '#D14D41',
+    },
+  },
+  {
+    id: 'hackerman',
+    label: 'Hackerman',
+    description: 'Neon green on midnight — terminal energy (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#06060c',
+      surface: '#080910',
+      surfaceRaised: '#151828',
+      border: '#1f253a',
+      text: '#ddf7ff',
+      muted: '#6a6e95',
+      accent: '#82FB9C',
+      accentDim: '#82FB9C2e',
+      danger: '#50f872',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#06060c',
+      muted: '#2d3450',
+      accent: '#82FB9C',
+      accentDim: '#82FB9C1a',
+      danger: '#50f872',
+    },
+  },
+  {
+    id: 'last-horizon',
+    label: 'Last Horizon',
+    description: 'Dusty rose neutrals at the edge of night (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#060606',
+      surface: '#090809',
+      surfaceRaised: '#0c0b0c',
+      border: '#584e51',
+      text: '#e2dddc',
+      muted: '#584e51',
+      accent: '#b59790',
+      accentDim: '#b597902e',
+      danger: '#c38b7b',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#060606',
+      muted: '#584e51',
+      accent: '#b59790',
+      accentDim: '#b597901a',
+      danger: '#c38b7b',
+    },
+  },
+  {
+    id: 'lumon',
+    label: 'Lumon',
+    description: 'Severance-cold corporate cyan (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#0b1216',
+      surface: '#101b21',
+      surfaceRaised: '#1b2d40',
+      border: '#243d56',
+      text: '#f2fcff',
+      muted: '#4d86b0',
+      accent: '#8bc9eb',
+      accentDim: '#8bc9eb2e',
+      danger: '#4d86b0',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#0b1216',
+      muted: '#304860',
+      accent: '#8bc9eb',
+      accentDim: '#8bc9eb1a',
+      danger: '#4d86b0',
+    },
+  },
+  {
+    id: 'miasma',
+    label: 'Miasma',
+    description: 'Swamp olive — grimy organic dark (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#121212',
+      surface: '#191919',
+      surfaceRaised: '#2c2c2c',
+      border: '#383838',
+      text: '#c2c2b0',
+      muted: '#555555',
+      accent: '#78824b',
+      accentDim: '#78824b2e',
+      danger: '#685742',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#121212',
+      muted: '#666666',
+      accent: '#78824b',
+      accentDim: '#78824b1a',
+      danger: '#685742',
+    },
+  },
+  {
+    id: 'retro-82',
+    label: 'Retro 82',
+    description: 'Sunset synthwave on navy (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#020c17',
+      surface: '#031222',
+      surfaceRaised: '#0a2540',
+      border: '#134e5a',
+      text: '#f6dcac',
+      muted: '#3f8f8a',
+      accent: '#faa968',
+      accentDim: '#faa9682e',
+      danger: '#f85525',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#020c17',
+      muted: '#2a6b78',
+      accent: '#faa968',
+      accentDim: '#faa9681a',
+      danger: '#f85525',
+    },
+  },
+  {
+    id: 'solitude',
+    label: 'Solitude',
+    description: 'Quiet monochrome steel (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#080a0b',
+      surface: '#0c0e10',
+      surfaceRaised: '#101315',
+      border: '#343d41',
+      text: '#a5aeb4',
+      muted: '#4b4e55',
+      accent: '#798186',
+      accentDim: '#7981862e',
+      danger: '#565d60',
+    },
+    light: {
+      bg: '#f4f5f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eceef2',
+      border: '#d5d8e0',
+      text: '#080a0b',
+      muted: '#4b4e55',
+      accent: '#798186',
+      accentDim: '#7981861a',
+      danger: '#565d60',
+    },
+  },
+  {
+    id: 'vantablack',
+    label: 'Vantablack',
+    description: 'Absolute black with gray signal (Omarchy)',
+    preferredMode: 'dark',
+    dark: {
+      bg: '#070707',
+      surface: '#090909',
+      surfaceRaised: '#1a1a1a',
+      border: '#1a1a1a',
+      text: '#ffffff',
+      muted: '#505050',
+      accent: '#8d8d8d',
+      accentDim: '#8d8d8d2e',
+      danger: '#a4a4a4',
+    },
+    light: {
+      bg: '#f7f7f7',
+      surface: '#ffffff',
+      surfaceRaised: '#eeeeee',
+      border: '#d4d4d4',
+      text: '#111111',
+      muted: '#666666',
+      accent: '#404040',
+      accentDim: '#40404014',
+      danger: '#b91c1c',
+    },
+  },
+  {
+    id: 'white',
+    label: 'White',
+    description: 'Stark paper white and ink black (Omarchy)',
+    preferredMode: 'light',
+    dark: {
+      bg: '#0a0a0a',
+      surface: '#141414',
+      surfaceRaised: '#1f1f1f',
+      border: '#333333',
+      text: '#f2f2f2',
+      muted: '#9a9a9a',
+      accent: '#e5e5e5',
+      accentDim: '#e5e5e528',
+      danger: '#f87171',
+    },
+    light: {
+      bg: '#ffffff',
+      surface: '#ffffff',
+      surfaceRaised: '#f5f5f5',
+      border: '#c0c0c0',
+      text: '#000000',
+      muted: '#808080',
+      accent: '#6e6e6e',
+      accentDim: '#6e6e6e1a',
+      danger: '#2a2a2a',
+    },
+  }
+] as const satisfies readonly AeonThemeConfigEntry[]
+
+export type OmarchyThemeId = (typeof omarchyThemesConfig)[number]['id']
+
+export const OMARCHY_THEME_IDS = omarchyThemesConfig.map((t) => t.id) as OmarchyThemeId[]
+
+/** Scroll tour — dark-preferred Omarchy accents only (no Latte / Flexoki Light / White flash). */
+export const OMARCHY_SCROLL_THEME_IDS = omarchyThemesConfig
+  .filter((t) => t.preferredMode !== 'light')
+  .map((t) => t.id) as OmarchyThemeId[]

package/packages/panda/src/theme/palette.ts

@@ -19,6 +19,8 @@ export interface AeonThemeConfigEntry {
   id: string
   label: string
   description: string
+  /** Canonical Omarchy / terminal mode when the theme is primarily one-sided. */
+  preferredMode?: 'light' | 'dark'
   light: AeonPaletteInput
   dark: AeonPaletteInput
 }
@@ -59,6 +61,7 @@ export function themesFromConfig(entries: readonly AeonThemeConfigEntry[]): Aeon
     id: entry.id,
     label: entry.label,
     description: entry.description,
+    preferredMode: entry.preferredMode,
     light: definePalette('light', entry.light),
     dark: definePalette('dark', entry.dark),
   }))