style: selection and focus color

Author: lucaslarroche

css/pico.classless.css

@@ -70,6 +70,8 @@
 
       &:focus-visible {
         &:not([role]) {
+          outline: var(#{$✨}outline-width) solid var(#{$✨}primary-focus);
+          outline-offset: calc(var(#{$✨}spacing, 1rem) * 0.5);
           color: var(#{$✨}primary);
         }
       }

css/pico.classless.css.map

@@ -104,6 +104,11 @@
       box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
     }
 
+    // Reset focus visible from accordion component
+    &:focus-visible {
+      outline: none;
+    }
+
     // Aria-invalid
     &[aria-invalid="false"] {
       #{$✨}form-element-border-color: var(#{$✨}form-element-valid-border-color);

css/pico.classless.min.css

@@ -55,7 +55,7 @@
       display: block;
       padding: var(#{$✨}spacing);
       background: none;
-      font-size: 14px;
+      font-size: inherit;
       line-height: var(#{$✨}line-height);
     }
   }

css/pico.css

@@ -30,7 +30,7 @@
     }
 
     &:focus-visible {
-      #{$✨}background-color: var(#{$✨}primary-focus);
+      box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
     }
 
     @if $enable-classes {
@@ -43,10 +43,6 @@
           #{$✨}color: var(#{$✨}secondary-hover);
           #{$✨}underline: var(#{$✨}secondary-underline-hover);
         }
-
-        &:focus-visible {
-          #{$✨}background-color: var(#{$✨}secondary-focus);
-        }
       }
 
       // Contrast
@@ -58,10 +54,6 @@
           #{$✨}color: var(#{$✨}contrast-hover);
           #{$✨}underline: var(#{$✨}contrast-underline-hover);
         }
-
-        &:focus-visible {
-          #{$✨}background-color: var(#{$✨}contrast-focus);
-        }
       }
     }
   }

css/pico.css.map

@@ -210,6 +210,6 @@
 
   // selection
   ::selection {
-    background-color: var(#{$✨}primary-focus);
+    background-color: var(#{$✨}text-selection-color);
   }
 }

css/pico.min.css

@@ -11,6 +11,9 @@
   // Text color
   #{$✨}color: #{$zinc-200};
 
+  // Text selection color
+  #{$✨}text-selection-color: #{rgba($azure-350, 0.1875)};
+
   // Muted colors
   #{$✨}muted-color: #{$zinc-450};
   #{$✨}muted-border-color: #{$slate-850};
@@ -24,7 +27,7 @@
   #{$✨}primary-background-hover: #{$azure-500};
   #{$✨}primary-border: var(#{$✨}primary-background);
   #{$✨}primary-border-hover: var(#{$✨}primary-background-hover);
-  #{$✨}primary-focus: #{rgba($azure-350, 0.25)};
+  #{$✨}primary-focus: #{rgba($azure-350, 0.375)};
   #{$✨}primary-inverse: #{$white};
 
   // Secondary colors

scss/components/_accordion.scss

@@ -11,6 +11,9 @@
   // Text color
   #{$✨}color: #{$zinc-750};
 
+  // Text selection color
+  #{$✨}text-selection-color: #{rgba($azure-400, 0.25)};
+
   // Muted colors
   #{$✨}muted-color: #{$zinc-550};
   #{$✨}muted-border-color: #{mix($slate-100, $slate-50)};
@@ -24,7 +27,7 @@
   #{$✨}primary-background-hover: #{$azure-600};
   #{$✨}primary-border: var(#{$✨}primary-background);
   #{$✨}primary-border-hover: var(#{$✨}primary-background-hover);
-  #{$✨}primary-focus: #{rgba($azure-400, 0.25)};
+  #{$✨}primary-focus: #{rgba($azure-400, 0.5)};
   #{$✨}primary-inverse: #{$white};
 
   // Secondary colors