@codecademy/gamut-styles 14.0.4 → 14.0.5-alpha.22d3ab.0

package/dist/ColorMode.d.ts

@@ -445,11 +445,7 @@ export declare const providerProps: import("@codecademy/variance/dist/types/conf
         readonly property: "borderRightStyle";
     };
     readonly borderStyleTop: {
-        readonly property: "borderTopStyle"; /** Serialize color variables for the current mode
-         * 1. If all variables are required add all mode variables to the current context
-         * 2. If the user has specified a background color - set that color to the current-bg
-         * 3. If not
-         */
+        readonly property: "borderTopStyle";
     };
     readonly borderStyleBottom: {
         readonly property: "borderBottomStyle";
@@ -869,11 +865,7 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
         readonly property: "borderRightStyle";
     }>;
     borderStyleTop?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderTopStyle"; /** Serialize color variables for the current mode
-         * 1. If all variables are required add all mode variables to the current context
-         * 2. If the user has specified a background color - set that color to the current-bg
-         * 3. If not
-         */
+        readonly property: "borderTopStyle";
     }>;
     borderStyleBottom?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "borderBottomStyle";
@@ -1271,11 +1263,7 @@ export declare const ColorMode: React.ForwardRefExoticComponent<Pick<Omit<{
         readonly property: "borderRightStyle";
     }>;
     borderStyleTop?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "borderTopStyle"; /** Serialize color variables for the current mode
-         * 1. If all variables are required add all mode variables to the current context
-         * 2. If the user has specified a background color - set that color to the current-bg
-         * 3. If not
-         */
+        readonly property: "borderTopStyle";
     }>;
     borderStyleBottom?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "borderBottomStyle";

package/dist/ColorMode.js

@@ -16,12 +16,18 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import { serializeTokens, variance } from '@codecademy/variance';
 import { ThemeProvider, useTheme } from '@emotion/react';
 import { mapValues, pick } from 'lodash';
-import React, { forwardRef, useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, useContext, useEffect, useMemo, useState } from 'react';
 import { background, border, color, css, flex, grid, layout, positioning, space } from './variance/props';
 import { styledOptions } from './variance/utils';
 export var providerProps = variance.compose(layout, color, grid, flex, positioning, space, border, background);
@@ -34,13 +40,27 @@ export var modeColorProps = function modeColorProps(_ref) {
     return colors[color];
   }), 'color', theme).variables;
 };
+var BackgroundCurrentContext = /*#__PURE__*/React.createContext({
+  'background-current': undefined
+});
 export function useColorModes() {
+  var bgCurrent = useContext(BackgroundCurrentContext);
+
   var _ref2 = useTheme() || {},
       mode = _ref2.mode,
       modes = _ref2.modes,
       getColorValue = _ref2._getColorValue;
 
-  return [mode, modes === null || modes === void 0 ? void 0 : modes[mode], modes, getColorValue];
+  var modesCopy = _objectSpread({}, modes);
+
+  if (bgCurrent['background-current'] && modesCopy[mode]['background-current'] !== bgCurrent['background-current']) {
+    /* sets the color to the copy of our modes object, and casts the type as the default color values for background-current.
+    we could potentially alter the Merge type utility function from createTheme, but since 'background-current' is the only exception to the type-merging rule  and this is the only place we override, this seems to be a more straightforward + lower-risk solution.
+    */
+    modesCopy[mode]['background-current'] = bgCurrent['background-current'];
+  }
+
+  return [mode, modesCopy === null || modesCopy === void 0 ? void 0 : modesCopy[mode], modes, getColorValue];
 }
 export function useCurrentMode(mode) {
   var _useColorModes = useColorModes(),
@@ -82,7 +102,7 @@ export var VariableProvider = /*#__PURE__*/_styled('div', _extends({}, {
   return variables;
 }, css({
   textColor: 'text'
-}), providerProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9Db2xvck1vZGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVHZ0MiLCJmaWxlIjoiLi4vc3JjL0NvbG9yTW9kZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBzZXJpYWxpemVUb2tlbnMsXG4gIFN0eWxlUHJvcHMsXG4gIFRoZW1lUHJvcHMsXG4gIHZhcmlhbmNlLFxufSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgeyBDU1NPYmplY3QsIFRoZW1lLCBUaGVtZVByb3ZpZGVyLCB1c2VUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IG1hcFZhbHVlcywgcGljayB9IGZyb20gJ2xvZGFzaCc7XG5pbXBvcnQgUmVhY3QsIHtcbiAgQ29tcG9uZW50UHJvcHMsXG4gIGZvcndhcmRSZWYsXG4gIHVzZUVmZmVjdCxcbiAgdXNlTWVtbyxcbiAgdXNlU3RhdGUsXG59IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgYmFja2dyb3VuZCxcbiAgYm9yZGVyLFxuICBjb2xvcixcbiAgY3NzLFxuICBmbGV4LFxuICBncmlkLFxuICBsYXlvdXQsXG4gIHBvc2l0aW9uaW5nLFxuICBzcGFjZSxcbn0gZnJvbSAnLi92YXJpYW5jZS9wcm9wcyc7XG5pbXBvcnQgeyBzdHlsZWRPcHRpb25zIH0gZnJvbSAnLi92YXJpYW5jZS91dGlscyc7XG5cbmV4cG9ydCB0eXBlIENvbG9ycyA9IGtleW9mIFRoZW1lWydjb2xvcnMnXTtcbmV4cG9ydCB0eXBlIENvbG9yTW9kZUNvbmZpZyA9IFRoZW1lWydtb2RlcyddO1xuZXhwb3J0IHR5cGUgQ29sb3JNb2RlcyA9IGtleW9mIENvbG9yTW9kZUNvbmZpZztcbmV4cG9ydCB0eXBlIENvbG9yTW9kZVNoYXBlID0gQ29sb3JNb2RlQ29uZmlnW0NvbG9yTW9kZXNdO1xuZXhwb3J0IHR5cGUgQ29sb3JBbGlhcyA9IGtleW9mIENvbG9yTW9kZVNoYXBlO1xuXG5leHBvcnQgdHlwZSBDb2xvck1vZGVQcm9wcyA9IHtcbiAgbW9kZTogQ29sb3JNb2RlcyB8ICdzeXN0ZW0nO1xuICBiZz86IENvbG9ycztcbn07XG5cbmV4cG9ydCBjb25zdCBwcm92aWRlclByb3BzID0gdmFyaWFuY2UuY29tcG9zZShcbiAgbGF5b3V0LFxuICBjb2xvcixcbiAgZ3JpZCxcbiAgZmxleCxcbiAgcG9zaXRpb25pbmcsXG4gIHNwYWNlLFxuICBib3JkZXIsXG4gIGJhY2tncm91bmRcbik7XG5cbmV4cG9ydCBjb25zdCBtb2RlQ29sb3JQcm9wcyA9ICh7XG4gIHRoZW1lLFxuICBtb2RlLFxufTogVGhlbWVQcm9wczx7IG1vZGU/OiBDb2xvck1vZGVzIH0+KSA9PiB7XG4gIGlmICghdGhlbWUgfHwgIW1vZGUgfHwgbW9kZSA9PT0gdGhlbWU/Lm1vZGUpIHJldHVybiB7fTtcbiAgY29uc3QgeyBjb2xvcnMgfSA9IHRoZW1lO1xuICByZXR1cm4gc2VyaWFsaXplVG9rZW5zKFxuICAgIG1hcFZhbHVlcyh0aGVtZT8ubW9kZXNbbW9kZV0sIChjb2xvcikgPT4gY29sb3JzW2NvbG9yXSksXG4gICAgJ2NvbG9yJyxcbiAgICB0aGVtZVxuICApLnZhcmlhYmxlcztcbn07XG5cbmV4cG9ydCBmdW5jdGlvbiB1c2VDb2xvck1vZGVzKCk6IFtcbiAgQ29sb3JNb2RlcyxcbiAgQ29sb3JNb2RlU2hhcGUsXG4gIENvbG9yTW9kZUNvbmZpZyxcbiAgKGNvbG9yOiBDb2xvcnMpID0+IHN0cmluZ1xuXSB7XG4gIGNvbnN0IHsgbW9kZSwgbW9kZXMsIF9nZXRDb2xvclZhbHVlOiBnZXRDb2xvclZhbHVlIH0gPSB1c2VUaGVtZSgpIHx8IHt9O1xuICByZXR1cm4gW21vZGUsIG1vZGVzPy5bbW9kZV0sIG1vZGVzLCBnZXRDb2xvclZhbHVlXTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUN1cnJlbnRNb2RlKG1vZGU/OiBDb2xvck1vZGVzKSB7XG4gIGNvbnN0IFthY3RpdmVNb2RlXSA9IHVzZUNvbG9yTW9kZXMoKTtcbiAgcmV0dXJuIG1vZGUgPz8gYWN0aXZlTW9kZTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHVzZVByZWZlcnNEYXJrTW9kZSgpIHtcbiAgY29uc3QgW3ByZWZlcnNEYXJrTW9kZSwgc2V0UHJlZmVyc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGZ1bmN0aW9uIG9uQ2hhbmdlKGV2ZW50OiBNZWRpYVF1ZXJ5TGlzdEV2ZW50KSB7XG4gICAgICBzZXRQcmVmZXJzRGFya01vZGUoZXZlbnQubWF0Y2hlcyk7XG4gICAgfVxuXG4gICAgaWYgKHdpbmRvdyAmJiAnbWF0Y2hNZWRpYScgaW4gd2luZG93KSB7XG4gICAgICBjb25zdCBtcSA9IHdpbmRvdy5tYXRjaE1lZGlhKCcocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspJyk7XG5cbiAgICAgIGlmIChtcSAmJiAnYWRkRXZlbnRMaXN0ZW5lcicgaW4gbXEpIHtcbiAgICAgICAgc2V0UHJlZmVyc0RhcmtNb2RlKG1xLm1hdGNoZXMpO1xuICAgICAgICBtcS5hZGRFdmVudExpc3RlbmVyKCdjaGFuZ2UnLCBvbkNoYW5nZSk7XG5cbiAgICAgICAgcmV0dXJuICgpID0+IG1xLnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NoYW5nZScsIG9uQ2hhbmdlKTtcbiAgICAgIH1cbiAgICB9XG4gIH0sIFtdKTtcblxuICByZXR1cm4gcHJlZmVyc0RhcmtNb2RlO1xufVxuXG5leHBvcnQgY29uc3QgVmFyaWFibGVQcm92aWRlciA9IHN0eWxlZChcbiAgJ2RpdicsXG4gIHN0eWxlZE9wdGlvbnMoWyd2YXJpYWJsZXMnLCAnYWx3YXlzU2V0VmFyaWFibGVzJ10pXG4pPFxuICBTdHlsZVByb3BzPHR5cGVvZiBwcm92aWRlclByb3BzPiAmIHtcbiAgICB2YXJpYWJsZXM/OiBDU1NPYmplY3Q7XG4gICAgYWx3YXlzU2V0VmFyaWFibGVzPzogYm9vbGVhbjtcbiAgfVxuPigoeyB2YXJpYWJsZXMgfSkgPT4gdmFyaWFibGVzLCBjc3MoeyB0ZXh0Q29sb3I6ICd0ZXh0JyB9KSwgcHJvdmlkZXJQcm9wcyk7XG5cbmV4cG9ydCBjb25zdCBDb2xvck1vZGUgPSBmb3J3YXJkUmVmPFxuICBIVE1MRGl2RWxlbWVudCxcbiAgT21pdDxDb21wb25lbnRQcm9wczx0eXBlb2YgVmFyaWFibGVQcm92aWRlcj4sICdiZyc+ICYgQ29sb3JNb2RlUHJvcHNcbj4oKHsgbW9kZTogcHJlZmVyZW5jZSwgYWx3YXlzU2V0VmFyaWFibGVzLCBiZywgLi4ucmVzdCB9LCByZWYpID0+IHtcbiAgLy8gY2hlY2tzIGlmIHRoZSB1c2VyIGhhcyBzZXQgJ3N5c3RlbScgYXMgdGhlaXIgY29sb3IgbW9kZSBwcmVmZXJlbmNlXG4gIC8vIHRoZW4gc2V0cyB0aGUgY29sb3IgbW9kZVxuICBjb25zdCBwcmVmZXJzRGFya01vZGUgPSB1c2VQcmVmZXJzRGFya01vZGUoKTtcbiAgY29uc3QgbW9kZSA9XG4gICAgcHJlZmVyZW5jZSA9PT0gJ3N5c3RlbScgPyAocHJlZmVyc0RhcmtNb2RlID8gJ2RhcmsnIDogJ2xpZ2h0JykgOiBwcmVmZXJlbmNlO1xuXG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgY29uc3QgeyBtb2RlcywgbW9kZTogYWN0aXZlLCBjb2xvcnMgfSA9IHRoZW1lO1xuICBjb25zdCBjb250ZXh0QmcgPSBiZyA/ICdiYWNrZ3JvdW5kLWN1cnJlbnQnIDogdW5kZWZpbmVkO1xuXG4gIC8qKiBTZXJpYWxpemUgY29sb3IgdmFyaWFibGVzIGZvciB0aGUgY3VycmVudCBtb2RlXG4gICAqIDEuIElmIGFsbCB2YXJpYWJsZXMgYXJlIHJlcXVpcmVkIGFkZCBhbGwgbW9kZSB2YXJpYWJsZXMgdG8gdGhlIGN1cnJlbnQgY29udGV4dFxuICAgKiAyLiBJZiB0aGUgdXNlciBoYXMgc3BlY2lmaWVkIGEgYmFja2dyb3VuZCBjb2xvciAtIHNldCB0aGF0IGNvbG9yIHRvIHRoZSBjdXJyZW50LWJnXG4gICAqIDMuIElmIG5vdFxuICAgKi9cbiAgY29uc3QgeyB2YXJpYWJsZXMgfSA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIHJldHVybiBzZXJpYWxpemVUb2tlbnMoXG4gICAgICBtYXBWYWx1ZXMobW9kZXNbbW9kZV0sIChjb2xvciwga2V5KSA9PiB7XG4gICAgICAgIGlmIChrZXkgPT09ICdiYWNrZ3JvdW5kLWN1cnJlbnQnICYmIHR5cGVvZiBiZyAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgICAgICByZXR1cm4gY29sb3JzW2JnXTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gY29sb3JzW2NvbG9yXTtcbiAgICAgIH0pLFxuICAgICAgJ2NvbG9yJyxcbiAgICAgIHRoZW1lXG4gICAgKTtcbiAgfSwgW2NvbG9ycywgbW9kZSwgbW9kZXMsIHRoZW1lLCBiZ10pO1xuXG4gIGlmIChhY3RpdmUgPT09IG1vZGUpIHtcbiAgICBjb25zdCB2YXJzID0gYWx3YXlzU2V0VmFyaWFibGVzXG4gICAgICA/IHZhcmlhYmxlc1xuICAgICAgOiBwaWNrKHZhcmlhYmxlcywgWyctLWNvbG9yLWJhY2tncm91bmQtY3VycmVudCddKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8VmFyaWFibGVQcm92aWRlciB7Li4ucmVzdH0gdmFyaWFibGVzPXt2YXJzfSBiZz17Y29udGV4dEJnfSByZWY9e3JlZn0gLz5cbiAgICApO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8VGhlbWVQcm92aWRlciB0aGVtZT17eyBtb2RlIH19PlxuICAgICAgPFZhcmlhYmxlUHJvdmlkZXJcbiAgICAgICAgey4uLnJlc3R9XG4gICAgICAgIHZhcmlhYmxlcz17dmFyaWFibGVzfVxuICAgICAgICBiZz17Y29udGV4dEJnfVxuICAgICAgICByZWY9e3JlZn1cbiAgICAgIC8+XG4gICAgPC9UaGVtZVByb3ZpZGVyPlxuICApO1xufSk7XG4iXX0= */");
+}), providerProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9Db2xvck1vZGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1JZ0MiLCJmaWxlIjoiLi4vc3JjL0NvbG9yTW9kZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBzZXJpYWxpemVUb2tlbnMsXG4gIFN0eWxlUHJvcHMsXG4gIFRoZW1lUHJvcHMsXG4gIHZhcmlhbmNlLFxufSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgeyBDU1NPYmplY3QsIFRoZW1lLCBUaGVtZVByb3ZpZGVyLCB1c2VUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IG1hcFZhbHVlcywgcGljayB9IGZyb20gJ2xvZGFzaCc7XG5pbXBvcnQgUmVhY3QsIHtcbiAgQ29tcG9uZW50UHJvcHMsXG4gIGZvcndhcmRSZWYsXG4gIHVzZUNvbnRleHQsXG4gIHVzZUVmZmVjdCxcbiAgdXNlTWVtbyxcbiAgdXNlU3RhdGUsXG59IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgdGhlbWUgYXMgR2FtdXRUaGVtZSB9IGZyb20gJy4nO1xuaW1wb3J0IHtcbiAgYmFja2dyb3VuZCxcbiAgYm9yZGVyLFxuICBjb2xvcixcbiAgY3NzLFxuICBmbGV4LFxuICBncmlkLFxuICBsYXlvdXQsXG4gIHBvc2l0aW9uaW5nLFxuICBzcGFjZSxcbn0gZnJvbSAnLi92YXJpYW5jZS9wcm9wcyc7XG5pbXBvcnQgeyBzdHlsZWRPcHRpb25zIH0gZnJvbSAnLi92YXJpYW5jZS91dGlscyc7XG5cbmV4cG9ydCB0eXBlIENvbG9ycyA9IGtleW9mIFRoZW1lWydjb2xvcnMnXTtcbmV4cG9ydCB0eXBlIENvbG9yTW9kZUNvbmZpZyA9IFRoZW1lWydtb2RlcyddO1xuZXhwb3J0IHR5cGUgQ29sb3JNb2RlcyA9IGtleW9mIENvbG9yTW9kZUNvbmZpZztcbmV4cG9ydCB0eXBlIENvbG9yTW9kZVNoYXBlID0gQ29sb3JNb2RlQ29uZmlnW0NvbG9yTW9kZXNdO1xuZXhwb3J0IHR5cGUgQ29sb3JBbGlhcyA9IGtleW9mIENvbG9yTW9kZVNoYXBlO1xuXG5leHBvcnQgdHlwZSBDb2xvck1vZGVQcm9wcyA9IHtcbiAgbW9kZTogQ29sb3JNb2RlcyB8ICdzeXN0ZW0nO1xuICBiZz86IENvbG9ycztcbn07XG5cbmV4cG9ydCBjb25zdCBwcm92aWRlclByb3BzID0gdmFyaWFuY2UuY29tcG9zZShcbiAgbGF5b3V0LFxuICBjb2xvcixcbiAgZ3JpZCxcbiAgZmxleCxcbiAgcG9zaXRpb25pbmcsXG4gIHNwYWNlLFxuICBib3JkZXIsXG4gIGJhY2tncm91bmRcbik7XG5cbmV4cG9ydCBjb25zdCBtb2RlQ29sb3JQcm9wcyA9ICh7XG4gIHRoZW1lLFxuICBtb2RlLFxufTogVGhlbWVQcm9wczx7IG1vZGU/OiBDb2xvck1vZGVzIH0+KSA9PiB7XG4gIGlmICghdGhlbWUgfHwgIW1vZGUgfHwgbW9kZSA9PT0gdGhlbWU/Lm1vZGUpIHJldHVybiB7fTtcbiAgY29uc3QgeyBjb2xvcnMgfSA9IHRoZW1lO1xuICByZXR1cm4gc2VyaWFsaXplVG9rZW5zKFxuICAgIG1hcFZhbHVlcyh0aGVtZT8ubW9kZXNbbW9kZV0sIChjb2xvcikgPT4gY29sb3JzW2NvbG9yXSksXG4gICAgJ2NvbG9yJyxcbiAgICB0aGVtZVxuICApLnZhcmlhYmxlcztcbn07XG5cbmludGVyZmFjZSBCYWNrZ3JvdW5kQ3VycmVudENvbnRleHRJbnRlcmZhY2Uge1xuICAnYmFja2dyb3VuZC1jdXJyZW50Jz86IGtleW9mIHR5cGVvZiBHYW11dFRoZW1lLmNvbG9ycztcbn1cblxuY29uc3QgQmFja2dyb3VuZEN1cnJlbnRDb250ZXh0ID0gUmVhY3QuY3JlYXRlQ29udGV4dDxCYWNrZ3JvdW5kQ3VycmVudENvbnRleHRJbnRlcmZhY2U+KFxuICB7XG4gICAgJ2JhY2tncm91bmQtY3VycmVudCc6IHVuZGVmaW5lZCxcbiAgfVxuKTtcblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUNvbG9yTW9kZXMoKTogW1xuICBDb2xvck1vZGVzLFxuICBDb2xvck1vZGVTaGFwZSxcbiAgQ29sb3JNb2RlQ29uZmlnLFxuICAoY29sb3I6IENvbG9ycykgPT4gc3RyaW5nXG5dIHtcbiAgY29uc3QgYmdDdXJyZW50ID0gdXNlQ29udGV4dChCYWNrZ3JvdW5kQ3VycmVudENvbnRleHQpO1xuICBjb25zdCB7IG1vZGUsIG1vZGVzLCBfZ2V0Q29sb3JWYWx1ZTogZ2V0Q29sb3JWYWx1ZSB9ID0gdXNlVGhlbWUoKSB8fCB7fTtcbiAgY29uc3QgbW9kZXNDb3B5ID0geyAuLi5tb2RlcyB9O1xuXG4gIGlmIChcbiAgICBiZ0N1cnJlbnRbJ2JhY2tncm91bmQtY3VycmVudCddICYmXG4gICAgbW9kZXNDb3B5W21vZGVdWydiYWNrZ3JvdW5kLWN1cnJlbnQnXSAhPT0gYmdDdXJyZW50WydiYWNrZ3JvdW5kLWN1cnJlbnQnXVxuICApIHtcbiAgICAvKiBzZXRzIHRoZSBjb2xvciB0byB0aGUgY29weSBvZiBvdXIgbW9kZXMgb2JqZWN0LCBhbmQgY2FzdHMgdGhlIHR5cGUgYXMgdGhlIGRlZmF1bHQgY29sb3IgdmFsdWVzIGZvciBiYWNrZ3JvdW5kLWN1cnJlbnQuXG4gICAgd2UgY291bGQgcG90ZW50aWFsbHkgYWx0ZXIgdGhlIE1lcmdlIHR5cGUgdXRpbGl0eSBmdW5jdGlvbiBmcm9tIGNyZWF0ZVRoZW1lLCBidXQgc2luY2UgJ2JhY2tncm91bmQtY3VycmVudCcgaXMgdGhlIG9ubHkgZXhjZXB0aW9uIHRvIHRoZSB0eXBlLW1lcmdpbmcgcnVsZSAgYW5kIHRoaXMgaXMgdGhlIG9ubHkgcGxhY2Ugd2Ugb3ZlcnJpZGUsIHRoaXMgc2VlbXMgdG8gYmUgYSBtb3JlIHN0cmFpZ2h0Zm9yd2FyZCArIGxvd2VyLXJpc2sgc29sdXRpb24uXG4gICAgKi9cblxuICAgIG1vZGVzQ29weVttb2RlXVsnYmFja2dyb3VuZC1jdXJyZW50J10gPSBiZ0N1cnJlbnRbJ2JhY2tncm91bmQtY3VycmVudCddIGFzXG4gICAgICB8ICd3aGl0ZSdcbiAgICAgIHwgJ25hdnktODAwJztcbiAgfVxuXG4gIHJldHVybiBbbW9kZSwgbW9kZXNDb3B5Py5bbW9kZV0sIG1vZGVzLCBnZXRDb2xvclZhbHVlXTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUN1cnJlbnRNb2RlKG1vZGU/OiBDb2xvck1vZGVzKSB7XG4gIGNvbnN0IFthY3RpdmVNb2RlXSA9IHVzZUNvbG9yTW9kZXMoKTtcbiAgcmV0dXJuIG1vZGUgPz8gYWN0aXZlTW9kZTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHVzZVByZWZlcnNEYXJrTW9kZSgpIHtcbiAgY29uc3QgW3ByZWZlcnNEYXJrTW9kZSwgc2V0UHJlZmVyc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGZ1bmN0aW9uIG9uQ2hhbmdlKGV2ZW50OiBNZWRpYVF1ZXJ5TGlzdEV2ZW50KSB7XG4gICAgICBzZXRQcmVmZXJzRGFya01vZGUoZXZlbnQubWF0Y2hlcyk7XG4gICAgfVxuXG4gICAgaWYgKHdpbmRvdyAmJiAnbWF0Y2hNZWRpYScgaW4gd2luZG93KSB7XG4gICAgICBjb25zdCBtcSA9IHdpbmRvdy5tYXRjaE1lZGlhKCcocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspJyk7XG5cbiAgICAgIGlmIChtcSAmJiAnYWRkRXZlbnRMaXN0ZW5lcicgaW4gbXEpIHtcbiAgICAgICAgc2V0UHJlZmVyc0RhcmtNb2RlKG1xLm1hdGNoZXMpO1xuICAgICAgICBtcS5hZGRFdmVudExpc3RlbmVyKCdjaGFuZ2UnLCBvbkNoYW5nZSk7XG5cbiAgICAgICAgcmV0dXJuICgpID0+IG1xLnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NoYW5nZScsIG9uQ2hhbmdlKTtcbiAgICAgIH1cbiAgICB9XG4gIH0sIFtdKTtcblxuICByZXR1cm4gcHJlZmVyc0RhcmtNb2RlO1xufVxuXG5leHBvcnQgY29uc3QgVmFyaWFibGVQcm92aWRlciA9IHN0eWxlZChcbiAgJ2RpdicsXG4gIHN0eWxlZE9wdGlvbnMoWyd2YXJpYWJsZXMnLCAnYWx3YXlzU2V0VmFyaWFibGVzJ10pXG4pPFxuICBTdHlsZVByb3BzPHR5cGVvZiBwcm92aWRlclByb3BzPiAmIHtcbiAgICB2YXJpYWJsZXM/OiBDU1NPYmplY3Q7XG4gICAgYWx3YXlzU2V0VmFyaWFibGVzPzogYm9vbGVhbjtcbiAgfVxuPigoeyB2YXJpYWJsZXMgfSkgPT4gdmFyaWFibGVzLCBjc3MoeyB0ZXh0Q29sb3I6ICd0ZXh0JyB9KSwgcHJvdmlkZXJQcm9wcyk7XG5cbmV4cG9ydCBjb25zdCBDb2xvck1vZGUgPSBmb3J3YXJkUmVmPFxuICBIVE1MRGl2RWxlbWVudCxcbiAgT21pdDxDb21wb25lbnRQcm9wczx0eXBlb2YgVmFyaWFibGVQcm92aWRlcj4sICdiZyc+ICYgQ29sb3JNb2RlUHJvcHNcbj4oKHsgbW9kZTogcHJlZmVyZW5jZSwgYWx3YXlzU2V0VmFyaWFibGVzLCBiZywgLi4ucmVzdCB9LCByZWYpID0+IHtcbiAgLy8gY2hlY2tzIGlmIHRoZSB1c2VyIGhhcyBzZXQgJ3N5c3RlbScgYXMgdGhlaXIgY29sb3IgbW9kZSBwcmVmZXJlbmNlXG4gIC8vIHRoZW4gc2V0cyB0aGUgY29sb3IgbW9kZVxuICBjb25zdCBwcmVmZXJzRGFya01vZGUgPSB1c2VQcmVmZXJzRGFya01vZGUoKTtcbiAgY29uc3QgbW9kZSA9XG4gICAgcHJlZmVyZW5jZSA9PT0gJ3N5c3RlbScgPyAocHJlZmVyc0RhcmtNb2RlID8gJ2RhcmsnIDogJ2xpZ2h0JykgOiBwcmVmZXJlbmNlO1xuXG4gIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgY29uc3QgeyBtb2RlcywgbW9kZTogYWN0aXZlLCBjb2xvcnMgfSA9IHRoZW1lO1xuICBjb25zdCBjb250ZXh0QmcgPSBiZyA/ICdiYWNrZ3JvdW5kLWN1cnJlbnQnIDogdW5kZWZpbmVkO1xuXG4gIC8qKiBTZXJpYWxpemUgY29sb3IgdmFyaWFibGVzIGZvciB0aGUgY3VycmVudCBtb2RlXG4gICAqIDEuIElmIGFsbCB2YXJpYWJsZXMgYXJlIHJlcXVpcmVkIGFkZCBhbGwgbW9kZSB2YXJpYWJsZXMgdG8gdGhlIGN1cnJlbnQgY29udGV4dFxuICAgKiAyLiBJZiB0aGUgdXNlciBoYXMgc3BlY2lmaWVkIGEgYmFja2dyb3VuZCBjb2xvciAtIHNldCB0aGF0IGNvbG9yIHRvIHRoZSBjdXJyZW50LWJnXG4gICAqIDMuIElmIG5vdFxuICAgKi9cbiAgY29uc3QgeyB2YXJpYWJsZXMgfSA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIHJldHVybiBzZXJpYWxpemVUb2tlbnMoXG4gICAgICBtYXBWYWx1ZXMobW9kZXNbbW9kZV0sIChjb2xvciwga2V5KSA9PiB7XG4gICAgICAgIGlmIChrZXkgPT09ICdiYWNrZ3JvdW5kLWN1cnJlbnQnICYmIHR5cGVvZiBiZyAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgICAgICByZXR1cm4gY29sb3JzW2JnXTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gY29sb3JzW2NvbG9yXTtcbiAgICAgIH0pLFxuICAgICAgJ2NvbG9yJyxcbiAgICAgIHRoZW1lXG4gICAgKTtcbiAgfSwgW2NvbG9ycywgbW9kZSwgbW9kZXMsIHRoZW1lLCBiZ10pO1xuXG4gIGlmIChhY3RpdmUgPT09IG1vZGUpIHtcbiAgICBjb25zdCB2YXJzID0gYWx3YXlzU2V0VmFyaWFibGVzXG4gICAgICA/IHZhcmlhYmxlc1xuICAgICAgOiBwaWNrKHZhcmlhYmxlcywgWyctLWNvbG9yLWJhY2tncm91bmQtY3VycmVudCddKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8QmFja2dyb3VuZEN1cnJlbnRDb250ZXh0LlByb3ZpZGVyIHZhbHVlPXt7ICdiYWNrZ3JvdW5kLWN1cnJlbnQnOiBiZyB9fT5cbiAgICAgICAgPFZhcmlhYmxlUHJvdmlkZXIgey4uLnJlc3R9IHZhcmlhYmxlcz17dmFyc30gYmc9e2NvbnRleHRCZ30gcmVmPXtyZWZ9IC8+XG4gICAgICA8L0JhY2tncm91bmRDdXJyZW50Q29udGV4dC5Qcm92aWRlcj5cbiAgICApO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8VGhlbWVQcm92aWRlciB0aGVtZT17eyBtb2RlIH19PlxuICAgICAgPFZhcmlhYmxlUHJvdmlkZXJcbiAgICAgICAgey4uLnJlc3R9XG4gICAgICAgIHZhcmlhYmxlcz17dmFyaWFibGVzfVxuICAgICAgICBiZz17Y29udGV4dEJnfVxuICAgICAgICByZWY9e3JlZn1cbiAgICAgIC8+XG4gICAgPC9UaGVtZVByb3ZpZGVyPlxuICApO1xufSk7XG4iXX0= */");
 export var ColorMode = /*#__PURE__*/forwardRef(function ColorMode(_ref4, ref) {
   var preference = _ref4.mode,
       alwaysSetVariables = _ref4.alwaysSetVariables,
@@ -117,11 +137,15 @@ export var ColorMode = /*#__PURE__*/forwardRef(function ColorMode(_ref4, ref) {
 
   if (active === mode) {
     var vars = alwaysSetVariables ? variables : pick(variables, ['--color-background-current']);
-    return /*#__PURE__*/React.createElement(VariableProvider, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement(BackgroundCurrentContext.Provider, {
+      value: {
+        'background-current': bg
+      }
+    }, /*#__PURE__*/React.createElement(VariableProvider, _extends({}, rest, {
       variables: vars,
       bg: contextBg,
       ref: ref
-    }));
+    })));
   }
 
   return /*#__PURE__*/React.createElement(ThemeProvider, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "14.0.4",
+  "version": "14.0.5-alpha.22d3ab.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6c042b2648c2e3b83a3355ba66f061cade52e96e"
+  "gitHead": "40694443e83f6625ab3e38ef01d0caa3f784db5c"
 }