@elastic/eui 99.3.0-classic.0 → 99.4.0

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

@@ -13,7 +13,6 @@ 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
@@ -32,11 +31,6 @@ var euiThemeAmsterdam = exports.euiThemeAmsterdam = {
   animation: _animation.animation,
   breakpoint: _breakpoint.breakpoint,
   levels: _levels.levels,
-  focus: _states.focus,
-  components: _components.components,
-  flags: {
-    hasGlobalFocusColor: false,
-    hasVisColorAdjustment: true
-  }
+  focus: _states.focus
 };
 var EuiThemeAmsterdam = exports.EuiThemeAmsterdam = (0, _utils.buildTheme)(euiThemeAmsterdam, AMSTERDAM_NAME_KEY);

package/optimize/lib/themes/index.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  colorVis: true,
+  EUI_THEMES: true,
+  isDefaultTheme: true,
   AMSTERDAM_NAME_KEY: true,
   EuiThemeAmsterdam: true
 };
@@ -14,19 +15,25 @@ Object.defineProperty(exports, "AMSTERDAM_NAME_KEY", {
     return _theme.AMSTERDAM_NAME_KEY;
   }
 });
+Object.defineProperty(exports, "EUI_THEMES", {
+  enumerable: true,
+  get: function get() {
+    return _themes.EUI_THEMES;
+  }
+});
 Object.defineProperty(exports, "EuiThemeAmsterdam", {
   enumerable: true,
   get: function get() {
     return _theme.EuiThemeAmsterdam;
   }
 });
-Object.defineProperty(exports, "colorVis", {
+Object.defineProperty(exports, "isDefaultTheme", {
   enumerable: true,
   get: function get() {
-    return _colors_vis.colorVis;
+    return _themes.isDefaultTheme;
   }
 });
-var _colors_vis = require("./amsterdam/global_styling/variables/_colors_vis");
+var _themes = require("./themes");
 var _theme = require("./amsterdam/theme");
 var _amsterdam = require("./amsterdam");
 Object.keys(_amsterdam).forEach(function (key) {

package/optimize/lib/themes/themes.js

@@ -2,4 +2,26 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.isDefaultTheme = exports.EUI_THEMES = void 0;
+var _theme = require("./amsterdam/theme");
+/*
+ * 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 EUI_THEMES = exports.EUI_THEMES = [{
+  text: 'Light',
+  value: 'light',
+  provider: _theme.EuiThemeAmsterdam
+}, {
+  text: 'Dark',
+  value: 'dark',
+  provider: _theme.EuiThemeAmsterdam
+}];
+var isDefaultTheme = exports.isDefaultTheme = function isDefaultTheme(name) {
+  return name === _theme.AMSTERDAM_NAME_KEY;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "99.3.0-classic.0",
+  "version": "99.4.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -16,9 +16,8 @@
   ],
   "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": "node ./scripts/compile-i18n-strings.js && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss",
+    "build": "yarn extract-i18n-strings && 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",
@@ -31,7 +30,7 @@
     "test": "yarn lint && yarn test-unit",
     "test-ci": "yarn test && yarn test-cypress",
     "test-unit": "node ./scripts/test-unit",
-    "test-staged": "yarn build:workspaces && yarn lint && node scripts/test-staged.js",
+    "test-staged": "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",
@@ -52,7 +51,6 @@
     "url": "https://github.com/elastic/eui.git"
   },
   "dependencies": {
-    "@elastic/eui-theme-common": "0.0.10",
     "@elastic/prismjs-esql": "^1.0.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@types/lodash": "^4.14.202",
@@ -106,7 +104,6 @@
     "@cypress/webpack-dev-server": "^1.7.0",
     "@elastic/charts": "^64.1.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui-theme-borealis": "0.0.11",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.0",
@@ -258,7 +255,6 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
-    "@elastic/eui-theme-borealis": "0.0.11",
     "@emotion/css": "11.x",
     "@emotion/react": "11.x",
     "@types/react": "^16.9 || ^17.0 || ^18.0",

package/src/global_styling/functions/_colors.scss

@@ -16,7 +16,7 @@
 // For theming. Checks the text color and tells us whether it's light or dark.
 // Based on that we either tint (add white) or shade (add black).
 @function tintOrShade($color, $tint, $shade) {
-  @if (lightness($euiColorTextParagraph) > 50) {
+  @if (lightness($euiTextColor) > 50) {
     @return shade($color, $shade);
   } @else {
     @return tint($color, $tint);
@@ -25,7 +25,7 @@
 
 // The reverse of the above
 @function shadeOrTint($color, $shade, $tint) {
-  @if (lightness($euiColorTextParagraph) < 50) {
+  @if (lightness($euiTextColor) < 50) {
     @return shade($color, $shade);
   } @else {
     @return tint($color, $tint);
@@ -35,7 +35,7 @@
 // Similar to above, but uses the light or dark color based
 // on whether it's the light or dark theme
 @function lightOrDarkTheme($lightColor, $darkColor) {
-  @if (lightness($euiColorTextParagraph) < 50) {
+  @if (lightness($euiTextColor) < 50) {
     @return $lightColor;
   } @else {
     @return $darkColor;

package/src/global_styling/functions/_index.scss

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

package/src/global_styling/index.scss

@@ -1,3 +1,12 @@
 // Core
 
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';
+// 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';
+
+// The reset file has moved to global_styles.tsx

package/src/global_styling/mixins/_shadow.scss

@@ -1,5 +1,5 @@
 @function shadowOpacity($opacity) {
-  @if (lightness($euiColorTextParagraph) < 50) {
+  @if (lightness($euiTextColor) < 50) {
     @return $opacity * 1;
   } @else {
     @return $opacity * 2.5;

package/src/global_styling/mixins/_typography.scss

@@ -53,13 +53,13 @@
 }
 
 @mixin euiText {
-  color: $euiColorTextParagraph;
+  color: $euiTextColor;
   font-weight: $euiFontWeightRegular;
 }
 
 @mixin euiTitle($size: 'm') {
   @include euiTextBreakWord;
-  color: $euiColorTextHeading;
+  color: $euiTitleColor;
 
   @if (map-has-key($euiTitles, $size)) {
     @each $property, $value in map-get($euiTitles, $size) {

package/src/global_styling/variables/_animations.scss

@@ -1,6 +1,13 @@
 // Animations
 
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/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;
 
 // Keyframe animation declarations can be found in
 // utility/animations.scss

package/src/global_styling/variables/_borders.scss

@@ -1,3 +1,11 @@
 // Borders
 
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/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;

package/src/global_styling/variables/_buttons.scss

@@ -1 +1,18 @@
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/buttons'
+$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;

package/src/global_styling/variables/_font_weight.scss

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

package/src/global_styling/variables/_form.scss

@@ -1,2 +1,21 @@
-// Form
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/form'
+// 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;

package/src/global_styling/variables/_index.scss

@@ -9,6 +9,7 @@
 // Global colors are established and importer per theme, before this manifest
 // Import order is important. Size, vis colors, ...etc are used in other variables.
 @import 'size';
+@import 'colors_vis';
 @import 'animations';
 @import 'font_weight';
 @import 'typography';

package/src/global_styling/variables/_responsive.scss

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

package/src/global_styling/variables/_shadows.scss

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

package/src/global_styling/variables/_size.scss

@@ -1 +1,13 @@
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/size'
+$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;
+
+$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;

package/src/global_styling/variables/_states.scss

@@ -1 +1,14 @@
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/states'
+// 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;

package/src/global_styling/variables/_typography.scss

@@ -1 +1,75 @@
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/typography'
+// 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;

package/src/global_styling/variables/_z_index.scss

@@ -1,2 +1,34 @@
 // Z-Index
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/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;

package/src/themes/amsterdam/_colors_dark.scss

@@ -1,24 +1,22 @@
 // stylelint-disable color-no-hex
 
 // This extra import allows any variables that are created via functions to work when loaded into JS
-@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index';
+@import '../../global_styling/functions/index';
 
-// Constants
+// These colors stay the same no matter the theme
 $euiColorGhost: #FFF !default;
 $euiColorInk: #000 !default;
 
-$euiColorPlainLight: $euiColorGhost;
-$euiColorPlainDark: $euiColorInk;
-
-// Brand
+// Core
 $euiColorPrimary: #36A2EF !default;
 $euiColorAccent: #F68FBE !default;
-$euiColorAccentSecondary: #7DDED8 !default;
+
+// Status
 $euiColorSuccess: #7DDED8 !default;
 $euiColorWarning: #F3D371 !default;
 $euiColorDanger: #F86B63 !default;
 
-// Shades
+// Grays
 $euiColorEmptyShade: #1D1E24 !default;
 $euiColorLightestShade: #25262E !default;
 $euiColorLightShade: #343741 !default;
@@ -31,91 +29,21 @@ $euiColorFullShade: #FFF !default;
 $euiPageBackgroundColor: shade($euiColorLightestShade, 45%) !default;
 $euiColorHighlight: #2E2D25 !default;
 
-$euiColorBackgroundBasePrimary: shade($euiColorPrimary, 80%) !default;
-$euiColorBackgroundBaseAccent: shade($euiColorAccent, 80%) !default;
-$euiColorBackgroundBaseAccentSecondary: shade($euiColorAccentSecondary, 80%) !default;
-$euiColorBackgroundBaseSuccess: shade($euiColorSuccess, 80%) !default;
-$euiColorBackgroundBaseWarning: shade($euiColorWarning, 80%) !default;
-$euiColorBackgroundBaseDanger: shade($euiColorDanger, 80%) !default;
-$euiColorBackgroundBaseSubdued: shade($euiPageBackgroundColor, 80%) !default;
-$euiColorBackgroundBaseDisabled: transparentize($euiColorLightShade, 0.15)!default;
-$euiColorBackgroundBasePlain: $euiColorEmptyShade !default;
-$euiColorBackgroundBaseFormsPrepend: shade($euiColorLightShade, 0.15) !default;
-$euiColorBackgroundBaseFormsControlDisabled: $euiColorLightShade !default;
-
-$euiColorBackgroundBaseInteractiveHover: transparentize($euiColorLightShade, 0.2) !default;
-$euiColorBackgroundBaseInteractiveSelect: shade($euiColorPrimary, 0.7) !default;
-$euiColorBackgroundBaseInteractiveOverlay: transparentize($euiColorInk, 0.5) !default;
-$euiColorBackgroundBaseSkeletonEdge: shade($euiColorLightShade, 0.12) !default;
-$euiColorBackgroundBaseSkeletonMiddle: shade($euiColorLightShade, 0.24) !default;
-
-$euiColorBackgroundLightPrimary: shade($euiColorPrimary, 0.7) !default;
-$euiColorBackgroundLightAccent: shade($euiColorAccent, 0.7) !default;
-$euiColorBackgroundLightAccentSecondary: shade($euiColorAccentSecondary, 0.7)  !default;
-$euiColorBackgroundLightSuccess: shade($euiColorSuccess, 0.7)  !default;
-$euiColorBackgroundLightWarning: shade($euiColorWarning, 0.7)  !default;
-$euiColorBackgroundLightDanger: shade($euiColorDanger, 0.7)  !default;
-$euiColorBackgroundLightText: shade($euiColorLightShade, 0.2) !default;
-
-$euiColorBackgroundFilledPrimary: $euiColorPrimary !default;
-$euiColorBackgroundFilledAccent: $euiColorAccent !default;
-$euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary !default;
-$euiColorBackgroundFilledSuccess: $euiColorSuccess !default;
-$euiColorBackgroundFilledWarning: $euiColorWarning !default;
-$euiColorBackgroundFilledDanger: $euiColorDanger !default;
-$euiColorBackgroundFilledText:  #DFE5EF !default;
-
-// Texts
+// Variations from core
 $euiTextColor: #DFE5EF !default;
 $euiTitleColor: $euiTextColor !default;
 $euiTextSubduedColor: makeHighContrastColor($euiColorMediumShade) !default;
 $euiColorDisabled: #515761 !default;
 
-$euiColorTextParagraph: $euiTextColor !default;
-$euiColorTextHeading: $euiTitleColor !default;
-$euiColorTextSubdued: $euiTextSubduedColor !default;
-$euiColorTextDisabled: #515761 !default;
-$euiColorTextInverse: $euiColorGhost !default;
-
-// Brand texts
+// Contrasty text variants
 $euiColorPrimaryText: makeHighContrastColor($euiColorPrimary) !default;
 $euiColorSuccessText: makeHighContrastColor($euiColorSuccess) !default;
 $euiColorAccentText: makeHighContrastColor($euiColorAccent) !default;
 $euiColorWarningText: makeHighContrastColor($euiColorWarning) !default;
 $euiColorDangerText: makeHighContrastColor($euiColorDanger) !default;
 $euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled) !default;
-
-$euiColorTextPrimary: $euiColorPrimaryText !default;
-$euiColorTextAccent: $euiColorAccentText !default;
-$euiColorTextAccentSecondary: $euiColorSuccessText !default;
-$euiColorTextSuccess: $euiColorSuccessText !default;
-$euiColorTextWarning: $euiColorWarningText !default;
-$euiColorTextDanger: $euiColorDangerText !default;
-
 $euiLinkColor: $euiColorPrimaryText !default;
 
-// Borders
-$euiColorBorderBasePrimary: shade($euiColorPrimary, 0.6) !default;
-$euiColorBorderBaseAccent: shade($euiColorAccent, 0.6) !default;
-$euiColorBorderBaseAccentSecondary: shade($euiColorAccentSecondary, 0.6) !default;
-$euiColorBorderBaseSuccess: shade($euiColorSuccess, 0.6) !default;
-$euiColorBorderBaseWarning: shade($euiColorWarning, 0.6) !default;
-$euiColorBorderBaseDanger: shade($euiColorDanger, 0.6) !default;
-
-$euiColorBorderBasePlain: $euiColorLightShade !default;
-$euiColorBorderBaseSubdued: $euiColorLightShade !default;
-$euiColorBorderBaseDisabled: transparentize($euiColorGhost, 0.1) !default;
-$euiColorBorderBaseFloating: $euiColorLightShade !default;
-$euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1) !default;
-$euiColorBorderBaseFormsControl: tint($euiColorLightestShade, 0.31) !default;
-
-$euiColorBorderStrongPrimary: $euiColorBorderBasePrimary !default;
-$euiColorBorderStrongAccent: $euiColorBorderBaseAccent !default;
-$euiColorBorderStrongAccentSecondary: $euiColorBorderBaseAccentSecondary !default;
-$euiColorBorderStrongSuccess: $euiColorBorderBaseSuccess !default;
-$euiColorBorderStrongWarning: $euiColorBorderBaseWarning !default;
-$euiColorBorderStrongDanger: $euiColorBorderBaseDanger !default;
-
 // Charts
 $euiColorChartLines: $euiColorLightShade !default;
 $euiColorChartBand: tint($euiColorLightestShade, 2.5%) !default;