Merge pull request #662 from picocss/dev

v2.1.1

.github/CONTRIBUTING.md

@@ -4,19 +4,19 @@ Thanks for your interest in contributing to Pico CSS! Please take a moment to re
 
 ## Bug reports
 
-The [issue tracker](https://github.com/picocss/pico/issues) is the preferred channel for bug reports, but please respect the following restrictions:
+The [issue tracker]((https://github.com/picocss/pico/issues)) is the preferred channel for bug reports, but please respect the following restrictions:
 - Please do not use the issue tracker for personal support requests. [Open a question in our discussion forums](https://github.com/picocss/pico/discussions/categories/help) instead.
-- Please do not use the issue tracker for feature requests. [Suggest any ideas you have using our discussion forums](https://github.com/picocss/pico/discussions/categories/ideas) instead.
+- Please do not use the issue tracker for feature requests.  Instead, use our discussion forums to [suggest any ideas](https://github.com/picocss/pico/discussions/categories/ideas) you have.
 
 ## Pull requests
 
 Good pull requests, patches, improvements, and new features are a fantastic help.
 
-**Please ask first before starting work on any significant new features.**
+**Please ask before starting work on any significant new features.**
 We recommend that you first [suggest your feature idea in our discussion forums](https://github.com/picocss/pico/discussions/categories/ideas).
 
-[`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
+[`dev`](https://github.com/picocss/pico/tree/dev) branch is open for pull requests on `v2`.
 
-**Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.** Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `npm run build`.
+[`v1-dev`](https://github.com/picocss/pico/tree/v1-dev) branch is open to pull requests on `v1`.
 
-Do not edit [`/docs/*.html`](https://github.com/picocss/pico/tree/master/docs) files directly. Edit the source files in [`/docs/src`](https://github.com/picocss/pico/tree/master/docs/src), then recompile the docs files with `npm run build`.
+**Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.** Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `yarn build`.

.github/logo-dark.svg

@@ -0,0 +1,27 @@
+<svg height="458" viewBox="0 0 1064 458" width="1064" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    :root {
+      --pico-logo-wordmark: #fff;
+      --pico-logo-small-sparkles: #ff9500;
+      --pico-logo-big-sparkle: #ffbf00;
+    }
+    .pico-logo-wordmark {
+      fill: var(--pico-logo-wordmark);
+    }
+    .pico-logo-small-sparkles {
+      fill: var(--pico-logo-small-sparkles);
+    }
+    .pico-logo-big-sparkle {
+      fill: var(--pico-logo-big-sparkle);
+    }
+  </style>
+  <path d="m993.708 161.083c-1.475.567-2.641 1.733-3.208 3.208l-21.822 56.738c-1.836 4.774-8.59 4.774-10.426 0l-21.823-56.738c-.567-1.475-1.733-2.641-3.208-3.208l-56.738-21.823c-4.774-1.836-4.774-8.59 0-10.426l56.738-21.822c1.475-.567 2.641-1.733 3.208-3.208l21.823-56.7383c1.836-4.7737 8.59-4.7737 10.426 0l21.822 56.7383c.567 1.475 1.733 2.641 3.208 3.208l56.742 21.822c4.77 1.836 4.77 8.59 0 10.426z" class="pico-logo-big-sparkle" />
+  <path d="m834.63 86.9817c-1.836 4.7738-8.59 4.7738-10.426 0l-7.859-20.4337c-.567-1.475-1.733-2.6407-3.208-3.208l-20.433-7.8592c-4.774-1.836-4.774-8.59 0-10.426l20.433-7.8591c1.475-.5674 2.641-1.733 3.208-3.2081l7.859-20.4337c1.836-4.77377 8.59-4.77375 10.426 0l7.86 20.4337c.567 1.4751 1.733 2.6407 3.208 3.2081l20.433 7.8591c4.774 1.836 4.774 8.59 0 10.426l-20.433 7.8592c-1.475.5673-2.641 1.733-3.208 3.208z" class="pico-logo-small-sparkles" />
+  <path d="m879.209 230.899c-1.475.568-2.64 1.733-3.208 3.208l-7.859 20.434c-1.836 4.774-8.59 4.774-10.426 0l-7.859-20.434c-.567-1.475-1.733-2.64-3.208-3.208l-20.434-7.859c-4.773-1.836-4.773-8.59 0-10.426l20.434-7.859c1.475-.567 2.641-1.733 3.208-3.208l7.859-20.434c1.836-4.774 8.59-4.774 10.426 0l7.859 20.434c.568 1.475 1.733 2.641 3.208 3.208l20.434 7.859c4.774 1.836 4.774 8.59 0 10.426z" class="pico-logo-small-sparkles" />
+  <g class="pico-logo-wordmark">
+    <path d="m0 457.995v-282.83h59.1396l3.6208 37.172v245.658zm119.889-75.96c-16.629 0-30.5761-4.175-41.8408-12.525-11.2647-8.62-19.7132-20.876-25.3455-36.768-5.6324-15.892-8.4485-34.748-8.4485-56.566 0-22.088 2.8161-40.943 8.4485-56.566 5.6323-15.893 14.0808-28.014 25.3455-36.364 11.2647-8.62 25.2118-12.93 41.8408-12.93 18.774 0 35.001 4.31 48.679 12.93 13.679 8.35 24.139 20.471 31.38 36.364 7.242 15.623 10.863 34.478 10.863 56.566 0 21.818-3.621 40.674-10.863 56.566-7.241 15.892-17.701 28.148-31.38 36.768-13.678 8.35-29.905 12.525-48.679 12.525zm-16.093-58.182c8.046 0 15.154-2.02 21.323-6.061 6.168-4.04 11.13-9.562 14.885-16.566 3.755-7.272 5.632-15.623 5.632-25.05 0-9.428-1.743-17.643-5.23-24.647-3.486-7.273-8.448-12.929-14.885-16.97-6.169-4.04-13.276-6.06-21.323-6.06-8.0458 0-15.2874 2.02-21.7244 6.06-6.1687 4.041-10.9964 9.697-14.4831 16.97s-5.2301 15.488-5.2301 24.647c0 9.427 1.7434 17.778 5.2301 25.05 3.4867 7.004 8.3144 12.526 14.4831 16.566 6.1688 4.041 13.2763 6.061 21.3224 6.061z" />
+    <path d="m245.196 377.187v-202.022h62.76v202.022zm31.38-227.881c-9.387 0-17.702-3.502-24.943-10.505-6.974-7.273-10.46-15.623-10.46-25.051 0-9.966 3.486-18.3165 10.46-25.0505 7.241-7.0035 15.556-10.5052 24.943-10.5052 9.655 0 17.97 3.5017 24.943 10.5052 6.973 6.734 10.46 15.0845 10.46 25.0505 0 9.428-3.487 17.778-10.46 25.051-6.973 7.003-15.288 10.505-24.943 10.505z" />
+    <path d="m452.936 382.035c-21.457 0-40.634-4.444-57.531-13.333-16.629-9.159-29.637-21.684-39.024-37.576-9.387-16.162-14.081-34.479-14.081-54.95 0-20.741 4.694-39.058 14.081-54.95 9.387-15.893 22.261-28.283 38.622-37.172 16.629-9.159 35.671-13.738 57.128-13.738 20.652 0 39.56 5.253 56.726 15.758 17.165 10.505 29.502 25.724 37.012 45.657l-59.542 20.202c-2.95-6.465-7.912-11.717-14.885-15.758-6.705-4.309-14.215-6.464-22.53-6.464-8.314 0-15.69 2.02-22.127 6.06-6.168 3.771-11.13 9.159-14.885 16.162-3.487 7.004-5.23 15.084-5.23 24.243 0 9.158 1.743 17.239 5.23 24.242 3.755 6.734 8.851 12.122 15.288 16.162 6.705 4.041 14.215 6.061 22.529 6.061 8.315 0 15.824-2.155 22.529-6.465 6.706-4.31 11.667-9.966 14.886-16.97l59.542 20.202c-7.778 20.203-20.25 35.691-37.415 46.465-16.897 10.775-35.672 16.162-56.323 16.162z" />
+    <path d="m672.537 382.035c-21.188 0-39.962-4.444-56.323-13.333-16.093-9.159-28.832-21.684-38.22-37.576-9.119-15.893-13.678-34.209-13.678-54.95s4.559-39.058 13.678-54.95c9.119-15.893 21.725-28.283 37.818-37.172 16.36-9.159 34.866-13.738 55.518-13.738 21.189 0 39.829 4.579 55.922 13.738 16.36 8.889 29.1 21.279 38.219 37.172 9.119 15.892 13.679 34.209 13.679 54.95s-4.56 39.057-13.679 54.95c-9.119 15.892-21.725 28.417-37.817 37.576-15.824 8.889-34.196 13.333-55.117 13.333zm-.402-59.798c8.314 0 15.422-1.886 21.322-5.657 6.169-4.04 10.997-9.428 14.484-16.162 3.486-7.003 5.23-15.084 5.23-24.242 0-9.159-1.878-17.105-5.633-23.839-3.486-7.003-8.314-12.39-14.483-16.162-6.169-4.04-13.276-6.06-21.322-6.06s-15.154 2.02-21.323 6.06c-6.168 3.772-10.996 9.159-14.483 16.162-3.487 6.734-5.23 14.68-5.23 23.839 0 8.889 1.743 16.835 5.23 23.838 3.487 7.004 8.315 12.526 14.483 16.566 6.437 3.771 13.679 5.657 21.725 5.657z" />
+  </g>
+</svg>

.github/logo-light.svg

@@ -0,0 +1,27 @@
+<svg height="458" viewBox="0 0 1064 458" width="1064" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    :root {
+      --pico-logo-wordmark: #2a3140;
+      --pico-logo-small-sparkles: #ffbf00;
+      --pico-logo-big-sparkle: #ff9500;
+    }
+    .pico-logo-wordmark {
+      fill: var(--pico-logo-wordmark);
+    }
+    .pico-logo-small-sparkles {
+      fill: var(--pico-logo-small-sparkles);
+    }
+    .pico-logo-big-sparkle {
+      fill: var(--pico-logo-big-sparkle);
+    }
+  </style>
+  <path d="m993.708 161.083c-1.475.567-2.641 1.733-3.208 3.208l-21.822 56.738c-1.836 4.774-8.59 4.774-10.426 0l-21.823-56.738c-.567-1.475-1.733-2.641-3.208-3.208l-56.738-21.823c-4.774-1.836-4.774-8.59 0-10.426l56.738-21.822c1.475-.567 2.641-1.733 3.208-3.208l21.823-56.7383c1.836-4.7737 8.59-4.7737 10.426 0l21.822 56.7383c.567 1.475 1.733 2.641 3.208 3.208l56.742 21.822c4.77 1.836 4.77 8.59 0 10.426z" class="pico-logo-big-sparkle" />
+  <path d="m834.63 86.9817c-1.836 4.7738-8.59 4.7738-10.426 0l-7.859-20.4337c-.567-1.475-1.733-2.6407-3.208-3.208l-20.433-7.8592c-4.774-1.836-4.774-8.59 0-10.426l20.433-7.8591c1.475-.5674 2.641-1.733 3.208-3.2081l7.859-20.4337c1.836-4.77377 8.59-4.77375 10.426 0l7.86 20.4337c.567 1.4751 1.733 2.6407 3.208 3.2081l20.433 7.8591c4.774 1.836 4.774 8.59 0 10.426l-20.433 7.8592c-1.475.5673-2.641 1.733-3.208 3.208z" class="pico-logo-small-sparkles" />
+  <path d="m879.209 230.899c-1.475.568-2.64 1.733-3.208 3.208l-7.859 20.434c-1.836 4.774-8.59 4.774-10.426 0l-7.859-20.434c-.567-1.475-1.733-2.64-3.208-3.208l-20.434-7.859c-4.773-1.836-4.773-8.59 0-10.426l20.434-7.859c1.475-.567 2.641-1.733 3.208-3.208l7.859-20.434c1.836-4.774 8.59-4.774 10.426 0l7.859 20.434c.568 1.475 1.733 2.641 3.208 3.208l20.434 7.859c4.774 1.836 4.774 8.59 0 10.426z" class="pico-logo-small-sparkles" />
+  <g class="pico-logo-wordmark">
+    <path d="m0 457.995v-282.83h59.1396l3.6208 37.172v245.658zm119.889-75.96c-16.629 0-30.5761-4.175-41.8408-12.525-11.2647-8.62-19.7132-20.876-25.3455-36.768-5.6324-15.892-8.4485-34.748-8.4485-56.566 0-22.088 2.8161-40.943 8.4485-56.566 5.6323-15.893 14.0808-28.014 25.3455-36.364 11.2647-8.62 25.2118-12.93 41.8408-12.93 18.774 0 35.001 4.31 48.679 12.93 13.679 8.35 24.139 20.471 31.38 36.364 7.242 15.623 10.863 34.478 10.863 56.566 0 21.818-3.621 40.674-10.863 56.566-7.241 15.892-17.701 28.148-31.38 36.768-13.678 8.35-29.905 12.525-48.679 12.525zm-16.093-58.182c8.046 0 15.154-2.02 21.323-6.061 6.168-4.04 11.13-9.562 14.885-16.566 3.755-7.272 5.632-15.623 5.632-25.05 0-9.428-1.743-17.643-5.23-24.647-3.486-7.273-8.448-12.929-14.885-16.97-6.169-4.04-13.276-6.06-21.323-6.06-8.0458 0-15.2874 2.02-21.7244 6.06-6.1687 4.041-10.9964 9.697-14.4831 16.97s-5.2301 15.488-5.2301 24.647c0 9.427 1.7434 17.778 5.2301 25.05 3.4867 7.004 8.3144 12.526 14.4831 16.566 6.1688 4.041 13.2763 6.061 21.3224 6.061z" />
+    <path d="m245.196 377.187v-202.022h62.76v202.022zm31.38-227.881c-9.387 0-17.702-3.502-24.943-10.505-6.974-7.273-10.46-15.623-10.46-25.051 0-9.966 3.486-18.3165 10.46-25.0505 7.241-7.0035 15.556-10.5052 24.943-10.5052 9.655 0 17.97 3.5017 24.943 10.5052 6.973 6.734 10.46 15.0845 10.46 25.0505 0 9.428-3.487 17.778-10.46 25.051-6.973 7.003-15.288 10.505-24.943 10.505z" />
+    <path d="m452.936 382.035c-21.457 0-40.634-4.444-57.531-13.333-16.629-9.159-29.637-21.684-39.024-37.576-9.387-16.162-14.081-34.479-14.081-54.95 0-20.741 4.694-39.058 14.081-54.95 9.387-15.893 22.261-28.283 38.622-37.172 16.629-9.159 35.671-13.738 57.128-13.738 20.652 0 39.56 5.253 56.726 15.758 17.165 10.505 29.502 25.724 37.012 45.657l-59.542 20.202c-2.95-6.465-7.912-11.717-14.885-15.758-6.705-4.309-14.215-6.464-22.53-6.464-8.314 0-15.69 2.02-22.127 6.06-6.168 3.771-11.13 9.159-14.885 16.162-3.487 7.004-5.23 15.084-5.23 24.243 0 9.158 1.743 17.239 5.23 24.242 3.755 6.734 8.851 12.122 15.288 16.162 6.705 4.041 14.215 6.061 22.529 6.061 8.315 0 15.824-2.155 22.529-6.465 6.706-4.31 11.667-9.966 14.886-16.97l59.542 20.202c-7.778 20.203-20.25 35.691-37.415 46.465-16.897 10.775-35.672 16.162-56.323 16.162z" />
+    <path d="m672.537 382.035c-21.188 0-39.962-4.444-56.323-13.333-16.093-9.159-28.832-21.684-38.22-37.576-9.119-15.893-13.678-34.209-13.678-54.95s4.559-39.058 13.678-54.95c9.119-15.893 21.725-28.283 37.818-37.172 16.36-9.159 34.866-13.738 55.518-13.738 21.189 0 39.829 4.579 55.922 13.738 16.36 8.889 29.1 21.279 38.219 37.172 9.119 15.892 13.679 34.209 13.679 54.95s-4.56 39.057-13.679 54.95c-9.119 15.892-21.725 28.417-37.817 37.576-15.824 8.889-34.196 13.333-55.117 13.333zm-.402-59.798c8.314 0 15.422-1.886 21.322-5.657 6.169-4.04 10.997-9.428 14.484-16.162 3.486-7.003 5.23-15.084 5.23-24.242 0-9.159-1.878-17.105-5.633-23.839-3.486-7.003-8.314-12.39-14.483-16.162-6.169-4.04-13.276-6.06-21.322-6.06s-15.154 2.02-21.323 6.06c-6.168 3.772-10.996 9.159-14.483 16.162-3.487 6.734-5.23 14.68-5.23 23.839 0 8.889 1.743 16.835 5.23 23.838 3.487 7.004 8.315 12.526 14.483 16.566 6.437 3.771 13.679 5.657 21.725 5.657z" />
+  </g>
+</svg>

.github/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M0 0h1000v1000H0z" fill="#1b2a32"/><path d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z" fill="#fff"/></svg>

.gitignore

@@ -1,5 +1,32 @@
-node_modules/
-tests/
-.nvmrc
-.prettierrc.js
-*.DS_Store
+# OS or Editor folders
+._*
+.cache
+.DS_Store
+.idea
+.project
+.settings
+.tmproj
+*.esproj
+*.sublime-project
+*.sublime-workspace
+nbproject
+Thumbs.db
+/.vscode/
+
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.log
+*.orig
+*.rej
+*.swo
+*.swp
+*.vi
+*.zip
+*~
+
+# Folders to ignore
+/node_modules/
+
+# Pico
+.pico

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 100
+}

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2023 Pico
+Copyright (c) 2019-2024 Pico
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,99 +1,127 @@
-<p align="center">
-  <a href="https://picocss.com/">
-    <img src=".github/logo.svg" width="64" height="64">
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
   </a>
 </p>
 
-<h3 align="center">Pico CSS</h3>
+[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=0172ad&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
+[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=0172ad)](https://www.npmjs.com/package/@picocss/pico)
+[![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/picocss/pico/blob/master/LICENSE.md)
+[![X (formerly Twitter)](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://x.com/picocss)
 
-<p align="center">
-  <strong>Minimal CSS Framework for semantic HTML</strong><br>
-  Elegant styles for all native HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
-  <a href="https://github.com/picocss/examples">Examples</a> ·
-  <a href="https://picocss.com/docs/v1/">Documentation</a>
-</p>
+## Minimal CSS Framework for Semantic HTML
 
-## Pico CSS
+A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.
 
-[![Standard gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Standard%20CSS)](https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css)
-[![Classless gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Classless%20CSS)](https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css)
-[![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)
+Write HTML, Add Pico CSS, and Voilà!
 
-https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
+## What’s new in v2?
 
-**Class-light and semantic**  
-Pico uses simple native HTML tags as much as possible. Less than 10 .classes are used in Pico.
+Pico v2.0 features better accessibility, easier customization with SASS, a complete color palette, a new group component, and 20 precompiled color themes totaling over 100 combinations accessible via CDN.
 
-**Great styles with just one CSS file**  
-No dependencies, package manager, external files, or JavaScript.
+[Read more](https://picocss.com/docs/v2)
 
-**Responsive everything**  
-Elegant and consistent adaptive spacings and typography on all devices.
+## A Superpowered HTML Reset
 
-**Light or Dark mode**  
-Shipped with two beautiful color themes, automatically enabled according to the user preference.
+With just the right amount of everything, Pico is great starting point for a clean and lightweight design system.
+
+- Class-light and Semantic
+- Great Styles with Just CSS
+- Responsive Everything
+- Light or Dark Mode
+- Easy Customization
+- Optimized Performance
 
 ## Table of contents
 
-- [Usage](#usage)
+- [Quick start](#quick-start)
 - [Class-less version](#class-less-version)
-- [Examples](#examples)
 - [Limitations](#limitations)
 - [Documentation](#documentation)
 - [Browser Support](#browser-support)
 - [Contributing](#contributing)
 - [Copyright and license](#copyright-and-license)
 
-## Usage
+## Quick start
 
-There are 4 ways to get started with Pico CSS:
+There are 4 ways to get started with pico.css:
 
-**Install manually**
+### Install manually
 
-[Download Pico](https://github.com/picocss/pico/archive/refs/heads/v1-dev.zip) and link `/css/pico.min.css` in the `<head>` of your website.
+[Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website.
 
 ```html
-<link rel="stylesheet" href="css/pico.min.css" />
+<link rel="stylesheet" href="css/pico.min.css">
 ```
 
-**Install from CDN**
+### Usage from CDN
 
 Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css.
 
 ```html
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
-/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 ```
 
-**Install with NPM**
+### Install with NPM
 
 ```shell
 npm install @picocss/pico
 ```
 
-**Install with Composer**
+Or
+
+```shell
+yarn add @picocss/pico
+```
+
+Then, import Pico into your SCSS file with [@use](https://sass-lang.com/documentation/at-rules/use):
+
+```SCSS
+@use "pico";
+```
+
+### Install with Composer
 
 ```shell
 composer require picocss/pico
 ```
 
+### Starter HTML template
+
+```HTML
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <link rel="stylesheet" href="css/pico.min.css">
+    <title>Hello world!</title>
+  </head>
+  <body>
+    <main class="container">
+      <h1>Hello world!</h1>
+    </main>
+  </body>
+</html>
+```
+
 ## Class-less version
 
-Pico provides a `.classless` version ([example](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless)).
+Pico provides a `.classless` version.
 
-In this version, `header`, `main` and `footer` act as containers.
+In this version, `<header>`, `<main>`, and `<footer>` inside `<body>` act as containers to define a centered or a fluid viewport.
 
 Use the default `.classless` version if you need centered viewports:
 
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
 />
 ```
 
@@ -102,22 +130,23 @@ Or use the `.fluid.classless` version if you need a fluid container:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.fluid.classless.min.css"
-/>
+  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css"
+>
 ```
 
 Then just write pure HTML, and it should look great:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css"
-    />
+      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
+    >
     <title>Hello, world!</title>
   </head>
   <body>
@@ -128,82 +157,77 @@ Then just write pure HTML, and it should look great:
 </html>
 ```
 
-## Examples
-
-Minimalist templates to discover Pico in action:
-
-[![Examples](.github/examples.jpg)](https://github.com/picocss/examples)
-
-- **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview)**  
-  A starter example with most of the Pico components and styles.
-
-- **[Right-to-left (RTL) preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview-rtl)**  
-  A starter example in Arabic with most of the Pico components and styles.
-
-- **[Classless](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless)**  
-  A pure semantic HTML markup, without `.classes`.
-
-- **[Basic template](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-basic-template)**  
-  A basic custom template for Pico using only CSS custom properties (variables).
-
-- **[Company](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-company)**  
-  A classic company or blog layout with a sidebar.
-
-- **[Google Amp](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-google-amp)**  
-  A simple layout for Google Amp, with inlined CSS.
-
-- **[Sign in](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-sign-in)**  
-  A minimalist layout for Login pages.
-
-- **[Pico + Bootstrap grid system](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid)**  
-  Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico.
-
-All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
-
 ## Limitations
 
-Pico can be used without custom CSS for quick or small projects. However, it’s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities `.classes`, this minimal CSS framework requires SCSS or CSS knowledge to build large projects.
+Pico CSS can be used without custom CSS for quick or small projects. However, it’s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities `.classes`, this minimal CSS framework requires SCSS or CSS knowledge to build large projects.
+
+[Read more](https://picocss.com/docs/usage-scenarios)
 
 ## Documentation
 
 **Getting started**
 
-- [Usage](https://picocss.com/docs/v1/)
-- [Themes](https://picocss.com/docs/v1/themes.html)
-- [Customization](https://picocss.com/docs/v1/customization.html)
-- [Class-less version](https://picocss.com/docs/v1/classless.html)
-- [RTL](https://picocss.com/docs/v1/rtl.html)
+- [Quick start](https://picocss.com/docs)
+- [Version picker `New`](https://picocss.com/docs/version-picker)
+- [Color schemes](https://picocss.com/docs/color-schemes)
+- [Class-less version](https://picocss.com/docs/classless)
+- [Conditional styling `New`](https://picocss.com/docs/conditional)
+- [RTL](https://picocss.com/docs/rtl)
+
+**Customization**
+
+- [CSS Variables](https://picocss.com/docs/css-variables)
+- [Sass](https://picocss.com/docs/sass)
+- [Colors `New`](https://picocss.com/docs/colors)
 
 **Layout**
 
-- [Containers](https://picocss.com/docs/v1/containers.html)
-- [Grids](https://picocss.com/docs/v1/grid.html)
-- [Horizontal scroller](https://picocss.com/docs/v1/scroller.html)
+- [Container](https://picocss.com/docs/container)
+- [Landmarks & section](https://picocss.com/docs/landmarks-section)
+- [Grid](https://picocss.com/docs/grid)
+- [Overflow auto `New`](https://picocss.com/docs/overflow-auto)
 
-**Elements**
+**Content**
 
-- [Typography](https://picocss.com/docs/v1/typography.html)
-- [Buttons](https://picocss.com/docs/v1/buttons.html)
-- [Forms](https://picocss.com/docs/v1/forms.html)
-- [Tables](https://picocss.com/docs/v1/tables.html)
+- [Typography](https://picocss.com/docs/typography)
+- [Link](https://picocss.com/docs/link)
+- [Button](https://picocss.com/docs/button)
+- [Table](https://picocss.com/docs/table)
+
+**Forms**
+
+- [Overview](https://picocss.com/docs/forms)
+- [Input](https://picocss.com/docs/forms/input)
+- [Textarea](https://picocss.com/docs/forms/textarea)
+- [Select](https://picocss.com/docs/forms/select)
+- [Checkboxes](https://picocss.com/docs/forms/checkboxes)
+- [Radios](https://picocss.com/docs/forms/radios)
+- [Switch](https://picocss.com/docs/forms/switch)
+- [Range](https://picocss.com/docs/forms/range)
 
 **Components**
 
-- [Accordions](https://picocss.com/docs/v1/accordions.html)
-- [Cards](https://picocss.com/docs/v1/cards.html)
-- [Dropdowns](https://picocss.com/docs/v1/dropdowns.html)
-- [Modal](https://picocss.com/docs/v1/modal.html)
-- [Navs](https://picocss.com/docs/v1/navs.html)
-- [Progress](https://picocss.com/docs/v1/progress.html)
+- [Accordion](https://picocss.com/docs/accordion)
+- [Card](https://picocss.com/docs/card)
+- [Dropdown](https://picocss.com/docs/dropdown)
+- [Group `New`](https://picocss.com/docs/group)
+- [Loading](https://picocss.com/docs/loading)
+- [Modal](https://picocss.com/docs/modal)
+- [Nav](https://picocss.com/docs/nav)
+- [Progress](https://picocss.com/docs/progress)
+- [Tooltip](https://picocss.com/docs/tooltip)
 
-**Utilities**
+**About**
 
-- [Loading](https://picocss.com/docs/v1/loading.html)
-- [Tooltips](https://picocss.com/docs/v1/tooltips.html)
+- [What’s new in v2?](https://picocss.com/docs/v2)
+- [Mission](https://picocss.com/docs/mission)
+- [Usage scenarios](https://picocss.com/docs/usage-scenarios)
+- [Brand](https://picocss.com/docs/brand)
+- [Built With](https://picocss.com/docs/built-with)
 
-## Browser support
+## Browser Support
 
-Pico is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11.
+Pico CSS is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11.
 
 ## Contributing
 
@@ -212,16 +236,3 @@ If you are interested in contributing to Pico CSS, please read our [contributing
 ## Copyright and license
 
 Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
-
-**Relevant third-party tools and resources we depend on:**
-
-Website and docs:
-
-- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL-3.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
-- [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free))
-
-Pico Library:
-
-- [Feather](https://feathericons.com/) Icons (Licensed [MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
-- [Normalize.css](https://necolas.github.io/normalize.css/): CSS reset (Licensed [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
-- [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md))