type Neutral = "white" | "s100" | "s150" | "s200" | "s250" | "s300" | "s400" | "s500" | "s600" | "s700" | "s800" | "s900" | "black" ; export const neutral = { white : "#ffffff" , s100 : "#efeff6" , s150 : "#dfdfe6" , s200 : "#c7c7ce" , s250 : "#bbbbc2" , s300 : "#9f9ea4" , s400 : "#7c7c82" , s500 : "#515154" , s600 : "#38383a" , s700 : "#2d2c2e" , s800 : "#212123" , s900 : "#161617" , black : "#000000" , } ; type Primary = "brand" | "s200" | "s600" ; export const primary = { s200 : "#459de6" , brand : "#0d548f" , s600 : "#0c3659" , } ; type Secondary = "brand" | "s200" | "s600" ; export const secondary = { s200 : "#b968e8" , brand : "#591282" , s600 : "#3f0d5c" , } ; type Danger = "s400" ; export const danger = { s400 : "#cf1717" , } ; type Success = "s400" ; export const success = { s400 : "#008a09" , } ; type Warning = "s400" ; export const warning = { s400 : "#cf9700" , } ; const applyOpacity = ( hexColor , opacity ) : string => { const red = parseInt ( hexColor . slice ( 1 , 3 ) , 16 ) ; const green = parseInt ( hexColor . slice ( 3 , 5 ) , 16 ) ; const blue = parseInt ( hexColor . slice ( 5 , 7 ) , 16 ) ; return `rgba(${ red }, ${ green }, ${ blue }, ${ opacity })` ; } ; type Transparent = "clear" | "lightGray" | "darkGray" ; export const transparent = { clear : "rgba(255, 255, 255, 0)" , lightGray : applyOpacity ( neutral . s300 , 0.4 ) , darkGray : applyOpacity ( neutral . s800 , 0.8 ) , } ; export const shadeColor = ( hexColor , percent ) : string => { const redGamut = parseInt ( hexColor . slice ( 1 , 3 ) , 16 ) ; const greenGamut = parseInt ( hexColor . slice ( 3 , 5 ) , 16 ) ; const blueGamut = parseInt ( hexColor . slice ( 5 , 7 ) , 16 ) ; const rgb = [ redGamut , greenGamut , blueGamut ] ; const toShadedGamut = ( gamut ) : number => { return Math . floor ( Math . min ( gamut * ( 1 + percent / 100 ) , 255 ) ) ; } ; const toHex = ( gamut ) : string => { return gamut . toString ( 16 ) . length === 1 ? `0${ gamut . toString ( 16 ) }` : gamut . toString ( 16 ) ; } ; const shadedRGB = rgb . map ( toShadedGamut ) ; const shadedHex = shadedRGB . map ( toHex ) ; const hexString = shadedHex . join ( "" ) ; return `#${ hexString }` ; } ;