Design token phase II - Integration across components #7180

geospatialem · 2023-06-15T20:10:03Z

Description

Addresses the final, or second phase, of our design token integration from #6558.
Majority of the effort will be performed in June and July, targeted for early August for additional documentation and pages for the September main release.
cc @alisonailea @jcfranco

Acceptance Criteria

All relevant components have been refactored to use CSS variables which match component design tokens.
- Token Jam Session 01/12/2024
- Design Tokens Standup
- Tracking in Monday
All relevant components have E2E tests to automate testing of token application. (remaining estimate 1-week)
All relevant components have one been added to the custom theme Chromatic test page to visually confirm token application. (remaining estimate 1 day)
All relevant components pass final QA (remaining estimate 5 days)
- Design confirmation design-tokens are in alignment between Figma and Web platforms.
  - Design tokens: Refactor for alignment across the design system #9524 (remaining estimate < 1 day)
  - @alisonailea, @ashetland, and @SkyeSeitz to do final review of component tokens names to confirm pattern alignment. (remaining estimate 1 day)
- Engineering confirmation that tokens work does not cause breaking changes in Calcite-Components (remaining estimate > 1 day)
  - @DitwanP and @geospatialem to do manual check of all themed demos on a local instance in all major browsers to confirm tokens are applied correctly to the component.
- Docs confirmation (remaining estimate > 1 day)
  - Each token as a CSS Custom Property/CSS Variable is listed in the relevant Calcite Component .scss file as a JSDocs @prop "token name": "description"
  - Each token listed in the component's JSDoc section is used in the component code.
  - Each token listed in the component's JSDoc section is listed in the e2e tests under "themed"
    - If a CSS Variable is deprecated, it should be noted in the JSDoc as @prop "token name": [Deprecated] Use "new token name" instead. "description"
  - Confirm any CSS Variables listed as deprecated are tested in E2E tests under a describe("deprecated", () => {}) section

Relevant Info

Component Token Developer Docs
For specific component issues, we can use the design-tokens label.
add your name and status next to component you're working on (start with high ❗ priority components)

Components

Example Use Case

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-my-component-background-color: Specifies the background color of the component.
 * @prop --calcite-el-color-background: [Deprecated] Use `--calcite-my-component-background-color` instead. Specifies the background color of the component.
 * @prop --calcite-my-component-icon-color: Specifies the color of the icon sub-component.
 */
div {
  background-color: var(--calcite-my-component-background-color, var(--calcite-el-color-background, var(--calcite-color-brand)));
}
// calcite-icon
.icon {
    --calcite-icon-color: var(--calcite-my-component-icon-color, var(--calcite-color-brand));
}

describe("theme", () => {
    describe("default", () => {
      themed(`calcite-my-component`, {
        "--calcite-my-component-background-color": {
          shadowSelector: `div`,
          targetProp: "backgroundColor",
        },
        "--calcite-my-component-icon-color": {
          shadowSelector: `.${CSS.icon}`,
          targetProp: "--calcite-icon-color",
        },
      });
    });
    describe("deprecated", () => {
      themed(`calcite-my-component`, {
        "--calcite-el-color-background": {
          shadowSelector: `div`,
          targetProp: "backgroundColor",
        },
      });
    });
});

Priority impact

impact - p2 - want for an upcoming milestone

Esri team

Calcite (design)

The text was updated successfully, but these errors were encountered:

geospatialem · 2023-08-18T18:43:54Z

A list of components we could use for exploring tokens to start estimations and next steps:

avatar
modal
shell-panel
tooltip

@Elijbet

**Related Issue:** #7180 ## Summary This updates how `onToggleOpenCloseComponent` determines the duration for the `openTransitionProp` to be more robust to work consistently across browsers. The previous approach relied on the computed `transition` property having all associated transition values laid out per prop, which didn't work in Safari since it won't include all values if shared. This change should be covered by existing tests. cc @Elijbet

geospatialem · 2023-11-02T16:21:02Z

A related issue surfaced with the Maps SDK for JS team regarding a global font family variable, #7175. Should we consider the effort as part of the design token epic above? cc @alisonailea

**Related Issue:** #7180 ## Summary Adds the following subcomponent tokens (CSS props): - `--calcite-block-border-color` - `--calcite-block-header-background-color` - `--calcite-block-header-background-color-hover` - `--calcite-block-header-text-color` - `--calcite-block-block-text-color` - `--calcite-block-block-text-color-hover`

**Related Issue:** #7180 ## Summary Adds the following subcomponent tokens (CSS props): - `--calcite-notice-background-color` - `--calcite-notice-close-background-color-focus` - `--calcite-notice-close-background-color-press` - `--calcite-notice-close-text-color-hover` - `--calcite-notice-close-text-color` - `--calcite-notice-content-text-color`

**Related Issue:** #7180 ## Summary Updates component token descriptions for `block` and `notice` in alignment with our [documentation standard](https://github.com/Esri/calcite-design-system/wiki/tokens-documentation#component-tokens).

**Related Issue:** [#7180](#7180) ## Summary Add `rating` component tokens. `--calcite-rating-spacing`: Specifies the amount of left and right margin spacing between each item. `--calcite-rating-color-hover`: Specifies the component's item color when hovered or selected. `--calcite-rating-color`: Specifies the component's item color. `--calcite-rating-average-color`: Specifies the component's item color when average is set. `--calcite-rating-average-text-color`: Specifies the component's average text color. `--calcite-rating-count-text-color`: Specifies the component's count text color. --------- Co-authored-by: Ali Stump <[email protected]>

**Related Issue:** #7180 ## Summary Add the following component-scoped CSS Variables to calcite-menu-item: `--calcite-menu-item-accent-color`: Specifies the border color of the component when `active`. `--calcite-menu-item-accent-color-hover`: Specifies the border color of the component when hovered. ` --calcite-menu-background-color`: Specifies the background color of the component. `--calcite-menu-item-sub-menu-border-color`: Specifies the border color of sub-menu. ` --calcite-menu-item-sub-menu-corner-radius`: Specifies the border radius of sub-menu. `--calcite-menu-text-color`: Specifies the text color of the component.

**Related Issue:** [#7180](#7180) ## Summary Add `select` component tokens. `--calcite-select-font-size`: Specifies the font size of `calcite-option`s in the component. `--calcite-select-text-weight`: Specifies the font weight of `calcite-option`s in the component. `--calcite-select-text-color`: Specifies the text color of `calcite-option`s in the component. `--calcite-select-border-color`: Specifies the component's border color. `--calcite-select-icon-color`: Specifies the component's icon color. `--calcite-select-icon-color-hover`: Specifies the component's icon color when hovered or active.

**Related Issue:** [#7180](#7180) ## Summary Add `pagination` component tokens. `--calcite-pagination-spacing`: Specifies the amount of left and right margin spacing between each item. `--calcite-pagination-size`: Specifies the width of each item. `--calcite-pagination-color`: Specifies the component's item color. `--calcite-pagination-color-hover`: Specifies the component's item color when hovered or selected. `--calcite-pagination-color-border-hover`: Specifies the component's item bottom border color when hovered. `--calcite-pagination-color-border-active`: Specifies the component's item bottom border color when selected. `--calcite-pagination-background-color`: Specifies the component's item background color when active. `--calcite-pagination-icon-color-background-hover`: Specifies the component's chevron item background color when hovered.

**Related Issue:** #7180 ## Summary Refactor block heading text color. `open/close` icon shares a hover state with the color of the heading text when the component is open. Adds the following component token: `--calcite-block-heading-text-color-press`

**Related Issue:** #7180 Blocked issues: #11210 ## Summary ### Calcite Button --calcite-button-background-color: Specifies the component's background color when appearance="solid" or appearance="outline-fill". --calcite-button-border-color: Specifies the component's border color when it has appearance="outline" or appearance="outline-fill". --calcite-button-corner-radius: Specifies the component's corner radius. --calcite-button-text-color: Specifies the component's text color.

…7180

**Related Issue:** #7180 ## Summary Add `graph` component tokens. `--calcite-graph-highlight-fill-color`: Specifies the fill color of the `highlight` element, when present.

**Related Issue:** #7180 ## Summary Add `flow` and `flow-item` component tokens. ### Deprecates the following tokens - `--calcite-flow-item-footer-padding`: [Deprecated] Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer. - `--calcite-flow-item-header-border-block-end`: [Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border. ### Adds the following tokens - `--calcite-flow-corner-radius`: Specifies the component's corner radius. - `--calcite-flow-heading-text-color`: Specifies the text color of the component's `heading`. - `--calcite-flow-description-text-color`: Specifies the text color of the component's `description`. - `--calcite-flow-border-color`: Specifies the component's border color. - `--calcite-flow-background-color`: Specifies the component's background color. - `--calcite-flow-header-background-color`: Specifies the background color of the component's header. - `--calcite-flow-footer-background-color`: Specifies the background color of the component's footer. - `--calcite-flow-space`: Specifies the padding of the component's `"unnamed (default)"` slot. - `--calcite-flow-header-content-space`: Specifies the padding of the `"header-content"` slot. - `--calcite-flow-footer-space`: Specifies the padding of the component's footer. - `--calcite-action-background-color`: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s. - `--calcite-action-background-color-hover`: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. - `--calcite-action-background-color-pressed`: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. - `--calcite-action-text-color-hover`: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. - `--calcite-action-text-color-pressed`: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. - `--calcite-popover-border-color`: Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s. - `--calcite-flow-header-action-background-color-hover`: Specifies the background color of the component's `calcite-action` items in the flow item header when hovered. - `--calcite-flow-header-action-background-color-press`: Specifies the background color of the component's `calcite-action` items in the flow item header when pressed. - `--calcite-flow-header-action-background-color`: Specifies the background color of the component's `calcite-action` items in the flow item header. - `--calcite-flow-header-action-indicator-color`: Specifies the color of the component's `calcite-action` items' indicator in the flow item header. - `--calcite-flow-header-action-text-color-press`: Specifies the text color of the component's `calcite-action` items in the flow item header when pressed. - `--calcite-flow-header-action-text-color`: Specifies the text color of the component's `calcite-action` items in the flow item header.

…#11359) **Related Issue:** #7180 ## Summary Add `segmented-control`, `segmented-control-item` component tokens. `--calcite-segmented-control-color`: Specifies the component's color. `--calcite-segmented-control-background-color`: Specifies the component's background color. `--calcite-segmented-control-border-color`: Specifies the component's border color. `--calcite-segmented-control-shadow`: Specifies the component's shadow. `--calcite-segmented-control-icon-color`: Specifies the icons's color.

**Related Issue:** #7180 ## Summary Add `inline-editable` component tokens. `--calcite-inline-editable-background-color-hover`: Specifies the component's background color when hovered. `--calcite-inline-editable-background-color`: Specifies the component's background color. ` --calcite-inline-editable-button-background-color`: Specifies the button element's background color when appearance="solid" or appearance="outline-fill". `--calcite-inline-editable-button-corner-radius`: Specifies the button element's corner radius. `--calcite-inline-editable-button-loader-color`: Specifies the button element's loader color. `--calcite-inline-editable-button-shadow-color`: Specifies the button element's box-shadow color. `--calcite-inline-editable-button-text-color`: Specifies the button element's text color.

geospatialem added this to the 2023 August Priorities milestone Jun 15, 2023

geospatialem assigned jcfranco and alisonailea Jun 15, 2023

geospatialem added the epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. label Jun 15, 2023

github-actions bot added Calcite (design) Issues logged by Calcite designers. p3 - want for upcoming milestone labels Jun 15, 2023

geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Jun 15, 2023

geospatialem assigned eriklharper Jun 15, 2023

geospatialem added the design-tokens Issues requiring design tokens. label Jun 29, 2023

macandcheese mentioned this issue Jul 26, 2023

[Enhancement] Use part html attribute to make styling easier #7353

Closed

3 tasks

geospatialem mentioned this issue Aug 8, 2023

Token and CSS layout implementation #7488

Open

3 tasks

jcfranco mentioned this issue Aug 17, 2023

Expose calcite-components CSS variables for spacing #4437

Closed

geospatialem mentioned this issue Aug 18, 2023

input with slotted content (e.g. calcite-button) has a mismatch of component heights when root-font size has changed #7411

Open

3 tasks

jcfranco mentioned this issue Aug 18, 2023

fix: fix open/close event emitting in Safari #7551

Merged

geospatialem modified the milestones: 2023 August Priorities, 2023 December Priorities Aug 22, 2023

alisonailea mentioned this issue Aug 29, 2023

feat: calcite-design-tokens in monorepo package #7621

Closed

macandcheese mentioned this issue Sep 5, 2023

Avatar: css variable to adjust round corner #7651

Closed

3 tasks

This was referenced Oct 5, 2023

feat: add design-tokens package #7943

Closed

chore: add design tokens to monorepo #7948

Merged

geospatialem mentioned this issue Oct 16, 2023

Audit css variables for alignment with design tokens #4098

Closed

geospatialem mentioned this issue Nov 6, 2023

Avatar: add option to set the background color #4900

Closed

aPreciado88 mentioned this issue Dec 31, 2024

feat(select): add component tokens #11178

Merged

alisonailea mentioned this issue Jan 2, 2025

Convert to W3C DTCG format #11194

Draft

geospatialem mentioned this issue Jan 6, 2025

docs(block, notice): update component token descriptions #11209

Merged

Elijbet mentioned this issue Jan 15, 2025

refactor(block): heading text color #11314

Merged

driskull added a commit that referenced this issue Jan 22, 2025

feat(graph): add component tokens #7180

bf711d0

driskull mentioned this issue Jan 22, 2025

feat(graph): add component tokens #11355

Merged

driskull added a commit that referenced this issue Jan 22, 2025

feat(inline-editable): add component tokens #7180

1d63f15

driskull mentioned this issue Jan 22, 2025

feat(inline-editable): add component tokens #11357

Merged

driskull added a commit that referenced this issue Jan 22, 2025

feat(segmented-control, segmented-control-item): add component tokens #…

e20d410

…7180

driskull mentioned this issue Jan 22, 2025

feat(segmented-control, segmented-control-item): add component tokens #11359

Merged

driskull added a commit that referenced this issue Jan 23, 2025

feat(flow, flow-item): add component tokens #7180

a67d7ad

This was referenced Jan 23, 2025

feat(flow, flow-item): add component tokens #11365

Merged

Component tokens for group headings #11368

Closed

anveshmekala mentioned this issue Jan 24, 2025

feat(date-picker): add component tokens #11380

Open

driskull added a commit that referenced this issue Jan 24, 2025

feat(graph): add component tokens (#11355)

24ff411

**Related Issue:** #7180 ## Summary Add `graph` component tokens. `--calcite-graph-highlight-fill-color`: Specifies the fill color of the `highlight` element, when present.

macandcheese mentioned this issue Jan 30, 2025

fix(shell-panel): Fix visual issues in displayMode="float-all" #11410

Merged

geospatialem modified the milestones: 2025-02-06 - 3.0.0 Feb Breaking Change Release, 2025-02-25 - Feb Milestone Feb 3, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Design token phase II - Integration across components #7180

Design token phase II - Integration across components #7180

geospatialem commented Jun 15, 2023 •

edited by driskull

Loading

geospatialem commented Aug 18, 2023

geospatialem commented Nov 2, 2023

Design token phase II - Integration across components #7180

Design token phase II - Integration across components #7180

Comments

geospatialem commented Jun 15, 2023 • edited by driskull Loading

Description

Acceptance Criteria

Relevant Info

Components

Example Use Case

Priority impact

Esri team

geospatialem commented Aug 18, 2023

geospatialem commented Nov 2, 2023

geospatialem commented Jun 15, 2023 •

edited by driskull

Loading