Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 11 commits into from
Dec 11, 2020
Merged

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

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
afecf5c
feat(ui-kit): scss 컬러 변수 정의
Junkim93 Dec 5, 2020
6e132fe
feat(ui-kit): grayscale 스토리 작성
Junkim93 Dec 5, 2020
a473063
feat(ui-kit): sementic color 스토리 작성
Junkim93 Dec 5, 2020
454da45
feat(ui-kit): 컬러변수 context 추가
Junkim93 Dec 7, 2020
d55d937
feat(ui-kit): 컬러 헥스값 업데이트
Junkim93 Dec 7, 2020
643838b
feat(ui-kit): 오타 수정
Junkim93 Dec 7, 2020
01e958f
feat(ui-kit): 불필요한 변수 제거
Junkim93 Dec 7, 2020
8b367a5
feat(ui-kit): 상수 및 타입 정의 리뷰 반영
Junkim93 Dec 9, 2020
c1a4c4d
feat(ui-kit): 불필요한 클래스 제거
Junkim93 Dec 9, 2020
f3fc72b
Merge branch 'alpha' of https://github.com/Lubycon/lubycon-ui-kit int…
Junkim93 Dec 9, 2020
4fdaf0f
feat(ui-kit): 컬러 타입 추가
Junkim93 Dec 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions ui-kit/src/constants/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 타이핑 대로라면

const props: Props = {
  foo: 'green40',
  bar: 'blue40',
}

처럼 써야하는데 혹시 의도하신 건가요? 이러면 사용자가 green40이나 blue40이라는 값이 있다는 걸 알기 전에는 사용하기 어려울 것 같습니다. 첫 글자를 쳐야 자동완성이 되니까유

그때 보내주셨던 예시대로 요렇게 변경하는건 어떨까요?

Suggested change
export type ColorProperty = keyof typeof colors;
export type ColorProperty = typeof colors[keyof typeof colors]; 
interface Props {
  foo: ColorProperty;
  bar: ColorProperty;
}

const props: Props = {
  foo: '#013CAD',
  bar: colors.blue40,
}

이렇게 타이핑하면 colors 맵의 존재만 알고 있다면 내부에 어떤 색이 있는지도 IDE에서 자동으로 트래킹해서 자동완성으로 보여줍니다...!

Copy link
Contributor Author

@Junkim93 Junkim93 Dec 10, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 이 타입은 스토리파일에서 저렇게 프로퍼티 리스트만 빼온 타입이 필요해서 작성했어요
언급해주신 방법대로의 타입 정의 추가하는거를 침대에 눕고나서 생각나서,
아 오늘 아침에 추가해야지 하다가 깜빡했네요 😅 이거 지금 추가하겠습니당

52 changes: 52 additions & 0 deletions ui-kit/src/sass/utils/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
1 change: 1 addition & 0 deletions ui-kit/src/sass/utils/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
@import './font-weights';
@import './typography';
@import './shadows';
@import './colors';
134 changes: 134 additions & 0 deletions ui-kit/src/stories/Colors.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};