feat: refactor color tokens with tier 3 tokens #57

demo/api.md

@@ -539,4 +539,25 @@ The following example illustrates a `<auro-banner>` custom element with the `rou
 </auro-banner>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+</auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
+
+```scss
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {
+  --ds-auro-banner-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-banner-disclaimer-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-banner-title-text-color: var(--ds-color-text-emphasis-default, #{$ds-color-text-emphasis-default});
+  --ds-auro-banner-icon-container-color: var(--ds-color-utility-gray-default, #{$ds-color-utility-gray-default});
+  --ds-auro-banner-wrapper-container-color: var(--ds-color-brand-midnight-400, #{$ds-color-brand-midnight-400});
+  --ds-auro-banner-wrapper-border-color: var(--ds-color-brand-lounge, #{$ds-color-brand-lounge});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->

docs/partials/api.md

@@ -158,3 +158,10 @@ The following example illustrates a `<auro-banner>` custom element with the `rou
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- AURO-GENERATED-CONTENT:END -->

package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@aurodesignsystem/auro-library": "^2.6.0",
-    "@aurodesignsystem/design-tokens": "^4.6.2",
+    "@aurodesignsystem/design-tokens": "^4.9.0",
     "@aurodesignsystem/eslint-config": "^1.3.0",
     "@aurodesignsystem/webcorestylesheets": "^5.1.1",
     "@commitlint/cli": "^19.3.0",
@@ -53,21 +53,21 @@
     "husky": "^9.0.11",
     "lodash": "^4.17.21",
     "markdown-magic": "^2.6.1",
-    "nodemon": "^3.1.3",
+    "nodemon": "^3.1.4",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.38",
-    "postcss-discard-comments": "^7.0.0",
+    "postcss": "^8.4.39",
+    "postcss-discard-comments": "^7.0.1",
     "postcss-selector-replace": "^1.0.2",
     "rollup": "^4.18.0",
     "rollup-plugin-serve": "^1.1.1",
-    "sass": "^1.77.4",
+    "sass": "^1.77.6",
     "semantic-release": "^24.0.0",
     "stylelint": "^16.6.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard": "^36.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.3.1",
+    "stylelint-scss": "^6.3.2",
     "typescript": "^5.4.5",
     "wc-sass-render": "^1.4.0",
     "web-component-analyzer": "^2.0.0",

src/auro-banner.js

@@ -10,6 +10,8 @@ import { LitElement, html, css } from "lit";
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import styleCss from "./style-css.js";
+import colorCss from "./color-css.js";
+import tokensCss from "./tokens-css.js";
 
 import "@aurodesignsystem/auro-header";
 
@@ -83,9 +85,11 @@ export class AuroBanner extends LitElement {
   }
 
   static get styles() {
-    return css`
-      ${styleCss}
-    `;
+    return [
+      css`${styleCss}`,
+      css`${colorCss}`,
+      css`${tokensCss}`
+    ];
   }
 
   // function that renders the HTML and CSS into  the scope of the component

src/color.scss

@@ -0,0 +1,68 @@
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable scss/percent-placeholder-pattern, no-descending-specificity */
+
+// Import Auro tokens
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints";
+@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/core";
+
+:host {
+  color: var(--ds-auro-banner-text-color);
+}
+
+:host([onDark]) {
+  @extend %auro-banner--ondark;
+}
+
+// =-=-=-=-= common styles -=-=-=-=-=-=
+%auro-banner {
+  .disclaimer {
+    color: var(--ds-auro-banner-disclaimer-text-color);
+  }
+
+  .title {
+    color: var(--ds-auro-banner-title-text-color);
+  }
+}
+
+// =-=-=-=-= ondark styles -=-=-=-=-=-=
+%auro-banner--ondark {
+  --ds-auro-banner-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
+  --ds-auro-banner-title-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
+}
+
+// =-=-=-=-= billboard -=-=-=-=-=-=
+:host([billboard]) {
+  @extend %auro-banner;
+}
+
+:host([iconic]) {
+  @extend %auro-banner;
+
+  .roundIconBg {
+    background: var(--ds-auro-banner-icon-container-color);
+  }
+}
+
+:host([marquee][solid]) {
+  @extend %auro-banner--ondark;
+
+  .bannerWrapper {
+    background-color: var(--ds-auro-banner-wrapper-container-color);
+  }
+}
+
+// =-=-=-=-= roundedBorder -=-=-=-=-=-=
+:host([roundedBorder]),
+:host([roundedBorder][alignLeft]) {
+  @extend %auro-banner;
+
+  .bannerWrapper {
+    border-color: var(--ds-auro-banner-wrapper-border-color);
+  }
+}