@atlaskit/status
Version:
Fabric Status React Components
109 lines (107 loc) • 7.08 kB
JavaScript
/* color-palette.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./color-palette.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _tokens = require("@atlaskit/tokens");
var _react = _interopRequireWildcard(require("react"));
var _color = _interopRequireDefault(require("./color"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var 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)"]];
var 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)"]];
var 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)"]];
var getPalette = function getPalette(colorMode) {
if ((0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')) {
var isDark = colorMode === 'dark';
return paletteTeam26.map(function (_ref) {
var _ref2 = (0, _slicedToArray2.default)(_ref, 5),
colorValue = _ref2[0],
backgroundColor = _ref2[1],
lightBorderColor = _ref2[2],
darkBorderColor = _ref2[3],
iconColor = _ref2[4];
return [colorValue, backgroundColor, isDark ? darkBorderColor : lightBorderColor, iconColor];
});
}
return (0, _platformFeatureFlags.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
var colorPaletteWrapperStyles = null;
var _default = exports.default = function _default(_ref3) {
var _ref3$cols = _ref3.cols,
cols = _ref3$cols === void 0 ? 7 : _ref3$cols,
onClick = _ref3.onClick,
selectedColor = _ref3.selectedColor,
className = _ref3.className,
onHover = _ref3.onHover;
var _useThemeObserver = (0, _tokens.useThemeObserver)(),
colorMode = _useThemeObserver.colorMode;
var palette = getPalette(colorMode);
var colorRefs = (0, _react.useRef)([]);
(0, _react.useEffect)(function () {
colorRefs.current = colorRefs.current.slice(0, palette.length);
}, [palette.length]);
var createKeyDownHandler = (0, _react.useCallback)(function (index) {
return function (e) {
var _colorRefs$current$ne;
var newColorIndex = null;
var nextColor = function nextColor() {
return index + 1 > palette.length - 1 ? 0 : index + 1;
};
var previousColor = function previousColor() {
return 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 || _colorRefs$current$ne.focus();
};
}, [colorRefs, palette.length]);
return /*#__PURE__*/_react.default.createElement("ul", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: (0, _runtime.ax)(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", className]),
style: {
maxWidth: cols * 32
}
}, palette.map(function (_ref4, i) {
var _ref5 = (0, _slicedToArray2.default)(_ref4, 4),
colorValue = _ref5[0],
backgroundColor = _ref5[1],
borderColor = _ref5[2],
iconColor = _ref5[3];
return /*#__PURE__*/_react.default.createElement(_color.default, {
key: colorValue,
value: colorValue,
backgroundColor: backgroundColor,
borderColor: borderColor,
iconColor: iconColor,
onClick: onClick,
onHover: onHover,
isSelected: colorValue === selectedColor,
tabIndex: i === 0 ? 0 : -1,
setRef: function setRef(el) {
return colorRefs.current[i] = el;
},
onKeyDown: createKeyDownHandler(i)
});
}));
};