feat: implement tier 3 token structure #121

AlaskaAirlines · Aug 8, 2024 · 874e9ce · 874e9ce
1 parent e32e501
commit 874e9ce
Show file tree

Hide file tree

Showing 12 changed files with 147 additions and 51 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -317,3 +317,24 @@ Explanation and use description.
 ```
 <!-- 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) -->
+<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
+
+```scss
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-flight-footer-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-flight-header-days-changed-text-color: var(--ds-color-utility-error-default, #{$ds-color-utility-error-default});
+  --ds-auro-flight-header-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-flight-cancelled-station-text-color: var(--ds-color-utility-error-default, #{$ds-color-utility-error-default});
+  --ds-auro-flight-station-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-flight-time-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/docs/partials/api.md b/docs/partials/api.md
@@ -107,3 +107,11 @@ Explanation and use description.
 
 </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 -->
+
diff --git a/src/auro-flight-header.js b/src/auro-flight-header.js
@@ -6,7 +6,11 @@
 // If use litElement base class
 import { LitElement, html, css } from "lit";
 import { getDateDifference } from "../util/util.js";
-import styleCss from "./style-flight-header-css.js";
+
+import styleFlightHeaderCss from "./style-flight-header-css.js";
+import colorFlightHeaderCss from "./color-flight-header-css.js";
+import tokensCss from "./tokens-css.js";
+
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
@@ -35,9 +39,11 @@ export class AuroFlightHeader extends LitElement {
   }
 
   static get styles() {
-    return css`
-      ${styleCss}
-    `;
+    return [
+      css`${styleFlightHeaderCss}`,
+      css`${colorFlightHeaderCss}`,
+      css`${tokensCss}`
+    ];
   }
 
   /**

diff --git a/src/auro-flight-main.js b/src/auro-flight-main.js
@@ -5,7 +5,11 @@
 
 // If use litElement base class
 import { LitElement, html, css } from "lit";
-import styleCss from "./style-flight-main-css.js";
+
+import styleFlightMainCss from "./style-flight-main-css.js";
+import colorFlightMainCss from "./color-flight-main-css.js";
+import tokensCss from "./tokens-css.js";
+
 import { getDateDifference } from './../util/util.js';
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
@@ -46,9 +50,11 @@ export class AuroFlightMain extends LitElement {
   }
 
   static get styles() {
-    return css`
-      ${styleCss}
-    `;
+    return [
+      css`${styleFlightMainCss}`,
+      css`${colorFlightMainCss}`,
+      css`${tokensCss}`,
+    ];
   }
 
   constructor() {

diff --git a/src/auro-flight.js b/src/auro-flight.js
@@ -6,8 +6,12 @@
 // If use litElement base class
 import { LitElement, html, css } from "lit";
 import styleCss from "./style-flight-css.js";
+import colorFlightCss from "./color-flight-css.js";
+import tokensCss from "./tokens-css.js";
+
 import "@aurodesignsystem/auro-flightline";
 import "@aurodesignsystem/auro-flightline/src/auro-flight-segment.js";
+
 import "./auro-flight-header.js";
 import "./auro-flight-main.js";
 
@@ -51,9 +55,11 @@ export class AuroFlight extends LitElement {
   }
 
   static get styles() {
-    return css`
-      ${styleCss}
-    `;
+    return [
+      css`${styleCss}`,
+      css`${colorFlightCss}`,
+      css`${tokensCss}`
+    ];
   }
 
   // This function removes a CSS selector if the footer slot is empty

diff --git a/src/color-flight-header.scss b/src/color-flight-header.scss
@@ -0,0 +1,19 @@
+// Copyright (c) 2024 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';
+
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
+
+:host {
+  color: var(--ds-auro-flight-header-text-color);
+}
+
+.daysChanged {
+  color: var(--ds-auro-flight-header-days-changed-text-color);
+}
diff --git a/src/color-flight-main.scss b/src/color-flight-main.scss
@@ -0,0 +1,33 @@
+// 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 selector-class-pattern */
+
+// 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';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
+
+.departureTime {
+  color: var(--ds-auro-flight-main-time-text-color);
+}
+
+.departureStation {
+  color: var(--ds-auro-flight-main-station-text-color);
+}
+
+.arrivalTime {
+  color: var(--ds-auro-flight-main-time-text-color);
+}
+
+.arrivalStation {
+  color: var(--ds-auro-flight-main-station-text-color);
+}
+
+.util_lineThrough {
+  color: var(--ds-auro-flight-main-cancelled-station-text-color);
+}
diff --git a/src/color-flight.scss b/src/color-flight.scss
@@ -0,0 +1,15 @@
+// Copyright (c) 2024 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';
+
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
+
+[name='footer'] {
+  color: var(--ds-auro-flight-footer-text-color);
+}
diff --git a/src/style-flight-header.scss b/src/style-flight-header.scss
@@ -6,39 +6,18 @@
 // Import Auro tokens
 @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 
-// Support for fallback values
-@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';
-
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
 
-// Support for auroElement styles
-// @import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement';
-
-// container styles - defines the look of the outer custom component
-// :host {
-//   ...
-// }
-
-// layout styles - define any layout specifications for UI that is contained WITHIN the component
-// never define layout that would cause effect on element outside the scope of this component
-
-// component shape styles
-// .auro-flight {
-//   ...
-// }
-
 :host {
   display: flex;
   justify-content: space-between;
   padding-bottom: var(--ds-size-50, $ds-size-50);
-  color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
   font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
 }
 
 .daysChanged {
   align-self: flex-end;
   padding-left: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
-  color: var(--ds-color-alert-error-default, $ds-color-alert-error-default);
 }
diff --git a/src/style-flight-main.scss b/src/style-flight-main.scss
@@ -3,13 +3,21 @@
 
 // ---------------------------------------------------------------------
 
+/* stylelint-disable selector-class-pattern, scss/percent-placeholder-pattern */
+
 // 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';
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
 
+%flightTimeStyles {
+  padding-bottom: var(--ds-size-25, $ds-size-25);
+  font-size: var(--ds-text-heading-300-size, $ds-text-heading-300-size);
+  line-height: var(--ds-text-heading-700-height-breakpoint-md, $ds-text-heading-700-height-breakpoint-md);
+}
+
 :host {
   display: flex;
   flex-direction: row;
@@ -24,28 +32,22 @@
 }
 
 .departureTime {
-  padding-bottom: var(--ds-size-25, $ds-size-25);
-  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-  font-size: var(--ds-text-heading-300-size, $ds-text-heading-300-size);
-  line-height: var(--ds-text-heading-700-height-breakpoint-md, $ds-text-heading-700-height-breakpoint-md);
+  @extend %flightTimeStyles;
+
   text-align: left;
 }
 
 .departureStation {
-  color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
   text-align: left;
 }
 
 .arrivalTime {
-  padding-bottom: var(--ds-size-25, $ds-size-25);
-  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-  font-size: var(--ds-text-heading-300-size, $ds-text-heading-300-size);
-  line-height: var(--ds-text-heading-700-height-breakpoint-md, $ds-text-heading-700-height-breakpoint-md);
+  @extend %flightTimeStyles;
+
   text-align: right;
 }
 
 .arrivalStation {
-  color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
   text-align: right;
 }
 
@@ -55,10 +57,8 @@
   flex-direction: column;
 }
 
-/* stylelint-disable */
 .util_lineThrough {
   padding-right: var(--ds-size-200, $ds-size-200);
-  color: var(--ds-color-alert-error-default,  $ds-color-alert-error-default);
   text-decoration: line-through;
 }
 

diff --git a/src/style-flight.scss b/src/style-flight.scss
@@ -10,17 +10,10 @@
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
 
-// Support for fallback values
-@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';
-
 .flightFooter {
   padding-top: var(--ds-size-200, $ds-size-200);
 }
 
-[name='footer'] {
-  color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
-}
-
 .headerContainer {
   display: flex;
   justify-content: space-between;

diff --git a/src/tokens.scss b/src/tokens.scss
@@ -0,0 +1,10 @@
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-flight-footer-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-flight-header-days-changed-text-color: var(--ds-color-utility-error-default, #{$ds-color-utility-error-default});
+  --ds-auro-flight-header-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-flight-cancelled-station-text-color: var(--ds-color-utility-error-default, #{$ds-color-utility-error-default});
+  --ds-auro-flight-station-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-flight-time-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+}