More logical

Author: philwareham

src/assets/sass/designpatterns.scss

@@ -39,7 +39,7 @@ main {
 
 $colors: (
     "text":                    var(--clr-text),
-    "text-visual-de-emphasis": var(--clr-text-secondary),
+    "text-visual-de-emphasis": var(--clr-text-demoted),
     "grad-from":               var(--clr-grad-from),
     "grad-to":                 var(--clr-grad-to),
     "border":                  var(--clr-brdr),

src/assets/sass/modules/_forms.scss

@@ -205,7 +205,7 @@ textarea {
 [type="checkbox"] {
     &:checked {
         border: 0;
-        background: var(--clr-text-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E");
+        background: var(--clr-text-demoted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E");
 
         &:hover,
         &:active {
@@ -229,7 +229,7 @@ textarea {
 
             &:hover,
             &:active {
-                background-color: var(--clr-heading);
+                background-color: var( --clr-text-promoted);
             }
 
             &:focus {
@@ -247,7 +247,7 @@ textarea {
     border-radius: 100%;
 
     &:checked {
-        border: 5px solid var(--clr-text-secondary);
+        border: 5px solid var(--clr-text-demoted);
 
         &:hover,
         &:active {
@@ -264,7 +264,7 @@ textarea {
     [type="radio"]:checked {
         &:hover,
         &:active {
-            border-color: var(--clr-heading);
+            border-color: var( --clr-text-promoted);
         }
 
         &:focus {

src/assets/sass/modules/_links.scss

@@ -43,12 +43,12 @@ h4,
 h5,
 h6 {
     a {
-        color: var(--clr-heading);
+        color: var( --clr-text-promoted);
 
         &:hover,
         &:active {
-            color: var(--clr-heading);
-            text-decoration-color: rgba(var(--clr-heading), 0.5);  /* 1 */
+            color: var( --clr-text-promoted);
+            text-decoration-color: rgba(var( --clr-text-promoted), 0.5);  /* 1 */
         }
     }
 }

src/assets/sass/modules/_lists.scss

@@ -47,7 +47,7 @@ td {
  */
 
 li::marker {
-    color: var(--clr-heading);
+    color: var( --clr-text-promoted);
 }
 
 /**
@@ -64,7 +64,7 @@ dt {
     margin-bottom: 1em;
     padding-top: 1em;
     border-top: 1px solid var(--clr-brdr-light);
-    color: var(--clr-heading);
+    color: var( --clr-text-promoted);
     font-weight: bolder;
 
     code {

src/assets/sass/modules/_navigation.scss

@@ -59,7 +59,7 @@
 
         &:active {
             background-color: var(--clr-nav-active);
-            color: var(--clr-heading);
+            color: var( --clr-text-promoted);
             text-decoration: none;
         }
 

src/assets/sass/modules/_tables.scss

@@ -67,7 +67,7 @@ thead {
     th,
     td {
         border: 1px solid var(--clr-brdr);
-        color: var(--clr-heading);
+        color: var( --clr-text-promoted);
     }
 }
 

src/assets/sass/modules/_typography.scss

@@ -112,7 +112,7 @@ main {
     h4,
     h5,
     h6, {
-        color: var(--clr-heading);
+        color: var( --clr-text-promoted);
     }
 }
 
@@ -224,7 +224,7 @@ blockquote {
 .example {
     padding: 1px 0 1px 1.5rem;
     border-left: 0.25rem solid var(--clr-info-border);
-    color: var(--clr-text-secondary);
+    color: var(--clr-text-demoted);
 }
 
 ol.example,
@@ -386,7 +386,7 @@ hr {
 
 .separator {
     margin: 0 0.25em;
-    color: var(--clr-text-secondary);
+    color: var(--clr-text-demoted);
 }
 
 /**

src/assets/sass/style.scss

@@ -13,10 +13,10 @@
     --font-monospaced: Menlo, Consolas, Monaco, monospace;
     // text colours
     --clr-text:                        #333333;
-    --clr-heading:                     #2b2b2b;
+    --clr-text-promoted:               #2b2b2b;
+    --clr-text-demoted:                #666666;
     --clr-text-form:                   #000000;
     --clr-text-placeholder:            #999999;
-    --clr-text-secondary:              #666666;
     --clr-text-black-enforced:         #333333;
     --clr-text-white-enforced:         #ffffff;
     // interaction colours
@@ -80,10 +80,10 @@
     :root {
         // dark mode text colours
         --clr-text:                 #ced4da;
-        --clr-heading:              #ffffff;
+        --clr-text-promoted:        #ffffff;
+        --clr-text-demoted:         #bcc4cc;
         --clr-text-form:            #ffffff;
         --clr-text-placeholder:     #747b82;
-        --clr-text-secondary:       #bcc4cc;
         // interaction colours
         --clr-a:                    #9cd7ff;
         --clr-a-interact:           #bde4ff;

src/docs/design-patterns.html

@@ -110,7 +110,7 @@ <h3>Neutral</h3>
                                 <div class="design-patterns--color design-patterns--clr-brdr-extra-dark"></div>
 
                                 <p><code>text-visual-de-emphasis</code></p>
-                                <div class="design-patterns--color design-patterns--clr-text-secondary"></div>
+                                <div class="design-patterns--color design-patterns--clr-text-demoted"></div>
 
                                 <p><code>text</code></p>
                                 <div class="design-patterns--color design-patterns--clr-text"></div>