-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(tokens,styles): add token output for the utility API (#4613)
- Loading branch information
1 parent
ffd1f82
commit 6e3b653
Showing
15 changed files
with
132 additions
and
121 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@swisspost/design-system-tokens': minor | ||
| --- | ||
|
|
||
| Added a new output that includes utility tokens as Sass maps, enabling direct iteration to generate utility classes. |
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,5 @@ | ||
| --- | ||
| '@swisspost/design-system-styles': minor | ||
| --- | ||
|
|
||
| Added a new CSS output file that includes all the utility classes. |
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 @@ | ||
| @forward './temp/utilities-formatted'; |
This file was deleted.
Oops, something went wrong.
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
File renamed without changes.
This file was deleted.
Oops, something went wrong.
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,3 +1,4 @@ | ||
| import './all.js'; | ||
| import './palettes.js'; | ||
| import './tailwind.js'; | ||
| import './utilities.js'; |
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 |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { fileHeader } from 'style-dictionary/utils'; | ||
| import { TOKENSET_NAMES } from '../constants.js'; | ||
| import StyleDictionary from '../style-dictionary.js'; | ||
| import { registerConfigMethod, getTokenValue } from '../methods.js'; | ||
|
|
||
| /** | ||
| * Registers a config method to generate output files for utility tokens. | ||
| */ | ||
| registerConfigMethod((tokenSets, { sourcePath, buildPath }) => { | ||
| const { type, layer, filePath, sets } = tokenSets.output[TOKENSET_NAMES.Utilities]; | ||
|
|
||
| return { | ||
| meta: { | ||
| type, | ||
| layer, | ||
| filePath, | ||
| setNames: Object.keys(sets), | ||
| }, | ||
| source: [`${sourcePath}_temp/output/${filePath}`], | ||
| include: [`${sourcePath}_temp/source/**/*.json`], | ||
| platforms: { | ||
| utilities: { | ||
| transforms: ['name/kebab'], | ||
| buildPath, | ||
| files: [ | ||
| { | ||
| destination: `_utilities-formatted.scss`, | ||
| filter: 'swisspost/source-tokens-filter', | ||
| format: 'swisspost/utility-format', | ||
| options: { | ||
| outputReferences: true, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }; | ||
| }); | ||
|
|
||
| /** | ||
| * Registers the format of the utility output file. | ||
| */ | ||
| StyleDictionary.registerFormat({ | ||
| name: 'swisspost/utility-format', | ||
| format: async ({ dictionary, options, file }) => { | ||
| const header = await fileHeader({ file, commentStyle: 'short' }); | ||
|
|
||
| const utilityTokens = new Map(); | ||
|
|
||
| dictionary.allTokens.forEach(token => { | ||
| const { subitem, state } = token.attributes; | ||
|
|
||
| const previousStates = utilityTokens.get(subitem) ?? []; | ||
| const newState = `\n ${state}: ${getTokenValue(options, token)},`; | ||
|
|
||
| utilityTokens.set(subitem, [...previousStates, newState]); | ||
| }); | ||
|
|
||
| const utilityMaps = Array.from(utilityTokens.entries()).map(([subitem, values]) => { | ||
| return `$${subitem}: (${values.join('')}\n);\n`; | ||
| }); | ||
|
|
||
| return header + utilityMaps.join('\n'); | ||
| }, | ||
| }); |
Oops, something went wrong.