@elastic/eui 107.0.0 → 108.0.0

package/optimize/es/themes/amsterdam/global_styling/variables/_forms.js

@@ -1,196 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { mathWithUnits } from '@elastic/eui-theme-common';
-import { computed } from '../../../../services/theme/utils';
-import { darken, shade, tint, transparentize } from '../../../../services/color/manipulation';
-var _forms = {
-  background: computed(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 1),
-      lightestShade = _ref2[0];
-    return tint(lightestShade, 0.6);
-  }, ['colors.lightestShade']),
-  backgroundDisabled: computed(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 1),
-      lightestShade = _ref4[0];
-    return darken(lightestShade, 0.05);
-  }, ['colors.lightestShade']),
-  backgroundReadOnly: computed(function (_ref5) {
-    var _ref6 = _slicedToArray(_ref5, 1),
-      emptyShade = _ref6[0];
-    return emptyShade;
-  }, ['colors.emptyShade']),
-  backgroundFocused: computed(function (_ref7) {
-    var _ref8 = _slicedToArray(_ref7, 1),
-      emptyShade = _ref8[0];
-    return emptyShade;
-  }, ['colors.emptyShade']),
-  backgroundAutofilled: computed(function (_ref9) {
-    var _ref10 = _slicedToArray(_ref9, 1),
-      primary = _ref10[0];
-    var background = tint(primary, 0.8);
-    return tint(background, 0.7);
-  }, ['colors.primary']),
-  backgroundDropping: 'transparent',
-  prependBackground: computed(function (_ref11) {
-    var _ref12 = _slicedToArray(_ref11, 1),
-      lightShade = _ref12[0];
-    return tint(lightShade, 0.5);
-  }, ['colors.lightShade']),
-  border: computed(function (_ref13) {
-    var _ref14 = _slicedToArray(_ref13, 1),
-      lightShade = _ref14[0];
-    var color = darken(lightShade, 4);
-    return transparentize(color, 0.1);
-  }, ['colors.lightShade']),
-  borderDisabled: computed(function (_ref15) {
-    var _ref16 = _slicedToArray(_ref15, 1),
-      lightShade = _ref16[0];
-    var color = darken(lightShade, 4);
-    return transparentize(color, 0.1);
-  }, ['colors.lightShade']),
-  borderFocused: computed(function (_ref17) {
-    var _ref18 = _slicedToArray(_ref17, 1),
-      primary = _ref18[0];
-    return primary;
-  }, ['colors.primary']),
-  borderInvalid: computed(function (_ref19) {
-    var _ref20 = _slicedToArray(_ref19, 1),
-      danger = _ref20[0];
-    return danger;
-  }, ['colors.danger']),
-  borderHovered: computed(function (_ref21) {
-    var _ref22 = _slicedToArray(_ref21, 1),
-      lightShade = _ref22[0];
-    var color = darken(lightShade, 4);
-    return transparentize(color, 0.1);
-  }, ['colors.lightShade']),
-  borderInvalidHovered: computed(function (_ref23) {
-    var _ref24 = _slicedToArray(_ref23, 1),
-      danger = _ref24[0];
-    return danger;
-  }, ['colors.danger']),
-  borderAutofilled: computed(function (_ref25) {
-    var _ref26 = _slicedToArray(_ref25, 1),
-      primaryText = _ref26[0];
-    return transparentize(primaryText, 0.2);
-  }, ['colors.primaryText']),
-  borderAutofilledHovered: computed(function (_ref27) {
-    var _ref28 = _slicedToArray(_ref27, 1),
-      primaryText = _ref28[0];
-    return transparentize(primaryText, 0.2);
-  }, ['colors.primaryText']),
-  clearButtonBackground: computed(function (_ref29) {
-    var _ref30 = _slicedToArray(_ref29, 1),
-      mediumShade = _ref30[0];
-    return mediumShade;
-  }, ['colors.mediumShade']),
-  controlBorder: computed(function (_ref31) {
-    var _ref32 = _slicedToArray(_ref31, 1),
-      lightestShade = _ref32[0];
-    return shade(lightestShade, 0.4);
-  }, ['colors.lightestShade']),
-  controlBorderSelected: computed(function (_ref33) {
-    var _ref34 = _slicedToArray(_ref33, 1),
-      lightestShade = _ref34[0];
-    return shade(lightestShade, 0.4);
-  }, ['colors.lightestShade']),
-  controlBorderDisabled: computed(function (_ref35) {
-    var _ref36 = _slicedToArray(_ref35, 1),
-      lightestShade = _ref36[0];
-    return shade(lightestShade, 0.4);
-  }, ['colors.lightestShade']),
-  controlBackgroundUnselected: computed(function (_ref37) {
-    var _ref38 = _slicedToArray(_ref37, 1),
-      emptyShade = _ref38[0];
-    return emptyShade;
-  }, ['colors.emptyShade']),
-  controlBackgroundDisabled: computed(function (_ref39) {
-    var _ref40 = _slicedToArray(_ref39, 1),
-      lightShade = _ref40[0];
-    return lightShade;
-  }, ['colors.lightShade']),
-  colorHasPlaceholder: computed(function (_ref41) {
-    var _ref42 = _slicedToArray(_ref41, 1),
-      subduedText = _ref42[0];
-    return tint(subduedText, 0.08);
-  }, ['colors.subduedText']),
-  colorDisabled: computed(function (_ref43) {
-    var _ref44 = _slicedToArray(_ref43, 1),
-      mediumShade = _ref44[0];
-    return mediumShade;
-  }, ['colors.mediumShade']),
-  iconDisabled: computed(function (_ref45) {
-    var _ref46 = _slicedToArray(_ref45, 1),
-      darkShade = _ref46[0];
-    return darkShade;
-  }, ['colors.darkShade'])
-};
-var _dark_forms = _objectSpread(_objectSpread({}, _forms), {}, {
-  background: computed(function (_ref47) {
-    var _ref48 = _slicedToArray(_ref47, 1),
-      lightestShade = _ref48[0];
-    return shade(lightestShade, 0.4);
-  }, ['colors.lightestShade']),
-  backgroundFocused: computed(function (_ref49) {
-    var _ref50 = _slicedToArray(_ref49, 1),
-      emptyShade = _ref50[0];
-    return shade(emptyShade, 0.4);
-  }, ['colors.emptyShade']),
-  backgroundAutofilled: computed(function (_ref51) {
-    var _ref52 = _slicedToArray(_ref51, 1),
-      primary = _ref52[0];
-    var background = shade(primary, 0.7);
-    return shade(background, 0.5);
-  }, ['colors.primary']),
-  prependBackground: computed(function (_ref53) {
-    var _ref54 = _slicedToArray(_ref53, 1),
-      lightShade = _ref54[0];
-    return shade(lightShade, 0.15);
-  }, ['colors.lightShade']),
-  border: computed(function (_ref55) {
-    var _ref56 = _slicedToArray(_ref55, 1),
-      ghost = _ref56[0];
-    return transparentize(ghost, 0.1);
-  }, ['colors.ghost']),
-  clearButtonBackground: computed(function (_ref57) {
-    var _ref58 = _slicedToArray(_ref57, 1),
-      darkShade = _ref58[0];
-    return darkShade;
-  }, ['colors.darkShade']),
-  controlBorder: computed(function (_ref59) {
-    var _ref60 = _slicedToArray(_ref59, 1),
-      lightestShade = _ref60[0];
-    return tint(lightestShade, 0.31);
-  }, ['colors.lightestShade']),
-  controlBorderSelected: computed(function (_ref61) {
-    var _ref62 = _slicedToArray(_ref61, 1),
-      lightestShade = _ref62[0];
-    return tint(lightestShade, 0.31);
-  }, ['colors.lightestShade']),
-  controlBorderDisabled: computed(function (_ref63) {
-    var _ref64 = _slicedToArray(_ref63, 1),
-      lightestShade = _ref64[0];
-    return tint(lightestShade, 0.31);
-  }, ['colors.lightestShade'])
-});
-export var forms = {
-  maxWidth: computed(function (_ref65) {
-    var _ref66 = _slicedToArray(_ref65, 1),
-      base = _ref66[0];
-    return mathWithUnits(base, function (x) {
-      return x * 25;
-    });
-  }, ['size.base']),
-  LIGHT: _forms,
-  DARK: _dark_forms
-};

package/optimize/es/themes/amsterdam/global_styling/variables/_levels.js

@@ -1,19 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-export var levels = {
-  toast: 9000,
-  modal: 8000,
-  mask: 6000,
-  navigation: 6000,
-  menu: 2000,
-  header: 1000,
-  flyout: 1000,
-  maskBelowHeader: 1000,
-  content: 0
-};

package/optimize/es/themes/amsterdam/global_styling/variables/_shadows.js

@@ -1,436 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { formatMultipleBoxShadow } from '@elastic/eui-theme-common';
-
-// in Amsterdam this is `color.shadow`, which computes to `ink` (#000)
-var SHADOW_COLOR = '#000000';
-export var shadowPrimitives = {
-  xs: {
-    light: [{
-      opacity: 0.04 * 1,
-      x: 0,
-      y: 0.8,
-      blur: 0.8,
-      spread: 0
-    }, {
-      opacity: 0.03 * 1,
-      x: 0,
-      y: 2.3,
-      blur: 2,
-      spread: 0
-    }],
-    dark: [{
-      opacity: 0.04 * 3.5,
-      x: 0,
-      y: 0.8,
-      blur: 0.8,
-      spread: 0
-    }, {
-      opacity: 0.03 * 3.5,
-      x: 0,
-      y: 2.3,
-      blur: 2,
-      spread: 0
-    }]
-  },
-  s: {
-    light: [{
-      opacity: 0.07 * 1,
-      x: 0,
-      y: 0.7,
-      blur: 1.4,
-      spread: 0
-    }, {
-      opacity: 0.05 * 1,
-      x: 0,
-      y: 1.9,
-      blur: 4,
-      spread: 0
-    }, {
-      opacity: 0.05 * 1,
-      x: 0,
-      y: 4.5,
-      blur: 10,
-      spread: 0
-    }],
-    dark: [{
-      opacity: 0.07 * 3.5,
-      x: 0,
-      y: 0.7,
-      blur: 1.4,
-      spread: 0
-    }, {
-      opacity: 0.05 * 3.5,
-      x: 0,
-      y: 1.9,
-      blur: 4,
-      spread: 0
-    }, {
-      opacity: 0.05 * 3.5,
-      x: 0,
-      y: 4.5,
-      blur: 10,
-      spread: 0
-    }]
-  },
-  m: {
-    light: [{
-      opacity: 0.08 * 1,
-      x: 0,
-      y: 0.9,
-      blur: 4,
-      spread: 0
-    }, {
-      opacity: 0.06 * 1,
-      x: 0,
-      y: 2.6,
-      blur: 8,
-      spread: 0
-    }, {
-      opacity: 0.05 * 1,
-      x: 0,
-      y: 5.7,
-      blur: 12,
-      spread: 0
-    }, {
-      opacity: 0.04 * 1,
-      x: 0,
-      y: 15,
-      blur: 15,
-      spread: 0
-    }],
-    dark: [{
-      opacity: 0.08 * 3.5,
-      x: 0,
-      y: 0.9,
-      blur: 4,
-      spread: 0
-    }, {
-      opacity: 0.06 * 3.5,
-      x: 0,
-      y: 2.6,
-      blur: 8,
-      spread: 0
-    }, {
-      opacity: 0.05 * 3.5,
-      x: 0,
-      y: 5.7,
-      blur: 12,
-      spread: 0
-    }, {
-      opacity: 0.04 * 3.5,
-      x: 0,
-      y: 15,
-      blur: 15,
-      spread: 0
-    }]
-  },
-  l: {
-    light: [{
-      opacity: 0.1 * 1,
-      x: 0,
-      y: 1,
-      blur: 5,
-      spread: 0
-    }, {
-      opacity: 0.07 * 1,
-      x: 0,
-      y: 3.6,
-      blur: 13,
-      spread: 0
-    }, {
-      opacity: 0.06 * 1,
-      x: 0,
-      y: 8.4,
-      blur: 23,
-      spread: 0
-    }, {
-      opacity: 0.05 * 1,
-      x: 0,
-      y: 23,
-      blur: 35,
-      spread: 0
-    }],
-    dark: [{
-      opacity: 0.1 * 3.5,
-      x: 0,
-      y: 1,
-      blur: 5,
-      spread: 0
-    }, {
-      opacity: 0.07 * 3.5,
-      x: 0,
-      y: 3.6,
-      blur: 13,
-      spread: 0
-    }, {
-      opacity: 0.06 * 3.5,
-      x: 0,
-      y: 8.4,
-      blur: 23,
-      spread: 0
-    }, {
-      opacity: 0.05 * 3.5,
-      x: 0,
-      y: 23,
-      blur: 35,
-      spread: 0
-    }]
-  },
-  xl: {
-    light: [{
-      opacity: 0.13 * 1,
-      x: 0,
-      y: 2.7,
-      blur: 9,
-      spread: 0
-    }, {
-      opacity: 0.09 * 1,
-      x: 0,
-      y: 9.4,
-      blur: 24,
-      spread: 0
-    }, {
-      opacity: 0.08 * 1,
-      x: 0,
-      y: 21.8,
-      blur: 43,
-      spread: 0
-    }],
-    dark: [{
-      opacity: 0.13 * 3.5,
-      x: 0,
-      y: 2.7,
-      blur: 9,
-      spread: 0
-    }, {
-      opacity: 0.09 * 3.5,
-      x: 0,
-      y: 9.4,
-      blur: 24,
-      spread: 0
-    }, {
-      opacity: 0.08 * 3.5,
-      x: 0,
-      y: 21.8,
-      blur: 43,
-      spread: 0
-    }]
-  },
-  xxl: {
-    light: [],
-    dark: []
-  },
-  flat: {
-    light: [{
-      opacity: 0.06 * 1,
-      x: 0,
-      y: 0,
-      blur: 0.8,
-      spread: 0
-    }, {
-      opacity: 0.04 * 1,
-      x: 0,
-      y: 0,
-      blur: 2,
-      spread: 0
-    }, {
-      opacity: 0.04 * 1,
-      x: 0,
-      y: 0,
-      blur: 5,
-      spread: 0
-    }, {
-      opacity: 0.03 * 1,
-      x: 0,
-      y: 0,
-      blur: 17,
-      spread: 0
-    }],
-    dark: [{
-      opacity: 0.06 * 3.5,
-      x: 0,
-      y: 0,
-      blur: 0.8,
-      spread: 0
-    }, {
-      opacity: 0.04 * 3.5,
-      x: 0,
-      y: 0,
-      blur: 2,
-      spread: 0
-    }, {
-      opacity: 0.04 * 3.5,
-      x: 0,
-      y: 0,
-      blur: 5,
-      spread: 0
-    }, {
-      opacity: 0.03 * 3.5,
-      x: 0,
-      y: 0,
-      blur: 17,
-      spread: 0
-    }]
-  }
-};
-var shadowColors = {
-  colors: {
-    base: SHADOW_COLOR
-  }
-};
-var shadowsLight = _objectSpread(_objectSpread({}, shadowColors), {}, {
-  xs: {
-    down: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
-      color: shadowColors.colors.base
-    }),
-    up: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
-      direction: 'up',
-      color: shadowColors.colors.base
-    })
-  },
-  s: {
-    down: formatMultipleBoxShadow(shadowPrimitives.s.light, {
-      color: shadowColors.colors.base
-    }),
-    up: formatMultipleBoxShadow(shadowPrimitives.s.light, {
-      direction: 'up',
-      color: shadowColors.colors.base
-    })
-  },
-  m: {
-    down: formatMultipleBoxShadow(shadowPrimitives.m.light, {
-      color: shadowColors.colors.base
-    }),
-    up: formatMultipleBoxShadow(shadowPrimitives.m.light, {
-      direction: 'up',
-      color: shadowColors.colors.base
-    })
-  },
-  l: {
-    down: formatMultipleBoxShadow(shadowPrimitives.l.light, {
-      color: shadowColors.colors.base
-    }),
-    up: formatMultipleBoxShadow(shadowPrimitives.l.light, {
-      direction: 'up',
-      color: shadowColors.colors.base
-    })
-  },
-  xl: {
-    down: formatMultipleBoxShadow(shadowPrimitives.xl.light, {
-      color: shadowColors.colors.base
-    }),
-    up: formatMultipleBoxShadow(shadowPrimitives.xl.light, {
-      direction: 'up',
-      color: shadowColors.colors.base
-    })
-  },
-  hover: {
-    base: {
-      down: formatMultipleBoxShadow(shadowPrimitives.s.light.slice(1), {
-        color: shadowColors.colors.base
-      }),
-      up: formatMultipleBoxShadow(shadowPrimitives.s.light.slice(1), {
-        direction: 'up',
-        color: shadowColors.colors.base
-      })
-    },
-    xl: {
-      down: 'none',
-      up: 'none'
-    }
-  },
-  flat: {
-    down: formatMultipleBoxShadow(shadowPrimitives.flat.light, {
-      color: shadowColors.colors.base
-    }),
-    up: formatMultipleBoxShadow(shadowPrimitives.flat.light, {
-      direction: 'up',
-      color: shadowColors.colors.base
-    })
-  }
-});
-var shadowsDark = _objectSpread(_objectSpread({}, shadowColors), {}, {
-  xs: {
-    down: formatMultipleBoxShadow(shadowPrimitives.xs.dark, {
-      color: shadowColors.colors.base
-    }),
-    up: formatMultipleBoxShadow(shadowPrimitives.xs.dark, {
-      direction: 'up',
-      color: shadowColors.colors.base
-    })
-  },
-  s: {
-    down: formatMultipleBoxShadow(shadowPrimitives.s.dark, {
-      color: shadowColors.colors.base
-    }),
-    up: formatMultipleBoxShadow(shadowPrimitives.s.dark, {
-      direction: 'up',
-      color: shadowColors.colors.base
-    })
-  },
-  m: {
-    down: formatMultipleBoxShadow(shadowPrimitives.m.dark, {
-      color: shadowColors.colors.base
-    }),
-    up: formatMultipleBoxShadow(shadowPrimitives.m.dark, {
-      direction: 'up',
-      color: shadowColors.colors.base
-    })
-  },
-  l: {
-    down: formatMultipleBoxShadow(shadowPrimitives.l.dark, {
-      color: shadowColors.colors.base
-    }),
-    up: formatMultipleBoxShadow(shadowPrimitives.l.dark, {
-      direction: 'up',
-      color: shadowColors.colors.base
-    })
-  },
-  xl: {
-    down: formatMultipleBoxShadow(shadowPrimitives.xl.dark, {
-      color: shadowColors.colors.base
-    }),
-    up: formatMultipleBoxShadow(shadowPrimitives.xl.dark, {
-      direction: 'up',
-      color: shadowColors.colors.base
-    })
-  },
-  hover: {
-    base: {
-      down: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
-        color: shadowColors.colors.base
-      }),
-      up: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
-        direction: 'up',
-        color: shadowColors.colors.base
-      })
-    },
-    xl: {
-      down: 'none',
-      up: 'none'
-    }
-  },
-  flat: {
-    down: formatMultipleBoxShadow(shadowPrimitives.flat.dark, {
-      color: shadowColors.colors.base
-    }),
-    up: formatMultipleBoxShadow(shadowPrimitives.flat.dark, {
-      direction: 'up',
-      color: shadowColors.colors.base
-    })
-  }
-});
-export var shadows = {
-  LIGHT: shadowsLight,
-  DARK: shadowsDark
-};

package/optimize/es/themes/amsterdam/global_styling/variables/_size.js

@@ -1,23 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { sizeToPixel } from '../../../../global_styling/functions';
-import { computed } from '../../../../services/theme/utils';
-export var base = 16;
-export var size = {
-  xxs: computed(sizeToPixel(0.125)),
-  xs: computed(sizeToPixel(0.25)),
-  s: computed(sizeToPixel(0.5)),
-  m: computed(sizeToPixel(0.75)),
-  base: computed(sizeToPixel()),
-  l: computed(sizeToPixel(1.5)),
-  xl: computed(sizeToPixel(2)),
-  xxl: computed(sizeToPixel(2.5)),
-  xxxl: computed(sizeToPixel(3)),
-  xxxxl: computed(sizeToPixel(4))
-};

package/optimize/es/themes/amsterdam/global_styling/variables/_states.js

@@ -1,26 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { computed } from '../../../../services/theme/utils';
-import { transparentize } from '../../../../services/color/manipulation';
-import { sizeToPixel } from '../../../../global_styling/functions/size';
-export var focus = {
-  // Focus ring
-  color: 'currentColor',
-  width: computed(sizeToPixel(0.125)),
-  // Focus background
-  transparency: {
-    LIGHT: 0.1,
-    DARK: 0.2
-  },
-  backgroundColor: computed(function (_ref) {
-    var colors = _ref.colors,
-      focus = _ref.focus;
-    return transparentize(colors.primary, focus.transparency);
-  })
-};