Lab 05: Design Tokens - andreaswissel/design-systems-workshop GitHub Wiki

Hint: if you got lost, you can always check out the corresponding branch for the lab. If you want to start over, you can reset it by typing executing git reset --hard origin/lab-4

If I've ever learned something about maintaining large SCSS codebases, it's that you don't want to maintain colors and other variables manually! This is why we will now implement a bunch of Design Tokens from our Figma Playground in our global SCSS files.

To start things off, go to your Figma workbook and find the section of the library named "Design Tokens":

The color tokens are organized with a helper component called "Color Swatch". By selecting the background layer of a color swatch, you can inspect all of it's properties:

These properties already tell you pretty much everything you need to know about this token. It has a name, a color and sometimes it also might have an alias. In the example above, the properties look like this:

Color: #0085FC
Name: Blue 400
Alias: Text Hover

As we can see, we have a property value (#0085FC), a property name (Blue 400) and an alias (Text Hover) we need to implement. So, without further ado, let's get to work!

• Create a new folder called styles in src/

• Create a file called _colors.scss in the styles/-folder

The leading underscore signifies the SASS compiler and to consumers of this file, that it is only meant to be imported internally.

• Add the color tokens and alias

// Color Tokens

$blue-400: #0085fc;

// Color Aliases

$text-hover: $blue-400;

By adding code comments, we can split the tokens up into sections. This looks easy enough for now, but things can get very crowded in larger projects.

• Make use of our newly created tokens by finding and replacing previous uses of the color code

In src/app/button/button.component.scss replace the usage of the hex code with the newly created SCSS variable and import the _colors.scss-file:

@import '../../styles/colors';

button {
  background: $blue-400;

  border: 1px solid #0357a3;
  box-sizing: border-box;
  box-shadow: inset 0px 2px 0px rgba(202, 230, 255, 0.15);
  border-radius: 5px;

  font-family: "SF Pro Display", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  display: flex;
  align-items: center;
  text-align: center;

  color: $white;

  padding: 11px 16px;

  &.primary {
-	 background: #0085fc;
+    background: $blue-400;
    border: 1px solid #0357a3;
  }

  &.secondary {
    background: #e4e8f3;
    border: 1px solid #cbd0e1;
    color: #041c31;
  }
}

Hint: Depending on the SCSS settings in your project it might not be necessary to include the imports for variables explicitly. However, this is a very good practice and makes refactoring easier.

Great! We have now implemented our very first design token in our design system!

• Now that you've learned the ropes, try to implement the remaining tokens on your own!

• Bonus Level: Try to create some tokens for the shadows as well.

Hint: Mixins can be used to define styles that can be reused.

• Bonus Level: Try to create some global text styles.

Hint: We already have a global stylesheet! Use it to import styles that are relevant for the codebase as a whole.

@import "../../styles/colors";

button {
  background: $blue-400;

  border: 1px solid $blue-700;
  box-sizing: border-box;
  box-shadow: inset 0px 2px 0px rgba(202, 230, 255, 0.15);
  border-radius: 5px;

  font-family: "SF Pro Display", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  display: flex;
  align-items: center;
  text-align: center;

  color: #ffffff;

  padding: 11px 16px;

  &.primary {
    background: $blue-400;
    border: 1px solid $blue-700;
  }

  &.secondary {
    background: $gray-100;
    border: 1px solid $gray-200;
    color: $text-default;
  }
}

// Color Tokens

$blue-400: #0085fc;
$blue-700: #0357a3;
$gray-100: #e4e8f3;
$gray-200: #cbd0e1;
$gray-600: #7c84a5;
$gray-700: #041c31;
$white: #ffffff;
$red-100: #f9715e;
$red-400: #d91e05;
$red-700: #8f1302;

// Color Aliases

$text-default: $gray-700;
$text-hover: $blue-400;

// Shadows

@mixin elevated-shadow() {
  box-shadow: 0px 10px 20px 0px #0000001a;
}
@mixin hover-shadow() {
  box-shadow: 0px 1px 5px 0px #0000001a;
}

@import "colors";

// Global typography

@mixin body-typo() {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
}

@mixin heading-typo() {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: left;
}

@mixin link-typo() {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: $blue-400;
}

body {
  @include body-typo();
}

h1 {
  @include heading-typo();
}

a {
  @include link-typo();
}

/* These are our global styles */

* {
  box-sizing: border-box;
}

app-button,
app-input,
app-login,
app-form-group {
  display: block;
}

@import "styles/typo";