@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
168 lines (162 loc) • 10 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _templateObject;
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
import { css } from '@emotion/react';
import { PanelType } from '@atlaskit/adf-schema';
import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
import { emojiImage, emojiSprite } from '@atlaskit/emoji';
import { B100, B400, B50, B75, G200, G400, G50, G75, N0, N20, N60, P100, P400, P50, P75, R100, R400, R50, R75, T100, T50, T75, Y200, Y400, Y50, Y75 } from '@atlaskit/theme/colors';
var lightPanelColors = {
info: B50,
note: P50,
tip: G50,
success: G50,
warning: Y50,
error: R50
};
export var 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(B400, ")"),
note: "var(--ds-icon-discovery, ".concat(P400, ")"),
tip: "var(--ds-icon-success, ".concat(G400, ")"),
success: "var(--ds-icon-success, ".concat(G400, ")"),
warning: "var(--ds-icon-warning, ".concat(Y400, ")"),
error: "var(--ds-icon-danger, ".concat(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 - akEditorCustomIconSize) / 2;
var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
// TODO: https://product-fabric.atlassian.net/browse/DSP-4066
var panelDarkModeColors = [[B50, darkPanelColors.B1200S], [B75, darkPanelColors.B900], [B100, darkPanelColors.B800S], [N0, darkPanelColors.LightGray], [N20, darkPanelColors.Gray], [N60, darkPanelColors.DarkGray], [T50, darkPanelColors.T1200S], [T75, darkPanelColors.T900], [T100, darkPanelColors.T900S], [G50, darkPanelColors.G1200S], [G75, darkPanelColors.G900], [G200, darkPanelColors.G900S], [Y50, darkPanelColors.Y1200S], [Y75, darkPanelColors.Y900], [Y200, darkPanelColors.Y800S], [R50, darkPanelColors.R1200S], [R75, darkPanelColors.R900], [R100, darkPanelColors.R800S], [P50, darkPanelColors.P1200S], [P75, darkPanelColors.P900], [P100, darkPanelColors.P800S]];
// used for custom panels
export var 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
export var getPanelBackgroundDarkModeColors = panelDarkModeColors.map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
colorName = _ref2[0],
colorValue = _ref2[1];
return getPanelDarkModeCSS(colorName, colorValue);
}).join('\n');
export 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';
export var PanelSharedCssClassName = {
prefix: prefix,
content: "".concat(prefix, "__content"),
icon: "".concat(prefix, "__icon")
};
export var PanelSharedSelectors = {
infoPanel: ".".concat(prefix, "[data-panel-type=").concat(PanelType.INFO, "]"),
notePanel: ".".concat(prefix, "[data-panel-type=").concat(PanelType.NOTE, "]"),
warningPanel: ".".concat(prefix, "[data-panel-type=").concat(PanelType.WARNING, "]"),
errorPanel: ".".concat(prefix, "[data-panel-type=").concat(PanelType.ERROR, "]"),
successPanel: ".".concat(prefix, "[data-panel-type=").concat(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
export var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
return lightPanelColors[panelType] || 'none';
};
export var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
return 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…
export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)", blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
};
export var panelSharedStyles = function panelSharedStyles() {
return css(_defineProperty({}, ".".concat(PanelSharedCssClassName.prefix), panelSharedStylesWithoutPrefix()));
};