themes lol
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
import { msg } from "@lingui/core/macro";
|
||||
import type { ThemeManifest } from "../types";
|
||||
|
||||
const manifest: ThemeManifest = {
|
||||
id: "brutal",
|
||||
label: msg`Brutal`,
|
||||
colorSchemes: "both",
|
||||
fontLinks: [
|
||||
"https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&display=swap",
|
||||
],
|
||||
chromeColors: {
|
||||
light: { base: "#f5f2ea", dimmed: "#e6e1d1" },
|
||||
dark: { base: "#111111", dimmed: "#000000" },
|
||||
},
|
||||
mantine: {
|
||||
// Light acid accents (yellow/lime) must flip filled text to dark ink.
|
||||
autoContrast: true,
|
||||
defaultRadius: 0,
|
||||
fontFamily: '"Space Grotesk", "Inter", sans-serif',
|
||||
headings: {
|
||||
fontFamily: '"Archivo Black", "League Spartan", sans-serif',
|
||||
fontWeight: "400",
|
||||
},
|
||||
components: {
|
||||
Loader: { defaultProps: { type: "bars" } },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default manifest;
|
||||
@@ -0,0 +1,645 @@
|
||||
/* Neobrutalist theme: flat surfaces, zero radius, 3px ink borders, hard
|
||||
offset shadows. Ink is #000 in light and pale off-white in dark. Acid
|
||||
yellow is pure decoration (selection, hover flashes, podium gold); all
|
||||
accent/active/focus styling follows the user's chosen primary color via
|
||||
loud retuned ramps. */
|
||||
|
||||
/* ---------- 1. Scheme-independent tokens ---------- */
|
||||
|
||||
[data-theme="brutal"][data-theme] {
|
||||
--brutal-yellow: #ffde59;
|
||||
|
||||
--mantine-font-family: "Space Grotesk", "Inter", sans-serif;
|
||||
--mantine-font-family-headings: "Archivo Black", "League Spartan", sans-serif;
|
||||
--mantine-heading-font-weight: 400;
|
||||
--mantine-h1-font-weight: 400;
|
||||
--mantine-h2-font-weight: 400;
|
||||
--mantine-h3-font-weight: 400;
|
||||
--mantine-h4-font-weight: 400;
|
||||
--mantine-h5-font-weight: 400;
|
||||
--mantine-h6-font-weight: 400;
|
||||
|
||||
--mantine-radius-default: 0;
|
||||
--mantine-radius-xs: 0;
|
||||
--mantine-radius-sm: 0;
|
||||
--mantine-radius-md: 0;
|
||||
--mantine-radius-lg: 0;
|
||||
--mantine-radius-xl: 0;
|
||||
|
||||
--mantine-shadow-xs: 3px 3px 0 0 var(--brutal-ink, #000);
|
||||
--mantine-shadow-sm: 5px 5px 0 0 var(--brutal-ink, #000);
|
||||
--mantine-shadow-md: 6px 6px 0 0 var(--brutal-ink, #000);
|
||||
--mantine-shadow-lg: 8px 8px 0 0 var(--brutal-ink, #000);
|
||||
--mantine-shadow-xl: 10px 10px 0 0 var(--brutal-ink, #000);
|
||||
|
||||
--flxn-gold: var(--brutal-yellow);
|
||||
--flxn-pop-shadow: var(--brutal-ink, #000);
|
||||
--flxn-avatar-radius: 0;
|
||||
--flxn-avatar-border: 3px solid var(--brutal-ink, #000);
|
||||
--flxn-badge-radius: 0;
|
||||
|
||||
/* Accent ramps retuned flat and loud, borderline fluorescent. Shade 6
|
||||
(light filled) and shade 8 (dark filled) keep the same light/dark
|
||||
polarity as Mantine's defaults so autoContrast text stays legible. */
|
||||
--mantine-color-blue-0: #e6eeff;
|
||||
--mantine-color-blue-1: #c2d4ff;
|
||||
--mantine-color-blue-2: #99b8ff;
|
||||
--mantine-color-blue-3: #5c8aff;
|
||||
--mantine-color-blue-4: #2e66ff;
|
||||
--mantine-color-blue-5: #1a5eff;
|
||||
--mantine-color-blue-6: #0047ff;
|
||||
--mantine-color-blue-7: #003ae6;
|
||||
--mantine-color-blue-8: #0033cc;
|
||||
--mantine-color-blue-9: #002699;
|
||||
|
||||
--mantine-color-red-0: #ffe8e8;
|
||||
--mantine-color-red-1: #ffc9c9;
|
||||
--mantine-color-red-2: #ffa8a8;
|
||||
--mantine-color-red-3: #ff7a7a;
|
||||
--mantine-color-red-4: #ff5252;
|
||||
--mantine-color-red-5: #ff2b2b;
|
||||
--mantine-color-red-6: #f01e1e;
|
||||
--mantine-color-red-7: #d61414;
|
||||
--mantine-color-red-8: #c00d0d;
|
||||
--mantine-color-red-9: #8f0707;
|
||||
|
||||
--mantine-color-green-0: #e4ffe9;
|
||||
--mantine-color-green-1: #c0ffcf;
|
||||
--mantine-color-green-2: #8fffab;
|
||||
--mantine-color-green-3: #4dff85;
|
||||
--mantine-color-green-4: #1af06a;
|
||||
--mantine-color-green-5: #0ae862;
|
||||
--mantine-color-green-6: #00e05c;
|
||||
--mantine-color-green-7: #00b34a;
|
||||
--mantine-color-green-8: #0a8a3c;
|
||||
--mantine-color-green-9: #056629;
|
||||
|
||||
--mantine-color-yellow-0: #fff9db;
|
||||
--mantine-color-yellow-1: #fff0a8;
|
||||
--mantine-color-yellow-2: #ffe770;
|
||||
--mantine-color-yellow-3: #ffde59;
|
||||
--mantine-color-yellow-4: #ffd83d;
|
||||
--mantine-color-yellow-5: #ffd61f;
|
||||
--mantine-color-yellow-6: #ffd400;
|
||||
--mantine-color-yellow-7: #f5c400;
|
||||
--mantine-color-yellow-8: #f0b800;
|
||||
--mantine-color-yellow-9: #cc9900;
|
||||
|
||||
--mantine-color-grape-0: #fbe7ff;
|
||||
--mantine-color-grape-1: #f3c6ff;
|
||||
--mantine-color-grape-2: #ea9dff;
|
||||
--mantine-color-grape-3: #dd6bff;
|
||||
--mantine-color-grape-4: #cf47f2;
|
||||
--mantine-color-grape-5: #c437e9;
|
||||
--mantine-color-grape-6: #b829e0;
|
||||
--mantine-color-grape-7: #a21ec7;
|
||||
--mantine-color-grape-8: #8c14ad;
|
||||
--mantine-color-grape-9: #6b0c85;
|
||||
|
||||
--mantine-color-orange-0: #fff0e0;
|
||||
--mantine-color-orange-1: #ffddb8;
|
||||
--mantine-color-orange-2: #ffc78a;
|
||||
--mantine-color-orange-3: #ffab52;
|
||||
--mantine-color-orange-4: #ff9a2e;
|
||||
--mantine-color-orange-5: #ff9114;
|
||||
--mantine-color-orange-6: #ff8800;
|
||||
--mantine-color-orange-7: #f07300;
|
||||
--mantine-color-orange-8: #c95400;
|
||||
--mantine-color-orange-9: #9a4000;
|
||||
|
||||
--mantine-color-pink-0: #ffe6f1;
|
||||
--mantine-color-pink-1: #ffc2dd;
|
||||
--mantine-color-pink-2: #ff99c6;
|
||||
--mantine-color-pink-3: #ff66aa;
|
||||
--mantine-color-pink-4: #ff4796;
|
||||
--mantine-color-pink-5: #ff2e88;
|
||||
--mantine-color-pink-6: #f21578;
|
||||
--mantine-color-pink-7: #d80d67;
|
||||
--mantine-color-pink-8: #bd0857;
|
||||
--mantine-color-pink-9: #8f0642;
|
||||
|
||||
--mantine-color-lime-0: #f6ffdb;
|
||||
--mantine-color-lime-1: #eaffad;
|
||||
--mantine-color-lime-2: #dcff7a;
|
||||
--mantine-color-lime-3: #c8ff42;
|
||||
--mantine-color-lime-4: #b8fa1e;
|
||||
--mantine-color-lime-5: #aff50f;
|
||||
--mantine-color-lime-6: #a6f000;
|
||||
--mantine-color-lime-7: #99e000;
|
||||
--mantine-color-lime-8: #8ccc00;
|
||||
--mantine-color-lime-9: #6fa300;
|
||||
}
|
||||
|
||||
/* ---------- 2. Per-scheme tokens ---------- */
|
||||
|
||||
[data-theme="brutal"][data-theme][data-mantine-color-scheme="light"] {
|
||||
--brutal-ink: #000000;
|
||||
--brutal-focus: var(--mantine-primary-color-filled);
|
||||
|
||||
--mantine-color-body: #f5f2ea;
|
||||
--mantine-color-text: #111111;
|
||||
--mantine-color-bright: #000000;
|
||||
--mantine-color-dimmed: #575145;
|
||||
--mantine-color-placeholder: #6b6557;
|
||||
/* shade 8, not 6: fluorescent accents (yellow/lime/green) are unreadable
|
||||
as link text on the light body at shade 6 */
|
||||
--mantine-color-anchor: var(--mantine-primary-color-8);
|
||||
--mantine-color-error: #d90429;
|
||||
--mantine-color-default: #f5f2ea;
|
||||
--mantine-color-default-hover: var(--brutal-yellow);
|
||||
--mantine-color-default-color: #111111;
|
||||
--mantine-color-default-border: #000000;
|
||||
|
||||
--flxn-silver: #767066;
|
||||
--flxn-bronze: #b45f06;
|
||||
--flxn-toast-success: #087f2c;
|
||||
--flxn-toast-error: #d90429;
|
||||
--flxn-podium-1-bg: var(--brutal-yellow);
|
||||
--flxn-podium-1-border: #000000;
|
||||
--flxn-podium-1-label: #111111;
|
||||
--flxn-podium-2-bg: #d9d4c6;
|
||||
--flxn-podium-2-border: #000000;
|
||||
--flxn-podium-2-label: #111111;
|
||||
--flxn-podium-3-bg: #ff9d5c;
|
||||
--flxn-podium-3-border: #000000;
|
||||
--flxn-podium-3-label: #111111;
|
||||
--flxn-showcase-bg: #fffdf5;
|
||||
--flxn-overlay: rgba(0, 0, 0, 0.5);
|
||||
--flxn-dotgrid-color: rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
[data-theme="brutal"][data-theme][data-mantine-color-scheme="dark"] {
|
||||
--brutal-ink: #ece7da;
|
||||
--brutal-focus: var(--mantine-primary-color-4);
|
||||
|
||||
--mantine-color-body: #111111;
|
||||
--mantine-color-text: #f5f2ea;
|
||||
--mantine-color-bright: #ffffff;
|
||||
--mantine-color-dimmed: #a39d8c;
|
||||
--mantine-color-placeholder: #9a947f;
|
||||
--mantine-color-anchor: var(--mantine-primary-color-4);
|
||||
--mantine-color-error: #ff4d6d;
|
||||
--mantine-color-default: #111111;
|
||||
--mantine-color-default-hover: #26241c;
|
||||
--mantine-color-default-color: #f5f2ea;
|
||||
--mantine-color-default-border: #ece7da;
|
||||
|
||||
--flxn-silver: #b8b2a4;
|
||||
--flxn-bronze: #e08e45;
|
||||
--flxn-toast-success: #3ddc73;
|
||||
--flxn-toast-error: #ff4d6d;
|
||||
--flxn-podium-1-bg: #292110;
|
||||
--flxn-podium-1-border: var(--brutal-yellow);
|
||||
--flxn-podium-1-label: var(--brutal-yellow);
|
||||
--flxn-podium-2-bg: #21201b;
|
||||
--flxn-podium-2-border: #b8b2a4;
|
||||
--flxn-podium-2-label: #cfc9bb;
|
||||
--flxn-podium-3-bg: #271a10;
|
||||
--flxn-podium-3-border: #e08e45;
|
||||
--flxn-podium-3-label: #ffb47a;
|
||||
--flxn-showcase-bg: #191813;
|
||||
--flxn-overlay: rgba(0, 0, 0, 0.65);
|
||||
--flxn-dotgrid-color: rgba(236, 231, 218, 0.16);
|
||||
--flxn-pop-shadow: rgba(236, 231, 218, 0.55);
|
||||
}
|
||||
|
||||
/* ---------- 3. Type ---------- */
|
||||
|
||||
[data-theme="brutal"] :is(h1, h2, h3, h4, h5, h6) {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Title-root {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] *::selection {
|
||||
background: var(--brutal-yellow);
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] *:focus-visible:not(.mantine-Input-input) {
|
||||
outline: 3px solid var(--brutal-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Anchor-root {
|
||||
font-weight: 600;
|
||||
text-decoration-thickness: 2px;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ---------- 4. Press feedback: slide into the shadow ---------- */
|
||||
|
||||
[data-theme="brutal"] .flxn-press {
|
||||
transition:
|
||||
transform 100ms cubic-bezier(0.32, 0.72, 0, 1),
|
||||
box-shadow 100ms cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
|
||||
transform: translate(4px, 4px);
|
||||
box-shadow: 0 0 0 0 var(--brutal-ink);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[data-theme="brutal"] .flxn-press,
|
||||
[data-theme="brutal"] .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
|
||||
transition: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 5. Buttons & ActionIcons ---------- */
|
||||
|
||||
[data-theme="brutal"] .mantine-Button-root {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
box-shadow: 4px 4px 0 0 var(--brutal-ink);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Button-root[data-variant="gradient"] {
|
||||
background: var(--mantine-primary-color-filled);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-ActionIcon-root {
|
||||
border: 2px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
box-shadow: 3px 3px 0 0 var(--brutal-ink);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Button-root[data-variant="subtle"],
|
||||
[data-theme="brutal"] .mantine-Button-root[data-variant="transparent"],
|
||||
[data-theme="brutal"] .mantine-ActionIcon-root[data-variant="subtle"],
|
||||
[data-theme="brutal"] .mantine-ActionIcon-root[data-variant="transparent"] {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Button-root:disabled,
|
||||
[data-theme="brutal"] .mantine-Button-root[data-disabled],
|
||||
[data-theme="brutal"] .mantine-ActionIcon-root:disabled,
|
||||
[data-theme="brutal"] .mantine-ActionIcon-root[data-disabled] {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-CloseButton-root {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ---------- 6. Surfaces: Paper, Card, Modal, Drawer, dropdowns ---------- */
|
||||
|
||||
[data-theme="brutal"] .mantine-Paper-root {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Card-root {
|
||||
box-shadow: var(--mantine-shadow-sm);
|
||||
background: var(--flxn-showcase-bg);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Modal-content,
|
||||
[data-theme="brutal"] .mantine-Drawer-content {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
box-shadow: var(--mantine-shadow-lg);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Modal-header {
|
||||
background: var(--mantine-color-body);
|
||||
border-bottom: 3px solid var(--brutal-ink);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Modal-title {
|
||||
font-family: var(--mantine-font-family-headings);
|
||||
text-transform: uppercase;
|
||||
font-size: var(--mantine-font-size-lg);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Popover-dropdown,
|
||||
[data-theme="brutal"] .mantine-Combobox-dropdown,
|
||||
[data-theme="brutal"] .mantine-Menu-dropdown {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
box-shadow: var(--mantine-shadow-md);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Menu-item,
|
||||
[data-theme="brutal"] .mantine-Combobox-option {
|
||||
border-radius: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Hover flash stays decorative acid yellow; the SELECTED option is the
|
||||
accent and follows the user's primary color. */
|
||||
[data-theme="brutal"] .mantine-Menu-item:hover,
|
||||
[data-theme="brutal"] .mantine-Menu-item[data-hovered],
|
||||
[data-theme="brutal"] .mantine-Combobox-option:hover {
|
||||
background: var(--brutal-yellow);
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Combobox-option[data-combobox-selected] {
|
||||
background: var(--mantine-primary-color-filled);
|
||||
color: var(--mantine-primary-color-contrast);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Tooltip-tooltip {
|
||||
border-radius: 0;
|
||||
background: var(--brutal-ink);
|
||||
color: var(--mantine-color-body);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---------- 7. Inputs ---------- */
|
||||
|
||||
[data-theme="brutal"] .mantine-Input-input {
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
background: var(--mantine-color-body);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Input-input:focus,
|
||||
[data-theme="brutal"] .mantine-Input-input:focus-within {
|
||||
outline: none;
|
||||
border-color: var(--brutal-ink);
|
||||
box-shadow: 4px 4px 0 0 var(--brutal-ink);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Input-input[data-error] {
|
||||
border-color: var(--mantine-color-error);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] :is(
|
||||
.mantine-TextInput-label,
|
||||
.mantine-Textarea-label,
|
||||
.mantine-NumberInput-label,
|
||||
.mantine-PasswordInput-label,
|
||||
.mantine-Select-label,
|
||||
.mantine-Autocomplete-label,
|
||||
.mantine-MultiSelect-label,
|
||||
.mantine-DateTimePicker-label,
|
||||
.mantine-DatePickerInput-label,
|
||||
.mantine-PinInput-label
|
||||
) {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ---------- 8. Badges, indicators, avatars, icons ---------- */
|
||||
|
||||
[data-theme="brutal"] .mantine-Badge-root {
|
||||
border: 2px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
box-shadow: 2px 2px 0 0 var(--brutal-ink);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Indicator-indicator {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--brutal-ink);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-ThemeIcon-root {
|
||||
border-radius: 0;
|
||||
border: 2px solid var(--brutal-ink);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Skeleton-root {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ---------- 9. Tabs, NavLink, SegmentedControl: solid blocks ---------- */
|
||||
|
||||
[data-theme="brutal"] .mantine-Tabs-tab {
|
||||
border: 3px solid transparent;
|
||||
border-radius: 0;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Tabs-tab[data-active] {
|
||||
background: var(--mantine-primary-color-filled);
|
||||
color: var(--mantine-primary-color-contrast);
|
||||
border-color: var(--brutal-ink);
|
||||
box-shadow: 3px 3px 0 0 var(--brutal-ink);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Tabs-list::before {
|
||||
border-color: var(--brutal-ink);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-NavLink-root {
|
||||
border: 3px solid transparent;
|
||||
border-radius: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-NavLink-root[data-active] {
|
||||
background: var(--mantine-primary-color-filled);
|
||||
color: var(--mantine-primary-color-contrast);
|
||||
border-color: var(--brutal-ink);
|
||||
box-shadow: 4px 4px 0 0 var(--brutal-ink);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-NavLink-root[data-active] :is(
|
||||
.mantine-NavLink-label,
|
||||
.mantine-NavLink-description,
|
||||
.mantine-NavLink-section
|
||||
) {
|
||||
color: var(--mantine-primary-color-contrast);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-SegmentedControl-root {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
background: var(--mantine-color-body);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-SegmentedControl-control,
|
||||
[data-theme="brutal"] .mantine-SegmentedControl-label {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-SegmentedControl-label {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-SegmentedControl-indicator {
|
||||
border-radius: 0;
|
||||
background: var(--mantine-primary-color-filled);
|
||||
border: 2px solid var(--brutal-ink);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-SegmentedControl-label[data-active],
|
||||
[data-theme="brutal"] .mantine-SegmentedControl-control[data-active] .mantine-SegmentedControl-label {
|
||||
color: var(--mantine-primary-color-contrast);
|
||||
}
|
||||
|
||||
/* ---------- 10. Controls: Switch, Checkbox, Radio, Progress ---------- */
|
||||
|
||||
[data-theme="brutal"] .mantine-Switch-track {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Switch-thumb {
|
||||
border: 2px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Checkbox-input {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Radio-radio {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Progress-root {
|
||||
border: 2px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
background: var(--mantine-color-body);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Progress-section {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ---------- 11. Feedback: Alert, Notification ---------- */
|
||||
|
||||
[data-theme="brutal"] .mantine-Alert-root {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
box-shadow: var(--mantine-shadow-xs);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Notification-root {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
box-shadow: var(--mantine-shadow-md);
|
||||
background: var(--mantine-color-body);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Notification-title {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ---------- 12. Shell & structure ---------- */
|
||||
|
||||
[data-theme="brutal"] .mantine-AppShell-root {
|
||||
--app-shell-border-color: var(--brutal-ink);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-AppShell-header {
|
||||
background: var(--mantine-color-body);
|
||||
border-bottom: 3px solid var(--brutal-ink);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-AppShell-navbar,
|
||||
[data-theme="brutal"] .mantine-AppShell-aside {
|
||||
background: var(--mantine-color-body);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .mantine-Divider-root {
|
||||
--divider-color: var(--brutal-ink);
|
||||
--divider-size: 2px;
|
||||
}
|
||||
|
||||
/* ---------- 13. App component hooks ---------- */
|
||||
|
||||
/* Tab strip: flat while resting; docking rules the ink baseline (width is
|
||||
constant so pinning never shifts layout). Active tab is a solid accent
|
||||
block with ink border + hard shadow — the floating underline indicator
|
||||
is suppressed, the block IS the indicator. Constant transparent border
|
||||
keeps tab boxes the same size in both active states. */
|
||||
[data-theme="brutal"] .flxn-tabs {
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .flxn-tabs[data-stuck] {
|
||||
background-color: var(--mantine-color-body);
|
||||
border-bottom-color: var(--brutal-ink);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .flxn-tab.flxn-tab {
|
||||
border: 3px solid transparent;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .flxn-tab.flxn-tab[data-active] {
|
||||
background-color: var(--mantine-primary-color-filled);
|
||||
color: var(--flxn-on-accent);
|
||||
border-color: var(--brutal-ink);
|
||||
box-shadow: 2px 2px 0 0 var(--brutal-ink);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .flxn-tabs-indicator.flxn-tabs-indicator {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Nav grid tiles: same construction as cards — ink border, hard offset
|
||||
shadow, flat accent glyph. Press sinks into the shadow. */
|
||||
[data-theme="brutal"] .flxn-tile.flxn-tile {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
background-color: var(--flxn-showcase-bg);
|
||||
box-shadow: var(--mantine-shadow-xs);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
[data-theme="brutal"] .flxn-tile.flxn-tile:active:not(:disabled) {
|
||||
transform: translate(3px, 3px);
|
||||
box-shadow: 0 0 0 0 var(--brutal-ink);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .flxn-tile-icon.flxn-tile-icon {
|
||||
color: var(--mantine-primary-color-filled);
|
||||
}
|
||||
|
||||
/* "See all" chip: bordered block with a mini offset shadow; accent tint
|
||||
comes through from hooks.css. */
|
||||
[data-theme="brutal"] .flxn-see-all.flxn-see-all {
|
||||
border: 2px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
box-shadow: 2px 2px 0 0 var(--brutal-ink);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
/* Match card + reaction tray: one construction — identical 3px ink
|
||||
borders, card on the raised showcase surface, tray a body-toned step
|
||||
below carrying the construction's hard shadow at its bottom edge. */
|
||||
[data-theme="brutal"] .flxn-match-card.flxn-match-card {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
background-color: var(--flxn-showcase-bg);
|
||||
}
|
||||
|
||||
[data-theme="brutal"] .flxn-reaction-row.flxn-reaction-row {
|
||||
border: 3px solid var(--brutal-ink);
|
||||
border-radius: 0;
|
||||
background-color: var(--mantine-color-body);
|
||||
box-shadow: var(--mantine-shadow-xs);
|
||||
}
|
||||
Reference in New Issue
Block a user