or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-theming.mdconfig.mdcss-processing.mdindex.mdpseudo-responsive.mdtheme-vars.md
tile.json

tessl/npm-chakra-ui--styled-system

CSS-in-JS style functions and theming utilities for building component libraries

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@chakra-ui/styled-system@2.12.x

To install, run

npx @tessl/cli install tessl/npm-chakra-ui--styled-system@2.12.0

index.mddocs/

Chakra UI Styled System

Chakra UI Styled System is a comprehensive TypeScript library that provides a complete styling solution for CSS-in-JS component libraries. It enables theme-aware styling with responsive design support, pseudo-selectors, CSS custom properties, and a powerful configuration system for building consistent design systems.

Package Information

  • Package Name: @chakra-ui/styled-system
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @chakra-ui/styled-system
  • Version: 2.12.3

Core Imports

import { 
  css, 
  defineStyleConfig, 
  createMultiStyleConfigHelpers,
  cssVar,
  systemProps,
  pseudoSelectors,
  isStyleProp,
  get,
  getCSSVar,
  toCSSVar,
  defineStyle
} from "@chakra-ui/styled-system";

// Type imports
import type { 
  SystemProps,
  SystemStyleObject,
  ResponsiveValue,
  ThemingProps,
  StyleConfig
} from "@chakra-ui/styled-system";

For CommonJS:

const { 
  css, 
  defineStyleConfig, 
  createMultiStyleConfigHelpers,
  cssVar,
  systemProps,
  pseudoSelectors,
  isStyleProp,
  get,
  getCSSVar,
  toCSSVar,
  defineStyle
} = require("@chakra-ui/styled-system");

For modular imports:

// Individual modules
import { css } from "@chakra-ui/styled-system/css";
import { cssVar } from "@chakra-ui/styled-system/create-theme-vars";
import { defineStyleConfig } from "@chakra-ui/styled-system/define-styles";
import { getCSSVar } from "@chakra-ui/styled-system/get-css-var";
import { systemProps } from "@chakra-ui/styled-system/system";
import { pseudoSelectors } from "@chakra-ui/styled-system/pseudos";

Basic Usage

import { css, defineStyleConfig, cssVar, SystemStyleObject } from "@chakra-ui/styled-system";

// Basic styling with responsive and pseudo support
const buttonStyles: SystemStyleObject = {
  bg: "blue.500",
  color: "white",
  px: 4,
  py: 2,
  borderRadius: "md",
  _hover: {
    bg: "blue.600"
  },
  _disabled: {
    opacity: 0.4,
    cursor: "not-allowed"
  }
};

// Apply styles with theme processing
const processedStyles = css(buttonStyles);

// Component style configuration
const Button = defineStyleConfig({
  baseStyle: {
    fontWeight: "bold",
    borderRadius: "md",
  },
  sizes: {
    sm: { fontSize: "sm", px: 3, py: 2 },
    md: { fontSize: "md", px: 4, py: 3 },
    lg: { fontSize: "lg", px: 6, py: 4 }
  },
  variants: {
    solid: ({ colorScheme }) => ({
      bg: `${colorScheme}.500`,
      color: "white",
      _hover: { bg: `${colorScheme}.600` }
    }),
    outline: ({ colorScheme }) => ({
      border: "1px solid",
      borderColor: `${colorScheme}.500`,
      color: `${colorScheme}.500`
    })
  },
  defaultProps: {
    size: "md",
    variant: "solid",
    colorScheme: "blue"
  }
});

// CSS custom properties
const $size = cssVar("button-size");
const $color = cssVar("button-color", "blue.500");

const customStyles = {
  [$size.variable]: "40px",
  [$color.variable]: "colors.red.500",
  width: $size.reference,
  backgroundColor: $color.reference
};

Architecture

Chakra UI Styled System is built around several key architectural components:

  • Configuration System: Modular CSS property configurations that define how style props map to CSS properties and theme values
  • CSS Processing Engine: Advanced CSS-in-JS processor with support for responsive values, pseudo-selectors, and theme token resolution
  • Theme Integration: Deep integration with theme objects, CSS custom properties, and semantic token systems
  • Component Theming: Comprehensive theming system for both single-part and multi-part components with variants, sizes, and default props
  • Type Safety: Full TypeScript support with intelligent type inference for theme tokens and style properties
  • Responsive Design: Built-in responsive value handling with breakpoint-aware property resolution

Capabilities

Style Properties System

Comprehensive style property system that provides CSS-in-JS properties with theme integration, responsive support, and TypeScript safety. This is the core API that developers use to style components.

const systemProps: Config;
const propNames: string[];
const layoutPropNames: string[];

function isStyleProp(prop: string): boolean;

// Core style property interface covering all CSS properties
interface SystemProps {
  // Space properties (margin, padding)
  m?: ResponsiveValue<string | number>; // margin
  margin?: ResponsiveValue<string | number>;
  mt?: ResponsiveValue<string | number>; // marginTop
  marginTop?: ResponsiveValue<string | number>;
  mr?: ResponsiveValue<string | number>; // marginRight
  marginRight?: ResponsiveValue<string | number>;
  mb?: ResponsiveValue<string | number>; // marginBottom
  marginBottom?: ResponsiveValue<string | number>;
  ml?: ResponsiveValue<string | number>; // marginLeft
  marginLeft?: ResponsiveValue<string | number>;
  mx?: ResponsiveValue<string | number>; // marginX (horizontal)
  marginX?: ResponsiveValue<string | number>;
  my?: ResponsiveValue<string | number>; // marginY (vertical)
  marginY?: ResponsiveValue<string | number>;
  p?: ResponsiveValue<string | number>; // padding
  padding?: ResponsiveValue<string | number>;
  pt?: ResponsiveValue<string | number>; // paddingTop
  paddingTop?: ResponsiveValue<string | number>;
  pr?: ResponsiveValue<string | number>; // paddingRight
  paddingRight?: ResponsiveValue<string | number>;
  pb?: ResponsiveValue<string | number>; // paddingBottom
  paddingBottom?: ResponsiveValue<string | number>;
  pl?: ResponsiveValue<string | number>; // paddingLeft
  paddingLeft?: ResponsiveValue<string | number>;
  px?: ResponsiveValue<string | number>; // paddingX (horizontal)
  paddingX?: ResponsiveValue<string | number>;
  py?: ResponsiveValue<string | number>; // paddingY (vertical)
  paddingY?: ResponsiveValue<string | number>;
  
  // Layout properties
  w?: ResponsiveValue<string | number>; // width
  width?: ResponsiveValue<string | number>;
  h?: ResponsiveValue<string | number>; // height
  height?: ResponsiveValue<string | number>;
  minW?: ResponsiveValue<string | number>; // minWidth
  minWidth?: ResponsiveValue<string | number>;
  maxW?: ResponsiveValue<string | number>; // maxWidth
  maxWidth?: ResponsiveValue<string | number>;
  minH?: ResponsiveValue<string | number>; // minHeight
  minHeight?: ResponsiveValue<string | number>;
  maxH?: ResponsiveValue<string | number>; // maxHeight
  maxHeight?: ResponsiveValue<string | number>;
  display?: ResponsiveValue<string>;
  boxSize?: ResponsiveValue<string | number>;
  verticalAlign?: ResponsiveValue<string>;
  overflow?: ResponsiveValue<string>;
  overflowX?: ResponsiveValue<string>;
  overflowY?: ResponsiveValue<string>;
  hideFrom?: ResponsiveValue<string>; // Breakpoint-based hiding
  hideBelow?: ResponsiveValue<string>; // Breakpoint-based hiding
  
  // Color properties
  color?: ResponsiveValue<string>;
  textColor?: ResponsiveValue<string>;
  fill?: ResponsiveValue<string>;
  stroke?: ResponsiveValue<string>;
  
  // Background properties
  bg?: ResponsiveValue<string>; // background
  background?: ResponsiveValue<string>;
  bgColor?: ResponsiveValue<string>; // backgroundColor
  backgroundColor?: ResponsiveValue<string>;
  bgImage?: ResponsiveValue<string>; // backgroundImage
  backgroundImage?: ResponsiveValue<string>;
  bgGradient?: ResponsiveValue<string>; // CSS gradient helper
  bgSize?: ResponsiveValue<string>; // backgroundSize
  backgroundSize?: ResponsiveValue<string>;
  bgPosition?: ResponsiveValue<string>; // backgroundPosition
  backgroundPosition?: ResponsiveValue<string>;
  bgRepeat?: ResponsiveValue<string>; // backgroundRepeat
  backgroundRepeat?: ResponsiveValue<string>;
  
  // Border properties
  border?: ResponsiveValue<string>;
  borderWidth?: ResponsiveValue<string | number>;
  borderStyle?: ResponsiveValue<string>;
  borderColor?: ResponsiveValue<string>;
  borderRadius?: ResponsiveValue<string | number>;
  borderTop?: ResponsiveValue<string>;
  borderRight?: ResponsiveValue<string>;
  borderBottom?: ResponsiveValue<string>;
  borderLeft?: ResponsiveValue<string>;
  
  // Typography properties
  fontFamily?: ResponsiveValue<string>;
  fontSize?: ResponsiveValue<string | number>;
  fontWeight?: ResponsiveValue<string | number>;
  lineHeight?: ResponsiveValue<string | number>;
  letterSpacing?: ResponsiveValue<string | number>;
  textAlign?: ResponsiveValue<string>;
  fontStyle?: ResponsiveValue<string>;
  textTransform?: ResponsiveValue<string>;
  textDecoration?: ResponsiveValue<string>;
  isTruncated?: boolean; // Auto text ellipsis
  noOfLines?: number; // Multi-line text clamp
  
  // Flexbox properties
  alignItems?: ResponsiveValue<string>;
  alignContent?: ResponsiveValue<string>;
  justifyItems?: ResponsiveValue<string>;
  justifyContent?: ResponsiveValue<string>;
  flexWrap?: ResponsiveValue<string>;
  flexDirection?: ResponsiveValue<string>;
  flexDir?: ResponsiveValue<string>; // flexDirection alias
  flex?: ResponsiveValue<string | number>;
  flexGrow?: ResponsiveValue<string | number>;
  flexShrink?: ResponsiveValue<string | number>;
  flexBasis?: ResponsiveValue<string | number>;
  justifySelf?: ResponsiveValue<string>;
  alignSelf?: ResponsiveValue<string>;
  gap?: ResponsiveValue<string | number>;
  
  // Grid properties
  gridGap?: ResponsiveValue<string | number>;
  gridRowGap?: ResponsiveValue<string | number>;
  gridColumnGap?: ResponsiveValue<string | number>;
  gridColumn?: ResponsiveValue<string>;
  gridRow?: ResponsiveValue<string>;
  gridArea?: ResponsiveValue<string>;
  gridTemplateAreas?: ResponsiveValue<string>;
  gridTemplateRows?: ResponsiveValue<string>;
  gridTemplateColumns?: ResponsiveValue<string>;
  gridAutoColumns?: ResponsiveValue<string>;
  gridAutoRows?: ResponsiveValue<string>;
  gridAutoFlow?: ResponsiveValue<string>;
  
  // Position properties
  position?: ResponsiveValue<string>;
  zIndex?: ResponsiveValue<string | number>;
  top?: ResponsiveValue<string | number>;
  right?: ResponsiveValue<string | number>;
  bottom?: ResponsiveValue<string | number>;
  left?: ResponsiveValue<string | number>;
  inset?: ResponsiveValue<string | number>;
  insetX?: ResponsiveValue<string | number>;
  insetY?: ResponsiveValue<string | number>;
  
  // Transform properties
  transform?: ResponsiveValue<string>;
  transformOrigin?: ResponsiveValue<string>;
  
  // Effect properties
  boxShadow?: ResponsiveValue<string>;
  shadow?: ResponsiveValue<string>; // boxShadow alias
  textShadow?: ResponsiveValue<string>;
  
  // Other properties
  cursor?: ResponsiveValue<string>;
  opacity?: ResponsiveValue<string | number>;
  visibility?: ResponsiveValue<string>;
  userSelect?: ResponsiveValue<string>;
  pointerEvents?: ResponsiveValue<string>;
  srOnly?: boolean; // Screen reader only
}

CSS Configuration System

Core configuration interfaces that define how style properties are processed and mapped to CSS.

interface PropConfig {
  property?: string | string[] | ((theme: any) => string | string[]);
  scale?: string;
  transform?: (value: any, theme: any, styles: any) => any;
  processResult?: boolean;
  static?: Record<string, any> | ((theme: any) => Record<string, any>);
}

interface Config {
  [key: string]: PropConfig | true;
}

function toConfig(scale: string, transform?: Transform): (property: string) => PropConfig;

CSS Configuration System

Theme Variables and CSS Custom Properties

Utilities for converting theme tokens to CSS custom properties with calculation support and semantic token handling.

function cssVar(name: string, fallback?: string, cssVarPrefix?: string): {
  variable: string;
  reference: string;
};

function toCSSVar<T extends Record<string, any>>(rawTheme: T): WithCSSVar<T>;

function calc(x: Operand): CalcChain;

interface CalcChain {
  add(...operands: Operand[]): CalcChain;
  subtract(...operands: Operand[]): CalcChain;
  multiply(...operands: Operand[]): CalcChain;
  divide(...operands: Operand[]): CalcChain;
  negate(): CalcChain;
  toString(): string;
}

Theme Variables and CSS Custom Properties

CSS Processing and Style Functions

Core CSS-in-JS processing with theme integration, responsive value expansion, and pseudo-selector support.

function css(styles: StyleObjectOrFn): (theme: any) => Record<string, any>;

function getCss(options: GetCSSOptions): (
  styles: Record<string, any>, 
  nested?: boolean
) => Record<string, any>;

interface SystemStyleObject {
  [key: string]: 
    | string 
    | number 
    | SystemStyleObject 
    | ResponsiveValue<string | number>
    | ((theme: any) => any);
}

type ResponsiveValue<T> = T | ResponsiveArray<T> | ResponsiveObject<T>;

CSS Processing and Style Functions

Component Theming and Style Definitions

Comprehensive theming system for defining component styles with variants, sizes, and multi-part component support.

function defineStyle<T extends SystemStyleInterpolation>(styles: T): T;

function defineStyleConfig<
  BaseStyle extends SystemStyleInterpolation,
  Sizes extends Dict<SystemStyleInterpolation>,
  Variants extends Dict<SystemStyleInterpolation>
>(config: {
  baseStyle?: BaseStyle;
  sizes?: Sizes;
  variants?: Variants;
  defaultProps?: {
    size?: keyof Sizes;
    variant?: keyof Variants;
    colorScheme?: string;
  };
}): StyleConfig;

function createMultiStyleConfigHelpers<Part extends string>(
  parts: Part[]
): {
  definePartsStyle<PartStyles>(config: PartStyles): PartStyles;
  defineMultiStyleConfig<BaseStyle, Sizes, Variants>(config: {
    baseStyle?: BaseStyle;
    sizes?: Sizes;
    variants?: Variants;
    defaultProps?: {
      size?: string;
      variant?: string;
      colorScheme?: string;
    };
  }): MultiStyleConfig;
};

Component Theming and Style Definitions

Pseudo Selectors and Responsive Utilities

Pseudo-selector definitions, responsive value handling, and utility functions for style property management.

const pseudoSelectors: Record<string, string>;

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

function isStyleProp(prop: string): boolean;

interface ThemingProps<ThemeComponent = string> {
  variant?: ThemeComponent extends keyof ThemeTypings["components"]
    ? ThemeTypings["components"][ThemeComponent]["variants"]
    : string;
  size?: ThemeComponent extends keyof ThemeTypings["components"]
    ? ThemeTypings["components"][ThemeComponent]["sizes"]
    : string;
  colorScheme?: string;
}

Pseudo Selectors and Responsive Utilities

Utility Functions

Essential utility functions for object manipulation, property handling, and theme integration.

function get<T = any>(
  object: Record<string, any>, 
  path: string | number | (string | number)[], 
  fallback?: T
): T;

const memoizedGet: typeof get;

function omitThemingProps<T extends Record<string, any>>(
  props: T
): Omit<T, "variant" | "size" | "colorScheme" | "orientation" | "styleConfig">;

function expandResponsive(styles: Record<string, any>): (theme: any) => Record<string, any>;

function tokenToCSSVar(scale: string, value: string): (theme: any) => string;

function resolveStyleConfig(config: StyleConfig): (props: any) => Record<string, any>;

Types

Core type definitions used throughout the styled-system API.

// Style object types
type StyleObjectOrFn = SystemStyleObject | ((theme: any) => SystemStyleObject);
type SystemStyleFunction = (props: StyleFunctionProps) => SystemStyleObject;
type SystemStyleInterpolation = SystemStyleObject | SystemStyleFunction;

interface SystemStyleObject {
  [key: string]: 
    | string 
    | number 
    | SystemStyleObject 
    | ResponsiveValue<string | number>
    | ((theme: any) => any);
}

// CSS variable types
interface WithCSSVar<T> {
  __cssVars: Record<string, any>;
  __cssMap: Record<string, any>;
  __breakpoints: Record<string, any>;
  [key: string]: any;
}

type Operand = string | number | { reference: string };

// Style configuration types
interface StyleConfig {
  baseStyle?: SystemStyleInterpolation;
  sizes?: Record<string, SystemStyleInterpolation>;
  variants?: Record<string, SystemStyleInterpolation>;
  defaultProps?: {
    size?: string;
    variant?: string;
    colorScheme?: string;
  };
}

interface MultiStyleConfig {
  parts: string[];
  baseStyle?: Record<string, SystemStyleInterpolation>;
  sizes?: Record<string, Record<string, SystemStyleInterpolation>>;
  variants?: Record<string, Record<string, SystemStyleInterpolation>>;
  defaultProps?: {
    size?: string;
    variant?: string;
    colorScheme?: string;
  };
}

// Theme types
interface StyleFunctionProps {
  colorScheme: string;
  colorMode: "light" | "dark";
  orientation?: "horizontal" | "vertical";
  theme: Record<string, any>;
  [key: string]: any;
}

// CSS processing types
interface GetCSSOptions {
  theme: any;
  configs?: Config;
  pseudos?: Record<string, string>;
}

type Dict<T = any> = Record<string, T>;
type Transform = (value: any, theme: any, styles?: any) => any;