@elastic/eui 97.3.0 → 97.3.1-borealis.1

package/optimize/lib/themes/amsterdam/global_styling/variables/_forms.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.forms = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _utils = require("../../../../services/theme/utils");
+var _manipulation = require("../../../../services/color/manipulation");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var _forms = {
+  background: (0, _utils.computed)(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+      lightestShade = _ref2[0];
+    return (0, _manipulation.tint)(lightestShade, 0.6);
+  }, ['colors.lightestShade']),
+  backgroundDisabled: (0, _utils.computed)(function (_ref3) {
+    var _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
+      lightestShade = _ref4[0];
+    return (0, _manipulation.darken)(lightestShade, 0.05);
+  }, ['colors.lightestShade']),
+  backgroundReadOnly: (0, _utils.computed)(function (_ref5) {
+    var _ref6 = (0, _slicedToArray2.default)(_ref5, 1),
+      emptyShade = _ref6[0];
+    return emptyShade;
+  }, ['colors.emptyShade']),
+  backgroundFocused: (0, _utils.computed)(function (_ref7) {
+    var _ref8 = (0, _slicedToArray2.default)(_ref7, 1),
+      emptyShade = _ref8[0];
+    return emptyShade;
+  }, ['colors.emptyShade']),
+  backgroundAutofilled: (0, _utils.computed)(function (_ref9) {
+    var _ref10 = (0, _slicedToArray2.default)(_ref9, 1),
+      primary = _ref10[0];
+    var background = (0, _manipulation.tint)(primary, 0.8);
+    return (0, _manipulation.tint)(background, 0.7);
+  }, ['colors.primary']),
+  prependBackground: (0, _utils.computed)(function (_ref11) {
+    var _ref12 = (0, _slicedToArray2.default)(_ref11, 1),
+      lightShade = _ref12[0];
+    return (0, _manipulation.tint)(lightShade, 0.5);
+  }, ['colors.lightShade']),
+  border: (0, _utils.computed)(function (_ref13) {
+    var _ref14 = (0, _slicedToArray2.default)(_ref13, 1),
+      lightShade = _ref14[0];
+    var color = (0, _manipulation.darken)(lightShade, 4);
+    return (0, _manipulation.transparentize)(color, 0.1);
+  }, ['colors.lightShade']),
+  borderAutofilled: (0, _utils.computed)(function (_ref15) {
+    var _ref16 = (0, _slicedToArray2.default)(_ref15, 1),
+      primaryText = _ref16[0];
+    return (0, _manipulation.transparentize)(primaryText, 0.2);
+  }, ['colors.primaryText']),
+  controlBorder: (0, _utils.computed)(function (_ref17) {
+    var _ref18 = (0, _slicedToArray2.default)(_ref17, 1),
+      lightestShade = _ref18[0];
+    return (0, _manipulation.shade)(lightestShade, 0.4);
+  }, ['colors.lightestShade']),
+  controlBorderSelected: (0, _utils.computed)(function (_ref19) {
+    var _ref20 = (0, _slicedToArray2.default)(_ref19, 1),
+      lightestShade = _ref20[0];
+    return (0, _manipulation.shade)(lightestShade, 0.4);
+  }, ['colors.lightestShade']),
+  controlBorderDisabled: (0, _utils.computed)(function (_ref21) {
+    var _ref22 = (0, _slicedToArray2.default)(_ref21, 1),
+      lightestShade = _ref22[0];
+    return (0, _manipulation.shade)(lightestShade, 0.4);
+  }, ['colors.lightestShade']),
+  controlBackgroundUnselected: (0, _utils.computed)(function (_ref23) {
+    var _ref24 = (0, _slicedToArray2.default)(_ref23, 1),
+      emptyShade = _ref24[0];
+    return emptyShade;
+  }, ['colors.emptyShade']),
+  controlBackgroundDisabled: (0, _utils.computed)(function (_ref25) {
+    var _ref26 = (0, _slicedToArray2.default)(_ref25, 1),
+      lightShade = _ref26[0];
+    return lightShade;
+  }, ['colors.lightShade']),
+  colorHasPlaceholder: (0, _utils.computed)(function (_ref27) {
+    var _ref28 = (0, _slicedToArray2.default)(_ref27, 1),
+      subduedText = _ref28[0];
+    return (0, _manipulation.tint)(subduedText, 0.08);
+  }, ['colors.subduedText']),
+  colorDisabled: (0, _utils.computed)(function (_ref29) {
+    var _ref30 = (0, _slicedToArray2.default)(_ref29, 1),
+      mediumShade = _ref30[0];
+    return mediumShade;
+  }, ['colors.mediumShade']),
+  iconDisabled: (0, _utils.computed)(function (_ref31) {
+    var _ref32 = (0, _slicedToArray2.default)(_ref31, 1),
+      darkShade = _ref32[0];
+    return darkShade;
+  }, ['colors.darkShade'])
+};
+var _dark_forms = _objectSpread(_objectSpread({}, _forms), {}, {
+  background: (0, _utils.computed)(function (_ref33) {
+    var _ref34 = (0, _slicedToArray2.default)(_ref33, 1),
+      lightestShade = _ref34[0];
+    return (0, _manipulation.shade)(lightestShade, 0.4);
+  }, ['colors.lightestShade']),
+  backgroundFocused: (0, _utils.computed)(function (_ref35) {
+    var _ref36 = (0, _slicedToArray2.default)(_ref35, 1),
+      emptyShade = _ref36[0];
+    return (0, _manipulation.shade)(emptyShade, 0.4);
+  }, ['colors.emptyShade']),
+  backgroundAutofilled: (0, _utils.computed)(function (_ref37) {
+    var _ref38 = (0, _slicedToArray2.default)(_ref37, 1),
+      primary = _ref38[0];
+    var background = (0, _manipulation.shade)(primary, 0.7);
+    return (0, _manipulation.shade)(background, 0.5);
+  }, ['colors.primary']),
+  prependBackground: (0, _utils.computed)(function (_ref39) {
+    var _ref40 = (0, _slicedToArray2.default)(_ref39, 1),
+      lightShade = _ref40[0];
+    return (0, _manipulation.shade)(lightShade, 0.15);
+  }, ['colors.lightShade']),
+  border: (0, _utils.computed)(function (_ref41) {
+    var _ref42 = (0, _slicedToArray2.default)(_ref41, 1),
+      ghost = _ref42[0];
+    return (0, _manipulation.transparentize)(ghost, 0.1);
+  }, ['colors.ghost']),
+  controlBorder: (0, _utils.computed)(function (_ref43) {
+    var _ref44 = (0, _slicedToArray2.default)(_ref43, 1),
+      lightestShade = _ref44[0];
+    return (0, _manipulation.tint)(lightestShade, 0.31);
+  }, ['colors.lightestShade']),
+  controlBorderSelected: (0, _utils.computed)(function (_ref45) {
+    var _ref46 = (0, _slicedToArray2.default)(_ref45, 1),
+      lightestShade = _ref46[0];
+    return (0, _manipulation.tint)(lightestShade, 0.31);
+  }, ['colors.lightestShade']),
+  controlBorderDisabled: (0, _utils.computed)(function (_ref47) {
+    var _ref48 = (0, _slicedToArray2.default)(_ref47, 1),
+      lightestShade = _ref48[0];
+    return (0, _manipulation.tint)(lightestShade, 0.31);
+  }, ['colors.lightestShade'])
+});
+var forms = exports.forms = {
+  LIGHT: _forms,
+  DARK: _dark_forms
+};

package/optimize/lib/themes/amsterdam/theme.js

@@ -13,6 +13,7 @@ var _borders = require("./global_styling/variables/_borders");
 var _levels = require("./global_styling/variables/_levels");
 var _typography = require("./global_styling/variables/_typography");
 var _states = require("./global_styling/variables/_states");
+var _components = require("./global_styling/variables/_components");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -31,6 +32,11 @@ var euiThemeAmsterdam = exports.euiThemeAmsterdam = {
   animation: _animation.animation,
   breakpoint: _breakpoint.breakpoint,
   levels: _levels.levels,
-  focus: _states.focus
+  focus: _states.focus,
+  components: _components.components,
+  flags: {
+    hasGlobalFocusColor: false,
+    hasVisColorAdjustment: true
+  }
 };
 var EuiThemeAmsterdam = exports.EuiThemeAmsterdam = (0, _utils.buildTheme)(euiThemeAmsterdam, AMSTERDAM_NAME_KEY);

package/optimize/lib/themes/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   EUI_THEMES: true,
   isDefaultTheme: true,
+  isExperimentalThemeEnabled: true,
   AMSTERDAM_NAME_KEY: true,
   EuiThemeAmsterdam: true
 };
@@ -33,6 +34,12 @@ Object.defineProperty(exports, "isDefaultTheme", {
     return _themes.isDefaultTheme;
   }
 });
+Object.defineProperty(exports, "isExperimentalThemeEnabled", {
+  enumerable: true,
+  get: function get() {
+    return _themes.isExperimentalThemeEnabled;
+  }
+});
 var _themes = require("./themes");
 var _theme = require("./amsterdam/theme");
 var _amsterdam = require("./amsterdam");

package/optimize/lib/themes/themes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isDefaultTheme = exports.EUI_THEMES = void 0;
+exports.isExperimentalThemeEnabled = exports.isDefaultTheme = exports.EUI_THEMES = exports.EUI_EXPERIMENTAL_THEME_ENABLED_KEY = void 0;
 var _theme = require("./amsterdam/theme");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -14,14 +14,17 @@ var _theme = require("./amsterdam/theme");
  */
 
 var EUI_THEMES = exports.EUI_THEMES = [{
-  text: 'Light',
-  value: 'light',
-  provider: _theme.EuiThemeAmsterdam
-}, {
-  text: 'Dark',
-  value: 'dark',
+  text: 'Amsterdam',
+  value: _theme.AMSTERDAM_NAME_KEY,
   provider: _theme.EuiThemeAmsterdam
 }];
 var isDefaultTheme = exports.isDefaultTheme = function isDefaultTheme(name) {
   return name === _theme.AMSTERDAM_NAME_KEY;
+};
+var EUI_EXPERIMENTAL_THEME_ENABLED_KEY = exports.EUI_EXPERIMENTAL_THEME_ENABLED_KEY = 'eui-experimental-theme-enabled';
+var isExperimentalThemeEnabled = exports.isExperimentalThemeEnabled = function isExperimentalThemeEnabled() {
+  if (typeof localStorage !== 'undefined') {
+    return localStorage.getItem(EUI_EXPERIMENTAL_THEME_ENABLED_KEY) === 'true';
+  }
+  return false;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "97.3.0",
+  "version": "97.3.1-borealis.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -16,8 +16,9 @@
   ],
   "scripts": {
     "start": "cross-env BABEL_MODULES=false webpack serve --config=src-docs/webpack.config.js",
+    "build:workspaces": "yarn workspaces foreach -Rti --from @elastic/eui-theme-common run build && yarn workspaces foreach -Rti --from @elastic/eui --exclude @elastic/eui --exclude @elastic/eui-theme-common run build",
     "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
-    "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss",
+    "build": "node ./scripts/compile-i18n-strings.js && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss",
     "build-pack": "yarn build && npm pack",
     "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"",
     "compile-scss": "node ./scripts/compile-scss.js",
@@ -30,7 +31,7 @@
     "test": "yarn lint && yarn test-unit",
     "test-ci": "yarn test && yarn test-cypress",
     "test-unit": "node ./scripts/test-unit",
-    "test-staged": "yarn lint && node scripts/test-staged.js",
+    "test-staged": "yarn build:workspaces && yarn lint && node scripts/test-staged.js",
     "test-cypress": "node ./scripts/test-cypress",
     "test-cypress-dev": "yarn test-cypress --dev",
     "test-cypress-a11y": "yarn test-cypress --a11y",
@@ -103,6 +104,8 @@
     "@cypress/webpack-dev-server": "^1.7.0",
     "@elastic/charts": "^64.1.0",
     "@elastic/datemath": "^5.0.3",
+    "@elastic/eui-theme-borealis": "0.0.2",
+    "@elastic/eui-theme-common": "0.0.2",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.0",
@@ -253,6 +256,7 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
+    "@elastic/eui-theme-borealis": "0.0.2",
     "@emotion/css": "11.x",
     "@emotion/react": "11.x",
     "@types/react": "^16.9 || ^17.0 || ^18.0",

package/src/global_styling/functions/_index.scss

@@ -1,5 +1 @@
-// Math needs to be first in the load order
-@import 'math';
-
-// Using math, we have functions to manipulate contrast / luminosity for accessibility
-@import 'colors';
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index';

package/src/global_styling/index.scss

@@ -1,18 +1,3 @@
 // Core
 
-// Functions need to be first, since we use them in our variables and mixin definitions
-@import 'functions/index';
-
-// Variables come next, and are used in some mixins
-@import 'variables/index';
-
-// Mixins provide generic code expansion through helpers
-@import 'mixins/index';
-
-// Utility classes provide one-off selectors for common css problems
-@import 'utility/index';
-
-// The reset file has moved to global_styles.tsx
-
-// Customization of the React Date Picker
-@import 'react_date_picker/index';
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';

package/src/global_styling/variables/_animations.scss

@@ -1,13 +1,6 @@
 // Animations
 
-$euiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default;
-$euiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default;
-
-$euiAnimSpeedExtraFast: 90ms !default;
-$euiAnimSpeedFast: 150ms !default;
-$euiAnimSpeedNormal: 250ms !default;
-$euiAnimSpeedSlow: 350ms !default;
-$euiAnimSpeedExtraSlow: 500ms !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/animations'
 
 // Keyframe animation declarations can be found in
 // utility/animations.scss

package/src/global_styling/variables/_borders.scss

@@ -1,11 +1,3 @@
 // Borders
 
-$euiBorderWidthThin: 1px !default;
-$euiBorderWidthThick: 2px !default;
-
-$euiBorderColor: $euiColorLightShade !default;
-$euiBorderRadius: $euiSizeS * .75 !default;
-$euiBorderRadiusSmall: $euiSizeS * .5 !default;
-$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default;
-$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default;
-$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/borders'

package/src/global_styling/variables/_buttons.scss

@@ -1,18 +1 @@
-$euiButtonHeight: $euiSizeXXL !default;
-$euiButtonHeightSmall: $euiSizeXL !default;
-$euiButtonHeightXSmall: $euiSizeL !default;
-
-// Modifier naming and colors.
-$euiButtonTypes: (
-  primary: $euiColorPrimary,
-  accent: $euiColorAccent,
-  success: $euiColorSuccess,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
-  text: $euiColorDarkShade, // Reserved for special use cases
-) !default;
-
-// TODO: Remove this once elastic-charts no longer uses this variable
-// @see https://github.com/elastic/elastic-charts/pull/2528
-$euiButtonColorDisabledText: $euiColorDisabledText;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/buttons'

package/src/global_styling/variables/_colors_vis.scss

@@ -1,72 +1,3 @@
 // Visualization colors
-// stylelint-disable color-no-hex
 
-// Maps allow for easier JSON usage
-// Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file
-// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function
-$euiPaletteColorBlind: (
-  euiColorVis0: (
-    graphic: #54B399,
-    behindText: #6DCCB1,
-  ),
-  euiColorVis1: (
-    graphic: #6092C0,
-    behindText: #79AAD9,
-  ),
-  euiColorVis2: (
-    graphic: #D36086,
-    behindText: #EE789D,
-  ),
-  euiColorVis3: (
-    graphic: #9170B8,
-    behindText: #A987D1,
-  ),
-  euiColorVis4: (
-    graphic: #CA8EAE,
-    behindText: #E4A6C7,
-  ),
-  euiColorVis5: (
-    graphic: #D6BF57,
-    behindText: #F1D86F,
-  ),
-  euiColorVis6: (
-    graphic: #B9A888,
-    behindText: #D2C0A0,
-  ),
-  euiColorVis7: (
-    graphic: #DA8B45,
-    behindText: #F5A35C,
-  ),
-  euiColorVis8: (
-    graphic: #AA6556,
-    behindText: #C47C6C,
-  ),
-  euiColorVis9: (
-    graphic: #E7664C,
-    behindText: #FF7E62,
-  )
-) !default;
-
-$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind);
-
-$euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default;
-$euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default;
-$euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default;
-$euiColorVis3: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'graphic') !default;
-$euiColorVis4: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'graphic') !default;
-$euiColorVis5: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'graphic') !default;
-$euiColorVis6: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'graphic') !default;
-$euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic') !default;
-$euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default;
-$euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default;
-
-$euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default;
-$euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default;
-$euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default;
-$euiColorVis3_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'behindText') !default;
-$euiColorVis4_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'behindText') !default;
-$euiColorVis5_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'behindText') !default;
-$euiColorVis6_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'behindText') !default;
-$euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'behindText') !default;
-$euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default;
-$euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default;
+@import '../../themes/amsterdam/global_styling/variables/colors_vis'

package/src/global_styling/variables/_font_weight.scss

@@ -1,10 +1,4 @@
 // Separated out to its own file for easy import into docs
 
 // Font weights
-$euiFontWeightLight:        300 !default;
-$euiFontWeightRegular:      400 !default;
-$euiFontWeightMedium:       500 !default;
-$euiFontWeightSemiBold:     600 !default;
-$euiFontWeightBold:         700 !default;
-$euiCodeFontWeightRegular:  400 !default;
-$euiCodeFontWeightBold:     700 !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/font_weight'

package/src/global_styling/variables/_form.scss

@@ -1,21 +1,2 @@
-// Sizing
-$euiFormMaxWidth: $euiSizeXXL * 10 !default;
-$euiFormControlHeight: $euiSizeXXL !default;
-$euiFormControlCompressedHeight: $euiSizeXL !default;
-$euiFormControlPadding: $euiSizeM !default;
-$euiFormControlCompressedPadding: $euiSizeS !default;
-$euiFormControlBorderRadius: $euiBorderRadius !default;
-$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall !default;
-
-// Coloring
-$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default;
-$euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
-$euiFormBackgroundReadOnlyColor: $euiColorEmptyShade !default;
-$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default;
-$euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
-$euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
-$euiFormControlDisabledColor: $euiColorMediumShade !default;
-$euiFormControlBoxShadow: 0 0 transparent !default;
-$euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default;
-$euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default;
-$euiFormInputGroupBorder: none !default;
+// Form
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/form'

package/src/global_styling/variables/_responsive.scss

@@ -1,9 +1 @@
-$euiBreakpoints: (
-  'xs': 0,
-  's':  575px,
-  'm':  768px,
-  'l':  992px,
-  'xl': 1200px
-) !default;
-
-$euiBreakpointKeys: map-keys($euiBreakpoints);
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/responsive'

package/src/global_styling/variables/_shadows.scss

@@ -1,2 +1,2 @@
 // Shadows
-$euiShadowColor: $euiColorInk !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/shadows'

package/src/global_styling/variables/_size.scss

@@ -1,15 +1 @@
-$euiSize:     16px !default;
-
-$euiSizeXS:   $euiSize * .25 !default;
-$euiSizeS:    $euiSize * .5 !default;
-$euiSizeM:    $euiSize * .75 !default;
-$euiSizeL:    $euiSize * 1.5 !default;
-$euiSizeXL:   $euiSize * 2 !default;
-$euiSizeXXL:  $euiSize * 2.5 !default;
-
-$euiButtonMinWidth: $euiSize * 7 !default;
-
-$euiScrollBar: $euiSize !default;
-// Corner sizes are used as an inset border and therefore a smaller corner size means a larger thumb
-$euiScrollBarCorner: $euiSizeXS !default;
-$euiScrollBarCornerThin: $euiSizeS * .75 !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/size'

package/src/global_styling/variables/_states.scss

@@ -1,14 +1 @@
-// Colors
-$euiFocusRingColor: rgba($euiColorPrimary, .3) !default;
-$euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0) !default;
-$euiFocusRingAnimStartSize: 6px !default;
-$euiFocusRingAnimStartSizeLarge: 10px !default;
-
-// Sizing
-$euiFocusRingSizeLarge: $euiSizeXS !default;
-$euiFocusRingSize: $euiFocusRingSizeLarge * .75 !default;
-
-// Transparency
-$euiFocusTransparency: lightOrDarkTheme(.1, .2) !default;
-$euiFocusTransparencyPercent: lightOrDarkTheme(90%, 80%) !default;
-$euiFocusBackgroundColor: tintOrShade($euiColorPrimary, $euiFocusTransparencyPercent, $euiFocusTransparencyPercent) !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/states'

package/src/global_styling/variables/_typography.scss

@@ -1,75 +1 @@
-// Families
-$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default;
-$euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default;
-
-// Careful using ligatures. Code editors like ACE will often error because of width calculations
-$euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;
-
-// Font sizes -- scale is loosely based on Major Third (1.250)
-$euiTextScale:      2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default;
-
-$euiFontSize:       $euiSize !default; // 5th position in scale
-$euiFontSizeXS:     $euiFontSize * nth($euiTextScale, 7) !default; // 12px
-$euiFontSizeS:      $euiFontSize * nth($euiTextScale, 6) !default; // 14px
-$euiFontSizeM:      $euiFontSize * nth($euiTextScale, 4) !default; // 18px
-$euiFontSizeL:      $euiFontSize * nth($euiTextScale, 3) !default; // 20px
-$euiFontSizeXL:     $euiFontSize * nth($euiTextScale, 2) !default; // 28px
-$euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1) !default; // 36px
-
-// Line height
-$euiLineHeight:     1.5 !default;
-$euiBodyLineHeight: 1 !default;
-
-// Normally functions are imported before variables in `_index.scss` files
-// But because they need to consume some typography variables they need to live here
-@function convertToRem($size) {
-  @return #{$size / $euiFontSize}rem;
-}
-
-// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
-// EX: A proper line-height for text is 1.5 times the font-size.
-//     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
-//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
-@function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($euiFontSize / 2) * $multiplier);
-}
-
-// Titles map
-// Lists all the properties per EuiTitle size that then gets looped through to create the selectors.
-// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves
-$euiTitles: (
-  'xxxs': (
-    'font-size': $euiFontSizeXS,
-    'line-height': lineHeightFromBaseline(3),
-    'font-weight': $euiFontWeightBold,
-  ),
-  'xxs': (
-    'font-size': $euiFontSizeS,
-    'line-height': lineHeightFromBaseline(3),
-    'font-weight': $euiFontWeightBold,
-  ),
-  'xs': (
-    'font-size': $euiFontSize,
-    'line-height': lineHeightFromBaseline(3),
-    'font-weight': $euiFontWeightSemiBold,
-    'letter-spacing': -.02em,
-  ),
-  's': (
-    'font-size': $euiFontSizeL,
-    'line-height': lineHeightFromBaseline(4),
-    'font-weight': $euiFontWeightMedium,
-    'letter-spacing': -.025em,
-  ),
-  'm': (
-    'font-size': $euiFontSizeXL,
-    'line-height': lineHeightFromBaseline(5),
-    'font-weight': $euiFontWeightLight,
-    'letter-spacing': -.04em,
-  ),
-  'l': (
-    'font-size': $euiFontSizeXXL,
-    'line-height': lineHeightFromBaseline(6),
-    'font-weight': $euiFontWeightLight,
-    'letter-spacing': -.03em,
-  ),
-) !default;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/typography'

package/src/global_styling/variables/_z_index.scss

@@ -1,34 +1,2 @@
 // Z-Index
-
-// Remember that z-index is relative to parent and based on the stacking context.
-// z-indexes only compete against other z-indexes when they exist as children of
-// that shared parent.
-
-// That means a popover with a settings of 2, will still show above a modal
-// with a setting of 100, if it is within that modal and not besides it.
-
-// Generally that means it's a good idea to consider things added to this file
-// as competitive only as siblings.
-
-// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-
-$euiZLevel0: 0;
-$euiZLevel1: 1000;
-$euiZLevel2: 2000;
-$euiZLevel3: 3000;
-$euiZLevel4: 4000;
-$euiZLevel5: 5000;
-$euiZLevel6: 6000;
-$euiZLevel7: 7000;
-$euiZLevel8: 8000;
-$euiZLevel9: 9000;
-
-$euiZToastList: $euiZLevel9;
-$euiZModal: $euiZLevel8;
-$euiZMask: $euiZLevel6;
-$euiZNavigation: $euiZLevel6;
-$euiZContentMenu: $euiZLevel2;
-$euiZHeader: $euiZLevel1;
-$euiZFlyout: $euiZHeader;
-$euiZMaskBelowHeader: $euiZHeader;
-$euiZContent: $euiZLevel0;
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/z_index'