Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat!: reduce global design tokens in calcite.css (#8215)
**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 <no-reply@benelan.dev> Co-authored-by: JC Franco <jfranco@esri.com>
- Loading branch information