Oikaze Cheatsheet

Define a Single Token Set

@forward 'oikaze' with (
  $sets: (
    default $light-theme,
  )
);

Define Multiple Token Sets

@forward 'oikaze' with (
  $default: 'light-theme',
  $sets: (
    'light-theme': $light-theme,
    'dark-theme': $dark-theme,
  )
);

Value Definitions

@include tokens.css-definitions();

--color-primary: #93b733;
--color-primary--rgb: '147,183,51';
--color-neutral: #f5f5f5;
--color-neutral--rgb: '245,245,245';
--size-small: 8px;
--size-small--em: 0.5;
--size-large: 32px;
--size-large--em: 2;

Cascading Variables or Fixed Values

color: tokens.get('color.primary');
background-color: tokens.get('$color.primary');

color: var(--color-primary, #93b733)
background-color: #93b733

Color with opacity

color: tokens.alpha('color.primary', 0.5);
background-color: tokens.alpha('$color.primary', 0.5);

color:  rgba(var(--color-primary--rgb, 147, 183, 51), 0.5)
background-color: rgba(147, 183, 51, 0.5)

Size as REM

font-size: tokens.rem('small');
line-height: tokens.rem('$small');

font-size: calc(var(--size-large--em, 2) * 1rem);
line-height: 0.5rem;

Iterate over a Token Set

@each $token in tokens.all('color') {
  $var: tokens.prop($token);

  .color#{$name} {
    color: $value;
  }
}

.color--primary {
  color: #93b733;
}
.color--neutral {
  color: #f5f5f5;
}