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.

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/_index.scss

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

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/_size.scss

@@ -6,3 +6,4 @@ $kuiSizeM: $kuiSize;
 $kuiSizeL: $kuiSize * 1.5;
 $kuiSizeXL: $kuiSize * 2;
 $kuiSizeXXL: $kuiSize * 2.5;
+

ui_framework/src/global_styling/variables/_typography.scss

@@ -1,16 +1,71 @@
-// Font
-
-$kuiFontFamily: Roboto, Helvetica, Arial, sans-serif;
+// Families
+$kuiFontFamily: "Roboto", Helvetica, Arial, sans-serif;
 $kuiCodeFontFamily: "Roboto Mono", monospace;
 
-$kuiLineHeight: 1.5;
-
+// Font sizes
 $kuiFontSize: $kuiSize;
-$kuiFontSizeXS: $kuiSize;
-$kuiFontSizeS: $kuiSize;
-$kuiFontSizeM: $kuiSize;
-$kuiFontSizeL: $kuiSize;
-$kuiFontSizeXL: $kuiSize;
-$kuiFontSizeXXL: $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/global_styling/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;