Using mixins

An alternative to generating your styles using file imports is wrapping them in mixins. This way, you can easily structure how styles are generated, allows for more API opportunities like creating variants, and manage tokens using arguments.

Example in theme tokens

// foundations/_tokens.scss
 
@mixin init(
  $primary: (
    'default': #6200ee,
    'container': #caaafc
  ),
  $on-primary: (
    'default': #ffffff,
    'container': #250062
  ),
  $secondary: (
    'default': #03dac6,
    'container': #d2fff8
  ),
  $on-secondary: (
    'default': #000000,
    'container': #004d44
  ),
  // ...
) {
  :root {
    @include sentro.token-config(
      $primary: $primary,
      $on-primary: $on-primary,
      $secondary: $secondary,
      $on-secondary: $on-secondary,
      $tertiary: $tertiary,
      $on-tertiary: $on-tertiary,
      $error: $error,
      $on-error: $on-error
    );
  }
}

Example in component styles

// components/_sdc-component.scss
 
@mixin render(
  $fill: 'surface-400',
  $ink: 'surface-ink',
  $border: 'surface-400',
) {
  .sdc-component {
    background-color: sentro.key-create('component-fill', $fill);
    color: sentro.key-create('component-ink', $ink);
    border: 1px solid sentro.key-create('component-border', $border);
  }
}

Using it in your styles

@use 'foundations/tokens';
@use 'components/sdc-component';
 
@include tokens.init();
@include sdc-component.render();

While it does have a very redundant import style. It is beneficial to go with this approach if you have a lot of components, if you have a sub-structure for helper functions for modules, and if you wish to have a more structured way of managing your styles.

@use 'foundations/primitive-tokens';
@use 'foundations/tokens';
@use 'components/sdc-button';
@use 'components/sdc-card';
@use 'components/sdc-text-field';
@use 'components/sdc-radio';
 
@include primitive-tokens.init();
@include tokens.init();
 
@include sdc-button.render();
@include sdc-button.extend('secondary') {
  @include sdc-button.color(
    $fill: 'secondary-400',
    $ink: 'secondary-ink',
    $border: 'secondary-400'
  );
 
  &:hover {
    @include sdc-button.color(
      $fill: 'secondary-500',
      $ink: 'secondary-ink',
      $border: 'secondary-500'
    );
  }
 
  &:active {
    @include sdc-button.color(
      $fill: 'secondary-600',
      $ink: 'secondary-ink',
      $border: 'secondary-600'
    );
  }
}
@include sdc-card.render(
  $border: 'surface-200',
  $padding: (
    header: 1rem
  )
);
@include sdc-text-field.render();
@include sdc-radio.render();