feat(style): enhance stateHover, stateActive

Alwatr · Jul 26, 2023 · 0aa3ee1 · 0aa3ee1
1 parent db076dd
commit 0aa3ee1
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/ui/style/lib/state-layer.ts b/ui/style/lib/state-layer.ts
@@ -34,6 +34,22 @@ export const stateLayerPlugin = plugin(({matchUtilities, theme}) => {
             },
           };
         },
+        stateHover: (value) => {
+          if (typeof value !== 'function') return null;
+          const makeColor = value as unknown as (options: {opacityValue: number}) => string;
+          const color = makeColor({opacityValue: stateOpacity.hover});
+          return {
+            backgroundImage: `linear-gradient(${color}, ${color})`,
+          };
+        },
+        stateActive: (value) => {
+          if (typeof value !== 'function') return null;
+          const makeColor = value as unknown as (options: {opacityValue: number}) => string;
+          const color = makeColor({opacityValue: stateOpacity.pressed});
+          return {
+            backgroundImage: `linear-gradient(${color}, ${color})`,
+          };
+        },
       },
       {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars