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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

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};
+  (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};
+          `}
         }
 
-        &:hover:before {
-          opacity: ${props.disabled && !props.checked ? 0 : 1};
+        &:checked {
+          border-color: ${props.theme.colors.form.border.selected};
+          background-color: ${props.theme.colors.form.background.selected};
         }
 
-        ${props.disabled &&
+        ${props.indeterminate &&
+        props.checked &&
         css`
-          opacity: 0.4;
+          border-color: ${props.theme.colors.form.border.selected} !important;
+          background-color: ${props.theme.colors.form.background
+            .selected} !important;
         `}
 
-        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}
-          }
+        &:focus {
+          ${focusRing}
         }
       }
+    }
 
-      ${COMMON}
-    `
-  );
+    ${COMMON}
+  `
+);
 
 export default Container;

package/__flow__/Collapsible/index.js

@@ -73,8 +73,9 @@ 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,8 +80,16 @@ 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,8 +17,9 @@ 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,8 +22,15 @@ 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,8 +32,15 @@ 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,8 +14,7 @@ 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/extendedThemes/sproutTheme/dark/theme.js

@@ -31,11 +31,23 @@ export const navigation = {
   },
 };
 
+export const datePicker = {
+  comparison: {
+    background: {
+      base: baseDarkTheme.colors.neutral[400],
+    },
+    text: {
+      base: baseDarkTheme.colors.neutral[800],
+    },
+  },
+};
+
 const darkTheme: TypeSproutTheme = {
   ...baseDarkTheme,
   colors: {
     ...baseDarkTheme.colors,
     navigation,
+    datePicker,
   },
 };
 

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

@@ -31,11 +31,23 @@ export const navigation = {
   },
 };
 
+export const datePicker = {
+  comparison: {
+    background: {
+      base: baseLightTheme.colors.neutral[400],
+    },
+    text: {
+      base: baseLightTheme.colors.neutral[800],
+    },
+  },
+};
+
 const lightTheme: TypeSproutTheme = {
   ...baseLightTheme,
   colors: {
     ...baseLightTheme.colors,
     navigation,
+    datePicker,
   },
 };
 

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.flow.js

@@ -13,7 +13,10 @@ import {
 } from "../themes/light/theme";
 import type { TypeColors } from "./theme.colors.flow.js";
 import type { TypeFontFamilyString } from "../themes/light/theme";
-import { navigation } from "../themes/extendedThemes/sproutTheme/light/theme";
+import {
+  datePicker,
+  navigation,
+} from "../themes/extendedThemes/sproutTheme/light/theme";
 
 export type TypeThemeUtils = {| interact: (color: string) => string |};
 export type TypeThemeMode = "light" | "dark";
@@ -53,5 +56,6 @@ export type TypeSproutTheme = {
   colors: {|
     ...$Exact<TypeColor>,
     navigation: typeof navigation,
+    datePicker: typeof datePicker,
   |},
 };

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

@@ -19,13 +19,21 @@ 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/extendedThemes/sproutTheme/dark/theme.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.navigation = exports.default = void 0;
+exports.navigation = exports.default = exports.datePicker = void 0;
 
 var _theme = _interopRequireDefault(require("../../../dark/theme"));
 
@@ -38,10 +38,22 @@ var navigation = {
   }
 };
 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
+    navigation: navigation,
+    datePicker: datePicker
   })
 });
 

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

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.navigation = exports.default = void 0;
+exports.navigation = exports.default = exports.datePicker = void 0;
 
 var _theme = _interopRequireDefault(require("../../../light/theme"));
 
@@ -38,10 +38,22 @@ var navigation = {
   }
 };
 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
+    navigation: navigation,
+    datePicker: datePicker
   })
 });
 

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: (