Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Better contrast ratio match between dark and light themes

This commit is contained in:
Kris 2019-01-02 17:54:22 -05:00
parent 49fbedc445
commit 4af7471ead
4 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/stylesheets/common/base/emoji.scss
View File

@ -20,7 +20,7 @@ sup img.emoji {
height: 300px; height: 300px;
color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%)); color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%));
background-color: $secondary; background-color: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border: 1px solid $primary-low;
} }
.emoji-picker .categories-column { .emoji-picker .categories-column {
@ -29,7 +29,7 @@ sup img.emoji {
flex: 1 0 0; flex: 1 0 0;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-right: 1px solid $primary-low;
min-width: 36px; min-width: 36px;
} }
@ -102,7 +102,7 @@ sup img.emoji {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-top: 1px solid $primary-low;
} }
.emoji-picker .info { .emoji-picker .info {
@ -202,7 +202,7 @@ sup img.emoji {
.emoji-picker .filter { .emoji-picker .filter {
background-color: none; background-color: none;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-bottom: 1px solid $primary-low;
padding: 5px; padding: 5px;
display: flex; display: flex;
position: relative; position: relative;

6
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -195,14 +195,14 @@ $box-shadow: (
// standard color transformations, use these if possible, and add any new dark-light-diffs here // standard color transformations, use these if possible, and add any new dark-light-diffs here
//primary //primary
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -80%); $primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%);
$primary-low: dark-light-diff($primary, $secondary, 90%, -65%); $primary-low: dark-light-diff($primary, $secondary, 90%, -78%);
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%); $primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%); $primary-medium: dark-light-diff($primary, $secondary, 50%, -35%);
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%); $primary-high: dark-light-diff($primary, $secondary, 30%, -25%);
//header_primary //header_primary
$header_primary-low: dark-light-diff($header_primary, $secondary, 90%, -65%); $header_primary-low: dark-light-diff($header_primary, $secondary, 90%, -78%);
$header_primary-medium: dark-light-diff($header_primary, $secondary, 50%, -35%); $header_primary-medium: dark-light-diff($header_primary, $secondary, 50%, -35%);
$header_primary-high: dark-light-diff( $header_primary-high: dark-light-diff(
$header_primary, $header_primary,

4
app/assets/stylesheets/common/select-kit/combo-box.scss
View File

@ -19,8 +19,8 @@
.select-kit-filter { .select-kit-filter {
padding: $input-padding; padding: $input-padding;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-top: 1px solid $primary-low;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-bottom: 1px solid $primary-low;
.spinner { .spinner {
flex: 0 0 auto; flex: 0 0 auto;

2
app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
View File

@ -14,7 +14,7 @@
} }
.select-kit-body { .select-kit-body {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border: 1px solid $primary-low;
background-clip: padding-box; background-clip: padding-box;
box-shadow: shadow("dropdown"); box-shadow: shadow("dropdown");
max-width: 300px; max-width: 300px;