fix(LOY-128): add rounded filter chip variant

packages/design-system/lib/components/ChipButton/variants.ts

@@ -2,24 +2,114 @@ import { cva } from 'class-variance-authority'
 
 import { deepmerge } from 'deepmerge-ts'
 import styles from './chip-button.module.css'
+import { config as typographyConfig } from '../Typography/variants'
+
+const variantKeys = {
+  variant: {
+    Default: 'Default',
+    Outlined: 'Outlined',
+    FilterRounded: 'FilterRounded',
+  },
+  style: {
+    Medium: 'Medium',
+    Large: 'Large',
+  },
+  typography: {
+    Bold: 'Body/Supporting text (caption)/smBold',
+    Regular: 'Body/Supporting text (caption)/smRegular',
+  },
+} as const
 
 export const config = {
   variants: {
     variant: {
-      Default: styles.Default,
-      Outlined: styles.Outlined,
+      [variantKeys.variant.Default]: styles.Default,
+      [variantKeys.variant.Outlined]: styles.Outlined,
+      [variantKeys.variant.FilterRounded]: styles.FilterRounded,
+    },
+    selected: {
+      true: '',
+      false: '',
+    },
+    size: {
+      [variantKeys.style.Medium]: '',
+      [variantKeys.style.Large]: '',
     },
   },
+  compoundVariants: [
+    {
+      variant: variantKeys.variant.Default,
+      className: [
+        typographyConfig.variants.variant[
+          'Body/Supporting text (caption)/smBold'
+        ],
+      ],
+    },
+    {
+      variant: variantKeys.variant.Outlined,
+      className: [
+        typographyConfig.variants.variant[
+          'Body/Supporting text (caption)/smBold'
+        ],
+      ],
+    },
+    {
+      variant: variantKeys.variant.FilterRounded,
+      size: variantKeys.style.Medium,
+      selected: true,
+      className: [
+        typographyConfig.variants.variant[
+          'Body/Supporting text (caption)/smRegular'
+        ],
+        styles.selected,
+        styles.medium,
+      ],
+    },
+    {
+      variant: variantKeys.variant.FilterRounded,
+      size: variantKeys.style.Medium,
+      selected: false,
+      className: [
+        typographyConfig.variants.variant[
+          'Body/Supporting text (caption)/smRegular'
+        ],
+        styles.medium,
+      ],
+    },
+    {
+      variant: variantKeys.variant.FilterRounded,
+      size: variantKeys.style.Large,
+      selected: true,
+      className: [
+        typographyConfig.variants.variant[
+          'Body/Supporting text (caption)/smRegular'
+        ],
+        styles.selected,
+        styles.large,
+      ],
+    },
+    {
+      variant: variantKeys.variant.FilterRounded,
+      size: variantKeys.style.Large,
+      selected: false,
+      className: [
+        typographyConfig.variants.variant[
+          'Body/Supporting text (caption)/smRegular'
+        ],
+        styles.large,
+      ],
+    },
+  ],
   defaultVariants: {
-    variant: 'Default',
+    variant: variantKeys.variant.Default,
   },
-} as const
+}
 
 export const variants = cva(styles.chip, config)
 
 const chipConfig = {
   variants: {
-    typography: config.variants.variant,
+    ...config.variants,
   },
   defaultVariants: config.defaultVariants,
 } as const