@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
177 lines (170 loc) • 11.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getPanelDarkColor = exports.getPanelBackgroundDarkModeColors = exports.darkPanelColors = exports.PanelSharedSelectors = exports.PanelSharedCssClassName = void 0;
exports.getPanelDarkModeCSS = getPanelDarkModeCSS;
exports.panelSharedStylesWithoutPrefix = exports.panelSharedStyles = exports.getPanelTypeBackgroundNoTokens = exports.getPanelTypeBackground = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("@emotion/react");
var _adfSchema = require("@atlaskit/adf-schema");
var _editorPalette = require("@atlaskit/editor-palette");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _consts = require("@atlaskit/editor-shared-styles/consts");
var _emoji = require("@atlaskit/emoji");
var _colors = require("@atlaskit/theme/colors");
var _templateObject;
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
var lightPanelColors = {
info: _colors.B50,
note: _colors.P50,
tip: _colors.G50,
success: _colors.G50,
warning: _colors.Y50,
error: _colors.R50
};
var darkPanelColors = exports.darkPanelColors = {
// standard panels
info: "#0C294F",
error: "#441C13",
warning: "#413001",
tip: "#052E21",
success: "#052E21",
note: "#282249",
// Reds
R900: '#601D16',
// Red Saturated
R100S: "#FFEFEB",
R300S: "#FFB5A3",
R500S: "#FF6B47",
R800S: "#C4320E",
R1200S: "#441C13",
// Yellows
Y900: '#533F04',
// Yellow Saturated
Y100S: "#FFF3D1",
Y300S: "#FFDC7A",
Y500S: "#FFC933",
Y800S: "#D8A003",
Y1200S: "#413001",
// Greens
G900: '#164B35',
// Green Saturated
G100S: "#E3FCF0",
G300S: "#95EEC5",
G400S: "#60DCA8",
G900S: "#086848",
G1200S: "#052E21",
// Blues
B900: '#09326C',
// Saturated Blues
B100S: '#E5F0FF',
B300S: '#A3C9FF',
B500S: '#4794FF',
B800S: '#0055CC',
B1200S: '#0C294F',
// Purples
P900: "#352C63",
// Purple Saturated
P100S: "#EEEBFF",
P300S: "#CCC3FE",
P500S: "#A292F7",
P800S: "#5E49CA",
P1200S: "#282249",
// Teals
T900: '#1D474C',
// Teal Saturated
T100S: "#DBFAFF",
T300S: "#78EBFC",
T400S: "#3AD6EE",
T900S: "#056270",
T1200S: "#0B3037",
// Dark Mode Alpha
DarkGray: '#161A1D',
Gray: '#2C333A',
LightGray: '#5A6977',
TextColor: '#D9DDE3'
};
var lightIconColor = {
info: "var(--ds-icon-information, ".concat(_colors.B400, ")"),
note: "var(--ds-icon-discovery, ".concat(_colors.P400, ")"),
tip: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
success: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
warning: "var(--ds-icon-warning, ".concat(_colors.Y400, ")"),
error: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
};
// New custom icons are a little smaller than predefined icons.
// To fix alignment issues with custom icons, vertical alignment is updated.
var panelEmojiSpriteVerticalAlignment = -(8 * 3 - _consts.akEditorCustomIconSize) / 2;
var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
// TODO: https://product-fabric.atlassian.net/browse/DSP-4066
var panelDarkModeColors = [[_colors.B50, darkPanelColors.B1200S], [_colors.B75, darkPanelColors.B900], [_colors.B100, darkPanelColors.B800S], [_colors.N0, darkPanelColors.LightGray], [_colors.N20, darkPanelColors.Gray], [_colors.N60, darkPanelColors.DarkGray], [_colors.T50, darkPanelColors.T1200S], [_colors.T75, darkPanelColors.T900], [_colors.T100, darkPanelColors.T900S], [_colors.G50, darkPanelColors.G1200S], [_colors.G75, darkPanelColors.G900], [_colors.G200, darkPanelColors.G900S], [_colors.Y50, darkPanelColors.Y1200S], [_colors.Y75, darkPanelColors.Y900], [_colors.Y200, darkPanelColors.Y800S], [_colors.R50, darkPanelColors.R1200S], [_colors.R75, darkPanelColors.R900], [_colors.R100, darkPanelColors.R800S], [_colors.P50, darkPanelColors.P1200S], [_colors.P75, darkPanelColors.P900], [_colors.P100, darkPanelColors.P800S]];
// used for custom panels
var getPanelDarkColor = exports.getPanelDarkColor = function getPanelDarkColor(panelColor) {
var colorObject = panelDarkModeColors.find(function (color) {
return color[0] === panelColor || color[1] === panelColor;
});
return colorObject ? colorObject[1] : darkPanelColors.B1200S;
};
// used for custom panels
var getPanelBackgroundDarkModeColors = exports.getPanelBackgroundDarkModeColors = panelDarkModeColors.map(function (_ref) {
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
colorName = _ref2[0],
colorValue = _ref2[1];
return getPanelDarkModeCSS(colorName, colorValue);
}).join('\n');
function getPanelDarkModeCSS(colorName, colorValue) {
return "\n &[data-panel-color=\"".concat(colorName, "\"] {\n background-color: ").concat(colorValue, " !important; // !important to override default style color\n color: ").concat(darkPanelColors.TextColor, ";\n }\n ");
}
var prefix = 'ak-editor-panel';
var PanelSharedCssClassName = exports.PanelSharedCssClassName = {
prefix: prefix,
content: "".concat(prefix, "__content"),
icon: "".concat(prefix, "__icon")
};
var PanelSharedSelectors = exports.PanelSharedSelectors = {
infoPanel: ".".concat(prefix, "[data-panel-type=").concat(_adfSchema.PanelType.INFO, "]"),
notePanel: ".".concat(prefix, "[data-panel-type=").concat(_adfSchema.PanelType.NOTE, "]"),
warningPanel: ".".concat(prefix, "[data-panel-type=").concat(_adfSchema.PanelType.WARNING, "]"),
errorPanel: ".".concat(prefix, "[data-panel-type=").concat(_adfSchema.PanelType.ERROR, "]"),
successPanel: ".".concat(prefix, "[data-panel-type=").concat(_adfSchema.PanelType.SUCCESS, "]"),
noteButton: "button[aria-label=\"Note\"]",
warningButton: "button[aria-label=\"Warning\"]",
removeButton: "button[aria-label=\"Remove\"]",
colorPalette: "[aria-label=\"Background color\"]",
selectedColor: "[aria-label=\"Light green\"]",
removeEmojiIcon: "[aria-label=\"Remove emoji\"]",
emojiIcon: "[aria-label=\"editor-add-emoji\"]",
selectedEmoji: "[aria-label=\":grinning:\"]",
addYourOwnEmoji: "#add-custom-emoji",
emojiNameInCustomEmoji: "[aria-label=\"Enter a name for the new emoji\"]",
title: "#editor-title",
emojiPopup: "[aria-label=\"Popup\"]",
searchEmoji: "[aria-label=\"Emoji name\"]",
orangeWarningIcon: "[aria-label=\":warning:\"]",
yellowWarningIcon: "[aria-label=\":warning:\"] span:nth-child(1)",
copyButton: "button[aria-label=\"Copy\"]"
};
var iconDynamicStyles = function iconDynamicStyles(panelType) {
return "color: ".concat(lightIconColor[panelType], ";");
};
// Provides the color without tokens, used when converting to a custom panel
var getPanelTypeBackgroundNoTokens = exports.getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
return lightPanelColors[panelType] || 'none';
};
var getPanelTypeBackground = exports.getPanelTypeBackground = function getPanelTypeBackground(panelType) {
return (0, _editorPalette.hexToEditorBackgroundPaletteColor)(lightPanelColors[panelType]) || 'none';
};
var mainDynamicStyles = function mainDynamicStyles(panelType) {
return "\n background-color: ".concat(getPanelTypeBackground(panelType), ";\n color: inherit;\n ");
};
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Safe to autofix with a tiny tweak to `mainDynamicStyles` being an object, but holding off…
var panelSharedStylesWithoutPrefix = exports.panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n border-radius: ", ";\n margin: ", " 0 0;\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n min-width: ", "px;\n display: flex;\n position: relative;\n align-items: normal;\n word-break: break-word;\n\n ", "\n\n .", " {\n flex-shrink: 0;\n height: ", ";\n width: ", ";\n box-sizing: content-box;\n padding-right: ", ";\n text-align: center;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n margin-top: 0.1em;\n ", "\n\n > span {\n vertical-align: middle;\n display: inline-flex;\n }\n\n .", " {\n vertical-align: ", "px;\n }\n\n .", " {\n vertical-align: ", "px;\n\n // Vertical align only works for inline-block elements in Firefox\n @-moz-document url-prefix() {\n img {\n display: inline-block;\n }\n }\n }\n }\n\n .ak-editor-panel__content {\n margin: ", " 0 ", ";\n flex: 1 0 0;\n /*\n https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n */\n min-width: 0;\n }\n\n &[data-panel-type='", "'] {\n ", "\n\n .", " {\n ", "\n }\n }\n\n &[data-panel-type='", "'] {\n ", "\n\n .", " {\n ", "\n }\n }\n\n &[data-panel-type='", "'] {\n ", "\n\n .", " {\n ", "\n }\n }\n\n &[data-panel-type='", "'] {\n ", "\n\n .", " {\n ", "\n }\n }\n\n &[data-panel-type='", "'] {\n ", "\n\n .", " {\n ", "\n }\n }\n"])), "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(_adfSchema.PanelType.INFO), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS));
};
var panelSharedStyles = exports.panelSharedStyles = function panelSharedStyles() {
return (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(PanelSharedCssClassName.prefix), panelSharedStylesWithoutPrefix()));
};