@atlaskit/code 14.6.9 → 15.0.0

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 (20) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/code-block.js +2 -4
  3. package/dist/cjs/code.js +1 -5
  4. package/dist/cjs/internal/theme/get-theme.js +53 -212
  5. package/dist/cjs/internal/theme/styles.js +22 -25
  6. package/dist/es2019/code-block.js +1 -3
  7. package/dist/es2019/code.js +2 -4
  8. package/dist/es2019/internal/theme/get-theme.js +54 -213
  9. package/dist/es2019/internal/theme/styles.js +6 -9
  10. package/dist/esm/code-block.js +2 -4
  11. package/dist/esm/code.js +2 -6
  12. package/dist/esm/internal/theme/get-theme.js +53 -212
  13. package/dist/esm/internal/theme/styles.js +5 -8
  14. package/dist/types/internal/theme/get-theme.d.ts +3 -4
  15. package/dist/types/internal/theme/styles.d.ts +3 -6
  16. package/dist/types-ts4.5/internal/theme/get-theme.d.ts +3 -4
  17. package/dist/types-ts4.5/internal/theme/styles.d.ts +3 -6
  18. package/package.json +1 -1
  19. package/report.api.md +1 -8
  20. package/tmp/api-report-tmp.d.ts +1 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/code
2
2
 
3
+ ## 15.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#41498](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41498) [`73adf14896c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/73adf14896c) - Remove usage of legacy theming from the Code component and refactor where necessary to accomodate the updated API.
8
+
3
9
  ## 14.6.9
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/code-block.js CHANGED
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _react = require("react");
9
9
  var _react2 = require("@emotion/react");
10
- var _components = require("@atlaskit/theme/components");
11
10
  var _useHighlight = require("./internal/hooks/use-highlight");
12
11
  var _styles = require("./internal/theme/styles");
13
12
  var _getNormalizedLanguage = require("./internal/utils/get-normalized-language");
@@ -44,10 +43,9 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
44
43
  _ref$shouldWrapLongLi = _ref.shouldWrapLongLines,
45
44
  shouldWrapLongLines = _ref$shouldWrapLongLi === void 0 ? false : _ref$shouldWrapLongLi;
46
45
  var numLines = (text || '').split('\n').length;
47
- var globalTheme = (0, _components.useGlobalTheme)();
48
46
  var theme = (0, _react.useMemo)(function () {
49
- return (0, _styles.getCodeBlockTheme)(globalTheme, numLines);
50
- }, [globalTheme, numLines]);
47
+ return (0, _styles.getCodeBlockTheme)(numLines);
48
+ }, [numLines]);
51
49
  var getStyles = (0, _react.useMemo)(function () {
52
50
  return (0, _styles.getCodeBlockStyles)(theme);
53
51
  }, [theme]);
package/dist/cjs/code.js CHANGED
@@ -16,7 +16,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
16
16
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
17
  var _react = _interopRequireWildcard(require("react"));
18
18
  var _react2 = require("@emotion/react");
19
- var _components = require("@atlaskit/theme/components");
20
19
  var _bidiWarning = _interopRequireDefault(require("./bidi-warning"));
21
20
  var _bidiWarningDecorator = _interopRequireDefault(require("./bidi-warning/bidi-warning-decorator"));
22
21
  var _styles = require("./internal/theme/styles");
@@ -37,10 +36,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
37
36
  var Code = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Code(_ref, ref) {
38
37
  var testId = _ref.testId,
39
38
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
40
- var theme = (0, _components.useGlobalTheme)();
41
- var styles = (0, _react.useMemo)(function () {
42
- return (0, _react2.css)((0, _styles.getCodeStyles)(theme));
43
- }, [theme]);
39
+ var styles = (0, _react2.css)((0, _styles.getCodeStyles)());
44
40
  var children = props.children,
45
41
  _props$codeBidiWarnin = props.codeBidiWarnings,
46
42
  codeBidiWarnings = _props$codeBidiWarnin === void 0 ? true : _props$codeBidiWarnin,
package/dist/cjs/internal/theme/get-theme.js CHANGED
@@ -9,7 +9,6 @@ exports.getColorPalette = exports.getBaseTheme = exports.defaultBaseTheme = expo
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _memoizeOne = _interopRequireDefault(require("memoize-one"));
11
11
  var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
12
- var _components = require("@atlaskit/theme/components");
13
12
  var _constants = require("@atlaskit/theme/constants");
14
13
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
14
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -19,224 +18,66 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
19
18
  // accessible color options for Teal and Yellow and +20A
20
19
  var T800 = '#067384';
21
20
  var Y1100 = '#7A5D1A';
22
- var PLUS20 = '#3A434E';
23
- var getBaseTheme = exports.getBaseTheme = function getBaseTheme(theme) {
21
+ var getBaseTheme = exports.getBaseTheme = function getBaseTheme() {
24
22
  return {
25
23
  fontFamily: (0, _constants.codeFontFamily)(),
26
24
  fontFamilyItalic: "SFMono-MediumItalic, ".concat((0, _constants.codeFontFamily)()),
27
- backgroundColor: (0, _components.themed)({
28
- light: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
29
- dark: "var(--ds-background-neutral, ".concat(colors.DN50, ")")
30
- })({
31
- theme: theme
32
- }),
33
- textColor: (0, _components.themed)({
34
- light: "var(--ds-text, ".concat(colors.N800, ")"),
35
- dark: "var(--ds-text, ".concat(colors.DN800, ")")
36
- })({
37
- theme: theme
38
- }),
39
- lineNumberColor: (0, _components.themed)({
40
- light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
41
- dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
42
- })({
43
- theme: theme
44
- }),
45
- lineNumberBgColor: (0, _components.themed)({
46
- light: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
47
- dark: "var(--ds-background-neutral, ".concat(colors.DN20, ")")
48
- })({
49
- theme: theme
50
- })
25
+ backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
26
+ textColor: "var(--ds-text, ".concat(colors.N800, ")"),
27
+ lineNumberColor: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
28
+ lineNumberBgColor: "var(--ds-background-neutral, ".concat(colors.N30, ")")
51
29
  };
52
30
  };
53
- var defaultBaseTheme = exports.defaultBaseTheme = getBaseTheme({
54
- mode: 'light'
55
- });
56
- var getColorPalette = exports.getColorPalette = (0, _memoizeOne.default)(function (theme) {
57
- var akTheme = {
58
- theme: theme
59
- };
31
+ var defaultBaseTheme = exports.defaultBaseTheme = getBaseTheme();
32
+ var getColorPalette = exports.getColorPalette = (0, _memoizeOne.default)(function () {
60
33
  return {
61
- highlightedLineBgColor: (0, _components.themed)({
62
- light: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
63
- dark: "var(--ds-background-neutral, ".concat(PLUS20, ")")
64
- })(akTheme),
65
- highlightedLineBorderColor: (0, _components.themed)({
66
- light: "var(--ds-border-focused, ".concat(colors.B200, ")"),
67
- dark: "var(--ds-border-focused, ".concat(colors.B100, ")")
68
- })(akTheme),
69
- substringColor: (0, _components.themed)({
70
- light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
71
- dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
72
- })(akTheme),
73
- keywordColor: (0, _components.themed)({
74
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
75
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
76
- })(akTheme),
77
- attributeColor: (0, _components.themed)({
78
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
79
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
80
- })(akTheme),
81
- selectorTagColor: (0, _components.themed)({
82
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
83
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
84
- })(akTheme),
85
- docTagColor: (0, _components.themed)({
86
- light: "var(--ds-text-accent-yellow, ".concat(Y1100, ")"),
87
- dark: "var(--ds-text-accent-yellow, ".concat(colors.Y300, ")")
88
- })(akTheme),
89
- nameColor: (0, _components.themed)({
90
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
91
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
92
- })(akTheme),
93
- builtInColor: (0, _components.themed)({
94
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
95
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
96
- })(akTheme),
97
- literalColor: (0, _components.themed)({
98
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
99
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
100
- })(akTheme),
101
- bulletColor: (0, _components.themed)({
102
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
103
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
104
- })(akTheme),
105
- codeColor: (0, _components.themed)({
106
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
107
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
108
- })(akTheme),
109
- regexpColor: (0, _components.themed)({
110
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
111
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
112
- })(akTheme),
113
- symbolColor: (0, _components.themed)({
114
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
115
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
116
- })(akTheme),
117
- variableColor: (0, _components.themed)({
118
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
119
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
120
- })(akTheme),
121
- templateVariableColor: (0, _components.themed)({
122
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
123
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
124
- })(akTheme),
125
- linkColor: (0, _components.themed)({
126
- light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
127
- dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
128
- })(akTheme),
129
- selectorAttributeColor: (0, _components.themed)({
130
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
131
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
132
- })(akTheme),
133
- selectorPseudoColor: (0, _components.themed)({
134
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
135
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
136
- })(akTheme),
137
- typeColor: (0, _components.themed)({
138
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
139
- dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
140
- })(akTheme),
141
- stringColor: (0, _components.themed)({
142
- light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
143
- dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
144
- })(akTheme),
145
- selectorIdColor: (0, _components.themed)({
146
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
147
- dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
148
- })(akTheme),
149
- selectorClassColor: (0, _components.themed)({
150
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
151
- dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
152
- })(akTheme),
153
- quoteColor: (0, _components.themed)({
154
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
155
- dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
156
- })(akTheme),
157
- templateTagColor: (0, _components.themed)({
158
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
159
- dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
160
- })(akTheme),
161
- titleColor: (0, _components.themed)({
162
- light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
163
- dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
164
- })(akTheme),
165
- sectionColor: (0, _components.themed)({
166
- light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
167
- dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
168
- })(akTheme),
169
- commentColor: (0, _components.themed)({
170
- light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
171
- dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
172
- })(akTheme),
173
- metaKeywordColor: (0, _components.themed)({
174
- light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
175
- dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
176
- })(akTheme),
177
- metaColor: (0, _components.themed)({
178
- light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
179
- dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
180
- })(akTheme),
181
- functionColor: (0, _components.themed)({
182
- light: "var(--ds-text, ".concat(colors.N800, ")"),
183
- dark: "var(--ds-text, ".concat(colors.DN800, ")")
184
- })(akTheme),
185
- numberColor: (0, _components.themed)({
186
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
187
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
188
- })(akTheme),
189
- prologColor: (0, _components.themed)({
190
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
191
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
192
- })(akTheme),
193
- cdataColor: (0, _components.themed)({
194
- light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
195
- dark: "var(--ds-text-subtlest, ".concat(colors.B75, ")")
196
- })(akTheme),
197
- punctuationColor: (0, _components.themed)({
198
- light: "var(--ds-text, ".concat(colors.N800, ")"),
199
- dark: "var(--ds-text, ".concat(colors.DN800, ")")
200
- })(akTheme),
201
- propertyColor: (0, _components.themed)({
202
- light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
203
- dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
204
- })(akTheme),
205
- constantColor: (0, _components.themed)({
206
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
207
- dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
208
- })(akTheme),
209
- booleanColor: (0, _components.themed)({
210
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
211
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
212
- })(akTheme),
213
- charColor: (0, _components.themed)({
214
- light: "var(--ds-text, ".concat(colors.N800, ")"),
215
- dark: "var(--ds-text, ".concat(colors.DN800, ")")
216
- })(akTheme),
217
- insertedColor: (0, _components.themed)({
218
- light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
219
- dark: "var(--ds-text-accent-green, ".concat(colors.B75, ")")
220
- })(akTheme),
221
- deletedColor: (0, _components.themed)({
222
- light: "var(--ds-text-accent-red, ".concat(colors.R500, ")"),
223
- dark: "var(--ds-text-accent-red, ".concat(colors.B75, ")")
224
- })(akTheme),
225
- operatorColor: (0, _components.themed)({
226
- light: "var(--ds-text, ".concat(colors.N800, ")"),
227
- dark: "var(--ds-text, ".concat(colors.B75, ")")
228
- })(akTheme),
229
- atruleColor: (0, _components.themed)({
230
- light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
231
- dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
232
- })(akTheme),
233
- importantColor: (0, _components.themed)({
234
- light: "var(--ds-text-accent-yellow, ".concat(Y1100, ")"),
235
- dark: "var(--ds-text-accent-yellow, ".concat(colors.Y300, ")")
236
- })(akTheme)
34
+ highlightedLineBgColor: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
35
+ highlightedLineBorderColor: "var(--ds-border-focused, ".concat(colors.B200, ")"),
36
+ substringColor: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
37
+ keywordColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
38
+ attributeColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
39
+ selectorTagColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
40
+ docTagColor: "var(--ds-text-accent-yellow, ".concat(Y1100, ")"),
41
+ nameColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
42
+ builtInColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
43
+ literalColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
44
+ bulletColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
45
+ codeColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
46
+ regexpColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
47
+ symbolColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
48
+ variableColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
49
+ templateVariableColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
50
+ linkColor: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
51
+ selectorAttributeColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
52
+ selectorPseudoColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
53
+ typeColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
54
+ stringColor: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
55
+ selectorIdColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
56
+ selectorClassColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
57
+ quoteColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
58
+ templateTagColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
59
+ titleColor: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
60
+ sectionColor: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
61
+ commentColor: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
62
+ metaKeywordColor: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
63
+ metaColor: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
64
+ functionColor: "var(--ds-text, ".concat(colors.N800, ")"),
65
+ numberColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
66
+ prologColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
67
+ cdataColor: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
68
+ punctuationColor: "var(--ds-text, ".concat(colors.N800, ")"),
69
+ propertyColor: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
70
+ constantColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
71
+ booleanColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
72
+ charColor: "var(--ds-text, ".concat(colors.N800, ")"),
73
+ insertedColor: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
74
+ deletedColor: "var(--ds-text-accent-red, ".concat(colors.R500, ")"),
75
+ operatorColor: "var(--ds-text, ".concat(colors.N800, ")"),
76
+ atruleColor: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
77
+ importantColor: "var(--ds-text-accent-yellow, ".concat(Y1100, ")")
237
78
  };
238
79
  });
239
- var getTheme = function getTheme(theme) {
240
- return _objectSpread(_objectSpread({}, getBaseTheme(theme)), getColorPalette(theme));
80
+ var getTheme = function getTheme() {
81
+ return _objectSpread(_objectSpread({}, getBaseTheme()), getColorPalette());
241
82
  };
242
83
  var _default = exports.default = getTheme;
package/dist/cjs/internal/theme/styles.js CHANGED
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.getLineNumWidth = exports.getCodeStyles = exports.getCodeBlockTheme = exports.getCodeBlockStyles = exports.getBaseCodeStyles = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _constants = require("@atlaskit/theme/constants");
10
- var _constants2 = require("./constants");
9
+ var _constants = require("./constants");
11
10
  var _getTheme = require("./get-theme");
12
11
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
13
12
  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) { (0, _defineProperty2.default)(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; }
@@ -20,7 +19,7 @@ var getLineNumWidth = exports.getLineNumWidth = function getLineNumWidth(numLine
20
19
  var lineNumberStyle = function lineNumberStyle(theme) {
21
20
  return {
22
21
  // width of the line number gutter
23
- minWidth: "calc(".concat(theme.lineNumberWidth, " + ").concat(_constants2.LINE_NUMBER_GUTTER, "px) !important"),
22
+ minWidth: "calc(".concat(theme.lineNumberWidth, " + ").concat(_constants.LINE_NUMBER_GUTTER, "px) !important"),
24
23
  // this needs to be important or it gets overwritten by inline styles
25
24
  fontStyle: 'normal !important',
26
25
  // this needs to be important or it gets overwritten by inline styles
@@ -28,9 +27,9 @@ var lineNumberStyle = function lineNumberStyle(theme) {
28
27
  flexShrink: 0,
29
28
  // needed to replicate existing design spec
30
29
  boxSizing: 'border-box',
31
- paddingRight: "".concat(_constants2.SPACING, "px !important"),
32
- paddingLeft: _constants2.SPACING,
33
- marginRight: _constants2.SPACING,
30
+ paddingRight: "".concat(_constants.SPACING, "px !important"),
31
+ paddingLeft: _constants.SPACING,
32
+ marginRight: _constants.SPACING,
34
33
  textAlign: 'right',
35
34
  userSelect: 'none',
36
35
  // this is to fix SSR spacing issue
@@ -198,13 +197,13 @@ var syntaxKeywordColors = function syntaxKeywordColors(theme) {
198
197
  */
199
198
  var getBaseCodeStyles = exports.getBaseCodeStyles = function getBaseCodeStyles(theme) {
200
199
  return {
201
- fontSize: _constants2.CODE_FONT_SIZE,
200
+ fontSize: _constants.CODE_FONT_SIZE,
202
201
  fontFamily: theme.fontFamily,
203
202
  fontWeight: 'normal',
204
- backgroundColor: "var(".concat(_constants2.VAR_CODE_BG_COLOR, ",").concat(theme.backgroundColor, ")"),
203
+ backgroundColor: "var(".concat(_constants.VAR_CODE_BG_COLOR, ",").concat(theme.backgroundColor, ")"),
205
204
  color: theme.textColor,
206
205
  borderStyle: 'none',
207
- borderRadius: "".concat((0, _constants.borderRadius)(), "px")
206
+ borderRadius: "var(--ds-border-radius, 3px)"
208
207
  };
209
208
  };
210
209
 
@@ -220,10 +219,10 @@ var getCodeBlockStyles = exports.getCodeBlockStyles = function getCodeBlockStyle
220
219
  // this is required to account for prismjs styles leaking into the codeblock
221
220
  'code[class*="language-"], pre[class*="language-"], code': {
222
221
  all: 'unset',
223
- padding: showLineNumbers ? "".concat(_constants2.SPACING, "px 0") : _constants2.SPACING
222
+ padding: showLineNumbers ? "".concat(_constants.SPACING, "px 0") : _constants.SPACING
224
223
  },
225
224
  display: 'flex',
226
- lineHeight: _constants2.CODE_LINE_HEIGHT,
225
+ lineHeight: _constants.CODE_LINE_HEIGHT,
227
226
  overflowX: 'auto',
228
227
  whiteSpace: 'pre',
229
228
  direction: 'ltr'
@@ -237,8 +236,8 @@ var getCodeBlockStyles = exports.getCodeBlockStyles = function getCodeBlockStyle
237
236
  // these styles are for line highlighting
238
237
  '& [data-ds--code--row]': {
239
238
  display: showLineNumbers ? 'flex' : 'block',
240
- paddingRight: "".concat(_constants2.SPACING, "px !important"),
241
- marginRight: "-".concat(_constants2.SPACING, "px")
239
+ paddingRight: "".concat(_constants.SPACING, "px !important"),
240
+ marginRight: "-".concat(_constants.SPACING, "px")
242
241
  },
243
242
  '& [data-ds--code--row--highlight]': {
244
243
  background: "".concat(theme.highlightedLineBgColor),
@@ -261,17 +260,17 @@ var getCodeBlockStyles = exports.getCodeBlockStyles = function getCodeBlockStyle
261
260
  }
262
261
  },
263
262
  '& [data-ds--code--row--highlight] .linenumber': {
264
- borderLeft: "".concat(_constants2.HIGHLIGHT_BORDER_WIDTH, " solid ").concat(theme.highlightedLineBorderColor),
265
- paddingLeft: "".concat(_constants2.SPACING / 2, "px !important"),
263
+ borderLeft: "".concat(_constants.HIGHLIGHT_BORDER_WIDTH, " solid ").concat(theme.highlightedLineBorderColor),
264
+ paddingLeft: "".concat(_constants.SPACING / 2, "px !important"),
266
265
  position: 'relative'
267
266
  },
268
267
  // fill in space caused by parent border top
269
268
  '& [data-ds--code--row--highlight] .linenumber::before': {
270
269
  content: '""',
271
270
  position: 'absolute',
272
- width: _constants2.HIGHLIGHT_BORDER_WIDTH,
271
+ width: _constants.HIGHLIGHT_BORDER_WIDTH,
273
272
  top: '-1px',
274
- left: "-".concat(_constants2.HIGHLIGHT_BORDER_WIDTH),
273
+ left: "-".concat(_constants.HIGHLIGHT_BORDER_WIDTH),
275
274
  borderTop: "1px solid ".concat(theme.highlightedLineBorderColor)
276
275
  },
277
276
  '[data-ds--code--row--highlight] + [data-ds--code--row]:not([data-ds--code--row--highlight]), [data-ds--code--row]:not([data-ds--code--row--highlight]) + [data-ds--code--row--highlight]': {
@@ -282,13 +281,13 @@ var getCodeBlockStyles = exports.getCodeBlockStyles = function getCodeBlockStyle
282
281
  },
283
282
  '& code:first-of-type': {
284
283
  paddingRight: "0px !important",
285
- backgroundImage: showLineNumbers ? "linear-gradient(to right, var(".concat(_constants2.VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, "), var(").concat(_constants2.VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, ")\n calc(").concat(theme.lineNumberWidth, " + ").concat(_constants2.LINE_NUMBER_GUTTER, "px), transparent calc(").concat(theme.lineNumberWidth, " + ").concat(_constants2.LINE_NUMBER_GUTTER, "px), transparent)") : undefined
284
+ backgroundImage: showLineNumbers ? "linear-gradient(to right, var(".concat(_constants.VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, "), var(").concat(_constants.VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, ")\n calc(").concat(theme.lineNumberWidth, " + ").concat(_constants.LINE_NUMBER_GUTTER, "px), transparent calc(").concat(theme.lineNumberWidth, " + ").concat(_constants.LINE_NUMBER_GUTTER, "px), transparent)") : undefined
286
285
  },
287
286
  // we need to use last-of-type because when Code is SSR'd
288
287
  // 2 <code> elements are created and we don't want this style
289
288
  // applied to the first one
290
289
  '& code:last-of-type': {
291
- paddingRight: "".concat(_constants2.SPACING, "px !important"),
290
+ paddingRight: "".concat(_constants.SPACING, "px !important"),
292
291
  flexBasis: 'auto',
293
292
  flexGrow: 1,
294
293
  // Needed for the highlight line to extend full-width
@@ -302,10 +301,8 @@ var getCodeBlockStyles = exports.getCodeBlockStyles = function getCodeBlockStyle
302
301
  });
303
302
  };
304
303
  };
305
- var getCodeStyles = exports.getCodeStyles = function getCodeStyles(globalTheme) {
306
- // Required to have proper compatibility with styled components interpolations
307
- var akTheme = 'theme' in globalTheme ? globalTheme.theme : globalTheme;
308
- var theme = (0, _getTheme.getBaseTheme)(akTheme);
304
+ var getCodeStyles = exports.getCodeStyles = function getCodeStyles() {
305
+ var theme = (0, _getTheme.getBaseTheme)();
309
306
  var baseStyles = getBaseCodeStyles(theme);
310
307
  return _objectSpread(_objectSpread({}, baseStyles), {}, {
311
308
  display: 'inline',
@@ -317,8 +314,8 @@ var getCodeStyles = exports.getCodeStyles = function getCodeStyles(globalTheme)
317
314
  whiteSpace: 'pre-wrap'
318
315
  });
319
316
  };
320
- var getCodeBlockTheme = exports.getCodeBlockTheme = function getCodeBlockTheme(globalTheme, maxLines) {
321
- return _objectSpread(_objectSpread(_objectSpread({}, (0, _getTheme.getBaseTheme)(globalTheme)), (0, _getTheme.getColorPalette)(globalTheme)), {}, {
317
+ var getCodeBlockTheme = exports.getCodeBlockTheme = function getCodeBlockTheme(maxLines) {
318
+ return _objectSpread(_objectSpread(_objectSpread({}, (0, _getTheme.getBaseTheme)()), (0, _getTheme.getColorPalette)()), {}, {
322
319
  lineNumberWidth: maxLines ? getLineNumWidth(maxLines) : undefined
323
320
  });
324
321
  };
package/dist/es2019/code-block.js CHANGED
@@ -1,7 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import { memo, useCallback, useMemo } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
- import { useGlobalTheme } from '@atlaskit/theme/components';
5
4
  import { useHighlightLines } from './internal/hooks/use-highlight';
6
5
  import { getCodeBlockStyles, getCodeBlockTheme } from './internal/theme/styles';
7
6
  import { normalizeLanguage } from './internal/utils/get-normalized-language';
@@ -30,8 +29,7 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
30
29
  shouldWrapLongLines = false
31
30
  }) {
32
31
  const numLines = (text || '').split('\n').length;
33
- const globalTheme = useGlobalTheme();
34
- const theme = useMemo(() => getCodeBlockTheme(globalTheme, numLines), [globalTheme, numLines]);
32
+ const theme = useMemo(() => getCodeBlockTheme(numLines), [numLines]);
35
33
  const getStyles = useMemo(() => getCodeBlockStyles(theme), [theme]);
36
34
  const styles = useMemo(() => css(getStyles(highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines)), [highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines, getStyles]);
37
35
  const {
package/dist/es2019/code.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  /** @jsx jsx */
3
- import React, { forwardRef, memo, useMemo } from 'react';
3
+ import React, { forwardRef, memo } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
- import { useGlobalTheme } from '@atlaskit/theme/components';
6
5
  import CodeBidiWarning from './bidi-warning';
7
6
  import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
8
7
  import { getCodeStyles } from './internal/theme/styles';
@@ -19,8 +18,7 @@ const Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code({
19
18
  testId,
20
19
  ...props
21
20
  }, ref) {
22
- const theme = useGlobalTheme();
23
- const styles = useMemo(() => css(getCodeStyles(theme)), [theme]);
21
+ const styles = css(getCodeStyles());
24
22
  const {
25
23
  children,
26
24
  codeBidiWarnings = true,