style(dropdowns)

Author: lucaslarroche

css/pico.slim.css

@@ -51,12 +51,13 @@ details[role="list"] {
       left: 0;
       margin: 0;
       padding: 0;
-      border: var(--border-width) solid var(--form-element-border-color);
+      border: var(--border-width) solid var(--dropdown-border-color);
       border-top: none;
       border-radius: var(--border-radius);
       border-top-right-radius: 0;
       border-top-left-radius: 0;
       background-color: var(--dropdown-background-color);
+      box-shadow: var(--card-box-shadow);
       color: var(--dropdown-color);
 
       li {

css/themes/default.css

@@ -113,9 +113,11 @@
   --card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
 
   // Dropdown (<details role="list">)
-  --dropdown-background-color: var(--card-background-color);
-  --dropdown-focus-background-color: #{rgba($grey-500, 0.05)};
-  --dropdown-color: var(--form-element-color);
+  --dropdown-background-color: #{$grey-900};
+  --dropdown-border-color: #{mix($grey-900, $grey-800)};
+  --dropdown-box-shadow: var(--card-box-shadow);
+  --dropdown-color: var(--color);
+  --dropdown-focus-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
 
   // Modal (<dialog>)
   --modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};

scss/components/_dropdown.scss

@@ -113,9 +113,11 @@
   --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
 
   // Dropdown (<details role="list">)
-  --dropdown-background-color: var(--card-background-color);
-  --dropdown-focus-background-color: #{mix($grey-50, $white)};
-  --dropdown-color: var(--form-element-color);
+  --dropdown-background-color: #{mix($grey-50, $white, 25%)};
+  --dropdown-border-color: #{mix($grey-100, $grey-50)};
+  --dropdown-box-shadow: var(--card-box-shadow);
+  --dropdown-color: var(--color);
+  --dropdown-focus-background-color: #{$grey-50};
 
   // Modal (<dialog>)
   --modal-overlay-background-color: #{rgba($grey-100, 0.8)};