App: ui and branding
The look, the shell, the footer and the density of the App, and what each tenant may brand. Every key here is stable (status). All parts.
ui: { logo: 'buildings', shell: { placement: 'side', width: 'wide' }, theme: { preset: 'sage' }, editing: { save: 'blur' }, locale: 'en-US', timezone: 'America/New_York', footer: { text: 'Prices exclude tax.', links: [{ label: 'Terms', href: 'https://example.com/terms' }] },},logo is an App icon, never an image URL. theme.preset is one of the
built-in looks (lumen by default, mono, sage) or one registered with
defineTheme; accent, radius and font
adjust it. currency is US dollars unless the App says otherwise, and a money
rule names its own only for a column in another. See Looks
and Navigation and shell.
timezone may instead be read per reader: timezone: { column: 'desk_setting.timezone', default: 'America/New_York' } counts each reader’s
today and windows in the zone the first row of that column they may read
names — their tenant’s, their account’s. Writes keep default.
locale is also the App’s own language, the one its messages/ catalogs are
written from, and may be read per reader the same way: locale: { column: 'person.locale', default: 'en-US' }. A tenant’s tag (branding.allow: ['locale']) comes before default. messages: fromRecord('tenant_message', { by: 'tenant', tenantField, fields: { key, locale, text } }) keeps a
tenant’s own words over the catalogs. See Languages.
branding
Section titled “branding”| Key | Type | Status | What it does |
|---|---|---|---|
branding |
object | Stable | What each tenant may change about how the App looks to its people, and which tenant roles may save it. Never the grounds, the ink or the recipes. A tenant App only. |
branding.allow
Section titled “branding.allow”| Key | Type | Status | What it does |
|---|---|---|---|
branding.allow |
array | Stable | What each tenant may set. preset (which of themes it starts from) needs more than one of themes; locale is the tenant’s language, under each person’s own. |
branding.editors
Section titled “branding.editors”| Key | Type | Status | What it does |
|---|---|---|---|
branding.editors |
array | Stable | The tenant roles whose members may save it: a tenant’s admins. |
branding.themes
Section titled “branding.themes”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes |
array | Stable | The themes a tenant starts from (defineTheme results or built-in names); the first is the default. Absent: the App’s own look. |
branding.themes[][kind=theme].colors
Section titled “branding.themes[][kind=theme].colors”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].colors |
object | Stable | Required, with ground, surface, ink and accent in both modes, unless the theme extends a built-in; then partial. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.accentInk |
string | Stable | |
branding.themes[][kind=theme].colors.dark.accentSoft |
string | Stable | |
branding.themes[][kind=theme].colors.dark.band |
string | Stable | Every other row of a banded table (recipes.table). Omitted, raised. Each ink is checked on it as on the page. Used in examples/apps/lintel/theme.ts. |
branding.themes[][kind=theme].colors.dark.chart |
array | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.focus |
string | Stable | |
branding.themes[][kind=theme].colors.dark.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.inkMuted |
string | Stable | |
branding.themes[][kind=theme].colors.dark.inkSubtle |
string | Stable | |
branding.themes[][kind=theme].colors.dark.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.lineControl |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.lineStrong |
string | Stable | |
branding.themes[][kind=theme].colors.dark.link |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.nav |
object | Stable | Used in examples/apps/lintel/app.ts. |
branding.themes[][kind=theme].colors.dark.nav.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.nav.current |
string | Stable | Used in examples/apps/lintel/resources.ts. |
branding.themes[][kind=theme].colors.dark.nav.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.nav.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.nav.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.nav.muted |
string | Stable | |
branding.themes[][kind=theme].colors.dark.nav.onCurrent |
string | Stable | |
branding.themes[][kind=theme].colors.dark.onAccent |
string | Stable | |
branding.themes[][kind=theme].colors.dark.raised |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.rules |
object | Stable | |
branding.themes[][kind=theme].colors.dark.rules.head |
string | Stable | |
branding.themes[][kind=theme].colors.dark.rules.section |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.shadow |
string | Stable | The ink every lift is mixed from: a card’s, a menu’s, a dialog’s shadow. Omitted, the look’s (its ink by day, its ground by night). Never lighter than ground (theme-shadow). |
branding.themes[][kind=theme].colors.dark.status |
object | Stable | |
branding.themes[][kind=theme].colors.dark.status.critical |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.status.good |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.dark.status.info |
string | Stable | |
branding.themes[][kind=theme].colors.dark.status.warning |
string | Stable | |
branding.themes[][kind=theme].colors.dark.surface |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.accentInk |
string | Stable | |
branding.themes[][kind=theme].colors.light.accentSoft |
string | Stable | |
branding.themes[][kind=theme].colors.light.band |
string | Stable | Every other row of a banded table (recipes.table). Omitted, raised. Each ink is checked on it as on the page. Used in examples/apps/lintel/theme.ts. |
branding.themes[][kind=theme].colors.light.chart |
array | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.focus |
string | Stable | |
branding.themes[][kind=theme].colors.light.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.inkMuted |
string | Stable | |
branding.themes[][kind=theme].colors.light.inkSubtle |
string | Stable | |
branding.themes[][kind=theme].colors.light.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.lineControl |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.lineStrong |
string | Stable | |
branding.themes[][kind=theme].colors.light.link |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.nav |
object | Stable | Used in examples/apps/lintel/app.ts. |
branding.themes[][kind=theme].colors.light.nav.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.nav.current |
string | Stable | Used in examples/apps/lintel/resources.ts. |
branding.themes[][kind=theme].colors.light.nav.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.nav.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.nav.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.nav.muted |
string | Stable | |
branding.themes[][kind=theme].colors.light.nav.onCurrent |
string | Stable | |
branding.themes[][kind=theme].colors.light.onAccent |
string | Stable | |
branding.themes[][kind=theme].colors.light.raised |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.rules |
object | Stable | |
branding.themes[][kind=theme].colors.light.rules.head |
string | Stable | |
branding.themes[][kind=theme].colors.light.rules.section |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.shadow |
string | Stable | The ink every lift is mixed from: a card’s, a menu’s, a dialog’s shadow. Omitted, the look’s (its ink by day, its ground by night). Never lighter than ground (theme-shadow). |
branding.themes[][kind=theme].colors.light.status |
object | Stable | |
branding.themes[][kind=theme].colors.light.status.critical |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.status.good |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].colors.light.status.info |
string | Stable | |
branding.themes[][kind=theme].colors.light.status.warning |
string | Stable | |
branding.themes[][kind=theme].colors.light.surface |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].contract
Section titled “branding.themes[][kind=theme].contract”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].contract |
Stable | The theme contract a published look was written to. A theme written to another is refused, naming the release to install. One of 1. |
branding.themes[][kind=theme].defaultPalette
Section titled “branding.themes[][kind=theme].defaultPalette”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].defaultPalette |
string | Stable | default or a declared palette id; references are checked by the App parser. |
branding.themes[][kind=theme].density
Section titled “branding.themes[][kind=theme].density”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].density |
"compact" · "comfortable" · "spacious" |
Stable | One of comfortable, compact, spacious. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].extends
Section titled “branding.themes[][kind=theme].extends”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].extends |
object | Stable | Start from a built-in look, or from a theme, and say only what differs. Without it, colors names ground, surface, ink and accent in both modes and the rest is derived. One of lumen, mono, sage. Used in examples/apps/lintel/app.ts. |
branding.themes[][kind=theme].extends[kind=theme]
Section titled “branding.themes[][kind=theme].extends[kind=theme]”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].extends[kind=theme].kind |
Stable | One of theme. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].from
Section titled “branding.themes[][kind=theme].from”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].from |
string | Stable | A published look’s import.meta.url, so its faces and stylesheet are read from the package that holds them, never from the App that installs it. Requires contract. Used in examples/apps/lintel/app.ts. |
branding.themes[][kind=theme].id
Section titled “branding.themes[][kind=theme].id”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].id |
string | Stable |
branding.themes[][kind=theme].kind
Section titled “branding.themes[][kind=theme].kind”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].kind |
Stable | One of theme. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].label
Section titled “branding.themes[][kind=theme].label”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].label |
string | Stable |
branding.themes[][kind=theme].motion
Section titled “branding.themes[][kind=theme].motion”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].motion |
"house" · "brisk" · "still" |
Stable | How fast things enter: house (omitted) as the platform moves, brisk a quarter quicker, still with nothing entering, as reduced motion draws it. A reader who asks for reduced motion gets still under every pace. One of brisk, house, still. |
branding.themes[][kind=theme].palettes
Section titled “branding.themes[][kind=theme].palettes”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].palettes |
array | Stable | Named color variations over the theme’s own colors. IDs must be unique within the theme, checked by the App parser. |
branding.themes[][kind=theme].palettes[]
Section titled “branding.themes[][kind=theme].palettes[]”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].palettes[].dark |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.accentInk |
string | Stable | |
branding.themes[][kind=theme].palettes[].dark.accentSoft |
string | Stable | |
branding.themes[][kind=theme].palettes[].dark.band |
string | Stable | Every other row of a banded table (recipes.table). Omitted, raised. Each ink is checked on it as on the page. Used in examples/apps/lintel/theme.ts. |
branding.themes[][kind=theme].palettes[].dark.chart |
array | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.focus |
string | Stable | |
branding.themes[][kind=theme].palettes[].dark.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.inkMuted |
string | Stable | |
branding.themes[][kind=theme].palettes[].dark.inkSubtle |
string | Stable | |
branding.themes[][kind=theme].palettes[].dark.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.lineControl |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.lineStrong |
string | Stable | |
branding.themes[][kind=theme].palettes[].dark.link |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.nav |
object | Stable | Used in examples/apps/lintel/app.ts. |
branding.themes[][kind=theme].palettes[].dark.nav.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.nav.current |
string | Stable | Used in examples/apps/lintel/resources.ts. |
branding.themes[][kind=theme].palettes[].dark.nav.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.nav.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.nav.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.nav.muted |
string | Stable | |
branding.themes[][kind=theme].palettes[].dark.nav.onCurrent |
string | Stable | |
branding.themes[][kind=theme].palettes[].dark.onAccent |
string | Stable | |
branding.themes[][kind=theme].palettes[].dark.raised |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.rules |
object | Stable | |
branding.themes[][kind=theme].palettes[].dark.rules.head |
string | Stable | |
branding.themes[][kind=theme].palettes[].dark.rules.section |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.shadow |
string | Stable | The ink every lift is mixed from: a card’s, a menu’s, a dialog’s shadow. Omitted, the look’s (its ink by day, its ground by night). Never lighter than ground (theme-shadow). |
branding.themes[][kind=theme].palettes[].dark.status |
object | Stable | |
branding.themes[][kind=theme].palettes[].dark.status.critical |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.status.good |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].dark.status.info |
string | Stable | |
branding.themes[][kind=theme].palettes[].dark.status.warning |
string | Stable | |
branding.themes[][kind=theme].palettes[].dark.surface |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].id |
string | Stable | |
branding.themes[][kind=theme].palettes[].label |
string | Stable | |
branding.themes[][kind=theme].palettes[].light |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.accentInk |
string | Stable | |
branding.themes[][kind=theme].palettes[].light.accentSoft |
string | Stable | |
branding.themes[][kind=theme].palettes[].light.band |
string | Stable | Every other row of a banded table (recipes.table). Omitted, raised. Each ink is checked on it as on the page. Used in examples/apps/lintel/theme.ts. |
branding.themes[][kind=theme].palettes[].light.chart |
array | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.focus |
string | Stable | |
branding.themes[][kind=theme].palettes[].light.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.inkMuted |
string | Stable | |
branding.themes[][kind=theme].palettes[].light.inkSubtle |
string | Stable | |
branding.themes[][kind=theme].palettes[].light.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.lineControl |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.lineStrong |
string | Stable | |
branding.themes[][kind=theme].palettes[].light.link |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.nav |
object | Stable | Used in examples/apps/lintel/app.ts. |
branding.themes[][kind=theme].palettes[].light.nav.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.nav.current |
string | Stable | Used in examples/apps/lintel/resources.ts. |
branding.themes[][kind=theme].palettes[].light.nav.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.nav.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.nav.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.nav.muted |
string | Stable | |
branding.themes[][kind=theme].palettes[].light.nav.onCurrent |
string | Stable | |
branding.themes[][kind=theme].palettes[].light.onAccent |
string | Stable | |
branding.themes[][kind=theme].palettes[].light.raised |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.rules |
object | Stable | |
branding.themes[][kind=theme].palettes[].light.rules.head |
string | Stable | |
branding.themes[][kind=theme].palettes[].light.rules.section |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.shadow |
string | Stable | The ink every lift is mixed from: a card’s, a menu’s, a dialog’s shadow. Omitted, the look’s (its ink by day, its ground by night). Never lighter than ground (theme-shadow). |
branding.themes[][kind=theme].palettes[].light.status |
object | Stable | |
branding.themes[][kind=theme].palettes[].light.status.critical |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.status.good |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].palettes[].light.status.info |
string | Stable | |
branding.themes[][kind=theme].palettes[].light.status.warning |
string | Stable | |
branding.themes[][kind=theme].palettes[].light.surface |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].parts
Section titled “branding.themes[][kind=theme].parts”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].parts |
object | Stable | Each published part’s own style, by its name: ground, bar, bar.search, nav, nav.item, nav.current, nav.group, logo, page.title, tabs, tab.current, section, section.title, stat, stat.figure, fields, field.label, table, table.head, table.row, status, tag, button.primary, button.secondary, button.quiet, link, board.lane, board.card, workflow.step, banner, steps.step, avatar, menu, dialog, chart. Contract 1: a 1.x release may publish another part and withdraws none. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].parts.*.case |
"none" · "upper" · "small-caps" |
Stable | Capitals: upper or small-caps, tracked as the theme’s labels are; none undoes the look’s. One of none, small-caps, upper. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].parts.*.edge |
"ground" · "surface" · "raised" · "line" · "lineStrong" · "lineControl" · "ink" · "inkMuted" · "inkSubtle" · "accent" · "onAccent" · "accentInk" · "focus" · "accentSoft" · "link" · "status.good" · "status.warning" · "status.critical" · "status.info" · "nav.ground" · "nav.ink" · "nav.muted" · "nav.line" · "nav.accent" · "nav.current" · "nav.onCurrent" · "rules.section" · "rules.head" · "band" · "chart[0]" · "chart[1]" · "chart[2]" · "chart[3]" · "chart[4]" · "chart[5]" · "chart[6]" · "chart[7]" |
Stable | Its border’s color, where it has one. One of accent, accentInk, accentSoft, band, chart[0], chart[1], chart[2], chart[3], chart[4], chart[5], chart[6], chart[7], focus, ground, ink, inkMuted, inkSubtle, line, lineControl, lineStrong, link, nav.accent, nav.current, nav.ground, nav.ink, nav.line, nav.muted, nav.onCurrent, onAccent, raised, rules.head, rules.section, status.critical, status.good, status.info, status.warning, surface. |
branding.themes[][kind=theme].parts.*.face |
"ui" · "heading" · "data" |
Stable | One of the theme’s faces. One of data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].parts.*.ground |
"ground" · "surface" · "raised" · "line" · "lineStrong" · "lineControl" · "ink" · "inkMuted" · "inkSubtle" · "accent" · "onAccent" · "accentInk" · "focus" · "accentSoft" · "link" · "status.good" · "status.warning" · "status.critical" · "status.info" · "nav.ground" · "nav.ink" · "nav.muted" · "nav.line" · "nav.accent" · "nav.current" · "nav.onCurrent" · "rules.section" · "rules.head" · "band" · "chart[0]" · "chart[1]" · "chart[2]" · "chart[3]" · "chart[4]" · "chart[5]" · "chart[6]" · "chart[7]" |
Stable | What it is drawn on. One of accent, accentInk, accentSoft, band, chart[0], chart[1], chart[2], chart[3], chart[4], chart[5], chart[6], chart[7], focus, ground, ink, inkMuted, inkSubtle, line, lineControl, lineStrong, link, nav.accent, nav.current, nav.ground, nav.ink, nav.line, nav.muted, nav.onCurrent, onAccent, raised, rules.head, rules.section, status.critical, status.good, status.info, status.warning, surface. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].parts.*.ink |
"ground" · "surface" · "raised" · "line" · "lineStrong" · "lineControl" · "ink" · "inkMuted" · "inkSubtle" · "accent" · "onAccent" · "accentInk" · "focus" · "accentSoft" · "link" · "status.good" · "status.warning" · "status.critical" · "status.info" · "nav.ground" · "nav.ink" · "nav.muted" · "nav.line" · "nav.accent" · "nav.current" · "nav.onCurrent" · "rules.section" · "rules.head" · "band" · "chart[0]" · "chart[1]" · "chart[2]" · "chart[3]" · "chart[4]" · "chart[5]" · "chart[6]" · "chart[7]" |
Stable | Its words; check measures them on its ground. One of accent, accentInk, accentSoft, band, chart[0], chart[1], chart[2], chart[3], chart[4], chart[5], chart[6], chart[7], focus, ground, ink, inkMuted, inkSubtle, line, lineControl, lineStrong, link, nav.accent, nav.current, nav.ground, nav.ink, nav.line, nav.muted, nav.onCurrent, onAccent, raised, rules.head, rules.section, status.critical, status.good, status.info, status.warning, surface. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].parts.*.lift |
"none" · "hairline" · "low" · "mid" · "high" |
Stable | A lift from the theme’s steps, in its shadow ink. One of hairline, high, low, mid, none. |
branding.themes[][kind=theme].parts.*.radius |
"control" · "field" · "pill" · "panel" · "square" |
Stable | One of the theme’s own corners, or square. One of control, field, panel, pill, square. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].parts.*.weight |
400 · 500 · 600 · 700 |
Stable | One of 400, 500, 600, 700. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].recipes
Section titled “branding.themes[][kind=theme].recipes”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].recipes |
object | Stable | Each part’s treatment, from the closed menu the built-in looks wear. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].recipes.avatar |
"plain" · "large" · "round" |
Stable | plain: A record’s avatar is its initials in a small square. large: A record’s avatar is 44px, in the look’s corners. round: A record’s avatar is 44px and round, and the menu’s and the account’s marks are round too. One of large, plain, round. Used in examples/apps/lintel/resources.ts. |
branding.themes[][kind=theme].recipes.banner |
"tint" · "gradient" · "plain" |
Stable | tint: A dashboard’s banner note is a box tinted with the accent. gradient: A dashboard’s banner note is a soft gradient from the accent to the second chart color. plain: A dashboard’s banner note stands on the page with no box, its eyebrow in the link color. One of gradient, plain, tint. |
branding.themes[][kind=theme].recipes.bar |
"plain" · "ruled" · "dark" · "airy" · "soft" |
Stable | plain: The top bar is the menu’s ground with a hairline under it. ruled: The top bar ends in a 2px rule instead of a hairline, and casts no shadow. dark: The top bar takes the menu’s ground and inks, so a dark or brand-colored menu runs across the top too. airy: The top bar is taller, with a large bold brand name and a wide, raised search box. soft: The top bar is a panel in the surface color with a hairline under it, apart from the menu beside it. One of airy, dark, plain, ruled, soft. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].recipes.board |
"ruled" · "soft" · "strip" |
Stable | ruled: A board’s lanes are outlined by a hairline; its cards lie flat on them. soft: As ruled, but each card casts the look’s card shadow: only the cards lift. strip: Each lane is headed by a strip tinted with its tone, its cards white on the lane. One of ruled, soft, strip. Used in examples/apps/lintel/views.ts. |
branding.themes[][kind=theme].recipes.buttons |
"accent" · "raised" |
Stable | accent: The primary button is filled in the accent; the rest are quiet. raised: Secondary buttons are white keys with a hairline and a small shadow, raised off the page. One of accent, raised. |
branding.themes[][kind=theme].recipes.chart |
"plain" · "wash" · "gradient" · "line" |
Stable | plain: A chart is its lines or bars on a light grid. wash: An area under a line is washed in the first chart color. gradient: An area fades from the line down to nothing, the line heavier and the grid dashed. line: Only the lines: no areas, a fine solid grid and small ticks. One of gradient, line, plain, wash. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].recipes.fields |
"open" · "panel" · "card" · "rail" |
Stable | open: A record’s field groups and forms stand open on the page. panel: Each field group and form is a panel on the surface with a hairline; its labels stay as the look draws them. card: Each field group and form is a card with a hairline and the card shadow, its labels muted and the values in the interface face. rail: Field groups stand open, and the side column’s cards become captioned groups between hairlines. One of card, open, panel, rail. Used in examples/apps/tick/app.ts. |
branding.themes[][kind=theme].recipes.header |
"plain" · "band" · "hero" |
Stable | plain: A record’s head and a list’s stand on the page’s ground, under the trail’s hairline. band: A record’s head and a list’s are one band of the raised ground from edge to edge: the trail, the title, its status, facts and verbs, a list’s tabs and filters; the contents keep their edge. hero: A band, with the record’s avatar large beside its title (above it on a phone); a record without one, and a list, draw the band. One of band, hero, plain. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].recipes.lanes |
"tint" · "tag" · "plain" |
Stable | tint: A board lane’s value in its head is on its tone’s tint. tag: A board lane’s value is a solid tag in its tone, in white capitals. plain: A board lane’s value is its name in plain ink. One of plain, tag, tint. |
branding.themes[][kind=theme].recipes.links |
"plain" · "underline" |
Stable | plain: A link to another record is in the link color without an underline. underline: A link to another record is underlined, so it reads as one without color. One of plain, underline. Used in examples/apps/lintel/pages/unit.ts. |
branding.themes[][kind=theme].recipes.nav |
"tint" · "inverted" · "wash" · "underline" · "pill" · "quiet" |
Stable | tint: The current entry sits on a soft tint of the accent; the other rows stay plain. inverted: The current entry is inverted, the menu’s ink as its ground: the boldest mark, square and high-contrast. wash: The current entry sits on a wash of the menu’s own accent, stronger than tint, for a menu in a brand color. underline: The current entry in the top bar is marked by a 3px rule of the menu’s accent under it, with no fill. pill: Every row is a rounded pill with room around it; the current one is filled in the accent’s tint, its word in the accent. quiet: The current entry is barely shaded in the menu’s ink, with no accent at all: the calmest mark. One of inverted, pill, quiet, tint, underline, wash. Used in examples/apps/lintel/app.ts. |
branding.themes[][kind=theme].recipes.rules |
"ink" · "hairline" |
Stable | ink: A record’s sections are announced by a 2px rule in the ink. hairline: A record’s sections are announced by a 1px hairline instead. One of hairline, ink. |
branding.themes[][kind=theme].recipes.section |
"open" · "card" · "panel" |
Stable | open: A dashboard section stands open on the page under its rule. card: Each dashboard section is a card with a hairline and the card shadow, its table drawn to the card’s edges. panel: Each dashboard section is a panel like card, but a section in the side column stays open on the page. One of card, open, panel. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].recipes.stat |
"plain" · "framed" · "topline" · "ruled" · "icon" · "panel" · "divided" |
Stable | plain: A stat is a figure and its label with no frame. framed: Each stat is a card framed by a line in the ink: square and stark. topline: Each stat card has a 3px rule in the first chart color along its top. ruled: Each stat stands open under a 2px rule in the ink, with no card or shadow, like a printed page. icon: Each stat is a card with its icon in a round tint of a chart color above the label, and a large bold figure. panel: Each stat is a panel on the surface with a hairline and the look’s card shadow. divided: The stats share one strip, parted by hairlines, with no cards: the quietest arrangement. One of divided, framed, icon, panel, plain, ruled, topline. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].recipes.status |
"dot" · "pill" · "pill-dot" · "quiet" |
Stable | dot: A status word in its tone with a dot before it. pill: A status word on a pill tinted with its tone, without a dot. pill-dot: A status word on a pill tinted with its tone, with a small dot inside it. quiet: A status word in the ink with a dot in its tone: the color is only the dot. One of dot, pill, pill-dot, quiet. |
branding.themes[][kind=theme].recipes.steps |
"flat" · "tinted" · "strip" |
Stable | flat: A breakdown drawn as steps is a row of cards on the surface with a hairline. tinted: Each step’s card is tinted with its tone: good, warning, critical or the accent. strip: The steps are one strip of figures parted by hairlines, with no cards or marks. One of flat, strip, tinted. |
branding.themes[][kind=theme].recipes.table |
"open" · "tinted" · "hairline" · "card" · "quiet" · "banded" |
Stable | open: Rows stand on the page under a rule, the head as the look draws it. tinted: As open, but a hovered row takes a tint of the accent and its check boxes the accent: the same until a pointer moves. hairline: The head sits on a hairline in 12.5px semibold, the rows in 13.5px: open, a little roomier. card: The table is a card: muted 12px heads on a hairline, faint row rules and taller rows. quiet: The table is a card of quiet rows, a work queue’s open button folded to a chevron at the row’s end. banded: As open, but every other row lies on the band color (colors.band, or the raised ground), each ink measured on it. One of banded, card, hairline, open, quiet, tinted. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].recipes.tabs |
"pill" · "inverted" · "underline" · "rule" · "chosen" |
Stable | pill: The chosen tab is a filled pill; the others are plain words. inverted: The chosen tab is inverted, the ink as its ground: square, high-contrast. underline: The tabs stand on a hairline, wide apart, the chosen one underlined in the accent with no fill. rule: The chosen tab is underlined by a 2px rule in the link color with no fill, the tabs packed as written. chosen: The chosen tab sits on a soft tint of the accent in the ink, wider apart, with no underline. One of chosen, inverted, pill, rule, underline. Used in examples/apps/tick/app.ts. |
branding.themes[][kind=theme].recipes.windows |
"segmented" · "lifted" · "chosen" |
Stable | segmented: The period picker is a segmented control, the chosen period filled. lifted: The period picker is a sunken tray, the chosen period a raised white key on it. chosen: The period picker has no tray; the chosen period sits on a soft tint of the accent. One of chosen, lifted, segmented. Used in examples/apps/lintel/dashboards.ts. |
branding.themes[][kind=theme].recipes.workflow |
"markers" · "pills" |
Stable | markers: A workflow is a track of thin segments, the label under each. pills: A workflow is a row of pills with a dot each: a step walked in the good tint, the current one in the accent’s. One of markers, pills. Used in examples/apps/lintel/late-fees.ts. |
branding.themes[][kind=theme].rhythm
Section titled “branding.themes[][kind=theme].rhythm”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].rhythm |
"tight" · "house" · "airy" |
Stable | How far apart things stand: house (omitted) as the platform spaces a page, tight its layout steps (16px and up, and the section seam) a quarter closer, airy a quarter wider. A control’s own padding never moves. One of airy, house, tight. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].scheme
Section titled “branding.themes[][kind=theme].scheme”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].scheme |
"dark" · "dark-only" |
Stable | dark: worn dark until the reader picks a mode themselves, whatever their machine is set to; it still has light colors, held to a printed page’s white paper. dark-only: no light colors at all, colors names dark alone, the theme is judged as dark and not as paper, and a reader cannot turn it light. Omitted, the theme follows the reader and their machine. One of dark, dark-only. |
branding.themes[][kind=theme].shape
Section titled “branding.themes[][kind=theme].shape”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].shape |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].shape.border |
object | Stable | |
branding.themes[][kind=theme].shape.border.control |
"1px" · "2px" |
Stable | A field’s and a select’s edge; omitted, 1px. One of 1px, 2px. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].shape.border.focus |
"2px" · "3px" |
Stable | The focus ring; omitted, 2px. One of 2px, 3px. |
branding.themes[][kind=theme].shape.border.panel |
"0px" · "1px" · "2px" |
Stable | A card’s and a section’s edge where the look draws one; 0px draws none. Omitted, 1px. One of 0px, 1px, 2px. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].shape.border.rule |
"1px" · "2px" · "3px" |
Stable | The rules over a section and a board’s lanes and under a table’s heads; omitted, the look’s (2px, Lumen 1px). One of 1px, 2px, 3px. |
branding.themes[][kind=theme].shape.elevation |
object | Stable | A preset as its look draws it (flat: Mono, no lift; hairline: the platform’s; soft: Sage; raised: Lumen), or a step for cards and one for what floats over the base’s, each none, hairline, low (the platform’s popups), mid (Sage’s) or high (Lumen’s). One of flat, hairline, raised, soft. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].shape.elevation.card |
"none" · "hairline" · "low" · "mid" · "high" |
Stable | The cards a recipe draws: a section, a field group or a stat boxed by section, fields or stat. One of hairline, high, low, mid, none. |
branding.themes[][kind=theme].shape.elevation.float |
"none" · "hairline" · "low" · "mid" · "high" |
Stable | What floats: a menu, a popover, a drawer; a dialog a step above. One of hairline, high, low, mid, none. |
branding.themes[][kind=theme].shape.radius |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].shape.radius.control |
string | Stable | A button’s, an input’s and a select’s corner, 0px to 16px, or round: a pill (every other box that follows it takes 8px). One of round. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].shape.radius.field |
string | Stable | A form field’s corner, 0px to 12px. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].shape.radius.panel |
string | Stable | A card’s, a section’s and a dialog’s corner, 0px to 20px; omitted, one and a half controls’, at most 20px. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].shape.radius.pill |
string | Stable | A status pill’s, a tag’s and a chip’s corner, 0px to 12px or round; omitted, round. One of round. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].shell
Section titled “branding.themes[][kind=theme].shell”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].shell |
object | Stable | Where the menu is drawn, as a suggestion: it holds when this theme is the App’s own (ui.theme.preset) and ui.shell.placement says nothing. Used in examples/apps/tick/app.ts. |
branding.themes[][kind=theme].shell.placement |
"side" · "top" |
Stable | One of side, top. Used in examples/apps/tick/app.ts. |
branding.themes[][kind=theme].stylesheet
Section titled “branding.themes[][kind=theme].stylesheet”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].stylesheet |
string | Stable | A stylesheet beside the theme (8 KB at most) that styles its parts and nothing else: [data-part] selectors under the theme’s own root, and only the properties the stylesheet allowlist names. Read once when the App loads; a build serves it from its brand/ folder. |
branding.themes[][kind=theme].surface
Section titled “branding.themes[][kind=theme].surface”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].surface |
object | Stable | A pattern behind the page (ground) and one behind the navigation (nav), drawn in the theme’s line color; never behind a panel or a field. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].surface.ground |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].surface.ground.kind |
"paper" · "grain" · "grid" · "dots" · "lines" · "scanlines" |
Stable | paper and grain a fine speckle, grid squares, dots a dot grid, lines ruled lines, scanlines a screen’s. One of dots, grain, grid, lines, paper, scanlines. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].surface.ground.strength |
1 · 2 · 3 |
Stable | How much of the line color it is drawn in: 1 (omitted) 40%, 2 70%, 3 all of it. check measures the words over its darkest point (theme-contrast). One of 1, 2, 3. |
branding.themes[][kind=theme].surface.nav |
object | Stable | Used in examples/apps/lintel/app.ts. |
branding.themes[][kind=theme].surface.nav.kind |
"paper" · "grain" · "grid" · "dots" · "lines" · "scanlines" |
Stable | paper and grain a fine speckle, grid squares, dots a dot grid, lines ruled lines, scanlines a screen’s. One of dots, grain, grid, lines, paper, scanlines. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].surface.nav.strength |
1 · 2 · 3 |
Stable | How much of the line color it is drawn in: 1 (omitted) 40%, 2 70%, 3 all of it. check measures the words over its darkest point (theme-contrast). One of 1, 2, 3. |
branding.themes[][kind=theme].type
Section titled “branding.themes[][kind=theme].type”| Key | Type | Status | What it does |
|---|---|---|---|
branding.themes[][kind=theme].type |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.base |
"13px" · "14px" · "15px" · "16px" |
Stable | The size an App’s text is drawn at; every size grows with it, the roles’ too. Omitted, 13px. One of 13px, 14px, 15px, 16px. |
branding.themes[][kind=theme].type.faces |
array | Stable | Font files from the App’s directory, each one @font-face served from the App’s own origin. The heading’s face is preloaded on first paint. |
branding.themes[][kind=theme].type.faces[].family |
string | Stable | The family name a type.font stack names it by. |
branding.themes[][kind=theme].type.faces[].src |
string | Stable | A .woff2 or .woff file inside the App’s directory, relative to it: ./fonts/workshop-mono.woff2. |
branding.themes[][kind=theme].type.faces[].style |
"normal" · "italic" |
Stable | One of italic, normal. Used in examples/apps/lintel/source.ts. |
branding.themes[][kind=theme].type.faces[].subset |
Stable | Omitted, the file is cut to Latin when the App loads; false ships it whole, for an App written in another script. One of false. |
|
branding.themes[][kind=theme].type.faces[].weight |
integer | string | Stable | 100 to 900, or a variable file’s range as “100 900”. Omitted, 400. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.font |
string | object | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.font.code |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.font.data |
string | Stable | |
branding.themes[][kind=theme].type.font.heading |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.font.ui |
string | Stable | Used in examples/apps/tick/app.ts. |
branding.themes[][kind=theme].type.icons |
"regular" · "light" · "bold" · "fill" |
Stable | The icons’ weight, from Phosphor’s: regular (omitted), light, bold or fill. Thin and duotone are refused: a 1px stroke fades at an icon’s 16px, and a second tone is a color no role says. One of bold, fill, light, regular. Used in examples/apps/lintel/resources.ts. |
branding.themes[][kind=theme].type.roles |
object | Stable | Each kind of text by what it is for, saying only what differs from the look. Body, data, label and nav text has no size of its own: it follows type.base. |
branding.themes[][kind=theme].type.roles.body |
object | Stable | Prose, fields and the interface, at the base size: its leading (1.35 to 1.8) and features. Used in examples/apps/lintel/commands/maintenance.ts. |
branding.themes[][kind=theme].type.roles.body.features |
array | Stable | |
branding.themes[][kind=theme].type.roles.body.leading |
number | Stable | |
branding.themes[][kind=theme].type.roles.data |
object | Stable | A table’s cells and a record’s values, in the data face at the base size: their features, tabular figures kept, and its reach: every value, or figures only (figures, keys and dates, a record header’s facts too). |
branding.themes[][kind=theme].type.roles.data.features |
array | Stable | |
branding.themes[][kind=theme].type.roles.data.reach |
"values" · "figures" |
Stable | values (omitted): every value in the data face; figures: only figures, keys and dates, names in the interface face. One of figures, values. |
branding.themes[][kind=theme].type.roles.display |
object | Stable | A landing’s headline: its face, size (28px to 56px), leading, tracking, weight and features. Used in examples/apps/lintel/resources.ts. |
branding.themes[][kind=theme].type.roles.display.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.display.features |
array | Stable | |
branding.themes[][kind=theme].type.roles.display.leading |
number | Stable | |
branding.themes[][kind=theme].type.roles.display.size |
string | Stable | 28px to 56px, at the 13px base. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.display.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.display.weight |
400 · 500 · 600 · 700 · 800 · 900 |
Stable | One of 400, 500, 600, 700, 800, 900. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.figure |
object | Stable | A stat’s figure: its face, size (18px to 40px), tracking, weight and features, tabular figures kept. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.figure.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.figure.features |
array | Stable | |
branding.themes[][kind=theme].type.roles.figure.size |
string | Stable | 18px to 40px, at the 13px base. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.figure.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.figure.weight |
400 · 500 · 600 · 700 · 800 · 900 |
Stable | One of 400, 500, 600, 700, 800, 900. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.heading |
object | Stable | A list naming itself over its rows: its face, size (16px to 28px), leading, tracking, weight (omitted, the title’s), case and features. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.heading.case |
"none" · "upper" · "small-caps" |
Stable | One of none, small-caps, upper. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.heading.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.heading.features |
array | Stable | |
branding.themes[][kind=theme].type.roles.heading.leading |
number | Stable | |
branding.themes[][kind=theme].type.roles.heading.size |
string | Stable | 16px to 28px, at the 13px base. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.heading.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.heading.weight |
400 · 500 · 600 · 700 · 800 · 900 |
Stable | One of 400, 500, 600, 700, 800, 900. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.label |
object | Stable | A column’s head, a stat’s label and a record’s tabs, at the base size: their face, tracking, weight (400 to 700), case and features; upper sets them a step smaller. |
branding.themes[][kind=theme].type.roles.label.case |
"none" · "upper" · "small-caps" |
Stable | One of none, small-caps, upper. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.label.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.label.features |
array | Stable | |
branding.themes[][kind=theme].type.roles.label.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.label.weight |
400 · 500 · 600 · 700 |
Stable | One of 400, 500, 600, 700. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.nav |
object | Stable | The menu’s entries in the bar, at the base size: their face, tracking, weight (400 to 600) and case; upper sets them a step smaller. Used in examples/apps/lintel/app.ts. |
branding.themes[][kind=theme].type.roles.nav.case |
"none" · "upper" · "small-caps" |
Stable | One of none, small-caps, upper. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.nav.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.nav.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.nav.weight |
400 · 500 · 600 |
Stable | One of 400, 500, 600. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.section |
object | Stable | A section’s title on a record and a dashboard: its face, case and features; a dashboard’s section title also takes a size (12px to 20px), tracking and weight. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.section.case |
"none" · "upper" · "small-caps" |
Stable | One of none, small-caps, upper. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.section.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.section.features |
array | Stable | |
branding.themes[][kind=theme].type.roles.section.size |
string | Stable | 12px to 20px, at the 13px base. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.section.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.section.weight |
400 · 500 · 600 · 700 · 800 · 900 |
Stable | One of 400, 500, 600, 700, 800, 900. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.title |
object | Stable | A record’s and a dashboard’s name: its face, size (20px to 36px), leading, tracking, weight, case and features; its weight is every heading’s. |
branding.themes[][kind=theme].type.roles.title.case |
"none" · "upper" · "small-caps" |
Stable | One of none, small-caps, upper. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.title.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.title.features |
array | Stable | |
branding.themes[][kind=theme].type.roles.title.leading |
number | Stable | |
branding.themes[][kind=theme].type.roles.title.size |
string | Stable | 20px to 36px, at the 13px base. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.title.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
branding.themes[][kind=theme].type.roles.title.weight |
400 · 500 · 600 · 700 · 800 · 900 |
Stable | One of 400, 500, 600, 700, 800, 900. Used in examples/apps/lintel/blueprint.ts. |
| Key | Type | Status | What it does |
|---|---|---|---|
ui |
object | Stable | Chrome and formatting: the one nested block of the root. Used in examples/apps/tick/app.ts. |
ui.appSwitcher
Section titled “ui.appSwitcher”| Key | Type | Status | What it does |
|---|---|---|---|
ui.appSwitcher |
object | Stable | Explicit authored App choices only. Omission means no switcher. Group labels and link labels within each group must be unique after trimming and case folding (checked by the parser). |
ui.appSwitcher.apps |
array | Stable | One of authorized. |
ui.appSwitcher.groups |
array | Stable | Used in examples/apps/tick/app.ts. |
ui.appSwitcher.groups[].label |
string | Stable | |
ui.appSwitcher.groups[].links |
array | Stable | Used in examples/apps/lintel/pages/unit.ts. |
ui.appSwitcher.groups[].links[].label |
string | Stable | |
ui.appSwitcher.groups[].links[].to |
appTargetStatic | Stable | One of <appTarget>. Used in examples/apps/lintel/dashboards.ts. |
ui.appSwitcher.label |
string | Stable | |
ui.appSwitcher.placement |
"navbar" · "account" |
Stable | One of account, navbar. Used in examples/apps/tick/app.ts. |
ui.connect
Section titled “ui.connect”| Key | Type | Status | What it does |
|---|---|---|---|
ui.connect |
array | Stable | Origins beside the App’s own its custom components may send requests to (https://api.example.com): the page’s connect-src, recorded in authority.lock. |
ui.currency
Section titled “ui.currency”| Key | Type | Status | What it does |
|---|---|---|---|
ui.currency |
string | Stable | ISO 4217 default for money rules that name none. Defaults to USD. Used in examples/apps/lintel/app.ts. |
ui.customThemes
Section titled “ui.customThemes”| Key | Type | Status | What it does |
|---|---|---|---|
ui.customThemes |
array | Stable | Reusable visual definitions offered in Preferences. Theme ids must be unique and cannot shadow built-ins. Used in examples/apps/lintel/app.ts. |
ui.customThemes[]
Section titled “ui.customThemes[]”| Key | Type | Status | What it does |
|---|---|---|---|
ui.customThemes[] |
Stable | The same keys as theme. |
ui.editing
Section titled “ui.editing”| Key | Type | Status | What it does |
|---|---|---|---|
ui.editing |
object | Stable | Existing-record save preference. Omission keeps explicit Save; Workbench always uses explicit review/apply. Grants no write capability. Used in examples/apps/tick/app.ts. |
ui.editing.save |
"explicit" · "blur" |
Stable | One of blur, explicit. Used in examples/apps/tick/app.ts. |
ui.export
Section titled “ui.export”| Key | Type | Status | What it does |
|---|---|---|---|
ui.export |
boolean | Stable | false hides the Export menu everywhere the app curates, and the server refuses the file as well, over any role’s export grant. Default true. Used in examples/apps/lintel/app.ts. |
ui.footer
Section titled “ui.footer”| Key | Type | Status | What it does |
|---|---|---|---|
ui.footer |
object | Stable | The App’s footer, drawn under every room. Used in examples/apps/lintel/app.ts. |
ui.footer.links |
array | Stable | Used in examples/apps/lintel/pages/unit.ts. |
ui.footer.links[].href |
string | Stable | https://, mailto: or tel: only — never a relative path, http:, javascript: or data:. Checked at load. |
ui.footer.links[].label |
string | Stable | |
ui.footer.text |
string | Stable |
ui.images
Section titled “ui.images”| Key | Type | Status | What it does |
|---|---|---|---|
ui.images |
array | Stable | Origins its custom components may load pictures from, beside its own: the page’s img-src, recorded in authority.lock. Once an App serves components, pictures come only from its own origin and these. |
ui.locale
Section titled “ui.locale”| Key | Type | Status | What it does |
|---|---|---|---|
ui.locale |
string | object | Stable | BCP 47 tag the App is said and written in: the language of its captions where it has messages/ catalogs, and every figure — numbers, money, percents, dates, times, relative days and counts (“en-AU”). Absent: the reader’s browser decides the figures. { column, default } reads each reader’s own tag from the first row of that text column they may read; a tenant’s (branding allow locale) comes next, then default. Used in examples/apps/lintel/app.ts. |
ui.locale.column |
string | Stable | The resource’s text column naming the reader’s language tag: “person.locale”. Used in examples/apps/lintel/app.ts. |
ui.locale.default |
string | Stable | The App’s own language: its source catalog’s, and the reader’s where nothing nearer names one. |
ui.logo
Section titled “ui.logo”| Key | Type | Status | What it does |
|---|---|---|---|
ui.logo |
appIcon | object | Stable | A decorative brand mark beside the App name: a curated App icon, or the App’s own picture, a file in its directory served from its own origin, never a URL. One of <appIcon>. Used in examples/apps/tick/app.ts. |
ui.logo.dark |
string | Stable | The picture drawn on a dark bar: in dark mode, and by day under a theme whose bar is dark. Used in examples/apps/lintel/blueprint.ts. |
ui.logo.mark |
string | Stable | A square picture for the browser tab; omitted, the tab shows src. |
ui.logo.src |
string | Stable | The picture the bar draws, in a 96 by 24 box. |
ui.messages
Section titled “ui.messages”| Key | Type | Status | What it does |
|---|---|---|---|
ui.messages |
object | Stable | A tenant’s own words over the App’s catalogs, read from a record: fromRecord(resource, { by: ‘tenant’, tenantField, fields: { key, locale, text } }). A row is checked as it is written — a key the source catalog has, a language tag, ICU text reading only the source’s arguments — and a row that fails is skipped when read. |
ui.messages.by |
Stable | One of tenant. Used in examples/apps/lintel/commands/maintenance.ts. |
|
ui.messages.fields |
object | Stable | Used in examples/apps/tick/app.ts. |
ui.messages.fields.key |
string | Stable | Used in examples/apps/lintel/jobs.ts. |
ui.messages.fields.locale |
string | Stable | Used in examples/apps/lintel/app.ts. |
ui.messages.fields.text |
string | Stable | |
ui.messages.from |
string | Stable | Used in examples/apps/lintel/app.ts. |
ui.messages.kind |
Stable | One of fromRecord. Used in examples/apps/lintel/blueprint.ts. |
|
ui.messages.tenantField |
string | Stable |
ui.shell
Section titled “ui.shell”| Key | Type | Status | What it does |
|---|---|---|---|
ui.shell |
object | Stable | App shell visibility, spacing and placement. Omitted settings keep the existing UI. Used in examples/apps/tick/app.ts. |
ui.shell.breadcrumbs |
boolean | Stable | false hides the crumb bar above each room. Default true. Used in examples/apps/tick/app.ts. |
ui.shell.counts |
boolean | Stable | Show live row counts beside the App menu’s lists of work: a list whose condition picks its machine’s unfinished states, a date at or before today (said in the danger’s ink), or the reader (me). A list’s own count: true or false says otherwise. Defaults to false; Workbench estimates remain. Default false. Used in examples/apps/lintel/app.ts. |
ui.shell.gutter |
"none" · "compact" · "normal" · "comfortable" |
Stable | One of comfortable, compact, none, normal. Used in examples/apps/tick/app.ts. |
ui.shell.headerWidth |
"full" · "content" |
Stable | content aligns header contents to shell width and gutter while its background and border remain full width. Omit or use full to keep the existing header. One of content, full. Used in examples/apps/tick/app.ts. |
ui.shell.menuSearch |
boolean | Stable | Show the sidebar menu filter. Hidden by default in App mode; Workbench is unchanged. Default false. |
ui.shell.new |
array | Stable | The header’s New menu: one “+ New” button beside the bell listing every way to make something, each a list by its view key (its New form) or a signed-in form by its view key or the command it runs. Each reader sees the entries they may use; none, no button. The palette lists the same entries, and naming a form here counts as referencing it. A long menu groups its lines under headings, as nav groups do: { label, children }. Used in examples/apps/lintel/app.ts. |
ui.shell.new[].children |
array | Stable | Its lines, in order. |
ui.shell.new[].children[].command |
string | Stable | A command exactly one signed-in form runs; the entry opens that form. Used in examples/apps/lintel/app.ts. |
ui.shell.new[].children[].icon |
"house" · "tray" · "list" · "list-checks" · "kanban" · "table" · "calendar" · "calendar-check" · "clock" · "chart-bar" · "chart-line" · "chart-pie" · "gauge" · "target" · "flag" · "user" · "users" · "user-circle" · "address-book" · "handshake" · "buildings" · "storefront" · "briefcase" · "package" · "truck" · "car" · "shopping-cart" · "receipt" · "currency-dollar" · "credit-card" · "wallet" · "bank" · "file" · "file-text" · "folder" · "clipboard-text" · "note" · "archive" · "tag" · "ticket" · "star" · "bookmark-simple" · "bell" · "envelope" · "chat-circle" · "phone" · "headset" · "megaphone" · "globe" · "map-pin" · "magnifying-glass" · "gear" · "sliders" · "wrench" · "bug" · "shield-check" · "lock" · "key" · "database" · "stack" · "lightning" · "check-circle" · "warning" · "info" · "cell-signal-low" · "cell-signal-medium" · "cell-signal-high" · "cell-signal-full" · "fire" · "hourglass" · "circle-dashed" · "x-circle" · "plus-circle" · "pencil-simple" · "paper-plane-tilt" · "arrows-left-right" · "arrow-circle-down" · "arrow-circle-up" · "laptop" · "monitor" · "device-mobile" · "printer" · "stethoscope" · "heartbeat" · "heart" · "pill" · "syringe" · "first-aid-kit" · "thermometer" · "flask" · "test-tube" · "microscope" · "bed" · "hospital" · "ambulance" · "tooth" · "eyeglasses" · "wheelchair" · "baby" · "dna" · "brain" · "bandaids" · "hand-heart" · "graduation-cap" · "book-open" · "student" · "chalkboard-teacher" · "factory" · "warehouse" · "house-line" · "plant" · "leaf" · "sun" · "cloud" · "drop" · "airplane" · "bicycle" · "bus" · "train" · "boat" · "hammer" · "toolbox" · "plug" · "lightbulb" · "cube" · "camera" · "image" · "trophy" · "gift" · "coffee" · "fork-knife" · "shopping-bag" · "basket" · "barcode" · "qr-code" · "scales" · "gavel" · "certificate" · "identification-card" · "fingerprint" · "eye" · "link" · "paperclip" · "scissors" · "palette" · "code" · "terminal" · "users-three" · "user-plus" |
Stable | A menu mark: one of Phosphor’s icons by its own name (phosphoricons.com, MIT), from the curated set in src/shared/appIcons.ts. One of <appIcon>. Used in examples/apps/lintel/app.ts. |
ui.shell.new[].children[].label |
string | Stable | The line’s words. Absent, the list’s noun or the form’s label. |
ui.shell.new[].children[].view |
string | Stable | A list (its New form) or a signed-in form, by view key. Used in examples/apps/lintel/app.ts. |
ui.shell.new[].command |
string | Stable | A command exactly one signed-in form runs; the entry opens that form. Used in examples/apps/lintel/app.ts. |
ui.shell.new[].icon |
"house" · "tray" · "list" · "list-checks" · "kanban" · "table" · "calendar" · "calendar-check" · "clock" · "chart-bar" · "chart-line" · "chart-pie" · "gauge" · "target" · "flag" · "user" · "users" · "user-circle" · "address-book" · "handshake" · "buildings" · "storefront" · "briefcase" · "package" · "truck" · "car" · "shopping-cart" · "receipt" · "currency-dollar" · "credit-card" · "wallet" · "bank" · "file" · "file-text" · "folder" · "clipboard-text" · "note" · "archive" · "tag" · "ticket" · "star" · "bookmark-simple" · "bell" · "envelope" · "chat-circle" · "phone" · "headset" · "megaphone" · "globe" · "map-pin" · "magnifying-glass" · "gear" · "sliders" · "wrench" · "bug" · "shield-check" · "lock" · "key" · "database" · "stack" · "lightning" · "check-circle" · "warning" · "info" · "cell-signal-low" · "cell-signal-medium" · "cell-signal-high" · "cell-signal-full" · "fire" · "hourglass" · "circle-dashed" · "x-circle" · "plus-circle" · "pencil-simple" · "paper-plane-tilt" · "arrows-left-right" · "arrow-circle-down" · "arrow-circle-up" · "laptop" · "monitor" · "device-mobile" · "printer" · "stethoscope" · "heartbeat" · "heart" · "pill" · "syringe" · "first-aid-kit" · "thermometer" · "flask" · "test-tube" · "microscope" · "bed" · "hospital" · "ambulance" · "tooth" · "eyeglasses" · "wheelchair" · "baby" · "dna" · "brain" · "bandaids" · "hand-heart" · "graduation-cap" · "book-open" · "student" · "chalkboard-teacher" · "factory" · "warehouse" · "house-line" · "plant" · "leaf" · "sun" · "cloud" · "drop" · "airplane" · "bicycle" · "bus" · "train" · "boat" · "hammer" · "toolbox" · "plug" · "lightbulb" · "cube" · "camera" · "image" · "trophy" · "gift" · "coffee" · "fork-knife" · "shopping-bag" · "basket" · "barcode" · "qr-code" · "scales" · "gavel" · "certificate" · "identification-card" · "fingerprint" · "eye" · "link" · "paperclip" · "scissors" · "palette" · "code" · "terminal" · "users-three" · "user-plus" |
Stable | A menu mark: one of Phosphor’s icons by its own name (phosphoricons.com, MIT), from the curated set in src/shared/appIcons.ts. One of <appIcon>. Used in examples/apps/lintel/app.ts. |
ui.shell.new[].label |
string | Stable | The line’s words. Absent, the list’s noun or the form’s label. |
ui.shell.new[].view |
string | Stable | A list (its New form) or a signed-in form, by view key. Used in examples/apps/lintel/app.ts. |
ui.shell.placement |
object | Stable | Where the nav lives: the sidebar (default) or a top bar under the header; or { top: roles }, the top bar for a person whose every role is listed and the sidebar for anyone holding another. One of side, top. Used in examples/apps/tick/app.ts. |
ui.shell.placement.top |
array | Stable | |
ui.shell.rail |
boolean | Stable | With the side placement: folding the sidebar leaves a rail of the entries’ icons by default. Set false to hide it completely. An App with no nav has no menu. Default true. Used in examples/apps/lintel/app.ts. |
ui.shell.search |
boolean | object | Stable | The header’s search: its box and its button, on a phone too. A member sees it by default and a signed-out visitor does not; { signedOut: true } offers it to a visitor as well, and false hides it from everyone. Default true. Used in examples/apps/tick/app.ts. |
ui.shell.search.signedOut |
boolean | Stable | Offers the header’s search to a signed-out visitor too, for an App whose public pages are worth searching. One of true. Used in examples/apps/lintel/app.ts. |
ui.shell.sidebar |
object | Stable | Sidebar-specific presentation. Its footer is static workspace identity, never a tenant or account switcher. Used in examples/apps/lintel/app.ts. |
ui.shell.sidebar.density |
"compact" · "comfortable" |
Stable | Menu row spacing. Omit for the existing rhythm. One of comfortable, compact. Used in examples/apps/lintel/blueprint.ts. |
ui.shell.sidebar.footer |
object | Stable | Static workspace identity at the bottom of the sidebar. Used in examples/apps/lintel/app.ts. |
ui.shell.sidebar.footer.description |
string | Stable | Used in examples/apps/lintel/app.ts. |
ui.shell.sidebar.footer.title |
string | Stable | A non-blank workspace name. |
ui.shell.title |
boolean | Stable | false keeps each room’s heading for a screen reader only, and drops a list’s empty chip row and count. Default true. |
ui.shell.width |
"full" · "wide" · "narrow" |
Stable | One of full, narrow, wide. Used in examples/apps/tick/app.ts. |
ui.theme
Section titled “ui.theme”| Key | Type | Status | What it does |
|---|---|---|---|
ui.theme |
object | Stable | The App’s look: a built-in or one of customThemes by name ({ preset }), with the App’s accent, or one read from a record (fromRecord). Used in examples/apps/lintel/app.ts. |
ui.theme.accent |
string | object | Stable | The App’s own color: one, authored for the light ground and mixed toward white on the dark one, or { light, dark }, one for each, worn as written. The soft tint of a selected item derives from it. Used in examples/apps/lintel/blueprint.ts. |
ui.theme.accent.dark |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
ui.theme.accent.light |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
ui.theme.font |
string | Stable | A CSS font stack for the data face. Code surfaces keep the code face. Used in examples/apps/lintel/blueprint.ts. |
ui.theme.for |
object | Stable | A theme per audience: public for every page a signed-out visitor sees, worn whatever a reader picked; and one per role, the first entry in written order the account holds, over a tenant’s saved theme. A reader’s own pick still wins in the shell. Each names a built-in or one of customThemes; each role is one of auth.roles. |
ui.theme.for.public |
string | Stable | Used in examples/apps/lintel/app.ts. |
ui.theme.for.roles |
object | Stable | |
ui.theme.palette |
string | Stable | A palette of the selected preset, or default for its original colors. Requires preset; references are checked by the App parser. |
ui.theme.preset |
string | Stable | A built-in theme, or one of customThemes, used by the Default preference. Used in examples/apps/lintel/app.ts. |
ui.theme.radius |
string | Stable | A CSS length: “0”, “10px”. Used in examples/apps/lintel/blueprint.ts. |
ui.theme[kind=fromRecord]
Section titled “ui.theme[kind=fromRecord]”| Key | Type | Status | What it does |
|---|---|---|---|
ui.theme[kind=fromRecord].by |
"host" · "tenant" |
Stable | One of host, tenant. Used in examples/apps/lintel/commands/maintenance.ts. |
ui.theme[kind=fromRecord].fallback |
object | Stable | |
ui.theme[kind=fromRecord].fallback.preset |
"lumen" · "mono" · "sage" |
Stable | One of lumen, mono, sage. Used in examples/apps/lintel/app.ts. |
ui.theme[kind=fromRecord].fields |
object | Stable | Used in examples/apps/tick/app.ts. |
ui.theme[kind=fromRecord].fields.about |
string | Stable | Used in examples/apps/lintel/views.ts. |
ui.theme[kind=fromRecord].fields.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
ui.theme[kind=fromRecord].fields.barStyle |
string | Stable | |
ui.theme[kind=fromRecord].fields.fontPair |
string | Stable | |
ui.theme[kind=fromRecord].fields.heading |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
ui.theme[kind=fromRecord].fields.hero |
object | Stable | |
ui.theme[kind=fromRecord].fields.hero.alt |
string | Stable | Used in examples/apps/lintel/landing.ts. |
ui.theme[kind=fromRecord].fields.hero.from |
string | Stable | Used in examples/apps/lintel/app.ts. |
ui.theme[kind=fromRecord].fields.hero.key |
object | Stable | Used in examples/apps/lintel/jobs.ts. |
ui.theme[kind=fromRecord].fields.hours |
string | Stable | |
ui.theme[kind=fromRecord].fields.logo |
object | Stable | Used in examples/apps/tick/app.ts. |
ui.theme[kind=fromRecord].fields.logo.alt |
string | Stable | Used in examples/apps/lintel/landing.ts. |
ui.theme[kind=fromRecord].fields.logo.from |
string | Stable | Used in examples/apps/lintel/app.ts. |
ui.theme[kind=fromRecord].fields.logo.key |
object | Stable | Used in examples/apps/lintel/jobs.ts. |
ui.theme[kind=fromRecord].fields.name |
string | Stable | Used in examples/apps/tick/app.ts. |
ui.theme[kind=fromRecord].fields.preset |
string | Stable | Used in examples/apps/lintel/app.ts. |
ui.theme[kind=fromRecord].fields.tagline |
string | Stable | |
ui.theme[kind=fromRecord].from |
string | Stable | Used in examples/apps/lintel/app.ts. |
ui.theme[kind=fromRecord].kind |
Stable | One of fromRecord. Used in examples/apps/lintel/blueprint.ts. |
|
ui.theme[kind=fromRecord].publishedField |
string | Stable | |
ui.theme[kind=fromRecord].tenantField |
string | Stable |
ui.timezone
Section titled “ui.timezone”| Key | Type | Status | What it does |
|---|---|---|---|
ui.timezone |
string | object | Stable | IANA zone the app’s “today” is reckoned in (“Australia/Sydney”). Absent: the server’s clock. A TIMESTAMP or DATETIME that carries no zone holds the wall clock in this zone (UTC when the App names none) — whatever writes it: an action’s now, a machine’s since, a Date a command writes, a New form’s now. A column with a zone (timestamptz) holds the instant. { column, default } counts each reader’s days in the zone the first row of that text column they may read names (their tenant’s, their account’s); writes keep default. Used in examples/apps/lintel/app.ts. |
ui.timezone.column |
string | Stable | The resource’s text column naming the reader’s IANA zone: “desk_setting.timezone”. Used in examples/apps/lintel/app.ts. |
ui.timezone.default |
string | Stable | The App’s own zone: what writes keep, and the reader’s where the row names none. |
theme file: theme.colors
Section titled “theme file: theme.colors”| Key | Type | Status | What it does |
|---|---|---|---|
theme.colors |
object | Stable | Required, with ground, surface, ink and accent in both modes, unless the theme extends a built-in; then partial. Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.colors.dark
Section titled “theme file: theme.colors.dark”| Key | Type | Status | What it does |
|---|---|---|---|
theme.colors.dark |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.accentInk |
string | Stable | |
theme.colors.dark.accentSoft |
string | Stable | |
theme.colors.dark.band |
string | Stable | Every other row of a banded table (recipes.table). Omitted, raised. Each ink is checked on it as on the page. Used in examples/apps/lintel/theme.ts. |
theme.colors.dark.chart |
array | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.focus |
string | Stable | |
theme.colors.dark.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.inkMuted |
string | Stable | |
theme.colors.dark.inkSubtle |
string | Stable | |
theme.colors.dark.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.lineControl |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.lineStrong |
string | Stable | |
theme.colors.dark.link |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.nav |
object | Stable | Used in examples/apps/lintel/app.ts. |
theme.colors.dark.nav.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.nav.current |
string | Stable | Used in examples/apps/lintel/resources.ts. |
theme.colors.dark.nav.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.nav.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.nav.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.nav.muted |
string | Stable | |
theme.colors.dark.nav.onCurrent |
string | Stable | |
theme.colors.dark.onAccent |
string | Stable | |
theme.colors.dark.raised |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.rules |
object | Stable | |
theme.colors.dark.rules.head |
string | Stable | |
theme.colors.dark.rules.section |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.shadow |
string | Stable | The ink every lift is mixed from: a card’s, a menu’s, a dialog’s shadow. Omitted, the look’s (its ink by day, its ground by night). Never lighter than ground (theme-shadow). |
theme.colors.dark.status |
object | Stable | |
theme.colors.dark.status.critical |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.status.good |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.dark.status.info |
string | Stable | |
theme.colors.dark.status.warning |
string | Stable | |
theme.colors.dark.surface |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.colors.light
Section titled “theme file: theme.colors.light”| Key | Type | Status | What it does |
|---|---|---|---|
theme.colors.light |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.accentInk |
string | Stable | |
theme.colors.light.accentSoft |
string | Stable | |
theme.colors.light.band |
string | Stable | Every other row of a banded table (recipes.table). Omitted, raised. Each ink is checked on it as on the page. Used in examples/apps/lintel/theme.ts. |
theme.colors.light.chart |
array | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.focus |
string | Stable | |
theme.colors.light.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.inkMuted |
string | Stable | |
theme.colors.light.inkSubtle |
string | Stable | |
theme.colors.light.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.lineControl |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.lineStrong |
string | Stable | |
theme.colors.light.link |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.nav |
object | Stable | Used in examples/apps/lintel/app.ts. |
theme.colors.light.nav.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.nav.current |
string | Stable | Used in examples/apps/lintel/resources.ts. |
theme.colors.light.nav.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.nav.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.nav.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.nav.muted |
string | Stable | |
theme.colors.light.nav.onCurrent |
string | Stable | |
theme.colors.light.onAccent |
string | Stable | |
theme.colors.light.raised |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.rules |
object | Stable | |
theme.colors.light.rules.head |
string | Stable | |
theme.colors.light.rules.section |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.shadow |
string | Stable | The ink every lift is mixed from: a card’s, a menu’s, a dialog’s shadow. Omitted, the look’s (its ink by day, its ground by night). Never lighter than ground (theme-shadow). |
theme.colors.light.status |
object | Stable | |
theme.colors.light.status.critical |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.status.good |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.colors.light.status.info |
string | Stable | |
theme.colors.light.status.warning |
string | Stable | |
theme.colors.light.surface |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.contract
Section titled “theme file: theme.contract”| Key | Type | Status | What it does |
|---|---|---|---|
theme.contract |
Stable | The theme contract a published look was written to. A theme written to another is refused, naming the release to install. One of 1. |
theme file: theme.defaultPalette
Section titled “theme file: theme.defaultPalette”| Key | Type | Status | What it does |
|---|---|---|---|
theme.defaultPalette |
string | Stable | default or a declared palette id; references are checked by the App parser. |
theme file: theme.density
Section titled “theme file: theme.density”| Key | Type | Status | What it does |
|---|---|---|---|
theme.density |
"compact" · "comfortable" · "spacious" |
Stable | One of comfortable, compact, spacious. Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.extends
Section titled “theme file: theme.extends”| Key | Type | Status | What it does |
|---|---|---|---|
theme.extends |
object | Stable | Start from a built-in look, or from a theme, and say only what differs. Without it, colors names ground, surface, ink and accent in both modes and the rest is derived. One of lumen, mono, sage. Used in examples/apps/lintel/app.ts. |
theme file: theme.extends[kind=theme]
Section titled “theme file: theme.extends[kind=theme]”| Key | Type | Status | What it does |
|---|---|---|---|
theme.extends[kind=theme].kind |
Stable | One of theme. Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.from
Section titled “theme file: theme.from”| Key | Type | Status | What it does |
|---|---|---|---|
theme.from |
string | Stable | A published look’s import.meta.url, so its faces and stylesheet are read from the package that holds them, never from the App that installs it. Requires contract. Used in examples/apps/lintel/app.ts. |
theme file: theme.id
Section titled “theme file: theme.id”| Key | Type | Status | What it does |
|---|---|---|---|
theme.id |
string | Stable |
theme file: theme.kind
Section titled “theme file: theme.kind”| Key | Type | Status | What it does |
|---|---|---|---|
theme.kind |
Stable | One of theme. Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.label
Section titled “theme file: theme.label”| Key | Type | Status | What it does |
|---|---|---|---|
theme.label |
string | Stable |
theme file: theme.motion
Section titled “theme file: theme.motion”| Key | Type | Status | What it does |
|---|---|---|---|
theme.motion |
"house" · "brisk" · "still" |
Stable | How fast things enter: house (omitted) as the platform moves, brisk a quarter quicker, still with nothing entering, as reduced motion draws it. A reader who asks for reduced motion gets still under every pace. One of brisk, house, still. |
theme file: theme.palettes
Section titled “theme file: theme.palettes”| Key | Type | Status | What it does |
|---|---|---|---|
theme.palettes |
array | Stable | Named color variations over the theme’s own colors. IDs must be unique within the theme, checked by the App parser. |
theme file: theme.palettes[].dark
Section titled “theme file: theme.palettes[].dark”| Key | Type | Status | What it does |
|---|---|---|---|
theme.palettes[].dark |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.accentInk |
string | Stable | |
theme.palettes[].dark.accentSoft |
string | Stable | |
theme.palettes[].dark.band |
string | Stable | Every other row of a banded table (recipes.table). Omitted, raised. Each ink is checked on it as on the page. Used in examples/apps/lintel/theme.ts. |
theme.palettes[].dark.chart |
array | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.focus |
string | Stable | |
theme.palettes[].dark.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.inkMuted |
string | Stable | |
theme.palettes[].dark.inkSubtle |
string | Stable | |
theme.palettes[].dark.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.lineControl |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.lineStrong |
string | Stable | |
theme.palettes[].dark.link |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.nav |
object | Stable | Used in examples/apps/lintel/app.ts. |
theme.palettes[].dark.nav.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.nav.current |
string | Stable | Used in examples/apps/lintel/resources.ts. |
theme.palettes[].dark.nav.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.nav.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.nav.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.nav.muted |
string | Stable | |
theme.palettes[].dark.nav.onCurrent |
string | Stable | |
theme.palettes[].dark.onAccent |
string | Stable | |
theme.palettes[].dark.raised |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.rules |
object | Stable | |
theme.palettes[].dark.rules.head |
string | Stable | |
theme.palettes[].dark.rules.section |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.shadow |
string | Stable | The ink every lift is mixed from: a card’s, a menu’s, a dialog’s shadow. Omitted, the look’s (its ink by day, its ground by night). Never lighter than ground (theme-shadow). |
theme.palettes[].dark.status |
object | Stable | |
theme.palettes[].dark.status.critical |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.status.good |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].dark.status.info |
string | Stable | |
theme.palettes[].dark.status.warning |
string | Stable | |
theme.palettes[].dark.surface |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.palettes[].id
Section titled “theme file: theme.palettes[].id”| Key | Type | Status | What it does |
|---|---|---|---|
theme.palettes[].id |
string | Stable |
theme file: theme.palettes[].label
Section titled “theme file: theme.palettes[].label”| Key | Type | Status | What it does |
|---|---|---|---|
theme.palettes[].label |
string | Stable |
theme file: theme.palettes[].light
Section titled “theme file: theme.palettes[].light”| Key | Type | Status | What it does |
|---|---|---|---|
theme.palettes[].light |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.accentInk |
string | Stable | |
theme.palettes[].light.accentSoft |
string | Stable | |
theme.palettes[].light.band |
string | Stable | Every other row of a banded table (recipes.table). Omitted, raised. Each ink is checked on it as on the page. Used in examples/apps/lintel/theme.ts. |
theme.palettes[].light.chart |
array | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.focus |
string | Stable | |
theme.palettes[].light.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.inkMuted |
string | Stable | |
theme.palettes[].light.inkSubtle |
string | Stable | |
theme.palettes[].light.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.lineControl |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.lineStrong |
string | Stable | |
theme.palettes[].light.link |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.nav |
object | Stable | Used in examples/apps/lintel/app.ts. |
theme.palettes[].light.nav.accent |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.nav.current |
string | Stable | Used in examples/apps/lintel/resources.ts. |
theme.palettes[].light.nav.ground |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.nav.ink |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.nav.line |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.nav.muted |
string | Stable | |
theme.palettes[].light.nav.onCurrent |
string | Stable | |
theme.palettes[].light.onAccent |
string | Stable | |
theme.palettes[].light.raised |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.rules |
object | Stable | |
theme.palettes[].light.rules.head |
string | Stable | |
theme.palettes[].light.rules.section |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.shadow |
string | Stable | The ink every lift is mixed from: a card’s, a menu’s, a dialog’s shadow. Omitted, the look’s (its ink by day, its ground by night). Never lighter than ground (theme-shadow). |
theme.palettes[].light.status |
object | Stable | |
theme.palettes[].light.status.critical |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.status.good |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.palettes[].light.status.info |
string | Stable | |
theme.palettes[].light.status.warning |
string | Stable | |
theme.palettes[].light.surface |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.parts
Section titled “theme file: theme.parts”| Key | Type | Status | What it does |
|---|---|---|---|
theme.parts |
object | Stable | Each published part’s own style, by its name: ground, bar, bar.search, nav, nav.item, nav.current, nav.group, logo, page.title, tabs, tab.current, section, section.title, stat, stat.figure, fields, field.label, table, table.head, table.row, status, tag, button.primary, button.secondary, button.quiet, link, board.lane, board.card, workflow.step, banner, steps.step, avatar, menu, dialog, chart. Contract 1: a 1.x release may publish another part and withdraws none. Used in examples/apps/lintel/blueprint.ts. |
theme.parts.*.case |
"none" · "upper" · "small-caps" |
Stable | Capitals: upper or small-caps, tracked as the theme’s labels are; none undoes the look’s. One of none, small-caps, upper. Used in examples/apps/lintel/blueprint.ts. |
theme.parts.*.edge |
"ground" · "surface" · "raised" · "line" · "lineStrong" · "lineControl" · "ink" · "inkMuted" · "inkSubtle" · "accent" · "onAccent" · "accentInk" · "focus" · "accentSoft" · "link" · "status.good" · "status.warning" · "status.critical" · "status.info" · "nav.ground" · "nav.ink" · "nav.muted" · "nav.line" · "nav.accent" · "nav.current" · "nav.onCurrent" · "rules.section" · "rules.head" · "band" · "chart[0]" · "chart[1]" · "chart[2]" · "chart[3]" · "chart[4]" · "chart[5]" · "chart[6]" · "chart[7]" |
Stable | Its border’s color, where it has one. One of accent, accentInk, accentSoft, band, chart[0], chart[1], chart[2], chart[3], chart[4], chart[5], chart[6], chart[7], focus, ground, ink, inkMuted, inkSubtle, line, lineControl, lineStrong, link, nav.accent, nav.current, nav.ground, nav.ink, nav.line, nav.muted, nav.onCurrent, onAccent, raised, rules.head, rules.section, status.critical, status.good, status.info, status.warning, surface. |
theme.parts.*.face |
"ui" · "heading" · "data" |
Stable | One of the theme’s faces. One of data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
theme.parts.*.ground |
"ground" · "surface" · "raised" · "line" · "lineStrong" · "lineControl" · "ink" · "inkMuted" · "inkSubtle" · "accent" · "onAccent" · "accentInk" · "focus" · "accentSoft" · "link" · "status.good" · "status.warning" · "status.critical" · "status.info" · "nav.ground" · "nav.ink" · "nav.muted" · "nav.line" · "nav.accent" · "nav.current" · "nav.onCurrent" · "rules.section" · "rules.head" · "band" · "chart[0]" · "chart[1]" · "chart[2]" · "chart[3]" · "chart[4]" · "chart[5]" · "chart[6]" · "chart[7]" |
Stable | What it is drawn on. One of accent, accentInk, accentSoft, band, chart[0], chart[1], chart[2], chart[3], chart[4], chart[5], chart[6], chart[7], focus, ground, ink, inkMuted, inkSubtle, line, lineControl, lineStrong, link, nav.accent, nav.current, nav.ground, nav.ink, nav.line, nav.muted, nav.onCurrent, onAccent, raised, rules.head, rules.section, status.critical, status.good, status.info, status.warning, surface. Used in examples/apps/lintel/blueprint.ts. |
theme.parts.*.ink |
"ground" · "surface" · "raised" · "line" · "lineStrong" · "lineControl" · "ink" · "inkMuted" · "inkSubtle" · "accent" · "onAccent" · "accentInk" · "focus" · "accentSoft" · "link" · "status.good" · "status.warning" · "status.critical" · "status.info" · "nav.ground" · "nav.ink" · "nav.muted" · "nav.line" · "nav.accent" · "nav.current" · "nav.onCurrent" · "rules.section" · "rules.head" · "band" · "chart[0]" · "chart[1]" · "chart[2]" · "chart[3]" · "chart[4]" · "chart[5]" · "chart[6]" · "chart[7]" |
Stable | Its words; check measures them on its ground. One of accent, accentInk, accentSoft, band, chart[0], chart[1], chart[2], chart[3], chart[4], chart[5], chart[6], chart[7], focus, ground, ink, inkMuted, inkSubtle, line, lineControl, lineStrong, link, nav.accent, nav.current, nav.ground, nav.ink, nav.line, nav.muted, nav.onCurrent, onAccent, raised, rules.head, rules.section, status.critical, status.good, status.info, status.warning, surface. Used in examples/apps/lintel/blueprint.ts. |
theme.parts.*.lift |
"none" · "hairline" · "low" · "mid" · "high" |
Stable | A lift from the theme’s steps, in its shadow ink. One of hairline, high, low, mid, none. |
theme.parts.*.radius |
"control" · "field" · "pill" · "panel" · "square" |
Stable | One of the theme’s own corners, or square. One of control, field, panel, pill, square. Used in examples/apps/lintel/blueprint.ts. |
theme.parts.*.weight |
400 · 500 · 600 · 700 |
Stable | One of 400, 500, 600, 700. Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.recipes
Section titled “theme file: theme.recipes”| Key | Type | Status | What it does |
|---|---|---|---|
theme.recipes |
object | Stable | Each part’s treatment, from the closed menu the built-in looks wear. Used in examples/apps/lintel/blueprint.ts. |
theme.recipes.avatar |
"plain" · "large" · "round" |
Stable | plain: A record’s avatar is its initials in a small square. large: A record’s avatar is 44px, in the look’s corners. round: A record’s avatar is 44px and round, and the menu’s and the account’s marks are round too. One of large, plain, round. Used in examples/apps/lintel/resources.ts. |
theme.recipes.banner |
"tint" · "gradient" · "plain" |
Stable | tint: A dashboard’s banner note is a box tinted with the accent. gradient: A dashboard’s banner note is a soft gradient from the accent to the second chart color. plain: A dashboard’s banner note stands on the page with no box, its eyebrow in the link color. One of gradient, plain, tint. |
theme.recipes.bar |
"plain" · "ruled" · "dark" · "airy" · "soft" |
Stable | plain: The top bar is the menu’s ground with a hairline under it. ruled: The top bar ends in a 2px rule instead of a hairline, and casts no shadow. dark: The top bar takes the menu’s ground and inks, so a dark or brand-colored menu runs across the top too. airy: The top bar is taller, with a large bold brand name and a wide, raised search box. soft: The top bar is a panel in the surface color with a hairline under it, apart from the menu beside it. One of airy, dark, plain, ruled, soft. Used in examples/apps/lintel/blueprint.ts. |
theme.recipes.board |
"ruled" · "soft" · "strip" |
Stable | ruled: A board’s lanes are outlined by a hairline; its cards lie flat on them. soft: As ruled, but each card casts the look’s card shadow: only the cards lift. strip: Each lane is headed by a strip tinted with its tone, its cards white on the lane. One of ruled, soft, strip. Used in examples/apps/lintel/views.ts. |
theme.recipes.buttons |
"accent" · "raised" |
Stable | accent: The primary button is filled in the accent; the rest are quiet. raised: Secondary buttons are white keys with a hairline and a small shadow, raised off the page. One of accent, raised. |
theme.recipes.chart |
"plain" · "wash" · "gradient" · "line" |
Stable | plain: A chart is its lines or bars on a light grid. wash: An area under a line is washed in the first chart color. gradient: An area fades from the line down to nothing, the line heavier and the grid dashed. line: Only the lines: no areas, a fine solid grid and small ticks. One of gradient, line, plain, wash. Used in examples/apps/lintel/blueprint.ts. |
theme.recipes.fields |
"open" · "panel" · "card" · "rail" |
Stable | open: A record’s field groups and forms stand open on the page. panel: Each field group and form is a panel on the surface with a hairline; its labels stay as the look draws them. card: Each field group and form is a card with a hairline and the card shadow, its labels muted and the values in the interface face. rail: Field groups stand open, and the side column’s cards become captioned groups between hairlines. One of card, open, panel, rail. Used in examples/apps/tick/app.ts. |
theme.recipes.header |
"plain" · "band" · "hero" |
Stable | plain: A record’s head and a list’s stand on the page’s ground, under the trail’s hairline. band: A record’s head and a list’s are one band of the raised ground from edge to edge: the trail, the title, its status, facts and verbs, a list’s tabs and filters; the contents keep their edge. hero: A band, with the record’s avatar large beside its title (above it on a phone); a record without one, and a list, draw the band. One of band, hero, plain. Used in examples/apps/lintel/blueprint.ts. |
theme.recipes.lanes |
"tint" · "tag" · "plain" |
Stable | tint: A board lane’s value in its head is on its tone’s tint. tag: A board lane’s value is a solid tag in its tone, in white capitals. plain: A board lane’s value is its name in plain ink. One of plain, tag, tint. |
theme.recipes.links |
"plain" · "underline" |
Stable | plain: A link to another record is in the link color without an underline. underline: A link to another record is underlined, so it reads as one without color. One of plain, underline. Used in examples/apps/lintel/pages/unit.ts. |
theme.recipes.nav |
"tint" · "inverted" · "wash" · "underline" · "pill" · "quiet" |
Stable | tint: The current entry sits on a soft tint of the accent; the other rows stay plain. inverted: The current entry is inverted, the menu’s ink as its ground: the boldest mark, square and high-contrast. wash: The current entry sits on a wash of the menu’s own accent, stronger than tint, for a menu in a brand color. underline: The current entry in the top bar is marked by a 3px rule of the menu’s accent under it, with no fill. pill: Every row is a rounded pill with room around it; the current one is filled in the accent’s tint, its word in the accent. quiet: The current entry is barely shaded in the menu’s ink, with no accent at all: the calmest mark. One of inverted, pill, quiet, tint, underline, wash. Used in examples/apps/lintel/app.ts. |
theme.recipes.rules |
"ink" · "hairline" |
Stable | ink: A record’s sections are announced by a 2px rule in the ink. hairline: A record’s sections are announced by a 1px hairline instead. One of hairline, ink. |
theme.recipes.section |
"open" · "card" · "panel" |
Stable | open: A dashboard section stands open on the page under its rule. card: Each dashboard section is a card with a hairline and the card shadow, its table drawn to the card’s edges. panel: Each dashboard section is a panel like card, but a section in the side column stays open on the page. One of card, open, panel. Used in examples/apps/lintel/blueprint.ts. |
theme.recipes.stat |
"plain" · "framed" · "topline" · "ruled" · "icon" · "panel" · "divided" |
Stable | plain: A stat is a figure and its label with no frame. framed: Each stat is a card framed by a line in the ink: square and stark. topline: Each stat card has a 3px rule in the first chart color along its top. ruled: Each stat stands open under a 2px rule in the ink, with no card or shadow, like a printed page. icon: Each stat is a card with its icon in a round tint of a chart color above the label, and a large bold figure. panel: Each stat is a panel on the surface with a hairline and the look’s card shadow. divided: The stats share one strip, parted by hairlines, with no cards: the quietest arrangement. One of divided, framed, icon, panel, plain, ruled, topline. Used in examples/apps/lintel/blueprint.ts. |
theme.recipes.status |
"dot" · "pill" · "pill-dot" · "quiet" |
Stable | dot: A status word in its tone with a dot before it. pill: A status word on a pill tinted with its tone, without a dot. pill-dot: A status word on a pill tinted with its tone, with a small dot inside it. quiet: A status word in the ink with a dot in its tone: the color is only the dot. One of dot, pill, pill-dot, quiet. |
theme.recipes.steps |
"flat" · "tinted" · "strip" |
Stable | flat: A breakdown drawn as steps is a row of cards on the surface with a hairline. tinted: Each step’s card is tinted with its tone: good, warning, critical or the accent. strip: The steps are one strip of figures parted by hairlines, with no cards or marks. One of flat, strip, tinted. |
theme.recipes.table |
"open" · "tinted" · "hairline" · "card" · "quiet" · "banded" |
Stable | open: Rows stand on the page under a rule, the head as the look draws it. tinted: As open, but a hovered row takes a tint of the accent and its check boxes the accent: the same until a pointer moves. hairline: The head sits on a hairline in 12.5px semibold, the rows in 13.5px: open, a little roomier. card: The table is a card: muted 12px heads on a hairline, faint row rules and taller rows. quiet: The table is a card of quiet rows, a work queue’s open button folded to a chevron at the row’s end. banded: As open, but every other row lies on the band color (colors.band, or the raised ground), each ink measured on it. One of banded, card, hairline, open, quiet, tinted. Used in examples/apps/lintel/blueprint.ts. |
theme.recipes.tabs |
"pill" · "inverted" · "underline" · "rule" · "chosen" |
Stable | pill: The chosen tab is a filled pill; the others are plain words. inverted: The chosen tab is inverted, the ink as its ground: square, high-contrast. underline: The tabs stand on a hairline, wide apart, the chosen one underlined in the accent with no fill. rule: The chosen tab is underlined by a 2px rule in the link color with no fill, the tabs packed as written. chosen: The chosen tab sits on a soft tint of the accent in the ink, wider apart, with no underline. One of chosen, inverted, pill, rule, underline. Used in examples/apps/tick/app.ts. |
theme.recipes.windows |
"segmented" · "lifted" · "chosen" |
Stable | segmented: The period picker is a segmented control, the chosen period filled. lifted: The period picker is a sunken tray, the chosen period a raised white key on it. chosen: The period picker has no tray; the chosen period sits on a soft tint of the accent. One of chosen, lifted, segmented. Used in examples/apps/lintel/dashboards.ts. |
theme.recipes.workflow |
"markers" · "pills" |
Stable | markers: A workflow is a track of thin segments, the label under each. pills: A workflow is a row of pills with a dot each: a step walked in the good tint, the current one in the accent’s. One of markers, pills. Used in examples/apps/lintel/late-fees.ts. |
theme file: theme.rhythm
Section titled “theme file: theme.rhythm”| Key | Type | Status | What it does |
|---|---|---|---|
theme.rhythm |
"tight" · "house" · "airy" |
Stable | How far apart things stand: house (omitted) as the platform spaces a page, tight its layout steps (16px and up, and the section seam) a quarter closer, airy a quarter wider. A control’s own padding never moves. One of airy, house, tight. Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.scheme
Section titled “theme file: theme.scheme”| Key | Type | Status | What it does |
|---|---|---|---|
theme.scheme |
"dark" · "dark-only" |
Stable | dark: worn dark until the reader picks a mode themselves, whatever their machine is set to; it still has light colors, held to a printed page’s white paper. dark-only: no light colors at all, colors names dark alone, the theme is judged as dark and not as paper, and a reader cannot turn it light. Omitted, the theme follows the reader and their machine. One of dark, dark-only. |
theme file: theme.shape
Section titled “theme file: theme.shape”| Key | Type | Status | What it does |
|---|---|---|---|
theme.shape |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.shape.border |
object | Stable | |
theme.shape.border.control |
"1px" · "2px" |
Stable | A field’s and a select’s edge; omitted, 1px. One of 1px, 2px. Used in examples/apps/lintel/blueprint.ts. |
theme.shape.border.focus |
"2px" · "3px" |
Stable | The focus ring; omitted, 2px. One of 2px, 3px. |
theme.shape.border.panel |
"0px" · "1px" · "2px" |
Stable | A card’s and a section’s edge where the look draws one; 0px draws none. Omitted, 1px. One of 0px, 1px, 2px. Used in examples/apps/lintel/blueprint.ts. |
theme.shape.border.rule |
"1px" · "2px" · "3px" |
Stable | The rules over a section and a board’s lanes and under a table’s heads; omitted, the look’s (2px, Lumen 1px). One of 1px, 2px, 3px. |
theme.shape.elevation |
object | Stable | A preset as its look draws it (flat: Mono, no lift; hairline: the platform’s; soft: Sage; raised: Lumen), or a step for cards and one for what floats over the base’s, each none, hairline, low (the platform’s popups), mid (Sage’s) or high (Lumen’s). One of flat, hairline, raised, soft. Used in examples/apps/lintel/blueprint.ts. |
theme.shape.elevation.card |
"none" · "hairline" · "low" · "mid" · "high" |
Stable | The cards a recipe draws: a section, a field group or a stat boxed by section, fields or stat. One of hairline, high, low, mid, none. |
theme.shape.elevation.float |
"none" · "hairline" · "low" · "mid" · "high" |
Stable | What floats: a menu, a popover, a drawer; a dialog a step above. One of hairline, high, low, mid, none. |
theme.shape.radius |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.shape.radius.control |
string | Stable | A button’s, an input’s and a select’s corner, 0px to 16px, or round: a pill (every other box that follows it takes 8px). One of round. Used in examples/apps/lintel/blueprint.ts. |
theme.shape.radius.field |
string | Stable | A form field’s corner, 0px to 12px. Used in examples/apps/lintel/blueprint.ts. |
theme.shape.radius.panel |
string | Stable | A card’s, a section’s and a dialog’s corner, 0px to 20px; omitted, one and a half controls’, at most 20px. Used in examples/apps/lintel/blueprint.ts. |
theme.shape.radius.pill |
string | Stable | A status pill’s, a tag’s and a chip’s corner, 0px to 12px or round; omitted, round. One of round. Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.shell
Section titled “theme file: theme.shell”| Key | Type | Status | What it does |
|---|---|---|---|
theme.shell |
object | Stable | Where the menu is drawn, as a suggestion: it holds when this theme is the App’s own (ui.theme.preset) and ui.shell.placement says nothing. Used in examples/apps/tick/app.ts. |
theme.shell.placement |
"side" · "top" |
Stable | One of side, top. Used in examples/apps/tick/app.ts. |
theme file: theme.stylesheet
Section titled “theme file: theme.stylesheet”| Key | Type | Status | What it does |
|---|---|---|---|
theme.stylesheet |
string | Stable | A stylesheet beside the theme (8 KB at most) that styles its parts and nothing else: [data-part] selectors under the theme’s own root, and only the properties the stylesheet allowlist names. Read once when the App loads; a build serves it from its brand/ folder. |
theme file: theme.surface
Section titled “theme file: theme.surface”| Key | Type | Status | What it does |
|---|---|---|---|
theme.surface |
object | Stable | A pattern behind the page (ground) and one behind the navigation (nav), drawn in the theme’s line color; never behind a panel or a field. Used in examples/apps/lintel/blueprint.ts. |
theme.surface.ground |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.surface.ground.kind |
"paper" · "grain" · "grid" · "dots" · "lines" · "scanlines" |
Stable | paper and grain a fine speckle, grid squares, dots a dot grid, lines ruled lines, scanlines a screen’s. One of dots, grain, grid, lines, paper, scanlines. Used in examples/apps/lintel/blueprint.ts. |
theme.surface.ground.strength |
1 · 2 · 3 |
Stable | How much of the line color it is drawn in: 1 (omitted) 40%, 2 70%, 3 all of it. check measures the words over its darkest point (theme-contrast). One of 1, 2, 3. |
theme.surface.nav |
object | Stable | Used in examples/apps/lintel/app.ts. |
theme.surface.nav.kind |
"paper" · "grain" · "grid" · "dots" · "lines" · "scanlines" |
Stable | paper and grain a fine speckle, grid squares, dots a dot grid, lines ruled lines, scanlines a screen’s. One of dots, grain, grid, lines, paper, scanlines. Used in examples/apps/lintel/blueprint.ts. |
theme.surface.nav.strength |
1 · 2 · 3 |
Stable | How much of the line color it is drawn in: 1 (omitted) 40%, 2 70%, 3 all of it. check measures the words over its darkest point (theme-contrast). One of 1, 2, 3. |
theme file: theme.type
Section titled “theme file: theme.type”| Key | Type | Status | What it does |
|---|---|---|---|
theme.type |
object | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.type.base
Section titled “theme file: theme.type.base”| Key | Type | Status | What it does |
|---|---|---|---|
theme.type.base |
"13px" · "14px" · "15px" · "16px" |
Stable | The size an App’s text is drawn at; every size grows with it, the roles’ too. Omitted, 13px. One of 13px, 14px, 15px, 16px. |
theme file: theme.type.faces
Section titled “theme file: theme.type.faces”| Key | Type | Status | What it does |
|---|---|---|---|
theme.type.faces |
array | Stable | Font files from the App’s directory, each one @font-face served from the App’s own origin. The heading’s face is preloaded on first paint. |
theme file: theme.type.faces[]
Section titled “theme file: theme.type.faces[]”| Key | Type | Status | What it does |
|---|---|---|---|
theme.type.faces[].family |
string | Stable | The family name a type.font stack names it by. |
theme.type.faces[].src |
string | Stable | A .woff2 or .woff file inside the App’s directory, relative to it: ./fonts/workshop-mono.woff2. |
theme.type.faces[].style |
"normal" · "italic" |
Stable | One of italic, normal. Used in examples/apps/lintel/source.ts. |
theme.type.faces[].subset |
Stable | Omitted, the file is cut to Latin when the App loads; false ships it whole, for an App written in another script. One of false. |
|
theme.type.faces[].weight |
integer | string | Stable | 100 to 900, or a variable file’s range as “100 900”. Omitted, 400. Used in examples/apps/lintel/blueprint.ts. |
theme file: theme.type.font
Section titled “theme file: theme.type.font”| Key | Type | Status | What it does |
|---|---|---|---|
theme.type.font |
string | object | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.type.font.code |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.type.font.data |
string | Stable | |
theme.type.font.heading |
string | Stable | Used in examples/apps/lintel/blueprint.ts. |
theme.type.font.ui |
string | Stable | Used in examples/apps/tick/app.ts. |
theme file: theme.type.icons
Section titled “theme file: theme.type.icons”| Key | Type | Status | What it does |
|---|---|---|---|
theme.type.icons |
"regular" · "light" · "bold" · "fill" |
Stable | The icons’ weight, from Phosphor’s: regular (omitted), light, bold or fill. Thin and duotone are refused: a 1px stroke fades at an icon’s 16px, and a second tone is a color no role says. One of bold, fill, light, regular. Used in examples/apps/lintel/resources.ts. |
theme file: theme.type.roles
Section titled “theme file: theme.type.roles”| Key | Type | Status | What it does |
|---|---|---|---|
theme.type.roles |
object | Stable | Each kind of text by what it is for, saying only what differs from the look. Body, data, label and nav text has no size of its own: it follows type.base. |
theme.type.roles.body |
object | Stable | Prose, fields and the interface, at the base size: its leading (1.35 to 1.8) and features. Used in examples/apps/lintel/commands/maintenance.ts. |
theme.type.roles.body.features |
array | Stable | |
theme.type.roles.body.leading |
number | Stable | |
theme.type.roles.data |
object | Stable | A table’s cells and a record’s values, in the data face at the base size: their features, tabular figures kept, and its reach: every value, or figures only (figures, keys and dates, a record header’s facts too). |
theme.type.roles.data.features |
array | Stable | |
theme.type.roles.data.reach |
"values" · "figures" |
Stable | values (omitted): every value in the data face; figures: only figures, keys and dates, names in the interface face. One of figures, values. |
theme.type.roles.display |
object | Stable | A landing’s headline: its face, size (28px to 56px), leading, tracking, weight and features. Used in examples/apps/lintel/resources.ts. |
theme.type.roles.display.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.display.features |
array | Stable | |
theme.type.roles.display.leading |
number | Stable | |
theme.type.roles.display.size |
string | Stable | 28px to 56px, at the 13px base. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.display.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.display.weight |
400 · 500 · 600 · 700 · 800 · 900 |
Stable | One of 400, 500, 600, 700, 800, 900. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.figure |
object | Stable | A stat’s figure: its face, size (18px to 40px), tracking, weight and features, tabular figures kept. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.figure.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.figure.features |
array | Stable | |
theme.type.roles.figure.size |
string | Stable | 18px to 40px, at the 13px base. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.figure.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.figure.weight |
400 · 500 · 600 · 700 · 800 · 900 |
Stable | One of 400, 500, 600, 700, 800, 900. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.heading |
object | Stable | A list naming itself over its rows: its face, size (16px to 28px), leading, tracking, weight (omitted, the title’s), case and features. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.heading.case |
"none" · "upper" · "small-caps" |
Stable | One of none, small-caps, upper. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.heading.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.heading.features |
array | Stable | |
theme.type.roles.heading.leading |
number | Stable | |
theme.type.roles.heading.size |
string | Stable | 16px to 28px, at the 13px base. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.heading.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.heading.weight |
400 · 500 · 600 · 700 · 800 · 900 |
Stable | One of 400, 500, 600, 700, 800, 900. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.label |
object | Stable | A column’s head, a stat’s label and a record’s tabs, at the base size: their face, tracking, weight (400 to 700), case and features; upper sets them a step smaller. |
theme.type.roles.label.case |
"none" · "upper" · "small-caps" |
Stable | One of none, small-caps, upper. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.label.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.label.features |
array | Stable | |
theme.type.roles.label.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.label.weight |
400 · 500 · 600 · 700 |
Stable | One of 400, 500, 600, 700. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.nav |
object | Stable | The menu’s entries in the bar, at the base size: their face, tracking, weight (400 to 600) and case; upper sets them a step smaller. Used in examples/apps/lintel/app.ts. |
theme.type.roles.nav.case |
"none" · "upper" · "small-caps" |
Stable | One of none, small-caps, upper. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.nav.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.nav.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.nav.weight |
400 · 500 · 600 |
Stable | One of 400, 500, 600. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.section |
object | Stable | A section’s title on a record and a dashboard: its face, case and features; a dashboard’s section title also takes a size (12px to 20px), tracking and weight. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.section.case |
"none" · "upper" · "small-caps" |
Stable | One of none, small-caps, upper. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.section.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.section.features |
array | Stable | |
theme.type.roles.section.size |
string | Stable | 12px to 20px, at the 13px base. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.section.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.section.weight |
400 · 500 · 600 · 700 · 800 · 900 |
Stable | One of 400, 500, 600, 700, 800, 900. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.title |
object | Stable | A record’s and a dashboard’s name: its face, size (20px to 36px), leading, tracking, weight, case and features; its weight is every heading’s. |
theme.type.roles.title.case |
"none" · "upper" · "small-caps" |
Stable | One of none, small-caps, upper. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.title.face |
"ui" · "heading" · "data" · "code" |
Stable | One of code, data, heading, ui. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.title.features |
array | Stable | |
theme.type.roles.title.leading |
number | Stable | |
theme.type.roles.title.size |
string | Stable | 20px to 36px, at the 13px base. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.title.tracking |
string | Stable | -0.03em to 0.15em. Used in examples/apps/lintel/blueprint.ts. |
theme.type.roles.title.weight |
400 · 500 · 600 · 700 · 800 · 900 |
Stable | One of 400, 500, 600, 700, 800, 900. Used in examples/apps/lintel/blueprint.ts. |