fix: more style tweaks

src/svelte/components/Picker/Picker.html

@@ -1,6 +1,6 @@
 <svelte:options tag={null} />
 <section
-  class="lep-picker {resolvedDarkMode ? 'lep-dark' : ''}"
+  class="lep-picker {resolvedDarkMode ? 'lep-dark' : 'lep-light'}"
   aria-label={i18n.regionLabel}
   bind:this={rootElement}
   style="--lep-num-columns: {numColumns};"

src/svelte/components/Picker/Picker.scss

@@ -38,7 +38,6 @@
 button.lep-nav-button.lep-emoji {
   flex: 1;
   padding: 0.5rem 0;
-  outline-offset: -1px; // fix focus ring getting cropped
 }
 
 .lep-tabpanel {
@@ -49,7 +48,6 @@ button.lep-nav-button.lep-emoji {
 
 button.lep-tabpanel-emoji.lep-emoji {
   padding: 0.5rem 0;
-  outline-offset: -1px; // fix focus ring getting cropped
 }
 
 input.lep-search {

src/svelte/styles/global.scss

@@ -1,26 +1,13 @@
+@import './variables.scss';
+
 .lep-picker {
   &, &::before, &::after, & *, *::before, *::after {
     box-sizing: border-box;
   }
 
-  $border: #999;
-  $bg: #fff;
-  $placeholder: #999;
-  --lep-input-border-color: #{$border};
-  --lep-background-color: #{$bg};
-  --lep-placeholder-color: #{$placeholder};
-  --lep-hover-background-color: #{darken($bg, 15%)};
-  --lep-active-background-color: #{darken($bg, 10%)};
-
-  &.lep-dark {
-    $border: #ccc;
-    $bg: #111;
-    $placeholder: #ccc;
-    --lep-input-border-color: #{$border};
-    --lep-background-color: #{$bg};
-    --lep-placeholder-color: #{$placeholder};
-    --lep-hover-background-color: #{lighten($bg, 15%)};
-    --lep-active-background-color: #{lighten($bg, 20%)};
+  &:focus, & *:focus {
+    outline: var(--lep-outline-color) solid 2px;
+    outline-offset: -2px; // fix focus ring getting cropped
   }
 
   contain: content;

src/svelte/styles/variables.scss

@@ -0,0 +1,36 @@
+@mixin vars($dark) {
+  $border: #999 !default;
+  $bg: #fff !default;
+  $placeholder: #999 !default;
+  $outline: rgb(43, 110, 180) !default; // Chrome default focus color
+
+  @if $dark {
+    $border: #ccc;
+    $bg: #111;
+    $placeholder: #ccc;
+    $outline: #fff;
+  }
+
+  --lep-input-border-color: #{$border};
+  --lep-background-color: #{$bg};
+  --lep-placeholder-color: #{$placeholder};
+  --lep-outline-color: #{$outline};
+
+  @if $dark {
+    --lep-hover-background-color: #{lighten($bg, 15%)};
+    --lep-active-background-color: #{lighten($bg, 20%)};
+  } @else {
+    --lep-hover-background-color: #{darken($bg, 15%)};
+    --lep-active-background-color: #{darken($bg, 10%)};
+  }
+}
+
+.lep-picker {
+  &.lep-light {
+    @include vars(false);
+  }
+
+  &.lep-dark {
+    @include vars(true);
+  }
+}