feat(icon-button): improved styles for promptOverlay variant

Author: psychedelicious

lib/components/button/icon-button.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { FaBoltLightning } from 'react-icons/fa6';
 
-import type { IconButtonProps } from './icon-button';
 import { IconButton } from './icon-button';
 
 const meta: Meta<typeof IconButton> = {
@@ -16,8 +15,17 @@ const meta: Meta<typeof IconButton> = {
 export default meta;
 type Story = StoryObj<typeof IconButton>;
 
-const Component = (props: IconButtonProps) => {
-  return <IconButton {...props} />;
+const Component = () => {
+  return (
+    <>
+      <IconButton aria-label="label" variant="solid" icon={<FaBoltLightning />} />
+      <IconButton aria-label="label" variant="ghost" icon={<FaBoltLightning />} />
+      <IconButton aria-label="label" variant="link" icon={<FaBoltLightning />} />
+      <IconButton aria-label="label" variant="outline" icon={<FaBoltLightning />} />
+      <IconButton aria-label="label" variant="promptOverlay" icon={<FaBoltLightning />} />
+      <IconButton aria-label="label" variant="promptOverlay" colorScheme="error" icon={<FaBoltLightning />} />
+    </>
+  );
 };
 
 export const Default: Story = {

lib/theme/components/button.ts

@@ -149,12 +149,13 @@ const getStyles = (props: StyleFunctionProps, variant: 'ghost' | 'solid' | 'outl
   } as const;
 };
 
-export const variantPromptOverlay = defineStyle(() => {
+export const variantPromptOverlay = defineStyle((props) => {
+  const { colorScheme: c } = props;
   const _disabled = {
     bg: 'none',
-    color: 'base.500',
+    color: `${c}.500`,
     svg: {
-      fill: 'base.500',
+      fill: `${c}.500`,
     },
     opacity: 0.7,
   };
@@ -166,16 +167,16 @@ export const variantPromptOverlay = defineStyle(() => {
     minW: 'unset',
     minH: 'unset',
     bg: 'none',
-    color: 'base.400',
+    color: `${c}.400`,
     svg: {
-      fill: 'base.400',
+      fill: `${c}.400`,
     },
     _disabled,
     _hover: {
       bg: 'none',
-      color: 'base.100',
+      color: c === 'base' ? 'base.100' : `${c}.300`,
       svg: {
-        fill: 'base.100',
+        fill: c === 'base' ? 'base.100' : `${c}.300`,
       },
       _disabled,
     },