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

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__/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__/themes/utils/_themed.scss

@@ -0,0 +1,119 @@
+// Inspired by https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
+// This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
+
+// SET-UP
+// theme.scss is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
+// _themed.scss will be copied to each theme folder in /dist, where the theme.scss file for that theme will be.
+@import "./theme.scss";
+
+// In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
+// so we need to map-get "default" to access it.
+$theme: map-get($theme, "default");
+
+// FUNCTIONS
+// This function will allow you to get any value from the theme.
+// @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
+@function t($key) {
+  $keys: _str-split($key, ".");
+  @return _map-deep-get($theme, $keys);
+}
+
+// The rest of the functions are convenience methods to get theme values for subsets of the theme.
+// @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
+@function colors($key) {
+  $keys: _str-split($key, ".");
+  @return _map-deep-get($theme, join("colors", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
+@function typography($key) {
+  $keys: _str-split($key, ".");
+  @return _map-deep-get($theme, join("typography", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
+@function fontWeights($key) {
+  $keys: _str-split($key, ".");
+  @return _map-deep-get($theme, join("fontWeights", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
+@function space($key) {
+  $keys: _str-split($key, ".");
+  @return _map-deep-get($theme, join("space", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
+@function radii($key) {
+  $keys: _str-split($key, ".");
+  @return _map-deep-get($theme, join("radii", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
+@function borders($key) {
+  $keys: _str-split($key, ".");
+  @return _map-deep-get($theme, join("borders", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
+@function borderWidths($key) {
+  $keys: _str-split($key, ".");
+  @return _map-deep-get($theme, join("borderWidths", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
+@function shadows($key) {
+  $keys: _str-split($key, ".");
+  @return _map-deep-get($theme, join("shadows", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
+@function easing($key) {
+  $keys: _str-split($key, ".");
+  @return _map-deep-get($theme, join("easing", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
+@function duration($key) {
+  $keys: _str-split($key, ".");
+  @return _map-deep-get($theme, join("duration", $keys));
+}
+
+// UTILITIES
+// Helper functions that power the functions above. Not relevant to the theme.
+// If you import this file with @use, these functions will be excluded because they are private.
+
+// Via https://stackoverflow.com/a/42295154
+// Used to split period-separated object keys, e.g. "colors.text.body" => ["colors", "text", "body"]
+// Only works with a single-character separator.
+@function _str-split($string, $separator) {
+  // empty array/list
+  $split-arr: ();
+  // first index of separator in string
+  $index: str-index($string, $separator);
+  // loop through string
+  @while $index != null {
+    // get the substring from the first character to the separator
+    $item: str-slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: append($split-arr, $item);
+    // remove item and separator from string
+    $string: str-slice($string, $index + 1);
+    // find new index of separator
+    $index: str-index($string, $separator);
+  }
+  // add the remaining string to list (the last item)
+  $split-arr: append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
+// Iterates over a list of keys to read multi-level maps.
+// e.g., _map-deep-get((colors: (text: (body: "#364141"))), ["colors", "text", "body"]) => "#364141"
+@function _map-deep-get($map, $keys) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}

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/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/_themed.scss

@@ -2,12 +2,13 @@
 // This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
 
 // SET-UP
-// This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
-@import "../../../dist/themes/dark/dark.scss";
+// theme.scss is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
+// _themed.scss will be copied to each theme folder in /dist, where the theme.scss file for that theme will be.
+@import "./theme.scss";
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
-$theme: map-get($dark, "default");
+$theme: map-get($theme, "default");
 
 // FUNCTIONS
 // This function will allow you to get any value from the theme.

package/dist/themes/dark/{dark.scss → theme.scss}

@@ -1,4 +1,4 @@
-$dark: (
+$theme: (
   __esModule: true,
   default: (
     utils: (
@@ -430,9 +430,6 @@ $dark: (
         18: #ff7f6e,
         19: #c2f2bd,
         20: #ffe99a
-      ),
-      utils: (
-        
       )
     ),
     typography: (