How to use the polished.mix function in polished
To help you get started, we’ve selected a few polished 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.
AdaptiveConsulting / ReactiveTraderCloud / src / client / src / rt-theme / colors.ts View on Github 
L2: mix(2 / 10, whitePoint, base),
L1: mix(1 / 10, whitePoint, base),
base,
// Dark shades
D1: mix(1 / 10, blackPoint, base),
D2: mix(2 / 10, blackPoint, base),
D3: mix(3 / 10, blackPoint, base),
D4: mix(4 / 10, blackPoint, base),
D5: mix(5 / 10, blackPoint, base),
D6: mix(6 / 10, blackPoint, base),
D7: mix(7 / 10, blackPoint, base),
D8: mix(8 / 10, blackPoint, base),
D9: mix(9 / 10, blackPoint, base),
D10: mix(10 / 10, blackPoint, base),
// Overriding Computed Values
//
// Computed values may not be the same as those intended by
// the designer.
//
// Mixing colors is a transformation within a color space.
// Tools like Sketch or Photoshop implement non-linear
// transformations between two values.
//
// So, the result of
// mix(0.5, rgb(255, 0, 0), rgb(0, 0, 255))
// != rgb(127, 0, 127)
// it would be
// rgb(141, 0, 132) in sRGB
// rgb(128, 0, 128) in P3function createPalette({
base,
white: whitePoint = white.base,
black: blackPoint = black.base,
...overrides
}: Palette): ColorPalette {
return {
// Light shades
L10: mix(1, whitePoint, base),
L95: mix(0.95, whitePoint, base),
L9: mix(9 / 10, whitePoint, base),
L8: mix(8 / 10, whitePoint, base),
L7: mix(7 / 10, whitePoint, base),
L6: mix(6 / 10, whitePoint, base),
L5: mix(5 / 10, whitePoint, base),
L4: mix(4 / 10, whitePoint, base),
L3: mix(3 / 10, whitePoint, base),
L2: mix(2 / 10, whitePoint, base),
L1: mix(1 / 10, whitePoint, base),
base,
// Dark shades
D1: mix(1 / 10, blackPoint, base),
D2: mix(2 / 10, blackPoint, base),
D3: mix(3 / 10, blackPoint, base),
D4: mix(4 / 10, blackPoint, base),
D5: mix(5 / 10, blackPoint, base),
D6: mix(6 / 10, blackPoint, base),
D7: mix(7 / 10, blackPoint, base),function createPalette({
base,
white: whitePoint = white.base,
black: blackPoint = black.base,
...overrides
}: Palette): ColorPalette {
return {
// Light shades
L10: mix(1, whitePoint, base),
L95: mix(0.95, whitePoint, base),
L9: mix(9 / 10, whitePoint, base),
L8: mix(8 / 10, whitePoint, base),
L7: mix(7 / 10, whitePoint, base),
L6: mix(6 / 10, whitePoint, base),
L5: mix(5 / 10, whitePoint, base),
L4: mix(4 / 10, whitePoint, base),
L3: mix(3 / 10, whitePoint, base),
L2: mix(2 / 10, whitePoint, base),
L1: mix(1 / 10, whitePoint, base),
base,
// Dark shades
D1: mix(1 / 10, blackPoint, base),
D2: mix(2 / 10, blackPoint, base),
D3: mix(3 / 10, blackPoint, base),
D4: mix(4 / 10, blackPoint, base),
D5: mix(5 / 10, blackPoint, base),
D6: mix(6 / 10, blackPoint, base),
D7: mix(7 / 10, blackPoint, base),
D8: mix(8 / 10, blackPoint, base),function createPalette({
base,
white: whitePoint = white.base,
black: blackPoint = black.base,
...overrides
}: Palette): ColorPalette {
return {
// Light shades
L10: mix(1, whitePoint, base),
L95: mix(0.95, whitePoint, base),
L9: mix(9 / 10, whitePoint, base),
L8: mix(8 / 10, whitePoint, base),
L7: mix(7 / 10, whitePoint, base),
L6: mix(6 / 10, whitePoint, base),
L5: mix(5 / 10, whitePoint, base),
L4: mix(4 / 10, whitePoint, base),
L3: mix(3 / 10, whitePoint, base),
L2: mix(2 / 10, whitePoint, base),
L1: mix(1 / 10, whitePoint, base),
base,
// Dark shades
D1: mix(1 / 10, blackPoint, base),
D2: mix(2 / 10, blackPoint, base),
D3: mix(3 / 10, blackPoint, base),
D4: mix(4 / 10, blackPoint, base),
D5: mix(5 / 10, blackPoint, base),
D6: mix(6 / 10, blackPoint, base),
D7: mix(7 / 10, blackPoint, base),
D8: mix(8 / 10, blackPoint, base),function createPalette({
base,
white: whitePoint = white.base,
black: blackPoint = black.base,
...overrides
}: Palette): ColorPalette {
return {
// Light shades
L10: mix(1, whitePoint, base),
L95: mix(0.95, whitePoint, base),
L9: mix(9 / 10, whitePoint, base),
L8: mix(8 / 10, whitePoint, base),
L7: mix(7 / 10, whitePoint, base),
L6: mix(6 / 10, whitePoint, base),
L5: mix(5 / 10, whitePoint, base),
L4: mix(4 / 10, whitePoint, base),
L3: mix(3 / 10, whitePoint, base),
L2: mix(2 / 10, whitePoint, base),
L1: mix(1 / 10, whitePoint, base),
base,
// Dark shades
D1: mix(1 / 10, blackPoint, base),
D2: mix(2 / 10, blackPoint, base),
D3: mix(3 / 10, blackPoint, base),function createPalette({
base,
white: whitePoint = white.base,
black: blackPoint = black.base,
...overrides
}: Palette): ColorPalette {
return {
// Light shades
L10: mix(1, whitePoint, base),
L95: mix(0.95, whitePoint, base),
L9: mix(9 / 10, whitePoint, base),
L8: mix(8 / 10, whitePoint, base),
L7: mix(7 / 10, whitePoint, base),
L6: mix(6 / 10, whitePoint, base),
L5: mix(5 / 10, whitePoint, base),
L4: mix(4 / 10, whitePoint, base),
L3: mix(3 / 10, whitePoint, base),
L2: mix(2 / 10, whitePoint, base),
L1: mix(1 / 10, whitePoint, base),
base,
// Dark shades
D1: mix(1 / 10, blackPoint, base),
D2: mix(2 / 10, blackPoint, base),
D3: mix(3 / 10, blackPoint, base),
D4: mix(4 / 10, blackPoint, base),
D5: mix(5 / 10, blackPoint, base),
D6: mix(6 / 10, blackPoint, base),
D7: mix(7 / 10, blackPoint, base),
D8: mix(8 / 10, blackPoint, base),
D9: mix(9 / 10, blackPoint, base),function createPalette({
base,
white: whitePoint = white.base,
black: blackPoint = black.base,
...overrides
}: Palette): ColorPalette {
return {
// Light shades
L10: mix(1, whitePoint, base),
L95: mix(0.95, whitePoint, base),
L9: mix(9 / 10, whitePoint, base),
L8: mix(8 / 10, whitePoint, base),
L7: mix(7 / 10, whitePoint, base),
L6: mix(6 / 10, whitePoint, base),
L5: mix(5 / 10, whitePoint, base),
L4: mix(4 / 10, whitePoint, base),
L3: mix(3 / 10, whitePoint, base),
L2: mix(2 / 10, whitePoint, base),
L1: mix(1 / 10, whitePoint, base),
base,
// Dark shades
D1: mix(1 / 10, blackPoint, base),
D2: mix(2 / 10, blackPoint, base),
D3: mix(3 / 10, blackPoint, base),
D4: mix(4 / 10, blackPoint, base),
D5: mix(5 / 10, blackPoint, base),
D6: mix(6 / 10, blackPoint, base),
D7: mix(7 / 10, blackPoint, base),
D8: mix(8 / 10, blackPoint, base),
D9: mix(9 / 10, blackPoint, base),base,
white: whitePoint = white.base,
black: blackPoint = black.base,
...overrides
}: Palette): ColorPalette {
return {
// Light shades
L10: mix(1, whitePoint, base),
L95: mix(0.95, whitePoint, base),
L9: mix(9 / 10, whitePoint, base),
L8: mix(8 / 10, whitePoint, base),
L7: mix(7 / 10, whitePoint, base),
L6: mix(6 / 10, whitePoint, base),
L5: mix(5 / 10, whitePoint, base),
L4: mix(4 / 10, whitePoint, base),
L3: mix(3 / 10, whitePoint, base),
L2: mix(2 / 10, whitePoint, base),
L1: mix(1 / 10, whitePoint, base),
base,
// Dark shades
D1: mix(1 / 10, blackPoint, base),
D2: mix(2 / 10, blackPoint, base),
D3: mix(3 / 10, blackPoint, base),
D4: mix(4 / 10, blackPoint, base),
D5: mix(5 / 10, blackPoint, base),
D6: mix(6 / 10, blackPoint, base),
D7: mix(7 / 10, blackPoint, base),
D8: mix(8 / 10, blackPoint, base),
D9: mix(9 / 10, blackPoint, base),
D10: mix(10 / 10, blackPoint, base), color: ${props => mix(0.85, "#F90B61", props.theme.color.foreground)};
} color: ${props => mix(0.85, "#9458FF", props.theme.color.foreground)};
}polished
A lightweight toolset for writing styles in Javascript.
Package Health Score
88 / 100Popular polished functions
- polished.darken
- polished.lighten
- polished.margin
- polished.mix
- polished.modularScale
- polished.padding
- polished.parseToHsl
- polished.parseToRgb
- polished.readableColor
- polished.rem
- polished.rgba
- polished.shade
- polished.size
- polished.stripUnit
- polished.tint
- polished.toColorString
- polished.transparentize
- polished/lib/color/darken
- polished/lib/color/lighten
- polished/lib/color/rgba