@elastic/eui
Version:
Elastic UI Component Library
92 lines (91 loc) • 6.21 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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;")
};
};