You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{.lightbox group="brand-formats" fig-alt="Screenshot of a webpage. The text is dark grey on a light blue background, using a rounded sans-serif typeface, a logo appears in the navbar."}
42
+
:::
43
43
44
-
</div>
45
-
46
-
<div>
47
-
44
+
::: {}
48
45
{.lightbox group="brand-formats" fig-alt="Screenshot of a dashboard. The text is dark grey on a light blue background, using a rounded sans-serif typeface, a logo appears in the navbar."}
46
+
:::
49
47
50
-
</div>
51
-
52
-
<div>
53
-
48
+
::: {}
54
49
{.lightbox group="brand-formats" fig-alt="Screenshot of a presentation. The text is dark grey on a light blue background, using a rounded sans-serif typeface, a logo appears in bottom left of the slide."}
50
+
:::
55
51
56
-
</div>
57
-
58
-
<div>
59
-
52
+
:::{}
60
53
{.lightbox group="brand-formats" fig-alt="Screenshot of a PDF document. The text is dark grey on a light blue background, using a rounded sans-serif typeface, a logo appears in top right of the page."}
54
+
:::
55
+
:::
61
56
62
-
</div>
63
-
:::::::
64
57
65
-
::: {.smaller .muted}
66
58
You can view the source for the above example and the live website at:
The most commonly set colors include `foreground`, `background` and `primary`:
103
+
104
+
```{.yaml filename="_brand.yml"}
105
+
color:
106
+
palette:
107
+
dark-grey: "#222222"
108
+
blue: "#ddeaf1"
109
+
background: blue
110
+
foreground: dark-grey
111
+
primary: black
112
+
```
138
113
139
114
The colors `foreground` and `background` are used consistently across formats to set the color of the main text and color of the page it appears on.
115
+
The color `primary` sets the link color, navbar color (`html` and `dashboard`), and progress bar color (`revealjs`).
140
116
141
117
For HTML formats that use Bootstrap (`html`, `dashboard`) the remaining semantic colors are mapped directly to their Bootstrap counterparts with the same name.
142
118
143
-
For `revealjs` the semantic colors are mapped to the following roles: e.g. `primary` controls the color of links and the progress bar. *Worth doing this? What about for Typst?*
119
+
::: {.callout-tip collapse="true"}
120
+
121
+
## Full list of semantic colors
122
+
123
+
The full list of semantic colors you can set in `color` is:
You can access both named and semantic colors from your brand in SCSS and using the `brand` shortcode. See [Using `_brand.yml` values](#using-brand-values) for more details.
146
154
@@ -167,19 +175,19 @@ logo:
167
175
168
176
You don't need to specify all three—Quarto will use what you provide based on the following preferences:
You can also specify named logos under `images` which you can reference in `small`, `medium` and `large`. In particular, this allows you to set alternative text for your logos using `alt`:
185
193
@@ -192,11 +200,13 @@ logo:
192
200
small: quarto
193
201
```
194
202
195
-
::: callout-warning
203
+
::: {.callout-warning}
204
+
196
205
## Limitation
197
206
198
207
The **brand.yml** specification allows you to specify a `light` and `dark` version of your logo, but Quarto currently only uses the `light` version.
199
-
:::
208
+
209
+
:::
200
210
201
211
### Typography
202
212
@@ -224,7 +234,22 @@ typography:
224
234
headings: Jura
225
235
```
226
236
227
-
The options `base` and `headings` set the typographic style of the main text and headings respectively. The full set of text elements that you can style with `typography` is:
237
+
The options `base` and `headings` set the typographic style of the main text and headings respectively.
238
+
Use `links` to apply specific styles to links.
239
+
The option `monospace` sets the typographic style of code in general, and `monospace-inline` and `monospace-block` can be further used to style code that appears inline and in blocks respectively.
240
+
241
+
```{.yaml filename="_brand.yml"}
242
+
# More comprehensive example
243
+
# inlcude styling code
244
+
```
245
+
246
+
The fields allowed for each element differ, expand the callout below to see what is supported in each field.
247
+
248
+
::: {.callout-tip collapse="true"}
249
+
250
+
## Full set of text elements and supported fields.
251
+
252
+
The full set of text elements that you can style with `typography` is:
The `defaults` section of **brand.yml** allows users to set option for specific tools that don't otherwise fit into the **brand.yml** schema. In particular, Quarto supports `defaults: quarto` and `defaults: bootstrap`.
293
316
294
-
#### Quarto
317
+
#### Quarto
295
318
296
319
Quarto merges options you set in `defaults: quarto` with document metadata. For example, you can use this to set format specific options like syntax highlighting for `html`:
297
320
@@ -342,11 +365,14 @@ meta:
342
365
link: https://www.acmecorp.com
343
366
```
344
367
345
-
::: callout-warning
368
+
::: {.callout-warning}
369
+
346
370
## Limitation
347
371
348
372
Quarto does nothing with `meta` values.
349
-
:::
373
+
374
+
:::
375
+
350
376
351
377
## Using `_brand.yml` values {#using-brand-values}
352
378
@@ -355,8 +381,7 @@ Quarto does nothing with `meta` values.
355
381
Values from the `_brand.yml` configuration file can be accessed via the `brand` shortcode.
356
382
357
383
-`{{{< brand color COLOR_NAME >}}}` resolves `COLOR_NAME` to the appropriate color value
358
-
-\`{{{< brand logo LOGO_NAME >}}}
359
-
- TBD: what should `{{{< brand typography ... >}}}` resolve to?
384
+
-`{{{< brand logo LOGO_NAME >}}}`
360
385
361
386
### In specific formats
362
387
@@ -375,4 +400,4 @@ local primary = brand.get_color('primary')
0 commit comments