@sproutsocial/racine 11.5.0 → 11.6.0
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.
- package/CHANGELOG.md +6 -0
- package/__flow__/ThemeProvider/index.js +6 -2
- package/__flow__/index.js +5 -0
- package/__flow__/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js +17 -0
- package/__flow__/themes/extendedThemes/sproutTheme/dark/getDarkThemeColors.js +36 -0
- package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js +23 -0
- package/__flow__/themes/extendedThemes/sproutTheme/index.js +4 -0
- package/__flow__/themes/extendedThemes/sproutTheme/light/getLightThemeColors.js +36 -0
- package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js +23 -0
- package/__flow__/themes/extendedThemes/sproutTheme/sproutThemeType.flow.js +36 -0
- package/__flow__/types/theme.flow.js +17 -0
- package/commonjs/index.js +8 -1
- package/commonjs/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js +16 -0
- package/commonjs/themes/extendedThemes/sproutTheme/dark/getDarkThemeColors.js +39 -0
- package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js +28 -0
- package/commonjs/themes/extendedThemes/sproutTheme/index.js +14 -0
- package/commonjs/themes/extendedThemes/sproutTheme/light/getLightThemeColors.js +39 -0
- package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js +28 -0
- package/commonjs/themes/extendedThemes/sproutTheme/sproutThemeType.flow.js +1 -0
- package/lib/index.js +1 -0
- package/lib/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js +12 -0
- package/lib/themes/extendedThemes/sproutTheme/dark/getDarkThemeColors.js +34 -0
- package/lib/themes/extendedThemes/sproutTheme/dark/theme.js +16 -0
- package/lib/themes/extendedThemes/sproutTheme/index.js +2 -0
- package/lib/themes/extendedThemes/sproutTheme/light/getLightThemeColors.js +34 -0
- package/lib/themes/extendedThemes/sproutTheme/light/theme.js +16 -0
- package/lib/themes/extendedThemes/sproutTheme/sproutThemeType.flow.js +0 -0
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,10 +3,14 @@ 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
|
|
6
|
+
import type { TypeTheme } from "../types/theme.flow";
|
|
7
|
+
import type { TypeSproutTheme } from "../themes/extendedThemes/sproutTheme/sproutThemeType.flow";
|
|
8
|
+
|
|
9
|
+
// We can append additional themes types here
|
|
10
|
+
type TypeAllThemes = TypeTheme | TypeSproutTheme;
|
|
7
11
|
|
|
8
12
|
type TypeProps = $ReadOnly<{|
|
|
9
|
-
theme?:
|
|
13
|
+
theme?: TypeAllThemes,
|
|
10
14
|
children: React.Node,
|
|
11
15
|
|}>;
|
|
12
16
|
|
package/__flow__/index.js
CHANGED
|
@@ -6,6 +6,11 @@ export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
|
|
|
6
6
|
export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
|
|
7
7
|
export { default as theme } from "./themes/light/theme";
|
|
8
8
|
export { default as darkTheme } from "./themes/dark/theme";
|
|
9
|
+
export {
|
|
10
|
+
sproutLightTheme,
|
|
11
|
+
sproutDarkTheme,
|
|
12
|
+
} from "./themes/extendedThemes/sproutTheme";
|
|
13
|
+
export type { TypeSproutTheme } from "./themes/extendedThemes/sproutTheme";
|
|
9
14
|
export { default as Icon } from "./Icon";
|
|
10
15
|
// DEPRECATED: Alert has been renamed to Banner
|
|
11
16
|
export { default as Alert } from "./Banner";
|
|
@@ -0,0 +1,17 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// @flow strict-local
|
|
2
|
+
import clone from "just-clone";
|
|
3
|
+
import baseDarkTheme from "../../../dark/theme";
|
|
4
|
+
import { getDarkThemeColors } from "./getDarkThemeColors";
|
|
5
|
+
import { getNonColorThemeValues } from "../NonColorThemeValues";
|
|
6
|
+
import type { TypeSproutTheme } from "../sproutThemeType.flow";
|
|
7
|
+
|
|
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);
|
|
16
|
+
|
|
17
|
+
const darkTheme: TypeSproutTheme = {
|
|
18
|
+
...themeClone,
|
|
19
|
+
...nonColorThemeValues,
|
|
20
|
+
...darkThemeColors,
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export default darkTheme;
|
|
@@ -0,0 +1,36 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// @flow strict-local
|
|
2
|
+
import clone from "just-clone";
|
|
3
|
+
import baseLightTheme from "../../../light/theme";
|
|
4
|
+
import { getLightThemeColors } from "./getLightThemeColors";
|
|
5
|
+
import { getNonColorThemeValues } from "../NonColorThemeValues";
|
|
6
|
+
import type { TypeSproutTheme } from "../sproutThemeType.flow";
|
|
7
|
+
|
|
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);
|
|
16
|
+
|
|
17
|
+
const lightTheme: TypeSproutTheme = {
|
|
18
|
+
...themeClone,
|
|
19
|
+
...nonColorThemeValues,
|
|
20
|
+
...lightThemeColors,
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export default lightTheme;
|
|
@@ -0,0 +1,36 @@
|
|
|
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
|
+
};
|
|
@@ -14,6 +14,7 @@ import {
|
|
|
14
14
|
import type { TypeColors } from "./theme.colors.flow.js";
|
|
15
15
|
import type { TypeFontFamilyString } from "../themes/light/theme";
|
|
16
16
|
|
|
17
|
+
export type TypeThemeMode = "light" | "dark";
|
|
17
18
|
export type TypeBreakpoint = typeof breakpoints;
|
|
18
19
|
export type TypeTypography = typeof typography;
|
|
19
20
|
export type TypeFontWeight = typeof fontWeights;
|
|
@@ -28,6 +29,7 @@ export type TypeEasing = typeof easing;
|
|
|
28
29
|
export type TypeDuration = typeof duration;
|
|
29
30
|
|
|
30
31
|
export type TypeTheme = {
|
|
32
|
+
mode: TypeThemeMode,
|
|
31
33
|
breakpoints: TypeBreakpoint,
|
|
32
34
|
colors: TypeColor,
|
|
33
35
|
typography: TypeTypography,
|
|
@@ -41,3 +43,18 @@ export type TypeTheme = {
|
|
|
41
43
|
easing: TypeEasing,
|
|
42
44
|
duration: TypeDuration,
|
|
43
45
|
};
|
|
46
|
+
|
|
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,
|
|
60
|
+
};
|
package/commonjs/index.js
CHANGED
|
@@ -61,6 +61,8 @@ var _exportNames = {
|
|
|
61
61
|
Menu: true,
|
|
62
62
|
Listbox: true,
|
|
63
63
|
OverflowList: true,
|
|
64
|
+
sproutLightTheme: true,
|
|
65
|
+
sproutDarkTheme: true,
|
|
64
66
|
toast: true,
|
|
65
67
|
MenuButton: true,
|
|
66
68
|
MenuButtonContext: true,
|
|
@@ -70,7 +72,7 @@ var _exportNames = {
|
|
|
70
72
|
DateRangePicker: true,
|
|
71
73
|
VisuallyHidden: true
|
|
72
74
|
};
|
|
73
|
-
exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.toast = exports.theme = exports.focusRing = exports.disabled = exports.darkTheme = exports.VisuallyHidden = exports.Tooltip = exports.TokenInput = exports.Token = exports.ToggleHint = exports.ToastContainer = exports.ThemeProvider = exports.Textarea = exports.Text = exports.Tabs = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.Switch = exports.Stack = exports.Skeleton = exports.SingleDatePicker = exports.Select = exports.SegmentedControl = exports.Radio = exports.Popout = exports.OverflowList = exports.Numeral = exports.Modal = exports.Message = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.Menu = exports.LoaderButton = exports.Loader = exports.ListboxButton = exports.Listbox = exports.Link = exports.Label = exports.KeyboardKey = exports.Input = exports.Indicator = exports.Image = exports.Icon = exports.FormField = exports.Fieldset = exports.EmptyState = exports.Drawer = exports.DateRangePicker = exports.Collapsible = exports.Checkbox = exports.ChartLegend = exports.CharacterCounter = exports.Card = exports.Button = exports.Breadcrumb = exports.Box = exports.Banner = exports.Badge = exports.Avatar = exports.Alert = void 0;
|
|
75
|
+
exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.toast = exports.theme = exports.sproutLightTheme = exports.sproutDarkTheme = exports.focusRing = exports.disabled = exports.darkTheme = exports.VisuallyHidden = exports.Tooltip = exports.TokenInput = exports.Token = exports.ToggleHint = exports.ToastContainer = exports.ThemeProvider = exports.Textarea = exports.Text = exports.Tabs = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.Switch = exports.Stack = exports.Skeleton = exports.SingleDatePicker = exports.Select = exports.SegmentedControl = exports.Radio = exports.Popout = exports.OverflowList = exports.Numeral = exports.Modal = exports.Message = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.Menu = exports.LoaderButton = exports.Loader = exports.ListboxButton = exports.Listbox = exports.Link = exports.Label = exports.KeyboardKey = exports.Input = exports.Indicator = exports.Image = exports.Icon = exports.FormField = exports.Fieldset = exports.EmptyState = exports.Drawer = exports.DateRangePicker = exports.Collapsible = exports.Checkbox = exports.ChartLegend = exports.CharacterCounter = exports.Card = exports.Button = exports.Breadcrumb = exports.Box = exports.Banner = exports.Badge = exports.Avatar = exports.Alert = void 0;
|
|
74
76
|
|
|
75
77
|
var _systemProps = require("./systemProps");
|
|
76
78
|
|
|
@@ -101,6 +103,11 @@ var _theme2 = _interopRequireDefault(require("./themes/dark/theme"));
|
|
|
101
103
|
|
|
102
104
|
exports.darkTheme = _theme2.default;
|
|
103
105
|
|
|
106
|
+
var _sproutTheme = require("./themes/extendedThemes/sproutTheme");
|
|
107
|
+
|
|
108
|
+
exports.sproutLightTheme = _sproutTheme.sproutLightTheme;
|
|
109
|
+
exports.sproutDarkTheme = _sproutTheme.sproutDarkTheme;
|
|
110
|
+
|
|
104
111
|
var _Icon = _interopRequireDefault(require("./Icon"));
|
|
105
112
|
|
|
106
113
|
exports.Icon = _Icon.default;
|
|
@@ -0,0 +1,16 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _justClone = _interopRequireDefault(require("just-clone"));
|
|
7
|
+
|
|
8
|
+
var _theme = _interopRequireDefault(require("../../../dark/theme"));
|
|
9
|
+
|
|
10
|
+
var _getDarkThemeColors = require("./getDarkThemeColors");
|
|
11
|
+
|
|
12
|
+
var _NonColorThemeValues = require("../NonColorThemeValues");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
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
|
+
|
|
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);
|
|
26
|
+
|
|
27
|
+
var _default = darkTheme;
|
|
28
|
+
exports.default = _default;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.sproutLightTheme = exports.sproutDarkTheme = void 0;
|
|
5
|
+
|
|
6
|
+
var _theme = _interopRequireDefault(require("./light/theme"));
|
|
7
|
+
|
|
8
|
+
exports.sproutLightTheme = _theme.default;
|
|
9
|
+
|
|
10
|
+
var _theme2 = _interopRequireDefault(require("./dark/theme"));
|
|
11
|
+
|
|
12
|
+
exports.sproutDarkTheme = _theme2.default;
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -0,0 +1,39 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _justClone = _interopRequireDefault(require("just-clone"));
|
|
7
|
+
|
|
8
|
+
var _theme = _interopRequireDefault(require("../../../light/theme"));
|
|
9
|
+
|
|
10
|
+
var _getLightThemeColors = require("./getLightThemeColors");
|
|
11
|
+
|
|
12
|
+
var _NonColorThemeValues = require("../NonColorThemeValues");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
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
|
+
|
|
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);
|
|
26
|
+
|
|
27
|
+
var _default = lightTheme;
|
|
28
|
+
exports.default = _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
package/lib/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
|
|
|
3
3
|
export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
|
|
4
4
|
export { default as theme } from "./themes/light/theme";
|
|
5
5
|
export { default as darkTheme } from "./themes/dark/theme";
|
|
6
|
+
export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme";
|
|
6
7
|
export { default as Icon } from "./Icon"; // DEPRECATED: Alert has been renamed to Banner
|
|
7
8
|
|
|
8
9
|
export { default as Alert } from "./Banner";
|
|
@@ -0,0 +1,12 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
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
|
+
import clone from "just-clone";
|
|
4
|
+
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
|
|
9
|
+
|
|
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);
|
|
15
|
+
|
|
16
|
+
export default darkTheme;
|
|
@@ -0,0 +1,34 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
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
|
+
import clone from "just-clone";
|
|
4
|
+
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
|
|
9
|
+
|
|
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);
|
|
15
|
+
|
|
16
|
+
export default lightTheme;
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/racine",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.6.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
6
|
"__flow__",
|
|
@@ -66,6 +66,7 @@
|
|
|
66
66
|
"dependencies": {
|
|
67
67
|
"@styled-system/theme-get": "^5.1.2",
|
|
68
68
|
"classnames": "^2.2.6",
|
|
69
|
+
"just-clone": "^5.0.1",
|
|
69
70
|
"lodash.curry": "^4.1.1",
|
|
70
71
|
"lodash.uniqueid": "^4.0.1",
|
|
71
72
|
"lru-memoize": "^1.1.0",
|