Bot releases are hidden (Show)
Published by joe-bell almost 5 years ago
Note: this will be pasted into the release notes on release.
sportsbet-tokens
from package.json
and add sportsbet-themes
.styled-components
type to benefit from features such as auto-complete.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:
styled
prop destructure:const Button = styled.button(({ theme: { color, space }}) => ({ color: color.piccolo[100], margin: space.default }));
useTheme()
hook oruseContext()
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
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:
spacing()
and replace with values from theme
:
spacing()
=> rem(space.default)
spacing('large')
=> rem(space.large)
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)
focus()
references to the themed color value: focus(color.picollo[100])
.
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.disabled()
references to the themed opacity value: disabled(opacity.disabled)
.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.