@atlaskit/editor-shared-styles 2.2.5 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-shared-styles
 
+## 2.3.0
+
+### Minor Changes
+
+- [`4fbaeb2a1fd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4fbaeb2a1fd) - DSP-4118 Updated tokens used to render overflow shadows in code blocks.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in beta).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+  `overflowShadow` now optionally supports customizing the size of the "covers" that appear over shadows when at the edge of content, via `leftCoverWidth` and `rightCoverWidth`, and the shadow width via the `width` prop.
+
 ## 2.2.5
 
 ### Patch Changes

package/dist/cjs/overflow-shadow/overflow-shadow.js

@@ -11,14 +11,21 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = require("@emotion/react");
 
+var _constants = require("@atlaskit/theme/constants");
+
 var _tokens = require("@atlaskit/tokens");
 
 var _templateObject;
 
 var overflowShadow = function overflowShadow(_ref) {
   var background = _ref.background,
-      width = _ref.width;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right */\n  linear-gradient(\n    to left,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  ),\n/* overflow shadow left */\n  linear-gradient(\n    to right,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  )\n"])), background, width, width, (0, _tokens.token)('elevation.surface.raised', 'transparent'), width, width, background, width, width, (0, _tokens.token)('elevation.surface.raised', 'transparent'), width, width, width, width);
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "".concat((0, _constants.gridSize)(), "px") : _ref$width,
+      leftCoverWidth = _ref.leftCoverWidth,
+      rightCoverWidth = _ref.rightCoverWidth;
+  var leftCoverWidthResolved = leftCoverWidth || width;
+  var rightCoverWidthResolved = rightCoverWidth || width;
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right spread */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow right perimeter */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left spread */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left perimeter */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  )\n"])), background, leftCoverWidthResolved, leftCoverWidthResolved, (0, _tokens.token)('elevation.surface.raised', 'transparent'), leftCoverWidthResolved, leftCoverWidthResolved, background, rightCoverWidthResolved, rightCoverWidthResolved, (0, _tokens.token)('elevation.surface.raised', 'transparent'), rightCoverWidthResolved, rightCoverWidthResolved, (0, _tokens.token)('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)'), (0, _tokens.token)('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)'), width, (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), (0, _tokens.token)('utility.UNSAFE_util.transparent', 'transparent'), width, (0, _tokens.token)('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)'), (0, _tokens.token)('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)'), width, (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), (0, _tokens.token)('utility.UNSAFE_util.transparent', 'transparent'), width);
 };
 
 exports.overflowShadow = overflowShadow;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.2.5",
+	"version": "2.3.0",
 	"sideEffects": false
 }

package/dist/es2019/overflow-shadow/overflow-shadow.js

@@ -1,44 +1,63 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
+import { gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 export const overflowShadow = ({
   background,
-  width
-}) => css`
+  width = `${gridSize()}px`,
+  leftCoverWidth,
+  rightCoverWidth
+}) => {
+  const leftCoverWidthResolved = leftCoverWidth || width;
+  const rightCoverWidthResolved = rightCoverWidth || width;
+  return css`
 /* shadow cover left */
   linear-gradient(
     to right,
-    ${background} ${width},
-    transparent ${width}
+    ${background} ${leftCoverWidthResolved},
+    transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover background left */
   linear-gradient(
     to right,
-    ${token('elevation.surface.raised', 'transparent')} ${width},
-    transparent ${width}
+    ${token('elevation.surface.raised', 'transparent')} ${leftCoverWidthResolved},
+    transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover right */
   linear-gradient(
     to left,
-    ${background} ${width},
-    transparent ${width}
+    ${background} ${rightCoverWidthResolved},
+    transparent ${rightCoverWidthResolved}
   ),
 /* shadow cover background right */
   linear-gradient(
     to left,
-    ${token('elevation.surface.raised', 'transparent')} ${width},
-    transparent ${width}
+    ${token('elevation.surface.raised', 'transparent')} ${rightCoverWidthResolved},
+    transparent ${rightCoverWidthResolved}
   ),
-/* overflow shadow right */
+/* overflow shadow right spread */
   linear-gradient(
     to left,
-    rgba(9, 30, 66, 0.13) 0,
-    rgba(99, 114, 130, 0) ${width}
+    ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
+    ${token('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)')}  ${width}
   ),
-/* overflow shadow left */
+  /* overflow shadow right perimeter */
+  linear-gradient(
+    to left,
+    ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
+    ${token('utility.UNSAFE_util.transparent', 'transparent')}  ${width}
+  ),
+  /* overflow shadow left spread */
+  linear-gradient(
+    to right,
+    ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
+    ${token('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)')}  ${width}
+  ),
+  /* overflow shadow left perimeter */
   linear-gradient(
     to right,
-    rgba(9, 30, 66, 0.13) 0,
-    rgba(99, 114, 130, 0) ${width}
+    ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
+    ${token('utility.UNSAFE_util.transparent', 'transparent')}  ${width}
   )
-`;
+`;
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.2.5",
+	"version": "2.3.0",
 	"sideEffects": false
 }

package/dist/esm/overflow-shadow/overflow-shadow.js

@@ -4,9 +4,15 @@ var _templateObject;
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
+import { gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 export var overflowShadow = function overflowShadow(_ref) {
   var background = _ref.background,
-      width = _ref.width;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* shadow cover left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right */\n  linear-gradient(\n    to left,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  ),\n/* overflow shadow left */\n  linear-gradient(\n    to right,\n    rgba(9, 30, 66, 0.13) 0,\n    rgba(99, 114, 130, 0) ", "\n  )\n"])), background, width, width, token('elevation.surface.raised', 'transparent'), width, width, background, width, width, token('elevation.surface.raised', 'transparent'), width, width, width, width);
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "".concat(gridSize(), "px") : _ref$width,
+      leftCoverWidth = _ref.leftCoverWidth,
+      rightCoverWidth = _ref.rightCoverWidth;
+  var leftCoverWidthResolved = leftCoverWidth || width;
+  var rightCoverWidthResolved = rightCoverWidth || width;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* shadow cover left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background left */\n  linear-gradient(\n    to right,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* shadow cover background right */\n  linear-gradient(\n    to left,\n    ", " ", ",\n    transparent ", "\n  ),\n/* overflow shadow right spread */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow right perimeter */\n  linear-gradient(\n    to left,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left spread */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  ),\n  /* overflow shadow left perimeter */\n  linear-gradient(\n    to right,\n    ", " 0,\n    ", "  ", "\n  )\n"])), background, leftCoverWidthResolved, leftCoverWidthResolved, token('elevation.surface.raised', 'transparent'), leftCoverWidthResolved, leftCoverWidthResolved, background, rightCoverWidthResolved, rightCoverWidthResolved, token('elevation.surface.raised', 'transparent'), rightCoverWidthResolved, rightCoverWidthResolved, token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)'), token('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)'), width, token('elevation.shadow.overflow.perimeter', 'transparent'), token('utility.UNSAFE_util.transparent', 'transparent'), width, token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)'), token('utility.UNSAFE_util.transparent', 'rgba(99, 114, 130, 0)'), width, token('elevation.shadow.overflow.perimeter', 'transparent'), token('utility.UNSAFE_util.transparent', 'transparent'), width);
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.2.5",
+	"version": "2.3.0",
 	"sideEffects": false
 }

package/dist/types/overflow-shadow/overflow-shadow.d.ts

@@ -1,4 +1,6 @@
-export declare const overflowShadow: ({ background, width, }: {
+export declare const overflowShadow: ({ background, width, leftCoverWidth, rightCoverWidth, }: {
     background: string;
-    width: string;
+    width?: string | undefined;
+    leftCoverWidth?: string | undefined;
+    rightCoverWidth?: string | undefined;
 }) => import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-shared-styles",
-  "version": "2.2.5",
+  "version": "2.3.0",
   "description": "Style values used in the editor/renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/editor-shared-styles"
 
@@ -286,9 +286,13 @@ export const hideNativeBrowserTextSelectionStyles =
 export const overflowShadow: ({
   background,
   width,
+  leftCoverWidth,
+  rightCoverWidth,
 }: {
   background: string;
-  width: string;
+  width?: string | undefined;
+  leftCoverWidth?: string | undefined;
+  rightCoverWidth?: string | undefined;
 }) => SerializedStyles;
 
 // @public (undocumented)

package/src/overflow-shadow/overflow-shadow.ts

@@ -1,49 +1,83 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 
+import { gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 
 export const overflowShadow = ({
   background,
-  width,
+  width = `${gridSize()}px`,
+  leftCoverWidth,
+  rightCoverWidth,
 }: {
   background: string;
-  width: string;
-}) => css`
+  width?: string;
+  leftCoverWidth?: string;
+  rightCoverWidth?: string;
+}) => {
+  const leftCoverWidthResolved = leftCoverWidth || width;
+  const rightCoverWidthResolved = rightCoverWidth || width;
+
+  return css`
 /* shadow cover left */
   linear-gradient(
     to right,
-    ${background} ${width},
-    transparent ${width}
+    ${background} ${leftCoverWidthResolved},
+    transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover background left */
   linear-gradient(
     to right,
-    ${token('elevation.surface.raised', 'transparent')} ${width},
-    transparent ${width}
+    ${token(
+      'elevation.surface.raised',
+      'transparent',
+    )} ${leftCoverWidthResolved},
+    transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover right */
   linear-gradient(
     to left,
-    ${background} ${width},
-    transparent ${width}
+    ${background} ${rightCoverWidthResolved},
+    transparent ${rightCoverWidthResolved}
   ),
 /* shadow cover background right */
   linear-gradient(
     to left,
-    ${token('elevation.surface.raised', 'transparent')} ${width},
-    transparent ${width}
+    ${token(
+      'elevation.surface.raised',
+      'transparent',
+    )} ${rightCoverWidthResolved},
+    transparent ${rightCoverWidthResolved}
+  ),
+/* overflow shadow right spread */
+  linear-gradient(
+    to left,
+    ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
+    ${token(
+      'utility.UNSAFE_util.transparent',
+      'rgba(99, 114, 130, 0)',
+    )}  ${width}
   ),
-/* overflow shadow right */
+  /* overflow shadow right perimeter */
   linear-gradient(
     to left,
-    rgba(9, 30, 66, 0.13) 0,
-    rgba(99, 114, 130, 0) ${width}
+    ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
+    ${token('utility.UNSAFE_util.transparent', 'transparent')}  ${width}
+  ),
+  /* overflow shadow left spread */
+  linear-gradient(
+    to right,
+    ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
+    ${token(
+      'utility.UNSAFE_util.transparent',
+      'rgba(99, 114, 130, 0)',
+    )}  ${width}
   ),
-/* overflow shadow left */
+  /* overflow shadow left perimeter */
   linear-gradient(
     to right,
-    rgba(9, 30, 66, 0.13) 0,
-    rgba(99, 114, 130, 0) ${width}
+    ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
+    ${token('utility.UNSAFE_util.transparent', 'transparent')}  ${width}
   )
 `;
+};