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): fix 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 21:16:57 +02:00
commit ba544ec649
Signed by: alois
SSH key fingerprint: SHA256:GBzT2DXvAuGV9XIV5W3WrzVpjU54FThmxHXdbz95J24
3 changed files with 49 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

42
apps/showcase/src/App.tsx
View file

@ -2,8 +2,19 @@ import { useState } from "react";
import { Blocks, Home, Palette, Settings } from "lucide-react"; import { Blocks, Home, Palette, Settings } from "lucide-react";
import { import {
Button, Button,
Card,
CardContent,
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
LoadingScreen, LoadingScreen,
OnboardingFlow, OnboardingFlow,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
Sidebar, Sidebar,
SidebarContent, SidebarContent,
SidebarGroup, SidebarGroup,
@ -143,6 +154,37 @@ export default function App() {
<SidebarMenuItem> <SidebarMenuItem>
<CategorySwitch /> <CategorySwitch />
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem>
<Select>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value={1}>Item 1</SelectItem>
<SelectItem value={2}>Item 2</SelectItem>
<SelectItem value={3}>Item 3</SelectItem>
<SelectItem value={4}>Item 4</SelectItem>
<SelectItem value={5}>Item 5</SelectItem>
</SelectContent>
</Select>
</SidebarMenuItem>
<SidebarMenuItem>
<ContextMenu>
<ContextMenuTrigger>Right Click Me</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>item 1</ContextMenuItem>
<ContextMenuItem variant="destructive">
item 2
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
</SidebarMenuItem>
<SidebarMenuItem className="relative">
<div className="h-25 bg-[#FF0000]"></div>
<Card className="absolute h-30 top-10 left-0 w-full">
<CardContent>Cool card</CardContent>
</Card>
</SidebarMenuItem>
</SidebarMenu> </SidebarMenu>
</SidebarGroupContent> </SidebarGroupContent>
</SidebarGroup> </SidebarGroup>

2
package.json
View file

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

9
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]:not([data-slot="select-item"])[data-variant="destructive"] { :root[data-theme="tensamin"] [data-slot]:not([data-slot="select-item"]):not([data-slot="context-menu-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]:not([data-slot="select-item"])[data-variant="destructive"] { :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)); 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);
@ -168,6 +168,9 @@ export const BUILT_IN_THEMES = defineThemes([
border-color: transparent; border-color: transparent;
box-shadow: var(--tensamin-outline-shadow); 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"] { :root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"] {
background-clip: border-box; background-clip: border-box;
} }
@ -600,7 +603,7 @@ export const BUILT_IN_THEMES = defineThemes([
:root.dark[data-theme="secret"] [data-slot="select-content"] { :root.dark[data-theme="secret"] [data-slot="select-content"] {
border-color: var(--secret-border); border-color: var(--secret-border);
} }
:root[data-theme="secret"] [data-slot="select-item"]:is(:hover, :focus, [data-highlighted], [data-selected]) { :root[data-theme="secret"] :where([data-slot="select-item"], [data-slot="context-menu-item"]):is(:hover, :focus, [data-highlighted], [data-selected]) {
background-color: color-mix(in srgb, var(--popover) 72%, #0a0a0a 28%); background-color: color-mix(in srgb, var(--popover) 72%, #0a0a0a 28%);
color: #ffe8b4; color: #ffe8b4;
} }