Glint-Runtime/examples/demo/styles.glts

// ============================================================================
// Glint Design — Warm Neutral Theme
// ============================================================================
// Warm off-white background, soft earth accents, no blue/purple.
// ============================================================================

// ── Design Tokens ────────────────────────────────────────────────────────────
$bg       = #f5f2ed
$surface  = #ede8e0
$card     = #ffffff
$accent   = #d4785f
$green    = #7a9e7e
$red      = #c0574a
$yellow   = #d9a84d
$text     = #2e2b28
$muted    = #8a8580
$border   = #dcd5cc

// ── Mixins ───────────────────────────────────────────────────────────────────
@mixin card-base {
    background: $card
    border-color: $border
    border-width: 1px
    border-radius: 10px
    padding: 12px
    gap: 8px
}

@mixin text-body {
    color: $text
    font-size: 14px
}

// ── Globals ──────────────────────────────────────────────────────────────────
Window {
    background: $bg
    height: 100vh
}

Panel {
    background: transparent
    border-width: 0px
    padding: 0px
    gap: 12px
    direction: vertical
}

// ── Header ───────────────────────────────────────────────────────────────────
.header {
    background: $card
    padding: 8px 20px
    border-bottom: 1px solid $border
    width: fill
}

.header-inner {
    direction: horizontal
    align-items: center
    gap: 10px
}

// ── Layout ───────────────────────────────────────────────────────────────────
.body-scroll {
    overflow-y: auto
    flex-grow: 1
    padding: 0px
    gap: 0px
}

.body {
    direction: horizontal
    padding: 12px
    gap: 12px
    width: fill
}

.col-left {
    direction: vertical
    gap: 10px
    flex-grow: 2
}

.col-right {
    direction: vertical
    gap: 10px
    flex-grow: 3
}

// ── Card ─────────────────────────────────────────────────────────────────────
.card {
    @use card-base
}

// ── Header Component ─────────────────────────────────────────────────────────
Header {
    color: $accent
    font-size: 18px
    padding: 2px 0
}

Text {
    @use text-body
}

Label {
    color: $muted
    font-size: 12px
}

// ── Input ────────────────────────────────────────────────────────────────────
Input {
    background-color: #f0ece6
    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: $border
    padding: 8px 16px
    background: $surface
    color: $text
}

Button:hover {
    background: $accent
    color: #fff
    border-color: $accent
}

Button:active {
    background: #b8654e
    color: #fff
    border-color: #b8654e
}

.btn-outline {
    background: transparent
    border-color: $muted
    color: $muted
}

.btn-outline:hover {
    background: transparent
    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
    text-align: center
}

.tile-row {
    direction: horizontal
    gap: 6px
    align-items: center
}

.tag-on {
    color: $green
    font-size: 12px
    font-weight: 600
}

.tag-off {
    color: $muted
    font-size: 12px
}

// ── Status ───────────────────────────────────────────────────────────────────
.ok {
    color: $green
    font-weight: 600
}

.err {
    color: $red
    font-weight: 600
}

// ── 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: #f0ece6
    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: #f0ece6
    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: #f0ece6
    padding-top: 24px
    padding-bottom: 8px
    padding-left: 12px
    padding-right: 12px
    border-radius: 6px
}

.box-margin {
    background: #f0ece6
    margin-top: 16px
    padding: 8px
    border-radius: 6px
}

.box-combo {
    background: #f0ece6
    padding: 12px
    border-width: 2px
    border-color: $accent
    border-radius: 10px
}

// ── Absolute Positioning ─────────────────────────────────────────────────────
.abs-stage {
    position: relative
    background: #f0ece6
    padding: 16px
    border-radius: 8px
    width: fill
    min-height: 50px
    gap: 6px
}

.abs-badge {
    position: absolute
    top: -8px
    right: 8px
}

.badge-inner {
    background: $accent
    padding: 3px 10px
    border-radius: 4px
    color: #fff
    font-weight: 700
    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 {
    background: #f0ece6
    border-width: 1px
    border-color: $border
    border-radius: 10px
    height: 180px
    overflow-y: scroll
    padding: 4px
    gap: 2px
}

.log-header {
    background: $surface
    padding: 6px 10px
    border-radius: 4px
    font-weight: 600
    font-size: 12px
    color: $accent
    width: fill
}

// Note: position:sticky is not supported by Iced. "Always visible header above
// scrollable content" is the working pattern.
// ═══════════════════════════════════════════════════════════════════════════════

// ── Style Inheritance ────────────────────────────────────────────────────────
.inherit {
    background: #f0ece6
    padding: 12px
    border-radius: 8px
    color: $yellow
    font-size: 16px
}

.override {
    color: $red
    font-size: 12px
}

// ── Display: None ────────────────────────────────────────────────────────────
.vis {
    background: #ede8e0
    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
    color: #fff
    flex-grow: 1
}

.grow-2 {
    background: $green
    padding: 8px
    border-radius: 4px
    text-align: center
    color: #fff
    flex-grow: 2
}

// ── Toast ────────────────────────────────────────────────────────────────────
.toast {
    position: fixed
    top: 16px
    right: 16px
    background: $green
    padding: 10px 16px
    border-radius: 8px
    color: #fff
    font-weight: 600
}

.toast-row {
    direction: horizontal
    gap: 10px
    align-items: center
}

.toast-x {
    background: transparent
    border-width: 0px
    padding: 0px
    color: #fff
    font-size: 18px
}

// ── Comma-separated selectors ────────────────────────────────────────────────
.warn-text, .info-text {
    font-weight: 600
    padding: 6px 10px
    border-radius: 4px
}