Better contrast ratio match between dark and light themes
This commit is contained in:
parent
49fbedc445
commit
4af7471ead
|
@ -20,7 +20,7 @@ sup img.emoji {
|
|||
height: 300px;
|
||||
color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%));
|
||||
background-color: $secondary;
|
||||
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||
border: 1px solid $primary-low;
|
||||
}
|
||||
|
||||
.emoji-picker .categories-column {
|
||||
|
@ -29,7 +29,7 @@ sup img.emoji {
|
|||
flex: 1 0 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||
border-right: 1px solid $primary-low;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
|
@ -102,7 +102,7 @@ sup img.emoji {
|
|||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||
border-top: 1px solid $primary-low;
|
||||
}
|
||||
|
||||
.emoji-picker .info {
|
||||
|
@ -202,7 +202,7 @@ sup img.emoji {
|
|||
|
||||
.emoji-picker .filter {
|
||||
background-color: none;
|
||||
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||
border-bottom: 1px solid $primary-low;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
|
@ -195,14 +195,14 @@ $box-shadow: (
|
|||
// standard color transformations, use these if possible, and add any new dark-light-diffs here
|
||||
|
||||
//primary
|
||||
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -80%);
|
||||
$primary-low: dark-light-diff($primary, $secondary, 90%, -65%);
|
||||
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%);
|
||||
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%);
|
||||
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
|
||||
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%);
|
||||
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%);
|
||||
|
||||
//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-high: dark-light-diff(
|
||||
$header_primary,
|
||||
|
|
|
@ -19,8 +19,8 @@
|
|||
|
||||
.select-kit-filter {
|
||||
padding: $input-padding;
|
||||
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||
border-top: 1px solid $primary-low;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
|
||||
.spinner {
|
||||
flex: 0 0 auto;
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
.select-kit-body {
|
||||
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||
border: 1px solid $primary-low;
|
||||
background-clip: padding-box;
|
||||
box-shadow: shadow("dropdown");
|
||||
max-width: 300px;
|
||||
|
|
Loading…
Reference in New Issue