@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/dist/es2019/internal/theme/get-theme.js CHANGED
@@ -1,228 +1,69 @@
1
1
  import memoizeOne from 'memoize-one';
2
2
  import * as colors from '@atlaskit/theme/colors';
3
- import { themed } from '@atlaskit/theme/components';
4
3
  import { codeFontFamily } from '@atlaskit/theme/constants';
5
4
  // Hardcoded values have been used due to the current color palette not having any
6
5
  // accessible color options for Teal and Yellow and +20A
7
6
  const T800 = '#067384';
8
7
  const Y1100 = '#7A5D1A';
9
- const PLUS20 = '#3A434E';
10
- export const getBaseTheme = theme => ({
8
+ export const getBaseTheme = () => ({
11
9
  fontFamily: codeFontFamily(),
12
10
  fontFamilyItalic: `SFMono-MediumItalic, ${codeFontFamily()}`,
13
- backgroundColor: themed({
14
- light: `var(--ds-background-neutral, ${colors.N20})`,
15
- dark: `var(--ds-background-neutral, ${colors.DN50})`
16
- })({
17
- theme
18
- }),
19
- textColor: themed({
20
- light: `var(--ds-text, ${colors.N800})`,
21
- dark: `var(--ds-text, ${colors.DN800})`
22
- })({
23
- theme
24
- }),
25
- lineNumberColor: themed({
26
- light: `var(--ds-text-subtlest, ${colors.N400})`,
27
- dark: `var(--ds-text-subtlest, ${colors.DN400})`
28
- })({
29
- theme
30
- }),
31
- lineNumberBgColor: themed({
32
- light: `var(--ds-background-neutral, ${colors.N30})`,
33
- dark: `var(--ds-background-neutral, ${colors.DN20})`
34
- })({
35
- theme
36
- })
11
+ backgroundColor: `var(--ds-background-neutral, ${colors.N20})`,
12
+ textColor: `var(--ds-text, ${colors.N800})`,
13
+ lineNumberColor: `var(--ds-text-subtlest, ${colors.N400})`,
14
+ lineNumberBgColor: `var(--ds-background-neutral, ${colors.N30})`
37
15
  });
38
- export const defaultBaseTheme = getBaseTheme({
39
- mode: 'light'
40
- });
41
- export const getColorPalette = memoizeOne(theme => {
42
- const akTheme = {
43
- theme
44
- };
16
+ export const defaultBaseTheme = getBaseTheme();
17
+ export const getColorPalette = memoizeOne(() => {
45
18
  return {
46
- highlightedLineBgColor: themed({
47
- light: `var(--ds-background-neutral, ${colors.N30})`,
48
- dark: `var(--ds-background-neutral, ${PLUS20})`
49
- })(akTheme),
50
- highlightedLineBorderColor: themed({
51
- light: `var(--ds-border-focused, ${colors.B200})`,
52
- dark: `var(--ds-border-focused, ${colors.B100})`
53
- })(akTheme),
54
- substringColor: themed({
55
- light: `var(--ds-text-subtlest, ${colors.N400})`,
56
- dark: `var(--ds-text-subtlest, ${colors.DN400})`
57
- })(akTheme),
58
- keywordColor: themed({
59
- light: `var(--ds-text-accent-blue, ${colors.B400})`,
60
- dark: `var(--ds-text-accent-blue, ${colors.B75})`
61
- })(akTheme),
62
- attributeColor: themed({
63
- light: `var(--ds-text-accent-teal, ${T800})`,
64
- dark: `var(--ds-text-accent-teal, ${colors.T200})`
65
- })(akTheme),
66
- selectorTagColor: themed({
67
- light: `var(--ds-text-accent-blue, ${colors.B400})`,
68
- dark: `var(--ds-text-accent-blue, ${colors.B75})`
69
- })(akTheme),
70
- docTagColor: themed({
71
- light: `var(--ds-text-accent-yellow, ${Y1100})`,
72
- dark: `var(--ds-text-accent-yellow, ${colors.Y300})`
73
- })(akTheme),
74
- nameColor: themed({
75
- light: `var(--ds-text-accent-blue, ${colors.B400})`,
76
- dark: `var(--ds-text-accent-blue, ${colors.B75})`
77
- })(akTheme),
78
- builtInColor: themed({
79
- light: `var(--ds-text-accent-blue, ${colors.B400})`,
80
- dark: `var(--ds-text-accent-blue, ${colors.B75})`
81
- })(akTheme),
82
- literalColor: themed({
83
- light: `var(--ds-text-accent-blue, ${colors.B400})`,
84
- dark: `var(--ds-text-accent-blue, ${colors.B75})`
85
- })(akTheme),
86
- bulletColor: themed({
87
- light: `var(--ds-text-accent-blue, ${colors.B400})`,
88
- dark: `var(--ds-text-accent-blue, ${colors.B75})`
89
- })(akTheme),
90
- codeColor: themed({
91
- light: `var(--ds-text-accent-blue, ${colors.B400})`,
92
- dark: `var(--ds-text-accent-blue, ${colors.B75})`
93
- })(akTheme),
94
- regexpColor: themed({
95
- light: `var(--ds-text-accent-teal, ${T800})`,
96
- dark: `var(--ds-text-accent-teal, ${colors.T200})`
97
- })(akTheme),
98
- symbolColor: themed({
99
- light: `var(--ds-text-accent-teal, ${T800})`,
100
- dark: `var(--ds-text-accent-teal, ${colors.T200})`
101
- })(akTheme),
102
- variableColor: themed({
103
- light: `var(--ds-text-accent-teal, ${T800})`,
104
- dark: `var(--ds-text-accent-teal, ${colors.T200})`
105
- })(akTheme),
106
- templateVariableColor: themed({
107
- light: `var(--ds-text-accent-teal, ${T800})`,
108
- dark: `var(--ds-text-accent-teal, ${colors.T200})`
109
- })(akTheme),
110
- linkColor: themed({
111
- light: `var(--ds-text-accent-purple, ${colors.P300})`,
112
- dark: `var(--ds-text-accent-purple, ${colors.P75})`
113
- })(akTheme),
114
- selectorAttributeColor: themed({
115
- light: `var(--ds-text-accent-teal, ${T800})`,
116
- dark: `var(--ds-text-accent-teal, ${colors.T200})`
117
- })(akTheme),
118
- selectorPseudoColor: themed({
119
- light: `var(--ds-text-accent-teal, ${T800})`,
120
- dark: `var(--ds-text-accent-teal, ${colors.T200})`
121
- })(akTheme),
122
- typeColor: themed({
123
- light: `var(--ds-text-accent-teal, ${T800})`,
124
- dark: `var(--ds-text-accent-teal, ${colors.T100})`
125
- })(akTheme),
126
- stringColor: themed({
127
- light: `var(--ds-text-accent-green, ${colors.G500})`,
128
- dark: `var(--ds-text-accent-green, ${colors.G200})`
129
- })(akTheme),
130
- selectorIdColor: themed({
131
- light: `var(--ds-text-accent-teal, ${T800})`,
132
- dark: `var(--ds-text-accent-teal, ${colors.T100})`
133
- })(akTheme),
134
- selectorClassColor: themed({
135
- light: `var(--ds-text-accent-teal, ${T800})`,
136
- dark: `var(--ds-text-accent-teal, ${colors.T100})`
137
- })(akTheme),
138
- quoteColor: themed({
139
- light: `var(--ds-text-accent-teal, ${T800})`,
140
- dark: `var(--ds-text-accent-teal, ${colors.T100})`
141
- })(akTheme),
142
- templateTagColor: themed({
143
- light: `var(--ds-text-accent-teal, ${T800})`,
144
- dark: `var(--ds-text-accent-teal, ${colors.T100})`
145
- })(akTheme),
146
- titleColor: themed({
147
- light: `var(--ds-text-accent-purple, ${colors.P300})`,
148
- dark: `var(--ds-text-accent-purple, ${colors.P75})`
149
- })(akTheme),
150
- sectionColor: themed({
151
- light: `var(--ds-text-accent-purple, ${colors.P300})`,
152
- dark: `var(--ds-text-accent-purple, ${colors.P75})`
153
- })(akTheme),
154
- commentColor: themed({
155
- light: `var(--ds-text-subtlest, ${colors.N400})`,
156
- dark: `var(--ds-text-subtlest, ${colors.DN400})`
157
- })(akTheme),
158
- metaKeywordColor: themed({
159
- light: `var(--ds-text-accent-green, ${colors.G500})`,
160
- dark: `var(--ds-text-accent-green, ${colors.G200})`
161
- })(akTheme),
162
- metaColor: themed({
163
- light: `var(--ds-text-subtlest, ${colors.N400})`,
164
- dark: `var(--ds-text-subtlest, ${colors.DN400})`
165
- })(akTheme),
166
- functionColor: themed({
167
- light: `var(--ds-text, ${colors.N800})`,
168
- dark: `var(--ds-text, ${colors.DN800})`
169
- })(akTheme),
170
- numberColor: themed({
171
- light: `var(--ds-text-accent-blue, ${colors.B400})`,
172
- dark: `var(--ds-text-accent-blue, ${colors.B75})`
173
- })(akTheme),
174
- prologColor: themed({
175
- light: `var(--ds-text-accent-blue, ${colors.B400})`,
176
- dark: `var(--ds-text-accent-blue, ${colors.B75})`
177
- })(akTheme),
178
- cdataColor: themed({
179
- light: `var(--ds-text-subtlest, ${colors.N400})`,
180
- dark: `var(--ds-text-subtlest, ${colors.B75})`
181
- })(akTheme),
182
- punctuationColor: themed({
183
- light: `var(--ds-text, ${colors.N800})`,
184
- dark: `var(--ds-text, ${colors.DN800})`
185
- })(akTheme),
186
- propertyColor: themed({
187
- light: `var(--ds-text-accent-purple, ${colors.P300})`,
188
- dark: `var(--ds-text-accent-purple, ${colors.P75})`
189
- })(akTheme),
190
- constantColor: themed({
191
- light: `var(--ds-text-accent-teal, ${T800})`,
192
- dark: `var(--ds-text-accent-teal, ${colors.T100})`
193
- })(akTheme),
194
- booleanColor: themed({
195
- light: `var(--ds-text-accent-blue, ${colors.B400})`,
196
- dark: `var(--ds-text-accent-blue, ${colors.B75})`
197
- })(akTheme),
198
- charColor: themed({
199
- light: `var(--ds-text, ${colors.N800})`,
200
- dark: `var(--ds-text, ${colors.DN800})`
201
- })(akTheme),
202
- insertedColor: themed({
203
- light: `var(--ds-text-accent-green, ${colors.G500})`,
204
- dark: `var(--ds-text-accent-green, ${colors.B75})`
205
- })(akTheme),
206
- deletedColor: themed({
207
- light: `var(--ds-text-accent-red, ${colors.R500})`,
208
- dark: `var(--ds-text-accent-red, ${colors.B75})`
209
- })(akTheme),
210
- operatorColor: themed({
211
- light: `var(--ds-text, ${colors.N800})`,
212
- dark: `var(--ds-text, ${colors.B75})`
213
- })(akTheme),
214
- atruleColor: themed({
215
- light: `var(--ds-text-accent-green, ${colors.G500})`,
216
- dark: `var(--ds-text-accent-green, ${colors.G200})`
217
- })(akTheme),
218
- importantColor: themed({
219
- light: `var(--ds-text-accent-yellow, ${Y1100})`,
220
- dark: `var(--ds-text-accent-yellow, ${colors.Y300})`
221
- })(akTheme)
19
+ highlightedLineBgColor: `var(--ds-background-neutral, ${colors.N30})`,
20
+ highlightedLineBorderColor: `var(--ds-border-focused, ${colors.B200})`,
21
+ substringColor: `var(--ds-text-subtlest, ${colors.N400})`,
22
+ keywordColor: `var(--ds-text-accent-blue, ${colors.B400})`,
23
+ attributeColor: `var(--ds-text-accent-teal, ${T800})`,
24
+ selectorTagColor: `var(--ds-text-accent-blue, ${colors.B400})`,
25
+ docTagColor: `var(--ds-text-accent-yellow, ${Y1100})`,
26
+ nameColor: `var(--ds-text-accent-blue, ${colors.B400})`,
27
+ builtInColor: `var(--ds-text-accent-blue, ${colors.B400})`,
28
+ literalColor: `var(--ds-text-accent-blue, ${colors.B400})`,
29
+ bulletColor: `var(--ds-text-accent-blue, ${colors.B400})`,
30
+ codeColor: `var(--ds-text-accent-blue, ${colors.B400})`,
31
+ regexpColor: `var(--ds-text-accent-teal, ${T800})`,
32
+ symbolColor: `var(--ds-text-accent-teal, ${T800})`,
33
+ variableColor: `var(--ds-text-accent-teal, ${T800})`,
34
+ templateVariableColor: `var(--ds-text-accent-teal, ${T800})`,
35
+ linkColor: `var(--ds-text-accent-purple, ${colors.P300})`,
36
+ selectorAttributeColor: `var(--ds-text-accent-teal, ${T800})`,
37
+ selectorPseudoColor: `var(--ds-text-accent-teal, ${T800})`,
38
+ typeColor: `var(--ds-text-accent-teal, ${T800})`,
39
+ stringColor: `var(--ds-text-accent-green, ${colors.G500})`,
40
+ selectorIdColor: `var(--ds-text-accent-teal, ${T800})`,
41
+ selectorClassColor: `var(--ds-text-accent-teal, ${T800})`,
42
+ quoteColor: `var(--ds-text-accent-teal, ${T800})`,
43
+ templateTagColor: `var(--ds-text-accent-teal, ${T800})`,
44
+ titleColor: `var(--ds-text-accent-purple, ${colors.P300})`,
45
+ sectionColor: `var(--ds-text-accent-purple, ${colors.P300})`,
46
+ commentColor: `var(--ds-text-subtlest, ${colors.N400})`,
47
+ metaKeywordColor: `var(--ds-text-accent-green, ${colors.G500})`,
48
+ metaColor: `var(--ds-text-subtlest, ${colors.N400})`,
49
+ functionColor: `var(--ds-text, ${colors.N800})`,
50
+ numberColor: `var(--ds-text-accent-blue, ${colors.B400})`,
51
+ prologColor: `var(--ds-text-accent-blue, ${colors.B400})`,
52
+ cdataColor: `var(--ds-text-subtlest, ${colors.N400})`,
53
+ punctuationColor: `var(--ds-text, ${colors.N800})`,
54
+ propertyColor: `var(--ds-text-accent-purple, ${colors.P300})`,
55
+ constantColor: `var(--ds-text-accent-teal, ${T800})`,
56
+ booleanColor: `var(--ds-text-accent-blue, ${colors.B400})`,
57
+ charColor: `var(--ds-text, ${colors.N800})`,
58
+ insertedColor: `var(--ds-text-accent-green, ${colors.G500})`,
59
+ deletedColor: `var(--ds-text-accent-red, ${colors.R500})`,
60
+ operatorColor: `var(--ds-text, ${colors.N800})`,
61
+ atruleColor: `var(--ds-text-accent-green, ${colors.G500})`,
62
+ importantColor: `var(--ds-text-accent-yellow, ${Y1100})`
222
63
  };
223
64
  });
224
- const getTheme = theme => ({
225
- ...getBaseTheme(theme),
226
- ...getColorPalette(theme)
65
+ const getTheme = () => ({
66
+ ...getBaseTheme(),
67
+ ...getColorPalette()
227
68
  });
228
69
  export default getTheme;
package/dist/es2019/internal/theme/styles.js CHANGED
@@ -1,4 +1,3 @@
1
- import { borderRadius } from '@atlaskit/theme/constants';
2
1
  import { CODE_FONT_SIZE, CODE_LINE_HEIGHT, HIGHLIGHT_BORDER_WIDTH, LINE_NUMBER_GUTTER, SPACING, VAR_CODE_BG_COLOR, VAR_CODE_LINE_NUMBER_BG_COLOR } from './constants';
3
2
  import { getBaseTheme, getColorPalette } from './get-theme';
4
3
  export const getLineNumWidth = numLines => {
@@ -189,7 +188,7 @@ export const getBaseCodeStyles = theme => ({
189
188
  backgroundColor: `var(${VAR_CODE_BG_COLOR},${theme.backgroundColor})`,
190
189
  color: theme.textColor,
191
190
  borderStyle: 'none',
192
- borderRadius: `${borderRadius()}px`
191
+ borderRadius: "var(--ds-border-radius, 3px)"
193
192
  });
194
193
 
195
194
  /**
@@ -284,10 +283,8 @@ export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEnd
284
283
  content: '" "'
285
284
  }
286
285
  });
287
- export const getCodeStyles = globalTheme => {
288
- // Required to have proper compatibility with styled components interpolations
289
- const akTheme = 'theme' in globalTheme ? globalTheme.theme : globalTheme;
290
- const theme = getBaseTheme(akTheme);
286
+ export const getCodeStyles = () => {
287
+ const theme = getBaseTheme();
291
288
  const baseStyles = getBaseCodeStyles(theme);
292
289
  return {
293
290
  ...baseStyles,
@@ -300,10 +297,10 @@ export const getCodeStyles = globalTheme => {
300
297
  whiteSpace: 'pre-wrap'
301
298
  };
302
299
  };
303
- export const getCodeBlockTheme = (globalTheme, maxLines) => {
300
+ export const getCodeBlockTheme = maxLines => {
304
301
  return {
305
- ...getBaseTheme(globalTheme),
306
- ...getColorPalette(globalTheme),
302
+ ...getBaseTheme(),
303
+ ...getColorPalette(),
307
304
  lineNumberWidth: maxLines ? getLineNumWidth(maxLines) : undefined
308
305
  };
309
306
  };
package/dist/esm/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';
@@ -37,10 +36,9 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
37
36
  _ref$shouldWrapLongLi = _ref.shouldWrapLongLines,
38
37
  shouldWrapLongLines = _ref$shouldWrapLongLi === void 0 ? false : _ref$shouldWrapLongLi;
39
38
  var numLines = (text || '').split('\n').length;
40
- var globalTheme = useGlobalTheme();
41
39
  var theme = useMemo(function () {
42
- return getCodeBlockTheme(globalTheme, numLines);
43
- }, [globalTheme, numLines]);
40
+ return getCodeBlockTheme(numLines);
41
+ }, [numLines]);
44
42
  var getStyles = useMemo(function () {
45
43
  return getCodeBlockStyles(theme);
46
44
  }, [theme]);
package/dist/esm/code.js CHANGED
@@ -3,9 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
3
3
  var _excluded = ["testId"],
4
4
  _excluded2 = ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"];
5
5
  /** @jsx jsx */
6
- import React, { forwardRef, memo, useMemo } from 'react';
6
+ import React, { forwardRef, memo } from 'react';
7
7
  import { css, jsx } from '@emotion/react';
8
- import { useGlobalTheme } from '@atlaskit/theme/components';
9
8
  import CodeBidiWarning from './bidi-warning';
10
9
  import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
11
10
  import { getCodeStyles } from './internal/theme/styles';
@@ -21,10 +20,7 @@ import { getCodeStyles } from './internal/theme/styles';
21
20
  var Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code(_ref, ref) {
22
21
  var testId = _ref.testId,
23
22
  props = _objectWithoutProperties(_ref, _excluded);
24
- var theme = useGlobalTheme();
25
- var styles = useMemo(function () {
26
- return css(getCodeStyles(theme));
27
- }, [theme]);
23
+ var styles = css(getCodeStyles());
28
24
  var children = props.children,
29
25
  _props$codeBidiWarnin = props.codeBidiWarnings,
30
26
  codeBidiWarnings = _props$codeBidiWarnin === void 0 ? true : _props$codeBidiWarnin,
package/dist/esm/internal/theme/get-theme.js CHANGED
@@ -3,230 +3,71 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
3
3
  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) { _defineProperty(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; }
4
4
  import memoizeOne from 'memoize-one';
5
5
  import * as colors from '@atlaskit/theme/colors';
6
- import { themed } from '@atlaskit/theme/components';
7
6
  import { codeFontFamily } from '@atlaskit/theme/constants';
8
7
  // Hardcoded values have been used due to the current color palette not having any
9
8
  // accessible color options for Teal and Yellow and +20A
10
9
  var T800 = '#067384';
11
10
  var Y1100 = '#7A5D1A';
12
- var PLUS20 = '#3A434E';
13
- export var getBaseTheme = function getBaseTheme(theme) {
11
+ export var getBaseTheme = function getBaseTheme() {
14
12
  return {
15
13
  fontFamily: codeFontFamily(),
16
14
  fontFamilyItalic: "SFMono-MediumItalic, ".concat(codeFontFamily()),
17
- backgroundColor: themed({
18
- light: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
19
- dark: "var(--ds-background-neutral, ".concat(colors.DN50, ")")
20
- })({
21
- theme: theme
22
- }),
23
- textColor: themed({
24
- light: "var(--ds-text, ".concat(colors.N800, ")"),
25
- dark: "var(--ds-text, ".concat(colors.DN800, ")")
26
- })({
27
- theme: theme
28
- }),
29
- lineNumberColor: themed({
30
- light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
31
- dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
32
- })({
33
- theme: theme
34
- }),
35
- lineNumberBgColor: themed({
36
- light: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
37
- dark: "var(--ds-background-neutral, ".concat(colors.DN20, ")")
38
- })({
39
- theme: theme
40
- })
15
+ backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
16
+ textColor: "var(--ds-text, ".concat(colors.N800, ")"),
17
+ lineNumberColor: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
18
+ lineNumberBgColor: "var(--ds-background-neutral, ".concat(colors.N30, ")")
41
19
  };
42
20
  };
43
- export var defaultBaseTheme = getBaseTheme({
44
- mode: 'light'
45
- });
46
- export var getColorPalette = memoizeOne(function (theme) {
47
- var akTheme = {
48
- theme: theme
49
- };
21
+ export var defaultBaseTheme = getBaseTheme();
22
+ export var getColorPalette = memoizeOne(function () {
50
23
  return {
51
- highlightedLineBgColor: themed({
52
- light: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
53
- dark: "var(--ds-background-neutral, ".concat(PLUS20, ")")
54
- })(akTheme),
55
- highlightedLineBorderColor: themed({
56
- light: "var(--ds-border-focused, ".concat(colors.B200, ")"),
57
- dark: "var(--ds-border-focused, ".concat(colors.B100, ")")
58
- })(akTheme),
59
- substringColor: themed({
60
- light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
61
- dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
62
- })(akTheme),
63
- keywordColor: themed({
64
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
65
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
66
- })(akTheme),
67
- attributeColor: themed({
68
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
69
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
70
- })(akTheme),
71
- selectorTagColor: themed({
72
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
73
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
74
- })(akTheme),
75
- docTagColor: themed({
76
- light: "var(--ds-text-accent-yellow, ".concat(Y1100, ")"),
77
- dark: "var(--ds-text-accent-yellow, ".concat(colors.Y300, ")")
78
- })(akTheme),
79
- nameColor: themed({
80
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
81
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
82
- })(akTheme),
83
- builtInColor: themed({
84
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
85
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
86
- })(akTheme),
87
- literalColor: themed({
88
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
89
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
90
- })(akTheme),
91
- bulletColor: themed({
92
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
93
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
94
- })(akTheme),
95
- codeColor: themed({
96
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
97
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
98
- })(akTheme),
99
- regexpColor: themed({
100
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
101
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
102
- })(akTheme),
103
- symbolColor: themed({
104
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
105
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
106
- })(akTheme),
107
- variableColor: themed({
108
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
109
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
110
- })(akTheme),
111
- templateVariableColor: themed({
112
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
113
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
114
- })(akTheme),
115
- linkColor: themed({
116
- light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
117
- dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
118
- })(akTheme),
119
- selectorAttributeColor: themed({
120
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
121
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
122
- })(akTheme),
123
- selectorPseudoColor: themed({
124
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
125
- dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
126
- })(akTheme),
127
- typeColor: themed({
128
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
129
- dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
130
- })(akTheme),
131
- stringColor: themed({
132
- light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
133
- dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
134
- })(akTheme),
135
- selectorIdColor: themed({
136
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
137
- dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
138
- })(akTheme),
139
- selectorClassColor: themed({
140
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
141
- dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
142
- })(akTheme),
143
- quoteColor: themed({
144
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
145
- dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
146
- })(akTheme),
147
- templateTagColor: themed({
148
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
149
- dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
150
- })(akTheme),
151
- titleColor: themed({
152
- light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
153
- dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
154
- })(akTheme),
155
- sectionColor: themed({
156
- light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
157
- dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
158
- })(akTheme),
159
- commentColor: themed({
160
- light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
161
- dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
162
- })(akTheme),
163
- metaKeywordColor: themed({
164
- light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
165
- dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
166
- })(akTheme),
167
- metaColor: themed({
168
- light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
169
- dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
170
- })(akTheme),
171
- functionColor: themed({
172
- light: "var(--ds-text, ".concat(colors.N800, ")"),
173
- dark: "var(--ds-text, ".concat(colors.DN800, ")")
174
- })(akTheme),
175
- numberColor: themed({
176
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
177
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
178
- })(akTheme),
179
- prologColor: themed({
180
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
181
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
182
- })(akTheme),
183
- cdataColor: themed({
184
- light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
185
- dark: "var(--ds-text-subtlest, ".concat(colors.B75, ")")
186
- })(akTheme),
187
- punctuationColor: themed({
188
- light: "var(--ds-text, ".concat(colors.N800, ")"),
189
- dark: "var(--ds-text, ".concat(colors.DN800, ")")
190
- })(akTheme),
191
- propertyColor: themed({
192
- light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
193
- dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
194
- })(akTheme),
195
- constantColor: themed({
196
- light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
197
- dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
198
- })(akTheme),
199
- booleanColor: themed({
200
- light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
201
- dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
202
- })(akTheme),
203
- charColor: themed({
204
- light: "var(--ds-text, ".concat(colors.N800, ")"),
205
- dark: "var(--ds-text, ".concat(colors.DN800, ")")
206
- })(akTheme),
207
- insertedColor: themed({
208
- light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
209
- dark: "var(--ds-text-accent-green, ".concat(colors.B75, ")")
210
- })(akTheme),
211
- deletedColor: themed({
212
- light: "var(--ds-text-accent-red, ".concat(colors.R500, ")"),
213
- dark: "var(--ds-text-accent-red, ".concat(colors.B75, ")")
214
- })(akTheme),
215
- operatorColor: themed({
216
- light: "var(--ds-text, ".concat(colors.N800, ")"),
217
- dark: "var(--ds-text, ".concat(colors.B75, ")")
218
- })(akTheme),
219
- atruleColor: themed({
220
- light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
221
- dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
222
- })(akTheme),
223
- importantColor: themed({
224
- light: "var(--ds-text-accent-yellow, ".concat(Y1100, ")"),
225
- dark: "var(--ds-text-accent-yellow, ".concat(colors.Y300, ")")
226
- })(akTheme)
24
+ highlightedLineBgColor: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
25
+ highlightedLineBorderColor: "var(--ds-border-focused, ".concat(colors.B200, ")"),
26
+ substringColor: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
27
+ keywordColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
28
+ attributeColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
29
+ selectorTagColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
30
+ docTagColor: "var(--ds-text-accent-yellow, ".concat(Y1100, ")"),
31
+ nameColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
32
+ builtInColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
33
+ literalColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
34
+ bulletColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
35
+ codeColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
36
+ regexpColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
37
+ symbolColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
38
+ variableColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
39
+ templateVariableColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
40
+ linkColor: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
41
+ selectorAttributeColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
42
+ selectorPseudoColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
43
+ typeColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
44
+ stringColor: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
45
+ selectorIdColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
46
+ selectorClassColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
47
+ quoteColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
48
+ templateTagColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
49
+ titleColor: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
50
+ sectionColor: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
51
+ commentColor: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
52
+ metaKeywordColor: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
53
+ metaColor: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
54
+ functionColor: "var(--ds-text, ".concat(colors.N800, ")"),
55
+ numberColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
56
+ prologColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
57
+ cdataColor: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
58
+ punctuationColor: "var(--ds-text, ".concat(colors.N800, ")"),
59
+ propertyColor: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
60
+ constantColor: "var(--ds-text-accent-teal, ".concat(T800, ")"),
61
+ booleanColor: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
62
+ charColor: "var(--ds-text, ".concat(colors.N800, ")"),
63
+ insertedColor: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
64
+ deletedColor: "var(--ds-text-accent-red, ".concat(colors.R500, ")"),
65
+ operatorColor: "var(--ds-text, ".concat(colors.N800, ")"),
66
+ atruleColor: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
67
+ importantColor: "var(--ds-text-accent-yellow, ".concat(Y1100, ")")
227
68
  };
228
69
  });
229
- var getTheme = function getTheme(theme) {
230
- return _objectSpread(_objectSpread({}, getBaseTheme(theme)), getColorPalette(theme));
70
+ var getTheme = function getTheme() {
71
+ return _objectSpread(_objectSpread({}, getBaseTheme()), getColorPalette());
231
72
  };
232
73
  export default getTheme;