4.0.0

BREAKING CHANGES

• Removed the 't-shirt'-named spacing scale (most commonly used for margins & paddings), to a 4px minor & 8px major scale. This allows Fannypack to be less opinionated and more flexible towards a spacing set. Read more about it here. If you used the 't-shirt'-named spacing scale (e.g. <Box marginTop="large">, below is the mapping to migrate to the new scale:
  • xxxsmall (4px) -> minor-1 (e.g. <Box marginTop="minor-1">
  • xxsmall (8px) -> major-1
  • xsmall (16px) -> major-2
  • small (20px) -> minor-5
  • medium (24px) -> major-3
  • large (32px) -> major-4
  • xlarge (40px) -> major-5
  • xxlarge (48px) -> major-6
  • xxxlarge (56px) -> major-7

Examples:

// Old
<Box padding="xsmall">Hello</Box>

// New
<Box padding="major-2">Hello</Box>

import { Box, styled, space } from 'fannypack';

// Old
const PaddedBox = styled(Box)`
  padding: ${theme('fannypack.layout.spacing.xsmall')}rem;
`;

// New
const PaddedBox = styled(Box)`
  padding: ${space(2, 'major')}rem;
`;

• Removed the 't-shirt'-named font size scale to a numerical scale (also for more flexibility). Read more about it here. Below is a mapping to migrate to the new scale
  • small -> 100 (e.g. <Text fontSize="100">)
  • medium -> 400
  • large -> 500
  • xlarge -> 600
  • xxlarge -> 700
  • xxxlarge -> 800

Examples:

// Old
<Text fontSize="small">

// New
<Text fontSize="100">

import { Text, theme, styled } from 'fannypack';

// Old
const SmallText = styled(Text)`
  font-size: ${theme('fannypack.fontSizes.small')}rem;
`;

// New
const SmallText = styled(Text)`
  font-size: ${theme('fannypack.fontSizes.100')}rem;
`;

• Changed the palette scale to a numerical scale (for more flexibility and greater range of colors if needed). Read more about it here. Below is a mapping to migrate to the new scale:
  • <palette>Light -> <palette>400 (E.g. <Text color="primary400">)
  • <palette>Lighter -> <palette>300
  • <palette>Lightest -> <palette>200
  • <palette>Dark -> <palette>600
  • <palette>Darker -> <palette>700
  • <palette>Darkest -> <palette>800

Examples:

// Old
<Text backgroundColor="primaryLight">

// New
<Text backgroundColor="primary400">

import { Text, palette, styled } from 'fannypack';

// Old
const StyledText = styled(Text)`
  background-color: ${palette('primaryLight')};
`;

// New
const StyledText = styled(Text)`
  background-color: ${palette('primary400')};
`;

Features

• Added ability to dynamically load web fonts with webfontloader. Read more about it.
• Added new space utility function to assist with the spacing scales in styled components. Read more about it.

Enhancements

• Darken form field outlines from primary300 to primary.

Fixes

• Fixed the palette prop on DialogModal's action buttons.
• Fixed Checkbox and Radio's inner icon size measurements to be capable of larger sizes.