default.gdt
raw
; The default theme: the appearance every std control resolves against when
; the application sets no theme of its own. It is always layered *under* the
; app theme, so an app overrides selectively and a control still looks right
; with no app theme at all — and *over* the built-in fallback theme
; (`style::fallback_theme`), which it overrides token for token.
;
; Control appearance is data: readable, forkable, and overridable, all of it
; here rather than buried in paint code.
(theme Default
(tokens
(accent "#6495ed")
(transparent "#00000000")
(ink "#000000")
(ink-disabled "#9a9aa0")
(surface "#ffffff")
(line "#708090")
; Darker and bluer than the accent: a link sits in running prose, so it
; has to stay legible at body size against the page, which a control's
; accent — read against its own fill — does not.
(link "#1a5fb4"))
; --- button -----------------------------------------------------------
(rule button
:background "#e4e4e8"
:color ink
:corner-radius 6
:focus-ring-color transparent
:focus-ring-width 2)
(rule (button :hover) :background "#d8d8de")
(rule (button :active) :background "#c6c6ce")
(rule (button :focus) :focus-ring-color accent)
(rule (button :disabled) :background "#eeeef0" :color ink-disabled)
; --- checkbox ---------------------------------------------------------
(rule checkbox
:box-fill "#ffffff"
:box-fill-checked accent
:box-border-color "#708090"
:box-border-color-checked accent
:box-border-width 1
:box-corner-radius 4
:check-mark (path (move 0.24 0.52) (line 0.43 0.70) (line 0.76 0.30))
:check-color "#ffffff"
:check-width 2
:color ink
:focus-ring-color transparent
:focus-ring-width 2)
(rule (checkbox :hover) :box-fill "#f4f4f8")
(rule (checkbox :focus) :focus-ring-color accent)
(rule (checkbox :disabled)
:box-fill "#eeeef0"
:box-fill-checked "#eeeef0"
:box-border-color "#c4c4c8"
:box-border-color-checked "#c4c4c8"
:check-color ink-disabled
:color ink-disabled)
; --- radio ------------------------------------------------------------
; A checkbox's tokens with two values changed: the box is round, and the
; mark is a dot rather than a tick. Everything else is deliberately the
; same, because they are the same control wearing different conventions.
(rule radio
:box-fill "#ffffff"
:box-fill-checked "#ffffff"
:box-border-color "#708090"
:box-border-color-checked accent
:box-border-width 1
:box-corner-radius 9
:check-mark (path (move 0.5 0.26)
(cubic 0.63 0.26 0.74 0.37 0.74 0.5)
(cubic 0.74 0.63 0.63 0.74 0.5 0.74)
(cubic 0.37 0.74 0.26 0.63 0.26 0.5)
(cubic 0.26 0.37 0.37 0.26 0.5 0.26)
(close))
:check-color accent
:check-width 2
:color ink
:focus-ring-color transparent
:focus-ring-width 2)
(rule (radio :hover) :box-fill "#f4f4f8")
(rule (radio :focus) :focus-ring-color accent)
(rule (radio :disabled)
:box-fill "#eeeef0"
:box-fill-checked "#eeeef0"
:box-border-color "#c4c4c8"
:box-border-color-checked "#c4c4c8"
:check-color ink-disabled
:color ink-disabled)
; --- switch -----------------------------------------------------------
; A long track with a round knob: the checkbox tokens, with the box made
; wide and fully rounded and the mark a filled circle sitting in it.
(rule switch
:box-fill "#c4c4c8"
:box-fill-checked accent
:box-border-color "#c4c4c8"
:box-border-color-checked accent
:box-border-width 0
:box-corner-radius 9
:check-mark (path (move 0.72 0.5)
(cubic 0.72 0.62 0.62 0.72 0.5 0.72)
(cubic 0.38 0.72 0.28 0.62 0.28 0.5)
(cubic 0.28 0.38 0.38 0.28 0.5 0.28)
(cubic 0.62 0.28 0.72 0.38 0.72 0.5)
(close))
:check-color "#ffffff"
:check-width 2
:color ink
:focus-ring-color transparent
:focus-ring-width 2)
(rule (switch :focus) :focus-ring-color accent)
(rule (switch :disabled)
:box-fill "#eeeef0"
:box-fill-checked "#eeeef0"
:box-border-color "#c4c4c8"
:box-border-color-checked "#c4c4c8"
:check-color ink-disabled
:color ink-disabled)
; --- separator --------------------------------------------------------
(rule separator :color "#dcdce0" :thickness 1)
; --- progress ---------------------------------------------------------
(rule progress
:track-color "#e4e4e8"
:fill-color accent
:corner-radius 3
:thickness 6)
; --- slider -----------------------------------------------------------
(rule slider
:track-color "#e4e4e8"
:fill-color accent
:thumb-color "#ffffff"
:thumb-size 16
:thickness 4
:corner-radius 2
:focus-ring-color transparent
:focus-ring-width 2)
(rule (slider :hover) :thumb-color "#f4f4f8")
(rule (slider :focus) :focus-ring-color accent)
(rule (slider :disabled)
:track-color "#eeeef0"
:fill-color "#c4c4c8"
:thumb-color "#eeeef0")
; --- stepper ----------------------------------------------------------
(rule stepper
:background surface
:color ink
:border-color "#c4c4c8"
:border-width 1
:corner-radius 4
:button-color "#708090"
:focus-ring-color transparent
:focus-ring-width 2)
(rule (stepper :focus) :border-color accent :focus-ring-color accent)
(rule (stepper :disabled)
:background "#eeeef0"
:color ink-disabled
:button-color "#c4c4c8")
; --- tabs, lists ------------------------------------------------------
; A chosen row is a filled row: the box tokens become the row's own
; background, and the mark is nothing — a tab does not carry a tick.
(rule tab
:box-fill transparent
:box-fill-checked accent
:box-border-color transparent
:box-border-color-checked accent
:box-border-width 0
:box-corner-radius 4
:check-mark (path)
:check-color transparent
:check-width 0
:color ink
:focus-ring-color transparent
:focus-ring-width 2)
(rule (tab :hover) :box-fill "#f4f4f8")
(rule (tab :focus) :focus-ring-color accent)
(rule (tab :disabled) :color ink-disabled :box-fill-checked "#c4c4c8")
(rule tab-list :background transparent :corner-radius 0)
(rule list :background surface :corner-radius 4)
(rule list-item
:box-fill transparent
:box-fill-checked accent
:box-border-color transparent
:box-border-color-checked accent
:box-border-width 0
:box-corner-radius 2
:check-mark (path)
:check-color transparent
:check-width 0
:color ink
:focus-ring-color transparent
:focus-ring-width 2)
(rule (list-item :hover) :box-fill "#f4f4f8")
(rule (list-item :focus) :focus-ring-color accent)
(rule (list-item :disabled) :color ink-disabled)
; --- expander ---------------------------------------------------------
; One mark for both states: the widget turns it a quarter when open, so a
; theme overriding it keeps that relationship rather than needing two.
(rule expander
:background transparent
:color ink
:corner-radius 4
:expand-mark (path (move 0.3 0.2) (line 0.7 0.5) (line 0.3 0.8) (close))
:expand-color "#708090"
:focus-ring-color transparent
:focus-ring-width 2)
(rule (expander :hover) :background "#f4f4f8")
(rule (expander :focus) :focus-ring-color accent)
(rule (expander :disabled) :color ink-disabled :expand-color "#c4c4c8")
; --- text-input -------------------------------------------------------
; The focused field takes a thicker accent border; expressing it as a
; `:focus` rule is what lets the widget paint without consulting its own
; focus state.
(rule text-input
:background surface
:color ink
:caret-color ink
:selection-color "#6495ed80"
:border-color line
:border-width 1
:corner-radius 4)
; --- combo-box --------------------------------------------------------
; A field that opens a list: the text field's appearance, unchanged.
(rule combo-box
:background surface
:color ink
:caret-color ink
:selection-color "#6495ed80"
:border-color line
:border-width 1
:corner-radius 4)
(rule (combo-box :focus) :border-color accent :border-width 2)
(rule (text-input :focus) :border-color accent :border-width 2)
; --- scroll-area ------------------------------------------------------
(rule scroll-area
:thumb-color "#606060a0"
:thumb-corner-radius 3)
; --- text -------------------------------------------------------------
; A paragraph's own color and font come from the widget, not from here: a
; theme that stated them would be deciding what every piece of prose in
; every application looks like. What a `(link …)` span inside one looks
; like *is* a theme question — "blue and underlined" is a convention, and
; conventions are exactly what a theme is for. The underline takes the
; link's color: parley draws a decoration in its run's brush, so there is
; one place to change a link's appearance rather than two.
(rule text
:link-color link
:link-underline-width 1
:selection-color "#6495ed80")
; --- image ------------------------------------------------------------
; Only a `(path …)` source is colored: a raster carries its own pixels.
(rule image :color ink)
; --- menus ------------------------------------------------------------
; A row's highlight is a token variant, not a `:highlighted` selector:
; being the current row is the widget's own state, like a checkbox's
; `checked`. Pointer hover and the keyboard's arrows move the same
; highlight, so they cannot disagree about what is current.
(tokens
(menu-surface "#fbfbfd")
(menu-highlight "#6495ed")
(menu-rule "#dcdce2"))
(rule menu-bar :background "#f0f0f4")
(rule dialog
:background surface
:color ink
:border-color line
:border-width 1
:corner-radius 8
:scrim-color "#00000060")
; A tooltip is a note, not a surface: dark, quiet, and out of the way.
(rule tooltip
:background "#2a2a30"
:border-color transparent
:border-width 0
:corner-radius 4
:color surface)
(rule menu-panel
:background menu-surface
:border-color menu-rule
:border-width 1
:corner-radius 6)
(rule menu-separator :color menu-rule :thickness 1)
(rule menu
:background transparent
:background-highlighted menu-highlight
:color ink
:color-highlighted surface
:accel-color "#8a8a92"
:corner-radius 4
:submenu-mark (path (move 0.3 0.1) (line 0.75 0.5) (line 0.3 0.9) (close)))
(rule dropdown
:background surface
:color ink
:border-color line
:border-width 1
:corner-radius 4
:focus-ring-color transparent
:focus-ring-width 2
:arrow-mark (path (move 0.15 0.35) (line 0.85 0.35) (line 0.5 0.75) (close))
:arrow-color "#5a5a62")
(rule (dropdown :focus) :focus-ring-color accent)
(rule menu-item
:background transparent
:background-highlighted menu-highlight
:color ink
:color-highlighted surface
:accel-color "#8a8a92"
:corner-radius 4
:submenu-mark (path (move 0.3 0.1) (line 0.75 0.5) (line 0.3 0.9) (close))))