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 secret and tensamin theme
All checks were successful
/ deploy-and-package (push) Successful in 1m6s
Details

Browse source
This commit is contained in:
Alois 2026-07-30 20:57:42 +02:00
commit 108398cb13
Signed by: alois
SSH key fingerprint: SHA256:GBzT2DXvAuGV9XIV5W3WrzVpjU54FThmxHXdbz95J24
2 changed files with 15 additions and 8 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.17", "version": "0.0.18",
"type": "module", "type": "module",
"main": "./dist/index.js", "main": "./dist/index.js",
"types": "./dist/index.d.ts", "types": "./dist/index.d.ts",

21
src/theme/presets.ts
View file

@ -126,7 +126,7 @@ export const BUILT_IN_THEMES = defineThemes([
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"] [data-slot="button"][data-variant="subtleDefault"], :root[data-theme="tensamin"] [data-slot="button"][data-variant="subtleDefault"],
:root[data-theme="tensamin"] [data-slot][data-variant="destructive"] { :root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"])[data-variant="destructive"] {
background-clip: border-box; background-clip: border-box;
border-color: transparent; border-color: transparent;
box-shadow: var(--tensamin-outline-shadow); box-shadow: var(--tensamin-outline-shadow);
@ -135,7 +135,7 @@ export const BUILT_IN_THEMES = defineThemes([
background-color: color-mix(in oklch, var(--primary) 10%, transparent); background-color: color-mix(in oklch, var(--primary) 10%, transparent);
box-shadow: var(--tensamin-subtle-shadow); box-shadow: var(--tensamin-subtle-shadow);
} }
:root[data-theme="tensamin"] [data-slot][data-variant="destructive"] { :root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"])[data-variant="destructive"] {
background-color: color-mix(in oklch, var(--background) 86%, var(--destructive)); background-color: color-mix(in oklch, var(--background) 86%, var(--destructive));
box-shadow: var(--tensamin-destructive-shadow); box-shadow: var(--tensamin-destructive-shadow);
color: var(--destructive); color: var(--destructive);
@ -144,15 +144,15 @@ export const BUILT_IN_THEMES = defineThemes([
background-color: color-mix(in oklch, var(--primary) 10%, transparent); background-color: color-mix(in oklch, var(--primary) 10%, transparent);
background-image: linear-gradient(var(--tensamin-outline-hover), var(--tensamin-outline-hover)); 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]) { :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)); 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="button"][data-variant="subtleDefault"]:active,
:root[data-theme="tensamin"] [data-slot][data-variant="destructive"]: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)); 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="button"][data-variant="subtleDefault"]:focus-visible,
:root[data-theme="tensamin"] [data-slot][data-variant="destructive"]:focus-visible { :root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"])[data-variant="destructive"]:focus-visible {
outline: 2px solid var(--ring); outline: 2px solid var(--ring);
outline-offset: 2.5px; outline-offset: 2.5px;
} }
@ -619,11 +619,18 @@ export const BUILT_IN_THEMES = defineThemes([
:root[data-theme="secret"] [data-slot="card"] { :root[data-theme="secret"] [data-slot="card"] {
background: var(--card); background: var(--card);
} }
:root[data-theme="secret"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"] { :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); background-color: var(--secondary);
border-color: transparent; border-color: transparent;
color: var(--secondary-foreground); color: var(--secondary-foreground);
} }
:root[data-theme="secret"] [data-slot="button"][data-variant="link"] {
background-image: none;
}
: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 { :root[data-theme="secret"] [data-slot="button"][data-variant="outline"]:hover {
background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%); background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
border-color: transparent; border-color: transparent;
@ -642,7 +649,7 @@ export const BUILT_IN_THEMES = defineThemes([
background-color: color-mix(in srgb, var(--secondary) 82%, #fffaf2 18%); background-color: color-mix(in srgb, var(--secondary) 82%, #fffaf2 18%);
border-color: transparent; border-color: transparent;
} }
:root.dark[data-theme="secret"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"] { :root.dark[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: #5e244e; background-color: #5e244e;
border-color: transparent; border-color: transparent;
color: #ffe8b4; color: #ffe8b4;