Amsterdam helpers (#93701) (#94323)

* Adds kbnThemeStyle mixin

* Update src/core/public/core_app/styles/_mixins.scss

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
This commit is contained in:
Ryan Keairns 2021-03-10 12:36:11 -06:00 committed by GitHub
parent 773c11c61e
commit 05a57c9f9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 37 additions and 0 deletions

View file

@ -33,6 +33,7 @@ rules:
- return
- for
- at-root
- warn
comment-no-empty: true
no-duplicate-at-import-rules: true
no-duplicate-selectors: true

View file

@ -6,3 +6,5 @@
@import '@elastic/eui/src/themes/eui/eui_globals';
@import './mixins';
$kbnThemeVersion: 'v7dark';

View file

@ -6,3 +6,5 @@
@import '@elastic/eui/src/themes/eui/eui_globals';
@import './mixins';
$kbnThemeVersion: 'v7light';

View file

@ -6,3 +6,5 @@
@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals';
@import './mixins';
$kbnThemeVersion: 'v8dark';

View file

@ -6,3 +6,5 @@
@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals';
@import './mixins';
$kbnThemeVersion: 'v8light';

View file

@ -120,3 +120,31 @@
}
}
}
@mixin kbnThemeStyle($theme, $mode: 'both') {
$themes: 'v7', 'v8';
@if (index($themes, $theme)) {
@if ($mode == 'both') {
$themeLight: $theme + 'light';
$themeDark: $theme + 'dark';
// $kbnThemeVersion comes from the active theme's globals file (e.g. _globals_v8light.scss)
@if ($kbnThemeVersion == $themeLight or $kbnThemeVersion == $themeDark) {
@content;
}
} @else if ($mode == 'light') {
$themeLight: $theme + 'light';
@if ($kbnThemeVersion == $themeLight) {
@content;
}
} @else if ($mode == 'dark') {
$themeDark: $theme + 'dark';
@if ($kbnThemeVersion == $themeDark) {
@content;
}
} @else {
@warn 'The second parameter must be a valid mode (light, dark, or both) -- got #{$mode}';
}
} @else {
@warn 'Invalid $theme. Valid options are: #{$themes}. Got #{$theme} instead';
}
}