V

Computing Complementary UI Colors From Primary Color

🚧 WIP
hex
r
g
b
a
export default {
colors: {
primary: "#0984e3", // blue
text: "hsl(0, 0%, 10%)",
background: "white",
modes: {
dark: {
primary: "#0984e3", // blue
text: "hsl(255, 0%,95%)",
background: "hsl(0, 0%, 5%)",
},
},
},
forms: {
input: {
bg: "background",
borderColor: mix("primary", "background", 0.3),
color: mix("primary", "text", 0.35),
outline: "none", // this is bad A11Y, but we replace it with border on next line
":focus": { borderColor: mix("primary", "background", 0.8) },
"::placeholder": {
color: mix("primary", "text", 0.5),
opacity: 0.3
},
},
title: {
color: mix("primary", "text", 0.3)
}
}
}
  • https://theme-ui.com/packages/color
  • https://polished.js.org/docs
This site on Github RSS Twitter Dribbble Email me