From 79be212039f4547a0da3f37109e534c41f8c1727 Mon Sep 17 00:00:00 2001
From: larissa-kamily-brisa
 <138057627+larissa-kamily-brisa@users.noreply.github.com>
Date: Tue, 12 Nov 2024 10:03:04 -0300
Subject: [PATCH] style: adding dark theme styles in input (#1175)

---
 projects/ion/src/lib/input/_input.theme.scss  | 58 ++++++++++++++++++-
 .../ion/src/lib/input/input.component.scss    | 15 +++--
 2 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/projects/ion/src/lib/input/_input.theme.scss b/projects/ion/src/lib/input/_input.theme.scss
index 08a479bb9..59d635573 100644
--- a/projects/ion/src/lib/input/_input.theme.scss
+++ b/projects/ion/src/lib/input/_input.theme.scss
@@ -30,6 +30,7 @@ $default: (
     element: (
       color: ion-theme(neutral-4),
       placeholder-color: ion-theme(neutral-4),
+      count-text-color: ion-theme(neutral-4),
     ),
   ),
   invalid: (
@@ -46,16 +47,71 @@ $default: (
     icon-color: ion-theme(primary-6),
     hover-background-color: ion-theme(primary-1),
   ),
-  counter: (
+  count: (
     text-color: ion-theme(neutral-5),
     text-font-size: 14px,
   ),
   error-message-text-color: ion-theme(negative-6),
 );
 
+$dark: (
+  background-color: ion-theme(neutral-7),
+  icon-color: ion-theme(neutral-3),
+  border-radius: 8px,
+  element: (
+    border-color: ion-theme(neutral-3),
+    text-color: ion-theme(neutral-1),
+    text-font-size: 14px,
+    padding: 8px 12px,
+    side-icon-distance: 40px,
+    hover-border-color: ion-theme(primary-4),
+    active: (
+      border-color: ion-theme(primary-4),
+      shadow-color: ion-theme(primary-4),
+    ),
+    placeholder: (
+      color: ion-theme(neutral-3),
+      text-font-weight: 400,
+      text-font-size: 14px,
+    ),
+  ),
+  disabled: (
+    background: ion-theme(neutral-7),
+    border-color: ion-theme(neutral-4),
+    hover-border-color: ion-theme(neutral-6),
+    icon-color: ion-theme(neutral-4),
+    text-color: ion-theme(neutral-4),
+    element: (
+      color: ion-theme(negative-4),
+      placeholder-color: ion-theme(neutral-4),
+      count-text-color: ion-theme(neutral-4),
+    ),
+  ),
+  invalid: (
+    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(neutral-3),
+    ),
+  ),
+  valid-icon-color: ion-theme(positive-5),
+  clear-button: (
+    icon-color: ion-theme(primary-3),
+    hover-background-color: ion-theme(neutral-7),
+  ),
+  count: (
+    text-color: ion-theme(neutral-3),
+    text-font-size: 14px,
+  ),
+  error-message-text-color: ion-theme(negative-6),
+);
+
 @include register-component(
   input,
   (
     default: $default,
+    dark: $dark,
   )
 );
diff --git a/projects/ion/src/lib/input/input.component.scss b/projects/ion/src/lib/input/input.component.scss
index 4c764a604..2b12d2265 100644
--- a/projects/ion/src/lib/input/input.component.scss
+++ b/projects/ion/src/lib/input/input.component.scss
@@ -122,10 +122,11 @@ div.disabled {
   border-color: ion-theme(input-disabled-border-color) !important;
 
   input {
+    cursor: not-allowed;
     color: ion-theme(input-disabled-text-color) !important;
 
     &::placeholder {
-      color: ion-theme(input-element-disabled-placeholder-color);
+      color: ion-theme(input-disabled-element-placeholder-color) !important;
     }
   }
 
@@ -139,6 +140,10 @@ div.disabled {
   ion-icon ::ng-deep svg {
     fill: ion-theme(input-disabled-icon-color);
   }
+
+  .text-counter {
+    color: ion-theme(input-disabled-element-count-text-color);
+  }
 }
 
 .clearButton {
@@ -152,7 +157,9 @@ div.disabled {
   display: flex;
 
   &:hover {
-    background-color: ion-theme(input-clear-button-hover-background-color);
+    background-color: ion-theme(
+      input-clear-button-hover-background-color
+    ) !important;
   }
 
   ion-icon ::ng-deep svg {
@@ -192,6 +199,6 @@ div.disabled {
 
 .text-counter {
   padding: 6px 12px;
-  font-size: ion-theme(input-counter-text-font-size);
-  color: ion-theme(input-counter-text-color);
+  font-size: ion-theme(input-count-text-font-size);
+  color: ion-theme(input-count-text-color) !important;
 }