@instructure/ui-themeable - npm Package Compare versions

Comparing version 7.3.2-rc.3 to 7.3.2-rc.4

es/ApplyTheme/index.js

@@ -85,14 +85,14 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
   /**
-  * set theme variables to override the defaults
-  */
+   * set theme variables to override the defaults
+   */
   theme: PropTypes.object,
 
   /**
-  * accepts only one child (children must be wrapped in a single component/element)
-  */
+   * accepts only one child (children must be wrapped in a single component/element)
+   */
   children: PropTypes.node,
 
   /**
-  * Prevent overriding this theme via a child ApplyTheme component or theme props
-  */
+   * Prevent overriding this theme via a child ApplyTheme component or theme props
+   */
   immutable: PropTypes.bool
@@ -99,0 +99,0 @@ };

es/mirrorShorthand.js

@@ -54,2 +54,3 @@ /*
     // swap the 2nd and 4th values
+    ;
     var _ref = [valuesArr[3], valuesArr[1]];
@@ -86,2 +87,3 @@ valuesArr[1] = _ref[0];
     // swap the 1st and 2nd values
+    ;
     var _ref2 = [valuesArr[1], valuesArr[0]];
@@ -98,2 +100,3 @@ valuesArr[0] = _ref2[0];
   if (valuesArr.length === 4) {
+    ;
     var _ref3 = [valuesArr[1], valuesArr[0], valuesArr[3], valuesArr[2]];
@@ -100,0 +103,0 @@ valuesArr[0] = _ref3[0];

es/parseCss.js

@@ -26,10 +26,10 @@ /*
 /**
-* ---
-* category: utilities/themes
-* ---
-* Parses a CSS string into an AST object
-* @module parseCss
-* @param {String} cssText CSS string to parse
-* @returns {Object} AST for the CSS string
-*/
+ * ---
+ * category: utilities/themes
+ * ---
+ * Parses a CSS string into an AST object
+ * @module parseCss
+ * @param {String} cssText CSS string to parse
+ * @returns {Object} AST for the CSS string
+ */
 function parseCss() {
@@ -41,4 +41,4 @@ var cssText = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : '';
 /**
-* CSSRule types (https://developer.mozilla.org/en-US/docs/Web/API/CSSRule)
-*/
+ * CSSRule types (https://developer.mozilla.org/en-US/docs/Web/API/CSSRule)
+ */
 
@@ -52,7 +52,7 @@
 /**
-* Removes comments and import statements from a CSS string
-* (to prep for parsing and applying transforms)
-* @param {String} cssText CSS string to parse
-* @returns {String} cleaned CSS string
-*/
+ * Removes comments and import statements from a CSS string
+ * (to prep for parsing and applying transforms)
+ * @param {String} cssText CSS string to parse
+ * @returns {String} cleaned CSS string
+ */
 
@@ -59,0 +59,0 @@ function cleanCss() {

es/pickOverrides.js

@@ -26,10 +26,10 @@ /*
 /**
-* ---
-* category: utilities/themes
-* ---
-* Return only the theme variables that are different from the default
-* @param {Object} defaultTheme
-* @param {Object} theme
-* @returns {Object} variables that are different from the defaults
-*/
+ * ---
+ * category: utilities/themes
+ * ---
+ * Return only the theme variables that are different from the default
+ * @param {Object} defaultTheme
+ * @param {Object} theme
+ * @returns {Object} variables that are different from the defaults
+ */
 function pickOverrides(defaultTheme, theme) {
@@ -36,0 +36,0 @@ var overrides = {}; // shortcut if possible

es/replaceValuesWithVariableNames.js

@@ -26,10 +26,10 @@ /*
 /**
-* ---
-* category: utilities/themes
-* ---
-* Replace the variables values with the CSS variable
-* @param {Object} variables
-* @param {String} prefix a prefix to add to the variable names
-* @returns {Object} the theme variables object with CSS variables in place of values
-*/
+ * ---
+ * category: utilities/themes
+ * ---
+ * Replace the variables values with the CSS variable
+ * @param {Object} variables
+ * @param {String} prefix a prefix to add to the variable names
+ * @returns {Object} the theme variables object with CSS variables in place of values
+ */
 
@@ -36,0 +36,0 @@ function replaceValuesWithVariableNames(variables, prefix) {

es/setTextDirection.js

@@ -29,8 +29,8 @@ import { warn as _warn } from "@instructure/console";
 /**
-* ---
-* category: utilities/themes
-* ---
-* Sets the document text direction as it's required for themeable component
-* bidirectional styles.
-*/
+ * ---
+ * category: utilities/themes
+ * ---
+ * Sets the document text direction as it's required for themeable component
+ * bidirectional styles.
+ */
 
@@ -37,0 +37,0 @@ function setTextDirection() {

es/themeable.js

@@ -44,40 +44,40 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 /**
-* ---
-* category: utilities/themes
-* ---
-* A decorator or higher order component that makes a component `themeable`.
-*
-* As a HOC:
-*
-* ```js
-* import themeable from '@instructure/ui-themeable'
-* import styles from 'styles.css'
-* import theme from 'theme.js'
-*
-* class Example extends React.Component {
-*   render () {
-*     return <div className={styles.root}>Hello</div>
-*   }
-* }
-*
-* export default themeable(theme, styles)(Example)
-* ```
-*
-* Note: in the above example, the CSS file must be transformed into a JS object
-* via [babel](#babel-plugin-themeable-styles) or [webpack](#ui-webpack-config) loader.
-*
-* Themeable components inject their themed styles into the document when they are mounted.
-*
-* After the initial mount, a themeable component's theme can be configured explicitly
-* via its `theme` prop or passed via React context using the [ApplyTheme](#ApplyTheme) component.
-*
-* Themeable components register themselves with the [global theme registry](#registry)
-* when they are imported into the application, so you will need to be sure to import them
-* before you mount your application so that the default themed styles can be generated and injected.
-*
-* @param {function} theme - A function that generates the component theme variables.
-* @param {object} styles - The component styles object.
-* @param {function} adapter - A function for mapping deprecated theme vars to updated values.
-* @return {function} composes the themeable component.
-*/
+ * ---
+ * category: utilities/themes
+ * ---
+ * A decorator or higher order component that makes a component `themeable`.
+ *
+ * As a HOC:
+ *
+ * ```js
+ * import themeable from '@instructure/ui-themeable'
+ * import styles from 'styles.css'
+ * import theme from 'theme.js'
+ *
+ * class Example extends React.Component {
+ *   render () {
+ *     return <div className={styles.root}>Hello</div>
+ *   }
+ * }
+ *
+ * export default themeable(theme, styles)(Example)
+ * ```
+ *
+ * Note: in the above example, the CSS file must be transformed into a JS object
+ * via [babel](#babel-plugin-themeable-styles) or [webpack](#ui-webpack-config) loader.
+ *
+ * Themeable components inject their themed styles into the document when they are mounted.
+ *
+ * After the initial mount, a themeable component's theme can be configured explicitly
+ * via its `theme` prop or passed via React context using the [ApplyTheme](#ApplyTheme) component.
+ *
+ * Themeable components register themselves with the [global theme registry](#registry)
+ * when they are imported into the application, so you will need to be sure to import them
+ * before you mount your application so that the default themed styles can be generated and injected.
+ *
+ * @param {function} theme - A function that generates the component theme variables.
+ * @param {object} styles - The component styles object.
+ * @param {function} adapter - A function for mapping deprecated theme vars to updated values.
+ * @return {function} composes the themeable component.
+ */
 
@@ -277,9 +277,9 @@ var emptyObj = {};
 /**
-* Utility to generate a theme for all themeable components that have been registered.
-* This theme can be applied using the [ApplyTheme](#ApplyTheme) component.
-*
-* @param {String} themeKey The theme to use (for global theme variables across components)
-* @param {Object} overrides theme variable overrides (usually for dynamic/user defined values)
-* @return {Object} A theme config to use with `<ApplyTheme />`
-*/
+ * Utility to generate a theme for all themeable components that have been registered.
+ * This theme can be applied using the [ApplyTheme](#ApplyTheme) component.
+ *
+ * @param {String} themeKey The theme to use (for global theme variables across components)
+ * @param {Object} overrides theme variable overrides (usually for dynamic/user defined values)
+ * @return {Object} A theme config to use with `<ApplyTheme />`
+ */
 
@@ -286,0 +286,0 @@ themeable.generateTheme = generateTheme;

es/ThemeablePropValues.js

@@ -39,3 +39,3 @@ /*
   BORDER_WIDTHS: {
-    '0': '0',
+    0: '0',
     none: 'none',
@@ -47,3 +47,3 @@ small: 'small',
   BORDER_RADII: {
-    '0': '0',
+    0: '0',
     none: 'none',
@@ -69,3 +69,3 @@ small: 'small',
   SPACING: {
-    '0': '0',
+    0: '0',
     none: 'none',
@@ -72,0 +72,0 @@ auto: 'auto',

es/ThemeRegistry.js

@@ -59,5 +59,5 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 /**
-* Get the global theme registry
-* @return {object} The theme registry
-*/
+ * Get the global theme registry
+ * @return {object} The theme registry
+ */
 
@@ -69,4 +69,4 @@
 /**
-* Set the global theme registry
-*/
+ * Set the global theme registry
+ */
 
@@ -78,4 +78,4 @@
 /**
-* Clear/reset the global theme registry
-*/
+ * Clear/reset the global theme registry
+ */
 
@@ -87,5 +87,5 @@
 /**
-* Get the default theme key
-* @return {String} the default theme key
-*/
+ * Get the default theme key
+ * @return {String} the default theme key
+ */
 
@@ -101,6 +101,6 @@
 /**
-* Get the default theme key
-* @param {String} the default theme key
-* @param {Object} overrides for the theme variables
-*/
+ * Get the default theme key
+ * @param {String} the default theme key
+ * @param {Object} overrides for the theme variables
+ */
 
@@ -222,8 +222,8 @@
 /**
-* Merge theme variables for 'themeKey' with the defaults (and overrides)
-* @private
-* @param {String} themeKey
-* @param {Object} variable Theme overrides
-* @return {Object} A merged variables object
-*/
+ * Merge theme variables for 'themeKey' with the defaults (and overrides)
+ * @private
+ * @param {String} themeKey
+ * @param {Object} variable Theme overrides
+ * @return {Object} A merged variables object
+ */
 
@@ -288,7 +288,7 @@
 /**
-* Register a component theme function
-*
-* @param {String} key The theme key for the component (e.g., [Link.theme])
-* @param {Function} componentThemeFunction The function to use for preparing this component's theme
-*/
+ * Register a component theme function
+ *
+ * @param {String} key The theme key for the component (e.g., [Link.theme])
+ * @param {Function} componentThemeFunction The function to use for preparing this component's theme
+ */
 
@@ -306,4 +306,4 @@
   Object.keys(componentThemeFunction).forEach(function (themeKey) {
+    // eslint-disable-next-line no-prototype-builtins
     if (!components.hasOwnProperty(themeKey)) {
-      // eslint-disable-line no-prototype-builtins
       components[themeKey] = {};
@@ -332,9 +332,9 @@ }
 /**
-* Generate themes for all registered [@themeable](#themeable) components,
-* to be used by [`<ApplyTheme />`](#ApplyTheme).
-*
-* @param {String} themeKey The theme to use (for global theme variables across components)
-* @param {Object} overrides theme variable overrides (usually for user defined values)
-* @return {Object} A theme config to use with `<ApplyTheme />`
-*/
+ * Generate themes for all registered [@themeable](#themeable) components,
+ * to be used by [`<ApplyTheme />`](#ApplyTheme).
+ *
+ * @param {String} themeKey The theme to use (for global theme variables across components)
+ * @param {Object} overrides theme variable overrides (usually for user defined values)
+ * @return {Object} A theme config to use with `<ApplyTheme />`
+ */
 
@@ -341,0 +341,0 @@

lib/ApplyTheme/index.js

@@ -100,14 +100,14 @@ "use strict";
   /**
-  * set theme variables to override the defaults
-  */
+   * set theme variables to override the defaults
+   */
   theme: _propTypes.default.object,
 
   /**
-  * accepts only one child (children must be wrapped in a single component/element)
-  */
+   * accepts only one child (children must be wrapped in a single component/element)
+   */
   children: _propTypes.default.node,
 
   /**
-  * Prevent overriding this theme via a child ApplyTheme component or theme props
-  */
+   * Prevent overriding this theme via a child ApplyTheme component or theme props
+   */
   immutable: _propTypes.default.bool
@@ -114,0 +114,0 @@ };

lib/mirrorShorthand.js

@@ -62,2 +62,3 @@ "use strict";
     // swap the 2nd and 4th values
+    ;
     var _ref = [valuesArr[3], valuesArr[1]];
@@ -94,2 +95,3 @@ valuesArr[1] = _ref[0];
     // swap the 1st and 2nd values
+    ;
     var _ref2 = [valuesArr[1], valuesArr[0]];
@@ -106,2 +108,3 @@ valuesArr[0] = _ref2[0];
   if (valuesArr.length === 4) {
+    ;
     var _ref3 = [valuesArr[1], valuesArr[0], valuesArr[3], valuesArr[2]];
@@ -108,0 +111,0 @@ valuesArr[0] = _ref3[0];

lib/parseCss.js

@@ -35,10 +35,10 @@ "use strict";
 /**
-* ---
-* category: utilities/themes
-* ---
-* Parses a CSS string into an AST object
-* @module parseCss
-* @param {String} cssText CSS string to parse
-* @returns {Object} AST for the CSS string
-*/
+ * ---
+ * category: utilities/themes
+ * ---
+ * Parses a CSS string into an AST object
+ * @module parseCss
+ * @param {String} cssText CSS string to parse
+ * @returns {Object} AST for the CSS string
+ */
 function parseCss() {
@@ -50,4 +50,4 @@ var cssText = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : '';
 /**
-* CSSRule types (https://developer.mozilla.org/en-US/docs/Web/API/CSSRule)
-*/
+ * CSSRule types (https://developer.mozilla.org/en-US/docs/Web/API/CSSRule)
+ */
 
@@ -61,7 +61,7 @@
 /**
-* Removes comments and import statements from a CSS string
-* (to prep for parsing and applying transforms)
-* @param {String} cssText CSS string to parse
-* @returns {String} cleaned CSS string
-*/
+ * Removes comments and import statements from a CSS string
+ * (to prep for parsing and applying transforms)
+ * @param {String} cssText CSS string to parse
+ * @returns {String} cleaned CSS string
+ */
 
@@ -68,0 +68,0 @@ exports.ruleTypes = ruleTypes;

lib/pickOverrides.js

@@ -34,10 +34,10 @@ "use strict";
 /**
-* ---
-* category: utilities/themes
-* ---
-* Return only the theme variables that are different from the default
-* @param {Object} defaultTheme
-* @param {Object} theme
-* @returns {Object} variables that are different from the defaults
-*/
+ * ---
+ * category: utilities/themes
+ * ---
+ * Return only the theme variables that are different from the default
+ * @param {Object} defaultTheme
+ * @param {Object} theme
+ * @returns {Object} variables that are different from the defaults
+ */
 function pickOverrides(defaultTheme, theme) {
@@ -44,0 +44,0 @@ var overrides = {}; // shortcut if possible

lib/replaceValuesWithVariableNames.js

@@ -36,10 +36,10 @@ "use strict";
 /**
-* ---
-* category: utilities/themes
-* ---
-* Replace the variables values with the CSS variable
-* @param {Object} variables
-* @param {String} prefix a prefix to add to the variable names
-* @returns {Object} the theme variables object with CSS variables in place of values
-*/
+ * ---
+ * category: utilities/themes
+ * ---
+ * Replace the variables values with the CSS variable
+ * @param {Object} variables
+ * @param {String} prefix a prefix to add to the variable names
+ * @returns {Object} the theme variables object with CSS variables in place of values
+ */
 function replaceValuesWithVariableNames(variables, prefix) {
@@ -46,0 +46,0 @@ var map = {};

lib/setTextDirection.js

@@ -38,8 +38,8 @@ "use strict";
 /**
-* ---
-* category: utilities/themes
-* ---
-* Sets the document text direction as it's required for themeable component
-* bidirectional styles.
-*/
+ * ---
+ * category: utilities/themes
+ * ---
+ * Sets the document text direction as it's required for themeable component
+ * bidirectional styles.
+ */
 
@@ -46,0 +46,0 @@ function setTextDirection() {

lib/themeable.js

@@ -77,40 +77,40 @@ "use strict";
 /**
-* ---
-* category: utilities/themes
-* ---
-* A decorator or higher order component that makes a component `themeable`.
-*
-* As a HOC:
-*
-* ```js
-* import themeable from '@instructure/ui-themeable'
-* import styles from 'styles.css'
-* import theme from 'theme.js'
-*
-* class Example extends React.Component {
-*   render () {
-*     return <div className={styles.root}>Hello</div>
-*   }
-* }
-*
-* export default themeable(theme, styles)(Example)
-* ```
-*
-* Note: in the above example, the CSS file must be transformed into a JS object
-* via [babel](#babel-plugin-themeable-styles) or [webpack](#ui-webpack-config) loader.
-*
-* Themeable components inject their themed styles into the document when they are mounted.
-*
-* After the initial mount, a themeable component's theme can be configured explicitly
-* via its `theme` prop or passed via React context using the [ApplyTheme](#ApplyTheme) component.
-*
-* Themeable components register themselves with the [global theme registry](#registry)
-* when they are imported into the application, so you will need to be sure to import them
-* before you mount your application so that the default themed styles can be generated and injected.
-*
-* @param {function} theme - A function that generates the component theme variables.
-* @param {object} styles - The component styles object.
-* @param {function} adapter - A function for mapping deprecated theme vars to updated values.
-* @return {function} composes the themeable component.
-*/
+ * ---
+ * category: utilities/themes
+ * ---
+ * A decorator or higher order component that makes a component `themeable`.
+ *
+ * As a HOC:
+ *
+ * ```js
+ * import themeable from '@instructure/ui-themeable'
+ * import styles from 'styles.css'
+ * import theme from 'theme.js'
+ *
+ * class Example extends React.Component {
+ *   render () {
+ *     return <div className={styles.root}>Hello</div>
+ *   }
+ * }
+ *
+ * export default themeable(theme, styles)(Example)
+ * ```
+ *
+ * Note: in the above example, the CSS file must be transformed into a JS object
+ * via [babel](#babel-plugin-themeable-styles) or [webpack](#ui-webpack-config) loader.
+ *
+ * Themeable components inject their themed styles into the document when they are mounted.
+ *
+ * After the initial mount, a themeable component's theme can be configured explicitly
+ * via its `theme` prop or passed via React context using the [ApplyTheme](#ApplyTheme) component.
+ *
+ * Themeable components register themselves with the [global theme registry](#registry)
+ * when they are imported into the application, so you will need to be sure to import them
+ * before you mount your application so that the default themed styles can be generated and injected.
+ *
+ * @param {function} theme - A function that generates the component theme variables.
+ * @param {object} styles - The component styles object.
+ * @param {function} adapter - A function for mapping deprecated theme vars to updated values.
+ * @return {function} composes the themeable component.
+ */
 var emptyObj = {};
@@ -302,9 +302,9 @@ /*
 /**
-* Utility to generate a theme for all themeable components that have been registered.
-* This theme can be applied using the [ApplyTheme](#ApplyTheme) component.
-*
-* @param {String} themeKey The theme to use (for global theme variables across components)
-* @param {Object} overrides theme variable overrides (usually for dynamic/user defined values)
-* @return {Object} A theme config to use with `<ApplyTheme />`
-*/
+ * Utility to generate a theme for all themeable components that have been registered.
+ * This theme can be applied using the [ApplyTheme](#ApplyTheme) component.
+ *
+ * @param {String} themeKey The theme to use (for global theme variables across components)
+ * @param {Object} overrides theme variable overrides (usually for dynamic/user defined values)
+ * @return {Object} A theme config to use with `<ApplyTheme />`
+ */
 
@@ -311,0 +311,0 @@ exports.themeable = themeable;

lib/ThemeablePropValues.js

@@ -46,3 +46,3 @@ "use strict";
   BORDER_WIDTHS: {
-    '0': '0',
+    0: '0',
     none: 'none',
@@ -54,3 +54,3 @@ small: 'small',
   BORDER_RADII: {
-    '0': '0',
+    0: '0',
     none: 'none',
@@ -76,3 +76,3 @@ small: 'small',
   SPACING: {
-    '0': '0',
+    0: '0',
     none: 'none',
@@ -79,0 +79,0 @@ auto: 'auto',

lib/ThemeRegistry.js

@@ -81,5 +81,5 @@ "use strict";
 /**
-* Get the global theme registry
-* @return {object} The theme registry
-*/
+ * Get the global theme registry
+ * @return {object} The theme registry
+ */
 
@@ -91,4 +91,4 @@
 /**
-* Set the global theme registry
-*/
+ * Set the global theme registry
+ */
 
@@ -100,4 +100,4 @@
 /**
-* Clear/reset the global theme registry
-*/
+ * Clear/reset the global theme registry
+ */
 
@@ -109,5 +109,5 @@
 /**
-* Get the default theme key
-* @return {String} the default theme key
-*/
+ * Get the default theme key
+ * @return {String} the default theme key
+ */
 
@@ -123,6 +123,6 @@
 /**
-* Get the default theme key
-* @param {String} the default theme key
-* @param {Object} overrides for the theme variables
-*/
+ * Get the default theme key
+ * @param {String} the default theme key
+ * @param {Object} overrides for the theme variables
+ */
 
@@ -235,8 +235,8 @@
 /**
-* Merge theme variables for 'themeKey' with the defaults (and overrides)
-* @private
-* @param {String} themeKey
-* @param {Object} variable Theme overrides
-* @return {Object} A merged variables object
-*/
+ * Merge theme variables for 'themeKey' with the defaults (and overrides)
+ * @private
+ * @param {String} themeKey
+ * @param {Object} variable Theme overrides
+ * @return {Object} A merged variables object
+ */
 
@@ -301,7 +301,7 @@
 /**
-* Register a component theme function
-*
-* @param {String} key The theme key for the component (e.g., [Link.theme])
-* @param {Function} componentThemeFunction The function to use for preparing this component's theme
-*/
+ * Register a component theme function
+ *
+ * @param {String} key The theme key for the component (e.g., [Link.theme])
+ * @param {Function} componentThemeFunction The function to use for preparing this component's theme
+ */
 
@@ -319,4 +319,4 @@
   Object.keys(componentThemeFunction).forEach(function (themeKey) {
+    // eslint-disable-next-line no-prototype-builtins
     if (!components.hasOwnProperty(themeKey)) {
-      // eslint-disable-line no-prototype-builtins
       components[themeKey] = {};
@@ -345,9 +345,9 @@ }
 /**
-* Generate themes for all registered [@themeable](#themeable) components,
-* to be used by [`<ApplyTheme />`](#ApplyTheme).
-*
-* @param {String} themeKey The theme to use (for global theme variables across components)
-* @param {Object} overrides theme variable overrides (usually for user defined values)
-* @return {Object} A theme config to use with `<ApplyTheme />`
-*/
+ * Generate themes for all registered [@themeable](#themeable) components,
+ * to be used by [`<ApplyTheme />`](#ApplyTheme).
+ *
+ * @param {String} themeKey The theme to use (for global theme variables across components)
+ * @param {Object} overrides theme variable overrides (usually for user defined values)
+ * @return {Object} A theme config to use with `<ApplyTheme />`
+ */
 
@@ -354,0 +354,0 @@

package.json

 {
   "name": "@instructure/ui-themeable",
-  "version": "7.3.2-rc.3+1bd36e24f",
+  "version": "7.3.2-rc.4+434e75608",
   "description": "A UI component library made by Instructure Inc.",
@@ -26,16 +26,16 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "7.3.2-rc.3+1bd36e24f",
-    "@instructure/ui-test-utils": "7.3.2-rc.3+1bd36e24f",
-    "@instructure/ui-testable": "7.3.2-rc.3+1bd36e24f"
+    "@instructure/ui-babel-preset": "7.3.2-rc.4+434e75608",
+    "@instructure/ui-test-utils": "7.3.2-rc.4+434e75608",
+    "@instructure/ui-testable": "7.3.2-rc.4+434e75608"
   },
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@instructure/console": "7.3.2-rc.3+1bd36e24f",
-    "@instructure/ui-color-utils": "7.3.2-rc.3+1bd36e24f",
-    "@instructure/ui-decorator": "7.3.2-rc.3+1bd36e24f",
-    "@instructure/ui-dom-utils": "7.3.2-rc.3+1bd36e24f",
-    "@instructure/ui-react-utils": "7.3.2-rc.3+1bd36e24f",
-    "@instructure/ui-stylesheet": "7.3.2-rc.3+1bd36e24f",
-    "@instructure/ui-utils": "7.3.2-rc.3+1bd36e24f",
-    "@instructure/uid": "7.3.2-rc.3+1bd36e24f",
+    "@instructure/console": "7.3.2-rc.4+434e75608",
+    "@instructure/ui-color-utils": "7.3.2-rc.4+434e75608",
+    "@instructure/ui-decorator": "7.3.2-rc.4+434e75608",
+    "@instructure/ui-dom-utils": "7.3.2-rc.4+434e75608",
+    "@instructure/ui-react-utils": "7.3.2-rc.4+434e75608",
+    "@instructure/ui-stylesheet": "7.3.2-rc.4+434e75608",
+    "@instructure/ui-utils": "7.3.2-rc.4+434e75608",
+    "@instructure/uid": "7.3.2-rc.4+434e75608",
     "prop-types": "^15"
@@ -49,3 +49,3 @@ },
   },
-  "gitHead": "1bd36e24f411feb7b85ca14c966d36f7582d9b48"
+  "gitHead": "434e7560814730d64fa0fcc03e4985b1c05c1d4f"
 }

src/applyCustomMediaToCss.js

@@ -25,3 +25,2 @@ /*
 
-
 /**
@@ -38,3 +37,3 @@ * ---
  */
-function applyCustomMediaToCss (cssText, variables) {
+function applyCustomMediaToCss(cssText, variables) {
   const matches = getMatches(cssText, /@media\s*[^(]*\((--[^)]+)\)?/g)
@@ -47,3 +46,6 @@ let result = cssText
     matches.forEach((match) => {
-      const matcher = new RegExp(match[1].replace(/[\\^$*+?.()|[\]{}]/g, '\\$&'), 'gm')
+      const matcher = new RegExp(
+        match[1].replace(/[\\^$*+?.()|[\]{}]/g, '\\$&'),
+        'gm'
+      )
 
@@ -57,3 +59,3 @@ result = result.replace(matcher, vars[match[1]])
 
-function getMatches (str, regex) {
+function getMatches(str, regex) {
   const matches = []
@@ -60,0 +62,0 @@ let match

src/ApplyTheme/index.js

@@ -43,12 +43,12 @@ /*
     /**
-    * set theme variables to override the defaults
-    */
+     * set theme variables to override the defaults
+     */
     theme: PropTypes.object,
     /**
-    * accepts only one child (children must be wrapped in a single component/element)
-    */
+     * accepts only one child (children must be wrapped in a single component/element)
+     */
     children: PropTypes.node,
     /**
-    * Prevent overriding this theme via a child ApplyTheme component or theme props
-    */
+     * Prevent overriding this theme via a child ApplyTheme component or theme props
+     */
     immutable: PropTypes.bool
@@ -69,3 +69,3 @@ }
 
-  getChildContext () {
+  getChildContext() {
     let theme = this.props.theme || {}
@@ -86,6 +86,9 @@
 
-    return ThemeContext.makeThemeContext(theme, parentThemeContext.immutable || this.props.immutable)
+    return ThemeContext.makeThemeContext(
+      theme,
+      parentThemeContext.immutable || this.props.immutable
+    )
   }
 
-  render () {
+  render() {
     return ensureSingleChild(this.props.children)
@@ -92,0 +95,0 @@ }

src/applyVariablesToNode.js

@@ -41,3 +41,3 @@ /*
  */
-function applyVariablesToNode (domNode, variables, defaults, prefix) {
+function applyVariablesToNode(domNode, variables, defaults, prefix) {
   if (!domNode || isEmpty(variables)) {
@@ -56,3 +56,3 @@ return
 
-function clearCustomProperties (domNode, prefix) {
+function clearCustomProperties(domNode, prefix) {
   const styles = domNode.style
@@ -67,3 +67,3 @@ for (let i = styles.length - 1; i >= 0; i--) {
 
-function setCustomProperties (domNode, properties) {
+function setCustomProperties(domNode, properties) {
   Object.keys(properties).forEach((propertyName) => {
@@ -70,0 +70,0 @@ const value = properties[propertyName]

src/createThemeAdapter.js

@@ -39,3 +39,7 @@ /*
  */
-export const createThemeAdapter = ({ map = {}, version, shouldIncludeOldValues = false } = {}) => {
+export const createThemeAdapter = ({
+  map = {},
+  version,
+  shouldIncludeOldValues = false
+} = {}) => {
   return ({ theme = {}, displayName } = {}) => {
@@ -45,10 +49,22 @@ return Object.entries(theme).reduce((result, [key, value]) => {
         if (Array.isArray(map[key])) {
-          warnDeprecated(false, `[${displayName}] The theme variable \`${key}\` has been split into the following values \`${map[key].join(', ')}\`.${version
-            ? ` In version ${version}, \`${key}\` will no longer work as an override. Override each value individually instead.`
-            : ''}`
+          warnDeprecated(
+            false,
+            `[${displayName}] The theme variable \`${key}\` has been split into the following values \`${map[
+              key
+            ].join(', ')}\`.${
+              version
+                ? ` In version ${version}, \`${key}\` will no longer work as an override. Override each value individually instead.`
+                : ''
+            }`
           )
         } else {
-          warnDeprecated(false, `[${displayName}] The theme variable \`${key}\` has been changed to \`${map[key]}\`.${version
-            ? ` In version ${version}, \`${key}\` will no longer work as an override. Use \`${map[key]}\` instead.`
-            : ''}`
+          warnDeprecated(
+            false,
+            `[${displayName}] The theme variable \`${key}\` has been changed to \`${
+              map[key]
+            }\`.${
+              version
+                ? ` In version ${version}, \`${key}\` will no longer work as an override. Use \`${map[key]}\` instead.`
+                : ''
+            }`
           )
@@ -70,7 +86,12 @@ }
 
-        return shouldIncludeOldValues ? {
-          ...result, ...updatedThemeVars, [key]: value
-        } : {
-          ...result, ...updatedThemeVars
-        }
+        return shouldIncludeOldValues
+          ? {
+              ...result,
+              ...updatedThemeVars,
+              [key]: value
+            }
+          : {
+              ...result,
+              ...updatedThemeVars
+            }
       }
@@ -81,2 +102,2 @@
   }
-}
+}

src/formatVariableName.js

@@ -34,3 +34,3 @@ /*
  */
-function formatVariableName (variableName, prefix) {
+function formatVariableName(variableName, prefix) {
   const name = prefix ? `${prefix}-${variableName}` : variableName
@@ -37,0 +37,0 @@ return `--${name}`

src/formatVariableNames.js

@@ -36,3 +36,3 @@ /*
  */
-function formatVariableNames (variables, prefix) {
+function formatVariableNames(variables, prefix) {
   const formatted = {}
@@ -39,0 +39,0 @@ Object.keys(variables || {}).forEach((key) => {

src/getCssText.js

@@ -40,4 +40,6 @@ /*
  */
-function getCssText (template, variables, prefix) {
-  const variableNames = variables ? replaceValuesWithVariableNames(variables, prefix) : {}
+function getCssText(template, variables, prefix) {
+  const variableNames = variables
+    ? replaceValuesWithVariableNames(variables, prefix)
+    : {}
 
@@ -51,9 +53,8 @@ // inject the CSS variable names into the style template
 
-  const cssVariablesString = variables ? formatVariableNames(variables, prefix) : ''
+  const cssVariablesString = variables
+    ? formatVariableNames(variables, prefix)
+    : ''
 
   // append the CSS variables (defaults) to the result
-  cssText = [
-    cssText,
-    variablesToCSSText(cssVariablesString)
-  ].join('\n')
+  cssText = [cssText, variablesToCSSText(cssVariablesString)].join('\n')
 
@@ -63,6 +64,9 @@ return cssText
 
-function variablesToCSSText (variables = {}) {
+function variablesToCSSText(variables = {}) {
   const rules = []
   for (const key in variables) {
-    if (Object.prototype.hasOwnProperty.call(variables, key) && typeof variables[key] !== 'undefined') {
+    if (
+      Object.prototype.hasOwnProperty.call(variables, key) &&
+      typeof variables[key] !== 'undefined'
+    ) {
       rules.push(`${key}: ${variables[key]}`)
@@ -69,0 +73,0 @@ }

src/getShorthandPropValue.js

@@ -42,3 +42,8 @@ /*
  */
-function getShorthandPropValue (componentName, componentTheme, propValue, propName) {
+function getShorthandPropValue(
+  componentName,
+  componentTheme,
+  propValue,
+  propName
+) {
   if (typeof propValue !== 'string' || isEmpty(componentTheme)) {
@@ -70,3 +75,6 @@ return
 
-      error(themeVariableValue, `[${componentName}] '${themeVariableName}' is an invalid '${propName}' value.`)
+      error(
+        themeVariableValue,
+        `[${componentName}] '${themeVariableName}' is an invalid '${propName}' value.`
+      )
 
@@ -73,0 +81,0 @@ return themeVariableValue || '0'

src/makeThemeVars.js

@@ -38,5 +38,5 @@ /*
  */
-function makeThemeVars (prefix, vars) {
+function makeThemeVars(prefix, vars) {
   const themeVars = {}
-  Object.keys(vars).forEach(variable => {
+  Object.keys(vars).forEach((variable) => {
     themeVars[camelize(`${prefix}-${variable}`)] = vars[variable]
@@ -43,0 +43,0 @@ })

src/mirrorShorthand.js

@@ -45,3 +45,3 @@ /*
  */
-function mirrorShorthandEdges (values) {
+function mirrorShorthandEdges(values) {
   if (typeof values !== 'string') {
@@ -54,4 +54,3 @@ return
     // swap the 2nd and 4th values
-    [ valuesArr[1], valuesArr[3] ] =
-    [ valuesArr[3], valuesArr[1] ]
+    ;[valuesArr[1], valuesArr[3]] = [valuesArr[3], valuesArr[1]]
   }
@@ -75,3 +74,3 @@
  */
-function mirrorShorthandCorners (values) {
+function mirrorShorthandCorners(values) {
   if (typeof values !== 'string') {
@@ -84,4 +83,3 @@ return
     // swap the 1st and 2nd values
-    [ valuesArr[0], valuesArr[1] ] =
-    [ valuesArr[1], valuesArr[0] ]
+    ;[valuesArr[0], valuesArr[1]] = [valuesArr[1], valuesArr[0]]
   }
@@ -95,4 +93,8 @@
   if (valuesArr.length === 4) {
-    [ valuesArr[0], valuesArr[1], valuesArr[2], valuesArr[3] ] =
-    [ valuesArr[1], valuesArr[0], valuesArr[3], valuesArr[2] ]
+    ;[valuesArr[0], valuesArr[1], valuesArr[2], valuesArr[3]] = [
+      valuesArr[1],
+      valuesArr[0],
+      valuesArr[3],
+      valuesArr[2]
+    ]
   }
@@ -99,0 +101,0 @@

src/parseCss.js

@@ -25,13 +25,12 @@ /*
 
-
 /**
-* ---
-* category: utilities/themes
-* ---
-* Parses a CSS string into an AST object
-* @module parseCss
-* @param {String} cssText CSS string to parse
-* @returns {Object} AST for the CSS string
-*/
-function parseCss (cssText = '') {
+ * ---
+ * category: utilities/themes
+ * ---
+ * Parses a CSS string into an AST object
+ * @module parseCss
+ * @param {String} cssText CSS string to parse
+ * @returns {Object} AST for the CSS string
+ */
+function parseCss(cssText = '') {
   const cleaned = cleanCss(cssText)
@@ -42,4 +41,4 @@ return parseLexed(lex(cleaned), cleaned)
 /**
-* CSSRule types (https://developer.mozilla.org/en-US/docs/Web/API/CSSRule)
-*/
+ * CSSRule types (https://developer.mozilla.org/en-US/docs/Web/API/CSSRule)
+ */
 const ruleTypes = {
@@ -52,8 +51,8 @@ style: 1,
 /**
-* Removes comments and import statements from a CSS string
-* (to prep for parsing and applying transforms)
-* @param {String} cssText CSS string to parse
-* @returns {String} cleaned CSS string
-*/
-function cleanCss (text = '') {
+ * Removes comments and import statements from a CSS string
+ * (to prep for parsing and applying transforms)
+ * @param {String} cssText CSS string to parse
+ * @returns {String} cleaned CSS string
+ */
+function cleanCss(text = '') {
   // remove comments and imports
@@ -65,3 +64,3 @@ return text
 
-function lex (text) {
+function lex(text) {
   const rootNode = {
@@ -103,3 +102,3 @@ start: 0,
 
-function parseSelector (node, text) {
+function parseSelector(node, text) {
   const start = node.previous ? node.previous.end : node.parent.start
@@ -116,3 +115,3 @@ const end = node.start - 1
 
-function parseRuleType (selector) {
+function parseRuleType(selector) {
   if (selector.indexOf('@') === 0) {
@@ -129,3 +128,3 @@ if (selector.indexOf('@media') === 0) {
 
-function parseLexed (node, text = '') {
+function parseLexed(node, text = '') {
   /* eslint-disable no-param-reassign */
@@ -141,3 +140,3 @@
   if (node.rules && node.rules.length > 0) {
-    node.rules = node.rules.map(rule => parseLexed(rule, text))
+    node.rules = node.rules.map((rule) => parseLexed(rule, text))
   }
@@ -144,0 +143,0 @@

src/pickOverrides.js

@@ -26,15 +26,15 @@ /*
 /**
-* ---
-* category: utilities/themes
-* ---
-* Return only the theme variables that are different from the default
-* @param {Object} defaultTheme
-* @param {Object} theme
-* @returns {Object} variables that are different from the defaults
-*/
-function pickOverrides (defaultTheme, theme) {
+ * ---
+ * category: utilities/themes
+ * ---
+ * Return only the theme variables that are different from the default
+ * @param {Object} defaultTheme
+ * @param {Object} theme
+ * @returns {Object} variables that are different from the defaults
+ */
+function pickOverrides(defaultTheme, theme) {
   const overrides = {}
 
   // shortcut if possible
-  if ((defaultTheme === theme) || !theme) return overrides
+  if (defaultTheme === theme || !theme) return overrides
 
@@ -41,0 +41,0 @@ // filter out any properties that have values that are the same as in defaults

src/replaceValuesWithVariableNames.js

@@ -28,11 +28,11 @@ /*
 /**
-* ---
-* category: utilities/themes
-* ---
-* Replace the variables values with the CSS variable
-* @param {Object} variables
-* @param {String} prefix a prefix to add to the variable names
-* @returns {Object} the theme variables object with CSS variables in place of values
-*/
-function replaceValuesWithVariableNames (variables, prefix) {
+ * ---
+ * category: utilities/themes
+ * ---
+ * Replace the variables values with the CSS variable
+ * @param {Object} variables
+ * @param {String} prefix a prefix to add to the variable names
+ * @returns {Object} the theme variables object with CSS variables in place of values
+ */
+function replaceValuesWithVariableNames(variables, prefix) {
   const map = {}
@@ -39,0 +39,0 @@

src/setTextDirection.js

@@ -29,9 +29,9 @@ /*
 /**
-* ---
-* category: utilities/themes
-* ---
-* Sets the document text direction as it's required for themeable component
-* bidirectional styles.
-*/
-function setTextDirection () {
+ * ---
+ * category: utilities/themes
+ * ---
+ * Sets the document text direction as it's required for themeable component
+ * bidirectional styles.
+ */
+function setTextDirection() {
   if (hasRan) return
@@ -42,3 +42,4 @@ hasRan = true
     if (!dir) {
-      warn(dir,
+      warn(
+        dir,
         `[themeable] component styles require setting a 'dir' attribute on the HTML element.
@@ -45,0 +46,0 @@ To prevent breaking changes, we'll set it to a default value: 'ltr'.`

src/themeable.js

@@ -46,40 +46,40 @@ /*
 /**
-* ---
-* category: utilities/themes
-* ---
-* A decorator or higher order component that makes a component `themeable`.
-*
-* As a HOC:
-*
-* ```js
-* import themeable from '@instructure/ui-themeable'
-* import styles from 'styles.css'
-* import theme from 'theme.js'
-*
-* class Example extends React.Component {
-*   render () {
-*     return <div className={styles.root}>Hello</div>
-*   }
-* }
-*
-* export default themeable(theme, styles)(Example)
-* ```
-*
-* Note: in the above example, the CSS file must be transformed into a JS object
-* via [babel](#babel-plugin-themeable-styles) or [webpack](#ui-webpack-config) loader.
-*
-* Themeable components inject their themed styles into the document when they are mounted.
-*
-* After the initial mount, a themeable component's theme can be configured explicitly
-* via its `theme` prop or passed via React context using the [ApplyTheme](#ApplyTheme) component.
-*
-* Themeable components register themselves with the [global theme registry](#registry)
-* when they are imported into the application, so you will need to be sure to import them
-* before you mount your application so that the default themed styles can be generated and injected.
-*
-* @param {function} theme - A function that generates the component theme variables.
-* @param {object} styles - The component styles object.
-* @param {function} adapter - A function for mapping deprecated theme vars to updated values.
-* @return {function} composes the themeable component.
-*/
+ * ---
+ * category: utilities/themes
+ * ---
+ * A decorator or higher order component that makes a component `themeable`.
+ *
+ * As a HOC:
+ *
+ * ```js
+ * import themeable from '@instructure/ui-themeable'
+ * import styles from 'styles.css'
+ * import theme from 'theme.js'
+ *
+ * class Example extends React.Component {
+ *   render () {
+ *     return <div className={styles.root}>Hello</div>
+ *   }
+ * }
+ *
+ * export default themeable(theme, styles)(Example)
+ * ```
+ *
+ * Note: in the above example, the CSS file must be transformed into a JS object
+ * via [babel](#babel-plugin-themeable-styles) or [webpack](#ui-webpack-config) loader.
+ *
+ * Themeable components inject their themed styles into the document when they are mounted.
+ *
+ * After the initial mount, a themeable component's theme can be configured explicitly
+ * via its `theme` prop or passed via React context using the [ApplyTheme](#ApplyTheme) component.
+ *
+ * Themeable components register themselves with the [global theme registry](#registry)
+ * when they are imported into the application, so you will need to be sure to import them
+ * before you mount your application so that the default themed styles can be generated and injected.
+ *
+ * @param {function} theme - A function that generates the component theme variables.
+ * @param {object} styles - The component styles object.
+ * @param {function} adapter - A function for mapping deprecated theme vars to updated values.
+ * @return {function} composes the themeable component.
+ */
 
@@ -105,164 +105,176 @@ const emptyObj = {}
 
-const themeable = decorator((ComposedComponent, theme, styles = {}, adapter) => {
-  const displayName = ComposedComponent.displayName || ComposedComponent.name
+const themeable = decorator(
+  (ComposedComponent, theme, styles = {}, adapter) => {
+    const displayName = ComposedComponent.displayName || ComposedComponent.name
 
-  let componentId = `${(styles && styles.componentId) || hash(ComposedComponent, 8)}`
+    let componentId = `${
+      (styles && styles.componentId) || hash(ComposedComponent, 8)
+    }`
 
-  if (process.env.NODE_ENV !== 'production') {
-    componentId = `${displayName}__${componentId}`
-    warn(
-      parseInt(React.version) >= 15,
-      `[themeable] React 15 or higher is required. You are running React version ${React.version}.`,
-    )
-  }
+    if (process.env.NODE_ENV !== 'production') {
+      componentId = `${displayName}__${componentId}`
+      warn(
+        parseInt(React.version) >= 15,
+        `[themeable] React 15 or higher is required. You are running React version ${React.version}.`
+      )
+    }
 
-  const contextKey = Symbol(componentId)
+    const contextKey = Symbol(componentId)
 
-  let template = () => {}
+    let template = () => {}
 
-  if (styles && styles.template) {
-    template = (typeof styles.template === 'function') ? styles.template : () => {
-      warn(
-        false,
-        '[themeable] Invalid styles for: %O. Use @instructure/babel-plugin-themeable-styles to transform CSS imports.',
-        displayName
-      )
-      return ''
+    if (styles && styles.template) {
+      template =
+        typeof styles.template === 'function'
+          ? styles.template
+          : () => {
+              warn(
+                false,
+                '[themeable] Invalid styles for: %O. Use @instructure/babel-plugin-themeable-styles to transform CSS imports.',
+                displayName
+              )
+              return ''
+            }
     }
-  }
 
-  registerComponentTheme(contextKey, theme)
-  const getContext = function (context) {
-    const themeContext = ThemeContext.getThemeContext(context)
-    return themeContext || emptyObj
-  }
-  const getThemeFromContext = function (context) {
-    const { theme } = getContext(context)
-    if (theme && theme[contextKey]) {
-      return Object.assign({},  theme[contextKey])
-    } else {
-      return emptyObj
+    registerComponentTheme(contextKey, theme)
+    const getContext = function (context) {
+      const themeContext = ThemeContext.getThemeContext(context)
+      return themeContext || emptyObj
     }
-  }
-  const generateThemeForContextKey = function (themeKey, overrides) {
-    return generateComponentTheme(contextKey, themeKey, overrides)
-  }
-  class ThemeableComponent extends ComposedComponent {
-    constructor() {
-      const res = super(...arguments)
-      this._themeCache = null
-      this._instanceId = uid(displayName)
+    const getThemeFromContext = function (context) {
+      const { theme } = getContext(context)
+      if (theme && theme[contextKey]) {
+        return Object.assign({}, theme[contextKey])
+      } else {
+        return emptyObj
+      }
+    }
+    const generateThemeForContextKey = function (themeKey, overrides) {
+      return generateComponentTheme(contextKey, themeKey, overrides)
+    }
+    class ThemeableComponent extends ComposedComponent {
+      constructor() {
+        const res = super(...arguments)
+        this._themeCache = null
+        this._instanceId = uid(displayName)
 
-      const defaultTheme = generateThemeForContextKey()
-      mountComponentStyles(template, defaultTheme, componentId)
+        const defaultTheme = generateThemeForContextKey()
+        mountComponentStyles(template, defaultTheme, componentId)
 
-      return res
-    }
-    componentDidMount () {
-      this.applyTheme()
-      setTextDirection()
-      if (super.componentDidMount) {
-        super.componentDidMount()
+        return res
       }
-    }
-    shouldComponentUpdate (nextProps, nextState, nextContext) {
-      const themeContextWillChange = !deepEqual(
+      componentDidMount() {
+        this.applyTheme()
+        setTextDirection()
+        if (super.componentDidMount) {
+          super.componentDidMount()
+        }
+      }
+      shouldComponentUpdate(nextProps, nextState, nextContext) {
+        const themeContextWillChange = !deepEqual(
           ThemeContext.getThemeContext(this.context),
           ThemeContext.getThemeContext(nextContext)
         )
-      if (themeContextWillChange) return true
-      if (super.shouldComponentUpdate) {
-        return super.shouldComponentUpdate(nextProps, nextState, nextContext)
+        if (themeContextWillChange) return true
+        if (super.shouldComponentUpdate) {
+          return super.shouldComponentUpdate(nextProps, nextState, nextContext)
+        }
+        return (
+          !shallowEqual(this.props, nextProps) ||
+          !shallowEqual(this.state, nextState) ||
+          !shallowEqual(this.context, nextContext)
+        )
       }
-      return (
-        !shallowEqual(this.props, nextProps) ||
-        !shallowEqual(this.state, nextState) ||
-        !shallowEqual(this.context, nextContext)
-      )
-    }
-    componentDidUpdate (prevProps, prevState, prevContext) {
-      if (!deepEqual(prevProps.theme, this.props.theme) ||
-        !deepEqual(getThemeFromContext(prevContext), getThemeFromContext(this.context))) {
-        this._themeCache = null
-      }
+      componentDidUpdate(prevProps, prevState, prevContext) {
+        if (
+          !deepEqual(prevProps.theme, this.props.theme) ||
+          !deepEqual(
+            getThemeFromContext(prevContext),
+            getThemeFromContext(this.context)
+          )
+        ) {
+          this._themeCache = null
+        }
 
-      this.applyTheme()
-      if (super.componentDidUpdate) {
-        super.componentDidUpdate(prevProps, prevState, prevContext)
+        this.applyTheme()
+        if (super.componentDidUpdate) {
+          super.componentDidUpdate(prevProps, prevState, prevContext)
+        }
       }
-    }
-    applyTheme (DOMNode) {
-      if (isEmpty(this.theme)) {
-        return
+      applyTheme(DOMNode) {
+        if (isEmpty(this.theme)) {
+          return
+        }
+        const defaultTheme = generateThemeForContextKey()
+        applyVariablesToNode(
+          DOMNode || findDOMNode(this), // eslint-disable-line react/no-find-dom-node
+          this.theme,
+          defaultTheme,
+          componentId
+        )
       }
-      const defaultTheme = generateThemeForContextKey()
-      applyVariablesToNode(
-        DOMNode || findDOMNode(this), // eslint-disable-line react/no-find-dom-node
-        this.theme,
-        defaultTheme,
-        componentId
-      )
-    }
-    get scope () {
-      return `${componentId}__${this._instanceId}`
-    }
-    get theme () {
-      if (this._themeCache !== null) {
-        return this._themeCache
+      get scope() {
+        return `${componentId}__${this._instanceId}`
       }
-      const { immutable } = getContext(this.context)
-      let theme = getThemeFromContext(this.context)
+      get theme() {
+        if (this._themeCache !== null) {
+          return this._themeCache
+        }
+        const { immutable } = getContext(this.context)
+        let theme = getThemeFromContext(this.context)
 
-      if (this.props.theme && !isEmpty(this.props.theme)) {
-        if (!theme) {
-          theme = this.props.theme
-        } else if (immutable) {
-          warn(
-            false,
-            '[themeable] Parent theme is immutable. Cannot apply theme: %O',
-            this.props.theme
-          )
-        } else {
-          theme = isEmpty(theme)
-            ? this.props.theme
-            : Object.assign({}, theme, this.props.theme)
+        if (this.props.theme && !isEmpty(this.props.theme)) {
+          if (!theme) {
+            theme = this.props.theme
+          } else if (immutable) {
+            warn(
+              false,
+              '[themeable] Parent theme is immutable. Cannot apply theme: %O',
+              this.props.theme
+            )
+          } else {
+            theme = isEmpty(theme)
+              ? this.props.theme
+              : Object.assign({}, theme, this.props.theme)
+          }
         }
-      }
 
-      // If adapter is provided, pass any overrides
-      if (typeof adapter === 'function') {
-        theme = adapter({ theme, displayName })
+        // If adapter is provided, pass any overrides
+        if (typeof adapter === 'function') {
+          theme = adapter({ theme, displayName })
+        }
+
+        // pass in the component theme as overrides
+        this._themeCache = generateThemeForContextKey(null, theme)
+        return this._themeCache
       }
-
-      // pass in the component theme as overrides
-      this._themeCache = generateThemeForContextKey(null, theme)
-      return this._themeCache
     }
-  }
 
-  ThemeableComponent.componentId = componentId
-  ThemeableComponent.theme = contextKey
-  ThemeableComponent.contextTypes = Object.assign(
-    {},
-    ComposedComponent.contextTypes,
-    ThemeContext.types
-  )
-  ThemeableComponent.propTypes = Object.assign(
-    {},
-    ComposedComponent.propTypes,
-    { theme: PropTypes.object } // eslint-disable-line react/forbid-prop-types
-  )
-  ThemeableComponent.generateTheme = generateThemeForContextKey
+    ThemeableComponent.componentId = componentId
+    ThemeableComponent.theme = contextKey
+    ThemeableComponent.contextTypes = Object.assign(
+      {},
+      ComposedComponent.contextTypes,
+      ThemeContext.types
+    )
+    ThemeableComponent.propTypes = Object.assign(
+      {},
+      ComposedComponent.propTypes,
+      { theme: PropTypes.object } // eslint-disable-line react/forbid-prop-types
+    )
+    ThemeableComponent.generateTheme = generateThemeForContextKey
 
-  return ThemeableComponent
-})
+    return ThemeableComponent
+  }
+)
 
 /**
-* Utility to generate a theme for all themeable components that have been registered.
-* This theme can be applied using the [ApplyTheme](#ApplyTheme) component.
-*
-* @param {String} themeKey The theme to use (for global theme variables across components)
-* @param {Object} overrides theme variable overrides (usually for dynamic/user defined values)
-* @return {Object} A theme config to use with `<ApplyTheme />`
-*/
+ * Utility to generate a theme for all themeable components that have been registered.
+ * This theme can be applied using the [ApplyTheme](#ApplyTheme) component.
+ *
+ * @param {String} themeKey The theme to use (for global theme variables across components)
+ * @param {Object} overrides theme variable overrides (usually for dynamic/user defined values)
+ * @return {Object} A theme config to use with `<ApplyTheme />`
+ */
 themeable.generateTheme = generateTheme
@@ -269,0 +281,0 @@

src/ThemeablePropTypes.js

@@ -56,3 +56,3 @@ /*
 
-function shorthandPropType (validValues) {
+function shorthandPropType(validValues) {
   return function (props, propName, componentName, location) {
@@ -89,3 +89,5 @@ const propValue = props[propName]
         `Invalid ${location} \`${propName}\` \`${propValue}\` supplied to \`${componentName}\`, expected ` +
-          `between one and four of the following valid values: \`${validValues.join(', ')}\`.`
+          `between one and four of the following valid values: \`${validValues.join(
+            ', '
+          )}\`.`
       )
@@ -97,5 +99,2 @@ }
 export default ThemeablePropTypes
-export {
-  ThemeablePropTypes,
-  shorthandPropType
-}
+export { ThemeablePropTypes, shorthandPropType }

src/ThemeablePropValues.js

@@ -42,3 +42,3 @@ /*
   BORDER_WIDTHS: {
-    '0': '0',
+    0: '0',
     none: 'none',
@@ -51,3 +51,3 @@ small: 'small',
   BORDER_RADII: {
-    '0': '0',
+    0: '0',
     none: 'none',
@@ -76,3 +76,3 @@ small: 'small',
   SPACING: {
-    '0': '0',
+    0: '0',
     none: 'none',
@@ -79,0 +79,0 @@ auto: 'auto',

src/ThemeContext.js

@@ -51,7 +51,9 @@ /*
    */
-  makeThemeContext (theme, immutable) {
-    return {[CONTEXT_KEY]: {
-      theme,
-      immutable
-    }}
+  makeThemeContext(theme, immutable) {
+    return {
+      [CONTEXT_KEY]: {
+        theme,
+        immutable
+      }
+    }
   },
@@ -63,3 +65,3 @@
    */
-  getThemeContext (context) {
+  getThemeContext(context) {
     if (context) {
@@ -66,0 +68,0 @@ return context[CONTEXT_KEY]

src/ThemeRegistry.js

@@ -26,8 +26,8 @@ /*
 /**
-* ---
-* category: utilities/themes
-* ---
-* A global theme registry
-* @module ThemeRegistry
-*/
+ * ---
+ * category: utilities/themes
+ * ---
+ * A global theme registry
+ * @module ThemeRegistry
+ */
 import { error, warn } from '@instructure/console/macro'
@@ -57,3 +57,3 @@ import { mergeDeep, isEmpty } from '@instructure/ui-utils'
 
-function makeRegistry () {
+function makeRegistry() {
   return {
@@ -70,3 +70,3 @@ styleSheet: StyleSheet,
 
-function validateRegistry (registry) {
+function validateRegistry(registry) {
   const defaultRegistry = makeRegistry()
@@ -92,6 +92,6 @@
 /**
-* Get the global theme registry
-* @return {object} The theme registry
-*/
-function getRegistry () {
+ * Get the global theme registry
+ * @return {object} The theme registry
+ */
+function getRegistry() {
   return global[GLOBAL_THEME_REGISTRY]
@@ -101,5 +101,5 @@ }
 /**
-* Set the global theme registry
-*/
-function setRegistry (registry) {
+ * Set the global theme registry
+ */
+function setRegistry(registry) {
   global[GLOBAL_THEME_REGISTRY] = registry
@@ -109,5 +109,5 @@ }
 /**
-* Clear/reset the global theme registry
-*/
-function clearRegistry () {
+ * Clear/reset the global theme registry
+ */
+function clearRegistry() {
   setRegistry(makeRegistry())
@@ -117,16 +117,18 @@ }
 /**
-* Get the default theme key
-* @return {String} the default theme key
-*/
-function getDefaultThemeKey () {
+ * Get the default theme key
+ * @return {String} the default theme key
+ */
+function getDefaultThemeKey() {
   const { defaultThemeKey, registered } = getRegistry()
-  return defaultThemeKey || registered[registered.length - 1] || DEFAULT_THEME_KEY
+  return (
+    defaultThemeKey || registered[registered.length - 1] || DEFAULT_THEME_KEY
+  )
 }
 
 /**
-* Get the default theme key
-* @param {String} the default theme key
-* @param {Object} overrides for the theme variables
-*/
-function setDefaultTheme (themeKey, overrides) {
+ * Get the default theme key
+ * @param {String} the default theme key
+ * @param {Object} overrides for the theme variables
+ */
+function setDefaultTheme(themeKey, overrides) {
   const registry = getRegistry()
@@ -137,3 +139,6 @@ let theme = registry.themes[themeKey]
     if (themeKey !== DEFAULT_THEME_KEY) {
-      error(theme, `[themeable] Could not find theme: '${themeKey}' in the registry.`)
+      error(
+        theme,
+        `[themeable] Could not find theme: '${themeKey}' in the registry.`
+      )
     }
@@ -155,9 +160,3 @@ theme = {}
  */
-function makeTheme ({
-  key,
-  variables,
-  a11y,
-  immutable,
-  description
-}) {
+function makeTheme({ key, variables, a11y, immutable, description }) {
   const themeKey = key || uid()
@@ -167,7 +166,10 @@ return {
     immutable,
-    variables: {...variables},
+    variables: { ...variables },
     description,
     use: function ({ accessible, overrides } = {}) {
       if (accessible) {
-        warn(a11y && a11y.key, `[themeable] No accessible theme provided for ${themeKey}.`)
+        warn(
+          a11y && a11y.key,
+          `[themeable] No accessible theme provided for ${themeKey}.`
+        )
         if (a11y && a11y.key) {
@@ -183,3 +185,3 @@ setDefaultTheme(a11y.key)
 
-function registerTheme (theme) {
+function registerTheme(theme) {
   const registry = getRegistry()
@@ -199,3 +201,3 @@ let registeredTheme
 
-function getRegisteredTheme (themeKey, defaultTheme = {}) {
+function getRegisteredTheme(themeKey, defaultTheme = {}) {
   if (!themeKey) return defaultTheme
@@ -208,3 +210,6 @@
     if (themeKey !== DEFAULT_THEME_KEY) {
-      error(theme, `[themeable] Could not find theme: '${themeKey}' in the registry.`)
+      error(
+        theme,
+        `[themeable] Could not find theme: '${themeKey}' in the registry.`
+      )
     }
@@ -215,3 +220,3 @@ return defaultTheme
 
-function getVariablesWithOverrides (themeKey, overrides) {
+function getVariablesWithOverrides(themeKey, overrides) {
   const theme = getRegisteredTheme(themeKey)
@@ -224,3 +229,5 @@ const variables = theme.variables || {}
       false,
-      `[themeable] Theme, '${theme.key}', is immutable. Cannot apply overrides: ${JSON.stringify(overrides)}`
+      `[themeable] Theme, '${
+        theme.key
+      }', is immutable. Cannot apply overrides: ${JSON.stringify(overrides)}`
     )
@@ -231,3 +238,4 @@ return variables
   const variablesIsEmpty = isEmpty(variables)
-  if (!variablesIsEmpty && !overridesIsEmpty) return mergeDeep(variables, overrides)
+  if (!variablesIsEmpty && !overridesIsEmpty)
+    return mergeDeep(variables, overrides)
   if (variablesIsEmpty) return overrides || {}
@@ -238,9 +246,9 @@ return variables
 /**
-* Merge theme variables for 'themeKey' with the defaults (and overrides)
-* @private
-* @param {String} themeKey
-* @param {Object} variable Theme overrides
-* @return {Object} A merged variables object
-*/
-function mergeWithDefaultThemeVariables (themeKey, overrides) {
+ * Merge theme variables for 'themeKey' with the defaults (and overrides)
+ * @private
+ * @param {String} themeKey
+ * @param {Object} variable Theme overrides
+ * @return {Object} A merged variables object
+ */
+function mergeWithDefaultThemeVariables(themeKey, overrides) {
   let variables
@@ -250,3 +258,4 @@
     variables = getVariablesWithOverrides(themeKey, overrides)
-  } else { // fall back to defaults, but still apply overrides
+  } else {
+    // fall back to defaults, but still apply overrides
     const defaultOverrides = getRegistry().overrides
@@ -274,3 +283,3 @@ const defaultOverridesIsEmpty = isEmpty(defaultOverrides)
  */
-function makeComponentTheme (componentThemeFunction, themeKey) {
+function makeComponentTheme(componentThemeFunction, themeKey) {
   return function (variables) {
@@ -292,3 +301,3 @@ let theme = {}
     if (!isEmpty(defaultComponentTheme) && !isEmpty(theme)) {
-      theme = {...theme, ...defaultComponentTheme}
+      theme = { ...theme, ...defaultComponentTheme }
     } else if (isEmpty(theme)) {
@@ -303,8 +312,8 @@ theme = defaultComponentTheme
 /**
-* Register a component theme function
-*
-* @param {String} key The theme key for the component (e.g., [Link.theme])
-* @param {Function} componentThemeFunction The function to use for preparing this component's theme
-*/
-function registerComponentTheme (componentKey, componentThemeFunction) {
+ * Register a component theme function
+ *
+ * @param {String} key The theme key for the component (e.g., [Link.theme])
+ * @param {Function} componentThemeFunction The function to use for preparing this component's theme
+ */
+function registerComponentTheme(componentKey, componentThemeFunction) {
   const { components } = getRegistry()
@@ -319,11 +328,15 @@
   Object.keys(componentThemeFunction).forEach((themeKey) => {
-    if (!components.hasOwnProperty(themeKey)) { // eslint-disable-line no-prototype-builtins
+    // eslint-disable-next-line no-prototype-builtins
+    if (!components.hasOwnProperty(themeKey)) {
       components[themeKey] = {}
     }
 
-    components[themeKey][componentKey] = makeComponentTheme(componentThemeFunction, themeKey)
+    components[themeKey][componentKey] = makeComponentTheme(
+      componentThemeFunction,
+      themeKey
+    )
   })
 }
 
-function getRegisteredComponents (themeKey) {
+function getRegisteredComponents(themeKey) {
   const { components } = getRegistry()
@@ -339,22 +352,26 @@ const t = themeKey || getDefaultThemeKey()
 
-function getRegisteredComponent (themeKey, componentKey) {
+function getRegisteredComponent(themeKey, componentKey) {
   const { components } = getRegistry()
-  return (components[themeKey] && components[themeKey][componentKey]) ||
+  return (
+    (components[themeKey] && components[themeKey][componentKey]) ||
     components[DEFAULT_THEME_KEY][componentKey]
+  )
 }
 
 /**
-* Generate themes for all registered [@themeable](#themeable) components,
-* to be used by [`<ApplyTheme />`](#ApplyTheme).
-*
-* @param {String} themeKey The theme to use (for global theme variables across components)
-* @param {Object} overrides theme variable overrides (usually for user defined values)
-* @return {Object} A theme config to use with `<ApplyTheme />`
-*/
-function generateTheme (themeKey, overrides) {
+ * Generate themes for all registered [@themeable](#themeable) components,
+ * to be used by [`<ApplyTheme />`](#ApplyTheme).
+ *
+ * @param {String} themeKey The theme to use (for global theme variables across components)
+ * @param {Object} overrides theme variable overrides (usually for user defined values)
+ * @return {Object} A theme config to use with `<ApplyTheme />`
+ */
+function generateTheme(themeKey, overrides) {
   const registry = getRegistry()
 
-  error((registry.registered.length > 0), '[themeable] No themes have been registered. ' +
-    'Import a theme from @instructure/ui-themes or register a custom theme with registerTheme ' +
-    '(see @instructure/ui-themeable).'
+  error(
+    registry.registered.length > 0,
+    '[themeable] No themes have been registered. ' +
+      'Import a theme from @instructure/ui-themes or register a custom theme with registerTheme ' +
+      '(see @instructure/ui-themeable).'
   )
@@ -371,6 +388,5 @@
 
-  Object.getOwnPropertySymbols(components)
-    .forEach((componentKey) => {
-      theme[componentKey] = components[componentKey](variables)
-    })
+  Object.getOwnPropertySymbols(components).forEach((componentKey) => {
+    theme[componentKey] = components[componentKey](variables)
+  })
 
@@ -389,3 +405,3 @@ return theme
  */
-function generateComponentTheme (componentKey, themeKey, overrides) {
+function generateComponentTheme(componentKey, themeKey, overrides) {
   const t = themeKey || getDefaultThemeKey()
@@ -431,3 +447,5 @@ const theme = getRegisteredTheme(t)
       false,
-      `[themeable] Theme '${t}' is immutable. Cannot apply overrides for '${componentKey.toString()}': ${JSON.stringify(overrides)}`
+      `[themeable] Theme '${t}' is immutable. Cannot apply overrides for '${componentKey.toString()}': ${JSON.stringify(
+        overrides
+      )}`
     )
@@ -442,7 +460,7 @@ return componentTheme
 
-function getRegisteredThemes () {
+function getRegisteredThemes() {
   return getRegistry().themes
 }
 
-function mountComponentStyles (template, defaultTheme, componentId) {
+function mountComponentStyles(template, defaultTheme, componentId) {
   const { styleSheet } = getRegistry()
@@ -456,3 +474,3 @@
 
-function flushComponentStyles () {
+function flushComponentStyles() {
   const { styleSheet } = getRegistry()
@@ -459,0 +477,0 @@ styleSheet && styleSheet.flush()

src/transformCss.js

@@ -27,3 +27,3 @@ /*
 
-function transformCss (cssText, transform) {
+function transformCss(cssText, transform) {
   let node = parseCss(cssText)
@@ -38,7 +38,7 @@
 
-function isKeyframesSelector (rule) {
+function isKeyframesSelector(rule) {
   return rule.parent && rule.parent.type === ruleTypes.keyframes
 }
 
-function toRules (cssText) {
+function toRules(cssText) {
   const node = parseCss(cssText)
@@ -59,3 +59,3 @@ let rules = []
 
-function transformNode (node, transform) {
+function transformNode(node, transform) {
   if (!node) {
@@ -70,3 +70,3 @@ return
   const rules = node.rules || []
-  const transformed = {...node}
+  const transformed = { ...node }
 
@@ -78,3 +78,3 @@ transformed.rules = rules.map((rule) => transformNode(rule, transform))
 
-function toCssText (node, text) {
+function toCssText(node, text) {
   let cssText = ''
@@ -81,0 +81,0 @@ let result = text || ''

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

287373

increased by0.46%

Lines of code

6369

increased by1.27%

Dependency changes

• Updated@instructure/console@7.3.2-rc.4+434e75608

• Updated@instructure/ui-color-utils@7.3.2-rc.4+434e75608

• Updated@instructure/ui-decorator@7.3.2-rc.4+434e75608

• Updated@instructure/ui-dom-utils@7.3.2-rc.4+434e75608

• Updated@instructure/ui-react-utils@7.3.2-rc.4+434e75608

• Updated@instructure/ui-stylesheet@7.3.2-rc.4+434e75608

• Updated@instructure/ui-utils@7.3.2-rc.4+434e75608

• Updated@instructure/uid@7.3.2-rc.4+434e75608