How to use the open-color.pink function in open-color
To help you get started, we’ve selected a few open-color examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
bmcmahen / sancho / src / Theme / colors.ts View on Github 
* normalize open-color to remove some colours,
* such as 'grape'. This should be compatible with a tool
* like palx.
*/
const defaultScales = {
gray: open.gray,
blue: open.blue,
green: open.green,
red: open.red,
orange: open.orange,
yellow: open.yellow,
teal: open.teal,
cyan: open.cyan,
lime: open.lime,
pink: open.pink,
violet: open.violet,
indigo: open.indigo
};
export type ScalesType = typeof defaultScales;
type PaletteItem = {
lightest: string;
light: string;
base: string;
dark: string;
};
export type PaletteType = {
gray: PaletteItem;
blue: PaletteItem;padding-bottom: 0.15rem;
padding-left: 0.3rem;
padding-right: 0.3rem;
background: ${oc.gray[2]};
display: inline-block;
border-radius: 2px;
font-weight: 400;
color: ${oc.gray[7]};
cursor: pointer;
margin-right: 0.4rem;
margin-bottom: 0.4rem;
border: 1px solid ${oc.gray[3]};
user-select: none;
&:hover {
background: ${oc.pink[7]};
border: 1px solid ${oc.pink[8]};
color: white;
}
&:active {
border: 1px solid ${oc.pink[9]};
background: ${oc.pink[8]};
color: white;
}
`
export default Tag;padding-left: 0.3rem;
padding-right: 0.3rem;
background: ${oc.gray[2]};
display: inline-block;
border-radius: 2px;
font-weight: 400;
color: ${oc.gray[7]};
cursor: pointer;
margin-right: 0.4rem;
margin-bottom: 0.4rem;
border: 1px solid ${oc.gray[3]};
user-select: none;
&:hover {
background: ${oc.pink[7]};
border: 1px solid ${oc.pink[8]};
color: white;
}
&:active {
border: 1px solid ${oc.pink[9]};
background: ${oc.pink[8]};
color: white;
}
`
export default Tag;
