Create global_styles dir with sub-directories. (elastic#12833)

ui_framework/components/global_styles/_index.scss

@@ -0,0 +1,3 @@
+@import 'reset/index';
+@import 'variables/index';
+@import 'mixins/index';

ui_framework/components/global_styles/mixins/_index.scss

@@ -0,0 +1 @@
+@import 'global_mixins';

ui_framework/components/global_styles/reset/_index.scss

@@ -0,0 +1 @@
+@import "reset";

ui_framework/components/global_styles/variables/_animations.scss

@@ -0,0 +1,9 @@
+// Animations
+
+$globalAnimSlightBounce: cubic-bezier(0.34,1.61,0.7,1);
+$globalAnimSlightResistance: cubic-bezier(0.694, 0.0482, 0.335, 1);
+$globalAnimSpeedVeryFast: 90ms;
+$globalAnimSpeedFast: 150ms;
+$globalAnimSpeedNormal: 250ms;
+$globalAnimSpeedSlow: 350ms;
+$globalAnimSpeedVerySlow: 500ms;

ui_framework/components/global_styles/variables/_borders.scss

@@ -0,0 +1,6 @@
+// Borders
+
+$globalBorderColor: $globalColorLightGray;
+$globalBorderRadius: 4px;
+$globalBorderThick: 2px solid $globalBorderColor;
+$globalBorderThin: 1px solid $globalBorderColor;

ui_framework/components/global_styles/variables/_colors.scss

@@ -0,0 +1,49 @@
+// True colors
+
+$globalColorBlue: #0079a5;
+$globalColorTeal: #00A69B;
+$globalColorRed: #A30000;
+$globalColorLightestGray: #F5F5F5;
+$globalColorLightGray: #D9D9D9;
+$globalColorMediumGray: #999;
+$globalColorDarkGray: #666;
+$globalColorDarkestGray: #3F3F3F;
+$globalColorBlack: #000;
+$globalColorWhite: #FFF;
+
+// Normal colors
+
+$globalTextColor: #2d2d2d;
+$globalLinkColor: $globalColorBlue;
+$globalLinkColor-isHover: darken($globalLinkColor, 10%);
+$globalInputTextColor: $globalTextColor;
+$globalInputBackgroundColor: $globalColorWhite;
+$globalInputBorderColor: $globalColorLightGray;
+
+// Dark theme colors
+
+$globalTextColor--darkTheme: #cecece;
+$globalBackgroundColor--darkTheme: #777777;
+$globalLinkColor--darkTheme: #b7e2ea;
+$globalLinkColor-isHover--darkTheme: #def2f6;
+$globalInputTextColor--darkTheme: $globalTextColor--darkTheme;
+$globalInputBackgroundColor--darkTheme: #444444;
+$globalInputBorderColor--darkTheme: $globalInputBackgroundColor--darkTheme;
+
+// Colors
+
+$globalInfoColor: #3fa8c7;
+$globalInactiveColor: #c3c3c3;
+$globalSuccessColor: #417505;
+$globalWarningColor: #ec9800;
+$globalDangerColor: $globalColorRed;
+$globalFocusColor: $globalColorBlue;
+$globalFocusDangerColor: #ff523c;
+$globalFocusWarningColor: #ffa500;
+$globalFocusBackgroundColor: #ffffff;
+$globalFontColor: #191E23;
+$globalSubduedTextColor: $globalColorDarkGray;
+$globalLinkHoverColor: #006E8A;
+$globalSelectedBorderColor: $globalColorBlue;
+$globalDangerBorderColor: $globalDangerColor;
+$globalFormControlBorderColor: #DEDEDE;

ui_framework/components/global_styles/variables/_font.scss

@@ -0,0 +1,9 @@
+// Font
+
+$globalFontFamily: "Open Sans", Helvetica, Arial, sans-serif;
+$globalFontSize: 14px;
+$globalLineHeight: 1.5;
+$globalSubTextFontSize: 12px;
+$globalTitleFontSize: 18px;
+$globalFontWeightRegular: 400;
+$globalFontWeightBold: 700;

ui_framework/components/global_styles/variables/_index.scss

@@ -0,0 +1,15 @@
+// --------------------------------------------------------------------------------------
+// KUI global variables
+// --------------------------------------------------------------------------------------
+// This module contains all global variables available within kui. Every variable in this
+// document should be prefixed with $global. This lets us know where the variable is
+// coming from when looking inside the individual component files. Any component local
+// variables should be declared at the top of those documents prefixed with $componentName.
+
+@import 'colors';
+@import 'font';
+@import 'timing';
+@import 'borders';
+@import 'shadows';
+@import 'z_index';
+@import 'animations';

ui_framework/components/global_styles/variables/_shadows.scss

@@ -0,0 +1,3 @@
+// Shadows
+
+$globalBoxShadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);

ui_framework/components/global_styles/variables/_timing.scss

@@ -0,0 +1,3 @@
+// Timing
+
+$globalInputTransitionTiming: 0.1s linear;

ui_framework/components/index.scss

@@ -12,11 +12,8 @@
 // When possible, if making changes to those legacy components, please think about
 // instead adding them to this library and deprecating that dependency.
 
-
-// Global constants
-@import "variables";
-@import "mixins";
-@import "common_styles";
+// Global styles
+@import "global_styles/index"
 
 // Components
 @import "accessibility/index";

ui_framework/doc_site/src/components/guide/_guide.scss

@@ -1,3 +1,7 @@
+html {
+  height: 100%;
+}
+
 .guideBody {
   height: 100%;
   background-color: #000000;

ui_framework/doc_site/src/components/guide_page/_guide_page.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .guidePage {
   display: flex;
   flex: 1 0 auto;