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

2026-07-22 14:22:46 +03:00
parent 9ce650a803
commit 66b684e412
2 changed files with 87 additions and 81 deletions
--- 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; } }
                }
--- 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
-}