@atlaskit/editor-common/dist/esm/styles/shared/panel.js

A package that contains common classes and components for editor and renderer

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject;
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
var lightPanelColors = {
  info: '#DEEBFF',
  note: '#EAE6FF',
  tip: '#E3FCEF',
  success: '#E3FCEF',
  warning: '#FFFAE6',
  error: '#FFEBE6'
};
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, #1D7AFC)",
  note: "var(--ds-icon-discovery, #8270DB)",
  tip: "var(--ds-icon-success, #22A06B)",
  success: "var(--ds-icon-success, #22A06B)",
  warning: "var(--ds-icon-warning, #E56910)",
  error: "var(--ds-icon-danger, #C9372C)"
};

// 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;
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"),
  noIcon: "".concat(prefix, "__no-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\tborder-radius: ", ";\n\tmargin: ", " 0 0;\n\tpadding-top: ", ";\n\tpadding-right: ", ";\n\tpadding-bottom: ", ";\n\tpadding-left: ", ";\n\tmin-width: ", "px;\n\tdisplay: flex;\n\tposition: relative;\n\talign-items: normal;\n\tword-break: break-word;\n\n\t", "\n\n\t.", " {\n\t\tflex-shrink: 0;\n\t\theight: ", ";\n\t\twidth: ", ";\n\t\tbox-sizing: content-box;\n\t\tpadding-right: ", ";\n\t\ttext-align: center;\n\t\tuser-select: none;\n\t\t-moz-user-select: none;\n\t\t-webkit-user-select: none;\n\t\t-ms-user-select: none;\n\t\tmargin-top: 0.1em;\n\t\t", "\n\n\t\t> span {\n\t\t\tvertical-align: middle;\n\t\t\tdisplay: inline-flex;\n\t\t}\n\n\t\t.", " {\n\t\t\tvertical-align: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tvertical-align: ", "px;\n\n\t\t\t// Vertical align only works for inline-block elements in Firefox\n\t\t\t@-moz-document url-prefix() {\n\t\t\t\timg {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.ak-editor-panel__content {\n\t\tmargin: ", " 0 ", ";\n\t\tflex: 1 0 0;\n\t\t/*\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\t\tmin-width: 0;\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\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), editorExperiment('nested-dnd', true) ? "&.".concat(PanelSharedCssClassName.noIcon, " {\n\t\t\tpadding-right: ", "var(--ds-space-150, 12px)", ";\n\t\t\tpadding-left: ", "var(--ds-space-150, 12px)", ";\n\t\t}") : '');
};
export var panelSharedStyles = function panelSharedStyles() {
  return css(_defineProperty({}, ".".concat(PanelSharedCssClassName.prefix), panelSharedStylesWithoutPrefix()));
};