{"version":3,"file":"theme.css.cjs","names":[],"sources":["../../../src/styles/mixins/theme.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Color Theme ───────────────────────────────────────────────────────────────\n\nconst THEME_COLORS = ['primary', 'secondary', 'info', 'success', 'warning', 'error'] as const;\n\ntype ThemeColorName = (typeof THEME_COLORS)[number];\n\n// Standard token suffix for each --_theme-* variable. The 'shadow' slot maps\n// to --color-*-focus-shadow (not --color-*-shadow) and 'halo' maps to --halo-shadow-*.\nconst TOKEN_SUFFIX: Record<string, (color: ThemeColorName) => string> = {\n  backdrop: (c) => `var(--color-${c}-backdrop)`,\n  base: (c) => `var(--color-${c})`,\n  border: (c) => `var(--color-${c}-border)`,\n  content: (c) => `var(--color-${c}-content)`,\n  contrast: (c) => `var(--color-${c}-contrast)`,\n  focus: (c) => `var(--color-${c}-focus)`,\n  halo: (c) => `var(--halo-shadow-${c})`,\n  shadow: (c) => `var(--color-${c}-focus-shadow)`,\n};\n\nconst colorBlock = (color: ThemeColorName): string =>\n  `:host([color='${color}']) {\\n${Object.entries(TOKEN_SUFFIX)\n    .map(([slot, fn]) => `  --_theme-${slot}: ${fn(color)};`)\n    .join('\\n')}\\n}`;\n\nexport const colorThemeMixin = css`\n  :host {\n    --_theme-base: var(--color-neutral);\n    --_theme-content: var(--color-neutral-content);\n    --_theme-contrast: var(--color-neutral-contrast);\n    --_theme-focus: var(--color-neutral-focus);\n    --_theme-backdrop: var(--color-neutral-backdrop);\n    --_theme-border: var(--color-neutral-border);\n    --_theme-shadow: var(--color-neutral-focus-shadow);\n    --_theme-halo: var(--halo-shadow-neutral);\n  }\n\n  ${THEME_COLORS.map(colorBlock).join('\\n\\n  ')}\n`;\n\n// ── Elevation ─────────────────────────────────────────────────────────────────\n\n/**\n * Elevation Mixin\n *\n * Provides elevation shadow levels (0-5) via CSS custom properties.\n * Sets the --_shadow variable based on elevation attribute.\n *\n * @example\n * ```ts\n * import { elevationMixin } from '../../styles';\n *\n * return {\n *   styles: [elevationMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const elevationMixin = css`\n  /* ========================================\n     Elevation Levels (0-5)\n     ======================================== */\n\n  :host([elevation='0']) {\n    --_shadow: none;\n  }\n\n  :host([elevation='1']) {\n    --_shadow: var(--shadow-sm);\n  }\n\n  :host([elevation='2']) {\n    --_shadow: var(--shadow-md);\n  }\n\n  :host([elevation='3']) {\n    --_shadow: var(--shadow-lg);\n  }\n\n  :host([elevation='4']) {\n    --_shadow: var(--shadow-xl);\n  }\n\n  :host([elevation='5']) {\n    --_shadow: var(--shadow-2xl);\n  }\n`;\n\n// ── Forced Colors ─────────────────────────────────────────────────────────────\n\n/**\n * Forced Colors Mixin\n *\n * Ensures components are visually distinct in Windows High Contrast / forced-colors mode.\n * The browser already overrides `color`, `background-color`, and `border-color` to system\n * color keywords, but components that rely solely on `background` for visual identity\n * (no border) or that use `box-shadow` for focus rings need explicit fallbacks.\n *\n * Usage: apply to any component that has a background but no natural border.\n *\n * @example\n * ```ts\n * import { forcedColorsMixin } from '../../styles';\n *\n * return {\n *   styles: [forcedColorsMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const forcedColorsMixin = css`\n  @media (forced-colors: active) {\n    :host {\n      border: 1px solid ButtonText;\n    }\n  }\n`;\n\n/**\n * Forced Colors Focus Ring Mixin\n *\n * Replaces box-shadow focus rings (which are removed in forced-colors mode)\n * with a proper system-color outline.\n *\n * @param selector - CSS selector for the focusable element inside the host\n *\n * @example\n * ```ts\n * import { forcedColorsFocusMixin } from '../../styles';\n *\n * return {\n *   styles: [forcedColorsFocusMixin('button'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const forcedColorsFocusMixin = (selector: string) => css`\n  @media (forced-colors: active) {\n    ${selector}:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n      box-shadow: none;\n    }\n  }\n`;\n\n/**\n * Forced Colors Form Control Mixin\n *\n * For custom form controls (checkbox, radio, switch, slider) that paint their\n * own visual state. Maps checked/active state to system colors so they remain\n * distinguishable in forced-colors mode.\n *\n * @example\n * ```ts\n * import { forcedColorsFormControlMixin } from '../../styles';\n *\n * return {\n *   styles: [forcedColorsFormControlMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const forcedColorsFormControlMixin = css`\n  @media (forced-colors: active) {\n    :host {\n      forced-color-adjust: none;\n      color: ButtonText;\n      background: ButtonFace;\n      border: 1px solid ButtonText;\n    }\n\n    :host([checked]) {\n      background: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n    }\n\n    :host([disabled]) {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n`;\n"],"mappings":"+BAIA,IAAM,EAAe,CAAC,UAAW,YAAa,OAAQ,UAAW,UAAW,OAAO,EAM7E,EAAkE,CACtE,SAAW,GAAM,eAAe,EAAE,YAClC,KAAO,GAAM,eAAe,EAAE,GAC9B,OAAS,GAAM,eAAe,EAAE,UAChC,QAAU,GAAM,eAAe,EAAE,WACjC,SAAW,GAAM,eAAe,EAAE,YAClC,MAAQ,GAAM,eAAe,EAAE,SAC/B,KAAO,GAAM,qBAAqB,EAAE,GACpC,OAAS,GAAM,eAAe,EAAE,eAClC,EAOa,EAAkB,EAAA,GAAG;;;;;;;;;;;;IAY9B,EAAa,IAjBG,GAClB,iBAAiB,EAAM,SAAS,OAAO,QAAQ,CAAY,CAAC,CACzD,KAAK,CAAC,EAAM,KAAQ,cAAc,EAAK,IAAI,EAAG,CAAK,EAAE,EAAE,CAAC,CACxD,KAAK;CAAI,EAAE,IAce,CAAC,CAAC,KAAK;;GAAQ,EAAE;EAqBnC,EAAiB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDpB,EAAoB,EAAA,GAAG;;;;;;EA0BvB,EAA0B,GAAqB,EAAA,GAAG;;MAEzD,EAAS;;;;;;EAyBF,EAA+B,EAAA,GAAG"}