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-neutral: #f5f5f5;
--size-small: 8px;
--size-small--em: 0.5;
--size-large: 32px;
--size-large--em: 2;

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: color-mix(in srgb, var(--color-primary, #93b733) 20%, transparent);
background-color: rgba(147, 183, 51, 0.5);

Size in Relative Units

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

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

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;
}