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

Browse source
This commit is contained in:
Alois 2026-07-27 12:06:03 +02:00
commit c072d7ab57
Signed by: alois
SSH key fingerprint: SHA256:GBzT2DXvAuGV9XIV5W3WrzVpjU54FThmxHXdbz95J24
4 changed files with 94 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -24,6 +24,48 @@ const navigation = [
{ label: "Kiwi", icon: Settings, variant: "secondary" },
] as const;
type Category = "conversations" | "communities";
function CategorySwitch() {
const [category, setCategory] = useState<Category>("conversations");
function toggleCategory() {
setCategory((current) =>
current === "conversations" ? "communities" : "conversations",
);
}
return (
<div
role="tablist"
className="border relative grid grid-cols-2 rounded-4xl bg-card p-1 select-none"
>
<div
className="absolute top-1 bottom-1 rounded-4xl bg-input shadow-sm transition-all duration-300 ease-in-out"
style={{
left: category === "conversations" ? "0.25rem" : "50%",
width: "calc(50% - 0.25rem)",
}}
/>
{(["conversations", "communities"] as const).map((value) => (
<button
key={value}
role="tab"
aria-selected={category === value}
className={`relative z-10 w-full cursor-pointer rounded-4xl px-2.5 py-1.5 text-center text-sm font-medium capitalize transition-colors duration-300 ${
category === value
? "text-foreground"
: "text-ring/50 hover:text-ring"
}`}
onClick={toggleCategory}
>
{value}
</button>
))}
</div>
);
}
export default function App() {
const [showOnboarding, setShowOnboarding] = useState(false);
const [showLoading, setShowLoading] = useState(false);
@ -81,7 +123,10 @@ export default function App() {
return (
<SidebarProvider>
<Sidebar collapsible="none" className="h-auto! min-h-svh self-stretch">
<Sidebar
collapsible="none"
className="h-auto! min-h-svh self-stretch border-r"
>
<SidebarContent>
<SidebarGroup>
<SidebarGroupContent>
@ -94,6 +139,9 @@ export default function App() {
</Button>
</SidebarMenuItem>
))}
<SidebarMenuItem>
<CategorySwitch />
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>

2
apps/showcase/vite.config.ts
View file

@ -23,7 +23,7 @@ export default defineConfig({
optimizeDeps: { exclude: ["@methanium/ui"] },
server: { fs: { allow: [monorepoRoot] } },
plugins: [
methaniumUi({ defaultThemeId: "tensamin" }),
methaniumUi({ defaultThemeId: "methanium" }),
react(),
tailwindcss(),
],

2
package.json
View file

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

47
src/theme/presets.ts
View file

@ -273,7 +273,7 @@ export const BUILT_IN_THEMES = defineThemes([
--sidebar-ring: #9d53bc;
}
:root.dark[data-theme="methanium"] {
--background: #10161d;
--background: #171E26;
--foreground: #d2e0f0;
--card: #242d38;
--card-foreground: #d2e0f0;
@ -309,6 +309,21 @@ export const BUILT_IN_THEMES = defineThemes([
: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;
@ -356,7 +371,8 @@ export const BUILT_IN_THEMES = defineThemes([
border-color: transparent;
}
:root[data-theme="methanium"] [data-slot="button"][data-variant="default"]:hover {
background-color: #bb6fd6;
background-color: var(--primary);
border-color: color-mix(in srgb, var(--ring) 60%, transparent);
}
:root[data-theme="methanium"] [data-slot="button"][data-variant="secondary"] {
background-color: var(--secondary);
@ -364,7 +380,8 @@ 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"], [data-slot="button"][data-variant="outline"]) {
background-color: color-mix(in srgb, var(--input) 55%, var(--background));
@ -373,8 +390,30 @@ export const BUILT_IN_THEMES = defineThemes([
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) 72%, var(--background));
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="button"][data-variant="destructive"]:hover {
background-color: color-mix(in srgb, var(--destructive) 10%, transparent);
border-color: color-mix(in srgb, var(--ring) 60%, transparent);
}
: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"]:where([data-variant="ghost"], [data-variant="link"]):hover {
background-color: transparent;
border-color: color-mix(in srgb, var(--ring) 60%, transparent);
}`,
},
{