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';