From 75cfc082d8de03d487263d29d5dca7940b71af76 Mon Sep 17 00:00:00 2001
From: Lucas Larroche <lucas@larroche.com>
Date: Sun, 23 Jan 2022 20:52:08 +0700
Subject: [PATCH] style(dropdowns)

---
 css/pico.slim.css               | 24 +++++++++++++++---------
 css/themes/default.css          | 24 +++++++++++++++---------
 scss/components/_dropdown.scss  |  3 ++-
 scss/themes/default/_dark.scss  |  8 +++++---
 scss/themes/default/_light.scss |  8 +++++---
 5 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/css/pico.slim.css b/css/pico.slim.css
index 8b3647be..1a1403e8 100644
--- a/css/pico.slim.css
+++ b/css/pico.slim.css
@@ -209,9 +209,11 @@ kbd {
     0 0.125rem 2rem rgba(27, 40, 50, 0.08),
     0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
   --card-sectionning-background-color: #fbfbfc;
-  --dropdown-background-color: var(--card-background-color);
-  --dropdown-focus-background-color: #f6f8f9;
-  --dropdown-color: var(--form-element-color);
+  --dropdown-background-color: #fbfbfc;
+  --dropdown-border-color: #e1e6eb;
+  --dropdown-box-shadow: var(--card-box-shadow);
+  --dropdown-color: var(--color);
+  --dropdown-focus-background-color: #edf0f3;
   --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
   --progress-background-color: #d5dce2;
   --progress-color: var(--primary);
@@ -309,9 +311,11 @@ kbd {
       0 0.125rem 2rem rgba(0, 0, 0, 0.12),
       0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
     --card-sectionning-background-color: #18232c;
-    --dropdown-background-color: var(--card-background-color);
-    --dropdown-focus-background-color: rgba(115, 130, 140, 0.05);
-    --dropdown-color: var(--form-element-color);
+    --dropdown-background-color: #1b2832;
+    --dropdown-border-color: #24333e;
+    --dropdown-box-shadow: var(--card-box-shadow);
+    --dropdown-color: var(--color);
+    --dropdown-focus-background-color: rgba(36, 51, 62, 0.75);
     --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
     --progress-background-color: #24333e;
     --progress-color: var(--primary);
@@ -408,9 +412,11 @@ kbd {
     0 0.125rem 2rem rgba(0, 0, 0, 0.12),
     0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
   --card-sectionning-background-color: #18232c;
-  --dropdown-background-color: var(--card-background-color);
-  --dropdown-focus-background-color: rgba(115, 130, 140, 0.05);
-  --dropdown-color: var(--form-element-color);
+  --dropdown-background-color: #1b2832;
+  --dropdown-border-color: #24333e;
+  --dropdown-box-shadow: var(--card-box-shadow);
+  --dropdown-color: var(--color);
+  --dropdown-focus-background-color: rgba(36, 51, 62, 0.75);
   --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
   --progress-background-color: #24333e;
   --progress-color: var(--primary);
diff --git a/css/themes/default.css b/css/themes/default.css
index 038741d4..cfe26058 100644
--- a/css/themes/default.css
+++ b/css/themes/default.css
@@ -273,9 +273,11 @@ kbd {
     0 0.125rem 2rem rgba(27, 40, 50, 0.08),
     0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
   --card-sectionning-background-color: #fbfbfc;
-  --dropdown-background-color: var(--card-background-color);
-  --dropdown-focus-background-color: #f6f8f9;
-  --dropdown-color: var(--form-element-color);
+  --dropdown-background-color: #fbfbfc;
+  --dropdown-border-color: #e1e6eb;
+  --dropdown-box-shadow: var(--card-box-shadow);
+  --dropdown-color: var(--color);
+  --dropdown-focus-background-color: #edf0f3;
   --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
   --progress-background-color: #d5dce2;
   --progress-color: var(--primary);
@@ -373,9 +375,11 @@ kbd {
       0 0.125rem 2rem rgba(0, 0, 0, 0.12),
       0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
     --card-sectionning-background-color: #18232c;
-    --dropdown-background-color: var(--card-background-color);
-    --dropdown-focus-background-color: rgba(115, 130, 140, 0.05);
-    --dropdown-color: var(--form-element-color);
+    --dropdown-background-color: #1b2832;
+    --dropdown-border-color: #24333e;
+    --dropdown-box-shadow: var(--card-box-shadow);
+    --dropdown-color: var(--color);
+    --dropdown-focus-background-color: rgba(36, 51, 62, 0.75);
     --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
     --progress-background-color: #24333e;
     --progress-color: var(--primary);
@@ -472,9 +476,11 @@ kbd {
     0 0.125rem 2rem rgba(0, 0, 0, 0.12),
     0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
   --card-sectionning-background-color: #18232c;
-  --dropdown-background-color: var(--card-background-color);
-  --dropdown-focus-background-color: rgba(115, 130, 140, 0.05);
-  --dropdown-color: var(--form-element-color);
+  --dropdown-background-color: #1b2832;
+  --dropdown-border-color: #24333e;
+  --dropdown-box-shadow: var(--card-box-shadow);
+  --dropdown-color: var(--color);
+  --dropdown-focus-background-color: rgba(36, 51, 62, 0.75);
   --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
   --progress-background-color: #24333e;
   --progress-color: var(--primary);
diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss
index 19d3a9bc..1229f6bf 100644
--- a/scss/components/_dropdown.scss
+++ b/scss/components/_dropdown.scss
@@ -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 {
diff --git a/scss/themes/default/_dark.scss b/scss/themes/default/_dark.scss
index d13bbf72..6c8c665c 100644
--- a/scss/themes/default/_dark.scss
+++ b/scss/themes/default/_dark.scss
@@ -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)};
diff --git a/scss/themes/default/_light.scss b/scss/themes/default/_light.scss
index 26f1c985..dcb45eec 100644
--- a/scss/themes/default/_light.scss
+++ b/scss/themes/default/_light.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)};