@sproutsocial/racine 11.6.1-theme-type.0 → 11.6.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Change Log
 
+## 11.6.2
+
+### Patch Changes
+
+- 560c463: Added a new extended theme for the compare to period for the date picker.
+
+## 11.6.1
+
+### Patch Changes
+
+- eb27d01: Fix interact util in dark mode themes
+  - The `interact` util was located at a different location in the light and dark mode base theme objects. It was at the base level of the light theme and nested inside of `colors` for the dark theme.
+  - `interact` was seemingly available at the base level of the theme in both modes, because we spread the light theme as the basis of the dark theme. However, the `interact` util accessible at the base level of the theme would behave like light mode in either mode.
+  - The `interact` util located inside the `colors` object inside the dark mode theme object was not usable, due to only being defined in that location for dark mode, and has been removed.
+- eb27d01: Remove 'just-clone' dependency
+- eb27d01: Fix "navigation" colors in SproutTheme
+  - The "navigation" colors were not available in the theme due to being spread in incorrectly.
+- eb27d01: Improve theme types to be more accurate
+
 ## 11.6.0
 
 ### Minor Changes

package/__flow__/Checkbox/styles.js

@@ -182,90 +182,90 @@ const getIcon = (type, color) => {
 
 // eslint-disable-next-line prettier/prettier
 export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span(
-  (props) => css`
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    position: relative;
-    transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
-
-    @supports (-webkit-appearance: none) {
-      &:before {
-        /* stylelint-disable */
-        content: url("data:image/svg+xml;utf8,${getIcon(
-          props.indeterminate ? "indeterminate" : "check",
-
-          props.checked
-            ? props.theme.colors.form.background.base
-            : props.theme.colors.form.border.base
-        )}");
-        opacity: ${props.checked ? 1 : 0};
-        position: absolute;
-        width: ${props.theme.space[400]};
-        height: ${props.theme.space[400]};
-        text-align: center;
-        transform: translateY(1px);
-        line-height: 1;
-        margin: auto;
-        pointer-events: none;
-        transition: ${props.theme.duration.fast}
-          ${props.theme.easing.ease_inout};
-      }
-
-      &:hover:before {
-        opacity: ${props.disabled && !props.checked ? 0 : 1};
-      }
-
-      ${props.disabled &&
-      css`
-        opacity: 0.4;
-      `}
-
-      input[type='checkbox'] {
-        box-sizing: border-box;
-        appearance: none;
-        margin: 0;
-        padding: 0;
-        width: ${props.theme.space[400]};
-        height: ${props.theme.space[400]};
-        border: 1px solid ${props.theme.colors.form.border.base};
-        border-radius: 4px;
-        background-color: ${props.theme.colors.form.background.base};
-        transition: all ${props.theme.duration.fast}
-          ${props.theme.easing.ease_in};
-        cursor: ${props.disabled ? "not-allowed" : "pointer"};
-        flex-shrink: 0;
-
-        &:not(:checked) {
-          ${!props.indeterminate &&
-          css`
-            border-color: ${props.theme.colors
-              .neutral[300]} !important; /* We don't want the focus ring to remove the border */
-            background-color: ${props.theme.colors.form.background.base};
-          `}
+    (props) => css`
+      display: inline-flex;
+      align-items: center;
+      box-sizing: border-box;
+      position: relative;
+      transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
+
+      @supports (-webkit-appearance: none) {
+        &:before {
+          /* stylelint-disable */
+          content: url("data:image/svg+xml;utf8,${getIcon(
+            props.indeterminate ? "indeterminate" : "check",
+
+            props.checked
+              ? props.theme.colors.form.background.base
+              : props.theme.colors.form.border.base
+          )}");
+          opacity: ${props.checked ? 1 : 0};
+          position: absolute;
+          width: ${props.theme.space[400]};
+          height: ${props.theme.space[400]};
+          text-align: center;
+          transform: translateY(1px);
+          line-height: 1;
+          margin: auto;
+          pointer-events: none;
+          transition: ${props.theme.duration.fast}
+            ${props.theme.easing.ease_inout};
         }
 
-        &:checked {
-          border-color: ${props.theme.colors.form.border.selected};
-          background-color: ${props.theme.colors.form.background.selected};
+        &:hover:before {
+          opacity: ${props.disabled && !props.checked ? 0 : 1};
         }
 
-        ${props.indeterminate &&
-        props.checked &&
+        ${props.disabled &&
         css`
-          border-color: ${props.theme.colors.form.border.selected} !important;
-          background-color: ${props.theme.colors.form.background
-            .selected} !important;
+          opacity: 0.4;
         `}
 
-        &:focus {
-          ${focusRing}
+        input[type='checkbox'] {
+          box-sizing: border-box;
+          appearance: none;
+          margin: 0;
+          padding: 0;
+          width: ${props.theme.space[400]};
+          height: ${props.theme.space[400]};
+          border: 1px solid ${props.theme.colors.form.border.base};
+          border-radius: 4px;
+          background-color: ${props.theme.colors.form.background.base};
+          transition: all ${props.theme.duration.fast}
+            ${props.theme.easing.ease_in};
+          cursor: ${props.disabled ? "not-allowed" : "pointer"};
+          flex-shrink: 0;
+
+          &:not(:checked) {
+            ${!props.indeterminate &&
+            css`
+              border-color: ${props.theme.colors
+                .neutral[300]} !important; /* We don't want the focus ring to remove the border */
+              background-color: ${props.theme.colors.form.background.base};
+            `}
+          }
+
+          &:checked {
+            border-color: ${props.theme.colors.form.border.selected};
+            background-color: ${props.theme.colors.form.background.selected};
+          }
+
+          ${props.indeterminate &&
+          props.checked &&
+          css`
+            border-color: ${props.theme.colors.form.border.selected} !important;
+            background-color: ${props.theme.colors.form.background
+              .selected} !important;
+          `}
+
+          &:focus {
+            ${focusRing}
+          }
         }
       }
-    }
 
-    ${COMMON}
-  `
-);
+      ${COMMON}
+    `
+  );
 
 export default Container;

package/__flow__/Collapsible/index.js

@@ -73,9 +73,8 @@ const Trigger = ({ children, ...rest }) => {
 };
 
 const Panel = ({ children, ...rest }) => {
-  const { isOpen, id, offset, collapsedHeight, openHeight } = useContext(
-    CollapsibleContext
-  );
+  const { isOpen, id, offset, collapsedHeight, openHeight } =
+    useContext(CollapsibleContext);
   const ref = useRef();
   const measurement = useMeasure(ref);
   const [isHidden, setIsHidden] = useState(undefined);

package/__flow__/Image/index.js

@@ -80,16 +80,8 @@ export default class Image extends React.Component<TypeProps, TypeState> {
   };
 
   render() {
-    const {
-      alt,
-      title,
-      onClick,
-      onError,
-      onLoad,
-      src,
-      qa,
-      ...rest
-    } = this.props;
+    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =
+      this.props;
 
     return (
       <ImageContainer

package/__flow__/SegmentedControl/index.js

@@ -17,9 +17,8 @@ type TypeSegmentedControlContext = {
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
 };
 
-const SegmentedControlContext = React.createContext<?TypeSegmentedControlContext>(
-  null
-);
+const SegmentedControlContext =
+  React.createContext<?TypeSegmentedControlContext>(null);
 
 type TypeSegmentedControlItemProps = {
   /** The value of this item. Should be unique among sibling items. */

package/__flow__/TableCell/index.js

@@ -22,15 +22,8 @@ export type TypeTableCell = {
  */
 export default class TableCell extends React.Component<TypeTableCell> {
   render() {
-    const {
-      id,
-      content,
-      colSpan,
-      width,
-      align,
-      children,
-      ...rest
-    } = this.props;
+    const { id, content, colSpan, width, align, children, ...rest } =
+      this.props;
 
     return (
       <Container

package/__flow__/ToggleHint/index.js

@@ -32,15 +32,8 @@ export default class ToggleHint extends React.Component<TypeProps> {
   };
 
   render() {
-    const {
-      icon,
-      isOpen,
-      openString,
-      closeString,
-      qa,
-      className,
-      ...rest
-    } = this.props;
+    const { icon, isOpen, openString, closeString, qa, className, ...rest } =
+      this.props;
 
     return (
       <Container

package/__flow__/systemProps/color.js

@@ -14,7 +14,8 @@ import type {
 
 // https://styled-system.com/table#color
 
-type TypeBackgroundColorSystemProp = TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
+type TypeBackgroundColorSystemProp =
+  TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
 export type TypeColorSystemProps = $ReadOnly<{|
   backgroundColor?: TypeBackgroundColorSystemProp,
   bg?: TypeBackgroundColorSystemProp,

package/__flow__/themes/dark/theme.js

@@ -29,9 +29,6 @@ export const shadows = {
 
 const colors = {
   ...lightTheme.colors,
-  utils: {
-    interact: interact(MODE),
-  },
   app: {
     background: {
       base: COLORS.COLOR_NEUTRAL_1000,
@@ -238,6 +235,9 @@ const colors = {
 
 const darkTheme = {
   ...lightTheme,
+  utils: {
+    interact: interact(MODE),
+  },
   colors,
   shadows,
   mode: MODE,

package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -1,23 +1,54 @@
 // @flow strict-local
-import clone from "just-clone";
 import baseDarkTheme from "../../../dark/theme";
-import { getDarkThemeColors } from "./getDarkThemeColors";
-import { getNonColorThemeValues } from "../NonColorThemeValues";
 import type { TypeSproutTheme } from "../../../../types/theme.flow";
 
-// clone base theme. (we don't want to mutate the base theme)
-const themeClone = clone(baseDarkTheme);
-
-// get non color theme values
-const nonColorThemeValues = getNonColorThemeValues(themeClone);
+export const navigation = {
+  main: {
+    background: {
+      base: baseDarkTheme.colors.neutral[1000],
+      overflowGradient: baseDarkTheme.colors.neutral[1100],
+    },
+  },
+  secondary: {
+    background: {
+      base: baseDarkTheme.colors.neutral[900],
+    },
+  },
+  text: {
+    base: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0],
+  },
+  icon: {
+    base: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0],
+  },
+  listItem: {
+    background: {
+      base: baseDarkTheme.colors.neutral[1000],
+      hover: baseDarkTheme.colors.neutral[1100],
+      selected: baseDarkTheme.colors.neutral[700],
+    },
+  },
+};
 
-// get sprout specific dark theme colors
-const darkThemeColors = getDarkThemeColors(themeClone.colors);
+export const datePicker = {
+  comparison: {
+    background: {
+      base: baseDarkTheme.colors.neutral[400],
+    },
+    text: {
+      base: baseDarkTheme.colors.neutral[800],
+    },
+  },
+};
 
 const darkTheme: TypeSproutTheme = {
-  ...themeClone,
-  ...nonColorThemeValues,
-  ...darkThemeColors,
+  ...baseDarkTheme,
+  colors: {
+    ...baseDarkTheme.colors,
+    navigation,
+    datePicker,
+  },
 };
 
 export default darkTheme;

package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js

@@ -1,23 +1,54 @@
 // @flow strict-local
-import clone from "just-clone";
 import baseLightTheme from "../../../light/theme";
-import { getLightThemeColors } from "./getLightThemeColors";
-import { getNonColorThemeValues } from "../NonColorThemeValues";
 import type { TypeSproutTheme } from "../../../../types/theme.flow";
 
-// clone base theme. (we don't want to mutate the base theme)
-const themeClone = clone(baseLightTheme);
-
-// get non color theme values
-const nonColorThemeValues = getNonColorThemeValues(themeClone);
+export const navigation = {
+  main: {
+    background: {
+      base: baseLightTheme.colors.neutral[900],
+      overflowGradient: baseLightTheme.colors.neutral[1000],
+    },
+  },
+  secondary: {
+    background: {
+      base: baseLightTheme.colors.neutral[800],
+    },
+  },
+  text: {
+    base: baseLightTheme.colors.neutral[0],
+    hover: baseLightTheme.colors.neutral[0],
+  },
+  icon: {
+    base: baseLightTheme.colors.neutral[0],
+    hover: baseLightTheme.colors.neutral[0],
+  },
+  listItem: {
+    background: {
+      base: baseLightTheme.colors.neutral[800],
+      hover: baseLightTheme.colors.neutral[1000],
+      selected: baseLightTheme.colors.neutral[700],
+    },
+  },
+};
 
-// get sprout specific light theme colors
-const lightThemeColors = getLightThemeColors(themeClone.colors);
+export const datePicker = {
+  comparison: {
+    background: {
+      base: baseLightTheme.colors.neutral[400],
+    },
+    text: {
+      base: baseLightTheme.colors.neutral[800],
+    },
+  },
+};
 
 const lightTheme: TypeSproutTheme = {
-  ...themeClone,
-  ...nonColorThemeValues,
-  ...lightThemeColors,
+  ...baseLightTheme,
+  colors: {
+    ...baseLightTheme.colors,
+    navigation,
+    datePicker,
+  },
 };
 
 export default lightTheme;

package/__flow__/types/theme.colors.flow.js

@@ -229,7 +229,14 @@ type TypeElevationColors = {|
   },
 |};
 
-type TypeDatavizColors = typeof datavizPalette;
+type TypeDatavizColors = {|
+  DATAVIZ_COLORS_MAP: typeof datavizPalette.DATAVIZ_COLORS_MAP,
+  DATAVIZ_COLORS_LIST: typeof datavizPalette.DATAVIZ_COLORS_LIST,
+  dataviz: {
+    map: typeof datavizPalette.DATAVIZ_COLORS_MAP,
+    list: typeof datavizPalette.DATAVIZ_COLORS_LIST,
+  },
+|};
 
 type TypeNetworkColors = {|
   network: {

package/__flow__/types/theme.flow.js

@@ -13,7 +13,12 @@ import {
 } from "../themes/light/theme";
 import type { TypeColors } from "./theme.colors.flow.js";
 import type { TypeFontFamilyString } from "../themes/light/theme";
+import {
+  datePicker,
+  navigation,
+} from "../themes/extendedThemes/sproutTheme/light/theme";
 
+export type TypeThemeUtils = {| interact: (color: string) => string |};
 export type TypeThemeMode = "light" | "dark";
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;
@@ -30,6 +35,7 @@ export type TypeDuration = typeof duration;
 
 export type TypeTheme = {
   mode: TypeThemeMode,
+  utils: TypeThemeUtils,
   breakpoints: TypeBreakpoint,
   colors: TypeColor,
   typography: TypeTypography,
@@ -44,53 +50,12 @@ export type TypeTheme = {
   duration: TypeDuration,
 };
 
-export type TypeNonColorThemeValues = {
-  mode: TypeThemeMode,
-  breakpoints: TypeBreakpoint,
-  typography: TypeTypography,
-  fontWeights: TypeFontWeight,
-  fontFamily: TypeFontFamily,
-  space: TypeSpace,
-  radii: TypeRadii,
-  borders: TypeBorder,
-  borderWidths: TypeBorderWidth,
-  shadows: TypeShadow,
-  easing: TypeEasing,
-  duration: TypeDuration,
-};
-
 // Extended themes
 export type TypeSproutTheme = {
   ...$Exact<TypeTheme>,
   colors: {|
     ...$Exact<TypeColor>,
-    navigation: {|
-      main: {|
-        background: {|
-          base: string,
-          gradient: string,
-        |},
-      |},
-      secondary: {|
-        background: {|
-          base: string,
-        |},
-      |},
-      text: {|
-        base: string,
-        hover: string,
-      |},
-      icon: {|
-        base: string,
-        hover: string,
-      |},
-      listItem: {|
-        background: {|
-          base: string,
-          hover: string,
-          active: string,
-        |},
-      |},
-    |},
+    navigation: typeof navigation,
+    datePicker: typeof datePicker,
   |},
 };

package/__flow__/utils/responsiveProps/index.test.js

@@ -19,21 +19,13 @@ describe("normalizeResponsiveProp", () => {
 
   it("should handle arrays with 4 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([
-      0,
-      1,
-      2,
-      3,
-      3,
+      0, 1, 2, 3, 3,
     ]);
   });
 
   it("should handle arrays with 5 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([
-      0,
-      1,
-      2,
-      3,
-      4,
+      0, 1, 2, 3, 4,
     ]);
   });
 });

package/commonjs/themes/dark/theme.js

@@ -31,9 +31,6 @@ var shadows = {
 exports.shadows = shadows;
 
 var colors = _extends({}, _theme.default.colors, {
-  utils: {
-    interact: (0, _interact.default)(MODE)
-  },
   app: {
     background: {
       base: _seedsColor.default.COLOR_NEUTRAL_1000
@@ -237,6 +234,9 @@ var colors = _extends({}, _theme.default.colors, {
 }, _datavizPalette.datavizPalette);
 
 var darkTheme = _extends({}, _theme.default, {
+  utils: {
+    interact: (0, _interact.default)(MODE)
+  },
   colors: colors,
   shadows: shadows,
   mode: MODE

package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -1,28 +1,61 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
-
-var _justClone = _interopRequireDefault(require("just-clone"));
+exports.navigation = exports.default = exports.datePicker = void 0;
 
 var _theme = _interopRequireDefault(require("../../../dark/theme"));
 
-var _getDarkThemeColors = require("./getDarkThemeColors");
-
-var _NonColorThemeValues = require("../NonColorThemeValues");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
 
-// clone base theme. (we don't want to mutate the base theme)
-var themeClone = (0, _justClone.default)(_theme.default); // get non color theme values
-
-var nonColorThemeValues = (0, _NonColorThemeValues.getNonColorThemeValues)(themeClone); // get sprout specific dark theme colors
-
-var darkThemeColors = (0, _getDarkThemeColors.getDarkThemeColors)(themeClone.colors);
-
-var darkTheme = _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
+var navigation = {
+  main: {
+    background: {
+      base: _theme.default.colors.neutral[1000],
+      overflowGradient: _theme.default.colors.neutral[1100]
+    }
+  },
+  secondary: {
+    background: {
+      base: _theme.default.colors.neutral[900]
+    }
+  },
+  text: {
+    base: _theme.default.colors.neutral[0],
+    hover: _theme.default.colors.neutral[0]
+  },
+  icon: {
+    base: _theme.default.colors.neutral[0],
+    hover: _theme.default.colors.neutral[0]
+  },
+  listItem: {
+    background: {
+      base: _theme.default.colors.neutral[1000],
+      hover: _theme.default.colors.neutral[1100],
+      selected: _theme.default.colors.neutral[700]
+    }
+  }
+};
+exports.navigation = navigation;
+var datePicker = {
+  comparison: {
+    background: {
+      base: _theme.default.colors.neutral[400]
+    },
+    text: {
+      base: _theme.default.colors.neutral[800]
+    }
+  }
+};
+exports.datePicker = datePicker;
+
+var darkTheme = _extends({}, _theme.default, {
+  colors: _extends({}, _theme.default.colors, {
+    navigation: navigation,
+    datePicker: datePicker
+  })
+});
 
 var _default = darkTheme;
 exports.default = _default;

package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js

@@ -1,28 +1,61 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
-
-var _justClone = _interopRequireDefault(require("just-clone"));
+exports.navigation = exports.default = exports.datePicker = void 0;
 
 var _theme = _interopRequireDefault(require("../../../light/theme"));
 
-var _getLightThemeColors = require("./getLightThemeColors");
-
-var _NonColorThemeValues = require("../NonColorThemeValues");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
 
-// clone base theme. (we don't want to mutate the base theme)
-var themeClone = (0, _justClone.default)(_theme.default); // get non color theme values
-
-var nonColorThemeValues = (0, _NonColorThemeValues.getNonColorThemeValues)(themeClone); // get sprout specific light theme colors
-
-var lightThemeColors = (0, _getLightThemeColors.getLightThemeColors)(themeClone.colors);
-
-var lightTheme = _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
+var navigation = {
+  main: {
+    background: {
+      base: _theme.default.colors.neutral[900],
+      overflowGradient: _theme.default.colors.neutral[1000]
+    }
+  },
+  secondary: {
+    background: {
+      base: _theme.default.colors.neutral[800]
+    }
+  },
+  text: {
+    base: _theme.default.colors.neutral[0],
+    hover: _theme.default.colors.neutral[0]
+  },
+  icon: {
+    base: _theme.default.colors.neutral[0],
+    hover: _theme.default.colors.neutral[0]
+  },
+  listItem: {
+    background: {
+      base: _theme.default.colors.neutral[800],
+      hover: _theme.default.colors.neutral[1000],
+      selected: _theme.default.colors.neutral[700]
+    }
+  }
+};
+exports.navigation = navigation;
+var datePicker = {
+  comparison: {
+    background: {
+      base: _theme.default.colors.neutral[400]
+    },
+    text: {
+      base: _theme.default.colors.neutral[800]
+    }
+  }
+};
+exports.datePicker = datePicker;
+
+var lightTheme = _extends({}, _theme.default, {
+  colors: _extends({}, _theme.default.colors, {
+    navigation: navigation,
+    datePicker: datePicker
+  })
+});
 
 var _default = lightTheme;
 exports.default = _default;

package/commonjs/types/theme.flow.js

@@ -1,3 +1,5 @@
 "use strict";
 
-var _theme = require("../themes/light/theme");
+var _theme = require("../themes/light/theme");
+
+var _theme2 = require("../themes/extendedThemes/sproutTheme/light/theme");

package/dist/themes/dark/dark.scss

@@ -430,9 +430,6 @@ $dark: (
         18: #ff7f6e,
         19: #c2f2bd,
         20: #ffe99a
-      ),
-      utils: (
-        
       )
     ),
     typography: (

package/lib/themes/dark/theme.js

@@ -15,9 +15,6 @@ export var shadows = {
 }; // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
 
 var colors = _extends({}, lightTheme.colors, {
-  utils: {
-    interact: interact(MODE)
-  },
   app: {
     background: {
       base: COLORS.COLOR_NEUTRAL_1000
@@ -221,6 +218,9 @@ var colors = _extends({}, lightTheme.colors, {
 }, datavizPalette);
 
 var darkTheme = _extends({}, lightTheme, {
+  utils: {
+    interact: interact(MODE)
+  },
   colors: colors,
   shadows: shadows,
   mode: MODE

package/lib/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -1,16 +1,50 @@
 function _extends() { _extends = Object.assign || 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 clone from "just-clone";
 import baseDarkTheme from "../../../dark/theme";
-import { getDarkThemeColors } from "./getDarkThemeColors";
-import { getNonColorThemeValues } from "../NonColorThemeValues";
-// clone base theme. (we don't want to mutate the base theme)
-var themeClone = clone(baseDarkTheme); // get non color theme values
+export var navigation = {
+  main: {
+    background: {
+      base: baseDarkTheme.colors.neutral[1000],
+      overflowGradient: baseDarkTheme.colors.neutral[1100]
+    }
+  },
+  secondary: {
+    background: {
+      base: baseDarkTheme.colors.neutral[900]
+    }
+  },
+  text: {
+    base: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0]
+  },
+  icon: {
+    base: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0]
+  },
+  listItem: {
+    background: {
+      base: baseDarkTheme.colors.neutral[1000],
+      hover: baseDarkTheme.colors.neutral[1100],
+      selected: baseDarkTheme.colors.neutral[700]
+    }
+  }
+};
+export var datePicker = {
+  comparison: {
+    background: {
+      base: baseDarkTheme.colors.neutral[400]
+    },
+    text: {
+      base: baseDarkTheme.colors.neutral[800]
+    }
+  }
+};
 
-var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific dark theme colors
-
-var darkThemeColors = getDarkThemeColors(themeClone.colors);
-
-var darkTheme = _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
+var darkTheme = _extends({}, baseDarkTheme, {
+  colors: _extends({}, baseDarkTheme.colors, {
+    navigation: navigation,
+    datePicker: datePicker
+  })
+});
 
 export default darkTheme;

package/lib/themes/extendedThemes/sproutTheme/light/theme.js

@@ -1,16 +1,50 @@
 function _extends() { _extends = Object.assign || 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 clone from "just-clone";
 import baseLightTheme from "../../../light/theme";
-import { getLightThemeColors } from "./getLightThemeColors";
-import { getNonColorThemeValues } from "../NonColorThemeValues";
-// clone base theme. (we don't want to mutate the base theme)
-var themeClone = clone(baseLightTheme); // get non color theme values
+export var navigation = {
+  main: {
+    background: {
+      base: baseLightTheme.colors.neutral[900],
+      overflowGradient: baseLightTheme.colors.neutral[1000]
+    }
+  },
+  secondary: {
+    background: {
+      base: baseLightTheme.colors.neutral[800]
+    }
+  },
+  text: {
+    base: baseLightTheme.colors.neutral[0],
+    hover: baseLightTheme.colors.neutral[0]
+  },
+  icon: {
+    base: baseLightTheme.colors.neutral[0],
+    hover: baseLightTheme.colors.neutral[0]
+  },
+  listItem: {
+    background: {
+      base: baseLightTheme.colors.neutral[800],
+      hover: baseLightTheme.colors.neutral[1000],
+      selected: baseLightTheme.colors.neutral[700]
+    }
+  }
+};
+export var datePicker = {
+  comparison: {
+    background: {
+      base: baseLightTheme.colors.neutral[400]
+    },
+    text: {
+      base: baseLightTheme.colors.neutral[800]
+    }
+  }
+};
 
-var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific light theme colors
-
-var lightThemeColors = getLightThemeColors(themeClone.colors);
-
-var lightTheme = _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
+var lightTheme = _extends({}, baseLightTheme, {
+  colors: _extends({}, baseLightTheme.colors, {
+    navigation: navigation,
+    datePicker: datePicker
+  })
+});
 
 export default lightTheme;

package/lib/types/theme.flow.js

@@ -1 +1,2 @@
-import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";
+import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";
+import { datePicker, navigation } from "../themes/extendedThemes/sproutTheme/light/theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.6.1-theme-type.0",
+  "version": "11.6.2",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -66,7 +66,6 @@
   "dependencies": {
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
-    "just-clone": "^5.0.1",
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
     "lru-memoize": "^1.1.0",
@@ -167,7 +166,7 @@
     "svgo": "^1.3.0",
     "svgstore": "^2.0.3",
     "webpack": "^4.20.0",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^4.9.0"
   },
   "peerDependencies": {
     "@sproutsocial/seeds-border": ">=0.3.0",

package/__flow__/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js

@@ -1,17 +0,0 @@
-// @flow strict-local
-import type {
-  TypeNonColorThemeValues,
-  TypeTheme,
-} from "../../../../types/theme.flow.js";
-
-export function getNonColorThemeValues(
-  theme: TypeTheme
-): TypeNonColorThemeValues {
-  const { colors, ...otherThemeValues } = theme;
-  return {
-    ...otherThemeValues,
-    /**
-     * You can add your own theme values or overrides here.
-     */
-  };
-}

package/__flow__/themes/extendedThemes/sproutTheme/dark/getDarkThemeColors.js

@@ -1,36 +0,0 @@
-// @flow strict-local
-import type { TypeColors } from "../../../../types/theme.colors.flow.js";
-
-export function getDarkThemeColors(themeColors: TypeColors) {
-  return {
-    ...themeColors,
-    navigation: {
-      main: {
-        background: {
-          base: themeColors.neutral[1000],
-          gradient: themeColors.neutral[1100],
-        },
-      },
-      secondary: {
-        background: {
-          base: themeColors.neutral[900],
-        },
-      },
-      text: {
-        base: themeColors.neutral[0],
-        hover: themeColors.neutral[0],
-      },
-      icon: {
-        base: themeColors.neutral[0],
-        hover: themeColors.neutral[0],
-      },
-      listItem: {
-        background: {
-          base: themeColors.neutral[1000],
-          hover: themeColors.neutral[1100],
-          active: themeColors.neutral[700],
-        },
-      },
-    },
-  };
-}

package/__flow__/themes/extendedThemes/sproutTheme/light/getLightThemeColors.js

@@ -1,36 +0,0 @@
-// @flow strict-local
-import type { TypeColors } from "../../../../types/theme.colors.flow.js";
-
-export function getLightThemeColors(themeColors: TypeColors) {
-  return {
-    ...themeColors,
-    navigation: {
-      main: {
-        background: {
-          base: themeColors.neutral[900],
-          overflowGradient: themeColors.neutral[1000],
-        },
-      },
-      secondary: {
-        background: {
-          base: themeColors.neutral[800],
-        },
-      },
-      text: {
-        base: themeColors.neutral[0],
-        hover: themeColors.neutral[0],
-      },
-      icon: {
-        base: themeColors.neutral[0],
-        hover: themeColors.neutral[0],
-      },
-      listItem: {
-        background: {
-          base: themeColors.neutral[800],
-          hover: themeColors.neutral[1000],
-          selected: themeColors.neutral[700],
-        },
-      },
-    },
-  };
-}

package/commonjs/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNonColorThemeValues = getNonColorThemeValues;
-var _excluded = ["colors"];
-
-function _extends() { _extends = Object.assign || 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); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function getNonColorThemeValues(theme) {
-  var colors = theme.colors,
-      otherThemeValues = _objectWithoutPropertiesLoose(theme, _excluded);
-
-  return _extends({}, otherThemeValues);
-}

package/commonjs/themes/extendedThemes/sproutTheme/dark/getDarkThemeColors.js

@@ -1,39 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getDarkThemeColors = getDarkThemeColors;
-
-function _extends() { _extends = Object.assign || 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); }
-
-function getDarkThemeColors(themeColors) {
-  return _extends({}, themeColors, {
-    navigation: {
-      main: {
-        background: {
-          base: themeColors.neutral[1000],
-          gradient: themeColors.neutral[1100]
-        }
-      },
-      secondary: {
-        background: {
-          base: themeColors.neutral[900]
-        }
-      },
-      text: {
-        base: themeColors.neutral[0],
-        hover: themeColors.neutral[0]
-      },
-      icon: {
-        base: themeColors.neutral[0],
-        hover: themeColors.neutral[0]
-      },
-      listItem: {
-        background: {
-          base: themeColors.neutral[1000],
-          hover: themeColors.neutral[1100],
-          active: themeColors.neutral[700]
-        }
-      }
-    }
-  });
-}

package/commonjs/themes/extendedThemes/sproutTheme/light/getLightThemeColors.js

@@ -1,39 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getLightThemeColors = getLightThemeColors;
-
-function _extends() { _extends = Object.assign || 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); }
-
-function getLightThemeColors(themeColors) {
-  return _extends({}, themeColors, {
-    navigation: {
-      main: {
-        background: {
-          base: themeColors.neutral[900],
-          overflowGradient: themeColors.neutral[1000]
-        }
-      },
-      secondary: {
-        background: {
-          base: themeColors.neutral[800]
-        }
-      },
-      text: {
-        base: themeColors.neutral[0],
-        hover: themeColors.neutral[0]
-      },
-      icon: {
-        base: themeColors.neutral[0],
-        hover: themeColors.neutral[0]
-      },
-      listItem: {
-        background: {
-          base: themeColors.neutral[800],
-          hover: themeColors.neutral[1000],
-          selected: themeColors.neutral[700]
-        }
-      }
-    }
-  });
-}

package/lib/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js

@@ -1,12 +0,0 @@
-var _excluded = ["colors"];
-
-function _extends() { _extends = Object.assign || 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); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-export function getNonColorThemeValues(theme) {
-  var colors = theme.colors,
-      otherThemeValues = _objectWithoutPropertiesLoose(theme, _excluded);
-
-  return _extends({}, otherThemeValues);
-}

package/lib/themes/extendedThemes/sproutTheme/dark/getDarkThemeColors.js

@@ -1,34 +0,0 @@
-function _extends() { _extends = Object.assign || 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); }
-
-export function getDarkThemeColors(themeColors) {
-  return _extends({}, themeColors, {
-    navigation: {
-      main: {
-        background: {
-          base: themeColors.neutral[1000],
-          gradient: themeColors.neutral[1100]
-        }
-      },
-      secondary: {
-        background: {
-          base: themeColors.neutral[900]
-        }
-      },
-      text: {
-        base: themeColors.neutral[0],
-        hover: themeColors.neutral[0]
-      },
-      icon: {
-        base: themeColors.neutral[0],
-        hover: themeColors.neutral[0]
-      },
-      listItem: {
-        background: {
-          base: themeColors.neutral[1000],
-          hover: themeColors.neutral[1100],
-          active: themeColors.neutral[700]
-        }
-      }
-    }
-  });
-}

package/lib/themes/extendedThemes/sproutTheme/light/getLightThemeColors.js

@@ -1,34 +0,0 @@
-function _extends() { _extends = Object.assign || 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); }
-
-export function getLightThemeColors(themeColors) {
-  return _extends({}, themeColors, {
-    navigation: {
-      main: {
-        background: {
-          base: themeColors.neutral[900],
-          overflowGradient: themeColors.neutral[1000]
-        }
-      },
-      secondary: {
-        background: {
-          base: themeColors.neutral[800]
-        }
-      },
-      text: {
-        base: themeColors.neutral[0],
-        hover: themeColors.neutral[0]
-      },
-      icon: {
-        base: themeColors.neutral[0],
-        hover: themeColors.neutral[0]
-      },
-      listItem: {
-        background: {
-          base: themeColors.neutral[800],
-          hover: themeColors.neutral[1000],
-          selected: themeColors.neutral[700]
-        }
-      }
-    }
-  });
-}