baseui 10.2.1 → 10.6.0

package/select/styled-components.js.flow

@@ -425,22 +425,50 @@ function getSvgStyles({$theme}) {
 }
 
 export const StyledSelectArrow = styled<SharedStylePropsArgT>('svg', props => {
-  const {$theme, $disabled} = props;
+  const {$theme, $disabled, $size} = props;
   const {colors} = $theme;
+
+  const sizes = {
+    [SIZE.mini]: 16,
+    [SIZE.compact]: 16,
+    [SIZE.default]: 20,
+    [SIZE.large]: 24,
+  };
+  let size = sizes[SIZE.default];
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return {
     ...getSvgStyles({$theme}),
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
     cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: `${size}px`,
+    width: `${size}px`,
   };
 });
 
 export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', props => {
-  const {$theme} = props;
+  const {$theme, $size} = props;
   const {colors} = $theme;
+
+  const sizes = {
+    [SIZE.mini]: 15,
+    [SIZE.compact]: 15,
+    [SIZE.default]: 18,
+    [SIZE.large]: 22,
+  };
+  let size = sizes[SIZE.default];
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return {
     ...getSvgStyles({$theme}),
     color: colors.contentPrimary,
     cursor: 'pointer',
+    height: `${size}px`,
+    width: `${size}px`,
   };
 });
 

package/select/types.js.flow

@@ -72,6 +72,13 @@ export type OverridesDropdownT = {
   StatefulMenu?: OverrideT,
 };
 
+type ImperativeFnsT = {|
+  setDropdownOpen: boolean => mixed,
+|};
+export type MethodsRefT = {
+  current: ImperativeFnsT | null,
+};
+
 export type PropsT = {
   'aria-label': ?string,
   'aria-describedby': ?string,
@@ -134,6 +141,8 @@ export type PropsT = {
   maxDropdownHeight: string,
   /** Defines if multiple options can be selected. */
   multi: boolean,
+  /** Handle for accessing internal methods. */
+  methodsRef?: MethodsRefT,
   /** Message to be displayed if no options is found for a search query. */
   noResultsMsg?: React.Node,
   onBlur: (e: Event) => mixed,

package/snackbar/snackbar-context.js

@@ -81,6 +81,14 @@ function useSnackbar() {
   };
 }
 
+function usePrevious(value) {
+  var ref = React.useRef();
+  React.useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 function SnackbarProvider(_ref) {
   var children = _ref.children,
       _ref$overrides = _ref.overrides,
@@ -115,10 +123,6 @@ function SnackbarProvider(_ref) {
   function enqueue(elementProps) {
     var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDuration;
     setSnackbars(function (prev) {
-      if (prev.length === 0) {
-        enter(duration);
-      }
-
       return [].concat(_toConsumableArray(prev), [{
         elementProps: elementProps,
         duration: duration
@@ -126,6 +130,13 @@ function SnackbarProvider(_ref) {
     });
   }
 
+  var prevSnackbars = usePrevious(snackbars) || [];
+  React.useEffect(function () {
+    if (prevSnackbars.length === 0 && snackbars.length >= 1) {
+      enter(snackbars[0].duration);
+    }
+  }, [snackbars, prevSnackbars]);
+
   function dequeue() {
     setContainerHeight(0);
     setSnackbars(function (prev) {

package/snackbar/snackbar-context.js.flow

@@ -43,6 +43,14 @@ export function useSnackbar() {
   return {enqueue: context.enqueue, dequeue: context.dequeue};
 }
 
+function usePrevious(value) {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 export default function SnackbarProvider({
   children,
   overrides = {},
@@ -61,13 +69,17 @@ export default function SnackbarProvider({
 
   function enqueue(elementProps, duration = defaultDuration) {
     setSnackbars(prev => {
-      if (prev.length === 0) {
-        enter(duration);
-      }
       return [...prev, {elementProps, duration}];
     });
   }
 
+  const prevSnackbars = usePrevious(snackbars) || [];
+  React.useEffect(() => {
+    if (prevSnackbars.length === 0 && snackbars.length >= 1) {
+      enter(snackbars[0].duration);
+    }
+  }, [snackbars, prevSnackbars]);
+
   function dequeue() {
     setContainerHeight(0);
 

package/spinner/styled-components.js

@@ -59,7 +59,7 @@ var StyledActivePath = (0, _index.styled)('path', function (props) {
 
 exports.StyledActivePath = StyledActivePath;
 StyledActivePath.displayName = "StyledActivePath";
-var StyledSpinnerNext = (0, _index.styled)('div', function (_ref) {
+var StyledSpinnerNext = (0, _index.styled)('i', function (_ref) {
   var $theme = _ref.$theme,
       _ref$$size = _ref.$size,
       $size = _ref$$size === void 0 ? _constants.SIZE.medium : _ref$$size;

package/spinner/styled-components.js.flow

@@ -51,7 +51,7 @@ export const StyledActivePath = styled<StylePropsT>('path', props => ({
 
 // TODO(v11): Replace Spinner with SpinnerNext
 export const StyledSpinnerNext = styled<{$size?: SizeT}>(
-  'div',
+  'i',
   ({$theme, $size = SIZE.medium}) => {
     const borderWidth = {
       large: $theme.sizing.scale300,

package/table-semantic/index.d.ts

@@ -57,6 +57,7 @@ export interface TableBuilderProps<RowT> {
   isLoading?: boolean;
   loadingMessage?: React.ReactNode | (() => React.ReactNode);
   emptyMessage?: React.ReactNode | (() => React.ReactNode);
+  size?: SIZE[keyof SIZE];
 }
 export class TableBuilder<RowT> extends React.Component<
   TableBuilderProps<RowT>

package/table-semantic/styled-components.js

@@ -81,7 +81,8 @@ var StyledTableHeadCell = (0, _index.styled)('th', function (_ref5) {
 
   var $theme = _ref5.$theme,
       $size = _ref5.$size,
-      $divider = _ref5.$divider;
+      $divider = _ref5.$divider,
+      $isNumeric = _ref5.$isNumeric;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === _constants.DIVIDER.grid || $divider === _constants.DIVIDER.vertical;
   var padding = sizeToCellPadding($theme, $size);
@@ -94,7 +95,7 @@ var StyledTableHeadCell = (0, _index.styled)('th', function (_ref5) {
     paddingLeft: padding,
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
-    textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
+    textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
     verticalAlign: 'top',
     whiteSpace: 'nowrap',
     zIndex: 1
@@ -182,14 +183,15 @@ var StyledTableBodyCell = (0, _index.styled)('td', function (_ref12) {
       $size = _ref12.$size,
       $divider = _ref12.$divider,
       $isNumeric = _ref12.$isNumeric,
-      $isLastRow = _ref12.$isLastRow;
+      $isLastRow = _ref12.$isLastRow,
+      $isSortable = _ref12.$isSortable;
   var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   var borderVertical = $divider === _constants.DIVIDER.vertical || $divider === _constants.DIVIDER.grid;
   var borderHorizontal = $divider === undefined || $divider === _constants.DIVIDER.horizontal || $divider === _constants.DIVIDER.grid;
   var padding = sizeToCellPadding($theme, $size);
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
     paddingTop: padding,
-    paddingRight: padding,
+    paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
     paddingBottom: padding,
     paddingLeft: padding,
     color: $theme.colors.contentPrimary,

package/table-semantic/styled-components.js.flow

@@ -78,12 +78,13 @@ type StyledTableHeadCellPropsT = {
   $col?: {},
   $colIndex?: ?number,
   $divider?: DividerT,
+  $isNumeric?: ?boolean,
   $size?: SizeT,
 };
 
 export const StyledTableHeadCell = styled<StyledTableHeadCellPropsT>(
   'th',
-  ({$theme, $size, $divider}) => {
+  ({$theme, $size, $divider, $isNumeric}) => {
     const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
     const borderVertical =
       $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
@@ -99,7 +100,7 @@ export const StyledTableHeadCell = styled<StyledTableHeadCellPropsT>(
       paddingLeft: padding,
       backgroundColor: $theme.colors.tableHeadBackgroundColor,
       color: $theme.colors.contentPrimary,
-      textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
+      textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
       verticalAlign: 'top',
       whiteSpace: 'nowrap',
       zIndex: 1,
@@ -215,11 +216,12 @@ type StyledTableBodyCellPropsT = {
   $size?: SizeT,
   $isNumeric?: ?boolean,
   $isLastRow?: ?boolean,
+  $isSortable?: ?boolean,
 };
 
 export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
   'td',
-  ({$theme, $size, $divider, $isNumeric, $isLastRow}) => {
+  ({$theme, $size, $divider, $isNumeric, $isLastRow, $isSortable}) => {
     const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
     const borderVertical =
       $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
@@ -232,7 +234,7 @@ export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
     return {
       ...$theme.typography.font200,
       paddingTop: padding,
-      paddingRight: padding,
+      paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
       paddingBottom: padding,
       paddingLeft: padding,
       color: $theme.colors.contentPrimary,

package/table-semantic/table-builder.js

@@ -208,6 +208,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
             $col: col,
             $colIndex: colIndex,
             $divider: divider,
+            $isNumeric: col.numeric,
             $size: size
           }, tableHeadCellProps, colTableHeadCellProps), col.header);
         }
@@ -250,6 +251,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $col: col,
           $colIndex: colIndex,
           $divider: divider,
+          $isNumeric: col.numeric,
           role: "button",
           tabIndex: "0",
           "aria-label": "".concat(col.tableHeadAriaLabel || col.header, ", ").concat(sortLabel),
@@ -283,6 +285,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $rowIndex: rowIndex,
           $isNumeric: col.numeric,
           $isLastRow: rowIndex === lastRowindex,
+          $isSortable: col.sortable,
           $size: size
         }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
       }

package/table-semantic/table-builder.js.flow

@@ -153,6 +153,7 @@ export default class TableBuilder<T> extends React.Component<
             $col={col}
             $colIndex={colIndex}
             $divider={divider}
+            $isNumeric={col.numeric}
             $size={size}
             {...tableHeadCellProps}
             {...colTableHeadCellProps}
@@ -211,6 +212,7 @@ export default class TableBuilder<T> extends React.Component<
           $col={col}
           $colIndex={colIndex}
           $divider={divider}
+          $isNumeric={col.numeric}
           role="button"
           tabIndex="0"
           aria-label={`${col.tableHeadAriaLabel || col.header}, ${sortLabel}`}
@@ -249,6 +251,7 @@ export default class TableBuilder<T> extends React.Component<
           $rowIndex={rowIndex}
           $isNumeric={col.numeric}
           $isLastRow={rowIndex === lastRowindex}
+          $isSortable={col.sortable}
           $size={size}
           {...tableBodyCellProps}
           {...colTableBodyCellProps}

package/theme.ts

@@ -195,6 +195,7 @@ export interface Colors {
   rewardsTier2: string;
   rewardsTier3: string;
   rewardsTier4: string;
+  membership: string;
 
   /* ---- End of Semantic Colors ---- */
 
@@ -284,6 +285,7 @@ export interface Colors {
   calendarDayForegroundPseudoSelected: string;
   calendarDayBackgroundPseudoSelectedHighlighted: string;
   calendarDayForegroundPseudoSelectedHighlighted: string;
+  calendarDayBackgroundSelected: string;
   calendarDayForegroundSelected: string;
   calendarDayBackgroundSelectedHighlighted: string;
   calendarDayForegroundSelectedHighlighted: string;

package/themes/dark-theme/color-component-tokens.js

@@ -103,7 +103,7 @@ var _default = function _default() {
     linkActive: themePrimitives.primary300,
     // List
     listHeaderFill: themePrimitives.mono600,
-    listBodyFill: themePrimitives.mono700,
+    listBodyFill: themePrimitives.mono800,
     listIconFill: themePrimitives.mono100,
     listBorder: themePrimitives.mono500,
     // ProgressSteps

package/themes/dark-theme/color-component-tokens.js.flow

@@ -107,7 +107,7 @@ export default (
 
   // List
   listHeaderFill: themePrimitives.mono600,
-  listBodyFill: themePrimitives.mono700,
+  listBodyFill: themePrimitives.mono800,
   listIconFill: themePrimitives.mono100,
   listBorder: themePrimitives.mono500,
 

package/themes/dark-theme/color-semantic-tokens.js

@@ -29,12 +29,12 @@ var _default = function _default() {
     backgroundInversePrimary: foundation.primaryA,
     backgroundInverseSecondary: _colors.default.gray300,
     // Content
-    contentPrimary: foundation.primaryA,
-    contentSecondary: _colors.default.gray400,
-    contentTertiary: _colors.default.gray500,
-    contentInversePrimary: foundation.primaryB,
-    contentInverseSecondary: _colors.default.gray600,
-    contentInverseTertiary: _colors.default.gray500,
+    contentPrimary: _colors.default.white,
+    contentSecondary: _colors.default.gray300,
+    contentTertiary: _colors.default.gray400,
+    contentInversePrimary: _colors.default.black,
+    contentInverseSecondary: _colors.default.gray700,
+    contentInverseTertiary: _colors.default.gray600,
     // Border
     borderOpaque: _colors.default.gray700,
     borderTransparent: (0, _util.hexToRgb)(foundation.primaryA, '0.08'),
@@ -81,7 +81,8 @@ var _default = function _default() {
     rewardsTier1: _colors.default.blue400,
     rewardsTier2: _colors.default.yellow400,
     rewardsTier3: _colors.default.platinum400,
-    rewardsTier4: _colors.default.gray200
+    rewardsTier4: _colors.default.gray200,
+    membership: _colors.default.yellow600
   };
   return _objectSpread(_objectSpread({}, core), coreExtensions);
 };

package/themes/dark-theme/color-semantic-tokens.js.flow

@@ -28,12 +28,12 @@ export default (
     backgroundInverseSecondary: colors.gray300,
 
     // Content
-    contentPrimary: foundation.primaryA,
-    contentSecondary: colors.gray400,
-    contentTertiary: colors.gray500,
-    contentInversePrimary: foundation.primaryB,
-    contentInverseSecondary: colors.gray600,
-    contentInverseTertiary: colors.gray500,
+    contentPrimary: colors.white,
+    contentSecondary: colors.gray300,
+    contentTertiary: colors.gray400,
+    contentInversePrimary: colors.black,
+    contentInverseSecondary: colors.gray700,
+    contentInverseTertiary: colors.gray600,
 
     // Border
     borderOpaque: colors.gray700,
@@ -86,6 +86,7 @@ export default (
     rewardsTier2: colors.yellow400,
     rewardsTier3: colors.platinum400,
     rewardsTier4: colors.gray200,
+    membership: colors.yellow600,
   };
 
   return {

package/themes/light-theme/color-component-tokens.js

@@ -32,32 +32,32 @@ var _default = function _default() {
     buttonPrimaryActive: themePrimitives.primary600,
     buttonPrimarySelectedFill: themePrimitives.primary600,
     buttonPrimarySelectedText: themePrimitives.white,
-    buttonPrimarySpinnerForeground: themePrimitives.primary50,
-    buttonPrimarySpinnerBackground: themePrimitives.primary500,
+    buttonPrimarySpinnerForeground: themePrimitives.accent,
+    buttonPrimarySpinnerBackground: themePrimitives.primaryB,
     buttonSecondaryFill: themePrimitives.primary100,
     buttonSecondaryText: themePrimitives.primary,
     buttonSecondaryHover: themePrimitives.primary200,
     buttonSecondaryActive: themePrimitives.primary300,
     buttonSecondarySelectedFill: themePrimitives.primary300,
     buttonSecondarySelectedText: themePrimitives.primary,
-    buttonSecondarySpinnerForeground: themePrimitives.primary700,
-    buttonSecondarySpinnerBackground: themePrimitives.primary300,
+    buttonSecondarySpinnerForeground: themePrimitives.accent,
+    buttonSecondarySpinnerBackground: themePrimitives.primaryB,
     buttonTertiaryFill: 'transparent',
     buttonTertiaryText: themePrimitives.primary,
     buttonTertiaryHover: themePrimitives.primary50,
     buttonTertiaryActive: themePrimitives.primary100,
     buttonTertiarySelectedFill: themePrimitives.primary100,
     buttonTertiarySelectedText: themePrimitives.primary,
-    buttonTertiarySpinnerForeground: themePrimitives.primary700,
-    buttonTertiarySpinnerBackground: themePrimitives.primary300,
+    buttonTertiarySpinnerForeground: themePrimitives.accent,
+    buttonTertiarySpinnerBackground: themePrimitives.primary100,
     buttonMinimalFill: 'transparent',
     buttonMinimalText: themePrimitives.primary,
     buttonMinimalHover: themePrimitives.primary50,
     buttonMinimalActive: themePrimitives.primary100,
     buttonMinimalSelectedFill: themePrimitives.primary100,
     buttonMinimalSelectedText: themePrimitives.primary,
-    buttonMinimalSpinnerForeground: themePrimitives.primary700,
-    buttonMinimalSpinnerBackground: themePrimitives.primary300,
+    buttonMinimalSpinnerForeground: themePrimitives.accent,
+    buttonMinimalSpinnerBackground: themePrimitives.primary100,
     buttonDisabledFill: themePrimitives.mono200,
     buttonDisabledText: themePrimitives.mono600,
     buttonDisabledSpinnerForeground: themePrimitives.mono600,
@@ -103,7 +103,7 @@ var _default = function _default() {
     linkActive: themePrimitives.primary500,
     // List
     listHeaderFill: themePrimitives.white,
-    listBodyFill: themePrimitives.mono200,
+    listBodyFill: themePrimitives.white,
     listIconFill: themePrimitives.mono500,
     listBorder: themePrimitives.mono500,
     // ProgressSteps

package/themes/light-theme/color-component-tokens.js.flow

@@ -25,8 +25,8 @@ export default (
   buttonPrimaryActive: themePrimitives.primary600,
   buttonPrimarySelectedFill: themePrimitives.primary600,
   buttonPrimarySelectedText: themePrimitives.white,
-  buttonPrimarySpinnerForeground: themePrimitives.primary50,
-  buttonPrimarySpinnerBackground: themePrimitives.primary500,
+  buttonPrimarySpinnerForeground: themePrimitives.accent,
+  buttonPrimarySpinnerBackground: themePrimitives.primaryB,
 
   buttonSecondaryFill: themePrimitives.primary100,
   buttonSecondaryText: themePrimitives.primary,
@@ -34,8 +34,8 @@ export default (
   buttonSecondaryActive: themePrimitives.primary300,
   buttonSecondarySelectedFill: themePrimitives.primary300,
   buttonSecondarySelectedText: themePrimitives.primary,
-  buttonSecondarySpinnerForeground: themePrimitives.primary700,
-  buttonSecondarySpinnerBackground: themePrimitives.primary300,
+  buttonSecondarySpinnerForeground: themePrimitives.accent,
+  buttonSecondarySpinnerBackground: themePrimitives.primaryB,
 
   buttonTertiaryFill: 'transparent',
   buttonTertiaryText: themePrimitives.primary,
@@ -43,8 +43,8 @@ export default (
   buttonTertiaryActive: themePrimitives.primary100,
   buttonTertiarySelectedFill: themePrimitives.primary100,
   buttonTertiarySelectedText: themePrimitives.primary,
-  buttonTertiarySpinnerForeground: themePrimitives.primary700,
-  buttonTertiarySpinnerBackground: themePrimitives.primary300,
+  buttonTertiarySpinnerForeground: themePrimitives.accent,
+  buttonTertiarySpinnerBackground: themePrimitives.primary100,
 
   buttonMinimalFill: 'transparent',
   buttonMinimalText: themePrimitives.primary,
@@ -52,8 +52,8 @@ export default (
   buttonMinimalActive: themePrimitives.primary100,
   buttonMinimalSelectedFill: themePrimitives.primary100,
   buttonMinimalSelectedText: themePrimitives.primary,
-  buttonMinimalSpinnerForeground: themePrimitives.primary700,
-  buttonMinimalSpinnerBackground: themePrimitives.primary300,
+  buttonMinimalSpinnerForeground: themePrimitives.accent,
+  buttonMinimalSpinnerBackground: themePrimitives.primary100,
 
   buttonDisabledFill: themePrimitives.mono200,
   buttonDisabledText: themePrimitives.mono600,
@@ -107,7 +107,7 @@ export default (
 
   // List
   listHeaderFill: themePrimitives.white,
-  listBodyFill: themePrimitives.mono200,
+  listBodyFill: themePrimitives.white,
   listIconFill: themePrimitives.mono500,
   listBorder: themePrimitives.mono500,
 

package/themes/light-theme/color-semantic-tokens.js

@@ -64,7 +64,7 @@ var _default = function _default() {
     contentOnColor: _colors.default.white,
     contentOnColorInverse: _colors.default.black,
     contentNegative: foundation.negative,
-    contentWarning: _colors.default.yellow700,
+    contentWarning: _colors.default.yellow600,
     contentPositive: _colors.default.green400,
     // Border
     borderStateDisabled: _colors.default.gray50,
@@ -81,7 +81,8 @@ var _default = function _default() {
     rewardsTier1: _colors.default.blue400,
     rewardsTier2: _colors.default.yellow400,
     rewardsTier3: _colors.default.platinum400,
-    rewardsTier4: _colors.default.black
+    rewardsTier4: _colors.default.black,
+    membership: _colors.default.yellow600
   };
   return _objectSpread(_objectSpread({}, core), coreExtensions);
 };

package/themes/light-theme/color-semantic-tokens.js.flow

@@ -66,7 +66,7 @@ export default (
     contentOnColor: colors.white,
     contentOnColorInverse: colors.black,
     contentNegative: foundation.negative,
-    contentWarning: colors.yellow700,
+    contentWarning: colors.yellow600,
     contentPositive: colors.green400,
 
     // Border
@@ -86,6 +86,7 @@ export default (
     rewardsTier2: colors.yellow400,
     rewardsTier3: colors.platinum400,
     rewardsTier4: colors.black,
+    membership: colors.yellow600,
   };
   return {
     ...core,

package/themes/types.js.flow

@@ -166,6 +166,7 @@ export type CoreExtensionSemanticColorTokensT = {|
   rewardsTier2: string,
   rewardsTier3: string,
   rewardsTier4: string,
+  membership: string,
 |};
 
 export type SemanticColorTokensT = {|

package/tokens/colors.js

@@ -18,7 +18,7 @@ var colors = {
   gray200: '#E2E2E2',
   gray300: '#CBCBCB',
   gray400: '#AFAFAF',
-  gray500: '#757575',
+  gray500: '#6B6B6B',
   gray600: '#545454',
   gray700: '#333333',
   gray800: '#1F1F1F',
@@ -55,7 +55,7 @@ var colors = {
   yellow300: '#FFCF70',
   yellow400: '#FFC043',
   yellow500: '#BC8B2C',
-  yellow600: '#997328',
+  yellow600: '#996F00',
   yellow700: '#674D1B',
   green50: '#E6F2ED',
   green100: '#ADDEC9',

package/tokens/colors.js.flow

@@ -14,7 +14,7 @@ const colors: ColorTokensT = {
   gray200: '#E2E2E2',
   gray300: '#CBCBCB',
   gray400: '#AFAFAF',
-  gray500: '#757575',
+  gray500: '#6B6B6B',
   gray600: '#545454',
   gray700: '#333333',
   gray800: '#1F1F1F',
@@ -55,7 +55,7 @@ const colors: ColorTokensT = {
   yellow300: '#FFCF70',
   yellow400: '#FFC043',
   yellow500: '#BC8B2C',
-  yellow600: '#997328',
+  yellow600: '#996F00',
   yellow700: '#674D1B',
 
   green50: '#E6F2ED',

package/tooltip/styled-components.js

@@ -31,6 +31,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Body = (0, _index.styled)('div', function (props) {
   return _objectSpread(_objectSpread({}, (0, _styledComponents.getBodyStyles)(props)), {}, {
     backgroundColor: props.$theme.colors.tooltipBackground,
+    borderTopLeftRadius: props.$theme.borders.radius300,
+    borderTopRightRadius: props.$theme.borders.radius300,
+    borderBottomRightRadius: props.$theme.borders.radius300,
+    borderBottomLeftRadius: props.$theme.borders.radius300,
     boxShadow: props.$theme.lighting.shadow400,
     color: props.$theme.colors.tooltipText,
     // Reset transition property to opacity only, and static transform
@@ -43,6 +47,10 @@ Body.displayName = "Body";
 var Inner = (0, _index.styled)('div', function (props) {
   return _objectSpread(_objectSpread(_objectSpread({}, (0, _styledComponents.getInnerStyles)(props)), {}, {
     backgroundColor: props.$theme.colors.tooltipBackground,
+    borderTopLeftRadius: props.$theme.borders.radius300,
+    borderTopRightRadius: props.$theme.borders.radius300,
+    borderBottomRightRadius: props.$theme.borders.radius300,
+    borderBottomLeftRadius: props.$theme.borders.radius300,
     paddingTop: props.$theme.sizing.scale300,
     paddingBottom: props.$theme.sizing.scale300,
     paddingLeft: props.$theme.sizing.scale600,

package/tooltip/styled-components.js.flow

@@ -28,6 +28,10 @@ import type {SharedStylePropsArgT} from '../popover/types.js';
 export const Body = styled<SharedStylePropsArgT>('div', props => ({
   ...getBodyStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
+  borderTopLeftRadius: props.$theme.borders.radius300,
+  borderTopRightRadius: props.$theme.borders.radius300,
+  borderBottomRightRadius: props.$theme.borders.radius300,
+  borderBottomLeftRadius: props.$theme.borders.radius300,
   boxShadow: props.$theme.lighting.shadow400,
   color: props.$theme.colors.tooltipText,
   // Reset transition property to opacity only, and static transform
@@ -38,6 +42,10 @@ export const Body = styled<SharedStylePropsArgT>('div', props => ({
 export const Inner = styled<SharedStylePropsArgT>('div', props => ({
   ...getInnerStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
+  borderTopLeftRadius: props.$theme.borders.radius300,
+  borderTopRightRadius: props.$theme.borders.radius300,
+  borderBottomRightRadius: props.$theme.borders.radius300,
+  borderBottomLeftRadius: props.$theme.borders.radius300,
   paddingTop: props.$theme.sizing.scale300,
   paddingBottom: props.$theme.sizing.scale300,
   paddingLeft: props.$theme.sizing.scale600,