From 8d3de2bfb5f5e50819502af2f399d4c44f4988b4 Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Wed, 29 May 2024 16:00:32 -0700 Subject: [PATCH] feat: refactor color token structure with tier 3 tokens #296 --- demo/api.md | 26 ++++++- docs/partials/api.md | 13 +++- package.json | 2 +- scripts/postCss.mjs | 68 ++++++++++++++--- src/base-input.js | 11 ++- src/styleColor.scss | 118 ++++++++++++++++++++++++++++++ src/styles/borders.scss | 47 ------------ src/styles/helpText.scss | 7 -- src/styles/input.scss | 15 +--- src/styles/label.scss | 7 -- src/styles/notificationIcons.scss | 12 --- src/tokens.scss | 7 ++ 12 files changed, 223 insertions(+), 110 deletions(-) create mode 100644 src/styleColor.scss create mode 100644 src/tokens.scss diff --git a/demo/api.md b/demo/api.md index 030511bb..014efdac 100644 --- a/demo/api.md +++ b/demo/api.md @@ -560,7 +560,7 @@ For use cases where the field is `required`, but live validation is not wanted, -### Error support and HTML5 Validity +## Error support and HTML5 Validity The `` component follows the HTML5 input `validity` and `validityState` [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#client-side_validation). @@ -718,7 +718,7 @@ export function customError() { -### Types +## Types ### Password @@ -1076,7 +1076,7 @@ Use the `type="year-month-day"` attribute for a date formatted input. -### Additional Use Cases +## Additional Use Cases ### Swapping Values Between Inputs @@ -1158,4 +1158,22 @@ export function swapInputValues() { } ``` - + + +## 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-input-background-color: var(--ds-color-background-primary-100-default, $ds-color-background-primary-100-default); + --ds-auro-input-border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default); + --ds-auro-input-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); + --ds-auro-input-alert-icon-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default); + --ds-auro-input-type-icon-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default); +} +``` + diff --git a/docs/partials/api.md b/docs/partials/api.md index 4794385a..b6b1f5b4 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -285,7 +285,7 @@ For use cases where the field is `required`, but live validation is not wanted, -### Error support and HTML5 Validity +## Error support and HTML5 Validity The `` component follows the HTML5 input `validity` and `validityState` [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#client-side_validation). @@ -367,7 +367,7 @@ Use the `error` attribute to apply a persistent custom error that supersedes the -### Types +## Types ### Password @@ -557,7 +557,7 @@ Use the `type="year-month-day"` attribute for a date formatted input. -### Additional Use Cases +## Additional Use Cases ### Swapping Values Between Inputs @@ -578,3 +578,10 @@ Example illustrates using a JavaScript function attached to an `auro-button` com + +## 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 dc0067c4..c90f18ac 100644 --- a/package.json +++ b/package.json @@ -149,7 +149,7 @@ "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render", "build:docs": "node scripts/generateDocs.mjs", "build:sass": "npm-run-all build:sass:component postCss:component sass:render", - "build:sass:component": "sass --no-source-map src/style.scss:src/style.css", + "build:sass:component": "for file in src/*.scss; do npx sass --no-source-map \"$file:${file%.scss}.css\"; done", "build:watch": "nodemon -e scss,js --watch src --exec npm run build:dev:assets", "bundler": "rollup -c", "bundler:test": "rollup -c -w", diff --git a/scripts/postCss.mjs b/scripts/postCss.mjs index df95225e..a0966b6c 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/base-input.js b/src/base-input.js index 8af8dba0..1a84ac4a 100644 --- a/src/base-input.js +++ b/src/base-input.js @@ -12,6 +12,9 @@ import { LitElement, css } from "lit"; import { ifDefined } from 'lit/directives/if-defined.js'; import styleCss from "./style-css.js"; +import colorCss from "./styleColor-css.js"; +import tokensCss from "./tokens-css.js"; + import closelg from '@alaskaairux/icons/dist/icons/interface/x-sm.mjs'; import viewPassword from '@alaskaairux/icons/dist/icons/interface/view-password.mjs'; import hidePassword from '@alaskaairux/icons/dist/icons/interface/hide-password.mjs'; @@ -223,9 +226,11 @@ export default class BaseInput extends LitElement { } static get styles() { - return css` - ${styleCss} - `; + return [ + css`${styleCss}`, + css`${colorCss}`, + css`${tokensCss}` + ]; } connectedCallback() { diff --git a/src/styleColor.scss b/src/styleColor.scss new file mode 100644 index 00000000..247eda07 --- /dev/null +++ b/src/styleColor.scss @@ -0,0 +1,118 @@ +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// Support for fallback values +@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss'; + +/* stylelint-disable no-descending-specificity */ + +// Handle highlighting the border during focus and invalid state +@mixin border-highlight { + &:before { + border-bottom-color: transparent; + } +} + +.wrapper { + border-color: transparent; +} + +.inputElement-helpText { + color: var(--ds-auro-input-text-color); +} + +input { + background-color: transparent; + caret-color: var(--ds-auro-input-text-color); + + &::placeholder { + color: transparent; + } + + &:focus { + &::placeholder { + color: var(--ds-auro-input-text-color); + } + } + + &:disabled { + --ds-auro-input-text-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default); + } +} + +label { + color: var(--ds-auro-input-text-color); +} + +.alertNotification { + color: var(--ds-auro-input-alert-icon-color); +} + +:host(:not([bordered], [borderless])) { + .wrapper { + border-bottom-color: var(--ds-auro-input-border-color); + } +} + +:host([bordered]) { + .wrapper { + border-color: var(--ds-auro-input-border-color); + background-color: var(--ds-auro-input-background-color); + + &:focus-within { + --ds-auro-input-border-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default); + + box-shadow: inset 0 0 0 1px var(--ds-auro-input-border-color); + } + } +} + +:host(:not([borderless])) { + .wrapper { + &:focus-within { + --ds-auro-input-border-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default); + + @include border-highlight; + } + } +} + +:host([validity]:not([validity='valid'])) { + .wrapper { + --ds-auro-input-border-color: var(--ds-color-border-error-default, $ds-color-border-error-default); + } + + .inputElement-helpText { + --ds-auro-input-text-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default); + } +} + +:host([validity]:not([validity='valid'])[bordered]) { + .wrapper { + --ds-auro-input-border-color: var(--ds-color-border-error-default, $ds-color-border-error-default); + + box-shadow: inset 0 0 0 1px var(--ds-auro-input-border-color); + } +} + +:host([disabled]) { + .wrapper { + --ds-auro-input-border-color: var(--ds-color-border-disabled-default, $ds-color-border-disabled-default); + } + + .typeIcon { + color: var(--ds-auro-input-type-icon-color); + } + + label { + --ds-auro-input-text-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default); + } +} + +:host([disabled][bordered]) { + .wrapper { + --ds-auro-input-border-color: var(--ds-color-border-disabled-default, $ds-color-border-disabled-default); + } +} + diff --git a/src/styles/borders.scss b/src/styles/borders.scss index ae919ba8..2aaa6b52 100644 --- a/src/styles/borders.scss +++ b/src/styles/borders.scss @@ -3,17 +3,12 @@ @import './../../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss'; @import './../../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints'; -$border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default); -$focus-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default); -$error-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default); - input { border: unset; } .wrapper { border-style: solid; - border-color: transparent; overflow: hidden; position: relative; } @@ -21,16 +16,13 @@ input { :host(:not([bordered], [borderless])) { .wrapper { border-width: 1px 0; - border-bottom-color: $border-color; } } :host([bordered]) { .wrapper { - border-color: $border-color; border-width: 1px; border-radius: var(--ds-border-radius, $ds-border-radius); - background-color: var(--ds-color-base-white, $ds-color-base-white); } } @@ -46,7 +38,6 @@ input { /* stylelint-disable declaration-block-no-redundant-longhand-properties */ - border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 1px; @@ -59,22 +50,7 @@ input { :host(:not([borderless])) { .wrapper { &:focus-within { - border-bottom-color: $focus-color; - @include border-highlight; - - &:before { - border-bottom-color: $focus-color; - } - } - } -} - -:host([bordered]) { - .wrapper { - &:focus-within { - box-shadow: inset 0 0 0 1px $focus-color; - border-color: $focus-color; } } } @@ -83,31 +59,8 @@ input { :host([validity]:not([validity='valid'])) { .wrapper { - border-bottom-color: $error-color; - &:before { border-bottom: 0; } } } - -:host([validity]:not([validity='valid'])[bordered]) { - .wrapper { - box-shadow: inset 0 0 0 1px $error-color; - border-color: $error-color; - } -} - -// Handle disabled state - -:host([disabled]) { - .wrapper { - border-bottom-color: var(--ds-color-border-disabled-default, $ds-color-border-disabled-default); - } -} - -:host([disabled][bordered]) { - .wrapper { - border-color: var(--ds-color-border-disabled-default, $ds-color-border-disabled-default); - } -} diff --git a/src/styles/helpText.scss b/src/styles/helpText.scss index 87bdde18..c12d1acb 100644 --- a/src/styles/helpText.scss +++ b/src/styles/helpText.scss @@ -2,13 +2,6 @@ .inputElement-helpText { margin: var(--ds-size-50, $ds-size-50) 0; - color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs); line-height: 1rem; } - -:host([validity]:not([validity='valid'])) { - .inputElement-helpText { - color: var(--ds-color-alert-error-default, $ds-color-alert-error-default); - } -} \ No newline at end of file diff --git a/src/styles/input.scss b/src/styles/input.scss index b222cbb4..3a6075f3 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss @@ -15,8 +15,6 @@ input { text-overflow: ellipsis; margin: 0; - background-color: transparent; - caret-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); font-family: var(--ds-font-family-default, $ds-font-family-default); font-size: 1rem; transition: all .3s cubic-bezier(.215, .61, .355, 1); @@ -28,19 +26,8 @@ input { display: none; } - &::placeholder { - color: transparent; - } - - &:focus { - &::placeholder { - color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); - } - } - &:disabled { pointer-events: none; background: none; - color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default); } -} \ No newline at end of file +} diff --git a/src/styles/label.scss b/src/styles/label.scss index c894760e..ded784a0 100644 --- a/src/styles/label.scss +++ b/src/styles/label.scss @@ -8,7 +8,6 @@ label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); pointer-events: none; } @@ -90,9 +89,3 @@ label { } } } - -:host([disabled]) { - label { - color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default); - } -} diff --git a/src/styles/notificationIcons.scss b/src/styles/notificationIcons.scss index ab28a210..4ce25b5d 100644 --- a/src/styles/notificationIcons.scss +++ b/src/styles/notificationIcons.scss @@ -20,13 +20,6 @@ padding-right: var(--ds-size-100, $ds-size-100); } -:host([disabled]) { - .typeIcon { - color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default); - } -} - - :host([bordered]) { .typeIcon { padding-left: var(--ds-size-100, $ds-size-100); @@ -46,11 +39,6 @@ } } - -.alertNotification { - color: var(--ds-color-alert-error-default, $ds-color-alert-error-default); -} - .notificationBtn { height: 100%; width: 100%; diff --git a/src/tokens.scss b/src/tokens.scss new file mode 100644 index 00000000..4437b3bd --- /dev/null +++ b/src/tokens.scss @@ -0,0 +1,7 @@ +:host { + --ds-auro-input-background-color: var(--ds-color-background-primary-100-default, $ds-color-background-primary-100-default); + --ds-auro-input-border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default); + --ds-auro-input-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); + --ds-auro-input-alert-icon-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default); + --ds-auro-input-type-icon-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default); +}