fix(ld-select): theming for ld-select css component

emdgroup-liquid · Jul 16, 2021 · b540fe9 · b540fe9
1 parent 240fed8
commit b540fe9
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 30 deletions.
diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -474,6 +474,13 @@
       }
     }
   }
+  :where(.ld-select:not(ld-select)):not(.ld-select--invalid) {
+    :where(select:not(:disabled)) {
+      &:where(:focus:focus-visible) {
+        box-shadow: inset 0 0 0 0.1rem var(--ld-col-rp-default);
+      }
+    }
+  }
 
   :where(.ld-select:not([disabled]):not([aria-disabled='true'])) {
     .ld-select__selection-label-bg {
@@ -512,39 +519,53 @@
   }
 
   :where(.ld-select:not([disabled]):not([aria-disabled='true']):not(.ld-select--invalid)) {
+    &.ld-select--ghost {
+      :where(select:not(:disabled)),
+      :where(.ld-select__btn-trigger) {
+        @media (hover: hover) {
+          &:where(:hover:not(:focus)) {
+            background-color: var(--ld-col-rp-a01);
+          }
+        }
+        &:where(:active),
+        &:where(:active:focus-visible) {
+          background-color: var(--ld-col-rp-a02);
+        }
+      }
+    }
+
+    :where(select:not(:disabled)),
     :where(.ld-select__btn-trigger) {
       .ld-select__icon,
+      + .ld-select__icon,
       [slot='icon'] {
         color: var(--ld-col-rp-default);
       }
 
-      &:where(:focus:focus-visible) {
-        .ld-select__icon,
-        [slot='icon'] {
-          color: var(--ld-col-rp-focus);
-        }
-      }
       @media (hover: hover) {
         &:where(:hover) {
-          &.ld-select__btn-trigger--ghost:not(:focus) {
-            background-color: var(--ld-col-rp-a01);
-          }
-
           .ld-select__icon,
+          + .ld-select__icon,
           [slot='icon'] {
             color: var(--ld-col-rp-hover);
           }
         }
       }
+      &:where(:focus:focus-visible) {
+        box-shadow: inset 0 0 0 0.1rem var(--ld-col-rp-default);
+
+        .ld-select__icon,
+        + .ld-select__icon,
+        [slot='icon'] {
+          color: var(--ld-col-rp-focus);
+        }
+      }
       &:where(:active),
       &:where(:active:focus-visible) {
-        &:where(.ld-select__btn-trigger--ghost) {
-          background-color: var(--ld-col-rp-a02);
-        }
-
         .ld-select__icon,
+        + .ld-select__icon,
         [slot='icon'] {
-          color: var(--ld-col-rp-active);
+          color: var(--ld-col-rb-active);
         }
       }
     }
@@ -560,6 +581,13 @@
       }
     }
   }
+  :where(.ld-select:not(ld-select)):not(.ld-select--invalid) {
+    :where(select:not(:disabled)) {
+      &:where(:focus:focus-visible) {
+        box-shadow: inset 0 0 0 0.1rem var(--ld-thm-tea-bg-primary);
+      }
+    }
+  }
 
   :where(.ld-select:not([disabled]):not([aria-disabled='true'])) {
     .ld-select__selection-label-bg {
@@ -598,38 +626,51 @@
   }
 
   :where(.ld-select:not([disabled]):not([aria-disabled='true']):not(.ld-select--invalid)) {
+    &.ld-select--ghost {
+      :where(select:not(:disabled)),
+      :where(.ld-select__btn-trigger) {
+        @media (hover: hover) {
+          &:where(:hover:not(:focus)) {
+            background-color: var(--ld-col-rg-a01);
+          }
+        }
+        &:where(:active),
+        &:where(:active:focus-visible) {
+          background-color: var(--ld-col-rg-a02);
+        }
+      }
+    }
+
+    :where(select:not(:disabled)),
     :where(.ld-select__btn-trigger) {
-      .ld-select__btn-clear,
       .ld-select__icon,
+      + .ld-select__icon,
       [slot='icon'] {
         color: var(--ld-thm-tea-bg-primary);
       }
 
-      &:where(:focus:focus-visible) {
-        .ld-select__icon,
-        [slot='icon'] {
-          color: var(--ld-col-rg-focus);
-        }
-      }
       @media (hover: hover) {
         &:where(:hover) {
-          &.ld-select__btn-trigger--ghost:not(:focus) {
-            background-color: var(--ld-col-rg-a01);
-          }
-
           .ld-select__icon,
+          + .ld-select__icon,
           [slot='icon'] {
             color: var(--ld-col-rg-hover);
           }
         }
       }
+      &:where(:focus:focus-visible) {
+        box-shadow: inset 0 0 0 0.1rem var(--ld-thm-tea-bg-primary);
+
+        .ld-select__icon,
+        + .ld-select__icon,
+        [slot='icon'] {
+          color: var(--ld-col-rg-focus);
+        }
+      }
       &:where(:active),
       &:where(:active:focus-visible) {
-        &:where(.ld-select__btn-trigger--ghost) {
-          background-color: var(--ld-col-rg-a02);
-        }
-
         .ld-select__icon,
+        + .ld-select__icon,
         [slot='icon'] {
           color: var(--ld-col-rg-active);
         }

diff --git a/src/liquid/components/ld-select/readme.md b/src/liquid/components/ld-select/readme.md
@@ -11,6 +11,10 @@ permalink: components/ld-select/
 
 > 🚧 **Attention**: This component is work in progress. 🚧
 
+The `ld-select` component represents a control that provides a menu of options. This control can be used in forms to accept a selection of these options from the user.
+
+The feature set of the `ld-select` Web Component differs from its CSS Component counterpart. While the first offers more display and input modes, the latter is a lightweight alternative, which only styles the native HTML select element.
+
 ## Examples
 
 ### Single select mode