From 7993175e1a71f090e2d92cce72df3677d6e525aa Mon Sep 17 00:00:00 2001 From: Nilis24 <nilisern.m@gmail.com> Date: Tue, 4 May 2021 15:26:14 +0200 Subject: [PATCH] color variables reorganized --- scss/_variables.scss | 292 +++++++++++++++++++------------------------ 1 file changed, 131 insertions(+), 161 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 1e17606f41..90d1900858 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -36,168 +36,138 @@ $grays: ( // fusv-enable // scss-docs-start color-variables -$blue: #0d6efd !default; -$indigo: #6610f2 !default; -$purple: #6f42c1 !default; -$pink: #d63384 !default; -$red: #dc3545 !default; -$orange: #fd7e14 !default; -$yellow: #ffc107 !default; -$green: #198754 !default; -$teal: #20c997 !default; -$cyan: #0dcaf0 !default; -// scss-docs-end color-variables - -// scss-docs-start colors-map $colors: ( - "blue": $blue, - "indigo": $indigo, - "purple": $purple, - "pink": $pink, - "red": $red, - "orange": $orange, - "yellow": $yellow, - "green": $green, - "teal": $teal, - "cyan": $cyan, - "white": $white, - "gray": $gray-600, - "gray-dark": $gray-800 -) !default; -// scss-docs-end colors-map - -// scss-docs-start theme-color-variables -$primary: $blue !default; -$secondary: $gray-600 !default; -$success: $green !default; -$info: $cyan !default; -$warning: $yellow !default; -$danger: $red !default; -$light: $gray-100 !default; -$dark: $gray-900 !default; -// scss-docs-end theme-color-variables - -// scss-docs-start theme-colors-map -$theme-colors: ( - "primary": $primary, - "secondary": $secondary, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "light": $light, - "dark": $dark -) !default; -// scss-docs-end theme-colors-map - -// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. -// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast -$min-contrast-ratio: 4.5 !default; - -// Customize the light and dark text colors for use in our color contrast function. -$color-contrast-dark: $black !default; -$color-contrast-light: $white !default; - -// fusv-disable -$blue-100: tint-color($blue, 80%) !default; -$blue-200: tint-color($blue, 60%) !default; -$blue-300: tint-color($blue, 40%) !default; -$blue-400: tint-color($blue, 20%) !default; -$blue-500: $blue !default; -$blue-600: shade-color($blue, 20%) !default; -$blue-700: shade-color($blue, 40%) !default; -$blue-800: shade-color($blue, 60%) !default; -$blue-900: shade-color($blue, 80%) !default; - -$indigo-100: tint-color($indigo, 80%) !default; -$indigo-200: tint-color($indigo, 60%) !default; -$indigo-300: tint-color($indigo, 40%) !default; -$indigo-400: tint-color($indigo, 20%) !default; -$indigo-500: $indigo !default; -$indigo-600: shade-color($indigo, 20%) !default; -$indigo-700: shade-color($indigo, 40%) !default; -$indigo-800: shade-color($indigo, 60%) !default; -$indigo-900: shade-color($indigo, 80%) !default; - -$purple-100: tint-color($purple, 80%) !default; -$purple-200: tint-color($purple, 60%) !default; -$purple-300: tint-color($purple, 40%) !default; -$purple-400: tint-color($purple, 20%) !default; -$purple-500: $purple !default; -$purple-600: shade-color($purple, 20%) !default; -$purple-700: shade-color($purple, 40%) !default; -$purple-800: shade-color($purple, 60%) !default; -$purple-900: shade-color($purple, 80%) !default; - -$pink-100: tint-color($pink, 80%) !default; -$pink-200: tint-color($pink, 60%) !default; -$pink-300: tint-color($pink, 40%) !default; -$pink-400: tint-color($pink, 20%) !default; -$pink-500: $pink !default; -$pink-600: shade-color($pink, 20%) !default; -$pink-700: shade-color($pink, 40%) !default; -$pink-800: shade-color($pink, 60%) !default; -$pink-900: shade-color($pink, 80%) !default; - -$red-100: tint-color($red, 80%) !default; -$red-200: tint-color($red, 60%) !default; -$red-300: tint-color($red, 40%) !default; -$red-400: tint-color($red, 20%) !default; -$red-500: $red !default; -$red-600: shade-color($red, 20%) !default; -$red-700: shade-color($red, 40%) !default; -$red-800: shade-color($red, 60%) !default; -$red-900: shade-color($red, 80%) !default; - -$orange-100: tint-color($orange, 80%) !default; -$orange-200: tint-color($orange, 60%) !default; -$orange-300: tint-color($orange, 40%) !default; -$orange-400: tint-color($orange, 20%) !default; -$orange-500: $orange !default; -$orange-600: shade-color($orange, 20%) !default; -$orange-700: shade-color($orange, 40%) !default; -$orange-800: shade-color($orange, 60%) !default; -$orange-900: shade-color($orange, 80%) !default; - -$yellow-100: tint-color($yellow, 80%) !default; -$yellow-200: tint-color($yellow, 60%) !default; -$yellow-300: tint-color($yellow, 40%) !default; -$yellow-400: tint-color($yellow, 20%) !default; -$yellow-500: $yellow !default; -$yellow-600: shade-color($yellow, 20%) !default; -$yellow-700: shade-color($yellow, 40%) !default; -$yellow-800: shade-color($yellow, 60%) !default; -$yellow-900: shade-color($yellow, 80%) !default; - -$green-100: tint-color($green, 80%) !default; -$green-200: tint-color($green, 60%) !default; -$green-300: tint-color($green, 40%) !default; -$green-400: tint-color($green, 20%) !default; -$green-500: $green !default; -$green-600: shade-color($green, 20%) !default; -$green-700: shade-color($green, 40%) !default; -$green-800: shade-color($green, 60%) !default; -$green-900: shade-color($green, 80%) !default; - -$teal-100: tint-color($teal, 80%) !default; -$teal-200: tint-color($teal, 60%) !default; -$teal-300: tint-color($teal, 40%) !default; -$teal-400: tint-color($teal, 20%) !default; -$teal-500: $teal !default; -$teal-600: shade-color($teal, 20%) !default; -$teal-700: shade-color($teal, 40%) !default; -$teal-800: shade-color($teal, 60%) !default; -$teal-900: shade-color($teal, 80%) !default; - -$cyan-100: tint-color($cyan, 80%) !default; -$cyan-200: tint-color($cyan, 60%) !default; -$cyan-300: tint-color($cyan, 40%) !default; -$cyan-400: tint-color($cyan, 20%) !default; -$cyan-500: $cyan !default; -$cyan-600: shade-color($cyan, 20%) !default; -$cyan-700: shade-color($cyan, 40%) !default; -$cyan-800: shade-color($cyan, 60%) !default; -$cyan-900: shade-color($cyan, 80%) !default; + "blue":#0d6efd, + "indigo":#661000f2, + "purple":#6f42c100, + "pink":#d63384, + "red":#dc3545, + "orange":#fd7e1004, + "yellow":#ffc10007, + "green":#10098754, + "teal":#20c997, + "cyan":#0dcaf0, +); + +$blue-tints: ( + "blue-100": lighten(map-get($colors, "blue"), 80%), + "blue-200": lighten(map-get($colors, "blue"), 60%), + "blue-300": lighten(map-get($colors, "blue"), 40%), + "blue-400": lighten(map-get($colors, "blue"), 20%), + "blue-500": map-get($colors, "blue"), + "blue-600": darken(map-get($colors, "blue"), 20%), + "blue-700": darken(map-get($colors, "blue"), 40%), + "blue-800": darken(map-get($colors, "blue"), 60%), + "blue-900": darken(map-get($colors, "blue"), 80%), +); + +$indigo-tints: ( + "indigo-100": lighten(map-get($colors, "indigo"), 80%), + "indigo-200": lighten(map-get($colors, "indigo"), 60%), + "indigo-300": lighten(map-get($colors, "indigo"), 40%), + "indigo-400": lighten(map-get($colors, "indigo"), 20%), + "indigo-500": map-get($colors, "indigo"), + "indigo-600": darken(map-get($colors, "indigo"), 20%), + "indigo-700": darken(map-get($colors, "indigo"), 40%), + "indigo-800": darken(map-get($colors, "indigo"), 60%), + "indigo-900": darken(map-get($colors, "indigo"), 80%), +); + +$purple-tints: ( + "purple-100": lighten(map-get($colors, "purple"), 80%), + "purple-200": lighten(map-get($colors, "purple"), 60%), + "purple-300": lighten(map-get($colors, "purple"), 40%), + "purple-400": lighten(map-get($colors, "purple"), 20%), + "purple-500": map-get($colors, "purple"), + "purple-600": darken(map-get($colors, "purple"), 20%), + "purple-700": darken(map-get($colors, "purple"), 40%), + "purple-800": darken(map-get($colors, "purple"), 60%), + "purple-900": darken(map-get($colors, "purple"), 80%), +); + +$pink-tints: ( + "pink-100": lighten(map-get($colors, "pink"), 80%), + "pink-200": lighten(map-get($colors, "pink"), 60%), + "pink-300": lighten(map-get($colors, "pink"), 40%), + "pink-400": lighten(map-get($colors, "pink"), 20%), + "pink-500": map-get($colors, "pink"), + "pink-600": darken(map-get($colors, "pink"), 20%), + "pink-700": darken(map-get($colors, "pink"), 40%), + "pink-800": darken(map-get($colors, "pink"), 60%), + "pink-900": darken(map-get($colors, "pink"), 80%), +); + +$red-tints: ( + "red-100": lighten(map-get($colors, "red"), 80%), + "red-200": lighten(map-get($colors, "red"), 60%), + "red-300": lighten(map-get($colors, "red"), 40%), + "red-400": lighten(map-get($colors, "red"), 20%), + "red-500": map-get($colors, "red"), + "red-600": darken(map-get($colors, "red"), 20%), + "red-700": darken(map-get($colors, "red"), 40%), + "red-800": darken(map-get($colors, "red"), 60%), + "red-900": darken(map-get($colors, "red"), 80%), +); + +$orange-tints: ( + "orange-100": lighten(map-get($colors, "orange"), 80%), + "orange-200": lighten(map-get($colors, "orange"), 60%), + "orange-300": lighten(map-get($colors, "orange"), 40%), + "orange-400": lighten(map-get($colors, "orange"), 20%), + "orange-500": map-get($colors, "orange"), + "orange-600": darken(map-get($colors, "orange"), 20%), + "orange-700": darken(map-get($colors, "orange"), 40%), + "orange-800": darken(map-get($colors, "orange"), 60%), + "orange-900": darken(map-get($colors, "orange"), 80%), +); + +$yellow-tints: ( + "yellow-100": lighten(map-get($colors, "yellow"), 80%), + "yellow-200": lighten(map-get($colors, "yellow"), 60%), + "yellow-300": lighten(map-get($colors, "yellow"), 40%), + "yellow-400": lighten(map-get($colors, "yellow"), 20%), + "yellow-500": map-get($colors, "yellow"), + "yellow-600": darken(map-get($colors, "yellow"), 20%), + "yellow-700": darken(map-get($colors, "yellow"), 40%), + "yellow-800": darken(map-get($colors, "yellow"), 60%), + "yellow-900": darken(map-get($colors, "yellow"), 80%), +); + +$green-tints: ( + "green-100": lighten(map-get($colors, "green"), 80%), + "green-200": lighten(map-get($colors, "green"), 60%), + "green-300": lighten(map-get($colors, "green"), 40%), + "green-400": lighten(map-get($colors, "green"), 20%), + "green-500": map-get($colors, "green"), + "green-600": darken(map-get($colors, "green"), 20%), + "green-700": darken(map-get($colors, "green"), 40%), + "green-800": darken(map-get($colors, "green"), 60%), + "green-900": darken(map-get($colors, "green"), 80%), +); + +$teal-tints: ( + "teal-100": lighten(map-get($colors, "teal"), 80%), + "teal-200": lighten(map-get($colors, "teal"), 60%), + "teal-300": lighten(map-get($colors, "teal"), 40%), + "teal-400": lighten(map-get($colors, "teal"), 20%), + "teal-500": map-get($colors, "teal"), + "teal-600": darken(map-get($colors, "teal"), 20%), + "teal-700": darken(map-get($colors, "teal"), 40%), + "teal-800": darken(map-get($colors, "teal"), 60%), + "teal-900": darken(map-get($colors, "teal"), 80%), +); + +$cyan-tints: ( + "cyan-100": lighten(map-get($colors, "cyan"), 80%), + "cyan-200": lighten(map-get($colors, "cyan"), 60%), + "cyan-300": lighten(map-get($colors, "cyan"), 40%), + "cyan-400": lighten(map-get($colors, "cyan"), 20%), + "cyan-500": map-get($colors, "cyan"), + "cyan-600": darken(map-get($colors, "cyan"), 20%), + "cyan-700": darken(map-get($colors, "cyan"), 40%), + "cyan-800": darken(map-get($colors, "cyan"), 60%), + "cyan-900": darken(map-get($colors, "cyan"), 80%), +); // fusv-enable // Characters which are escaped by the escape-svg function -- GitLab