@codecademy/gamut-styles 14.0.1 → 14.0.2-alpha.0e532d.0

package/dist/__tests__/Background.test.js

@@ -0,0 +1,94 @@
+import { matchers } from '@emotion/jest';
+import { ThemeProvider, useTheme } from '@emotion/react';
+import { setupRtl as setupRtlBase } from 'component-test-setup';
+import { overArgs } from 'lodash';
+import React from 'react';
+import { Background } from '../Background';
+import { coreTheme as theme } from '../themes';
+expect.extend(matchers);
+
+function withThemeProvider(WrappedComponent) {
+  var WithBoundaryComponent = function WithBoundaryComponent(props) {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(WrappedComponent, props));
+  };
+
+  return WithBoundaryComponent;
+}
+
+var setupRtl = overArgs(setupRtlBase, withThemeProvider);
+var renderView = setupRtl(Background, {
+  children: /*#__PURE__*/React.createElement("div", {
+    "data-testid": "content"
+  })
+});
+
+var ActiveMode = function ActiveMode() {
+  var _useTheme = useTheme(),
+      mode = _useTheme.mode;
+
+  return /*#__PURE__*/React.createElement("div", null, mode);
+};
+
+describe('Background', function () {
+  it('switches the default colormode when contrast standards are not met', function () {
+    var _renderView = renderView({
+      bg: 'navy'
+    }),
+        view = _renderView.view;
+
+    expect(view.getByTestId('content').parentElement).toHaveStyleRule('--color-background-current', theme.colors.navy);
+    expect(view.getByTestId('content').parentElement).toHaveStyleRule('background-color', theme.colors['background-current']);
+  });
+  it('allows for changing the color mode while nested', function () {
+    var _renderView2 = renderView({
+      bg: 'navy',
+      children: /*#__PURE__*/React.createElement("div", {
+        "data-testid": "content"
+      }, /*#__PURE__*/React.createElement(Background, {
+        bg: "beige"
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": "nested-content"
+      })))
+    }),
+        view = _renderView2.view;
+
+    expect(view.getByTestId('content').parentElement).toHaveStyleRule('--color-background-current', theme.colors.navy);
+    expect(view.getByTestId('nested-content').parentElement).toHaveStyleRule('--color-background-current', theme.colors.beige);
+  });
+  it('updates the theme context to the current mode', function () {
+    var _renderView3 = renderView({
+      bg: 'navy',
+      children: /*#__PURE__*/React.createElement(ActiveMode, null)
+    }),
+        view = _renderView3.view;
+
+    view.getByText('dark');
+  });
+  it('does not update the theme context when the color mode has not changed', function () {
+    var _renderView4 = renderView({
+      bg: 'white',
+      children: /*#__PURE__*/React.createElement(ActiveMode, null)
+    }),
+        view = _renderView4.view;
+
+    view.getByText('light');
+  });
+  it('it sets the current background color to the specified bg', function () {
+    var _renderView5 = renderView({
+      bg: 'paleBlue'
+    }),
+        view = _renderView5.view;
+
+    expect(view.getByTestId('content').parentElement).toHaveStyleRule('--color-background-current', theme.colors.paleBlue);
+  });
+  it('it sets the current background color to the specified bg when switch modes', function () {
+    var _renderView6 = renderView({
+      bg: 'navy'
+    }),
+        view = _renderView6.view;
+
+    expect(view.getByTestId('content').parentElement).toHaveStyleRule('--color-background-current', theme.colors.navy);
+  });
+});

package/dist/__tests__/GamutProvider.test.js

@@ -0,0 +1,90 @@
+import createCache from '@emotion/cache';
+import { Global, ThemeContext } from '@emotion/react';
+import { setupEnzyme } from 'component-test-setup';
+import React from 'react';
+import { createEmotionCache } from '../cache';
+import { GamutProvider } from '../GamutProvider';
+import { coreTheme as theme } from '../themes';
+jest.mock('../cache', function () {
+  var cacheMock = jest.fn();
+  return {
+    createEmotionCache: cacheMock
+  };
+});
+var renderWrapper = setupEnzyme(GamutProvider, {
+  theme: theme
+});
+describe(GamutProvider, function () {
+  beforeEach(function () {
+    jest.resetAllMocks();
+  });
+  it('renders with a cache by default', function () {
+    var _renderWrapper = renderWrapper(),
+        wrapper = _renderWrapper.wrapper;
+
+    expect(wrapper).toBeDefined();
+    expect(createEmotionCache).toHaveBeenCalled();
+  });
+  it('does not create a cache when configured not to', function () {
+    renderWrapper({
+      useCache: false
+    });
+    expect(createEmotionCache).not.toHaveBeenCalled();
+  });
+  it('renders global styles', function () {
+    var _renderWrapper2 = renderWrapper(),
+        wrapper = _renderWrapper2.wrapper;
+
+    expect(wrapper.find(Global).length).toBe(4);
+  });
+  it('does not render global styles when configured', function () {
+    var _renderWrapper3 = renderWrapper({
+      useGlobals: false
+    }),
+        wrapper = _renderWrapper3.wrapper;
+
+    expect(wrapper.find(Global).length).toBe(0);
+  });
+  it('wraps all elements in a ThemeProvider', function () {
+    var _renderWrapper4 = renderWrapper({
+      children: /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (value) {
+        return /*#__PURE__*/React.createElement("div", null, JSON.stringify(value));
+      })
+    }),
+        wrapper = _renderWrapper4.wrapper;
+
+    expect(wrapper.find('div').text()).toBe(JSON.stringify(theme));
+  });
+  it('it can have another GamutProvider as a child with creating multiple caches or globals', function () {
+    var _renderWrapper5 = renderWrapper({
+      children: /*#__PURE__*/React.createElement(GamutProvider, {
+        theme: theme
+      })
+    }),
+        wrapper = _renderWrapper5.wrapper;
+
+    expect(createEmotionCache).toHaveBeenCalledTimes(1);
+    expect(wrapper.find(Global).length).toEqual(4);
+  });
+  it('can accept a custom cache', function () {
+    renderWrapper({
+      cache: createCache({
+        key: 'gamut'
+      })
+    });
+    expect(createEmotionCache).toHaveBeenCalledTimes(0);
+  });
+  it('can render custom variables', function () {
+    var _renderWrapper6 = renderWrapper({
+      variables: {
+        cool: {
+          '--cool': 'blue'
+        }
+      }
+    }),
+        wrapper = _renderWrapper6.wrapper;
+
+    var globals = wrapper.find(Global);
+    expect(globals.length).toBe(5);
+  });
+});

package/dist/cache/__tests__/createEmotionCache.test.js

@@ -0,0 +1,29 @@
+import { createEmotionCache } from '../createEmotionCache';
+describe(createEmotionCache, function () {
+  beforeEach(function () {
+    document.body.innerHTML = '';
+  });
+  it('creates a container if none exists', function () {
+    var prebuild = document.getElementById('emotion-styles');
+    expect(prebuild).toBe(null);
+    createEmotionCache();
+    var container = document.getElementById('emotion-styles');
+    expect(container).toBeDefined();
+  });
+  it('creates a cache with our correct cache key', function () {
+    var cache = createEmotionCache();
+    expect(cache.key).toBe('gamut');
+  });
+  it('accepts arguments to override the default settings', function () {
+    var customContainer = document.createElement('div');
+    customContainer.setAttribute('id', 'custom');
+    document.body.appendChild(customContainer);
+    var cache = createEmotionCache({
+      key: 'custom',
+      container: customContainer
+    });
+    expect(cache.key).toBe('custom');
+    var container = document.getElementById('emotion-styles');
+    expect(container).toBe(null);
+  });
+});

package/dist/styles/fontSmoothing.d.ts

@@ -8,7 +8,7 @@ declare const smoothing: {
         MozOsxFontSmoothing: string;
     };
 };
-export declare const fontSmoothing: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const fontSmoothing: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     fontSmoothing: {
         property: "fontSmooth";
         scale: {

package/dist/themes/__tests__/theme.test.js

@@ -0,0 +1,8 @@
+import { adminTheme } from '../admin';
+import { coreTheme } from '../core';
+import { platformTheme } from '../platform';
+describe('themes', function () {
+  it.each([['core', coreTheme], ['platform', platformTheme], ['admin', adminTheme]])("%s - theme shape", function (_, theme) {
+    return expect(theme).toMatchSnapshot();
+  });
+});

package/dist/themes/admin.d.ts

@@ -4,19 +4,19 @@ export declare const adminTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
+}> & import("packages/variance/dist/createTheme/types").Merge<Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
     readonly headerHeight: {
         readonly base: "4rem";
         readonly md: "5rem";
     };
     readonly headerZ: 15;
-}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+}, "elements">>> & import("packages/variance/dist/createTheme/types").Merge<import("packages/variance/dist/createTheme/types").MergeTheme<import("packages/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     xs: string;
     sm: string;
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<{
+}> & import("packages/variance/dist/createTheme/types").Merge<{
     breakpoints: {
         xs: string;
         sm: string;
@@ -72,7 +72,7 @@ export declare const adminTheme: Record<"breakpoints", {
         };
         readonly headerZ: 15;
     };
-} & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+} & import("packages/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly beige: "#FFF0E5";
     readonly blue: "#1557FF";
     readonly green: "#008A27";
@@ -131,7 +131,7 @@ export declare const adminTheme: Record<"breakpoints", {
     readonly "gray-200": "#EEEEEE";
     readonly "gray-600": "#9E9E9E";
     readonly "gray-900": "#424242";
-}, "-", "">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-", "">, "color">>> & import("packages/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         text: {
             _: "navy-800";
@@ -274,7 +274,7 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "gray-600": "#9E9E9E";
         readonly "gray-900": "#424242";
     }, "-", "">, "color">;
-    modes: import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
+    modes: import("packages/variance/dist/createTheme/types").Merge<unknown, {
         light: import("@codecademy/variance").LiteralPaths<{
             text: {
                 _: "navy-800";
@@ -436,13 +436,13 @@ export declare const adminTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
-}>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}>>, import("packages/variance/dist/createTheme/types").PrivateThemeKeys> & import("packages/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         primary: {
             _: "blue-500";
             hover: "blue-400";
         };
-    } | {}, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+    } | {}, "-", "_">, "colors"> & import("packages/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         readonly beige: "#FFF0E5";
         readonly blue: "#1557FF";
         readonly green: "#008A27";
@@ -643,7 +643,7 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "gray-600": "#9E9E9E";
         readonly "gray-900": "#424242";
     }, "-", "">, "color">>;
-    modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
+    modes: import("packages/variance/dist/createTheme/types").Merge<import("packages/variance/dist/createTheme/types").Merge<unknown, {
         light: import("@codecademy/variance").LiteralPaths<{
             text: {
                 _: "navy-800";
@@ -798,7 +798,7 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly "gray-600": "#9E9E9E";
         readonly "gray-900": "#424242";
     }, "-"> | "text" | "background" | "primary" | "secondary" | "danger" | "interface" | "shadow-opaque" | "shadow-solid" | "text-accent" | "text-disabled" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "secondary-hover" | "danger-hover" | "interface-hover") => string;
-}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+}> & import("packages/variance/dist/createTheme/types").PrivateThemeKeys;
 export declare type AdminThemeShape = typeof adminTheme;
 export interface AdminTheme extends AdminThemeShape {
 }

package/dist/themes/core.d.ts

@@ -9,13 +9,13 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
         readonly md: "5rem";
     };
     readonly headerZ: 15;
-}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+}, "elements">>> & import("packages/variance/dist/createTheme/types").Merge<import("packages/variance/dist/createTheme/types").MergeTheme<import("packages/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     xs: string;
     sm: string;
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<{
+}> & import("packages/variance/dist/createTheme/types").Merge<{
     breakpoints: {
         xs: string;
         sm: string;
@@ -71,7 +71,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
         };
         readonly headerZ: 15;
     };
-} & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+} & import("packages/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly beige: "#FFF0E5";
     readonly blue: "#1557FF";
     readonly green: "#008A27";
@@ -130,7 +130,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
     readonly "gray-200": "#EEEEEE";
     readonly "gray-600": "#9E9E9E";
     readonly "gray-900": "#424242";
-}, "-", "">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-", "">, "color">>> & import("packages/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         text: {
             _: "navy-800";
@@ -273,7 +273,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
         readonly "gray-600": "#9E9E9E";
         readonly "gray-900": "#424242";
     }, "-", "">, "color">;
-    modes: import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
+    modes: import("packages/variance/dist/createTheme/types").Merge<unknown, {
         light: import("@codecademy/variance").LiteralPaths<{
             text: {
                 _: "navy-800";
@@ -435,7 +435,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
     md: string;
     lg: string;
     xl: string;
-}>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+}>>, import("packages/variance/dist/createTheme/types").PrivateThemeKeys> & import("packages/variance/dist/createTheme/types").PrivateThemeKeys;
 export declare type CoreThemeShape = typeof coreTheme;
 export interface CoreTheme extends CoreThemeShape {
 }

package/dist/themes/platform.d.ts

@@ -8,25 +8,25 @@ export declare const platformTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
+}> & import("packages/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
     xs: string;
     sm: string;
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
+}> & import("packages/variance/dist/createTheme/types").Merge<Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
     readonly headerHeight: {
         readonly base: "4rem";
         readonly md: "5rem";
     };
     readonly headerZ: 15;
-}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+}, "elements">>> & import("packages/variance/dist/createTheme/types").Merge<import("packages/variance/dist/createTheme/types").MergeTheme<import("packages/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     xs: string;
     sm: string;
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<{
+}> & import("packages/variance/dist/createTheme/types").Merge<{
     breakpoints: {
         xs: string;
         sm: string;
@@ -82,7 +82,7 @@ export declare const platformTheme: Record<"breakpoints", {
         };
         readonly headerZ: 15;
     };
-} & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+} & import("packages/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly beige: "#FFF0E5";
     readonly blue: "#1557FF";
     readonly green: "#008A27";
@@ -141,7 +141,7 @@ export declare const platformTheme: Record<"breakpoints", {
     readonly "gray-200": "#EEEEEE";
     readonly "gray-600": "#9E9E9E";
     readonly "gray-900": "#424242";
-}, "-", "">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-", "">, "color">>> & import("packages/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         text: {
             _: "navy-800";
@@ -284,7 +284,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "gray-600": "#9E9E9E";
         readonly "gray-900": "#424242";
     }, "-", "">, "color">;
-    modes: import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
+    modes: import("packages/variance/dist/createTheme/types").Merge<unknown, {
         light: import("@codecademy/variance").LiteralPaths<{
             text: {
                 _: "navy-800";
@@ -446,7 +446,7 @@ export declare const platformTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
-}>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+}>>, import("packages/variance/dist/createTheme/types").PrivateThemeKeys> & import("packages/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly lightBeige: "#FFFBF8";
     readonly gold: "#8A7300";
     readonly teal: "#027E97";
@@ -457,7 +457,7 @@ export declare const platformTheme: Record<"breakpoints", {
     readonly "gold-800": "#8A7300";
     readonly "teal-500": "#027E97";
     readonly "purple-300": "#B3CCFF";
-}, "-", "">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-", "">, "color">>> & import("packages/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         editor: {
             attribute: "green-700";
@@ -518,7 +518,7 @@ export declare const platformTheme: Record<"breakpoints", {
                 'line-number': "gray-600";
             };
         };
-    }, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+    }, "-", "_">, "colors"> & import("packages/variance/dist/createTheme/types").Assign<import("packages/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         readonly beige: "#FFF0E5";
         readonly blue: "#1557FF";
         readonly green: "#008A27";
@@ -730,7 +730,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "teal-500": "#027E97";
         readonly "purple-300": "#B3CCFF";
     }, "-", "">, "color">>;
-    modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
+    modes: import("packages/variance/dist/createTheme/types").Merge<import("packages/variance/dist/createTheme/types").Merge<unknown, {
         light: import("@codecademy/variance").LiteralPaths<{
             text: {
                 _: "navy-800";
@@ -951,7 +951,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "teal-500": "#027E97";
         readonly "purple-300": "#B3CCFF";
     }, "-">) => string;
-}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+}> & import("packages/variance/dist/createTheme/types").PrivateThemeKeys;
 export declare type PlatformThemeShape = typeof platformTheme;
 export interface PlatformTheme extends PlatformThemeShape {
 }

package/dist/utilities/__tests__/themed.test.js

@@ -0,0 +1,29 @@
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+import { coreTheme } from '../../themes';
+import { spacing } from '../../variables';
+import { themed } from '../themed';
+var theme = coreTheme;
+describe('themed', function () {
+  it('returns a function', function () {
+    expect(_typeof(themed('colors.blue-300'))).toBe('function');
+  });
+  it('returned function looks up the value at the supplied path', function () {
+    var getLineHeight = themed('lineHeight.title');
+    expect(getLineHeight({
+      theme: theme
+    })).toEqual(1.1);
+  });
+  it('returned function looks up the value at the supplied path with a number', function () {
+    var getSpacing4 = themed('spacing.4');
+    expect(getSpacing4({
+      theme: theme
+    })).toEqual('0.25rem');
+  });
+  it('can return a full object', function () {
+    var getSpacing = themed('spacing');
+    expect(getSpacing({
+      theme: theme
+    })).toEqual(spacing);
+  });
+});

package/dist/variance/props.d.ts

@@ -1,5 +1,5 @@
 /**  General Prop Groups  */
-export declare const typography: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const typography: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     readonly fontFamily: {
         readonly property: "fontFamily";
         readonly scale: "fontFamily";
@@ -35,7 +35,7 @@ export declare const typography: import("@codecademy/variance/dist/types/config"
         readonly property: "whiteSpace";
     };
 }>>;
-export declare const grid: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const grid: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     readonly gridColumn: {
         readonly property: "gridColumn";
     };
@@ -106,7 +106,7 @@ export declare const grid: import("@codecademy/variance/dist/types/config").Pars
         readonly scale: "spacing";
     };
 }>>;
-export declare const flex: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const flex: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     readonly flexBasis: {
         readonly property: "flexBasis";
     };
@@ -150,7 +150,7 @@ export declare const flex: import("@codecademy/variance/dist/types/config").Pars
         readonly property: "flex";
     };
 }>>;
-export declare const layout: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const layout: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     readonly flexBasis: {
         readonly property: "flexBasis";
     };
@@ -235,7 +235,7 @@ export declare const layout: import("@codecademy/variance/dist/types/config").Pa
         readonly property: "verticalAlign";
     };
 }>>;
-export declare const positioning: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const positioning: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     readonly position: {
         readonly property: "position";
     };
@@ -267,7 +267,7 @@ export declare const positioning: import("@codecademy/variance/dist/types/config
         readonly property: "opacity";
     };
 }>>;
-export declare const background: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const background: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     readonly background: {
         readonly property: "background";
     };
@@ -284,7 +284,7 @@ export declare const background: import("@codecademy/variance/dist/types/config"
         readonly property: "backgroundPosition";
     };
 }>>;
-export declare const color: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const color: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     readonly color: {
         readonly property: "color";
         readonly scale: "colors";
@@ -328,7 +328,7 @@ export declare const color: import("@codecademy/variance/dist/types/config").Par
         readonly scale: "colors";
     };
 }>>;
-export declare const shadow: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const shadow: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     readonly boxShadow: {
         readonly property: "boxShadow";
     };
@@ -336,7 +336,7 @@ export declare const shadow: import("@codecademy/variance/dist/types/config").Pa
         readonly property: "textShadow";
     };
 }>>;
-export declare const space: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const space: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     readonly p: {
         readonly property: "padding";
         readonly scale: "spacing";
@@ -398,7 +398,7 @@ export declare const space: import("@codecademy/variance/dist/types/config").Par
         readonly scale: "spacing";
     };
 }>>;
-export declare const border: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const border: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     readonly border: {
         readonly property: "border";
         readonly scale: "borders";
@@ -508,7 +508,7 @@ export declare const border: import("@codecademy/variance/dist/types/config").Pa
     };
 }>>;
 /** Sub Groups */
-export declare const padding: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const padding: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     readonly p: {
         readonly property: "padding";
         readonly scale: "spacing";
@@ -540,7 +540,7 @@ export declare const padding: import("@codecademy/variance/dist/types/config").P
         readonly scale: "spacing";
     };
 }>>;
-export declare const margin: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const margin: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     readonly m: {
         readonly property: "margin";
         readonly scale: "spacing";
@@ -573,7 +573,7 @@ export declare const margin: import("@codecademy/variance/dist/types/config").Pa
     };
 }>>;
 /** CSS */
-export declare const css: import("@codecademy/variance/dist/types/config").CSS<import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const css: import("packages/variance/dist/types/config").CSS<import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     color: {
         readonly property: "color";
         readonly scale: "colors";
@@ -1003,7 +1003,7 @@ export declare const css: import("@codecademy/variance/dist/types/config").CSS<i
         readonly property: "whiteSpace";
     };
 }>>>;
-export declare const variant: import("@codecademy/variance/dist/types/config").Variant<import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const variant: import("packages/variance/dist/types/config").Variant<import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     color: {
         readonly property: "color";
         readonly scale: "colors";
@@ -1433,7 +1433,7 @@ export declare const variant: import("@codecademy/variance/dist/types/config").V
         readonly property: "whiteSpace";
     };
 }>>>;
-export declare const states: import("@codecademy/variance/dist/types/config").States<import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
+export declare const states: import("packages/variance/dist/types/config").States<import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
     color: {
         readonly property: "color";
         readonly scale: "colors";