baseui 10.0.0 → 10.3.0

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

@@ -58,7 +58,7 @@ export const StyledTable = styled<StyledTablePropsT>(
   'table',
   ({$theme, $width}) => {
     return {
-      borderCollapse: 'collapse',
+      borderSpacing: '0',
       boxSizing: 'border-box',
       minWidth: '100%',
       width: $width || null,
@@ -197,24 +197,8 @@ type StyledTableBodyRowPropsT = {
 
 export const StyledTableBodyRow = styled<StyledTableBodyRowPropsT>(
   'tr',
-  ({$theme, $divider}) => {
-    const borderHorizontal =
-      $divider === undefined ||
-      $divider === DIVIDER.horizontal ||
-      $divider === DIVIDER.grid;
-
+  ({$theme}) => {
     return {
-      ':not(:last-child)': {
-        borderBottomColor: borderHorizontal
-          ? $theme.borders.border300.borderColor
-          : null,
-        borderBottomStyle: borderHorizontal
-          ? $theme.borders.border300.borderStyle
-          : null,
-        borderBottomWidth: borderHorizontal
-          ? $theme.borders.border300.borderWidth
-          : null,
-      },
       ':hover': {
         backgroundColor: $theme.colors.tableStripedBackground,
       },
@@ -230,14 +214,19 @@ type StyledTableBodyCellPropsT = {
   $rowIndex?: ?number,
   $size?: SizeT,
   $isNumeric?: ?boolean,
+  $isLastRow?: ?boolean,
 };
 
 export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
   'td',
-  ({$theme, $size, $divider, $isNumeric}) => {
+  ({$theme, $size, $divider, $isNumeric, $isLastRow}) => {
     const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
     const borderVertical =
       $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
+    const borderHorizontal =
+      $divider === undefined ||
+      $divider === DIVIDER.horizontal ||
+      $divider === DIVIDER.grid;
     const padding = sizeToCellPadding($theme, $size);
 
     return {
@@ -249,7 +238,18 @@ export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
       color: $theme.colors.contentPrimary,
       textAlign: $isNumeric ? 'right' : null,
       verticalAlign: 'top',
-
+      borderBottomColor:
+        !$isLastRow && borderHorizontal
+          ? $theme.borders.border300.borderColor
+          : null,
+      borderBottomStyle:
+        !$isLastRow && borderHorizontal
+          ? $theme.borders.border300.borderStyle
+          : null,
+      borderBottomWidth:
+        !$isLastRow && borderHorizontal
+          ? $theme.borders.border300.borderWidth
+          : null,
       ':not(:last-child)': {
         [`border${borderDir}Color`]: borderVertical
           ? $theme.borders.border300.borderColor

package/table-semantic/table-builder.js

@@ -266,7 +266,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
         }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, sortIcon);
       }
 
-      function renderCell(col, colIndex, row, rowIndex) {
+      function renderCell(col, colIndex, row, rowIndex, lastRowindex) {
         var colOverrides = col.overrides || {};
 
         var _getOverrides33 = (0, _overrides.getOverrides)(colOverrides.TableBodyCell, TableBodyCell),
@@ -282,6 +282,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $row: row,
           $rowIndex: rowIndex,
           $isNumeric: col.numeric,
+          $isLastRow: rowIndex === lastRowindex,
           $size: size
         }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
       }
@@ -309,7 +310,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
           $row: row,
           $rowIndex: rowIndex
         }, tableBodyRowProps), columns.map(function (col, colIndex) {
-          return renderCell(col, colIndex, row, rowIndex);
+          return renderCell(col, colIndex, row, rowIndex, data.length - 1);
         }));
       }))));
     }

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

@@ -231,7 +231,7 @@ export default class TableBuilder<T> extends React.Component<
       );
     }
 
-    function renderCell(col, colIndex, row, rowIndex) {
+    function renderCell(col, colIndex, row, rowIndex, lastRowindex) {
       const colOverrides = col.overrides || {};
 
       const [ColTableBodyCell, colTableBodyCellProps] = getOverrides(
@@ -248,6 +248,7 @@ export default class TableBuilder<T> extends React.Component<
           $row={row}
           $rowIndex={rowIndex}
           $isNumeric={col.numeric}
+          $isLastRow={rowIndex === lastRowindex}
           $size={size}
           {...tableBodyCellProps}
           {...colTableBodyCellProps}
@@ -313,7 +314,7 @@ export default class TableBuilder<T> extends React.Component<
                   {...tableBodyRowProps}
                 >
                   {columns.map((col, colIndex) =>
-                    renderCell(col, colIndex, row, rowIndex),
+                    renderCell(col, colIndex, row, rowIndex, data.length - 1),
                   )}
                 </TableBodyRow>
               ))}

package/table-semantic/table.js

@@ -167,6 +167,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
             $divider: divider,
             $row: row,
             $rowIndex: rowIndex,
+            $isLastRow: rowIndex === data.length - 1,
             $size: size
           }, tableBodyCellProps), row[colIndex]);
         }));

package/table-semantic/table.js.flow

@@ -155,6 +155,7 @@ export default class Table extends React.Component<TablePropsT> {
                       $divider={divider}
                       $row={row}
                       $rowIndex={rowIndex}
+                      $isLastRow={rowIndex === data.length - 1}
                       $size={size}
                       {...tableBodyCellProps}
                     >

package/tag/index.d.ts

@@ -67,7 +67,6 @@ export class Tag extends React.Component<TagProps> {
 
 export const StyledRoot: StyletronComponent<any>;
 export const StyledAction: StyletronComponent<any>;
-export const StyledActionIcon: StyletronComponent<any>;
 export const StyledText: StyletronComponent<any>;
 
 export const KIND: KIND;

package/tag/index.js

@@ -21,12 +21,6 @@ Object.defineProperty(exports, "StyledAction", {
     return _styledComponents.Action;
   }
 });
-Object.defineProperty(exports, "StyledActionIcon", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.ActionIcon;
-  }
-});
 Object.defineProperty(exports, "StyledText", {
   enumerable: true,
   get: function get() {

package/tag/index.js.flow

@@ -10,7 +10,6 @@ export {default as Tag} from './tag.js';
 export {
   Root as StyledRoot,
   Action as StyledAction,
-  ActionIcon as StyledActionIcon,
   Text as StyledText,
 } from './styled-components.js';
 export {KIND, VARIANT, SIZE} from './constants.js';

package/tag/styled-components.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.customOnRamp = customOnRamp;
-exports.Root = exports.Text = exports.StartEnhancerContainer = exports.ActionIcon = exports.Action = void 0;
+exports.Root = exports.Text = exports.StartEnhancerContainer = exports.Action = void 0;
 
 var _tint = _interopRequireDefault(require("polished/lib/color/tint.js"));
 
@@ -288,13 +288,10 @@ var Action = (0, _index.styled)('span', function (props) {
   return _ref = {
     alignItems: 'center'
   }, _defineProperty(_ref, bottomRadiusDir, $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0), _defineProperty(_ref, topRadiusDir, $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0), _defineProperty(_ref, "cursor", $disabled ? 'not-allowed' : 'pointer'), _defineProperty(_ref, "display", 'flex'), _defineProperty(_ref, marginDir, (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.small, '8px'), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.medium, '12px'), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.large, '16px'), _SIZE$small$SIZE$medi)[$size]), _defineProperty(_ref, "outline", 'none'), _defineProperty(_ref, "transitionProperty", 'all'), _defineProperty(_ref, "transitionDuration", 'background-color'), _defineProperty(_ref, "transitionTimingFunction", $theme.animation.easeOutCurve), _ref;
-});
+}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
+
 exports.Action = Action;
 Action.displayName = "Action";
-var ActionIcon = (0, _index.styled)('svg', {}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
-
-exports.ActionIcon = ActionIcon;
-ActionIcon.displayName = "ActionIcon";
 var StartEnhancerContainer = (0, _index.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme,
       _ref2$$size = _ref2.$size,

package/tag/styled-components.js.flow

@@ -290,8 +290,6 @@ export const Action = styled<SharedPropsArgT>('span', props => {
   }: {});
 });
 
-export const ActionIcon = styled('svg', {});
-
 // $FlowFixMe https://github.com/facebook/flow/issues/7745
 export const StartEnhancerContainer = styled<SharedPropsArgT>(
   'div',

package/tag/tag.js

@@ -17,14 +17,16 @@ var _constants = require("./constants.js");
 
 var _utils = require("./utils.js");
 
+var _delete = _interopRequireDefault(require("../icon/delete.js"));
+
 var _focusVisible = require("../utils/focusVisible.js");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -39,6 +41,16 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+// Previously, Tag used a hardcoded SVG as its 'close' icon. Replacing it with
+// Delete requires modifying Delete's viewbox to prevent visual regressions.
+var ModifiedViewBoxDeleteIcon = function ModifiedViewBoxDeleteIcon(props) {
+  return /*#__PURE__*/React.createElement(_delete.default, _extends({
+    viewBox: "5 5 13.186 13.186"
+  }, props));
+};
+
 var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _SIZE$small$SIZE$medi;
 
@@ -119,7 +131,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
       Action = _getOverrides4[0],
       actionProps = _getOverrides4[1];
 
-  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.ActionIcon, _styledComponents.ActionIcon),
+  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.ActionIcon, ModifiedViewBoxDeleteIcon),
       _getOverrides6 = _slicedToArray(_getOverrides5, 2),
       ActionIcon = _getOverrides6[0],
       actionIconProps = _getOverrides6[1];
@@ -160,7 +172,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   var titleText = title || (0, _utils.getTextFromChildren)(children);
   var isButton = (clickable || closeable) && !disabled;
-  var actionSize = (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.small, '12'), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.medium, '16'), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.large, '20'), _SIZE$small$SIZE$medi)[size]; // Capitalize for JSX
+  var actionSize = (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.small, 12), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.medium, 16), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.large, 20), _SIZE$small$SIZE$medi)[size]; // Capitalize for JSX
 
   var StartEnhancer = startEnhancer;
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
@@ -174,21 +186,14 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, rootHandlers, sharedProps, rootProps, {
     onFocus: (0, _focusVisible.forkFocus)(rootProps, handleFocus),
     onBlur: (0, _focusVisible.forkBlur)(rootProps, handleBlur)
-  }), StartEnhancer && /*#__PURE__*/React.createElement(StartEnhancerContainer, startEnhancerContainerProps, /*#__PURE__*/React.createElement(StartEnhancer, null)), /*#__PURE__*/React.createElement(Text, _extends({
+  }), StartEnhancer && StartEnhancer !== 0 && /*#__PURE__*/React.createElement(StartEnhancerContainer, startEnhancerContainerProps, /*#__PURE__*/React.createElement(StartEnhancer, null)), /*#__PURE__*/React.createElement(Text, _extends({
     title: titleText
   }, textProps), children), closeable ? /*#__PURE__*/React.createElement(Action, _extends({
     "aria-hidden": true,
     role: "presentation"
   }, actionHandlers, sharedProps, actionProps), /*#__PURE__*/React.createElement(ActionIcon, _extends({
-    width: actionSize,
-    height: actionSize,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, actionIconProps), /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M21.0999 5.09998L18.8999 2.90002L11.9999 9.90002L5.09985 2.90002L2.8999 5.09998L9.8999 12L2.8999 18.9L5.09985 21.1L11.9999 14.1L18.8999 21.1L21.0999 18.9L14.0999 12L21.0999 5.09998Z"
-  }))) : null);
+    size: actionSize
+  }, actionIconProps))) : null);
 });
 Tag.displayName = 'Tag';
 var _default = Tag;

package/tag/tag.js.flow

@@ -10,15 +10,21 @@ import {getOverrides} from '../helpers/overrides.js';
 import {
   Action as StyledAction,
   Root as StyledRoot,
-  ActionIcon as StyledActionIcon,
   StartEnhancerContainer as StyledStartEnhancerContainer,
   Text as StyledText,
 } from './styled-components.js';
 import {KIND, VARIANT, SIZE} from './constants.js';
 import {getTextFromChildren} from './utils.js';
 import type {PropsT, SharedPropsArgT} from './types.js';
+import DeleteIcon from '../icon/delete.js';
 import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
 
+// Previously, Tag used a hardcoded SVG as its 'close' icon. Replacing it with
+// Delete requires modifying Delete's viewbox to prevent visual regressions.
+const ModifiedViewBoxDeleteIcon = props => (
+  <DeleteIcon viewBox="5 5 13.186 13.186" {...props} />
+);
+
 const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
   const {
     children,
@@ -73,7 +79,7 @@ const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
   const [Action, actionProps] = getOverrides(overrides.Action, StyledAction);
   const [ActionIcon, actionIconProps] = getOverrides(
     overrides.ActionIcon,
-    StyledActionIcon,
+    ModifiedViewBoxDeleteIcon,
   );
   const [StartEnhancerContainer, startEnhancerContainerProps] = getOverrides(
     overrides.StartEnhancerContainer,
@@ -111,9 +117,9 @@ const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
   const titleText = title || getTextFromChildren(children);
   const isButton = (clickable || closeable) && !disabled;
   const actionSize = {
-    [SIZE.small]: '12',
-    [SIZE.medium]: '16',
-    [SIZE.large]: '20',
+    [SIZE.small]: 12,
+    [SIZE.medium]: 16,
+    [SIZE.large]: 20,
   }[size];
 
   // Capitalize for JSX
@@ -140,7 +146,7 @@ const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
       onFocus={forkFocus(rootProps, handleFocus)}
       onBlur={forkBlur(rootProps, handleBlur)}
     >
-      {StartEnhancer && (
+      {StartEnhancer && StartEnhancer !== 0 && (
         <StartEnhancerContainer {...startEnhancerContainerProps}>
           <StartEnhancer />
         </StartEnhancerContainer>
@@ -157,19 +163,7 @@ const Tag = React.forwardRef<PropsT, HTMLSpanElement>((props, ref) => {
           {...sharedProps}
           {...actionProps}
         >
-          <ActionIcon
-            width={actionSize}
-            height={actionSize}
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            {...actionIconProps}
-          >
-            <path
-              fill="currentColor"
-              d="M21.0999 5.09998L18.8999 2.90002L11.9999 9.90002L5.09985 2.90002L2.8999 5.09998L9.8999 12L2.8999 18.9L5.09985 21.1L11.9999 14.1L18.8999 21.1L21.0999 18.9L14.0999 12L21.0999 5.09998Z"
-            />
-          </ActionIcon>
+          <ActionIcon size={actionSize} {...actionIconProps} />
         </Action>
       ) : null}
     </Root>

package/textarea/textarea.js

@@ -147,8 +147,7 @@ _defineProperty(Textarea, "defaultProps", {
   placeholder: '',
   required: false,
   rows: 3,
-  size: _index.SIZE.default,
-  value: ''
+  size: _index.SIZE.default
 });
 
 var _default = Textarea;

package/textarea/textarea.js.flow

@@ -32,7 +32,6 @@ class Textarea extends React.Component<TextareaPropsT, {isFocused: boolean}> {
     required: false,
     rows: 3,
     size: SIZE.default,
-    value: '',
   };
 
   state = {

package/theme.ts

@@ -186,6 +186,17 @@ export interface Colors {
   borderWarning: string;
   borderPositive: string;
 
+  // Programs
+  safety: string;
+  eatsGreen400: string;
+  freightBlue400: string;
+  jumpRed400: string;
+  rewardsTier1: string;
+  rewardsTier2: string;
+  rewardsTier3: string;
+  rewardsTier4: string;
+  membership: string;
+
   /* ---- End of Semantic Colors ---- */
 
   /* ---- Deprecated Semantic Colors ---- */
@@ -274,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-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'),
@@ -51,7 +51,7 @@ var _default = function _default() {
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
-    backgroundPositive: foundation.positive,
+    backgroundPositive: _colors.default.green500,
     backgroundLightAccent: _colors.default.blue700,
     backgroundLightPositive: _colors.default.green700,
     backgroundLightNegative: _colors.default.red700,
@@ -72,7 +72,17 @@ var _default = function _default() {
     borderAccentLight: _colors.default.blue500,
     borderNegative: _colors.default.red500,
     borderWarning: _colors.default.yellow500,
-    borderPositive: _colors.default.green500
+    borderPositive: _colors.default.green500,
+    // Programs
+    safety: _colors.default.blue400,
+    eatsGreen400: _colors.default.green400,
+    freightBlue400: _colors.default.cobalt400,
+    jumpRed400: _colors.default.red400,
+    rewardsTier1: _colors.default.blue400,
+    rewardsTier2: _colors.default.yellow400,
+    rewardsTier3: _colors.default.platinum400,
+    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,
@@ -52,7 +52,7 @@ export default (
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
-    backgroundPositive: foundation.positive,
+    backgroundPositive: colors.green500,
     backgroundLightAccent: colors.blue700,
     backgroundLightPositive: colors.green700,
     backgroundLightNegative: colors.red700,
@@ -76,6 +76,17 @@ export default (
     borderNegative: colors.red500,
     borderWarning: colors.yellow500,
     borderPositive: colors.green500,
+
+    // Programs
+    safety: colors.blue400,
+    eatsGreen400: colors.green400,
+    freightBlue400: colors.cobalt400,
+    jumpRed400: colors.red400,
+    rewardsTier1: colors.blue400,
+    rewardsTier2: colors.yellow400,
+    rewardsTier3: colors.platinum400,
+    rewardsTier4: colors.gray200,
+    membership: colors.yellow600,
   };
 
   return {

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

@@ -51,7 +51,7 @@ var _default = function _default() {
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
-    backgroundPositive: foundation.positive,
+    backgroundPositive: _colors.default.green400,
     backgroundLightAccent: _colors.default.blue50,
     backgroundLightNegative: _colors.default.red50,
     backgroundLightWarning: _colors.default.yellow50,
@@ -64,15 +64,25 @@ var _default = function _default() {
     contentOnColor: _colors.default.white,
     contentOnColorInverse: _colors.default.black,
     contentNegative: foundation.negative,
-    contentWarning: _colors.default.yellow700,
-    contentPositive: foundation.positive,
+    contentWarning: _colors.default.yellow600,
+    contentPositive: _colors.default.green400,
     // Border
     borderStateDisabled: _colors.default.gray50,
     borderAccent: _colors.default.blue400,
     borderAccentLight: _colors.default.blue200,
     borderNegative: _colors.default.red200,
     borderWarning: _colors.default.yellow200,
-    borderPositive: _colors.default.green200
+    borderPositive: _colors.default.green200,
+    // Programs
+    safety: _colors.default.blue400,
+    eatsGreen400: _colors.default.green400,
+    freightBlue400: _colors.default.cobalt400,
+    jumpRed400: _colors.default.red400,
+    rewardsTier1: _colors.default.blue400,
+    rewardsTier2: _colors.default.yellow400,
+    rewardsTier3: _colors.default.platinum400,
+    rewardsTier4: _colors.default.black,
+    membership: _colors.default.yellow600
   };
   return _objectSpread(_objectSpread({}, core), coreExtensions);
 };

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

@@ -52,7 +52,7 @@ export default (
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
-    backgroundPositive: foundation.positive,
+    backgroundPositive: colors.green400,
     backgroundLightAccent: colors.blue50,
     backgroundLightNegative: colors.red50,
     backgroundLightWarning: colors.yellow50,
@@ -66,8 +66,8 @@ export default (
     contentOnColor: colors.white,
     contentOnColorInverse: colors.black,
     contentNegative: foundation.negative,
-    contentWarning: colors.yellow700,
-    contentPositive: foundation.positive,
+    contentWarning: colors.yellow600,
+    contentPositive: colors.green400,
 
     // Border
     borderStateDisabled: colors.gray50,
@@ -76,6 +76,17 @@ export default (
     borderNegative: colors.red200,
     borderWarning: colors.yellow200,
     borderPositive: colors.green200,
+
+    // Programs
+    safety: colors.blue400,
+    eatsGreen400: colors.green400,
+    freightBlue400: colors.cobalt400,
+    jumpRed400: colors.red400,
+    rewardsTier1: colors.blue400,
+    rewardsTier2: colors.yellow400,
+    rewardsTier3: colors.platinum400,
+    rewardsTier4: colors.black,
+    membership: colors.yellow600,
   };
   return {
     ...core,

package/themes/types.js.flow

@@ -156,6 +156,17 @@ export type CoreExtensionSemanticColorTokensT = {|
   borderNegative: string,
   borderWarning: string,
   borderPositive: string,
+
+  // Programs
+  safety: string,
+  eatsGreen400: string,
+  freightBlue400: string,
+  jumpRed400: string,
+  rewardsTier1: string,
+  rewardsTier2: string,
+  rewardsTier3: string,
+  rewardsTier4: string,
+  membership: string,
 |};
 
 export type SemanticColorTokensT = {|

package/toast/index.d.ts

@@ -54,6 +54,7 @@ export interface ToasterOverrides {
   Root?: Override<ToasterSharedStylePropsArg>;
   ToastBody?: Override<SharedStylePropsArg>;
   ToastCloseIcon?: Override<SharedStylePropsArg>;
+  ToastInnerContainer?: Override<SharedStylePropsArg>;
 }
 export interface ToasterProps {
   overrides?: ToasterOverrides;

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,13 +55,13 @@ var colors = {
   yellow300: '#FFCF70',
   yellow400: '#FFC043',
   yellow500: '#BC8B2C',
-  yellow600: '#997328',
+  yellow600: '#996F00',
   yellow700: '#674D1B',
   green50: '#E6F2ED',
   green100: '#ADDEC9',
   green200: '#66D19E',
   green300: '#06C167',
-  green400: '#05944F',
+  green400: '#048848',
   green500: '#03703C',
   green600: '#03582F',
   green700: '#10462D',