Design Token is the product of the Design language, and the development needs to give the scene to choose the corresponding docking mode, so as to restore the Design more accurately.

1. The stylus variables

$color_black_1000 = rgba(255.255.255.1)
.card 
  background-color: $color_black_1000
Copy the code

The same applies to other LESS, Sass, and CSS variables

Features:

  • Only tokens with one attribute style can be connected;
  • Can only represent the attribute value, the user needs to write the attribute name;
  • Can be directly simple docking design Token name;

Disadvantages:

  • And design Token name is dependent, design name is a risk;

2. Stylus Mixin

.titleTypography ("h1", "bold") 
  
.card 
  Theme("background-color", "red_1000")
Copy the code

The same goes for less, Sass Mixin

Features:

  • Tokens with multiple styles can be interfaced;
  • The user needs to write the attribute name (which can be abbreviated);
  • It can express the logic of designing Token permutation and combination;

Disadvantages:

  • And design Token name is dependent, design name is a risk;

3. Vue Component

<template>
    <Typography fontSize="h1" lineHeight="h1" fontFamily="number"/>
</template>
Copy the code

Other react, svelt… Components in the same way

Features:

  • You can dock with one style, multiple styles, and even control the Dom structure;
  • User usage can be monitored through NPM.
  • Users do not need to create additional attribute names (but do need to be reflected in the class name);
  • Better code hints;
  • Code can be generated in FIGMA;

Disadvantages:

  • Requires runtime execution and has performance risks (similar to CSS in JS);
  • And design Token name is dependent, design name is a risk;
  • Changes to the interface of the component itself are also a risk to the business side;
  • This style cannot be used on non-typographical components;

4. Vue Function

<template>
    <h1 :class="Typography (" h1", "bold")" />
</template>
Copy the code

Other react, svelt… The function in the same way

Features:

  • All features of Vue Component;
  • Allows users to have more freedom to manipulate the Dom;

Disadvantages:

  • Requires runtime execution and has performance risks (similar to CSS in JS);
  • And design Token name is dependent, design name is a risk;
  • Changes to the interface of the component itself are also a risk to the business side;

5. Semantic Class

.c_color-always-black-1000 
  color: $color-always-black-1000 

.bc_color-always-black-1000 
  background-color: $color-always-black-1000 

.h1_label_bold 
  font-size: 24px 
  line-height: 38px 
  font-weight: 600
Copy the code

Features:

  • You can dock with one style or multiple styles.
  • Users do not need to create additional attribute names (but do need to be reflected in the class name);
  • It can convey the logic of designing Token permutation and combination;

Disadvantages:

  • And design Token name is dependent, design name is a risk;
  • Generates global CSS code;

6. Atomize Class

<h1 class="fontSize24 lineHeight38 fontWeight600"/> 
<! -- Abbreviated form --> 
<h1 class="fs24 lh38 fw600"/>
Copy the code

Features:

  • You can dock with one style or multiple styles, and you can freely control the Dom structure.
  • There is no dependence on the Token name of the design student, and the Token name of the design student has no impact on the front end;
  • Attribute names and attribute values need to be defined in the class name according to key:value;
  • Code can be generated in Figma;
  • Boundaries: Only styles defined in the design Token can be created;

Disadvantages:

  • Users need to know the rules for permutations and combinations of tokens and styles (not if the code is generated by plug-ins);
  • Generates global CSS code (management concerns);
  • Long names can increase the size of HTML, CSS, and require users to type full names by hand (abbreviations can solve this problem).

To learn more about atomized CSS: static-atomic-CSS