Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@clds/theme-helper

Package Overview
Dependencies
Maintainers
1
Versions
123
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@clds/theme-helper

Helper for themes

  • 0.35.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.6K
increased by231.74%
Maintainers
1
Weekly downloads
 
Created
Source

@clds/theme-helper


npm version

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

FAQs

Package last updated on 26 Sep 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc