From cd178246d00674d6fde6c0fe34e3ce818333b3b7 Mon Sep 17 00:00:00 2001
From: larissa-kamily-brisa
 <138057627+larissa-kamily-brisa@users.noreply.github.com>
Date: Wed, 27 Nov 2024 09:47:56 -0300
Subject: [PATCH] style: adding dark theme styles in select (#1204)

---
 .../ion/src/lib/dropdown/_dropdown.theme.scss |  2 +
 .../src/lib/dropdown/dropdown.component.scss  |  1 +
 .../ion/src/lib/select/_select.theme.scss     | 42 +++++++++++++++++++
 .../select-item/select-item.component.scss    |  2 +-
 .../ion/src/lib/select/select.component.html  |  6 ++-
 .../ion/src/lib/select/select.component.scss  |  1 +
 6 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/projects/ion/src/lib/dropdown/_dropdown.theme.scss b/projects/ion/src/lib/dropdown/_dropdown.theme.scss
index c039fc93a..f34159622 100644
--- a/projects/ion/src/lib/dropdown/_dropdown.theme.scss
+++ b/projects/ion/src/lib/dropdown/_dropdown.theme.scss
@@ -4,6 +4,7 @@ $default: (
   background-color: ion-theme(neutral-1),
   shadow: '0px 8px 6px -4px rgba(0, 0, 0, 0.15), 0 0 2px rgba(0, 0, 0, 0.15)',
   border-radius: 8px,
+  border-color: ion-theme(neutral-1),
   text: (
     font-family: ion-theme(font-family-main),
     font-style: normal,
@@ -69,6 +70,7 @@ $dark: (
   background-color: ion-theme(neutral-5),
   shadow-color: rgba(4, 42, 98, 0.15),
   border-radius: 8px,
+  border-color: ion-theme(neutral-3),
   text: (
     font-family: ion-theme(font-family-main),
     font-style: normal,
diff --git a/projects/ion/src/lib/dropdown/dropdown.component.scss b/projects/ion/src/lib/dropdown/dropdown.component.scss
index 04996d29b..f0b3dec60 100644
--- a/projects/ion/src/lib/dropdown/dropdown.component.scss
+++ b/projects/ion/src/lib/dropdown/dropdown.component.scss
@@ -34,6 +34,7 @@
   background-color: ion-theme(dropdown-background-color);
   box-shadow: ion-theme(dropdown-shadow);
   border-radius: ion-theme(dropdown-border-radius);
+  border: 1px solid ion-theme(dropdown-border-color) !important;
 
   &--loading {
     flex-direction: row;
diff --git a/projects/ion/src/lib/select/_select.theme.scss b/projects/ion/src/lib/select/_select.theme.scss
index 6d24dab45..7336c82a5 100644
--- a/projects/ion/src/lib/select/_select.theme.scss
+++ b/projects/ion/src/lib/select/_select.theme.scss
@@ -5,6 +5,8 @@ $default: (
   border-radius: 8px,
   border-color: ion-theme(neutral-5),
   hover-border-color: ion-theme(primary-4),
+  icon-color: ion-theme(neutral-7),
+  text-color: ion-theme(neutral-7),
   active: (
     border-color: ion-theme(primary-4),
     shadow-color: ion-theme(primary-2),
@@ -37,9 +39,49 @@ $default: (
   ),
 );
 
+$dark: (
+  background-color: ion-theme(neutral-5),
+  border-radius: 8px,
+  border-color: ion-theme(neutral-3),
+  hover-border-color: ion-theme(primary-4),
+  icon-color: ion-theme(neutral-3),
+  text-color: ion-theme(neutral-3),
+  active: (
+    border-color: ion-theme(primary-4),
+    shadow-color: ion-theme(primary-2),
+  ),
+  disabled: (
+    background-color: ion-theme(neutral-7),
+    border-color: ion-theme(neutral-4),
+    placeholder-color: ion-theme(neutral-4),
+    icon-color: ion-theme(neutral-4),
+  ),
+  required: (
+    border-color: ion-theme(negative-6),
+    icon-color: ion-theme(negative-6),
+    hover-border-color: ion-theme(negative-6),
+    focus: (
+      shadow-color: ion-theme(negative-6),
+      border-color: ion-theme(negative-6),
+    ),
+  ),
+  item: (
+    text-color: ion-theme(neutral-1),
+    background-color: ion-theme(neutral-6),
+    icon-color: ion-theme(neutral-1),
+    hover-icon-color: ion-theme(primary-3),
+    disabled: (
+      background-color: ion-theme(neutral-5),
+      text-color: ion-theme(neutral-3),
+      border-color: ion-theme(neutral-5),
+    ),
+  ),
+);
+
 @include register-component(
   select,
   (
     default: $default,
+    dark: $dark,
   )
 );
diff --git a/projects/ion/src/lib/select/select-item/select-item.component.scss b/projects/ion/src/lib/select/select-item/select-item.component.scss
index 3d4901ab2..082809085 100644
--- a/projects/ion/src/lib/select/select-item/select-item.component.scss
+++ b/projects/ion/src/lib/select/select-item/select-item.component.scss
@@ -9,7 +9,7 @@
   padding: 4px;
   color: ion-theme(select-item-text-color);
   background-color: ion-theme(select-item-background-color);
-  border-radius: 4px;
+  border-radius: 100px;
   font-size: 14px;
   cursor: default;
 
diff --git a/projects/ion/src/lib/select/select.component.html b/projects/ion/src/lib/select/select.component.html
index 56368a6c6..ffb51e558 100644
--- a/projects/ion/src/lib/select/select.component.html
+++ b/projects/ion/src/lib/select/select.component.html
@@ -31,7 +31,11 @@
     <ion-icon
       class="icon"
       [type]="showDropdown ? 'semi-up' : 'semi-down'"
-      [color]="!isValid ? 'var(--ion-neutral-6)' : 'var(--ion-negative-6)'"
+      [color]="
+        !isValid
+          ? 'var(--ion-select-icon-color)'
+          : 'var(--ion-select-required-icon-color)'
+      "
     ></ion-icon>
   </div>
 </div>
diff --git a/projects/ion/src/lib/select/select.component.scss b/projects/ion/src/lib/select/select.component.scss
index f591070b3..66289f2b6 100644
--- a/projects/ion/src/lib/select/select.component.scss
+++ b/projects/ion/src/lib/select/select.component.scss
@@ -55,6 +55,7 @@
     border: none;
     outline: none;
     width: 100%;
+    color: ion-theme(select-text-color);
   }
 
   input {