global-vars

_css--body.scss

@import 'colors';
@import 'vars';
@import 'mixins';
@import 'typography';
@import 'import-once';

@mixin css-body {
  body {
    @include reset;
    @include helvetica;
    color: $text-01;
    background-color: $ui-02;
    line-height: 1;
  }
}

@include exports('css--body') {
  @if global-variable-exists('css--body') and $css--body == true {
    @include css-body;
  }
}

_css--helpers.scss

@import 'colors';
@import 'vars';
@import 'mixins';
@import 'typography';
@import 'import-once';

@mixin css-helpers {
  .bx--visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    border:0;
    visibility: visible;
    white-space: nowrap;
  }

  .bx--body {
    @include reset;
    @include helvetica;
    color: $text-01;
    background-color: $ui-02;
    line-height: 1;
  }
}

@include exports('css--helpers') {
  @if global-variable-exists('css--helpers') and $css--helpers == true {
    @include css-helpers;
  }
}

_css--typography.scss

@import 'colors';
@import 'vars';
@import 'mixins';
@import 'typography';
@import 'import-once';

@mixin typography {
  h1 {
    @include reset;
    @include font-size('32');
    @include line-height('heading');
    @include letter-spacing;
  }

  h2 {
    @include reset;
    @include font-size('26');
    @include line-height('heading');
    @include letter-spacing;
  }

  h3 {
    @include reset;
    @include font-size('20');
    @include line-height('heading');
    @include letter-spacing;
  }

  h4 {
    @include reset;
    @include font-size('18');
    @include line-height('heading');
  }

  h5 {
    @include reset;
    @include font-size('16');
    @include line-height('heading');
  }

  h6 {
    @include reset;
    @include font-size('14');
    @include line-height('heading');
  }

  p {
    @include reset;
    @include font-size('16');
    @include line-height('body');
  }

  strong {
    @include reset;
    @include font-smoothing;
    @include letter-spacing;
    font-weight: 700;
  }

  em {
    @include reset;
    font-style: italic;
  }

  a {
    @include reset;
    color: $brand-01;
  }
}

@include exports('css--typography') {
  @if global-variable-exists('css--typography') and $css--typography == true {
    @include typography;
  }
}

styles.scss

//-------------------------
// 🌍 Global
//-------------------------

$css--font-face: false !default;
$css--helpers: true !default;
$css--body: true !default;
$css--typography: true !default;
$css--reset: false !default;

@import 'colors';
@import 'vars';
@import 'mixins';
@import 'layout';
@import 'layer';
@import 'typography';
@import 'import-once';
@import 'css--reset';
@import 'css--font-face';
@import 'css--typography';
@import 'css--helpers';
@import 'css--body';

//-------------------------
// 🍅 Base Elements
//-------------------------
@import '../../components/button/button';
@import '../../components/copy-button/copy-button';
@import '../../components/file-uploader/file-uploader';
@import '../../components/checkbox/checkbox';
@import '../../components/radio-button/radio-button';
@import '../../components/toggle/toggle';
@import '../../components/search/search';
@import '../../components/select/select';
@import '../../components/text-input/text-input';
@import '../../components/text-area/text-area';
@import '../../components/number-input/number-input';
@import '../../components/form/form';
@import '../../components/link/link';
@import '../../components/list/list';
@import '../../components/data-table/data-table';
@import '../../components/code-snippet/code-snippet';

//-------------------------
// 🍕 Components
//-------------------------
@import '../../components/overflow-menu/overflow-menu';
@import '../../components/card/card';
@import '../../components/content-switcher/content-switcher';
@import '../../components/detail-page-header/detail-page-header';
@import '../../components/dropdown/dropdown';
@import '../../components/loading/loading';
@import '../../components/modal/modal';
@import '../../components/module/module';
@import '../../components/notification/inline-notification';
@import '../../components/notification/toast-notification';
@import '../../components/tooltip/tooltip';
@import '../../components/tabs/tabs';
@import '../../components/tag/tag';
@import '../../components/unified-header/unified-header';
@import '../../components/interior-left-nav/interior-left-nav';
@import '../../components/pagination/pagination';
@import '../../components/accordion/accordion';
@import '../../components/progress-indicator/progress-indicator';
@import '../../components/breadcrumb/breadcrumb';
@import '../../components/toolbar/toolbar';

//-------------------------------------
// 🙈 Hidden (Not exposed on website)
//-------------------------------------
@import '../../components/footer/footer';
@import '../../components/fab/fab';