Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Design token phase II - Integration across components #7180

Open
geospatialem opened this issue Jun 15, 2023 · 7 comments
Open

Design token phase II - Integration across components #7180

geospatialem opened this issue Jun 15, 2023 · 7 comments
Assignees
@alisonailea
Labels
2 - in development Issues that are actively being worked on. Calcite (design) Issues logged by Calcite designers. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. estimate - 13 Requires planning and input from team, consider smaller steps. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2025-01-30 - 3.0....

Comments

@geospatialem
Copy link
Member

geospatialem commented Jun 15, 2023 •
edited by anveshmekala
Loading

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

  1. 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
  2. All relevant components have E2E tests to automate testing of token application. (remaining estimate 1-week)
  3. All relevant components have one been added to the custom theme Chromatic test page to visually confirm token application. (remaining estimate 1 day)
  4. All relevant components pass final QA (remaining estimate 5 days)
    • Design confirmation design-tokens are in alignment between Figma and Web platforms.
    • 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)
@geospatialem geospatialem added enhancement Issues tied to a new feature or request. p - high Issue should be addressed in the current milestone, impacts component or core functionality 0 - new New issues that need assignment. estimate - 13 Requires planning and input from team, consider smaller steps. labels Jun 15, 2023
@geospatialem geospatialem added this to the 2023 August Priorities milestone Jun 15, 2023
@geospatialem 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 github-actions bot added Calcite (design) Issues logged by Calcite designers. p3 - want for upcoming milestone labels Jun 15, 2023
@geospatialem 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 geospatialem added the design-tokens Issues requiring design tokens. label Jun 29, 2023
@macandcheese macandcheese mentioned this issue Jul 26, 2023
Closed
3 tasks
@geospatialem geospatialem mentioned this issue Aug 8, 2023
Open
3 tasks
@jcfranco jcfranco mentioned this issue Aug 17, 2023
Closed
@geospatialem geospatialem mentioned this issue Aug 18, 2023
Open
3 tasks
@geospatialem
Copy link
Member Author

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

  • avatar
  • modal
  • shell-panel
  • tooltip

@jcfranco jcfranco mentioned this issue Aug 18, 2023
Merged
jcfranco added a commit that referenced this issue Aug 18, 2023
@jcfranco
fix: fix open/close event emitting in Safari (#7551)
a68b053 
**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
@alisonailea alisonailea mentioned this issue Aug 29, 2023
Closed
@macandcheese macandcheese mentioned this issue Sep 5, 2023
Closed
3 tasks
This was referenced Oct 5, 2023
Closed
Merged
@geospatialem geospatialem mentioned this issue Oct 16, 2023
Closed
@geospatialem
Copy link
Member Author

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

@geospatialem geospatialem mentioned this issue Nov 6, 2023
Closed
DitwanP added a commit that referenced this issue Nov 20, 2024
@DitwanP
feat(slider): add component tokens (#10716)
cbd5bb0 
**Related Issue:** #7180

## Summary
Add tokens for the slider component, e2e, and custom-theme chromatic
tests. (WIP)

### Slider Tokens
`--calcite-slider-text-color`: Specifies the component's text color.
`--calcite-slider-track-color`: Specifies the component's track color. 
`--calcite-slider-track-fill-color`: Specifies the component's fill
track color.
`--calcite-slider-handle-fill-color`: Specifies the component's handle
fill color.
`--calcite-slider-handle-extension-color`: Specifies the component's
handle extension color.
`--calcite-slider-tick-color`: Specifies the component's tick color. 
`--calcite-slider-tick-border-color`: Specifies the component's tick
border color.
`--calcite-slider-tick-selected-color`: Specifies the component's tick
color when in selected range.
`--calcite-slider-graph-color`: Specifies the component's graph color.
driskull added a commit that referenced this issue Nov 20, 2024
@driskull
feat(list, list-item, list-item-group): add component tokens (#10669)
12e3ff0 
**Related Issue:** #7180

## Summary

adds new component tokens, e2e tests, demo page examples, and chromatic
theme tests.

### New CSS variables

#### List

--calcite-list-background-color: Specifies the component's background
color.

#### ListItem

--calcite-list-background-color-hover: Specifies the component's
background color when hovered.
--calcite-list-background-color-press: Specifies the component's
background color when pressed.
--calcite-list-background-color: Specifies the component's background
color.
 --calcite-list-border-color: Specifies the component's border color.
 --calcite-list-content-color: Specifies the content color.
 --calcite-list-description-color: Specifies the description color.
 --calcite-list-icon-color: Specifies the component's icon color.
 --calcite-list-label-color: Specifies the label color.
--calcite-list-selection-border-color: Specifies the component's
selection border color.

#### ListItemGroup

--calcite-list-background-color: Specifies the component's background
color.
--calcite-list-color: Specifies the component's color.
This was referenced Nov 20, 2024
Merged
Merged
macandcheese added a commit that referenced this issue Nov 21, 2024
@macandcheese
feat(panel): Add component tokens (#10822)
e8228b1 
**Related Issue:** #7180 

This will also serve as a pattern for consuming component like Dialog,
Sheet, etc.

## Summary

`--calcite-panel-corner-radius`: Specifies the corner radius of the
component.
`--calcite-panel-heading-text-color`: Specifies the text color of the
component's `heading`.
`--calcite-panel-description-text-color`: Specifies the text color of
the component's `description`.
`--calcite-panel-border-color`: Specifies the border color of the
component.

`--calcite-panel-background-color`: Specifies the background color of
the component.
`--calcite-panel-header-background-color`: Specifies the background
color of the component's footer.
`--calcite-panel-footer-background-color`: Specifies the background
color of the component's footer.

`--calcite-panel-space`: Specifies the padding of the component's
`"unnamed (default)"` slot.
`--calcite-panel-header-content-space`: Specifies the padding of the
`"header-content"` slot.
`--calcite-panel-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` Action components.
Will apply to any slotted Calcite Action components.
`--calcite-action-background-color-hover`: Specifies the background
color of the component's `closable`, `collapsible`, and `back` Action
components when hovered. Will apply to any slotted Calcite Action
components.
`--calcite-action-background-color-pressed`: Specifies the background
color of the component's `closable`, `collapsible`, and `back` Action
components when pressed. Will apply to any slotted Calcite Action
components.
`--calcite-action-text-color-hover`: Specifies the text and icon color
of the component's `closable`, `collapsible`, and `back` Action
components when hovered. Will apply to any slotted Calcite Action
components.
`--calcite-action-text-color-pressed`: Specifies the text and icon color
of the component's `closable`, `collapsible`, and `back` Action
components when pressed. Will apply to any slotted Calcite Action
components.
`--calcite-popover-border-color`: Specifies the border color of the
component's Calcite Popover component, which is used to display a
Calcite Action Menu when slotted Calcite Actions are present in the
`header-actions-end` slot. Will apply to any slotted Calcite Popover
components.

`--calcite-panel-content-space`: [Deprecated] Specifies the padding of
the component's content. Use `--calcite-panel-space` instead.
`--calcite-panel-footer-padding`: [Deprecated] Specifies the padding of
the component's footer. Use `--calcite-panel-footer-space` instead.
`--calcite-panel-header-border-block-end`: [Deprecated] Specifies the
component header's block end border. Use `--calcite-panel-border-color`
instead.
anveshmekala added a commit that referenced this issue Nov 22, 2024
@anveshmekala
feat(navigation-user): add component tokens (#10608)
32d96a9 
**Related Issue:** #7180 

## Summary
Add the following component-scoped CSS Variables to
calcite-navigation-user:

`--calcite-navigation-accent-color`: Specifies the components's border
color when `active`.
`--calcite-navigation-user-avatar-corner-radius`: Specifies the corner
radius of avatar.
`--calcite-navigation-user-avatar-color`: Specifies the icon color of
avatar.
`--calcite-navigation-background-color`: Specifies the component's
background color.
`--calcite-navigation-user-full-name-text-color`: Specifies the
component's full name text color.
`--calcite-navigation-user-name-text-color`: Specifies the component's
username text color.
@alisonailea alisonailea mentioned this issue Nov 22, 2024
Draft
anveshmekala added a commit that referenced this issue Nov 22, 2024
@anveshmekala
feat(navigation-logo): add component tokens (#10582)
0638891 
**Related Issue:** #7180 

## Summary

Add the following component-scoped CSS Variables to
calcite-navigation-logo:

`--calcite-navigation-accent-color`: Specifies the component's border
color when `active`.
`--calcite-navigation-background-color`: Specifies the component's
background color.
`--calcite-navigation-logo-heading-text-color`: Specifies the
component's default color for heading text.
`--calcite-navigation-logo-text-color`: Specifies the component's
default color for icon and description text.
@jcfranco jcfranco mentioned this issue Nov 26, 2024
Merged
macandcheese added a commit that referenced this issue Nov 26, 2024
@macandcheese
feat(input): Add component tokens (#10820)
4b5ce2c 
**Related Issue:** #7180 

This will also serve as a pattern for related component like Input Text,
Input Number, etc.

## Summary

`--calcite-input-background-color`: Specifies the background color of
the component.
`--calcite-input-border-color`: Specifies the border color of the
component.
`--calcite-input-corner-radius`: Specifies the corner radius of the
component.
`--calcite-input-shadow`: Specifies the shadow of the component.

`--calcite-input-icon-color`: Specifies the icon color of the component.
`--calcite-input-text-color`: Specifies the text color of the component.
`--calcite-input-placeholder-text-color`: Specifies the color of
placeholder text in the component.

`--calcite-input-actions-background-color`: Specifies the background
color of Input's `clearable` and `number-button-type` elements.
`--calcite-input-actions-background-color-hover`: Specifies the
background color of Input's `clearable` and `number-button-type`
elements when hovered.
`--calcite-input-actions-background-color-press`: Specifies the
background color of Input's `clearable` and `number-button-type`
elements when pressed.
`--calcite-input-actions-icon-color`: Specifies the icon color of
Input's `clearable` and `number-button-type` elements.
`--calcite-input-actions-icon-color-hover`: Specifies the icon color of
Input's `clearable` and `number-button-type` elements when hovered.
`--calcite-input-actions-icon-color-press`: Specifies the icon color of
Input's `clearable` and `number-button-type` elements when pressed.
 
`--calcite-input-loading-background-color`: Specifies the background
color of the `loading` element, when present.
`--calcite-input-loading-fill-color`: Specifies the fill color of the
`loading` element, when present.
 
`--calcite-input-prefix-background-color`: Specifies the background
color of the component's prefix, when present.
`--calcite-input-prefix-text-color`: Specifies the text color of the
prefix of the component's prefix, when present.

`--calcite-input-suffix-background-color`: Specifies the background
color of the component's suffix, when present.
`--calcite-input-suffix-text-color`: Specifies the text color of the
component's suffix, when present.

`--calcite-input-prefix-size`: Specifies the component's prefix width,
when present. _[existing]_
`--calcite-input-suffix-size`: Specifies the component's suffix width,
when present. _[existing]_
@DitwanP DitwanP mentioned this issue Dec 4, 2024
Merged
This was referenced Dec 10, 2024
Merged
Merged
DitwanP added a commit that referenced this issue Dec 12, 2024
@DitwanP
feat(loader): add component tokens (#10979)
18db2e2 
**Related Issue:** #7180 #6695

## Summary
Add design tokens for loader component along with e2e tests.

New tokens added:
`--calcite-loader-progress-color-inline`: Specifies the width and height
of the component when set to inline.
`--calcite-loader-text-spacing`: Specifies the component's text margin.
`--calcite-loader-text-weight`: Specifies the component's font weight.
`--calcite-loader-color`: Specifies the component's text color.
`--calcite-loader-progress-color`: Specifies the component's progress
ring color.
`--calcite-loader-track-color`: Specifies the component's track color.

Renamed tokens:
`--calcite-loader-padding` --> `--calcite-loader-spacing`

⚠️ Deprecated tokens:
`--calcite-loader-size-inline`
@Elijbet Elijbet mentioned this issue Dec 13, 2024
Merged
@geospatialem geospatialem mentioned this issue Dec 16, 2024
Merged
geospatialem added a commit that referenced this issue Dec 17, 2024
@geospatialem
docs: update component token description for consistency (#11062)
d89e065 
**Related Issue:** #7180 

## Summary
Provide consistency and alignment in our docs across the design system
for component design tokens, also in alignment with our
#10058 and
#10430. 📚

Also of note, there was an extra `*` in the `navigation logo` [internal
doc](https://next-preview.sites.afd.arcgis.com/calcite-design-system/components/navigation-logo/#styles).
Elijbet added a commit that referenced this issue Dec 23, 2024
@Elijbet
feat(block-section): add component tokens (#11032)
1f9449b 
**Related Issue:** #7180

## Summary
Adds the following subcomponent tokens (CSS props):

- `--calcite-block-section-background-color`
- `--calcite-block-section-border-color`
- `--calcite-block-section-header-text-color`
- `--calcite-block-section-text-color`
- `--calcite-block-section-text-color-hover`
This was referenced Dec 27, 2024
Merged
Open
Elijbet added a commit that referenced this issue Dec 30, 2024
@Elijbet
feat(block): add component tokens (#11014)
3ca4c98 
**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`
@aPreciado88 aPreciado88 mentioned this issue Dec 31, 2024
Open
@alisonailea alisonailea mentioned this issue Jan 2, 2025
Draft
jcfranco pushed a commit that referenced this issue Jan 4, 2025
@Elijbet
feat(notice): add component tokens (#11042)
a61c15a 
**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`
@geospatialem geospatialem mentioned this issue Jan 6, 2025
Merged
geospatialem added a commit that referenced this issue Jan 6, 2025
@geospatialem
docs(block, notice): update component token descriptions (#11209)
40725ee 
**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).
aPreciado88 added a commit that referenced this issue Jan 7, 2025
@aPreciado88 @alisonailea
feat(rating): add component tokens (#11150)
6dbb559 
**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]>
anveshmekala added a commit that referenced this issue Jan 8, 2025
@anveshmekala
feat(menu-item): add component tokens (#10654)
9dc1262 
**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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alisonailea alisonailea

Labels
2 - in development Issues that are actively being worked on. Calcite (design) Issues logged by Calcite designers. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. estimate - 13 Requires planning and input from team, consider smaller steps. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2025-01-30 - 3.0.0 Jan Breaking Chang...
Development

No branches or pull requests
7 participants
@jcfranco @eriklharper @driskull @alisonailea @geospatialem @DitwanP @anveshmekala