1979098 - (stylelint-design-tokens) [meta] Add custom Stylelint rules to encourage/enforce design token usage

Status: NEW

(Developer Infrastructure :: Lint and Formatting, task)

Description

[Hanna Jones [:hjones]]

I think we should be able to leverage custom Stylelint rules to drive design token adoption and automate a lot of the checks and education that currently come from manual code reviews. See this proposal for more details on the rationale and tentative implementation plan.

Comment 1

[Hanna Jones [:hjones]]

We currently divide our tokens into a number of categories listed below. I've filed bugs for all of these except for the ones in bold. In those cases I've made a note about why.

• background-color
• border-color
• border-radius
• border-width (didn't file a bug for this since we only have a single value)
• font-size
• font-weight
• opacity (we only have two tokens and they're button-specific)
• size
• space
• text-color
• icon-color (might be hard to determine if it's actually getting applied to an icon or not)
• icon-size (might be hard to determine if it's actually getting applied to an icon or not)
• box-shadow

For all the linting bugs I've filed companion bugs to reassess our token scales once we can use the lint rule to help us get a list of all the values currently being used - see this bug for an example.