@atlaskit/code 14.3.0 → 14.3.3

package/dist/es2019/internal/theme/get-theme.js

@@ -11,26 +11,26 @@ export const getBaseTheme = theme => ({
   fontFamily: codeFontFamily(),
   fontFamilyItalic: `SFMono-MediumItalic, ${codeFontFamily()}`,
   backgroundColor: themed({
-    light: colors.N20,
-    dark: colors.DN50
+    light: `var(--ds-background-neutral, ${colors.N20})`,
+    dark: `var(--ds-background-neutral, ${colors.DN50})`
   })({
     theme
   }),
   textColor: themed({
-    light: colors.N800,
-    dark: colors.DN800
+    light: `var(--ds-text, ${colors.N800})`,
+    dark: `var(--ds-text, ${colors.DN800})`
   })({
     theme
   }),
   lineNumberColor: themed({
-    light: colors.N400,
-    dark: colors.DN400
+    light: `var(--ds-text-subtlest, ${colors.N400})`,
+    dark: `var(--ds-text-subtlest, ${colors.DN400})`
   })({
     theme
   }),
   lineNumberBgColor: themed({
-    light: colors.N30,
-    dark: colors.DN20
+    light: `var(--ds-background-neutral, ${colors.N30})`,
+    dark: `var(--ds-background-neutral, ${colors.DN20})`
   })({
     theme
   })
@@ -44,180 +44,180 @@ export const getColorPalette = memoizeOne(theme => {
   };
   return {
     highlightedLineBgColor: themed({
-      light: colors.N30,
-      dark: PLUS20
+      light: `var(--ds-background-neutral, ${colors.N30})`,
+      dark: `var(--ds-background-neutral, ${PLUS20})`
     })(akTheme),
     highlightedLineBorderColor: themed({
-      light: colors.B200,
-      dark: colors.B100
+      light: `var(--ds-border-focused, ${colors.B200})`,
+      dark: `var(--ds-border-focused, ${colors.B100})`
     })(akTheme),
     substringColor: themed({
-      light: colors.N400,
-      dark: colors.DN400
+      light: `var(--ds-text-subtlest, ${colors.N400})`,
+      dark: `var(--ds-text-subtlest, ${colors.DN400})`
     })(akTheme),
     keywordColor: themed({
-      light: colors.B400,
-      dark: colors.B75
+      light: `var(--ds-text-accent-blue, ${colors.B400})`,
+      dark: `var(--ds-text-accent-blue, ${colors.B75})`
     })(akTheme),
     attributeColor: themed({
-      light: T800,
-      dark: colors.T200
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T200})`
     })(akTheme),
     selectorTagColor: themed({
-      light: colors.B400,
-      dark: colors.B75
+      light: `var(--ds-text-accent-blue, ${colors.B400})`,
+      dark: `var(--ds-text-accent-blue, ${colors.B75})`
     })(akTheme),
     docTagColor: themed({
-      light: Y1100,
-      dark: colors.Y300
+      light: `var(--ds-text-accent-yellow, ${Y1100})`,
+      dark: `var(--ds-text-accent-yellow, ${colors.Y300})`
     })(akTheme),
     nameColor: themed({
-      light: colors.B400,
-      dark: colors.B75
+      light: `var(--ds-text-accent-blue, ${colors.B400})`,
+      dark: `var(--ds-text-accent-blue, ${colors.B75})`
     })(akTheme),
     builtInColor: themed({
-      light: colors.B400,
-      dark: colors.B75
+      light: `var(--ds-text-accent-blue, ${colors.B400})`,
+      dark: `var(--ds-text-accent-blue, ${colors.B75})`
     })(akTheme),
     literalColor: themed({
-      light: colors.B400,
-      dark: colors.B75
+      light: `var(--ds-text-accent-blue, ${colors.B400})`,
+      dark: `var(--ds-text-accent-blue, ${colors.B75})`
     })(akTheme),
     bulletColor: themed({
-      light: colors.B400,
-      dark: colors.B75
+      light: `var(--ds-text-accent-blue, ${colors.B400})`,
+      dark: `var(--ds-text-accent-blue, ${colors.B75})`
     })(akTheme),
     codeColor: themed({
-      light: colors.B400,
-      dark: colors.B75
+      light: `var(--ds-text-accent-blue, ${colors.B400})`,
+      dark: `var(--ds-text-accent-blue, ${colors.B75})`
     })(akTheme),
     regexpColor: themed({
-      light: T800,
-      dark: colors.T200
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T200})`
     })(akTheme),
     symbolColor: themed({
-      light: T800,
-      dark: colors.T200
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T200})`
     })(akTheme),
     variableColor: themed({
-      light: T800,
-      dark: colors.T200
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T200})`
     })(akTheme),
     templateVariableColor: themed({
-      light: T800,
-      dark: colors.T200
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T200})`
     })(akTheme),
     linkColor: themed({
-      light: colors.P300,
-      dark: colors.P75
+      light: `var(--ds-text-accent-purple, ${colors.P300})`,
+      dark: `var(--ds-text-accent-purple, ${colors.P75})`
     })(akTheme),
     selectorAttributeColor: themed({
-      light: T800,
-      dark: colors.T200
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T200})`
     })(akTheme),
     selectorPseudoColor: themed({
-      light: T800,
-      dark: colors.T200
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T200})`
     })(akTheme),
     typeColor: themed({
-      light: T800,
-      dark: colors.T100
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T100})`
     })(akTheme),
     stringColor: themed({
-      light: colors.G500,
-      dark: colors.G200
+      light: `var(--ds-text-accent-green, ${colors.G500})`,
+      dark: `var(--ds-text-accent-green, ${colors.G200})`
     })(akTheme),
     selectorIdColor: themed({
-      light: T800,
-      dark: colors.T100
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T100})`
     })(akTheme),
     selectorClassColor: themed({
-      light: T800,
-      dark: colors.T100
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T100})`
     })(akTheme),
     quoteColor: themed({
-      light: T800,
-      dark: colors.T100
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T100})`
     })(akTheme),
     templateTagColor: themed({
-      light: T800,
-      dark: colors.T100
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T100})`
     })(akTheme),
     titleColor: themed({
-      light: colors.P300,
-      dark: colors.P75
+      light: `var(--ds-text-accent-purple, ${colors.P300})`,
+      dark: `var(--ds-text-accent-purple, ${colors.P75})`
     })(akTheme),
     sectionColor: themed({
-      light: colors.P300,
-      dark: colors.P75
+      light: `var(--ds-text-accent-purple, ${colors.P300})`,
+      dark: `var(--ds-text-accent-purple, ${colors.P75})`
     })(akTheme),
     commentColor: themed({
-      light: colors.N400,
-      dark: colors.DN400
+      light: `var(--ds-text-subtlest, ${colors.N400})`,
+      dark: `var(--ds-text-subtlest, ${colors.DN400})`
     })(akTheme),
     metaKeywordColor: themed({
-      light: colors.G500,
-      dark: colors.G200
+      light: `var(--ds-text-accent-green, ${colors.G500})`,
+      dark: `var(--ds-text-accent-green, ${colors.G200})`
     })(akTheme),
     metaColor: themed({
-      light: colors.N400,
-      dark: colors.DN400
+      light: `var(--ds-text-subtlest, ${colors.N400})`,
+      dark: `var(--ds-text-subtlest, ${colors.DN400})`
     })(akTheme),
     functionColor: themed({
-      light: colors.N800,
-      dark: colors.DN800
+      light: `var(--ds-text, ${colors.N800})`,
+      dark: `var(--ds-text, ${colors.DN800})`
     })(akTheme),
     numberColor: themed({
-      light: colors.B400,
-      dark: colors.B75
+      light: `var(--ds-text-accent-blue, ${colors.B400})`,
+      dark: `var(--ds-text-accent-blue, ${colors.B75})`
     })(akTheme),
     prologColor: themed({
-      light: colors.B400,
-      dark: colors.B75
+      light: `var(--ds-text-accent-blue, ${colors.B400})`,
+      dark: `var(--ds-text-accent-blue, ${colors.B75})`
     })(akTheme),
     cdataColor: themed({
-      light: colors.N400,
-      dark: colors.B75
+      light: `var(--ds-text-subtlest, ${colors.N400})`,
+      dark: `var(--ds-text-subtlest, ${colors.B75})`
     })(akTheme),
     punctuationColor: themed({
-      light: colors.N800,
-      dark: colors.DN800
+      light: `var(--ds-text, ${colors.N800})`,
+      dark: `var(--ds-text, ${colors.DN800})`
     })(akTheme),
     propertyColor: themed({
-      light: colors.P300,
-      dark: colors.P75
+      light: `var(--ds-text-accent-purple, ${colors.P300})`,
+      dark: `var(--ds-text-accent-purple, ${colors.P75})`
     })(akTheme),
     constantColor: themed({
-      light: T800,
-      dark: colors.T100
+      light: `var(--ds-text-accent-teal, ${T800})`,
+      dark: `var(--ds-text-accent-teal, ${colors.T100})`
     })(akTheme),
     booleanColor: themed({
-      light: colors.B500,
-      dark: colors.B75
+      light: `var(--ds-text-accent-blue, ${colors.B400})`,
+      dark: `var(--ds-text-accent-blue, ${colors.B75})`
     })(akTheme),
     charColor: themed({
-      light: colors.N800,
-      dark: colors.DN800
+      light: `var(--ds-text, ${colors.N800})`,
+      dark: `var(--ds-text, ${colors.DN800})`
     })(akTheme),
     insertedColor: themed({
-      light: colors.G500,
-      dark: colors.B75
+      light: `var(--ds-text-accent-green, ${colors.G500})`,
+      dark: `var(--ds-text-accent-green, ${colors.B75})`
     })(akTheme),
     deletedColor: themed({
-      light: colors.R500,
-      dark: colors.B75
+      light: `var(--ds-text-accent-red, ${colors.R500})`,
+      dark: `var(--ds-text-accent-red, ${colors.B75})`
     })(akTheme),
     operatorColor: themed({
-      light: colors.N800,
-      dark: colors.B75
+      light: `var(--ds-text, ${colors.N800})`,
+      dark: `var(--ds-text, ${colors.B75})`
     })(akTheme),
     atruleColor: themed({
-      light: colors.G500,
-      dark: colors.G200
+      light: `var(--ds-text-accent-green, ${colors.G500})`,
+      dark: `var(--ds-text-accent-green, ${colors.G200})`
     })(akTheme),
     importantColor: themed({
-      light: Y1100,
-      dark: colors.Y300
+      light: `var(--ds-text-accent-yellow, ${Y1100})`,
+      dark: `var(--ds-text-accent-yellow, ${colors.Y300})`
     })(akTheme)
   };
 });

package/dist/es2019/internal/theme/styles.js

@@ -220,6 +220,7 @@ export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEnd
   },
   '& [data-ds--code--row--highlight]': {
     background: `${theme.highlightedLineBgColor}`,
+    // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
     '&::before, &::after': {
       clipPath: 'inset(100%)',
       clip: 'rect(1px, 1px, 1px, 1px)',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/code",
-	"version": "14.3.0",
+	"version": "14.3.3",
 	"sideEffects": false
 }

package/dist/esm/bidi-warning/ui/index.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
 import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
 import { Decorator } from './styled';
@@ -33,7 +34,7 @@ export default function BidiWarning(_ref) {
 }
 var CustomizedTagWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
-      rest = _objectWithoutProperties(props, ["children"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
     ref: ref

package/dist/esm/bidi-warning/ui/styled.js

@@ -17,7 +17,7 @@ var decoration = css({
     padding: '0 4px',
     fontSize: '14px',
     lineHeight: '18px',
-    background: Y75,
+    background: "var(--ds-background-warning, ".concat(Y75, ")"),
 
     /**
      * Ensures the decoration receives pointer events when it occurs with
@@ -29,11 +29,12 @@ var decoration = css({
     content: '"<"attr(data-bidi-character-code)">"',
     // This color is Y800 which is not yet rolled out
     // https://hello.atlassian.net/wiki/spaces/~tswan/pages/1366555782?focusedCommentId=1370387374#comment-1370387374
-    color: '#7F5F01',
+    color: "var(--ds-text-warning, #7F5F01)",
     fontStyle: 'normal'
   },
   ':hover:before': {
-    color: '#533F04'
+    color: "var(--ds-text-warning, #533F04)",
+    background: "var(--ds-background-warning-hovered, ".concat(Y75, ")")
   }
 });
 export function Decorator(_ref) {

package/dist/esm/code.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["testId"],
+    _excluded2 = ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"];
 
 /** @jsx jsx */
 import React, { forwardRef, memo, useMemo } from 'react';
@@ -10,7 +12,7 @@ import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
 import { getCodeStyles } from './internal/theme/styles';
 var Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code(_ref, ref) {
   var testId = _ref.testId,
-      props = _objectWithoutProperties(_ref, ["testId"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var theme = useGlobalTheme();
   var styles = useMemo(function () {
@@ -23,7 +25,7 @@ var Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code(_ref, ref) {
       codeBidiWarningLabel = props.codeBidiWarningLabel,
       _props$codeBidiWarnin2 = props.codeBidiWarningTooltipEnabled,
       codeBidiWarningTooltipEnabled = _props$codeBidiWarnin2 === void 0 ? true : _props$codeBidiWarnin2,
-      otherProps = _objectWithoutProperties(props, ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"]);
+      otherProps = _objectWithoutProperties(props, _excluded2);
 
   var decoratedChildren = codeBidiWarnings ? jsx(RenderCodeChildrenWithBidiWarnings, {
     codeBidiWarningLabel: codeBidiWarningLabel,

package/dist/esm/internal/hooks/use-highlight.js

@@ -1,9 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { useCallback, useMemo } from 'react';
 var DEFAULT_LINE_EL_ATTR_OBJ = {