@atlaskit/app-provider 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @atlaskit/app-provider
+
+## 0.1.0
+
+### Minor Changes
+
+- [#41035](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41035) [`e7344823cff`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7344823cff) - Created the AppProvider component with support for theming.
+
+## 0.0.1
+
+- Scaffold AppProvider component.

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,7 @@
+# App provider
+
+A top level provider for the Design System.
+
+## Usage
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/design-system/app-provider).

package/constellation/index/examples.mdx

@@ -0,0 +1,23 @@
+---
+order: 0
+---
+
+import AppProviderDefault from '../../examples/constellation/0-default';
+import AppProviderThemeSwitcher from '../../examples/constellation/1-theme-switcher';
+
+## Theming
+
+AppProvider sets up theming for an app, enabling [design tokens](/tokens/design-tokens) to be used.
+
+<Example Component={AppProviderDefault} packageName="@atlaskit/app-provider" />
+
+## Color mode and theme switching
+
+The `useColorMode` hook can be used to get the active color mode. When the color mode is set to `auto`, the active color mode will be determined by the user's system preference.
+
+The `useTheme` hook can be used to get the active themes. The `useSetTheme` hook can be used to change themes.
+
+<Example
+  Component={AppProviderThemeSwitcher}
+  packageName="@atlaskit/app-provider"
+/>

package/constellation/index/usage.mdx

@@ -0,0 +1,7 @@
+---
+order: 2
+---
+
+## Usage
+
+AppProvider provides app-level configuration for the Design System, such as global theming. Place it at the root of your application.

package/dist/cjs/app-provider.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppProvider = AppProvider;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _themeProvider = _interopRequireDefault(require("./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; }
+var InsideAppProviderContext = /*#__PURE__*/(0, _react.createContext)(false);
+var defaultThemeSettings = {
+  dark: 'dark',
+  light: 'light',
+  spacing: 'spacing'
+};
+/**
+ * __App provider__
+ *
+ * An app provider provides app level configuration such as global theming.
+ *
+ * Place it at the root of your application.
+ */
+function AppProvider(_ref) {
+  var children = _ref.children,
+    _ref$defaultColorMode = _ref.defaultColorMode,
+    defaultColorMode = _ref$defaultColorMode === void 0 ? 'light' : _ref$defaultColorMode,
+    _ref$defaultTheme = _ref.defaultTheme,
+    defaultTheme = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme;
+  var isInsideAppProvider = (0, _react.useContext)(InsideAppProviderContext);
+  if (isInsideAppProvider) {
+    throw new Error('App provider should not be nested within another app provider.');
+  }
+  return /*#__PURE__*/_react.default.createElement(InsideAppProviderContext.Provider, {
+    value: true
+  }, /*#__PURE__*/_react.default.createElement(_themeProvider.default, {
+    defaultColorMode: defaultColorMode,
+    defaultTheme: defaultTheme
+  }, children));
+}
+var _default = exports.default = AppProvider;

package/dist/cjs/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _appProvider.default;
+  }
+});
+Object.defineProperty(exports, "useColorMode", {
+  enumerable: true,
+  get: function get() {
+    return _themeProvider.useColorMode;
+  }
+});
+Object.defineProperty(exports, "useSetColorMode", {
+  enumerable: true,
+  get: function get() {
+    return _themeProvider.useSetColorMode;
+  }
+});
+Object.defineProperty(exports, "useSetTheme", {
+  enumerable: true,
+  get: function get() {
+    return _themeProvider.useSetTheme;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function get() {
+    return _themeProvider.useTheme;
+  }
+});
+var _appProvider = _interopRequireDefault(require("./app-provider"));
+var _themeProvider = require("./theme-provider");

package/dist/cjs/theme-provider.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemeProvider = ThemeProvider;
+exports.default = void 0;
+exports.useColorMode = useColorMode;
+exports.useSetColorMode = useSetColorMode;
+exports.useSetTheme = useSetTheme;
+exports.useTheme = useTheme;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _tokens = require("@atlaskit/tokens");
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var SetColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var ThemeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var SetThemeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+/**
+ * __useColorMode()__
+ *
+ * Returns the current color mode when inside the app provider.
+ */
+function useColorMode() {
+  var value = (0, _react.useContext)(ColorModeContext);
+  if (!value) {
+    throw new Error('useColorMode must be used within AppProvider.');
+  }
+  return value;
+}
+
+/**
+ * __useSetColorMode()__
+ *
+ * Returns the color mode setter when inside the app provider.
+ */
+function useSetColorMode() {
+  var value = (0, _react.useContext)(SetColorModeContext);
+  if (!value) {
+    throw new Error('useSetColorMode must be used within AppProvider.');
+  }
+  return value;
+}
+
+/**
+ * __useTheme()__
+ *
+ * Returns the current theme settings when inside the app provider.
+ */
+function useTheme() {
+  var value = (0, _react.useContext)(ThemeContext);
+  if (!value) {
+    throw new Error('useTheme must be used within AppProvider.');
+  }
+  return value;
+}
+
+/**
+ * __useSetTheme()__
+ *
+ * Returns the theme setter when inside the app provider.
+ */
+function useSetTheme() {
+  var value = (0, _react.useContext)(SetThemeContext);
+  if (!value) {
+    throw new Error('useSetTheme must be used within AppProvider.');
+  }
+  return value;
+}
+var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
+var prefersDarkModeMql = isMatchMediaAvailable ? window.matchMedia('(prefers-color-scheme: dark)') : undefined;
+
+// TODO: currently 'auto' color mode will always return 'light' in SSR.
+// Additional work required: https://product-fabric.atlassian.net/browse/DSP-9781
+function getReconciledColorMode(colorMode) {
+  if (colorMode === 'auto') {
+    return prefersDarkModeMql !== null && prefersDarkModeMql !== void 0 && prefersDarkModeMql.matches ? 'dark' : 'light';
+  }
+  return colorMode;
+}
+/**
+ * __Theme provider__
+ *
+ * Provides global theming configuration.
+ *
+ * @internal
+ */
+function ThemeProvider(_ref) {
+  var children = _ref.children,
+    defaultColorMode = _ref.defaultColorMode,
+    defaultTheme = _ref.defaultTheme;
+  var _useState = (0, _react.useState)(defaultColorMode),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    chosenColorMode = _useState2[0],
+    setChosenColorMode = _useState2[1];
+  var _useState3 = (0, _react.useState)(getReconciledColorMode(defaultColorMode)),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    reconciledColorMode = _useState4[0],
+    setReconciledColorMode = _useState4[1];
+  var _useState5 = (0, _react.useState)(defaultTheme),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    theme = _useState6[0],
+    setTheme = _useState6[1];
+  var setColorMode = (0, _react.useCallback)(function (colorMode) {
+    setChosenColorMode(colorMode);
+    setReconciledColorMode(getReconciledColorMode(colorMode));
+  }, []);
+  var setPartialTheme = (0, _react.useCallback)(function (nextTheme) {
+    setTheme(function (theme) {
+      return _objectSpread(_objectSpread({}, theme), nextTheme);
+    });
+  }, []);
+  (0, _react.useEffect)(function () {
+    (0, _tokens.setGlobalTheme)(_objectSpread(_objectSpread({}, theme), {}, {
+      colorMode: reconciledColorMode
+    }));
+  }, [theme, reconciledColorMode]);
+  (0, _react.useEffect)(function () {
+    if (!prefersDarkModeMql) {
+      return;
+    }
+    var unbindListener = (0, _bindEventListener.bind)(prefersDarkModeMql, {
+      type: 'change',
+      listener: function listener(event) {
+        if (chosenColorMode === 'auto') {
+          setReconciledColorMode(event.matches ? 'dark' : 'light');
+        }
+      }
+    });
+    return unbindListener;
+  }, [chosenColorMode]);
+  return /*#__PURE__*/_react.default.createElement(ColorModeContext.Provider, {
+    value: reconciledColorMode
+  }, /*#__PURE__*/_react.default.createElement(SetColorModeContext.Provider, {
+    value: setColorMode
+  }, /*#__PURE__*/_react.default.createElement(ThemeContext.Provider, {
+    value: theme
+  }, /*#__PURE__*/_react.default.createElement(SetThemeContext.Provider, {
+    value: setPartialTheme
+  }, children))));
+}
+var _default = exports.default = ThemeProvider;

package/dist/es2019/app-provider.js

@@ -0,0 +1,32 @@
+import React, { createContext, useContext } from 'react';
+import ThemeProvider from './theme-provider';
+const InsideAppProviderContext = /*#__PURE__*/createContext(false);
+const defaultThemeSettings = {
+  dark: 'dark',
+  light: 'light',
+  spacing: 'spacing'
+};
+/**
+ * __App provider__
+ *
+ * An app provider provides app level configuration such as global theming.
+ *
+ * Place it at the root of your application.
+ */
+export function AppProvider({
+  children,
+  defaultColorMode = 'light',
+  defaultTheme = defaultThemeSettings
+}) {
+  const isInsideAppProvider = useContext(InsideAppProviderContext);
+  if (isInsideAppProvider) {
+    throw new Error('App provider should not be nested within another app provider.');
+  }
+  return /*#__PURE__*/React.createElement(InsideAppProviderContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    defaultColorMode: defaultColorMode,
+    defaultTheme: defaultTheme
+  }, children));
+}
+export default AppProvider;

package/dist/es2019/index.js

@@ -0,0 +1,2 @@
+export { default } from './app-provider';
+export { useColorMode, useSetColorMode, useSetTheme, useTheme } from './theme-provider';

package/dist/es2019/theme-provider.js

@@ -0,0 +1,126 @@
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { setGlobalTheme } from '@atlaskit/tokens';
+const ColorModeContext = /*#__PURE__*/createContext(undefined);
+const SetColorModeContext = /*#__PURE__*/createContext(undefined);
+const ThemeContext = /*#__PURE__*/createContext(undefined);
+const SetThemeContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * __useColorMode()__
+ *
+ * Returns the current color mode when inside the app provider.
+ */
+export function useColorMode() {
+  const value = useContext(ColorModeContext);
+  if (!value) {
+    throw new Error('useColorMode must be used within AppProvider.');
+  }
+  return value;
+}
+
+/**
+ * __useSetColorMode()__
+ *
+ * Returns the color mode setter when inside the app provider.
+ */
+export function useSetColorMode() {
+  const value = useContext(SetColorModeContext);
+  if (!value) {
+    throw new Error('useSetColorMode must be used within AppProvider.');
+  }
+  return value;
+}
+
+/**
+ * __useTheme()__
+ *
+ * Returns the current theme settings when inside the app provider.
+ */
+export function useTheme() {
+  const value = useContext(ThemeContext);
+  if (!value) {
+    throw new Error('useTheme must be used within AppProvider.');
+  }
+  return value;
+}
+
+/**
+ * __useSetTheme()__
+ *
+ * Returns the theme setter when inside the app provider.
+ */
+export function useSetTheme() {
+  const value = useContext(SetThemeContext);
+  if (!value) {
+    throw new Error('useSetTheme must be used within AppProvider.');
+  }
+  return value;
+}
+const isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
+const prefersDarkModeMql = isMatchMediaAvailable ? window.matchMedia('(prefers-color-scheme: dark)') : undefined;
+
+// TODO: currently 'auto' color mode will always return 'light' in SSR.
+// Additional work required: https://product-fabric.atlassian.net/browse/DSP-9781
+function getReconciledColorMode(colorMode) {
+  if (colorMode === 'auto') {
+    return prefersDarkModeMql !== null && prefersDarkModeMql !== void 0 && prefersDarkModeMql.matches ? 'dark' : 'light';
+  }
+  return colorMode;
+}
+/**
+ * __Theme provider__
+ *
+ * Provides global theming configuration.
+ *
+ * @internal
+ */
+export function ThemeProvider({
+  children,
+  defaultColorMode,
+  defaultTheme
+}) {
+  const [chosenColorMode, setChosenColorMode] = useState(defaultColorMode);
+  const [reconciledColorMode, setReconciledColorMode] = useState(getReconciledColorMode(defaultColorMode));
+  const [theme, setTheme] = useState(defaultTheme);
+  const setColorMode = useCallback(colorMode => {
+    setChosenColorMode(colorMode);
+    setReconciledColorMode(getReconciledColorMode(colorMode));
+  }, []);
+  const setPartialTheme = useCallback(nextTheme => {
+    setTheme(theme => ({
+      ...theme,
+      ...nextTheme
+    }));
+  }, []);
+  useEffect(() => {
+    setGlobalTheme({
+      ...theme,
+      colorMode: reconciledColorMode
+    });
+  }, [theme, reconciledColorMode]);
+  useEffect(() => {
+    if (!prefersDarkModeMql) {
+      return;
+    }
+    const unbindListener = bind(prefersDarkModeMql, {
+      type: 'change',
+      listener: event => {
+        if (chosenColorMode === 'auto') {
+          setReconciledColorMode(event.matches ? 'dark' : 'light');
+        }
+      }
+    });
+    return unbindListener;
+  }, [chosenColorMode]);
+  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
+    value: reconciledColorMode
+  }, /*#__PURE__*/React.createElement(SetColorModeContext.Provider, {
+    value: setColorMode
+  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: theme
+  }, /*#__PURE__*/React.createElement(SetThemeContext.Provider, {
+    value: setPartialTheme
+  }, children))));
+}
+export default ThemeProvider;

package/dist/esm/app-provider.js

@@ -0,0 +1,33 @@
+import React, { createContext, useContext } from 'react';
+import ThemeProvider from './theme-provider';
+var InsideAppProviderContext = /*#__PURE__*/createContext(false);
+var defaultThemeSettings = {
+  dark: 'dark',
+  light: 'light',
+  spacing: 'spacing'
+};
+/**
+ * __App provider__
+ *
+ * An app provider provides app level configuration such as global theming.
+ *
+ * Place it at the root of your application.
+ */
+export function AppProvider(_ref) {
+  var children = _ref.children,
+    _ref$defaultColorMode = _ref.defaultColorMode,
+    defaultColorMode = _ref$defaultColorMode === void 0 ? 'light' : _ref$defaultColorMode,
+    _ref$defaultTheme = _ref.defaultTheme,
+    defaultTheme = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme;
+  var isInsideAppProvider = useContext(InsideAppProviderContext);
+  if (isInsideAppProvider) {
+    throw new Error('App provider should not be nested within another app provider.');
+  }
+  return /*#__PURE__*/React.createElement(InsideAppProviderContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    defaultColorMode: defaultColorMode,
+    defaultTheme: defaultTheme
+  }, children));
+}
+export default AppProvider;

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { default } from './app-provider';
+export { useColorMode, useSetColorMode, useSetTheme, useTheme } from './theme-provider';

package/dist/esm/theme-provider.js

@@ -0,0 +1,136 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { setGlobalTheme } from '@atlaskit/tokens';
+var ColorModeContext = /*#__PURE__*/createContext(undefined);
+var SetColorModeContext = /*#__PURE__*/createContext(undefined);
+var ThemeContext = /*#__PURE__*/createContext(undefined);
+var SetThemeContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * __useColorMode()__
+ *
+ * Returns the current color mode when inside the app provider.
+ */
+export function useColorMode() {
+  var value = useContext(ColorModeContext);
+  if (!value) {
+    throw new Error('useColorMode must be used within AppProvider.');
+  }
+  return value;
+}
+
+/**
+ * __useSetColorMode()__
+ *
+ * Returns the color mode setter when inside the app provider.
+ */
+export function useSetColorMode() {
+  var value = useContext(SetColorModeContext);
+  if (!value) {
+    throw new Error('useSetColorMode must be used within AppProvider.');
+  }
+  return value;
+}
+
+/**
+ * __useTheme()__
+ *
+ * Returns the current theme settings when inside the app provider.
+ */
+export function useTheme() {
+  var value = useContext(ThemeContext);
+  if (!value) {
+    throw new Error('useTheme must be used within AppProvider.');
+  }
+  return value;
+}
+
+/**
+ * __useSetTheme()__
+ *
+ * Returns the theme setter when inside the app provider.
+ */
+export function useSetTheme() {
+  var value = useContext(SetThemeContext);
+  if (!value) {
+    throw new Error('useSetTheme must be used within AppProvider.');
+  }
+  return value;
+}
+var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
+var prefersDarkModeMql = isMatchMediaAvailable ? window.matchMedia('(prefers-color-scheme: dark)') : undefined;
+
+// TODO: currently 'auto' color mode will always return 'light' in SSR.
+// Additional work required: https://product-fabric.atlassian.net/browse/DSP-9781
+function getReconciledColorMode(colorMode) {
+  if (colorMode === 'auto') {
+    return prefersDarkModeMql !== null && prefersDarkModeMql !== void 0 && prefersDarkModeMql.matches ? 'dark' : 'light';
+  }
+  return colorMode;
+}
+/**
+ * __Theme provider__
+ *
+ * Provides global theming configuration.
+ *
+ * @internal
+ */
+export function ThemeProvider(_ref) {
+  var children = _ref.children,
+    defaultColorMode = _ref.defaultColorMode,
+    defaultTheme = _ref.defaultTheme;
+  var _useState = useState(defaultColorMode),
+    _useState2 = _slicedToArray(_useState, 2),
+    chosenColorMode = _useState2[0],
+    setChosenColorMode = _useState2[1];
+  var _useState3 = useState(getReconciledColorMode(defaultColorMode)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    reconciledColorMode = _useState4[0],
+    setReconciledColorMode = _useState4[1];
+  var _useState5 = useState(defaultTheme),
+    _useState6 = _slicedToArray(_useState5, 2),
+    theme = _useState6[0],
+    setTheme = _useState6[1];
+  var setColorMode = useCallback(function (colorMode) {
+    setChosenColorMode(colorMode);
+    setReconciledColorMode(getReconciledColorMode(colorMode));
+  }, []);
+  var setPartialTheme = useCallback(function (nextTheme) {
+    setTheme(function (theme) {
+      return _objectSpread(_objectSpread({}, theme), nextTheme);
+    });
+  }, []);
+  useEffect(function () {
+    setGlobalTheme(_objectSpread(_objectSpread({}, theme), {}, {
+      colorMode: reconciledColorMode
+    }));
+  }, [theme, reconciledColorMode]);
+  useEffect(function () {
+    if (!prefersDarkModeMql) {
+      return;
+    }
+    var unbindListener = bind(prefersDarkModeMql, {
+      type: 'change',
+      listener: function listener(event) {
+        if (chosenColorMode === 'auto') {
+          setReconciledColorMode(event.matches ? 'dark' : 'light');
+        }
+      }
+    });
+    return unbindListener;
+  }, [chosenColorMode]);
+  return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
+    value: reconciledColorMode
+  }, /*#__PURE__*/React.createElement(SetColorModeContext.Provider, {
+    value: setColorMode
+  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: theme
+  }, /*#__PURE__*/React.createElement(SetThemeContext.Provider, {
+    value: setPartialTheme
+  }, children))));
+}
+export default ThemeProvider;

package/dist/types/app-provider.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type ColorMode, type Theme } from './theme-provider';
+interface AppProviderProps {
+    /**
+     * Initial color mode.
+     */
+    defaultColorMode?: ColorMode;
+    /**
+     * Theme settings.
+     */
+    defaultTheme?: Theme;
+    /**
+     * App content.
+     */
+    children: React.ReactNode;
+}
+/**
+ * __App provider__
+ *
+ * An app provider provides app level configuration such as global theming.
+ *
+ * Place it at the root of your application.
+ */
+export declare function AppProvider({ children, defaultColorMode, defaultTheme, }: AppProviderProps): JSX.Element;
+export default AppProvider;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './app-provider';
+export { useColorMode, useSetColorMode, useSetTheme, useTheme, } from './theme-provider';

package/dist/types/theme-provider.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { type ThemeState } from '@atlaskit/tokens';
+export type Theme = Omit<ThemeState, 'colorMode'>;
+export type ColorMode = 'light' | 'dark' | 'auto';
+export type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
+/**
+ * __useColorMode()__
+ *
+ * Returns the current color mode when inside the app provider.
+ */
+export declare function useColorMode(): ReconciledColorMode;
+/**
+ * __useSetColorMode()__
+ *
+ * Returns the color mode setter when inside the app provider.
+ */
+export declare function useSetColorMode(): (value: ColorMode) => void;
+/**
+ * __useTheme()__
+ *
+ * Returns the current theme settings when inside the app provider.
+ */
+export declare function useTheme(): Theme;
+/**
+ * __useSetTheme()__
+ *
+ * Returns the theme setter when inside the app provider.
+ */
+export declare function useSetTheme(): (value: Partial<Theme>) => void;
+interface ThemeProviderProps {
+    defaultColorMode: ColorMode;
+    defaultTheme: Theme;
+    children: React.ReactNode;
+}
+/**
+ * __Theme provider__
+ *
+ * Provides global theming configuration.
+ *
+ * @internal
+ */
+export declare function ThemeProvider({ children, defaultColorMode, defaultTheme, }: ThemeProviderProps): JSX.Element;
+export default ThemeProvider;

package/dist/types-ts4.5/app-provider.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type ColorMode, type Theme } from './theme-provider';
+interface AppProviderProps {
+    /**
+     * Initial color mode.
+     */
+    defaultColorMode?: ColorMode;
+    /**
+     * Theme settings.
+     */
+    defaultTheme?: Theme;
+    /**
+     * App content.
+     */
+    children: React.ReactNode;
+}
+/**
+ * __App provider__
+ *
+ * An app provider provides app level configuration such as global theming.
+ *
+ * Place it at the root of your application.
+ */
+export declare function AppProvider({ children, defaultColorMode, defaultTheme, }: AppProviderProps): JSX.Element;
+export default AppProvider;

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './app-provider';
+export { useColorMode, useSetColorMode, useSetTheme, useTheme, } from './theme-provider';

package/dist/types-ts4.5/theme-provider.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { type ThemeState } from '@atlaskit/tokens';
+export type Theme = Omit<ThemeState, 'colorMode'>;
+export type ColorMode = 'light' | 'dark' | 'auto';
+export type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
+/**
+ * __useColorMode()__
+ *
+ * Returns the current color mode when inside the app provider.
+ */
+export declare function useColorMode(): ReconciledColorMode;
+/**
+ * __useSetColorMode()__
+ *
+ * Returns the color mode setter when inside the app provider.
+ */
+export declare function useSetColorMode(): (value: ColorMode) => void;
+/**
+ * __useTheme()__
+ *
+ * Returns the current theme settings when inside the app provider.
+ */
+export declare function useTheme(): Theme;
+/**
+ * __useSetTheme()__
+ *
+ * Returns the theme setter when inside the app provider.
+ */
+export declare function useSetTheme(): (value: Partial<Theme>) => void;
+interface ThemeProviderProps {
+    defaultColorMode: ColorMode;
+    defaultTheme: Theme;
+    children: React.ReactNode;
+}
+/**
+ * __Theme provider__
+ *
+ * Provides global theming configuration.
+ *
+ * @internal
+ */
+export declare function ThemeProvider({ children, defaultColorMode, defaultTheme, }: ThemeProviderProps): JSX.Element;
+export default ThemeProvider;

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@atlaskit/app-provider",
+  "version": "0.1.0",
+  "description": "A top level provider for the Design System.",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Design System Team",
+    "inPublicMirror": false,
+    "releaseModel": "continuous",
+    "website": {
+      "name": "App provider",
+      "category": "Components",
+      "status": {
+        "type": "alpha"
+      }
+    }
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "atlaskit:src": "src/index.tsx",
+  "af:exports": {
+    ".": "./src/index.tsx"
+  },
+  "dependencies": {
+    "@atlaskit/tokens": "^1.19.0",
+    "@babel/runtime": "^7.0.0",
+    "bind-event-listener": "^2.1.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@af/visual-regression": "*",
+    "@atlaskit/dropdown-menu": "*",
+    "@atlaskit/primitives": "*",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.4.3",
+    "react-dom": "^16.8.0",
+    "typescript": "~4.9.5",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "analytics": [
+        "analytics-next"
+      ],
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
+      "ui-components": [
+        "lite-mode"
+      ],
+      "deprecation": [
+        "no-deprecated-imports"
+      ],
+      "styling": [
+        "static",
+        "emotion"
+      ],
+      "imports": [
+        "import-no-extraneous-disable-for-examples-and-docs"
+      ]
+    }
+  },
+  "homepage": "https://atlassian.design/components",
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}

package/report.api.md

@@ -0,0 +1,72 @@
+<!-- API Report Version: 2.3 -->
+
+## API Report File for "@atlaskit/app-provider"
+
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
+
+```ts
+import { default as React_2 } from 'react';
+import { ThemeState } from '@atlaskit/tokens';
+
+// @public
+function AppProvider({
+  children,
+  defaultColorMode,
+  defaultTheme,
+}: AppProviderProps): JSX.Element;
+export default AppProvider;
+
+// @public (undocumented)
+interface AppProviderProps {
+  children: React_2.ReactNode;
+  defaultColorMode?: ColorMode;
+  defaultTheme?: Theme;
+}
+
+// @public (undocumented)
+type ColorMode = 'auto' | 'dark' | 'light';
+
+// @public (undocumented)
+type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
+
+// @public (undocumented)
+type Theme = Omit<ThemeState, 'colorMode'>;
+
+// @public
+export function useColorMode(): ReconciledColorMode;
+
+// @public
+export function useSetColorMode(): (value: ColorMode) => void;
+
+// @public
+export function useSetTheme(): (value: Partial<Theme>) => void;
+
+// @public
+export function useTheme(): Theme;
+
+// (No @packageDocumentation comment for this package)
+```
+
+<!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,44 @@
+## API Report File for "@atlaskit/app-provider"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { default as React_2 } from 'react';
+import { ThemeState } from '@atlaskit/tokens';
+
+// @public
+function AppProvider({ children, defaultColorMode, defaultTheme, }: AppProviderProps): JSX.Element;
+export default AppProvider;
+
+// @public (undocumented)
+interface AppProviderProps {
+    children: React_2.ReactNode;
+    defaultColorMode?: ColorMode;
+    defaultTheme?: Theme;
+}
+
+// @public (undocumented)
+type ColorMode = 'auto' | 'dark' | 'light';
+
+// @public (undocumented)
+type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
+
+// @public (undocumented)
+type Theme = Omit<ThemeState, 'colorMode'>;
+
+// @public
+export function useColorMode(): ReconciledColorMode;
+
+// @public
+export function useSetColorMode(): (value: ColorMode) => void;
+
+// @public
+export function useSetTheme(): (value: Partial<Theme>) => void;
+
+// @public
+export function useTheme(): Theme;
+
+// (No @packageDocumentation comment for this package)
+
+```