@sproutsocial/racine 12.1.0-svgs-bundle.0 → 12.2.0-partner-logos.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__/EnumLogoNames.js +1 -1
- package/__flow__/Input/index.js +2 -2
- package/__flow__/LogoViewBoxes.js +1 -1
- package/__flow__/PartnerLogo/index.js +17 -4
- package/__flow__/PartnerLogo/index.stories.js +14 -0
- package/__flow__/PartnerLogo/partnerLogos/feedly-dark.svg +3 -0
- package/__flow__/PartnerLogo/partnerLogos/feedly.svg +3 -0
- package/__flow__/Token/styles.js +13 -12
- package/__flow__/index.js +1 -0
- package/__flow__/themes/dark/theme.js +0 -5
- package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js +63 -0
- package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js +63 -0
- package/__flow__/themes/light/theme.js +0 -5
- package/__flow__/types/theme.flow.js +2 -2
- package/__flow__/utils/useInteractiveColor.js +32 -0
- package/commonjs/Input/index.js +3 -1
- package/commonjs/LogoViewBoxes.js +2 -2
- package/commonjs/PartnerLogo/index.js +17 -4
- package/commonjs/Token/styles.js +9 -7
- package/commonjs/index.js +6 -1
- package/commonjs/themes/dark/theme.js +0 -5
- package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js +65 -2
- package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js +65 -2
- package/commonjs/themes/light/theme.js +0 -5
- package/commonjs/utils/useInteractiveColor.js +33 -0
- package/dist/logo.svg +1 -1
- package/dist/logoList.js +1 -1
- package/dist/themes/dark/theme.scss +0 -3
- package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss +120 -3
- package/dist/themes/extendedThemes/sproutTheme/light/theme.scss +120 -3
- package/dist/themes/light/theme.scss +0 -3
- package/lib/Input/index.js +2 -1
- package/lib/LogoViewBoxes.js +2 -2
- package/lib/PartnerLogo/index.js +16 -4
- package/lib/Token/styles.js +8 -7
- package/lib/index.js +1 -0
- package/lib/themes/dark/theme.js +0 -4
- package/lib/themes/extendedThemes/sproutTheme/dark/theme.js +63 -1
- package/lib/themes/extendedThemes/sproutTheme/light/theme.js +63 -1
- package/lib/themes/light/theme.js +0 -4
- package/lib/types/theme.flow.js +1 -1
- package/lib/utils/useInteractiveColor.js +27 -0
- package/package.json +1 -1
- package/__flow__/PartnerLogo/partnerLogos/Feedly-dark.svg +0 -1
- package/__flow__/PartnerLogo/partnerLogos/Feedly.svg +0 -1
- package/__flow__/themes/utils/interact.js +0 -12
- package/commonjs/themes/utils/interact.js +0 -19
- package/lib/themes/utils/interact.js +0 -13
package/dist/logoList.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports = ["bitly-dark","bitly","canva-dark","canva","dropbox-dark","dropbox","facebook-dark","facebook-shops-dark","facebook-shops","facebook","
|
|
1
|
+
module.exports = ["bitly-dark","bitly","canva-dark","canva","dropbox-dark","dropbox","facebook-dark","facebook-shops-dark","facebook-shops","facebook","feedly-dark","feedly","glassdoor-dark","glassdoor","google-analytics-dark","google-analytics","google-business-messages-dark","google-business-messages","google-drive-dark","google-drive","google-my-business-dark","google-my-business","hubspot-dark","hubspot","instagram-dark","instagram","linkedin-dark","linkedin","marketo-dark","marketo","messenger-dark","messenger","microsoft-dynamics-dark","microsoft-dynamics","pinterest-dark","pinterest","reddit-dark","reddit","salesforce-dark","salesforce","shopify-dark","shopify","slack-dark","slack","tiktok-dark","tiktok","tripadvisor-dark","tripadvisor","tumblr-dark","tumblr","twitter-dark","twitter","whatsapp-dark","whatsapp","woocommerce-dark","woocommerce","yelp-dark","yelp","youtube-dark","youtube","zendesk-dark","zendesk"];
|
|
@@ -18,9 +18,6 @@ $theme: (
|
|
|
18
18
|
)
|
|
19
19
|
),
|
|
20
20
|
default: (
|
|
21
|
-
utils: (
|
|
22
|
-
|
|
23
|
-
),
|
|
24
21
|
breakpoints: (900px, 1200px, 1500px, 1800px),
|
|
25
22
|
colors: (
|
|
26
23
|
app: (
|
|
@@ -492,6 +489,66 @@ $theme: (
|
|
|
492
489
|
neutral: #f3f4f4,
|
|
493
490
|
negative: #f3f4f4
|
|
494
491
|
)
|
|
492
|
+
),
|
|
493
|
+
growth: (
|
|
494
|
+
education: (
|
|
495
|
+
decorative: (
|
|
496
|
+
aqua: #0797ae,
|
|
497
|
+
teal: #08c4b2
|
|
498
|
+
)
|
|
499
|
+
),
|
|
500
|
+
opportunity: (
|
|
501
|
+
background: (
|
|
502
|
+
base: #6f5ed3
|
|
503
|
+
),
|
|
504
|
+
button: (
|
|
505
|
+
primary: (
|
|
506
|
+
base: #a193f2,
|
|
507
|
+
hover: #c1c1f7
|
|
508
|
+
)
|
|
509
|
+
),
|
|
510
|
+
badge: (
|
|
511
|
+
background: (
|
|
512
|
+
base: #6f5ed3,
|
|
513
|
+
active: #eaeaf9
|
|
514
|
+
),
|
|
515
|
+
icon: (
|
|
516
|
+
base: #d8d7f9,
|
|
517
|
+
active: #5e4eba
|
|
518
|
+
),
|
|
519
|
+
text: (
|
|
520
|
+
base: #d8d7f9
|
|
521
|
+
)
|
|
522
|
+
),
|
|
523
|
+
decorative: (
|
|
524
|
+
green: #0ca750,
|
|
525
|
+
lightAqua: #0797ae,
|
|
526
|
+
darkAqua: #002838,
|
|
527
|
+
purple: #6f5ed3
|
|
528
|
+
)
|
|
529
|
+
),
|
|
530
|
+
darkModal: (
|
|
531
|
+
background: (
|
|
532
|
+
base: #002838
|
|
533
|
+
),
|
|
534
|
+
text: (
|
|
535
|
+
base: #FFFFFF
|
|
536
|
+
),
|
|
537
|
+
cards: (
|
|
538
|
+
background: (
|
|
539
|
+
base: #FFFFFF,
|
|
540
|
+
hover: #eaeaf9
|
|
541
|
+
),
|
|
542
|
+
text: (
|
|
543
|
+
base: #364141,
|
|
544
|
+
hover: #273333
|
|
545
|
+
),
|
|
546
|
+
border: (
|
|
547
|
+
base: #FFFFFF,
|
|
548
|
+
hover: #6f5ed3
|
|
549
|
+
)
|
|
550
|
+
)
|
|
551
|
+
)
|
|
495
552
|
)
|
|
496
553
|
),
|
|
497
554
|
typography: (
|
|
@@ -675,6 +732,66 @@ $theme: (
|
|
|
675
732
|
),
|
|
676
733
|
mode: dark
|
|
677
734
|
),
|
|
735
|
+
growth: (
|
|
736
|
+
education: (
|
|
737
|
+
decorative: (
|
|
738
|
+
aqua: #0797ae,
|
|
739
|
+
teal: #08c4b2
|
|
740
|
+
)
|
|
741
|
+
),
|
|
742
|
+
opportunity: (
|
|
743
|
+
background: (
|
|
744
|
+
base: #6f5ed3
|
|
745
|
+
),
|
|
746
|
+
button: (
|
|
747
|
+
primary: (
|
|
748
|
+
base: #a193f2,
|
|
749
|
+
hover: #c1c1f7
|
|
750
|
+
)
|
|
751
|
+
),
|
|
752
|
+
badge: (
|
|
753
|
+
background: (
|
|
754
|
+
base: #6f5ed3,
|
|
755
|
+
active: #eaeaf9
|
|
756
|
+
),
|
|
757
|
+
icon: (
|
|
758
|
+
base: #d8d7f9,
|
|
759
|
+
active: #5e4eba
|
|
760
|
+
),
|
|
761
|
+
text: (
|
|
762
|
+
base: #d8d7f9
|
|
763
|
+
)
|
|
764
|
+
),
|
|
765
|
+
decorative: (
|
|
766
|
+
green: #0ca750,
|
|
767
|
+
lightAqua: #0797ae,
|
|
768
|
+
darkAqua: #002838,
|
|
769
|
+
purple: #6f5ed3
|
|
770
|
+
)
|
|
771
|
+
),
|
|
772
|
+
darkModal: (
|
|
773
|
+
background: (
|
|
774
|
+
base: #002838
|
|
775
|
+
),
|
|
776
|
+
text: (
|
|
777
|
+
base: #FFFFFF
|
|
778
|
+
),
|
|
779
|
+
cards: (
|
|
780
|
+
background: (
|
|
781
|
+
base: #FFFFFF,
|
|
782
|
+
hover: #eaeaf9
|
|
783
|
+
),
|
|
784
|
+
text: (
|
|
785
|
+
base: #364141,
|
|
786
|
+
hover: #273333
|
|
787
|
+
),
|
|
788
|
+
border: (
|
|
789
|
+
base: #FFFFFF,
|
|
790
|
+
hover: #6f5ed3
|
|
791
|
+
)
|
|
792
|
+
)
|
|
793
|
+
)
|
|
794
|
+
),
|
|
678
795
|
navigation: (
|
|
679
796
|
main: (
|
|
680
797
|
background: (
|
|
@@ -18,9 +18,6 @@ $theme: (
|
|
|
18
18
|
)
|
|
19
19
|
),
|
|
20
20
|
default: (
|
|
21
|
-
utils: (
|
|
22
|
-
|
|
23
|
-
),
|
|
24
21
|
breakpoints: (900px, 1200px, 1500px, 1800px),
|
|
25
22
|
colors: (
|
|
26
23
|
app: (
|
|
@@ -492,6 +489,66 @@ $theme: (
|
|
|
492
489
|
neutral: #364141,
|
|
493
490
|
negative: #364141
|
|
494
491
|
)
|
|
492
|
+
),
|
|
493
|
+
growth: (
|
|
494
|
+
education: (
|
|
495
|
+
decorative: (
|
|
496
|
+
aqua: #0797ae,
|
|
497
|
+
teal: #0b968f
|
|
498
|
+
)
|
|
499
|
+
),
|
|
500
|
+
opportunity: (
|
|
501
|
+
background: (
|
|
502
|
+
base: #6f5ed3
|
|
503
|
+
),
|
|
504
|
+
button: (
|
|
505
|
+
primary: (
|
|
506
|
+
base: #6f5ed3,
|
|
507
|
+
hover: #5e4eba
|
|
508
|
+
)
|
|
509
|
+
),
|
|
510
|
+
badge: (
|
|
511
|
+
background: (
|
|
512
|
+
base: #d8d7f9,
|
|
513
|
+
active: #5e4eba
|
|
514
|
+
),
|
|
515
|
+
icon: (
|
|
516
|
+
base: #6f5ed3,
|
|
517
|
+
active: #eaeaf9
|
|
518
|
+
),
|
|
519
|
+
text: (
|
|
520
|
+
base: #6f5ed3
|
|
521
|
+
)
|
|
522
|
+
),
|
|
523
|
+
decorative: (
|
|
524
|
+
green: #0ca750,
|
|
525
|
+
lightAqua: #0797ae,
|
|
526
|
+
darkAqua: #002838,
|
|
527
|
+
purple: #6f5ed3
|
|
528
|
+
)
|
|
529
|
+
),
|
|
530
|
+
darkModal: (
|
|
531
|
+
background: (
|
|
532
|
+
base: #002838
|
|
533
|
+
),
|
|
534
|
+
text: (
|
|
535
|
+
base: #FFFFFF
|
|
536
|
+
),
|
|
537
|
+
cards: (
|
|
538
|
+
background: (
|
|
539
|
+
base: #FFFFFF,
|
|
540
|
+
hover: #eaeaf9
|
|
541
|
+
),
|
|
542
|
+
text: (
|
|
543
|
+
base: #364141,
|
|
544
|
+
hover: #273333
|
|
545
|
+
),
|
|
546
|
+
border: (
|
|
547
|
+
base: #FFFFFF,
|
|
548
|
+
hover: #6f5ed3
|
|
549
|
+
)
|
|
550
|
+
)
|
|
551
|
+
)
|
|
495
552
|
)
|
|
496
553
|
),
|
|
497
554
|
typography: (
|
|
@@ -675,6 +732,66 @@ $theme: (
|
|
|
675
732
|
),
|
|
676
733
|
mode: light
|
|
677
734
|
),
|
|
735
|
+
growth: (
|
|
736
|
+
education: (
|
|
737
|
+
decorative: (
|
|
738
|
+
aqua: #0797ae,
|
|
739
|
+
teal: #0b968f
|
|
740
|
+
)
|
|
741
|
+
),
|
|
742
|
+
opportunity: (
|
|
743
|
+
background: (
|
|
744
|
+
base: #6f5ed3
|
|
745
|
+
),
|
|
746
|
+
button: (
|
|
747
|
+
primary: (
|
|
748
|
+
base: #6f5ed3,
|
|
749
|
+
hover: #5e4eba
|
|
750
|
+
)
|
|
751
|
+
),
|
|
752
|
+
badge: (
|
|
753
|
+
background: (
|
|
754
|
+
base: #d8d7f9,
|
|
755
|
+
active: #5e4eba
|
|
756
|
+
),
|
|
757
|
+
icon: (
|
|
758
|
+
base: #6f5ed3,
|
|
759
|
+
active: #eaeaf9
|
|
760
|
+
),
|
|
761
|
+
text: (
|
|
762
|
+
base: #6f5ed3
|
|
763
|
+
)
|
|
764
|
+
),
|
|
765
|
+
decorative: (
|
|
766
|
+
green: #0ca750,
|
|
767
|
+
lightAqua: #0797ae,
|
|
768
|
+
darkAqua: #002838,
|
|
769
|
+
purple: #6f5ed3
|
|
770
|
+
)
|
|
771
|
+
),
|
|
772
|
+
darkModal: (
|
|
773
|
+
background: (
|
|
774
|
+
base: #002838
|
|
775
|
+
),
|
|
776
|
+
text: (
|
|
777
|
+
base: #FFFFFF
|
|
778
|
+
),
|
|
779
|
+
cards: (
|
|
780
|
+
background: (
|
|
781
|
+
base: #FFFFFF,
|
|
782
|
+
hover: #eaeaf9
|
|
783
|
+
),
|
|
784
|
+
text: (
|
|
785
|
+
base: #364141,
|
|
786
|
+
hover: #273333
|
|
787
|
+
),
|
|
788
|
+
border: (
|
|
789
|
+
base: #FFFFFF,
|
|
790
|
+
hover: #6f5ed3
|
|
791
|
+
)
|
|
792
|
+
)
|
|
793
|
+
)
|
|
794
|
+
),
|
|
678
795
|
navigation: (
|
|
679
796
|
main: (
|
|
680
797
|
background: (
|
package/lib/Input/index.js
CHANGED
|
@@ -14,12 +14,13 @@ import Button from "../Button";
|
|
|
14
14
|
import Icon from "../Icon";
|
|
15
15
|
import styled from "styled-components";
|
|
16
16
|
import { mergeRefs } from "../utils";
|
|
17
|
+
import { useInteractiveColor } from "../utils/useInteractiveColor";
|
|
17
18
|
var InputContext = /*#__PURE__*/React.createContext({});
|
|
18
19
|
var StyledButton = styled(Button).withConfig({
|
|
19
20
|
displayName: "Input__StyledButton",
|
|
20
21
|
componentId: "sc-1ck1dnm-0"
|
|
21
22
|
})(["&:hover,&:active{color:", ";}"], function (props) {
|
|
22
|
-
return
|
|
23
|
+
return useInteractiveColor(props.theme.colors.icon.base);
|
|
23
24
|
});
|
|
24
25
|
|
|
25
26
|
var ClearButton = function ClearButton() {
|
package/lib/LogoViewBoxes.js
CHANGED
|
@@ -9,8 +9,8 @@ module.exports = {
|
|
|
9
9
|
"facebook-shops-dark": "0 0 141 155",
|
|
10
10
|
"facebook-shops": "0 0 141 155",
|
|
11
11
|
"facebook": "0 0 141 139",
|
|
12
|
-
"
|
|
13
|
-
"
|
|
12
|
+
"feedly-dark": "0 0 141 123",
|
|
13
|
+
"feedly": "0 0 141 123",
|
|
14
14
|
"glassdoor-dark": "0 0 140 196",
|
|
15
15
|
"glassdoor": "0 0 140 196",
|
|
16
16
|
"google-analytics-dark": "0 0 140 160",
|
package/lib/PartnerLogo/index.js
CHANGED
|
@@ -3,19 +3,31 @@ import logoViewBoxes from "../LogoViewBoxes";
|
|
|
3
3
|
import { useTheme } from "styled-components";
|
|
4
4
|
|
|
5
5
|
var PartnerLogo = function PartnerLogo(_ref) {
|
|
6
|
-
var partnerName = _ref.partnerName
|
|
6
|
+
var partnerName = _ref.partnerName,
|
|
7
|
+
backgroundType = _ref.backgroundType;
|
|
7
8
|
|
|
8
9
|
var _useTheme = useTheme(),
|
|
9
10
|
mode = _useTheme.mode;
|
|
10
11
|
|
|
11
|
-
var whichLogo =
|
|
12
|
-
|
|
12
|
+
var whichLogo = function whichLogo(type) {
|
|
13
|
+
if (type && type === "dark") {
|
|
14
|
+
return partnerName + "-dark";
|
|
15
|
+
} else if (type && type === "light") {
|
|
16
|
+
return partnerName;
|
|
17
|
+
} else if (mode === "dark") {
|
|
18
|
+
return partnerName + "-dark";
|
|
19
|
+
} else {
|
|
20
|
+
return partnerName;
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
var logoViewBox = logoViewBoxes[whichLogo(backgroundType)];
|
|
13
25
|
return /*#__PURE__*/React.createElement("svg", {
|
|
14
26
|
viewBox: logoViewBox,
|
|
15
27
|
focusable: false
|
|
16
28
|
}, /*#__PURE__*/React.createElement("use", {
|
|
17
29
|
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
|
18
|
-
xlinkHref: "#sslogosvg-" + whichLogo
|
|
30
|
+
xlinkHref: "#sslogosvg-" + whichLogo(backgroundType)
|
|
19
31
|
}));
|
|
20
32
|
};
|
|
21
33
|
|
package/lib/Token/styles.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
2
|
import { COMMON } from "../utils/system-props";
|
|
3
3
|
import { focusRing } from "../utils/mixins";
|
|
4
|
+
import { useInteractiveColor } from "../utils/useInteractiveColor";
|
|
4
5
|
var Container = styled.button.withConfig({
|
|
5
6
|
displayName: "styles__Container",
|
|
6
7
|
componentId: "sc-nyn5zy-0"
|
|
@@ -8,13 +9,13 @@ var Container = styled.button.withConfig({
|
|
|
8
9
|
var theme = _ref.theme;
|
|
9
10
|
return css(["", " font-family:", ";font-weight:", ";border:1px solid ", ";border-radius:", ";color:", ";background:", ";padding:", " ", ";transition:all ", " ", ";"], theme.typography[200], theme.fontFamily, theme.fontWeights.normal, theme.colors.container.border.base, theme.radii[500], theme.colors.text.body, theme.colors.container.background.base, theme.space[200], theme.space[300], theme.duration.fast, theme.easing.ease_inout);
|
|
10
11
|
}, focusRing, function (_ref2) {
|
|
11
|
-
var
|
|
12
|
-
|
|
13
|
-
return
|
|
12
|
+
var closeable = _ref2.closeable,
|
|
13
|
+
theme = _ref2.theme;
|
|
14
|
+
return closeable && css(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, useInteractiveColor(theme.colors.container.border.base));
|
|
14
15
|
}, function (_ref3) {
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
return
|
|
16
|
+
var theme = _ref3.theme,
|
|
17
|
+
palette = _ref3.palette;
|
|
18
|
+
return palette === "blue" && css(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, useInteractiveColor(theme.colors.container.border.decorative.blue));
|
|
18
19
|
}, function (_ref4) {
|
|
19
20
|
var disabled = _ref4.disabled,
|
|
20
21
|
theme = _ref4.theme;
|
|
@@ -22,6 +23,6 @@ var Container = styled.button.withConfig({
|
|
|
22
23
|
}, function (_ref5) {
|
|
23
24
|
var valid = _ref5.valid,
|
|
24
25
|
theme = _ref5.theme;
|
|
25
|
-
return !valid && css(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low,
|
|
26
|
+
return !valid && css(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low, useInteractiveColor(theme.colors.container.border.error));
|
|
26
27
|
}, COMMON);
|
|
27
28
|
export default Container;
|
package/lib/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from "./systemProps";
|
|
2
2
|
export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
|
|
3
3
|
export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
|
|
4
|
+
export { useInteractiveColor } from "./utils/useInteractiveColor";
|
|
4
5
|
export { default as theme } from "./themes/light/theme";
|
|
5
6
|
export { default as darkTheme } from "./themes/dark/theme";
|
|
6
7
|
export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme";
|
package/lib/themes/dark/theme.js
CHANGED
|
@@ -6,7 +6,6 @@ import lightTheme from "../light/theme";
|
|
|
6
6
|
import { datavizPalette } from "./dataviz-palette";
|
|
7
7
|
import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
|
|
8
8
|
import { transparentize } from "polished";
|
|
9
|
-
import interact from "../utils/interact";
|
|
10
9
|
var MODE = "dark";
|
|
11
10
|
export var shadows = {
|
|
12
11
|
low: DEPTH.ELEVATION_LEVEL_100 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF",
|
|
@@ -218,9 +217,6 @@ var colors = _extends({}, lightTheme.colors, {
|
|
|
218
217
|
}, datavizPalette);
|
|
219
218
|
|
|
220
219
|
var darkTheme = _extends({}, lightTheme, {
|
|
221
|
-
utils: {
|
|
222
|
-
interact: interact(MODE)
|
|
223
|
-
},
|
|
224
220
|
colors: colors,
|
|
225
221
|
shadows: shadows,
|
|
226
222
|
mode: MODE
|
|
@@ -46,12 +46,74 @@ export var analytics = {
|
|
|
46
46
|
negative: baseDarkTheme.colors.neutral[100]
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
+
export var growth = {
|
|
50
|
+
education: {
|
|
51
|
+
decorative: {
|
|
52
|
+
aqua: baseDarkTheme.colors.aqua[600],
|
|
53
|
+
teal: baseDarkTheme.colors.teal[500]
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
opportunity: {
|
|
57
|
+
background: {
|
|
58
|
+
base: baseDarkTheme.colors.purple[700]
|
|
59
|
+
},
|
|
60
|
+
button: {
|
|
61
|
+
primary: {
|
|
62
|
+
base: baseDarkTheme.colors.purple[400],
|
|
63
|
+
hover: baseDarkTheme.colors.purple[300]
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
badge: {
|
|
67
|
+
background: {
|
|
68
|
+
base: baseDarkTheme.colors.purple[700],
|
|
69
|
+
active: baseDarkTheme.colors.purple[100]
|
|
70
|
+
},
|
|
71
|
+
icon: {
|
|
72
|
+
base: baseDarkTheme.colors.purple[200],
|
|
73
|
+
active: baseDarkTheme.colors.purple[800]
|
|
74
|
+
},
|
|
75
|
+
text: {
|
|
76
|
+
base: baseDarkTheme.colors.purple[200]
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
decorative: {
|
|
80
|
+
// confetti
|
|
81
|
+
green: baseDarkTheme.colors.green[700],
|
|
82
|
+
lightAqua: baseDarkTheme.colors.aqua[600],
|
|
83
|
+
darkAqua: baseDarkTheme.colors.aqua[1100],
|
|
84
|
+
purple: baseDarkTheme.colors.purple[700]
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
darkModal: {
|
|
88
|
+
background: {
|
|
89
|
+
base: baseDarkTheme.colors.aqua[1100]
|
|
90
|
+
},
|
|
91
|
+
text: {
|
|
92
|
+
base: baseDarkTheme.colors.neutral[0]
|
|
93
|
+
},
|
|
94
|
+
cards: {
|
|
95
|
+
background: {
|
|
96
|
+
base: baseDarkTheme.colors.neutral[0],
|
|
97
|
+
hover: baseDarkTheme.colors.purple[100]
|
|
98
|
+
},
|
|
99
|
+
text: {
|
|
100
|
+
base: baseDarkTheme.colors.neutral[800],
|
|
101
|
+
hover: baseDarkTheme.colors.neutral[900]
|
|
102
|
+
},
|
|
103
|
+
border: {
|
|
104
|
+
base: baseDarkTheme.colors.neutral[0],
|
|
105
|
+
hover: baseDarkTheme.colors.purple[700]
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
};
|
|
49
110
|
|
|
50
111
|
var darkTheme = _extends({}, baseDarkTheme, {
|
|
51
112
|
colors: _extends({}, baseDarkTheme.colors, {
|
|
52
113
|
navigation: navigation,
|
|
53
114
|
datePicker: datePicker,
|
|
54
|
-
analytics: analytics
|
|
115
|
+
analytics: analytics,
|
|
116
|
+
growth: growth
|
|
55
117
|
})
|
|
56
118
|
});
|
|
57
119
|
|
|
@@ -46,12 +46,74 @@ export var analytics = {
|
|
|
46
46
|
negative: baseLightTheme.colors.neutral[800]
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
+
export var growth = {
|
|
50
|
+
education: {
|
|
51
|
+
decorative: {
|
|
52
|
+
aqua: baseLightTheme.colors.aqua[600],
|
|
53
|
+
teal: baseLightTheme.colors.teal[700]
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
opportunity: {
|
|
57
|
+
background: {
|
|
58
|
+
base: baseLightTheme.colors.purple[700]
|
|
59
|
+
},
|
|
60
|
+
button: {
|
|
61
|
+
primary: {
|
|
62
|
+
base: baseLightTheme.colors.purple[700],
|
|
63
|
+
hover: baseLightTheme.colors.purple[800]
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
badge: {
|
|
67
|
+
background: {
|
|
68
|
+
base: baseLightTheme.colors.purple[200],
|
|
69
|
+
active: baseLightTheme.colors.purple[800]
|
|
70
|
+
},
|
|
71
|
+
icon: {
|
|
72
|
+
base: baseLightTheme.colors.purple[700],
|
|
73
|
+
active: baseLightTheme.colors.purple[100]
|
|
74
|
+
},
|
|
75
|
+
text: {
|
|
76
|
+
base: baseLightTheme.colors.purple[700]
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
decorative: {
|
|
80
|
+
// confetti
|
|
81
|
+
green: baseLightTheme.colors.green[700],
|
|
82
|
+
lightAqua: baseLightTheme.colors.aqua[600],
|
|
83
|
+
darkAqua: baseLightTheme.colors.aqua[1100],
|
|
84
|
+
purple: baseLightTheme.colors.purple[700]
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
darkModal: {
|
|
88
|
+
background: {
|
|
89
|
+
base: baseLightTheme.colors.aqua[1100]
|
|
90
|
+
},
|
|
91
|
+
text: {
|
|
92
|
+
base: baseLightTheme.colors.neutral[0]
|
|
93
|
+
},
|
|
94
|
+
cards: {
|
|
95
|
+
background: {
|
|
96
|
+
base: baseLightTheme.colors.neutral[0],
|
|
97
|
+
hover: baseLightTheme.colors.purple[100]
|
|
98
|
+
},
|
|
99
|
+
text: {
|
|
100
|
+
base: baseLightTheme.colors.neutral[800],
|
|
101
|
+
hover: baseLightTheme.colors.neutral[900]
|
|
102
|
+
},
|
|
103
|
+
border: {
|
|
104
|
+
base: baseLightTheme.colors.neutral[0],
|
|
105
|
+
hover: baseLightTheme.colors.purple[700]
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
};
|
|
49
110
|
|
|
50
111
|
var lightTheme = _extends({}, baseLightTheme, {
|
|
51
112
|
colors: _extends({}, baseLightTheme.colors, {
|
|
52
113
|
navigation: navigation,
|
|
53
114
|
datePicker: datePicker,
|
|
54
|
-
analytics: analytics
|
|
115
|
+
analytics: analytics,
|
|
116
|
+
growth: growth
|
|
55
117
|
})
|
|
56
118
|
});
|
|
57
119
|
|
|
@@ -11,7 +11,6 @@ import DEPTH from "@sproutsocial/seeds-depth";
|
|
|
11
11
|
import MOTION from "@sproutsocial/seeds-motion";
|
|
12
12
|
import BORDER from "@sproutsocial/seeds-border";
|
|
13
13
|
import { transparentize } from "polished";
|
|
14
|
-
import interact from "../utils/interact";
|
|
15
14
|
export var breakpoints = ["900px", "1200px", "1500px", "1800px"];
|
|
16
15
|
var MODE = "light"; // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
|
|
17
16
|
|
|
@@ -308,9 +307,6 @@ export var duration = {
|
|
|
308
307
|
slow: MOTION.MOTION_DURATION_SLOW
|
|
309
308
|
};
|
|
310
309
|
var theme = {
|
|
311
|
-
utils: {
|
|
312
|
-
interact: interact(MODE)
|
|
313
|
-
},
|
|
314
310
|
breakpoints: breakpoints,
|
|
315
311
|
colors: colors,
|
|
316
312
|
typography: _extends({}, typography, {
|
package/lib/types/theme.flow.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";
|
|
2
|
-
import { datePicker, navigation, analytics } from "../themes/extendedThemes/sproutTheme/light/theme";
|
|
2
|
+
import { datePicker, navigation, analytics, growth } from "../themes/extendedThemes/sproutTheme/light/theme";
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { darken, lighten } from "polished";
|
|
2
|
+
import { useTheme } from "styled-components";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* The useInteractiveColor hook has context of theme mode (light or dark)
|
|
6
|
+
* and can be used to lighten or darken a color dynamically
|
|
7
|
+
*
|
|
8
|
+
* note: colors are limited to our theme colors
|
|
9
|
+
*/
|
|
10
|
+
var useInteractiveColor = function useInteractiveColor(themeColor) {
|
|
11
|
+
// Throw error if used outside of a ThemeProvider (styled-components)
|
|
12
|
+
if (!useTheme()) {
|
|
13
|
+
throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");
|
|
14
|
+
} // Get the current theme mode ie. 'light' or 'dark'
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
var themeMode = useTheme().mode; // If the theme mode is dark, return a lightened version of the themeValue
|
|
18
|
+
|
|
19
|
+
if (themeMode === "dark") {
|
|
20
|
+
return lighten(0.2, themeColor);
|
|
21
|
+
} else {
|
|
22
|
+
// If the theme mode is light, return a darkened version of the themeValue
|
|
23
|
+
return darken(0.2, themeColor);
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { useInteractiveColor };
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg fill="none" height="123" viewBox="0 0 141 123" width="141" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m52.2726 122.345h37.3818l.3273-.036c4.0889-.004 8.0103-1.625 10.9093-4.509l35.491-35.9637c1.446-1.4246 2.596-3.1227 3.38-4.9956.784-1.8728 1.188-3.883 1.188-5.9135s-.404-4.0406-1.188-5.9135-1.934-3.571-3.38-4.9956l-54.5458-54.5453c-1.4245-1.44689-3.1227-2.59594-4.9955-3.38026-1.8729-.78432-3.8831-1.188243-5.9136-1.188243-2.0304 0-4.0406.403923-5.9135 1.188243-1.8728.78432-3.571 1.93337-4.9955 3.38026l-54.54536 54.5453c-1.43374 1.432-2.57115 3.1325-3.34719 5.0044s-1.175477 3.8784-1.175477 5.9047c0 2.0264.399437 4.0329 1.175477 5.9047.77604 1.8719 1.91345 3.5724 3.34719 5.0044l35.89086 35.9997c1.4282 1.438 3.1284 2.577 5.0013 3.351s3.8812 1.168 5.9077 1.158zm-20.9454-45.1999h6.5091c.3861-.0017.7684-.0757 1.1273-.2182.3438-.1585.6623-.3668.9454-.6181l39.309-39.4545c.276-.2738.495-.5995.6445-.9584s.2264-.7438.2264-1.1325c0-.3888-.0769-.7737-.2264-1.1325-.1495-.3589-.3685-.6846-.6445-.9584l-7.0545-7.0545c-.2703-.2758-.5928-.495-.9486-.6448-.3559-.1498-.738-.2273-1.1241-.228-.7514.0348-1.4636.3455-2 .8728l-42.509 42.6908c-.2802.2745-.5019.6029-.6519.9653-.15.3625-.2251.7515-.2209 1.1438.0017.386.0757.7684.2182 1.1272.1409.3622.3651.6861.6546.9455l3.6363 3.8182c.5654.5458 1.3233.8463 2.1091.8363zm35.1272 35.1269h6.4727c.4113.042.8269 0 1.221-.125.3941-.126.7582-.33 1.0699-.602l3.6364-3.818c.2759-.274.495-.6.6445-.959.1494-.358.2264-.743.2264-1.132s-.077-.774-.2264-1.133c-.1495-.358-.3686-.684-.6445-.958l-7.0545-7.0181c-.2739-.276-.5996-.495-.9584-.6445-.3589-.1494-.7438-.2264-1.1325-.2264-.3888 0-.7737.077-1.1326.2264-.3588.1495-.6845.3685-.9584.6445l-7.0545 7.0541c-.2757.271-.4949.593-.6447.949-.1499.356-.2274.738-.228 1.124.0074.79.3202 1.545.8727 2.109l3.8182 3.637c.5505.55 1.2944.863 2.0727.872zm-16.6181-17.0906h6.4727c.4038-.0097.8008-.1056 1.1645-.2812s.6858-.4268.9446-.7369l23.5272-23.5273c.276-.2738.495-.5995.6445-.9583.1494-.3589.2264-.7438.2264-1.1326 0-.3887-.077-.7736-.2264-1.1325-.1495-.3588-.3685-.6846-.6445-.9584l-6.9091-6.909c-.2707-.2749-.5933-.4932-.9492-.6422-.3558-.149-.7377-.2257-1.1235-.2257s-.7677.0767-1.1235.2257c-.3559.149-.6785.3673-.9492.6422l-26.8 26.7999c-.2801.2746-.5019.6029-.6518.9654-.15.3624-.2251.7515-.2209 1.1437-.0035.3867.0721.7701.2221 1.1265.1501.3565.3715.6785.6506.9462l3.6364 3.8182c.5675.5425 1.324.8425 2.1091.8363z" fill="#fff" fill-rule="evenodd"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg fill="none" height="123" viewBox="0 0 141 123" width="141" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m52.2726 122.345h37.3818l.3273-.036c4.0889-.004 8.0103-1.625 10.9093-4.509l35.491-35.9637c1.446-1.4246 2.596-3.1227 3.38-4.9956.784-1.8728 1.188-3.883 1.188-5.9135s-.404-4.0406-1.188-5.9135-1.934-3.571-3.38-4.9956l-54.5458-54.5453c-1.4245-1.44689-3.1227-2.59594-4.9955-3.38026-1.8729-.78432-3.8831-1.188243-5.9136-1.188243-2.0304 0-4.0406.403923-5.9135 1.188243-1.8728.78432-3.571 1.93337-4.9955 3.38026l-54.54536 54.5453c-1.43374 1.432-2.57115 3.1325-3.34719 5.0044s-1.175477 3.8784-1.175477 5.9047c0 2.0264.399437 4.0329 1.175477 5.9047.77604 1.8719 1.91345 3.5724 3.34719 5.0044l35.89086 35.9997c1.4282 1.438 3.1284 2.577 5.0013 3.351s3.8812 1.168 5.9077 1.158zm-20.9454-45.1999h6.5091c.3861-.0017.7684-.0757 1.1273-.2182.3438-.1585.6623-.3668.9454-.6181l39.309-39.4545c.276-.2738.495-.5995.6445-.9584s.2264-.7438.2264-1.1325c0-.3888-.0769-.7737-.2264-1.1325-.1495-.3589-.3685-.6846-.6445-.9584l-7.0545-7.0545c-.2703-.2758-.5927-.495-.9486-.6448s-.738-.2273-1.1241-.228c-.7514.0348-1.4635.3455-2 .8728l-42.509 42.6908c-.2802.2745-.5019.6029-.6519.9653-.1499.3625-.2251.7515-.2208 1.1438.0016.386.0756.7684.2181 1.1272.1409.3622.3651.6861.6546.9455l3.6363 3.8182c.5654.5458 1.3234.8463 2.1091.8363zm35.1272 35.1269h6.4728c.4113.042.8268 0 1.2209-.125.3941-.126.7583-.33 1.07-.602l3.6363-3.818c.276-.274.495-.6.6445-.959.1494-.358.2264-.743.2264-1.132s-.077-.774-.2264-1.133c-.1495-.358-.3685-.684-.6445-.958l-7.0545-7.0181c-.2738-.276-.5996-.495-.9584-.6445-.3589-.1494-.7438-.2264-1.1325-.2264-.3888 0-.7737.077-1.1325.2264-.3589.1495-.6846.3685-.9584.6445l-7.0546 7.0541c-.2757.271-.4949.593-.6447.949-.1499.356-.2274.738-.228 1.124.0074.79.3202 1.545.8727 2.109l3.8182 3.637c.5505.55 1.2944.863 2.0727.872zm-16.6181-17.0906h6.4727c.4038-.0097.8008-.1056 1.1645-.2812.3638-.1756.6858-.4268.9446-.7369l23.5272-23.5273c.276-.2738.495-.5995.6445-.9583.1495-.3589.2264-.7438.2264-1.1326 0-.3887-.0769-.7736-.2264-1.1325-.1495-.3588-.3685-.6846-.6445-.9584l-6.9091-6.909c-.2707-.2749-.5933-.4932-.9491-.6422-.3559-.149-.7378-.2257-1.1236-.2257s-.7677.0767-1.1235.2257c-.3559.149-.6785.3673-.9492.6422l-26.8 26.7999c-.2801.2746-.5018.6029-.6518.9654-.15.3624-.2251.7515-.2209 1.1437-.0035.3867.0721.7701.2222 1.1265.1501.3565.3714.6785.6505.9462l3.6364 3.8182c.5675.5425 1.324.8425 2.1091.8363z" fill="#0fc62b" fill-rule="evenodd"/></svg>
|