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-02-25 - Feb ...

Comments

@geospatialem
Copy link
Member

geospatialem commented Jun 15, 2023 •
edited
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. Token Studio and Style Dictionary are UTD with the most recent major release versions Convert Tokens to Style Dictionary 4 and Token Studio 1 #11391
  2. 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
  3. All relevant components have E2E tests to automate testing of token application. (remaining estimate 1-week)
  4. All relevant components have one been added to the custom theme Chromatic test page to visually confirm token application. (remaining estimate 1 day)
  5. 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
benelan pushed a commit that referenced this issue Feb 8, 2025
@driskull @benelan
feat(label): add component tokens (#10688)
f998840 
**Related Issue:** #7180

## Summary

Add `label` component tokens.

`--calcite-label-text-color`: Specifies the component's text color.
benelan pushed a commit that referenced this issue Feb 8, 2025
@driskull @benelan
feat(link): add component tokens (#10689)
9985b51 
**Related Issue:** #7180

## Summary

Add `link` component tokens.

`--calcite-link-text-color`: Specifies the component's text color.
benelan pushed a commit that referenced this issue Feb 8, 2025
@DitwanP @benelan
feat(slider): add component tokens (#10716)
ce740a7 
**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.
benelan pushed a commit that referenced this issue Feb 8, 2025
@driskull @benelan
feat(list, list-item, list-item-group): add component tokens (#10669)
997b7da 
**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.
benelan pushed a commit that referenced this issue Feb 8, 2025
@macandcheese @benelan
feat(panel): Add component tokens (#10822)
dfbe3cd 
**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.
benelan pushed a commit that referenced this issue Feb 8, 2025
@anveshmekala @benelan
feat(navigation-user): add component tokens (#10608)
6cdb98e 
**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.
benelan pushed a commit that referenced this issue Feb 8, 2025
@anveshmekala @benelan
feat(navigation-logo): add component tokens (#10582)
a0b84e1 
**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.
benelan pushed a commit that referenced this issue Feb 8, 2025
@macandcheese @benelan
feat(input): Add component tokens (#10820)
ee926db 
**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]_
benelan pushed a commit that referenced this issue Feb 8, 2025
@DitwanP @benelan
feat(loader): add component tokens (#10979)
2b4c0bf 
**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`
benelan pushed a commit that referenced this issue Feb 8, 2025
@geospatialem @benelan
docs: update component token description for consistency (#11062)
9563666 
**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).
benelan pushed a commit that referenced this issue Feb 8, 2025
@Elijbet @benelan
feat(block-section): add component tokens (#11032)
a7a99b1 
**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`
benelan pushed a commit that referenced this issue Feb 8, 2025
@Elijbet @benelan
feat(block): add component tokens (#11014)
5514944 
**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`
benelan pushed a commit that referenced this issue Feb 8, 2025
@Elijbet @benelan
feat(notice): add component tokens (#11042)
2fb8715 
**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`
benelan pushed a commit that referenced this issue Feb 8, 2025
@geospatialem @benelan
docs(block, notice): update component token descriptions (#11209)
ec196fc 
**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).
benelan pushed a commit that referenced this issue Feb 8, 2025
@aPreciado88 @alisonailea @benelan
feat(rating): add component tokens (#11150)
f23a319 
**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 <astump@esri.com>
benelan pushed a commit that referenced this issue Feb 8, 2025
@anveshmekala @benelan
feat(menu-item): add component tokens (#10654)
7178050 
**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.
benelan pushed a commit that referenced this issue Feb 8, 2025
@aPreciado88 @benelan
feat(select): add component tokens (#11178)
262cf84 
**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.
benelan pushed a commit that referenced this issue Feb 8, 2025
@aPreciado88 @benelan
feat(pagination): add component tokens (#11157)
f5354cd 
**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.
benelan pushed a commit that referenced this issue Feb 8, 2025
@Elijbet @benelan
refactor(block): heading text color (#11314)
49c4c33 
**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`
benelan pushed a commit that referenced this issue Feb 8, 2025
@alisonailea @benelan
feat(button): add component tokens (#10358)
7fb506f 
**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.
benelan pushed a commit that referenced this issue Feb 8, 2025
@driskull @benelan
feat(graph): add component tokens (#11355)
0a54e2f 
**Related Issue:** #7180

## Summary

Add `graph` component tokens.

`--calcite-graph-highlight-fill-color`: Specifies the fill color of the
`highlight` element, when present.
benelan pushed a commit that referenced this issue Feb 8, 2025
@driskull @benelan
feat(flow, flow-item): add component tokens (#11365)
a69460f 
**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.
benelan pushed a commit that referenced this issue Feb 8, 2025
@driskull @benelan
feat(segmented-control, segmented-control-item): add component tokens (…
91fcb70 
…#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.
benelan pushed a commit that referenced this issue Feb 8, 2025
@driskull @benelan
feat(inline-editable): add component tokens (#11357)
e37f8ae 
**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.
benelan pushed a commit that referenced this issue Feb 8, 2025
@anveshmekala @benelan
feat(date-picker): add component tokens (#11380)
85125dd 
**Related Issue:** #7180 

## Summary

Adds following tokens for `calcite-date-picker` component:

`--calcite-date-picker-border-color`: Specifies the component's border
color.
`--calcite-date-picker-corner-radius`: Specifies the component's border
radius.
`--calcite-date-picker-range-calendar-divider-color`: Specifies the
divider color between calendar's when `range="true"`.
`--calcite-date-picker-week-header-text-color`: Specifies the week
header text color.
`--calcite-date-picker-header-action-background-color`: Specifies the
background color of header action's of the component.
`--calcite-date-picker-header-action-background-color-hover`: Specifies
the background color of header action's of the component when hovered.
`--calcite-date-picker-header-action-background-color-press`: Specifies
the background color of header action's of the component when pressed.
`--calcite-date-picker-header-action-text-color`: Specifies the text
color of header action's of the component.
`--calcite-date-picker-header-action-text-color-press`: Specifies the
text color of header action's of the component when pressed.
`--calcite-date-picker-year-text-color`: Specifies the text color of
year & suffix of the component.
`--calcite-date-picker-month-select-font-size`: Specifies the font size
of month select of the component.
`--calcite-date-picker-month-select-text-color`: Specifies the text
color of month select of the component.
`--calcite-date-picker-month-select-icon-color`: Specifies the icon
color of month select of the component.
`--calcite-date-picker-month-select-icon-color-hover`: Specifies the
icon color of month select of the component when hovered.
`--calcite-date-picker-day-background-color`: Specifies the background
color of day of the component.
`--calcite-date-picker-day-background-color-hover`: Specifies the
background color of day of the component when hovered.
`--calcite-date-picker-day-text-color`: Specifies the text color of day
of the component.
`--calcite-date-picker-day-text-color-hover`: Specifies the text color
of day of the component when hovered.
`--calcite-date-picker-current-day-text-color`: Specifies the text color
of current day of the component.
`--calcite-date-picker-day-background-color-selected`: Specifies the
background color of selected day of the component.
`--calcite-date-picker-day-text-color-selected`: Specifies the text
color of selected day of the component.
`--calcite-date-picker-day-range-text-color`: Specifies the text color
of select day range of the component.
`--calcite-date-picker-day-range-background-color`: Specifies the
background color of select day range of the component.
`--calcite-date-picker-day-outside-range-background-color-hover`:
Specifies the background color of day's outside current range when
hovered.
`--calcite-date-picker-day-outside-range-text-color-hover`: Specifies
the text color of day's outside current range when hovered.
alisonailea added a commit that referenced this issue Feb 12, 2025
@alisonailea
feat(dropdown, dropdown-item, dropdown-group): add component tokens (#…
e6d405b 
…11465)

**Related Issue:** #7180 

## Summary

Add Component Tokens

### Dropdown
--calcite-dropdown-background-color

### Dropdown Group
--calcite-dropdown-group-border-color: Specifies the color of the
dropdown's border.
--calcite-dropdown-group-title-text-color: Specifies the color of the
dropdown's title.

### Dropdown Item
--calcite-dropdown-item-background-color-hover: Specifies the background
color of the dropdown item when hovered.
--calcite-dropdown-item-background-color-press: Specifies the background
color of the dropdown item when selected or active.
--calcite-dropdown-item-icon-color-hover: Specifies the color of the
dropdown item icon when hovered.
--calcite-dropdown-item-icon-color-press: Specifies the color of the
dropdown item icons when selected or active.
--calcite-dropdown-item-text-color-press: Specifies the color of the
dropdown item text when selected or active.
--calcite-dropdown-item-text-color: Specifies the color of the dropdown
item text.
@alisonailea alisonailea mentioned this issue Feb 12, 2025
Open
@geospatialem geospatialem mentioned this issue Feb 12, 2025
Merged
geospatialem added a commit that referenced this issue Feb 12, 2025
@geospatialem
docs(dropdown, dropdown-group, dropdown-item): update component token…
4e951e7 
… descriptions (#11537)

**Related Issue:** #7180

## Summary
Updates `dropdown`, `dropdown-group` and `dropdown-item` CSS variable
descriptions in alignment with documentation standards.
alisonailea added a commit that referenced this issue Feb 18, 2025
@alisonailea
feat(chip): deprecate pressed in favor of press (#11389)
ebe29dc 
**Related Issue:** #10832 #7180 

## Summary

Deprecate `--calcite-chip-select-icon-color-pressed` token.

Add `--calcite-chip-select-icon-color-press: Specifies the component's
selection element icon color when active.`
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-02-25 - Feb Milestone
Development

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