@elastic/eui 100.0.0 → 101.0.1

package/optimize/lib/components/steps/sub_steps.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiSubStepsStyles = void 0;
 var _react = require("@emotion/react");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -13,9 +14,11 @@ var _react = require("@emotion/react");
  * Side Public License, v 1.
  */
 
-var euiSubStepsStyles = exports.euiSubStepsStyles = function euiSubStepsStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+var euiSubStepsStyles = exports.euiSubStepsStyles = function euiSubStepsStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiSubSteps: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.base, ";background-color:", euiTheme.colors.lightestShade, ";margin-block-end:", euiTheme.size.base, ";>*:last-child{margin-block-end:0;}& ol,.euiText & ol{list-style-type:lower-alpha;};label:euiSubSteps;")
+    euiSubSteps: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.base, ";background-color:", euiTheme.colors.lightestShade, ";margin-block-end:", euiTheme.size.base, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: "border: ".concat(euiTheme.border.thin, ";")
+    }), ">*:last-child{margin-block-end:0;}& ol,.euiText & ol{list-style-type:lower-alpha;};label:euiSubSteps;")
   };
 };

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

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

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

@@ -55,7 +55,7 @@ var euiTableRowCellStyles = exports.euiTableRowCellStyles = function euiTableRow
   // Without this, the row height jumps whenever actions are disabled.
   var hasIcons = "line-height: 1;";
   return {
-    euiTableRowCell: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.text, ";;label:euiTableRowCell;"),
+    euiTableRowCell: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textParagraph, ";;label:euiTableRowCell;"),
     rowHeader: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.regular, ";", (0, _global_styling.logicalTextAlignCSS)('left'), ";;label:rowHeader;"),
     isExpander: /*#__PURE__*/(0, _react.css)(hasIcons, ";;label:isExpander;"),
     hasActions: /*#__PURE__*/(0, _react.css)(hasIcons, ";;label:hasActions;"),
@@ -84,7 +84,7 @@ var euiTableRowCellStyles = exports.euiTableRowCellStyles = function euiTableRow
        * 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__*/(0, _react.css)("&:last-child{", (0, _global_styling.logicalCSS)('width', '100%'), " &::before{content:'';position:absolute;", (0, _global_styling.logicalCSS)('horizontal', 0), " ", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";}.euiTableCellContent{position:relative;", (0, _global_styling.logicalCSS)('top', euiTheme.size.xs), ";}};label:customActions;")
+      customActions: /*#__PURE__*/(0, _react.css)("&:last-child{", (0, _global_styling.logicalCSS)('width', '100%'), " &::before{content:'';position:absolute;", (0, _global_styling.logicalCSS)('horizontal', 0), " ", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";}.euiTableCellContent{position:relative;", (0, _global_styling.logicalCSS)('top', euiTheme.size.xs), ";}};label:customActions;")
     },
     euiTableRowCell__mobileHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's', {
       customScale: 'xxs'

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

@@ -21,16 +21,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__
 };
-var euiTabStyles = exports.euiTabStyles = function euiTabStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+var euiTabStyles = exports.euiTabStyles = function euiTabStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var selectedUnderlineSize = highContrastMode ? (0, _global_styling.mathWithUnits)(euiTheme.border.thick, function (x) {
+    return x * 2;
+  }) : euiTheme.border.width.thick;
   return {
-    euiTab: /*#__PURE__*/(0, _react.css)("display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-vertical', 0), " ", (0, _global_styling.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__*/(0, _react.css)("position:relative;display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-vertical', 0), " ", (0, _global_styling.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;", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('horizontal', 0), " ", (0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), " ", (0, _global_styling.logicalCSS)('border-bottom-width', selectedUnderlineSize), " pointer-events:none;};label:euiTab;"),
     // variations
     expanded: _ref,
-    selected: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";color:", euiTheme.colors.textPrimary, ";;label:selected;"),
+    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";&::after{content:'';border-color:", euiTheme.colors.primary, ";};label:selected;"),
     disabled: {
-      disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", euiTheme.colors.disabledText, ";;label:disabled;"),
-      selected: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.disabledText, ";;label:selected;")
+      disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", euiTheme.colors.textDisabled, ";;label:disabled;"),
+      selected: /*#__PURE__*/(0, _react.css)("&::after{content:'';border-color:", euiTheme.colors.textDisabled, ";};label:selected;")
     }
   };
 };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiTabsStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,7 +19,10 @@ var euiTabsStyles = exports.euiTabsStyles = function euiTabsStyles(euiThemeConte
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiTabs: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-x', 'auto'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " position:relative;flex-shrink:0;;label:euiTabs;"),
-    bottomBorder: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thin, " 0 ", euiTheme.border.color, ";;label:bottomBorder;"),
+    bottomBorder: /*#__PURE__*/(0, _react.css)((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: "box-shadow: inset 0 -".concat(euiTheme.border.width.thin, " 0 ").concat(euiTheme.border.color, ";"),
+      forced: (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin)
+    }), ";;label:bottomBorder;"),
     // sizes
     s: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.m, ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.base, ";;label:m;"),

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

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiTextStyles = exports.euiTextConstrainedMaxWidth = exports.euiText = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _link = require("../link/link.styles");
 var _title = require("../title/title.styles");
+var _code_syntax = require("../code/code_syntax.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -27,7 +29,7 @@ var euiTextConstrainedMaxWidth = exports.euiTextConstrainedMaxWidth = 'max(64ch,
 var euiText = exports.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
   };
 };
@@ -59,9 +61,13 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
   var blockQuoteBorderWidth = (0, _global_styling.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((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    pre,\n    > ul,\n    > ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat((0, _global_styling.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((0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(fontSize)), "\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat((0, _global_styling.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((0, _global_styling.euiFontSize)(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat((0, _global_styling.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((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    pre,\n    > ul,\n    > ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat((0, _global_styling.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((0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(fontSize)), "\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat((0, _global_styling.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((0, _global_styling.euiFontSize)(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.textParagraph, ";\n    }\n\n    small {\n      font-size: ").concat((0, _global_styling.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((0, _high_contrast.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((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n\n          pre {\n            ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), "\n      /* Ensures the shape still looks like a square when only one character */\n      ").concat((0, _global_styling.logicalCSS)('min-width', euiTheme.size.l), "\n      ").concat((0, _global_styling.logicalTextAlignCSS)('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat((0, _global_styling.logicalCSS)('bottom', euiTheme.size.xxs), "\n      ").concat((0, _global_styling.logicalCSS)('left', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    }") : '', "\n  ");
+  _customScale === 'm' ? "\n    kbd {\n      ".concat((0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), "\n      /* Ensures the shape still looks like a square when only one character */\n      ").concat((0, _global_styling.logicalCSS)('min-width', euiTheme.size.l), "\n      ").concat((0, _global_styling.logicalTextAlignCSS)('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.textParagraph)), "\n      position: absolute;\n      ").concat((0, _global_styling.logicalCSS)('bottom', euiTheme.size.xxs), "\n      ").concat((0, _global_styling.logicalCSS)('left', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    }") : '', "\n  ");
 };
 
 /**
@@ -69,9 +75,15 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
  */
 var euiTextStyles = exports.euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var codeColors = (0, _code_syntax.euiCodeTextColors)(euiThemeContext);
   return {
-    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), "clear:both;a:not([class]){", (0, _link.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{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.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{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), "clear:both;a:not([class]){", (0, _link.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{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.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, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: "border: ".concat(euiTheme.border.thin)
+    }), ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.textParagraph, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
       return x / 2;
+    }), ";", (0, _high_contrast.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),
     // Sizes

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

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

package/optimize/lib/components/text_truncate/text_truncate.js

@@ -136,19 +136,20 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     return truncatedText;
   }, [ready, width, text, truncation, truncationOffset, truncationPosition, ellipsis, containerEl]);
   var isTruncating = truncatedText !== text;
+  var styles = (0, _services.useEuiMemoizedStyles)(_text_truncate.euiTextTruncateStyles);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: (0, _classnames.default)('euiTextTruncate', className),
-    css: _text_truncate.euiTextTruncateStyles.euiTextTruncate,
+    css: styles.euiTextTruncate,
     ref: refs,
     title: isTruncating ? text : undefined
   }, rest), isTruncating ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
     className: "euiTextTruncate__truncatedText",
-    css: _text_truncate.euiTextTruncateStyles.euiTextTruncate__truncatedText,
+    css: styles.euiTextTruncate__truncatedText,
     "aria-hidden": true,
     "data-test-subj": "truncatedText"
   }, children ? children(truncatedText) : truncatedText), (0, _react2.jsx)("span", {
     className: "euiTextTruncate__fullText",
-    css: _text_truncate.euiTextTruncateStyles.euiTextTruncate__fullText,
+    css: styles.euiTextTruncate__fullText,
     "data-test-subj": "fullText"
   }, text)) : (0, _react2.jsx)("span", {
     className: "euiTextTruncate__fullText",

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiTextTruncateStyles = void 0;
 var _react = require("@emotion/react");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,42 +13,39 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiTextTruncateStyles = exports.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__
-  }
+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__
+};
+var euiTextTruncateStyles = exports.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__*/(0, _react.css)("position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;}", (0, _high_contrast.preventForcedColors)(euiThemeContext), ";;label:euiTextTruncate__fullText;")
+  };
 };

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

@@ -20,13 +20,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((0, _global_styling.logicalCSS)('top', 0), ";\n      ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('top', '50%'), ";\n    }\n  \n    > [class*='euiTimelineItem-center']:last-child:not(:only-child) > [class*='euiTimelineItemIcon-']::before {\n      ").concat((0, _global_styling.logicalCSS)('height', '50%'), ";\n    }\n  ");
-};
-var euiTimelineStyles = exports.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((0, _global_styling.logicalCSS)('top', 0), ";\n      ").concat((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thick), ";\n    }\n\n    > [class*='euiTimelineItem-center']:first-child > [class*='euiTimelineItemIcon-']::before {\n      ").concat((0, _global_styling.logicalCSS)('top', '50%'), ";\n    }\n  \n    > [class*='euiTimelineItem-center']:last-child:not(:only-child) > [class*='euiTimelineItemIcon-']::before {\n      ").concat((0, _global_styling.logicalCSS)('height', '50%'), ";\n    }\n  ");
+};
+var euiTimelineStyles = exports.euiTimelineStyles = function euiTimelineStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiTimeline: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;", timelineVerticalLine(euiTheme), ";;label:euiTimeline;"),
+    euiTimeline: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;", timelineVerticalLine(euiThemeContext), ";;label:euiTimeline;"),
     m: /*#__PURE__*/(0, _react.css)(_gutterSizeAdjustment(euiTheme.size.base), ";label:m;"),
     l: /*#__PURE__*/(0, _react.css)(_gutterSizeAdjustment(euiTheme.size.l), ";label:l;"),
     xl: /*#__PURE__*/(0, _react.css)(_gutterSizeAdjustment(euiTheme.size.xl), ";label:xl;")

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiTimelineItemIconStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -29,19 +30,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__
-};
-var euiTimelineItemIconStyles = exports.euiTimelineItemIconStyles = function euiTimelineItemIconStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiTimelineItemIconStyles = exports.euiTimelineItemIconStyles = function euiTimelineItemIconStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiTimelineItemIcon: /*#__PURE__*/(0, _react.css)("display:flex;position:relative;flex-grow:0;justify-content:center;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.base), ";;label:euiTimelineItemIcon;"),
-    euiTimelineItemIcon__content: _ref3,
+    euiTimelineItemIcon__content: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:center;align-items:center;position:relative;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: "\n          & > * {\n            border: ".concat(euiTheme.border.thin, ";\n          }\n        ")
+    }), ";;label:euiTimelineItemIcon__content;"),
     //  Vertical alignments
     top: _ref2,
     center: _ref

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

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

package/optimize/lib/components/toast/toast.js

@@ -35,7 +35,7 @@ var EuiToast = exports.EuiToast = function EuiToast(_ref) {
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var baseStyles = (0, _services.useEuiMemoizedStyles)(_toast.euiToastStyles);
-  var baseCss = [baseStyles.euiToast, color && baseStyles[color]];
+  var baseCss = [baseStyles.euiToast, color && baseStyles.colors[color]];
   var headerStyles = (0, _services.useEuiMemoizedStyles)(_toast.euiToastHeaderStyles);
   var headerCss = [headerStyles.euiToastHeader, children && headerStyles.withBody];
   var classes = (0, _classnames.default)('euiToast', className);

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

@@ -7,7 +7,9 @@ exports.euiToastStyles = exports.euiToastHeaderStyles = void 0;
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _title = require("../title/title.styles");
+var _panel = require("../panel/panel.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,17 +19,49 @@ var _title = require("../title/title.styles");
  */
 
 var euiToastStyles = exports.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((0, _global_styling.logicalCSS)('border-top', "".concat(width, " solid ").concat(color)), "\n      pointer-events: none;\n    }\n  ");
+  };
   return {
     // Base
-    euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _euiThemeCommon.euiShadowLarge)(euiThemeContext), " position:relative;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('width', '100%'), " border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFloating, ";", (0, _global_styling.euiTextBreakWord)(), "&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _euiThemeCommon.euiShadowLarge)(euiThemeContext, {
+      borderAllInHighContrastMode: true
+    }), " position:relative;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.euiTextBreakWord)(), (0, _panel.euiPanelBorderStyles)(euiThemeContext, {
+      hasFloatingBorder: false
+    }), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
     // Elements
     euiToast__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
     // Variants
-    primary: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.primary)), ";;label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.success)), ";;label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.warning)), ";;label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)((0, _global_styling.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 ? (0, _euiThemeCommon.mathWithUnits)(euiTheme.border.width.thick, function (x) {
+          return x * 2;
+        }) : euiTheme.border.width.thick;
+        return (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+          none: highlightStyles(color, borderWidth),
+          preferred: "\n            ".concat(highlightStyles(color, borderWidth), "\n            \n            &::after {\n              ").concat((0, _global_styling.logicalCSS)('width', "calc(100% + ".concat((0, _euiThemeCommon.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+            return x * 2;
+          }), ")")), "\n              ").concat((0, _global_styling.logicalCSS)('margin-top', "-".concat(euiTheme.border.width.thin)), "\n              ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('top', 0), "\n              ").concat((0, _global_styling.logicalCSS)('horizontal', 0), "\n              ").concat((0, _global_styling.logicalCSS)('height', borderWidth), "\n              background-color: ").concat(color, ";\n              ").concat((0, _high_contrast.preventForcedColors)(euiThemeContext), "\n              pointer-events: none;\n            }\n          ")
+        });
+      },
+      get primary() {
+        return /*#__PURE__*/(0, _react.css)(this._getStyles(euiTheme.colors.primary), ";label:primary;");
+      },
+      get success() {
+        return /*#__PURE__*/(0, _react.css)(this._getStyles(euiTheme.colors.success), ";label:success;");
+      },
+      get warning() {
+        return /*#__PURE__*/(0, _react.css)(this._getStyles(euiTheme.colors.warning), ";label:warning;");
+      },
+      get danger() {
+        return /*#__PURE__*/(0, _react.css)(this._getStyles(euiTheme.colors.danger), ";label:danger;");
+      }
+    }
   };
 };
 var euiToastHeaderStyles = exports.euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
@@ -36,7 +70,7 @@ var euiToastHeaderStyles = exports.euiToastHeaderStyles = function euiToastHeade
     // Base
     euiToastHeader: /*#__PURE__*/(0, _react.css)("display:flex;align-items:baseline;", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.l), ">*+*{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
     // Elements
-    euiToastHeader__icon: /*#__PURE__*/(0, _react.css)("flex:0 0 auto;fill:", euiTheme.colors.title, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
+    euiToastHeader__icon: /*#__PURE__*/(0, _react.css)("flex:0 0 auto;fill:", euiTheme.colors.textHeading, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
     euiToastHeader__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
     // Variants
     withBody: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:withBody;")

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

@@ -9,6 +9,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = require("@emotion/react");
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _services = require("../../services");
 var _token_map = require("./token_map");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
@@ -18,7 +19,10 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-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
@@ -35,13 +39,16 @@ var getTokenColor = function getTokenColor(euiTheme, colorMode, fill, color) {
     return euiTheme.colors.vis[iconColorToken];
   };
   var lightColor = hasVisColorAdjustment ? (0, _services.makeHighContrastColor)(iconColor)(backgroundLightColor) : isVizColor ? (0, _services.shade)(getIconVisColor(euiTheme, color), 0.3) : iconColor;
-  var boxShadowColor = isDarkMode ? (0, _services.shade)(iconColor, 0.6) : (0, _services.tint)(iconColor, 0.2);
+  var boxShadowColor = highContrastMode ? iconColor : isDarkMode ? (0, _services.shade)(iconColor, 0.6) : (0, _services.tint)(iconColor, 0.2);
   var darkColor = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _chromaJs.default)(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((0, _high_contrast.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      ");
   }
@@ -54,9 +61,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "border-radius:50%;label:circle;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiTokenStyles = exports.euiTokenStyles = function euiTokenStyles(_ref2, fill) {
-  var euiTheme = _ref2.euiTheme,
-    colorMode = _ref2.colorMode;
+var euiTokenStyles = exports.euiTokenStyles = function euiTokenStyles(euiThemeContext, fill) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
     euiToken: /*#__PURE__*/(0, _react.css)("display:inline-flex;align-items:center;justify-content:center;svg{", (0, _global_styling.logicalCSS)('height', '100%'), " margin:auto;};label:euiToken;"),
@@ -72,17 +78,17 @@ var euiTokenStyles = exports.euiTokenStyles = function euiTokenStyles(_ref2, fil
     m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.l), " &[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";};label:m;"),
     l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.xl), " &[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";};label:l;"),
     // Colors
-    euiColorVis0: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 0), ";label:euiColorVis0;"),
-    euiColorVis1: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 1), ";label:euiColorVis1;"),
-    euiColorVis2: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 2), ";label:euiColorVis2;"),
-    euiColorVis3: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 3), ";label:euiColorVis3;"),
-    euiColorVis4: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 4), ";label:euiColorVis4;"),
-    euiColorVis5: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 5), ";label:euiColorVis5;"),
-    euiColorVis6: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 6), ";label:euiColorVis6;"),
-    euiColorVis7: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 7), ";label:euiColorVis7;"),
-    euiColorVis8: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 8), ";label:euiColorVis8;"),
-    euiColorVis9: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 9), ";label:euiColorVis9;"),
-    gray: /*#__PURE__*/(0, _react.css)(getTokenColor(euiTheme, colorMode, fill, 'gray'), ";label:gray;"),
+    euiColorVis0: /*#__PURE__*/(0, _react.css)(getTokenColor(euiThemeContext, fill, 0), ";label:euiColorVis0;"),
+    euiColorVis1: /*#__PURE__*/(0, _react.css)(getTokenColor(euiThemeContext, fill, 1), ";label:euiColorVis1;"),
+    euiColorVis2: /*#__PURE__*/(0, _react.css)(getTokenColor(euiThemeContext, fill, 2), ";label:euiColorVis2;"),
+    euiColorVis3: /*#__PURE__*/(0, _react.css)(getTokenColor(euiThemeContext, fill, 3), ";label:euiColorVis3;"),
+    euiColorVis4: /*#__PURE__*/(0, _react.css)(getTokenColor(euiThemeContext, fill, 4), ";label:euiColorVis4;"),
+    euiColorVis5: /*#__PURE__*/(0, _react.css)(getTokenColor(euiThemeContext, fill, 5), ";label:euiColorVis5;"),
+    euiColorVis6: /*#__PURE__*/(0, _react.css)(getTokenColor(euiThemeContext, fill, 6), ";label:euiColorVis6;"),
+    euiColorVis7: /*#__PURE__*/(0, _react.css)(getTokenColor(euiThemeContext, fill, 7), ";label:euiColorVis7;"),
+    euiColorVis8: /*#__PURE__*/(0, _react.css)(getTokenColor(euiThemeContext, fill, 8), ";label:euiColorVis8;"),
+    euiColorVis9: /*#__PURE__*/(0, _react.css)(getTokenColor(euiThemeContext, fill, 9), ";label:euiColorVis9;"),
+    gray: /*#__PURE__*/(0, _react.css)(getTokenColor(euiThemeContext, fill, 'gray'), ";label:gray;"),
     customColor: /*#__PURE__*/(0, _react.css)(";label:customColor;"),
     // Fills
     light: /*#__PURE__*/(0, _react.css)(";label:light;"),