[Color system] Icon (#2781)

* update icon component to consume new design language

* omit interactive color

* dry up types

* feedback

* remove interactive icon colors

* alias sky and white to subdued, ink and black to icon

Author: danrosenthal

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));
   }
 }
 

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 {