DEV: update styleguide guidance for colors and font sizes (#12975)

DEV: update styleguide guidance for colors and font sizes (#12975)

diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs
index 6c52205..9756fd0 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs
@@ -1,2 +1,2 @@
 <div class="color-bg {{color}}"></div>
-<div class="color-name">${{color}}</div>
+<div class="color-name">var(--{{color}})</div>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs
index f2a9d65..8df374a 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs
@@ -34,66 +34,66 @@
     </p>
     <pre>
       .parent {
-        <span class="hljs-attribute">font-size</span>: $font-up-3;
+        <span class="hljs-attribute">font-size</span>: var(--font-up-3);
         <span>// Increases the relative font-size of this element and its children by 3 steps in the scale</span>
         .child {
-          <span>// If this is set to $font-down-3 in Discourse's default CSS,
-             the parent font-size increase above would make this equivilant to $font-0
-             ($font-down-3 + $font-up-3 = $font-0)</span>
+          <span>// If this is set to var(--font-down-3) in Discourse's default CSS,
+             the parent font-size increase above would make this equivalent to var(--font-0)
+             (var(--font-down-3) + var(--font-up-3) = var(--font-0))</span>
         }
       }
     </pre>
   </p>
 </div>
 
-{{#styleguide-example title="$font-up-6, 2.296em"}}
+{{#styleguide-example title="var(--font-up-6), 2.296em"}}
   <p class="font-up-6">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-up-5, 2em"}}
+{{#styleguide-example title="var(--font-up-5), 2em"}}
   <p class="font-up-5">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-up-4, 1.7511em"}}
+{{#styleguide-example title="var(--font-up-4), 1.7511em"}}
   <p class="font-up-4">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-up-3, 1.5157em"}}
+{{#styleguide-example title="var(--font-up-3), 1.5157em"}}
   <p class="font-up-3">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-up-2, 1.3195em"}}
+{{#styleguide-example title="var(--font-up-2), 1.3195em"}}
   <p class="font-up-2">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-up-1, 1.1487em"}}
+{{#styleguide-example title="var(--font-up-1), 1.1487em"}}
   <p class="font-up-1">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-0, 1em — base font"}}
+{{#styleguide-example title="var(--font-0), 1em — base font"}}
   <p class="font-0">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-down-1, 0.8706em"}}
+{{#styleguide-example title="var(--font-down-1), 0.8706em"}}
   <p class="font-down-1">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-down-2, 0.7579em"}}
+{{#styleguide-example title="var(--font-down-2), 0.7579em"}}
   <p class="font-down-2">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-down-3, 0.6599em"}}
+{{#styleguide-example title="var(--font-down-3), 0.6599em"}}
   <p class="font-down-3">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-down-4, 0.5745em"}}
+{{#styleguide-example title="var(--font-down-4), 0.5745em"}}
   <p class="font-down-4">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-down-5, 0.5em"}}
+{{#styleguide-example title="var(--font-down-5), 0.5em"}}
   <p class="font-down-5">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-down-6, 0.4355em"}}
+{{#styleguide-example title="var(--font-down-6), 0.4355em"}}
   <p class="font-down-6">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
index b233a37..8f35784 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
@@ -1,4 +1,4 @@
-{{#styleguide-example title="$primary"}}
+{{#styleguide-example title="primary"}}
   <section class="color-row">
     {{color-example color="primary-very-low"}}
     {{color-example color="primary-low"}}
@@ -11,7 +11,7 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$secondary"}}
+{{#styleguide-example title="secondary"}}
   <section class="color-row">
     {{color-example color="secondary-low"}}
     {{color-example color="secondary-medium"}}
@@ -20,7 +20,7 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$tertiary"}}
+{{#styleguide-example title="tertiary"}}
   <section class="color-row">
     {{color-example color="tertiary-low"}}
     {{color-example color="tertiary-medium"}}
@@ -29,14 +29,14 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$quaternary"}}
+{{#styleguide-example title="quaternary"}}
   <section class="color-row">
     {{color-example color="quaternary-low"}}
     {{color-example color="quaternary"}}
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$highlight"}}
+{{#styleguide-example title="highlight"}}
   <section class="color-row">
     {{color-example color="highlight-low"}}
     {{color-example color="highlight-medium"}}
@@ -45,7 +45,7 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$danger"}}
+{{#styleguide-example title="danger"}}
   <section class="color-row">
     {{color-example color="danger-low"}}
     {{color-example color="danger-low-mid"}}
@@ -54,7 +54,7 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$success"}}
+{{#styleguide-example title="success"}}
   <section class="color-row">
     {{color-example color="success-low"}}
     {{color-example color="success-medium"}}
@@ -62,14 +62,14 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$love"}}
+{{#styleguide-example title="love"}}
   <section class="color-row">
     {{color-example color="love-low"}}
     {{color-example color="love"}}
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$header"}}
+{{#styleguide-example title="header"}}
   <section class="color-row">
     {{color-example color="header_background"}}
   </section>
diff --git a/plugins/styleguide/assets/stylesheets/colors.scss b/plugins/styleguide/assets/stylesheets/colors.scss
index e1b4e28..6ca3330 100644
--- a/plugins/styleguide/assets/stylesheets/colors.scss
+++ b/plugins/styleguide/assets/stylesheets/colors.scss
@@ -1,120 +1,117 @@
 .color-row {
   .primary-very-low {
-    background-color: var(--primary-very-low, $primary-very-low);
+    background-color: var(--primary-very-low);
   }
   .primary-low {
-    background-color: var(--primary-low, $primary-low);
+    background-color: var(--primary-low);
   }
   .primary-low-mid {

[... diff too long, it was truncated ...]

GitHub sha: 116ae8eb

This commit appears in #12975 which was approved by CvX. It was merged by pmusaraj.