feat(block): add component tokens

[jcfranco]

Related Issue: #7180

Summary

Adds the following component tokens (CSS props):

• --calcite-block-background-color
• --calcite-block-border-color
• --calcite-block-content-space
• --calcite-block-description-text-color
• --calcite-block-header-background-color-hover
• --calcite-block-header-background-color
• --calcite-block-heading-text-color-open
• --calcite-block-heading-text-color
• --calcite-block-text-color
• --calcite-block-toggle-icon-color

Deprecates the following:

• --calcite-block-padding

Note: added internal icon color token for upcoming icon prop.

[macandcheese]

I think padding here is more descriptive - space is a bit ambiguous. Maybe calcite-block-content-padding ?

[driskull]

I think spacing makes more sense. That way we could internally swap between padding/margin/whatever if need be. Do we want to be specific with padding or margin?

[driskull]

We should decide on space vs spacing too :)

[macandcheese]

Yeah, even content-space could make sense I guess. But space could be anything - space between text, slots, etc. In Modal we do use --calcite-modal-content-padding. In the future "content areas" could be ::parts with defaults.

[driskull]

We already have spacing vars like --calcite-spacing-xxs so it only makes sense to have component spacing vars like --calcite-block-spacing- IMO.

[driskull]

For Panel, we added calcite-panel-footer-space

[macandcheese]

calcite-block-content-space works for me. We can update elsewhere we currently use padding to follow this. As long as it has a context and isn't just component-space.

[jcfranco]

I knew this seemed familiar. We had a similar discussion in #8629 (comment) and landed on --calcite-tab-content-block-padding.

calcite-block-content-space works for me. We can update elsewhere we currently use padding to follow this. As long as it has a context and isn't just component-space.

SGTM, but I'd like for @alisonailea to chime on this too. If we needed separate props later on for block/inline values, would we introduce --calcite-component-space-<block|inline>? If so, we could add an example of this in our component token guidelines.

We should decide on space vs spacing too :)

We decided on space to align with size (vs. sizing).

[alisonailea]

Given that our design system is not necessarily web specific, we need to use platform agnostic naming conventions. space is the preferred terminology here.

[jcfranco]

For posterity, if we need custom space props that only apply horizontally or vertically, we can use something like --calcite-component-<part>-space-<x|y> (see #8852 (comment)).

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.