foundations 네이밍 규칙 변경했다

cobaltinc · Nov 28, 2023 · 8f71a5a · 8f71a5a
1 parent a1fcb83
commit 8f71a5a
Show file tree

Hide file tree

Showing 35 changed files with 443 additions and 510 deletions.
diff --git a/packages/co-design-core/src/components/Avatar/Avatar.style.ts b/packages/co-design-core/src/components/Avatar/Avatar.style.ts
@@ -39,7 +39,7 @@ export default createStyles((theme, { size, shape, color }: AvatarStyles) => {
 
     placeholder: {
       color,
-      backgroundColor: theme.foundations.tokens.color.specialty['avatar-bg'],
+      backgroundColor: theme.foundations.tokens.color.specialty.avatar_bg,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',

diff --git a/packages/co-design-core/src/components/Avatar/Avatar.tsx b/packages/co-design-core/src/components/Avatar/Avatar.tsx
@@ -34,7 +34,7 @@ export const Avatar: AvatarComponent & { displayName?: string } = forwardRef(
     ref: PolymorphicRef<C>,
   ) => {
     const theme = useCoTheme();
-    const _color = color || theme.foundations.tokens.color.icon['icon-default'];
+    const _color = color || theme.foundations.tokens.color.icon.icon_default;
     const { classes, cx } = useStyles({ color: _color, shape, size }, { overrideStyles, name: 'Avatar' });
     const [error, setError] = useState(!src);
 
@@ -60,7 +60,7 @@ export const Avatar: AvatarComponent & { displayName?: string } = forwardRef(
         ) : children ? (
           <div className={classes.placeholder} title={alt}>
             {typeof children === 'string' ? (
-              <Typography variant="heading-06" color="text-light">
+              <Typography variant="heading_06" color="text_light">
                 {sliceChildren}
               </Typography>
             ) : (

diff --git a/packages/co-design-core/src/components/Avatar/AvatarGroup.style.ts b/packages/co-design-core/src/components/Avatar/AvatarGroup.style.ts
@@ -22,7 +22,7 @@ export default createStyles((theme, { spacing }: AvatarsGroupStyles) => {
       ...defaultFontStyles(theme),
       width: '100%',
       height: '100%',
-      backgroundColor: theme.foundations.tokens.color.specialty['avatar-bg'],
+      backgroundColor: theme.foundations.tokens.color.specialty.avatar_bg,
     },
   };
 });
diff --git a/packages/co-design-core/src/components/Avatar/stories/Avatar.stories.tsx b/packages/co-design-core/src/components/Avatar/stories/Avatar.stories.tsx
@@ -76,7 +76,7 @@ export const AvatarIconBadge = {
           placeDistanceY={0}
           overrideStyles={{
             badge: {
-              backgroundColor: theme.foundations.tokens.color.bg['bg-primary'],
+              backgroundColor: theme.foundations.tokens.color.bg.bg_primary,
             },
           }}
         >

diff --git a/packages/co-design-core/src/components/Badge/Badge.style.ts b/packages/co-design-core/src/components/Badge/Badge.style.ts
@@ -13,14 +13,14 @@ interface BadgeStyles {
 export default createStyles((theme, { size, contentLength, dot, placement, placeDistance, placeDistanceX, placeDistanceY }: BadgeStyles) => {
   const sizes = dot
     ? {
-        small: theme.foundations.tokens.size['size-03'],
-        medium: theme.foundations.tokens.size['size-04'],
-        large: theme.foundations.tokens.size['size-05'],
+        small: theme.foundations.tokens.size.size_03,
+        medium: theme.foundations.tokens.size.size_04,
+        large: theme.foundations.tokens.size.size_05,
       }
     : {
-        small: theme.foundations.tokens.size['size-07'],
-        medium: theme.foundations.tokens.size['size-08'],
-        large: theme.foundations.tokens.size['size-09'],
+        small: theme.foundations.tokens.size.size_07,
+        medium: theme.foundations.tokens.size.size_08,
+        large: theme.foundations.tokens.size.size_09,
       };
 
   return {
@@ -34,10 +34,10 @@ export default createStyles((theme, { size, contentLength, dot, placement, place
       ...getPosition(placement, placeDistance, placeDistanceX, placeDistanceY),
       width: theme.fn.size({ size, sizes }) + (contentLength - 1) * 16,
       height: theme.fn.size({ size, sizes }),
-      border: `1px solid ${theme.foundations.tokens.color.border['border-light']}`,
-      borderRadius: theme.foundations.tokens.radius['radius-full'],
-      backgroundColor: theme.foundations.tokens.color.bg['bg-critical'],
-      padding: theme.foundations.tokens.size['size-02'],
+      border: `1px solid ${theme.foundations.tokens.color.border.border_light}`,
+      borderRadius: theme.foundations.tokens.radius.radius_full,
+      backgroundColor: theme.foundations.tokens.color.bg.bg_critical,
+      padding: theme.foundations.tokens.size.size_02,
       zIndex: 10,
       display: 'flex',
       alignItems: 'center',
@@ -47,8 +47,8 @@ export default createStyles((theme, { size, contentLength, dot, placement, place
       padding: 0,
       width: theme.fn.size({ size, sizes }),
       height: theme.fn.size({ size, sizes }),
-      border: `1px solid ${theme.foundations.tokens.color.border['border-light']}`,
-      borderRadius: theme.foundations.tokens.radius['radius-full'],
+      border: `1px solid ${theme.foundations.tokens.color.border.border_light}`,
+      borderRadius: theme.foundations.tokens.radius.radius_full,
     },
   };
 });

diff --git a/packages/co-design-core/src/components/Badge/Shield.style.ts b/packages/co-design-core/src/components/Badge/Shield.style.ts
@@ -4,16 +4,16 @@ export default createStyles((theme) => ({
   wrapper: {
     position: 'relative',
     display: 'inline-flex',
-    borderRadius: theme.foundations.tokens.radius['radius-full'],
-    backgroundColor: theme.foundations.tokens.color.specialty['image-on-bg'],
+    borderRadius: theme.foundations.tokens.radius.radius_full,
+    backgroundColor: theme.foundations.tokens.color.specialty.image_on_bg,
   },
   title: {
     display: 'inherit',
     alignItems: 'center',
     padding: '4px 6px',
-    borderRadius: theme.foundations.tokens.radius['radius-full'],
-    color: theme.foundations.tokens.color.text['text-light'],
-    backgroundColor: theme.foundations.tokens.color.bg['bg-critical'],
+    borderRadius: theme.foundations.tokens.radius.radius_full,
+    color: theme.foundations.tokens.color.text.text_light,
+    backgroundColor: theme.foundations.tokens.color.bg.bg_critical,
     boxSizing: 'border-box',
   },
   message: {

diff --git a/packages/co-design-core/src/components/Badge/stories/badge.stories.tsx b/packages/co-design-core/src/components/Badge/stories/badge.stories.tsx
@@ -64,7 +64,7 @@ export const Icon: Story = {
         }
         overrideStyles={{
           badge: {
-            backgroundColor: theme.foundations.tokens.color.bg['bg-primary'],
+            backgroundColor: theme.foundations.tokens.color.bg.bg_primary,
           },
         }}
       />

diff --git a/packages/co-design-core/src/components/Button/Button.style.ts b/packages/co-design-core/src/components/Button/Button.style.ts
@@ -51,15 +51,15 @@ const getFontStyles = (theme: CoTheme) => ({
   },
 
   medium: {
-    fontWeight: theme.foundations.typography.body['body-02'].fontWeight,
-    fontSize: theme.foundations.typography.body['body-02'].fontSize,
-    lineHeight: theme.foundations.typography.body['body-02'].lineHeight,
+    fontWeight: theme.foundations.typography.body.body_02.fontWeight,
+    fontSize: theme.foundations.typography.body.body_02.fontSize,
+    lineHeight: theme.foundations.typography.body.body_02.lineHeight,
   },
 
   large: {
-    fontWeight: theme.foundations.typography.body['body-01'].fontWeight,
-    fontSize: theme.foundations.typography.body['body-01'].fontSize,
-    lineHeight: theme.foundations.typography.body['body-01'].lineHeight,
+    fontWeight: theme.foundations.typography.body.body_01.fontWeight,
+    fontSize: theme.foundations.typography.body.body_01.fontSize,
+    lineHeight: theme.foundations.typography.body.body_01.lineHeight,
   },
 
   xlarge: {
@@ -107,146 +107,146 @@ export default createStyles((theme, { size, fullWidth }: ButtonStylesProps, getR
       },
     },
     primary: {
-      backgroundColor: theme.foundations.tokens.color.bg['bg-primary'],
-      color: theme.foundations.tokens.color.text['text-light'],
+      backgroundColor: theme.foundations.tokens.color.bg.bg_primary,
+      color: theme.foundations.tokens.color.text.text_light,
 
       '&:not(:disabled):hover': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-primary-hover'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_primary_hover,
       },
 
       '&:not(:disabled):active': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-primary-active'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_primary_active,
       },
 
       [`&:disabled:not(.${loading})`]: {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-disabled'],
-        color: theme.foundations.tokens.color.text['text-disabled'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_disabled,
+        color: theme.foundations.tokens.color.text.text_disabled,
       },
     },
     secondary: {
-      backgroundColor: theme.foundations.tokens.color.bg['bg-secondary'],
-      color: theme.foundations.tokens.color.text['text-light'],
+      backgroundColor: theme.foundations.tokens.color.bg.bg_secondary,
+      color: theme.foundations.tokens.color.text.text_light,
 
       '&:not(:disabled):hover': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-secondary-hover'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_secondary_hover,
       },
 
       '&:not(:disabled):active': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-secondary-active'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_secondary_active,
       },
       [`&:disabled:not(.${loading})`]: {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-disabled'],
-        color: theme.foundations.tokens.color.text['text-disabled'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_disabled,
+        color: theme.foundations.tokens.color.text.text_disabled,
       },
     },
     tertiary: {
-      backgroundColor: theme.foundations.tokens.color.bg['bg-tertiary'],
-      color: theme.foundations.tokens.color.text['text-base'],
+      backgroundColor: theme.foundations.tokens.color.bg.bg_tertiary,
+      color: theme.foundations.tokens.color.text.text_base,
 
       '&:not(:disabled):hover': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-tertiary-hover'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_tertiary_hover,
       },
 
       '&:not(:disabled):active': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-tertiary-active'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_tertiary_active,
       },
       [`&:disabled:not(.${loading})`]: {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-disabled'],
-        color: theme.foundations.tokens.color.text['text-disabled'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_disabled,
+        color: theme.foundations.tokens.color.text.text_disabled,
       },
     },
     ghost: {
       backgroundColor: 'transparent',
-      border: `1px solid ${theme.foundations.tokens.color.border['border-ghost']}`,
-      color: theme.foundations.tokens.color.text['text-base'],
+      border: `1px solid ${theme.foundations.tokens.color.border.border_ghost}`,
+      color: theme.foundations.tokens.color.text.text_base,
 
       '&:not(:disabled):hover': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-tertiary-hover'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_tertiary_hover,
       },
 
       '&:not(:disabled):active': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-tertiary-active'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_tertiary_active,
       },
 
       [`&:disabled:not(.${loading})`]: {
-        color: theme.foundations.tokens.color.text['text-disabled'],
-        border: `1px solid ${theme.foundations.tokens.color.text['text-disabled']}`,
+        color: theme.foundations.tokens.color.text.text_disabled,
+        border: `1px solid ${theme.foundations.tokens.color.text.text_disabled}`,
       },
     },
     'ghost-light': {
       backgroundColor: 'transparent',
-      border: `1px solid ${theme.foundations.tokens.color.border['border-ghost-light']}`,
-      color: theme.foundations.tokens.color.text['text-base'],
+      border: `1px solid ${theme.foundations.tokens.color.border.border_ghost_light}`,
+      color: theme.foundations.tokens.color.text.text_base,
 
       '&:not(:disabled):hover': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-tertiary-hover'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_tertiary_hover,
       },
 
       '&:not(:disabled):active': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-tertiary-active'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_tertiary_active,
       },
 
       [`&:disabled:not(.${loading})`]: {
-        color: theme.foundations.tokens.color.text['text-disabled'],
-        border: `1px solid ${theme.foundations.tokens.color.border['border-disabled']}`,
+        color: theme.foundations.tokens.color.text.text_disabled,
+        border: `1px solid ${theme.foundations.tokens.color.border.border_disabled}`,
       },
     },
     text: {
       backgroundColor: 'transparent',
-      color: theme.foundations.tokens.color.text['text-base'],
+      color: theme.foundations.tokens.color.text.text_base,
 
       '&:not(:disabled):hover': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-tertiary-hover'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_tertiary_hover,
       },
 
       '&:not(:disabled):active': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-tertiary-active'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_tertiary_active,
       },
 
       [`&:disabled:not(.${loading})`]: {
-        color: theme.foundations.tokens.color.text['text-disabled'],
+        color: theme.foundations.tokens.color.text.text_disabled,
       },
     },
     link: {
       height: 'auto',
       padding: 0,
       backgroundColor: 'transparent',
-      color: theme.foundations.tokens.color.text['text-base'],
+      color: theme.foundations.tokens.color.text.text_base,
 
       '&:not(:disabled):hover': {
-        color: theme.foundations.tokens.color.text['text-base-hover'],
+        color: theme.foundations.tokens.color.text.text_base_hover,
       },
 
       '&:not(:disabled):active': {
-        color: theme.foundations.tokens.color.text['text-base-active'],
+        color: theme.foundations.tokens.color.text.text_base_active,
       },
 
       [`&:disabled:not(.${loading})`]: {
-        color: theme.foundations.tokens.color.text['text-disabled'],
+        color: theme.foundations.tokens.color.text.text_disabled,
       },
     },
     critical: {
-      backgroundColor: theme.foundations.tokens.color.bg['bg-critical'],
-      color: theme.foundations.tokens.color.text['text-light'],
+      backgroundColor: theme.foundations.tokens.color.bg.bg_critical,
+      color: theme.foundations.tokens.color.text.text_light,
 
       '&:not(:disabled):hover': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-critical-hover'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_critical_hover,
       },
 
       '&:not(:disabled):active': {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-critical-active'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_critical_active,
       },
       [`&:disabled:not(.${loading})`]: {
-        backgroundColor: theme.foundations.tokens.color.bg['bg-disabled'],
-        color: theme.foundations.tokens.color.text['text-disabled'],
+        backgroundColor: theme.foundations.tokens.color.bg.bg_disabled,
+        color: theme.foundations.tokens.color.text.text_disabled,
       },
     },
     root: {
       ...sizes[size],
       ...getWidthStyles(fullWidth),
       ...defaultFontStyles(theme),
       ...getFontStyles(theme)[size],
-      borderRadius: theme.foundations.tokens.radius['radius-01'],
+      borderRadius: theme.foundations.tokens.radius.radius_01,
       position: 'relative',
       lineHeight: 1,
       WebkitTapHighlightColor: 'transparent',
@@ -268,7 +268,7 @@ export default createStyles((theme, { size, fullWidth }: ButtonStylesProps, getR
           left: -2,
           right: -2,
           borderRadius: 4,
-          outline: `2px solid ${theme.foundations.tokens.color.border['border-dark']}`,
+          outline: `2px solid ${theme.foundations.tokens.color.border.border_dark}`,
         },
       },
 

diff --git a/packages/co-design-core/src/components/Button/Button.tsx b/packages/co-design-core/src/components/Button/Button.tsx
@@ -72,7 +72,7 @@ export const Button: ButtonComponent & { displayName?: string } = forwardRef(
 
     const spinner = (
       <Spinner
-        color={isSolid(variant) ? theme.foundations.tokens.color.text['text-light'] : theme.foundations.tokens.color.text['text-base']}
+        color={isSolid(variant) ? theme.foundations.tokens.color.text.text_light : theme.foundations.tokens.color.text.text_base}
         size={CO_HEIGHTS[size] / 2}
         {...spinnerProps}
       />

diff --git a/packages/co-design-core/src/components/Divider/Divider.style.ts b/packages/co-design-core/src/components/Divider/Divider.style.ts
@@ -16,7 +16,7 @@ export const sizes = {
 };
 
 export default createStyles((theme, { margin, variant, strong }: DividerStyles) => {
-  const borderColor = strong ? theme.foundations.tokens.color.border['border-strong'] : theme.foundations.tokens.color.border['border-default'];
+  const borderColor = strong ? theme.foundations.tokens.color.border.border_strong : theme.foundations.tokens.color.border.border_default;
   return {
     withLabel: {
       borderTop: '0 !important',