Typos & clean

README.md

@@ -23,10 +23,10 @@
 We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
 
 **Great styles with just one CSS file**  
-No dependencies, package manager, external files or JavaScript.
+No dependencies, package manager, external files, or JavaScript.
 
 **Responsive everything**  
-Elegant and consistent adaptatives spacings and typography on all devices.
+Elegant and consistent adaptative spacings and typography on all devices.
 
 **Light or Dark mode**  
 Shipped with two beautiful color themes, automatically enabled according to the user preference.

docs/css/pico.docs.css

@@ -356,7 +356,7 @@ section > pre {
 
 [data-theme="invalid"] code,
 [data-theme="valid"] code {
-  padding: 1rem 0;
+  padding: calc(var(--spacing) * 1.625) 0;
 }
 
 [data-theme="invalid"]:before {

docs/css/themes/docs.css

@@ -1,35 +0,0 @@
-/**
- * Theme: Additions for docs
- */
-:root {
-  --icon-external:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
-  --icon-check:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-check-dark: 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(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-}
-
-[data-theme="light"],
-:root:not([data-theme="dark"]) {
-  --invalid-color: #C62828;
-  --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;
-}
-
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --invalid-color: rgba(183, 28, 28, 0.5);
-    --valid-color: rgba(46, 125, 50, 0.5);
-    --nav-background-color: rgba(16, 24, 30, 0.8);
-    --nav-border-color: rgba(115, 130, 140, 0.2);
-    --nav-logo-color: #0d1419;
-  }
-}
-
-[data-theme="dark"] {
-  --invalid-color: rgba(183, 28, 28, 0.5);
-  --valid-color: rgba(46, 125, 50, 0.5);
-  --nav-background: rgba(16, 24, 30, 0.8);
-  --nav-border-color: rgba(115, 130, 140, 0.2);
-  --nav-logo-color: #0d1419;
-}

docs/css/themes/docs.min.css

@@ -1 +0,0 @@
-:root{--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-check-dark: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(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--invalid-color:#C62828;--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}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background-color:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419}}[data-theme=dark]{--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419}

docs/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <title>Pico.css • Graceful & Minimal CSS design system</title>
-    <link rel="shortcut icon" href="img/favicon.ico">
+    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
     <link rel="stylesheet" href="../css/pico.min.css">
     <link rel="stylesheet" href="css/pico.docs.min.css">
   </head>
@@ -133,9 +133,9 @@
           <section id="themes">
             <hgroup>
               <h2>Themes</h2>
-              <h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
+              <h3>Pico is shipped with 2 consistent themes: Light & Dark.</h3>
             </hgroup>
-            <p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
+            <p>The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
             <article aria-label="Theme switcher">
               <button class="contrast theme-switcher">...</button>
             </article>
@@ -186,7 +186,7 @@
                 </div>
                 <fieldset>
                   <label for="remember">
-                    <input type="checkbox" role="switch" id="remember" name="remember" checked aria-checked="true">
+                    <input type="checkbox" role="switch" id="remember" name="remember" checked>
                     Remember me
                   </label>
                 </fieldset>
@@ -245,7 +245,7 @@
 
             <p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p>
             <h4>Importing Pico SASS library</h4>
-            <p>It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
+            <p>It is recommended to customize Pico by importing SASS source files into your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
             <p>Compile the SASS file to CSS to get a custom version of Pico.</p>
 
 <pre><code><em>/* Custom <span class="name"> </span>version */</em>
@@ -258,7 +258,7 @@
 <em>// Import full Pico source code</em>
 <b>@import</b> <u>"path/pico"</u>;</code></pre>
 
-            <p>Alternatively, you can create a custom theme and import it in your project with the components you need.</p>
+            <p>Alternatively, you can create a custom theme and import it into your project with the components you need.</p>
 
 <pre><code><em>/* Custom <span class="name"> </span>version */</em>
 
@@ -271,7 +271,7 @@
 <em>...</em>
 </code></pre>
 
-            <p>This allows to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
+            <p>This allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
           </section><!-- ./ Docs: Customization -->
 
           <!-- Docs: Classless -->
@@ -280,8 +280,8 @@
               <h2>Class-less version</h2>
               <h3>For wild HTML purists!</h3>
             </hgroup>
-            <p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
+            <p>Pico provides a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
-            <p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
+            <p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code>, and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
             <p><strong>Usage:</strong></p>
             <p>Use the default <code>.classless</code> version if you need centered viewports:</p>
             <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
@@ -396,9 +396,9 @@
           <section id="scroller">
             <hgroup>
               <h2>Horizontal scroller</h2>
-              <h3><code>&lt;<b>figure</b>&gt;</code> act as a container to make any content scrollable horizontally.</h3>
+              <h3><code>&lt;<b>figure</b>&gt;</code> acts as a container to make any content scrollable horizontally.</h3>
             </hgroup>
-            <p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code></p>
+            <p>Useful to have responsive <code>&lt;<b>table</b>&gt;</code></p>
             <figure>
               <table role="grid">
                 <thead>
@@ -503,7 +503,7 @@
                     <th><code>&lt;<b>h2</b>&gt;</code></th>
                     <td>28<small>px</small></td>
                     <td>29<small>px</small></td>
-                    <td>31<small><small>.5px</small></td>
+                    <td>31<small>.5px</small></td>
                     <td>33<small>.25px</small></td>
                     <td>35<small>px</small></td>
                   </tr>
@@ -680,10 +680,10 @@
           <section id="forms">
             <hgroup>
               <h2>Forms</h2>
-              <h3>All form elements are in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewports.</h3>
+              <h3>All form elements are in pure semantic HTML and fully responsive, allowing forms to scale gracefully across devices and viewports.</h3>
             </hgroup>
-            <p>Input are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
+            <p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
-            <p>All natives form elements are fully customized and themables with CSS variables.</p>
+            <p>All natives form elements are fully customizable and themable with CSS variables.</p>
             <article aria-label="Form example">
               <form>
                 <div class="grid">
@@ -781,7 +781,7 @@
               </fieldset>
               <fieldset>
                 <label for="switch">
-                  <input type="checkbox" id="switch" name="switch" role="switch" aria-checked="false">
+                  <input type="checkbox" id="switch" name="switch" role="switch">
                   Publish on my profile
                 </label>
               </fieldset>
@@ -1211,7 +1211,7 @@
           <section id="love">
             <h2>We love <code>.classes</code></h2>
             <p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
-            <p>But off course, <code>.classes</code> are not a bad practice at all.</p>
+            <p>But of course, <code>.classes</code> are not a bad practice at all.</p>
             <p>Feel free to use <em>modifiers</em>.</p>
             <div data-theme="valid">
               <pre><code>&lt;<b>button</b> <i>class</i>=<u>"warning"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
@@ -1239,7 +1239,7 @@
 
     <!-- JavaScript -->
     <script src="https://unpkg.com/most-visible@1.5.0/dist/most-visible.min.js"></script>
-    <script type="module" src="js/pico.docs.min.js"></script>
+    <script src="js/pico.docs.min.js"></script>
 
   </body>
 

docs/js/src/color-picker.js

@@ -33,7 +33,7 @@ export const colorPicker = {
     // 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 += `
@@ -165,7 +165,7 @@ 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');
   }

docs/js/src/grid.js

@@ -13,7 +13,7 @@ export const grid = {
       add: 'Add column',
       remove: 'Remove column'
     },
-    target:  '#grids article'
+    target: '#grids article'
   },
   grid: {
     current: 4,
@@ -74,8 +74,8 @@ export const grid = {
 
     // Build
     for (let col = 0; col < this.grid.current; col++) {
-     htmlInner += '<div>' + (col + 1) + '</div>';
+      htmlInner += '<div>' + (col + 1) + '</div>';
-     codeInner += '  &lt;<b>div</b>&gt;' + (col+1) + '&lt;/<b>div</b>&gt;\n';
+      codeInner += '  &lt;<b>div</b>&gt;' + (col + 1) + '&lt;/<b>div</b>&gt;\n';
     }
 
     // Display

docs/js/src/scrollspy.js

@@ -53,7 +53,7 @@ export const scrollspy = {
   // Scroll stop
   scrollStop() {
     let isScrolling;
-    window.addEventListener('scroll', function (event) {
+    window.addEventListener('scroll', function(event) {
       window.clearTimeout(isScrolling);
       isScrolling = setTimeout(function() {
         this.setActiveNav();

docs/scss/content/_code.scss

@@ -36,7 +36,7 @@ section > pre {
 
   // Spacing for Valid & Invalid badge
   code {
-    padding: 1rem 0;
+    padding: calc(var(--spacing) * 1.625) 0;
   }
 }
 

scss/themes/default/_dark.scss

@@ -1,5 +1,4 @@
 // Default: Dark theme
-
 @mixin dark {
 
   // Document