Prettify code

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 *.DS_Store
+.prettierrc.js
 TODO.md
 tests/

css/pico.classless.css

@@ -6,11 +6,13 @@
  * Theme: default
  */
 :root {
-  --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: 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";
   --line-height: 1.5;
   --font-weight: 400;
   --font-size: 16px;
-  --border-radius: .25rem;
+  --border-radius: 0.25rem;
   --border-width: 1px;
   --outline-width: 3px;
   --spacing: 1rem;
@@ -19,9 +21,9 @@
   --block-spacing-horizontal: var(--spacing);
   --grid-spacing-vertical: 0;
   --grid-spacing-horizontal: var(--spacing);
-  --form-element-spacing-vertical: .75rem;
+  --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
-  --transition: .2s ease-in-out;
+  --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
   :root {
@@ -165,7 +167,9 @@ pre,
 code,
 kbd,
 samp {
-  --font-family: "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";
+  --font-family: "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";
 }
 
 kbd {
@@ -175,7 +179,7 @@ kbd {
 [data-theme=light],
 :root:not([data-theme=dark]) {
   color-scheme: light;
-  --background-color: #FFF;
+  --background-color: #fff;
   --color: #415462;
   --h1-color: #1b2832;
   --h2-color: #24333e;
@@ -188,19 +192,19 @@ kbd {
   --primary: #1095c1;
   --primary-hover: #08769b;
   --primary-focus: rgba(16, 149, 193, 0.125);
-  --primary-inverse: #FFF;
+  --primary-inverse: #fff;
   --secondary: #596b78;
   --secondary-hover: #415462;
   --secondary-focus: rgba(89, 107, 120, 0.125);
-  --secondary-inverse: #FFF;
+  --secondary-inverse: #fff;
   --contrast: #1b2832;
   --contrast-hover: #000;
   --contrast-focus: rgba(89, 107, 120, 0.125);
-  --contrast-inverse: #FFF;
+  --contrast-inverse: #fff;
   --mark-background-color: #fff2ca;
   --mark-color: #543a26;
-  --ins-color: #388E3C;
+  --ins-color: #388e3c;
-  --del-color: #C62828;
+  --del-color: #c62828;
   --blockquote-border-color: var(--muted-border-color);
   --blockquote-footer-color: var(--muted-color);
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -214,11 +218,11 @@ kbd {
   --form-element-focus-color: var(--primary-focus);
   --form-element-disabled-background-color: #d5dce2;
   --form-element-disabled-border-color: #a2afb9;
-  --form-element-disabled-opacity: .5;
+  --form-element-disabled-opacity: 0.5;
-  --form-element-invalid-border-color: #C62828;
+  --form-element-invalid-border-color: #c62828;
-  --form-element-invalid-active-border-color: #B71C1C;
+  --form-element-invalid-active-border-color: #b71c1c;
-  --form-element-valid-border-color: #388E3C;
+  --form-element-valid-border-color: #388e3c;
-  --form-element-valid-active-border-color: #2E7D32;
+  --form-element-valid-active-border-color: #2e7d32;
   --switch-background-color: #bbc6ce;
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
@@ -243,11 +247,13 @@ kbd {
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: var(--background-color);
   --card-border-color: var(--muted-border-color);
-  --card-box-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);
+  --card-box-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);
   --card-sectionning-background-color: #fbfbfc;
   --progress-background-color: #d5dce2;
   --progress-color: var(--primary);
-  --loading-spinner-opacity: .5;
+  --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
   --tooltip-color: var(--contrast-inverse);
   --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(65, 84, 98, 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");
@@ -276,19 +282,19 @@ kbd {
     --primary: #1095c1;
     --primary-hover: #1ab3e6;
     --primary-focus: rgba(16, 149, 193, 0.25);
-    --primary-inverse: #FFF;
+    --primary-inverse: #fff;
     --secondary: #596b78;
     --secondary-hover: #73828c;
     --secondary-focus: rgba(115, 130, 140, 0.25);
-    --secondary-inverse: #FFF;
+    --secondary-inverse: #fff;
     --contrast: #edf0f3;
-    --contrast-hover: #FFF;
+    --contrast-hover: #fff;
     --contrast-focus: rgba(115, 130, 140, 0.25);
     --contrast-inverse: #000;
     --mark-background-color: #d1c284;
     --mark-color: #11191f;
-    --ins-color: #388E3C;
+    --ins-color: #388e3c;
-    --del-color: #C62828;
+    --del-color: #c62828;
     --blockquote-border-color: var(--muted-border-color);
     --blockquote-footer-color: var(--muted-color);
     --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -302,11 +308,11 @@ kbd {
     --form-element-focus-color: var(--primary-focus);
     --form-element-disabled-background-color: #2c3d49;
     --form-element-disabled-border-color: #415462;
-    --form-element-disabled-opacity: .5;
+    --form-element-disabled-opacity: 0.5;
-    --form-element-invalid-border-color: #B71C1C;
+    --form-element-invalid-border-color: #b71c1c;
-    --form-element-invalid-active-border-color: #C62828;
+    --form-element-invalid-active-border-color: #c62828;
-    --form-element-valid-border-color: #2E7D32;
+    --form-element-valid-border-color: #2e7d32;
-    --form-element-valid-active-border-color: #388E3C;
+    --form-element-valid-active-border-color: #388e3c;
     --switch-background-color: #374956;
     --switch-color: var(--primary-inverse);
     --switch-checked-background-color: var(--primary);
@@ -332,11 +338,13 @@ kbd {
     --accordion-open-summary-color: var(--muted-color);
     --card-background-color: #141e26;
     --card-border-color: #11191f;
-    --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+    --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+      0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+      0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
     --card-sectionning-background-color: #18232c;
     --progress-background-color: #24333e;
     --progress-color: var(--primary);
-    --loading-spinner-opacity: .5;
+    --loading-spinner-opacity: 0.5;
     --tooltip-background-color: var(--contrast);
     --tooltip-color: var(--contrast-inverse);
     --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(162, 175, 185, 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");
@@ -364,19 +372,19 @@ kbd {
   --primary: #1095c1;
   --primary-hover: #1ab3e6;
   --primary-focus: rgba(16, 149, 193, 0.25);
-  --primary-inverse: #FFF;
+  --primary-inverse: #fff;
   --secondary: #596b78;
   --secondary-hover: #73828c;
   --secondary-focus: rgba(115, 130, 140, 0.25);
-  --secondary-inverse: #FFF;
+  --secondary-inverse: #fff;
   --contrast: #edf0f3;
-  --contrast-hover: #FFF;
+  --contrast-hover: #fff;
   --contrast-focus: rgba(115, 130, 140, 0.25);
   --contrast-inverse: #000;
   --mark-background-color: #d1c284;
   --mark-color: #11191f;
-  --ins-color: #388E3C;
+  --ins-color: #388e3c;
-  --del-color: #C62828;
+  --del-color: #c62828;
   --blockquote-border-color: var(--muted-border-color);
   --blockquote-footer-color: var(--muted-color);
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -390,11 +398,11 @@ kbd {
   --form-element-focus-color: var(--primary-focus);
   --form-element-disabled-background-color: #2c3d49;
   --form-element-disabled-border-color: #415462;
-  --form-element-disabled-opacity: .5;
+  --form-element-disabled-opacity: 0.5;
-  --form-element-invalid-border-color: #B71C1C;
+  --form-element-invalid-border-color: #b71c1c;
-  --form-element-invalid-active-border-color: #C62828;
+  --form-element-invalid-active-border-color: #c62828;
-  --form-element-valid-border-color: #2E7D32;
+  --form-element-valid-border-color: #2e7d32;
-  --form-element-valid-active-border-color: #388E3C;
+  --form-element-valid-active-border-color: #388e3c;
   --switch-background-color: #374956;
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
@@ -420,11 +428,13 @@ kbd {
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: #141e26;
   --card-border-color: #11191f;
-  --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+  --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+    0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+    0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
   --card-sectionning-background-color: #18232c;
   --progress-background-color: #24333e;
   --progress-color: var(--primary);
-  --loading-spinner-opacity: .5;
+  --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
   --tooltip-color: var(--contrast-inverse);
   --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(162, 175, 185, 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");
@@ -922,7 +932,8 @@ input[type=submit]:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
 a[role=button]:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
+  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--outline-width) var(--primary-focus);
 }
 
 input[type=reset] {
@@ -936,7 +947,8 @@ input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
   --border-color: var(--secondary-hover);
 }
 input[type=reset]:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
+  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--outline-width) var(--secondary-focus);
 }
 
 button[disabled],
@@ -1132,7 +1144,9 @@ select[aria-invalid=false]:active,
 select[aria-invalid=false]:focus,
 textarea[aria-invalid=false]:active,
 textarea[aria-invalid=false]:focus {
-  --border-color: var(--form-element-valid-active-border-color) !important;
+  --border-color: var(
+    --form-element-valid-active-border-color
+  ) !important;
 }
 input[aria-invalid=true],
 select[aria-invalid=true],
@@ -1145,7 +1159,9 @@ select[aria-invalid=true]:active,
 select[aria-invalid=true]:focus,
 textarea[aria-invalid=true]:active,
 textarea[aria-invalid=true]:focus {
-  --border-color: var(--form-element-invalid-active-border-color) !important;
+  --border-color: var(
+    --form-element-invalid-active-border-color
+  ) !important;
 }
 
 [dir=rtl] input[aria-invalid],

css/pico.css

@@ -6,11 +6,13 @@
  * Theme: default
  */
 :root {
-  --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: 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";
   --line-height: 1.5;
   --font-weight: 400;
   --font-size: 16px;
-  --border-radius: .25rem;
+  --border-radius: 0.25rem;
   --border-width: 1px;
   --outline-width: 3px;
   --spacing: 1rem;
@@ -19,9 +21,9 @@
   --block-spacing-horizontal: var(--spacing);
   --grid-spacing-vertical: 0;
   --grid-spacing-horizontal: var(--spacing);
-  --form-element-spacing-vertical: .75rem;
+  --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
-  --transition: .2s ease-in-out;
+  --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
   :root {
@@ -165,7 +167,9 @@ pre,
 code,
 kbd,
 samp {
-  --font-family: "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";
+  --font-family: "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";
 }
 
 kbd {
@@ -175,7 +179,7 @@ kbd {
 [data-theme=light],
 :root:not([data-theme=dark]) {
   color-scheme: light;
-  --background-color: #FFF;
+  --background-color: #fff;
   --color: #415462;
   --h1-color: #1b2832;
   --h2-color: #24333e;
@@ -188,19 +192,19 @@ kbd {
   --primary: #1095c1;
   --primary-hover: #08769b;
   --primary-focus: rgba(16, 149, 193, 0.125);
-  --primary-inverse: #FFF;
+  --primary-inverse: #fff;
   --secondary: #596b78;
   --secondary-hover: #415462;
   --secondary-focus: rgba(89, 107, 120, 0.125);
-  --secondary-inverse: #FFF;
+  --secondary-inverse: #fff;
   --contrast: #1b2832;
   --contrast-hover: #000;
   --contrast-focus: rgba(89, 107, 120, 0.125);
-  --contrast-inverse: #FFF;
+  --contrast-inverse: #fff;
   --mark-background-color: #fff2ca;
   --mark-color: #543a26;
-  --ins-color: #388E3C;
+  --ins-color: #388e3c;
-  --del-color: #C62828;
+  --del-color: #c62828;
   --blockquote-border-color: var(--muted-border-color);
   --blockquote-footer-color: var(--muted-color);
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -214,11 +218,11 @@ kbd {
   --form-element-focus-color: var(--primary-focus);
   --form-element-disabled-background-color: #d5dce2;
   --form-element-disabled-border-color: #a2afb9;
-  --form-element-disabled-opacity: .5;
+  --form-element-disabled-opacity: 0.5;
-  --form-element-invalid-border-color: #C62828;
+  --form-element-invalid-border-color: #c62828;
-  --form-element-invalid-active-border-color: #B71C1C;
+  --form-element-invalid-active-border-color: #b71c1c;
-  --form-element-valid-border-color: #388E3C;
+  --form-element-valid-border-color: #388e3c;
-  --form-element-valid-active-border-color: #2E7D32;
+  --form-element-valid-active-border-color: #2e7d32;
   --switch-background-color: #bbc6ce;
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
@@ -243,11 +247,13 @@ kbd {
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: var(--background-color);
   --card-border-color: var(--muted-border-color);
-  --card-box-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);
+  --card-box-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);
   --card-sectionning-background-color: #fbfbfc;
   --progress-background-color: #d5dce2;
   --progress-color: var(--primary);
-  --loading-spinner-opacity: .5;
+  --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
   --tooltip-color: var(--contrast-inverse);
   --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(65, 84, 98, 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");
@@ -276,19 +282,19 @@ kbd {
     --primary: #1095c1;
     --primary-hover: #1ab3e6;
     --primary-focus: rgba(16, 149, 193, 0.25);
-    --primary-inverse: #FFF;
+    --primary-inverse: #fff;
     --secondary: #596b78;
     --secondary-hover: #73828c;
     --secondary-focus: rgba(115, 130, 140, 0.25);
-    --secondary-inverse: #FFF;
+    --secondary-inverse: #fff;
     --contrast: #edf0f3;
-    --contrast-hover: #FFF;
+    --contrast-hover: #fff;
     --contrast-focus: rgba(115, 130, 140, 0.25);
     --contrast-inverse: #000;
     --mark-background-color: #d1c284;
     --mark-color: #11191f;
-    --ins-color: #388E3C;
+    --ins-color: #388e3c;
-    --del-color: #C62828;
+    --del-color: #c62828;
     --blockquote-border-color: var(--muted-border-color);
     --blockquote-footer-color: var(--muted-color);
     --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -302,11 +308,11 @@ kbd {
     --form-element-focus-color: var(--primary-focus);
     --form-element-disabled-background-color: #2c3d49;
     --form-element-disabled-border-color: #415462;
-    --form-element-disabled-opacity: .5;
+    --form-element-disabled-opacity: 0.5;
-    --form-element-invalid-border-color: #B71C1C;
+    --form-element-invalid-border-color: #b71c1c;
-    --form-element-invalid-active-border-color: #C62828;
+    --form-element-invalid-active-border-color: #c62828;
-    --form-element-valid-border-color: #2E7D32;
+    --form-element-valid-border-color: #2e7d32;
-    --form-element-valid-active-border-color: #388E3C;
+    --form-element-valid-active-border-color: #388e3c;
     --switch-background-color: #374956;
     --switch-color: var(--primary-inverse);
     --switch-checked-background-color: var(--primary);
@@ -332,11 +338,13 @@ kbd {
     --accordion-open-summary-color: var(--muted-color);
     --card-background-color: #141e26;
     --card-border-color: #11191f;
-    --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+    --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+      0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+      0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
     --card-sectionning-background-color: #18232c;
     --progress-background-color: #24333e;
     --progress-color: var(--primary);
-    --loading-spinner-opacity: .5;
+    --loading-spinner-opacity: 0.5;
     --tooltip-background-color: var(--contrast);
     --tooltip-color: var(--contrast-inverse);
     --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(162, 175, 185, 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");
@@ -364,19 +372,19 @@ kbd {
   --primary: #1095c1;
   --primary-hover: #1ab3e6;
   --primary-focus: rgba(16, 149, 193, 0.25);
-  --primary-inverse: #FFF;
+  --primary-inverse: #fff;
   --secondary: #596b78;
   --secondary-hover: #73828c;
   --secondary-focus: rgba(115, 130, 140, 0.25);
-  --secondary-inverse: #FFF;
+  --secondary-inverse: #fff;
   --contrast: #edf0f3;
-  --contrast-hover: #FFF;
+  --contrast-hover: #fff;
   --contrast-focus: rgba(115, 130, 140, 0.25);
   --contrast-inverse: #000;
   --mark-background-color: #d1c284;
   --mark-color: #11191f;
-  --ins-color: #388E3C;
+  --ins-color: #388e3c;
-  --del-color: #C62828;
+  --del-color: #c62828;
   --blockquote-border-color: var(--muted-border-color);
   --blockquote-footer-color: var(--muted-color);
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -390,11 +398,11 @@ kbd {
   --form-element-focus-color: var(--primary-focus);
   --form-element-disabled-background-color: #2c3d49;
   --form-element-disabled-border-color: #415462;
-  --form-element-disabled-opacity: .5;
+  --form-element-disabled-opacity: 0.5;
-  --form-element-invalid-border-color: #B71C1C;
+  --form-element-invalid-border-color: #b71c1c;
-  --form-element-invalid-active-border-color: #C62828;
+  --form-element-invalid-active-border-color: #c62828;
-  --form-element-valid-border-color: #2E7D32;
+  --form-element-valid-border-color: #2e7d32;
-  --form-element-valid-active-border-color: #388E3C;
+  --form-element-valid-active-border-color: #388e3c;
   --switch-background-color: #374956;
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
@@ -420,11 +428,13 @@ kbd {
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: #141e26;
   --card-border-color: #11191f;
-  --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+  --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+    0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+    0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
   --card-sectionning-background-color: #18232c;
   --progress-background-color: #24333e;
   --progress-color: var(--primary);
-  --loading-spinner-opacity: .5;
+  --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
   --tooltip-color: var(--contrast-inverse);
   --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(162, 175, 185, 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");
@@ -965,7 +975,8 @@ input[type=submit]:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
 a[role=button]:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
+  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--outline-width) var(--primary-focus);
 }
 
 input[type=reset] {
@@ -979,7 +990,8 @@ input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
   --border-color: var(--secondary-hover);
 }
 input[type=reset]:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
+  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--outline-width) var(--secondary-focus);
 }
 
 button.secondary,
@@ -1013,7 +1025,8 @@ input[type=submit].secondary:focus,
 input[type=button].secondary:focus,
 input[type=reset].secondary:focus,
 a[role=button].secondary:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
+  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--outline-width) var(--secondary-focus);
 }
 button.contrast,
 input[type=submit].contrast,
@@ -1045,7 +1058,8 @@ input[type=submit].contrast:focus,
 input[type=button].contrast:focus,
 input[type=reset].contrast:focus,
 a[role=button].contrast:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
+  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--outline-width) var(--contrast-focus);
 }
 button.outline,
 input[type=submit].outline,
@@ -1309,7 +1323,9 @@ select[aria-invalid=false]:active,
 select[aria-invalid=false]:focus,
 textarea[aria-invalid=false]:active,
 textarea[aria-invalid=false]:focus {
-  --border-color: var(--form-element-valid-active-border-color) !important;
+  --border-color: var(
+    --form-element-valid-active-border-color
+  ) !important;
 }
 input[aria-invalid=true],
 select[aria-invalid=true],
@@ -1322,7 +1338,9 @@ select[aria-invalid=true]:active,
 select[aria-invalid=true]:focus,
 textarea[aria-invalid=true]:active,
 textarea[aria-invalid=true]:focus {
-  --border-color: var(--form-element-invalid-active-border-color) !important;
+  --border-color: var(
+    --form-element-invalid-active-border-color
+  ) !important;
 }
 
 [dir=rtl] input[aria-invalid],

css/pico.fluid.classless.css

@@ -6,11 +6,13 @@
  * Theme: default
  */
 :root {
-  --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: 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";
   --line-height: 1.5;
   --font-weight: 400;
   --font-size: 16px;
-  --border-radius: .25rem;
+  --border-radius: 0.25rem;
   --border-width: 1px;
   --outline-width: 3px;
   --spacing: 1rem;
@@ -19,9 +21,9 @@
   --block-spacing-horizontal: var(--spacing);
   --grid-spacing-vertical: 0;
   --grid-spacing-horizontal: var(--spacing);
-  --form-element-spacing-vertical: .75rem;
+  --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
-  --transition: .2s ease-in-out;
+  --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
   :root {
@@ -165,7 +167,9 @@ pre,
 code,
 kbd,
 samp {
-  --font-family: "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";
+  --font-family: "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";
 }
 
 kbd {
@@ -175,7 +179,7 @@ kbd {
 [data-theme=light],
 :root:not([data-theme=dark]) {
   color-scheme: light;
-  --background-color: #FFF;
+  --background-color: #fff;
   --color: #415462;
   --h1-color: #1b2832;
   --h2-color: #24333e;
@@ -188,19 +192,19 @@ kbd {
   --primary: #1095c1;
   --primary-hover: #08769b;
   --primary-focus: rgba(16, 149, 193, 0.125);
-  --primary-inverse: #FFF;
+  --primary-inverse: #fff;
   --secondary: #596b78;
   --secondary-hover: #415462;
   --secondary-focus: rgba(89, 107, 120, 0.125);
-  --secondary-inverse: #FFF;
+  --secondary-inverse: #fff;
   --contrast: #1b2832;
   --contrast-hover: #000;
   --contrast-focus: rgba(89, 107, 120, 0.125);
-  --contrast-inverse: #FFF;
+  --contrast-inverse: #fff;
   --mark-background-color: #fff2ca;
   --mark-color: #543a26;
-  --ins-color: #388E3C;
+  --ins-color: #388e3c;
-  --del-color: #C62828;
+  --del-color: #c62828;
   --blockquote-border-color: var(--muted-border-color);
   --blockquote-footer-color: var(--muted-color);
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -214,11 +218,11 @@ kbd {
   --form-element-focus-color: var(--primary-focus);
   --form-element-disabled-background-color: #d5dce2;
   --form-element-disabled-border-color: #a2afb9;
-  --form-element-disabled-opacity: .5;
+  --form-element-disabled-opacity: 0.5;
-  --form-element-invalid-border-color: #C62828;
+  --form-element-invalid-border-color: #c62828;
-  --form-element-invalid-active-border-color: #B71C1C;
+  --form-element-invalid-active-border-color: #b71c1c;
-  --form-element-valid-border-color: #388E3C;
+  --form-element-valid-border-color: #388e3c;
-  --form-element-valid-active-border-color: #2E7D32;
+  --form-element-valid-active-border-color: #2e7d32;
   --switch-background-color: #bbc6ce;
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
@@ -243,11 +247,13 @@ kbd {
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: var(--background-color);
   --card-border-color: var(--muted-border-color);
-  --card-box-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);
+  --card-box-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);
   --card-sectionning-background-color: #fbfbfc;
   --progress-background-color: #d5dce2;
   --progress-color: var(--primary);
-  --loading-spinner-opacity: .5;
+  --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
   --tooltip-color: var(--contrast-inverse);
   --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(65, 84, 98, 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");
@@ -276,19 +282,19 @@ kbd {
     --primary: #1095c1;
     --primary-hover: #1ab3e6;
     --primary-focus: rgba(16, 149, 193, 0.25);
-    --primary-inverse: #FFF;
+    --primary-inverse: #fff;
     --secondary: #596b78;
     --secondary-hover: #73828c;
     --secondary-focus: rgba(115, 130, 140, 0.25);
-    --secondary-inverse: #FFF;
+    --secondary-inverse: #fff;
     --contrast: #edf0f3;
-    --contrast-hover: #FFF;
+    --contrast-hover: #fff;
     --contrast-focus: rgba(115, 130, 140, 0.25);
     --contrast-inverse: #000;
     --mark-background-color: #d1c284;
     --mark-color: #11191f;
-    --ins-color: #388E3C;
+    --ins-color: #388e3c;
-    --del-color: #C62828;
+    --del-color: #c62828;
     --blockquote-border-color: var(--muted-border-color);
     --blockquote-footer-color: var(--muted-color);
     --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -302,11 +308,11 @@ kbd {
     --form-element-focus-color: var(--primary-focus);
     --form-element-disabled-background-color: #2c3d49;
     --form-element-disabled-border-color: #415462;
-    --form-element-disabled-opacity: .5;
+    --form-element-disabled-opacity: 0.5;
-    --form-element-invalid-border-color: #B71C1C;
+    --form-element-invalid-border-color: #b71c1c;
-    --form-element-invalid-active-border-color: #C62828;
+    --form-element-invalid-active-border-color: #c62828;
-    --form-element-valid-border-color: #2E7D32;
+    --form-element-valid-border-color: #2e7d32;
-    --form-element-valid-active-border-color: #388E3C;
+    --form-element-valid-active-border-color: #388e3c;
     --switch-background-color: #374956;
     --switch-color: var(--primary-inverse);
     --switch-checked-background-color: var(--primary);
@@ -332,11 +338,13 @@ kbd {
     --accordion-open-summary-color: var(--muted-color);
     --card-background-color: #141e26;
     --card-border-color: #11191f;
-    --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+    --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+      0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+      0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
     --card-sectionning-background-color: #18232c;
     --progress-background-color: #24333e;
     --progress-color: var(--primary);
-    --loading-spinner-opacity: .5;
+    --loading-spinner-opacity: 0.5;
     --tooltip-background-color: var(--contrast);
     --tooltip-color: var(--contrast-inverse);
     --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(162, 175, 185, 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");
@@ -364,19 +372,19 @@ kbd {
   --primary: #1095c1;
   --primary-hover: #1ab3e6;
   --primary-focus: rgba(16, 149, 193, 0.25);
-  --primary-inverse: #FFF;
+  --primary-inverse: #fff;
   --secondary: #596b78;
   --secondary-hover: #73828c;
   --secondary-focus: rgba(115, 130, 140, 0.25);
-  --secondary-inverse: #FFF;
+  --secondary-inverse: #fff;
   --contrast: #edf0f3;
-  --contrast-hover: #FFF;
+  --contrast-hover: #fff;
   --contrast-focus: rgba(115, 130, 140, 0.25);
   --contrast-inverse: #000;
   --mark-background-color: #d1c284;
   --mark-color: #11191f;
-  --ins-color: #388E3C;
+  --ins-color: #388e3c;
-  --del-color: #C62828;
+  --del-color: #c62828;
   --blockquote-border-color: var(--muted-border-color);
   --blockquote-footer-color: var(--muted-color);
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -390,11 +398,11 @@ kbd {
   --form-element-focus-color: var(--primary-focus);
   --form-element-disabled-background-color: #2c3d49;
   --form-element-disabled-border-color: #415462;
-  --form-element-disabled-opacity: .5;
+  --form-element-disabled-opacity: 0.5;
-  --form-element-invalid-border-color: #B71C1C;
+  --form-element-invalid-border-color: #b71c1c;
-  --form-element-invalid-active-border-color: #C62828;
+  --form-element-invalid-active-border-color: #c62828;
-  --form-element-valid-border-color: #2E7D32;
+  --form-element-valid-border-color: #2e7d32;
-  --form-element-valid-active-border-color: #388E3C;
+  --form-element-valid-active-border-color: #388e3c;
   --switch-background-color: #374956;
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
@@ -420,11 +428,13 @@ kbd {
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: #141e26;
   --card-border-color: #11191f;
-  --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+  --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+    0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+    0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
   --card-sectionning-background-color: #18232c;
   --progress-background-color: #24333e;
   --progress-color: var(--primary);
-  --loading-spinner-opacity: .5;
+  --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
   --tooltip-color: var(--contrast-inverse);
   --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(162, 175, 185, 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");
@@ -892,7 +902,8 @@ input[type=submit]:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
 a[role=button]:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
+  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--outline-width) var(--primary-focus);
 }
 
 input[type=reset] {
@@ -906,7 +917,8 @@ input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
   --border-color: var(--secondary-hover);
 }
 input[type=reset]:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
+  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--outline-width) var(--secondary-focus);
 }
 
 button[disabled],
@@ -1102,7 +1114,9 @@ select[aria-invalid=false]:active,
 select[aria-invalid=false]:focus,
 textarea[aria-invalid=false]:active,
 textarea[aria-invalid=false]:focus {
-  --border-color: var(--form-element-valid-active-border-color) !important;
+  --border-color: var(
+    --form-element-valid-active-border-color
+  ) !important;
 }
 input[aria-invalid=true],
 select[aria-invalid=true],
@@ -1115,7 +1129,9 @@ select[aria-invalid=true]:active,
 select[aria-invalid=true]:focus,
 textarea[aria-invalid=true]:active,
 textarea[aria-invalid=true]:focus {
-  --border-color: var(--form-element-invalid-active-border-color) !important;
+  --border-color: var(
+    --form-element-invalid-active-border-color
+  ) !important;
 }
 
 [dir=rtl] input[aria-invalid],

css/pico.slim.css

@@ -9,11 +9,13 @@
  * Theme: default
  */
 :root {
-  --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: 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";
   --line-height: 1.5;
   --font-weight: 400;
   --font-size: 16px;
-  --border-radius: .25rem;
+  --border-radius: 0.25rem;
   --border-width: 1px;
   --outline-width: 3px;
   --spacing: 1rem;
@@ -22,9 +24,9 @@
   --block-spacing-horizontal: var(--spacing);
   --grid-spacing-vertical: 0;
   --grid-spacing-horizontal: var(--spacing);
-  --form-element-spacing-vertical: .75rem;
+  --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
-  --transition: .2s ease-in-out;
+  --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
   :root {
@@ -114,7 +116,9 @@ pre,
 code,
 kbd,
 samp {
-  --font-family: "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";
+  --font-family: "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";
 }
 
 kbd {
@@ -124,7 +128,7 @@ kbd {
 [data-theme=light],
 :root:not([data-theme=dark]) {
   color-scheme: light;
-  --background-color: #FFF;
+  --background-color: #fff;
   --color: #415462;
   --h1-color: #1b2832;
   --h2-color: #24333e;
@@ -137,19 +141,19 @@ kbd {
   --primary: #1095c1;
   --primary-hover: #08769b;
   --primary-focus: rgba(16, 149, 193, 0.125);
-  --primary-inverse: #FFF;
+  --primary-inverse: #fff;
   --secondary: #596b78;
   --secondary-hover: #415462;
   --secondary-focus: rgba(89, 107, 120, 0.125);
-  --secondary-inverse: #FFF;
+  --secondary-inverse: #fff;
   --contrast: #1b2832;
   --contrast-hover: #000;
   --contrast-focus: rgba(89, 107, 120, 0.125);
-  --contrast-inverse: #FFF;
+  --contrast-inverse: #fff;
   --mark-background-color: #fff2ca;
   --mark-color: #543a26;
-  --ins-color: #388E3C;
+  --ins-color: #388e3c;
-  --del-color: #C62828;
+  --del-color: #c62828;
   --blockquote-border-color: var(--muted-border-color);
   --blockquote-footer-color: var(--muted-color);
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -163,11 +167,11 @@ kbd {
   --form-element-focus-color: var(--primary-focus);
   --form-element-disabled-background-color: #d5dce2;
   --form-element-disabled-border-color: #a2afb9;
-  --form-element-disabled-opacity: .5;
+  --form-element-disabled-opacity: 0.5;
-  --form-element-invalid-border-color: #C62828;
+  --form-element-invalid-border-color: #c62828;
-  --form-element-invalid-active-border-color: #B71C1C;
+  --form-element-invalid-active-border-color: #b71c1c;
-  --form-element-valid-border-color: #388E3C;
+  --form-element-valid-border-color: #388e3c;
-  --form-element-valid-active-border-color: #2E7D32;
+  --form-element-valid-active-border-color: #2e7d32;
   --switch-background-color: #bbc6ce;
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
@@ -192,11 +196,13 @@ kbd {
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: var(--background-color);
   --card-border-color: var(--muted-border-color);
-  --card-box-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);
+  --card-box-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);
   --card-sectionning-background-color: #fbfbfc;
   --progress-background-color: #d5dce2;
   --progress-color: var(--primary);
-  --loading-spinner-opacity: .5;
+  --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
   --tooltip-color: var(--contrast-inverse);
   --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(65, 84, 98, 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");
@@ -225,19 +231,19 @@ kbd {
     --primary: #1095c1;
     --primary-hover: #1ab3e6;
     --primary-focus: rgba(16, 149, 193, 0.25);
-    --primary-inverse: #FFF;
+    --primary-inverse: #fff;
     --secondary: #596b78;
     --secondary-hover: #73828c;
     --secondary-focus: rgba(115, 130, 140, 0.25);
-    --secondary-inverse: #FFF;
+    --secondary-inverse: #fff;
     --contrast: #edf0f3;
-    --contrast-hover: #FFF;
+    --contrast-hover: #fff;
     --contrast-focus: rgba(115, 130, 140, 0.25);
     --contrast-inverse: #000;
     --mark-background-color: #d1c284;
     --mark-color: #11191f;
-    --ins-color: #388E3C;
+    --ins-color: #388e3c;
-    --del-color: #C62828;
+    --del-color: #c62828;
     --blockquote-border-color: var(--muted-border-color);
     --blockquote-footer-color: var(--muted-color);
     --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -251,11 +257,11 @@ kbd {
     --form-element-focus-color: var(--primary-focus);
     --form-element-disabled-background-color: #2c3d49;
     --form-element-disabled-border-color: #415462;
-    --form-element-disabled-opacity: .5;
+    --form-element-disabled-opacity: 0.5;
-    --form-element-invalid-border-color: #B71C1C;
+    --form-element-invalid-border-color: #b71c1c;
-    --form-element-invalid-active-border-color: #C62828;
+    --form-element-invalid-active-border-color: #c62828;
-    --form-element-valid-border-color: #2E7D32;
+    --form-element-valid-border-color: #2e7d32;
-    --form-element-valid-active-border-color: #388E3C;
+    --form-element-valid-active-border-color: #388e3c;
     --switch-background-color: #374956;
     --switch-color: var(--primary-inverse);
     --switch-checked-background-color: var(--primary);
@@ -281,11 +287,13 @@ kbd {
     --accordion-open-summary-color: var(--muted-color);
     --card-background-color: #141e26;
     --card-border-color: #11191f;
-    --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+    --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+      0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+      0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
     --card-sectionning-background-color: #18232c;
     --progress-background-color: #24333e;
     --progress-color: var(--primary);
-    --loading-spinner-opacity: .5;
+    --loading-spinner-opacity: 0.5;
     --tooltip-background-color: var(--contrast);
     --tooltip-color: var(--contrast-inverse);
     --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(162, 175, 185, 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");
@@ -313,19 +321,19 @@ kbd {
   --primary: #1095c1;
   --primary-hover: #1ab3e6;
   --primary-focus: rgba(16, 149, 193, 0.25);
-  --primary-inverse: #FFF;
+  --primary-inverse: #fff;
   --secondary: #596b78;
   --secondary-hover: #73828c;
   --secondary-focus: rgba(115, 130, 140, 0.25);
-  --secondary-inverse: #FFF;
+  --secondary-inverse: #fff;
   --contrast: #edf0f3;
-  --contrast-hover: #FFF;
+  --contrast-hover: #fff;
   --contrast-focus: rgba(115, 130, 140, 0.25);
   --contrast-inverse: #000;
   --mark-background-color: #d1c284;
   --mark-color: #11191f;
-  --ins-color: #388E3C;
+  --ins-color: #388e3c;
-  --del-color: #C62828;
+  --del-color: #c62828;
   --blockquote-border-color: var(--muted-border-color);
   --blockquote-footer-color: var(--muted-color);
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -339,11 +347,11 @@ kbd {
   --form-element-focus-color: var(--primary-focus);
   --form-element-disabled-background-color: #2c3d49;
   --form-element-disabled-border-color: #415462;
-  --form-element-disabled-opacity: .5;
+  --form-element-disabled-opacity: 0.5;
-  --form-element-invalid-border-color: #B71C1C;
+  --form-element-invalid-border-color: #b71c1c;
-  --form-element-invalid-active-border-color: #C62828;
+  --form-element-invalid-active-border-color: #c62828;
-  --form-element-valid-border-color: #2E7D32;
+  --form-element-valid-border-color: #2e7d32;
-  --form-element-valid-active-border-color: #388E3C;
+  --form-element-valid-active-border-color: #388e3c;
   --switch-background-color: #374956;
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
@@ -369,11 +377,13 @@ kbd {
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: #141e26;
   --card-border-color: #11191f;
-  --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+  --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+    0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+    0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
   --card-sectionning-background-color: #18232c;
   --progress-background-color: #24333e;
   --progress-color: var(--primary);
-  --loading-spinner-opacity: .5;
+  --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
   --tooltip-color: var(--contrast-inverse);
   --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(162, 175, 185, 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");
@@ -910,7 +920,8 @@ input[type=submit]:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
 a[role=button]:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
+  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--outline-width) var(--primary-focus);
 }
 
 input[type=reset] {
@@ -924,7 +935,8 @@ input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
   --border-color: var(--secondary-hover);
 }
 input[type=reset]:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
+  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--outline-width) var(--secondary-focus);
 }
 
 button.secondary,
@@ -958,7 +970,8 @@ input[type=submit].secondary:focus,
 input[type=button].secondary:focus,
 input[type=reset].secondary:focus,
 a[role=button].secondary:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
+  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--outline-width) var(--secondary-focus);
 }
 button.contrast,
 input[type=submit].contrast,
@@ -990,7 +1003,8 @@ input[type=submit].contrast:focus,
 input[type=button].contrast:focus,
 input[type=reset].contrast:focus,
 a[role=button].contrast:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
+  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--outline-width) var(--contrast-focus);
 }
 button.outline,
 input[type=submit].outline,

css/themes/default.css

@@ -2,11 +2,13 @@
  * Theme: default
  */
 :root {
-  --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: 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";
   --line-height: 1.5;
   --font-weight: 400;
   --font-size: 16px;
-  --border-radius: .25rem;
+  --border-radius: 0.25rem;
   --border-width: 1px;
   --outline-width: 3px;
   --spacing: 1rem;
@@ -15,9 +17,9 @@
   --block-spacing-horizontal: var(--spacing);
   --grid-spacing-vertical: 0;
   --grid-spacing-horizontal: var(--spacing);
-  --form-element-spacing-vertical: .75rem;
+  --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
-  --transition: .2s ease-in-out;
+  --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
   :root {
@@ -161,7 +163,9 @@ pre,
 code,
 kbd,
 samp {
-  --font-family: "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";
+  --font-family: "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";
 }
 
 kbd {
@@ -171,7 +175,7 @@ kbd {
 [data-theme=light],
 :root:not([data-theme=dark]) {
   color-scheme: light;
-  --background-color: #FFF;
+  --background-color: #fff;
   --color: #415462;
   --h1-color: #1b2832;
   --h2-color: #24333e;
@@ -184,19 +188,19 @@ kbd {
   --primary: #1095c1;
   --primary-hover: #08769b;
   --primary-focus: rgba(16, 149, 193, 0.125);
-  --primary-inverse: #FFF;
+  --primary-inverse: #fff;
   --secondary: #596b78;
   --secondary-hover: #415462;
   --secondary-focus: rgba(89, 107, 120, 0.125);
-  --secondary-inverse: #FFF;
+  --secondary-inverse: #fff;
   --contrast: #1b2832;
   --contrast-hover: #000;
   --contrast-focus: rgba(89, 107, 120, 0.125);
-  --contrast-inverse: #FFF;
+  --contrast-inverse: #fff;
   --mark-background-color: #fff2ca;
   --mark-color: #543a26;
-  --ins-color: #388E3C;
+  --ins-color: #388e3c;
-  --del-color: #C62828;
+  --del-color: #c62828;
   --blockquote-border-color: var(--muted-border-color);
   --blockquote-footer-color: var(--muted-color);
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -210,11 +214,11 @@ kbd {
   --form-element-focus-color: var(--primary-focus);
   --form-element-disabled-background-color: #d5dce2;
   --form-element-disabled-border-color: #a2afb9;
-  --form-element-disabled-opacity: .5;
+  --form-element-disabled-opacity: 0.5;
-  --form-element-invalid-border-color: #C62828;
+  --form-element-invalid-border-color: #c62828;
-  --form-element-invalid-active-border-color: #B71C1C;
+  --form-element-invalid-active-border-color: #b71c1c;
-  --form-element-valid-border-color: #388E3C;
+  --form-element-valid-border-color: #388e3c;
-  --form-element-valid-active-border-color: #2E7D32;
+  --form-element-valid-active-border-color: #2e7d32;
   --switch-background-color: #bbc6ce;
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
@@ -239,11 +243,13 @@ kbd {
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: var(--background-color);
   --card-border-color: var(--muted-border-color);
-  --card-box-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);
+  --card-box-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);
   --card-sectionning-background-color: #fbfbfc;
   --progress-background-color: #d5dce2;
   --progress-color: var(--primary);
-  --loading-spinner-opacity: .5;
+  --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
   --tooltip-color: var(--contrast-inverse);
   --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(65, 84, 98, 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");
@@ -272,19 +278,19 @@ kbd {
     --primary: #1095c1;
     --primary-hover: #1ab3e6;
     --primary-focus: rgba(16, 149, 193, 0.25);
-    --primary-inverse: #FFF;
+    --primary-inverse: #fff;
     --secondary: #596b78;
     --secondary-hover: #73828c;
     --secondary-focus: rgba(115, 130, 140, 0.25);
-    --secondary-inverse: #FFF;
+    --secondary-inverse: #fff;
     --contrast: #edf0f3;
-    --contrast-hover: #FFF;
+    --contrast-hover: #fff;
     --contrast-focus: rgba(115, 130, 140, 0.25);
     --contrast-inverse: #000;
     --mark-background-color: #d1c284;
     --mark-color: #11191f;
-    --ins-color: #388E3C;
+    --ins-color: #388e3c;
-    --del-color: #C62828;
+    --del-color: #c62828;
     --blockquote-border-color: var(--muted-border-color);
     --blockquote-footer-color: var(--muted-color);
     --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -298,11 +304,11 @@ kbd {
     --form-element-focus-color: var(--primary-focus);
     --form-element-disabled-background-color: #2c3d49;
     --form-element-disabled-border-color: #415462;
-    --form-element-disabled-opacity: .5;
+    --form-element-disabled-opacity: 0.5;
-    --form-element-invalid-border-color: #B71C1C;
+    --form-element-invalid-border-color: #b71c1c;
-    --form-element-invalid-active-border-color: #C62828;
+    --form-element-invalid-active-border-color: #c62828;
-    --form-element-valid-border-color: #2E7D32;
+    --form-element-valid-border-color: #2e7d32;
-    --form-element-valid-active-border-color: #388E3C;
+    --form-element-valid-active-border-color: #388e3c;
     --switch-background-color: #374956;
     --switch-color: var(--primary-inverse);
     --switch-checked-background-color: var(--primary);
@@ -328,11 +334,13 @@ kbd {
     --accordion-open-summary-color: var(--muted-color);
     --card-background-color: #141e26;
     --card-border-color: #11191f;
-    --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+    --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+      0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+      0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
     --card-sectionning-background-color: #18232c;
     --progress-background-color: #24333e;
     --progress-color: var(--primary);
-    --loading-spinner-opacity: .5;
+    --loading-spinner-opacity: 0.5;
     --tooltip-background-color: var(--contrast);
     --tooltip-color: var(--contrast-inverse);
     --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(162, 175, 185, 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");
@@ -360,19 +368,19 @@ kbd {
   --primary: #1095c1;
   --primary-hover: #1ab3e6;
   --primary-focus: rgba(16, 149, 193, 0.25);
-  --primary-inverse: #FFF;
+  --primary-inverse: #fff;
   --secondary: #596b78;
   --secondary-hover: #73828c;
   --secondary-focus: rgba(115, 130, 140, 0.25);
-  --secondary-inverse: #FFF;
+  --secondary-inverse: #fff;
   --contrast: #edf0f3;
-  --contrast-hover: #FFF;
+  --contrast-hover: #fff;
   --contrast-focus: rgba(115, 130, 140, 0.25);
   --contrast-inverse: #000;
   --mark-background-color: #d1c284;
   --mark-color: #11191f;
-  --ins-color: #388E3C;
+  --ins-color: #388e3c;
-  --del-color: #C62828;
+  --del-color: #c62828;
   --blockquote-border-color: var(--muted-border-color);
   --blockquote-footer-color: var(--muted-color);
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@@ -386,11 +394,11 @@ kbd {
   --form-element-focus-color: var(--primary-focus);
   --form-element-disabled-background-color: #2c3d49;
   --form-element-disabled-border-color: #415462;
-  --form-element-disabled-opacity: .5;
+  --form-element-disabled-opacity: 0.5;
-  --form-element-invalid-border-color: #B71C1C;
+  --form-element-invalid-border-color: #b71c1c;
-  --form-element-invalid-active-border-color: #C62828;
+  --form-element-invalid-active-border-color: #c62828;
-  --form-element-valid-border-color: #2E7D32;
+  --form-element-valid-border-color: #2e7d32;
-  --form-element-valid-active-border-color: #388E3C;
+  --form-element-valid-active-border-color: #388e3c;
   --switch-background-color: #374956;
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
@@ -416,11 +424,13 @@ kbd {
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: #141e26;
   --card-border-color: #11191f;
-  --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+  --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+    0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+    0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
   --card-sectionning-background-color: #18232c;
   --progress-background-color: #24333e;
   --progress-color: var(--primary);
-  --loading-spinner-opacity: .5;
+  --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
   --tooltip-color: var(--contrast-inverse);
   --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(162, 175, 185, 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");

docs/css/pico.docs.css

@@ -12,11 +12,11 @@
 
 [data-theme=light],
 :root:not([data-theme=dark]) {
-  --invalid-color: #C62828;
+  --invalid-color: #c62828;
-  --valid-color: #388E3C;
+  --valid-color: #388e3c;
   --nav-background-color: rgba(255, 255, 255, 0.7);
   --nav-border-color: rgba(115, 130, 140, 0.2);
-  --nav-logo-color: #FFF;
+  --nav-logo-color: #fff;
   --article-code-background-color: #f9fafb;
 }
 
@@ -72,32 +72,32 @@ body > main div[role=document] {
 
 div[role=document] > section::before {
   display: block;
-  height: calc(2rem + 3.5rem - .5rem);
+  height: calc(2rem + 3.5rem - 0.5rem);
-  margin-top: calc(-2rem - 3.5rem + .5rem);
+  margin-top: calc(-2rem - 3.5rem + 0.5rem);
   content: "";
 }
 @media (min-width: 576px) {
   div[role=document] > section::before {
-    height: calc(2.5rem + 3.5rem - .5rem);
+    height: calc(2.5rem + 3.5rem - 0.5rem);
-    height: calc(-2.5rem - 3.5rem + .5rem);
+    height: calc(-2.5rem - 3.5rem + 0.5rem);
   }
 }
 @media (min-width: 768px) {
   div[role=document] > section::before {
-    height: calc(3rem + 3.5rem - .5rem);
+    height: calc(3rem + 3.5rem - 0.5rem);
-    margin-top: calc(-3rem - 3.5rem + .5rem);
+    margin-top: calc(-3rem - 3.5rem + 0.5rem);
   }
 }
 @media (min-width: 992px) {
   div[role=document] > section::before {
-    height: calc(3.5rem + 3.5rem - .5rem);
+    height: calc(3.5rem + 3.5rem - 0.5rem);
-    margin-top: calc(-3.5rem - 3.5rem + .5rem);
+    margin-top: calc(-3.5rem - 3.5rem + 0.5rem);
   }
 }
 @media (min-width: 1200px) {
   div[role=document] > section::before {
-    height: calc(4rem + 3.5rem - .5rem);
+    height: calc(4rem + 3.5rem - 0.5rem);
-    margin-top: calc(-4rem - 3.5rem + .5rem);
+    margin-top: calc(-4rem - 3.5rem + 0.5rem);
   }
 }
 
@@ -139,7 +139,8 @@ main > aside nav h1 {
     display: none;
   }
 }
-main > aside li, main > aside summary {
+main > aside li,
+main > aside summary {
   padding-top: 0;
   padding-bottom: 0;
   font-size: 16px;

docs/js/src/aside.js

@@ -6,7 +6,6 @@
  */
 
 export const aside = {
-
   // Config
   minWidth: '992px',
   targets: {
@@ -14,7 +13,6 @@ export const aside = {
     details: 'aside details',
   },
 
-
   // Init
   init() {
     if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
@@ -22,11 +20,11 @@ export const aside = {
       let details = document.querySelectorAll(this.targets.details);
       if (nav.clientHeight < nav.scrollHeight) {
         details.forEach(function (detail) {
-          detail.removeAttribute("open");
+          detail.removeAttribute('open');
         });
       }
     }
-  }
+  },
-}
+};
 
 export default aside;

docs/js/src/color-picker.js

@@ -6,7 +6,6 @@
  */
 
 export const colorPicker = {
-
   // Config
   colors: null,
   buttonsTarget: '#customization article[data-theme="generated"]',
@@ -24,16 +23,19 @@ export const colorPicker = {
 
   // Generate Buttons
   generateButtons() {
-
     // Init
     let innerButtons = '';
     let innerStyles = '';
 
-
     // Loop colors
     for (const color in this.colors) {
       // Buttons
-      innerButtons += '<button data-color="' + color + '" aria-label="Activate ' + color + ' theme"></button>';
+      innerButtons +=
+        '<button data-color="' +
+        color +
+        '" aria-label="Activate ' +
+        color +
+        ' theme"></button>';
 
       // Styles
       innerStyles += `
@@ -52,7 +54,6 @@ export const colorPicker = {
         }`;
     }
 
-
     // Insert buttons
     let containerButtons = document.createElement('FIGURE');
     containerButtons.innerHTML = innerButtons;
@@ -60,13 +61,19 @@ export const colorPicker = {
 
     // Buttons listeners
     this.buttons = document.querySelectorAll(this.selectorButton);
-    this.buttons.forEach(function(button) {
+    this.buttons.forEach(
-      button.addEventListener('click', function(event) {
+      function (button) {
+        button.addEventListener(
+          'click',
+          function (event) {
             let color = event.target.getAttribute('data-color');
             this.setActiveButton(color);
             this.generateTheme(color);
-      }.bind(this), false);
+          }.bind(this),
-    }.bind(this));
+          false
+        );
+      }.bind(this)
+    );
 
     // Insert CSS Styles
     let containerStyles = document.createElement('STYLE');
@@ -76,21 +83,22 @@ export const colorPicker = {
     document.querySelector('head').appendChild(containerStyles);
   },
 
-
   // Set active button
   setActiveButton(color) {
-
     // Remove all active states
-    this.buttons.forEach(function(button) {
+    this.buttons.forEach(
+      function (button) {
         button.removeAttribute('class');
-    }.bind(this));
+      }.bind(this)
+    );
 
     // Set active state
-    let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
+    let buttonPicked = document.querySelector(
+      this.selectorButton + '[data-color="' + color + '"]'
+    );
     buttonPicked.setAttribute('class', 'picked');
   },
 
-
   // Set active button
   generateTheme(color) {
     let name = color;
@@ -102,17 +110,23 @@ export const colorPicker = {
       '.c500': data[500],
       '.c600': data[600],
       '.c700': data[700],
-      '.c600-outline-light': this.hexToRgbA(data[600], .125),
+      '.c600-outline-light': this.hexToRgbA(data[600], 0.125),
-      '.c600-outline-dark': this.hexToRgbA(data[600], .25),
+      '.c600-outline-dark': this.hexToRgbA(data[600], 0.25),
       '.inverse': data['inverse'],
-    }
+    };
 
-    Object.keys(swaps).forEach(function(swap) {
+    Object.keys(swaps).forEach(
-      let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
+      function (swap) {
-      targets.forEach(function(target) {
+        let targets = document.querySelectorAll(
+          this.selectorSection + ' ' + swap
+        );
+        targets.forEach(
+          function (target) {
             target.innerHTML = swaps[swap];
-      }.bind(this));
+          }.bind(this)
-    }.bind(this));
+        );
+      }.bind(this)
+    );
 
     // 2. Update CSS Styles
     const innerStyles = `
@@ -120,7 +134,7 @@ export const colorPicker = {
       --h4-color: ${data[700]};
       --primary: ${data[600]};
       --primary-hover: ${data[700]};
-      --primary-focus: ${this.hexToRgbA(data[600], .125)};
+      --primary-focus: ${this.hexToRgbA(data[600], 0.125)};
       --primary-inverse: ${data['inverse']};
     }
     @media only screen and (prefers-color-scheme: dark) {
@@ -128,7 +142,7 @@ export const colorPicker = {
         --h4-color: ${data[400]};
         --primary: ${data[600]};
         --primary-hover: ${data[500]};
-        --primary-focus: ${this.hexToRgbA(data[600], .25)};
+        --primary-focus: ${this.hexToRgbA(data[600], 0.25)};
         --primary-inverse: ${data['inverse']};
       }
     }
@@ -136,7 +150,7 @@ export const colorPicker = {
       --h4-color: ${data[500]};
       --primary: ${data[600]};
       --primary-hover: ${data[500]};
-      --primary-focus: ${this.hexToRgbA(data[600], .25)};
+      --primary-focus: ${this.hexToRgbA(data[600], 0.25)};
       --primary-inverse: ${data['inverse']};
     }
     [data-theme="generated"] {
@@ -146,16 +160,15 @@ export const colorPicker = {
       --switch-checked-background-color: var(--primary);
     }`;
 
-    document.querySelector('style[title="color-picker"]').innerHTML = this.generatedStyles + this.minifyCSS(innerStyles);
+    document.querySelector('style[title="color-picker"]').innerHTML =
+      this.generatedStyles + this.minifyCSS(innerStyles);
   },
 
-
   // Minify CSS
   minifyCSS(css) {
-    return css.replace(/^ +/gm, '')
+    return css.replace(/^ +/gm, '');
   },
 
-
   // Hexadecimal to Rgba
   hexToRgbA(hex, alpha) {
     let c;
@@ -165,10 +178,16 @@ export const colorPicker = {
         c = [c[0], c[0], c[1], c[1], c[2], c[2]];
       }
       c = '0x' + c.join('');
-      return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') + ', ' + alpha + ')';
+      return (
+        'rgba(' +
+        [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') +
+        ', ' +
+        alpha +
+        ')'
+      );
     }
     throw new Error('Bad Hex');
-  }
+  },
-}
+};
 
 export default colorPicker;

docs/js/src/grid.js

@@ -6,34 +6,30 @@
  */
 
 export const grid = {
-
   // Config
   buttons: {
     text: {
       add: 'Add column',
-      remove: 'Remove column'
+      remove: 'Remove column',
     },
-    target: '#grids article'
+    target: '#grids article',
   },
   grid: {
     current: 4,
     min: 1,
     max: 12,
     gridTarget: '#grids .grid',
-    codeTarget: '#grids pre code'
+    codeTarget: '#grids pre code',
   },
 
-
   // Init
   init() {
     this.addButtons();
-    this.generateGrid()
+    this.generateGrid();
   },
 
-
   // Add buttons
   addButtons() {
-
     // Insert buttons
     let buttons = document.createElement('P');
     buttons.innerHTML = `
@@ -54,20 +50,26 @@ export const grid = {
     document.querySelector(this.buttons.target).before(buttons);
 
     // Add button listener
-    document.querySelector('#grids button.add').addEventListener('click', function() {
+    document.querySelector('#grids button.add').addEventListener(
+      'click',
+      function () {
         this.addColumn();
-    }.bind(this), false);
+      }.bind(this),
+      false
+    );
 
     // Remove button listener
-    document.querySelector('#grids button.remove').addEventListener('click', function() {
+    document.querySelector('#grids button.remove').addEventListener(
+      'click',
+      function () {
         this.removeColumn();
-    }.bind(this), false);
+      }.bind(this),
+      false
+    );
   },
 
-
   // Generate grid
   generateGrid() {
-
     // Config
     let htmlInner = '';
     let codeInner = '&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';
@@ -84,7 +86,6 @@ export const grid = {
     document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
   },
 
-
   // Add column
   addColumn() {
     if (this.grid.current < this.grid.max) {
@@ -93,14 +94,13 @@ export const grid = {
     }
   },
 
-
   // Remove column
   removeColumn() {
     if (this.grid.current > this.grid.min) {
       this.grid.current--;
       this.generateGrid();
     }
-  }
+  },
 };
 
 export default grid;

docs/js/src/material-design-colors.js

@@ -1,303 +1,303 @@
 // Source: https://material.io/design/color/the-color-system.html
 export const materialDesignColors = {
   red: {
-    50: "#ffebee",
+    50: '#ffebee',
-    100: "#ffcdd2",
+    100: '#ffcdd2',
-    200: "#ef9a9a",
+    200: '#ef9a9a',
-    300: "#e57373",
+    300: '#e57373',
-    400: "#ef5350",
+    400: '#ef5350',
-    500: "#f44336",
+    500: '#f44336',
-    600: "#e53935",
+    600: '#e53935',
-    700: "#d32f2f",
+    700: '#d32f2f',
-    800: "#c62828",
+    800: '#c62828',
-    900: "#b71c1c",
+    900: '#b71c1c',
-    a100: "#ff8a80",
+    a100: '#ff8a80',
-    a200: "#ff5252",
+    a200: '#ff5252',
-    a400: "#ff1744",
+    a400: '#ff1744',
-    a700: "#d50000",
+    a700: '#d50000',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
   pink: {
-    50: "#fce4ec",
+    50: '#fce4ec',
-    100: "#f8bbd0",
+    100: '#f8bbd0',
-    200: "#f48fb1",
+    200: '#f48fb1',
-    300: "#f06292",
+    300: '#f06292',
-    400: "#ec407a",
+    400: '#ec407a',
-    500: "#e91e63",
+    500: '#e91e63',
-    600: "#d81b60",
+    600: '#d81b60',
-    700: "#c2185b",
+    700: '#c2185b',
-    800: "#ad1457",
+    800: '#ad1457',
-    900: "#880e4f",
+    900: '#880e4f',
-    a100: "#ff80ab",
+    a100: '#ff80ab',
-    a200: "#ff4081",
+    a200: '#ff4081',
-    a400: "#f50057",
+    a400: '#f50057',
-    a700: "#c51162",
+    a700: '#c51162',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
   purple: {
-    50: "#f3e5f5",
+    50: '#f3e5f5',
-    100: "#e1bee7",
+    100: '#e1bee7',
-    200: "#ce93d8",
+    200: '#ce93d8',
-    300: "#ba68c8",
+    300: '#ba68c8',
-    400: "#ab47bc",
+    400: '#ab47bc',
-    500: "#9c27b0",
+    500: '#9c27b0',
-    600: "#8e24aa",
+    600: '#8e24aa',
-    700: "#7b1fa2",
+    700: '#7b1fa2',
-    800: "#6a1b9a",
+    800: '#6a1b9a',
-    900: "#4a148c",
+    900: '#4a148c',
-    a100: "#ea80fc",
+    a100: '#ea80fc',
-    a200: "#e040fb",
+    a200: '#e040fb',
-    a400: "#d500f9",
+    a400: '#d500f9',
-    a700: "#aa00ff",
+    a700: '#aa00ff',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
-  "deep-purple": {
+  'deep-purple': {
-    50: "#ede7f6",
+    50: '#ede7f6',
-    100: "#d1c4e9",
+    100: '#d1c4e9',
-    200: "#b39ddb",
+    200: '#b39ddb',
-    300: "#9575cd",
+    300: '#9575cd',
-    400: "#7e57c2",
+    400: '#7e57c2',
-    500: "#673ab7",
+    500: '#673ab7',
-    600: "#5e35b1",
+    600: '#5e35b1',
-    700: "#512da8",
+    700: '#512da8',
-    800: "#4527a0",
+    800: '#4527a0',
-    900: "#311b92",
+    900: '#311b92',
-    a100: "#b388ff",
+    a100: '#b388ff',
-    a200: "#7c4dff",
+    a200: '#7c4dff',
-    a400: "#651fff",
+    a400: '#651fff',
-    a700: "#6200ea",
+    a700: '#6200ea',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
   indigo: {
-    50: "#e8eaf6",
+    50: '#e8eaf6',
-    100: "#c5cae9",
+    100: '#c5cae9',
-    200: "#9fa8da",
+    200: '#9fa8da',
-    300: "#7986cb",
+    300: '#7986cb',
-    400: "#5c6bc0",
+    400: '#5c6bc0',
-    500: "#3f51b5",
+    500: '#3f51b5',
-    600: "#3949ab",
+    600: '#3949ab',
-    700: "#303f9f",
+    700: '#303f9f',
-    800: "#283593",
+    800: '#283593',
-    900: "#1a237e",
+    900: '#1a237e',
-    a100: "#8c9eff",
+    a100: '#8c9eff',
-    a200: "#536dfe",
+    a200: '#536dfe',
-    a400: "#3d5afe",
+    a400: '#3d5afe',
-    a700: "#304ffe",
+    a700: '#304ffe',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
   blue: {
-    50: "#e3f2fd",
+    50: '#e3f2fd',
-    100: "#bbdefb",
+    100: '#bbdefb',
-    200: "#90caf9",
+    200: '#90caf9',
-    300: "#64b5f6",
+    300: '#64b5f6',
-    400: "#42a5f5",
+    400: '#42a5f5',
-    500: "#2196f3",
+    500: '#2196f3',
-    600: "#1e88e5",
+    600: '#1e88e5',
-    700: "#1976d2",
+    700: '#1976d2',
-    800: "#1565c0",
+    800: '#1565c0',
-    900: "#0d47a1",
+    900: '#0d47a1',
-    a100: "#82b1ff",
+    a100: '#82b1ff',
-    a200: "#448aff",
+    a200: '#448aff',
-    a400: "#2979ff",
+    a400: '#2979ff',
-    a700: "#2962ff",
+    a700: '#2962ff',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
-  "light-blue": {
+  'light-blue': {
-    50: "#e1f5fe",
+    50: '#e1f5fe',
-    100: "#b3e5fc",
+    100: '#b3e5fc',
-    200: "#81d4fa",
+    200: '#81d4fa',
-    300: "#4fc3f7",
+    300: '#4fc3f7',
-    400: "#29b6f6",
+    400: '#29b6f6',
-    500: "#03a9f4",
+    500: '#03a9f4',
-    600: "#039be5",
+    600: '#039be5',
-    700: "#0288d1",
+    700: '#0288d1',
-    800: "#0277bd",
+    800: '#0277bd',
-    900: "#01579b",
+    900: '#01579b',
-    a100: "#80d8ff",
+    a100: '#80d8ff',
-    a200: "#40c4ff",
+    a200: '#40c4ff',
-    a400: "#00b0ff",
+    a400: '#00b0ff',
-    a700: "#0091ea",
+    a700: '#0091ea',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
   cyan: {
-    50: "#e0f7fa",
+    50: '#e0f7fa',
-    100: "#b2ebf2",
+    100: '#b2ebf2',
-    200: "#80deea",
+    200: '#80deea',
-    300: "#4dd0e1",
+    300: '#4dd0e1',
-    400: "#26c6da",
+    400: '#26c6da',
-    500: "#00bcd4",
+    500: '#00bcd4',
-    600: "#00acc1",
+    600: '#00acc1',
-    700: "#0097a7",
+    700: '#0097a7',
-    800: "#00838f",
+    800: '#00838f',
-    900: "#006064",
+    900: '#006064',
-    a100: "#84ffff",
+    a100: '#84ffff',
-    a200: "#18ffff",
+    a200: '#18ffff',
-    a400: "#00e5ff",
+    a400: '#00e5ff',
-    a700: "#00b8d4",
+    a700: '#00b8d4',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
   teal: {
-    50: "#e0f2f1",
+    50: '#e0f2f1',
-    100: "#b2dfdb",
+    100: '#b2dfdb',
-    200: "#80cbc4",
+    200: '#80cbc4',
-    300: "#4db6ac",
+    300: '#4db6ac',
-    400: "#26a69a",
+    400: '#26a69a',
-    500: "#009688",
+    500: '#009688',
-    600: "#00897b",
+    600: '#00897b',
-    700: "#00796b",
+    700: '#00796b',
-    800: "#00695c",
+    800: '#00695c',
-    900: "#004d40",
+    900: '#004d40',
-    a100: "#a7ffeb",
+    a100: '#a7ffeb',
-    a200: "#64ffda",
+    a200: '#64ffda',
-    a400: "#1de9b6",
+    a400: '#1de9b6',
-    a700: "#00bfa5",
+    a700: '#00bfa5',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
   green: {
-    50: "#e8f5e9",
+    50: '#e8f5e9',
-    100: "#c8e6c9",
+    100: '#c8e6c9',
-    200: "#a5d6a7",
+    200: '#a5d6a7',
-    300: "#81c784",
+    300: '#81c784',
-    400: "#66bb6a",
+    400: '#66bb6a',
-    500: "#4caf50",
+    500: '#4caf50',
-    600: "#43a047",
+    600: '#43a047',
-    700: "#388e3c",
+    700: '#388e3c',
-    800: "#2e7d32",
+    800: '#2e7d32',
-    900: "#1b5e20",
+    900: '#1b5e20',
-    a100: "#b9f6ca",
+    a100: '#b9f6ca',
-    a200: "#69f0ae",
+    a200: '#69f0ae',
-    a400: "#00e676",
+    a400: '#00e676',
-    a700: "#00c853",
+    a700: '#00c853',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
-  "light-green": {
+  'light-green': {
-    50: "#f1f8e9",
+    50: '#f1f8e9',
-    100: "#dcedc8",
+    100: '#dcedc8',
-    200: "#c5e1a5",
+    200: '#c5e1a5',
-    300: "#aed581",
+    300: '#aed581',
-    400: "#9ccc65",
+    400: '#9ccc65',
-    500: "#8bc34a",
+    500: '#8bc34a',
-    600: "#7cb342",
+    600: '#7cb342',
-    700: "#689f38",
+    700: '#689f38',
-    800: "#558b2f",
+    800: '#558b2f',
-    900: "#33691e",
+    900: '#33691e',
-    a100: "#ccff90",
+    a100: '#ccff90',
-    a200: "#b2ff59",
+    a200: '#b2ff59',
-    a400: "#76ff03",
+    a400: '#76ff03',
-    a700: "#64dd17",
+    a700: '#64dd17',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
   lime: {
-    50: "#f9fbe7",
+    50: '#f9fbe7',
-    100: "#f0f4c3",
+    100: '#f0f4c3',
-    200: "#e6ee9c",
+    200: '#e6ee9c',
-    300: "#dce775",
+    300: '#dce775',
-    400: "#d4e157",
+    400: '#d4e157',
-    500: "#cddc39",
+    500: '#cddc39',
-    600: "#c0ca33",
+    600: '#c0ca33',
-    700: "#afb42b",
+    700: '#afb42b',
-    800: "#9e9d24",
+    800: '#9e9d24',
-    900: "#827717",
+    900: '#827717',
-    a100: "#f4ff81",
+    a100: '#f4ff81',
-    a200: "#eeff41",
+    a200: '#eeff41',
-    a400: "#c6ff00",
+    a400: '#c6ff00',
-    a700: "#aeea00",
+    a700: '#aeea00',
-    inverse: "rgba(0, 0, 0, 0.75)"
+    inverse: 'rgba(0, 0, 0, 0.75)',
   },
   yellow: {
-    50: "#fffde7",
+    50: '#fffde7',
-    100: "#fff9c4",
+    100: '#fff9c4',
-    200: "#fff59d",
+    200: '#fff59d',
-    300: "#fff176",
+    300: '#fff176',
-    400: "#ffee58",
+    400: '#ffee58',
-    500: "#ffeb3b",
+    500: '#ffeb3b',
-    600: "#fdd835",
+    600: '#fdd835',
-    700: "#fbc02d",
+    700: '#fbc02d',
-    800: "#f9a825",
+    800: '#f9a825',
-    900: "#f57f17",
+    900: '#f57f17',
-    a100: "#ffff8d",
+    a100: '#ffff8d',
-    a200: "#ffff00",
+    a200: '#ffff00',
-    a400: "#ffea00",
+    a400: '#ffea00',
-    a700: "#ffd600",
+    a700: '#ffd600',
-    inverse: "rgba(0, 0, 0, 0.75)"
+    inverse: 'rgba(0, 0, 0, 0.75)',
   },
   amber: {
-    50: "#fff8e1",
+    50: '#fff8e1',
-    100: "#ffecb3",
+    100: '#ffecb3',
-    200: "#ffe082",
+    200: '#ffe082',
-    300: "#ffd54f",
+    300: '#ffd54f',
-    400: "#ffca28",
+    400: '#ffca28',
-    500: "#ffc107",
+    500: '#ffc107',
-    600: "#ffb300",
+    600: '#ffb300',
-    700: "#ffa000",
+    700: '#ffa000',
-    800: "#ff8f00",
+    800: '#ff8f00',
-    900: "#ff6f00",
+    900: '#ff6f00',
-    a100: "#ffe57f",
+    a100: '#ffe57f',
-    a200: "#ffd740",
+    a200: '#ffd740',
-    a400: "#ffc400",
+    a400: '#ffc400',
-    a700: "#ffab00",
+    a700: '#ffab00',
-    inverse: "rgba(0, 0, 0, 0.75)"
+    inverse: 'rgba(0, 0, 0, 0.75)',
   },
   orange: {
-    50: "#fff3e0",
+    50: '#fff3e0',
-    100: "#ffe0b2",
+    100: '#ffe0b2',
-    200: "#ffcc80",
+    200: '#ffcc80',
-    300: "#ffb74d",
+    300: '#ffb74d',
-    400: "#ffa726",
+    400: '#ffa726',
-    500: "#ff9800",
+    500: '#ff9800',
-    600: "#fb8c00",
+    600: '#fb8c00',
-    700: "#f57c00",
+    700: '#f57c00',
-    800: "#ef6c00",
+    800: '#ef6c00',
-    900: "#e65100",
+    900: '#e65100',
-    a100: "#ffd180",
+    a100: '#ffd180',
-    a200: "#ffab40",
+    a200: '#ffab40',
-    a400: "#ff9100",
+    a400: '#ff9100',
-    a700: "#ff6d00",
+    a700: '#ff6d00',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
-  "deep-orange": {
+  'deep-orange': {
-    50: "#fbe9e7",
+    50: '#fbe9e7',
-    100: "#ffccbc",
+    100: '#ffccbc',
-    200: "#ffab91",
+    200: '#ffab91',
-    300: "#ff8a65",
+    300: '#ff8a65',
-    400: "#ff7043",
+    400: '#ff7043',
-    500: "#ff5722",
+    500: '#ff5722',
-    600: "#f4511e",
+    600: '#f4511e',
-    700: "#e64a19",
+    700: '#e64a19',
-    800: "#d84315",
+    800: '#d84315',
-    900: "#bf360c",
+    900: '#bf360c',
-    a100: "#ff9e80",
+    a100: '#ff9e80',
-    a200: "#ff6e40",
+    a200: '#ff6e40',
-    a400: "#ff3d00",
+    a400: '#ff3d00',
-    a700: "#dd2c00",
+    a700: '#dd2c00',
-    inverse: "#FFF"
+    inverse: '#FFF',
   },
   grey: {
-    50: "#fafafa",
+    50: '#fafafa',
-    100: "#f5f5f5",
+    100: '#f5f5f5',
-    200: "#eeeeee",
+    200: '#eeeeee',
-    300: "#e0e0e0",
+    300: '#e0e0e0',
-    400: "#bdbdbd",
+    400: '#bdbdbd',
-    500: "#9e9e9e",
+    500: '#9e9e9e',
-    600: "#757575",
+    600: '#757575',
-    700: "#616161",
+    700: '#616161',
-    800: "#424242",
+    800: '#424242',
-    900: "#212121",
+    900: '#212121',
-    inverse: "#FFF"
+    inverse: '#FFF',
+  },
+  'blue-grey': {
+    50: '#eceff1',
+    100: '#cfd8dc',
+    200: '#b0bec5',
+    300: '#90a4ae',
+    400: '#78909c',
+    500: '#607d8b',
+    600: '#546e7a',
+    700: '#455a64',
+    800: '#37474f',
+    900: '#263238',
+    inverse: '#FFF',
   },
-  "blue-grey": {
-    50: "#eceff1",
-    100: "#cfd8dc",
-    200: "#b0bec5",
-    300: "#90a4ae",
-    400: "#78909c",
-    500: "#607d8b",
-    600: "#546e7a",
-    700: "#455a64",
-    800: "#37474f",
-    900: "#263238",
-    inverse: "#FFF"
-  }
 };
 
 export default materialDesignColors;

docs/js/src/most-visible.js

@@ -51,10 +51,9 @@
    * @property {number}  defaults.offset      An offset to take into account when calculating visibility.
    */
 
-
   MostVisible.defaults = {
     percentage: false,
-    offset: 0
+    offset: 0,
   };
   MostVisible.prototype = {
     /**
@@ -66,11 +65,15 @@
       var _this = this;
 
       var viewportHeight = document.documentElement.clientHeight;
-      return Array.prototype.reduce.call(this.elements, function (carry, element) {
+      return Array.prototype.reduce.call(
+        this.elements,
+        function (carry, element) {
           var value = _this.getVisibleHeight(element, viewportHeight);
 
           return value > carry[0] ? [value, element] : carry;
-      }, [0, null])[1];
+        },
+        [0, null]
+      )[1];
     },
 
     /**
@@ -87,7 +90,7 @@
         height = rect.bottom - rect.top,
         visible = {
           top: rectTopOffset >= 0 && rectTopOffset < viewportHeight,
-        bottom: rectBottomOffset > 0 && rectBottomOffset < viewportHeight
+          bottom: rectBottomOffset > 0 && rectBottomOffset < viewportHeight,
         };
       var visiblePx = 0;
 
@@ -108,11 +111,11 @@
       }
 
       if (this.options.percentage) {
-        return visiblePx / height * 100;
+        return (visiblePx / height) * 100;
       }
 
       return visiblePx;
-    }
+    },
   };
 
   MostVisible.makeJQueryPlugin = function ($) {
@@ -126,7 +129,6 @@
     };
   }; // Try adding the jQuery plugin to window.jQuery
 
-
   MostVisible.makeJQueryPlugin(window.jQuery);
   /**
    * Extends obj by adding the properties of all other objects passed to the function.

docs/js/src/scrollspy.js

@@ -11,9 +11,8 @@
 import * as MostVisible from './most-visible.js';
 
 export const scrollspy = {
-
   mostVisible() {
-    new MostVisible()
+    new MostVisible();
   },
 
   // Config
@@ -25,7 +24,6 @@ export const scrollspy = {
     active: 'active',
   },
 
-
   // Init
   init() {
     if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
@@ -34,38 +32,48 @@ export const scrollspy = {
     }
   },
 
-
   // Set active section in nav
   setActiveNav() {
-
     // Get active section
     let currentSection = mostVisible(this.targets.sections).getAttribute('id');
 
     // Remove all active states
-    let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);
+    let links = document.querySelectorAll(
-    links.forEach(function(link) {
+      this.targets.nav + ' a.' + this.targets.active
+    );
+    links.forEach(
+      function (link) {
         link.classList.remove(this.targets.active);
-    }.bind(this));
+      }.bind(this)
+    );
 
     // Set active state
-    let activeLink = document.querySelector(this.targets.nav + ' a[href="#' + currentSection + '"]');
+    let activeLink = document.querySelector(
+      this.targets.nav + ' a[href="#' + currentSection + '"]'
+    );
     activeLink.classList.add(this.targets.active);
 
     // Open details parent
     activeLink.closest('details').setAttribute('open', '');
   },
 
-
   // Scroll stop
   scrollStop() {
     let isScrolling;
-    window.addEventListener('scroll', function(event) {
+    window.addEventListener(
+      'scroll',
+      function (event) {
         window.clearTimeout(isScrolling);
-      isScrolling = setTimeout(function() {
+        isScrolling = setTimeout(
+          function () {
             this.setActiveNav();
-      }.bind(this), this.interval);
+          }.bind(this),
-    }.bind(this), false);
+          this.interval
-  }
+        );
-}
+      }.bind(this),
+      false
+    );
+  },
+};
 
 export default scrollspy;

docs/js/src/theme-switcher.js

@@ -6,69 +6,63 @@
  */
 
 export const themeSwitcher = {
-
   // Config
   _scheme: 'auto',
   change: {
     light: '<i>Turn on dark mode</i>',
-    dark: '<i>Turn off dark mode</i>'
+    dark: '<i>Turn off dark mode</i>',
   },
   buttonsTarget: '.theme-switcher',
 
-
-
   // Init
   init() {
     this.scheme = this._scheme;
     this.initSwitchers();
   },
 
-
   // Prefered color scheme
   get preferedColorScheme() {
     if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
       return 'dark';
-    }
+    } else {
-    else {
       return 'light';
     }
   },
 
-
   // Init switchers
   initSwitchers() {
     const buttons = document.querySelectorAll(this.buttonsTarget);
-    buttons.forEach(function(button) {
+    buttons.forEach(
-      button.addEventListener('click', function(event) {
+      function (button) {
+        button.addEventListener(
+          'click',
+          function (event) {
             if (this.scheme == 'dark') {
               this.scheme = 'light';
-        }
+            } else {
-        else {
               this.scheme = 'dark';
             }
-      }.bind(this), false);
+          }.bind(this),
-    }.bind(this));
+          false
+        );
+      }.bind(this)
+    );
   },
 
-
   // Add new button
   addButton(config) {
-
     // Insert Switcher
     let button = document.createElement(config.tag);
     button.className = config.class;
     document.querySelector(config.target).appendChild(button);
   },
 
-
   // Set scheme
   set scheme(scheme) {
-
     if (scheme == 'auto') {
       if (this.preferedColorScheme == 'dark') {
         this._scheme = 'dark';
-      }
+      } else {
-      else {
         this._scheme = 'light';
       }
     }
@@ -82,33 +76,31 @@ export const themeSwitcher = {
     this.applyScheme();
   },
 
-
   // Get scheme
   get scheme() {
     return this._scheme;
   },
 
-
   // Apply scheme
   applyScheme() {
-
     // Root attribute
     document.querySelector('html').setAttribute('data-theme', this.scheme);
 
     // Buttons text
     const buttons = document.querySelectorAll(this.buttonsTarget);
     let text;
-    buttons.forEach(function(button) {
+    buttons.forEach(
+      function (button) {
         if (this.scheme == 'dark') {
           text = this.change.dark;
-      }
+        } else {
-      else {
           text = this.change.light;
         }
         button.innerHTML = text;
         button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
-    }.bind(this));
+      }.bind(this)
-  }
+    );
-}
+  },
+};
 
 export default themeSwitcher;

docs/scss/components/_nav.scss

@@ -23,7 +23,6 @@ body > nav {
 
   // Band & Title
   ul:first-of-type li {
-
     // Brand
     &:first-of-type {
       a {

docs/scss/components/_theme-switcher.scss

@@ -8,7 +8,7 @@
   bottom: var(--spacing);
   width: auto;
   margin-bottom: 0;
-  padding: .75rem;
+  padding: 0.75rem;
   border-radius: 2rem;
   box-shadow: var(--card-box-shadow);
   line-height: 1;
@@ -20,9 +20,14 @@
     height: 1rem;
     border: 0.15rem solid currentColor;
     border-radius: 50%;
-    background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
+    background: linear-gradient(
+      to right,
+      currentColor 0%,
+      currentColor 50%,
+      transparent 50%
+    );
     vertical-align: bottom;
-    content: '';
+    content: "";
     transition: transform var(--transition);
   }
 
@@ -31,7 +36,7 @@
     max-width: 0;
     padding: 0;
     overflow: hidden;
-    font-size: .875rem;
+    font-size: 0.875rem;
     font-style: normal;
     white-space: nowrap;
   }
@@ -39,10 +44,8 @@
   &:hover,
   &:focus {
     max-width: 100%;
-    transition:
+    transition: background-color var(--transition),
-      background-color var(--transition),
+      border-color var(--transition), color var(--transition),
-      border-color var(--transition),
-      color var(--transition),
       box-shadow var(--transition);
   }
 
@@ -54,8 +57,7 @@
     i {
       max-width: 100%;
       padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
-      transition: max-width var(--transition),
+      transition: max-width var(--transition), padding var(--transition);
-                  padding var(--transition);
     }
   }
 

docs/scss/content/_code.scss

@@ -17,7 +17,8 @@ article pre code {
 section > pre {
   background: var(--article-code-background-color);
   margin: var(--block-spacing-vertical) 0;
-  padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
+  padding: calc(var(--block-spacing-vertical) / 1.5)
+    var(--block-spacing-horizontal);
   box-shadow: var(--card-box-shadow);
 }
 
@@ -33,7 +34,7 @@ section > pre {
     position: absolute;
     top: 0;
     right: 0;
-    padding: .375rem .75rem;
+    padding: 0.375rem 0.75rem;
     border-radius: 0;
     color: var(--primary-inverse);
     font-size: 14px;
@@ -47,7 +48,8 @@ section > pre {
 
   // Spacing for Valid & Invalid badge
   code {
-    padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);
+    padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)
+      var(--block-spacing-horizontal);
   }
 }
 
@@ -55,13 +57,13 @@ section > pre {
 [data-theme="invalid"] {
   &:before {
     background: var(--invalid-color);
-    content: 'Not so great';
+    content: "Not so great";
   }
 }
 
 [data-theme="valid"] {
   &:before {
     background: var(--valid-color);
-    content: 'Great';
+    content: "Great";
   }
 }

docs/scss/content/_typography.scss

@@ -6,12 +6,12 @@ section > hgroup {
   margin-bottom: calc(var(--typography-spacing-vertical) * 2);
 }
 
-a[role=button] {
+a[role="button"] {
   margin-right: calc(var(--typography-spacing-vertical) / 4);
   margin-bottom: var(--typography-spacing-vertical);
 }
 
-[role=document] {
+[role="document"] {
   section > h1,
   section > h2,
   section > h3 {

docs/scss/layout/_aside.scss

@@ -3,7 +3,6 @@
  */
 
 main > aside {
-
   nav {
     width: 100%;
     margin-bottom: var(--block-spacing-vertical);
@@ -26,7 +25,8 @@ main > aside {
     }
   }
 
-  li, summary {
+  li,
+  summary {
     padding-top: 0;
     padding-bottom: 0;
     font-size: 16px;
@@ -51,7 +51,7 @@ main > aside {
   }
 
   details {
-    padding-bottom: .25rem;
+    padding-bottom: 0.25rem;
     border-bottom: none;
 
     summary {

docs/scss/layout/_documentation.scss

@@ -11,7 +11,6 @@
 
 // Docs: Customization
 #customization {
-
   figure {
     display: grid;
     grid-template-columns: repeat(9, 1fr);
@@ -47,7 +46,7 @@
         background-image: var(--icon-check);
         background-position: center;
         background-repeat: no-repeat;
-        background-size: .66rem auto;
+        background-size: 0.66rem auto;
         box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
       }
       &[data-color="lime"],
@@ -69,10 +68,8 @@
   }
 }
 
-
 // Docs: Grids
 #grids {
-
   --grid-spacing-vertical: 1rem;
 
   button {
@@ -83,12 +80,12 @@
     @media (min-width: map-get($breakpoints, "sm")) {
       display: inline-block;
       width: auto;
-      margin-right: .5rem;
+      margin-right: 0.5rem;
     }
 
     svg {
       stroke: var(--secondary);
-      margin-right: .5rem;
+      margin-right: 0.5rem;
       border: 2px solid currentColor;
       border-radius: 1rem;
       background: currentColor;

docs/scss/layout/_main.scss

@@ -7,7 +7,6 @@ $navHeight: 3.5rem;
 
 // Main grid
 body > main {
-
   padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
 
   @if map-get($breakpoints, "lg") {
@@ -33,51 +32,51 @@ body > main {
 
 // Anchors hacks for internal links
 div[role="document"] > section::before {
-
   display: block;
-  height: calc(2rem + #{$navHeight} - .5rem);
+  height: calc(2rem + #{$navHeight} - 0.5rem);
-  margin-top: calc(-2rem - #{$navHeight} + .5rem);
+  margin-top: calc(-2rem - #{$navHeight} + 0.5rem);
-  content: '';
+  content: "";
 
   @if map-get($breakpoints, "sm") {
     @media (min-width: map-get($breakpoints, "sm")) {
-      height: calc(2.5rem + #{$navHeight} - .5rem);
+      height: calc(2.5rem + #{$navHeight} - 0.5rem);
-      height: calc(-2.5rem - #{$navHeight} + .5rem);
+      height: calc(-2.5rem - #{$navHeight} + 0.5rem);
     }
   }
 
   @if map-get($breakpoints, "md") {
     @media (min-width: map-get($breakpoints, "md")) {
-      height: calc(3rem + #{$navHeight} - .5rem);
+      height: calc(3rem + #{$navHeight} - 0.5rem);
-      margin-top: calc(-3rem - #{$navHeight} + .5rem);
+      margin-top: calc(-3rem - #{$navHeight} + 0.5rem);
     }
   }
 
   @if map-get($breakpoints, "lg") {
     @media (min-width: map-get($breakpoints, "lg")) {
-      height: calc(3.5rem + #{$navHeight} - .5rem);
+      height: calc(3.5rem + #{$navHeight} - 0.5rem);
-      margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
+      margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);
     }
   }
 
   @if map-get($breakpoints, "xl") {
     @media (min-width: map-get($breakpoints, "xl")) {
-      height: calc(4rem + #{$navHeight} - .5rem);
+      height: calc(4rem + #{$navHeight} - 0.5rem);
-      margin-top: calc(-4rem - #{$navHeight} + .5rem);
+      margin-top: calc(-4rem - #{$navHeight} + 0.5rem);
     }
   }
 }
 
 // External links
-div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
+div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after
+{
   display: inline-block;
   width: 1rem;
   height: 1rem;
   background-image: var(--icon-external);
   background-position: top center;
   background-repeat: no-repeat;
-  background-size: .66rem auto;
+  background-size: 0.66rem auto;
-  content: '';
+  content: "";
 }
 
 // Embedded SVG

docs/scss/themes/_docs.scss

@@ -9,7 +9,6 @@
 // Can be forced with data-theme="light"
 @import "docs/light";
 
-
 // Dark theme (Auto)
 // Automatically enabled if user has Dark mode enabled
 @import "docs/dark";

docs/scss/themes/docs/_dark.scss

@@ -1,9 +1,9 @@
 // Dark theme [Additions for docs]
 @mixin dark {
-  --invalid-color: #{rgba($red-900, .5)};
+  --invalid-color: #{rgba($red-900, 0.5)};
-  --valid-color: #{rgba($green-800, .5)};
+  --valid-color: #{rgba($green-800, 0.5)};
-  --nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
+  --nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};
-  --nav-border-color: #{rgba($grey-500, .2)};
+  --nav-border-color: #{rgba($grey-500, 0.2)};
   --nav-logo-color: #{mix($black, $grey-900)};
   --article-code-background-color: var(--code-background-color);
 }

docs/scss/themes/docs/_light.scss

@@ -4,8 +4,8 @@
 :root:not([data-theme="dark"]) {
   --invalid-color: #{$red-800};
   --valid-color: #{$green-700};
-  --nav-background-color: #{rgba($white, .7)};
+  --nav-background-color: #{rgba($white, 0.7)};
-  --nav-border-color: #{rgba($grey-500, .2)};
+  --nav-border-color: #{rgba($grey-500, 0.2)};
   --nav-logo-color: #{$white};
   --article-code-background-color: #{mix($grey-50, $white, 33%)};
 }

scss/_variables.scss

@@ -29,7 +29,6 @@ $enable-transitions: true !default;
 // Enable overriding with !important
 $enable-important: true !default;
 
-
 // Responsive
 // ––––––––––––––––––––
 
@@ -51,7 +50,7 @@ $breakpoints: (
   sm: 576px,
   md: 768px,
   lg: 992px,
-  xl: 1200px
+  xl: 1200px,
 ) !default;
 
 // Viewports

scss/components/_accordion.scss

@@ -44,7 +44,7 @@ details {
       background-position: center;
       background-repeat: no-repeat;
       background-size: 1rem auto;
-      content: '';
+      content: "";
 
       @if $enable-transitions {
         transition: transform var(--transition);
@@ -67,7 +67,6 @@ details {
 
   // Open
   &[open] {
-
     > summary {
       margin-bottom: calc(var(--spacing) * 0.25);
 

scss/components/_card.scss

@@ -16,7 +16,8 @@ article {
   > footer {
     margin-right: calc(var(--block-spacing-horizontal) * -1);
     margin-left: calc(var(--block-spacing-horizontal) * -1);
-    padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
+    padding: calc(var(--block-spacing-vertical) * 0.66)
+      var(--block-spacing-horizontal);
     background-color: var(--card-sectionning-background-color);
   }
 

scss/components/_nav.scss

@@ -55,7 +55,6 @@ nav {
 
 // Vertical Nav
 aside {
-
   nav,
   ol,
   ul,

scss/components/_progress.scss

@@ -2,7 +2,6 @@
  * Progress
  */
 
-
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@@ -15,12 +14,10 @@ progress {
   vertical-align: baseline; // 2
 }
 
-
 // Pico
 // ––––––––––––––––––––
 
 progress {
-
   // Reset the default appearance
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -29,7 +26,7 @@ progress {
   // Styles
   display: inline-block;
   width: 100%;
-  height: .5rem;
+  height: 0.5rem;
   margin-bottom: calc(var(--spacing) * 0.5);
   overflow: hidden;
 
@@ -55,7 +52,13 @@ progress {
   // Indeterminate state
   @media (prefers-reduced-motion: no-preference) {
     &:indeterminate {
-      background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left / 150% 150% no-repeat;
+      background: var(--progress-background-color)
+        linear-gradient(
+          to right,
+          var(--progress-color) 30%,
+          var(--progress-background-color) 30%
+        )
+        top left / 150% 150% no-repeat;
       animation: progressIndeterminate 1s linear infinite;
 
       &[value]::-webkit-progress-value {

scss/content/_button.scss

@@ -2,7 +2,6 @@
  * Button
  */
 
-
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@@ -35,7 +34,6 @@ button::-moz-focus-inner,
   border-style: none;
 }
 
-
 // Pico
 // ––––––––––––––––––––
 
@@ -59,7 +57,8 @@ a[role="button"] {
   --border-color: var(--primary);
   --color: var(--primary-inverse);
   --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  padding: var(--form-element-spacing-vertical)
+    var(--form-element-spacing-horizontal);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
   outline: none;
@@ -73,10 +72,8 @@ a[role="button"] {
   cursor: pointer;
 
   @if $enable-transitions {
-    transition:
+    transition: background-color var(--transition),
-      background-color var(--transition),
+      border-color var(--transition), color var(--transition),
-      border-color var(--transition),
-      color var(--transition),
       box-shadow var(--transition);
   }
 
@@ -89,7 +86,8 @@ a[role="button"] {
   }
 
   &:focus {
-    --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
+    --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+      0 0 0 var(--outline-width) var(--primary-focus);
   }
 }
 
@@ -108,7 +106,8 @@ input[type="reset"] {
   }
 
   &:focus {
-    --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
+    --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+      0 0 0 var(--outline-width) var(--secondary-focus);
   }
 }
 
@@ -119,7 +118,6 @@ input[type="reset"] {
   input[type="button"],
   input[type="reset"],
   a[role="button"] {
-
     // Secondary
     &.secondary {
       --background-color: var(--secondary);
@@ -135,7 +133,8 @@ input[type="reset"] {
       }
 
       &:focus {
-        --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
+        --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(--outline-width) var(--secondary-focus);
       }
     }
 
@@ -153,7 +152,8 @@ input[type="reset"] {
       }
 
       &:focus {
-        --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
+        --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+          0 0 0 var(--outline-width) var(--contrast-focus);
       }
     }
 
@@ -200,9 +200,8 @@ input[type="submit"],
 input[type="button"],
 input[type="reset"],
 a[role="button"] {
-
   &[disabled] {
-    opacity: .5;
+    opacity: 0.5;
     pointer-events: none;
   }
 }

scss/content/_code.scss

@@ -2,7 +2,6 @@
  * Code
  */
 
-
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@@ -15,7 +14,7 @@ code,
 kbd,
 samp {
   font-family: var(--font-family); // 1
-  font-size: .875em; // 2
+  font-size: 0.875em; // 2
 }
 
 // Prevent overflow of the container in all browsers (opinionated)
@@ -24,7 +23,6 @@ pre {
   overflow: auto;
 }
 
-
 // Pico
 // ––––––––––––––––––––
 
@@ -41,7 +39,7 @@ kbd {
 code,
 kbd {
   display: inline-block;
-  padding: .375rem .5rem;
+  padding: 0.375rem 0.5rem;
 }
 
 pre {
@@ -60,7 +58,6 @@ pre {
 
 // Code Syntax
 code {
-
   // Tags
   b {
     color: var(--code-tag-color);

scss/content/_embedded.scss

@@ -2,7 +2,6 @@
  * Embedded content
  */
 
-
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css

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

@@ -5,7 +5,6 @@
 
 // Color
 [type="color"] {
-
   // Wrapper
   @mixin color-wrapper {
     padding: 0;
@@ -42,7 +41,7 @@
   [type="time"],
   [type="week"] {
     background-image: var(--icon-date);
-    background-position: center right .75rem;
+    background-position: center right 0.75rem;
     background-repeat: no-repeat;
     background-size: 1rem auto;
 
@@ -80,7 +79,8 @@
     margin-left: 0;
     margin-inline-end: calc(var(--spacing) / 2);
     margin-inline-start: 0;
-    padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
+    padding: calc(var(--form-element-spacing-vertical) * 0.5)
+      calc(var(--form-element-spacing-horizontal) * 0.5);
     border: var(--border-width) solid var(--border-color);
     border-radius: var(--border-radius);
     outline: none;
@@ -94,10 +94,8 @@
     cursor: pointer;
 
     @if $enable-transitions {
-      transition:
+      transition: background-color var(--transition),
-        background-color var(--transition),
+        border-color var(--transition), color var(--transition),
-        border-color var(--transition),
-        color var(--transition),
         box-shadow var(--transition);
     }
 
@@ -125,7 +123,7 @@
 // Range
 [type="range"] {
   // Config
-  $height-track: .25rem;
+  $height-track: 0.25rem;
   $height-thumb: 1.25rem;
   $border-thumb: 2px;
 
@@ -145,8 +143,7 @@
     background-color: var(--range-border-color);
 
     @if $enable-transitions {
-      transition:
+      transition: background-color var(--transition),
-        background-color var(--transition),
         box-shadow var(--transition);
     }
   }
@@ -175,8 +172,7 @@
     cursor: pointer;
 
     @if $enable-transitions {
-      transition:
+      transition: background-color var(--transition),
-        background-color var(--transition),
         transform var(--transition);
     }
   }
@@ -221,7 +217,9 @@
   border-radius: 5rem;
 
   @if $enable-important {
-    padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+    padding-left: calc(
+      var(--form-element-spacing-horizontal) + 1.75rem
+    ) !important;
     background-image: var(--icon-search);
     background-position: center left 1.125rem;
     background-repeat: no-repeat;

scss/content/_form-checkbox-radio.scss

@@ -10,10 +10,10 @@
   appearance: none;
   width: 1.25em;
   height: 1.25em;
-  margin-top: -.125em;
+  margin-top: -0.125em;
-  margin-right: .375em;
+  margin-right: 0.375em;
   margin-left: 0;
-  margin-inline-end: .375em;
+  margin-inline-end: 0.375em;
   margin-inline-start: 0;
   border-width: var(--border-width);
   vertical-align: middle;
@@ -31,12 +31,12 @@
     background-image: var(--icon-checkbox);
     background-position: center;
     background-repeat: no-repeat;
-    background-size: .75em auto;
+    background-size: 0.75em auto;
   }
 
   & ~ label {
     display: inline-block;
-    margin-right: .375em;
+    margin-right: 0.375em;
     margin-bottom: 0;
     cursor: pointer;
   }
@@ -50,7 +50,7 @@
     background-image: var(--icon-minus);
     background-position: center;
     background-repeat: no-repeat;
-    background-size: .75em auto;
+    background-size: 0.75em auto;
   }
 }
 
@@ -62,7 +62,7 @@
   &:checked:active,
   &:checked:focus {
     --background-color: var(--primary-inverse);
-    border-width: .35em;
+    border-width: 0.35em;
     background-image: none;
   }
 }
@@ -76,7 +76,7 @@
   // Config
   $switch-height: 1.25em;
   $switch-width: 2.25em;
-  $switch-transition:  .1s ease-in-out;
+  $switch-transition: 0.1s ease-in-out;
 
   // Styles
   width: $switch-width;
@@ -102,7 +102,7 @@
     height: 100%;
     border-radius: 50%;
     background-color: var(--color);
-    content: '';
+    content: "";
 
     @if $enable-transitions {
       transition: margin $switch-transition;

scss/content/_form.scss

@@ -2,7 +2,6 @@
  * Form elements
  */
 
-
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@@ -106,15 +105,13 @@ textarea {
   border-width: 0;
 }
 
-
 // Pico
 // ––––––––––––––––––––
 
 // Force height for alternatives input types
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
   height: calc(
-    (1rem * var(--line-height)) +
+    (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
-    (var(--form-element-spacing-vertical) * 2) +
       (var(--border-width) * 2)
   );
 }
@@ -145,10 +142,9 @@ textarea {
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
 select,
 textarea {
-  -webkit-appearance: none;
-     -moz-appearance: none;
   appearance: none;
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  padding: var(--form-element-spacing-vertical)
+    var(--form-element-spacing-horizontal);
   vertical-align: middle;
 }
 
@@ -169,10 +165,8 @@ textarea {
   font-weight: var(--font-weight);
 
   @if $enable-transitions {
-    transition:
+    transition: background-color var(--transition),
-      background-color var(--transition),
+      border-color var(--transition), color var(--transition),
-      border-color var(--transition),
-      color var(--transition),
       box-shadow var(--transition);
   }
 }
@@ -221,21 +215,23 @@ textarea {
 input,
 select,
 textarea {
-
   &[aria-invalid] {
     @if $enable-important {
-      padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+      padding-right: calc(
+        var(--form-element-spacing-horizontal) + 1.5rem
+      ) !important;
       padding-left: var(--form-element-spacing-horizontal);
-      padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
+      padding-inline-end: calc(
+        var(--form-element-spacing-horizontal) + 1.5rem
+      ) !important;
       padding-inline-start: var(--form-element-spacing-horizontal) !important;
-    }
+    } @else {
-    @else {
       padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
       padding-left: var(--form-element-spacing-horizontal);
       padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
       padding-inline-start: var(--form-element-spacing-horizontal);
     }
-    background-position: center right .75rem;
+    background-position: center right 0.75rem;
     background-repeat: no-repeat;
     background-size: 1rem auto;
   }
@@ -247,9 +243,10 @@ textarea {
     &:active,
     &:focus {
       @if $enable-important {
-        --border-color: var(--form-element-valid-active-border-color) !important;
+        --border-color: var(
-      }
+          --form-element-valid-active-border-color
-      @else {
+        ) !important;
+      } @else {
         --border-color: var(--form-element-valid-active-border-color);
       }
     }
@@ -262,9 +259,10 @@ textarea {
     &:active,
     &:focus {
       @if $enable-important {
-        --border-color: var(--form-element-invalid-active-border-color) !important;
+        --border-color: var(
-      }
+          --form-element-invalid-active-border-color
-      @else {
+        ) !important;
+      } @else {
         --border-color: var(--form-element-invalid-active-border-color);
       }
     }
@@ -276,7 +274,7 @@ textarea {
   select,
   textarea {
     &[aria-invalid] {
-      background-position: center left .75rem;
+      background-position: center left 0.75rem;
     }
   }
 }
@@ -300,7 +298,6 @@ textarea {
 
 // Select
 select {
-
   // Unstyle the caret on `<select>`s in IE10+.
   &::-ms-expand {
     border: 0;
@@ -313,7 +310,7 @@ select {
     padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
     padding-inline-start: var(--form-element-spacing-horizontal);
     background-image: var(--icon-chevron);
-    background-position: center right .75rem;
+    background-position: center right 0.75rem;
     background-repeat: no-repeat;
     background-size: 1rem auto;
   }
@@ -322,7 +319,7 @@ select {
 [dir="rtl"] {
   select {
     &:not([multiple]):not([size]) {
-      background-position: center left .75rem;
+      background-position: center left 0.75rem;
     }
   }
 }

scss/content/_miscs.scss

@@ -2,7 +2,6 @@
  * Miscs
  */
 
-
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@@ -23,8 +22,7 @@ hr {
 template {
   @if $enable-important {
     display: none !important;
-  }
+  } @else {
-  @else {
     display: none;
   }
 }

scss/content/_table.scss

@@ -2,7 +2,6 @@
  * Table
  */
 
-
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@@ -19,7 +18,6 @@ table {
   text-indent: 0; // 3
 }
 
-
 // Pico
 // ––––––––––––––––––––
 

scss/content/_typography.scss

@@ -2,7 +2,6 @@
  * Typography
  */
 
-
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@@ -18,7 +17,7 @@ strong {
 sub,
 sup {
   position: relative;
-  font-size: .75em;
+  font-size: 0.75em;
   line-height: 0;
   vertical-align: baseline;
 }
@@ -46,7 +45,6 @@ ul ul {
   margin: 0;
 }
 
-
 // Pico
 // ––––––––––––––––––––
 
@@ -79,11 +77,8 @@ a {
   text-decoration: var(--text-decoration);
 
   @if $enable-transitions {
-    transition:
+    transition: background-color var(--transition), color var(--transition),
-      background-color var(--transition),
+      text-decoration var(--transition), box-shadow var(--transition);
-      color var(--transition),
-      text-decoration var(--transition),
-      box-shadow var(--transition);
   }
 
   &:hover,
@@ -98,7 +93,6 @@ a {
   }
 
   @if $enable-classes {
-
     // Secondary
     &.secondary {
       --color: var(--secondary);
@@ -231,7 +225,7 @@ ul li {
 
 // Highlighted text
 mark {
-  padding: .125rem .25rem;
+  padding: 0.125rem 0.25rem;
   background-color: var(--mark-background-color);
   color: var(--mark-color);
   vertical-align: middle;
@@ -243,9 +237,9 @@ blockquote {
   margin: var(--typography-spacing-vertical) 0;
   padding: var(--spacing);
   border-right: none;
-  border-left: .25rem solid var(--blockquote-border-color);
+  border-left: 0.25rem solid var(--blockquote-border-color);
   border-inline-end: none;
-  border-inline-start: .25rem solid var(--blockquote-border-color);
+  border-inline-start: 0.25rem solid var(--blockquote-border-color);
 
   footer {
     margin-top: calc(var(--typography-spacing-vertical) * 0.5);

scss/layout/_container.scss

@@ -1,5 +1,4 @@
 @if ($enable-class-container and $enable-classes) {
-
   /**
  * Container
  */
@@ -14,7 +13,6 @@
   }
 
   .container {
-
     @if map-get($breakpoints, "sm") {
       @media (min-width: map-get($breakpoints, "sm")) {
         max-width: map-get($viewports, "sm");

scss/layout/_document.scss

@@ -3,7 +3,6 @@
  * Content-box & Responsive typography
  */
 
-
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css

scss/layout/_grid.scss

@@ -1,5 +1,4 @@
 @if $enable-classes {
-
   /**
  * Grid
  * Minimal grid system with auto-layout columns

scss/layout/_sectioning.scss

@@ -3,7 +3,6 @@
  * Container and responsive spacings for header, main, footer
  */
 
-
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@@ -14,7 +13,6 @@ main {
   display: block;
 }
 
-
 // Pico
 // ––––––––––––––––––––
 
@@ -35,7 +33,6 @@ body {
 
       // Centered viewport
       @if $enable-viewport {
-
         @if map-get($breakpoints, "sm") and $enable-viewport {
           @media (min-width: map-get($breakpoints, "sm")) {
             max-width: map-get($viewports, "sm");

scss/pico.classless.scss

@@ -7,7 +7,6 @@ $enable-semantic-container: true;
 // Enable .classes
 $enable-classes: false;
 
-
 // Pico Lib
 // --------------------
 

scss/pico.fluid.classless.scss

@@ -10,7 +10,6 @@ $enable-viewport: false;
 // Enable .classes
 $enable-classes: false;
 
-
 // Pico Lib
 // --------------------
 

scss/pico.slim.scss

@@ -6,7 +6,6 @@
  * You can export only the modules you need
  */
 
-
 // Config
 // --------------------
 
@@ -19,7 +18,6 @@ $enable-transitions: false;
 // Enable overriding with !important
 $enable-important: false;
 
-
 // Pico Lib
 // --------------------
 
@@ -42,20 +40,8 @@ $enable-important: false;
 @import "content/embedded"; // audio, canvas, iframe, img, svg, video
 @import "content/button"; // button, a[role=button], type=button, type=submit ...
 @import "content/form"; // input, select, textarea, label, fieldset, legend
-// @import "content/form-checkbox-radio";  // type=checkbox, type=radio, role=switch
-// @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
 @import "content/table"; // table, tr, td, ...
-// @import "content/code";                 // pre, code, ...
-// @import "content/miscs";                // hr, template, [hidden], dialog, canvas
-
-// Components
-// @import "components/accordion";         // details, summary
-// @import "components/card";              // article
-// @import "components/nav";               // nav
-// @import "components/progress";          // progress
 
 // Utilities
-// @import "utilities/loading";            // aria-busy=true
-// @import "utilities/tooltip";            // data-tooltip
 @import "utilities/accessibility"; // -ms-touch-action, aria-*
 @import "utilities/reduce-motion"; // prefers-reduced-motion

scss/themes/default/_colors.scss

@@ -26,40 +26,40 @@ $primary-900: hsl($primary-hue, 100%, 15%) !default;
 
 // Black & White
 $black: #000 !default;
-$white: #FFF !default;
+$white: #fff !default;
 
 // Amber
-$amber-50:  #FFF8E1 !default;
+$amber-50: #fff8e1 !default;
-$amber-100: #FFECB3 !default;
+$amber-100: #ffecb3 !default;
-$amber-200: #FFE082 !default;
+$amber-200: #ffe082 !default;
-$amber-300: #FFD54F !default;
+$amber-300: #ffd54f !default;
-$amber-400: #FFCA28 !default;
+$amber-400: #ffca28 !default;
-$amber-500: #FFC107 !default;
+$amber-500: #ffc107 !default;
-$amber-600: #FFB300 !default;
+$amber-600: #ffb300 !default;
-$amber-700: #FFA000 !default;
+$amber-700: #ffa000 !default;
-$amber-800: #FF8F00 !default;
+$amber-800: #ff8f00 !default;
-$amber-900: #FF6F00 !default;
+$amber-900: #ff6f00 !default;
 
 // Green
-$green-50:  #E8F5E9 !default;
+$green-50: #e8f5e9 !default;
-$green-100: #C8E6C9 !default;
+$green-100: #c8e6c9 !default;
-$green-200: #A5D6A7 !default;
+$green-200: #a5d6a7 !default;
-$green-300: #81C784 !default;
+$green-300: #81c784 !default;
-$green-400: #66BB6A !default;
+$green-400: #66bb6a !default;
-$green-500: #4CAF50 !default;
+$green-500: #4caf50 !default;
-$green-600: #43A047 !default;
+$green-600: #43a047 !default;
-$green-700: #388E3C !default;
+$green-700: #388e3c !default;
-$green-800: #2E7D32 !default;
+$green-800: #2e7d32 !default;
-$green-900: #1B5E20 !default;
+$green-900: #1b5e20 !default;
 
 // Red
-$red-50:  #FFEBEE !default;
+$red-50: #ffebee !default;
-$red-100: #FFCDD2 !default;
+$red-100: #ffcdd2 !default;
-$red-200: #EF9A9A !default;
+$red-200: #ef9a9a !default;
-$red-300: #E57373 !default;
+$red-300: #e57373 !default;
-$red-400: #EF5350 !default;
+$red-400: #ef5350 !default;
-$red-500: #F44336 !default;
+$red-500: #f44336 !default;
-$red-600: #E53935 !default;
+$red-600: #e53935 !default;
-$red-700: #D32F2F !default;
+$red-700: #d32f2f !default;
-$red-800: #C62828 !default;
+$red-800: #c62828 !default;
-$red-900: #B71C1C !default;
+$red-900: #b71c1c !default;

scss/themes/default/_dark.scss

@@ -1,6 +1,5 @@
 // Default: Dark theme
 @mixin dark {
-
   // Document
   color-scheme: dark;
   --background-color: #{mix($black, $grey-900, 37.5%)};
@@ -21,19 +20,19 @@
   // Primary colors
   --primary: #{$primary-600};
   --primary-hover: #{$primary-500};
-  --primary-focus: #{rgba($primary-600, .25)};
+  --primary-focus: #{rgba($primary-600, 0.25)};
   --primary-inverse: #{$white};
 
   // Secondary colors
   --secondary: #{$grey-600};
   --secondary-hover: #{$grey-500};
-  --secondary-focus: #{rgba($grey-500, .25)};
+  --secondary-focus: #{rgba($grey-500, 0.25)};
   --secondary-inverse: #{$white};
 
   // Contrast colors
   --contrast: #{$grey-50};
   --contrast-hover: #{$white};
-  --contrast-focus: #{rgba($grey-500, .25)};
+  --contrast-focus: #{rgba($grey-500, 0.25)};
   --contrast-inverse: #{$black};
 
   // Highlighted text (<mark>)
@@ -64,7 +63,7 @@
   --form-element-focus-color: var(--primary-focus);
   --form-element-disabled-background-color: #{$grey-800};
   --form-element-disabled-border-color: #{$grey-700};
-  --form-element-disabled-opacity: .5;
+  --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #{$red-900};
   --form-element-invalid-active-border-color: #{$red-800};
   --form-element-valid-border-color: #{$green-800};
@@ -85,7 +84,7 @@
 
   // Table
   --table-border-color: var(--muted-border-color);
-  --table-row-stripped-background-color: #{rgba($grey-500, .05)};
+  --table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
 
   // Code
   --code-background-color: #{mix($black, $grey-900, 12.5%)};
@@ -106,7 +105,9 @@
   // Card (<article>)
   --card-background-color: #{mix($black, $grey-900, 25%)};
   --card-border-color: #{mix($black, $grey-900, 37.5%)};
-  --card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.036)};
+  --card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)},
+    0 0.125rem 2rem #{rgba($black, 0.12)},
+    0 0 0 0.0625rem #{rgba($black, 0.036)};
   --card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
 
   // Progress
@@ -114,7 +115,7 @@
   --progress-color: var(--primary);
 
   // Loading ([aria-busy=true])
-  --loading-spinner-opacity: .5;
+  --loading-spinner-opacity: 0.5;
 
   // Tooltip ([data-tooltip])
   --tooltip-background-color: var(--contrast);

scss/themes/default/_light.scss

@@ -1,7 +1,6 @@
 // Default: Light theme
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
-
   // Document
   color-scheme: light;
   --background-color: #{$white};
@@ -22,19 +21,19 @@
   // Primary colors
   --primary: #{$primary-600};
   --primary-hover: #{$primary-700};
-  --primary-focus: #{rgba($primary-600, .125)};
+  --primary-focus: #{rgba($primary-600, 0.125)};
   --primary-inverse: #{$white};
 
   // Secondary colors
   --secondary: #{$grey-600};
   --secondary-hover: #{$grey-700};
-  --secondary-focus: #{rgba($grey-600, .125)};
+  --secondary-focus: #{rgba($grey-600, 0.125)};
   --secondary-inverse: #{$white};
 
   // Contrast colors
   --contrast: #{$grey-900};
   --contrast-hover: #{$black};
-  --contrast-focus: #{rgba($grey-600, .125)};
+  --contrast-focus: #{rgba($grey-600, 0.125)};
   --contrast-inverse: #{$white};
 
   // Highlighted text (<mark>)
@@ -65,7 +64,7 @@
   --form-element-focus-color: var(--primary-focus);
   --form-element-disabled-background-color: #{$grey-100};
   --form-element-disabled-border-color: #{$grey-300};
-  --form-element-disabled-opacity: .5;
+  --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #{$red-800};
   --form-element-invalid-active-border-color: #{$red-900};
   --form-element-valid-border-color: #{$green-700};
@@ -106,7 +105,9 @@
   // Card (<article>)
   --card-background-color: var(--background-color);
   --card-border-color: var(--muted-border-color);
-  --card-box-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-box-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-sectionning-background-color: #{mix($grey-50, $white, 25%)};
 
   // Progress
@@ -114,7 +115,7 @@
   --progress-color: var(--primary);
 
   // Loading ([aria-busy=true])
-  --loading-spinner-opacity: .5;
+  --loading-spinner-opacity: 0.5;
 
   // Tooltip ([data-tooltip])
   --tooltip-background-color: var(--contrast);

scss/themes/default/_styles.scss

@@ -1,15 +1,15 @@
 // Commons Styles
 :root {
-
   // Typography
-  --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: 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";
   --line-height: 1.5;
   --font-weight: 400;
   --font-size: 16px;
 
   // Responsive typography
   @if $enable-responsive-typography {
-
     @if map-get($breakpoints, "sm") {
       @media (min-width: map-get($breakpoints, "sm")) {
         --font-size: 17px;
@@ -36,7 +36,7 @@
   }
 
   // Borders
-  --border-radius: .25rem;
+  --border-radius: 0.25rem;
   --border-width: 1px;
   --outline-width: 3px;
 
@@ -55,22 +55,20 @@
   --grid-spacing-horizontal: var(--spacing);
 
   // Spacings for form elements and button
-  --form-element-spacing-vertical: .75rem;
+  --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
 
   // Transitions
-  --transition: .2s ease-in-out;
+  --transition: 0.2s ease-in-out;
 }
 
 // Responsives spacings
 @if $enable-responsive-spacings {
-
   // Sectionning
   body > header,
   body > main,
   body > footer,
   section {
-
     @if map-get($breakpoints, "sm") {
       @media (min-width: map-get($breakpoints, "sm")) {
         --block-spacing-vertical: calc(var(--spacing) * 2.5);
@@ -98,7 +96,6 @@
 
   // Card (<article>)
   article {
-
     @if map-get($breakpoints, "sm") {
       @media (min-width: map-get($breakpoints, "sm")) {
         --block-spacing-horizontal: calc(var(--spacing) * 1.25);
@@ -203,7 +200,9 @@ pre,
 code,
 kbd,
 samp {
-  --font-family: "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";
+  --font-family: "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";
 }
 
 kbd {