Design System Classes writing styles

Basically, it can be divided into 3 writing styles:

CSS

The format is completely compatible with a CSS style sheet.

Although it is not the optimal way to use it, it allows you to paste a CSS directly there and use it as the style sheet of the design system for Web applications.

Styles My_Style
{
  .HeaderContainer
  {
       background-color: #fafafb;
       border-radius: 0px;
       border-width: 1px;
       font-size: 16px;
  }
}

Pure

There are those who argue that in a design system, all the values of the decisions should be Tokens. In this writing style, the property values are completely parameterized with Tokens.

Styles My_Style
{ 
   .HeaderContainer 
   { 
      background-color: $color.background; 
      border-radius: $radius.circle; 
      border-width: $border.thin; 
      font-size: $fontSizes.small; 
   }    
}

For this, you first have to define the corresponding Tokens.

Hybrid

This way of defining styles takes advantage of both previous possibilities by creating a hybrid sheet, where some properties are parameterized with Tokens while others simply have a fixed value.

Styles My_Style
{
   .HeaderContainer
   {
      background-color: #fafafb;
      border-radius: $radius.circle;
      border-width: 1px;
      font-size: $fontSizes.small;
   }
}

See Also

Design System Styles