@atlaskit/code 14.3.0 → 14.3.3

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.getColorPalette = exports.defaultBaseTheme = exports.getBaseTheme = void 0;
+exports.getColorPalette = exports.getBaseTheme = exports.defaultBaseTheme = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -23,9 +23,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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) { (0, _defineProperty2.default)(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) { (0, _defineProperty2.default)(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; }
 
 // Hardcoded values have been used due to the current color palette not having any
 // accessible color options for Teal and Yellow and +20A
@@ -38,26 +38,26 @@ var getBaseTheme = function getBaseTheme(theme) {
     fontFamily: (0, _constants.codeFontFamily)(),
     fontFamilyItalic: "SFMono-MediumItalic, ".concat((0, _constants.codeFontFamily)()),
     backgroundColor: (0, _components.themed)({
-      light: colors.N20,
-      dark: colors.DN50
+      light: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
+      dark: "var(--ds-background-neutral, ".concat(colors.DN50, ")")
     })({
       theme: theme
     }),
     textColor: (0, _components.themed)({
-      light: colors.N800,
-      dark: colors.DN800
+      light: "var(--ds-text, ".concat(colors.N800, ")"),
+      dark: "var(--ds-text, ".concat(colors.DN800, ")")
     })({
       theme: theme
     }),
     lineNumberColor: (0, _components.themed)({
-      light: colors.N400,
-      dark: colors.DN400
+      light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
+      dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
     })({
       theme: theme
     }),
     lineNumberBgColor: (0, _components.themed)({
-      light: colors.N30,
-      dark: colors.DN20
+      light: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
+      dark: "var(--ds-background-neutral, ".concat(colors.DN20, ")")
     })({
       theme: theme
     })
@@ -75,180 +75,180 @@ var getColorPalette = (0, _memoizeOne.default)(function (theme) {
   };
   return {
     highlightedLineBgColor: (0, _components.themed)({
-      light: colors.N30,
-      dark: PLUS20
+      light: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
+      dark: "var(--ds-background-neutral, ".concat(PLUS20, ")")
     })(akTheme),
     highlightedLineBorderColor: (0, _components.themed)({
-      light: colors.B200,
-      dark: colors.B100
+      light: "var(--ds-border-focused, ".concat(colors.B200, ")"),
+      dark: "var(--ds-border-focused, ".concat(colors.B100, ")")
     })(akTheme),
     substringColor: (0, _components.themed)({
-      light: colors.N400,
-      dark: colors.DN400
+      light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
+      dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
     })(akTheme),
     keywordColor: (0, _components.themed)({
-      light: colors.B400,
-      dark: colors.B75
+      light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
+      dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
     })(akTheme),
     attributeColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T200
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
     })(akTheme),
     selectorTagColor: (0, _components.themed)({
-      light: colors.B400,
-      dark: colors.B75
+      light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
+      dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
     })(akTheme),
     docTagColor: (0, _components.themed)({
-      light: Y1100,
-      dark: colors.Y300
+      light: "var(--ds-text-accent-yellow, ".concat(Y1100, ")"),
+      dark: "var(--ds-text-accent-yellow, ".concat(colors.Y300, ")")
     })(akTheme),
     nameColor: (0, _components.themed)({
-      light: colors.B400,
-      dark: colors.B75
+      light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
+      dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
     })(akTheme),
     builtInColor: (0, _components.themed)({
-      light: colors.B400,
-      dark: colors.B75
+      light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
+      dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
     })(akTheme),
     literalColor: (0, _components.themed)({
-      light: colors.B400,
-      dark: colors.B75
+      light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
+      dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
     })(akTheme),
     bulletColor: (0, _components.themed)({
-      light: colors.B400,
-      dark: colors.B75
+      light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
+      dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
     })(akTheme),
     codeColor: (0, _components.themed)({
-      light: colors.B400,
-      dark: colors.B75
+      light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
+      dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
     })(akTheme),
     regexpColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T200
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
     })(akTheme),
     symbolColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T200
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
     })(akTheme),
     variableColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T200
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
     })(akTheme),
     templateVariableColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T200
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
     })(akTheme),
     linkColor: (0, _components.themed)({
-      light: colors.P300,
-      dark: colors.P75
+      light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
+      dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
     })(akTheme),
     selectorAttributeColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T200
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
     })(akTheme),
     selectorPseudoColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T200
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T200, ")")
     })(akTheme),
     typeColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T100
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
     })(akTheme),
     stringColor: (0, _components.themed)({
-      light: colors.G500,
-      dark: colors.G200
+      light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
+      dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
     })(akTheme),
     selectorIdColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T100
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
     })(akTheme),
     selectorClassColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T100
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
     })(akTheme),
     quoteColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T100
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
     })(akTheme),
     templateTagColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T100
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
     })(akTheme),
     titleColor: (0, _components.themed)({
-      light: colors.P300,
-      dark: colors.P75
+      light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
+      dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
     })(akTheme),
     sectionColor: (0, _components.themed)({
-      light: colors.P300,
-      dark: colors.P75
+      light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
+      dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
     })(akTheme),
     commentColor: (0, _components.themed)({
-      light: colors.N400,
-      dark: colors.DN400
+      light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
+      dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
     })(akTheme),
     metaKeywordColor: (0, _components.themed)({
-      light: colors.G500,
-      dark: colors.G200
+      light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
+      dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
     })(akTheme),
     metaColor: (0, _components.themed)({
-      light: colors.N400,
-      dark: colors.DN400
+      light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
+      dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
     })(akTheme),
     functionColor: (0, _components.themed)({
-      light: colors.N800,
-      dark: colors.DN800
+      light: "var(--ds-text, ".concat(colors.N800, ")"),
+      dark: "var(--ds-text, ".concat(colors.DN800, ")")
     })(akTheme),
     numberColor: (0, _components.themed)({
-      light: colors.B400,
-      dark: colors.B75
+      light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
+      dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
     })(akTheme),
     prologColor: (0, _components.themed)({
-      light: colors.B400,
-      dark: colors.B75
+      light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
+      dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
     })(akTheme),
     cdataColor: (0, _components.themed)({
-      light: colors.N400,
-      dark: colors.B75
+      light: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
+      dark: "var(--ds-text-subtlest, ".concat(colors.B75, ")")
     })(akTheme),
     punctuationColor: (0, _components.themed)({
-      light: colors.N800,
-      dark: colors.DN800
+      light: "var(--ds-text, ".concat(colors.N800, ")"),
+      dark: "var(--ds-text, ".concat(colors.DN800, ")")
     })(akTheme),
     propertyColor: (0, _components.themed)({
-      light: colors.P300,
-      dark: colors.P75
+      light: "var(--ds-text-accent-purple, ".concat(colors.P300, ")"),
+      dark: "var(--ds-text-accent-purple, ".concat(colors.P75, ")")
     })(akTheme),
     constantColor: (0, _components.themed)({
-      light: T800,
-      dark: colors.T100
+      light: "var(--ds-text-accent-teal, ".concat(T800, ")"),
+      dark: "var(--ds-text-accent-teal, ".concat(colors.T100, ")")
     })(akTheme),
     booleanColor: (0, _components.themed)({
-      light: colors.B500,
-      dark: colors.B75
+      light: "var(--ds-text-accent-blue, ".concat(colors.B400, ")"),
+      dark: "var(--ds-text-accent-blue, ".concat(colors.B75, ")")
     })(akTheme),
     charColor: (0, _components.themed)({
-      light: colors.N800,
-      dark: colors.DN800
+      light: "var(--ds-text, ".concat(colors.N800, ")"),
+      dark: "var(--ds-text, ".concat(colors.DN800, ")")
     })(akTheme),
     insertedColor: (0, _components.themed)({
-      light: colors.G500,
-      dark: colors.B75
+      light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
+      dark: "var(--ds-text-accent-green, ".concat(colors.B75, ")")
     })(akTheme),
     deletedColor: (0, _components.themed)({
-      light: colors.R500,
-      dark: colors.B75
+      light: "var(--ds-text-accent-red, ".concat(colors.R500, ")"),
+      dark: "var(--ds-text-accent-red, ".concat(colors.B75, ")")
     })(akTheme),
     operatorColor: (0, _components.themed)({
-      light: colors.N800,
-      dark: colors.B75
+      light: "var(--ds-text, ".concat(colors.N800, ")"),
+      dark: "var(--ds-text, ".concat(colors.B75, ")")
     })(akTheme),
     atruleColor: (0, _components.themed)({
-      light: colors.G500,
-      dark: colors.G200
+      light: "var(--ds-text-accent-green, ".concat(colors.G500, ")"),
+      dark: "var(--ds-text-accent-green, ".concat(colors.G200, ")")
     })(akTheme),
     importantColor: (0, _components.themed)({
-      light: Y1100,
-      dark: colors.Y300
+      light: "var(--ds-text-accent-yellow, ".concat(Y1100, ")"),
+      dark: "var(--ds-text-accent-yellow, ".concat(colors.Y300, ")")
     })(akTheme)
   };
 });

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCodeBlockTheme = exports.getCodeStyles = exports.getCodeBlockStyles = exports.getBaseCodeStyles = exports.getLineNumWidth = void 0;
+exports.getLineNumWidth = exports.getCodeStyles = exports.getCodeBlockTheme = exports.getCodeBlockStyles = exports.getBaseCodeStyles = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -15,9 +15,9 @@ var _constants2 = require("./constants");
 
 var _getTheme = require("./get-theme");
 
-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) { (0, _defineProperty2.default)(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) { (0, _defineProperty2.default)(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; }
 
 var getLineNumWidth = function getLineNumWidth(numLines) {
   if (!numLines) {
@@ -250,6 +250,7 @@ var getCodeBlockStyles = function getCodeBlockStyles(theme) {
       },
       '& [data-ds--code--row--highlight]': {
         background: "".concat(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/cjs/react-syntax-highlighter-bidi-warning-renderer.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createBidiWarningRenderer = createBidiWarningRenderer;
-exports.createStyleObject = createStyleObject;
-exports.createClassNameString = createClassNameString;
 exports.createChildren = createChildren;
+exports.createClassNameString = createClassNameString;
+exports.createStyleObject = createStyleObject;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -20,9 +20,9 @@ var _bidiWarning = _interopRequireDefault(require("./bidi-warning"));
 
 var _bidiWarningDecorator = _interopRequireDefault(require("./bidi-warning/bidi-warning-decorator"));
 
-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) { (0, _defineProperty2.default)(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) { (0, _defineProperty2.default)(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; }
 
 function createBidiWarningRenderer(codeBidiWarningConfig) {
   return function bidiWarningRenderer(_ref) {

package/dist/cjs/version.json

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

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

@@ -17,7 +17,7 @@ const decoration = css({
     padding: '0 4px',
     fontSize: '14px',
     lineHeight: '18px',
-    background: Y75,
+    background: `var(--ds-background-warning, ${Y75})`,
 
     /**
      * Ensures the decoration receives pointer events when it occurs with
@@ -29,11 +29,12 @@ const 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, ${Y75})`
   }
 });
 export function Decorator({