.boxstyle_ { // legacy
  .make-sm-boxstyle();
}

.boxstyle-xs {
  .make-xs-boxstyle();
}

.boxstyle-sm {
  .make-sm-boxstyle();
}

.boxstyle-md {
  .make-md-boxstyle();
}

.boxstyle-lg {
  .make-lg-boxstyle();
}

each(range(1,9), {
  @step: @value * 100;
  // class name borrowed from https://getbootstrap.com/docs/5.0/utilities/background/
  // though we include the tint level, and we set colour
  .bg-primary-@{step} {
    background-color: ~"var(--w-sys-colors-primary-@{step})";
    color:            ~"var(--w-sys-colors-primary-@{step}-contrast)";

    // Define these variables for use in containing elements.
    --w-sys-colors-bg: ~"var(--w-sys-colors-primary-@{step})";
    --w-sys-colors-fg: ~"var(--w-sys-colors-primary-@{step}-contrast)";
  }
})