unify typography

[ezra-sg]

• create typography style system
  • header (h1)
  • subheader (h3)
  • body
  • label (h5)
  • links
    • text vs other links (eg. images)
    • hover state
    • focus state
    • active state
• decide how to handle (incl. possibly disallowing) html tags often used to apply style, like strong and em
• create styles as mixins, eg. @mixin header-text
• create _typography.scss, defining styles using mixins, eg.

  h1,
  .h1,
  .o-text--header {
      @include header-text();
  }

• create text utility classes, u-text-- centered, right, error, primary, grayscales
  • if this ticket is completed before color system, exclude color utility classes and add to that issue's description
• seek and destroy (replace) all explicit text-related styling & classes
• create typography demo route /demo/typography, link in docs / README

Overview

Presently, there are no rules or guidelines for typography on Teloscan. As a result, the text styles are highly fragmented and inconsistent across components (making consistency across Telos applications impossible as well). Additionally, all new features/pages/components take unnecessarily long to create, as the style for every text element must be re-implemented or copied from another component (further increasing inconsistency). Usability decreases with inconsistency of typography as well, as a type design language directs the user's attention and greatly influences their understanding of elements onscreen. Regardless of application size, a small but well-considered system of a couple typefaces and type styles is sufficient to cover all use cases.

For the sake of both development time and user experience, Teloscan (and eventually, all Telos apps) should adhere to a single typography system

Acceptance criteria

• reset styles should be added for all text elements
• a typography system should be be implemented, consisting of:
  • two typefaces, a serif and a sans-serif (existing fonts may be used, they do not need to be new)
  • a primary color
    • color ought to be variableized, as the color system is handled in a separate issue, #132
  • styles (font-family, font-size, font-weight, letter-spacing, line-height) for each of the following text elements:
    • header (h1)
    • subheader (h3)
    • body
    • label (h5)
    • links (not other elements, eg. images)
      • hover state
      • focus state
      • active state
• a new Issue should be created to audit existing style usage and replace with new styles

Technical considerations

• all styles added for this Issue should be namespaced, sandboxed, or otherwise prevented from affecting site styles until such a time as the application is moved to the new system; styles added should not contribute to overall style fragmentation
• styles/mixins which already exist (eg. u-text--center) should be copied to the new files so they remain after future refactoring is complete
• reset styles should be placed in a global sass partial called _reset.scss rather than in /typography, and should include:

  a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  }

• because many non-text elements, eg. <img> are wrapped in an anchor, link style selectors should be written to only target strictly text elements; it should be indicated in the typography docs that some text links may need the link class applied to them, eg. <router-link class="o-text--link">

Tasks

[ezra-sg]

@font-face {
    font-family: 'Ginto Nord';
    font-style:  normal;
    font-weight: $font-weight-bold;
    src: url($ginto-directory + 'Bold.woff2') format('woff2'),
         url($ginto-directory + 'Bold.woff')  format('woff'),
         url($ginto-directory + 'Bold.ttf')   format('truetype'),
}

@font-face {
    font-family: 'Sharp Grotesk 20';
    font-style:  normal;
    font-weight: $font-weight-normal;
    src: url($sharp-directory + 'Book.woff2') format('woff2'),
         url($sharp-directory + 'Book.woff')  format('woff'),
         url($sharp-directory + 'Book.ttf')   format('truetype'),
}

@font-face {
    font-family: 'Sharp Grotesk 20';
    font-style:  normal;
    font-weight: $font-weight-medium;
    src: url($sharp-directory + 'Medium.woff2') format('woff2'),
         url($sharp-directory + 'Medium.woff')  format('woff'),
         url($sharp-directory + 'Medium.ttf')   format('truetype'),
}

@font-face {
    font-family: 'Americana';
    font-style:  normal;
    font-weight: $font-weight-bold;
    src: url($americana-directory + 'Bold.woff2') format('woff2'),
         url($americana-directory + 'Bold.woff')  format('woff');
}

/***********************
 *** Utility Classes ***
 ***********************/

.u {
    &-text {
        // ** Alignments **
        // Must be used on the parent element of the text you wish to align
        &--left {
            text-align: left !important;
        }

        &--center {
            text-align: center !important;
        }

        &--right {
            text-align: right !important;
        }

        // ** Colors **
        &--color-primary {
            color: $color-primary !important;
        }

        &--color-secondary {
            color: $color-secondary !important;
        }

        &--black {
            color: $color-black !important;
        }

        &--gray {
            color: $color-gray !important;
        }

        &--medium-gray {
            color: $color-gray--medium !important;
        }

        &--light-gray {
            color: $color-gray--light !important;
        }

        &--white {
            color: $color-white !important;
        }

        // ** Other Effects **
        &--no-select {
            // disallows text selection; useful for ui elements such as button text that may be confusing for the
            // user to be able to highlight
            user-select: none !important;
        }

        &--no-wrap {
            // prevents a section of text from wrapping. Useful for preventing a single long word or phrase from
            // being displayed on multiple lines (particularly hyphenated words, which browsers will break by default)
            white-space: nowrap !important;
        }

        &--no-style {
            font-style: normal;
        }
    }

    &-display {
        &--block {
            display: block !important;
        }
    }

    &--no-wrap {
        // prevents a section of text from wrapping. Useful for preventing a single long word or phrase from
        // being displayed on multiple lines (particularly hyphenated words, which browsers will break by default)
        white-space: nowrap !important;
    }
}

/*******************
 *** Text Styles ***
 *******************/

html {
    color: $color-black;
    // the baseline for all rem values; 1rem = 10px
    font-size: 10px;
    text-size-adjust: 100%;
}

body,
input,
textarea,
select {
    @include body-copy;
}

input,
textarea,
select {
    @include touch-device {
        // prevent iOS from zooming in on form fields on focus
        font-size: 16px;
    }
}

a {
    color: $color-primary;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;

    &:active {
        color: $color-gray;
    }

    &.disabled {
        cursor: default;
        color: $color-gray--medium;

    }
}

label {
    @include label;
}

.o-text {
    // for edge cases where the default text styling does not automatically get applied
    &--body-copy {
        @include body-copy;
    }

    &--error {
        @include error-text;
    }

    &--label {
        @include label;
    }

    &--link {
        $this: &;

        color: $color-primary;
        cursor: pointer;
        border-bottom: 1px solid $transparent;
        padding-bottom: 2px;

        &:hover,
        &.is-active,
        a:hover & {
            border-bottom-color: $color-primary;
        }

        &:focus {
            outline: none;
        }

        &:active,
        a:active & {
            color: $color-gray;
            border-bottom-color: $color-gray;
        }

        &[disabled] {
            &,
            &:active,
            &:focus,
            &:hover {
                border-bottom-color: $color-gray--medium;
                color: $color-gray--medium;
                cursor: not-allowed;
                text-decoration: none;
            }
        }

        &.is-light {
            color: $color-white;

            &:hover,
            &:active,
            &:focus,
            &.is-active {
                border-bottom-color: $color-white;
            }
        }

        &.is-inline {
            text-decoration: underline;

            &,
            &:hover,
            &:active,
            &:focus {
                border: 0;
            }
        }
    }

    &--button {
        font-family: $typeface-sharp;
        font-size: 1.4rem;
        font-weight: $font-weight-normal;
        letter-spacing: 0.3px;
        line-height: 24px;
    }

    &--caption {
        @include caption;
    }

    @at-root h1,
    &--heading-1 {
        @include heading-1;
    }

    @at-root h2,
    &--heading-2 {
        @include heading-2;
    }

    @at-root h3,
    &--heading-3 {
        @include heading-3;
    }

    @at-root h4,
    &--heading-4 {
        @include heading-4;
    }

    @at-root h5,
    &--heading-5 {
        @include heading-5;
    }

    @at-root h6,
    &--heading-6 {
        @include heading-6;
    }
}

// Normalize password field obfuscation dots (Webkit uses smaller unicode bullet by default)
input[type="password"] {
    font: small-caption;
    font-size: 16px
}

* {
    &::placeholder {
        font-size: 1.4rem;
        // prevent some browsers from reducing opacity by default
        opacity: 1;
    }
}

// bulleted list
.o-list {
    &--bulleted{
        &::before {
            font-size: 10px;
            content: '\2022'; // Unicode Bullet
        }
    }
}