Mixins

In our design system we use some design decisions, that can not be encapsulated into one (design-)token.

These design assets are served via SCSS Mixins that need to be included into the corresponding SCSS-file or section via the overall index.scss import. Furthermore, every design decision will also be served as a CSS token, for usage without the necessity of having to setup an SCSS preprocessor in the corresponding project.

The overall usage of SCSS Mixins can be checked in the official documentation.

To demonstrate the difference between the Mixin and the CSS token approach, we will inspect snippets of code of our AvatarCompact component.

Mixin:

  .overlay {
    @include gradient-glass-2-opaque;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 200ms ease-out;
    }

@mixin gradient-glass-2 {
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.00) 100%);
  background-color: rgba(255, 255, 255, 0.65);
};

We assign all properties from gradient-glass-2 to the elements selected by the .overlay CSS selector.

CSS:

  .img:not(:focus-visible) {
    outline: 1px solid $avatarCompact-imageUploaded-outline-color;
  }

  $avatarCompact-imageUploaded-outline-color: var(--color-gradient-glass-1-color);

For the outline of the .img elements, we only want to assign the color, that is defined in the glass-gradient-1 design token. Therefore we can perfectly use the CSS variable in this case.

Color Mixins

@mixin gradient-glass-0-stroke {
  background-image: linear-gradient(54deg,
    rgba(255, 255, 255, 1.00) 0%,
    rgba(255, 255, 255, 0.00) 100%);
};

@mixin gradient-glass-1 {
  background-color: rgba(255, 255, 255, 0.65);
};

@mixin gradient-glass-2-opaque {
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.00) 100%);
  background-color: rgba(255, 255, 255, 0.65);
};

@mixin gradient-glass-3-opaque {
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.00) 100%);
  background-color: rgba(255, 255, 255, 0.85);
};

@mixin gradient-glass-4-dark {
  background-color: rgba(0, 0, 0, 0.25);
};

@mixin gradient-glass-1-lila {
  background-color: rgba(219, 188, 225, 0.70);
};

@mixin gradient-fog-1 {
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.00) 0%,
    rgba(255, 255, 255, 0.78) 55%,
    rgba(255, 255, 255, 1.00) 100%);
};

@mixin gradient-fog-2 {
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.00) 0%,
    rgba(240, 240, 240, 0.95) 41%,
    rgba(240, 240, 240, 1.00) 100%);
};

@mixin gradient-fog-3 {
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.00) 0%,
    rgba(240, 240, 240, 0.95) 46%,
    rgba(240, 240, 240, 1.00) 100%);
};

@mixin gradient-metal-1 {
  background-image: linear-gradient(90deg,
    rgba(215, 215, 215, 1.00) 0%,
    rgba(222, 222, 222, 1.00) 41%,
    rgba(194, 194, 194, 1.00) 100%);
};

@mixin gradient-metal-2 {
  background-image: linear-gradient(90deg,
    rgba(215, 215, 215, 1.00) 0%,
    rgba(222, 222, 222, 1.00) 62%,
    rgba(194, 194, 194, 1.00) 100%);
};

@mixin gradient-metal-3 {
  background-image: linear-gradient(121deg,
    rgba(177, 177, 177, 1.00) 0%,
    rgba(222, 222, 222, 1.00) 77%,
    rgba(170, 170, 170, 0.79) 100%);
};

Surface Mixins

@mixin glass-blur-1-with-shadow {
  box-shadow:   
         0  4.0px 20.0px      0 #0000000D,
     1.0px  1.0px  4.0px      0 #00000040 !important;
  backdrop-filter:  blur(20px) !important;
};

@mixin glass-blur-1-no-shadow {
  backdrop-filter:  blur(20px) !important;
};