baseui 10.11.1 → 11.0.0

package/es/modal/styled-components.js

@@ -43,67 +43,31 @@ export const Root = styled('div', props => {
   };
 });
 Root.displayName = "Root";
-export const Backdrop = styled('div', props => {
-  const {
-    $animate,
-    $isOpen,
-    $isVisible,
-    $theme,
-    $unstable_ModalBackdropScroll
-  } = props;
-
-  if ($unstable_ModalBackdropScroll) {
-    return {};
-  }
-
-  return {
-    position: 'fixed',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    left: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    // Remove grey highlight
-    WebkitTapHighlightColor: 'transparent',
-    // Disable scroll capabilities.
-    touchAction: 'none',
-    opacity: $isVisible && $isOpen ? 1 : 0,
-    ...($animate ? {
-      transitionProperty: 'opacity',
-      transitionDuration: $theme.animation.timing400,
-      transitionTimingFunction: $theme.animation.easeOutCurve
-    } : null)
-  };
-});
-Backdrop.displayName = "Backdrop";
 export const DialogContainer = styled('div', props => {
   const {
     $animate,
     $isOpen,
     $isVisible,
-    $theme,
-    $unstable_ModalBackdropScroll
+    $theme
   } = props;
+  const animationRules = {
+    transitionProperty: 'opacity',
+    transitionDuration: $theme.animation.timing400,
+    transitionTimingFunction: $theme.animation.easeOutCurve
+  };
   return {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
     minHeight: '100%',
-    pointerEvents: 'none',
     userSelect: 'none',
-    ...($unstable_ModalBackdropScroll ? {
-      pointerEvents: 'auto',
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      // Remove grey highlight
-      WebkitTapHighlightColor: 'transparent',
-      opacity: $isVisible && $isOpen ? 1 : 0,
-      ...($animate ? {
-        transitionProperty: 'opacity',
-        transitionDuration: $theme.animation.timing400,
-        transitionTimingFunction: $theme.animation.easeOutCurve
-      } : null)
-    } : {})
+    pointerEvents: 'auto',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    // Remove grey highlight
+    WebkitTapHighlightColor: 'transparent',
+    opacity: $isVisible && $isOpen ? 1 : 0,
+    ...($animate ? animationRules : null)
   };
 });
 DialogContainer.displayName = "DialogContainer";

package/es/phone-input/default-props.js

@@ -9,7 +9,7 @@ const defaultProps = {
   'aria-label': 'Please enter a phone number without the country dial code.',
   'aria-describedby': null,
   'aria-labelledby': null,
-  clearable: false,
+  clearable: true,
   focusLock: false,
   country: {
     label: 'United States',

package/es/phone-input/index.js

@@ -6,13 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as PhoneInput } from './phone-input.js';
 export { default as PhoneInputLite } from './phone-input-lite.js';
-export { default as PhoneInputNext } from './phone-input-next.js';
 export { default as StatefulPhoneInput } from './stateful-phone-input.js';
-export { default as StatefulPhoneInputNext } from './stateful-phone-input-next.js';
 export { default as StatefulPhoneInputContainer } from './stateful-phone-input-container.js';
 export { default as CountryPicker } from './country-picker.js';
-export { default as CountrySelect } from './country-select.js';
-export { default as CountrySelectDropdown } from './country-select-dropdown.js';
 export { default as Flag, StyledFlag } from './flag.js';
 export * from './constants.js';
 export * from './styled-components.js';

package/es/phone-input/phone-input-lite.js

@@ -7,20 +7,18 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import React, { useRef } from 'react';
+import CountryPicker from './country-picker.js';
+import defaultProps from './default-props.js';
+import { StyledPhoneInputRoot, StyledDialCode } from './styled-components.js';
 import { Input as DefaultInput } from '../input/index.js';
-import CountrySelect from './country-select.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
-import defaultProps from './default-props.js';
-const {
-  country,
-  ...lightDefaultProps
-} = defaultProps;
-PhoneInputLite.defaultProps = lightDefaultProps;
+PhoneInputLite.defaultProps = defaultProps;
 export default function PhoneInputLite(props) {
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     'aria-describedby': ariaDescribedBy,
+    clearable,
     countries,
     country,
     disabled,
@@ -41,38 +39,63 @@ export default function PhoneInputLite(props) {
     ...restProps
   } = props;
   const inputRef = useRef(null);
+  const baseDialCodeOverride = {
+    component: StyledDialCode,
+    style: ({
+      $theme: {
+        direction,
+        sizing
+      }
+    }) => {
+      const marginDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
+      return {
+        [marginDir]: sizing.scale600
+      };
+    },
+    props: {
+      children: country.dialCode
+    }
+  };
+  const mergedDialCodeOverride = mergeOverrides({
+    DialCode: baseDialCodeOverride
+  }, {
+    DialCode: overrides.DialCode || {}
+  });
   const baseOverrides = {
     Input: {
       style: ({
         $theme: {
+          direction,
           sizing
         }
-      }) => ({
-        paddingLeft: sizing.scale100
-      })
-    },
-    Before: {
-      component: CountrySelect,
-      props: {
-        countries,
-        country,
-        disabled,
-        error,
-        inputRef,
-        mapIsoToLabel,
-        maxDropdownHeight,
-        maxDropdownWidth,
-        onCountryChange,
-        overrides,
-        positive,
-        required,
-        size
+      }) => {
+        const paddingDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+        return {
+          [paddingDir]: sizing.scale100
+        };
       }
-    }
+    },
+    Before: mergedDialCodeOverride.DialCode
   };
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledPhoneInputRoot);
   const [Input, inputProps] = getOverrides(overrides.Input, DefaultInput);
   inputProps.overrides = mergeOverrides(baseOverrides, inputProps.overrides);
-  return /*#__PURE__*/React.createElement(Input, _extends({
+  return /*#__PURE__*/React.createElement(Root, _extends({}, rootProps, {
+    "data-baseweb": "phone-input"
+  }), /*#__PURE__*/React.createElement(CountryPicker, {
+    country: country,
+    countries: countries,
+    disabled: disabled,
+    error: error,
+    mapIsoToLabel: mapIsoToLabel,
+    maxDropdownHeight: maxDropdownHeight,
+    maxDropdownWidth: maxDropdownWidth,
+    onCountryChange: onCountryChange,
+    overrides: overrides,
+    positive: positive,
+    required: required,
+    size: size
+  }), /*#__PURE__*/React.createElement(Input, _extends({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
@@ -89,6 +112,7 @@ export default function PhoneInputLite(props) {
     placeholder: placeholder,
     size: size,
     type: "text",
-    value: text
-  }, restProps, inputProps));
+    value: text,
+    clearable: clearable
+  }, restProps, inputProps)));
 }

package/es/radio/radio.js

@@ -64,10 +64,6 @@ class Radio extends React.Component {
     if (this.props.autoFocus && this.props.inputRef?.current) {
       this.props.inputRef.current.focus();
     }
-
-    if (process.env.NODE_ENV !== "production" && this.props.isError) {
-      console.warn('baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.');
-    }
   }
 
   render() {
@@ -86,7 +82,6 @@ class Radio extends React.Component {
       $disabled: this.props.disabled,
       $hasDescription: !!this.props.description,
       $isActive: this.state.isActive,
-      $isError: this.props.isError,
       $error: this.props.error,
       $isFocused: this.props.isFocused,
       $isFocusVisible: this.props.isFocused && this.props.isFocusVisible,
@@ -109,7 +104,7 @@ class Radio extends React.Component {
       onMouseDown: this.onMouseDown,
       onMouseUp: this.onMouseUp
     }, sharedProps, rootProps), isLabelTopLeft(this.props.labelPlacement) && label, /*#__PURE__*/React.createElement(RadioMarkOuter, _extends({}, sharedProps, radioMarkOuterProps), /*#__PURE__*/React.createElement(RadioMarkInner, _extends({}, sharedProps, radioMarkInnerProps))), /*#__PURE__*/React.createElement(Input, _extends({
-      "aria-invalid": this.props.error || this.props.isError || null,
+      "aria-invalid": this.props.error || null,
       checked: this.props.checked,
       disabled: this.props.disabled,
       name: this.props.name,
@@ -137,7 +132,6 @@ _defineProperty(Radio, "defaultProps", {
   autoFocus: false,
   inputRef: /*#__PURE__*/React.createRef(),
   align: 'vertical',
-  isError: false,
   error: false,
   onChange: () => {},
   onMouseEnter: () => {},

package/es/radio/radiogroup.js

@@ -49,41 +49,22 @@ class StatelessRadioGroup extends React.Component {
     });
   }
 
-  componentDidMount() {
-    if (process.env.NODE_ENV !== "production" && this.props.isError) {
-      console.warn('baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.');
-    }
-  }
-
   render() {
     const {
       overrides = {}
     } = this.props;
     const [RadioGroupRoot, radioGroupRootProps] = getOverrides(overrides.RadioGroupRoot, StyledRadioGroupRoot);
-
-    if (process.env.NODE_ENV !== "production") {
-      const overrideKeys = Object.keys(overrides); // TODO(v11)
-
-      if (Boolean(overrideKeys.length) && !overrideKeys.includes('RadioGroupRoot')) {
-        // eslint-disable-next-line no-console
-        console.warn(`All overrides beside 'RadioGroupRoot' will be deprecated in the next major version update.
-          Pass other overrides to the 'Radio' children instead.
-        `);
-      }
-    }
-
     return /*#__PURE__*/React.createElement(RadioGroupRoot, _extends({
       id: this.props.id,
       role: "radiogroup",
       "aria-describedby": this.props['aria-describedby'],
       "aria-errormessage": this.props['aria-errormessage'],
-      "aria-invalid": this.props.error || this.props.isError || null,
+      "aria-invalid": this.props.error || null,
       "aria-label": this.props['aria-label'],
       "aria-labelledby": this.props['aria-labelledby'],
       $align: this.props.align,
       $disabled: this.props.disabled,
-      $isError: this.props.error || this.props.isError,
-      $error: this.props.error || this.props.isError,
+      $error: this.props.error,
       $required: this.props.required
     }, radioGroupRootProps), React.Children.map(this.props.children, (child, index) => {
       if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -96,7 +77,6 @@ class StatelessRadioGroup extends React.Component {
         autoFocus: this.props.autoFocus,
         checked,
         disabled: this.props.disabled || child.props.disabled,
-        isError: this.props.isError,
         error: this.props.error,
         isFocused: this.state.focusedRadioIndex === index,
         isFocusVisible: this.state.isFocusVisible,
@@ -107,11 +87,7 @@ class StatelessRadioGroup extends React.Component {
         onFocus: e => this.handleFocus(e, index),
         onChange: this.props.onChange,
         onMouseEnter: this.props.onMouseEnter,
-        onMouseLeave: this.props.onMouseLeave,
-        // will need to remove overrides pass-through on next major version
-        overrides: { ...this.props.overrides,
-          ...child.props.overrides
-        }
+        onMouseLeave: this.props.onMouseLeave
       });
     }));
   }
@@ -125,7 +101,6 @@ _defineProperty(StatelessRadioGroup, "defaultProps", {
   autoFocus: false,
   labelPlacement: 'right',
   align: 'vertical',
-  isError: false,
   error: false,
   required: false,
   onChange: () => {},

package/es/radio/styled-components.js

@@ -23,17 +23,16 @@ function getOuterColor(props) {
     $disabled,
     $checked,
     $isFocusVisible,
-    $error,
-    $isError
+    $error
   } = props;
   if ($disabled) return colors.tickFillDisabled;
 
   if (!$checked) {
     if ($isFocusVisible) return colors.borderSelected;
-    if ($error || $isError) return colors.tickBorderError;
+    if ($error) return colors.tickBorderError;
     return colors.tickBorder;
   } else {
-    if ($error || $isError) {
+    if ($error) {
       switch (getState(props)) {
         case DEFAULT:
           return colors.tickFillErrorSelected;
@@ -71,7 +70,7 @@ function getInnerColor(props) {
   }
 
   if (!props.$checked) {
-    if (props.$error || props.$isError) {
+    if (props.$error) {
       switch (getState(props)) {
         case DEFAULT:
           return colors.tickFillError;

package/es/rating/styled-components.js

@@ -40,11 +40,11 @@ export const StyledStar = styled('li', ({
   let prePartialStarFill;
 
   if ($isActive) {
-    starStroke = starFill = $theme.colors.rating400;
+    starStroke = starFill = $theme.colors.warning400;
   }
 
   if ($isPartialActive && !$isActive) {
-    prePartialStarStroke = prePartialStarFill = $theme.colors.rating400;
+    prePartialStarStroke = prePartialStarFill = $theme.colors.warning400;
   }
 
   const styles = {
@@ -101,7 +101,7 @@ export const StyledEmoticon = styled('li', ({
   let emoticonFill = $theme.colors.ratingInactiveFill;
 
   if ($isActive) {
-    emoticonFill = $theme.colors.rating400;
+    emoticonFill = $theme.colors.warning400;
   }
 
   const ratingIcons = [angryRatingSVG(emoticonFill, $size), sadRatingSVG(emoticonFill, $size), neutralRatingSVG(emoticonFill, $size), happyRatingSVG(emoticonFill, $size), veryHappyRatingSVG(emoticonFill, $size)];

package/es/select/index.js

@@ -14,7 +14,6 @@ export { default as SelectDropdown } from './dropdown.js';
 export { default as StatefulSelect } from './stateful-select.js';
 export { default as StatefulSelectContainer } from './stateful-select-container.js'; // Styled elements
 
-export { StyledRoot, StyledControlContainer, StyledValueContainer, StyledPlaceholder, StyledSingleValue, StyledInputContainer, StyledInput, StyledInputSizer, StyledIconsContainer, StyledSelectArrow, StyledClearIcon // TODO(v11): remove StyledSearchIconContainer as StyledSearchIcon
-, StyledSearchIconContainer as StyledSearchIcon, StyledSearchIconContainer, StyledDropdownContainer, StyledDropdown, StyledDropdownListItem, StyledOptionContent } from './styled-components.js';
+export { StyledRoot, StyledControlContainer, StyledValueContainer, StyledPlaceholder, StyledSingleValue, StyledInputContainer, StyledInput, StyledInputSizer, StyledIconsContainer, StyledSelectArrow, StyledClearIcon, StyledSearchIconContainer, StyledDropdownContainer, StyledDropdown, StyledDropdownListItem, StyledOptionContent } from './styled-components.js';
 export { default as filterOptions } from './utils/default-filter-options.js';
 export { SIZE, TYPE, STATE_CHANGE_TYPE } from './constants.js';

package/es/select/select-component.js

@@ -437,12 +437,8 @@ class Select extends React.Component {
     _defineProperty(this, "handleInputRef", input => {
       this.input = input;
 
-      if (this.props.controlRef) {
-        if (typeof this.props.controlRef === 'function') {
-          this.props.controlRef(input);
-        } else {
-          this.props.controlRef.current = input;
-        }
+      if (this.props.controlRef && typeof this.props.controlRef === 'function') {
+        this.props.controlRef(input);
       }
     });
 
@@ -561,13 +557,19 @@ class Select extends React.Component {
     }
 
     this.isItMounted = true;
+    const {
+      controlRef
+    } = this.props;
 
-    if (this.props.methodsRef) {
-      const {
-        methodsRef
-      } = this.props;
-      methodsRef.current = {
-        setDropdownOpen: this.handleDropdownOpen.bind(this)
+    if (controlRef && typeof controlRef !== 'function') {
+      controlRef.current = {
+        setDropdownOpen: this.handleDropdownOpen.bind(this),
+        setInputValue: this.handleSetInputValue.bind(this),
+        setInputFocus: this.handleSetInputFocus.bind(this),
+        setInputBlur: this.handleSetInputBlur.bind(this),
+        // `focus` & `blur` below are for backwards compatibility and may be removed. Use setInputFocus and setInputBlur instead.
+        focus: this.handleSetInputFocus.bind(this),
+        blur: this.handleSetInputBlur.bind(this)
       };
     }
   }
@@ -608,6 +610,20 @@ class Select extends React.Component {
     this.setState({
       isOpen: nextOpenState
     });
+  }
+
+  handleSetInputValue(newInputValue) {
+    this.setState({
+      inputValue: newInputValue
+    });
+  }
+
+  handleSetInputFocus() {
+    this.input.focus();
+  }
+
+  handleSetInputBlur() {
+    this.input.blur();
   } // Handle touch outside on mobile to dismiss menu, ensures that the
   // touch target is not within the anchor DOM node.
 
@@ -841,14 +857,10 @@ class Select extends React.Component {
     const [SearchIconContainer, searchIconContainerProps] = getOverrides(overrides.SearchIconContainer, StyledSearchIconContainer);
     const [SearchIcon, searchIconProps] = getOverrides(overrides.SearchIcon, SearchIconComponent);
     const sharedProps = this.getSharedProps();
-    return (
-      /*#__PURE__*/
-      // TODO(v11): remove searchIconProps from SearchIconContainer
-      React.createElement(SearchIconContainer, _extends({}, sharedProps, searchIconProps, searchIconContainerProps), /*#__PURE__*/React.createElement(SearchIcon, _extends({
-        size: 16,
-        title: 'search'
-      }, searchIconProps)))
-    );
+    return /*#__PURE__*/React.createElement(SearchIconContainer, _extends({}, sharedProps, searchIconContainerProps), /*#__PURE__*/React.createElement(SearchIcon, _extends({
+      size: 16,
+      title: 'search'
+    }, sharedProps, searchIconProps)));
   }
 
   filterOptions(excludeOptions) {

package/es/select/styled-components.js

@@ -117,10 +117,10 @@ function getControlContainerColors($disabled, $isFocused, $isPseudoFocused, $pos
   if ($isFocused || $isPseudoFocused) {
     return {
       color: colors.contentPrimary,
-      borderLeftColor: colors.borderFocus,
-      borderRightColor: colors.borderFocus,
-      borderTopColor: colors.borderFocus,
-      borderBottomColor: colors.borderFocus,
+      borderLeftColor: colors.borderSelected,
+      borderRightColor: colors.borderSelected,
+      borderTopColor: colors.borderSelected,
+      borderBottomColor: colors.borderSelected,
       backgroundColor: colors.inputFillActive
     };
   }

package/es/snackbar/styled-components.js

@@ -4,7 +4,7 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import { StyledSpinnerNext } from '../spinner/index.js';
+import { Spinner } from '../spinner/index.js';
 import { styled, withStyle } from '../styles/index.js';
 import { PLACEMENT } from './constants.js';
 export const StyledRoot = styled('div', ({
@@ -41,7 +41,7 @@ export const StyledStartEnhancerContainer = styled('span', ({
   };
 });
 StyledStartEnhancerContainer.displayName = "StyledStartEnhancerContainer";
-export const StyledSpinner = withStyle(StyledSpinnerNext, ({
+export const StyledSpinner = withStyle(Spinner, ({
   $height,
   $width
 }) => {

package/es/spinner/index.js

@@ -4,12 +4,6 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import { ProgressBarRounded, StyledProgressBarRoundedRoot, StyledProgressBarRoundedSvg, StyledProgressBarRoundedText, StyledProgressBarRoundedTrackBackground, StyledProgressBarRoundedTrackForeground } from '../progress-bar/index.js';
-export { default as Spinner } from './spinner.js'; // Styled elements
-
-export { Svg as StyledSvg, StyledTrackPath, StyledActivePath, StyledSpinnerNext } from './styled-components.js';
-export { SIZE } from './constants.js'; // Flow
-
-// Backward compatibility with SpinnerDeterminate
-// Deprecated
-export { ProgressBarRounded as SpinnerDeterminate, StyledProgressBarRoundedRoot as StyledSpinnerDeterminateRoot, StyledProgressBarRoundedSvg as StyledSpinnerDeterminateSvg, StyledProgressBarRoundedTrackBackground as StyledSpinnerDeterminateTrackBackground, StyledProgressBarRoundedTrackForeground as StyledSpinnerDeterminateTrackForeground, StyledProgressBarRoundedText as StyledSpinnerDeterminateText };
+import { StyledSpinner } from './styled-components.js';
+export { StyledSpinner as Spinner };
+export { SIZE } from './constants.js'; // Flow

package/es/spinner/styled-components.js

@@ -5,7 +5,6 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles/index.js';
-import { getSvgStyles } from '../icon/styled-components.js';
 import { SIZE } from './constants.js';
 const spin = {
   from: {
@@ -15,36 +14,7 @@ const spin = {
     transform: 'rotate(360deg)'
   }
 };
-/**
- * Spinner icon overrides
- */
-
-export const Svg = styled('svg', props => {
-  const {
-    $theme,
-    $color
-  } = props;
-  return { ...getSvgStyles(props),
-    fill: $color || $theme.colors.accent,
-    cursor: 'wait',
-    animationName: spin,
-    animationDuration: $theme.animation.timing1000,
-    animationIterationCount: 'infinite',
-    animationTimingFunction: 'linear'
-  };
-});
-Svg.displayName = "Svg";
-export const StyledTrackPath = styled('path', props => ({
-  fill: props.$theme.colors.spinnerTrackFill,
-  opacity: 0.16
-}));
-StyledTrackPath.displayName = "StyledTrackPath";
-export const StyledActivePath = styled('path', props => ({
-  fill: props.$color || props.$theme.colors.accent
-})); // TODO(v11): Replace Spinner with SpinnerNext
-
-StyledActivePath.displayName = "StyledActivePath";
-export const StyledSpinnerNext = styled('i', ({
+export const StyledSpinner = styled('i', ({
   //$FlowFixMe
   $theme,
   $color = $theme.colors.contentAccent,
@@ -104,4 +74,4 @@ export const StyledSpinnerNext = styled('i', ({
     cursor: 'wait'
   };
 });
-StyledSpinnerNext.displayName = "StyledSpinnerNext";
+StyledSpinner.displayName = "StyledSpinner";

package/es/table/filter.js

@@ -43,19 +43,19 @@ export default function Filter(props) {
       ,
       crossFrame: false
     }, /*#__PURE__*/React.createElement(Heading, headingProps, "Filter Column"), /*#__PURE__*/React.createElement(Content, contentProps, props.children), /*#__PURE__*/React.createElement(Footer, footerProps, /*#__PURE__*/React.createElement(Button, {
-      kind: KIND.minimal,
+      kind: KIND.tertiary,
       size: SIZE.compact,
       onClick: () => {
         onSelectAll();
       }
     }, "Select All"), /*#__PURE__*/React.createElement(Button, {
-      kind: KIND.minimal,
+      kind: KIND.tertiary,
       size: SIZE.compact,
       onClick: () => {
         onReset();
       }
     }, "Reset"), props.hasCloseButton && /*#__PURE__*/React.createElement(Button, {
-      kind: KIND.minimal,
+      kind: KIND.tertiary,
       size: SIZE.compact,
       onClick: close
     }, "Close"))),

package/es/tag/styled-components.js

@@ -213,7 +213,7 @@ const customColorStates = {
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagFontDisabledRampUnit),
     backgroundColor: null,
-    borderColor: customOnRamp(color, theme.colors.tagOutlinedDisabledRampUnit)
+    borderColor: customOnRamp(color, theme.colors.tagSolidDisabledRampUnit)
   }),
   [COLOR_STATE.solid]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagSolidFontRampUnit),