aligned with established project structure

src/app/styles/utilities/_text.scss

@@ -0,0 +1,206 @@
+// Text utils
+// ===
+
+
+// Font-Family
+// ---
+
+.u-text-family {
+    font-family: $font-family;
+}
+
+.u-text-family-header {
+    font-family: $header-font-family;
+
+    // Added with webfontloader. See loadFonts() in app/container.js
+    .wf-active & {
+        font-family: $loaded-header-font-family;
+    }
+}
+
+.u-text-family-loaded {
+    font-family: $loaded-header-font-family;
+}
+
+
+// Weights & Style
+// ---
+
+.u-text-weight-thin {
+    font-weight: $thin-font-weight;
+}
+
+.u-text-weight-extra-light {
+    font-weight: $extra-light-font-weight;
+}
+
+.u-text-weight-light {
+    font-weight: $light-font-weight;
+}
+
+.u-text-weight-regular {
+    font-weight: $regular-font-weight;
+}
+
+.u-text-weight-medium {
+    font-weight: $medium-font-weight;
+}
+
+.u-text-weight-semi-bold {
+    font-weight: $semi-bold-font-weight;
+}
+
+.u-text-weight-bold {
+    font-weight: $bold-font-weight;
+}
+
+.u-text-style-italic {
+    font-style: italic;
+}
+
+.u-text-quiet {
+    color: $neutral-50;
+    font-size: $small-font-size;
+
+    fill: $neutral-50;
+}
+
+
+// Size
+// ---
+
+.u-text-size-smaller {
+    font-size: $smaller-font-size;
+}
+
+.u-text-size-small {
+    font-size: $small-font-size;
+}
+
+.u-text-size-base {
+    font-size: $font-size;
+}
+
+.u-text-size-big {
+    font-size: $big-font-size;
+}
+
+.u-text-size-bigger {
+    font-size: $bigger-font-size;
+}
+
+.u-text-size-huge {
+    font-size: $huge-font-size;
+}
+
+
+// Line Height
+// ---
+
+.u-text-height-0 {
+    line-height: 0;
+}
+
+.u-text-height-tiny {
+    line-height: $tiny-line-height;
+}
+
+.u-text-height-smaller {
+    line-height: $smaller-line-height;
+}
+
+.u-text-height-small {
+    line-height: $small-line-height;
+}
+
+.u-text-height-base {
+    line-height: $line-height;
+}
+
+.u-text-height-big {
+    line-height: $big-line-height;
+}
+
+.u-text-height-bigger {
+    line-height: $bigger-line-height;
+}
+
+.u-text-height-huge {
+    line-height: $huge-line-height;
+}
+
+
+// Letter Spacing
+// ---
+
+.u-text-letter-spacing-small {
+    letter-spacing: 1px;
+}
+
+.u-text-letter-spacing-normal {
+    letter-spacing: normal;
+}
+
+
+// Text Alignment
+// ---
+
+.u-text-align-start {
+    text-align: left;
+}
+
+.u-text-align-center {
+    text-align: center;
+}
+
+.u-text-align-end {
+    text-align: right;
+}
+
+.u-text-align-middle {
+    vertical-align: middle;
+}
+
+.u-text-align-baseline {
+    vertical-align: baseline;
+}
+
+
+// All Caps
+// ---
+//
+// Set text uppercase, letterspaced for legibility.
+
+.u-text-uppercase {
+    text-transform: uppercase;
+}
+
+
+// Capitalize Text
+// ---
+//
+// Capitalize first letter of string.
+
+.u-text-capitalize {
+    text-transform: capitalize;
+}
+
+
+// Lowercase Text
+// ---
+//
+// Lowercase all text in string.
+
+.u-text-lowercase {
+    text-transform: lowercase;
+}
+
+
+// Strikethrough Text
+// ---
+//
+// Strikethrough all text in string.
+
+.u-text-strikethrough {
+    text-decoration: line-through;
+}