fix(select): apply style to hovered selected option & expose missing …

…tokens Signed-off-by: astagnol <[email protected]>
ovh · Nov 12, 2024 · 5bb0165 · 5bb0165
1 parent 4da03d6
commit 5bb0165
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/packages/ods/src/components/select/src/components/ods-select/ods-select.scss b/packages/ods/src/components/select/src/components/ods-select/ods-select.scss
@@ -99,18 +99,22 @@ $select-padding-right: $select-caret-size + ($select-base-padding * 2);
         opacity: 1;
       }
 
-      &[data-selectable]:not(.selected):hover,
-      &.active:not(.selected) {
+      &[data-selectable]:hover,
+      &.active {
         background-color: var(--ods-color-primary-100);
       }
 
       &.selected {
-        background-color: var(--ods-color-primary-200);
+        background-color: var(--ods-color-primary-050);
 
         &:not([data-selectable]) {
           background: var(--ods-color-neutral-200);
           color: var(--ods-color-primary-000);
         }
+
+        &.active {
+          background-color: var(--ods-color-primary-100);
+        }
       }
     }
 

diff --git a/packages/themes/src/default/index.scss b/packages/themes/src/default/index.scss
@@ -42,6 +42,7 @@
   --ods-color-form-element-text-placeholder-default: #{var.$ods-color-form-element-text-placeholder-default};
   --ods-color-heading: #{var.$ods-color-heading};
   --ods-color-information-000: #{var.$ods-color-information-000};
+  --ods-color-information-050: #{var.$ods-color-information-050};
   --ods-color-information-100: #{var.$ods-color-information-100};
   --ods-color-information-200: #{var.$ods-color-information-200};
   --ods-color-information-300: #{var.$ods-color-information-300};
@@ -64,6 +65,7 @@
   --ods-color-neutral-900: #{var.$ods-color-neutral-900};
   --ods-color-new: #{var.$ods-color-new};
   --ods-color-primary-000: #{var.$ods-color-primary-000};
+  --ods-color-primary-050: #{var.$ods-color-primary-050};
   --ods-color-primary-100: #{var.$ods-color-primary-100};
   --ods-color-primary-200: #{var.$ods-color-primary-200};
   --ods-color-primary-300: #{var.$ods-color-primary-300};