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/sketch/manifest.ts
+17
View File
@@ -0,0 +1,17 @@
import { msg } from "@lingui/core/macro";
import type { ThemeManifest } from "../types";
const manifest: ThemeManifest = {
id: "sketch",
label: msg`Sketchbook`,
colorSchemes: "both",
fontLinks: [
"https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Patrick+Hand&display=swap",
],
chromeColors: {
light: { base: "#f9f4e8", dimmed: "#e9e1cf" },
dark: { base: "#232a26", dimmed: "#1a201d" },
},
};
export default manifest;
src/themes/sketch/theme.css
+749
View File
@@ -0,0 +1,749 @@
/* Sketchbook — hand-drawn ink on warm paper (light) / chalk on slate (dark).
The look is carried by 2px "pen" borders with asymmetric wobbly radii
(varied per component so each element reads as individually drawn), a faint
feTurbulence grain overlay, and watercolor washes derived from the user's
accent via color-mix. No SVG displacement filters (perf). */
/* ---------------------------------------------------------------- */
/* 1. Scheme-independent tokens */
/* ---------------------------------------------------------------- */
[data-theme="sketch"][data-theme] {
--mantine-font-family: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive;
--mantine-font-family-headings: "Caveat", "Patrick Hand", cursive;
--mantine-heading-font-weight: 600;
/* Caveat runs small for its em box — headings get larger sizes */
--mantine-h1-font-size: 2.75rem;
--mantine-h1-line-height: 1.15;
--mantine-h2-font-size: 2.25rem;
--mantine-h2-line-height: 1.18;
--mantine-h3-font-size: 1.85rem;
--mantine-h3-line-height: 1.2;
--mantine-h4-font-size: 1.55rem;
--mantine-h4-line-height: 1.25;
--mantine-h5-font-size: 1.3rem;
--mantine-h5-line-height: 1.3;
--mantine-h6-font-size: 1.15rem;
--mantine-h6-line-height: 1.35;
--mantine-radius-xs: 6px;
--mantine-radius-sm: 8px;
--mantine-radius-md: 10px;
--mantine-radius-lg: 14px;
--mantine-radius-xl: 20px;
--mantine-radius-default: 10px;
--flxn-avatar-radius: 42%; /* hand-drawn "circle" */
--flxn-avatar-border: 2px solid var(--sk-ink); /* single pen ring on the frame */
--flxn-badge-radius: 14px;
/* pencil-smudge shadows: soft, gray, slightly offset */
--mantine-shadow-xs: 0 1px 2px var(--sk-smudge);
--mantine-shadow-sm: 1px 2px 5px var(--sk-smudge);
--mantine-shadow-md: 2px 3px 9px var(--sk-smudge);
--mantine-shadow-lg: 3px 5px 14px var(--sk-smudge);
--mantine-shadow-xl: 4px 7px 20px var(--sk-smudge);
}
/* ---------------------------------------------------------------- */
/* 2a. Light — ink on warm paper */
/* ---------------------------------------------------------------- */
[data-theme="sketch"][data-theme][data-mantine-color-scheme="light"] {
--sk-ink: #333333;
--sk-ink-soft: rgba(51, 51, 51, 0.55);
--sk-on-fill: #2f2c26;
--sk-paper: #f9f4e8;
--sk-paper-raised: #fffdf6;
--sk-wash: color-mix(in srgb, var(--mantine-primary-color-6) 18%, #fffdf6);
--sk-accent-ink: color-mix(in srgb, var(--mantine-primary-color-6) 65%, #333333);
--sk-smudge: rgba(88, 80, 62, 0.2);
--sk-hatch: rgba(51, 51, 51, 0.22);
--sk-skeleton: #ebe3d0;
--sk-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='5' viewBox='0 0 22 5'%3E%3Cpath d='M0 3 Q 5.5 0.8 11 3 T 22 3' fill='none' stroke='%23333333' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
--mantine-color-body: #f9f4e8;
--mantine-color-text: #333333;
--mantine-color-bright: #1f1d18;
--mantine-color-dimmed: #6b655a;
--mantine-color-placeholder: #8a8375;
--mantine-color-anchor: var(--sk-accent-ink);
--mantine-color-error: #a44e46;
--mantine-color-default: #fffdf6;
--mantine-color-default-hover: #f1ead9;
--mantine-color-default-color: #333333;
--mantine-color-default-border: #333333;
--mantine-primary-color-contrast: #2f2c26;
/* app tokens */
--flxn-gold: #dca815; /* crayon yellow */
--flxn-silver: #8f8a80; /* pencil gray */
--flxn-bronze: #b0744a; /* crayon sienna */
--flxn-toast-success: #5f8f5f;
--flxn-toast-error: #c26e63;
--flxn-podium-1-bg: #f8eecb;
--flxn-podium-1-border: #8c7a35;
--flxn-podium-1-label: #7c6614;
--flxn-podium-2-bg: #f0ede4;
--flxn-podium-2-border: #77746c;
--flxn-podium-2-label: #5f5c54;
--flxn-podium-3-bg: #f4e5d3;
--flxn-podium-3-border: #8f6a45;
--flxn-podium-3-label: #82552e;
--flxn-showcase-bg: #fffdf6;
--flxn-overlay: rgba(56, 50, 38, 0.45);
--flxn-dotgrid-color: rgba(51, 51, 51, 0.3); /* pencil dots */
--flxn-pop-shadow: rgba(88, 80, 62, 0.3);
}
/* ---------------------------------------------------------------- */
/* 2b. Dark — chalk on slate */
/* ---------------------------------------------------------------- */
[data-theme="sketch"][data-theme][data-mantine-color-scheme="dark"] {
--sk-ink: #dfdcd0; /* chalk */
--sk-ink-soft: rgba(223, 220, 208, 0.5);
--sk-on-fill: #232a26;
--sk-paper: #232a26;
--sk-paper-raised: #2a322d;
--sk-wash: color-mix(in srgb, var(--mantine-primary-color-4) 22%, #2a322d);
--sk-accent-ink: color-mix(in srgb, var(--mantine-primary-color-3) 70%, #dfdcd0);
--sk-smudge: rgba(0, 0, 0, 0.45);
--sk-hatch: rgba(35, 42, 38, 0.4);
--sk-skeleton: #38423b;
--sk-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='5' viewBox='0 0 22 5'%3E%3Cpath d='M0 3 Q 5.5 0.8 11 3 T 22 3' fill='none' stroke='%23dfdcd0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
--mantine-color-body: #232a26;
--mantine-color-text: #e8e5da;
--mantine-color-bright: #f6f4ec;
--mantine-color-dimmed: #a3ac9f;
--mantine-color-placeholder: #8b948a;
--mantine-color-anchor: var(--sk-accent-ink);
--mantine-color-error: #e8a198;
--mantine-color-default: #2a322d;
--mantine-color-default-hover: #333c36;
--mantine-color-default-color: #e8e5da;
--mantine-color-default-border: #d7d4c6;
--mantine-primary-color-contrast: #232a26;
/* app tokens — dusty chalk pastels */
--flxn-gold: #ecd27a;
--flxn-silver: #b9beb3;
--flxn-bronze: #d9a06b;
--flxn-toast-success: #b3d7ae;
--flxn-toast-error: #eaa79b;
--flxn-podium-1-bg: color-mix(in srgb, #ecd27a 12%, #2a322d);
--flxn-podium-1-border: #cdb96b;
--flxn-podium-1-label: #e9d78f;
--flxn-podium-2-bg: color-mix(in srgb, #b9beb3 10%, #2a322d);
--flxn-podium-2-border: #a4a99e;
--flxn-podium-2-label: #c9cec2;
--flxn-podium-3-bg: color-mix(in srgb, #d9a06b 12%, #2a322d);
--flxn-podium-3-border: #c08f5c;
--flxn-podium-3-label: #e0b384;
--flxn-showcase-bg: #2a322d;
--flxn-overlay: rgba(6, 9, 8, 0.6);
--flxn-dotgrid-color: rgba(223, 220, 208, 0.22); /* chalk dots */
--flxn-pop-shadow: rgba(0, 0, 0, 0.55);
}
/* ---------------------------------------------------------------- */
/* 3. Paper grain / chalk dust — one fixed overlay, feTurbulence */
/* ---------------------------------------------------------------- */
[data-theme="sketch"] body::before {
content: "";
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
background-repeat: repeat;
mix-blend-mode: multiply;
opacity: 0.05;
}
[data-theme="sketch"][data-mantine-color-scheme="dark"] body::before {
mix-blend-mode: screen;
opacity: 0.07;
}
/* ---------------------------------------------------------------- */
/* 4. Surfaces — every card its own doodle */
/* ---------------------------------------------------------------- */
[data-theme="sketch"] .mantine-Paper-root {
background-color: var(--sk-paper-raised);
border: 2px solid var(--sk-ink);
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
box-shadow: none;
}
[data-theme="sketch"] .mantine-Card-root {
border-radius: 15px 225px 15px 255px / 225px 15px 255px 15px;
}
[data-theme="sketch"] .mantine-Modal-content {
border-radius: 18px 225px 22px 255px / 255px 22px 225px 18px;
box-shadow: var(--mantine-shadow-xl);
}
[data-theme="sketch"] .mantine-Modal-header {
background-color: var(--sk-paper-raised);
}
[data-theme="sketch"] .mantine-Drawer-content {
border-radius: 20px 235px 16px 245px / 245px 16px 235px 20px;
box-shadow: var(--mantine-shadow-xl);
}
[data-theme="sketch"] .mantine-Popover-dropdown,
[data-theme="sketch"] .mantine-Menu-dropdown {
background-color: var(--sk-paper-raised);
border: 2px solid var(--sk-ink);
border-radius: 255px 25px 225px 22px / 22px 225px 25px 255px;
box-shadow: var(--mantine-shadow-md);
}
[data-theme="sketch"] .mantine-Menu-item {
border-radius: 215px 14px 195px 16px / 16px 195px 14px 215px;
}
[data-theme="sketch"] .mantine-Notification-root {
background-color: var(--sk-paper-raised);
border: 2px solid var(--sk-ink);
border-radius: 15px 245px 18px 235px / 235px 18px 245px 15px;
box-shadow: var(--mantine-shadow-md);
}
[data-theme="sketch"] .mantine-Alert-root {
border: 2px solid var(--sk-ink-soft);
border-radius: 20px 240px 16px 250px / 250px 16px 240px 20px;
}
[data-theme="sketch"] .mantine-Tooltip-tooltip {
background-color: var(--sk-ink);
color: var(--sk-paper);
border-radius: 205px 12px 225px 14px / 14px 225px 12px 205px;
}
/* ---------------------------------------------------------------- */
/* 5. Shell */
/* ---------------------------------------------------------------- */
[data-theme="sketch"] .mantine-AppShell-header {
border-bottom: 2px solid var(--sk-ink);
}
[data-theme="sketch"] .mantine-AppShell-navbar {
border-inline-end: 2px solid var(--sk-ink);
}
[data-theme="sketch"] .mantine-AppShell-aside {
border-inline-start: 2px solid var(--sk-ink);
}
[data-theme="sketch"] .mantine-Divider-root {
--divider-color: var(--sk-ink-soft);
--divider-size: 2px;
}
[data-theme="sketch"] .mantine-Divider-root[data-orientation="horizontal"] {
border-top-style: dashed;
}
[data-theme="sketch"] .mantine-Divider-root[data-orientation="vertical"] {
border-inline-start-style: dashed;
}
/* ---------------------------------------------------------------- */
/* 6. Buttons — sketched boxes */
/* ---------------------------------------------------------------- */
[data-theme="sketch"] .mantine-Button-root {
border-radius: 225px 20px 255px 15px / 15px 255px 20px 225px;
box-shadow: none;
font-weight: 400; /* Patrick Hand ships 400 only; avoid faux bold */
}
[data-theme="sketch"] .mantine-Button-root:where([data-variant="filled"], [data-variant="default"], [data-variant="outline"], [data-variant="light"], [data-variant="white"]) {
border: 2px solid var(--sk-ink);
}
[data-theme="sketch"] .mantine-ActionIcon-root {
border-radius: 160px 25px 185px 28px / 28px 185px 25px 160px;
box-shadow: none;
}
[data-theme="sketch"] .mantine-ActionIcon-root:where([data-variant="filled"], [data-variant="default"], [data-variant="outline"], [data-variant="light"], [data-variant="white"]) {
border: 2px solid var(--sk-ink);
}
[data-theme="sketch"] .mantine-Button-root[data-variant="filled"],
[data-theme="sketch"] .mantine-ActionIcon-root[data-variant="filled"],
[data-theme="sketch"] .mantine-Badge-root[data-variant="filled"],
[data-theme="sketch"] .mantine-ThemeIcon-root[data-variant="filled"] {
color: var(--sk-on-fill); /* ink on watercolor wash, chalkboard on pastel */
}
/* press feedback: a slight crooked stamp */
@media (prefers-reduced-motion: no-preference) {
[data-theme="sketch"] .flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
transform: scale(0.96) rotate(-0.7deg);
}
}
/* ---------------------------------------------------------------- */
/* 7. Inputs */
/* ---------------------------------------------------------------- */
[data-theme="sketch"] .mantine-Input-input {
background-color: var(--sk-paper-raised);
border: 2px solid var(--sk-ink);
border-radius: 12px 255px 18px 225px / 225px 18px 255px 12px;
}
[data-theme="sketch"] .mantine-Input-input:focus,
[data-theme="sketch"] .mantine-Input-input:focus-within {
border-color: var(--sk-accent-ink);
}
[data-theme="sketch"] .mantine-InputWrapper-label {
font-family: var(--mantine-font-family-headings);
font-size: 1.15rem;
}
[data-theme="sketch"] .mantine-PinInput-input {
border-radius: 190px 16px 210px 14px / 14px 210px 16px 190px;
}
[data-theme="sketch"] .mantine-Checkbox-input {
background-color: var(--sk-paper-raised);
border: 2px solid var(--sk-ink);
border-radius: 155px 8px 145px 10px / 10px 145px 8px 155px;
}
[data-theme="sketch"] .mantine-Checkbox-icon {
color: var(--sk-on-fill);
}
[data-theme="sketch"] .mantine-Radio-radio {
background-color: var(--sk-paper-raised);
border: 2px solid var(--sk-ink);
border-radius: 48% 52% 51% 49% / 52% 48% 52% 48%;
}
[data-theme="sketch"] .mantine-Radio-icon {
color: var(--sk-on-fill);
}
[data-theme="sketch"] .mantine-Switch-track {
background-color: var(--sk-paper-raised);
border: 2px solid var(--sk-ink);
border-radius: 120px 40px 110px 45px / 45px 110px 40px 120px;
}
[data-theme="sketch"] .mantine-Switch-thumb {
background-color: var(--sk-paper-raised);
border: 2px solid var(--sk-ink);
border-radius: 50% 46% 54% 48% / 48% 54% 46% 52%;
}
/* ---------------------------------------------------------------- */
/* 8. Tabs — scribbled underline on the active tab */
/* ---------------------------------------------------------------- */
[data-theme="sketch"] .mantine-Tabs-tab {
border-radius: 200px 12px 190px 14px / 14px 190px 12px 200px;
font-weight: 400;
}
[data-theme="sketch"] .mantine-Tabs-tab[data-active] {
border-color: transparent;
background-image: var(--sk-squiggle);
background-repeat: repeat-x;
background-position: left bottom 1px;
background-size: 22px 5px;
color: var(--mantine-color-text);
}
[data-theme="sketch"] .mantine-SegmentedControl-root {
background-color: transparent;
border: 2px solid var(--sk-ink);
border-radius: 225px 18px 255px 15px / 15px 255px 18px 225px;
}
[data-theme="sketch"] .mantine-SegmentedControl-indicator {
background-color: var(--sk-wash);
border: 2px solid var(--sk-ink-soft);
border-radius: 205px 15px 235px 12px / 12px 235px 15px 205px;
box-shadow: none;
}
[data-theme="sketch"] .mantine-NavLink-root {
border: 2px solid transparent;
border-radius: 235px 18px 215px 20px / 20px 215px 18px 235px;
}
[data-theme="sketch"] .mantine-NavLink-root[data-active] {
border-color: var(--sk-ink-soft);
}
/* ---------------------------------------------------------------- */
/* 9. Small pieces */
/* ---------------------------------------------------------------- */
[data-theme="sketch"] .mantine-Badge-root {
border: 2px solid var(--sk-ink);
border-radius: 255px 10px 225px 12px / 12px 225px 10px 255px;
font-weight: 400;
letter-spacing: 0.02em;
}
[data-theme="sketch"] .mantine-ThemeIcon-root {
border: 2px solid var(--sk-ink);
border-radius: 170px 30px 150px 35px / 35px 150px 30px 170px;
}
[data-theme="sketch"] .mantine-Indicator-indicator {
border: 1.5px solid var(--sk-ink);
border-radius: 50% 45% 55% 48% / 52% 50% 46% 54%;
}
[data-theme="sketch"] .mantine-Skeleton-root {
border-radius: 225px 20px 245px 18px / 18px 245px 20px 225px;
}
[data-theme="sketch"] .mantine-Skeleton-root::after {
background-color: var(--sk-skeleton);
}
[data-theme="sketch"] .mantine-Loader-root {
--loader-color: var(--sk-accent-ink);
}
/* progress bar: wobbly pill with pencil cross-hatch fill */
[data-theme="sketch"] .mantine-Progress-root {
background-color: var(--sk-paper-raised);
border: 2px solid var(--sk-ink);
border-radius: 100px 30px 90px 35px / 35px 90px 30px 100px;
}
[data-theme="sketch"] .mantine-Progress-section {
background-image: repeating-linear-gradient(45deg, transparent 0 4px, var(--sk-hatch) 4px 6px);
}
[data-theme="sketch"] .mantine-Progress-label {
color: var(--sk-on-fill);
}
/* ---------------------------------------------------------------- */
/* 9b. App component hooks */
/* ---------------------------------------------------------------- */
/* Tab strip: flat on the page when resting; the raised paper strip with
its pencil rule appears only while docked. Resting keeps the 2px dashed
border transparent so docking doesn't shift layout. */
[data-theme="sketch"] .flxn-tabs {
border-bottom: 2px dashed transparent;
}
[data-theme="sketch"] .flxn-tabs[data-stuck] {
background-color: var(--sk-paper-raised);
border-bottom-color: var(--sk-ink-soft);
}
[data-theme="sketch"] .flxn-tab.flxn-tab {
position: relative;
border-radius: 200px 12px 190px 14px / 14px 190px 12px 200px;
}
/* active tab: accent watercolor wash + accent scribble underline */
[data-theme="sketch"] .flxn-tab.flxn-tab[data-active] {
background-color: var(--sk-wash);
color: var(--sk-accent-ink);
font-weight: 400; /* Patrick Hand has no bold */
}
[data-theme="sketch"] .flxn-tab.flxn-tab[data-active]::after {
content: "";
position: absolute;
inset-inline: 0.6rem;
bottom: 2px;
height: 5px;
background-color: var(--sk-accent-ink);
-webkit-mask-image: var(--sk-squiggle);
mask-image: var(--sk-squiggle);
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 22px 5px;
mask-size: 22px 5px;
}
/* the tab treatment carries the state — drop the straight underline */
[data-theme="sketch"] .flxn-tabs-indicator.flxn-tabs-indicator {
border-bottom: none;
}
/* Nav grid tiles: sketched boxes, each drawn slightly differently */
[data-theme="sketch"] .flxn-tile {
background-color: var(--sk-paper-raised);
border: 2px solid var(--sk-ink);
border-radius: 255px 15px 225px 18px / 18px 225px 15px 255px;
box-shadow: none;
}
[data-theme="sketch"] .flxn-tile:nth-child(even) {
border-radius: 15px 235px 18px 245px / 235px 15px 245px 18px;
}
[data-theme="sketch"] .flxn-tile:nth-child(3n) {
border-radius: 225px 22px 245px 15px / 15px 245px 22px 225px;
}
[data-theme="sketch"] .flxn-tile-icon {
color: var(--sk-accent-ink);
}
/* "See all" chip: hand-drawn pill; wash bg/hover come from the retuned
primary variant vars in hooks.css */
[data-theme="sketch"] .flxn-see-all.flxn-see-all {
border: 2px solid var(--sk-ink);
border-radius: 255px 12px 225px 14px / 14px 225px 12px 255px;
font-weight: 400;
}
/* Match card + reaction tray: one construction, matching 2px pen border */
[data-theme="sketch"] .flxn-match-card.flxn-match-card {
background-color: var(--sk-paper-raised);
border: 2px solid var(--sk-ink);
border-radius: 18px 235px 16px 245px / 235px 18px 245px 16px;
box-shadow: none;
}
[data-theme="sketch"] .flxn-reaction-row.flxn-reaction-row {
background-color: var(--sk-paper);
border: 2px solid var(--sk-ink);
border-radius: 15px 225px 18px 235px / 225px 15px 235px 18px;
}
/* ---------------------------------------------------------------- */
/* 10. Watercolor washes (light) / dusty chalk pastels (dark) */
/* Every palette color's variant vars are re-derived from its own */
/* numbered shades, so the user's accent (and any colored variant) */
/* shows through as a low-saturation wash instead of a solid fill. */
/* ---------------------------------------------------------------- */
[data-theme="sketch"][data-theme][data-mantine-color-scheme="light"] {
--mantine-color-red-filled: color-mix(in srgb, var(--mantine-color-red-6) 45%, #fffdf6);
--mantine-color-red-filled-hover: color-mix(in srgb, var(--mantine-color-red-6) 58%, #fffdf6);
--mantine-color-red-light: color-mix(in srgb, var(--mantine-color-red-6) 15%, #fffdf6);
--mantine-color-red-light-hover: color-mix(in srgb, var(--mantine-color-red-6) 23%, #fffdf6);
--mantine-color-red-light-color: color-mix(in srgb, var(--mantine-color-red-9) 72%, #333333);
--mantine-color-red-outline: color-mix(in srgb, var(--mantine-color-red-7) 65%, #333333);
--mantine-color-red-outline-hover: color-mix(in srgb, var(--mantine-color-red-6) 15%, #fffdf6);
--mantine-color-red-text: color-mix(in srgb, var(--mantine-color-red-8) 75%, #333333);
--mantine-color-pink-filled: color-mix(in srgb, var(--mantine-color-pink-6) 45%, #fffdf6);
--mantine-color-pink-filled-hover: color-mix(in srgb, var(--mantine-color-pink-6) 58%, #fffdf6);
--mantine-color-pink-light: color-mix(in srgb, var(--mantine-color-pink-6) 15%, #fffdf6);
--mantine-color-pink-light-hover: color-mix(in srgb, var(--mantine-color-pink-6) 23%, #fffdf6);
--mantine-color-pink-light-color: color-mix(in srgb, var(--mantine-color-pink-9) 72%, #333333);
--mantine-color-pink-outline: color-mix(in srgb, var(--mantine-color-pink-7) 65%, #333333);
--mantine-color-pink-outline-hover: color-mix(in srgb, var(--mantine-color-pink-6) 15%, #fffdf6);
--mantine-color-pink-text: color-mix(in srgb, var(--mantine-color-pink-8) 75%, #333333);
--mantine-color-grape-filled: color-mix(in srgb, var(--mantine-color-grape-6) 45%, #fffdf6);
--mantine-color-grape-filled-hover: color-mix(in srgb, var(--mantine-color-grape-6) 58%, #fffdf6);
--mantine-color-grape-light: color-mix(in srgb, var(--mantine-color-grape-6) 15%, #fffdf6);
--mantine-color-grape-light-hover: color-mix(in srgb, var(--mantine-color-grape-6) 23%, #fffdf6);
--mantine-color-grape-light-color: color-mix(in srgb, var(--mantine-color-grape-9) 72%, #333333);
--mantine-color-grape-outline: color-mix(in srgb, var(--mantine-color-grape-7) 65%, #333333);
--mantine-color-grape-outline-hover: color-mix(in srgb, var(--mantine-color-grape-6) 15%, #fffdf6);
--mantine-color-grape-text: color-mix(in srgb, var(--mantine-color-grape-8) 75%, #333333);
--mantine-color-violet-filled: color-mix(in srgb, var(--mantine-color-violet-6) 45%, #fffdf6);
--mantine-color-violet-filled-hover: color-mix(in srgb, var(--mantine-color-violet-6) 58%, #fffdf6);
--mantine-color-violet-light: color-mix(in srgb, var(--mantine-color-violet-6) 15%, #fffdf6);
--mantine-color-violet-light-hover: color-mix(in srgb, var(--mantine-color-violet-6) 23%, #fffdf6);
--mantine-color-violet-light-color: color-mix(in srgb, var(--mantine-color-violet-9) 72%, #333333);
--mantine-color-violet-outline: color-mix(in srgb, var(--mantine-color-violet-7) 65%, #333333);
--mantine-color-violet-outline-hover: color-mix(in srgb, var(--mantine-color-violet-6) 15%, #fffdf6);
--mantine-color-violet-text: color-mix(in srgb, var(--mantine-color-violet-8) 75%, #333333);
--mantine-color-indigo-filled: color-mix(in srgb, var(--mantine-color-indigo-6) 45%, #fffdf6);
--mantine-color-indigo-filled-hover: color-mix(in srgb, var(--mantine-color-indigo-6) 58%, #fffdf6);
--mantine-color-indigo-light: color-mix(in srgb, var(--mantine-color-indigo-6) 15%, #fffdf6);
--mantine-color-indigo-light-hover: color-mix(in srgb, var(--mantine-color-indigo-6) 23%, #fffdf6);
--mantine-color-indigo-light-color: color-mix(in srgb, var(--mantine-color-indigo-9) 72%, #333333);
--mantine-color-indigo-outline: color-mix(in srgb, var(--mantine-color-indigo-7) 65%, #333333);
--mantine-color-indigo-outline-hover: color-mix(in srgb, var(--mantine-color-indigo-6) 15%, #fffdf6);
--mantine-color-indigo-text: color-mix(in srgb, var(--mantine-color-indigo-8) 75%, #333333);
--mantine-color-blue-filled: color-mix(in srgb, var(--mantine-color-blue-6) 45%, #fffdf6);
--mantine-color-blue-filled-hover: color-mix(in srgb, var(--mantine-color-blue-6) 58%, #fffdf6);
--mantine-color-blue-light: color-mix(in srgb, var(--mantine-color-blue-6) 15%, #fffdf6);
--mantine-color-blue-light-hover: color-mix(in srgb, var(--mantine-color-blue-6) 23%, #fffdf6);
--mantine-color-blue-light-color: color-mix(in srgb, var(--mantine-color-blue-9) 72%, #333333);
--mantine-color-blue-outline: color-mix(in srgb, var(--mantine-color-blue-7) 65%, #333333);
--mantine-color-blue-outline-hover: color-mix(in srgb, var(--mantine-color-blue-6) 15%, #fffdf6);
--mantine-color-blue-text: color-mix(in srgb, var(--mantine-color-blue-8) 75%, #333333);
--mantine-color-cyan-filled: color-mix(in srgb, var(--mantine-color-cyan-6) 45%, #fffdf6);
--mantine-color-cyan-filled-hover: color-mix(in srgb, var(--mantine-color-cyan-6) 58%, #fffdf6);
--mantine-color-cyan-light: color-mix(in srgb, var(--mantine-color-cyan-6) 15%, #fffdf6);
--mantine-color-cyan-light-hover: color-mix(in srgb, var(--mantine-color-cyan-6) 23%, #fffdf6);
--mantine-color-cyan-light-color: color-mix(in srgb, var(--mantine-color-cyan-9) 72%, #333333);
--mantine-color-cyan-outline: color-mix(in srgb, var(--mantine-color-cyan-7) 65%, #333333);
--mantine-color-cyan-outline-hover: color-mix(in srgb, var(--mantine-color-cyan-6) 15%, #fffdf6);
--mantine-color-cyan-text: color-mix(in srgb, var(--mantine-color-cyan-8) 75%, #333333);
--mantine-color-teal-filled: color-mix(in srgb, var(--mantine-color-teal-6) 45%, #fffdf6);
--mantine-color-teal-filled-hover: color-mix(in srgb, var(--mantine-color-teal-6) 58%, #fffdf6);
--mantine-color-teal-light: color-mix(in srgb, var(--mantine-color-teal-6) 15%, #fffdf6);
--mantine-color-teal-light-hover: color-mix(in srgb, var(--mantine-color-teal-6) 23%, #fffdf6);
--mantine-color-teal-light-color: color-mix(in srgb, var(--mantine-color-teal-9) 72%, #333333);
--mantine-color-teal-outline: color-mix(in srgb, var(--mantine-color-teal-7) 65%, #333333);
--mantine-color-teal-outline-hover: color-mix(in srgb, var(--mantine-color-teal-6) 15%, #fffdf6);
--mantine-color-teal-text: color-mix(in srgb, var(--mantine-color-teal-8) 75%, #333333);
--mantine-color-green-filled: color-mix(in srgb, var(--mantine-color-green-6) 45%, #fffdf6);
--mantine-color-green-filled-hover: color-mix(in srgb, var(--mantine-color-green-6) 58%, #fffdf6);
--mantine-color-green-light: color-mix(in srgb, var(--mantine-color-green-6) 15%, #fffdf6);
--mantine-color-green-light-hover: color-mix(in srgb, var(--mantine-color-green-6) 23%, #fffdf6);
--mantine-color-green-light-color: color-mix(in srgb, var(--mantine-color-green-9) 72%, #333333);
--mantine-color-green-outline: color-mix(in srgb, var(--mantine-color-green-7) 65%, #333333);
--mantine-color-green-outline-hover: color-mix(in srgb, var(--mantine-color-green-6) 15%, #fffdf6);
--mantine-color-green-text: color-mix(in srgb, var(--mantine-color-green-8) 75%, #333333);
--mantine-color-lime-filled: color-mix(in srgb, var(--mantine-color-lime-6) 45%, #fffdf6);
--mantine-color-lime-filled-hover: color-mix(in srgb, var(--mantine-color-lime-6) 58%, #fffdf6);
--mantine-color-lime-light: color-mix(in srgb, var(--mantine-color-lime-6) 15%, #fffdf6);
--mantine-color-lime-light-hover: color-mix(in srgb, var(--mantine-color-lime-6) 23%, #fffdf6);
--mantine-color-lime-light-color: color-mix(in srgb, var(--mantine-color-lime-9) 72%, #333333);
--mantine-color-lime-outline: color-mix(in srgb, var(--mantine-color-lime-7) 65%, #333333);
--mantine-color-lime-outline-hover: color-mix(in srgb, var(--mantine-color-lime-6) 15%, #fffdf6);
--mantine-color-lime-text: color-mix(in srgb, var(--mantine-color-lime-8) 75%, #333333);
--mantine-color-yellow-filled: color-mix(in srgb, var(--mantine-color-yellow-6) 45%, #fffdf6);
--mantine-color-yellow-filled-hover: color-mix(in srgb, var(--mantine-color-yellow-6) 58%, #fffdf6);
--mantine-color-yellow-light: color-mix(in srgb, var(--mantine-color-yellow-6) 15%, #fffdf6);
--mantine-color-yellow-light-hover: color-mix(in srgb, var(--mantine-color-yellow-6) 23%, #fffdf6);
--mantine-color-yellow-light-color: color-mix(in srgb, var(--mantine-color-yellow-9) 72%, #333333);
--mantine-color-yellow-outline: color-mix(in srgb, var(--mantine-color-yellow-7) 65%, #333333);
--mantine-color-yellow-outline-hover: color-mix(in srgb, var(--mantine-color-yellow-6) 15%, #fffdf6);
--mantine-color-yellow-text: color-mix(in srgb, var(--mantine-color-yellow-8) 75%, #333333);
--mantine-color-orange-filled: color-mix(in srgb, var(--mantine-color-orange-6) 45%, #fffdf6);
--mantine-color-orange-filled-hover: color-mix(in srgb, var(--mantine-color-orange-6) 58%, #fffdf6);
--mantine-color-orange-light: color-mix(in srgb, var(--mantine-color-orange-6) 15%, #fffdf6);
--mantine-color-orange-light-hover: color-mix(in srgb, var(--mantine-color-orange-6) 23%, #fffdf6);
--mantine-color-orange-light-color: color-mix(in srgb, var(--mantine-color-orange-9) 72%, #333333);
--mantine-color-orange-outline: color-mix(in srgb, var(--mantine-color-orange-7) 65%, #333333);
--mantine-color-orange-outline-hover: color-mix(in srgb, var(--mantine-color-orange-6) 15%, #fffdf6);
--mantine-color-orange-text: color-mix(in srgb, var(--mantine-color-orange-8) 75%, #333333);
--mantine-color-gray-filled: color-mix(in srgb, var(--mantine-color-gray-6) 45%, #fffdf6);
--mantine-color-gray-filled-hover: color-mix(in srgb, var(--mantine-color-gray-6) 58%, #fffdf6);
--mantine-color-gray-light: color-mix(in srgb, var(--mantine-color-gray-6) 15%, #fffdf6);
--mantine-color-gray-light-hover: color-mix(in srgb, var(--mantine-color-gray-6) 23%, #fffdf6);
--mantine-color-gray-light-color: color-mix(in srgb, var(--mantine-color-gray-9) 72%, #333333);
--mantine-color-gray-outline: color-mix(in srgb, var(--mantine-color-gray-7) 65%, #333333);
--mantine-color-gray-outline-hover: color-mix(in srgb, var(--mantine-color-gray-6) 15%, #fffdf6);
--mantine-color-gray-text: color-mix(in srgb, var(--mantine-color-gray-8) 75%, #333333);
}
[data-theme="sketch"][data-theme][data-mantine-color-scheme="dark"] {
--mantine-color-red-filled: color-mix(in srgb, var(--mantine-color-red-3) 62%, #d9d5c7);
--mantine-color-red-filled-hover: color-mix(in srgb, var(--mantine-color-red-3) 76%, #d9d5c7);
--mantine-color-red-light: color-mix(in srgb, var(--mantine-color-red-4) 20%, #2a322d);
--mantine-color-red-light-hover: color-mix(in srgb, var(--mantine-color-red-4) 30%, #2a322d);
--mantine-color-red-light-color: color-mix(in srgb, var(--mantine-color-red-2) 78%, #e8e5da);
--mantine-color-red-outline: color-mix(in srgb, var(--mantine-color-red-2) 80%, #dfdcd0);
--mantine-color-red-outline-hover: color-mix(in srgb, var(--mantine-color-red-4) 22%, #2a322d);
--mantine-color-red-text: color-mix(in srgb, var(--mantine-color-red-2) 80%, #e8e5da);
--mantine-color-pink-filled: color-mix(in srgb, var(--mantine-color-pink-3) 62%, #d9d5c7);
--mantine-color-pink-filled-hover: color-mix(in srgb, var(--mantine-color-pink-3) 76%, #d9d5c7);
--mantine-color-pink-light: color-mix(in srgb, var(--mantine-color-pink-4) 20%, #2a322d);
--mantine-color-pink-light-hover: color-mix(in srgb, var(--mantine-color-pink-4) 30%, #2a322d);
--mantine-color-pink-light-color: color-mix(in srgb, var(--mantine-color-pink-2) 78%, #e8e5da);
--mantine-color-pink-outline: color-mix(in srgb, var(--mantine-color-pink-2) 80%, #dfdcd0);
--mantine-color-pink-outline-hover: color-mix(in srgb, var(--mantine-color-pink-4) 22%, #2a322d);
--mantine-color-pink-text: color-mix(in srgb, var(--mantine-color-pink-2) 80%, #e8e5da);
--mantine-color-grape-filled: color-mix(in srgb, var(--mantine-color-grape-3) 62%, #d9d5c7);
--mantine-color-grape-filled-hover: color-mix(in srgb, var(--mantine-color-grape-3) 76%, #d9d5c7);
--mantine-color-grape-light: color-mix(in srgb, var(--mantine-color-grape-4) 20%, #2a322d);
--mantine-color-grape-light-hover: color-mix(in srgb, var(--mantine-color-grape-4) 30%, #2a322d);
--mantine-color-grape-light-color: color-mix(in srgb, var(--mantine-color-grape-2) 78%, #e8e5da);
--mantine-color-grape-outline: color-mix(in srgb, var(--mantine-color-grape-2) 80%, #dfdcd0);
--mantine-color-grape-outline-hover: color-mix(in srgb, var(--mantine-color-grape-4) 22%, #2a322d);
--mantine-color-grape-text: color-mix(in srgb, var(--mantine-color-grape-2) 80%, #e8e5da);
--mantine-color-violet-filled: color-mix(in srgb, var(--mantine-color-violet-3) 62%, #d9d5c7);
--mantine-color-violet-filled-hover: color-mix(in srgb, var(--mantine-color-violet-3) 76%, #d9d5c7);
--mantine-color-violet-light: color-mix(in srgb, var(--mantine-color-violet-4) 20%, #2a322d);
--mantine-color-violet-light-hover: color-mix(in srgb, var(--mantine-color-violet-4) 30%, #2a322d);
--mantine-color-violet-light-color: color-mix(in srgb, var(--mantine-color-violet-2) 78%, #e8e5da);
--mantine-color-violet-outline: color-mix(in srgb, var(--mantine-color-violet-2) 80%, #dfdcd0);
--mantine-color-violet-outline-hover: color-mix(in srgb, var(--mantine-color-violet-4) 22%, #2a322d);
--mantine-color-violet-text: color-mix(in srgb, var(--mantine-color-violet-2) 80%, #e8e5da);
--mantine-color-indigo-filled: color-mix(in srgb, var(--mantine-color-indigo-3) 62%, #d9d5c7);
--mantine-color-indigo-filled-hover: color-mix(in srgb, var(--mantine-color-indigo-3) 76%, #d9d5c7);
--mantine-color-indigo-light: color-mix(in srgb, var(--mantine-color-indigo-4) 20%, #2a322d);
--mantine-color-indigo-light-hover: color-mix(in srgb, var(--mantine-color-indigo-4) 30%, #2a322d);
--mantine-color-indigo-light-color: color-mix(in srgb, var(--mantine-color-indigo-2) 78%, #e8e5da);
--mantine-color-indigo-outline: color-mix(in srgb, var(--mantine-color-indigo-2) 80%, #dfdcd0);
--mantine-color-indigo-outline-hover: color-mix(in srgb, var(--mantine-color-indigo-4) 22%, #2a322d);
--mantine-color-indigo-text: color-mix(in srgb, var(--mantine-color-indigo-2) 80%, #e8e5da);
--mantine-color-blue-filled: color-mix(in srgb, var(--mantine-color-blue-3) 62%, #d9d5c7);
--mantine-color-blue-filled-hover: color-mix(in srgb, var(--mantine-color-blue-3) 76%, #d9d5c7);
--mantine-color-blue-light: color-mix(in srgb, var(--mantine-color-blue-4) 20%, #2a322d);
--mantine-color-blue-light-hover: color-mix(in srgb, var(--mantine-color-blue-4) 30%, #2a322d);
--mantine-color-blue-light-color: color-mix(in srgb, var(--mantine-color-blue-2) 78%, #e8e5da);
--mantine-color-blue-outline: color-mix(in srgb, var(--mantine-color-blue-2) 80%, #dfdcd0);
--mantine-color-blue-outline-hover: color-mix(in srgb, var(--mantine-color-blue-4) 22%, #2a322d);
--mantine-color-blue-text: color-mix(in srgb, var(--mantine-color-blue-2) 80%, #e8e5da);
--mantine-color-cyan-filled: color-mix(in srgb, var(--mantine-color-cyan-3) 62%, #d9d5c7);
--mantine-color-cyan-filled-hover: color-mix(in srgb, var(--mantine-color-cyan-3) 76%, #d9d5c7);
--mantine-color-cyan-light: color-mix(in srgb, var(--mantine-color-cyan-4) 20%, #2a322d);
--mantine-color-cyan-light-hover: color-mix(in srgb, var(--mantine-color-cyan-4) 30%, #2a322d);
--mantine-color-cyan-light-color: color-mix(in srgb, var(--mantine-color-cyan-2) 78%, #e8e5da);
--mantine-color-cyan-outline: color-mix(in srgb, var(--mantine-color-cyan-2) 80%, #dfdcd0);
--mantine-color-cyan-outline-hover: color-mix(in srgb, var(--mantine-color-cyan-4) 22%, #2a322d);
--mantine-color-cyan-text: color-mix(in srgb, var(--mantine-color-cyan-2) 80%, #e8e5da);
--mantine-color-teal-filled: color-mix(in srgb, var(--mantine-color-teal-3) 62%, #d9d5c7);
--mantine-color-teal-filled-hover: color-mix(in srgb, var(--mantine-color-teal-3) 76%, #d9d5c7);
--mantine-color-teal-light: color-mix(in srgb, var(--mantine-color-teal-4) 20%, #2a322d);
--mantine-color-teal-light-hover: color-mix(in srgb, var(--mantine-color-teal-4) 30%, #2a322d);
--mantine-color-teal-light-color: color-mix(in srgb, var(--mantine-color-teal-2) 78%, #e8e5da);
--mantine-color-teal-outline: color-mix(in srgb, var(--mantine-color-teal-2) 80%, #dfdcd0);
--mantine-color-teal-outline-hover: color-mix(in srgb, var(--mantine-color-teal-4) 22%, #2a322d);
--mantine-color-teal-text: color-mix(in srgb, var(--mantine-color-teal-2) 80%, #e8e5da);
--mantine-color-green-filled: color-mix(in srgb, var(--mantine-color-green-3) 62%, #d9d5c7);
--mantine-color-green-filled-hover: color-mix(in srgb, var(--mantine-color-green-3) 76%, #d9d5c7);
--mantine-color-green-light: color-mix(in srgb, var(--mantine-color-green-4) 20%, #2a322d);
--mantine-color-green-light-hover: color-mix(in srgb, var(--mantine-color-green-4) 30%, #2a322d);
--mantine-color-green-light-color: color-mix(in srgb, var(--mantine-color-green-2) 78%, #e8e5da);
--mantine-color-green-outline: color-mix(in srgb, var(--mantine-color-green-2) 80%, #dfdcd0);
--mantine-color-green-outline-hover: color-mix(in srgb, var(--mantine-color-green-4) 22%, #2a322d);
--mantine-color-green-text: color-mix(in srgb, var(--mantine-color-green-2) 80%, #e8e5da);
--mantine-color-lime-filled: color-mix(in srgb, var(--mantine-color-lime-3) 62%, #d9d5c7);
--mantine-color-lime-filled-hover: color-mix(in srgb, var(--mantine-color-lime-3) 76%, #d9d5c7);
--mantine-color-lime-light: color-mix(in srgb, var(--mantine-color-lime-4) 20%, #2a322d);
--mantine-color-lime-light-hover: color-mix(in srgb, var(--mantine-color-lime-4) 30%, #2a322d);
--mantine-color-lime-light-color: color-mix(in srgb, var(--mantine-color-lime-2) 78%, #e8e5da);
--mantine-color-lime-outline: color-mix(in srgb, var(--mantine-color-lime-2) 80%, #dfdcd0);
--mantine-color-lime-outline-hover: color-mix(in srgb, var(--mantine-color-lime-4) 22%, #2a322d);
--mantine-color-lime-text: color-mix(in srgb, var(--mantine-color-lime-2) 80%, #e8e5da);
--mantine-color-yellow-filled: color-mix(in srgb, var(--mantine-color-yellow-3) 62%, #d9d5c7);
--mantine-color-yellow-filled-hover: color-mix(in srgb, var(--mantine-color-yellow-3) 76%, #d9d5c7);
--mantine-color-yellow-light: color-mix(in srgb, var(--mantine-color-yellow-4) 20%, #2a322d);
--mantine-color-yellow-light-hover: color-mix(in srgb, var(--mantine-color-yellow-4) 30%, #2a322d);
--mantine-color-yellow-light-color: color-mix(in srgb, var(--mantine-color-yellow-2) 78%, #e8e5da);
--mantine-color-yellow-outline: color-mix(in srgb, var(--mantine-color-yellow-2) 80%, #dfdcd0);
--mantine-color-yellow-outline-hover: color-mix(in srgb, var(--mantine-color-yellow-4) 22%, #2a322d);
--mantine-color-yellow-text: color-mix(in srgb, var(--mantine-color-yellow-2) 80%, #e8e5da);
--mantine-color-orange-filled: color-mix(in srgb, var(--mantine-color-orange-3) 62%, #d9d5c7);
--mantine-color-orange-filled-hover: color-mix(in srgb, var(--mantine-color-orange-3) 76%, #d9d5c7);
--mantine-color-orange-light: color-mix(in srgb, var(--mantine-color-orange-4) 20%, #2a322d);
--mantine-color-orange-light-hover: color-mix(in srgb, var(--mantine-color-orange-4) 30%, #2a322d);
--mantine-color-orange-light-color: color-mix(in srgb, var(--mantine-color-orange-2) 78%, #e8e5da);
--mantine-color-orange-outline: color-mix(in srgb, var(--mantine-color-orange-2) 80%, #dfdcd0);
--mantine-color-orange-outline-hover: color-mix(in srgb, var(--mantine-color-orange-4) 22%, #2a322d);
--mantine-color-orange-text: color-mix(in srgb, var(--mantine-color-orange-2) 80%, #e8e5da);
--mantine-color-gray-filled: color-mix(in srgb, var(--mantine-color-gray-3) 62%, #d9d5c7);
--mantine-color-gray-filled-hover: color-mix(in srgb, var(--mantine-color-gray-3) 76%, #d9d5c7);
--mantine-color-gray-light: color-mix(in srgb, var(--mantine-color-gray-4) 20%, #2a322d);
--mantine-color-gray-light-hover: color-mix(in srgb, var(--mantine-color-gray-4) 30%, #2a322d);
--mantine-color-gray-light-color: color-mix(in srgb, var(--mantine-color-gray-2) 78%, #e8e5da);
--mantine-color-gray-outline: color-mix(in srgb, var(--mantine-color-gray-2) 80%, #dfdcd0);
--mantine-color-gray-outline-hover: color-mix(in srgb, var(--mantine-color-gray-4) 22%, #2a322d);
--mantine-color-gray-text: color-mix(in srgb, var(--mantine-color-gray-2) 80%, #e8e5da);
}