@elastic/eui
Version:
Elastic UI Component Library
301 lines (287 loc) • 15.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.euiPaletteYellow = exports.euiPaletteWarm = exports.euiPaletteSkyBlue = exports.euiPaletteRed = exports.euiPaletteOrange = exports.euiPaletteGreen = exports.euiPaletteGray = exports.euiPaletteForTemperature = exports.euiPaletteForStatus = exports.euiPaletteCool = exports.euiPaletteComplementary = exports.euiPaletteColorBlindBehindText = exports.euiPaletteColorBlind = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _chromaJs = _interopRequireDefault(require("chroma-js"));
var _color_palette = require("./color_palette");
var _vis_color_store = require("./vis_color_store");
/*
* 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.
*/
var flatten = function flatten(arr) {
var _ref;
return (_ref = []).concat.apply(_ref, (0, _toConsumableArray2.default)(arr));
};
var euiPalette = function euiPalette(colors, steps) {
var diverge = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var categorical = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
// This function also trims the first color so white/black is never a color
if (!diverge && steps > 1) {
var palette = (0, _color_palette.colorPalette)(colors, steps + 1);
palette.shift();
return palette;
}
return (0, _color_palette.colorPalette)(colors, steps, diverge, categorical);
};
/**
* For usage in React use the `useEuiPaletteColorBlind` hook instead.
*
* NOTE: These functions rely on base vis colors of the theme which are provided via a global
* singleton instance `EUI_VIS_COLOR_STORE` that's updated by the EuiProvider on theme change.
* Make sure the function is recalled on theme change to retrieve theme-related colors.
*
* Outside of a react component you can use the `subscibe()` method on the `EUI_VIS_COLOR_STORE`
* to subscribe to updates and update your usages to ensure latest colors are loaded.
*/
var euiPaletteColorBlind = exports.euiPaletteColorBlind = function euiPaletteColorBlind() {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref2$rotations = _ref2.rotations,
rotations = _ref2$rotations === void 0 ? 1 : _ref2$rotations,
_ref2$order = _ref2.order,
order = _ref2$order === void 0 ? 'append' : _ref2$order,
_ref2$direction = _ref2.direction,
direction = _ref2$direction === void 0 ? 'lighter' : _ref2$direction,
_ref2$sortBy = _ref2.sortBy,
sortBy = _ref2$sortBy === void 0 ? 'default' : _ref2$sortBy,
_ref2$sortShift = _ref2.sortShift,
sortShift = _ref2$sortShift === void 0 ? '-100' : _ref2$sortShift,
colors = _ref2.colors;
var _colors = [];
var visColors = colors !== null && colors !== void 0 ? colors : _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
var base = [visColors.euiColorVis0, visColors.euiColorVis1, visColors.euiColorVis2, visColors.euiColorVis3, visColors.euiColorVis4, visColors.euiColorVis5, visColors.euiColorVis6, visColors.euiColorVis7, visColors.euiColorVis8, visColors.euiColorVis9];
if (sortBy === 'natural') {
// Sort the colors based on the color wheel, but shifting the values based on sortShift
base = (0, _toConsumableArray2.default)(base).sort(function (a, b) {
return (0, _chromaJs.default)(a).set('hsl.h', sortShift).hsl()[0] - (0, _chromaJs.default)(b).set('hsl.h', sortShift).hsl()[0];
});
}
if (rotations > 1) {
var palettes = base.map(function (color) {
// Create the darkest and lightest versions of each color using black and white
var palette = (0, _color_palette.colorPalette)(['black', color, 'white'], 5, false, true);
// Then removing the extremes
palette.pop();
palette.shift();
switch (direction) {
case 'lighter':
return (0, _color_palette.colorPalette)([palette[1], palette[2]], rotations, false, true);
case 'darker':
return (0, _color_palette.colorPalette)([palette[1], palette[0]], rotations, false, true);
case 'both':
return (0, _color_palette.colorPalette)(palette, rotations, false, true);
}
});
if (order === 'group') {
_colors = flatten(palettes);
} else {
var _loop = function _loop(i) {
var _colors2;
var rotation = palettes.map(function (palette) {
return palette[i];
});
(_colors2 = _colors).push.apply(_colors2, (0, _toConsumableArray2.default)(rotation));
};
for (var i = 0; i < rotations; i++) {
_loop(i);
}
}
} else {
_colors = base;
}
return _colors;
};
/**
* For usage in React use the `useEuiPaletteColorBlindBehindText` hook instead.
*
* Color blind palette with text is meant for use when text is applied on top of the color.
* It increases the brightness of the color to give the text more contrast.
*
* NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
* EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
*/
var euiPaletteColorBlindBehindText = exports.euiPaletteColorBlindBehindText = function euiPaletteColorBlindBehindText() {
var paletteProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var originalPalette = euiPaletteColorBlind(paletteProps);
return originalPalette;
};
/**
* For usage in React use the `useEuiPaletteForStatus` hook instead.
*
* NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
* EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
*/
var euiPaletteForStatus = exports.euiPaletteForStatus = function euiPaletteForStatus(steps) {
var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
colors = _ref3.colors;
var visColors = colors !== null && colors !== void 0 ? colors : _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
if (steps === 1) {
return [visColors.euiColorVisSuccess0];
}
if (steps <= 3) {
return euiPalette([visColors.euiColorVisSuccess0, visColors.euiColorVisWarning1, visColors.euiColorVisDanger0], steps, true);
}
return euiPalette([visColors.euiColorVisSuccess0, visColors.euiColorVisSuccess1, visColors.euiColorVisWarning1, visColors.euiColorVisDanger1, visColors.euiColorVisDanger0], steps, true);
};
/**
* For usage in React use the `useEuiPaletteForTemperature` hook instead.
*
* NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
* EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
*/
var euiPaletteForTemperature = exports.euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
colors = _ref4.colors;
var visColors = colors !== null && colors !== void 0 ? colors : _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
if (steps === 1) {
return [visColors.euiColorVisCool2];
} else if (steps <= 3) {
return euiPalette([visColors.euiColorVisCool2, visColors.euiColorVisWarm2], steps, true);
}
var cools = (0, _color_palette.colorPalette)([visColors.euiColorVisCool2, visColors.euiColorVisCool1, visColors.euiColorVisCool0], 3);
var warms = (0, _color_palette.colorPalette)([visColors.euiColorVisWarm0, visColors.euiColorVisWarm1, visColors.euiColorVisWarm2], 3);
var paletteColors = [].concat((0, _toConsumableArray2.default)(cools), [visColors.euiColorVisBase0], (0, _toConsumableArray2.default)(warms));
return euiPalette(paletteColors, steps, true);
};
/**
* For usage in React use the `useEuiPaletteComplementary` hook instead.
*
* NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
* EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
*/
var euiPaletteComplementary = exports.euiPaletteComplementary = function euiPaletteComplementary(steps) {
var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
colors = _ref5.colors;
var visColors = colors !== null && colors !== void 0 ? colors : _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
if (steps === 1) {
return [visColors.euiColorVisComplementary0];
}
var paletteColors = [visColors.euiColorVisComplementary0, visColors.euiColorVisBase0, visColors.euiColorVisComplementary1];
return euiPalette(paletteColors, steps, true);
};
/**
* For usage in React use the `useEuiPaletteRed` hook instead.
*
* NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
* EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
*/
var euiPaletteRed = exports.euiPaletteRed = function euiPaletteRed(steps) {
var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
colors = _ref6.colors;
var visColors = colors !== null && colors !== void 0 ? colors : _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
if (steps === 1) {
return [visColors.euiColorVisDanger1];
}
return euiPalette([visColors.euiColorVisBase0, visColors.euiColorVisDanger0], steps);
};
/**
* For usage in React use the `useEuiPaletteGreen` hook instead.
*
* NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
* EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
*/
var euiPaletteGreen = exports.euiPaletteGreen = function euiPaletteGreen(steps) {
var _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
colors = _ref7.colors;
var visColors = colors !== null && colors !== void 0 ? colors : _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
if (steps === 1) {
return [visColors.euiColorVisSuccess1];
}
return euiPalette([visColors.euiColorVisBase0, visColors.euiColorVisSuccess0], steps);
};
/**
* For usage in React use the `useEuiPaletteSkyBlue` hook instead.
*
* NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
* EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
*/
var euiPaletteSkyBlue = exports.euiPaletteSkyBlue = function euiPaletteSkyBlue(steps) {
var _ref8 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
colors = _ref8.colors;
var visColors = colors !== null && colors !== void 0 ? colors : _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
if (steps === 1) {
return [visColors.euiColorVisNeutral1];
}
return euiPalette([visColors.euiColorVisBase0, visColors.euiColorVisNeutral0], steps);
};
/**
* For usage in React use the `useEuiPaletteYellow` hook instead.
*
* NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
* EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
*/
var euiPaletteYellow = exports.euiPaletteYellow = function euiPaletteYellow(steps) {
var _ref9 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
colors = _ref9.colors;
var visColors = colors !== null && colors !== void 0 ? colors : _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
if (steps === 1) {
return [visColors.euiColorVisWarning1];
}
return euiPalette([visColors.euiColorVisBase0, visColors.euiColorVisWarning0], steps);
};
/**
* For usage in React use the `useEuiPaletteOrange` hook instead.
*
* NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
* EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
*/
var euiPaletteOrange = exports.euiPaletteOrange = function euiPaletteOrange(steps) {
var _ref10 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
colors = _ref10.colors;
var visColors = colors !== null && colors !== void 0 ? colors : _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
if (steps === 1) {
return [visColors.euiColorVisRisk1];
}
return euiPalette([visColors.euiColorVisBase0, visColors.euiColorVisRisk0], steps);
};
/**
* For usage in React use the `useEuiPaletteCool` hook instead.
*
* NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
* EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
*/
var euiPaletteCool = exports.euiPaletteCool = function euiPaletteCool(steps) {
var _ref11 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
colors = _ref11.colors;
var visColors = colors !== null && colors !== void 0 ? colors : _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
if (steps === 1) {
return [visColors.euiColorVisCool1];
}
return euiPalette([visColors.euiColorVisCool0, visColors.euiColorVisCool1, visColors.euiColorVisCool2], steps);
};
/**
* For usage in React use the `useEuiPaletteWarm` hook instead.
*
* NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
* EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
*/
var euiPaletteWarm = exports.euiPaletteWarm = function euiPaletteWarm(steps) {
var _ref12 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
colors = _ref12.colors;
var visColors = colors !== null && colors !== void 0 ? colors : _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
if (steps === 1) {
return [visColors.euiColorVisWarm2];
}
return euiPalette([visColors.euiColorVisWarm0, visColors.euiColorVisWarm1, visColors.euiColorVisWarm2], steps);
};
/**
* For usage in React use the `useEuiPaletteGray` hook instead.
*
* NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
* EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
*/
var euiPaletteGray = exports.euiPaletteGray = function euiPaletteGray(steps) {
var _ref13 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
colors = _ref13.colors;
var visColors = colors !== null && colors !== void 0 ? colors : _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
if (steps === 1) {
return [visColors.euiColorVisGrey1];
}
return euiPalette([visColors.euiColorVisBase0, visColors.euiColorVisGrey0, visColors.euiColorVisGrey1, visColors.euiColorVisGrey2, visColors.euiColorVisGrey3], steps, false);
};