From 9e1c6042384cb53834629edbffc0ad8da66ab661 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <yggg@users.noreply.github.com>
Date: Tue, 28 May 2019 16:33:53 +0200
Subject: [PATCH] feat(select): more border and icon theme properties (#1468)

---
 .../components/select/_select-filled.scss     | 24 ++++++++
 .../theme/components/select/_select-hero.scss | 24 ++++++++
 .../components/select/_select-outline.scss    | 27 +++++++++
 .../select/_select.component.theme.scss       |  8 +++
 .../components/select/select.component.scss   |  2 +-
 .../components/select/select.component.ts     | 55 ++++++++++++++++++
 .../theme/styles/themes/_mapping.scss         | 56 +++++++++++++++++++
 7 files changed, 195 insertions(+), 1 deletion(-)

diff --git a/src/framework/theme/components/select/_select-filled.scss b/src/framework/theme/components/select/_select-filled.scss
index dab3eb7e60..564e1490f2 100644
--- a/src/framework/theme/components/select/_select-filled.scss
+++ b/src/framework/theme/components/select/_select-filled.scss
@@ -20,9 +20,21 @@
       color: nb-theme(select-filled-disabled-text-color);
       background-color: nb-theme(select-filled-disabled-background-color);
       border-color: nb-theme(select-filled-disabled-border-color);
+
+      nb-icon {
+        color: nb-theme(select-filled-disabled-icon-color);
+      }
+    }
+
+    nb-icon {
+      color: nb-theme(select-filled-icon-color);
     }
   }
 
+  .options-list-container.appearance-filled {
+    border-color: nb-theme(select-options-list-filled-border-color);
+  }
+
   @each $size in nb-get-sizes() {
     nb-select.appearance-filled.size-#{$size} .select-button {
       padding: nb-theme(select-filled-#{$size}-padding);
@@ -60,7 +72,19 @@
         background-color: nb-theme(select-filled-#{$status}-disabled-background-color);
         border-color: nb-theme(select-filled-#{$status}-disabled-border-color);
         color: nb-theme(select-filled-#{$status}-disabled-text-color);
+
+        nb-icon {
+          color: nb-theme(select-filled-#{$status}-disabled-icon-color);
+        }
+      }
+
+      nb-icon {
+        color: nb-theme(select-filled-#{$status}-icon-color);
       }
     }
+
+    .options-list-container.appearance-filled.status-#{$status} {
+      border-color: nb-theme(select-options-list-filled-#{$status}-border-color);
+    }
   }
 }
diff --git a/src/framework/theme/components/select/_select-hero.scss b/src/framework/theme/components/select/_select-hero.scss
index 125c89c091..802dba1291 100644
--- a/src/framework/theme/components/select/_select-hero.scss
+++ b/src/framework/theme/components/select/_select-hero.scss
@@ -20,9 +20,21 @@
       color: nb-theme(select-hero-disabled-text-color);
       background-color: nb-theme(select-hero-disabled-background-color);
       background-image: none;
+
+      nb-icon {
+        color: nb-theme(select-hero-disabled-icon-color);
+      }
+    }
+
+    nb-icon {
+      color: nb-theme(select-hero-icon-color);
     }
   }
 
+  .options-list-container.appearance-hero {
+    border-color: nb-theme(select-options-list-hero-border-color);
+  }
+
   @each $size in nb-get-sizes() {
     nb-select.appearance-hero.size-#{$size} .select-button {
       padding: nb-theme(select-hero-#{$size}-padding);
@@ -63,7 +75,19 @@
         color: nb-theme(select-hero-#{$status}-disabled-text-color);
         background-color: nb-theme(select-hero-#{$status}-disabled-background-color);
         background-image: none;
+
+        nb-icon {
+          color: nb-theme(select-hero-#{$status}-disabled-icon-color);
+        }
+      }
+
+      nb-icon {
+        color: nb-theme(select-hero-#{$status}-icon-color);
       }
     }
+
+    .options-list-container.appearance-hero.status-#{$status} {
+      border-color: nb-theme(select-options-list-hero-#{$status}-border-color);
+    }
   }
 }
diff --git a/src/framework/theme/components/select/_select-outline.scss b/src/framework/theme/components/select/_select-outline.scss
index e6ee328c4a..c4961e9b22 100644
--- a/src/framework/theme/components/select/_select-outline.scss
+++ b/src/framework/theme/components/select/_select-outline.scss
@@ -10,6 +10,17 @@
       color: nb-theme(select-outline-placeholder-text-color);
     }
 
+    &.top {
+      border-top-color: nb-theme(select-outline-adjacent-border-color);
+      border-top-style: nb-theme(select-outline-adjacent-border-style);
+      border-top-width: nb-theme(select-outline-adjacent-border-width);
+    }
+    &.bottom {
+      border-bottom-color: nb-theme(select-outline-adjacent-border-color);
+      border-bottom-style: nb-theme(select-outline-adjacent-border-style);
+      border-bottom-width: nb-theme(select-outline-adjacent-border-width);
+    }
+
     &:focus {
       border-color: nb-theme(select-outline-focus-border-color);
     }
@@ -20,7 +31,19 @@
       color: nb-theme(select-outline-disabled-text-color);
       background-color: nb-theme(select-outline-disabled-background-color);
       border-color: nb-theme(select-outline-disabled-border-color);
+
+      nb-icon {
+        color: nb-theme(select-outline-disabled-icon-color);
+      }
     }
+
+    nb-icon {
+      color: nb-theme(select-outline-icon-color);
+    }
+  }
+
+  .options-list-container.appearance-outline {
+    border-color: nb-theme(select-options-list-outline-border-color);
   }
 
   @each $status in nb-get-statuses() {
@@ -36,6 +59,10 @@
         border-color: nb-theme(select-outline-#{$status}-disabled-border-color);
       }
     }
+
+    .options-list-container.appearance-outline.status-#{$status} {
+      border-color: nb-theme(select-options-list-outline-#{$status}-border-color);
+    }
   }
 
   @each $size in nb-get-sizes() {
diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss
index b73378170f..f58eb04927 100644
--- a/src/framework/theme/components/select/_select.component.theme.scss
+++ b/src/framework/theme/components/select/_select.component.theme.scss
@@ -34,6 +34,14 @@
     border-width: nb-theme(select-options-list-border-width);
     overflow: hidden;
 
+    &.top {
+      border-bottom: none;
+    }
+
+    &.bottom {
+      border-top: none;
+    }
+
     & > .options-list {
       margin: 0;
       padding: 0;
diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss
index 794a05c237..88b719a33d 100644
--- a/src/framework/theme/components/select/select.component.scss
+++ b/src/framework/theme/components/select/select.component.scss
@@ -58,6 +58,6 @@ nb-icon {
   @include nb-component-animation(transform);
 }
 
-.select-button.open nb-icon {
+:host(.open) nb-icon {
   transform: translateY(-50%) rotate(180deg);
 }
diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts
index 961b83612d..939bc55c1c 100644
--- a/src/framework/theme/components/select/select.component.ts
+++ b/src/framework/theme/components/select/select.component.ts
@@ -141,6 +141,9 @@ export class NbSelectLabelComponent {
  * select-min-width:
  * select-options-list-max-height:
  * select-options-list-shadow:
+ * select-options-list-border-color:
+ * select-options-list-border-style:
+ * select-options-list-border-width:
  * select-outline-width:
  * select-outline-color:
  * select-text-font-family:
@@ -178,12 +181,14 @@ export class NbSelectLabelComponent {
  * select-outline-border-color:
  * select-outline-border-style:
  * select-outline-border-width:
+ * select-outline-icon-color:
  * select-outline-text-color:
  * select-outline-placeholder-text-color:
  * select-outline-focus-border-color:
  * select-outline-hover-border-color:
  * select-outline-disabled-background-color:
  * select-outline-disabled-border-color:
+ * select-outline-disabled-icon-color:
  * select-outline-disabled-text-color:
  * select-outline-tiny-padding:
  * select-outline-small-padding:
@@ -215,21 +220,37 @@ export class NbSelectLabelComponent {
  * select-option-outline-medium-padding:
  * select-option-outline-large-padding:
  * select-option-outline-giant-padding:
+ * select-outline-adjacent-border-color:
+ * select-outline-adjacent-border-style:
+ * select-outline-adjacent-border-width:
+ * select-outline-primary-adjacent-border-color:
+ * select-outline-success-adjacent-border-color:
+ * select-outline-info-adjacent-border-color:
+ * select-outline-warning-adjacent-border-color:
+ * select-outline-danger-adjacent-border-color:
  * select-group-option-outline-tiny-start-padding:
  * select-group-option-outline-small-start-padding:
  * select-group-option-outline-medium-start-padding:
  * select-group-option-outline-large-start-padding:
  * select-group-option-outline-giant-start-padding:
+ * select-options-list-outline-border-color:
+ * select-options-list-outline-primary-border-color:
+ * select-options-list-outline-success-border-color:
+ * select-options-list-outline-info-border-color:
+ * select-options-list-outline-warning-border-color:
+ * select-options-list-outline-danger-border-color:
  * select-filled-background-color:
  * select-filled-border-color:
  * select-filled-border-style:
  * select-filled-border-width:
+ * select-filled-icon-color:
  * select-filled-text-color:
  * select-filled-placeholder-text-color:
  * select-filled-focus-border-color:
  * select-filled-hover-border-color:
  * select-filled-disabled-background-color:
  * select-filled-disabled-border-color:
+ * select-filled-disabled-icon-color:
  * select-filled-disabled-text-color:
  * select-filled-tiny-padding:
  * select-filled-small-padding:
@@ -238,6 +259,7 @@ export class NbSelectLabelComponent {
  * select-filled-giant-padding:
  * select-filled-primary-background-color:
  * select-filled-primary-border-color:
+ * select-filled-primary-icon-color:
  * select-filled-primary-text-color:
  * select-filled-primary-placeholder-text-color:
  * select-filled-primary-focus-background-color:
@@ -246,9 +268,11 @@ export class NbSelectLabelComponent {
  * select-filled-primary-hover-border-color:
  * select-filled-primary-disabled-background-color:
  * select-filled-primary-disabled-border-color:
+ * select-filled-primary-disabled-icon-color:
  * select-filled-primary-disabled-text-color:
  * select-filled-success-background-color:
  * select-filled-success-border-color:
+ * select-filled-success-icon-color:
  * select-filled-success-text-color:
  * select-filled-success-placeholder-text-color:
  * select-filled-success-focus-background-color:
@@ -257,9 +281,11 @@ export class NbSelectLabelComponent {
  * select-filled-success-hover-border-color:
  * select-filled-success-disabled-background-color:
  * select-filled-success-disabled-border-color:
+ * select-filled-success-disabled-icon-color:
  * select-filled-success-disabled-text-color:
  * select-filled-info-background-color:
  * select-filled-info-border-color:
+ * select-filled-info-icon-color:
  * select-filled-info-text-color:
  * select-filled-info-placeholder-text-color:
  * select-filled-info-focus-background-color:
@@ -268,9 +294,11 @@ export class NbSelectLabelComponent {
  * select-filled-info-hover-border-color:
  * select-filled-info-disabled-background-color:
  * select-filled-info-disabled-border-color:
+ * select-filled-info-disabled-icon-color:
  * select-filled-info-disabled-text-color:
  * select-filled-warning-background-color:
  * select-filled-warning-border-color:
+ * select-filled-warning-icon-color:
  * select-filled-warning-text-color:
  * select-filled-warning-placeholder-text-color:
  * select-filled-warning-focus-background-color:
@@ -279,9 +307,11 @@ export class NbSelectLabelComponent {
  * select-filled-warning-hover-border-color:
  * select-filled-warning-disabled-background-color:
  * select-filled-warning-disabled-border-color:
+ * select-filled-warning-disabled-icon-color:
  * select-filled-warning-disabled-text-color:
  * select-filled-danger-background-color:
  * select-filled-danger-border-color:
+ * select-filled-danger-icon-color:
  * select-filled-danger-text-color:
  * select-filled-danger-placeholder-text-color:
  * select-filled-danger-focus-background-color:
@@ -290,6 +320,7 @@ export class NbSelectLabelComponent {
  * select-filled-danger-hover-border-color:
  * select-filled-danger-disabled-background-color:
  * select-filled-danger-disabled-border-color:
+ * select-filled-danger-disabled-icon-color:
  * select-filled-danger-disabled-text-color:
  * select-option-filled-tiny-padding:
  * select-group-option-filled-tiny-padding-start:
@@ -301,15 +332,23 @@ export class NbSelectLabelComponent {
  * select-group-option-filled-large-padding-start:
  * select-option-filled-giant-padding:
  * select-group-option-filled-giant-padding-start:
+ * select-options-list-filled-border-color:
+ * select-options-list-filled-primary-border-color:
+ * select-options-list-filled-success-border-color:
+ * select-options-list-filled-info-border-color:
+ * select-options-list-filled-warning-border-color:
+ * select-options-list-filled-danger-border-color:
  * select-hero-background-color:
  * select-hero-border-color:
  * select-hero-border-style:
  * select-hero-border-width:
+ * select-hero-icon-color:
  * select-hero-text-color:
  * select-hero-placeholder-text-color:
  * select-hero-focus-border-color:
  * select-hero-hover-border-color:
  * select-hero-disabled-background-color:
+ * select-hero-disabled-icon-color:
  * select-hero-disabled-text-color:
  * select-hero-tiny-padding:
  * select-hero-small-padding:
@@ -318,6 +357,7 @@ export class NbSelectLabelComponent {
  * select-hero-giant-padding:
  * select-hero-primary-left-background-color:
  * select-hero-primary-right-background-color:
+ * select-hero-primary-icon-color:
  * select-hero-primary-text-color:
  * select-hero-primary-placeholder-text-color:
  * select-hero-primary-focus-left-background-color:
@@ -325,9 +365,11 @@ export class NbSelectLabelComponent {
  * select-hero-primary-hover-left-background-color:
  * select-hero-primary-hover-right-background-color:
  * select-hero-primary-disabled-background-color:
+ * select-hero-primary-disabled-icon-color:
  * select-hero-primary-disabled-text-color:
  * select-hero-success-left-background-color:
  * select-hero-success-right-background-color:
+ * select-hero-success-icon-color:
  * select-hero-success-text-color:
  * select-hero-success-placeholder-text-color:
  * select-hero-success-focus-left-background-color:
@@ -335,9 +377,11 @@ export class NbSelectLabelComponent {
  * select-hero-success-hover-left-background-color:
  * select-hero-success-hover-right-background-color:
  * select-hero-success-disabled-background-color:
+ * select-hero-success-disabled-icon-color:
  * select-hero-success-disabled-text-color:
  * select-hero-info-left-background-color:
  * select-hero-info-right-background-color:
+ * select-hero-info-icon-color:
  * select-hero-info-text-color:
  * select-hero-info-placeholder-text-color:
  * select-hero-info-focus-left-background-color:
@@ -345,9 +389,11 @@ export class NbSelectLabelComponent {
  * select-hero-info-hover-left-background-color:
  * select-hero-info-hover-right-background-color:
  * select-hero-info-disabled-background-color:
+ * select-hero-info-disabled-icon-color:
  * select-hero-info-disabled-text-color:
  * select-hero-warning-left-background-color:
  * select-hero-warning-right-background-color:
+ * select-hero-warning-icon-color:
  * select-hero-warning-text-color:
  * select-hero-warning-placeholder-text-color:
  * select-hero-warning-focus-left-background-color:
@@ -355,9 +401,11 @@ export class NbSelectLabelComponent {
  * select-hero-warning-hover-left-background-color:
  * select-hero-warning-hover-right-background-color:
  * select-hero-warning-disabled-background-color:
+ * select-hero-warning-disabled-icon-color:
  * select-hero-warning-disabled-text-color:
  * select-hero-danger-left-background-color:
  * select-hero-danger-right-background-color:
+ * select-hero-danger-icon-color:
  * select-hero-danger-text-color:
  * select-hero-danger-placeholder-text-color:
  * select-hero-danger-focus-left-background-color:
@@ -365,6 +413,7 @@ export class NbSelectLabelComponent {
  * select-hero-danger-hover-left-background-color:
  * select-hero-danger-hover-right-background-color:
  * select-hero-danger-disabled-background-color:
+ * select-hero-danger-disabled-icon-color:
  * select-hero-danger-disabled-text-color:
  * select-option-hero-tiny-padding:
  * select-group-option-hero-tiny-padding-start:
@@ -376,6 +425,12 @@ export class NbSelectLabelComponent {
  * select-group-option-hero-large-padding-start:
  * select-option-hero-giant-padding:
  * select-group-option-hero-giant-padding-start:
+ * select-options-list-hero-border-color:
+ * select-options-list-hero-primary-border-color:
+ * select-options-list-hero-success-border-color:
+ * select-options-list-hero-info-border-color:
+ * select-options-list-hero-warning-border-color:
+ * select-options-list-hero-danger-border-color:
  * */
 @Component({
   selector: 'nb-select',
diff --git a/src/framework/theme/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss
index 84330935a2..289297af4d 100644
--- a/src/framework/theme/styles/themes/_mapping.scss
+++ b/src/framework/theme/styles/themes/_mapping.scss
@@ -1327,6 +1327,7 @@ $eva-mapping: (
   select-outline-border-color: border-basic-color-3,
   select-outline-border-style: solid,
   select-outline-border-width: 1px,
+  select-outline-icon-color: text-basic-color,
   select-outline-text-color: text-basic-color,
   select-outline-placeholder-text-color: text-hint-color,
 
@@ -1334,6 +1335,7 @@ $eva-mapping: (
   select-outline-hover-border-color: color-primary-hover,
   select-outline-disabled-background-color: background-basic-color-2,
   select-outline-disabled-border-color: border-basic-color-2,
+  select-outline-disabled-icon-color: text-disabled-color,
   select-outline-disabled-text-color: text-disabled-color,
 
   select-outline-tiny-padding: 0.1875rem 1.125rem,
@@ -1373,16 +1375,33 @@ $eva-mapping: (
   select-option-outline-large-padding: select-outline-large-padding,
   select-option-outline-giant-padding: select-outline-giant-padding,
 
+  select-outline-adjacent-border-color: select-outline-border-color,
+  select-outline-adjacent-border-style: select-outline-border-style,
+  select-outline-adjacent-border-width: select-outline-border-width,
+  select-outline-primary-adjacent-border-color: select-outline-primary-border-color,
+  select-outline-success-adjacent-border-color: select-outline-success-border-color,
+  select-outline-info-adjacent-border-color: select-outline-info-border-color,
+  select-outline-warning-adjacent-border-color: select-outline-warning-border-color,
+  select-outline-danger-adjacent-border-color: select-outline-danger-border-color,
+
   select-group-option-outline-tiny-start-padding: 1.25rem,
   select-group-option-outline-small-start-padding: 1.75rem,
   select-group-option-outline-medium-start-padding: 2.25rem,
   select-group-option-outline-large-start-padding: 2.25rem,
   select-group-option-outline-giant-start-padding: 2.75rem,
 
+  select-options-list-outline-border-color: border-primary-color-2,
+  select-options-list-outline-primary-border-color: color-primary-500,
+  select-options-list-outline-success-border-color: color-success-500,
+  select-options-list-outline-info-border-color: color-info-500,
+  select-options-list-outline-warning-border-color: color-warning-500,
+  select-options-list-outline-danger-border-color: color-danger-500,
+
   select-filled-background-color: background-basic-color-2,
   select-filled-border-color: border-basic-color-3,
   select-filled-border-style: solid,
   select-filled-border-width: 1px,
+  select-filled-icon-color: text-basic-color,
   select-filled-text-color: text-basic-color,
   select-filled-placeholder-text-color: text-basic-color,
 
@@ -1390,6 +1409,7 @@ $eva-mapping: (
   select-filled-hover-border-color: color-primary-hover,
   select-filled-disabled-background-color: background-basic-color-2,
   select-filled-disabled-border-color: border-basic-color-2,
+  select-filled-disabled-icon-color: text-disabled-color,
   select-filled-disabled-text-color: text-disabled-color,
 
   select-filled-tiny-padding: 0.1875rem 1.125rem,
@@ -1400,6 +1420,7 @@ $eva-mapping: (
 
   select-filled-primary-background-color: color-primary-default,
   select-filled-primary-border-color: color-primary-default,
+  select-filled-primary-icon-color: text-control-color,
   select-filled-primary-text-color: text-control-color,
   select-filled-primary-placeholder-text-color: text-control-color,
 
@@ -1409,10 +1430,12 @@ $eva-mapping: (
   select-filled-primary-hover-border-color: color-primary-hover,
   select-filled-primary-disabled-background-color: background-basic-color-2,
   select-filled-primary-disabled-border-color: color-primary-disabled,
+  select-filled-primary-disabled-icon-color: text-primary-disabled-color,
   select-filled-primary-disabled-text-color: text-primary-disabled-color,
 
   select-filled-success-background-color: color-success-default,
   select-filled-success-border-color: color-success-default,
+  select-filled-success-icon-color: text-control-color,
   select-filled-success-text-color: text-control-color,
   select-filled-success-placeholder-text-color: text-control-color,
 
@@ -1422,10 +1445,12 @@ $eva-mapping: (
   select-filled-success-hover-border-color: color-success-hover,
   select-filled-success-disabled-background-color: background-basic-color-2,
   select-filled-success-disabled-border-color: color-success-disabled,
+  select-filled-success-disabled-icon-color: text-success-disabled-color,
   select-filled-success-disabled-text-color: text-success-disabled-color,
 
   select-filled-info-background-color: color-info-default,
   select-filled-info-border-color: color-info-default,
+  select-filled-info-icon-color: text-control-color,
   select-filled-info-text-color: text-control-color,
   select-filled-info-placeholder-text-color: text-control-color,
 
@@ -1435,10 +1460,12 @@ $eva-mapping: (
   select-filled-info-hover-border-color: color-info-hover,
   select-filled-info-disabled-background-color: background-basic-color-2,
   select-filled-info-disabled-border-color: color-info-disabled,
+  select-filled-info-disabled-icon-color: text-info-disabled-color,
   select-filled-info-disabled-text-color: text-info-disabled-color,
 
   select-filled-warning-background-color: color-warning-default,
   select-filled-warning-border-color: color-warning-default,
+  select-filled-warning-icon-color: text-control-color,
   select-filled-warning-text-color: text-control-color,
   select-filled-warning-placeholder-text-color: text-control-color,
 
@@ -1448,10 +1475,12 @@ $eva-mapping: (
   select-filled-warning-hover-border-color: color-warning-hover,
   select-filled-warning-disabled-background-color: background-basic-color-2,
   select-filled-warning-disabled-border-color: color-warning-disabled,
+  select-filled-warning-disabled-icon-color: text-warning-disabled-color,
   select-filled-warning-disabled-text-color: text-warning-disabled-color,
 
   select-filled-danger-background-color: color-danger-default,
   select-filled-danger-border-color: color-danger-default,
+  select-filled-danger-icon-color: text-control-color,
   select-filled-danger-text-color: text-control-color,
   select-filled-danger-placeholder-text-color: text-control-color,
 
@@ -1461,6 +1490,7 @@ $eva-mapping: (
   select-filled-danger-hover-border-color: color-danger-hover,
   select-filled-danger-disabled-background-color: background-basic-color-2,
   select-filled-danger-disabled-border-color: color-danger-disabled,
+  select-filled-danger-disabled-icon-color: text-danger-disabled-color,
   select-filled-danger-disabled-text-color: text-danger-disabled-color,
 
   select-option-filled-tiny-padding: select-filled-tiny-padding,
@@ -1474,16 +1504,25 @@ $eva-mapping: (
   select-option-filled-giant-padding: select-filled-giant-padding,
   select-group-option-filled-giant-padding-start: 2.75rem,
 
+  select-options-list-filled-border-color: border-primary-color-2,
+  select-options-list-filled-primary-border-color: color-primary-500,
+  select-options-list-filled-success-border-color: color-success-500,
+  select-options-list-filled-info-border-color: color-info-500,
+  select-options-list-filled-warning-border-color: color-warning-500,
+  select-options-list-filled-danger-border-color: color-danger-500,
+
   select-hero-background-color: background-basic-color-2,
   select-hero-border-color: border-basic-color-3,
   select-hero-border-style: solid,
   select-hero-border-width: 0,
+  select-hero-icon-color: text-basic-color,
   select-hero-text-color: text-basic-color,
   select-hero-placeholder-text-color: text-basic-color,
 
   select-hero-focus-border-color: color-primary-focus,
   select-hero-hover-border-color: color-primary-hover,
   select-hero-disabled-background-color: background-basic-color-2,
+  select-hero-disabled-icon-color: text-disabled-color,
   select-hero-disabled-text-color: text-disabled-color,
 
   select-hero-tiny-padding: 0.1875rem 1.125rem,
@@ -1494,6 +1533,7 @@ $eva-mapping: (
 
   select-hero-primary-left-background-color: color-primary-400,
   select-hero-primary-right-background-color: color-primary-default,
+  select-hero-primary-icon-color: text-control-color,
   select-hero-primary-text-color: text-control-color,
   select-hero-primary-placeholder-text-color: text-control-color,
 
@@ -1502,10 +1542,12 @@ $eva-mapping: (
   select-hero-primary-hover-left-background-color: color-primary-300,
   select-hero-primary-hover-right-background-color: color-primary-400,
   select-hero-primary-disabled-background-color: background-basic-color-2,
+  select-hero-primary-disabled-icon-color: text-primary-disabled-color,
   select-hero-primary-disabled-text-color: text-primary-disabled-color,
 
   select-hero-success-left-background-color: color-success-400,
   select-hero-success-right-background-color: color-success-default,
+  select-hero-success-icon-color: text-control-color,
   select-hero-success-text-color: text-control-color,
   select-hero-success-placeholder-text-color: text-control-color,
 
@@ -1514,10 +1556,12 @@ $eva-mapping: (
   select-hero-success-hover-left-background-color: color-success-300,
   select-hero-success-hover-right-background-color: color-success-400,
   select-hero-success-disabled-background-color: background-basic-color-2,
+  select-hero-success-disabled-icon-color: text-success-disabled-color,
   select-hero-success-disabled-text-color: text-success-disabled-color,
 
   select-hero-info-left-background-color: color-info-400,
   select-hero-info-right-background-color: color-info-default,
+  select-hero-info-icon-color: text-control-color,
   select-hero-info-text-color: text-control-color,
   select-hero-info-placeholder-text-color: text-control-color,
 
@@ -1526,10 +1570,12 @@ $eva-mapping: (
   select-hero-info-hover-left-background-color: color-info-300,
   select-hero-info-hover-right-background-color: color-info-400,
   select-hero-info-disabled-background-color: background-basic-color-2,
+  select-hero-info-disabled-icon-color: text-info-disabled-color,
   select-hero-info-disabled-text-color: text-info-disabled-color,
 
   select-hero-warning-left-background-color: color-warning-400,
   select-hero-warning-right-background-color: color-warning-default,
+  select-hero-warning-icon-color: text-control-color,
   select-hero-warning-text-color: text-control-color,
   select-hero-warning-placeholder-text-color: text-control-color,
 
@@ -1538,10 +1584,12 @@ $eva-mapping: (
   select-hero-warning-hover-left-background-color: color-warning-300,
   select-hero-warning-hover-right-background-color: color-warning-400,
   select-hero-warning-disabled-background-color: background-basic-color-2,
+  select-hero-warning-disabled-icon-color: text-warning-disabled-color,
   select-hero-warning-disabled-text-color: text-warning-disabled-color,
 
   select-hero-danger-left-background-color: color-danger-400,
   select-hero-danger-right-background-color: color-danger-default,
+  select-hero-danger-icon-color: text-control-color,
   select-hero-danger-text-color: text-control-color,
   select-hero-danger-placeholder-text-color: text-control-color,
 
@@ -1550,6 +1598,7 @@ $eva-mapping: (
   select-hero-danger-hover-left-background-color: color-danger-300,
   select-hero-danger-hover-right-background-color: color-danger-400,
   select-hero-danger-disabled-background-color: background-basic-color-2,
+  select-hero-danger-disabled-icon-color: text-danger-disabled-color,
   select-hero-danger-disabled-text-color: text-danger-disabled-color,
 
   select-option-hero-tiny-padding: select-hero-tiny-padding,
@@ -1563,6 +1612,13 @@ $eva-mapping: (
   select-option-hero-giant-padding: select-hero-giant-padding,
   select-group-option-hero-giant-padding-start: 2.75rem,
 
+  select-options-list-hero-border-color: border-primary-color-2,
+  select-options-list-hero-primary-border-color: color-primary-500,
+  select-options-list-hero-success-border-color: color-success-500,
+  select-options-list-hero-info-border-color: color-info-500,
+  select-options-list-hero-warning-border-color: color-warning-500,
+  select-options-list-hero-danger-border-color: color-danger-500,
+
   datepicker-text-color: text-basic-color,
   datepicker-background-color: background-basic-color-1,
   datepicker-border-color: background-basic-color-1,