@chakra-ui/theme-utils

What is @chakra-ui/theme-utils?

@chakra-ui/theme-utils is a utility package for managing and manipulating themes in Chakra UI. It provides a set of tools to help developers create, extend, and customize themes efficiently.

What are @chakra-ui/theme-utils's main functionalities?

createBreakpoints

The `createBreakpoints` function allows you to define custom breakpoints for responsive design. This is useful for setting up a consistent set of breakpoints across your application.

const { createBreakpoints } = require('@chakra-ui/theme-utils');

const breakpoints = createBreakpoints({
  sm: '30em',
  md: '48em',
  lg: '62em',
  xl: '80em'
});

console.log(breakpoints);

toCSSVar

The `toCSSVar` function converts a theme object into CSS variables. This is useful for applying theme values directly in CSS-in-JS solutions.

const { toCSSVar } = require('@chakra-ui/theme-utils');

const theme = {
  colors: {
    primary: '#ff0000',
    secondary: '#00ff00'
  }
};

const cssVars = toCSSVar(theme);

console.log(cssVars);

analyzeBreakpoints

The `analyzeBreakpoints` function provides an analysis of the breakpoints, such as the minimum and maximum values. This can be useful for debugging and ensuring your breakpoints are set up correctly.

const { analyzeBreakpoints } = require('@chakra-ui/theme-utils');

const breakpoints = ['30em', '48em', '62em', '80em'];

const analysis = analyzeBreakpoints(breakpoints);

console.log(analysis);

Other packages similar to @chakra-ui/theme-utils

styled-system

Styled System is a collection of utility functions for building design systems with React. It provides a set of functions for creating responsive styles, spacing, and typography. Compared to @chakra-ui/theme-utils, Styled System is more focused on providing a low-level utility for styling components, whereas @chakra-ui/theme-utils is more integrated with Chakra UI's theming system.

emotion-theming

Emotion Theming is a library for managing themes in Emotion, a popular CSS-in-JS library. It provides tools for creating and using themes in your application. While Emotion Theming is specific to Emotion, @chakra-ui/theme-utils is designed to work seamlessly with Chakra UI, providing a more integrated experience for Chakra UI users.

theme-ui

Theme UI is a library for creating themeable user interfaces based on constraint-based design principles. It provides a set of tools for defining and using themes in your application. Theme UI is similar to @chakra-ui/theme-utils in that it provides utilities for managing themes, but it is more focused on providing a complete theming solution, including a set of pre-defined components and styles.

README

@chakra-ui/theme-utils

A Quick description of the component

This is an internal utility, not intended for public usage.

Installation

yarn add @chakra-ui/theme-utils
# or
npm i @chakra-ui/theme-utils

Contribution

Yes please! See the contributing guidelines for details.

Licence

This project is licensed under the terms of the MIT license.