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 @@ 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 {