@sproutsocial/racine 11.2.5-sproutTheme-beta.0 → 11.2.5-sproutTheme-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/__flow__/Button/index.stories.js +21 -6
  2. package/__flow__/themes/extendedThemes/sproutTheme/dark/colors.js +0 -0
  3. package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js +25 -26
  4. package/__flow__/themes/extendedThemes/sproutTheme/light/colors.js +0 -0
  5. package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js +35 -26
  6. package/__flow__/themes/extendedThemes/sproutTheme/otherVals/theme.js +6 -0
  7. package/commonjs/themes/extendedThemes/sproutTheme/dark/colors.js +1 -0
  8. package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js +29 -29
  9. package/commonjs/themes/extendedThemes/sproutTheme/light/colors.js +1 -0
  10. package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js +40 -30
  11. package/commonjs/themes/extendedThemes/sproutTheme/otherVals/theme.js +9 -0
  12. package/lib/themes/extendedThemes/sproutTheme/dark/colors.js +0 -0
  13. package/lib/themes/extendedThemes/sproutTheme/dark/theme.js +29 -29
  14. package/lib/themes/extendedThemes/sproutTheme/light/colors.js +0 -0
  15. package/lib/themes/extendedThemes/sproutTheme/light/theme.js +40 -30
  16. package/lib/themes/extendedThemes/sproutTheme/otherVals/theme.js +5 -0
  17. package/package.json +1 -1
package/__flow__/Button/index.stories.js CHANGED
@@ -3,6 +3,11 @@ import { boolean, text, number } from "@storybook/addon-knobs";
3
3
  import Button from "./index";
4
4
  import Icon from "../Icon";
5
5
  import Box from "../Box";
6
+ import ThemeProvider from "../ThemeProvider";
7
+ import {
8
+ sproutLightTheme,
9
+ sproutDarkTheme,
10
+ } from "../themes/extendedThemes/sproutTheme";
6
11
 
7
12
  export default {
8
13
  title: "Button",
@@ -22,12 +27,22 @@ defaultStory.story = {
22
27
  };
23
28
 
24
29
  export const primary = () => (
25
- <Button
26
- appearance={text("appearance", "primary")}
27
- onClick={() => alert("Testing...")}
28
- >
29
- Primary Button
30
- </Button>
30
+ <>
31
+ <Button
32
+ appearance={text("appearance", "primary")}
33
+ onClick={() => alert("Testing...")}
34
+ >
35
+ Primary Button
36
+ </Button>
37
+ <ThemeProvider theme={(theme) => sproutLightTheme(theme)}>
38
+ <Button
39
+ appearance={text("appearance", "primary")}
40
+ onClick={() => alert("Testing...")}
41
+ >
42
+ Primary Button
43
+ </Button>
44
+ </ThemeProvider>
45
+ </>
31
46
  );
32
47
 
33
48
  primary.story = {
package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js CHANGED
@@ -5,34 +5,33 @@ import type { TypeTheme } from "../../../../types/theme.flow.js";
5
5
  const darkTheme = (theme: TypeTheme) => {
6
6
  const sproutDarkTheme = clone(theme);
7
7
 
8
- sproutDarkTheme.sprout = {
9
- colors: {
10
- navigation: {
11
- main: {
12
- background: {
13
- base: theme.colors.neutral[1000],
14
- gradient: theme.colors.neutral[1100],
15
- },
8
+ sproutDarkTheme.colors = {
9
+ ...sproutDarkTheme.colors,
10
+ navigation: {
11
+ main: {
12
+ background: {
13
+ base: theme.colors.neutral[1000],
14
+ gradient: theme.colors.neutral[1100],
16
15
  },
17
- secondary: {
18
- background: {
19
- base: theme.colors.neutral[900],
20
- },
21
- },
22
- text: {
23
- base: theme.colors.neutral[0],
24
- hover: theme.colors.neutral[0],
25
- },
26
- icon: {
27
- base: theme.colors.neutral[0],
28
- hover: theme.colors.neutral[0],
16
+ },
17
+ secondary: {
18
+ background: {
19
+ base: theme.colors.neutral[900],
29
20
  },
30
- item: {
31
- background: {
32
- base: theme.colors.neutral[1000],
33
- hover: theme.colors.neutral[1100],
34
- active: theme.colors.neutral[700],
35
- },
21
+ },
22
+ text: {
23
+ base: theme.colors.neutral[0],
24
+ hover: theme.colors.neutral[0],
25
+ },
26
+ icon: {
27
+ base: theme.colors.neutral[0],
28
+ hover: theme.colors.neutral[0],
29
+ },
30
+ item: {
31
+ background: {
32
+ base: theme.colors.neutral[1000],
33
+ hover: theme.colors.neutral[1100],
34
+ active: theme.colors.neutral[700],
36
35
  },
37
36
  },
38
37
  },
package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js CHANGED
@@ -4,38 +4,47 @@ import type { TypeTheme } from "../../../../types/theme.flow.js";
4
4
 
5
5
  const lightTheme = (theme: TypeTheme) => {
6
6
  const sproutLightTheme = clone(theme);
7
+ // copy theme that's passed in
8
+ // get all non color theme values
9
+ // get light theme changes
7
10
 
8
- sproutLightTheme.sprout = {
9
- colors: {
10
- navigation: {
11
- main: {
12
- background: {
13
- base: theme.colors.neutral[900],
14
- gradient: theme.colors.neutral[1000],
15
- },
11
+ sproutLightTheme.colors = {
12
+ ...sproutLightTheme.colors,
13
+ navigation: {
14
+ main: {
15
+ background: {
16
+ base: theme.colors.neutral[900],
17
+ overflowGradient: theme.colors.neutral[1000],
16
18
  },
17
- secondary: {
18
- background: {
19
- base: theme.colors.neutral[800],
20
- },
21
- },
22
- text: {
23
- base: theme.colors.neutral[0],
24
- hover: theme.colors.neutral[0],
25
- },
26
- icon: {
27
- base: theme.colors.neutral[0],
28
- hover: theme.colors.neutral[0],
19
+ },
20
+ secondary: {
21
+ background: {
22
+ base: theme.colors.neutral[800],
29
23
  },
30
- item: {
31
- background: {
32
- base: theme.colors.neutral[800],
33
- hover: theme.colors.neutral[1000],
34
- active: theme.colors.neutral[700],
35
- },
24
+ },
25
+ text: {
26
+ base: theme.colors.neutral[0],
27
+ hover: theme.colors.neutral[0],
28
+ },
29
+ icon: {
30
+ base: theme.colors.neutral[0],
31
+ hover: theme.colors.neutral[0],
32
+ },
33
+ listItem: {
34
+ background: {
35
+ base: theme.colors.neutral[800],
36
+ hover: theme.colors.neutral[1000],
37
+ selected: theme.colors.neutral[700],
36
38
  },
37
39
  },
38
40
  },
41
+ icon: {
42
+ sentiment: {
43
+ positive_sentiment: theme.colors.blue[500],
44
+ negative_sentiment: theme.colors.red[500],
45
+ neutral_sentiment: theme.colors.neutral[300],
46
+ },
47
+ },
39
48
  };
40
49
 
41
50
  return sproutLightTheme;
package/__flow__/themes/extendedThemes/sproutTheme/otherVals/theme.js ADDED
@@ -0,0 +1,6 @@
1
+ // @flow strict-local
2
+ import clone from 'just-clone';
3
+
4
+ const nonColorThemeValues = (theme) => {
5
+ const sproutTheme = clone(theme);
6
+ }
package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js CHANGED
@@ -7,40 +7,40 @@ var _justClone = _interopRequireDefault(require("just-clone"));
7
7
 
8
8
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
9
 
10
+ 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); }
11
+
10
12
  var darkTheme = function darkTheme(theme) {
11
13
  var sproutDarkTheme = (0, _justClone.default)(theme);
12
- sproutDarkTheme.sprout = {
13
- colors: {
14
- navigation: {
15
- main: {
16
- background: {
17
- base: theme.colors.neutral[1000],
18
- gradient: theme.colors.neutral[1100]
19
- }
20
- },
21
- secondary: {
22
- background: {
23
- base: theme.colors.neutral[900]
24
- }
25
- },
26
- text: {
27
- base: theme.colors.neutral[0],
28
- hover: theme.colors.neutral[0]
29
- },
30
- icon: {
31
- base: theme.colors.neutral[0],
32
- hover: theme.colors.neutral[0]
33
- },
34
- item: {
35
- background: {
36
- base: theme.colors.neutral[1000],
37
- hover: theme.colors.neutral[1100],
38
- active: theme.colors.neutral[700]
39
- }
14
+ sproutDarkTheme.colors = _extends({}, sproutDarkTheme.colors, {
15
+ navigation: {
16
+ main: {
17
+ background: {
18
+ base: theme.colors.neutral[1000],
19
+ gradient: theme.colors.neutral[1100]
20
+ }
21
+ },
22
+ secondary: {
23
+ background: {
24
+ base: theme.colors.neutral[900]
25
+ }
26
+ },
27
+ text: {
28
+ base: theme.colors.neutral[0],
29
+ hover: theme.colors.neutral[0]
30
+ },
31
+ icon: {
32
+ base: theme.colors.neutral[0],
33
+ hover: theme.colors.neutral[0]
34
+ },
35
+ item: {
36
+ background: {
37
+ base: theme.colors.neutral[1000],
38
+ hover: theme.colors.neutral[1100],
39
+ active: theme.colors.neutral[700]
40
40
  }
41
41
  }
42
42
  }
43
- };
43
+ });
44
44
  return sproutDarkTheme;
45
45
  };
46
46
 
package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js CHANGED
@@ -7,40 +7,50 @@ var _justClone = _interopRequireDefault(require("just-clone"));
7
7
 
8
8
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
9
 
10
+ 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); }
11
+
10
12
  var lightTheme = function lightTheme(theme) {
11
- var sproutLightTheme = (0, _justClone.default)(theme);
12
- sproutLightTheme.sprout = {
13
- colors: {
14
- navigation: {
15
- main: {
16
- background: {
17
- base: theme.colors.neutral[900],
18
- gradient: theme.colors.neutral[1000]
19
- }
20
- },
21
- secondary: {
22
- background: {
23
- base: theme.colors.neutral[800]
24
- }
25
- },
26
- text: {
27
- base: theme.colors.neutral[0],
28
- hover: theme.colors.neutral[0]
29
- },
30
- icon: {
31
- base: theme.colors.neutral[0],
32
- hover: theme.colors.neutral[0]
33
- },
34
- item: {
35
- background: {
36
- base: theme.colors.neutral[800],
37
- hover: theme.colors.neutral[1000],
38
- active: theme.colors.neutral[700]
39
- }
13
+ var sproutLightTheme = (0, _justClone.default)(theme); // copy theme that's passed in
14
+ // get all non color theme values
15
+ // get light theme changes
16
+
17
+ sproutLightTheme.colors = _extends({}, sproutLightTheme.colors, {
18
+ navigation: {
19
+ main: {
20
+ background: {
21
+ base: theme.colors.neutral[900],
22
+ overflowGradient: theme.colors.neutral[1000]
23
+ }
24
+ },
25
+ secondary: {
26
+ background: {
27
+ base: theme.colors.neutral[800]
40
28
  }
29
+ },
30
+ text: {
31
+ base: theme.colors.neutral[0],
32
+ hover: theme.colors.neutral[0]
33
+ },
34
+ icon: {
35
+ base: theme.colors.neutral[0],
36
+ hover: theme.colors.neutral[0]
37
+ },
38
+ listItem: {
39
+ background: {
40
+ base: theme.colors.neutral[800],
41
+ hover: theme.colors.neutral[1000],
42
+ selected: theme.colors.neutral[700]
43
+ }
44
+ }
45
+ },
46
+ icon: {
47
+ sentiment: {
48
+ positive_sentiment: theme.colors.blue[500],
49
+ negative_sentiment: theme.colors.red[500],
50
+ neutral_sentiment: theme.colors.neutral[300]
41
51
  }
42
52
  }
43
- };
53
+ });
44
54
  return sproutLightTheme;
45
55
  };
46
56
 
package/commonjs/themes/extendedThemes/sproutTheme/otherVals/theme.js ADDED
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ var _justClone = _interopRequireDefault(require("just-clone"));
4
+
5
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
6
+
7
+ var nonColorThemeValues = function nonColorThemeValues(theme) {
8
+ var sproutTheme = (0, _justClone.default)(theme);
9
+ };
package/lib/themes/extendedThemes/sproutTheme/dark/theme.js CHANGED
@@ -1,39 +1,39 @@
1
+ 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); }
2
+
1
3
  import clone from "just-clone";
2
4
 
3
5
  var darkTheme = function darkTheme(theme) {
4
6
  var sproutDarkTheme = clone(theme);
5
- sproutDarkTheme.sprout = {
6
- colors: {
7
- navigation: {
8
- main: {
9
- background: {
10
- base: theme.colors.neutral[1000],
11
- gradient: theme.colors.neutral[1100]
12
- }
13
- },
14
- secondary: {
15
- background: {
16
- base: theme.colors.neutral[900]
17
- }
18
- },
19
- text: {
20
- base: theme.colors.neutral[0],
21
- hover: theme.colors.neutral[0]
22
- },
23
- icon: {
24
- base: theme.colors.neutral[0],
25
- hover: theme.colors.neutral[0]
26
- },
27
- item: {
28
- background: {
29
- base: theme.colors.neutral[1000],
30
- hover: theme.colors.neutral[1100],
31
- active: theme.colors.neutral[700]
32
- }
7
+ sproutDarkTheme.colors = _extends({}, sproutDarkTheme.colors, {
8
+ navigation: {
9
+ main: {
10
+ background: {
11
+ base: theme.colors.neutral[1000],
12
+ gradient: theme.colors.neutral[1100]
13
+ }
14
+ },
15
+ secondary: {
16
+ background: {
17
+ base: theme.colors.neutral[900]
18
+ }
19
+ },
20
+ text: {
21
+ base: theme.colors.neutral[0],
22
+ hover: theme.colors.neutral[0]
23
+ },
24
+ icon: {
25
+ base: theme.colors.neutral[0],
26
+ hover: theme.colors.neutral[0]
27
+ },
28
+ item: {
29
+ background: {
30
+ base: theme.colors.neutral[1000],
31
+ hover: theme.colors.neutral[1100],
32
+ active: theme.colors.neutral[700]
33
33
  }
34
34
  }
35
35
  }
36
- };
36
+ });
37
37
  return sproutDarkTheme;
38
38
  };
39
39
 
package/lib/themes/extendedThemes/sproutTheme/light/theme.js CHANGED
@@ -1,39 +1,49 @@
1
+ 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); }
2
+
1
3
  import clone from "just-clone";
2
4
 
3
5
  var lightTheme = function lightTheme(theme) {
4
- var sproutLightTheme = clone(theme);
5
- sproutLightTheme.sprout = {
6
- colors: {
7
- navigation: {
8
- main: {
9
- background: {
10
- base: theme.colors.neutral[900],
11
- gradient: theme.colors.neutral[1000]
12
- }
13
- },
14
- secondary: {
15
- background: {
16
- base: theme.colors.neutral[800]
17
- }
18
- },
19
- text: {
20
- base: theme.colors.neutral[0],
21
- hover: theme.colors.neutral[0]
22
- },
23
- icon: {
24
- base: theme.colors.neutral[0],
25
- hover: theme.colors.neutral[0]
26
- },
27
- item: {
28
- background: {
29
- base: theme.colors.neutral[800],
30
- hover: theme.colors.neutral[1000],
31
- active: theme.colors.neutral[700]
32
- }
6
+ var sproutLightTheme = clone(theme); // copy theme that's passed in
7
+ // get all non color theme values
8
+ // get light theme changes
9
+
10
+ sproutLightTheme.colors = _extends({}, sproutLightTheme.colors, {
11
+ navigation: {
12
+ main: {
13
+ background: {
14
+ base: theme.colors.neutral[900],
15
+ overflowGradient: theme.colors.neutral[1000]
16
+ }
17
+ },
18
+ secondary: {
19
+ background: {
20
+ base: theme.colors.neutral[800]
33
21
  }
22
+ },
23
+ text: {
24
+ base: theme.colors.neutral[0],
25
+ hover: theme.colors.neutral[0]
26
+ },
27
+ icon: {
28
+ base: theme.colors.neutral[0],
29
+ hover: theme.colors.neutral[0]
30
+ },
31
+ listItem: {
32
+ background: {
33
+ base: theme.colors.neutral[800],
34
+ hover: theme.colors.neutral[1000],
35
+ selected: theme.colors.neutral[700]
36
+ }
37
+ }
38
+ },
39
+ icon: {
40
+ sentiment: {
41
+ positive_sentiment: theme.colors.blue[500],
42
+ negative_sentiment: theme.colors.red[500],
43
+ neutral_sentiment: theme.colors.neutral[300]
34
44
  }
35
45
  }
36
- };
46
+ });
37
47
  return sproutLightTheme;
38
48
  };
39
49
 
package/lib/themes/extendedThemes/sproutTheme/otherVals/theme.js ADDED
@@ -0,0 +1,5 @@
1
+ import clone from 'just-clone';
2
+
3
+ var nonColorThemeValues = function nonColorThemeValues(theme) {
4
+ var sproutTheme = clone(theme);
5
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/racine",
3
- "version": "11.2.5-sproutTheme-beta.0",
3
+ "version": "11.2.5-sproutTheme-beta.1",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "__flow__",