Move styles in SCSS vars to CSS vars

css/pico.slim.css

@@ -8,144 +8,230 @@
 /**
  * Theme: default
  */
+:root {
+  --text-font:                       system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --titles-font:                     var(--text-font);
+  --code-font:                       "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --line-height:                     1.5;
+  --text-weight:                     400;
+  --titles-weight:                   700;
+  --form-element-weight:             var(--text-weight);
+  --buttons-weight:                  var(--text-weight);
+  --code-weight:                     var(--text-weight);
+  --base-font-xs:                    16px;
+  --base-font-sm:                    17px;
+  --base-font-md:                    18px;
+  --base-font-lg:                    19px;
+  --base-font-xl:                    20px;
+  --h1-size:                         2rem;
+  --h2-size:                         1.75rem;
+  --h3-size:                         1.5rem;
+  --h4-size:                         1.25rem;
+  --h5-size:                         1.125rem;
+  --block-round:                     .25rem ;
+  --form-element-border-width:       1px;
+  --form-element-outline-width:      3px;
+  --checkbox-radio-border-width:     2px;
+  --switch-border-width:             3px;
+  --form-element-spacing-vertical:   .75rem;
+  --form-element-spacing-horizontal: 1rem;
+  --button-round:                    var(--block-round);
+  --button-border-width:             var(--form-element-border-width);
+  --button-outline-width:            var(--form-element-outline-width);
+  --button-spacing-vertical:         var(--form-element-spacing-vertical);
+  --button-spacing-horizontal:       var(--form-element-spacing-horizontal);
+  --spacing-gutter:                  1rem;
+  --spacing-block:                   2rem;
+  --spacing-factor-xs:               1;
+  --spacing-factor-sm:               1.25;
+  --spacing-factor-md:               1.5;
+  --spacing-factor-lg:               1.75;
+  --spacing-factor-xl:               2;
+  --spacing-typography:              1.5rem;
+  --spacing-form-element:            .25rem;
+  --transition:                      .2s ease-in-out;
+}
+
+:root {
+  --icon-chevron:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-date:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+  --icon-time:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-search:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-minus:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+  --icon-valid:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-invalid:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+}
+
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
-  --background:        #FFF;
+  --background:              #FFF;
-  --text:              #415462;
+  --text:                    #415462;
-  --h1:                #1b2832;
+  --h1:                      #1b2832;
-  --h2:                #2c3d49;
+  --h2:                      #2c3d49;
-  --h3:                #415462;
+  --h3:                      #415462;
-  --h4:                #596b78;
+  --h4:                      #596b78;
-  --h5:                #73828c;
+  --h5:                      #73828c;
-  --h6:                #8a99a3;
+  --h6:                      #8a99a3;
-  --primary:           #1095c1;
+  --primary:                 #1095c1;
-  --primary-hover:     #08769b;
+  --primary-border:          #1095c1;
-  --primary-focus:     rgba(16, 149, 193, 0.125);
+  --primary-hover:           #08769b;
-  --primary-inverse:   #FFF;
+  --primary-hover-border:    #08769b;
-  --secondary:         #73828c;
+  --primary-focus:           rgba(16, 149, 193, 0.125);
-  --secondary-hover:   #415462;
+  --primary-inverse:         #FFF;
-  --secondary-focus:   rgba(115, 130, 140, 0.125);
+  --secondary:               #73828c;
-  --secondary-inverse: #FFF;
+  --secondary-border:        #73828c;
-  --contrast:          #2c3d49;
+  --secondary-hover:         #415462;
-  --contrast-hover:    #0d1419;
+  --secondary-hover-border:  #415462;
-  --contrast-focus:    rgba(115, 130, 140, 0.125);
+  --secondary-focus:         rgba(115, 130, 140, 0.125);
-  --contrast-border:   rgba(255, 223, 128, 0.5);
+  --secondary-inverse:       #FFF;
-  --contrast-border-h: #ffdf80;
+  --contrast:                #2c3d49;
-  --contrast-inverse:  #FFF;
+  --contrast-border:         #2c3d49;
-  --input-background:  #FFF;
+  --contrast-hover:          #0d1419;
-  --input-border:      #c8d1d8;
+  --contrast-hover-border:   #0d1419;
-  --valid:             #288a6a;
+  --contrast-focus:          rgba(115, 130, 140, 0.125);
-  --invalid:           #b94646;
+  --contrast-inverse:        #FFF;
-  --mark:              rgba(255, 223, 128, 0.5);
+  --input-background:        #FFF;
-  --mark-text:         #2c3d49;
+  --input-border:            #c8d1d8;
-  --muted-text:        #7e8d98;
+  --input-hover-background:  #FFF;
-  --muted-background:  #edf0f3;
+  --input-hover-border:      #1095c1;
-  --muted-border:      #edf0f3;
+  --input-focus:             rgba(16, 149, 193, 0.125);
-  --card-background:   #FFF;
+  --input-inverse:           #FFF;
-  --card-sections:     #f3f5f7;
+  --button-shadow:           0 0 0 0 rgba(0, 0, 0, 0);
-  --card-shadow:       0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
+  --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
-  --code-background:   #f3f5f7;
+  --valid:                   #288a6a;
-  --code-inlined:      #edf0f3;
+  --invalid:                 #b94646;
-  --code-color-1:      #73828c;
+  --mark:                    rgba(255, 223, 128, 0.5);
-  --code-color-2:      #b34d80;
+  --mark-text:               #2c3d49;
-  --code-color-3:      #3d888f;
+  --muted-text:              #7e8d98;
-  --code-color-4:      #998866;
+  --muted-background:        #edf0f3;
-  --code-color-5:      #96a4ae;
+  --muted-border:            #edf0f3;
-  --table-border:      rgba(237, 240, 243, 0.75);
+  --card-background:         #FFF;
-  --table-stripping:   rgba(115, 130, 140, 0.04);
+  --card-sections:           #f3f5f7;
+  --card-shadow:             0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
+  --code-background:         #f3f5f7;
+  --code-inlined:            #edf0f3;
+  --code-color-1:            #73828c;
+  --code-color-2:            #b34d80;
+  --code-color-3:            #3d888f;
+  --code-color-4:            #998866;
+  --code-color-5:            #96a4ae;
+  --table-border:            rgba(237, 240, 243, 0.75);
+  --table-stripping:         rgba(115, 130, 140, 0.075);
 }
 
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --background:        #10181e;
+    --background:              #10181e;
-    --text:              #a2afb9;
+    --text:                    #a2afb9;
-    --h1:                #edf0f3;
+    --h1:                      #edf0f3;
-    --h2:                #d5dce2;
+    --h2:                      #d5dce2;
-    --h3:                #bbc6ce;
+    --h3:                      #bbc6ce;
-    --h4:                #a2afb9;
+    --h4:                      #a2afb9;
-    --h5:                #8a99a3;
+    --h5:                      #8a99a3;
-    --h6:                #73828c;
+    --h6:                      #73828c;
-    --primary:           #1095c1;
+    --primary:                 #1095c1;
-    --primary-hover:     #1ab3e6;
+    --primary-border:          #1095c1;
-    --primary-focus:     rgba(16, 149, 193, 0.25);
+    --primary-hover:           #1ab3e6;
-    --primary-inverse:   #FFF;
+    --primary-hover-border:    #1ab3e6;
-    --secondary:         #596b78;
+    --primary-focus:           rgba(16, 149, 193, 0.25);
-    --secondary-hover:   #73828c;
+    --primary-inverse:         #FFF;
-    --secondary-focus:   rgba(89, 107, 120, 0.25);
+    --secondary:               #596b78;
-    --secondary-inverse: #FFF;
+    --secondary-border:        #596b78;
-    --contrast:          #d5dce2;
+    --secondary-hover:         #73828c;
-    --contrast-hover:    #FFF;
+    --secondary-hover-border:  #73828c;
-    --contrast-focus:    rgba(89, 107, 120, 0.25);
+    --secondary-focus:         rgba(89, 107, 120, 0.25);
-    --contrast-border:   rgba(255, 223, 128, 0.33);
+    --secondary-inverse:       #FFF;
-    --contrast-border-h: rgba(255, 223, 128, 0.5);
+    --contrast:                #d5dce2;
-    --contrast-inverse:  #10181e;
+    --contrast-border:         #d5dce2;
-    --input-background:  #10181e;
+    --contrast-hover:          #FFF;
-    --input-border:      #374956;
+    --contrast-hover-border:   #FFF;
-    --valid:             #1f7a5c;
+    --contrast-focus:          rgba(89, 107, 120, 0.25);
-    --invalid:           #943838;
+    --contrast-inverse:        #10181e;
-    --mark:              rgba(255, 223, 128, 0.5);
+    --input-background:        #10181e;
-    --mark-text:         #FFF;
+    --input-border:            #374956;
-    --muted-text:        #73828c;
+    --input-hover-background:  #10181e;
-    --muted-background:  #10181e;
+    --input-hover-border:      #1095c1;
-    --muted-border:      #23333e;
+    --input-focus:             rgba(16, 149, 193, 0.25);
-    --card-background:   #17232b;
+    --input-inverse:           #FFF;
-    --card-sections:     #141d24;
+    --button-shadow:           0 0 0 0 rgba(0, 0, 0, 0);
-    --card-shadow:       0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
+    --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
-    --code-background:   #141d24;
+    --valid:                   #1f7a5c;
-    --code-inlined:      rgba(65, 84, 98, 0.25);
+    --invalid:                 #943838;
-    --code-color-1:      #73828c;
+    --mark:                    rgba(255, 223, 128, 0.5);
-    --code-color-2:      #a65980;
+    --mark-text:               #FFF;
-    --code-color-3:      #599fa6;
+    --muted-text:              #73828c;
-    --code-color-4:      #8c8473;
+    --muted-background:        #23333e;
-    --code-color-5:      #4d606d;
+    --muted-border:            #23333e;
-    --table-border:      rgba(115, 130, 140, 0.06);
+    --card-background:         #17232b;
-    --table-stripping:   rgba(115, 130, 140, 0.02);
+    --card-sections:           #141d24;
+    --card-shadow:             0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
+    --code-background:         #141d24;
+    --code-inlined:            rgba(65, 84, 98, 0.25);
+    --code-color-1:            #73828c;
+    --code-color-2:            #a65980;
+    --code-color-3:            #599fa6;
+    --code-color-4:            #8c8473;
+    --code-color-5:            #4d606d;
+    --table-border:            rgba(115, 130, 140, 0.075);
+    --table-stripping:         rgba(115, 130, 140, 0.05);
   }
 }
 
 [data-theme="dark"] {
-  --background:        #10181e;
+  --background:              #10181e;
-  --text:              #a2afb9;
+  --text:                    #a2afb9;
-  --h1:                #edf0f3;
+  --h1:                      #edf0f3;
-  --h2:                #d5dce2;
+  --h2:                      #d5dce2;
-  --h3:                #bbc6ce;
+  --h3:                      #bbc6ce;
-  --h4:                #a2afb9;
+  --h4:                      #a2afb9;
-  --h5:                #8a99a3;
+  --h5:                      #8a99a3;
-  --h6:                #73828c;
+  --h6:                      #73828c;
-  --primary:           #1095c1;
+  --primary:                 #1095c1;
-  --primary-hover:     #1ab3e6;
+  --primary-border:          #1095c1;
-  --primary-focus:     rgba(16, 149, 193, 0.25);
+  --primary-hover:           #1ab3e6;
-  --primary-inverse:   #FFF;
+  --primary-hover-border:    #1ab3e6;
-  --secondary:         #596b78;
+  --primary-focus:           rgba(16, 149, 193, 0.25);
-  --secondary-hover:   #73828c;
+  --primary-inverse:         #FFF;
-  --secondary-focus:   rgba(89, 107, 120, 0.25);
+  --secondary:               #596b78;
-  --secondary-inverse: #FFF;
+  --secondary-border:        #596b78;
-  --contrast:          #d5dce2;
+  --secondary-hover:         #73828c;
-  --contrast-hover:    #FFF;
+  --secondary-hover-border:  #73828c;
-  --contrast-focus:    rgba(89, 107, 120, 0.25);
+  --secondary-focus:         rgba(89, 107, 120, 0.25);
-  --contrast-border:   rgba(255, 223, 128, 0.33);
+  --secondary-inverse:       #FFF;
-  --contrast-inverse:  #10181e;
+  --contrast:                #d5dce2;
-  --input-background:  #10181e;
+  --contrast-border:         #d5dce2;
-  --input-border:      #374956;
+  --contrast-hover:          #FFF;
-  --valid:             #1f7a5c;
+  --contrast-hover-border:   #FFF;
-  --invalid:           #943838;
+  --contrast-focus:          rgba(89, 107, 120, 0.25);
-  --mark:              rgba(255, 223, 128, 0.5);
+  --contrast-inverse:        #10181e;
-  --mark-text:         #FFF;
+  --input-background:        #10181e;
-  --muted-text:        #73828c;
+  --input-border:            #374956;
-  --muted-background:  #10181e;
+  --input-hover-background:  #10181e;
-  --muted-border:      #23333e;
+  --input-hover-border:      #1095c1;
-  --card-background:   #17232b;
+  --input-focus:             rgba(16, 149, 193, 0.25);
-  --card-sections:     #141d24;
+  --input-inverse:           #FFF;
-  --card-shadow:       0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
+  --button-shadow:           0 0 0 0 rgba(0, 0, 0, 0);
-  --code-background:   #141d24;
+  --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
-  --code-inlined:      rgba(65, 84, 98, 0.25);
+  --valid:                   #1f7a5c;
-  --code-color-1:      #73828c;
+  --invalid:                 #943838;
-  --code-color-2:      #a65980;
+  --mark:                    rgba(255, 223, 128, 0.5);
-  --code-color-3:      #599fa6;
+  --mark-text:               #FFF;
-  --code-color-4:      #8c8473;
+  --muted-text:              #73828c;
-  --code-color-5:      #4d606d;
+  --muted-background:        #23333e;
-  --table-border:      rgba(115, 130, 140, 0.06);
+  --muted-border:            #23333e;
-  --table-stripping:   rgba(115, 130, 140, 0.02);
+  --card-background:         #17232b;
+  --card-sections:           #141d24;
+  --card-shadow:             0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
+  --code-background:         #141d24;
+  --code-inlined:            rgba(65, 84, 98, 0.25);
+  --code-color-1:            #73828c;
+  --code-color-2:            #a65980;
+  --code-color-3:            #599fa6;
+  --code-color-4:            #8c8473;
+  --code-color-5:            #4d606d;
+  --table-border:            rgba(115, 130, 140, 0.075);
+  --table-stripping:         rgba(115, 130, 140, 0.05);
 }
 
 /**
@@ -172,35 +258,35 @@ html {
   -webkit-text-size-adjust: 100%;
   background: var(--background);
   color: var(--text);
-  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--text-font);
-  font-size: 16px;
+  font-size: var(--base-font-xs);
-  font-weight: 400;
+  font-weight: var(--text-weight);
-  line-height: 1.5;
+  line-height: var(--line-height);
   text-rendering: optimizeLegibility;
   cursor: default;
 }
 
 @media (min-width: 576px) {
   html {
-    font-size: 17px;
+    font-size: var(--base-font-sm);
   }
 }
 
 @media (min-width: 768px) {
   html {
-    font-size: 18px;
+    font-size: var(--base-font-md);
   }
 }
 
 @media (min-width: 992px) {
   html {
-    font-size: 19px;
+    font-size: var(--base-font-lg);
   }
 }
 
 @media (min-width: 1200px) {
   html {
-    font-size: 20px;
+    font-size: var(--base-font-xl);
   }
 }
 
@@ -223,7 +309,7 @@ body > footer {
   width: 100%;
   margin-right: auto;
   margin-left: auto;
-  padding: 2rem 0;
+  padding: var(--spacing-block) 0;
 }
 
 /**
@@ -234,8 +320,8 @@ body > footer {
   width: 100%;
   margin-right: auto;
   margin-left: auto;
-  padding-right: 1rem;
+  padding-right: var(--spacing-gutter);
-  padding-left: 1rem;
+  padding-left: var(--spacing-gutter);
 }
 
 @media (min-width: 576px) {
@@ -269,8 +355,8 @@ body > footer {
  * Minimal grid system with auto-layout columns
  */
 .grid {
-  grid-column-gap: 1rem;
+  grid-column-gap: var(--spacing-gutter);
-  grid-row-gap: 1rem;
+  grid-row-gap: var(--spacing-gutter);
   display: grid;
   grid-template-columns: 1fr;
   margin: 0;
@@ -297,7 +383,7 @@ figure {
 }
 
 figure figcaption {
-  padding: 0.5rem 0;
+  padding: calc(var(--spacing-gutter) / 2) 0;
   color: var(--muted-text);
 }
 
@@ -351,7 +437,7 @@ pre,
 table,
 ul {
   margin-top: 0;
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--spacing-typography);
   color: var(--text);
   font-size: 1rem;
   font-style: normal;
@@ -375,6 +461,7 @@ a:focus {
 
 a.secondary {
   color: var(--secondary);
+  text-decoration: underline;
 }
 
 a.secondary:hover, a.secondary:active, a.secondary:focus {
@@ -385,18 +472,16 @@ a.secondary:focus {
   background-color: var(--secondary-focus);
 }
 
-a.contrast:not([role="button"]) {
+a.contrast {
-  box-shadow: inset 0 -0.33rem 0 var(--contrast-border);
   color: var(--contrast);
+  text-decoration: underline;
 }
 
-a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus {
+a.contrast:hover, a.contrast:active, a.contrast:focus {
-  box-shadow: inset 0 -0.33rem 0 var(--contrast-border-h);
   color: var(--contrast-hover);
-  text-decoration: none;
 }
 
-a.contrast:not([role="button"]):focus {
+a.contrast:focus {
   background-color: var(--contrast-focus);
 }
 
@@ -407,43 +492,43 @@ h4,
 h5,
 h6 {
   margin-top: 0;
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--spacing-typography);
-  font-weight: 700;
+  font-weight: var(--titles-weight);
 }
 
 h1 {
-  margin-bottom: 3rem;
+  margin-bottom: calc(var(--spacing-typography) * 2);
   color: var(--h1);
-  font-size: 2rem;
+  font-size: var(--h1-size);
 }
 
 h2 {
-  margin-bottom: 2.625rem;
+  margin-bottom: calc(var(--spacing-typography) * 1.75);
   color: var(--h2);
-  font-size: 1.75rem;
+  font-size: var(--h2-size);
 }
 
 h3 {
-  margin-bottom: 2.25rem;
+  margin-bottom: calc(var(--spacing-typography) * 1.5);
   color: var(--h3);
-  font-size: 1.5rem;
+  font-size: var(--h3-size);
 }
 
 h4 {
-  margin-bottom: 1.875rem;
+  margin-bottom: calc(var(--spacing-typography) * 1.25);
   color: var(--h4);
-  font-size: 1.25rem;
+  font-size: var(--h4-size);
 }
 
 h5 {
-  margin-bottom: 1.6875rem;
+  margin-bottom: calc(var(--spacing-typography) * 1.125);
   color: var(--h5);
-  font-size: 1.125rem;
+  font-size: var(--h5-size);
 }
 
 h6 {
   color: var(--h6);
-  font-size: 1rem;
+  font-size: var(--h6-size);
 }
 
 address ~ h1,
@@ -456,7 +541,7 @@ p ~ h1,
 pre ~ h1,
 table ~ h1,
 ul ~ h1 {
-  margin-top: 3rem;
+  margin-top: calc(var(--spacing-typography) * 2);
 }
 
 address ~ h2,
@@ -469,7 +554,7 @@ p ~ h2,
 pre ~ h2,
 table ~ h2,
 ul ~ h2 {
-  margin-top: 2.625rem;
+  margin-top: calc(var(--spacing-typography) * 1.75);
 }
 
 address ~ h3,
@@ -482,7 +567,7 @@ p ~ h3,
 pre ~ h3,
 table ~ h3,
 ul ~ h3 {
-  margin-top: 2.25rem;
+  margin-top: calc(var(--spacing-typography) * 1.5);
 }
 
 address ~ h4,
@@ -495,7 +580,7 @@ p ~ h4,
 pre ~ h4,
 table ~ h4,
 ul ~ h4 {
-  margin-top: 1.875rem;
+  margin-top: calc(var(--spacing-typography) * 1.25);
 }
 
 address ~ h5,
@@ -508,7 +593,7 @@ p ~ h5,
 pre ~ h5,
 table ~ h5,
 ul ~ h5 {
-  margin-top: 1.6875rem;
+  margin-top: calc(var(--spacing-typography) * 1.125);
 }
 
 address ~ h6,
@@ -521,11 +606,11 @@ p ~ h6,
 pre ~ h6,
 table ~ h6,
 ul ~ h6 {
-  margin-top: 1.5rem;
+  margin-top: calc(var(--spacing-typography));
 }
 
 hgroup {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--spacing-typography);
 }
 
 hgroup * {
@@ -535,11 +620,11 @@ hgroup * {
 hgroup > *:last-child {
   color: var(--muted-text);
   font-size: 1.125rem;
-  font-weight: normal;
+  font-weight: unset;
 }
 
 p {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--spacing-typography);
 }
 
 small {
@@ -572,12 +657,12 @@ small {
 
 ul,
 ol {
-  padding-left: 1.5rem;
+  padding-left: var(--spacing-typography);
 }
 
 ul li,
 ol li {
-  margin-bottom: 0.375rem;
+  margin-bottom: calc(var(--spacing-typography) / 4);
 }
 
 ul li {
@@ -593,13 +678,13 @@ mark {
 
 blockquote {
   display: block;
-  margin: 3rem 0;
+  margin: var(--spacing-typography) 0;
-  padding: 1rem;
+  padding: var(--spacing-gutter);
   border-left: 0.25rem solid var(--muted-border);
 }
 
 blockquote footer {
-  margin-top: 0.75rem;
+  margin-top: calc(var(--spacing-typography) / 2);
   color: var(--muted-text);
 }
 
@@ -690,7 +775,7 @@ button::-moz-focus-inner,
 button {
   display: block;
   width: 100%;
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--spacing-typography);
 }
 
 a[role="button"] {
@@ -701,17 +786,19 @@ a[role="button"] {
 button,
 input[type="submit"],
 input[type="button"],
+input[type="reset"],
 [type="file"]::-webkit-file-upload-button,
 a[role="button"] {
-  padding: 0.75rem 1rem;
+  padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
-  border: 1px solid transparent;
+  border: var(--button-border-width) solid var(--primary-border);
-  border-radius: 0.25rem;
+  border-radius: var(--button-round);
   outline: none;
   background-color: var(--primary);
+  box-shadow: var(--button-shadow);
   color: var(--primary-inverse);
   font-size: 1rem;
-  font-weight: normal;
+  font-weight: var(--buttons-weight);
-  line-height: 1.5;
+  line-height: var(--line-height);
   text-align: center;
   cursor: pointer;
 }
@@ -723,21 +810,27 @@ input[type="submit"]:focus,
 input[type="button"]:hover,
 input[type="button"]:active,
 input[type="button"]:focus,
+input[type="reset"]:hover,
+input[type="reset"]:active,
+input[type="reset"]:focus,
 [type="file"]::-webkit-file-upload-button:hover,
 [type="file"]::-webkit-file-upload-button:active,
 [type="file"]::-webkit-file-upload-button:focus,
 a[role="button"]:hover,
 a[role="button"]:active,
 a[role="button"]:focus {
+  border-color: var(--primary-hover-border);
   background-color: var(--primary-hover);
+  box-shadow: var(--button-hover-shadow);
 }
 
 button:focus,
 input[type="submit"]:focus,
 input[type="button"]:focus,
+input[type="reset"]:focus,
 [type="file"]::-webkit-file-upload-button:focus,
 a[role="button"]:focus {
-  box-shadow: 0 0 0 0.2rem var(--primary-focus);
+  box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus);
 }
 
 input[type="reset"] {
@@ -764,7 +857,7 @@ textarea {
   font-family: inherit;
   font-size: 1rem;
   letter-spacing: inherit;
-  line-height: 1.5;
+  line-height: var(--line-height);
 }
 
 input {
@@ -776,7 +869,6 @@ select {
 }
 
 legend {
-  display: table;
   max-width: 100%;
   padding: 0;
   color: inherit;
@@ -838,12 +930,12 @@ textarea {
 }
 
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
-  height: calc(1.5rem + 1.5rem + 2px);
+  height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2));
 }
 
 fieldset {
   margin: 0;
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--spacing-typography);
   padding: 0;
   border: 0;
 }
@@ -851,7 +943,7 @@ fieldset {
 label,
 fieldset legend {
   display: block;
-  margin-bottom: 0.25rem;
+  margin-bottom: var(--spacing-form-element);
   vertical-align: middle;
 }
 
@@ -869,19 +961,19 @@ textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  padding: 0.75rem 1rem;
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
   vertical-align: middle;
 }
 
 input,
 select,
 textarea {
-  border: 1px solid var(--input-border);
+  border: var(--form-element-border-width) solid var(--input-border);
-  border-radius: 0.25rem;
+  border-radius: var(--block-round);
   outline: none;
   background-color: var(--input-background);
   color: var(--text);
-  font-weight: normal;
+  font-weight: var(--form-element-weight);
 }
 
 input::placeholder, input::-webkit-input-placeholder,
@@ -898,7 +990,8 @@ select:active,
 select:focus,
 textarea:active,
 textarea:focus {
-  border-color: var(--primary);
+  border-color: var(--input-hover-border);
+  background-color: var(--input-hover-background);
 }
 
 input[readonly], input[disabled],
@@ -918,6 +1011,18 @@ textarea[disabled] ~ label {
   color: var(--muted-text);
 }
 
+input[readonly]:active, input[readonly]:focus, input[disabled]:active, input[disabled]:focus,
+select[readonly]:active,
+select[readonly]:focus,
+select[disabled]:active,
+select[disabled]:focus,
+textarea[readonly]:active,
+textarea[readonly]:focus,
+textarea[disabled]:active,
+textarea[disabled]:focus {
+  box-shadow: none;
+}
+
 input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
 select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
 textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
@@ -927,20 +1032,19 @@ textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"])
 input[disabled],
 select[disabled],
 textarea[disabled] {
-  cursor: not-allowed;
+  opacity: .66;
-  opacity: .5;
 }
 
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--spacing-typography);
 }
 
 input:not([type="range"]):not([type="file"]):focus,
 select:focus,
 textarea:focus {
-  box-shadow: 0 0 0 0.2rem var(--primary-focus);
+  box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
 }
 
 select::-ms-expand {
@@ -949,8 +1053,8 @@ select::-ms-expand {
 }
 
 select:not([multiple]):not([size]) {
-  padding-right: 2.5rem;
+  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-image: var(--icon-chevron);
   background-position: center right .75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -963,14 +1067,14 @@ form small {
 input + small,
 select + small,
 textarea + small {
-  margin-top: -1rem;
+  margin-top: calc(var(--spacing-typography) * -0.5);
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--spacing-typography);
 }
 
 label > input,
 label > select,
 label > textarea {
-  margin-top: 0.25rem;
+  margin-top: var(--spacing-form-element);
 }
 
 /**
@@ -986,11 +1090,11 @@ table {
 
 th,
 td {
-  padding: 0.5rem 1rem;
+  padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter);
   border-bottom: 1px solid var(--table-border);
   color: var(--muted-text);
   font-size: 0.875rem;
-  font-weight: 400;
+  font-weight: var(--text-weight);
   text-align: left;
 }
 
@@ -1005,7 +1109,7 @@ thead td {
   border-bottom: 3px solid var(--table-border);
 }
 
-tbody tr:nth-child(odd) {
+table[role="grid"] tbody tr:nth-child(odd) {
   background-color: var(--table-stripping);
 }
 

css/themes/default.css

@@ -0,0 +1,228 @@
+/**
+ * Theme: default
+ */
+:root {
+  --text-font:                       system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --titles-font:                     var(--text-font);
+  --code-font:                       "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --line-height:                     1.5;
+  --text-weight:                     400;
+  --titles-weight:                   700;
+  --form-element-weight:             var(--text-weight);
+  --buttons-weight:                  var(--text-weight);
+  --code-weight:                     var(--text-weight);
+  --base-font-xs:                    16px;
+  --base-font-sm:                    17px;
+  --base-font-md:                    18px;
+  --base-font-lg:                    19px;
+  --base-font-xl:                    20px;
+  --h1-size:                         2rem;
+  --h2-size:                         1.75rem;
+  --h3-size:                         1.5rem;
+  --h4-size:                         1.25rem;
+  --h5-size:                         1.125rem;
+  --block-round:                     .25rem ;
+  --form-element-border-width:       1px;
+  --form-element-outline-width:      3px;
+  --checkbox-radio-border-width:     2px;
+  --switch-border-width:             3px;
+  --form-element-spacing-vertical:   .75rem;
+  --form-element-spacing-horizontal: 1rem;
+  --button-round:                    var(--block-round);
+  --button-border-width:             var(--form-element-border-width);
+  --button-outline-width:            var(--form-element-outline-width);
+  --button-spacing-vertical:         var(--form-element-spacing-vertical);
+  --button-spacing-horizontal:       var(--form-element-spacing-horizontal);
+  --spacing-gutter:                  1rem;
+  --spacing-block:                   2rem;
+  --spacing-factor-xs:               1;
+  --spacing-factor-sm:               1.25;
+  --spacing-factor-md:               1.5;
+  --spacing-factor-lg:               1.75;
+  --spacing-factor-xl:               2;
+  --spacing-typography:              1.5rem;
+  --spacing-form-element:            .25rem;
+  --transition:                      .2s ease-in-out;
+}
+
+:root {
+  --icon-chevron:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-date:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+  --icon-time:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-search:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-minus:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+  --icon-valid:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-invalid:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+}
+
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+  --background:              #FFF;
+  --text:                    #415462;
+  --h1:                      #1b2832;
+  --h2:                      #2c3d49;
+  --h3:                      #415462;
+  --h4:                      #596b78;
+  --h5:                      #73828c;
+  --h6:                      #8a99a3;
+  --primary:                 #1095c1;
+  --primary-border:          #1095c1;
+  --primary-hover:           #08769b;
+  --primary-hover-border:    #08769b;
+  --primary-focus:           rgba(16, 149, 193, 0.125);
+  --primary-inverse:         #FFF;
+  --secondary:               #73828c;
+  --secondary-border:        #73828c;
+  --secondary-hover:         #415462;
+  --secondary-hover-border:  #415462;
+  --secondary-focus:         rgba(115, 130, 140, 0.125);
+  --secondary-inverse:       #FFF;
+  --contrast:                #2c3d49;
+  --contrast-border:         #2c3d49;
+  --contrast-hover:          #0d1419;
+  --contrast-hover-border:   #0d1419;
+  --contrast-focus:          rgba(115, 130, 140, 0.125);
+  --contrast-inverse:        #FFF;
+  --input-background:        #FFF;
+  --input-border:            #c8d1d8;
+  --input-hover-background:  #FFF;
+  --input-hover-border:      #1095c1;
+  --input-focus:             rgba(16, 149, 193, 0.125);
+  --input-inverse:           #FFF;
+  --button-shadow:           0 0 0 0 rgba(0, 0, 0, 0);
+  --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
+  --valid:                   #288a6a;
+  --invalid:                 #b94646;
+  --mark:                    rgba(255, 223, 128, 0.5);
+  --mark-text:               #2c3d49;
+  --muted-text:              #7e8d98;
+  --muted-background:        #edf0f3;
+  --muted-border:            #edf0f3;
+  --card-background:         #FFF;
+  --card-sections:           #f3f5f7;
+  --card-shadow:             0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
+  --code-background:         #f3f5f7;
+  --code-inlined:            #edf0f3;
+  --code-color-1:            #73828c;
+  --code-color-2:            #b34d80;
+  --code-color-3:            #3d888f;
+  --code-color-4:            #998866;
+  --code-color-5:            #96a4ae;
+  --table-border:            rgba(237, 240, 243, 0.75);
+  --table-stripping:         rgba(115, 130, 140, 0.075);
+}
+
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --background:              #10181e;
+    --text:                    #a2afb9;
+    --h1:                      #edf0f3;
+    --h2:                      #d5dce2;
+    --h3:                      #bbc6ce;
+    --h4:                      #a2afb9;
+    --h5:                      #8a99a3;
+    --h6:                      #73828c;
+    --primary:                 #1095c1;
+    --primary-border:          #1095c1;
+    --primary-hover:           #1ab3e6;
+    --primary-hover-border:    #1ab3e6;
+    --primary-focus:           rgba(16, 149, 193, 0.25);
+    --primary-inverse:         #FFF;
+    --secondary:               #596b78;
+    --secondary-border:        #596b78;
+    --secondary-hover:         #73828c;
+    --secondary-hover-border:  #73828c;
+    --secondary-focus:         rgba(89, 107, 120, 0.25);
+    --secondary-inverse:       #FFF;
+    --contrast:                #d5dce2;
+    --contrast-border:         #d5dce2;
+    --contrast-hover:          #FFF;
+    --contrast-hover-border:   #FFF;
+    --contrast-focus:          rgba(89, 107, 120, 0.25);
+    --contrast-inverse:        #10181e;
+    --input-background:        #10181e;
+    --input-border:            #374956;
+    --input-hover-background:  #10181e;
+    --input-hover-border:      #1095c1;
+    --input-focus:             rgba(16, 149, 193, 0.25);
+    --input-inverse:           #FFF;
+    --button-shadow:           0 0 0 0 rgba(0, 0, 0, 0);
+    --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
+    --valid:                   #1f7a5c;
+    --invalid:                 #943838;
+    --mark:                    rgba(255, 223, 128, 0.5);
+    --mark-text:               #FFF;
+    --muted-text:              #73828c;
+    --muted-background:        #23333e;
+    --muted-border:            #23333e;
+    --card-background:         #17232b;
+    --card-sections:           #141d24;
+    --card-shadow:             0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
+    --code-background:         #141d24;
+    --code-inlined:            rgba(65, 84, 98, 0.25);
+    --code-color-1:            #73828c;
+    --code-color-2:            #a65980;
+    --code-color-3:            #599fa6;
+    --code-color-4:            #8c8473;
+    --code-color-5:            #4d606d;
+    --table-border:            rgba(115, 130, 140, 0.075);
+    --table-stripping:         rgba(115, 130, 140, 0.05);
+  }
+}
+
+[data-theme="dark"] {
+  --background:              #10181e;
+  --text:                    #a2afb9;
+  --h1:                      #edf0f3;
+  --h2:                      #d5dce2;
+  --h3:                      #bbc6ce;
+  --h4:                      #a2afb9;
+  --h5:                      #8a99a3;
+  --h6:                      #73828c;
+  --primary:                 #1095c1;
+  --primary-border:          #1095c1;
+  --primary-hover:           #1ab3e6;
+  --primary-hover-border:    #1ab3e6;
+  --primary-focus:           rgba(16, 149, 193, 0.25);
+  --primary-inverse:         #FFF;
+  --secondary:               #596b78;
+  --secondary-border:        #596b78;
+  --secondary-hover:         #73828c;
+  --secondary-hover-border:  #73828c;
+  --secondary-focus:         rgba(89, 107, 120, 0.25);
+  --secondary-inverse:       #FFF;
+  --contrast:                #d5dce2;
+  --contrast-border:         #d5dce2;
+  --contrast-hover:          #FFF;
+  --contrast-hover-border:   #FFF;
+  --contrast-focus:          rgba(89, 107, 120, 0.25);
+  --contrast-inverse:        #10181e;
+  --input-background:        #10181e;
+  --input-border:            #374956;
+  --input-hover-background:  #10181e;
+  --input-hover-border:      #1095c1;
+  --input-focus:             rgba(16, 149, 193, 0.25);
+  --input-inverse:           #FFF;
+  --button-shadow:           0 0 0 0 rgba(0, 0, 0, 0);
+  --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
+  --valid:                   #1f7a5c;
+  --invalid:                 #943838;
+  --mark:                    rgba(255, 223, 128, 0.5);
+  --mark-text:               #FFF;
+  --muted-text:              #73828c;
+  --muted-background:        #23333e;
+  --muted-border:            #23333e;
+  --card-background:         #17232b;
+  --card-sections:           #141d24;
+  --card-shadow:             0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
+  --code-background:         #141d24;
+  --code-inlined:            rgba(65, 84, 98, 0.25);
+  --code-color-1:            #73828c;
+  --code-color-2:            #a65980;
+  --code-color-3:            #599fa6;
+  --code-color-4:            #8c8473;
+  --code-color-5:            #4d606d;
+  --table-border:            rgba(115, 130, 140, 0.075);
+  --table-stripping:         rgba(115, 130, 140, 0.05);
+}

docs/css/pico.docs.css

@@ -4,6 +4,11 @@
 /**
  * Theme: Additions for docs
  */
+:root {
+  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
+  --icon-check:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
   --nav-background: rgba(255, 255, 255, 0.7);
@@ -33,33 +38,33 @@ html {
  * Docs: Main (Grid)
  */
 body > main {
-  padding-top: 4.5rem;
+  padding-top: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
 }
 
 @media (min-width: 576px) {
   body > main {
-    padding-top: 4.75rem;
+    padding-top: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
   }
 }
 
 @media (min-width: 768px) {
   body > main {
-    padding-top: 5rem;
+    padding-top: calc(1rem * var(--spacing-factor-md) + 3.5rem);
   }
 }
 
 @media (min-width: 992px) {
   body > main {
-    grid-column-gap: 4rem;
+    grid-column-gap: calc(var(--spacing-gutter) * 4);
     display: grid;
     grid-template-columns: 200px auto;
-    padding-top: 5.25rem;
+    padding-top: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
   }
 }
 
 @media (min-width: 1200px) {
   body > main {
-    padding-top: 5.5rem;
+    padding-top: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
   }
 }
 
@@ -69,36 +74,36 @@ body > main > * {
 
 div[role="document"] > section::before {
   display: block;
-  height: 4.5rem;
+  height: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
-  margin-top: -4.5rem;
+  margin-top: calc(-1rem * var(--spacing-factor-xs) - 3.5rem);
   content: '';
 }
 
 @media (min-width: 576px) {
   div[role="document"] > section::before {
-    height: 4.75rem;
+    height: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
-    margin-top: -4.75rem;
+    margin-top: calc(-1rem * var(--spacing-factor-sm) - 3.5rem);
   }
 }
 
 @media (min-width: 768px) {
   div[role="document"] > section::before {
-    height: 5rem;
+    height: calc(1rem * var(--spacing-factor-md) + 3.5rem);
-    margin-top: -5rem;
+    margin-top: calc(-1rem * var(--spacing-factor-md) - 3.5rem);
   }
 }
 
 @media (min-width: 992px) {
   div[role="document"] > section::before {
-    height: 5.25rem;
+    height: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
-    margin-top: -5.25rem;
+    margin-top: calc(-1rem * var(--spacing-factor-lg) - 3.5rem);
   }
 }
 
 @media (min-width: 1200px) {
   div[role="document"] > section::before {
-    height: 5.5rem;
+    height: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
-    margin-top: -5.5rem;
+    margin-top: calc(-1rem * var(--spacing-factor-xl) - 3.5rem);
   }
 }
 
@@ -106,7 +111,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
   display: inline-block;
   width: 1rem;
   height: 1rem;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
+  background-image: var(--icon-external);
   background-position: top center;
   background-repeat: no-repeat;
   background-size: .66rem auto;
@@ -123,11 +128,11 @@ form.grid > button {
  */
 main > aside nav {
   width: 100%;
-  margin-bottom: 2rem;
+  margin-bottom: var(--spacing-block);
 }
 
 main > aside nav h1 {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--spacing-typography);
 }
 
 @media (min-width: 992px) {
@@ -207,8 +212,8 @@ main > aside details[open] summary {
   #customization figure {
     grid-template-columns: repeat(18, 1fr);
     grid-template-rows: 1fr;
-    border-top-right-radius: 0.25rem;
+    border-top-right-radius: var(--block-round);
-    border-top-left-radius: 0.25rem;
+    border-top-left-radius: var(--block-round);
   }
 }
 
@@ -231,19 +236,15 @@ main > aside details[open] summary {
 }
 
 #customization figure button.picked {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  background-image: var(--icon-check);
   background-position: center;
   background-repeat: no-repeat;
   background-size: .66rem auto;
   box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
 }
 
-#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-}
-
 #customization h4 {
-  transition: color 0.2s ease-in-out;
+  transition: color var(--transition);
 }
 
 #customization pre[data-theme="generated"] {
@@ -253,7 +254,7 @@ main > aside details[open] summary {
 #grids button {
   display: block;
   width: 100%;
-  margin-bottom: 0.75rem;
+  margin-bottom: calc(var(--spacing-typography) / 2);
 }
 
 @media (min-width: 576px) {
@@ -273,13 +274,13 @@ main > aside details[open] summary {
 }
 
 #grids .grid > * {
-  padding: 0.5rem 0;
+  padding: calc(var(--spacing-gutter) / 2) 0;
   background: var(--code-background);
   text-align: center;
 }
 
 #grids details {
-  margin-top: 3rem;
+  margin-top: calc(var(--spacing-typography) * 2);
 }
 
 #forms div.grid {
@@ -290,12 +291,12 @@ main > aside details[open] summary {
  * Docs: Typography
  */
 section > hgroup {
-  margin-bottom: 3rem;
+  margin-bottom: calc(var(--spacing-typography) * 2);
 }
 
 a[role=button] {
-  margin-right: 0.25rem;
+  margin-right: calc(var(--spacing-typography) / 4);
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--spacing-typography);
 }
 
 [role=document] section > h1,
@@ -309,25 +310,25 @@ a[role=button] {
  */
 @media (min-width: 576px) {
   pre {
-    padding: 2rem 2.5rem;
+    padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
   }
 }
 
 @media (min-width: 768px) {
   pre {
-    padding: 2rem 3rem;
+    padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
   }
 }
 
 @media (min-width: 992px) {
   pre {
-    padding: 2rem 3.5rem;
+    padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
   }
 }
 
 @media (min-width: 1200px) {
   pre {
-    padding: 2rem 4rem;
+    padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
   }
 }
 
@@ -353,8 +354,8 @@ a[role=button] {
 @media (min-width: 992px) {
   [data-theme="invalid"]:before,
   [data-theme="valid"]:before {
-    top: 1rem;
+    top: var(--spacing-gutter);
-    right: 1rem;
+    right: var(--spacing-gutter);
   }
 }
 
@@ -399,7 +400,7 @@ body > nav a svg {
 body > nav ul:first-of-type li:first-of-type a {
   width: 3.5rem;
   height: 3.5rem;
-  margin-left: -1rem;
+  margin-left: calc(var(--spacing-gutter) * -1);
   padding: 0;
   background: var(--h1);
   color: var(--background);
@@ -407,7 +408,7 @@ body > nav ul:first-of-type li:first-of-type a {
 
 body > nav ul:first-of-type li:nth-of-type(2) {
   display: none;
-  margin-left: 1rem;
+  margin-left: var(--spacing-gutter);
   color: var(--h1);
 }
 
@@ -422,15 +423,15 @@ body > nav ul:first-of-type li:nth-of-type(2) {
  */
 .switcher {
   position: fixed;
-  right: 0.5rem;
+  right: calc(var(--spacing-gutter) / 2);
-  bottom: 1rem;
+  bottom: var(--spacing-gutter);
   width: auto;
   margin-bottom: 0;
   padding: .75rem;
   border-radius: 2rem;
+  box-shadow: var(--card-shadow);
   line-height: 1;
   text-align: right;
-  box-shadow: var(--card-shadow);
 }
 
 .switcher::after {
@@ -442,7 +443,7 @@ body > nav ul:first-of-type li:nth-of-type(2) {
   background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
   vertical-align: bottom;
   content: '';
-  transition: transform 0.2s ease-in-out;
+  transition: transform var(--transition);
 }
 
 .switcher i {
@@ -457,7 +458,7 @@ body > nav ul:first-of-type li:nth-of-type(2) {
 
 .switcher:hover, .switcher:focus {
   max-width: 100%;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
 }
 
 .switcher:hover::after {
@@ -466,8 +467,8 @@ body > nav ul:first-of-type li:nth-of-type(2) {
 
 .switcher:hover i {
   max-width: 100%;
-  padding: 0 0.5rem 0 0.25rem;
+  padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
-  transition: max-width 0.2s ease-in-out, padding 0.2s ease-in-out;
+  transition: max-width var(--transition), padding var(--transition);
 }
 
 .switcher:focus {
@@ -476,6 +477,6 @@ body > nav ul:first-of-type li:nth-of-type(2) {
 
 @media (min-width: 576px) {
   .switcher {
-    right: 1rem;
+    right: var(--spacing-gutter);
   }
 }

docs/index.html

@@ -133,11 +133,11 @@
               <h2>Themes</h2>
               <h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
             </hgroup>
-            <p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code>.</p>
+            <p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
             <article aria-label="Theme switcher">
               <button class="contrast theme-switcher">...</button>
             </article>
-            <p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code>.</p>
+            <p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code></p>
             <article data-theme="light">
               <h4>Light theme</h4>
               <form class="grid">
@@ -301,7 +301,7 @@
                 </tbody>
               </table>
             </figure>
-            <p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code>.</p>
+            <p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code></p>
             <p><code>&lt;<b>section</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
           </section><!-- ./ Docs: Container -->
 
@@ -327,7 +327,7 @@
 &lt;/<b>div</b>&gt;</code></pre>
 
             </article>
-            <p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code>.</p>
+            <p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
             <p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
             <details>
               <summary>
@@ -353,7 +353,7 @@
               <h2>Horizontal scroller</h2>
               <h3><code>&lt;<b>figure</b>&gt;</code> act as a container to make any content scrollable horizontally.</h3>
             </hgroup>
-            <p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code>.</p>
+            <p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code></p>
             <figure>
               <table>
                 <thead>
@@ -938,7 +938,7 @@
           <!-- Love -->
           <section id="love">
             <h2>We love <code>.classes</code></h2>
-            <p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code>.</p>
+            <p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
             <p>But off course, <code>.classes</code> are not a bad practice at all.</p>
             <p>Feel free to use <em>modifiers</em>.</p>
             <div data-theme="valid">

docs/scss/components/_nav.scss

@@ -28,7 +28,7 @@ body > nav {
       a {
         width: 3.5rem;
         height: 3.5rem;
-        margin-left: -$spacing-gutter;
+        margin-left: calc(var(--spacing-gutter) * -1);
         padding: 0;
         background: var(--h1);
         color: var(--background);
@@ -38,7 +38,7 @@ body > nav {
     // Title
     &:nth-of-type(2) {
       display: none;
-      margin-left: $spacing-gutter;
+      margin-left: var(--spacing-gutter);
       color: var(--h1);
 
       @media (min-width: map-get($breakpoints, "lg")) {

docs/scss/components/_theme-switcher.scss

@@ -4,15 +4,15 @@
 
 .switcher {
   position: fixed;
-  right: $spacing-gutter/2;
+  right: calc(var(--spacing-gutter) / 2);
-  bottom: $spacing-gutter;
+  bottom: var(--spacing-gutter);
   width: auto;
   margin-bottom: 0;
   padding: .75rem;
   border-radius: 2rem;
+  box-shadow: var(--card-shadow);
   line-height: 1;
   text-align: right;
-  box-shadow: var(--card-shadow);
 
   &::after {
     display: inline-block;
@@ -23,7 +23,7 @@
     background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
     vertical-align: bottom;
     content: '';
-    transition: transform $transition;
+    transition: transform var(--transition);
   }
 
   i {
@@ -40,10 +40,10 @@
   &:focus {
     max-width: 100%;
     transition:
-      background-color $transition,
+      background-color var(--transition),
-      border-color $transition,
+      border-color var(--transition),
-      color $transition,
+      color var(--transition),
-      box-shadow $transition;
+      box-shadow var(--transition);
   }
 
   &:hover {
@@ -53,9 +53,9 @@
 
     i {
       max-width: 100%;
-      padding: 0 ($spacing-gutter/2) 0 ($spacing-gutter/4);
+      padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
-      transition: max-width $transition,
+      transition: max-width var(--transition),
-                  padding $transition;
+                  padding var(--transition);
     }
   }
 
@@ -65,6 +65,6 @@
   }
 
   @media (min-width: map-get($breakpoints, "sm")) {
-    right: $spacing-gutter;
+    right: var(--spacing-gutter);
   }
 }

docs/scss/content/_code.scss

@@ -6,38 +6,34 @@
 pre {
 
   @if map-get($breakpoints, "sm") and
-    map-get($spacing-factor, "sm") and
     $enable-responsive-spacings {
 
     @media (min-width: map-get($breakpoints, "sm")) {
-      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
+      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
     }
   }
 
   @if map-get($breakpoints, "md") and
-    map-get($spacing-factor, "md") and
     $enable-responsive-spacings {
 
     @media (min-width: map-get($breakpoints, "md")) {
-      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
+      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
     }
   }
 
   @if map-get($breakpoints, "lg") and
-    map-get($spacing-factor, "lg") and
     $enable-responsive-spacings {
 
     @media (min-width: map-get($breakpoints, "lg")) {
-      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
+      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
     }
   }
 
   @if map-get($breakpoints, "xl") and
-    map-get($spacing-factor, "xl") and
     $enable-responsive-spacings {
 
     @media (min-width: map-get($breakpoints, "xl")) {
-      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
+      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
     }
   }
 }
@@ -61,8 +57,8 @@ pre {
     line-height: 1;
 
     @media (min-width: map-get($breakpoints, "lg")) {
-      top: $spacing-gutter;
+      top: var(--spacing-gutter);
-      right: $spacing-gutter;
+      right: var(--spacing-gutter);
     }
   }
 

docs/scss/content/_typography.scss

@@ -3,12 +3,12 @@
  */
 
 section > hgroup {
-  margin-bottom: $spacing-typography*2;
+  margin-bottom: calc(var(--spacing-typography) * 2);
 }
 
 a[role=button] {
-  margin-right: $spacing-gutter/4;
+  margin-right: calc(var(--spacing-typography) / 4);
-  margin-bottom: $spacing-typography;
+  margin-bottom: var(--spacing-typography);
 }
 
 [role=document] {

docs/scss/layout/_aside.scss

@@ -6,10 +6,10 @@ main > aside {
 
   nav {
     width: 100%;
-    margin-bottom: $spacing-block;
+    margin-bottom: var(--spacing-block);
 
     h1 {
-      margin-bottom: $spacing-typography;
+      margin-bottom: var(--spacing-typography);
     }
 
     @media (min-width: map-get($breakpoints, "lg")) {

docs/scss/layout/_documentation.scss

@@ -26,8 +26,8 @@
     @media (min-width: map-get($breakpoints, "sm")) {
       grid-template-columns: repeat(18, 1fr);
       grid-template-rows: 1fr;
-      border-top-right-radius: $round;
+      border-top-right-radius: var(--block-round);
-      border-top-left-radius: $round;
+      border-top-left-radius: var(--block-round);
     }
 
     ~ article {
@@ -48,8 +48,7 @@
       }
 
       &.picked {
-        // Source: https://feathericons.com/
+        background-image: var(--icon-check);
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
         background-position: center;
         background-repeat: no-repeat;
         background-size: .66rem auto;
@@ -59,15 +58,14 @@
       &[data-color="yellow"],
       &[data-color="amber"] {
         &.picked {
-          // Source: https://feathericons.com/
+          // TODO
-          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
         }
       }
     }
   }
 
   h4 {
-    transition: color $transition;
+    transition: color var(--transition);
   }
 
   pre[data-theme="generated"] {
@@ -84,7 +82,7 @@
   button {
     display: block;
     width: 100%;
-    margin-bottom: $spacing-typography/2;
+    margin-bottom: calc(var(--spacing-typography) / 2);
 
     @media (min-width: map-get($breakpoints, "sm")) {
       display: inline-block;
@@ -102,13 +100,13 @@
   }
 
   .grid > * {
-    padding: ($spacing-gutter/2) 0;
+    padding: calc(var(--spacing-gutter) / 2) 0;
     background: var(--code-background);
     text-align: center;
   }
 
   details {
-    margin-top: $spacing-typography*2;
+    margin-top: calc(var(--spacing-typography) * 2);
   }
 }
 

docs/scss/layout/_main.scss

@@ -5,25 +5,25 @@
 $navHeight: 3.5rem;
 
 body > main {
-  padding-top:map-get($spacing-factor, "xs") + $navHeight;
+  padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
 
   @media (min-width: map-get($breakpoints, "sm")) {
-    padding-top: map-get($spacing-factor, "sm") + $navHeight;
+    padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
   }
 
   @media (min-width: map-get($breakpoints, "md")) {
-    padding-top: map-get($spacing-factor, "md") + $navHeight;
+    padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
   }
 
   @media (min-width: map-get($breakpoints, "lg")) {
-    grid-column-gap: $spacing-gutter*4;
+    grid-column-gap: calc(var(--spacing-gutter) * 4);
     display: grid;
     grid-template-columns: 200px auto;
-    padding-top: map-get($spacing-factor, "lg") + $navHeight;
+    padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
   }
 
   @media (min-width: map-get($breakpoints, "xl")) {
-    padding-top: map-get($spacing-factor, "xl") + $navHeight;
+    padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
   }
 
   > * {
@@ -37,29 +37,29 @@ body > main {
 
 div[role="document"] > section::before {
   display: block;
-  height: map-get($spacing-factor, "xs") + $navHeight;
+  height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
-  margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
+  margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight});
   content: '';
 
 
   @media (min-width: map-get($breakpoints, "sm")) {
-    height: map-get($spacing-factor, "sm") + $navHeight;
+    height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
-    margin-top: -(map-get($spacing-factor, "sm") + $navHeight);
+    margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight});
   }
 
   @media (min-width: map-get($breakpoints, "md")) {
-    height: map-get($spacing-factor, "md") + $navHeight;
+    height: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
-    margin-top: -(map-get($spacing-factor, "md") + $navHeight);
+    margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight});
   }
 
   @media (min-width: map-get($breakpoints, "lg")) {
-    height: map-get($spacing-factor, "lg") + $navHeight;
+    height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
-    margin-top: -(map-get($spacing-factor, "lg") + $navHeight);
+    margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight});
   }
 
   @media (min-width: map-get($breakpoints, "xl")) {
-    height: map-get($spacing-factor, "xl") + $navHeight;
+    height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
-    margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
+    margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight});
   }
 }
 
@@ -71,8 +71,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
   display: inline-block;
   width: 1rem;
   height: 1rem;
-  // Source: https://feathericons.com/
+  background-image: var(--icon-external);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: .66rem auto;

docs/scss/themes/docs.scss

@@ -3,5 +3,6 @@
  */
 
 @import "../../../scss/themes/default/colors";
+@import "docs/icons";
 @import "docs/light";
 @import "docs/dark";

docs/scss/themes/docs/_icons.scss

@@ -0,0 +1,7 @@
+// Icons
+// Source: https://feathericons.com/
+
+:root {
+  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
+  --icon-check:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+}

index.html

@@ -0,0 +1,370 @@
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
+    <title>Class-less example • Pico.css</title>
+    <meta name="description" content="Just a pure semantic HTML markup, without .classes. Built with Pico CSS.">
+    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
+    <link rel="canonical" href="https://picocss.com/examples/classless/">
+
+     <!-- Pico.css -->
+    <link rel="stylesheet" href="css/pico.css">
+  </head>
+
+  <body>
+
+    <header class="container">
+      <hgroup>
+        <h1>Pico</h1>
+        <h2>Graceful & Minimal CSS design system in pure semantic HTML</h2>
+      </hgroup>
+      <nav>
+        <ul>
+          <li>Color scheme:</a></li>
+          <li><a href="#" data-theme-switcher="auto">Auto</a></li>
+          <li><a href="#" data-theme-switcher="light">Light</a></li>
+          <li><a href="#" data-theme-switcher="dark">Dark</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main class="container">
+
+      <section>
+
+        <h2>Buttons</h2>
+        <div class="grid">
+          <button>Primary</button>
+          <button class="secondary">Secondary</button>
+          <button class="contrast">Contrast</button>
+        </div>
+        <div class="grid">
+          <button class="outline">Primary outline</button>
+          <button class="outline secondary">Secondary outline</button>
+          <button class="outline contrast">Contrast outline</button>
+        </div>
+
+      </section>
+
+      <section>
+        <form>
+          <h2>Form elements</h2>
+
+          <!-- Search -->
+          <input type="search" id="search" name="search" placeholder="Search">
+
+          <!-- Text -->
+          <label for="firstname">First name</label>
+          <input type="text" id="firstname" name="firstname" placeholder="First name">
+          <small>Curabitur consequat lacus at lacus porta finibus.</small>
+
+          <!-- States -->
+          <div class="grid">
+            <label for="valid">
+              Valid
+              <input type="text" id="valid" name="valid" placeholder="Valid" aria-label="Valid" class="valid">
+            </label>
+            <label for="invalid">
+              Invalid
+              <input type="text" id="invalid" name="invalid" placeholder="Invalid" aria-label="Invalid"  class="invalid">
+            </label>
+            <label for="disabled">
+              Disabled
+              <input type="text" id="disabled" name="disabled" placeholder="Disabled" aria-label="Disabled" disabled>
+            </label>
+          </div>
+
+          <!-- Date-->
+          <label for="date">Birthdate</label>
+          <input type="date" id="date" name="date" >
+
+          <!-- Select -->
+          <label for="select">Select</label>
+          <select id="select" name="select">
+            <option selected>Choose...</option>
+            <option>...</option>
+          </select>
+
+          <div class="grid">
+
+            <!-- Checkboxes -->
+            <fieldset>
+              <legend><strong>Checkboxes</strong></legend>
+              <label for="checkbox-1">
+                <input type="checkbox" id="checkbox-1" name="checkbox-1" checked>
+                Checkbox
+              </label>
+              <label for="checkbox-2">
+                <input type="checkbox" id="checkbox-2" name="checkbox-2">
+                Checkbox
+              </label>
+              <label for="checkbox-3">
+                <input type="checkbox" id="checkbox-3" name="checkbox-3">
+                Checkbox
+              </label>
+            </fieldset>
+
+            <!-- Radio buttons -->
+            <fieldset>
+              <legend><strong>Radio buttons</strong></legend>
+              <label for="radio-1">
+                <input type="radio" id="radio-1" name="radio" value="radio-1" checked>
+                Radio button
+              </label>
+              <label for="radio-2">
+                <input type="radio" id="radio-2" name="radio" value="radio-2">
+                Radio button
+              </label>
+            </fieldset>
+
+            <!-- Switch -->
+            <fieldset>
+              <legend><strong>Switches</strong></legend>
+              <label for="switch-1">
+                <input type="checkbox" id="switch-1" name="switch-1" role="switch" aria-checked="true" checked>
+                Switch
+              </label>
+              <label for="switch-2">
+                <input type="checkbox" id="switch-2" name="switch-2" role="switch" aria-checked="false">
+                Switch
+              </label>
+            </fieldset>
+
+          </div>
+
+          <!-- File browser -->
+          <label for="file">File browser
+            <input type="file" id="file" name="file">
+          </label>
+
+          <!-- Range slider control -->
+          <label for="range">Range slider
+            <input type="range" min="0" max="100" value="50" id="range" name="range">
+          </label>
+
+          <!-- Buttons -->
+          <input type="reset" value="Reset">
+          <input type="submit" value="Submit">
+
+        </form>
+      </section>
+
+      <article>
+
+        <header>
+          Test
+        </header>
+
+        <h3>Article example</h3>
+        <p>Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra rutrum.</p>
+        <ul>
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li>Nulla pellentesque elit nec velit convallis, sit amet accumsan odio pulvinar.</li>
+          <li>Aliquam venenatis massa a ornare ullamcorper.</li>
+        </ul>
+
+        <footer>
+          Test
+        </footer>
+
+      </article>
+
+      <section>
+
+        <h2>Typography</h2>
+        <p>Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique felis.</p>
+
+        <blockquote>
+          "Blockquote example: Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
+          <footer>
+            <cite>- Phasellus eget lacinia</cite>
+          </footer>
+        </blockquote>
+
+        <h3>Lists</h3>
+        <ul>
+          <li>Aliquam lobortis lacus eu libero ornare facilisis.</li>
+          <li>Nam et magna at libero scelerisque egestas.</li>
+          <li>Suspendisse id nisl ut leo finibus vehicula quis eu ex.</li>
+          <li>Proin ultricies turpis et volutpat vehicula.</li>
+        </ul>
+
+        <h3>Inline text elements</h3>
+        <div class="grid">
+          <p><a href="#">Primary link</a></p>
+          <p><a href="#" class="secondary">Secondary link</a></p>
+          <p><a href="#" class="contrast">Contrast link</a></p>
+        </div>
+        <div class="grid">
+          <p><strong>Bold</strong></p>
+          <p><em>Italic</em></p>
+          <p><u>Underline</u></p>
+        </div>
+        <div class="grid">
+          <p><del>Deleted</del></p>
+          <p><ins>Inserted</ins></p>
+          <p><s>Strikethrough</s></p>
+        </div>
+        <div class="grid">
+          <p><small>Small </small></p>
+          <p>Text <sub>Sub</sub></p>
+          <p>Text <sup>Sup</sup></p>
+        </div>
+        <div class="grid">
+          <p><abbr title="Abbreviation">Abbr.</abbr></p>
+          <p><kbd>Kbd</kbd></p>
+          <p><mark>Highlighted</mark></p>
+        </div>
+
+        <h3>Heading 3</h3>
+        <p>Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
+
+        <h4>Heading 4</h4>
+        <p>Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus.</p>
+
+        <h5>Heading 5</h5>
+        <p>Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam sem.</p>
+
+        <h6>Heading 6</h6>
+        <p>Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in velit.</p>
+
+        <figure>
+          <img src="https://source.unsplash.com/a562ZEFKW8I/2000x1000" alt="Minimal landscape">
+          <figcaption>Image from <a href="https://unsplash.com">unsplash.com</a></figcaption>
+        </figure>
+
+      </section>
+
+      <section aria-label="Responsive table example">
+        <p>Responsive table example</p>
+        <figure>
+          <table>
+            <thead>
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+              </tr>
+            </tbody>
+          </table>
+        </figure>
+
+        <figure>
+          <table role="grid">
+            <thead>
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+                <th scope="col">Heading</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+                <td>Cell</td>
+              </tr>
+            </tbody>
+          </table>
+        </figure>
+      </section>
+
+
+
+    </main>
+
+    <footer class="container">
+      <small>Built with <a href="https://picocss.com">Pico</a> • <a href="https://github.com/picocss/examples/blob/master/classless/index.html">Source code</a></small>
+    </footer>
+
+
+    <script>
+    // Minimal theme switcher
+    (function() {
+     var buttonsTheme = document.querySelectorAll('a[data-theme-switcher]');
+     for (var i = 0; i < buttonsTheme.length; i++) {
+       buttonsTheme[i].addEventListener('click', function(event) {
+         event.preventDefault();
+         document.querySelector('html').setAttribute(
+           'data-theme',
+           event.target.getAttribute('data-theme-switcher'));
+       }, false);
+     }
+    })();
+
+    // Set undeterminate checkbox
+   document.getElementById('checkbox-2').indeterminate = true;
+
+    </script>
+
+  </body>
+
+</html>

scss/_variables.scss

@@ -33,86 +33,6 @@ $enable-transitions: true !default;
 $enable-important: true !default;
 
 
-// Spacings
-// ––––––––––––––––––––
-
-// Gutters and horizontals margins
-// For <body>, .grid, <nav>, <table>
-$spacing-gutter: 1rem !default;
-
-// Blocks verticals margins and paddings
-// For <header>, <main>, <footer>, <section>, <article>
-// This value is proportionally multiplied according breakpoints for great responsive spacings
-$spacing-block: 2rem !default;
-
-// Vertical margins for Typography and Form elements
-// This value is proportionally multiplied according breakpoints for great responsive spacings
-$spacing-typography: 1.5rem !default;
-
-// Spacing between: Label and Input, Checkboxes, Radios
-$spacing-form-elements: $spacing-typography/6 !default;
-
-// Padding for <input> and <button>
-$spacing-input-button-vertical:   .75rem !default;
-$spacing-input-button-horizontal: 1rem !default;
-
-
-// Typography
-// ––––––––––––––––––––
-
-// Sans serif native font stack
-// Source: github.com/csstools/sanitize.css/blob/master/typography.css
-$sans-serif:
-  system-ui,
-  -apple-system,       // macOS 10.11-10.12
-  "Segoe UI",          // Windows 6+
-  "Roboto",            // Android 4+
-  "Ubuntu",            // Ubuntu 10.10+
-  "Cantarell",         // Gnome 3+
-  "Noto Sans",         // KDE Plasma 5+
-  sans-serif,          // Fallback
-  "Apple Color Emoji", // macOS emoji
-  "Segoe UI Emoji",    // Windows emoji
-  "Segoe UI Symbol",   // Windows emoji
-  "Noto Color Emoji"   // Linux emoji
-  !default;
-
-// Monospace native font stack
-// // Source: github.com/csstools/sanitize.css/blob/master/typography.css
-$monospace:
-  "Menlo",             // macOS 10.10+
-  "Consolas",          // Windows 6+
-  "Roboto Mono",       // Android 4+
-  "Ubuntu Monospace",  // Ubuntu 10.10+
-  "Noto Mono",         // KDE Plasma 5+
-  "Oxygen Mono",       // KDE Plasma 4+
-  "Liberation Mono",   // Linux/OpenOffice fallback
-  monospace,           // Fallback
-  "Apple Color Emoji", // macOS emoji
-  "Segoe UI Emoji",    // Windows emoji
-  "Segoe UI Symbol",   // Windows emoji
-  "Noto Color Emoji"   // Linux emoji
-  !default;
-
-$line-height:    1.5 !default;
-$text-weight:    400 !default;
-$heading-weight: 700 !default;
-
-
-// Blocks
-// ––––––––––––––––––––
-
-// For <form> elements, <button>, <article>, <details> inlined code, tooltips
-$round: .25rem !default;
-
-
-// Transitions
-// ––––––––––––––––––––
-
-// For <a>, <form> elements and <button>
-$transition: .2s ease-in-out !default;
-
-
 // Responsive
 // ––––––––––––––––––––
 
@@ -126,7 +46,6 @@ $transition: .2s ease-in-out !default;
 // To provide an easy and fine styling on each breakpoint
 // we didn't use @each, @mixin or @include.
 // That means you need to edit each CSS selector file to add a breakpoint
-// You can disable any viewports, base-font and spacing-factor with 'null'
 
 // Breakpoints
 // 'null' disable the breakpoint
@@ -146,24 +65,3 @@ $viewports: (
   lg: 920px,
   xl: 1130px
 ) !default;
-
-// Base font for .rem
-// 'null' disable the base font on a breakpoint
-// 'xs' should not be 'null'
-$base-font: (
-  xs: 16px,
-  sm: 17px,
-  md: 18px,
-  lg: 19px,
-  xl: 20px
-) !default;
-
-// Multiplication factor for spacings
-// 'null' disable spacing factor on a breakpoint
-$spacing-factor: (
-  xs: 1,
-  sm: 1.25,
-  md: 1.5,
-  lg: 1.75,
-  xl: 2
-) !default;

scss/components/_accordion.scss

@@ -5,8 +5,8 @@
 
 details {
   display: block;
-  margin-bottom: $spacing-typography;
+  margin-bottom: var(--spacing-typography);
-  padding-bottom: $spacing-typography/2;
+  padding-bottom: calc(var(--spacing-typography) / 2);
   border-bottom: 1px solid var(--muted-border);
 
   summary {
@@ -32,12 +32,15 @@ details {
       height: 1rem;
       float: right;
       transform: rotate(-90deg);
-      // Source: https://feathericons.com/
+      background-image: var(--icon-chevron);
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
       background-position: center;
       background-repeat: no-repeat;
       background-size: 1rem auto;
       content: '';
+
+      @if $enable-transitions {
+        transition: transform var(--transition);
+      }
     }
 
     &:focus {
@@ -45,7 +48,7 @@ details {
     }
 
     ~ * {
-      margin-top: $spacing-typography/2;
+      margin-top: calc(var(--spacing-typography) / 2);
 
       ~ * {
         margin-top: 0;
@@ -57,7 +60,7 @@ details {
   &[open] {
 
     summary {
-      margin-bottom: $spacing-typography/4;
+      margin-bottom: calc(var(--spacing-typography) / 4);
       color: var(--muted-text);
 
       &::after {

scss/components/_card-sectioning.scss

@@ -10,135 +10,123 @@ article {
   > header,
   > footer,
   > pre {
-    margin: -$spacing-gutter;
+    margin: calc(var(--spacing-gutter) * -1);
-    padding: $spacing-block $spacing-gutter;
+    padding: var(--spacing-block) var(--spacing-gutter);
 
     @if map-get($breakpoints, "sm") and
-      map-get($spacing-factor, "sm") and
       $enable-responsive-spacings {
 
       @media (min-width: map-get($breakpoints, "sm")) {
-        margin: -$spacing-block*map-get($spacing-factor, "sm");
+        margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
-        padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
+        padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
       }
     }
 
     @if map-get($breakpoints, "md") and
-      map-get($spacing-factor, "md") and
       $enable-responsive-spacings {
 
       @media (min-width: map-get($breakpoints, "md")) {
-        margin: -$spacing-block*map-get($spacing-factor, "md");
+        margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
-        padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
+        padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
       }
     }
 
     @if map-get($breakpoints, "lg") and
-      map-get($spacing-factor, "lg") and
       $enable-responsive-spacings {
 
       @media (min-width: map-get($breakpoints, "lg")) {
-        margin: -$spacing-block*map-get($spacing-factor, "lg");
+        margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
-        padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
+        padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
       }
     }
 
     @if map-get($breakpoints, "xl") and
-      map-get($spacing-factor, "xl") and
       $enable-responsive-spacings {
 
       @media (min-width: map-get($breakpoints, "xl")) {
-        margin: -$spacing-block*map-get($spacing-factor, "xl");
+        margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
-        padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
+        padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
       }
     }
   }
   > header {
-    margin-top: -$spacing-gutter*2;
+    margin-top: calc(var(--spacing-gutter) * -2);
-    margin-bottom: $spacing-block;
+    margin-bottom: var(--spacing-block);
 
     @if map-get($breakpoints, "sm") and
-      map-get($spacing-factor, "sm") and
       $enable-responsive-spacings {
 
       @media (min-width: map-get($breakpoints, "sm")) {
-        margin-top: -($spacing-block*map-get($spacing-factor, "sm"));
+        margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
-        margin-bottom: $spacing-block*map-get($spacing-factor, "sm");
+        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm));
       }
     }
 
     @if map-get($breakpoints, "md") and
-      map-get($spacing-factor, "md") and
       $enable-responsive-spacings {
 
       @media (min-width: map-get($breakpoints, "md")) {
-        margin-top: -($spacing-block*map-get($spacing-factor, "md"));
+        margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
-        margin-bottom: $spacing-block*map-get($spacing-factor, "md");
+        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md));
       }
     }
 
     @if map-get($breakpoints, "lg") and
-      map-get($spacing-factor, "lg") and
       $enable-responsive-spacings {
 
       @media (min-width: map-get($breakpoints, "lg")) {
-        margin-top: -($spacing-block*map-get($spacing-factor, "lg"));
+        margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
-        margin-bottom: $spacing-block*map-get($spacing-factor, "lg");
+        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg));
       }
     }
 
     @if map-get($breakpoints, "xl") and
-      map-get($spacing-factor, "xl") and
       $enable-responsive-spacings {
 
       @media (min-width: map-get($breakpoints, "xl")) {
-        margin-top: -($spacing-block*map-get($spacing-factor, "xl"));
+        margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
-        margin-bottom: $spacing-block*map-get($spacing-factor, "xl");
+        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl));
       }
     }
   }
   > footer,
   > pre {
-    margin-top: $spacing-block;
+    margin-top: var(--spacing-block);
-    margin-bottom: -$spacing-gutter*2;
+    margin-bottom: calc(var(--spacing-gutter) * -2);
 
     @if map-get($breakpoints, "sm") and
-      map-get($spacing-factor, "sm") and
       $enable-responsive-spacings {
 
       @media (min-width: map-get($breakpoints, "sm")) {
-        margin-top: $spacing-block*map-get($spacing-factor, "sm");
+        margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm));
-        margin-bottom: -($spacing-block*map-get($spacing-factor, "sm"));
+        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
       }
     }
 
     @if map-get($breakpoints, "md") and
-      map-get($spacing-factor, "md") and
       $enable-responsive-spacings {
 
       @media (min-width: map-get($breakpoints, "md")) {
-        margin-top: $spacing-block*map-get($spacing-factor, "md");
+        margin-top: calc(var(--spacing-block) * var(--spacing-factor-md));
-        margin-bottom: -($spacing-block*map-get($spacing-factor, "md"));
+        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
       }
     }
 
     @if map-get($breakpoints, "lg") and
-      map-get($spacing-factor, "lg") and
       $enable-responsive-spacings {
 
       @media (min-width: map-get($breakpoints, "lg")) {
-        margin-top: $spacing-block*map-get($spacing-factor, "lg");
+        margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg));
-        margin-bottom: -($spacing-block*map-get($spacing-factor, "lg"));
+        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
       }
     }
 
     @if map-get($breakpoints, "xl") and
-      map-get($spacing-factor, "xl") and
       $enable-responsive-spacings {
 
       @media (min-width: map-get($breakpoints, "xl")) {
-        margin-top: $spacing-block*map-get($spacing-factor, "xl");
+        margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl));
-        margin-bottom: -($spacing-block*map-get($spacing-factor, "xl"));
+        margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
       }
     }
   }

scss/components/_card.scss

@@ -3,53 +3,50 @@
  */
 
 article {
-  margin: $spacing-block 0;
+  margin: var(--spacing-block) 0;
-  padding: $spacing-block $spacing-gutter;
+  padding: var(--spacing-block) var(--spacing-gutter);
   overflow: hidden;
-  border-radius: $round;
+  border-radius: var(--block-round);
   background: var(--card-background);
   box-shadow: var(--card-shadow);
 
   @if map-get($breakpoints, "sm") {
     @media (min-width: map-get($breakpoints, "sm")) {
-      @if map-get($spacing-factor, "sm") and $enable-responsive-spacings {
+      @if $enable-responsive-spacings {
-        margin: ($spacing-block*map-get($spacing-factor, "sm")) 0;
+        margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;
-        padding: $spacing-block*map-get($spacing-factor, "sm");
+        padding: calc(var(--spacing-block) * var(--spacing-factor-sm));
       }
       @else {
-        margin: $spacing-block 0;
+        margin: var(--spacing-block) 0;
-        padding: $spacing-block;
+        padding: var(--spacing-block);
       }
     }
   }
 
   @if map-get($breakpoints, "md") and
-    map-get($spacing-factor, "md") and
     $enable-responsive-spacings {
 
     @media (min-width: map-get($breakpoints, "md")) {
-      margin: ($spacing-block*map-get($spacing-factor, "md")) 0;
+      margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0;
-      padding: $spacing-block*map-get($spacing-factor, "md");
+      padding: calc(var(--spacing-block) * var(--spacing-factor-md));
     }
   }
 
   @if map-get($breakpoints, "lg") and
-    map-get($spacing-factor, "lg") and
     $enable-responsive-spacings {
 
     @media (min-width: map-get($breakpoints, "lg")) {
-      margin: ($spacing-block*map-get($spacing-factor, "lg")) 0;
+      margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;
-      padding: $spacing-block*map-get($spacing-factor, "lg");
+      padding: calc(var(--spacing-block) * var(--spacing-factor-lg));
     }
   }
 
   @if map-get($breakpoints, "xl") and
-    map-get($spacing-factor, "xl") and
     $enable-responsive-spacings {
 
     @media (min-width: map-get($breakpoints, "xl")) {
-      margin: ($spacing-block*map-get($spacing-factor, "xl")) 0;
+      margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;
-      padding: $spacing-block*map-get($spacing-factor, "xl");
+      padding: calc(var(--spacing-block) * var(--spacing-factor-xl));
     }
   }
 

scss/components/_nav.scss

@@ -19,17 +19,17 @@ nav {
     list-style: none;
 
     &:first-of-type {
-      margin-left: -$spacing-gutter/2;
+      margin-left: calc(var(--spacing-gutter) * -0.5);
     }
     &:last-of-type {
-      margin-right: -$spacing-gutter/2;
+      margin-right: calc(var(--spacing-gutter) * -0.5);
     }
   }
 
   li {
     display: inline-block;
     margin: 0;
-    padding: $spacing-gutter $spacing-gutter/2;
+    padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
 
     // HACK: Input & Button inside Nav
     > *,
@@ -40,23 +40,25 @@ nav {
 
   a {
     display: block;
-    margin: -$spacing-gutter (-$spacing-gutter/2);
+    margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);
-    padding: $spacing-gutter $spacing-gutter/2;
+    padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
-    border-radius: $round;
+    border-radius: var(--block-round);
+
+    @if $enable-important {
+      text-decoration: none !important;
+    }
+    @else {
+      text-decoration: none;
+    }
 
     &:hover,
     &:active,
     &:focus {
-      text-decoration: none;
+      @if $enable-important {
-    }
+        text-decoration: none !important;
-
+      }
-    // Disable underline for a.contrast in nav
+      @else {
-    @if $enable-classes {
+        text-decoration: none;
-      &.contrast:not([role="button"]),
-      &.contrast:not([role="button"]):hover,
-      &.contrast:not([role="button"]):active,
-      &.contrast:not([role="button"]):focus  {
-        box-shadow: none;
       }
     }
   }
@@ -73,11 +75,11 @@ aside {
   }
 
   li {
-    padding: $spacing-gutter/2;
+    padding: calc(var(--spacing-gutter) / 2);
 
     a {
-      margin: -$spacing-gutter/2;
+      margin: calc(var(--spacing-gutter) * -0.5);
-      padding: $spacing-gutter/2;
+      padding: calc(var(--spacing-gutter) / 2);
     }
   }
 }

scss/components/_tooltip.scss

@@ -21,12 +21,12 @@
      padding: .25rem .5rem;
      overflow: hidden;
      transform: translate(-50%, -.25rem);
-     border-radius: $round;
+     border-radius: var(--block-round);
      background: var(--contrast);
      color: var(--contrast-inverse);
      font-size: .85rem;
      font-style: normal;
-     font-weight: normal;
+     font-weight: var(--text-weight);
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;

scss/content/_button-styles.scss

@@ -9,17 +9,24 @@
   input[type="submit"].secondary,
   input[type="reset"],
   a[role="button"].secondary {
+    border: var(--button-border-width) solid var(--secondary-border);
     background-color: var(--secondary);
     color: var(--secondary-inverse);
 
     &:hover,
     &:active,
     &:focus {
+      border-color: var(--secondary-hover-border);
       background-color: var(--secondary-hover);
     }
 
     &:focus {
-      box-shadow: 0 0 0 0.2rem var(--secondary-focus);
+      @if $enable-important {
+        box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
+      }
+      @else {
+        box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
+      }
     }
   }
 
@@ -29,17 +36,19 @@
   input[type="submit"].contrast,
   input[type="reset"].contrast,
   a[role="button"].contrast {
+    border: var(--button-border-width) solid var(--contrast-border);
     background-color: var(--contrast);
     color: var(--contrast-inverse);
 
     &:hover,
     &:active,
     &:focus {
+      border-color: var(--contrast-hover-border);
       background-color: var(--contrast-hover);
     }
 
     &:focus {
-      box-shadow: 0 0 0 0.2rem var(--contrast-focus);
+      box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
     }
   }
 
@@ -48,14 +57,14 @@
   button.outline,
   input[type="submit"].outline,
   a.outline[role="button"] {
-    border: 1px solid var(--primary);
+    border: var(--button-border-width) solid var(--primary-border);
     background-color: transparent;
     color: var(--primary);
 
     &:hover,
     &:active,
     &:focus {
-      border: 1px solid var(--primary-hover);
+      border: 1px solid var(--primary-hover-border);
       color: var(--primary-hover);
     }
   }
@@ -66,20 +75,16 @@
   input[type="submit"].outline.secondary,
   input[type="reset"].outline,
   a[role="button"].outline.secondary {
-    border: 1px solid var(--secondary);
+    border: var(--button-border-width) solid var(--secondary-border);
     background-color: transparent;
     color: var(--secondary);
 
     &:hover,
     &:active,
     &:focus {
-      border: 1px solid var(--secondary-hover);
+      border: 1px solid var(--secondary-hover-border);
       color: var(--secondary-hover);
     }
-
-    &:focus {
-      box-shadow: 0 0 0 0.2rem var(--secondary-focus);
-    }
   }
 
 
@@ -88,19 +93,15 @@
   input[type="submit"].outline.contrast,
   input[type="reset"].outline.contrast,
   a[role="button"].outline.contrast {
-    border: 1px solid var(--contrast);
+    border: var(--button-border-width) solid var(--contrast-border);
     background-color: transparent;
     color: var(--contrast);
 
     &:hover,
     &:active,
     &:focus {
-      border: 1px solid var(--contrast-hover);
+      border: 1px solid var(--contrast-hover-border);
       color: var(--contrast-hover);
     }
-
-    &:focus {
-      box-shadow: 0 0 0 0.2rem var(--contrast-focus);
-    }
   }
 }

scss/content/_button.scss

@@ -42,7 +42,7 @@ button::-moz-focus-inner,
 button {
   display: block;
   width: 100%;
-  margin-bottom: $spacing-typography;
+  margin-bottom: var(--spacing-typography);
 }
 
 a[role="button"] {
@@ -53,35 +53,40 @@ a[role="button"] {
 button,
 input[type="submit"],
 input[type="button"],
+input[type="reset"],
 [type="file"]::-webkit-file-upload-button,
 a[role="button"] {
-  padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
+  padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
-  border: 1px solid transparent;
+  border: var(--button-border-width) solid var(--primary-border);
-  border-radius: $round;
+  border-radius: var(--button-round);
   outline: none;
   background-color: var(--primary);
+  box-shadow: var(--button-shadow);
   color: var(--primary-inverse);
   font-size: 1rem;
-  font-weight: normal;
+  font-weight: var(--buttons-weight);
-  line-height: $line-height;
+  line-height: var(--line-height);
   text-align: center;
   cursor: pointer;
 
   @if $enable-transitions {
     transition:
-      background-color $transition,
+      background-color var(--transition),
-      color $transition,
+      border-color var(--transition),
-      box-shadow $transition;
+      color var(--transition),
+      box-shadow var(--transition);
   }
 
   &:hover,
   &:active,
   &:focus {
+    border-color: var(--primary-hover-border);
     background-color: var(--primary-hover);
+    box-shadow: var(--button-hover-shadow);
   }
 
   &:focus {
-    box-shadow: 0 0 0 0.2rem var(--primary-focus);
+    box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus);
   }
 }
 

scss/content/_code.scss

@@ -14,7 +14,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: $monospace; // 1
+  font-family: var(--code-font); // 1
   font-size: 1rem; // 2
 }
 
@@ -34,7 +34,7 @@ kbd {
   background: var(--code-inlined);
   color: var(--code-color-1);
   font-size: 85%;
-  font-weight: 400;
+  font-weight: var(--code-weight);
   line-height: initial;
 
   @if map-get($breakpoints, "sm") and $enable-responsive-typography {
@@ -65,13 +65,13 @@ code,
 kbd {
   display: inline-block;
   padding: .375rem .5rem;
-  border-radius: $round;
+  border-radius: var(--block-round);
 }
 
 pre {
   display: block;
-  margin-bottom: $spacing-block;
+  margin-bottom: var(--spacing-block);
-  padding: $spacing-block $spacing-gutter;
+  padding: var(--spacing-block) var(--spacing-gutter);
   overflow-x: auto;
   background: var(--code-background);
 
@@ -80,7 +80,7 @@ pre {
     padding: 0;
     background: transparent;
     font-size: 14px;
-    line-height: $line-height;
+    line-height: var(--line-height);
   }
 }
 
@@ -90,7 +90,7 @@ code {
   // Tags
   b {
     color: var(--code-color-2);
-    font-weight: normal;
+    font-weight: var(--code-weight);
   }
 
   // Properties

scss/content/_form-alt-input-types.scss

@@ -17,11 +17,11 @@
   // Swatch
   &::-webkit-color-swatch {
     border: none;
-    border-radius: $round/2;
+    border-radius: calc(var(--block-round)/2);
   }
   &::-moz-color-swatch {
     border: none;
-    border-radius: $round/2;
+    border-radius: calc(var(--block-round)/2);
   }
 }
 
@@ -31,9 +31,7 @@
 [type="month"],
 [type="time"],
 [type="week"] {
-
+  background-image: var(--icon-date);
-  // Source: https://feathericons.com/
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   background-position: center right .75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -45,30 +43,40 @@
 
 // Time
 [type="time"] {
-  // Source: https://feathericons.com/
+  background-image: var(--icon-time);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
 // File
 [type="file"] {
-  padding: $spacing-input-button-horizontal/2 0;
+  padding: calc(var(--form-element-spacing-vertical)/2) 0;
   border: none;
   border-radius: 0;
   background: none;
-  color: var(--muted-text);
 
   &::-webkit-file-upload-button {
-    padding-top: $spacing-input-button-horizontal/2;
+    padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);
-    padding-bottom: $spacing-input-button-horizontal/2;
+    border: var(--button-border-width) solid var(--secondary-border);
     background-color: var(--secondary);
+    box-shadow: var(--button-shadow);
     color: var(--secondary-inverse);
+
+    @if $enable-transitions {
+      transition:
+        background-color var(--transition),
+        border-color var(--transition),
+        color var(--transition),
+        box-shadow var(--transition);
+    }
   }
 
   &:hover,
   &:active,
   &:focus {
     border: none;
+    background: none;
+
     &::-webkit-file-upload-button {
+      border-color: var(--secondary-hover-border);
       background-color: var(--secondary-hover);
     }
   }
@@ -76,7 +84,7 @@
   &:focus {
     box-shadow: none;
     &::-webkit-file-upload-button {
-      box-shadow: 0 0 0 0.2rem var(--secondary-focus);
+      box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
     }
   }
 }
@@ -101,38 +109,39 @@
   &::-webkit-slider-runnable-track {
     width: 100%;
     height: $height-track;
-    border-radius: $round;
+    border-radius: var(--block-round);
     background-color: var(--input-border);
 
     @if $enable-transitions {
       transition:
-        background-color $transition,
+        background-color var(--transition),
-        box-shadow $transition;
+        box-shadow var(--transition);
     }
   }
+
   &::-moz-range-track {
     width: 100%;
     height:$height-track;
-    border-radius: $round;
+    border-radius: var(--block-round);
     background-color: var(--input-border);
 
     @if $enable-transitions {
       transition:
-        background-color $transition,
+        background-color var(--transition),
-        box-shadow $transition;
+        box-shadow var(--transition);
     }
   }
 
   &::-ms-track {
     width: 100%;
     height: $height-track;
-    border-radius: $round;
+    border-radius: var(--block-round);
     background-color: var(--input-border);
 
     @if $enable-transitions {
       transition:
-        background-color $transition,
+        background-color var(--transition),
-        box-shadow $transition;
+        box-shadow var(--transition);
     }
   }
 
@@ -146,16 +155,15 @@
     width: $height-thumb;
     height: $height-thumb;
     margin-top: #{(-($height-thumb/2) + ($height-track/2))};
-    border: 0;
+    border: $border-thumb solid var(--input-background);
-    border: $border-thumb solid var(--background);
     border-radius: 50%;
     background-color: var(--text);
     cursor: pointer;
 
     @if $enable-transitions {
       transition:
-        background-color $transition,
+        background-color var(--transition),
-        transform $transition;
+        transform var(--transition);
     }
   }
 
@@ -164,15 +172,15 @@
     width: $height-thumb;
     height: $height-thumb;
     margin-top: #{(-($height-thumb/2) + ($height-track/2))};
-    border: 0;
+    border: $border-thumb solid var(--input-background);
     border-radius: 50%;
     background-color: var(--text);
     cursor: pointer;
 
     @if $enable-transitions {
       transition:
-        background-color $transition,
+        background-color var(--transition),
-        transform $transition;
+        transform var(--transition);
     }
   }
 
@@ -181,39 +189,36 @@
     width: $height-thumb;
     height: $height-thumb;
     margin-top: #{(-($height-thumb/2) + ($height-track/2))};
-    border: 0;
+    border: $border-thumb solid var(--input-background);
     border-radius: 50%;
     background-color: var(--text);
     cursor: pointer;
 
     @if $enable-transitions {
       transition:
-        background-color $transition,
+        background-color var(--transition),
-        transform $transition;
+        transform var(--transition);
     }
   }
 
   &:focus {
+    background: transparent;
 
     // Slider Track
     &::-webkit-slider-runnable-track {
-      background-color: var(--muted-text);
+      box-shadow: 0 0 0 0.1rem var(--input-focus);
-      box-shadow: 0 0 0 0.1rem var(--primary-focus);
     }
 
     &::-moz-range-track {
-      background-color: var(--muted-text);
+      box-shadow: 0 0 0 0.1rem var(--input-focus);
-      box-shadow: 0 0 0 0.1rem var(--primary-focus);
     }
 
     &::-ms-track {
-      background-color: var(--muted-text);
+      box-shadow: 0 0 0 0.1rem var(--input-focus);
-      box-shadow: 0 0 0 0.1rem var(--primary-focus);
     }
 
     &::-ms-fill-lower {
-      background-color: var(--muted-text);
+      box-shadow: 0 0 0 0.1rem var(--input-focus);
-      box-shadow: 0 0 0 0.1rem var(--primary-focus);
     }
   }
 
@@ -243,12 +248,11 @@
 
 // Search
 [type="search"] {
-  border-radius: #{1rem*$line-height + $spacing-input-button-vertical*2};
+  border-radius: 5rem;
 
   @if $enable-important {
-    padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
+    padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
-    // Source: https://feathericons.com/
+    background-image: var(--icon-search);
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
     background-position: center left .75rem;
     background-repeat: no-repeat;
     background-size: 1rem auto;

scss/content/_form-checkbox-radio.scss

@@ -11,9 +11,9 @@
   display: inline-block;
   width: 1.25rem;
   height: 1.25rem;
+  margin-top: -.125rem;
   margin-right: .375rem;
-  margin-bottom: $spacing-form-elements;
+  border-width: var(--checkbox-radio-border-width);
-  border-width: 2px;
   vertical-align: middle;
   cursor: pointer;
 
@@ -21,16 +21,20 @@
     display: none; // unstyle IE checkboxes
   }
 
-  &:checked {
+  &:checked,
-    border-color: var(--primary);
+  &:indeterminate {
-    background-color: var(--primary);
+    border-color: var(--input-hover-border);
-    // Source: https://feathericons.com/
+    background-color: var(--input-hover-border);
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    background-image: var(--icon-checkbox);
     background-position: center;
     background-repeat: no-repeat;
     background-size: .75rem auto;
   }
 
+  &:indeterminate {
+    background-image: var(--icon-minus);
+  }
+
   & ~ label {
     display: inline-block;
     margin-right: .375rem;
@@ -45,8 +49,8 @@
 
   &:checked {
     border-width: .33rem;
-    border-color: var(--primary);
+    border-color: var(--input-hover-border);
-    background-color: var(--primary-inverse);
+    background-color: var(--input-inverse);
     background-image: none;
   }
 }
@@ -57,23 +61,22 @@
   // Config
   $switch-height:      1.25rem;
   $switch-width:       2.25rem;
-  $switch-border:      3px;
   $switch-transition:  .1s ease-in-out;
 
   // Styles
   width: $switch-width;
   height: $switch-height;
-  border: $switch-border solid var(--input-border);
+  border: var(--switch-border-width) solid var(--input-border);
   border-radius: $switch-height;
   background-color: var(--input-border);
   line-height: $switch-height;
 
   &:before {
     display: block;
-    width: calc(#{$switch-height} - #{$switch-border*2});
+    width: calc(#{$switch-height} - (var(--switch-border-width)*2));
     height: 100%;
     border-radius: 50%;
-    background-color: var(--primary-inverse);
+    background-color: var(--input-inverse);
     content: '';
 
     @if $enable-transitions {
@@ -82,13 +85,13 @@
   }
 
   &:checked {
-    border-color: var(--primary);
+    border-color: var(--input-hover-border);
-    background-color: var(--primary);
+    background-color: var(--input-hover-border);
     background-image: none;
 
     &::before {
       margin-right: 0;
-      margin-left: calc(#{$switch-width/2} - #{$switch-border});
+      margin-left: calc(#{$switch-width/2} - var(--switch-border-width));
     }
   }
 }

scss/content/_form.scss

@@ -18,7 +18,7 @@ textarea {
   font-family: inherit; // 1
   font-size: 1rem; // 1
   letter-spacing: inherit; // 2
-  line-height: $line-height; // 1
+  line-height: var(--line-height); // 1
 }
 
 // Show the overflow in IE.
@@ -36,7 +36,6 @@ select {
 // 3. Remove the padding so developers are not caught out when they zero out
 // `fieldset` elements in all browsers
 legend {
-  display: table; // 1
   max-width: 100%; // 1
   padding: 0; // 3
   color: inherit; // 2
@@ -118,13 +117,17 @@ textarea {
 
 // Force height for alternatives input types
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
-  height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px);
+  height: calc(
+    (1rem * var(--line-height)) +
+    (var(--form-element-spacing-vertical) * 2) +
+    (var(--form-element-border-width) * 2)
+  );
 }
 
 // Fieldset
 fieldset {
   margin: 0;
-  margin-bottom: $spacing-typography;
+  margin-bottom: var(--spacing-typography);
   padding: 0;
   border: 0;
 }
@@ -133,7 +136,7 @@ fieldset {
 label,
 fieldset legend {
   display: block;
-  margin-bottom: $spacing-form-elements;
+  margin-bottom: var(--spacing-form-element);
   vertical-align: middle;
 }
 
@@ -153,7 +156,7 @@ textarea {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
   vertical-align: middle;
 }
 
@@ -161,20 +164,20 @@ textarea {
 input,
 select,
 textarea {
-  border: 1px solid var(--input-border);
+  border: var(--form-element-border-width) solid var(--input-border);
-  border-radius: $round;
+  border-radius: var(--block-round);
   outline: none;
   background-color: var(--input-background);
   color: var(--text);
-  font-weight: normal;
+  font-weight: var(--form-element-weight);
 
 
   @if $enable-transitions {
     transition:
-      background-color $transition,
+      background-color var(--transition),
-      border-color $transition,
+      border-color var(--transition),
-      color $transition,
+      color var(--transition),
-      box-shadow $transition;
+      box-shadow var(--transition);
   }
 
   &::placeholder,
@@ -185,7 +188,8 @@ textarea {
 
   &:active,
   &:focus {
-    border-color: var(--primary);
+    border-color: var(--input-hover-border);
+    background-color: var(--input-hover-background);
   }
 
   &[readonly],
@@ -196,6 +200,16 @@ textarea {
     & ~ label {
       color: var(--muted-text);
     }
+
+    &:active,
+    &:focus {
+      @if $enable-important {
+        box-shadow: none !important;
+      }
+      @else {
+        box-shadow: none;
+      }
+    }
   }
 
   &[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
@@ -203,8 +217,7 @@ textarea {
   }
 
   &[disabled] {
-    cursor: not-allowed;
+    opacity: .66;
-    opacity: .5;
   }
 
   // Validation states
@@ -220,13 +233,11 @@ textarea {
     }
 
     &.valid {
-      // Source: https://feathericons.com/
+      background-image: var(--icon-valid);
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
     }
 
     &.invalid {
-      // Source: https://feathericons.com/
+      background-image: var(--icon-invalid);
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
     }
   }
 }
@@ -235,7 +246,7 @@ textarea {
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea {
-  margin-bottom: $spacing-typography;
+  margin-bottom: var(--spacing-typography);
 }
 
 // Focus styles (Not Range and File)
@@ -243,7 +254,7 @@ input:not([type="range"]):not([type="file"]),
 select,
 textarea {
   &:focus  {
-    box-shadow: 0 0 0 0.2rem var(--primary-focus);
+    box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
  }
 }
 
@@ -257,9 +268,8 @@ select {
   }
 
   &:not([multiple]):not([size]) {
-    padding-right: #{$spacing-input-button-horizontal + 1.5rem};
+    padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-    // Source: https://feathericons.com/
+    background-image: var(--icon-chevron);
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
     background-position: center right .75rem;
     background-repeat: no-repeat;
     background-size: 1rem auto;
@@ -276,8 +286,8 @@ input,
 select,
 textarea {
   + small {
-    margin-top: -$spacing-typography/1.5;
+    margin-top: calc(var(--spacing-typography) * -0.5);
-    margin-bottom: $spacing-typography;
+    margin-bottom: var(--spacing-typography);
   }
 }
 
@@ -286,6 +296,6 @@ label {
   & > input,
   & > select,
   & > textarea {
-    margin-top: $spacing-form-elements;
+    margin-top: var(--spacing-form-element);
   }
 }

scss/content/_table.scss

@@ -26,11 +26,11 @@ table {
 // Cells
 th,
 td {
-  padding: ($spacing-gutter/2) $spacing-gutter;
+  padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter);
   border-bottom: 1px solid var(--table-border);
   color: var(--muted-text);
   font-size: 0.875rem;
-  font-weight: $text-weight;
+  font-weight: var(--text-weight);
   text-align: left;
 }
 
@@ -50,6 +50,8 @@ thead {
 }
 
 // Striping
-tbody tr:nth-child(odd) {
+table[role="grid"] {
-  background-color: var(--table-stripping);
+  tbody tr:nth-child(odd) {
+    background-color: var(--table-stripping);
+  }
 }

scss/content/_typography.scss

@@ -61,7 +61,7 @@ pre,
 table,
 ul {
   margin-top: 0;
-  margin-bottom: $spacing-typography;
+  margin-bottom: var(--spacing-typography);
   color: var(--text);
   font-size: 1rem;
   font-style: normal;
@@ -76,10 +76,10 @@ a {
 
   @if $enable-transitions {
     transition:
-      background-color $transition,
+      background-color var(--transition),
-      color $transition,
+      color var(--transition),
-      text-decoration $transition,
+      text-decoration var(--transition),
-      box-shadow $transition;
+      box-shadow var(--transition);
   }
 
   &:hover,
@@ -99,6 +99,7 @@ a {
 @if $enable-classes {
   a.secondary {
     color: var(--secondary);
+    text-decoration: underline;
 
     &:hover,
     &:active,
@@ -114,16 +115,14 @@ a {
 
 // Link .contrast
 @if $enable-classes {
-  a.contrast:not([role="button"]) {
+  a.contrast {
-    box-shadow: inset 0 -.33rem 0 var(--contrast-border);
     color: var(--contrast);
+    text-decoration: underline;
 
     &:hover,
     &:active,
     &:focus {
-      box-shadow: inset 0 -.33rem 0 var(--contrast-border-h);
       color: var(--contrast-hover);
-      text-decoration: none;
     }
 
     &:focus {
@@ -141,43 +140,43 @@ h4,
 h5,
 h6 {
   margin-top: 0;
-  margin-bottom: $spacing-typography;
+  margin-bottom: var(--spacing-typography);
-  font-weight: $heading-weight;
+  font-weight: var(--titles-weight);
 }
 
 h1 {
-  margin-bottom: $spacing-typography*2;
+  margin-bottom: calc(var(--spacing-typography) * 2);
   color: var(--h1);
-  font-size: 2rem;
+  font-size: var(--h1-size);
 }
 
 h2 {
-  margin-bottom: $spacing-typography*1.75;
+  margin-bottom: calc(var(--spacing-typography) * 1.75);
   color: var(--h2);
-  font-size: 1.75rem;
+  font-size: var(--h2-size);
 }
 
 h3 {
-  margin-bottom: $spacing-typography*1.5;
+  margin-bottom: calc(var(--spacing-typography) * 1.5);
   color: var(--h3);
-  font-size: 1.5rem;
+  font-size: var(--h3-size);
 }
 
 h4 {
-  margin-bottom: $spacing-typography*1.25;
+  margin-bottom: calc(var(--spacing-typography) * 1.25);
   color: var(--h4);
-  font-size: 1.25rem;
+  font-size: var(--h4-size);
 }
 
 h5 {
-  margin-bottom: $spacing-typography*1.125;
+  margin-bottom: calc(var(--spacing-typography) * 1.125);
   color: var(--h5);
-  font-size: 1.125rem;
+  font-size: var(--h5-size);
 }
 
 h6 {
   color: var(--h6);
-  font-size: 1rem;
+  font-size: var(--h6-size);
 }
 
 // Margin-top for headings after a typography block
@@ -192,34 +191,34 @@ pre,
 table,
 ul {
   & ~ h1 {
-    margin-top: $spacing-typography*2;
+    margin-top: calc(var(--spacing-typography) * 2);
   }
 
   & ~ h2 {
-    margin-top: $spacing-typography*1.75;
+    margin-top: calc(var(--spacing-typography) * 1.75);
   }
 
   & ~ h3 {
-    margin-top: $spacing-typography*1.5;
+    margin-top: calc(var(--spacing-typography) * 1.5);
   }
 
   & ~ h4 {
-    margin-top: $spacing-typography*1.25;
+    margin-top: calc(var(--spacing-typography) * 1.25);
   }
 
   & ~ h5 {
-    margin-top: $spacing-typography*1.125;
+    margin-top: calc(var(--spacing-typography) * 1.125);
   }
 
   & ~ h6 {
-    margin-top: $spacing-typography;
+    margin-top: calc(var(--spacing-typography));
   }
 }
 
 
 // Multi-level heading
 hgroup {
-  margin-bottom: $spacing-typography;
+  margin-bottom: var(--spacing-typography);
 
   *{
     margin-bottom: 0;
@@ -228,13 +227,13 @@ hgroup {
   > *:last-child {
     color: var(--muted-text);
     font-size: 1.125rem;
-    font-weight: normal;
+    font-weight: unset;
   }
 }
 
 // Paragraphs
 p {
-  margin-bottom: $spacing-typography/2;
+  margin-bottom: var(--spacing-typography);
 }
 
 // Small
@@ -268,10 +267,10 @@ small {
 // Lists
 ul,
 ol {
-  padding-left: $spacing-typography;
+  padding-left: var(--spacing-typography);
 
   li {
-    margin-bottom: $spacing-typography/4;
+    margin-bottom: calc(var(--spacing-typography) / 4);
   }
 }
 
@@ -290,12 +289,12 @@ mark {
 // Blockquote
 blockquote {
   display: block;
-  margin: ($spacing-typography*2) 0;
+  margin: var(--spacing-typography) 0;
-  padding: $spacing-gutter;
+  padding: var(--spacing-gutter);
   border-left: .25rem solid var(--muted-border);
 
   footer {
-    margin-top: $spacing-typography/2;
+    margin-top: calc(var(--spacing-typography) / 2);
     color: var(--muted-text);
   }
 }

scss/layout/_container.scss

@@ -9,8 +9,8 @@
     width: 100%;
     margin-right: auto;
     margin-left: auto;
-    padding-right: $spacing-gutter;
+    padding-right: var(--spacing-gutter);
-    padding-left: $spacing-gutter;
+    padding-left: var(--spacing-gutter);
   }
 
   .container {

scss/layout/_document.scss

@@ -38,46 +38,42 @@ html {
   -webkit-text-size-adjust: 100%; // 6
   background: var(--background);
   color: var(--text);
-  font-family: $sans-serif;
+  font-family: var(--text-font);
-  font-size: map-get($base-font, "xs");
+  font-size: var(--base-font-xs);
-  font-weight: $text-weight;
+  font-weight: var(--text-weight);
-  line-height: $line-height; // 1
+  line-height: var(--line-height); // 1
   text-rendering: optimizeLegibility;
   cursor: default; // 4
 
   @if map-get($breakpoints, "sm") and
-    map-get($base-font, "sm") and
     $enable-responsive-typography {
 
     @media (min-width: map-get($breakpoints, "sm")) {
-      font-size: map-get($base-font, "sm");
+      font-size: var(--base-font-sm);
     }
   }
 
   @if map-get($breakpoints, "md") and
-    map-get($base-font, "md") and
     $enable-responsive-typography {
 
     @media (min-width: map-get($breakpoints, "md")) {
-      font-size: map-get($base-font, "md");
+      font-size: var(--base-font-md);
     }
   }
 
   @if map-get($breakpoints, "lg") and
-    map-get($base-font, "lg") and
     $enable-responsive-typography {
 
     @media (min-width: map-get($breakpoints, "lg")) {
-      font-size: map-get($base-font, "lg");
+      font-size: var(--base-font-lg);
     }
   }
 
   @if map-get($breakpoints, "xl") and
-    map-get($base-font, "xl") and
     $enable-responsive-typography {
 
     @media (min-width: map-get($breakpoints, "xl")) {
-      font-size: map-get($base-font, "xl");
+      font-size: var(--base-font-xl);
     }
   }
 }

scss/layout/_grid.scss

@@ -6,8 +6,8 @@
  */
 
   .grid {
-    grid-column-gap: $spacing-gutter;
+    grid-column-gap: var(--spacing-gutter);
-    grid-row-gap: $spacing-gutter;
+    grid-row-gap: var(--spacing-gutter);
     display: grid;
     grid-template-columns: 1fr;
     margin: 0;

scss/layout/_scroller.scss

@@ -10,7 +10,7 @@ figure {
   overflow-x: auto;
 
   figcaption {
-    padding: ($spacing-gutter/2) 0;
+    padding: calc(var(--spacing-gutter) / 2) 0;
     color: var(--muted-text);
   }
 }

scss/layout/_section.scss

@@ -4,41 +4,37 @@
  */
 
 section {
-  margin-bottom: $spacing-block*map-get($spacing-factor, "xs")*2;
+  margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2);
 
   @if map-get($breakpoints, "sm") and
-    map-get($spacing-factor, "sm") and
     $enable-responsive-spacings {
 
     @media (min-width: map-get($breakpoints, "sm")) {
-      margin-bottom: $spacing-block*map-get($spacing-factor, "sm")*2;
+      margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2);
     }
   }
 
   @if map-get($breakpoints, "md") and
-    map-get($spacing-factor, "md") and
     $enable-responsive-spacings {
 
     @media (min-width: map-get($breakpoints, "md")) {
-      margin-bottom: $spacing-block*map-get($spacing-factor, "md")*2;
+      margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2);
     }
   }
 
   @if map-get($breakpoints, "lg") and
-    map-get($spacing-factor, "lg") and
     $enable-responsive-spacings {
 
     @media (min-width: map-get($breakpoints, "lg")) {
-      margin-bottom: $spacing-block*map-get($spacing-factor, "lg")*2;
+      margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2);
     }
   }
 
   @if map-get($breakpoints, "xl") and
-    map-get($spacing-factor, "xl") and
     $enable-responsive-spacings {
 
     @media (min-width: map-get($breakpoints, "xl")) {
-      margin-bottom: $spacing-block*map-get($spacing-factor, "xl")*2;
+      margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2);
     }
   }
 }

scss/layout/_sectioning.scss

@@ -25,8 +25,8 @@ body {
   > header,
   > main,
   > footer {
-    $padding-horizontal: $spacing-gutter !default;
+    $padding-horizontal: var(--spacing-gutter) !default;
-    $spacing-vertical: $spacing-block !default;
+    $spacing-vertical: var(--spacing-block) !default;
     width: 100%;
     margin-right: auto;
     margin-left: auto;
@@ -50,13 +50,13 @@ body {
             $padding-horizontal: 0;
           }
           @else {
-            $padding-horizontal: $spacing-gutter;
+            $padding-horizontal: var(--spacing-gutter);
           }
-          @if $enable-responsive-spacings and map-get($spacing-factor, "sm") {
+          @if $enable-responsive-spacings {
-            $spacing-vertical: $spacing-block*map-get($spacing-factor, "sm");
+            $spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-sm));
           }
           @else {
-            $spacing-vertical: $spacing-block;
+            $spacing-vertical: var(--spacing-block);
           }
           padding: $spacing-vertical $padding-horizontal;
         }
@@ -71,8 +71,8 @@ body {
         @if $enable-viewport and $enable-semantic-container {
           max-width: map-get($viewports, "md");
         }
-        @if $enable-responsive-spacings and map-get($spacing-factor, "md")  {
+        @if $enable-responsive-spacings {
-          $spacing-vertical: $spacing-block*map-get($spacing-factor, "md");
+          $spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-md));
           padding: $spacing-vertical $padding-horizontal;
         }
       }
@@ -86,8 +86,8 @@ body {
         @if $enable-viewport and $enable-semantic-container {
           max-width: map-get($viewports, "lg");
         }
-        @if $enable-responsive-spacings and map-get($spacing-factor, "lg")  {
+        @if $enable-responsive-spacings {
-          $spacing-vertical: $spacing-block*map-get($spacing-factor, "lg");
+          $spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-lg));
           padding: $spacing-vertical $padding-horizontal;
         }
       }
@@ -101,8 +101,8 @@ body {
         @if $enable-viewport and $enable-semantic-container {
           max-width: map-get($viewports, "xl");
         }
-        @if $enable-responsive-spacings and map-get($spacing-factor, "xl")  {
+        @if $enable-responsive-spacings {
-          $spacing-vertical: $spacing-block*map-get($spacing-factor, "xl");
+          $spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-xl));
           padding: $spacing-vertical $padding-horizontal;
         }
       }

scss/themes/default.scss

@@ -3,5 +3,7 @@
  */
 
 @import "default/colors";
+@import "default/styles";
+@import "default/icons";
 @import "default/light";
 @import "default/dark";

scss/themes/default/_colors.scss

@@ -35,9 +35,3 @@ $green-600: hsl(160, 55%,  35%) !default;
 $green-700: hsl(160, 60%,  30%) !default;
 $red-700:   hsl(0,   45%,  50%) !default;
 $red-900:   hsl(0,   45%,  40%) !default;
-
-// Icons color
-// For <details>, [type="date"], <select>, etc.
-// Must be neutral to work in light or dark mode
-// HACK: .99 opacity is used to force rgba() vs #hex
-$icon-color: #{rgba($grey-500, .999)};

scss/themes/default/_dark.scss

@@ -1,70 +1,83 @@
 // Dark theme (Auto)
 // Automatically enabled if user has Dark mode enabled
+
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
 
     // Document
-    --background:        #{darken($grey-900, 6%)};
+    --background:              #{darken($grey-900, 6%)};
 
     // Typography
-    --text:              #{$grey-300};
+    --text:                    #{$grey-300};
-    --h1:                #{$grey-50};
+    --h1:                      #{$grey-50};
-    --h2:                #{$grey-100};
+    --h2:                      #{$grey-100};
-    --h3:                #{$grey-200};
+    --h3:                      #{$grey-200};
-    --h4:                #{$grey-300};
+    --h4:                      #{$grey-300};
-    --h5:                #{$grey-400};
+    --h5:                      #{$grey-400};
-    --h6:                #{$grey-500};
+    --h6:                      #{$grey-500};
 
     // Primary Call-to-Action and links
-    --primary:           #{$primary-600};
+    --primary:                 #{$primary-600};
-    --primary-hover:     #{$primary-500};
+    --primary-border:          #{$primary-600};
-    --primary-focus:     #{rgba($primary-600, .25)};
+    --primary-hover:           #{$primary-500};
-    --primary-inverse:   #{$white};
+    --primary-hover-border:    #{$primary-500};
+    --primary-focus:           #{rgba($primary-600, .25)};
+    --primary-inverse:         #{$white};
 
     // // Secondary Call-to-Action, links and kbd
-    --secondary:         #{$grey-600};
+    --secondary:               #{$grey-600};
-    --secondary-hover:   #{$grey-500};
+    --secondary-border:        #{$grey-600};
-    --secondary-focus:   #{rgba($grey-600, .25)};
+    --secondary-hover:         #{$grey-500};
-    --secondary-inverse: #{$white};
+    --secondary-hover-border:  #{$grey-500};
+    --secondary-focus:         #{rgba($grey-600, .25)};
+    --secondary-inverse:       #{$white};
 
     // Contrast Call-to-Action and Tooltips
-    --contrast:          #{$grey-100};
+    --contrast:                #{$grey-100};
-    --contrast-hover:    #{$white};
+    --contrast-border:         #{$grey-100};
-    --contrast-focus:    #{rgba($grey-600, .25)};
+    --contrast-hover:          #{$white};
-    --contrast-border:   #{rgba($amber-200, .33)}; // Links underline for
+    --contrast-hover-border:   #{$white};
-    --contrast-border-h: #{rgba($amber-200, .5)};  // Links hover underline
+    --contrast-focus:          #{rgba($grey-600, .25)};
-    --contrast-inverse:  #{darken($grey-900, 6%)};
+    --contrast-inverse:        #{darken($grey-900, 6%)};
 
     // Form elements
-    --input-background:  #{darken($grey-900, 6%)};
+    --input-background:        #{darken($grey-900, 6%)};
-    --input-border:      #{mix($grey-800, $grey-700)};
+    --input-border:            #{mix($grey-800, $grey-700)};
+    --input-hover-background:  #{darken($grey-900, 6%)};
+    --input-hover-border:      #{$primary-600};
+    --input-focus:             #{rgba($primary-600, .25)};
+    --input-inverse:           #{$white};
+
+    // Button
+    --button-shadow:           0 0 0 0 rgba(0, 0, 0, 0);
+    --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
 
     // Utilities states
-    --valid:             #{$green-700};
+    --valid:                   #{$green-700};
-    --invalid:           #{$red-900};
+    --invalid:                 #{$red-900};
-    --mark:              #{rgba($amber-200, .5)};
+    --mark:                    #{rgba($amber-200, .5)};
-    --mark-text:         #{$white};
+    --mark-text:               #{$white};
-    --muted-text:        #{$grey-500};
+    --muted-text:              #{$grey-500};
-    --muted-background:  #{darken($grey-900, 6%)};
+    --muted-background:        #{mix($grey-800, $grey-900)};
-    --muted-border:      #{mix($grey-800, $grey-900)};
+    --muted-border:            #{mix($grey-800, $grey-900)};
 
     // Card
-    --card-background:   #{darken($grey-900, 2%)};
+    --card-background:         #{darken($grey-900, 2%)};
-    --card-sections:     #{darken($grey-900, 4%)};
+    --card-sections:           #{darken($grey-900, 4%)};
-    --card-shadow:       0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
+    --card-shadow:             0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
 
     // Code
-    --code-background:   #{darken($grey-900, 4%)};
+    --code-background:         #{darken($grey-900, 4%)};
-    --code-inlined:      #{rgba($grey-700, .25)};
+    --code-inlined:            #{rgba($grey-700, .25)};
-    --code-color-1:      #{$grey-500};
+    --code-color-1:            #{$grey-500};
-    --code-color-2:      #{hsl(330, 30%, 50%)};
+    --code-color-2:            #{hsl(330, 30%, 50%)};
-    --code-color-3:      #{hsl(185, 30%, 50%)};
+    --code-color-3:            #{hsl(185, 30%, 50%)};
-    --code-color-4:      #{hsl(40,  10%, 50%)};
+    --code-color-4:            #{hsl(40,  10%, 50%)};
-    --code-color-5:      #{mix($grey-600, $grey-700)};
+    --code-color-5:            #{mix($grey-600, $grey-700)};
 
     // Table
-    --table-border:      #{rgba($grey-500, .06)};
+    --table-border:            #{rgba($grey-500, .075)};
-    --table-stripping:   #{rgba($grey-500, .02)};
+    --table-stripping:         #{rgba($grey-500, .05)};
   }
 }
 
@@ -75,64 +88,77 @@
 [data-theme="dark"] {
 
   // Document
-  --background:        #{darken($grey-900, 6%)};
+  --background:              #{darken($grey-900, 6%)};
 
   // Typography
-  --text:              #{$grey-300};
+  --text:                    #{$grey-300};
-  --h1:                #{$grey-50};
+  --h1:                      #{$grey-50};
-  --h2:                #{$grey-100};
+  --h2:                      #{$grey-100};
-  --h3:                #{$grey-200};
+  --h3:                      #{$grey-200};
-  --h4:                #{$grey-300};
+  --h4:                      #{$grey-300};
-  --h5:                #{$grey-400};
+  --h5:                      #{$grey-400};
-  --h6:                #{$grey-500};
+  --h6:                      #{$grey-500};
 
   // Primary Call-to-Action and links
-  --primary:           #{$primary-600};
+  --primary:                 #{$primary-600};
-  --primary-hover:     #{$primary-500};
+  --primary-border:          #{$primary-600};
-  --primary-focus:     #{rgba($primary-600, .25)};
+  --primary-hover:           #{$primary-500};
-  --primary-inverse:   #{$white};
+  --primary-hover-border:    #{$primary-500};
+  --primary-focus:           #{rgba($primary-600, .25)};
+  --primary-inverse:         #{$white};
 
-  // Secondary Call-to-Action, links and kbd
+  // // Secondary Call-to-Action, links and kbd
-  --secondary:         #{$grey-600};
+  --secondary:               #{$grey-600};
-  --secondary-hover:   #{$grey-500};
+  --secondary-border:        #{$grey-600};
-  --secondary-focus:   #{rgba($grey-600, .25)};
+  --secondary-hover:         #{$grey-500};
-  --secondary-inverse: #{$white};
+  --secondary-hover-border:  #{$grey-500};
+  --secondary-focus:         #{rgba($grey-600, .25)};
+  --secondary-inverse:       #{$white};
 
   // Contrast Call-to-Action and Tooltips
-  --contrast:          #{$grey-100};
+  --contrast:                #{$grey-100};
-  --contrast-hover:    #{$white};
+  --contrast-border:         #{$grey-100};
-  --contrast-focus:    #{rgba($grey-600, .25)};
+  --contrast-hover:          #{$white};
-  --contrast-border:   #{rgba($amber-200, .33)}; // For links
+  --contrast-hover-border:   #{$white};
-  --contrast-inverse:  #{darken($grey-900, 6%)};
+  --contrast-focus:          #{rgba($grey-600, .25)};
+  --contrast-inverse:        #{darken($grey-900, 6%)};
 
   // Form elements
-  --input-background:  #{darken($grey-900, 6%)};
+  --input-background:        #{darken($grey-900, 6%)};
-  --input-border:      #{mix($grey-800, $grey-700)};
+  --input-border:            #{mix($grey-800, $grey-700)};
+  --input-hover-background:  #{darken($grey-900, 6%)};
+  --input-hover-border:      #{$primary-600};
+  --input-focus:             #{rgba($primary-600, .25)};
+  --input-inverse:           #{$white};
+
+  // Button
+  --button-shadow:           0 0 0 0 rgba(0, 0, 0, 0);
+  --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
 
   // Utilities states
-  --valid:             #{$green-700};
+  --valid:                   #{$green-700};
-  --invalid:           #{$red-900};
+  --invalid:                 #{$red-900};
-  --mark:              #{rgba($amber-200, .5)};
+  --mark:                    #{rgba($amber-200, .5)};
-  --mark-text:         #{$white};
+  --mark-text:               #{$white};
-  --muted-text:        #{$grey-500};
+  --muted-text:              #{$grey-500};
-  --muted-background:  #{darken($grey-900, 6%)};
+  --muted-background:        #{mix($grey-800, $grey-900)};
-  --muted-border:      #{mix($grey-800, $grey-900)};
+  --muted-border:            #{mix($grey-800, $grey-900)};
 
   // Card
-  --card-background:   #{darken($grey-900, 2%)};
+  --card-background:         #{darken($grey-900, 2%)};
-  --card-sections:     #{darken($grey-900, 4%)};
+  --card-sections:           #{darken($grey-900, 4%)};
-  --card-shadow:       0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
+  --card-shadow:             0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
 
   // Code
-  --code-background:   #{darken($grey-900, 4%)};
+  --code-background:         #{darken($grey-900, 4%)};
-  --code-inlined:      #{rgba($grey-700, .25)};
+  --code-inlined:            #{rgba($grey-700, .25)};
-  --code-color-1:      #{$grey-500};
+  --code-color-1:            #{$grey-500};
-  --code-color-2:      #{hsl(330, 30%, 50%)};
+  --code-color-2:            #{hsl(330, 30%, 50%)};
-  --code-color-3:      #{hsl(185, 30%, 50%)};
+  --code-color-3:            #{hsl(185, 30%, 50%)};
-  --code-color-4:      #{hsl(40,  10%, 50%)};
+  --code-color-4:            #{hsl(40,  10%, 50%)};
-  --code-color-5:      #{mix($grey-600, $grey-700)};
+  --code-color-5:            #{mix($grey-600, $grey-700)};
 
   // Table
-  --table-border:      #{rgba($grey-500, .06)};
+  --table-border:            #{rgba($grey-500, .075)};
-  --table-stripping:   #{rgba($grey-500, .02)};
+  --table-stripping:         #{rgba($grey-500, .05)};
 }

scss/themes/default/_icons.scss

@@ -0,0 +1,13 @@
+// Icons
+// Source: https://feathericons.com/
+
+:root {
+  --icon-chevron:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-date:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+  --icon-time:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-search:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-minus:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+  --icon-valid:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-invalid:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+}

scss/themes/default/_light.scss

@@ -1,68 +1,81 @@
 // Light theme (Default)
 // Can be forced with data-theme="light"
+
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
 
   // Document
-  --background:        #{$white};
+  --background:              #{$white};
 
   // Typography
-  --text:              #{$grey-700};
+  --text:                    #{$grey-700};
-  --h1:                #{$grey-900};
+  --h1:                      #{$grey-900};
-  --h2:                #{$grey-800};
+  --h2:                      #{$grey-800};
-  --h3:                #{$grey-700};
+  --h3:                      #{$grey-700};
-  --h4:                #{$grey-600};
+  --h4:                      #{$grey-600};
-  --h5:                #{$grey-500};
+  --h5:                      #{$grey-500};
-  --h6:                #{$grey-400};
+  --h6:                      #{$grey-400};
 
   // Primary Call-to-Action and links
-  --primary:           #{$primary-600};
+  --primary:                 #{$primary-600};
-  --primary-hover:     #{$primary-700};
+  --primary-border:          #{$primary-600};
-  --primary-focus:     #{rgba($primary-600, .125)};
+  --primary-hover:           #{$primary-700};
-  --primary-inverse:   #{$white};
+  --primary-hover-border:    #{$primary-700};
+  --primary-focus:           #{rgba($primary-600, .125)};
+  --primary-inverse:         #{$white};
 
   // Secondary Call-to-Action, links and kbd
-  --secondary:         #{$grey-500};
+  --secondary:               #{$grey-500};
-  --secondary-hover:   #{$grey-700};
+  --secondary-border:        #{$grey-500};
-  --secondary-focus:   #{rgba($grey-500, .125)};
+  --secondary-hover:         #{$grey-700};
-  --secondary-inverse: #{$white};
+  --secondary-hover-border:  #{$grey-700};
+  --secondary-focus:         #{rgba($grey-500, .125)};
+  --secondary-inverse:       #{$white};
 
   // Contrast Call-to-Action and Tooltips
-  --contrast:          #{$grey-800};
+  --contrast:                #{$grey-800};
-  --contrast-hover:    #{mix($grey-900, $black)};
+  --contrast-border:         #{$grey-800};
-  --contrast-focus:    #{rgba($grey-500, .125)};
+  --contrast-hover:          #{mix($grey-900, $black)};
-  --contrast-border:   #{rgba($amber-200, .5)}; // Links underline
+  --contrast-hover-border:   #{mix($grey-900, $black)};
-  --contrast-border-h: #{rgba($amber-200, 1)};  // Links hover underline
+  --contrast-focus:          #{rgba($grey-500, .125)};
-  --contrast-inverse:  #{$white};
+  --contrast-inverse:        #{$white};
 
   // Form elements
-  --input-background:  #{$white};
+  --input-background:        #{$white};
-  --input-border:      #{mix($grey-100, $grey-200)};
+  --input-border:            #{mix($grey-100, $grey-200)};
+  --input-hover-background:  #{$white};
+  --input-hover-border:      #{$primary-600};
+  --input-focus:             #{rgba($primary-600, .125)};
+  --input-inverse:           #{$white};
+
+  // Button
+  --button-shadow:           0 0 0 0 rgba(0, 0, 0, 0);;
+  --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
 
   // Utilities states
-  --valid:             #{$green-600};
+  --valid:                   #{$green-600};
-  --invalid:           #{$red-700};
+  --invalid:                 #{$red-700};
-  --mark:              #{rgba($amber-200, .5)};
+  --mark:                    #{rgba($amber-200, .5)};
-  --mark-text:         #{$grey-800};
+  --mark-text:               #{$grey-800};
-  --muted-text:        #{mix($grey-400, $grey-500)};
+  --muted-text:              #{mix($grey-400, $grey-500)};
-  --muted-background:  #{$grey-50};
+  --muted-background:        #{$grey-50};
-  --muted-border:      #{$grey-50};
+  --muted-border:            #{$grey-50};
 
   // Card
-  --card-background:   #{$white};
+  --card-background:         #{$white};
-  --card-sections:     #{lighten($grey-50, 2%)};
+  --card-sections:           #{lighten($grey-50, 2%)};
-  --card-shadow:       0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
+  --card-shadow:             0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
 
   // Code
-  --code-background:   #{lighten($grey-50, 2%)};
+  --code-background:         #{lighten($grey-50, 2%)};
-  --code-inlined:      #{$grey-50};
+  --code-inlined:            #{$grey-50};
-  --code-color-1:      #{$grey-500};
+  --code-color-1:            #{$grey-500};
-  --code-color-2:      #{hsl(330, 40%, 50%)};
+  --code-color-2:            #{hsl(330, 40%, 50%)};
-  --code-color-3:      #{hsl(185, 40%, 40%)};
+  --code-color-3:            #{hsl(185, 40%, 40%)};
-  --code-color-4:      #{hsl(40,  20%, 50%)};
+  --code-color-4:            #{hsl(40,  20%, 50%)};
-  --code-color-5:      #{mix($grey-300, $grey-400)};
+  --code-color-5:            #{mix($grey-300, $grey-400)};
 
   // Table
-  --table-border:      #{rgba($grey-50,  .75)};
+  --table-border:            #{rgba($grey-50,  .75)};
-  --table-stripping:   #{rgba($grey-500, .04)};
+  --table-stripping:         #{rgba($grey-500, .075)};
 }

scss/themes/default/_styles.scss

@@ -0,0 +1,93 @@
+// Commons Styles
+
+:root {
+
+  // Typography
+  // ––––––––––––––––––––
+
+  // Fonts family
+  // Source: github.com/csstools/sanitize.css/blob/master/typography.css
+  --text-font:                       system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --titles-font:                     var(--text-font);
+  --code-font:                       "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  // Typography styles
+  --line-height:                     1.5;
+  --text-weight:                     400;
+  --titles-weight:                   700;
+  --form-element-weight:             var(--text-weight);
+  --buttons-weight:                  var(--text-weight);
+  --code-weight:                     var(--text-weight);
+
+  // Base font sizes
+  // All the others sizes are relative to this font base sizes (rem)
+  --base-font-xs:                    16px;
+  --base-font-sm:                    17px;
+  --base-font-md:                    18px;
+  --base-font-lg:                    19px;
+  --base-font-xl:                    20px;
+
+  // Font sizes
+  // All the others sizes are relative to this sizes
+  --h1-size:                         2rem;
+  --h2-size:                         1.75rem;
+  --h3-size:                         1.5rem;
+  --h4-size:                         1.25rem;
+  --h5-size:                         1.125rem;
+
+
+  // Styles
+  // ––––––––––––––––––––
+
+  // Blocks styles: <form> elements, <article>, inlined <code>, [data-tooltip]
+  --block-round:                     .25rem ;
+
+  // Form elements
+  --form-element-border-width:       1px;
+  --form-element-outline-width:      3px;
+  --checkbox-radio-border-width:     2px;
+  --switch-border-width:             3px;
+  --form-element-spacing-vertical:   .75rem;
+  --form-element-spacing-horizontal: 1rem;
+
+  // Buttons
+  --button-round:                    var(--block-round);
+  --button-border-width:             var(--form-element-border-width);
+  --button-outline-width:            var(--form-element-outline-width);
+  --button-spacing-vertical:         var(--form-element-spacing-vertical);
+  --button-spacing-horizontal:       var(--form-element-spacing-horizontal);
+
+
+  // Spacings
+  // ––––––––––––––––––––
+
+  // Gutters and horizontals margins
+  // For <body>, ,container, .grid, <nav>, <table>, <article>, <pre>
+  --spacing-gutter:                  1rem;
+
+  // Vertical spacing for blocks
+  // For <header>, <main>, <footer>, <section>, <article>
+  --spacing-block:                   2rem;
+
+  // Multiplication factor for --spacing-block
+  // '1' disable spacing factor on a breakpoint
+  --spacing-factor-xs:               1;
+  --spacing-factor-sm:               1.25;
+  --spacing-factor-md:               1.5;
+  --spacing-factor-lg:               1.75;
+  --spacing-factor-xl:               2;
+
+  // Vertical margins for typography elements
+  --spacing-typography:              1.5rem;
+
+  // Spacing between <form> elements
+  --spacing-form-element:            .25rem;
+
+
+  // Transitions
+  // ––––––––––––––––––––
+
+  // Transitions: <a>, <form> elements and <button>
+  --transition:                      .2s ease-in-out;
+
+}