/* admin-tokens.css * Aliases Django-Admin's CSS custom properties (defined in admin/base.css and * admin/dark_mode.css) onto Muli's own --c-* / --font tokens. This lets a * variant — set via Constance CUSTOM_CSS — bleed through into the admin * surface (header, sidebar, tables, buttons, breadcrumbs, forms) without * touching any selector except the unavoidable Select2 override at the bottom. * * Loaded as the LAST stylesheet in admin/base_site.html so its :root block * wins over both admin/base.css and tokens.css / CUSTOM_CSS. * * The dark-mode blocks re-declare the same mappings — not new hex values — * because our --c-* tokens themselves switch with the active theme. */ /* Light path. Match admin/base.css's selector pair `html[data-theme=light], :root` * — without the attribute selector our `:root` rule loses on specificity whenever * the theme toggle has stamped data-theme="light" onto . */ :root, html[data-theme=light] { /* ── Header / Branding ── */ --primary: var(--c-primary); --secondary: var(--c-primary-dk); --accent: var(--c-primary-lt); --primary-fg: #fff; --header-color: var(--c-primary-lt); --header-branding-color: var(--c-primary-lt); --header-bg: var(--c-primary); --header-link-color: #fff; /* ── Body / Text ── */ --body-fg: var(--c-text); --body-bg: var(--c-bg); --body-quiet-color: var(--c-text-muted); --body-loud-color: var(--c-text); /* ── Links ── */ --link-fg: var(--c-link); --link-hover-color: var(--c-primary-dk); --link-selected-fg: var(--c-primary); /* ── Borders ── */ --hairline-color: var(--c-border); --border-color: var(--c-border); /* ── Buttons ── * Primary submit (e.g. "Sichern und weiter bearbeiten") = active green. * Default submit (e.g. "Sichern") = variant primary. Mirrors the rest of * the app where green = "go ahead, finalize" and primary = neutral CTA. */ --button-fg: #fff; --button-bg: var(--c-active-bg); --button-hover-bg: var(--c-active-dk); --default-button-bg: var(--c-primary); --default-button-hover-bg:var(--c-primary-dk); --close-button-bg: var(--c-text-muted); --close-button-hover-bg: var(--c-text); --delete-button-bg: var(--c-danger); --delete-button-hover-bg: var(--c-danger-dk); /* ── Object-Tools (top-right action buttons on edit pages) ── */ --object-tools-fg: #fff; --object-tools-bg: var(--c-primary-dk); --object-tools-hover-bg: var(--c-primary); /* ── Breadcrumbs ── */ --breadcrumbs-bg: var(--c-primary); --breadcrumbs-fg: var(--c-primary-lt); --breadcrumbs-link-fg: #fff; /* ── Surfaces / Sidebar / striped rows ── */ --darkened-bg: var(--c-surface); --selected-bg: var(--c-surface2); --selected-row: var(--c-info-bg); /* ── Errors / messages ── */ --error-fg: var(--c-danger); --message-success-bg: var(--c-success-bg); --message-warning-bg: var(--c-note-bg); --message-error-bg: var(--c-info-bg); /* placeholder until a --c-danger-bg token lands; keeps message readable */ /* ── Typo: variant font reaches the admin body too ── */ --font-family-primary: var(--font); --font-family-monospace: var(--font-mono); } /* Dark-mode pathways. We don't redefine any color values — the --c-* tokens * already shift with the theme, so re-declaring the same mappings under each * dark-mode selector is enough to override admin/dark_mode.css's own values. */ @media (prefers-color-scheme: dark) { :root, html[data-theme=auto] { --primary: var(--c-primary); --secondary: var(--c-primary-dk); --accent: var(--c-primary-lt); --primary-fg: #fff; --header-color: var(--c-primary-lt); --header-branding-color: var(--c-primary-lt); --header-bg: var(--c-primary); --header-link-color: #fff; --body-fg: var(--c-text); --body-bg: var(--c-bg); --body-quiet-color: var(--c-text-muted); --body-loud-color: var(--c-text); --link-fg: var(--c-link); --link-hover-color: var(--c-primary-dk); --link-selected-fg: var(--c-primary); --hairline-color: var(--c-border); --border-color: var(--c-border); --button-fg: #fff; --button-bg: var(--c-active-bg); --button-hover-bg: var(--c-active-dk); --default-button-bg: var(--c-primary); --default-button-hover-bg:var(--c-primary-dk); --close-button-bg: var(--c-text-muted); --close-button-hover-bg: var(--c-text); --delete-button-bg: var(--c-danger); --delete-button-hover-bg: var(--c-danger-dk); --object-tools-fg: #fff; --object-tools-bg: var(--c-primary-dk); --object-tools-hover-bg: var(--c-primary); --breadcrumbs-bg: var(--c-primary); --breadcrumbs-fg: var(--c-primary-lt); --breadcrumbs-link-fg: #fff; --darkened-bg: var(--c-surface); --selected-bg: var(--c-surface2); --selected-row: var(--c-info-bg); --error-fg: var(--c-danger); --message-success-bg: var(--c-success-bg); --message-warning-bg: var(--c-note-bg); --message-error-bg: var(--c-info-bg); --font-family-primary: var(--font); --font-family-monospace: var(--font-mono); } } html[data-theme=dark] { --primary: var(--c-primary); --secondary: var(--c-primary-dk); --accent: var(--c-primary-lt); --primary-fg: #fff; --header-color: var(--c-primary-lt); --header-branding-color: var(--c-primary-lt); --header-bg: var(--c-primary); --header-link-color: #fff; --body-fg: var(--c-text); --body-bg: var(--c-bg); --body-quiet-color: var(--c-text-muted); --body-loud-color: var(--c-text); --link-fg: var(--c-link); --link-hover-color: var(--c-primary-dk); --link-selected-fg: var(--c-primary); --hairline-color: var(--c-border); --border-color: var(--c-border); --button-fg: #fff; --button-bg: var(--c-active-bg); --button-hover-bg: var(--c-active-dk); --default-button-bg: var(--c-primary); --default-button-hover-bg:var(--c-primary-dk); --close-button-bg: var(--c-text-muted); --close-button-hover-bg: var(--c-text); --delete-button-bg: var(--c-danger); --delete-button-hover-bg: var(--c-danger-dk); --object-tools-fg: #fff; --object-tools-bg: var(--c-primary-dk); --object-tools-hover-bg: var(--c-primary); --breadcrumbs-bg: var(--c-primary); --breadcrumbs-fg: var(--c-primary-lt); --breadcrumbs-link-fg: #fff; --darkened-bg: var(--c-surface); --selected-bg: var(--c-surface2); --selected-row: var(--c-info-bg); --error-fg: var(--c-danger); --message-success-bg: var(--c-success-bg); --message-warning-bg: var(--c-note-bg); --message-error-bg: var(--c-info-bg); --font-family-primary: var(--font); --font-family-monospace: var(--font-mono); } /* Select2 is the one place where token-only discipline cannot hold: * vendor CSS hardcodes #5897fb for the highlighted-option background and * exposes no CSS variables, so we override the four selectors that draw it. */ .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover { background-color: var(--c-primary); color: #fff; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--c-surface2); border-color: var(--c-border); color: var(--c-text); } .select2-dropdown { border-color: var(--c-border); background-color: var(--c-bg); }