diff --git a/demo/api.md b/demo/api.md index 66afb5a..8bcb40b 100644 --- a/demo/api.md +++ b/demo/api.md @@ -289,4 +289,21 @@ 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). + + + + +```scss +:host { + --ds-auro-popover-arrow-boxshadow-color: rgb(0 0 0 / 0.08); + --ds-auro-popover-boxshadow-color: rgb(0 0 0 / 0.08), 0 2px 5px 1px rgb(0 0 0 / 0.08); + --ds-auro-popover-container-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); +} +``` + diff --git a/docs/partials/api.md b/docs/partials/api.md index c75abf1..1921ea7 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). + + + diff --git a/package.json b/package.json index 80154b5..9e0abfe 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "./README.md", "./docs/api.md", "./demo/demo.md", - "./demo/apiExamples.md" + "./demo/api.md" ] } ], 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..4057c87 --- /dev/null +++ b/src/color.scss @@ -0,0 +1,25 @@ +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; + +/* 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-container-color); + box-shadow: -2px 0 5px 2px var(--ds-auro-popover-boxshadow-color); +} + +.arrow { + &:before { + background-color: var(--ds-auro-popover-container-color); + box-shadow: 2px 2px 1px 0 var(--ds-auro-popover-arrow-boxshadow-color); + } +} 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..f79a4ce --- /dev/null +++ b/src/tokens.scss @@ -0,0 +1,6 @@ +:host { + --ds-auro-popover-arrow-boxshadow-color: rgb(0 0 0 / 0.08); + --ds-auro-popover-boxshadow-color: rgb(0 0 0 / 0.08), 0 2px 5px 1px rgb(0 0 0 / 0.08); + --ds-auro-popover-container-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); +}