vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[PM-1509] Accessibility for <code> elements (#5686) 

* change code color to meet accessibility requirements

* updates to desktop and web

* adjust colors for desktop, web, and browser

* update color values

* switch nord color to use same as Tailwind theme

* align variable names
This commit is contained in:
rr-bw 2023-09-01 13:18:20 -07:00 committed by GitHub
parent 326b24e655
commit bf7aa6473e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,6 +43,10 @@ $button-color: lighten($text-color, 40%);
$button-color-primary: darken($brand-primary, 8%);
$button-color-danger: darken($brand-danger, 10%);
$code-color: #c01176;
$code-color-dark: #f08dc7;
$code-color-nord: #dbb1d5;
$solarizedDarkBase03: #002b36;
$solarizedDarkBase02: #073642;
$solarizedDarkBase01: #586e75;
@ -122,7 +126,7 @@ $themes: (
// light has no hover so use same color
webkitCalendarPickerHoverFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
brightness(85%) contrast(103%),
codeColor: #e83e8c,
codeColor: $code-color,
),
dark: (
textColor: #ffffff,
@ -184,7 +188,7 @@ $themes: (
hue-rotate(184deg) brightness(87%) contrast(93%),
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(100%) sepia(0%)
saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%),
codeColor: #e83e8c,
codeColor: $code-color-dark,
),
nord: (
textColor: $nord5,
@ -246,7 +250,7 @@ $themes: (
// has no hover so use same color
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(5%)
saturate(454%) hue-rotate(185deg) brightness(93%) contrast(96%),
codeColor: #e83e8c,
codeColor: $code-color-nord,
),
solarizedDark: (
textColor: $solarizedDarkBase2,
@ -307,7 +311,7 @@ $themes: (
hue-rotate(138deg) brightness(92%) contrast(90%),
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(10%)
saturate(462%) hue-rotate(345deg) brightness(103%) contrast(87%),
codeColor: #e83e8c,
codeColor: $code-color-dark,
),
);

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

@ -41,7 +41,9 @@ $button-color: lighten($text-color, 40%);
$button-color-primary: darken($brand-primary, 8%);
$button-color-danger: darken($brand-danger, 10%);
$code-color: #e83e8c;
$code-color: #c01176;
$code-color-dark: #f08dc7;
$code-color-nord: #dbb1d5;
$themes: (
light: (
@ -158,7 +160,7 @@ $themes: (
accountSwitcherTextColor: #ffffff,
svgSuffix: "-dark.svg",
hrColor: #bac0ce,
codeColor: $code-color,
codeColor: $code-color-dark,
),
nord: (
textColor: $nord5,
@ -216,7 +218,7 @@ $themes: (
accountSwitcherTextColor: $nord5,
svgSuffix: "-dark.svg",
hrColor: $nord4,
codeColor: $code-color,
codeColor: $code-color-nord,
),
);

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

@ -88,6 +88,7 @@ $mfaTypes: 0, 2, 3, 4, 6;
$lightDangerHover: #c43421;
$lightInputColor: #465057;
$lightInputPlaceholderColor: #b6b8b8;
$lightCodeColor: #c01176;
// Dark
@ -107,6 +108,7 @@ $darkDarkBlue1: #2f343d;
$darkDarkBlue2: #1f242e;
$darkInputColor: $white;
$darkInputPlaceholderColor: $darkGrey1;
$darkCodeColor: #f08dc7;
$themes: (
light: (
@ -167,7 +169,7 @@ $themes: (
calloutBackground: #fafafa,
calloutColor: #212529,
cdkDraggingBackground: $white,
codeColor: #e83e8c,
codeColor: $lightCodeColor,
dropdownBackground: $white,
dropdownHover: rgba(0, 0, 0, 0.06),
dropdownTextColor: $body-color,
@ -276,7 +278,7 @@ $themes: (
calloutBackground: $darkBlue2,
calloutColor: $white,
cdkDraggingBackground: $darkDarkBlue1,
codeColor: #e83e8c,
codeColor: $darkCodeColor,
dropdownBackground: $darkDarkBlue1,
dropdownHover: rgba(255, 255, 255, 0.03),
dropdownTextColor: $white,