exported token names should replace "app" with "ui" #8141
Assignees
Labels
4 - verified
Issues that have been released and confirmed resolved.
breaking change
Issues and pull requests with code changes that are not backwards compatible.
bug
Bug reports for broken functionality. Issues should include a reproduction of the bug.
Calcite (dev)
Issues logged by Calcite developers.
calcite-design-tokens
Issues specific to the @esri/calcite-design-tokens package.
estimate - 2
Small fix or update, may require updates to tests.
impact - p3 - not time sensitive
User set priority impact status of p3 - not time sensitive
p - medium
Issue is non core or affecting less that 60% of people using the library
Milestone
Comments
jcfranco
added
bug
github-actions
bot
added
Calcite (dev)
brittneytewks
added
1 - assigned
alisonailea
added
2 - in development
alisonailea
added a commit
that referenced
this issue
Nov 22, 2023
**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` --------- Co-authored-by: Ben Elan <[email protected]> Co-authored-by: JC Franco <[email protected]>
benelan
added a commit
that referenced
this issue
Nov 23, 2023
**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]>
alisonailea
added
3 - installed
|
Installed and assigned for verification. |
benelan
added a commit
that referenced
this issue
Nov 29, 2023
**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]>
geospatialem
added
4 - verified
|
Verified in |
benelan
added a commit
that referenced
this issue
Dec 1, 2023
**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]>
benelan
added a commit
that referenced
this issue
Dec 1, 2023
**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]>
benelan
added a commit
that referenced
this issue
Dec 2, 2023
**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]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Check existing issues
Actual Behavior
Summary
To align with current variables in calcite-components token names should be renamed to use the word "ui" in place of "app", wherever applicable.
cc @alisonailea
Expected Behavior
No longer have tokens using
appnamespace.Reproduction Sample
https://unpkg.com/browse/@esri/[email protected]/dist/css/calcite-headless.css
Reproduction Steps
The provided URL links to one of the output files with the relevant tokens.
Reproduction Version
1.10.0
Relevant Info
No response
Regression?
No response
Priority impact
p4 - not time sensitive
Impact
No response
Calcite package
Esri team
Calcite (dev)
The text was updated successfully, but these errors were encountered: