Built-in style templates

The looks in builtInStyleTemplates, next to the default look (no template). The script-tag bundles register them, and so do definePlayer(), createEngine() and defineEditor() of the astrolabe package; with the @astrolabe/* packages, pass them to definePlayer, createEngine and createAuthoring. Authors pick one with style-template on <astl-doc> or on a component. How looks work and how to write your own: Looks.

Generated from packages/tokens/src/built-in-templates.ts. Every template passes checkStyleTemplate (computed again below with the WCAG 2 formula): text pairs at least 4.5:1 and borders, focus rings and verdict colours at least 3:1, in light and in dark, also when any template is used on a component inside a document with any other. None of them applies in the high contrast theme or under forced colours.

Template	Label	What it looks like
`playful`	English: Playful Polish: Zabawny	Rounder shapes, bolder lines and brighter colours, still calm enough to read.
`notebook`	English: Notebook Polish: Zeszyt	Cream paper, ink-blue text and small corners, like a school notebook.

playful

Rounder shapes, bolder lines and brighter colours, still calm enough to read. Polish: Bardziej zaokrąglone kształty, grubsze linie i żywsze kolory, a tekst nadal czyta się spokojnie.

Property	Value
Name	`playful`
Version	1
Message namespace	`astl.style.playful`
Scopes	`document`, `component`
Components	every registered component

Tokens in light and dark

Token	Value	Default
`--astl-font-body`	`ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Nunito, "Varela Round", system-ui, sans-serif`	`system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif`
`--astl-font-display`	`ui-rounded, "Arial Rounded MT Bold", "SF Pro Rounded", Nunito, "Varela Round", system-ui, sans-serif`	`system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif`
`--astl-radius-s`	`6px`	`4px`
`--astl-radius-m`	`16px`	`8px`
`--astl-radius-l`	`24px`	`12px`
`--astl-outline-width`	`3px`	`2px`

Colours

Token	Light	Dark
`--astl-canvas`	`#f5f0ff`	`#150f1f`
`--astl-surface`	`#ffffff`	`#211830`
`--astl-surface-raised`	`#ffffff`	`#2a1f3d`
`--astl-ink`	`#1f1830`	`#f3eeff`
`--astl-ink-muted`	`#544a6b`	`#c3b6de`
`--astl-line`	`#d8ccf3`	`#45385e`
`--astl-outline`	`#7556b8`	`#a492cf`
`--astl-accent`	`#7428c9`	`#c7a2ff`
`--astl-on-accent`	`#ffffff`	`#1c0b36`
`--astl-accent-soft`	`#f0e6ff`	`#33214f`
`--astl-focus`	`#b3136a`	`#ff8fd0`
`--astl-success`	`#17733f`	`#70d498`
`--astl-success-soft`	`#e3f5ea`	`#15301f`
`--astl-on-success`	`#ffffff`	`#06200f`
`--astl-danger`	`#b3261e`	`#ff8f85`
`--astl-danger-soft`	`#fdebea`	`#3d1716`
`--astl-warning`	`#8a4b00`	`#f6bf66`
`--astl-warning-soft`	`#fff0db`	`#3a290d`
`--astl-selected`	`#1f5bc6`	`#8fb8ff`
`--astl-selected-soft`	`#e8effc`	`#16284a`
`--astl-palette-1`	`#066086`	`#59c7fe`
`--astl-palette-1-soft`	`#e5f3fe`	`#152c3a`
`--astl-palette-2`	`#7d5036`	`#f9914d`
`--astl-palette-2-soft`	`#ffeee4`	`#37261c`
`--astl-palette-3`	`#6d377e`	`#d08edc`
`--astl-palette-3-soft`	`#f8edfb`	`#332635`
`--astl-palette-4`	`#7c6301`	`#ffe490`
`--astl-palette-4-soft`	`#f8f0e1`	`#2f2a19`
`--astl-palette-5`	`#016f6f`	`#10c7c8`
`--astl-palette-5-soft`	`#def5f5`	`#0f2f2f`
`--astl-palette-6`	`#603211`	`#bd8c68`
`--astl-palette-6-soft`	`#ffede4`	`#37271b`
`--astl-palette-7`	`#9a2b64`	`#e27eaa`
`--astl-palette-7-soft`	`#ffecf3`	`#39242d`
`--astl-palette-8`	`#4b4f00`	`#bdc16c`
`--astl-palette-8-soft`	`#f3f1e2`	`#2b2b19`

Parts

Element	Part	Declarations
`<astl-choice>`	`option`	`box-shadow: 0 3px 0 var(--astl-line)`
`<astl-true-false>`	`option`	`box-shadow: 0 3px 0 var(--astl-line)`
`<astl-match>`	`option`	`box-shadow: 0 3px 0 var(--astl-line)`

Contrast

Text pairs (at least 4.5:1) and borders, focus rings and verdict colours (at least 3:1) of playful

Text on background	Light	Dark
`ink` on `canvas`	15.26:1	16.50:1
`ink-muted` on `canvas`	7.31:1	9.88:1
`accent` on `canvas`	6.50:1	8.96:1
`success` on `canvas`	5.28:1	10.32:1
`danger` on `canvas`	5.85:1	8.50:1
`warning` on `canvas`	6.09:1	11.22:1
`selected` on `canvas`	5.58:1	9.35:1
`ink` on `surface`	17.05:1	14.93:1
`ink-muted` on `surface`	8.18:1	8.94:1
`accent` on `surface`	7.27:1	8.11:1
`success` on `surface`	5.90:1	9.34:1
`danger` on `surface`	6.54:1	7.69:1
`warning` on `surface`	6.80:1	10.15:1
`selected` on `surface`	6.23:1	8.46:1
`ink` on `surface-raised`	17.05:1	13.57:1
`ink-muted` on `surface-raised`	8.18:1	8.13:1
`accent` on `surface-raised`	7.27:1	7.37:1
`success` on `surface-raised`	5.90:1	8.49:1
`danger` on `surface-raised`	6.54:1	6.99:1
`warning` on `surface-raised`	6.80:1	9.22:1
`selected` on `surface-raised`	6.23:1	7.69:1
`ink` on `accent-soft`	14.18:1	12.56:1
`ink-muted` on `accent-soft`	6.80:1	7.52:1
`ink` on `success-soft`	15.03:1	12.54:1
`ink-muted` on `success-soft`	7.21:1	7.51:1
`ink` on `danger-soft`	14.82:1	13.87:1
`ink-muted` on `danger-soft`	7.10:1	8.30:1
`ink` on `warning-soft`	15.22:1	12.30:1
`ink-muted` on `warning-soft`	7.29:1	7.36:1
`ink` on `selected-soft`	14.76:1	12.87:1
`ink-muted` on `selected-soft`	7.08:1	7.70:1
`on-accent` on `accent`	7.27:1	8.73:1
`on-success` on `success`	5.90:1	9.47:1
`accent` on `accent-soft`	6.05:1	6.82:1
`success` on `success-soft`	5.20:1	7.84:1
`danger` on `danger-soft`	5.68:1	7.14:1
`warning` on `warning-soft`	6.07:1	8.36:1
`selected` on `selected-soft`	5.40:1	7.29:1
`palette-1` on `canvas`	6.21:1	9.84:1
`palette-1` on `surface`	6.94:1	8.91:1
`palette-1` on `surface-raised`	6.94:1	8.10:1
`ink` on `palette-1-soft`	15.09:1	12.72:1
`ink-muted` on `palette-1-soft`	7.23:1	7.61:1
`palette-1` on `palette-1-soft`	6.14:1	7.59:1
`palette-2` on `canvas`	6.12:1	8.20:1
`palette-2` on `surface`	6.83:1	7.42:1
`palette-2` on `surface-raised`	6.83:1	6.74:1
`ink` on `palette-2-soft`	15.10:1	12.69:1
`ink-muted` on `palette-2-soft`	7.24:1	7.60:1
`palette-2` on `palette-2-soft`	6.05:1	6.31:1
`palette-3` on `canvas`	7.52:1	7.66:1
`palette-3` on `surface`	8.41:1	6.93:1
`palette-3` on `surface-raised`	8.41:1	6.30:1
`ink` on `palette-3-soft`	15.02:1	12.58:1
`ink-muted` on `palette-3-soft`	7.20:1	7.53:1
`palette-3` on `palette-3-soft`	7.41:1	5.84:1
`palette-4` on `canvas`	5.16:1	14.96:1
`palette-4` on `surface`	5.77:1	13.53:1
`palette-4` on `surface-raised`	5.77:1	12.30:1
`ink` on `palette-4-soft`	15.06:1	12.61:1
`ink-muted` on `palette-4-soft`	7.22:1	7.55:1
`palette-4` on `palette-4-soft`	5.09:1	11.43:1
`palette-5` on `canvas`	5.36:1	8.95:1
`palette-5` on `surface`	5.99:1	8.10:1
`palette-5` on `surface-raised`	5.99:1	7.36:1
`ink` on `palette-5-soft`	15.01:1	12.59:1
`ink-muted` on `palette-5-soft`	7.20:1	7.54:1
`palette-5` on `palette-5-soft`	5.27:1	6.83:1
`palette-6` on `canvas`	9.58:1	6.35:1
`palette-6` on `surface`	10.71:1	5.75:1
`palette-6` on `surface-raised`	10.71:1	5.22:1
`ink` on `palette-6-soft`	15.01:1	12.59:1
`ink-muted` on `palette-6-soft`	7.20:1	7.54:1
`palette-6` on `palette-6-soft`	9.42:1	4.85:1
`palette-7` on `canvas`	6.47:1	6.96:1
`palette-7` on `surface`	7.23:1	6.30:1
`palette-7` on `surface-raised`	7.23:1	5.73:1
`ink` on `palette-7-soft`	15.06:1	12.62:1
`ink-muted` on `palette-7-soft`	7.22:1	7.56:1
`palette-7` on `palette-7-soft`	6.39:1	5.33:1
`palette-8` on `canvas`	7.77:1	9.83:1
`palette-8` on `surface`	8.69:1	8.89:1
`palette-8` on `surface-raised`	8.69:1	8.08:1
`ink` on `palette-8-soft`	15.01:1	12.64:1
`ink-muted` on `palette-8-soft`	7.20:1	7.57:1
`palette-8` on `palette-8-soft`	7.65:1	7.53:1

Colour on background	Light	Dark
`outline` on `canvas`	4.97:1	6.78:1
`focus` on `canvas`	5.84:1	9.01:1
`accent` on `canvas`	6.50:1	8.96:1
`success` on `canvas`	5.28:1	10.32:1
`danger` on `canvas`	5.85:1	8.50:1
`warning` on `canvas`	6.09:1	11.22:1
`selected` on `canvas`	5.58:1	9.35:1
`outline` on `surface`	5.56:1	6.13:1
`focus` on `surface`	6.53:1	8.15:1
`accent` on `surface`	7.27:1	8.11:1
`success` on `surface`	5.90:1	9.34:1
`danger` on `surface`	6.54:1	7.69:1
`warning` on `surface`	6.80:1	10.15:1
`selected` on `surface`	6.23:1	8.46:1
`outline` on `surface-raised`	5.56:1	5.57:1
`focus` on `surface-raised`	6.53:1	7.41:1
`accent` on `surface-raised`	7.27:1	7.37:1
`success` on `surface-raised`	5.90:1	8.49:1
`danger` on `surface-raised`	6.54:1	6.99:1
`warning` on `surface-raised`	6.80:1	9.22:1
`selected` on `surface-raised`	6.23:1	7.69:1

Live example

A gap and a closed question as cards, with style-template="playful" on the document. It follows the site's light or dark theme.

<astl-doc lang="en" style-template="playful">
  <p>A young cat is called a <astl-gap id="cat-playful" answer="kitten"></astl-gap>.</p>
  <astl-choice id="sky-playful" variant="cards">
    <astl-prompt>What colour is a clear sky at noon?</astl-prompt>
    <astl-option id="blue" correct>Blue</astl-option>
    <astl-option id="green">Green</astl-option>
    <astl-option id="red">Red</astl-option>
  </astl-choice>
</astl-doc>

A young cat is called a .

What colour is a clear sky at noon?

Blue

Green

Red

notebook

Cream paper, ink-blue text and small corners, like a school notebook. Polish: Kremowy papier, granatowy tekst i małe zaokrąglenia, jak w szkolnym zeszycie.

Property	Value
Name	`notebook`
Version	1
Message namespace	`astl.style.notebook`
Scopes	`document`, `component`
Components	every registered component