brand-mode: choose light or dark brand for Typst

Author: gordonwoodhull

src/command/render/filters.ts

@@ -9,6 +9,7 @@ import { existsSync } from "../../deno_ral/fs.ts";
 import {
   kBibliography,
   kBrand,
+  kBrandMode,
   kCitationLocation,
   kCiteMethod,
   kClearCellOptions,
@@ -909,6 +910,7 @@ const extractTypstFilterParams = (format: Format) => {
     [kTocIndent]: format.metadata[kTocIndent],
     [kLogo]: format.metadata[kLogo],
     [kCssPropertyProcessing]: format.metadata[kCssPropertyProcessing],
+    [kBrandMode]: format.metadata[kBrandMode],
     [kHtmlPreTagProcessing]: format.metadata[kHtmlPreTagProcessing],
   };
 };

src/config/constants.ts

@@ -141,6 +141,7 @@ export const kFontPaths = "font-paths";
 export const kHtmlTableProcessing = "html-table-processing";
 export const kHtmlPreTagProcessing = "html-pre-tag-processing";
 export const kCssPropertyProcessing = "css-property-processing";
+export const kBrandMode = "brand-mode";
 export const kUseRsvgConvert = "use-rsvg-convert";
 export const kValidateYaml = "validate-yaml";
 

src/resources/filters/modules/typst_css.lua

@@ -176,7 +176,7 @@ local typst_named_colors = {
   lime = '#01ff70',
 }
 
-local brandMode = 'light' --- ugh
+local brandMode = param('brand-mode') or 'light'
 
 -- css can have fraction or percent
 -- typst can have int or percent
@@ -748,6 +748,7 @@ local function expand_side_shorthand(items, context, warnings)
 end
 
 return {
+  set_brand_mode = set_brand_mode,
   parse_color = parse_color,
   parse_opacity = parse_opacity,
   output_color = output_color,

src/resources/filters/quarto-post/cell-renderings.lua

@@ -47,6 +47,13 @@ function choose_cell_renderings()
       if quarto.format.isHtmlOutput() and lightDiv and darkDiv then
         blocks:insert(pandoc.Div(lightDiv.content, pandoc.Attr("", {'light-content'}, {})))
         blocks:insert(pandoc.Div(darkDiv.content, pandoc.Attr("", {'dark-content'}, {})))
+      elseif quarto.format.isTypstOutput() and lightDiv and darkDiv then
+        local brandMode = param('brand-mode') or 'light'
+        if brandMode == 'light' then
+          blocks:insert(lightDiv)
+        elseif brandMode == 'dark' then
+          blocks:insert(darkDiv)
+        end
       else
         blocks:insert(lightDiv or darkDiv)
       end

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

@@ -59,7 +59,7 @@ function render_typst_brand_yaml()
   return {
     Pandoc = function(pandoc0)
       local brand = param('brand')
-      local brandMode = 'light'
+      local brandMode = param('brand-mode') or 'light'
       brand = brand and brand[brandMode]
       if brand and brand.processedData then
         -- color
@@ -300,7 +300,7 @@ function render_typst_brand_yaml()
       end
     end,
     Meta = function(meta)
-      local brandMode = 'light'
+      local brandMode = param('brand-mode') or 'light'
       -- it can contain the path but we want to store an object here
       if not meta.brand or pandoc.utils.type(meta.brand) == 'Inlines' then
         meta.brand = {}

src/resources/schema/document-layout.yml

@@ -48,6 +48,15 @@
   description: |
     The paper size for the document.
 
+- name: brand-mode
+  schema:
+    enum: [light, dark]
+  default: light
+  tags:
+    formats: [typst]
+  description: |
+    The brand mode to use for rendering the Typst document, `light` or `dark`.
+
 - name: layout
   schema:
     maybeArrayOf: string

tests/docs/smoke-all/typst/brand-yaml/color/typst-css-duobrand-named-color-dark.qmd

@@ -0,0 +1,39 @@
+---
+title: Translate brand named color references from CSS to Typst
+format:
+  typst:
+    keep-typ: true
+    brand-mode: dark
+brand:
+  light:
+    color:
+      palette:
+        dark-grey: "#444"
+        blue: "#82aeef"
+  dark:
+    color:
+      palette:
+        dark-grey: "#222"
+        blue: "#415777"
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - '#block\(fill: brand-color\.dark-grey\)\[\s*#set text\(fill: brand-color\.blue\);'
+          - 'blue: rgb\("#415777"\)'
+          - 'dark-grey: rgb\("#222"\)'
+        - []
+---
+
+
+```{=typst}
+// stopgap to make this look ok
+#set block(inset: 6pt)
+```
+
+:::{style="background-color: var(--brand-dark-grey); color: var(--brand-blue)"}
+This div is blue on dark grey.
+:::
+
+{{< lipsum 2 >}}

tests/docs/smoke-all/typst/brand-yaml/color/typst-css-duobrand-named-color.qmd

@@ -0,0 +1,38 @@
+---
+title: Translate brand named color references from CSS to Typst
+format:
+  typst:
+    keep-typ: true
+brand:
+  light:
+    color:
+      palette:
+        dark-grey: "#444"
+        blue: "#82aeef"
+  dark:
+    color:
+      palette:
+        dark-grey: "#222"
+        blue: "#415777"
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - '#block\(fill: brand-color\.dark-grey\)\[\s*#set text\(fill: brand-color\.blue\);'
+          - 'blue: rgb\("#82aeef"\)'
+          - 'dark-grey: rgb\("#444"\)'
+        - []
+---
+
+
+```{=typst}
+// stopgap to make this look ok
+#set block(inset: 6pt)
+```
+
+:::{style="background-color: var(--brand-dark-grey); color: var(--brand-blue)"}
+This div is blue on dark grey.
+:::
+
+{{< lipsum 2 >}}

tests/docs/smoke-all/typst/brand-yaml/color/typst-css-duobrand-wrong-named-color-dark.qmd

@@ -0,0 +1,42 @@
+---
+title: Translate brand named color references from CSS to Typst
+format:
+  typst:
+    keep-typ: true
+    brand-mode: dark
+brand:
+  light:
+    color:
+      palette:
+        light-grey: "#444"
+        blue: "#82aeef"
+  dark:
+    color:
+      palette:
+        dark-grey: "#222"
+        blue: "#415777"
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - 'blue: rgb\("#415777"\)'
+          - 'dark-grey: rgb\("#222"\)'
+          - '#set text\(fill: brand-color\.blue\);'
+        -
+      printsMessage:
+        level: INFO
+        regex: 'unknown brand color light-grey'
+---
+
+
+```{=typst}
+// stopgap to make this look ok
+#set block(inset: 6pt)
+```
+
+:::{style="background-color: var(--brand-light-grey); color: var(--brand-blue)"}
+This div is blue on dark grey.
+:::
+
+{{< lipsum 2 >}}

tests/docs/smoke-all/typst/brand-yaml/color/typst-css-duobrand-wrong-named-color-light.qmd

@@ -0,0 +1,42 @@
+---
+title: Translate brand named color references from CSS to Typst
+format:
+  typst:
+    keep-typ: true
+    brand-mode: light
+brand:
+  light:
+    color:
+      palette:
+        light-grey: "#444"
+        blue: "#82aeef"
+  dark:
+    color:
+      palette:
+        dark-grey: "#222"
+        blue: "#415777"
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - 'blue: rgb\("#82aeef"\)'
+          - 'light-grey: rgb\("#444"\)'
+          - '#set text\(fill: brand-color\.blue\);'
+        -
+      printsMessage:
+        level: INFO
+        regex: 'unknown brand color dark-grey'
+---
+
+
+```{=typst}
+// stopgap to make this look ok
+#set block(inset: 6pt)
+```
+
+:::{style="background-color: var(--brand-dark-grey); color: var(--brand-blue)"}
+This div is blue on dark grey.
+:::
+
+{{< lipsum 2 >}}