tessl/npm-chakra-ui--system

Chakra UI system primitives providing styled-system utilities, theming, color mode management, and component creation tools for React applications.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Chakra UI System

Name: tessl/npm-chakra-ui--system
Author: tessl

Chakra UI System provides the core styling system primitives for Chakra UI, enabling developers to create themeable, responsive, and accessible React components with a powerful style props system. It combines styled-system utilities, theming capabilities, color mode management, and component creation tools in a unified package.

Package Information

Package Name: @chakra-ui/system
Package Type: npm
Language: TypeScript
Installation: npm install @chakra-ui/system @emotion/react @emotion/styled react

Core Imports

import { 
  chakra, 
  ThemeProvider, 
  useTheme, 
  useColorMode, 
  useToken,
  css,
  styled,
  keyframes
} from "@chakra-ui/system";
import type { Interpolation } from "@chakra-ui/system";

CommonJS:

const { 
  chakra, 
  ThemeProvider, 
  useTheme, 
  useColorMode, 
  useToken,
  css,
  styled
} = require("@chakra-ui/system");

Basic Usage

import { chakra, ThemeProvider, useColorMode } from "@chakra-ui/system";

// Create styled components with the chakra factory
const Box = chakra("div");
const Button = chakra("button");

// Use style props for responsive, themed styling
function MyComponent() {
  const { colorMode, toggleColorMode } = useColorMode();
  
  return (
    <Box 
      bg={{ base: "white", md: "gray.50" }}
      p={4}
      borderRadius="md"
      boxShadow="lg"
    >
      <Button
        onClick={toggleColorMode}
        colorScheme="blue"
        size="md"
        variant="solid"
      >
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
    </Box>
  );
}

// Wrap your app with ThemeProvider
function App() {
  return (
    <ThemeProvider theme={myTheme}>
      <MyComponent />
    </ThemeProvider>
  );
}

Architecture

Chakra UI System is built around several key architectural components:

Style Props System: Comprehensive responsive style properties that map directly to CSS
Chakra Factory: Creates styled components that accept style props and theme-aware styling
Theme Integration: Deep integration with design tokens and theme-based styling
Color Mode Management: Built-in dark/light mode switching with persistence
Component Styling System: Variant-based styling for consistent component designs
CSS-in-JS Integration: Built on Emotion for powerful CSS generation and theming

Capabilities

Styling System

Comprehensive responsive style props system with 115+ properties covering layout, spacing, colors, typography, and more. Includes pseudo-selector support and responsive breakpoint handling.

// Core styling properties available on all chakra components
interface StyleProps {
  // Layout
  width?: ResponsiveValue<CSS.Property.Width>;
  height?: ResponsiveValue<CSS.Property.Height>;
  display?: ResponsiveValue<CSS.Property.Display>;
  
  // Spacing  
  margin?: ResponsiveValue<CSS.Property.Margin>;
  padding?: ResponsiveValue<CSS.Property.Padding>;
  
  // Colors
  color?: ResponsiveValue<string>;
  backgroundColor?: ResponsiveValue<string>;
  
  // Typography
  fontSize?: ResponsiveValue<string>;
  fontWeight?: ResponsiveValue<CSS.Property.FontWeight>;
  
  // Pseudo-selectors
  _hover?: SystemStyleObject;
  _focus?: SystemStyleObject;
  _active?: SystemStyleObject;
}

Styling System

Component Creation

Factory functions and utilities for creating themeable React components with automatic style prop support and polymorphic 'as' prop functionality.

// Main chakra factory for creating styled components
declare const chakra: ChakraFactory & HTMLChakraComponents;

interface ChakraFactory {
  <T extends As, P extends object = {}>(
    component: T,
    options?: ChakraStyledOptions
  ): ChakraComponent<T, P>;
}

// Styled function for advanced component creation
function styled<T extends As, P extends object = {}>(
  component: T, 
  options?: ChakraStyledOptions
): ChakraComponent<T, P>;

Component Creation

Theming

Theme management system with design tokens, component styling configurations, and responsive theme integration.

// Theme provider for context
function ThemeProvider(props: ThemeProviderProps): JSX.Element;

// Hook for accessing theme
function useTheme<T extends object = Dict>(): T;

// Token resolution utilities
function useToken<T extends StringOrNumber | StringOrNumber[]>(
  scale: string,
  token: T,
  fallback?: T
): T;

function getToken<T extends StringOrNumber | StringOrNumber[]>(
  scale: string,
  token: T,
  fallback?: T
): (theme: Dict) => T;

Theming

Color Mode Management

Complete dark/light mode system with persistence, SSR support, and React context integration.

// Color mode hook
function useColorMode(): {
  colorMode: "light" | "dark";
  toggleColorMode: () => void;
  setColorMode: (value: "light" | "dark") => void;
};

// Value selection based on color mode
function useColorModeValue<TLight, TDark>(
  light: TLight, 
  dark: TDark
): TLight | TDark;

// Provider for color mode context
function ColorModeProvider(props: ColorModeProviderProps): JSX.Element;

Color Mode Management

Types

// Core component types
type As = React.ElementType;
type Dict<T = any> = Record<string, T>;
type StringOrNumber = string | number;
type ChakraComponent<T extends As, P extends object> = React.ForwardRefExoticComponent<
  React.ComponentProps<T> & P & { as?: As }
>;

// Style prop types
type ResponsiveValue<T> = T | ResponsiveArray<T> | ResponsiveObject<T>;
type ResponsiveArray<T> = Array<T | null>;
type ResponsiveObject<T> = Partial<Record<string, T>>;

type SystemStyleObject = {
  [K in string]: ResponsiveValue<any>;
} & {
  // Pseudo-selectors
  _hover?: SystemStyleObject;
  _focus?: SystemStyleObject;
  _active?: SystemStyleObject;
  _visited?: SystemStyleObject;
  _disabled?: SystemStyleObject;
};

// Theme types
interface ThemingProps<ThemeComponent = string> {
  variant?: ResponsiveValue<ThemeComponent>;
  size?: ResponsiveValue<ThemeComponent>;
  colorScheme?: ResponsiveValue<string>;
  orientation?: ResponsiveValue<"horizontal" | "vertical">;
}

// Provider props
interface ThemeProviderProps {
  theme: Dict;
  cssVarsRoot?: string;
  children?: React.ReactNode;
}

interface ColorModeProviderProps {
  value?: "light" | "dark";
  children?: React.ReactNode;
  options?: {
    useSystemColorMode?: boolean;
    initialColorMode?: "light" | "dark";
    disableTransition?: boolean;
  };
}

Install with Tessl CLI