@instructure/emotion 8.23.1-snapshot.1 → 8.23.1-snapshot.22

package/README.md

@@ -24,12 +24,6 @@ With this framework, each UI component can be used in isolation and support mult
 
 7. Use a popular, well maintained and broadly adopted JS design and theming library that supports runtime theme switching ([Emotion](https://emotion.sh/)).
 
-### Installation
-
-```sh
-yarn add @instructure/emotion
-```
-
 ### Usage
 
 Make a component themeable with the [withStyle](#withStyle) decorator. It adds a `makeStyles` function and the generated `styles` object to the decorated Component's props.

package/es/EmotionThemeProvider/index.js

@@ -22,58 +22,15 @@
  * SOFTWARE.
  */
 import React from 'react';
-import { merge, cloneDeep } from 'lodash';
 import { ThemeProvider } from '@emotion/react';
-import { canvas } from '@instructure/ui-themes';
-const baseThemeProps = ['borders', 'breakpoints', 'colors', 'forms', 'media', 'shadows', 'spacing', 'stacking', 'transitions', 'typography'];
+import { getTheme } from '../getTheme';
+
 /**
  * ---
  * category: components/utilities
  * ---
- *
- * #### DEPRECATED Please use [InstUISettingsProvider](#InstUISettingsProvider)
- * instead. It has the same functionality and adds a text direction context.
- *
- * Wrapper for the [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype) of emotion js.
- *
- * Applies the given theme. It handles either a full theme, or an overrides object.
- *
- * ```js
- * import { canvas, instructure } from '@instructure/ui-themes'
- * import { EmotionThemeProvider } from '@instructure/emotion'
- *
- * @example
- * <EmotionThemeProvider theme={canvas}>
- *   <div>Canvas themed part</div>
- *
- *   <EmotionThemeProvider
- *     theme={{
- *       themeOverrides: {
- *         canvas: {
- *           colors: {
- *             backgroundLightest: '#fefefe'
- *           },
- *           borders: {
- *             style: 'dashed'
- *           }
- *         }
- *       }
- *     }}
- *   >
- *     <div>Canvas with new 'backgroundLightest'</div>
- *   </EmotionThemeProvider>
- *
- *   <EmotionThemeProvider theme={instructure}>
- *     <div>Instructure themed part</div>
- *   </EmotionThemeProvider>
- * </EmotionThemeProvider>
- * ```
- *
- * @param {object} children
- * @param {object} theme - A full theme or an override object
  * @module EmotionThemeProvider
  */
-
 function EmotionThemeProvider(_ref) {
   let children = _ref.children,
       _ref$theme = _ref.theme,
@@ -86,67 +43,5 @@ function EmotionThemeProvider(_ref) {
 EmotionThemeProvider.defaultProps = {
   theme: {}
 };
-/**
- * Gives back the theme object for the the provider.
- *
- * If a valid InstUI theme is given, it just returns the theme.
- *
- * If an override object is given, it returns the ancestor theme and
- * the overrides merged together.
- *
- * @param {object} themeOrOverride - A full theme or an override object
- * @returns {function} A function that returns with the theme object for the [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype)
- * @module getTheme
- */
-
-const getTheme = themeOrOverride => function () {
-  var _themeOrOverride, _themeOrOverride$them;
-
-  let ancestorTheme = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-
-  try {
-    // If a valid InstUI theme is given, it just returns the theme.
-    if (isBaseTheme(themeOrOverride)) {
-      return themeOrOverride;
-    }
-  } catch {
-    // If the prop passed is not an Object, it will throw an error.
-    // We are using this fail-safe here for the non-TS users,
-    // because the whole page can break without a theme.
-    if (process.env.NODE_ENV !== 'production') {} // eslint-disable-next-line no-param-reassign
-
-
-    themeOrOverride = {};
-  } // we need to clone the ancestor theme not to override it
-
-
-  let currentTheme;
-
-  if (Object.keys(ancestorTheme).length === 0) {
-    if (process.env.NODE_ENV !== 'production') {}
-
-    currentTheme = cloneDeep(canvas);
-  } else {
-    currentTheme = cloneDeep(ancestorTheme);
-  }
-
-  const themeName = currentTheme.key; // we pick the overrides for the current theme from the override object
-
-  const currentThemeOverrides = ((_themeOrOverride = themeOrOverride) === null || _themeOrOverride === void 0 ? void 0 : (_themeOrOverride$them = _themeOrOverride.themeOverrides) === null || _themeOrOverride$them === void 0 ? void 0 : _themeOrOverride$them[themeName]) || {};
-  return merge({}, currentTheme, merge({}, themeOrOverride, currentThemeOverrides));
-};
-
-const isBaseTheme = theme => {
-  if (Array.isArray(theme) || typeof theme === 'function') {
-    throw new Error();
-  }
-
-  try {
-    return 'key' in theme && baseThemeProps.every(prop => prop in theme);
-  } catch {
-    throw new Error();
-  }
-};
-
 export default EmotionThemeProvider;
-export { EmotionThemeProvider, getTheme };
+export { EmotionThemeProvider };

package/es/InstUISettingsProvider/index.js

@@ -26,7 +26,7 @@ import PropTypes from 'prop-types';
 import { ThemeProvider } from '@emotion/react';
 import { TextDirectionContext } from '@instructure/ui-i18n';
 import { DeterministicIdContextProvider, getElementType } from '@instructure/ui-react-utils';
-import { getTheme } from '../EmotionThemeProvider';
+import { getTheme } from '../getTheme';
 
 /**
  * ---
@@ -34,62 +34,6 @@ import { getTheme } from '../EmotionThemeProvider';
  * ---
  * @module InstUISettingsProvider
  * @tsProps
- *
- * Wrapper for emotion js's [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype).
- *
- * Applies the given theme. It handles either a full theme, or an overrides object.
- * You can also specify the requested text direction for its descendants.
- *
- * It accepts the following props:
- * - theme - A full theme or an override object.
- * - dir - The text direction to use in the descendants. If not
- * given it uses the following in this priority order:
- *   - The value given in a parent `TextDirectionContext`
- *   - The `dir` prop of `document.documentElement` or its `direction` CSS prop
- *   - `ltr`
- * - instanceCounterMap - A [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
- * which keeps track of specific InstUI components. (generally this is used for deterministic id generation for [SSR](/#server-side-rendering))
- * - as - InstUISettingsProvider will wrap it's children with a HTML element when the its `dir` property is also set, this can be changed with the `as` property
- *
- * ```js
- *
- * import { canvas, instructure } from '@instructure/ui-themes'
- * import { InstUISettingsProvider } from '@instructure/emotion'
- *
- * <InstUISettingsProvider theme={canvas}>
- *   <div>Canvas themed part</div>
- *
- *   <InstUISettingsProvider
- *     theme={{
- *       themeOverrides: {
- *         canvas: {
- *           colors: {
- *             backgroundLightest: '#fefefe'
- *           },
- *           borders: {
- *             style: 'dashed'
- *           }
- *         }
- *       }
- *     }}
- *   >
- *     <div>Canvas with new 'backgroundLightest'</div>
- *   </InstUISettingsProvider>
- *
- *   <InstUISettingsProvider theme={instructure} dir="rtl">
- *     <div>Instructure themed part with RTL text</div>
- *   </InstUISettingsProvider>
- *
- *    //this is mostly needed for Server Side Rendering, to read more:
- *    //read our [SSR](/#server-side-rendering) guide
- *    const counter = generateInstanceCounterMap()
- *    counter.set("Alert", 5)
- *   <InstUISettingsProvider instanceCounterMap={counter}>
- *     //this Alert's rendered DOM Node will have [id="Alert_5"] on it
- *     <Alert>Test!</Alert>
- *   </InstUISettingsProvider>
- * </InstUISettingsProvider>
- * ```
  */
 function InstUISettingsProvider(_ref) {
   let children = _ref.children,

package/es/getTheme.js

@@ -0,0 +1,84 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { merge, cloneDeep } from 'lodash';
+import { canvas } from '@instructure/ui-themes';
+import { ThemeRegistry } from '@instructure/theme-registry';
+import { isBaseTheme } from '@instructure/ui-utils';
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Gives back the theme object for the the provider.
+ *
+ * If a valid InstUI theme is given, it just returns the theme.
+ *
+ * If an override object is given, it returns the ancestor theme and
+ * the overrides merged together.
+ *
+ * @param {object} themeOrOverride - A full theme or an override object
+ * @returns {function} A function that returns with the theme object for the [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype)
+ */
+const getTheme = themeOrOverride => function () {
+  var _themeOrOverride, _themeOrOverride$them;
+
+  let ancestorTheme = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+
+  try {
+    // If a valid InstUI theme is given, it just returns the theme.
+    if (isBaseTheme(themeOrOverride)) {
+      return themeOrOverride;
+    }
+  } catch {
+    // If the prop passed is not an Object, it will throw an error.
+    // We are using this fail-safe here for the non-TS users,
+    // because the whole page can break without a theme.
+    if (process.env.NODE_ENV !== 'production') {} // eslint-disable-next-line no-param-reassign
+
+
+    themeOrOverride = {};
+  } // we need to clone the ancestor theme not to override it
+
+
+  let currentTheme;
+
+  if (Object.keys(ancestorTheme).length === 0) {
+    const globalTheme = ThemeRegistry.getCurrentTheme();
+
+    if (process.env.NODE_ENV !== 'production' && !globalTheme) {}
+
+    currentTheme = cloneDeep(globalTheme || canvas);
+  } else {
+    currentTheme = cloneDeep(ancestorTheme);
+  }
+
+  const themeName = currentTheme.key; // we pick the overrides for the current theme from the override object
+
+  const currentThemeOverrides = ((_themeOrOverride = themeOrOverride) === null || _themeOrOverride === void 0 ? void 0 : (_themeOrOverride$them = _themeOrOverride.themeOverrides) === null || _themeOrOverride$them === void 0 ? void 0 : _themeOrOverride$them[themeName]) || themeOrOverride.themeOverrides || {};
+  const finalTheme = merge({}, currentTheme, merge({}, themeOrOverride, currentThemeOverrides));
+  return finalTheme;
+};
+
+export default getTheme;
+export { getTheme };

package/es/useTheme.js

@@ -24,19 +24,27 @@
 import { useTheme as useEmotionTheme } from '@emotion/react';
 import { canvas } from '@instructure/ui-themes';
 import { isEmpty } from '@instructure/ui-utils';
+import { ThemeRegistry } from '@instructure/theme-registry';
 
 /**
  * ---
  * private: true
  * ---
  * A hook that will return the currently applied theme object from the nearest Context.
- * If there is no theme provided to the Context it will return the default `canvas` theme.
+ * If there is no Context, then it tries to get the current theme from the global ThemeRegistry.
+ * If there is no theme provided to the Context and ThemeRegistry it will return the default `canvas` theme.
  * @returns {object} the theme object
  */
 const useTheme = () => {
   let theme = useEmotionTheme();
 
   if (isEmpty(theme)) {
+    const globalTheme = ThemeRegistry.getCurrentTheme();
+
+    if (globalTheme) {
+      return globalTheme;
+    }
+
     if (process.env.NODE_ENV !== 'production') {}
 
     theme = canvas;

package/lib/EmotionThemeProvider/index.js

@@ -6,15 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmotionThemeProvider = EmotionThemeProvider;
-exports.getTheme = exports.default = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _lodash = require("lodash");
-
 var _react2 = require("@emotion/react");
 
-var _uiThemes = require("@instructure/ui-themes");
+var _getTheme = require("../getTheme");
 
 /*
  * The MIT License (MIT)
@@ -39,130 +37,24 @@ var _uiThemes = require("@instructure/ui-themes");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const baseThemeProps = ['borders', 'breakpoints', 'colors', 'forms', 'media', 'shadows', 'spacing', 'stacking', 'transitions', 'typography'];
+
 /**
  * ---
  * category: components/utilities
  * ---
- *
- * #### DEPRECATED Please use [InstUISettingsProvider](#InstUISettingsProvider)
- * instead. It has the same functionality and adds a text direction context.
- *
- * Wrapper for the [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype) of emotion js.
- *
- * Applies the given theme. It handles either a full theme, or an overrides object.
- *
- * ```js
- * import { canvas, instructure } from '@instructure/ui-themes'
- * import { EmotionThemeProvider } from '@instructure/emotion'
- *
- * @example
- * <EmotionThemeProvider theme={canvas}>
- *   <div>Canvas themed part</div>
- *
- *   <EmotionThemeProvider
- *     theme={{
- *       themeOverrides: {
- *         canvas: {
- *           colors: {
- *             backgroundLightest: '#fefefe'
- *           },
- *           borders: {
- *             style: 'dashed'
- *           }
- *         }
- *       }
- *     }}
- *   >
- *     <div>Canvas with new 'backgroundLightest'</div>
- *   </EmotionThemeProvider>
- *
- *   <EmotionThemeProvider theme={instructure}>
- *     <div>Instructure themed part</div>
- *   </EmotionThemeProvider>
- * </EmotionThemeProvider>
- * ```
- *
- * @param {object} children
- * @param {object} theme - A full theme or an override object
  * @module EmotionThemeProvider
  */
-
 function EmotionThemeProvider(_ref) {
   let children = _ref.children,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? {} : _ref$theme;
   return /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
-    theme: getTheme(theme)
+    theme: (0, _getTheme.getTheme)(theme)
   }, children);
 }
 
 EmotionThemeProvider.defaultProps = {
   theme: {}
 };
-/**
- * Gives back the theme object for the the provider.
- *
- * If a valid InstUI theme is given, it just returns the theme.
- *
- * If an override object is given, it returns the ancestor theme and
- * the overrides merged together.
- *
- * @param {object} themeOrOverride - A full theme or an override object
- * @returns {function} A function that returns with the theme object for the [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype)
- * @module getTheme
- */
-
-const getTheme = themeOrOverride => function () {
-  var _themeOrOverride, _themeOrOverride$them;
-
-  let ancestorTheme = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-
-  try {
-    // If a valid InstUI theme is given, it just returns the theme.
-    if (isBaseTheme(themeOrOverride)) {
-      return themeOrOverride;
-    }
-  } catch {
-    // If the prop passed is not an Object, it will throw an error.
-    // We are using this fail-safe here for the non-TS users,
-    // because the whole page can break without a theme.
-    if (process.env.NODE_ENV !== 'production') {} // eslint-disable-next-line no-param-reassign
-
-
-    themeOrOverride = {};
-  } // we need to clone the ancestor theme not to override it
-
-
-  let currentTheme;
-
-  if (Object.keys(ancestorTheme).length === 0) {
-    if (process.env.NODE_ENV !== 'production') {}
-
-    currentTheme = (0, _lodash.cloneDeep)(_uiThemes.canvas);
-  } else {
-    currentTheme = (0, _lodash.cloneDeep)(ancestorTheme);
-  }
-
-  const themeName = currentTheme.key; // we pick the overrides for the current theme from the override object
-
-  const currentThemeOverrides = ((_themeOrOverride = themeOrOverride) === null || _themeOrOverride === void 0 ? void 0 : (_themeOrOverride$them = _themeOrOverride.themeOverrides) === null || _themeOrOverride$them === void 0 ? void 0 : _themeOrOverride$them[themeName]) || {};
-  return (0, _lodash.merge)({}, currentTheme, (0, _lodash.merge)({}, themeOrOverride, currentThemeOverrides));
-};
-
-exports.getTheme = getTheme;
-
-const isBaseTheme = theme => {
-  if (Array.isArray(theme) || typeof theme === 'function') {
-    throw new Error();
-  }
-
-  try {
-    return 'key' in theme && baseThemeProps.every(prop => prop in theme);
-  } catch {
-    throw new Error();
-  }
-};
-
 var _default = EmotionThemeProvider;
 exports.default = _default;

package/lib/InstUISettingsProvider/index.js

@@ -22,7 +22,7 @@ var _DeterministicIdContextProvider = require("@instructure/ui-react-utils/lib/D
 
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
 
-var _EmotionThemeProvider = require("../EmotionThemeProvider");
+var _getTheme = require("../getTheme");
 
 /*
  * The MIT License (MIT)
@@ -54,62 +54,6 @@ var _EmotionThemeProvider = require("../EmotionThemeProvider");
  * ---
  * @module InstUISettingsProvider
  * @tsProps
- *
- * Wrapper for emotion js's [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype).
- *
- * Applies the given theme. It handles either a full theme, or an overrides object.
- * You can also specify the requested text direction for its descendants.
- *
- * It accepts the following props:
- * - theme - A full theme or an override object.
- * - dir - The text direction to use in the descendants. If not
- * given it uses the following in this priority order:
- *   - The value given in a parent `TextDirectionContext`
- *   - The `dir` prop of `document.documentElement` or its `direction` CSS prop
- *   - `ltr`
- * - instanceCounterMap - A [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
- * which keeps track of specific InstUI components. (generally this is used for deterministic id generation for [SSR](/#server-side-rendering))
- * - as - InstUISettingsProvider will wrap it's children with a HTML element when the its `dir` property is also set, this can be changed with the `as` property
- *
- * ```js
- *
- * import { canvas, instructure } from '@instructure/ui-themes'
- * import { InstUISettingsProvider } from '@instructure/emotion'
- *
- * <InstUISettingsProvider theme={canvas}>
- *   <div>Canvas themed part</div>
- *
- *   <InstUISettingsProvider
- *     theme={{
- *       themeOverrides: {
- *         canvas: {
- *           colors: {
- *             backgroundLightest: '#fefefe'
- *           },
- *           borders: {
- *             style: 'dashed'
- *           }
- *         }
- *       }
- *     }}
- *   >
- *     <div>Canvas with new 'backgroundLightest'</div>
- *   </InstUISettingsProvider>
- *
- *   <InstUISettingsProvider theme={instructure} dir="rtl">
- *     <div>Instructure themed part with RTL text</div>
- *   </InstUISettingsProvider>
- *
- *    //this is mostly needed for Server Side Rendering, to read more:
- *    //read our [SSR](/#server-side-rendering) guide
- *    const counter = generateInstanceCounterMap()
- *    counter.set("Alert", 5)
- *   <InstUISettingsProvider instanceCounterMap={counter}>
- *     //this Alert's rendered DOM Node will have [id="Alert_5"] on it
- *     <Alert>Test!</Alert>
- *   </InstUISettingsProvider>
- * </InstUISettingsProvider>
- * ```
  */
 function InstUISettingsProvider(_ref) {
   let children = _ref.children,
@@ -125,7 +69,7 @@ function InstUISettingsProvider(_ref) {
   let providers = /*#__PURE__*/_react.default.createElement(_DeterministicIdContextProvider.DeterministicIdContextProvider, {
     instanceCounterMap: instanceCounterMap
   }, /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
-    theme: (0, _EmotionThemeProvider.getTheme)(theme)
+    theme: (0, _getTheme.getTheme)(theme)
   }, /*#__PURE__*/_react.default.createElement(_TextDirectionContext.TextDirectionContext.Provider, {
     value: finalDir
   }, children)));

package/lib/getTheme.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTheme = exports.default = void 0;
+
+var _lodash = require("lodash");
+
+var _uiThemes = require("@instructure/ui-themes");
+
+var _themeRegistry = require("@instructure/theme-registry");
+
+var _isBaseTheme = require("@instructure/ui-utils/lib/isBaseTheme.js");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Gives back the theme object for the the provider.
+ *
+ * If a valid InstUI theme is given, it just returns the theme.
+ *
+ * If an override object is given, it returns the ancestor theme and
+ * the overrides merged together.
+ *
+ * @param {object} themeOrOverride - A full theme or an override object
+ * @returns {function} A function that returns with the theme object for the [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype)
+ */
+const getTheme = themeOrOverride => function () {
+  var _themeOrOverride, _themeOrOverride$them;
+
+  let ancestorTheme = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+
+  try {
+    // If a valid InstUI theme is given, it just returns the theme.
+    if ((0, _isBaseTheme.isBaseTheme)(themeOrOverride)) {
+      return themeOrOverride;
+    }
+  } catch {
+    // If the prop passed is not an Object, it will throw an error.
+    // We are using this fail-safe here for the non-TS users,
+    // because the whole page can break without a theme.
+    if (process.env.NODE_ENV !== 'production') {} // eslint-disable-next-line no-param-reassign
+
+
+    themeOrOverride = {};
+  } // we need to clone the ancestor theme not to override it
+
+
+  let currentTheme;
+
+  if (Object.keys(ancestorTheme).length === 0) {
+    const globalTheme = _themeRegistry.ThemeRegistry.getCurrentTheme();
+
+    if (process.env.NODE_ENV !== 'production' && !globalTheme) {}
+
+    currentTheme = (0, _lodash.cloneDeep)(globalTheme || _uiThemes.canvas);
+  } else {
+    currentTheme = (0, _lodash.cloneDeep)(ancestorTheme);
+  }
+
+  const themeName = currentTheme.key; // we pick the overrides for the current theme from the override object
+
+  const currentThemeOverrides = ((_themeOrOverride = themeOrOverride) === null || _themeOrOverride === void 0 ? void 0 : (_themeOrOverride$them = _themeOrOverride.themeOverrides) === null || _themeOrOverride$them === void 0 ? void 0 : _themeOrOverride$them[themeName]) || themeOrOverride.themeOverrides || {};
+  const finalTheme = (0, _lodash.merge)({}, currentTheme, (0, _lodash.merge)({}, themeOrOverride, currentThemeOverrides));
+  return finalTheme;
+};
+
+exports.getTheme = getTheme;
+var _default = getTheme;
+exports.default = _default;

package/lib/useTheme.js

@@ -11,6 +11,8 @@ var _uiThemes = require("@instructure/ui-themes");
 
 var _isEmpty = require("@instructure/ui-utils/lib/isEmpty.js");
 
+var _themeRegistry = require("@instructure/theme-registry");
+
 /*
  * The MIT License (MIT)
  *
@@ -40,13 +42,20 @@ var _isEmpty = require("@instructure/ui-utils/lib/isEmpty.js");
  * private: true
  * ---
  * A hook that will return the currently applied theme object from the nearest Context.
- * If there is no theme provided to the Context it will return the default `canvas` theme.
+ * If there is no Context, then it tries to get the current theme from the global ThemeRegistry.
+ * If there is no theme provided to the Context and ThemeRegistry it will return the default `canvas` theme.
  * @returns {object} the theme object
  */
 const useTheme = () => {
   let theme = (0, _react.useTheme)();
 
   if ((0, _isEmpty.isEmpty)(theme)) {
+    const globalTheme = _themeRegistry.ThemeRegistry.getCurrentTheme();
+
+    if (globalTheme) {
+      return globalTheme;
+    }
+
     if (process.env.NODE_ENV !== 'production') {}
 
     theme = _uiThemes.canvas;