61 lines
2.8 KiB
CSS
61 lines
2.8 KiB
CSS
/* App-level semantic tokens; themes restyle them under [data-theme] scopes.
|
|
No light-dark() in html-level declarations — postcss-preset-mantine
|
|
rewrites it into a descendant selector that never matches <html>. Use
|
|
explicit [data-mantine-color-scheme] blocks. */
|
|
|
|
:root {
|
|
/* accolades */
|
|
--flxn-gold: gold;
|
|
--flxn-silver: var(--mantine-color-gray-5);
|
|
--flxn-bronze: var(--mantine-color-orange-6);
|
|
|
|
/* toast icons */
|
|
--flxn-toast-success: lightgreen;
|
|
--flxn-toast-error: lightcoral;
|
|
|
|
/* surfaces & decoration */
|
|
--flxn-overlay: rgba(0, 0, 0, 0.4);
|
|
--flxn-dotgrid-color: var(--mantine-color-default-border);
|
|
--flxn-pop-shadow: rgba(0, 0, 0, 0.3);
|
|
--flxn-avatar-radius: 50%;
|
|
--flxn-avatar-border: 1px solid var(--mantine-color-default-border);
|
|
--flxn-badge-radius: 12px;
|
|
|
|
/* text on accent fills: black/white from the cascaded fill (oklch block
|
|
below overrides this fallback) */
|
|
--flxn-on-accent: var(--mantine-primary-color-contrast);
|
|
|
|
/* light-scheme values */
|
|
--flxn-podium-1-bg: color-mix(in srgb, var(--mantine-color-yellow-4) 10%, var(--mantine-color-white));
|
|
--flxn-podium-1-border: color-mix(in srgb, var(--mantine-color-yellow-6) 45%, var(--mantine-color-gray-3));
|
|
--flxn-podium-1-label: var(--mantine-color-yellow-8);
|
|
--flxn-podium-2-bg: color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-white));
|
|
--flxn-podium-2-border: var(--mantine-color-gray-4);
|
|
--flxn-podium-2-label: var(--mantine-color-gray-6);
|
|
--flxn-podium-3-bg: color-mix(in srgb, var(--mantine-color-orange-5) 8%, var(--mantine-color-white));
|
|
--flxn-podium-3-border: color-mix(in srgb, var(--mantine-color-orange-6) 35%, var(--mantine-color-gray-3));
|
|
--flxn-podium-3-label: var(--mantine-color-orange-8);
|
|
--flxn-showcase-bg: var(--mantine-color-white);
|
|
}
|
|
|
|
:root[data-mantine-color-scheme="dark"] {
|
|
--flxn-podium-1-bg: color-mix(in srgb, var(--mantine-color-yellow-8) 16%, var(--mantine-color-dark-6));
|
|
--flxn-podium-1-border: color-mix(in srgb, var(--mantine-color-yellow-6) 35%, var(--mantine-color-dark-4));
|
|
--flxn-podium-1-label: var(--mantine-color-yellow-4);
|
|
--flxn-podium-2-bg: color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-dark-6));
|
|
--flxn-podium-2-border: var(--mantine-color-dark-4);
|
|
--flxn-podium-2-label: var(--mantine-color-gray-4);
|
|
--flxn-podium-3-bg: color-mix(in srgb, var(--mantine-color-orange-9) 14%, var(--mantine-color-dark-6));
|
|
--flxn-podium-3-border: color-mix(in srgb, var(--mantine-color-orange-7) 30%, var(--mantine-color-dark-4));
|
|
--flxn-podium-3-label: var(--mantine-color-orange-4);
|
|
--flxn-showcase-bg: var(--mantine-color-dark-7);
|
|
}
|
|
|
|
@supports (color: oklch(from red calc(1 - 1) 0 h)) {
|
|
:root {
|
|
--flxn-on-accent: oklch(
|
|
from var(--mantine-primary-color-filled) calc((0.6 - l) * infinity) 0 h
|
|
);
|
|
}
|
|
}
|