feat(pie-toast): DSW-2108 added styling for icons and isStrong modifiers

justeattakeaway · Jul 19, 2024 · 6a48bed · 6a48bed
1 parent f706159
commit 6a48bed
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git 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`
             <pie-button
-                variant="ghost-inverse"
+                variant="${this.isVariantWarningAndIsStrong() ? 'ghost' : 'ghost-inverse'}"
                 size="xsmall"
                 aria-label="${ariaLabel || nothing}"
                 @click="${() => this.handleActionClick()}"
@@ -203,7 +203,7 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
     private renderCloseButton (): TemplateResult {
         return html`
             <pie-icon-button
-                variant="ghost-inverse"
+                variant="${this.isVariantWarningAndIsStrong() ? 'ghost-secondary' : 'ghost-inverse'}"
                 size="xsmall"
                 data-test-id="${componentSelector}-close"
                 @click="${this.closeToastComponent}">
@@ -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
@@ -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);
+    }
   }
 }