baseui 0.0.0-next-90efe07 → 0.0.0-next-233fd73

package/badge/styled-components.js

@@ -24,19 +24,19 @@ function getColorStyles(_ref) {
       $hierarchy = _ref.$hierarchy,
       $color = _ref.$color;
   var COLOR_STYLES = (_COLOR_STYLES = {}, _defineProperty(_COLOR_STYLES, _constants.HIERARCHY.primary, (_HIERARCHY$primary = {}, _defineProperty(_HIERARCHY$primary, _constants.COLOR.accent, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundAccent
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.primary, {
     color: $theme.colors.contentInversePrimary,
     backgroundColor: $theme.colors.backgroundInversePrimary
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.positive, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundPositive
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.negative, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundNegative
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.warning, {
-    color: $theme.colors.primaryA,
+    color: $theme.colors.contentOnColorInverse,
     backgroundColor: $theme.colors.backgroundWarning
   }), _HIERARCHY$primary)), _defineProperty(_COLOR_STYLES, _constants.HIERARCHY.secondary, (_HIERARCHY$secondary = {}, _defineProperty(_HIERARCHY$secondary, _constants.COLOR.accent, {
     color: $theme.colors.contentAccent,

package/badge/styled-components.js.flow

@@ -16,7 +16,7 @@ function getColorStyles({ $theme, $hierarchy, $color }): {|
   const COLOR_STYLES = {
     [HIERARCHY.primary]: {
       [COLOR.accent]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundAccent,
       },
       [COLOR.primary]: {
@@ -24,15 +24,15 @@ function getColorStyles({ $theme, $hierarchy, $color }): {|
         backgroundColor: $theme.colors.backgroundInversePrimary,
       },
       [COLOR.positive]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundPositive,
       },
       [COLOR.negative]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundNegative,
       },
       [COLOR.warning]: {
-        color: $theme.colors.primaryA,
+        color: $theme.colors.contentOnColorInverse,
         backgroundColor: $theme.colors.backgroundWarning,
       },
     },

package/button/styled-components.js

@@ -248,7 +248,7 @@ function getBorderRadiiStyles(_ref9) {
   } else if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round) {
     value = '50%';
   } else if ($size === _constants.SIZE.mini) {
-    value = $theme.borders.radius200;
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

package/button/styled-components.js.flow

@@ -199,7 +199,7 @@ function getBorderRadiiStyles({ $theme, $size, $shape }) {
   } else if ($shape === SHAPE.circle || $shape === SHAPE.round) {
     value = '50%';
   } else if ($size === SIZE.mini) {
-    value = $theme.borders.radius200;
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

package/checkbox/styled-components.js

@@ -155,7 +155,7 @@ var Checkmark = (0, _styles.styled)('span', function (props) {
   var tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
   var indeterminate = encodeURIComponent("\n    <svg width=\"14\" height=\"4\" viewBox=\"0 0 14 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14 0.5H0V3.5H14V0.5Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
   var check = encodeURIComponent("\n    <svg width=\"17\" height=\"13\" viewBox=\"0 0 17 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.50002 12.6L0.400024 6.60002L2.60002 4.40002L6.50002 8.40002L13.9 0.900024L16.1 3.10002L6.50002 12.6Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
-  var borderRadius = $theme.borders.inputBorderRadius;
+  var borderRadius = $theme.borders.checkboxBorderRadius;
   var borderColor = getBorderColor(props);
   return {
     flex: '0 0 auto',

package/checkbox/styled-components.js.flow

@@ -142,7 +142,7 @@ export const Checkmark = styled<SharedStylePropsT>('span', (props) => {
     </svg>
   `);
 
-  const borderRadius = $theme.borders.inputBorderRadius;
+  const borderRadius = $theme.borders.checkboxBorderRadius;
   const borderColor = getBorderColor(props);
 
   return ({

package/datepicker/index.d.ts

@@ -5,7 +5,7 @@ export { default as StatefulCalendar } from './stateful-calendar';
 export { default as Datepicker, default as DatePicker } from './datepicker';
 export { default as StatefulDatepicker, default as StatefulDatePicker, } from './stateful-datepicker';
 export { formatDate } from './utils';
-export { ORIENTATION, STATE_CHANGE_TYPE } from './constants';
+export { DENSITY, ORIENTATION, STATE_CHANGE_TYPE } from './constants';
 export * from './styled-components';
 export * from '../timepicker';
 export * from '../timezonepicker';

package/datepicker/index.js

@@ -12,6 +12,7 @@ var _exportNames = {
   StatefulDatepicker: true,
   StatefulDatePicker: true,
   formatDate: true,
+  DENSITY: true,
   ORIENTATION: true,
   STATE_CHANGE_TYPE: true
 };
@@ -21,6 +22,12 @@ Object.defineProperty(exports, "Calendar", {
     return _calendar.default;
   }
 });
+Object.defineProperty(exports, "DENSITY", {
+  enumerable: true,
+  get: function get() {
+    return _constants.DENSITY;
+  }
+});
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function get() {

package/datepicker/index.js.flow

@@ -18,7 +18,7 @@ export { default as TimezonePicker } from '../timezonepicker/timezone-picker.js'
 // Util functions
 export { formatDate } from './utils/index.js';
 // Constants
-export { ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
+export { DENSITY, ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
 // Styled elements
 export * from './styled-components.js';
 // Flow

package/es/badge/styled-components.js

@@ -15,7 +15,7 @@ function getColorStyles({
   const COLOR_STYLES = {
     [HIERARCHY.primary]: {
       [COLOR.accent]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundAccent
       },
       [COLOR.primary]: {
@@ -23,15 +23,15 @@ function getColorStyles({
         backgroundColor: $theme.colors.backgroundInversePrimary
       },
       [COLOR.positive]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundPositive
       },
       [COLOR.negative]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundNegative
       },
       [COLOR.warning]: {
-        color: $theme.colors.primaryA,
+        color: $theme.colors.contentOnColorInverse,
         backgroundColor: $theme.colors.backgroundWarning
       }
     },

package/es/button/styled-components.js

@@ -245,7 +245,7 @@ function getBorderRadiiStyles({
   } else if ($shape === SHAPE.circle || $shape === SHAPE.round) {
     value = '50%';
   } else if ($size === SIZE.mini) {
-    value = $theme.borders.radius200;
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

package/es/checkbox/styled-components.js

@@ -180,7 +180,7 @@ export const Checkmark = styled('span', props => {
       <path d="M6.50002 12.6L0.400024 6.60002L2.60002 4.40002L6.50002 8.40002L13.9 0.900024L16.1 3.10002L6.50002 12.6Z" fill="${tickColor}"/>
     </svg>
   `);
-  const borderRadius = $theme.borders.inputBorderRadius;
+  const borderRadius = $theme.borders.checkboxBorderRadius;
   const borderColor = getBorderColor(props);
   return {
     flex: '0 0 auto',

package/es/datepicker/index.js

@@ -12,7 +12,7 @@ export { default as StatefulDatepicker, default as StatefulDatePicker } from './
 
 export { formatDate } from './utils'; // Constants
 
-export { ORIENTATION, STATE_CHANGE_TYPE } from './constants'; // Styled elements
+export { DENSITY, ORIENTATION, STATE_CHANGE_TYPE } from './constants'; // Styled elements
 
 export * from './styled-components'; // Dependency components and their types
 

package/es/icon/index.js

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 export { default as Icon } from './icon';
-export { Svg as StyledSvg } from './styled-components';
+export { Svg as StyledSvg, getSvgStyles } from './styled-components';
 export * from './icon-exports';
 export * from './types';
 /** @deprecated use StyledComponentArgs instead. To be removed in future versions.*/

package/es/input/styled-components.js

@@ -163,7 +163,13 @@ function getRootColors($disabled, $isFocused, $error, $positive = false, colors)
   };
 }
 
-function getRootBorderRadius(radius) {
+function getRootBorderRadius(size, borders) {
+  let radius = borders.inputBorderRadius;
+
+  if (size === SIZE.mini) {
+    radius = borders.inputBorderRadiusMini;
+  }
+
   return {
     borderTopLeftRadius: radius,
     borderBottomLeftRadius: radius,
@@ -206,7 +212,7 @@ export const getRootStyles = props => {
     transitionProperty: 'border',
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve,
-    ...getRootBorderRadius(borders.inputBorderRadius),
+    ...getRootBorderRadius($size, borders),
     ...getFont($size, typography),
     ...getRootColors($disabled, $isFocused, $error, $positive, colors),
     ...getRootPadding($adjoined, $size, sizing, $theme.direction, $hasIconTrailing)

package/es/input/utils.js

@@ -12,6 +12,7 @@ export function getSharedProps(props, state) {
     adjoined,
     size,
     required,
+    resize,
     readOnly
   } = props;
   const {
@@ -25,6 +26,7 @@ export function getSharedProps(props, state) {
     $adjoined: adjoined,
     $size: size,
     $required: required,
+    $resize: resize,
     $isReadOnly: readOnly
   };
 }

package/es/message-card/message-card.js

@@ -82,11 +82,12 @@ const MessageCard = ({
     $imageLayout: layout
   }, RootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
     role: "img",
-    ariaLabel: ariaLabel,
+    "aria-label": ariaLabel,
     $src: src,
     $imageLayout: layout,
     $backgroundPosition: backgroundPosition
   }, ImageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, HeadingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, ParagraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
+    $as: "div",
     kind: buttonKind,
     shape: SHAPE.pill,
     size: SIZE.compact,
@@ -96,6 +97,7 @@ const MessageCard = ({
     overrides: {
       BaseButton: {
         style: {
+          textAlign: 'center',
           pointerEvents: 'none',
           ...(buttonKind === BUTTON_KIND.tertiary ? {
             marginTop: theme.sizing.scale100,

package/es/select/default-props.js

@@ -28,7 +28,7 @@ const defaultProps = {
   ignoreCase: true,
   isLoading: false,
   labelKey: 'label',
-  maxDropdownHeight: '900px',
+  maxDropdownHeight: '40vh',
   multi: false,
   onBlur: () => {},
   onBlurResetsInput: true,

package/es/select/styled-components.js

@@ -19,6 +19,21 @@ function getFont(size = SIZE.default, typography) {
   }[size];
 }
 
+function getBorderRadius(size, borders) {
+  let radius = borders.inputBorderRadius;
+
+  if (size === SIZE.mini) {
+    radius = borders.inputBorderRadiusMini;
+  }
+
+  return {
+    borderTopLeftRadius: radius,
+    borderBottomLeftRadius: radius,
+    borderTopRightRadius: radius,
+    borderBottomRightRadius: radius
+  };
+}
+
 function getControlPadding(props) {
   const {
     $theme,
@@ -170,17 +185,14 @@ export const StyledControlContainer = styled('div', props => {
     $isPseudoFocused,
     $type,
     $searchable,
+    $size,
     $theme: {
       borders,
       colors,
       animation
     }
   } = props;
-  return {
-    borderTopLeftRadius: borders.inputBorderRadius,
-    borderTopRightRadius: borders.inputBorderRadius,
-    borderBottomRightRadius: borders.inputBorderRadius,
-    borderBottomLeftRadius: borders.inputBorderRadius,
+  return { ...getBorderRadius($size, borders),
     boxSizing: 'border-box',
     overflow: 'hidden',
     width: '100%',

package/es/tabs-motion/styled-components.js

@@ -25,6 +25,14 @@ export const StyledRoot = styled('div', ({
 });
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';
+export const StyledTabBar = styled('div', ({
+  $hasEndEnhancer,
+  $orientation
+}) => $hasEndEnhancer || !isHorizontal($orientation) ? {
+  display: 'flex'
+} : {});
+StyledTabBar.displayName = "StyledTabBar";
+StyledTabBar.displayName = 'StyledTabBar';
 export const StyledTabList = styled('div', ({
   $theme,
   $fill = FILL.intrinsic,
@@ -33,7 +41,8 @@ export const StyledTabList = styled('div', ({
   const style = {
     position: 'relative',
     display: 'flex',
-    flexWrap: 'nowrap'
+    flexWrap: 'nowrap',
+    flexGrow: 1
   };
 
   if (isHorizontal($orientation)) {
@@ -139,6 +148,19 @@ export const StyledTab = styled('button', ({
 });
 StyledTab.displayName = "StyledTab";
 StyledTab.displayName = 'StyledTab';
+export const StyledEndEnhancerContainer = styled('div', ({
+  $theme
+}) => {
+  const marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    [marginDirection]: $theme.sizing.scale600
+  };
+});
+StyledEndEnhancerContainer.displayName = "StyledEndEnhancerContainer";
+StyledEndEnhancerContainer.displayName = 'StyledEndEnhancerContainer';
 export const StyledArtworkContainer = styled('div', ({
   $theme,
   $orientation = ORIENTATION.horizontal

package/es/tabs-motion/tabs.js

@@ -9,12 +9,13 @@ LICENSE file in the root directory of this source tree.
 
 /* global window */
 import * as React from 'react';
+import * as ReactIs from 'react-is';
 import { useUID } from 'react-uid';
 import { useStyletron } from '../styles';
 import { getOverrides } from '../helpers/overrides';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 import { ORIENTATION, FILL } from './constants';
-import { StyledRoot, StyledTabList, StyledTab, StyledArtworkContainer, StyledTabHighlight, StyledTabBorder, StyledTabPanel } from './styled-components';
+import { StyledRoot, StyledTabList, StyledTab, StyledArtworkContainer, StyledTabHighlight, StyledTabBorder, StyledTabPanel, StyledEndEnhancerContainer, StyledTabBar } from './styled-components';
 import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './utils';
 const KEYBOARD_ACTION = {
   next: 'next',
@@ -78,6 +79,20 @@ const scrollParentToCentreTarget = targetNode => {
   targetNode.parentNode.scroll(target.x, target.y);
 };
 
+function RenderEnhancer({
+  Enhancer
+}) {
+  if (typeof Enhancer === 'string') {
+    return Enhancer;
+  }
+
+  if (ReactIs.isValidElementType(Enhancer)) {
+    return /*#__PURE__*/React.createElement(Enhancer, null);
+  }
+
+  return Enhancer;
+}
+
 export function Tabs({
   activeKey = '0',
   disabled = false,
@@ -88,7 +103,8 @@ export function Tabs({
   orientation = ORIENTATION.horizontal,
   overrides = {},
   renderAll = false,
-  uid: customUid = null
+  uid: customUid = null,
+  endEnhancer
 }) {
   // Create unique id prefix for this tabs component
   const generatedUid = useUID();
@@ -103,7 +119,8 @@ export function Tabs({
   const [Root, RootProps] = getOverrides(RootOverrides, StyledRoot);
   const [TabList, TabListProps] = getOverrides(TabListOverrides, StyledTabList);
   const [TabHighlight, TabHighlightProps] = getOverrides(TabHighlightOverrides, StyledTabHighlight);
-  const [TabBorder, TabBorderProps] = getOverrides(TabBorderOverrides, StyledTabBorder); // Count key updates
+  const [TabBorder, TabBorderProps] = getOverrides(TabBorderOverrides, StyledTabBorder);
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(overrides.EndEnhancerContainer, StyledEndEnhancerContainer); // Count key updates
   // We disable a few things until after first mount:
   // - the highlight animation, avoiding an initial slide-in
   // - smooth scrolling active tab into view
@@ -196,7 +213,10 @@ export function Tabs({
       }
     }
   }, [orientation, theme.direction]);
-  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(TabList, _extends({
+  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(StyledTabBar, {
+    $hasEndEnhancer: Boolean(endEnhancer),
+    $orientation: orientation
+  }, /*#__PURE__*/React.createElement(TabList, _extends({
     "data-baseweb": "tab-list",
     role: "tablist",
     "aria-orientation": orientation
@@ -224,7 +244,11 @@ export function Tabs({
     $animate: keyUpdated > 1,
     "aria-hidden": "true",
     role: "presentation"
-  }, sharedStylingProps, TabHighlightProps))), /*#__PURE__*/React.createElement(TabBorder, _extends({
+  }, sharedStylingProps, TabHighlightProps))), orientation === ORIENTATION.horizontal && endEnhancer !== null && endEnhancer !== undefined && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({}, endEnhancerContainerProps, {
+    $orientation: orientation
+  }), /*#__PURE__*/React.createElement(RenderEnhancer, {
+    Enhancer: endEnhancer
+  }))), /*#__PURE__*/React.createElement(TabBorder, _extends({
     "data-baseweb": "tab-border",
     "aria-hidden": "true",
     role: "presentation"

package/es/textarea/styled-components.js

@@ -7,23 +7,28 @@ LICENSE file in the root directory of this source tree.
 import { styled } from '../styles';
 import { getInputStyles, getInputContainerStyles, getRootStyles } from '../input/styled-components';
 export const StyledTextAreaRoot = styled('div', props => {
-  return getRootStyles({
-    $positive: false,
-    ...props,
-    $hasIconTrailing: false
-  });
+  return { ...getRootStyles({
+      $positive: false,
+      ...props,
+      $hasIconTrailing: false
+    }),
+    width: props.$resize ? 'fit-content' : '100%'
+  };
 });
 StyledTextAreaRoot.displayName = "StyledTextAreaRoot";
 StyledTextAreaRoot.displayName = 'StyledTextAreaRoot';
-export const StyledTextareaContainer = styled('div', props => ({ ...getInputContainerStyles({
+export const StyledTextareaContainer = styled('div', props => {
+  return getInputContainerStyles({
     $positive: false,
     ...props
-  })
-}));
+  });
+});
 StyledTextareaContainer.displayName = "StyledTextareaContainer";
 StyledTextareaContainer.displayName = 'StyledTextareaContainer';
-export const StyledTextarea = styled('textarea', props => ({ ...getInputStyles(props),
-  resize: 'none'
-}));
+export const StyledTextarea = styled('textarea', props => {
+  return { ...getInputStyles(props),
+    resize: props.$resize || 'none'
+  };
+});
 StyledTextarea.displayName = "StyledTextarea";
 StyledTextarea.displayName = 'StyledTextarea';

package/es/textarea/textarea.js

@@ -60,12 +60,14 @@ class Textarea extends React.Component {
       $disabled: this.props.disabled,
       $error: this.props.error,
       $positive: this.props.positive,
-      $required: this.props.required
+      $required: this.props.required,
+      $resize: this.props.resize
     }, rootProps), /*#__PURE__*/React.createElement(BaseInput, _extends({}, this.props, {
       type: CUSTOM_INPUT_TYPE.textarea,
       overrides: inputOverrides,
       onFocus: this.onFocus,
-      onBlur: this.onBlur
+      onBlur: this.onBlur,
+      resize: this.props.resize
     })));
   }
 

package/es/themes/move-theme/typography.js

@@ -22,6 +22,24 @@ export const typography = {
   font1150: {
     fontFamily: secondaryFontFamily
   },
+  font1050: {
+    fontFamily: secondaryFontFamily
+  },
+  font950: {
+    fontFamily: secondaryFontFamily
+  },
+  font850: {
+    fontFamily: secondaryFontFamily
+  },
+  font750: {
+    fontFamily: secondaryFontFamily
+  },
+  font650: {
+    fontFamily: secondaryFontFamily
+  },
+  font550: {
+    fontFamily: secondaryFontFamily
+  },
   DisplayLarge: {
     fontFamily: secondaryFontFamily
   },
@@ -34,6 +52,24 @@ export const typography = {
   DisplayXSmall: {
     fontFamily: secondaryFontFamily
   },
+  HeadingXXLarge: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingXLarge: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingLarge: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingMedium: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingSmall: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingXSmall: {
+    fontFamily: secondaryFontFamily
+  },
   MonoParagraphXSmall: {
     fontFamily: monoFontFamily
   },

package/es/themes/shared/borders.js

@@ -47,13 +47,18 @@ const borders = {
   useRoundedCorners: true,
 
   /** Button, ButtonGroup */
+  buttonBorderRadiusMini: '4px',
   buttonBorderRadius: '8px',
 
-  /** Input, Select, Textarea, Checkbox */
-  inputBorderRadius: '0px',
+  /** Checkbox */
+  checkboxBorderRadius: '0px',
+
+  /** Input, Select, Textarea */
+  inputBorderRadiusMini: '4px',
+  inputBorderRadius: '8px',
 
   /** Popover, Menu, Tooltip */
-  popoverBorderRadius: '0px',
+  popoverBorderRadius: '8px',
 
   /** Card, Datepicker, Modal, Toast, Notification */
   surfaceBorderRadius: '0px',

package/es/themes/shared/typography.js

@@ -60,61 +60,61 @@ export default ((fontTokens = defaultFontTokens) => {
   const font550 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '20px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '28px'
   };
   const font650 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '24px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '32px'
   };
   const font750 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '28px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '36px'
   };
   const font850 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '32px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '40px'
   };
   const font950 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '36px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '44px'
   };
   const font1050 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '40px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '52px'
   };
   const font1150 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '36px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '44px'
   };
   const font1250 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '44px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '52px'
   };
   const font1350 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '52px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '64px'
   };
   const font1450 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '96px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '112px'
   };
   return {