development/github-desktop
development/github-desktop
1
0
Fork 0
mirror of https://github.com/desktop/desktop synced 2024-11-05 20:49:32 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add high-contrast mixin

Browse source
This commit is contained in:
tidy-dev 2021-09-13 07:16:07 -04:00
parent f9178938f1
commit 55c0bc2348
12 changed files with 84 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/src/ui/app-theme.tsx
View file

@ -58,7 +58,8 @@ export class AppTheme extends React.PureComponent<IAppThemeProps> {
if (
!body.classList.contains(newThemeClassName) ||
(body.classList.contains('theme-custom') && !this.props.useCustomTheme)
(body.classList.contains('theme-high-contrast') &&
!this.props.useCustomTheme)
) {
this.clearThemes()
body.classList.add(newThemeClassName)
@ -79,8 +80,11 @@ export class AppTheme extends React.PureComponent<IAppThemeProps> {
const { background } = customTheme
const body = document.body
if (!body.classList.contains('theme-custom')) {
body.classList.add('theme-custom')
if (!body.classList.contains('theme-high-contrast')) {
// Currently our only custom theme is the high-contrast theme
// If we were to expand upon custom theming we would not
// want this so specific.
body.classList.add('theme-high-contrast')
// This is important so that code diff syntax colors are legible if the
// user customizes to a light vs dark background. Tho, the code diff does
// still use the customizable text color for some of the syntax text so

1
app/styles/_mixins.scss
View file

@ -5,3 +5,4 @@
@import 'mixins/checkboard-background';
@import 'mixins/close-button';
@import 'mixins/list-item';
@import 'mixins/high-contrast';

15
app/styles/_variables.scss
View file

@ -112,11 +112,6 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--box-border-color: #{$gray-200};
--box-border-accent-color: #{$blue};
/**
* Background color for selected boxes without keyboard focus
*/
--box-selected-background-color: #ebeef1;
/**
* Text color for when a user hovers over a boxe with a
* pointing device. Should not be used by boxes that doesn't
@ -271,10 +266,6 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--tab-bar-active-color: #{$blue};
--tab-bar-background-color: #{$white};
--tab-bar-hover-background-color: #{$gray-100};
--tab-bar-box-shadow: inset 0 -3px 0px var(--tab-bar-active-color);
--tab-bar-hover-border: none;
--horizontal-bar-active-color: 'none';
--tab-bar-item-border: 'none';
/** Count bubble colors when used inside of a tab bar item */
--tab-bar-count-color: var(--text-color);
@ -292,8 +283,6 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--list-item-selected-active-badge-color: #{$gray-900};
--list-item-selected-active-badge-background-color: #{$white};
--list-item-hover-background-color: #{$gray-100};
--list-item-hover-text-color: var(--text-color);
--list-item-hover-border: none;
/** Win32 has custom scrol bars, see _scroll.scss */
--win32-scroll-bar-size: 10px;
@ -370,7 +359,6 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--diff-selected-text-color: var(--background-color);
--diff-add-background-color: #{darken($green-000, 2%)};
--diff-add-border: 'none';
--diff-add-border-color: #{$green-300};
--diff-add-gutter-color: #{$green-300};
--diff-add-gutter-background-color: #{darken($green-100, 3%)};
@ -383,7 +371,6 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--diff-delete-gutter-background-color: #{$red-100};
--diff-delete-inner-background-color: #fdb8c0;
--diff-delete-text-color: var(--diff-text-color);
--diff-add-border: 'none';
--diff-hunk-background-color: #{$blue-000};
--diff-hunk-border-color: #{$blue-200};
@ -471,8 +458,6 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--title-tool-tip-background-color: rgb(236, 236, 236);
--title-tool-tip-shadow: 1px 2px 5px 0px rgb(125, 125, 125, 0.5);
--foldout-border: 'none';
}
::backdrop {

7
app/styles/mixins/_high-contrast.scss Normal file
View file

@ -0,0 +1,7 @@
// A mixin which takes a content block that should only
// be applied when we are using the high-contrast theme
@mixin high-contrast {
body.theme-high-contrast & {
@content;
}
}

6
app/styles/mixins/_list-item.scss
View file

@ -20,7 +20,9 @@
&:not(.not-selectable):hover {
background: var(--list-item-hover-background-color);
color: var(--list-item-hover-text-color);
border: var(--list-item-hover-border);
@include high-contrast {
color: var(--list-item-hover-text-color);
border: var(--list-item-hover-border);
}
}
}

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

@ -19,7 +19,10 @@
border-radius: var(--button-border-radius);
&:not(:disabled):hover {
border-width: var(--secondary-button-hover-border-width);
@include high-contrast {
border-width: var(--secondary-button-hover-border-width);
}
border-color: var(--secondary-button-focus-border-color);
background-color: var(--secondary-button-hover-background);
}

12
app/styles/ui/_diff.scss
View file

@ -269,13 +269,19 @@
.CodeMirror-linebackground {
&.diff-add {
background: var(--diff-add-background-color);
border: var(--diff-add-border);
margin-top: 1px;
@include high-contrast {
border: var(--diff-add-border);
margin-top: 1px;
}
}
&.diff-delete {
background: var(--diff-delete-background-color);
border: var(--diff-delete-border);
@include high-contrast {
border: var(--diff-delete-border);
}
}
&.diff-context {

7
app/styles/ui/_foldout.scss
View file

@ -19,7 +19,10 @@
.foldout {
background: var(--background-color);
color: var(--text-color);
border: var(--foldout-border);
overflow: hidden;
@include high-contrast {
border: var(--foldout-border);
overflow: hidden;
}
}
}

5
app/styles/ui/_list.scss
View file

@ -70,7 +70,10 @@
color: var(--text-color);
background-color: var(--box-selected-active-background-color);
border: var(--box-selected-active-border);
@include high-contrast {
border: var(--box-selected-active-border);
}
}
}

20
app/styles/ui/_side-by-side-diff.scss
View file

@ -174,7 +174,10 @@
color: var(--diff-delete-text-color);
background: var(--diff-delete-background-color);
border-right: 1px solid var(--diff-border-color);
border: var(--diff-delete-border);
@include high-contrast {
border: var(--diff-delete-border);
}
.line-number {
background: var(--diff-delete-gutter-background-color);
@ -192,7 +195,10 @@
.after {
color: var(--diff-add-text-color);
background: var(--diff-add-background-color);
border: var(--diff-add-border);
@include high-contrast {
border: var(--diff-add-border);
}
.line-number {
background: var(--diff-add-gutter-background-color);
@ -233,7 +239,10 @@
&.added .before,
&.deleted .after {
background: var(--diff-empty-row-background-color);
border: none;
@include high-contrast {
border: none;
}
.line-number {
background: var(--diff-empty-row-gutter-background-color);
@ -259,7 +268,10 @@
&.context .after {
background: var(--diff-background-color);
color: var(--diff-text-color);
border: none;
@include high-contrast {
border: none;
}
.line-number {
background: var(--diff-gutter-background-color);

29
app/styles/ui/_tab-bar.scss
View file

@ -13,7 +13,12 @@
&-item {
// Reset styles from global buttons
border: var(--tab-bar-item-border);
border: none;
@include high-contrast {
border: var(--tab-bar-item-border);
}
box-shadow: none;
color: var(--text-color);
background: var(--background-color);
@ -47,15 +52,22 @@
// in so far that it doesn't have an active selection state, just a selected
// one.
&.selected {
box-shadow: var(--tab-bar-box-shadow);
background-color: var(--horizontal-bar-active-color);
color: var(--horizontal-bar-active-text-color);
box-shadow: inset 0 -3px 0px var(--tab-bar-active-color);
@include high-contrast {
box-shadow: var(--tab-bar-box-shadow);
background-color: var(--horizontal-bar-active-color);
color: var(--horizontal-bar-active-text-color);
}
}
&:hover {
background: var(--tab-bar-hover-background-color);
border: var(--tab-bar-hover-border);
color: var(--text-color);
@include high-contrast {
border: var(--tab-bar-hover-border);
color: var(--text-color);
}
}
.with-indicator {
@ -165,7 +177,10 @@
&:hover {
background: var(--tab-bar-hover-background-color);
border: var(--tab-bar-hover-border);
@include high-contrast {
border: var(--tab-bar-hover-border);
}
}
}

8
app/styles/ui/history/_commit-list.scss
View file

@ -74,9 +74,11 @@
}
}
.list-item:hover {
.commit {
color: var(--text-color);
@include high-contrast {
.list-item:hover {
.commit {
color: var(--text-color);
}
}
}
}