개발 일지 2021.3. 2 (디자인 시스템)

Figma에 작성한 내용을 옮기기 위해 다음과 같이 변경했다.

그림자 설정 값의 경우 아래 사이트를 참고하였다.

ethercreative.github.io/react-native-shadow-generator/

React Native Shadow Generator

 

1. Color 변경

export const COLORS = {
  // default font color
  font: "#000000",
  // base colors
  primary: "#99E1D9",
  secondary: "#FFFAE3",
  tertiary: "#F7567C",

  // non-colors
  black: "#000020",
  white: "#FFFFFF",
  
  // color variations
  gray: "#C2C9D1",
  error: "#F03738",
  success: "#3CC13B",
  
  // favorite colors
  yellow: "#FFE358",
  skyblue: "#4DA1FF",

  // 500 번이 기존 색깔 입니다.
  // 번호가 높을 수록 색이 어두워 집니다.
  // primary
  "color_primary_100": "#FAFEFD",
  "color_primary_200": "#F5FCFB",
  "color_primary_300": "#E5F8F6",
  "color_primary_400": "#CCF0EC",
  "color_primary_500": "#99E1D9", 
  "color_primary_600": "#73A9A3",
  "color_primary_700": "#4D706D",
  //secondary
  "color_secondary_100": "#FFFFFE",
  "color_secondary_200": "#FFFFFC",
  "color_secondary_300": "#FFFEF8",
  "color_secondary_400": "#FFFDF1",
  "color_secondary_500": "#FFFAE3",  
  "color_secondary_600": "#BFBCAA",
  "color_secondary_700": "#807D71",
  // tertiary
  "color_tertiary_100": "#FFF7F9",
  "color_tertiary_200": "#FEEEF2",
  "color_tertiary_300": "#FDD5DE",
  "color_tertiary_400": "#FBAABE",
  "color_tertiary_500": "#F7567C",  
  "color_tertiary_600": "#B9405D",
  "color_tertiary_700": "#7C2B3E",
  // success
  "color_success_100": "#F5FCF5",
  "color_success_200": "#EBF9EB",
  "color_success_300": "#CEF0CE",
  "color_success_400": "#9EE09D",
  "color_success_500": "#3CC13B",  
  "color_success_600": "#2D912C",
  "color_success_700": "#1E601D",
  // warning
  "color_warning_100": "#FEFCF4",
  "color_warning_200": "#FEF8E8",
  "color_warning_300": "#FCEEC6",
  "color_warning_400": "#F9DD8D",
  "color_warning_500": "#F3BB1C", 
  "color_warning_600": "#B68C15",
  "color_warning_700": "#7A5E0E",
  // Error
  "color_error_100": "#FEF5F5",
  "color_error_200": "#FEEBEB",
  "color_error_300": "#FBCDCD",
  "color_error_400": "#F89B9C",
  "color_error_500": "#F03738", 
  "color_error_600": "#B4292A",
  "color_error_700": "#781C1C",
  // Gray
  "color_gray_100": "#FCFCFD",
  "color_gray_200": "#F9FAFA",
  "color_gray_300": "#F0F2F4",
  "color_gray_400": "#E0E4E8",
  "color_gray_500": "#C2C9D1", 
  "color_gray_600": "#91979D",
  "color_gray_700": "#616469",
  // Black
  "color_black_1": "#F2F2F2",
  "color_black_2": "#E5E5E5",
  "color_black_3": "#BFBFBF",
  "color_black_4": "#808080",
  "color_black_5": "#000000",
  // White
  "color_white_1": "#404040",
  "color_white_2": "#595959",
  "color_white_3": "#808080",
  "color_white_4": "#B3B3B3",
  "color_white_5": "#FFFFFF",
};

 

2. font, 변경

export const WEIGHTS = {    
  bold: "bold",
  semibold: "500", 
  medium: "400",
  light: "300"
};

export const FONTS = {
  displayHeavy: { fontSize: normalize(SIZES.display), fontWeight: WEIGHTS.bold },
  displayLight: { fontSize: normalize(SIZES.display), fontWeight: WEIGHTS.light },
  headLineHeavy: { fontSize: normalize(SIZES.headLine), fontWeight: WEIGHTS.bold },
  headLineLight: { fontSize: normalize(SIZES.headLine), fontWeight: WEIGHTS.light },
  titleHeavy: { fontSize: normalize(SIZES.title), fontWeight: WEIGHTS.bold },
  titleLight: { fontSize: normalize(SIZES.title), fontWeight: WEIGHTS.light },
  subHeaderHeavy: { fontSize: normalize(SIZES.subHeader), fontWeight: WEIGHTS.bold },
  subHeaderLight: { fontSize: normalize(SIZES.subHeader), fontWeight: WEIGHTS.light },
  bodyHeavy: { fontSize: normalize(SIZES.body), fontWeight: WEIGHTS.bold },
  bodyLight: { fontSize: normalize(SIZES.body), fontWeight: WEIGHTS.light },
  captionHeavy: { fontSize: normalize(SIZES.caption), fontWeight: WEIGHTS.bold },
  captionLight: { fontSize: normalize(SIZES.caption), fontWeight: WEIGHTS.light },
  smallHeavy: { fontSize: normalize(SIZES.small), fontWeight: WEIGHTS.bold },
  smallLight: { fontSize: normalize(SIZES.small), fontWeight: WEIGHTS.light },
};

3. Shadow 변경

 shadow && { shadowColor: "#000", shadowOffset: { width: 0, height: 2,}, shadowOpacity: 0.23, shadowRadius: 2.62, elevation: 4 },
    shadow2 && { shadowColor: "#000", shadowOffset: { width: 0, height: 3,}, shadowOpacity: 0.27, shadowRadius: 4.65, elevation: 6 },
    shadow3 && { shadowColor: "#000", shadowOffset: { width: 0, height: 4,}, shadowOpacity: 0.30, shadowRadius: 4.65, elevation: 8 },
    shadow4 && { shadowColor: "#000", shadowOffset: { width: 0, height: 5,}, shadowOpacity: 0.34, shadowRadius: 6.27, elevation: 10 },