Theme Color 지정하는 방법 수정했다

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

Hide file tree

Showing 28 changed files with 134 additions and 78 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
@@ -1,4 +1,4 @@
-import { createStyles, CoSize, CoPalette } from '@co-design/styles';
+import { createStyles, CoSize, CoPalette, getColor } from '@co-design/styles';
 
 export type AvatarShape = 'square' | 'round' | 'circle';
 
@@ -8,14 +8,15 @@ interface AvatarStyles {
   color: CoPalette;
 }
 
-export default createStyles((theme, { size, shape, color }: AvatarStyles) => {
+export default createStyles((theme, { size, shape, color: _color }: AvatarStyles) => {
   const sizes = {
     xsmall: 24,
     small: 32,
     medium: 40,
     large: 64,
     xlarge: 64,
   };
+  const color = getColor(theme, _color);
 
   return {
     root: {

diff --git a/packages/co-design-core/src/components/Avatar/Avatar.tsx b/packages/co-design-core/src/components/Avatar/Avatar.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, forwardRef } from 'react';
-import { CoComponentProps, CoSize, PolymorphicComponentProps, PolymorphicRef, CoPalette, useCoTheme, ClassNames } from '@co-design/styles';
+import { CoComponentProps, CoSize, PolymorphicComponentProps, PolymorphicRef, ClassNames, CoColor } from '@co-design/styles';
 import { View } from '../View';
 import { AvatarPlaceholderIcon } from './AvatarPlaceholderIcon';
 import useStyles, { AvatarShape } from './Avatar.style';
@@ -21,7 +21,7 @@ interface _AvatarProps extends CoComponentProps<AvatarStylesNames> {
   shape?: AvatarShape;
 
   /** Avatar 컴포넌트에 src가 없을 경우 기본 색상을 사용합니다. */
-  color?: CoPalette;
+  color?: CoColor;
 }
 
 export type AvatarProps<C extends React.ElementType> = PolymorphicComponentProps<C, _AvatarProps>;
@@ -30,12 +30,22 @@ type AvatarComponent = <C extends React.ElementType = 'div'>(props: AvatarProps<
 
 export const Avatar: AvatarComponent & { displayName?: string } = forwardRef(
   <C extends React.ElementType = 'div'>(
-    { children, component, size = 'medium', src, alt, shape = 'circle', color, className, co, overrideStyles, ...props }: AvatarProps<C>,
+    {
+      children,
+      component,
+      size = 'medium',
+      src,
+      alt,
+      shape = 'circle',
+      color = 'icon_default',
+      className,
+      co,
+      overrideStyles,
+      ...props
+    }: AvatarProps<C>,
     ref: PolymorphicRef<C>,
   ) => {
-    const theme = useCoTheme();
-    const _color = color || theme.foundations.tokens.color.icon.icon_default;
-    const { classes, cx } = useStyles({ color: _color, shape, size }, { overrideStyles, name: 'Avatar' });
+    const { classes, cx } = useStyles({ color, shape, size }, { overrideStyles, name: 'Avatar' });
     const [error, setError] = useState(!src);
 
     const sliceChildren =

diff --git a/packages/co-design-core/src/components/Avatar/AvatarGroup.tsx b/packages/co-design-core/src/components/Avatar/AvatarGroup.tsx
@@ -67,7 +67,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
         {truncatedAvatars ? (
           <Avatar size={size} shape={shape} className={classes.child} style={{ zIndex: limit + 1 }}>
             <Center className={classes.truncated}>
-              <Typography variant="heading-06" color="text-light">
+              <Typography variant="heading_06" color="text_light">
                 +{truncatedAvatars}
               </Typography>
             </Center>

diff --git a/packages/co-design-core/src/components/Button/Button.style.ts b/packages/co-design-core/src/components/Button/Button.style.ts
@@ -1,10 +1,10 @@
-import { createStyles, CoSize, CoTheme, CoPalette, defaultFontStyles } from '@co-design/styles';
+import { createStyles, CoSize, CoTheme, defaultFontStyles, CoColor, getColor } from '@co-design/styles';
 import { CO_HEIGHTS } from '../../constants';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghost-light' | 'text' | 'link' | 'critical';
 
 interface ButtonStylesProps {
-  color?: CoPalette;
+  color?: CoColor;
   size: CoSize;
   fullWidth: boolean;
 }
@@ -78,10 +78,11 @@ const getWidthStyles = (fullWidth: boolean) => ({
   width: fullWidth ? '100%' : 'auto',
 });
 
-export default createStyles((theme, { size, fullWidth }: ButtonStylesProps, getRef) => {
+export default createStyles((theme, { size, color, fullWidth }: ButtonStylesProps, getRef) => {
   const loading = getRef('loading');
   const inner = getRef('inner');
   const spinner = getRef('spinner');
+  const _color = getColor(theme, color);
 
   return {
     loading: {
@@ -246,6 +247,7 @@ export default createStyles((theme, { size, fullWidth }: ButtonStylesProps, getR
       ...getWidthStyles(fullWidth),
       ...defaultFontStyles(theme),
       ...getFontStyles(theme)[size],
+      ...(_color ? { backgroundColor: _color } : {}),
       borderRadius: theme.foundations.tokens.radius.radius_01,
       position: 'relative',
       lineHeight: 1,

diff --git a/packages/co-design-core/src/components/Button/Button.tsx b/packages/co-design-core/src/components/Button/Button.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { CoComponentProps, CoSize, PolymorphicComponentProps, PolymorphicRef, useCoTheme, ClassNames } from '@co-design/styles';
+import { CoComponentProps, CoSize, PolymorphicComponentProps, PolymorphicRef, useCoTheme, ClassNames, CoColor } from '@co-design/styles';
 import { View } from '../View';
 import useStyles, { ButtonVariant } from './Button.style';
 import { Spinner, SpinnerProps } from '../Spinner';
@@ -11,6 +11,9 @@ export interface SharedButtonProps extends CoComponentProps<ButtonStylesNames> {
   /** Button 컴포넌트의 크기를 정합니다. */
   size?: CoSize;
 
+  /** Button 컴포넌트의 색상을 정합니다. */
+  color?: CoColor;
+
   /** Button 컴포넌트의 모양을 지정합니다. */
   variant?: ButtonVariant;
 
@@ -46,6 +49,7 @@ export const Button: ButtonComponent & { displayName?: string } = forwardRef(
       children,
       component,
       size = 'medium',
+      color,
       variant = 'primary',
       fullWidth = false,
       type = 'button',
@@ -65,6 +69,7 @@ export const Button: ButtonComponent & { displayName?: string } = forwardRef(
     const { classes, cx } = useStyles(
       {
         size,
+        color,
         fullWidth,
       },
       { overrideStyles, name: 'Button' },
@@ -84,7 +89,7 @@ export const Button: ButtonComponent & { displayName?: string } = forwardRef(
         ref={ref}
         type={type}
         disabled={disabled || loading}
-        className={cx({ [classes.loading]: loading }, classes.root, classes[variant], className)}
+        className={cx({ [classes.loading]: loading }, classes[variant], classes.root, className)}
         co={co}
         onTouchStart={() => {}}
         {...props}

diff --git a/packages/co-design-core/src/components/Button/stories/Button.stories.tsx b/packages/co-design-core/src/components/Button/stories/Button.stories.tsx
@@ -9,6 +9,9 @@ export default {
       options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
       control: { type: 'inline-radio' },
     },
+    color: {
+      control: { type: 'text' },
+    },
     variant: {
       options: ['primary', 'secondary', 'tertiary', 'ghost', 'ghost-light', 'text', 'link', 'critical'],
       control: { type: 'inline-radio' },

diff --git a/packages/co-design-core/src/components/IconButton/IconButton.style.ts b/packages/co-design-core/src/components/IconButton/IconButton.style.ts
@@ -1,5 +1,4 @@
-import { createStyles, CoSize, CoPalette, defaultFontStyles } from '@co-design/styles';
-import { addAlpha } from '../../utils';
+import { createStyles, CoSize, CoPalette, defaultFontStyles, getColor } from '@co-design/styles';
 
 interface IconButtonStylesProps {
   color?: CoPalette;
@@ -10,7 +9,7 @@ export default createStyles((theme, { color: _color, size }: IconButtonStylesPro
   const loading = getRef('loading');
   const inner = getRef('inner');
   const spinner = getRef('spinner');
-  const color = _color || theme.primaryColor;
+  const backgroundColor = getColor(theme, _color);
 
   const sizes = {
     xsmall: {
@@ -205,6 +204,7 @@ export default createStyles((theme, { color: _color, size }: IconButtonStylesPro
     root: {
       ...sizes[size],
       ...defaultFontStyles(theme),
+      ...(backgroundColor ? { backgroundColor } : {}),
       borderRadius: theme.foundations.tokens.radius.radius_01,
       position: 'relative',
       padding: 0,
@@ -218,7 +218,6 @@ export default createStyles((theme, { color: _color, size }: IconButtonStylesPro
       WebkitAppearance: 'none',
       outline: 'none',
       border: 'none',
-
       '&:not(:disabled):focus-visible': {
         '&::before': {
           content: '""',

diff --git a/packages/co-design-core/src/components/IconButton/IconButton.tsx b/packages/co-design-core/src/components/IconButton/IconButton.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { PolymorphicComponentProps, PolymorphicRef, ClassNames } from '@co-design/styles';
+import { PolymorphicComponentProps, PolymorphicRef } from '@co-design/styles';
 import { View } from '../View';
 import useStyles from './IconButton.style';
 import { Spinner } from '../Spinner';
@@ -49,7 +49,7 @@ export const IconButton: IconButtonComponent & { displayName?: string } = forwar
     return (
       <View<any>
         component={component || 'button'}
-        className={cx({ [classes.loading]: loading }, classes.root, classes[variant], className)}
+        className={cx({ [classes.loading]: loading }, classes[variant], classes.root, className)}
         type={type}
         disabled={disabled || loading}
         ref={ref}

diff --git a/packages/co-design-core/src/components/Radio/Radio.tsx b/packages/co-design-core/src/components/Radio/Radio.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect, useRef } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import RadioGroup from './RadioGroup';
 import RadioContext from './RadioContext';
 import useStyles from './Radio.style';
@@ -79,7 +79,7 @@ const Radio: IRadio<RadioProps> = ({
   return (
     <View
       component="label"
-      className={cx(classes.wrapper, { [classes.disabled]: disabled, [classes.block]: block })}
+      className={cx(classes.wrapper, { [classes.disabled]: disabled, [classes.block]: block }, className)}
       co={co}
       style={style}
       {...wrapperProps}
@@ -95,7 +95,7 @@ const Radio: IRadio<RadioProps> = ({
         {...props}
       />
       <span className={classes.iconWrapper}>
-        <RadioIcon className={classes.icon} check={check} disabled={disabled} />
+        <RadioIcon className={classes.icon} check={check} />
       </span>
       {label ? (
         <span className={classes.text} style={{ color: labelColor }}>

diff --git a/packages/co-design-core/src/components/Radio/RadioGroup.tsx b/packages/co-design-core/src/components/Radio/RadioGroup.tsx
@@ -28,7 +28,7 @@ export default ({ children, defaultActive, onChange, className = '', style, ...p
     })(),
   });
 
-  const radios = convertReactNodeTo<RadioProps>('Radio.Group', 'Radio', children).map((element, index, elements) => {
+  const radios = convertReactNodeTo<RadioProps>('Radio.Group', 'Radio', children).map((element) => {
     const radioComponent = element as React.ReactElement<RadioProps>;
     return React.cloneElement<RadioProps>(radioComponent, {
       checked: radioComponent.props.value === (state?.active as any)?.value,

diff --git a/packages/co-design-core/src/components/Radio/RadioIcon.tsx b/packages/co-design-core/src/components/Radio/RadioIcon.tsx
@@ -4,9 +4,8 @@ import { Default } from './icons/Default';
 
 interface RadioIconProps extends SVGProps<SVGSVGElement> {
   check?: boolean;
-  disabled?: boolean;
 }
 
-export const RadioIcon = ({ check = false, disabled = false, ...restProps }: RadioIconProps) => {
+export const RadioIcon = ({ check = false, ...restProps }: RadioIconProps) => {
   return check ? <Check {...restProps} /> : <Default {...restProps} />;
 };
diff --git a/packages/co-design-core/src/components/RingProgress2/RingProgress2.style.ts b/packages/co-design-core/src/components/RingProgress2/RingProgress2.style.ts
@@ -7,10 +7,10 @@ export interface ProgressStylesParams {
 export default createStyles((theme, { size }: ProgressStylesParams) => {
   const fontSizes = {
     xsmall: theme.foundations.typography.body.caption.fontSize,
-    small: theme.foundations.typography.body['body-02'].fontSize,
-    medium: theme.foundations.typography.body['body-02'].fontSize,
-    large: theme.foundations.typography.body['body-01'].fontSize,
-    xlarge: theme.foundations.typography.body['body-01'].fontSize,
+    small: theme.foundations.typography.body.body_02.fontSize,
+    medium: theme.foundations.typography.body.body_02.fontSize,
+    large: theme.foundations.typography.body.body_01.fontSize,
+    xlarge: theme.foundations.typography.body.body_01.fontSize,
   };
 
   return {

diff --git a/packages/co-design-core/src/components/Spinner/Spinner.style.ts b/packages/co-design-core/src/components/Spinner/Spinner.style.ts
@@ -1,20 +1,14 @@
-import { CoColor, CoPalette, CoSize, createStyles } from '@co-design/styles';
-import { CO_HEIGHTS } from '../../constants';
+import { CoColor, CoSize, createStyles, getColor } from '@co-design/styles';
+// import { CO_HEIGHTS } from '../../constants';
 
 interface SpinnerStyles {
   size: CoSize | number;
-  color?: CoPalette | CoColor | string;
+  color?: CoColor;
 }
 
 export default createStyles((theme, { size, color }: SpinnerStyles) => {
-  const svgColor =
-    color === undefined
-      ? theme.foundations.tokens.color.bg.bg_primary
-      : color in theme.palettes
-      ? theme.colorScheme === 'light'
-        ? theme.palettes[color][5]
-        : theme.palettes[color][3]
-      : color;
+  const _color = getColor(theme, color);
+  const svgColor = _color ? _color : theme.foundations.tokens.color.bg.bg_primary;
 
   const sizes = {
     xsmall: theme.foundations.tokens.size.size_07,

diff --git a/packages/co-design-core/src/components/Spinner/Spinner.tsx b/packages/co-design-core/src/components/Spinner/Spinner.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { CoColor, CoPalette, CoSize, CoComponentProps, ClassNames } from '@co-design/styles';
+import { CoColor, CoSize, CoComponentProps, ClassNames } from '@co-design/styles';
 import useStyles from './Spinner.style';
 import { View } from '../View';
 
@@ -10,7 +10,7 @@ export interface SpinnerProps extends CoComponentProps, React.ComponentPropsWith
   size?: CoSize | number;
 
   /** Spinner 컴포넌트의 색상을 정합니다. */
-  color?: CoPalette | CoColor | string;
+  color?: CoColor;
 }
 
 export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(({ size = 'medium', color, className, co, overrideStyles, ...props }, ref) => {

diff --git a/packages/co-design-core/src/components/Tooltip/Tooltip.tsx b/packages/co-design-core/src/components/Tooltip/Tooltip.tsx
@@ -6,7 +6,6 @@ import { getFieldValue } from '../../utils';
 import useStyles, { TooltipPlacement, TooltipTrigger } from './Tooltip.style';
 import { useClickAway, useToggle, useUpdateEffect } from '@co-design/hooks';
 import { Transition, CoTransition } from '../Transition';
-import { Stack } from '../Stack';
 
 export type TooltipStylesNames = ClassNames<typeof useStyles>;
 

diff --git a/packages/co-design-core/src/components/Typography/Typography.style.ts b/packages/co-design-core/src/components/Typography/Typography.style.ts
@@ -1,9 +1,9 @@
 import { createStyleObject } from '@capsizecss/core';
-import { createStyles, CSSObject, defaultFontStyles, CoTypography, CoTextSemanticColor, CoPaletteColor, CoTypographyValue } from '@co-design/styles';
+import { createStyles, CSSObject, defaultFontStyles, CoTypography, CoTypographyValue, getColor, CoColor } from '@co-design/styles';
 import fontMetrics from '@capsizecss/metrics/arial';
 
 interface TypographyStyles {
-  color: CoPaletteColor | CoTextSemanticColor | string;
+  color: CoColor;
   variant: CoTypography;
   lineClamp: number;
   block: boolean;
@@ -45,19 +45,7 @@ const createFontStyles = (fontSize: number, lineHeight: number) => {
 };
 
 export default createStyles((theme, { color, variant, lineClamp, block, inherit, disableTextboxTrim }: TypographyStyles) => {
-  const _color = color
-    ? color in theme.foundations.color
-      ? theme.foundations.color[color][theme.colorScheme === 'dark' ? 3 : 5]
-      : color in theme.foundations.tokens.color.text
-      ? theme.foundations.tokens.color.text[color]
-      : color
-    : theme.foundations
-    ? theme.colorScheme === 'dark'
-      ? theme.foundations.tokens.color.text.text_light
-      : theme.foundations.tokens.color.text.text_default
-    : theme.colorScheme === 'dark'
-    ? theme.colors.white
-    : theme.colors.black;
+  const _color = getColor(theme, color);
 
   const { fontSize, fontWeight, lineHeight }: CoTypographyValue =
     variant in theme.foundations.typography.heading ? theme.foundations.typography.heading[variant] : theme.foundations.typography.body[variant];

diff --git a/packages/co-design-core/src/components/Typography/Typography.tsx b/packages/co-design-core/src/components/Typography/Typography.tsx
@@ -1,13 +1,5 @@
 import { forwardRef } from 'react';
-import {
-  CoComponentProps,
-  PolymorphicComponentProps,
-  PolymorphicRef,
-  CoTypography,
-  ClassNames,
-  CoTextSemanticColor,
-  CoPaletteColor,
-} from '@co-design/styles';
+import { CoComponentProps, PolymorphicComponentProps, PolymorphicRef, CoTypography, ClassNames, CoColor } from '@co-design/styles';
 import { View } from '../View';
 import useStyles from './Typography.style';
 
@@ -18,7 +10,7 @@ export interface SharedTypographyProps extends CoComponentProps<TypographyStyles
   variant?: CoTypography;
 
   /** 폰트 색상을 정합니다. */
-  color?: CoTextSemanticColor | CoPaletteColor | string;
+  color?: CoColor;
 
   /**
    * true일 경우 폰트에 bold가 적용됩니다.
@@ -64,7 +56,7 @@ export const Typography: TypographyComponent & { displayName?: string } = forwar
       children,
       component,
       variant = 'body_02',
-      color,
+      color = 'text_default',
       strong,
       underline,
       transform,