From a0d4594b70b6ad25fbdeb3097846785eaa844a5d Mon Sep 17 00:00:00 2001
From: Alois <aloisianer@proton.me>
Date: Thu, 30 Jul 2026 21:46:57 +0200
Subject: [PATCH] (feat): improve secret theme

---
 package.json         |  2 +-
 src/theme/presets.ts | 15 +++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index d8a3dc1..b88da8b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@methanium/ui",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
diff --git a/src/theme/presets.ts b/src/theme/presets.ts
index 97d20c2..8633e86 100644
--- a/src/theme/presets.ts
+++ b/src/theme/presets.ts
@@ -568,6 +568,12 @@ export const BUILT_IN_THEMES = defineThemes([
   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%));
   color: var(--foreground);
@@ -578,6 +584,7 @@ export const BUILT_IN_THEMES = defineThemes([
 }
 :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;
   color: var(--foreground);
 }
 :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"]) {
@@ -585,15 +592,15 @@ export const BUILT_IN_THEMES = defineThemes([
 }
 :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(--secret-control) 84%, #24120c 16%);
-  border-color: var(--input);
+  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(--secret-control) 84%, #24120c 16%);
-  border-color: var(--input);
+  border-color: transparent;
 }
 :root[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: var(--input);
+  border-color: transparent;
 }
 :root[data-theme="secret"] [data-slot="select-content"] {
   background-color: var(--popover);
@@ -603,7 +610,7 @@ export const BUILT_IN_THEMES = defineThemes([
 :root.dark[data-theme="secret"] [data-slot="select-content"] {
   border-color: var(--secret-border);
 }
-:root[data-theme="secret"] :where([data-slot="select-item"], [data-slot="context-menu-item"]):is(:hover, :focus, [data-highlighted], [data-selected]) {
+:root[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%);
   color: #ffe8b4;
 }