@clds/theme-helper
This package was created to simplify the usage of themes when working with styled-components. It provides a default theme (that all applications themes should merge with),
a theme API so components will be able to access the theme values easily and some utility functions to work with themes
Installation
Install the package using Package Manager:
yarn add @clds/theme-helper
pnpm add @clds/theme-helper
npm install --save @clds/theme-helper
switchProp
In case your component receive a prop and you want to get different theme variable based on the prop value you can use this function
API:
generateTheme
When using the the ThemeProvider
from styled-components you should provide a theme object,
In order to support some extra features like base theme, references to other theme variables (from application or default theme) and more we created this function.
You should invoke it with your theme and send the result to the ThemeProvider
import { ThemeProvider } from 'styled-components';
import { generateTheme } from '@clds/theme-helper';
import { theme } from './myTheme';
const App = (props) => (
<ThemeProvider theme={generateTheme(theme)}>
<MyButton high={true}>Button</MyButton>
</ThemeProvider>
);
Default theme
this package also contains a default theme,
this is the base theme and every application can override it by providing it's own theme with overrides,
When adding or updating a component that should be affected from the theme variables there are few steps that should be done
1. add the relevant variables to the default theme
We should add variables for each component and not use existing global variables,
this will give the applications much more flexibility when creating their own themes.
We should use references to other theme variables so we won't need to duplicate values.
The default theme filename is default.theme.js
.
Example:
const myComponent = {
color: 'colors.primary',
};
module.exports = {
...myComponent,
};
This will take our component color from the primary color that's under the colors section in the theme.
2. add the mappings to the variables that we added to the theme
In order to provide the themeApi
we have a mappings file,
when updating the default theme we should also update the mappings file so the themeApi will expose our variables and point to the correct locations in the theme
The mappings filename is mappings.js
.
Example:
export default {
...,
myComponentColor: 'myComponent.color',
}
Now you will be able to use theme.myComponentColor
in your component and let the applications customize it when providing their theme
Versioning
This library follows Semantic Versioning.
License
See LICENSE