@atlaskit/tokens 1.22.1 → 1.24.0

package/dist/cjs/utils/color-mode-listeners.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _bindEventListener = require("bind-event-listener");
+var _constants = require("../constants");
+var _themeLoading = require("./theme-loading");
+var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
+
+/**
+ * Updates the current theme when the system theme changes. Should be bound
+ * to an event listener listening on the '(prefers-color-scheme: dark)' query
+ * @param e The event representing a change in system theme.
+ */
+function checkNativeListener(e) {
+  var element = document.documentElement;
+  element.setAttribute(_constants.COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
+}
+var darkModeMql = isMatchMediaAvailable && window.matchMedia(_themeLoading.darkModeMediaQuery);
+var ColorModeObserver = /*#__PURE__*/function () {
+  function ColorModeObserver() {
+    (0, _classCallCheck2.default)(this, ColorModeObserver);
+    (0, _defineProperty2.default)(this, "unbindThemeChangeListener", null);
+  }
+  (0, _createClass2.default)(ColorModeObserver, [{
+    key: "getColorMode",
+    value: function getColorMode() {
+      if (!darkModeMql) {
+        return 'light';
+      }
+      return darkModeMql !== null && darkModeMql !== void 0 && darkModeMql.matches ? 'dark' : 'light';
+    }
+  }, {
+    key: "bind",
+    value: function bind() {
+      if (darkModeMql && this.unbindThemeChangeListener === null) {
+        this.unbindThemeChangeListener = (0, _bindEventListener.bind)(darkModeMql, {
+          type: 'change',
+          listener: checkNativeListener
+        });
+      }
+    }
+  }, {
+    key: "unbind",
+    value: function unbind() {
+      if (this.unbindThemeChangeListener) {
+        this.unbindThemeChangeListener();
+        this.unbindThemeChangeListener = null;
+      }
+    }
+  }]);
+  return ColorModeObserver;
+}();
+/**
+ * A singleton color mode observer - binds "auto" switching logic to a single `mediaQueryList` listener
+ * that can be unbound by any consumer when no longer needed.
+ */
+var SingletonColorModeObserver = new ColorModeObserver();
+var _default = SingletonColorModeObserver;
+exports.default = _default;

package/dist/cjs/utils/configure-page.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = configurePage;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _getThemeHtmlAttrs = _interopRequireDefault(require("../get-theme-html-attrs"));
+var _colorModeListeners = _interopRequireDefault(require("./color-mode-listeners"));
+/**
+ * Given ThemeState, sets appropriate html attributes on the documentElement,
+ * adds a listener to keep colorMode updated, and returns a function to unbind.
+ */
+function configurePage(themeState) {
+  if (themeState.colorMode === 'auto') {
+    // Set colorMode based on the user preference
+    themeState.colorMode = _colorModeListeners.default.getColorMode();
+    // Bind a listener (if one doesn't already exist) to keep colorMode updated
+    _colorModeListeners.default.bind();
+  } else {
+    _colorModeListeners.default.unbind();
+  }
+  var themeAttributes = (0, _getThemeHtmlAttrs.default)(themeState);
+  Object.entries(themeAttributes).forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    document.documentElement.setAttribute(key, value);
+  });
+  return function () {
+    return _colorModeListeners.default.unbind;
+  };
+}