Add files

_sass/utilities/_colors.scss

@@ -0,0 +1,237 @@
+// Utility classes for colors
+
+// Text colors
+
+.text-grey-dk-000 {
+  color: $grey-dk-000 !important;
+}
+
+.text-grey-dk-100 {
+  color: $grey-dk-100 !important;
+}
+
+.text-grey-dk-200 {
+  color: $grey-dk-200 !important;
+}
+
+.text-grey-dk-250 {
+  color: $grey-dk-250 !important;
+}
+
+.text-grey-dk-300 {
+  color: $grey-dk-300 !important;
+}
+
+.text-grey-lt-000 {
+  color: $grey-lt-000 !important;
+}
+
+.text-grey-lt-100 {
+  color: $grey-lt-100 !important;
+}
+
+.text-grey-lt-200 {
+  color: $grey-lt-200 !important;
+}
+
+.text-grey-lt-300 {
+  color: $grey-lt-300 !important;
+}
+
+.text-blue-000 {
+  color: $blue-000 !important;
+}
+
+.text-blue-100 {
+  color: $blue-100 !important;
+}
+
+.text-blue-200 {
+  color: $blue-200 !important;
+}
+
+.text-blue-300 {
+  color: $blue-300 !important;
+}
+
+.text-green-000 {
+  color: $green-000 !important;
+}
+
+.text-green-100 {
+  color: $green-100 !important;
+}
+
+.text-green-200 {
+  color: $green-200 !important;
+}
+
+.text-green-300 {
+  color: $green-300 !important;
+}
+
+.text-purple-000 {
+  color: $purple-000 !important;
+}
+
+.text-purple-100 {
+  color: $purple-100 !important;
+}
+
+.text-purple-200 {
+  color: $purple-200 !important;
+}
+
+.text-purple-300 {
+  color: $purple-300 !important;
+}
+
+.text-yellow-000 {
+  color: $yellow-000 !important;
+}
+
+.text-yellow-100 {
+  color: $yellow-100 !important;
+}
+
+.text-yellow-200 {
+  color: $yellow-200 !important;
+}
+
+.text-yellow-300 {
+  color: $yellow-300 !important;
+}
+
+.text-red-000 {
+  color: $red-000 !important;
+}
+
+.text-red-100 {
+  color: $red-100 !important;
+}
+
+.text-red-200 {
+  color: $red-200 !important;
+}
+
+.text-red-300 {
+  color: $red-300 !important;
+}
+
+// Background colors
+
+.bg-grey-dk-000 {
+  background-color: $grey-dk-000 !important;
+}
+
+.bg-grey-dk-100 {
+  background-color: $grey-dk-100 !important;
+}
+
+.bg-grey-dk-200 {
+  background-color: $grey-dk-200 !important;
+}
+
+.bg-grey-dk-250 {
+  background-color: $grey-dk-250 !important;
+}
+
+.bg-grey-dk-300 {
+  background-color: $grey-dk-300 !important;
+}
+
+.bg-grey-lt-000 {
+  background-color: $grey-lt-000 !important;
+}
+
+.bg-grey-lt-100 {
+  background-color: $grey-lt-100 !important;
+}
+
+.bg-grey-lt-200 {
+  background-color: $grey-lt-200 !important;
+}
+
+.bg-grey-lt-300 {
+  background-color: $grey-lt-300 !important;
+}
+
+.bg-blue-000 {
+  background-color: $blue-000 !important;
+}
+
+.bg-blue-100 {
+  background-color: $blue-100 !important;
+}
+
+.bg-blue-200 {
+  background-color: $blue-200 !important;
+}
+
+.bg-blue-300 {
+  background-color: $blue-300 !important;
+}
+
+.bg-green-000 {
+  background-color: $green-000 !important;
+}
+
+.bg-green-100 {
+  background-color: $green-100 !important;
+}
+
+.bg-green-200 {
+  background-color: $green-200 !important;
+}
+
+.bg-green-300 {
+  background-color: $green-300 !important;
+}
+
+.bg-purple-000 {
+  background-color: $purple-000 !important;
+}
+
+.bg-purple-100 {
+  background-color: $purple-100 !important;
+}
+
+.bg-purple-200 {
+  background-color: $purple-200 !important;
+}
+
+.bg-purple-300 {
+  background-color: $purple-300 !important;
+}
+
+.bg-yellow-000 {
+  background-color: $yellow-000 !important;
+}
+
+.bg-yellow-100 {
+  background-color: $yellow-100 !important;
+}
+
+.bg-yellow-200 {
+  background-color: $yellow-200 !important;
+}
+
+.bg-yellow-300 {
+  background-color: $yellow-300 !important;
+}
+
+.bg-red-000 {
+  background-color: $red-000 !important;
+}
+
+.bg-red-100 {
+  background-color: $red-100 !important;
+}
+
+.bg-red-200 {
+  background-color: $red-200 !important;
+}
+
+.bg-red-300 {
+  background-color: $red-300 !important;
+}

_sass/utilities/_layout.scss

@@ -0,0 +1,101 @@
+// Utility classes for layout
+
+// Display
+
+.d-block {
+  display: block !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-none {
+  display: none !important;
+}
+
+@each $media-query in map-keys($media-queries) {
+  @for $i from 1 through length($spacers) {
+    @include mq($media-query) {
+      $size: #{map-get($spacers, sp-#{$i - 1})};
+      $scale: #{$i - 1};
+
+      // .d-sm-block, .d-md-none, .d-lg-inline
+      .d-#{$media-query}-block {
+        display: block !important;
+      }
+      .d-#{$media-query}-flex {
+        display: flex !important;
+      }
+      .d-#{$media-query}-inline {
+        display: inline !important;
+      }
+      .d-#{$media-query}-inline-block {
+        display: inline-block !important;
+      }
+      .d-#{$media-query}-none {
+        display: none !important;
+      }
+    }
+  }
+}
+
+// Horizontal alignment
+
+.float-left {
+  float: left !important;
+}
+
+.float-right {
+  float: right !important;
+}
+
+.flex-justify-start {
+  justify-content: flex-start !important;
+}
+
+.flex-justify-end {
+  justify-content: flex-end !important;
+}
+
+.flex-justify-between {
+  justify-content: space-between !important;
+}
+
+.flex-justify-around {
+  justify-content: space-around !important;
+}
+
+// Vertical alignment
+
+.v-align-baseline {
+  vertical-align: baseline !important;
+}
+
+.v-align-bottom {
+  vertical-align: bottom !important;
+}
+
+.v-align-middle {
+  vertical-align: middle !important;
+}
+
+.v-align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+
+.v-align-text-top {
+  vertical-align: text-top !important;
+}
+
+.v-align-top {
+  vertical-align: top !important;
+}

_sass/utilities/_lists.scss

@@ -0,0 +1,15 @@
+// Utility classes for lists
+
+// stylelint-disable selector-max-type
+
+.list-style-none {
+  padding: 0 !important;
+  margin: 0 !important;
+  list-style: none !important;
+
+  li {
+    &::before {
+      display: none !important;
+    }
+  }
+}

_sass/utilities/_spacing.scss

@@ -0,0 +1,162 @@
+// Utility classes for margins and padding
+
+// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
+
+// Margin spacer utilities
+
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+@for $i from 1 through length($spacers) {
+  $size: #{map-get($spacers, sp-#{$i - 1})};
+  $scale: #{$i - 1};
+
+  // .m-0, .m-1, .m-2...
+  .m-#{$scale} {
+    margin: #{$size} !important;
+  }
+  .mt-#{$scale} {
+    margin-top: #{$size} !important;
+  }
+  .mr-#{$scale} {
+    margin-right: #{$size} !important;
+  }
+  .mb-#{$scale} {
+    margin-bottom: #{$size} !important;
+  }
+  .ml-#{$scale} {
+    margin-left: #{$size} !important;
+  }
+
+  .mx-#{$scale} {
+    margin-right: #{$size} !important;
+    margin-left: #{$size} !important;
+  }
+
+  .my-#{$scale} {
+    margin-top: #{$size} !important;
+    margin-bottom: #{$size} !important;
+  }
+
+  .mxn-#{$scale} {
+    margin-right: -#{$size} !important;
+    margin-left: -#{$size} !important;
+  }
+  .mx-#{$scale}-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+}
+
+@each $media-query in map-keys($media-queries) {
+  @for $i from 1 through length($spacers) {
+    @include mq($media-query) {
+      $size: #{map-get($spacers, sp-#{$i - 1})};
+      $scale: #{$i - 1};
+
+      // .m-sm-0, .m-md-1, .m-lg-2...
+      .m-#{$media-query}-#{$scale} {
+        margin: #{$size} !important;
+      }
+      .mt-#{$media-query}-#{$scale} {
+        margin-top: #{$size} !important;
+      }
+      .mr-#{$media-query}-#{$scale} {
+        margin-right: #{$size} !important;
+      }
+      .mb-#{$media-query}-#{$scale} {
+        margin-bottom: #{$size} !important;
+      }
+      .ml-#{$media-query}-#{$scale} {
+        margin-left: #{$size} !important;
+      }
+
+      .mx-#{$media-query}-#{$scale} {
+        margin-right: #{$size} !important;
+        margin-left: #{$size} !important;
+      }
+
+      .my-#{$media-query}-#{$scale} {
+        margin-top: #{$size} !important;
+        margin-bottom: #{$size} !important;
+      }
+
+      .mxn-#{$media-query}-#{$scale} {
+        margin-right: -#{$size} !important;
+        margin-left: -#{$size} !important;
+      }
+    }
+  }
+}
+
+// Padding spacer utilities
+
+@for $i from 1 through length($spacers) {
+  $size: #{map-get($spacers, sp-#{$i - 1})};
+  $scale: #{$i - 1};
+
+  // .p-0, .p-1, .p-2...
+  .p-#{$scale} {
+    padding: #{$size} !important;
+  }
+  .pt-#{$scale} {
+    padding-top: #{$size} !important;
+  }
+  .pr-#{$scale} {
+    padding-right: #{$size} !important;
+  }
+  .pb-#{$scale} {
+    padding-bottom: #{$size} !important;
+  }
+  .pl-#{$scale} {
+    padding-left: #{$size} !important;
+  }
+
+  .px-#{$scale} {
+    padding-right: #{$size} !important;
+    padding-left: #{$size} !important;
+  }
+
+  .py-#{$scale} {
+    padding-top: #{$size} !important;
+    padding-bottom: #{$size} !important;
+  }
+}
+
+@each $media-query in map-keys($media-queries) {
+  @include mq($media-query) {
+    @for $i from 1 through length($spacers) {
+      $size: #{map-get($spacers, sp-#{$i - 1})};
+      $scale: #{$i - 1};
+
+      // .p-sm-0, .p-md-1, .p-lg-2...
+      .p-#{$media-query}-#{$scale} {
+        padding: #{$size} !important;
+      }
+      .pt-#{$media-query}-#{$scale} {
+        padding-top: #{$size} !important;
+      }
+      .pr-#{$media-query}-#{$scale} {
+        padding-right: #{$size} !important;
+      }
+      .pb-#{$media-query}-#{$scale} {
+        padding-bottom: #{$size} !important;
+      }
+      .pl-#{$media-query}-#{$scale} {
+        padding-left: #{$size} !important;
+      }
+
+      .px-#{$media-query}-#{$scale} {
+        padding-right: #{$size} !important;
+        padding-left: #{$size} !important;
+      }
+
+      .py-#{$media-query}-#{$scale} {
+        padding-top: #{$size} !important;
+        padding-bottom: #{$size} !important;
+      }
+    }
+  }
+}

_sass/utilities/_typography.scss

@@ -0,0 +1,85 @@
+// Utility classes for typography
+
+.fs-1 {
+  @include fs-1;
+}
+
+.fs-2 {
+  @include fs-2;
+}
+
+.fs-3 {
+  @include fs-3;
+}
+
+.fs-4 {
+  @include fs-4;
+}
+
+.fs-5 {
+  @include fs-5;
+}
+
+.fs-6 {
+  @include fs-6;
+}
+
+.fs-7 {
+  @include fs-7;
+}
+
+.fs-8 {
+  @include fs-8;
+}
+
+.fs-9 {
+  @include fs-9;
+}
+
+.fs-10 {
+  @include fs-10;
+}
+
+.fw-300 {
+  font-weight: 300 !important;
+}
+
+.fw-400 {
+  font-weight: 400 !important;
+}
+
+.fw-500 {
+  font-weight: 500 !important;
+}
+
+.fw-700 {
+  font-weight: 700 !important;
+}
+
+.lh-0 {
+  line-height: 0 !important;
+}
+
+.lh-default {
+  line-height: $body-line-height;
+}
+
+.lh-tight {
+  line-height: $body-heading-line-height;
+}
+
+.ls-5 {
+  letter-spacing: 0.05em !important;
+}
+
+.ls-10 {
+  letter-spacing: 0.1em !important;
+}
+
+.ls-0 {
+  letter-spacing: 0 !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}

_sass/utilities/utilities.scss

@@ -0,0 +1,5 @@
+@import "./colors";
+@import "./layout";
+@import "./typography";
+@import "./lists";
+@import "./spacing";