@sproutsocial/racine 11.6.0 → 11.6.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 (31) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/__flow__/ThemeProvider/index.js +1 -2
  3. package/__flow__/index.js +1 -2
  4. package/__flow__/themes/dark/theme.js +3 -3
  5. package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js +34 -15
  6. package/__flow__/themes/extendedThemes/sproutTheme/index.js +0 -1
  7. package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js +34 -15
  8. package/__flow__/types/theme.colors.flow.js +8 -1
  9. package/__flow__/types/theme.flow.js +10 -13
  10. package/commonjs/themes/dark/theme.js +3 -3
  11. package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js +36 -15
  12. package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js +36 -15
  13. package/commonjs/types/theme.flow.js +3 -1
  14. package/dist/themes/dark/dark.scss +0 -3
  15. package/lib/themes/dark/theme.js +3 -3
  16. package/lib/themes/extendedThemes/sproutTheme/dark/theme.js +33 -10
  17. package/lib/themes/extendedThemes/sproutTheme/light/theme.js +33 -10
  18. package/lib/types/theme.flow.js +2 -1
  19. package/package.json +1 -2
  20. package/__flow__/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js +0 -17
  21. package/__flow__/themes/extendedThemes/sproutTheme/dark/getDarkThemeColors.js +0 -36
  22. package/__flow__/themes/extendedThemes/sproutTheme/light/getLightThemeColors.js +0 -36
  23. package/__flow__/themes/extendedThemes/sproutTheme/sproutThemeType.flow.js +0 -36
  24. package/commonjs/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js +0 -16
  25. package/commonjs/themes/extendedThemes/sproutTheme/dark/getDarkThemeColors.js +0 -39
  26. package/commonjs/themes/extendedThemes/sproutTheme/light/getLightThemeColors.js +0 -39
  27. package/commonjs/themes/extendedThemes/sproutTheme/sproutThemeType.flow.js +0 -1
  28. package/lib/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js +0 -12
  29. package/lib/themes/extendedThemes/sproutTheme/dark/getDarkThemeColors.js +0 -34
  30. package/lib/themes/extendedThemes/sproutTheme/light/getLightThemeColors.js +0 -34
  31. package/lib/themes/extendedThemes/sproutTheme/sproutThemeType.flow.js +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # Change Log
2
2
 
3
+ ## 11.6.1
4
+
5
+ ### Patch Changes
6
+
7
+ - eb27d01: Fix interact util in dark mode themes
8
+ - 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.
9
+ - `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.
10
+ - 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.
11
+ - eb27d01: Remove 'just-clone' dependency
12
+ - eb27d01: Fix "navigation" colors in SproutTheme
13
+ - The "navigation" colors were not available in the theme due to being spread in incorrectly.
14
+ - eb27d01: Improve theme types to be more accurate
15
+
3
16
  ## 11.6.0
4
17
 
5
18
  ### Minor Changes
@@ -3,8 +3,7 @@ import * as React from "react";
3
3
  import { ThemeProvider as BaseThemeProvider } from "styled-components";
4
4
  import theme from "../themes/light/theme";
5
5
 
6
- import type { TypeTheme } from "../types/theme.flow";
7
- import type { TypeSproutTheme } from "../themes/extendedThemes/sproutTheme/sproutThemeType.flow";
6
+ import type { TypeTheme, TypeSproutTheme } from "../types/theme.flow";
8
7
 
9
8
  // We can append additional themes types here
10
9
  type TypeAllThemes = TypeTheme | TypeSproutTheme;
package/__flow__/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // @flow
2
2
  export type { EnumIconNames } from "./EnumIconNames";
3
- export type { TypeTheme } from "./types/theme.flow";
3
+ export type { TypeTheme, TypeSproutTheme } from "./types/theme.flow";
4
4
  export * from "./systemProps";
5
5
  export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
6
6
  export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
@@ -10,7 +10,6 @@ export {
10
10
  sproutLightTheme,
11
11
  sproutDarkTheme,
12
12
  } from "./themes/extendedThemes/sproutTheme";
13
- export type { TypeSproutTheme } from "./themes/extendedThemes/sproutTheme";
14
13
  export { default as Icon } from "./Icon";
15
14
  // DEPRECATED: Alert has been renamed to Banner
16
15
  export { default as Alert } from "./Banner";
@@ -29,9 +29,6 @@ export const shadows = {
29
29
 
30
30
  const colors = {
31
31
  ...lightTheme.colors,
32
- utils: {
33
- interact: interact(MODE),
34
- },
35
32
  app: {
36
33
  background: {
37
34
  base: COLORS.COLOR_NEUTRAL_1000,
@@ -238,6 +235,9 @@ const colors = {
238
235
 
239
236
  const darkTheme = {
240
237
  ...lightTheme,
238
+ utils: {
239
+ interact: interact(MODE),
240
+ },
241
241
  colors,
242
242
  shadows,
243
243
  mode: MODE,
@@ -1,23 +1,42 @@
1
1
  // @flow strict-local
2
- import clone from "just-clone";
3
2
  import baseDarkTheme from "../../../dark/theme";
4
- import { getDarkThemeColors } from "./getDarkThemeColors";
5
- import { getNonColorThemeValues } from "../NonColorThemeValues";
6
- import type { TypeSproutTheme } from "../sproutThemeType.flow";
3
+ import type { TypeSproutTheme } from "../../../../types/theme.flow";
7
4
 
8
- // clone base theme. (we don't want to mutate the base theme)
9
- const themeClone = clone(baseDarkTheme);
10
-
11
- // get non color theme values
12
- const nonColorThemeValues = getNonColorThemeValues(themeClone);
13
-
14
- // get sprout specific dark theme colors
15
- const darkThemeColors = getDarkThemeColors(themeClone.colors);
5
+ export const navigation = {
6
+ main: {
7
+ background: {
8
+ base: baseDarkTheme.colors.neutral[1000],
9
+ overflowGradient: baseDarkTheme.colors.neutral[1100],
10
+ },
11
+ },
12
+ secondary: {
13
+ background: {
14
+ base: baseDarkTheme.colors.neutral[900],
15
+ },
16
+ },
17
+ text: {
18
+ base: baseDarkTheme.colors.neutral[0],
19
+ hover: baseDarkTheme.colors.neutral[0],
20
+ },
21
+ icon: {
22
+ base: baseDarkTheme.colors.neutral[0],
23
+ hover: baseDarkTheme.colors.neutral[0],
24
+ },
25
+ listItem: {
26
+ background: {
27
+ base: baseDarkTheme.colors.neutral[1000],
28
+ hover: baseDarkTheme.colors.neutral[1100],
29
+ selected: baseDarkTheme.colors.neutral[700],
30
+ },
31
+ },
32
+ };
16
33
 
17
34
  const darkTheme: TypeSproutTheme = {
18
- ...themeClone,
19
- ...nonColorThemeValues,
20
- ...darkThemeColors,
35
+ ...baseDarkTheme,
36
+ colors: {
37
+ ...baseDarkTheme.colors,
38
+ navigation,
39
+ },
21
40
  };
22
41
 
23
42
  export default darkTheme;
@@ -1,4 +1,3 @@
1
1
  // @flow
2
2
  export { default as sproutLightTheme } from "./light/theme";
3
3
  export { default as sproutDarkTheme } from "./dark/theme";
4
- export type { TypeSproutTheme } from "./sproutThemeType.flow";
@@ -1,23 +1,42 @@
1
1
  // @flow strict-local
2
- import clone from "just-clone";
3
2
  import baseLightTheme from "../../../light/theme";
4
- import { getLightThemeColors } from "./getLightThemeColors";
5
- import { getNonColorThemeValues } from "../NonColorThemeValues";
6
- import type { TypeSproutTheme } from "../sproutThemeType.flow";
3
+ import type { TypeSproutTheme } from "../../../../types/theme.flow";
7
4
 
8
- // clone base theme. (we don't want to mutate the base theme)
9
- const themeClone = clone(baseLightTheme);
10
-
11
- // get non color theme values
12
- const nonColorThemeValues = getNonColorThemeValues(themeClone);
13
-
14
- // get sprout specific light theme colors
15
- const lightThemeColors = getLightThemeColors(themeClone.colors);
5
+ export const navigation = {
6
+ main: {
7
+ background: {
8
+ base: baseLightTheme.colors.neutral[900],
9
+ overflowGradient: baseLightTheme.colors.neutral[1000],
10
+ },
11
+ },
12
+ secondary: {
13
+ background: {
14
+ base: baseLightTheme.colors.neutral[800],
15
+ },
16
+ },
17
+ text: {
18
+ base: baseLightTheme.colors.neutral[0],
19
+ hover: baseLightTheme.colors.neutral[0],
20
+ },
21
+ icon: {
22
+ base: baseLightTheme.colors.neutral[0],
23
+ hover: baseLightTheme.colors.neutral[0],
24
+ },
25
+ listItem: {
26
+ background: {
27
+ base: baseLightTheme.colors.neutral[800],
28
+ hover: baseLightTheme.colors.neutral[1000],
29
+ selected: baseLightTheme.colors.neutral[700],
30
+ },
31
+ },
32
+ };
16
33
 
17
34
  const lightTheme: TypeSproutTheme = {
18
- ...themeClone,
19
- ...nonColorThemeValues,
20
- ...lightThemeColors,
35
+ ...baseLightTheme,
36
+ colors: {
37
+ ...baseLightTheme.colors,
38
+ navigation,
39
+ },
21
40
  };
22
41
 
23
42
  export default lightTheme;
@@ -229,7 +229,14 @@ type TypeElevationColors = {|
229
229
  },
230
230
  |};
231
231
 
232
- type TypeDatavizColors = typeof datavizPalette;
232
+ type TypeDatavizColors = {|
233
+ DATAVIZ_COLORS_MAP: typeof datavizPalette.DATAVIZ_COLORS_MAP,
234
+ DATAVIZ_COLORS_LIST: typeof datavizPalette.DATAVIZ_COLORS_LIST,
235
+ dataviz: {
236
+ map: typeof datavizPalette.DATAVIZ_COLORS_MAP,
237
+ list: typeof datavizPalette.DATAVIZ_COLORS_LIST,
238
+ },
239
+ |};
233
240
 
234
241
  type TypeNetworkColors = {|
235
242
  network: {
@@ -13,7 +13,9 @@ import {
13
13
  } from "../themes/light/theme";
14
14
  import type { TypeColors } from "./theme.colors.flow.js";
15
15
  import type { TypeFontFamilyString } from "../themes/light/theme";
16
+ import { navigation } from "../themes/extendedThemes/sproutTheme/light/theme";
16
17
 
18
+ export type TypeThemeUtils = {| interact: (color: string) => string |};
17
19
  export type TypeThemeMode = "light" | "dark";
18
20
  export type TypeBreakpoint = typeof breakpoints;
19
21
  export type TypeTypography = typeof typography;
@@ -30,6 +32,7 @@ export type TypeDuration = typeof duration;
30
32
 
31
33
  export type TypeTheme = {
32
34
  mode: TypeThemeMode,
35
+ utils: TypeThemeUtils,
33
36
  breakpoints: TypeBreakpoint,
34
37
  colors: TypeColor,
35
38
  typography: TypeTypography,
@@ -44,17 +47,11 @@ export type TypeTheme = {
44
47
  duration: TypeDuration,
45
48
  };
46
49
 
47
- export type TypeNonColorThemeValues = {
48
- mode: TypeThemeMode,
49
- breakpoints: TypeBreakpoint,
50
- typography: TypeTypography,
51
- fontWeights: TypeFontWeight,
52
- fontFamily: TypeFontFamily,
53
- space: TypeSpace,
54
- radii: TypeRadii,
55
- borders: TypeBorder,
56
- borderWidths: TypeBorderWidth,
57
- shadows: TypeShadow,
58
- easing: TypeEasing,
59
- duration: TypeDuration,
50
+ // Extended themes
51
+ export type TypeSproutTheme = {
52
+ ...$Exact<TypeTheme>,
53
+ colors: {|
54
+ ...$Exact<TypeColor>,
55
+ navigation: typeof navigation,
56
+ |},
60
57
  };
@@ -31,9 +31,6 @@ var shadows = {
31
31
  exports.shadows = shadows;
32
32
 
33
33
  var colors = _extends({}, _theme.default.colors, {
34
- utils: {
35
- interact: (0, _interact.default)(MODE)
36
- },
37
34
  app: {
38
35
  background: {
39
36
  base: _seedsColor.default.COLOR_NEUTRAL_1000
@@ -237,6 +234,9 @@ var colors = _extends({}, _theme.default.colors, {
237
234
  }, _datavizPalette.datavizPalette);
238
235
 
239
236
  var darkTheme = _extends({}, _theme.default, {
237
+ utils: {
238
+ interact: (0, _interact.default)(MODE)
239
+ },
240
240
  colors: colors,
241
241
  shadows: shadows,
242
242
  mode: MODE
@@ -1,28 +1,49 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.default = void 0;
5
-
6
- var _justClone = _interopRequireDefault(require("just-clone"));
4
+ exports.navigation = exports.default = void 0;
7
5
 
8
6
  var _theme = _interopRequireDefault(require("../../../dark/theme"));
9
7
 
10
- var _getDarkThemeColors = require("./getDarkThemeColors");
11
-
12
- var _NonColorThemeValues = require("../NonColorThemeValues");
13
-
14
8
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
9
 
16
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); }
17
11
 
18
- // clone base theme. (we don't want to mutate the base theme)
19
- var themeClone = (0, _justClone.default)(_theme.default); // get non color theme values
20
-
21
- var nonColorThemeValues = (0, _NonColorThemeValues.getNonColorThemeValues)(themeClone); // get sprout specific dark theme colors
22
-
23
- var darkThemeColors = (0, _getDarkThemeColors.getDarkThemeColors)(themeClone.colors);
24
-
25
- var darkTheme = _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
12
+ var navigation = {
13
+ main: {
14
+ background: {
15
+ base: _theme.default.colors.neutral[1000],
16
+ overflowGradient: _theme.default.colors.neutral[1100]
17
+ }
18
+ },
19
+ secondary: {
20
+ background: {
21
+ base: _theme.default.colors.neutral[900]
22
+ }
23
+ },
24
+ text: {
25
+ base: _theme.default.colors.neutral[0],
26
+ hover: _theme.default.colors.neutral[0]
27
+ },
28
+ icon: {
29
+ base: _theme.default.colors.neutral[0],
30
+ hover: _theme.default.colors.neutral[0]
31
+ },
32
+ listItem: {
33
+ background: {
34
+ base: _theme.default.colors.neutral[1000],
35
+ hover: _theme.default.colors.neutral[1100],
36
+ selected: _theme.default.colors.neutral[700]
37
+ }
38
+ }
39
+ };
40
+ exports.navigation = navigation;
41
+
42
+ var darkTheme = _extends({}, _theme.default, {
43
+ colors: _extends({}, _theme.default.colors, {
44
+ navigation: navigation
45
+ })
46
+ });
26
47
 
27
48
  var _default = darkTheme;
28
49
  exports.default = _default;
@@ -1,28 +1,49 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.default = void 0;
5
-
6
- var _justClone = _interopRequireDefault(require("just-clone"));
4
+ exports.navigation = exports.default = void 0;
7
5
 
8
6
  var _theme = _interopRequireDefault(require("../../../light/theme"));
9
7
 
10
- var _getLightThemeColors = require("./getLightThemeColors");
11
-
12
- var _NonColorThemeValues = require("../NonColorThemeValues");
13
-
14
8
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
9
 
16
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); }
17
11
 
18
- // clone base theme. (we don't want to mutate the base theme)
19
- var themeClone = (0, _justClone.default)(_theme.default); // get non color theme values
20
-
21
- var nonColorThemeValues = (0, _NonColorThemeValues.getNonColorThemeValues)(themeClone); // get sprout specific light theme colors
22
-
23
- var lightThemeColors = (0, _getLightThemeColors.getLightThemeColors)(themeClone.colors);
24
-
25
- var lightTheme = _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
12
+ var navigation = {
13
+ main: {
14
+ background: {
15
+ base: _theme.default.colors.neutral[900],
16
+ overflowGradient: _theme.default.colors.neutral[1000]
17
+ }
18
+ },
19
+ secondary: {
20
+ background: {
21
+ base: _theme.default.colors.neutral[800]
22
+ }
23
+ },
24
+ text: {
25
+ base: _theme.default.colors.neutral[0],
26
+ hover: _theme.default.colors.neutral[0]
27
+ },
28
+ icon: {
29
+ base: _theme.default.colors.neutral[0],
30
+ hover: _theme.default.colors.neutral[0]
31
+ },
32
+ listItem: {
33
+ background: {
34
+ base: _theme.default.colors.neutral[800],
35
+ hover: _theme.default.colors.neutral[1000],
36
+ selected: _theme.default.colors.neutral[700]
37
+ }
38
+ }
39
+ };
40
+ exports.navigation = navigation;
41
+
42
+ var lightTheme = _extends({}, _theme.default, {
43
+ colors: _extends({}, _theme.default.colors, {
44
+ navigation: navigation
45
+ })
46
+ });
26
47
 
27
48
  var _default = lightTheme;
28
49
  exports.default = _default;
@@ -1,3 +1,5 @@
1
1
  "use strict";
2
2
 
3
- var _theme = require("../themes/light/theme");
3
+ var _theme = require("../themes/light/theme");
4
+
5
+ var _theme2 = require("../themes/extendedThemes/sproutTheme/light/theme");
@@ -430,9 +430,6 @@ $dark: (
430
430
  18: #ff7f6e,
431
431
  19: #c2f2bd,
432
432
  20: #ffe99a
433
- ),
434
- utils: (
435
-
436
433
  )
437
434
  ),
438
435
  typography: (
@@ -15,9 +15,6 @@ export var shadows = {
15
15
  }; // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
16
16
 
17
17
  var colors = _extends({}, lightTheme.colors, {
18
- utils: {
19
- interact: interact(MODE)
20
- },
21
18
  app: {
22
19
  background: {
23
20
  base: COLORS.COLOR_NEUTRAL_1000
@@ -221,6 +218,9 @@ var colors = _extends({}, lightTheme.colors, {
221
218
  }, datavizPalette);
222
219
 
223
220
  var darkTheme = _extends({}, lightTheme, {
221
+ utils: {
222
+ interact: interact(MODE)
223
+ },
224
224
  colors: colors,
225
225
  shadows: shadows,
226
226
  mode: MODE
@@ -1,16 +1,39 @@
1
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
2
 
3
- import clone from "just-clone";
4
3
  import baseDarkTheme from "../../../dark/theme";
5
- import { getDarkThemeColors } from "./getDarkThemeColors";
6
- import { getNonColorThemeValues } from "../NonColorThemeValues";
7
- // clone base theme. (we don't want to mutate the base theme)
8
- var themeClone = clone(baseDarkTheme); // get non color theme values
4
+ export var navigation = {
5
+ main: {
6
+ background: {
7
+ base: baseDarkTheme.colors.neutral[1000],
8
+ overflowGradient: baseDarkTheme.colors.neutral[1100]
9
+ }
10
+ },
11
+ secondary: {
12
+ background: {
13
+ base: baseDarkTheme.colors.neutral[900]
14
+ }
15
+ },
16
+ text: {
17
+ base: baseDarkTheme.colors.neutral[0],
18
+ hover: baseDarkTheme.colors.neutral[0]
19
+ },
20
+ icon: {
21
+ base: baseDarkTheme.colors.neutral[0],
22
+ hover: baseDarkTheme.colors.neutral[0]
23
+ },
24
+ listItem: {
25
+ background: {
26
+ base: baseDarkTheme.colors.neutral[1000],
27
+ hover: baseDarkTheme.colors.neutral[1100],
28
+ selected: baseDarkTheme.colors.neutral[700]
29
+ }
30
+ }
31
+ };
9
32
 
10
- var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific dark theme colors
11
-
12
- var darkThemeColors = getDarkThemeColors(themeClone.colors);
13
-
14
- var darkTheme = _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
33
+ var darkTheme = _extends({}, baseDarkTheme, {
34
+ colors: _extends({}, baseDarkTheme.colors, {
35
+ navigation: navigation
36
+ })
37
+ });
15
38
 
16
39
  export default darkTheme;
@@ -1,16 +1,39 @@
1
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
2
 
3
- import clone from "just-clone";
4
3
  import baseLightTheme from "../../../light/theme";
5
- import { getLightThemeColors } from "./getLightThemeColors";
6
- import { getNonColorThemeValues } from "../NonColorThemeValues";
7
- // clone base theme. (we don't want to mutate the base theme)
8
- var themeClone = clone(baseLightTheme); // get non color theme values
4
+ export var navigation = {
5
+ main: {
6
+ background: {
7
+ base: baseLightTheme.colors.neutral[900],
8
+ overflowGradient: baseLightTheme.colors.neutral[1000]
9
+ }
10
+ },
11
+ secondary: {
12
+ background: {
13
+ base: baseLightTheme.colors.neutral[800]
14
+ }
15
+ },
16
+ text: {
17
+ base: baseLightTheme.colors.neutral[0],
18
+ hover: baseLightTheme.colors.neutral[0]
19
+ },
20
+ icon: {
21
+ base: baseLightTheme.colors.neutral[0],
22
+ hover: baseLightTheme.colors.neutral[0]
23
+ },
24
+ listItem: {
25
+ background: {
26
+ base: baseLightTheme.colors.neutral[800],
27
+ hover: baseLightTheme.colors.neutral[1000],
28
+ selected: baseLightTheme.colors.neutral[700]
29
+ }
30
+ }
31
+ };
9
32
 
10
- var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific light theme colors
11
-
12
- var lightThemeColors = getLightThemeColors(themeClone.colors);
13
-
14
- var lightTheme = _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
33
+ var lightTheme = _extends({}, baseLightTheme, {
34
+ colors: _extends({}, baseLightTheme.colors, {
35
+ navigation: navigation
36
+ })
37
+ });
15
38
 
16
39
  export default lightTheme;
@@ -1 +1,2 @@
1
- import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";
1
+ import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";
2
+ import { navigation } from "../themes/extendedThemes/sproutTheme/light/theme";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/racine",
3
- "version": "11.6.0",
3
+ "version": "11.6.1",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "__flow__",
@@ -66,7 +66,6 @@
66
66
  "dependencies": {
67
67
  "@styled-system/theme-get": "^5.1.2",
68
68
  "classnames": "^2.2.6",
69
- "just-clone": "^5.0.1",
70
69
  "lodash.curry": "^4.1.1",
71
70
  "lodash.uniqueid": "^4.0.1",
72
71
  "lru-memoize": "^1.1.0",
@@ -1,17 +0,0 @@
1
- // @flow strict-local
2
- import type {
3
- TypeNonColorThemeValues,
4
- TypeTheme,
5
- } from "../../../../types/theme.flow.js";
6
-
7
- export function getNonColorThemeValues(
8
- theme: TypeTheme
9
- ): TypeNonColorThemeValues {
10
- const { colors, ...otherThemeValues } = theme;
11
- return {
12
- ...otherThemeValues,
13
- /**
14
- * You can add your own theme values or overrides here.
15
- */
16
- };
17
- }
@@ -1,36 +0,0 @@
1
- // @flow strict-local
2
- import type { TypeColors } from "../../../../types/theme.colors.flow.js";
3
-
4
- export function getDarkThemeColors(themeColors: TypeColors) {
5
- return {
6
- ...themeColors,
7
- navigation: {
8
- main: {
9
- background: {
10
- base: themeColors.neutral[1000],
11
- gradient: themeColors.neutral[1100],
12
- },
13
- },
14
- secondary: {
15
- background: {
16
- base: themeColors.neutral[900],
17
- },
18
- },
19
- text: {
20
- base: themeColors.neutral[0],
21
- hover: themeColors.neutral[0],
22
- },
23
- icon: {
24
- base: themeColors.neutral[0],
25
- hover: themeColors.neutral[0],
26
- },
27
- listItem: {
28
- background: {
29
- base: themeColors.neutral[1000],
30
- hover: themeColors.neutral[1100],
31
- active: themeColors.neutral[700],
32
- },
33
- },
34
- },
35
- };
36
- }
@@ -1,36 +0,0 @@
1
- // @flow strict-local
2
- import type { TypeColors } from "../../../../types/theme.colors.flow.js";
3
-
4
- export function getLightThemeColors(themeColors: TypeColors) {
5
- return {
6
- ...themeColors,
7
- navigation: {
8
- main: {
9
- background: {
10
- base: themeColors.neutral[900],
11
- overflowGradient: themeColors.neutral[1000],
12
- },
13
- },
14
- secondary: {
15
- background: {
16
- base: themeColors.neutral[800],
17
- },
18
- },
19
- text: {
20
- base: themeColors.neutral[0],
21
- hover: themeColors.neutral[0],
22
- },
23
- icon: {
24
- base: themeColors.neutral[0],
25
- hover: themeColors.neutral[0],
26
- },
27
- listItem: {
28
- background: {
29
- base: themeColors.neutral[800],
30
- hover: themeColors.neutral[1000],
31
- selected: themeColors.neutral[700],
32
- },
33
- },
34
- },
35
- };
36
- }
@@ -1,36 +0,0 @@
1
- // @flow strict-local
2
- import type { TypeTheme } from "../../../types/theme.flow";
3
-
4
- export type TypeSproutTheme = {
5
- ...$Exact<TypeTheme>,
6
- colors: {|
7
- navigation: {|
8
- main: {|
9
- background: {|
10
- base: string,
11
- gradient: string,
12
- |},
13
- |},
14
- secondary: {|
15
- background: {|
16
- base: string,
17
- |},
18
- |},
19
- text: {|
20
- base: string,
21
- hover: string,
22
- |},
23
- icon: {|
24
- base: string,
25
- hover: string,
26
- |},
27
- listItem: {|
28
- background: {|
29
- base: string,
30
- hover: string,
31
- active: string,
32
- |},
33
- |},
34
- |},
35
- |},
36
- };
@@ -1,16 +0,0 @@
1
- "use strict";
2
-
3
- exports.__esModule = true;
4
- exports.getNonColorThemeValues = getNonColorThemeValues;
5
- var _excluded = ["colors"];
6
-
7
- 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); }
8
-
9
- 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; }
10
-
11
- function getNonColorThemeValues(theme) {
12
- var colors = theme.colors,
13
- otherThemeValues = _objectWithoutPropertiesLoose(theme, _excluded);
14
-
15
- return _extends({}, otherThemeValues);
16
- }
@@ -1,39 +0,0 @@
1
- "use strict";
2
-
3
- exports.__esModule = true;
4
- exports.getDarkThemeColors = getDarkThemeColors;
5
-
6
- 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); }
7
-
8
- function getDarkThemeColors(themeColors) {
9
- return _extends({}, themeColors, {
10
- navigation: {
11
- main: {
12
- background: {
13
- base: themeColors.neutral[1000],
14
- gradient: themeColors.neutral[1100]
15
- }
16
- },
17
- secondary: {
18
- background: {
19
- base: themeColors.neutral[900]
20
- }
21
- },
22
- text: {
23
- base: themeColors.neutral[0],
24
- hover: themeColors.neutral[0]
25
- },
26
- icon: {
27
- base: themeColors.neutral[0],
28
- hover: themeColors.neutral[0]
29
- },
30
- listItem: {
31
- background: {
32
- base: themeColors.neutral[1000],
33
- hover: themeColors.neutral[1100],
34
- active: themeColors.neutral[700]
35
- }
36
- }
37
- }
38
- });
39
- }
@@ -1,39 +0,0 @@
1
- "use strict";
2
-
3
- exports.__esModule = true;
4
- exports.getLightThemeColors = getLightThemeColors;
5
-
6
- 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); }
7
-
8
- function getLightThemeColors(themeColors) {
9
- return _extends({}, themeColors, {
10
- navigation: {
11
- main: {
12
- background: {
13
- base: themeColors.neutral[900],
14
- overflowGradient: themeColors.neutral[1000]
15
- }
16
- },
17
- secondary: {
18
- background: {
19
- base: themeColors.neutral[800]
20
- }
21
- },
22
- text: {
23
- base: themeColors.neutral[0],
24
- hover: themeColors.neutral[0]
25
- },
26
- icon: {
27
- base: themeColors.neutral[0],
28
- hover: themeColors.neutral[0]
29
- },
30
- listItem: {
31
- background: {
32
- base: themeColors.neutral[800],
33
- hover: themeColors.neutral[1000],
34
- selected: themeColors.neutral[700]
35
- }
36
- }
37
- }
38
- });
39
- }
@@ -1,12 +0,0 @@
1
- var _excluded = ["colors"];
2
-
3
- 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); }
4
-
5
- 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; }
6
-
7
- export function getNonColorThemeValues(theme) {
8
- var colors = theme.colors,
9
- otherThemeValues = _objectWithoutPropertiesLoose(theme, _excluded);
10
-
11
- return _extends({}, otherThemeValues);
12
- }
@@ -1,34 +0,0 @@
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
-
3
- export function getDarkThemeColors(themeColors) {
4
- return _extends({}, themeColors, {
5
- navigation: {
6
- main: {
7
- background: {
8
- base: themeColors.neutral[1000],
9
- gradient: themeColors.neutral[1100]
10
- }
11
- },
12
- secondary: {
13
- background: {
14
- base: themeColors.neutral[900]
15
- }
16
- },
17
- text: {
18
- base: themeColors.neutral[0],
19
- hover: themeColors.neutral[0]
20
- },
21
- icon: {
22
- base: themeColors.neutral[0],
23
- hover: themeColors.neutral[0]
24
- },
25
- listItem: {
26
- background: {
27
- base: themeColors.neutral[1000],
28
- hover: themeColors.neutral[1100],
29
- active: themeColors.neutral[700]
30
- }
31
- }
32
- }
33
- });
34
- }
@@ -1,34 +0,0 @@
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
-
3
- export function getLightThemeColors(themeColors) {
4
- return _extends({}, themeColors, {
5
- navigation: {
6
- main: {
7
- background: {
8
- base: themeColors.neutral[900],
9
- overflowGradient: themeColors.neutral[1000]
10
- }
11
- },
12
- secondary: {
13
- background: {
14
- base: themeColors.neutral[800]
15
- }
16
- },
17
- text: {
18
- base: themeColors.neutral[0],
19
- hover: themeColors.neutral[0]
20
- },
21
- icon: {
22
- base: themeColors.neutral[0],
23
- hover: themeColors.neutral[0]
24
- },
25
- listItem: {
26
- background: {
27
- base: themeColors.neutral[800],
28
- hover: themeColors.neutral[1000],
29
- selected: themeColors.neutral[700]
30
- }
31
- }
32
- }
33
- });
34
- }