From f8abad947d322837f07a0afa02585ecb8198ba6e Mon Sep 17 00:00:00 2001
From: Jordan Jones <jmjones2463@gmail.com>
Date: Fri, 31 May 2024 13:14:51 -0700
Subject: [PATCH] feat: refactor color token structure with tier 3 tokens #63
---
demo/api.md | 9 +++++-
docs/partials/api.md | 7 +++++
scripts/postCss.mjs | 68 ++++++++++++++++++++++++++++++++++++--------
src/auro-popover.js | 10 +++++--
src/color.scss | 23 +++++++++++++++
src/style.scss | 10 -------
src/tokens.scss | 4 +++
7 files changed, 105 insertions(+), 26 deletions(-)
create mode 100644 src/color.scss
create mode 100644 src/tokens.scss
diff --git a/demo/api.md b/demo/api.md
index 66afb5a..d2cc647 100644
--- a/demo/api.md
+++ b/demo/api.md
@@ -289,4 +289,11 @@ In the event that a hyperlink UI is desired, it is recommended to use the `role=
### Developer Notes
-The default trigger for a popover is a `hover` event. Mobile devices do not support `hover` events directly, so the `hover` event is replaced with a `touchstart` event to produce the popover. This is to ensure reliability of the action versus versus a dependency on a secondary interruption of the `hover` event on mobile devices.
+The default trigger for a popover is a `hover` event. Mobile devices do not support `hover` events directly, so the `hover` event is replaced with a `touchstart` event to produce the popover. This is to ensure reliability of the action versus versus a dependency on a secondary interruption of the `hover` event on mobile devices.
+
+### 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/docs/partials/api.md b/docs/partials/api.md
index c75abf1..d4958fd 100644
--- a/docs/partials/api.md
+++ b/docs/partials/api.md
@@ -133,3 +133,10 @@ In the event that a hyperlink UI is desired, it is recommended to use the `role=
### Developer Notes
The default trigger for a popover is a `hover` event. Mobile devices do not support `hover` events directly, so the `hover` event is replaced with a `touchstart` event to produce the popover. This is to ensure reliability of the action versus versus a dependency on a secondary interruption of the `hover` event on mobile devices.
+
+### 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/scripts/postCss.mjs b/scripts/postCss.mjs
index df95225..a0966b6 100644
--- a/scripts/postCss.mjs
+++ b/scripts/postCss.mjs
@@ -1,18 +1,62 @@
import autoprefixer from 'autoprefixer';
import postcss from 'postcss';
import comments from 'postcss-discard-comments';
+import path from 'path';
import fs from 'fs';
+const __dirname = new URL('.', import.meta.url).pathname;
+const directoryPath = path.join(__dirname, '../src');
-fs.readFile('src/style.css', (err, css) => {
- postcss([autoprefixer, comments])
- .use(comments({
- remove: function(comment) { return comment[0] == "@"; }
- }))
- .process(css, { from: 'src/style.css', to: 'src/style.css' })
- .then(result => {
- fs.writeFile('src/style.css', result.css, () => true)
- if ( result.map ) {
- fs.writeFile('src/style.map', result.map, () => true)
- }
- })
+/**
+ * Default postCSS run
+ * Locates all CSS files within the directory and loop
+ * through the standardProcessor() function.
+ */
+fs.readdir(directoryPath, function (err, files) {
+ //handling error
+ if (err) {
+ return console.log('Unable to scan directory: ' + err);
+ }
+ //listing all files using forEach
+ files.forEach(function (file) {
+ if (file.includes(".css")) {
+ standardProcessor(file);
+ }
+ });
});
+
+/**
+ * The standardProcessor function applies tokens for fallback selectors
+ * and completes a post cleanup.
+ * @param {string} file
+ */
+function standardProcessor(file) {
+ fs.readFile(`src/${file}`, (err, css) => {
+ postcss([autoprefixer, comments])
+ .use(comments({
+ remove: function(comment) { return comment[0] == "@"; }
+ }))
+ .process(css, { from: `src/${file}`, to: `src/${file}` })
+ .then(result => {
+ fs.writeFile(`src/${file}`, result.css, () => true)
+ })
+ });
+}
+
+/**
+ * ALTERNATE script:
+ * The following is a static builder for rendering one
+ * CSS file at a time if that is required.
+ */
+// fs.readFile('src/style.css', (err, css) => {
+// postcss([autoprefixer, comments])
+// .use(comments({
+// remove: function(comment) { return comment[0] == "@"; }
+// }))
+// .process(css, { from: 'src/style.css', to: 'src/style.css' })
+// .then(result => {
+// fs.writeFile('src/style.css', result.css, () => true)
+// if ( result.map ) {
+// fs.writeFile('src/style.map', result.map, () => true)
+// }
+// })
+// });
diff --git a/src/auro-popover.js b/src/auro-popover.js
index b4f4a13..0083dfe 100644
--- a/src/auro-popover.js
+++ b/src/auro-popover.js
@@ -10,6 +10,8 @@ import { LitElement, html, css } from "lit";
// Import touch detection lib
import styleCss from "./style-css.js";
+import colorCss from "./color-css.js";
+import tokensCss from "./tokens-css.js";
import Popover from "./popover.js";
@@ -53,9 +55,11 @@ export class AuroPopover extends LitElement {
}
static get styles() {
- return css`
- ${styleCss},
- `;
+ return [
+ css`${styleCss}`,
+ css`${colorCss}`,
+ css`${tokensCss}`
+ ];
}
connectedCallback() {
diff --git a/src/color.scss b/src/color.scss
new file mode 100644
index 0000000..2f9b556
--- /dev/null
+++ b/src/color.scss
@@ -0,0 +1,23 @@
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable scss/dollar-variable-empty-line-before, at-rule-empty-line-before, order/properties-order, scss/selector-nest-combinators, declaration-empty-line-before,
+ scss/at-extend-no-missing-placeholder, declaration-no-important, selector-max-combinators, selector-max-compound-selectors, no-descending-specificity, color-function-notation */
+
+::slotted(*) {
+ color: var(--ds-auro-popover-text-color);
+}
+
+.popover {
+ background-color: var(--ds-auro-popover-background-color);
+ box-shadow: -2px 0 5px 2px rgba(0, 0, 0, .08), 0 2px 5px 1px rgba(0, 0, 0, .08);
+}
+
+.arrow {
+ &:before {
+ background-color: var(--ds-auro-popover-background-color);
+ box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, .08);
+ }
+}
diff --git a/src/style.scss b/src/style.scss
index 91d490c..3aeeab9 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -9,7 +9,6 @@
// Import Auro tokens
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties';
-@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariableMap';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
@@ -21,7 +20,6 @@ $auro-inset-directions: '';
::slotted(*) {
white-space: normal;
- color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
}
::slotted(*:hover) {
@@ -66,8 +64,6 @@ $auro-inset-directions: '';
:host([data-show]) {
.popover {
z-index: var(--ds-depth-tooltip, $ds-depth-tooltip);
-
- background-color: var(--ds-color-background-lightest, $ds-color-background-lightest);
}
}
@@ -113,9 +109,6 @@ $auro-inset-directions: '';
max-width: calc(100% - var(--ds-size-400, $ds-size-400));
border-radius: var(--ds-border-radius, $ds-border-radius);
- background: var(--ds-color-background-lightest, $ds-color-background-lightest);
- box-shadow: -2px 0 5px 2px rgba(0, 0, 0, .08),
- 0 2px 5px 1px rgba(0, 0, 0, .08);
@include auro_breakpoint--sm {
max-width: 50%;
@@ -162,8 +155,5 @@ $auro-inset-directions: '';
height: 12px;
content: '';
-
- background: var(--ds-color-base-white, $ds-color-base-white);
- box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, .08);
}
}
diff --git a/src/tokens.scss b/src/tokens.scss
new file mode 100644
index 0000000..0111560
--- /dev/null
+++ b/src/tokens.scss
@@ -0,0 +1,4 @@
+:host {
+ --ds-auro-popover-background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
+ --ds-auro-popover-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+}