#style Region

Planned — design subject to change

This feature is designed but not yet implemented. The syntax and behavior described here represent the target specification.

Purpose

The #style region provides a CSS-like language for styling components. It’s tape-flavored: variables, imports, and functions work, but the syntax is property declarations.

tape
#style
import colors from "theme#style";

Counter {
    widgets.Label {
        font-size: 24;
        color: colors.text_primary;
    }
    widgets.Button {
        bg: colors.surface;
        border-radius: 4;
    }
}

Style variables

tape
#style
var primary_color: color = #E09050;
var font_size: i64 = 14;

Button {
    color: primary_color;
    font-size: font_size;
}

Variables can be changed at runtime to implement theming.

Style constants

tape
const SPACING: i64 = 8;
const RADIUS: i64 = 4;

State pseudo-selectors

tape
Button:hovered {
    bg: #333333;
    color: #FFFFFF;
}

Button:pressed {
    bg: #555555;
    transform-scale: 0.98;
}

Input:focused {
    border-color: #E09050;
}

Transitions

tape
Button {
    bg: #222222;
    transition bg 200ms ease;
    transition transform-scale 100ms ease_out;
}

Keyframe animations

tape
@keyframes fade_in {
    0% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

Dialog {
    animation: fade_in 300ms ease;
}

Style functions

tape
pub fn set_dark_mode() {
    primary_color = #BB7040;
    font_size = 15;
}

pub fn set_light_mode() {
    primary_color = #E09050;
    font_size = 14;
}

Callable from #code as style.set_dark_mode().

Last modified: