@sproutsocial/racine 9.0.0 → 9.1.0-token-beta.0

package/__flow__/Token/index.js

@@ -15,6 +15,7 @@ export type TypeProps = {
   valid?: boolean,
   /** Indicates whether the token is disabled */
   disabled?: boolean,
+  palette?: "neutral" | "blue",
 };
 
 const Token = ({
@@ -24,6 +25,7 @@ const Token = ({
   qa,
   valid = true,
   disabled = false,
+  palette = "neutral",
   ...rest
 }: TypeProps) => {
   const textContainer = useTextContent("");
@@ -32,8 +34,9 @@ const Token = ({
     <Container
       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/__flow__/Token/index.stories.js

@@ -80,3 +80,14 @@ export const staticWithIcon = () => (
 staticWithIcon.story = {
   name: "Static with icon",
 };
+
+export const bluePalette = () => (
+  <Token palette="blue" closeable={boolean("closeable", false)}>
+    <Icon size="mini" name="twitter" pr={300} />
+    <span>I'm blue</span>
+  </Token>
+);
+
+bluePalette.story = {
+  name: "Palette Variation",
+};

package/__flow__/Token/styles.js

@@ -6,68 +6,78 @@ import { focusRing } from "../utils/mixins";
 import type { TypeTheme } from "../types/theme.flow";
 
 const Container: StyledComponent<any, TypeTheme, *> = styled.button`
-  font-family: ${(props) => props.theme.fontFamily};
-  ${(props) => props.theme.typography[200]};
   position: relative;
   display: inline-block;
-  padding: ${(props) => props.theme.space[200]}
-    ${(props) => props.theme.space[300]};
   margin: 0;
-  color: ${(props) => props.theme.colors.text.body};
-  background: ${(props) => props.theme.colors.container.background.base};
-  border: 1px solid ${(props) => props.theme.colors.container.border.base};
-  font-weight: ${(props) => props.theme.fontWeights.normal};
   line-height: 1;
   vertical-align: middle;
-  border-radius: ${(props) => props.theme.radii[500]};
   outline: none;
-  transition: all ${(props) => props.theme.duration.fast}
-    ${(props) => props.theme.easing.ease_inout};
+  /* Theme Properties */
+  ${({ theme }) => css`
+    ${theme.typography[200]}
+    font-family: ${theme.fontFamily};
+    font-weight: ${theme.fontWeights.normal};
+    border: 1px solid ${theme.colors.container.border.base};
+    border-radius: ${theme.radii[500]};
+    color: ${theme.colors.text.body};
+    background: ${theme.colors.container.background.base};
+    padding: ${theme.space[200]} ${theme.space[300]};
+    transition: all ${theme.duration.fast} ${theme.easing.ease_inout};
+  `}
 
   &:focus {
     ${focusRing}
   }
 
-  ${(props) =>
-    props.closeable &&
+  ${({ theme, palette }) =>
+    palette === "blue" &&
     css`
-      cursor: pointer;
+      color: ${theme.colors.text.body};
+      background: ${theme.colors.container.background.decorative.blue};
+      border: 1px solid ${theme.colors.container.border.decorative.blue};
+      &:hover,
+      &:active {
+        cursor: pointer;
+        box-shadow: ${theme.shadows.low};
+        border: 1px solid
+          ${theme.utils.interact(theme.colors.container.border.decorative.blue)};
+      }
+    `}
 
+  ${({ closeable, theme }) =>
+    closeable &&
+    css`
+      cursor: pointer;
       &:hover,
       &:active {
-        color: ${(props) => props.theme.colors.text.body};
+        box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${(props) => props.theme.colors.container.border.decorative.neutral};
-        background-color: ${(props) =>
-          props.theme.colors.container.background.decorative.neutral};
+          ${theme.utils.interact(theme.colors.container.border.base)};
       }
     `}
 
-  ${(props) =>
-    props.disabled &&
+  ${({ disabled, theme }) =>
+    disabled &&
     css`
       opacity: 0.4;
       cursor: not-allowed;
       &:hover,
       &:active {
-        background: ${(props) => props.theme.colors.container.background.base};
-        border: 1px solid ${(props) => props.theme.colors.container.border.base};
+        box-shadow: none;
+        border: 1px solid ${theme.colors.container.border.base};
       }
     `}
-
-  ${(props) =>
-    !props.valid &&
+    
+  ${({ valid, theme }) =>
+    !valid &&
     css`
-      color: ${(props) => props.theme.colors.text.body};
-      border-color: ${(props) => props.theme.colors.container.border.error};
-      background: ${(props) => props.theme.colors.container.background.error};
-
+      color: ${theme.colors.text.error};
+      background: ${theme.colors.container.background.error};
+      border: 1px solid ${theme.colors.container.border.error};
       &:hover {
-        color: ${(props) => props.theme.colors.text.body};
+        box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${(props) => props.theme.colors.container.border.error};
-        background-color: ${(props) =>
-          props.theme.colors.container.background.error};
+          ${theme.utils.interact(theme.colors.container.border.error)};
       }
     `}
 

package/__flow__/themes/dark/theme.js

@@ -14,6 +14,10 @@ import {
   neutral,
 } from "./decorative-palettes";
 
+import interact from "../utils/interact";
+
+const MODE = "default-dark";
+
 export const shadows = {
   low: `${DEPTH.ELEVATION_LEVEL_100} ${COLORS.COLOR_NEUTRAL_1100}FF`,
   medium: `${DEPTH.ELEVATION_LEVEL_300} ${COLORS.COLOR_NEUTRAL_1100}FF`,
@@ -22,6 +26,9 @@ export const shadows = {
 
 const colors = {
   ...defaultTheme.colors,
+  utils: {
+    interact: interact(MODE),
+  },
   app: {
     background: {
       base: COLORS.COLOR_NEUTRAL_1000,
@@ -208,7 +215,7 @@ const darkTheme = {
   ...defaultTheme,
   colors,
   shadows,
-  mode: "dark",
+  mode: MODE,
 };
 
 export default darkTheme;

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: {
@@ -321,6 +325,9 @@ export const duration = {
 };
 
 const theme = {
+  utils: {
+    interact: interact(MODE),
+  },
   breakpoints,
   colors,
   typography: {
@@ -347,6 +354,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/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
@@ -209,7 +215,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: {
@@ -312,6 +315,9 @@ var duration = {
 };
 exports.duration = duration;
 var theme = {
+  utils: {
+    interact: (0, _interact.default)(MODE)
+  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {
@@ -334,7 +340,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

@@ -1,11 +1,14 @@
 $dark: (
   __esModule: true,
   shadows: (
-    low: 0px 2px 4px #040404FF,
-    medium: 0px 8px 16px #040404FF,
-    high: 0px 16px 32px #040404FF
+    low: 0px 2px 4px rgba(39,51,51,.24) #040404FF,
+    medium: 0px 8px 16px rgba(39,51,51,.24) #040404FF,
+    high: 0px 16px 32px rgba(39,51,51,.24) #040404FF
   ),
   default: (
+    utils: (
+      
+    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -409,6 +412,9 @@ $dark: (
         18: #ff7f6e,
         19: #c2f2bd,
         20: #ffe99a
+      ),
+      utils: (
+        
       )
     ),
     typography: (
@@ -576,9 +582,9 @@ $dark: (
       500: 1px
     ),
     shadows: (
-      low: 0px 2px 4px #040404FF,
-      medium: 0px 8px 16px #040404FF,
-      high: 0px 16px 32px #040404FF
+      low: 0px 2px 4px rgba(39,51,51,.24) #040404FF,
+      medium: 0px 8px 16px rgba(39,51,51,.24) #040404FF,
+      high: 0px 16px 32px rgba(39,51,51,.24) #040404FF
     ),
     easing: (
       ease_in: cubic-bezier(.4, 0, .7, .2),
@@ -590,6 +596,6 @@ $dark: (
       medium: .3s,
       slow: .6s
     ),
-    mode: dark
+    mode: default-dark
   )
 );

package/dist/themes/default.scss

@@ -85,9 +85,9 @@ $default: (
     500: 1px
   ),
   shadows: (
-    low: 0px 2px 4px #2733333D,
-    medium: 0px 8px 16px #2733333D,
-    high: 0px 16px 32px #2733333D
+    low: 0px 2px 4px rgba(39,51,51,.24) #2733333D,
+    medium: 0px 8px 16px rgba(39,51,51,.24) #2733333D,
+    high: 0px 16px 32px rgba(39,51,51,.24) #2733333D
   ),
   easing: (
     ease_in: cubic-bezier(.4, 0, .7, .2),
@@ -100,6 +100,9 @@ $default: (
     slow: .6s
   ),
   default: (
+    utils: (
+      
+    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -670,9 +673,9 @@ $default: (
       500: 1px
     ),
     shadows: (
-      low: 0px 2px 4px #2733333D,
-      medium: 0px 8px 16px #2733333D,
-      high: 0px 16px 32px #2733333D
+      low: 0px 2px 4px rgba(39,51,51,.24) #2733333D,
+      medium: 0px 8px 16px rgba(39,51,51,.24) #2733333D,
+      high: 0px 16px 32px rgba(39,51,51,.24) #2733333D
     ),
     easing: (
       ease_in: cubic-bezier(.4, 0, .7, .2),
@@ -683,6 +686,7 @@ $default: (
       fast: .15s,
       medium: .3s,
       slow: .6s
-    )
+    ),
+    mode: default-light
   )
 );

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;

package/lib/themes/dark/theme.js

@@ -5,6 +5,8 @@ import DEPTH from "@sproutsocial/seeds-depth";
 import defaultTheme from "../default/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";
 export var shadows = {
   low: DEPTH.ELEVATION_LEVEL_100 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF",
   medium: DEPTH.ELEVATION_LEVEL_300 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF",
@@ -12,6 +14,9 @@ export var shadows = {
 };
 
 var colors = _extends({}, defaultTheme.colors, {
+  utils: {
+    interact: interact(MODE)
+  },
   app: {
     background: {
       base: COLORS.COLOR_NEUTRAL_1000
@@ -196,7 +201,7 @@ var colors = _extends({}, defaultTheme.colors, {
 var darkTheme = _extends({}, defaultTheme, {
   colors: colors,
   shadows: shadows,
-  mode: "dark"
+  mode: MODE
 });
 
 export default darkTheme;

package/lib/themes/default/theme.js

@@ -10,7 +10,9 @@ import SPACE from "@sproutsocial/seeds-space";
 import DEPTH from "@sproutsocial/seeds-depth";
 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 colors = _extends({
   app: {
@@ -284,6 +286,9 @@ export var duration = {
   slow: MOTION.MOTION_DURATION_SLOW
 };
 var theme = {
+  utils: {
+    interact: interact(MODE)
+  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {
@@ -306,6 +311,7 @@ var theme = {
   borderWidths: borderWidths,
   shadows: shadows,
   easing: easing,
-  duration: duration
+  duration: duration,
+  mode: MODE
 };
 export default theme;

package/lib/themes/utils/interact.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "9.0.0",
+  "version": "9.1.0-token-beta.0",
   "license": "MIT",
   "files": [
     "__flow__",