@elastic/eui 85.0.0 → 85.1.0

package/dist/eui_charts_theme.js

@@ -3095,6 +3095,7 @@ Object.defineProperty(exports, "__esModule", ({
 }));
 exports.focus = void 0;
 var _utils = __webpack_require__(/*! ../../../../services/theme/utils */ "../../services/theme/utils.ts");
+var _manipulation = __webpack_require__(/*! ../../../../services/color/manipulation */ "../../services/color/manipulation.ts");
 var _size = __webpack_require__(/*! ../../../../global_styling/functions/size */ "../../global_styling/functions/size.ts");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -3104,24 +3105,20 @@ var _size = __webpack_require__(/*! ../../../../global_styling/functions/size */
  * Side Public License, v 1.
  */
 
-/**
- * NOTE: These were quick conversions of their Sass counterparts.
- *       The commented out keys have not been established as necessary yet.
- */
-
 var focus = {
+  // Focus ring
   color: 'currentColor',
-  width: (0, _utils.computed)((0, _size.sizeToPixel)(0.125))
-
-  // transparency: { LIGHT: 0.9, DARK: 0.7 },
-  // backgroundColor: computed(({ colors, focus }) =>
-  //   transparentize(colors.primary, focus!.transparency)
-  // ),
-
-  // Outline
-  // outline: {
-  //   outline: computed(({ focus }) => `${focus!.width} solid ${focus!.color}`),
-  // },
+  width: (0, _utils.computed)((0, _size.sizeToPixel)(0.125)),
+  // Focus background
+  transparency: {
+    LIGHT: 0.1,
+    DARK: 0.2
+  },
+  backgroundColor: (0, _utils.computed)(function (_ref) {
+    var colors = _ref.colors,
+      focus = _ref.focus;
+    return (0, _manipulation.transparentize)(colors.primary, focus.transparency);
+  })
 };
 exports.focus = focus;