@elastic/eui 100.0.0 → 101.0.0

package/optimize/es/components/table/table_row.styles.js

@@ -10,7 +10,7 @@ var _templateObject;
 
 import { css, keyframes } from '@emotion/react';
 import { euiShadow } from '@elastic/eui-theme-common';
-import { euiCanAnimate, logicalCSS } from '../../global_styling';
+import { euiCanAnimate, logicalCSS, mathWithUnits } from '../../global_styling';
 import { euiTableVariables } from './table.styles';
 export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -32,7 +32,9 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
       checkboxOffset: /*#__PURE__*/css("&>.euiTableRowCell:first-child{", logicalCSS('padding-left', checkboxSize), ";};label:checkboxOffset;")
     },
     mobile: {
-      mobile: /*#__PURE__*/css("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", logicalCSS('margin-bottom', cellContentPadding), euiShadow(euiThemeContext, 's'), " background-color:", euiTheme.colors.backgroundBasePlain, ";border-radius:", euiTheme.border.radius.medium, ";;label:mobile;"),
+      mobile: /*#__PURE__*/css("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", logicalCSS('margin-bottom', cellContentPadding), euiShadow(euiThemeContext, 's', {
+        borderAllInHighContrastMode: true
+      }), " background-color:", euiTheme.colors.backgroundBasePlain, ";border-radius:", euiTheme.border.radius.medium, ";&:has(+ .euiTableRow-isExpandedRow){", logicalCSS('border-bottom-left-radius', 0), " ", logicalCSS('border-bottom-right-radius', 0), ";};label:mobile;"),
       selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";};label:selected;"),
       /**
        * Left column offset (no border)
@@ -43,11 +45,16 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
        * Right column styles + border
        * Used for cell actions and row expander arrow
        */
-      hasRightColumn: /*#__PURE__*/css(logicalCSS('padding-right', mobileSizes.actions.width), " &::after{content:'';position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('right', mobileSizes.actions.width), " ", logicalCSS('width', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";};label:hasRightColumn;"),
+      hasRightColumn: /*#__PURE__*/css(logicalCSS('padding-right', mobileSizes.actions.width), " &::after{content:'';position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('right', mobileSizes.actions.width), " ", logicalCSS('border-right', euiTheme.border.thin), ";};label:hasRightColumn;"),
       /**
        * Bottom of card - expanded rows
        */
-      expanded: /*#__PURE__*/css(logicalCSS('margin-top', "-".concat(mobileSizes.actions.offset)), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), ">.euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
+      expanded: /*#__PURE__*/css(logicalCSS(
+      // On mobile, visually move the expanded row to join up with the
+      // preceding table row via negative margins
+      'margin-top', mathWithUnits([cellContentPadding, euiTheme.border.width.thin], function (x, y) {
+        return (x + y) * -1;
+      })), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), ">.euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
     }
   };
 };

package/optimize/es/components/table/table_row_cell.styles.js

@@ -51,7 +51,7 @@ export var euiTableRowCellStyles = function euiTableRowCellStyles(euiThemeContex
   // Without this, the row height jumps whenever actions are disabled.
   var hasIcons = "line-height: 1;";
   return {
-    euiTableRowCell: /*#__PURE__*/css("color:", euiTheme.colors.text, ";;label:euiTableRowCell;"),
+    euiTableRowCell: /*#__PURE__*/css("color:", euiTheme.colors.textParagraph, ";;label:euiTableRowCell;"),
     rowHeader: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.regular, ";", logicalTextAlignCSS('left'), ";;label:rowHeader;"),
     isExpander: /*#__PURE__*/css(hasIcons, ";;label:isExpander;"),
     hasActions: /*#__PURE__*/css(hasIcons, ";;label:hasActions;"),
@@ -80,7 +80,7 @@ export var euiTableRowCellStyles = function euiTableRowCellStyles(euiThemeContex
        * If they're the last cell, we can create a pseudo "row"/"border-top"
        * that mimicks the visual separation that the right column has
        */
-      customActions: /*#__PURE__*/css("&:last-child{", logicalCSS('width', '100%'), " &::before{content:'';position:absolute;", logicalCSS('horizontal', 0), " ", logicalCSS('height', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";}.euiTableCellContent{position:relative;", logicalCSS('top', euiTheme.size.xs), ";}};label:customActions;")
+      customActions: /*#__PURE__*/css("&:last-child{", logicalCSS('width', '100%'), " &::before{content:'';position:absolute;", logicalCSS('horizontal', 0), " ", logicalCSS('border-top', euiTheme.border.thin), ";}.euiTableCellContent{position:relative;", logicalCSS('top', euiTheme.size.xs), ";}};label:customActions;")
     },
     euiTableRowCell__mobileHeader: /*#__PURE__*/css(euiTextTruncate(), " font-size:", euiFontSize(euiThemeContext, 's', {
       customScale: 'xxs'

package/optimize/es/components/tabs/tab.styles.js

@@ -17,16 +17,20 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "flex-basis:0%;flex-grow:1;justify-content:center;label:expanded;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiTabStyles = function euiTabStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+export var euiTabStyles = function euiTabStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var selectedUnderlineSize = highContrastMode ? mathWithUnits(euiTheme.border.thick, function (x) {
+    return x * 2;
+  }) : euiTheme.border.width.thick;
   return {
-    euiTab: /*#__PURE__*/css("display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", logicalCSS('padding-vertical', 0), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), "font-weight:", euiTheme.font.weight.semiBold, ";color:", euiTheme.colors.textHeading, ";&:focus{outline-offset:-", euiTheme.focus.width, ";};label:euiTab;"),
+    euiTab: /*#__PURE__*/css("position:relative;display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", logicalCSS('padding-vertical', 0), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), "font-weight:", euiTheme.font.weight.semiBold, ";color:", euiTheme.colors.textHeading, ";&:focus{outline-offset:-", euiTheme.focus.width, ";}&::after{position:absolute;", logicalCSS('bottom', 0), " ", logicalCSS('horizontal', 0), " ", logicalCSS('border-bottom-style', 'solid'), " ", logicalCSS('border-bottom-width', selectedUnderlineSize), " pointer-events:none;};label:euiTab;"),
     // variations
     expanded: _ref,
-    selected: /*#__PURE__*/css("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";color:", euiTheme.colors.textPrimary, ";;label:selected;"),
+    selected: /*#__PURE__*/css("color:", euiTheme.colors.textPrimary, ";&::after{content:'';border-color:", euiTheme.colors.primary, ";};label:selected;"),
     disabled: {
-      disabled: /*#__PURE__*/css("cursor:not-allowed;color:", euiTheme.colors.disabledText, ";;label:disabled;"),
-      selected: /*#__PURE__*/css("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.disabledText, ";;label:selected;")
+      disabled: /*#__PURE__*/css("cursor:not-allowed;color:", euiTheme.colors.textDisabled, ";;label:disabled;"),
+      selected: /*#__PURE__*/css("&::after{content:'';border-color:", euiTheme.colors.textDisabled, ";};label:selected;")
     }
   };
 };

package/optimize/es/components/tabs/tabs.styles.js

@@ -8,11 +8,15 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS, logicalCSSWithFallback } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 export var euiTabsStyles = function euiTabsStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiTabs: /*#__PURE__*/css("display:flex;", logicalCSS('max-width', '100%'), " ", logicalCSSWithFallback('overflow-x', 'auto'), " ", logicalCSSWithFallback('overflow-y', 'hidden'), " position:relative;flex-shrink:0;;label:euiTabs;"),
-    bottomBorder: /*#__PURE__*/css("box-shadow:inset 0 -", euiTheme.border.width.thin, " 0 ", euiTheme.border.color, ";;label:bottomBorder;"),
+    bottomBorder: /*#__PURE__*/css(highContrastModeStyles(euiThemeContext, {
+      none: "box-shadow: inset 0 -".concat(euiTheme.border.width.thin, " 0 ").concat(euiTheme.border.color, ";"),
+      forced: logicalCSS('border-bottom', euiTheme.border.thin)
+    }), ";;label:bottomBorder;"),
     // sizes
     s: /*#__PURE__*/css("gap:", euiTheme.size.m, ";;label:s;"),
     m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),

package/optimize/es/components/text/text.styles.js

@@ -8,8 +8,10 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, euiFontSize, mathWithUnits } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiLinkCSS } from '../link/link.styles';
 import { euiTitle } from '../title/title.styles';
+import { euiCodeTextColors } from '../code/code_syntax.styles';
 
 /**
  * TODO: Make this a global value so it can be set by theme?
@@ -22,7 +24,7 @@ export var euiTextConstrainedMaxWidth = 'max(64ch, 75%)';
 export var euiText = function euiText(euiTheme) {
   var inheritColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return {
-    color: inheritColor ? 'inherit' : euiTheme.colors.text,
+    color: inheritColor ? 'inherit' : euiTheme.colors.textParagraph,
     fontWeight: euiTheme.font.weight.regular
   };
 };
@@ -54,9 +56,13 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
   var blockQuoteBorderWidth = mathWithUnits(fontSize, function (x) {
     return x / 4;
   });
-  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    pre,\n    > ul,\n    > ol {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n\n    /* The styles of the nested ordered lists follow the style of GitHub\n       which is commonly used in Markdown or MDX formatting. */\n    ol ol,\n    ul ol {\n      list-style-type: lower-roman;\n    }\n\n    ul ul ol,\n    ul ol ol,\n    ol ul ol,\n    ol ol ol {\n      list-style-type: lower-alpha;\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(euiFontSize(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; /* 90% of parent font size */\n    }\n    ").concat(
+  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    pre,\n    > ul,\n    > ol {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n\n    /* The styles of the nested ordered lists follow the style of GitHub\n       which is commonly used in Markdown or MDX formatting. */\n    ol ol,\n    ul ol {\n      list-style-type: lower-roman;\n    }\n\n    ul ul ol,\n    ul ol ol,\n    ol ul ol,\n    ol ol ol {\n      list-style-type: lower-alpha;\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.textParagraph, ";\n    }\n\n    small {\n      font-size: ").concat(euiFontSize(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; /* 90% of parent font size */\n    }\n    ").concat(highContrastModeStyles(euiThemeContext, {
+    // For EuiCodeBlocks, set the margin on the wrapper instead of on the <pre>
+    // so that high contrast mode borders render as expected
+    preferred: "\n        .euiCodeBlock {\n          ".concat(logicalCSS('margin-bottom', lineHeightSize), "\n\n          pre {\n            ").concat(logicalCSS('margin-bottom', 0), "\n          }\n        }\n      ")
+  }), "\n    ").concat(
   // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
-  _customScale === 'm' ? "\n    kbd {\n      ".concat(logicalCSS('padding-bottom', euiTheme.size.xs), "\n      /* Ensures the shape still looks like a square when only one character */\n      ").concat(logicalCSS('min-width', euiTheme.size.l), "\n      ").concat(logicalTextAlignCSS('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat(logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat(logicalCSS('bottom', euiTheme.size.xxs), "\n      ").concat(logicalCSS('left', 0), "\n      ").concat(logicalCSS('width', '100%'), "\n    }") : '', "\n  ");
+  _customScale === 'm' ? "\n    kbd {\n      ".concat(logicalCSS('padding-bottom', euiTheme.size.xs), "\n      /* Ensures the shape still looks like a square when only one character */\n      ").concat(logicalCSS('min-width', euiTheme.size.l), "\n      ").concat(logicalTextAlignCSS('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat(logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.textParagraph)), "\n      position: absolute;\n      ").concat(logicalCSS('bottom', euiTheme.size.xxs), "\n      ").concat(logicalCSS('left', 0), "\n      ").concat(logicalCSS('width', '100%'), "\n    }") : '', "\n  ");
 };
 
 /**
@@ -64,9 +70,15 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
  */
 export var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var codeColors = euiCodeTextColors(euiThemeContext);
   return {
-    euiText: /*#__PURE__*/css(euiText(euiTheme, true), "clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.subduedText, ";}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiTheme.colors.backgroundBaseSubdued, ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/css(euiText(euiTheme, true), "clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.textSubdued, ";}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock > pre){white-space:pre-wrap;background-color:", codeColors.backgroundColor, ";color:", codeColors.color, ";", highContrastModeStyles(euiThemeContext, {
+      preferred: "border: ".concat(euiTheme.border.thin)
+    }), ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.textParagraph, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
       return x / 2;
+    }), ";", highContrastModeStyles(euiThemeContext, {
+      // Fixes an odd border issue in Windows high contrast themes
+      forced: "\n            overflow: hidden;\n            vertical-align: middle;\n          "
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),
     // Sizes

package/optimize/es/components/text/text_color.styles.js

@@ -20,7 +20,7 @@ export var euiTextColorStyles = function euiTextColorStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return {
     euiTextColor: /*#__PURE__*/css(";label:euiTextColor;"),
-    default: /*#__PURE__*/css("color:", euiTheme.colors.text, ";;label:default;"),
+    default: /*#__PURE__*/css("color:", euiTheme.colors.textParagraph, ";;label:default;"),
     subdued: /*#__PURE__*/css("color:", euiTheme.colors.textSubdued, ";;label:subdued;"),
     success: /*#__PURE__*/css("color:", euiTheme.colors.textSuccess, ";;label:success;"),
     accent: /*#__PURE__*/css("color:", euiTheme.colors.textAccent, ";;label:accent;"),

package/optimize/es/components/text_truncate/text_truncate.js

@@ -14,10 +14,10 @@ var _excluded = ["width", "onResize"],
 
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import classNames from 'classnames';
-import { useCombinedRefs } from '../../services';
+import { useCombinedRefs, useEuiMemoizedStyles } from '../../services';
 import { EuiResizeObserver } from '../observer/resize_observer';
 import { TruncationUtils } from './utils';
-import { euiTextTruncateStyles as styles } from './text_truncate.styles';
+import { euiTextTruncateStyles } from './text_truncate.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'];
 export var EuiTextTruncate = function EuiTextTruncate(_ref) {
@@ -127,6 +127,7 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     return truncatedText;
   }, [ready, width, text, truncation, truncationOffset, truncationPosition, ellipsis, containerEl]);
   var isTruncating = truncatedText !== text;
+  var styles = useEuiMemoizedStyles(euiTextTruncateStyles);
   return ___EmotionJSX("div", _extends({
     className: classNames('euiTextTruncate', className),
     css: styles.euiTextTruncate,

package/optimize/es/components/text_truncate/text_truncate.styles.js

@@ -8,42 +8,40 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-export var euiTextTruncateStyles = {
-  euiTextTruncate: process.env.NODE_ENV === "production" ? {
-    name: "7o5qnz-euiTextTruncate",
-    styles: "position:relative;overflow:hidden;white-space:nowrap;label:euiTextTruncate;"
-  } : {
-    name: "7o5qnz-euiTextTruncate",
-    styles: "position:relative;overflow:hidden;white-space:nowrap;label:euiTextTruncate;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  /**
-   * The below CSS is a hack to get double clicking and selecting the *full* text
-   * instead of the truncated text (useful for copying/pasting, and mimics how
-   * `text-overflow: ellipsis` works).
-   *
-   * Real talk: I'm lowkey amazed it works and it wouldn't surprise me if we ran into
-   * cross-browser issues with this at some point. Hopefully CSS natively implements
-   * custom text truncation some day (https://github.com/w3c/csswg-drafts/issues/3937)
-   * and there'll be no need for the entire component at that point 🙏
-   */
-  // Makes the truncated text unselectable/un-clickable
-  euiTextTruncate__truncatedText: process.env.NODE_ENV === "production" ? {
-    name: "1sjxkb1-euiTextTruncate__truncatedText",
-    styles: "user-select:none;pointer-events:none;label:euiTextTruncate__truncatedText;"
-  } : {
-    name: "1sjxkb1-euiTextTruncate__truncatedText",
-    styles: "user-select:none;pointer-events:none;label:euiTextTruncate__truncatedText;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  // Positions the full text on top of the truncated text (so that clicking targets it)
-  // and gives it a color opacity of 0 so that it's not actually visible
-  euiTextTruncate__fullText: process.env.NODE_ENV === "production" ? {
-    name: "19c9gqi-euiTextTruncate__fullText",
-    styles: "position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;};label:euiTextTruncate__fullText;"
-  } : {
-    name: "19c9gqi-euiTextTruncate__fullText",
-    styles: "position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;};label:euiTextTruncate__fullText;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1sjxkb1-euiTextTruncate__truncatedText",
+  styles: "user-select:none;pointer-events:none;label:euiTextTruncate__truncatedText;"
+} : {
+  name: "1sjxkb1-euiTextTruncate__truncatedText",
+  styles: "user-select:none;pointer-events:none;label:euiTextTruncate__truncatedText;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "7o5qnz-euiTextTruncate",
+  styles: "position:relative;overflow:hidden;white-space:nowrap;label:euiTextTruncate;"
+} : {
+  name: "7o5qnz-euiTextTruncate",
+  styles: "position:relative;overflow:hidden;white-space:nowrap;label:euiTextTruncate;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiTextTruncateStyles = function euiTextTruncateStyles(euiThemeContext) {
+  return {
+    euiTextTruncate: _ref2,
+    /**
+     * The below CSS is a hack to get double clicking and selecting the *full* text
+     * instead of the truncated text (useful for copying/pasting, and mimics how
+     * `text-overflow: ellipsis` works).
+     *
+     * Real talk: I'm lowkey amazed it works and it wouldn't surprise me if we ran into
+     * cross-browser issues with this at some point. Hopefully CSS natively implements
+     * custom text truncation some day (https://github.com/w3c/csswg-drafts/issues/3937)
+     * and there'll be no need for the entire component at that point 🙏
+     */
+    // Makes the truncated text unselectable/un-clickable
+    euiTextTruncate__truncatedText: _ref,
+    // Positions the full text on top of the truncated text (so that clicking targets it)
+    // and gives it a color opacity of 0 so that it's not actually visible
+    euiTextTruncate__fullText: /*#__PURE__*/css("position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;}", preventForcedColors(euiThemeContext), ";;label:euiTextTruncate__fullText;")
+  };
 };

package/optimize/es/components/timeline/timeline.styles.js

@@ -14,13 +14,14 @@ var _gutterSizeAdjustment = function _gutterSizeAdjustment(gutterSize) {
 
 // The vertical line should only appear when the EuiTimelineItem's
 // are wrapped in a EuiTimeline. That's why these styles live here.
-var timelineVerticalLine = function timelineVerticalLine(euiTheme) {
-  return "  \n    [class*='euiTimelineItem-'] > [class*='euiTimelineItemIcon-']::before {\n      content: '';\n      position: absolute;\n      ".concat(logicalCSS('top', 0), ";\n      ").concat(logicalCSS('width', euiTheme.size.xxs), ";\n      background-color: ").concat(euiTheme.colors.lightShade, ";\n    }\n\n    > [class*='euiTimelineItem-center']:first-child > [class*='euiTimelineItemIcon-']::before {\n      ").concat(logicalCSS('top', '50%'), ";\n    }\n  \n    > [class*='euiTimelineItem-center']:last-child:not(:only-child) > [class*='euiTimelineItemIcon-']::before {\n      ").concat(logicalCSS('height', '50%'), ";\n    }\n  ");
-};
-export var euiTimelineStyles = function euiTimelineStyles(_ref) {
+var timelineVerticalLine = function timelineVerticalLine(_ref) {
   var euiTheme = _ref.euiTheme;
+  return "  \n    [class*='euiTimelineItem-'] > [class*='euiTimelineItemIcon-']::before {\n      content: '';\n      position: absolute;\n      ".concat(logicalCSS('top', 0), ";\n      ").concat(logicalCSS('border-left', euiTheme.border.thick), ";\n    }\n\n    > [class*='euiTimelineItem-center']:first-child > [class*='euiTimelineItemIcon-']::before {\n      ").concat(logicalCSS('top', '50%'), ";\n    }\n  \n    > [class*='euiTimelineItem-center']:last-child:not(:only-child) > [class*='euiTimelineItemIcon-']::before {\n      ").concat(logicalCSS('height', '50%'), ";\n    }\n  ");
+};
+export var euiTimelineStyles = function euiTimelineStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiTimeline: /*#__PURE__*/css("display:flex;flex-direction:column;", timelineVerticalLine(euiTheme), ";;label:euiTimeline;"),
+    euiTimeline: /*#__PURE__*/css("display:flex;flex-direction:column;", timelineVerticalLine(euiThemeContext), ";;label:euiTimeline;"),
     m: /*#__PURE__*/css(_gutterSizeAdjustment(euiTheme.size.base), ";label:m;"),
     l: /*#__PURE__*/css(_gutterSizeAdjustment(euiTheme.size.l), ";label:l;"),
     xl: /*#__PURE__*/css(_gutterSizeAdjustment(euiTheme.size.xl), ";label:xl;")

package/optimize/es/components/timeline/timeline_item_icon.styles.js

@@ -9,6 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "8391db-center",
   styles: "align-items:center;label:center;"
@@ -25,19 +26,13 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "align-items:flex-start;label:top;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "kuz8oa-euiTimelineItemIcon__content",
-  styles: "display:flex;justify-content:center;align-items:center;position:relative;label:euiTimelineItemIcon__content;"
-} : {
-  name: "kuz8oa-euiTimelineItemIcon__content",
-  styles: "display:flex;justify-content:center;align-items:center;position:relative;label:euiTimelineItemIcon__content;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var euiTimelineItemIconStyles = function euiTimelineItemIconStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiTimelineItemIconStyles = function euiTimelineItemIconStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiTimelineItemIcon: /*#__PURE__*/css("display:flex;position:relative;flex-grow:0;justify-content:center;", logicalCSS('margin-right', euiTheme.size.base), ";;label:euiTimelineItemIcon;"),
-    euiTimelineItemIcon__content: _ref3,
+    euiTimelineItemIcon__content: /*#__PURE__*/css("display:flex;justify-content:center;align-items:center;position:relative;", highContrastModeStyles(euiThemeContext, {
+      preferred: "\n          & > * {\n            border: ".concat(euiTheme.border.thin, ";\n          }\n        ")
+    }), ";;label:euiTimelineItemIcon__content;"),
     //  Vertical alignments
     top: _ref2,
     center: _ref

package/optimize/es/components/title/title.styles.js

@@ -31,7 +31,7 @@ export var euiTitle = function euiTitle(euiThemeContext) {
   };
   return _objectSpread(_objectSpread({}, euiFontSize(euiThemeContext, titleScaleToFontSizeScaleMap[scale], options)), {}, {
     fontWeight: euiTheme.font.weight[euiTheme.font.title.weight],
-    color: euiTheme.colors.title
+    color: euiTheme.colors.textHeading
   });
 };
 

package/optimize/es/components/toast/toast.js

@@ -29,7 +29,7 @@ export var EuiToast = function EuiToast(_ref) {
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var baseStyles = useEuiMemoizedStyles(euiToastStyles);
-  var baseCss = [baseStyles.euiToast, color && baseStyles[color]];
+  var baseCss = [baseStyles.euiToast, color && baseStyles.colors[color]];
   var headerStyles = useEuiMemoizedStyles(euiToastHeaderStyles);
   var headerCss = [headerStyles.euiToastHeader, children && headerStyles.withBody];
   var classes = classNames('euiToast', className);

package/optimize/es/components/toast/toast.styles.js

@@ -7,21 +7,55 @@
  */
 
 import { css } from '@emotion/react';
-import { euiShadowLarge } from '@elastic/eui-theme-common';
+import { euiShadowLarge, mathWithUnits } from '@elastic/eui-theme-common';
 import { euiTextBreakWord, logicalCSS } from '../../global_styling';
+import { highContrastModeStyles, preventForcedColors } from '../../global_styling/functions/high_contrast';
 import { euiTitle } from '../title/title.styles';
+import { euiPanelBorderStyles } from '../panel/panel.styles';
 export var euiToastStyles = function euiToastStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var highlightStyles = function highlightStyles(color, width) {
+    return "\n    &:after {\n      content: '';\n      position: absolute;\n      /* ensure highlight border is on top of panel border */\n      z-index: 1;\n      inset: 0;\n      border-radius: inherit;\n      ".concat(logicalCSS('border-top', "".concat(width, " solid ").concat(color)), "\n      pointer-events: none;\n    }\n  ");
+  };
   return {
     // Base
-    euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFloating, ";", euiTextBreakWord(), "&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext, {
+      borderAllInHighContrastMode: true
+    }), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), euiPanelBorderStyles(euiThemeContext, {
+      hasFloatingBorder: false
+    }), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
     // Elements
     euiToast__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.base), " ", logicalCSS('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
     // Variants
-    primary: /*#__PURE__*/css(logicalCSS('border-top', "2px solid ".concat(euiTheme.colors.primary)), ";;label:primary;"),
-    success: /*#__PURE__*/css(logicalCSS('border-top', "2px solid ".concat(euiTheme.colors.success)), ";;label:success;"),
-    warning: /*#__PURE__*/css(logicalCSS('border-top', "2px solid ".concat(euiTheme.colors.warning)), ";;label:warning;"),
-    danger: /*#__PURE__*/css(logicalCSS('border-top', "2px solid ".concat(euiTheme.colors.danger)), ";;label:danger;")
+    colors: {
+      _getStyles: function _getStyles(color) {
+        // Increase color/border thickness for all high contrast modes
+        var borderWidth = highContrastMode ? mathWithUnits(euiTheme.border.width.thick, function (x) {
+          return x * 2;
+        }) : euiTheme.border.width.thick;
+        return highContrastModeStyles(euiThemeContext, {
+          none: highlightStyles(color, borderWidth),
+          preferred: "\n            ".concat(highlightStyles(color, borderWidth), "\n            \n            &::after {\n              ").concat(logicalCSS('width', "calc(100% + ".concat(mathWithUnits(euiTheme.border.width.thin, function (x) {
+            return x * 2;
+          }), ")")), "\n              ").concat(logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), "\n              ").concat(logicalCSS('margin-left', "-".concat(euiTheme.border.width.thin)), "\n            }\n          "),
+          // Windows high contrast mode ignores/overrides border colors, which have semantic meaning here. To get around this, we'll use a pseudo element that ignores forced colors
+          forced: "\n            overflow: hidden;\n\n            &::after {\n              content: '';\n              position: absolute;\n              ".concat(logicalCSS('top', 0), "\n              ").concat(logicalCSS('horizontal', 0), "\n              ").concat(logicalCSS('height', borderWidth), "\n              background-color: ").concat(color, ";\n              ").concat(preventForcedColors(euiThemeContext), "\n              pointer-events: none;\n            }\n          ")
+        });
+      },
+      get primary() {
+        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.primary), ";label:primary;");
+      },
+      get success() {
+        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.success), ";label:success;");
+      },
+      get warning() {
+        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.warning), ";label:warning;");
+      },
+      get danger() {
+        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.danger), ";label:danger;");
+      }
+    }
   };
 };
 export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
@@ -30,7 +64,7 @@ export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext)
     // Base
     euiToastHeader: /*#__PURE__*/css("display:flex;align-items:baseline;", logicalCSS('padding-right', euiTheme.size.l), ">*+*{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
     // Elements
-    euiToastHeader__icon: /*#__PURE__*/css("flex:0 0 auto;fill:", euiTheme.colors.title, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
+    euiToastHeader__icon: /*#__PURE__*/css("flex:0 0 auto;fill:", euiTheme.colors.textHeading, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
     euiToastHeader__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
     // Variants
     withBody: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.s), ";;label:withBody;")

package/optimize/es/components/token/token.styles.js

@@ -11,9 +11,13 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import chroma from 'chroma-js';
 import { logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiPaletteColorBlind, euiPaletteColorBlindBehindText, makeHighContrastColor, isColorDark, tint, shade } from '../../services';
 import { TOKEN_COLOR_TO_ICON_COLOR_MAP } from './token_map';
-var getTokenColor = function getTokenColor(euiTheme, colorMode, fill, color) {
+var getTokenColor = function getTokenColor(euiThemeContext, fill, color) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode,
+    highContrastMode = euiThemeContext.highContrastMode;
   var hasVisColorAdjustment = euiTheme.flags.hasVisColorAdjustment;
   // use inside function as they are not returning constants,
   // but internally depend on EUI_VIS_COLOR_STORE to update per theme
@@ -30,13 +34,16 @@ var getTokenColor = function getTokenColor(euiTheme, colorMode, fill, color) {
     return euiTheme.colors.vis[iconColorToken];
   };
   var lightColor = hasVisColorAdjustment ? makeHighContrastColor(iconColor)(backgroundLightColor) : isVizColor ? shade(getIconVisColor(euiTheme, color), 0.3) : iconColor;
-  var boxShadowColor = isDarkMode ? shade(iconColor, 0.6) : tint(iconColor, 0.2);
+  var boxShadowColor = highContrastMode ? iconColor : isDarkMode ? shade(iconColor, 0.6) : tint(iconColor, 0.2);
   var darkColor = isColorDark.apply(void 0, _toConsumableArray(chroma(backgroundDarkColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   switch (fill) {
     case 'none':
       return "\n        // Without a background, the fill color should be the graphic color\n        color: ".concat(iconColor, ";\n      ");
     case 'light':
-      return "\n        color: ".concat(lightColor, ";\n        background-color: ").concat(backgroundLightColor, ";\n        box-shadow: inset 0 0 0 1px ").concat(boxShadowColor, ";\n      ");
+      return "\n        color: ".concat(lightColor, ";\n        background-color: ").concat(backgroundLightColor, ";\n        ").concat(highContrastModeStyles(euiThemeContext, {
+        none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(boxShadowColor, ";"),
+        forced: "border: ".concat(euiTheme.border.thin, ";")
+      }), "\n      ");
     case 'dark':
       return "\n        color: ".concat(darkColor, ";\n        background-color: ").concat(backgroundDarkColor, ";\n      ");
   }
@@ -49,9 +56,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "border-radius:50%;label:circle;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiTokenStyles = function euiTokenStyles(_ref2, fill) {
-  var euiTheme = _ref2.euiTheme,
-    colorMode = _ref2.colorMode;
+export var euiTokenStyles = function euiTokenStyles(euiThemeContext, fill) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
     euiToken: /*#__PURE__*/css("display:inline-flex;align-items:center;justify-content:center;svg{", logicalCSS('height', '100%'), " margin:auto;};label:euiToken;"),
@@ -67,17 +73,17 @@ export var euiTokenStyles = function euiTokenStyles(_ref2, fill) {
     m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.l), " &[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.s), ";};label:m;"),
     l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.xl), " &[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.s), ";};label:l;"),
     // Colors
-    euiColorVis0: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 0), ";label:euiColorVis0;"),
-    euiColorVis1: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 1), ";label:euiColorVis1;"),
-    euiColorVis2: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 2), ";label:euiColorVis2;"),
-    euiColorVis3: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 3), ";label:euiColorVis3;"),
-    euiColorVis4: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 4), ";label:euiColorVis4;"),
-    euiColorVis5: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 5), ";label:euiColorVis5;"),
-    euiColorVis6: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 6), ";label:euiColorVis6;"),
-    euiColorVis7: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 7), ";label:euiColorVis7;"),
-    euiColorVis8: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 8), ";label:euiColorVis8;"),
-    euiColorVis9: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 9), ";label:euiColorVis9;"),
-    gray: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 'gray'), ";label:gray;"),
+    euiColorVis0: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 0), ";label:euiColorVis0;"),
+    euiColorVis1: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 1), ";label:euiColorVis1;"),
+    euiColorVis2: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 2), ";label:euiColorVis2;"),
+    euiColorVis3: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 3), ";label:euiColorVis3;"),
+    euiColorVis4: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 4), ";label:euiColorVis4;"),
+    euiColorVis5: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 5), ";label:euiColorVis5;"),
+    euiColorVis6: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 6), ";label:euiColorVis6;"),
+    euiColorVis7: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 7), ";label:euiColorVis7;"),
+    euiColorVis8: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 8), ";label:euiColorVis8;"),
+    euiColorVis9: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 9), ";label:euiColorVis9;"),
+    gray: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 'gray'), ";label:gray;"),
     customColor: /*#__PURE__*/css(";label:customColor;"),
     // Fills
     light: /*#__PURE__*/css(";label:light;"),

package/optimize/es/components/tool_tip/tool_tip.styles.js

@@ -13,6 +13,7 @@ import { css, keyframes } from '@emotion/react';
 import { euiShadow } from '@elastic/eui-theme-common';
 import { logicalCSS, euiFontSize, euiCanAnimate } from '../../global_styling';
 import { _popoverArrowStyles } from '../../services/popover';
+import { euiPanelBorderStyles } from '../panel/panel.styles';
 export var euiToolTipBackgroundColor = function euiToolTipBackgroundColor(euiTheme) {
   return euiTheme.components.tooltipBackground;
 };
@@ -27,14 +28,14 @@ var euiToolTipAnimationHorizontal = function euiToolTipAnimationHorizontal(size)
 };
 export var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
-  var hasVisibleBorder = colorMode === 'DARK';
+    highContrastMode = euiThemeContext.highContrastMode;
+  var hasShadow = !highContrastMode;
   var animationTiming = "".concat(euiTheme.animation.slow, " ease-out 0s forwards");
   var arrowSize = euiTheme.size.m;
   var arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);
   return {
     // Base
-    euiToolTip: /*#__PURE__*/css(euiShadow(euiThemeContext), " border:", euiTheme.border.width.thin, " solid ", hasVisibleBorder ? euiTheme.border.color : 'transparent', ";border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", logicalCSS('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", euiFontSize(euiThemeContext, 's'), " position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme), ";};label:euiToolTip;"),
+    euiToolTip: /*#__PURE__*/css(hasShadow ? euiShadow(euiThemeContext) : '', " border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", logicalCSS('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", euiFontSize(euiThemeContext, 's'), " position:absolute;", euiPanelBorderStyles(euiThemeContext), " [class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme), ";};label:euiToolTip;"),
     // Sizes
     s: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";;label:s;"),
     // Positions
@@ -43,7 +44,7 @@ export var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
     left: /*#__PURE__*/css(euiCanAnimate, "{animation:", euiToolTipAnimationHorizontal("-".concat(euiTheme.size.base)), " ", animationTiming, ";};label:left;"),
     right: /*#__PURE__*/css(euiCanAnimate, "{animation:", euiToolTipAnimationHorizontal(euiTheme.size.base), " ", animationTiming, ";};label:right;"),
     // Arrow
-    euiToolTip__arrow: /*#__PURE__*/css(arrowStyles._arrowStyles, " background-color:inherit;border:inherit;;label:euiToolTip__arrow;"),
+    euiToolTip__arrow: /*#__PURE__*/css(arrowStyles._arrowStyles, " background-color:inherit;;label:euiToolTip__arrow;"),
     arrowPositions: arrowStyles.positions,
     // Title
     euiToolTip__title: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";", logicalCSS('border-bottom', "solid ".concat(euiTheme.border.width.thin, " ").concat(euiToolTipBorderColor(euiTheme))), " ", logicalCSS('padding-bottom', euiTheme.size.xs), " ", logicalCSS('margin-bottom', euiTheme.size.xs), ";;label:euiToolTip__title;")

package/optimize/es/components/tour/_tour_header.styles.js

@@ -15,6 +15,6 @@ export var euiTourHeaderStyles = function euiTourHeaderStyles(_ref) {
     euiTourHeader: /*#__PURE__*/css(logicalCSS('border-bottom', 'none'), logicalCSS('margin-bottom', euiTheme.size.s), ";;label:euiTourHeader;"),
     // Elements
     euiTourHeader__title: /*#__PURE__*/css(logicalCSS('margin-top', 0), ";;label:euiTourHeader__title;"),
-    euiTourHeader__subtitle: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";padding-block-end:", euiTheme.size.xs, ";;label:euiTourHeader__subtitle;")
+    euiTourHeader__subtitle: /*#__PURE__*/css("color:", euiTheme.colors.textSubdued, ";padding-block-end:", euiTheme.size.xs, ";;label:euiTourHeader__subtitle;")
   };
 };

package/optimize/es/components/tour/tour.styles.js

@@ -24,7 +24,7 @@ export var euiTourBeaconStyles = function euiTourBeaconStyles(_ref) {
   });
   return {
     // Base
-    euiTourBeacon: /*#__PURE__*/css("pointer-events:none;position:absolute;", euiCanAnimate, "{opacity:0;transition:opacity 0s ", euiTheme.animation[openAnimationTiming], ";};label:euiTourBeacon;"),
+    euiTourBeacon: /*#__PURE__*/css("pointer-events:none;position:absolute;z-index:1;", euiCanAnimate, "{opacity:0;transition:opacity 0s ", euiTheme.animation[openAnimationTiming], ";};label:euiTourBeacon;"),
     isOpen: /*#__PURE__*/css(euiCanAnimate, "{opacity:1;};label:isOpen;"),
     // Positions
     right: /*#__PURE__*/css(logicalCSS('top', '50%'), " ", logicalCSS('left', '-50%'), " ", logicalCSS('margin-top', beaconOffset), ";;label:right;"),