@clds/theme-helper

@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:

//default.theme.js

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:

//mappings.js

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