@atlaskit/tokens 1.45.1 → 1.47.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/tokens
 
+## 1.47.0
+
+### Minor Changes
+
+-   [#98149](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98149)
+    [`45101e24202a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/45101e24202a) -
+    Change the state of the following tokens from deprecated to active:
+
+    -   font.family.body
+    -   font.family.code
+    -   font.family.heading
+
+## 1.46.0
+
+### Minor Changes
+
+-   [#97306](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97306)
+    [`cefbd515c807`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cefbd515c807) -
+    Add support for React 18.
+
+### Patch Changes
+
+-   [#98562](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98562)
+    [`5c59b4fec679`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c59b4fec679) -
+    ThemeMutationObserver only ever creates one instance of a mutation observer which reduces memory
+    impacts at scale. This change is behind a platform feature flag -
+    "platform.design-system-team.mutation-observer-performance-improvement_8usdg"
+
 ## 1.45.1
 
 ### Patch Changes

package/dist/cjs/artifacts/replacement-mapping.js

@@ -18,7 +18,7 @@ exports.default = void 0;
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::d444e5232c83f7487f44f75fa2b1d331>>
+ * @codegen <<SignedSource::0bd5759a2d00fb9285fe55febafed591>>
  * @codegenCommand yarn build tokens
  */
 
@@ -40,15 +40,6 @@ var replacementMapper = [{
 }, {
   "path": "font.letterSpacing.400",
   "state": "deprecated"
-}, {
-  "path": "font.family.body",
-  "state": "deprecated"
-}, {
-  "path": "font.family.code",
-  "state": "deprecated"
-}, {
-  "path": "font.family.heading",
-  "state": "deprecated"
 }, {
   "path": "font.family.monospace",
   "state": "deprecated"

package/dist/cjs/artifacts/tokens-raw/atlassian-typography-adg3.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9979a8f061dbdaddf43d0173981655c2>>
+ * @codegen <<SignedSource::f7311d82caa5765e51932737a2b690a2>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -510,10 +510,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "deprecated",
+    "state": "active",
     "introduced": "1.14.0",
-    "description": "Helpful guidance goes here",
-    "deprecated": "1.29.0"
+    "description": "Use for body text."
   },
   "value": "ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-adg3/font-family.tsx",
@@ -521,10 +520,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "deprecated",
+      "state": "active",
       "introduced": "1.14.0",
-      "description": "Helpful guidance goes here",
-      "deprecated": "1.29.0"
+      "description": "Use for body text."
     },
     "value": "FontFamilyWebSans"
   },
@@ -534,10 +532,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "deprecated",
+    "state": "active",
     "introduced": "1.14.0",
-    "description": "Helpful guidance goes here",
-    "deprecated": "1.29.0"
+    "description": "Use for monospaced text."
   },
   "value": "ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace",
   "filePath": "schema/themes/atlassian-typography-adg3/font-family.tsx",
@@ -545,10 +542,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "deprecated",
+      "state": "active",
       "introduced": "1.14.0",
-      "description": "Helpful guidance goes here",
-      "deprecated": "1.29.0"
+      "description": "Use for monospaced text."
     },
     "value": "FontFamilyWebMono"
   },
@@ -558,10 +554,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "deprecated",
+    "state": "active",
     "introduced": "1.14.0",
-    "description": "Helpful guidance goes here",
-    "deprecated": "1.29.0"
+    "description": "Use for headings."
   },
   "value": "ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-adg3/font-family.tsx",
@@ -569,10 +564,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "deprecated",
+      "state": "active",
       "introduced": "1.14.0",
-      "description": "Helpful guidance goes here",
-      "deprecated": "1.29.0"
+      "description": "Use for headings."
     },
     "value": "FontFamilyWebSans"
   },

package/dist/cjs/artifacts/tokens-raw/atlassian-typography-minor3.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9e4504db147308499c5db002a01275ff>>
+ * @codegen <<SignedSource::ddba0c829dd376cacc42efc6bab78142>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -510,10 +510,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "deprecated",
+    "state": "active",
     "introduced": "1.14.0",
-    "description": "Helpful guidance goes here",
-    "deprecated": "1.29.0"
+    "description": "Use for body text."
   },
   "value": "ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-minor3/font-family.tsx",
@@ -521,10 +520,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "deprecated",
+      "state": "active",
       "introduced": "1.14.0",
-      "description": "Helpful guidance goes here",
-      "deprecated": "1.29.0"
+      "description": "Use for body text."
     },
     "value": "FontFamilyWebSans"
   },
@@ -534,10 +532,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "deprecated",
+    "state": "active",
     "introduced": "1.14.0",
-    "description": "Helpful guidance goes here",
-    "deprecated": "1.29.0"
+    "description": "Use for monospaced text."
   },
   "value": "ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace",
   "filePath": "schema/themes/atlassian-typography-minor3/font-family.tsx",
@@ -545,10 +542,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "deprecated",
+      "state": "active",
       "introduced": "1.14.0",
-      "description": "Helpful guidance goes here",
-      "deprecated": "1.29.0"
+      "description": "Use for monospaced text."
     },
     "value": "FontFamilyWebMono"
   },
@@ -558,10 +554,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "deprecated",
+    "state": "active",
     "introduced": "1.14.0",
-    "description": "Helpful guidance goes here",
-    "deprecated": "1.29.0"
+    "description": "Use for headings."
   },
   "value": "ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-minor3/font-family.tsx",
@@ -569,10 +564,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "deprecated",
+      "state": "active",
       "introduced": "1.14.0",
-      "description": "Helpful guidance goes here",
-      "deprecated": "1.29.0"
+      "description": "Use for headings."
     },
     "value": "FontFamilyWebSans"
   },

package/dist/cjs/theme-mutation-observer.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
 var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
 /**
@@ -26,28 +27,57 @@ var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
 var ThemeMutationObserver = exports.default = /*#__PURE__*/function () {
   function ThemeMutationObserver(callback) {
     (0, _classCallCheck2.default)(this, ThemeMutationObserver);
-    (0, _defineProperty2.default)(this, "observer", null);
-    (0, _defineProperty2.default)(this, "mediaObserver", null);
+    (0, _defineProperty2.default)(this, "legacyObserver", null);
     this.callback = callback;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+      ThemeMutationObserver.callbacks.add(callback);
+    }
   }
   (0, _createClass2.default)(ThemeMutationObserver, [{
     key: "observe",
     value: function observe() {
       var _this = this;
-      if (!this.observer) {
-        this.observer = new MutationObserver(function () {
-          _this.callback((0, _getGlobalTheme.default)());
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+        if (!ThemeMutationObserver.observer) {
+          ThemeMutationObserver.observer = new MutationObserver(function () {
+            var theme = (0, _getGlobalTheme.default)();
+            ThemeMutationObserver.callbacks.forEach(function (callback) {
+              return callback(theme);
+            });
+          });
+          // Observer only needs to be configured once
+          ThemeMutationObserver.observer.observe(document.documentElement, {
+            attributeFilter: [_constants.THEME_DATA_ATTRIBUTE, _constants.COLOR_MODE_ATTRIBUTE]
+          });
+        }
+      } else {
+        if (!this.legacyObserver) {
+          this.legacyObserver = new MutationObserver(function () {
+            _this.callback((0, _getGlobalTheme.default)());
+          });
+        }
+        this.legacyObserver.observe(document.documentElement, {
+          attributeFilter: [_constants.THEME_DATA_ATTRIBUTE, _constants.COLOR_MODE_ATTRIBUTE]
         });
       }
-      this.observer.observe(document.documentElement, {
-        attributeFilter: [_constants.THEME_DATA_ATTRIBUTE, _constants.COLOR_MODE_ATTRIBUTE]
-      });
     }
   }, {
     key: "disconnect",
     value: function disconnect() {
-      this.observer && this.observer.disconnect();
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+        if (this.callback) {
+          ThemeMutationObserver.callbacks.delete(this.callback);
+        }
+        if (ThemeMutationObserver.callbacks.size === 0 && ThemeMutationObserver.observer) {
+          ThemeMutationObserver.observer.disconnect();
+          ThemeMutationObserver.observer = null;
+        }
+      } else {
+        this.legacyObserver && this.legacyObserver.disconnect();
+      }
     }
   }]);
   return ThemeMutationObserver;
-}();
+}();
+(0, _defineProperty2.default)(ThemeMutationObserver, "observer", null);
+(0, _defineProperty2.default)(ThemeMutationObserver, "callbacks", new Set());

package/dist/es2019/artifacts/replacement-mapping.js

@@ -12,7 +12,7 @@
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::d444e5232c83f7487f44f75fa2b1d331>>
+ * @codegen <<SignedSource::0bd5759a2d00fb9285fe55febafed591>>
  * @codegenCommand yarn build tokens
  */
 
@@ -34,15 +34,6 @@ const replacementMapper = [{
 }, {
   "path": "font.letterSpacing.400",
   "state": "deprecated"
-}, {
-  "path": "font.family.body",
-  "state": "deprecated"
-}, {
-  "path": "font.family.code",
-  "state": "deprecated"
-}, {
-  "path": "font.family.heading",
-  "state": "deprecated"
 }, {
   "path": "font.family.monospace",
   "state": "deprecated"

package/dist/es2019/artifacts/tokens-raw/atlassian-typography-adg3.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9979a8f061dbdaddf43d0173981655c2>>
+ * @codegen <<SignedSource::f7311d82caa5765e51932737a2b690a2>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -504,10 +504,9 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "deprecated",
+    "state": "active",
     "introduced": "1.14.0",
-    "description": "Helpful guidance goes here",
-    "deprecated": "1.29.0"
+    "description": "Use for body text."
   },
   "value": "ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-adg3/font-family.tsx",
@@ -515,10 +514,9 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "deprecated",
+      "state": "active",
       "introduced": "1.14.0",
-      "description": "Helpful guidance goes here",
-      "deprecated": "1.29.0"
+      "description": "Use for body text."
     },
     "value": "FontFamilyWebSans"
   },
@@ -528,10 +526,9 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "deprecated",
+    "state": "active",
     "introduced": "1.14.0",
-    "description": "Helpful guidance goes here",
-    "deprecated": "1.29.0"
+    "description": "Use for monospaced text."
   },
   "value": "ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace",
   "filePath": "schema/themes/atlassian-typography-adg3/font-family.tsx",
@@ -539,10 +536,9 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "deprecated",
+      "state": "active",
       "introduced": "1.14.0",
-      "description": "Helpful guidance goes here",
-      "deprecated": "1.29.0"
+      "description": "Use for monospaced text."
     },
     "value": "FontFamilyWebMono"
   },
@@ -552,10 +548,9 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "deprecated",
+    "state": "active",
     "introduced": "1.14.0",
-    "description": "Helpful guidance goes here",
-    "deprecated": "1.29.0"
+    "description": "Use for headings."
   },
   "value": "ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-adg3/font-family.tsx",
@@ -563,10 +558,9 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "deprecated",
+      "state": "active",
       "introduced": "1.14.0",
-      "description": "Helpful guidance goes here",
-      "deprecated": "1.29.0"
+      "description": "Use for headings."
     },
     "value": "FontFamilyWebSans"
   },

package/dist/es2019/artifacts/tokens-raw/atlassian-typography-minor3.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9e4504db147308499c5db002a01275ff>>
+ * @codegen <<SignedSource::ddba0c829dd376cacc42efc6bab78142>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -504,10 +504,9 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "deprecated",
+    "state": "active",
     "introduced": "1.14.0",
-    "description": "Helpful guidance goes here",
-    "deprecated": "1.29.0"
+    "description": "Use for body text."
   },
   "value": "ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-minor3/font-family.tsx",
@@ -515,10 +514,9 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "deprecated",
+      "state": "active",
       "introduced": "1.14.0",
-      "description": "Helpful guidance goes here",
-      "deprecated": "1.29.0"
+      "description": "Use for body text."
     },
     "value": "FontFamilyWebSans"
   },
@@ -528,10 +526,9 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "deprecated",
+    "state": "active",
     "introduced": "1.14.0",
-    "description": "Helpful guidance goes here",
-    "deprecated": "1.29.0"
+    "description": "Use for monospaced text."
   },
   "value": "ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace",
   "filePath": "schema/themes/atlassian-typography-minor3/font-family.tsx",
@@ -539,10 +536,9 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "deprecated",
+      "state": "active",
       "introduced": "1.14.0",
-      "description": "Helpful guidance goes here",
-      "deprecated": "1.29.0"
+      "description": "Use for monospaced text."
     },
     "value": "FontFamilyWebMono"
   },
@@ -552,10 +548,9 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "deprecated",
+    "state": "active",
     "introduced": "1.14.0",
-    "description": "Helpful guidance goes here",
-    "deprecated": "1.29.0"
+    "description": "Use for headings."
   },
   "value": "ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif",
   "filePath": "schema/themes/atlassian-typography-minor3/font-family.tsx",
@@ -563,10 +558,9 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "deprecated",
+      "state": "active",
       "introduced": "1.14.0",
-      "description": "Helpful guidance goes here",
-      "deprecated": "1.29.0"
+      "description": "Use for headings."
     },
     "value": "FontFamilyWebSans"
   },

package/dist/es2019/theme-mutation-observer.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
 import getGlobalTheme from './get-global-theme';
 /**
@@ -16,21 +17,48 @@ import getGlobalTheme from './get-global-theme';
  */
 export default class ThemeMutationObserver {
   constructor(callback) {
-    _defineProperty(this, "observer", null);
-    _defineProperty(this, "mediaObserver", null);
+    _defineProperty(this, "legacyObserver", null);
     this.callback = callback;
+    if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+      ThemeMutationObserver.callbacks.add(callback);
+    }
   }
   observe() {
-    if (!this.observer) {
-      this.observer = new MutationObserver(() => {
-        this.callback(getGlobalTheme());
+    if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+      if (!ThemeMutationObserver.observer) {
+        ThemeMutationObserver.observer = new MutationObserver(() => {
+          const theme = getGlobalTheme();
+          ThemeMutationObserver.callbacks.forEach(callback => callback(theme));
+        });
+        // Observer only needs to be configured once
+        ThemeMutationObserver.observer.observe(document.documentElement, {
+          attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
+        });
+      }
+    } else {
+      if (!this.legacyObserver) {
+        this.legacyObserver = new MutationObserver(() => {
+          this.callback(getGlobalTheme());
+        });
+      }
+      this.legacyObserver.observe(document.documentElement, {
+        attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
       });
     }
-    this.observer.observe(document.documentElement, {
-      attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
-    });
   }
   disconnect() {
-    this.observer && this.observer.disconnect();
+    if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+      if (this.callback) {
+        ThemeMutationObserver.callbacks.delete(this.callback);
+      }
+      if (ThemeMutationObserver.callbacks.size === 0 && ThemeMutationObserver.observer) {
+        ThemeMutationObserver.observer.disconnect();
+        ThemeMutationObserver.observer = null;
+      }
+    } else {
+      this.legacyObserver && this.legacyObserver.disconnect();
+    }
   }
-}
+}
+_defineProperty(ThemeMutationObserver, "observer", null);
+_defineProperty(ThemeMutationObserver, "callbacks", new Set());

package/dist/esm/artifacts/replacement-mapping.js

@@ -12,7 +12,7 @@
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::d444e5232c83f7487f44f75fa2b1d331>>
+ * @codegen <<SignedSource::0bd5759a2d00fb9285fe55febafed591>>
  * @codegenCommand yarn build tokens
  */
 
@@ -34,15 +34,6 @@ var replacementMapper = [{
 }, {
   "path": "font.letterSpacing.400",
   "state": "deprecated"
-}, {
-  "path": "font.family.body",
-  "state": "deprecated"
-}, {
-  "path": "font.family.code",
-  "state": "deprecated"
-}, {
-  "path": "font.family.heading",
-  "state": "deprecated"
 }, {
   "path": "font.family.monospace",
   "state": "deprecated"