Merge pull request #196 from picocss/dev

v1.5.1

README.md

@@ -19,6 +19,7 @@
 [![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
 [![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
 [![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md)
+[![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss)
 
 https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
 

css/pico.classless.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico.css v1.5.0 (https://picocss.com)
+ * Pico.css v1.5.1 (https://picocss.com)
  * Copyright 2019-2022 - Licensed under MIT
  */
 /**
@@ -200,24 +200,24 @@ kbd {
 :root:not([data-theme=dark]) {
   color-scheme: light;
   --background-color: #fff;
-  --color: #415462;
+  --color: hsl(205deg, 20%, 32%);
-  --h1-color: #1b2832;
+  --h1-color: hsl(205deg, 30%, 15%);
   --h2-color: #24333e;
-  --h3-color: #2c3d49;
+  --h3-color: hsl(205deg, 25%, 23%);
   --h4-color: #374956;
-  --h5-color: #415462;
+  --h5-color: hsl(205deg, 20%, 32%);
   --h6-color: #4d606d;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
-  --muted-border-color: #edf0f3;
+  --muted-border-color: hsl(205deg, 20%, 94%);
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #08769b;
+  --primary-hover: hsl(195deg, 90%, 32%);
   --primary-focus: rgba(16, 149, 193, 0.125);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #415462;
+  --secondary-hover: hsl(205deg, 20%, 32%);
   --secondary-focus: rgba(89, 107, 120, 0.125);
   --secondary-inverse: #fff;
-  --contrast: #1b2832;
+  --contrast: hsl(205deg, 30%, 15%);
   --contrast-hover: #000;
   --contrast-focus: rgba(89, 107, 120, 0.125);
   --contrast-inverse: #fff;
@@ -230,14 +230,14 @@ kbd {
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --form-element-background-color: transparent;
-  --form-element-border-color: #a2afb9;
+  --form-element-border-color: hsl(205deg, 14%, 68%);
   --form-element-color: var(--color);
   --form-element-placeholder-color: var(--muted-color);
   --form-element-active-background-color: transparent;
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #d5dce2;
+  --form-element-disabled-background-color: hsl(205deg, 18%, 86%);
-  --form-element-disabled-border-color: #a2afb9;
+  --form-element-disabled-border-color: hsl(205deg, 14%, 68%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #c62828;
   --form-element-invalid-active-border-color: #d32f2f;
@@ -245,25 +245,25 @@ kbd {
   --form-element-valid-border-color: #388e3c;
   --form-element-valid-active-border-color: #43a047;
   --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
-  --switch-background-color: #bbc6ce;
+  --switch-background-color: hsl(205deg, 16%, 77%);
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
-  --range-border-color: #d5dce2;
+  --range-border-color: hsl(205deg, 18%, 86%);
-  --range-active-border-color: #bbc6ce;
+  --range-active-border-color: hsl(205deg, 16%, 77%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
   --range-thumb-active-color: var(--primary);
   --table-border-color: var(--muted-border-color);
   --table-row-stripped-background-color: #f6f8f9;
-  --code-background-color: #edf0f3;
+  --code-background-color: hsl(205deg, 20%, 94%);
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #b34d80;
+  --code-tag-color: hsl(330deg, 40%, 50%);
-  --code-property-color: #3d888f;
+  --code-property-color: hsl(185deg, 40%, 40%);
-  --code-value-color: #998866;
+  --code-value-color: hsl(40deg, 20%, 50%);
-  --code-comment-color: #a2afb9;
+  --code-comment-color: hsl(205deg, 14%, 68%);
   --accordion-border-color: var(--muted-border-color);
   --accordion-close-summary-color: var(--color);
   --accordion-open-summary-color: var(--muted-color);
@@ -277,9 +277,9 @@ kbd {
   --dropdown-border-color: #e1e6eb;
   --dropdown-box-shadow: var(--card-box-shadow);
   --dropdown-color: var(--color);
-  --dropdown-hover-background-color: #edf0f3;
+  --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
   --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
-  --progress-background-color: #d5dce2;
+  --progress-background-color: hsl(205deg, 18%, 86%);
   --progress-color: var(--primary);
   --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
@@ -301,24 +301,24 @@ kbd {
   :root:not([data-theme=light]) {
     color-scheme: dark;
     --background-color: #11191f;
-    --color: #bbc6ce;
+    --color: hsl(205deg, 16%, 77%);
-    --h1-color: #edf0f3;
+    --h1-color: hsl(205deg, 20%, 94%);
     --h2-color: #e1e6eb;
-    --h3-color: #d5dce2;
+    --h3-color: hsl(205deg, 18%, 86%);
     --h4-color: #c8d1d8;
-    --h5-color: #bbc6ce;
+    --h5-color: hsl(205deg, 16%, 77%);
     --h6-color: #afbbc4;
-    --muted-color: #73828c;
+    --muted-color: hsl(205deg, 10%, 50%);
     --muted-border-color: #1f2d38;
-    --primary: #1095c1;
+    --primary: hsl(195deg, 85%, 41%);
-    --primary-hover: #1ab3e6;
+    --primary-hover: hsl(195deg, 80%, 50%);
     --primary-focus: rgba(16, 149, 193, 0.25);
     --primary-inverse: #fff;
-    --secondary: #596b78;
+    --secondary: hsl(205deg, 15%, 41%);
-    --secondary-hover: #73828c;
+    --secondary-hover: hsl(205deg, 10%, 50%);
     --secondary-focus: rgba(115, 130, 140, 0.25);
     --secondary-inverse: #fff;
-    --contrast: #edf0f3;
+    --contrast: hsl(205deg, 20%, 94%);
     --contrast-hover: #fff;
     --contrast-focus: rgba(115, 130, 140, 0.25);
     --contrast-inverse: #000;
@@ -337,8 +337,8 @@ kbd {
     --form-element-active-background-color: var(--form-element-background-color);
     --form-element-active-border-color: var(--primary);
     --form-element-focus-color: var(--primary-focus);
-    --form-element-disabled-background-color: #2c3d49;
+    --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-    --form-element-disabled-border-color: #415462;
+    --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
     --form-element-disabled-opacity: 0.5;
     --form-element-invalid-border-color: #b71c1c;
     --form-element-invalid-active-border-color: #c62828;
@@ -350,7 +350,7 @@ kbd {
     --switch-color: var(--primary-inverse);
     --switch-checked-background-color: var(--primary);
     --range-border-color: #24333e;
-    --range-active-border-color: #2c3d49;
+    --range-active-border-color: hsl(205deg, 25%, 23%);
     --range-thumb-border-color: var(--background-color);
     --range-thumb-color: var(--secondary);
     --range-thumb-hover-color: var(--secondary-hover);
@@ -361,9 +361,9 @@ kbd {
     --code-color: var(--muted-color);
     --code-kbd-background-color: var(--contrast);
     --code-kbd-color: var(--contrast-inverse);
-    --code-tag-color: #a65980;
+    --code-tag-color: hsl(330deg, 30%, 50%);
-    --code-property-color: #599fa6;
+    --code-property-color: hsl(185deg, 30%, 50%);
-    --code-value-color: #8c8473;
+    --code-value-color: hsl(40deg, 10%, 50%);
     --code-comment-color: #4d606d;
     --accordion-border-color: var(--muted-border-color);
     --accordion-active-summary-color: var(--primary);
@@ -375,7 +375,7 @@ kbd {
       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;
-    --dropdown-background-color: #1b2832;
+    --dropdown-background-color: hsl(205deg, 30%, 15%);
     --dropdown-border-color: #24333e;
     --dropdown-box-shadow: var(--card-box-shadow);
     --dropdown-color: var(--color);
@@ -402,24 +402,24 @@ kbd {
 [data-theme=dark] {
   color-scheme: dark;
   --background-color: #11191f;
-  --color: #bbc6ce;
+  --color: hsl(205deg, 16%, 77%);
-  --h1-color: #edf0f3;
+  --h1-color: hsl(205deg, 20%, 94%);
   --h2-color: #e1e6eb;
-  --h3-color: #d5dce2;
+  --h3-color: hsl(205deg, 18%, 86%);
   --h4-color: #c8d1d8;
-  --h5-color: #bbc6ce;
+  --h5-color: hsl(205deg, 16%, 77%);
   --h6-color: #afbbc4;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
   --muted-border-color: #1f2d38;
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #1ab3e6;
+  --primary-hover: hsl(195deg, 80%, 50%);
   --primary-focus: rgba(16, 149, 193, 0.25);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #73828c;
+  --secondary-hover: hsl(205deg, 10%, 50%);
   --secondary-focus: rgba(115, 130, 140, 0.25);
   --secondary-inverse: #fff;
-  --contrast: #edf0f3;
+  --contrast: hsl(205deg, 20%, 94%);
   --contrast-hover: #fff;
   --contrast-focus: rgba(115, 130, 140, 0.25);
   --contrast-inverse: #000;
@@ -438,8 +438,8 @@ kbd {
   --form-element-active-background-color: var(--form-element-background-color);
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #2c3d49;
+  --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-  --form-element-disabled-border-color: #415462;
+  --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #b71c1c;
   --form-element-invalid-active-border-color: #c62828;
@@ -451,7 +451,7 @@ kbd {
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
   --range-border-color: #24333e;
-  --range-active-border-color: #2c3d49;
+  --range-active-border-color: hsl(205deg, 25%, 23%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
@@ -462,9 +462,9 @@ kbd {
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #a65980;
+  --code-tag-color: hsl(330deg, 30%, 50%);
-  --code-property-color: #599fa6;
+  --code-property-color: hsl(185deg, 30%, 50%);
-  --code-value-color: #8c8473;
+  --code-value-color: hsl(40deg, 10%, 50%);
   --code-comment-color: #4d606d;
   --accordion-border-color: var(--muted-border-color);
   --accordion-active-summary-color: var(--primary);
@@ -476,7 +476,7 @@ kbd {
     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;
-  --dropdown-background-color: #1b2832;
+  --dropdown-background-color: hsl(205deg, 30%, 15%);
   --dropdown-border-color: #24333e;
   --dropdown-box-shadow: var(--card-box-shadow);
   --dropdown-color: var(--color);
@@ -924,7 +924,7 @@ input[type=reset]:focus {
     0 0 0 var(--outline-width) var(--secondary-focus);
 }
 
-:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
+:where(button, [type=submit], [type=button], [type=reset], [role=button])[disabled],
 :where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
 a[role=button]:not([href]) {
   opacity: 0.5;
@@ -1820,6 +1820,7 @@ dialog {
   padding: var(--spacing);
   border: 0;
   background-color: var(--modal-overlay-background-color);
+  color: var(--color);
 }
 dialog article {
   max-height: calc(100vh - var(--spacing) * 2);
@@ -1899,14 +1900,14 @@ nav li {
 nav li > * {
   --spacing: 0;
 }
-nav :where(a, [role="link"]) {
+nav :where(a, [role=link]) {
   display: inline-block;
   margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
   padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
   border-radius: var(--border-radius);
   text-decoration: none;
 }
-nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
+nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
   text-decoration: none;
 }
 nav [role=button] {

css/pico.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico.css v1.5.0 (https://picocss.com)
+ * Pico.css v1.5.1 (https://picocss.com)
  * Copyright 2019-2022 - Licensed under MIT
  */
 /**
@@ -205,24 +205,24 @@ kbd {
 :root:not([data-theme=dark]) {
   color-scheme: light;
   --background-color: #fff;
-  --color: #415462;
+  --color: hsl(205deg, 20%, 32%);
-  --h1-color: #1b2832;
+  --h1-color: hsl(205deg, 30%, 15%);
   --h2-color: #24333e;
-  --h3-color: #2c3d49;
+  --h3-color: hsl(205deg, 25%, 23%);
   --h4-color: #374956;
-  --h5-color: #415462;
+  --h5-color: hsl(205deg, 20%, 32%);
   --h6-color: #4d606d;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
-  --muted-border-color: #edf0f3;
+  --muted-border-color: hsl(205deg, 20%, 94%);
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #08769b;
+  --primary-hover: hsl(195deg, 90%, 32%);
   --primary-focus: rgba(16, 149, 193, 0.125);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #415462;
+  --secondary-hover: hsl(205deg, 20%, 32%);
   --secondary-focus: rgba(89, 107, 120, 0.125);
   --secondary-inverse: #fff;
-  --contrast: #1b2832;
+  --contrast: hsl(205deg, 30%, 15%);
   --contrast-hover: #000;
   --contrast-focus: rgba(89, 107, 120, 0.125);
   --contrast-inverse: #fff;
@@ -235,14 +235,14 @@ kbd {
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --form-element-background-color: transparent;
-  --form-element-border-color: #a2afb9;
+  --form-element-border-color: hsl(205deg, 14%, 68%);
   --form-element-color: var(--color);
   --form-element-placeholder-color: var(--muted-color);
   --form-element-active-background-color: transparent;
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #d5dce2;
+  --form-element-disabled-background-color: hsl(205deg, 18%, 86%);
-  --form-element-disabled-border-color: #a2afb9;
+  --form-element-disabled-border-color: hsl(205deg, 14%, 68%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #c62828;
   --form-element-invalid-active-border-color: #d32f2f;
@@ -250,25 +250,25 @@ kbd {
   --form-element-valid-border-color: #388e3c;
   --form-element-valid-active-border-color: #43a047;
   --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
-  --switch-background-color: #bbc6ce;
+  --switch-background-color: hsl(205deg, 16%, 77%);
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
-  --range-border-color: #d5dce2;
+  --range-border-color: hsl(205deg, 18%, 86%);
-  --range-active-border-color: #bbc6ce;
+  --range-active-border-color: hsl(205deg, 16%, 77%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
   --range-thumb-active-color: var(--primary);
   --table-border-color: var(--muted-border-color);
   --table-row-stripped-background-color: #f6f8f9;
-  --code-background-color: #edf0f3;
+  --code-background-color: hsl(205deg, 20%, 94%);
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #b34d80;
+  --code-tag-color: hsl(330deg, 40%, 50%);
-  --code-property-color: #3d888f;
+  --code-property-color: hsl(185deg, 40%, 40%);
-  --code-value-color: #998866;
+  --code-value-color: hsl(40deg, 20%, 50%);
-  --code-comment-color: #a2afb9;
+  --code-comment-color: hsl(205deg, 14%, 68%);
   --accordion-border-color: var(--muted-border-color);
   --accordion-close-summary-color: var(--color);
   --accordion-open-summary-color: var(--muted-color);
@@ -282,9 +282,9 @@ kbd {
   --dropdown-border-color: #e1e6eb;
   --dropdown-box-shadow: var(--card-box-shadow);
   --dropdown-color: var(--color);
-  --dropdown-hover-background-color: #edf0f3;
+  --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
   --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
-  --progress-background-color: #d5dce2;
+  --progress-background-color: hsl(205deg, 18%, 86%);
   --progress-color: var(--primary);
   --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
@@ -306,24 +306,24 @@ kbd {
   :root:not([data-theme=light]) {
     color-scheme: dark;
     --background-color: #11191f;
-    --color: #bbc6ce;
+    --color: hsl(205deg, 16%, 77%);
-    --h1-color: #edf0f3;
+    --h1-color: hsl(205deg, 20%, 94%);
     --h2-color: #e1e6eb;
-    --h3-color: #d5dce2;
+    --h3-color: hsl(205deg, 18%, 86%);
     --h4-color: #c8d1d8;
-    --h5-color: #bbc6ce;
+    --h5-color: hsl(205deg, 16%, 77%);
     --h6-color: #afbbc4;
-    --muted-color: #73828c;
+    --muted-color: hsl(205deg, 10%, 50%);
     --muted-border-color: #1f2d38;
-    --primary: #1095c1;
+    --primary: hsl(195deg, 85%, 41%);
-    --primary-hover: #1ab3e6;
+    --primary-hover: hsl(195deg, 80%, 50%);
     --primary-focus: rgba(16, 149, 193, 0.25);
     --primary-inverse: #fff;
-    --secondary: #596b78;
+    --secondary: hsl(205deg, 15%, 41%);
-    --secondary-hover: #73828c;
+    --secondary-hover: hsl(205deg, 10%, 50%);
     --secondary-focus: rgba(115, 130, 140, 0.25);
     --secondary-inverse: #fff;
-    --contrast: #edf0f3;
+    --contrast: hsl(205deg, 20%, 94%);
     --contrast-hover: #fff;
     --contrast-focus: rgba(115, 130, 140, 0.25);
     --contrast-inverse: #000;
@@ -342,8 +342,8 @@ kbd {
     --form-element-active-background-color: var(--form-element-background-color);
     --form-element-active-border-color: var(--primary);
     --form-element-focus-color: var(--primary-focus);
-    --form-element-disabled-background-color: #2c3d49;
+    --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-    --form-element-disabled-border-color: #415462;
+    --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
     --form-element-disabled-opacity: 0.5;
     --form-element-invalid-border-color: #b71c1c;
     --form-element-invalid-active-border-color: #c62828;
@@ -355,7 +355,7 @@ kbd {
     --switch-color: var(--primary-inverse);
     --switch-checked-background-color: var(--primary);
     --range-border-color: #24333e;
-    --range-active-border-color: #2c3d49;
+    --range-active-border-color: hsl(205deg, 25%, 23%);
     --range-thumb-border-color: var(--background-color);
     --range-thumb-color: var(--secondary);
     --range-thumb-hover-color: var(--secondary-hover);
@@ -366,9 +366,9 @@ kbd {
     --code-color: var(--muted-color);
     --code-kbd-background-color: var(--contrast);
     --code-kbd-color: var(--contrast-inverse);
-    --code-tag-color: #a65980;
+    --code-tag-color: hsl(330deg, 30%, 50%);
-    --code-property-color: #599fa6;
+    --code-property-color: hsl(185deg, 30%, 50%);
-    --code-value-color: #8c8473;
+    --code-value-color: hsl(40deg, 10%, 50%);
     --code-comment-color: #4d606d;
     --accordion-border-color: var(--muted-border-color);
     --accordion-active-summary-color: var(--primary);
@@ -380,7 +380,7 @@ kbd {
       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;
-    --dropdown-background-color: #1b2832;
+    --dropdown-background-color: hsl(205deg, 30%, 15%);
     --dropdown-border-color: #24333e;
     --dropdown-box-shadow: var(--card-box-shadow);
     --dropdown-color: var(--color);
@@ -407,24 +407,24 @@ kbd {
 [data-theme=dark] {
   color-scheme: dark;
   --background-color: #11191f;
-  --color: #bbc6ce;
+  --color: hsl(205deg, 16%, 77%);
-  --h1-color: #edf0f3;
+  --h1-color: hsl(205deg, 20%, 94%);
   --h2-color: #e1e6eb;
-  --h3-color: #d5dce2;
+  --h3-color: hsl(205deg, 18%, 86%);
   --h4-color: #c8d1d8;
-  --h5-color: #bbc6ce;
+  --h5-color: hsl(205deg, 16%, 77%);
   --h6-color: #afbbc4;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
   --muted-border-color: #1f2d38;
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #1ab3e6;
+  --primary-hover: hsl(195deg, 80%, 50%);
   --primary-focus: rgba(16, 149, 193, 0.25);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #73828c;
+  --secondary-hover: hsl(205deg, 10%, 50%);
   --secondary-focus: rgba(115, 130, 140, 0.25);
   --secondary-inverse: #fff;
-  --contrast: #edf0f3;
+  --contrast: hsl(205deg, 20%, 94%);
   --contrast-hover: #fff;
   --contrast-focus: rgba(115, 130, 140, 0.25);
   --contrast-inverse: #000;
@@ -443,8 +443,8 @@ kbd {
   --form-element-active-background-color: var(--form-element-background-color);
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #2c3d49;
+  --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-  --form-element-disabled-border-color: #415462;
+  --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #b71c1c;
   --form-element-invalid-active-border-color: #c62828;
@@ -456,7 +456,7 @@ kbd {
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
   --range-border-color: #24333e;
-  --range-active-border-color: #2c3d49;
+  --range-active-border-color: hsl(205deg, 25%, 23%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
@@ -467,9 +467,9 @@ kbd {
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #a65980;
+  --code-tag-color: hsl(330deg, 30%, 50%);
-  --code-property-color: #599fa6;
+  --code-property-color: hsl(185deg, 30%, 50%);
-  --code-value-color: #8c8473;
+  --code-value-color: hsl(40deg, 10%, 50%);
   --code-comment-color: #4d606d;
   --accordion-border-color: var(--muted-border-color);
   --accordion-active-summary-color: var(--primary);
@@ -481,7 +481,7 @@ kbd {
     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;
-  --dropdown-background-color: #1b2832;
+  --dropdown-background-color: hsl(205deg, 30%, 15%);
   --dropdown-border-color: #24333e;
   --dropdown-box-shadow: var(--card-box-shadow);
   --dropdown-color: var(--color);
@@ -1027,7 +1027,7 @@ input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
   --color: var(--contrast-hover);
 }
 
-:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
+:where(button, [type=submit], [type=button], [type=reset], [role=button])[disabled],
 :where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
 a[role=button]:not([href]) {
   opacity: 0.5;
@@ -1926,6 +1926,7 @@ dialog {
   padding: var(--spacing);
   border: 0;
   background-color: var(--modal-overlay-background-color);
+  color: var(--color);
 }
 dialog article {
   max-height: calc(100vh - var(--spacing) * 2);
@@ -2097,14 +2098,14 @@ nav li {
 nav li > * {
   --spacing: 0;
 }
-nav :where(a, [role="link"]) {
+nav :where(a, [role=link]) {
   display: inline-block;
   margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
   padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
   border-radius: var(--border-radius);
   text-decoration: none;
 }
-nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
+nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
   text-decoration: none;
 }
 nav [role=button] {

css/pico.fluid.classless.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico.css v1.5.0 (https://picocss.com)
+ * Pico.css v1.5.1 (https://picocss.com)
  * Copyright 2019-2022 - Licensed under MIT
  */
 /**
@@ -200,24 +200,24 @@ kbd {
 :root:not([data-theme=dark]) {
   color-scheme: light;
   --background-color: #fff;
-  --color: #415462;
+  --color: hsl(205deg, 20%, 32%);
-  --h1-color: #1b2832;
+  --h1-color: hsl(205deg, 30%, 15%);
   --h2-color: #24333e;
-  --h3-color: #2c3d49;
+  --h3-color: hsl(205deg, 25%, 23%);
   --h4-color: #374956;
-  --h5-color: #415462;
+  --h5-color: hsl(205deg, 20%, 32%);
   --h6-color: #4d606d;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
-  --muted-border-color: #edf0f3;
+  --muted-border-color: hsl(205deg, 20%, 94%);
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #08769b;
+  --primary-hover: hsl(195deg, 90%, 32%);
   --primary-focus: rgba(16, 149, 193, 0.125);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #415462;
+  --secondary-hover: hsl(205deg, 20%, 32%);
   --secondary-focus: rgba(89, 107, 120, 0.125);
   --secondary-inverse: #fff;
-  --contrast: #1b2832;
+  --contrast: hsl(205deg, 30%, 15%);
   --contrast-hover: #000;
   --contrast-focus: rgba(89, 107, 120, 0.125);
   --contrast-inverse: #fff;
@@ -230,14 +230,14 @@ kbd {
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --form-element-background-color: transparent;
-  --form-element-border-color: #a2afb9;
+  --form-element-border-color: hsl(205deg, 14%, 68%);
   --form-element-color: var(--color);
   --form-element-placeholder-color: var(--muted-color);
   --form-element-active-background-color: transparent;
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #d5dce2;
+  --form-element-disabled-background-color: hsl(205deg, 18%, 86%);
-  --form-element-disabled-border-color: #a2afb9;
+  --form-element-disabled-border-color: hsl(205deg, 14%, 68%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #c62828;
   --form-element-invalid-active-border-color: #d32f2f;
@@ -245,25 +245,25 @@ kbd {
   --form-element-valid-border-color: #388e3c;
   --form-element-valid-active-border-color: #43a047;
   --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
-  --switch-background-color: #bbc6ce;
+  --switch-background-color: hsl(205deg, 16%, 77%);
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
-  --range-border-color: #d5dce2;
+  --range-border-color: hsl(205deg, 18%, 86%);
-  --range-active-border-color: #bbc6ce;
+  --range-active-border-color: hsl(205deg, 16%, 77%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
   --range-thumb-active-color: var(--primary);
   --table-border-color: var(--muted-border-color);
   --table-row-stripped-background-color: #f6f8f9;
-  --code-background-color: #edf0f3;
+  --code-background-color: hsl(205deg, 20%, 94%);
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #b34d80;
+  --code-tag-color: hsl(330deg, 40%, 50%);
-  --code-property-color: #3d888f;
+  --code-property-color: hsl(185deg, 40%, 40%);
-  --code-value-color: #998866;
+  --code-value-color: hsl(40deg, 20%, 50%);
-  --code-comment-color: #a2afb9;
+  --code-comment-color: hsl(205deg, 14%, 68%);
   --accordion-border-color: var(--muted-border-color);
   --accordion-close-summary-color: var(--color);
   --accordion-open-summary-color: var(--muted-color);
@@ -277,9 +277,9 @@ kbd {
   --dropdown-border-color: #e1e6eb;
   --dropdown-box-shadow: var(--card-box-shadow);
   --dropdown-color: var(--color);
-  --dropdown-hover-background-color: #edf0f3;
+  --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
   --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
-  --progress-background-color: #d5dce2;
+  --progress-background-color: hsl(205deg, 18%, 86%);
   --progress-color: var(--primary);
   --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
@@ -301,24 +301,24 @@ kbd {
   :root:not([data-theme=light]) {
     color-scheme: dark;
     --background-color: #11191f;
-    --color: #bbc6ce;
+    --color: hsl(205deg, 16%, 77%);
-    --h1-color: #edf0f3;
+    --h1-color: hsl(205deg, 20%, 94%);
     --h2-color: #e1e6eb;
-    --h3-color: #d5dce2;
+    --h3-color: hsl(205deg, 18%, 86%);
     --h4-color: #c8d1d8;
-    --h5-color: #bbc6ce;
+    --h5-color: hsl(205deg, 16%, 77%);
     --h6-color: #afbbc4;
-    --muted-color: #73828c;
+    --muted-color: hsl(205deg, 10%, 50%);
     --muted-border-color: #1f2d38;
-    --primary: #1095c1;
+    --primary: hsl(195deg, 85%, 41%);
-    --primary-hover: #1ab3e6;
+    --primary-hover: hsl(195deg, 80%, 50%);
     --primary-focus: rgba(16, 149, 193, 0.25);
     --primary-inverse: #fff;
-    --secondary: #596b78;
+    --secondary: hsl(205deg, 15%, 41%);
-    --secondary-hover: #73828c;
+    --secondary-hover: hsl(205deg, 10%, 50%);
     --secondary-focus: rgba(115, 130, 140, 0.25);
     --secondary-inverse: #fff;
-    --contrast: #edf0f3;
+    --contrast: hsl(205deg, 20%, 94%);
     --contrast-hover: #fff;
     --contrast-focus: rgba(115, 130, 140, 0.25);
     --contrast-inverse: #000;
@@ -337,8 +337,8 @@ kbd {
     --form-element-active-background-color: var(--form-element-background-color);
     --form-element-active-border-color: var(--primary);
     --form-element-focus-color: var(--primary-focus);
-    --form-element-disabled-background-color: #2c3d49;
+    --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-    --form-element-disabled-border-color: #415462;
+    --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
     --form-element-disabled-opacity: 0.5;
     --form-element-invalid-border-color: #b71c1c;
     --form-element-invalid-active-border-color: #c62828;
@@ -350,7 +350,7 @@ kbd {
     --switch-color: var(--primary-inverse);
     --switch-checked-background-color: var(--primary);
     --range-border-color: #24333e;
-    --range-active-border-color: #2c3d49;
+    --range-active-border-color: hsl(205deg, 25%, 23%);
     --range-thumb-border-color: var(--background-color);
     --range-thumb-color: var(--secondary);
     --range-thumb-hover-color: var(--secondary-hover);
@@ -361,9 +361,9 @@ kbd {
     --code-color: var(--muted-color);
     --code-kbd-background-color: var(--contrast);
     --code-kbd-color: var(--contrast-inverse);
-    --code-tag-color: #a65980;
+    --code-tag-color: hsl(330deg, 30%, 50%);
-    --code-property-color: #599fa6;
+    --code-property-color: hsl(185deg, 30%, 50%);
-    --code-value-color: #8c8473;
+    --code-value-color: hsl(40deg, 10%, 50%);
     --code-comment-color: #4d606d;
     --accordion-border-color: var(--muted-border-color);
     --accordion-active-summary-color: var(--primary);
@@ -375,7 +375,7 @@ kbd {
       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;
-    --dropdown-background-color: #1b2832;
+    --dropdown-background-color: hsl(205deg, 30%, 15%);
     --dropdown-border-color: #24333e;
     --dropdown-box-shadow: var(--card-box-shadow);
     --dropdown-color: var(--color);
@@ -402,24 +402,24 @@ kbd {
 [data-theme=dark] {
   color-scheme: dark;
   --background-color: #11191f;
-  --color: #bbc6ce;
+  --color: hsl(205deg, 16%, 77%);
-  --h1-color: #edf0f3;
+  --h1-color: hsl(205deg, 20%, 94%);
   --h2-color: #e1e6eb;
-  --h3-color: #d5dce2;
+  --h3-color: hsl(205deg, 18%, 86%);
   --h4-color: #c8d1d8;
-  --h5-color: #bbc6ce;
+  --h5-color: hsl(205deg, 16%, 77%);
   --h6-color: #afbbc4;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
   --muted-border-color: #1f2d38;
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #1ab3e6;
+  --primary-hover: hsl(195deg, 80%, 50%);
   --primary-focus: rgba(16, 149, 193, 0.25);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #73828c;
+  --secondary-hover: hsl(205deg, 10%, 50%);
   --secondary-focus: rgba(115, 130, 140, 0.25);
   --secondary-inverse: #fff;
-  --contrast: #edf0f3;
+  --contrast: hsl(205deg, 20%, 94%);
   --contrast-hover: #fff;
   --contrast-focus: rgba(115, 130, 140, 0.25);
   --contrast-inverse: #000;
@@ -438,8 +438,8 @@ kbd {
   --form-element-active-background-color: var(--form-element-background-color);
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #2c3d49;
+  --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-  --form-element-disabled-border-color: #415462;
+  --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #b71c1c;
   --form-element-invalid-active-border-color: #c62828;
@@ -451,7 +451,7 @@ kbd {
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
   --range-border-color: #24333e;
-  --range-active-border-color: #2c3d49;
+  --range-active-border-color: hsl(205deg, 25%, 23%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
@@ -462,9 +462,9 @@ kbd {
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #a65980;
+  --code-tag-color: hsl(330deg, 30%, 50%);
-  --code-property-color: #599fa6;
+  --code-property-color: hsl(185deg, 30%, 50%);
-  --code-value-color: #8c8473;
+  --code-value-color: hsl(40deg, 10%, 50%);
   --code-comment-color: #4d606d;
   --accordion-border-color: var(--muted-border-color);
   --accordion-active-summary-color: var(--primary);
@@ -476,7 +476,7 @@ kbd {
     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;
-  --dropdown-background-color: #1b2832;
+  --dropdown-background-color: hsl(205deg, 30%, 15%);
   --dropdown-border-color: #24333e;
   --dropdown-box-shadow: var(--card-box-shadow);
   --dropdown-color: var(--color);
@@ -894,7 +894,7 @@ input[type=reset]:focus {
     0 0 0 var(--outline-width) var(--secondary-focus);
 }
 
-:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
+:where(button, [type=submit], [type=button], [type=reset], [role=button])[disabled],
 :where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
 a[role=button]:not([href]) {
   opacity: 0.5;
@@ -1790,6 +1790,7 @@ dialog {
   padding: var(--spacing);
   border: 0;
   background-color: var(--modal-overlay-background-color);
+  color: var(--color);
 }
 dialog article {
   max-height: calc(100vh - var(--spacing) * 2);
@@ -1869,14 +1870,14 @@ nav li {
 nav li > * {
   --spacing: 0;
 }
-nav :where(a, [role="link"]) {
+nav :where(a, [role=link]) {
   display: inline-block;
   margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
   padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
   border-radius: var(--border-radius);
   text-decoration: none;
 }
-nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
+nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {
   text-decoration: none;
 }
 nav [role=button] {

css/pico.slim.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.5.0 (https://picocss.com)
+ * Pico.css v1.5.1 (https://picocss.com)
  * Copyright 2019-2022 - Licensed under MIT
  *
  * Slim version example
@@ -136,24 +136,24 @@ kbd {
 :root:not([data-theme=dark]) {
   color-scheme: light;
   --background-color: #fff;
-  --color: #415462;
+  --color: hsl(205deg, 20%, 32%);
-  --h1-color: #1b2832;
+  --h1-color: hsl(205deg, 30%, 15%);
   --h2-color: #24333e;
-  --h3-color: #2c3d49;
+  --h3-color: hsl(205deg, 25%, 23%);
   --h4-color: #374956;
-  --h5-color: #415462;
+  --h5-color: hsl(205deg, 20%, 32%);
   --h6-color: #4d606d;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
-  --muted-border-color: #edf0f3;
+  --muted-border-color: hsl(205deg, 20%, 94%);
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #08769b;
+  --primary-hover: hsl(195deg, 90%, 32%);
   --primary-focus: rgba(16, 149, 193, 0.125);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #415462;
+  --secondary-hover: hsl(205deg, 20%, 32%);
   --secondary-focus: rgba(89, 107, 120, 0.125);
   --secondary-inverse: #fff;
-  --contrast: #1b2832;
+  --contrast: hsl(205deg, 30%, 15%);
   --contrast-hover: #000;
   --contrast-focus: rgba(89, 107, 120, 0.125);
   --contrast-inverse: #fff;
@@ -166,14 +166,14 @@ kbd {
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --form-element-background-color: transparent;
-  --form-element-border-color: #a2afb9;
+  --form-element-border-color: hsl(205deg, 14%, 68%);
   --form-element-color: var(--color);
   --form-element-placeholder-color: var(--muted-color);
   --form-element-active-background-color: transparent;
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #d5dce2;
+  --form-element-disabled-background-color: hsl(205deg, 18%, 86%);
-  --form-element-disabled-border-color: #a2afb9;
+  --form-element-disabled-border-color: hsl(205deg, 14%, 68%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #c62828;
   --form-element-invalid-active-border-color: #d32f2f;
@@ -181,25 +181,25 @@ kbd {
   --form-element-valid-border-color: #388e3c;
   --form-element-valid-active-border-color: #43a047;
   --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
-  --switch-background-color: #bbc6ce;
+  --switch-background-color: hsl(205deg, 16%, 77%);
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
-  --range-border-color: #d5dce2;
+  --range-border-color: hsl(205deg, 18%, 86%);
-  --range-active-border-color: #bbc6ce;
+  --range-active-border-color: hsl(205deg, 16%, 77%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
   --range-thumb-active-color: var(--primary);
   --table-border-color: var(--muted-border-color);
   --table-row-stripped-background-color: #f6f8f9;
-  --code-background-color: #edf0f3;
+  --code-background-color: hsl(205deg, 20%, 94%);
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #b34d80;
+  --code-tag-color: hsl(330deg, 40%, 50%);
-  --code-property-color: #3d888f;
+  --code-property-color: hsl(185deg, 40%, 40%);
-  --code-value-color: #998866;
+  --code-value-color: hsl(40deg, 20%, 50%);
-  --code-comment-color: #a2afb9;
+  --code-comment-color: hsl(205deg, 14%, 68%);
   --accordion-border-color: var(--muted-border-color);
   --accordion-close-summary-color: var(--color);
   --accordion-open-summary-color: var(--muted-color);
@@ -213,9 +213,9 @@ kbd {
   --dropdown-border-color: #e1e6eb;
   --dropdown-box-shadow: var(--card-box-shadow);
   --dropdown-color: var(--color);
-  --dropdown-hover-background-color: #edf0f3;
+  --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
   --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
-  --progress-background-color: #d5dce2;
+  --progress-background-color: hsl(205deg, 18%, 86%);
   --progress-color: var(--primary);
   --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
@@ -237,24 +237,24 @@ kbd {
   :root:not([data-theme=light]) {
     color-scheme: dark;
     --background-color: #11191f;
-    --color: #bbc6ce;
+    --color: hsl(205deg, 16%, 77%);
-    --h1-color: #edf0f3;
+    --h1-color: hsl(205deg, 20%, 94%);
     --h2-color: #e1e6eb;
-    --h3-color: #d5dce2;
+    --h3-color: hsl(205deg, 18%, 86%);
     --h4-color: #c8d1d8;
-    --h5-color: #bbc6ce;
+    --h5-color: hsl(205deg, 16%, 77%);
     --h6-color: #afbbc4;
-    --muted-color: #73828c;
+    --muted-color: hsl(205deg, 10%, 50%);
     --muted-border-color: #1f2d38;
-    --primary: #1095c1;
+    --primary: hsl(195deg, 85%, 41%);
-    --primary-hover: #1ab3e6;
+    --primary-hover: hsl(195deg, 80%, 50%);
     --primary-focus: rgba(16, 149, 193, 0.25);
     --primary-inverse: #fff;
-    --secondary: #596b78;
+    --secondary: hsl(205deg, 15%, 41%);
-    --secondary-hover: #73828c;
+    --secondary-hover: hsl(205deg, 10%, 50%);
     --secondary-focus: rgba(115, 130, 140, 0.25);
     --secondary-inverse: #fff;
-    --contrast: #edf0f3;
+    --contrast: hsl(205deg, 20%, 94%);
     --contrast-hover: #fff;
     --contrast-focus: rgba(115, 130, 140, 0.25);
     --contrast-inverse: #000;
@@ -273,8 +273,8 @@ kbd {
     --form-element-active-background-color: var(--form-element-background-color);
     --form-element-active-border-color: var(--primary);
     --form-element-focus-color: var(--primary-focus);
-    --form-element-disabled-background-color: #2c3d49;
+    --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-    --form-element-disabled-border-color: #415462;
+    --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
     --form-element-disabled-opacity: 0.5;
     --form-element-invalid-border-color: #b71c1c;
     --form-element-invalid-active-border-color: #c62828;
@@ -286,7 +286,7 @@ kbd {
     --switch-color: var(--primary-inverse);
     --switch-checked-background-color: var(--primary);
     --range-border-color: #24333e;
-    --range-active-border-color: #2c3d49;
+    --range-active-border-color: hsl(205deg, 25%, 23%);
     --range-thumb-border-color: var(--background-color);
     --range-thumb-color: var(--secondary);
     --range-thumb-hover-color: var(--secondary-hover);
@@ -297,9 +297,9 @@ kbd {
     --code-color: var(--muted-color);
     --code-kbd-background-color: var(--contrast);
     --code-kbd-color: var(--contrast-inverse);
-    --code-tag-color: #a65980;
+    --code-tag-color: hsl(330deg, 30%, 50%);
-    --code-property-color: #599fa6;
+    --code-property-color: hsl(185deg, 30%, 50%);
-    --code-value-color: #8c8473;
+    --code-value-color: hsl(40deg, 10%, 50%);
     --code-comment-color: #4d606d;
     --accordion-border-color: var(--muted-border-color);
     --accordion-active-summary-color: var(--primary);
@@ -311,7 +311,7 @@ kbd {
       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;
-    --dropdown-background-color: #1b2832;
+    --dropdown-background-color: hsl(205deg, 30%, 15%);
     --dropdown-border-color: #24333e;
     --dropdown-box-shadow: var(--card-box-shadow);
     --dropdown-color: var(--color);
@@ -338,24 +338,24 @@ kbd {
 [data-theme=dark] {
   color-scheme: dark;
   --background-color: #11191f;
-  --color: #bbc6ce;
+  --color: hsl(205deg, 16%, 77%);
-  --h1-color: #edf0f3;
+  --h1-color: hsl(205deg, 20%, 94%);
   --h2-color: #e1e6eb;
-  --h3-color: #d5dce2;
+  --h3-color: hsl(205deg, 18%, 86%);
   --h4-color: #c8d1d8;
-  --h5-color: #bbc6ce;
+  --h5-color: hsl(205deg, 16%, 77%);
   --h6-color: #afbbc4;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
   --muted-border-color: #1f2d38;
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #1ab3e6;
+  --primary-hover: hsl(195deg, 80%, 50%);
   --primary-focus: rgba(16, 149, 193, 0.25);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #73828c;
+  --secondary-hover: hsl(205deg, 10%, 50%);
   --secondary-focus: rgba(115, 130, 140, 0.25);
   --secondary-inverse: #fff;
-  --contrast: #edf0f3;
+  --contrast: hsl(205deg, 20%, 94%);
   --contrast-hover: #fff;
   --contrast-focus: rgba(115, 130, 140, 0.25);
   --contrast-inverse: #000;
@@ -374,8 +374,8 @@ kbd {
   --form-element-active-background-color: var(--form-element-background-color);
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #2c3d49;
+  --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-  --form-element-disabled-border-color: #415462;
+  --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #b71c1c;
   --form-element-invalid-active-border-color: #c62828;
@@ -387,7 +387,7 @@ kbd {
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
   --range-border-color: #24333e;
-  --range-active-border-color: #2c3d49;
+  --range-active-border-color: hsl(205deg, 25%, 23%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
@@ -398,9 +398,9 @@ kbd {
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #a65980;
+  --code-tag-color: hsl(330deg, 30%, 50%);
-  --code-property-color: #599fa6;
+  --code-property-color: hsl(185deg, 30%, 50%);
-  --code-value-color: #8c8473;
+  --code-value-color: hsl(40deg, 10%, 50%);
   --code-comment-color: #4d606d;
   --accordion-border-color: var(--muted-border-color);
   --accordion-active-summary-color: var(--primary);
@@ -412,7 +412,7 @@ kbd {
     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;
-  --dropdown-background-color: #1b2832;
+  --dropdown-background-color: hsl(205deg, 30%, 15%);
   --dropdown-border-color: #24333e;
   --dropdown-box-shadow: var(--card-box-shadow);
   --dropdown-color: var(--color);
@@ -954,7 +954,7 @@ input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
   --color: var(--contrast-hover);
 }
 
-:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
+:where(button, [type=submit], [type=button], [type=reset], [role=button])[disabled],
 :where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
 a[role=button]:not([href]) {
   opacity: 0.5;

css/themes/default.css

@@ -200,24 +200,24 @@ kbd {
 :root:not([data-theme=dark]) {
   color-scheme: light;
   --background-color: #fff;
-  --color: #415462;
+  --color: hsl(205deg, 20%, 32%);
-  --h1-color: #1b2832;
+  --h1-color: hsl(205deg, 30%, 15%);
   --h2-color: #24333e;
-  --h3-color: #2c3d49;
+  --h3-color: hsl(205deg, 25%, 23%);
   --h4-color: #374956;
-  --h5-color: #415462;
+  --h5-color: hsl(205deg, 20%, 32%);
   --h6-color: #4d606d;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
-  --muted-border-color: #edf0f3;
+  --muted-border-color: hsl(205deg, 20%, 94%);
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #08769b;
+  --primary-hover: hsl(195deg, 90%, 32%);
   --primary-focus: rgba(16, 149, 193, 0.125);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #415462;
+  --secondary-hover: hsl(205deg, 20%, 32%);
   --secondary-focus: rgba(89, 107, 120, 0.125);
   --secondary-inverse: #fff;
-  --contrast: #1b2832;
+  --contrast: hsl(205deg, 30%, 15%);
   --contrast-hover: #000;
   --contrast-focus: rgba(89, 107, 120, 0.125);
   --contrast-inverse: #fff;
@@ -230,14 +230,14 @@ kbd {
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --form-element-background-color: transparent;
-  --form-element-border-color: #a2afb9;
+  --form-element-border-color: hsl(205deg, 14%, 68%);
   --form-element-color: var(--color);
   --form-element-placeholder-color: var(--muted-color);
   --form-element-active-background-color: transparent;
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #d5dce2;
+  --form-element-disabled-background-color: hsl(205deg, 18%, 86%);
-  --form-element-disabled-border-color: #a2afb9;
+  --form-element-disabled-border-color: hsl(205deg, 14%, 68%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #c62828;
   --form-element-invalid-active-border-color: #d32f2f;
@@ -245,25 +245,25 @@ kbd {
   --form-element-valid-border-color: #388e3c;
   --form-element-valid-active-border-color: #43a047;
   --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
-  --switch-background-color: #bbc6ce;
+  --switch-background-color: hsl(205deg, 16%, 77%);
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
-  --range-border-color: #d5dce2;
+  --range-border-color: hsl(205deg, 18%, 86%);
-  --range-active-border-color: #bbc6ce;
+  --range-active-border-color: hsl(205deg, 16%, 77%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
   --range-thumb-active-color: var(--primary);
   --table-border-color: var(--muted-border-color);
   --table-row-stripped-background-color: #f6f8f9;
-  --code-background-color: #edf0f3;
+  --code-background-color: hsl(205deg, 20%, 94%);
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #b34d80;
+  --code-tag-color: hsl(330deg, 40%, 50%);
-  --code-property-color: #3d888f;
+  --code-property-color: hsl(185deg, 40%, 40%);
-  --code-value-color: #998866;
+  --code-value-color: hsl(40deg, 20%, 50%);
-  --code-comment-color: #a2afb9;
+  --code-comment-color: hsl(205deg, 14%, 68%);
   --accordion-border-color: var(--muted-border-color);
   --accordion-close-summary-color: var(--color);
   --accordion-open-summary-color: var(--muted-color);
@@ -277,9 +277,9 @@ kbd {
   --dropdown-border-color: #e1e6eb;
   --dropdown-box-shadow: var(--card-box-shadow);
   --dropdown-color: var(--color);
-  --dropdown-hover-background-color: #edf0f3;
+  --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
   --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
-  --progress-background-color: #d5dce2;
+  --progress-background-color: hsl(205deg, 18%, 86%);
   --progress-color: var(--primary);
   --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
@@ -301,24 +301,24 @@ kbd {
   :root:not([data-theme=light]) {
     color-scheme: dark;
     --background-color: #11191f;
-    --color: #bbc6ce;
+    --color: hsl(205deg, 16%, 77%);
-    --h1-color: #edf0f3;
+    --h1-color: hsl(205deg, 20%, 94%);
     --h2-color: #e1e6eb;
-    --h3-color: #d5dce2;
+    --h3-color: hsl(205deg, 18%, 86%);
     --h4-color: #c8d1d8;
-    --h5-color: #bbc6ce;
+    --h5-color: hsl(205deg, 16%, 77%);
     --h6-color: #afbbc4;
-    --muted-color: #73828c;
+    --muted-color: hsl(205deg, 10%, 50%);
     --muted-border-color: #1f2d38;
-    --primary: #1095c1;
+    --primary: hsl(195deg, 85%, 41%);
-    --primary-hover: #1ab3e6;
+    --primary-hover: hsl(195deg, 80%, 50%);
     --primary-focus: rgba(16, 149, 193, 0.25);
     --primary-inverse: #fff;
-    --secondary: #596b78;
+    --secondary: hsl(205deg, 15%, 41%);
-    --secondary-hover: #73828c;
+    --secondary-hover: hsl(205deg, 10%, 50%);
     --secondary-focus: rgba(115, 130, 140, 0.25);
     --secondary-inverse: #fff;
-    --contrast: #edf0f3;
+    --contrast: hsl(205deg, 20%, 94%);
     --contrast-hover: #fff;
     --contrast-focus: rgba(115, 130, 140, 0.25);
     --contrast-inverse: #000;
@@ -337,8 +337,8 @@ kbd {
     --form-element-active-background-color: var(--form-element-background-color);
     --form-element-active-border-color: var(--primary);
     --form-element-focus-color: var(--primary-focus);
-    --form-element-disabled-background-color: #2c3d49;
+    --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-    --form-element-disabled-border-color: #415462;
+    --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
     --form-element-disabled-opacity: 0.5;
     --form-element-invalid-border-color: #b71c1c;
     --form-element-invalid-active-border-color: #c62828;
@@ -350,7 +350,7 @@ kbd {
     --switch-color: var(--primary-inverse);
     --switch-checked-background-color: var(--primary);
     --range-border-color: #24333e;
-    --range-active-border-color: #2c3d49;
+    --range-active-border-color: hsl(205deg, 25%, 23%);
     --range-thumb-border-color: var(--background-color);
     --range-thumb-color: var(--secondary);
     --range-thumb-hover-color: var(--secondary-hover);
@@ -361,9 +361,9 @@ kbd {
     --code-color: var(--muted-color);
     --code-kbd-background-color: var(--contrast);
     --code-kbd-color: var(--contrast-inverse);
-    --code-tag-color: #a65980;
+    --code-tag-color: hsl(330deg, 30%, 50%);
-    --code-property-color: #599fa6;
+    --code-property-color: hsl(185deg, 30%, 50%);
-    --code-value-color: #8c8473;
+    --code-value-color: hsl(40deg, 10%, 50%);
     --code-comment-color: #4d606d;
     --accordion-border-color: var(--muted-border-color);
     --accordion-active-summary-color: var(--primary);
@@ -375,7 +375,7 @@ kbd {
       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;
-    --dropdown-background-color: #1b2832;
+    --dropdown-background-color: hsl(205deg, 30%, 15%);
     --dropdown-border-color: #24333e;
     --dropdown-box-shadow: var(--card-box-shadow);
     --dropdown-color: var(--color);
@@ -402,24 +402,24 @@ kbd {
 [data-theme=dark] {
   color-scheme: dark;
   --background-color: #11191f;
-  --color: #bbc6ce;
+  --color: hsl(205deg, 16%, 77%);
-  --h1-color: #edf0f3;
+  --h1-color: hsl(205deg, 20%, 94%);
   --h2-color: #e1e6eb;
-  --h3-color: #d5dce2;
+  --h3-color: hsl(205deg, 18%, 86%);
   --h4-color: #c8d1d8;
-  --h5-color: #bbc6ce;
+  --h5-color: hsl(205deg, 16%, 77%);
   --h6-color: #afbbc4;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
   --muted-border-color: #1f2d38;
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #1ab3e6;
+  --primary-hover: hsl(195deg, 80%, 50%);
   --primary-focus: rgba(16, 149, 193, 0.25);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #73828c;
+  --secondary-hover: hsl(205deg, 10%, 50%);
   --secondary-focus: rgba(115, 130, 140, 0.25);
   --secondary-inverse: #fff;
-  --contrast: #edf0f3;
+  --contrast: hsl(205deg, 20%, 94%);
   --contrast-hover: #fff;
   --contrast-focus: rgba(115, 130, 140, 0.25);
   --contrast-inverse: #000;
@@ -438,8 +438,8 @@ kbd {
   --form-element-active-background-color: var(--form-element-background-color);
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #2c3d49;
+  --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-  --form-element-disabled-border-color: #415462;
+  --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #b71c1c;
   --form-element-invalid-active-border-color: #c62828;
@@ -451,7 +451,7 @@ kbd {
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
   --range-border-color: #24333e;
-  --range-active-border-color: #2c3d49;
+  --range-active-border-color: hsl(205deg, 25%, 23%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
@@ -462,9 +462,9 @@ kbd {
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #a65980;
+  --code-tag-color: hsl(330deg, 30%, 50%);
-  --code-property-color: #599fa6;
+  --code-property-color: hsl(185deg, 30%, 50%);
-  --code-value-color: #8c8473;
+  --code-value-color: hsl(40deg, 10%, 50%);
   --code-comment-color: #4d606d;
   --accordion-border-color: var(--muted-border-color);
   --accordion-active-summary-color: var(--primary);
@@ -476,7 +476,7 @@ kbd {
     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;
-  --dropdown-background-color: #1b2832;
+  --dropdown-background-color: hsl(205deg, 30%, 15%);
   --dropdown-border-color: #24333e;
   --dropdown-box-shadow: var(--card-box-shadow);
   --dropdown-color: var(--color);

docs/src/containers.html

@@ -61,7 +61,7 @@
               </tbody>
             </table>
           </figure>
-          <p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code></p>
+          <p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct children of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code></p>
           <p><code>&lt;<b>section</b>&gt;</code> provides a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
         </section>
 

docs/src/dropdowns.html

@@ -20,7 +20,7 @@
             <h1>Dropdowns</h1>
             <h2>Dropdown menus and custom selects without JavaScript.</h2>
           </hgroup>
-          <p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct childs.</p>
+          <p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct children.</p>
           <p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html">&lt;select&gt;</a> by default.</p>
           <article aria-label="Dropdowns as Selects">
             <details role="list">

docs/src/index.html

@@ -3,7 +3,7 @@
   <head>
     ${require('./_head.html') 
       title="Documentation" 
-      description="Pico works without package manager or dependencies! There are 3 ways to get started with pico.css: manually, from a CDN, with NPM."
+      description="Pico works without package manager or dependencies! There are 4 ways to get started with pico.css: manually, from a CDN, with NPM, or with Composer."
       canonical=""
     }
   </head>
@@ -20,7 +20,7 @@
             <h1>Usage</h1>
             <h2>Works without package manager or dependencies 🙂!</h2>
           </hgroup>
-          <p>There are 3 ways to get started with pico.css:</p>
+          <p>There are 4 ways to get started with pico.css:</p>
           <h3>Install manually</h3>
           <p><a href="https://github.com/picocss/pico/archive/refs/heads/master.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code>&lt;<b>head</b>&gt;</code> of your website.</p>
           <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
@@ -29,6 +29,8 @@
           <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>&gt;</code></pre>
           <h3>Install with NPM</h3>
           <pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
+          <h3>Install with Composer</h3>
+          <pre><code><b>composer</b> <i>require</i> <u>picocss/pico</u></code></pre>          
           <p>Starter HTML template:</p>
 
 <pre><code><em>&lt;!doctype html&gt;</em>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picocss/pico",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Minimal CSS Framework for semantic HTML",
   "author": "Lucas Larroche",
   "main": "css/pico.min.css",
@@ -79,21 +79,21 @@
     "watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
+    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.18.0",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-env": "^7.18.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.7",
-    "clean-css-cli": "^5.5.2",
+    "clean-css-cli": "^5.6.0",
-    "css-declaration-sorter": "^6.1.4",
+    "css-declaration-sorter": "^6.2.2",
     "html-includes": "^4.4.1",
-    "nodemon": "^2.0.15",
+    "nodemon": "^2.0.16",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.8",
+    "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",
-    "postcss-scss": "^4.0.3",
+    "postcss-scss": "^4.0.4",
-    "rollup": "^2.70.0",
+    "rollup": "^2.74.1",
-    "sass": "^1.49.9",
+    "sass": "^1.52.1",
-    "uglify-js": "^3.15.3"
+    "uglify-js": "^3.15.5"
   },
   "browserslist": [
     ">= 0.5%",

scss/components/_modal.scss

@@ -23,6 +23,7 @@ dialog {
   padding: var(--spacing);
   border: 0;
   background-color: var(--modal-overlay-background-color);
+  color: var(--color);
 
   // Content
   article {

scss/pico.scss

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.5.0 (https://picocss.com)
+ * Pico.css v1.5.1 (https://picocss.com)
  * Copyright 2019-2022 - Licensed under MIT
  */
 

scss/pico.slim.scss

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.5.0 (https://picocss.com)
+ * Pico.css v1.5.1 (https://picocss.com)
  * Copyright 2019-2022 - Licensed under MIT
  *
  * Slim version example