@sproutsocial/racine 7.7.0-beta-collapsible.0 → 8.0.0-beta-dark-mode.3

package/commonjs/themes/default/theme.js

@@ -0,0 +1,334 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.duration = exports.easing = exports.shadows = exports.borderWidths = exports.borders = exports.radii = exports.space = exports.fontWeights = exports.fontFamily = exports.typography = exports.breakpoints = void 0;
+
+var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
+
+var _literalColors = _interopRequireDefault(require("./literal-colors"));
+
+var _decorativePalettes = require("./decorative-palettes");
+
+var _seedsNetworkcolor = _interopRequireDefault(require("@sproutsocial/seeds-networkcolor"));
+
+var _seedsTypography = _interopRequireDefault(require("@sproutsocial/seeds-typography"));
+
+var _seedsSpace = _interopRequireDefault(require("@sproutsocial/seeds-space"));
+
+var _seedsDepth = _interopRequireDefault(require("@sproutsocial/seeds-depth"));
+
+var _seedsMotion = _interopRequireDefault(require("@sproutsocial/seeds-motion"));
+
+var _seedsBorder = _interopRequireDefault(require("@sproutsocial/seeds-border"));
+
+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 colors = _extends({
+  app: {
+    background: {
+      base: _seedsColor.default.COLOR_NEUTRAL_100
+    }
+  },
+  container: {
+    background: {
+      base: _seedsColor.default.COLOR_NEUTRAL_0,
+      success: _decorativePalettes.green.background,
+      warning: _decorativePalettes.yellow.background,
+      error: _decorativePalettes.red.background,
+      info: _decorativePalettes.blue.background,
+      opportunity: _decorativePalettes.purple.background,
+      danger: _decorativePalettes.red.background,
+      decorative: {
+        green: _decorativePalettes.green.background,
+        blue: _decorativePalettes.blue.background,
+        purple: _decorativePalettes.purple.background,
+        yellow: _decorativePalettes.yellow.background,
+        orange: _decorativePalettes.orange.background,
+        red: _decorativePalettes.red.background,
+        neutral: _decorativePalettes.neutral.background
+      },
+      selected: _seedsColor.default.COLOR_NEUTRAL_800
+    },
+    border: {
+      base: _seedsColor.default.COLOR_NEUTRAL_200,
+      success: _decorativePalettes.green.highlight,
+      warning: _decorativePalettes.yellow.highlight,
+      error: _decorativePalettes.red.highlight,
+      danger: _decorativePalettes.red.highlight,
+      info: _decorativePalettes.blue.highlight,
+      opportunity: _decorativePalettes.purple.highlight,
+      decorative: {
+        green: _decorativePalettes.green.highlight,
+        blue: _decorativePalettes.blue.highlight,
+        purple: _decorativePalettes.purple.highlight,
+        yellow: _decorativePalettes.yellow.highlight,
+        orange: _decorativePalettes.orange.highlight,
+        red: _decorativePalettes.red.highlight,
+        neutral: _decorativePalettes.neutral.highlight
+      },
+      selected: _seedsColor.default.COLOR_NEUTRAL_800
+    }
+  },
+  button: {
+    primary: {
+      background: {
+        base: _seedsColor.default.COLOR_BLUE_700,
+        hover: _seedsColor.default.COLOR_BLUE_800,
+        active: _seedsColor.default.COLOR_BLUE_900
+      },
+      border: {
+        base: "transparent"
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_0,
+        hover: _seedsColor.default.COLOR_NEUTRAL_0
+      }
+    },
+    secondary: {
+      background: {
+        base: "transparent",
+        hover: _seedsColor.default.COLOR_NEUTRAL_800,
+        active: _seedsColor.default.COLOR_NEUTRAL_900
+      },
+      border: {
+        base: _seedsColor.default.COLOR_NEUTRAL_800
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_800,
+        hover: _seedsColor.default.COLOR_NEUTRAL_0
+      }
+    },
+    pill: {
+      background: {
+        base: "transparent",
+        hover: _seedsColor.default.COLOR_NEUTRAL_100,
+        active: _seedsColor.default.COLOR_NEUTRAL_200
+      },
+      border: {
+        base: "transparent"
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_800,
+        hover: _seedsColor.default.COLOR_NEUTRAL_900
+      }
+    },
+    destructive: {
+      background: {
+        base: _seedsColor.default.COLOR_RED_800,
+        hover: _seedsColor.default.COLOR_RED_900,
+        active: _seedsColor.default.COLOR_RED_1000
+      },
+      border: {
+        base: "transparent"
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_0,
+        hover: _seedsColor.default.COLOR_NEUTRAL_0
+      }
+    },
+    placeholder: {
+      background: {
+        base: "transparent",
+        hover: _seedsColor.default.COLOR_NEUTRAL_0,
+        active: _seedsColor.default.COLOR_NEUTRAL_0
+      },
+      border: {
+        base: _seedsColor.default.COLOR_NEUTRAL_500
+      },
+      text: {
+        base: _seedsColor.default.COLOR_BLUE_700,
+        hover: _seedsColor.default.COLOR_BLUE_800
+      }
+    },
+    unstyled: {
+      background: {
+        base: "transparent"
+      },
+      border: {
+        base: "transparent"
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_700,
+        hover: _seedsColor.default.COLOR_NEUTRAL_900
+      }
+    }
+  },
+  link: {
+    base: _seedsColor.default.COLOR_BLUE_800,
+    hover: _seedsColor.default.COLOR_BLUE_900
+  },
+  text: {
+    headline: _seedsColor.default.COLOR_NEUTRAL_900,
+    subtext: _seedsColor.default.COLOR_NEUTRAL_700,
+    body: _seedsColor.default.COLOR_NEUTRAL_800,
+    inverse: _seedsColor.default.COLOR_NEUTRAL_0,
+    error: _seedsColor.default.COLOR_RED_800
+  },
+  icon: {
+    base: _seedsColor.default.COLOR_NEUTRAL_800,
+    inverse: _seedsColor.default.COLOR_NEUTRAL_0,
+    success: _decorativePalettes.green.foreground,
+    warning: _decorativePalettes.yellow.foreground,
+    error: _decorativePalettes.red.foreground,
+    danger: _decorativePalettes.red.foreground,
+    info: _decorativePalettes.blue.foreground,
+    opportunity: _decorativePalettes.purple.foreground
+  },
+  form: {
+    background: {
+      base: _seedsColor.default.COLOR_NEUTRAL_0,
+      selected: _seedsColor.default.COLOR_NEUTRAL_800
+    },
+    border: {
+      base: _seedsColor.default.COLOR_NEUTRAL_400,
+      error: _decorativePalettes.red.highlight,
+      warning: _decorativePalettes.yellow.highlight,
+      selected: _seedsColor.default.COLOR_NEUTRAL_800
+    },
+    placeholder: {
+      base: _seedsColor.default.COLOR_NEUTRAL_600
+    }
+  },
+  listItem: {
+    background: {
+      base: "transparent",
+      hover: _seedsColor.default.COLOR_NEUTRAL_100,
+      selected: _seedsColor.default.COLOR_NEUTRAL_800
+    }
+  },
+  network: {
+    twitter: _seedsNetworkcolor.default.NETWORK_COLOR_TWITTER,
+    twitter_like: _seedsNetworkcolor.default.NETWORK_COLOR_TWITTER_LIKE,
+    facebook: _seedsNetworkcolor.default.NETWORK_COLOR_FACEBOOK,
+    facebook_audience_network: _seedsNetworkcolor.default.NETWORK_COLOR_FACEBOOK_AUDIENCE_NETWORK,
+    linkedin: _seedsNetworkcolor.default.NETWORK_COLOR_LINKEDIN,
+    instagram: _seedsNetworkcolor.default.NETWORK_COLOR_INSTAGRAM,
+    feedly: _seedsNetworkcolor.default.NETWORK_COLOR_FEEDLY,
+    analytics: _seedsNetworkcolor.default.NETWORK_COLOR_ANALYTICS,
+    youtube: _seedsNetworkcolor.default.NETWORK_COLOR_YOUTUBE,
+    messenger: _seedsNetworkcolor.default.NETWORK_COLOR_MESSENGER,
+    snapchat: _seedsNetworkcolor.default.NETWORK_COLOR_SNAPCHAT,
+    pinterest: _seedsNetworkcolor.default.NETWORK_COLOR_PINTEREST,
+    tumblr: _seedsNetworkcolor.default.NETWORK_COLOR_TUMBLR,
+    reddit: _seedsNetworkcolor.default.NETWORK_COLOR_REDDIT,
+    tripadvisor: _seedsNetworkcolor.default.NETWORK_COLOR_TRIPADVISOR,
+    glassdoor: _seedsNetworkcolor.default.NETWORK_COLOR_GLASSDOOR,
+    google_my_business: _seedsNetworkcolor.default.NETWORK_COLOR_GOOGLE_MY_BUSINESS,
+    google_business_messages: _seedsNetworkcolor.default.NETWORK_COLOR_GOOGLE_BUSINESS_MESSAGES,
+    salesforce: _seedsNetworkcolor.default.NETWORK_COLOR_SALESFORCE,
+    zendesk: _seedsNetworkcolor.default.NETWORK_COLOR_ZENDESK,
+    hubspot: _seedsNetworkcolor.default.NETWORK_COLOR_HUBSPOT,
+    microsoft_dynamics: _seedsNetworkcolor.default.NETWORK_COLOR_MICROSOFT_DYNAMICS,
+    yelp: _seedsNetworkcolor.default.NETWORK_COLOR_YELP,
+    whatsapp: _seedsNetworkcolor.default.NETWORK_COLOR_WHATSAPP
+  }
+}, _literalColors.default);
+
+var typography = {
+  "100": _seedsTypography.default.TYPOGRAPHY_SIZE_100,
+  "200": _seedsTypography.default.TYPOGRAPHY_SIZE_200,
+  "300": _seedsTypography.default.TYPOGRAPHY_SIZE_300,
+  "400": _seedsTypography.default.TYPOGRAPHY_SIZE_400,
+  "500": _seedsTypography.default.TYPOGRAPHY_SIZE_500,
+  "600": _seedsTypography.default.TYPOGRAPHY_SIZE_600,
+  "700": _seedsTypography.default.TYPOGRAPHY_SIZE_700,
+  "800": _seedsTypography.default.TYPOGRAPHY_SIZE_800,
+  "900": _seedsTypography.default.TYPOGRAPHY_SIZE_900,
+  "1000": _seedsTypography.default.TYPOGRAPHY_SIZE_1000,
+  "1100": _seedsTypography.default.TYPOGRAPHY_SIZE_1100,
+  "1200": _seedsTypography.default.TYPOGRAPHY_SIZE_1200
+};
+exports.typography = typography;
+var fontFamily = _seedsTypography.default.TYPOGRAPHY_FAMILY;
+exports.fontFamily = fontFamily;
+var fontWeights = {
+  normal: _seedsTypography.default.TYPOGRAPHY_WEIGHT_NORMAL,
+  semibold: _seedsTypography.default.TYPOGRAPHY_WEIGHT_SEMIBOLD,
+  bold: _seedsTypography.default.TYPOGRAPHY_WEIGHT_BOLD,
+  extrabold: _seedsTypography.default.TYPOGRAPHY_WEIGHT_EXTRA_BOLD
+};
+exports.fontWeights = fontWeights;
+var space = {
+  "0": _seedsSpace.default.SPACE_SIZE_0,
+  "100": _seedsSpace.default.SPACE_SIZE_100,
+  "200": _seedsSpace.default.SPACE_SIZE_200,
+  "300": _seedsSpace.default.SPACE_SIZE_300,
+  "350": _seedsSpace.default.SPACE_SIZE_350,
+  "400": _seedsSpace.default.SPACE_SIZE_400,
+  "450": _seedsSpace.default.SPACE_SIZE_450,
+  "500": _seedsSpace.default.SPACE_SIZE_500,
+  "600": _seedsSpace.default.SPACE_SIZE_600
+};
+exports.space = space;
+var radii = {
+  "400": _seedsBorder.default.BORDER_RADIUS_400,
+  "500": _seedsBorder.default.BORDER_RADIUS_500,
+  "600": _seedsBorder.default.BORDER_RADIUS_600,
+  "1000": _seedsBorder.default.BORDER_RADIUS_1000,
+  inner: _seedsBorder.default.BORDER_RADIUS_500,
+  outer: _seedsBorder.default.BORDER_RADIUS_600,
+  pill: _seedsBorder.default.BORDER_RADIUS_1000
+};
+exports.radii = radii;
+var borders = {
+  "500": _seedsBorder.default.BORDER_WIDTH_500 + " solid"
+};
+exports.borders = borders;
+var borderWidths = {
+  "500": _seedsBorder.default.BORDER_WIDTH_500
+};
+exports.borderWidths = borderWidths;
+var shadows = {
+  "100": _seedsDepth.default.ELEVATION_LEVEL_100,
+  "200": _seedsDepth.default.ELEVATION_LEVEL_200,
+  "300": _seedsDepth.default.ELEVATION_LEVEL_300,
+  "400": _seedsDepth.default.ELEVATION_LEVEL_400
+};
+exports.shadows = shadows;
+var easing = {
+  ease_in: _seedsMotion.default.MOTION_EASE_IN,
+  ease_out: _seedsMotion.default.MOTION_EASE_OUT,
+  ease_inout: _seedsMotion.default.MOTION_EASE_INOUT
+};
+exports.easing = easing;
+var duration = {
+  fast: _seedsMotion.default.MOTION_DURATION_FAST,
+  medium: _seedsMotion.default.MOTION_DURATION_MEDIUM,
+  slow: _seedsMotion.default.MOTION_DURATION_SLOW
+};
+exports.duration = duration;
+var theme = {
+  breakpoints: breakpoints,
+  colors: colors,
+  typography: _extends({}, typography, {
+    typography: typography
+  }),
+  fontFamily: fontFamily,
+  fontWeights: fontWeights,
+  space: _extends({}, space, {
+    space: space,
+    "-space": Object.keys(space).reduce(function (negativeSpace, key) {
+      // The values are strings (eg 24px) so we concatenate a negative sign
+      negativeSpace[key] = "-" + space[key];
+      return negativeSpace;
+    }, {})
+  }),
+  radii: _extends({}, radii, {
+    radii: radii
+  }),
+  borders: borders,
+  borderWidths: borderWidths,
+  shadows: _extends({}, shadows, {
+    shadows: shadows
+  }),
+  easing: easing,
+  duration: duration
+};
+console.log(theme.space);
+var _default = theme;
+exports.default = _default;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+var _literalColors = _interopRequireDefault(require("../themes/default/literal-colors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/commonjs/types/theme.flow.js

@@ -1,7 +1,3 @@
 "use strict";
 
-var _theme = _interopRequireWildcard(require("../utils/theme"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _theme = require("../themes/default/theme");

package/commonjs/utils/mixins.js

@@ -5,7 +5,7 @@ exports.disabled = exports.pill = exports.focusRing = exports.visuallyHidden = e
 
 var _styledComponents = require("styled-components");
 
-var _theme = _interopRequireDefault(require("./theme"));
+var _theme = _interopRequireDefault(require("../themes/default/theme"));
 
 var _polished = require("polished");
 
@@ -21,7 +21,7 @@ var svgToDataURL = function svgToDataURL(svgStr) {
 exports.svgToDataURL = svgToDataURL;
 var visuallyHidden = (0, _styledComponents.css)(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;"]);
 exports.visuallyHidden = visuallyHidden;
-var focusRing = (0, _styledComponents.css)(["box-shadow:0 0 0 1px ", ",0 0px 0px 4px ", ";outline:none;&::-moz-focus-inner{border:0;}"], _theme.default.colors.cta.primary.background, (0, _polished.transparentize)(0.7, _theme.default.colors.cta.primary.background));
+var focusRing = (0, _styledComponents.css)(["box-shadow:0 0 0 1px ", ",0 0px 0px 4px ", ";outline:none;&::-moz-focus-inner{border:0;}"], _theme.default.colors.button.primary.background.base, (0, _polished.transparentize)(0.7, _theme.default.colors.button.primary.background.base));
 exports.focusRing = focusRing;
 var pill = (0, _styledComponents.css)(["min-width:", ";min-height:", ";padding:", " ", ";border-radius:", ";"], _theme.default.space[600], _theme.default.space[600], _theme.default.space[300], _theme.default.space[350], _theme.default.radii.pill);
 exports.pill = pill;

package/commonjs/utils/responsiveProps/index.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.normalizeResponsiveProp = void 0;
 
-var _theme = _interopRequireDefault(require("../theme"));
+var _theme = _interopRequireDefault(require("../../themes/default/theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/Badge/styles.js

@@ -11,7 +11,7 @@ var colors = {
   suggestion: "colors.neutral.900"
 };
 var backgroundColors = {
-  primary: "colors.cta.primary",
+  primary: "colors.blue.700",
   secondary: "colors.yellow.500",
   passive: "colors.neutral.200",
   common: "colors.aqua.600",

package/lib/Banner/index.js

@@ -69,8 +69,9 @@ var Banner = /*#__PURE__*/function (_React$Component) {
         text = _this$props.text,
         rest = _objectWithoutPropertiesLoose(_this$props, ["type", "text"]);
 
-    return /*#__PURE__*/React.createElement(Container, _extends({
-      type: type,
+    return /*#__PURE__*/React.createElement(Container // danger needs to be properly deprecated and removed DS-1094
+    , _extends({
+      type: type === "danger" ? "error" : type,
       "data-qa-alert": "",
       "data-qa-alert-type": type,
       "data-qa-alert-text": text // $FlowIssue - upgrade v0.112.0

package/lib/Banner/styles.js

@@ -4,6 +4,6 @@ var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "q43dr4-0"
 })(function (props) {
-  return css(["display:flex;overflow:hidden;align-items:center;justify-content:space-between;color:", ";border-radius:", ";font-family:", ";", " padding:", ";border:1px solid ", ";background-color:", ";.Icon{align-self:flex-start;margin-top:3px;margin-right:", ";min-width:16px;color:", ";}a,button{font-weight:", ";color:", ";font-size:inherit;text-decoration:underline;}> span:not(.Icon){display:block;}", " ", ""], props.theme.colors.text.headline, props.theme.radii.outer, props.theme.fontFamily, props.theme.typography[200], props.theme.space[300], props.theme.colors[props.type].border, props.theme.colors[props.type].background, props.theme.space[400], props.theme.colors[props.type].icon, props.theme.fontWeights.semibold, props.theme.colors.text.headline, COMMON, LAYOUT);
+  return css(["display:flex;overflow:hidden;align-items:center;justify-content:space-between;color:", ";border-radius:", ";font-family:", ";", " padding:", ";border:1px solid ", ";background-color:", ";.Icon{align-self:flex-start;margin-top:3px;margin-right:", ";min-width:16px;color:", ";}a,button{font-weight:", ";color:", ";font-size:inherit;&:hover{color:", ";text-decoration:underline;}}> span:not(.Icon){display:block;}", " ", ""], props.theme.colors.text.body, props.theme.radii.outer, props.theme.fontFamily, props.theme.typography[200], props.theme.space[300], props.theme.colors.container.border[props.type], props.theme.colors.container.background[props.type], props.theme.space[400], props.theme.colors.icon[props.type], props.theme.fontWeights.semibold, props.theme.colors.text.body, props.theme.colors.text.body, COMMON, LAYOUT);
 });
 export default Container;

package/lib/Button/index.js

@@ -8,7 +8,7 @@ import Container from "./styles";
 var Button = function Button(_ref) {
   var href = _ref.href,
       _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? "default" : _ref$appearance,
+      appearance = _ref$appearance === void 0 ? "unstyled" : _ref$appearance,
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       disabled = _ref.disabled,
@@ -27,8 +27,10 @@ var Button = function Button(_ref) {
 
   if (!href && external) {
     console.warn("Warning: external prop cannot be set without a href declaration");
-  }
+  } // plans to properly deprecate captured in DS-1096
 
+
+  var appearanceCheck = appearance === "default" ? "unstyled" : appearance;
   return /*#__PURE__*/React.createElement(Container, _extends({
     title: title,
     active: active,
@@ -40,7 +42,7 @@ var Button = function Button(_ref) {
     "aria-disabled": disabled ? disabled : undefined,
     disabled: disabled,
     buttonSize: size,
-    appearance: appearance,
+    appearance: appearanceCheck,
     ref: innerRef,
     onClick: onClick,
     "data-qa-button": title || "",

package/lib/Button/styles.js

@@ -8,15 +8,15 @@ var Container = styled.button.withConfig({
 })(["display:inline-block;box-sizing:border-box;text-align:center;font-family:", ";border:1px solid ", ";border-radius:", ";border-style:", ";background:", ";color:", ";cursor:pointer;text-decoration:none;line-height:16px;white-space:nowrap;font-weight:", ";transition:all ", " linear;margin:0;padding:", ";font-size:", ";&:visited{color:", ";}&:hover{color:", ";background:", ";text-decoration:none;box-shadow:", ";}&:active{color:", ";background:", ";transform:translateY(1px);}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", "{vertical-align:text-bottom;}", " ", ""], function (props) {
   return props.theme.fontFamily;
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].borderColor;
+  return props.theme.colors.button[props.appearance].border.base;
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
   return props.appearance === "placeholder" ? "dashed" : "solid";
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].background;
+  return props.theme.colors.button[props.appearance].background.base;
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].color;
+  return props.theme.colors.button[props.appearance].text.base;
 }, function (props) {
   return props.theme.fontWeights.bold;
 }, function (props) {
@@ -26,22 +26,22 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.buttonSize === "default" ? props.theme.typography[200].fontSize : props.theme.typography[300].fontSize;
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].color;
+  return props.theme.colors.button[props.appearance].text.base;
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].hoverColor;
+  return props.theme.colors.button[props.appearance].text.hover;
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].hoverBackground;
+  return props.theme.colors.button[props.appearance].background.hover;
 }, function (props) {
   return props.appearance === "placeholder" ? props.theme.shadows[100] : "none";
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].hoverColor;
+  return props.theme.colors.button[props.appearance].text.hover;
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].activeBackground;
+  return props.theme.colors.button[props.appearance].background.active;
 }, focusRing, function (props) {
-  return props.active && css(["color:", " !important;background:", " !important;"], props.theme.colors.cta[props.appearance].hoverColor, props.theme.colors.cta[props.appearance].activeBackground);
+  return props.active && css(["color:", " !important;background:", " !important;"], props.theme.colors.button[props.appearance].text.hover, props.theme.colors.button[props.appearance].background.active);
 }, 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:multiply;", ""], pill);
+  return props.appearance === "pill" && css(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode ? "screen" : "multiply", pill);
 }, Icon, LAYOUT, COMMON);
-export default Container;
+export default Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/lib/Card/index.js

@@ -17,11 +17,11 @@ var Card = function Card(_ref) {
       _ref$border = _ref.border,
       border = _ref$border === void 0 ? 500 : _ref$border,
       _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "border" : _ref$borderColor,
+      borderColor = _ref$borderColor === void 0 ? "container.border.base" : _ref$borderColor,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? "text.body" : _ref$color,
       _ref$bg = _ref.bg,
-      bg = _ref$bg === void 0 ? "background.container" : _ref$bg,
+      bg = _ref$bg === void 0 ? "container.background.base" : _ref$bg,
       rest = _objectWithoutPropertiesLoose(_ref, ["onClick", "href", "children", "ariaLabel", "buttonProps", "border", "borderColor", "color", "bg"]);
 
   return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {

package/lib/CharacterCounter/styles.js

@@ -10,7 +10,7 @@ var Container = styled.div.withConfig({
 }, function (props) {
   return props.theme.fontWeights.semibold;
 }, function (props) {
-  return props.overlimit ? props.theme.colors.error.color : props.theme.colors.text.subtext;
+  return props.overlimit ? props.theme.colors.text.error : props.theme.colors.text.subtext;
 }, function (p) {
   return p.mini && css(["", ""], p.theme.typography[100]);
 }, COMMON);

package/lib/Checkbox/styles.js

@@ -18,11 +18,11 @@ export var InputWrapper = styled(Box).withConfig({
 }, function (props) {
   return props.theme.space[400];
 }, function (props) {
-  return props.appearance === "pill" && css(["background-color:transparent;transition:all ", " ", ";mix-blend-mode:multiply;", " &:hover{background-color:", ";}", "{", "}"], function (props) {
+  return props.appearance === "pill" && css(["background-color:transparent;transition:all ", " ", ";mix-blend-mode:", ";", " &:hover{background-color:", ";}", "{", "}"], function (props) {
     return props.theme.duration.fast;
   }, function (props) {
     return props.theme.easing.ease_inout;
-  }, pill, props.theme.colors.background.app, PillInput, pill);
+  }, props.theme.mode ? "screen" : "multiply", pill, props.theme.colors.app.background.base, PillInput, pill);
 });
 InputWrapper.displayName = "InputWrapper";
 export var CheckboxBox = styled.div.withConfig({
@@ -33,9 +33,9 @@ export var CheckboxBox = styled.div.withConfig({
 }, function (props) {
   return props.theme.space[400];
 }, function (props) {
-  return props.theme.colors.forms.borderColor;
+  return props.theme.colors.form.border.base;
 }, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.form.background.base;
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
@@ -63,9 +63,9 @@ export var PillInput = styled.input.withConfig({
 }, focusRing, function (props) {
   return !props.checked && css(["&:hover,&:focus{~ ", " ", "{opacity:", ";color:", ";}}"], CheckboxBox, CheckIcon, function (props) {
     return props.disabled ? 0 : 1;
-  }, props.theme.colors.forms.borderColor);
+  }, props.theme.colors.form.border.base);
 }, function (props) {
-  return props.checked && css(["~ ", "{border-color:", ";background-color:", ";}~ ", " ", "{opacity:1;color:", ";}"], CheckboxBox, props.theme.colors.selection.border, props.theme.colors.selection.background, CheckboxBox, CheckIcon, props.theme.colors.icon.inverse);
+  return props.checked && css(["~ ", "{border-color:", ";background-color:", ";}~ ", " ", "{opacity:1;color:", ";}"], CheckboxBox, props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, CheckboxBox, CheckIcon, props.theme.colors.icon.inverse);
 }, function (props) {
   return props.disabled && css(["~ ", "{opacity:0.4;}~ ", " ", "{opacity:", ";}"], CheckboxBox, CheckboxBox, CheckIcon, props.checked ? 1 : 0);
 });
@@ -105,6 +105,6 @@ export var CheckboxContainer = styled.span.withConfig({
   displayName: "styles__CheckboxContainer",
   componentId: "sc-59uw8o-6"
 })(function (props) {
-  return css(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url(\"data:image/svg+xml;utf8,", "\");opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, getIcon(props.indeterminate ? "indeterminate" : "check", props.checked ? props.theme.colors.background.container : props.theme.colors.forms.borderColor), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && css(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.forms.borderColor, props.theme.colors.background.container, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? "not-allowed" : "pointer", !props.indeterminate && css(["border-color:", " !important;background-color:", ";"], props.theme.colors.neutral[300], props.theme.colors.background.container), props.theme.colors.selection.border, props.theme.colors.selection.background, props.indeterminate && props.checked && css(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.selection.border, props.theme.colors.selection), focusRing, COMMON);
+  return css(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url(\"data:image/svg+xml;utf8,", "\");opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, getIcon(props.indeterminate ? "indeterminate" : "check", props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && css(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? "not-allowed" : "pointer", !props.indeterminate && css(["border-color:", " !important;background-color:", ";"], props.theme.colors.neutral[300], props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && css(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), focusRing, COMMON);
 });
 export default Container;

package/lib/Collapsible/index.js

@@ -15,10 +15,7 @@ var Collapsible = function Collapsible(_ref) {
       _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
       _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? 0 : _ref$offset,
-      _ref$collapsedHeight = _ref.collapsedHeight,
-      collapsedHeight = _ref$collapsedHeight === void 0 ? 0 : _ref$collapsedHeight,
-      openHeight = _ref.openHeight;
+      offset = _ref$offset === void 0 ? 0 : _ref$offset;
 
   var _useState = useState("Racine-collapsible-" + idCounter++),
       id = _useState[0];
@@ -27,9 +24,7 @@ var Collapsible = function Collapsible(_ref) {
     value: {
       isOpen: isOpen,
       id: id,
-      offset: offset,
-      collapsedHeight: collapsedHeight,
-      openHeight: openHeight
+      offset: offset
     }
   }, children);
 };
@@ -55,9 +50,7 @@ var Panel = function Panel(_ref3) {
   var _useContext2 = useContext(CollapsibleContext),
       isOpen = _useContext2.isOpen,
       id = _useContext2.id,
-      offset = _useContext2.offset,
-      collapsedHeight = _useContext2.collapsedHeight,
-      openHeight = _useContext2.openHeight;
+      offset = _useContext2.offset;
 
   var ref = useRef();
   var measurement = useMeasure(ref);
@@ -70,7 +63,7 @@ var Panel = function Panel(_ref3) {
   // There is no animation because css is not changing the maxHeight property after mount
 
 
-  var maxHeight = typeof openHeight !== "undefined" ? openHeight : measurement.height + offset;
+  var maxHeight = isHidden === undefined ? undefined : measurement.height + offset;
   /* We use the "hidden" attribute to remove the contents of the panel from the tab order of the page, but it fucks with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */
 
   useEffect(function () {
@@ -96,14 +89,12 @@ var Panel = function Panel(_ref3) {
     }
   }, [isOpen]);
   return /*#__PURE__*/React.createElement(CollapsingBox, _extends({
-    scrollable: isOpen,
-    maxHeight: isOpen ? maxHeight : collapsedHeight,
-    minHeight: collapsedHeight,
+    maxHeight: isOpen ? maxHeight : "0",
     "data-qa-collapsible": "",
     "data-qa-collapsible-isopen": isOpen === true
   }, rest), /*#__PURE__*/React.createElement(Box, {
     width: "100%",
-    hidden: isHidden && collapsedHeight === 0,
+    hidden: isHidden,
     "aria-hidden": !isOpen,
     id: id,
     ref: ref

package/lib/Collapsible/styles.js

@@ -3,15 +3,8 @@ import Box from "../Box";
 export var CollapsingBox = styled(Box).withConfig({
   displayName: "styles__CollapsingBox",
   componentId: "sc-1xvfbl7-0"
-})(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;background:linear-gradient( ", " 30%,rgba(255,255,255,0) ),linear-gradient( rgba(255,255,255,0),", " 70% ) 0 100%,radial-gradient( farthest-side at 50% 0,rgb(39 51 51 / 5%),rgba(0,0,0,0) ),radial-gradient( farthest-side at 50% 100%,rgb(39 51 51 / 5%),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll;", ";"], function (p) {
+})(["transition:max-height ", " ", ";will-change:max-height;overflow:hidden;"], function (p) {
   return p.theme.duration.medium;
 }, function (p) {
   return p.theme.easing.ease_inout;
-}, function (p) {
-  return p.theme.colors.neutral[100];
-}, function (p) {
-  return p.theme.colors.neutral[100];
-}, function (_ref) {
-  var scrollable = _ref.scrollable;
-  return scrollable ? "overflow: auto" : "overflow: hidden";
 });