@atlaskit/tokens 0.10.1 → 0.10.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/tokens
 
+## 0.10.2
+
+### Patch Changes
+
+- [`5b8212f08b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5b8212f08b0) - The current theme can now be accessed and monitored for changes using new exports.
+
+  - `useThemeObserver` React hook
+  - `ThemeMutationObserver` Mutation Observer
+
 ## 0.10.1
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LONG_SHORT_MAPPING = exports.DEFAULT_THEME = exports.CSS_PREFIX = exports.ALLOWED_THEMES = void 0;
-var ALLOWED_THEMES = ['light', 'dark'];
-exports.ALLOWED_THEMES = ALLOWED_THEMES;
+exports.THEME_DATA_ATTRIBUTE = exports.THEMES = exports.LONG_SHORT_MAPPING = exports.DEFAULT_THEME = exports.CSS_PREFIX = void 0;
+var THEMES = ['light', 'dark'];
+exports.THEMES = THEMES;
+var THEME_DATA_ATTRIBUTE = 'data-theme';
+exports.THEME_DATA_ATTRIBUTE = THEME_DATA_ATTRIBUTE;
 var DEFAULT_THEME = 'light';
 exports.DEFAULT_THEME = DEFAULT_THEME;
 var CSS_PREFIX = 'ds'; // Maps the longer theme name to a shorthand used in css/code

package/dist/cjs/get-token.js

@@ -12,7 +12,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 
 var name = "@atlaskit/tokens";
-var version = "0.10.1";
+var version = "0.10.2";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];

package/dist/cjs/index.js

@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ThemeMutationObserver", {
+  enumerable: true,
+  get: function get() {
+    return _themeChangeObserver.ThemeMutationObserver;
+  }
+});
 Object.defineProperty(exports, "setGlobalTheme", {
   enumerable: true,
   get: function get() {
@@ -17,7 +23,15 @@ Object.defineProperty(exports, "token", {
     return _getToken.default;
   }
 });
+Object.defineProperty(exports, "useThemeObserver", {
+  enumerable: true,
+  get: function get() {
+    return _themeChangeObserver.useThemeObserver;
+  }
+});
 
 var _getToken = _interopRequireDefault(require("./get-token"));
 
-var _setGlobalTheme = _interopRequireDefault(require("./set-global-theme"));
+var _setGlobalTheme = _interopRequireDefault(require("./set-global-theme"));
+
+var _themeChangeObserver = require("./theme-change-observer");

package/dist/cjs/set-global-theme.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _constants = require("./constants");
+
 var setGlobalTheme = function setGlobalTheme(theme) {
   if (process.env.NODE_ENV !== 'production') {
-    // check some pre-condition and throw if incorrect?
-    if (theme !== 'dark' && theme !== 'light') {
-      throw new Error("setGlobalTheme only accepts 'light' or 'dark' themes");
+    if (!_constants.THEMES.includes(theme)) {
+      throw new Error("setGlobalTheme only accepts themes: ".concat(_constants.THEMES.join(', ')));
     }
   }
 

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

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThemeObserver = exports.ThemeMutationObserver = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+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 _react = require("react");
+
+var _constants = require("./constants");
+
+var getGlobalTheme = function getGlobalTheme() {
+  return typeof document !== 'undefined' ? document.documentElement.getAttribute(_constants.THEME_DATA_ATTRIBUTE) : null;
+};
+/**
+ * A MutationObserver which watches the `<html>` element for changes to the theme.
+ *
+ * In React, use the {@link useThemeObserver `useThemeObserver`} hook instead.
+ *
+ * @param {function} callback - A callback function which fires when the theme changes.
+ *
+ * @example
+ * ```
+ * const observer = new ThemeMutationObserver((theme) => {});
+ * observer.observe();
+ * ```
+ */
+
+
+var ThemeMutationObserver = /*#__PURE__*/function () {
+  function ThemeMutationObserver(callback) {
+    (0, _classCallCheck2.default)(this, ThemeMutationObserver);
+    (0, _defineProperty2.default)(this, "observer", null);
+    this.callback = callback;
+  }
+
+  (0, _createClass2.default)(ThemeMutationObserver, [{
+    key: "observe",
+    value: function observe() {
+      var _this = this;
+
+      if (!this.observer) {
+        this.observer = new MutationObserver(function () {
+          _this.callback(getGlobalTheme());
+        });
+      }
+
+      this.observer.observe(document.documentElement, {
+        attributeFilter: [_constants.THEME_DATA_ATTRIBUTE]
+      });
+    }
+  }, {
+    key: "disconnect",
+    value: function disconnect() {
+      this.observer && this.observer.disconnect();
+    }
+  }]);
+  return ThemeMutationObserver;
+}();
+/**
+ * A React hook which returns the current theme set on `<html>`, or `null` if not set.
+ *
+ * @example
+ * ```
+ * const theme = useThemeObserver(); // Returns 'light' or 'dark'
+ *
+ * // Performing side effects when it changes
+ * useEffect(() => {
+ *   console.log(`The theme has changed to ${theme}`);
+ * }, [theme]);
+ * ```
+ */
+
+
+exports.ThemeMutationObserver = ThemeMutationObserver;
+
+var useThemeObserver = function useThemeObserver() {
+  var _useState = (0, _react.useState)(getGlobalTheme()),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      theme = _useState2[0],
+      setTheme = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var observer = new ThemeMutationObserver(function (theme) {
+      return setTheme(theme);
+    });
+    observer.observe();
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
+  return theme;
+};
+
+exports.useThemeObserver = useThemeObserver;

package/dist/cjs/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.1",
+	"version": "0.10.2",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/es2019/constants.js

@@ -1,4 +1,5 @@
-export const ALLOWED_THEMES = ['light', 'dark'];
+export const THEMES = ['light', 'dark'];
+export const THEME_DATA_ATTRIBUTE = 'data-theme';
 export const DEFAULT_THEME = 'light';
 export const CSS_PREFIX = 'ds'; // Maps the longer theme name to a shorthand used in css/code
 

package/dist/es2019/get-token.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "0.10.1";
+const version = "0.10.2";
 
 function token(path, fallback) {
   let token = tokens[path];

package/dist/es2019/index.js

@@ -1,2 +1,3 @@
 export { default as token } from './get-token';
-export { default as setGlobalTheme } from './set-global-theme';
+export { default as setGlobalTheme } from './set-global-theme';
+export { useThemeObserver, ThemeMutationObserver } from './theme-change-observer';

package/dist/es2019/set-global-theme.js

@@ -1,8 +1,9 @@
+import { THEMES } from './constants';
+
 const setGlobalTheme = theme => {
   if (process.env.NODE_ENV !== 'production') {
-    // check some pre-condition and throw if incorrect?
-    if (theme !== 'dark' && theme !== 'light') {
-      throw new Error("setGlobalTheme only accepts 'light' or 'dark' themes");
+    if (!THEMES.includes(theme)) {
+      throw new Error(`setGlobalTheme only accepts themes: ${THEMES.join(', ')}`);
     }
   }
 

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

@@ -0,0 +1,67 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { useEffect, useState } from 'react';
+import { THEME_DATA_ATTRIBUTE } from './constants';
+
+const getGlobalTheme = () => typeof document !== 'undefined' ? document.documentElement.getAttribute(THEME_DATA_ATTRIBUTE) : null;
+/**
+ * A MutationObserver which watches the `<html>` element for changes to the theme.
+ *
+ * In React, use the {@link useThemeObserver `useThemeObserver`} hook instead.
+ *
+ * @param {function} callback - A callback function which fires when the theme changes.
+ *
+ * @example
+ * ```
+ * const observer = new ThemeMutationObserver((theme) => {});
+ * observer.observe();
+ * ```
+ */
+
+
+export class ThemeMutationObserver {
+  constructor(callback) {
+    _defineProperty(this, "observer", null);
+
+    this.callback = callback;
+  }
+
+  observe() {
+    if (!this.observer) {
+      this.observer = new MutationObserver(() => {
+        this.callback(getGlobalTheme());
+      });
+    }
+
+    this.observer.observe(document.documentElement, {
+      attributeFilter: [THEME_DATA_ATTRIBUTE]
+    });
+  }
+
+  disconnect() {
+    this.observer && this.observer.disconnect();
+  }
+
+}
+/**
+ * A React hook which returns the current theme set on `<html>`, or `null` if not set.
+ *
+ * @example
+ * ```
+ * const theme = useThemeObserver(); // Returns 'light' or 'dark'
+ *
+ * // Performing side effects when it changes
+ * useEffect(() => {
+ *   console.log(`The theme has changed to ${theme}`);
+ * }, [theme]);
+ * ```
+ */
+
+export const useThemeObserver = () => {
+  const [theme, setTheme] = useState(getGlobalTheme());
+  useEffect(() => {
+    const observer = new ThemeMutationObserver(theme => setTheme(theme));
+    observer.observe();
+    return () => observer.disconnect();
+  }, []);
+  return theme;
+};

package/dist/es2019/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.1",
+	"version": "0.10.2",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/esm/constants.js

@@ -1,4 +1,5 @@
-export var ALLOWED_THEMES = ['light', 'dark'];
+export var THEMES = ['light', 'dark'];
+export var THEME_DATA_ATTRIBUTE = 'data-theme';
 export var DEFAULT_THEME = 'light';
 export var CSS_PREFIX = 'ds'; // Maps the longer theme name to a shorthand used in css/code
 

package/dist/esm/get-token.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "0.10.1";
+var version = "0.10.2";
 
 function token(path, fallback) {
   var token = tokens[path];

package/dist/esm/index.js

@@ -1,2 +1,3 @@
 export { default as token } from './get-token';
-export { default as setGlobalTheme } from './set-global-theme';
+export { default as setGlobalTheme } from './set-global-theme';
+export { useThemeObserver, ThemeMutationObserver } from './theme-change-observer';

package/dist/esm/set-global-theme.js

@@ -1,8 +1,9 @@
+import { THEMES } from './constants';
+
 var setGlobalTheme = function setGlobalTheme(theme) {
   if (process.env.NODE_ENV !== 'production') {
-    // check some pre-condition and throw if incorrect?
-    if (theme !== 'dark' && theme !== 'light') {
-      throw new Error("setGlobalTheme only accepts 'light' or 'dark' themes");
+    if (!THEMES.includes(theme)) {
+      throw new Error("setGlobalTheme only accepts themes: ".concat(THEMES.join(', ')));
     }
   }
 

package/dist/esm/theme-change-observer.js

@@ -0,0 +1,89 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { useEffect, useState } from 'react';
+import { THEME_DATA_ATTRIBUTE } from './constants';
+
+var getGlobalTheme = function getGlobalTheme() {
+  return typeof document !== 'undefined' ? document.documentElement.getAttribute(THEME_DATA_ATTRIBUTE) : null;
+};
+/**
+ * A MutationObserver which watches the `<html>` element for changes to the theme.
+ *
+ * In React, use the {@link useThemeObserver `useThemeObserver`} hook instead.
+ *
+ * @param {function} callback - A callback function which fires when the theme changes.
+ *
+ * @example
+ * ```
+ * const observer = new ThemeMutationObserver((theme) => {});
+ * observer.observe();
+ * ```
+ */
+
+
+export var ThemeMutationObserver = /*#__PURE__*/function () {
+  function ThemeMutationObserver(callback) {
+    _classCallCheck(this, ThemeMutationObserver);
+
+    _defineProperty(this, "observer", null);
+
+    this.callback = callback;
+  }
+
+  _createClass(ThemeMutationObserver, [{
+    key: "observe",
+    value: function observe() {
+      var _this = this;
+
+      if (!this.observer) {
+        this.observer = new MutationObserver(function () {
+          _this.callback(getGlobalTheme());
+        });
+      }
+
+      this.observer.observe(document.documentElement, {
+        attributeFilter: [THEME_DATA_ATTRIBUTE]
+      });
+    }
+  }, {
+    key: "disconnect",
+    value: function disconnect() {
+      this.observer && this.observer.disconnect();
+    }
+  }]);
+
+  return ThemeMutationObserver;
+}();
+/**
+ * A React hook which returns the current theme set on `<html>`, or `null` if not set.
+ *
+ * @example
+ * ```
+ * const theme = useThemeObserver(); // Returns 'light' or 'dark'
+ *
+ * // Performing side effects when it changes
+ * useEffect(() => {
+ *   console.log(`The theme has changed to ${theme}`);
+ * }, [theme]);
+ * ```
+ */
+
+export var useThemeObserver = function useThemeObserver() {
+  var _useState = useState(getGlobalTheme()),
+      _useState2 = _slicedToArray(_useState, 2),
+      theme = _useState2[0],
+      setTheme = _useState2[1];
+
+  useEffect(function () {
+    var observer = new ThemeMutationObserver(function (theme) {
+      return setTheme(theme);
+    });
+    observer.observe();
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
+  return theme;
+};

package/dist/esm/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.1",
+	"version": "0.10.2",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/types/constants.d.ts

@@ -1,4 +1,5 @@
-export declare const ALLOWED_THEMES: string[];
+export declare const THEMES: readonly ["light", "dark"];
+export declare const THEME_DATA_ATTRIBUTE = "data-theme";
 export declare const DEFAULT_THEME = "light";
 export declare const CSS_PREFIX = "ds";
-export declare const LONG_SHORT_MAPPING: Record<string, string>;
+export declare const LONG_SHORT_MAPPING: Record<string, typeof THEMES[number]>;

package/dist/types/index.d.ts

@@ -1,3 +1,5 @@
 export { default as token } from './get-token';
 export { default as setGlobalTheme } from './set-global-theme';
 export type { CSSToken } from './artifacts/token-names';
+export type { Themes } from './types';
+export { useThemeObserver, ThemeMutationObserver, } from './theme-change-observer';

package/dist/types/set-global-theme.d.ts

@@ -1,2 +1,3 @@
-declare const setGlobalTheme: (theme: 'dark' | 'light') => void;
+import type { Themes } from './types';
+declare const setGlobalTheme: (theme: Themes) => void;
 export default setGlobalTheme;

package/dist/types/theme-change-observer.d.ts

@@ -0,0 +1,35 @@
+import { Themes } from './types';
+/**
+ * A MutationObserver which watches the `<html>` element for changes to the theme.
+ *
+ * In React, use the {@link useThemeObserver `useThemeObserver`} hook instead.
+ *
+ * @param {function} callback - A callback function which fires when the theme changes.
+ *
+ * @example
+ * ```
+ * const observer = new ThemeMutationObserver((theme) => {});
+ * observer.observe();
+ * ```
+ */
+export declare class ThemeMutationObserver {
+    private callback;
+    observer: MutationObserver | null;
+    constructor(callback: (theme: Themes | null) => unknown);
+    observe(): void;
+    disconnect(): void;
+}
+/**
+ * A React hook which returns the current theme set on `<html>`, or `null` if not set.
+ *
+ * @example
+ * ```
+ * const theme = useThemeObserver(); // Returns 'light' or 'dark'
+ *
+ * // Performing side effects when it changes
+ * useEffect(() => {
+ *   console.log(`The theme has changed to ${theme}`);
+ * }, [theme]);
+ * ```
+ */
+export declare const useThemeObserver: () => Themes | null;

package/dist/types/types.d.ts

@@ -1,4 +1,5 @@
 import { InternalTokenIds } from './artifacts/types-internal';
+import { THEMES } from './constants';
 export declare type Groups = 'raw' | 'paint' | 'shadow' | 'palette';
 export declare type ActiveTokenState = 'active';
 export declare type DeprecatedTokenState = 'deprecated';
@@ -6,6 +7,7 @@ export declare type DeletedTokenState = 'deleted';
 export declare type TokenState = ActiveTokenState | DeprecatedTokenState | DeletedTokenState;
 export declare type Replacement = InternalTokenIds | InternalTokenIds[];
 export declare type PaletteCategory = 'blue' | 'purple' | 'red' | 'magenta' | 'orange' | 'yellow' | 'green' | 'teal' | 'light mode neutral' | 'dark mode neutral';
+export declare type Themes = typeof THEMES[number];
 export interface Token<TValue, Group extends Groups> {
     value: TValue;
     attributes: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",
@@ -47,6 +47,9 @@
     "@babel/traverse": "^7.15.0",
     "@babel/types": "^7.15.0"
   },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
   "devDependencies": {
     "@af/codegen": "*",
     "@atlaskit/badge": "^15.0.11",
@@ -69,6 +72,9 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@babel/core": "^7.12.3",
     "@emotion/core": "^10.0.9",
+    "@testing-library/dom": "^7.7.3",
+    "@testing-library/react": "^8.0.1",
+    "@testing-library/react-hooks": "^1.0.4",
     "@types/chrome": "^0.0.171",
     "copy-webpack-plugin": "^6.4.0",
     "lodash": "^4.17.21",