Refactor folder structure and Modify tokens (#151)

* Refactor folder structure * Modify text-style tokens * Add tokens for shadows
yorkie-team · Aug 14, 2024 · aa648f2 · aa648f2
1 parent d144eab
commit aa648f2
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 48 deletions.
diff --git a/packages/core/panda/theme/recipes/button.tsx → packages/core/panda/theme/recipes/button.ts b/packages/core/panda/theme/recipes/button.tsx → 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
@@ -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
@@ -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
@@ -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
@@ -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 → ...ges/core/src/components/button/Button.tsx b/packages/core/src/button/Button.tsx → ...ges/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 → packages/core/src/components/button/index.ts b/packages/core/src/button/index.ts → packages/core/src/components/button/index.ts
diff --git a/packages/core/src/flex/Flex.tsx → packages/core/src/components/flex/Flex.tsx b/packages/core/src/flex/Flex.tsx → 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 → packages/core/src/components/flex/index.ts b/packages/core/src/flex/index.ts → packages/core/src/components/flex/index.ts
diff --git a/packages/core/src/components/index.ts 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
@@ -1,2 +1 @@
-export * from './button';
-export * from './flex';
+export * from './components';