@elastic/eui 82.0.0 → 82.2.0

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

@@ -54,9 +54,9 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
   var blockQuoteBorderWidth = mathWithUnits(fontSize, function (x) {
     return x / 4;
   });
-  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    img,\n    pre,\n    > ul,\n    > ol {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n\n    // The styles of the nested ordered lists follow the style of GitHub\n    // which is commonly used in Markdown or MDX formatting.\n\n    ol ol,\n    ul ol {\n      list-style-type: lower-roman;\n    }\n\n    ul ul ol,\n    ul ol ol,\n    ol ul ol,\n    ol ol ol {\n      list-style-type: lower-alpha;\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(euiFontSize(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; // 90% of parent font size\n    }\n    ").concat(
+  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    img,\n    pre,\n    > ul,\n    > ol {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n\n    /* The styles of the nested ordered lists follow the style of GitHub\n       which is commonly used in Markdown or MDX formatting. */\n    ol ol,\n    ul ol {\n      list-style-type: lower-roman;\n    }\n\n    ul ul ol,\n    ul ol ol,\n    ol ul ol,\n    ol ol ol {\n      list-style-type: lower-alpha;\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(euiFontSize(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; /* 90% of parent font size */\n    }\n    ").concat(
   // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
-  _customScale === 'm' ? "\n    kbd {\n      ".concat(logicalCSS('padding-bottom', euiTheme.size.xs), "\n      // ensures when only one character the shape looks like a square\n      ").concat(logicalCSS('min-width', euiTheme.size.l), "\n      ").concat(logicalTextAlignCSS('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat(logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat(logicalCSS('bottom', euiTheme.size.xxs), "\n      ").concat(logicalCSS('left', 0), "\n      ").concat(logicalCSS('width', '100%'), "\n    }") : '', "\n  ");
+  _customScale === 'm' ? "\n    kbd {\n      ".concat(logicalCSS('padding-bottom', euiTheme.size.xs), "\n      /* Ensures the shape still looks like a square when only one character */\n      ").concat(logicalCSS('min-width', euiTheme.size.l), "\n      ").concat(logicalTextAlignCSS('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat(logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat(logicalCSS('bottom', euiTheme.size.xxs), "\n      ").concat(logicalCSS('left', 0), "\n      ").concat(logicalCSS('width', '100%'), "\n    }") : '', "\n  ");
 };
 
 /**
@@ -65,7 +65,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 export var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}img{display:block;", 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{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/css(euiText(euiTheme, true), "clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}img{display:block;", 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{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),

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

@@ -19,7 +19,7 @@ export var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiTheme
      * 2. Allow some padding for shadow
      */
     // Base
-    euiGlobalToastList: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", logicalCSS('bottom', 0), ";", logicalCSS('width', "".concat(euiToastWidth, "px")), ";", logicalCSS('max-height', '100vh'), ";", logicalCSSWithFallback('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", logicalSizeCSS(0, 0), ";}&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";", logicalCSS('padding-right', euiTheme.size.base), ";", logicalCSS('padding-vertical', euiTheme.size.base), ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('width', '100%'), ";}};label:euiGlobalToastList;"),
+    euiGlobalToastList: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", logicalCSS('bottom', 0), " ", logicalCSS('width', "".concat(euiToastWidth, "px")), logicalCSS('max-height', '100vh'), logicalCSSWithFallback('overflow-y', 'auto'), "scrollbar-width:none;&::-webkit-scrollbar{", logicalSizeCSS(0, 0), ";}&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), " ", logicalCSS('padding-right', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{&:not(:empty){", logicalCSS('left', 0), " ", logicalCSS('width', '100%'), ";}};label:euiGlobalToastList;"),
     // Variants
     right: /*#__PURE__*/css("&:not(:empty){", logicalCSS('right', 0), ";", euiMinBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('padding-left', "".concat(euiTheme.base * 4, "px")), ";}};label:right;"),
     left: /*#__PURE__*/css("&:not(:empty){", logicalCSS('left', 0), ";", euiMinBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('padding-right', "".concat(euiTheme.base * 4, "px")), ";}};label:left;")
@@ -30,7 +30,7 @@ export var euiGlobalToastListItemStyles = function euiGlobalToastListItemStyles(
   var euiShowToast = 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__*/css(logicalCSS('margin-bottom', euiTheme.size.base), ";animation:", euiTheme.animation.normal, " ", euiShowToast, " ", euiTheme.animation.resistance, ";opacity:1;&:first-child{", logicalCSS('margin-top', 'auto'), ";}&:last-child{", logicalCSS('margin-bottom', 0), ";};label:euiGlobalToastListItem;"),
+    euiGlobalToastListItem: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.base), " animation:", euiTheme.animation.normal, " ", euiShowToast, " ", euiTheme.animation.resistance, ";opacity:1;&:first-child{", logicalCSS('margin-top', 'auto'), ";}&:last-child{", logicalCSS('margin-bottom', 0), ";};label:euiGlobalToastListItem;"),
     // States
     dismissed: /*#__PURE__*/css("transition:opacity ", euiTheme.animation.normal, ";opacity:0;;label:dismissed;")
   };

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

@@ -15,9 +15,9 @@ export var euiToastStyles = function euiToastStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext), ";position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), ";", logicalCSS('padding-vertical', euiTheme.size.base), ";background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), ";&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
     // Elements
-    euiToast__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.base), ";", logicalCSS('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
+    euiToast__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.base), " ", logicalCSS('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
     // Variants
     primary: /*#__PURE__*/css(logicalCSS('border-top', "2px solid ".concat(euiTheme.colors.primary)), ";;label:primary;"),
     success: /*#__PURE__*/css(logicalCSS('border-top', "2px solid ".concat(euiTheme.colors.success)), ";;label:success;"),
@@ -29,10 +29,10 @@ export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext)
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiToastHeader: /*#__PURE__*/css(logicalCSS('padding-right', euiTheme.size.l), ";display:flex;align-items:baseline;>*+*{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
+    euiToastHeader: /*#__PURE__*/css("display:flex;align-items:baseline;", logicalCSS('padding-right', euiTheme.size.l), ">*+*{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
     // Elements
     euiToastHeader__icon: /*#__PURE__*/css("flex:0 0 auto;fill:", euiTheme.colors.title, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
-    euiToastHeader__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), ";font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
+    euiToastHeader__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
     // Variants
     withBody: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.s), ";;label:withBody;")
   };

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

@@ -56,12 +56,12 @@ export var euiTokenStyles = function euiTokenStyles(_ref2, fill) {
     square: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:square;"),
     rectangle: /*#__PURE__*/css("box-sizing:content-box;border-radius:", euiTheme.border.radius.small, ";;label:rectangle;"),
     // Sizes
-    xs: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.s, euiTheme.size.s), ";&[class*='-square'],&[class*='-rectangle']{border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+    xs: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.s), " &[class*='-square'],&[class*='-rectangle']{border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
       return x / 2;
-    }), ";}&[class*='-rectangle']{", logicalCSS('padding-vertical', '1px'), ";", logicalCSS('padding-horizontal', euiTheme.size.xs), ";};label:xs;"),
-    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.base, euiTheme.size.base), ";&[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.xs), ";};label:s;"),
-    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.l, euiTheme.size.l), ";&[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.s), ";};label:m;"),
-    l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.xl, euiTheme.size.xl), ";&[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.s), ";};label:l;"),
+    }), ";}&[class*='-rectangle']{", logicalCSS('padding-vertical', '1px'), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), ";};label:xs;"),
+    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.base), " &[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.xs), ";};label:s;"),
+    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.l), " &[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.s), ";};label:m;"),
+    l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.xl), " &[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.s), ";};label:l;"),
     // Colors
     euiColorVis0: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 0), ";label:euiColorVis0;"),
     euiColorVis1: /*#__PURE__*/css(getTokenColor(euiTheme, colorMode, fill, 1), ";label:euiColorVis1;"),

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

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

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

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

package/es/global_styling/mixins/_states.js

@@ -11,17 +11,18 @@ import { useEuiTheme } from '../../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
  */
-export var euiFocusRing = function euiFocusRing(_ref) {
+
+export 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);
@@ -31,13 +32,20 @@ export 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  ");
+};
+export 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  ");
 };
 export var useEuiFocusRing = function useEuiFocusRing(offset, color) {
   var euiTheme = useEuiTheme();

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

@@ -153,25 +153,36 @@ export 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
  */
-export var useEuiButtonRadiusCSS = function useEuiButtonRadiusCSS() {
+export var useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
   var _useEuiTheme = useEuiTheme(),
     euiTheme = _useEuiTheme.euiTheme;
-  return {
-    xs: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:xs;"),
-    s: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
-    m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
-  };
+  return "\n    ".concat(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
  */
-export var useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
-  var _useEuiTheme2 = useEuiTheme(),
-    euiTheme = _useEuiTheme2.euiTheme;
-  return "\n    ".concat(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  ");
+export 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'
+    }
+  };
 };