Refactor UI Framework directory structure to house everything in a sr…

…c directory. (#12880)

- Add components.js and services.js files to continue to export JS modules from the root.

tasks/ui_framework.js

@@ -78,14 +78,14 @@ module.exports = function (grunt) {
 
   function uiFrameworkCompile() {
     sass.render({
-      file: 'ui_framework/components/index.scss'
+      file: 'ui_framework/src/index.scss'
     }, function (error, result) {
       if (error) {
         grunt.log.error(error);
       }
 
       postcss([postcssConfig])
-        .process(result.css, { from: 'ui_framework/components/index.scss', to: 'ui_framework/dist/ui_framework.css' })
+        .process(result.css, { from: 'ui_framework/src/index.scss', to: 'ui_framework/dist/ui_framework.css' })
         .then(result => {
           grunt.file.write('ui_framework/dist/ui_framework.css', result.css);
 
@@ -102,7 +102,7 @@ module.exports = function (grunt) {
     return new Promise(() => {
       debouncedCompile();
 
-      chokidar.watch('ui_framework/components', { ignoreInitial: true }).on('all', (event, path) => {
+      chokidar.watch('ui_framework/src', { ignoreInitial: true }).on('all', (event, path) => {
         grunt.log.writeln(event, path);
         debouncedCompile();
       });

ui_framework/components.js

@@ -0,0 +1 @@
+export * from './src/components';

ui_framework/services.js

@@ -0,0 +1 @@
+export * from './src/services';

ui_framework/src/global_styling/mixins/_typography.scss

@@ -0,0 +1,17 @@
+// 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
+
+@mixin fontSize($size: $kuiFontSize) {
+  font-size: $size;
+  font-size: convert-to-rem($size);
+}

ui_framework/src/global_styling/variables/_typography.scss

@@ -0,0 +1,73 @@
+// 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;
+
+// Our base fonts
+
+%kuiFont {
+  font-family: $kuiFontFamily;
+  font-weight: $kuiFontWeightRegular;
+}
+
+%kuiCodeFont {
+  font-family: $kuiCodeFontFamily;
+}
+
+// Font sizing extends, using rem mixin
+
+%kuiFontSize {
+  font-size: rem($kuiFontSize);
+  line-height: $kuiLineHeight;
+}
+
+%kuiFontSizeXS {
+  font-size: rem($kuiFontSizeXS);
+  line-height: $kuiLineHeight;
+}
+
+%kuiFontSizeS {
+  font-size: rem($kuiFontSizeS);
+  line-height: $kuiLineHeight;
+}
+
+%kuiFontSizeM {
+  font-size: rem($kuiFontSizeM);
+  line-height: $kuiLineHeight;
+}
+
+%kuiFontSizeL {
+  font-size: rem($kuiFontSizeL);
+  line-height: $kuiLineHeight * 1.5;
+}
+
+%kuiFontSizeXL {
+  font-size: rem($kuiFontSizeXL);
+  line-height: $kuiLineHeight * 2;
+}
+
+%kuiFontSizeXXL {
+  font-size: rem($kuiFontSizeXXL);
+  line-height: $kuiLineHeight * 3;
+}

ui_framework/src/index.scss

@@ -0,0 +1,11 @@
+// Configuration
+@import 'global_styling/variables/index';
+@import 'themes/light_theme/index';
+
+// Core
+@import 'global_styling/mixins/index';
+@import 'global_styling/reset/index';
+@import 'global_styling/utilities/index';
+
+// Components
+@import 'components/index';