Add linting rules for design tokens
Problem to solve
In gitlab-org/gitlab-services/design.gitlab.com!4165 (merged) we discussed the patterns and anti-patterns around creating dark-mode specific overrides in CSS. To ensure enforcement of these rules we should add some linting rules.
Rules to add
1. Using the .gl-dark selector
Guidance on how this can be used is in the design system. We want to lint against this usage.
Note: We currently lint against .gl-* usage but exclude .gl-dark. We should continue to do this and have .gl-dark usage as a seperate linting rule. Added here: !158945 (merged)
2. Using dark: overrides
https://design.gitlab.com/product-foundations/design-tokens-technical-implementation#using-apply
If possible, we should also lint against incorrect uses of the dark: overrides. This may be more hassle than it's worth as the regex could get wonky, fast. Here's an example of correct an incorrect usage, but read the docs for more information:
-
✅ @apply gl-bg-subtle dark:gl-bg-neutral-900 -
❌ @apply gl-bg-neutral-10 dark:gl-bg-neutral-900 -
❌ @apply gl-bg-subtle dark:gl-bg-section