@instructure/emotion 8.23.1-snapshot.8 → 8.24.1-snapshot.16

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.24.0](https://github.com/instructure/instructure-ui/compare/v8.23.0...v8.24.0) (2022-04-26)
+
+### Features
+
+- **theme-registry:** add `theme-registry` pacakge ([63216ef](https://github.com/instructure/instructure-ui/commit/63216ef58cfa3d1d61f85f1d9784cddffeddad72))
+
 # [8.23.0](https://github.com/instructure/instructure-ui/compare/v8.22.0...v8.23.0) (2022-04-07)
 
 **Note:** Version bump only for package @instructure/emotion

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,17 +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
  * ---
  * @module EmotionThemeProvider
  */
-
 function EmotionThemeProvider(_ref) {
   let children = _ref.children,
       _ref$theme = _ref.theme,
@@ -45,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';
 
 /**
  * ---

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,89 +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
  * ---
  * @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)
@@ -69,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/emotion",
-  "version": "8.23.1-snapshot.8+e6ddacd12",
+  "version": "8.24.1-snapshot.16+363893b5f",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -25,21 +25,22 @@
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@emotion/react": "^11",
-    "@instructure/console": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/shared-types": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-decorator": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-i18n": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-react-utils": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-themes": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-utils": "8.23.1-snapshot.8+e6ddacd12",
+    "@instructure/console": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/shared-types": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/theme-registry": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-decorator": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-i18n": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-react-utils": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-themes": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-utils": "8.24.1-snapshot.16+363893b5f",
     "emotion-theming": "^11",
     "hoist-non-react-statics": "^3.3.2",
     "lodash": "^4",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-test-utils": "8.23.1-snapshot.8+e6ddacd12",
+    "@instructure/ui-babel-preset": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-test-utils": "8.24.1-snapshot.16+363893b5f",
     "@types/lodash": "^4.14.171",
     "cpy-cli": "^3.1.1"
   },
@@ -50,5 +51,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "e6ddacd12e51b7dbfa1dfcb4a569f6e30f12b51d"
+  "gitHead": "363893b5f0575cc9743cdaa7fae4c404f3fb9cca"
 }

package/src/EmotionThemeProvider/index.tsx

@@ -23,38 +23,15 @@
  */
 
 import React from 'react'
-import { merge, cloneDeep } from 'lodash'
 import { ThemeProvider } from '@emotion/react'
 
-import { canvas } from '@instructure/ui-themes'
-
-import type {
-  BaseTheme,
-  BaseThemeVariableKeys
-} from '@instructure/shared-types'
-import type {
-  Overrides,
-  ThemeOrOverride,
-  SpecificThemeOverride
-} from '../EmotionTypes'
+import type { ThemeOrOverride } from '../EmotionTypes'
+import { getTheme } from '../getTheme'
 
 type ThemeProviderProps = {
   theme?: ThemeOrOverride
 }
 
-const baseThemeProps: BaseThemeVariableKeys = [
-  'borders',
-  'breakpoints',
-  'colors',
-  'forms',
-  'media',
-  'shadows',
-  'spacing',
-  'stacking',
-  'transitions',
-  'typography'
-]
-
 /**
  * ---
  * category: components/utilities
@@ -69,83 +46,5 @@ function EmotionThemeProvider({
 }
 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: ThemeOrOverride) =>
-  (ancestorTheme = {} as BaseTheme) => {
-    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') {
-        console.warn(
-          'The `theme` property provided to EmotionThemeProvider is not a valid InstUI theme object.\ntheme: ',
-          themeOrOverride
-        )
-      }
-      // 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') {
-        console.warn(
-          'No theme provided for [EmotionThemeProvider], using default `canvas` theme.'
-        )
-      }
-      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 as Overrides)?.themeOverrides as SpecificThemeOverride
-      )?.[themeName] || {}
-
-    return merge(
-      {},
-      currentTheme,
-      merge({}, themeOrOverride, currentThemeOverrides)
-    )
-  }
-
-const isBaseTheme = (theme: ThemeOrOverride): theme is BaseTheme => {
-  if (Array.isArray(theme) || typeof theme === 'function') {
-    throw new Error()
-  }
-
-  try {
-    return (
-      'key' in (theme as BaseTheme) &&
-      baseThemeProps.every((prop) => prop in theme)
-    )
-  } catch {
-    throw new Error()
-  }
-}
-
 export default EmotionThemeProvider
-export { EmotionThemeProvider, getTheme }
+export { EmotionThemeProvider }

package/src/InstUISettingsProvider/index.tsx

@@ -32,7 +32,7 @@ import {
   getElementType
 } from '@instructure/ui-react-utils'
 
-import { getTheme } from '../EmotionThemeProvider'
+import { getTheme } from '../getTheme'
 
 import type { ThemeOrOverride } from '../EmotionTypes'
 import type { DeterministicIdProviderValue } from '@instructure/ui-react-utils'