methanium/ui
Watch
3
0
Fork
You've already forked ui
 0
Code Issues Pull requests 3 Projects Releases 21 Packages Wiki Activity Actions

(feat): improve tensamin theme
All checks were successful
/ deploy-and-package (push) Successful in 1m7s
Details

Browse source
This commit is contained in:
Alois 2026-07-30 18:53:49 +02:00
commit 19fd1bc848
Signed by: alois
SSH key fingerprint: SHA256:GBzT2DXvAuGV9XIV5W3WrzVpjU54FThmxHXdbz95J24
4 changed files with 3670 additions and 1921 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@methanium/ui", "name": "@methanium/ui",
"version": "0.0.13", "version": "0.0.14",
"type": "module", "type": "module",
"main": "./dist/index.js", "main": "./dist/index.js",
"types": "./dist/index.d.ts", "types": "./dist/index.d.ts",

5155
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

1
src/index.css
View file

@ -170,7 +170,6 @@
[tabindex]:not([tabindex="-1"]) [tabindex]:not([tabindex="-1"])
):focus-visible { ):focus-visible {
outline: none !important; outline: none !important;
box-shadow: none !important;
} }
:where( :where(

115
src/theme/presets.ts
View file

@ -51,22 +51,34 @@ export const BUILT_IN_THEMES = defineThemes([
--ring: oklch(0.62 0.12 185); --ring: oklch(0.62 0.12 185);
--sidebar: color-mix(in oklch, var(--background) 97%, black); --sidebar: color-mix(in oklch, var(--background) 97%, black);
--sidebar-primary: oklch(0.58 0.12 185); --sidebar-primary: oklch(0.58 0.12 185);
--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"] { :root.dark[data-theme="tensamin"] {
--background: oklch(0.21 0 0); --background: oklch(0.18 0 0);
--card: oklch(0.25 0 0); --card: oklch(0.22 0 0);
--popover: oklch(0.25 0 0); --popover: oklch(0.22 0 0);
--secondary: oklch(0.31 0 0); --secondary: oklch(0.28 0 0);
--muted: oklch(0.3 0 0); --muted: oklch(0.27 0 0);
--accent: oklch(0.31 0 0); --accent: oklch(0.28 0 0);
--border: oklch(1 0 0 / 15%); --border: oklch(1 0 0 / 15%);
--input: oklch(1 0 0 / 20%); --input: oklch(1 0 0 / 20%);
--sidebar: color-mix(in oklch, var(--background) 98%, white); --sidebar: color-mix(in oklch, var(--background) 98%, white);
--sidebar-accent: oklch(0.3 0 0); --sidebar-accent: oklch(0.27 0 0);
--sidebar-border: oklch(1 0 0 / 15%); --sidebar-border: oklch(1 0 0 / 15%);
--primary: oklch(0.69 0.12 184); --primary: oklch(0.69 0.12 184);
--primary-foreground: oklch(0.16 0.025 190); --primary-foreground: oklch(0.16 0.025 190);
--primary-foreground-alt: oklch(0.73 0.13 183); --primary-foreground-alt: oklch(0.73 0.13 183);
--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"] [data-slot] {
--tensamin-edge: var(--border); --tensamin-edge: var(--border);
@ -88,23 +100,22 @@ export const BUILT_IN_THEMES = defineThemes([
:root[data-theme="tensamin"] [data-slot="button"]:hover { :root[data-theme="tensamin"] [data-slot="button"]:hover {
background-color: color-mix(in oklch, var(--background) 88%, var(--foreground)); 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"] { :root[data-theme="tensamin"] [data-slot="button"][data-variant="default"] {
background-color: color-mix(in oklch, var(--primary) 93%, white); background-color: color-mix(in oklch, var(--primary) 93%, white);
} }
:root[data-theme="tensamin"] [data-slot="button"][data-variant="default"]:hover { :root[data-theme="tensamin"] [data-slot="button"][data-variant="default"]:hover {
background-color: color-mix(in oklch, var(--primary) 85%, var(--primary-foreground)); 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"] { :root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"] {
background-color: color-mix(in oklch, var(--primary) 10%, transparent);
border-color: transparent;
color: var(--primary-foreground-alt); color: var(--primary-foreground-alt);
} }
:root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"]:hover {
background-color: color-mix(in oklch, var(--primary) 20%, transparent);
}
:root[data-theme="tensamin"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="secondary"] { :root[data-theme="tensamin"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="secondary"] {
--tensamin-edge: var(--secondary); --tensamin-edge: var(--secondary);
} }
@ -114,40 +125,66 @@ export const BUILT_IN_THEMES = defineThemes([
:root[data-theme="tensamin"] [data-slot="button"][data-variant="secondary"]:hover { :root[data-theme="tensamin"] [data-slot="button"][data-variant="secondary"]:hover {
background-color: color-mix(in oklch, var(--secondary) 86%, var(--secondary-foreground)); 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"] { :root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"],
--tensamin-edge: var(--destructive); :root[data-theme="tensamin"] [data-slot][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(--background) 86%, var(--destructive)); background-color: color-mix(in oklch, var(--primary) 10%, transparent);
} box-shadow: var(--tensamin-subtle-shadow);
: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][data-variant="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); background-color: color-mix(in oklch, var(--background) 86%, var(--destructive));
border-left-color: color-mix(in oklch, color-mix(in oklch, var(--background) 86%, var(--destructive)) 89%, black); box-shadow: var(--tensamin-destructive-shadow);
border-right-color: color-mix(in oklch, color-mix(in oklch, var(--background) 86%, var(--destructive)) 89%, black); color: var(--destructive);
border-bottom-color: color-mix(in oklch, color-mix(in oklch, var(--background) 86%, var(--destructive)) 83%, black);
} }
: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"]: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][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="button"][data-variant="subtleDefault"]:active,
:root[data-theme="tensamin"] [data-slot][data-variant="destructive"]:active {
background-image: linear-gradient(var(--tensamin-outline-pressed), var(--tensamin-outline-pressed));
}
:root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"]:focus-visible,
:root[data-theme="tensamin"] [data-slot][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); --tensamin-edge: var(--input);
} border-color: transparent;
:root[data-theme="tensamin"] [data-slot][data-variant="outline"]:not([data-slot="button"]):not([data-state="on"]):not([aria-pressed="true"]):not([data-active]) { box-shadow: var(--tensamin-outline-shadow);
background-color: color-mix(in oklch, var(--background) 93%, var(--foreground));
} }
:root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"], :root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"],
: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="checkbox"]:not([data-checked]), [data-slot="radio-group-item"]:not([data-checked]), [data-slot="input-otp-slot"]) { :root[data-theme="tensamin"] [data-slot][data-variant="outline"]:not([data-slot="button"]):not([data-state="on"]):not([aria-pressed="true"]):not([data-active]),
background-color: color-mix(in oklch, var(--background) 92%, white); :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][data-variant="outline"]:not([data-slot="button"]):not([data-state="on"]):not([aria-pressed="true"]):not([data-active]):is(:hover, :focus-visible, :focus-within, [aria-expanded="true"]) { :root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"] {
background-color: color-mix(in oklch, var(--background) 89%, var(--foreground)); background-clip: border-box;
} }
:root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"]:is(:hover, :focus-visible, [aria-expanded="true"]), :root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"]:is(:hover, [aria-expanded="true"]),
:root[data-theme="tensamin"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="native-select"], [data-slot="input-group"]):is(:hover, :focus-visible, :focus-within, [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"]),
background-color: color-mix(in oklch, var(--background) 88%, white); :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"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="native-select"], [data-slot="input-group"], [data-slot="badge"][data-variant="outline"], [data-slot="toggle"][data-variant="outline"]):is(:hover, :focus-visible, :focus-within) { :root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"]:active,
--tensamin-edge: color-mix(in oklch, var(--input) 75%, var(--ring)); :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"]) { :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)); --tensamin-edge: color-mix(in oklch, currentColor 12%, var(--border));