@redsift/design-system 10.3.0-muiv5-alpha.2 → 10.3.0-muiv5-alpha.4

package/index.d.ts

@@ -110,6 +110,7 @@ declare const PrimaryButtonsColorPalette: {
 };
 type PrimaryButtonsColorPalette = ValueOf<typeof PrimaryButtonsColorPalette>;
 declare const ButtonsColorPalette: {
+    readonly white: "white";
     readonly black: "black";
     readonly info: "info";
     readonly primary: string;

package/index.js

@@ -209,6 +209,7 @@ const PrimaryButtonsColorPalette = {
   radar: 'radar'
 };
 const ButtonsColorPalette = _objectSpread2(_objectSpread2({}, PrimaryButtonsColorPalette), {}, {
+  white: 'white',
   black: 'black',
   info: 'info'
 });
@@ -4820,7 +4821,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
     $theme: theme,
     "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
     "aria-label": ariaLabel,
-    className: classNames(Icon.className, className),
+    className: classNames(Icon.className, className, color ? 'colored' : undefined),
     ref: ref
   }), /*#__PURE__*/React__default.cloneElement(typeof icon === 'string' || Array.isArray(icon) && icon.every(it => typeof it === 'string') ? /*#__PURE__*/React__default.createElement("svg", {
     viewBox: "0 0 24 24"
@@ -4914,7 +4915,7 @@ const StyledButton = styled.button`
             --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
           );
           &,
-          .redsift-icon {
+          .redsift-icon:not(.colored) {
             color: var(
               --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
             );
@@ -4926,7 +4927,7 @@ const StyledButton = styled.button`
 
           ${$variant === ButtonVariant.primary || $isDisabled ? css`
                 &,
-                .redsift-icon {
+                .redsift-icon:not(.colored) {
                   color: var(
                     --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
                   );
@@ -4977,7 +4978,7 @@ const StyledButton = styled.button`
               --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : 'hover'}
             );
             &,
-            .redsift-icon {
+            .redsift-icon:not(.colored) {
               color: var(
                 --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : 'hover'}
               );
@@ -5022,7 +5023,7 @@ const StyledButton = styled.button`
               --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
             );
             &,
-            .redsift-icon {
+            .redsift-icon:not(.colored) {
               color: var(
                 --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-${$isDisabled ? 'disabled' : $isHovered ? 'hover' : 'active'}
               );
@@ -5392,8 +5393,7 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
     size: "small",
     color: variant === IconButtonVariant.primary ? 'grey-l1' : 'grey-l2'
   }) : /*#__PURE__*/React__default.createElement(Icon, _extends$1({}, iconProps, {
-    icon: icon,
-    color: color
+    icon: icon
   }))));
 });
 IconButton.className = CLASSNAME$O;
@@ -11502,10 +11502,11 @@ const StyledPill = styled.div`
       cursor: pointer;
       padding: 5px;
       border: none;
+      text-transform: none;
 
       font-size: ${$size === PillSize.small ? css`14px` : css`15px`};
 
-      > .redsift-icon {
+      > .redsift-icon:not(.colored) {
         color: inherit;
       }
     }
@@ -11663,7 +11664,7 @@ const StyledPill = styled.div`
   let {
     $size
   } = _ref5;
-  return $size === PillSize.small ? css`var(--redsift-typography-pill-font-size)` : css`var(--redsift-typography-chip-font-size)`;
+  return $size === PillSize.xlarge ? '15px' : $size === PillSize.large ? '12px' : '10px';
 }};
     font-weight: var(--redsift-typography-pill-font-weight);
     line-height: ${_ref6 => {
@@ -11674,9 +11675,23 @@ const StyledPill = styled.div`
 }};
   }
 
+  .redsift-icon:not(.colored) {
+    color: inherit;
+  }
+
   .redsift-icon {
-    width: unset;
-    height: unset;
+    width: ${_ref7 => {
+  let {
+    $size
+  } = _ref7;
+  return $size === PillSize.xlarge ? '17px' : $size === PillSize.large ? '14px' : '12px';
+}};
+    height: ${_ref8 => {
+  let {
+    $size
+  } = _ref8;
+  return $size === PillSize.xlarge ? '17px' : $size === PillSize.large ? '14px' : '12px';
+}};
 
     > svg {
       width: 1em;
@@ -11723,6 +11738,7 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       }));
     } else if (isComponent('IconButton')(child) || isComponent('Button')(child) || isComponent('ButtonLink')(child)) {
       var _key;
+      console.log(child.props.color, pickTextColorBasedOnBgColorAdvanced(color, 'white', 'black'));
       childArray.push( /*#__PURE__*/React__default.cloneElement(child, {
         key: (_key = child.key) !== null && _key !== void 0 ? _key : index,
         className: currentClassName,
@@ -15647,20 +15663,23 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     getReferenceProps,
     refs,
     tooltipId,
-    triggerClassName
+    triggerClassName,
+    color
   } = useTooltipContext();
   const childrenRef = children.ref;
   const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
   if ( /*#__PURE__*/React__default.isValidElement(children)) {
     var _children$props$child;
-    return /*#__PURE__*/React__default.cloneElement(children, _objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
+    return /*#__PURE__*/React__default.cloneElement(children, _objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
       ref: triggerRef
     }, props), {}, {
       'aria-describedby': tooltipId
     }, children.props), {}, {
-      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : '',
-      className: classNames(children.props.className, triggerClassName)
-    }))));
+      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : ''
+    }))), {}, {
+      className: classNames(children.props.className, triggerClassName),
+      color: color !== null && color !== void 0 ? color : children.props.color
+    }));
   }
   return /*#__PURE__*/React__default.createElement("span", _extends$1({
     ref: triggerRef
@@ -15672,6 +15691,7 @@ TooltipTrigger.displayName = COMPONENT_NAME$h;
 
 function useTooltip(_ref) {
   let {
+    color,
     defaultOpen,
     delay,
     placement,
@@ -15724,13 +15744,14 @@ function useTooltip(_ref) {
   });
   const interactions = useInteractions([hover, focus, dismiss, role]);
   return React__default.useMemo(() => _objectSpread2(_objectSpread2(_objectSpread2({
+    color,
     isOpen,
     handleOpen
   }, interactions), data), {}, {
     arrowRef,
     tooltipId,
     triggerClassName
-  }), [isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]);
+  }), [color, isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]);
 }
 
 const COMPONENT_NAME$g = 'Tooltip';
@@ -15745,6 +15766,7 @@ const DEFAULT_PROPS$g = {
  */
 const BaseTooltip = props => {
   const {
+    color,
     children,
     defaultOpen,
     delay,
@@ -15757,6 +15779,7 @@ const BaseTooltip = props => {
   } = props;
   const theme = useTheme ? useTheme(propsTheme) : undefined;
   const tooltip = useTooltip({
+    color,
     defaultOpen,
     delay,
     placement,