themes lol

2026-08-23 17:17:04 -07:00
parent 0a7b5fa00f
commit 6f575d6a23
79 changed files with 13108 additions and 278 deletions
@@ -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;
+  }
+}