Tokens

Calcite Tokens

Testing

E2E

Automated testing of component tokens may be done via the themed helper in commonTests.

desribe("theme", () => {
    themed(`calcite-button`, {
        "--calcite-button-background-color": {
            shadowSelector: `.${CSS.button}`,
            targetProp: "backgroundColor",
        },
        "--calcite-button-border-color": {
            shadowSelector: `.${CSS.button}`,
            targetProp: "borderColor",
        }});
});

The themed helper accepts an object of tokens to test with the token name as the key and accepts an object or array of objects as a value with the following properties...

/**
 * The selector of the target element. When not provided, the component tag is used.
 */
selector?: string;

/**
 * This selector will be used to find the target element within the shadow DOM of the component.
 */
shadowSelector?: string;

/**
 * The CSSStyleDeclaration property to assert on.
 */
targetProp: CSSProp | MappedCalciteCSSCustomProp;

/**
 * The state to apply to the target element. 
 */
state?: State | RequireExactlyOne<Record<State, ContextSelectByAttr>, "focus" | "hover" | "press">;

Demo pages

Manual testing of component tokens should still be conducted when potential breaking changes are introduced.

1. open the component's html demo page.
2. add a new "theme-ing" section if one doesn't already exist.
3. add a <demo-theme> component around the component(s) to test.
4. add all relevant component tokens to the tokens prop in a list. This will automatically generate some token values based on the name. OR add a style prop to either demo-theme or a specific component with the variable you want to test and a value.
5. check the component in the demo page.
   1. Open the component in the dev-tools
   2. Do the applied token names make sense?
      1. Do the names give customers a good representation of how they can update the component?
      2. Are names consistent with the Calcite Tokens naming schema?
   3. Do applied tokens make the expected changes? Example: Does -background-color change the background color of the component? Does -indicator change the color of selection indicator visual elements in the component?

Example - set tokens with demo-theme

<demo-theme tokens="
    --calcite-button-background-color, 
    --calcite-button-border-color, 
    --calcite-button-corner-radius, 
    --calcite-button-corner-radius-start-start, 
    --calcite-button-corner-radius-start-end, 
    --calcite-button-corner-radius-end-start, 
    --calcite-button-corner-radius-end-end, 
    --calcite-button-loader-color, 
    --calcite-button-shadow, 
    --calcite-button-text-color, 
    --calcite-button-icon-color"
><calcite-button kind="inverse" scale="l"> Button </calcite-button></demo-theme>

Example - set tokens with style

<calcite-button kind="inverse" scale="l" style="--calcite-button-background-color: var(--calcite-color-info); --calcite-button-border-color: green; "> Button </calcite-button>