[K7] Font sizing, weights, families and mixins (#12879)

Sets up mixins and placeholders for typography.

style_guides/scss_style_guide.md

@@ -13,4 +13,8 @@ Our style guide is an extension of [Sass Guidelines by Hugo Giraudel](https://sa
 ## Syntax and formatting
 
 The Sass Guidelines site recommends using RBG and HSL values to format colors, but we're using
-hex values.
+hex values.
+
+## Dealing with extends
+
+Don't extend classes. The only time use should use an extend is when you are extending a placeholder. Even then, do it rarely and only for code maintainability.

ui_framework/components/global_styles/mixins/_index.scss

@@ -1,2 +1,3 @@
 @import 'naming';
 @import 'responsive';
+@import 'typography';

ui_framework/components/global_styles/mixins/_typography.scss

@@ -0,0 +1,63 @@
+// Some mixins that help us deal with browser scaling of text more consistantly.
+// Essentially, fonts across kui should scale agains the root html element, not
+// against parent inheritance.
+
+
+// Typography mixins
+
+@function convertToRem($size) {
+  @return #{$size / $kuiFontSize}rem;
+}
+
+// Spit out rem and px. This helps out people who might be on older versions of IE (<11).
+
+@mixin fontSize($size: $kuiFontSize) {
+  font-size: $size;
+  font-size: convertToRem($size);
+}
+
+%kuiFont {
+  font-family: $kuiFontFamily;
+  font-weight: $kuiFontWeightRegular;
+}
+
+%kuiCodeFont {
+  font-family: $kuiCodeFontFamily;
+}
+
+// Font sizing extends, using rem mixin
+
+%kuiFontSize {
+  @include fontSize($kuiFontSize);
+  line-height: $kuiLineHeight;
+}
+
+%kuiFontSizeXS {
+  @include fontSize($kuiFontSizeXS);
+  line-height: $kuiLineHeight;
+}
+
+%kuiFontSizeS {
+  @include fontSize($kuiFontSizeS);
+  line-height: $kuiLineHeight;
+}
+
+%kuiFontSizeM {
+  @include fontSize($kuiFontSizeM);
+  line-height: $kuiLineHeight;
+}
+
+%kuiFontSizeL {
+  @include fontSize($kuiFontSizeL);
+  line-height: $kuiLineHeight * 1.5;
+}
+
+%kuiFontSizeXL {
+  @include fontSize($kuiFontSizeXL);
+  line-height: $kuiLineHeight * 2;
+}
+
+%kuiFontSizeXXL {
+  @include fontSize($kuiFontSizeXXL);
+  line-height: $kuiLineHeight * 3;
+}

ui_framework/components/global_styles/variables/_index.scss

@@ -10,7 +10,7 @@
 @import 'size';
 @import 'colors';
 @import 'animations';
-@import 'font';
+@import 'typography';
 @import 'borders';
 @import 'shadows';
 @import 'z_index';

ui_framework/components/global_styles/variables/_typography.scss

@@ -0,0 +1,25 @@
+// Font
+
+// Families
+$kuiFontFamily: "Roboto", Helvetica, Arial, sans-serif;
+$kuiCodeFontFamily: "Roboto Mono", monospace;
+
+// Font sizes
+$kuiFontSize:       $kuiSize;
+
+$kuiFontSizeXS:     12px;
+$kuiFontSizeS:      14px;
+$kuiFontSizeM:      $kuiFontSize;
+$kuiFontSizeL:      24px;
+$kuiFontSizeXL:     32px;
+$kuiFontSizeXXL:    48px;
+
+// Line height
+
+$kuiLineHeight: 1.5 * $kuiFontSize;
+
+// Font weights
+
+$kuiFontWeightLight:    300;
+$kuiFontWeightRegular:  400;
+$kuiFontWeightMedium:   500;

ui_framework/components/global_styles/variables/_z_index.scss

@@ -1,6 +1,5 @@
 // Z-Index
 
-
 $kuiZLevel0:          0;
 $kuiZLevel1:          1000;
 $kuiZLevel2:          2000;
@@ -12,10 +11,8 @@ $kuiZLevel7:          7000;
 $kuiZLevel8:          8000;
 $kuiZLevel9:          9000;
 
-
-
-$kuiZContent:         0;
-$kuiZContentMenu:     2000;
-$kuiZNavigation:      4000;
-$kuiZMask:            6000;
-$kuiZModal:           8000;
+$kuiZContent:         $kuiZLevel0;
+$kuiZContentMenu:     $kuiZLevel2;
+$kuiZNavigation:      $kuiZLevel4;
+$kuiZMask:            $kuiZLevel6;
+$kuiZModal:           $kuiZLevel8;

ui_framework/dist/ui_framework.css

@@ -0,0 +1,49 @@
+/**
+ * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126).
+ *
+ */
+* {
+  border-box: box-sizing; }
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+body {
+  line-height: 1; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }