From 5149f5d564cb61cd9ed73ce748fbed918d22aeab Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Tue, 30 Jul 2024 09:30:22 -0700 Subject: [PATCH] feat: implement tier 3 token structure #121 --- demo/api.md | 21 +++++++++++++++++++++ docs/partials/api.md | 8 ++++++++ src/auro-flight-header.js | 14 ++++++++++---- src/auro-flight-main.js | 14 ++++++++++---- src/auro-flight.js | 12 +++++++++--- src/color-flight-header.scss | 19 +++++++++++++++++++ src/color-flight-main.scss | 33 +++++++++++++++++++++++++++++++++ src/color-flight.scss | 15 +++++++++++++++ src/style-flight-header.scss | 18 ------------------ src/style-flight-main.scss | 24 ++++++++++++------------ src/style-flight.scss | 4 ---- src/tokens.scss | 10 ++++++++++ 12 files changed, 147 insertions(+), 45 deletions(-) create mode 100644 src/color-flight-header.scss create mode 100644 src/color-flight-main.scss create mode 100644 src/color-flight.scss create mode 100644 src/tokens.scss diff --git a/demo/api.md b/demo/api.md index f584996..87baf2e 100644 --- a/demo/api.md +++ b/demo/api.md @@ -317,3 +317,24 @@ Explanation and use description. ``` + +### Theme Support + +The component may be restyled using the following code sample and changing the values of the following token(s). + + + + +```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}); +} +``` + diff --git a/docs/partials/api.md b/docs/partials/api.md index 8d7136e..ccbc81c 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -107,3 +107,11 @@ Explanation and use description. + +### Theme Support + +The component may be restyled using the following code sample and changing the values of the following token(s). + + + + diff --git a/src/auro-flight-header.js b/src/auro-flight-header.js index 341de92..4713a65 100644 --- 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 index 99f8c8d..1f3ffe4 100644 --- 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 index c47a2f1..8cd2463 100644 --- 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 new file mode 100644 index 0000000..85f7cb6 --- /dev/null +++ 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 new file mode 100644 index 0000000..5beb007 --- /dev/null +++ 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 new file mode 100644 index 0000000..2d0066d --- /dev/null +++ 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 index be4fd16..13aad1b 100644 --- a/src/style-flight-header.scss +++ b/src/style-flight-header.scss @@ -10,32 +10,14 @@ @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 index 56f8418..6617c91 100644 --- a/src/style-flight-main.scss +++ b/src/style-flight-main.scss @@ -3,6 +3,8 @@ // --------------------------------------------------------------------- +/* stylelint-disable selector-class-pattern, scss/percent-placeholder-pattern */ + // Import Auro tokens @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; @@ -10,6 +12,12 @@ @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 index 6b84d99..1dc5208 100644 --- a/src/style-flight.scss +++ b/src/style-flight.scss @@ -14,10 +14,6 @@ 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 new file mode 100644 index 0000000..cf84e25 --- /dev/null +++ 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}); +}