diff --git a/projects/ion/src/lib/alert/_alert.theme.scss b/projects/ion/src/lib/alert/_alert.theme.scss index a0735c844..295858575 100644 --- a/projects/ion/src/lib/alert/_alert.theme.scss +++ b/projects/ion/src/lib/alert/_alert.theme.scss @@ -41,11 +41,61 @@ $default: ( background-color: ion-theme(neutral-2), text-color: ion-theme(neutral-7), ), + without-background: ( + text-color: ion-theme(neutral-7), + ), +); + +$dark: ( + border-radius: 8px, + close-icon-size: 18px, + text: ( + font-size: 14px, + font-weight: 400, + line-height: 20px, + font-family: ion-theme(font-family-main), + ), + success: ( + background-color: ion-theme(positive-1), + border-color: ion-theme(positive-5), + icon-color: ion-theme(positive-7), + close-icon-color: ion-theme(primary-6), + text-color: ion-theme(neutral-7), + ), + info: ( + background-color: ion-theme(info-1), + border-color: ion-theme(info-6), + icon-color: ion-theme(info-6), + close-icon-color: ion-theme(primary-6), + text-color: ion-theme(neutral-7), + ), + warning: ( + background-color: ion-theme(warning-1), + border-color: ion-theme(warning-6), + icon-color: ion-theme(warning-6), + close-icon-color: ion-theme(primary-6), + text-color: ion-theme(neutral-7), + ), + negative: ( + background-color: ion-theme(negative-1), + border-color: ion-theme(negative-6), + icon-color: ion-theme(negative-6), + close-icon-color: ion-theme(primary-6), + text-color: ion-theme(neutral-7), + ), + with-description: ( + background-color: ion-theme(neutral-2), + text-color: ion-theme(neutral-7), + ), + without-background: ( + text-color: ion-theme(neutral-1), + ), ); @include register-component( alert, ( default: $default, + dark: $dark, ) ); diff --git a/projects/ion/src/lib/alert/alert.component.scss b/projects/ion/src/lib/alert/alert.component.scss index 4c902e202..fcc0b2633 100644 --- a/projects/ion/src/lib/alert/alert.component.scss +++ b/projects/ion/src/lib/alert/alert.component.scss @@ -80,6 +80,10 @@ $statuses: success, info, warning, negative; &.without-background { background-color: transparent; border: none !important; + + span { + color: ion-theme(alert-without-background-text-color); + } } &.no-radius { diff --git a/projects/ion/src/lib/popconfirm/_popconfirm.theme.scss b/projects/ion/src/lib/popconfirm/_popconfirm.theme.scss index e003ecbdf..9c729ee37 100644 --- a/projects/ion/src/lib/popconfirm/_popconfirm.theme.scss +++ b/projects/ion/src/lib/popconfirm/_popconfirm.theme.scss @@ -14,11 +14,30 @@ $default: ( line-height: 20px, color: ion-theme(neutral-7), ), + border-color: ion-theme(neutral-1), +); + +$dark: ( + background-color: ion-theme(neutral-5), + shadow: 0 0 6px rgba(4, 42, 98, 0.15), + arrow: ( + color: ion-theme(neutral-5), + shadow: -2px -2px 4px -2px rgb(4 42 98 / 15%), + ), + text: ( + font-family: ion-theme(font-family-main), + font-weight: 400, + font-size: 14px, + line-height: 20px, + color: ion-theme(neutral-1), + ), + border-color: ion-theme(neutral-3), ); @include register-component( popconfirm, ( default: $default, + dark: $dark, ) ); diff --git a/projects/ion/src/lib/popconfirm/popconfirm.component.scss b/projects/ion/src/lib/popconfirm/popconfirm.component.scss index 18ca3055e..98c5922ca 100644 --- a/projects/ion/src/lib/popconfirm/popconfirm.component.scss +++ b/projects/ion/src/lib/popconfirm/popconfirm.component.scss @@ -26,6 +26,8 @@ right: $right; transform: rotate(45deg); box-shadow: ion-theme(popconfirm-arrow-shadow); + border-top: 1px solid ion-theme(popconfirm-border-color); + border-left: 1px solid ion-theme(popconfirm-border-color); } } @@ -44,6 +46,8 @@ .containter { z-index: $zIndexMid; + border-radius: spacing(1); + border: 1px solid ion-theme(popconfirm-border-color); } .description { diff --git a/projects/ion/src/lib/popover/component/_popover.theme.scss b/projects/ion/src/lib/popover/component/_popover.theme.scss index c3ff53512..1ea5cb708 100644 --- a/projects/ion/src/lib/popover/component/_popover.theme.scss +++ b/projects/ion/src/lib/popover/component/_popover.theme.scss @@ -3,6 +3,7 @@ $default: ( background-color: ion-theme(neutral-1), shadow: 0 0 6px rgba(4, 42, 98, 0.15), + border-color: ion-themes(neutral-2), header: ( background-color: ion-theme(neutral-2), close-icon-color: ion-theme(primary-6), @@ -35,6 +36,7 @@ $default: ( $dark: ( background-color: ion-theme(neutral-5), shadow: 0 0 6px rgba(4, 42, 98, 0.15), + border-color: ion-theme(neutral-3), header: ( background-color: ion-theme(neutral-6), close-icon-color: ion-theme(primary-3), @@ -58,7 +60,7 @@ $dark: ( ), arrow: ( shadow: -2px -2px 4px -2px rgb(4 42 98 / 15%), - header-color: ion-theme(neutral-6), + header-color: ion-theme(neutral-5), body-color: ion-theme(neutral-6), ), scrollbar-thumb-color: ion-theme(neutral-2), diff --git a/projects/ion/src/lib/popover/component/popover.component.scss b/projects/ion/src/lib/popover/component/popover.component.scss index dcbf13ecc..987eafa59 100644 --- a/projects/ion/src/lib/popover/component/popover.component.scss +++ b/projects/ion/src/lib/popover/component/popover.component.scss @@ -36,6 +36,8 @@ $arrow-distance-to-border: 16px; top: $arrowPosition; left: $left; transform: rotate($rotate); + border-top: 1px solid ion-theme(popover-border-color); + border-left: 1px solid ion-theme(popover-border-color); } } @@ -51,6 +53,8 @@ $arrow-distance-to-border: 16px; bottom: $arrowPosition; left: $left; transform: rotate($rotate); + border-top: 1px solid ion-theme(popover-border-color); + border-left: 1px solid ion-theme(popover-border-color); } } } @@ -213,6 +217,7 @@ $arrow-distance-to-border: 16px; border-radius: spacing(1); box-shadow: ion-theme(popover-shadow); background-color: ion-theme(popover-background-color); + border: 1px solid ion-theme(popover-border-color); } &__header {