Semantic design token overrides in GitLab

Recap: we are adding design tokens to implement a dark mode without teams needing to design and build twice. By assigning the design token that captures the meaning of the thing, the design system can maintain how that thing looks across multiple modes and modifiers.

Problem

We've observed instances where consumers are changing the semantic meaning of elements based on color mode to force a different style. For example:

.class {
  background: background.color.subtle;

  & .gl-dark {
    background: background.color.section;
  }
}

I feel uncomfortable with this approach because it changes the meaning and purpose of an element based on color mode. It makes maintaining and understanding these styles more difficult.

Examples

Questions for discussion

  1. Am I the only one who thinks we shouldn't do this?
  2. Should we implement linting rules to flag such misuses?
  3. How can we better educate teams about the proper use of design tokens?
Edited by Dan MH