Add guidance on darken utilities to docs

learningequality · Aug 21, 2024 · d468c96 · d468c96
1 parent 38bf1f7
commit d468c96
Showing 1 changed file with 38 additions and 0 deletions.
diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue
@@ -92,7 +92,32 @@
         <li><code>palette</code> refers to <code>$themePalette</code></li>
       </ul>
 
+      <h3>Darken utilities</h3>
 
+      <p>You can apply darken utilities <code>$darken1</code>, <code>$darken2</code>, and <code>$darken3</code> to palette colors and tokens to achieve their darker shades. They are available on every Vue component.</p>
+
+      <DocsShowCode language="html">
+        <div :style="{ backgroundColor: $themePalette.red.v_1100 }"></div>
+        <div :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }"></div>
+        <div :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }"></div>
+        <div :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }"></div>
+      </DocsShowCode>
+      <DocsShow>
+        <div class="darken-block" :style="{ backgroundColor: $themePalette.red.v_1100 }">
+          <code>base</code>
+        </div>
+        <div class="darken-block" :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+          <code>$darken1</code>
+        </div>
+        <div class="darken-block" :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+          <code>$darken2</code>
+        </div>
+        <div class="darken-block" :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+          <code>$darken3</code>
+        </div>
+      </DocsShow>
+
+      <p>These utilities shouldn't be overused. Always check if there is a shade in the palette available that can be used instead.</p>
     </DocsPageSection>
 
 
@@ -323,4 +348,17 @@
     width: 350px;
   }
 
+  .darken-block {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 140px;
+    height: 140px;
+
+    code {
+      padding: 4px;
+      background-color: rgba(255, 255, 255, 0.8);
+    }
+  }
+
 </style>