Context - Shared Variables Dilemma

The Problem

Design Systems often live within design tools as component libraries.

Maybe there is a code component library so developers can work with components as well.

Components are

often badly documented (why add docs, you can just copy and paste the component)
hard to understand and reason about (e.g. why is the padding 4px? Why is the button blue?)
work-intense to keep up to date when the design system changes

Define the design tokens as global entities but develop the components operating within their own semantic context.

From this...

...to this! 😁

Renaming Approach

BEM - Block Element Modifier

BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.

getbem.com

📌

Create consistent variable names for design tokens without introducing new mental models.

Code Example 🤖

import { colors } from './tokens.js';

// { colors } is a const where we declare 'neutral--900': '#000000', etc...

const form = {
  'border': colors['neutral--700'],
  'border--active': colors['primary'],
  'border--disabled': colors['neutral--400'],

  'content': colors['transparent'],
  'content--active': colors['neutral--100'],
  'content--disbaled': colors['neutral--400'],

  'background': colors['transparent'],
  'background--active': colors['primary'],
  'background--disabled': colors['neutral--400'],
};

const StyledCheckbox = styled.div`
  // ...
  background: ${props => props.disabled ? form['background--disabled'] : form['background']};
  // …