From ec73dcabb804d21907501b5d11626cdc828b0036 Mon Sep 17 00:00:00 2001
From: Glint Dev <dev@glint.local>
Date: Wed, 22 Jul 2026 14:21:12 +0300
Subject: [PATCH] examples: add demo stylesheet with comprehensive style
 features

---
 examples/demo/styles.glts | 459 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 459 insertions(+)
 create mode 100644 examples/demo/styles.glts

diff --git a/examples/demo/styles.glts b/examples/demo/styles.glts
new file mode 100644
index 0000000..0f28c0a
--- /dev/null
+++ b/examples/demo/styles.glts
@@ -0,0 +1,459 @@
+// ============================================================================
+// Glint System Monitor — Stylesheet
+// ============================================================================
+
+// ── Design Tokens ────────────────────────────────────────────────────────────
+$bg       = #0f0f1a
+$surface  = #1a1a2e
+$card     = #222244
+$accent   = #7c6ff0
+$green    = #4ade80
+$red      = #f87171
+$yellow   = #fbbf24
+$text     = #e2e8f0
+$muted    = #94a3b8
+$border   = #2d2d50
+
+// ── Mixins ───────────────────────────────────────────────────────────────────
+@mixin card-base {
+    background: $card
+    border-color: $border
+    border-width: 1px
+    border-radius: 10px
+    padding: 16px
+    gap: 12px
+}
+
+@mixin text-body {
+    color: $text
+    font-size: 14px
+}
+
+// ── Globals ──────────────────────────────────────────────────────────────────
+Window {
+    background: $bg
+}
+
+Panel {
+    background: transparent
+    border-width: 0px
+    padding: 0px
+    gap: 12px
+    direction: vertical
+}
+
+// ── Header ───────────────────────────────────────────────────────────────────
+.header {
+    position: sticky
+    top: 0px
+    background: $surface
+    padding: 8px 20px
+    border-bottom: 1px solid $border
+    width: fill
+    z-index: 100
+}
+
+.header-inner {
+    direction: horizontal
+    align-items: center
+    gap: 10px
+}
+
+// ── Layout ───────────────────────────────────────────────────────────────────
+.body {
+    direction: horizontal
+    padding: 16px
+    gap: 16px
+    width: fill
+}
+
+.col-left {
+    direction: vertical
+    gap: 14px
+    width: 45%
+}
+
+.col-right {
+    direction: vertical
+    gap: 14px
+    width: 55%
+}
+
+// ── Card ─────────────────────────────────────────────────────────────────────
+.card {
+    @use card-base
+}
+
+// ── Header Component ─────────────────────────────────────────────────────────
+Header {
+    color: $accent
+    font-size: 18px
+    padding: 2px
+}
+
+Text {
+    @use text-body
+}
+
+Label {
+    color: $muted
+    font-size: 12px
+}
+
+// ── Input ────────────────────────────────────────────────────────────────────
+Input {
+    background-color: #16162e
+    color: $text
+    font-size: 14px
+    padding: 10px
+    border-radius: 8px
+    border-width: 1px
+    border-color: $border
+    width: fill
+}
+
+// ── Toggle ───────────────────────────────────────────────────────────────────
+Toggle {
+    color: $text
+    font-size: 14px
+}
+
+// ── Button ───────────────────────────────────────────────────────────────────
+Button {
+    border-radius: 8px
+    border-width: 1px
+    border-color: $accent
+    padding: 8px 16px
+    background: $surface
+    color: $text
+}
+
+Button:hover {
+    background: #2d2d50
+    border-color: #a78bfa
+}
+
+Button:active {
+    background: $accent
+}
+
+.btn-outline {
+    background: transparent
+    border-color: $muted
+    color: $muted
+}
+
+.btn-outline:hover {
+    border-color: $text
+    color: $text
+}
+
+// ── ProgressBar ──────────────────────────────────────────────────────────────
+ProgressBar {
+    width: fill
+}
+
+// ── Slider ───────────────────────────────────────────────────────────────────
+Slider {
+    width: fill
+}
+
+// ── Gauge Component ──────────────────────────────────────────────────────────
+.gauge {
+    direction: vertical
+    gap: 6px
+}
+
+.gauge-row {
+    direction: horizontal
+    gap: 8px
+    align-items: center
+}
+
+.gauge-label {
+    font-size: 12px
+    color: $muted
+}
+
+// ── Tile Component ───────────────────────────────────────────────────────────
+.tile {
+    @use card-base
+    padding: 10px
+    gap: 6px
+    align-items: center
+}
+
+.tile-row {
+    direction: horizontal
+    gap: 6px
+    align-items: center
+}
+
+.tag-on {
+    color: $green
+    font-size: 12px
+    font-weight: bold
+}
+
+.tag-off {
+    color: $muted
+    font-size: 12px
+}
+
+// ── Status ───────────────────────────────────────────────────────────────────
+.ok {
+    color: $green
+    font-weight: bold
+}
+
+.err {
+    color: $red
+    font-weight: bold
+}
+
+// ── Button Row ───────────────────────────────────────────────────────────────
+.btn-row {
+    direction: horizontal
+    gap: 8px
+}
+
+// ── Demo Rows ────────────────────────────────────────────────────────────────
+.demo-row {
+    direction: horizontal
+    gap: 12px
+    align-items: center
+}
+
+.demo-col {
+    direction: vertical
+    gap: 6px
+}
+
+// ── Font Weight ──────────────────────────────────────────────────────────────
+.fw-300 { font-weight: 300 }
+.fw-400 { font-weight: 400 }
+.fw-700 { font-weight: 700 }
+.fw-900 { font-weight: 900 }
+
+// ── Text Align ───────────────────────────────────────────────────────────────
+.ta-box {
+    background: #16162e
+    padding: 6px 10px
+    border-radius: 6px
+    width: fill
+}
+
+.ta-l { text-align: left }
+.ta-c { text-align: center }
+.ta-r { text-align: right }
+
+// ── Line Height ──────────────────────────────────────────────────────────────
+.lh-box {
+    direction: vertical
+    gap: 4px
+    background: #16162e
+    padding: 10px
+    border-radius: 6px
+}
+
+.lh-08 { line-height: 0.8 }
+.lh-12 { line-height: 1.2 }
+.lh-20 { line-height: 2.0 }
+
+// ── Box Model ────────────────────────────────────────────────────────────────
+.box-pad {
+    background: #16162e
+    padding-top: 24px
+    padding-bottom: 8px
+    padding-left: 12px
+    padding-right: 12px
+    border-radius: 6px
+}
+
+.box-margin {
+    background: #16162e
+    margin-top: 16px
+    padding: 8px
+    border-radius: 6px
+}
+
+.box-combo {
+    background: #16162e
+    padding: 12px
+    border-width: 2px
+    border-color: $accent
+    border-radius: 10px
+}
+
+// ── Absolute Positioning ─────────────────────────────────────────────────────
+.abs-stage {
+    position: relative
+    background: #16162e
+    padding: 16px
+    border-radius: 8px
+    width: fill
+    min-height: 50px
+    gap: 6px
+}
+
+.abs-badge {
+    position: absolute
+    top: -8px
+    right: 8px
+}
+
+.badge-inner {
+    background: $red
+    padding: 3px 8px
+    border-radius: 4px
+    color: #fff
+    font-weight: bold
+    font-size: 10px
+}
+
+// ── Opacity ──────────────────────────────────────────────────────────────────
+.op-row {
+    direction: horizontal
+    gap: 10px
+}
+
+.op-30 {
+    background: $accent
+    padding: 8px 12px
+    border-radius: 6px
+    opacity: 0.3
+}
+
+.op-60 {
+    background: $accent
+    padding: 8px 12px
+    border-radius: 6px
+    opacity: 0.6
+}
+
+.op-85 {
+    background: $accent
+    padding: 8px 12px
+    border-radius: 6px
+    opacity: 0.85
+}
+
+.op-100 {
+    background: $accent
+    padding: 8px 12px
+    border-radius: 6px
+    opacity: 1.0
+}
+
+// ── Log / Scroll ─────────────────────────────────────────────────────────────
+.log {
+    @use card-base
+    background: #16162e
+    height: 180px
+    overflow-y: scroll
+    padding: 8px
+    gap: 4px
+}
+
+.log-header {
+    position: sticky
+    top: 0px
+    background: $surface
+    padding: 6px 10px
+    border-radius: 4px
+    font-weight: bold
+    font-size: 12px
+    color: $accent
+    width: fill
+}
+
+// ── Style Inheritance ────────────────────────────────────────────────────────
+.inherit {
+    background: #16162e
+    padding: 12px
+    border-radius: 8px
+    color: $yellow
+    font-size: 16px
+}
+
+.override {
+    color: $red
+    font-size: 12px
+}
+
+// ── Display: None ────────────────────────────────────────────────────────────
+.vis {
+    background: #1e1e3a
+    padding: 8px 14px
+    border-radius: 6px
+}
+
+.hid {
+    background: $red
+    padding: 8px 14px
+    border-radius: 6px
+    display: none
+}
+
+// ── Flex Grow ────────────────────────────────────────────────────────────────
+.grow-bar {
+    direction: horizontal
+    gap: 6px
+    width: fill
+}
+
+.grow-1 {
+    background: $accent
+    padding: 8px
+    border-radius: 4px
+    text-align: center
+    flex-grow: 1
+}
+
+.grow-2 {
+    background: $green
+    padding: 8px
+    border-radius: 4px
+    text-align: center
+    color: #000
+    flex-grow: 2
+}
+
+// ── Toast ────────────────────────────────────────────────────────────────────
+.toast {
+    position: fixed
+    top: 16px
+    right: 16px
+    background: $green
+    padding: 10px 16px
+    border-radius: 8px
+    color: #000
+    font-weight: bold
+}
+
+.toast-row {
+    direction: horizontal
+    gap: 10px
+    align-items: center
+}
+
+.toast-x {
+    background: transparent
+    border-width: 0px
+    padding: 0px
+    color: #000
+    font-size: 18px
+}
+
+// ── Comma-separated selectors ────────────────────────────────────────────────
+.warn-text, .info-text {
+    font-weight: bold
+    padding: 6px 10px
+    border-radius: 4px
+}
+
+// ── Hover pseudo on cards ────────────────────────────────────────────────────
+.card:hover {
+    border-color: $accent
+    border-width: 1px
+}