rishabhsrao/voxel-hologram

// Set a root font size as Voxel uses `rem`s for measurements.
/*html*/#voxel {
  font-size: $voxel-font__font-size;

  // Do not style `body` because we do not want to touch the user's styles.
  // Instead style everything inside `.voxel-hologram__content` only. That's ours.

  .voxel-hologram__content {
    @include voxel-font__body();

    p {
      @include voxel-font__paragraph();
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      @include voxel-font__headings--h123456();
    }

    h1,
    h2,
    h3,
    h4 {
      @include voxel-font__headings--h1234();
    }

    h1 {
      @include voxel-font__headings--h1();
    }

    h2 {
      @include voxel-font__headings--h2();
    }

    h3 {
      @include voxel-font__headings--h3();
    }

    h4 {
      @include voxel-font__headings--h4();
    }

    h5 {
      @include voxel-font__headings--h5();
    }

    h6 {
      @include voxel-font__headings--h6();
    }

    small {
      @include voxel-font__small();
    }

    a {
      @include voxel-font__a();
    }

    code {
      @include voxel-font__code();
    }

    pre code {
      @include voxel-font__pre__code();
    }

    blockquote {
      @include voxel-font__blockquote();
    }
  }
}

@each $theme in $voxel-color__themes--supported {
  /*html*/#voxel .voxel-theme--#{$theme} .voxel-hologram__content h1,
  /*html*/#voxel .voxel-theme--#{$theme} .voxel-hologram__content h2,
  /*html*/#voxel .voxel-theme--#{$theme} .voxel-hologram__content h3,
  /*html*/#voxel .voxel-theme--#{$theme} .voxel-hologram__content h4,
  /*html*/#voxel .voxel-theme--#{$theme} .voxel-hologram__content h5,
  /*html*/#voxel .voxel-theme--#{$theme} .voxel-hologram__content h6 {
    @include voxel-font__headings--h123456__themes($theme);
  }
}

@each $theme in $voxel-color__themes--supported {
  /*html*/#voxel .voxel-theme--#{$theme} .voxel-hologram__content a {
    @include voxel-font__a__themes($theme);
  }
}

@each $theme in $voxel-color__themes--supported {
  /*html*/#voxel .voxel-theme--#{$theme} .voxel-hologram__content code {
    @include voxel-font__code__themes($theme);
  }
}

@each $theme in $voxel-color__themes--supported {
  /*html*/#voxel .voxel-theme--#{$theme} .voxel-hologram__content blockquote {
    @include voxel-font__blockquote__themes($theme);
  }
}