Skip to content

Commit

Permalink
SASS globals helper file (#3691)
Browse files Browse the repository at this point in the history
* Adding a helper `globals` file with just the invisibles

* Update Consuming wiki
  • Loading branch information
cchaos authored Jul 3, 2020
1 parent c3732e6 commit 12bea94
Show file tree
Hide file tree
Showing 8 changed files with 52 additions and 8 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
11 changes: 11 additions & 0 deletions src/themes/eui-amsterdam/eui_amsterdam_globals.scss
Original file line number Diff line number Diff line change
@@ -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';
3 changes: 3 additions & 0 deletions src/themes/eui-amsterdam/global_styling/functions/_index.scss
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
// Import base theme first, then override
@import '../../../../global_styling/functions/index';

@import './shadows';
3 changes: 0 additions & 3 deletions src/themes/eui-amsterdam/global_styling/index.scss
Original file line number Diff line number Diff line change
@@ -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
Expand Down
5 changes: 4 additions & 1 deletion src/themes/eui-amsterdam/global_styling/mixins/_index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// Import base theme first, then override
@import '../../../../global_styling/mixins/index';

@import 'button';
@import 'panel';
@import 'shadow';
@import 'shadow';
3 changes: 3 additions & 0 deletions src/themes/eui-amsterdam/global_styling/variables/_index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// Import base theme first, then override
@import '../../../../global_styling/variables/index';

@import 'buttons';
@import 'borders';
@import 'flyout';
Expand Down
11 changes: 11 additions & 0 deletions src/themes/eui/eui_globals.scss
Original file line number Diff line number Diff line change
@@ -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';
23 changes: 19 additions & 4 deletions wiki/consuming.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -115,7 +130,7 @@ appendIconComponentCache({
arrowDown: EuiIconArrowDown,
arrowLeft: EuiIconArrowLeft,
});
```
```

## Customizing with `className`

Expand Down

0 comments on commit 12bea94

Please sign in to comment.