From 2a7b172be400688a68acdf9154000b6ce3b158d6 Mon Sep 17 00:00:00 2001
From: Grant Steffen <gsteffen1203@gmail.com>
Date: Wed, 24 Apr 2024 12:29:23 -0500
Subject: [PATCH 1/4] Update chip theme

---
 src/elements/Chip/Chip.story.tsx |  33 +++-
 src/elements/Chip/Chip.tsx       |  17 +-
 src/elements/Chip/ChipTheme.ts   | 302 ++++++++++++++++++++-----------
 3 files changed, 238 insertions(+), 114 deletions(-)

diff --git a/src/elements/Chip/Chip.story.tsx b/src/elements/Chip/Chip.story.tsx
index cbe332e5..cc9b0541 100644
--- a/src/elements/Chip/Chip.story.tsx
+++ b/src/elements/Chip/Chip.story.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Chip } from './Chip';
+import { Stack } from '../../layout';
 
 export default {
   title: 'Components/Elements/Chip',
@@ -54,15 +55,39 @@ 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
+        color="default"
+        onClick={() => setIsFilledSelected(!IsFilledSelected)}
+        selected={IsFilledSelected}
+      >
+        Selectable
+      </Chip>
+      <Chip
+        color="default"
+        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"
diff --git a/src/elements/Chip/Chip.tsx b/src/elements/Chip/Chip.tsx
index 00e4b908..1ef0a9e7 100644
--- a/src/elements/Chip/Chip.tsx
+++ b/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
diff --git a/src/elements/Chip/ChipTheme.ts b/src/elements/Chip/ChipTheme.ts
index 2acf1684..5f750785 100644
--- a/src/elements/Chip/ChipTheme.ts
+++ b/src/elements/Chip/ChipTheme.ts
@@ -1,3 +1,24 @@
+interface ThemeColor {
+  base?: string;
+  variants?: {
+    filled?: string;
+    outline?: string;
+  };
+  selectable?: {
+    base: string;
+    variants?: {
+      filled?: {
+        base?: string;
+        selected?: string;
+      };
+      outline?: {
+        base?: string;
+        selected?: string;
+      };
+    };
+  };
+}
+
 export interface ChipTheme {
   base: string;
   adornment: {
@@ -13,16 +34,15 @@ export interface ChipTheme {
   variants: {
     filled: string;
     outline: string;
-    text: string;
   };
   colors: {
-    default: { base?: string; selectable?: string; selected?: string };
-    primary?: { base?: string; selectable?: string; selected?: string };
-    secondary?: { base?: string; selectable?: string; selected?: string };
-    success?: { base?: string; selectable?: string; selected?: string };
-    warning?: { base?: string; selectable?: string; selected?: string };
-    error?: { base?: string; selectable?: string; selected?: string };
-    info?: { base?: string; selectable?: string; selected?: string };
+    default: ThemeColor;
+    primary?: ThemeColor;
+    secondary?: ThemeColor;
+    success?: ThemeColor;
+    warning?: ThemeColor;
+    error?: ThemeColor;
+    info?: ThemeColor;
   };
   sizes: {
     small: string;
@@ -38,35 +58,50 @@ export interface ChipTheme {
       large: string;
     };
   };
+  disabled: string;
 }
 
 const baseTheme: Partial<ChipTheme> = {
   base: `
-  inline-flex whitespace-no-wrap select-none items-center justify-center px-2.5 py-1
-  rounded border border-transparent box-border leading-none text-white transition-colors
-  duration-300 ease [&>svg]:transition-[fill] [&>svg]:will-change-[fill]
+  inline-flex whitespace-no-wrap select-none items-center justify-center px-2.5 py-0.5
+  rounded-sm leading-none text-white transition-colors
+  duration-300 ease [&>svg]:transition-[fill] [&>svg]:will-change-[fill] font-medium
   `,
   colors: {
     default: {
-      selectable: 'hover:cursor-pointer'
+      selectable: {
+        base: 'hover:cursor-pointer'
+      }
     },
     primary: {
-      selectable: 'hover:cursor-pointer'
+      selectable: {
+        base: 'hover:cursor-pointer'
+      }
     },
     secondary: {
-      selectable: 'hover:cursor-pointer'
+      selectable: {
+        base: 'hover:cursor-pointer'
+      }
     },
     success: {
-      selectable: 'hover:cursor-pointer'
+      selectable: {
+        base: 'hover:cursor-pointer'
+      }
     },
     warning: {
-      selectable: 'hover:cursor-pointer'
+      selectable: {
+        base: 'hover:cursor-pointer'
+      }
     },
     error: {
-      selectable: 'hover:cursor-pointer'
+      selectable: {
+        base: 'hover:cursor-pointer'
+      }
     },
     info: {
-      selectable: 'hover:cursor-pointer'
+      selectable: {
+        base: 'hover:cursor-pointer'
+      }
     }
   },
   adornment: {
@@ -81,8 +116,8 @@ const baseTheme: Partial<ChipTheme> = {
   },
   sizes: {
     small: 'text-[10px] px-1 py-0.5',
-    medium: 'text-xs px-2 py-1',
-    large: 'text-sm px-2 py-2'
+    medium: 'text-sm px-2 py-0.5',
+    large: 'text-base px-3 py-0.5'
   },
   focus:
     'focus-visible:outline-dashed focus-visible:outline-1 focus-visible:outline-offset-2',
@@ -93,7 +128,8 @@ const baseTheme: Partial<ChipTheme> = {
       medium: 'leading-3 max-h-3',
       large: 'leading-[14px] max-h-3.5'
     }
-  }
+  },
+  disabled: 'bg-opacity-50 border-opacity-50 text-opacity-50 cursor-not-allowed'
 };
 
 export const chipTheme: ChipTheme = {
@@ -102,69 +138,146 @@ export const chipTheme: ChipTheme = {
   sizes: baseTheme.sizes,
   focus: baseTheme.focus,
   variants: {
-    filled: 'text-white',
-    outline: 'bg-opacity-0 border hover:bg-transparent text-surface-content',
-    text: 'bg-opacity-0 border-0'
+    filled: 'border border-transparent box-border',
+    outline: 'bg-opacity-0 border hover:bg-transparent'
   },
   colors: {
     default: {
-      base: 'bg-gray-600 border-gray-600 text-gray-300',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-gray-500 hover:border-gray-500'
-      ].join(' '),
-      selected: '!bg-gray-500 text-white'
+      variants: {
+        filled: 'bg-panel border-panel text-panel-content',
+        outline: 'text-panel-content border-panel-content'
+      },
+      selectable: {
+        base: `${baseTheme.colors.default.selectable.base}`,
+        variants: {
+          filled: {
+            base: 'hover:bg-primary-hover hover:border-primary-hover hover:text-panel',
+            selected: 'bg-primary text-panel'
+          },
+          outline: {
+            base: 'hover:text-primary-hover hover:border-panel-accent',
+            selected: 'border-panel-accent text-primary'
+          }
+        }
+      }
     },
     primary: {
-      base: 'bg-primary border-primary text-primary',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-primary-hover hover:border-primary-hover'
-      ].join(' '),
-      selected: '!bg-primary-active text-white'
+      variants: {
+        outline: 'text-primary border-panel-accent',
+        filled: 'bg-primary border-primary text-panel-content'
+      },
+      selectable: {
+        base: `${baseTheme.colors.primary.selectable.base}`,
+        variants: {
+          filled: {
+            base: 'hover:bg-primary-hover hover:border-primary-hover hover:text-panel',
+            selected: 'bg-primary-hover text-panel'
+          },
+          outline: {
+            base: 'hover:text-primary-hover hover:border-primary',
+            selected: 'border-primary'
+          }
+        }
+      }
     },
     secondary: {
-      base: 'bg-secondary border-secondary text-secondary',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-secondary-hover hover:border-secondary-hover'
-      ].join(' '),
-      selected: '!bg-secondary-active text-white'
+      variants: {
+        filled: 'bg-secondary border-secondary text-panel-content',
+        outline: 'text-secondary border-panel-accent'
+      },
+      selectable: {
+        base: `${baseTheme.colors.secondary.selectable.base}`,
+        variants: {
+          filled: {
+            base: 'hover:bg-secondary-hover hover:border-secondary-hover hover:text-panel',
+            selected: 'bg-secondary-hover text-panel'
+          },
+          outline: {
+            base: 'hover:text-secondary-hover hover:border-secondary',
+            selected: 'border-secondary'
+          }
+        }
+      }
     },
     success: {
-      base: 'bg-success border-success text-success',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-success-hover hover:border-success-hover'
-      ].join(' '),
-      selected: '!bg-success-active text-white'
+      variants: {
+        filled: 'bg-success border-success text-panel',
+        outline: 'text-success border-panel-accent'
+      },
+      selectable: {
+        base: `${baseTheme.colors.success.selectable.base}`,
+        variants: {
+          filled: {
+            base: 'hover:bg-success-hover hover:border-success-hover',
+            selected: 'bg-success-hover'
+          },
+          outline: {
+            base: 'hover:text-success-hover hover:border-success',
+            selected: 'border-success'
+          }
+        }
+      }
     },
     warning: {
-      base: 'bg-warning border-warning text-warning',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-warning-hover hover:border-warning-hover'
-      ].join(' '),
-      selected: '!bg-warning-active text-white'
+      variants: {
+        filled: 'bg-warning border-warning text-panel',
+        outline: 'text-warning border-panel-accent'
+      },
+      selectable: {
+        base: `${baseTheme.colors.warning.selectable.base}`,
+        variants: {
+          filled: {
+            base: 'hover:bg-warning-hover hover:border-warning-hover hover:text-panel',
+            selected: 'bg-warning-hover'
+          },
+          outline: {
+            base: 'hover:text-warning-hover hover:border-warning',
+            selected: 'border-warning'
+          }
+        }
+      }
     },
     error: {
-      base: 'bg-error border-error text-error',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-error-hover hover:border-error-hover'
-      ].join(' '),
-      selected: '!bg-error-active text-white'
+      variants: {
+        filled: 'bg-error border-error text-panel',
+        outline: 'text-error border-panel-accent'
+      },
+      selectable: {
+        base: `${baseTheme.colors.error.selectable.base}`,
+        variants: {
+          filled: {
+            base: 'hover:bg-error-hover hover:border-error-hover hover:text-panel',
+            selected: 'bg-error-hover'
+          },
+          outline: {
+            base: 'hover:text-error-hover hover:border-error',
+            selected: 'border-error'
+          }
+        }
+      }
     },
     info: {
-      base: 'bg-info border-info text-info',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-info-hover hover:border-info-hover'
-      ].join(' '),
-      selected: '!bg-info-active text-white'
+      variants: {
+        filled: 'bg-info border-info text-panel',
+        outline: 'text-info border-panel-accent'
+      },
+      selectable: {
+        base: `${baseTheme.colors.info.selectable.base}`,
+        variants: {
+          filled: {
+            base: 'hover:bg-info-hover hover:border-info-hover hover:text-panel',
+            selected: 'bg-info-hover'
+          },
+          outline: {
+            base: 'hover:text-info-hover hover:border-info',
+            selected: 'border-info'
+          }
+        }
+      }
     }
   },
-  deleteButton: baseTheme.deleteButton
+  deleteButton: baseTheme.deleteButton,
+  disabled: baseTheme.disabled
 };
 
 export const legacyChipTheme: ChipTheme = {
@@ -189,66 +302,45 @@ export const legacyChipTheme: ChipTheme = {
   variants: {
     filled: '[&>svg]:fill-[var(--chip-color)]',
     outline:
-      'bg-opacity-0 border hover:bg-transparent border-[var(--chip-background)] text-[var(--chip-color)] [&>svg]:fill-[var(--chip-color)]',
-    text: 'bg-opacity-0 border-0 [&>svg]:fill-[var(--chip-color)]'
+      'bg-opacity-0 border hover:bg-transparent border-[var(--chip-background)] text-[var(--chip-color)] [&>svg]:fill-[var(--chip-color)]'
   },
   colors: {
     default: {
       base: 'bg-[var(--chip-background)] border-[var(--chip-background)] text-[var(--chip-color)] ',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-gray-500 hover:border-gray-500'
-      ].join(' '),
-      selected: '!bg-gray-500 text-white'
+      variants: baseTheme.colors.default.variants,
+      selectable: baseTheme.colors.default.selectable
     },
     primary: {
       base: 'bg-[color:var(--primary-background)] border-[color:var(--primary-background)]',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-[color:var(--primary-background-hover)] hover:border-[color:var(--primary-background-hover)]'
-      ].join(' '),
-      selected: '!bg-[color:var(--primary-background-hover)] text-white'
+      variants: baseTheme.colors.primary.variants,
+      selectable: baseTheme.colors.primary.selectable
     },
     secondary: {
       base: 'bg-[color:var(--secondary-background)] border-[color:var(--secondary-background)]',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-[color:var(--secondary-background-hover)] hover:border-[color:var(--secondary-background-hover)]'
-      ].join(' '),
-      selected: '!bg-[color:var(--secondary-background-hover)] text-white'
+      variants: baseTheme.colors.secondary.variants,
+      selectable: baseTheme.colors.secondary.selectable
     },
     success: {
       base: 'bg-[color:var(--success-background)] border-[color:var(--success-background)]',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-[color:var(--success-background-hover)] hover:border-[color:var(--success-background-hover)]'
-      ].join(' '),
-      selected: '!bg-[color:var(--success-background-hover)] text-white'
+      variants: baseTheme.colors.success.variants,
+      selectable: baseTheme.colors.success.selectable
     },
     warning: {
       base: 'bg-[color:var(--warning-background)] border-[color:var(--warning-background)]',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-[color:var(--warning-background-hover)] hover:border-[color:var(--warning-background-hover)]'
-      ].join(' '),
-      selected: '!bg-[color:var(--warning-background-hover)] text-white'
+      variants: baseTheme.colors.warning.variants,
+      selectable: baseTheme.colors.warning.selectable
     },
     error: {
       base: 'bg-[color:var(--error-background)] border-[color:var(--error-background)]',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-[color:var(--error-background-hover)] hover:border-[color:var(--error-background-hover)]'
-      ].join(' '),
-      selected: '!bg-[color:var(--error-background-hover)] text-white'
+      variants: baseTheme.colors.error.variants,
+      selectable: baseTheme.colors.error.selectable
     },
     info: {
       base: 'bg-[color:var(--info-background)] border-[color:var(--info-background)]',
-      selectable: [
-        baseTheme.colors.default.selectable,
-        'hover:bg-[color:var(--info-background-hover)] hover:border-[color:var(--info-background-hover)]'
-      ].join(' '),
-      selected: '!bg-[color:var(--info-background-hover)] text-white'
+      variants: baseTheme.colors.info.variants,
+      selectable: baseTheme.colors.info.selectable
     }
   },
-  deleteButton: baseTheme.deleteButton
+  deleteButton: baseTheme.deleteButton,
+  disabled: baseTheme.disabled
 };

From a03ced00efe1dea2305250c6b8760f9b83a4d6db Mon Sep 17 00:00:00 2001
From: Grant Steffen <gsteffen1203@gmail.com>
Date: Wed, 24 Apr 2024 12:41:56 -0500
Subject: [PATCH 2/4] Add CustomTheme chip story

---
 src/elements/Chip/Chip.story.tsx | 72 +++++++++++++++++++++++++++++++-
 src/elements/Chip/ChipTheme.ts   |  4 +-
 2 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/src/elements/Chip/Chip.story.tsx b/src/elements/Chip/Chip.story.tsx
index cc9b0541..3f57262b 100644
--- a/src/elements/Chip/Chip.story.tsx
+++ b/src/elements/Chip/Chip.story.tsx
@@ -1,6 +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',
@@ -61,14 +62,12 @@ export const Selectable = () => {
   return (
     <Stack>
       <Chip
-        color="default"
         onClick={() => setIsFilledSelected(!IsFilledSelected)}
         selected={IsFilledSelected}
       >
         Selectable
       </Chip>
       <Chip
-        color="default"
         variant="outline"
         onClick={() => setIsOutlineSelected(!isOutlineSelected)}
         selected={isOutlineSelected}
@@ -104,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>
+  );
+};
diff --git a/src/elements/Chip/ChipTheme.ts b/src/elements/Chip/ChipTheme.ts
index 5f750785..eda471a7 100644
--- a/src/elements/Chip/ChipTheme.ts
+++ b/src/elements/Chip/ChipTheme.ts
@@ -164,14 +164,14 @@ export const chipTheme: ChipTheme = {
     primary: {
       variants: {
         outline: 'text-primary border-panel-accent',
-        filled: 'bg-primary border-primary text-panel-content'
+        filled: 'bg-primary border-primary text-panel'
       },
       selectable: {
         base: `${baseTheme.colors.primary.selectable.base}`,
         variants: {
           filled: {
             base: 'hover:bg-primary-hover hover:border-primary-hover hover:text-panel',
-            selected: 'bg-primary-hover text-panel'
+            selected: 'bg-primary-hover'
           },
           outline: {
             base: 'hover:text-primary-hover hover:border-primary',

From 36941c61217a874ca957c1ab9930f060b03d9ee0 Mon Sep 17 00:00:00 2001
From: Grant Steffen <gsteffen1203@gmail.com>
Date: Wed, 24 Apr 2024 13:32:52 -0500
Subject: [PATCH 3/4] Remove tw config fill

---
 tailwind.config.ts | 26 +++++++++-----------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index adf8c9b9..5f3ea60c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -229,26 +229,22 @@ const config: Config = {
         success: {
           DEFAULT: colorPalette.green[500],
           active: colorPalette.green[500],
-          hover: colorPalette.green[600],
-          fill: colorPalette.green[950]
+          hover: colorPalette.green[600]
         },
         error: {
           DEFAULT: colorPalette.red[500],
-          active: colorPalette.red[400],
-          hover: colorPalette.red[600],
-          fill: colorPalette.red[950]
+          active: colorPalette.red[500],
+          hover: colorPalette.red[600]
         },
         warning: {
           DEFAULT: colorPalette.orange[500],
           active: colorPalette.orange[500],
-          hover: colorPalette.orange[600],
-          fill: colorPalette.orange[950]
+          hover: colorPalette.orange[600]
         },
         info: {
           DEFAULT: colorPalette.blue[500],
           active: colorPalette.blue[500],
-          hover: colorPalette.blue[600],
-          fill: colorPalette.blue[950]
+          hover: colorPalette.blue[600]
         },
         panel: {
           // Panel backgrounds, such as cards, tables, popovers, dialogs, dropdown menus, etc.
@@ -281,26 +277,22 @@ const config: Config = {
         success: {
           DEFAULT: colorPalette.green[500],
           active: colorPalette.green[500],
-          hover: colorPalette.green[400],
-          fill: colorPalette.green[100]
+          hover: colorPalette.green[400]
         },
         error: {
           DEFAULT: colorPalette.red[500],
           active: colorPalette.red[500],
-          hover: colorPalette.red[400],
-          fill: colorPalette.red[100]
+          hover: colorPalette.red[400]
         },
         warning: {
           DEFAULT: colorPalette.orange[500],
           active: colorPalette.orange[500],
-          hover: colorPalette.orange[400],
-          fill: colorPalette.orange[100]
+          hover: colorPalette.orange[400]
         },
         info: {
           DEFAULT: colorPalette.blue[500],
           active: colorPalette.blue[500],
-          hover: colorPalette.blue[400],
-          fill: colorPalette.blue[100]
+          hover: colorPalette.blue[400]
         },
         panel: {
           // Panel backgrounds, such as cards, tables, popovers, dialogs, dropdown menus, etc.

From 380a0dc6ca0246d129bfd8922cb383ace0031fa4 Mon Sep 17 00:00:00 2001
From: Grant Steffen <gsteffen1203@gmail.com>
Date: Wed, 24 Apr 2024 14:09:53 -0500
Subject: [PATCH 4/4] Remove tw config fill from docs

---
 docs/getting-started/Migration.mdx | 12 ++++--------
 docs/getting-started/Setup.mdx     | 12 ++++--------
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/docs/getting-started/Migration.mdx b/docs/getting-started/Migration.mdx
index 721d90b2..eba6d516 100644
--- a/docs/getting-started/Migration.mdx
+++ b/docs/getting-started/Migration.mdx
@@ -110,26 +110,22 @@ colors: {
   success: {
     DEFAULT: colorPalette.green[500],
     active: colorPalette.green[500],
-    hover: colorPalette.green[400],
-    fill: colorPalette.green[950]
+    hover: colorPalette.green[400]
   },
   error: {
     DEFAULT: colorPalette.red[500],
     active: colorPalette.red[400],
-    hover: colorPalette.red[600],
-    fill: colorPalette.red[950]
+    hover: colorPalette.red[600]
   },
   warning: {
     DEFAULT: colorPalette.orange[500],
     active: colorPalette.orange[500],
-    hover: colorPalette.orange[400],
-    fill: colorPalette.orange[950]
+    hover: colorPalette.orange[400]
   },
   info: {
     DEFAULT: colorPalette.blue[500],
     active: colorPalette.blue[500],
-    hover: colorPalette.blue[400],
-    fill: colorPalette.blue[950]
+    hover: colorPalette.blue[400]
   }
 }
 ```
diff --git a/docs/getting-started/Setup.mdx b/docs/getting-started/Setup.mdx
index 3d3e027b..f0639a9a 100644
--- a/docs/getting-started/Setup.mdx
+++ b/docs/getting-started/Setup.mdx
@@ -228,26 +228,22 @@ const config: Config = {
         success: {
           DEFAULT: colorPalette.green[500],
           active: colorPalette.green[500],
-          hover: colorPalette.green[600],
-          fill: colorPalette.green[100]
+          hover: colorPalette.green[600]
         },
         error: {
           DEFAULT: colorPalette.red[500],
           active: colorPalette.red[500],
-          hover: colorPalette.red[600],
-          fill: colorPalette.red[100]
+          hover: colorPalette.red[600]
         },
         warning: {
           DEFAULT: colorPalette.orange[500],
           active: colorPalette.orange[500],
-          hover: colorPalette.orange[600],
-          fill: colorPalette.orange[100]
+          hover: colorPalette.orange[600]
         },
         info: {
           DEFAULT: colorPalette.blue[500],
           active: colorPalette.blue[500],
-          hover: colorPalette.blue[600],
-          fill: colorPalette.blue[100]
+          hover: colorPalette.blue[600]
         },
         background: {
           level1: colorPalette.white,