initial commit

_sass/utilities/_colors.scss

@@ -1,17 +1,23 @@
-.text-purple-000 {
-  color: $purple-000 !important;
+//
+// Utility classes for colors
+//
+
+// Text colors
+
+.text-grey-dk-000 {
+  color: $grey-dk-000 !important;
 }
 
-.text-purple-100 {
-  color: $purple-100 !important;
+.text-grey-dk-100 {
+  color: $grey-dk-100 !important;
 }
 
-.text-purple-200 {
-  color: $purple-200 !important;
+.text-grey-dk-200 {
+  color: $grey-dk-200 !important;
 }
 
-.text-purple-300 {
-  color: $purple-300 !important;
+.text-grey-dk-300 {
+  color: $grey-dk-300 !important;
 }
 
 .text-grey-lt-000 {
@@ -30,18 +36,50 @@
   color: $grey-lt-300 !important;
 }
 
-.text-grey-dk-000 {
-  color: $grey-dk-000 !important;
+.text-blue-000 {
+  color: $blue-000 !important;
 }
 
-.text-grey-dk-100 {
-  color: $grey-dk-100 !important;
+.text-blue-100 {
+  color: $blue-100 !important;
 }
 
-.text-grey-dk-200 {
-  color: $grey-dk-200 !important;
+.text-blue-200 {
+  color: $blue-200 !important;
 }
 
-.text-grey-dk-300 {
-  color: $grey-dk-300 !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;
 }

_sass/utilities/_layout.scss

@@ -0,0 +1,26 @@
+//
+// Utility classes for layout and spacing
+//
+
+.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; }
+
+    }
+  }
+}

_sass/utilities/_lists.scss

@@ -1,3 +1,7 @@
+//
+// Utility classes for lists
+//
+
 // stylelint-disable primer/selector-no-utility
 
 .list-style-none {

_sass/utilities/_spacing.scss

@@ -1,10 +1,10 @@
-// scss-lint:disable SpaceAfterPropertyName
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
-
-// Margin spacer utilities
+//
+// Utility classes for margins and padding
+//
 
 // scss-lint:disable SpaceAfterPropertyName
 // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
+
 // Margin spacer utilities
 
 @for $i from 1 through length($spacers) {
@@ -42,7 +42,7 @@
 @each $media-query in map-keys($media-queries) {
   @for $i from 1 through length($spacers) {
     @include mq($media-query) {
-      $size: #{map-get($spacers, spacer#{$i - 1})};
+      $size: #{map-get($spacers, sp-#{$i - 1})};
       $scale: #{$i - 1};
 
       // .m-sm-0, .m-md-1, .m-lg-2...
@@ -97,7 +97,7 @@
 @each $media-query in map-keys($media-queries) {
   @include mq($media-query) {
     @for $i from 1 through length($spacers) {
-      $size: #{map-get($spacers, spacer#{$i - 1})};
+      $size: #{map-get($spacers, sp-#{$i - 1})};
       $scale: #{$i - 1};
 
       // .p-sm-0, .p-md-1, .p-lg-2...

_sass/utilities/_typography.scss

@@ -1,3 +1,9 @@
+//
+// Utility classes for typography
+//
+
+// stylelint-disable primer/selector-no-utility
+
 .fs-1 {
   @include fs-1;
 }
@@ -53,3 +59,33 @@
 .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;
+}
+
+// stylelint-enable primer/selector-no-utility