@sproutsocial/racine 8.0.0-beta-dark-mode.9 → 8.1.0-avatar-update-beta.0

package/lib/Avatar/index.js

@@ -4,7 +4,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import * as React from "react";
 import { useState, useCallback, useMemo, memo } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import classnames from "classnames";
 import Box from "../Box";
 import Image from "../Image";
 import Text from "../Text";
@@ -16,8 +17,20 @@ var AvatarText = styled(function (_ref) {
 }).withConfig({
   displayName: "Avatar__AvatarText",
   componentId: "yx873f-0"
-})(["font-size:", "px;"], function (props) {
+})(["font-size:", "px;color:", "px;"], function (props) {
   return props.fontSize;
+}, function (props) {
+  return props.color;
+});
+var Container = styled(Box).withConfig({
+  displayName: "Avatar__Container",
+  componentId: "yx873f-1"
+})(["", ""], function (_ref2) {
+  var theme = _ref2.theme,
+      type = _ref2.type,
+      variant = _ref2.variant,
+      bg = _ref2.bg;
+  return css(["color:", ";background:", ";"], theme.colors[type][variant === "dark" ? "200" : "900"], bg ? bg : theme.colors[type][variant === "dark" ? "900" : "200"]);
 });
 
 var getInitials = function getInitials(name, fallback) {
@@ -33,14 +46,20 @@ var getInitials = function getInitials(name, fallback) {
   .join("");
 };
 
-export var Avatar = function Avatar(_ref2) {
-  var _ref2$appearance = _ref2.appearance,
-      appearance = _ref2$appearance === void 0 ? "circle" : _ref2$appearance,
-      name = _ref2.name,
-      src = _ref2.src,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? "40px" : _ref2$size,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["appearance", "name", "src", "size"]);
+export var Avatar = function Avatar(_ref3) {
+  var _ref3$appearance = _ref3.appearance,
+      appearance = _ref3$appearance === void 0 ? "circle" : _ref3$appearance,
+      name = _ref3.name,
+      src = _ref3.src,
+      _ref3$variant = _ref3.variant,
+      variant = _ref3$variant === void 0 ? "light" : _ref3$variant,
+      _ref3$type = _ref3.type,
+      type = _ref3$type === void 0 ? "neutral" : _ref3$type,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? "40px" : _ref3$size,
+      bg = _ref3.bg,
+      color = _ref3.color,
+      rest = _objectWithoutPropertiesLoose(_ref3, ["appearance", "name", "src", "variant", "type", "size", "bg", "color"]);
 
   var _useState = useState(false),
       imageFailedLoading = _useState[0],
@@ -54,7 +73,8 @@ export var Avatar = function Avatar(_ref2) {
   }, [setImageFailedLoading]); // Font size for initials is half the size of the avatar, rounded down.
 
   var fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    className: classnames(variant),
     size: size,
     overflow: "hidden",
     borderRadius: appearance === "leaf" ? "40% 0 40% 0" : "50%",
@@ -64,13 +84,16 @@ export var Avatar = function Avatar(_ref2) {
     justifyContent: "center",
     alignItems: "center",
     title: name,
-    bg: "neutral.200",
+    bg: bg,
+    variant: variant,
+    type: type,
     "data-qa-user-avatar": name // $FlowIssue - upgrade v0.112.0
 
   }, rest), !src || imageFailedLoading ? /*#__PURE__*/React.createElement(AvatarText, {
     lineHeight: size,
     fontWeight: "semibold",
-    fontSize: fontSize
+    fontSize: fontSize,
+    color: color
   }, initials) : /*#__PURE__*/React.createElement(Image, {
     alt: name,
     width: "auto",

package/lib/IconViewBoxes.js

@@ -3,6 +3,7 @@ module.exports = {
   "add-item": "0 0 16 16",
   "add-keyword": "0 0 16 16",
   "add-team-member": "0 0 18 13",
+  "add-variable": "0 0 18 14",
   "address-card-solid": "0 0 18 16",
   "adobe-experience-manager": "0 0 16 18",
   "ads": "0 0 9 16",
@@ -275,6 +276,7 @@ module.exports = {
   "sent-message": "0 0 16 14",
   "share": "0 0 16 14",
   "shopify": "0 0 16 18",
+  "show-navigation": "0 0 18 14",
   "slack": "0 0 16 16",
   "small-density": "0 0 16 16",
   "smiley": "0 0 16 16",

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,11 +66,10 @@ var ModalFooter = function ModalFooter(props) {
 };
 
 ModalFooter.defaultProps = {
-  bg: "background.container"
+  bg: "container.background.base"
 };
-
-// $FlowIssue - upgrade v0.112.0
-var ModalContent = function ModalContent(_ref) {
+var ModalContent = /*#__PURE__*/React.forwardRef( // $FlowIssue - upgrade v0.112.0
+function (_ref, ref) {
   var children = _ref.children,
       rest = _objectWithoutPropertiesLoose(_ref, ["children"]);
 
@@ -79,9 +78,10 @@ var ModalContent = function ModalContent(_ref) {
 
   return /*#__PURE__*/React.createElement(Content, _extends({
     "data-qa-modal": true,
-    "data-qa-label": label
+    "data-qa-label": label,
+    ref: ref
   }, rest), children);
-};
+});
 
 /**
  * The modal you want