@sproutsocial/racine 8.0.0-beta-dark-mode.7 → 8.0.0-beta-dark-mode.11

package/__flow__/Button/index.stories.js

@@ -76,7 +76,7 @@ largeButton.story = {
 };
 
 export const pillButton = () => (
-  <Box bg="background.container" p={400}>
+  <Box bg="container.background.base" p={400}>
     <Button appearance={text("shape", "pill")}>
       <Icon name="reply" mr={350} />
       Pill Button
@@ -89,7 +89,7 @@ pillButton.story = {
 };
 
 export const pillIconOnlyButton = () => (
-  <Box bg="background.container" p={400}>
+  <Box bg="container.background.base" p={400}>
     <Button appearance={text("shape", "pill")} ariaLabel="This is a label">
       <Icon name="circle-check-outline" />
     </Button>

package/__flow__/Link/constants.js

@@ -1,9 +1,9 @@
 // @flow
-import { COLOR_BLUE_800, COLOR_BLUE_900 } from "@sproutsocial/seeds-color";
+import { COLOR_BLUE_900 } from "@sproutsocial/seeds-color";
 
 const defaultLink = {
-  color: "cta.link",
-  hoverColor: COLOR_BLUE_800,
+  color: "link",
+  hoverColor: "link.hover",
   activeColor: COLOR_BLUE_900,
   fontWeight: "semibold",
 };

package/__flow__/Message/index.js

@@ -48,7 +48,7 @@ export type TypeProps = {
 const MessageContext = React.createContext({
   density: MESSAGE_DENSITIES.SMALL,
   borderColor: "container.border.base",
-  bg: "background.container",
+  bg: "container.background.base",
   indentContent: true,
 });
 
@@ -56,7 +56,7 @@ const Message = ({
   children,
   density = MESSAGE_DENSITIES.SMALL,
   borderColor = "container.border.base",
-  bg = "background.container",
+  bg = "container.background.base",
   indentContent = true,
   innerRef,
   qa,

package/__flow__/Modal/index.js

@@ -78,7 +78,7 @@ const ModalFooter = (props: TypeModalFooterProps) => (
 );
 
 ModalFooter.defaultProps = {
-  bg: "background.container",
+  bg: "container.background.base",
 };
 
 type TypeModalContentProps = React.ElementProps<typeof Box> & {

package/__flow__/Stack/index.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Children } from "react";
 import Box from "../Box";
 import { normalizeResponsiveProp } from "../utils/responsiveProps";
-import type { TypeSpace } from "../themes/default/theme";
+import type { TypeSpaceLiterals } from "../themes/default/theme";
 import type { TypeResponsive } from "../types/system-props.flow";
 
 type TypeDirection = "vertical" | "horizontal";
@@ -11,7 +11,7 @@ type TypeAlignment = "left" | "center" | "right" | "stretch";
 
 type TypeProps = {
   /** Amount of space between items in the stack */
-  space?: TypeResponsive<TypeSpace>,
+  space?: TypeResponsive<TypeSpaceLiterals>,
   /** Alignment of the items in the stack (horizontal or vertical) */
   align?: TypeResponsive<TypeAlignment>,
   /** Axis upon which the stack is laid out (left, center, right, or stretch) */

package/__flow__/Stack/index.stories.js

@@ -119,3 +119,22 @@ export const ResponsiveSpace = () => (
 ResponsiveSpace.story = {
   name: "Responsive space",
 };
+
+export const NumberSpaceType = () => (
+  <Stack
+    direction={select("Direction", directionOptions, "vertical")}
+    align={select("Alignment", alignmentOptions, "left")}
+    bg="neutral.100"
+    p={400}
+  >
+    <Item>This</Item>
+    <Item>is</Item>
+    <Item>the</Item>
+    <Item>stack</Item>
+    <Item>component</Item>
+  </Stack>
+);
+
+NumberSpaceType.story = {
+  name: "Testing types",
+};

package/__flow__/themes/default/theme.js

@@ -262,11 +262,7 @@ export type TypeSpaceLiterals =
   | 600
   | string;
 
-export type TypeSpace = {
-  [TypeSpaceLiterals]: string,
-};
-
-export const space: TypeSpace = {
+export const space = {
   "0": SPACE.SPACE_SIZE_0,
   "100": SPACE.SPACE_SIZE_100,
   "200": SPACE.SPACE_SIZE_200,

package/__flow__/types/theme.flow.js

@@ -7,18 +7,18 @@ import {
   borders,
   borderWidths,
   shadows,
-  //space,
+  space,
   easing,
   duration,
 } from "../themes/default/theme";
 import type { TypeColors } from "./theme.colors.flow.js";
-import type { TypeFontFamilyString, TypeSpace } from "../themes/default/theme";
+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 TypeSpace = typeof space;
 export type TypeColor = TypeColors;
 export type TypeRadii = typeof radii;
 export type TypeBorder = typeof borders;

package/commonjs/Link/constants.js

@@ -6,8 +6,8 @@ exports.default = void 0;
 var _seedsColor = require("@sproutsocial/seeds-color");
 
 var defaultLink = {
-  color: "cta.link",
-  hoverColor: _seedsColor.COLOR_BLUE_800,
+  color: "link",
+  hoverColor: "link.hover",
   activeColor: _seedsColor.COLOR_BLUE_900,
   fontWeight: "semibold"
 };

package/commonjs/Message/index.js

@@ -52,7 +52,7 @@ var avatarSizeMap = function avatarSizeMap(density) {
 var MessageContext = /*#__PURE__*/React.createContext({
   density: MESSAGE_DENSITIES.SMALL,
   borderColor: "container.border.base",
-  bg: "background.container",
+  bg: "container.background.base",
   indentContent: true
 });
 
@@ -63,7 +63,7 @@ var Message = function Message(_ref) {
       _ref$borderColor = _ref.borderColor,
       borderColor = _ref$borderColor === void 0 ? "container.border.base" : _ref$borderColor,
       _ref$bg = _ref.bg,
-      bg = _ref$bg === void 0 ? "background.container" : _ref$bg,
+      bg = _ref$bg === void 0 ? "container.background.base" : _ref$bg,
       _ref$indentContent = _ref.indentContent,
       indentContent = _ref$indentContent === void 0 ? true : _ref$indentContent,
       innerRef = _ref.innerRef,

package/commonjs/Modal/index.js

@@ -82,7 +82,7 @@ var ModalFooter = function ModalFooter(props) {
 };
 
 ModalFooter.defaultProps = {
-  bg: "background.container"
+  bg: "container.background.base"
 };
 
 // $FlowIssue - upgrade v0.112.0

package/lib/Link/constants.js

@@ -1,7 +1,7 @@
-import { COLOR_BLUE_800, COLOR_BLUE_900 } from "@sproutsocial/seeds-color";
+import { COLOR_BLUE_900 } from "@sproutsocial/seeds-color";
 var defaultLink = {
-  color: "cta.link",
-  hoverColor: COLOR_BLUE_800,
+  color: "link",
+  hoverColor: "link.hover",
   activeColor: COLOR_BLUE_900,
   fontWeight: "semibold"
 };

package/lib/Message/index.js

@@ -36,7 +36,7 @@ var avatarSizeMap = function avatarSizeMap(density) {
 var MessageContext = /*#__PURE__*/React.createContext({
   density: MESSAGE_DENSITIES.SMALL,
   borderColor: "container.border.base",
-  bg: "background.container",
+  bg: "container.background.base",
   indentContent: true
 });
 
@@ -47,7 +47,7 @@ var Message = function Message(_ref) {
       _ref$borderColor = _ref.borderColor,
       borderColor = _ref$borderColor === void 0 ? "container.border.base" : _ref$borderColor,
       _ref$bg = _ref.bg,
-      bg = _ref$bg === void 0 ? "background.container" : _ref$bg,
+      bg = _ref$bg === void 0 ? "container.background.base" : _ref$bg,
       _ref$indentContent = _ref.indentContent,
       indentContent = _ref$indentContent === void 0 ? true : _ref$indentContent,
       innerRef = _ref.innerRef,

package/lib/Modal/index.js

@@ -66,7 +66,7 @@ var ModalFooter = function ModalFooter(props) {
 };
 
 ModalFooter.defaultProps = {
-  bg: "background.container"
+  bg: "container.background.base"
 };
 
 // $FlowIssue - upgrade v0.112.0

package/lib/types/theme.flow.js

@@ -1,2 +1 @@
-import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows //space,
-, easing, duration } from "../themes/default/theme";
+import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/default/theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "8.0.0-beta-dark-mode.7",
+  "version": "8.0.0-beta-dark-mode.11",
   "license": "MIT",
   "files": [
     "__flow__",