/* * Midnight, a moody violet preset. * Usage: load this stylesheet, then set `data-fluid-brand="midnight"` on * (global) or any subtree you want themed. * * * * * Composes with the light/dark color scheme (data-fluid-theme). */ [data-fluid-brand="midnight"] { /* Brand palette, violet */ --fluid-color-brand-50: #f5f3ff; --fluid-color-brand-100: #ede9fe; --fluid-color-brand-200: #ddd6fe; --fluid-color-brand-300: #c4b5fd; --fluid-color-brand-400: #a78bfa; --fluid-color-brand-500: #8b5cf6; --fluid-color-brand-600: #7c3aed; --fluid-color-brand-700: #6d28d9; --fluid-color-brand-800: #5b21b6; --fluid-color-brand-900: #4c1d95; /* Softer corners */ --fluid-radius-md: 0.5rem; --fluid-radius-lg: 0.75rem; /* Slower, more deliberate motion */ --fluid-duration-fast: 160ms; --fluid-duration-normal: 240ms; /* Re-derive the brand-driven semantics at this scope, so the brand themes a subtree and not only :root (a custom property that reads the brand ramp is substituted where it is declared). */ --fluid-accent-base: var(--fluid-color-brand-600); --fluid-accent-hover: var(--fluid-color-brand-700); --fluid-accent-active: var(--fluid-color-brand-800); --fluid-focus-ring-color: var(--fluid-color-brand-500); } /* Dark scheme re-derives the accent from lighter brand steps, matching the base tokens, so a dark-mode subtree keeps its contrast. */ [data-fluid-theme="dark"] [data-fluid-brand="midnight"], [data-fluid-brand="midnight"][data-fluid-theme="dark"] { --fluid-accent-base: var(--fluid-color-brand-500); --fluid-accent-hover: var(--fluid-color-brand-400); --fluid-accent-active: var(--fluid-color-brand-300); --fluid-focus-ring-color: var(--fluid-color-brand-400); }