UX: Styleguide changes & color variable additions (#15984)

app/assets/stylesheets/color_definitions.scss

@@ -29,6 +29,17 @@
   --primary-high: #{$primary-high};
   --primary-very-high: #{$primary-very-high};
 
+  --primary-50: #{$primary-50};
+  --primary-100: #{$primary-100};
+  --primary-200: #{$primary-200};
+  --primary-300: #{$primary-300};
+  --primary-400: #{$primary-400};
+  --primary-500: #{$primary-500};
+  --primary-600: #{$primary-600};
+  --primary-700: #{$primary-700};
+  --primary-800: #{$primary-800};
+  --primary-900: #{$primary-900};
+
   --header_primary-low: #{$header_primary-low};
   --header_primary-low-mid: #{$header_primary-low-mid};
 
@@ -47,6 +58,17 @@
   --tertiary-high: #{$tertiary-high};
   --tertiary-hover: #{$tertiary-hover};
 
+  --tertiary-50: #{$tertiary-50};
+  --tertiary-100: #{$tertiary-100};
+  --tertiary-200: #{$tertiary-200};
+  --tertiary-300: #{$tertiary-300};
+  --tertiary-400: #{$tertiary-400};
+  --tertiary-500: #{$tertiary-500};
+  --tertiary-600: #{$tertiary-600};
+  --tertiary-700: #{$tertiary-700};
+  --tertiary-800: #{$tertiary-800};
+  --tertiary-900: #{$tertiary-900};
+
   --quaternary-low: #{$quaternary-low};
 
   --highlight-low: #{$highlight-low};

app/assets/stylesheets/common/foundation/color_transformations.scss

@@ -10,6 +10,18 @@ $primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
 $primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
 $primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;
 
+//primary-numbers
+$primary-50: blend-two-colors($primary, $secondary, 5%) !default;
+$primary-100: blend-two-colors($primary, $secondary, 10%) !default;
+$primary-200: blend-two-colors($primary, $secondary, 20%) !default;
+$primary-300: blend-two-colors($primary, $secondary, 30%) !default;
+$primary-400: blend-two-colors($primary, $secondary, 40%) !default;
+$primary-500: blend-two-colors($primary, $secondary, 50%) !default;
+$primary-600: blend-two-colors($primary, $secondary, 60%) !default;
+$primary-700: blend-two-colors($primary, $secondary, 70%) !default;
+$primary-800: blend-two-colors($primary, $secondary, 80%) !default;
+$primary-900: blend-two-colors($primary, $secondary, 90%) !default;
+
 $header_primary-low: blend-header-primary-background(10%) !default;
 $header_primary-low-mid: blend-header-primary-background(35%) !default;
 $header_primary-medium: blend-header-primary-background(55%) !default;
@@ -32,6 +44,18 @@ $tertiary-hover: dark-light-choose(
   dark-light-diff($tertiary, $primary, 20%, 70%)
 ) !default;
 
+//tertiary-numbers
+$tertiary-50: dark-light-diff($tertiary, $secondary, 95%, -80%) !default;
+$tertiary-100: dark-light-diff($tertiary, $secondary, 90%, -75%) !default;
+$tertiary-200: dark-light-diff($tertiary, $secondary, 80%, -65%) !default;
+$tertiary-300: dark-light-diff($tertiary, $secondary, 70%, -55%) !default;
+$tertiary-400: dark-light-diff($tertiary, $secondary, 60%, -45%) !default;
+$tertiary-500: dark-light-diff($tertiary, $secondary, 50%, -35%) !default;
+$tertiary-600: dark-light-diff($tertiary, $secondary, 40%, -25%) !default;
+$tertiary-700: dark-light-diff($tertiary, $secondary, 30%, -15%) !default;
+$tertiary-800: dark-light-diff($tertiary, $secondary, 20%, -5%) !default;
+$tertiary-900: dark-light-diff($tertiary, $secondary, 10%, 0%) !default;
+
 //quaternary
 $quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%) !default;
 
@@ -63,7 +87,7 @@ $love-low: dark-light-diff($love, $secondary, 85%, -60%) !default;
 $wiki: green !default;
 
 //blended variants
-$blend-primary-secondary-5: blend-primary-secondary(5%) !default;
+$blend-primary-secondary-5: blend-two-colors($primary, $secondary, 5%) !default;
 
 $primary-med-or-secondary-med: dark-light-choose(
   $primary-medium,

app/assets/stylesheets/common/foundation/variables.scss

@@ -177,9 +177,9 @@ $box-shadow: (
   @return rgb($r_r, $r_g, $r_b);
 }
 
-// Replaces dark-light-diff($primary, $secondary, 50%, -50%)
+// Replaces dark-light-diff($primary,50%)
-@function blend-primary-secondary($percent) {
+@function blend-two-colors($color1, $color2, $percent) {
-  @return srgb-scale($primary, $secondary, $percent);
+  @return srgb-scale($color1, $color2, $percent);
 }
 
 @function blend-header-primary-background($percent) {

plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs

@@ -1,2 +1,2 @@
 <div class="color-bg {{color}}"></div>
-<div class="color-name">var(--{{color}})</div>
+<div class="color-name">{{color}}</div>

plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-example.hbs

@@ -1,3 +1,8 @@
-<div class="example-title">{{title}}</div>
+<div class="example-title">
+  <h3 class="example-title-text">{{title}}</h3>
+  <span class="example-title-use-case">
+    Example:
+  </span>
+  <span class="example-title-use-case">var(--{{title}})</span>
+</div>
 <section class="rendered">{{yield this.value}}</section>
-<div class="clearfix"></div>

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs

@@ -11,6 +11,24 @@
   </section>
 {{/styleguide-example}}
 
+{{#styleguide-example title="primary-100"}}
+  <section class="color-row">
+    {{color-example color="primary-50"}}
+    {{color-example color="primary-100"}}
+    {{color-example color="primary-200"}}
+    {{color-example color="primary-300"}}
+    {{color-example color="primary-400"}}
+    {{color-example color="primary-500"}}
+  </section>
+  <section class="color-row">
+    {{color-example color="primary-600"}}
+    {{color-example color="primary-700"}}
+    {{color-example color="primary-800"}}
+    {{color-example color="primary-900"}}
+    {{color-example color="primary"}}
+  </section>
+{{/styleguide-example}}
+
 {{#styleguide-example title="secondary"}}
   <section class="color-row">
     {{color-example color="secondary-low"}}
@@ -29,6 +47,24 @@
   </section>
 {{/styleguide-example}}
 
+{{#styleguide-example title="tertiary-100"}}
+  <section class="color-row">
+    {{color-example color="tertiary-50"}}
+    {{color-example color="tertiary-100"}}
+    {{color-example color="tertiary-200"}}
+    {{color-example color="tertiary-300"}}
+    {{color-example color="tertiary-400"}}
+    {{color-example color="tertiary-500"}}
+  </section>
+  <section class="color-row">
+    {{color-example color="tertiary-600"}}
+    {{color-example color="tertiary-700"}}
+    {{color-example color="tertiary-800"}}
+    {{color-example color="tertiary-900"}}
+    {{color-example color="tertiary"}}
+  </section>
+{{/styleguide-example}}
+
 {{#styleguide-example title="quaternary"}}
   <section class="color-row">
     {{color-example color="quaternary-low"}}
@@ -69,7 +105,7 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="header"}}
+{{#styleguide-example title="header_primary"}}
   <section class="color-row">
     {{color-example color="header_background"}}
   </section>

plugins/styleguide/assets/stylesheets/colors.scss

@@ -1,4 +1,34 @@
 .color-row {
+  .primary-50 {
+    background-color: var(--primary-50);
+  }
+  .primary-100 {
+    background-color: var(--primary-100);
+  }
+  .primary-200 {
+    background-color: var(--primary-200);
+  }
+  .primary-300 {
+    background-color: var(--primary-300);
+  }
+  .primary-400 {
+    background-color: var(--primary-400);
+  }
+  .primary-500 {
+    background-color: var(--primary-500);
+  }
+  .primary-600 {
+    background-color: var(--primary-600);
+  }
+  .primary-700 {
+    background-color: var(--primary-700);
+  }
+  .primary-800 {
+    background-color: var(--primary-800);
+  }
+  .primary-900 {
+    background-color: var(--primary-900);
+  }
   .primary-very-low {
     background-color: var(--primary-very-low);
   }
@@ -41,6 +71,36 @@
   .tertiary {
     background-color: var(--tertiary);
   }
+  .tertiary-50 {
+    background-color: var(--tertiary-50);
+  }
+  .tertiary-100 {
+    background-color: var(--tertiary-100);
+  }
+  .tertiary-200 {
+    background-color: var(--tertiary-200);
+  }
+  .tertiary-300 {
+    background-color: var(--tertiary-300);
+  }
+  .tertiary-400 {
+    background-color: var(--tertiary-400);
+  }
+  .tertiary-500 {
+    background-color: var(--tertiary-500);
+  }
+  .tertiary-600 {
+    background-color: var(--tertiary-600);
+  }
+  .tertiary-700 {
+    background-color: var(--tertiary-700);
+  }
+  .tertiary-800 {
+    background-color: var(--tertiary-800);
+  }
+  .tertiary-900 {
+    background-color: var(--tertiary-900);
+  }
   .quaternary-low {
     background-color: var(--quaternary-low);
   }

plugins/styleguide/assets/stylesheets/styleguide.scss

@@ -77,8 +77,23 @@
 
       margin-bottom: 2em;
     }
-  }
 
+    &.colors-examples {
+      .styleguide-example {
+        display: flex;
+        .example-title {
+          min-width: 15%;
+          margin-right: 1em;
+          border-bottom: none;
+          &-text {
+            color: var(--primary);
+            text-transform: capitalize;
+          }
+          &-use-case {
+            font-size: var(--font-down-1);
+            display: block;
+          }
+        }
         .color-row {
           display: flex;
 
@@ -88,17 +103,22 @@
             flex-direction: column;
             height: 120px;
             margin: 0.5em 0.5em 0.5em 0;
+            border: 1px solid var(--primary-300);
 
             .color-bg {
               flex: 4;
+              border-bottom: 1px solid var(--primary-300);
             }
             .color-name {
               flex: 1;
               display: flex;
               align-items: center;
               padding: 0.25em 0.5em;
-        background-color: black;
+              font-weight: 700;
-        color: white;
+              font-size: var(--font-down-1);
+            }
+          }
+        }
       }
     }
   }