fix(hover): corrects minor visual jump in close button on hover

AlaskaAirlines · Jul 9, 2024 · 7e1a45d · 7e1a45d
1 parent 4c3e3ce
commit 7e1a45d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -185,7 +185,7 @@ The component may be restyled using the following code sample and changing the v
   --ds-auro-toast-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
   --ds-auro-toast-close-button-icon-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
   --ds-auro-toast-close-button-background-color: transparent;
-  --ds-auro-toast-close-button-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
+  --ds-auro-toast-close-button-border-color: transparent;
   --ds-auro-toast-icon-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
   --ds-auro-toast-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
 }

diff --git a/src/color.scss b/src/color.scss
@@ -15,12 +15,14 @@
   }
 
   .closeButton {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--ds-auro-toast-close-button-border-color);
     background-color: var(--ds-auro-toast-close-button-background-color);
     color: var(--ds-auro-toast-close-button-icon-color);
 
     &:hover {
-      border: 1px solid var(--ds-auro-toast-close-button-border-color);
-
+      --ds-auro-toast-close-button-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
       --ds-auro-toast-close-button-background-color: var(--ds-color-container-ui-tertiary-active-default, $ds-color-container-ui-tertiary-active-default);
     }
   }

diff --git a/src/tokens.scss b/src/tokens.scss
@@ -1,9 +1,9 @@
 :host {
-  --ds-auro-toast-background-color: var(--ds-color-brand-gray-400, $ds-color-brand-gray-400);
-  --ds-auro-toast-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
-  --ds-auro-toast-close-button-icon-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
+  --ds-auro-toast-background-color: var(--ds-color-brand-gray-400, #{$ds-color-brand-gray-400});
+  --ds-auro-toast-border-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
+  --ds-auro-toast-close-button-icon-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
   --ds-auro-toast-close-button-background-color: transparent;
-  --ds-auro-toast-close-button-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
-  --ds-auro-toast-icon-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
-  --ds-auro-toast-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
+  --ds-auro-toast-close-button-border-color: transparent;
+  --ds-auro-toast-icon-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
+  --ds-auro-toast-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
 }