Small fixes

- Lighter <mark>
- Better <hgroup>
- Edit hover for [type="range"]
- button.outline border-width dynamization
- Fix font-family for headings

css/pico.classless.css

@@ -25,7 +25,7 @@
   --h3-size:                         1.5rem;
   --h4-size:                         1.25rem;
   --h5-size:                         1.125rem;
-  --block-round:                     .25rem ;
+  --block-round:                     .25rem;
   --form-element-border-width:       1px;
   --form-element-outline-width:      3px;
   --checkbox-radio-border-width:     2px;
@@ -98,7 +98,7 @@
   --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
   --valid:                   #288a6a;
   --invalid:                 #b94646;
-  --mark:                    rgba(255, 223, 128, 0.5);
+  --mark:                    rgba(255, 223, 128, 0.33);
   --mark-text:               #2c3d49;
   --muted-text:              #7e8d98;
   --muted-background:        #edf0f3;
@@ -155,7 +155,7 @@
     --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
     --valid:                   #1f7a5c;
     --invalid:                 #943838;
-    --mark:                    rgba(255, 223, 128, 0.5);
+    --mark:                    rgba(255, 223, 128, 0.1875);
     --mark-text:               #FFF;
     --muted-text:              #73828c;
     --muted-background:        #23333e;
@@ -212,7 +212,7 @@
   --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
   --valid:                   #1f7a5c;
   --invalid:                 #943838;
-  --mark:                    rgba(255, 223, 128, 0.5);
+  --mark:                    rgba(255, 223, 128, 0.1875);
   --mark-text:               #FFF;
   --muted-text:              #73828c;
   --muted-background:        #23333e;
@@ -473,6 +473,7 @@ h5,
 h6 {
   margin-top: 0;
   margin-bottom: var(--spacing-typography);
+  font-family: var(--titles-font);
   font-weight: var(--titles-weight);
 }
 
@@ -599,6 +600,7 @@ hgroup * {
 
 hgroup > *:last-child {
   color: var(--muted-text);
+  font-family: unset;
   font-size: 1.125rem;
   font-weight: unset;
 }
@@ -827,6 +829,21 @@ a[role="button"][disabled] {
   pointer-events: none;
 }
 
+input[type="reset"] {
+  border: var(--button-border-width) solid var(--secondary-border);
+  background-color: var(--secondary);
+  color: var(--secondary-inverse);
+}
+
+input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus {
+  border-color: var(--secondary-hover-border);
+  background-color: var(--secondary-hover);
+}
+
+input[type="reset"]:focus {
+  box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
+}
+
 /**
  * Form elements
  */
@@ -1319,17 +1336,17 @@ label > textarea {
 
 [type="range"]:active::-webkit-slider-thumb {
   transform: scale(1.25);
-  background-color: var(--primary-hover);
+  background-color: var(--primary);
 }
 
 [type="range"]:active::-moz-range-thumb {
   transform: scale(1.25);
-  background-color: var(--primary-hover);
+  background-color: var(--primary);
 }
 
 [type="range"]:active::-ms-thumb {
   transform: scale(1.25);
-  background-color: var(--primary-hover);
+  background-color: var(--primary);
 }
 
 [type="range"]:focus {

css/pico.css

@@ -25,7 +25,7 @@
   --h3-size:                         1.5rem;
   --h4-size:                         1.25rem;
   --h5-size:                         1.125rem;
-  --block-round:                     .25rem ;
+  --block-round:                     .25rem;
   --form-element-border-width:       1px;
   --form-element-outline-width:      3px;
   --checkbox-radio-border-width:     2px;
@@ -98,7 +98,7 @@
   --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
   --valid:                   #288a6a;
   --invalid:                 #b94646;
-  --mark:                    rgba(255, 223, 128, 0.5);
+  --mark:                    rgba(255, 223, 128, 0.33);
   --mark-text:               #2c3d49;
   --muted-text:              #7e8d98;
   --muted-background:        #edf0f3;
@@ -155,7 +155,7 @@
     --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
     --valid:                   #1f7a5c;
     --invalid:                 #943838;
-    --mark:                    rgba(255, 223, 128, 0.5);
+    --mark:                    rgba(255, 223, 128, 0.1875);
     --mark-text:               #FFF;
     --muted-text:              #73828c;
     --muted-background:        #23333e;
@@ -212,7 +212,7 @@
   --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
   --valid:                   #1f7a5c;
   --invalid:                 #943838;
-  --mark:                    rgba(255, 223, 128, 0.5);
+  --mark:                    rgba(255, 223, 128, 0.1875);
   --mark-text:               #FFF;
   --muted-text:              #73828c;
   --muted-background:        #23333e;
@@ -555,6 +555,7 @@ h5,
 h6 {
   margin-top: 0;
   margin-bottom: var(--spacing-typography);
+  font-family: var(--titles-font);
   font-weight: var(--titles-weight);
 }
 
@@ -681,6 +682,7 @@ hgroup * {
 
 hgroup > *:last-child {
   color: var(--muted-text);
+  font-family: unset;
   font-size: 1.125rem;
   font-weight: unset;
 }
@@ -987,7 +989,7 @@ input[type="submit"].outline:focus,
 a.outline[role="button"]:hover,
 a.outline[role="button"]:active,
 a.outline[role="button"]:focus {
-  border: 1px solid var(--primary-hover-border);
+  border: var(--button-border-width) solid var(--primary-hover-border);
   color: var(--primary-hover);
 }
 
@@ -1010,7 +1012,7 @@ input[type="reset"].outline:focus,
 a[role="button"].outline.secondary:hover,
 a[role="button"].outline.secondary:active,
 a[role="button"].outline.secondary:focus {
-  border: 1px solid var(--secondary-hover-border);
+  border: var(--button-border-width) solid var(--secondary-hover-border);
   color: var(--secondary-hover);
 }
 
@@ -1033,7 +1035,7 @@ input[type="reset"].outline.contrast:focus,
 a[role="button"].outline.contrast:hover,
 a[role="button"].outline.contrast:active,
 a[role="button"].outline.contrast:focus {
-  border: 1px solid var(--contrast-hover-border);
+  border: var(--button-border-width) solid var(--contrast-hover-border);
   color: var(--contrast-hover);
 }
 
@@ -1552,17 +1554,17 @@ label > textarea {
 
 [type="range"]:active::-webkit-slider-thumb {
   transform: scale(1.25);
-  background-color: var(--primary-hover);
+  background-color: var(--primary);
 }
 
 [type="range"]:active::-moz-range-thumb {
   transform: scale(1.25);
-  background-color: var(--primary-hover);
+  background-color: var(--primary);
 }
 
 [type="range"]:active::-ms-thumb {
   transform: scale(1.25);
-  background-color: var(--primary-hover);
+  background-color: var(--primary);
 }
 
 [type="range"]:focus {

css/pico.fluid.classless.css

@@ -25,7 +25,7 @@
   --h3-size:                         1.5rem;
   --h4-size:                         1.25rem;
   --h5-size:                         1.125rem;
-  --block-round:                     .25rem ;
+  --block-round:                     .25rem;
   --form-element-border-width:       1px;
   --form-element-outline-width:      3px;
   --checkbox-radio-border-width:     2px;
@@ -98,7 +98,7 @@
   --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
   --valid:                   #288a6a;
   --invalid:                 #b94646;
-  --mark:                    rgba(255, 223, 128, 0.5);
+  --mark:                    rgba(255, 223, 128, 0.33);
   --mark-text:               #2c3d49;
   --muted-text:              #7e8d98;
   --muted-background:        #edf0f3;
@@ -155,7 +155,7 @@
     --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
     --valid:                   #1f7a5c;
     --invalid:                 #943838;
-    --mark:                    rgba(255, 223, 128, 0.5);
+    --mark:                    rgba(255, 223, 128, 0.1875);
     --mark-text:               #FFF;
     --muted-text:              #73828c;
     --muted-background:        #23333e;
@@ -212,7 +212,7 @@
   --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
   --valid:                   #1f7a5c;
   --invalid:                 #943838;
-  --mark:                    rgba(255, 223, 128, 0.5);
+  --mark:                    rgba(255, 223, 128, 0.1875);
   --mark-text:               #FFF;
   --muted-text:              #73828c;
   --muted-background:        #23333e;
@@ -469,6 +469,7 @@ h5,
 h6 {
   margin-top: 0;
   margin-bottom: var(--spacing-typography);
+  font-family: var(--titles-font);
   font-weight: var(--titles-weight);
 }
 
@@ -595,6 +596,7 @@ hgroup * {
 
 hgroup > *:last-child {
   color: var(--muted-text);
+  font-family: unset;
   font-size: 1.125rem;
   font-weight: unset;
 }
@@ -823,6 +825,21 @@ a[role="button"][disabled] {
   pointer-events: none;
 }
 
+input[type="reset"] {
+  border: var(--button-border-width) solid var(--secondary-border);
+  background-color: var(--secondary);
+  color: var(--secondary-inverse);
+}
+
+input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus {
+  border-color: var(--secondary-hover-border);
+  background-color: var(--secondary-hover);
+}
+
+input[type="reset"]:focus {
+  box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
+}
+
 /**
  * Form elements
  */
@@ -1315,17 +1332,17 @@ label > textarea {
 
 [type="range"]:active::-webkit-slider-thumb {
   transform: scale(1.25);
-  background-color: var(--primary-hover);
+  background-color: var(--primary);
 }
 
 [type="range"]:active::-moz-range-thumb {
   transform: scale(1.25);
-  background-color: var(--primary-hover);
+  background-color: var(--primary);
 }
 
 [type="range"]:active::-ms-thumb {
   transform: scale(1.25);
-  background-color: var(--primary-hover);
+  background-color: var(--primary);
 }
 
 [type="range"]:focus {

css/pico.slim.css

@@ -28,7 +28,7 @@
   --h3-size:                         1.5rem;
   --h4-size:                         1.25rem;
   --h5-size:                         1.125rem;
-  --block-round:                     .25rem ;
+  --block-round:                     .25rem;
   --form-element-border-width:       1px;
   --form-element-outline-width:      3px;
   --checkbox-radio-border-width:     2px;
@@ -101,7 +101,7 @@
   --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
   --valid:                   #288a6a;
   --invalid:                 #b94646;
-  --mark:                    rgba(255, 223, 128, 0.5);
+  --mark:                    rgba(255, 223, 128, 0.33);
   --mark-text:               #2c3d49;
   --muted-text:              #7e8d98;
   --muted-background:        #edf0f3;
@@ -158,7 +158,7 @@
     --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
     --valid:                   #1f7a5c;
     --invalid:                 #943838;
-    --mark:                    rgba(255, 223, 128, 0.5);
+    --mark:                    rgba(255, 223, 128, 0.1875);
     --mark-text:               #FFF;
     --muted-text:              #73828c;
     --muted-background:        #23333e;
@@ -215,7 +215,7 @@
   --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
   --valid:                   #1f7a5c;
   --invalid:                 #943838;
-  --mark:                    rgba(255, 223, 128, 0.5);
+  --mark:                    rgba(255, 223, 128, 0.1875);
   --mark-text:               #FFF;
   --muted-text:              #73828c;
   --muted-background:        #23333e;
@@ -493,6 +493,7 @@ h5,
 h6 {
   margin-top: 0;
   margin-bottom: var(--spacing-typography);
+  font-family: var(--titles-font);
   font-weight: var(--titles-weight);
 }
 
@@ -619,6 +620,7 @@ hgroup * {
 
 hgroup > *:last-child {
   color: var(--muted-text);
+  font-family: unset;
   font-size: 1.125rem;
   font-weight: unset;
 }

css/themes/default.css

@@ -21,7 +21,7 @@
   --h3-size:                         1.5rem;
   --h4-size:                         1.25rem;
   --h5-size:                         1.125rem;
-  --block-round:                     .25rem ;
+  --block-round:                     .25rem;
   --form-element-border-width:       1px;
   --form-element-outline-width:      3px;
   --checkbox-radio-border-width:     2px;
@@ -94,7 +94,7 @@
   --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
   --valid:                   #288a6a;
   --invalid:                 #b94646;
-  --mark:                    rgba(255, 223, 128, 0.5);
+  --mark:                    rgba(255, 223, 128, 0.33);
   --mark-text:               #2c3d49;
   --muted-text:              #7e8d98;
   --muted-background:        #edf0f3;
@@ -151,7 +151,7 @@
     --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
     --valid:                   #1f7a5c;
     --invalid:                 #943838;
-    --mark:                    rgba(255, 223, 128, 0.5);
+    --mark:                    rgba(255, 223, 128, 0.1875);
     --mark-text:               #FFF;
     --muted-text:              #73828c;
     --muted-background:        #23333e;
@@ -208,7 +208,7 @@
   --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
   --valid:                   #1f7a5c;
   --invalid:                 #943838;
-  --mark:                    rgba(255, 223, 128, 0.5);
+  --mark:                    rgba(255, 223, 128, 0.1875);
   --mark-text:               #FFF;
   --muted-text:              #73828c;
   --muted-background:        #23333e;

scss/content/_button-styles.scss

@@ -64,7 +64,7 @@
     &:hover,
     &:active,
     &:focus {
-      border: 1px solid var(--primary-hover-border);
+      border: var(--button-border-width) solid var(--primary-hover-border);
       color: var(--primary-hover);
     }
   }
@@ -82,7 +82,7 @@
     &:hover,
     &:active,
     &:focus {
-      border: 1px solid var(--secondary-hover-border);
+      border: var(--button-border-width)solid var(--secondary-hover-border);
       color: var(--secondary-hover);
     }
   }
@@ -100,8 +100,34 @@
     &:hover,
     &:active,
     &:focus {
-      border: 1px solid var(--contrast-hover-border);
+      border: var(--button-border-width) solid var(--contrast-hover-border);
       color: var(--contrast-hover);
     }
   }
 }
+
+@else {
+
+  // Button reset only for classless version
+  input[type="reset"] {
+    border: var(--button-border-width) solid var(--secondary-border);
+    background-color: var(--secondary);
+    color: var(--secondary-inverse);
+
+    &:hover,
+    &:active,
+    &:focus {
+      border-color: var(--secondary-hover-border);
+      background-color: var(--secondary-hover);
+    }
+
+    &:focus {
+      @if $enable-important {
+        box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
+      }
+      @else {
+        box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
+      }
+    }
+  }
+}

scss/content/_form-alt-input-types.scss

@@ -226,17 +226,17 @@
     // Slider Thumb
     &::-webkit-slider-thumb {
       transform: scale(1.25);
-      background-color: var(--primary-hover);
+      background-color: var(--primary);
     }
 
     &::-moz-range-thumb {
       transform: scale(1.25);
-      background-color: var(--primary-hover);
+      background-color: var(--primary);
     }
 
     &::-ms-thumb {
       transform: scale(1.25);
-      background-color: var(--primary-hover);
+      background-color: var(--primary);
     }
   }
 

scss/content/_typography.scss

@@ -141,6 +141,7 @@ h5,
 h6 {
   margin-top: 0;
   margin-bottom: var(--spacing-typography);
+  font-family: var(--titles-font);
   font-weight: var(--titles-weight);
 }
 
@@ -226,6 +227,7 @@ hgroup {
 
   > *:last-child {
     color: var(--muted-text);
+    font-family: unset;
     font-size: 1.125rem;
     font-weight: unset;
   }

scss/themes/default/_dark.scss

@@ -55,7 +55,7 @@
     // Utilities states
     --valid:                   #{$green-700};
     --invalid:                 #{$red-900};
-    --mark:                    #{rgba($amber-200, .5)};
+    --mark:                    #{rgba($amber-200, .1875)};
     --mark-text:               #{$white};
     --muted-text:              #{$grey-500};
     --muted-background:        #{mix($grey-800, $grey-900)};
@@ -138,7 +138,7 @@
   // Utilities states
   --valid:                   #{$green-700};
   --invalid:                 #{$red-900};
-  --mark:                    #{rgba($amber-200, .5)};
+  --mark:                    #{rgba($amber-200, .1875)};
   --mark-text:               #{$white};
   --muted-text:              #{$grey-500};
   --muted-background:        #{mix($grey-800, $grey-900)};

scss/themes/default/_light.scss

@@ -49,13 +49,13 @@
   --input-inverse:           var(--primary-inverse);
 
   // Button
-  --button-shadow:           0 0 0 0 rgba(0, 0, 0, 0);;
+  --button-shadow:           0 0 0 0 rgba(0, 0, 0, 0);
   --button-hover-shadow:     0 0 0 0 rgba(0, 0, 0, 0);
 
   // Utilities states
   --valid:                   #{$green-600};
   --invalid:                 #{$red-700};
-  --mark:                    #{rgba($amber-200, .5)};
+  --mark:                    #{rgba($amber-200, .33)};
   --mark-text:               #{$grey-800};
   --muted-text:              #{mix($grey-400, $grey-500)};
   --muted-background:        #{$grey-50};

scss/themes/default/_styles.scss

@@ -40,7 +40,7 @@
   // ––––––––––––––––––––
 
   // Blocks styles: <form> elements, <article>, inlined <code>, [data-tooltip]
-  --block-round:                     .25rem ;
+  --block-round:                     .25rem;
 
   // Form elements
   --form-element-border-width:       1px;