diff --git a/CHANGELOG.md b/CHANGELOG.md
index e762277fb48..597ae1ee439 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
## [`master`](https://github.com/elastic/eui/tree/master)
+- Adjusted the dark theme palette to have a slight blue titn ([#1691](https://github.com/elastic/eui/pull/1691))
- Added `repositionOnScroll` property to the `EuiPopoverProps` type definition ([#1628](https://github.com/elastic/eui/pull/1628))
- Added support to `findTestSubject` for an optional `matcher` argument, which defaults to `~=`, enabling it to identify an element based on one of multiple space-separated values within its `data-test-subj` attribute ([#1587](https://github.com/elastic/eui/pull/1587))
- Converted `EuiFlexGrid`, `EuiFlexGroup`, `EuiFlexItem`, `EuiDescriptionList`, `EuiDescriptionListTitle`, and `EuiDescriptionListDescription` to TypeScript ([#1365](https://github.com/elastic/eui/pull/1365))
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index bbaf7fe1e6b..1477b59fa4e 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -25,7 +25,7 @@ import ColorGuidelines
import ModalGuidelines
from './views/guidelines/modals';
-import SassGuidelines
+import { SassGuidelines }
from './views/guidelines/sass';
import TextScales
diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
index 5d44884d7a8..094f21d07c5 100644
--- a/src-docs/src/views/app_view.js
+++ b/src-docs/src/views/app_view.js
@@ -80,7 +80,7 @@ export class AppView extends Component {
- Remember that EUI provides dark and light mode theming support. Sometimes the traditional
- color functions don't give enough flexibility for both modes.
-
-
- For example, depending upon what theme you use $EuiColorPrimary will be a different
- hex value.
-
-
-
-
-
-
-
-
-
- $euiColorPrimary
-
-
-
-
- is #0079A5 in the light theme
-
-
-
-
-
-
-
-
-
-
- $euiColorPrimary
-
-
-
-
- is #4da1c0 in the dark theme
-
-
-
-
-
-
-
-
- Taking the default primary color above we want to tint the color
- in the light mode, but shade it in the dark mode. This makes the
- background color more subtle in both use cases.
-
+ Remember that EUI provides dark and light mode theming support. Sometimes the traditional
+ color functions don't give enough flexibility for both modes.
+
+
+ For example, depending upon what theme you use $EuiColorPrimary will be a different
+ hex value.
+
+ Taking the default primary color above we want to tint the color
+ in the light mode, but shade it in the dark mode. This makes the
+ background color more subtle in both use cases.
+
+
-
-
-
Light theme
-
-
-
Dark theme
-
-
+
-
+ {tintOrShadeExample}
-
-
-
Color contrast patterns
-
-
-
-
-
-
- EUI provides some nifty color functions for auto-adjusting color to pass AA contrast checks.
- Often this is needed when using the base colors on top of each other. Here is an example
- similar to our callouts with a pesky orange.
-
-
+
-
+
+
+
Light theme
+
+
+
Dark theme
+
+
- {contrastExample}
+
-
+
+
+
Color contrast patterns
+
-
- This orange text now passes a contrast check!
-
+
-
+
+
+ EUI provides some nifty color functions for auto-adjusting color to pass AA contrast checks.
+ Often this is needed when using the base colors on top of each other. Here is an example
+ similar to our callouts with a pesky orange.
+
+
-
-
More on color contrast
-
+
-
+ {contrastExample}
-
-
- Consult the larger color guidelines page
- for a better explanation about passing color contrast.
-
-
+
+
+ This orange text now passes a contrast check!
+
-
-
-
-
- Typography
-
-
-
- View the variable
- {' '} and mixins
- {' '}Sass code for typography.
- For most of your components we recommend using EuiText or
- {' '}EuiTitle instead of these Sass variables.
-
-
-
-
-
- It is more common to use these as a mixin (e.g. @include euiFontSizeS;)
- to automatically apply line-height as well as size.
-
- }
- />
-
-
-
-
-
-
+ Consult the larger color guidelines page
+ for a better explanation about passing color contrast.
+
+
-
-
-
Font families
+
+
+
+
+ Typography
+
+
+
+ View the variable
+ {' '} and mixins
+ {' '}Sass code for typography.
+ For most of your components we recommend using EuiText or
+ {' '}EuiTitle instead of these Sass variables.
+
+
+
+
+
+ It is more common to use these as a mixin (e.g. @include euiFontSizeS;)
+ to automatically apply line-height as well as size.
+
+ }
+ />
+
+
+
+
+
+
- Minima reprehenderit aperiam at in ea. Veniam nihil quod tempore.
- Dolores sit quo expedita voluptate libero.
- Consequuntur atque nulla atque nemo tenetur numquam.
- Assumenda aspernatur qui aut sit. Aliquam doloribus iure sint id.
- Possimus dolor qui soluta cum id tempore ea illum.
- Facilis voluptatem aut aut ut similique ut.
- Sed repellendus commodi iure officiis exercitationem praesentium
- dolor. Ratione non ut nulla accusamus et. Optio laboriosam id
- incidunt. Ipsam voluptate ab quia necessitatibus sequi earum
- voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero
- tempore sit placeat maxime laudantium.
- Mollitia tempore minus qui autem modi adipisci ad. Iste reprehenderit
- accusamus voluptatem velit. Quidem delectus eos veritatis et vitae
- et nisi. Doloribus ut corrupti voluptates qui exercitationem dolores.
+ Primarily used in modals and flyouts, the overflow shadows add a white
+ glow to subtly hide the content they float above.
+ Minima reprehenderit aperiam at in ea. Veniam nihil quod tempore.
+ Dolores sit quo expedita voluptate libero.
+ Consequuntur atque nulla atque nemo tenetur numquam.
+ Assumenda aspernatur qui aut sit. Aliquam doloribus iure sint id.
+ Possimus dolor qui soluta cum id tempore ea illum.
+ Facilis voluptatem aut aut ut similique ut.
+ Sed repellendus commodi iure officiis exercitationem praesentium
+ dolor. Ratione non ut nulla accusamus et. Optio laboriosam id
+ incidunt. Ipsam voluptate ab quia necessitatibus sequi earum
+ voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero
+ tempore sit placeat maxime laudantium.
+ Mollitia tempore minus qui autem modi adipisci ad. Iste reprehenderit
+ accusamus voluptatem velit. Quidem delectus eos veritatis et vitae
+ et nisi. Doloribus ut corrupti voluptates qui exercitationem dolores.
+
- EUI utilizes the following constants to maintain a similar 'bounce' to its animations.
- That said, animations are tricky, and if they aren't working for your specific application
- this is the one place where we think it's OK to come up with your own rules.
-
+ EUI utilizes the following constants to maintain a similar 'bounce' to its animations.
+ That said, animations are tricky, and if they aren't working for your specific application
+ this is the one place where we think it's OK to come up with your own rules.
+
- EUI is written in a BEMish style with the addition of verb states (ex: *-isLoading).
- Below is an example of proper formatting.
-
-
-
- {bemExample}
-
-
-
-
Writing Sass the EUI way
-
- In general, when writing new SCSS in a project that installs EUI as a dependency
- try to follow these best practices:
-
-
-
-
-
-
Utilize color variables and functions rather than hard-coded values
-
Utilize the sizing variables for padding and margins
-
Utilize the animation variables for animations when possible
-
Utilize the responsive mixins for all screen width calculations
-
Utilize the typography mixins and variables for all font family, weight, and sizing
-
Utilize the shadow mixins and z-index variables to manage depth
-
Utilize the border and border-radius variable to handle border usage
-
Minimize your overwrites and try to make new Sass additive in nature
-
-
+ Sass best practices
+
+
+
+
+
+
+
Component based naming
+
+ EUI is written in a BEMish style with the addition of verb states (ex: *-isLoading).
+ Below is an example of proper formatting.
+
+
+
+ {bemExample}
+
+
+
+
Writing Sass the EUI way
+
+ In general, when writing new SCSS in a project that installs EUI as a dependency
+ try to follow these best practices:
+
+
+
+
+
+
Utilize color variables and functions rather than hard-coded values
+
Utilize the sizing variables for padding and margins
+
Utilize the animation variables for animations when possible
+
Utilize the responsive mixins for all screen width calculations
+
Utilize the typography mixins and variables for all font family, weight, and sizing
+
Utilize the shadow mixins and z-index variables to manage depth
+
Utilize the border and border-radius variable to handle border usage
+
Minimize your overwrites and try to make new Sass additive in nature
+
+
-
+
-
-
Importing EUI global Sass
-
+
+
Importing EUI global Sass
+
-
+
-
-
- Most EUI based projects should already import the EUI global
- scope. For example, Kibana has its own
- liner that will give you everything on this page.
-
-
-
-
- {importKibanaExample}
-
-
-
-
- If you want to construct your own import, you would just need to
- import the following core files into a fresh Sass project.
-
-
+
+
+ Most EUI based projects should already import the EUI global
+ scope. For example, Kibana has its own
+ liner that will give you everything on this page.
+
+
+
+
+ {importKibanaExample}
+
+
+
+
+ If you want to construct your own import, you would just need to
+ import the following core files into a fresh Sass project.
+