@atlaskit/editor-plugin-extension 11.0.14 → 11.0.16

package/dist/es2019/ui/ConfigPanel/Fields/ColorPicker.js

@@ -23,105 +23,105 @@ import { validate } from '../utils';
 
 export const colorPalette = [{
   label: 'Light Blue',
-  value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
+  value: "var(--ds-background-accent-blue-subtle, #669DF1)"
 },
 // 400
 {
   label: 'Light Green',
-  value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
+  value: "var(--ds-background-accent-green-subtle, #4BCE97)"
 },
 // 400
 {
   label: 'Light Yellow',
-  value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
+  value: "var(--ds-background-accent-yellow-subtle, #EED12B)"
 },
 // 400
 {
   label: 'Light Red',
-  value: "var(--ds-background-accent-red-subtle, #FF8F73)"
+  value: "var(--ds-background-accent-red-subtle, #F87168)"
 },
 // 400
 {
   label: 'Light Purple',
-  value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
+  value: "var(--ds-background-accent-purple-subtle, #C97CF4)"
 },
 // 400
 
 {
   label: 'Blue',
-  value: "var(--ds-chart-blue-bold, #247FFF)"
+  value: "var(--ds-chart-blue-bold, #4688EC)"
 },
 // 600
 {
   label: 'Green',
-  value: "var(--ds-chart-green-bold, #23A971)"
+  value: "var(--ds-chart-green-bold, #22A06B)"
 },
 // 600
 {
   label: 'Yellow',
-  value: "var(--ds-chart-yellow-bold, #FFBE33)"
+  value: "var(--ds-chart-yellow-bold, #B38600)"
 },
 // 600
 {
   label: 'Red',
-  value: "var(--ds-chart-red-bold, #FC552C)"
+  value: "var(--ds-chart-red-bold, #F15B50)"
 },
 // 600
 {
   label: 'Purple',
-  value: "var(--ds-chart-purple-bold, #8B77EE)"
+  value: "var(--ds-chart-purple-bold, #BF63F3)"
 },
 // 600
 
 {
   label: 'Dark Blue',
-  value: "var(--ds-chart-blue-bolder, #0055CC)"
+  value: "var(--ds-chart-blue-bolder, #357DE8)"
 },
 // 800
 {
   label: 'Dark Green',
-  value: "var(--ds-chart-green-bolder, #177D52)"
+  value: "var(--ds-chart-green-bolder, #1F845A)"
 },
 // 800
 {
   label: 'Dark Yellow',
-  value: "var(--ds-chart-yellow-bolder, #FF9D00)"
+  value: "var(--ds-chart-yellow-bolder, #946F00)"
 },
 // 800
 {
   label: 'Dark Red',
-  value: "var(--ds-chart-red-bolder, #D32D03)"
+  value: "var(--ds-chart-red-bolder, #E2483D)"
 },
 // 800
 {
   label: 'Dark Purple',
-  value: "var(--ds-chart-purple-bolder, #5A43D0)"
+  value: "var(--ds-chart-purple-bolder, #AF59E1)"
 },
 // 800
 
 {
   label: 'Darker Blue',
-  value: "var(--ds-chart-blue-boldest, #003884)"
+  value: "var(--ds-chart-blue-boldest, #1558BC)"
 },
 // 1000
 {
   label: 'Darker Green',
-  value: "var(--ds-chart-green-boldest, #055C3F)"
+  value: "var(--ds-chart-green-boldest, #216E4E)"
 },
 // 1000
 {
   label: 'Darker Yellow',
-  value: "var(--ds-chart-yellow-boldest, #946104)"
+  value: "var(--ds-chart-yellow-boldest, #7F5F01)"
 },
 // 1000
 {
   label: 'Darker Red',
-  value: "var(--ds-chart-red-boldest, #A32000)"
+  value: "var(--ds-chart-red-boldest, #AE2E24)"
 },
 // 1000
 {
   label: 'Darker Purple',
-  value: "var(--ds-chart-purple-boldest, #44368B)"
+  value: "var(--ds-chart-purple-boldest, #803FA5)"
 } // 1000
 ].map(color => ({
   ...color,
@@ -134,32 +134,32 @@ export const colorPalette = [{
  */
 export const extendedColorPalette = [{
   label: 'Darker Blue',
-  value: "var(--ds-chart-blue-boldest, #003884)"
+  value: "var(--ds-chart-blue-boldest, #1558BC)"
 },
 // 1000
 {
   label: 'Darker Teal',
-  value: "var(--ds-chart-teal-boldest, #206B74)"
+  value: "var(--ds-chart-teal-boldest, #206A83)"
 },
 // 1000
 {
   label: 'Darker Green',
-  value: "var(--ds-chart-green-boldest, #055C3F)"
+  value: "var(--ds-chart-green-boldest, #216E4E)"
 },
 // 1000
 {
   label: 'Darker Yellow',
-  value: "var(--ds-chart-yellow-boldest, #946104)"
+  value: "var(--ds-chart-yellow-boldest, #7F5F01)"
 },
 // 1000
 {
   label: 'Darker Orange',
-  value: "var(--ds-chart-orange-boldest, #974F0C)"
+  value: "var(--ds-chart-orange-boldest, #7A3B00)"
 },
 // 1000
 {
   label: 'Darker Red',
-  value: "var(--ds-chart-red-boldest, #A32000)"
+  value: "var(--ds-chart-red-boldest, #AE2E24)"
 },
 // 1000
 {
@@ -169,43 +169,43 @@ export const extendedColorPalette = [{
 // 1000
 {
   label: 'Darker Purple',
-  value: "var(--ds-chart-purple-boldest, #44368B)"
+  value: "var(--ds-chart-purple-boldest, #803FA5)"
 },
 // 1000
 {
   label: 'Darker Gray',
-  value: "var(--ds-chart-gray-boldest, #44546F)"
+  value: "var(--ds-chart-gray-boldest, #505258)"
 },
 // 1000
 
 {
   label: 'Dark Blue',
-  value: "var(--ds-chart-blue-bolder, #0055CC)"
+  value: "var(--ds-chart-blue-bolder, #357DE8)"
 },
 // 800
 {
   label: 'Dark Teal',
-  value: "var(--ds-chart-teal-bolder, #1D7F8C)"
+  value: "var(--ds-chart-teal-bolder, #227D9B)"
 },
 // 800
 {
   label: 'Dark Green',
-  value: "var(--ds-chart-green-bolder, #177D52)"
+  value: "var(--ds-chart-green-bolder, #1F845A)"
 },
 // 800
 {
   label: 'Dark Yellow',
-  value: "var(--ds-chart-yellow-bolder, #FF9D00)"
+  value: "var(--ds-chart-yellow-bolder, #946F00)"
 },
 // 800
 {
   label: 'Dark Orange',
-  value: "var(--ds-chart-orange-bolder, #B65C02)"
+  value: "var(--ds-chart-orange-bolder, #BD5B00)"
 },
 // 800
 {
   label: 'Dark Red',
-  value: "var(--ds-chart-red-bolder, #D32D03)"
+  value: "var(--ds-chart-red-bolder, #E2483D)"
 },
 // 800
 {
@@ -215,43 +215,43 @@ export const extendedColorPalette = [{
 // 800
 {
   label: 'Dark Purple',
-  value: "var(--ds-chart-purple-bolder, #5A43D0)"
+  value: "var(--ds-chart-purple-bolder, #AF59E1)"
 },
 // 800
 {
   label: 'Dark Gray',
-  value: "var(--ds-chart-gray-bolder, #758195)"
+  value: "var(--ds-chart-gray-bolder, #7D818A)"
 },
 // 800
 
 {
   label: 'Blue',
-  value: "var(--ds-chart-blue-bold, #247FFF)"
+  value: "var(--ds-chart-blue-bold, #4688EC)"
 },
 // 600
 {
   label: 'Teal',
-  value: "var(--ds-chart-teal-bold, #1D9AAA)"
+  value: "var(--ds-chart-teal-bold, #2898BD)"
 },
 // 600
 {
   label: 'Green',
-  value: "var(--ds-chart-green-bold, #23A971)"
+  value: "var(--ds-chart-green-bold, #22A06B)"
 },
 // 600
 {
   label: 'Yellow',
-  value: "var(--ds-chart-yellow-bold, #FFBE33)"
+  value: "var(--ds-chart-yellow-bold, #B38600)"
 },
 // 600
 {
   label: 'Orange',
-  value: "var(--ds-chart-orange-bold, #D97008)"
+  value: "var(--ds-chart-orange-bold, #E06C00)"
 },
 // 600
 {
   label: 'Red',
-  value: "var(--ds-chart-red-bold, #FC552C)"
+  value: "var(--ds-chart-red-bold, #F15B50)"
 },
 // 600
 {
@@ -261,43 +261,43 @@ export const extendedColorPalette = [{
 // 600
 {
   label: 'Purple',
-  value: "var(--ds-chart-purple-bold, #8B77EE)"
+  value: "var(--ds-chart-purple-bold, #BF63F3)"
 },
 // 600
 {
   label: 'Gray',
-  value: "var(--ds-chart-gray-bold, #8590A2)"
+  value: "var(--ds-chart-gray-bold, #8C8F97)"
 },
 // 600
 
 {
   label: 'Light Blue',
-  value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
+  value: "var(--ds-background-accent-blue-subtle, #669DF1)"
 },
 // 400
 {
   label: 'Light Teal',
-  value: "var(--ds-background-accent-teal-subtle, #60C6D2)"
+  value: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
 },
 // 400
 {
   label: 'Light Green',
-  value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
+  value: "var(--ds-background-accent-green-subtle, #4BCE97)"
 },
 // 400
 {
   label: 'Light Yellow',
-  value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
+  value: "var(--ds-background-accent-yellow-subtle, #EED12B)"
 },
 // 400
 {
   label: 'Light Orange',
-  value: "var(--ds-background-accent-orange-subtle, #FAA53D)"
+  value: "var(--ds-background-accent-orange-subtle, #FCA700)"
 },
 // 400
 {
   label: 'Light Red',
-  value: "var(--ds-background-accent-red-subtle, #FF8F73)"
+  value: "var(--ds-background-accent-red-subtle, #F87168)"
 },
 // 400
 {
@@ -307,12 +307,12 @@ export const extendedColorPalette = [{
 // 400
 {
   label: 'Light Purple',
-  value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
+  value: "var(--ds-background-accent-purple-subtle, #C97CF4)"
 },
 // 400
 {
   label: 'Light Gray',
-  value: "var(--ds-background-accent-gray-subtle, #8993A5)"
+  value: "var(--ds-background-accent-gray-subtle, #8C8F97)"
 } // 400
 ].map(color => ({
   ...color,

package/dist/es2019/ui/ConfigPanel/Fields/Expand.js

@@ -11,9 +11,8 @@ import { IconButton } from '@atlaskit/button/new';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import { N40 } from '@atlaskit/theme/colors';
 const expandContainerStyles = css({
-  borderBottom: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`
+  borderBottom: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`
 });
 const expandControlStyles = css({
   display: 'flex',

package/dist/es2019/ui/ConfigPanel/Fields/Fieldset.js

@@ -17,10 +17,9 @@ import AddCircleIcon from '@atlaskit/icon/core/add';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import SectionMessage from '@atlaskit/section-message';
 import Select from '@atlaskit/select';
-import { N40A } from '@atlaskit/theme/colors';
 import { getNameFromDuplicateField, isDuplicateField } from '../utils';
 const actionsWrapperStyles = css({
-  borderTop: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40A})`}`,
+  borderTop: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
   marginTop: "var(--ds-space-200, 16px)",
   paddingTop: "var(--ds-space-200, 16px)"
 });

package/dist/es2019/ui/ConfigPanel/Fields/SelectItem.js

@@ -48,7 +48,7 @@ export const formatOptionLabel = ({
     appearance: "square"
   }) : icon), jsx("div", {
     style: {
-      paddingLeft: icon ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0)"
+      paddingLeft: icon ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"
     },
     "data-testid": "extension-option-label"
   }, label, description && context !== 'value' && jsx("small", null, description)));

package/dist/es2019/ui/ConfigPanel/Header/HeaderIcon.js

@@ -7,7 +7,7 @@ const itemIconStyles = xcss({
   width: iconWidth,
   height: iconWidth,
   overflow: 'hidden',
-  border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}`,
+  border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
   borderRadius: "var(--ds-radius-small, 3px)",
   boxSizing: 'border-box',
   display: 'flex',

package/dist/es2019/ui/ConfigPanel/Header.js

@@ -13,7 +13,6 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import CrossIcon from '@atlaskit/icon/core/cross';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, Text, xcss } from '@atlaskit/primitives';
-import { N200 } from '@atlaskit/theme/colors';
 import { HelpLink } from './HelpLink';
 const iconWidth = 40;
 const buttonWidth = 40;
@@ -27,7 +26,7 @@ const itemIconStyles = css({
   width: iconWidth,
   height: iconWidth,
   overflow: 'hidden',
-  border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}`,
+  border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
   borderRadius: "var(--ds-radius-small, 3px)",
   boxSizing: 'border-box',
   display: 'flex',
@@ -63,7 +62,7 @@ const itemTextStyles = css({
   itemSummary: {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     fontSize: relativeFontSizeToBase16(11.67),
-    color: `var(--ds-text-subtlest, ${N200})`,
+    color: "var(--ds-text-subtlest, #6B6E76)",
     marginTop: "var(--ds-space-050, 4px)",
     whiteSpace: 'nowrap',
     overflow: 'hidden',

package/dist/es2019/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -9,7 +9,6 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
-import { N80, R300 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip';
 const removableFieldWrapperStyles = css({
@@ -24,9 +23,9 @@ const removeButtonWrapperStyles = css({
   right: 0,
   top: 0,
   cursor: 'pointer',
-  color: `var(--ds-icon-subtle, ${N80})`,
+  color: "var(--ds-icon-subtle, #505258)",
   '&:hover': {
-    color: `var(--ds-icon-danger, ${R300})`
+    color: "var(--ds-icon-danger, #C9372C)"
   }
 });
 const RemovableField = ({

package/dist/es2019/ui/SaveIndicator/SaveIndicator.js

@@ -11,7 +11,6 @@ import { messages } from '@atlaskit/editor-common/extensions';
 import CheckCircleIcon from '@atlaskit/icon/core/status-success';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, Text, xcss } from '@atlaskit/primitives';
-import { G300, N0 } from '@atlaskit/theme/colors';
 const noop = () => {};
 const saveIndicatorWrapperStyles = css({
   display: 'flex',
@@ -25,9 +24,9 @@ const saveIndicatorContentStyles = css({
   flexDirection: 'row',
   alignItems: 'center',
   padding: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-150, 12px)"}`,
-  background: `var(--ds-surface-overlay, ${N0})`,
+  background: "var(--ds-surface-overlay, #FFFFFF)",
   /* E300 */
-  boxShadow: `var(--ds-shadow-overlay, ${`0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)`})`,
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
   borderRadius: "var(--ds-radius-xxlarge, 16px)"
 });
 const saveIndicatorTextStyles = xcss({
@@ -64,7 +63,7 @@ export const SaveIndicator = ({
     "data-testid": "save-indicator-content"
   }, jsx(CheckCircleIcon, {
     label: "Saving",
-    color: `var(--ds-icon-success, ${G300})`,
+    color: "var(--ds-icon-success, #6A9A23)",
     spacing: "none"
   }), jsx(Box, {
     xcss: saveIndicatorTextStyles

package/dist/esm/pm-plugins/toDOM-fixes/bodiedExtension.js

@@ -3,7 +3,6 @@ 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 { bodiedExtension } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import { N30 } from '@atlaskit/theme/colors';
 var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
@@ -29,7 +28,7 @@ export var bodiedExtensionSpecWithFixedToDOM = function bodiedExtensionSpecWithF
       return ['div', attrs, ['span', {
         // Styles based on `packages/editor/editor-common/src/extensibility/Extension/Lozenge/ExtensionLabel.tsx`
         style: convertToInlineCss({
-          boxShadow: "0 0 0 1px ".concat("var(--ds-border, ".concat(N30, ")")),
+          boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)"),
           fontSize: '14px',
           padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
           color: "var(--ds-text-subtle, #505258)",
@@ -49,7 +48,7 @@ export var bodiedExtensionSpecWithFixedToDOM = function bodiedExtensionSpecWithF
           padding: "var(--ds-space-200, 16px)",
           marginLeft: "var(--ds-space-negative-150, -12px)",
           marginRight: "var(--ds-space-negative-150, -12px)",
-          boxShadow: "0 0 0 1px ".concat("var(--ds-border, ".concat(N30, ")")),
+          boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)"),
           borderRadius: "var(--ds-radius-small, 4px)"
         })
       }, 0]];

package/dist/esm/ui/ConfigPanel/Fields/CheckboxGroup.js

@@ -21,7 +21,7 @@ function _validate(value, isRequired) {
   }
 }
 var requiredIndicatorStyles = css({
-  color: "var(--ds-text-danger, #bf2600)"
+  color: "var(--ds-text-danger, #AE2E24)"
 });
 function CheckboxGroupInner(_ref) {
   var label = _ref.label,