+
-
+
+ {(value: ThemeFontFamily) =>
+ FONT_OPTIONS.find((font) => font.value === value)?.label
+ }
+
- Public Sans
- System
+ {FONT_OPTIONS.map((font) => (
+
+ {font.label}
+
+ ))}
diff --git a/src/theme/presets.ts b/src/theme/presets.ts
index b1898d8..9601782 100644
--- a/src/theme/presets.ts
+++ b/src/theme/presets.ts
@@ -4,7 +4,6 @@ export const DEFAULT_THEME_DESIGN: ThemeDesign = {
density: 1,
borderWidth: 1,
shadowStrength: 0,
- surfaceContrast: 0,
fontScale: 1,
headingWeight: 600,
motion: 1,
@@ -40,24 +39,50 @@ export const BUILT_IN_THEMES = defineThemes([
title: "Tensamin",
logo: TENSAMIN_LOGO,
defaultValues: {
- borderRadius: 0.625,
+ borderRadius: 0.5,
design: DEFAULT_THEME_DESIGN,
},
css: `:root[data-theme="tensamin"] {
+ --background: oklch(0.98 0 0);
--card: oklch(0.97 0 0);
--primary: oklch(0.54 0.105 186);
--primary-foreground: oklch(0.985 0.012 184);
--primary-foreground-alt: oklch(0.58 0.13 185);
--ring: oklch(0.62 0.12 185);
+ --sidebar: color-mix(in oklch, var(--background) 97%, black);
--sidebar-primary: oklch(0.58 0.12 185);
+ --markdown-code-background: color-mix(in oklch, var(--muted) 72%, var(--background));
+ --tensamin-outline-background: #fff;
+ --tensamin-outline-hover: #0000000a;
+ --tensamin-outline-pressed: #00000014;
+ --tensamin-outline-shadow: 0 1px 1.5px 0 #0000001a, 0 0 0 0.5px #00000024;
+ --tensamin-subtle-shadow: 0 1px 1.5px 0 #0000001a, 0 0 0 0.5px color-mix(in oklch, var(--primary) 30%, transparent);
+ --tensamin-destructive-shadow: 0 1px 1.5px 0 #0000001a, 0 0 0 0.5px color-mix(in oklch, var(--destructive) 30%, transparent);
}
:root.dark[data-theme="tensamin"] {
- --card: oklch(0.2 0 0);
- --primary: oklch(0.68 0.12 184);
+ --background: oklch(0.18 0 0);
+ --card: oklch(0.22 0 0);
+ --popover: oklch(0.22 0 0);
+ --secondary: oklch(0.28 0 0);
+ --muted: oklch(0.27 0 0);
+ --accent: oklch(0.28 0 0);
+ --border: oklch(1 0 0 / 15%);
+ --input: oklch(1 0 0 / 20%);
+ --sidebar: color-mix(in oklch, var(--background) 98%, white);
+ --sidebar-accent: oklch(0.27 0 0);
+ --sidebar-border: oklch(1 0 0 / 15%);
+ --primary: oklch(0.69 0.12 184);
--primary-foreground: oklch(0.16 0.025 190);
- --primary-foreground-alt: oklch(0.72 0.13 183);
+ --primary-foreground-alt: oklch(0.73 0.13 183);
+ --markdown-code-background: color-mix(in oklch, var(--card) 76%, black 24%);
+ --tensamin-outline-background: #ffffff0f;
+ --tensamin-outline-hover: #ffffff0f;
+ --tensamin-outline-pressed: #ffffff1a;
+ --tensamin-outline-shadow: 0 1px 2px 0 #0006, 0 0 0 0.5px #fff3, 0 -0.5px 0 0 #ffffff1a;
+ --tensamin-subtle-shadow: 0 1px 2px 0 #0006, 0 0 0 0.5px color-mix(in oklch, var(--primary) 30%, transparent), 0 -0.5px 0 0 #ffffff1a;
+ --tensamin-destructive-shadow: 0 1px 2px 0 #0006, 0 0 0 0.5px color-mix(in oklch, var(--destructive) 30%, transparent), 0 -0.5px 0 0 #ffffff1a;
}
-:root[data-theme="tensamin"] [data-slot] {
+:root[data-theme="tensamin"] :where([data-slot], .cm-editor.tm-md-editor .tm-md-code-line) {
--tensamin-edge: var(--border);
border-left-color: color-mix(in oklch, var(--tensamin-edge) 89%, black);
border-right-color: color-mix(in oklch, var(--tensamin-edge) 89%, black);
@@ -77,24 +102,21 @@ export const BUILT_IN_THEMES = defineThemes([
:root[data-theme="tensamin"] [data-slot="button"]:hover {
background-color: color-mix(in oklch, var(--background) 88%, var(--foreground));
}
+:root[data-theme="tensamin"] [data-slot="button"][data-variant="ghost"] {
+ background-color: transparent;
+ border-color: transparent;
+}
+:root[data-theme="tensamin"] [data-slot="button"][data-variant="ghost"]:hover {
+ background-color: color-mix(in oklch, var(--background) 88%, var(--foreground));
+}
:root[data-theme="tensamin"] [data-slot="button"][data-variant="default"] {
background-color: color-mix(in oklch, var(--primary) 93%, white);
}
:root[data-theme="tensamin"] [data-slot="button"][data-variant="default"]:hover {
background-color: color-mix(in oklch, var(--primary) 85%, var(--primary-foreground));
}
-:root[data-theme="tensamin"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="subtleDefault"] {
- --tensamin-edge: var(--primary-foreground-alt);
-}
:root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"] {
- background-color: color-mix(in oklch, var(--background) 88%, var(--primary-foreground-alt));
- border-top-color: color-mix(in oklch, color-mix(in oklch, var(--background) 88%, var(--primary-foreground-alt)) 98%, white);
- border-left-color: color-mix(in oklch, color-mix(in oklch, var(--background) 88%, var(--primary-foreground-alt)) 89%, black);
- border-right-color: color-mix(in oklch, color-mix(in oklch, var(--background) 88%, var(--primary-foreground-alt)) 89%, black);
- border-bottom-color: color-mix(in oklch, color-mix(in oklch, var(--background) 88%, var(--primary-foreground-alt)) 83%, black);
-}
-:root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"]:hover {
- background-color: color-mix(in oklch, var(--background) 80%, var(--primary-foreground-alt));
+ color: var(--primary-foreground-alt);
}
:root[data-theme="tensamin"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="secondary"] {
--tensamin-edge: var(--secondary);
@@ -105,26 +127,69 @@ export const BUILT_IN_THEMES = defineThemes([
:root[data-theme="tensamin"] [data-slot="button"][data-variant="secondary"]:hover {
background-color: color-mix(in oklch, var(--secondary) 86%, var(--secondary-foreground));
}
-:root[data-theme="tensamin"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="destructive"] {
- --tensamin-edge: var(--destructive);
+:root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"],
+:root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"]):not([data-slot="context-menu-item"])[data-variant="destructive"] {
+ background-clip: border-box;
+ border-color: transparent;
+ box-shadow: var(--tensamin-outline-shadow);
}
-:root[data-theme="tensamin"] [data-slot="button"][data-variant="destructive"] {
+:root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"] {
+ background-color: color-mix(in oklch, var(--primary) 10%, transparent);
+ box-shadow: var(--tensamin-subtle-shadow);
+}
+:root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"]):not([data-slot="context-menu-item"])[data-variant="destructive"] {
background-color: color-mix(in oklch, var(--background) 86%, var(--destructive));
+ box-shadow: var(--tensamin-destructive-shadow);
+ color: var(--destructive);
}
-:root[data-theme="tensamin"] [data-slot="button"][data-variant="destructive"]:hover {
+:root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"]:is(:hover, [aria-expanded="true"]) {
+ background-color: color-mix(in oklch, var(--primary) 10%, transparent);
+ background-image: linear-gradient(var(--tensamin-outline-hover), var(--tensamin-outline-hover));
+}
+:root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"])[data-variant="destructive"]:is(:hover, :focus, [aria-expanded="true"], [data-highlighted]) {
background-color: color-mix(in oklch, var(--background) 76%, var(--destructive));
}
-:root[data-theme="tensamin"] [data-slot][data-variant="destructive"] {
- border-top-color: color-mix(in oklch, color-mix(in oklch, var(--background) 86%, var(--destructive)) 98%, white);
- border-left-color: color-mix(in oklch, color-mix(in oklch, var(--background) 86%, var(--destructive)) 89%, black);
- border-right-color: color-mix(in oklch, color-mix(in oklch, var(--background) 86%, var(--destructive)) 89%, black);
- border-bottom-color: color-mix(in oklch, color-mix(in oklch, var(--background) 86%, var(--destructive)) 83%, black);
+:root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"]:active,
+:root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"])[data-variant="destructive"]:active {
+ background-image: linear-gradient(var(--tensamin-outline-pressed), var(--tensamin-outline-pressed));
}
-:root[data-theme="tensamin"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"] {
+:root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"]:focus-visible,
+:root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"])[data-variant="destructive"]:focus-visible {
+ outline: 2px solid var(--ring);
+ outline-offset: 2.5px;
+}
+:root[data-theme="tensamin"] [data-slot][data-variant="outline"] {
--tensamin-edge: var(--input);
+ border-color: transparent;
+ box-shadow: var(--tensamin-outline-shadow);
}
-:root[data-theme="tensamin"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="native-select"], [data-slot="input-group"], [data-slot="button"][data-variant="outline"], [data-slot="badge"][data-variant="outline"], [data-slot="toggle"][data-variant="outline"]):is(:hover, :focus-visible, :focus-within) {
- --tensamin-edge: color-mix(in oklch, var(--input) 75%, var(--ring));
+:root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"],
+:root[data-theme="tensamin"] [data-slot][data-variant="outline"]:not([data-slot="button"]):not([data-state="on"]):not([aria-pressed="true"]):not([data-active]),
+:root[data-theme="tensamin"] [data-slot]:where([data-slot="card"], [data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="native-select"], [data-slot="input-group"], [data-slot="checkbox"]:not([data-checked]), [data-slot="radio-group-item"]:not([data-checked]), [data-slot="input-otp-slot"]) {
+ background-color: var(--tensamin-outline-background);
+ border-color: transparent;
+ box-shadow: var(--tensamin-outline-shadow);
+}
+:root[data-theme="tensamin"] [data-slot="card"] {
+ background-color: var(--card);
+}
+:root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"] {
+ background-clip: border-box;
+}
+:root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"]:is(:hover, [aria-expanded="true"]),
+:root[data-theme="tensamin"] [data-slot][data-variant="outline"]:not([data-slot="button"]):not([data-state="on"]):not([aria-pressed="true"]):not([data-active]):is(:hover, [aria-expanded="true"]),
+:root[data-theme="tensamin"] [data-slot]:where([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="native-select"], [data-slot="input-group"], [data-slot="checkbox"]:not([data-checked]), [data-slot="radio-group-item"]:not([data-checked]), [data-slot="input-otp-slot"]):is(:hover, [aria-expanded="true"]) {
+ background-image: linear-gradient(var(--tensamin-outline-hover), var(--tensamin-outline-hover));
+}
+:root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"]:active,
+:root[data-theme="tensamin"] [data-slot][data-variant="outline"]:not([data-slot="button"]):not([data-state="on"]):not([aria-pressed="true"]):not([data-active]):active,
+:root[data-theme="tensamin"] [data-slot]:where([data-slot="select-trigger"], [data-slot="native-select"], [data-slot="checkbox"]:not([data-checked]), [data-slot="radio-group-item"]:not([data-checked])):active {
+ background-image: linear-gradient(var(--tensamin-outline-pressed), var(--tensamin-outline-pressed));
+}
+:root[data-theme="tensamin"] [data-slot][data-variant="outline"]:is(:focus-visible, :focus-within),
+:root[data-theme="tensamin"] [data-slot]:where([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="native-select"], [data-slot="input-group"], [data-slot="checkbox"]:not([data-checked]), [data-slot="radio-group-item"]:not([data-checked]), [data-slot="input-otp-slot"]):is(:focus-visible, :focus-within) {
+ outline: 2px solid var(--ring);
+ outline-offset: 2.5px;
}
:root[data-theme="tensamin"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"]):where([data-variant="ghost"], [data-variant="link"]) {
--tensamin-edge: color-mix(in oklch, currentColor 12%, var(--border));
@@ -135,6 +200,12 @@ export const BUILT_IN_THEMES = defineThemes([
}
:root[data-theme="tensamin"] [data-slot][aria-invalid="true"] {
--tensamin-edge: var(--destructive);
+}
+:root[data-theme="tensamin"] [data-slot="tabs-trigger"] {
+ border-color: transparent;
+}
+:root[data-theme="tensamin"] [role="tablist"].grid.grid-cols-2.bg-card.rounded-4xl > [role="tab"][aria-selected="false"] {
+ color: color-mix(in srgb, var(--muted-foreground) 75%, black);
}`,
},
{
@@ -146,38 +217,39 @@ export const BUILT_IN_THEMES = defineThemes([
design: DEFAULT_THEME_DESIGN,
},
css: `:root[data-theme="og-tensamin"] {
- --background: #f2f1f3;
+ --background: #f1f2fb;
--foreground: #17181e;
- --card: #d8d6db;
+ --card: var(--background);
--card-foreground: #17181e;
- --popover: #f2f1f3;
+ --popover: #f8f8fd;
--popover-foreground: #17181e;
--primary: #aca1cf;
--primary-foreground: #0f1014;
- --primary-foreground-alt: #aca1cf;
- --secondary: #d8d6db;
+ --primary-foreground-alt: #71649d;
+ --secondary: #e1e2f0;
--secondary-foreground: #17181e;
- --muted: #d8d6db;
- --muted-foreground: #383b46;
- --accent: #bebbc3;
+ --muted: #e7e8f3;
+ --muted-foreground: #626575;
+ --accent: #d8daed;
--accent-foreground: #0f1014;
- --destructive: #e78284;
- --border: #a4a0ab;
- --input: #a4a0ab;
- --ring: #aca1cf;
- --sidebar: #d8d6db;
+ --destructive: #c94f57;
+ --border: #cfd1e0;
+ --input: #c1c4d5;
+ --ring: #8274b2;
+ --sidebar: #e7e8f5;
--sidebar-foreground: #17181e;
--sidebar-primary: #aca1cf;
--sidebar-primary-foreground: #0f1014;
- --sidebar-accent: #bebbc3;
+ --sidebar-accent: #d8daed;
--sidebar-accent-foreground: #0f1014;
- --sidebar-border: #a4a0ab;
- --sidebar-ring: #aca1cf;
+ --sidebar-border: #cfd1e0;
+ --sidebar-ring: #8274b2;
--chart-1: #90b99f;
--chart-2: #babbf1;
--chart-3: #aca1cf;
--chart-4: #e29eca;
--chart-5: #e5c890;
+ --markdown-code-background: color-mix(in srgb, var(--muted) 78%, var(--background));
}
:root.dark[data-theme="og-tensamin"] {
--background: #0f1014;
@@ -212,6 +284,7 @@ export const BUILT_IN_THEMES = defineThemes([
--chart-3: #aca1cf;
--chart-4: #e29eca;
--chart-5: #e5c890;
+ --markdown-code-background: color-mix(in srgb, var(--muted) 72%, black 28%);
}
:root[data-theme="og-tensamin"] :where([data-slot="select-content"], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="context-menu-content"], [data-slot="context-menu-sub-content"], [data-slot="menubar-content"], [data-slot="menubar-sub-content"], [data-slot="combobox-content"], [data-slot="popover-content"], [data-slot="hover-card-content"]) {
background-color: var(--popover);
@@ -238,41 +311,42 @@ export const BUILT_IN_THEMES = defineThemes([
},
},
css: `:root[data-theme="methanium"] {
- --background: #d2e0f0;
+ --background: #edf1f4;
--foreground: #10161d;
- --card: #c0cfe0;
+ --card: var(--background);
--card-foreground: #10161d;
- --popover: #d2e0f0;
+ --popover: #f5f7f8;
--popover-foreground: #10161d;
--primary: #8c47ad;
--primary-foreground: #ffffff;
--primary-foreground-alt: #7b3d98;
- --secondary: #aebed0;
+ --secondary: #dbe2e8;
--secondary-foreground: #171e26;
- --muted: #c0cfe0;
+ --muted: #e2e7eb;
--muted-foreground: #515f70;
--accent: #cf8fe633;
- --accent-foreground: #5a2a6d;
+ --accent-foreground: #642f79;
--destructive: #b91c1c;
- --border: #8c9caf;
- --input: #9dadc0;
+ --border: #b7c2cc;
+ --input: #b7c2cc;
--ring: #9d53bc;
--chart-1: #8c47ad;
--chart-2: #2563eb;
--chart-3: #15803d;
--chart-4: #ca8a04;
--chart-5: #db2777;
- --sidebar: #aebed0;
+ --sidebar: #e0e6eb;
--sidebar-foreground: #10161d;
--sidebar-primary: #8c47ad;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #cf8fe633;
- --sidebar-accent-foreground: #5a2a6d;
- --sidebar-border: #8c9caf;
+ --sidebar-accent-foreground: #642f79;
+ --sidebar-border: #b7c2cc;
--sidebar-ring: #9d53bc;
+ --markdown-code-background: color-mix(in srgb, var(--input) 55%, var(--background));
}
:root.dark[data-theme="methanium"] {
- --background: #10161d;
+ --background: #171E26;
--foreground: #d2e0f0;
--card: #242d38;
--card-foreground: #d2e0f0;
@@ -281,14 +355,14 @@ export const BUILT_IN_THEMES = defineThemes([
--primary: #cf8fe6;
--primary-foreground: #000000;
--primary-foreground-alt: #bb6fd6;
- --secondary: #374351;
+ --secondary: #2b3642;
--secondary-foreground: #d2e0f0;
--muted: #1d262f;
--muted-foreground: #9dadc0;
--accent: #cf8fe633;
--accent-foreground: #faecfc;
--destructive: #cc4848;
- --border: #374351;
+ --border: #242D38;
--input: #445161;
--ring: #cf8fe6;
--chart-1: #cf8fe6;
@@ -302,12 +376,28 @@ export const BUILT_IN_THEMES = defineThemes([
--sidebar-primary-foreground: #000000;
--sidebar-accent: #2b3642;
--sidebar-accent-foreground: #d2e0f0;
- --sidebar-border: #374351;
+ --sidebar-border: #242D38;
--sidebar-ring: #cf8fe6;
+ --markdown-code-background: color-mix(in srgb, var(--input) 55%, var(--background));
}
:root[data-theme="methanium"] body {
background-color: var(--background);
}
+:root[data-theme="methanium"] *:not(.loading-line-wobble),
+:root[data-theme="methanium"] *::before,
+:root[data-theme="methanium"] *::after {
+ transition: none !important;
+ animation: none !important;
+ scroll-behavior: auto !important;
+}
+/* Match the compact two-option switch to Methanium's sharper controls. */
+:root[data-theme="methanium"] [role="tablist"].grid.grid-cols-2.bg-card.rounded-4xl,
+:root[data-theme="methanium"] [role="tablist"].grid.grid-cols-2.bg-card.rounded-4xl > .rounded-4xl {
+ border-radius: var(--radius) !important;
+}
+:root[data-theme="methanium"] [role="tablist"].grid.grid-cols-2.bg-card.rounded-4xl > [role="tab"][aria-selected="false"] {
+ color: color-mix(in srgb, var(--muted-foreground) 75%, black);
+}
:root[data-theme="methanium"] :where([data-slot="card"], [data-slot="button"], [data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="dialog-content"], [data-slot="alert-dialog-content"], [data-slot="popover-content"]) {
border-radius: var(--radius);
border-style: solid;
@@ -317,6 +407,9 @@ export const BUILT_IN_THEMES = defineThemes([
font-weight: 500;
transition-duration: 100ms;
}
+:root[data-theme="methanium"] [data-slot="button"]:active {
+ translate: none;
+}
:root[data-theme="methanium"] [data-slot="button"][data-size="xs"] {
height: calc(2rem * var(--ui-density));
}
@@ -348,22 +441,17 @@ export const BUILT_IN_THEMES = defineThemes([
}
:root[data-theme="methanium"] [data-slot="card"] {
padding-block: calc(1rem * var(--ui-density));
-}
-:root[data-theme="methanium"] [data-slot="button"]:where([data-variant="default"], [data-variant="outline"]) {
- background-color: var(--primary);
- color: var(--primary-foreground);
+ border: 1px solid var(--input);
+ background-color: color-mix(in srgb, var(--input) 55%, var(--background));
}
:root[data-theme="methanium"] [data-slot="button"][data-variant="default"] {
- border-color: transparent;
+ background-color: var(--primary);
+ color: var(--primary-foreground);
+ border: 1px solid var(--primary);
}
-:root[data-theme="methanium"] [data-slot="button"][data-variant="outline"] {
- border-color: var(--input);
-}
-:root[data-theme="methanium"] [data-slot="button"]:where([data-variant="default"], [data-variant="outline"]):hover {
- background-color: #bb6fd6;
-}
-:root[data-theme="methanium"] [data-slot="button"][data-variant="outline"]:is(:hover, :focus-visible) {
- border-color: color-mix(in srgb, var(--input) 75%, var(--foreground) 25%);
+:root[data-theme="methanium"] [data-slot="button"][data-variant="default"]:hover {
+ background-color: var(--primary-foreground-alt);
+ border: 1px solid var(--primary);
}
:root[data-theme="methanium"] [data-slot="button"][data-variant="secondary"] {
background-color: var(--secondary);
@@ -371,16 +459,47 @@ export const BUILT_IN_THEMES = defineThemes([
color: var(--secondary-foreground);
}
:root[data-theme="methanium"] [data-slot="button"][data-variant="secondary"]:hover {
- background-color: color-mix(in srgb, var(--secondary) 80%, var(--foreground) 20%);
+ background-color: var(--secondary);
+ border-color: color-mix(in srgb, var(--ring) 60%, transparent);
}
-:root[data-theme="methanium"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]) {
+:root[data-theme="methanium"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="button"][data-variant="outline"]) {
background-color: color-mix(in srgb, var(--input) 55%, var(--background));
border-color: var(--input);
+ color: var(--foreground);
transition: background-color 100ms ease, border-color 100ms ease;
}
-:root[data-theme="methanium"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]):not(:disabled):not([data-disabled]):not(:has(:disabled)):hover {
- background-color: color-mix(in srgb, var(--input) 72%, var(--background));
+:root[data-theme="methanium"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="button"][data-variant="outline"]):not(:disabled):not([data-disabled]):not(:has(:disabled)):hover {
+ background-color: color-mix(in srgb, var(--input) 55%, var(--background));
border-color: color-mix(in srgb, var(--input) 75%, var(--foreground) 25%);
+}
+:root[data-theme="methanium"] [data-slot="input"]:not(:disabled):focus,
+:root[data-theme="methanium"] [data-slot="input"]:not(:disabled):focus:hover {
+ border-color: var(--primary);
+}
+:root[data-theme="methanium"] [data-slot="button"][data-variant="subtleDefault"]:hover {
+ background-color: color-mix(in srgb, var(--primary-foreground-alt) 10%, transparent);
+ border-color: color-mix(in srgb, var(--ring) 60%, transparent);
+}
+:root.dark[data-theme="methanium"] [data-slot="button"][data-variant="subtleDefault"]:hover {
+ background-color: color-mix(in srgb, var(--primary-foreground-alt) 20%, transparent);
+}
+:root[data-theme="methanium"] [data-slot][data-variant="destructive"] {
+ border: 1px solid var(--destructive);
+}
+:root[data-theme="methanium"] [data-slot="button"][data-variant="destructive"]:hover {
+ background-color: color-mix(in srgb, var(--destructive) 10%, transparent);
+ border: 1px solid var(--destructive);
+ color: color-mix(in srgb, var(--destructive) 90%, white);
+}
+:root.dark[data-theme="methanium"] [data-slot="button"][data-variant="destructive"]:hover {
+ background-color: color-mix(in srgb, var(--destructive) 20%, transparent);
+}
+:root[data-theme="methanium"] [data-slot="button"][data-variant="ghost"]:hover {
+ background-color: var(--secondary);
+}
+:root[data-theme="methanium"] [data-slot="button"][data-variant="link"]:hover {
+ background-color: transparent;
+ border-color: color-mix(in srgb, var(--ring) 60%, transparent);
}`,
},
{
@@ -392,149 +511,465 @@ export const BUILT_IN_THEMES = defineThemes([
design: DEFAULT_THEME_DESIGN,
},
css: `:root[data-theme="secret"] {
- --background: #2f1b13;
- --foreground: #fffaf2;
- --card: #f9b637;
- --card-foreground: #24120c;
- --popover: #5e244e;
- --popover-foreground: #fffaf2;
- --primary: #f9b637;
+ --secret-border: color-mix(in srgb, #2f1b13 22%, #fffaf2 78%);
+
+ --secret-purple: #d7a8c9;
+ --secret-control: var(--secret-purple);
+
+ --secret-gold: color-mix(in srgb, #f9b637 75%, #2f1b13 25%);
+ --secret-gold-dark: color-mix(in srgb, var(--secret-gold) 60%, #2f1b13 40%);
+ --secret-gold-light: color-mix(in srgb, var(--secret-gold) 45%, #ffe8b4 55%);
+
+ --background: oklch(0.98 0 0);
+ --foreground: #2f1b13;
+
+ --card: var(--background);
+ --card-foreground: var(--foreground);
+
+ --popover: var(--secret-purple);
+ --popover-foreground: #2f1b13;
+
+ --primary: var(--secret-gold);
--primary-foreground: #24120c;
- --primary-foreground-alt: #fb6c00;
- --secondary: #5e244e;
- --secondary-foreground: #fffaf2;
- --muted: #24120c;
- --muted-foreground: #ffe8b4;
+ --primary-foreground-alt: #c04b00;
+
+ --secondary: var(--secret-purple);
+ --secondary-foreground: #2f1b13;
+
+ --muted: #c89ab9;
+ --muted-foreground: #49333f;
+
--accent: #fb6c00;
--accent-foreground: #24120c;
- --destructive: #e73f1e;
- --border: #f9b637;
- --input: #5e244e;
- --ring: #fb6c00;
- --sidebar: #24120c;
- --sidebar-foreground: #fffaf2;
- --sidebar-primary: #f9b637;
+
+ --destructive: #d93618;
+ --destructive-foreground: #fffaf2;
+
+ --border: var(--secret-border);
+ --input: var(--secret-border);
+ --ring: #4a2110;
+
+ --sidebar: color-mix(in oklch, var(--background) 97%, black);
+ --sidebar-foreground: #2f1b13;
+ --sidebar-primary: var(--secret-gold);
--sidebar-primary-foreground: #24120c;
- --sidebar-accent: #aa1c41;
- --sidebar-accent-foreground: #fffaf2;
- --sidebar-border: #e68457;
+ --sidebar-accent: #d7a8c9;
+ --sidebar-accent-foreground: #2f1b13;
+ --sidebar-border: var(--secret-border);
+
+ --markdown-code-background: color-mix(
+ in srgb,
+ var(--secret-gold) 9%,
+ var(--background)
+ );
}
+
:root.dark[data-theme="secret"] {
- --background: #24120c;
+ --secret-border: color-mix(in srgb, #ffe8b4 8%, #24120c 35%);
+
+ --secret-purple: #5e244e;
+ --secret-control: var(--secret-purple);
+
+ --background: #0a0a0a;
--foreground: #ffe8b4;
- --card: #f9b637;
- --card-foreground: #24120c;
+
+ --card: var(--background);
+ --card-foreground: var(--foreground);
+
--popover: #2f1b13;
--popover-foreground: #ffe8b4;
- --primary: #f9b637;
+
+ --primary: var(--secret-gold);
--primary-foreground: #24120c;
--primary-foreground-alt: #fb6c00;
- --secondary: #5e244e;
+
+ --secondary: var(--secret-purple);
--secondary-foreground: #fffaf2;
+
--muted: #2f1b13;
--muted-foreground: #e68457;
- --accent: #e73f1e;
+
+ --accent: #d93618;
--accent-foreground: #fffaf2;
- --destructive: #e73f1e;
- --border: #e68457;
- --input: #5e244e;
- --ring: #fb6c00;
- --sidebar: #24120c;
+
+ --destructive: #d93618;
+ --destructive-foreground: #fffaf2;
+
+ --border: var(--secret-border);
+ --input: var(--secret-border);
+ --ring: #f9b637;
+
+ --sidebar: #0f0f0f;
--sidebar-foreground: #ffe8b4;
- --sidebar-primary: #f9b637;
+ --sidebar-primary: var(--secret-gold);
--sidebar-primary-foreground: #24120c;
--sidebar-accent: #aa1c41;
--sidebar-accent-foreground: #fffaf2;
- --sidebar-border: #5e244e;
+ --sidebar-border: var(--secret-border);
+
+ --markdown-code-background: color-mix(
+ in srgb,
+ var(--muted) 72%,
+ black 28%
+ );
}
-:root[data-theme="secret"] body {
- background-color: var(--background);
- background-image: radial-gradient(circle at 12% 8%, rgb(94 36 78 / 24%), transparent 34%), radial-gradient(circle at 90% 5%, rgb(231 63 30 / 14%), transparent 30%);
- background-attachment: fixed;
-}
-:root.dark[data-theme="secret"] body {
- background-image: radial-gradient(circle at 12% 8%, rgb(94 36 78 / 42%), transparent 38%), radial-gradient(circle at 92% 4%, rgb(170 28 65 / 30%), transparent 34%);
-}
-:root[data-theme="secret"] :where([data-slot="button"], [data-slot="toggle"], [data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="checkbox"], [data-slot="radio-group-item"], [data-slot="switch"]) {
- background-image: linear-gradient(to top, rgb(255 255 255 / 12%), rgb(255 255 255 / 2%));
+
+:root[data-theme="secret"] :where(
+ [data-slot="button"],
+ [data-slot="toggle"],
+ [data-slot="input"],
+ [data-slot="textarea"],
+ [data-slot="native-select"],
+ [data-slot="select-trigger"],
+ [data-slot="input-group"],
+ [data-slot="checkbox"],
+ [data-slot="radio-group-item"],
+ [data-slot="switch"]
+) {
+ background-image: linear-gradient(
+ to top,
+ rgb(255 255 255 / 12%),
+ rgb(255 255 255 / 2%)
+ );
background-repeat: no-repeat;
}
-:root[data-theme="secret"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]) {
- background-color: var(--input);
+
+:root[data-theme="secret"] [data-slot="button"][data-variant="ghost"] {
+ background-image: none;
+}
+
+:root[data-theme="secret"] [data-slot="button"][data-variant="ghost"]:hover {
+ background-image: linear-gradient(
+ to top,
+ rgb(255 255 255 / 12%),
+ rgb(255 255 255 / 2%)
+ );
+}
+
+:root[data-theme="secret"] [data-slot="button"][data-variant="subtleDefault"] {
+ background-image: linear-gradient(
+ to top,
+ rgb(255 232 180 / 12%),
+ rgb(255 232 180 / 2%)
+ );
color: var(--foreground);
}
-:root[data-theme="secret"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]):hover {
- background-color: color-mix(in srgb, var(--input) 84%, #24120c 16%);
- border-color: var(--input);
+
+:root:not(.dark)[data-theme="secret"]
+ [data-slot="button"][data-variant="subtleDefault"] {
+ background-color: color-mix(
+ in srgb,
+ var(--primary-foreground-alt) 6%,
+ transparent
+ );
+ background-image: linear-gradient(
+ to top,
+ rgb(255 232 180 / 30%),
+ rgb(255 232 180 / 80%)
+ );
}
-:root[data-theme="secret"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]):is(:focus-visible, :focus-within) {
- background-color: color-mix(in srgb, var(--input) 84%, #24120c 16%);
- border-color: var(--input);
+
+:root[data-theme="secret"] :where(
+ [data-slot="input"],
+ [data-slot="textarea"],
+ [data-slot="native-select"],
+ [data-slot="select-trigger"],
+ [data-slot="input-group"]
+) {
+ background-color: var(--secret-control);
+ border-color: transparent;
}
-:root[data-theme="secret"] [data-slot="select-trigger"]:is([data-popup-open], [data-open], [aria-expanded="true"]) {
- background-color: color-mix(in srgb, var(--input) 84%, #24120c 16%);
- border-color: var(--input);
+
+:root:not(.dark)[data-theme="secret"] :where(
+ [data-slot="input"],
+ [data-slot="textarea"],
+ [data-slot="native-select"],
+ [data-slot="select-trigger"],
+ [data-slot="input-group"]
+) {
+ color: #2f1b13;
}
+
+:root.dark[data-theme="secret"] :where(
+ [data-slot="input"],
+ [data-slot="textarea"],
+ [data-slot="native-select"],
+ [data-slot="select-trigger"],
+ [data-slot="input-group"]
+) {
+ color: #ffe8b4;
+}
+
+:root:not(.dark)[data-theme="secret"] :where(
+ [data-slot="input"],
+ [data-slot="textarea"]
+)::placeholder {
+ color: #5f4558;
+ opacity: 1;
+}
+
+:root.dark[data-theme="secret"] :where(
+ [data-slot="input"],
+ [data-slot="textarea"]
+)::placeholder {
+ color: #d9b99c;
+ opacity: 1;
+}
+
+:root:not(.dark)[data-theme="secret"] :where(
+ [data-slot="input"],
+ [data-slot="textarea"],
+ [data-slot="native-select"],
+ [data-slot="select-trigger"],
+ [data-slot="input-group"]
+):hover {
+ background-color: color-mix(
+ in srgb,
+ var(--secret-control) 88%,
+ #622a53 12%
+ );
+ border-color: transparent;
+}
+
+:root.dark[data-theme="secret"] :where(
+ [data-slot="input"],
+ [data-slot="textarea"],
+ [data-slot="native-select"],
+ [data-slot="select-trigger"],
+ [data-slot="input-group"]
+):hover {
+ background-color: color-mix(
+ in srgb,
+ var(--secret-control) 84%,
+ #24120c 16%
+ );
+ border-color: transparent;
+}
+
+:root:not(.dark)[data-theme="secret"] :where(
+ [data-slot="input"],
+ [data-slot="textarea"],
+ [data-slot="native-select"],
+ [data-slot="select-trigger"],
+ [data-slot="input-group"]
+):is(:focus-visible, :focus-within) {
+ background-color: color-mix(
+ in srgb,
+ var(--secret-control) 88%,
+ #622a53 12%
+ );
+ border-color: transparent;
+}
+
+:root.dark[data-theme="secret"] :where(
+ [data-slot="input"],
+ [data-slot="textarea"],
+ [data-slot="native-select"],
+ [data-slot="select-trigger"],
+ [data-slot="input-group"]
+):is(:focus-visible, :focus-within) {
+ background-color: color-mix(
+ in srgb,
+ var(--secret-control) 84%,
+ #24120c 16%
+ );
+ border-color: transparent;
+}
+
+:root:not(.dark)[data-theme="secret"]
+ [data-slot="select-trigger"]:is(
+ [data-popup-open],
+ [data-open],
+ [aria-expanded="true"]
+ ) {
+ background-color: color-mix(
+ in srgb,
+ var(--secret-control) 88%,
+ #622a53 12%
+ );
+ border-color: transparent;
+}
+
+:root.dark[data-theme="secret"]
+ [data-slot="select-trigger"]:is(
+ [data-popup-open],
+ [data-open],
+ [aria-expanded="true"]
+ ) {
+ background-color: color-mix(
+ in srgb,
+ var(--secret-control) 84%,
+ #24120c 16%
+ );
+ border-color: transparent;
+}
+
:root[data-theme="secret"] [data-slot="select-content"] {
background-color: var(--popover);
- border-color: color-mix(in srgb, #ffe8b4 15%, #24120c 85%);
+ border-color: var(--secret-border);
color: var(--popover-foreground);
}
-:root.dark[data-theme="secret"] [data-slot="select-content"] {
- border-color: color-mix(in srgb, #ffe8b4 15%, #24120c 85%);
+
+:root:not(.dark)[data-theme="secret"] :where(
+ [data-slot="select-item"],
+ [data-slot="context-menu-item"],
+ [data-slot="context-menu-sub-trigger"]
+):is(
+ :hover,
+ :focus,
+ [data-highlighted],
+ [data-selected],
+ [data-open]
+) {
+ background-color: color-mix(
+ in srgb,
+ var(--popover) 82%,
+ #622a53 18%
+ );
+ color: #2f1b13;
}
-:root[data-theme="secret"] [data-slot="select-item"]:is(:hover, :focus, [data-highlighted], [data-selected]) {
- background-color: #24120c;
+
+:root.dark[data-theme="secret"] :where(
+ [data-slot="select-item"],
+ [data-slot="context-menu-item"],
+ [data-slot="context-menu-sub-trigger"]
+):is(
+ :hover,
+ :focus,
+ [data-highlighted],
+ [data-selected],
+ [data-open]
+) {
+ background-color: color-mix(
+ in srgb,
+ var(--popover) 72%,
+ #0a0a0a 28%
+ );
color: #ffe8b4;
}
+
:root[data-theme="secret"] [data-slot="button"][data-variant="default"] {
background-color: var(--primary);
- background-image: linear-gradient(to top, rgb(255 255 255 / 12%), rgb(255 255 255 / 2%)), linear-gradient(115deg, #e73f1e 0%, #fb6c00 30%, #ffdd9c 47%, #f9b637 58%, #fb6c00 100%);
- border-color: #e68457;
+ background-image:
+ linear-gradient(
+ to top,
+ rgb(255 255 255 / 12%),
+ rgb(255 255 255 / 2%)
+ ),
+ linear-gradient(
+ 115deg,
+ var(--secret-gold-dark) 0%,
+ var(--secret-gold) 30%,
+ var(--secret-gold-light) 47%,
+ var(--secret-gold) 62%,
+ var(--secret-gold-dark) 100%
+ );
+ border-color: var(--secret-border);
color: var(--primary-foreground);
text-shadow: 0 1px rgb(255 255 255 / 35%);
- box-shadow: inset 0 1px rgb(255 255 255 / 45%), 0 0.45rem 1.2rem rgb(36 18 12 / 28%);
+ box-shadow:
+ inset 0 1px rgb(255 255 255 / 45%),
+ 0 0.45rem 1.2rem rgb(36 18 12 / 28%);
}
-:root[data-theme="secret"] :where([data-slot="card"], [data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
- border-color: color-mix(in oklch, var(--border) 72%, var(--primary));
- box-shadow: inset 0 1px color-mix(in oklch, white 8%, transparent), 0 1rem 3rem rgb(97 37 82 / 12%);
+
+:root[data-theme="secret"] :where(
+ [data-slot="card"],
+ [data-slot="dialog-content"],
+ [data-slot="alert-dialog-content"]
+) {
+ border-color: var(--secret-border);
+ box-shadow:
+ inset 0 1px color-mix(in oklch, white 8%, transparent),
+ 0 1rem 3rem rgb(97 37 82 / 12%);
}
+
:root[data-theme="secret"] [data-slot="card"] {
- background: linear-gradient(115deg, #e68457 0%, #f9b637 30%, #fffaf2 47%, #ffdd9c 58%, #fb6c00 100%);
+ background: var(--card);
}
-:root.dark[data-theme="secret"] [data-slot="card"] {
- background: linear-gradient(115deg, #5e244e 0%, #aa1c41 18%, #e68457 32%, #f9b637 44%, #fffaf2 50%, #ffdd9c 58%, #fb6c00 72%, #5e244e 100%);
+
+:root[data-theme="secret"] :where(
+ [data-slot="button"][data-variant="outline"],
+ [data-slot="button"][data-variant="link"],
+ [data-slot="badge"][data-variant="outline"],
+ [data-slot="toggle"][data-variant="outline"]
+) {
+ background-color: var(--secondary);
+ border-color: transparent;
+ color: var(--secondary-foreground);
}
-:root[data-theme="secret"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"] {
- background-color: #5e244e;
- border-color: var(--input);
- color: #fffaf2;
+
+:root[data-theme="secret"] [data-slot="button"][data-variant="link"] {
+ background-image: none;
}
-:root[data-theme="secret"] [data-slot="button"][data-variant="outline"]:hover {
- background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
- border-color: var(--input);
+
+:root[data-theme="secret"] [data-slot="button"][data-variant="link"]:hover {
+ background-color: var(--secondary);
+ background-image: none;
}
-:root[data-theme="secret"] :where([data-slot="badge"], [data-slot="toggle"])[data-variant="outline"]:hover {
- background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
- border-color: var(--input);
+
+:root:not(.dark)[data-theme="secret"] :where(
+ [data-slot="button"],
+ [data-slot="badge"],
+ [data-slot="toggle"]
+)[data-variant="outline"]:is(
+ :hover,
+ :focus-visible,
+ [aria-expanded="true"],
+ [data-popup-open],
+ [data-open]
+) {
+ background-color: color-mix(
+ in srgb,
+ var(--secondary) 82%,
+ #622a53 18%
+ );
+ border-color: transparent;
+ color: var(--secondary-foreground);
}
-:root[data-theme="secret"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"]:is(:focus-visible, [aria-expanded="true"], [data-popup-open], [data-open]) {
- background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
- border-color: var(--input);
+
+:root.dark[data-theme="secret"] :where(
+ [data-slot="button"],
+ [data-slot="badge"],
+ [data-slot="toggle"]
+)[data-variant="outline"]:is(
+ :hover,
+ :focus-visible,
+ [aria-expanded="true"],
+ [data-popup-open],
+ [data-open]
+) {
+ background-color: color-mix(
+ in srgb,
+ var(--secondary) 82%,
+ #24120c 18%
+ );
+ border-color: transparent;
+ color: var(--secondary-foreground);
}
-:root.dark[data-theme="secret"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"] {
- background-color: #5e244e;
- border-color: var(--input);
- color: #ffe8b4;
-}
-:root.dark[data-theme="secret"] [data-slot="button"][data-variant="outline"]:hover {
- background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
-}
-:root[data-theme="secret"] :where([data-slot="card-title"], [data-slot="item-media"][data-variant="icon"], [data-slot="badge"][data-variant="outline"]) svg {
+
+:root[data-theme="secret"] :where(
+ [data-slot="card-title"],
+ [data-slot="item-media"][data-variant="icon"],
+ [data-slot="badge"][data-variant="outline"]
+) svg {
color: var(--primary);
}
+
+:root:not(.dark)[data-theme="secret"] :where(
+ [data-slot="card-title"],
+ [data-slot="item-media"][data-variant="icon"],
+ [data-slot="badge"][data-variant="outline"]
+) svg {
+ color: var(--secret-gold-dark);
+}
+
:root[data-theme="secret"] [data-slot="separator"] {
- background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--primary) 42%, var(--border)), transparent);
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ color-mix(in oklch, var(--primary) 42%, var(--border)),
+ transparent
+ );
}`,
},
] as const);
diff --git a/src/theme/types.ts b/src/theme/types.ts
index 1f904a7..1c488b9 100644
--- a/src/theme/types.ts
+++ b/src/theme/types.ts
@@ -23,13 +23,17 @@ export type Base16Key =
export type Base16Palette = Record
;
-export type ThemeFontFamily = "public-sans" | "system";
+export type ThemeFontFamily =
+ | "public-sans"
+ | "inter"
+ | "source-serif-4"
+ | "jetbrains-mono"
+ | "system";
export type ThemeDesign = {
density: number;
borderWidth: number;
shadowStrength: number;
- surfaceContrast: number;
fontScale: number;
headingWeight: number;
motion: number;
@@ -70,6 +74,7 @@ export type ThemeProviderProps = {
customCssStorageKey?: string | null;
parentThemeStorageKey?: string | null;
designStorageKey?: string | null;
+ notCustomizedStorageKey?: string | null;
disableTransitionOnChange?: boolean;
};
@@ -98,6 +103,7 @@ export type ThemeProviderState = {
applyThemePreset: (id: string) => void;
resetThemePreset: () => void;
isThemeCustomized: boolean;
+ notCustomized: boolean;
themeDesign: ThemeDesign;
setThemeDesign: (
design: ThemeDesign | ((current: ThemeDesign) => ThemeDesign),