@use 'sass:map';
@use '../../dist/letsui.tokens.scss' as *;
@use '../utilities/functions' as *;
@use '../utilities/tokens.map' as *;

body {
  background-color: bg(surface, neutral);
  color: text(body);
}

@each $group, $scales in map.get($color, primitive) {
  @each $step, $value in $scales {
    .#{"#{$group}"}-#{$step} {
      // color: $value;
      color: color($group, $step);
    }
  }
}

@each $category, $property in map.get($color, semantic, bg) {
  @each $role, $value in $property {
    .bg-#{#{$category}-#{$role}} {
      background-color: #{$value};
    }
  }
}