kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

themes lol

Browse Source
This commit is contained in:
kyle
2026-08-23 17:17:04 -07:00
parent 0a7b5fa00f
commit 6f575d6a23
79 changed files with 13108 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/themes/wireframe/manifest.ts
+136
View File
@@ -0,0 +1,136 @@
import { msg } from "@lingui/core/macro";
import type { ThemeManifest } from "../types";
/* Viewport gizmo ramps, declared in JS (not theme.css) so Mantine regenerates
every derived variant var (-filled, -light rgba, autoContrast picks) from
the retuned shades. Shade 6 is the fill in BOTH schemes (primaryShade
below) — each shade-6 hand-checked against its autoContrast on-color
(white or the custom ink black) for 4.5:1+. */
const gizmoColors = {
// Z-axis blue
blue: [
"#eaf2ff",
"#d2e4fe",
"#a8cbfd",
"#7aaffa",
"#4f92f5",
"#2f7cf0",
"#1c64d6",
"#154fb0",
"#103e8a",
"#0a2c62",
],
// X-axis red
red: [
"#ffecec",
"#ffd2d2",
"#ffa8a8",
"#fd7c7c",
"#f85454",
"#ef3535",
"#d0231f",
"#a91b19",
"#821513",
"#5c0f0e",
],
// Y-axis green
green: [
"#e7fbf0",
"#c9f5da",
"#98e8b8",
"#64d692",
"#38c072",
"#1a9e5a",
"#0e7d3f",
"#0a6432",
"#074b26",
"#05331a",
],
// measurement/annotation yellow
yellow: [
"#fff8dc",
"#ffedad",
"#ffdf76",
"#ffce46",
"#f9bc24",
"#daa00e",
"#bd870a",
"#946909",
"#6c4c07",
"#463005",
],
// rotate-gizmo violet
grape: [
"#f3edff",
"#e2d3fd",
"#c8adfa",
"#ac85f5",
"#9163ec",
"#7a47df",
"#6535c0",
"#522a9c",
"#3f2077",
"#2c1653",
],
// classic viewport selection orange
orange: [
"#fff1e3",
"#ffddb8",
"#ffc182",
"#ffa350",
"#ee8a2c",
"#cc6a0f",
"#b04f06",
"#8f4005",
"#6e3104",
"#4d2203",
],
// magenta gizmo tag
pink: [
"#ffeef7",
"#ffd3ea",
"#ffa8d6",
"#fd7cc0",
"#f552a9",
"#db308f",
"#c22174",
"#9a1a5b",
"#731442",
"#4d0d2c",
],
// chartreuse highlight
lime: [
"#f6ffe0",
"#e8feb0",
"#d3f47a",
"#bce34a",
"#a3ce27",
"#8db518",
"#7a9c12",
"#607b0d",
"#475c09",
"#2f3d06",
],
} as const;
const manifest: ThemeManifest = {
id: "wireframe",
label: msg`Viewport`,
colorSchemes: "both",
fontLinks: [
"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap",
],
chromeColors: {
light: { base: "#f2f3f5", dimmed: "#dcdfe3" },
dark: { base: "#17191c", dimmed: "#0d0e10" },
},
mantine: {
autoContrast: true,
luminanceThreshold: 0.25,
black: "#15181c",
primaryShade: { light: 6, dark: 6 },
colors: gizmoColors,
},
};
export default manifest;
src/themes/wireframe/theme.css
+545
View File
@@ -0,0 +1,545 @@
/* Wireframe "Viewport" — an untextured 3D-modeling viewport. Surfaces are
unshaded mesh objects: flat fills, thin vector edges, vertex dots at the
four corners. Selection follows the classic viewport convention: the
user's accent as a 1px outline + accent vertex dots + a light accent
wash. Isometric-cube divider motif; mono annotation labels (JetBrains
Mono) against clean, heavier Inter headings. */
/* ---------- 1. Tokens, any scheme ---------- */
[data-theme="wireframe"][data-theme] {
--mantine-font-family: "Inter", sans-serif;
--mantine-font-family-headings: "Inter", sans-serif;
--mantine-font-family-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--mantine-heading-font-weight: 800;
--mantine-radius-default: 3px;
--mantine-radius-xs: 2px;
--mantine-radius-sm: 3px;
--mantine-radius-md: 4px;
--mantine-radius-lg: 4px;
--mantine-radius-xl: 6px;
--mantine-shadow-xs: none;
--mantine-shadow-sm: none;
--mantine-shadow-md: none;
--mantine-shadow-lg: none;
--mantine-shadow-xl: none;
/* square viewport avatar, vertex-dotted corners applied via .flxn-avatar-frame */
--flxn-avatar-radius: 3px;
--flxn-badge-radius: 3px;
}
/* ---------- 2. Per-scheme tokens ---------- */
[data-theme="wireframe"][data-theme][data-mantine-color-scheme="light"] {
/* thin vector edge ink + vertex-dot color */
--wf-edge: #445;
--wf-edge-dim: rgba(68, 68, 85, 0.32);
--wf-vertex: #445;
--wf-surface: #ffffff;
--wf-panel: #f8f9fa;
/* the user's accent, kept legible as ink on the mesh */
--wf-accent-ink: var(--mantine-primary-color-6);
--wf-cube-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 20.7,7 20.7,17 12,22 3.3,17 3.3,7' fill='none' stroke='%23445' stroke-width='1.5'/%3E%3Cpath d='M12 12 L12 2 M12 12 L3.3 17 M12 12 L20.7 17' stroke='%23445' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
--flxn-avatar-border: 1px solid var(--wf-edge);
--mantine-color-body: #f2f3f5;
--mantine-color-text: #20242a;
--mantine-color-bright: #0e1013;
--mantine-color-dimmed: #55606b;
--mantine-color-anchor: var(--wf-accent-ink);
--mantine-color-error: #d0231f;
--mantine-color-placeholder: #7d8590;
--mantine-color-default: #ffffff;
--mantine-color-default-hover: #eaecef;
--mantine-color-default-color: #20242a;
--mantine-color-default-border: rgba(68, 68, 85, 0.45);
/* cool viewport gray ramp */
--mantine-color-gray-0: #f8f9fa;
--mantine-color-gray-1: #eef0f2;
--mantine-color-gray-2: #e2e5e9;
--mantine-color-gray-3: #d1d5db;
--mantine-color-gray-4: #b7bcc4;
--mantine-color-gray-5: #9aa1a8;
--mantine-color-gray-6: #7d8590;
--mantine-color-gray-7: #5f666f;
--mantine-color-gray-8: #454b52;
--mantine-color-gray-9: #2c3136;
/* app tokens */
--flxn-gold: #9a6700;
--flxn-silver: #5f666f;
--flxn-bronze: #a05a1e;
--flxn-toast-success: #0e7d3f;
--flxn-toast-error: #d0231f;
--flxn-podium-1-bg: rgba(154, 103, 0, 0.06);
--flxn-podium-1-border: rgba(154, 103, 0, 0.5);
--flxn-podium-1-label: #855800;
--flxn-podium-2-bg: rgba(95, 102, 111, 0.07);
--flxn-podium-2-border: rgba(95, 102, 111, 0.5);
--flxn-podium-2-label: #4d545c;
--flxn-podium-3-bg: rgba(160, 90, 30, 0.06);
--flxn-podium-3-border: rgba(160, 90, 30, 0.45);
--flxn-podium-3-label: #a05a1e;
--flxn-showcase-bg: #ffffff;
--flxn-overlay: rgba(15, 17, 20, 0.4);
--flxn-dotgrid-color: rgba(68, 68, 85, 0.28);
--flxn-pop-shadow: rgba(0, 0, 0, 0);
}
[data-theme="wireframe"][data-theme][data-mantine-color-scheme="dark"] {
/* pale vector edge on the night viewport */
--wf-edge: #aab2bc;
--wf-edge-dim: rgba(170, 178, 188, 0.3);
--wf-vertex: #aab2bc;
--wf-surface: #1d2024;
--wf-panel: #131518;
--wf-accent-ink: var(--mantine-primary-color-4);
--wf-cube-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 20.7,7 20.7,17 12,22 3.3,17 3.3,7' fill='none' stroke='%23aab2bc' stroke-width='1.5'/%3E%3Cpath d='M12 12 L12 2 M12 12 L3.3 17 M12 12 L20.7 17' stroke='%23aab2bc' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
--flxn-avatar-border: 1px solid var(--wf-edge);
--mantine-color-body: #17191c;
--mantine-color-text: #e4e6e9;
--mantine-color-bright: #ffffff;
--mantine-color-dimmed: #9aa1a8;
--mantine-color-anchor: var(--wf-accent-ink);
--mantine-color-error: #ff6b6b;
--mantine-color-placeholder: #6e747b;
--mantine-color-default: #1d2024;
--mantine-color-default-hover: #232629;
--mantine-color-default-color: #e4e6e9;
--mantine-color-default-border: rgba(170, 178, 188, 0.32);
/* steel-cast dark ramp, tuned to the night viewport body */
--mantine-color-dark-0: #eef0f2;
--mantine-color-dark-1: #d6dadd;
--mantine-color-dark-2: #b0b7bd;
--mantine-color-dark-3: #868f97;
--mantine-color-dark-4: #5b636b;
--mantine-color-dark-5: #383d43;
--mantine-color-dark-6: #232629;
--mantine-color-dark-7: #17191c;
--mantine-color-dark-8: #131518;
--mantine-color-dark-9: #0d0f11;
/* app tokens */
--flxn-gold: #ffc861;
--flxn-silver: #c3cad1;
--flxn-bronze: #e0a06a;
--flxn-toast-success: #4bd08a;
--flxn-toast-error: #ff6b6b;
--flxn-podium-1-bg: rgba(255, 200, 97, 0.08);
--flxn-podium-1-border: rgba(255, 200, 97, 0.5);
--flxn-podium-1-label: #ffc861;
--flxn-podium-2-bg: rgba(195, 202, 209, 0.08);
--flxn-podium-2-border: rgba(195, 202, 209, 0.45);
--flxn-podium-2-label: #c3cad1;
--flxn-podium-3-bg: rgba(224, 160, 106, 0.08);
--flxn-podium-3-border: rgba(224, 160, 106, 0.45);
--flxn-podium-3-label: #e0a06a;
--flxn-showcase-bg: #1d2024;
--flxn-overlay: rgba(0, 0, 0, 0.6);
--flxn-dotgrid-color: rgba(170, 178, 188, 0.16);
--flxn-pop-shadow: rgba(0, 0, 0, 0);
}
/* ---------- 3. Decoration: static perspective floor-grid hint ---------- */
[data-theme="wireframe"] body::before {
content: "";
position: fixed;
left: -30vw;
right: -30vw;
bottom: -4vh;
height: 26vh;
z-index: 9998;
pointer-events: none;
opacity: 0.22;
background-image:
repeating-linear-gradient(90deg, var(--wf-edge) 0 1px, transparent 1px 64px),
repeating-linear-gradient(0deg, var(--wf-edge) 0 1px, transparent 1px 32px);
transform: perspective(280px) rotateX(62deg);
transform-origin: 50% 100%;
-webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
mask-image: linear-gradient(to top, #000 45%, transparent 100%);
}
/* ---------- 4. Mesh surfaces: flat fill, thin edge, vertex dots ---------- */
[data-theme="wireframe"] .mantine-Paper-root,
[data-theme="wireframe"] .mantine-Card-root,
[data-theme="wireframe"] .flxn-tile,
[data-theme="wireframe"] .flxn-match-card {
position: relative;
background-color: var(--wf-surface);
border: 1px solid var(--wf-edge-dim);
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Card-root,
[data-theme="wireframe"] .flxn-tile,
[data-theme="wireframe"] .flxn-match-card {
border-color: var(--wf-edge);
}
[data-theme="wireframe"] .mantine-Card-root::after,
[data-theme="wireframe"] .flxn-tile::after,
[data-theme="wireframe"] .flxn-match-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-repeat: no-repeat;
background-image:
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%);
background-size: 4px 4px;
background-position:
-2px -2px,
calc(100% + 2px) -2px,
-2px calc(100% + 2px),
calc(100% + 2px) calc(100% + 2px);
}
[data-theme="wireframe"] .mantine-Divider-root,
[data-theme="wireframe"] .mantine-Divider-root::before,
[data-theme="wireframe"] .mantine-Divider-root::after {
--divider-color: var(--wf-edge-dim);
}
/* isometric-cube divider motif on labeled dividers */
[data-theme="wireframe"] .mantine-Divider-label {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--mantine-font-family-monospace);
text-transform: uppercase;
letter-spacing: 0.07em;
font-size: 0.72rem;
color: var(--mantine-color-dimmed);
}
[data-theme="wireframe"] .mantine-Divider-label::before {
content: "";
display: inline-block;
width: 11px;
height: 11px;
flex: none;
background-image: var(--wf-cube-icon);
background-repeat: no-repeat;
background-size: contain;
}
/* ---------- 5. Annotation type: mono, uppercase, tracked ---------- */
[data-theme="wireframe"] .mantine-InputWrapper-label,
[data-theme="wireframe"] .mantine-Badge-label,
[data-theme="wireframe"] .mantine-Tabs-tab,
[data-theme="wireframe"] .mantine-SegmentedControl-label,
[data-theme="wireframe"] .mantine-Notification-title,
[data-theme="wireframe"] .mantine-Modal-title,
[data-theme="wireframe"] .mantine-Menu-label,
[data-theme="wireframe"] .mantine-Alert-title,
[data-theme="wireframe"] .mantine-Tooltip-tooltip {
font-family: var(--mantine-font-family-monospace);
text-transform: uppercase;
letter-spacing: 0.06em;
}
[data-theme="wireframe"] .mantine-InputWrapper-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--mantine-color-dimmed);
}
/* ---------- 6. Controls: outlined technical boxes ---------- */
[data-theme="wireframe"] .mantine-Button-root {
font-family: var(--mantine-font-family-monospace);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Button-root[data-variant="default"],
[data-theme="wireframe"] .mantine-ActionIcon-root[data-variant="default"] {
background-color: var(--wf-surface);
border: 1px solid var(--wf-edge);
}
[data-theme="wireframe"] .mantine-Button-root[data-variant="filled"],
[data-theme="wireframe"] .mantine-ActionIcon-root[data-variant="filled"] {
border: 1px solid var(--mantine-primary-color-filled);
}
[data-theme="wireframe"] .mantine-Input-input {
background-color: var(--wf-surface);
border-color: var(--wf-edge-dim);
}
[data-theme="wireframe"] .mantine-Input-input:focus,
[data-theme="wireframe"] .mantine-Input-input:focus-within {
border-color: var(--mantine-primary-color-filled);
outline: 1px solid var(--mantine-primary-color-filled);
outline-offset: -1px;
}
[data-theme="wireframe"] .mantine-Checkbox-input {
border-color: var(--wf-edge);
background-color: var(--wf-surface);
}
[data-theme="wireframe"] .mantine-Checkbox-input:checked {
background-color: var(--mantine-primary-color-filled);
border-color: var(--mantine-primary-color-filled);
}
[data-theme="wireframe"] .mantine-Switch-track {
border-radius: 2px;
border: 1px solid var(--wf-edge);
background-color: var(--wf-surface);
}
[data-theme="wireframe"] .mantine-Switch-thumb {
border-radius: 1px;
}
[data-theme="wireframe"] .mantine-SegmentedControl-root {
background-color: var(--wf-panel);
border: 1px solid var(--wf-edge-dim);
}
[data-theme="wireframe"] .mantine-SegmentedControl-indicator {
background-color: var(--mantine-primary-color-filled);
box-shadow: none;
}
[data-theme="wireframe"] .mantine-SegmentedControl-label[data-active] {
color: var(--mantine-primary-color-contrast);
}
[data-theme="wireframe"] .mantine-Badge-root {
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Badge-root[data-variant="light"],
[data-theme="wireframe"] .mantine-Badge-root[data-variant="default"],
[data-theme="wireframe"] .mantine-Badge-root[data-variant="outline"] {
border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
}
[data-theme="wireframe"] .mantine-Progress-root {
border: 1px solid var(--wf-edge-dim);
background-color: var(--wf-panel);
}
[data-theme="wireframe"] .mantine-Avatar-root,
[data-theme="wireframe"] .mantine-Avatar-root .mantine-Avatar-image,
[data-theme="wireframe"] .mantine-ThemeIcon-root {
border-radius: 3px;
}
/* selection: accent 1px ring on the highlighted combobox option */
[data-theme="wireframe"] [data-combobox-selected] {
box-shadow: inset 0 0 0 1px var(--mantine-primary-color-filled);
}
/* ---------- 7. Overlays: opaque panels, no shadow ---------- */
[data-theme="wireframe"] .mantine-Modal-content {
background-color: var(--wf-surface);
border: 1px solid var(--wf-edge);
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Modal-header {
background-color: var(--wf-surface);
border-bottom: 1px solid var(--wf-edge-dim);
}
[data-theme="wireframe"] .mantine-Popover-dropdown,
[data-theme="wireframe"] .mantine-Menu-dropdown,
[data-theme="wireframe"] .mantine-Combobox-dropdown {
background-color: var(--wf-surface);
border: 1px solid var(--wf-edge);
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Tooltip-tooltip {
font-size: 0.68rem;
background-color: var(--wf-panel);
color: var(--mantine-color-text);
border: 1px solid var(--wf-edge);
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Notification-root {
background-color: var(--wf-surface);
border: 1px solid var(--wf-edge);
box-shadow: none;
}
[data-theme="wireframe"] .mantine-Alert-root {
border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
box-shadow: none;
}
/* ---------- 8. Shell ---------- */
[data-theme="wireframe"] .mantine-AppShell-root {
--app-shell-border-color: var(--wf-edge-dim);
}
[data-theme="wireframe"] .mantine-AppShell-header,
[data-theme="wireframe"] .mantine-AppShell-navbar {
background-color: var(--mantine-color-body);
border-color: var(--wf-edge-dim);
}
/* ---------- 9. Selection convention: accent outline + wash + vertex ---------- */
[data-theme="wireframe"] .mantine-NavLink-root[data-active] {
background-color: var(--mantine-primary-color-light);
color: var(--mantine-primary-color-light-color);
box-shadow: inset 0 0 0 1px var(--mantine-primary-color-filled);
}
[data-theme="wireframe"] .mantine-NavLink-root[data-active] .mantine-NavLink-label,
[data-theme="wireframe"] .mantine-NavLink-root[data-active] .mantine-NavLink-section {
color: var(--mantine-primary-color-light-color);
}
/* ---------- 10. App hooks: viewport language ---------- */
/* tab strip: resting stays flat; docked = title strip with heavy edge rule */
[data-theme="wireframe"] .flxn-tabs[data-stuck] {
border-bottom: 2px solid var(--wf-edge);
}
[data-theme="wireframe"] .flxn-tab.flxn-tab {
font-family: var(--mantine-font-family-monospace);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.75rem;
color: var(--mantine-color-dimmed);
}
[data-theme="wireframe"] .flxn-tab.flxn-tab[data-active] {
color: var(--wf-accent-ink);
font-weight: 700;
}
[data-theme="wireframe"] .flxn-tabs-indicator.flxn-tabs-indicator {
border-bottom: 2px solid var(--mantine-primary-color-filled);
padding-inline: 0.5rem;
}
/* nav tiles: mesh surface (border + vertex dots from rule 4); selecting them
(hover/focus) takes on the accent selection convention */
[data-theme="wireframe"] .flxn-tile-icon {
color: var(--wf-accent-ink);
}
@media (hover: hover) {
[data-theme="wireframe"] .flxn-tile:hover {
border-color: var(--mantine-primary-color-filled);
background-color: var(--mantine-primary-color-light);
}
[data-theme="wireframe"] .flxn-tile:hover::after {
background-image:
radial-gradient(var(--mantine-primary-color-filled) 0%, var(--mantine-primary-color-filled) 100%),
radial-gradient(var(--mantine-primary-color-filled) 0%, var(--mantine-primary-color-filled) 100%),
radial-gradient(var(--mantine-primary-color-filled) 0%, var(--mantine-primary-color-filled) 100%),
radial-gradient(var(--mantine-primary-color-filled) 0%, var(--mantine-primary-color-filled) 100%);
}
/* accent icon over the light accent wash needs the wash's own on-color */
[data-theme="wireframe"] .flxn-tile:hover .flxn-tile-icon {
color: var(--mantine-primary-color-light-color);
}
}
[data-theme="wireframe"] .flxn-tile:focus-visible {
border-color: var(--mantine-primary-color-filled);
background-color: var(--mantine-primary-color-light);
outline: none;
}
[data-theme="wireframe"] .flxn-tile:focus-visible .flxn-tile-icon {
color: var(--mantine-primary-color-light-color);
}
/* "see all": annotation chip */
[data-theme="wireframe"] .flxn-see-all.flxn-see-all {
font-family: var(--mantine-font-family-monospace);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.7rem;
font-weight: 600;
border: 1px solid var(--wf-edge-dim);
background-color: transparent;
color: var(--wf-accent-ink);
}
@media (hover: hover) {
[data-theme="wireframe"] .flxn-see-all.flxn-see-all:hover {
background-color: var(--mantine-primary-color-light);
border-color: var(--mantine-primary-color-filled);
color: var(--mantine-primary-color-light-color);
text-decoration: none;
}
}
/* reaction tray: properties-panel strip under the match-card mesh object */
[data-theme="wireframe"] .flxn-reaction-row.flxn-reaction-row {
background-color: var(--wf-panel);
border: 1px solid var(--wf-edge-dim);
font-family: var(--mantine-font-family-monospace);
}
/* square avatar, vertex-dotted corners just outside the frame */
[data-theme="wireframe"] .flxn-avatar-frame {
position: relative;
}
[data-theme="wireframe"] .flxn-avatar-frame::after {
content: "";
position: absolute;
inset: -2px;
pointer-events: none;
background-repeat: no-repeat;
background-image:
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%),
radial-gradient(var(--wf-vertex) 0%, var(--wf-vertex) 100%);
background-size: 4px 4px;
background-position: 0 0, 100% 0, 0 100%, 100% 100%;
}
/* press feedback: a light scale-down + accent selection-ring flash */
[data-theme="wireframe"] .flxn-press {
outline: 1px solid transparent;
outline-offset: -1px;
transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1), outline-color 150ms ease;
}
[data-theme="wireframe"] .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
transform: scale(0.97);
outline-color: var(--mantine-primary-color-filled);
}
@media (prefers-reduced-motion: reduce) {
[data-theme="wireframe"] .flxn-press,
[data-theme="wireframe"] .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
transition: none;
transform: none;
}
}