Update styles for various components

Added some new colors and fixed spacing

components/FilterModal/index.scss

@@ -1,3 +1,10 @@
-.Dialog .Filter.DialogContent {
+.Dialog {
-  overflow: hidden;
+  .Filter.DialogContent {
+    overflow: hidden;
+  }
+
+  .DialogFooter .Buttons .Button.Blended {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }

components/Slider/index.scss

@@ -27,12 +27,18 @@
   display: block;
   width: 20px;
   height: 20px;
-  background-color: white;
+  background-color: var(--slider-thumb-bg);
-  box-shadow: 0 2px 10px var(--button-bg);
+  box-shadow: 0 2px 10px var(--slider-thumb-shadow);
   border-radius: 10px;
 
   &:hover {
-    background-color: darken(white, 10%);
+    background-color: var(--slider-thumb-bg-hover);
+    box-shadow: 0 2px 10px var(--slider-thumb-shadow-hover);
+    cursor: grab;
+  }
+
+  &:active {
+    cursor: grabbing;
   }
 
   &:focus {

components/Switch/index.scss

@@ -9,8 +9,10 @@
   width: 58px;
   height: $height;
 
-  &:focus {
+  &:focus,
-    box-shadow: 0 0 0 2px $grey-15;
+  &:focus-visible {
+    box-shadow: 0 0 0 2px var(--accent-blue-focus);
+    outline: none;
   }
 
   &[data-state='checked'] {

components/TableField/index.scss

@@ -4,6 +4,7 @@
   gap: $unit-2x;
   grid-template-columns: 1fr auto;
   justify-content: space-between;
+  padding: $unit-half 0;
   width: 100%;
 
   @include breakpoint(phone) {
@@ -12,6 +13,10 @@
     flex-direction: column;
   }
 
+  &:hover .Left .Info h3 {
+    color: var(--accent-blue);
+  }
+
   .Left {
     display: flex;
     flex-direction: row;

styles/themes.scss

@@ -21,6 +21,8 @@
   --separator-bg: #{$separator--bg--light};
 
   --accent-blue: #{$accent--blue--light};
+  --accent-blue-focus: #{$accent--blue--light--focus};
+
   --accent-yellow: #{$accent--yellow--light};
 
   --selected-item-bg: #{$selected--item--bg--light};
@@ -64,6 +66,12 @@
   --select-separator: #{$select--separator--light};
   --option-bg-hover: #{$option--bg--light--hover};
 
+  // Light - Sliders
+  --slider-thumb-bg: #{$slider--thumb--bg--light};
+  --slider-thumb-bg-hover: #{$slider--thumb--bg--light--hover};
+  --slider-thumb-shadow: #{$slider--thumb--shadow--light};
+  --slider-thumb-shadow-hover: #{$slider--thumb--shadow--light--hover};
+
   // Light - About
   --link-item-bg: #{$link--item--bg--light};
   --link-item-image-color: #{$link--item--bg--image--light};
@@ -163,6 +171,8 @@
   --separator-bg: #{$separator--bg--dark};
 
   --accent-blue: #{$accent--blue--dark};
+  --accent-blue-focus: #{$accent--blue--dark--focus};
+
   --accent-yellow: #{$accent--yellow--dark};
 
   --selected-item-bg: #{$selected--item--bg--dark};
@@ -207,6 +217,12 @@
   --select-separator: #{$select--separator--dark};
   --option-bg-hover: #{$option--bg--dark--hover};
 
+  // Dark - Sliders
+  --slider-thumb-bg: #{$slider--thumb--bg--dark};
+  --slider-thumb-bg-hover: #{$slider--thumb--bg--dark--hover};
+  --slider-thumb-shadow: #{$slider--thumb--shadow--dark};
+  --slider-thumb-shadow-hover: #{$slider--thumb--shadow--dark--hover};
+
   // Dark - About
   --link-item-bg: #{$link--item--bg--dark};
   --link-item-image-color: #{$link--item--bg--image--dark};

styles/variables.scss

@@ -80,7 +80,9 @@ $yellow: #c89d39;
 $error: #d13a3a;
 
 $accent--blue--light: #275dc5;
+$accent--blue--light--focus: #0c398d;
 $accent--blue--dark: #6195f4;
+$accent--blue--dark--focus: #275dc5;
 
 $accent--yellow--light: #c89d39;
 $accent--yellow--dark: #f9cc64;
@@ -224,6 +226,17 @@ $grid--rep--hover--dark: $grey-10;
 $grid--border--color--light: $grey-80;
 $grid--border--color--dark: $grey-40;
 
+// Color Definitions: Slider
+$slider--thumb--bg--light: $grey-100;
+$slider--thumb--bg--dark: $grey-100;
+$slider--thumb--bg--light--hover: $grey-95;
+$slider--thumb--bg--dark--hover: $grey-95;
+$slider--thumb--shadow--light: $grey-70;
+$slider--thumb--shadow--dark: $grey-05;
+$slider--thumb--shadow--light--hover: $grey-50;
+$slider--thumb--shadow--dark--hover: $grey-00;
+
+// Color Definitions: Switch
 $switch--nub--bg--light: $grey-80;
 $switch--nub--bg--dark: $grey-30;