Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-07-04 11:55:58 +02:00
Code Issues Projects Releases Wiki Activity

[PM-2866] - Update color variables for better contrast (#6078)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/browser/src/popup/scss/variables.scss
View File

@ -24,10 +24,10 @@ $gray-light: #777;
$text-muted: $gray-light; $text-muted: $gray-light;
$brand-primary: #175ddc; $brand-primary: #175ddc;
$brand-danger: #dd4b39; $brand-danger: #c83522;
$brand-success: #00a65a; $brand-success: #017e45;
$brand-info: #555555; $brand-info: #555555;
$brand-warning: #bf7e16; $brand-warning: #8b6609;
$brand-primary-accent: #1252a3; $brand-primary-accent: #1252a3;
$background-color: #f0f0f0; $background-color: #f0f0f0;
@ -237,7 +237,7 @@ $themes: (
passwordCountText: $nord5, passwordCountText: $nord5,
calloutBorderColor: $nord0, calloutBorderColor: $nord0,
calloutBackgroundColor: $nord2, calloutBackgroundColor: $nord2,
toastTextColor: #ffffff, toastTextColor: #000000,
svgSuffix: "-dark.svg", svgSuffix: "-dark.svg",
transparentColor: rgba(0, 0, 0, 0), transparentColor: rgba(0, 0, 0, 0),
dateInputColorScheme: dark, dateInputColorScheme: dark,
@ -299,7 +299,7 @@ $themes: (
passwordCountText: $solarizedDarkBase2, passwordCountText: $solarizedDarkBase2,
calloutBorderColor: $solarizedDarkBase03, calloutBorderColor: $solarizedDarkBase03,
calloutBackgroundColor: $solarizedDarkBase01, calloutBackgroundColor: $solarizedDarkBase01,
toastTextColor: #ffffff, toastTextColor: #000000,
svgSuffix: "-solarized.svg", svgSuffix: "-solarized.svg",
transparentColor: rgba(0, 0, 0, 0), transparentColor: rgba(0, 0, 0, 0),
dateInputColorScheme: dark, dateInputColorScheme: dark,

8
apps/desktop/src/scss/variables.scss
View File

@ -20,10 +20,10 @@ $gray-light: #777;
$text-muted: $gray-light; $text-muted: $gray-light;
$brand-primary: #175ddc; $brand-primary: #175ddc;
$brand-danger: #dd4b39; $brand-danger: #c83522;
$brand-success: #00a65a; $brand-success: #017e45;
$brand-info: #555555; $brand-info: #555555;
$brand-warning: #bf7e16; $brand-warning: #8b6609;
$brand-primary-accent: #1252a3; $brand-primary-accent: #1252a3;
$background-color: white; $background-color: white;
@ -211,7 +211,7 @@ $themes: (
passwordCountText: $nord5, passwordCountText: $nord5,
calloutBorderColor: $nord1, calloutBorderColor: $nord1,
calloutBackgroundColor: $nord2, calloutBackgroundColor: $nord2,
toastTextColor: #ffffff, toastTextColor: #000000,
accountSwitcherBackgroundColor: $nord0, accountSwitcherBackgroundColor: $nord0,
accountSwitcherTextColor: $nord5, accountSwitcherTextColor: $nord5,
svgSuffix: "-dark.svg", svgSuffix: "-dark.svg",

6
apps/web/src/scss/variables.scss
View File

@ -4,10 +4,10 @@ $primary: #175ddc;
$primary-accent: #1252a3; $primary-accent: #1252a3;
$secondary: #ced4da; $secondary: #ced4da;
$secondary-alt: #1a3b66; $secondary-alt: #1a3b66;
$success: #00a65a; $success: #017e45;
$info: #555555; $info: #555555;
$warning: #bf7e16; $warning: #8b6609;
$danger: #dd4b39; $danger: #c83522;
$white: #ffffff; $white: #ffffff;
// Bootstrap Variable Overrides // Bootstrap Variable Overrides

2
libs/components/src/tw-theme.css
View File

@ -151,7 +151,7 @@
--color-text-main: 253 246 227; --color-text-main: 253 246 227;
--color-text-muted: 147 161 161; --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-alt2: 255 255 255;
--color-text-code: 240 141 199; --color-text-code: 240 141 199;

8
libs/components/src/variables.scss
View File

@ -4,10 +4,10 @@ $primary: #175ddc;
$primary-accent: #1252a3; $primary-accent: #1252a3;
$secondary: #ced4da; $secondary: #ced4da;
$secondary-alt: #1a3b66; $secondary-alt: #1a3b66;
$success: #00a65a; $success: #017e45;
$info: #555555; $info: #555555;
$warning: #bf7e16; $warning: #8b6609;
$danger: #dd4b39; $danger: #c83522;
$white: #ffffff; $white: #ffffff;
// Bootstrap Variable Overrides // Bootstrap Variable Overrides
@ -85,7 +85,7 @@ $mfaTypes: 0, 2, 3, 4, 6;
// Theme Variables // Theme Variables
// Light // Light
$lightDangerHover: #c43421; $lightDangerHover: #c83522;
$lightInputColor: #465057; $lightInputColor: #465057;
$lightInputPlaceholderColor: #b6b8b8; $lightInputPlaceholderColor: #b6b8b8;