feat(paper): move elevated Card to dedicated Paper component

snowball-tech · Aug 22, 2023 · c20d2c9 · c20d2c9
1 parent 2f1f88f
commit c20d2c9
Show file tree

Hide file tree

Showing 20 changed files with 328 additions and 844 deletions.
diff --git a/packages/design-tokens/tokens/card.js b/packages/design-tokens/tokens/card.js
@@ -37,11 +37,6 @@ module.exports = {
 
           value: '{color.feedback.warning.90.value}',
         },
-        white: {
-          comment: 'Background color for white card.',
-
-          value: '{color.base.white.value}',
-        },
         yellow: {
           comment: 'Background color for yellow card.',
 
@@ -87,11 +82,6 @@ module.exports = {
 
           value: '{color.feedback.warning.50.value}',
         },
-        white: {
-          comment: 'Icon color for white card.',
-
-          value: '{color.text.dark.value}',
-        },
         yellow: {
           comment: 'Icon color for yellow card.',
 
@@ -144,11 +134,6 @@ module.exports = {
 
             value: '{color.text.dark.value}',
           },
-          white: {
-            comment: 'Text color for white card.',
-
-            value: '{color.text.dark.value}',
-          },
           yellow: {
             comment: 'Text color for yellow card.',
 

diff --git a/packages/design-tokens/tokens/paper.js b/packages/design-tokens/tokens/paper.js
@@ -0,0 +1,39 @@
+module.exports = {
+  color: {
+    background: {
+      paper: {
+        comment: 'Background color for paper.',
+
+        value: '{color.base.white.value}',
+      },
+    },
+
+    text: {
+      paper: {
+        body: {
+          comment: 'Text color for the body of any paper.',
+
+          value: '{color.text.dark.value}',
+        },
+      },
+    },
+  },
+
+  size: {
+    paper: {
+      padding: {
+        horizontal: {
+          comment: 'Horizontal padding for any paper.',
+
+          value: '{size.spacing.2.value}',
+        },
+
+        vertical: {
+          comment: 'Vertical padding for any paper.',
+
+          value: '{size.spacing.2.value}',
+        },
+      },
+    },
+  },
+}
diff --git a/packages/fractal/fractal-panda.preset.ts b/packages/fractal/fractal-panda.preset.ts
@@ -22,6 +22,7 @@ import * as InputRadioRecipes from '@/components/InputRadio/InputRadio.recipe'
 import * as InputTextRecipes from '@/components/InputText/InputText.recipe'
 import * as LoaderRecipes from '@/components/Loader/Loader.recipe'
 import * as LogoRecipes from '@/components/Logo/Logo.recipe'
+import * as PaperRecipes from '@/components/Paper/Paper.recipe'
 import * as ProgressRecipes from '@/components/Progress/Progress.recipe'
 import * as SelectRecipes from '@/components/Select/Select.recipe'
 import * as StepperRecipes from '@/components/Stepper/Stepper.recipe'
@@ -47,6 +48,7 @@ const GROUPS = {
   inputText: `${PREFIX}-${InputTextRecipes.GROUP_NAME}`,
   loader: `${PREFIX}-${LoaderRecipes.GROUP_NAME}`,
   logo: `${PREFIX}-${LogoRecipes.GROUP_NAME}`,
+  paper: `${PREFIX}-${PaperRecipes.GROUP_NAME}`,
   progress: `${PREFIX}-${ProgressRecipes.GROUP_NAME}`,
   select: `${PREFIX}-${SelectRecipes.GROUP_NAME}`,
   selectTrigger: `${PREFIX}-${SelectRecipes.GROUP_NAME}-trigger`,
@@ -112,6 +114,9 @@ const fractalPreset = definePreset({
         cardTitle: CardRecipes.cardTitle,
         cardIcon: CardRecipes.cardIcon,
 
+        paper: PaperRecipes.paper,
+        paperContent: PaperRecipes.paperContent,
+
         header: HeaderRecipes.header,
         headerLeft: HeaderRecipes.headerLeft,
         headerMiddle: HeaderRecipes.headerMiddle,

diff --git a/packages/fractal/src/components/Card/BorderedCard.stories.tsx b/packages/fractal/src/components/Card/BorderedCard.stories.tsx
diff --git a/packages/fractal/src/components/Card/Card.constants.ts b/packages/fractal/src/components/Card/Card.constants.ts
@@ -6,19 +6,7 @@ export enum Colors {
   Purple = 'purple',
   Success = 'success',
   Warning = 'warning',
-  White = 'white',
   Yellow = 'yellow',
 }
 
 export const DEFAULT_COLOR = Colors.Pink
-
-export enum Elevations {
-  /* eslint-disable perfectionist/sort-enums */
-  Flat = '0',
-  Bordered = '1',
-  Low = '2',
-  High = '3',
-  /* eslint-enable perfectionist/sort-enums */
-}
-
-export const DEFAULT_ELEVATION = Elevations.Flat
diff --git a/packages/fractal/src/components/Card/Card.recipe.ts b/packages/fractal/src/components/Card/Card.recipe.ts
@@ -1,12 +1,7 @@
 import { defineRecipe } from '@pandacss/dev'
 import type { SystemStyleObject } from '@snowball-tech/fractal-panda/types'
 
-import {
-  Colors,
-  DEFAULT_COLOR,
-  DEFAULT_ELEVATION,
-  Elevations,
-} from './Card.constants'
+import { Colors, DEFAULT_COLOR } from './Card.constants'
 
 export const GROUP_NAME = 'card'
 
@@ -29,7 +24,6 @@ export const card: ReturnType<typeof defineRecipe> = defineRecipe({
 
   defaultVariants: {
     color: DEFAULT_COLOR,
-    elevation: DEFAULT_ELEVATION,
   },
 
   variants: {
@@ -43,30 +37,6 @@ export const card: ReturnType<typeof defineRecipe> = defineRecipe({
       }),
       {} as Record<Colors, SystemStyleObject>,
     ),
-
-    elevation: {
-      [Elevations.Flat]: {
-        border: 'var(--border-none)',
-        boxShadow: 'var(--shadow-none)',
-      },
-      // eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects
-      [Elevations.Bordered]: {
-        border: 'var(--border-1)',
-        borderRadius: 'var(--size-radius-s)',
-        boxShadow: 'var(--shadow-none)',
-      },
-      [Elevations.Low]: {
-        border: 'var(--border-1)',
-        borderRadius: 'var(--size-radius-s)',
-        boxShadow: 'var(--shadow-brutal-1)',
-      },
-      // eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects
-      [Elevations.High]: {
-        border: 'var(--border-2)',
-        borderRadius: 'var(--size-radius-s)',
-        boxShadow: 'var(--shadow-brutal-2)',
-      },
-    },
   },
 
   // eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects