CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-org-jetbrains-compose-foundation--foundation-wasm-js

Compose Multiplatform foundation library for building web UIs with type-safe HTML DSL, CSS-in-Kotlin, and event handling, compiled for WebAssembly/JavaScript target

—

Pending
Overview
Eval results
Files

css-styling.mddocs/

CSS Styling

Type-safe CSS-in-Kotlin system providing comprehensive property support, units, responsive design capabilities, and advanced styling features including flexbox, grid, animations, and custom properties.

Core Imports

import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.*
import org.jetbrains.compose.web.attributes.*

Capabilities

CSS Units and Values

Type-safe CSS units with extension properties for numeric values and comprehensive unit support.

/**
 * Base interface for all CSS numeric values
 */
interface CSSNumericValue<T>

/**
 * Interface for CSS values with units
 */
interface CSSSizeValue<T> : CSSNumericValue<T>

/**
 * Typed CSS unit value implementation
 */
class CSSUnitValueTyped<T>(val value: Number, val unit: String) : CSSSizeValue<T>

// Unit type interfaces
interface CSSUnitLength
interface CSSUnitPercentage
interface CSSUnitAngle
interface CSSUnitTime
interface CSSUnitFrequency
interface CSSUnitResolution
interface CSSUnitFlex

Length Units:

/**
 * Pixel units - absolute length
 */
val Number.px: CSSSizeValue<CSSUnitLength>

/**
 * Em units - relative to element's font size
 */
val Number.em: CSSSizeValue<CSSUnitLength>

/**
 * Rem units - relative to root element's font size
 */
val Number.cssRem: CSSSizeValue<CSSUnitLength>

/**
 * Viewport units
 */
val Number.vw: CSSSizeValue<CSSUnitLength> // viewport width
val Number.vh: CSSSizeValue<CSSUnitLength> // viewport height
val Number.vmin: CSSSizeValue<CSSUnitLength> // viewport minimum
val Number.vmax: CSSSizeValue<CSSUnitLength> // viewport maximum

/**
 * Absolute units
 */
val Number.cm: CSSSizeValue<CSSUnitLength> // centimeters
val Number.mm: CSSSizeValue<CSSUnitLength> // millimeters
val Number.pt: CSSSizeValue<CSSUnitLength> // points
val Number.pc: CSSSizeValue<CSSUnitLength> // picas

Other Units:

/**
 * Percentage units
 */
val Number.percent: CSSSizeValue<CSSUnitPercentage>

/**
 * Angle units
 */
val Number.deg: CSSSizeValue<CSSUnitAngle> // degrees
val Number.rad: CSSSizeValue<CSSUnitAngle> // radians
val Number.turn: CSSSizeValue<CSSUnitAngle> // turns

/**
 * Time units
 */
val Number.s: CSSSizeValue<CSSUnitTime> // seconds
val Number.ms: CSSSizeValue<CSSUnitTime> // milliseconds

/**
 * Flex units
 */
val Number.fr: CSSSizeValue<CSSUnitFlex> // flex fraction

Usage Examples:

style {
    width(300.px)
    height(50.vh)
    margin(1.em)
    padding(16.px, 24.px)
    fontSize(1.2.cssRem)
    borderRadius(8.px)
}

Color System

Comprehensive color support with RGB, HSL, and named color values.

/**
 * Base interface for CSS color values
 */
interface CSSColorValue

/**
 * RGB color class with numeric values
 */
class Color(val red: Int, val green: Int, val blue: Int) : CSSColorValue

/**
 * Create RGB color
 */
fun rgb(r: Number, g: Number, b: Number): Color

/**
 * Create RGBA color with alpha transparency
 */
fun rgba(r: Number, g: Number, b: Number, a: Number): Color

/**
 * Create HSL color
 */
fun hsl(h: Number, s: Number, l: Number): CSSColorValue

/**
 * Create HSLA color with alpha transparency
 */
fun hsla(h: Number, s: Number, l: Number, a: Number): CSSColorValue

Color Keywords:

// Common color constants
object Color {
    val red: CSSColorValue
    val green: CSSColorValue
    val blue: CSSColorValue
    val white: CSSColorValue
    val black: CSSColorValue
    val gray: CSSColorValue
    val lightgray: CSSColorValue
    val darkgray: CSSColorValue
    val yellow: CSSColorValue
    val orange: CSSColorValue
    val purple: CSSColorValue
    val pink: CSSColorValue
    val brown: CSSColorValue
    val cyan: CSSColorValue
    val magenta: CSSColorValue
    val lime: CSSColorValue
    val transparent: CSSColorValue
}

// CSS keywords
val inherit: CSSColorValue
val initial: CSSColorValue
val unset: CSSColorValue
val auto: CSSAutoKeyword

Style Scope and Properties

Core styling interface providing access to all CSS properties with type safety.

/**
 * Main interface for CSS property declarations
 */
interface StyleScope {
    
    // Box model properties
    fun width(value: CSSNumeric)
    fun height(value: CSSNumeric)
    fun minWidth(value: CSSNumeric)
    fun maxWidth(value: CSSNumeric)
    fun minHeight(value: CSSNumeric)
    fun maxHeight(value: CSSNumeric)
    fun boxSizing(value: String)
    
    // Layout properties
    fun display(displayStyle: DisplayStyle)
    fun position(value: String)
    fun top(value: CSSNumeric)
    fun right(value: CSSNumeric)
    fun bottom(value: CSSNumeric)
    fun left(value: CSSNumeric)
    fun zIndex(value: Number)
    
    // Spacing properties
    fun margin(value: CSSNumeric)
    fun margin(vertical: CSSNumeric, horizontal: CSSNumeric)
    fun margin(top: CSSNumeric, horizontal: CSSNumeric, bottom: CSSNumeric)
    fun margin(top: CSSNumeric, right: CSSNumeric, bottom: CSSNumeric, left: CSSNumeric)
    fun marginTop(value: CSSNumeric)
    fun marginRight(value: CSSNumeric)
    fun marginBottom(value: CSSNumeric)
    fun marginLeft(value: CSSNumeric)
    
    fun padding(value: CSSNumeric)
    fun padding(vertical: CSSNumeric, horizontal: CSSNumeric)
    fun padding(top: CSSNumeric, horizontal: CSSNumeric, bottom: CSSNumeric)
    fun padding(top: CSSNumeric, right: CSSNumeric, bottom: CSSNumeric, left: CSSNumeric)
    fun paddingTop(value: CSSNumeric)
    fun paddingRight(value: CSSNumeric)
    fun paddingBottom(value: CSSNumeric)
    fun paddingLeft(value: CSSNumeric)
}

Usage Examples:

style {
    // Box model
    width(100.percent)
    height(400.px)
    boxSizing("border-box")
    
    // Layout
    display(DisplayStyle.flex)
    position("relative")
    zIndex(10)
    
    // Spacing - shorthand forms
    margin(16.px) // all sides
    padding(8.px, 16.px) // vertical, horizontal
    
    // Spacing - individual sides
    marginTop(20.px)
    paddingLeft(12.px)
}

Typography Properties

Comprehensive text styling with font management, text alignment, and text effects.

interface StyleScope {
    // Font properties
    fun fontSize(value: CSSNumeric)
    fun fontFamily(value: String)
    fun fontWeight(value: String)
    fun fontWeight(value: Number)
    fun fontStyle(value: String)
    fun lineHeight(value: CSSNumeric)
    fun lineHeight(value: Number)
    
    // Text properties
    fun color(value: CSSColorValue)
    fun textAlign(value: String)
    fun textDecoration(value: String)
    fun textTransform(value: String)
    fun letterSpacing(value: CSSNumeric)
    fun wordSpacing(value: CSSNumeric)
    fun textIndent(value: CSSNumeric)
    fun whiteSpace(value: String)
    fun wordBreak(value: String)
    fun overflowWrap(value: String)
}

Usage Examples:

style {
    // Font styling
    fontSize(18.px)
    fontFamily("'Helvetica Neue', Arial, sans-serif")
    fontWeight("bold")
    fontStyle("italic")
    lineHeight(1.5)
    
    // Text styling
    color(Color.darkblue)
    textAlign("center")
    textDecoration("underline")
    letterSpacing(0.5.px)
    
    // Text behavior
    whiteSpace("nowrap")
    wordBreak("break-word")
}

Background Properties

Background styling including colors, images, gradients, and positioning.

interface StyleScope {
    fun backgroundColor(value: CSSColorValue)
    fun backgroundImage(value: String)
    fun backgroundPosition(value: String)
    fun backgroundSize(value: String)
    fun backgroundRepeat(value: String)
    fun backgroundAttachment(value: String)
    fun backgroundClip(value: String)
    fun backgroundOrigin(value: String)
    fun background(value: String) // shorthand
}

Usage Examples:

style {
    backgroundColor(Color.lightblue)
    backgroundImage("url('background.jpg')")
    backgroundSize("cover")
    backgroundPosition("center")
    backgroundRepeat("no-repeat")
    
    // Gradient background
    backgroundImage("linear-gradient(45deg, #ff0000, #0000ff)")
}

Border Properties

Border styling with individual border control, radius, and border images.

interface StyleScope {
    // Border shorthand
    fun border(width: CSSNumeric, style: String, color: CSSColorValue)
    fun border(value: String)
    
    // Individual border properties
    fun borderWidth(value: CSSNumeric)
    fun borderStyle(value: String)
    fun borderColor(value: CSSColorValue)
    fun borderRadius(value: CSSNumeric)
    fun borderRadius(topLeft: CSSNumeric, topRight: CSSNumeric, bottomRight: CSSNumeric, bottomLeft: CSSNumeric)
    
    // Side-specific borders
    fun borderTop(width: CSSNumeric, style: String, color: CSSColorValue)
    fun borderRight(width: CSSNumeric, style: String, color: CSSColorValue)
    fun borderBottom(width: CSSNumeric, style: String, color: CSSColorValue)
    fun borderLeft(width: CSSNumeric, style: String, color: CSSColorValue)
    
    // Individual side properties
    fun borderTopWidth(value: CSSNumeric)
    fun borderTopStyle(value: String)
    fun borderTopColor(value: CSSColorValue)
    // ... similar for right, bottom, left
}

Usage Examples:

style {
    // Complete border
    border(2.px, "solid", Color.gray)
    borderRadius(8.px)
    
    // Individual borders
    borderTop(1.px, "solid", Color.lightgray)
    borderBottom(3.px, "dashed", Color.red)
    
    // Rounded corners - individual control
    borderRadius(4.px, 8.px, 4.px, 8.px)
}

Flexbox Properties

Complete flexbox layout system with container and item properties.

interface StyleScope {
    // Flex container properties
    fun display(value: DisplayStyle.flex)
    fun flexDirection(value: String) // "row", "column", "row-reverse", "column-reverse"
    fun flexWrap(value: String) // "nowrap", "wrap", "wrap-reverse"
    fun justifyContent(value: String) // "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"
    fun alignItems(value: String) // "stretch", "flex-start", "flex-end", "center", "baseline"
    fun alignContent(value: String) // "stretch", "flex-start", "flex-end", "center", "space-between", "space-around"
    fun gap(value: CSSNumeric)
    fun rowGap(value: CSSNumeric)
    fun columnGap(value: CSSNumeric)
    
    // Flex item properties
    fun flex(value: String) // shorthand
    fun flex(grow: Number, shrink: Number, basis: CSSNumeric)
    fun flexGrow(value: Number)
    fun flexShrink(value: Number)
    fun flexBasis(value: CSSNumeric)
    fun alignSelf(value: String)
    fun order(value: Number)
}

Usage Examples:

style {
    // Flex container
    display(DisplayStyle.flex)
    flexDirection("row")
    justifyContent("space-between")
    alignItems("center")
    gap(16.px)
    
    // Flex item
    flex(1, 0, 200.px) // grow, shrink, basis
    alignSelf("flex-start")
}

Grid Properties

CSS Grid layout system with comprehensive grid container and item controls.

interface StyleScope {
    // Grid container properties
    fun display(value: DisplayStyle.grid)
    fun gridTemplateColumns(value: String)
    fun gridTemplateRows(value: String)
    fun gridTemplateAreas(value: String)
    fun gridTemplate(value: String) // shorthand
    fun columnGap(value: CSSNumeric)
    fun rowGap(value: CSSNumeric)
    fun gap(value: CSSNumeric)
    fun justifyItems(value: String)
    fun alignItems(value: String)
    fun justifyContent(value: String)
    fun alignContent(value: String)
    fun gridAutoColumns(value: String)
    fun gridAutoRows(value: String)
    fun gridAutoFlow(value: String)
    
    // Grid item properties
    fun gridColumn(value: String)
    fun gridRow(value: String)
    fun gridColumnStart(value: String)
    fun gridColumnEnd(value: String)
    fun gridRowStart(value: String)
    fun gridRowEnd(value: String)
    fun gridArea(value: String)
    fun justifySelf(value: String)
    fun alignSelf(value: String)
}

Usage Examples:

style {
    // Grid container
    display(DisplayStyle.grid)
    gridTemplateColumns("repeat(3, 1fr)")
    gridTemplateRows("auto 1fr auto")
    gap(20.px)
    
    // Grid areas
    gridTemplateAreas("""
        "header header header"
        "sidebar main main"
        "footer footer footer"
    """.trimIndent())
}

// Grid item
style {
    gridColumn("1 / 3") // span from column 1 to 3
    gridRow("2")
    justifySelf("center")
}

Visual Effects

Advanced visual properties including opacity, visibility, transforms, and filters.

interface StyleScope {
    // Visibility and opacity
    fun opacity(value: Number)
    fun visibility(value: String) // "visible", "hidden", "collapse"
    fun overflow(value: String) // "visible", "hidden", "scroll", "auto"
    fun overflowX(value: String)
    fun overflowY(value: String)
    
    // Transforms
    fun transform(value: String)
    fun transformOrigin(value: String)
    fun transformStyle(value: String)
    fun perspective(value: CSSNumeric)
    fun perspectiveOrigin(value: String)
    fun backfaceVisibility(value: String)
    
    // Filters
    fun filter(value: String)
    fun backdropFilter(value: String)
    
    // Clipping and masking
    fun clipPath(value: String)
    fun mask(value: String)
}

Usage Examples:

style {
    // Basic effects
    opacity(0.8)
    overflow("hidden")
    
    // Transforms
    transform("rotate(45deg) scale(1.2)")
    transformOrigin("center")
    
    // Filters
    filter("blur(5px) brightness(1.2)")
    
    // Clipping
    clipPath("circle(50%)")
}

Animation and Transitions

CSS animations and transitions with comprehensive timing and control options.

interface StyleScope {
    // Transitions
    fun transition(value: String) // shorthand
    fun transitionProperty(value: String)
    fun transitionDuration(value: CSSTimeValue)
    fun transitionTimingFunction(value: String)
    fun transitionDelay(value: CSSTimeValue)
    
    // Animations
    fun animation(value: String) // shorthand
    fun animationName(value: String)
    fun animationDuration(value: CSSTimeValue)
    fun animationTimingFunction(value: String)
    fun animationDelay(value: CSSTimeValue)
    fun animationIterationCount(value: String)
    fun animationDirection(value: String)
    fun animationFillMode(value: String)
    fun animationPlayState(value: String)
}

Usage Examples:

style {
    // Simple transition
    transition("all 0.3s ease-in-out")
    
    // Detailed transition
    transitionProperty("opacity, transform")
    transitionDuration(300.ms)
    transitionTimingFunction("cubic-bezier(0.4, 0, 0.2, 1)")
    
    // Animation
    animation("slideIn 1s ease-out")
    animationIterationCount("infinite")
}

CSS Builders and Management

Tools for building and managing CSS rules, stylesheets, and dynamic styling.

/**
 * Interface for building CSS rules
 */
interface StyleSheetBuilder {
    fun rule(selector: String, block: StyleScope.() -> Unit)
    fun media(query: String, block: StyleSheetBuilder.() -> Unit)
    fun keyframes(name: String, block: CSSKeyframesBuilder.() -> Unit)
}

/**
 * CSS stylesheet with generated class names
 */
abstract class StyleSheet {
    protected fun style(block: StyleScope.() -> Unit): String // returns generated class name
}

/**
 * CSS rules holder for managing collections of styles
 */
interface CSSRulesHolder {
    val cssRules: CSSRuleDeclarationList
}

/**
 * Create inline styles within component attributes
 */
fun AttrsScope<*>.style(builder: StyleScope.() -> Unit)

/**
 * Mount CSS rules in component
 */
@Composable
fun Style(cssRules: CSSRuleDeclarationList)

/**
 * Build and mount CSS rules inline
 */
@Composable
fun Style(rulesBuild: StyleSheetBuilder.() -> Unit)

Usage Examples:

// Inline styles
Div({
    style {
        backgroundColor(Color.lightblue)
        padding(16.px)
        borderRadius(8.px)
    }
}) {
    Text("Styled content")
}

// Stylesheet approach
object AppStyles : StyleSheet() {
    val container by style {
        maxWidth(1200.px)
        margin(0.px, "auto".unsafeCast<CSSNumeric>())
        padding(20.px)
    }
    
    val button by style {
        backgroundColor(Color.blue)
        color(Color.white)
        border(0.px)
        padding(8.px, 16.px)
        borderRadius(4.px)
        cursor("pointer")
    }
}

// Using stylesheet classes
Div({ classes(AppStyles.container) }) {
    Button({ classes(AppStyles.button) }) {
        Text("Styled Button")
    }
}

Types

typealias CSSNumeric = CSSNumericValue<*>

sealed class DisplayStyle {
    object block : DisplayStyle()
    object inline : DisplayStyle()
    object flex : DisplayStyle()
    object grid : DisplayStyle()
    object none : DisplayStyle()
    // ... other display values
}

interface CSSRuleDeclarationList
interface CSSKeyframesBuilder
interface CSSTimeValue : CSSNumericValue<CSSUnitTime>

Install with Tessl CLI

npx tessl i tessl/maven-org-jetbrains-compose-foundation--foundation-wasm-js

docs

css-styling.md

event-handling.md

form-controls.md

html-attributes.md

html-elements.md

index.md

tile.json