From 32137c00ef62cdcf581774c5cfe4a3e9722e56dd Mon Sep 17 00:00:00 2001
From: Neretin Artem <hawktrike@gmail.com>
Date: Fri, 12 Dec 2025 00:20:43 +0500
Subject: [PATCH] fix(plasma-theme-builder): Fix generating hover and active
 tokens for onDark,onLight and inverse

---
 .../src/builder/createTheme.ts                  |  6 +++++-
 .../src/components/TokenForm/TokenForm.tsx      | 17 ++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/website/plasma-theme-builder/src/builder/createTheme.ts b/website/plasma-theme-builder/src/builder/createTheme.ts
index 8ac8f9a8c6..e2434bbd79 100644
--- a/website/plasma-theme-builder/src/builder/createTheme.ts
+++ b/website/plasma-theme-builder/src/builder/createTheme.ts
@@ -44,13 +44,15 @@ export const getStateTokens = (
         return { defaultStateTokens, onDarkStateTokens, onLightStateTokens, inverseStateTokens };
     }
 
-    const getDefaultStateToken = getStateToken(sectionName, mode, tokens[mode].default);
+    let newMode = mode;
+    const getDefaultStateToken = getStateToken(sectionName, newMode, tokens[mode].default);
     defaultStateTokens = {
         [`${name}Hover`]: getDefaultStateToken('hover'),
         [`${name}Active`]: getDefaultStateToken('active'),
         ...(isBrightness ? { [`${name}Brightness`]: getDefaultStateToken('brightness') } : {}),
     };
 
+    newMode = 'dark';
     const getOnDarkStateToken = getStateToken(sectionName, mode, tokens[mode].onDark);
     onDarkStateTokens = {
         [`${name}Hover`]: getOnDarkStateToken('hover'),
@@ -58,6 +60,7 @@ export const getStateTokens = (
         ...(isBrightness ? { [`${name}Brightness`]: getOnDarkStateToken('brightness') } : {}),
     };
 
+    newMode = 'light';
     const getOnLightStateToken = getStateToken(sectionName, mode, tokens[mode].onLight);
     onLightStateTokens = {
         [`${name}Hover`]: getOnLightStateToken('hover'),
@@ -65,6 +68,7 @@ export const getStateTokens = (
         ...(isBrightness ? { [`${name}Brightness`]: getOnLightStateToken('brightness') } : {}),
     };
 
+    newMode = mode === 'light' ? 'dark' : 'light';
     const getInverseStateToken = getStateToken(sectionName, mode, tokens[mode].inverse);
     inverseStateTokens = {
         [`${name}Hover`]: getInverseStateToken('hover'),
diff --git a/website/plasma-theme-builder/src/components/TokenForm/TokenForm.tsx b/website/plasma-theme-builder/src/components/TokenForm/TokenForm.tsx
index 90ce4a88a1..563d125eaa 100644
--- a/website/plasma-theme-builder/src/components/TokenForm/TokenForm.tsx
+++ b/website/plasma-theme-builder/src/components/TokenForm/TokenForm.tsx
@@ -169,7 +169,22 @@ export const TokenForm = ({
                 enabled: enabled?.value,
             };
 
-            const getStateTokenFunc = getStateToken(sectionName, themeMode, data);
+            let mode = themeMode;
+            const subsectionName = subsection.value.toLocaleLowerCase();
+            if (
+                (themeMode === 'dark' && (subsectionName.includes('default') || subsectionName.includes('dark'))) ||
+                (themeMode === 'light' && (subsectionName.includes('inverse') || subsectionName.includes('dark')))
+            ) {
+                mode = 'dark';
+            }
+            if (
+                (themeMode === 'dark' && (subsectionName.includes('inverse') || subsectionName.includes('light'))) ||
+                (themeMode === 'light' && (subsectionName.includes('default') || subsectionName.includes('light')))
+            ) {
+                mode = 'light';
+            }
+
+            const getStateTokenFunc = getStateToken(sectionName, mode, data);
 
             return {
                 [`${tokenName}Hover`]: getStateTokenFunc('hover'),