@atlaskit/editor-shared-styles 2.2.2 → 2.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/overflow-shadow/overflow-shadow.js +3 -1
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/overflow-shadow/overflow-shadow.js +19 -0
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/overflow-shadow/overflow-shadow.js +2 -1
  7. package/dist/esm/version.json +1 -1
  8. package/package.json +1 -1
  9. package/report.api.md +12 -5
  10. package/src/overflow-shadow/overflow-shadow.ts +20 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-shared-styles
2
2
 
3
+ ## 2.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`977ac74443c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/977ac74443c) - DSP-7235: Fixes issue with overflow shadows on code blocks due to layered transparent colors.
8
+
3
9
  ## 2.2.2
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/overflow-shadow/overflow-shadow.js CHANGED
@@ -11,12 +11,14 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
11
11
 
12
12
  var _react = require("@emotion/react");
13
13
 
14
+ var _tokens = require("@atlaskit/tokens");
15
+
14
16
  var _templateObject;
15
17
 
16
18
  var overflowShadow = function overflowShadow(_ref) {
17
19
  var background = _ref.background,
18
20
  width = _ref.width;
19
- return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover 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, width, width);
21
+ 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);
20
22
  };
21
23
 
22
24
  exports.overflowShadow = overflowShadow;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.2.2",
3
+ "version": "2.2.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/overflow-shadow/overflow-shadow.js CHANGED
@@ -1,15 +1,34 @@
1
1
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
2
2
  import { css } from '@emotion/react';
3
+ import { token } from '@atlaskit/tokens';
3
4
  export const overflowShadow = ({
4
5
  background,
5
6
  width
6
7
  }) => css`
8
+ /* shadow cover left */
9
+ linear-gradient(
10
+ to right,
11
+ ${background} ${width},
12
+ transparent ${width}
13
+ ),
14
+ /* shadow cover background left */
15
+ linear-gradient(
16
+ to right,
17
+ ${token('elevation.surface.raised', 'transparent')} ${width},
18
+ transparent ${width}
19
+ ),
7
20
  /* shadow cover right */
8
21
  linear-gradient(
9
22
  to left,
10
23
  ${background} ${width},
11
24
  transparent ${width}
12
25
  ),
26
+ /* shadow cover background right */
27
+ linear-gradient(
28
+ to left,
29
+ ${token('elevation.surface.raised', 'transparent')} ${width},
30
+ transparent ${width}
31
+ ),
13
32
  /* overflow shadow right */
14
33
  linear-gradient(
15
34
  to left,
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.2.2",
3
+ "version": "2.2.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/overflow-shadow/overflow-shadow.js CHANGED
@@ -4,8 +4,9 @@ var _templateObject;
4
4
 
5
5
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
6
6
  import { css } from '@emotion/react';
7
+ import { token } from '@atlaskit/tokens';
7
8
  export var overflowShadow = function overflowShadow(_ref) {
8
9
  var background = _ref.background,
9
10
  width = _ref.width;
10
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* shadow cover 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, width, width);
11
+ 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);
11
12
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.2.2",
3
+ "version": "2.2.3",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.2.2",
3
+ "version": "2.2.3",
4
4
  "description": "Style values used in the editor/renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
package/report.api.md CHANGED
@@ -1,12 +1,17 @@
1
+ <!-- API Report Version: 2.2 -->
2
+
1
3
  ## API Report File for "@atlaskit/editor-shared-styles"
2
4
 
3
- > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
5
+ > Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
6
+ > [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
7
+
8
+ ### Table of contents
4
9
 
5
- <!--
6
- Generated API Report version: 2.0
7
- -->
10
+ - [Main Entry Types](#main-entry-types)
8
11
 
9
- [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
12
+ ### Main Entry Types
13
+
14
+ <!--SECTION START: Main Entry Types-->
10
15
 
11
16
  ```ts
12
17
  import { SerializedStyles } from '@emotion/react';
@@ -340,3 +345,5 @@ export const VIEWPORT_SIZES: {
340
345
 
341
346
  // (No @packageDocumentation comment for this package)
342
347
  ```
348
+
349
+ <!--SECTION END: Main Entry Types-->
package/src/overflow-shadow/overflow-shadow.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
2
2
  import { css } from '@emotion/react';
3
3
 
4
+ import { token } from '@atlaskit/tokens';
5
+
4
6
  export const overflowShadow = ({
5
7
  background,
6
8
  width,
@@ -8,12 +10,30 @@ export const overflowShadow = ({
8
10
  background: string;
9
11
  width: string;
10
12
  }) => css`
13
+ /* shadow cover left */
14
+ linear-gradient(
15
+ to right,
16
+ ${background} ${width},
17
+ transparent ${width}
18
+ ),
19
+ /* shadow cover background left */
20
+ linear-gradient(
21
+ to right,
22
+ ${token('elevation.surface.raised', 'transparent')} ${width},
23
+ transparent ${width}
24
+ ),
11
25
  /* shadow cover right */
12
26
  linear-gradient(
13
27
  to left,
14
28
  ${background} ${width},
15
29
  transparent ${width}
16
30
  ),
31
+ /* shadow cover background right */
32
+ linear-gradient(
33
+ to left,
34
+ ${token('elevation.surface.raised', 'transparent')} ${width},
35
+ transparent ${width}
36
+ ),
17
37
  /* overflow shadow right */
18
38
  linear-gradient(
19
39
  to left,