DEV: Refactor blend-primary-secondary() usage in SCSS

discourse · Jul 28, 2020 · 81ab62c · 81ab62c
1 parent cfd3dce
commit 81ab62c
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 19 deletions.
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
@@ -507,7 +507,7 @@ table {
   animation: rotate-forever 1s infinite linear;
   height: 30px;
   width: 30px;
-  border: 4px solid blend-primary-secondary(50%);
+  border: 4px solid $primary-low-mid;
   border-right-color: transparent;
   border-radius: 50%;
 

diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -252,7 +252,7 @@
       align-items: center;
       min-height: 30px;
       color: dark-light-choose($primary-medium, $secondary-high);
-      background: blend-primary-secondary(5%);
+      background: $blend-primary-secondary-5;
       &:hover {
         color: $primary;
         background: $primary-low;

diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
@@ -131,12 +131,12 @@ aside.onebox {
     }
 
     a[href] {
-      color: dark-light-choose($tertiary, $tertiary);
+      color: $tertiary;
       text-decoration: none;
     }
 
     a[href]:visited {
-      color: dark-light-choose($tertiary, $tertiary);
+      color: $tertiary;
     }
 
     img {
@@ -304,7 +304,7 @@ aside.onebox {
 
 // Google Calendar Placeholder
 .gdocs-onebox-splash {
-  background-color: blend-primary-secondary(30%);
+  background-color: $primary-low-mid;
   color: $primary;
   border: 1px inset $primary;
   .gdocs-onebox-logo {
@@ -351,7 +351,7 @@ pre.onebox code ol {
   line-height: $line-height-large;
 }
 pre.onebox code {
-  background-color: dark-light-choose(#fff, #000);
+  background-color: $primary-very-low;
 }
 pre.onebox code li {
   padding-left: 5px;

diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
@@ -303,10 +303,7 @@ blockquote {
   position: absolute;
   z-index: z("dropdown");
   opacity: 0.9;
-  background-color: dark-light-choose(
-    blend-primary-secondary(60%),
-    blend-primary-secondary(30%)
-  );
+  background-color: $secondary-high;
 
   &.visible {
     display: inline-flex;
@@ -668,7 +665,7 @@ pre {
     display: block;
     padding: 0.5em;
     color: $primary;
-    background: blend-primary-secondary(5%);
+    background: $blend-primary-secondary-5;
     max-height: 500px;
   }
 }

diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
@@ -183,7 +183,7 @@
   &.new-posts,
   &.unread-posts {
     background-color: dark-light-choose($tertiary-medium, $tertiary);
-    color: dark-light-choose($secondary, $secondary);
+    color: $secondary;
     font-weight: dark-light-choose(normal, bold);
   }
 

diff --git a/app/assets/stylesheets/common/foundation/color_transformations.scss b/app/assets/stylesheets/common/foundation/color_transformations.scss
@@ -81,3 +81,6 @@ $love-low: dark-light-diff($love, $secondary, 85%, -60%) !default;
 
 //wiki
 $wiki: green !default;
+
+//blended variants
+$blend-primary-secondary-5: blend-primary-secondary(5%) !default;
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -90,7 +90,7 @@ $breakpoints: (
 // Stuff we repeat
 @mixin post-aside {
   border-left: 5px solid $primary-low;
-  background-color: blend-primary-secondary(5%);
+  background-color: $blend-primary-secondary-5;
 }
 
 // We still need -webkit for latest iPhone and Safari

diff --git a/app/assets/stylesheets/common/select-kit/notifications-filter.scss b/app/assets/stylesheets/common/select-kit/notifications-filter.scss
@@ -23,7 +23,7 @@
         }
 
         .header-text {
-          color: dark-light-choose($tertiary, $tertiary);
+          color: $tertiary;
           cursor: pointer;
           margin-bottom: 0;
         }

diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
@@ -395,7 +395,7 @@ pre.copy-codeblocks:hover .copy-cmd {
       border: 0;
       padding: 0 23px;
       color: dark-light-choose($primary-medium, $secondary-high);
-      background: blend-primary-secondary(5%);
+      background: $blend-primary-secondary-5;
       border-left: 1px solid $primary-low;
       border-top: 1px solid transparent;
       &:hover {
@@ -414,7 +414,7 @@ pre.copy-codeblocks:hover .copy-cmd {
   }
   .link-summary .btn {
     color: dark-light-choose($primary-medium, $secondary-high);
-    background: blend-primary-secondary(5%);
+    background: $blend-primary-secondary-5;
     width: 100%;
     &:hover {
       color: $primary;

diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
@@ -183,7 +183,7 @@
   .category-topic-link td.num .badge-notification {
     &.new-posts,
     &.unread-posts {
-      color: dark-light-choose($secondary, $secondary);
+      color: $secondary;
     }
   }
 

diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
@@ -193,7 +193,7 @@ a.reply-to-tab {
       border: 0;
       padding: 0 15px;
       color: dark-light-choose($primary-medium, $secondary-high);
-      background: blend-primary-secondary(5%);
+      background: $blend-primary-secondary-5;
       border-left: 1px solid $primary-low;
       .fa {
         margin: 0;
@@ -204,7 +204,7 @@ a.reply-to-tab {
   }
   .link-summary .btn {
     color: dark-light-choose($primary-medium, $secondary-high);
-    background: blend-primary-secondary(5%);
+    background: $blend-primary-secondary-5;
     width: 100%;
   }
 }