feat(stepper, stepper-item): add component tokens

[anveshmekala]

Related Issue: #7180

Summary

Adds tokens for stepper and stepper-item components.

calcite-stepper-item tokens:

--calcite-stepper-item-description-text-color: Specifies text color of description of component.
--calcite-stepper-item-heading-text-color: Specifies text color of heading of component.
--calcite-stepper-item-icon-color: Specifies color of icon of component.
--calcite-stepper-item-number-text-color: Specifies text color of number of component.
--calcite-stepper-item-text-color: Specifies text color of component.

calcite-stepper tokens:

--calcite-stepper-action-background-color: defines the background color of an action sub-component inside the component.
--calcite-stepper-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
--calcite-stepper-action-background-color-active: defines the background color of an action sub-component when active.
--calcite-stepper-step-bar-fill-color : Specifies fill color for step-bar.
--calcite-stepper-step-bar-fill-color-hover : Specifies fill color for step-bar when hovered.
--calcite-stepper-step-bar-selected-fill-color : Specifies fill color for selected step-bar.
--calcite-stepper-step-bar-complete-fill-color : Specifies fill color for completed step-bar.
--calcite-stepper-step-bar-completed-fill-color-hover : Specifies fill color for completed step-bar when hovered.
--calcite-stepper-step-bar-error-fill-color : Specifies fill color for error step-bar.
--calcite-stepper-step-bar-error-fill-color-hover : Specifies fill color for error step-bar when hovered.

[anveshmekala]

Q: Should this tokens be specific ? The reason being that calcite-stepper-item-border-color token allows users to specify the border-color at stepper-item level. Adding the above tokens helps users customize border-color at stepper level when layout ="horizontal-single". Wonder if its ideal to specify them for single use case of layout or should this be replaced with calcite-stepper-item-border-color.

cc @macandcheese @ashetland @SkyeSeitz

[anveshmekala]

One way is to get rid of border-top for stepper-item and let user configure step-bar irrespective of layout.

[ashetland]

I think even in horizontal-single I'd expect the step bar color to match the item border color of the standard horizontal. Is that not how this works currently?

[anveshmekala]

currently it matches, but if the user wants to customize the colors using tokens they need to setup twice once for horizontal & vertical and again for horizontal-single. Both horizontal and vertical layout depend on stepper-item color where as horizontal-single depends on step-bar component to show border like.

[anveshmekala]

Sorry for the confusion, i was under the impression that responsive mode is a default setting when the container size decreases but we made a change recently where user needs to specify the layout horizontal-single for single stepper view. Make sense to have these separate set of tokens . Ideally one set of tokens would be preferable but the way component is designed can be tricky .

[macandcheese]

I still don’t know if we need two - can we use the same nomenclature for both? The user still places the steps in the DOM in horizontal-single right? I might be missing something too, lol.

[anveshmekala]

With the current way the component is design we end up with having one set of tokens to customize border for vertical & horizontal and other set for horizonatal-layout. In horizontal-single layout case the border isn't the border of stepper-item but a functional step-bar which is not attached to any stepper-item. Using step-bar for every layout would be ideal but requires a refactor.

User can customize the border color as following:

// covers the use-case of layout="horizontal-single"
 calcite-stepper {
      --calcite-stepper-step-bar-fill-color: green;
      --calcite-stepper-step-bar-active-fill-color: #e9f6ff;
      --calcite-stepper-step-bar-complete-fill-color: #280274;
      --calcite-stepper-step-bar-error-fill-color: #fe7a36;
    }
    
    
    
//covers use-case of layout="horizontal" or layout="vertical"

  calcite-stepper-item {
      --calcite-stepper-item-border-color: green;
    }    
    
 calcite-stepper-item[error] {
      --calcite-stepper-item-border-color: #fe7a36;
    }
    
    calcite-stepper-item[complete] {
      --calcite-stepper-item-border-color: #280274;
    }
    
    calcite-stepper-item[selected] {
      --calcite-stepper-item-border-color: #e9f6ff;
    }    
    

[ashetland]

I think I refactor might be worth it, in the long-term at least. Not sure if this is the time to do that or not. I think this situation may have come about do to limitations of how we build stuff in Figma. That version needs a separate step-bar for horizontal-single out of necessity, but I don't see why we'd need to mimic that in the real version.

[anveshmekala]

Agree on the refactor, ideally these colors needs to be customized once irrespective of the layout. Configuring the colors twice is redundant and can be very confusing.

The reason for adding step-bar in the real version is to display the borders which are attached to stepper-item. In horizontal-single layout mode where only one item is viewed, borders of each stepper-item is unavailable. To resolve this situation we came up with the step-bar component. In the initial designs we are displaying only one border in single-view related to currently viewing stepper-item. In further discussion, felt it is better to show the step-bar equivalent to no of stepper-items renders so that user has an idea of how many steps are present.

i think its better to use step-bar for all the layout and drop the border maybe since horizontal-single layout cannot rely on border? (considering stepper-item's are not used outside of stepper) . Open to suggestions.

[alisonailea]

How much would a refactor take? This seems like a lot of extra tokens.

[alisonailea]

Stepper and Stepper Item can not exist without one another so let's try to share tokens/styles where possible

The following should be set only in Stepper and can be simplified/inherited by stepper-item

--calcite-internal-stepper-item-spacing-unit-s = --calcite-stepper-item-spacing-unit-s
--calcite-internal-stepper-action-inline-size = --calcite-internal-stepper-action-inline-size
--calcite-internal-step-bar-gap = stepper-item:host { margin-inline-end }

As to the refactor, there are a few other components that had a bit of a refactor to reduce component tokens. How much of a refactor are we talking about here? I think it might be worth it.

[alisonailea]

There's no reason for this to be a mixin. Either these styles need to be moved to a step-bar scss file or just remove the mixin wrapper.

[anveshmekala]

The reason for mixin is to isolate the step-bar related styles and improve readability as suggested.

[alisonailea]

Leave all rem based styles as REM for now.

[anveshmekala]

Curious if there is a downside of using semantic tokens for REM values.

[alisonailea]

How much would a refactor take? This seems like a lot of extra tokens.

[alisonailea]

• --calcite-stepper-item-spacing-unit-[s,m,l] need to be internal.
• We should use "space" instead of "spacing"
• Keep using the theme("spacing REM values for now
• simplify the scales

[alisonailea]

example

:host {
  margin-inline-end: var(--calcite-internal-stepper-item-space-unit-s);
}

.container {
  font-size: var(--calcite-internal-stepper-item-font-size);
  line-height: var(--calcite-internal-stepper-item-line-height);
}
.stepper-item-description {
  font-size: var(--calcite-internal-stepper-item-description-font-size);
  line-height: var(--calcite-internal-stepper-item-description-line-height);
}

:host([scale="s"]) {
  .container {
    --calcite-internal-stepper-item-space-unit-s: theme("spacing.1");
    --calcite-internal-stepper-item-space-unit-m: theme("spacing.3");
    --calcite-internal-stepper-item-space-unit-l: theme("spacing.4");
    --calcite-internal-stepper-action-inline-size: theme("spacing.8");
    --calcite-internal-stepper-item-font-size: var(--calcite-font-size--1);
    --calcite-internal-stepper-item-line-height: var(--calcite-font-size--1);
    --calcite-internal-stepper-item-description-font-size: var(--calcite-font-size--2);
    --calcite-internal-stepper-item-description-line-height: var(--calcite-font-size--1);
  }
}

[alisonailea]

this is the same value as --calcite-stepper-item-spacing-unit-s

[anveshmekala]

Not sure why we required separate ones for margin and spacing in first place.