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

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-themed-beta.0",
   "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]
-        }
-      }
-    }
-  });
-}