nits card

Author: nerderlyne

components/src/components/Card/Card.tsx

@@ -8,33 +8,36 @@ type Props = {
   as?: BoxProps['as']
   shadow?: boolean
   hover?: boolean
-  level?: '1' | '2'
   borderRadius?: BoxProps['borderRadius']
   padding?: BoxProps['padding']
   width?: BoxProps['width']
+  backgroundColor?: BoxProps['backgroundColor']
+  color?: BoxProps['color']
 }
 
 export const Card = ({
   as = 'div',
   children,
   padding,
   shadow,
-  level = '1',
   hover,
   borderRadius = { xs: '2xLarge', sm: '3xLarge' },
   width,
+  backgroundColor = 'background',
+  color = 'foreground',
 }: React.PropsWithChildren<Props>) => {
   const { mode, forcedMode } = useTheme()
   return (
     <Box
       as={as}
+      backgroundColor={backgroundColor}
       borderRadius={borderRadius}
       className={styles.variants({
         dark: (forcedMode ?? mode) === 'dark',
-        level,
         shadow,
         hover,
       })}
+      color={color}
       padding={padding}
       width={width}
     >

components/src/components/Card/styles.css.ts

@@ -14,7 +14,7 @@ export const variants = recipe({
           transitionTimingFunction: 'inOut',
         }),
         style({
-          transitionDuration: '150ms',
+          transitionDuration: '125ms',
           selectors: {
             '&:hover': {
               boxShadow: `${vars.shadows['1']} ${vars.colors['foregroundTertiary']}`,
@@ -27,12 +27,6 @@ export const variants = recipe({
       ]),
       false: {},
     },
-    level: {
-      '1': {},
-      '2': atoms({
-        backgroundColor: 'background',
-      }),
-    },
     dark: {
       true: {},
       false: {},
@@ -46,20 +40,10 @@ export const variants = recipe({
     {
       variants: {
         dark: true,
-        level: '1',
       },
-      style: atoms({
-        backgroundColor: 'black',
-      }),
-    },
-    {
-      variants: {
-        dark: false,
-        level: '1',
+      style: {
+        border: `1px solid ${vars.colors.foregroundSecondary}`,
       },
-      style: atoms({
-        backgroundColor: 'white',
-      }),
     },
     {
       variants: {

components/src/tokens/color.ts

@@ -39,17 +39,17 @@ export const colors = {
   },
   light: {
     background: '255, 255, 255',
-    backgroundSecondary: '247, 247, 247',
+    backgroundSecondary: '250, 250, 250',
     backgroundTertiary: '247, 247, 247',
     foreground: '0, 0, 0',
     groupBackground: '255, 255, 255',
     groupBorder: '0, 0, 0',
     ...accents.light,
   },
   dark: {
-    background: '0, 0, 0',
+    background: '5, 5, 5',
     backgroundSecondary: '10, 10, 10',
-    backgroundTertiary: '20, 20, 20',
+    backgroundTertiary: '15, 15, 15',
     foreground: '255, 255, 255',
     groupBackground: '10, 10, 10',
     groupBorder: '255, 255, 255',