style: adding dark theme styles in input (#1175)

Brisanet · Nov 12, 2024 · 79be212 · 79be212
1 parent 0d748f5
commit 79be212
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 5 deletions.
diff --git 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
@@ -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;
 }