CtrlK
BlogDocsLog inGet started
Tessl Logo

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

styling-system.mddocs/

Styling System

The styling system provides 115+ responsive style properties that map directly to CSS, enabling powerful theme-aware styling with responsive breakpoints and pseudo-selector support.

Capabilities

Core CSS Function

Main CSS processing function that converts style objects to CSS.

/**
 * Core CSS processing function for converting SystemStyleObject to CSS
 * @param styles - Style object with theme-aware properties
 * @returns Processed CSS styles
 */
function css(styles: SystemStyleObject): CSSObject;

/**
 * Advanced CSS function factory with configuration options
 * @param options - Configuration for CSS processing
 * @returns Configured CSS function
 */
function getCss(options: GetCssOptions): (styles: SystemStyleObject) => CSSObject;

type SystemStyleObject = {
  [K in keyof CSS.Properties]: ResponsiveValue<CSS.Properties[K]>;
} & {
  [K in PseudoSelectors]: SystemStyleObject;
};

Layout Properties

Properties for controlling element dimensions, display, and visibility.

// Size properties
width?: ResponsiveValue<CSS.Property.Width>;
w?: ResponsiveValue<CSS.Property.Width>; // shorthand for width
height?: ResponsiveValue<CSS.Property.Height>;
h?: ResponsiveValue<CSS.Property.Height>; // shorthand for height
minWidth?: ResponsiveValue<CSS.Property.MinWidth>;
minW?: ResponsiveValue<CSS.Property.MinWidth>;
maxWidth?: ResponsiveValue<CSS.Property.MaxWidth>;
maxW?: ResponsiveValue<CSS.Property.MaxWidth>;
minHeight?: ResponsiveValue<CSS.Property.MinHeight>;
minH?: ResponsiveValue<CSS.Property.MinHeight>;
maxHeight?: ResponsiveValue<CSS.Property.MaxHeight>;
maxH?: ResponsiveValue<CSS.Property.MaxHeight>;

// Display and visibility
display?: ResponsiveValue<CSS.Property.Display>;
visibility?: ResponsiveValue<CSS.Property.Visibility>;
overflow?: ResponsiveValue<CSS.Property.Overflow>;
overflowX?: ResponsiveValue<CSS.Property.OverflowX>;
overflowY?: ResponsiveValue<CSS.Property.OverflowY>;

// Box model
boxSize?: ResponsiveValue<CSS.Property.Width>; // sets both width and height
boxSizing?: ResponsiveValue<CSS.Property.BoxSizing>;

// Responsive utilities
hideFrom?: ResponsiveValue<string>; // hide from breakpoint up
hideBelow?: ResponsiveValue<string>; // hide from breakpoint down

Usage Examples:

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

const Box = chakra("div");

// Responsive sizing
<Box
  width={{ base: "100%", md: "50%", lg: "25%" }}
  height="200px"
  minH="150px"
  display={{ base: "block", md: "flex" }}
/>

// Responsive visibility
<Box hideBelow="md">
  Only visible on medium screens and up
</Box>

Spacing Properties

Margin and padding properties with directional variants.

// Margin properties
margin?: ResponsiveValue<CSS.Property.Margin>;
m?: ResponsiveValue<CSS.Property.Margin>;
marginTop?: ResponsiveValue<CSS.Property.MarginTop>;
mt?: ResponsiveValue<CSS.Property.MarginTop>;
marginRight?: ResponsiveValue<CSS.Property.MarginRight>;
mr?: ResponsiveValue<CSS.Property.MarginRight>;
marginBottom?: ResponsiveValue<CSS.Property.MarginBottom>;
mb?: ResponsiveValue<CSS.Property.MarginBottom>;
marginLeft?: ResponsiveValue<CSS.Property.MarginLeft>;
ml?: ResponsiveValue<CSS.Property.MarginLeft>;
marginX?: ResponsiveValue<CSS.Property.Margin>; // horizontal margin
mx?: ResponsiveValue<CSS.Property.Margin>;
marginY?: ResponsiveValue<CSS.Property.Margin>; // vertical margin
my?: ResponsiveValue<CSS.Property.Margin>;

// Padding properties
padding?: ResponsiveValue<CSS.Property.Padding>;
p?: ResponsiveValue<CSS.Property.Padding>;
paddingTop?: ResponsiveValue<CSS.Property.PaddingTop>;
pt?: ResponsiveValue<CSS.Property.PaddingTop>;
paddingRight?: ResponsiveValue<CSS.Property.PaddingRight>;
pr?: ResponsiveValue<CSS.Property.PaddingRight>;
paddingBottom?: ResponsiveValue<CSS.Property.PaddingBottom>;
pb?: ResponsiveValue<CSS.Property.PaddingBottom>;
paddingLeft?: ResponsiveValue<CSS.Property.PaddingLeft>;
pl?: ResponsiveValue<CSS.Property.PaddingLeft>;
paddingX?: ResponsiveValue<CSS.Property.Padding>; // horizontal padding
px?: ResponsiveValue<CSS.Property.Padding>;
paddingY?: ResponsiveValue<CSS.Property.Padding>; // vertical padding
py?: ResponsiveValue<CSS.Property.Padding>;

Color Properties

Properties for text color, background color, and other color-related styling.

// Text colors
color?: ResponsiveValue<string>;
textColor?: ResponsiveValue<string>; // alias for color
fill?: ResponsiveValue<CSS.Property.Fill>; // for SVG elements
stroke?: ResponsiveValue<CSS.Property.Stroke>; // for SVG elements

// Background colors and images
backgroundColor?: ResponsiveValue<string>;
bg?: ResponsiveValue<string>; // shorthand for backgroundColor
background?: ResponsiveValue<CSS.Property.Background>;
backgroundImage?: ResponsiveValue<CSS.Property.BackgroundImage>;
backgroundSize?: ResponsiveValue<CSS.Property.BackgroundSize>;
backgroundPosition?: ResponsiveValue<CSS.Property.BackgroundPosition>;
backgroundRepeat?: ResponsiveValue<CSS.Property.BackgroundRepeat>;
backgroundAttachment?: ResponsiveValue<CSS.Property.BackgroundAttachment>;

Typography Properties

Font and text styling properties.

// Font properties
fontFamily?: ResponsiveValue<CSS.Property.FontFamily>;
fontSize?: ResponsiveValue<CSS.Property.FontSize>;
fontWeight?: ResponsiveValue<CSS.Property.FontWeight>;
fontStyle?: ResponsiveValue<CSS.Property.FontStyle>;
lineHeight?: ResponsiveValue<CSS.Property.LineHeight>;
letterSpacing?: ResponsiveValue<CSS.Property.LetterSpacing>;

// Text properties
textAlign?: ResponsiveValue<CSS.Property.TextAlign>;
textDecoration?: ResponsiveValue<CSS.Property.TextDecoration>;
textTransform?: ResponsiveValue<CSS.Property.TextTransform>;
textOverflow?: ResponsiveValue<CSS.Property.TextOverflow>;
whiteSpace?: ResponsiveValue<CSS.Property.WhiteSpace>;
wordBreak?: ResponsiveValue<CSS.Property.WordBreak>;

Flexbox Properties

Complete flexbox layout properties for containers and items.

// Flex container properties
alignItems?: ResponsiveValue<CSS.Property.AlignItems>;
justifyContent?: ResponsiveValue<CSS.Property.JustifyContent>;
flexDirection?: ResponsiveValue<CSS.Property.FlexDirection>;
flexWrap?: ResponsiveValue<CSS.Property.FlexWrap>;
gap?: ResponsiveValue<CSS.Property.Gap>;
rowGap?: ResponsiveValue<CSS.Property.RowGap>;
columnGap?: ResponsiveValue<CSS.Property.ColumnGap>;

// Flex item properties
flex?: ResponsiveValue<CSS.Property.Flex>;
alignSelf?: ResponsiveValue<CSS.Property.AlignSelf>;
justifySelf?: ResponsiveValue<CSS.Property.JustifySelf>;
flexGrow?: ResponsiveValue<CSS.Property.FlexGrow>;
flexShrink?: ResponsiveValue<CSS.Property.FlexShrink>;
flexBasis?: ResponsiveValue<CSS.Property.FlexBasis>;
order?: ResponsiveValue<CSS.Property.Order>;

Grid Properties

CSS Grid layout properties for containers and items.

// Grid container properties
gridTemplate?: ResponsiveValue<CSS.Property.GridTemplate>;
gridTemplateColumns?: ResponsiveValue<CSS.Property.GridTemplateColumns>;
gridTemplateRows?: ResponsiveValue<CSS.Property.GridTemplateRows>;
gridTemplateAreas?: ResponsiveValue<CSS.Property.GridTemplateAreas>;
gridArea?: ResponsiveValue<CSS.Property.GridArea>;

// Grid item properties  
gridRow?: ResponsiveValue<CSS.Property.GridRow>;
gridColumn?: ResponsiveValue<CSS.Property.GridColumn>;
gridAutoFlow?: ResponsiveValue<CSS.Property.GridAutoFlow>;
gridAutoColumns?: ResponsiveValue<CSS.Property.GridAutoColumns>;
gridAutoRows?: ResponsiveValue<CSS.Property.GridAutoRows>;

Position Properties

Properties for positioning elements.

position?: ResponsiveValue<CSS.Property.Position>;
top?: ResponsiveValue<CSS.Property.Top>;
right?: ResponsiveValue<CSS.Property.Right>;
bottom?: ResponsiveValue<CSS.Property.Bottom>;
left?: ResponsiveValue<CSS.Property.Left>;
zIndex?: ResponsiveValue<CSS.Property.ZIndex>;
inset?: ResponsiveValue<CSS.Property.Inset>; // shorthand for top/right/bottom/left
insetX?: ResponsiveValue<CSS.Property.Left>; // horizontal inset
insetY?: ResponsiveValue<CSS.Property.Top>; // vertical inset

Border Properties

Border styling and border radius properties.

// Border properties
border?: ResponsiveValue<CSS.Property.Border>;
borderWidth?: ResponsiveValue<CSS.Property.BorderWidth>;
borderStyle?: ResponsiveValue<CSS.Property.BorderStyle>;
borderColor?: ResponsiveValue<CSS.Property.BorderColor>;
borderTop?: ResponsiveValue<CSS.Property.BorderTop>;
borderRight?: ResponsiveValue<CSS.Property.BorderRight>;
borderBottom?: ResponsiveValue<CSS.Property.BorderBottom>;
borderLeft?: ResponsiveValue<CSS.Property.BorderLeft>;

// Border radius properties
borderRadius?: ResponsiveValue<CSS.Property.BorderRadius>;
rounded?: ResponsiveValue<CSS.Property.BorderRadius>; // alias for borderRadius
borderTopRadius?: ResponsiveValue<CSS.Property.BorderRadius>;
borderBottomRadius?: ResponsiveValue<CSS.Property.BorderRadius>;
borderLeftRadius?: ResponsiveValue<CSS.Property.BorderRadius>;
borderRightRadius?: ResponsiveValue<CSS.Property.BorderRadius>;

Shadow and Effects

Box shadow, text shadow, and filter effects.

boxShadow?: ResponsiveValue<CSS.Property.BoxShadow>;
textShadow?: ResponsiveValue<CSS.Property.TextShadow>;
filter?: ResponsiveValue<CSS.Property.Filter>;
backdropFilter?: ResponsiveValue<CSS.Property.BackdropFilter>;
opacity?: ResponsiveValue<CSS.Property.Opacity>;

Transform Properties

CSS transform properties for scaling, rotation, and translation.

transform?: ResponsiveValue<CSS.Property.Transform>;
scale?: ResponsiveValue<number>; // uniform scale
scaleX?: ResponsiveValue<number>;
scaleY?: ResponsiveValue<number>;
rotate?: ResponsiveValue<string>; // rotation angle
translate?: ResponsiveValue<string>; // translate x,y
translateX?: ResponsiveValue<string>;
translateY?: ResponsiveValue<string>;
skew?: ResponsiveValue<string>; // skew x,y
skewX?: ResponsiveValue<string>;
skewY?: ResponsiveValue<string>;

Transition Properties

CSS transition properties for animations.

transition?: ResponsiveValue<CSS.Property.Transition>;
transitionProperty?: ResponsiveValue<CSS.Property.TransitionProperty>;
transitionDuration?: ResponsiveValue<CSS.Property.TransitionDuration>;
transitionTimingFunction?: ResponsiveValue<CSS.Property.TransitionTimingFunction>;
transitionDelay?: ResponsiveValue<CSS.Property.TransitionDelay>;

Pseudo-Selector Support

Style properties for pseudo-selectors and states.

// Pseudo-selector properties - each accepts a SystemStyleObject
_hover?: SystemStyleObject;
_focus?: SystemStyleObject;
_active?: SystemStyleObject;
_visited?: SystemStyleObject;
_disabled?: SystemStyleObject;
_invalid?: SystemStyleObject;
_checked?: SystemStyleObject;
_selected?: SystemStyleObject;
_expanded?: SystemStyleObject;
_before?: SystemStyleObject;
_after?: SystemStyleObject;
_first?: SystemStyleObject;
_last?: SystemStyleObject;
_odd?: SystemStyleObject;
_even?: SystemStyleObject;
_focusWithin?: SystemStyleObject;
_groupHover?: SystemStyleObject;
_groupFocus?: SystemStyleObject;

Usage Examples:

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

const Button = chakra("button");

<Button
  bg="blue.500"
  color="white"
  px={6}
  py={3}
  borderRadius="md"
  _hover={{
    bg: "blue.600",
    transform: "translateY(-2px)",
    boxShadow: "lg"
  }}
  _active={{
    bg: "blue.700",
    transform: "translateY(0)"
  }}
  _disabled={{
    bg: "gray.300",
    cursor: "not-allowed"
  }}
/>

System Utilities

Utility functions and objects for working with the style system.

/**
 * Object containing all style property configurations
 */
declare const systemProps: Record<string, StyleConfig>;

/**
 * Array of all supported style property names
 */
declare const propNames: string[];

/**
 * Array of layout-specific property names
 */
declare const layoutPropNames: string[];

/**
 * Check if a property is a valid style prop
 * @param prop - Property name to check
 * @returns True if prop is a style property
 */
function isStyleProp(prop: string): boolean;

/**
 * Object containing layout-related style properties
 */
declare const layoutSystem: Record<string, StyleConfig>;

Transform Utilities

Transform configuration and utility functions.

/**
 * Object containing transformation functions for different property types
 */
declare const transforms: Record<string, TransformFunction>;

/**
 * Property configuration helpers object
 */
declare const t: {
  colors(scale?: string): StyleConfig;
  space(scale?: string): StyleConfig;
  sizes(scale?: string): StyleConfig;
  shadows(scale?: string): StyleConfig;
  borders(scale?: string): StyleConfig;
  radii(scale?: string): StyleConfig;
  fonts(scale?: string): StyleConfig;
  fontSizes(scale?: string): StyleConfig;
  fontWeights(scale?: string): StyleConfig;
  lineHeights(scale?: string): StyleConfig;
  letterSpacings(scale?: string): StyleConfig;
  zIndices(scale?: string): StyleConfig;
  transition(scale?: string): StyleConfig;
};

Types

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

// Token types for theme integration
type Token<CSSType, ThemeKey = unknown> = 
  | CSSType 
  | (ThemeKey extends string ? ResponsiveValue<ThemeKey> : never);

// CSS variable utilities
interface WithCSSVar<T> {
  __cssVars: Record<string, any>;
  __cssMap: Record<string, any>;
} & T;

// Transform function type
type TransformFunction = (value: any, scale?: any, props?: any) => any;

// Style configuration type
interface StyleConfig {
  property?: string | string[];
  scale?: string;
  transform?: TransformFunction;
}

Install with Tessl CLI

npx tessl i tessl/npm-chakra-ui--system

docs

color-mode.md

component-creation.md

index.md

styling-system.md

theming.md

tile.json