/** * Theme presets for DuskMoon Elements * * Each theme provides a complete set of CSS custom properties * that can be applied to :root or any container element. * * Usage: * ```html * * ``` */ /** * Sunshine theme (light) — warm, friendly, high contrast * Default light theme with blue primary */ export declare const sunshineTheme = "\n /* Primary */\n --color-primary: oklch(60% 0.15 250);\n --color-primary-content: white;\n --color-on-primary: white;\n\n /* Secondary */\n --color-secondary: oklch(55% 0.1 250);\n --color-secondary-content: white;\n --color-on-secondary: white;\n\n /* Tertiary */\n --color-tertiary: oklch(50% 0.12 300);\n --color-tertiary-content: white;\n --color-on-tertiary: white;\n\n /* Surface */\n --color-surface: white;\n --color-surface-container: oklch(97% 0.01 250);\n --color-surface-container-low: oklch(98% 0.005 250);\n --color-surface-container-high: oklch(94% 0.01 250);\n --color-surface-variant: oklch(92% 0.01 250);\n --color-on-surface: oklch(25% 0.02 250);\n --color-on-surface-variant: oklch(45% 0.02 250);\n --color-inverse-surface: oklch(25% 0.02 250);\n --color-inverse-on-surface: oklch(95% 0.01 250);\n\n /* Outline */\n --color-outline: oklch(75% 0.02 250);\n --color-outline-variant: oklch(85% 0.01 250);\n\n /* Semantic */\n --color-success: oklch(60% 0.15 145);\n --color-on-success: white;\n --color-warning: oklch(75% 0.15 85);\n --color-on-warning: oklch(25% 0.05 85);\n --color-error: oklch(55% 0.2 25);\n --color-on-error: white;\n --color-info: oklch(60% 0.15 250);\n --color-on-info: white;\n\n /* Shadows */\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n /* Focus */\n --focus-ring: 0 0 0 2px var(--color-primary);\n --focus-ring-offset: 0 0 0 2px white, 0 0 0 4px var(--color-primary);\n"; /** * Moonlight theme (dark) — elegant, modern dark mode */ export declare const moonlightTheme = "\n /* Primary */\n --color-primary: oklch(72% 0.15 250);\n --color-primary-content: oklch(20% 0.05 250);\n --color-on-primary: oklch(20% 0.05 250);\n\n /* Secondary */\n --color-secondary: oklch(68% 0.1 250);\n --color-secondary-content: oklch(20% 0.05 250);\n --color-on-secondary: oklch(20% 0.05 250);\n\n /* Tertiary */\n --color-tertiary: oklch(70% 0.12 300);\n --color-tertiary-content: oklch(20% 0.05 300);\n --color-on-tertiary: oklch(20% 0.05 300);\n\n /* Surface */\n --color-surface: oklch(18% 0.02 250);\n --color-surface-container: oklch(22% 0.02 250);\n --color-surface-container-low: oklch(20% 0.02 250);\n --color-surface-container-high: oklch(26% 0.02 250);\n --color-surface-variant: oklch(30% 0.02 250);\n --color-on-surface: oklch(92% 0.01 250);\n --color-on-surface-variant: oklch(75% 0.02 250);\n --color-inverse-surface: oklch(92% 0.01 250);\n --color-inverse-on-surface: oklch(25% 0.02 250);\n\n /* Outline */\n --color-outline: oklch(45% 0.02 250);\n --color-outline-variant: oklch(35% 0.02 250);\n\n /* Semantic */\n --color-success: oklch(70% 0.15 145);\n --color-on-success: oklch(20% 0.05 145);\n --color-warning: oklch(80% 0.12 85);\n --color-on-warning: oklch(20% 0.05 85);\n --color-error: oklch(65% 0.2 25);\n --color-on-error: oklch(20% 0.05 25);\n --color-info: oklch(70% 0.15 250);\n --color-on-info: oklch(20% 0.05 250);\n\n /* Shadows */\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);\n\n /* Focus */\n --focus-ring: 0 0 0 2px var(--color-primary);\n --focus-ring-offset: 0 0 0 2px oklch(18% 0.02 250), 0 0 0 4px var(--color-primary);\n"; /** * Ocean theme — deep blue/teal palette, calm and professional */ export declare const oceanTheme = "\n /* Primary */\n --color-primary: oklch(58% 0.12 210);\n --color-primary-content: white;\n --color-on-primary: white;\n\n /* Secondary */\n --color-secondary: oklch(55% 0.08 185);\n --color-secondary-content: white;\n --color-on-secondary: white;\n\n /* Tertiary */\n --color-tertiary: oklch(60% 0.1 170);\n --color-tertiary-content: white;\n --color-on-tertiary: white;\n\n /* Surface */\n --color-surface: oklch(98% 0.005 210);\n --color-surface-container: oklch(96% 0.01 210);\n --color-surface-container-low: oklch(97% 0.005 210);\n --color-surface-container-high: oklch(93% 0.01 210);\n --color-surface-variant: oklch(91% 0.01 210);\n --color-on-surface: oklch(22% 0.02 210);\n --color-on-surface-variant: oklch(40% 0.02 210);\n --color-inverse-surface: oklch(22% 0.02 210);\n --color-inverse-on-surface: oklch(95% 0.01 210);\n\n /* Outline */\n --color-outline: oklch(72% 0.02 210);\n --color-outline-variant: oklch(82% 0.01 210);\n\n /* Semantic */\n --color-success: oklch(62% 0.14 155);\n --color-on-success: white;\n --color-warning: oklch(76% 0.14 80);\n --color-on-warning: oklch(25% 0.05 80);\n --color-error: oklch(56% 0.18 20);\n --color-on-error: white;\n --color-info: oklch(58% 0.12 210);\n --color-on-info: white;\n\n /* Shadows */\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n /* Focus */\n --focus-ring: 0 0 0 2px var(--color-primary);\n --focus-ring-offset: 0 0 0 2px oklch(98% 0.005 210), 0 0 0 4px var(--color-primary);\n"; /** * Forest theme — earthy greens and warm browns, natural feel */ export declare const forestTheme = "\n /* Primary */\n --color-primary: oklch(52% 0.12 155);\n --color-primary-content: white;\n --color-on-primary: white;\n\n /* Secondary */\n --color-secondary: oklch(50% 0.08 70);\n --color-secondary-content: white;\n --color-on-secondary: white;\n\n /* Tertiary */\n --color-tertiary: oklch(55% 0.1 120);\n --color-tertiary-content: white;\n --color-on-tertiary: white;\n\n /* Surface */\n --color-surface: oklch(97% 0.005 90);\n --color-surface-container: oklch(95% 0.01 90);\n --color-surface-container-low: oklch(96% 0.005 90);\n --color-surface-container-high: oklch(92% 0.01 90);\n --color-surface-variant: oklch(90% 0.01 90);\n --color-on-surface: oklch(22% 0.03 90);\n --color-on-surface-variant: oklch(40% 0.03 90);\n --color-inverse-surface: oklch(22% 0.03 90);\n --color-inverse-on-surface: oklch(95% 0.01 90);\n\n /* Outline */\n --color-outline: oklch(70% 0.03 90);\n --color-outline-variant: oklch(82% 0.01 90);\n\n /* Semantic */\n --color-success: oklch(58% 0.14 145);\n --color-on-success: white;\n --color-warning: oklch(74% 0.14 85);\n --color-on-warning: oklch(25% 0.05 85);\n --color-error: oklch(54% 0.18 25);\n --color-on-error: white;\n --color-info: oklch(55% 0.12 230);\n --color-on-info: white;\n\n /* Shadows */\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n /* Focus */\n --focus-ring: 0 0 0 2px var(--color-primary);\n --focus-ring-offset: 0 0 0 2px oklch(97% 0.005 90), 0 0 0 4px var(--color-primary);\n"; /** * Rosé theme — soft pinks and warm tones, elegant and modern */ export declare const roseTheme = "\n /* Primary */\n --color-primary: oklch(60% 0.16 350);\n --color-primary-content: white;\n --color-on-primary: white;\n\n /* Secondary */\n --color-secondary: oklch(55% 0.1 330);\n --color-secondary-content: white;\n --color-on-secondary: white;\n\n /* Tertiary */\n --color-tertiary: oklch(58% 0.12 15);\n --color-tertiary-content: white;\n --color-on-tertiary: white;\n\n /* Surface */\n --color-surface: oklch(98% 0.005 350);\n --color-surface-container: oklch(96% 0.01 350);\n --color-surface-container-low: oklch(97% 0.005 350);\n --color-surface-container-high: oklch(93% 0.01 350);\n --color-surface-variant: oklch(91% 0.01 350);\n --color-on-surface: oklch(22% 0.02 350);\n --color-on-surface-variant: oklch(42% 0.02 350);\n --color-inverse-surface: oklch(22% 0.02 350);\n --color-inverse-on-surface: oklch(95% 0.005 350);\n\n /* Outline */\n --color-outline: oklch(72% 0.02 350);\n --color-outline-variant: oklch(84% 0.01 350);\n\n /* Semantic */\n --color-success: oklch(62% 0.14 148);\n --color-on-success: white;\n --color-warning: oklch(76% 0.14 82);\n --color-on-warning: oklch(25% 0.05 82);\n --color-error: oklch(55% 0.2 22);\n --color-on-error: white;\n --color-info: oklch(58% 0.14 245);\n --color-on-info: white;\n\n /* Shadows */\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n /* Focus */\n --focus-ring: 0 0 0 2px var(--color-primary);\n --focus-ring-offset: 0 0 0 2px oklch(98% 0.005 350), 0 0 0 4px var(--color-primary);\n"; /** * Map of all available theme presets */ export declare const themes: { readonly sunshine: "\n /* Primary */\n --color-primary: oklch(60% 0.15 250);\n --color-primary-content: white;\n --color-on-primary: white;\n\n /* Secondary */\n --color-secondary: oklch(55% 0.1 250);\n --color-secondary-content: white;\n --color-on-secondary: white;\n\n /* Tertiary */\n --color-tertiary: oklch(50% 0.12 300);\n --color-tertiary-content: white;\n --color-on-tertiary: white;\n\n /* Surface */\n --color-surface: white;\n --color-surface-container: oklch(97% 0.01 250);\n --color-surface-container-low: oklch(98% 0.005 250);\n --color-surface-container-high: oklch(94% 0.01 250);\n --color-surface-variant: oklch(92% 0.01 250);\n --color-on-surface: oklch(25% 0.02 250);\n --color-on-surface-variant: oklch(45% 0.02 250);\n --color-inverse-surface: oklch(25% 0.02 250);\n --color-inverse-on-surface: oklch(95% 0.01 250);\n\n /* Outline */\n --color-outline: oklch(75% 0.02 250);\n --color-outline-variant: oklch(85% 0.01 250);\n\n /* Semantic */\n --color-success: oklch(60% 0.15 145);\n --color-on-success: white;\n --color-warning: oklch(75% 0.15 85);\n --color-on-warning: oklch(25% 0.05 85);\n --color-error: oklch(55% 0.2 25);\n --color-on-error: white;\n --color-info: oklch(60% 0.15 250);\n --color-on-info: white;\n\n /* Shadows */\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n /* Focus */\n --focus-ring: 0 0 0 2px var(--color-primary);\n --focus-ring-offset: 0 0 0 2px white, 0 0 0 4px var(--color-primary);\n"; readonly moonlight: "\n /* Primary */\n --color-primary: oklch(72% 0.15 250);\n --color-primary-content: oklch(20% 0.05 250);\n --color-on-primary: oklch(20% 0.05 250);\n\n /* Secondary */\n --color-secondary: oklch(68% 0.1 250);\n --color-secondary-content: oklch(20% 0.05 250);\n --color-on-secondary: oklch(20% 0.05 250);\n\n /* Tertiary */\n --color-tertiary: oklch(70% 0.12 300);\n --color-tertiary-content: oklch(20% 0.05 300);\n --color-on-tertiary: oklch(20% 0.05 300);\n\n /* Surface */\n --color-surface: oklch(18% 0.02 250);\n --color-surface-container: oklch(22% 0.02 250);\n --color-surface-container-low: oklch(20% 0.02 250);\n --color-surface-container-high: oklch(26% 0.02 250);\n --color-surface-variant: oklch(30% 0.02 250);\n --color-on-surface: oklch(92% 0.01 250);\n --color-on-surface-variant: oklch(75% 0.02 250);\n --color-inverse-surface: oklch(92% 0.01 250);\n --color-inverse-on-surface: oklch(25% 0.02 250);\n\n /* Outline */\n --color-outline: oklch(45% 0.02 250);\n --color-outline-variant: oklch(35% 0.02 250);\n\n /* Semantic */\n --color-success: oklch(70% 0.15 145);\n --color-on-success: oklch(20% 0.05 145);\n --color-warning: oklch(80% 0.12 85);\n --color-on-warning: oklch(20% 0.05 85);\n --color-error: oklch(65% 0.2 25);\n --color-on-error: oklch(20% 0.05 25);\n --color-info: oklch(70% 0.15 250);\n --color-on-info: oklch(20% 0.05 250);\n\n /* Shadows */\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);\n\n /* Focus */\n --focus-ring: 0 0 0 2px var(--color-primary);\n --focus-ring-offset: 0 0 0 2px oklch(18% 0.02 250), 0 0 0 4px var(--color-primary);\n"; readonly ocean: "\n /* Primary */\n --color-primary: oklch(58% 0.12 210);\n --color-primary-content: white;\n --color-on-primary: white;\n\n /* Secondary */\n --color-secondary: oklch(55% 0.08 185);\n --color-secondary-content: white;\n --color-on-secondary: white;\n\n /* Tertiary */\n --color-tertiary: oklch(60% 0.1 170);\n --color-tertiary-content: white;\n --color-on-tertiary: white;\n\n /* Surface */\n --color-surface: oklch(98% 0.005 210);\n --color-surface-container: oklch(96% 0.01 210);\n --color-surface-container-low: oklch(97% 0.005 210);\n --color-surface-container-high: oklch(93% 0.01 210);\n --color-surface-variant: oklch(91% 0.01 210);\n --color-on-surface: oklch(22% 0.02 210);\n --color-on-surface-variant: oklch(40% 0.02 210);\n --color-inverse-surface: oklch(22% 0.02 210);\n --color-inverse-on-surface: oklch(95% 0.01 210);\n\n /* Outline */\n --color-outline: oklch(72% 0.02 210);\n --color-outline-variant: oklch(82% 0.01 210);\n\n /* Semantic */\n --color-success: oklch(62% 0.14 155);\n --color-on-success: white;\n --color-warning: oklch(76% 0.14 80);\n --color-on-warning: oklch(25% 0.05 80);\n --color-error: oklch(56% 0.18 20);\n --color-on-error: white;\n --color-info: oklch(58% 0.12 210);\n --color-on-info: white;\n\n /* Shadows */\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n /* Focus */\n --focus-ring: 0 0 0 2px var(--color-primary);\n --focus-ring-offset: 0 0 0 2px oklch(98% 0.005 210), 0 0 0 4px var(--color-primary);\n"; readonly forest: "\n /* Primary */\n --color-primary: oklch(52% 0.12 155);\n --color-primary-content: white;\n --color-on-primary: white;\n\n /* Secondary */\n --color-secondary: oklch(50% 0.08 70);\n --color-secondary-content: white;\n --color-on-secondary: white;\n\n /* Tertiary */\n --color-tertiary: oklch(55% 0.1 120);\n --color-tertiary-content: white;\n --color-on-tertiary: white;\n\n /* Surface */\n --color-surface: oklch(97% 0.005 90);\n --color-surface-container: oklch(95% 0.01 90);\n --color-surface-container-low: oklch(96% 0.005 90);\n --color-surface-container-high: oklch(92% 0.01 90);\n --color-surface-variant: oklch(90% 0.01 90);\n --color-on-surface: oklch(22% 0.03 90);\n --color-on-surface-variant: oklch(40% 0.03 90);\n --color-inverse-surface: oklch(22% 0.03 90);\n --color-inverse-on-surface: oklch(95% 0.01 90);\n\n /* Outline */\n --color-outline: oklch(70% 0.03 90);\n --color-outline-variant: oklch(82% 0.01 90);\n\n /* Semantic */\n --color-success: oklch(58% 0.14 145);\n --color-on-success: white;\n --color-warning: oklch(74% 0.14 85);\n --color-on-warning: oklch(25% 0.05 85);\n --color-error: oklch(54% 0.18 25);\n --color-on-error: white;\n --color-info: oklch(55% 0.12 230);\n --color-on-info: white;\n\n /* Shadows */\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n /* Focus */\n --focus-ring: 0 0 0 2px var(--color-primary);\n --focus-ring-offset: 0 0 0 2px oklch(97% 0.005 90), 0 0 0 4px var(--color-primary);\n"; readonly rose: "\n /* Primary */\n --color-primary: oklch(60% 0.16 350);\n --color-primary-content: white;\n --color-on-primary: white;\n\n /* Secondary */\n --color-secondary: oklch(55% 0.1 330);\n --color-secondary-content: white;\n --color-on-secondary: white;\n\n /* Tertiary */\n --color-tertiary: oklch(58% 0.12 15);\n --color-tertiary-content: white;\n --color-on-tertiary: white;\n\n /* Surface */\n --color-surface: oklch(98% 0.005 350);\n --color-surface-container: oklch(96% 0.01 350);\n --color-surface-container-low: oklch(97% 0.005 350);\n --color-surface-container-high: oklch(93% 0.01 350);\n --color-surface-variant: oklch(91% 0.01 350);\n --color-on-surface: oklch(22% 0.02 350);\n --color-on-surface-variant: oklch(42% 0.02 350);\n --color-inverse-surface: oklch(22% 0.02 350);\n --color-inverse-on-surface: oklch(95% 0.005 350);\n\n /* Outline */\n --color-outline: oklch(72% 0.02 350);\n --color-outline-variant: oklch(84% 0.01 350);\n\n /* Semantic */\n --color-success: oklch(62% 0.14 148);\n --color-on-success: white;\n --color-warning: oklch(76% 0.14 82);\n --color-on-warning: oklch(25% 0.05 82);\n --color-error: oklch(55% 0.2 22);\n --color-on-error: white;\n --color-info: oklch(58% 0.14 245);\n --color-on-info: white;\n\n /* Shadows */\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n /* Focus */\n --focus-ring: 0 0 0 2px var(--color-primary);\n --focus-ring-offset: 0 0 0 2px oklch(98% 0.005 350), 0 0 0 4px var(--color-primary);\n"; }; export type ThemeName = keyof typeof themes; /** * Apply a theme to an element by setting CSS custom properties * * @param element - The element to apply the theme to (usually document.documentElement) * @param theme - Theme name or custom CSS properties string */ export declare function applyTheme(element: HTMLElement, theme: ThemeName | string): void; //# sourceMappingURL=themes.d.ts.map