SASS globals helper file (#3691)

* Adding a helper `globals` file with just the invisibles

* Update Consuming wiki

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added `paddingSize` prop to `EuiCard` ([#3638](https://github.com/elastic/eui/pull/3638))
 - Added `isClearable` and `placeholder` options to `EuiColorPicker` ([#3689](https://github.com/elastic/eui/pull/3689))
+- Added SASS helper files for EUI theme globals ([#3691](https://github.com/elastic/eui/pull/3691))
 
 ## [`26.3.0`](https://github.com/elastic/eui/tree/v26.3.0)
 

src/themes/eui-amsterdam/eui_amsterdam_globals.scss

@@ -0,0 +1,11 @@
+// Helper file for supplying EUI Amsterdam globals (invisibles only)
+// Must be imported AFTER a colors modifier file
+
+// Functions need to be first, since we use them in our variables and mixin definitions
+@import 'global_styling/functions/index';
+
+// Variables come next, and are used in some mixins
+@import 'global_styling/variables/index';
+
+// Mixins provide generic code expansion through helpers
+@import 'global_styling/mixins/index';

src/themes/eui-amsterdam/global_styling/functions/_index.scss

@@ -1 +1,4 @@
+// Import base theme first, then override
+@import '../../../../global_styling/functions/index';
+
 @import './shadows';

src/themes/eui-amsterdam/global_styling/index.scss

@@ -1,15 +1,12 @@
 // Core
 
 // Functions need to be first, since we use them in our variables and mixin definitions
-@import '../../../global_styling/functions/index';
 @import 'functions/index';
 
 // Variables come next, and are used in some mixins
-@import '../../../global_styling/variables/index';
 @import 'variables/index';
 
 // Mixins provide generic code expansion through helpers
-@import '../../../global_styling/mixins/index';
 @import 'mixins/index';
 
 // Utility classes provide one-off selectors for common css problems

src/themes/eui-amsterdam/global_styling/mixins/_index.scss

@@ -1,3 +1,6 @@
+// Import base theme first, then override
+@import '../../../../global_styling/mixins/index';
+
 @import 'button';
 @import 'panel';
-@import 'shadow';
+@import 'shadow';

src/themes/eui-amsterdam/global_styling/variables/_index.scss

@@ -1,3 +1,6 @@
+// Import base theme first, then override
+@import '../../../../global_styling/variables/index';
+
 @import 'buttons';
 @import 'borders';
 @import 'flyout';

src/themes/eui/eui_globals.scss

@@ -0,0 +1,11 @@
+// Helper file for supplying EUI globals (invisibles only)
+// Must be imported AFTER a colors modifier file
+
+// Functions need to be first, since we use them in our variables and mixin definitions
+@import '../../global_styling/functions/index';
+
+// Variables come next, and are used in some mixins
+@import '../../global_styling/variables/index';
+
+// Mixins provide generic code expansion through helpers
+@import '../../global_styling/mixins/index';

wiki/consuming.md

@@ -59,13 +59,28 @@ Most of the time, you just need the CSS, which provides the styling for the Reac
 import '@elastic/eui/dist/eui_theme_light.css';
 ```
 
-If you want access to the Sass variables, functions, and mixins in EUI then you'll need to import the SCSS file. This will require `style`, `css`, `postcss`, and `sass` loaders. You'll also want to import the SCSS file into one of your own SCSS files, to gain access to these variables, functions, and mixins.
+If you want access to the Sass variables, functions, and mixins in EUI then you'll need to import the Sass files. This will require `style`, `css`, `postcss`, and `sass` loaders. You'll also want to import the Sass file into one of your own Sass files, to gain access to these variables, functions, and mixins.
 
 ```scss
-// index.scss
-@import '../node_modules/@elastic/eui/src/theme_light.scss';
+@import '@elastic/eui/src/theme/eui/eui_colors_light.scss';
+@import '@elastic/eui/src/theme/eui/eui_global.scss';
+```
+
+For the dark theme, import the dark colors file before the globals.
+
+```scss
+@import '@elastic/eui/src/theme/eui/eui_colors_dark.scss';
+@import '@elastic/eui/src/theme/eui/eui_global.scss';
 ```
 
+If you want to use new, but in progress Amsterdam theme, you can import it similarly.
+
+```scss
+@import '@elastic/eui/src/theme/eui_amsterdam/eui_amsterdam_colors_light.scss';
+@import '@elastic/eui/src/theme/eui_amsterdam/eui_amsterdam_global.scss';
+```
+
+
 By default, EUI ships with a font stack that includes some outside, open source fonts. If your system is internet available you can include these by adding the following imports to your SCSS/CSS files, otherwise you'll need to bundle the physical fonts in your build. EUI will drop to System Fonts (which you may prefer) in their absence.
 
 ```scss
@@ -115,7 +130,7 @@ appendIconComponentCache({
   arrowDown: EuiIconArrowDown,
   arrowLeft: EuiIconArrowLeft,
 });
-``` 
+```
 
 ## Customizing with `className`