-
Notifications
You must be signed in to change notification settings - Fork 3
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 #63
- Loading branch information
1 parent
ed8c485
commit f8abad9
Showing
7 changed files
with
105 additions
and
26 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
| 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,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); | ||
| } | ||
| } |
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,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); | ||
| } |