feat(ui-kit): Color 추가 (#24)

* feat(ui-kit): scss 컬러 변수 정의 * feat(ui-kit): grayscale 스토리 작성 * feat(ui-kit): sementic color 스토리 작성 * feat(ui-kit): 컬러변수 context 추가 * feat(ui-kit): 컬러 헥스값 업데이트 * feat(ui-kit): 오타 수정 * feat(ui-kit): 불필요한 변수 제거 * feat(ui-kit): 상수 및 타입 정의 리뷰 반영 * feat(ui-kit): 불필요한 클래스 제거 * feat(ui-kit): 컬러 타입 추가
Lubycon · Dec 11, 2020 · a92b2cd · a92b2cd
1 parent 4719333
commit a92b2cd
Show file tree

Hide file tree

Showing 4 changed files with 217 additions and 0 deletions.
diff --git a/ui-kit/src/constants/colors.ts b/ui-kit/src/constants/colors.ts
@@ -0,0 +1,30 @@
+export const colors = {
+  green50: '#13BC4C',
+  green40: '#78CF81',
+  green60: '#0F933C',
+  blue50: '#135CE9',
+  blue40: '#87ADF5',
+  blue60: '#013CAD',
+  red50: '#CB121C',
+  red40: '#F29CA1',
+  red60: '#9B0B13',
+  yellow50: '#F0CB08',
+  yellow40: '#F9E681',
+  yellow60: '#AA8F00',
+  gray100: '#1B1B1C',
+  gray90: '#2A2A2C',
+  gray80: '#4C4D53',
+  gray70: '#76777D',
+  gray60: '#8E9095',
+  gray50: '#B5B6B9',
+  gray40: '#D0D1D3',
+  gray30: '#E3E4E5',
+  gray20: '#F3F4F5',
+  gray10: '#FCFCFD',
+} as const;
+
+export type SemanticColorName = 'positive' | 'informative' | 'negative' | 'notice';
+
+export type ColorProperty = keyof typeof colors;
+
+export type Colors = typeof colors[keyof typeof colors];
diff --git a/ui-kit/src/sass/utils/_colors.scss b/ui-kit/src/sass/utils/_colors.scss
@@ -0,0 +1,52 @@
+$colors: (
+/*
+  Semantic Color
+  Positive
+ */
+  'green50': #13BC4C,
+  'green40': #78CF81,
+  'green60': #0F933C,
+/*
+  Informative
+ */
+  'blue50': #135CE9,
+  'blue40': #87ADF5,
+  'blue60': #013CAD,
+/*
+  Negative
+ */
+  'red50': #CB121C,
+  'red40': #F29CA1,
+  'red60': #9B0B13,
+/*
+  Notice
+ */
+  'yellow50': #F0CB08,
+  'yellow40': #F9E681,
+  'yellow60': #AA8F00,
+
+/*
+  Gray Scale
+  100-10 (단위 10)
+ */
+  'gray100': #1B1B1C,
+  'gray90': #2A2A2C,
+  'gray80': #4C4D53,
+  'gray70': #76777D,
+  'gray60': #8E9095,
+  'gray50': #B5B6B9,
+  'gray40': #D0D1D3,
+  'gray30': #E3E4E5,
+  'gray20': #F3F4F5,
+  'gray10': #FCFCFD,
+);
+
+@mixin color($name, $value) {
+  :root {
+    --lubycon-#{$name}: #{$value};
+  }
+}
+
+@each $name, $value in $colors {
+  @include color($name, $value);
+}
diff --git a/ui-kit/src/sass/utils/_index.scss b/ui-kit/src/sass/utils/_index.scss
@@ -2,3 +2,4 @@
 @import './font-weights';
 @import './typography';
 @import './shadows';
+@import './colors';
diff --git a/ui-kit/src/stories/Colors.stories.tsx b/ui-kit/src/stories/Colors.stories.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import { Meta } from '@storybook/react/types-6-0';
+import Text from 'components/Text';
+import { colors, ColorProperty, SemanticColorName } from '../constants/colors';
+
+export default {
+  title: 'Lubycon UI Kit/Colors',
+} as Meta;
+
+const grayScaleNames = [
+  'gray100',
+  'gray90',
+  'gray80',
+  'gray70',
+  'gray60',
+  'gray50',
+  'gray40',
+  'gray30',
+  'gray20',
+  'gray10',
+] as const;
+
+type SemanticColorMap = {
+  [key in SemanticColorName]: Array<ColorProperty>;
+};
+
+const semanticColors: SemanticColorMap = {
+  positive: ['green50', 'green40', 'green60'],
+  informative: ['blue50', 'blue40', 'blue60'],
+  negative: ['red50', 'red40', 'red60'],
+  notice: ['yellow50', 'yellow40', 'yellow60'],
+};
+
+const semanticColorNames = Object.keys(semanticColors) as Array<SemanticColorName>;
+
+type IndexMap = {
+  [key: number]: 'a' | 'b' | 'c';
+};
+
+const indexMap: IndexMap = {
+  0: 'a',
+  1: 'b',
+  2: 'c',
+};
+
+export const Default = () => {
+  return (
+    <div>
+      <Text as="div" typography="subtitle" style={{ color: colors.gray100, marginBottom: '24px' }}>
+        회색 명암(Gray Scale)
+      </Text>
+      <ul
+        style={{
+          margin: '0 0 120px 0',
+          padding: 0,
+          display: 'grid',
+          gap: '10px',
+          gridTemplateColumns: 'repeat(5, 246px)',
+        }}
+      >
+        {grayScaleNames.map((name, index) => (
+          <li key={index} style={{ listStyle: 'none' }}>
+            <div
+              style={{
+                width: '246px',
+                height: '160px',
+                backgroundColor: `var(--lubycon-${name})`,
+                borderRadius: '8px',
+                padding: '14px',
+                boxSizing: 'border-box',
+              }}
+            >
+              <Text
+                typography="subtitle"
+                style={{ color: `var(--lubycon-gray${index > 4 ? '100' : '10'})` }}
+              >
+                {name.replace(/gray/g, 'gray ')}
+              </Text>
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      <Text as="div" typography="subtitle" style={{ color: colors.gray100, marginBottom: '24px' }}>
+        의미론적 색상(Semantic Color)
+      </Text>
+      <div style={{ display: 'grid', gap: '40px', gridTemplateColumns: 'repeat(2, 615px)' }}>
+        {semanticColorNames.map((name, index) => (
+          <ul
+            key={index}
+            style={{
+              margin: 0,
+              padding: 0,
+              display: 'grid',
+              gap: '10px',
+              gridTemplateColumns: '302px 302px',
+              gridTemplateRows: '75px 75px',
+              gridTemplateAreas: `
+                'a b'
+                'a c'
+              `,
+            }}
+          >
+            {semanticColors[name].map((colorName, colorIndex) => (
+              <li
+                key={colorIndex}
+                style={{
+                  listStyle: 'none',
+                  width: '302px',
+                  height: `${/50/g.test(colorName) ? '160px' : '75px'}`,
+                  backgroundColor: `var(--lubycon-${colorName})`,
+                  borderRadius: '8px',
+                  padding: '14px',
+                  boxSizing: 'border-box',
+                  gridArea: `${indexMap[colorIndex]}`,
+                }}
+              >
+                <Text as="div" typography="subtitle" style={{ color: 'var(--lubycon-gray10' }}>
+                  {/50/g.test(colorName) ? name[0].toUpperCase() + name.slice(1) : ''}
+                </Text>
+                <Text
+                  typography="caption"
+                  style={{ color: `${/40/g.test(colorName) ? colors.gray100 : colors.gray10}` }}
+                >
+                  {colorName}
+                </Text>
+              </li>
+            ))}
+          </ul>
+        ))}
+      </div>
+    </div>
+  );
+};