fix(tailwind): correct disabled tag styles (#7247)

* fix(taggroup): add isDisabled to compoundVariants

this allows the styles defined in isDisabled to be applied

* test(taggroup): add disabled item

this shows the disabled styles in action

* style(taggroup): add dark text colors to improve contrast

* style(taggroup): update dark mode disabled styles

---------

Co-authored-by: Robert Snow <[email protected]>

Author: steveoh

starters/tailwind/src/TagGroup.tsx

@@ -43,11 +43,12 @@ const tagStyles = tv({
       true: 'bg-blue-600 text-white border-transparent forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-color-adjust-none'
     },
     isDisabled: {
-      true: 'bg-gray-100 text-gray-300 forced-colors:text-[GrayText]'
+      true: 'bg-gray-100 dark:bg-transparent dark:border-white/20 text-gray-300 dark:text-zinc-600 forced-colors:text-[GrayText]'
     }
   },
   compoundVariants: (Object.keys(colors) as Color[]).map((color) => ({
     isSelected: false,
+    isDisabled: false,
     color,
     class: colors[color]
   }))

starters/tailwind/stories/TagGroup.stories.tsx

@@ -15,7 +15,7 @@ export default meta;
 export const Example = (args: any) => (
   <TagGroup {...args}>
     <Tag>Chocolate</Tag>
-    <Tag>Mint</Tag>
+    <Tag isDisabled>Mint</Tag>
     <Tag>Strawberry</Tag>
     <Tag>Vanilla</Tag>
   </TagGroup>