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

package/__flow__/types/theme.flow.js

@@ -1,218 +1,43 @@
 // @flow strict-local
-import theme, {
+import {
   breakpoints,
+  typography,
   fontWeights,
+  radii,
+  borders,
+  borderWidths,
+  shadows,
+  space,
   easing,
   duration,
-} from "../utils/theme";
-
-export type TypeTheme = typeof theme;
-
-export type TypeBreakpoints = typeof breakpoints;
-
-export type TypeColor =
-  | "cta.primary"
-  | "cta.secondary"
-  | "cta.link"
-  | "text.body"
-  | "text.headline"
-  | "text.subtext"
-  | "error"
-  | "warning"
-  | "border"
-  | "neutral.0"
-  | "neutral.100"
-  | "neutral.200"
-  | "neutral.300"
-  | "neutral.400"
-  | "neutral.500"
-  | "neutral.600"
-  | "neutral.700"
-  | "neutral.800"
-  | "neutral.900"
-  | "neutral.1000"
-  | "green.0"
-  | "green.100"
-  | "green.200"
-  | "green.300"
-  | "green.400"
-  | "green.500"
-  | "green.600"
-  | "green.700"
-  | "green.800"
-  | "green.900"
-  | "green.1000"
-  | "green.1100"
-  | "red.0"
-  | "red.100"
-  | "red.200"
-  | "red.300"
-  | "red.400"
-  | "red.500"
-  | "red.600"
-  | "red.700"
-  | "red.800"
-  | "red.900"
-  | "red.1000"
-  | "blue.0"
-  | "blue.100"
-  | "blue.200"
-  | "blue.300"
-  | "blue.400"
-  | "blue.500"
-  | "blue.600"
-  | "blue.700"
-  | "blue.800"
-  | "blue.900"
-  | "blue.1000"
-  | "blue.1100"
-  | "teal.0"
-  | "teal.100"
-  | "teal.200"
-  | "teal.300"
-  | "teal.400"
-  | "teal.500"
-  | "teal.600"
-  | "teal.700"
-  | "teal.800"
-  | "teal.900"
-  | "teal.1000"
-  | "teal.1100"
-  | "aqua.0"
-  | "aqua.100"
-  | "aqua.200"
-  | "aqua.300"
-  | "aqua.400"
-  | "aqua.500"
-  | "aqua.600"
-  | "aqua.700"
-  | "aqua.800"
-  | "aqua.900"
-  | "aqua.1000"
-  | "aqua.1100"
-  | "purple.0"
-  | "purple.100"
-  | "purple.200"
-  | "purple.300"
-  | "purple.400"
-  | "purple.500"
-  | "purple.600"
-  | "purple.700"
-  | "purple.800"
-  | "purple.900"
-  | "purple.1000"
-  | "purple.1100"
-  | "yellow.0"
-  | "yellow.100"
-  | "yellow.200"
-  | "yellow.300"
-  | "yellow.400"
-  | "yellow.500"
-  | "yellow.600"
-  | "yellow.700"
-  | "yellow.800"
-  | "yellow.900"
-  | "yellow.1000"
-  | "yellow.1100"
-  | "pink.0"
-  | "pink.100"
-  | "pink.200"
-  | "pink.300"
-  | "pink.400"
-  | "pink.500"
-  | "pink.600"
-  | "pink.700"
-  | "pink.800"
-  | "pink.900"
-  | "pink.1000"
-  | "pink.1100"
-  | "orange.0"
-  | "orange.100"
-  | "orange.200"
-  | "orange.300"
-  | "orange.400"
-  | "orange.500"
-  | "orange.600"
-  | "orange.700"
-  | "orange.800"
-  | "orange.900"
-  | "orange.1000"
-  | "orange.1100"
-  | "pink.0"
-  | "pink.100"
-  | "pink.200"
-  | "pink.300"
-  | "pink.400"
-  | "pink.500"
-  | "pink.600"
-  | "pink.700"
-  | "pink.800"
-  | "pink.900"
-  | "pink.1000"
-  | "pink.1100"
-  | "network.twitter"
-  | "network.twitter_like"
-  | "network.facebook"
-  | "network.facebook_audience_network"
-  | "network.linkedin"
-  | "network.instagram"
-  | "network.feedly"
-  | "network.analytics"
-  | "network.youtube"
-  | "network.messenger"
-  | "network.snapchat"
-  | "network.pinterest"
-  | "network.tumblr"
-  | "network.reddit"
-  | "network.tripadvisor"
-  | "network.google_my_business";
-
-export type TypeTypographySize =
-  | 100
-  | 200
-  | 300
-  | 400
-  | 500
-  | 600
-  | 700
-  | 800
-  | 900
-  | 1000
-  | 1100
-  | 1200;
-
-export type TypeFontWeight = $Keys<typeof fontWeights>;
-
-export type TypeSpace =
-  | 0
-  | 100
-  | 200
-  | 300
-  | 350
-  | 400
-  | 450
-  | 500
-  | 600
-  | -100
-  | -200
-  | -300
-  | -350
-  | -400
-  | -450
-  | -500
-  | -600
-  | string;
-
-export type TypeRadii = 400 | 500 | 600 | 1000 | "inner" | "outer" | "pill";
-
-export type TypeBorder = 500;
-
-export type TypeBorderWidth = 500;
-
-export type TypeShadow = 100 | 200 | 300 | 400;
-
-export type TypeEasing = $Keys<typeof easing>;
-
-export type TypeDuration = $Keys<typeof duration>;
-
-export type TypeSize = "default" | "large";
+} from "../themes/default/theme";
+import type { TypeColors } from "./theme.colors.flow.js";
+import type { TypeFontFamilyString } from "../themes/default/theme";
+
+export type TypeBreakpoint = typeof breakpoints;
+export type TypeTypography = typeof typography;
+export type TypeFontWeight = typeof fontWeights;
+export type TypeFontFamily = TypeFontFamilyString;
+export type TypeSpace = typeof space;
+export type TypeColor = TypeColors;
+export type TypeRadii = typeof radii;
+export type TypeBorder = typeof borders;
+export type TypeBorderWidth = typeof borderWidths;
+export type TypeShadow = typeof shadows;
+export type TypeEasing = typeof easing;
+export type TypeDuration = typeof duration;
+
+export type TypeTheme = {
+  breakpoints: TypeBreakpoint,
+  colors: TypeColor,
+  typography: TypeTypography,
+  fontWeights: TypeFontWeight,
+  fontFamily: TypeFontFamily,
+  space: TypeSpace,
+  radii: TypeRadii,
+  borders: TypeBorder,
+  borderWidths: TypeBorderWidth,
+  shadows: TypeShadow,
+  easing: TypeEasing,
+  duration: TypeDuration,
+};

package/__flow__/utils/mixins.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 import { css } from "styled-components";
-import theme from "./theme";
+import theme from "../themes/default/theme";
 import { transparentize } from "polished";
 
 export const svgToDataURL = (svgStr: string) => {
@@ -26,8 +26,9 @@ export const visuallyHidden = css`
 `;
 
 export const focusRing = css`
-  box-shadow: 0 0 0 1px ${theme.colors.cta.primary.background},
-    0 0px 0px 4px ${transparentize(0.7, theme.colors.cta.primary.background)};
+  box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},
+    0 0px 0px 4px
+      ${transparentize(0.7, theme.colors.button.primary.background.base)};
   outline: none;
 
   &::-moz-focus-inner {

package/__flow__/utils/responsiveProps/index.js

@@ -1,5 +1,5 @@
 // @flow
-import theme from "../theme";
+import theme from "../../themes/default/theme";
 
 import type { TypeResponsive } from "../../types/system-props.flow";
 

package/commonjs/Badge/styles.js

@@ -23,7 +23,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/commonjs/Banner/index.js

@@ -83,8 +83,9 @@ var Banner = /*#__PURE__*/function (_React$Component) {
         text = _this$props.text,
         rest = _objectWithoutPropertiesLoose(_this$props, ["type", "text"]);
 
-    return /*#__PURE__*/React.createElement(_styles.default, _extends({
-      type: type,
+    return /*#__PURE__*/React.createElement(_styles.default // 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/commonjs/Banner/styles.js

@@ -15,7 +15,7 @@ var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "q43dr4-0"
 })(function (props) {
-  return (0, _styledComponents.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, _systemProps.COMMON, _systemProps.LAYOUT);
+  return (0, _styledComponents.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, _systemProps.COMMON, _systemProps.LAYOUT);
 });
 
 var _default = Container;

package/commonjs/Button/index.js

@@ -20,7 +20,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 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,
@@ -39,8 +39,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(_styles.default, _extends({
     title: title,
     active: active,
@@ -52,7 +54,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/commonjs/Button/styles.js

@@ -23,15 +23,15 @@ var Container = _styledComponents.default.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) {
@@ -41,24 +41,25 @@ var Container = _styledComponents.default.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;
 }, _mixins.focusRing, function (props) {
-  return props.active && (0, _styledComponents.css)(["color:", " !important;background:", " !important;"], props.theme.colors.cta[props.appearance].hoverColor, props.theme.colors.cta[props.appearance].activeBackground);
+  return props.active && (0, _styledComponents.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 && _mixins.disabled;
 }, function (props) {
-  return props.appearance === "pill" && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode: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 ? "screen" : "multiply", _mixins.pill);
 }, _styles.default, _systemProps.LAYOUT, _systemProps.COMMON);
 
-var _default = Container;
+var _default = Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}
+
 exports.default = _default;

package/commonjs/Card/index.js

@@ -26,11 +26,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(_styles.Container, _extends({}, rest, {

package/commonjs/CharacterCounter/styles.js

@@ -21,7 +21,7 @@ var Container = _styledComponents.default.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 && (0, _styledComponents.css)(["", ""], p.theme.typography[100]);
 }, _systemProps.COMMON);

package/commonjs/Checkbox/styles.js

@@ -36,11 +36,11 @@ var InputWrapper = (0, _styledComponents.default)(_Box.default).withConfig({
 }, function (props) {
   return props.theme.space[400];
 }, function (props) {
-  return props.appearance === "pill" && (0, _styledComponents.css)(["background-color:transparent;transition:all ", " ", ";mix-blend-mode:multiply;", " &:hover{background-color:", ";}", "{", "}"], function (props) {
+  return props.appearance === "pill" && (0, _styledComponents.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;
-  }, _mixins.pill, props.theme.colors.background.app, PillInput, _mixins.pill);
+  }, props.theme.mode ? "screen" : "multiply", _mixins.pill, props.theme.colors.app.background.base, PillInput, _mixins.pill);
 });
 exports.InputWrapper = InputWrapper;
 InputWrapper.displayName = "InputWrapper";
@@ -53,9 +53,9 @@ var CheckboxBox = _styledComponents.default.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) {
@@ -87,9 +87,9 @@ var PillInput = _styledComponents.default.input.withConfig({
 }, _mixins.focusRing, function (props) {
   return !props.checked && (0, _styledComponents.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 && (0, _styledComponents.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 && (0, _styledComponents.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 && (0, _styledComponents.css)(["~ ", "{opacity:0.4;}~ ", " ", "{opacity:", ";}"], CheckboxBox, CheckboxBox, CheckIcon, props.checked ? 1 : 0);
 });
@@ -132,7 +132,7 @@ var CheckboxContainer = _styledComponents.default.span.withConfig({
   displayName: "styles__CheckboxContainer",
   componentId: "sc-59uw8o-6"
 })(function (props) {
-  return (0, _styledComponents.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 && (0, _styledComponents.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 && (0, _styledComponents.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 && (0, _styledComponents.css)(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.selection.border, props.theme.colors.selection), _mixins.focusRing, _systemProps.COMMON);
+  return (0, _styledComponents.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 && (0, _styledComponents.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 && (0, _styledComponents.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 && (0, _styledComponents.css)(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), _mixins.focusRing, _systemProps.COMMON);
 });
 
 exports.CheckboxContainer = CheckboxContainer;

package/commonjs/Collapsible/index.js

@@ -29,10 +29,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 = (0, React.useState)("Racine-collapsible-" + idCounter++),
       id = _useState[0];
@@ -41,9 +38,7 @@ var Collapsible = function Collapsible(_ref) {
     value: {
       isOpen: isOpen,
       id: id,
-      offset: offset,
-      collapsedHeight: collapsedHeight,
-      openHeight: openHeight
+      offset: offset
     }
   }, children);
 };
@@ -69,9 +64,7 @@ var Panel = function Panel(_ref3) {
   var _useContext2 = (0, React.useContext)(CollapsibleContext),
       isOpen = _useContext2.isOpen,
       id = _useContext2.id,
-      offset = _useContext2.offset,
-      collapsedHeight = _useContext2.collapsedHeight,
-      openHeight = _useContext2.openHeight;
+      offset = _useContext2.offset;
 
   var ref = (0, React.useRef)();
   var measurement = (0, _useMeasure.default)(ref);
@@ -84,7 +77,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. */
 
   (0, React.useEffect)(function () {
@@ -110,14 +103,12 @@ var Panel = function Panel(_ref3) {
     }
   }, [isOpen]);
   return /*#__PURE__*/React.createElement(_styles.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.default, {
     width: "100%",
-    hidden: isHidden && collapsedHeight === 0,
+    hidden: isHidden,
     "aria-hidden": !isOpen,
     id: id,
     ref: ref

package/commonjs/Collapsible/styles.js

@@ -12,16 +12,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var CollapsingBox = (0, _styledComponents.default)(_Box.default).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";
 });
 exports.CollapsingBox = CollapsingBox;

package/commonjs/DatePicker/styles.js

@@ -9,6 +9,8 @@ var _moment = _interopRequireDefault(require("moment"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _mixins = require("../utils/mixins");
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -75,13 +77,13 @@ var CalendarDay = (0, _styledComponents.default)(_Box.default).withConfig({
       theme = _ref.theme;
 
   if (isSelected(modifiers)) {
-    return (0, _styledComponents.css)(["background-color:", ";color:", ";margin-left:", ";margin-right:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";"], theme.colors.selection.background, theme.colors.selection.color, shouldHaveLeftPill(modifiers, day) && theme.space[200], shouldHaveRightPill(modifiers, day) && theme.space[200], shouldHaveLeftPill(modifiers, day) && theme.radii.pill, shouldHaveLeftPill(modifiers, day) && theme.radii.pill, shouldHaveRightPill(modifiers, day) && theme.radii.pill, shouldHaveRightPill(modifiers, day) && theme.radii.pill);
+    return (0, _styledComponents.css)(["background-color:", ";color:", ";margin-left:", ";margin-right:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";"], theme.colors.container.background.selected, theme.colors.text.inverse, shouldHaveLeftPill(modifiers, day) && theme.space[200], shouldHaveRightPill(modifiers, day) && theme.space[200], shouldHaveLeftPill(modifiers, day) && theme.radii.pill, shouldHaveLeftPill(modifiers, day) && theme.radii.pill, shouldHaveRightPill(modifiers, day) && theme.radii.pill, shouldHaveRightPill(modifiers, day) && theme.radii.pill);
   }
 
   if (isHoveredAndInRange(modifiers)) {
-    return (0, _styledComponents.css)(["margin:0 ", ";border-radius:", ";border:1px solid ", ";"], theme.space[200], theme.radii.pill, theme.colors.selection.border);
+    return (0, _styledComponents.css)(["margin:0 ", ";border-radius:", ";border:1px solid ", ";"], theme.space[200], theme.radii.pill, theme.colors.container.border.selected);
   } else if (isOutOfRange(modifiers)) {
-    return (0, _styledComponents.css)(["color:", ";"], theme.colors.selection.disabledColor);
+    return (0, _styledComponents.css)(["color:", ";", ";"], theme.colors.text.subtext, _mixins.disabled);
   }
 });
 exports.CalendarDay = CalendarDay;
@@ -95,7 +97,7 @@ var ReactDatesCssOverrides = (0, _styledComponents.createGlobalStyle)(_templateO
   return theme.colors.text.headline;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.colors.border;
+  return theme.colors.container.border.base;
 }, function (_ref5) {
   var theme = _ref5.theme;
   return theme.typography[200];
@@ -107,7 +109,7 @@ var ReactDatesCssOverrides = (0, _styledComponents.createGlobalStyle)(_templateO
   return theme.fontWeights.semibold;
 }, function (_ref8) {
   var theme = _ref8.theme;
-  return theme.colors.background.container;
+  return theme.colors.container.background.base;
 }, function (_ref9) {
   var theme = _ref9.theme;
   return theme.colors.text.body;
@@ -119,7 +121,7 @@ var ReactDatesCssOverrides = (0, _styledComponents.createGlobalStyle)(_templateO
   return theme.typography[200];
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.colors.background.container;
+  return theme.colors.container.background.base;
 }, function (_ref13) {
   var theme = _ref13.theme;
   return theme.typography[200];
@@ -128,21 +130,21 @@ var ReactDatesCssOverrides = (0, _styledComponents.createGlobalStyle)(_templateO
   return theme.colors.text.headline;
 }, function (_ref15) {
   var theme = _ref15.theme;
-  return theme.colors.background.container;
+  return theme.colors.container.background.base;
 }, function (_ref16) {
   var theme = _ref16.theme;
   return theme.fontWeights.semibold;
 }, function (_ref17) {
   var theme = _ref17.theme;
-  return theme.colors.background.container;
+  return theme.colors.container.background.base;
 }, function (_ref18) {
   var theme = _ref18.theme;
-  return theme.colors.cta.pill.color;
+  return theme.colors.button.pill.text.base;
 }, function (_ref19) {
   var theme = _ref19.theme;
-  return theme.colors.cta.pill.background;
+  return theme.colors.button.pill.background.base;
 }, function (_ref20) {
   var theme = _ref20.theme;
-  return theme.colors.cta.pill.hoverBackground;
+  return theme.colors.button.pill.background.hover;
 });
 exports.ReactDatesCssOverrides = ReactDatesCssOverrides;

package/commonjs/Drawer/styles.js

@@ -27,7 +27,7 @@ var Container = _styledComponents.default.div.withConfig({
 })(["display:flex;flex-direction:column;position:fixed;top:0;height:100%;width:", "px;background-color:", ";box-shadow:", ";filter:blur(0);", " ", ""], function (props) {
   return props.width;
 }, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.container.background.base;
 }, function (props) {
   return props.theme.shadows[400];
 }, function (props) {