diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 7043a1349..fcbe28257 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -1682,23 +1682,25 @@ table#user-badges {
background: $secondary;
}
}
-.cbox0 { background: choose-grey(0%); }
-.cbox10 { background: choose-grey(10%); }
-.cbox20 { background: choose-grey(20%); }
-.cbox30 { background: choose-grey(30%); }
-.cbox40 { background: choose-grey(40%); }
-.cbox50 { background: choose-grey(50%); }
-.cbox60 { background: choose-grey(60%); }
-.cbox70 { background: choose-grey(70%); }
-.cbox80 { background: choose-grey(80%); }
-.cbox90 { background: choose-grey(90%); }
-.cbox100 { background: choose-grey(100%); }
-.cbox5 { background: choose-grey(5%); }
-.cbox15 { background: choose-grey(15%); }
-.cbox25 { background: choose-grey(25%); }
-.cbox95 { background: choose-grey(95%); }
-.cbox85 { background: choose-grey(85%); }
-.cbox75 { background: choose-grey(75%); }
+.cbox0 { background: blend-primary-secondary(0%); }
+.cbox10 { background: blend-primary-secondary(10%); }
+.cbox20 { background: blend-primary-secondary(20%); }
+.cbox30 { background: blend-primary-secondary(30%); }
+.cbox40 { background: blend-primary-secondary(40%); }
+.cbox50 { background: blend-primary-secondary(50%); }
+.cbox60 { background: blend-primary-secondary(60%); }
+.cbox70 { background: blend-primary-secondary(70%); }
+.cbox80 { background: blend-primary-secondary(80%); }
+.cbox90 { background: blend-primary-secondary(90%); }
+.cbox100 { background: blend-primary-secondary(100%); }
+.cbox5 { background: blend-primary-secondary(5%); }
+.cbox7 { background: blend-primary-secondary(7%); }
+.cbox15 { background: blend-primary-secondary(15%); }
+.cbox17 { background: blend-primary-secondary(17%); }
+.cbox25 { background: blend-primary-secondary(25%); }
+.cbox95 { background: blend-primary-secondary(95%); }
+.cbox85 { background: blend-primary-secondary(85%); }
+.cbox75 { background: blend-primary-secondary(75%); }
.dbox0 { background: dark-light-diff($primary, $secondary, 0%, -0%); }
.dbox10 { background: dark-light-diff($primary, $secondary, 10%, -10%); }
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 167cbd4e4..ab1437c06 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -171,7 +171,7 @@ pre {
display: block;
padding: 5px 10px;
color: $primary;
- background: choose-grey(5%);
+ background: blend-primary-secondary(5%);
max-height: 500px;
}
}
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 25ec023f0..1770d524d 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -98,5 +98,5 @@
// Stuff we repeat
@mixin post-aside {
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -85%);
- background-color: choose-grey(5%);
+ background-color: blend-primary-secondary(5%);
}
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 3acece625..b09dbc289 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -59,14 +59,10 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
}
// Replaces dark-light-diff($primary, $secondary, 50%, -50%)
-@function choose-grey($percent) {
+@function blend-primary-secondary($percent) {
@return srgb-scale($primary, $secondary, $percent);
}
-@function choose-gray($percent) {
- @return choose-grey($percent);
-}
-
@function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) {
@if brightness($adjusted-color) < brightness($comparison-color) {
@return scale-color($adjusted-color, $lightness: $lightness);
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 7c389b38f..5d6195a4e 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -308,7 +308,7 @@ a.star {
.topic-map {
margin: 20px 0 0 0;
- background: choose-grey(5%);
+ background: blend-primary-secondary(5%);
border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border-top: none; // would cause double top border
@@ -414,7 +414,7 @@ a.star {
border: 0;
padding: 0 23px;
color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
- background: choose-grey(5%);
+ background: blend-primary-secondary(5%);
border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
&:hover {
@@ -626,13 +626,13 @@ blockquote {
.quote {
&>blockquote {
.onebox-result {
- background-color: choose-grey(5%);
+ background-color: blend-primary-secondary(5%);
}
}
aside {
.quote, .title, blockquote, .onebox, .onebox-result {
- background: choose-grey(5%);
+ background: blend-primary-secondary(5%);
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
}
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 4fb2c9c00..cc0c26f0f 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -16,7 +16,7 @@ display: none !important; // can be removed if inline JS CSS is removed from com
input {
background: $secondary;
color: $primary;
- border-color: choose-grey(15%);
+ border-color: blend-primary-secondary(15%);
}
#reply-control {
@@ -178,7 +178,7 @@ input {
background-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%));
}
.wmd-input {
- color: dark-light-choose(darken($primary, 40%), choose-grey(90%));
+ color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%));
}
.wmd-input {
bottom: 35px;
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 050d6d6d6..ef1bbbe8b 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -168,7 +168,7 @@ a.star {
.topic-map {
margin: 10px 0;
- background: choose-grey(5%);
+ background: blend-primary-secondary(5%);
border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border-top: none; // would cause double top border
@@ -287,7 +287,7 @@ a.star {
border: 0;
padding: 0 15px;
color: $primary;
- background: choose-grey(5%);
+ background: blend-primary-secondary(5%);
border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
.fa {
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 42032f3fe..13b7ebad0 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -306,7 +306,7 @@
width: 100%;
position: relative;
float: left;
- color: dark-light-choose(scale-color($secondary, $lightness: 75%), choose-grey(90%));
+ color: dark-light-choose(scale-color($secondary, $lightness: 75%), blend-primary-secondary(90%));
h1 {font-weight: bold;}
@@ -369,7 +369,7 @@
.details {
padding: 12px 15px 2px 15px;
margin-top: 0;
- background: dark-light-choose(rgba($primary, 1), choose-grey(5%));
+ background: dark-light-choose(rgba($primary, 1), blend-primary-secondary(5%));
.bio { display: none; }
.primary {