INotFail/Glint-Runtime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

examples: warm neutral theme (no blue) + cleaner copy

Browse Source
This commit is contained in:
Glint Dev
2026-07-22 14:22:46 +03:00
parent 9ce650a803
commit 66b684e412
2 changed files with 87 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
examples/demo/app.gltm
View File

@@ -1,5 +1,5 @@
// ============================================================================ // ============================================================================
// Glint System Monitor — Full Feature Demonstration // Glint — Full Feature Demonstration
// ============================================================================ // ============================================================================
// Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each, // Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each,
// @on click, variable binding, positioning (fixed, absolute, sticky), // @on click, variable binding, positioning (fixed, absolute, sticky),
@@ -9,9 +9,9 @@
@version 1 @version 1
@style "styles.glts" @style "styles.glts"
// ── 1. Global State ────────────────────────────────────────────────────────── // ── 1. State ─────────────────────────────────────────────────────────────────
@global $title = "System Monitor" @global $title = "My Dashboard"
@global $user = "admin" @global $user = "guest"
@global $cpu = 23.0 @global $cpu = 23.0
@global $memory = 47.0 @global $memory = 47.0
@global $online = true @global $online = true
@@ -27,11 +27,11 @@
!rhei: { !rhei: {
fn pct(v) { v + "%" } fn pct(v) { v + "%" }
fn label(v) { fn label(v) {
if v >= 80.0 { "Critical" } if v >= 80.0 { "High" }
else if v >= 50.0 { "Elevated" } else if v >= 50.0 { "Medium" }
else { "Normal" } else { "Low" }
} }
print("[Monitor] " + nodes.len() + " node channels allocated."); print("[App] " + nodes.len() + " nodes ready.");
} }
// ── 2. Components ──────────────────────────────────────────────────────────── // ── 2. Components ────────────────────────────────────────────────────────────
@@ -49,13 +49,13 @@
@component NodeTile(tag: String, active: Bool) { @component NodeTile(tag: String, active: Bool) {
Panel(class="tile") { Panel(class="tile") {
Panel(class="tile-row") { Panel(class="tile-row") {
Icon "🖥" Icon "◇"
Text(text=$tag) Text(text=$tag)
} }
@if $active { @if $active {
Text(class="tag-on") "● Online" Text(class="tag-on") "● Live"
} @else { } @else {
Text(class="tag-off") "○ Offline" Text(class="tag-off") "○ Off"
} }
} }
} }
@@ -66,8 +66,8 @@ Window(title=$title) {
// ── Sticky Header ──────────────────────────────────────────────────────── // ── Sticky Header ────────────────────────────────────────────────────────
Panel(class="header") { Panel(class="header") {
Panel(class="header-inner") { Panel(class="header-inner") {
Icon "⚙" Icon "◇"
Header "Glint Monitor" Header "Glint"
Panel(width="fill") Panel(width="fill")
Text !rhei: { "👤 " + user } Text !rhei: { "👤 " + user }
} }
@@ -78,40 +78,40 @@ Window(title=$title) {
// ── LEFT COLUMN ────────────────────────────────────────────────────── // ── LEFT COLUMN ──────────────────────────────────────────────────────
Panel(class="col-left") { Panel(class="col-left") {
// Engine Controls // Panel: Controls
Panel(class="card") { Panel(class="card") {
Header "Engine" Header "Controls"
Toggle(label="Online", value=$online) Toggle(label="Online", value=$online)
@if $online { @if $online {
Text(class="ok") "🟢 Running" Text(class="ok") "✓ Running"
} @else { } @else {
Text(class="err") "🔴 Stopped" Text(class="err") "✗ Stopped"
} }
Input(placeholder="Username", value=$user) Input(placeholder="Username", value=$user)
} }
// Gauges // Panel: Metrics
Panel(class="card") { Panel(class="card") {
Header "Metrics" Header "Metrics"
Gauge(name="CPU", val=$cpu) Gauge(name="CPU", val=$cpu)
Gauge(name="Memory", val=$memory) Gauge(name="Memory", val=$memory)
} }
// Threshold Slider // Panel: Threshold
Panel(class="card") { Panel(class="card") {
Header "Alert Threshold" Header "Alert Threshold"
Slider(value=$alert) Slider(value=$alert)
Text !rhei: { "Alert when > " + alert + "%" } Text !rhei: { "Alert when > " + alert + "%" }
} }
// Buttons // Panel: Actions
Panel(class="card") { Panel(class="card") {
Header "Actions" Header "Actions"
Panel(class="btn-row") { Panel(class="btn-row") {
Button(label="Reset CPU") { Button(label="Reset CPU") {
@on click { !rhei: { cpu = 5.0; } } @on click { !rhei: { cpu = 5.0; } }
} }
Button(label="Stress CPU") { Button(label="Max CPU") {
@on click { !rhei: { cpu = 92.0; } } @on click { !rhei: { cpu = 92.0; } }
} }
} }
@@ -120,7 +120,7 @@ Window(title=$title) {
} }
} }
// Node Grid // Panel: Nodes
Panel(class="card") { Panel(class="card") {
Header "Nodes" Header "Nodes"
Panel(direction="grid", columns=2, gap=8) { Panel(direction="grid", columns=2, gap=8) {
@@ -134,7 +134,7 @@ Window(title=$title) {
// ── RIGHT COLUMN ───────────────────────────────────────────────────── // ── RIGHT COLUMN ─────────────────────────────────────────────────────
Panel(class="col-right") { Panel(class="col-right") {
// Typography // Panel: Typography
Panel(class="card") { Panel(class="card") {
Header "Typography" Header "Typography"
Panel(class="demo-row") { Panel(class="demo-row") {
@@ -155,7 +155,7 @@ Window(title=$title) {
} }
} }
// Box Model // Panel: Box Model
Panel(class="card") { Panel(class="card") {
Header "Box Model" Header "Box Model"
Panel(class="box-pad") { Panel(class="box-pad") {
@@ -165,15 +165,15 @@ Window(title=$title) {
Text "margin-top: 16px" Text "margin-top: 16px"
} }
Panel(class="box-combo") { Panel(class="box-combo") {
Text "border: 2px dashed, radius: 10px" Text "border: 2px, radius: 10px"
} }
} }
// Absolute Positioning // Panel: Absolute Position
Panel(class="card") { Panel(class="card") {
Header "Position: Absolute" Header "Position: Absolute"
Panel(class="abs-stage") { Panel(class="abs-stage") {
Text "Stage with an overlay badge:" Text "Stage with overlay badge:"
Panel(class="abs-badge") { Panel(class="abs-badge") {
Panel(class="badge-inner") { Panel(class="badge-inner") {
Text "★ HOT" Text "★ HOT"
@@ -182,7 +182,7 @@ Window(title=$title) {
} }
} }
// Opacity // Panel: Opacity
Panel(class="card") { Panel(class="card") {
Header "Opacity" Header "Opacity"
Panel(class="op-row") { Panel(class="op-row") {
@@ -193,12 +193,12 @@ Window(title=$title) {
} }
} }
// Scroll + Sticky // Panel: Scroll + Sticky
Panel(class="card") { Panel(class="card") {
Header "Scrollable Log" Header "Scrollable Log"
Panel(class="log") { Panel(class="log") {
Panel(class="log-header") { Panel(class="log-header") {
Text "📋 Event Log (sticky)" Text "Event Log (sticky header)"
} }
Text "Init: system boot" Text "Init: system boot"
Text "Info: all modules OK" Text "Info: all modules OK"
@@ -212,16 +212,16 @@ Window(title=$title) {
} }
} }
// Inheritance // Panel: Inheritance
Panel(class="card") { Panel(class="card") {
Header "Style Inheritance" Header "Style Inheritance"
Panel(class="inherit") { Panel(class="inherit") {
Text "Yellow from parent" Text "Warm gold from parent"
Text(class="override") "Pink — override" Text(class="override") "Terracotta — override"
} }
} }
// Display: none demo // Panel: Display None
Panel(class="card") { Panel(class="card") {
Header "Display: None" Header "Display: None"
Panel(class="demo-row") { Panel(class="demo-row") {
@@ -231,7 +231,7 @@ Window(title=$title) {
} }
} }
// Flex Grow // Panel: Flex Grow
Panel(class="card") { Panel(class="card") {
Header "Flex Grow" Header "Flex Grow"
Panel(class="grow-bar") { Panel(class="grow-bar") {
@@ -247,7 +247,7 @@ Window(title=$title) {
@if $notif { @if $notif {
Panel(class="toast") { Panel(class="toast") {
Panel(class="toast-row") { Panel(class="toast-row") {
Text "✅ Monitor ready" Text "✓ App ready"
Button(label="×", class="toast-x") { Button(label="×", class="toast-x") {
@on click { !rhei: { notif = false; } } @on click { !rhei: { notif = false; } }
} }

96
examples/demo/styles.glts
View File

@@ -1,18 +1,20 @@
// ============================================================================ // ============================================================================
// Glint System Monitor — Stylesheet // Glint Design — Warm Neutral Theme
// ============================================================================
// Warm off-white background, soft earth accents, no blue/purple.
// ============================================================================ // ============================================================================
// ── Design Tokens ──────────────────────────────────────────────────────────── // ── Design Tokens ────────────────────────────────────────────────────────────
$bg = #0f0f1a $bg = #f5f2ed
$surface = #1a1a2e $surface = #ede8e0
$card = #222244 $card = #ffffff
$accent = #7c6ff0 $accent = #d4785f
$green = #4ade80 $green = #7a9e7e
$red = #f87171 $red = #c0574a
$yellow = #fbbf24 $yellow = #d9a84d
$text = #e2e8f0 $text = #2e2b28
$muted = #94a3b8 $muted = #8a8580
$border = #2d2d50 $border = #dcd5cc
// ── Mixins ─────────────────────────────────────────────────────────────────── // ── Mixins ───────────────────────────────────────────────────────────────────
@mixin card-base { @mixin card-base {
@@ -46,7 +48,7 @@ Panel {
.header { .header {
position: sticky position: sticky
top: 0px top: 0px
background: $surface background: $card
padding: 8px 20px padding: 8px 20px
border-bottom: 1px solid $border border-bottom: 1px solid $border
width: fill width: fill
@@ -84,11 +86,15 @@ Panel {
@use card-base @use card-base
} }
.card:hover {
border-color: $accent
}
// ── Header Component ───────────────────────────────────────────────────────── // ── Header Component ─────────────────────────────────────────────────────────
Header { Header {
color: $accent color: $accent
font-size: 18px font-size: 18px
padding: 2px padding: 2px 0
} }
Text { Text {
@@ -102,7 +108,7 @@ Label {
// ── Input ──────────────────────────────────────────────────────────────────── // ── Input ────────────────────────────────────────────────────────────────────
Input { Input {
background-color: #16162e background-color: #f0ece6
color: $text color: $text
font-size: 14px font-size: 14px
padding: 10px padding: 10px
@@ -122,19 +128,22 @@ Toggle {
Button { Button {
border-radius: 8px border-radius: 8px
border-width: 1px border-width: 1px
border-color: $accent border-color: $border
padding: 8px 16px padding: 8px 16px
background: $surface background: $surface
color: $text color: $text
} }
Button:hover { Button:hover {
background: #2d2d50 background: $accent
border-color: #a78bfa color: #fff
border-color: $accent
} }
Button:active { Button:active {
background: $accent background: #b8654e
color: #fff
border-color: #b8654e
} }
.btn-outline { .btn-outline {
@@ -144,6 +153,7 @@ Button:active {
} }
.btn-outline:hover { .btn-outline:hover {
background: transparent
border-color: $text border-color: $text
color: $text color: $text
} }
@@ -181,6 +191,7 @@ Slider {
padding: 10px padding: 10px
gap: 6px gap: 6px
align-items: center align-items: center
text-align: center
} }
.tile-row { .tile-row {
@@ -192,7 +203,7 @@ Slider {
.tag-on { .tag-on {
color: $green color: $green
font-size: 12px font-size: 12px
font-weight: bold font-weight: 600
} }
.tag-off { .tag-off {
@@ -203,12 +214,12 @@ Slider {
// ── Status ─────────────────────────────────────────────────────────────────── // ── Status ───────────────────────────────────────────────────────────────────
.ok { .ok {
color: $green color: $green
font-weight: bold font-weight: 600
} }
.err { .err {
color: $red color: $red
font-weight: bold font-weight: 600
} }
// ── Button Row ─────────────────────────────────────────────────────────────── // ── Button Row ───────────────────────────────────────────────────────────────
@@ -237,7 +248,7 @@ Slider {
// ── Text Align ─────────────────────────────────────────────────────────────── // ── Text Align ───────────────────────────────────────────────────────────────
.ta-box { .ta-box {
background: #16162e background: #f0ece6
padding: 6px 10px padding: 6px 10px
border-radius: 6px border-radius: 6px
width: fill width: fill
@@ -251,7 +262,7 @@ Slider {
.lh-box { .lh-box {
direction: vertical direction: vertical
gap: 4px gap: 4px
background: #16162e background: #f0ece6
padding: 10px padding: 10px
border-radius: 6px border-radius: 6px
} }
@@ -262,7 +273,7 @@ Slider {
// ── Box Model ──────────────────────────────────────────────────────────────── // ── Box Model ────────────────────────────────────────────────────────────────
.box-pad { .box-pad {
background: #16162e background: #f0ece6
padding-top: 24px padding-top: 24px
padding-bottom: 8px padding-bottom: 8px
padding-left: 12px padding-left: 12px
@@ -271,14 +282,14 @@ Slider {
} }
.box-margin { .box-margin {
background: #16162e background: #f0ece6
margin-top: 16px margin-top: 16px
padding: 8px padding: 8px
border-radius: 6px border-radius: 6px
} }
.box-combo { .box-combo {
background: #16162e background: #f0ece6
padding: 12px padding: 12px
border-width: 2px border-width: 2px
border-color: $accent border-color: $accent
@@ -288,7 +299,7 @@ Slider {
// ── Absolute Positioning ───────────────────────────────────────────────────── // ── Absolute Positioning ─────────────────────────────────────────────────────
.abs-stage { .abs-stage {
position: relative position: relative
background: #16162e background: #f0ece6
padding: 16px padding: 16px
border-radius: 8px border-radius: 8px
width: fill width: fill
@@ -303,11 +314,11 @@ Slider {
} }
.badge-inner { .badge-inner {
background: $red background: $accent
padding: 3px 8px padding: 3px 10px
border-radius: 4px border-radius: 4px
color: #fff color: #fff
font-weight: bold font-weight: 700
font-size: 10px font-size: 10px
} }
@@ -348,7 +359,7 @@ Slider {
// ── Log / Scroll ───────────────────────────────────────────────────────────── // ── Log / Scroll ─────────────────────────────────────────────────────────────
.log { .log {
@use card-base @use card-base
background: #16162e background: #f0ece6
height: 180px height: 180px
overflow-y: scroll overflow-y: scroll
padding: 8px padding: 8px
@@ -361,7 +372,7 @@ Slider {
background: $surface background: $surface
padding: 6px 10px padding: 6px 10px
border-radius: 4px border-radius: 4px
font-weight: bold font-weight: 600
font-size: 12px font-size: 12px
color: $accent color: $accent
width: fill width: fill
@@ -369,7 +380,7 @@ Slider {
// ── Style Inheritance ──────────────────────────────────────────────────────── // ── Style Inheritance ────────────────────────────────────────────────────────
.inherit { .inherit {
background: #16162e background: #f0ece6
padding: 12px padding: 12px
border-radius: 8px border-radius: 8px
color: $yellow color: $yellow
@@ -383,7 +394,7 @@ Slider {
// ── Display: None ──────────────────────────────────────────────────────────── // ── Display: None ────────────────────────────────────────────────────────────
.vis { .vis {
background: #1e1e3a background: #ede8e0
padding: 8px 14px padding: 8px 14px
border-radius: 6px border-radius: 6px
} }
@@ -407,6 +418,7 @@ Slider {
padding: 8px padding: 8px
border-radius: 4px border-radius: 4px
text-align: center text-align: center
color: #fff
flex-grow: 1 flex-grow: 1
} }
@@ -415,7 +427,7 @@ Slider {
padding: 8px padding: 8px
border-radius: 4px border-radius: 4px
text-align: center text-align: center
color: #000 color: #fff
flex-grow: 2 flex-grow: 2
} }
@@ -427,8 +439,8 @@ Slider {
background: $green background: $green
padding: 10px 16px padding: 10px 16px
border-radius: 8px border-radius: 8px
color: #000 color: #fff
font-weight: bold font-weight: 600
} }
.toast-row { .toast-row {
@@ -441,19 +453,13 @@ Slider {
background: transparent background: transparent
border-width: 0px border-width: 0px
padding: 0px padding: 0px
color: #000 color: #fff
font-size: 18px font-size: 18px
} }
// ── Comma-separated selectors ──────────────────────────────────────────────── // ── Comma-separated selectors ────────────────────────────────────────────────
.warn-text, .info-text { .warn-text, .info-text {
font-weight: bold font-weight: 600
padding: 6px 10px padding: 6px 10px
border-radius: 4px border-radius: 4px
} }
// ── Hover pseudo on cards ────────────────────────────────────────────────────
.card:hover {
border-color: $accent
border-width: 1px
}