Skip to main content
Version: 0.0.1

rayquiro.ui

rayquiro.ui is the higher-level Windows UI framework built into RayQuiro.

It is best for:

  • installers
  • launchers
  • release dashboards
  • setup flows
  • status screens with one or two actions

Import​

import rayquiro.ui as ui;

Runtime Model​

You build a screen in steps:

  1. create the window with ui.init(...)
  2. optionally apply a theme with ui.style(...)
  3. fill content with hero, status, info, text
  4. add buttons with ui.action(...) or ui.button(...)
  5. call ui.run()

ui.run() returns the selected action id.

API Reference​

ui.init(title, width, height)​

Creates the window and resets the current content.

Defaults:

  • title: "RayQuiro"
  • width: 920
  • height: 620

ui.style(cssLikeText)​

Applies a CSS-like theme string.

ui.hero(title, subtitle)​

Sets the main hero header area.

ui.status(title, body)​

Sets the status box content.

ui.info(label, value)​

Adds a two-column info row.

ui.text(text, role)​

Adds a text block.

Common roles:

  • "body"
  • "muted"
  • "caption"
  • "title"

ui.action(id, label, variant)​

ui.button(id, label, variant)​

Adds a clickable action button.

Common variants:

  • "primary"
  • "secondary"

ui.button(...) is an alias of ui.action(...).

ui.run()​

Shows the window and blocks until the user closes it or clicks a button.

Returns the selected action id as a string.

Full Example​

import rayquiro.ui as ui;

var action = "close";

ui.init("RayQuiro Installer", 960, 640);
ui.style("
window { background: #08111d; background-end: #0f766e; font: Segoe UI; }
card { background: #f7fbff; border: #d6e6f4; radius: 30; max-width: 860; }
badge { background: #0f9bd7; color: #ffffff; }
title { color: #0b1d32; size: 38; align: center; }
subtitle { color: #4b617f; size: 20; align: center; }
status-box { background: #e8f4fb; border: #cfe4f1; }
status-title { color: #14324f; size: 22; align: left; }
status-body { color: #3e5670; size: 18; align: left; }
text { color: #22374c; size: 18; align: left; }
text.muted { color: #68819b; size: 17; }
button.primary { background: #0f766e; background-hover: #11998f; color: #ffffff; radius: 20; align: center; }
button.secondary { background: #edf4f8; border: #d2e0ea; color: #14324f; radius: 20; align: center; }
");
ui.hero("RayQuiro 0.0.1", "Installer and launcher UI built in RayQuiro.");
ui.status("Ready", "Choose what to do next.");
ui.info("Runtime", "Interpreter");
ui.info("Project", "RayQuiro");
ui.text("You can fully theme this screen from RayQuiro code.", "body");
ui.text("The button result comes back from ui.run().", "muted");
ui.button("download", "Download", "primary");
ui.button("close", "Close", "secondary");

action = ui.run();
print("selected action:", action);

Style Selectors​

The current CSS-like selectors are:

  • window
  • card
  • badge
  • title
  • hero
  • subtitle
  • status-box
  • status-title
  • status-body
  • label
  • value
  • text
  • text.body
  • text.muted
  • button
  • button.primary
  • button.secondary

Supported Style Properties​

window​

  • background
  • background-end
  • font

card​

  • background
  • border
  • radius
  • max-width

badge​

  • background
  • color

title and hero​

  • color
  • size
  • align

subtitle​

  • color
  • size
  • align

status-box​

  • background
  • border

status-title​

  • color
  • size
  • align

status-body​

  • color
  • size
  • align

label​

  • color
  • size

value​

  • color
  • size

text and text.body​

  • color
  • size
  • align

text.muted​

  • color
  • size

button and button.primary​

  • background
  • background-hover
  • color
  • border
  • radius
  • align

button.secondary​

  • background
  • background-hover
  • color
  • border
  • radius
  • align

Alignment Values​

Supported align values:

  • left
  • center
  • right

Notes​

  • rayquiro.ui is Windows-first in 0.0.1.
  • The runtime centers the card layout automatically.
  • ui.run() returns "close" if the window is simply closed.