mirror of
https://github.com/desktop/desktop
synced 2024-09-19 08:02:22 +00:00
Merge pull request #16287 from desktop/niik/a11y-contrast
Button and text box contrast bumps
This commit is contained in:
commit
29d9a899c4
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue