d68768ad84
Phase 3: Rewrite admin/themes.css as a bridge mapping DaisyUI --color-* variables to --t-* theme tokens. Admin components still reference --color-base-100, --color-primary etc but these now resolve through the bridge to the merchant's theme colours. Status colours (error, success, warning, info) stay hardcoded. Add .themed wrapper with data-mood to admin_root.html.heex. Remove the old data-theme JS toggle script — dark mode now comes from the theme system mood setting. Admin inherits theme colours, typography, and shape from the merchant's chosen theme. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
38 lines
1.4 KiB
CSS
38 lines
1.4 KiB
CSS
/* Admin theme bridge — maps DaisyUI --color-* variables to --t-* theme tokens.
|
|
Admin components still reference --color-*, which resolve through this bridge
|
|
to the merchant's chosen theme. Phase 4 replaces --color-* with --t-* directly,
|
|
then this file gets deleted. */
|
|
|
|
.themed {
|
|
/* Surface colours */
|
|
--color-base-100: var(--t-surface-base);
|
|
--color-base-200: var(--t-surface-sunken);
|
|
--color-base-300: var(--t-border-default);
|
|
--color-base-content: var(--t-text-primary);
|
|
|
|
/* Brand colours */
|
|
--color-primary: var(--t-accent);
|
|
--color-primary-content: var(--t-text-inverse);
|
|
--color-secondary: var(--t-text-secondary);
|
|
--color-secondary-content: var(--t-text-inverse);
|
|
--color-accent: var(--t-text-primary);
|
|
--color-accent-content: var(--t-text-inverse);
|
|
--color-neutral: var(--t-text-tertiary);
|
|
--color-neutral-content: var(--t-text-inverse);
|
|
|
|
/* Status colours — fixed, not themed */
|
|
--color-info: oklch(62% 0.214 259.815);
|
|
--color-info-content: oklch(97% 0.014 254.604);
|
|
--color-success: oklch(70% 0.14 182.503);
|
|
--color-success-content: oklch(98% 0.014 180.72);
|
|
--color-warning: oklch(66% 0.179 58.318);
|
|
--color-warning-content: oklch(98% 0.022 95.277);
|
|
--color-error: oklch(58% 0.253 17.585);
|
|
--color-error-content: oklch(96% 0.015 12.422);
|
|
|
|
/* Shape — mapped to theme shape tokens */
|
|
--radius-box: var(--t-radius-card);
|
|
--radius-selector: var(--t-radius-button);
|
|
--radius-field: var(--t-radius-input);
|
|
}
|