Merge pull request #1446 from quarto-dev/revealjs/callout-customize

quarto-dev · Nov 7, 2024 · 03341e5 · 03341e5
2 parents dc548a7 + 3883e6e
commit 03341e5
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 0 deletions.
diff --git a/_quarto.yml b/_quarto.yml
@@ -672,6 +672,7 @@ format:
 
 filters:
   - filters/tools-tabset.lua
+  - filters/color-box.lua
 
 freeze: true
 

diff --git a/docs/presentations/revealjs/themes.qmd b/docs/presentations/revealjs/themes.qmd
@@ -176,6 +176,34 @@ Here's a list of all Sass variables (and their default values) used by Reveal th
 | `$presentation-slide-text-align`       | left                                     |
 | `$presentation-title-slide-text-align` | center                                   |
 
+### Callouts
+
++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+| Variable                 | Notes                                                                                                                                                              |
++==========================+====================================================================================================================================================================+
+| `$callout-border-width`  | The left border width of callouts. Defaults to `0.3rem`.                                                                                                           |
++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+| `$callout-border-scale`  | The border color of callouts computed by shifting the callout color by this amount. Defaults to `0%`.                                                              |
++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+| `$callout-icon-scale`    | The color of the callout icon computed by shifting the callout color by this amount. Defaults to `10%`.                                                            |
++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+| `$callout-margin-top`    | The amount of top margin on the callout. Defaults to `1rem`.                                                                                                       |
++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+| `$callout-margin-bottom` | The amount of bottom margin on the callout. Defaults to `1rem`.                                                                                                    |
++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+| `$callout-color-<type>`  | The colors for the various types of callouts. Defaults:                                                                                                            |
+|                          |                                                                                                                                                                    |
+|                          | | type        | default                 |                                                                                                                          |
+|                          | |-------------|-------------------------|                                                                                                                          |
+|                          | | `note`      | [`#0d6efd`]{.color-box} |                                                                                                                          |
+|                          | | `tip`       | [`#198754`]{.color-box} |                                                                                                                          |
+|                          | | `caution`   | [`#dc3545`]{.color-box} |                                                                                                                          |
+|                          | | `warning`   | [`#fd7e14`]{.color-box} |                                                                                                                          |
+|                          | | `important` | [`#ffc107`]{.color-box} |                                                                                                                          |
+|                          |                                                                                                                                                                    |
+|                          | Note that style for callout is to have left border using type color, and header background to use a variation of this color.                                       |
++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+
 You'll notice that some of the Sass variables use a `presentation-` prefix and some do not. The `presentation-` prefixed variables are specific to presentations, whereas the other variables are the same as ones used for standard Quarto [HTML Themes](/docs/output-formats/html-themes.qmd).
 
 Since all Quarto themes use the same Sass format, you can use a single theme file for both HTML / website documents and presentations.

diff --git a/filters/color-box.lua b/filters/color-box.lua
@@ -0,0 +1,19 @@
+Span = function(s)
+  if not quarto.format.isHtmlOutput() then
+    return nil
+  end
+  if s.classes:includes('color-box') then
+    local color
+    if  s.attributes['color'] then
+      quarto.log.output("HERE")
+      color = s.attributes['color']
+      s.attributes.color = nil
+    elseif #s.content == 1 and s.content[1] and s.content[1].t == "Code" and s.content[1].text and s.content[1].text:sub(1, 1) == '#' then
+      color = s.content[1].text
+    end
+    if color then
+      s.content:insert(1, pandoc.Span('', pandoc.Attr('', { 'color-box' }, { style ="background-color:" .. color .. ";"})))
+      return pandoc.Span( s.content , { "", { "color-box-container" } })
+    end
+  end
+end
diff --git a/styles.css b/styles.css
@@ -337,3 +337,16 @@ iframe.reveal-demo {
 .illustration {
   border: 1px solid #dee2e6;
 }
+
+span.color-box-container {
+  display: inline-flex;
+  align-items: center; /* Align vertically */
+}
+
+span.color-box {
+  display: inline-block;
+  width: 1em; /* Width of the color box */
+  height: 1em; /* Height of the color box */
+  margin-right: 0.2em; /* Space between box and text */
+  border: 1px solid #000; /* Border color */
+}