global storybook scss file

storybook.scss

@import "shared.scss";

// each component in storybook is wrapped inside of .root
#root {
  // give 100% so we can have an unbroken chain of height: 100%;
  // https://stackoverflow.com/questions/7049875/why-doesnt-height-100-work-to-expand-divs-to-the-screen-height
  height: 100%;
}

/* STORY BOOK SPECIFIC GLOBAL STYLES */

.blu-sbColors {
  display: flex;
  flex-wrap: wrap;
  @include type("ButtonL");
  > div {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 50%;
    height: 400px;
  }
  @each $colorKey in $colors {
    .color#{$colorKey} {
      color: toTextColor($colorKey);
    }
  }
}