Improvements

- Remove Increase headings font size inside <header>
- Add $enable-transitions in _variables.scss
- Bigger Checkbox, Radio, switch
- Remove borders on button

css/pico.classless.css

@@ -421,30 +421,6 @@ h6 {
   font-size: 1rem;
 }
 
-header h1 {
-  font-size: 3rem;
-}
-
-header h2 {
-  font-size: 2.625rem;
-}
-
-header h3 {
-  font-size: 2.25rem;
-}
-
-header h4 {
-  font-size: 1.875rem;
-}
-
-header h5 {
-  font-size: 1.6875rem;
-}
-
-header h6 {
-  font-size: 1.5rem;
-}
-
 hgroup {
   margin-bottom: 1.5rem;
 }
@@ -771,9 +747,10 @@ label > textarea {
  */
 [type="checkbox"],
 [type="radio"] {
+  font-size: 1.125rem;
   display: inline-block;
-  width: 1rem;
+  width: 1em;
-  height: 1rem;
+  height: 1em;
   margin-right: .375rem;
   margin-bottom: 0.125rem;
   vertical-align: middle;
@@ -815,17 +792,17 @@ label > textarea {
 }
 
 [type="checkbox"][role="switch"] {
-  width: 1.85rem;
+  width: 1.85em;
-  height: 1rem;
+  height: 1em;
   border: 2px solid var(--input-border);
-  border-radius: 1rem;
+  border-radius: 1em;
   background-color: var(--input-border);
-  line-height: 1rem;
+  line-height: 1em;
 }
 
 [type="checkbox"][role="switch"]:before {
   display: block;
-  width: calc(1rem - 4px);
+  width: calc(1em - 4px);
   height: 100%;
   border-radius: 50%;
   background-color: var(--primary-inverse);
@@ -841,7 +818,7 @@ label > textarea {
 
 [type="checkbox"][role="switch"]:checked::before {
   margin-right: 0;
-  margin-left: calc(0.925rem - 2px);
+  margin-left: calc(0.925em - 2px);
 }
 
 /**
@@ -890,8 +867,8 @@ a[role="button"] {
 button,
 input[type="submit"],
 a[role="button"] {
+  border: 1px solid transparent;
   padding: 0.75rem 1rem;
-  border: 1px solid var(--primary);
   border-radius: 0.25rem;
   outline: none;
   background-color: var(--primary);
@@ -901,7 +878,7 @@ a[role="button"] {
   line-height: 1.5;
   text-align: center;
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 button:hover, button:active, button:focus,
@@ -911,7 +888,6 @@ input[type="submit"]:focus,
 a[role="button"]:hover,
 a[role="button"]:active,
 a[role="button"]:focus {
-  border: 1px solid var(--primary-hover);
   background-color: var(--primary-hover);
 }
 

css/pico.css

@@ -502,30 +502,6 @@ h6 {
   font-size: 1rem;
 }
 
-header h1 {
-  font-size: 3rem;
-}
-
-header h2 {
-  font-size: 2.625rem;
-}
-
-header h3 {
-  font-size: 2.25rem;
-}
-
-header h4 {
-  font-size: 1.875rem;
-}
-
-header h5 {
-  font-size: 1.6875rem;
-}
-
-header h6 {
-  font-size: 1.5rem;
-}
-
 hgroup {
   margin-bottom: 1.5rem;
 }
@@ -852,9 +828,10 @@ label > textarea {
  */
 [type="checkbox"],
 [type="radio"] {
+  font-size: 1.125rem;
   display: inline-block;
-  width: 1rem;
+  width: 1em;
-  height: 1rem;
+  height: 1em;
   margin-right: .375rem;
   margin-bottom: 0.125rem;
   vertical-align: middle;
@@ -896,17 +873,17 @@ label > textarea {
 }
 
 [type="checkbox"][role="switch"] {
-  width: 1.85rem;
+  width: 1.85em;
-  height: 1rem;
+  height: 1em;
   border: 2px solid var(--input-border);
-  border-radius: 1rem;
+  border-radius: 1em;
   background-color: var(--input-border);
-  line-height: 1rem;
+  line-height: 1em;
 }
 
 [type="checkbox"][role="switch"]:before {
   display: block;
-  width: calc(1rem - 4px);
+  width: calc(1em - 4px);
   height: 100%;
   border-radius: 50%;
   background-color: var(--primary-inverse);
@@ -922,7 +899,7 @@ label > textarea {
 
 [type="checkbox"][role="switch"]:checked::before {
   margin-right: 0;
-  margin-left: calc(0.925rem - 2px);
+  margin-left: calc(0.925em - 2px);
 }
 
 /**
@@ -971,8 +948,8 @@ a[role="button"] {
 button,
 input[type="submit"],
 a[role="button"] {
+  border: 1px solid transparent;
   padding: 0.75rem 1rem;
-  border: 1px solid var(--primary);
   border-radius: 0.25rem;
   outline: none;
   background-color: var(--primary);
@@ -982,7 +959,7 @@ a[role="button"] {
   line-height: 1.5;
   text-align: center;
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 button:hover, button:active, button:focus,
@@ -992,7 +969,6 @@ input[type="submit"]:focus,
 a[role="button"]:hover,
 a[role="button"]:active,
 a[role="button"]:focus {
-  border: 1px solid var(--primary-hover);
   background-color: var(--primary-hover);
 }
 
@@ -1021,7 +997,6 @@ button.secondary,
 input.secondary[type="submit"],
 input[type="reset"],
 a.secondary[role="button"] {
-  border: 1px solid var(--secondary);
   background-color: var(--secondary);
   color: var(--secondary-inverse);
 }
@@ -1036,7 +1011,6 @@ input[type="reset"]:focus,
 a.secondary[role="button"]:hover,
 a.secondary[role="button"]:active,
 a.secondary[role="button"]:focus {
-  border: 1px solid var(--secondary-hover);
   background-color: var(--secondary-hover);
 }
 
@@ -1051,7 +1025,6 @@ button.contrast,
 input.contrast[type="submit"],
 input.contrast[type="reset"],
 a.contrast[role="button"] {
-  border: 1px solid var(--contrast);
   background-color: var(--contrast);
   color: var(--contrast-inverse);
 }
@@ -1066,7 +1039,6 @@ input.contrast[type="reset"]:focus,
 a.contrast[role="button"]:hover,
 a.contrast[role="button"]:active,
 a.contrast[role="button"]:focus {
-  border: 1px solid var(--contrast-hover);
   background-color: var(--contrast-hover);
 }
 
@@ -1080,7 +1052,6 @@ a.contrast[role="button"]:focus {
 button.outline,
 input.outline[type="submit"],
 a.outline[role="button"] {
-  border: 1px solid var(--primary);
   background-color: transparent;
   color: var(--primary);
 }
@@ -1092,7 +1063,6 @@ input.outline[type="submit"]:focus,
 a.outline[role="button"]:hover,
 a.outline[role="button"]:active,
 a.outline[role="button"]:focus {
-  border: 1px solid var(--primary-hover);
   color: var(--primary-hover);
 }
 
@@ -1100,7 +1070,6 @@ button.outline.secondary,
 input.outline.secondary[type="submit"],
 input.outline[type="reset"],
 a.outline.secondary[role="button"] {
-  border: 1px solid var(--secondary);
   background-color: transparent;
   color: var(--secondary);
 }
@@ -1115,7 +1084,6 @@ input.outline[type="reset"]:focus,
 a.outline.secondary[role="button"]:hover,
 a.outline.secondary[role="button"]:active,
 a.outline.secondary[role="button"]:focus {
-  border: 1px solid var(--secondary-hover);
   color: var(--secondary-hover);
 }
 
@@ -1130,7 +1098,6 @@ button.outline.contrast,
 input.outline.contrast[type="submit"],
 input.outline.contrast[type="reset"],
 a.outline.contrast[role="button"] {
-  border: 1px solid var(--contrast);
   background-color: transparent;
   color: var(--contrast);
 }
@@ -1145,7 +1112,6 @@ input.outline.contrast[type="reset"]:focus,
 a.outline.contrast[role="button"]:hover,
 a.outline.contrast[role="button"]:active,
 a.outline.contrast[role="button"]:focus {
-  border: 1px solid var(--contrast-hover);
   color: var(--contrast-hover);
 }
 

css/pico.fluid.classless.css

@@ -417,30 +417,6 @@ h6 {
   font-size: 1rem;
 }
 
-header h1 {
-  font-size: 3rem;
-}
-
-header h2 {
-  font-size: 2.625rem;
-}
-
-header h3 {
-  font-size: 2.25rem;
-}
-
-header h4 {
-  font-size: 1.875rem;
-}
-
-header h5 {
-  font-size: 1.6875rem;
-}
-
-header h6 {
-  font-size: 1.5rem;
-}
-
 hgroup {
   margin-bottom: 1.5rem;
 }
@@ -767,9 +743,10 @@ label > textarea {
  */
 [type="checkbox"],
 [type="radio"] {
+  font-size: 1.125rem;
   display: inline-block;
-  width: 1rem;
+  width: 1em;
-  height: 1rem;
+  height: 1em;
   margin-right: .375rem;
   margin-bottom: 0.125rem;
   vertical-align: middle;
@@ -811,17 +788,17 @@ label > textarea {
 }
 
 [type="checkbox"][role="switch"] {
-  width: 1.85rem;
+  width: 1.85em;
-  height: 1rem;
+  height: 1em;
   border: 2px solid var(--input-border);
-  border-radius: 1rem;
+  border-radius: 1em;
   background-color: var(--input-border);
-  line-height: 1rem;
+  line-height: 1em;
 }
 
 [type="checkbox"][role="switch"]:before {
   display: block;
-  width: calc(1rem - 4px);
+  width: calc(1em - 4px);
   height: 100%;
   border-radius: 50%;
   background-color: var(--primary-inverse);
@@ -837,7 +814,7 @@ label > textarea {
 
 [type="checkbox"][role="switch"]:checked::before {
   margin-right: 0;
-  margin-left: calc(0.925rem - 2px);
+  margin-left: calc(0.925em - 2px);
 }
 
 /**
@@ -886,8 +863,8 @@ a[role="button"] {
 button,
 input[type="submit"],
 a[role="button"] {
+  border: 1px solid transparent;
   padding: 0.75rem 1rem;
-  border: 1px solid var(--primary);
   border-radius: 0.25rem;
   outline: none;
   background-color: var(--primary);
@@ -897,7 +874,7 @@ a[role="button"] {
   line-height: 1.5;
   text-align: center;
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 button:hover, button:active, button:focus,
@@ -907,7 +884,6 @@ input[type="submit"]:focus,
 a[role="button"]:hover,
 a[role="button"]:active,
 a[role="button"]:focus {
-  border: 1px solid var(--primary-hover);
   background-color: var(--primary-hover);
 }
 

css/pico.slim.css

@@ -357,7 +357,6 @@ a {
   background-color: transparent;
   color: var(--primary);
   text-decoration: none;
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 a:hover, a:active, a:focus {
@@ -441,30 +440,6 @@ h6 {
   font-size: 1rem;
 }
 
-header h1 {
-  font-size: 3rem;
-}
-
-header h2 {
-  font-size: 2.625rem;
-}
-
-header h3 {
-  font-size: 2.25rem;
-}
-
-header h4 {
-  font-size: 1.875rem;
-}
-
-header h5 {
-  font-size: 1.6875rem;
-}
-
-header h6 {
-  font-size: 1.5rem;
-}
-
 hgroup {
   margin-bottom: 1.5rem;
 }
@@ -668,7 +643,6 @@ textarea {
   color: var(--text);
   font-weight: normal;
   vertical-align: middle;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 input::placeholder,
@@ -766,9 +740,10 @@ label > textarea {
  */
 [type="checkbox"],
 [type="radio"] {
+  font-size: 1.125rem;
   display: inline-block;
-  width: 1rem;
+  width: 1em;
-  height: 1rem;
+  height: 1em;
   margin-right: .375rem;
   margin-bottom: 0.125rem;
   vertical-align: middle;
@@ -810,22 +785,21 @@ label > textarea {
 }
 
 [type="checkbox"][role="switch"] {
-  width: 1.85rem;
+  width: 1.85em;
-  height: 1rem;
+  height: 1em;
   border: 2px solid var(--input-border);
-  border-radius: 1rem;
+  border-radius: 1em;
   background-color: var(--input-border);
-  line-height: 1rem;
+  line-height: 1em;
 }
 
 [type="checkbox"][role="switch"]:before {
   display: block;
-  width: calc(1rem - 4px);
+  width: calc(1em - 4px);
   height: 100%;
   border-radius: 50%;
   background-color: var(--primary-inverse);
   content: '';
-  transition: margin 0.1s ease-in-out;
 }
 
 [type="checkbox"][role="switch"]:checked {
@@ -836,7 +810,7 @@ label > textarea {
 
 [type="checkbox"][role="switch"]:checked::before {
   margin-right: 0;
-  margin-left: calc(0.925rem - 2px);
+  margin-left: calc(0.925em - 2px);
 }
 
 /**
@@ -885,8 +859,8 @@ a[role="button"] {
 button,
 input[type="submit"],
 a[role="button"] {
+  border: 1px solid transparent;
   padding: 0.75rem 1rem;
-  border: 1px solid var(--primary);
   border-radius: 0.25rem;
   outline: none;
   background-color: var(--primary);
@@ -896,7 +870,6 @@ a[role="button"] {
   line-height: 1.5;
   text-align: center;
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 button:hover, button:active, button:focus,
@@ -906,7 +879,6 @@ input[type="submit"]:focus,
 a[role="button"]:hover,
 a[role="button"]:active,
 a[role="button"]:focus {
-  border: 1px solid var(--primary-hover);
   background-color: var(--primary-hover);
 }
 

docs/index.html

@@ -524,7 +524,6 @@
 &lt;<b>p</b>&gt;Paragraph&lt;/<b>p</b>&gt;</code></pre>
 
             </article>
-            <p>Inside a <code>&lt;<b>header</b>&gt;</code> all headings are 50% bigger.</p>
             <p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is styled.</p>
             <article>
               <hgroup>

scss/_variables.scss

@@ -23,9 +23,12 @@ $enable-responsive-typography: true !default;
 // .classless version if disabled
 $enable-classes: true !default;
 
-// Enable validation states for inputs
+// Enable validation states for <input>
 $enable-input-states: true !default;
 
+// Enable transitions for <a>, <button>, <input>, <details>
+$enable-transitions: true !default;
+
 
 // Spacings
 // ––––––––––––––––––––

scss/components/_accordion.scss

@@ -39,7 +39,10 @@ details {
       background-repeat: no-repeat;
       background-size: 1rem auto;
       content: '';
-      transition: transform $transition;
+
+      @if $enable-transitions {
+        transition: transform $transition;
+      }
     }
 
     &:focus {

scss/content/_button-styles.scss

@@ -9,14 +9,12 @@
   input.secondary[type="submit"],
   input[type="reset"],
   a.secondary[role="button"] {
-    border: 1px solid var(--secondary);
     background-color: var(--secondary);
     color: var(--secondary-inverse);
 
     &:hover,
     &:active,
     &:focus {
-      border: 1px solid var(--secondary-hover);
       background-color: var(--secondary-hover);
     }
 
@@ -31,14 +29,12 @@
   input.contrast[type="submit"],
   input.contrast[type="reset"],
   a.contrast[role="button"] {
-    border: 1px solid var(--contrast);
     background-color: var(--contrast);
     color: var(--contrast-inverse);
 
     &:hover,
     &:active,
     &:focus {
-      border: 1px solid var(--contrast-hover);
       background-color: var(--contrast-hover);
     }
 
@@ -52,14 +48,12 @@
   button.outline,
   input.outline[type="submit"],
   a.outline[role="button"] {
-    border: 1px solid var(--primary);
     background-color: transparent;
     color: var(--primary);
 
     &:hover,
     &:active,
     &:focus {
-      border: 1px solid var(--primary-hover);
       color: var(--primary-hover);
     }
   }
@@ -70,14 +64,12 @@
   input.outline.secondary[type="submit"],
   input.outline[type="reset"],
   a.outline.secondary[role="button"] {
-    border: 1px solid var(--secondary);
     background-color: transparent;
     color: var(--secondary);
 
     &:hover,
     &:active,
     &:focus {
-      border: 1px solid var(--secondary-hover);
       color: var(--secondary-hover);
     }
 
@@ -92,14 +84,12 @@
   input.outline.contrast[type="submit"],
   input.outline.contrast[type="reset"],
   a.outline.contrast[role="button"] {
-    border: 1px solid var(--contrast);
     background-color: transparent;
     color: var(--contrast);
 
     &:hover,
     &:active,
     &:focus {
-      border: 1px solid var(--contrast-hover);
       color: var(--contrast-hover);
     }
 
@@ -107,5 +97,4 @@
       box-shadow: 0 0 0 0.2rem var(--contrast-focus);
     }
   }
-
 }

scss/content/_button.scss

@@ -60,8 +60,8 @@ a[role="button"] {
 button,
 input[type="submit"],
 a[role="button"] {
+  border: 1px solid transparent;
   padding: $spacing-input-button;
-  border: 1px solid var(--primary);
   border-radius: $round;
   outline: none;
   background-color: var(--primary);
@@ -71,16 +71,17 @@ a[role="button"] {
   line-height: $line-height;
   text-align: center;
   cursor: pointer;
-  transition:
+
-    background-color $transition,
+  @if $enable-transitions {
-    border-color $transition,
+    transition:
-    color $transition,
+      background-color $transition,
-    box-shadow $transition;
+      color $transition,
+      box-shadow $transition;
+  }
 
   &:hover,
   &:active,
   &:focus {
-    border: 1px solid var(--primary-hover);
     background-color: var(--primary-hover);
   }
 

scss/content/_form-checkbox-radio.scss

@@ -5,9 +5,10 @@
 // Checkboxes & Radios
 [type="checkbox"],
 [type="radio"] {
+  font-size: 1.125rem;
   display: inline-block;
-  width: 1rem;
+  width: 1em;
-  height: 1rem;
+  height: 1em;
   margin-right: .375rem;
   margin-bottom: $spacing-label-input;
   vertical-align: middle;
@@ -51,8 +52,8 @@
 [type="checkbox"][role="switch"] {
 
   // Config
-  $switch-height:      1rem;
+  $switch-height:      1em;
-  $switch-width:       1.85rem;
+  $switch-width:       1.85em;
   $switch-border:      2px;
   $switch-transition:  .1s ease-in-out;
 
@@ -71,7 +72,10 @@
     border-radius: 50%;
     background-color: var(--primary-inverse);
     content: '';
-    transition: margin $switch-transition;
+
+    @if $enable-transitions {
+      transition: margin $switch-transition;
+    }
   }
 
   &:checked {

scss/content/_form.scss

@@ -122,12 +122,15 @@ textarea {
   color: var(--text);
   font-weight: normal;
   vertical-align: middle;
-  transition:
+
-    background-color $transition,
+  @if $enable-transitions {
-    border-color $transition,
+    transition:
-    color $transition,
+      background-color $transition,
-    border-color $transition,
+      border-color $transition,
-    box-shadow $transition;
+      color $transition,
+      border-color $transition,
+      box-shadow $transition;
+    }
 
   &::placeholder {
     color: var(--muted-text);

scss/content/_typography.scss

@@ -67,11 +67,14 @@ a {
   background-color: transparent; // 1
   color: var(--primary);
   text-decoration: none;
-  transition:
+
-    background-color $transition,
+  @if $enable-transitions {
-    color $transition,
+    transition:
-    text-decoration $transition,
+      background-color $transition,
-    box-shadow $transition;
+      color $transition,
+      text-decoration $transition,
+      box-shadow $transition;
+  }
 
   &:hover,
   &:active,
@@ -169,33 +172,6 @@ h6 {
   font-size: 1rem;
 }
 
-// Increase headings font size inside <header>
-header {
-  h1 {
-    font-size: 2rem*1.5;
-  }
-
-  h2 {
-    font-size: 1.75rem*1.5;
-  }
-
-  h3 {
-    font-size: 1.5rem*1.5;
-  }
-
-  h4 {
-    font-size: 1.25rem*1.5;
-  }
-
-  h5 {
-    font-size: 1.125rem*1.5;
-  }
-
-  h6 {
-    font-size: 1rem*1.5;
-  }
-}
-
 // Multi-level heading
 hgroup {
   margin-bottom: $spacing-typography;

scss/pico.slim.scss

@@ -13,9 +13,12 @@
 // Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
 $enable-responsive-spacings: false;
 
-// Enable validation states for inputs
+// Enable validation states for <input>
 $enable-input-states: false;
 
+// Enable transitions for <a>, <button>, <input>, <details>
+$enable-transitions: false;
+
 
 // Pico Lib
 // --------------------