Skip to content

Design token phase II - Integration across components #7180

New issue
New issue
Open
Open
Design token phase II - Integration across components#7180
Labels
2 - in developmentIssues that are actively being worked on.Calcite (design)Issues logged by Calcite designers.design-tokensIssues requiring design tokens.enhancementIssues tied to a new feature or request.epicLarge scale issues to be broken up into sub-issues and tracked via sprints and/or project.estimate - 13Requires planning and input from team, consider smaller steps.impact - p2 - want for an upcoming milestoneUser set priority impact status of p2 - want for an upcoming milestonep - highIssue should be addressed in the current milestone, impacts component or core functionality
Milestone
 
2025-06-24 - Jun Milestone
@geospatialem

Description

@geospatialem
geospatialem
opened on Jun 15, 2023

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    2 - in developmentIssues that are actively being worked on.Calcite (design)Issues logged by Calcite designers.design-tokensIssues requiring design tokens.enhancementIssues tied to a new feature or request.epicLarge scale issues to be broken up into sub-issues and tracked via sprints and/or project.estimate - 13Requires planning and input from team, consider smaller steps.impact - p2 - want for an upcoming milestoneUser set priority impact status of p2 - want for an upcoming milestonep - highIssue should be addressed in the current milestone, impacts component or core functionality

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions