typst css: div color, background-color; translation of named brand colors

src/resources/filters/modules/brand/brand.lua

@@ -1,11 +1,16 @@
 -- brand.lua
 -- Copyright (C) 2020-2024 Posit Software, PBC
 
-local function get_color(name)
+local function get_color_css(name)
   local brand = param("brand")
   brand = brand and brand.processedData -- from src/core/brand/brand.ts
   if not brand then return nil end
   local cssColor = brand.color[name]
+  return cssColor
+end
+
+local function get_color(name)
+  local cssColor = get_color_css(name)
   if not cssColor then return nil end
   if _quarto.format.isTypstOutput() then
     return _quarto.format.typst.css.output_color(_quarto.format.typst.css.parse_color(cssColor))
@@ -32,10 +37,8 @@ local function get_typography(fontName)
   if not brand then return nil end
   local typography = brand.typography and brand.typography[fontName]
   if not typography then return nil end
-  if type(typography) == 'string' then
-    typography = { family = typography }
-  end
   local typsted = {}
+  if type(typography) == 'string' then typography = {family = typography} end
   for k, v in pairs(typography) do
     if k == 'color' or k == 'background-color' then
       typsted[k] = get_color(v) or _quarto.format.typst.css.output_color(_quarto.format.typst.css.parse_color(v))
@@ -63,6 +66,7 @@ local function get_logo(name)
 end
 
 return {
+  get_color_css = get_color_css,
   get_color = get_color,
   get_background_color = get_background_color,
   get_typography = get_typography,

src/resources/filters/modules/typst_css.lua

@@ -302,6 +302,16 @@ local function parse_color(color, warnings)
     }
   elseif color:find '^rgb%(' or color:find '^rgba%(' then
     return parse_rgb(color)
+  elseif color:find '^var%(%-%-brand%-' then
+    local colorName = color:match '^var%(%-%-brand%-([%a--]*)%)'
+    if not colorName then
+      output_warning(warnings, 'invalid brand color reference ' .. v)
+      return null
+    end
+    return colorName and {
+      type = 'brand',
+      value = colorName
+    }
   elseif css_named_colors[color] then
     return {
       type = 'named',
@@ -335,6 +345,13 @@ local function output_color(color, opacity, warnings)
         return nil
       end
       color = parse_color(typst_named_colors[color.value] or css_named_colors[color.value])
+    elseif color.type == 'brand' then
+      local cssColor = _quarto.modules.brand.get_color_css(color.value)
+      if not cssColor then
+        output_warning(warnings, 'unknown brand color ' .. color.value)
+        return nil
+      end
+      color = _quarto.format.typst.css.parse_color(cssColor)
     end
     local mult = 1
     if opacity.unit == 'int' then
@@ -366,6 +383,13 @@ local function output_color(color, opacity, warnings)
       else
         return nil
       end
+    elseif color.type == 'brand' then
+      local cssColor = _quarto.modules.brand.get_color_css(color.value)
+      if not cssColor then
+        output_warning(warnings, 'unknown brand color ' .. color.value)
+        return nil
+      end
+      return 'brand-color.' .. color.value
     end
   end
   quarto.log.debug('output_color output', color)

src/resources/filters/quarto-post/typst-css-property-processing.lua

@@ -330,9 +330,12 @@ function render_typst_css_property_processing()
           local k, v = to_kv(clause)
           if k == 'font-family' then
             div.attributes['typst:text:font'] = translate_string_list(v)
-          end
-          if k == 'font-size' then
+          elseif k == 'font-size' then
             div.attributes['typst:text:size'] = _quarto.format.typst.css.translate_length(v, _warnings)
+          elseif k == 'background-color' then
+            div.attributes['typst:fill'] = _quarto.format.typst.css.output_color(_quarto.format.typst.css.parse_color(v, _warnings), nil, _warnings)
+          elseif k == 'color' then
+            div.attributes['typst:text:fill'] = _quarto.format.typst.css.output_color(_quarto.format.typst.css.parse_color(v, _warnings), nil, _warnings)
           end
         end
       end

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

@@ -0,0 +1,30 @@
+---
+title: Translate brand named color references from CSS to Typst
+format:
+  typst:
+    keep-typ: true
+brand:
+  color:
+    palette:
+      dark-grey: "#222"
+      blue: "#82aeef"
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - '#block\(fill: brand-color\.dark-grey\)\[\s*#set text\(fill: brand-color\.blue\);'
+        - []
+---
+
+
+```{=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 >}}