@sproutsocial/racine 11.6.1-theme-type.0 → 11.6.1-theme-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.
- package/__flow__/themes/dark/theme.js +3 -3
- package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js +33 -14
- package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js +33 -14
- package/__flow__/types/theme.colors.flow.js +8 -1
- package/__flow__/types/theme.flow.js +4 -43
- package/commonjs/themes/dark/theme.js +3 -3
- package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js +36 -15
- package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js +36 -15
- package/commonjs/types/theme.flow.js +3 -1
- package/dist/themes/dark/dark.scss +0 -3
- package/lib/themes/dark/theme.js +3 -3
- package/lib/themes/extendedThemes/sproutTheme/dark/theme.js +33 -10
- package/lib/themes/extendedThemes/sproutTheme/light/theme.js +33 -10
- package/lib/types/theme.flow.js +2 -1
- package/package.json +1 -2
- package/__flow__/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js +0 -17
- package/__flow__/themes/extendedThemes/sproutTheme/dark/getDarkThemeColors.js +0 -36
- package/__flow__/themes/extendedThemes/sproutTheme/light/getLightThemeColors.js +0 -36
- package/commonjs/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js +0 -16
- package/commonjs/themes/extendedThemes/sproutTheme/dark/getDarkThemeColors.js +0 -39
- package/commonjs/themes/extendedThemes/sproutTheme/light/getLightThemeColors.js +0 -39
- package/lib/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js +0 -12
- package/lib/themes/extendedThemes/sproutTheme/dark/getDarkThemeColors.js +0 -34
- package/lib/themes/extendedThemes/sproutTheme/light/getLightThemeColors.js +0 -34
|
@@ -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
3
|
import type { TypeSproutTheme } from "../../../../types/theme.flow";
|
|
7
4
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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
|
-
...
|
|
19
|
-
|
|
20
|
-
|
|
35
|
+
...baseDarkTheme,
|
|
36
|
+
colors: {
|
|
37
|
+
...baseDarkTheme.colors,
|
|
38
|
+
navigation,
|
|
39
|
+
},
|
|
21
40
|
};
|
|
22
41
|
|
|
23
42
|
export default darkTheme;
|
|
@@ -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
3
|
import type { TypeSproutTheme } from "../../../../types/theme.flow";
|
|
7
4
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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
|
-
...
|
|
19
|
-
|
|
20
|
-
|
|
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 =
|
|
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,53 +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,
|
|
60
|
-
};
|
|
61
|
-
|
|
62
50
|
// Extended themes
|
|
63
51
|
export type TypeSproutTheme = {
|
|
64
52
|
...$Exact<TypeTheme>,
|
|
65
53
|
colors: {|
|
|
66
54
|
...$Exact<TypeColor>,
|
|
67
|
-
navigation:
|
|
68
|
-
main: {|
|
|
69
|
-
background: {|
|
|
70
|
-
base: string,
|
|
71
|
-
gradient: string,
|
|
72
|
-
|},
|
|
73
|
-
|},
|
|
74
|
-
secondary: {|
|
|
75
|
-
background: {|
|
|
76
|
-
base: string,
|
|
77
|
-
|},
|
|
78
|
-
|},
|
|
79
|
-
text: {|
|
|
80
|
-
base: string,
|
|
81
|
-
hover: string,
|
|
82
|
-
|},
|
|
83
|
-
icon: {|
|
|
84
|
-
base: string,
|
|
85
|
-
hover: string,
|
|
86
|
-
|},
|
|
87
|
-
listItem: {|
|
|
88
|
-
background: {|
|
|
89
|
-
base: string,
|
|
90
|
-
hover: string,
|
|
91
|
-
active: string,
|
|
92
|
-
|},
|
|
93
|
-
|},
|
|
94
|
-
|},
|
|
55
|
+
navigation: typeof navigation,
|
|
95
56
|
|},
|
|
96
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
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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;
|
package/lib/themes/dark/theme.js
CHANGED
|
@@ -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
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
33
|
+
var lightTheme = _extends({}, baseLightTheme, {
|
|
34
|
+
colors: _extends({}, baseLightTheme.colors, {
|
|
35
|
+
navigation: navigation
|
|
36
|
+
})
|
|
37
|
+
});
|
|
15
38
|
|
|
16
39
|
export default lightTheme;
|
package/lib/types/theme.flow.js
CHANGED
|
@@ -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.1-theme-
|
|
3
|
+
"version": "11.6.1-theme-beta.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,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
|
-
}
|