@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
64 lines (62 loc) • 2.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SteppedRainbowIconDecoration = void 0;
var _react = require("@emotion/react");
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var createSteppedRainbow = function createSteppedRainbow(colors) {
return "\n linear-gradient(\n to right,\n ".concat(colors.map(function (color, i) {
var inc = 100 / colors.length;
var pos = i + 1;
if (i === 0) {
return "".concat(color, " ").concat(pos * inc, "%,");
}
if (i === colors.length - 1) {
return "".concat(color, " ").concat((pos - 1) * inc, "%");
}
return "\n ".concat(color, " ").concat((pos - 1) * inc, "%,\n ").concat(color, " ").concat(pos * inc, "%,\n ");
}).join('\n'), "\n )");
};
var rainbow = createSteppedRainbow(["var(--ds-background-accent-purple-bolder, #6E5DC6)", "var(--ds-background-accent-teal-subtle, #6CC3E0)", "var(--ds-background-accent-orange-subtle, #FEA362)", "var(--ds-background-accent-red-bolder, #C9372C)"]);
var disabledRainbow = createSteppedRainbow(["var(--ds-background-accent-gray-subtle, #8590A2)", "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)", "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)", "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)"]);
var barStyles = (0, _react.css)({
position: 'absolute',
left: 0,
right: 0,
top: "var(--ds-space-200, 16px)",
margin: 'auto',
width: '12px',
height: '3px',
borderRadius: "var(--ds-border-radius, 3px)"
});
var textColorIconWrapper = (0, _react.css)({
position: 'relative'
});
var getBackground = function getBackground(selectedColor, disabled) {
if (selectedColor) {
return selectedColor;
}
if (disabled) {
return disabledRainbow;
}
return rainbow;
};
var SteppedRainbowIconDecoration = exports.SteppedRainbowIconDecoration = function SteppedRainbowIconDecoration(_ref) {
var selectedColor = _ref.selectedColor,
disabled = _ref.disabled,
icon = _ref.icon;
return (0, _react.jsx)("div", {
css: textColorIconWrapper
}, icon, (0, _react.jsx)("div", {
"data-testid": "toolbar-icon-stepped-rainbow",
style: {
background: getBackground(selectedColor, disabled)
},
css: barStyles
}));
};