Once we have semantic and component level tokens in place, we need to set up theming within our components. Currently, in each component we are checking whether we are in light or dark mode, and setting styles based on that. Instead, we want to be able to set a styling to a single named token or variable, and then let a theme wrapper or hook handle whether or not to return the light or dark mode hex code.
For example, in the context of a Button's text color, we want to be able to set the color to buttonPrimaryText and let the theme wrapper or hook decide whether to return the light or dark color.
Acceptance Criteria
- [ ] Create a `useTheme` hook or a ThemeWrapper that will return the appropriate light or dark theme in our tokens
- [ ] Update one component to use this theming instead of our conditional colors and primitive tokens
Description
Once we have semantic and component level tokens in place, we need to set up theming within our components. Currently, in each component we are checking whether we are in light or dark mode, and setting styles based on that. Instead, we want to be able to set a styling to a single named token or variable, and then let a theme wrapper or hook handle whether or not to return the light or dark mode hex code.
For example, in the context of a Button's text color, we want to be able to set the color to
buttonPrimaryTextand let the theme wrapper or hook decide whether to return the light or dark color.Acceptance Criteria
- [ ] Create a `useTheme` hook or a ThemeWrapper that will return the appropriate light or dark theme in our tokens - [ ] Update one component to use this theming instead of our conditional colors and primitive tokens