[PM-2866] - Update color variables for better contrast (#6078)
* Update variables.scss * update toast text color to have better WCAG contrast * added toastcolor variables * Update window.main.ts * Tweaked styles * darkened backgroundAlt2 and button background * lightened button border * lightened button backgroundColor * Update window.main.ts * updated brand colors and added toastTextColor variable * lightened solarize danger variable to meet WCAG contrast with dark text * updated browser solarize variable to match tw-theme.css
This commit is contained in:
parent
6bf559b932
commit
c8c314dd35
|
@ -24,10 +24,10 @@ $gray-light: #777;
|
|||
$text-muted: $gray-light;
|
||||
|
||||
$brand-primary: #175ddc;
|
||||
$brand-danger: #dd4b39;
|
||||
$brand-success: #00a65a;
|
||||
$brand-danger: #c83522;
|
||||
$brand-success: #017e45;
|
||||
$brand-info: #555555;
|
||||
$brand-warning: #bf7e16;
|
||||
$brand-warning: #8b6609;
|
||||
$brand-primary-accent: #1252a3;
|
||||
|
||||
$background-color: #f0f0f0;
|
||||
|
@ -237,7 +237,7 @@ $themes: (
|
|||
passwordCountText: $nord5,
|
||||
calloutBorderColor: $nord0,
|
||||
calloutBackgroundColor: $nord2,
|
||||
toastTextColor: #ffffff,
|
||||
toastTextColor: #000000,
|
||||
svgSuffix: "-dark.svg",
|
||||
transparentColor: rgba(0, 0, 0, 0),
|
||||
dateInputColorScheme: dark,
|
||||
|
@ -299,7 +299,7 @@ $themes: (
|
|||
passwordCountText: $solarizedDarkBase2,
|
||||
calloutBorderColor: $solarizedDarkBase03,
|
||||
calloutBackgroundColor: $solarizedDarkBase01,
|
||||
toastTextColor: #ffffff,
|
||||
toastTextColor: #000000,
|
||||
svgSuffix: "-solarized.svg",
|
||||
transparentColor: rgba(0, 0, 0, 0),
|
||||
dateInputColorScheme: dark,
|
||||
|
|
|
@ -20,10 +20,10 @@ $gray-light: #777;
|
|||
$text-muted: $gray-light;
|
||||
|
||||
$brand-primary: #175ddc;
|
||||
$brand-danger: #dd4b39;
|
||||
$brand-success: #00a65a;
|
||||
$brand-danger: #c83522;
|
||||
$brand-success: #017e45;
|
||||
$brand-info: #555555;
|
||||
$brand-warning: #bf7e16;
|
||||
$brand-warning: #8b6609;
|
||||
$brand-primary-accent: #1252a3;
|
||||
|
||||
$background-color: white;
|
||||
|
@ -211,7 +211,7 @@ $themes: (
|
|||
passwordCountText: $nord5,
|
||||
calloutBorderColor: $nord1,
|
||||
calloutBackgroundColor: $nord2,
|
||||
toastTextColor: #ffffff,
|
||||
toastTextColor: #000000,
|
||||
accountSwitcherBackgroundColor: $nord0,
|
||||
accountSwitcherTextColor: $nord5,
|
||||
svgSuffix: "-dark.svg",
|
||||
|
|
|
@ -4,10 +4,10 @@ $primary: #175ddc;
|
|||
$primary-accent: #1252a3;
|
||||
$secondary: #ced4da;
|
||||
$secondary-alt: #1a3b66;
|
||||
$success: #00a65a;
|
||||
$success: #017e45;
|
||||
$info: #555555;
|
||||
$warning: #bf7e16;
|
||||
$danger: #dd4b39;
|
||||
$warning: #8b6609;
|
||||
$danger: #c83522;
|
||||
$white: #ffffff;
|
||||
|
||||
// Bootstrap Variable Overrides
|
||||
|
|
|
@ -151,7 +151,7 @@
|
|||
|
||||
--color-text-main: 253 246 227;
|
||||
--color-text-muted: 147 161 161;
|
||||
--color-text-contrast: 0 43 54;
|
||||
--color-text-contrast: 0 0 0;
|
||||
--color-text-alt2: 255 255 255;
|
||||
--color-text-code: 240 141 199;
|
||||
|
||||
|
|
|
@ -4,10 +4,10 @@ $primary: #175ddc;
|
|||
$primary-accent: #1252a3;
|
||||
$secondary: #ced4da;
|
||||
$secondary-alt: #1a3b66;
|
||||
$success: #00a65a;
|
||||
$success: #017e45;
|
||||
$info: #555555;
|
||||
$warning: #bf7e16;
|
||||
$danger: #dd4b39;
|
||||
$warning: #8b6609;
|
||||
$danger: #c83522;
|
||||
$white: #ffffff;
|
||||
|
||||
// Bootstrap Variable Overrides
|
||||
|
@ -85,7 +85,7 @@ $mfaTypes: 0, 2, 3, 4, 6;
|
|||
// Theme Variables
|
||||
// Light
|
||||
|
||||
$lightDangerHover: #c43421;
|
||||
$lightDangerHover: #c83522;
|
||||
$lightInputColor: #465057;
|
||||
$lightInputPlaceholderColor: #b6b8b8;
|
||||
|
||||
|
|
Loading…
Reference in New Issue