@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
65 lines • 2.06 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { css, jsx } from '@emotion/react';
const createSteppedRainbow = colors => {
return `
linear-gradient(
to right,
${colors.map((color, i) => {
const inc = 100 / colors.length;
const pos = i + 1;
if (i === 0) {
return `${color} ${pos * inc}%,`;
}
if (i === colors.length - 1) {
return `${color} ${(pos - 1) * inc}%`;
}
return `
${color} ${(pos - 1) * inc}%,
${color} ${pos * inc}%,
`;
}).join('\n')}
)`;
};
export const rainbow = createSteppedRainbow(["var(--ds-background-accent-purple-bolder, #964AC0)", "var(--ds-background-accent-teal-subtle, #6CC3E0)", "var(--ds-background-accent-orange-subtle, #FCA700)", "var(--ds-background-accent-red-bolder, #C9372C)"]);
export const disabledRainbow = createSteppedRainbow(["var(--ds-background-accent-gray-subtle, #8C8F97)", "var(--ds-background-accent-gray-subtle-hovered, #B7B9BE)", "var(--ds-background-accent-gray-subtle-pressed, #DDDEE1)", "var(--ds-background-accent-gray-subtle-hovered, #B7B9BE)"]);
const barStyles = css({
position: 'absolute',
left: 0,
right: 0,
top: "var(--ds-space-200, 16px)",
margin: 'auto',
width: '12px',
height: '3px',
borderRadius: "var(--ds-radius-small, 3px)"
});
const textColorIconWrapper = css({
position: 'relative'
});
const getBackground = (selectedColor, disabled) => {
if (selectedColor) {
return selectedColor;
}
if (disabled) {
return disabledRainbow;
}
return rainbow;
};
export const SteppedRainbowIconDecoration = ({
selectedColor,
disabled,
icon
}) => {
return jsx("div", {
css: textColorIconWrapper
}, icon, jsx("div", {
"data-testid": "toolbar-icon-stepped-rainbow",
style: {
background: getBackground(selectedColor, disabled)
},
css: barStyles
}));
};