+
-
- {(value: ThemeFontFamily) =>
- FONT_OPTIONS.find((font) => font.value === value)?.label
- }
-
+
- {FONT_OPTIONS.map((font) => (
-
- {font.label}
-
- ))}
+ Public Sans
+ System
diff --git a/src/theme/presets.ts b/src/theme/presets.ts
index 9601782..b1898d8 100644
--- a/src/theme/presets.ts
+++ b/src/theme/presets.ts
@@ -4,6 +4,7 @@ export const DEFAULT_THEME_DESIGN: ThemeDesign = {
density: 1,
borderWidth: 1,
shadowStrength: 0,
+ surfaceContrast: 0,
fontScale: 1,
headingWeight: 600,
motion: 1,
@@ -39,50 +40,24 @@ export const BUILT_IN_THEMES = defineThemes([
title: "Tensamin",
logo: TENSAMIN_LOGO,
defaultValues: {
- borderRadius: 0.5,
+ borderRadius: 0.625,
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"] {
- --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);
+ --card: oklch(0.2 0 0);
+ --primary: oklch(0.68 0.12 184);
--primary-foreground: oklch(0.16 0.025 190);
- --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;
+ --primary-foreground-alt: oklch(0.72 0.13 183);
}
-:root[data-theme="tensamin"] :where([data-slot], .cm-editor.tm-md-editor .tm-md-code-line) {
+:root[data-theme="tensamin"] [data-slot] {
--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);
@@ -102,21 +77,24 @@ 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"] {
- color: var(--primary-foreground-alt);
+ 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));
}
:root[data-theme="tensamin"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="secondary"] {
--tensamin-edge: var(--secondary);
@@ -127,69 +105,26 @@ 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"] [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"] :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"] {
- 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"] {
+:root[data-theme="tensamin"] [data-slot="button"][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="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]) {
+:root[data-theme="tensamin"] [data-slot="button"][data-variant="destructive"]:hover {
background-color: color-mix(in oklch, var(--background) 76%, var(--destructive));
}
-: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"] [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"]: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"] {
+:root[data-theme="tensamin"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"] {
--tensamin-edge: var(--input);
- border-color: transparent;
- box-shadow: var(--tensamin-outline-shadow);
}
-: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="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"] :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));
@@ -200,12 +135,6 @@ 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);
}`,
},
{
@@ -217,39 +146,38 @@ export const BUILT_IN_THEMES = defineThemes([
design: DEFAULT_THEME_DESIGN,
},
css: `:root[data-theme="og-tensamin"] {
- --background: #f1f2fb;
+ --background: #f2f1f3;
--foreground: #17181e;
- --card: var(--background);
+ --card: #d8d6db;
--card-foreground: #17181e;
- --popover: #f8f8fd;
+ --popover: #f2f1f3;
--popover-foreground: #17181e;
--primary: #aca1cf;
--primary-foreground: #0f1014;
- --primary-foreground-alt: #71649d;
- --secondary: #e1e2f0;
+ --primary-foreground-alt: #aca1cf;
+ --secondary: #d8d6db;
--secondary-foreground: #17181e;
- --muted: #e7e8f3;
- --muted-foreground: #626575;
- --accent: #d8daed;
+ --muted: #d8d6db;
+ --muted-foreground: #383b46;
+ --accent: #bebbc3;
--accent-foreground: #0f1014;
- --destructive: #c94f57;
- --border: #cfd1e0;
- --input: #c1c4d5;
- --ring: #8274b2;
- --sidebar: #e7e8f5;
+ --destructive: #e78284;
+ --border: #a4a0ab;
+ --input: #a4a0ab;
+ --ring: #aca1cf;
+ --sidebar: #d8d6db;
--sidebar-foreground: #17181e;
--sidebar-primary: #aca1cf;
--sidebar-primary-foreground: #0f1014;
- --sidebar-accent: #d8daed;
+ --sidebar-accent: #bebbc3;
--sidebar-accent-foreground: #0f1014;
- --sidebar-border: #cfd1e0;
- --sidebar-ring: #8274b2;
+ --sidebar-border: #a4a0ab;
+ --sidebar-ring: #aca1cf;
--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;
@@ -284,7 +212,6 @@ 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);
@@ -311,42 +238,41 @@ export const BUILT_IN_THEMES = defineThemes([
},
},
css: `:root[data-theme="methanium"] {
- --background: #edf1f4;
+ --background: #d2e0f0;
--foreground: #10161d;
- --card: var(--background);
+ --card: #c0cfe0;
--card-foreground: #10161d;
- --popover: #f5f7f8;
+ --popover: #d2e0f0;
--popover-foreground: #10161d;
--primary: #8c47ad;
--primary-foreground: #ffffff;
--primary-foreground-alt: #7b3d98;
- --secondary: #dbe2e8;
+ --secondary: #aebed0;
--secondary-foreground: #171e26;
- --muted: #e2e7eb;
+ --muted: #c0cfe0;
--muted-foreground: #515f70;
--accent: #cf8fe633;
- --accent-foreground: #642f79;
+ --accent-foreground: #5a2a6d;
--destructive: #b91c1c;
- --border: #b7c2cc;
- --input: #b7c2cc;
+ --border: #8c9caf;
+ --input: #9dadc0;
--ring: #9d53bc;
--chart-1: #8c47ad;
--chart-2: #2563eb;
--chart-3: #15803d;
--chart-4: #ca8a04;
--chart-5: #db2777;
- --sidebar: #e0e6eb;
+ --sidebar: #aebed0;
--sidebar-foreground: #10161d;
--sidebar-primary: #8c47ad;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #cf8fe633;
- --sidebar-accent-foreground: #642f79;
- --sidebar-border: #b7c2cc;
+ --sidebar-accent-foreground: #5a2a6d;
+ --sidebar-border: #8c9caf;
--sidebar-ring: #9d53bc;
- --markdown-code-background: color-mix(in srgb, var(--input) 55%, var(--background));
}
:root.dark[data-theme="methanium"] {
- --background: #171E26;
+ --background: #10161d;
--foreground: #d2e0f0;
--card: #242d38;
--card-foreground: #d2e0f0;
@@ -355,14 +281,14 @@ export const BUILT_IN_THEMES = defineThemes([
--primary: #cf8fe6;
--primary-foreground: #000000;
--primary-foreground-alt: #bb6fd6;
- --secondary: #2b3642;
+ --secondary: #374351;
--secondary-foreground: #d2e0f0;
--muted: #1d262f;
--muted-foreground: #9dadc0;
--accent: #cf8fe633;
--accent-foreground: #faecfc;
--destructive: #cc4848;
- --border: #242D38;
+ --border: #374351;
--input: #445161;
--ring: #cf8fe6;
--chart-1: #cf8fe6;
@@ -376,28 +302,12 @@ export const BUILT_IN_THEMES = defineThemes([
--sidebar-primary-foreground: #000000;
--sidebar-accent: #2b3642;
--sidebar-accent-foreground: #d2e0f0;
- --sidebar-border: #242D38;
+ --sidebar-border: #374351;
--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;
@@ -407,9 +317,6 @@ 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));
}
@@ -441,17 +348,22 @@ export const BUILT_IN_THEMES = defineThemes([
}
:root[data-theme="methanium"] [data-slot="card"] {
padding-block: calc(1rem * var(--ui-density));
- 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"] {
+: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(--primary);
}
-: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="default"] {
+ border-color: transparent;
+}
+: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="secondary"] {
background-color: var(--secondary);
@@ -459,47 +371,16 @@ export const BUILT_IN_THEMES = defineThemes([
color: var(--secondary-foreground);
}
:root[data-theme="methanium"] [data-slot="button"][data-variant="secondary"]:hover {
- background-color: var(--secondary);
- border-color: color-mix(in srgb, var(--ring) 60%, transparent);
+ background-color: color-mix(in srgb, var(--secondary) 80%, var(--foreground) 20%);
}
-: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"]) {
+:root[data-theme="methanium"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]) {
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"], [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));
+: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));
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);
}`,
},
{
@@ -511,465 +392,149 @@ export const BUILT_IN_THEMES = defineThemes([
design: DEFAULT_THEME_DESIGN,
},
css: `:root[data-theme="secret"] {
- --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: #c04b00;
-
- --secondary: var(--secret-purple);
- --secondary-foreground: #2f1b13;
-
- --muted: #c89ab9;
- --muted-foreground: #49333f;
-
- --accent: #fb6c00;
- --accent-foreground: #24120c;
-
- --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: #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"] {
- --secret-border: color-mix(in srgb, #ffe8b4 8%, #24120c 35%);
-
- --secret-purple: #5e244e;
- --secret-control: var(--secret-purple);
-
- --background: #0a0a0a;
- --foreground: #ffe8b4;
-
- --card: var(--background);
- --card-foreground: var(--foreground);
-
- --popover: #2f1b13;
- --popover-foreground: #ffe8b4;
-
- --primary: var(--secret-gold);
+ --background: #2f1b13;
+ --foreground: #fffaf2;
+ --card: #f9b637;
+ --card-foreground: #24120c;
+ --popover: #5e244e;
+ --popover-foreground: #fffaf2;
+ --primary: #f9b637;
--primary-foreground: #24120c;
--primary-foreground-alt: #fb6c00;
-
- --secondary: var(--secret-purple);
+ --secondary: #5e244e;
--secondary-foreground: #fffaf2;
-
- --muted: #2f1b13;
- --muted-foreground: #e68457;
-
- --accent: #d93618;
- --accent-foreground: #fffaf2;
-
- --destructive: #d93618;
- --destructive-foreground: #fffaf2;
-
- --border: var(--secret-border);
- --input: var(--secret-border);
- --ring: #f9b637;
-
- --sidebar: #0f0f0f;
- --sidebar-foreground: #ffe8b4;
- --sidebar-primary: var(--secret-gold);
+ --muted: #24120c;
+ --muted-foreground: #ffe8b4;
+ --accent: #fb6c00;
+ --accent-foreground: #24120c;
+ --destructive: #e73f1e;
+ --border: #f9b637;
+ --input: #5e244e;
+ --ring: #fb6c00;
+ --sidebar: #24120c;
+ --sidebar-foreground: #fffaf2;
+ --sidebar-primary: #f9b637;
--sidebar-primary-foreground: #24120c;
--sidebar-accent: #aa1c41;
--sidebar-accent-foreground: #fffaf2;
- --sidebar-border: var(--secret-border);
-
- --markdown-code-background: color-mix(
- in srgb,
- var(--muted) 72%,
- black 28%
- );
+ --sidebar-border: #e68457;
}
-
-: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.dark[data-theme="secret"] {
+ --background: #24120c;
+ --foreground: #ffe8b4;
+ --card: #f9b637;
+ --card-foreground: #24120c;
+ --popover: #2f1b13;
+ --popover-foreground: #ffe8b4;
+ --primary: #f9b637;
+ --primary-foreground: #24120c;
+ --primary-foreground-alt: #fb6c00;
+ --secondary: #5e244e;
+ --secondary-foreground: #fffaf2;
+ --muted: #2f1b13;
+ --muted-foreground: #e68457;
+ --accent: #e73f1e;
+ --accent-foreground: #fffaf2;
+ --destructive: #e73f1e;
+ --border: #e68457;
+ --input: #5e244e;
+ --ring: #fb6c00;
+ --sidebar: #24120c;
+ --sidebar-foreground: #ffe8b4;
+ --sidebar-primary: #f9b637;
+ --sidebar-primary-foreground: #24120c;
+ --sidebar-accent: #aa1c41;
+ --sidebar-accent-foreground: #fffaf2;
+ --sidebar-border: #5e244e;
+}
+: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%));
background-repeat: no-repeat;
}
-
-: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%)
- );
+: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);
color: var(--foreground);
}
-
-: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"]):hover {
+ 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"] :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: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[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.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: var(--secret-border);
+ border-color: color-mix(in srgb, #ffe8b4 15%, #24120c 85%);
color: var(--popover-foreground);
}
-
-: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.dark[data-theme="secret"] [data-slot="select-content"] {
+ border-color: color-mix(in srgb, #ffe8b4 15%, #24120c 85%);
}
-
-: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%
- );
+:root[data-theme="secret"] [data-slot="select-item"]:is(:hover, :focus, [data-highlighted], [data-selected]) {
+ background-color: #24120c;
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,
- 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);
+ 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;
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: 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"] :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"] [data-slot="card"] {
- background: var(--card);
+ background: linear-gradient(115deg, #e68457 0%, #f9b637 30%, #fffaf2 47%, #ffdd9c 58%, #fb6c00 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.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"] [data-slot="button"][data-variant="link"] {
- background-image: none;
+: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"]:hover {
- background-color: var(--secondary);
- 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: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="badge"], [data-slot="toggle"])[data-variant="outline"]:hover {
+ 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[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[data-theme="secret"] :where(
- [data-slot="card-title"],
- [data-slot="item-media"][data-variant="icon"],
- [data-slot="badge"][data-variant="outline"]
-) svg {
+: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 {
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 1c488b9..1f904a7 100644
--- a/src/theme/types.ts
+++ b/src/theme/types.ts
@@ -23,17 +23,13 @@ export type Base16Key =
export type Base16Palette = Record
;
-export type ThemeFontFamily =
- | "public-sans"
- | "inter"
- | "source-serif-4"
- | "jetbrains-mono"
- | "system";
+export type ThemeFontFamily = "public-sans" | "system";
export type ThemeDesign = {
density: number;
borderWidth: number;
shadowStrength: number;
+ surfaceContrast: number;
fontScale: number;
headingWeight: number;
motion: number;
@@ -74,7 +70,6 @@ export type ThemeProviderProps = {
customCssStorageKey?: string | null;
parentThemeStorageKey?: string | null;
designStorageKey?: string | null;
- notCustomizedStorageKey?: string | null;
disableTransitionOnChange?: boolean;
};
@@ -103,7 +98,6 @@ export type ThemeProviderState = {
applyThemePreset: (id: string) => void;
resetThemePreset: () => void;
isThemeCustomized: boolean;
- notCustomized: boolean;
themeDesign: ThemeDesign;
setThemeDesign: (
design: ThemeDesign | ((current: ThemeDesign) => ThemeDesign),