-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: refactor color token structure with tier 3 tokens #296
- Loading branch information
1 parent
fa6f4c3
commit a1746ef
Showing
12 changed files
with
218 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) | ||
| // } | ||
| // }) | ||
| // }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| // 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-help-text-color); | ||
| } | ||
|
|
||
| input { | ||
| background-color: transparent; | ||
| caret-color: var(--ds-auro-input-caret-color); | ||
| color: var(--ds-color-input-text-color); | ||
|
|
||
| &::placeholder { | ||
| color: var(--ds-auro-input-placeholder-text-color); | ||
| } | ||
|
|
||
| &:focus { | ||
| &::placeholder { | ||
| --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default}); | ||
| } | ||
| } | ||
|
|
||
| &:disabled { | ||
| --ds-auro-input-input-text-color: var(--ds-color-text-disabled-default, #{$ds-color-text-disabled-default}); | ||
| } | ||
| } | ||
|
|
||
| label { | ||
| color: var(--ds-auro-input-label-text-color); | ||
| } | ||
|
|
||
| .alertNotification { | ||
| color: var(--ds-auro-input-alert-icon-color); | ||
| } | ||
|
|
||
| .typeIcon { | ||
| color: var(--ds-auro-input-type-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-border-ui-focus-default, #{$ds-color-border-ui-focus-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-border-ui-focus-default, #{$ds-color-border-ui-focus-default}); | ||
|
|
||
| @include border-highlight; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| :host([validity]:not([validity='valid'])) { | ||
| --ds-auro-input-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default}); | ||
| --ds-auro-input-help-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]) { | ||
| --ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default}); | ||
| --ds-auro-input-type-icon-color: var(--ds-color-text-disabled-default, #{$ds-color-text-disabled-default}); | ||
| --ds-auro-input-label-text-color: var(--ds-color-text-disabled-default, #{$ds-color-text-disabled-default}); | ||
| } |
Oops, something went wrong.