diff --git a/packages/components/pie-toast/src/index.ts b/packages/components/pie-toast/src/index.ts index a24c7049d5..7fd387c279 100644 --- a/packages/components/pie-toast/src/index.ts +++ b/packages/components/pie-toast/src/index.ts @@ -167,7 +167,7 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { return html` @@ -270,6 +270,15 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { return ['info', 'success', 'warning', 'error'].includes(variant); } + /** + * util method that returns true if the variant is warning and is strong. + * + * @private + */ + private isVariantWarningAndIsStrong () { + return this.variant === 'warning' && this.isStrong; + } + render () { const { isOpen, diff --git a/packages/components/pie-toast/src/toast.scss b/packages/components/pie-toast/src/toast.scss index da55294e21..9292707c0f 100644 --- a/packages/components/pie-toast/src/toast.scss +++ b/packages/components/pie-toast/src/toast.scss @@ -26,23 +26,40 @@ line-height: var(--toast-line-height); &.variant-info { - --toast-icon-fill: var(--dt-color-support-info-02); + --toast-icon-fill: var(--dt-color-support-info-inverse); &.is-strong { - --toast-background-color: var(--dt-color-blue); + --toast-background-color: var(--dt-color-support-info); + --toast-icon-fill: var(--dt-color-content-inverse); } } &.variant-warning { - --toast-icon-fill: var(--dt-color-support-warning-02); + --toast-icon-fill: var(--dt-color-support-warning-inverse); + + &.is-strong { + --toast-background-color: var(--dt-color-support-warning); + --toast-icon-fill: var(--dt-color-content-dark); + --toast-font-color: var(--dt-color-content-dark); + } } &.variant-success { - --toast-icon-fill: var(--dt-color-support-positive-02); + --toast-icon-fill: var(--dt-color-support-positive-inverse); + + &.is-strong { + --toast-background-color: var(--dt-color-support-positive); + --toast-icon-fill: var(--dt-color-content-inverse); + } } &.variant-error { - --toast-icon-fill: var(--dt-color-support-error); + --toast-icon-fill: var(--dt-color-support-error-inverse); + + &.is-strong { + --toast-background-color: var(--dt-color-support-error); + --toast-icon-fill: var(--dt-color-content-inverse); + } } }