@atlaskit/code 17.2.7 → 17.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/code
 
+## 17.3.0
+
+### Minor Changes
+
+- [`480d781cdc018`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/480d781cdc018) -
+  Align the code component to ADS design tokens where possible behind a feature flag. If successful,
+  this will be part of a later release.
+
+## 17.2.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 17.2.7
 
 ### Patch Changes
@@ -548,7 +562,6 @@
   CodeBlock has had some significant under-the-hood changes in this version. While technically it is
   a minor update as all API changes are additive and backwards-compatible, this is a heads up that
   there are some small visual changes that may require visual regression snapshots to be updated.
-
   - Adds a new `shouldWrapLongLines` prop that allows you to wrap long lines of code over multiple
     lines, instead of always forcing the container to scroll horizontally.
 
@@ -822,7 +835,6 @@
 
   Component theming is no longer supported in `<Code />` or `<CodeBlock />`; this change does not
   effect global theming. As an escape hatch, two CSS variables are exposed:
-
   - `--ds--code--line-number-bg-color`: which controls the background color of the line numbers if
     set
   - `--ds--code--bg-color`: which controls the background color of the block body if set
@@ -919,7 +931,6 @@
   is an escape hatch which will likley be removed in a future major version.
 
   This change also includes:
-
   - A bugfix for lineHeight that meant linenumbers and code body were not vertically aligned
     correctly.
   - A bugfix for the SSR'd components not rendering consistently before hydration
@@ -1089,7 +1100,6 @@
 
   Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies
   [6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a):
-
   - @atlaskit/docs@8.3.2
   - @atlaskit/visual-regression@0.1.9
   - @atlaskit/theme@9.5.1
@@ -1102,7 +1112,6 @@
 
   ThemedCode and ThemeCodeBlock props are now correctly typed- Updated dependencies
   [d2b8166208](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2b8166208):
-
   - @atlaskit/docs@8.3.0
 
 ## 11.1.1
@@ -1114,7 +1123,6 @@
   Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result-
   Updated dependencies
   [82747f2922](https://bitbucket.org/atlassian/atlassian-frontend/commits/82747f2922):
-
   - @atlaskit/theme@9.5.0
 
 ## 11.1.0
@@ -1127,7 +1135,6 @@
   emphasize which lines of code you would like people to look at!
 
   The `highlight` prop can be used as follows:
-
   - To highlight one line: `highlight="3"`
   - To highlight sequential lines: `highlight="1-5"`
   - To highlight sequential and multiple single lines: `highlight="1-5,7,10,15-20"`
@@ -1208,7 +1215,6 @@
 - [patch][65ada7f318](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/65ada7f318):
 
   **FABDODGEM-12 Editor Cashmere Release**
-
   - [Internal post](http://go.atlassian.com/cashmere-release)
 
   **Affected editor components:**
@@ -1216,19 +1222,16 @@
   tables, media, mobile, text color, emoji, copy/paste, analytics
 
   **Performance**
-
   - Async import for code blocks and task items on renderer
     - https://product-fabric.atlassian.net/browse/ED-7155
 
   **Table**
-
   - Add support to sort tables that contains smart links
     - https://product-fabric.atlassian.net/browse/ED-7449
   - Scale table when changing to full width mode
     - https://product-fabric.atlassian.net/browse/ED-7724
 
   **Text color**
-
   - Update text color toolbar with right color when text is inside a list, panel, etc.
     - https://product-fabric.atlassian.net/browse/FM-1752
 
@@ -1334,7 +1337,6 @@ https://product-fabric.atlassian.net/browse/FM-2393
 - [patch][18dfac7332](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/18dfac7332):
 
   In this PR, we are:
-
   - Re-introducing dist build folders
   - Adding back cjs
   - Replacing es5 by cjs and es2015 by esm
@@ -1371,21 +1373,18 @@ https://product-fabric.atlassian.net/browse/FM-2393
 ## 11.0.1
 
 - [patch][b0ef06c685](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b0ef06c685):
-
   - This is just a safety release in case anything strange happened in in the previous one. See Pull
     Request #5942 for details
 
 ## 11.0.0
 
 - [major][97bfe81ec8](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/97bfe81ec8):
-
   - @atlaskit/code has been converted to Typescript. Typescript consumers will now get static type
     safety. Flow types are no longer provided. No API or behavioural changes.
 
 ## 10.0.0
 
 - [major][7c17b35107](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/7c17b35107):
-
   - Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use
     this package, please ensure you use at least this version of react and react-dom.
 
@@ -1399,7 +1398,6 @@ https://product-fabric.atlassian.net/browse/FM-2393
 ## 9.0.0
 
 - [major][76299208e6](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/76299208e6):
-
   - Drop ES5 from all the flow modules
 
   ### Dropping CJS support in all @atlaskit packages
@@ -1444,7 +1442,6 @@ https://product-fabric.atlassian.net/browse/FM-2393
 ## 8.2.3
 
 - [patch][d49e9bbb13](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/d49e9bbb13):
-
   - Expose the props on website
 
 ## 8.2.2
@@ -1462,19 +1459,16 @@ https://product-fabric.atlassian.net/browse/FM-2393
 ## 8.2.0
 
 - [minor][10fe416](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/10fe416):
-
   - Props Language should be required and surfacing more props for code
 
 ## 8.1.1
 
 - [patch][84e8015](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/84e8015):
-
   - Bump react-syntax-highlighter to 10.0.1
 
 ## 8.1.0
 
 - [minor][26027dd](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/26027dd):
-
   - Upgrade react syntax highlighter to version that ships its own async loaded languages and
     supports SSR
 

package/dist/cjs/code-block.compiled.css

@@ -3,6 +3,7 @@
 ._7xinn7od code[class*=language-]{all:unset}
 ._i7ngn7od .token:not([class=token],[data-ds--code--row--highlight],[data-ds--code--row]){all:unset}
 ._t7aun7od pre[class*=language-]{all:unset}
+._11c81u0j{font:var(--ds-font-code,normal 400 .875em/1 ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1dqoglyw{border-style:none}
 ._196q1xv3 [data-ds--code--row--highlight]:last-child{border-block-end:var(--ds-border-width,1px) dashed transparent}

package/dist/cjs/code-block.js

@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _bindEventListener = require("bind-event-listener");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useHighlight = require("./internal/hooks/use-highlight");
 var _styles = require("./internal/theme/styles");
 var _getNormalizedLanguage = require("./internal/utils/get-normalized-language");
@@ -22,7 +23,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-selectors */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
 var getCodeBlockStyles = {
-  root: "_2rko12b0 _1dqoglyw _1wyb1crf _k48pi7a9 _1e0c1txw _vwz4gktf _1reo1wug _o572qvpr _1eimjvyg _bfhktkvp _syaz1fxt _ect41odn _1ozdn7od _7xinn7od _t7aun7od _r28du2gc _tajqu2gc _1ohiu2gc _m802u2gc _i6ntu2gc _1w2xu2gc _1hmyegat _vblregat _vbulegat _196q1xv3 _1vbw1xv3 _1v9c1xv3 _1srn17d7 _18r6myb0 _vyvc1n1a _1d4j1y44 _1f8gstnw _1pzyb3bt _ra6gww7y _13cdh2mm _1pp0126e _zvy9f705 _qcxof705 _qzn01a66 _j0l11wug _1weckb7n _1na21hna _vsnzgrf3 _x7c815vq _lh0y15vq _1m3815vq _qk1e15vq _12l6ysn8 _uga3ysn8 _mx8b7mnp _1kr87mnp _xo19t94y _1bemt94y _nalpstnw _151dstnw _1exb1q9c _1hgu1q9c _1mgnt94y _nhket94y _h909m7j4 _scgayz1z _ipl81e17 _40uk1l04 _i81p1a66 _1gx21e5h _1ls0df4r _vm2c1rh5 _12ok1rh5 _1ls01ule _rude1ule _1q16glyw _1io6glyw _juomusic _lcwuusic _pyovu2gc _ccm6u2gc _1ascu2gc _1yuau2gc _xr0w1a66 _4io21a66 _euyxusvi _cahfusvi _zhnuidpf _1amdidpf _mbgcpf9b _bu7zpf9b _131n1giz _gy101giz _1wfuwrk5 _16kzwrk5 _9kk3moej _cjus1w1g _9k2r1m30 _nhmw1m30 _yl021m30 _eiht5x2v _t9zb5x2v _mqok1w1g _3hsg1w1g _i7ngn7od _9wu1fb2s _1xcoh55r _1t361fxt _137bh55r _1k7d1fxt _97lipnps _12nh9lu1 _1g0517qg _i2ig10m5 _326z1fxt _113p131l _1n6tpnps _tgu817qg _1k47pnps _g0lx1fxt _ys4e131l _7gp8h55r _1yvq10m5 _1vww10m5 _1rju10m5 _1v0lh55r _wmyy17qg _748n17qg _1mfn17qg _1d7e17qg _p2vr17qg _19o610m5 _kxov17qg _1np517qg _m2f517qg _1b9tpnps _1tq6pnps _1rd2pnps _1pbkpnps _k3lipnps _13zt131l _2g12fb2s _k86b10m5 _b5iy131l _gti3131l _1f0gpnps _9d3e17qg _qdiapnps _72uvpnps",
+  codeFontFlagOn: "_11c81u0j",
+  codeFontFlagOff: "_1wyb1crf _k48pi7a9 _ect41odn",
+  root: "_2rko12b0 _1dqoglyw _1e0c1txw _vwz4gktf _1reo1wug _o572qvpr _1eimjvyg _bfhktkvp _syaz1fxt _1ozdn7od _7xinn7od _t7aun7od _r28du2gc _tajqu2gc _1ohiu2gc _m802u2gc _i6ntu2gc _1w2xu2gc _1hmyegat _vblregat _vbulegat _196q1xv3 _1vbw1xv3 _1v9c1xv3 _1srn17d7 _18r6myb0 _vyvc1n1a _1d4j1y44 _1f8gstnw _1pzyb3bt _ra6gww7y _13cdh2mm _1pp0126e _zvy9f705 _qcxof705 _qzn01a66 _j0l11wug _1weckb7n _1na21hna _vsnzgrf3 _x7c815vq _lh0y15vq _1m3815vq _qk1e15vq _12l6ysn8 _uga3ysn8 _mx8b7mnp _1kr87mnp _xo19t94y _1bemt94y _nalpstnw _151dstnw _1exb1q9c _1hgu1q9c _1mgnt94y _nhket94y _h909m7j4 _scgayz1z _ipl81e17 _40uk1l04 _i81p1a66 _1gx21e5h _1ls0df4r _vm2c1rh5 _12ok1rh5 _1ls01ule _rude1ule _1q16glyw _1io6glyw _juomusic _lcwuusic _pyovu2gc _ccm6u2gc _1ascu2gc _1yuau2gc _xr0w1a66 _4io21a66 _euyxusvi _cahfusvi _zhnuidpf _1amdidpf _mbgcpf9b _bu7zpf9b _131n1giz _gy101giz _1wfuwrk5 _16kzwrk5 _9kk3moej _cjus1w1g _9k2r1m30 _nhmw1m30 _yl021m30 _eiht5x2v _t9zb5x2v _mqok1w1g _3hsg1w1g _i7ngn7od _9wu1fb2s _1xcoh55r _1t361fxt _137bh55r _1k7d1fxt _97lipnps _12nh9lu1 _1g0517qg _i2ig10m5 _326z1fxt _113p131l _1n6tpnps _tgu817qg _1k47pnps _g0lx1fxt _ys4e131l _7gp8h55r _1yvq10m5 _1vww10m5 _1rju10m5 _1v0lh55r _wmyy17qg _748n17qg _1mfn17qg _1d7e17qg _p2vr17qg _19o610m5 _kxov17qg _1np517qg _m2f517qg _1b9tpnps _1tq6pnps _1rd2pnps _1pbkpnps _k3lipnps _13zt131l _2g12fb2s _k86b10m5 _b5iy131l _gti3131l _1f0gpnps _9d3e17qg _qdiapnps _72uvpnps",
   showLineNumbers: "_17071olh _1i3h1txw _16noidpf _h4fuidpf _pp6yidpf _1g4tidpf _11wmidpf _1bx8idpf",
   dontShowLineNumbers: "_1i3h1ule _16nou2gc _h4fuu2gc _pp6yu2gc _1g4tu2gc _11wmu2gc _1bx8u2gc",
   shouldWrapLongLines: "_13dgkb7n",
@@ -109,6 +112,9 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
 
   // https://product-fabric.atlassian.net/browse/DST-2472
   var languageToUse = text ? language : 'text';
+
+  // https://product-fabric.atlassian.net/browse/DSP-22927
+  var useCodeFont = (0, _platformFeatureFlags.fg)('platform_dst_code-token');
   return /*#__PURE__*/React.createElement(_syntaxHighlighter.default, {
     "data-code-lang": language,
     "data-ds--code--code-block": "",
@@ -136,7 +142,7 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
     "aria-label": showContentFocus ? label : undefined,
     role: showContentFocus ? 'region' : undefined,
     scrollRef: scrollableRef,
-    className: (0, _runtime.ax)([getCodeBlockStyles.root, shouldWrapLongLines ? getCodeBlockStyles.shouldWrapLongLines : getCodeBlockStyles.dontWrapLongLines, shouldShowLineNumbersValue ? getCodeBlockStyles.showLineNumbers : getCodeBlockStyles.dontShowLineNumbers])
+    className: (0, _runtime.ax)([useCodeFont ? getCodeBlockStyles.codeFontFlagOn : getCodeBlockStyles.codeFontFlagOff, getCodeBlockStyles.root, shouldWrapLongLines ? getCodeBlockStyles.shouldWrapLongLines : getCodeBlockStyles.dontWrapLongLines, shouldShowLineNumbersValue ? getCodeBlockStyles.showLineNumbers : getCodeBlockStyles.dontShowLineNumbers])
   });
 });
 var _default = exports.default = CodeBlock;

package/dist/es2019/code-block.compiled.css

@@ -3,6 +3,7 @@
 ._7xinn7od code[class*=language-]{all:unset}
 ._i7ngn7od .token:not([class=token],[data-ds--code--row--highlight],[data-ds--code--row]){all:unset}
 ._t7aun7od pre[class*=language-]{all:unset}
+._11c81u0j{font:var(--ds-font-code,normal 400 .875em/1 ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1dqoglyw{border-style:none}
 ._196q1xv3 [data-ds--code--row--highlight]:last-child{border-block-end:var(--ds-border-width,1px) dashed transparent}

package/dist/es2019/code-block.js

@@ -7,12 +7,15 @@ import { ax, ix } from "@compiled/react/runtime";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import rafSchedule from 'raf-schd';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useHighlightLines } from './internal/hooks/use-highlight';
 import { getLineNumWidth } from './internal/theme/styles';
 import { normalizeLanguage } from './internal/utils/get-normalized-language';
 import SyntaxHighlighter from './syntax-highlighter';
 const getCodeBlockStyles = {
-  root: "_2rko12b0 _1dqoglyw _1wyb1crf _k48pi7a9 _1e0c1txw _vwz4gktf _1reo1wug _o572qvpr _1eimjvyg _bfhktkvp _syaz1fxt _ect41odn _1ozdn7od _7xinn7od _t7aun7od _r28du2gc _tajqu2gc _1ohiu2gc _m802u2gc _i6ntu2gc _1w2xu2gc _1hmyegat _vblregat _vbulegat _196q1xv3 _1vbw1xv3 _1v9c1xv3 _1srn17d7 _18r6myb0 _vyvc1n1a _1d4j1y44 _1f8gstnw _1pzyb3bt _ra6gww7y _13cdh2mm _1pp0126e _zvy9f705 _qcxof705 _qzn01a66 _j0l11wug _1weckb7n _1na21hna _vsnzgrf3 _x7c815vq _lh0y15vq _1m3815vq _qk1e15vq _12l6ysn8 _uga3ysn8 _mx8b7mnp _1kr87mnp _xo19t94y _1bemt94y _nalpstnw _151dstnw _1exb1q9c _1hgu1q9c _1mgnt94y _nhket94y _h909m7j4 _scgayz1z _ipl81e17 _40uk1l04 _i81p1a66 _1gx21e5h _1ls0df4r _vm2c1rh5 _12ok1rh5 _1ls01ule _rude1ule _1q16glyw _1io6glyw _juomusic _lcwuusic _pyovu2gc _ccm6u2gc _1ascu2gc _1yuau2gc _xr0w1a66 _4io21a66 _euyxusvi _cahfusvi _zhnuidpf _1amdidpf _mbgcpf9b _bu7zpf9b _131n1giz _gy101giz _1wfuwrk5 _16kzwrk5 _9kk3moej _cjus1w1g _9k2r1m30 _nhmw1m30 _yl021m30 _eiht5x2v _t9zb5x2v _mqok1w1g _3hsg1w1g _i7ngn7od _9wu1fb2s _1xcoh55r _1t361fxt _137bh55r _1k7d1fxt _97lipnps _12nh9lu1 _1g0517qg _i2ig10m5 _326z1fxt _113p131l _1n6tpnps _tgu817qg _1k47pnps _g0lx1fxt _ys4e131l _7gp8h55r _1yvq10m5 _1vww10m5 _1rju10m5 _1v0lh55r _wmyy17qg _748n17qg _1mfn17qg _1d7e17qg _p2vr17qg _19o610m5 _kxov17qg _1np517qg _m2f517qg _1b9tpnps _1tq6pnps _1rd2pnps _1pbkpnps _k3lipnps _13zt131l _2g12fb2s _k86b10m5 _b5iy131l _gti3131l _1f0gpnps _9d3e17qg _qdiapnps _72uvpnps",
+  codeFontFlagOn: "_11c81u0j",
+  codeFontFlagOff: "_1wyb1crf _k48pi7a9 _ect41odn",
+  root: "_2rko12b0 _1dqoglyw _1e0c1txw _vwz4gktf _1reo1wug _o572qvpr _1eimjvyg _bfhktkvp _syaz1fxt _1ozdn7od _7xinn7od _t7aun7od _r28du2gc _tajqu2gc _1ohiu2gc _m802u2gc _i6ntu2gc _1w2xu2gc _1hmyegat _vblregat _vbulegat _196q1xv3 _1vbw1xv3 _1v9c1xv3 _1srn17d7 _18r6myb0 _vyvc1n1a _1d4j1y44 _1f8gstnw _1pzyb3bt _ra6gww7y _13cdh2mm _1pp0126e _zvy9f705 _qcxof705 _qzn01a66 _j0l11wug _1weckb7n _1na21hna _vsnzgrf3 _x7c815vq _lh0y15vq _1m3815vq _qk1e15vq _12l6ysn8 _uga3ysn8 _mx8b7mnp _1kr87mnp _xo19t94y _1bemt94y _nalpstnw _151dstnw _1exb1q9c _1hgu1q9c _1mgnt94y _nhket94y _h909m7j4 _scgayz1z _ipl81e17 _40uk1l04 _i81p1a66 _1gx21e5h _1ls0df4r _vm2c1rh5 _12ok1rh5 _1ls01ule _rude1ule _1q16glyw _1io6glyw _juomusic _lcwuusic _pyovu2gc _ccm6u2gc _1ascu2gc _1yuau2gc _xr0w1a66 _4io21a66 _euyxusvi _cahfusvi _zhnuidpf _1amdidpf _mbgcpf9b _bu7zpf9b _131n1giz _gy101giz _1wfuwrk5 _16kzwrk5 _9kk3moej _cjus1w1g _9k2r1m30 _nhmw1m30 _yl021m30 _eiht5x2v _t9zb5x2v _mqok1w1g _3hsg1w1g _i7ngn7od _9wu1fb2s _1xcoh55r _1t361fxt _137bh55r _1k7d1fxt _97lipnps _12nh9lu1 _1g0517qg _i2ig10m5 _326z1fxt _113p131l _1n6tpnps _tgu817qg _1k47pnps _g0lx1fxt _ys4e131l _7gp8h55r _1yvq10m5 _1vww10m5 _1rju10m5 _1v0lh55r _wmyy17qg _748n17qg _1mfn17qg _1d7e17qg _p2vr17qg _19o610m5 _kxov17qg _1np517qg _m2f517qg _1b9tpnps _1tq6pnps _1rd2pnps _1pbkpnps _k3lipnps _13zt131l _2g12fb2s _k86b10m5 _b5iy131l _gti3131l _1f0gpnps _9d3e17qg _qdiapnps _72uvpnps",
   showLineNumbers: "_17071olh _1i3h1txw _16noidpf _h4fuidpf _pp6yidpf _1g4tidpf _11wmidpf _1bx8idpf",
   dontShowLineNumbers: "_1i3h1ule _16nou2gc _h4fuu2gc _pp6yu2gc _1g4tu2gc _11wmu2gc _1bx8u2gc",
   shouldWrapLongLines: "_13dgkb7n",
@@ -84,6 +87,9 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
 
   // https://product-fabric.atlassian.net/browse/DST-2472
   const languageToUse = text ? language : 'text';
+
+  // https://product-fabric.atlassian.net/browse/DSP-22927
+  const useCodeFont = fg('platform_dst_code-token');
   return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
     "data-code-lang": language,
     "data-ds--code--code-block": "",
@@ -111,7 +117,7 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
     "aria-label": showContentFocus ? label : undefined,
     role: showContentFocus ? 'region' : undefined,
     scrollRef: scrollableRef,
-    className: ax([getCodeBlockStyles.root, shouldWrapLongLines ? getCodeBlockStyles.shouldWrapLongLines : getCodeBlockStyles.dontWrapLongLines, shouldShowLineNumbersValue ? getCodeBlockStyles.showLineNumbers : getCodeBlockStyles.dontShowLineNumbers])
+    className: ax([useCodeFont ? getCodeBlockStyles.codeFontFlagOn : getCodeBlockStyles.codeFontFlagOff, getCodeBlockStyles.root, shouldWrapLongLines ? getCodeBlockStyles.shouldWrapLongLines : getCodeBlockStyles.dontWrapLongLines, shouldShowLineNumbersValue ? getCodeBlockStyles.showLineNumbers : getCodeBlockStyles.dontShowLineNumbers])
   });
 });
 export default CodeBlock;

package/dist/esm/code-block.compiled.css

@@ -3,6 +3,7 @@
 ._7xinn7od code[class*=language-]{all:unset}
 ._i7ngn7od .token:not([class=token],[data-ds--code--row--highlight],[data-ds--code--row]){all:unset}
 ._t7aun7od pre[class*=language-]{all:unset}
+._11c81u0j{font:var(--ds-font-code,normal 400 .875em/1 ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1dqoglyw{border-style:none}
 ._196q1xv3 [data-ds--code--row--highlight]:last-child{border-block-end:var(--ds-border-width,1px) dashed transparent}

package/dist/esm/code-block.js

@@ -9,12 +9,15 @@ import { ax, ix } from "@compiled/react/runtime";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import rafSchedule from 'raf-schd';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useHighlightLines } from './internal/hooks/use-highlight';
 import { getLineNumWidth } from './internal/theme/styles';
 import { normalizeLanguage } from './internal/utils/get-normalized-language';
 import SyntaxHighlighter from './syntax-highlighter';
 var getCodeBlockStyles = {
-  root: "_2rko12b0 _1dqoglyw _1wyb1crf _k48pi7a9 _1e0c1txw _vwz4gktf _1reo1wug _o572qvpr _1eimjvyg _bfhktkvp _syaz1fxt _ect41odn _1ozdn7od _7xinn7od _t7aun7od _r28du2gc _tajqu2gc _1ohiu2gc _m802u2gc _i6ntu2gc _1w2xu2gc _1hmyegat _vblregat _vbulegat _196q1xv3 _1vbw1xv3 _1v9c1xv3 _1srn17d7 _18r6myb0 _vyvc1n1a _1d4j1y44 _1f8gstnw _1pzyb3bt _ra6gww7y _13cdh2mm _1pp0126e _zvy9f705 _qcxof705 _qzn01a66 _j0l11wug _1weckb7n _1na21hna _vsnzgrf3 _x7c815vq _lh0y15vq _1m3815vq _qk1e15vq _12l6ysn8 _uga3ysn8 _mx8b7mnp _1kr87mnp _xo19t94y _1bemt94y _nalpstnw _151dstnw _1exb1q9c _1hgu1q9c _1mgnt94y _nhket94y _h909m7j4 _scgayz1z _ipl81e17 _40uk1l04 _i81p1a66 _1gx21e5h _1ls0df4r _vm2c1rh5 _12ok1rh5 _1ls01ule _rude1ule _1q16glyw _1io6glyw _juomusic _lcwuusic _pyovu2gc _ccm6u2gc _1ascu2gc _1yuau2gc _xr0w1a66 _4io21a66 _euyxusvi _cahfusvi _zhnuidpf _1amdidpf _mbgcpf9b _bu7zpf9b _131n1giz _gy101giz _1wfuwrk5 _16kzwrk5 _9kk3moej _cjus1w1g _9k2r1m30 _nhmw1m30 _yl021m30 _eiht5x2v _t9zb5x2v _mqok1w1g _3hsg1w1g _i7ngn7od _9wu1fb2s _1xcoh55r _1t361fxt _137bh55r _1k7d1fxt _97lipnps _12nh9lu1 _1g0517qg _i2ig10m5 _326z1fxt _113p131l _1n6tpnps _tgu817qg _1k47pnps _g0lx1fxt _ys4e131l _7gp8h55r _1yvq10m5 _1vww10m5 _1rju10m5 _1v0lh55r _wmyy17qg _748n17qg _1mfn17qg _1d7e17qg _p2vr17qg _19o610m5 _kxov17qg _1np517qg _m2f517qg _1b9tpnps _1tq6pnps _1rd2pnps _1pbkpnps _k3lipnps _13zt131l _2g12fb2s _k86b10m5 _b5iy131l _gti3131l _1f0gpnps _9d3e17qg _qdiapnps _72uvpnps",
+  codeFontFlagOn: "_11c81u0j",
+  codeFontFlagOff: "_1wyb1crf _k48pi7a9 _ect41odn",
+  root: "_2rko12b0 _1dqoglyw _1e0c1txw _vwz4gktf _1reo1wug _o572qvpr _1eimjvyg _bfhktkvp _syaz1fxt _1ozdn7od _7xinn7od _t7aun7od _r28du2gc _tajqu2gc _1ohiu2gc _m802u2gc _i6ntu2gc _1w2xu2gc _1hmyegat _vblregat _vbulegat _196q1xv3 _1vbw1xv3 _1v9c1xv3 _1srn17d7 _18r6myb0 _vyvc1n1a _1d4j1y44 _1f8gstnw _1pzyb3bt _ra6gww7y _13cdh2mm _1pp0126e _zvy9f705 _qcxof705 _qzn01a66 _j0l11wug _1weckb7n _1na21hna _vsnzgrf3 _x7c815vq _lh0y15vq _1m3815vq _qk1e15vq _12l6ysn8 _uga3ysn8 _mx8b7mnp _1kr87mnp _xo19t94y _1bemt94y _nalpstnw _151dstnw _1exb1q9c _1hgu1q9c _1mgnt94y _nhket94y _h909m7j4 _scgayz1z _ipl81e17 _40uk1l04 _i81p1a66 _1gx21e5h _1ls0df4r _vm2c1rh5 _12ok1rh5 _1ls01ule _rude1ule _1q16glyw _1io6glyw _juomusic _lcwuusic _pyovu2gc _ccm6u2gc _1ascu2gc _1yuau2gc _xr0w1a66 _4io21a66 _euyxusvi _cahfusvi _zhnuidpf _1amdidpf _mbgcpf9b _bu7zpf9b _131n1giz _gy101giz _1wfuwrk5 _16kzwrk5 _9kk3moej _cjus1w1g _9k2r1m30 _nhmw1m30 _yl021m30 _eiht5x2v _t9zb5x2v _mqok1w1g _3hsg1w1g _i7ngn7od _9wu1fb2s _1xcoh55r _1t361fxt _137bh55r _1k7d1fxt _97lipnps _12nh9lu1 _1g0517qg _i2ig10m5 _326z1fxt _113p131l _1n6tpnps _tgu817qg _1k47pnps _g0lx1fxt _ys4e131l _7gp8h55r _1yvq10m5 _1vww10m5 _1rju10m5 _1v0lh55r _wmyy17qg _748n17qg _1mfn17qg _1d7e17qg _p2vr17qg _19o610m5 _kxov17qg _1np517qg _m2f517qg _1b9tpnps _1tq6pnps _1rd2pnps _1pbkpnps _k3lipnps _13zt131l _2g12fb2s _k86b10m5 _b5iy131l _gti3131l _1f0gpnps _9d3e17qg _qdiapnps _72uvpnps",
   showLineNumbers: "_17071olh _1i3h1txw _16noidpf _h4fuidpf _pp6yidpf _1g4tidpf _11wmidpf _1bx8idpf",
   dontShowLineNumbers: "_1i3h1ule _16nou2gc _h4fuu2gc _pp6yu2gc _1g4tu2gc _11wmu2gc _1bx8u2gc",
   shouldWrapLongLines: "_13dgkb7n",
@@ -101,6 +104,9 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
 
   // https://product-fabric.atlassian.net/browse/DST-2472
   var languageToUse = text ? language : 'text';
+
+  // https://product-fabric.atlassian.net/browse/DSP-22927
+  var useCodeFont = fg('platform_dst_code-token');
   return /*#__PURE__*/React.createElement(SyntaxHighlighter, {
     "data-code-lang": language,
     "data-ds--code--code-block": "",
@@ -128,7 +134,7 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
     "aria-label": showContentFocus ? label : undefined,
     role: showContentFocus ? 'region' : undefined,
     scrollRef: scrollableRef,
-    className: ax([getCodeBlockStyles.root, shouldWrapLongLines ? getCodeBlockStyles.shouldWrapLongLines : getCodeBlockStyles.dontWrapLongLines, shouldShowLineNumbersValue ? getCodeBlockStyles.showLineNumbers : getCodeBlockStyles.dontShowLineNumbers])
+    className: ax([useCodeFont ? getCodeBlockStyles.codeFontFlagOn : getCodeBlockStyles.codeFontFlagOff, getCodeBlockStyles.root, shouldWrapLongLines ? getCodeBlockStyles.shouldWrapLongLines : getCodeBlockStyles.dontWrapLongLines, shouldShowLineNumbersValue ? getCodeBlockStyles.showLineNumbers : getCodeBlockStyles.dontShowLineNumbers])
   });
 });
 export default CodeBlock;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/code",
-	"version": "17.2.7",
+	"version": "17.3.0",
 	"description": "Code highlights short strings of code snippets inline with body text.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,11 +29,11 @@
 	"dependencies": {
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tokens": "^6.4.0",
-		"@atlaskit/tooltip": "^20.5.0",
+		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/tooltip": "^20.6.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.3",
+		"@compiled/react": "^0.18.6",
 		"bind-event-listener": "^3.0.0",
 		"memoize-one": "^6.0.0",
 		"raf-schd": "^4.0.3",
@@ -47,12 +47,12 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.5.0",
-		"@atlaskit/docs": "^11.1.0",
+		"@atlaskit/docs": "^11.2.0",
 		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/form": "^14.2.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/primitives": "^14.15.0",
-		"@atlaskit/section-message": "^8.7.0",
+		"@atlaskit/primitives": "^16.0.0",
+		"@atlaskit/section-message": "^8.8.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/toggle": "^15.1.0",
@@ -105,5 +105,10 @@
 			]
 		}
 	},
-	"homepage": "https://atlassian.design/components/code/"
+	"homepage": "https://atlassian.design/components/code/",
+	"platform-feature-flags": {
+		"platform_dst_code-token": {
+			"type": "boolean"
+		}
+	}
 }