Skip to content

Commit f125971

Browse files
gordonwoodhullgordonwoodhull
committed
typst: dark callouts
mix callout title color whenever there is a brand background color different mixing for light (15%) and dark (50%) modes set callout body background color to brand background color
1 parent 0694665 commit f125971

File tree

9 files changed

+160
-10
lines changed

9 files changed

+160
-10
lines changed

‎news/changelog-1.7.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ All changes included in 1.7:
9797
## `typst` format
9898

9999
- ([#12387](https://github.com/quarto-dev/quarto-cli/pull/12387)): `brand-mode` chooses whether to use `light` (default) or `dark` brand yml.
100+
- ([#12825](https://github.com/quarto-dev/quarto-cli/issues/11825)): Callouts look better with dark brands, mixing the title color and using brand background color for body.
100101
- ([#11578](https://github.com/quarto-dev/quarto-cli/issues/11578)): Typst column layout widths use fractional `fr` units instead of percent `%` units for unitless and default widths in order to fill the enclosing block and not spill outside it.
101102
- ([#11676](https://github.com/quarto-dev/quarto-cli/pull/11676)): Convert unitless image widths from pixels to inches for column layouts.
102103
- ([#11835](https://github.com/quarto-dev/quarto-cli/issues/11835)): Take markdown structure into account when detecting minimum heading level.

‎src/resources/filters/customnodes/callout.lua

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -252,14 +252,27 @@ function _callout_main()
252252
icon = attrs.fa_icon_typst
253253
end
254254
local brand = param("brand")
255-
local brandMode = 'light'
255+
local brandMode = param('brand-mode') or 'light'
256256
brand = brand and brand[brandMode]
257+
body_background_color = "white"
257258
if brand then
258259
local color = brand.processedData and brand.processedData.color
259-
if color and callout_theme_color_map[callout.type] and
260+
if color then
261+
if callout_theme_color_map[callout.type] and
260262
color[callout_theme_color_map[callout.type]] then
261-
background_color = "brand-color-background." .. callout_theme_color_map[callout.type]
262-
icon_color = "brand-color." .. callout_theme_color_map[callout.type]
263+
background_color = "brand-color-background." .. callout_theme_color_map[callout.type]
264+
icon_color = "brand-color." .. callout_theme_color_map[callout.type]
265+
elseif color.background then
266+
local brandPercent = 15
267+
if brandMode == 'dark' then
268+
brandPercent = 50
269+
end
270+
local bkPercent = 100 - brandPercent
271+
background_color = 'color.mix((' .. icon_color .. ', ' .. brandPercent .. '%), (brand-color.background, ' .. bkPercent .. '%))'
272+
end
273+
if color.background then
274+
body_background_color = "brand-color.background"
275+
end
263276
end
264277
end
265278
if callout.attr.identifier == "" then
@@ -271,7 +284,8 @@ function _callout_main()
271284
)},
272285
{ "background_color", pandoc.RawInline("typst", background_color) },
273286
{ "icon_color", pandoc.RawInline("typst", icon_color) },
274-
{ "icon", pandoc.RawInline("typst", "" .. icon .. "()")}
287+
{ "icon", pandoc.RawInline("typst", "" .. icon .. "()")},
288+
{ "body_background_color", pandoc.RawInline("typst", body_background_color)}
275289
})
276290
end
277291

@@ -281,7 +295,8 @@ function _callout_main()
281295
},
282296
{ "background_color", pandoc.RawInline("typst", background_color) },
283297
{ "icon_color", pandoc.RawInline("typst", icon_color) },
284-
{ "icon", pandoc.RawInline("typst", "" .. icon .. "()")}
298+
{ "icon", pandoc.RawInline("typst", "" .. icon .. "()")},
299+
{ "body_background_color", pandoc.RawInline("typst", body_background_color)}
285300
})
286301

287302
local category = crossref.categories.by_ref_type[refType(callout.attr.identifier)]

‎src/resources/filters/quarto-post/typst-brand-yaml.lua

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,16 @@ function render_typst_brand_yaml()
8282
end
8383
local themebk = {}
8484
for name, _ in pairs(brandColor) do
85-
themebk[name] = 'brand-color.' .. name .. '.lighten(85%)'
85+
if brandColor.background then
86+
local brandPercent = 15
87+
if brandMode == 'dark' then
88+
brandPercent = 50
89+
end
90+
local bkPercent = 100 - brandPercent
91+
themebk[name] = 'color.mix((brand-color.' .. name .. ', ' .. brandPercent .. '%), (brand-color.background, ' .. bkPercent .. '%))'
92+
else
93+
themebk[name] = 'brand-color.' .. name .. '.lighten(85%)'
94+
end
8695
end
8796
local decl = '#let brand-color-background = ' .. to_typst_dict_indent(themebk)
8897
quarto.doc.include_text('in-header', decl)

‎src/resources/formats/typst/pandoc/quarto/definitions.typ

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@
145145
}
146146

147147
// 2023-10-09: #fa-icon("fa-info") is not working, so we'll eval "#fa-info()" instead
148-
#let callout(body: [], title: "Callout", background_color: rgb("#dddddd"), icon: none, icon_color: black) = {
148+
#let callout(body: [], title: "Callout", background_color: rgb("#dddddd"), icon: none, icon_color: black, body_background_color: white) = {
149149
block(
150150
breakable: false,
151151
fill: background_color,
@@ -164,7 +164,7 @@
164164
block(
165165
inset: 1pt,
166166
width: 100%,
167-
block(fill: white, width: 100%, inset: 8pt, body))
167+
block(fill: body_background_color, width: 100%, inset: 8pt, body))
168168
}
169169
)
170170
}

‎tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/brand-color-light-dark.qmd

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
title: Branding - Colors
3+
brand:
4+
light: posit-light.yml
5+
dark: posit-dark.yml
6+
format:
7+
typst:
8+
brand-mode: dark
9+
keep-typ: true
10+
_quarto:
11+
tests:
12+
typst:
13+
ensureTypstFileRegexMatches:
14+
-
15+
- 'burgundy: rgb\("#9a4665"\),'
16+
- 'primary: rgb\("#447099"\),'
17+
- 'primary: color.mix\(\(brand-color\.primary\, 50%\), \(brand-color\.background, 50%\)\),'
18+
- 'background_color: (\r\n?|\n)color\.mix\(\(rgb\("#FC5300"\), 50%\), \(brand-color\.background, 50%\)\)'
19+
- 'title: (\r\n?|\n)\[(\r\n?|\n)Note(\r\n?|\n)\](\r\n?|\n), (\r\n?|\n)background_color: (\r\n?|\n)brand-color-background.primary'
20+
- 'title: (\r\n?|\n)\[(\r\n?|\n)Warning(\r\n?|\n)\](\r\n?|\n), (\r\n?|\n)background_color: (\r\n?|\n)brand-color-background.warning'
21+
- []
22+
---
23+
24+
::: {.callout-note}
25+
This is a `note` callout.
26+
:::
27+
28+
::: {.callout-warning}
29+
This is a `warning` callout.
30+
:::
31+
32+
::: {.callout-important}
33+
This is an `important` callout.
34+
:::
35+
36+
::: {.callout-tip}
37+
This is a `tip` callout.
38+
:::
39+
40+
::: {.callout-caution}
41+
This is a `caution` callout.
42+
:::
43+

‎tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/brand-color-light-light.qmd

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: Branding - Colors
3+
brand:
4+
light: posit-light.yml
5+
dark: posit-dark.yml
6+
format:
7+
typst:
8+
keep-typ: true
9+
_quarto:
10+
tests:
11+
typst:
12+
ensureTypstFileRegexMatches:
13+
-
14+
- 'burgundy: rgb\("#9a4665"\),'
15+
- 'primary: rgb\("#447099"\),'
16+
- 'primary: color\.mix\(\(brand-color\.primary, 15%\), \(brand-color\.background, 85%\)\),'
17+
- 'background_color: (\r\n?|\n)color\.mix\(\(rgb\("#FC5300"\), 15%\), \(brand-color\.background, 85%\)\)'
18+
- 'title: (\r\n?|\n)\[(\r\n?|\n)Note(\r\n?|\n)\](\r\n?|\n), (\r\n?|\n)background_color: (\r\n?|\n)brand-color-background.primary'
19+
- 'title: (\r\n?|\n)\[(\r\n?|\n)Warning(\r\n?|\n)\](\r\n?|\n), (\r\n?|\n)background_color: (\r\n?|\n)brand-color-background.warning'
20+
- []
21+
---
22+
23+
::: {.callout-note}
24+
This is a `note` callout.
25+
:::
26+
27+
::: {.callout-warning}
28+
This is a `warning` callout.
29+
:::
30+
31+
::: {.callout-important}
32+
This is an `important` callout.
33+
:::
34+
35+
::: {.callout-tip}
36+
This is a `tip` callout.
37+
:::
38+
39+
::: {.callout-caution}
40+
This is a `caution` callout.
41+
:::
42+

‎tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/posit-dark.yml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
color:
2+
palette:
3+
blue: "#447099"
4+
orange: "#EE6331"
5+
gray: "#404041"
6+
white: "#FFFFFF"
7+
teal: "#419599"
8+
green: "#72994E"
9+
burgundy: "#9A4665"
10+
foreground: "#FFFFFF"
11+
background: "#151515"
12+
primary: "#447099"
13+
secondary: "#707073"
14+
tertiary: "#C2C2C4"
15+
success: "#72994E"
16+
info: "#419599"
17+
warning: "#EE6331"
18+
danger: "#9A4665"
19+
light: "#FFFFFF"
20+
dark: "#404041"

‎tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/posit-light.yml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
color:
2+
palette:
3+
blue: "#447099"
4+
orange: "#EE6331"
5+
gray: "#404041"
6+
white: "#FFFFFF"
7+
teal: "#419599"
8+
green: "#72994E"
9+
burgundy: "#9A4665"
10+
foreground: "#151515"
11+
background: "#FFFFFF"
12+
primary: "#447099"
13+
secondary: "#707073"
14+
tertiary: "#C2C2C4"
15+
success: "#72994E"
16+
info: "#419599"
17+
warning: "#EE6331"
18+
danger: "#9A4665"
19+
light: "#FFFFFF"
20+
dark: "#404041"

‎tests/docs/smoke-all/typst/brand-yaml/color/posit/brand-color.qmd

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ _quarto:
1010
-
1111
- 'burgundy: rgb\("#9a4665"\),'
1212
- 'primary: rgb\("#447099"\),'
13-
- 'primary: brand-color\.primary\.lighten\(85%\),'
13+
- 'primary: color\.mix\(\(brand-color\.primary, 15%\), \(brand-color\.background, 85%\)\),'
1414
- 'title: (\r\n?|\n)\[(\r\n?|\n)Note(\r\n?|\n)\](\r\n?|\n), (\r\n?|\n)background_color: (\r\n?|\n)brand-color-background.primary'
1515
- 'title: (\r\n?|\n)\[(\r\n?|\n)Warning(\r\n?|\n)\](\r\n?|\n), (\r\n?|\n)background_color: (\r\n?|\n)brand-color-background.warning'
1616
-

0 commit comments

Comments
 (0)