1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-07-02 11:34:53 +02:00

[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:
Danielle Flinn 2023-08-29 13:42:56 -07:00 committed by GitHub
parent 6bf559b932
commit c8c314dd35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 17 deletions

View File

@ -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,

View File

@ -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",

View File

@ -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

View File

@ -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;

View File

@ -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;