Update chip theme

src/elements/Chip/Chip.story.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import { Chip } from './Chip';
+import { Stack } from '../../layout';
+import { ChipTheme, chipTheme } from './ChipTheme';
 
 export default {
   title: 'Components/Elements/Chip',
@@ -54,15 +56,37 @@ export const Variants = () => (
 );
 
 export const Selectable = () => {
-  const [state, setState] = useState(false);
+  const [IsFilledSelected, setIsFilledSelected] = useState(false);
+  const [isOutlineSelected, setIsOutlineSelected] = useState(false);
 
   return (
-    <Chip onClick={() => setState(!state)} selected={state}>
-      Selectable
-    </Chip>
+    <Stack>
+      <Chip
+        onClick={() => setIsFilledSelected(!IsFilledSelected)}
+        selected={IsFilledSelected}
+      >
+        Selectable
+      </Chip>
+      <Chip
+        variant="outline"
+        onClick={() => setIsOutlineSelected(!isOutlineSelected)}
+        selected={isOutlineSelected}
+      >
+        Selectable
+      </Chip>
+    </Stack>
   );
 };
 
+export const Disabled = () => (
+  <Stack>
+    <Chip disabled>Selectable</Chip>
+    <Chip variant="outline" disabled>
+      Selectable
+    </Chip>
+  </Stack>
+);
+
 const DemoIcon = () => (
   <svg
     width="16"
@@ -79,3 +103,72 @@ const DemoIcon = () => (
     />
   </svg>
 );
+
+export const CustomTheme = () => {
+  const customTheme: ChipTheme = {
+    ...chipTheme,
+    base: 'rounded-full',
+    colors: {
+      ...chipTheme?.colors,
+      secondary: {
+        ...chipTheme.colors.secondary,
+        variants: {
+          ...chipTheme.colors.secondary.variants,
+          filled: 'bg-panel-content text-panel'
+        }
+      },
+      info: {
+        ...chipTheme.colors.info,
+        variants: {
+          ...chipTheme.colors.info.variants,
+          filled: 'bg-info/10 border-info'
+        }
+      },
+      error: {
+        ...chipTheme.colors.error,
+        variants: {
+          ...chipTheme.colors.error.variants,
+          filled: 'bg-error/10 border-error'
+        }
+      },
+      warning: {
+        ...chipTheme.colors.warning,
+        variants: {
+          ...chipTheme.colors.warning.variants,
+          filled: 'bg-warning/10 border-warning'
+        }
+      },
+      success: {
+        ...chipTheme.colors.success,
+        variants: {
+          ...chipTheme.colors.success.variants,
+          filled: 'bg-success/10 border-success'
+        }
+      }
+    }
+  };
+
+  return (
+    <Stack>
+      <Chip theme={customTheme}>Default</Chip>
+      <Chip theme={customTheme} color="primary">
+        Primary
+      </Chip>
+      <Chip theme={customTheme} color="secondary">
+        Secondary
+      </Chip>
+      <Chip theme={customTheme} color="error">
+        Error
+      </Chip>
+      <Chip theme={customTheme} color="success">
+        Success
+      </Chip>
+      <Chip theme={customTheme} color="warning">
+        Warning
+      </Chip>
+      <Chip theme={customTheme} color="info">
+        Info
+      </Chip>
+    </Stack>
+  );
+};

src/elements/Chip/Chip.tsx

@@ -87,19 +87,26 @@ export const Chip: FC<ChipProps & ChipRef> = forwardRef(
         {...rest}
         ref={ref}
         tabIndex={onClick ? 0 : -1}
-        onClick={onClick}
+        onClick={!disabled ? onClick : undefined}
         className={twMerge(
           theme.base,
+          theme.variants[variant],
           theme.colors[color]?.base,
+          theme.colors[color]?.variants?.[variant],
           theme.sizes[size],
           theme.focus,
-          !!onClick && !disabled && theme.colors[color]?.selectable,
-          selected && theme.colors[color]?.selected,
-          theme.variants[variant],
+          !!onClick && !disabled && theme.colors[color]?.selectable?.base,
+          !!onClick &&
+            !disabled &&
+            theme.colors[color]?.selectable?.variants?.[variant]?.base,
+          selected &&
+            theme.colors[color]?.selectable?.variants?.[variant]?.selected,
           disableMargins && 'm-0',
           'transition-colors duration-300 ease [&>svg]:transition-[fill] [&>svg]:will-change-[fill]',
-          className
+          className,
+          disabled && theme.disabled
         )}
+        aria-disabled={disabled}
       >
         {start && (
           <div