@planningcenter/tapestry-react 2.1.0 → 2.1.2

package/dist/cjs/Avatar/Avatar.js

@@ -14,8 +14,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
-var _system = require("../system");
-
+var avatarSizes = {
+  xs: 2.5,
+  sm: 3,
+  md: 4.5,
+  lg: 6,
+  xl: 9,
+  xxl: 14
+};
 var borderSizes = {
   xs: 2,
   sm: 2,
@@ -34,16 +40,12 @@ function Avatar(_ref) {
       source = _ref.source,
       status = _ref.status,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["size", "source", "status"]);
-
-  var _useBoxSize = (0, _system.useBoxSize)(size),
-      boxSize = _useBoxSize.boxSize;
-
   return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
     as: "img",
     src: source,
-    width: boxSize,
-    height: boxSize,
-    flexBasis: boxSize,
+    width: avatarSizes[size],
+    height: avatarSizes[size],
+    flexBasis: avatarSizes[size],
     flexShrink: 0,
     flexGrow: 0,
     objectFit: "cover",

package/dist/cjs/Calendar/Day.js

@@ -17,38 +17,29 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
-var DayStatus = function DayStatus(_ref) {
-  var color = _ref.color,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["color"]);
-  return /*#__PURE__*/_react["default"].createElement(_Icon["default"].Status, (0, _extends2["default"])({
-    size: "5px",
-    color: color
-  }, restProps));
-};
-
-var Day = function Day(_ref2) {
-  var backgroundColor = _ref2.backgroundColor,
-      cellSize = _ref2.cellSize,
-      children = _ref2.children,
-      color = _ref2.color,
-      date = _ref2.date,
-      disabled = _ref2.disabled,
-      fontSize = _ref2.fontSize,
-      fontWeight = _ref2.fontWeight,
-      inSameMonth = _ref2.inSameMonth,
-      isMinDate = _ref2.isMinDate,
-      isMaxDate = _ref2.isMaxDate,
-      isSelected = _ref2.isSelected,
-      isToday = _ref2.isToday,
-      selectDate = _ref2.selectDate,
-      _ref2$selectedColor = _ref2.selectedColor,
-      selectedColor = _ref2$selectedColor === void 0 ? 'primary' : _ref2$selectedColor,
-      _ref2$statusColor = _ref2.statusColor,
-      statusColor = _ref2$statusColor === void 0 ? 'transparent' : _ref2$statusColor,
-      statuses = _ref2.statuses,
-      _ref2$statusOffset = _ref2.statusOffset,
-      statusOffset = _ref2$statusOffset === void 0 ? '15%' : _ref2$statusOffset,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["backgroundColor", "cellSize", "children", "color", "date", "disabled", "fontSize", "fontWeight", "inSameMonth", "isMinDate", "isMaxDate", "isSelected", "isToday", "selectDate", "selectedColor", "statusColor", "statuses", "statusOffset"]);
+var Day = function Day(_ref) {
+  var backgroundColor = _ref.backgroundColor,
+      cellSize = _ref.cellSize,
+      children = _ref.children,
+      color = _ref.color,
+      date = _ref.date,
+      disabled = _ref.disabled,
+      fontSize = _ref.fontSize,
+      fontWeight = _ref.fontWeight,
+      inSameMonth = _ref.inSameMonth,
+      isMinDate = _ref.isMinDate,
+      isMaxDate = _ref.isMaxDate,
+      isSelected = _ref.isSelected,
+      isToday = _ref.isToday,
+      selectDate = _ref.selectDate,
+      _ref$selectedColor = _ref.selectedColor,
+      selectedColor = _ref$selectedColor === void 0 ? 'primary' : _ref$selectedColor,
+      _ref$statusColor = _ref.statusColor,
+      statusColor = _ref$statusColor === void 0 ? 'transparent' : _ref$statusColor,
+      statuses = _ref.statuses,
+      _ref$statusOffset = _ref.statusOffset,
+      statusOffset = _ref$statusOffset === void 0 ? '15%' : _ref$statusOffset,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["backgroundColor", "cellSize", "children", "color", "date", "disabled", "fontSize", "fontWeight", "inSameMonth", "isMinDate", "isMaxDate", "isSelected", "isToday", "selectDate", "selectedColor", "statusColor", "statuses", "statusOffset"]);
   var affordance = !disabled && !isMinDate && !isMaxDate && (selectDate || restProps.onClick || restProps.onMouseDown);
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
     width: cellSize,
@@ -70,13 +61,14 @@ var Day = function Day(_ref2) {
     hover: affordance && {
       backgroundColor: 'highlight'
     }
-  }, restProps), (isSelected || isToday || statusColor) && /*#__PURE__*/_react["default"].createElement(_Icon["default"].Status, {
-    size: cellSize,
+  }, restProps), (isSelected || isToday || statusColor) && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     color: isSelected ? selectedColor : isToday ? 'surfaceTertiary' : statusColor,
+    left: "50%",
     position: "absolute",
     top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)"
+    transform: "translate(-50%, -50%)",
+    name: "tapestry.radio0",
+    size: cellSize
   }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
     as: "span",
     fontSize: fontSize,
@@ -92,9 +84,11 @@ var Day = function Day(_ref2) {
     right: 0,
     spacing: 0.25
   }, statuses.map(function (color, index) {
-    return /*#__PURE__*/_react["default"].createElement(DayStatus, {
+    return /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      color: isSelected ? 'white' : color,
       key: index,
-      color: isSelected ? 'white' : color
+      name: "tapestry.radio0",
+      size: "5px"
     });
   }))));
 };

package/dist/cjs/Pagination/Pagination.js

@@ -23,6 +23,8 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _utils = require("../utils");
 
+var _utils2 = require("../system/utils");
+
 var _windowSize = require("@react-hook/window-size");
 
 var _system = require("../system");
@@ -100,28 +102,32 @@ function Pagination(_ref2) {
   }
 
   function renderPageLink(number) {
-    var isActive = currentPage === number;
+    var isCurrentPage = currentPage === number;
+    var activeBackgroundColor = (0, _utils2.parseColor)({
+      base: activeColor,
+      alpha: 0.1
+    });
     var outlineStyle = {
-      border: '1px solid #5b8bf7',
-      color: '#5b8bf7'
+      border: "1px solid " + activeColor,
+      color: isCurrentPage ? '#fff' : activeColor
     };
     return /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
-      key: number,
-      focus: _objectSpread({
-        backgroundColor: '#f4f8fd'
+      active: _objectSpread({
+        backgroundColor: isCurrentPage ? activeColor : activeBackgroundColor
       }, outlineStyle),
+      key: number,
       fontWeight: 500,
       hover: _objectSpread({
-        backgroundColor: '#ffffff'
+        backgroundColor: isCurrentPage ? activeColor : '#fff'
       }, outlineStyle),
       onClick: onPageChange.bind(null, number),
       shrink: 0,
       square: true,
       title: number,
-      variant: isActive ? 'fill' : 'naked'
-    }, isActive && {
-      backgroundColor: '#5b8bf7',
-      color: 'white'
+      variant: isCurrentPage ? 'fill' : 'naked'
+    }, isCurrentPage && {
+      backgroundColor: activeColor,
+      color: '#fff'
     }));
   }
 

package/dist/cjs/system/box-sizes.js

@@ -23,7 +23,7 @@ var boxSizes = {
     radius: 3
   },
   md: {
-    boxSize: 4.5,
+    boxSize: 4,
     fontSize: 4,
     lineHeight: 3,
     paddingHorizontalDense: 1,
@@ -32,7 +32,7 @@ var boxSizes = {
     radius: 4
   },
   lg: {
-    boxSize: 6,
+    boxSize: 5,
     fontSize: 3,
     lineHeight: 4,
     paddingHorizontalDense: 1,
@@ -41,7 +41,7 @@ var boxSizes = {
     radius: 5
   },
   xl: {
-    boxSize: 9,
+    boxSize: 8,
     fontSize: 1,
     lineHeight: 5,
     paddingHorizontalDense: 2,

package/dist/esm/Avatar/Avatar.js

@@ -2,7 +2,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import Box from '../Box';
-import { useBoxSize } from '../system';
+var avatarSizes = {
+  xs: 2.5,
+  sm: 3,
+  md: 4.5,
+  lg: 6,
+  xl: 9,
+  xxl: 14
+};
 var borderSizes = {
   xs: 2,
   sm: 2,
@@ -22,15 +29,12 @@ export function Avatar(_ref) {
       status = _ref.status,
       restProps = _objectWithoutPropertiesLoose(_ref, ["size", "source", "status"]);
 
-  var _useBoxSize = useBoxSize(size),
-      boxSize = _useBoxSize.boxSize;
-
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: "img",
     src: source,
-    width: boxSize,
-    height: boxSize,
-    flexBasis: boxSize,
+    width: avatarSizes[size],
+    height: avatarSizes[size],
+    flexBasis: avatarSizes[size],
     flexShrink: 0,
     flexGrow: 0,
     objectFit: "cover",

package/dist/esm/Calendar/Day.js

@@ -5,39 +5,29 @@ import Icon from '../Icon';
 import StackView from '../StackView';
 import Text from '../Text';
 
-var DayStatus = function DayStatus(_ref) {
-  var color = _ref.color,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["color"]);
-
-  return /*#__PURE__*/React.createElement(Icon.Status, _extends({
-    size: "5px",
-    color: color
-  }, restProps));
-};
-
-var Day = function Day(_ref2) {
-  var backgroundColor = _ref2.backgroundColor,
-      cellSize = _ref2.cellSize,
-      children = _ref2.children,
-      color = _ref2.color,
-      date = _ref2.date,
-      disabled = _ref2.disabled,
-      fontSize = _ref2.fontSize,
-      fontWeight = _ref2.fontWeight,
-      inSameMonth = _ref2.inSameMonth,
-      isMinDate = _ref2.isMinDate,
-      isMaxDate = _ref2.isMaxDate,
-      isSelected = _ref2.isSelected,
-      isToday = _ref2.isToday,
-      selectDate = _ref2.selectDate,
-      _ref2$selectedColor = _ref2.selectedColor,
-      selectedColor = _ref2$selectedColor === void 0 ? 'primary' : _ref2$selectedColor,
-      _ref2$statusColor = _ref2.statusColor,
-      statusColor = _ref2$statusColor === void 0 ? 'transparent' : _ref2$statusColor,
-      statuses = _ref2.statuses,
-      _ref2$statusOffset = _ref2.statusOffset,
-      statusOffset = _ref2$statusOffset === void 0 ? '15%' : _ref2$statusOffset,
-      restProps = _objectWithoutPropertiesLoose(_ref2, ["backgroundColor", "cellSize", "children", "color", "date", "disabled", "fontSize", "fontWeight", "inSameMonth", "isMinDate", "isMaxDate", "isSelected", "isToday", "selectDate", "selectedColor", "statusColor", "statuses", "statusOffset"]);
+var Day = function Day(_ref) {
+  var backgroundColor = _ref.backgroundColor,
+      cellSize = _ref.cellSize,
+      children = _ref.children,
+      color = _ref.color,
+      date = _ref.date,
+      disabled = _ref.disabled,
+      fontSize = _ref.fontSize,
+      fontWeight = _ref.fontWeight,
+      inSameMonth = _ref.inSameMonth,
+      isMinDate = _ref.isMinDate,
+      isMaxDate = _ref.isMaxDate,
+      isSelected = _ref.isSelected,
+      isToday = _ref.isToday,
+      selectDate = _ref.selectDate,
+      _ref$selectedColor = _ref.selectedColor,
+      selectedColor = _ref$selectedColor === void 0 ? 'primary' : _ref$selectedColor,
+      _ref$statusColor = _ref.statusColor,
+      statusColor = _ref$statusColor === void 0 ? 'transparent' : _ref$statusColor,
+      statuses = _ref.statuses,
+      _ref$statusOffset = _ref.statusOffset,
+      statusOffset = _ref$statusOffset === void 0 ? '15%' : _ref$statusOffset,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["backgroundColor", "cellSize", "children", "color", "date", "disabled", "fontSize", "fontWeight", "inSameMonth", "isMinDate", "isMaxDate", "isSelected", "isToday", "selectDate", "selectedColor", "statusColor", "statuses", "statusOffset"]);
 
   var affordance = !disabled && !isMinDate && !isMaxDate && (selectDate || restProps.onClick || restProps.onMouseDown);
   return /*#__PURE__*/React.createElement(StackView, {
@@ -60,13 +50,14 @@ var Day = function Day(_ref2) {
     hover: affordance && {
       backgroundColor: 'highlight'
     }
-  }, restProps), (isSelected || isToday || statusColor) && /*#__PURE__*/React.createElement(Icon.Status, {
-    size: cellSize,
+  }, restProps), (isSelected || isToday || statusColor) && /*#__PURE__*/React.createElement(Icon, {
     color: isSelected ? selectedColor : isToday ? 'surfaceTertiary' : statusColor,
+    left: "50%",
     position: "absolute",
     top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)"
+    transform: "translate(-50%, -50%)",
+    name: "tapestry.radio0",
+    size: cellSize
   }), /*#__PURE__*/React.createElement(Text, {
     as: "span",
     fontSize: fontSize,
@@ -82,9 +73,11 @@ var Day = function Day(_ref2) {
     right: 0,
     spacing: 0.25
   }, statuses.map(function (color, index) {
-    return /*#__PURE__*/React.createElement(DayStatus, {
+    return /*#__PURE__*/React.createElement(Icon, {
+      color: isSelected ? 'white' : color,
       key: index,
-      color: isSelected ? 'white' : color
+      name: "tapestry.radio0",
+      size: "5px"
     });
   }))));
 };

package/dist/esm/Pagination/Pagination.js

@@ -12,6 +12,7 @@ import Button from '../Button';
 import Group from '../Group';
 import StackView from '../StackView';
 import { range } from '../utils';
+import { parseColor } from '../system/utils';
 import { useWindowWidth } from '@react-hook/window-size';
 import { useThemeValue } from '../system';
 
@@ -85,28 +86,32 @@ export default function Pagination(_ref2) {
   }
 
   function renderPageLink(number) {
-    var isActive = currentPage === number;
+    var isCurrentPage = currentPage === number;
+    var activeBackgroundColor = parseColor({
+      base: activeColor,
+      alpha: 0.1
+    });
     var outlineStyle = {
-      border: '1px solid #5b8bf7',
-      color: '#5b8bf7'
+      border: "1px solid " + activeColor,
+      color: isCurrentPage ? '#fff' : activeColor
     };
     return /*#__PURE__*/React.createElement(Button, _extends({
-      key: number,
-      focus: _objectSpread({
-        backgroundColor: '#f4f8fd'
+      active: _objectSpread({
+        backgroundColor: isCurrentPage ? activeColor : activeBackgroundColor
       }, outlineStyle),
+      key: number,
       fontWeight: 500,
       hover: _objectSpread({
-        backgroundColor: '#ffffff'
+        backgroundColor: isCurrentPage ? activeColor : '#fff'
       }, outlineStyle),
       onClick: onPageChange.bind(null, number),
       shrink: 0,
       square: true,
       title: number,
-      variant: isActive ? 'fill' : 'naked'
-    }, isActive && {
-      backgroundColor: '#5b8bf7',
-      color: 'white'
+      variant: isCurrentPage ? 'fill' : 'naked'
+    }, isCurrentPage && {
+      backgroundColor: activeColor,
+      color: '#fff'
     }));
   }
 

package/dist/esm/system/box-sizes.js

@@ -18,7 +18,7 @@ export var boxSizes = {
     radius: 3
   },
   md: {
-    boxSize: 4.5,
+    boxSize: 4,
     fontSize: 4,
     lineHeight: 3,
     paddingHorizontalDense: 1,
@@ -27,7 +27,7 @@ export var boxSizes = {
     radius: 4
   },
   lg: {
-    boxSize: 6,
+    boxSize: 5,
     fontSize: 3,
     lineHeight: 4,
     paddingHorizontalDense: 1,
@@ -36,7 +36,7 @@ export var boxSizes = {
     radius: 5
   },
   xl: {
-    boxSize: 9,
+    boxSize: 8,
     fontSize: 1,
     lineHeight: 5,
     paddingHorizontalDense: 2,

package/dist/types/Button/Button.d.ts

@@ -11,6 +11,10 @@ declare type ButtonProps = {
      * Opens the linked destination in a new window or tab.
      */
     external?: boolean;
+    /**
+     * Pass styles for when the button is active.
+     */
+    active?: object;
     /**
      * Pass styles for when the button is focused.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/Avatar/Avatar.tsx

@@ -1,7 +1,15 @@
 import React from 'react'
 
 import Box from '../Box'
-import { useBoxSize } from '../system'
+
+const avatarSizes = {
+  xs: 2.5,
+  sm: 3,
+  md: 4.5,
+  lg: 6,
+  xl: 9,
+  xxl: 14,
+}
 
 const borderSizes = {
   xs: 2,
@@ -16,15 +24,15 @@ type AvatarProps = {
   /**
    * Controls the size of the avatar.
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
   /**
    * The source of the image to display.
    */
-  source?: string,
+  source?: string
   /**
    * Adds a colored ring with padding around the avatar. Accepts a valid color string.
    */
-  status?: string,
+  status?: string
 }
 
 /**
@@ -36,14 +44,13 @@ export function Avatar({
   status,
   ...restProps
 }: AvatarProps) {
-  const { boxSize } = useBoxSize(size)
   return (
     <Box
       as="img"
       src={source}
-      width={boxSize}
-      height={boxSize}
-      flexBasis={boxSize}
+      width={avatarSizes[size]}
+      height={avatarSizes[size]}
+      flexBasis={avatarSizes[size]}
       flexShrink={0}
       flexGrow={0}
       objectFit="cover"

package/src/Button/Button.tsx

@@ -25,6 +25,11 @@ type ButtonProps = {
    */
   external?: boolean
 
+  /**
+   * Pass styles for when the button is active.
+   */
+  active?: object
+
   /**
    * Pass styles for when the button is focused.
    */

package/src/Calendar/Day.js

@@ -4,10 +4,6 @@ import Icon from '../Icon'
 import StackView from '../StackView'
 import Text from '../Text'
 
-const DayStatus = ({ color, ...restProps }) => (
-  <Icon.Status size="5px" color={color} {...restProps} />
-)
-
 export type PublicProps = {
   children?: any,
   /**
@@ -39,11 +35,11 @@ export type PublicProps = {
    */
   statusColor?: string,
   /**
-   * Specifies the `bottom` offset of the `DayStatus` icons, defaults to `15%`.
+   * Specifies the `bottom` offset of the status dots, defaults to `15%`.
    */
   statusOffset: string | number,
   /**
-   * Accepts an array of color names (theme token or valid html) which render as small `DayStatus` icons below the date.
+   * Accepts an array of color names (theme token or valid html) which render as small colorized dots below the date.
    */
   statuses?: array,
 }
@@ -101,8 +97,7 @@ const Day = ({
         {...restProps}
       >
         {(isSelected || isToday || statusColor) && (
-          <Icon.Status
-            size={cellSize}
+          <Icon
             color={
               isSelected
                 ? selectedColor
@@ -110,10 +105,12 @@ const Day = ({
                 ? 'surfaceTertiary'
                 : statusColor
             }
+            left="50%"
             position="absolute"
             top="50%"
-            left="50%"
             transform="translate(-50%, -50%)"
+            name="tapestry.radio0"
+            size={cellSize}
           />
         )}
         <Text
@@ -136,7 +133,12 @@ const Day = ({
             spacing={0.25}
           >
             {statuses.map((color, index) => (
-              <DayStatus key={index} color={isSelected ? 'white' : color} />
+              <Icon
+                color={isSelected ? 'white' : color}
+                key={index}
+                name="tapestry.radio0"
+                size="5px"
+              />
             ))}
           </StackView>
         )}
@@ -144,5 +146,6 @@ const Day = ({
     </StackView>
   )
 }
+
 Day.displayName = 'Calendar.Day'
 export default Day

package/src/Icon/Status.js

@@ -24,7 +24,7 @@ const STATUS_VARIANTS = {
 
 export type Props = {
   /** The name of the status icon to render. */
-  variant?: 'confirmed' | 'unconfirmed' | 'declined',
+  variant: 'confirmed' | 'unconfirmed' | 'declined',
   /** Uses the filled version of the icon. */
   variantFilled?: boolean,
   /** Pass any valid color from [colors](/colors). Defaults to variant color. */

package/src/Pagination/Pagination.tsx

@@ -5,6 +5,7 @@ import Button from '../Button'
 import Group from '../Group'
 import StackView from '../StackView'
 import { range } from '../utils'
+import { parseColor } from '../system/utils'
 import { useWindowWidth } from '@react-hook/window-size'
 import { useThemeValue } from '../system'
 
@@ -39,27 +40,27 @@ export type PaginationProps = {
   /**
    * Change the color of the active page
    */
-  activeColor: string,
+  activeColor: string
 
   /**
    * Current visible page number
    */
-  currentPage: number,
+  currentPage: number
 
   /**
    * Callback when new page is requested
    */
-  onPageChange: (nextPage: number) => undefined,
+  onPageChange: (nextPage: number) => undefined
 
   /**
    * Total available pages
    */
-  totalPages: number,
+  totalPages: number
 
   /**
    * Amount of visible pages
    */
-  visiblePages?: number,
+  visiblePages?: number
 }
 
 const NavButton = ({ disabled, iconName, ...props }) => {
@@ -98,22 +99,31 @@ export default function Pagination({
   }
 
   function renderPageLink(number) {
-    const isActive = currentPage === number
-
-    const outlineStyle = { border: '1px solid #5b8bf7', color: '#5b8bf7' }
+    const isCurrentPage = currentPage === number
+    const activeBackgroundColor = parseColor({ base: activeColor, alpha: 0.1 })
+    const outlineStyle = {
+      border: `1px solid ${activeColor}`,
+      color: isCurrentPage ? '#fff' : activeColor,
+    }
 
     return (
       <Button
+        active={{
+          backgroundColor: isCurrentPage ? activeColor : activeBackgroundColor,
+          ...outlineStyle,
+        }}
         key={number}
-        focus={{ backgroundColor: '#f4f8fd', ...outlineStyle }}
         fontWeight={500}
-        hover={{ backgroundColor: '#ffffff', ...outlineStyle }}
+        hover={{
+          backgroundColor: isCurrentPage ? activeColor : '#fff',
+          ...outlineStyle,
+        }}
         onClick={onPageChange.bind(null, number)}
         shrink={0}
         square
         title={number}
-        variant={isActive ? 'fill' : 'naked'}
-        {...(isActive && { backgroundColor: '#5b8bf7', color: 'white' })}
+        variant={isCurrentPage ? 'fill' : 'naked'}
+        {...(isCurrentPage && { backgroundColor: activeColor, color: '#fff' })}
       />
     )
   }

package/src/system/box-sizes.js

@@ -18,7 +18,7 @@ export const boxSizes = {
     radius: 3,
   },
   md: {
-    boxSize: 4.5,
+    boxSize: 4,
     fontSize: 4,
     lineHeight: 3,
     paddingHorizontalDense: 1,
@@ -27,7 +27,7 @@ export const boxSizes = {
     radius: 4,
   },
   lg: {
-    boxSize: 6,
+    boxSize: 5,
     fontSize: 3,
     lineHeight: 4,
     paddingHorizontalDense: 1,
@@ -36,7 +36,7 @@ export const boxSizes = {
     radius: 5,
   },
   xl: {
-    boxSize: 9,
+    boxSize: 8,
     fontSize: 1,
     lineHeight: 5,
     paddingHorizontalDense: 2,