quantumai-design-system
Version:
퀀텀에이아이의 디자인 시스템
147 lines (146 loc) • 4.26 kB
JavaScript
import { COLORS } from '../../../styles/theme';
export var CHIP_PALETTE = {
plain: {
primary: {
backgroundColor: COLORS.blue2,
color: COLORS.primary,
svg: {
fill: COLORS.primary,
':hover': { fill: COLORS.blue3 },
},
':hover, :focus': {
color: COLORS.blue3,
},
},
second: {
backgroundColor: COLORS.coolgrey2,
color: COLORS.blue6,
svg: {
fill: COLORS.blue6,
':hover': { fill: COLORS.blue5 },
},
':hover, :focus': {
color: COLORS.blue5,
},
},
third: {
backgroundColor: COLORS.grey4,
color: COLORS.coolgrey5,
svg: {
fill: COLORS.coolgrey5,
':hover': { fill: COLORS.coolgrey4 },
},
':hover, :focus': {
color: COLORS.coolgrey4,
},
},
fourth: {
backgroundColor: COLORS.coolgrey2,
color: COLORS.coolgrey5,
svg: {
fill: COLORS.coolgrey5,
':hover': { fill: COLORS.coolgrey4 },
},
':hover, :focus': {
color: COLORS.coolgrey4,
},
},
},
line: {
primary: {
backgroundColor: COLORS.white,
color: COLORS.primary,
outline: "1px solid ".concat(COLORS.primary),
svg: {
fill: COLORS.primary,
':hover': { fill: COLORS.blue3 },
},
':hover, :focus': {
backgroundColor: COLORS.blue1,
},
},
second: {
backgroundColor: COLORS.white,
color: COLORS.primaryL,
outline: "1px solid ".concat(COLORS.primaryL),
svg: {
fill: COLORS.primaryL,
':hover': { fill: COLORS.blue3 },
},
':hover, :focus': {
backgroundColor: COLORS.blue1,
},
},
third: {
backgroundColor: COLORS.white,
color: COLORS.primaryO,
outline: "1px solid ".concat(COLORS.primaryO),
svg: {
fill: COLORS.primaryO,
':hover': { fill: COLORS.primary },
},
':hover, :focus': {
backgroundColor: COLORS.blue1,
},
},
fourth: {
backgroundColor: COLORS.white,
color: COLORS.blue5,
outline: "1px solid ".concat(COLORS.blue5),
svg: {
fill: COLORS.blue5,
':hover': { fill: COLORS.blue4 },
},
':hover, :focus': {
backgroundColor: COLORS.coolgrey2,
},
},
},
fill: {
primary: {
backgroundColor: COLORS.primary,
color: COLORS.white,
svg: {
fill: COLORS.white,
':hover': { fill: COLORS.blue2 },
},
':hover, :focus': {
backgroundColor: COLORS.blue4,
},
},
second: {
backgroundColor: COLORS.primaryL,
color: COLORS.white,
svg: {
fill: COLORS.white,
':hover': { fill: COLORS.blue2 },
},
':hover, :focus': {
backgroundColor: COLORS.blue3,
},
},
third: {
backgroundColor: COLORS.primaryO,
color: COLORS.white,
svg: {
fill: COLORS.white,
':hover': { fill: COLORS.blue2 },
},
':hover, :focus': {
backgroundColor: COLORS.blue3,
},
},
fourth: {
backgroundColor: COLORS.blue5,
color: COLORS.white,
svg: {
fill: COLORS.white,
':hover': { fill: COLORS.blue2 },
},
':hover, :focus': {
backgroundColor: COLORS.blue4,
},
},
},
};
Object.freeze(CHIP_PALETTE);