From 66b684e412f84d901721bbf9585b560333e00cb9 Mon Sep 17 00:00:00 2001
From: Glint Dev <dev@glint.local>
Date: Wed, 22 Jul 2026 14:22:46 +0300
Subject: [PATCH] examples: warm neutral theme (no blue) + cleaner copy

---
 examples/demo/app.gltm    | 72 ++++++++++++++---------------
 examples/demo/styles.glts | 96 +++++++++++++++++++++------------------
 2 files changed, 87 insertions(+), 81 deletions(-)

diff --git a/examples/demo/app.gltm b/examples/demo/app.gltm
index 1667d3e..ccd879c 100644
--- a/examples/demo/app.gltm
+++ b/examples/demo/app.gltm
@@ -1,5 +1,5 @@
 // ============================================================================
-// Glint System Monitor — Full Feature Demonstration
+// Glint — Full Feature Demonstration
 // ============================================================================
 // Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each,
 // @on click, variable binding, positioning (fixed, absolute, sticky),
@@ -9,9 +9,9 @@
 @version 1
 @style "styles.glts"
 
-// ── 1. Global State ──────────────────────────────────────────────────────────
-@global $title   = "System Monitor"
-@global $user    = "admin"
+// ── 1. State ─────────────────────────────────────────────────────────────────
+@global $title   = "My Dashboard"
+@global $user    = "guest"
 @global $cpu     = 23.0
 @global $memory  = 47.0
 @global $online  = true
@@ -27,11 +27,11 @@
 !rhei: {
     fn pct(v) { v + "%" }
     fn label(v) {
-        if      v >= 80.0 { "Critical" }
-        else if v >= 50.0 { "Elevated" }
-        else              { "Normal"   }
+        if      v >= 80.0 { "High" }
+        else if v >= 50.0 { "Medium" }
+        else              { "Low"   }
     }
-    print("[Monitor] " + nodes.len() + " node channels allocated.");
+    print("[App] " + nodes.len() + " nodes ready.");
 }
 
 // ── 2. Components ────────────────────────────────────────────────────────────
@@ -49,13 +49,13 @@
 @component NodeTile(tag: String, active: Bool) {
     Panel(class="tile") {
         Panel(class="tile-row") {
-            Icon "🖥"
+            Icon "◇"
             Text(text=$tag)
         }
         @if $active {
-            Text(class="tag-on") "● Online"
+            Text(class="tag-on") "● Live"
         } @else {
-            Text(class="tag-off") "○ Offline"
+            Text(class="tag-off") "○ Off"
         }
     }
 }
@@ -66,8 +66,8 @@ Window(title=$title) {
     // ── Sticky Header ────────────────────────────────────────────────────────
     Panel(class="header") {
         Panel(class="header-inner") {
-            Icon "⚙"
-            Header "Glint Monitor"
+            Icon "◇"
+            Header "Glint"
             Panel(width="fill")
             Text !rhei: { "👤 " + user }
         }
@@ -78,40 +78,40 @@ Window(title=$title) {
         // ── LEFT COLUMN ──────────────────────────────────────────────────────
         Panel(class="col-left") {
 
-            // Engine Controls
+            // Panel: Controls
             Panel(class="card") {
-                Header "Engine"
+                Header "Controls"
                 Toggle(label="Online", value=$online)
                 @if $online {
-                    Text(class="ok") "🟢 Running"
+                    Text(class="ok") "✓ Running"
                 } @else {
-                    Text(class="err") "🔴 Stopped"
+                    Text(class="err") "✗ Stopped"
                 }
                 Input(placeholder="Username", value=$user)
             }
 
-            // Gauges
+            // Panel: Metrics
             Panel(class="card") {
                 Header "Metrics"
                 Gauge(name="CPU",    val=$cpu)
                 Gauge(name="Memory", val=$memory)
             }
 
-            // Threshold Slider
+            // Panel: Threshold
             Panel(class="card") {
                 Header "Alert Threshold"
                 Slider(value=$alert)
                 Text !rhei: { "Alert when > " + alert + "%" }
             }
 
-            // Buttons
+            // Panel: Actions
             Panel(class="card") {
                 Header "Actions"
                 Panel(class="btn-row") {
                     Button(label="Reset CPU") {
                         @on click { !rhei: { cpu = 5.0; } }
                     }
-                    Button(label="Stress CPU") {
+                    Button(label="Max CPU") {
                         @on click { !rhei: { cpu = 92.0; } }
                     }
                 }
@@ -120,7 +120,7 @@ Window(title=$title) {
                 }
             }
 
-            // Node Grid
+            // Panel: Nodes
             Panel(class="card") {
                 Header "Nodes"
                 Panel(direction="grid", columns=2, gap=8) {
@@ -134,7 +134,7 @@ Window(title=$title) {
         // ── RIGHT COLUMN ─────────────────────────────────────────────────────
         Panel(class="col-right") {
 
-            // Typography
+            // Panel: Typography
             Panel(class="card") {
                 Header "Typography"
                 Panel(class="demo-row") {
@@ -155,7 +155,7 @@ Window(title=$title) {
                 }
             }
 
-            // Box Model
+            // Panel: Box Model
             Panel(class="card") {
                 Header "Box Model"
                 Panel(class="box-pad") {
@@ -165,15 +165,15 @@ Window(title=$title) {
                     Text "margin-top: 16px"
                 }
                 Panel(class="box-combo") {
-                    Text "border: 2px dashed, radius: 10px"
+                    Text "border: 2px, radius: 10px"
                 }
             }
 
-            // Absolute Positioning
+            // Panel: Absolute Position
             Panel(class="card") {
                 Header "Position: Absolute"
                 Panel(class="abs-stage") {
-                    Text "Stage with an overlay badge:"
+                    Text "Stage with overlay badge:"
                     Panel(class="abs-badge") {
                         Panel(class="badge-inner") {
                             Text "★ HOT"
@@ -182,7 +182,7 @@ Window(title=$title) {
                 }
             }
 
-            // Opacity
+            // Panel: Opacity
             Panel(class="card") {
                 Header "Opacity"
                 Panel(class="op-row") {
@@ -193,12 +193,12 @@ Window(title=$title) {
                 }
             }
 
-            // Scroll + Sticky
+            // Panel: Scroll + Sticky
             Panel(class="card") {
                 Header "Scrollable Log"
                 Panel(class="log") {
                     Panel(class="log-header") {
-                        Text "📋 Event Log (sticky)"
+                        Text "Event Log (sticky header)"
                     }
                     Text "Init: system boot"
                     Text "Info: all modules OK"
@@ -212,16 +212,16 @@ Window(title=$title) {
                 }
             }
 
-            // Inheritance
+            // Panel: Inheritance
             Panel(class="card") {
                 Header "Style Inheritance"
                 Panel(class="inherit") {
-                    Text "Yellow from parent"
-                    Text(class="override") "Pink — override"
+                    Text "Warm gold from parent"
+                    Text(class="override") "Terracotta — override"
                 }
             }
 
-            // Display: none demo
+            // Panel: Display None
             Panel(class="card") {
                 Header "Display: None"
                 Panel(class="demo-row") {
@@ -231,7 +231,7 @@ Window(title=$title) {
                 }
             }
 
-            // Flex Grow
+            // Panel: Flex Grow
             Panel(class="card") {
                 Header "Flex Grow"
                 Panel(class="grow-bar") {
@@ -247,7 +247,7 @@ Window(title=$title) {
     @if $notif {
         Panel(class="toast") {
             Panel(class="toast-row") {
-                Text "✅ Monitor ready"
+                Text "✓ App ready"
                 Button(label="×", class="toast-x") {
                     @on click { !rhei: { notif = false; } }
                 }
diff --git a/examples/demo/styles.glts b/examples/demo/styles.glts
index 0f28c0a..dac88b9 100644
--- a/examples/demo/styles.glts
+++ b/examples/demo/styles.glts
@@ -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 ────────────────────────────────────────────────────────────
-$bg       = #0f0f1a
-$surface  = #1a1a2e
-$card     = #222244
-$accent   = #7c6ff0
-$green    = #4ade80
-$red      = #f87171
-$yellow   = #fbbf24
-$text     = #e2e8f0
-$muted    = #94a3b8
-$border   = #2d2d50
+$bg       = #f5f2ed
+$surface  = #ede8e0
+$card     = #ffffff
+$accent   = #d4785f
+$green    = #7a9e7e
+$red      = #c0574a
+$yellow   = #d9a84d
+$text     = #2e2b28
+$muted    = #8a8580
+$border   = #dcd5cc
 
 // ── Mixins ───────────────────────────────────────────────────────────────────
 @mixin card-base {
@@ -46,7 +48,7 @@ Panel {
 .header {
     position: sticky
     top: 0px
-    background: $surface
+    background: $card
     padding: 8px 20px
     border-bottom: 1px solid $border
     width: fill
@@ -84,11 +86,15 @@ Panel {
     @use card-base
 }
 
+.card:hover {
+    border-color: $accent
+}
+
 // ── Header Component ─────────────────────────────────────────────────────────
 Header {
     color: $accent
     font-size: 18px
-    padding: 2px
+    padding: 2px 0
 }
 
 Text {
@@ -102,7 +108,7 @@ Label {
 
 // ── Input ────────────────────────────────────────────────────────────────────
 Input {
-    background-color: #16162e
+    background-color: #f0ece6
     color: $text
     font-size: 14px
     padding: 10px
@@ -122,19 +128,22 @@ Toggle {
 Button {
     border-radius: 8px
     border-width: 1px
-    border-color: $accent
+    border-color: $border
     padding: 8px 16px
     background: $surface
     color: $text
 }
 
 Button:hover {
-    background: #2d2d50
-    border-color: #a78bfa
+    background: $accent
+    color: #fff
+    border-color: $accent
 }
 
 Button:active {
-    background: $accent
+    background: #b8654e
+    color: #fff
+    border-color: #b8654e
 }
 
 .btn-outline {
@@ -144,6 +153,7 @@ Button:active {
 }
 
 .btn-outline:hover {
+    background: transparent
     border-color: $text
     color: $text
 }
@@ -181,6 +191,7 @@ Slider {
     padding: 10px
     gap: 6px
     align-items: center
+    text-align: center
 }
 
 .tile-row {
@@ -192,7 +203,7 @@ Slider {
 .tag-on {
     color: $green
     font-size: 12px
-    font-weight: bold
+    font-weight: 600
 }
 
 .tag-off {
@@ -203,12 +214,12 @@ Slider {
 // ── Status ───────────────────────────────────────────────────────────────────
 .ok {
     color: $green
-    font-weight: bold
+    font-weight: 600
 }
 
 .err {
     color: $red
-    font-weight: bold
+    font-weight: 600
 }
 
 // ── Button Row ───────────────────────────────────────────────────────────────
@@ -237,7 +248,7 @@ Slider {
 
 // ── Text Align ───────────────────────────────────────────────────────────────
 .ta-box {
-    background: #16162e
+    background: #f0ece6
     padding: 6px 10px
     border-radius: 6px
     width: fill
@@ -251,7 +262,7 @@ Slider {
 .lh-box {
     direction: vertical
     gap: 4px
-    background: #16162e
+    background: #f0ece6
     padding: 10px
     border-radius: 6px
 }
@@ -262,7 +273,7 @@ Slider {
 
 // ── Box Model ────────────────────────────────────────────────────────────────
 .box-pad {
-    background: #16162e
+    background: #f0ece6
     padding-top: 24px
     padding-bottom: 8px
     padding-left: 12px
@@ -271,14 +282,14 @@ Slider {
 }
 
 .box-margin {
-    background: #16162e
+    background: #f0ece6
     margin-top: 16px
     padding: 8px
     border-radius: 6px
 }
 
 .box-combo {
-    background: #16162e
+    background: #f0ece6
     padding: 12px
     border-width: 2px
     border-color: $accent
@@ -288,7 +299,7 @@ Slider {
 // ── Absolute Positioning ─────────────────────────────────────────────────────
 .abs-stage {
     position: relative
-    background: #16162e
+    background: #f0ece6
     padding: 16px
     border-radius: 8px
     width: fill
@@ -303,11 +314,11 @@ Slider {
 }
 
 .badge-inner {
-    background: $red
-    padding: 3px 8px
+    background: $accent
+    padding: 3px 10px
     border-radius: 4px
     color: #fff
-    font-weight: bold
+    font-weight: 700
     font-size: 10px
 }
 
@@ -348,7 +359,7 @@ Slider {
 // ── Log / Scroll ─────────────────────────────────────────────────────────────
 .log {
     @use card-base
-    background: #16162e
+    background: #f0ece6
     height: 180px
     overflow-y: scroll
     padding: 8px
@@ -361,7 +372,7 @@ Slider {
     background: $surface
     padding: 6px 10px
     border-radius: 4px
-    font-weight: bold
+    font-weight: 600
     font-size: 12px
     color: $accent
     width: fill
@@ -369,7 +380,7 @@ Slider {
 
 // ── Style Inheritance ────────────────────────────────────────────────────────
 .inherit {
-    background: #16162e
+    background: #f0ece6
     padding: 12px
     border-radius: 8px
     color: $yellow
@@ -383,7 +394,7 @@ Slider {
 
 // ── Display: None ────────────────────────────────────────────────────────────
 .vis {
-    background: #1e1e3a
+    background: #ede8e0
     padding: 8px 14px
     border-radius: 6px
 }
@@ -407,6 +418,7 @@ Slider {
     padding: 8px
     border-radius: 4px
     text-align: center
+    color: #fff
     flex-grow: 1
 }
 
@@ -415,7 +427,7 @@ Slider {
     padding: 8px
     border-radius: 4px
     text-align: center
-    color: #000
+    color: #fff
     flex-grow: 2
 }
 
@@ -427,8 +439,8 @@ Slider {
     background: $green
     padding: 10px 16px
     border-radius: 8px
-    color: #000
-    font-weight: bold
+    color: #fff
+    font-weight: 600
 }
 
 .toast-row {
@@ -441,19 +453,13 @@ Slider {
     background: transparent
     border-width: 0px
     padding: 0px
-    color: #000
+    color: #fff
     font-size: 18px
 }
 
 // ── Comma-separated selectors ────────────────────────────────────────────────
 .warn-text, .info-text {
-    font-weight: bold
+    font-weight: 600
     padding: 6px 10px
     border-radius: 4px
 }
-
-// ── Hover pseudo on cards ────────────────────────────────────────────────────
-.card:hover {
-    border-color: $accent
-    border-width: 1px
-}