@sproutsocial/racine 9.0.0 → 9.0.3

package/__flow__/themes/default/theme.js

@@ -19,8 +19,12 @@ import DEPTH from "@sproutsocial/seeds-depth";
 import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
 
+import interact from "../utils/interact";
+
 export const breakpoints = ["900px", "1200px", "1500px", "1800px"];
 
+const MODE = "default-light";
+
 const colors = {
   app: {
     background: {
@@ -46,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,
@@ -171,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: {
@@ -321,6 +331,9 @@ export const duration = {
 };
 
 const theme = {
+  utils: {
+    interact: interact(MODE),
+  },
   breakpoints,
   colors,
   typography: {
@@ -347,6 +360,7 @@ const theme = {
   shadows,
   easing,
   duration,
+  mode: MODE,
 };
 
 export default theme;

package/__flow__/themes/utils/interact.js

@@ -0,0 +1,12 @@
+//@flow strict-local
+import { darken, lighten } from "polished";
+
+const interact = (mode: string) => (themeValue: string) => {
+  if (mode === "default-dark") {
+    return lighten(0.2, themeValue);
+  } else {
+    return darken(0.2, themeValue);
+  }
+};
+
+export default interact;

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 === "default-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 === "default-dark" ? "screen" : "multiply", _mixins.pill, props.theme.colors.app.background.base, PillInput, _mixins.pill);
 });
 exports.InputWrapper = InputWrapper;
 InputWrapper.displayName = "InputWrapper";

package/commonjs/Menu/index.js

@@ -277,7 +277,9 @@ var MenuGroup = function MenuGroup(_ref2) {
     mt: 350,
     color: "text.headline",
     _css: isDisabled && _mixins.disabled
-  }, title)), /*#__PURE__*/React.createElement(_styles.MenuGroupContainer, _extends({}, props, {
+  }, title)), /*#__PURE__*/React.createElement(_Box.default, _extends({}, props, {
+    m: 300,
+    p: 300,
     role: "group"
   }), children));
 };

package/commonjs/Menu/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.MenuItemsContainer = exports.MenuGroupContainer = exports.MenuItemContainer = void 0;
+exports.MenuItemsContainer = exports.MenuItemContainer = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -56,21 +56,8 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
   return props.disabled && _mixins.disabled;
 });
 exports.MenuItemContainer = MenuItemContainer;
-var MenuGroupContainer = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "styles__MenuGroupContainer",
-  componentId: "fjvae4-1"
-})(["", ";"], function (props) {
-  return props.appearance === "flush" ? (0, _styledComponents.css)(["margin:0 -", ";"], function (props) {
-    return props.theme.space[300];
-  }) : (0, _styledComponents.css)(["padding:", ";"], function (props) {
-    return props.theme.space[300];
-  });
-});
-exports.MenuGroupContainer = MenuGroupContainer;
 var MenuItemsContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemsContainer",
-  componentId: "fjvae4-2"
+  componentId: "fjvae4-1"
 })(["list-style-type:none;outline:0;"]);
-exports.MenuItemsContainer = MenuItemsContainer;
-var _default = MenuGroupContainer;
-exports.default = _default;
+exports.MenuItemsContainer = MenuItemsContainer;

package/commonjs/Token/index.js

@@ -33,14 +33,17 @@ var Token = function Token(_ref) {
       valid = _ref$valid === void 0 ? true : _ref$valid,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled"]);
+      _ref$palette = _ref.palette,
+      palette = _ref$palette === void 0 ? "neutral" : _ref$palette,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled", "palette"]);
 
   var textContainer = (0, _hooks.useTextContent)("");
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
     ref: textContainer,
     valid: valid,
-    as: closeable || onClick ? "button" : "div",
+    palette: palette,
     type: closeable || onClick ? "button" : undefined,
+    as: closeable || onClick ? "button" : "div",
     closeable: closeable || onClick,
     disabled: disabled,
     onClick: onClick,

package/commonjs/Token/styles.js

@@ -16,56 +16,25 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.button.withConfig({
   displayName: "styles__Container",
   componentId: "nyn5zy-0"
-})(["font-family:", ";", ";position:relative;display:inline-block;padding:", " ", ";margin:0;color:", ";background:", ";border:1px solid ", ";font-weight:", ";line-height:1;vertical-align:middle;border-radius:", ";outline:none;transition:all ", " ", ";&:focus{", "}", " ", " ", " ", ""], function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.typography[200];
-}, function (props) {
-  return props.theme.space[200];
-}, function (props) {
-  return props.theme.space[300];
-}, function (props) {
-  return props.theme.colors.text.body;
-}, function (props) {
-  return props.theme.colors.container.background.base;
-}, function (props) {
-  return props.theme.colors.container.border.base;
-}, function (props) {
-  return props.theme.fontWeights.normal;
-}, function (props) {
-  return props.theme.radii[500];
-}, function (props) {
-  return props.theme.duration.fast;
-}, function (props) {
-  return props.theme.easing.ease_inout;
-}, _mixins.focusRing, function (props) {
-  return props.closeable && (0, _styledComponents.css)(["cursor:pointer;&:hover,&:active{color:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.decorative.neutral;
-  }, function (props) {
-    return props.theme.colors.container.background.decorative.neutral;
-  });
-}, function (props) {
-  return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;&:hover,&:active{background:", ";border:1px solid ", ";}"], function (props) {
-    return props.theme.colors.container.background.base;
-  }, function (props) {
-    return props.theme.colors.container.border.base;
-  });
-}, function (props) {
-  return !props.valid && (0, _styledComponents.css)(["color:", ";border-color:", ";background:", ";&:hover{color:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.error;
-  }, function (props) {
-    return props.theme.colors.container.background.error;
-  }, function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.error;
-  }, function (props) {
-    return props.theme.colors.container.background.error;
-  });
+})(["position:relative;display:inline-block;margin:0;line-height:1;vertical-align:middle;outline:none;", " &:focus{", "}", " ", " ", " ", " ", ""], function (_ref) {
+  var theme = _ref.theme;
+  return (0, _styledComponents.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);
+}, _mixins.focusRing, function (_ref2) {
+  var theme = _ref2.theme,
+      palette = _ref2.palette;
+  return palette === "blue" && (0, _styledComponents.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, theme.utils.interact(theme.colors.container.border.decorative.blue));
+}, function (_ref3) {
+  var closeable = _ref3.closeable,
+      theme = _ref3.theme;
+  return closeable && (0, _styledComponents.css)(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, theme.utils.interact(theme.colors.container.border.base));
+}, function (_ref4) {
+  var disabled = _ref4.disabled,
+      theme = _ref4.theme;
+  return disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;&:hover,&:active{box-shadow:none;border:1px solid ", ";}"], theme.colors.container.border.base);
+}, function (_ref5) {
+  var valid = _ref5.valid,
+      theme = _ref5.theme;
+  return !valid && (0, _styledComponents.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, theme.utils.interact(theme.colors.container.border.error));
 }, _systemProps.COMMON);
 
 var _default = Container;

package/commonjs/themes/dark/theme.js

@@ -13,10 +13,13 @@ var _datavizPalette = require("./dataviz-palette");
 
 var _decorativePalettes = require("./decorative-palettes");
 
+var _interact = _interopRequireDefault(require("../utils/interact"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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 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",
@@ -25,6 +28,9 @@ var shadows = {
 exports.shadows = shadows;
 
 var colors = _extends({}, _theme.default.colors, {
+  utils: {
+    interact: (0, _interact.default)(MODE)
+  },
   app: {
     background: {
       base: _seedsColor.default.COLOR_NEUTRAL_1000
@@ -48,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,
@@ -173,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: {
@@ -209,7 +221,7 @@ var colors = _extends({}, _theme.default.colors, {
 var darkTheme = _extends({}, _theme.default, {
   colors: colors,
   shadows: shadows,
-  mode: "dark"
+  mode: MODE
 });
 
 var _default = darkTheme;

package/commonjs/themes/default/theme.js

@@ -23,12 +23,15 @@ var _seedsMotion = _interopRequireDefault(require("@sproutsocial/seeds-motion"))
 
 var _seedsBorder = _interopRequireDefault(require("@sproutsocial/seeds-border"));
 
+var _interact = _interopRequireDefault(require("../utils/interact"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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 breakpoints = ["900px", "1200px", "1500px", "1800px"];
 exports.breakpoints = breakpoints;
+var MODE = "default-light";
 
 var colors = _extends({
   app: {
@@ -54,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,
@@ -179,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: {
@@ -312,6 +321,9 @@ var duration = {
 };
 exports.duration = duration;
 var theme = {
+  utils: {
+    interact: (0, _interact.default)(MODE)
+  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {
@@ -334,7 +346,8 @@ var theme = {
   borderWidths: borderWidths,
   shadows: shadows,
   easing: easing,
-  duration: duration
+  duration: duration,
+  mode: MODE
 };
 var _default = theme;
 exports.default = _default;

package/commonjs/themes/utils/interact.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _polished = require("polished");
+
+var interact = function interact(mode) {
+  return function (themeValue) {
+    if (mode === "default-dark") {
+      return (0, _polished.lighten)(0.2, themeValue);
+    } else {
+      return (0, _polished.darken)(0.2, themeValue);
+    }
+  };
+};
+
+var _default = interact;
+exports.default = _default;

package/dist/themes/dark.scss

@@ -6,6 +6,9 @@ $dark: (
     high: 0px 16px 32px #040404FF
   ),
   default: (
+    utils: (
+      
+    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -31,7 +34,10 @@ $dark: (
             red: #992222,
             neutral: #273333
           ),
-          selected: #FFFFFF
+          selected: #FFFFFF,
+          positive_sentiment: #3896e3,
+          negative_sentiment: #f76054,
+          neutral_sentiment: #c8cccc
         ),
         border: (
           base: #040404,
@@ -156,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: (
@@ -409,6 +418,9 @@ $dark: (
         18: #ff7f6e,
         19: #c2f2bd,
         20: #ffe99a
+      ),
+      utils: (
+        
       )
     ),
     typography: (
@@ -590,6 +602,6 @@ $dark: (
       medium: .3s,
       slow: .6s
     ),
-    mode: dark
+    mode: default-dark
   )
 );

package/dist/themes/default.scss

@@ -100,6 +100,9 @@ $default: (
     slow: .6s
   ),
   default: (
+    utils: (
+      
+    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -125,7 +128,10 @@ $default: (
             red: #ffd5d2,
             neutral: #f3f4f4
           ),
-          selected: #364141
+          selected: #364141,
+          positive_sentiment: #3896e3,
+          negative_sentiment: #f76054,
+          neutral_sentiment: #c8cccc
         ),
         border: (
           base: #dee1e1,
@@ -250,7 +256,10 @@ $default: (
         error: #992222,
         danger: #992222,
         info: #0c5689,
-        opportunity: #5e4eba
+        opportunity: #5e4eba,
+        positive_sentiment: #2079c3,
+        negative_sentiment: #ed4c42,
+        neutral_sentiment: #6e797a
       ),
       form: (
         background: (
@@ -683,6 +692,7 @@ $default: (
       fast: .15s,
       medium: .3s,
       slow: .6s
-    )
+    ),
+    mode: default-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 === "default-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 === "default-dark" ? "screen" : "multiply", pill, props.theme.colors.app.background.base, PillInput, pill);
 });
 InputWrapper.displayName = "InputWrapper";
 export var CheckboxBox = styled.div.withConfig({

package/lib/Menu/index.js

@@ -8,7 +8,7 @@ import * as React from "react";
 import styled from "styled-components";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import uniqueId from "lodash.uniqueid";
-import { MenuGroupContainer, MenuItemContainer, MenuItemsContainer } from "./styles";
+import { MenuItemContainer, MenuItemsContainer } from "./styles";
 import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
 import Box from "../Box";
 import Button from "../Button";
@@ -244,7 +244,9 @@ export var MenuGroup = function MenuGroup(_ref2) {
     mt: 350,
     color: "text.headline",
     _css: isDisabled && disabled
-  }, title)), /*#__PURE__*/React.createElement(MenuGroupContainer, _extends({}, props, {
+  }, title)), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
+    m: 300,
+    p: 300,
     role: "group"
   }), children));
 };

package/lib/Menu/styles.js

@@ -41,18 +41,7 @@ export var MenuItemContainer = styled(Box).withConfig({
 }, function (props) {
   return props.disabled && disabled;
 });
-export var MenuGroupContainer = styled(Box).withConfig({
-  displayName: "styles__MenuGroupContainer",
-  componentId: "fjvae4-1"
-})(["", ";"], function (props) {
-  return props.appearance === "flush" ? css(["margin:0 -", ";"], function (props) {
-    return props.theme.space[300];
-  }) : css(["padding:", ";"], function (props) {
-    return props.theme.space[300];
-  });
-});
 export var MenuItemsContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemsContainer",
-  componentId: "fjvae4-2"
-})(["list-style-type:none;outline:0;"]);
-export default MenuGroupContainer;
+  componentId: "fjvae4-1"
+})(["list-style-type:none;outline:0;"]);

package/lib/Token/index.js

@@ -18,14 +18,17 @@ var Token = function Token(_ref) {
       valid = _ref$valid === void 0 ? true : _ref$valid,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled"]);
+      _ref$palette = _ref.palette,
+      palette = _ref$palette === void 0 ? "neutral" : _ref$palette,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled", "palette"]);
 
   var textContainer = useTextContent("");
   return /*#__PURE__*/React.createElement(Container, _extends({
     ref: textContainer,
     valid: valid,
-    as: closeable || onClick ? "button" : "div",
+    palette: palette,
     type: closeable || onClick ? "button" : undefined,
+    as: closeable || onClick ? "button" : "div",
     closeable: closeable || onClick,
     disabled: disabled,
     onClick: onClick,

package/lib/Token/styles.js

@@ -4,55 +4,24 @@ import { focusRing } from "../utils/mixins";
 var Container = styled.button.withConfig({
   displayName: "styles__Container",
   componentId: "nyn5zy-0"
-})(["font-family:", ";", ";position:relative;display:inline-block;padding:", " ", ";margin:0;color:", ";background:", ";border:1px solid ", ";font-weight:", ";line-height:1;vertical-align:middle;border-radius:", ";outline:none;transition:all ", " ", ";&:focus{", "}", " ", " ", " ", ""], function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.typography[200];
-}, function (props) {
-  return props.theme.space[200];
-}, function (props) {
-  return props.theme.space[300];
-}, function (props) {
-  return props.theme.colors.text.body;
-}, function (props) {
-  return props.theme.colors.container.background.base;
-}, function (props) {
-  return props.theme.colors.container.border.base;
-}, function (props) {
-  return props.theme.fontWeights.normal;
-}, function (props) {
-  return props.theme.radii[500];
-}, function (props) {
-  return props.theme.duration.fast;
-}, function (props) {
-  return props.theme.easing.ease_inout;
-}, focusRing, function (props) {
-  return props.closeable && css(["cursor:pointer;&:hover,&:active{color:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.decorative.neutral;
-  }, function (props) {
-    return props.theme.colors.container.background.decorative.neutral;
-  });
-}, function (props) {
-  return props.disabled && css(["opacity:0.4;cursor:not-allowed;&:hover,&:active{background:", ";border:1px solid ", ";}"], function (props) {
-    return props.theme.colors.container.background.base;
-  }, function (props) {
-    return props.theme.colors.container.border.base;
-  });
-}, function (props) {
-  return !props.valid && css(["color:", ";border-color:", ";background:", ";&:hover{color:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.error;
-  }, function (props) {
-    return props.theme.colors.container.background.error;
-  }, function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.error;
-  }, function (props) {
-    return props.theme.colors.container.background.error;
-  });
+})(["position:relative;display:inline-block;margin:0;line-height:1;vertical-align:middle;outline:none;", " &:focus{", "}", " ", " ", " ", " ", ""], function (_ref) {
+  var theme = _ref.theme;
+  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);
+}, focusRing, function (_ref2) {
+  var theme = _ref2.theme,
+      palette = _ref2.palette;
+  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, theme.utils.interact(theme.colors.container.border.decorative.blue));
+}, function (_ref3) {
+  var closeable = _ref3.closeable,
+      theme = _ref3.theme;
+  return closeable && css(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, theme.utils.interact(theme.colors.container.border.base));
+}, function (_ref4) {
+  var disabled = _ref4.disabled,
+      theme = _ref4.theme;
+  return disabled && css(["opacity:0.4;cursor:not-allowed;&:hover,&:active{box-shadow:none;border:1px solid ", ";}"], theme.colors.container.border.base);
+}, function (_ref5) {
+  var valid = _ref5.valid,
+      theme = _ref5.theme;
+  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, theme.utils.interact(theme.colors.container.border.error));
 }, COMMON);
 export default Container;