Amsterdam helpers (elastic#93701)

* Adds kbnThemeStyle mixin

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

Co-authored-by: Caroline Horn <[email protected]>

Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Caroline Horn <[email protected]>

.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

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';

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';

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';

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';

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';
+  }
+}