@elastic/eui
Version:
Elastic UI Component Library
97 lines (96 loc) • 7.23 kB
JavaScript
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 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 { css } from '@emotion/react';
import chroma from 'chroma-js';
import { logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling';
import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
import { euiPaletteColorBlind, euiPaletteColorBlindBehindText, isColorDark, tint, shade } from '../../services';
import { TOKEN_COLOR_TO_ICON_COLOR_MAP } from './token_map';
var getTokenColor = function getTokenColor(euiThemeContext, fill, color) {
var euiTheme = euiThemeContext.euiTheme,
colorMode = euiThemeContext.colorMode,
highContrastMode = euiThemeContext.highContrastMode;
// use inside function as they are not returning constants,
// but internally depend on EUI_VIS_COLOR_STORE to update per theme
var visColors = euiPaletteColorBlind();
var visColorsBehindText = euiPaletteColorBlindBehindText();
var isVizColor = typeof color === 'number';
var iconColor = isVizColor ? visColors[color] : euiTheme.colors.darkShade;
var isDarkMode = colorMode === 'DARK';
var backgroundDarkColor = isVizColor ? visColorsBehindText[color] : euiTheme.colors.darkShade;
var backgroundLightColor = isDarkMode ? shade(iconColor, 0.9) : tint(iconColor, 0.9);
var getIconVisColor = function getIconVisColor(euiTheme, color) {
var iconColorKey = "euiColorVis".concat(color);
var iconColorToken = TOKEN_COLOR_TO_ICON_COLOR_MAP[iconColorKey];
return euiTheme.colors.vis[iconColorToken];
};
var lightColor = isVizColor ? shade(getIconVisColor(euiTheme, color), 0.3) : iconColor;
var boxShadowColor = highContrastMode ? iconColor : isDarkMode ? shade(iconColor, 0.6) : tint(iconColor, 0.2);
var darkColor = isColorDark.apply(void 0, _toConsumableArray(chroma(backgroundDarkColor).rgb())) ? euiTheme.colors.textGhost : euiTheme.colors.textInk;
switch (fill) {
case 'none':
return "\n // Without a background, the fill color should be the graphic color\n color: ".concat(iconColor, ";\n ");
case 'light':
return "\n color: ".concat(lightColor, ";\n background-color: ").concat(backgroundLightColor, ";\n ").concat(highContrastModeStyles(euiThemeContext, {
none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(boxShadowColor, ";"),
forced: "border: ".concat(euiTheme.border.thin, ";")
}), "\n ");
case 'dark':
return "\n color: ".concat(darkColor, ";\n background-color: ").concat(backgroundDarkColor, ";\n ");
}
};
var _ref = process.env.NODE_ENV === "production" ? {
name: "1ab5xb2-circle",
styles: "border-radius:50%;label:circle;"
} : {
name: "1ab5xb2-circle",
styles: "border-radius:50%;label:circle;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
export var euiTokenStyles = function euiTokenStyles(euiThemeContext, fill) {
var euiTheme = euiThemeContext.euiTheme;
return {
// Base
euiToken: /*#__PURE__*/css("display:inline-flex;align-items:center;justify-content:center;svg{", logicalCSS('height', '100%'), " margin:auto;};label:euiToken;"),
// Shapes
circle: _ref,
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), " &[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), " &[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(euiThemeContext, fill, 0), ";label:euiColorVis0;"),
euiColorVis1: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 1), ";label:euiColorVis1;"),
euiColorVis2: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 2), ";label:euiColorVis2;"),
euiColorVis3: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 3), ";label:euiColorVis3;"),
euiColorVis4: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 4), ";label:euiColorVis4;"),
euiColorVis5: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 5), ";label:euiColorVis5;"),
euiColorVis6: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 6), ";label:euiColorVis6;"),
euiColorVis7: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 7), ";label:euiColorVis7;"),
euiColorVis8: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 8), ";label:euiColorVis8;"),
euiColorVis9: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 9), ";label:euiColorVis9;"),
gray: /*#__PURE__*/css(getTokenColor(euiThemeContext, fill, 'gray'), ";label:gray;"),
customColor: /*#__PURE__*/css(";label:customColor;"),
// Fills
light: /*#__PURE__*/css(";label:light;"),
dark: /*#__PURE__*/css(";label:dark;"),
none: /*#__PURE__*/css(";label:none;")
};
};