@atlaskit/status
Version:
Fabric Status React Components
77 lines (76 loc) • 5.13 kB
JavaScript
/* color-palette.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./color-palette.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import { useThemeObserver } from '@atlaskit/tokens';
import React, { useEffect, useRef, useCallback } from 'react';
import Color from './color';
import { fg } from '@atlaskit/platform-feature-flags';
const paletteLegacy = [['neutral', "var(--ds-background-neutral, #0515240F)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery, #F8EEFE)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon-discovery, #AF59E1)"], ['blue', "var(--ds-background-information, #E9F2FE)", "var(--ds-border-information, #357DE8)", "var(--ds-icon-information, #357DE8)"], ['red', "var(--ds-background-danger, #FFECEB)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon-danger, #C9372C)"], ['yellow', "var(--ds-background-warning, #FFF5DB)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon-warning, #E06C00)"], ['green', "var(--ds-background-success, #EFFFD6)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon-success, #6A9A23)"]];
const paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-pressed, #ADCBFB)", "var(--ds-border-information, #357DE8)", "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-pressed, #BDE97C)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-pressed, #FBD779)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-pressed, #FFB8B2)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-pressed, #E3BDFA)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon, #292A2E)"]];
const paletteTeam26 = [['neutral', "var(--ds-background-neutral, #0515240F)", '#CACBCF', '#63666B', "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-subtler, #CFE1FD)", '#8FB8F6', '#1558BC', "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-subtler, #D3F1A7)", '#B3DF72', '#4C6B1F', "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-subtler, #FCE4A6)", '#FBC828', '#9E4C00', "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-subtler, #FFD5D2)", '#FD9891', '#AE2E24', "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-subtler, #EED7FC)", '#D8A0F7', '#803FA5', "var(--ds-icon, #292A2E)"]];
const getPalette = colorMode => {
if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
const isDark = colorMode === 'dark';
return paletteTeam26.map(([colorValue, backgroundColor, lightBorderColor, darkBorderColor, iconColor]) => [colorValue, backgroundColor, isDark ? darkBorderColor : lightBorderColor, iconColor]);
}
return fg('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
};
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
const colorPaletteWrapperStyles = null;
export default (({
cols = 7,
onClick,
selectedColor,
className,
onHover
}) => {
const {
colorMode
} = useThemeObserver();
const palette = getPalette(colorMode);
const colorRefs = useRef([]);
useEffect(() => {
colorRefs.current = colorRefs.current.slice(0, palette.length);
}, [palette.length]);
const createKeyDownHandler = useCallback(index => e => {
var _colorRefs$current$ne;
let newColorIndex = null;
const nextColor = () => index + 1 > palette.length - 1 ? 0 : index + 1;
const previousColor = () => index - 1 < 0 ? palette.length - 1 : index - 1;
switch (e.key) {
case 'ArrowRight':
case 'ArrowDown':
e.preventDefault();
newColorIndex = nextColor();
break;
case 'ArrowLeft':
case 'ArrowUp':
e.preventDefault();
newColorIndex = previousColor();
break;
}
if (newColorIndex === null) {
return;
}
(_colorRefs$current$ne = colorRefs.current[newColorIndex]) === null || _colorRefs$current$ne === void 0 ? void 0 : _colorRefs$current$ne.focus();
}, [colorRefs, palette.length]);
return /*#__PURE__*/React.createElement("ul", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: ax(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", className]),
style: {
maxWidth: cols * 32
}
}, palette.map(([colorValue, backgroundColor, borderColor, iconColor], i) => /*#__PURE__*/React.createElement(Color, {
key: colorValue,
value: colorValue,
backgroundColor: backgroundColor,
borderColor: borderColor,
iconColor: iconColor,
onClick: onClick,
onHover: onHover,
isSelected: colorValue === selectedColor,
tabIndex: i === 0 ? 0 : -1,
setRef: el => colorRefs.current[i] = el,
onKeyDown: createKeyDownHandler(i)
})));
});