@atlaskit/adf-schema 35.10.0 → 35.12.0

package/dist/esm/schema/create-schema.js

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Schema } from '@atlaskit/editor-prosemirror/model';
 import { COLOR, FONT_STYLE, SEARCH_QUERY, LINK } from './groups';
-import { link, em, strong, textColor, strike, subsup, underline, code, typeAheadQuery, confluenceInlineComment, breakout, alignment, indentation, annotation, unsupportedMark, unsupportedNodeAttribute, dataConsumer, fragment, border } from './marks';
+import { link, em, strong, textColor, strike, subsup, underline, code, typeAheadQuery, confluenceInlineComment, breakout, alignment, indentation, annotation, unsupportedMark, unsupportedNodeAttribute, dataConsumer, fragment, border, backgroundColor } from './marks';
 import { confluenceJiraIssue, confluenceUnsupportedBlock, confluenceUnsupportedInline, doc, paragraph, text, bulletList, orderedListWithOrder, listItemWithTask, heading, blockquoteWithList, codeBlock, extendedPanel, rule, image, mention, media, mediaInline, mediaSingleFull, mediaGroup, hardBreak, emoji, table, tableCell, tableHeader, tableRow, decisionList, decisionItem, taskList, taskItem, unknownBlock, extension, inlineExtension, bodiedExtension, multiBodiedExtension, extensionFrame, date, placeholder, layoutSection, layoutColumn, inlineCard, blockCard, unsupportedBlock, unsupportedInline, status, expand, extendedNestedExpand, embedCard, caption } from './nodes';
 function addItems(builtInItems, config) {
   var customSpecs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -253,6 +253,9 @@ var marksInOrder = [{
 }, {
   name: 'border',
   spec: border
+}, {
+  name: 'backgroundColor',
+  spec: backgroundColor
 }, {
   name: 'unsupportedMark',
   spec: unsupportedMark

package/dist/esm/schema/index.js

@@ -1,6 +1,6 @@
 export { PanelType, blockCard, blockquote, blockquoteWithList, bodiedExtension, bulletList, bulletListSelector, caption, codeBlock, codeBlockToJSON, confluenceJiraIssue, confluenceUnsupportedBlock, confluenceUnsupportedInline, copyPrivateMediaAttributes, date, decisionItem, decisionList, decisionListSelector, doc, embedCard, emoji, expand, expandToJSON, extension, hardBreak, heading, image, inlineCard, inlineExtension, layoutColumn, layoutSection, layoutSectionWithSingleColumn, listItem, listItemWithTask, media, mediaGroup, mediaSingle, mediaSingleSpec, mediaInline, mediaSingleWithCaption, mediaSingleWithWidthType, mediaSingleFull, mediaSingleToJSON, mediaToJSON, mention, mentionToJSON, nestedExpand, extendedNestedExpand, orderedList, orderedListSelector, orderedListWithOrder, panel, extendedPanel, paragraph, placeholder, rule, getCellAttrs, getCellDomAttrs, status, table, tableStage0, tableWithCustomWidth, tableBackgroundBorderColor, tableBackgroundColorNames, tableBackgroundColorPalette, tableCell, tableCellContentDomSelector, tableCellContentWrapperSelector, tableCellSelector, tableHeader, tableHeaderSelector, tablePrefixSelector, tableRow, tableToJSON, taskItem, taskList, taskListSelector, text, toJSONTableCell, toJSONTableHeader, unknownBlock, unsupportedBlock, unsupportedInline, extensionFrame, multiBodiedExtension } from './nodes';
 export { AnnotationTypes, alignment, alignmentPositionMap, annotation, breakout, code, colorPalette, /** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
-colorPaletteExtended, confluenceInlineComment, dataConsumer, dataConsumerToJSON, em, fragment, fragmentToJSON, indentation, link, linkToJSON, strike, strong, subsup, textColor, typeAheadQuery, underline, buildAnnotationMarkDataAttributes, AnnotationMarkStates, unsupportedMark, unsupportedNodeAttribute, border, borderColorPalette } from './marks';
+colorPaletteExtended, confluenceInlineComment, dataConsumer, dataConsumerToJSON, em, fragment, fragmentToJSON, indentation, link, linkToJSON, strike, strong, subsup, textColor, typeAheadQuery, underline, buildAnnotationMarkDataAttributes, AnnotationMarkStates, unsupportedMark, unsupportedNodeAttribute, border, borderColorPalette, backgroundColor, backgroundColorPalette } from './marks';
 export { unsupportedNodeTypesForMediaCards } from './unsupported';
 export { inlineNodes } from './inline-nodes';
 export { sanitizeNodes, createSchema } from './create-schema';

package/dist/esm/schema/marks/background-color.js

@@ -0,0 +1,111 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { hexToEditorTextBackgroundPaletteColor } from '../../utils/editor-palette';
+import { COLOR } from '../groups';
+import { rgbToHex, L200, T200, P200, M200, Neutral300, O200 } from '../../utils/colors';
+import { getGlobalTheme } from './text-color';
+import { getDarkModeLCHColor } from '../../utils/lch-color-inversion';
+
+/**
+ * @name backgroundColor_mark
+ */
+
+var colorArrayPalette = [[Neutral300, 'Gray'],
+// token: color.background.accent.gray.subtler
+[T200, 'Teal'],
+// token: color.background.accent.teal.subtler
+[L200, 'Lime'],
+// token: color.background.accent.lime.subtler
+[O200, 'Orange'],
+// token: color.background.accent.orange.subtler
+[M200, 'Magenta'],
+// token: color.background.accent.magenta.subtler
+[P200, 'Purple'] // token: color.background.accent.purple.subtler
+];
+
+// @see https://product-fabric.atlassian.net/wiki/spaces/E/pages/55979455/Colour+picker+decisions#Colourpickerdecisions-Visualdesigndecisions
+export var backgroundColorPalette = new Map();
+colorArrayPalette.forEach(function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    color = _ref2[0],
+    label = _ref2[1];
+  return backgroundColorPalette.set(color.toLowerCase(), label);
+});
+export var backgroundColor = {
+  attrs: {
+    color: {}
+  },
+  inclusive: true,
+  group: COLOR,
+  parseDOM: [{
+    style: 'background-color',
+    getAttrs: function getAttrs(maybeValue) {
+      var value = maybeValue;
+      var hexColor;
+      if (value.match(/^rgb/i)) {
+        hexColor = rgbToHex(value);
+      } else if (value[0] === '#') {
+        hexColor = value.toLowerCase();
+      }
+      // else handle other colour formats
+      return hexColor && backgroundColorPalette.has(hexColor) ? {
+        color: hexColor
+      } : false;
+    }
+  },
+  // This rule ensures when loading from a renderer or editor where the
+  // presented text color does not match the stored hex color -- that the
+  // text color is preserved.
+  //
+  // This is used to support the work-around that converts the hex color to
+  // a design system token to enable light / dark mode (through a CSS variable --custom-palette-color)
+  {
+    tag: '.fabric-background-color-mark',
+    getAttrs: function getAttrs(maybeElement) {
+      if (!(maybeElement instanceof HTMLElement)) {
+        return false;
+      }
+      var hexColor = maybeElement.dataset.backgroundCustomColor;
+      return hexColor && backgroundColorPalette.has(hexColor) ? {
+        color: hexColor
+      } : false;
+    }
+  }],
+  toDOM: function toDOM(mark) {
+    var paletteColorValue;
+    /**
+     * Documents can contain custom colors when content has been migrated from the old editor, or created via APIs.
+     *
+     * This behaviour predates the introduction of dark mode.
+     *
+     * Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
+     *
+     * This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
+     *
+     * This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
+     * how we detect text colors copied from external editor sources. Where we load the background color from a
+     * separate attribute (data-text-custom-color), instead of the inline style.
+     *
+     * See the following document for more details on this behaviour
+     * https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
+     */
+    var tokenColor = hexToEditorTextBackgroundPaletteColor(mark.attrs.color);
+    if (tokenColor) {
+      paletteColorValue = tokenColor;
+    } else {
+      if (getGlobalTheme().colorMode === 'dark') {
+        // if we have a custom color, we need to check if we are in dark mode
+        paletteColorValue = getDarkModeLCHColor(mark.attrs.color);
+      } else {
+        // if we are in light mode, we can just set the color
+        paletteColorValue = mark.attrs.color;
+      }
+    }
+    return ['span', _defineProperty({
+      class: 'fabric-background-color-mark',
+      // Editor common has a common style which uses this css variable as the value for
+      // the color property using the `fabric-text-background-color-mark` selector applied above.
+      style: "--custom-palette-color: ".concat(paletteColorValue)
+    }, 'data-background-custom-color', mark.attrs.color)];
+  }
+};

package/dist/esm/schema/marks/index.js

@@ -16,4 +16,5 @@ export { unsupportedMark } from './unsupported-mark';
 export { unsupportedNodeAttribute } from './unsupported-node-attributes';
 export { dataConsumer, toJSON as dataConsumerToJSON } from './data-consumer';
 export { fragment, toJSON as fragmentToJSON } from './fragment';
-export { border, borderColorPalette } from './border';
+export { border, borderColorPalette } from './border';
+export { backgroundColor, backgroundColorPalette } from './background-color';

package/dist/esm/schema/marks/text-color.js

@@ -73,7 +73,7 @@ export var setGlobalTheme = function setGlobalTheme(theme) {
 // This is a minimal duplication of the method from @atlaskit/tokens
 // to minimise the number of dependencies required as these changes are expected
 // to be patched onto CR8.
-var getGlobalTheme = function getGlobalTheme() {
+export var getGlobalTheme = function getGlobalTheme() {
   // This should only be hit during tests.
   //
   // At time of writing Jest mocks are not working in this repository.
@@ -155,7 +155,7 @@ export var textColor = {
      */
     var tokenColor = hexToEditorTextPaletteColor(mark.attrs.color);
     if (tokenColor) {
-      paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
+      paletteColorValue = tokenColor;
     } else {
       if (getGlobalTheme().colorMode === 'dark') {
         // if we have a custom color, we need to check if we are in dark mode

package/dist/esm/schema/nodes/mention.js

@@ -29,9 +29,6 @@ export var mention = {
     userType: {
       default: null
     },
-    /**
-     * @stage 0
-     */
     localId: {
       default: null
     }

package/dist/esm/schema/nodes/paragraph.js

@@ -28,7 +28,7 @@ export var paragraph = {
   selectable: false,
   content: 'inline*',
   group: 'block',
-  marks: 'strong code em link border strike subsup textColor typeAheadQuery underline confluenceInlineComment action annotation unsupportedMark unsupportedNodeAttribute dataConsumer fragment',
+  marks: 'strong code em link border strike subsup textColor typeAheadQuery underline confluenceInlineComment action annotation unsupportedMark unsupportedNodeAttribute dataConsumer fragment backgroundColor',
   parseDOM: [{
     tag: 'p'
   }],

package/dist/esm/utils/colors.js

@@ -30,6 +30,7 @@ export var B75 = '#B3D4FF';
 export var B100 = '#4C9AFF';
 export var B400 = '#0052CC';
 export var B500 = '#0747A6';
+export var L200 = '#D3F1A7';
 export var N0 = '#FFFFFF';
 export var N20 = '#F4F5F7';
 export var N30 = '#EBECF0';
@@ -40,20 +41,25 @@ export var N80 = '#97A0AF';
 export var N90 = '#8993A4';
 export var N200 = '#6B778C';
 export var N300 = '#5E6C84';
+export var Neutral300 = '#DCDFE4';
 export var N300A = '#091E4224';
 export var N500 = '#42526E';
 export var N600 = '#758195';
 export var N800 = '#172B4D';
 export var N1000 = '#172B4D';
+export var M200 = '#FDD0EC';
+export var O200 = '#FEDEC8';
 export var P50 = '#EAE6FF';
 export var P75 = '#C0B6F2';
 export var P100 = '#998DD9';
+export var P200 = '#DFD8FD';
 export var P300 = '#6554C0';
 export var P400 = '#5243AA';
 export var P500 = '#403294';
 export var T50 = '#E6FCFF';
 export var T75 = '#B3F5FF';
 export var T100 = '#79E2F2';
+export var T200 = '#C6EDFB';
 export var T300 = '#00B8D9';
 export var T500 = '#008DA6';
 

package/dist/esm/utils/editor-palette.js

@@ -96,6 +96,42 @@ export var editorTextPalette = {
   '#172B4D': 'var(--ds-text, #172B4D)'
 };
 
+/**
+ * This takes an ADF hex color and returns a matching text background palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#0747A6');
+ * //     ^? const cssValue: string
+ * <span style={{backgroundColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+export function hexToEditorTextBackgroundPaletteColor(hexColor) {
+  // Ts ignore was used to allow use of conditional return type
+  // (preferring better type on consumption over safety in implementation)
+  return textBackgroundColorPalette[hexColor.toUpperCase()];
+}
+export var textBackgroundColorPalette = {
+  /** Gray - light */
+  '#DCDFE4': 'var(--ds-background-accent-gray-subtler, #DCDFE4)',
+  /** Teal - light */
+  '#C6EDFB': 'var(--ds-background-accent-teal-subtler, #C6EDFB)',
+  /** Lime - light */
+  '#D3F1A7': 'var(--ds-background-accent-lime-subtler, #D3F1A7)',
+  /** Orange - light */
+  '#FEDEC8': 'var(--ds-background-accent-orange-subtler, #FEDEC8)',
+  /** Magenta - light */
+  '#FDD0EC': 'var(--ds-background-accent-magenta-subtler, #FDD0EC)',
+  /** Purple - light */
+  '#DFD8FD': 'var(--ds-background-accent-purple-subtler, #DFD8FD)'
+};
 /**
  * Takes an ADF hex color and returns the rendered hex code for the associated background palette design token using getTokenValue.
  * If the provided color does not exist in the Editor color palette, this function returns undefined.

package/dist/json-schema/v1/full.json

@@ -492,6 +492,34 @@
       ],
       "additionalProperties": false
     },
+    "backgroundColor_mark": {
+      "type": "object",
+      "properties": {
+        "type": {
+          "enum": [
+            "backgroundColor"
+          ]
+        },
+        "attrs": {
+          "type": "object",
+          "properties": {
+            "color": {
+              "type": "string",
+              "pattern": "^#[0-9a-fA-F]{6}$"
+            }
+          },
+          "required": [
+            "color"
+          ],
+          "additionalProperties": false
+        }
+      },
+      "required": [
+        "type",
+        "attrs"
+      ],
+      "additionalProperties": false
+    },
     "hardBreak_node": {
       "type": "object",
       "properties": {
@@ -1106,6 +1134,9 @@
                   },
                   {
                     "$ref": "#/definitions/annotation_mark"
+                  },
+                  {
+                    "$ref": "#/definitions/backgroundColor_mark"
                   }
                 ]
               }

package/dist/json-schema/v1/stage-0.json

@@ -492,6 +492,34 @@
       ],
       "additionalProperties": false
     },
+    "backgroundColor_mark": {
+      "type": "object",
+      "properties": {
+        "type": {
+          "enum": [
+            "backgroundColor"
+          ]
+        },
+        "attrs": {
+          "type": "object",
+          "properties": {
+            "color": {
+              "type": "string",
+              "pattern": "^#[0-9a-fA-F]{6}$"
+            }
+          },
+          "required": [
+            "color"
+          ],
+          "additionalProperties": false
+        }
+      },
+      "required": [
+        "type",
+        "attrs"
+      ],
+      "additionalProperties": false
+    },
     "hardBreak_node": {
       "type": "object",
       "properties": {
@@ -1112,6 +1140,9 @@
                   },
                   {
                     "$ref": "#/definitions/annotation_mark"
+                  },
+                  {
+                    "$ref": "#/definitions/backgroundColor_mark"
                   }
                 ]
               }

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 export { PanelType, AnnotationTypes, alignment, alignmentPositionMap, annotation, blockCard, blockquote, blockquoteWithList, bodiedExtension, breakout, bulletList, bulletListSelector, caption, code, codeBlock, codeBlockToJSON, colorPalette, 
 /** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
-colorPaletteExtended, confluenceInlineComment, confluenceJiraIssue, confluenceUnsupportedBlock, confluenceUnsupportedInline, copyPrivateMediaAttributes, createSchema, dataConsumer, dataConsumerToJSON, date, decisionItem, decisionList, decisionListSelector, doc, em, embedCard, emoji, expand, expandToJSON, extension, fragment, fragmentToJSON, hardBreak, heading, image, indentation, inlineCard, inlineExtension, inlineNodes, layoutColumn, layoutSection, link, linkToJSON, listItem, listItemWithTask, media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaSingleWithWidthType, mediaSingleFull, mediaSingleSpec, mediaInline, mediaSingleToJSON, mediaToJSON, mention, mentionToJSON, nestedExpand, extendedNestedExpand, orderedList, orderedListSelector, orderedListWithOrder, panel, extendedPanel, paragraph, placeholder, rule, sanitizeNodes, getCellAttrs, getCellDomAttrs, status, strike, strong, subsup, table, tableStage0, tableWithCustomWidth, tableBackgroundBorderColor, tableBackgroundColorNames, tableBackgroundColorPalette, tableCell, tableCellContentDomSelector, tableCellContentWrapperSelector, tableCellSelector, tableHeader, tableHeaderSelector, tablePrefixSelector, tableRow, tableToJSON, taskItem, taskList, taskListSelector, text, textColor, toJSONTableCell, toJSONTableHeader, typeAheadQuery, underline, unknownBlock, unsupportedBlock, unsupportedInline, unsupportedNodeTypesForMediaCards, buildAnnotationMarkDataAttributes, AnnotationMarkStates, unsupportedMark, unsupportedNodeAttribute, border, borderColorPalette, extensionFrame, multiBodiedExtension, } from './schema';
-export type { AlignmentAttributes, AlignmentMarkDefinition, AnnotationMarkAttributes, AnnotationMarkDefinition, BlockCardDefinition, BlockContent, BlockQuoteDefinition, BodiedExtensionDefinition, BreakoutMarkAttrs, BreakoutMarkDefinition, BulletListDefinition, CaptionDefinition, CardAttributes, CellAttributes, CodeBlockAttrs, CodeBlockBaseDefinition, CodeBlockDefinition, CodeBlockWithMarksDefinition, CodeDefinition, DatasourceAttributes, DatasourceAttributeProperties, DataConsumerAttributes, DataConsumerDefinition, DataType, DateDefinition, DecisionItemDefinition, DecisionListDefinition, DocNode, EmbedCardDefinition, EmbedCardAttributes, EmDefinition, EmojiAttributes, EmojiDefinition, ExpandDefinition, ExtensionDefinition, ExtensionLayout, ExternalMediaAttributes, FragmentAttributes, FragmentDefinition, HardBreakDefinition, HeadingBaseDefinition, HeadingDefinition, HeadingWithAlignmentDefinition, HeadingWithIndentationDefinition, HeadingWithMarksDefinition, IndentationMarkAttributes, IndentationMarkDefinition, Inline, InlineAtomic, InlineCardDefinition, InlineCode, InlineExtensionDefinition, InlineFormattedText, InlineLinkText, LayoutColumnDefinition, LayoutSectionDefinition, LayoutSectionFullDefinition, LayoutSectionWithSingleColumnDefinition, LinkAttributes, LinkDefinition, ListItemArray, ListItemDefinition, MarksObject, MediaADFAttrs, MediaAttributes, MediaInlineAttributes, MediaInlineDefinition, MediaBaseAttributes, MediaDefinition, MediaDisplayType, MediaGroupDefinition, MediaSingleDefinition, MediaType, MentionAttributes, MentionDefinition, MentionUserType, NestedExpandContent, NestedExpandDefinition, NoMark, NonNestableBlockContent, OrderedListDefinition, PanelAttributes, PanelDefinition, ParagraphBaseDefinition, ParagraphDefinition, ParagraphWithAlignmentDefinition, ParagraphWithIndentationDefinition, ParagraphWithMarksDefinition, PlaceholderDefinition, RuleDefinition, StatusDefinition, StrikeDefinition, StrongDefinition, SubSupAttributes, SubSupDefinition, TableAttributes, TableCellDefinition, TableDefinition, TableDisplayMode, TableHeaderDefinition, TableLayout, TableRowDefinition, TaskItemDefinition, TaskListContent, TaskListDefinition, TextColorAttributes, TextColorDefinition, TextDefinition, UnderlineDefinition, UrlType, AnnotationId, RichMediaAttributes, ExtendedMediaAttributes, RichMediaLayout, AnnotationDataAttributes, CellDomAttrs, BorderMarkAttributes, BorderMarkDefinition, MultiBodiedExtensionDefinition, ExtensionFrameDefinition, } from './schema';
+colorPaletteExtended, confluenceInlineComment, confluenceJiraIssue, confluenceUnsupportedBlock, confluenceUnsupportedInline, copyPrivateMediaAttributes, createSchema, dataConsumer, dataConsumerToJSON, date, decisionItem, decisionList, decisionListSelector, doc, em, embedCard, emoji, expand, expandToJSON, extension, fragment, fragmentToJSON, hardBreak, heading, image, indentation, inlineCard, inlineExtension, inlineNodes, layoutColumn, layoutSection, link, linkToJSON, listItem, listItemWithTask, media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaSingleWithWidthType, mediaSingleFull, mediaSingleSpec, mediaInline, mediaSingleToJSON, mediaToJSON, mention, mentionToJSON, nestedExpand, extendedNestedExpand, orderedList, orderedListSelector, orderedListWithOrder, panel, extendedPanel, paragraph, placeholder, rule, sanitizeNodes, getCellAttrs, getCellDomAttrs, status, strike, strong, subsup, table, tableStage0, tableWithCustomWidth, tableBackgroundBorderColor, tableBackgroundColorNames, tableBackgroundColorPalette, tableCell, tableCellContentDomSelector, tableCellContentWrapperSelector, tableCellSelector, tableHeader, tableHeaderSelector, tablePrefixSelector, tableRow, tableToJSON, taskItem, taskList, taskListSelector, text, textColor, toJSONTableCell, toJSONTableHeader, typeAheadQuery, underline, unknownBlock, unsupportedBlock, unsupportedInline, unsupportedNodeTypesForMediaCards, buildAnnotationMarkDataAttributes, AnnotationMarkStates, unsupportedMark, unsupportedNodeAttribute, border, borderColorPalette, extensionFrame, multiBodiedExtension, backgroundColor, backgroundColorPalette, } from './schema';
+export type { AlignmentAttributes, AlignmentMarkDefinition, AnnotationMarkAttributes, AnnotationMarkDefinition, BlockCardDefinition, BlockContent, BlockQuoteDefinition, BodiedExtensionDefinition, BreakoutMarkAttrs, BreakoutMarkDefinition, BulletListDefinition, CaptionDefinition, CardAttributes, CellAttributes, CodeBlockAttrs, CodeBlockBaseDefinition, CodeBlockDefinition, CodeBlockWithMarksDefinition, CodeDefinition, DatasourceAttributes, DatasourceAttributeProperties, DataConsumerAttributes, DataConsumerDefinition, DataType, DateDefinition, DecisionItemDefinition, DecisionListDefinition, DocNode, EmbedCardDefinition, EmbedCardAttributes, EmDefinition, EmojiAttributes, EmojiDefinition, ExpandDefinition, ExtensionDefinition, ExtensionLayout, ExternalMediaAttributes, FragmentAttributes, FragmentDefinition, HardBreakDefinition, HeadingBaseDefinition, HeadingDefinition, HeadingWithAlignmentDefinition, HeadingWithIndentationDefinition, HeadingWithMarksDefinition, IndentationMarkAttributes, IndentationMarkDefinition, Inline, InlineAtomic, InlineCardDefinition, InlineCode, InlineExtensionDefinition, InlineFormattedText, InlineLinkText, LayoutColumnDefinition, LayoutSectionDefinition, LayoutSectionFullDefinition, LayoutSectionWithSingleColumnDefinition, LinkAttributes, LinkDefinition, ListItemArray, ListItemDefinition, MarksObject, MediaADFAttrs, MediaAttributes, MediaInlineAttributes, MediaInlineDefinition, MediaBaseAttributes, MediaDefinition, MediaDisplayType, MediaGroupDefinition, MediaSingleDefinition, MediaType, MentionAttributes, MentionDefinition, MentionUserType, NestedExpandContent, NestedExpandDefinition, NoMark, NonNestableBlockContent, OrderedListDefinition, PanelAttributes, PanelDefinition, ParagraphBaseDefinition, ParagraphDefinition, ParagraphWithAlignmentDefinition, ParagraphWithIndentationDefinition, ParagraphWithMarksDefinition, PlaceholderDefinition, RuleDefinition, StatusDefinition, StrikeDefinition, StrongDefinition, SubSupAttributes, SubSupDefinition, TableAttributes, TableCellDefinition, TableDefinition, TableDisplayMode, TableHeaderDefinition, TableLayout, TableRowDefinition, TaskItemDefinition, TaskListContent, TaskListDefinition, TextColorAttributes, TextColorDefinition, TextDefinition, UnderlineDefinition, UrlType, AnnotationId, RichMediaAttributes, ExtendedMediaAttributes, RichMediaLayout, AnnotationDataAttributes, CellDomAttrs, BorderMarkAttributes, BorderMarkDefinition, MultiBodiedExtensionDefinition, ExtensionFrameDefinition, BackgroundColorDefinition, } from './schema';
 export { B100, B400, B50, B500, B75, G200, G300, G400, G50, G500, G75, N0, N20, N200, N30, N300, N40, N50, N500, N60, N80, N800, N90, P100, P300, P400, P50, P500, P75, R100, R300, R400, R50, R500, R75, T100, T300, T50, T500, T75, Y200, Y400, Y50, Y500, Y75, acNameToEmoji, acShortcutToEmoji, emojiIdToAcName, generateUuid, getEmojiAcName, getLinkMatch, hexToRgb, hexToRgba, isHex, isRgb, isSafeUrl, linkify, linkifyMatch, normalizeHexColor, normalizeUrl, rgbToHex, uuid, getDarkModeLCHColor, } from './utils';
 export type { Match, NameToEmoji } from './utils';

package/dist/types/schema/index.d.ts

@@ -2,8 +2,8 @@ export { PanelType, blockCard, blockquote, blockquoteWithList, bodiedExtension,
 export type { BlockCardDefinition, BlockContent, BlockQuoteDefinition, BodiedExtensionDefinition, BulletListDefinition, CaptionDefinition, CardAttributes, CellAttributes, CodeBlockAttrs, CodeBlockBaseDefinition, CodeBlockDefinition, CodeBlockWithMarksDefinition, DatasourceAttributes, DatasourceAttributeProperties, DataType, DateDefinition, DecisionItemDefinition, DecisionListDefinition, DocNode, EmbedCardDefinition, EmbedCardAttributes, EmojiAttributes, EmojiDefinition, ExpandDefinition, ExtensionDefinition, ExtensionLayout, ExternalMediaAttributes, HardBreakDefinition, HeadingBaseDefinition, HeadingDefinition, HeadingWithAlignmentDefinition, HeadingWithIndentationDefinition, HeadingWithMarksDefinition, Inline, InlineAtomic, InlineCardDefinition, InlineCode, InlineExtensionDefinition, InlineFormattedText, InlineLinkText, LayoutColumnDefinition, LayoutSectionDefinition, LayoutSectionBaseDefinition, LayoutSectionFullDefinition, LayoutSectionWithSingleColumnDefinition, ListItemArray, ListItemDefinition, MarksObject, MediaADFAttrs, MediaAttributes, MediaInlineAttributes, MediaInlineDefinition, MediaBaseAttributes, MediaDefinition, MediaDisplayType, MediaGroupDefinition, MediaSingleDefinition, MediaType, MentionAttributes, MentionDefinition, MentionUserType, NestedExpandContent, NestedExpandDefinition, NoMark, NonNestableBlockContent, OrderedListDefinition, PanelAttributes, PanelDefinition, ParagraphBaseDefinition, ParagraphDefinition, ParagraphWithAlignmentDefinition, ParagraphWithIndentationDefinition, ParagraphWithMarksDefinition, PlaceholderDefinition, RuleDefinition, StatusDefinition, TableAttributes, TableCellDefinition, TableDefinition, TableDisplayMode, TableHeaderDefinition, TableLayout, TableRowDefinition, TaskItemDefinition, TaskListContent, TaskListDefinition, TextDefinition, UrlType, RichMediaAttributes, ExtendedMediaAttributes, RichMediaLayout, CellDomAttrs, ExtensionFrameDefinition, MultiBodiedExtensionDefinition, } from './nodes';
 export { AnnotationTypes, alignment, alignmentPositionMap, annotation, breakout, code, colorPalette, 
 /** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
-colorPaletteExtended, confluenceInlineComment, dataConsumer, dataConsumerToJSON, em, fragment, fragmentToJSON, indentation, link, linkToJSON, strike, strong, subsup, textColor, typeAheadQuery, underline, buildAnnotationMarkDataAttributes, AnnotationMarkStates, unsupportedMark, unsupportedNodeAttribute, border, borderColorPalette, } from './marks';
-export type { AlignmentAttributes, AlignmentMarkDefinition, AnnotationMarkAttributes, AnnotationMarkDefinition, BreakoutMarkAttrs, BreakoutMarkDefinition, CodeDefinition, EmDefinition, FragmentAttributes, FragmentDefinition, IndentationMarkAttributes, IndentationMarkDefinition, LinkAttributes, LinkDefinition, StrikeDefinition, StrongDefinition, SubSupAttributes, SubSupDefinition, TextColorAttributes, TextColorDefinition, UnderlineDefinition, AnnotationId, AnnotationDataAttributes, DataConsumerAttributes, DataConsumerDefinition, BorderMarkAttributes, BorderMarkDefinition, } from './marks';
+colorPaletteExtended, confluenceInlineComment, dataConsumer, dataConsumerToJSON, em, fragment, fragmentToJSON, indentation, link, linkToJSON, strike, strong, subsup, textColor, typeAheadQuery, underline, buildAnnotationMarkDataAttributes, AnnotationMarkStates, unsupportedMark, unsupportedNodeAttribute, border, borderColorPalette, backgroundColor, backgroundColorPalette, } from './marks';
+export type { AlignmentAttributes, AlignmentMarkDefinition, AnnotationMarkAttributes, AnnotationMarkDefinition, BreakoutMarkAttrs, BreakoutMarkDefinition, CodeDefinition, EmDefinition, FragmentAttributes, FragmentDefinition, IndentationMarkAttributes, IndentationMarkDefinition, LinkAttributes, LinkDefinition, StrikeDefinition, StrongDefinition, SubSupAttributes, SubSupDefinition, TextColorAttributes, TextColorDefinition, UnderlineDefinition, AnnotationId, AnnotationDataAttributes, DataConsumerAttributes, DataConsumerDefinition, BorderMarkAttributes, BorderMarkDefinition, BackgroundColorDefinition, } from './marks';
 export { unsupportedNodeTypesForMediaCards } from './unsupported';
 export { inlineNodes } from './inline-nodes';
 export { sanitizeNodes, createSchema } from './create-schema';

package/dist/types/schema/marks/background-color.d.ts

@@ -0,0 +1,15 @@
+import { Mark, MarkSpec } from '@atlaskit/editor-prosemirror/model';
+import { TextColorAttributes } from './text-color';
+/**
+ * @name backgroundColor_mark
+ */
+export interface BackgroundColorDefinition {
+    type: 'backgroundColor';
+    attrs: TextColorAttributes;
+}
+export interface BackgroundColorMark extends Mark {
+    attrs: TextColorAttributes;
+}
+export type BackgroundColorKey = 'Gray' | 'Teal' | 'Lime' | 'Orange' | 'Magenta' | 'Purple';
+export declare const backgroundColorPalette: Map<string, BackgroundColorKey>;
+export declare const backgroundColor: MarkSpec;

package/dist/types/schema/marks/index.d.ts

@@ -32,3 +32,5 @@ export type { FragmentAttributes, FragmentDefinition, LocalId, } from './fragmen
 export { fragment, toJSON as fragmentToJSON } from './fragment';
 export { border, borderColorPalette } from './border';
 export type { BorderMarkAttributes, BorderMarkDefinition } from './border';
+export { backgroundColor, backgroundColorPalette } from './background-color';
+export type { BackgroundColorDefinition } from './background-color';

package/dist/types/schema/marks/text-color.d.ts

@@ -20,4 +20,7 @@ export declare const colorPalette: Map<string, TextColorKey>;
 /** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
 export declare const colorPaletteExtended: Map<string, TextColorKey>;
 export declare const setGlobalTheme: (theme: string) => void;
+export declare const getGlobalTheme: () => {
+    colorMode: string;
+};
 export declare const textColor: MarkSpec;

package/dist/types/schema/nodes/types/inline-content.d.ts

@@ -8,12 +8,12 @@ import { InlineCardDefinition as InlineCard } from '../inline-card';
 import { StatusDefinition as Status } from '../status';
 import { TextDefinition as Text } from '../text';
 import { MarksObject } from './mark';
-import { AnnotationMarkDefinition as Annotation, CodeDefinition as Code, EmDefinition as Em, LinkDefinition as Link, StrikeDefinition as Strike, StrongDefinition as Strong, SubSupDefinition as SubSup, TextColorDefinition as TextColor, UnderlineDefinition as Underline } from '../../marks';
+import { AnnotationMarkDefinition as Annotation, CodeDefinition as Code, EmDefinition as Em, LinkDefinition as Link, StrikeDefinition as Strike, StrongDefinition as Strong, SubSupDefinition as SubSup, TextColorDefinition as TextColor, UnderlineDefinition as Underline, BackgroundColorDefinition as BackgroundColor } from '../../marks';
 import { MediaInlineDefinition } from '../media-inline';
 /**
  * @name formatted_text_inline_node
  */
-export type InlineFormattedText = Text & MarksObject<Link | Em | Strong | Strike | SubSup | Underline | TextColor | Annotation>;
+export type InlineFormattedText = Text & MarksObject<Link | Em | Strong | Strike | SubSup | Underline | TextColor | Annotation | BackgroundColor>;
 /**
  * @name link_text_inline_node
  */

package/dist/types/utils/colors.d.ts

@@ -26,6 +26,7 @@ export declare const B75 = "#B3D4FF";
 export declare const B100 = "#4C9AFF";
 export declare const B400 = "#0052CC";
 export declare const B500 = "#0747A6";
+export declare const L200 = "#D3F1A7";
 export declare const N0 = "#FFFFFF";
 export declare const N20 = "#F4F5F7";
 export declare const N30 = "#EBECF0";
@@ -36,20 +37,25 @@ export declare const N80 = "#97A0AF";
 export declare const N90 = "#8993A4";
 export declare const N200 = "#6B778C";
 export declare const N300 = "#5E6C84";
+export declare const Neutral300 = "#DCDFE4";
 export declare const N300A = "#091E4224";
 export declare const N500 = "#42526E";
 export declare const N600 = "#758195";
 export declare const N800 = "#172B4D";
 export declare const N1000 = "#172B4D";
+export declare const M200 = "#FDD0EC";
+export declare const O200 = "#FEDEC8";
 export declare const P50 = "#EAE6FF";
 export declare const P75 = "#C0B6F2";
 export declare const P100 = "#998DD9";
+export declare const P200 = "#DFD8FD";
 export declare const P300 = "#6554C0";
 export declare const P400 = "#5243AA";
 export declare const P500 = "#403294";
 export declare const T50 = "#E6FCFF";
 export declare const T75 = "#B3F5FF";
 export declare const T100 = "#79E2F2";
+export declare const T200 = "#C6EDFB";
 export declare const T300 = "#00B8D9";
 export declare const T500 = "#008DA6";
 /**

package/dist/types/utils/editor-palette.d.ts

@@ -90,6 +90,40 @@ export declare const editorTextPalette: {
     /** whiteGray - strong */
     '#172B4D': string;
 };
+/**
+ * This takes an ADF hex color and returns a matching text background palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#0747A6');
+ * //     ^? const cssValue: string
+ * <span style={{backgroundColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+export declare function hexToEditorTextBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends TextBackgroundColorPaletteKey ? TextBackgroundColorPalette[HexColor] : string | undefined;
+export declare const textBackgroundColorPalette: {
+    /** Gray - light */
+    '#DCDFE4': string;
+    /** Teal - light */
+    '#C6EDFB': string;
+    /** Lime - light */
+    '#D3F1A7': string;
+    /** Orange - light */
+    '#FEDEC8': string;
+    /** Magenta - light */
+    '#FDD0EC': string;
+    /** Purple - light */
+    '#DFD8FD': string;
+};
+type TextBackgroundColorPalette = typeof textBackgroundColorPalette;
+export type TextBackgroundColorPaletteKey = keyof TextBackgroundColorPalette;
 /**
  * Takes an ADF hex color and returns the rendered hex code for the associated background palette design token using getTokenValue.
  * If the provided color does not exist in the Editor color palette, this function returns undefined.

package/json-schema/v1/full.json

@@ -492,6 +492,34 @@
       ],
       "additionalProperties": false
     },
+    "backgroundColor_mark": {
+      "type": "object",
+      "properties": {
+        "type": {
+          "enum": [
+            "backgroundColor"
+          ]
+        },
+        "attrs": {
+          "type": "object",
+          "properties": {
+            "color": {
+              "type": "string",
+              "pattern": "^#[0-9a-fA-F]{6}$"
+            }
+          },
+          "required": [
+            "color"
+          ],
+          "additionalProperties": false
+        }
+      },
+      "required": [
+        "type",
+        "attrs"
+      ],
+      "additionalProperties": false
+    },
     "hardBreak_node": {
       "type": "object",
       "properties": {
@@ -1106,6 +1134,9 @@
                   },
                   {
                     "$ref": "#/definitions/annotation_mark"
+                  },
+                  {
+                    "$ref": "#/definitions/backgroundColor_mark"
                   }
                 ]
               }

package/json-schema/v1/stage-0.json

@@ -492,6 +492,34 @@
       ],
       "additionalProperties": false
     },
+    "backgroundColor_mark": {
+      "type": "object",
+      "properties": {
+        "type": {
+          "enum": [
+            "backgroundColor"
+          ]
+        },
+        "attrs": {
+          "type": "object",
+          "properties": {
+            "color": {
+              "type": "string",
+              "pattern": "^#[0-9a-fA-F]{6}$"
+            }
+          },
+          "required": [
+            "color"
+          ],
+          "additionalProperties": false
+        }
+      },
+      "required": [
+        "type",
+        "attrs"
+      ],
+      "additionalProperties": false
+    },
     "hardBreak_node": {
       "type": "object",
       "properties": {
@@ -1112,6 +1140,9 @@
                   },
                   {
                     "$ref": "#/definitions/annotation_mark"
+                  },
+                  {
+                    "$ref": "#/definitions/backgroundColor_mark"
                   }
                 ]
               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/adf-schema",
-  "version": "35.10.0",
+  "version": "35.12.0",
   "description": "Shared package that contains the ADF-schema (json) and ProseMirror node/mark specs",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
     "memoize-one": "^6.0.0"
   },
   "devDependencies": {
-    "@atlassian/adf-schema-json": "^1.8.0",
+    "@atlassian/adf-schema-json": "^1.10.0",
     "@babel/cli": "^7.22.9",
     "@babel/core": "^7.22.9",
     "@babel/plugin-proposal-class-properties": "^7.18.6",