Grayscale variables for css and less

Author: pilafmon

spec/spec-css.html

@@ -62,9 +62,37 @@ <h5>Section Nanoheader (h4)</h5>
             <figcaption>Figure Link</figcaption>
          </figure>
       </a>
-      Icon figures:
+      <br>
+      <p>
+         Checkerboard:&nbsp;
+         <img src=https://centerkey.com/graphics/center-key-logo.svg
+            class=checkerboard-box alt=logo>
+         &nbsp;
+         <img src=https://centerkey.com/graphics/center-key-logo.svg
+            style="background: var(--checkerboardBackground);" alt=logo>
+      </p>
+      <div>
+         Icon figures:
          <figure><i data-icon=rocket></i></figure>
          <figure><span>🚀</span></figure>
+      </div>
+      <div>
+         Grays (<code>--colorGray0</code> to <code>--colorGray9</code>):
+         <figure style="display: flex; font-size: 3rem; color: black; border: 10px solid black; margin-bottom: 20px;">
+            <div style="background-color: var(--colorWhite); flex: 1;">W</div>
+            <div style="background-color: var(--colorGray0); flex: 1;">0</div>
+            <div style="background-color: var(--colorGray1); flex: 1;">1</div>
+            <div style="background-color: var(--colorGray2); flex: 1;">2</div>
+            <div style="background-color: var(--colorGray3); flex: 1;">3</div>
+            <div style="background-color: var(--colorGray4); flex: 1;">4</div>
+            <div style="background-color: var(--colorGray5); flex: 1;">5</div>
+            <div style="background-color: var(--colorGray6); flex: 1;">6</div>
+            <div style="background-color: var(--colorGray7); flex: 1;">7</div>
+            <div style="background-color: var(--colorGray8); flex: 1;">8</div>
+            <div style="background-color: var(--colorGray9); flex: 1;">9</div>
+            <div style="background-color: var(--colorBlack); flex: 1; color: white;">B</div>
+         </figure>
+      </div>
       <h3>Header 3 &mdash; Ant</h3>
       <aside>
          <h2>H2 on the Side</h2>

src/css/reset.less

@@ -13,6 +13,18 @@
    --colorGraphite: #303030;
    --colorCharcoal: #222222;
    --colorTar:      #161616;
+   --colorWhite:    #FFFFFF;
+   --colorGray0:    #EEEEEE;
+   --colorGray1:    #DDDDDD;
+   --colorGray2:    #BBBBBB;
+   --colorGray3:    #AAAAAA;
+   --colorGray4:    #888888;
+   --colorGray5:    #777777;
+   --colorGray6:    #555555;
+   --colorGray7:    #444444;
+   --colorGray8:    #222222;
+   --colorGray9:    #111111;
+   --colorBlack:    #000000;
    }
 
 // Reset and Normalization

src/css/reset/figures.less

@@ -6,6 +6,14 @@
 //    <img src=buffalo.jpg alt=buffalo>
 //    <figcaption>buffalo</figcaption>
 // </figure>
+:root {
+   --checkerboardBackground: conic-gradient(
+      lightgray  90deg,
+      darkgray   90deg 180deg,
+      lightgray 180deg 270deg,
+      darkgray  270deg)
+      top left / 15px 15px;
+   }
 img {
    border: none;
    }

src/css/reset/static/utility-box.less

@@ -10,6 +10,18 @@
 @colorGraphite: #303030;
 @colorCharcoal: #222222;
 @colorTar:      #161616;
+@colorWhite:    #FFFFFF;
+@colorGray0:    #EEEEEE;
+@colorGray1:    #DDDDDD;
+@colorGray2:    #BBBBBB;
+@colorGray3:    #AAAAAA;
+@colorGray4:    #888888;
+@colorGray5:    #777777;
+@colorGray6:    #555555;
+@colorGray7:    #444444;
+@colorGray8:    #222222;
+@colorGray9:    #111111;
+@colorBlack:    #000000;
 
 // Layers for z-index
 @layerDialogBox:     500;  //cream of the crop
@@ -51,26 +63,11 @@
    paint-order: stroke fill;
    }
 
-.CheckerboardBackground() {
-   // <figure class=checkerboard-background>
-   //    <img src=logo.svg alt=logo>
-   //    <figcaption>Logo</figcaption>
-   // </figure>
+.CheckerboardBox() {
+   background: var(--checkerboardBackground);
+   outline: 3px solid black;
    &:hover {
-      img {
-         background: black;
-         outline-width: 1px;  //extra space for a clean image crop
-         }
-      }
-   img {
-      background: conic-gradient(
-         lightgray 90deg,
-         darkgray 90deg 180deg,
-         lightgray 180deg 270deg,
-         darkgray 270deg
-         );
-      background-size: 15px 15px;
-      outline: 3px solid black;
+      background: black;
       }
    }
 

src/css/reset/utility-classes.less

@@ -31,6 +31,7 @@
 .box-glow             { box-shadow: 0px 0px 2em deepskyblue; }
 .centered-flow-box    { display: flex; flex-wrap: wrap; justify-content: center; }
 .bullseye             { display: flex; justify-content: center; align-items: center; }
+.checkerboard-box     { .CheckerboardBox(); }
 .framed img, img.framed             { background-color: white; border: 3px solid silver; border-radius: 2px; transition: all 500ms; }
 .framed img:hover, img.framed:hover { border-color: dimgray; }
 .modal-layer { display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; text-align: center; }