add radii variant to sequence card component

src/app/components/sequence-card/SequenceCard.tsx

@@ -9,12 +9,25 @@ export const SequenceCard = as<
   ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
 >(
   (
-    { as: AsSequenceCard = 'div', className, variant, firstChild, lastChild, outlined, ...props },
+    {
+      as: AsSequenceCard = 'div',
+      className,
+      variant,
+      radii,
+      firstChild,
+      lastChild,
+      outlined,
+      ...props
+    },
     ref
   ) => (
     <Box
       as={AsSequenceCard}
-      className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
+      className={classNames(
+        css.SequenceCard({ radii, outlined }),
+        ContainerColor({ variant }),
+        className
+      )}
       data-first-child={firstChild}
       data-last-child={lastChild}
       {...props}

src/app/components/sequence-card/style.css.ts

@@ -3,6 +3,7 @@ import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
 import { config } from 'folds';
 
 const outlinedWidth = createVar('0');
+const radii = createVar(config.radii.R400);
 export const SequenceCard = recipe({
   base: {
     vars: {
@@ -13,25 +14,25 @@ export const SequenceCard = recipe({
     borderBottomWidth: 0,
     selectors: {
       '&:first-child, :not(&) + &': {
-        borderTopLeftRadius: config.radii.R400,
+        borderTopLeftRadius: [radii],
-        borderTopRightRadius: config.radii.R400,
+        borderTopRightRadius: [radii],
       },
       '&:last-child, &:not(:has(+&))': {
-        borderBottomLeftRadius: config.radii.R400,
+        borderBottomLeftRadius: [radii],
-        borderBottomRightRadius: config.radii.R400,
+        borderBottomRightRadius: [radii],
         borderBottomWidth: outlinedWidth,
       },
       [`&[data-first-child="true"]`]: {
-        borderTopLeftRadius: config.radii.R400,
+        borderTopLeftRadius: [radii],
-        borderTopRightRadius: config.radii.R400,
+        borderTopRightRadius: [radii],
       },
       [`&[data-first-child="false"]`]: {
         borderTopLeftRadius: 0,
         borderTopRightRadius: 0,
       },
       [`&[data-last-child="true"]`]: {
-        borderBottomLeftRadius: config.radii.R400,
+        borderBottomLeftRadius: [radii],
-        borderBottomRightRadius: config.radii.R400,
+        borderBottomRightRadius: [radii],
       },
       [`&[data-last-child="false"]`]: {
         borderBottomLeftRadius: 0,
@@ -44,6 +45,28 @@ export const SequenceCard = recipe({
     },
   },
   variants: {
+    radii: {
+      '0': {
+        vars: {
+          [radii]: config.radii.R0,
+        },
+      },
+      '300': {
+        vars: {
+          [radii]: config.radii.R300,
+        },
+      },
+      '400': {
+        vars: {
+          [radii]: config.radii.R400,
+        },
+      },
+      '500': {
+        vars: {
+          [radii]: config.radii.R500,
+        },
+      },
+    },
     outlined: {
       true: {
         vars: {
@@ -52,5 +75,8 @@ export const SequenceCard = recipe({
       },
     },
   },
+  defaultVariants: {
+    radii: '400',
+  },
 });
 export type SequenceCardVariants = RecipeVariants<typeof SequenceCard>;