@atlaskit/renderer 128.3.0 → 128.3.1

package/dist/esm/react/nodes/blockCard.js

@@ -16,37 +16,36 @@ import { DatasourceTableView } from '@atlaskit/link-datasource';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { N40 } from '@atlaskit/theme/colors';
 import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { usePortal } from '../../ui/Renderer/PortalContext';
 import { RendererCssClassName } from '../../consts';
 var datasourceCenterWrapperStyles = css({
-  marginTop: "var(--ds-space-150, 0.75rem)",
-  marginBottom: "var(--ds-space-150, 0.75rem)"
+  marginTop: "var(--ds-space-150, 12px)",
+  marginBottom: "var(--ds-space-150, 12px)"
 });
 var datasourceContainerStyleWithMarginTop = css({
   borderRadius: "var(--ds-radius-large, 8px)",
-  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
+  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
   overflow: 'hidden',
-  marginTop: "var(--ds-space-150, 0.75rem)",
-  marginBottom: "var(--ds-space-150, 0.75rem)"
+  marginTop: "var(--ds-space-150, 12px)",
+  marginBottom: "var(--ds-space-150, 12px)"
 });
 
 // No vertical margin when inside center wrapper (wrapper has margin so it participates in collapse). Styles from datasourceContainerStyleLegacy
 var datasourceContainerStyleNoVerticalMargin = css({
   borderRadius: "var(--ds-radius-large, 8px)",
-  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
+  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
   overflow: 'hidden'
 });
 var datasourceContainerStyleLegacy = css({
   borderRadius: "var(--ds-radius-large, 8px)",
-  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
+  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
   overflow: 'hidden',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
-  marginBottom: "var(--ds-space-150, 0.75rem)",
+  marginBottom: "var(--ds-space-150, 12px)",
   transform: 'translateX(-50%)',
-  marginTop: "var(--ds-space-150, 0.75rem)"
+  marginTop: "var(--ds-space-150, 12px)"
 });
 export default function BlockCard(props) {
   var url = props.url,

package/dist/esm/react/nodes/codeBlock/components/codeBlockButtonContainer.js

@@ -6,11 +6,10 @@
 import { jsx, css } from '@emotion/react';
 import CopyButton from './codeBlockCopyButton';
 import CodeWrapButton from './codeBlockWrapButton';
-import { N0, N20, N30, N700 } from '@atlaskit/theme/colors';
 var codeBlockButtonsWrapper = css({
   position: 'sticky',
   top: '0px',
-  background: "".concat("var(--ds-surface, ".concat(N20, ")"))
+  background: "var(--ds-surface, #FFFFFF)"
 });
 var codeBlockButtonsStyle = css({
   display: 'flex',
@@ -25,24 +24,24 @@ var codeBlockButtonsStyle = css({
   button: {
     height: '32px',
     width: '32px',
-    border: "var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border, ".concat(N0, ")")),
+    border: "var(--ds-border-width-selected, 2px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
     borderRadius: "var(--ds-radius-small, 4px)",
     marginLeft: "var(--ds-space-050, 4px)",
     padding: "var(--ds-space-025, 2px)",
-    background: "".concat("var(--ds-surface-overlay, ".concat(N20, ")")),
-    color: "var(--ds-icon, rgb(66, 82, 110))",
+    background: "var(--ds-surface-overlay, #FFFFFF)",
+    color: "var(--ds-icon, #292A2E)",
     '&:hover': {
       borderWidth: "var(--ds-border-width-selected, 2px)",
-      backgroundColor: "".concat("var(--ds-surface-overlay-hovered, ".concat(N30, ")")),
+      backgroundColor: "var(--ds-surface-overlay-hovered, #F0F1F2)",
       height: '32px',
       width: '32px'
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '&.clicked': {
-      backgroundColor: "".concat("var(--ds-background-neutral-bold-pressed, ".concat(N700, ")")),
+      backgroundColor: "var(--ds-background-neutral-bold-pressed, #505258)",
       borderRadius: "var(--ds-radius-small, 4px)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      color: "".concat("var(--ds-icon-inverse, ".concat(N0, ")"), " !important")
+      color: "var(--ds-icon-inverse, #FFFFFF)".concat(" !important")
     }
   }
 });

package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -5,14 +5,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import { N20 } from '@atlaskit/theme/colors';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import CodeBlockButtonContainer from './codeBlockButtonContainer';
 var codeBlockStyleOverrides = css(_defineProperty({
   tabSize: 4,
-  backgroundColor: "var(--ds-surface-raised, ".concat(N20, ")"),
+  backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   button: {
     opacity: 0,

package/dist/esm/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -111,7 +111,7 @@ var codeBlockSharedStyles = css(_defineProperty(_defineProperty(_defineProperty(
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.5rem',
   textAlign: 'right',
-  color: "var(--ds-text-subtlest, #505F79)",
+  color: "var(--ds-text-subtlest, #6B6E76)",
   boxSizing: 'content-box'
 })));
 var lightWeightCodeBlockStyles = css(_defineProperty({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), {

package/dist/esm/react/nodes/panel.js

@@ -37,7 +37,7 @@ var panelBaseStyles = css({
     position: 'relative',
     alignItems: 'normal',
     wordBreak: 'break-word',
-    backgroundColor: "var(--ds-background-accent-blue-subtlest, #DEEBFF)",
+    backgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
     color: 'inherit',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.ak-editor-panel__icon': {
@@ -90,7 +90,7 @@ var panelBaseStyles = css({
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '&[data-panel-type="note"]': {
-      backgroundColor: "var(--ds-background-accent-purple-subtlest, #EAE6FF)",
+      backgroundColor: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
       '.ak-editor-panel__icon': {
         color: "var(--ds-icon-discovery, #AF59E1)"
@@ -98,7 +98,7 @@ var panelBaseStyles = css({
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
     '&[data-panel-type="tip"]': {
-      backgroundColor: "var(--ds-background-accent-green-subtlest, #E3FCEF)",
+      backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
       '.ak-editor-panel__icon': {
         color: "var(--ds-icon-success, #6A9A23)"
@@ -106,7 +106,7 @@ var panelBaseStyles = css({
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
     '&[data-panel-type="warning"]': {
-      backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)",
+      backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
       '.ak-editor-panel__icon': {
         color: "var(--ds-icon-warning, #E06C00)"
@@ -114,7 +114,7 @@ var panelBaseStyles = css({
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
     '&[data-panel-type="error"]': {
-      backgroundColor: "var(--ds-background-accent-red-subtlest, #FFEBE6)",
+      backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
       '.ak-editor-panel__icon': {
         color: "var(--ds-icon-danger, #C9372C)"
@@ -122,7 +122,7 @@ var panelBaseStyles = css({
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
     '&[data-panel-type="success"]': {
-      backgroundColor: "var(--ds-background-accent-green-subtlest, #E3FCEF)",
+      backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
       '.ak-editor-panel__icon': {
         color: "var(--ds-icon-success, #6A9A23)"
@@ -150,7 +150,7 @@ var panelNestedIconStyles = css({
 var nestedPanelStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ak-editor-panel__content .ak-editor-panel': {
-    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #091E42)")
+    border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)")
   }
 });
 var panelCustomBackground = css({

package/dist/esm/react/nodes/table/sticky.js

@@ -13,7 +13,6 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
-import { N40A } from '@atlaskit/theme/colors';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export var tableStickyPadding = 8;
@@ -38,9 +37,9 @@ var fixedTableDivStaticStyles = css(_defineProperty(_defineProperty(_definePrope
   marginBottom: 0,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   tr: {
-    background: "var(--ds-surface, white)"
+    background: "var(--ds-surface, #FFFFFF)"
   }
-}), "borderTop", "".concat(tableStickyPadding, "px solid ", "var(--ds-surface, white)")), "background", "var(--ds-surface-overlay, white)"), "boxShadow", "0 6px 4px -4px ".concat("var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"))), "div[data-expanded='false'] &", {
+}), "borderTop", "".concat(tableStickyPadding, "px solid ", "var(--ds-surface, #FFFFFF)")), "background", "var(--ds-surface-overlay, #FFFFFF)"), "boxShadow", "0 6px 4px -4px ".concat("var(--ds-shadow-overflow-perimeter, #1E1F211f)")), "div[data-expanded='false'] &", {
   display: 'none'
 }), "& .".concat(TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.right-shadow::after, & .").concat(TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky.left-shadow::before"), {
   top: '0px',

package/dist/esm/ui/Expand.js

@@ -42,12 +42,12 @@ var containerStyles = css({
   borderColor: 'transparent',
   borderRadius: "var(--ds-radius-small, 4px)",
   minHeight: '25px',
-  background: "var(--ds-background-neutral-subtle, transparent)",
+  background: "var(--ds-background-neutral-subtle, #00000000)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: "background 0.3s ".concat(akEditorSwoopCubicBezier, ", border-color 0.3s ").concat(akEditorSwoopCubicBezier),
   padding: "var(--ds-space-0, 0px)",
   paddingBottom: "var(--ds-space-0, 0px)",
-  marginTop: "var(--ds-space-050, 0.25rem)",
+  marginTop: "var(--ds-space-050, 4px)",
   marginBottom: 0,
   marginLeft: 0,
   marginRight: 0,
@@ -57,7 +57,7 @@ var containerStyles = css({
   }
 });
 var containerStylesExpanded = css({
-  background: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
+  background: "var(--ds-surface, #FFFFFF)",
   paddingBottom: "var(--ds-space-100, 8px)",
   borderColor: "var(--ds-border, #0B120E24)"
 });