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