update icon component to consume new design langauge

Shopify · Feb 27, 2020 · b032a9e · b032a9e
1 parent 9b679d1
commit b032a9e
Show file tree

Hide file tree

Showing 7 changed files with 344 additions and 31 deletions.
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -191,7 +191,7 @@ $stacking-order: (
   @include recolor-icon(color('white'));
 
   &.newDesignLanguage {
-    @include recolor-icon(var(--p-button-text));
+    @include recolor-icon(var(--p-icon-on-primary));
   }
 
   &.disabled {
@@ -230,7 +230,7 @@ $stacking-order: (
   }
 
   &.newDesignLanguage {
-    @include recolor-icon(var(--p-button-text));
+    @include recolor-icon(var(--p-icon-on-critical));
   }
 }
 

diff --git a/src/components/Frame/components/Toast/Toast.scss b/src/components/Frame/components/Toast/Toast.scss
@@ -37,7 +37,7 @@ $Backdrop-opacity: 0.88;
   color: $error-color;
 
   .CloseButton {
-    fill: $error-color;
+    fill: var(--p-icon-on-critical, $error-color);
   }
 }
 
@@ -51,7 +51,7 @@ $Backdrop-opacity: 0.88;
   border: none;
   appearance: none;
   background: transparent;
-  fill: var(--p-text, color('white'));
+  fill: var(--p-icon, color('white'));
   cursor: pointer;
 
   &:focus {

diff --git a/src/components/Frame/components/Toast/Toast.tsx b/src/components/Frame/components/Toast/Toast.tsx
@@ -14,9 +14,9 @@ import styles from './Toast.scss';
 
 export {ToastProps};
 
-export const DEFAULT_TOAST_DURATION = 5000;
+export const DEFAULT_TOAST_DURATION = 500000;
 
-export const DEFAULT_TOAST_DURATION_WITH_ACTION = 10000;
+export const DEFAULT_TOAST_DURATION_WITH_ACTION = 1000000;
 
 export function Toast({
   content,