Refactor/card component

[jrgarciadev]

Closes #174 #301

📝 Description

• Card refactor and integration with usePress and useHover hooks.
• Theme shadows have been improved and are now more consistent, a new key for drop shadows was added.
• Theme font sizes have been improved and are now more consistent.
• Theme line heights have been improved and are now more consistent.
• Docs components and core compoennts have been updated in order to fit the new font sizes and shadows

🚀 New behavior

Utilities added to the Stitches CSS library:

+ ds: (value) => ({
+   dropShadow: value
+ }),
+ shadow: (value) => ({
+   boxShadow: value
+ }),
+ dshadow: (value) => ({
+   dropShadow: value
+ }),
+ dropShadow: (value) => ({
+   filter: `$dropShadows${value}`
+ }),

New theme key -> dropShadows (to use along with css dropShadow utility)

Light Theme:

  dropShadows: {
+    xs: 'drop-shadow(0 2px 4px rgb(104 112 118 / 0.07)) drop-shadow(0 1px 1px rgb(104 112 118 / 0.04))',
+    sm: 'drop-shadow(0 2px 8px rgb(104 112 118 / 0.07)) drop-shadow(0 2px 4px rgb(104 112 118 / 0.04))',
+    md: 'drop-shadow(0 4px 12px rgb(104 112 118 / 0.08)) drop-shadow(0 20px 8px rgb(104 112 118 / 0.04))',
+    lg: 'drop-shadow(0 12px 24px rgb(104 112 118 / 0.15)) drop-shadow(0 12px 14px rgb(104 112 118 / 0.1))',
+    xl: 'drop-shadow(0 25px 34px rgb(104 112 118 / 0.35))'
  }

Dark Theme:

  dropShadows: {
+    xs: 'drop-shadow(0 2px 4px rgb(0 0 0 / 0.07)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.04))',
+    sm: 'drop-shadow(0 2px 8px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.04))',
+    md: 'drop-shadow(0 4px 12px rgb(0 0 0 / 0.08)) drop-shadow(0 20px 8px rgb(0 0 0 / 0.04))',
+    lg: 'drop-shadow(0 12px 24px rgb(0 0 0 / 0.15)) drop-shadow(0 12px 14px rgb(0 0 0 / 0.1))',
+    xl: 'drop-shadow(0 25px 34px rgb(0 0 0 / 0.35))'
  }

Usage example:

<Button
  css={{
    dropShadow: "$lg",
  }}
/>

💣 Is this a breaking change (Yes/No): Yes

Card APIs breaking changes

• bordered prop has been removed, use variant="bordered" instead.
• shadow prop has been removed, use variant="shadow" instead.
• cover prop has been removed, use objectFit="cover" image prop instead.

Old APIs	New APIs
clickable	isPressable
hoverable	isHoverable
animated	disableAnimation

Card.Footer APIs breaking changes

Old APIs	New APIs
blur	isBlurred

Card Implementation difference:
NextUI is no longer automatically wrapping the children in a Card.Body component (since it causes a lot of issues), it means that you have to do it yourself.

    <Card css={{ mw: "400px" }}>
+     <Card.Body>
        <Text>A basic card</Text>
+     </Card.Body>
    </Card>

Theme breaking changes

Font sizes breaking changes

  fontSizes: {
-   tiny: '.75rem',
-   xs: '0.875rem',
-   base: '1rem',
-   sm: '1.25rem',
-   md: '1.5rem',
-   lg: '2.25rem',
-   xl: '3rem'

+   xs: '0.75rem', /* 12px */
+   sm: '0.875rem', /* 14px */
+   base: '1rem', /* 16px */
+   md: '1rem', /* 16px */
+   lg: '1.125rem', /* 18px */
+   xl: '1.25rem', /* 20px */
+   xl2: '1.5rem', /* 24px */
+   xl3: '1.875rem', /* 30px */
+   xl4: '2.25rem', /* 36px */
+   xl5: '3rem', /* 48px */
+   xl6: '3.75rem', /* 60px */
+   xl7: '4.5rem', /* 72px */
+   xl8: '6rem', /* 96px */
+   xl9: '8rem', /* 128px */
  }

Line heights breaking changes

  lineHeights: {
-   xs: 1,
-   sm: 1.25,
-   md: 1.5,
-   lg: 1.625,
-   xl: 1.75

+   xs: 1, /* 16px */
+   sm: 1.25, /* 20px */
+   base: 1.5, /* 24px */
+   md: 1.5, /* 24px */
+   lg: 1.75, /* 28px */
+   xl: 1.75, /* 28px */
+   xl2: 2, /* 32px */
+   xl3: 2.25, /* 36px */
+   xl4: 2.5, /* 40px */
+   xl5: 1,
+   xl6: 1,
+   xl7: 1,
+   xl8: 1,
+   xl9: 1
  }

Shadows breaking changes

Light Theme:

  shadows: {
-   xs: '-4px 0 4px rgb(0 0 0 / 5%);',
-   sm: '0 5px 20px -5px rgba(0, 0, 0, 0.1)',
-   md: '0 8px 30px rgba(0, 0, 0, 0.15)',
-   lg: '0 30px 60px rgba(0, 0, 0, 0.15)',
-   xl: '0 40px 80px rgba(0, 0, 0, 0.25)'

+   xs: '0 2px 8px 1px rgb(104 112 118 / 0.07), 0 1px 1px -1px rgb(104 112 118 / 0.04)',
+   sm: '0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)',
+   md: '0 12px 20px 6px rgb(104 112 118 / 0.08)',
+   lg: '0 12px 34px 6px rgb(104 112 118 / 0.18)',
+   xl: '0 25px 65px 0px rgb(104 112 118 / 0.35)'
  }

Dark Theme:

  shadows: {
-   xs: '-4px 0 15px rgb(0 0 0 / 50%)',
-   sm: '0 5px 20px -5px rgba(20, 20, 20, 0.1)',
-   md: '0 8px 30px rgba(20, 20, 20, 0.15)',
-   lg: '0 30px 60px rgba(20, 20, 20, 0.15)',
-   xl: '0 40px 80px rgba(20, 20, 20, 0.25)'

+   xs: '0 2px 8px 1px rgb(0 0 0 / 0.07), 0 1px 1px -1px rgb(0 0 0 / 0.04)',
+   sm: '0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)',
+   md: '0 12px 20px 6px rgb(0 0 0 / 0.08)',
+   lg: '0 12px 34px 6px rgb(0 0 0 / 0.18)',
+   xl: '0 25px 65px 0px rgb(0 0 0 / 0.35)'
  }

📝 Additional Information