Merge branch 'main' into 1190-style-add-dark-theme-in-input-select

Brisanet · Nov 27, 2024 · 8d0b496 · 8d0b496
2 parents 018f072 + cd17824
commit 8d0b496
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -55,6 +55,7 @@
     border: none;
     outline: none;
     width: 100%;
+    color: ion-theme(select-text-color);
   }
 
   input {