@sproutsocial/racine 10.0.0-dar97-beta.2 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 10.0.0
+
+### Major Changes
+
+- 98f063a: Make theme names consistent by removing references to "default-light" and "default-dark"
+  - We no longer refer to the "light" theme as "default-light" in the theme object.
+  - We no longer refer to the "dark" theme as "default-dark" in the theme object.
+- 98f063a: Change "themed" SCSS mixin setup
+  - A parent theme classname of 'theme--light' or 'theme--dark' is no longer required to use the mixin.
+  - A separate mixin is offered per theme, instead of a single mixin for all themes.
+- 98f063a: Rename "default" theme to "light"
+
+## 9.0.3
+
+### Patch Changes
+
+- a9a06a6: Added aliases for sentiment colors
+
+## 9.0.2
+
+### Patch Changes
+
+- 3215099: bug fix for mix blend mode
+
 ## 9.0.1
 
 ### Patch Changes

package/__flow__/Button/styles.js

@@ -87,7 +87,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       align-items: center;
       justify-content: center;
       /* This solution is temporary. DS-1095 */
-      mix-blend-mode: ${props.theme.mode ? "screen" : "multiply"};
+      mix-blend-mode: ${props.theme.mode === "dark" ? "screen" : "multiply"};
 
       ${pill}
     `}

package/__flow__/Checkbox/styles.js

@@ -35,7 +35,7 @@ export const InputWrapper = styled<typeof Box, TypeTheme, any>(Box)`
       transition: all ${(props) => props.theme.duration.fast}
         ${(props) => props.theme.easing.ease_inout};
       /* This solution is temporary. DS-1095 */
-      mix-blend-mode: ${props.theme.mode ? "screen" : "multiply"};
+      mix-blend-mode: ${props.theme.mode === "dark" ? "screen" : "multiply"};
       ${pill}
 
       &:hover {

package/__flow__/themes/dark/_themed.scss

@@ -2,15 +2,16 @@
 // This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
 
 // SET-UP
-// These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
+// This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
 @import "../../../dist/themes/dark/dark.scss";
 
-// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
+// In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
 $theme: map-get($dark, 'default');
 
 // MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin
+// CSS properties that are theme-dependent must be wrapped in this mixin.
+// It will convert semantic tokens to the appropriate theme-dependent CSS property.
 @mixin themed() {
   & {
     $theme-map: () !global;

package/__flow__/themes/dark/theme.js

@@ -2,7 +2,7 @@
 
 import COLORS from "@sproutsocial/seeds-color";
 import DEPTH from "@sproutsocial/seeds-depth";
-import defaultTheme from "../light/theme";
+import lightTheme from "../light/theme";
 import { datavizPalette } from "./dataviz-palette";
 import {
   green,
@@ -16,7 +16,7 @@ import {
 
 import interact from "../utils/interact";
 
-const MODE = "default-dark";
+const MODE = "dark";
 
 export const shadows = {
   low: `${DEPTH.ELEVATION_LEVEL_100} ${COLORS.COLOR_NEUTRAL_1100}FF`,
@@ -25,7 +25,7 @@ export const shadows = {
 };
 
 const colors = {
-  ...defaultTheme.colors,
+  ...lightTheme.colors,
   utils: {
     interact: interact(MODE),
   },
@@ -53,6 +53,9 @@ const colors = {
         neutral: neutral.background,
       },
       selected: COLORS.COLOR_NEUTRAL_0,
+      positive_sentiment: COLORS.COLOR_BLUE_500,
+      negative_sentiment: COLORS.COLOR_RED_500,
+      neutral_sentiment: COLORS.COLOR_NEUTRAL_300,
     },
     border: {
       base: COLORS.COLOR_NEUTRAL_1100,
@@ -178,6 +181,9 @@ const colors = {
     danger: red.foreground,
     info: blue.foreground,
     opportunity: purple.foreground,
+    positive_sentiment: COLORS.COLOR_BLUE_700,
+    negative_sentiment: COLORS.COLOR_RED_600,
+    neutral_sentiment: COLORS.COLOR_NEUTRAL_600,
   },
   form: {
     background: {
@@ -212,7 +218,7 @@ const colors = {
 };
 
 const darkTheme = {
-  ...defaultTheme,
+  ...lightTheme,
   colors,
   shadows,
   mode: MODE,

package/__flow__/themes/light/_themed.scss

@@ -2,24 +2,25 @@
 // This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
 
 // SET-UP
-// These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
+// This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
 @import "../../../dist/themes/light/light.scss";
 
-// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
+// In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
 $theme: map-get($light, 'default');
 
 // MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin
+// CSS properties that are theme-dependent must be wrapped in this mixin.
+// It will convert semantic tokens to the appropriate theme-dependent CSS property.
 @mixin themed() {
-    & {
-      $theme-map: () !global;
-      @each $key, $submap in $theme {
-        $value: map-get($theme, "#{$key}");
-        $theme-map: map-merge($theme-map, ($key: $value)) !global;
-      }
-      @content;
-      $theme-map: null !global;
+  & {
+    $theme-map: () !global;
+    @each $key, $submap in $theme {
+      $value: map-get($theme, "#{$key}");
+      $theme-map: map-merge($theme-map, ($key: $value)) !global;
+    }
+    @content;
+    $theme-map: null !global;
   }
 }
 

package/__flow__/themes/light/theme.js

@@ -23,7 +23,7 @@ import interact from "../utils/interact";
 
 export const breakpoints = ["900px", "1200px", "1500px", "1800px"];
 
-const MODE = "default-light";
+const MODE = "light";
 
 const colors = {
   app: {
@@ -50,6 +50,9 @@ const colors = {
         neutral: neutral.background,
       },
       selected: COLORS.COLOR_NEUTRAL_800,
+      positive_sentiment: COLORS.COLOR_BLUE_500,
+      negative_sentiment: COLORS.COLOR_RED_500,
+      neutral_sentiment: COLORS.COLOR_NEUTRAL_300,
     },
     border: {
       base: COLORS.COLOR_NEUTRAL_200,
@@ -175,6 +178,9 @@ const colors = {
     danger: red.foreground,
     info: blue.foreground,
     opportunity: purple.foreground,
+    positive_sentiment: COLORS.COLOR_BLUE_700,
+    negative_sentiment: COLORS.COLOR_RED_600,
+    neutral_sentiment: COLORS.COLOR_NEUTRAL_600,
   },
   form: {
     background: {

package/__flow__/themes/utils/interact.js

@@ -2,7 +2,7 @@
 import { darken, lighten } from "polished";
 
 const interact = (mode: string) => (themeValue: string) => {
-  if (mode === "default-dark") {
+  if (mode === "dark") {
     return lighten(0.2, themeValue);
   } else {
     return darken(0.2, themeValue);

package/__flow__/types/theme.colors.flow.js

@@ -30,6 +30,9 @@ type TypeContainerColors = {|
         neutral: string,
       },
       selected: string,
+      positive_sentiment: string,
+      negative_sentiment: string,
+      neutral_sentiment: string,
     },
     border: {
       base: string,
@@ -167,6 +170,9 @@ type TypeIconColors = {|
     danger: string,
     info: string,
     opportunity: string,
+    positive_sentiment: string,
+    negative_sentiment: string,
+    neutral_sentiment: string,
   },
 |};
 

package/commonjs/Button/styles.js

@@ -57,7 +57,7 @@ var Container = _styledComponents.default.button.withConfig({
 }, function (props) {
   return props.disabled && _mixins.disabled;
 }, function (props) {
-  return props.appearance === "pill" && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode ? "screen" : "multiply", _mixins.pill);
+  return props.appearance === "pill" && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode === "dark" ? "screen" : "multiply", _mixins.pill);
 }, _styles.default, _systemProps.LAYOUT, _systemProps.COMMON);
 
 var _default = Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/commonjs/Checkbox/styles.js

@@ -40,7 +40,7 @@ var InputWrapper = (0, _styledComponents.default)(_Box.default).withConfig({
     return props.theme.duration.fast;
   }, function (props) {
     return props.theme.easing.ease_inout;
-  }, props.theme.mode ? "screen" : "multiply", _mixins.pill, props.theme.colors.app.background.base, PillInput, _mixins.pill);
+  }, props.theme.mode === "dark" ? "screen" : "multiply", _mixins.pill, props.theme.colors.app.background.base, PillInput, _mixins.pill);
 });
 exports.InputWrapper = InputWrapper;
 InputWrapper.displayName = "InputWrapper";

package/commonjs/themes/dark/theme.js

@@ -19,7 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
-var MODE = "default-dark";
+var MODE = "dark";
 var shadows = {
   low: _seedsDepth.default.ELEVATION_LEVEL_100 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF",
   medium: _seedsDepth.default.ELEVATION_LEVEL_300 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF",
@@ -54,7 +54,10 @@ var colors = _extends({}, _theme.default.colors, {
         red: _decorativePalettes.red.background,
         neutral: _decorativePalettes.neutral.background
       },
-      selected: _seedsColor.default.COLOR_NEUTRAL_0
+      selected: _seedsColor.default.COLOR_NEUTRAL_0,
+      positive_sentiment: _seedsColor.default.COLOR_BLUE_500,
+      negative_sentiment: _seedsColor.default.COLOR_RED_500,
+      neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300
     },
     border: {
       base: _seedsColor.default.COLOR_NEUTRAL_1100,
@@ -179,7 +182,10 @@ var colors = _extends({}, _theme.default.colors, {
     error: _decorativePalettes.red.foreground,
     danger: _decorativePalettes.red.foreground,
     info: _decorativePalettes.blue.foreground,
-    opportunity: _decorativePalettes.purple.foreground
+    opportunity: _decorativePalettes.purple.foreground,
+    positive_sentiment: _seedsColor.default.COLOR_BLUE_700,
+    negative_sentiment: _seedsColor.default.COLOR_RED_600,
+    neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_600
   },
   form: {
     background: {

package/commonjs/themes/light/theme.js

@@ -31,7 +31,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var breakpoints = ["900px", "1200px", "1500px", "1800px"];
 exports.breakpoints = breakpoints;
-var MODE = "default-light";
+var MODE = "light";
 
 var colors = _extends({
   app: {
@@ -57,7 +57,10 @@ var colors = _extends({
         red: _decorativePalettes.red.background,
         neutral: _decorativePalettes.neutral.background
       },
-      selected: _seedsColor.default.COLOR_NEUTRAL_800
+      selected: _seedsColor.default.COLOR_NEUTRAL_800,
+      positive_sentiment: _seedsColor.default.COLOR_BLUE_500,
+      negative_sentiment: _seedsColor.default.COLOR_RED_500,
+      neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300
     },
     border: {
       base: _seedsColor.default.COLOR_NEUTRAL_200,
@@ -182,7 +185,10 @@ var colors = _extends({
     error: _decorativePalettes.red.foreground,
     danger: _decorativePalettes.red.foreground,
     info: _decorativePalettes.blue.foreground,
-    opportunity: _decorativePalettes.purple.foreground
+    opportunity: _decorativePalettes.purple.foreground,
+    positive_sentiment: _seedsColor.default.COLOR_BLUE_700,
+    negative_sentiment: _seedsColor.default.COLOR_RED_600,
+    neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_600
   },
   form: {
     background: {

package/commonjs/themes/utils/interact.js

@@ -7,7 +7,7 @@ var _polished = require("polished");
 
 var interact = function interact(mode) {
   return function (themeValue) {
-    if (mode === "default-dark") {
+    if (mode === "dark") {
       return (0, _polished.lighten)(0.2, themeValue);
     } else {
       return (0, _polished.darken)(0.2, themeValue);

package/dist/themes/dark/_themed.scss

@@ -2,15 +2,16 @@
 // This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
 
 // SET-UP
-// These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
+// This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
 @import "../../../dist/themes/dark/dark.scss";
 
-// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
+// In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
 $theme: map-get($dark, 'default');
 
 // MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin
+// CSS properties that are theme-dependent must be wrapped in this mixin.
+// It will convert semantic tokens to the appropriate theme-dependent CSS property.
 @mixin themed() {
   & {
     $theme-map: () !global;

package/dist/themes/dark/dark.scss

@@ -34,7 +34,10 @@ $dark: (
             red: #992222,
             neutral: #273333
           ),
-          selected: #FFFFFF
+          selected: #FFFFFF,
+          positive_sentiment: #3896e3,
+          negative_sentiment: #f76054,
+          neutral_sentiment: #c8cccc
         ),
         border: (
           base: #040404,
@@ -159,7 +162,10 @@ $dark: (
         error: #ffd5d2,
         danger: #ffd5d2,
         info: #dcf2ff,
-        opportunity: #eaeaf9
+        opportunity: #eaeaf9,
+        positive_sentiment: #2079c3,
+        negative_sentiment: #ed4c42,
+        neutral_sentiment: #6e797a
       ),
       form: (
         background: (
@@ -596,6 +602,6 @@ $dark: (
       medium: .3s,
       slow: .6s
     ),
-    mode: default-dark
+    mode: dark
   )
 );

package/dist/themes/light/_themed.scss

@@ -2,24 +2,25 @@
 // This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
 
 // SET-UP
-// These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
+// This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
 @import "../../../dist/themes/light/light.scss";
 
-// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
+// In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
 $theme: map-get($light, 'default');
 
 // MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin
+// CSS properties that are theme-dependent must be wrapped in this mixin.
+// It will convert semantic tokens to the appropriate theme-dependent CSS property.
 @mixin themed() {
-    & {
-      $theme-map: () !global;
-      @each $key, $submap in $theme {
-        $value: map-get($theme, "#{$key}");
-        $theme-map: map-merge($theme-map, ($key: $value)) !global;
-      }
-      @content;
-      $theme-map: null !global;
+  & {
+    $theme-map: () !global;
+    @each $key, $submap in $theme {
+      $value: map-get($theme, "#{$key}");
+      $theme-map: map-merge($theme-map, ($key: $value)) !global;
+    }
+    @content;
+    $theme-map: null !global;
   }
 }
 

package/dist/themes/light/light.scss

@@ -128,7 +128,10 @@ $light: (
             red: #ffd5d2,
             neutral: #f3f4f4
           ),
-          selected: #364141
+          selected: #364141,
+          positive_sentiment: #3896e3,
+          negative_sentiment: #f76054,
+          neutral_sentiment: #c8cccc
         ),
         border: (
           base: #dee1e1,
@@ -253,7 +256,10 @@ $light: (
         error: #992222,
         danger: #992222,
         info: #0c5689,
-        opportunity: #5e4eba
+        opportunity: #5e4eba,
+        positive_sentiment: #2079c3,
+        negative_sentiment: #ed4c42,
+        neutral_sentiment: #6e797a
       ),
       form: (
         background: (
@@ -687,6 +693,6 @@ $light: (
       medium: .3s,
       slow: .6s
     ),
-    mode: default-light
+    mode: light
   )
 );

package/lib/Button/styles.js

@@ -42,6 +42,6 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.disabled && disabled;
 }, function (props) {
-  return props.appearance === "pill" && css(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode ? "screen" : "multiply", pill);
+  return props.appearance === "pill" && css(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode === "dark" ? "screen" : "multiply", pill);
 }, Icon, LAYOUT, COMMON);
 export default Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/lib/Checkbox/styles.js

@@ -22,7 +22,7 @@ export var InputWrapper = styled(Box).withConfig({
     return props.theme.duration.fast;
   }, function (props) {
     return props.theme.easing.ease_inout;
-  }, props.theme.mode ? "screen" : "multiply", pill, props.theme.colors.app.background.base, PillInput, pill);
+  }, props.theme.mode === "dark" ? "screen" : "multiply", pill, props.theme.colors.app.background.base, PillInput, pill);
 });
 InputWrapper.displayName = "InputWrapper";
 export var CheckboxBox = styled.div.withConfig({

package/lib/themes/dark/theme.js

@@ -2,18 +2,18 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import COLORS from "@sproutsocial/seeds-color";
 import DEPTH from "@sproutsocial/seeds-depth";
-import defaultTheme from "../light/theme";
+import lightTheme from "../light/theme";
 import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
 import interact from "../utils/interact";
-var MODE = "default-dark";
+var MODE = "dark";
 export var shadows = {
   low: DEPTH.ELEVATION_LEVEL_100 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF",
   medium: DEPTH.ELEVATION_LEVEL_300 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF",
   high: DEPTH.ELEVATION_LEVEL_400 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF"
 };
 
-var colors = _extends({}, defaultTheme.colors, {
+var colors = _extends({}, lightTheme.colors, {
   utils: {
     interact: interact(MODE)
   },
@@ -40,7 +40,10 @@ var colors = _extends({}, defaultTheme.colors, {
         red: red.background,
         neutral: neutral.background
       },
-      selected: COLORS.COLOR_NEUTRAL_0
+      selected: COLORS.COLOR_NEUTRAL_0,
+      positive_sentiment: COLORS.COLOR_BLUE_500,
+      negative_sentiment: COLORS.COLOR_RED_500,
+      neutral_sentiment: COLORS.COLOR_NEUTRAL_300
     },
     border: {
       base: COLORS.COLOR_NEUTRAL_1100,
@@ -165,7 +168,10 @@ var colors = _extends({}, defaultTheme.colors, {
     error: red.foreground,
     danger: red.foreground,
     info: blue.foreground,
-    opportunity: purple.foreground
+    opportunity: purple.foreground,
+    positive_sentiment: COLORS.COLOR_BLUE_700,
+    negative_sentiment: COLORS.COLOR_RED_600,
+    neutral_sentiment: COLORS.COLOR_NEUTRAL_600
   },
   form: {
     background: {
@@ -198,7 +204,7 @@ var colors = _extends({}, defaultTheme.colors, {
   }
 }, datavizPalette);
 
-var darkTheme = _extends({}, defaultTheme, {
+var darkTheme = _extends({}, lightTheme, {
   colors: colors,
   shadows: shadows,
   mode: MODE

package/lib/themes/light/theme.js

@@ -12,7 +12,7 @@ import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
 import interact from "../utils/interact";
 export var breakpoints = ["900px", "1200px", "1500px", "1800px"];
-var MODE = "default-light";
+var MODE = "light";
 
 var colors = _extends({
   app: {
@@ -38,7 +38,10 @@ var colors = _extends({
         red: red.background,
         neutral: neutral.background
       },
-      selected: COLORS.COLOR_NEUTRAL_800
+      selected: COLORS.COLOR_NEUTRAL_800,
+      positive_sentiment: COLORS.COLOR_BLUE_500,
+      negative_sentiment: COLORS.COLOR_RED_500,
+      neutral_sentiment: COLORS.COLOR_NEUTRAL_300
     },
     border: {
       base: COLORS.COLOR_NEUTRAL_200,
@@ -163,7 +166,10 @@ var colors = _extends({
     error: red.foreground,
     danger: red.foreground,
     info: blue.foreground,
-    opportunity: purple.foreground
+    opportunity: purple.foreground,
+    positive_sentiment: COLORS.COLOR_BLUE_700,
+    negative_sentiment: COLORS.COLOR_RED_600,
+    neutral_sentiment: COLORS.COLOR_NEUTRAL_600
   },
   form: {
     background: {

package/lib/themes/utils/interact.js

@@ -2,7 +2,7 @@ import { darken, lighten } from "polished";
 
 var interact = function interact(mode) {
   return function (themeValue) {
-    if (mode === "default-dark") {
+    if (mode === "dark") {
       return lighten(0.2, themeValue);
     } else {
       return darken(0.2, themeValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "10.0.0-dar97-beta.2",
+  "version": "10.0.0",
   "license": "MIT",
   "files": [
     "__flow__",