data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: improve color contrast of dark themes (#1249)

Browse source
This commit is contained in:
Nolan Lawson 2019-05-27 17:01:53 -07:00 committed by GitHub
parent 3453b10ffb
commit f1857cb86e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/routes/_components/compose/ComposeLengthIndicator.html
View file

@ -6,7 +6,7 @@
.compose-box-length { .compose-box-length {
grid-area: length; grid-area: length;
justify-self: right; justify-self: right;
color: var(--main-theme-color); color: var(--length-indicator-color);
font-size: 1.3em; font-size: 1.3em;
align-self: center; align-self: center;
} }
@ -53,4 +53,4 @@
observe observe
} }
} }
</script> </script>

2
src/scss/themes/_base.scss
View file

@ -116,4 +116,6 @@
--floating-button-bg: #{rgba($main-bg-color, 0.8)}; --floating-button-bg: #{rgba($main-bg-color, 0.8)};
--floating-button-bg-hover: #{darken(rgba($main-bg-color, 0.9), 5%)}; --floating-button-bg-hover: #{darken(rgba($main-bg-color, 0.9), 5%)};
--floating-button-bg-active: #{darken(rgba($main-bg-color, 0.9), 10%)}; --floating-button-bg-active: #{darken(rgba($main-bg-color, 0.9), 10%)};
--length-indicator-color: #{$main-theme-color};
} }

2
src/scss/themes/_dark.scss
View file

@ -46,4 +46,6 @@
--tab-bg-hover-non-selected: #{darken($main-bg-color, 1%)}; --tab-bg-hover-non-selected: #{darken($main-bg-color, 1%)};
--toast-anchor-color: #{$anchor-color}; --toast-anchor-color: #{$anchor-color};
--length-indicator-color: var(--action-button-fill-color);
} }

8
src/scss/themes/cobalt.scss
View file

@ -17,7 +17,11 @@ $compose-background: lighten($main-theme-color, 32%);
:root { :root {
--settings-list-item-text: #{$main-text-color}; --settings-list-item-text: #{$main-text-color};
--settings-list-item-text-hover: #{$main-text-color}; --settings-list-item-text-hover: #{$main-text-color};
--action-button-fill-color: #{lighten($main-theme-color, 30%)};
--action-button-fill-color-hover: #{lighten($main-theme-color, 35%)};
--action-button-fill-color-active: #{lighten($main-theme-color, 40%)};
--action-button-fill-color-pressed: #{$anchor-color}; --action-button-fill-color-pressed: #{$anchor-color};
--action-button-fill-color-pressed-hover: #{darken($anchor-color, 2%)}; --action-button-fill-color-pressed-hover: #{darken($anchor-color, 2%)};
--action-button-fill-color-pressed-active: #{darken($anchor-color, 15%)}; --action-button-fill-color-pressed-active: #{darken($anchor-color, 15%)};
@ -30,4 +34,4 @@ $compose-background: lighten($main-theme-color, 32%);
--nav-text-color-hover: #{$main-text-color}; --nav-text-color-hover: #{$main-text-color};
--nav-a-selected-border: #{$anchor-color}; --nav-a-selected-border: #{$anchor-color};
--nav-a-selected-border-hover: #{$anchor-color}; --nav-a-selected-border-hover: #{$anchor-color};
} }

6
src/scss/themes/pitchblack.scss
View file

@ -29,9 +29,9 @@ $compose-background: darken($main-theme-color, 12%);
--form-border: #{darken($border-color, 10%)}; --form-border: #{darken($border-color, 10%)};
--action-button-fill-color: #{$main-theme-color}; --action-button-fill-color: #{lighten($main-theme-color, 5%)};
--action-button-fill-color-hover: #{lighten($main-theme-color, 4%)}; --action-button-fill-color-hover: #{lighten($main-theme-color, 12%)};
--action-button-fill-color-active: #{darken($main-theme-color, 13%)}; --action-button-fill-color-active: #{darken($main-theme-color, 15%)};
--action-button-fill-color-pressed: #{lighten($main-theme-color, 20%)}; --action-button-fill-color-pressed: #{lighten($main-theme-color, 20%)};
--action-button-fill-color-pressed-hover: #{lighten($main-theme-color, 24%)}; --action-button-fill-color-pressed-hover: #{lighten($main-theme-color, 24%)};
--action-button-fill-color-pressed-active: #{lighten($main-theme-color, 7%)}; --action-button-fill-color-pressed-active: #{lighten($main-theme-color, 7%)};