45 lines
2.3 KiB
YAML
45 lines
2.3 KiB
YAML
# What can be changed from the editor's Look panel, and the limits. A site's
|
|
# choices go in site.yaml under look:; the build turns them into a small
|
|
# stylesheet loaded after assets/styles.css. A color can have a separate
|
|
# dark-mode value; without one, dark mode keeps the theme's.
|
|
tokens:
|
|
- { name: accent, label: Accent, type: color, default: "#ba5019", dark: "#f2a65a", help: Links and the main buttons. }
|
|
- { name: accent-text, label: Text on the accent, type: color, default: "#ffffff", dark: "#1a1206" }
|
|
- { name: bg, label: Background, type: color, default: "#fbfaf7", dark: "#12161c" }
|
|
- { name: text, label: Text, type: color, default: "#1d2430", dark: "#e9e6e0" }
|
|
- { name: hero, label: Hero background, type: color, default: "#fbfaf7", dark: "#12161c", help: Behind the big opening at the top of a page. }
|
|
- { name: hero-text, label: Text on the hero, type: color, default: "#1d2430", dark: "#e9e6e0" }
|
|
- { name: band, label: Closing band, type: color, default: "#1d2b3a", dark: "#0c1015" }
|
|
- { name: band-text, label: Text on the band, type: color, default: "#f5f1ea", dark: "#e9e6e0" }
|
|
- name: font
|
|
label: Font
|
|
type: font
|
|
default: inter
|
|
options:
|
|
inter: '"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'
|
|
system: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'
|
|
serif: 'Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif'
|
|
rounded: 'ui-rounded, "SF Pro Rounded", system-ui, sans-serif'
|
|
recursive: '"Recursive", system-ui, sans-serif'
|
|
- name: radius
|
|
label: Corners
|
|
type: select
|
|
default: round
|
|
options: { sharp: 4px, soft: 8px, round: 14px }
|
|
- { name: logo, label: Logo, type: image, help: Shown before the site's name in the header. }
|
|
- { name: logo-dark, label: Logo in dark mode, type: image, help: Optional; for a logo that doesn't read on a dark background. }
|
|
- name: brand
|
|
label: The header shows
|
|
type: select
|
|
default: both
|
|
options: { both: the logo and the site's name, logo: the logo only (it has the name in it) }
|
|
|
|
# Pairs that have to stay readable: at least 4.5:1, in light and dark mode.
|
|
# `hotdog-cms check` refuses to publish a look that breaks one.
|
|
contrast:
|
|
- [text, bg]
|
|
- [accent, bg]
|
|
- [accent-text, accent]
|
|
- [band-text, band]
|
|
- [hero-text, hero]
|