fix(ld-option-internal): disabled text color

emdgroup-liquid · Nov 15, 2021 · d6db1bc · d6db1bc
1 parent 8e8681a
commit d6db1bc
Showing 1 changed file with 19 additions and 14 deletions.
diff --git a/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.css b/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.css
@@ -1,28 +1,34 @@
+:host(:not(:last-child)) {
+  .ld-option-internal {
+    border-bottom: solid var(--ld-option-border-col) var(--ld-sp-1);
+  }
+}
+
 .ld-option-internal {
   /* layout */
   --ld-option-padding-left-sm: 0.625rem;
   --ld-option-padding-left-lg: 0.875rem;
 
   /* colors */
-  --ld-option-col: var(--ld-col-neutral-900);
-  --ld-option-col-disabled: var(--ld-col-neutral-disabled);
-  --ld-option-col-bg: var(--ld-col-wht);
-  --ld-option-col-border: var(--ld-col-neutral-100);
+  --ld-option-bg-col: var(--ld-col-wht);
+  --ld-option-border-col: var(--ld-col-neutral-100);
+  --ld-option-disabled-text-col: var(--ld-col-neutral-100);
+  --ld-option-text-col: var(--ld-col-neutral-900);
 
   /* themable colors */
   --ld-option-thm-col: var(--ld-thm-primary);
   --ld-option-thm-col-hover: var(--ld-thm-primary-hover);
   --ld-option-thm-col-focus: var(--ld-thm-primary-focus);
   --ld-option-thm-col-active: var(--ld-thm-primary-active);
-  --ld-option-thm-col-bg-hover: var(--ld-thm-primary-highlight);
-  --ld-option-thm-col-bg-focus: var(--ld-thm-primary-highlight);
-  --ld-option-thm-col-bg-active: var(--ld-thm-primary-highlight);
+  --ld-option-thm-bg-col-hover: var(--ld-thm-primary-highlight);
+  --ld-option-thm-bg-col-focus: var(--ld-thm-primary-highlight);
+  --ld-option-thm-bg-col-active: var(--ld-thm-primary-highlight);
 
   /*outline: none;*/
   display: flex;
   position: relative;
-  color: var(--ld-option-col);
-  background-color: var(--ld-option-col-bg);
+  color: var(--ld-option-text-col);
+  background-color: var(--ld-option-bg-col);
   padding: var(--ld-sp-8) var(--ld-sp-12);
   font: var(--ld-typo-label-m);
   min-height: 2.5rem;
@@ -31,7 +37,6 @@
   touch-action: manipulation;
   border: 0;
   -webkit-touch-callout: none;
-  border-bottom: solid var(--ld-option-col-border) var(--ld-sp-1);
   box-sizing: border-box;
 
   &--sm {
@@ -66,7 +71,7 @@
   }
 
   &[aria-disabled='true'] {
-    color: var(--ld-option-col-disabled);
+    color: var(--ld-option-disabled-text-col);
   }
 
   /* Pseudo element for focus outline */
@@ -91,15 +96,15 @@
     }
 
     &:where(:focus:focus-visible) {
-      background-color: var(--ld-option-thm-col-bg-focus);
+      background-color: var(--ld-option-thm-bg-col-focus);
 
       :where(.ld-option-internal__check) {
         color: var(--ld-option-thm-col-focus);
       }
     }
     @media (hover: hover) {
       &:where(:hover) {
-        background-color: var(--ld-option-thm-col-bg-hover);
+        background-color: var(--ld-option-thm-bg-col-hover);
 
         :where(.ld-option-internal__check) {
           color: var(--ld-option-thm-col-hover);
@@ -108,7 +113,7 @@
     }
     &:where(:active),
     &:where(:active:focus-visible) {
-      background-color: var(--ld-option-thm-col-bg-active);
+      background-color: var(--ld-option-thm-bg-col-active);
 
       :where(.ld-option-internal__check) {
         color: var(--ld-option-thm-col-active);