@use 'sass:map'; @use 'sass:math'; @use 'sass:color'; @function multiply($fore, $back) { $red: math.div(color.red($back) * color.red($fore), 255); $green: math.div(color.green($back) * color.green($fore), 255); $blue: math.div(color.blue($back) * color.blue($fore), 255); @return rgb($red, $green, $blue); } @function get-color-luminance($color) { $colors: ( red: color.red($color), green: color.green($color), blue: color.blue($color), ); @each $name, $value in $colors { $adjusted: 0; $value: math.div($value, 255); @if ($value < 0.0393) { $value: math.div($value, 12.92); } @else { $value: math.div($value + 0.055, 1.055); $value: math.pow($value, 2.4); } $colors: map.merge( $colors, ( $name: $value, ) ); } @return (map.get($colors, red) * 0.2126) + (map.get($colors, green) * 0.7152) + (map.get($colors, blue) * 0.0722); } @function create-text-color($color, $colorType: 'primary') { $red: color.red($color); $green: color.green($color); $blue: color.blue($color); $light-text: $light-primary-text; $dark-text: $dark-primary-text; @if $colorType == 'accent' { $light-text: $light-secondary-text; $dark-text: $dark-secondary-text; } $light-text-luminance: get-color-luminance($light-text); $dark-text-luminance: get-color-luminance($dark-text); $background-color-luminance: get-color-luminance($color); $light-text-luminance: $light-text-luminance + 0.5; $dark-text-luminance: $dark-text-luminance + 0.5; $background-color-luminance: $background-color-luminance + 0.5; $luminance-contrast-for-light-text: $light-text-luminance / $background-color-luminance; $luminance-contrast-for-dark-text: $background-color-luminance / $dark-text-luminance; $text-colour: $light-text; @if $luminance-contrast-for-dark-text > $luminance-contrast-for-light-text { $text-colour: $dark-text; } @return $text-colour; } @function create-color-palette($color, $colorType: 'primary') { $light: #fff; $dark: multiply($color, $color); $color50: color.mix($light, $color, 88%); $color100: color.mix($light, $color, 70%); $color200: color.mix($light, $color, 65%); $color300: color.mix($light, $color, 60%); $color400: color.mix($light, $color, 15%); $color500: color.mix($light, $color, 0%); $color600: color.mix($dark, $color, 13%); $color700: color.mix($dark, $color, 30%); $color800: color.mix($dark, $color, 46%); $color900: color.mix($dark, $color, 75%); /* stylelint-disable scss/dollar-variable-pattern */ $colorA100: color.adjust(saturate(color.mix($dark, $color, 15%), 80%), $lightness: 45.6%); $colorA200: color.adjust(saturate(color.mix($dark, $color, 15%), 80%), $lightness: 35.6%); $colorA400: color.adjust(saturate(color.mix($dark, $color, 15%), 100%), $lightness: 25.6%); $colorA700: color.adjust(saturate(color.mix($dark, $color, 15%), 100%), $lightness: 20.5%); /* stylelint-enable scss/dollar-variable-pattern */ $contrast50: create-text-color($color50, $colorType); $contrast100: create-text-color($color100, $colorType); $contrast200: create-text-color($color200, $colorType); $contrast300: create-text-color($color300, $colorType); $contrast400: create-text-color($color400, $colorType); $contrast500: create-text-color($color500, $colorType); $contrast600: create-text-color($color600, $colorType); $contrast700: create-text-color($color700, $colorType); $contrast800: create-text-color($color800, $colorType); $contrast900: create-text-color($color900, $colorType); /* stylelint-disable scss/dollar-variable-pattern */ $contrastA100: create-text-color($colorA100, $colorType); $contrastA200: create-text-color($colorA200, $colorType); $contrastA400: create-text-color($colorA400, $colorType); $contrastA700: create-text-color($colorA700, $colorType); /* stylelint-enable scss/dollar-variable-pattern */ $palette: ( 50: $color50, 100: $color100, 200: $color200, 300: $color300, 400: $color400, 500: $color500, 600: $color600, 700: $color700, 800: $color800, 900: $color900, /* stylelint-disable value-keyword-case */ A100: $colorA100, A200: $colorA200, A400: $colorA400, A700: $colorA700, /* stylelint-enable value-keyword-case */ contrast: ( 50: $contrast50, 100: $contrast100, 200: $contrast200, 300: $contrast300, 400: $contrast400, 500: $contrast500, 600: $contrast600, 700: $contrast700, 800: $contrast800, 900: $contrast900, /* stylelint-disable value-keyword-case */ A100: $contrastA100, A200: $contrastA200, A400: $contrastA400, A700: $contrastA700, /* stylelint-enable value-keyword-case */ ), ); @return $palette; }