@atlaskit/theme - npm Package Compare versions

Comparing version 12.2.6 to 12.2.7

CHANGELOG.md

 # @atlaskit/theme
 
+## 12.2.7
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.2.6
@@ -4,0 +10,0 @@

dist/cjs/color-palettes.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,12 +9,8 @@ value: true
 exports.colorPalette8 = exports.colorPalette24 = exports.colorPalette16 = exports.colorPalette = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var colors = _interopRequireWildcard(require("./colors"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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; }
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // Jira Portfolio
@@ -101,16 +95,11 @@ var colorPalette8 = [{
 exports.colorPalette24 = colorPalette24;
-
 var colorPalette = function colorPalette() {
   var palette = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '8';
-
   switch (palette) {
     case '8':
       return colorPalette8;
-
     case '16':
       return colorPalette16;
-
     case '24':
       return colorPalette24;
-
     default:
@@ -120,3 +109,2 @@ throw new Error('The only available color palette is 8, 16, 24');
 };
-
 exports.colorPalette = colorPalette;

dist/cjs/colors.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -10,6 +9,5 @@ value: true
 exports.yellow = exports.textHover = exports.textActive = exports.text = exports.teal = exports.subtleText = exports.subtleHeading = exports.skeleton = exports.red = exports.purple = exports.primary = exports.placeholderText = exports.linkOutline = exports.linkHover = exports.linkActive = exports.link = exports.heading = exports.green = exports.codeBlock = exports.blue = exports.backgroundOnLayer = exports.backgroundHover = exports.backgroundActive = exports.background = exports.Y75 = exports.Y500 = exports.Y50 = exports.Y400 = exports.Y300 = exports.Y200 = exports.Y100 = exports.T75 = exports.T500 = exports.T50 = exports.T400 = exports.T300 = exports.T200 = exports.T100 = void 0;
-
 var _themed = _interopRequireDefault(require("./utils/themed"));
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // Reds
@@ -28,4 +26,5 @@ var R50 = '#FFEBE6';
 exports.R400 = R400;
-var R500 = '#BF2600'; // Yellows
+var R500 = '#BF2600';
 
+// Yellows
 exports.R500 = R500;
@@ -44,4 +43,5 @@ var Y50 = '#FFFAE6';
 exports.Y400 = Y400;
-var Y500 = '#FF8B00'; // Greens
+var Y500 = '#FF8B00';
 
+// Greens
 exports.Y500 = Y500;
@@ -60,4 +60,5 @@ var G50 = '#E3FCEF';
 exports.G400 = G400;
-var G500 = '#006644'; // Blues
+var G500 = '#006644';
 
+// Blues
 exports.G500 = G500;
@@ -76,4 +77,5 @@ var B50 = '#DEEBFF';
 exports.B400 = B400;
-var B500 = '#0747A6'; // Purples
+var B500 = '#0747A6';
 
+// Purples
 exports.B500 = B500;
@@ -92,4 +94,5 @@ var P50 = '#EAE6FF';
 exports.P400 = P400;
-var P500 = '#403294'; // Teals
+var P500 = '#403294';
 
+// Teals
 exports.P500 = P500;
@@ -108,4 +111,5 @@ var T50 = '#E6FCFF';
 exports.T400 = T400;
-var T500 = '#008DA6'; // Neutrals
+var T500 = '#008DA6';
 
+// Neutrals
 exports.T500 = T500;
@@ -146,7 +150,9 @@ var N0 = '#FFFFFF';
 exports.N700 = N700;
-var N800 = '#172B4D'; // ATTENTION: update the tints if you update this
+var N800 = '#172B4D';
 
+// ATTENTION: update the tints if you update this
 exports.N800 = N800;
-var N900 = '#091E42'; // Each tint is made of N900 and an alpha channel
+var N900 = '#091E42';
 
+// Each tint is made of N900 and an alpha channel
 exports.N900 = N900;
@@ -185,4 +191,5 @@ var N10A = 'rgba(9, 30, 66, 0.02)';
 exports.N700A = N700A;
-var N800A = 'rgba(9, 30, 66, 0.95)'; // Dark Mode Neutrals
+var N800A = 'rgba(9, 30, 66, 0.95)';
 
+// Dark Mode Neutrals
 exports.N800A = N800A;
@@ -223,7 +230,9 @@ var DN900 = '#E6EDFA';
 exports.DN20 = DN20;
-var DN10 = '#0E1624'; // ATTENTION: update the tints if you update this
+var DN10 = '#0E1624';
 
+// ATTENTION: update the tints if you update this
 exports.DN10 = DN10;
-var DN0 = '#0D1424'; // Each dark tint is made of DN0 and an alpha channel
+var DN0 = '#0D1424';
 
+// Each dark tint is made of DN0 and an alpha channel
 exports.DN0 = DN0;
@@ -262,4 +271,5 @@ var DN800A = 'rgba(13, 20, 36, 0.06)';
 exports.DN20A = DN20A;
-var DN10A = 'rgba(13, 20, 36, 0.97)'; // Themed colors
+var DN10A = 'rgba(13, 20, 36, 0.97)';
 
+// Themed colors
 exports.DN10A = DN10A;
@@ -381,7 +391,5 @@ var background = (0, _themed.default)({
 exports.green = green;
-
 var skeleton = function skeleton() {
   return "var(--ds-skeleton, ".concat(N20A, ")");
 };
-
 exports.skeleton = skeleton;

dist/cjs/components.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -46,15 +44,8 @@ value: true
 });
-
 var _getTheme = _interopRequireDefault(require("./utils/get-theme"));
-
 var _themed = _interopRequireDefault(require("./utils/themed"));
-
 var _atlaskitThemeProvider = _interopRequireDefault(require("./components/atlaskit-theme-provider"));
-
 var _theme = _interopRequireWildcard(require("./components/theme"));
-
 var _createTheme = require("./utils/create-theme");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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; }

dist/cjs/components/atlaskit-theme-provider.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,18 +9,11 @@ value: true
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _colors = require("../colors");
-
 var _constants = require("../constants");
-
 var _useThemeResetStyles = _interopRequireWildcard(require("./hooks/use-theme-reset-styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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; }
+// For forward-compat until everything is upgraded.
 
-// For forward-compat until everything is upgraded.
 var themeFnMap = {
@@ -40,2 +31,3 @@ dark: function dark() {
 };
+
 /**
@@ -61,9 +53,8 @@ * __Atlaskit Theme Provider__
  */
-
 var AtlaskitThemeProvider = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? _constants.DEFAULT_THEME_MODE : _ref$mode,
-      _ref$background = _ref.background,
-      background = _ref$background === void 0 ? _colors.background : _ref$background,
-      children = _ref.children;
+    mode = _ref$mode === void 0 ? _constants.DEFAULT_THEME_MODE : _ref$mode,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? _colors.background : _ref$background,
+    children = _ref.children;
   // background color is extracted here is it conditionally applied on the <body>
@@ -70,0 +61,0 @@ var themeObj = {

dist/cjs/components/deprecated-theme-provider.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,15 +9,8 @@ value: true
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _constants = require("../constants");
-
 var _atlaskitThemeProvider = _interopRequireDefault(require("./atlaskit-theme-provider"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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; }
-
 /* eslint-disable @repo/internal/react/no-unsafe-overrides */
@@ -37,5 +28,5 @@
   var _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? _constants.DEFAULT_THEME_MODE : _ref$mode,
-      Provider = _ref.provider,
-      children = _ref.children;
+    mode = _ref$mode === void 0 ? _constants.DEFAULT_THEME_MODE : _ref$mode,
+    Provider = _ref.provider,
+    children = _ref.children;
   return /*#__PURE__*/_react.default.createElement(Provider, {
@@ -42,0 +33,0 @@ theme: (0, _defineProperty2.default)({}, _constants.CHANNEL, {

dist/cjs/components/hooks/use-theme-reset-styles.js

@@ -7,10 +7,7 @@ "use strict";
 exports.default = exports.SELECTOR = void 0;
-
 var _react = require("react");
-
 var _colors = require("../../colors");
+var SELECTOR = 'old-ds-theme-mode';
 
-var SELECTOR = 'old-ds-theme-mode';
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
 exports.SELECTOR = SELECTOR;
@@ -45,5 +42,5 @@ var baseResetStyles = [{
 };
-
 var UNIQUE_INTERNAL_ID = 'ds--theme--ak-theme-provider';
 var UNIQUE_BODY_BG_ID = 'ds--theme--ak-body-background';
+
 /**
@@ -54,3 +51,2 @@ * This hooks conditionally sets body styles based on the theme mode applied.
  */
-
 var useThemeResetStyles = function useThemeResetStyles(backgroundColor) {
@@ -60,14 +56,14 @@ var stylesheet = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    var hasNode = document.getElementById(UNIQUE_INTERNAL_ID); // Bail out if the AKThemeProvider has already set the body and there is already a theme stylesheet
+    var hasNode = document.getElementById(UNIQUE_INTERNAL_ID);
+
+    // Bail out if the AKThemeProvider has already set the body and there is already a theme stylesheet
     // Child nodes should not take precedence over a root node setting body bg
-
     if (hasNode) {
       return;
     }
-
     stylesheet.current = document.createElement('style');
-
     if (document && document.head) {
-      stylesheet.current.id = UNIQUE_INTERNAL_ID; // prepend the theme reset styles
+      stylesheet.current.id = UNIQUE_INTERNAL_ID;
 
+      // prepend the theme reset styles
       document.head.prepend(stylesheet.current);
@@ -87,3 +83,2 @@ stylesheet.current.innerHTML = baseResetStyles;
     var hasBodyNode = document.getElementById(UNIQUE_BODY_BG_ID);
-
     if (document && document.head) {
@@ -95,5 +90,5 @@ if (!hasBodyNode) {
         document.head.append(bgColorNode.current);
-      } // body element node already exists so just update the backgroundColor
+      }
 
-
+      // body element node already exists so just update the backgroundColor
       if (bgColorNode.current) {
@@ -103,3 +98,2 @@ var cssBgColor = getStylesheetResetCSS(backgroundColor);
       }
-
       return function () {
@@ -114,4 +108,3 @@ if (bgColorNode.current && document && document.head) {
 };
-
 var _default = useThemeResetStyles;
 exports.default = _default;

dist/cjs/components/theme.js

@@ -7,15 +7,12 @@ "use strict";
 exports.useGlobalTheme = exports.default = void 0;
-
 var _createTheme2 = require("../utils/create-theme");
-
 // Create default global light theme
 var _createTheme = (0, _createTheme2.createTheme)(function () {
-  return {
-    mode: 'light'
-  };
-}),
-    Provider = _createTheme.Provider,
-    Consumer = _createTheme.Consumer,
-    useTheme = _createTheme.useTheme;
-
+    return {
+      mode: 'light'
+    };
+  }),
+  Provider = _createTheme.Provider,
+  Consumer = _createTheme.Consumer,
+  useTheme = _createTheme.useTheme;
 exports.useGlobalTheme = useTheme;
@@ -22,0 +19,0 @@ var _default = {

dist/cjs/constants.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,7 +8,4 @@ value: true
 exports.visuallyHidden = exports.skeletonShimmer = exports.noFocusRing = exports.layers = exports.gridSize = exports.fontSizeSmall = exports.fontSize = exports.fontFamily = exports.focusRing = exports.codeFontFamily = exports.borderRadius = exports.assistive = exports.THEME_MODES = exports.DEFAULT_THEME_MODE = exports.CHANNEL = void 0;
-
 var _deprecationWarning = _interopRequireDefault(require("@atlaskit/ds-lib/deprecation-warning"));
-
 var _colors = require("./colors");
-
 var CHANNEL = '__ATLASKIT_THEME__';
@@ -20,2 +16,3 @@ exports.CHANNEL = CHANNEL;
 var THEME_MODES = ['light', 'dark'];
+
 /*
@@ -26,45 +23,31 @@ These theme values are expressed as functions so that if we decide to make
 */
-
 exports.THEME_MODES = THEME_MODES;
-
 var borderRadius = function borderRadius() {
   return 3;
 };
-
 exports.borderRadius = borderRadius;
-
 var gridSize = function gridSize() {
   return 8;
 };
-
 exports.gridSize = gridSize;
-
 var fontSize = function fontSize() {
   return 14;
 };
-
 exports.fontSize = fontSize;
-
 var fontSizeSmall = function fontSizeSmall() {
   return 11;
 };
-
 exports.fontSizeSmall = fontSizeSmall;
-
 var fontFamily = function fontFamily() {
   return "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
 };
-
 exports.fontFamily = fontFamily;
-
 var codeFontFamily = function codeFontFamily() {
   return "'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace";
 };
+
 /**
  * @deprecated Please use `@atlaskit/focus-ring`
  */
-
-
 exports.codeFontFamily = codeFontFamily;
-
 var focusRing = function focusRing() {
@@ -76,13 +59,10 @@ var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "var(--ds-border-focused, ".concat(_colors.B100, ")");
 };
+
 /**
  * @deprecated Please use `@atlaskit/focus-ring`
  */
-
-
 exports.focusRing = focusRing;
-
 var noFocusRing = function noFocusRing() {
   return "\n  box-shadow: none;\n";
 };
-
 exports.noFocusRing = noFocusRing;
@@ -117,10 +97,9 @@ var layers = {
   }
-}; // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
+};
 
+// eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 /**
  * @deprecated Please use `@atlaskit/visually-hidden`
  */
-
 exports.layers = layers;
-
 var visuallyHidden = function visuallyHidden() {
@@ -139,9 +118,9 @@ (0, _deprecationWarning.default)('@atlaskit/theme', 'visually hidden mixin', 'Please use `@atlaskit/visually-hidden` instead.');
 };
+
 /**
  * @deprecated Please use `@atlaskit/visually-hidden`
  */
-
-
 exports.visuallyHidden = visuallyHidden;
 var assistive = visuallyHidden;
+
 /**
@@ -153,5 +132,3 @@ * These styles are mirrored in:
  */
-
 exports.assistive = assistive;
-
 var skeletonShimmer = function skeletonShimmer() {
@@ -176,3 +153,2 @@ return {
 };
-
 exports.skeletonShimmer = skeletonShimmer;

dist/cjs/deprecated-provider-please-do-not-use.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -14,3 +13,2 @@ value: true
 });
-
 var _deprecatedThemeProvider = _interopRequireDefault(require("./components/deprecated-theme-provider"));

dist/cjs/elevation.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,8 +8,6 @@ value: true
 exports.e500 = exports.e400 = exports.e300 = exports.e200 = exports.e100 = void 0;
-
 var _colors = require("./colors");
-
 var _themed = _interopRequireDefault(require("./utils/themed"));
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // Cards on a board
@@ -20,4 +17,5 @@ var e100 = (0, _themed.default)({
   dark: "box-shadow: ".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(_colors.DN50A, ", 0 0 1px 1px ").concat(_colors.DN40A), ")"), ";")
-}); // Inline dialogs
+});
 
+// Inline dialogs
 exports.e100 = e100;
@@ -27,4 +25,5 @@ var e200 = (0, _themed.default)({
   dark: "box-shadow: ".concat("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")"), ";")
-}); // Modals
+});
 
+// Modals
 exports.e200 = e200;
@@ -34,4 +33,5 @@ var e300 = (0, _themed.default)({
   dark: "box-shadow: ".concat("var(--ds-shadow-overlay, ".concat("0 8px 16px -4px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")"), ";")
-}); // Panels
+});
 
+// Panels
 exports.e300 = e300;
@@ -41,4 +41,5 @@ var e400 = (0, _themed.default)({
   dark: "box-shadow: ".concat("var(--ds-shadow-overlay, ".concat("0 12px 24px -6px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")"), ";")
-}); // Flag messages (notifications)
+});
 
+// Flag messages (notifications)
 exports.e400 = e400;
@@ -45,0 +46,0 @@ var e500 = (0, _themed.default)({

dist/cjs/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -139,33 +137,17 @@ value: true
 });
-
 var colorPalettes = _interopRequireWildcard(require("./color-palettes"));
-
 exports.colorPalettes = colorPalettes;
-
 var colors = _interopRequireWildcard(require("./colors"));
-
 exports.colors = colors;
-
 var _atlaskitThemeProvider = _interopRequireDefault(require("./components/atlaskit-theme-provider"));
-
 var elevation = _interopRequireWildcard(require("./elevation"));
-
 exports.elevation = elevation;
-
 var typography = _interopRequireWildcard(require("./typography"));
-
 exports.typography = typography;
-
 var _getTheme = _interopRequireDefault(require("./utils/get-theme"));
-
 var _themed = _interopRequireDefault(require("./utils/themed"));
-
 var _constants = require("./constants");
-
 var _theme = _interopRequireWildcard(require("./components/theme"));
-
 var _createTheme = require("./utils/create-theme");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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; }

dist/cjs/typography.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,13 +8,7 @@ value: true
 exports.headingSizes = exports.h900 = exports.h800 = exports.h700 = exports.h600 = exports.h500 = exports.h400 = exports.h300 = exports.h200 = exports.h100 = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _colors = require("./colors");
-
 var _constants = require("./constants");
-
 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 = 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 baseHeading = function baseHeading(size, lineHeight) {
@@ -28,3 +21,2 @@ return {
 };
-
 var headingSizes = {
@@ -69,3 +61,2 @@ h900: {
 exports.headingSizes = headingSizes;
-
 var h900 = function h900() {
@@ -80,5 +71,3 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 };
-
 exports.h900 = h900;
-
 var h800 = function h800() {
@@ -93,5 +82,3 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 };
-
 exports.h800 = h800;
-
 var h700 = function h700() {
@@ -106,5 +93,3 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 };
-
 exports.h700 = h700;
-
 var h600 = function h600() {
@@ -119,5 +104,3 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 };
-
 exports.h600 = h600;
-
 var h500 = function h500() {
@@ -132,5 +115,3 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 };
-
 exports.h500 = h500;
-
 var h400 = function h400() {
@@ -145,5 +126,3 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 };
-
 exports.h400 = h400;
-
 var h300 = function h300() {
@@ -158,5 +137,3 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 };
-
 exports.h300 = h300;
-
 var h200 = function h200() {
@@ -170,5 +147,3 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 };
-
 exports.h200 = h200;
-
 var h100 = function h100() {
@@ -182,3 +157,2 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 };
-
 exports.h100 = h100;

dist/cjs/utils/create-theme.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,13 +9,7 @@ value: true
 exports.createTheme = createTheme;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _excluded = ["children"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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; }
-
 /**
@@ -36,2 +28,3 @@ * createTheme is used to create a set of Providers and Consumers for theming components.
   };
+
   /**
@@ -44,6 +37,3 @@ * Internally, Theme uses React Context, with internal providers and consumers.
    */
-
-
   var ThemeContext = /*#__PURE__*/(0, _react.createContext)(defaultGetTokens);
-
   function useTheme(themeProps) {
@@ -54,16 +44,18 @@ var theme = (0, _react.useContext)(ThemeContext);
     return tokens;
-  } // The Theme Consumer takes a function as its child - this function takes tokens, and the
+  }
+
+  // The Theme Consumer takes a function as its child - this function takes tokens, and the
   // return value is generally a set of nodes with the tokens applied appropriately.
-
-
   function Consumer(props) {
     var children = props.children,
-        themeProps = (0, _objectWithoutProperties2.default)(props, _excluded); // @ts-ignore See issue for more info: https://github.com/Microsoft/TypeScript/issues/10727
+      themeProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+    // @ts-ignore See issue for more info: https://github.com/Microsoft/TypeScript/issues/10727
     // Argument of type 'Pick<ThemeProps & { children: (tokens: ThemeTokens) => ReactNode; }, Exclude<keyof ThemeProps, "children">>' is not assignable to parameter of type 'ThemeProps'.ts(2345)
-
-    var tokens = useTheme(themeProps); // We add a fragment to ensure we don't break people upgrading.
+    var tokens = useTheme(themeProps);
+    // We add a fragment to ensure we don't break people upgrading.
     // Previously they may have been able to pass in undefined without things blowing up.
-
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children(tokens));
   }
+
   /**
@@ -76,4 +68,2 @@ * The Theme Provider takes regular nodes as its children, but also takes a *theme function*
    */
-
-
   function Provider(props) {
@@ -89,3 +79,2 @@ var themeFn = (0, _react.useContext)(ThemeContext);
   }
-
   return {
@@ -92,0 +81,0 @@ Consumer: Consumer,

dist/cjs/utils/get-theme.js

@@ -7,5 +7,3 @@ "use strict";
 exports.default = getTheme;
-
 var _constants = require("../constants");
-
 // Resolves the different types of theme objects in the current API
@@ -17,9 +15,9 @@ function getTheme(props) {
       return props.theme[_constants.CHANNEL];
-    } // User has provided alternative modes
+    }
+    // User has provided alternative modes
     else if ('mode' in props.theme && _constants.THEME_MODES.includes(props.theme.mode)) {
       return props.theme;
     }
-  } // If format not supported (or no theme provided), return standard theme
-
-
+  }
+  // If format not supported (or no theme provided), return standard theme
   return {
@@ -26,0 +24,0 @@ mode: _constants.DEFAULT_THEME_MODE

dist/cjs/utils/themed.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,6 +8,5 @@ value: true
 exports.default = themed;
-
 var _getTheme = _interopRequireDefault(require("./get-theme"));
+/* eslint-disable prefer-rest-params */
 
-/* eslint-disable prefer-rest-params */
 // Unpack custom variants, and get correct value for the current theme
@@ -18,13 +16,9 @@ function themedVariants(variantProp, variants) {
     var theme = (0, _getTheme.default)(props);
-
     if (props && props[variantProp] && variants) {
       var modes = variants[props[variantProp]];
-
       if (modes && modes[theme.mode]) {
         var value = modes[theme.mode];
-
         if (value) {
           return value;
         } // TS believes value can be undefined
-
       }
@@ -36,3 +30,2 @@ }
 }
-
 function themed(modesOrVariant, variantModes) {
@@ -42,11 +35,9 @@ if (typeof modesOrVariant === 'string') {
   }
-
   var modes = modesOrVariant;
   return function (props) {
     // Get theme from the user's props
-    var theme = (0, _getTheme.default)(props); // User isn't required to provide both light and dark values
-
+    var theme = (0, _getTheme.default)(props);
+    // User isn't required to provide both light and dark values
     if (theme.mode in modes) {
       var value = modes[theme.mode]; // TS believes value can be undefined
-
       if (value) {
@@ -56,5 +47,4 @@ return value;
     }
-
     return '';
   };
 }

dist/cjs/version.json

 {
 	"name": "@atlaskit/theme",
-	"version": "12.2.6",
+	"version": "12.2.7",
 	"sideEffects": false
 }

dist/es2019/color-palettes.js

@@ -83,9 +83,6 @@ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
       return colorPalette8;
-
     case '16':
       return colorPalette16;
-
     case '24':
       return colorPalette24;
-
     default:
@@ -92,0 +89,0 @@ throw new Error('The only available color palette is 8, 16, 24');

dist/es2019/colors.js

 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-import themed from './utils/themed'; // Reds
 
+import themed from './utils/themed';
+
+// Reds
 export const R50 = '#FFEBE6';
@@ -10,4 +12,5 @@ export const R75 = '#FFBDAD';
 export const R400 = '#DE350B';
-export const R500 = '#BF2600'; // Yellows
+export const R500 = '#BF2600';
 
+// Yellows
 export const Y50 = '#FFFAE6';
@@ -19,4 +22,5 @@ export const Y75 = '#FFF0B3';
 export const Y400 = '#FF991F';
-export const Y500 = '#FF8B00'; // Greens
+export const Y500 = '#FF8B00';
 
+// Greens
 export const G50 = '#E3FCEF';
@@ -28,4 +32,5 @@ export const G75 = '#ABF5D1';
 export const G400 = '#00875A';
-export const G500 = '#006644'; // Blues
+export const G500 = '#006644';
 
+// Blues
 export const B50 = '#DEEBFF';
@@ -37,4 +42,5 @@ export const B75 = '#B3D4FF';
 export const B400 = '#0052CC';
-export const B500 = '#0747A6'; // Purples
+export const B500 = '#0747A6';
 
+// Purples
 export const P50 = '#EAE6FF';
@@ -46,4 +52,5 @@ export const P75 = '#C0B6F2';
 export const P400 = '#5243AA';
-export const P500 = '#403294'; // Teals
+export const P500 = '#403294';
 
+// Teals
 export const T50 = '#E6FCFF';
@@ -55,4 +62,5 @@ export const T75 = '#B3F5FF';
 export const T400 = '#00A3BF';
-export const T500 = '#008DA6'; // Neutrals
+export const T500 = '#008DA6';
 
+// Neutrals
 export const N0 = '#FFFFFF';
@@ -75,6 +83,8 @@ export const N10 = '#FAFBFC';
 export const N700 = '#253858';
-export const N800 = '#172B4D'; // ATTENTION: update the tints if you update this
+export const N800 = '#172B4D';
 
-export const N900 = '#091E42'; // Each tint is made of N900 and an alpha channel
+// ATTENTION: update the tints if you update this
+export const N900 = '#091E42';
 
+// Each tint is made of N900 and an alpha channel
 export const N10A = 'rgba(9, 30, 66, 0.02)';
@@ -96,4 +106,5 @@ export const N20A = 'rgba(9, 30, 66, 0.04)';
 export const N700A = 'rgba(9, 30, 66, 0.89)';
-export const N800A = 'rgba(9, 30, 66, 0.95)'; // Dark Mode Neutrals
+export const N800A = 'rgba(9, 30, 66, 0.95)';
 
+// Dark Mode Neutrals
 export const DN900 = '#E6EDFA';
@@ -116,6 +127,8 @@ export const DN800 = '#DCE5F5';
 export const DN20 = '#121A29';
-export const DN10 = '#0E1624'; // ATTENTION: update the tints if you update this
+export const DN10 = '#0E1624';
 
-export const DN0 = '#0D1424'; // Each dark tint is made of DN0 and an alpha channel
+// ATTENTION: update the tints if you update this
+export const DN0 = '#0D1424';
 
+// Each dark tint is made of DN0 and an alpha channel
 export const DN800A = 'rgba(13, 20, 36, 0.06)';
@@ -137,4 +150,5 @@ export const DN700A = 'rgba(13, 20, 36, 0.14)';
 export const DN20A = 'rgba(13, 20, 36, 0.95)';
-export const DN10A = 'rgba(13, 20, 36, 0.97)'; // Themed colors
+export const DN10A = 'rgba(13, 20, 36, 0.97)';
 
+// Themed colors
 export const background = themed({
@@ -141,0 +155,0 @@ light: `var(--ds-surface, ${N0})`,

dist/es2019/components.js

@@ -6,2 +6,3 @@ /*
 */
+
 export { default as getTheme } from './utils/get-theme';
@@ -8,0 +9,0 @@ export { default as themed } from './utils/themed';

dist/es2019/components/atlaskit-theme-provider.js

@@ -15,2 +15,3 @@ import React, { memo } from 'react';
 };
+
 /**
@@ -36,3 +37,2 @@ * __Atlaskit Theme Provider__
  */
-
 const AtlaskitThemeProvider = /*#__PURE__*/memo(({
@@ -39,0 +39,0 @@ mode = DEFAULT_THEME_MODE,

dist/es2019/components/deprecated-theme-provider.js

@@ -5,3 +5,2 @@ /* eslint-disable @repo/internal/react/no-unsafe-overrides */
 import AtlaskitThemeProvider from './atlaskit-theme-provider';
-
 /**
@@ -8,0 +7,0 @@ * __Compat Theme Provider__

dist/es2019/components/hooks/use-theme-reset-styles.js

 import { useEffect, useRef } from 'react';
 import { heading, link, linkActive, linkHover, linkOutline, subtleHeading, subtleText, text } from '../../colors';
 export const SELECTOR = 'old-ds-theme-mode';
+
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
 const baseResetStyles = [{
@@ -58,5 +58,5 @@ mode: 'light'
 const getStylesheetResetCSS = backgroundColor => `body { background: ${backgroundColor}; }`;
-
 const UNIQUE_INTERNAL_ID = 'ds--theme--ak-theme-provider';
 const UNIQUE_BODY_BG_ID = 'ds--theme--ak-body-background';
+
 /**
@@ -67,3 +67,2 @@ * This hooks conditionally sets body styles based on the theme mode applied.
  */
-
 const useThemeResetStyles = backgroundColor => {
@@ -73,14 +72,14 @@ const stylesheet = useRef(null);
   useEffect(() => {
-    const hasNode = document.getElementById(UNIQUE_INTERNAL_ID); // Bail out if the AKThemeProvider has already set the body and there is already a theme stylesheet
+    const hasNode = document.getElementById(UNIQUE_INTERNAL_ID);
+
+    // Bail out if the AKThemeProvider has already set the body and there is already a theme stylesheet
     // Child nodes should not take precedence over a root node setting body bg
-
     if (hasNode) {
       return;
     }
-
     stylesheet.current = document.createElement('style');
-
     if (document && document.head) {
-      stylesheet.current.id = UNIQUE_INTERNAL_ID; // prepend the theme reset styles
+      stylesheet.current.id = UNIQUE_INTERNAL_ID;
 
+      // prepend the theme reset styles
       document.head.prepend(stylesheet.current);
@@ -100,3 +99,2 @@ stylesheet.current.innerHTML = baseResetStyles;
     const hasBodyNode = document.getElementById(UNIQUE_BODY_BG_ID);
-
     if (document && document.head) {
@@ -108,5 +106,5 @@ if (!hasBodyNode) {
         document.head.append(bgColorNode.current);
-      } // body element node already exists so just update the backgroundColor
+      }
 
-
+      // body element node already exists so just update the backgroundColor
       if (bgColorNode.current) {
@@ -116,3 +114,2 @@ const cssBgColor = getStylesheetResetCSS(backgroundColor);
       }
-
       return () => {
@@ -127,3 +124,2 @@ if (bgColorNode.current && document && document.head) {
 };
-
 export default useThemeResetStyles;

dist/es2019/components/theme.js

@@ -1,3 +0,4 @@
-import { createTheme } from '../utils/create-theme'; // Create default global light theme
+import { createTheme } from '../utils/create-theme';
 
+// Create default global light theme
 const {
@@ -4,0 +5,0 @@ Provider,

dist/es2019/constants.js

@@ -6,2 +6,3 @@ import deprecationWarning from '@atlaskit/ds-lib/deprecation-warning';
 export const THEME_MODES = ['light', 'dark'];
+
 /*
@@ -12,3 +13,2 @@ These theme values are expressed as functions so that if we decide to make
 */
-
 export const borderRadius = () => 3;
@@ -20,6 +20,6 @@ export const gridSize = () => 8;
 export const codeFontFamily = () => `'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace`;
+
 /**
  * @deprecated Please use `@atlaskit/focus-ring`
  */
-
 export const focusRing = (color = `var(--ds-border-focused, ${B100})`, outlineWidth = gridSize() / 4) => {
@@ -34,6 +34,6 @@ deprecationWarning('@atlaskit/theme', 'focus ring mixin', 'Please use `@atlaskit/focus-ring` instead.');
 };
+
 /**
  * @deprecated Please use `@atlaskit/focus-ring`
  */
-
 export const noFocusRing = () => `
@@ -52,8 +52,8 @@ box-shadow: none;
   tooltip: () => 800
-}; // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
+};
 
+// eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 /**
  * @deprecated Please use `@atlaskit/visually-hidden`
  */
-
 export const visuallyHidden = () => {
@@ -72,7 +72,8 @@ deprecationWarning('@atlaskit/theme', 'visually hidden mixin', 'Please use `@atlaskit/visually-hidden` instead.');
 };
+
 /**
  * @deprecated Please use `@atlaskit/visually-hidden`
  */
+export const assistive = visuallyHidden;
 
-export const assistive = visuallyHidden;
 /**
@@ -84,3 +85,2 @@ * These styles are mirrored in:
  */
-
 export const skeletonShimmer = () => ({
@@ -87,0 +87,0 @@ css: {

dist/es2019/elevation.js

 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 import { DN40A, DN50A, DN60A, N40A, N50A, N60A } from './colors';
-import themed from './utils/themed'; // Cards on a board
+import themed from './utils/themed';
 
+// Cards on a board
 export const e100 = themed({
   light: `box-shadow: ${`var(--ds-shadow-raised, ${`0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`})`};`,
   dark: `box-shadow: ${`var(--ds-shadow-raised, ${`0 1px 1px ${DN50A}, 0 0 1px 1px ${DN40A}`})`};`
-}); // Inline dialogs
+});
 
+// Inline dialogs
 export const e200 = themed({
   light: `box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`};`,
   dark: `box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`};`
-}); // Modals
+});
 
+// Modals
 export const e300 = themed({
   light: `box-shadow: ${`var(--ds-shadow-overlay, ${`0 8px 16px -4px ${N50A}, 0 0 1px ${N60A}`})`};`,
   dark: `box-shadow: ${`var(--ds-shadow-overlay, ${`0 8px 16px -4px ${DN50A}, 0 0 1px ${DN60A}`})`};`
-}); // Panels
+});
 
+// Panels
 export const e400 = themed({
   light: `box-shadow: ${`var(--ds-shadow-overlay, ${`0 12px 24px -6px ${N50A}, 0 0 1px ${N60A}`})`};`,
   dark: `box-shadow: ${`var(--ds-shadow-overlay, ${`0 12px 24px -6px ${DN50A}, 0 0 1px ${DN60A}`})`};`
-}); // Flag messages (notifications)
+});
 
+// Flag messages (notifications)
 export const e500 = themed({
@@ -26,0 +32,0 @@ light: `box-shadow: ${`var(--ds-shadow-overlay, ${`0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`})`};`,

dist/es2019/typography.js

 import { heading, subtleHeading } from './colors';
 import { fontSize, gridSize } from './constants';
-
 const baseHeading = (size, lineHeight) => ({
@@ -9,3 +8,2 @@ fontSize: `${size / fontSize()}em`,
 });
-
 export const headingSizes = {
@@ -49,3 +47,4 @@ h900: {
 };
-export const h900 = (props = {}) => ({ ...baseHeading(headingSizes.h900.size, headingSizes.h900.lineHeight),
+export const h900 = (props = {}) => ({
+  ...baseHeading(headingSizes.h900.size, headingSizes.h900.lineHeight),
   color: `var(--ds-text, ${heading(props)})`,
@@ -56,3 +55,4 @@ fontWeight: "var(--ds-font-weight-medium, 500)",
 });
-export const h800 = (props = {}) => ({ ...baseHeading(headingSizes.h800.size, headingSizes.h800.lineHeight),
+export const h800 = (props = {}) => ({
+  ...baseHeading(headingSizes.h800.size, headingSizes.h800.lineHeight),
   color: `var(--ds-text, ${heading(props)})`,
@@ -63,3 +63,4 @@ fontWeight: "var(--ds-font-weight-semibold, 600)",
 });
-export const h700 = (props = {}) => ({ ...baseHeading(headingSizes.h700.size, headingSizes.h700.lineHeight),
+export const h700 = (props = {}) => ({
+  ...baseHeading(headingSizes.h700.size, headingSizes.h700.lineHeight),
   color: `var(--ds-text, ${heading(props)})`,
@@ -70,3 +71,4 @@ fontWeight: "var(--ds-font-weight-medium, 500)",
 });
-export const h600 = (props = {}) => ({ ...baseHeading(headingSizes.h600.size, headingSizes.h600.lineHeight),
+export const h600 = (props = {}) => ({
+  ...baseHeading(headingSizes.h600.size, headingSizes.h600.lineHeight),
   color: `var(--ds-text, ${heading(props)})`,
@@ -77,3 +79,4 @@ fontWeight: "var(--ds-font-weight-medium, 500)",
 });
-export const h500 = (props = {}) => ({ ...baseHeading(headingSizes.h500.size, headingSizes.h500.lineHeight),
+export const h500 = (props = {}) => ({
+  ...baseHeading(headingSizes.h500.size, headingSizes.h500.lineHeight),
   color: `var(--ds-text, ${heading(props)})`,
@@ -84,3 +87,4 @@ fontWeight: "var(--ds-font-weight-semibold, 600)",
 });
-export const h400 = (props = {}) => ({ ...baseHeading(headingSizes.h400.size, headingSizes.h400.lineHeight),
+export const h400 = (props = {}) => ({
+  ...baseHeading(headingSizes.h400.size, headingSizes.h400.lineHeight),
   color: `var(--ds-text, ${heading(props)})`,
@@ -91,3 +95,4 @@ fontWeight: "var(--ds-font-weight-semibold, 600)",
 });
-export const h300 = (props = {}) => ({ ...baseHeading(headingSizes.h300.size, headingSizes.h300.lineHeight),
+export const h300 = (props = {}) => ({
+  ...baseHeading(headingSizes.h300.size, headingSizes.h300.lineHeight),
   color: `var(--ds-text, ${heading(props)})`,
@@ -98,3 +103,4 @@ fontWeight: "var(--ds-font-weight-semibold, 600)",
 });
-export const h200 = (props = {}) => ({ ...baseHeading(headingSizes.h200.size, headingSizes.h200.lineHeight),
+export const h200 = (props = {}) => ({
+  ...baseHeading(headingSizes.h200.size, headingSizes.h200.lineHeight),
   color: `var(--ds-text-subtlest, ${subtleHeading(props)})`,
@@ -104,3 +110,4 @@ fontWeight: "var(--ds-font-weight-semibold, 600)",
 });
-export const h100 = (props = {}) => ({ ...baseHeading(headingSizes.h100.size, headingSizes.h100.lineHeight),
+export const h100 = (props = {}) => ({
+  ...baseHeading(headingSizes.h100.size, headingSizes.h100.lineHeight),
   color: `var(--ds-text-subtlest, ${subtleHeading(props)})`,
@@ -107,0 +114,0 @@ fontWeight: "var(--ds-font-weight-bold, 700)",

dist/es2019/utils/create-theme.js

 import React, { createContext, useCallback, useContext } from 'react';
-
 /**
@@ -14,2 +13,3 @@ * createTheme is used to create a set of Providers and Consumers for theming components.
   const emptyThemeFn = (getTokens, props) => getTokens(props);
+
   /**
@@ -22,6 +22,3 @@ * Internally, Theme uses React Context, with internal providers and consumers.
    */
-
-
   const ThemeContext = /*#__PURE__*/createContext(defaultGetTokens);
-
   function useTheme(themeProps) {
@@ -32,6 +29,6 @@ const theme = useContext(ThemeContext);
     return tokens;
-  } // The Theme Consumer takes a function as its child - this function takes tokens, and the
+  }
+
+  // The Theme Consumer takes a function as its child - this function takes tokens, and the
   // return value is generally a set of nodes with the tokens applied appropriately.
-
-
   function Consumer(props) {
@@ -41,10 +38,12 @@ const {
       ...themeProps
-    } = props; // @ts-ignore See issue for more info: https://github.com/Microsoft/TypeScript/issues/10727
+    } = props;
+
+    // @ts-ignore See issue for more info: https://github.com/Microsoft/TypeScript/issues/10727
     // Argument of type 'Pick<ThemeProps & { children: (tokens: ThemeTokens) => ReactNode; }, Exclude<keyof ThemeProps, "children">>' is not assignable to parameter of type 'ThemeProps'.ts(2345)
-
-    const tokens = useTheme(themeProps); // We add a fragment to ensure we don't break people upgrading.
+    const tokens = useTheme(themeProps);
+    // We add a fragment to ensure we don't break people upgrading.
     // Previously they may have been able to pass in undefined without things blowing up.
-
     return /*#__PURE__*/React.createElement(React.Fragment, null, children(tokens));
   }
+
   /**
@@ -57,4 +56,2 @@ * The Theme Provider takes regular nodes as its children, but also takes a *theme function*
    */
-
-
   function Provider(props) {
@@ -68,3 +65,2 @@ const themeFn = useContext(ThemeContext);
   }
-
   return {
@@ -71,0 +67,0 @@ Consumer,

dist/es2019/utils/get-theme.js

@@ -8,9 +8,9 @@ import { CHANNEL, DEFAULT_THEME_MODE, THEME_MODES } from '../constants';
       return props.theme[CHANNEL];
-    } // User has provided alternative modes
+    }
+    // User has provided alternative modes
     else if ('mode' in props.theme && THEME_MODES.includes(props.theme.mode)) {
       return props.theme;
     }
-  } // If format not supported (or no theme provided), return standard theme
-
-
+  }
+  // If format not supported (or no theme provided), return standard theme
   return {
@@ -17,0 +17,0 @@ mode: DEFAULT_THEME_MODE

dist/es2019/utils/themed.js

 /* eslint-disable prefer-rest-params */
+
 import getTheme from './get-theme';
-
 // Unpack custom variants, and get correct value for the current theme
@@ -8,13 +8,9 @@ function themedVariants(variantProp, variants) {
     const theme = getTheme(props);
-
     if (props && props[variantProp] && variants) {
       const modes = variants[props[variantProp]];
-
       if (modes && modes[theme.mode]) {
         const value = modes[theme.mode];
-
         if (value) {
           return value;
         } // TS believes value can be undefined
-
       }
@@ -26,3 +22,2 @@ }
 }
-
 export default function themed(modesOrVariant, variantModes) {
@@ -32,11 +27,9 @@ if (typeof modesOrVariant === 'string') {
   }
-
   const modes = modesOrVariant;
   return props => {
     // Get theme from the user's props
-    const theme = getTheme(props); // User isn't required to provide both light and dark values
-
+    const theme = getTheme(props);
+    // User isn't required to provide both light and dark values
     if (theme.mode in modes) {
       const value = modes[theme.mode]; // TS believes value can be undefined
-
       if (value) {
@@ -46,5 +39,4 @@ return value;
     }
-
     return '';
   };
 }

dist/es2019/version.json

 {
 	"name": "@atlaskit/theme",
-	"version": "12.2.6",
+	"version": "12.2.7",
 	"sideEffects": false
 }

dist/esm/color-palettes.js

 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -83,13 +82,9 @@ import * as colors from './colors';
   var palette = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '8';
-
   switch (palette) {
     case '8':
       return colorPalette8;
-
     case '16':
       return colorPalette16;
-
     case '24':
       return colorPalette24;
-
     default:
@@ -96,0 +91,0 @@ throw new Error('The only available color palette is 8, 16, 24');

dist/esm/colors.js

 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-import themed from './utils/themed'; // Reds
 
+import themed from './utils/themed';
+
+// Reds
 export var R50 = '#FFEBE6';
@@ -10,4 +12,5 @@ export var R75 = '#FFBDAD';
 export var R400 = '#DE350B';
-export var R500 = '#BF2600'; // Yellows
+export var R500 = '#BF2600';
 
+// Yellows
 export var Y50 = '#FFFAE6';
@@ -19,4 +22,5 @@ export var Y75 = '#FFF0B3';
 export var Y400 = '#FF991F';
-export var Y500 = '#FF8B00'; // Greens
+export var Y500 = '#FF8B00';
 
+// Greens
 export var G50 = '#E3FCEF';
@@ -28,4 +32,5 @@ export var G75 = '#ABF5D1';
 export var G400 = '#00875A';
-export var G500 = '#006644'; // Blues
+export var G500 = '#006644';
 
+// Blues
 export var B50 = '#DEEBFF';
@@ -37,4 +42,5 @@ export var B75 = '#B3D4FF';
 export var B400 = '#0052CC';
-export var B500 = '#0747A6'; // Purples
+export var B500 = '#0747A6';
 
+// Purples
 export var P50 = '#EAE6FF';
@@ -46,4 +52,5 @@ export var P75 = '#C0B6F2';
 export var P400 = '#5243AA';
-export var P500 = '#403294'; // Teals
+export var P500 = '#403294';
 
+// Teals
 export var T50 = '#E6FCFF';
@@ -55,4 +62,5 @@ export var T75 = '#B3F5FF';
 export var T400 = '#00A3BF';
-export var T500 = '#008DA6'; // Neutrals
+export var T500 = '#008DA6';
 
+// Neutrals
 export var N0 = '#FFFFFF';
@@ -75,6 +83,8 @@ export var N10 = '#FAFBFC';
 export var N700 = '#253858';
-export var N800 = '#172B4D'; // ATTENTION: update the tints if you update this
+export var N800 = '#172B4D';
 
-export var N900 = '#091E42'; // Each tint is made of N900 and an alpha channel
+// ATTENTION: update the tints if you update this
+export var N900 = '#091E42';
 
+// Each tint is made of N900 and an alpha channel
 export var N10A = 'rgba(9, 30, 66, 0.02)';
@@ -96,4 +106,5 @@ export var N20A = 'rgba(9, 30, 66, 0.04)';
 export var N700A = 'rgba(9, 30, 66, 0.89)';
-export var N800A = 'rgba(9, 30, 66, 0.95)'; // Dark Mode Neutrals
+export var N800A = 'rgba(9, 30, 66, 0.95)';
 
+// Dark Mode Neutrals
 export var DN900 = '#E6EDFA';
@@ -116,6 +127,8 @@ export var DN800 = '#DCE5F5';
 export var DN20 = '#121A29';
-export var DN10 = '#0E1624'; // ATTENTION: update the tints if you update this
+export var DN10 = '#0E1624';
 
-export var DN0 = '#0D1424'; // Each dark tint is made of DN0 and an alpha channel
+// ATTENTION: update the tints if you update this
+export var DN0 = '#0D1424';
 
+// Each dark tint is made of DN0 and an alpha channel
 export var DN800A = 'rgba(13, 20, 36, 0.06)';
@@ -137,4 +150,5 @@ export var DN700A = 'rgba(13, 20, 36, 0.14)';
 export var DN20A = 'rgba(13, 20, 36, 0.95)';
-export var DN10A = 'rgba(13, 20, 36, 0.97)'; // Themed colors
+export var DN10A = 'rgba(13, 20, 36, 0.97)';
 
+// Themed colors
 export var background = themed({
@@ -141,0 +155,0 @@ light: "var(--ds-surface, ".concat(N0, ")"),

dist/esm/components.js

@@ -6,2 +6,3 @@ /*
 */
+
 export { default as getTheme } from './utils/get-theme';
@@ -8,0 +9,0 @@ export { default as themed } from './utils/themed';

dist/esm/components/atlaskit-theme-provider.js

@@ -19,2 +19,3 @@ import React, { memo } from 'react';
 };
+
 /**
@@ -40,9 +41,8 @@ * __Atlaskit Theme Provider__
  */
-
 var AtlaskitThemeProvider = /*#__PURE__*/memo(function (_ref) {
   var _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? DEFAULT_THEME_MODE : _ref$mode,
-      _ref$background = _ref.background,
-      background = _ref$background === void 0 ? bg : _ref$background,
-      children = _ref.children;
+    mode = _ref$mode === void 0 ? DEFAULT_THEME_MODE : _ref$mode,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? bg : _ref$background,
+    children = _ref.children;
   // background color is extracted here is it conditionally applied on the <body>
@@ -49,0 +49,0 @@ var themeObj = {

dist/esm/components/deprecated-theme-provider.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /* eslint-disable @repo/internal/react/no-unsafe-overrides */
@@ -7,3 +6,2 @@ import React, { memo } from 'react';
 import AtlaskitThemeProvider from './atlaskit-theme-provider';
-
 /**
@@ -19,5 +17,5 @@ * __Compat Theme Provider__
   var _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? DEFAULT_THEME_MODE : _ref$mode,
-      Provider = _ref.provider,
-      children = _ref.children;
+    mode = _ref$mode === void 0 ? DEFAULT_THEME_MODE : _ref$mode,
+    Provider = _ref.provider,
+    children = _ref.children;
   return /*#__PURE__*/React.createElement(Provider, {
@@ -24,0 +22,0 @@ theme: _defineProperty({}, CHANNEL, {

dist/esm/components/hooks/use-theme-reset-styles.js

 import { useEffect, useRef } from 'react';
 import { heading, link, linkActive, linkHover, linkOutline, subtleHeading, subtleText, text } from '../../colors';
 export var SELECTOR = 'old-ds-theme-mode';
+
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
 var baseResetStyles = [{
@@ -34,5 +34,5 @@ mode: 'light'
 };
-
 var UNIQUE_INTERNAL_ID = 'ds--theme--ak-theme-provider';
 var UNIQUE_BODY_BG_ID = 'ds--theme--ak-body-background';
+
 /**
@@ -43,3 +43,2 @@ * This hooks conditionally sets body styles based on the theme mode applied.
  */
-
 var useThemeResetStyles = function useThemeResetStyles(backgroundColor) {
@@ -49,14 +48,14 @@ var stylesheet = useRef(null);
   useEffect(function () {
-    var hasNode = document.getElementById(UNIQUE_INTERNAL_ID); // Bail out if the AKThemeProvider has already set the body and there is already a theme stylesheet
+    var hasNode = document.getElementById(UNIQUE_INTERNAL_ID);
+
+    // Bail out if the AKThemeProvider has already set the body and there is already a theme stylesheet
     // Child nodes should not take precedence over a root node setting body bg
-
     if (hasNode) {
       return;
     }
-
     stylesheet.current = document.createElement('style');
-
     if (document && document.head) {
-      stylesheet.current.id = UNIQUE_INTERNAL_ID; // prepend the theme reset styles
+      stylesheet.current.id = UNIQUE_INTERNAL_ID;
 
+      // prepend the theme reset styles
       document.head.prepend(stylesheet.current);
@@ -76,3 +75,2 @@ stylesheet.current.innerHTML = baseResetStyles;
     var hasBodyNode = document.getElementById(UNIQUE_BODY_BG_ID);
-
     if (document && document.head) {
@@ -84,5 +82,5 @@ if (!hasBodyNode) {
         document.head.append(bgColorNode.current);
-      } // body element node already exists so just update the backgroundColor
+      }
 
-
+      // body element node already exists so just update the backgroundColor
       if (bgColorNode.current) {
@@ -92,3 +90,2 @@ var cssBgColor = getStylesheetResetCSS(backgroundColor);
       }
-
       return function () {
@@ -103,3 +100,2 @@ if (bgColorNode.current && document && document.head) {
 };
-
 export default useThemeResetStyles;

dist/esm/components/theme.js

@@ -1,12 +0,12 @@
-import { createTheme } from '../utils/create-theme'; // Create default global light theme
+import { createTheme } from '../utils/create-theme';
 
+// Create default global light theme
 var _createTheme = createTheme(function () {
-  return {
-    mode: 'light'
-  };
-}),
-    Provider = _createTheme.Provider,
-    Consumer = _createTheme.Consumer,
-    useTheme = _createTheme.useTheme;
-
+    return {
+      mode: 'light'
+    };
+  }),
+  Provider = _createTheme.Provider,
+  Consumer = _createTheme.Consumer,
+  useTheme = _createTheme.useTheme;
 export { useTheme as useGlobalTheme };
@@ -13,0 +13,0 @@ export default {

dist/esm/constants.js

@@ -6,2 +6,3 @@ import deprecationWarning from '@atlaskit/ds-lib/deprecation-warning';
 export var THEME_MODES = ['light', 'dark'];
+
 /*
@@ -12,3 +13,2 @@ These theme values are expressed as functions so that if we decide to make
 */
-
 export var borderRadius = function borderRadius() {
@@ -32,6 +32,6 @@ return 3;
 };
+
 /**
  * @deprecated Please use `@atlaskit/focus-ring`
  */
-
 export var focusRing = function focusRing() {
@@ -43,6 +43,6 @@ var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "var(--ds-border-focused, ".concat(B100, ")");
 };
+
 /**
  * @deprecated Please use `@atlaskit/focus-ring`
  */
-
 export var noFocusRing = function noFocusRing() {
@@ -79,8 +79,8 @@ return "\n  box-shadow: none;\n";
   }
-}; // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
+};
 
+// eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 /**
  * @deprecated Please use `@atlaskit/visually-hidden`
  */
-
 export var visuallyHidden = function visuallyHidden() {
@@ -99,7 +99,8 @@ deprecationWarning('@atlaskit/theme', 'visually hidden mixin', 'Please use `@atlaskit/visually-hidden` instead.');
 };
+
 /**
  * @deprecated Please use `@atlaskit/visually-hidden`
  */
+export var assistive = visuallyHidden;
 
-export var assistive = visuallyHidden;
 /**
@@ -111,3 +112,2 @@ * These styles are mirrored in:
  */
-
 export var skeletonShimmer = function skeletonShimmer() {
@@ -114,0 +114,0 @@ return {

dist/esm/elevation.js

 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 import { DN40A, DN50A, DN60A, N40A, N50A, N60A } from './colors';
-import themed from './utils/themed'; // Cards on a board
+import themed from './utils/themed';
 
+// Cards on a board
 export var e100 = themed({
   light: "box-shadow: ".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A), ")"), ";"),
   dark: "box-shadow: ".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(DN50A, ", 0 0 1px 1px ").concat(DN40A), ")"), ";")
-}); // Inline dialogs
+});
 
+// Inline dialogs
 export var e200 = themed({
   light: "box-shadow: ".concat("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), ";"),
   dark: "box-shadow: ".concat("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")"), ";")
-}); // Modals
+});
 
+// Modals
 export var e300 = themed({
   light: "box-shadow: ".concat("var(--ds-shadow-overlay, ".concat("0 8px 16px -4px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), ";"),
   dark: "box-shadow: ".concat("var(--ds-shadow-overlay, ".concat("0 8px 16px -4px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")"), ";")
-}); // Panels
+});
 
+// Panels
 export var e400 = themed({
   light: "box-shadow: ".concat("var(--ds-shadow-overlay, ".concat("0 12px 24px -6px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), ";"),
   dark: "box-shadow: ".concat("var(--ds-shadow-overlay, ".concat("0 12px 24px -6px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")"), ";")
-}); // Flag messages (notifications)
+});
 
+// Flag messages (notifications)
 export var e500 = themed({
@@ -26,0 +32,0 @@ light: "box-shadow: ".concat("var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), ";"),

dist/esm/typography.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 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 = 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 { heading, subtleHeading } from './colors';
 import { fontSize, gridSize } from './constants';
-
 var baseHeading = function baseHeading(size, lineHeight) {
@@ -17,3 +13,2 @@ return {
 };
-
 export var headingSizes = {
@@ -20,0 +15,0 @@ h900: {

dist/esm/utils/create-theme.js

 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
 import React, { createContext, useCallback, useContext } from 'react';
-
 /**
@@ -18,2 +17,3 @@ * createTheme is used to create a set of Providers and Consumers for theming components.
   };
+
   /**
@@ -26,6 +26,3 @@ * Internally, Theme uses React Context, with internal providers and consumers.
    */
-
-
   var ThemeContext = /*#__PURE__*/createContext(defaultGetTokens);
-
   function useTheme(themeProps) {
@@ -36,17 +33,18 @@ var theme = useContext(ThemeContext);
     return tokens;
-  } // The Theme Consumer takes a function as its child - this function takes tokens, and the
+  }
+
+  // The Theme Consumer takes a function as its child - this function takes tokens, and the
   // return value is generally a set of nodes with the tokens applied appropriately.
-
-
   function Consumer(props) {
     var children = props.children,
-        themeProps = _objectWithoutProperties(props, _excluded); // @ts-ignore See issue for more info: https://github.com/Microsoft/TypeScript/issues/10727
+      themeProps = _objectWithoutProperties(props, _excluded);
+
+    // @ts-ignore See issue for more info: https://github.com/Microsoft/TypeScript/issues/10727
     // Argument of type 'Pick<ThemeProps & { children: (tokens: ThemeTokens) => ReactNode; }, Exclude<keyof ThemeProps, "children">>' is not assignable to parameter of type 'ThemeProps'.ts(2345)
-
-
-    var tokens = useTheme(themeProps); // We add a fragment to ensure we don't break people upgrading.
+    var tokens = useTheme(themeProps);
+    // We add a fragment to ensure we don't break people upgrading.
     // Previously they may have been able to pass in undefined without things blowing up.
-
     return /*#__PURE__*/React.createElement(React.Fragment, null, children(tokens));
   }
+
   /**
@@ -59,4 +57,2 @@ * The Theme Provider takes regular nodes as its children, but also takes a *theme function*
    */
-
-
   function Provider(props) {
@@ -72,3 +68,2 @@ var themeFn = useContext(ThemeContext);
   }
-
   return {
@@ -75,0 +70,0 @@ Consumer: Consumer,

dist/esm/utils/get-theme.js

@@ -8,9 +8,9 @@ import { CHANNEL, DEFAULT_THEME_MODE, THEME_MODES } from '../constants';
       return props.theme[CHANNEL];
-    } // User has provided alternative modes
+    }
+    // User has provided alternative modes
     else if ('mode' in props.theme && THEME_MODES.includes(props.theme.mode)) {
       return props.theme;
     }
-  } // If format not supported (or no theme provided), return standard theme
-
-
+  }
+  // If format not supported (or no theme provided), return standard theme
   return {
@@ -17,0 +17,0 @@ mode: DEFAULT_THEME_MODE

dist/esm/utils/themed.js

 /* eslint-disable prefer-rest-params */
+
 import getTheme from './get-theme';
-
 // Unpack custom variants, and get correct value for the current theme
@@ -8,13 +8,9 @@ function themedVariants(variantProp, variants) {
     var theme = getTheme(props);
-
     if (props && props[variantProp] && variants) {
       var modes = variants[props[variantProp]];
-
       if (modes && modes[theme.mode]) {
         var value = modes[theme.mode];
-
         if (value) {
           return value;
         } // TS believes value can be undefined
-
       }
@@ -26,3 +22,2 @@ }
 }
-
 export default function themed(modesOrVariant, variantModes) {
@@ -32,11 +27,9 @@ if (typeof modesOrVariant === 'string') {
   }
-
   var modes = modesOrVariant;
   return function (props) {
     // Get theme from the user's props
-    var theme = getTheme(props); // User isn't required to provide both light and dark values
-
+    var theme = getTheme(props);
+    // User isn't required to provide both light and dark values
     if (theme.mode in modes) {
       var value = modes[theme.mode]; // TS believes value can be undefined
-
       if (value) {
@@ -46,5 +39,4 @@ return value;
     }
-
     return '';
   };
 }

dist/esm/version.json

 {
 	"name": "@atlaskit/theme",
-	"version": "12.2.6",
+	"version": "12.2.7",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/theme",
-  "version": "12.2.6",
+  "version": "12.2.7",
   "description": "Theme contains solutions for global theming, colors, typography and other useful mixins.",
@@ -29,3 +29,3 @@ "publishConfig": {
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@babel/runtime": "^7.0.0"
@@ -32,0 +32,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

4794

increased by1.98%

Worsened metrics

Total package byte prevSize

237853

decreased by-0.03%

Dependency changes

• + Added@atlaskit/tokens@1.61.0(transitive)

• - Removed@atlaskit/tokens@0.13.5(transitive)

• Updated@atlaskit/tokens@^1.0.0