/* * Tooltip color inversion. * * Tooltips should always contrast with the surface they float above: * - Light UI -> dark tooltip (dark surface, light text). * - Dark UI -> light tooltip (light surface, dark text). * * Rather than restyling every tooltip component, we re-map the neutral/text * design tokens on the `.burst-tooltip-invert` scope to the *opposite* theme's * values. Any tooltip whose markup uses the standard surface/text utilities * (bg-white, bg-gray-*, text-text-black, text-text-gray, border-gray-*, etc.) * then inverts automatically — no per-component color classes required. */ /* Light UI: render the tooltip with the dark theme's neutral palette. */ .burst-tooltip-invert { --gray-hue: var(--brand-hue); --color-white: oklch(0.234 0.0095 var(--gray-hue)); --color-gray-50: oklch(0.184 0.015 var(--gray-hue)); --color-gray-100: oklch(0.3 0.012 var(--gray-hue)); --color-gray-200: oklch(0.34 0.0147 var(--gray-hue)); --color-gray-300: oklch(0.37 0.0165 var(--gray-hue)); --color-gray-400: oklch(0.45 0.0145 var(--gray-hue)); --color-gray-500: oklch(0.85 0.0106 var(--gray-hue)); --color-gray-600: oklch(0.894 0.007 var(--gray-hue)); --color-gray-700: oklch(0.924 0.0052 var(--gray-hue)); --color-gray-800: oklch(0.9752 0.0017 var(--gray-hue)); --color-gray-900: oklch(0.9773 0 var(--gray-hue)); --color-gray-950: oklch(0.99 0.01 var(--gray-hue)); --color-text-black: oklch(1 0 0 / 0.9); --color-text-gray: oklch(0.85 0.0072 var(--gray-hue) / 0.9); --color-text-gray-light: oklch(0.7 0.0072 var(--gray-hue) / 0.9); --color-border: var(--color-gray-400); --color-divider: var(--color-gray-300); } /* Dark UI: render the tooltip with the light theme's neutral palette. Host body classes are listed too because some tooltips portal to . */ #burst-statistics.dark .burst-tooltip-invert, body.dashboard-default-dark-theme .burst-tooltip-invert, body.mainwp-default-dark-theme .burst-tooltip-invert, body.updraft-central-default-dark-theme .burst-tooltip-invert { --gray-hue: var(--blue-hue); --color-white: #ffffff; --color-gray-50: oklch(0.9773 0.003 var(--gray-hue)); --color-gray-100: oklch(0.9752 0.004 var(--gray-hue)); --color-gray-200: oklch(0.924 0.01 var(--gray-hue)); --color-gray-300: oklch(0.894 0.01 var(--gray-hue)); --color-gray-400: oklch(0.85 0.0106 var(--gray-hue)); --color-gray-500: oklch(0.735 0.0145 var(--gray-hue)); --color-gray-600: oklch(0.497 0.0165 var(--gray-hue)); --color-gray-700: oklch(0.352 0.0147 var(--gray-hue)); --color-gray-800: oklch(0.262 0.0133 var(--gray-hue)); --color-gray-900: oklch(0.184 0.0095 var(--gray-hue)); --color-gray-950: oklch(0.097 0.00475 var(--gray-hue)); --color-text-black: oklch(0.2 0.0017 var(--gray-hue) / 0.9); --color-text-gray: oklch(0.45 0.0072 var(--gray-hue) / 0.95); --color-text-gray-light: oklch(0.7 0.0072 var(--gray-hue) / 0.95); --color-border: var(--color-gray-400); --color-divider: var(--color-gray-300); }