All files / packages/theme-selector/src constants.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
 
 
 
 
 
 
 
 
 
 
21x
21x
21x
 
 
21x
 
 
21x
 
 
 
 
 
 
 
21x
 
 
 
 
 
 
 
 
 
 
 
 
 
21x
 
 
 
 
 
 
 
 
 
 
 
// SPDX-License-Identifier: MIT
/**
 * Constants for theme selector component
 */
 
import type { ThemeFamily } from './types.js';
import { DEFAULT_THEME as CORE_DEFAULT_THEME } from '@lgtm-hq/turbo-themes-core';
 
// Re-export ThemeFamily for convenience
export type { ThemeFamily } from './types.js';
 
export const STORAGE_KEY = 'turbo-theme';
export const LEGACY_STORAGE_KEYS = ['bulma-theme-flavor'];
export const DEFAULT_THEME = CORE_DEFAULT_THEME;
 
/** ID of the CSS link element used by the blocking script to prevent FOUC. */
export const CSS_LINK_ID = 'turbo-theme-css';
 
// DOM element IDs and selectors - centralized to avoid magic strings
export const DOM_IDS = {
  THEME_FLAVOR_TRIGGER: 'theme-flavor-trigger',
  THEME_FLAVOR_TRIGGER_ICON: 'theme-flavor-trigger-icon',
  THEME_FLAVOR_TRIGGER_LABEL: 'theme-flavor-trigger-label',
  THEME_FLAVOR_MENU: 'theme-flavor-menu',
  THEME_FLAVOR_SELECT: 'theme-flavor-select',
} as const;
 
export const DOM_SELECTORS = {
  DROPDOWN_ITEMS: `#${DOM_IDS.THEME_FLAVOR_MENU} .dropdown-item.theme-item`,
  NAVBAR_DROPDOWN: '.navbar-item.has-dropdown',
  NAV_REPORTS: '[data-testid="nav-reports"]',
  NAVBAR_ITEM: '.navbar-item',
  HIGHLIGHT_PRE: '.highlight > pre',
  THEME_CSS_LINKS: 'link[id^="theme-"][id$="-css"]',
} as const;
 
export interface ThemeFamilyMeta {
  name: string;
  description: string;
}
 
export const THEME_FAMILIES: Record<ThemeFamily, ThemeFamilyMeta> = {
  bulma: { name: 'Bulma', description: 'Classic Bulma themes' },
  catppuccin: { name: 'Catppuccin', description: 'Soothing pastel themes' },
  dracula: { name: 'Dracula', description: 'Dark vampire aesthetic' },
  gruvbox: { name: 'Gruvbox', description: 'Retro groove palette with warm, earthy tones' },
  github: { name: 'GitHub', description: 'GitHub-inspired themes' },
  nord: { name: 'Nord', description: 'Arctic, north-bluish color palette' },
  'rose-pine': { name: 'Rosé Pine', description: 'All natural pine, faux fur and a bit of soho vibes' },
  solarized: { name: 'Solarized', description: 'Precision-balanced light and dark modes' },
  'tokyo-night': { name: 'Tokyo Night', description: 'Neon-infused nightscape with crisp contrast' },
};