Audit css variables for alignment with design tokens

[benelan]

Background

We need to figure out which CSS variables (both global and component scoped) are used in each component. Once we have a list we can determine naming convention trends and do a big rename if necessary before v1 release.

Additionally, none of the global variables are documented on the component doc pages. We need to determine the conventions for documenting them in the component tsx files. New jsdoc tag or same as component scoped CSS variables?

Desired Outcome

• A list of all of the CSS variables that each component uses.
• A naming convention for CSS variables
• A convention for documenting CSS variables
• A new issue/epic to document the CSS variables once the above points are completed

[macandcheese]

It would be great to denote via metadata which is global, and which is local to the component, so in the docs we can label or separate the two types.

[benelan]

Audit results: https://github.com/Esri/calcite-components/wiki/CSS-Variable-Audit

[benelan]

Can someone go through this list to determine which CSS variables should not be documented, and then I'll go through and document the rest? We can eventually use the same list to add internal to the variables that are not already named correctly. I know everyone is swamped, but this is a high priority for v1, so it would be good to get started soon.

Adding a * next to the ones that shouldn't be documented would work.

[jcfranco]

@alisonailea @macandcheese Do we have clear info/doc on the https://github.com/Esri/calcite-design-tokens/ side to cover this? If so, we can close it.

[macandcheese]

I think we will document the component level vars in each component css file as the component are updated. The global ones will be documented as part of the token effort, yes.

[geospatialem]

Related token issue for context: #7180.

[alisonailea]

Completed via the Design Token efforts we have (done)

• A naming convention for CSS variables
• A convention for documenting CSS variables
• A new issue/epic to document the CSS variables once the above points are completed

At the completion of #7180 we will have

• A list of all of the CSS variables that each component uses.

[github-actions]

Installed and assigned for verification.