v0.102.0 - Themes

Migration Guide

Note: this will be pasted into the release notes on release.

1. Remove sportsbet-tokens from package.json and add sportsbet-themes.
2. Extend the styled-components type to benefit from features such as auto-complete.
3. Wrap your application with ThemeProvider, move Global inside it.

   /* App.tsx */
   import * as React from 'react';
   import { Global } from '@heathmont/sportsbet-global';
   import { ThemeProvider, sportsbetDark } from '@heathmont/sportsbet-themes';
   
   export const App = () => (
     <ThemeProvider theme={sportsbetDark}>
       <React.Fragment>
         <Global />
         {/* Your App… */}
       </React.Fragment>
     </ThemeProvider>
   );

tokens > theme

Theme values can be accessed by 2 methods:

1. styled prop destructure:

const Button = styled.button(({ theme: { color, space }}) => ({
 color: color.piccolo[100],
 margin: space.default
}));

2. useTheme() hook or useContext() for non-styled components:

import * as React from 'react';
import { useTheme, ThemeContext } from '@heathmont/sportsbet-themes';

const Example = () => {
 const { color } = useTheme();
 // or
 const { color } = React.useContext(ThemeContext);

 return <p color={color.piccolo[100]}>hello</p>;
}

Remove all references from sportsbet-tokens and replace with values from theme:

• animation.speed
  • animation.speed.fast => transitionDuration.default
  • animation.speed.default => transitionDuration.default
• border
  • border.radius.<key> => radius.<key>
  • border.style => borderStyle
  • border.width => borderWidth
  • 🆕 make use of border for a combo of the above.
• breakpoints.<key> => breakpoint.<key>
• color
  • colors.palette.<paletteKey>[<number>] => color.<paletteKey>[<number>]
  • colors.background => color.background
  • colors.brand => color.piccolo[100]
  • colors.border => color.gohan[100]
  • colors.error => color.chiChi[100]
  • colors.neutral[10] => color.bulma[100]
  • colors.neutral[20] => color.trunks[100]
  • colors.neutral[30] => color.goku[80]
  • colors.neutral[40] => color.goku[40]
  • colors.neutral[50] => color.goku[80]
  • colors.neutral[60] => color.gohan[100]
  • colors.neutral[70] => color.gohan[100]
  • colors.neutral[90] => color.hit[80]
  • colors.text => color.text
  • colors.warning => color.krillin[40]
• container => maxWidth
• spacing => space
• typgraphy
  • typography.fontWeight => fontWeight
  • typography.fontFamily => fontFamily

utils

As utils no longer have access to tokens and can't access theme values (because it would go against the rules of hooks), some adjustments need to be made:

1. Remove all references of spacing() and replace with values from theme:
   • spacing() => rem(space.default)
   • spacing('large') => rem(space.large)
   • …etc.
2. Modify all 'string' (container key, space key) usage of container() and replace with values from theme:
   • container('default') => container(maxWidth.default)
   • container('large') => container(maxWidth.large)
   • container('default', 'large') => container(maxWidth.default, space.large)
   • …etc.
3. Modify all argument-less focus() references to the themed color value: focus(color.picollo[100]).
   • N.B. as picollo is theme specific value, we unfortunately can't set this as a default value. The default value is now whis[100] which is a shared color value and mimics the browser default blue focus ring.
4. Modify all argument-less disabled() references to the themed opacity value: disabled(opacity.disabled).

• N.B. as opacity is theme specific value, we unfortunately can't set this as a default value. Instead we make use of the hard-coded value in shared. To ensure your styles are themable, be sure to make this change.