diff --git a/build/props.js b/build/props.js
index 5c226480..ee8fd4b6 100644
--- a/build/props.js
+++ b/build/props.js
@@ -2,7 +2,7 @@ import fs from 'fs'
 
 import Animations from '../src/props.animations.js'
 import Sizes from '../src/props.sizes.js'
-import * as OpenColors from '../src/props.colors.js'
+import * as Colors from '../src/props.colors.js'
 import * as ColorsHSL from '../src/props.colors-hsl.js'
 import Fonts from '../src/props.fonts.js'
 import Borders from '../src/props.borders.js'
@@ -32,44 +32,26 @@ const mainbundle = {
   [`${pfx}props.zindex.css`]: Zindex,
   [`${pfx}props.shadows.css`]: Shadows,
   [`${pfx}props.aspects.css`]: Aspects,
-  [`${pfx}props.colors.css`]: OpenColors.default,
+  [`${pfx}props.colors.css`]: Colors.default,
   // [`${pfx}props.svg.css`]: SVG,
   [`${pfx}props.gradients.css`]: Gradients,
   [`${pfx}props.animations.css`]: Animations,
   [`${pfx}props.borders.css`]: Borders,
 }
 
-const individual_colors = {
-  [`${pfx}props.gray.css`]: OpenColors.Gray,
-  [`${pfx}props.red.css`]: OpenColors.Red,
-  [`${pfx}props.pink.css`]: OpenColors.Pink,
-  [`${pfx}props.grape.css`]: OpenColors.Grape,
-  [`${pfx}props.violet.css`]: OpenColors.Violet,
-  [`${pfx}props.indigo.css`]: OpenColors.Indigo,
-  [`${pfx}props.blue.css`]: OpenColors.Blue,
-  [`${pfx}props.cyan.css`]: OpenColors.Cyan,
-  [`${pfx}props.teal.css`]: OpenColors.Teal,
-  [`${pfx}props.green.css`]: OpenColors.Green,
-  [`${pfx}props.lime.css`]: OpenColors.Lime,
-  [`${pfx}props.yellow.css`]: OpenColors.Yellow,
-  [`${pfx}props.orange.css`]: OpenColors.Orange,
-}
+const individual_colors = Object.keys(Colors)
+  .filter(exportName => exportName !== "default")
+  .reduce((root, hueName) => ({
+    ...root,
+    [`${pfx}props.${hueName.toLowerCase()}.css`]: Colors[hueName]
+  }), {})
 
-const individual_colors_hsl = {
-  [`${pfx}props.gray-hsl.css`]: ColorsHSL.Gray,
-  [`${pfx}props.red-hsl.css`]: ColorsHSL.Red,
-  [`${pfx}props.pink-hsl.css`]: ColorsHSL.Pink,
-  [`${pfx}props.grape-hsl.css`]: ColorsHSL.Grape,
-  [`${pfx}props.violet-hsl.css`]: ColorsHSL.Violet,
-  [`${pfx}props.indigo-hsl.css`]: ColorsHSL.Indigo,
-  [`${pfx}props.blue-hsl.css`]: ColorsHSL.Blue,
-  [`${pfx}props.cyan-hsl.css`]: ColorsHSL.Cyan,
-  [`${pfx}props.teal-hsl.css`]: ColorsHSL.Teal,
-  [`${pfx}props.green-hsl.css`]: ColorsHSL.Green,
-  [`${pfx}props.lime-hsl.css`]: ColorsHSL.Lime,
-  [`${pfx}props.yellow-hsl.css`]: ColorsHSL.Yellow,
-  [`${pfx}props.orange-hsl.css`]: ColorsHSL.Orange,
-}
+const individual_colors_hsl = Object.keys(ColorsHSL)
+  .filter(exportName => exportName !== "default")
+  .reduce((root, hueName) => ({
+    ...root,
+    [`${pfx}props.${hueName.toLowerCase()}-hsl.css`]: ColorsHSL[hueName]
+  }), {})
 
 // const individuals = {
 //   'props.masks.edges.css': MaskEdges,
diff --git a/build/to-figmatokens.js b/build/to-figmatokens.js
index dcd32f4d..85c63503 100644
--- a/build/to-figmatokens.js
+++ b/build/to-figmatokens.js
@@ -1,3 +1,5 @@
+import * as Colors from '../src/props.colors.js'
+
 export const toFigmaTokens = props => {
   const figmatokens = {}
 
@@ -8,7 +10,9 @@ export const toFigmaTokens = props => {
     let isBorder = key.includes('border-size')
     let isRadius = key.includes('radius')
     let isShadow = key.includes('shadow')
-    let colors = ['gray','red','pink','grape','violet','indigo','blue','cyan','teal','green','lime','yellow','orange']
+    let colors = Object.keys(Colors)
+      .filter(exportName => exportName !== "default")
+      .map(hueName => hueName.toLowerCase())
     let isColor = colors.some(color => key.includes(color))
     
     if      (isLength) meta.type = 'sizing'
diff --git a/build/to-tokens.js b/build/to-tokens.js
index 3811d9cf..1102752d 100644
--- a/build/to-tokens.js
+++ b/build/to-tokens.js
@@ -1,10 +1,14 @@
+import * as Colors from '../src/props.colors.js'
+
 export const toTokens = props => 
   props.map(([key, token]) => {
     let meta = {}
 
     let isLength = key.includes('size')
     let isEasing = key.includes('ease')
-    let colors = ['gray','red','pink','grape','violet','indigo','blue','cyan','teal','green','lime','yellow','orange']
+    let colors = Object.keys(Colors)
+      .filter(exportName => exportName !== "default")
+      .map(hueName => hueName.toLowerCase())
     let isColor = colors.some(color => key.includes(color))
 
     if      (isLength) meta.type = 'dimension'
diff --git a/docsite/index.css b/docsite/index.css
index 2495a885..852b36f2 100644
--- a/docsite/index.css
+++ b/docsite/index.css
@@ -10,14 +10,14 @@
 
 :root {
   --max-inline-body: calc(100vw - (var(--size-8) * 2));
-  --brand-bg-gradient: linear-gradient(to bottom, var(--grape-3), var(--violet-3), var(--indigo-3), var(--cyan-3));
+  --brand-bg-gradient: linear-gradient(to bottom, var(--purple-3), var(--violet-3), var(--indigo-3), var(--cyan-3));
 
   @media (--md-n-below) {
     --max-inline-body: calc(100vw - (var(--size-3) * 2));
   }
 
   @nest [data-theme="light"] & {
-    --brand-bg-gradient: linear-gradient(to bottom, var(--grape-6), var(--violet-6), var(--indigo-6), var(--cyan-6));
+    --brand-bg-gradient: linear-gradient(to bottom, var(--purple-6), var(--violet-6), var(--indigo-6), var(--cyan-6));
   }
 }
 
@@ -64,7 +64,7 @@ section {
   &:nth-of-type(1n) { border-color: var(--orange-5) }
   &:nth-of-type(2n) { border-color: var(--red-5) }
   &:nth-of-type(3n) { border-color: var(--pink-5) }
-  &:nth-of-type(4n) { border-color: var(--grape-5) }
+  &:nth-of-type(4n) { border-color: var(--purple-5) }
   &:nth-of-type(5n) { border-color: var(--indigo-5) }
   &:nth-of-type(6n) { border-color: var(--blue-5) }
   &:nth-of-type(7n) { border-color: var(--green-5) }
@@ -193,8 +193,8 @@ section.hero {
   align-self: stretch;
 
   & .icon-quote {
-    --_accent-1: var(--grape-5);
-    --_accent-2: var(--grape-4);
+    --_accent-1: var(--purple-5);
+    --_accent-2: var(--purple-4);
 
     @nest [data-theme="light"] & {
       --_accent-1: var(--orange-7);
@@ -516,7 +516,7 @@ pre[class*="language-"] {
   --size: var(--size-5);
   border-radius: var(--radius-round);
   box-shadow: var(--inner-shadow-0);
-  inline-size: 7%;
+  inline-size: 6.7%;
   block-size: var(--size);
   display: grid;
   place-content: center;
@@ -820,7 +820,7 @@ pre[class*="language-"] {
     &:nth-child(1) svg {
       stroke: var(--cyan-3);
       @nest [data-theme="light"] & {
-        stroke: var(--grape-8);
+        stroke: var(--purple-8);
       }
     }
     &:nth-child(2) svg {
@@ -905,8 +905,8 @@ pre[class*="language-"] {
   }
 
   & > div:nth-of-type(1) svg { 
-    color: var(--grape-5);
-    border-color: var(--grape-3);
+    color: var(--purple-5);
+    border-color: var(--purple-3);
   }
   & > div:nth-of-type(2) svg { 
     color: var(--orange-5);
diff --git a/docsite/index.html b/docsite/index.html
index c7ce9377..412e84b8 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -119,7 +119,7 @@ <h1><span>CSS</span> <span>variables.</span></h1>
           </li>
         </ul>
         <small>
-          v1.4.25
+          v1.5.0
           <span class="license">
             <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
               <path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>
@@ -344,14 +344,14 @@ <h4>File Sizes</h4>
           <div>
             <dt>Library bundles</dt>
             <dd class="size-chart" style="row-gap: var(--size-3)">
-              <div class="size"><strong>3.4</strong>kB</div>
+              <div class="size"><strong>4.0</strong>kB</div>
               <div class="file">
                 <a href="https://unpkg.com/open-props">open-props.min.css</a>
                 <div class="child-ref">
                   <svg viewBox="0 0 24 24">
                     <use href="#bent-arrow"/>
                   </svg>
-                  351 props
+                  500+ props
                 </div>
               </div>
             </dd>
@@ -412,9 +412,9 @@ <h4>File Sizes</h4>
                 <a href="https://github.com/argyleink/open-props/blob/main/src/props.borders.css">borders.css</a>
               </div>
 
-              <div class="size"><strong>0.7</strong>kB</div>
+              <div class="size"><strong>1.3</strong>kB</div>
               <div class="file">
-                <a href="https://github.com/argyleink/open-props/blob/main/src/props.colors.css">colors.css</a>
+                <a href="https://github.com/argyleink/open-props/blob/main/src/props.colors.css">colors.css</a> <small>(228)</small>
                 <div class="child-ref">
                   <svg viewBox="0 0 24 24">
                     <use href="#bent-arrow"/>
@@ -435,7 +435,7 @@ <h4>File Sizes</h4>
                 </div>
               </div>
 
-              <div class="size"><strong>0.7</strong>kB</div>
+              <div class="size"><strong>1.2</strong>kB</div>
               <div class="file">
                 <a href="https://github.com/argyleink/open-props/blob/main/src/props.colors-hsl.css">colors-hsl.css</a>
                 <div class="child-ref">
@@ -1164,7 +1164,7 @@ <h4>Autocomplete</h4>
       <header>
         <h2>Colors</h2>
         <div class="block-wrap">
-          <p>Open Props includes <a href="https://yeun.github.io/open-color/">Open Color</a> (Version 1.9.1), an open-source color scheme optimized for UI development.</p>
+          <p>Open Props includes <a href="https://yeun.github.io/open-color/">Open Color</a>, an open-source color scheme optimized for UI development, and its extension, <a href="https://github.com/fchristant/colar">Colar</a>.</p>
           <blockquote class="icon-quote">
             <svg viewBox="0 0 24 24" stroke="currentColor" fill="none">
               <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
@@ -1179,19 +1179,25 @@ <h2>Colors</h2>
           <h5>The Props</h5>
           <div class="var-examples">
             <pre class="language-css"><code>
-              --gray-{0-9}
-              --red-{0-9}
-              --pink-{0-9}
-              --grape-{0-9}
-              --violet-{0-9}
-              --indigo-{0-9}
-              --blue-{0-9}
-              --cyan-{0-9}
-              --teal-{0-9}
-              --green-{0-9}
-              --lime-{0-9}
-              --yellow-{0-9}
-              --orange-{0-9}
+              --gray-{0-12}
+              --stone-{0-12}
+              --red-{0-12}
+              --pink-{0-12}
+              --purple-{0-12}
+              --violet-{0-12}
+              --indigo-{0-12}
+              --blue-{0-12}
+              --cyan-{0-12}
+              --teal-{0-12}
+              --green-{0-12}
+              --lime-{0-12}
+              --yellow-{0-12}
+              --orange-{0-12}
+              --choco-{0-12}
+              --brown-{0-12}
+              --sand-{0-12}
+              --camo-{0-12}
+              --jungle-{0-12}
             </code></pre>
           </div>
         </div>
@@ -1250,8 +1256,27 @@ <h4>Gray</h4>
           <span class="color-swatch" style="background-color: var(--gray-7)"></span>
           <span class="color-swatch" style="background-color: var(--gray-8)"></span>
           <span class="color-swatch" style="background-color: var(--gray-9)"></span>
-        </div>
-        <div class="open-colors count-em">
+          <span class="color-swatch" style="background-color: var(--gray-10)"></span>
+          <span class="color-swatch" style="background-color: var(--gray-11)"></span>
+          <span class="color-swatch" style="background-color: var(--gray-12)"></span>
+      </div>
+      <div class="open-colors count-em">
+        <h4>Stone</h4>
+        <span class="color-swatch" style="background-color: var(--stone-0)"></span>
+        <span class="color-swatch" style="background-color: var(--stone-1)"></span>
+        <span class="color-swatch" style="background-color: var(--stone-2)"></span>
+        <span class="color-swatch" style="background-color: var(--stone-3)"></span>
+        <span class="color-swatch" style="background-color: var(--stone-4)"></span>
+        <span class="color-swatch" style="background-color: var(--stone-5)"></span>
+        <span class="color-swatch" style="background-color: var(--stone-6)"></span>
+        <span class="color-swatch" style="background-color: var(--stone-7)"></span>
+        <span class="color-swatch" style="background-color: var(--stone-8)"></span>
+        <span class="color-swatch" style="background-color: var(--stone-9)"></span>
+        <span class="color-swatch" style="background-color: var(--stone-10)"></span>
+        <span class="color-swatch" style="background-color: var(--stone-11)"></span>
+        <span class="color-swatch" style="background-color: var(--stone-12)"></span>
+      </div> 
+      <div class="open-colors count-em">
           <h4>Red</h4>
           <span class="color-swatch" style="background-color: var(--red-0)"></span>
           <span class="color-swatch" style="background-color: var(--red-1)"></span>
@@ -1263,8 +1288,11 @@ <h4>Red</h4>
           <span class="color-swatch" style="background-color: var(--red-7)"></span>
           <span class="color-swatch" style="background-color: var(--red-8)"></span>
           <span class="color-swatch" style="background-color: var(--red-9)"></span>
-        </div>
-        <div class="open-colors count-em">
+          <span class="color-swatch" style="background-color: var(--red-10)"></span>
+          <span class="color-swatch" style="background-color: var(--red-11)"></span>
+          <span class="color-swatch" style="background-color: var(--red-12)"></span>
+      </div>
+      <div class="open-colors count-em">
           <h4>Pink</h4>
           <span class="color-swatch" style="background-color: var(--pink-0)"></span>
           <span class="color-swatch" style="background-color: var(--pink-1)"></span>
@@ -1276,21 +1304,27 @@ <h4>Pink</h4>
           <span class="color-swatch" style="background-color: var(--pink-7)"></span>
           <span class="color-swatch" style="background-color: var(--pink-8)"></span>
           <span class="color-swatch" style="background-color: var(--pink-9)"></span>
-        </div>
-        <div class="open-colors count-em">
-          <h4>Grape</h4>
-          <span class="color-swatch" style="background-color: var(--grape-0)"></span>
-          <span class="color-swatch" style="background-color: var(--grape-1)"></span>
-          <span class="color-swatch" style="background-color: var(--grape-2)"></span>
-          <span class="color-swatch" style="background-color: var(--grape-3)"></span>
-          <span class="color-swatch" style="background-color: var(--grape-4)"></span>
-          <span class="color-swatch" style="background-color: var(--grape-5)"></span>
-          <span class="color-swatch" style="background-color: var(--grape-6)"></span>
-          <span class="color-swatch" style="background-color: var(--grape-7)"></span>
-          <span class="color-swatch" style="background-color: var(--grape-8)"></span>
-          <span class="color-swatch" style="background-color: var(--grape-9)"></span>
-        </div>
-        <div class="open-colors count-em">
+          <span class="color-swatch" style="background-color: var(--pink-10)"></span>
+          <span class="color-swatch" style="background-color: var(--pink-11)"></span>
+          <span class="color-swatch" style="background-color: var(--pink-12)"></span>
+      </div>
+      <div class="open-colors count-em">
+          <h4>Purple</h4>
+          <span class="color-swatch" style="background-color: var(--purple-0)"></span>
+          <span class="color-swatch" style="background-color: var(--purple-1)"></span>
+          <span class="color-swatch" style="background-color: var(--purple-2)"></span>
+          <span class="color-swatch" style="background-color: var(--purple-3)"></span>
+          <span class="color-swatch" style="background-color: var(--purple-4)"></span>
+          <span class="color-swatch" style="background-color: var(--purple-5)"></span>
+          <span class="color-swatch" style="background-color: var(--purple-6)"></span>
+          <span class="color-swatch" style="background-color: var(--purple-7)"></span>
+          <span class="color-swatch" style="background-color: var(--purple-8)"></span>
+          <span class="color-swatch" style="background-color: var(--purple-9)"></span>
+          <span class="color-swatch" style="background-color: var(--purple-10)"></span>
+          <span class="color-swatch" style="background-color: var(--purple-11)"></span>
+          <span class="color-swatch" style="background-color: var(--purple-12)"></span>
+      </div>
+      <div class="open-colors count-em">
           <h4>Violet</h4>
           <span class="color-swatch" style="background-color: var(--violet-0)"></span>
           <span class="color-swatch" style="background-color: var(--violet-1)"></span>
@@ -1302,8 +1336,11 @@ <h4>Violet</h4>
           <span class="color-swatch" style="background-color: var(--violet-7)"></span>
           <span class="color-swatch" style="background-color: var(--violet-8)"></span>
           <span class="color-swatch" style="background-color: var(--violet-9)"></span>
-        </div>
-        <div class="open-colors count-em">
+          <span class="color-swatch" style="background-color: var(--violet-10)"></span>
+          <span class="color-swatch" style="background-color: var(--violet-11)"></span>
+          <span class="color-swatch" style="background-color: var(--violet-12)"></span>
+      </div>
+      <div class="open-colors count-em">
           <h4>Indigo</h4>
           <span class="color-swatch" style="background-color: var(--indigo-0)"></span>
           <span class="color-swatch" style="background-color: var(--indigo-1)"></span>
@@ -1315,8 +1352,11 @@ <h4>Indigo</h4>
           <span class="color-swatch" style="background-color: var(--indigo-7)"></span>
           <span class="color-swatch" style="background-color: var(--indigo-8)"></span>
           <span class="color-swatch" style="background-color: var(--indigo-9)"></span>
-        </div>
-        <div class="open-colors count-em">
+          <span class="color-swatch" style="background-color: var(--indigo-10)"></span>
+          <span class="color-swatch" style="background-color: var(--indigo-11)"></span>
+          <span class="color-swatch" style="background-color: var(--indigo-12)"></span>
+      </div>
+      <div class="open-colors count-em">
           <h4>Blue</h4>
           <span class="color-swatch" style="background-color: var(--blue-0)"></span>
           <span class="color-swatch" style="background-color: var(--blue-1)"></span>
@@ -1328,8 +1368,11 @@ <h4>Blue</h4>
           <span class="color-swatch" style="background-color: var(--blue-7)"></span>
           <span class="color-swatch" style="background-color: var(--blue-8)"></span>
           <span class="color-swatch" style="background-color: var(--blue-9)"></span>
-        </div>
-        <div class="open-colors count-em">
+          <span class="color-swatch" style="background-color: var(--blue-10)"></span>
+          <span class="color-swatch" style="background-color: var(--blue-11)"></span>
+          <span class="color-swatch" style="background-color: var(--blue-12)"></span>
+      </div>
+      <div class="open-colors count-em">
           <h4>Cyan</h4>
           <span class="color-swatch" style="background-color: var(--cyan-0)"></span>
           <span class="color-swatch" style="background-color: var(--cyan-1)"></span>
@@ -1341,8 +1384,11 @@ <h4>Cyan</h4>
           <span class="color-swatch" style="background-color: var(--cyan-7)"></span>
           <span class="color-swatch" style="background-color: var(--cyan-8)"></span>
           <span class="color-swatch" style="background-color: var(--cyan-9)"></span>
-        </div>
-        <div class="open-colors count-em">
+          <span class="color-swatch" style="background-color: var(--cyan-10)"></span>
+          <span class="color-swatch" style="background-color: var(--cyan-11)"></span>
+          <span class="color-swatch" style="background-color: var(--cyan-12)"></span>
+      </div>
+      <div class="open-colors count-em">
           <h4>Teal</h4>
           <span class="color-swatch" style="background-color: var(--teal-0)"></span>
           <span class="color-swatch" style="background-color: var(--teal-1)"></span>
@@ -1354,8 +1400,11 @@ <h4>Teal</h4>
           <span class="color-swatch" style="background-color: var(--teal-7)"></span>
           <span class="color-swatch" style="background-color: var(--teal-8)"></span>
           <span class="color-swatch" style="background-color: var(--teal-9)"></span>
-        </div>
-        <div class="open-colors count-em">
+          <span class="color-swatch" style="background-color: var(--teal-10)"></span>
+          <span class="color-swatch" style="background-color: var(--teal-11)"></span>
+          <span class="color-swatch" style="background-color: var(--teal-12)"></span>
+      </div>
+      <div class="open-colors count-em">
           <h4>Green</h4>
           <span class="color-swatch" style="background-color: var(--green-0)"></span>
           <span class="color-swatch" style="background-color: var(--green-1)"></span>
@@ -1367,8 +1416,11 @@ <h4>Green</h4>
           <span class="color-swatch" style="background-color: var(--green-7)"></span>
           <span class="color-swatch" style="background-color: var(--green-8)"></span>
           <span class="color-swatch" style="background-color: var(--green-9)"></span>
-        </div>
-        <div class="open-colors count-em">
+          <span class="color-swatch" style="background-color: var(--green-10)"></span>
+          <span class="color-swatch" style="background-color: var(--green-11)"></span>
+          <span class="color-swatch" style="background-color: var(--green-12)"></span>
+      </div>
+      <div class="open-colors count-em">
           <h4>Lime</h4>
           <span class="color-swatch" style="background-color: var(--lime-0)"></span>
           <span class="color-swatch" style="background-color: var(--lime-1)"></span>
@@ -1380,8 +1432,11 @@ <h4>Lime</h4>
           <span class="color-swatch" style="background-color: var(--lime-7)"></span>
           <span class="color-swatch" style="background-color: var(--lime-8)"></span>
           <span class="color-swatch" style="background-color: var(--lime-9)"></span>
-        </div>
-        <div class="open-colors count-em">
+          <span class="color-swatch" style="background-color: var(--lime-10)"></span>
+          <span class="color-swatch" style="background-color: var(--lime-11)"></span>
+          <span class="color-swatch" style="background-color: var(--lime-12)"></span>
+      </div>
+      <div class="open-colors count-em">
           <h4>Yellow</h4>
           <span class="color-swatch" style="background-color: var(--yellow-0)"></span>
           <span class="color-swatch" style="background-color: var(--yellow-1)"></span>
@@ -1393,8 +1448,11 @@ <h4>Yellow</h4>
           <span class="color-swatch" style="background-color: var(--yellow-7)"></span>
           <span class="color-swatch" style="background-color: var(--yellow-8)"></span>
           <span class="color-swatch" style="background-color: var(--yellow-9)"></span>
-        </div>
-        <div class="open-colors count-em">
+          <span class="color-swatch" style="background-color: var(--yellow-10)"></span>
+          <span class="color-swatch" style="background-color: var(--yellow-11)"></span>
+          <span class="color-swatch" style="background-color: var(--yellow-12)"></span>
+      </div>
+      <div class="open-colors count-em">
           <h4>Orange</h4>
           <span class="color-swatch" style="background-color: var(--orange-0)"></span>
           <span class="color-swatch" style="background-color: var(--orange-1)"></span>
@@ -1406,7 +1464,90 @@ <h4>Orange</h4>
           <span class="color-swatch" style="background-color: var(--orange-7)"></span>
           <span class="color-swatch" style="background-color: var(--orange-8)"></span>
           <span class="color-swatch" style="background-color: var(--orange-9)"></span>
-        </div>
+          <span class="color-swatch" style="background-color: var(--orange-10)"></span>
+          <span class="color-swatch" style="background-color: var(--orange-11)"></span>
+          <span class="color-swatch" style="background-color: var(--orange-12)"></span>
+      </div>
+      <div class="open-colors count-em">
+          <h4>Choco</h4>
+          <span class="color-swatch" style="background-color: var(--choco-0)"></span>
+          <span class="color-swatch" style="background-color: var(--choco-1)"></span>
+          <span class="color-swatch" style="background-color: var(--choco-2)"></span>
+          <span class="color-swatch" style="background-color: var(--choco-3)"></span>
+          <span class="color-swatch" style="background-color: var(--choco-4)"></span>
+          <span class="color-swatch" style="background-color: var(--choco-5)"></span>
+          <span class="color-swatch" style="background-color: var(--choco-6)"></span>
+          <span class="color-swatch" style="background-color: var(--choco-7)"></span>
+          <span class="color-swatch" style="background-color: var(--choco-8)"></span>
+          <span class="color-swatch" style="background-color: var(--choco-9)"></span>
+          <span class="color-swatch" style="background-color: var(--choco-10)"></span>
+          <span class="color-swatch" style="background-color: var(--choco-11)"></span>
+          <span class="color-swatch" style="background-color: var(--choco-12)"></span>
+      </div>
+      <div class="open-colors count-em">
+          <h4>Brown</h4>
+          <span class="color-swatch" style="background-color: var(--brown-0)"></span>
+          <span class="color-swatch" style="background-color: var(--brown-1)"></span>
+          <span class="color-swatch" style="background-color: var(--brown-2)"></span>
+          <span class="color-swatch" style="background-color: var(--brown-3)"></span>
+          <span class="color-swatch" style="background-color: var(--brown-4)"></span>
+          <span class="color-swatch" style="background-color: var(--brown-5)"></span>
+          <span class="color-swatch" style="background-color: var(--brown-6)"></span>
+          <span class="color-swatch" style="background-color: var(--brown-7)"></span>
+          <span class="color-swatch" style="background-color: var(--brown-8)"></span>
+          <span class="color-swatch" style="background-color: var(--brown-9)"></span>
+          <span class="color-swatch" style="background-color: var(--brown-10)"></span>
+          <span class="color-swatch" style="background-color: var(--brown-11)"></span>
+          <span class="color-swatch" style="background-color: var(--brown-12)"></span>
+      </div>
+      <div class="open-colors count-em">
+          <h4>Sand</h4>
+          <span class="color-swatch" style="background-color: var(--sand-0)"></span>
+          <span class="color-swatch" style="background-color: var(--sand-1)"></span>
+          <span class="color-swatch" style="background-color: var(--sand-2)"></span>
+          <span class="color-swatch" style="background-color: var(--sand-3)"></span>
+          <span class="color-swatch" style="background-color: var(--sand-4)"></span>
+          <span class="color-swatch" style="background-color: var(--sand-5)"></span>
+          <span class="color-swatch" style="background-color: var(--sand-6)"></span>
+          <span class="color-swatch" style="background-color: var(--sand-7)"></span>
+          <span class="color-swatch" style="background-color: var(--sand-8)"></span>
+          <span class="color-swatch" style="background-color: var(--sand-9)"></span>
+          <span class="color-swatch" style="background-color: var(--sand-10)"></span>
+          <span class="color-swatch" style="background-color: var(--sand-11)"></span>
+          <span class="color-swatch" style="background-color: var(--sand-12)"></span>
+      </div>
+      <div class="open-colors count-em">
+          <h4>Camo</h4>
+          <span class="color-swatch" style="background-color: var(--camo-0)"></span>
+          <span class="color-swatch" style="background-color: var(--camo-1)"></span>
+          <span class="color-swatch" style="background-color: var(--camo-2)"></span>
+          <span class="color-swatch" style="background-color: var(--camo-3)"></span>
+          <span class="color-swatch" style="background-color: var(--camo-4)"></span>
+          <span class="color-swatch" style="background-color: var(--camo-5)"></span>
+          <span class="color-swatch" style="background-color: var(--camo-6)"></span>
+          <span class="color-swatch" style="background-color: var(--camo-7)"></span>
+          <span class="color-swatch" style="background-color: var(--camo-8)"></span>
+          <span class="color-swatch" style="background-color: var(--camo-9)"></span>
+          <span class="color-swatch" style="background-color: var(--camo-10)"></span>
+          <span class="color-swatch" style="background-color: var(--camo-11)"></span>
+          <span class="color-swatch" style="background-color: var(--camo-12)"></span>
+      </div>
+      <div class="open-colors count-em">
+          <h4>Jungle</h4>
+          <span class="color-swatch" style="background-color: var(--jungle-0)"></span>
+          <span class="color-swatch" style="background-color: var(--jungle-1)"></span>
+          <span class="color-swatch" style="background-color: var(--jungle-2)"></span>
+          <span class="color-swatch" style="background-color: var(--jungle-3)"></span>
+          <span class="color-swatch" style="background-color: var(--jungle-4)"></span>
+          <span class="color-swatch" style="background-color: var(--jungle-5)"></span>
+          <span class="color-swatch" style="background-color: var(--jungle-6)"></span>
+          <span class="color-swatch" style="background-color: var(--jungle-7)"></span>
+          <span class="color-swatch" style="background-color: var(--jungle-8)"></span>
+          <span class="color-swatch" style="background-color: var(--jungle-9)"></span>
+          <span class="color-swatch" style="background-color: var(--jungle-10)"></span>
+          <span class="color-swatch" style="background-color: var(--jungle-11)"></span>
+          <span class="color-swatch" style="background-color: var(--jungle-12)"></span>
+      </div>      
       </article>
 
       <details>
@@ -1416,7 +1557,7 @@ <h4>Orange</h4>
           <header>
             <h3>1) Color theming</h3>
             <p>Low numbers are light and high numbers are dark. See how the Open Props <a href="https://github.com/argyleink/open-props/blob/main/src/extra/normalize.css">normalize.css</a> implements <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.light.css">light</a> and <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.dark.css">dark</a> modes.</p>
-            <p><b>See it live:</b> <a href="https://codepen.io/argyleink/pen/21fe8c43e25876c3756917df0bd7ef36">auto, light, dark, dim and grape themes</a> demonstrated with Open Props!</p>
+            <p><b>See it live:</b> <a href="https://codepen.io/argyleink/pen/21fe8c43e25876c3756917df0bd7ef36">auto, light, dark, dim and purple themes</a> demonstrated with Open Props!</p>
           </header>
 
           <div class="block-wrap">
@@ -1469,18 +1610,18 @@ <h5>Dim</h5>
               </code></pre>
             </div>
             <div>
-              <h5>Grape</h5>
+              <h5>Purple</h5>
               <pre class="language-css"><code>
                 html {
-                  --brand-grape: var(--grape-5);
+                  --brand-purple: var(--purple-5);
 
-                  --text1-grape: var(--grape-9);
-                  --text2-grape: var(--grape-7);
+                  --text1-purple: var(--purple-9);
+                  --text2-purple: var(--purple-7);
 
-                  --surface1-grape: var(--grape-0);
-                  --surface2-grape: var(--grape-1);
-                  --surface3-grape: var(--grape-2);
-                  --surface4-grape: var(--grape-3);
+                  --surface1-purple: var(--purple-0);
+                  --surface2-purple: var(--purple-1);
+                  --surface3-purple: var(--purple-2);
+                  --surface4-purple: var(--purple-3);
                 }
               </code></pre>
             </div>
@@ -1546,18 +1687,18 @@ <h5>Prefers Dim</h5>
             </div>
 
             <div>
-              <h5>Prefers Grape</h5>
+              <h5>Prefers Purple</h5>
               <pre class="language-css"><code>
-                [color-scheme="grape"] {
-                  --brand: var(--brand-grape);
+                [color-scheme="purple"] {
+                  --brand: var(--brand-purple);
 
-                  --text1: var(--text1-grape);
-                  --text2: var(--text2-grape);
+                  --text1: var(--text1-purple);
+                  --text2: var(--text2-purple);
 
-                  --surface1: var(--surface1-grape);
-                  --surface2: var(--surface2-grape);
-                  --surface3: var(--surface3-grape);
-                  --surface4: var(--surface4-grape);
+                  --surface1: var(--surface1-purple);
+                  --surface2: var(--surface2-purple);
+                  --surface3: var(--surface3-purple);
+                  --surface4: var(--surface4-purple);
                 }
               </code></pre>
             </div>
diff --git a/docsite/package-lock.json b/docsite/package-lock.json
index 04492365..b747f49f 100644
--- a/docsite/package-lock.json
+++ b/docsite/package-lock.json
@@ -1,7 +1,1805 @@
 {
   "name": "open-props",
+  "lockfileVersion": 2,
   "requires": true,
-  "lockfileVersion": 1,
+  "packages": {
+    "": {
+      "name": "open-props",
+      "devDependencies": {
+        "postcss-preset-env": "6.7.x",
+        "vite": "2.6.1"
+      }
+    },
+    "node_modules/@csstools/convert-colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
+      "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "9.8.6",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
+      "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001109",
+        "colorette": "^1.2.1",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^7.0.32",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "funding": {
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+      }
+    },
+    "node_modules/autoprefixer/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "node_modules/browserslist": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.0.tgz",
+      "integrity": "sha512-g2BJ2a0nEYvEFQC208q8mVAhfNwpZ5Mu8BwgtCdZKO3qx98HChmeg448fPdUzld8aFmfLgVh7yymqV+q1lJZ5g==",
+      "dev": true,
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001254",
+        "colorette": "^1.3.0",
+        "electron-to-chromium": "^1.3.830",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.75"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/browserslist"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001431",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
+      "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
+    },
+    "node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "node_modules/colorette": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz",
+      "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
+      "dev": true
+    },
+    "node_modules/css-blank-pseudo": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
+      "integrity": "sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.5"
+      },
+      "bin": {
+        "css-blank-pseudo": "cli.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/css-blank-pseudo/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/css-has-pseudo": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz",
+      "integrity": "sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.6",
+        "postcss-selector-parser": "^5.0.0-rc.4"
+      },
+      "bin": {
+        "css-has-pseudo": "cli.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/css-has-pseudo/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/css-prefers-color-scheme": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
+      "integrity": "sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.5"
+      },
+      "bin": {
+        "css-prefers-color-scheme": "cli.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/css-prefers-color-scheme/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/cssdb": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
+      "integrity": "sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==",
+      "dev": true
+    },
+    "node_modules/cssesc": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+      "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.3.830",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.830.tgz",
+      "integrity": "sha512-gBN7wNAxV5vl1430dG+XRcQhD4pIeYeak6p6rjdCtlz5wWNwDad8jwvphe5oi1chL5MV6RNRikfffBBiFuj+rQ==",
+      "dev": true
+    },
+    "node_modules/esbuild": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.3.tgz",
+      "integrity": "sha512-98xovMLKnyhv3gcReUuAEi5Ig1rK6SIgvsJuBIcfwzqGSEHsV8UJjMlmkhHoHMf9XZybMpE9Zax8AA8f7i2hlQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "optionalDependencies": {
+        "esbuild-android-arm64": "0.13.3",
+        "esbuild-darwin-64": "0.13.3",
+        "esbuild-darwin-arm64": "0.13.3",
+        "esbuild-freebsd-64": "0.13.3",
+        "esbuild-freebsd-arm64": "0.13.3",
+        "esbuild-linux-32": "0.13.3",
+        "esbuild-linux-64": "0.13.3",
+        "esbuild-linux-arm": "0.13.3",
+        "esbuild-linux-arm64": "0.13.3",
+        "esbuild-linux-mips64le": "0.13.3",
+        "esbuild-linux-ppc64le": "0.13.3",
+        "esbuild-openbsd-64": "0.13.3",
+        "esbuild-sunos-64": "0.13.3",
+        "esbuild-windows-32": "0.13.3",
+        "esbuild-windows-64": "0.13.3",
+        "esbuild-windows-arm64": "0.13.3"
+      }
+    },
+    "node_modules/esbuild-android-arm64": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.3.tgz",
+      "integrity": "sha512-jc9E8vGTHkzb0Vwl74H8liANV9BWsqtzLHaKvcsRgf1M+aVCBSF0gUheduAKfDsbDMT0judeMLhwBP34EUesTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/esbuild-darwin-64": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.3.tgz",
+      "integrity": "sha512-8bG3Zq+ZNuLlIJebOO2+weI7P2LVf33sOzaUfHj8MuJ+1Ixe4KtQxfYp7qhFnP6xP2ToJaYHxGUfLeiUCEz9hw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/esbuild-darwin-arm64": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.3.tgz",
+      "integrity": "sha512-5E81eImYtTgh8pY7Gq4WQHhWkR/LvYadUXmuYeZBiP+3ADZJZcG60UFceZrjqNPaFOWKr/xmh4aNocwagEubcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/esbuild-freebsd-64": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.3.tgz",
+      "integrity": "sha512-ou+f91KkTGexi8HvF/BdtsITL6plbciQfZGys7QX6/QEwyE96PmL5KnU6ZQwoU7E99Ts6Sc9bUDq8HXJubKtBA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/esbuild-freebsd-arm64": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.3.tgz",
+      "integrity": "sha512-F1zV7nySjHswJuvIgjkiG5liZ63MeazDGXGKViTCeegjZ71sAhOChcaGhKcu6vq9+vqZxlfEi1fmXlx6Pc3coQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/esbuild-linux-32": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.3.tgz",
+      "integrity": "sha512-mHHc2v6uLrHH4zaaq5RB/5IWzgimEJ1HGldzf1qtGI513KZWfH0HRRQ8p1di4notJgBn7tDzWQ1f34ZHy69viQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/esbuild-linux-64": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.3.tgz",
+      "integrity": "sha512-FJ1De2O89mrOuqtaEXu41qIYJU6R41F+OA6vheNwcAQcX8fu0aiA13FJeLABq29BYJuTVgRj3cyC8q+tz19/dQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/esbuild-linux-arm": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.3.tgz",
+      "integrity": "sha512-9BJNRtLwBh3OP22cln9g3AJdbAQUcjRHqA4BScx9k4RZpGqPokFr548zpeplxWhcwrIjT8qPebwH9CrRVy8Bsw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/esbuild-linux-arm64": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.3.tgz",
+      "integrity": "sha512-Cauhr45KSo+wRUojs+1qfycQqQCAXTOvsWvkZ6xmEMAXLAm+f8RQGDQeP8CAf8Yeelnegcn6UNdvzdzLHhWDFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/esbuild-linux-mips64le": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.3.tgz",
+      "integrity": "sha512-YVzJUGCncuuLm2boYyVeuMFsak4ZAhdiBwi0xNDZCC8sy+tS6Boe2mzcrD2uubv5JKAUOrpN186S1DtU4WgBgw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/esbuild-linux-ppc64le": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.3.tgz",
+      "integrity": "sha512-GU6CqqKtJEoyxC2QWHiJtmuOz9wc/jMv8ZloK2WwiGY5yMvAmM3PI103Dj7xcjebNTHBqITTUw/aigY1wx5A3w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/esbuild-openbsd-64": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.3.tgz",
+      "integrity": "sha512-HVpkgpn4BQt4BPDAjTOpeMub6mzNWw6Y3gaLQJrpbO24pws6ZwYkY24OI3/Uo3LDCbH6856MM81JxECt92OWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/esbuild-sunos-64": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.3.tgz",
+      "integrity": "sha512-XncBVOtnEfUbPV4CaiFBxh38ychnBfwCxuTm9iAqcHzIwkmeNRN5qMzDyfE1jyfJje+Bbt6AvIfz6SdYt8/UEQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ]
+    },
+    "node_modules/esbuild-windows-32": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.3.tgz",
+      "integrity": "sha512-ZlgDz7d1nk8wQACi+z8IDzNZVUlN9iprAme+1YSTsfFDlkyI8jeaGWPk9EQFNY7rJzsLVYm6eZ2mhPioc7uT5A==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/esbuild-windows-64": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.3.tgz",
+      "integrity": "sha512-YX7KvRez3TR+GudlQm9tND/ssj2FsF9vb8ZWzAoZOLxpPzE3y+3SFJNrfDzzQKPzJ0Pnh9KBP4gsaMwJjKHDhw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/esbuild-windows-arm64": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.3.tgz",
+      "integrity": "sha512-nP7H0Y2a6OJd3Qi1Q8sehhyP4x4JoXK4S5y6FzH2vgaJgiyEurzFxjUufGdMaw+RxtxiwD/uRndUgwaZ2JD8lg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/flatten": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
+      "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==",
+      "deprecated": "flatten is deprecated in favor of utility frameworks such as lodash.",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
+    },
+    "node_modules/is-core-module": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.7.0.tgz",
+      "integrity": "sha512-ByY+tjCciCr+9nLryBYcSD50EOGWt95c7tIsKTG1J2ixKKXPvF7Ej3AVd+UfDydAJom3biBGDBALaO79ktwgEQ==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
+      "dev": true
+    },
+    "node_modules/lodash.template": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
+      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
+      "dev": true,
+      "dependencies": {
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.templatesettings": "^4.0.0"
+      }
+    },
+    "node_modules/lodash.templatesettings": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
+      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
+      "dev": true,
+      "dependencies": {
+        "lodash._reinterpolate": "^3.0.0"
+      }
+    },
+    "node_modules/nanocolors": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.12.tgz",
+      "integrity": "sha512-SFNdALvzW+rVlzqexid6epYdt8H9Zol7xDoQarioEFcFN0JHo4CYNztAxmtfgGTVRCmFlEOqqhBpoFGKqSAMug==",
+      "dev": true
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "dev": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "1.1.75",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.75.tgz",
+      "integrity": "sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==",
+      "dev": true
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/postcss": {
+      "version": "8.3.8",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.8.tgz",
+      "integrity": "sha512-GT5bTjjZnwDifajzczOC+r3FI3Cu+PgPvrsjhQdRqa2kTJ4968/X9CUce9xttIB0xOs5c6xf0TCWZo/y9lF6bA==",
+      "dev": true,
+      "dependencies": {
+        "nanocolors": "^0.2.2",
+        "nanoid": "^3.1.25",
+        "source-map-js": "^0.6.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-attribute-case-insensitive": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz",
+      "integrity": "sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^6.0.2"
+      }
+    },
+    "node_modules/postcss-attribute-case-insensitive/node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-attribute-case-insensitive/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-attribute-case-insensitive/node_modules/postcss-selector-parser": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
+      "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-color-functional-notation": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz",
+      "integrity": "sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-color-functional-notation/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-color-gray": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz",
+      "integrity": "sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==",
+      "dev": true,
+      "dependencies": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.5",
+        "postcss-values-parser": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-color-gray/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-color-hex-alpha": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz",
+      "integrity": "sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.14",
+        "postcss-values-parser": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-color-hex-alpha/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-color-mod-function": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz",
+      "integrity": "sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==",
+      "dev": true,
+      "dependencies": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-color-mod-function/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-color-rebeccapurple": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz",
+      "integrity": "sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-color-rebeccapurple/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-custom-media": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz",
+      "integrity": "sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.14"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-custom-media/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-custom-properties": {
+      "version": "8.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz",
+      "integrity": "sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.17",
+        "postcss-values-parser": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-custom-properties/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-custom-selectors": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz",
+      "integrity": "sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-custom-selectors/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-dir-pseudo-class": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz",
+      "integrity": "sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/postcss-dir-pseudo-class/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-double-position-gradients": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz",
+      "integrity": "sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.5",
+        "postcss-values-parser": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-double-position-gradients/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-env-function": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-2.0.2.tgz",
+      "integrity": "sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-env-function/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-focus-visible": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz",
+      "integrity": "sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-focus-visible/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-focus-within": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz",
+      "integrity": "sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-focus-within/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-font-variant": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-4.0.1.tgz",
+      "integrity": "sha512-I3ADQSTNtLTTd8uxZhtSOrTCQ9G4qUVKPjHiDk0bV75QSxXjVWiJVJ2VLdspGUi9fbW9BcjKJoRvxAH1pckqmA==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "node_modules/postcss-font-variant/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-gap-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz",
+      "integrity": "sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-gap-properties/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-image-set-function": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz",
+      "integrity": "sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-image-set-function/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-initial": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.2.tgz",
+      "integrity": "sha512-ugA2wKonC0xeNHgirR4D3VWHs2JcU08WAi1KFLVcnb7IN89phID6Qtg2RIctWbnvp1TM2BOmDtX8GGLCKdR8YA==",
+      "dev": true,
+      "dependencies": {
+        "lodash.template": "^4.5.0",
+        "postcss": "^7.0.2"
+      }
+    },
+    "node_modules/postcss-initial/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-lab-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz",
+      "integrity": "sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==",
+      "dev": true,
+      "dependencies": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-lab-function/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-logical": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-3.0.0.tgz",
+      "integrity": "sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-logical/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-media-minmax": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz",
+      "integrity": "sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-media-minmax/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-nesting": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz",
+      "integrity": "sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-nesting/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-overflow-shorthand": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz",
+      "integrity": "sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-overflow-shorthand/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-page-break": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-2.0.0.tgz",
+      "integrity": "sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "node_modules/postcss-page-break/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-place": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-4.0.1.tgz",
+      "integrity": "sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-place/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-preset-env": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz",
+      "integrity": "sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==",
+      "dev": true,
+      "dependencies": {
+        "autoprefixer": "^9.6.1",
+        "browserslist": "^4.6.4",
+        "caniuse-lite": "^1.0.30000981",
+        "css-blank-pseudo": "^0.1.4",
+        "css-has-pseudo": "^0.10.0",
+        "css-prefers-color-scheme": "^3.1.1",
+        "cssdb": "^4.4.0",
+        "postcss": "^7.0.17",
+        "postcss-attribute-case-insensitive": "^4.0.1",
+        "postcss-color-functional-notation": "^2.0.1",
+        "postcss-color-gray": "^5.0.0",
+        "postcss-color-hex-alpha": "^5.0.3",
+        "postcss-color-mod-function": "^3.0.3",
+        "postcss-color-rebeccapurple": "^4.0.1",
+        "postcss-custom-media": "^7.0.8",
+        "postcss-custom-properties": "^8.0.11",
+        "postcss-custom-selectors": "^5.1.2",
+        "postcss-dir-pseudo-class": "^5.0.0",
+        "postcss-double-position-gradients": "^1.0.0",
+        "postcss-env-function": "^2.0.2",
+        "postcss-focus-visible": "^4.0.0",
+        "postcss-focus-within": "^3.0.0",
+        "postcss-font-variant": "^4.0.0",
+        "postcss-gap-properties": "^2.0.0",
+        "postcss-image-set-function": "^3.0.1",
+        "postcss-initial": "^3.0.0",
+        "postcss-lab-function": "^2.0.1",
+        "postcss-logical": "^3.0.0",
+        "postcss-media-minmax": "^4.0.0",
+        "postcss-nesting": "^7.0.0",
+        "postcss-overflow-shorthand": "^2.0.0",
+        "postcss-page-break": "^2.0.0",
+        "postcss-place": "^4.0.1",
+        "postcss-pseudo-class-any-link": "^6.0.0",
+        "postcss-replace-overflow-wrap": "^3.0.0",
+        "postcss-selector-matches": "^4.0.0",
+        "postcss-selector-not": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-preset-env/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-pseudo-class-any-link": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz",
+      "integrity": "sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-pseudo-class-any-link/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-replace-overflow-wrap": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz",
+      "integrity": "sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "node_modules/postcss-replace-overflow-wrap/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-selector-matches": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz",
+      "integrity": "sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "postcss": "^7.0.2"
+      }
+    },
+    "node_modules/postcss-selector-matches/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-selector-not": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-4.0.1.tgz",
+      "integrity": "sha512-YolvBgInEK5/79C+bdFMyzqTg6pkYqDbzZIST/PDMqa/o3qtXenD05apBG2jLgT0/BQ77d4U2UK12jWpilqMAQ==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "postcss": "^7.0.2"
+      }
+    },
+    "node_modules/postcss-selector-not/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+      "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^2.0.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "dev": true
+    },
+    "node_modules/postcss-values-parser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz",
+      "integrity": "sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==",
+      "dev": true,
+      "dependencies": {
+        "flatten": "^1.0.2",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=6.14.4"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "2.57.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.57.0.tgz",
+      "integrity": "sha512-bKQIh1rWKofRee6mv8SrF2HdP6pea5QkwBZSMImJysFj39gQuiV8MEPBjXOCpzk3wSYp63M2v2wkWBmFC8O/rg==",
+      "dev": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "node_modules/vite": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.6.1.tgz",
+      "integrity": "sha512-rYd+iGMQ+AytWfYBDhIz2upeiseuqrAMwmApJDR40wu12C9MqzemX449nM3FN1Z/FFSV+fMTFz7eMenngVSogA==",
+      "dev": true,
+      "dependencies": {
+        "esbuild": "^0.13.2",
+        "postcss": "^8.3.8",
+        "resolve": "^1.20.0",
+        "rollup": "^2.57.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": ">=12.2.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      },
+      "peerDependencies": {
+        "less": "*",
+        "sass": "*",
+        "stylus": "*"
+      },
+      "peerDependenciesMeta": {
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        }
+      }
+    }
+  },
   "dependencies": {
     "@csstools/convert-colors": {
       "version": "1.4.0",
@@ -66,9 +1864,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001255",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001255.tgz",
-      "integrity": "sha512-F+A3N9jTZL882f/fg/WWVnKSu6IOo3ueLz4zwaOPbPYHNmM/ZaDUyzyJwS1mZhX7Ex5jqTyW599Gdelh5PDYLQ==",
+      "version": "1.0.30001431",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
+      "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
       "dev": true
     },
     "chalk": {
@@ -428,9 +2226,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.1.28",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.28.tgz",
-      "integrity": "sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
       "dev": true
     },
     "node-releases": {
@@ -740,15 +2538,6 @@
         }
       }
     },
-    "postcss-easings": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-easings/-/postcss-easings-3.0.1.tgz",
-      "integrity": "sha512-n3bG/X3iB0m8d845vhFg/62/ECeT8jY8gE8F2A41z8Mty41spYA4vzMLezha7icVjtGjqlxgO3QE+uOzpDqeww==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
     "postcss-env-function": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-2.0.2.tgz",
diff --git a/docsite/syntax-highlight.css b/docsite/syntax-highlight.css
index 7b89ba7a..e8ef7c12 100644
--- a/docsite/syntax-highlight.css
+++ b/docsite/syntax-highlight.css
@@ -85,8 +85,8 @@ code.language-css {
       0 0 25px var(--teal-7);
 
     @nest [data-theme="light"] & {
-      color: var(--grape-9);
-      text-shadow: 0 0 15px var(--grape-9);
+      color: var(--purple-9);
+      text-shadow: 0 0 15px var(--purple-9);
     }
 
     @media (--HDcolor) {
diff --git a/package-lock.json b/package-lock.json
index 5a0922c6..9195d1dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,16 @@
 {
   "name": "open-props",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "open-props",
-      "version": "1.4.0",
+      "version": "1.5.0",
       "license": "MIT",
       "devDependencies": {
         "ava": "^3.15.0",
+        "colorjs.io": "^0.4.1-patch.1",
         "concurrently": "^7.2.2",
         "cssnano": "^5.1.10",
         "json": "^11.0.0",
@@ -67,6 +68,10 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
       }
     },
     "node_modules/@babel/core/node_modules/semver": {
@@ -148,6 +153,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
@@ -174,6 +182,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@babel/helper-create-regexp-features-plugin": {
@@ -187,6 +198,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@babel/helper-define-polyfill-provider": {
@@ -203,6 +217,9 @@
         "lodash.debounce": "^4.0.8",
         "resolve": "^1.14.2",
         "semver": "^6.1.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0-0"
       }
     },
     "node_modules/@babel/helper-define-polyfill-provider/node_modules/semver": {
@@ -478,6 +495,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.13.0"
       }
     },
     "node_modules/@babel/plugin-proposal-async-generator-functions": {
@@ -492,6 +512,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-class-properties": {
@@ -502,6 +525,9 @@
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.12.1",
         "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-class-static-block": {
@@ -516,6 +542,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
       }
     },
     "node_modules/@babel/plugin-proposal-dynamic-import": {
@@ -529,6 +558,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-export-namespace-from": {
@@ -542,6 +574,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-json-strings": {
@@ -555,6 +590,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-logical-assignment-operators": {
@@ -568,6 +606,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
@@ -581,6 +622,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-numeric-separator": {
@@ -594,6 +638,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-object-rest-spread": {
@@ -610,6 +657,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-optional-catch-binding": {
@@ -623,6 +673,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-optional-chaining": {
@@ -637,6 +690,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-private-methods": {
@@ -650,6 +706,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
@@ -665,6 +724,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-proposal-unicode-property-regex": {
@@ -678,6 +740,9 @@
       },
       "engines": {
         "node": ">=4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-async-generators": {
@@ -687,6 +752,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-class-properties": {
@@ -696,6 +764,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-class-static-block": {
@@ -708,6 +779,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-dynamic-import": {
@@ -717,6 +791,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-export-namespace-from": {
@@ -726,6 +803,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-flow": {
@@ -738,6 +818,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-import-meta": {
@@ -747,6 +830,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-json-strings": {
@@ -756,6 +842,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-jsx": {
@@ -768,6 +857,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
@@ -777,6 +869,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
@@ -786,6 +881,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-numeric-separator": {
@@ -795,6 +893,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-object-rest-spread": {
@@ -804,6 +905,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-optional-catch-binding": {
@@ -813,6 +917,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-optional-chaining": {
@@ -822,6 +929,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-private-property-in-object": {
@@ -834,6 +944,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-syntax-top-level-await": {
@@ -846,6 +959,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-arrow-functions": {
@@ -858,6 +974,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-async-to-generator": {
@@ -872,6 +991,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-block-scoped-functions": {
@@ -884,6 +1006,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-block-scoping": {
@@ -896,6 +1021,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-classes": {
@@ -914,6 +1042,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-computed-properties": {
@@ -926,6 +1057,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-destructuring": {
@@ -938,6 +1072,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-dotall-regex": {
@@ -951,6 +1088,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-duplicate-keys": {
@@ -963,6 +1103,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-exponentiation-operator": {
@@ -976,6 +1119,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-flow-strip-types": {
@@ -989,6 +1135,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-for-of": {
@@ -1001,6 +1150,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-function-name": {
@@ -1014,6 +1166,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-literals": {
@@ -1026,6 +1181,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-member-expression-literals": {
@@ -1038,6 +1196,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-modules-amd": {
@@ -1052,6 +1213,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
@@ -1067,6 +1231,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-modules-systemjs": {
@@ -1083,6 +1250,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-modules-umd": {
@@ -1096,6 +1266,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
@@ -1108,6 +1281,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@babel/plugin-transform-new-target": {
@@ -1120,6 +1296,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-object-super": {
@@ -1133,6 +1312,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-parameters": {
@@ -1145,6 +1327,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-property-literals": {
@@ -1157,6 +1342,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-react-display-name": {
@@ -1169,6 +1357,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx": {
@@ -1185,6 +1376,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-development": {
@@ -1197,6 +1391,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-react-pure-annotations": {
@@ -1210,6 +1407,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-regenerator": {
@@ -1222,6 +1422,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-reserved-words": {
@@ -1234,6 +1437,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-shorthand-properties": {
@@ -1246,6 +1452,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-spread": {
@@ -1259,6 +1468,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-sticky-regex": {
@@ -1271,6 +1483,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-template-literals": {
@@ -1283,6 +1498,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-typeof-symbol": {
@@ -1295,6 +1513,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
@@ -1307,6 +1528,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/plugin-transform-unicode-regex": {
@@ -1320,6 +1544,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/preset-env": {
@@ -1404,6 +1631,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-class-properties": {
@@ -1417,6 +1647,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/preset-env/node_modules/semver": {
@@ -1440,6 +1673,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/preset-modules": {
@@ -1453,6 +1689,9 @@
         "@babel/plugin-transform-dotall-regex": "^7.4.4",
         "@babel/types": "^7.4.4",
         "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/preset-react": {
@@ -1470,6 +1709,9 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/runtime": {
@@ -1561,6 +1803,64 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1606,6 +1906,9 @@
       },
       "engines": {
         "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
       }
     },
     "node_modules/@rollup/plugin-babel": {
@@ -1619,6 +1922,16 @@
       },
       "engines": {
         "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@types/babel__core": "^7.1.9",
+        "rollup": "^1.20.0||^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/babel__core": {
+          "optional": true
+        }
       }
     },
     "node_modules/@rollup/plugin-commonjs": {
@@ -1637,6 +1950,9 @@
       },
       "engines": {
         "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.30.0"
       }
     },
     "node_modules/@rollup/plugin-json": {
@@ -1646,6 +1962,9 @@
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^3.0.8"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0 || ^2.0.0"
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
@@ -1663,6 +1982,9 @@
       },
       "engines": {
         "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
       }
     },
     "node_modules/@rollup/pluginutils": {
@@ -1677,6 +1999,9 @@
       },
       "engines": {
         "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
       }
     },
     "node_modules/@rollup/pluginutils/node_modules/estree-walker": {
@@ -1910,6 +2235,10 @@
       },
       "bin": {
         "autoprefixer": "bin/autoprefixer"
+      },
+      "funding": {
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/autoprefixer"
       }
     },
     "node_modules/autoprefixer/node_modules/postcss": {
@@ -1924,6 +2253,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/ava": {
@@ -2132,6 +2465,9 @@
         "@babel/compat-data": "^7.13.11",
         "@babel/helper-define-polyfill-provider": "^0.2.2",
         "semver": "^6.1.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
@@ -2151,6 +2487,9 @@
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.2.2",
         "core-js-compat": "^3.16.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/babel-plugin-polyfill-regenerator": {
@@ -2160,6 +2499,9 @@
       "dev": true,
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.2.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/babel-plugin-transform-async-to-promises": {
@@ -2175,6 +2517,9 @@
       "dev": true,
       "dependencies": {
         "@babel/parser": "^7.3.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/balanced-match": {
@@ -2454,6 +2799,9 @@
       "dev": true,
       "engines": {
         "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/cacheable-request": {
@@ -2515,6 +2863,9 @@
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/callsites": {
@@ -2533,6 +2884,9 @@
       "dev": true,
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/caniuse-api": {
@@ -2548,9 +2902,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001344",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz",
-      "integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==",
+      "version": "1.0.30001431",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
+      "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
       "dev": true,
       "funding": [
         {
@@ -2766,6 +3120,12 @@
       "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
       "dev": true
     },
+    "node_modules/colorjs.io": {
+      "version": "0.4.1-patch.1",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.1-patch.1.tgz",
+      "integrity": "sha512-7UWunVDvnUtWRvGD0hEuGyxIvZvw4QbV8/Hz5fhePZdzyvZ8/Ze3mVGxa/8B084jZGBKJDX0ZwHPL/FDn7PZZA==",
+      "dev": true
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -2869,6 +3229,9 @@
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/concurrently/node_modules/chalk": {
@@ -2882,6 +3245,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
     "node_modules/concurrently/node_modules/chalk/node_modules/supports-color": {
@@ -2933,6 +3299,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
     "node_modules/concurrently/node_modules/yargs": {
@@ -3005,6 +3374,10 @@
       "dependencies": {
         "browserslist": "^4.17.1",
         "semver": "7.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
       }
     },
     "node_modules/core-js-compat/node_modules/semver": {
@@ -3068,6 +3441,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/css-declaration-sorter": {
@@ -3110,6 +3487,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/css-prefers-color-scheme": {
@@ -3139,6 +3520,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/css-select": {
@@ -3307,6 +3692,10 @@
       "dev": true,
       "engines": {
         "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
       }
     },
     "node_modules/date-time": {
@@ -3331,6 +3720,11 @@
       },
       "engines": {
         "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
     "node_modules/decompress-response": {
@@ -3719,6 +4113,9 @@
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
     "node_modules/find-up": {
@@ -3738,6 +4135,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
       "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==",
+      "deprecated": "flatten is deprecated in favor of utility frameworks such as lodash.",
       "dev": true
     },
     "node_modules/fraction.js": {
@@ -3747,6 +4145,10 @@
       "dev": true,
       "engines": {
         "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
       }
     },
     "node_modules/fs-extra": {
@@ -3775,6 +4177,7 @@
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
       "dev": true,
+      "hasInstallScript": true,
       "optional": true,
       "os": [
         "darwin"
@@ -3825,6 +4228,9 @@
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
         "has-symbols": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/get-stdin": {
@@ -3834,6 +4240,9 @@
       "dev": true,
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/get-stream": {
@@ -3863,6 +4272,9 @@
       },
       "engines": {
         "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/glob-parent": {
@@ -3922,6 +4334,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/globrex": {
@@ -3968,6 +4383,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/gzip-size/node_modules/duplexer": {
@@ -4025,6 +4443,9 @@
       "dev": true,
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/has-yarn": {
@@ -4061,6 +4482,9 @@
       "dev": true,
       "engines": {
         "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
     "node_modules/ieee754": {
@@ -4124,6 +4548,9 @@
       },
       "engines": {
         "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/import-fresh/node_modules/resolve-from": {
@@ -4267,6 +4694,9 @@
       "dev": true,
       "dependencies": {
         "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-error": {
@@ -4558,8 +4988,10 @@
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dev": true,
       "dependencies": {
-        "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
       }
     },
     "node_modules/keyv": {
@@ -4655,9 +5087,9 @@
       }
     },
     "node_modules/loader-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
       "dev": true,
       "dependencies": {
         "big.js": "^5.2.2",
@@ -4909,6 +5341,9 @@
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/make-dir/node_modules/semver": {
@@ -5168,6 +5603,13 @@
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
     "node_modules/microbundle/node_modules/escape-string-regexp": {
@@ -5177,6 +5619,9 @@
       "dev": true,
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/micromatch": {
@@ -5211,9 +5656,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -5223,10 +5668,13 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/mri": {
       "version": "1.2.0",
@@ -5244,9 +5692,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.1.28",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.28.tgz",
-      "integrity": "sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
       "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
@@ -5361,6 +5809,9 @@
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/once": {
@@ -5547,6 +5998,9 @@
       },
       "engines": {
         "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/p-locate": {
@@ -5587,6 +6041,9 @@
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/p-timeout": {
@@ -5659,6 +6116,9 @@
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/parse-ms": {
@@ -5716,6 +6176,9 @@
       "dev": true,
       "engines": {
         "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
     "node_modules/pify": {
@@ -5825,6 +6288,10 @@
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-attribute-case-insensitive": {
@@ -5861,6 +6328,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-attribute-case-insensitive/node_modules/postcss-selector-parser": {
@@ -5940,6 +6411,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
       }
     },
     "node_modules/postcss-cli/node_modules/ansi-styles": {
@@ -5952,6 +6426,9 @@
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/postcss-cli/node_modules/chalk": {
@@ -5965,6 +6442,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
     "node_modules/postcss-cli/node_modules/color-convert": {
@@ -6031,6 +6511,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-color-gray": {
@@ -6059,6 +6543,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-color-hex-alpha": {
@@ -6086,6 +6574,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-color-mod-function": {
@@ -6114,6 +6606,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-color-rebeccapurple": {
@@ -6141,6 +6637,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-colormin": {
@@ -6171,6 +6671,9 @@
       },
       "engines": {
         "node": "^10.0.0 || ^12.0.0 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
     "node_modules/postcss-combine-duplicated-selectors/node_modules/cssesc": {
@@ -6238,6 +6741,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-custom-properties": {
@@ -6265,6 +6772,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-custom-selectors": {
@@ -6292,6 +6803,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-dir-pseudo-class": {
@@ -6319,6 +6834,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-discard-comments": {
@@ -6394,6 +6913,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-env-function": {
@@ -6421,6 +6944,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-focus-visible": {
@@ -6447,6 +6974,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-focus-within": {
@@ -6473,6 +7004,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-font-variant": {
@@ -6496,6 +7031,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-gap-properties": {
@@ -6522,6 +7061,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-image-set-function": {
@@ -6549,6 +7092,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-import": {
@@ -6563,6 +7110,9 @@
       },
       "engines": {
         "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
       }
     },
     "node_modules/postcss-initial": {
@@ -6587,6 +7137,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-lab-function": {
@@ -6615,6 +7169,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-load-config": {
@@ -6629,6 +7187,18 @@
       },
       "engines": {
         "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ts-node": {
+          "optional": true
+        }
       }
     },
     "node_modules/postcss-logical": {
@@ -6655,6 +7225,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-media-minmax": {
@@ -6681,6 +7255,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-merge-longhand": {
@@ -6845,6 +7423,9 @@
         "postcss-modules-scope": "^3.0.0",
         "postcss-modules-values": "^4.0.0",
         "string-hash": "^1.1.1"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
       }
     },
     "node_modules/postcss-modules-extract-imports": {
@@ -6854,6 +7435,9 @@
       "dev": true,
       "engines": {
         "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
     "node_modules/postcss-modules-local-by-default": {
@@ -6868,6 +7452,9 @@
       },
       "engines": {
         "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
     "node_modules/postcss-modules-local-by-default/node_modules/cssesc": {
@@ -6905,6 +7492,9 @@
       },
       "engines": {
         "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
     "node_modules/postcss-modules-scope/node_modules/cssesc": {
@@ -6942,6 +7532,9 @@
       },
       "engines": {
         "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
     "node_modules/postcss-nesting": {
@@ -6968,6 +7561,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-normalize-charset": {
@@ -7144,6 +7741,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-page-break": {
@@ -7167,6 +7768,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-place": {
@@ -7194,6 +7799,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-preset-env": {
@@ -7256,6 +7865,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-pseudo-class-any-link": {
@@ -7283,6 +7896,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-reduce-initial": {
@@ -7337,6 +7954,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-reporter": {
@@ -7354,6 +7975,13 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
     "node_modules/postcss-selector-matches": {
@@ -7378,6 +8006,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-selector-not": {
@@ -7402,6 +8034,10 @@
       },
       "engines": {
         "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-selector-parser": {
@@ -7510,6 +8146,9 @@
       "dev": true,
       "engines": {
         "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/pretty-hrtime": {
@@ -7571,7 +8210,21 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
     },
     "node_modules/randombytes": {
       "version": "2.1.0",
@@ -7771,6 +8424,9 @@
       "dependencies": {
         "is-core-module": "^2.1.0",
         "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/resolve-cwd": {
@@ -7943,6 +8599,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "peerDependencies": {
+        "postcss": "8.x"
       }
     },
     "node_modules/rollup-plugin-postcss/node_modules/ansi-styles": {
@@ -7955,6 +8614,9 @@
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/rollup-plugin-postcss/node_modules/chalk": {
@@ -7968,6 +8630,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
     "node_modules/rollup-plugin-postcss/node_modules/color-convert": {
@@ -8004,6 +8669,9 @@
       "dev": true,
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/rollup-plugin-postcss/node_modules/supports-color": {
@@ -8028,6 +8696,9 @@
         "jest-worker": "^26.2.1",
         "serialize-javascript": "^4.0.0",
         "terser": "^5.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0"
       }
     },
     "node_modules/rollup-plugin-typescript2": {
@@ -8041,6 +8712,10 @@
         "fs-extra": "8.1.0",
         "resolve": "1.17.0",
         "tslib": "2.0.1"
+      },
+      "peerDependencies": {
+        "rollup": ">=1.26.3",
+        "typescript": ">=2.4.0"
       }
     },
     "node_modules/rollup-plugin-typescript2/node_modules/fs-extra": {
@@ -8062,7 +8737,7 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
       "dev": true,
-      "dependencies": {
+      "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
     },
@@ -8073,6 +8748,9 @@
       "dev": true,
       "dependencies": {
         "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/rollup-plugin-typescript2/node_modules/tslib": {
@@ -8110,6 +8788,20 @@
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
       "dependencies": {
         "queue-microtask": "^1.2.2"
       }
@@ -8363,6 +9055,7 @@
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
       "dev": true
     },
     "node_modules/stack-utils": {
@@ -8577,13 +9270,14 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.9.0.tgz",
-      "integrity": "sha512-h5hxa23sCdpzcye/7b8YqbE5OwKca/ni0RQz1uRX3tGh8haaGHqcuSqbGRybuAKNdntZ0mDgFNXPJ48xQ2RXKQ==",
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.1.tgz",
+      "integrity": "sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==",
       "dev": true,
       "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
         "source-map-support": "~0.5.20"
       },
       "bin": {
@@ -8599,15 +9293,6 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
-    "node_modules/terser/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/time-zone": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/time-zone/-/time-zone-1.0.0.tgz",
@@ -8962,6 +9647,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
     "node_modules/wrap-ansi/node_modules/ansi-styles": {
@@ -8974,6 +9662,9 @@
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/wrap-ansi/node_modules/color-convert": {
@@ -10313,6 +11004,55 @@
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
       "dev": true
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -11079,9 +11819,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001344",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz",
-      "integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==",
+      "version": "1.0.30001431",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
+      "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
       "dev": true
     },
     "chalk": {
@@ -11245,6 +11985,12 @@
       "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
       "dev": true
     },
+    "colorjs.io": {
+      "version": "0.4.1-patch.1",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.1-patch.1.tgz",
+      "integrity": "sha512-7UWunVDvnUtWRvGD0hEuGyxIvZvw4QbV8/Hz5fhePZdzyvZ8/Ze3mVGxa/8B084jZGBKJDX0ZwHPL/FDn7PZZA==",
+      "dev": true
+    },
     "commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -12249,7 +12995,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -12691,9 +13438,9 @@
       }
     },
     "loader-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
       "dev": true,
       "requires": {
         "big.js": "^5.2.2",
@@ -13142,18 +13889,18 @@
       "dev": true
     },
     "minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
     },
     "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
       "dev": true
     },
     "mri": {
@@ -13169,9 +13916,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.1.28",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.28.tgz",
-      "integrity": "sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
       "dev": true
     },
     "node-releases": {
@@ -14411,7 +15158,8 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -15786,13 +16534,14 @@
       "dev": true
     },
     "terser": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.9.0.tgz",
-      "integrity": "sha512-h5hxa23sCdpzcye/7b8YqbE5OwKca/ni0RQz1uRX3tGh8haaGHqcuSqbGRybuAKNdntZ0mDgFNXPJ48xQ2RXKQ==",
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.1.tgz",
+      "integrity": "sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==",
       "dev": true,
       "requires": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
         "source-map-support": "~0.5.20"
       },
       "dependencies": {
@@ -15801,12 +16550,6 @@
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
           "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
           "dev": true
-        },
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
         }
       }
     },
diff --git a/package.json b/package.json
index 022a1975..6ae587d1 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "name": "open-props",
   "author": "Adam Argyle",
   "license": "MIT",
-  "version": "1.4.25",
+  "version": "1.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/argyleink/open-props"
@@ -60,6 +60,12 @@
     "./blue": "./blue.min.css",
     "./blue-hsl": "./blue-hsl.min.css",
     "./borders": "./borders.min.css",
+    "./brown": "./brown.min.css",
+    "./brown-hsl": "./brown-hsl.min.css",
+    "./camo": "./camo.min.css",
+    "./camo-hsl": "./camo-hsl.min.css",
+    "./choco": "./choco.min.css",
+    "./choco-hsl": "./choco-hsl.min.css",
     "./colors": "./colors.min.css",
     "./colors-hsl": "./colors-hsl.min.css",
     "./cyan": "./cyan.min.css",
@@ -67,14 +73,14 @@
     "./easings": "./easings.min.css",
     "./fonts": "./fonts.min.css",
     "./gradients": "./gradients.min.css",
-    "./grape": "./grape.min.css",
-    "./grape-hsl": "./grape-hsl.min.css",
     "./gray": "./gray.min.css",
     "./gray-hsl": "./gray-hsl.min.css",
     "./green": "./green.min.css",
     "./green-hsl": "./green-hsl.min.css",
     "./indigo": "./indigo.min.css",
     "./indigo-hsl": "./indigo-hsl.min.css",
+    "./jungle": "./jungle.min.css",
+    "./jungle-hsl": "./jungle-hsl.min.css",
     "./lime": "./lime.min.css",
     "./lime-hsl": "./lime-hsl.min.css",
     "./masks/edges": "./masks.edges.min.css",
@@ -84,10 +90,16 @@
     "./orange-hsl": "./orange-hsl.min.css",
     "./pink": "./pink.min.css",
     "./pink-hsl": "./pink-hsl.min.css",
+    "./purple": "./purple.min.css",
+    "./purple-hsl": "./purple-hsl.min.css",
     "./red": "./red.min.css",
     "./red-hsl": "./red-hsl.min.css",
+    "./sand": "./sand.min.css",
+    "./sand-hsl": "./sand-hsl.min.css",
     "./shadows": "./shadows.min.css",
     "./sizes": "./sizes.min.css",
+    "./stone": "./stone.min.css",
+    "./stone-hsl": "./stone-hsl.min.css",
     "./teal": "./teal.min.css",
     "./teal-hsl": "./teal-hsl.min.css",
     "./violet": "./violet.min.css",
@@ -102,6 +114,12 @@
     "./shadow/blue": "./blue.shadow.min.css",
     "./shadow/blue-hsl": "./blue-hsl.shadow.min.css",
     "./shadow/borders": "./borders.shadow.min.css",
+    "./shadow/brown": "./brown.shadow.min.css",
+    "./shadow/brown-hsl": "./brown-hsl.shadow.min.css",
+    "./shadow/camo": "./camo.shadow.min.css",
+    "./shadow/camo-hsl": "./camo-hsl.shadow.min.css",
+    "./shadow/choco": "./choco.shadow.min.css",
+    "./shadow/choco-hsl": "./choco-hsl.shadow.min.css",
     "./shadow/colors": "./colors.shadow.min.css",
     "./shadow/colors-hsl": "./colors-hsl.shadow.min.css",
     "./shadow/cyan": "./cyan.shadow.min.css",
@@ -109,14 +127,14 @@
     "./shadow/easings": "./easings.shadow.min.css",
     "./shadow/fonts": "./fonts.shadow.min.css",
     "./shadow/gradients": "./gradients.shadow.min.css",
-    "./shadow/grape": "./grape.shadow.min.css",
-    "./shadow/grape-hsl": "./grape-hsl.shadow.min.css",
     "./shadow/gray": "./gray.shadow.min.css",
     "./shadow/gray-hsl": "./gray-hsl.shadow.min.css",
     "./shadow/green": "./green.shadow.min.css",
     "./shadow/green-hsl": "./green-hsl.shadow.min.css",
     "./shadow/indigo": "./indigo.shadow.min.css",
     "./shadow/indigo-hsl": "./indigo-hsl.shadow.min.css",
+    "./shadow/jungle": "./jungle.shadow.min.css",
+    "./shadow/jungle-hsl": "./jungle-hsl.shadow.min.css",
     "./shadow/lime": "./lime.shadow.min.css",
     "./shadow/lime-hsl": "./lime-hsl.shadow.min.css",
     "./shadow/media": "./media.shadow.min.css",
@@ -124,10 +142,16 @@
     "./shadow/orange-hsl": "./orange-hsl.shadow.min.css",
     "./shadow/pink": "./pink.shadow.min.css",
     "./shadow/pink-hsl": "./pink-hsl.shadow.min.css",
+    "./shadow/purple": "./purple.shadow.min.css",
+    "./shadow/purple-hsl": "./purple-hsl.shadow.min.css",
     "./shadow/red": "./red.shadow.min.css",
     "./shadow/red-hsl": "./red-hsl.shadow.min.css",
+    "./shadow/sand": "./sand.shadow.min.css",
+    "./shadow/sand-hsl": "./sand-hsl.shadow.min.css",
     "./shadow/shadows": "./shadows.shadow.min.css",
     "./shadow/sizes": "./sizes.shadow.min.css",
+    "./shadow/stone": "./stone.shadow.min.css",
+    "./shadow/stone-hsl": "./stone-hsl.shadow.min.css",
     "./shadow/teal": "./teal.shadow.min.css",
     "./shadow/teal-hsl": "./teal-hsl.shadow.min.css",
     "./shadow/violet": "./violet.shadow.min.css",
@@ -184,12 +208,14 @@
     "lib:colors-hsl": "postcss src/props.colors-hsl.css -o colors-hsl.min.css",
     "lib:colors:gray": "postcss src/props.gray.css -o gray.min.css",
     "lib:colors:gray-hsl": "postcss src/props.gray-hsl.css -o gray-hsl.min.css",
+    "lib:colors:stone": "postcss src/props.stone.css -o stone.min.css",
+    "lib:colors:stone-hsl": "postcss src/props.stone-hsl.css -o stone-hsl.min.css",
     "lib:colors:red": "postcss src/props.red.css -o red.min.css",
     "lib:colors:red-hsl": "postcss src/props.red-hsl.css -o red-hsl.min.css",
     "lib:colors:pink": "postcss src/props.pink.css -o pink.min.css",
     "lib:colors:pink-hsl": "postcss src/props.pink-hsl.css -o pink-hsl.min.css",
-    "lib:colors:grape": "postcss src/props.grape.css -o grape.min.css",
-    "lib:colors:grape-hsl": "postcss src/props.grape-hsl.css -o grape-hsl.min.css",
+    "lib:colors:purple": "postcss src/props.purple.css -o purple.min.css",
+    "lib:colors:purple-hsl": "postcss src/props.purple-hsl.css -o purple-hsl.min.css",
     "lib:colors:violet": "postcss src/props.violet.css -o violet.min.css",
     "lib:colors:violet-hsl": "postcss src/props.violet-hsl.css -o violet-hsl.min.css",
     "lib:colors:indigo": "postcss src/props.indigo.css -o indigo.min.css",
@@ -208,6 +234,16 @@
     "lib:colors:yellow-hsl": "postcss src/props.yellow-hsl.css -o yellow-hsl.min.css",
     "lib:colors:orange": "postcss src/props.orange.css -o orange.min.css",
     "lib:colors:orange-hsl": "postcss src/props.orange-hsl.css -o orange-hsl.min.css",
+    "lib:colors:choco": "postcss src/props.choco.css -o choco.min.css",
+    "lib:colors:choco-hsl": "postcss src/props.choco-hsl.css -o choco-hsl.min.css",
+    "lib:colors:brown": "postcss src/props.brown.css -o brown.min.css",
+    "lib:colors:brown-hsl": "postcss src/props.brown-hsl.css -o brown-hsl.min.css",
+    "lib:colors:sand": "postcss src/props.sand.css -o sand.min.css",
+    "lib:colors:sand-hsl": "postcss src/props.sand-hsl.css -o sand-hsl.min.css",
+    "lib:colors:camo": "postcss src/props.camo.css -o camo.min.css",
+    "lib:colors:camo-hsl": "postcss src/props.camo-hsl.css -o camo-hsl.min.css",
+    "lib:colors:jungle": "postcss src/props.jungle.css -o jungle.min.css",
+    "lib:colors:jungle-hsl": "postcss src/props.jungle-hsl.css -o jungle-hsl.min.css",
     "shadow:all": "postcss src/shadow.index.css -o open-props.shadow.min.css",
     "shadow:animations": "postcss src/shadow.props.animations.css -o animations.shadow.min.css",
     "shadow:aspects": "postcss src/shadow.props.aspects.css -o aspects.shadow.min.css",
@@ -222,12 +258,14 @@
     "shadow:colors-hsl": "postcss src/shadow.props.colors-hsl.css -o colors-hsl.shadow.min.css",
     "shadow:colors:gray": "postcss src/shadow.props.gray.css -o gray.shadow.min.css",
     "shadow:colors:gray-hsl": "postcss src/shadow.props.gray-hsl.css -o gray-hsl.shadow.min.css",
+    "shadow:colors:stone": "postcss src/shadow.props.stone.css -o stone.shadow.min.css",
+    "shadow:colors:stone-hsl": "postcss src/shadow.props.stone-hsl.css -o stone-hsl.shadow.min.css",
     "shadow:colors:red": "postcss src/shadow.props.red.css -o red.shadow.min.css",
     "shadow:colors:red-hsl": "postcss src/shadow.props.red-hsl.css -o red-hsl.shadow.min.css",
     "shadow:colors:pink": "postcss src/shadow.props.pink.css -o pink.shadow.min.css",
     "shadow:colors:pink-hsl": "postcss src/shadow.props.pink-hsl.css -o pink-hsl.shadow.min.css",
-    "shadow:colors:grape": "postcss src/shadow.props.grape.css -o grape.shadow.min.css",
-    "shadow:colors:grape-hsl": "postcss src/shadow.props.grape-hsl.css -o grape-hsl.shadow.min.css",
+    "shadow:colors:purple": "postcss src/shadow.props.purple.css -o purple.shadow.min.css",
+    "shadow:colors:purple-hsl": "postcss src/shadow.props.purple-hsl.css -o purple-hsl.shadow.min.css",
     "shadow:colors:violet": "postcss src/shadow.props.violet.css -o violet.shadow.min.css",
     "shadow:colors:violet-hsl": "postcss src/shadow.props.violet-hsl.css -o violet-hsl.shadow.min.css",
     "shadow:colors:indigo": "postcss src/shadow.props.indigo.css -o indigo.shadow.min.css",
@@ -245,10 +283,21 @@
     "shadow:colors:yellow": "postcss src/shadow.props.yellow.css -o yellow.shadow.min.css",
     "shadow:colors:yellow-hsl": "postcss src/shadow.props.yellow-hsl.css -o yellow-hsl.shadow.min.css",
     "shadow:colors:orange": "postcss src/shadow.props.orange.css -o orange.shadow.min.css",
-    "shadow:colors:orange-hsl": "postcss src/shadow.props.orange-hsl.css -o orange-hsl.shadow.min.css"
+    "shadow:colors:orange-hsl": "postcss src/shadow.props.orange-hsl.css -o orange-hsl.shadow.min.css",
+    "shadow:colors:choco": "postcss src/shadow.props.choco.css -o choco.shadow.min.css",
+    "shadow:colors:choco-hsl": "postcss src/shadow.props.choco-hsl.css -o choco-hsl.shadow.min.css",
+    "shadow:colors:brown": "postcss src/shadow.props.brown.css -o brown.shadow.min.css",
+    "shadow:colors:brown-hsl": "postcss src/shadow.props.brown-hsl.css -o brown-hsl.shadow.min.css",
+    "shadow:colors:sand": "postcss src/shadow.props.sand.css -o sand.shadow.min.css",
+    "shadow:colors:sand-hsl": "postcss src/shadow.props.sand-hsl.css -o sand-hsl.shadow.min.css",
+    "shadow:colors:camo": "postcss src/shadow.props.camo.css -o camo.shadow.min.css",
+    "shadow:colors:camo-hsl": "postcss src/shadow.props.camo-hsl.css -o camo-hsl.shadow.min.css",
+    "shadow:colors:jungle": "postcss src/shadow.props.jungle.css -o jungle.shadow.min.css",
+    "shadow:colors:jungle-hsl": "postcss src/shadow.props.jungle-hsl.css -o jungle-hsl.shadow.min.css"
   },
   "devDependencies": {
     "ava": "^3.15.0",
+    "colorjs.io": "^0.4.1-patch.1",
     "concurrently": "^7.2.2",
     "cssnano": "^5.1.10",
     "json": "^11.0.0",
diff --git a/src/extra/buttons.css b/src/extra/buttons.css
index 687a3aa9..26e5c9af 100644
--- a/src/extra/buttons.css
+++ b/src/extra/buttons.css
@@ -1,4 +1,5 @@
 @import "../props.media.css";
+@import "../props.gray-hsl.css";
 
 :where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]),
 :where(input[type="file"])::-webkit-file-upload-button,
@@ -14,8 +15,8 @@
   --_border: var(--surface-3);
   
   --_highlight-size: 0;
-  --_highlight-light: hsl(210 10% 71% / 25%);
-  --_highlight-dark: hsl(210 10% 5% / 25%);
+  --_highlight-light: hsl(var(--gray-5-hsl) / 25%);
+  --_highlight-dark: hsl(var(--gray-12-hsl) / 25%);
   --_highlight: var(--_highlight-light);
   
   --_ink-shadow-light: 0 1px 0 var(--gray-3);
diff --git a/src/extra/buttons.dark.css b/src/extra/buttons.dark.css
index 5f945420..5f892cb7 100644
--- a/src/extra/buttons.dark.css
+++ b/src/extra/buttons.dark.css
@@ -1,4 +1,5 @@
 @import "../props.media.css";
+@import "../props.gray-hsl.css";
 
 :where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]),
 :where(input[type="file"])::-webkit-file-upload-button,
@@ -10,7 +11,7 @@
   --_bg: var(--surface-3);
   --_border: var(--surface-3);
   --_highlight-size: 0;
-  --_highlight: hsl(210 10% 5% / 25%);
+  --_highlight: hsl(var(--gray-12-hsl) / 25%);
   --_ink-shadow: 0 1px 0 var(--surface-1);
   
   --_icon-size: 2ch;
diff --git a/src/extra/buttons.light.css b/src/extra/buttons.light.css
index 79f31d2b..2c3329a1 100644
--- a/src/extra/buttons.light.css
+++ b/src/extra/buttons.light.css
@@ -1,4 +1,5 @@
 @import "../props.media.css";
+@import "../props.gray-hsl.css";
 
 :where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]),
 :where(input[type="file"])::-webkit-file-upload-button,
@@ -11,7 +12,7 @@
   --_border: var(--surface-3);
   
   --_highlight-size: 0;
-  --_highlight: hsl(210 10% 71% / 25%);
+  --_highlight: hsl(var(--gray-5-hsl) / 25%);
   
   --_ink-shadow: 0 1px 0 var(--gray-3);
   
diff --git a/src/extra/normalize.css b/src/extra/normalize.css
index fb9aec0f..8e0cdad1 100644
--- a/src/extra/normalize.css
+++ b/src/extra/normalize.css
@@ -15,4 +15,8 @@
     --shadow-strength: 10%;
     --shadow-color: 220 40% 2%;
   }
+
+  ::placeholder {
+    color: var(--gray-6);
+  }
 }
\ No newline at end of file
diff --git a/src/extra/normalize.dark.css b/src/extra/normalize.dark.css
index 9c4ddeb1..e813d852 100644
--- a/src/extra/normalize.dark.css
+++ b/src/extra/normalize.dark.css
@@ -3,7 +3,7 @@
 @import "normalize.src.css";
 
 :where(textarea, select, input:not(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])) {
-  background-color: hsl(210deg 11% 10%);
+  background-color: var(--gray-10);
 }
 
 :where(dialog) {
@@ -13,4 +13,9 @@
 :where(html) {
   --shadow-strength: 10%;
   --shadow-color: 220 40% 2%;
+}
+
+::placeholder {
+  color: var(--gray-6);
+  opacity: .75;
 }
\ No newline at end of file
diff --git a/src/extra/normalize.src.css b/src/extra/normalize.src.css
index fecef4e9..94beac5f 100644
--- a/src/extra/normalize.src.css
+++ b/src/extra/normalize.src.css
@@ -92,7 +92,7 @@
     text-decoration-color: var(--indigo-2);
 
     &:where(:visited) {
-      text-decoration-color: var(--grape-2);
+      text-decoration-color: var(--purple-2);
     }
   }
 
@@ -118,6 +118,11 @@
   letter-spacing: inherit;
 }
 
+::placeholder {
+  color: var(--gray-7);
+  opacity: .75;
+}
+
 :where(input:not([type="range"]), textarea) {
   padding-inline: var(--size-2);
   padding-block: var(--size-1);
diff --git a/src/extra/theme.css b/src/extra/theme.css
index 2657637c..41e631b3 100644
--- a/src/extra/theme.css
+++ b/src/extra/theme.css
@@ -6,7 +6,7 @@
     color-scheme: dark;
 
     --link: var(--indigo-3);
-    --link-visited: var(--grape-3);
+    --link-visited: var(--purple-3);
 
     --text-1: var(--gray-1);
     --text-2: var(--gray-4);
diff --git a/src/extra/theme.dark.css b/src/extra/theme.dark.css
index 659fcf88..fe2bd27a 100644
--- a/src/extra/theme.dark.css
+++ b/src/extra/theme.dark.css
@@ -2,7 +2,7 @@
   color-scheme: dark;
 
   --link: var(--indigo-3);
-  --link-visited: var(--grape-3);
+  --link-visited: var(--purple-3);
 
   --text-1: var(--gray-1);
   --text-2: var(--gray-4);
diff --git a/src/extra/theme.dark.switch.css b/src/extra/theme.dark.switch.css
index 907be1bb..4a1d8015 100644
--- a/src/extra/theme.dark.switch.css
+++ b/src/extra/theme.dark.switch.css
@@ -8,7 +8,7 @@
   color-scheme: dark;
 
   --link: var(--indigo-3);
-  --link-visited: var(--grape-3);
+  --link-visited: var(--purple-3);
 
   --text-1: var(--gray-1);
   --text-2: var(--gray-4);
diff --git a/src/extra/theme.light.css b/src/extra/theme.light.css
index ecabed53..e0a5220a 100644
--- a/src/extra/theme.light.css
+++ b/src/extra/theme.light.css
@@ -4,7 +4,7 @@
   color-scheme: light;
 
   --link: var(--indigo-7);
-  --link-visited: var(--grape-7);
+  --link-visited: var(--purple-7);
 
   --text-1: var(--gray-9);
   --text-2: var(--gray-7);
diff --git a/src/extra/theme.light.switch.css b/src/extra/theme.light.switch.css
index 9b27349a..e113fc21 100644
--- a/src/extra/theme.light.switch.css
+++ b/src/extra/theme.light.switch.css
@@ -8,7 +8,7 @@
   color-scheme: light;
 
   --link: var(--indigo-7);
-  --link-visited: var(--grape-7);
+  --link-visited: var(--purple-7);
 
   --text-1: var(--gray-9);
   --text-2: var(--gray-7);
diff --git a/src/props.blue-hsl.css b/src/props.blue-hsl.css
index d78d4460..55515b90 100644
--- a/src/props.blue-hsl.css
+++ b/src/props.blue-hsl.css
@@ -9,4 +9,7 @@
   --blue-7-hsl: 208 77% 47%;
   --blue-8-hsl: 209 77% 43%;
   --blue-9-hsl: 209 75% 38%;
+  --blue-10-hsl: 209 76% 32%;
+  --blue-11-hsl: 209 75% 27%;
+  --blue-12-hsl: 209 76% 21%;
 }
diff --git a/src/props.blue.css b/src/props.blue.css
index 0572c4fe..925e31c0 100644
--- a/src/props.blue.css
+++ b/src/props.blue.css
@@ -9,4 +9,7 @@
   --blue-7: #1c7ed6;
   --blue-8: #1971c2;
   --blue-9: #1864ab;
+  --blue-10: #145591;
+  --blue-11: #114678;
+  --blue-12: #0d375e;
 }
diff --git a/src/props.brown-hsl.css b/src/props.brown-hsl.css
new file mode 100644
index 00000000..613189c7
--- /dev/null
+++ b/src/props.brown-hsl.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --brown-0-hsl: 36 60% 95%;
+  --brown-1-hsl: 32 44% 87%;
+  --brown-2-hsl: 28 40% 80%;
+  --brown-3-hsl: 28 38% 72%;
+  --brown-4-hsl: 27 36% 65%;
+  --brown-5-hsl: 28 34% 57%;
+  --brown-6-hsl: 28 32% 50%;
+  --brown-7-hsl: 28 35% 43%;
+  --brown-8-hsl: 28 38% 37%;
+  --brown-9-hsl: 27 42% 31%;
+  --brown-10-hsl: 25 48% 25%;
+  --brown-11-hsl: 23 58% 19%;
+  --brown-12-hsl: 22 57% 16%;
+}
diff --git a/src/props.brown.css b/src/props.brown.css
new file mode 100644
index 00000000..a27ad5be
--- /dev/null
+++ b/src/props.brown.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --brown-0: #faf4eb;
+  --brown-1: #ede0d1;
+  --brown-2: #e0cab7;
+  --brown-3: #d3b79e;
+  --brown-4: #c5a285;
+  --brown-5: #b78f6d;
+  --brown-6: #a87c56;
+  --brown-7: #956b47;
+  --brown-8: #825b3a;
+  --brown-9: #6f4b2d;
+  --brown-10: #5e3a21;
+  --brown-11: #4e2b15;
+  --brown-12: #422412;
+}
diff --git a/src/props.camo-hsl.css b/src/props.camo-hsl.css
new file mode 100644
index 00000000..8c4f4978
--- /dev/null
+++ b/src/props.camo-hsl.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --camo-0-hsl: 66 71% 95%;
+  --camo-1-hsl: 64 69% 77%;
+  --camo-2-hsl: 65 69% 59%;
+  --camo-3-hsl: 65 61% 51%;
+  --camo-4-hsl: 63 61% 46%;
+  --camo-5-hsl: 60 62% 41%;
+  --camo-6-hsl: 59 65% 36%;
+  --camo-7-hsl: 56 67% 33%;
+  --camo-8-hsl: 54 70% 29%;
+  --camo-9-hsl: 54 69% 25%;
+  --camo-10-hsl: 53 69% 22%;
+  --camo-11-hsl: 53 69% 18%;
+  --camo-12-hsl: 52 69% 13%;
+}
diff --git a/src/props.camo.css b/src/props.camo.css
new file mode 100644
index 00000000..5e8cd947
--- /dev/null
+++ b/src/props.camo.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --camo-0: #f9fbe7;
+  --camo-1: #e8ed9c;
+  --camo-2: #d2df4e;
+  --camo-3: #c2ce34;
+  --camo-4: #b5bb2e;
+  --camo-5: #a7a827;
+  --camo-6: #999621;
+  --camo-7: #8c851c;
+  --camo-8: #7e7416;
+  --camo-9: #6d6414;
+  --camo-10: #5d5411;
+  --camo-11: #4d460e;
+  --camo-12: #36300a;
+}
diff --git a/src/props.choco-hsl.css b/src/props.choco-hsl.css
new file mode 100644
index 00000000..7a5caa69
--- /dev/null
+++ b/src/props.choco-hsl.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --choco-0-hsl: 48 100% 93%;
+  --choco-1-hsl: 35 91% 86%;
+  --choco-2-hsl: 30 85% 79%;
+  --choco-3-hsl: 27 80% 72%;
+  --choco-4-hsl: 25 75% 65%;
+  --choco-5-hsl: 25 71% 57%;
+  --choco-6-hsl: 25 70% 49%;
+  --choco-7-hsl: 25 75% 42%;
+  --choco-8-hsl: 25 75% 37%;
+  --choco-9-hsl: 25 76% 31%;
+  --choco-10-hsl: 25 71% 26%;
+  --choco-11-hsl: 25 66% 21%;
+  --choco-12-hsl: 25 65% 15%;
+}
diff --git a/src/props.choco.css b/src/props.choco.css
new file mode 100644
index 00000000..96a621ae
--- /dev/null
+++ b/src/props.choco.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --choco-0: #fff8dc;
+  --choco-1: #fce1bc;
+  --choco-2: #f7ca9e;
+  --choco-3: #f1b280;
+  --choco-4: #e99b62;
+  --choco-5: #df8545;
+  --choco-6: #d46e25;
+  --choco-7: #bd5f1b;
+  --choco-8: #a45117;
+  --choco-9: #8a4513;
+  --choco-10: #703a13;
+  --choco-11: #572f12;
+  --choco-12: #3d210d;
+}
diff --git a/src/props.colors-hsl.css b/src/props.colors-hsl.css
index f24b8161..ddf7b1a4 100644
--- a/src/props.colors-hsl.css
+++ b/src/props.colors-hsl.css
@@ -9,6 +9,22 @@
   --gray-7-hsl: 210 9% 31%;
   --gray-8-hsl: 210 10% 23%;
   --gray-9-hsl: 210 11% 15%;
+  --gray-10-hsl: 214 14% 10%;
+  --gray-11-hsl: 216 16% 6%;
+  --gray-12-hsl: 210 40% 2%;
+  --stone-0-hsl: 200 27% 98%;
+  --stone-1-hsl: 210 18% 96%;
+  --stone-2-hsl: 210 11% 93%;
+  --stone-3-hsl: 192 9% 89%;
+  --stone-4-hsl: 197 8% 83%;
+  --stone-5-hsl: 202 5% 71%;
+  --stone-6-hsl: 200 3% 60%;
+  --stone-7-hsl: 180 2% 50%;
+  --stone-8-hsl: 160 1% 41%;
+  --stone-9-hsl: 90 1% 31%;
+  --stone-10-hsl: 60 3% 22%;
+  --stone-11-hsl: 60 6% 14%;
+  --stone-12-hsl: 60 6% 7%;
   --red-0-hsl: 0 100% 98%;
   --red-1-hsl: 0 100% 95%;
   --red-2-hsl: 0 100% 89%;
@@ -19,6 +35,9 @@
   --red-7-hsl: 0 86% 59%;
   --red-8-hsl: 0 74% 54%;
   --red-9-hsl: 0 65% 48%;
+  --red-10-hsl: 0 65% 42%;
+  --red-11-hsl: 0 65% 36%;
+  --red-12-hsl: 0 66% 30%;
   --pink-0-hsl: 336 100% 97%;
   --pink-1-hsl: 336 100% 94%;
   --pink-2-hsl: 338 91% 87%;
@@ -29,16 +48,22 @@
   --pink-7-hsl: 339 67% 52%;
   --pink-8-hsl: 339 68% 45%;
   --pink-9-hsl: 339 69% 38%;
-  --grape-0-hsl: 280 67% 96%;
-  --grape-1-hsl: 287 77% 92%;
-  --grape-2-hsl: 288 86% 86%;
-  --grape-3-hsl: 289 85% 78%;
-  --grape-4-hsl: 288 83% 71%;
-  --grape-5-hsl: 288 75% 64%;
-  --grape-6-hsl: 288 67% 58%;
-  --grape-7-hsl: 288 56% 52%;
-  --grape-8-hsl: 288 54% 46%;
-  --grape-9-hsl: 288 54% 40%;
+  --pink-10-hsl: 339 70% 32%;
+  --pink-11-hsl: 339 69% 27%;
+  --pink-12-hsl: 339 70% 21%;
+  --purple-0-hsl: 280 67% 96%;
+  --purple-1-hsl: 287 77% 92%;
+  --purple-2-hsl: 288 86% 86%;
+  --purple-3-hsl: 289 85% 78%;
+  --purple-4-hsl: 288 83% 71%;
+  --purple-5-hsl: 288 75% 64%;
+  --purple-6-hsl: 288 67% 58%;
+  --purple-7-hsl: 288 56% 52%;
+  --purple-8-hsl: 288 54% 46%;
+  --purple-9-hsl: 288 54% 40%;
+  --purple-10-hsl: 288 55% 33%;
+  --purple-11-hsl: 288 56% 26%;
+  --purple-12-hsl: 288 55% 20%;
   --violet-0-hsl: 252 100% 97%;
   --violet-1-hsl: 257 100% 93%;
   --violet-2-hsl: 256 100% 87%;
@@ -49,6 +74,9 @@
   --violet-7-hsl: 255 78% 60%;
   --violet-8-hsl: 255 67% 55%;
   --violet-9-hsl: 255 53% 50%;
+  --violet-10-hsl: 255 53% 44%;
+  --violet-11-hsl: 255 53% 37%;
+  --violet-12-hsl: 255 53% 31%;
   --indigo-0-hsl: 223 100% 96%;
   --indigo-1-hsl: 225 100% 93%;
   --indigo-2-hsl: 228 100% 86%;
@@ -59,6 +87,9 @@
   --indigo-7-hsl: 228 81% 59%;
   --indigo-8-hsl: 228 69% 55%;
   --indigo-9-hsl: 230 57% 50%;
+  --indigo-10-hsl: 230 57% 43%;
+  --indigo-11-hsl: 230 57% 37%;
+  --indigo-12-hsl: 230 57% 30%;
   --blue-0-hsl: 205 100% 95%;
   --blue-1-hsl: 206 100% 91%;
   --blue-2-hsl: 206 100% 82%;
@@ -69,6 +100,9 @@
   --blue-7-hsl: 208 77% 47%;
   --blue-8-hsl: 209 77% 43%;
   --blue-9-hsl: 209 75% 38%;
+  --blue-10-hsl: 209 76% 32%;
+  --blue-11-hsl: 209 75% 27%;
+  --blue-12-hsl: 209 76% 21%;
   --cyan-0-hsl: 185 81% 94%;
   --cyan-1-hsl: 185 84% 88%;
   --cyan-2-hsl: 186 77% 77%;
@@ -79,6 +113,9 @@
   --cyan-7-hsl: 188 83% 37%;
   --cyan-8-hsl: 189 85% 32%;
   --cyan-9-hsl: 189 85% 28%;
+  --cyan-10-hsl: 189 84% 23%;
+  --cyan-11-hsl: 190 84% 17%;
+  --cyan-12-hsl: 189 84% 12%;
   --teal-0-hsl: 161 79% 95%;
   --teal-1-hsl: 160 85% 87%;
   --teal-2-hsl: 162 78% 77%;
@@ -89,6 +126,9 @@
   --teal-7-hsl: 162 87% 35%;
   --teal-8-hsl: 162 88% 30%;
   --teal-9-hsl: 162 88% 26%;
+  --teal-10-hsl: 162 89% 21%;
+  --teal-11-hsl: 162 88% 16%;
+  --teal-12-hsl: 163 89% 11%;
   --green-0-hsl: 131 67% 95%;
   --green-1-hsl: 128 76% 90%;
   --green-2-hsl: 128 71% 82%;
@@ -99,6 +139,9 @@
   --green-7-hsl: 131 53% 46%;
   --green-8-hsl: 131 54% 40%;
   --green-9-hsl: 132 52% 35%;
+  --green-10-hsl: 132 52% 29%;
+  --green-11-hsl: 132 53% 22%;
+  --green-12-hsl: 131 53% 16%;
   --lime-0-hsl: 79 81% 94%;
   --lime-1-hsl: 80 83% 88%;
   --lime-2-hsl: 81 81% 80%;
@@ -109,6 +152,9 @@
   --lime-7-hsl: 85 79% 40%;
   --lime-8-hsl: 86 84% 36%;
   --lime-9-hsl: 85 84% 32%;
+  --lime-10-hsl: 85 83% 26%;
+  --lime-11-hsl: 85 83% 21%;
+  --lime-12-hsl: 85 84% 15%;
   --yellow-0-hsl: 50 100% 93%;
   --yellow-1-hsl: 49 100% 87%;
   --yellow-2-hsl: 49 100% 80%;
@@ -119,6 +165,9 @@
   --yellow-7-hsl: 39 100% 48%;
   --yellow-8-hsl: 35 100% 47%;
   --yellow-9-hsl: 31 100% 45%;
+  --yellow-10-hsl: 31 100% 35%;
+  --yellow-11-hsl: 31 100% 25%;
+  --yellow-12-hsl: 31 100% 20%;
   --orange-0-hsl: 34 100% 95%;
   --orange-1-hsl: 33 100% 90%;
   --orange-2-hsl: 33 100% 83%;
@@ -129,4 +178,72 @@
   --orange-7-hsl: 24 94% 50%;
   --orange-8-hsl: 21 90% 48%;
   --orange-9-hsl: 17 87% 45%;
+  --orange-10-hsl: 17 87% 40%;
+  --orange-11-hsl: 17 87% 32%;
+  --orange-12-hsl: 17 87% 27%;
+  --choco-0-hsl: 48 100% 93%;
+  --choco-1-hsl: 35 91% 86%;
+  --choco-2-hsl: 30 85% 79%;
+  --choco-3-hsl: 27 80% 72%;
+  --choco-4-hsl: 25 75% 65%;
+  --choco-5-hsl: 25 71% 57%;
+  --choco-6-hsl: 25 70% 49%;
+  --choco-7-hsl: 25 75% 42%;
+  --choco-8-hsl: 25 75% 37%;
+  --choco-9-hsl: 25 76% 31%;
+  --choco-10-hsl: 25 71% 26%;
+  --choco-11-hsl: 25 66% 21%;
+  --choco-12-hsl: 25 65% 15%;
+  --brown-0-hsl: 36 60% 95%;
+  --brown-1-hsl: 32 44% 87%;
+  --brown-2-hsl: 28 40% 80%;
+  --brown-3-hsl: 28 38% 72%;
+  --brown-4-hsl: 27 36% 65%;
+  --brown-5-hsl: 28 34% 57%;
+  --brown-6-hsl: 28 32% 50%;
+  --brown-7-hsl: 28 35% 43%;
+  --brown-8-hsl: 28 38% 37%;
+  --brown-9-hsl: 27 42% 31%;
+  --brown-10-hsl: 25 48% 25%;
+  --brown-11-hsl: 23 58% 19%;
+  --brown-12-hsl: 22 57% 16%;
+  --sand-0-hsl: 200 27% 98%;
+  --sand-1-hsl: 48 17% 88%;
+  --sand-2-hsl: 45 22% 79%;
+  --sand-3-hsl: 44 22% 69%;
+  --sand-4-hsl: 44 17% 62%;
+  --sand-5-hsl: 44 14% 54%;
+  --sand-6-hsl: 42 14% 46%;
+  --sand-7-hsl: 43 16% 39%;
+  --sand-8-hsl: 41 15% 32%;
+  --sand-9-hsl: 43 14% 26%;
+  --sand-10-hsl: 44 11% 20%;
+  --sand-11-hsl: 60 6% 14%;
+  --sand-12-hsl: 60 6% 7%;
+  --camo-0-hsl: 66 71% 95%;
+  --camo-1-hsl: 64 69% 77%;
+  --camo-2-hsl: 65 69% 59%;
+  --camo-3-hsl: 65 61% 51%;
+  --camo-4-hsl: 63 61% 46%;
+  --camo-5-hsl: 60 62% 41%;
+  --camo-6-hsl: 59 65% 36%;
+  --camo-7-hsl: 56 67% 33%;
+  --camo-8-hsl: 54 70% 29%;
+  --camo-9-hsl: 54 69% 25%;
+  --camo-10-hsl: 53 69% 22%;
+  --camo-11-hsl: 53 69% 18%;
+  --camo-12-hsl: 52 69% 13%;
+  --jungle-0-hsl: 74 98% 84%;
+  --jungle-1-hsl: 74 79% 78%;
+  --jungle-2-hsl: 74 68% 71%;
+  --jungle-3-hsl: 75 62% 65%;
+  --jungle-4-hsl: 74 56% 59%;
+  --jungle-5-hsl: 74 53% 53%;
+  --jungle-6-hsl: 74 55% 47%;
+  --jungle-7-hsl: 74 66% 42%;
+  --jungle-8-hsl: 74 79% 36%;
+  --jungle-9-hsl: 73 90% 32%;
+  --jungle-10-hsl: 73 91% 26%;
+  --jungle-11-hsl: 73 91% 21%;
+  --jungle-12-hsl: 73 90% 16%;
 }
diff --git a/src/props.colors-hsl.js b/src/props.colors-hsl.js
index 80cc1396..93f9dbc7 100644
--- a/src/props.colors-hsl.js
+++ b/src/props.colors-hsl.js
@@ -10,6 +10,25 @@ export const Gray = {
   '--gray-7-hsl': '210 9% 31%',
   '--gray-8-hsl': '210 10% 23%',
   '--gray-9-hsl': '210 11% 15%',
+  '--gray-10-hsl': '214 14% 10%',
+  '--gray-11-hsl': '216 16% 6%',
+  '--gray-12-hsl': '210 40% 2%',
+}
+
+export const Stone = {
+  '--stone-0-hsl': '200 27% 98%',
+  '--stone-1-hsl': '210 18% 96%',
+  '--stone-2-hsl': '210 11% 93%',
+  '--stone-3-hsl': '192 9% 89%',
+  '--stone-4-hsl': '197 8% 83%',
+  '--stone-5-hsl': '202 5% 71%',
+  '--stone-6-hsl': '200 3% 60%',
+  '--stone-7-hsl': '180 2% 50%',
+  '--stone-8-hsl': '160 1% 41%',
+  '--stone-9-hsl': '90 1% 31%',
+  '--stone-10-hsl': '60 3% 22%',
+  '--stone-11-hsl': '60 6% 14%',
+  '--stone-12-hsl': '60 6% 7%',
 }
 
 export const Red = {
@@ -23,6 +42,9 @@ export const Red = {
   '--red-7-hsl': '0 86% 59%',
   '--red-8-hsl': '0 74% 54%',
   '--red-9-hsl': '0 65% 48%',
+  '--red-10-hsl': '0 65% 42%',
+  '--red-11-hsl': '0 65% 36%',
+  '--red-12-hsl': '0 66% 30%',
 }
 
 export const Pink = {
@@ -36,19 +58,25 @@ export const Pink = {
   '--pink-7-hsl': '339 67% 52%',
   '--pink-8-hsl': '339 68% 45%',
   '--pink-9-hsl': '339 69% 38%',
+  '--pink-10-hsl': '339 70% 32%',
+  '--pink-11-hsl': '339 69% 27%',
+  '--pink-12-hsl': '339 70% 21%',
 }
 
-export const Grape = {
-  '--grape-0-hsl': '280 67% 96%',
-  '--grape-1-hsl': '287 77% 92%',
-  '--grape-2-hsl': '288 86% 86%',
-  '--grape-3-hsl': '289 85% 78%',
-  '--grape-4-hsl': '288 83% 71%',
-  '--grape-5-hsl': '288 75% 64%',
-  '--grape-6-hsl': '288 67% 58%',
-  '--grape-7-hsl': '288 56% 52%',
-  '--grape-8-hsl': '288 54% 46%',
-  '--grape-9-hsl': '288 54% 40%',
+export const Purple = {
+  '--purple-0-hsl': '280 67% 96%',
+  '--purple-1-hsl': '287 77% 92%',
+  '--purple-2-hsl': '288 86% 86%',
+  '--purple-3-hsl': '289 85% 78%',
+  '--purple-4-hsl': '288 83% 71%',
+  '--purple-5-hsl': '288 75% 64%',
+  '--purple-6-hsl': '288 67% 58%',
+  '--purple-7-hsl': '288 56% 52%',
+  '--purple-8-hsl': '288 54% 46%',
+  '--purple-9-hsl': '288 54% 40%',
+  '--purple-10-hsl': '288 55% 33%',
+  '--purple-11-hsl': '288 56% 26%',
+  '--purple-12-hsl': '288 55% 20%',
 }
 
 export const Violet = {
@@ -62,6 +90,9 @@ export const Violet = {
   '--violet-7-hsl': '255 78% 60%',
   '--violet-8-hsl': '255 67% 55%',
   '--violet-9-hsl': '255 53% 50%',
+  '--violet-10-hsl': '255 53% 44%',
+  '--violet-11-hsl': '255 53% 37%',
+  '--violet-12-hsl': '255 53% 31%',
 }
 
 export const Indigo = {
@@ -75,6 +106,9 @@ export const Indigo = {
   '--indigo-7-hsl': '228 81% 59%',
   '--indigo-8-hsl': '228 69% 55%',
   '--indigo-9-hsl': '230 57% 50%',
+  '--indigo-10-hsl': '230 57% 43%',
+  '--indigo-11-hsl': '230 57% 37%',
+  '--indigo-12-hsl': '230 57% 30%',
 }
 
 export const Blue = {
@@ -88,6 +122,9 @@ export const Blue = {
   '--blue-7-hsl': '208 77% 47%',
   '--blue-8-hsl': '209 77% 43%',
   '--blue-9-hsl': '209 75% 38%',
+  '--blue-10-hsl': '209 76% 32%',
+  '--blue-11-hsl': '209 75% 27%',
+  '--blue-12-hsl': '209 76% 21%',
 }
 
 export const Cyan = {
@@ -101,6 +138,9 @@ export const Cyan = {
   '--cyan-7-hsl': '188 83% 37%',
   '--cyan-8-hsl': '189 85% 32%',
   '--cyan-9-hsl': '189 85% 28%',
+  '--cyan-10-hsl': '189 84% 23%',
+  '--cyan-11-hsl': '190 84% 17%',
+  '--cyan-12-hsl': '189 84% 12%',
 }
 
 export const Teal = {
@@ -114,6 +154,9 @@ export const Teal = {
   '--teal-7-hsl': '162 87% 35%',
   '--teal-8-hsl': '162 88% 30%',
   '--teal-9-hsl': '162 88% 26%',
+  '--teal-10-hsl': '162 89% 21%',
+  '--teal-11-hsl': '162 88% 16%',
+  '--teal-12-hsl': '163 89% 11%',
 }
 
 export const Green = {
@@ -127,6 +170,9 @@ export const Green = {
   '--green-7-hsl': '131 53% 46%',
   '--green-8-hsl': '131 54% 40%',
   '--green-9-hsl': '132 52% 35%',
+  '--green-10-hsl': '132 52% 29%',
+  '--green-11-hsl': '132 53% 22%',
+  '--green-12-hsl': '131 53% 16%',
 }
 
 export const Lime = {
@@ -140,6 +186,9 @@ export const Lime = {
   '--lime-7-hsl': '85 79% 40%',
   '--lime-8-hsl': '86 84% 36%',
   '--lime-9-hsl': '85 84% 32%',
+  '--lime-10-hsl': '85 83% 26%',
+  '--lime-11-hsl': '85 83% 21%',
+  '--lime-12-hsl': '85 84% 15%',
 }
 
 export const Yellow = {
@@ -153,6 +202,9 @@ export const Yellow = {
   '--yellow-7-hsl': '39 100% 48%',
   '--yellow-8-hsl': '35 100% 47%',
   '--yellow-9-hsl': '31 100% 45%',
+  '--yellow-10-hsl': '31 100% 35%',
+  '--yellow-11-hsl': '31 100% 25%',
+  '--yellow-12-hsl': '31 100% 20%',
 }
 
 export const Orange = {
@@ -166,13 +218,97 @@ export const Orange = {
   '--orange-7-hsl': '24 94% 50%',
   '--orange-8-hsl': '21 90% 48%',
   '--orange-9-hsl': '17 87% 45%',
+  '--orange-10-hsl': '17 87% 40%',
+  '--orange-11-hsl': '17 87% 32%',
+  '--orange-12-hsl': '17 87% 27%',
+}
+
+export const Choco = {
+  '--choco-0-hsl': '48 100% 93%',
+  '--choco-1-hsl': '35 91% 86%',
+  '--choco-2-hsl': '30 85% 79%',
+  '--choco-3-hsl': '27 80% 72%',
+  '--choco-4-hsl': '25 75% 65%',
+  '--choco-5-hsl': '25 71% 57%',
+  '--choco-6-hsl': '25 70% 49%',
+  '--choco-7-hsl': '25 75% 42%',
+  '--choco-8-hsl': '25 75% 37%',
+  '--choco-9-hsl': '25 76% 31%',
+  '--choco-10-hsl': '25 71% 26%',
+  '--choco-11-hsl': '25 66% 21%',
+  '--choco-12-hsl': '25 65% 15%',
+}
+
+export const Brown = {
+  '--brown-0-hsl': '36 60% 95%',
+  '--brown-1-hsl': '32 44% 87%',
+  '--brown-2-hsl': '28 40% 80%',
+  '--brown-3-hsl': '28 38% 72%',
+  '--brown-4-hsl': '27 36% 65%',
+  '--brown-5-hsl': '28 34% 57%',
+  '--brown-6-hsl': '28 32% 50%',
+  '--brown-7-hsl': '28 35% 43%',
+  '--brown-8-hsl': '28 38% 37%',
+  '--brown-9-hsl': '27 42% 31%',
+  '--brown-10-hsl': '25 48% 25%',
+  '--brown-11-hsl': '23 58% 19%',
+  '--brown-12-hsl': '22 57% 16%',
+}
+
+export const Sand = {
+  '--sand-0-hsl': '200 27% 98%',
+  '--sand-1-hsl': '48 17% 88%',
+  '--sand-2-hsl': '45 22% 79%',
+  '--sand-3-hsl': '44 22% 69%',
+  '--sand-4-hsl': '44 17% 62%',
+  '--sand-5-hsl': '44 14% 54%',
+  '--sand-6-hsl': '42 14% 46%',
+  '--sand-7-hsl': '43 16% 39%',
+  '--sand-8-hsl': '41 15% 32%',
+  '--sand-9-hsl': '43 14% 26%',
+  '--sand-10-hsl': '44 11% 20%',
+  '--sand-11-hsl': '60 6% 14%',
+  '--sand-12-hsl': '60 6% 7%',
+}
+
+export const Camo = {
+  '--camo-0-hsl': '66 71% 95%',
+  '--camo-1-hsl': '64 69% 77%',
+  '--camo-2-hsl': '65 69% 59%',
+  '--camo-3-hsl': '65 61% 51%',
+  '--camo-4-hsl': '63 61% 46%',
+  '--camo-5-hsl': '60 62% 41%',
+  '--camo-6-hsl': '59 65% 36%',
+  '--camo-7-hsl': '56 67% 33%',
+  '--camo-8-hsl': '54 70% 29%',
+  '--camo-9-hsl': '54 69% 25%',
+  '--camo-10-hsl': '53 69% 22%',
+  '--camo-11-hsl': '53 69% 18%',
+  '--camo-12-hsl': '52 69% 13%',
+}
+
+export const Jungle = {
+  '--jungle-0-hsl': '74 98% 84%',
+  '--jungle-1-hsl': '74 79% 78%',
+  '--jungle-2-hsl': '74 68% 71%',
+  '--jungle-3-hsl': '75 62% 65%',
+  '--jungle-4-hsl': '74 56% 59%',
+  '--jungle-5-hsl': '74 53% 53%',
+  '--jungle-6-hsl': '74 55% 47%',
+  '--jungle-7-hsl': '74 66% 42%',
+  '--jungle-8-hsl': '74 79% 36%',
+  '--jungle-9-hsl': '73 90% 32%',
+  '--jungle-10-hsl': '73 91% 26%',
+  '--jungle-11-hsl': '73 91% 21%',
+  '--jungle-12-hsl': '73 90% 16%',
 }
 
 const ColorsHSL = {
   ...Gray,
+  ...Stone,
   ...Red,
   ...Pink,
-  ...Grape,
+  ...Purple,
   ...Violet,
   ...Indigo,
   ...Blue,
@@ -182,6 +318,11 @@ const ColorsHSL = {
   ...Lime,
   ...Yellow,
   ...Orange,
+  ...Choco,
+  ...Brown,
+  ...Sand,
+  ...Camo,
+  ...Jungle,
 }
 
 export default ColorsHSL
\ No newline at end of file
diff --git a/src/props.colors.css b/src/props.colors.css
index 5b6f5c12..5c7f2f1b 100644
--- a/src/props.colors.css
+++ b/src/props.colors.css
@@ -9,6 +9,22 @@
   --gray-7: #495057;
   --gray-8: #343a40;
   --gray-9: #212529;
+  --gray-10: #16191d;
+  --gray-11: #0d0f12;
+  --gray-12: #030507;
+  --stone-0: #f8fafb;
+  --stone-1: #f2f4f6;
+  --stone-2: #ebedef;
+  --stone-3: #e0e4e5;
+  --stone-4: #d1d6d8;
+  --stone-5: #b1b6b9;
+  --stone-6: #979b9d;
+  --stone-7: #7e8282;
+  --stone-8: #666968;
+  --stone-9: #50514f;
+  --stone-10: #3a3a37;
+  --stone-11: #252521;
+  --stone-12: #121210;
   --red-0: #fff5f5;
   --red-1: #ffe3e3;
   --red-2: #ffc9c9;
@@ -19,6 +35,9 @@
   --red-7: #f03e3e;
   --red-8: #e03131;
   --red-9: #c92a2a;
+  --red-10: #b02525;
+  --red-11: #962020;
+  --red-12: #7d1a1a;
   --pink-0: #fff0f6;
   --pink-1: #ffdeeb;
   --pink-2: #fcc2d7;
@@ -29,16 +48,22 @@
   --pink-7: #d6336c;
   --pink-8: #c2255c;
   --pink-9: #a61e4d;
-  --grape-0: #f8f0fc;
-  --grape-1: #f3d9fa;
-  --grape-2: #eebefa;
-  --grape-3: #e599f7;
-  --grape-4: #da77f2;
-  --grape-5: #cc5de8;
-  --grape-6: #be4bdb;
-  --grape-7: #ae3ec9;
-  --grape-8: #9c36b5;
-  --grape-9: #862e9c;
+  --pink-10: #8c1941;
+  --pink-11: #731536;
+  --pink-12: #59102a;
+  --purple-0: #f8f0fc;
+  --purple-1: #f3d9fa;
+  --purple-2: #eebefa;
+  --purple-3: #e599f7;
+  --purple-4: #da77f2;
+  --purple-5: #cc5de8;
+  --purple-6: #be4bdb;
+  --purple-7: #ae3ec9;
+  --purple-8: #9c36b5;
+  --purple-9: #862e9c;
+  --purple-10: #702682;
+  --purple-11: #5a1e69;
+  --purple-12: #44174f;
   --violet-0: #f3f0ff;
   --violet-1: #e5dbff;
   --violet-2: #d0bfff;
@@ -49,6 +74,9 @@
   --violet-7: #7048e8;
   --violet-8: #6741d9;
   --violet-9: #5f3dc4;
+  --violet-10: #5235ab;
+  --violet-11: #462d91;
+  --violet-12: #3a2578;
   --indigo-0: #edf2ff;
   --indigo-1: #dbe4ff;
   --indigo-2: #bac8ff;
@@ -59,6 +87,9 @@
   --indigo-7: #4263eb;
   --indigo-8: #3b5bdb;
   --indigo-9: #364fc7;
+  --indigo-10: #2f44ad;
+  --indigo-11: #283a94;
+  --indigo-12: #21307a;
   --blue-0: #e7f5ff;
   --blue-1: #d0ebff;
   --blue-2: #a5d8ff;
@@ -69,6 +100,9 @@
   --blue-7: #1c7ed6;
   --blue-8: #1971c2;
   --blue-9: #1864ab;
+  --blue-10: #145591;
+  --blue-11: #114678;
+  --blue-12: #0d375e;
   --cyan-0: #e3fafc;
   --cyan-1: #c5f6fa;
   --cyan-2: #99e9f2;
@@ -79,6 +113,9 @@
   --cyan-7: #1098ad;
   --cyan-8: #0c8599;
   --cyan-9: #0b7285;
+  --cyan-10: #095c6b;
+  --cyan-11: #074652;
+  --cyan-12: #053038;
   --teal-0: #e6fcf5;
   --teal-1: #c3fae8;
   --teal-2: #96f2d7;
@@ -89,6 +126,9 @@
   --teal-7: #0ca678;
   --teal-8: #099268;
   --teal-9: #087f5b;
+  --teal-10: #066649;
+  --teal-11: #054d37;
+  --teal-12: #033325;
   --green-0: #ebfbee;
   --green-1: #d3f9d8;
   --green-2: #b2f2bb;
@@ -99,6 +139,9 @@
   --green-7: #37b24d;
   --green-8: #2f9e44;
   --green-9: #2b8a3e;
+  --green-10: #237032;
+  --green-11: #1b5727;
+  --green-12: #133d1b;
   --lime-0: #f4fce3;
   --lime-1: #e9fac8;
   --lime-2: #d8f5a2;
@@ -109,6 +152,9 @@
   --lime-7: #74b816;
   --lime-8: #66a80f;
   --lime-9: #5c940d;
+  --lime-10: #4c7a0b;
+  --lime-11: #3c6109;
+  --lime-12: #2c4706;
   --yellow-0: #fff9db;
   --yellow-1: #fff3bf;
   --yellow-2: #ffec99;
@@ -119,6 +165,9 @@
   --yellow-7: #f59f00;
   --yellow-8: #f08c00;
   --yellow-9: #e67700;
+  --yellow-10: #b35c00;
+  --yellow-11: #804200;
+  --yellow-12: #663500;
   --orange-0: #fff4e6;
   --orange-1: #ffe8cc;
   --orange-2: #ffd8a8;
@@ -129,4 +178,72 @@
   --orange-7: #f76707;
   --orange-8: #e8590c;
   --orange-9: #d9480f;
+  --orange-10: #bf400d;
+  --orange-11: #99330b;
+  --orange-12: #802b09;
+  --choco-0: #fff8dc;
+  --choco-1: #fce1bc;
+  --choco-2: #f7ca9e;
+  --choco-3: #f1b280;
+  --choco-4: #e99b62;
+  --choco-5: #df8545;
+  --choco-6: #d46e25;
+  --choco-7: #bd5f1b;
+  --choco-8: #a45117;
+  --choco-9: #8a4513;
+  --choco-10: #703a13;
+  --choco-11: #572f12;
+  --choco-12: #3d210d;
+  --brown-0: #faf4eb;
+  --brown-1: #ede0d1;
+  --brown-2: #e0cab7;
+  --brown-3: #d3b79e;
+  --brown-4: #c5a285;
+  --brown-5: #b78f6d;
+  --brown-6: #a87c56;
+  --brown-7: #956b47;
+  --brown-8: #825b3a;
+  --brown-9: #6f4b2d;
+  --brown-10: #5e3a21;
+  --brown-11: #4e2b15;
+  --brown-12: #422412;
+  --sand-0: #f8fafb;
+  --sand-1: #e6e4dc;
+  --sand-2: #d5cfbd;
+  --sand-3: #c2b9a0;
+  --sand-4: #aea58c;
+  --sand-5: #9a9178;
+  --sand-6: #867c65;
+  --sand-7: #736a53;
+  --sand-8: #5f5746;
+  --sand-9: #4b4639;
+  --sand-10: #38352d;
+  --sand-11: #252521;
+  --sand-12: #121210;
+  --camo-0: #f9fbe7;
+  --camo-1: #e8ed9c;
+  --camo-2: #d2df4e;
+  --camo-3: #c2ce34;
+  --camo-4: #b5bb2e;
+  --camo-5: #a7a827;
+  --camo-6: #999621;
+  --camo-7: #8c851c;
+  --camo-8: #7e7416;
+  --camo-9: #6d6414;
+  --camo-10: #5d5411;
+  --camo-11: #4d460e;
+  --camo-12: #36300a;
+  --jungle-0: #ecfeb0;
+  --jungle-1: #def39a;
+  --jungle-2: #d0e884;
+  --jungle-3: #c2dd6e;
+  --jungle-4: #b5d15b;
+  --jungle-5: #a8c648;
+  --jungle-6: #9bbb36;
+  --jungle-7: #8fb024;
+  --jungle-8: #84a513;
+  --jungle-9: #7a9908;
+  --jungle-10: #658006;
+  --jungle-11: #516605;
+  --jungle-12: #3d4d04;
 }
diff --git a/src/props.colors.js b/src/props.colors.js
index 8da51676..0ac73cf1 100644
--- a/src/props.colors.js
+++ b/src/props.colors.js
@@ -10,6 +10,25 @@ export const Gray = {
   '--gray-7': '#495057',
   '--gray-8': '#343a40',
   '--gray-9': '#212529',
+  '--gray-10': '#16191d',
+  '--gray-11': '#0d0f12',
+  '--gray-12': '#030507',
+}
+
+export const Stone = {
+  '--stone-0': '#f8fafb',
+  '--stone-1': '#f2f4f6',
+  '--stone-2': '#ebedef',
+  '--stone-3': '#e0e4e5',
+  '--stone-4': '#d1d6d8',
+  '--stone-5': '#b1b6b9',
+  '--stone-6': '#979b9d',
+  '--stone-7': '#7e8282',
+  '--stone-8': '#666968',
+  '--stone-9': '#50514f',
+  '--stone-10': '#3a3a37',
+  '--stone-11': '#252521',
+  '--stone-12': '#121210',
 }
 
 export const Red = {
@@ -23,6 +42,9 @@ export const Red = {
   '--red-7': '#f03e3e',
   '--red-8': '#e03131',
   '--red-9': '#c92a2a',
+  '--red-10': '#b02525',
+  '--red-11': '#962020',
+  '--red-12': '#7d1a1a',
 }
 
 export const Pink = {
@@ -36,19 +58,25 @@ export const Pink = {
   '--pink-7': '#d6336c',
   '--pink-8': '#c2255c',
   '--pink-9': '#a61e4d',
+  '--pink-10': '#8c1941',
+  '--pink-11': '#731536',
+  '--pink-12': '#59102a',
 }
 
-export const Grape = {
-  '--grape-0': '#f8f0fc',
-  '--grape-1': '#f3d9fa',
-  '--grape-2': '#eebefa',
-  '--grape-3': '#e599f7',
-  '--grape-4': '#da77f2',
-  '--grape-5': '#cc5de8',
-  '--grape-6': '#be4bdb',
-  '--grape-7': '#ae3ec9',
-  '--grape-8': '#9c36b5',
-  '--grape-9': '#862e9c',
+export const Purple = {
+  '--purple-0': '#f8f0fc',
+  '--purple-1': '#f3d9fa',
+  '--purple-2': '#eebefa',
+  '--purple-3': '#e599f7',
+  '--purple-4': '#da77f2',
+  '--purple-5': '#cc5de8',
+  '--purple-6': '#be4bdb',
+  '--purple-7': '#ae3ec9',
+  '--purple-8': '#9c36b5',
+  '--purple-9': '#862e9c',
+  '--purple-10': '#702682',
+  '--purple-11': '#5a1e69',
+  '--purple-12': '#44174f',
 }
 
 export const Violet = {
@@ -62,6 +90,9 @@ export const Violet = {
   '--violet-7': '#7048e8',
   '--violet-8': '#6741d9',
   '--violet-9': '#5f3dc4',
+  '--violet-10': '#5235ab',
+  '--violet-11': '#462d91',
+  '--violet-12': '#3a2578',
 }
 
 export const Indigo = {
@@ -75,6 +106,9 @@ export const Indigo = {
   '--indigo-7': '#4263eb',
   '--indigo-8': '#3b5bdb',
   '--indigo-9': '#364fc7',
+  '--indigo-10': '#2f44ad',
+  '--indigo-11': '#283a94',
+  '--indigo-12': '#21307a',
 }
 
 export const Blue = {
@@ -88,6 +122,9 @@ export const Blue = {
   '--blue-7': '#1c7ed6',
   '--blue-8': '#1971c2',
   '--blue-9': '#1864ab',
+  '--blue-10': '#145591',
+  '--blue-11': '#114678',
+  '--blue-12': '#0d375e',
 }
 
 export const Cyan = {
@@ -101,6 +138,9 @@ export const Cyan = {
   '--cyan-7': '#1098ad',
   '--cyan-8': '#0c8599',
   '--cyan-9': '#0b7285',
+  '--cyan-10': '#095c6b',
+  '--cyan-11': '#074652',
+  '--cyan-12': '#053038',
 }
 
 export const Teal = {
@@ -114,6 +154,9 @@ export const Teal = {
   '--teal-7': '#0ca678',
   '--teal-8': '#099268',
   '--teal-9': '#087f5b',
+  '--teal-10': '#066649',
+  '--teal-11': '#054d37',
+  '--teal-12': '#033325',
 }
 
 export const Green = {
@@ -127,6 +170,9 @@ export const Green = {
   '--green-7': '#37b24d',
   '--green-8': '#2f9e44',
   '--green-9': '#2b8a3e',
+  '--green-10': '#237032',
+  '--green-11': '#1b5727',
+  '--green-12': '#133d1b',
 }
 
 export const Lime = {
@@ -140,6 +186,9 @@ export const Lime = {
   '--lime-7': '#74b816',
   '--lime-8': '#66a80f',
   '--lime-9': '#5c940d',
+  '--lime-10': '#4c7a0b',
+  '--lime-11': '#3c6109',
+  '--lime-12': '#2c4706',
 }
 
 export const Yellow = {
@@ -153,6 +202,9 @@ export const Yellow = {
   '--yellow-7': '#f59f00',
   '--yellow-8': '#f08c00',
   '--yellow-9': '#e67700',
+  '--yellow-10': '#b35c00',
+  '--yellow-11': '#804200',
+  '--yellow-12': '#663500',
 }
 
 export const Orange = {
@@ -166,6 +218,89 @@ export const Orange = {
   '--orange-7': '#f76707',
   '--orange-8': '#e8590c',
   '--orange-9': '#d9480f',
+  '--orange-10': '#bf400d',
+  '--orange-11': '#99330b',
+  '--orange-12': '#802b09',
+}
+
+export const Choco = {
+  '--choco-0': '#fff8dc',
+  '--choco-1': '#fce1bc',
+  '--choco-2': '#f7ca9e',
+  '--choco-3': '#f1b280',
+  '--choco-4': '#e99b62',
+  '--choco-5': '#df8545',
+  '--choco-6': '#d46e25',
+  '--choco-7': '#bd5f1b',
+  '--choco-8': '#a45117',
+  '--choco-9': '#8a4513',
+  '--choco-10': '#703a13',
+  '--choco-11': '#572f12',
+  '--choco-12': '#3d210d',
+}
+
+export const Brown = {
+  '--brown-0': '#faf4eb',
+  '--brown-1': '#ede0d1',
+  '--brown-2': '#e0cab7',
+  '--brown-3': '#d3b79e',
+  '--brown-4': '#c5a285',
+  '--brown-5': '#b78f6d',
+  '--brown-6': '#a87c56',
+  '--brown-7': '#956b47',
+  '--brown-8': '#825b3a',
+  '--brown-9': '#6f4b2d',
+  '--brown-10': '#5e3a21',
+  '--brown-11': '#4e2b15',
+  '--brown-12': '#422412',
+}
+
+export const Sand = {
+  '--sand-0': '#f8fafb',
+  '--sand-1': '#e6e4dc',
+  '--sand-2': '#d5cfbd',
+  '--sand-3': '#c2b9a0',
+  '--sand-4': '#aea58c',
+  '--sand-5': '#9a9178',
+  '--sand-6': '#867c65',
+  '--sand-7': '#736a53',
+  '--sand-8': '#5f5746',
+  '--sand-9': '#4b4639',
+  '--sand-10': '#38352d',
+  '--sand-11': '#252521',
+  '--sand-12': '#121210',
+}
+
+export const Camo = {
+  '--camo-0': '#f9fbe7',
+  '--camo-1': '#e8ed9c',
+  '--camo-2': '#d2df4e',
+  '--camo-3': '#c2ce34',
+  '--camo-4': '#b5bb2e',
+  '--camo-5': '#a7a827',
+  '--camo-6': '#999621',
+  '--camo-7': '#8c851c',
+  '--camo-8': '#7e7416',
+  '--camo-9': '#6d6414',
+  '--camo-10': '#5d5411',
+  '--camo-11': '#4d460e',
+  '--camo-12': '#36300a',
+}
+
+export const Jungle = {
+  '--jungle-0': '#ecfeb0',
+  '--jungle-1': '#def39a',
+  '--jungle-2': '#d0e884',
+  '--jungle-3': '#c2dd6e',
+  '--jungle-4': '#b5d15b',
+  '--jungle-5': '#a8c648',
+  '--jungle-6': '#9bbb36',
+  '--jungle-7': '#8fb024',
+  '--jungle-8': '#84a513',
+  '--jungle-9': '#7a9908',
+  '--jungle-10': '#658006',
+  '--jungle-11': '#516605',
+  '--jungle-12': '#3d4d04',
 }
 
 /* 
@@ -174,7 +309,7 @@ https://codepen.io/argyleink/pen/VwrKRrY?
   --gray: #adb5bd;
   --red: #ff6b6b;
   --pink: #f06595;
-  --grape: #cc5de8;
+  --purple: #cc5de8;
   --violet: #f3f0ff;
   --indigo: #5c7cfa;
   --blue: #339af0;
@@ -208,9 +343,10 @@ https://codepen.io/argyleink/pen/VwrKRrY?
 
 const Colors = {
   ...Gray,
+  ...Stone,
   ...Red,
   ...Pink,
-  ...Grape,
+  ...Purple,
   ...Violet,
   ...Indigo,
   ...Blue,
@@ -220,6 +356,11 @@ const Colors = {
   ...Lime,
   ...Yellow,
   ...Orange,
+  ...Choco,
+  ...Brown,
+  ...Sand,
+  ...Camo,
+  ...Jungle,
 }
 
 export default Colors
\ No newline at end of file
diff --git a/src/props.colors.src.js b/src/props.colors.src.js
index 840569cd..c6f97777 100644
--- a/src/props.colors.src.js
+++ b/src/props.colors.src.js
@@ -1,14 +1,62 @@
-const openColor = (await import('https://cdn.skypack.dev/open-color/open-color.js')).default
-const Color = (await import('https://colorjs.io/dist/color.esm.js')).default
+// Load `colar` and restructure
+// Result: colar.[hueName].[luminosityStep] => hexCode
+const colarURL =
+  "https://raw.githubusercontent.com/fchristant/colar/master/colar/colar.json"
+const colar = (await (await fetch(colarURL)).json()).reduce(
+  (root, { name, color }) => {
+    let [hueName, luminosityStep] = name.split("-")
 
-const colors = Object
-  .entries(openColor.theme.colors)
-  .filter(group => typeof group[1] === 'object')
+    hueName = hueName.toLowerCase()
+    luminosityStep = parseInt(luminosityStep)
 
-const customizeIncrements = num =>
-  num === '50'
-    ? num.replaceAll('50', '0')
-    : num.replaceAll('0', '')
+    const hue = root?.[hueName] ?? {}
+
+    return {
+      ...root,
+      [hueName]: { ...hue, [luminosityStep]: color.toLowerCase() },
+    }
+  },
+  {}
+)
+
+// Load `open-color` and restructure
+// Result: openColor.[hueName].[luminosityStep] => hexCode
+const openColor = Object.entries(
+  (await import("open-color/open-color.js")).default.theme.colors
+)
+  .filter((group) => typeof group[1] === "object")
+  .reduce(
+    (root, [hueName, luminosityStepsObject]) => ({
+      ...root,
+      [hueName]: Object.fromEntries(
+        Object.entries(luminosityStepsObject).map(([step, color]) => [
+          step.replace("00", "").replace("50", "0"),
+          color,
+        ])
+      ),
+    }),
+    {}
+  )
+
+// Combine `open-color` and `colar` palettes
+const colors = Object.entries({
+  // Extend `openColor.gray`
+  gray: {
+    ...openColor.gray,
+    10: "#16191d",
+    11: "#0d0f12",
+    12: "#030507",
+  },
+  // Use `colar.gray` as "stone"
+  stone: colar.gray,
+  // Use all other colors in `colar`
+  ...Object.fromEntries(
+    Object.entries(colar).filter(([hueName]) => hueName != "gray")
+  ),
+})
+
+
+const Color = (await import('colorjs.io')).default
 
 const hexTOhsl = hex =>
   new Color(hex).to('hsl')
@@ -21,15 +69,17 @@ const hexTOhsl = hex =>
     }, '')
 
 const capitalizeFirstLetter = string =>
-  string.charAt(0).toUpperCase() + string.slice(1);
+  string.charAt(0).toUpperCase() + string.slice(1)
 
 const groupedObject = colors.reduce((root, [color, shades]) => {
   let base = `--${color}-`
   root += `\n\nexport const ${capitalizeFirstLetter(color)} = {`
 
-  Object.entries(shades).forEach(([num, hex]) => 
+  Object.entries(shades).forEach(([num, hex]) =>
     root += `
-  ${base}${customizeIncrements(num)}-hsl: '${hexTOhsl(hex)}',`
+  '${base}${num}-hsl': '${hexTOhsl(hex)}',`
+  //   root += `
+  // '${base}${num}': '${hex}',`
   )
 
   root += '\n}'
@@ -40,9 +90,9 @@ const groupedObject = colors.reduce((root, [color, shades]) => {
 const channels = colors.reduce((root, [color, shades]) => {
   let base = `--${color}-`
 
-  Object.entries(shades).forEach(([num, hex]) => 
+  Object.entries(shades).forEach(([num, hex]) =>
     root += `
-    ${base}${customizeIncrements(num)}-hsl: '${hexTOhsl(hex)}',`
+    '${base}${num}-hsl': '${hexTOhsl(hex)}',`
   )
 
   return root
@@ -51,9 +101,9 @@ const channels = colors.reduce((root, [color, shades]) => {
 const vars = colors.reduce((root, [color, shades]) => {
   let base = `--${color}-`
 
-  Object.entries(shades).forEach(([num, hex]) => 
+  Object.entries(shades).forEach(([num, hex]) =>
     root += `
-    ${base}${customizeIncrements(num)}: ${hex};`
+    '${base}${num}': ${hex}`
   )
 
   return root
@@ -61,4 +111,4 @@ const vars = colors.reduce((root, [color, shades]) => {
 
 console.log(groupedObject)
 // console.log(vars)
-// console.log(channels)
\ No newline at end of file
+// console.log(channels)
diff --git a/src/props.cyan-hsl.css b/src/props.cyan-hsl.css
index 935d6a6c..b88afa2d 100644
--- a/src/props.cyan-hsl.css
+++ b/src/props.cyan-hsl.css
@@ -9,4 +9,7 @@
   --cyan-7-hsl: 188 83% 37%;
   --cyan-8-hsl: 189 85% 32%;
   --cyan-9-hsl: 189 85% 28%;
+  --cyan-10-hsl: 189 84% 23%;
+  --cyan-11-hsl: 190 84% 17%;
+  --cyan-12-hsl: 189 84% 12%;
 }
diff --git a/src/props.cyan.css b/src/props.cyan.css
index b1ecf649..e7e4a5bb 100644
--- a/src/props.cyan.css
+++ b/src/props.cyan.css
@@ -9,4 +9,7 @@
   --cyan-7: #1098ad;
   --cyan-8: #0c8599;
   --cyan-9: #0b7285;
+  --cyan-10: #095c6b;
+  --cyan-11: #074652;
+  --cyan-12: #053038;
 }
diff --git a/src/props.grape-hsl.css b/src/props.grape-hsl.css
deleted file mode 100644
index 0f23b89c..00000000
--- a/src/props.grape-hsl.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:where(html) {
-  --grape-0-hsl: 280 67% 96%;
-  --grape-1-hsl: 287 77% 92%;
-  --grape-2-hsl: 288 86% 86%;
-  --grape-3-hsl: 289 85% 78%;
-  --grape-4-hsl: 288 83% 71%;
-  --grape-5-hsl: 288 75% 64%;
-  --grape-6-hsl: 288 67% 58%;
-  --grape-7-hsl: 288 56% 52%;
-  --grape-8-hsl: 288 54% 46%;
-  --grape-9-hsl: 288 54% 40%;
-}
diff --git a/src/props.grape.css b/src/props.grape.css
deleted file mode 100644
index 84ae6d27..00000000
--- a/src/props.grape.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:where(html) {
-  --grape-0: #f8f0fc;
-  --grape-1: #f3d9fa;
-  --grape-2: #eebefa;
-  --grape-3: #e599f7;
-  --grape-4: #da77f2;
-  --grape-5: #cc5de8;
-  --grape-6: #be4bdb;
-  --grape-7: #ae3ec9;
-  --grape-8: #9c36b5;
-  --grape-9: #862e9c;
-}
diff --git a/src/props.gray-hsl.css b/src/props.gray-hsl.css
index 547830bf..ce0b5e2a 100644
--- a/src/props.gray-hsl.css
+++ b/src/props.gray-hsl.css
@@ -9,4 +9,7 @@
   --gray-7-hsl: 210 9% 31%;
   --gray-8-hsl: 210 10% 23%;
   --gray-9-hsl: 210 11% 15%;
+  --gray-10-hsl: 214 14% 10%;
+  --gray-11-hsl: 216 16% 6%;
+  --gray-12-hsl: 210 40% 2%;
 }
diff --git a/src/props.gray.css b/src/props.gray.css
index 3d176547..41fa64ef 100644
--- a/src/props.gray.css
+++ b/src/props.gray.css
@@ -9,4 +9,7 @@
   --gray-7: #495057;
   --gray-8: #343a40;
   --gray-9: #212529;
+  --gray-10: #16191d;
+  --gray-11: #0d0f12;
+  --gray-12: #030507;
 }
diff --git a/src/props.green-hsl.css b/src/props.green-hsl.css
index 90115a85..1fb906ca 100644
--- a/src/props.green-hsl.css
+++ b/src/props.green-hsl.css
@@ -9,4 +9,7 @@
   --green-7-hsl: 131 53% 46%;
   --green-8-hsl: 131 54% 40%;
   --green-9-hsl: 132 52% 35%;
+  --green-10-hsl: 132 52% 29%;
+  --green-11-hsl: 132 53% 22%;
+  --green-12-hsl: 131 53% 16%;
 }
diff --git a/src/props.green.css b/src/props.green.css
index 8dfd6db1..969817bb 100644
--- a/src/props.green.css
+++ b/src/props.green.css
@@ -9,4 +9,7 @@
   --green-7: #37b24d;
   --green-8: #2f9e44;
   --green-9: #2b8a3e;
+  --green-10: #237032;
+  --green-11: #1b5727;
+  --green-12: #133d1b;
 }
diff --git a/src/props.indigo-hsl.css b/src/props.indigo-hsl.css
index c2a4cd93..b256a315 100644
--- a/src/props.indigo-hsl.css
+++ b/src/props.indigo-hsl.css
@@ -9,4 +9,7 @@
   --indigo-7-hsl: 228 81% 59%;
   --indigo-8-hsl: 228 69% 55%;
   --indigo-9-hsl: 230 57% 50%;
+  --indigo-10-hsl: 230 57% 43%;
+  --indigo-11-hsl: 230 57% 37%;
+  --indigo-12-hsl: 230 57% 30%;
 }
diff --git a/src/props.indigo.css b/src/props.indigo.css
index ef5fc91a..be3ab58c 100644
--- a/src/props.indigo.css
+++ b/src/props.indigo.css
@@ -9,4 +9,7 @@
   --indigo-7: #4263eb;
   --indigo-8: #3b5bdb;
   --indigo-9: #364fc7;
+  --indigo-10: #2f44ad;
+  --indigo-11: #283a94;
+  --indigo-12: #21307a;
 }
diff --git a/src/props.jungle-hsl.css b/src/props.jungle-hsl.css
new file mode 100644
index 00000000..8722c1c6
--- /dev/null
+++ b/src/props.jungle-hsl.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --jungle-0-hsl: 74 98% 84%;
+  --jungle-1-hsl: 74 79% 78%;
+  --jungle-2-hsl: 74 68% 71%;
+  --jungle-3-hsl: 75 62% 65%;
+  --jungle-4-hsl: 74 56% 59%;
+  --jungle-5-hsl: 74 53% 53%;
+  --jungle-6-hsl: 74 55% 47%;
+  --jungle-7-hsl: 74 66% 42%;
+  --jungle-8-hsl: 74 79% 36%;
+  --jungle-9-hsl: 73 90% 32%;
+  --jungle-10-hsl: 73 91% 26%;
+  --jungle-11-hsl: 73 91% 21%;
+  --jungle-12-hsl: 73 90% 16%;
+}
diff --git a/src/props.jungle.css b/src/props.jungle.css
new file mode 100644
index 00000000..d0d94a40
--- /dev/null
+++ b/src/props.jungle.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --jungle-0: #ecfeb0;
+  --jungle-1: #def39a;
+  --jungle-2: #d0e884;
+  --jungle-3: #c2dd6e;
+  --jungle-4: #b5d15b;
+  --jungle-5: #a8c648;
+  --jungle-6: #9bbb36;
+  --jungle-7: #8fb024;
+  --jungle-8: #84a513;
+  --jungle-9: #7a9908;
+  --jungle-10: #658006;
+  --jungle-11: #516605;
+  --jungle-12: #3d4d04;
+}
diff --git a/src/props.lime-hsl.css b/src/props.lime-hsl.css
index db8fe78d..b998852b 100644
--- a/src/props.lime-hsl.css
+++ b/src/props.lime-hsl.css
@@ -9,4 +9,7 @@
   --lime-7-hsl: 85 79% 40%;
   --lime-8-hsl: 86 84% 36%;
   --lime-9-hsl: 85 84% 32%;
+  --lime-10-hsl: 85 83% 26%;
+  --lime-11-hsl: 85 83% 21%;
+  --lime-12-hsl: 85 84% 15%;
 }
diff --git a/src/props.lime.css b/src/props.lime.css
index 74321f77..d9e7893f 100644
--- a/src/props.lime.css
+++ b/src/props.lime.css
@@ -9,4 +9,7 @@
   --lime-7: #74b816;
   --lime-8: #66a80f;
   --lime-9: #5c940d;
+  --lime-10: #4c7a0b;
+  --lime-11: #3c6109;
+  --lime-12: #2c4706;
 }
diff --git a/src/props.orange-hsl.css b/src/props.orange-hsl.css
index aa66fff5..24d1d890 100644
--- a/src/props.orange-hsl.css
+++ b/src/props.orange-hsl.css
@@ -9,4 +9,7 @@
   --orange-7-hsl: 24 94% 50%;
   --orange-8-hsl: 21 90% 48%;
   --orange-9-hsl: 17 87% 45%;
+  --orange-10-hsl: 17 87% 40%;
+  --orange-11-hsl: 17 87% 32%;
+  --orange-12-hsl: 17 87% 27%;
 }
diff --git a/src/props.orange.css b/src/props.orange.css
index 9568a3bb..cec19756 100644
--- a/src/props.orange.css
+++ b/src/props.orange.css
@@ -9,4 +9,7 @@
   --orange-7: #f76707;
   --orange-8: #e8590c;
   --orange-9: #d9480f;
+  --orange-10: #bf400d;
+  --orange-11: #99330b;
+  --orange-12: #802b09;
 }
diff --git a/src/props.pink-hsl.css b/src/props.pink-hsl.css
index b33b8be8..61295f79 100644
--- a/src/props.pink-hsl.css
+++ b/src/props.pink-hsl.css
@@ -9,4 +9,7 @@
   --pink-7-hsl: 339 67% 52%;
   --pink-8-hsl: 339 68% 45%;
   --pink-9-hsl: 339 69% 38%;
+  --pink-10-hsl: 339 70% 32%;
+  --pink-11-hsl: 339 69% 27%;
+  --pink-12-hsl: 339 70% 21%;
 }
diff --git a/src/props.pink.css b/src/props.pink.css
index 747a758a..2daca992 100644
--- a/src/props.pink.css
+++ b/src/props.pink.css
@@ -9,4 +9,7 @@
   --pink-7: #d6336c;
   --pink-8: #c2255c;
   --pink-9: #a61e4d;
+  --pink-10: #8c1941;
+  --pink-11: #731536;
+  --pink-12: #59102a;
 }
diff --git a/src/props.purple-hsl.css b/src/props.purple-hsl.css
new file mode 100644
index 00000000..576a2472
--- /dev/null
+++ b/src/props.purple-hsl.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --purple-0-hsl: 280 67% 96%;
+  --purple-1-hsl: 287 77% 92%;
+  --purple-2-hsl: 288 86% 86%;
+  --purple-3-hsl: 289 85% 78%;
+  --purple-4-hsl: 288 83% 71%;
+  --purple-5-hsl: 288 75% 64%;
+  --purple-6-hsl: 288 67% 58%;
+  --purple-7-hsl: 288 56% 52%;
+  --purple-8-hsl: 288 54% 46%;
+  --purple-9-hsl: 288 54% 40%;
+  --purple-10-hsl: 288 55% 33%;
+  --purple-11-hsl: 288 56% 26%;
+  --purple-12-hsl: 288 55% 20%;
+}
diff --git a/src/props.purple.css b/src/props.purple.css
new file mode 100644
index 00000000..f61b8935
--- /dev/null
+++ b/src/props.purple.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --purple-0: #f8f0fc;
+  --purple-1: #f3d9fa;
+  --purple-2: #eebefa;
+  --purple-3: #e599f7;
+  --purple-4: #da77f2;
+  --purple-5: #cc5de8;
+  --purple-6: #be4bdb;
+  --purple-7: #ae3ec9;
+  --purple-8: #9c36b5;
+  --purple-9: #862e9c;
+  --purple-10: #702682;
+  --purple-11: #5a1e69;
+  --purple-12: #44174f;
+}
diff --git a/src/props.red-hsl.css b/src/props.red-hsl.css
index 9fcf2efc..cef10d09 100644
--- a/src/props.red-hsl.css
+++ b/src/props.red-hsl.css
@@ -9,4 +9,7 @@
   --red-7-hsl: 0 86% 59%;
   --red-8-hsl: 0 74% 54%;
   --red-9-hsl: 0 65% 48%;
+  --red-10-hsl: 0 65% 42%;
+  --red-11-hsl: 0 65% 36%;
+  --red-12-hsl: 0 66% 30%;
 }
diff --git a/src/props.red.css b/src/props.red.css
index 9f3a8fec..9438fb47 100644
--- a/src/props.red.css
+++ b/src/props.red.css
@@ -9,4 +9,7 @@
   --red-7: #f03e3e;
   --red-8: #e03131;
   --red-9: #c92a2a;
+  --red-10: #b02525;
+  --red-11: #962020;
+  --red-12: #7d1a1a;
 }
diff --git a/src/props.sand-hsl.css b/src/props.sand-hsl.css
new file mode 100644
index 00000000..8f59ae6c
--- /dev/null
+++ b/src/props.sand-hsl.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --sand-0-hsl: 200 27% 98%;
+  --sand-1-hsl: 48 17% 88%;
+  --sand-2-hsl: 45 22% 79%;
+  --sand-3-hsl: 44 22% 69%;
+  --sand-4-hsl: 44 17% 62%;
+  --sand-5-hsl: 44 14% 54%;
+  --sand-6-hsl: 42 14% 46%;
+  --sand-7-hsl: 43 16% 39%;
+  --sand-8-hsl: 41 15% 32%;
+  --sand-9-hsl: 43 14% 26%;
+  --sand-10-hsl: 44 11% 20%;
+  --sand-11-hsl: 60 6% 14%;
+  --sand-12-hsl: 60 6% 7%;
+}
diff --git a/src/props.sand.css b/src/props.sand.css
new file mode 100644
index 00000000..dfa0702a
--- /dev/null
+++ b/src/props.sand.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --sand-0: #f8fafb;
+  --sand-1: #e6e4dc;
+  --sand-2: #d5cfbd;
+  --sand-3: #c2b9a0;
+  --sand-4: #aea58c;
+  --sand-5: #9a9178;
+  --sand-6: #867c65;
+  --sand-7: #736a53;
+  --sand-8: #5f5746;
+  --sand-9: #4b4639;
+  --sand-10: #38352d;
+  --sand-11: #252521;
+  --sand-12: #121210;
+}
diff --git a/src/props.stone-hsl.css b/src/props.stone-hsl.css
new file mode 100644
index 00000000..ba07a66f
--- /dev/null
+++ b/src/props.stone-hsl.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --stone-0-hsl: 200 27% 98%;
+  --stone-1-hsl: 210 18% 96%;
+  --stone-2-hsl: 210 11% 93%;
+  --stone-3-hsl: 192 9% 89%;
+  --stone-4-hsl: 197 8% 83%;
+  --stone-5-hsl: 202 5% 71%;
+  --stone-6-hsl: 200 3% 60%;
+  --stone-7-hsl: 180 2% 50%;
+  --stone-8-hsl: 160 1% 41%;
+  --stone-9-hsl: 90 1% 31%;
+  --stone-10-hsl: 60 3% 22%;
+  --stone-11-hsl: 60 6% 14%;
+  --stone-12-hsl: 60 6% 7%;
+}
diff --git a/src/props.stone.css b/src/props.stone.css
new file mode 100644
index 00000000..3bed374a
--- /dev/null
+++ b/src/props.stone.css
@@ -0,0 +1,15 @@
+:where(html) {
+  --stone-0: #f8fafb;
+  --stone-1: #f2f4f6;
+  --stone-2: #ebedef;
+  --stone-3: #e0e4e5;
+  --stone-4: #d1d6d8;
+  --stone-5: #b1b6b9;
+  --stone-6: #979b9d;
+  --stone-7: #7e8282;
+  --stone-8: #666968;
+  --stone-9: #50514f;
+  --stone-10: #3a3a37;
+  --stone-11: #252521;
+  --stone-12: #121210;
+}
diff --git a/src/props.teal-hsl.css b/src/props.teal-hsl.css
index abc38c1d..443f9b4f 100644
--- a/src/props.teal-hsl.css
+++ b/src/props.teal-hsl.css
@@ -9,4 +9,7 @@
   --teal-7-hsl: 162 87% 35%;
   --teal-8-hsl: 162 88% 30%;
   --teal-9-hsl: 162 88% 26%;
+  --teal-10-hsl: 162 89% 21%;
+  --teal-11-hsl: 162 88% 16%;
+  --teal-12-hsl: 163 89% 11%;
 }
diff --git a/src/props.teal.css b/src/props.teal.css
index 96e775c3..8308e1ed 100644
--- a/src/props.teal.css
+++ b/src/props.teal.css
@@ -9,4 +9,7 @@
   --teal-7: #0ca678;
   --teal-8: #099268;
   --teal-9: #087f5b;
+  --teal-10: #066649;
+  --teal-11: #054d37;
+  --teal-12: #033325;
 }
diff --git a/src/props.violet-hsl.css b/src/props.violet-hsl.css
index 6c2a7bd0..4d2e545f 100644
--- a/src/props.violet-hsl.css
+++ b/src/props.violet-hsl.css
@@ -9,4 +9,7 @@
   --violet-7-hsl: 255 78% 60%;
   --violet-8-hsl: 255 67% 55%;
   --violet-9-hsl: 255 53% 50%;
+  --violet-10-hsl: 255 53% 44%;
+  --violet-11-hsl: 255 53% 37%;
+  --violet-12-hsl: 255 53% 31%;
 }
diff --git a/src/props.violet.css b/src/props.violet.css
index dddf442e..5701833e 100644
--- a/src/props.violet.css
+++ b/src/props.violet.css
@@ -9,4 +9,7 @@
   --violet-7: #7048e8;
   --violet-8: #6741d9;
   --violet-9: #5f3dc4;
+  --violet-10: #5235ab;
+  --violet-11: #462d91;
+  --violet-12: #3a2578;
 }
diff --git a/src/props.yellow-hsl.css b/src/props.yellow-hsl.css
index 59370491..bfd1b65b 100644
--- a/src/props.yellow-hsl.css
+++ b/src/props.yellow-hsl.css
@@ -9,4 +9,7 @@
   --yellow-7-hsl: 39 100% 48%;
   --yellow-8-hsl: 35 100% 47%;
   --yellow-9-hsl: 31 100% 45%;
+  --yellow-10-hsl: 31 100% 35%;
+  --yellow-11-hsl: 31 100% 25%;
+  --yellow-12-hsl: 31 100% 20%;
 }
diff --git a/src/props.yellow.css b/src/props.yellow.css
index c7b4a4a1..9c346fc7 100644
--- a/src/props.yellow.css
+++ b/src/props.yellow.css
@@ -9,4 +9,7 @@
   --yellow-7: #f59f00;
   --yellow-8: #f08c00;
   --yellow-9: #e67700;
+  --yellow-10: #b35c00;
+  --yellow-11: #804200;
+  --yellow-12: #663500;
 }
diff --git a/test/basic.test.cjs b/test/basic.test.cjs
index f01d621f..9122c44d 100644
--- a/test/basic.test.cjs
+++ b/test/basic.test.cjs
@@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
 const OPtokens = require('../open-props.tokens.json')
 
 test('Should have an all included import', t => {
-  t.is(Object.keys(OpenProps).length, 1098)
+  t.is(Object.keys(OpenProps).length, 1566)
 })
 
 test('Import should have animations', async t => {
@@ -24,7 +24,7 @@ test('Import should have colors', async t => {
 })
 
 test('JSON Import should have colors', async t => {
-  t.is(Object.keys(OPtokens).length, 280)
+  t.is(Object.keys(OPtokens).length, 397)
   t.assert(Object.keys(OPtokens).includes('--orange-0'))
 })