From 12bea9475f9cb0e22a4dada1771c4038b0453e01 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Thu, 2 Jul 2020 21:44:09 -0400 Subject: [PATCH] SASS globals helper file (#3691) * Adding a helper `globals` file with just the invisibles * Update Consuming wiki --- CHANGELOG.md | 1 + .../eui-amsterdam/eui_amsterdam_globals.scss | 11 +++++++++ .../global_styling/functions/_index.scss | 3 +++ .../eui-amsterdam/global_styling/index.scss | 3 --- .../global_styling/mixins/_index.scss | 5 +++- .../global_styling/variables/_index.scss | 3 +++ src/themes/eui/eui_globals.scss | 11 +++++++++ wiki/consuming.md | 23 +++++++++++++++---- 8 files changed, 52 insertions(+), 8 deletions(-) create mode 100644 src/themes/eui-amsterdam/eui_amsterdam_globals.scss create mode 100644 src/themes/eui/eui_globals.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index adfa259912a..05ebb6b7f1c 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/themes/eui-amsterdam/eui_amsterdam_globals.scss b/src/themes/eui-amsterdam/eui_amsterdam_globals.scss new file mode 100644 index 00000000000..775ff4f1f89 --- /dev/null +++ b/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'; diff --git a/src/themes/eui-amsterdam/global_styling/functions/_index.scss b/src/themes/eui-amsterdam/global_styling/functions/_index.scss index b1df7c8d07d..85cc1eb8a1c 100644 --- a/src/themes/eui-amsterdam/global_styling/functions/_index.scss +++ b/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'; diff --git a/src/themes/eui-amsterdam/global_styling/index.scss b/src/themes/eui-amsterdam/global_styling/index.scss index 524a8b4f8e2..1b1ce3ae421 100644 --- a/src/themes/eui-amsterdam/global_styling/index.scss +++ b/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 diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss index 014a7b652f5..bb41ca763e8 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss +++ b/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'; \ No newline at end of file +@import 'shadow'; diff --git a/src/themes/eui-amsterdam/global_styling/variables/_index.scss b/src/themes/eui-amsterdam/global_styling/variables/_index.scss index 1fb61f66626..077e1e9aa0f 100644 --- a/src/themes/eui-amsterdam/global_styling/variables/_index.scss +++ b/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'; diff --git a/src/themes/eui/eui_globals.scss b/src/themes/eui/eui_globals.scss new file mode 100644 index 00000000000..0394733cb98 --- /dev/null +++ b/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'; diff --git a/wiki/consuming.md b/wiki/consuming.md index 5f2cdf2e97a..982deb4b4c9 100644 --- a/wiki/consuming.md +++ b/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`