Base Theming #717
Base Theming #717
Conversation
carloskelly13
requested review from
SunburtReynolds,
kale-stew and
rgerstenberger
| document.body.style.color = | ||
| themeContext.colors[rest.textColor] || | ||
| rest.textColor || | ||
| themeContext.colors.primary; |
There was a problem hiding this comment.
We want to set the body color to the theme background and text color to theme text color. We can source the theme from either
- The theme label
- A raw value
- The default theme value
| ListItem, | ||
| UnorderedList, | ||
| Text | ||
| }; |
There was a problem hiding this comment.
This unifies all of our exports into a single point.
| textMargin: '16px', | ||
| listMargin: '16px 0' | ||
| } | ||
| }; |
There was a problem hiding this comment.
These are some defaults for our theme's space, colors, and fonts. https://styled-system.com/getting-started
There was a problem hiding this comment.
Do you think we should make our theme public/available to the public?
There was a problem hiding this comment.
Yes! I plan on creating a helper that lets you use or extend it, which really is Object.assign. But still a helper.
|
Does theming allow for adding a logo (say Formidable's ;)) somewhere on all slides (say bottom right)? |
src/theme/default-theme.js
Outdated
| tertiary: '#1e2852' | ||
| }, | ||
| fonts: { | ||
| header: 'Helvetica Neue', |
There was a problem hiding this comment.
Looks like this should include fallback fonts?
| margin: 'textMargin' | ||
| }; | ||
|
|
||
| const Heading = styled(Text)({}); |
There was a problem hiding this comment.
Do you have to include ({})?
There was a problem hiding this comment.
I have to do something either ({}) or back-ticks. IMO, a blank object looks less strange.
3 participants
This PR adds base theming via Styled System and Styled Components plus a handful of Text components like Header and List.
Each component is a styled component with themed defaults. Meaning the user can either customize it with styled system props
<Text fontSize />or extend it using Styled Components directly.Styled theme props can either take the name of a theme label or a raw value
<Text fontSize="big" />or<Text fontSize="24px" />. This PR has a default theme based on Formidable colors.