Style Properties Reference

Complete reference for all styling properties in Takumi, including layout, visual effects, typography, and more.

Helper Functions

The @takumi-rs/helpers package provides convenient helper functions for creating nodes and working with common values:

import { container, text, image, percentage, rem, rgba } from "@takumi-rs/helpers";

// Create nodes easily
const layout = container({
  children: [
    text("Hello World", { font_size: rem(1.5) }),
    image("/path/to/image.jpg", { width: percentage(50) })
  ],
  background_color: rgba(255, 255, 255, 0.9)
});

For TypeScript type definitions and detailed helper documentation, see the @takumi-rs/helpers package.

Value Types

`LengthUnit`

Represents length values in different units:

// Pixels (absolute)
width: 400

// Percentage of parent 
width: percentage(50) // or { percentage: 50 }

// Relative units
font_size: rem(1.5)   // or { rem: 1.5 }
font_size: { em: 2 }

// Auto sizing
width: "auto"

`Color`

Color values can be specified in multiple formats:

// Hex values
color: 0xFF0000        // Red
background_color: 0x00FF00  // Green

// Helper functions
color: rgb(255, 0, 0)          // Red
background_color: rgba(0, 255, 0, 0.5)  // Semi-transparent green
color: hsl(240, 100, 50)       // Blue

Layout Properties

Dimensions

`width`

Type: LengthUnit
Default: auto

Sets the width of the element.

width: 400; // 400 pixels
width: "auto"; // Automatic width
width: percentage(50); // 50% of parent (using helper)
width: { percentage: 50 }; // 50% of parent (direct object)

`height`

Type: LengthUnit
Default: auto

Sets the height of the element.

`max_width` / `max_height`

Type: LengthUnit
Default: auto

Sets the maximum dimensions of the element.

`min_width` / `min_height`

Type: LengthUnit
Default: auto

Sets the minimum dimensions of the element.

`aspect_ratio`

Type: number (optional)

Sets the aspect ratio of the element (width/height).

aspect_ratio: 16 / 9; // 16:9 aspect ratio
aspect_ratio: 1; // Square aspect ratio

Spacing

`padding`

Type: SidesValue

Internal spacing around the element's content.

padding: 16                    // All sides
padding: { top: 16, bottom: 16, left: 8, right: 8 }  // Individual sides

`margin`

Type: SidesValue

External spacing around the element.

`inset`

Type: SidesValue<LengthUnit>

Positioning offset from the element's normal position.

Flexbox Layout

`flex_direction`

Type: FlexDirection
Default: "column"
Values: "row" | "column" | "row-reverse" | "column-reverse"

Direction of flex layout.

`justify_content`

Alignment along the main axis.

`align_items`

Alignment along the cross axis.

`flex_wrap`

Type: FlexWrap
Default: "nowrap"
Values: "nowrap" | "wrap" | "wrap-reverse"

How flex items should wrap.

`gap`

Type: Gap

Spacing between flex items.

gap: 16                           // Same gap for both axes
gap: { row: 16, column: 8 }       // Different gaps for row/column

`flex_grow`

Type: number
Default: 0

How much the element should grow relative to other flex items.

`flex_shrink`

Type: number
Default: 1

How much the element should shrink relative to other flex items.

`flex_basis`

Type: LengthUnit
Default: auto

The initial size of the flex item.

Positioning

`position`

Type: Position
Default: "relative"
Values: "relative" | "absolute"

Positioning method for the element.

Visual Properties

Colors

`background_color`

Type: ColorInput (optional)

Element's background color or gradient.

background_color: [255, 0, 0]; // RGB red
background_color: [255, 0, 0, 0.5]; // RGBA red with 50% opacity
background_color: 0xff0000; // Integer RGB red

`color`

Type: ColorInput (optional)

Text color for child text elements.

`border_color`

Type: ColorInput (optional)

Color of the element's border.

Border

`border_width`

Type: SidesValue<LengthUnit>

Width of the element's border.

border_width: 2                    // All sides
border_width: { top: 2, bottom: 2, left: 1, right: 1 }  // Individual sides

`border_radius`

Type: SidesValue<LengthUnit> (optional)

Corner radius for rounded borders.

border_radius: 8                   // All corners
border_radius: { top_left: 8, top_right: 8, bottom_left: 0, bottom_right: 0 }

Effects

`box_shadow`

Type: BoxShadowInput (optional)

Box shadow for the element.

box_shadow: {
  offset_x: 2,
  offset_y: 2,
  blur_radius: 4,
  spread_radius: 0,
  color: [0, 0, 0, 0.25]
}

Typography Properties

`font_size`

Type: LengthUnit (optional)

Font size for text rendering.

font_size: 16; // 16 pixels
font_size: {
  em: 1.2;
} // 1.2em

`font_family`

Type: string (optional)

Font family name for text rendering.

font_family: "Noto Sans";

number - Pixels (e.g., 16)
"auto" - Automatic sizing
{ percentage: number } - Percentage of parent (e.g., { percentage: 50 })
{ rem: number } - Relative to root font size
{ em: number } - Relative to element font size
{ vh: number } - Viewport height percentage
{ vw: number } - Viewport width percentage

`SidesValue<T>`

Represents values that can be applied to all sides or individual sides:

// All sides
value: 16

// Individual sides
value: {
  top: 16,
  right: 8,
  bottom: 16,
  left: 8
}

`Color`

Represents a color in various formats:

[r, g, b] - RGB with 8-bit components
[r, g, b, a] - RGBA with 8-bit RGB and float alpha
number - 32-bit integer RGB value

Style Properties Reference

On this page