From 804c862c8eb91d4935ce9aceed390c7c7a6d9c05 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Wed, 10 Mar 2021 10:27:16 -0600
Subject: [PATCH] Amsterdam helpers (#93701)

* 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>
---
 .stylelintrc                                  |  1 +
 .../core_app/styles/_globals_v7dark.scss      |  2 ++
 .../core_app/styles/_globals_v7light.scss     |  2 ++
 .../core_app/styles/_globals_v8dark.scss      |  2 ++
 .../core_app/styles/_globals_v8light.scss     |  2 ++
 src/core/public/core_app/styles/_mixins.scss  | 28 +++++++++++++++++++
 6 files changed, 37 insertions(+)

diff --git a/.stylelintrc b/.stylelintrc
index 26431cfee6f1d..bc0e4a6c6c04c 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -33,6 +33,7 @@ rules:
       - return
       - for
       - at-root
+      - warn
   comment-no-empty: true
   no-duplicate-at-import-rules: true
   no-duplicate-selectors: true
diff --git a/src/core/public/core_app/styles/_globals_v7dark.scss b/src/core/public/core_app/styles/_globals_v7dark.scss
index 9a4a965d63a38..9341601089737 100644
--- a/src/core/public/core_app/styles/_globals_v7dark.scss
+++ b/src/core/public/core_app/styles/_globals_v7dark.scss
@@ -6,3 +6,5 @@
 @import '@elastic/eui/src/themes/eui/eui_globals';
 
 @import './mixins';
+
+$kbnThemeVersion: 'v7dark';
diff --git a/src/core/public/core_app/styles/_globals_v7light.scss b/src/core/public/core_app/styles/_globals_v7light.scss
index ddb4b5b31fa1f..e1ff6ec70aab5 100644
--- a/src/core/public/core_app/styles/_globals_v7light.scss
+++ b/src/core/public/core_app/styles/_globals_v7light.scss
@@ -6,3 +6,5 @@
 @import '@elastic/eui/src/themes/eui/eui_globals';
 
 @import './mixins';
+
+$kbnThemeVersion: 'v7light';
diff --git a/src/core/public/core_app/styles/_globals_v8dark.scss b/src/core/public/core_app/styles/_globals_v8dark.scss
index 9ad9108f350ff..ce0eeea02eb3b 100644
--- a/src/core/public/core_app/styles/_globals_v8dark.scss
+++ b/src/core/public/core_app/styles/_globals_v8dark.scss
@@ -6,3 +6,5 @@
 @import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals';
 
 @import './mixins';
+
+$kbnThemeVersion: 'v8dark';
diff --git a/src/core/public/core_app/styles/_globals_v8light.scss b/src/core/public/core_app/styles/_globals_v8light.scss
index a6b2cb84c2062..1ec76902f6589 100644
--- a/src/core/public/core_app/styles/_globals_v8light.scss
+++ b/src/core/public/core_app/styles/_globals_v8light.scss
@@ -6,3 +6,5 @@
 @import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals';
 
 @import './mixins';
+
+$kbnThemeVersion: 'v8light';
diff --git a/src/core/public/core_app/styles/_mixins.scss b/src/core/public/core_app/styles/_mixins.scss
index d088a47144f33..b2adbdb691bb6 100644
--- a/src/core/public/core_app/styles/_mixins.scss
+++ b/src/core/public/core_app/styles/_mixins.scss
@@ -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';
+  }
+}