Documentation

css/pico.classless.css

@@ -718,6 +718,10 @@ textarea[valid]:not(:focus) {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
+input[type="color"] {
+  height: calc(3rem + 2px);
+}
+
 select::-ms-expand {
   border: 0;
   background-color: transparent;

css/pico.css

@@ -791,6 +791,10 @@ textarea[valid]:not(:focus) {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
+input[type="color"] {
+  height: calc(3rem + 2px);
+}
+
 select::-ms-expand {
   border: 0;
   background-color: transparent;

css/pico.fluid.classless.css

@@ -714,6 +714,10 @@ textarea[valid]:not(:focus) {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
+input[type="color"] {
+  height: calc(3rem + 2px);
+}
+
 select::-ms-expand {
   border: 0;
   background-color: transparent;

docs/css/pico.docs.css

@@ -411,7 +411,8 @@ article pre {
 @media (min-width: 576px) {
   article pre {
     padding: 2rem 2.5rem;
-    margin-bottom: 0;
+    margin: -2.5rem;
+    margin-top: 2.5rem;
   }
 }
 

docs/index.html

@@ -29,7 +29,7 @@
         <li><a href="#start" class="secondary">Start</a></li>
         <li><a href="#docs" class="secondary">Docs</a></li>
         <li>
-          <a href="#" class="secondary">
+          <a href="https://github.com/picocss/pico" class="secondary">
             <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="1rem">
               <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
             </svg>
@@ -107,21 +107,33 @@
               <h2>Usage</h2>
               <p>Work without package manager or dependencies 🙂!</p>
             </hgroup>
-            <p>1. Download Pico CSS:</p>
+            <p>1. Download Pico:</p>
             <p><a href="https://github.com/picocss/pico/archive/master.zip" role="button">Download pico.css</a></p>
             <p>2. Link the CSS <small>(~5KB minified and gzipped)</small>:</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>
-            <p><strong>Customization:</strong></p>
+            <p>Starter template:</p>
-            <p>You can compile your own version of Pico: Sass sources are included.</p>
+
-            <p>A <a href="#classless">class-less version</a> is also included in the library.</p>
+<pre><code>&lt;!doctype html&gt;
-            <p></p>
+&lt;<b>html</b> <i>lang</i>=<u>"en"</u>&gt;
+  &lt;<b>head</b>&gt;
+    &lt;<b>meta</b> <i>charset</i>=<u>"utf-8"</u>&gt;
+    &lt;<b>meta</b> <i>name</i>=<u>"viewport"</u> <i>content</i>=<u>"width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"</u>&gt;
+    &lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;
+    &lt;<b>title</b>>Hello, world!&lt;/<b>title</b>&gt;
+  &lt;/<b>head</b>&gt;
+  &lt;<b>body</b>&gt;
+    &lt;<b>main</b> <i>class</i>=<u>"container"</u>&gt;
+      &lt;<b>h1</b>&gt;Hello, world!&lt;/<b>h1</b>&gt;
+    &lt;/<b>main</b>&gt;
+  &lt;/<b>body</b>&gt;
+&lt;/<b>html</b>&gt;</code></pre>
           </section><!-- ./ Docs: Start -->
 
           <!-- Docs: Themes -->
           <section id="themes">
             <a name="themes"></a>
             <hgroup>
-              <h2>Customize</h2>
+              <h2>Themes</h2>
               <p>Pico is shipped with 2 consistents themes: Light & Dark.<p>
             </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>
@@ -337,7 +349,7 @@
 &lt;/<b>section</b>&gt;</code></pre>
 
             </article>
-            <p>Columns intentionally collapses for small and medium devices (below <code><u>992px</u></code>).</p>
+            <p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code>.</p>
           </section><!-- ./ Docs: Grid -->
 
           <!-- Docs: Horizontal scroller -->
@@ -519,7 +531,7 @@
             <a name="buttons"></a>
             <hgroup>
               <h2>Buttons</h2>
-              <p>The essential button in pure html, without <code>.classes</code> for the default style.</p>
+              <p>The essential button in pure HTML, without <code>.classes</code> for the default style.</p>
             </hgroup>
             <article>
               <button>Button</button>
@@ -570,7 +582,7 @@
             <a name="forms"></a>
             <hgroup>
               <h2>Forms</h2>
-              <p>All form elements in pure html, without <code>.classes</code> and responsives, allowing forms to scale gracefully across devices and viewport sizes.</p>
+              <p>All form elements in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewport sizes.</p>
             </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>All natives form elements are fully customized and themables with CSS variables.</p>
@@ -739,7 +751,7 @@
             <a name="accordions"></a>
             <hgroup>
               <h2>Accordions</h2>
-              <p>Toggle sections of content in pure HTML, without Javascript.</p>
+              <p>Toggle sections of content in pure HTML, without JavaScript.</p>
             </hgroup>
             <article>
               <details>
@@ -794,7 +806,7 @@
             <a name="navs"></a>
             <hgroup>
               <h2>Navs</h2>
-              <p>The essential navbar in pure semantic HTML.</p>
+              <p>The essential navbar component in pure semantic HTML.</p>
             </hgroup>
             <article>
               <nav>
@@ -893,7 +905,7 @@
             <a name="tooltips"></a>
             <hgroup>
               <h2>Tooltips</h2>
-              <p>Enable tooltips everywhere in pure HTML, without Javascript.</p>
+              <p>Enable tooltips everywhere in pure HTML, without JavaScript.</p>
             </hgroup>
             <article>
               <p>Tooltip on a <a href="#" data-tooltip="Tooltip">link</a></p>
@@ -902,7 +914,7 @@
 
 <pre><code>&lt;<b>p</b>&gt;Tooltip on a &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;link&lt;/<b>a</b>&gt;&lt;/<b>p</b>&gt;
 &lt;<b>p</b>&gt;Tooltip on &lt;<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;inline element&lt;/<b>em</b>&gt;&lt;/<b>p</b>&gt;
-&lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/p&gt;</code></pre>
+&lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;</code></pre>
 
             </article>
           </section><!-- ./ Docs: Nav -->
@@ -921,7 +933,7 @@
             </hgroup>
 
             <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 off course, <code>.classes</code> are not a bad practice at all.</p>
             <p>Feel free to use <em>modifiers</em>.</p>
             <section data-theme="valid">
 
@@ -941,11 +953,11 @@
             <p><small>Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a> & <a href="http://necolas.github.io/normalize.css/" class="secondary">Normalize</a>.</small></p>
           </footer><!-- ./ Footer -->
 
-        </div> <!-- ./ Document -->
+        </div><!-- ./ Document -->
 
     </main><!-- ./ Main -->
 
-    <!-- Javascript -->
+    <!-- JavaScript -->
     <script src="js/pico.docs.min.js"></script>
 
   </body>

docs/js/src/color-picker.js

@@ -16,6 +16,321 @@
     target:         '#customization h5',                 // Buttons inserted after target
     selectorButton: '#customization button[data-color]', // Button selector in Dom
     selectorTheme:  '#customization',                    // Theme selector in Dom
+
+    // Source: https://material.io/design/color/the-color-system.html
+    system: {
+      "red": {
+        "50": "#ffebee",
+        "100": "#ffcdd2",
+        "200": "#ef9a9a",
+        "300": "#e57373",
+        "400": "#ef5350",
+        "500": "#f44336",
+        "600": "#e53935",
+        "700": "#d32f2f",
+        "800": "#c62828",
+        "900": "#b71c1c",
+        "a100": "#ff8a80",
+        "a200": "#ff5252",
+        "a400": "#ff1744",
+        "a700": "#d50000",
+        "inverse": "#FFF"
+      },
+      "pink": {
+        "50": "#fce4ec",
+        "100": "#f8bbd0",
+        "200": "#f48fb1",
+        "300": "#f06292",
+        "400": "#ec407a",
+        "500": "#e91e63",
+        "600": "#d81b60",
+        "700": "#c2185b",
+        "800": "#ad1457",
+        "900": "#880e4f",
+        "a100": "#ff80ab",
+        "a200": "#ff4081",
+        "a400": "#f50057",
+        "a700": "#c51162",
+        "inverse": "#FFF"
+      },
+      "purple": {
+        "50": "#f3e5f5",
+        "100": "#e1bee7",
+        "200": "#ce93d8",
+        "300": "#ba68c8",
+        "400": "#ab47bc",
+        "500": "#9c27b0",
+        "600": "#8e24aa",
+        "700": "#7b1fa2",
+        "800": "#6a1b9a",
+        "900": "#4a148c",
+        "a100": "#ea80fc",
+        "a200": "#e040fb",
+        "a400": "#d500f9",
+        "a700": "#aa00ff",
+        "inverse": "#FFF"
+      },
+      "deep-purple": {
+        "50": "#ede7f6",
+        "100": "#d1c4e9",
+        "200": "#b39ddb",
+        "300": "#9575cd",
+        "400": "#7e57c2",
+        "500": "#673ab7",
+        "600": "#5e35b1",
+        "700": "#512da8",
+        "800": "#4527a0",
+        "900": "#311b92",
+        "a100": "#b388ff",
+        "a200": "#7c4dff",
+        "a400": "#651fff",
+        "a700": "#6200ea",
+        "inverse": "#FFF"
+      },
+      "indigo": {
+        "50": "#e8eaf6",
+        "100": "#c5cae9",
+        "200": "#9fa8da",
+        "300": "#7986cb",
+        "400": "#5c6bc0",
+        "500": "#3f51b5",
+        "600": "#3949ab",
+        "700": "#303f9f",
+        "800": "#283593",
+        "900": "#1a237e",
+        "a100": "#8c9eff",
+        "a200": "#536dfe",
+        "a400": "#3d5afe",
+        "a700": "#304ffe",
+        "inverse": "#FFF"
+      },
+      "blue": {
+        "50": "#e3f2fd",
+        "100": "#bbdefb",
+        "200": "#90caf9",
+        "300": "#64b5f6",
+        "400": "#42a5f5",
+        "500": "#2196f3",
+        "600": "#1e88e5",
+        "700": "#1976d2",
+        "800": "#1565c0",
+        "900": "#0d47a1",
+        "a100": "#82b1ff",
+        "a200": "#448aff",
+        "a400": "#2979ff",
+        "a700": "#2962ff",
+        "inverse": "#FFF"
+      },
+      "light-blue": {
+        "50": "#e1f5fe",
+        "100": "#b3e5fc",
+        "200": "#81d4fa",
+        "300": "#4fc3f7",
+        "400": "#29b6f6",
+        "500": "#03a9f4",
+        "600": "#039be5",
+        "700": "#0288d1",
+        "800": "#0277bd",
+        "900": "#01579b",
+        "a100": "#80d8ff",
+        "a200": "#40c4ff",
+        "a400": "#00b0ff",
+        "a700": "#0091ea",
+        "inverse": "#FFF"
+      },
+      "cyan": {
+        "50": "#e0f7fa",
+        "100": "#b2ebf2",
+        "200": "#80deea",
+        "300": "#4dd0e1",
+        "400": "#26c6da",
+        "500": "#00bcd4",
+        "600": "#00acc1",
+        "700": "#0097a7",
+        "800": "#00838f",
+        "900": "#006064",
+        "a100": "#84ffff",
+        "a200": "#18ffff",
+        "a400": "#00e5ff",
+        "a700": "#00b8d4",
+        "inverse": "#FFF"
+      },
+      "teal": {
+        "50": "#e0f2f1",
+        "100": "#b2dfdb",
+        "200": "#80cbc4",
+        "300": "#4db6ac",
+        "400": "#26a69a",
+        "500": "#009688",
+        "600": "#00897b",
+        "700": "#00796b",
+        "800": "#00695c",
+        "900": "#004d40",
+        "a100": "#a7ffeb",
+        "a200": "#64ffda",
+        "a400": "#1de9b6",
+        "a700": "#00bfa5",
+        "inverse": "#FFF"
+      },
+      "green": {
+        "50": "#e8f5e9",
+        "100": "#c8e6c9",
+        "200": "#a5d6a7",
+        "300": "#81c784",
+        "400": "#66bb6a",
+        "500": "#4caf50",
+        "600": "#43a047",
+        "700": "#388e3c",
+        "800": "#2e7d32",
+        "900": "#1b5e20",
+        "a100": "#b9f6ca",
+        "a200": "#69f0ae",
+        "a400": "#00e676",
+        "a700": "#00c853",
+        "inverse": "#FFF"
+      },
+      "light-green": {
+        "50": "#f1f8e9",
+        "100": "#dcedc8",
+        "200": "#c5e1a5",
+        "300": "#aed581",
+        "400": "#9ccc65",
+        "500": "#8bc34a",
+        "600": "#7cb342",
+        "700": "#689f38",
+        "800": "#558b2f",
+        "900": "#33691e",
+        "a100": "#ccff90",
+        "a200": "#b2ff59",
+        "a400": "#76ff03",
+        "a700": "#64dd17",
+        "inverse": "#FFF"
+      },
+      "lime": {
+        "50": "#f9fbe7",
+        "100": "#f0f4c3",
+        "200": "#e6ee9c",
+        "300": "#dce775",
+        "400": "#d4e157",
+        "500": "#cddc39",
+        "600": "#c0ca33",
+        "700": "#afb42b",
+        "800": "#9e9d24",
+        "900": "#827717",
+        "a100": "#f4ff81",
+        "a200": "#eeff41",
+        "a400": "#c6ff00",
+        "a700": "#aeea00",
+        "inverse": "#2c4049"
+      },
+      "yellow": {
+        "50": "#fffde7",
+        "100": "#fff9c4",
+        "200": "#fff59d",
+        "300": "#fff176",
+        "400": "#ffee58",
+        "500": "#ffeb3b",
+        "600": "#fdd835",
+        "700": "#fbc02d",
+        "800": "#f9a825",
+        "900": "#f57f17",
+        "a100": "#ffff8d",
+        "a200": "#ffff00",
+        "a400": "#ffea00",
+        "a700": "#ffd600",
+        "inverse": "#2c4049"
+      },
+      "amber": {
+        "50": "#fff8e1",
+        "100": "#ffecb3",
+        "200": "#ffe082",
+        "300": "#ffd54f",
+        "400": "#ffca28",
+        "500": "#ffc107",
+        "600": "#ffb300",
+        "700": "#ffa000",
+        "800": "#ff8f00",
+        "900": "#ff6f00",
+        "a100": "#ffe57f",
+        "a200": "#ffd740",
+        "a400": "#ffc400",
+        "a700": "#ffab00",
+        "inverse": "#2c4049"
+      },
+      "orange": {
+        "50": "#fff3e0",
+        "100": "#ffe0b2",
+        "200": "#ffcc80",
+        "300": "#ffb74d",
+        "400": "#ffa726",
+        "500": "#ff9800",
+        "600": "#fb8c00",
+        "700": "#f57c00",
+        "800": "#ef6c00",
+        "900": "#e65100",
+        "a100": "#ffd180",
+        "a200": "#ffab40",
+        "a400": "#ff9100",
+        "a700": "#ff6d00",
+        "inverse": "#FFF"
+      },
+      "deep-orange": {
+        "50": "#fbe9e7",
+        "100": "#ffccbc",
+        "200": "#ffab91",
+        "300": "#ff8a65",
+        "400": "#ff7043",
+        "500": "#ff5722",
+        "600": "#f4511e",
+        "700": "#e64a19",
+        "800": "#d84315",
+        "900": "#bf360c",
+        "a100": "#ff9e80",
+        "a200": "#ff6e40",
+        "a400": "#ff3d00",
+        "a700": "#dd2c00",
+        "inverse": "#FFF"
+      },
+      /*"brown": {
+        "50": "#efebe9",
+        "100": "#d7ccc8",
+        "200": "#bcaaa4",
+        "300": "#a1887f",
+        "400": "#8d6e63",
+        "500": "#795548",
+        "600": "#6d4c41",
+        "700": "#5d4037",
+        "800": "#4e342e",
+        "900": "#3e2723",
+        "inverse": "#FFF"
+      },*/
+      "grey": {
+        "50": "#fafafa",
+        "100": "#f5f5f5",
+        "200": "#eeeeee",
+        "300": "#e0e0e0",
+        "400": "#bdbdbd",
+        "500": "#9e9e9e",
+        "600": "#757575",
+        "700": "#616161",
+        "800": "#424242",
+        "900": "#212121",
+        "inverse": "#FFF"
+      },
+      "blue-grey": {
+        "50": "#eceff1",
+        "100": "#cfd8dc",
+        "200": "#b0bec5",
+        "300": "#90a4ae",
+        "400": "#78909c",
+        "500": "#607d8b",
+        "600": "#546e7a",
+        "700": "#455a64",
+        "800": "#37474f",
+        "900": "#263238",
+        "inverse": "#FFF"
+      }
+    }
   }
 
 
@@ -24,51 +339,8 @@
    * Init
    */
 
-  colorPicker();
+   generateButtons(colors.system);
-
+   pickColor('pink', colors.system['pink']);
-
-  /**
-   * Color Picker
-   */
-
-  function colorPicker() {
-
-    // Load colors
-    loadJson(colors.list, function(data) {
-      generateButtons(data);
-      pickColor('pink', data['pink']);
-    });
-
-  }
-
-
-
-  /**
-   * Load Json
-   *
-   * @param {url} json
-   * @param {function} callback
-   * @return {object}
-   */
-
-  function loadJson(json, callback) {
-    var request = new XMLHttpRequest();
-    request.open('GET', json, true);
-
-    request.onload = function() {
-      if (request.status >= 200 && request.status < 400) {
-        var data = JSON.parse(request.responseText);
-        callback(data);
-      }
-      else {
-        return 'error';
-      }
-    };
-    request.onerror = function() {
-      return 'error';
-    };
-    request.send();
-  }
 
 
 
@@ -210,7 +482,7 @@
                         + '@media only screen and (prefers-color-scheme: dark) {'
                         +    ':root:not([data-theme="light"]) [data-theme="generated"] {'
                         +     '--primary:' + data[600] + ';'
-                        +     '--h4:' + data[300] + ';'
+                        +     '--h4:' + data[400] + ';'
                         +     '--primary-hover:' + data[500] + ';'
                         +     '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
                         +     '--primary-inverse:' + data['inverse'] + ';'
@@ -219,7 +491,7 @@
 
                         + '[data-theme="dark"] [data-theme="generated"] {'
                         +   '--primary:' + data[600] + ';'
-                        +   '--h4:' + data[300] + ';'
+                        +   '--h4:' + data[500] + ';'
                         +   '--primary-hover:' + data[500] + ';'
                         +   '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
                         +   '--primary-inverse:' + data['inverse'] + ';'
@@ -248,7 +520,7 @@
    * @return {rgba}
    */
 
-  function hexToRgbA(hex, alpha){
+  function hexToRgbA(hex, alpha) {
     var c;
     if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
       c= hex.substring(1).split('');

docs/json/material-colors.json

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

docs/scss/components/_card-code.scss

@@ -12,7 +12,8 @@ article pre {
 
     @media (min-width: map-get($breakpoints, "sm")) {
       padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
-      margin-bottom: 0;
+      margin: -$spacing-block*map-get($spacing-factor, "sm");
+      margin-top: $spacing-block*map-get($spacing-factor, "sm");
     }
   }
 

scss/_variables.scss

@@ -28,7 +28,7 @@ $enable-classes: true !default;
 // ––––––––––––––––––––
 
 // Gutters and horizontals margins
-// For <body>, '.row' (grids), <nav>, <table>
+// For <body>, .grid, <nav>, <table>
 $spacing-gutter:       1rem !default;
 
 // Blocks verticals margins and paddings
@@ -41,7 +41,6 @@ $spacing-block:        2rem !default;
 $spacing-typography:   1.5rem !default;
 
 // Padding for <input> and <button>
-// (Vertical Horizontal)
 $spacing-input-button: .75rem 1rem !default;
 
 
@@ -66,7 +65,7 @@ $heading-weight: 700 !default;
 // Blocks
 // ––––––––––––––––––––
 
-// For <form> elements, <button>, card (<article>), inlined code, badge (<u>)
+// For <form> elements, <button>, <article>, <details> inlined code, tooltips
 $round: .25rem !default;
 
 
@@ -107,7 +106,7 @@ $breakpoints: (
 
 // Viewports
 $viewports: (
-// 'null' disable the viewport (max-width) on a breakpoint
+// 'null' disable the viewport on a breakpoint
   sm: 510px,
   md: 700px,
   lg: 920px,

scss/content/_form.scss

@@ -196,6 +196,11 @@ textarea {
   }
 }
 
+// Color
+input[type="color"] {
+  height: calc(3rem + 2px); // HACK
+}
+
 // Select
 select {
   // Unstyle the caret on `<select>`s in IE10+.

scss/pico.scss

@@ -14,15 +14,15 @@
 // Layout
 @import "layout/document";        // html
 @import "layout/sectioning";      // body, header, main, footer
-@import "layout/container";       // .container
+@import "layout/container";       // .container, .container-fluid
 @import "layout/section";         // main > section
 @import "layout/grid";            // .grid
 @import "layout/scroller";        // figure
 
 // Content
-@import "content/typography";     // a, headings, p, ul ...
+@import "content/typography";     // a, headings, p, ul, blockquote ...
 @import "content/form";           // label, input, select, ...
-@import "content/button";         // button, a[role=button]
+@import "content/button";         // button, a[role=button], ...
 @import "content/table";          // table, tr, td, ...
 @import "content/code";           // pre, code, ...
 @import "content/miscs";          // hr, progress, template, [hidden]