/* ========================================================================== MagspirePrep · theme-additions.css (standalone stylesheet — nothing to paste) ========================================================================== WHAT THIS IS Optional. Extra design tokens for NEW components (Check compat.css), so that new CSS never depends on `color-mix() (Read about this below)`. Nothing in it is required for the existing site to work, and nothing in it changes how any current page looks.. THE ONE IDEA Tailwind's `/opacity` utilities (`bg-primary/10`, `text-base-content/60`) compile to `color-mix()`: a 10 % panel becomes 100 %. Every value in this file bakes the alpha in at authoring time with plain `rgba()`, which every browser understands: bg-primary/10 → color-mix(in oklab, var(--color-primary) 10%, transparent) old phones --tint-primary-10 → rgba(79, 70, 229, 0.10) everywhere ========================================================================== */ :root { /* brand tints */ --tint-primary-5: rgba(79, 70, 229, 0.05); --tint-primary-8: rgba(79, 70, 229, 0.08); --tint-primary-10: rgba(79, 70, 229, 0.10); --tint-primary-12: rgba(79, 70, 229, 0.12); --tint-primary-15: rgba(79, 70, 229, 0.15); --tint-primary-20: rgba(79, 70, 229, 0.20); --tint-primary-30: rgba(79, 70, 229, 0.30); --tint-primary-40: rgba(79, 70, 229, 0.40); --tint-secondary-10: rgba(124, 58, 237, 0.10); --tint-accent-10: rgba(14, 165, 233, 0.10); /* semantic tints */ --tint-info-10: rgba(2, 132, 199, 0.10); --tint-info-15: rgba(2, 132, 199, 0.15); --tint-success-5: rgba(22, 163, 74, 0.05); --tint-success-8: rgba(22, 163, 74, 0.08); --tint-success-10: rgba(22, 163, 74, 0.10); --tint-success-15: rgba(22, 163, 74, 0.15); --tint-warning-10: rgba(217, 119, 6, 0.10); --tint-warning-15: rgba(217, 119, 6, 0.15); --tint-error-10: rgba(220, 38, 38, 0.10); --tint-error-15: rgba(220, 38, 38, 0.15); /* content tints: muted text, hairlines, dividers */ --tint-ink-5: rgba(15, 23, 42, 0.05); --tint-ink-10: rgba(15, 23, 42, 0.10); --tint-ink-15: rgba(15, 23, 42, 0.15); --tint-ink-20: rgba(15, 23, 42, 0.20); --tint-ink-40: rgba(15, 23, 42, 0.40); --tint-ink-50: rgba(15, 23, 42, 0.50); --tint-ink-60: rgba(15, 23, 42, 0.60); --tint-ink-65: rgba(15, 23, 42, 0.65); --tint-ink-70: rgba(15, 23, 42, 0.70); /* surfaces */ --tint-base-100-80: rgba(255, 255, 255, 0.80); /* sticky header over content */ --tint-base-200-50: rgba(248, 250, 252, 0.50); --tint-black-60: rgba(0, 0, 0, 0.60); /* modal scrims */ --surface-1: var(--color-base-100); --surface-2: var(--color-base-200); /* focus ring, usable everywhere */ --ring-primary: 0 0 0 3px rgba(79, 70, 229, 0.35); } [data-theme="dark"] { --tint-primary-5: rgba(99, 102, 241, 0.05); --tint-primary-8: rgba(99, 102, 241, 0.08); --tint-primary-10: rgba(99, 102, 241, 0.10); --tint-primary-12: rgba(99, 102, 241, 0.12); --tint-primary-15: rgba(99, 102, 241, 0.15); --tint-primary-20: rgba(99, 102, 241, 0.20); --tint-primary-30: rgba(99, 102, 241, 0.30); --tint-primary-40: rgba(99, 102, 241, 0.40); --tint-secondary-10: rgba(167, 139, 250, 0.10); --tint-accent-10: rgba(56, 189, 248, 0.10); --tint-info-10: rgba(56, 189, 248, 0.10); --tint-info-15: rgba(56, 189, 248, 0.15); --tint-success-5: rgba(74, 222, 128, 0.05); --tint-success-8: rgba(74, 222, 128, 0.08); --tint-success-10: rgba(74, 222, 128, 0.10); --tint-success-15: rgba(74, 222, 128, 0.15); --tint-warning-10: rgba(251, 191, 36, 0.10); --tint-warning-15: rgba(251, 191, 36, 0.15); --tint-error-10: rgba(248, 113, 113, 0.10); --tint-error-15: rgba(248, 113, 113, 0.15); --tint-ink-5: rgba(241, 245, 249, 0.05); --tint-ink-10: rgba(241, 245, 249, 0.10); --tint-ink-15: rgba(241, 245, 249, 0.15); --tint-ink-20: rgba(241, 245, 249, 0.20); --tint-ink-40: rgba(241, 245, 249, 0.40); --tint-ink-50: rgba(241, 245, 249, 0.50); --tint-ink-60: rgba(241, 245, 249, 0.60); --tint-ink-65: rgba(241, 245, 249, 0.65); --tint-ink-70: rgba(241, 245, 249, 0.70); --tint-base-100-80: rgba(15, 23, 42, 0.80); --tint-base-200-50: rgba(26, 36, 54, 0.50); --tint-black-60: rgba(0, 0, 0, 0.70); --ring-primary: 0 0 0 3px rgba(99, 102, 241, 0.40); } /* ========================================================================== 2. Helper classes Unconditional on purpose: rgba() is universal, so these need no fallback and no @supports guard. Free names — verified against dist/styles.css, main.css, home.css, news_carousel.css and help_widget.css. ========================================================================== */ /* tinted surfaces */ .bg-tint-primary { background-color: var(--tint-primary-10); } .bg-tint-primary-strong { background-color: var(--tint-primary-15); } .bg-tint-info { background-color: var(--tint-info-15); } .bg-tint-success { background-color: var(--tint-success-15); } .bg-tint-warning { background-color: var(--tint-warning-15); } .bg-tint-error { background-color: var(--tint-error-15); } .bg-tint-neutral { background-color: var(--tint-ink-10); } /* muted text */ .text-muted { color: var(--tint-ink-60); } .text-muted-soft { color: var(--tint-ink-50); } /* hairlines and outlines */ .border-tint { border-color: var(--tint-ink-15); } .border-tint-primary { border-color: var(--tint-primary-20); } .border-tint-strong { border-color: var(--tint-ink-20); } .divide-tint > * + * { border-top-color: var(--tint-ink-10); } /* the square icon tiles used on the landing page and dashboards */ .icon-tile { width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-tile-info { background-color: var(--tint-info-15); color: var(--color-info); } .icon-tile-warning { background-color: var(--tint-warning-15); color: var(--color-warning); } .icon-tile-success { background-color: var(--tint-success-15); color: var(--color-success); } .icon-tile-primary { background-color: var(--tint-primary-15); color: var(--color-primary); } .icon-tile-danger { background-color: var(--tint-error-15); color: var(--color-error); } /* focus ring that does not depend on color-mix either */ .focus-ring-primary:focus-visible { outline: none; box-shadow: var(--ring-primary); }