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

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

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _templateObject;
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css } from '@emotion/react';
import { bulletListSelector, orderedListSelector } from '@atlaskit/adf-schema';
import { browser } from '../../utils/browser';
export var listItemCounterPadding = 24;
var CSS_VAR_NAMES = /*#__PURE__*/function (CSS_VAR_NAMES) {
  CSS_VAR_NAMES["ITEM_COUNTER_PADDING"] = "--ed--list--item-counter--padding";
  return CSS_VAR_NAMES;
}(CSS_VAR_NAMES || {});
var getItemCounterLeftPadding = function getItemCounterLeftPadding(itemCounterDigitsSize) {
  // Previous padding-left was approximately 24px. We approximate that
  // same value using "ch" units (which represent the width of a "0" digit
  // character). We use "ch" so that this computed padding can now grow if
  //  the font-size ever enlarges.
  var paddingLeft = "2.385ch";
  if (itemCounterDigitsSize >= 3) {
    // When there are 3 or more digits, we use a combination of "ch" units and
    // pixel values so that while the computed padding grows if font-size ever
    // enlarges, it doesn't over-scale with each digit (because of the fixed pixel
    // portion of the computed value). This way, very large item counters will not
    // become overly left-padded.
    var fixedBasePx = 2;
    paddingLeft = "calc(".concat(itemCounterDigitsSize + 1, "ch - ").concat(fixedBasePx, "px)");
  }
  return paddingLeft;
};
var stringifyStyle = function stringifyStyle(style) {
  return Object.entries(style).reduce(function (str, _ref) {
    var _ref2 = _slicedToArray(_ref, 2),
      key = _ref2[0],
      value = _ref2[1];
    return "".concat(str).concat(key, ":").concat(value, ";");
  }, "");
};
export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
) {
  var style = _defineProperty({}, CSS_VAR_NAMES.ITEM_COUNTER_PADDING, getItemCounterLeftPadding(itemCounterDigitsSize));
  if (styleFormat === 'string') {
    return stringifyStyle(style);
  }
  return style;
}

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766, There is some "flow-root" hack that is not actually valid css.  Do note, this might not even work in Compiled (or Emotion) due to the way tagged template expressions are parsed…
export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t/* =============== INDENTATION SPACING ========= */\n\n\tul,\n\tol {\n\t\tbox-sizing: border-box;\n\t\tpadding-left: var(", ", ", "px);\n\n\t\t/*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n\t\tli p:empty,\n\t\tli p > span:empty {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", ", ", " {\n\t\t/*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n\t\t// For older browsers the do not support flow-root.\n\t\t/* stylelint-disable declaration-block-no-duplicate-properties */\n\t\tdisplay: table;\n\t\tdisplay: flow-root;\n\t\t/* stylelint-enable declaration-block-no-duplicate-properties */\n\t}\n\n\t/* =============== INDENTATION AESTHETICS ========= */\n\n\t/**\n        We support nested lists up to six levels deep.\n    **/\n\n\t/* LEGACY LISTS */\n\n\tul,\n\tul ul ul ul {\n\t\tlist-style-type: disc;\n\t}\n\n\tul ul,\n\tul ul ul ul ul {\n\t\tlist-style-type: circle;\n\t}\n\n\tul ul ul,\n\tul ul ul ul ul ul {\n\t\tlist-style-type: square;\n\t}\n\n\tol,\n\tol ol ol ol {\n\t\tlist-style-type: decimal;\n\t}\n\tol ol,\n\tol ol ol ol ol {\n\t\tlist-style-type: lower-alpha;\n\t}\n\tol ol ol,\n\tol ol ol ol ol ol {\n\t\tlist-style-type: lower-roman;\n\t}\n\n\t/* PREDICTABLE LISTS */\n\n\tol[data-indent-level='1'],\n\tol[data-indent-level='4'] {\n\t\tlist-style-type: decimal;\n\t}\n\n\tol[data-indent-level='2'],\n\tol[data-indent-level='5'] {\n\t\tlist-style-type: lower-alpha;\n\t}\n\n\tol[data-indent-level='3'],\n\tol[data-indent-level='6'] {\n\t\tlist-style-type: lower-roman;\n\t}\n\n\tul[data-indent-level='1'],\n\tul[data-indent-level='4'] {\n\t\tlist-style-type: disc;\n\t}\n\n\tul[data-indent-level='2'],\n\tul[data-indent-level='5'] {\n\t\tlist-style-type: circle;\n\t}\n\n\tul[data-indent-level='3'],\n\tul[data-indent-level='6'] {\n\t\tlist-style-type: square;\n\t}\n"])), CSS_VAR_NAMES.ITEM_COUNTER_PADDING, listItemCounterPadding, browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);