-
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.
Merge pull request #1749 from chanzuckerberg/release-v13.2.0
## [13.2.0](v13.1.1...v13.2.0) (2023-09-07) ### Features * **Avatar:** add in expanded size range ([#1734](#1734)) ([7af6e5e](7af6e5e)) * **tokens:** add tooling for EDS theming ([#1738](#1738)) ([91497bf](91497bf)) ### Bug Fixes * opt our rollup CJS build into TS's module interop behavior ([#1747](#1747)) ([2b0855e](2b0855e))
- Loading branch information
Showing
19 changed files
with
1,087 additions
and
97 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 |
|---|---|---|
|
|
@@ -64,7 +64,7 @@ | |
| "files": [ | ||
| "config.js", | ||
| "*.config.js", | ||
| "main.js", | ||
| "main.ts", | ||
| "plopfile.js", | ||
| "src/**/*.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
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,24 @@ | ||
| module.exports = { | ||
| /** | ||
| * Fetch the EDS config from the project using the lilconfig hierarchy. | ||
| * This can be from package.json, or from various separate non-YAML files. | ||
| * | ||
| * @see https://github.com/antonk52/lilconfig#usage | ||
| * @returns nullable config object returned from lilconfig | ||
| */ | ||
| getConfig: async function () { | ||
| const { lilconfig } = require('lilconfig'); | ||
|
|
||
| // read in the config from config file, package json "eds", etc. | ||
| const settings = await lilconfig('eds').search(); | ||
|
|
||
| // If no config exists, fail | ||
| if (!settings) { | ||
| throw new Error( | ||
| 'Please add EDS config to your project before continuing (specify "json" and "css" target paths)', | ||
| ); | ||
| } | ||
|
|
||
| return settings.config; | ||
| }, | ||
| }; |
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,95 @@ | ||
| #!/usr/bin/env node | ||
| (async function () { | ||
| const StyleDictionary = require('style-dictionary'); | ||
| const path = require('path'); | ||
| const fs = require('fs'); | ||
| const { getConfig } = require('./_util'); | ||
|
|
||
| let packageRootPath; | ||
| try { | ||
| packageRootPath = | ||
| path.dirname(require.resolve('@chanzuckerberg/eds')) + '/tokens/json/'; | ||
| } catch (e) { | ||
| console.error('EDS package not installed. Using local path...'); | ||
| packageRootPath = | ||
| path.dirname(require.main.path) + '/src/tokens-dist/json/'; | ||
| } | ||
|
|
||
| // Read the config to sort out where to read JSON from and where to write the CSS file | ||
| const config = await getConfig(); | ||
|
|
||
| // read and parse JSON files on disk | ||
| const localTheme = JSON.parse( | ||
| fs.readFileSync(`${config.json}app-theme.json`, 'utf8'), | ||
| ); | ||
| const baseTheme = JSON.parse( | ||
| fs.readFileSync(`${packageRootPath}theme-base.json`, 'utf8'), | ||
| ); | ||
|
|
||
| // define the header to use in the resulting CSS file so people know not to edit it directly | ||
| StyleDictionary.registerFileHeader({ | ||
| name: 'cssOverrideHeader', | ||
| fileHeader: (defaultMessage) => [ | ||
| ...defaultMessage, | ||
| 'To update, edit app-theme.json, then run `npx eds-apply-theme`', | ||
| ], | ||
| }); | ||
|
|
||
| const EDSStyleDictionary = StyleDictionary.extend({ | ||
| source: [config.json + 'app-theme.json'], | ||
| platforms: { | ||
| css: { | ||
| transforms: [...StyleDictionary.transformGroup.css, 'name/cti/kebab'], | ||
| buildPath: config.css, | ||
| files: [ | ||
| { | ||
| format: 'css/variables', | ||
| destination: 'app-theme.css', | ||
| options: { | ||
| fileHeader: 'cssOverrideHeader', | ||
| }, | ||
| filter: function (token) { | ||
| // don't allow theming on legacy tokens | ||
| return token.attributes.category !== 'legacy'; | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| /** | ||
| * Determine if the given theme file is a subset of what's in the base theme file. | ||
| * If it isnt, throw an error: | ||
| * - If keys are in base that are missing in the theme file, that's OK (no need to override everything) | ||
| * - If keys are in theme that aren't in base, throw (you can't theme tokens that don't exist in EDS) | ||
| * @param {object} base The tokens theme file stored in the EDS project | ||
| * @param {object} theme The project theme file stored in the app code (same format as bas) | ||
| * @param {Array} path The base path, stored as an array of object key names (default []) | ||
| * @throws Error when there are tokens in theme that aren't in base | ||
| */ | ||
| function isStrictSubset(base, theme, path = []) { | ||
| for (const name in theme) { | ||
| if (typeof theme[name] === 'object') { | ||
| if (base[name] === undefined) { | ||
| throw new Error( | ||
| `Local themeable value does not exist in base theme: --${path.join( | ||
| '-', | ||
| )}.${name}"`, | ||
| ); | ||
| } | ||
| isStrictSubset(base[name], theme[name], path.concat(name)); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| try { | ||
| // Keys in the theme file must be a strict subset of those in the base file | ||
| isStrictSubset(baseTheme, localTheme); | ||
| EDSStyleDictionary.buildAllPlatforms(); | ||
| } catch (error) { | ||
| // TODO: if theme has things not in base, error showing where the conflict | ||
| console.error('EDS theming error:', error.message); | ||
| return; | ||
| } | ||
| })(); |
Oops, something went wrong.