From 7c2913fa0f992cab652de47fb31668d7c046b2fc Mon Sep 17 00:00:00 2001 From: Gordon Woodhull Date: Tue, 1 Apr 2025 12:03:37 -0400 Subject: [PATCH] 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 --- news/changelog-1.7.md | 1 + src/resources/filters/customnodes/callout.lua | 27 +++++++++--- .../filters/quarto-post/typst-brand-yaml.lua | 11 ++++- .../typst/pandoc/quarto/definitions.typ | 4 +- .../posit-duobrand/brand-color-light-dark.qmd | 43 +++++++++++++++++++ .../brand-color-light-light.qmd | 42 ++++++++++++++++++ .../color/posit-duobrand/posit-dark.yml | 20 +++++++++ .../color/posit-duobrand/posit-light.yml | 20 +++++++++ .../brand-yaml/color/posit/brand-color.qmd | 2 +- 9 files changed, 160 insertions(+), 10 deletions(-) create mode 100644 tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/brand-color-light-dark.qmd create mode 100644 tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/brand-color-light-light.qmd create mode 100644 tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/posit-dark.yml create mode 100644 tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/posit-light.yml diff --git a/news/changelog-1.7.md b/news/changelog-1.7.md index 26e8b7d9083..5230904604c 100644 --- a/news/changelog-1.7.md +++ b/news/changelog-1.7.md @@ -97,6 +97,7 @@ All changes included in 1.7: ## `typst` format - ([#12387](https://github.com/quarto-dev/quarto-cli/pull/12387)): `brand-mode` chooses whether to use `light` (default) or `dark` brand yml. +- ([#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. - ([#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. - ([#11676](https://github.com/quarto-dev/quarto-cli/pull/11676)): Convert unitless image widths from pixels to inches for column layouts. - ([#11835](https://github.com/quarto-dev/quarto-cli/issues/11835)): Take markdown structure into account when detecting minimum heading level. diff --git a/src/resources/filters/customnodes/callout.lua b/src/resources/filters/customnodes/callout.lua index 20f4c0f5fcf..23bba298277 100644 --- a/src/resources/filters/customnodes/callout.lua +++ b/src/resources/filters/customnodes/callout.lua @@ -252,14 +252,27 @@ function _callout_main() icon = attrs.fa_icon_typst end local brand = param("brand") - local brandMode = 'light' + local brandMode = param('brand-mode') or 'light' brand = brand and brand[brandMode] + body_background_color = "white" if brand then local color = brand.processedData and brand.processedData.color - if color and callout_theme_color_map[callout.type] and + if color then + if callout_theme_color_map[callout.type] and color[callout_theme_color_map[callout.type]] then - background_color = "brand-color-background." .. callout_theme_color_map[callout.type] - icon_color = "brand-color." .. callout_theme_color_map[callout.type] + background_color = "brand-color-background." .. callout_theme_color_map[callout.type] + icon_color = "brand-color." .. callout_theme_color_map[callout.type] + elseif color.background then + local brandPercent = 15 + if brandMode == 'dark' then + brandPercent = 50 + end + local bkPercent = 100 - brandPercent + background_color = 'color.mix((' .. icon_color .. ', ' .. brandPercent .. '%), (brand-color.background, ' .. bkPercent .. '%))' + end + if color.background then + body_background_color = "brand-color.background" + end end end if callout.attr.identifier == "" then @@ -271,7 +284,8 @@ function _callout_main() )}, { "background_color", pandoc.RawInline("typst", background_color) }, { "icon_color", pandoc.RawInline("typst", icon_color) }, - { "icon", pandoc.RawInline("typst", "" .. icon .. "()")} + { "icon", pandoc.RawInline("typst", "" .. icon .. "()")}, + { "body_background_color", pandoc.RawInline("typst", body_background_color)} }) end @@ -281,7 +295,8 @@ function _callout_main() }, { "background_color", pandoc.RawInline("typst", background_color) }, { "icon_color", pandoc.RawInline("typst", icon_color) }, - { "icon", pandoc.RawInline("typst", "" .. icon .. "()")} + { "icon", pandoc.RawInline("typst", "" .. icon .. "()")}, + { "body_background_color", pandoc.RawInline("typst", body_background_color)} }) local category = crossref.categories.by_ref_type[refType(callout.attr.identifier)] diff --git a/src/resources/filters/quarto-post/typst-brand-yaml.lua b/src/resources/filters/quarto-post/typst-brand-yaml.lua index 6650459c7e7..38a9db57316 100644 --- a/src/resources/filters/quarto-post/typst-brand-yaml.lua +++ b/src/resources/filters/quarto-post/typst-brand-yaml.lua @@ -82,7 +82,16 @@ function render_typst_brand_yaml() end local themebk = {} for name, _ in pairs(brandColor) do - themebk[name] = 'brand-color.' .. name .. '.lighten(85%)' + if brandColor.background then + local brandPercent = 15 + if brandMode == 'dark' then + brandPercent = 50 + end + local bkPercent = 100 - brandPercent + themebk[name] = 'color.mix((brand-color.' .. name .. ', ' .. brandPercent .. '%), (brand-color.background, ' .. bkPercent .. '%))' + else + themebk[name] = 'brand-color.' .. name .. '.lighten(85%)' + end end local decl = '#let brand-color-background = ' .. to_typst_dict_indent(themebk) quarto.doc.include_text('in-header', decl) diff --git a/src/resources/formats/typst/pandoc/quarto/definitions.typ b/src/resources/formats/typst/pandoc/quarto/definitions.typ index afec9515a55..048166d66f2 100644 --- a/src/resources/formats/typst/pandoc/quarto/definitions.typ +++ b/src/resources/formats/typst/pandoc/quarto/definitions.typ @@ -145,7 +145,7 @@ } // 2023-10-09: #fa-icon("fa-info") is not working, so we'll eval "#fa-info()" instead -#let callout(body: [], title: "Callout", background_color: rgb("#dddddd"), icon: none, icon_color: black) = { +#let callout(body: [], title: "Callout", background_color: rgb("#dddddd"), icon: none, icon_color: black, body_background_color: white) = { block( breakable: false, fill: background_color, @@ -164,7 +164,7 @@ block( inset: 1pt, width: 100%, - block(fill: white, width: 100%, inset: 8pt, body)) + block(fill: body_background_color, width: 100%, inset: 8pt, body)) } ) } diff --git a/tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/brand-color-light-dark.qmd b/tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/brand-color-light-dark.qmd new file mode 100644 index 00000000000..9e610aaa766 --- /dev/null +++ b/tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/brand-color-light-dark.qmd @@ -0,0 +1,43 @@ +--- +title: Branding - Colors +brand: + light: posit-light.yml + dark: posit-dark.yml +format: + typst: + brand-mode: dark + keep-typ: true +_quarto: + tests: + typst: + ensureTypstFileRegexMatches: + - + - 'burgundy: rgb\("#9a4665"\),' + - 'primary: rgb\("#447099"\),' + - 'primary: color.mix\(\(brand-color\.primary\, 50%\), \(brand-color\.background, 50%\)\),' + - 'background_color: (\r\n?|\n)color\.mix\(\(rgb\("#FC5300"\), 50%\), \(brand-color\.background, 50%\)\)' + - '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' + - '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' + - [] +--- + +::: {.callout-note} +This is a `note` callout. +::: + +::: {.callout-warning} +This is a `warning` callout. +::: + +::: {.callout-important} +This is an `important` callout. +::: + +::: {.callout-tip} +This is a `tip` callout. +::: + +::: {.callout-caution} +This is a `caution` callout. +::: + diff --git a/tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/brand-color-light-light.qmd b/tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/brand-color-light-light.qmd new file mode 100644 index 00000000000..424649427e6 --- /dev/null +++ b/tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/brand-color-light-light.qmd @@ -0,0 +1,42 @@ +--- +title: Branding - Colors +brand: + light: posit-light.yml + dark: posit-dark.yml +format: + typst: + keep-typ: true +_quarto: + tests: + typst: + ensureTypstFileRegexMatches: + - + - 'burgundy: rgb\("#9a4665"\),' + - 'primary: rgb\("#447099"\),' + - 'primary: color\.mix\(\(brand-color\.primary, 15%\), \(brand-color\.background, 85%\)\),' + - 'background_color: (\r\n?|\n)color\.mix\(\(rgb\("#FC5300"\), 15%\), \(brand-color\.background, 85%\)\)' + - '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' + - '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' + - [] +--- + +::: {.callout-note} +This is a `note` callout. +::: + +::: {.callout-warning} +This is a `warning` callout. +::: + +::: {.callout-important} +This is an `important` callout. +::: + +::: {.callout-tip} +This is a `tip` callout. +::: + +::: {.callout-caution} +This is a `caution` callout. +::: + diff --git a/tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/posit-dark.yml b/tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/posit-dark.yml new file mode 100644 index 00000000000..09e2517de91 --- /dev/null +++ b/tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/posit-dark.yml @@ -0,0 +1,20 @@ +color: + palette: + blue: "#447099" + orange: "#EE6331" + gray: "#404041" + white: "#FFFFFF" + teal: "#419599" + green: "#72994E" + burgundy: "#9A4665" + foreground: "#FFFFFF" + background: "#151515" + primary: "#447099" + secondary: "#707073" + tertiary: "#C2C2C4" + success: "#72994E" + info: "#419599" + warning: "#EE6331" + danger: "#9A4665" + light: "#FFFFFF" + dark: "#404041" diff --git a/tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/posit-light.yml b/tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/posit-light.yml new file mode 100644 index 00000000000..4fb05b3d9c8 --- /dev/null +++ b/tests/docs/smoke-all/typst/brand-yaml/color/posit-duobrand/posit-light.yml @@ -0,0 +1,20 @@ +color: + palette: + blue: "#447099" + orange: "#EE6331" + gray: "#404041" + white: "#FFFFFF" + teal: "#419599" + green: "#72994E" + burgundy: "#9A4665" + foreground: "#151515" + background: "#FFFFFF" + primary: "#447099" + secondary: "#707073" + tertiary: "#C2C2C4" + success: "#72994E" + info: "#419599" + warning: "#EE6331" + danger: "#9A4665" + light: "#FFFFFF" + dark: "#404041" diff --git a/tests/docs/smoke-all/typst/brand-yaml/color/posit/brand-color.qmd b/tests/docs/smoke-all/typst/brand-yaml/color/posit/brand-color.qmd index 68426bb5772..03ca02998d9 100644 --- a/tests/docs/smoke-all/typst/brand-yaml/color/posit/brand-color.qmd +++ b/tests/docs/smoke-all/typst/brand-yaml/color/posit/brand-color.qmd @@ -10,7 +10,7 @@ _quarto: - - 'burgundy: rgb\("#9a4665"\),' - 'primary: rgb\("#447099"\),' - - 'primary: brand-color\.primary\.lighten\(85%\),' + - 'primary: color\.mix\(\(brand-color\.primary, 15%\), \(brand-color\.background, 85%\)\),' - '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' - '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' -