-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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): 컬러 타입 추가
- Loading branch information
Showing
4 changed files
with
217 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,3 +2,4 @@ | |
@import './font-weights'; | ||
@import './typography'; | ||
@import './shadows'; | ||
@import './colors'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
}; |