diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index 63f4f97fbcf..f9e4f5bce93 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -512,7 +512,7 @@ $mobile-breakpoint: 700px; } .desc { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } h3 { @@ -545,7 +545,7 @@ section.details { } #selected-controls { - background-color: scale-color($tertiary, $lightness: 75%); + background-color: $tertiary-low; padding: 8px; min-height: 27px; position: fixed; @@ -581,7 +581,7 @@ section.details { border-top: 0; } &.highlight-danger { - background-color: scale-color($danger, $lightness: 50%); + background-color: $danger-low; } border-top: 1px solid $primary-low; &:before, &:after { @@ -651,7 +651,7 @@ section.details { font-weight: normal; padding: 0 6px; color: $secondary; - background-color: scale-color($tertiary, $lightness: 50%); + background-color: $tertiary-medium; border-radius: 3px; } } @@ -661,7 +661,7 @@ section.details { p.help { margin: 0; - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); + color: dark-light-choose($primary-medium, $secondary-medium); font-size: 0.9em; } } @@ -679,7 +679,7 @@ section.details { .current-badge-actions { margin: 10px; padding: 10px; - border-top: 1px solid dark-light-choose(scale-color($primary, $lightness: 80%), scale-color($secondary, $lightness: 20%)); + border-top: 1px solid dark-light-choose($primary-low, $secondary-high); } .buttons { @@ -732,7 +732,7 @@ section.details { .groups { .ac-wrap { width: 100% !important; - border-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); + border-color: dark-light-choose($primary-low-mid, $secondary-high); .item { margin-right: 10px; } @@ -754,7 +754,7 @@ section.details { } .select2-choices { width: 100%; - border-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); + border-color: dark-light-choose($primary-low-mid, $secondary-high); } .content-list { @@ -1250,7 +1250,7 @@ table.api-keys { margin: 0 0 20px 6px; a.filter { display: inline-block; - background-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); + background-color: dark-light-choose($primary-low-mid, $secondary-high); padding: 3px 10px; border-radius: 3px; @@ -1283,7 +1283,7 @@ table.api-keys { .staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses, .permalinks, .web-hook-events { - border-bottom: dotted 1px dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); + border-bottom: dotted 1px dark-light-choose($primary-low-mid, $secondary); .heading-container { width: 100%; @@ -1607,7 +1607,7 @@ table#user-badges { } p.description { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); margin-bottom: 1em; max-width: 700px; } @@ -1629,7 +1629,7 @@ table#user-badges { .reply-key { display: block; font-size: 12px; - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } .username div { max-width: 180px; diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss index 1ba3bbc507f..bbcb624aa21 100644 --- a/app/assets/stylesheets/common/admin/customize.scss +++ b/app/assets/stylesheets/common/admin/customize.scss @@ -35,7 +35,7 @@ .select2-chosen, .color-schemes li { .fa { margin-right: 6px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } .show-current-style { @@ -173,7 +173,7 @@ td.actions { width: 200px; } .hex-input { width: 80px; margin-bottom: 0; } .hex { text-align: center; } - .description { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } + .description { color: dark-light-choose($primary-medium, $secondary-medium); } .invalid .hex input { background-color: white; diff --git a/app/assets/stylesheets/common/admin/flagging.scss b/app/assets/stylesheets/common/admin/flagging.scss index b1cce63b514..166a0926202 100644 --- a/app/assets/stylesheets/common/admin/flagging.scss +++ b/app/assets/stylesheets/common/admin/flagging.scss @@ -6,7 +6,7 @@ .flagged-post.deleted { .flagged-post-excerpt, .flagged-post-avatar { - background-color: scale-color($danger, $lightness: 70%); + background-color: $danger-low; } } @@ -122,7 +122,7 @@ } &:hover { - background-color: $highlight-low; + background-color: dark-light-choose($highlight-low, $highlight-medium); } } diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index 3a015867a68..b381960d5ee 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/app/assets/stylesheets/common/base/_topic-list.scss @@ -74,7 +74,7 @@ border: none; td { - border-bottom: 1px solid scale-color($danger, $lightness: 60%); + border-bottom: 1px solid $danger-low; line-height: 0.1em; padding: 0px; text-align: center; @@ -82,7 +82,7 @@ td span { background-color: $secondary; - color: scale-color($danger, $lightness: 60%); + color: $danger-low; padding: 0px 8px; font-size: 0.929em; } @@ -100,14 +100,14 @@ } th { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); font-weight: normal; font-size: 1em; - button .d-icon {color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));} + button .d-icon {color: dark-light-choose($primary-medium, $secondary-medium);} } td { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); font-size: 1em; } @@ -122,7 +122,7 @@ .topic-excerpt { font-size: 0.929em; margin-top: 8px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); word-wrap: break-word; line-height: 1.4; padding-right: 20px; @@ -167,7 +167,7 @@ .category .badge-notification { background-color:transparent; - color: scale-color($primary, $lightness: 50%); + color: $primary-medium; } .subcategories .badge { @@ -224,7 +224,7 @@ background-color: transparent; padding: 0; border: 0; - color: scale-color($danger, $lightness: 20%); + color: $danger-medium; font-size: 0.929em; cursor: default; } @@ -309,7 +309,7 @@ ol.category-breadcrumb { } .top-date-string { - color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); font-weight: normal; text-transform: uppercase; } @@ -369,12 +369,12 @@ ol.category-breadcrumb { } div.education { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .list-cell { padding: 12px 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } .table-heading { diff --git a/app/assets/stylesheets/common/base/alert.scss b/app/assets/stylesheets/common/base/alert.scss index 892151a3b26..397c7c9da86 100644 --- a/app/assets/stylesheets/common/base/alert.scss +++ b/app/assets/stylesheets/common/base/alert.scss @@ -1,6 +1,6 @@ .alert { padding: 8px 35px 8px 14px; - background-color: scale-color($danger, $lightness: 75%); + background-color: $danger-low; color: #c09853; .close { @@ -30,7 +30,7 @@ -webkit-appearance: none; } &.alert-success { - background-color: $success-low; + background-color: $success-medium; color: $primary; } &.alert-error { diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss index 0626f267048..c38bfe61c73 100644 --- a/app/assets/stylesheets/common/base/category-list.scss +++ b/app/assets/stylesheets/common/base/category-list.scss @@ -76,7 +76,7 @@ padding: 0 1em 1em 1em; text-align: center; font-size: 1.05em; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); .overflow { max-height: 6em; overflow: hidden; diff --git a/app/assets/stylesheets/common/base/combobox.scss b/app/assets/stylesheets/common/base/combobox.scss index 4c80abc5c6d..08f1f155fdb 100644 --- a/app/assets/stylesheets/common/base/combobox.scss +++ b/app/assets/stylesheets/common/base/combobox.scss @@ -26,7 +26,7 @@ .select2-drop { background: $secondary; .d-icon { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss index 10b5c883110..35bac3fdcaf 100644 --- a/app/assets/stylesheets/common/base/compose.scss +++ b/app/assets/stylesheets/common/base/compose.scss @@ -35,7 +35,7 @@ background-color: $tertiary-low; } @include hover { - background-color: $highlight-low; + background-color: dark-light-choose($highlight-low, $highlight-medium); text-decoration: none; } } @@ -92,8 +92,8 @@ div.ac-wrap div.item a.remove, .remove-link { display: inline-block; border: 1px solid $primary-low; &:hover { - background-color: scale-color($danger, $lightness: 75%); - border: 1px solid scale-color($danger, $lightness: 30%); + background-color: $danger-low; + border: 1px solid $danger-medium; text-decoration: none; color: $danger; } @@ -162,7 +162,7 @@ div.ac-wrap { } #draft-status, #file-uploading { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .composer-bottom-right { diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss index 8a31885b8cb..7b5f7bdc6c3 100644 --- a/app/assets/stylesheets/common/base/directory.scss +++ b/app/assets/stylesheets/common/base/directory.scss @@ -36,10 +36,10 @@ tr.me { td { - background-color: $highlight-low; + background-color: dark-light-choose($highlight-low, $highlight-medium); .username a, .name, .title, .number, .time-read { - color: dark-light-choose(scale-color($highlight, $lightness: -50%), scale-color($highlight, $lightness: 50%)); + color: dark-light-choose(scale-color($highlight, $lightness: -50%), $highlight-medium); } } } diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss index 2cca6788a5e..077acd0c689 100644 --- a/app/assets/stylesheets/common/base/discourse.scss +++ b/app/assets/stylesheets/common/base/discourse.scss @@ -132,7 +132,7 @@ input { } &.invalid { - background-color: dark-light-choose(scale-color($danger, $lightness: 80%), scale-color($danger, $lightness: -60%)); + background-color: dark-light-choose($danger-low, scale-color($danger, $lightness: -60%)); } .radio &[type="radio"], @@ -191,19 +191,19 @@ input { } // the default for table cells in topic list -// is scale-color($primary, $lightness: 50%) +// is $primary-medium // numbers get dimmer as they get colder .coldmap { &-high { - color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)) !important; + color: dark-light-choose($primary-low-mid, $secondary-high) !important; } &-med { - color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)) !important; + color: dark-light-choose($primary-medium, $secondary-high) !important; } &-low { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)) !important; + color: dark-light-choose($primary-medium, $secondary-medium) !important; } } diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss index f20fd3dae29..1e10fd422e5 100644 --- a/app/assets/stylesheets/common/base/emoji.scss +++ b/app/assets/stylesheets/common/base/emoji.scss @@ -76,7 +76,7 @@ img.emoji { .emoji-picker .section-header .clear-recent .fa{ margin: 0; padding: 0; - color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary); + color: dark-light-choose($header_primary-medium, $header_primary); &:hover { color: $primary; @@ -197,7 +197,7 @@ img.emoji { } .emoji-picker .filter .d-icon-search { - color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary); + color: dark-light-choose($header_primary-medium, $header_primary); font-size: 16px; margin-left: 5px; margin-right: 5px; @@ -239,7 +239,7 @@ img.emoji { top: 12px; border: 0; background: none; - color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary); + color: dark-light-choose($header_primary-medium, $header_primary); outline: none; display: none; diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss index c08de367820..c476e892da6 100644 --- a/app/assets/stylesheets/common/base/group.scss +++ b/app/assets/stylesheets/common/base/group.scss @@ -15,7 +15,7 @@ .group-info-full-name { font-size: 1.2em; - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose($primary-high, $secondary-low); } span { @@ -93,7 +93,7 @@ table.group-members { border-bottom: 3px solid $primary-low; text-align: center; padding: 5px 0px 5px 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); font-weight: normal; } diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss index 6dae404db0d..c6e7791ab88 100644 --- a/app/assets/stylesheets/common/base/groups.scss +++ b/app/assets/stylesheets/common/base/groups.scss @@ -8,7 +8,7 @@ width: 100%; th { - border-bottom: 1px solid $primary-low; + border-bottom: 1px solid $primary-low; padding: 5px 0px; text-align: left; } @@ -30,16 +30,16 @@ .groups-info-name { font-weight: bold; color: $primary; - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose($primary-high, $secondary-low); } .groups-info-full-name { - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose($primary-high, $secondary-low); } .groups-info-title { font-size: 0.9em; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } span { diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index 57c776bf7ae..ac9feaa0a85 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/app/assets/stylesheets/common/base/header.scss @@ -151,7 +151,7 @@ .unread-notifications { left: auto; right: 0; - background-color: scale-color($tertiary, $lightness: 50%); + background-color: dark-light-choose($tertiary-medium, $tertiary); } .unread-private-messages, .ring { left: auto; diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss index 0de3abad178..138784a7376 100644 --- a/app/assets/stylesheets/common/base/history.scss +++ b/app/assets/stylesheets/common/base/history.scss @@ -40,11 +40,11 @@ } .diff-ins { color: dark-light-choose($primary, $secondary); - background: scale-color($success, $lightness: 90%); + background: $success-low; } ins { color: $success; - background: scale-color($success, $lightness: 90%); + background: $success-low; } del, .diff-del { code, img { @@ -67,11 +67,11 @@ filter: alpha(opacity=50); } .diff-del { - background: scale-color($danger, $lightness: 60%); + background: $danger-low; } del { color: $danger; - background: scale-color($danger, $lightness: 60%); + background: $danger-low; } span.date { font-weight: bold; diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss index 01b2f825100..c45ce027bfa 100644 --- a/app/assets/stylesheets/common/base/login.scss +++ b/app/assets/stylesheets/common/base/login.scss @@ -29,7 +29,7 @@ $input-width: 220px; .disclaimer { font-size: 0.9em; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); clear: both; } @@ -56,7 +56,7 @@ $input-width: 220px; float: auto; } .instructions { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); margin: 0; font-size: 0.929em; font-weight: normal; @@ -70,7 +70,7 @@ $input-width: 220px; .password-reset { .instructions { label { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } } @@ -98,7 +98,7 @@ $input-width: 220px; margin-bottom: 10px; } .instructions { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); margin: 0; font-size: 0.929em; font-weight: normal; @@ -113,5 +113,5 @@ $input-width: 220px; button#login-link, button#new-account-link { background: transparent; - color: dark-light-choose(scale-color($primary, $lightness: 35%), scale-color($secondary, $lightness: 65%)); + color: dark-light-choose($primary-high, $secondary-low); } diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss index c70c7eb12a9..c3c9c8ceb0a 100644 --- a/app/assets/stylesheets/common/base/menu-panel.scss +++ b/app/assets/stylesheets/common/base/menu-panel.scss @@ -67,7 +67,7 @@ .new { font-size: 0.8em; margin-left: 0.5em; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } @@ -79,7 +79,7 @@ margin: 5px 5px 0 8px; .box {margin-top: 0;} .badge-notification { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); background-color: transparent; display: inline; padding: 0; @@ -88,7 +88,7 @@ // note these topic counts only appear for anons in the category hamburger drop down b.topics-count { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); font-weight: normal; font-size: 11px; } @@ -161,7 +161,7 @@ .topic-statuses { float: none; display: inline-block; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); margin: 0; .fa { margin: 0; @@ -183,7 +183,7 @@ transition: all linear .15s; .user-results { - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose($primary-high, $secondary-low); } } @@ -204,8 +204,8 @@ margin: 0.5em 0; } - .fa { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } - .icon { color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); } + .fa { color: dark-light-choose($primary-medium, $secondary-medium); } + .icon { color: dark-light-choose($primary-high, $secondary-low); } li { background-color: $tertiary-low; padding: 0.25em 0.5em; @@ -299,7 +299,7 @@ div.menu-links-header { text-align: right; } .fa, a { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } a { diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss index 67be235c9b1..d782185c68a 100644 --- a/app/assets/stylesheets/common/base/modal.scss +++ b/app/assets/stylesheets/common/base/modal.scss @@ -13,7 +13,7 @@ .input-hint-text { margin-left: 0.5em; - color: $secondary-medium; + color: $secondary-high; } .modal-header { @@ -327,8 +327,8 @@ .cannot_delete_reason { position: absolute; - background: dark-light-choose(scale-color($primary, $lightness: 10%), scale-color($secondary, $lightness: 10%)); - color: dark-light-choose(scale-color($primary, $lightness: 100%), scale-color($secondary, $lightness: 0%)); + background: dark-light-choose($primary, $secondary); + color: dark-light-choose($secondary, $secondary); text-align: center; border-radius: 2px; padding: 12px 8px; @@ -339,7 +339,7 @@ border: solid transparent; content: " "; position: absolute; - border-top-color: dark-light-choose(scale-color($primary, $lightness: 10%), scale-color($secondary, $lightness: 10%)); + border-top-color: dark-light-choose($primary, $secondary); border-width: 8px; } } diff --git a/app/assets/stylesheets/common/base/notifications-button.scss b/app/assets/stylesheets/common/base/notifications-button.scss index 63d3c2cf135..7aab2c44449 100644 --- a/app/assets/stylesheets/common/base/notifications-button.scss +++ b/app/assets/stylesheets/common/base/notifications-button.scss @@ -1,6 +1,6 @@ .notifications-button.notifications-button.notifications-button { .d-icon.regular, .d-icon.muted, .d-icon.watching-first-post { - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .d-icon.tracking, .d-icon.watching { color: $tertiary; diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss index 86e505e6226..b89a3efc785 100644 --- a/app/assets/stylesheets/common/base/onebox.scss +++ b/app/assets/stylesheets/common/base/onebox.scss @@ -97,7 +97,7 @@ aside.onebox { header { margin-bottom: 8px; a[href] { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); text-decoration: none; } } @@ -123,12 +123,12 @@ aside.onebox { } a[href] { - color: dark-light-choose(scale-color($tertiary, $lightness: -20%), $tertiary); + color: dark-light-choose($tertiary, $tertiary); text-decoration: none; } a[href]:visited { - color: dark-light-choose(scale-color($tertiary, $lightness: -20%), $tertiary); + color: dark-light-choose($tertiary, $tertiary); } img { @@ -364,7 +364,7 @@ aside.onebox.stackexchange .onebox-body { } .onebox-metadata { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .onebox.xkcd .onebox-body { diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss index a8a81759f43..cd3e92688f9 100644 --- a/app/assets/stylesheets/common/base/search.scss +++ b/app/assets/stylesheets/common/base/search.scss @@ -10,7 +10,7 @@ } .like-count { - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); + color: dark-light-choose($primary-medium, $secondary-medium); .fa { color: $love; font-size: 12px; } } @@ -32,7 +32,7 @@ margin-right: 14px; } a.search-link:visited .topic-title { - color: scale-color($tertiary, $lightness: 15%); + color: $tertiary-high; } .search-link { .topic-statuses, .topic-title { @@ -43,7 +43,7 @@ .topic-statuses { float: none; display: inline-block; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); font-size: 1.0em; } } @@ -52,13 +52,13 @@ line-height: 20px; word-wrap: break-word; max-width: 640px; - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); + color: dark-light-choose($primary-medium, $secondary-medium); .date { - color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } .search-highlight { - color: dark-light-choose(scale-color($primary, $lightness: 10%), scale-color($secondary, $lightness: 90%)); + color: dark-light-choose($primary, $secondary-low); } } diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss index 0f74cb0e76e..10ba75d1109 100644 --- a/app/assets/stylesheets/common/base/share_link.scss +++ b/app/assets/stylesheets/common/base/share_link.scss @@ -55,7 +55,7 @@ float: right; font-size: 1.429em; a { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } @@ -67,7 +67,7 @@ .date { float: right; margin: 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } input[type=text] { diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss index 65c06c6f8ee..623b4369bc0 100644 --- a/app/assets/stylesheets/common/base/tagging.scss +++ b/app/assets/stylesheets/common/base/tagging.scss @@ -83,7 +83,7 @@ margin: 0; } -$tag-color: scale-color($primary, $lightness: 40%); +$tag-color: $primary-medium; .discourse-tag-count { font-size: 0.8em; @@ -109,18 +109,18 @@ $tag-color: scale-color($primary, $lightness: 40%); } &.box { - background-color: scale-color($primary, $lightness: 90%); - color: scale-color($primary, $lightness: 30%); + background-color: $primary-low; + color: $primary-high; padding: 2px 8px; .extra-info-wrapper & { - background-color: scale-color($header-primary, $lightness: 90%); - color: scale-color($header-primary, $lightness: 30%); + background-color: $header_primary-low; + color: $header_primary-medium; } } &.simple, &.simple:visited, &.simple:hover { margin-right: 0px; - color: scale-color($primary, $lightness: 30%); + color: $primary-high; } } @@ -183,7 +183,7 @@ $tag-color: scale-color($primary, $lightness: 40%); .discourse-tag.bullet:before { content: "\f04d"; font-family: FontAwesome; - color: scale-color($primary, $lightness: 70%); + color: $primary-low-mid; margin-right: 5px; font-size: 0.7em; position:relative; @@ -226,7 +226,7 @@ header .discourse-tag {color: $tag-color } .autocomplete { .d-icon-tag { - color: dark-light-choose($primary, scale-color($primary, $lightness: 70%)); + color: dark-light-choose($primary, $primary-low-mid); padding-right: 5px; } diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 4f8dd185db9..84b7aeac1ce 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -30,16 +30,16 @@ overflow: hidden; text-overflow: ellipsis; a { - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose($primary-high, $secondary-low); } } .fa { font-size: 11px; margin-left: 3px; - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .new_user a, .user-title, .user-title a { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } @@ -49,8 +49,8 @@ h1, h2, h3, h4, h5, h6 { margin: 30px 0 10px; } h1 { line-height: 1em; } /* normalize.css sets h1 font size but not line height */ a { word-wrap: break-word; } - ins { background-color: dark-light-choose(scale-color($success, $lightness: 90%), scale-color($success, $lightness: -60%)); } - del { background-color: dark-light-choose(scale-color($danger, $lightness: 90%), scale-color($danger, $lightness: -60%)); } + ins { background-color: dark-light-choose($success-low, scale-color($success, $lightness: -60%)); } + del { background-color: dark-light-choose($danger-low, scale-color($danger, $lightness: -60%)); } } @@ -72,7 +72,7 @@ aside.quote { .title { @include post-aside; - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose($primary-high, $secondary-low); // IE will screw up the blockquote underneath if bottom padding is 0px padding: 12px 12px 1px 12px; // blockquote is underneath this and has top margin @@ -88,7 +88,7 @@ aside.quote { } .quote-controls, .quote-controls .d-icon { - color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); + color: dark-light-choose($primary-low-mid, $secondary-high); } .cooked .highlight { @@ -238,7 +238,7 @@ aside.quote { } &.via-email { - color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); + color: dark-light-choose($primary-low-mid, $secondary-high); } &.raw-email { cursor: pointer; @@ -287,7 +287,7 @@ blockquote > *:last-child { .gap { padding: 0.25em 0 0.5em 4.3em; - color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); cursor: pointer; text-transform: uppercase; font-weight: bold; @@ -329,12 +329,12 @@ blockquote > *:last-child { font-size: 35px; width: 45px; text-align: center; - color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); + color: dark-light-choose($primary-low-mid, $secondary-high); } } .small-action-desc.timegap { - color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } .small-action-desc { padding: 0.25em 0 0.5em 4.3em; @@ -342,7 +342,7 @@ blockquote > *:last-child { text-transform: uppercase; font-weight: bold; font-size: 0.9em; - color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); + color: dark-light-choose($primary-low-mid, $secondary-high); .custom-message { text-transform: none; @@ -388,7 +388,7 @@ blockquote > *:last-child { a.mention, a.mention-group { padding: 2px 4px; - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose($primary-high, $secondary-low); background: $primary-low; border-radius: 8px; font-weight: bold; @@ -408,7 +408,7 @@ a.mention, a.mention-group { } .broken-image, .large-image { - color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); + color: dark-light-choose($primary-low-mid, $secondary-high); border: 1px solid $primary-low; font-size: 32px; padding: 16px; diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss index ed3784cf54a..57c1cce9d28 100644 --- a/app/assets/stylesheets/common/base/topic.scss +++ b/app/assets/stylesheets/common/base/topic.scss @@ -149,7 +149,7 @@ } .expand-links { - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .track-link { @@ -165,7 +165,7 @@ li { margin-bottom: 0.5em; a[href] { - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .clicks { margin-left: 0.5em; diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss index cdcfc202ad3..4c275a0598f 100644 --- a/app/assets/stylesheets/common/base/user-badges.scss +++ b/app/assets/stylesheets/common/base/user-badges.scss @@ -196,7 +196,7 @@ .badge-groups { margin: 20px 0; - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); + color: dark-light-choose($primary-medium, $secondary-medium); h3 { margin-bottom: 1.0em; } @@ -222,7 +222,7 @@ } .grant-info-item { margin-bottom: 1em; - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .badge-title .form-horizontal .controls { diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss index bf2a27c58fa..f397d38508e 100644 --- a/app/assets/stylesheets/common/base/user.scss +++ b/app/assets/stylesheets/common/base/user.scss @@ -198,7 +198,7 @@ } a { - color: $secondary; + color: dark-light-choose($primary-medium, $secondary-high); } .active { @@ -253,7 +253,7 @@ } .instructions { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); margin-top: 5px; margin-bottom: 10px; font-size: 80%; @@ -343,7 +343,7 @@ padding-top: 10px; li a { - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } @@ -415,7 +415,7 @@ } .topic-info { - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } @media all and (max-width : 600px) { @@ -435,7 +435,7 @@ .links-section { .domain { font-size: 0.714em; - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } } @@ -462,7 +462,7 @@ } .instructions { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); margin-bottom: 10px; font-size: 80%; line-height: 1.4em; @@ -477,7 +477,7 @@ } .warning { - background-color: scale-color($danger, $lightness: 30%); + background-color: $danger-medium; padding: 5px 8px; color: $secondary; width: 520px; diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss index 6c05df9ebdb..c9ccb9fecf1 100644 --- a/app/assets/stylesheets/common/components/badges.scss +++ b/app/assets/stylesheets/common/components/badges.scss @@ -254,7 +254,7 @@ font-size: 11px; line-height: 1; text-align: center; - background-color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 70%)); + background-color: dark-light-choose($primary-low-mid, $secondary-low); &[href] { color: $secondary; } @@ -266,14 +266,14 @@ // New posts &.new-posts, &.unread-posts { - background-color: dark-light-choose(scale-color($tertiary, $lightness: 50%), $tertiary); + background-color: dark-light-choose($tertiary-medium, $tertiary); color: dark-light-choose($secondary, $secondary); font-weight: dark-light-choose(normal, bold); } &.new-topic { background-color: transparent; - color: scale-color($tertiary, $lightness: 20%); + color: $tertiary-high; font-weight: normal; font-size: 0.929em; } @@ -304,7 +304,7 @@ font-size: 1em; line-height: 1; &[href] { - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } diff --git a/app/assets/stylesheets/common/components/banner.scss b/app/assets/stylesheets/common/components/banner.scss index 5fe427df041..ada639bc08d 100644 --- a/app/assets/stylesheets/common/components/banner.scss +++ b/app/assets/stylesheets/common/components/banner.scss @@ -5,8 +5,8 @@ #banner { padding: 10px; border-radius: 5px; - background: scale-color($tertiary, $lightness: 90%); - box-shadow: 0 1px 2px scale-color($tertiary, $lightness: 70%); + background: $tertiary-low; + box-shadow: 0 1px 2px $tertiary-medium; color: darken($tertiary, 45%); z-index: 1001; overflow: auto; @@ -18,7 +18,7 @@ .close { font-size: 1.786em; margin-top: -5px; - color: scale-color($tertiary, $lightness: 70%); + color: $tertiary-medium; padding-left: 5px; float: right; } diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss index d15030ce26d..e14f7bda0fa 100644 --- a/app/assets/stylesheets/common/components/buttons.scss +++ b/app/assets/stylesheets/common/components/buttons.scss @@ -56,7 +56,7 @@ } &[disabled], &.disabled { background: $primary-low; - &:hover { color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); } + &:hover { color: dark-light-choose($primary-low-mid, $secondary-high); } cursor: not-allowed; } @@ -74,7 +74,7 @@ .btn-primary { border: none; font-weight: normal; - color: dark-light-choose(#fff, scale-color($primary, $lightness: 60%)); + color: dark-light-choose(#fff, $primary-medium); background: $tertiary; &[href] { @@ -82,10 +82,10 @@ } &:hover, &.btn-hover { color: #fff; - background: dark-light-choose(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -20%)); + background: dark-light-choose($tertiary, $tertiary); } &:active, &.btn-active { - @include linear-gradient(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -10%)); + @include linear-gradient($tertiary, $tertiary); color: $secondary; } &[disabled], &.disabled { diff --git a/app/assets/stylesheets/common/components/dropdown-select-box.scss b/app/assets/stylesheets/common/components/dropdown-select-box.scss index 86918865468..2172969ff94 100644 --- a/app/assets/stylesheets/common/components/dropdown-select-box.scss +++ b/app/assets/stylesheets/common/components/dropdown-select-box.scss @@ -37,7 +37,7 @@ align-self: center; margin-right: 0; opacity: 1; - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); + color: dark-light-choose($primary-high, $secondary-medium); } } @@ -62,7 +62,7 @@ flex: 1; font-size: 0.857em; font-weight: normal; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));; + color: dark-light-choose($primary-medium, $secondary-medium);; white-space: normal; } } diff --git a/app/assets/stylesheets/common/components/hashtag.scss b/app/assets/stylesheets/common/components/hashtag.scss index f3ae1052a59..4cf0903d442 100644 --- a/app/assets/stylesheets/common/components/hashtag.scss +++ b/app/assets/stylesheets/common/components/hashtag.scss @@ -1,9 +1,9 @@ a.hashtag { - color: dark-light-choose($primary, scale-color($primary, $lightness: 70%)); + color: dark-light-choose($primary, $primary-low-mid); font-weight: bold; &:visited, &:hover { - color: dark-light-choose($primary, scale-color($primary, $lightness: 70%)); + color: dark-light-choose($primary, $primary-low-mid); } &:hover { diff --git a/app/assets/stylesheets/common/components/select-box.scss b/app/assets/stylesheets/common/components/select-box.scss index 026dd0ed975..6cbf831bad1 100644 --- a/app/assets/stylesheets/common/components/select-box.scss +++ b/app/assets/stylesheets/common/components/select-box.scss @@ -231,7 +231,7 @@ &::-webkit-scrollbar-thumb { cursor: pointer; border-radius: 5px; - background: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + background: dark-light-choose($primary-medium, $secondary-medium); } &::-webkit-scrollbar-track { diff --git a/app/assets/stylesheets/common/components/user-info.scss b/app/assets/stylesheets/common/components/user-info.scss index 8c274f7b5f0..63bdc88280e 100644 --- a/app/assets/stylesheets/common/components/user-info.scss +++ b/app/assets/stylesheets/common/components/user-info.scss @@ -23,17 +23,17 @@ .username a { font-weight: bold; - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose($primary-high, $secondary-low); } .name { margin-left: 5px; - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose($primary-high, $secondary-low); } .title { margin-top: 3px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } @@ -56,7 +56,7 @@ min-height: 80px; .granted-on { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .post-link { diff --git a/app/assets/stylesheets/common/components/user-stream-item.scss b/app/assets/stylesheets/common/components/user-stream-item.scss index 42c6e1ca389..fbdcc97e668 100644 --- a/app/assets/stylesheets/common/components/user-stream-item.scss +++ b/app/assets/stylesheets/common/components/user-stream-item.scss @@ -70,7 +70,7 @@ } .edit-reason { - background-color: dark-light-choose(scale-color($highlight, $lightness: 25%), scale-color($highlight, $lightness: -50%)); + background-color: dark-light-choose($highlight-medium, scale-color($highlight, $lightness: -50%)); padding: 3px 5px 5px 5px; } @@ -100,7 +100,7 @@ // common/base/header.scss .fa, .icon { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); font-size: 1.714em; } } @@ -116,13 +116,13 @@ .name { display: inline-block; margin-top: 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium,$secondary-medium); } .title { display: inline-block; margin-top: 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } } diff --git a/app/assets/stylesheets/common/foundation/helpers.scss b/app/assets/stylesheets/common/foundation/helpers.scss index 2b540dca04b..883c8926cfa 100644 --- a/app/assets/stylesheets/common/foundation/helpers.scss +++ b/app/assets/stylesheets/common/foundation/helpers.scss @@ -81,6 +81,6 @@ // Buttons // --------------------------------------------------- .disable-no-hover:hover { - background: dark-light-choose(scale-color($primary, $lightness: 90%), scale-color($secondary, $lightness: 60%));; + background: dark-light-choose($primary-low, $secondary-medium);; color: $primary; } diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss index 08988f1a711..118725aab60 100644 --- a/app/assets/stylesheets/common/foundation/variables.scss +++ b/app/assets/stylesheets/common/foundation/variables.scss @@ -83,14 +83,25 @@ $base-font-family: Helvetica, Arial, sans-serif !default; //primary $primary-low: dark-light-diff($primary, $secondary, 90%, -65%); +$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%); $primary-medium: dark-light-diff($primary, $secondary, 50%, -20%); +$primary-high: dark-light-diff($primary, $secondary, 30%, -10%); + +//header_primary +$header_primary-low: dark-light-diff($header_primary, $secondary, 90%, -65%); +$header_primary-medium: dark-light-diff($header_primary, $secondary, 50%, -20%); +$header_primary-high: dark-light-diff($header_primary, $secondary, 20%, 20%); + //secondary -$secondary-low: dark-light-diff($secondary, $primary, 50%, -50%); -$secondary-medium: dark-light-diff($secondary, $primary, 30%, -35%); +$secondary-low: dark-light-diff($secondary, $primary, 70%, -70%); +$secondary-medium: dark-light-diff($secondary, $primary, 50%, -50%); +$secondary-high: dark-light-diff($secondary, $primary, 30%, -35%); //tertiary $tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%); +$tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%); +$tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%); //quaternary $quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%); @@ -104,7 +115,8 @@ $danger-low: dark-light-diff($danger, $secondary, 50%, -40%); $danger-medium: dark-light-diff($danger, $secondary, 30%, -60%); //success -$success-low: dark-light-diff($success, $secondary, 50%, -60%); +$success-low: dark-light-diff($success, $secondary, 80%, -60%); +$success-medium: dark-light-diff($success, $secondary, 50%, -40%); //love $love-low: dark-light-diff($love, $secondary, 85%, -60%); diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss index 0aed64cad0d..3f5deb9df9d 100644 --- a/app/assets/stylesheets/common/topic-timeline.scss +++ b/app/assets/stylesheets/common/topic-timeline.scss @@ -48,7 +48,7 @@ bottom: 0; left: 0; right: 0; - border-top: 1px solid dark-light-choose(scale-color($primary, $lightness: 90%), scale-color($secondary, $lightness: 90%)); + border-top: 1px solid dark-light-choose($primary-low, $secondary-low); box-shadow: 0px -2px 4px -1px rgba(0,0,0,.25); padding-top: 20px; z-index: 100000; @@ -81,7 +81,7 @@ -webkit-box-orient: vertical; } .username { - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose($primary-high, $secondary-low); word-wrap: break-word; font-weight: bold; } @@ -201,14 +201,14 @@ .start-date { @include unselectable; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .timeline-scrollarea { margin-top: 0.5em; margin-left: 0.5em; border-left: 1px solid; - border-color: dark-light-choose(scale-color($tertiary, $lightness: 80%), scale-color($tertiary, $lightness: 20%)); + border-color: dark-light-choose($tertiary-low, $tertiary-high); position: relative; -webkit-transform: translate3d(0,0,0); } @@ -224,7 +224,7 @@ .timeline-handle { @include border-radius-all(0.8em); width: 0.35em; - background-color: dark-light-choose(scale-color($tertiary, $lightness: 80%), scale-color($tertiary, $lightness: 20%)); + background-color: dark-light-choose($tertiary-low, $tertiary-high); height: 100%; float: left; z-index: 501; @@ -235,7 +235,7 @@ } .timeline-ago { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .timeline-scroller { @@ -273,7 +273,7 @@ .now-date { @include unselectable; display: inline-block; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); margin-top: 0.5em; i { margin-left: 0.15em; diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss index fb2de653449..b5d0a93ab00 100644 --- a/app/assets/stylesheets/desktop/category-list.scss +++ b/app/assets/stylesheets/desktop/category-list.scss @@ -27,7 +27,7 @@ .topics .badge-notification, .category .badge-notification { background-color: transparent; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } .topics { @@ -70,11 +70,11 @@ a.last-posted-at, a.last-posted-at:visited { font-size: 0.86em; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } .topic-statuses .fa { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } .topic-post-badges { diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss index 88044ba265f..c673cb913cb 100644 --- a/app/assets/stylesheets/desktop/compose.scss +++ b/app/assets/stylesheets/desktop/compose.scss @@ -100,7 +100,7 @@ } .posts-count { - background-color: dark-light-choose(scale-color($tertiary, $lightness: -40%), scale-color($tertiary, $lightness: 40%)); + background-color: dark-light-choose($tertiary, $tertiary-medium); } ul { @@ -110,7 +110,7 @@ } .search-link { .fa, .blurb { - color: dark-light-choose(scale-color($primary, $lightness: 45%), scale-color($secondary, $lightness: 55%)); + color: dark-light-choose($primary-high, $secondary-medium); } } .badge-wrapper { @@ -155,7 +155,7 @@ right: 1px; position: absolute; i { font-size: 1.1em; } - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); padding: 0 10px 5px 10px; } a.cancel { @@ -191,7 +191,7 @@ display: block; i { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } } @@ -353,7 +353,7 @@ } i { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } @@ -437,7 +437,7 @@ .d-editor-button-bar { top: 0; position: absolute; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); background-color: $secondary; z-index: 100; overflow: hidden; @@ -447,7 +447,7 @@ box-sizing: border-box; button { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-high, $secondary-high); } } } diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss index 268ee3beaeb..986ae3e4a53 100644 --- a/app/assets/stylesheets/desktop/discourse.scss +++ b/app/assets/stylesheets/desktop/discourse.scss @@ -26,7 +26,7 @@ header { display: block; width: 27px; margin: auto; - border-top: 3px double dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 50%)); + border-top: 3px double dark-light-choose($primary-low-mid, $secondary-medium); } } @@ -293,7 +293,7 @@ input { } .active { - background-color: scale-color($danger, $lightness: 30%); + background-color: $danger-medium; border-color: $danger; } } @@ -328,6 +328,8 @@ input { input, select { border-radius: 0; + background-color: $primary-low; + border-color: $primary-low; } .add-on, @@ -392,7 +394,7 @@ input { .input-append { .add-on { color: $danger; - background-color: scale-color($danger, $lightness: 30%); + background-color: $danger-medium; border-color: scale-color($danger, $lightness: -20%); } } @@ -421,7 +423,7 @@ input { .input-append { .add-on { color: $success; - background-color: scale-color($success, $lightness: 90%); + background-color: $success-low; border-color: $success; } } diff --git a/app/assets/stylesheets/desktop/group.scss b/app/assets/stylesheets/desktop/group.scss index 5bd0b3b9e6b..e287be2cb0e 100644 --- a/app/assets/stylesheets/desktop/group.scss +++ b/app/assets/stylesheets/desktop/group.scss @@ -3,7 +3,7 @@ float: left; a, i { - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } .active { diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss index c401a765942..9417b848090 100644 --- a/app/assets/stylesheets/desktop/header.scss +++ b/app/assets/stylesheets/desktop/header.scss @@ -31,13 +31,13 @@ and (max-width : 570px) { } .search-link .blurb { - color: dark-light-choose(scale-color($primary, $lightness: 45%), scale-color($secondary, $lightness: 55%)); + color: dark-light-choose($primary-high, $secondary-medium); display: block; word-wrap: break-word; font-size: 11px; line-height: 1.3em; .search-highlight { - color: dark-light-choose(scale-color($primary, $lightness: 25%), scale-color($secondary, $lightness: 75%)); + color: dark-light-choose($primary-high, $secondary-low); } } diff --git a/app/assets/stylesheets/desktop/latest-topic-list.scss b/app/assets/stylesheets/desktop/latest-topic-list.scss index db703a77b3d..6a4337309d3 100644 --- a/app/assets/stylesheets/desktop/latest-topic-list.scss +++ b/app/assets/stylesheets/desktop/latest-topic-list.scss @@ -3,7 +3,7 @@ .table-heading { padding: 12px 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } .no-topics, .more-topics { @@ -32,10 +32,10 @@ .topic-stats { flex: 1; text-align: right; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } .topic-last-activity a { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } } diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss index 800a954322c..23c933180f4 100644 --- a/app/assets/stylesheets/desktop/login.scss +++ b/app/assets/stylesheets/desktop/login.scss @@ -14,7 +14,7 @@ #login-form { a { - color: dark-light-choose(scale-color($primary, $lightness: 35%), scale-color($secondary, $lightness: 65%)); + color: dark-light-choose($primary-high, $secondary-low); } } @@ -53,7 +53,7 @@ .instructions { label { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss index 000e2d168be..373921ddaba 100644 --- a/app/assets/stylesheets/desktop/modal.scss +++ b/app/assets/stylesheets/desktop/modal.scss @@ -62,7 +62,7 @@ .close { font-size: 1.429em; text-decoration: none; - color: dark-light-choose(scale-color($primary, $lightness: 35%), scale-color($secondary, $lightness: 65%)); + color: dark-light-choose($primary-high, $secondary-low); cursor: pointer; &:hover { color: $primary; @@ -93,7 +93,7 @@ .custom-message-length { margin: -10px 0 10px 20px; - color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); + color: dark-light-choose($primary-low-mid, $secondary-high); font-size: 85%; } @@ -116,11 +116,11 @@ li { margin: 0 4px 8px 0; a { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); cursor: pointer; } a:hover { - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } } diff --git a/app/assets/stylesheets/desktop/queued-posts.scss b/app/assets/stylesheets/desktop/queued-posts.scss index 363eca2dc8a..38f48442b7e 100644 --- a/app/assets/stylesheets/desktop/queued-posts.scss +++ b/app/assets/stylesheets/desktop/queued-posts.scss @@ -11,7 +11,7 @@ float: right; font-size: 0.929em; margin-top: 1px; - span {color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } + span {color: dark-light-choose($primary-medium, $secondary-medium); } } .cooked { diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index 6d7094999ec..b7ebb95653e 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -34,10 +34,10 @@ // -------------------------------------------------- .topic-list-icons { - .d-icon-thumb-tack { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } - .d-icon-thumb-tack.unpinned { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } + .d-icon-thumb-tack { color: dark-light-choose($primary-medium, $secondary-medium); } + .d-icon-thumb-tack.unpinned { color: dark-light-choose($primary-medium, $secondary-medium); } a.title {color: $primary;} - .d-icon-bookmark { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } + .d-icon-bookmark { color: dark-light-choose($primary-medium, $secondary-medium); } } .topic-list { @@ -55,7 +55,7 @@ } } th { - button .d-icon {color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } + button .d-icon {color: dark-light-choose($primary-medium, $secondary-medium); } } > tbody > tr { @@ -106,8 +106,8 @@ } .posters a:first-child .avatar.latest:not(.single) { - box-shadow: 0 0 3px 1px desaturate(scale-color($tertiary, $lightness: 65%), 35%); - border: 2px solid desaturate(scale-color($tertiary, $lightness: 50%), 40%); + box-shadow: 0 0 3px 1px desaturate($tertiary-medium, 35%); + border: 2px solid desaturate($tertiary-medium, 40%); position: relative; top: -2px; left: -2px; @@ -134,7 +134,7 @@ .post-actions { clear: both; width: auto; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); text-align: left; font-size: 12px; margin-top: 5px; @@ -143,7 +143,7 @@ } a { font-size: 11px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); margin-right: 3px; line-height: 20px; } @@ -220,11 +220,11 @@ margin: 10px 0 0; /* topic status glyphs */ i { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)) !important; + color: dark-light-choose($primary-medium, $secondary-medium) !important; font-size: 0.929em; } a.last-posted-at, a.last-posted-at:visited { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); font-size: 0.88em; } .badge { diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index cc7bc92f3b1..a85d624486b 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -31,7 +31,7 @@ h1 .topic-statuses .topic-status i { font-size: 0.929em; float: right; margin: 1px 25px 0 0; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .actions .fade-out { @@ -61,11 +61,11 @@ nav.post-controls { } .highlight-action { - color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } a, button { - color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); + color: dark-light-choose($primary-low-mid, $secondary-high); .d-icon { opacity: 1.0; @@ -98,7 +98,7 @@ nav.post-controls { .show-replies { margin-left: -10px; font-size: inherit; - span.badge-posts {color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); } + span.badge-posts {color: dark-light-choose($primary-medium, $secondary-high); } &:hover { background: $primary-low; span.badge-posts {color: $primary;} @@ -111,7 +111,7 @@ nav.post-controls { button.create { margin-right: 0; - color: dark-light-choose(scale-color($primary, $lightness: 20%), scale-color($secondary, $lightness: 80%)); + color: dark-light-choose($primary-high, $secondary-low); margin-left: 10px; } @@ -248,7 +248,7 @@ nav.post-controls { padding: 0; } - .post-date { color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); } + .post-date { color: dark-light-choose($primary-medium, $secondary-high); } .d-icon-arrow-up, .d-icon-arrow-down { margin-left: 5px; } .reply:first-of-type .row { border-top: none; } @@ -261,10 +261,10 @@ nav.post-controls { font-size: 0.929em; a { font-weight: bold; - color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); + color: dark-light-choose($primary-low-mid, $secondary-high); } } - .arrow {color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); } + .arrow {color: dark-light-choose($primary-medium, $secondary-high); } } .post-action { @@ -291,7 +291,7 @@ a.star { h3 { margin-bottom: 4px; - color: dark-light-choose(scale-color($primary, $lightness: 20%), scale-color($secondary, $lightness: 80%)); + color: dark-light-choose($primary-high, $secondary-low); line-height: 23px; font-weight: normal; font-size: 1em; @@ -299,7 +299,7 @@ a.star { h4 { margin: 1px 0 2px 0; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); font-weight: normal; font-size: 0.857em; line-height: 15px; @@ -312,7 +312,7 @@ a.star { span.domain { font-size: 0.714em; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .avatars { @@ -352,7 +352,7 @@ a.star { line-height: 20px; } .number, i { - color: dark-light-choose(scale-color($primary, $lightness: 20%), scale-color($secondary, $lightness: 80%)); + color: dark-light-choose($primary-high, $secondary-low); font-size: 130%; } .avatar a { @@ -369,12 +369,12 @@ a.star { .participants { // PMs // .user { float: left; margin: 7px 20px 7px 0; } .user a { - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose($primary-high, $secondary-low); font-weight: bold; font-size: 0.929em; } .d-icon-times { - color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); } } @@ -394,7 +394,7 @@ a.star { .btn { border: 0; padding: 0 23px; - color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); background: blend-primary-secondary(5%); border-left: 1px solid $primary-low; border-top: 1px solid $primary-low; @@ -415,7 +415,7 @@ a.star { } .link-summary .btn { - color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); background: blend-primary-secondary(5%); width: 100%; &:hover { @@ -427,7 +427,7 @@ a.star { @mixin topic-footer-buttons-text { line-height: 32px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } @mixin topic-footer-button { @@ -574,7 +574,7 @@ video { .moderator { .topic-body { - background-color: $highlight-low; + background-color: dark-light-choose($highlight-low, $highlight-medium); } } @@ -710,7 +710,7 @@ $topic-avatar-width: 45px; background-clip: padding-box; span { font-size: 0.857em; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } span.title { font-weight: bold; @@ -809,7 +809,7 @@ $topic-avatar-width: 45px; color: $secondary; font-weight: normal; margin-bottom: 10px; - background: scale-color($tertiary, $lightness: 50%); + background: $tertiary-medium; &[href] { color: $secondary; @@ -817,7 +817,7 @@ $topic-avatar-width: 45px; &:hover { color: $secondary; - background: scale-color($tertiary, $lightness: 20%); + background: $tertiary-high; } &:active { @include linear-gradient(darken($tertiary, 18%), darken($tertiary, 12%)); @@ -837,7 +837,7 @@ $topic-avatar-width: 45px; article.boxed { .select-posts { button.select-post { - background-color: scale-color($tertiary, $lightness: 50%); + background-color: $tertiary-medium; color: $secondary; } } @@ -860,8 +860,8 @@ $topic-avatar-width: 45px; button { margin-left: 8px; - background-color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); - border: 1px solid dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); + background-color: dark-light-choose($primary-low-mid, $secondary-high); + border: 1px solid dark-light-choose($primary-medium, $secondary-high); color: $primary; } } @@ -905,7 +905,7 @@ a.attachment:before { float: right; font-size: 0.929em; margin-top: 1px; - a {color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } + a {color: dark-light-choose($primary-medium, $secondary-medium); } } } @@ -922,11 +922,11 @@ span.highlighted { } .username.new-user a { - color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); + color: dark-light-choose($primary-low-mid, $secondary-high); } .read-state { - color: scale-color($tertiary, $lightness: 50%); + color: $tertiary-medium; position: absolute; right: 0px; top: 13px; diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index 98f7ec65fd3..a55c8363475 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -45,7 +45,7 @@ } .private-message-glyph { - color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); + color: dark-light-choose($primary-low-mid, $secondary-high); float: left; margin: 0 5px 0 0; } @@ -188,7 +188,7 @@ #topic-filter { - background-color: scale-color($highlight, $lightness: 25%); + background-color: $highlight-medium; padding: 8px; bottom: 0; position: fixed; diff --git a/app/assets/stylesheets/desktop/upload.scss b/app/assets/stylesheets/desktop/upload.scss index 557bdbdbddc..07f68b15980 100644 --- a/app/assets/stylesheets/desktop/upload.scss +++ b/app/assets/stylesheets/desktop/upload.scss @@ -17,7 +17,7 @@ line-height: 18px; } .description, .hint { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); display: block; } .hint { diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index 32124e6ca3b..2e07197d0c4 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -54,7 +54,7 @@ } a { - color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); &.active { color: $primary; @@ -99,7 +99,7 @@ text-align: left; border-bottom: 3px solid $primary-low; padding: 0 0 10px 0; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); font-weight: normal; } @@ -140,10 +140,10 @@ } } - .secondary { - background: scale-color($secondary, $lightness: -5%); - border-top: 1px solid $primary-low; - border-bottom: 1px solid $primary-low; + .secondary { + background: $secondary; + border-top: 1px solid $primary-low; + border-bottom: 1px solid $primary-low; dl { padding: 8px 10px; diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss index 65a25aa8f17..0f48544c046 100644 --- a/app/assets/stylesheets/embed.scss +++ b/app/assets/stylesheets/embed.scss @@ -87,7 +87,7 @@ article.post { } a.new-user { - color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); + color: dark-light-choose($primary-low-mid, $secondary-high); } span.title { diff --git a/app/assets/stylesheets/mobile/components/user-stream-item.scss b/app/assets/stylesheets/mobile/components/user-stream-item.scss index 40e43cf7a7e..3727bbd76b1 100644 --- a/app/assets/stylesheets/mobile/components/user-stream-item.scss +++ b/app/assets/stylesheets/mobile/components/user-stream-item.scss @@ -17,7 +17,7 @@ .notification { &.unread { - background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), srgb-scale($tertiary, $secondary, 15%)); + background-color: dark-light-choose($tertiary-low, srgb-scale($tertiary, $secondary, 15%)); } } diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss index 48844826c50..45664c752be 100644 --- a/app/assets/stylesheets/mobile/compose.scss +++ b/app/assets/stylesheets/mobile/compose.scss @@ -66,7 +66,7 @@ input[type=radio], input[type=checkbox] { right: 1px; position: absolute; font-size: 1.071em; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } .toggle-toolbar { @@ -84,7 +84,7 @@ input[type=radio], input[type=checkbox] { max-width: 80%; white-space: nowrap; i { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } } @@ -119,7 +119,7 @@ input[type=radio], input[type=checkbox] { text-overflow: ellipsis; i { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } } @@ -176,11 +176,11 @@ input[type=radio], input[type=checkbox] { #reply-title { margin-right: 10px; &:disabled { - background-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); + background-color: dark-light-choose($primary-low-mid, $secondary-high); } } .d-editor-input:disabled { - background-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); + background-color: dark-light-choose($primary-low-mid, $secondary-high); } .d-editor-input { color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%)); @@ -317,7 +317,7 @@ input[type=radio], input[type=checkbox] { display: block; margin: 1px 4px; position: absolute; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); background-color: $secondary; z-index: 100; overflow: hidden; @@ -328,7 +328,7 @@ input[type=radio], input[type=checkbox] { box-sizing: border-box; button { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } button.btn.no-text { margin: 0 2px; diff --git a/app/assets/stylesheets/mobile/directory.scss b/app/assets/stylesheets/mobile/directory.scss index 4cd15c89009..4636e391eb0 100644 --- a/app/assets/stylesheets/mobile/directory.scss +++ b/app/assets/stylesheets/mobile/directory.scss @@ -23,7 +23,7 @@ &.me { - background-color: $highlight-low; + background-color: dark-light-choose($highlight-low, $highlight-medium); .username a, .name, .title, .number, .time-read, .user-stat .label { color: scale-color($highlight, $lightness: -50%); diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss index fce24121a20..2acd1d8412d 100644 --- a/app/assets/stylesheets/mobile/discourse.scss +++ b/app/assets/stylesheets/mobile/discourse.scss @@ -63,7 +63,7 @@ h2 { .topic-status { i { - color: $secondary-medium; + color: $secondary-high; } } @@ -100,7 +100,7 @@ h2 { .fa { margin-right: 8px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } diff --git a/app/assets/stylesheets/mobile/login.scss b/app/assets/stylesheets/mobile/login.scss index c5d7bd61ace..e642c7bcdb8 100644 --- a/app/assets/stylesheets/mobile/login.scss +++ b/app/assets/stylesheets/mobile/login.scss @@ -16,7 +16,7 @@ #login-form { a { - color: dark-light-choose(scale-color($primary, $lightness: 35%), scale-color($secondary, $lightness: 65%)); + color: dark-light-choose($primary-high, $secondary-low); } label { float: left; display: block; } textarea, input, select { @@ -59,7 +59,7 @@ $input-width: 184px; tr.instructions { label { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss index 5bceb7f11d2..2adf1c67ccf 100644 --- a/app/assets/stylesheets/mobile/modal.scss +++ b/app/assets/stylesheets/mobile/modal.scss @@ -105,7 +105,7 @@ .custom-message-length { margin: -4px 0 10px 20px; - color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); + color: dark-light-choose($primary-high, $secondary-low); font-size: 85%; } @@ -164,7 +164,7 @@ .alert { padding: 5px; &.alert-success { - background-color: scale-color($success, $lightness: 90%); + background-color: $success-low; color: $success; } } diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index cfe5b09e048..8b00bd6cd23 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -26,7 +26,7 @@ position: relative; } .nav-pills .drop { - border: 1px solid $primary-low; + border: 1px solid $primary-low; position: absolute; z-index: 1000; background-color: $secondary; @@ -82,7 +82,7 @@ th, td { padding: 7px 0; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); max-width: 300px; } @@ -119,7 +119,7 @@ max-width: 160px; } .num .fa, a, a:visited { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } @@ -129,7 +129,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(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)) !important; + color: dark-light-choose($primary-low-mid, $secondary-high) !important; } } } @@ -142,7 +142,7 @@ td { padding: 12px 5px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); vertical-align: top; } @@ -212,7 +212,7 @@ tr.category-topic-link { .featured-topic { margin: 8px 0; a.last-posted-at, a.last-posted-at:visited { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } } } @@ -291,7 +291,7 @@ tr.category-topic-link { figure { float: left; margin: 3px 7px 0 0; - color: dark-light-choose(scale-color($primary, $lightness: 10%), scale-color($secondary, $lightness: 90%)); + color: dark-light-choose($primary, $secondary-low); font-weight: bold; font-size: 0.857em; } @@ -359,7 +359,7 @@ tr.category-topic-link { padding: 4px 0; list-style: none; background-color: $secondary; - border: 1px solid dark-light-choose(rgba(0, 0, 0, 0.2), scale-color($primary, $lightness: -60%)); + border: 1px solid dark-light-choose(rgba(0, 0, 0, 0.2), $primary); border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); background-clip: padding-box; @@ -379,7 +379,7 @@ tr.category-topic-link { .dropdown-menu .active > a:hover { color: $tertiary; text-decoration: none; - background-color: scale-color($tertiary, $lightness: 75%); + background-color: $tertiary-low; } .open > .dropdown-menu { display: block; diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index 4e35da9a5c3..57d23027496 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -63,7 +63,7 @@ nav.post-controls { padding: 8px 10px; vertical-align: top; background: transparent; - color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); + color: dark-light-choose($primary-low-mid, $secondary-high); float: left; &.hidden { display: none; @@ -91,7 +91,7 @@ nav.post-controls { /* shift post reply button to the right and make it black */ .post-controls button.create { float: right; - color: dark-light-choose(scale-color($primary, $lightness: 20%), scale-color($secondary, $lightness: 80%)); + color: dark-light-choose($primary-high, $secondary-low); } @@ -153,7 +153,7 @@ a.reply-to-tab { position: absolute; z-index: 400; right: 80px; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); span { display: none; } } @@ -181,7 +181,7 @@ a.star { h3 { margin-bottom: 4px; margin-top: 0; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); line-height: 23px; font-weight: normal; font-size: 1em; @@ -189,7 +189,7 @@ a.star { h4 { margin: 0 0 3px 0; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); font-weight: normal; font-size: 0.857em; line-height: 15px; @@ -246,7 +246,7 @@ a.star { line-height: 20px; } .number, i { - color: dark-light-choose(scale-color($primary, $lightness: 20%), scale-color($secondary, $lightness: 80%)); + color: dark-light-choose($primary-high, $secondary-low); font-size: 110%; } @@ -269,7 +269,7 @@ a.star { } .domain { - color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); + color: dark-light-choose($primary-low-mid, $secondary-high); } .topic-links { @@ -288,7 +288,7 @@ a.star { .btn { border: 0; padding: 0 15px; - color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); background: blend-primary-secondary(5%); border-left: 1px solid $primary-low; border-top: 1px solid $primary-low; @@ -301,7 +301,7 @@ a.star { } .link-summary .btn { - color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); + color: dark-light-choose($primary-medium, $secondary-high); background: blend-primary-secondary(5%); width: 100%; } @@ -324,7 +324,7 @@ a.star { #topic-footer-buttons p { clear: both; /* this is to force the drop-down notification state description para below the button */ margin: 0; - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } #topic-footer-button { @@ -382,7 +382,7 @@ span.post-count { } .moderator .topic-body { - background-color: $highlight-low; + background-color: dark-light-choose($highlight-low, $highlight-medium); } .quote-button.visible { @@ -410,7 +410,7 @@ iframe { padding-top: 1px; } span { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } span.title { color: $primary; @@ -495,7 +495,7 @@ blockquote { .posts-wrapper { position: relative; } span.highlighted { - background-color: dark-light-choose(scale-color($highlight, $lightness: 70%), $highlight); + background-color: dark-light-choose($highlight-low, $highlight); } .topic-avatar { @@ -526,7 +526,7 @@ span.highlighted { } .username.new-user a { - color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); + color: dark-light-choose($primary-low-mid, $secondary-high); } .user-title { diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss index 3cd5f0ca3a7..6b292ff8fa0 100644 --- a/app/assets/stylesheets/mobile/topic.scss +++ b/app/assets/stylesheets/mobile/topic.scss @@ -31,7 +31,7 @@ .private-message-glyph { display: none; } } -.private-message-glyph { color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); } +.private-message-glyph { color: dark-light-choose($primary-low-mid, $secondary-high); } .private_message #topic-title .private-message-glyph { display: inline; } @@ -172,9 +172,9 @@ .topic-post:last-of-type {padding-bottom: 40px;} -.heatmap-high {color: scale-color($danger, $lightness: -25%) !important;} -.heatmap-med {color: $danger !important;} -.heatmap-low {color: scale-color($danger, $lightness: 25%) !important;} +.heatmap-high {color: $danger !important;} +.heatmap-med {color: $danger-medium !important;} +.heatmap-low {color: $danger-low !important;} sup sup, sub sup, sup sub, sub sub { top: 0; } diff --git a/app/assets/stylesheets/mobile/upload.scss b/app/assets/stylesheets/mobile/upload.scss index 00797993b07..b9fb0582676 100644 --- a/app/assets/stylesheets/mobile/upload.scss +++ b/app/assets/stylesheets/mobile/upload.scss @@ -7,7 +7,7 @@ line-height: 18px; } .description { - color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); + color: dark-light-choose($primary-medium, $secondary-medium); } }