@atlaskit/editor-shared-styles 2.9.0 → 2.9.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-shared-styles
 
+## 2.9.1
+
+### Patch Changes
+
+- [#73177](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73177) [`22452599ed8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/22452599ed8f) - Move styling for certain packages to tokens.
+
 ## 2.9.0
 
 ### Minor Changes

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

@@ -7,15 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.overflowShadow = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var overflowShadow = exports.overflowShadow = function overflowShadow(_ref) {
-  var background = _ref.background,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "var(--ds-space-100, 8px)" : _ref$width,
-    leftCoverWidth = _ref.leftCoverWidth,
+  var leftCoverWidth = _ref.leftCoverWidth,
     rightCoverWidth = _ref.rightCoverWidth;
+  var width = "var(--ds-space-100, 8px)";
   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, "var(--ds-surface-raised, transparent)", leftCoverWidthResolved, leftCoverWidthResolved, background, rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, transparent)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", 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"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, transparent)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, transparent)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width);
 };

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

@@ -1,18 +1,18 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
+import { N20 } from '@atlaskit/theme/colors';
 export const overflowShadow = ({
-  background,
-  width = "var(--ds-space-100, 8px)",
   leftCoverWidth,
   rightCoverWidth
 }) => {
+  const width = "var(--ds-space-100, 8px)";
   const leftCoverWidthResolved = leftCoverWidth || width;
   const rightCoverWidthResolved = rightCoverWidth || width;
   return css`
 /* shadow cover left */
   linear-gradient(
     to right,
-    ${background} ${leftCoverWidthResolved},
+    ${`var(--ds-background-neutral, ${N20})`} ${leftCoverWidthResolved},
     transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover background left */
@@ -24,7 +24,7 @@ export const overflowShadow = ({
 /* shadow cover right */
   linear-gradient(
     to left,
-    ${background} ${rightCoverWidthResolved},
+    ${`var(--ds-background-neutral, ${N20})`} ${rightCoverWidthResolved},
     transparent ${rightCoverWidthResolved}
   ),
 /* shadow cover background right */

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

@@ -2,13 +2,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
+import { N20 } from '@atlaskit/theme/colors';
 export var overflowShadow = function overflowShadow(_ref) {
-  var background = _ref.background,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "var(--ds-space-100, 8px)" : _ref$width,
-    leftCoverWidth = _ref.leftCoverWidth,
+  var leftCoverWidth = _ref.leftCoverWidth,
     rightCoverWidth = _ref.rightCoverWidth;
+  var width = "var(--ds-space-100, 8px)";
   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, "var(--ds-surface-raised, transparent)", leftCoverWidthResolved, leftCoverWidthResolved, background, rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, transparent)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", 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"])), "var(--ds-background-neutral, ".concat(N20, ")"), leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, transparent)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-background-neutral, ".concat(N20, ")"), rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, transparent)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width);
 };

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

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

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

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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/editor-shared-styles",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "Style values used in the editor/renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.33.0",
+    "@atlaskit/tokens": "^1.37.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

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

@@ -1,19 +1,17 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 
+import { N20 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 export const overflowShadow = ({
-  background,
-  width = token('space.100', '8px'),
   leftCoverWidth,
   rightCoverWidth,
 }: {
-  background: string;
-  width?: string;
   leftCoverWidth?: string;
   rightCoverWidth?: string;
 }) => {
+  const width = token('space.100', '8px');
   const leftCoverWidthResolved = leftCoverWidth || width;
   const rightCoverWidthResolved = rightCoverWidth || width;
 
@@ -21,7 +19,7 @@ export const overflowShadow = ({
 /* shadow cover left */
   linear-gradient(
     to right,
-    ${background} ${leftCoverWidthResolved},
+    ${token('color.background.neutral', N20)} ${leftCoverWidthResolved},
     transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover background left */
@@ -36,7 +34,7 @@ export const overflowShadow = ({
 /* shadow cover right */
   linear-gradient(
     to left,
-    ${background} ${rightCoverWidthResolved},
+    ${token('color.background.neutral', N20)} ${rightCoverWidthResolved},
     transparent ${rightCoverWidthResolved}
   ),
 /* shadow cover background right */

package/tsconfig.json

@@ -5,6 +5,6 @@
   },
   "include": [
     "./src/**/*.ts",
-    "./src/**/*.tsx",
+    "./src/**/*.tsx"
   ]
-}
+}