DEV: Refactor `dark-light-choose()` usage in SCSS

Covers most, but not all, cases.
This commit is contained in:
Penar Musaraj 2020-07-29 09:09:37 -04:00
parent fb2fce037b
commit 3116591dc6
No known key found for this signature in database
GPG Key ID: E390435D881FF0F7
32 changed files with 122 additions and 101 deletions

View File

@ -302,7 +302,7 @@ ol.category-breadcrumb {
}
div.education {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
.badge-notification.new-posts {
vertical-align: text-bottom;
}
@ -310,7 +310,7 @@ div.education {
.list-cell {
padding: 12px 5px;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
}
.table-heading {

View File

@ -123,7 +123,7 @@
margin-bottom: 1em;
text-align: center;
font-size: $font-0;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
position: relative;
@include line-clamp(4);

View File

@ -69,7 +69,7 @@
}
}
.me {
background-color: dark-light-choose($highlight-low, $highlight-medium);
background-color: $highlight-low-or-medium;
.username a,
.name,
.title,

View File

@ -108,10 +108,10 @@ sup img.emoji {
.emoji-picker .section-header .clear-recent .fa {
margin: 0;
padding: 0;
color: dark-light-choose($header_primary-medium, $header_primary);
color: $primary-medium;
&:hover {
color: $primary;
color: $primary-high;
}
}
@ -237,7 +237,7 @@ sup img.emoji {
}
.emoji-picker .filter .d-icon-search {
color: dark-light-choose($header_primary-medium, $header_primary);
color: $primary-medium;
font-size: $font-up-1;
margin-left: 5px;
margin-right: 5px;
@ -279,7 +279,7 @@ sup img.emoji {
top: 12px;
border: 0;
background: none;
color: dark-light-choose($header_primary-medium, $header_primary);
color: $primary-high;
outline: none;
display: none;

View File

@ -39,7 +39,7 @@
.group-info-full-name {
font-size: $font-up-2;
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
}
span {

View File

@ -85,7 +85,7 @@
.new {
font-size: $font-down-1;
margin-left: 0.5em;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
}
@ -109,7 +109,7 @@
}
}
.badge-notification {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
background-color: transparent;
display: inline;
padding: 0;
@ -136,7 +136,7 @@
// note these topic counts only appear for anons in the category hamburger drop down
b.topics-count {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
font-weight: normal;
font-size: $font-down-1;
}
@ -251,7 +251,7 @@
justify-content: center;
align-items: center;
min-height: 30px;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
background: $blend-primary-secondary-5;
&:hover {
color: $primary;
@ -320,7 +320,7 @@ div.menu-links-header {
}
a.active {
border: 1px solid dark-light-choose($primary-low, $secondary-medium);
border: 1px solid $primary-low;
border-bottom: 1px solid $secondary;
position: relative;
@ -373,7 +373,7 @@ div.menu-links-header {
}
.fa,
a {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
.d-icon-user {

View File

@ -103,7 +103,7 @@ aside.onebox {
header {
margin-bottom: 8px;
a[href] {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
text-decoration: none;
}
}
@ -600,7 +600,7 @@ aside.onebox.stackexchange .onebox-body {
}
.onebox-metadata {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
.onebox.xkcd .onebox-body {
@ -630,7 +630,7 @@ aside.onebox.stackexchange .onebox-body {
.onebox.whitelistedgeneric {
.label1,
.label2 {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
.label1 {
float: left;
@ -660,7 +660,7 @@ aside.onebox.stackexchange .onebox-body {
.onebox.instagram {
div.instagram-description {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
padding-top: 10px;
}
}
@ -670,7 +670,7 @@ aside.onebox.stackexchange .onebox-body {
position: relative;
}
div.description {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
}
@ -683,7 +683,7 @@ aside.onebox.stackexchange .onebox-body {
.onebox.twitterstatus {
.like,
.retweet {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
padding-left: 10px;
svg {
fill: currentColor;

View File

@ -234,7 +234,7 @@
}
.reviewable-meta-data {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
display: flex;
width: 100%;
margin-bottom: 0.5em;
@ -250,7 +250,7 @@
margin-left: 1em;
margin-right: auto;
a {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
}
.score {

View File

@ -213,12 +213,12 @@
}
.username {
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
font-size: $font-down-1;
}
.name {
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
font-size: $font-0;
font-weight: 700;
}

View File

@ -29,7 +29,7 @@
.date {
font-weight: normal;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
}
@ -92,7 +92,7 @@
.close-share {
font-size: $font-up-3;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
.new-topic {

View File

@ -58,12 +58,12 @@ $quote-share-maxwidth: 150px;
@include ellipsis;
vertical-align: middle;
a {
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
}
}
.fa {
font-size: $font-down-1;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
.svg-icon-title {
margin-left: 3px;
@ -72,7 +72,7 @@ $quote-share-maxwidth: 150px;
.new_user a,
.user-title,
.user-title a {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
}
@ -164,7 +164,7 @@ $quote-share-maxwidth: 150px;
// add staff color
.moderator {
.regular > .cooked {
background-color: dark-light-choose($highlight-low, $highlight-medium);
background-color: $highlight-low-or-medium;
padding: 10px;
img:not(.thumbnail) {
max-width: 100%;
@ -173,9 +173,9 @@ $quote-share-maxwidth: 150px;
}
.clearfix > .topic-meta-data > .names {
span.user-title {
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
a {
background-color: dark-light-choose($highlight-low, $highlight-medium);
background-color: $highlight-low-or-medium;
padding-left: 4px;
padding-right: 4px;
}
@ -210,7 +210,7 @@ aside.quote {
.title {
@include post-aside;
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
padding: 12px 12px 0px 12px;
// blockquote is underneath this and has top margin
.avatar {
@ -239,7 +239,7 @@ blockquote {
.quote-controls,
.quote-controls .d-icon {
color: dark-light-choose($primary-low-mid, $secondary-high);
color: $primary-low-mid-or-secondary-high;
}
.cooked .highlight {
@ -311,8 +311,7 @@ blockquote {
}
.insert-quote + .quote-sharing {
border-left: 1px solid
dark-light-choose(rgba($secondary, 0.4), rgba($primary, 0.4));
border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.quote-sharing {
@ -406,7 +405,7 @@ blockquote {
h4 {
margin: 1px 0 2px 0;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
font-weight: normal;
font-size: $font-down-1;
line-height: $line-height-small;
@ -414,7 +413,7 @@ blockquote {
span.domain {
font-size: $font-down-2;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
td {
@ -646,7 +645,7 @@ blockquote {
}
&.via-email {
color: dark-light-choose($primary-low-mid, $secondary-high);
color: $primary-low-mid-or-secondary-high;
}
&.raw-email {
cursor: pointer;
@ -728,7 +727,7 @@ blockquote > *:last-child {
.gap {
padding: 0.25em 0 0.5em 56px; // 45px (topic avatar) + 11px (margin) = 56px
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
@ -854,7 +853,7 @@ a.mention {
display: inline-flex;
font-weight: bold;
font-size: 0.93em;
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
padding: 1px 4px;
background: $primary-low;
border-radius: 8px;
@ -873,7 +872,7 @@ a.mention-group {
&.notify,
.small-action-desc & {
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
padding: 2px 4px;
background: $primary-low;
border-radius: 8px;
@ -903,7 +902,7 @@ a.mention-group {
}
> .d-icon {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
margin-right: 6px;
font-size: $font-0;
line-height: $line-height-large;
@ -919,7 +918,7 @@ a.mention-group {
> span.help {
display: inline-block;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
font-size: $font-down-1;
font-style: italic;
line-height: $line-height-large;
@ -934,7 +933,7 @@ a.mention-group {
.broken-image {
display: inline-flex;
color: dark-light-choose($primary-low-mid, $secondary-high);
color: $primary-low-mid-or-secondary-high;
border: 1px solid $primary-low;
font-size: $font-up-5;

View File

@ -135,7 +135,7 @@ a.badge-category {
}
.private-message-glyph {
color: dark-light-choose($primary-low-mid, $secondary-high);
color: $primary-low-mid-or-secondary-high;
}
.private-message-glyph-wrapper {
@ -236,7 +236,7 @@ a.badge-category {
}
}
.expand-links {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
.track-link {
display: flex;
@ -251,7 +251,7 @@ a.badge-category {
li {
margin-bottom: 0.5em;
a[href] {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
.clicks {
margin-left: 0.5em;
@ -281,7 +281,7 @@ a.badge-category {
a.topic-featured-link {
display: inline-block;
text-transform: lowercase;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
font-size: 0.875rem;
.d-icon {
margin-right: 3px;

View File

@ -254,7 +254,7 @@
.badge-groups {
margin: 20px 0;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
h3 {
margin-bottom: 1em;
}
@ -295,7 +295,7 @@
.grant-info-item {
margin-bottom: 1em;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
&:first-of-type {
margin-right: 10px;
}

View File

@ -219,7 +219,7 @@
font-size: $font-0;
line-height: $line-height-small;
&[href] {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
}

View File

@ -29,17 +29,17 @@
.username a {
font-weight: bold;
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
}
.name {
margin-left: 5px;
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
}
.title {
margin-top: 3px;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
}
@ -71,7 +71,7 @@
min-width: 250px;
.granted-on {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
.post-link {

View File

@ -102,7 +102,7 @@
// common/base/header.scss
.fa,
.icon {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
font-size: $font-up-4;
}
}

View File

@ -87,3 +87,25 @@ $wiki: green !default;
//blended variants
$blend-primary-secondary-5: blend-primary-secondary(5%) !default;
$primary-med-or-secondary-med: dark-light-choose(
$primary-medium,
$secondary-medium
);
$primary-med-or-secondary-high: dark-light-choose(
$primary-medium,
$secondary-high
);
$primary-high-or-secondary-low: dark-light-choose(
$primary-high,
$secondary-low
);
$primary-low-mid-or-secondary-high: dark-light-choose(
$primary-low-mid,
$secondary-high
);
$highlight-low-or-medium: dark-light-choose($highlight-low, $highlight-medium);

View File

@ -28,7 +28,7 @@
.top-date-string {
font-size: $font-down-1;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
font-weight: normal;
text-transform: uppercase;
}
@ -67,7 +67,7 @@
.top-date-string {
font-weight: normal;
font-size: $font-down-1;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
text-transform: uppercase;
margin-left: 5px;
}

View File

@ -215,7 +215,7 @@
&::-webkit-scrollbar-thumb {
cursor: pointer;
border-radius: 5px;
background: dark-light-choose($primary-medium, $secondary-medium);
background: $primary-med-or-secondary-med;
}
&::-webkit-scrollbar-track {

View File

@ -89,7 +89,7 @@
}
}
.username {
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
word-wrap: break-word;
font-weight: bold;
}
@ -197,7 +197,7 @@
.start-date {
@include unselectable;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
.timeline-scrollarea {
@ -231,7 +231,7 @@
}
.timeline-ago {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
.timeline-scroller {
@ -269,7 +269,7 @@
.now-date {
@include unselectable;
display: inline-block;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
margin-top: 0.5em;
}
}

View File

@ -29,7 +29,7 @@
.topics .badge-notification,
.category .badge-notification {
background-color: transparent;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
}
.topics {
@ -77,7 +77,7 @@
a.last-posted-at,
a.last-posted-at:visited {
font-size: $font-down-1;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
}
.title {
@include ellipsis;

View File

@ -15,7 +15,7 @@
border: none;
a {
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
padding: 8px 0;
&.active {

View File

@ -43,6 +43,6 @@
font-size: $font-down-2;
line-height: $line-height-large;
.search-highlight {
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
}
}

View File

@ -4,7 +4,7 @@
.table-heading {
padding: 12px 5px;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
}
.no-topics,
@ -49,10 +49,10 @@
.topic-stats {
flex: 1 0 0px;
text-align: right;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
}
.topic-last-activity a {
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
}
}

View File

@ -34,16 +34,16 @@
.topic-list-icons {
.d-icon-thumbtack {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
.d-icon-thumbtack.unpinned {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
a.title {
color: $primary;
}
.d-icon-bookmark {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
}
@ -63,7 +63,7 @@
}
th {
button .d-icon {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
}
@ -104,7 +104,7 @@
&.posters-more-count {
cursor: default;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
line-height: $td-posters-more-lh;
font-size: $font-down-1;
}
@ -134,7 +134,7 @@
.post-actions {
clear: both;
width: auto;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
text-align: left;
font-size: $font-down-1;
margin-top: 5px;
@ -142,7 +142,7 @@
margin-right: 2px;
}
a {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
margin-right: 3px;
line-height: $line-height-large;
}

View File

@ -26,7 +26,7 @@
}
.reply-to-tab {
z-index: z("base") + 1;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
.actions .fade-out {
.discourse-no-touch & {
@ -136,7 +136,7 @@ nav.post-controls {
}
a,
button {
color: dark-light-choose($primary-low-mid, $secondary-high);
color: $primary-low-mid-or-secondary-high;
.d-icon {
opacity: 1;
}
@ -154,10 +154,10 @@ nav.post-controls {
button.create {
margin-right: 0;
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
margin-left: 10px;
.d-icon {
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
}
}
.create .d-icon {
@ -313,7 +313,7 @@ pre.copy-codeblocks:hover .copy-cmd {
padding: 0;
}
.post-date {
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
}
.d-icon-arrow-up,
.d-icon-arrow-down {
@ -331,11 +331,11 @@ pre.copy-codeblocks:hover .copy-cmd {
font-size: $font-down-1;
a {
font-weight: bold;
color: dark-light-choose($primary-low-mid, $secondary-high);
color: $primary-low-mid-or-secondary-high;
}
}
.arrow {
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
}
}
@ -394,7 +394,7 @@ pre.copy-codeblocks:hover .copy-cmd {
.btn {
border: 0;
padding: 0 23px;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
background: $blend-primary-secondary-5;
border-left: 1px solid $primary-low;
border-top: 1px solid transparent;
@ -413,7 +413,7 @@ pre.copy-codeblocks:hover .copy-cmd {
}
}
.link-summary .btn {
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
background: $blend-primary-secondary-5;
width: 100%;
&:hover {
@ -701,7 +701,7 @@ a.attachment:before {
.post-info {
a {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
a.wiki {

View File

@ -37,7 +37,7 @@
.remove-featured-link {
float: right;
text-transform: lowercase;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
font-size: 0.857rem;
}
}

View File

@ -24,7 +24,7 @@
}
.description,
.hint {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
display: block;
}
.hint {

View File

@ -90,7 +90,7 @@ article.post {
}
a.new-user {
color: dark-light-choose($primary-low-mid, $secondary-high);
color: $primary-low-mid-or-secondary-high;
}
span.title {

View File

@ -156,7 +156,7 @@
flex-direction: column;
tr.instructions {
label {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
}

View File

@ -202,7 +202,7 @@
.num .fa,
a,
a:visited {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
}
}
@ -211,7 +211,7 @@
a {
// let's make all ages dim on mobile so we're not
// overwhelming people with info about each topic
color: dark-light-choose($primary-low-mid, $secondary-high) !important;
color: $primary-low-mid-or-secondary-high !important;
}
}
}
@ -223,7 +223,7 @@
td {
padding: 12px 5px;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
vertical-align: top;
}

View File

@ -28,7 +28,7 @@ span.badge-posts {
.topic-post {
nav.post-controls {
color: dark-light-choose($primary-low-mid, $secondary-high);
color: $primary-low-mid-or-secondary-high;
.actions {
display: flex;
@ -131,7 +131,7 @@ span.badge-posts {
a.reply-to-tab {
z-index: z("base") + 1;
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-med-or-secondary-med;
margin-right: 0.5em;
}
@ -166,7 +166,7 @@ a.reply-to-tab {
}
.number,
.d-icon {
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high-or-secondary-low;
font-size: $font-up-1;
}
.avatar + a {
@ -192,7 +192,7 @@ a.reply-to-tab {
.btn {
border: 0;
padding: 0 15px;
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
background: $blend-primary-secondary-5;
border-left: 1px solid $primary-low;
.fa {
@ -203,7 +203,7 @@ a.reply-to-tab {
}
}
.link-summary .btn {
color: dark-light-choose($primary-medium, $secondary-high);
color: $primary-med-or-secondary-high;
background: $blend-primary-secondary-5;
width: 100%;
}