style: adding dark theme styles in input select

Brisanet · Nov 26, 2024 · 0e6490e · 0e6490e
1 parent 85dd100
commit 0e6490e
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/projects/ion/src/lib/input-select/_input-select.theme.scss b/projects/ion/src/lib/input-select/_input-select.theme.scss
@@ -4,6 +4,7 @@ $default: (
   background-color: ion-theme(neutral-1),
   button: (
     background-color: ion-theme(neutral-2),
+    icon-color: ion-theme(neutral-7),
     border-color: ion-theme(neutral-5),
     text: (
       color: ion-theme(neutral-7),
@@ -30,9 +31,41 @@ $default: (
   ),
 );
 
+$dark: (
+  background-color: ion-theme(neutral-5),
+  button: (
+    background-color: ion-theme(neutral-6),
+    border-color: ion-theme(primary-3),
+    icon-color: ion-theme(primary-3),
+    text: (
+      color: ion-theme(primary-3),
+      line-height: 20px,
+      font-size: 14px,
+      font-weight: 400,
+    ),
+  ),
+  valid-icon-color: ion-theme(positive-6),
+  invalid: (
+    icon-color: ion-theme(negative-6),
+    border-color: ion-theme(negative-5),
+    hover: (
+      border-color: ion-theme(negative-6),
+      outline-color: ion-theme(negative-2),
+    ),
+  ),
+  separator-color: ion-theme(neutral-3),
+  disabled: (
+    background-color: ion-theme(neutral-7),
+    border-color: ion-theme(neutral-4),
+    text-color: ion-theme(neutral-4),
+    icon-color: ion-theme(neutral-4),
+  ),
+);
+
 @include register-component(
   input-select,
   (
     default: $default,
+    dark: $dark,
   )
 );
diff --git a/projects/ion/src/lib/input-select/input-select.component.html b/projects/ion/src/lib/input-select/input-select.component.html
@@ -15,7 +15,10 @@
         [disabled]="disabled"
       >
         <span>{{ currentOption?.label }}</span>
-        <ion-icon type="semi-down" color="var(--ion-neutral-6)"></ion-icon>
+        <ion-icon
+          type="semi-down"
+          color="var(--ion-input-select-button-icon-color)"
+        ></ion-icon>
       </button>
 
       <div *ngIf="!!selectOptions && dropdownVisible" class="ion-btn-dropdown">

diff --git a/projects/ion/src/lib/input-select/input-select.component.scss b/projects/ion/src/lib/input-select/input-select.component.scss
@@ -11,6 +11,7 @@
 
   .input-select-container {
     display: flex;
+    border-radius: spacing(1);
 
     .input {
       border-radius: 0 spacing(1) spacing(1) 0;