@atlaskit/code 14.3.2 → 14.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/bidi-warning/ui/styled.js +4 -3
  3. package/dist/cjs/internal/theme/get-theme.js +96 -96
  4. package/dist/cjs/internal/theme/styles.js +1 -0
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/bidi-warning/ui/styled.js +4 -3
  7. package/dist/es2019/internal/theme/get-theme.js +96 -96
  8. package/dist/es2019/internal/theme/styles.js +1 -0
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/bidi-warning/ui/styled.js +4 -3
  11. package/dist/esm/internal/theme/get-theme.js +96 -96
  12. package/dist/esm/internal/theme/styles.js +1 -0
  13. package/dist/esm/version.json +1 -1
  14. package/package.json +5 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/code
2
2
 
3
+ ## 14.3.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`a1a89347baa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a1a89347baa) - [ux] Instrumented `@atlaskit/code` with the new theming package, `@atlaskit/tokens`.
8
+
9
+ New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
10
+ These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
11
+
12
+ - Updated dependencies
13
+
3
14
  ## 14.3.2
4
15
 
5
16
  ### Patch Changes
package/dist/cjs/bidi-warning/ui/styled.js CHANGED
@@ -26,7 +26,7 @@ var decoration = (0, _core.css)({
26
26
  padding: '0 4px',
27
27
  fontSize: '14px',
28
28
  lineHeight: '18px',
29
- background: _colors.Y75,
29
+ background: "var(--ds-background-warning, ".concat(_colors.Y75, ")"),
30
30
 
31
31
  /**
32
32
  * Ensures the decoration receives pointer events when it occurs with
@@ -38,11 +38,12 @@ var decoration = (0, _core.css)({
38
38
  content: '"<"attr(data-bidi-character-code)">"',
39
39
  // This color is Y800 which is not yet rolled out
40
40
  // https://hello.atlassian.net/wiki/spaces/~tswan/pages/1366555782?focusedCommentId=1370387374#comment-1370387374
41
- color: '#7F5F01',
41
+ color: "var(--ds-text-warning, #7F5F01)",
42
42
  fontStyle: 'normal'
43
43
  },
44
44
  ':hover:before': {
45
- color: '#533F04'
45
+ color: "var(--ds-text-warning, #533F04)",
46
+ background: "var(--ds-background-warning-hovered, ".concat(_colors.Y75, ")")
46
47
  }
47
48
  });
48
49
 
package/dist/cjs/internal/theme/get-theme.js CHANGED
@@ -38,26 +38,26 @@ var getBaseTheme = function getBaseTheme(theme) {
38
38
  fontFamily: (0, _constants.codeFontFamily)(),
39
39
  fontFamilyItalic: "SFMono-MediumItalic, ".concat((0, _constants.codeFontFamily)()),
40
40
  backgroundColor: (0, _components.themed)({
41
- light: colors.N20,
42
- dark: colors.DN50
41
+ light: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
42
+ dark: "var(--ds-background-neutral, ".concat(colors.DN50, ")")
43
43
  })({
44
44
  theme: theme
45
45
  }),
46
46
  textColor: (0, _components.themed)({
47
- light: colors.N800,
48
- dark: colors.DN800
47
+ light: "var(--ds-text, ".concat(colors.N800, ")"),
48
+ dark: "var(--ds-text, ".concat(colors.DN800, ")")
49
49
  })({
50
50
  theme: theme
51
51
  }),
52
52
  lineNumberColor: (0, _components.themed)({
53
- light: colors.N400,
54
- dark: colors.DN400
53
+ light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
54
+ dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
55
55
  })({
56
56
  theme: theme
57
57
  }),
58
58
  lineNumberBgColor: (0, _components.themed)({
59
- light: colors.N30,
60
- dark: colors.DN20
59
+ light: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
60
+ dark: "var(--ds-background-neutral, ".concat(colors.DN20, ")")
61
61
  })({
62
62
  theme: theme
63
63
  })
@@ -75,180 +75,180 @@ var getColorPalette = (0, _memoizeOne.default)(function (theme) {
75
75
  };
76
76
  return {
77
77
  highlightedLineBgColor: (0, _components.themed)({
78
- light: colors.N30,
79
- dark: PLUS20
78
+ light: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
79
+ dark: "var(--ds-background-neutral, ".concat(PLUS20, ")")
80
80
  })(akTheme),
81
81
  highlightedLineBorderColor: (0, _components.themed)({
82
- light: colors.B200,
83
- dark: colors.B100
82
+ light: "var(--ds-border-focused, ".concat(colors.B200, ")"),
83
+ dark: "var(--ds-border-focused, ".concat(colors.B100, ")")
84
84
  })(akTheme),
85
85
  substringColor: (0, _components.themed)({
86
- light: colors.N400,
87
- dark: colors.DN400
86
+ light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
87
+ dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
88
88
  })(akTheme),
89
89
  keywordColor: (0, _components.themed)({
90
- light: colors.B400,
91
- dark: colors.B75
90
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
91
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
92
92
  })(akTheme),
93
93
  attributeColor: (0, _components.themed)({
94
- light: T800,
95
- dark: colors.T200
94
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
95
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
96
96
  })(akTheme),
97
97
  selectorTagColor: (0, _components.themed)({
98
- light: colors.B400,
99
- dark: colors.B75
98
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
99
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
100
100
  })(akTheme),
101
101
  docTagColor: (0, _components.themed)({
102
- light: Y1100,
103
- dark: colors.Y300
102
+ light: "var(--ds-text-accent-yellow, ".concat(Y1100, ")"),
103
+ dark: "var(--ds-text-accent-yellow, ".concat(colors.Y300, ")")
104
104
  })(akTheme),
105
105
  nameColor: (0, _components.themed)({
106
- light: colors.B400,
107
- dark: colors.B75
106
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
107
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
108
108
  })(akTheme),
109
109
  builtInColor: (0, _components.themed)({
110
- light: colors.B400,
111
- dark: colors.B75
110
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
111
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
112
112
  })(akTheme),
113
113
  literalColor: (0, _components.themed)({
114
- light: colors.B400,
115
- dark: colors.B75
114
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
115
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
116
116
  })(akTheme),
117
117
  bulletColor: (0, _components.themed)({
118
- light: colors.B400,
119
- dark: colors.B75
118
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
119
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
120
120
  })(akTheme),
121
121
  codeColor: (0, _components.themed)({
122
- light: colors.B400,
123
- dark: colors.B75
122
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
123
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
124
124
  })(akTheme),
125
125
  regexpColor: (0, _components.themed)({
126
- light: T800,
127
- dark: colors.T200
126
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
127
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
128
128
  })(akTheme),
129
129
  symbolColor: (0, _components.themed)({
130
- light: T800,
131
- dark: colors.T200
130
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
131
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
132
132
  })(akTheme),
133
133
  variableColor: (0, _components.themed)({
134
- light: T800,
135
- dark: colors.T200
134
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
135
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
136
136
  })(akTheme),
137
137
  templateVariableColor: (0, _components.themed)({
138
- light: T800,
139
- dark: colors.T200
138
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
139
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
140
140
  })(akTheme),
141
141
  linkColor: (0, _components.themed)({
142
- light: colors.P300,
143
- dark: colors.P75
142
+ light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
143
+ dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
144
144
  })(akTheme),
145
145
  selectorAttributeColor: (0, _components.themed)({
146
- light: T800,
147
- dark: colors.T200
146
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
147
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
148
148
  })(akTheme),
149
149
  selectorPseudoColor: (0, _components.themed)({
150
- light: T800,
151
- dark: colors.T200
150
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
151
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
152
152
  })(akTheme),
153
153
  typeColor: (0, _components.themed)({
154
- light: T800,
155
- dark: colors.T100
154
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
155
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
156
156
  })(akTheme),
157
157
  stringColor: (0, _components.themed)({
158
- light: colors.G500,
159
- dark: colors.G200
158
+ light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
159
+ dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
160
160
  })(akTheme),
161
161
  selectorIdColor: (0, _components.themed)({
162
- light: T800,
163
- dark: colors.T100
162
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
163
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
164
164
  })(akTheme),
165
165
  selectorClassColor: (0, _components.themed)({
166
- light: T800,
167
- dark: colors.T100
166
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
167
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
168
168
  })(akTheme),
169
169
  quoteColor: (0, _components.themed)({
170
- light: T800,
171
- dark: colors.T100
170
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
171
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
172
172
  })(akTheme),
173
173
  templateTagColor: (0, _components.themed)({
174
- light: T800,
175
- dark: colors.T100
174
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
175
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
176
176
  })(akTheme),
177
177
  titleColor: (0, _components.themed)({
178
- light: colors.P300,
179
- dark: colors.P75
178
+ light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
179
+ dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
180
180
  })(akTheme),
181
181
  sectionColor: (0, _components.themed)({
182
- light: colors.P300,
183
- dark: colors.P75
182
+ light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
183
+ dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
184
184
  })(akTheme),
185
185
  commentColor: (0, _components.themed)({
186
- light: colors.N400,
187
- dark: colors.DN400
186
+ light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
187
+ dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
188
188
  })(akTheme),
189
189
  metaKeywordColor: (0, _components.themed)({
190
- light: colors.G500,
191
- dark: colors.G200
190
+ light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
191
+ dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
192
192
  })(akTheme),
193
193
  metaColor: (0, _components.themed)({
194
- light: colors.N400,
195
- dark: colors.DN400
194
+ light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
195
+ dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
196
196
  })(akTheme),
197
197
  functionColor: (0, _components.themed)({
198
- light: colors.N800,
199
- dark: colors.DN800
198
+ light: "var(--ds-text, ".concat(colors.N800, ")"),
199
+ dark: "var(--ds-text, ".concat(colors.DN800, ")")
200
200
  })(akTheme),
201
201
  numberColor: (0, _components.themed)({
202
- light: colors.B400,
203
- dark: colors.B75
202
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
203
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
204
204
  })(akTheme),
205
205
  prologColor: (0, _components.themed)({
206
- light: colors.B400,
207
- dark: colors.B75
206
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
207
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
208
208
  })(akTheme),
209
209
  cdataColor: (0, _components.themed)({
210
- light: colors.N400,
211
- dark: colors.B75
210
+ light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
211
+ dark: "var(--ds-text-subtlest, ".concat(colors.B75, ")")
212
212
  })(akTheme),
213
213
  punctuationColor: (0, _components.themed)({
214
- light: colors.N800,
215
- dark: colors.DN800
214
+ light: "var(--ds-text, ".concat(colors.N800, ")"),
215
+ dark: "var(--ds-text, ".concat(colors.DN800, ")")
216
216
  })(akTheme),
217
217
  propertyColor: (0, _components.themed)({
218
- light: colors.P300,
219
- dark: colors.P75
218
+ light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
219
+ dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
220
220
  })(akTheme),
221
221
  constantColor: (0, _components.themed)({
222
- light: T800,
223
- dark: colors.T100
222
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
223
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
224
224
  })(akTheme),
225
225
  booleanColor: (0, _components.themed)({
226
- light: colors.B500,
227
- dark: colors.B75
226
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
227
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
228
228
  })(akTheme),
229
229
  charColor: (0, _components.themed)({
230
- light: colors.N800,
231
- dark: colors.DN800
230
+ light: "var(--ds-text, ".concat(colors.N800, ")"),
231
+ dark: "var(--ds-text, ".concat(colors.DN800, ")")
232
232
  })(akTheme),
233
233
  insertedColor: (0, _components.themed)({
234
- light: colors.G500,
235
- dark: colors.B75
234
+ light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
235
+ dark: "var(--ds-text-accent-green, ".concat(colors.B75, ")")
236
236
  })(akTheme),
237
237
  deletedColor: (0, _components.themed)({
238
- light: colors.R500,
239
- dark: colors.B75
238
+ light: "var(--ds-text-accent-red, ".concat(colors.R500, ")"),
239
+ dark: "var(--ds-text-accent-red, ".concat(colors.B75, ")")
240
240
  })(akTheme),
241
241
  operatorColor: (0, _components.themed)({
242
- light: colors.N800,
243
- dark: colors.B75
242
+ light: "var(--ds-text, ".concat(colors.N800, ")"),
243
+ dark: "var(--ds-text, ".concat(colors.B75, ")")
244
244
  })(akTheme),
245
245
  atruleColor: (0, _components.themed)({
246
- light: colors.G500,
247
- dark: colors.G200
246
+ light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
247
+ dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
248
248
  })(akTheme),
249
249
  importantColor: (0, _components.themed)({
250
- light: Y1100,
251
- dark: colors.Y300
250
+ light: "var(--ds-text-accent-yellow, ".concat(Y1100, ")"),
251
+ dark: "var(--ds-text-accent-yellow, ".concat(colors.Y300, ")")
252
252
  })(akTheme)
253
253
  };
254
254
  });
package/dist/cjs/internal/theme/styles.js CHANGED
@@ -250,6 +250,7 @@ var getCodeBlockStyles = function getCodeBlockStyles(theme) {
250
250
  },
251
251
  '& [data-ds--code--row--highlight]': {
252
252
  background: "".concat(theme.highlightedLineBgColor),
253
+ // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
253
254
  '&::before, &::after': {
254
255
  clipPath: 'inset(100%)',
255
256
  clip: 'rect(1px, 1px, 1px, 1px)',
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/code",
3
- "version": "14.3.2",
3
+ "version": "14.3.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/bidi-warning/ui/styled.js CHANGED
@@ -17,7 +17,7 @@ const decoration = css({
17
17
  padding: '0 4px',
18
18
  fontSize: '14px',
19
19
  lineHeight: '18px',
20
- background: Y75,
20
+ background: `var(--ds-background-warning, ${Y75})`,
21
21
 
22
22
  /**
23
23
  * Ensures the decoration receives pointer events when it occurs with
@@ -29,11 +29,12 @@ const decoration = css({
29
29
  content: '"<"attr(data-bidi-character-code)">"',
30
30
  // This color is Y800 which is not yet rolled out
31
31
  // https://hello.atlassian.net/wiki/spaces/~tswan/pages/1366555782?focusedCommentId=1370387374#comment-1370387374
32
- color: '#7F5F01',
32
+ color: "var(--ds-text-warning, #7F5F01)",
33
33
  fontStyle: 'normal'
34
34
  },
35
35
  ':hover:before': {
36
- color: '#533F04'
36
+ color: "var(--ds-text-warning, #533F04)",
37
+ background: `var(--ds-background-warning-hovered, ${Y75})`
37
38
  }
38
39
  });
39
40
  export function Decorator({
package/dist/es2019/internal/theme/get-theme.js CHANGED
@@ -11,26 +11,26 @@ export const getBaseTheme = theme => ({
11
11
  fontFamily: codeFontFamily(),
12
12
  fontFamilyItalic: `SFMono-MediumItalic, ${codeFontFamily()}`,
13
13
  backgroundColor: themed({
14
- light: colors.N20,
15
- dark: colors.DN50
14
+ light: `var(--ds-background-neutral, ${colors.N20})`,
15
+ dark: `var(--ds-background-neutral, ${colors.DN50})`
16
16
  })({
17
17
  theme
18
18
  }),
19
19
  textColor: themed({
20
- light: colors.N800,
21
- dark: colors.DN800
20
+ light: `var(--ds-text, ${colors.N800})`,
21
+ dark: `var(--ds-text, ${colors.DN800})`
22
22
  })({
23
23
  theme
24
24
  }),
25
25
  lineNumberColor: themed({
26
- light: colors.N400,
27
- dark: colors.DN400
26
+ light: `var(--ds-text-subtlest, ${colors.N400})`,
27
+ dark: `var(--ds-text-subtlest, ${colors.DN400})`
28
28
  })({
29
29
  theme
30
30
  }),
31
31
  lineNumberBgColor: themed({
32
- light: colors.N30,
33
- dark: colors.DN20
32
+ light: `var(--ds-background-neutral, ${colors.N30})`,
33
+ dark: `var(--ds-background-neutral, ${colors.DN20})`
34
34
  })({
35
35
  theme
36
36
  })
@@ -44,180 +44,180 @@ export const getColorPalette = memoizeOne(theme => {
44
44
  };
45
45
  return {
46
46
  highlightedLineBgColor: themed({
47
- light: colors.N30,
48
- dark: PLUS20
47
+ light: `var(--ds-background-neutral, ${colors.N30})`,
48
+ dark: `var(--ds-background-neutral, ${PLUS20})`
49
49
  })(akTheme),
50
50
  highlightedLineBorderColor: themed({
51
- light: colors.B200,
52
- dark: colors.B100
51
+ light: `var(--ds-border-focused, ${colors.B200})`,
52
+ dark: `var(--ds-border-focused, ${colors.B100})`
53
53
  })(akTheme),
54
54
  substringColor: themed({
55
- light: colors.N400,
56
- dark: colors.DN400
55
+ light: `var(--ds-text-subtlest, ${colors.N400})`,
56
+ dark: `var(--ds-text-subtlest, ${colors.DN400})`
57
57
  })(akTheme),
58
58
  keywordColor: themed({
59
- light: colors.B400,
60
- dark: colors.B75
59
+ light: `var(--ds-text-accent-blue, ${colors.B400})`,
60
+ dark: `var(--ds-text-accent-blue, ${colors.B75})`
61
61
  })(akTheme),
62
62
  attributeColor: themed({
63
- light: T800,
64
- dark: colors.T200
63
+ light: `var(--ds-text-accent-teal, ${T800})`,
64
+ dark: `var(--ds-text-accent-teal, ${colors.T200})`
65
65
  })(akTheme),
66
66
  selectorTagColor: themed({
67
- light: colors.B400,
68
- dark: colors.B75
67
+ light: `var(--ds-text-accent-blue, ${colors.B400})`,
68
+ dark: `var(--ds-text-accent-blue, ${colors.B75})`
69
69
  })(akTheme),
70
70
  docTagColor: themed({
71
- light: Y1100,
72
- dark: colors.Y300
71
+ light: `var(--ds-text-accent-yellow, ${Y1100})`,
72
+ dark: `var(--ds-text-accent-yellow, ${colors.Y300})`
73
73
  })(akTheme),
74
74
  nameColor: themed({
75
- light: colors.B400,
76
- dark: colors.B75
75
+ light: `var(--ds-text-accent-blue, ${colors.B400})`,
76
+ dark: `var(--ds-text-accent-blue, ${colors.B75})`
77
77
  })(akTheme),
78
78
  builtInColor: themed({
79
- light: colors.B400,
80
- dark: colors.B75
79
+ light: `var(--ds-text-accent-blue, ${colors.B400})`,
80
+ dark: `var(--ds-text-accent-blue, ${colors.B75})`
81
81
  })(akTheme),
82
82
  literalColor: themed({
83
- light: colors.B400,
84
- dark: colors.B75
83
+ light: `var(--ds-text-accent-blue, ${colors.B400})`,
84
+ dark: `var(--ds-text-accent-blue, ${colors.B75})`
85
85
  })(akTheme),
86
86
  bulletColor: themed({
87
- light: colors.B400,
88
- dark: colors.B75
87
+ light: `var(--ds-text-accent-blue, ${colors.B400})`,
88
+ dark: `var(--ds-text-accent-blue, ${colors.B75})`
89
89
  })(akTheme),
90
90
  codeColor: themed({
91
- light: colors.B400,
92
- dark: colors.B75
91
+ light: `var(--ds-text-accent-blue, ${colors.B400})`,
92
+ dark: `var(--ds-text-accent-blue, ${colors.B75})`
93
93
  })(akTheme),
94
94
  regexpColor: themed({
95
- light: T800,
96
- dark: colors.T200
95
+ light: `var(--ds-text-accent-teal, ${T800})`,
96
+ dark: `var(--ds-text-accent-teal, ${colors.T200})`
97
97
  })(akTheme),
98
98
  symbolColor: themed({
99
- light: T800,
100
- dark: colors.T200
99
+ light: `var(--ds-text-accent-teal, ${T800})`,
100
+ dark: `var(--ds-text-accent-teal, ${colors.T200})`
101
101
  })(akTheme),
102
102
  variableColor: themed({
103
- light: T800,
104
- dark: colors.T200
103
+ light: `var(--ds-text-accent-teal, ${T800})`,
104
+ dark: `var(--ds-text-accent-teal, ${colors.T200})`
105
105
  })(akTheme),
106
106
  templateVariableColor: themed({
107
- light: T800,
108
- dark: colors.T200
107
+ light: `var(--ds-text-accent-teal, ${T800})`,
108
+ dark: `var(--ds-text-accent-teal, ${colors.T200})`
109
109
  })(akTheme),
110
110
  linkColor: themed({
111
- light: colors.P300,
112
- dark: colors.P75
111
+ light: `var(--ds-text-accent-purple, ${colors.P300})`,
112
+ dark: `var(--ds-text-accent-purple, ${colors.P75})`
113
113
  })(akTheme),
114
114
  selectorAttributeColor: themed({
115
- light: T800,
116
- dark: colors.T200
115
+ light: `var(--ds-text-accent-teal, ${T800})`,
116
+ dark: `var(--ds-text-accent-teal, ${colors.T200})`
117
117
  })(akTheme),
118
118
  selectorPseudoColor: themed({
119
- light: T800,
120
- dark: colors.T200
119
+ light: `var(--ds-text-accent-teal, ${T800})`,
120
+ dark: `var(--ds-text-accent-teal, ${colors.T200})`
121
121
  })(akTheme),
122
122
  typeColor: themed({
123
- light: T800,
124
- dark: colors.T100
123
+ light: `var(--ds-text-accent-teal, ${T800})`,
124
+ dark: `var(--ds-text-accent-teal, ${colors.T100})`
125
125
  })(akTheme),
126
126
  stringColor: themed({
127
- light: colors.G500,
128
- dark: colors.G200
127
+ light: `var(--ds-text-accent-green, ${colors.G500})`,
128
+ dark: `var(--ds-text-accent-green, ${colors.G200})`
129
129
  })(akTheme),
130
130
  selectorIdColor: themed({
131
- light: T800,
132
- dark: colors.T100
131
+ light: `var(--ds-text-accent-teal, ${T800})`,
132
+ dark: `var(--ds-text-accent-teal, ${colors.T100})`
133
133
  })(akTheme),
134
134
  selectorClassColor: themed({
135
- light: T800,
136
- dark: colors.T100
135
+ light: `var(--ds-text-accent-teal, ${T800})`,
136
+ dark: `var(--ds-text-accent-teal, ${colors.T100})`
137
137
  })(akTheme),
138
138
  quoteColor: themed({
139
- light: T800,
140
- dark: colors.T100
139
+ light: `var(--ds-text-accent-teal, ${T800})`,
140
+ dark: `var(--ds-text-accent-teal, ${colors.T100})`
141
141
  })(akTheme),
142
142
  templateTagColor: themed({
143
- light: T800,
144
- dark: colors.T100
143
+ light: `var(--ds-text-accent-teal, ${T800})`,
144
+ dark: `var(--ds-text-accent-teal, ${colors.T100})`
145
145
  })(akTheme),
146
146
  titleColor: themed({
147
- light: colors.P300,
148
- dark: colors.P75
147
+ light: `var(--ds-text-accent-purple, ${colors.P300})`,
148
+ dark: `var(--ds-text-accent-purple, ${colors.P75})`
149
149
  })(akTheme),
150
150
  sectionColor: themed({
151
- light: colors.P300,
152
- dark: colors.P75
151
+ light: `var(--ds-text-accent-purple, ${colors.P300})`,
152
+ dark: `var(--ds-text-accent-purple, ${colors.P75})`
153
153
  })(akTheme),
154
154
  commentColor: themed({
155
- light: colors.N400,
156
- dark: colors.DN400
155
+ light: `var(--ds-text-subtlest, ${colors.N400})`,
156
+ dark: `var(--ds-text-subtlest, ${colors.DN400})`
157
157
  })(akTheme),
158
158
  metaKeywordColor: themed({
159
- light: colors.G500,
160
- dark: colors.G200
159
+ light: `var(--ds-text-accent-green, ${colors.G500})`,
160
+ dark: `var(--ds-text-accent-green, ${colors.G200})`
161
161
  })(akTheme),
162
162
  metaColor: themed({
163
- light: colors.N400,
164
- dark: colors.DN400
163
+ light: `var(--ds-text-subtlest, ${colors.N400})`,
164
+ dark: `var(--ds-text-subtlest, ${colors.DN400})`
165
165
  })(akTheme),
166
166
  functionColor: themed({
167
- light: colors.N800,
168
- dark: colors.DN800
167
+ light: `var(--ds-text, ${colors.N800})`,
168
+ dark: `var(--ds-text, ${colors.DN800})`
169
169
  })(akTheme),
170
170
  numberColor: themed({
171
- light: colors.B400,
172
- dark: colors.B75
171
+ light: `var(--ds-text-accent-blue, ${colors.B400})`,
172
+ dark: `var(--ds-text-accent-blue, ${colors.B75})`
173
173
  })(akTheme),
174
174
  prologColor: themed({
175
- light: colors.B400,
176
- dark: colors.B75
175
+ light: `var(--ds-text-accent-blue, ${colors.B400})`,
176
+ dark: `var(--ds-text-accent-blue, ${colors.B75})`
177
177
  })(akTheme),
178
178
  cdataColor: themed({
179
- light: colors.N400,
180
- dark: colors.B75
179
+ light: `var(--ds-text-subtlest, ${colors.N400})`,
180
+ dark: `var(--ds-text-subtlest, ${colors.B75})`
181
181
  })(akTheme),
182
182
  punctuationColor: themed({
183
- light: colors.N800,
184
- dark: colors.DN800
183
+ light: `var(--ds-text, ${colors.N800})`,
184
+ dark: `var(--ds-text, ${colors.DN800})`
185
185
  })(akTheme),
186
186
  propertyColor: themed({
187
- light: colors.P300,
188
- dark: colors.P75
187
+ light: `var(--ds-text-accent-purple, ${colors.P300})`,
188
+ dark: `var(--ds-text-accent-purple, ${colors.P75})`
189
189
  })(akTheme),
190
190
  constantColor: themed({
191
- light: T800,
192
- dark: colors.T100
191
+ light: `var(--ds-text-accent-teal, ${T800})`,
192
+ dark: `var(--ds-text-accent-teal, ${colors.T100})`
193
193
  })(akTheme),
194
194
  booleanColor: themed({
195
- light: colors.B500,
196
- dark: colors.B75
195
+ light: `var(--ds-text-accent-blue, ${colors.B400})`,
196
+ dark: `var(--ds-text-accent-blue, ${colors.B75})`
197
197
  })(akTheme),
198
198
  charColor: themed({
199
- light: colors.N800,
200
- dark: colors.DN800
199
+ light: `var(--ds-text, ${colors.N800})`,
200
+ dark: `var(--ds-text, ${colors.DN800})`
201
201
  })(akTheme),
202
202
  insertedColor: themed({
203
- light: colors.G500,
204
- dark: colors.B75
203
+ light: `var(--ds-text-accent-green, ${colors.G500})`,
204
+ dark: `var(--ds-text-accent-green, ${colors.B75})`
205
205
  })(akTheme),
206
206
  deletedColor: themed({
207
- light: colors.R500,
208
- dark: colors.B75
207
+ light: `var(--ds-text-accent-red, ${colors.R500})`,
208
+ dark: `var(--ds-text-accent-red, ${colors.B75})`
209
209
  })(akTheme),
210
210
  operatorColor: themed({
211
- light: colors.N800,
212
- dark: colors.B75
211
+ light: `var(--ds-text, ${colors.N800})`,
212
+ dark: `var(--ds-text, ${colors.B75})`
213
213
  })(akTheme),
214
214
  atruleColor: themed({
215
- light: colors.G500,
216
- dark: colors.G200
215
+ light: `var(--ds-text-accent-green, ${colors.G500})`,
216
+ dark: `var(--ds-text-accent-green, ${colors.G200})`
217
217
  })(akTheme),
218
218
  importantColor: themed({
219
- light: Y1100,
220
- dark: colors.Y300
219
+ light: `var(--ds-text-accent-yellow, ${Y1100})`,
220
+ dark: `var(--ds-text-accent-yellow, ${colors.Y300})`
221
221
  })(akTheme)
222
222
  };
223
223
  });
package/dist/es2019/internal/theme/styles.js CHANGED
@@ -220,6 +220,7 @@ export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEnd
220
220
  },
221
221
  '& [data-ds--code--row--highlight]': {
222
222
  background: `${theme.highlightedLineBgColor}`,
223
+ // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
223
224
  '&::before, &::after': {
224
225
  clipPath: 'inset(100%)',
225
226
  clip: 'rect(1px, 1px, 1px, 1px)',
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/code",
3
- "version": "14.3.2",
3
+ "version": "14.3.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/bidi-warning/ui/styled.js CHANGED
@@ -17,7 +17,7 @@ var decoration = css({
17
17
  padding: '0 4px',
18
18
  fontSize: '14px',
19
19
  lineHeight: '18px',
20
- background: Y75,
20
+ background: "var(--ds-background-warning, ".concat(Y75, ")"),
21
21
 
22
22
  /**
23
23
  * Ensures the decoration receives pointer events when it occurs with
@@ -29,11 +29,12 @@ var decoration = css({
29
29
  content: '"<"attr(data-bidi-character-code)">"',
30
30
  // This color is Y800 which is not yet rolled out
31
31
  // https://hello.atlassian.net/wiki/spaces/~tswan/pages/1366555782?focusedCommentId=1370387374#comment-1370387374
32
- color: '#7F5F01',
32
+ color: "var(--ds-text-warning, #7F5F01)",
33
33
  fontStyle: 'normal'
34
34
  },
35
35
  ':hover:before': {
36
- color: '#533F04'
36
+ color: "var(--ds-text-warning, #533F04)",
37
+ background: "var(--ds-background-warning-hovered, ".concat(Y75, ")")
37
38
  }
38
39
  });
39
40
  export function Decorator(_ref) {
package/dist/esm/internal/theme/get-theme.js CHANGED
@@ -18,26 +18,26 @@ export var getBaseTheme = function getBaseTheme(theme) {
18
18
  fontFamily: codeFontFamily(),
19
19
  fontFamilyItalic: "SFMono-MediumItalic, ".concat(codeFontFamily()),
20
20
  backgroundColor: themed({
21
- light: colors.N20,
22
- dark: colors.DN50
21
+ light: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
22
+ dark: "var(--ds-background-neutral, ".concat(colors.DN50, ")")
23
23
  })({
24
24
  theme: theme
25
25
  }),
26
26
  textColor: themed({
27
- light: colors.N800,
28
- dark: colors.DN800
27
+ light: "var(--ds-text, ".concat(colors.N800, ")"),
28
+ dark: "var(--ds-text, ".concat(colors.DN800, ")")
29
29
  })({
30
30
  theme: theme
31
31
  }),
32
32
  lineNumberColor: themed({
33
- light: colors.N400,
34
- dark: colors.DN400
33
+ light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
34
+ dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
35
35
  })({
36
36
  theme: theme
37
37
  }),
38
38
  lineNumberBgColor: themed({
39
- light: colors.N30,
40
- dark: colors.DN20
39
+ light: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
40
+ dark: "var(--ds-background-neutral, ".concat(colors.DN20, ")")
41
41
  })({
42
42
  theme: theme
43
43
  })
@@ -52,180 +52,180 @@ export var getColorPalette = memoizeOne(function (theme) {
52
52
  };
53
53
  return {
54
54
  highlightedLineBgColor: themed({
55
- light: colors.N30,
56
- dark: PLUS20
55
+ light: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
56
+ dark: "var(--ds-background-neutral, ".concat(PLUS20, ")")
57
57
  })(akTheme),
58
58
  highlightedLineBorderColor: themed({
59
- light: colors.B200,
60
- dark: colors.B100
59
+ light: "var(--ds-border-focused, ".concat(colors.B200, ")"),
60
+ dark: "var(--ds-border-focused, ".concat(colors.B100, ")")
61
61
  })(akTheme),
62
62
  substringColor: themed({
63
- light: colors.N400,
64
- dark: colors.DN400
63
+ light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
64
+ dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
65
65
  })(akTheme),
66
66
  keywordColor: themed({
67
- light: colors.B400,
68
- dark: colors.B75
67
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
68
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
69
69
  })(akTheme),
70
70
  attributeColor: themed({
71
- light: T800,
72
- dark: colors.T200
71
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
72
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
73
73
  })(akTheme),
74
74
  selectorTagColor: themed({
75
- light: colors.B400,
76
- dark: colors.B75
75
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
76
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
77
77
  })(akTheme),
78
78
  docTagColor: themed({
79
- light: Y1100,
80
- dark: colors.Y300
79
+ light: "var(--ds-text-accent-yellow, ".concat(Y1100, ")"),
80
+ dark: "var(--ds-text-accent-yellow, ".concat(colors.Y300, ")")
81
81
  })(akTheme),
82
82
  nameColor: themed({
83
- light: colors.B400,
84
- dark: colors.B75
83
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
84
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
85
85
  })(akTheme),
86
86
  builtInColor: themed({
87
- light: colors.B400,
88
- dark: colors.B75
87
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
88
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
89
89
  })(akTheme),
90
90
  literalColor: themed({
91
- light: colors.B400,
92
- dark: colors.B75
91
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
92
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
93
93
  })(akTheme),
94
94
  bulletColor: themed({
95
- light: colors.B400,
96
- dark: colors.B75
95
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
96
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
97
97
  })(akTheme),
98
98
  codeColor: themed({
99
- light: colors.B400,
100
- dark: colors.B75
99
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
100
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
101
101
  })(akTheme),
102
102
  regexpColor: themed({
103
- light: T800,
104
- dark: colors.T200
103
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
104
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
105
105
  })(akTheme),
106
106
  symbolColor: themed({
107
- light: T800,
108
- dark: colors.T200
107
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
108
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
109
109
  })(akTheme),
110
110
  variableColor: themed({
111
- light: T800,
112
- dark: colors.T200
111
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
112
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
113
113
  })(akTheme),
114
114
  templateVariableColor: themed({
115
- light: T800,
116
- dark: colors.T200
115
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
116
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
117
117
  })(akTheme),
118
118
  linkColor: themed({
119
- light: colors.P300,
120
- dark: colors.P75
119
+ light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
120
+ dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
121
121
  })(akTheme),
122
122
  selectorAttributeColor: themed({
123
- light: T800,
124
- dark: colors.T200
123
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
124
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
125
125
  })(akTheme),
126
126
  selectorPseudoColor: themed({
127
- light: T800,
128
- dark: colors.T200
127
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
128
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
129
129
  })(akTheme),
130
130
  typeColor: themed({
131
- light: T800,
132
- dark: colors.T100
131
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
132
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
133
133
  })(akTheme),
134
134
  stringColor: themed({
135
- light: colors.G500,
136
- dark: colors.G200
135
+ light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
136
+ dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
137
137
  })(akTheme),
138
138
  selectorIdColor: themed({
139
- light: T800,
140
- dark: colors.T100
139
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
140
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
141
141
  })(akTheme),
142
142
  selectorClassColor: themed({
143
- light: T800,
144
- dark: colors.T100
143
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
144
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
145
145
  })(akTheme),
146
146
  quoteColor: themed({
147
- light: T800,
148
- dark: colors.T100
147
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
148
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
149
149
  })(akTheme),
150
150
  templateTagColor: themed({
151
- light: T800,
152
- dark: colors.T100
151
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
152
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
153
153
  })(akTheme),
154
154
  titleColor: themed({
155
- light: colors.P300,
156
- dark: colors.P75
155
+ light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
156
+ dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
157
157
  })(akTheme),
158
158
  sectionColor: themed({
159
- light: colors.P300,
160
- dark: colors.P75
159
+ light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
160
+ dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
161
161
  })(akTheme),
162
162
  commentColor: themed({
163
- light: colors.N400,
164
- dark: colors.DN400
163
+ light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
164
+ dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
165
165
  })(akTheme),
166
166
  metaKeywordColor: themed({
167
- light: colors.G500,
168
- dark: colors.G200
167
+ light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
168
+ dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
169
169
  })(akTheme),
170
170
  metaColor: themed({
171
- light: colors.N400,
172
- dark: colors.DN400
171
+ light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
172
+ dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
173
173
  })(akTheme),
174
174
  functionColor: themed({
175
- light: colors.N800,
176
- dark: colors.DN800
175
+ light: "var(--ds-text, ".concat(colors.N800, ")"),
176
+ dark: "var(--ds-text, ".concat(colors.DN800, ")")
177
177
  })(akTheme),
178
178
  numberColor: themed({
179
- light: colors.B400,
180
- dark: colors.B75
179
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
180
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
181
181
  })(akTheme),
182
182
  prologColor: themed({
183
- light: colors.B400,
184
- dark: colors.B75
183
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
184
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
185
185
  })(akTheme),
186
186
  cdataColor: themed({
187
- light: colors.N400,
188
- dark: colors.B75
187
+ light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
188
+ dark: "var(--ds-text-subtlest, ".concat(colors.B75, ")")
189
189
  })(akTheme),
190
190
  punctuationColor: themed({
191
- light: colors.N800,
192
- dark: colors.DN800
191
+ light: "var(--ds-text, ".concat(colors.N800, ")"),
192
+ dark: "var(--ds-text, ".concat(colors.DN800, ")")
193
193
  })(akTheme),
194
194
  propertyColor: themed({
195
- light: colors.P300,
196
- dark: colors.P75
195
+ light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
196
+ dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
197
197
  })(akTheme),
198
198
  constantColor: themed({
199
- light: T800,
200
- dark: colors.T100
199
+ light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
200
+ dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
201
201
  })(akTheme),
202
202
  booleanColor: themed({
203
- light: colors.B500,
204
- dark: colors.B75
203
+ light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
204
+ dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
205
205
  })(akTheme),
206
206
  charColor: themed({
207
- light: colors.N800,
208
- dark: colors.DN800
207
+ light: "var(--ds-text, ".concat(colors.N800, ")"),
208
+ dark: "var(--ds-text, ".concat(colors.DN800, ")")
209
209
  })(akTheme),
210
210
  insertedColor: themed({
211
- light: colors.G500,
212
- dark: colors.B75
211
+ light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
212
+ dark: "var(--ds-text-accent-green, ".concat(colors.B75, ")")
213
213
  })(akTheme),
214
214
  deletedColor: themed({
215
- light: colors.R500,
216
- dark: colors.B75
215
+ light: "var(--ds-text-accent-red, ".concat(colors.R500, ")"),
216
+ dark: "var(--ds-text-accent-red, ".concat(colors.B75, ")")
217
217
  })(akTheme),
218
218
  operatorColor: themed({
219
- light: colors.N800,
220
- dark: colors.B75
219
+ light: "var(--ds-text, ".concat(colors.N800, ")"),
220
+ dark: "var(--ds-text, ".concat(colors.B75, ")")
221
221
  })(akTheme),
222
222
  atruleColor: themed({
223
- light: colors.G500,
224
- dark: colors.G200
223
+ light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
224
+ dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
225
225
  })(akTheme),
226
226
  importantColor: themed({
227
- light: Y1100,
228
- dark: colors.Y300
227
+ light: "var(--ds-text-accent-yellow, ".concat(Y1100, ")"),
228
+ dark: "var(--ds-text-accent-yellow, ".concat(colors.Y300, ")")
229
229
  })(akTheme)
230
230
  };
231
231
  });
package/dist/esm/internal/theme/styles.js CHANGED
@@ -233,6 +233,7 @@ export var getCodeBlockStyles = function getCodeBlockStyles(theme) {
233
233
  },
234
234
  '& [data-ds--code--row--highlight]': {
235
235
  background: "".concat(theme.highlightedLineBgColor),
236
+ // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
236
237
  '&::before, &::after': {
237
238
  clipPath: 'inset(100%)',
238
239
  clip: 'rect(1px, 1px, 1px, 1px)',
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/code",
3
- "version": "14.3.2",
3
+ "version": "14.3.3",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/code",
3
- "version": "14.3.2",
3
+ "version": "14.3.3",
4
4
  "description": "Code highlights short strings of code snippets inline with body text.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -27,6 +27,7 @@
27
27
  "dependencies": {
28
28
  "@atlaskit/codemod-utils": "^3.4.0",
29
29
  "@atlaskit/theme": "^12.1.0",
30
+ "@atlaskit/tokens": "^0.7.0",
30
31
  "@atlaskit/tooltip": "^17.5.0",
31
32
  "@babel/runtime": "^7.0.0",
32
33
  "@emotion/core": "^10.0.9",
@@ -37,7 +38,7 @@
37
38
  "react": "^16.8.0"
38
39
  },
39
40
  "devDependencies": {
40
- "@atlaskit/button": "^16.0.0",
41
+ "@atlaskit/button": "^16.2.0",
41
42
  "@atlaskit/docs": "^9.0.0",
42
43
  "@atlaskit/section-message": "^6.0.0",
43
44
  "@atlaskit/ssr": "*",
@@ -78,7 +79,8 @@
78
79
  "analytics-next"
79
80
  ],
80
81
  "theming": [
81
- "react-context"
82
+ "react-context",
83
+ "tokens"
82
84
  ],
83
85
  "deprecation": "no-deprecated-imports",
84
86
  "styling": [