@buildcanada/charts 0.1.0

package/src/components/styles/typography.scss

@@ -0,0 +1,579 @@
+$sans-serif-font-stack:
+    Lato, "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
+$serif-font-stack:
+    "Playfair Display", Georgia, "Times New Roman", "Liberation Serif", serif;
+$monospace-font-stack:
+    "Menlo", "Courier New", Courier, monospace; // only to be used for code blocks
+$default-font-features: "liga", "kern", "calt", "lnum";
+
+//
+// typographic features
+//
+
+@mixin small-caps {
+    // only applies to Playfair
+    font-family: $serif-font-stack;
+    font-feature-settings: $default-font-features, "c2sc", "smcp";
+    letter-spacing: 0.05em;
+}
+
+@mixin oldstyle-numerals {
+    // useful for changing Lato's numerals
+    font-feature-settings: $default-font-features, "onum";
+}
+
+@mixin lining-numerals {
+    // useful for changing Playfair's numerals
+    font-feature-settings: $default-font-features, "lnum";
+}
+
+@mixin superscript {
+    position: static;
+    top: auto;
+    font-size: 100%;
+    font-feature-settings: $default-font-features, "sups";
+}
+
+@mixin subscript {
+    position: static;
+    bottom: auto;
+    font-size: 100%;
+    font-feature-settings: $default-font-features, "subs";
+}
+
+@mixin fraction {
+    // when enabled, render digits/slashes as fractions
+    // e.g., "in 3/4 time" renders as "in ¾ time"
+    font-feature-settings: $default-font-features, "frac";
+}
+
+body {
+    // use the default features everywhere
+    font-feature-settings: $default-font-features;
+}
+
+//
+// page elements
+//
+
+@mixin display-1-semibold {
+    font-family: $serif-font-stack;
+    font-size: 3.5rem;
+    line-height: 1.4;
+    font-weight: 600;
+    display: block;
+    margin-top: 48px;
+    margin-bottom: 24px;
+    letter-spacing: -0.01rem;
+}
+
+.display-1-semibold {
+    @include display-1-semibold;
+}
+
+@mixin display-2-semibold {
+    font-family: $serif-font-stack;
+    font-size: 2.5rem;
+    line-height: 1.2;
+    font-weight: 600;
+    display: block;
+    margin-top: 48px;
+    margin-bottom: 24px;
+    letter-spacing: -0.01rem;
+
+    @include sm-up {
+        font-size: 2.5rem;
+    }
+}
+
+.display-2-semibold {
+    @include display-2-semibold;
+}
+
+@mixin display-3-semibold {
+    font-family: $sans-serif-font-stack;
+    font-size: 2rem;
+    line-height: 1.1875;
+    font-weight: 500;
+    display: block;
+    margin-top: 32px;
+    margin-bottom: 24px;
+
+    @include sm-up {
+        margin-top: 48px;
+        font-size: 2rem;
+    }
+}
+
+.display-3-semibold {
+    @include display-3-semibold;
+}
+
+@mixin h1-semibold {
+    font-family: $serif-font-stack;
+    font-size: 1.5rem;
+    line-height: 1.25;
+    font-weight: 600;
+    display: block;
+    margin-top: 48px;
+    margin-bottom: 24px;
+    letter-spacing: 0;
+
+    @include sm-up {
+        font-size: 2rem;
+    }
+}
+
+.h1-semibold {
+    @include h1-semibold;
+}
+
+@mixin h1-bold-italic {
+    font-family: $serif-font-stack;
+    font-size: 1.5rem;
+    line-height: 1.25;
+    font-weight: 700;
+    font-style: italic;
+    display: block;
+    margin-top: 48px;
+    margin-bottom: 24px;
+    letter-spacing: 0;
+
+    @include sm-up {
+        font-size: 2rem;
+    }
+}
+
+.h1-bold-italic {
+    @include h1-bold-italic;
+}
+
+@mixin h2-bold {
+    font-family: $serif-font-stack;
+    font-size: 1.25rem;
+    line-height: calc(4 / 3);
+    font-weight: 700;
+    display: block;
+    margin-top: 48px;
+    margin-bottom: 24px;
+    letter-spacing: 0;
+
+    @include sm-up {
+        font-size: 1.5rem;
+    }
+}
+
+.h2-bold {
+    @include h2-bold;
+}
+
+@mixin h2-semibold {
+    font-family: $serif-font-stack;
+    font-size: 1.25rem;
+    line-height: 1.2;
+    font-weight: 600;
+    display: block;
+    margin-top: 48px;
+    margin-bottom: 24px;
+    letter-spacing: 0;
+}
+
+.h2-semibold {
+    @include h2-bold;
+}
+
+@mixin h3-bold {
+    font-family: $serif-font-stack;
+    font-size: 1.125rem;
+    line-height: calc(4 / 3);
+    font-weight: 700;
+    display: block;
+    margin-top: 48px;
+    margin-bottom: 24px;
+    letter-spacing: 0;
+}
+
+.h3-bold {
+    @include h3-bold;
+}
+
+@mixin h3-semibold {
+    font-family: $serif-font-stack;
+    font-size: 1.125rem;
+    line-height: calc(4 / 3);
+    font-weight: 600;
+    display: block;
+    margin-top: 48px;
+    margin-bottom: 24px;
+    letter-spacing: 0;
+}
+
+.h3-semibold {
+    @include h3-semibold;
+}
+
+@mixin h4-semibold {
+    font-family: $serif-font-stack;
+    font-size: 1rem;
+    line-height: 1.5;
+    font-weight: 600;
+    display: block;
+    margin-top: 48px;
+    margin-bottom: 24px;
+    letter-spacing: 0;
+}
+
+.h4-semibold {
+    @include h4-semibold;
+}
+
+@mixin h5-black-caps {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.75rem;
+    font-weight: 900;
+    line-height: calc(4 / 3);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+.h5-black-caps {
+    @include h5-black-caps;
+}
+
+@mixin h6-black-caps {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.625rem;
+    font-weight: 900;
+    line-height: 1.25;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+.h6-black-caps {
+    @include h6-black-caps;
+}
+
+@mixin subtitle-1 {
+    font-family: $sans-serif-font-stack;
+    font-size: 1.5rem;
+    line-height: calc(4 / 3);
+    font-weight: 400;
+    letter-spacing: 0;
+    margin-top: 32px;
+    margin-bottom: 16px;
+}
+
+.subtitle-1 {
+    @include subtitle-1;
+}
+
+@mixin subtitle-1-bold {
+    @include subtitle-1;
+    font-weight: 700;
+}
+
+.subtitle-1-bold {
+    @include subtitle-1-bold;
+}
+
+@mixin subtitle-2 {
+    font-family: $sans-serif-font-stack;
+    font-size: 1.375rem;
+    line-height: calc(28 / 22);
+    font-weight: 400;
+    letter-spacing: 0;
+}
+
+.subtitle-2 {
+    @include subtitle-2;
+}
+
+@mixin subtitle-2-bold {
+    font-family: $sans-serif-font-stack;
+    font-size: 1.25rem;
+    line-height: 1.2;
+    font-weight: 700;
+}
+
+.subtitle-2-bold {
+    @include subtitle-2-bold;
+}
+
+@mixin overline-black-caps {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.75rem;
+    line-height: calc(4 / 3);
+    font-weight: 900;
+    letter-spacing: 0.1rem;
+    text-transform: uppercase;
+}
+
+.overline-black-caps {
+    @include overline-black-caps;
+}
+
+@mixin body-1-regular {
+    font-family: $sans-serif-font-stack;
+    font-size: 1.125rem;
+    line-height: 1.55;
+    font-weight: 400;
+    letter-spacing: 0;
+}
+
+.body-1-regular {
+    @include body-1-regular;
+}
+
+@mixin body-1-bold {
+    @include body-1-regular;
+    font-weight: 700;
+}
+
+.body-1-bold {
+    @include body-1-bold;
+}
+
+@mixin body-1-regular-underlined {
+    @include body-1-regular;
+    text-decoration: underline;
+}
+
+.body-1-regular-underlined {
+    @include body-1-regular-underlined;
+}
+
+@mixin body-1-regular-superscript {
+    @include body-1-regular;
+    font-size: 0.5625rem;
+    vertical-align: top;
+}
+
+.body-1-regular-superscript {
+    @include body-1-regular-superscript;
+}
+
+@mixin body-1-bold {
+    @include body-1-regular;
+    font-weight: 700;
+}
+
+.body-1-bold {
+    @include body-1-bold;
+}
+
+@mixin body-2-regular {
+    font-family: $sans-serif-font-stack;
+    font-size: 1rem;
+    line-height: 1.5;
+    font-weight: 400;
+    letter-spacing: 0;
+}
+
+.body-2-regular {
+    @include body-2-regular;
+}
+@mixin body-2-bold {
+    font-family: $sans-serif-font-stack;
+    font-size: 1rem;
+    line-height: 1.5;
+    font-weight: 700;
+    letter-spacing: 0;
+}
+
+.body-2-bold {
+    @include body-2-bold;
+}
+
+@mixin body-2-regular-underlined {
+    @include body-2-regular;
+    text-decoration: underline;
+}
+
+.body-2-regular-underlined {
+    @include body-2-regular-underlined;
+}
+
+@mixin body-2-regular-superscript {
+    @include body-2-regular;
+    font-size: 0.5rem;
+    vertical-align: top;
+}
+
+.body-2-regular-superscript {
+    @include body-2-regular-superscript;
+}
+
+@mixin body-2-semibold {
+    @include body-2-regular;
+    font-weight: 600;
+}
+
+.body-2-semibold {
+    @include body-2-semibold;
+}
+
+@mixin body-3-regular {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    font-weight: 400;
+}
+
+.body-3-regular {
+    @include body-3-regular;
+}
+
+@mixin body-3-medium {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    font-weight: 500;
+}
+
+.body-3-medium {
+    @include body-3-medium;
+}
+
+@mixin body-3-medium-underlined {
+    @include body-3-medium;
+    text-decoration: underline;
+}
+
+.body-3-medium-underlined {
+    @include body-3-medium-underlined;
+}
+
+@mixin body-3-medium-italic {
+    @include body-3-medium;
+    font-style: italic;
+}
+
+.body-3-medium-italic {
+    @include body-3-medium-italic;
+}
+
+@mixin body-3-medium-italic-underlined {
+    @include body-3-medium;
+    text-decoration: underline;
+    font-style: italic;
+}
+
+.body-3-medium-italic-underlined {
+    @include body-3-medium-italic-underlined;
+}
+
+@mixin body-3-bold {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    font-weight: 700;
+}
+
+.body-3-bold {
+    @include body-3-bold;
+}
+
+@mixin label-1-regular {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.875rem;
+    font-weight: 400;
+    letter-spacing: normal;
+    line-height: normal;
+}
+
+.label-1-regular {
+    @include label-1-regular;
+}
+
+@mixin label-2-medium {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    line-height: normal;
+}
+
+.label-2-medium {
+    @include label-2-medium;
+}
+
+@mixin label-2-regular {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    letter-spacing: 0.01em;
+    line-height: normal;
+}
+
+.label-2-regular {
+    @include label-2-regular;
+}
+
+@mixin label-2-bold {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.8125rem;
+    font-weight: 700;
+    line-height: normal;
+    letter-spacing: 0.01em;
+}
+
+.label-2-bold {
+    @include label-2-bold;
+}
+
+@mixin note-1-regular {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.75rem;
+    font-weight: 400;
+    letter-spacing: 0.01em;
+    line-height: calc(4 / 3);
+}
+
+.note-1-regular {
+    @include note-1-regular;
+}
+
+@mixin note-1-medium {
+    @include note-1-regular;
+    font-weight: 500;
+}
+
+.note-1-medium {
+    @include note-1-medium;
+}
+
+@mixin note-2-regular {
+    font-family: $sans-serif-font-stack;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: 0.22px;
+}
+
+.note-2-regular {
+    @include note-2-regular;
+}
+
+@mixin note-12-medium {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.33;
+    letter-spacing: 0.0075rem;
+}
+
+.note-12-medium {
+    @include note-12-medium;
+}
+
+@mixin note-13-medium {
+    font-family: $sans-serif-font-stack;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1rem;
+}
+
+.note-13-medium {
+    @include note-13-medium;
+}

package/src/components/styles/util.scss

@@ -0,0 +1,89 @@
+/* Float Clearing
+--------------------------------------------- */
+
+.clearfix:before {
+    content: " ";
+    display: table;
+}
+
+.clearfix:after {
+    clear: both;
+    content: " ";
+    display: table;
+}
+
+.nowrap {
+    white-space: nowrap;
+}
+
+.align-left {
+    text-align: left;
+}
+.align-center {
+    text-align: center;
+}
+.align-right {
+    text-align: right;
+}
+
+.list-style-none {
+    list-style: none;
+}
+
+.display-block {
+    display: block;
+}
+
+.hide-sm-only {
+    @include sm-only {
+        display: none !important;
+    }
+}
+
+.show-sm-only {
+    @include sm-up {
+        display: none !important;
+    }
+}
+
+.hide-sm-up {
+    @include sm-up {
+        display: none !important;
+    }
+}
+
+.hide-md-down {
+    @include md-down {
+        display: none !important;
+    }
+}
+
+.hide-md-up {
+    @include md-up {
+        display: none !important;
+    }
+}
+
+.hide-lg-down {
+    @include lg-down {
+        display: none !important;
+    }
+}
+
+.hide-lg-up {
+    @include lg-up {
+        display: none !important;
+    }
+}
+
+// only show for screen readers
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}