feat: add json to design token output #8290

alisonailea · 2023-11-28T23:35:55Z

Related Issue: #8287

Summary

updates token output to change js to json.
also fixes files array in package.json to allow SCSS imports using "~@esri/calcite-design-tokens" in calcite-components

jcfranco

Since this is dropping the js output, this should be marked as a breaking change.

jcfranco · 2023-11-29T05:24:27Z

Since this is dropping the js output, this should be marked as a breaking change.

Alternatively, we could keep the JS output and add the JSON output.

jcfranco · 2023-11-29T05:22:14Z

packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts

 import { CalciteScss } from "./scss.js";

 const formatters: Partial<Record<PlatformFormats, string>> = {
  css: CalciteCss,
  scss: CalciteScss,
  sass: CalciteScss,
-  js: CalciteJs,
+  json: CalciteJson,


Do we need a custom formatter or can we use the predefined formatter for JSON?

Did a shallow test and it looks like contents are identical.

updated to use "json"

jcfranco · 2023-11-29T07:05:48Z

Sorry for not catching this sooner, but can you also update the spec tests?

alisonailea · 2023-11-29T20:14:36Z

Sorry for not catching this sooner, but can you also update the spec tests?

opened a different PR to fix the snapshot tests but added the test for the JSON output here

jcfranco · 2023-11-29T20:19:16Z

packages/calcite-design-tokens/package.json

@@ -9,31 +9,10 @@
    "tokens"
  ],
  "type": "module",
-  "main": "./dist/js/global.js",
-  "types": "./dist/js/global.d.ts",
+  "main": "./dist/es6/global.js",


Does this need to be reverted since we're keeping the JS output?

IMO no. It seems like engineers are preferring to use es6 to import specific tokens when necessary. So the es6 format (which is tree-shakable) should be the one imported by default.

Makes sense, but this is now unrelated to this PR and I think falls under breaking change territory.

jcfranco

LGTM! 🚀

Since this is now adding the JSON output, can you update the PR title similar to bf9e03a before merging?

**Related Issue:** #8287 ## Summary updates token output to change js to json. also fixes files array in package.json to allow SCSS imports using "~@esri/calcite-design-tokens" in calcite-components

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@1.1.0...@esri/calcite-design-tokens@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - Change the default export to a tree-shakable list of design tokens in camelCase format rather than a JSON object (`import * as tokens from "@esri/calcite-design-tokens";`) - Use font name in core font family tokens - Remove unnecessary core tokens line-height, font-size, letter-spacing, paragraph-spacing as these can be exclusive to semantic and reference core size tokens - Core size tokens now use their pixel size in their name - Change `border-radius` to `corner-radius` - Remove unnecessary `border-width` tokens `none`, `sm`, `md`, `lg` - Platform output - Remove component tokens from global output - Add new platform output - css - index - global - light - dark - core - breakpoint - typography classes - scss - index - global - light - dark - core - breakpoints - typography mixins - Replace "headless" with "global" - Remove "calcite" from filenames - Package.json exports - `@esri/calcite-design-tokens/css/headless` is now `@esri/calcite-design-tokens/css/global` - `@esri/calcite-design-tokens/scss/headless` is now `@esri/calcite-design-tokens/scss/global` - `@esri/calcite-design-tokens/js/headless` is now `@esri/calcite-design-tokens/js/global` - `@esri/calcite-design-tokens/es6/headless` is now `@esri/calcite-design-tokens/es6/global` - Token paths and values - Border - Use t-shirt sizing for border width tokens - `Border.border-width.0` is now `border.width.none` (--calcite-border-width-none) - `border.border-width.1` is now `border.width.sm` (--calcite-border-width-sm) - `border.border-width.2` is now `border.width.md` (--calcite-border-width-md) - `border.border-width.3` is now `border.width.lg` (--calcite-border-width-lg) - `border.border-width.4` is removed - Remove unused border radius tokens - `Core.border.border-radius.0` - `Core.border.border-radius.2` - `Core.border.border-radius.3` - Use t-shirt sizing for border radius (now called corner radius) tokens - `semantic.ui.border.border-radius` is `semantic.corner.radius.default` - `Core.border.border-radius.1` is now `semantic.corner.radius.sharp` - `Core.border.border-radius.4` is now `semantic.corner.radius.round` - `Core.border.border-radius.5` is now `semantic.corner.radius.pill` - Sizing - `core.sizing.` tokens are now `core.size.default` - Breakpoints - Move breakpoint tokens to their own separate output file for most platform outputs (except JS) - Update breakpoint token path from `.breakpoint.` to `.container-size.` - Delete unused `breakpoint.cols` tokens - Box Shadow - Use t-shirt sizing for global box shadow tokens - `box-shadow.0` is now `shadow.none` - `box-shadow.1` is now `shadow.sm` - `box-shadow.2` is now `shadow.md` - Colors - Remove "palette" from core color paths - `core.color.palette.high-saturation` is now `core.color.high-saturation` - Light Mode and Dark Mode - Semantic color tokens now use the composite color scheme token type to reference "light" and "dark" mode instead of having separate light and dark tokens. - `.calcite-mode-light` and `.calcite-mode-dark` classes as well as the color scheme media queries are now provided via `calcite-design-tokens/css/index.css` - Provide light and dark mode mixins via `calcite-design-tokens/css/index.scss` - Remove "ui" from output platform names in favor of "color" - `--calcite-ui-background` is now `--calcite-color-background` - `--calcite-ui-brand` is now `--calcite-color-brand` - `--calcite-ui-success` is now `--calcite-color-status-success` - `--calcite-ui-danger` is now `--calcite-color-status-danger` - `--calcite-ui-warning` is now `--calcite-color-status-warning` - `--calcite-ui-hint` is now `--calcite-color-status-hint` - `--calcite-button-transparent-hover` is now `--calcite-color-transparent-press` ### Features - Add json to design token output ([#8290](#8290)) ([753061f](753061f)) - Reduce global design tokens in calcite.css ([#8215](#8215)) ([335d010](335d010)) - Update default main file output for design tokens ([#8299](#8299)) ([4050a91](4050a91)) - Update json shape for docs ([#8308](#8308)) ([6fac3e9](6fac3e9)) ### Bug Fixes - Align tokens with figma variables ([#8311](#8311)) ([8d7cf3f](8d7cf3f)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 1.0.0</summary> ## [1.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.3...@esri/eslint-plugin-calcite-components@1.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) </details> <details><summary>@esri/calcite-components: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.11.0...@esri/calcite-components@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __tokens:__ Changes to `@esri/calcite-design-tokens`, including the names of CSS variables used to customize component styling. See the [breaking changes section](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-design-tokens/CHANGELOG.md#200-2023-12-02) of the `@esri/calcite-design-tokens` changelog. ([#8311](#8311)) ([8d7cf3f](8d7cf3f)), ([#8299](#8299)) ([4050a91](4050a91)), ([#8215](#8215)) ([335d010](335d010)) - __button, list, pick-list, value-list:__ Setting `loading` prop to true no longer prevents interaction nor applies disabled styles. If you'd like to block interaction when loading, please set `disabled` along with `loading`. ([#8292](#8292)) ([db3c5c7](db3c5c7)) - __dropdown:__ Dropdown's default `display` was changed from `inline-flex` to `inline-block` to make it easier to prompt truncation in trigger button text with minimal impact to layout (by setting an explicit width __or__ setting `width: 100%` or `display: block` on the dropdown of a width-constrained parent). ([#8253](#8253)) ([7c96e9f](7c96e9f)) - __dropdown, modal:__ For consistency, renames the `width` property to `widthScale`. ([#8251](#8251)) ([ab12968](ab12968)), ([#8252](#8252)) ([6b09245](6b09245)) - __react:__ Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the React wrappers. For example, the first code snippet in [#7185](#7185) is now required, or else the custom elements will not be defined in the browser. ([#8248](#8248)) ([0948c1a](0948c1a)) - __i18n:__ Reduced numbering system support to `latn`, `arab` and `arabext`. The following numbering systems were removed: `bali`, `beng`, `deva`, `fullwide`, `gujr`, `guru`, `hanidec`, `khmr`, `knda`, `laoo`, `limb`, `mlym`, `mong`, `mymr`, `orya`, `tamldec`, `telu`, `thai`, `tibt`. ([#8217](#8217)) ([9946ac1](9946ac1)) - __stepper-item:__ Removed both `previousStep` and `nextStep` message properties. These are no longer overrideable via `messageOverrides`. ([#8234](#8234)) ([331aafb](331aafb)) - __card:__ Removed the `deselect` message property – this property was deprecated in [#6657](#6657) as it is no longer being rendered. This is no longer overrideable via `messageOverrides`. ([#8099](#8099)) ([1bab172](1bab172)) - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Features - __action-menu:__ Set max height of the action menu ([#8275](#8275)) ([ca1be28](ca1be28)) - __action-menu:__ Support action-groups ([#8273](#8273)) ([c07144f](c07144f)) - __combobox, checkbox, input-time-zone, select, text-area:__ Add `status` property ([#8304](#8304)) ([a44e9fe](a44e9fe)) - __handle:__ Add disabled property ([#8283](#8283)) ([7aeecd5](7aeecd5)) - __list-item:__ Add dragDisabled property ([#8285](#8285)) ([f091f26](f091f26)) - __list:__ Support multiple selection using the shift key ([#8301](#8301)) ([79538be](79538be)) - Reduce global design tokens in calcite.css ([#8215](#8215)) ([335d010](335d010)) - __stepper:__ Enable responsive layout ([#7744](#7744)) ([556b8bc](556b8bc)) ### Bug Fixes - Align tokens with figma variables ([#8311](#8311)) ([8d7cf3f](8d7cf3f)) - __button, list, pick-list, value-list:__ Prevent loading prop from affecting interactivity ([#8292](#8292)) ([db3c5c7](db3c5c7)) - __button:__ Sets aria-disabled instead of disabled on internal anchor element ([#8270](#8270)) ([0926eb6](0926eb6)) - __color-picker, popover, shell-panel, slider, tooltip:__ Register events on the window instead of the document ([#8247](#8247)) ([2aaf592](2aaf592)) - __combobox, dropdown, input-date-picker, popover, tooltip:__ Fix positioning of component when component is moved ([#8296](#8296)) ([2b2506d](2b2506d)) - Dragging floating ui components ([#8230](#8230)) ([5a81f6c](5a81f6c)) - __dropdown:__ Change display to inline-block to ease truncation setup ([#8253](#8253)) ([7c96e9f](7c96e9f)) - __dropdown:__ Restore trigger container height ([51d1ea8](51d1ea8)) - __input-time-zone:__ Update time zone items when item-dependent props change ([#8271](#8271)) ([f77532e](f77532e)) - __input:__ Prevents mutating value on `blur` when `type="number"` ([#8245](#8245)) ([58ededd](58ededd)) - __label:__ Associate label to component when `for` prop is set after initialization ([#8309](#8309)) ([e81b650](e81b650)) - __list-item:__ Adds border between grouped and ungrouped list-items ([#8134](#8134)) ([ae9b083](ae9b083)) - __list-item:__ Adds border between last item in a group and slotted item ([#8262](#8262)) ([9b5cf76](9b5cf76)) - __list-item:__ An item with an empty slotted list should be openable. ([#8240](#8240)) ([d615b39](d615b39)) - __list-item:__ Focus on the first focusable element within the component when using arrow keys ([#8291](#8291)) ([b902365](b902365)) - __list-item:__ Reserve space for empty open lists. ([#8239](#8239)) ([484a5aa](484a5aa)) - __list:__ Add live region for dynamically changing list items ([#8148](#8148)) ([e3c0c06](e3c0c06)) - __react:__ Disable includeImportCustomElements to resolve initial render issues ([#8248](#8248)) ([0948c1a](0948c1a)) - __stepper:__ Typo in CSS variable for step bar's fill ([#8255](#8255)) ([2e643aa](2e643aa)) ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Code Refactoring - __card:__ Remove deprecated `deselected` message ([#8099](#8099)) ([1bab172](1bab172)) - __dropdown:__ Rename `width` property to `widthScale` ([#8251](#8251)) ([ab12968](ab12968)) - __i18n:__ Reduce list of supported numbering systems to `latn`, `arab`, and `arabext` ([#8217](#8217)) ([9946ac1](9946ac1)) - __modal:__ Rename `width` property to `widthScale` ([#8252](#8252)) ([6b09245](6b09245)) - __stepper-item:__ No longer supports previousStep and nextStep messages ([#8234](#8234)) ([331aafb](331aafb)) ### Dependencies - The following workspace dependencies were updated - devDependencies - @esri/calcite-design-tokens bumped from 1.1.1-next.2 to 2.0.0 - @esri/eslint-plugin-calcite-components bumped from 0.2.4-next.0 to 1.0.0 </details> <details><summary>@esri/calcite-components-angular: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@1.11.0...@esri/calcite-components-angular@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Dependencies - The following workspace dependencies were updated - dependencies - @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0 </details> <details><summary>@esri/calcite-components-react: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.11.0...@esri/calcite-components-react@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __react:__ Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the React wrappers. For example, the first code snippet in [#7185](#7185) is now required, or else the custom elements will not be defined in the browser. - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ### Bug Fixes - __react:__ Disable includeImportCustomElements to resolve initial render issues ([#8248](#8248)) ([0948c1a](0948c1a)) ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Dependencies - The following workspace dependencies were updated - dependencies - @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev> Co-authored-by: Ali Stump <astump@esri.com> Co-authored-by: JC Franco <jfranco@esri.com>

alisonailea requested review from benelan, jcfranco, driskull, geospatialem and a team as code owners November 28, 2023 23:35

alisonailea changed the base branch from main to rc November 28, 2023 23:36

alisonailea added the p - high Issue should be addressed in the current milestone, impacts component or core functionality label Nov 28, 2023

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Nov 28, 2023

github-actions bot assigned alisonailea Nov 28, 2023

jcfranco requested changes Nov 29, 2023

View reviewed changes

jcfranco reviewed Nov 29, 2023

View reviewed changes

feat: add json to design token output

bf9e03a

alisonailea force-pushed the astump/8287-json-output branch from c09dd59 to bf9e03a Compare November 29, 2023 19:58

alisonailea added 2 commits November 29, 2023 12:06

test: fixed name spaced path for tokens transformer

4ed21df

test: add json token output test

486b4e0

alisonailea requested a review from jcfranco November 29, 2023 20:15

jcfranco reviewed Nov 29, 2023

View reviewed changes

jcfranco approved these changes Nov 29, 2023

View reviewed changes

alisonailea changed the title ~~fix: json output for gatsby~~ feat: json output for gatsby Nov 29, 2023

alisonailea changed the title ~~feat: json output for gatsby~~ feat: add json to design token output Nov 29, 2023

alisonailea added enhancement Issues tied to a new feature or request. and removed bug Bug reports for broken functionality. Issues should include a reproduction of the bug. labels Nov 29, 2023

alisonailea changed the title ~~feat: add json to design token output~~ feat!: add json to design token output Nov 29, 2023

alisonailea changed the title ~~feat!: add json to design token output~~ feat: add json to design token output Nov 29, 2023

fix: revert package.json main output

3708656

alisonailea added the skip visual snapshots Pull requests that do not need visual regression testing. label Nov 29, 2023

alisonailea merged commit 499c917 into rc Nov 29, 2023
12 checks passed

alisonailea deleted the astump/8287-json-output branch November 29, 2023 20:52

github-actions bot added this to the 2023 December Priorities milestone Nov 29, 2023

calcite-admin mentioned this pull request Dec 2, 2023

chore: release main #8246

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add json to design token output #8290

feat: add json to design token output #8290

alisonailea commented Nov 28, 2023 •

edited

jcfranco left a comment

jcfranco commented Nov 29, 2023

jcfranco Nov 29, 2023

jcfranco Nov 29, 2023

alisonailea Nov 29, 2023

jcfranco commented Nov 29, 2023

alisonailea commented Nov 29, 2023

jcfranco Nov 29, 2023

alisonailea Nov 29, 2023

jcfranco Nov 29, 2023

jcfranco left a comment

feat: add json to design token output #8290

feat: add json to design token output #8290

Conversation

alisonailea commented Nov 28, 2023 • edited

Summary

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco commented Nov 29, 2023

jcfranco Nov 29, 2023

Choose a reason for hiding this comment

jcfranco Nov 29, 2023

Choose a reason for hiding this comment

alisonailea Nov 29, 2023

Choose a reason for hiding this comment

jcfranco commented Nov 29, 2023

alisonailea commented Nov 29, 2023

jcfranco Nov 29, 2023

Choose a reason for hiding this comment

alisonailea Nov 29, 2023

Choose a reason for hiding this comment

jcfranco Nov 29, 2023

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

alisonailea commented Nov 28, 2023 •

edited