update sequence card styles

src/app/components/scroll-top-container/style.css.ts

@@ -15,6 +15,6 @@ export const ScrollTopContainer = style({
   top: config.space.S200,
   left: '50%',
   transform: 'translateX(-50%)',
-  zIndex: 1,
+  zIndex: config.zIndex.Z100,
   animation: `${ScrollContainerAnime} 100ms`,
 });

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

@@ -1,19 +1,16 @@
 import React, { ComponentProps } from 'react';
 import { Box, as } from 'folds';
 import classNames from 'classnames';
-import { ContainerColor } from '../../styles/ContainerColor.css';
+import { ContainerColor, ContainerColorVariants } from '../../styles/ContainerColor.css';
 import * as css from './style.css';
 
-export const SequenceCard = as<'div', ComponentProps<typeof Box>>(
-  ({ className, ...props }, ref) => (
-    <Box
-      className={classNames(
-        css.SequenceCard,
-        ContainerColor({ variant: 'SurfaceVariant' }),
-        className
-      )}
-      {...props}
-      ref={ref}
-    />
-  )
-);
+export const SequenceCard = as<
+  'div',
+  ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
+>(({ className, variant, outlined, ...props }, ref) => (
+  <Box
+    className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
+    {...props}
+    ref={ref}
+  />
+));

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

@@ -1,15 +1,32 @@
-import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
+import { createVar } from '@vanilla-extract/css';
+import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
+import { color, config } from 'folds';
 
-export const SequenceCard = style({
-  selectors: {
-    '&:first-child': {
-      borderTopLeftRadius: config.radii.R400,
-      borderTopRightRadius: config.radii.R400,
+const outlinedWidth = createVar('0');
+export const SequenceCard = recipe({
+  base: {
+    border: `${outlinedWidth} solid ${color.Surface.ContainerLine}`,
+    borderBottomWidth: 0,
+    selectors: {
+      '&:first-child': {
+        borderTopLeftRadius: config.radii.R400,
+        borderTopRightRadius: config.radii.R400,
+      },
+      '&:last-child': {
+        borderBottomLeftRadius: config.radii.R400,
+        borderBottomRightRadius: config.radii.R400,
+        borderBottomWidth: outlinedWidth,
+      },
     },
-    '&:last-child': {
-      borderBottomLeftRadius: config.radii.R400,
-      borderBottomRightRadius: config.radii.R400,
+  },
+  variants: {
+    outlined: {
+      true: {
+        vars: {
+          [outlinedWidth]: config.borderWidth.B300,
+        },
+      },
     },
   },
 });
+export type SequenceCardVariants = RecipeVariants<typeof SequenceCard>;