feat: color updates in progress...

src/auro-toast.js

@@ -8,6 +8,8 @@ import { LitElement, html } from "lit";
 
 // Import touch detection lib
 import styleCss from "./style-css.js";
+import colorCss from "./styleColor-css.js";
+
 import closeIcon from '@alaskaairux/icons/dist/icons/interface/x-lg.mjs';
 import information from '@alaskaairux/icons/dist/icons/alert/information-stroke.mjs';
 import error from '@alaskaairux/icons/dist/icons/alert/error.mjs';
@@ -68,7 +70,10 @@ export class AuroToast extends LitElement {
   }
 
   static get styles() {
-    return [styleCss];
+    return [
+      styleCss,
+      colorCss
+    ];
   }
 
   /**

src/style.scss

@@ -17,9 +17,7 @@
   min-height: calc(var(--ds-size-700, $ds-size-700) + var(--ds-size-50, $ds-size-50));
   padding: var(--ds-size-200, $ds-size-200) var(--ds-size-150, $ds-size-150);
   border-radius: var(--ds-size-100, $ds-size-100);
-  background-color: var(--ds-color-brand-gray-400, $ds-color-brand-gray-400);
   box-shadow: var(--ds-elevation-200, $ds-elevation-200);
-  color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
   gap: var(--ds-size-200, $ds-size-200);
   pointer-events: auto;
 
@@ -45,15 +43,11 @@
     padding-left: 0;
     border: var(--ds-size-25, $ds-size-25) solid transparent;
     margin-left: auto;
-    background-color: transparent;
-    color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
 
     &:hover {
-      border: 1px solid var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
+      // border: 1px solid var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
       border-radius: 50%;
-      background-color: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
       cursor: pointer;
-
     }
   }
 
@@ -74,30 +68,3 @@
     align-self: center;
   }
 }
-
-:host([variant='error']) {
-  background-color: var(--ds-color-alert-bkg-error-default, $ds-color-alert-bkg-error-default);
-  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-
-  .icon {
-    color: var(--ds-color-text-error-default, $ds-color-text-error-default);
-  }
-
-}
-
-:host([variant='success']) {
-  background-color: var(--ds-color-alert-bkg-success-default, $ds-color-alert-bkg-success-default);
-  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-
-  .icon {
-    color: var(--ds-color-alert-success-default, $ds-color-alert-success-default);
-  }
-
-}
-
-:host([visible][variant='error']),
-:host([visible][variant='success']) {
-  .closeButton {
-    color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-  }
-}

src/styleColor.scss

@@ -0,0 +1,49 @@
+// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// Import Auro tokens
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host([visible]) {
+  background-color: var(--ds-color-brand-gray-400, $ds-color-brand-gray-400);
+  color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
+
+  .closeButton {
+    background-color: transparent;
+    color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
+
+    &:hover {
+      border: 1px solid var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
+      background-color: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
+    }
+  }
+
+}
+
+:host([variant='error']) {
+  background-color: var(--ds-color-alert-bkg-error-default, $ds-color-alert-bkg-error-default);
+  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+
+  .icon {
+    color: var(--ds-color-text-error-default, $ds-color-text-error-default);
+  }
+}
+
+:host([variant='success']) {
+  background-color: var(--ds-color-alert-bkg-success-default, $ds-color-alert-bkg-success-default);
+  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+
+  .icon {
+    color: var(--ds-color-alert-success-default, $ds-color-alert-success-default);
+  }
+
+}
+
+:host([visible][variant='error']),
+:host([visible][variant='success']) {
+  .closeButton {
+    color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+  }
+}

src/tokens.scss

@@ -0,0 +1,6 @@
+:host {
+  --ds-auro-toast-background-color: var(--ds-color-brand-gray-400, $ds-color-brand-gray-400);
+  --ds-auro-toast-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
+  --ds-auro-toast-border-color: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
+  // --ds-auro-toast-icon-color: var(--ds-color-text-error-default, $ds-color-text-error-default);
+}