development/github-desktop
development/github-desktop
1
0
Fork 0
mirror of https://github.com/desktop/desktop synced 2024-09-19 16:12:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #16287 from desktop/niik/a11y-contrast

Browse source 
Button and text box contrast bumps
This commit is contained in:
Markus Olsson 2023-03-10 11:12:52 +01:00 committed by GitHub
parent 98076d8256 e52c3ae36d
commit 29d9a899c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/styles/_variables.scss
View file

@ -35,7 +35,9 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--link-button-hover-color: #{$blue-600}; --link-button-hover-color: #{$blue-600};
--link-button-selected-hover-color: #{$blue-200}; --link-button-selected-hover-color: #{$blue-200};
--secondary-button-background: #{$gray-000}; --secondary-button-background: #{$gray-100};
--secondary-button-border-color: var(--box-border-contrast-color);
--secondary-button-hover-border-color: var(--box-border-contrast-color);
--secondary-button-hover-background: #{$white}; --secondary-button-hover-background: #{$white};
--secondary-button-text-color: var(--text-color); --secondary-button-text-color: var(--text-color);
--secondary-button-focus-shadow-color: #{rgba($gray-200, 0.75)}; --secondary-button-focus-shadow-color: #{rgba($gray-200, 0.75)};
@ -113,6 +115,9 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
* Border color for boxes. * Border color for boxes.
*/ */
--box-border-color: #{$gray-200}; --box-border-color: #{$gray-200};
// darkened version of gray-400 to get 3:1 contrast ratio against --box-alt-background-color
--box-border-contrast-color: #{darken($gray-400, 5%)};
--box-border-accent-color: #{$blue}; --box-border-accent-color: #{$blue};
/** /**
@ -218,6 +223,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
// similar value than Chrome's default outline border radius. // similar value than Chrome's default outline border radius.
--outlined-border-radius: 3px; --outlined-border-radius: 3px;
--base-border: 1px solid var(--box-border-color); --base-border: 1px solid var(--box-border-color);
--contrast-border: 1px solid var(--box-border-contrast-color);
--shadow-color: rgba(71, 83, 95, 0.19); --shadow-color: rgba(71, 83, 95, 0.19);
--base-box-shadow: 0 2px 7px var(--shadow-color); --base-box-shadow: 0 2px 7px var(--shadow-color);

2
app/styles/mixins/_textboxish.scss
View file

@ -5,7 +5,7 @@
// It's a mix in because the styles are shared between inputs // It's a mix in because the styles are shared between inputs
// and select components. // and select components.
@mixin textboxish { @mixin textboxish {
border: 1px solid var(--box-border-color); border: var(--contrast-border);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: var(--box-background-color); background: var(--box-background-color);
color: currentColor; color: currentColor;

9
app/styles/themes/_dark.scss
View file

@ -32,6 +32,8 @@ body.theme-dark {
--link-button-selected-hover-color: #{$blue-300}; --link-button-selected-hover-color: #{$blue-300};
--secondary-button-background: #{$gray-800}; --secondary-button-background: #{$gray-800};
--secondary-button-border-color: var(--box-border-contrast-color);
--secondary-button-hover-border-color: #{$gray-300};
--secondary-button-hover-background: var(--secondary-button-background); --secondary-button-hover-background: var(--secondary-button-background);
--secondary-button-text-color: var(--text-color); --secondary-button-text-color: var(--text-color);
--secondary-button-focus-shadow-color: #{rgba($gray-200, 0.75)}; --secondary-button-focus-shadow-color: #{rgba($gray-200, 0.75)};
@ -67,7 +69,7 @@ body.theme-dark {
// to decide what states to support (active selection, selection, etc). // to decide what states to support (active selection, selection, etc).
--box-background-color: #{darken($gray-900, 3%)}; --box-background-color: #{darken($gray-900, 3%)};
--box-alt-background-color: #{$gray-800}; --box-alt-background-color: #{lighten($gray-900, 3%)};
/** /**
* Background color for skeleton or "loading" boxes * Background color for skeleton or "loading" boxes
@ -79,6 +81,10 @@ body.theme-dark {
* Border color for boxes. * Border color for boxes.
*/ */
--box-border-color: #141414; --box-border-color: #141414;
// slightly lighter of gray-500 to get 3:1 contrast ratio against
// --box-alt-background-color
--box-border-contrast-color: #{lighten($gray-500, 3%)};
--box-border-accent-color: #{$blue}; --box-border-accent-color: #{$blue};
/** /**
@ -146,6 +152,7 @@ body.theme-dark {
--co-author-tag-border-color: #{$blue-700}; --co-author-tag-border-color: #{$blue-700};
--base-border: 1px solid var(--box-border-color); --base-border: 1px solid var(--box-border-color);
--contrast-border: 1px solid var(--box-border-contrast-color);
--shadow-color: #{rgba(black, 0.5)}; --shadow-color: #{rgba(black, 0.5)};
--base-box-shadow: 0 2px 7px var(--shadow-color); --base-box-shadow: 0 2px 7px var(--shadow-color);

4
app/styles/ui/_button.scss
View file

@ -10,7 +10,7 @@
padding: 0 var(--spacing); padding: 0 var(--spacing);
border: var(--base-border); border: 1px solid var(--secondary-button-border-color);
height: var(--button-height); height: var(--button-height);
color: var(--secondary-button-text-color); color: var(--secondary-button-text-color);
@ -23,7 +23,7 @@
border-width: 2px; border-width: 2px;
} }
border-color: var(--secondary-button-focus-border-color); border-color: var(--secondary-button-hover-border-color);
background-color: var(--secondary-button-hover-background); background-color: var(--secondary-button-hover-background);
} }

3
app/styles/ui/changes/_commit-message.scss
View file

@ -9,6 +9,7 @@
display: flex; display: flex;
background-color: var(--box-alt-background-color); background-color: var(--box-alt-background-color);
padding: var(--spacing); padding: var(--spacing);
.summary { .summary {
@ -90,7 +91,7 @@
} }
.description-focus-container { .description-focus-container {
border: 1px solid var(--box-border-color); border: var(--contrast-border);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: var(--background-color); background: var(--background-color);
// Fake that we're a text-box // Fake that we're a text-box