@elastic/eui 82.1.0 → 82.2.0

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

@@ -61,9 +61,9 @@ 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    img,\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\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    img,\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(
   // 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 when only one character the shape looks like a square\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.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  ");
 };
 
 /**
@@ -72,7 +72,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), ";clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}img{display:block;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}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:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";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), ";}img{display:block;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}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:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";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) {
       return x / 2;
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),

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

@@ -24,7 +24,7 @@ var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiThemeContext
      * 2. Allow some padding for shadow
      */
     // Base
-    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), ";", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth, "px")), ";", (0, _global_styling.logicalCSS)('max-height', '100vh'), ";", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
+    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth, "px")), (0, _global_styling.logicalCSS)('max-height', '100vh'), (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), "scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
     // Variants
     right: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('right', 0), ";", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('padding-left', "".concat(euiTheme.base * 4, "px")), ";}};label:right;"),
     left: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('padding-right', "".concat(euiTheme.base * 4, "px")), ";}};label:left;")
@@ -36,7 +36,7 @@ var euiGlobalToastListItemStyles = function euiGlobalToastListItemStyles(_ref) {
   var euiShowToast = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    transform: translateY(", ") scale(.9);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0) scale(1);\n    opacity: 1;\n  }\n"])), euiTheme.size.l);
   return {
     // Base
-    euiGlobalToastListItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), ";animation:", euiTheme.animation.normal, " ", euiShowToast, " ", euiTheme.animation.resistance, ";opacity:1;&:first-child{", (0, _global_styling.logicalCSS)('margin-top', 'auto'), ";}&:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', 0), ";};label:euiGlobalToastListItem;"),
+    euiGlobalToastListItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), " animation:", euiTheme.animation.normal, " ", euiShowToast, " ", euiTheme.animation.resistance, ";opacity:1;&:first-child{", (0, _global_styling.logicalCSS)('margin-top', 'auto'), ";}&:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', 0), ";};label:euiGlobalToastListItem;"),
     // States
     dismissed: /*#__PURE__*/(0, _react.css)("transition:opacity ", euiTheme.animation.normal, ";opacity:0;;label:dismissed;")
   };

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

@@ -19,9 +19,9 @@ var euiToastStyles = function euiToastStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _amsterdam.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%'), ";&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _amsterdam.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%'), " &: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;"),
+    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;"),
@@ -34,10 +34,10 @@ var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiToastHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', euiTheme.size.l), ";display:flex;align-items:baseline;>*+*{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
+    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__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), ";font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
+    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/lib/components/token/token.styles.js

@@ -61,12 +61,12 @@ var euiTokenStyles = function euiTokenStyles(_ref2, fill) {
     square: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:square;"),
     rectangle: /*#__PURE__*/(0, _react.css)("box-sizing:content-box;border-radius:", euiTheme.border.radius.small, ";;label:rectangle;"),
     // Sizes
-    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s, euiTheme.size.s), ";&[class*='-square'],&[class*='-rectangle']{border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s), " &[class*='-square'],&[class*='-rectangle']{border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
       return x / 2;
-    }), ";}&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-vertical', '1px'), ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:xs;"),
-    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.base, euiTheme.size.base), ";&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:s;"),
-    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.l, 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, euiTheme.size.xl), ";&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";};label:l;"),
+    }), ";}&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-vertical', '1px'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:xs;"),
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.base), " &[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:s;"),
+    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;"),

package/lib/components/tool_tip/tool_tip.styles.js

@@ -45,7 +45,7 @@ var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
   });
   return {
     // Base
-    euiToolTip: /*#__PURE__*/(0, _react.css)((0, _amsterdam.euiShadow)(euiThemeContext), ";border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme, colorMode), ";};label:euiToolTip;"),
+    euiToolTip: /*#__PURE__*/(0, _react.css)((0, _amsterdam.euiShadow)(euiThemeContext), " border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme, colorMode), ";};label:euiToolTip;"),
     // Sizes
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:s;"),
     // Positions
@@ -64,7 +64,7 @@ var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
       right: /*#__PURE__*/(0, _react.css)("transform:translateX(", arrowMinusSize, ") rotateZ(45deg);;label:right;")
     },
     // Title
-    euiToolTip__title: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";", (0, _global_styling.logicalCSS)('border-bottom', "solid ".concat(euiTheme.border.width.thin, " ").concat(euiToolTipBorderColor(euiTheme, colorMode))), ";", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), ";;label:euiToolTip__title;")
+    euiToolTip__title: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";", (0, _global_styling.logicalCSS)('border-bottom', "solid ".concat(euiTheme.border.width.thin, " ").concat(euiToolTipBorderColor(euiTheme, colorMode))), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), ";;label:euiToolTip__title;")
   };
 };
 exports.euiToolTipStyles = euiToolTipStyles;

package/lib/components/tour/tour.styles.js

@@ -43,10 +43,10 @@ var euiTourBeaconStyles = function euiTourBeaconStyles(_ref2) {
     euiTourBeacon: /*#__PURE__*/(0, _react.css)("pointer-events:none;position:absolute;", _global_styling.euiCanAnimate, "{opacity:0;transition:opacity 0s ", euiTheme.animation[_popover_panel.openAnimationTiming], ";};label:euiTourBeacon;"),
     isOpen: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{opacity:1;};label:isOpen;"),
     // Positions
-    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowHalfSize), ";", (0, _global_styling.logicalCSS)('left', arrowOffset), ";;label:right;"),
-    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowHalfSize), ";", (0, _global_styling.logicalCSS)('left', arrowSize), ";;label:left;"),
-    top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowSize), ";", (0, _global_styling.logicalCSS)('left', arrowHalfSize), ";;label:top;"),
-    bottom: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowOffset), ";", (0, _global_styling.logicalCSS)('left', arrowHalfSize), ";;label:bottom;")
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowHalfSize), " ", (0, _global_styling.logicalCSS)('left', arrowOffset), ";;label:right;"),
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowHalfSize), " ", (0, _global_styling.logicalCSS)('left', arrowSize), ";;label:left;"),
+    top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowSize), " ", (0, _global_styling.logicalCSS)('left', arrowHalfSize), ";;label:top;"),
+    bottom: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowOffset), " ", (0, _global_styling.logicalCSS)('left', arrowHalfSize), ";;label:bottom;")
   };
 };
 exports.euiTourBeaconStyles = euiTourBeaconStyles;
@@ -54,7 +54,7 @@ var euiTourHeaderStyles = function euiTourHeaderStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
     // Base
-    euiTourHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom', 'none'), ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiTourHeader;"),
+    euiTourHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom', 'none'), (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiTourHeader;"),
     // Elements
     euiTourHeader__title: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', 0), ";;label:euiTourHeader__title;"),
     euiTourHeader__subtitle: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.subduedText, ";padding-block-end:", euiTheme.size.xs, ";;label:euiTourHeader__subtitle;")
@@ -66,7 +66,7 @@ var euiTourFooterStyles = function euiTourFooterStyles(_ref4) {
     colorMode = _ref4.colorMode;
   return {
     // Base
-    euiTourFooter: /*#__PURE__*/(0, _react.css)("background-color:", backgroundColor(euiTheme.colors.lightestShade, colorMode), ";", (0, _global_styling.logicalCSS)('border-bottom-left-radius', euiTheme.border.radius.medium), ";", (0, _global_styling.logicalCSS)('border-bottom-right-radius', euiTheme.border.radius.medium), ";;label:euiTourFooter;")
+    euiTourFooter: /*#__PURE__*/(0, _react.css)("background-color:", backgroundColor(euiTheme.colors.lightestShade, colorMode), ";", (0, _global_styling.logicalCSS)('border-bottom-left-radius', euiTheme.border.radius.medium), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', euiTheme.border.radius.medium), ";;label:euiTourFooter;")
   };
 };
 exports.euiTourFooterStyles = euiTourFooterStyles;

package/lib/global_styling/mixins/_states.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiFocusRing = exports.euiFocusRing = void 0;
+exports.useEuiFocusRing = exports.euiOutline = exports.euiFocusRing = void 0;
 var _services = require("../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -17,17 +17,18 @@ var _services = require("../../services");
  * It is best practice to utilize the browser's default `outline` property for handling focus rings.
  * However, some components need to be forced to have the same behavior, or adjust the display.
  * This function re-applies the same default outline with a couple parameters
- * @param euiTheme UseEuiTheme.euiTheme
+ * @param euiTheme UseEuiTheme
  * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
- * @param color Accepts any CSS color, **Note: only works in -webkit-**
+ * @param color Accepts any CSS color
  */
-var euiFocusRing = function euiFocusRing(_ref) {
+
+var euiOutline = function euiOutline(_ref) {
   var euiTheme = _ref.euiTheme;
   var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
-  var options = arguments.length > 2 ? arguments[2] : undefined;
+  var color = arguments.length > 2 ? arguments[2] : undefined;
   // Width is enforced as a constant at the global theme layer
   var outlineWidth = euiTheme.focus.width;
-  var outlineColor = (options === null || options === void 0 ? void 0 : options.color) || euiTheme.focus.color;
+  var outlineColor = color || euiTheme.focus.color;
   var outlineOffset = offset;
   if (offset === 'inset') {
     outlineOffset = "-".concat(outlineWidth);
@@ -37,13 +38,21 @@ var euiFocusRing = function euiFocusRing(_ref) {
     outlineOffset = "calc(".concat(outlineWidth, " / -2);");
   }
 
+  // This is a separate function from `euiFocusRing` because some EUI components
+  // need the outline styles only, not the :focus-visible settings (e.g. - :focus-within usage)
+  return "\n    outline: ".concat(outlineWidth, " solid ").concat(outlineColor, ";\n    outline-offset: ").concat(outlineOffset, ";\n  ");
+};
+exports.euiOutline = euiOutline;
+var euiFocusRing = function euiFocusRing(euiThemeContext) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
+  var options = arguments.length > 2 ? arguments[2] : undefined;
   // This function utilizes `focus-visible` to turn on focus outlines.
-  // But this is browser-dependend:
+  // But this is browser-dependent:
   // 👉 Safari and Firefox innately respect only showing the outline with keyboard only
   // 💔 But they don't allow coloring of the 'auto'/default outline, so contrast is no good in dark mode.
-  // 👉 For these browsers we use the solid type in order to match with `currentColor.
+  // 👉 For these browsers we use the solid type in order to match with `currentColor`.
   // 😦 Which does means the outline will be square
-  return "\n    outline: ".concat(outlineWidth, " solid ").concat(outlineColor, ";\n    outline-offset: ").concat(outlineOffset, ";\n\n    // \uD83D\uDC40 Chrome respects :focus-visible and allows coloring the `auto` style\n    &:focus-visible {\n      outline-style: auto;\n    }\n\n    // \uD83D\uDE45\u200D\u2640\uFE0F But Chrome also needs to have the outline forcefully removed from regular `:focus` state\n    &:not(:focus-visible) {\n      outline: none;\n    }\n  ");
+  return "\n    ".concat(euiOutline(euiThemeContext, offset, options === null || options === void 0 ? void 0 : options.color).trim(), "\n\n    // \uD83D\uDC40 Chrome respects :focus-visible and allows coloring the `auto` style\n    &:focus-visible {\n      outline-style: auto;\n    }\n\n    // \uD83D\uDE45\u200D\u2640\uFE0F But Chrome also needs to have the outline forcefully removed from regular `:focus` state\n    &:not(:focus-visible) {\n      outline: none;\n    }\n  ");
 };
 exports.euiFocusRing = euiFocusRing;
 var useEuiFocusRing = function useEuiFocusRing(offset, color) {

package/lib/themes/amsterdam/global_styling/mixins/button.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiButtonRadiusCSS = exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.BUTTON_COLORS = void 0;
+exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.BUTTON_COLORS = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../../global_styling");
 var _services = require("../../../../services");
@@ -161,28 +161,39 @@ var useEuiButtonColorCSS = function useEuiButtonColorCSS() {
 };
 
 /**
- * Based on the button size, creates the style properties.
- * @returns An object of button size keys with Emption styles for `border-radius`
+ * Creates the translate animation when button is in focus.
+ * @returns string
  */
 exports.useEuiButtonColorCSS = useEuiButtonColorCSS;
-var useEuiButtonRadiusCSS = function useEuiButtonRadiusCSS() {
+var useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
   var _useEuiTheme = (0, _services.useEuiTheme)(),
     euiTheme = _useEuiTheme.euiTheme;
-  return {
-    xs: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:xs;"),
-    s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
-  };
+  return "\n    ".concat(_global_styling.euiCanAnimate, " {\n      transition: transform ").concat(euiTheme.animation.normal, " ease-in-out,\n        background-color ").concat(euiTheme.animation.normal, " ease-in-out;\n\n      &:hover:not(:disabled) {\n        transform: translateY(-1px);\n      }\n\n      &:focus {\n        animation: euiButtonActive ").concat(euiTheme.animation.normal, "\n          ").concat(euiTheme.animation.bounce, ";\n      }\n\n      &:active:not(:disabled) {\n        transform: translateY(1px);\n      }\n    }\n  ");
 };
 
 /**
- * Creates the translate animation when button is in focus.
- * @returns string
+ * Map of `size` props to various sizings/scales
+ * that should remain consistent across all buttons
  */
-exports.useEuiButtonRadiusCSS = useEuiButtonRadiusCSS;
-var useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
-  var _useEuiTheme2 = (0, _services.useEuiTheme)(),
-    euiTheme = _useEuiTheme2.euiTheme;
-  return "\n    ".concat(_global_styling.euiCanAnimate, " {\n      transition: transform ").concat(euiTheme.animation.normal, " ease-in-out,\n        background-color ").concat(euiTheme.animation.normal, " ease-in-out;\n\n      &:hover:not(:disabled) {\n        transform: translateY(-1px);\n      }\n\n      &:focus {\n        animation: euiButtonActive ").concat(euiTheme.animation.normal, "\n          ").concat(euiTheme.animation.bounce, ";\n      }\n\n      &:active:not(:disabled) {\n        transform: translateY(1px);\n      }\n    }\n  ");
+exports.useEuiButtonFocusCSS = useEuiButtonFocusCSS;
+var euiButtonSizeMap = function euiButtonSizeMap(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    xs: {
+      height: euiTheme.size.l,
+      radius: euiTheme.border.radius.small,
+      fontScale: 'xs'
+    },
+    s: {
+      height: euiTheme.size.xl,
+      radius: euiTheme.border.radius.small,
+      fontScale: 's'
+    },
+    m: {
+      height: euiTheme.size.xxl,
+      radius: euiTheme.border.radius.medium,
+      fontScale: 's'
+    }
+  };
 };
-exports.useEuiButtonFocusCSS = useEuiButtonFocusCSS;
+exports.euiButtonSizeMap = euiButtonSizeMap;

package/optimize/es/components/accessibility/screen_reader_only/screen_reader_only.styles.js

@@ -14,7 +14,7 @@ import { logicalCSS, logicalSizeCSS } from '../../../global_styling';
  * See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
  */
 export var euiScreenReaderOnly = function euiScreenReaderOnly() {
-  return "\n  // Take the element out of the layout\n  position: absolute;\n  // Keep it vertically inline\n  ".concat(logicalCSS('top', 'auto'), "\n  // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text\n  ").concat(logicalCSS('left', '-10000px'), "\n  // The element must have a size (for some screen readers)\n  ").concat(logicalSizeCSS('1px', '1px'), "\n  // But reduce the visible size to nothing\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  // And ensure no overflows occur\n  overflow: hidden;\n  // Chrome requires the negative margin to not cause overflows of parent containers\n  margin: -1px;\n");
+  return "\n  /* Take the element out of the layout */\n  position: absolute;\n  /* Keep it vertically inline */\n  ".concat(logicalCSS('top', 'auto'), "\n  /* Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text */\n  ").concat(logicalCSS('left', '-10000px'), "\n  /* The element must have a size (for some screen readers) */\n  ").concat(logicalSizeCSS('1px', '1px'), "\n  /* But reduce the visible size to nothing */\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  /* And ensure no overflows occur */\n  overflow: hidden;\n  /* Chrome requires the negative margin to not cause overflows of parent containers */\n  margin: -1px;\n");
 };
 
 /*
@@ -22,6 +22,6 @@ export var euiScreenReaderOnly = function euiScreenReaderOnly() {
  */
 export var euiScreenReaderOnlyStyles = function euiScreenReaderOnlyStyles(showOnFocus) {
   return {
-    euiScreenReaderOnly: showOnFocus ? /*#__PURE__*/css("&:not(:focus):not(:active):not(:focus-within){", euiScreenReaderOnly(), ";};label:euiScreenReaderOnly;") : /*#__PURE__*/css(euiScreenReaderOnly(), ";label:euiScreenReaderOnly;")
+    euiScreenReaderOnly: showOnFocus ? /*#__PURE__*/css("&:not(:focus, :active, :focus-within){", euiScreenReaderOnly(), ";};label:euiScreenReaderOnly;") : /*#__PURE__*/css(euiScreenReaderOnly(), ";label:euiScreenReaderOnly;")
   };
 };

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

@@ -12,7 +12,7 @@ import { euiFontSize, logicals, logicalCSS, logicalTextAlignCSS } from '../../gl
 export var euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiAccordion__button: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";", logicalTextAlignCSS('left'), " ", logicalCSS('width', '100%'), " &:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;"),
+    euiAccordion__button: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), " align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";", logicalTextAlignCSS('left'), " ", logicalCSS('width', '100%'), " &:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;"),
     // Triggering button needs separate `disabled` key because the element that renders may not support `:disabled`;
     // Hover pseudo selector for specificity
     disabled: /*#__PURE__*/css("&,&:hover{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";text-decoration:none;};label:disabled;")
@@ -46,17 +46,17 @@ export var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperSty
   };
 };
 var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "pbbcf-isOpen",
-  styles: "transform:rotate(90deg)!important;label:isOpen;"
+  name: "1u3vcry-isOpen",
+  styles: "transform:rotate(\n      90deg\n    )!important;label:isOpen;"
 } : {
-  name: "pbbcf-isOpen",
-  styles: "transform:rotate(90deg)!important;label:isOpen;",
+  name: "1u3vcry-isOpen",
+  styles: "transform:rotate(\n      90deg\n    )!important;label:isOpen;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiAccordionIconButtonStyles = function euiAccordionIconButtonStyles(_ref7) {
   var euiTheme = _ref7.euiTheme;
   return {
-    euiAccordion__iconButton: /*#__PURE__*/css("flex-shrink:0;", logicalCSS('margin-right', euiTheme.size.xs), " transform:rotate(0deg)!important;;label:euiAccordion__iconButton;"),
+    euiAccordion__iconButton: /*#__PURE__*/css("flex-shrink:0;", logicalCSS('margin-right', euiTheme.size.xs), " transform:rotate(\n      0deg\n    )!important;;label:euiAccordion__iconButton;"),
     isOpen: _ref3,
     arrowRight: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), " ", logicalCSS('margin-right', 0), ";;label:arrowRight;")
   };

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

@@ -66,7 +66,7 @@ export var euiAvatarStyles = function euiAvatarStyles(_ref8) {
   var euiTheme = _ref8.euiTheme;
   return {
     // Base
-    euiAvatar: /*#__PURE__*/css("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;", logicalTextAlignCSS('center'), ";", logicalCSS('overflow-x', 'hidden'), "font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
+    euiAvatar: /*#__PURE__*/css("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;", logicalTextAlignCSS('center'), " ", logicalCSS('overflow-x', 'hidden'), "font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/css("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),

package/optimize/es/components/badge/badge.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
@@ -15,14 +14,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import chroma from 'chroma-js';
-import { useEuiTheme, getSecureRelForTarget, isColorDark, wcagContrastMin } from '../../services';
+import { useEuiTheme, getSecureRelForTarget, wcagContrastMin } from '../../services';
 import { EuiInnerText } from '../inner_text';
 import { EuiIcon } from '../icon';
-import { chromaValid, parseColor } from '../color_picker/utils';
 import { validateHref } from '../../services/security/href_validator';
+import { getTextColor, getColorContrast, getIsValidColor } from './color_utils';
 import { euiBadgeStyles } from './badge.styles';
-import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ICON_SIDES = ['left', 'right'];
 export var COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'warning', 'danger'];
@@ -48,55 +45,33 @@ export var EuiBadge = function EuiBadge(_ref) {
   var euiTheme = useEuiTheme();
   var isHrefValid = !href || validateHref(href);
   var isDisabled = _isDisabled || !isHrefValid;
-  var optionalCustomStyles = useMemo(function () {
-    var textColor = null;
-    var contrastRatio = null;
-    var colorHex = null;
-    try {
-      // Check if a valid color name was provided
-      if (COLORS.includes(color)) {
-        // Get the hex equivalent for the provided color name
-        switch (color) {
-          case 'hollow':
-            return style;
-          // hollow uses its own Emotion class
-          case 'default':
-            colorHex = euiTheme.euiTheme.colors.lightShade;
-            break;
-          default:
-            colorHex = euiButtonFillColor(euiTheme, color).backgroundColor;
-            break;
-        }
-
-        // Set dark or light text color based upon best contrast
-        textColor = setTextColor(euiTheme, colorHex);
-        return _objectSpread({
-          backgroundColor: colorHex,
-          color: textColor
-        }, style);
-      } else {
-        // This is a custom color- let's do our best to ensure that it provides sufficient contrast
+  var isNamedColor = COLORS.includes(color);
+  var customColorStyles = useMemo(function () {
+    // Named colors set their styles via Emotion CSS and not inline styles
+    if (isNamedColor) return style;
 
-        // Set dark or light text color based upon best contrast
-        textColor = setTextColor(euiTheme, color);
+    // Do our best to ensure custom colors provide sufficient contrast
+    try {
+      // Set dark or light text color based upon best contrast
+      var textColor = getTextColor(euiTheme, color);
 
-        // Check the contrast
-        contrastRatio = getColorContrast(textColor, color);
-        if (contrastRatio < wcagContrastMin) {
-          // It's low contrast, so lets show a warning in the console
-          console.warn('Warning: ', color, ' badge has low contrast of ', contrastRatio.toFixed(2), '. Should be above ', wcagContrastMin, '.');
-        }
-        return _objectSpread({
-          backgroundColor: color,
-          color: textColor
-        }, style);
+      // Check the contrast ratio. If it's low contrast, emit a console awrning
+      var contrastRatio = getColorContrast(textColor, color);
+      if (contrastRatio < wcagContrastMin) {
+        console.warn("Warning: ".concat(color, " badge has a low contrast of ").concat(contrastRatio.toFixed(2), ". Should be above ").concat(wcagContrastMin, "."));
       }
+      return _objectSpread({
+        backgroundColor: color,
+        color: textColor
+      }, style);
     } catch (err) {
-      handleInvalidColor(color);
+      if (!getIsValidColor(color)) {
+        console.warn('EuiBadge expects a valid color. This can either be a three or six ' + "character hex value, rgb(a) value, hsv value, hollow, or one of the following: ".concat(COLORS, ". ") + "Instead got ".concat(color, "."));
+      }
     }
-  }, [color, style, euiTheme]);
+  }, [color, isNamedColor, style, euiTheme]);
   var styles = euiBadgeStyles(euiTheme);
-  var cssStyles = [styles.euiBadge, (onClick || href) && !iconOnClick && styles.clickable, isDisabled && styles.disabled, color === 'hollow' && styles.hollow];
+  var cssStyles = [styles.euiBadge, isNamedColor && styles[color], (onClick || href) && !iconOnClick && styles.clickable, isDisabled && styles.disabled];
   var textCssStyles = [styles.text.euiBadge__text, (onClick || href) && !isDisabled && styles.text.clickable];
   var iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];
   var iconButtonCssStyles = [styles.iconButton.euiBadge__iconButton, styles.iconButton[iconSide]];
@@ -164,7 +139,7 @@ export var EuiBadge = function EuiBadge(_ref) {
     return onClick || href ? ___EmotionJSX("span", {
       className: classes,
       css: cssStyles,
-      style: optionalCustomStyles
+      style: customColorStyles
     }, ___EmotionJSX("span", {
       className: "euiBadge__content",
       css: styles.euiBadge__content
@@ -181,7 +156,7 @@ export var EuiBadge = function EuiBadge(_ref) {
       return ___EmotionJSX("span", _extends({
         className: classes,
         css: cssStyles,
-        style: optionalCustomStyles,
+        style: customColorStyles,
         ref: ref,
         title: innerText
       }, rest), content);
@@ -193,7 +168,7 @@ export var EuiBadge = function EuiBadge(_ref) {
         "aria-label": onClickAriaLabel,
         className: classes,
         css: cssStyles,
-        style: optionalCustomStyles,
+        style: customColorStyles,
         ref: ref,
         title: innerText
       }, relObj, rest), content);
@@ -203,26 +178,10 @@ export var EuiBadge = function EuiBadge(_ref) {
       return ___EmotionJSX("span", _extends({
         className: classes,
         css: cssStyles,
-        style: optionalCustomStyles,
+        style: customColorStyles,
         ref: ref,
         title: innerText
       }, rest), content);
     });
   }
-};
-function getColorContrast(textColor, color) {
-  var contrastValue = chroma.contrast(textColor, color);
-  return contrastValue;
-}
-function setTextColor(_ref2, bgColor) {
-  var euiTheme = _ref2.euiTheme;
-  var textColor = isColorDark.apply(void 0, _toConsumableArray(chroma(bgColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
-  return textColor;
-}
-function handleInvalidColor(color) {
-  var isNamedColor = COLORS.includes(color);
-  var isValidColorString = color && chromaValid(parseColor(color) || '');
-  if (!isNamedColor && !isValidColorString) {
-    console.warn('EuiBadge expects a valid color. This can either be a three or six ' + "character hex value, rgb(a) value, hsv value, hollow, or one of the following: ".concat(COLORS, ". ") + "Instead got ".concat(color, "."));
-  }
-}
+};

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

@@ -9,8 +9,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiFontSize, euiFocusRing, euiTextTruncate, logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, mathWithUnits } from '../../global_styling';
-import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
-import { tint, transparentize } from '../../services';
+import { transparentize } from '../../services';
+import { euiBadgeColors } from './color_utils';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1hw5vc4-clickable",
   styles: "cursor:pointer;label:clickable;"
@@ -20,16 +20,26 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
+  var badgeColors = euiBadgeColors(euiThemeContext);
   return {
-    euiBadge: /*#__PURE__*/css("display:inline-block;vertical-align:middle;", logicalShorthandCSS('padding', "0 ".concat(euiTheme.size.s)), " ", logicalCSS('max-width', '100%'), " font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";line-height:", euiTheme.base + 2, "px;font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:default;background-color:transparent;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", mathWithUnits(euiTheme.border.radius.medium, function (x) {
+    euiBadge: /*#__PURE__*/css("display:inline-block;vertical-align:middle;", logicalShorthandCSS('padding', "0 ".concat(euiTheme.size.s)), " ", logicalCSS('max-width', '100%'), " font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";line-height:", mathWithUnits(
+    // Account for the border
+    [euiTheme.size.base, euiTheme.border.width.thin], function (x, y) {
+      return x + y * 2;
+    }), ";font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:default;background-color:transparent;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", mathWithUnits(euiTheme.border.radius.medium, function (x) {
       return x / 2;
     }), ";", logicalTextAlignCSS('left'), " &:focus-within{", euiFocusRing(euiThemeContext), ";}&+.euiBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
     clickable: /*#__PURE__*/css("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", euiFocusRing(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
-    disabled: /*#__PURE__*/css("color:", euiButtonColor(euiThemeContext, 'disabled').color, "!important;background-color:", euiButtonColor(euiThemeContext, 'disabled').backgroundColor, "!important;;label:disabled;"),
-    // Hollow has a border and is mostly used for autocompleters.
-    hollow: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";border-color:", colorMode === 'DARK' ? tint(euiTheme.border.color, 0.15) : euiTheme.border.color, ";color:", euiTheme.colors.text, ";;label:hollow;"),
+    // Colors
+    default: /*#__PURE__*/css(badgeColors.default, ";label:default;"),
+    hollow: /*#__PURE__*/css("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
+    primary: /*#__PURE__*/css(badgeColors.primary, ";label:primary;"),
+    accent: /*#__PURE__*/css(badgeColors.accent, ";label:accent;"),
+    warning: /*#__PURE__*/css(badgeColors.warning, ";label:warning;"),
+    danger: /*#__PURE__*/css(badgeColors.danger, ";label:danger;"),
+    success: /*#__PURE__*/css(badgeColors.success, ";label:success;"),
+    disabled: /*#__PURE__*/css("color:", badgeColors.disabled.color, "!important;background-color:", badgeColors.disabled.backgroundColor, "!important;;label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/css(logicalCSS(
     // Ensure proper height in case of just displaying an icon