bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 23:33:31 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
* 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
3 changed files with 17 additions and 9 deletions
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-primary: darken($brand-primary, 8%);
$button-color-danger: darken($brand-danger, 10%); $button-color-danger: darken($brand-danger, 10%);
$code-color: #c01176;
$code-color-dark: #f08dc7;
$code-color-nord: #dbb1d5;
$solarizedDarkBase03: #002b36; $solarizedDarkBase03: #002b36;
$solarizedDarkBase02: #073642; $solarizedDarkBase02: #073642;
$solarizedDarkBase01: #586e75; $solarizedDarkBase01: #586e75;
@@ -122,7 +126,7 @@ $themes: (
// light has no hover so use same color // light has no hover so use same color
webkitCalendarPickerHoverFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg) webkitCalendarPickerHoverFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
brightness(85%) contrast(103%), brightness(85%) contrast(103%),
codeColor: #e83e8c, codeColor: $code-color,
), ),
dark: ( dark: (
textColor: #ffffff, textColor: #ffffff,
@@ -184,7 +188,7 @@ $themes: (
hue-rotate(184deg) brightness(87%) contrast(93%), hue-rotate(184deg) brightness(87%) contrast(93%),
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(100%) sepia(0%) webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(100%) sepia(0%)
saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%), saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%),
codeColor: #e83e8c, codeColor: $code-color-dark,
), ),
nord: ( nord: (
textColor: $nord5, textColor: $nord5,
@@ -246,7 +250,7 @@ $themes: (
// has no hover so use same color // has no hover so use same color
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(5%) webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(5%)
saturate(454%) hue-rotate(185deg) brightness(93%) contrast(96%), saturate(454%) hue-rotate(185deg) brightness(93%) contrast(96%),
codeColor: #e83e8c, codeColor: $code-color-nord,
), ),
solarizedDark: ( solarizedDark: (
textColor: $solarizedDarkBase2, textColor: $solarizedDarkBase2,
@@ -307,7 +311,7 @@ $themes: (
hue-rotate(138deg) brightness(92%) contrast(90%), hue-rotate(138deg) brightness(92%) contrast(90%),
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(10%) webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(10%)
saturate(462%) hue-rotate(345deg) brightness(103%) contrast(87%), 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-primary: darken($brand-primary, 8%);
$button-color-danger: darken($brand-danger, 10%); $button-color-danger: darken($brand-danger, 10%);
$code-color: #e83e8c; $code-color: #c01176;
$code-color-dark: #f08dc7;
$code-color-nord: #dbb1d5;
$themes: ( $themes: (
light: ( light: (
@@ -158,7 +160,7 @@ $themes: (
accountSwitcherTextColor: #ffffff, accountSwitcherTextColor: #ffffff,
svgSuffix: "-dark.svg", svgSuffix: "-dark.svg",
hrColor: #bac0ce, hrColor: #bac0ce,
codeColor: $code-color, codeColor: $code-color-dark,
), ),
nord: ( nord: (
textColor: $nord5, textColor: $nord5,
@@ -216,7 +218,7 @@ $themes: (
accountSwitcherTextColor: $nord5, accountSwitcherTextColor: $nord5,
svgSuffix: "-dark.svg", svgSuffix: "-dark.svg",
hrColor: $nord4, 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; $lightDangerHover: #c43421;
$lightInputColor: #465057; $lightInputColor: #465057;
$lightInputPlaceholderColor: #b6b8b8; $lightInputPlaceholderColor: #b6b8b8;
$lightCodeColor: #c01176;
// Dark // Dark
@@ -107,6 +108,7 @@ $darkDarkBlue1: #2f343d;
$darkDarkBlue2: #1f242e; $darkDarkBlue2: #1f242e;
$darkInputColor: $white; $darkInputColor: $white;
$darkInputPlaceholderColor: $darkGrey1; $darkInputPlaceholderColor: $darkGrey1;
$darkCodeColor: #f08dc7;
$themes: ( $themes: (
light: ( light: (
@@ -167,7 +169,7 @@ $themes: (
calloutBackground: #fafafa, calloutBackground: #fafafa,
calloutColor: #212529, calloutColor: #212529,
cdkDraggingBackground: $white, cdkDraggingBackground: $white,
codeColor: #e83e8c, codeColor: $lightCodeColor,
dropdownBackground: $white, dropdownBackground: $white,
dropdownHover: rgba(0, 0, 0, 0.06), dropdownHover: rgba(0, 0, 0, 0.06),
dropdownTextColor: $body-color, dropdownTextColor: $body-color,
@@ -276,7 +278,7 @@ $themes: (
calloutBackground: $darkBlue2, calloutBackground: $darkBlue2,
calloutColor: $white, calloutColor: $white,
cdkDraggingBackground: $darkDarkBlue1, cdkDraggingBackground: $darkDarkBlue1,
codeColor: #e83e8c, codeColor: $darkCodeColor,
dropdownBackground: $darkDarkBlue1, dropdownBackground: $darkDarkBlue1,
dropdownHover: rgba(255, 255, 255, 0.03), dropdownHover: rgba(255, 255, 255, 0.03),
dropdownTextColor: $white, dropdownTextColor: $white,