@atlaskit/code 14.6.8 → 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.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/bidi-warning/bidi-warning-decorator.js +1 -2
- package/dist/cjs/code-block.js +3 -6
- package/dist/cjs/code.js +2 -7
- package/dist/cjs/constants.js +2 -3
- package/dist/cjs/internal/hooks/use-highlight.js +2 -3
- package/dist/cjs/internal/theme/constants.js +8 -16
- package/dist/cjs/internal/theme/get-theme.js +54 -217
- package/dist/cjs/internal/theme/styles.js +26 -34
- package/dist/cjs/internal/utils/get-normalized-language.js +2 -3
- package/dist/cjs/syntax-highlighter/async.js +2 -3
- package/dist/cjs/syntax-highlighter/index.js +1 -2
- package/dist/cjs/syntax-highlighter/lib/highlight.js +1 -2
- package/dist/cjs/syntax-highlighter/lib/process/create-line.js +1 -2
- package/dist/cjs/syntax-highlighter/lib/process/index.js +2 -3
- package/dist/cjs/syntax-highlighter/types.js +2 -3
- package/dist/es2019/code-block.js +1 -3
- package/dist/es2019/code.js +2 -4
- package/dist/es2019/internal/theme/get-theme.js +54 -213
- package/dist/es2019/internal/theme/styles.js +6 -9
- package/dist/esm/code-block.js +2 -4
- package/dist/esm/code.js +2 -6
- package/dist/esm/internal/theme/get-theme.js +53 -212
- package/dist/esm/internal/theme/styles.js +5 -8
- package/dist/esm/syntax-highlighter/lib/process/index.js +2 -3
- package/dist/types/internal/theme/get-theme.d.ts +3 -4
- package/dist/types/internal/theme/styles.d.ts +3 -6
- package/dist/types-ts4.5/internal/theme/get-theme.d.ts +3 -4
- package/dist/types-ts4.5/internal/theme/styles.d.ts +3 -6
- package/package.json +3 -3
- package/report.api.md +1 -8
- package/tmp/api-report-tmp.d.ts +1 -4
|
@@ -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
|
|
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:
|
|
18
|
-
|
|
19
|
-
|
|
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
|
-
|
|
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:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
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(
|
|
230
|
-
return _objectSpread(_objectSpread({}, getBaseTheme(
|
|
70
|
+
var getTheme = function getTheme() {
|
|
71
|
+
return _objectSpread(_objectSpread({}, getBaseTheme()), getColorPalette());
|
|
231
72
|
};
|
|
232
73
|
export default getTheme;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
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; }
|
|
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
|
-
import { borderRadius } from '@atlaskit/theme/constants';
|
|
5
4
|
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';
|
|
6
5
|
import { getBaseTheme, getColorPalette } from './get-theme';
|
|
7
6
|
export var getLineNumWidth = function getLineNumWidth(numLines) {
|
|
@@ -197,7 +196,7 @@ export var getBaseCodeStyles = function getBaseCodeStyles(theme) {
|
|
|
197
196
|
backgroundColor: "var(".concat(VAR_CODE_BG_COLOR, ",").concat(theme.backgroundColor, ")"),
|
|
198
197
|
color: theme.textColor,
|
|
199
198
|
borderStyle: 'none',
|
|
200
|
-
borderRadius: "
|
|
199
|
+
borderRadius: "var(--ds-border-radius, 3px)"
|
|
201
200
|
};
|
|
202
201
|
};
|
|
203
202
|
|
|
@@ -295,10 +294,8 @@ export var getCodeBlockStyles = function getCodeBlockStyles(theme) {
|
|
|
295
294
|
});
|
|
296
295
|
};
|
|
297
296
|
};
|
|
298
|
-
export var getCodeStyles = function getCodeStyles(
|
|
299
|
-
|
|
300
|
-
var akTheme = 'theme' in globalTheme ? globalTheme.theme : globalTheme;
|
|
301
|
-
var theme = getBaseTheme(akTheme);
|
|
297
|
+
export var getCodeStyles = function getCodeStyles() {
|
|
298
|
+
var theme = getBaseTheme();
|
|
302
299
|
var baseStyles = getBaseCodeStyles(theme);
|
|
303
300
|
return _objectSpread(_objectSpread({}, baseStyles), {}, {
|
|
304
301
|
display: 'inline',
|
|
@@ -310,8 +307,8 @@ export var getCodeStyles = function getCodeStyles(globalTheme) {
|
|
|
310
307
|
whiteSpace: 'pre-wrap'
|
|
311
308
|
});
|
|
312
309
|
};
|
|
313
|
-
export var getCodeBlockTheme = function getCodeBlockTheme(
|
|
314
|
-
return _objectSpread(_objectSpread(_objectSpread({}, getBaseTheme(
|
|
310
|
+
export var getCodeBlockTheme = function getCodeBlockTheme(maxLines) {
|
|
311
|
+
return _objectSpread(_objectSpread(_objectSpread({}, getBaseTheme()), getColorPalette()), {}, {
|
|
315
312
|
lineNumberWidth: maxLines ? getLineNumWidth(maxLines) : undefined
|
|
316
313
|
});
|
|
317
314
|
};
|
|
@@ -32,7 +32,7 @@ export default function processLines(_ref) {
|
|
|
32
32
|
var testNode = tree[index];
|
|
33
33
|
if (testNode.type === 'text') {
|
|
34
34
|
index++;
|
|
35
|
-
return
|
|
35
|
+
return 1; // continue
|
|
36
36
|
}
|
|
37
37
|
var node = testNode;
|
|
38
38
|
var firstChildNode = node.children[0];
|
|
@@ -93,8 +93,7 @@ export default function processLines(_ref) {
|
|
|
93
93
|
index++;
|
|
94
94
|
};
|
|
95
95
|
while (index < tree.length) {
|
|
96
|
-
|
|
97
|
-
if (_ret === "continue") continue;
|
|
96
|
+
if (_loop()) continue;
|
|
98
97
|
}
|
|
99
98
|
if (lastLineBreakIndex !== tree.length - 1) {
|
|
100
99
|
var children = tree.slice(lastLineBreakIndex + 1, tree.length);
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import type { Theme } from '@atlaskit/theme/types';
|
|
2
1
|
import type { CodeBlockTheme, CodeTheme } from './types';
|
|
3
|
-
export declare const getBaseTheme: (
|
|
2
|
+
export declare const getBaseTheme: () => CodeTheme;
|
|
4
3
|
export declare const defaultBaseTheme: CodeTheme;
|
|
5
|
-
export declare const getColorPalette: import("memoize-one").MemoizedFn<(
|
|
6
|
-
declare const getTheme: (
|
|
4
|
+
export declare const getColorPalette: import("memoize-one").MemoizedFn<() => CodeBlockTheme>;
|
|
5
|
+
declare const getTheme: () => CodeBlockTheme;
|
|
7
6
|
export default getTheme;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { CSSObject } from '@emotion/react';
|
|
2
|
-
import type { Theme } from '@atlaskit/theme/types';
|
|
3
2
|
import type { CodeBlockTheme, CodeTheme } from './types';
|
|
4
3
|
export declare const getLineNumWidth: (numLines: number) => string;
|
|
5
4
|
/**
|
|
@@ -12,7 +11,7 @@ export declare const getBaseCodeStyles: (theme: CodeTheme) => {
|
|
|
12
11
|
backgroundColor: string;
|
|
13
12
|
color: string | undefined;
|
|
14
13
|
borderStyle: string;
|
|
15
|
-
borderRadius:
|
|
14
|
+
borderRadius: "var(--ds-border-radius)";
|
|
16
15
|
};
|
|
17
16
|
/**
|
|
18
17
|
* Takes an implemented CodeBlock theme, and returns styles required for
|
|
@@ -21,7 +20,5 @@ export declare const getBaseCodeStyles: (theme: CodeTheme) => {
|
|
|
21
20
|
* @param theme
|
|
22
21
|
*/
|
|
23
22
|
export declare const getCodeBlockStyles: (theme: CodeBlockTheme) => (highlightedStartText: string, highlightedEndText: string, showLineNumbers: boolean, shouldWrapLongLines: boolean) => CSSObject;
|
|
24
|
-
export declare const getCodeStyles: (
|
|
25
|
-
|
|
26
|
-
}) => CSSObject;
|
|
27
|
-
export declare const getCodeBlockTheme: (globalTheme: Theme, maxLines?: number) => CodeBlockTheme;
|
|
23
|
+
export declare const getCodeStyles: () => CSSObject;
|
|
24
|
+
export declare const getCodeBlockTheme: (maxLines?: number) => CodeBlockTheme;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import type { Theme } from '@atlaskit/theme/types';
|
|
2
1
|
import type { CodeBlockTheme, CodeTheme } from './types';
|
|
3
|
-
export declare const getBaseTheme: (
|
|
2
|
+
export declare const getBaseTheme: () => CodeTheme;
|
|
4
3
|
export declare const defaultBaseTheme: CodeTheme;
|
|
5
|
-
export declare const getColorPalette: import("memoize-one").MemoizedFn<(
|
|
6
|
-
declare const getTheme: (
|
|
4
|
+
export declare const getColorPalette: import("memoize-one").MemoizedFn<() => CodeBlockTheme>;
|
|
5
|
+
declare const getTheme: () => CodeBlockTheme;
|
|
7
6
|
export default getTheme;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { CSSObject } from '@emotion/react';
|
|
2
|
-
import type { Theme } from '@atlaskit/theme/types';
|
|
3
2
|
import type { CodeBlockTheme, CodeTheme } from './types';
|
|
4
3
|
export declare const getLineNumWidth: (numLines: number) => string;
|
|
5
4
|
/**
|
|
@@ -12,7 +11,7 @@ export declare const getBaseCodeStyles: (theme: CodeTheme) => {
|
|
|
12
11
|
backgroundColor: string;
|
|
13
12
|
color: string | undefined;
|
|
14
13
|
borderStyle: string;
|
|
15
|
-
borderRadius:
|
|
14
|
+
borderRadius: "var(--ds-border-radius)";
|
|
16
15
|
};
|
|
17
16
|
/**
|
|
18
17
|
* Takes an implemented CodeBlock theme, and returns styles required for
|
|
@@ -21,7 +20,5 @@ export declare const getBaseCodeStyles: (theme: CodeTheme) => {
|
|
|
21
20
|
* @param theme
|
|
22
21
|
*/
|
|
23
22
|
export declare const getCodeBlockStyles: (theme: CodeBlockTheme) => (highlightedStartText: string, highlightedEndText: string, showLineNumbers: boolean, shouldWrapLongLines: boolean) => CSSObject;
|
|
24
|
-
export declare const getCodeStyles: (
|
|
25
|
-
|
|
26
|
-
}) => CSSObject;
|
|
27
|
-
export declare const getCodeBlockTheme: (globalTheme: Theme, maxLines?: number) => CodeBlockTheme;
|
|
23
|
+
export declare const getCodeStyles: () => CSSObject;
|
|
24
|
+
export declare const getCodeBlockTheme: (maxLines?: number) => CodeBlockTheme;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/code",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.0",
|
|
4
4
|
"description": "Code highlights short strings of code snippets inline with body text.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@atlaskit/codemod-utils": "^4.2.0",
|
|
30
30
|
"@atlaskit/theme": "^12.6.0",
|
|
31
|
-
"@atlaskit/tokens": "^1.
|
|
32
|
-
"@atlaskit/tooltip": "^
|
|
31
|
+
"@atlaskit/tokens": "^1.28.0",
|
|
32
|
+
"@atlaskit/tooltip": "^18.0.0",
|
|
33
33
|
"@atlaskit/visually-hidden": "^1.2.0",
|
|
34
34
|
"@babel/runtime": "^7.0.0",
|
|
35
35
|
"@emotion/react": "^11.7.1",
|
package/report.api.md
CHANGED
|
@@ -22,7 +22,6 @@ import type { HTMLProps } from 'react';
|
|
|
22
22
|
import { NamedExoticComponent } from 'react';
|
|
23
23
|
import { default as React_2 } from 'react';
|
|
24
24
|
import type { ReactNode } from 'react';
|
|
25
|
-
import type { Theme } from '@atlaskit/theme/types';
|
|
26
25
|
|
|
27
26
|
// @public
|
|
28
27
|
export const Code: React_2.MemoExoticComponent<
|
|
@@ -426,13 +425,7 @@ export interface CodeProps extends HTMLProps<HTMLElement> {
|
|
|
426
425
|
}
|
|
427
426
|
|
|
428
427
|
// @public (undocumented)
|
|
429
|
-
export const getCodeStyles: (
|
|
430
|
-
globalTheme:
|
|
431
|
-
| Theme
|
|
432
|
-
| {
|
|
433
|
-
theme: Theme;
|
|
434
|
-
},
|
|
435
|
-
) => CSSObject;
|
|
428
|
+
export const getCodeStyles: () => CSSObject;
|
|
436
429
|
|
|
437
430
|
// @public (undocumented)
|
|
438
431
|
export type Language = (typeof SUPPORTED_LANGUAGES)[number];
|
package/tmp/api-report-tmp.d.ts
CHANGED
|
@@ -11,7 +11,6 @@ import type { HTMLProps } from 'react';
|
|
|
11
11
|
import { NamedExoticComponent } from 'react';
|
|
12
12
|
import { default as React_2 } from 'react';
|
|
13
13
|
import type { ReactNode } from 'react';
|
|
14
|
-
import type { Theme } from '@atlaskit/theme/types';
|
|
15
14
|
|
|
16
15
|
// @public
|
|
17
16
|
export const Code: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<Pick<CodeProps, "about" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "as" | "async" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "autoPlay" | "autoSave" | "capture" | "cellPadding" | "cellSpacing" | "challenge" | "charSet" | "checked" | "children" | "cite" | "classID" | "className" | "codeBidiWarningLabel" | "codeBidiWarningTooltipEnabled" | "codeBidiWarnings" | "colSpan" | "color" | "cols" | "content" | "contentEditable" | "contextMenu" | "controls" | "coords" | "crossOrigin" | "dangerouslySetInnerHTML" | "data" | "datatype" | "dateTime" | "default" | "defaultChecked" | "defaultValue" | "defer" | "dir" | "disabled" | "download" | "draggable" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "hidden" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "id" | "inlist" | "inputMode" | "integrity" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "keyParams" | "keyType" | "kind" | "label" | "lang" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "prefix" | "preload" | "property" | "radioGroup" | "readOnly" | "rel" | "required" | "resource" | "results" | "reversed" | "role" | "rowSpan" | "rows" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "security" | "selected" | "shape" | "size" | "sizes" | "slot" | "span" | "spellCheck" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "style" | "summary" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "target" | "testId" | "title" | "translate" | "type" | "typeof" | "unselectable" | "useMap" | "value" | "vocab" | "width" | "wmode" | "wrap"> & React_2.RefAttributes<HTMLElement>>>;
|
|
@@ -44,9 +43,7 @@ export interface CodeProps extends HTMLProps<HTMLElement> {
|
|
|
44
43
|
}
|
|
45
44
|
|
|
46
45
|
// @public (undocumented)
|
|
47
|
-
export const getCodeStyles: (
|
|
48
|
-
theme: Theme;
|
|
49
|
-
}) => CSSObject;
|
|
46
|
+
export const getCodeStyles: () => CSSObject;
|
|
50
47
|
|
|
51
48
|
// @public (undocumented)
|
|
52
49
|
export type Language = (typeof SUPPORTED_LANGUAGES)[number];
|