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-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-text-color: var(--text-color);
--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.
*/
--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};
/**
@ -218,6 +223,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
// similar value than Chrome's default outline border radius.
--outlined-border-radius: 3px;
--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);
--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
// and select components.
@mixin textboxish {
border: 1px solid var(--box-border-color);
border: var(--contrast-border);
border-radius: var(--border-radius);
background: var(--box-background-color);
color: currentColor;

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

@ -32,6 +32,8 @@ body.theme-dark {
--link-button-selected-hover-color: #{$blue-300};
--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-text-color: var(--text-color);
--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).
--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
@ -79,6 +81,10 @@ body.theme-dark {
* Border color for boxes.
*/
--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};
/**
@ -146,6 +152,7 @@ body.theme-dark {
--co-author-tag-border-color: #{$blue-700};
--base-border: 1px solid var(--box-border-color);
--contrast-border: 1px solid var(--box-border-contrast-color);
--shadow-color: #{rgba(black, 0.5)};
--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);
border: var(--base-border);
border: 1px solid var(--secondary-button-border-color);
height: var(--button-height);
color: var(--secondary-button-text-color);
@ -23,7 +23,7 @@
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);
}

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

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