From aa648f292975e388974b55d3d03a68fa567dad8c Mon Sep 17 00:00:00 2001 From: Yourim Cha <81357083+chacha912@users.noreply.github.com> Date: Wed, 14 Aug 2024 13:29:59 +0900 Subject: [PATCH] Refactor folder structure and Modify tokens (#151) * Refactor folder structure * Modify text-style tokens * Add tokens for shadows --- .../theme/recipes/{button.tsx => button.ts} | 6 ++--- .../panda/theme/semantic-tokens/shadows.ts | 27 ++++++++++++++++++- packages/core/panda/theme/text-styles.ts | 25 +++++++++-------- packages/core/panda/theme/tokens/sizes.ts | 14 +++------- .../core/panda/theme/tokens/typography.ts | 18 ++++--------- .../src/{ => components}/button/Button.tsx | 6 ++--- .../core/src/{ => components}/button/index.ts | 0 .../core/src/{ => components}/flex/Flex.tsx | 4 +-- .../core/src/{ => components}/flex/index.ts | 0 packages/core/src/components/index.ts | 2 ++ packages/core/src/index.ts | 3 +-- 11 files changed, 57 insertions(+), 48 deletions(-) rename packages/core/panda/theme/recipes/{button.tsx => button.ts} (99%) rename packages/core/src/{ => components}/button/Button.tsx (72%) rename packages/core/src/{ => components}/button/index.ts (100%) rename packages/core/src/{ => components}/flex/Flex.tsx (75%) rename packages/core/src/{ => components}/flex/index.ts (100%) create mode 100644 packages/core/src/components/index.ts diff --git a/packages/core/panda/theme/recipes/button.tsx b/packages/core/panda/theme/recipes/button.ts similarity index 99% rename from packages/core/panda/theme/recipes/button.tsx rename to packages/core/panda/theme/recipes/button.ts index 56861b8..d5a7272 100644 --- a/packages/core/panda/theme/recipes/button.tsx +++ b/packages/core/panda/theme/recipes/button.ts @@ -99,7 +99,7 @@ export const button = defineRecipe({ }, size: { sm: { - textStyle: 'xs', + textStyle: 'sm', px: '300', py: '150', minHeight: '800', @@ -109,7 +109,7 @@ export const button = defineRecipe({ }, }, md: { - textStyle: 'sm', + textStyle: 'md', px: '400', py: '200', minHeight: '1000', @@ -119,7 +119,7 @@ export const button = defineRecipe({ }, }, lg: { - textStyle: 'md', + textStyle: 'lg', fontWeight: 'semibold', px: '600', py: '300', diff --git a/packages/core/panda/theme/semantic-tokens/shadows.ts b/packages/core/panda/theme/semantic-tokens/shadows.ts index 6ad2823..03a34e1 100644 --- a/packages/core/panda/theme/semantic-tokens/shadows.ts +++ b/packages/core/panda/theme/semantic-tokens/shadows.ts @@ -1,3 +1,28 @@ import { defineSemanticTokens } from '@pandacss/dev'; -export const shadows = defineSemanticTokens.shadows({}); +export const shadows = defineSemanticTokens.shadows({ + xs: { + value: { + base: '0px 8px 4px -8px rgba(0, 0, 0, 0.20)', + _dark: '0px 8px 4px -8px rgba(255, 255, 255, 0.20)', + }, + }, + sm: { + value: { + base: '0px 8px 8px -8px rgba(0, 0, 0, 0.20)', + _dark: '0px 8px 8px -8px rgba(255, 255, 255, 0.20)', + }, + }, + md: { + value: { + base: '0px 8px 16px -8px rgba(0, 0, 0, 0.20)', + _dark: '0px 8px 16px -8px rgba(255, 255, 255, 0.20)', + }, + }, + lg: { + value: { + base: '0px 20px 24px -12px rgba(0, 0, 0, 0.20)', + _dark: '0px 20px 24px -12px rgba(255, 255, 255, 0.20)', + }, + }, +}); diff --git a/packages/core/panda/theme/text-styles.ts b/packages/core/panda/theme/text-styles.ts index e65da70..8357733 100644 --- a/packages/core/panda/theme/text-styles.ts +++ b/packages/core/panda/theme/text-styles.ts @@ -1,15 +1,14 @@ -import { defineTextStyles } from '@pandacss/dev' +import { defineTextStyles } from '@pandacss/dev'; export const textStyles = defineTextStyles({ - xs: { value: { fontSize: 'xs', lineHeight: '1.125rem' } }, - sm: { value: { fontSize: 'sm', lineHeight: '1.25rem' } }, - md: { value: { fontSize: 'md', lineHeight: '1.5rem' } }, - lg: { value: { fontSize: 'lg', lineHeight: '1.75rem' } }, - xl: { value: { fontSize: 'xl', lineHeight: '1.875rem' } }, - '2xl': { value: { fontSize: '2xl', lineHeight: '2rem' } }, - '3xl': { value: { fontSize: '3xl', lineHeight: '2.375rem' } }, - '4xl': { value: { fontSize: '4xl', lineHeight: '2.75rem', letterSpacing: '-0.02em' } }, - '5xl': { value: { fontSize: '5xl', lineHeight: '3.75rem', letterSpacing: '-0.02em' } }, - '6xl': { value: { fontSize: '6xl', lineHeight: '4.5rem', letterSpacing: '-0.02em' } }, - '7xl': { value: { fontSize: '7xl', lineHeight: '5.75rem', letterSpacing: '-0.02em' } }, -}) + xs: { value: { fontSize: 'xs', lineHeight: '10px' } }, + sm: { value: { fontSize: 'sm', lineHeight: '16px' } }, + md: { value: { fontSize: 'md', lineHeight: '22px' } }, + lg: { value: { fontSize: 'lg', lineHeight: '24px' } }, + xl: { value: { fontSize: 'xl', lineHeight: '30px' } }, + '2xl': { value: { fontSize: '2xl', lineHeight: '32px' } }, + '3xl': { value: { fontSize: '3xl', lineHeight: '38px' } }, + '4xl': { value: { fontSize: '4xl', lineHeight: '44px' } }, + '5xl': { value: { fontSize: '5xl', lineHeight: '60px' } }, + '6xl': { value: { fontSize: '6xl', lineHeight: '72px' } }, +}); diff --git a/packages/core/panda/theme/tokens/sizes.ts b/packages/core/panda/theme/tokens/sizes.ts index 9686717..dfcbd17 100644 --- a/packages/core/panda/theme/tokens/sizes.ts +++ b/packages/core/panda/theme/tokens/sizes.ts @@ -1,20 +1,12 @@ -import { spacing } from './spacing' +import { spacing } from './spacing'; const largeSizes = { - '2xs': { value: '16rem' }, xs: { value: '20rem' }, sm: { value: '24rem' }, md: { value: '28rem' }, lg: { value: '32rem' }, xl: { value: '36rem' }, - '2xl': { value: '42rem' }, - '3xl': { value: '48rem' }, - '4xl': { value: '56rem' }, - '5xl': { value: '64rem' }, - '6xl': { value: '72rem' }, - '7xl': { value: '80rem' }, - '8xl': { value: '90rem' }, -} +}; export const sizes = { ...spacing, @@ -23,4 +15,4 @@ export const sizes = { min: { value: 'min-content' }, max: { value: 'max-content' }, fit: { value: 'fit-content' }, -} +}; diff --git a/packages/core/panda/theme/tokens/typography.ts b/packages/core/panda/theme/tokens/typography.ts index 79fae9f..90a6563 100644 --- a/packages/core/panda/theme/tokens/typography.ts +++ b/packages/core/panda/theme/tokens/typography.ts @@ -1,32 +1,24 @@ import type { Tokens } from '@pandacss/dev'; export const fontSizes: Tokens['fontSizes'] = { - '2xs': { value: '8px', description: '0.5rem' }, - xs: { value: '12px', description: '0.75rem' }, - sm: { value: '14px', description: '0.875rem' }, - md: { value: '16px', description: '1rem' }, - lg: { value: '18px', description: '1.125rem' }, + xs: { value: '10px', description: '0.625rem' }, + sm: { value: '12px', description: '0.75rem' }, + md: { value: '14px', description: '0.875rem' }, + lg: { value: '16px', description: '1rem' }, xl: { value: '20px', description: '1.25rem' }, '2xl': { value: '24px', description: '1.5rem' }, '3xl': { value: '30px', description: '1.875rem' }, '4xl': { value: '36px', description: '2.25rem' }, '5xl': { value: '48px', description: '3rem' }, '6xl': { value: '60px', description: '3.75rem' }, - '7xl': { value: '72px', description: '4.5rem' }, - '8xl': { value: '96px', description: '6rem' }, - '9xl': { value: '128px', description: '8rem' }, }; export const fontWeights: Tokens['fontWeights'] = { - thin: { value: '100' }, - extralight: { value: '200' }, light: { value: '300' }, - normal: { value: '400' }, + regular: { value: '400' }, medium: { value: '500' }, semibold: { value: '600' }, - bold: { value: '700' }, extrabold: { value: '800' }, - black: { value: '900' }, }; export const letterSpacings: Tokens['letterSpacings'] = { diff --git a/packages/core/src/button/Button.tsx b/packages/core/src/components/button/Button.tsx similarity index 72% rename from packages/core/src/button/Button.tsx rename to packages/core/src/components/button/Button.tsx index 8d1130b..a4e166c 100644 --- a/packages/core/src/button/Button.tsx +++ b/packages/core/src/components/button/Button.tsx @@ -1,7 +1,7 @@ import { ark } from '@ark-ui/react'; -import { button } from '../../styled-system/recipes'; -import { styled } from '../../styled-system/jsx'; -import type { ComponentProps } from '../../styled-system/types'; +import { button } from '../../../styled-system/recipes'; +import { styled } from '../../../styled-system/jsx'; +import type { ComponentProps } from '../../../styled-system/types'; import { forwardRef } from 'react'; diff --git a/packages/core/src/button/index.ts b/packages/core/src/components/button/index.ts similarity index 100% rename from packages/core/src/button/index.ts rename to packages/core/src/components/button/index.ts diff --git a/packages/core/src/flex/Flex.tsx b/packages/core/src/components/flex/Flex.tsx similarity index 75% rename from packages/core/src/flex/Flex.tsx rename to packages/core/src/components/flex/Flex.tsx index 255bdbf..b6be270 100644 --- a/packages/core/src/flex/Flex.tsx +++ b/packages/core/src/components/flex/Flex.tsx @@ -1,6 +1,6 @@ import { forwardRef } from 'react'; -import { styled, type HTMLStyledProps } from '../../styled-system/jsx'; -import { flex, FlexProperties } from '../../styled-system/patterns'; +import { styled, type HTMLStyledProps } from '../../../styled-system/jsx'; +import { flex, FlexProperties } from '../../../styled-system/patterns'; export type FlexProps = HTMLStyledProps<'div'> & FlexProperties; diff --git a/packages/core/src/flex/index.ts b/packages/core/src/components/flex/index.ts similarity index 100% rename from packages/core/src/flex/index.ts rename to packages/core/src/components/flex/index.ts diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts new file mode 100644 index 0000000..7ef61cc --- /dev/null +++ b/packages/core/src/components/index.ts @@ -0,0 +1,2 @@ +export * from './button'; +export * from './flex'; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 7ef61cc..07635cb 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,2 +1 @@ -export * from './button'; -export * from './flex'; +export * from './components';