feat!: reduce global design tokens in calcite.css #8215

alisonailea · 2023-11-18T01:08:18Z

Related Issue: #7325 #8141

Summary

Turns out, reducing the tokens set globally in calcite.css required a refactor of how tokens were built. During discussions with Calcite designers we also used this opportunity to update tokens to support Figma Variables, composite tokens, and fix mis-alignments with our token naming scheme. This work introduces breaking changes to tokens.

BREAKING CHANGE:

Platform output
- removes component tokens from global output
- new platform output files.
  - Replaces “headless” with “global”
  - removes “calcite” from filenames
Package.json exports
- @esri/calcite-design-tokens/css/headless was replaced by @esri/calcite-design-tokens/css/global
- @esri/calcite-design-tokens/scss/headless was replaced by @esri/calcite-design-tokens/scss/global
- @esri/calcite-design-tokens/js/headless was replaced by @esri/calcite-design-tokens/js/global
- @esri/calcite-design-tokens/es6/headless was replaced by @esri/calcite-design-tokens/es6/global
Token paths and values
- Border
  - Border width tokens now use t-shirt sizing
    - Border.border-width.0 is now border.width.sm
    - border.border-width.1 is now border.width.base
    - border.border-width.2 is now border.width.md
    - border.border-width.3 is now border.width.lg
    - border.border-width.4 is now border.width.xl
  - Unused border radius tokens were removed
    - Core.border.border-radius.0
    - Core.border.border-radius.2
    - Core.border.border-radius.3
  - Border-radius tokens now use t-shirt sizing
    - semantic.ui.border.border-radius is semantic.border.radius.default
    - Core.border.border-radius.1 is now semantic.border.radius.sm
    - Core.border.border-radius.4 is now semantic.border.radius.md
    - Core.border.border-radius.5 is now semantic.border.radius.lg
    - Core.border.border-radius.6 is now semantic.border.radius.xl
- Sizing
  - core.sizing. tokens are now core.size.default.
- Breakpoints
  - breakpoint tokens are now in their own separate output file for most platform output (except JS)
  - breakpoint token path has been updated .breakpoint. is now .container-size.
  - delete unused breakpoint.cols tokens
- Box Shadow
  - global box shadow tokens now use t-shirt sizing
    - box-shadow.0 = box-shadow.none
    - box-shadow.1 = box-shadow.sm
    - box-shadow.2 = box-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
    - light and dark mode mixins are provided via calcite-design-tokens/css/index.scss
  - remove "ui" from output platform names in favor of "color"
    - --calcite-ui-background = --calcite-color-background
    - --calcite-ui-brand = --calcite-color-brand
    - --calcite-button-transparent-hover = --calcite-color-background-transparent-press
    - --calcite-alert-dismiss-progress-background - —calcite-color-background-transparent-dismiss
    - --calcite-link-blue-underline = --calcite-color-brand-underline
    - --calcite-scrim-background-internal = —calcite-color-background-transparent
- Font
  - Size
    - Font sizes now use t-shirt sizing
      - font.font-size.0 = semantic.font.size.xs
      - font.font-size.1 = semantic.font.size.sm
      - font.font-size.2 = semantic.font.size.default
      - font.font-size.3 = semantic.font.size.md
      - font.font-size.4 = semantic.font.size.lg
      - font.font-size.5 = semantic.font.size.xl
      - font.font-size.6 = semantic.font.size.xxl
    - Unsused font-sizes have been removed
      - font.font-size.7
      - font.font-size.8

BREAKING CHANGE: Border width tokens now use t-shirt sizing. Core.Border.border-width.0 = semantic.border.width.sm Core.Border.border-width.1 = semantic.border.width.base Core.Border.border-width.2 = semantic.border.width.md Core.Border.border-width.3 = semantic.border.width.lg Core.Border.border-width.4 = semantic.border.width.xl Unused border radius tokens were removed Core.border.border-radius.0 Core.border.border-radius.2 Core.border.border-radius.3 Border-radius names updated to use semantic orbital naming structure semantic.ui.border.border-radius = semantic.border.radius.default Core.border.border-radius.1 = semantic.border.radius.sm Core.border.border-radius.4 = semantic.border.radius.md Core.border.border-radius.5 = semantic.border.radius.lg Core.border.border-radius.6 = semantic.border.radius.xl

Adds: - orbital t-shirt size tokens to semantic - relative sizing to core BREAKING CHANGE: - `core.sizing` is now `core.size.default`

core spacing tokens are just a duplicate of size.default tokens

min and max container sizes are now set in semantic tokens. BREAKING CHANGE: - breakpoint tokens are now in their own separeate output file for most platform output (except JS) - breakpoint token path has been updated `.breakpoint.` is now `.container-size.` - delete unused `breakpoint.cols` tokens

BREAKING CHANGE: - global box shadow tokens now use t-shirt sizing - `box-shadow.0` = `box-shadow.none` - `box-shadow.1` = `box-shadow.sm` - `box-shadow.2` = `box-shadow.md`

BREAKING CHANGE: - remove “palette” from core color paths - `core.color.palette.high-saturation` is now `core.color.high-saturation`

Adds composite color scheme tokens to semantic token values BREAKING CHANGE: - all semantic tokens names no longer end with “light” or “dark”. - `color.brand.default.light` is now `color.brand.default` and will inherit light or dark based on which color context file is loaded

This breaks typography tokens out into their own separete semantic group.

BREAKING CHANGE: - `font.font-size.0` = `semantic.font.size.xs` - `font.font-size.1` = `semantic.font.size.sm` - `font.font-size.2` = `semantic.font.size.default` - `font.font-size.3` = `semantic.font.size.md` - `font.font-size.4` = `semantic.font.size.lg` - `font.font-size.5` = `semantic.font.size.xl` - `font.font-size.6` = `semantic.font.size.xxl` - `font.font-size.7` deleted (unused) - `font.font-size.8` deleted (unused)

Significantly reduces the filesize of global output files. Supports composite color context tokens - adds a platform output file for each set color context Supports composite typography tokens - adds a platform output file for typography token groups as mixins or classes for CSS and SCSS Adds an ./index file for CSS and SCSS platforms BREAKING CHANGE: - removes component tokens from global output - new platform output files. - Replaces “headless” with “global” - removes “calcite” from filenames

Adds exports for core tokens BREAKING CHANGE: - `@esri/calcite-design-tokens/css/headless` was replaced by `@esri/calcite-design-tokens/css/global` - `@esri/calcite-design-tokens/scss/headless` was replaced by `@esri/calcite-design-tokens/scss/global` - `@esri/calcite-design-tokens/js/headless` was replaced by `@esri/calcite-design-tokens/js/global` - `@esri/calcite-design-tokens/es6/headless` was replaced by `@esri/calcite-design-tokens/es6/global`

This is a Calcite Component token

jcfranco

✨🏆✨

jcfranco · 2023-11-21T16:12:05Z

packages/calcite-design-tokens/package.json

+  "main": "./dist/js/global.js",
+  "types": "./dist/js/global.d.ts",
+  "files": [
+    "./dist/css/global.css",


Nitpick: since dist includes all of the files we want to ship, why not use a pattern here vs listing each file individually?

jcfranco · 2023-11-22T20:45:42Z

packages/calcite-components/src/components/scrim/scrim.scss

@@ -36,7 +39,7 @@
  justify-center
  overflow-hidden;
  animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
-  background-color: var(--calcite-scrim-background, var(--calcite-scrim-background-internal));
+  background-color: var(--calcite-scrim-background, var(--calcite-color-background-transparent-scrim));


I think this is no longer needed since it's --calcite-scrim-background is now defined at the :host level. We can remove afterwards if this is the case. cc @driskull @macandcheese

part of the errors I was running into came when I tried to remove this and a few other tokens that I thought were no longer needed. We can do cleanup later

**Related Issue:** #7325 #8141 Turns out, reducing the tokens set globally in calcite.css required a refactor of how tokens were built. During discussions with Calcite designers we also used this opportunity to update tokens to support Figma Variables, composite tokens, and fix mis-alignments with our token naming scheme. This work introduces breaking changes to tokens. BREAKING CHANGE: - Platform output - removes component tokens from global output - new platform output files. - Replaces “headless” with “global” - removes “calcite” from filenames - Package.json exports - `@esri/calcite-design-tokens/css/headless` was replaced by `@esri/calcite-design-tokens/css/global` - `@esri/calcite-design-tokens/scss/headless` was replaced by `@esri/calcite-design-tokens/scss/global` - `@esri/calcite-design-tokens/js/headless` was replaced by `@esri/calcite-design-tokens/js/global` - `@esri/calcite-design-tokens/es6/headless` was replaced by `@esri/calcite-design-tokens/es6/global` - Token paths and values - Border - Border width tokens now use t-shirt sizing - `Border.border-width.0` is now `border.width.sm` - `border.border-width.1` is now `border.width.base` - `border.border-width.2` is now `border.width.md` - `border.border-width.3` is now `border.width.lg` - `border.border-width.4` is now `border.width.xl` - Unused border radius tokens were removed - `Core.border.border-radius.0` - `Core.border.border-radius.2` - `Core.border.border-radius.3` - Border-radius tokens now use t-shirt sizing - `semantic.ui.border.border-radius` is `semantic.border.radius.default` - `Core.border.border-radius.1` is now `semantic.border.radius.sm` - `Core.border.border-radius.4` is now `semantic.border.radius.md` - `Core.border.border-radius.5` is now `semantic.border.radius.lg` - `Core.border.border-radius.6` is now `semantic.border.radius.xl` - Sizing - `core.sizing.` tokens are now `core.size.default.` - Breakpoints - breakpoint tokens are now in their own separate output file for most platform output (except JS) - breakpoint token path has been updated `.breakpoint.` is now `.container-size.` - delete unused `breakpoint.cols` tokens - Box Shadow - global box shadow tokens now use t-shirt sizing - `box-shadow.0` = `box-shadow.none` - `box-shadow.1` = `box-shadow.sm` - `box-shadow.2` = `box-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` - light and dark mode mixins are provided via `calcite-design-tokens/css/index.scss` - remove "ui" from output platform names in favor of "color" - --calcite-ui-background = --calcite-color-background - --calcite-ui-brand = --calcite-color-brand - --calcite-button-transparent-hover = --calcite-color-background-transparent-press - --calcite-alert-dismiss-progress-background - —calcite-color-background-transparent-dismiss - --calcite-link-blue-underline = --calcite-color-brand-underline - --calcite-scrim-background-internal = —calcite-color-background-transparent - Font - Size - Font sizes now use t-shirt sizing - `font.font-size.0` = `semantic.font.size.xs` - `font.font-size.1` = `semantic.font.size.sm` - `font.font-size.2` = `semantic.font.size.default` - `font.font-size.3` = `semantic.font.size.md` - `font.font-size.4` = `semantic.font.size.lg` - `font.font-size.5` = `semantic.font.size.xl` - `font.font-size.6` = `semantic.font.size.xxl` - Unsused font-sizes have been removed - `font.font-size.7` - `font.font-size.8` --------- Co-authored-by: Ben Elan <[email protected]> Co-authored-by: JC Franco <[email protected]>

**Related Issue:** #7325 #8141 Turns out, reducing the tokens set globally in calcite.css required a refactor of how tokens were built. During discussions with Calcite designers we also used this opportunity to update tokens to support Figma Variables, composite tokens, and fix mis-alignments with our token naming scheme. This work introduces breaking changes to tokens. BREAKING CHANGE: Platform output: - removes component tokens from global output - new platform output files. - Replaces “headless” with “global” - removes “calcite” from filenames Package.json exports: - `@esri/calcite-design-tokens/css/headless` was replaced by `@esri/calcite-design-tokens/css/global` - `@esri/calcite-design-tokens/scss/headless` was replaced by `@esri/calcite-design-tokens/scss/global` - `@esri/calcite-design-tokens/js/headless` was replaced by `@esri/calcite-design-tokens/js/global` - `@esri/calcite-design-tokens/es6/headless` was replaced by `@esri/calcite-design-tokens/es6/global` Token paths and values: - Border - Border width tokens now use t-shirt sizing - `Border.border-width.0` is now `border.width.sm` - `border.border-width.1` is now `border.width.base` - `border.border-width.2` is now `border.width.md` - `border.border-width.3` is now `border.width.lg` - `border.border-width.4` is now `border.width.xl` - Unused border radius tokens were removed - `Core.border.border-radius.0` - `Core.border.border-radius.2` - `Core.border.border-radius.3` - Border-radius tokens now use t-shirt sizing - `semantic.ui.border.border-radius` is `semantic.border.radius.default` - `Core.border.border-radius.1` is now `semantic.border.radius.sm` - `Core.border.border-radius.4` is now `semantic.border.radius.md` - `Core.border.border-radius.5` is now `semantic.border.radius.lg` - `Core.border.border-radius.6` is now `semantic.border.radius.xl` - Sizing - `core.sizing.` tokens are now `core.size.default.` - Breakpoints - breakpoint tokens are now in their own separate output file for most platform output (except JS) - breakpoint token path has been updated `.breakpoint.` is now `.container-size.` - delete unused `breakpoint.cols` tokens - Box Shadow - global box shadow tokens now use t-shirt sizing - `box-shadow.0` = `box-shadow.none` - `box-shadow.1` = `box-shadow.sm` - `box-shadow.2` = `box-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` - light and dark mode mixins are provided via `calcite-design-tokens/css/index.scss` - remove "ui" from output platform names in favor of "color" - --calcite-ui-background = --calcite-color-background - --calcite-ui-brand = --calcite-color-brand - --calcite-button-transparent-hover = --calcite-color-background-transparent-press - --calcite-alert-dismiss-progress-background - --calcite-color-background-transparent-dismiss - --calcite-link-blue-underline = --calcite-color-brand-underline - --calcite-scrim-background-internal = --calcite-color-background-transparent - Font - Size - Font sizes now use t-shirt sizing - `font.font-size.0` = `semantic.font.size.xs` - `font.font-size.1` = `semantic.font.size.sm` - `font.font-size.2` = `semantic.font.size.default` - `font.font-size.3` = `semantic.font.size.md` - `font.font-size.4` = `semantic.font.size.lg` - `font.font-size.5` = `semantic.font.size.xl` - `font.font-size.6` = `semantic.font.size.xxl` - Unsused font-sizes have been removed - `font.font-size.7` - `font.font-size.8` --------- Co-authored-by: Ben Elan <[email protected]> Co-authored-by: JC Franco <[email protected]>

🤖 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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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 <[email protected]> Co-authored-by: Ali Stump <[email protected]> Co-authored-by: JC Franco <[email protected]>

alisonailea added 22 commits November 17, 2023 11:09

feat: token reference syntax should align with design token standards

2c21075

feat(font tokens): add italic token style to core tokens

0340713

feat(sizing tokens)!: update token names

b5449f0

Adds: - orbital t-shirt size tokens to semantic - relative sizing to core BREAKING CHANGE: - `core.sizing` is now `core.size.default`

feat(spacing tokens): move spaing tokens to semantic

e736b43

core spacing tokens are just a duplicate of size.default tokens

feat(stacking tokens): move z-index to semantic

57e58a2

feat(shadow tokens)!: semantic shadow tokens

7d76f17

BREAKING CHANGE: - global box shadow tokens now use t-shirt sizing - `box-shadow.0` = `box-shadow.none` - `box-shadow.1` = `box-shadow.sm` - `box-shadow.2` = `box-shadow.md`

feat(color tokens)!: remove “palette” from core color paths

c177661

BREAKING CHANGE: - remove “palette” from core color paths - `core.color.palette.high-saturation` is now `core.color.high-saturation`

feat(color tokens): update colors references

d8b45ee

feat(typography tokens): breakout typography tokens

19e80fa

This breaks typography tokens out into their own separete semantic group.

fix(font tokens): remove duplicate names from core paths

c375311

feat: add semantic opacity tokens

1101bb6

chore: remove unused files

477c9b8

feat: add $config to src to support new token transformer

10dbb90

fix(tokens): core token references

36e0d63

fix(font tokens): capitalize description

32679c0

fix(token transformer): cleanup

54b2362

alisonailea requested review from benelan, jcfranco, driskull, geospatialem and a team as code owners November 18, 2023 01:08

github-actions bot assigned alisonailea Nov 18, 2023

github-actions bot added the enhancement Issues tied to a new feature or request. label Nov 18, 2023

alisonailea changed the base branch from main to rc November 18, 2023 01:08

use previous name for inverting focus offset to align with token

f527feb

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 22, 2023

alisonailea added 6 commits November 22, 2023 11:28

fix(tokens): remove unused token sets

41e6741

fix(offset-invert-focust token): remove from semantic

42e411d

This is a Calcite Component token

docs(tokens): update README

1eb3d9f

fix(color token): update values to align with design

00c247b

fix: update import refs in calcite-componetns includes

6e47bc3

fix(color tokens): update references

a039397

alisonailea added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 22, 2023

jcfranco approved these changes Nov 22, 2023

View reviewed changes

alisonailea changed the title ~~feat!: refactor design tokens and token transformer~~ feat!: reduce global design token output Nov 22, 2023

alisonailea changed the title ~~feat!: reduce global design token output~~ feat!: reduce global design tokens in calcite.css Nov 22, 2023

alisonailea merged commit 1d93397 into rc Nov 22, 2023
14 checks passed

alisonailea deleted the astump/7325-reduce-tokens-output branch November 22, 2023 21:07

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

This was referenced Nov 27, 2023

TypeError thrown during build (Sass formatter) #8121

Closed

Console output from design tokens build is very verbose #8124

Open

feat: update design tokens #7984

Closed

calcite-admin mentioned this pull request Dec 2, 2023

chore: release main #8246

Merged

This was referenced Dec 5, 2023

feat!: refactor design tokens and token transformer #8149

Closed

fix: global css file reduce 5000 lines #7980

Closed

alisonailea mentioned this pull request Dec 21, 2023

Update design tokens #7981

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat!: reduce global design tokens in calcite.css #8215

feat!: reduce global design tokens in calcite.css #8215

alisonailea commented Nov 18, 2023 •

edited

Loading

jcfranco left a comment

jcfranco Nov 21, 2023

jcfranco Nov 22, 2023

alisonailea Nov 22, 2023

feat!: reduce global design tokens in calcite.css #8215

feat!: reduce global design tokens in calcite.css #8215

Conversation

alisonailea commented Nov 18, 2023 • edited Loading

Summary

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Nov 21, 2023

Choose a reason for hiding this comment

jcfranco Nov 22, 2023

Choose a reason for hiding this comment

alisonailea Nov 22, 2023

Choose a reason for hiding this comment

alisonailea commented Nov 18, 2023 •

edited

Loading