From 89517eaf4d4ba1688d059baa5fb89c7eed58eaac Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Mon, 11 Dec 2023 12:57:25 -0800 Subject: [PATCH] docs: provide information on legacy support for breaking changes (#8357) **Related Issue:** #8354 ## Summary Updating the Styles.md portion of calcite-components to provide more information on old style tokens and using Calcite design tokens as CSS custom props with Calcite Components. This also makes manual updates to the calcite-design-tokens changelog.md to provide additional information on the changes between 1.0 and 2.0 custom props. --- .../calcite-components/conventions/Styling.md | 70 +++- packages/calcite-design-tokens/CHANGELOG.md | 389 ++++++++++++++---- packages/calcite-design-tokens/README.md | 2 +- 3 files changed, 368 insertions(+), 93 deletions(-) diff --git a/packages/calcite-components/conventions/Styling.md b/packages/calcite-components/conventions/Styling.md index f7624eb9daa..977e3becf32 100644 --- a/packages/calcite-components/conventions/Styling.md +++ b/packages/calcite-components/conventions/Styling.md @@ -32,59 +32,97 @@ Add a class to handle the logic in the component class. ## Light Mode/Dark Mode -In the [global CSS file](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/assets/styles/global.scss), we specify the values of each color for both light and dark mode. This enables theming to be inherited throughout a component tree. Consider this valid example: +Light and dark modes are now provided via Calcite Design Tokens. Color context modes can serve as an important aspect in your apps, and may help your users reduce eye strain and save power. The light or dark mode can also be set explicitly to meet an app's requirements. + +### Set mode via a class + +Calcite provides two CSS classes `calcite-mode-dark` and `calcite-mode-light` which will explicitly set the value of the Calcite CSS custom props. This is useful when always want to display a set of components in a specific color mode. + +This will require that you have imported Calcite token styles either through Calcite Components or directly, `@esri/calcite-design-tokens/dist/css/index.css` ```html
+

All the components in this div will always use dark mode styles

+ Button text + +
+``` + +If you want your components to respond to a device's `@media (prefers-color-scheme)` you should use the `calcite-mode-auto` class. + +```html +
+

All the components in this div will respond to the light or dark mode set by your device.

Button text
``` -This will cause both the button and the date picker to use the dark mode color variables declared in the global file. This makes it very easy for developers to move an entire app from light to dark mode and vice versa. +#### Styling a component's SASS file + +Along with Calcite Components you can use Calcite Design Tokens to build your own components that automatically have Calcite colors and styles. -To make this work, inside a component's SASS file, _you must use colors from the theme variables_. For example +These design tokens are provided as CSS custom props through `calicte.css` or import them from `@esri/calcite-design-tokens/dist/css/index.css`. You can [read more on custom theming with Calcite here](#custom-themes). ```scss -// 🙅‍♀️ using the sass var will not correctly inherit or change in light/dark mode +// 👍 Using the CSS var will inherit the value correctly :host { - color: $ui-brand-light; + color: var(--calcite-color-brand); } +``` + +There are some edge cases where you may wish to isolate and use only the values of a specific mode. In that case you can import a set of mode tokens directly. + +```scss +@import "~@esri/calcite-design-tokens/dist/scss/dark"; -// 👍 using the CSS var will inherit correctly +// 🙅‍♀️ However, it will not correctly inherit or change it's value when swapping light/dark mode :host { - color: var(--calcite-color-brand); + /* The color property of this component will always be #007ac2 */ + color: $calcite-color-brand; } ``` +## Legacy Tokens + +In Calcite's [2.0.0](https://github.com/Esri/calcite-design-system/releases/tag/%40esri%2Fcalcite-design-tokens%402.0.0) release, design tokens were refactored, which included the removal and refactoring of legacy CSS custom properties. Refer to the [map of token changes from 2.0.0](https://github.com/Esri/calcite-design-tokens/CHANGELOG.md#20-map-of-token-changes) for a more comprehensive list of changes. + +In the release of 2.0 Calcite Component styles got a major refactor which included the removal and reassignment of legacy CSS Custom Properties originally introduced through calcite-styles/calcite-colors. To see a full list of CSS Custom Property additions, deletions, and renamed tokens please refer to the [Calcite Design Tokens 2.0 Changelog > Map of token changes](../../calcite-design-tokens/CHANGELOG.md#20-map-of-token-changes). + +For backwards compatibility, deprecated tokens will continue to be provided until the next major release via [\_legacy.scss](../src/assets/styles/_legacy.scss) + ## Custom Themes -Since Calcite Components might be used in many different contexts such as configurable apps, multiple themes and appearances need to be supported. The most common use case for custom themes are applications where the end user needs to be able to customize brand colors and typography. To this end custom theming can be accomplished by overriding the [CSS Custom Properties (CSS Variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) from the main light and dark modes with new values: +Since Calcite Components might be used in many different contexts, multiple themes and appearances need to be supported. The most common use case for custom themes are applications where the end-user needs to be able to customize brand colors and typography. To this end, custom theming can be accomplished by overriding the [CSS Custom Properties (CSS Variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) from the main light and dark modes with new values: ```css -:root { - --calcite-color-brand: red; +@media (prefers-color-scheme: light) { + :root { + --calcite-color-brand: red; + } } ``` -You can apply these overrides to individual components as well: +You can override tokens on specific Calcite Components: ```css calcite-slider { - --calcite-color-brand: red; + --calcite-color-brand: blue; } ``` -Or, add a class to the specific instance: +Or, override it in a class: ```css .my-custom-theme { - --calcite-color-brand: red; + --calcite-color-brand: green; } ``` +Additionally, inline styling can be achieved: + ```html - + ``` ### Typography @@ -93,7 +131,7 @@ All components have been constructed to inherit their `font-family`. This enable ```css :root { - font-family: "Comic Sans"; + --calcite-font-family: "Comic Sans"; } ``` diff --git a/packages/calcite-design-tokens/CHANGELOG.md b/packages/calcite-design-tokens/CHANGELOG.md index 4d634fdb9c7..a24917a533c 100644 --- a/packages/calcite-design-tokens/CHANGELOG.md +++ b/packages/calcite-design-tokens/CHANGELOG.md @@ -23,83 +23,320 @@ __Note:__ Version bump only for package @esri/calcite-design-tokens ### ⚠ 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 +- Changes + - Package Exports + - Update the default export to a tree-shakable list of design tokens in camelCase. This replaces the prior full JSON object (`import * as tokens from "@esri/calcite-design-tokens";`) + - Changes to token names + - Use font name in core font family tokens instead of "primary"|"secondary" (these terms should only be used in Semantic tier tokens) + - Core size token names now reference their pixel size. + - Use t-shirt sizing in Semantic tokens to provide more usage context. + - Use `container-size` in place of `breakpoints` + - Use `corner-radius` in place of `border-radius` + - Use `color` in place of `ui` + - Changes to token values + - color tokens may now use a composite token schema to define a "light" and "dark" context in their value + - Changes to output filenames + - `@esri/calcite-design-tokens/css/calcite-headless` is now `@esri/calcite-design-tokens/css/global` + - `@esri/calcite-design-tokens/css/calcite-light` is now `@esri/calcite-design-tokens/css/light` + - `@esri/calcite-design-tokens/css/calcite-dark` is now `@esri/calcite-design-tokens/css/dark` + - `@esri/calcite-design-tokens/scsscalcite-headless` is now `@esri/calcite-design-tokens/scss/global` + - `@esri/calcite-design-tokens/scss/calcite-light` is now `@esri/calcite-design-tokens/scss/light` + - `@esri/calcite-design-tokens/scss/calcite-dark` is now `@esri/calcite-design-tokens/scss/dark` + - `@esri/calcite-design-tokens/js/calcite-headless` is now `@esri/calcite-design-tokens/js/global` + - `@esri/calcite-design-tokens/es6/calcite-headless` is now `@esri/calcite-design-tokens/es6/global` +- Deprecations + - Deprecate core tokens "line-height", "font-size", "letter-spacing", and "paragraph-spacing". These tokens all reference Core tier size tokens and can be exclusive to the Semantic tier. + - Deprecate unused `border-width` tokens `none`, `sm`, `md`, `lg` + - Deprecate core tokens included in "global" output (Core tokens may be imported separately if necessary) + - Deprecate component tokens (these were unused) + - Deprecate light and dark tokens (tokens may now have a light and dark context) +- Additions + - New platform output files + - CSS, SCSS, JS, ES6 + - `global` + - Includes all Semantic tier tokens, except those captured in other platform output files (light, dark, etc.) + - `core` + - Includes all Core tier tokens + - CSS + - `index.css` + - Includes `.calcite-mode-light`, `.calcite-mode-dark`, and `prefers-color-scheme` media queries which sets `.calcite-mode-auto` classes built from "light" and "dark" composite color tokens. Sets tokens to their "light" context by default. + - `light.css` + - Includes all composite color tokens assigned the value of their "light" color context. + - `dark.css` + - Includes all composite color tokens assigned the value of their "dark" color context. + - `breakpoint.css` + - Includes all media breakpoints + - `classes.css` + - Includes all helper 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` + - `index.css` + - Includes `.calcite-mode-light`, `.calcite-mode-dark`, and `prefers-color-scheme` media queries which sets `.calcite-mode-auto` classes built from "light" and "dark" composite color tokens. Sets tokens to their "light" context by default. + - `light.css` + - Includes all composite color tokens assigned the value of their "light" color context. + - `dark.css` + - Includes all composite color tokens assigned the value of their "dark" color context. + - `breakpoint.css` + - Includes all media breakpoints + - `mixins.css` + - Includes all helper typography mixins + +#### Token changes for 2.0.0 + +##### Colors + +| Deprecated | Updated | +| ---------------------------------------------- | ------------------------------------ | +| --calcite-ui-brand | --calcite-color-brand | +| --calcite-ui-brand-hover | --calcite-color-brand-hover | +| --calcite-ui-brand-press | --calcite-color-brand-press | +| | --calcite-color-brand-underline | +| --calcite-ui-background | --calcite-color-background | +| --calcite-ui-foreground-1 | --calcite-color-foreground-1 | +| --calcite-ui-foreground-2 | --calcite-color-foreground-2 | +| --calcite-ui-foreground-3 | --calcite-color-foreground-3 | +| --calcite-semantic-ui-color-foreground-current | --calcite-color-foreground-current | +| --calcite-ui-foreground-current | --calcite-color-foreground-current | +| --calcite-ui-focus-offset-invert | --calcite-offset-invert-focus | +| | --calcite-color-transparent | +| | --calcite-color-transparent-press | +| | --calcite-color-transparent-hover | +| | --calcite-color-transparent-scrim | +| | --calcite-color-transparent-tint | +| --calcite-ui-text-1 | --calcite-color-text-1 | +| --calcite-ui-text-2 | --calcite-color-text-2 | +| --calcite-ui-text-3 | --calcite-color-text-3 | +| --calcite-ui-text-inverse | --calcite-color-text-inverse | +| --calcite-ui-text-link | --calcite-color-text-link | +| --calcite-ui-border-1 | --calcite-color-border-1 | +| --calcite-ui-border-2 | --calcite-color-border-2 | +| --calcite-ui-border-3 | --calcite-color-border-3 | +| --calcite-ui-border-input | --calcite-color-border-input | +| | --calcite-color-border-white | +| | --calcite-color-border-ghost | +| --calcite-ui-info | --calcite-color-status-info | +| --calcite-ui-info-hover | --calcite-color-status-info-hover | +| --calcite-ui-info-press | --calcite-color-status-info-press | +| --calcite-ui-success | --calcite-color-status-success | +| --calcite-ui-success-hover | --calcite-color-status-success-hover | +| --calcite-ui-success-press | --calcite-color-status-success-press | +| --calcite-ui-warning | --calcite-color-status-warning | +| --calcite-ui-warning-hover | --calcite-color-status-warning-hover | +| --calcite-ui-warning-press | --calcite-color-status-warning-press | +| --calcite-ui-danger | --calcite-color-status-danger | +| --calcite-ui-danger-hover | --calcite-color-status-danger-hover | +| --calcite-ui-danger-press | --calcite-color-status-danger-press | +| --calcite-ui-inverse | --calcite-color-inverse | +| | --calcite-color-inverse-press | +| | --calcite-color-inverse-hover | + +##### Z-index + +| Deprecated | Updated | +| ------------------------------ | -------------------------- | +| --calcite-app-z-index | --calcite-z-index | +| --calcite-app-z-index-tooltip | --calcite-z-index-tooltip | +| --calcite-app-z-index-popup | --calcite-z-index-popup | +| --calcite-app-z-index-modal | --calcite-z-index-modal | +| --calcite-app-z-index-overlay | --calcite-z-index-overlay | +| --calcite-app-z-index-dropdown | --calcite-z-index-dropdown | +| --calcite-app-z-index-toast | --calcite-z-index-toast | +| --calcite-app-z-index-header | --calcite-z-index-header | +| --calcite-app-z-index-sticky | --calcite-z-index-sticky | + +##### Breakpoints + +| Deprecated | Updated | +| -------------------------------------- | -------------------------------------- | +| --calcite-app-breakpoint-cols-lg | | +| --calcite-app-breakpoint-cols-md | | +| --calcite-app-breakpoint-cols-sm | | +| --calcite-app-breakpoint-cols-xs | | +| --calcite-app-breakpoint-content-fixed | --calcite-container-size-content-fixed | +| --calcite-app-breakpoint-content-fluid | --calcite-container-size-content-fluid | +| --calcite-app-breakpoint-width-lg | --calcite-container-size-width-lg-max | +| --calcite-app-breakpoint-width-md | --calcite-container-size-width-md-max | +| --calcite-app-breakpoint-width-sm | --calcite-container-size-width-sm-max | +| --calcite-app-breakpoint-width-xs | --calcite-container-size-width-xs-max | +| --calcite-app-breakpoint-width-xxs | --calcite-container-size-width-xxs-max | +| | --calcite-container-size-width-lg-min | +| | --calcite-container-size-width-md-min | +| | --calcite-container-size-width-sm-min | +| | --calcite-container-size-width-xs-min | +| | --calcite-container-size-width-xxs-min | + +##### Spacing/Sizing + +| Deprecated | Updated | +| -------------------------- | ---------------------- | +| --calcite-app-spacing-none | | +| --calcite-app-spacing-28 | | +| --calcite-app-spacing-27 | | +| --calcite-app-spacing-26 | | +| --calcite-app-spacing-25 | | +| --calcite-app-spacing-24 | | +| --calcite-app-spacing-23 | | +| --calcite-app-spacing-22 | | +| --calcite-app-spacing-21 | | +| --calcite-app-spacing-20 | | +| --calcite-app-spacing-19 | | +| --calcite-app-spacing-18 | | +| --calcite-app-spacing-17 | | +| --calcite-app-spacing-16 | | +| --calcite-app-spacing-15 | | +| --calcite-app-spacing-14 | | +| --calcite-app-spacing-13 | | +| --calcite-app-spacing-12 | | +| --calcite-app-spacing-11 | --calcite-spacing-xxxl | +| --calcite-app-spacing-10 | | +| --calcite-app-spacing-9 | | +| --calcite-app-spacing-8 | --calcite-spacing-xxl | +| --calcite-app-spacing-7 | --calcite-spacing-xl | +| --calcite-app-spacing-6 | --calcite-spacing-lg | +| --calcite-app-spacing-5 | --calcite-spacing-md | +| --calcite-app-spacing-4 | | +| --calcite-app-spacing-3 | --calcite-spacing-sm | +| --calcite-app-spacing-2 | --calcite-spacing-xs | +| --calcite-app-spacing-1 | --calcite-spacing-xxs | +| --calcite-app-spacing-0 | --calcite-spacing-base | +| | --calcite-spacing-px | +| --calcite-app-sizing-none | | +| --calcite-app-sizing-28 | | +| --calcite-app-sizing-27 | | +| --calcite-app-sizing-26 | | +| --calcite-app-sizing-25 | | +| --calcite-app-sizing-24 | | +| --calcite-app-sizing-23 | | +| --calcite-app-sizing-22 | | +| --calcite-app-sizing-21 | | +| --calcite-app-sizing-20 | | +| --calcite-app-sizing-19 | | +| --calcite-app-sizing-18 | | +| --calcite-app-sizing-17 | | +| --calcite-app-sizing-16 | | +| --calcite-app-sizing-15 | | +| --calcite-app-sizing-14 | | +| --calcite-app-sizing-13 | | +| --calcite-app-sizing-12 | | +| --calcite-app-sizing-11 | --calcite-size-xxxl | +| --calcite-app-sizing-10 | | +| --calcite-app-sizing-9 | --calcite-size-xxl | +| --calcite-app-sizing-8 | --calcite-size-xl | +| --calcite-app-sizing-7 | --calcite-size-lg | +| --calcite-app-sizing-6 | --calcite-size-md-plus | +| --calcite-app-sizing-5 | --calcite-size-md | +| --calcite-app-sizing-4 | --calcite-size-sm-plus | +| --calcite-app-sizing-3 | --calcite-size-sm | +| --calcite-app-sizing-2 | --calcite-size-xs | +| --calcite-app-sizing-1 | --calcite-size-xxs | +| --calcite-app-sizing-0 | --calcite-size-xxxs | +| | --calcite-size-px | + +##### Opacity + +| Deprecated | Updated | +| ------------------------- | ----------------------- | +| --calcite-app-opacity-100 | --calcite-opacity-full | +| --calcite-app-opacity-96 | | +| --calcite-app-opacity-92 | | +| --calcite-app-opacity-90 | | +| --calcite-app-opacity-85 | --calcite-opacity-dark | +| --calcite-app-opacity-80 | | +| --calcite-app-opacity-70 | | +| --calcite-app-opacity-60 | | +| --calcite-app-opacity-50 | --calcite-opacity-half | +| --calcite-app-opacity-40 | --calcite-opacity-light | +| --calcite-app-opacity-30 | | +| --calcite-app-opacity-20 | | +| --calcite-app-opacity-10 | | +| --calcite-app-opacity-8 | | +| --calcite-app-opacity-4 | | +| --calcite-app-opacity-0 | | + +##### Border + +| Deprecated | Updated | +| --------------------------------- | ----------------------------- | +| --calcite-app-border-width-none | --calcite-border-width-none | +| --calcite-app-border-width-4 | | +| --calcite-app-border-width-3 | | +| --calcite-app-border-width-2 | --calcite-border-width-lg | +| --calcite-app-border-width-1 | --calcite-border-width-md | +| --calcite-app-border-width-0 | --calcite-border-width-sm | +| --calcite-app-border-radius-full | --calcite-corner-radius-pill | +| --calcite-app-border-radius-half: | | +| --calcite-app-border-radius-none | --calcite-corner-radius-sharp | +| --calcite-app-border-radius-6 | | +| --calcite-app-border-radius-5 | | +| --calcite-app-border-radius-4 | | +| --calcite-app-border-radius-3 | | +| --calcite-app-border-radius-2 | | +| --calcite-app-border-radius-1 | --calcite-corner-radius-round | +| --calcite-app-border-radius-0 | --calcite-corner-radius-0 | + +##### Font + +| Deprecated | Updated | +| ----------------------------------------------- | ------------------------------------------- | +| --calcite-app-font-text-case-capitalize | --calcite-font-text-case-capitalize | +| --calcite-app-font-text-case-lowercase | --calcite-font-text-case-lowercase | +| --calcite-app-font-text-case-uppercase | --calcite-font-text-case-uppercase | +| --calcite-app-font-text-case-none | --calcite-font-text-case-none | +| --calcite-app-font-text-decoration-underline | --calcite-font-text-decoration-underline | +| --calcite-app-font-text-decoration-none | --calcite-font-text-decoration-none | +| --calcite-app-font-paragraph-spacing-normal | --calcite-font-paragraph-spacing-normal | +| --calcite-app-font-letter-spacing-wide | --calcite-font-letter-spacing-wide | +| --calcite-app-font-letter-spacing-normal | --calcite-font-letter-spacing-normal | +| --calcite-app-font-letter-spacing-tight | --calcite-font-letter-spacing-tight | +| --calcite-app-font-size-15: | | +| --calcite-app-font-size-14: | | +| --calcite-app-font-size-13: | | +| --calcite-app-font-size-12: | | +| --calcite-app-font-size-11: | | +| --calcite-app-font-size-10: | | +| --calcite-app-font-size-9: | | +| --calcite-app-font-size-8: | | +| --calcite-app-font-size-7: | | +| --calcite-app-font-size-6: | --calcite-font-size-xxl | +| --calcite-app-font-size-5: | --calcite-font-size-xl | +| --calcite-app-font-size-4: | --calcite-font-size-lg | +| --calcite-app-font-size-3: | --calcite-font-size-md | +| --calcite-app-font-size-2: | --calcite-font-size | +| --calcite-app-font-size-1: | --calcite-font-size-sm | +| --calcite-app-font-size-0: | --calcite-font-size-xs | +| --calcite-app-font-line-height-relative-loose | --calcite-font-line-height-relative-loose | +| --calcite-app-font-line-height-relative-relaxed | --calcite-font-line-height-relative-relaxed | +| --calcite-app-font-line-height-relative-normal | --calcite-font-line-height-relative-normal | +| --calcite-app-font-line-height-relative-snug | --calcite-font-line-height-relative-snug | +| --calcite-app-font-line-height-relative-tight | --calcite-font-line-height-relative-tight | +| --calcite-app-font-line-height-relative | --calcite-font-line-height-relative | +| --calcite-app-font-line-height-fixed-12 | | +| --calcite-app-font-line-height-fixed-11 | | +| --calcite-app-font-line-height-fixed-10 | | +| --calcite-app-font-line-height-fixed-9 | | +| --calcite-app-font-line-height-fixed-8 | | +| --calcite-app-font-line-height-fixed-7 | | +| --calcite-app-font-line-height-fixed-6 | | +| --calcite-app-font-line-height-fixed-5 | | +| --calcite-app-font-line-height-fixed-4 | | +| --calcite-app-font-line-height-fixed-3 | --calcite-font-line-height-fixed-xl | +| --calcite-app-font-line-height-fixed-2 | --calcite-font-line-height-fixed-lg | +| --calcite-app-font-line-height-fixed-1 | | +| --calcite-app-font-line-height-fixed | --calcite-font-line-height-fixed-sm | +| --calcite-app-font-weight-heavy: | | +| --calcite-app-font-weight-black: | | +| --calcite-app-font-weight-extrabold: | | +| --calcite-app-font-weight-bold: | --calcite-font-weight-bold | +| --calcite-app-font-weight-demi: | --calcite-font-weight-semibold | +| --calcite-app-font-weight-medium-italic | | +| --calcite-app-font-weight-medium: | --calcite-font-weight-medium | +| --calcite-app-font-weight-regular: | --calcite-font-weight-regular | +| | --calcite-font-weight-normal | +| --calcite-app-font-weight-light: | --calcite-font-weight-light | +| --calcite-app-font-weight-thin: | | +| --calcite-app-font-weight-ultralight: | | +| --calcite-app-font-family-code: | --calcite-font-family-code | +| --calcite-app-font-family-secondary: | | +| --calcite-app-font-family-primary: | --calcite-font-family-primary | ### Features diff --git a/packages/calcite-design-tokens/README.md b/packages/calcite-design-tokens/README.md index 1496370db5a..9007d9d8ae9 100644 --- a/packages/calcite-design-tokens/README.md +++ b/packages/calcite-design-tokens/README.md @@ -18,7 +18,7 @@ Reference tokens in your CSS: } ``` -## Token assets +## Importing tokens These are the published asset files generated by the token transformer: