SCSS Usage

How to import and use design tokens in your project's SCSS files.

Prerequisites

Install sass-embedded in your project:

npm install -D sass-embedded

Import Patterns

All Tokens

@use '@yellowcard/b2b-design-system/scss' as *;

This imports colors, typography, and media query helpers.

Specific Categories

// Colors only
@use '@yellowcard/b2b-design-system/scss/colors' as *;

// Typography only
@use '@yellowcard/b2b-design-system/scss/typography' as *;

DatePicker Theme

For custom DatePicker styling:

@use '@yellowcard/b2b-design-system/scss/datepicker/datepicker-theme' as *;

Helper Functions

with-opacity($color, $opacity)

Creates a transparent variation of any color:

.overlay {
  background: with-opacity($base-black, 0.5);
}

.highlight {
  background: with-opacity($purple-400, 0.1);
}

Media Queries

The system uses include-media for responsive breakpoints:

@use '@yellowcard/b2b-design-system/scss' as *;

.sidebar {
  display: none;

  @include media('>=md') {
    display: block;
    width: 240px;
  }

  @include media('>=lg') {
    width: 300px;
  }
}

Available Breakpoints

Name	Width
sm	576px
md	768px
lg	992px
xl	1200px

Best Practices

Do

// Use semantic tokens
.card-title {
  color: $grey-900;
  font-weight: $font-weight-semibold;
}

// Use the helper for opacity
.backdrop {
  background: with-opacity($base-black, 0.4);
}

Don't

// Don't hardcode values that have tokens
.card-title {
  color: #212121; // Use $grey-900
  font-weight: 600; // Use $font-weight-semibold
}

// Don't use rgba directly
.backdrop {
  background: rgba(0, 0, 0, 0.4); // Use with-opacity($base-black, 0.4)
}

Migration from Hardcoded Values

If migrating an existing project, replace hardcoded colors with token variables:

// Before
.header {
  background: #492b7c;
  color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

// After
.header {
  background: $purple-800;
  color: $base-white;
  border-bottom: 1px solid $grey-300;
}