quantumai-design-system
Version:
퀀텀에이아이의 디자인 시스템
130 lines (129 loc) • 2.77 kB
JavaScript
import { css } from '@emotion/react';
import { COLORS } from '../../../styles/theme';
export var BUTTON_OPTION = {
xs: {
height: 20,
textType: 'caption1',
padding: 5,
radius: 3,
},
s: {
height: 25,
textType: 'caption1',
padding: 10,
radius: 6,
},
m: {
height: 34,
textType: 'subTitle2',
padding: 10,
radius: 8,
},
l: {
height: 38,
textType: 'subTitle2',
padding: 10,
radius: 8,
},
xl: {
height: 45,
textType: 'headline2',
padding: 25,
radius: 9,
},
};
export var BUTTON_COLOR = {
fill: css({
backgroundColor: COLORS.primary,
borderColor: COLORS.blue4,
color: COLORS.white,
svg: {
fill: COLORS.white,
},
':hover': {
backgroundColor: COLORS.blue4,
},
':active': {
backgroundColor: COLORS.blue5,
},
}),
line: css({
backgroundColor: COLORS.white,
borderColor: COLORS.blue3,
color: COLORS.blue4,
svg: {
fill: COLORS.blue4,
},
':hover': {
backgroundColor: COLORS.blue1,
},
':active': {
backgroundColor: COLORS.coolgrey2,
},
}),
common: css({
':disabled': {
backgroundColor: COLORS.grey2,
borderColor: COLORS.grey5,
color: COLORS.grey7,
svg: {
fill: COLORS.grey7,
},
},
}),
};
Object.freeze(BUTTON_OPTION);
Object.freeze(BUTTON_COLOR);
export var BUTTON_ICON_OPTION = {
s: {
size: 24,
iconSize: 18,
radius: 4,
},
m: {
size: 30,
radius: 8,
},
l: {
size: 50,
radius: 25,
},
};
export var BUTTON_ICON_COLOR = {
s: css({
backgroundColor: COLORS.grey2,
svg: {
fill: COLORS.coolgrey5,
},
':hover': {
backgroundColor: COLORS.grey5,
},
':active': {
backgroundColor: COLORS.grey6,
},
}),
m: css({
backgroundColor: COLORS.white,
borderColor: COLORS.coolgrey3,
svg: {
fill: COLORS.coolgrey4,
},
':hover': {
backgroundColor: COLORS.coolgrey1,
},
':active': {
backgroundColor: COLORS.coolgrey2,
},
}),
l: css({
backgroundColor: COLORS.coolgrey4,
svg: {
fill: COLORS.white,
},
':hover': {
backgroundColor: COLORS.coolgrey3,
},
}),
};
Object.freeze(BUTTON_ICON_OPTION);
Object.freeze(BUTTON_ICON_COLOR);