More style options for custom blocks

[ute]

Some enhancements on the wish list

new options

• non-collapsible blocks Unable to produce non-collapsible callouts in HTML #5: evt documentation, or a css option in fbox style

styling mechanism

• make template themes:
  - [ ] plain: like in LaTeX, no frame

Additions are welcome, comments please 😊

[ute]

See also #3

[dhodge180]

It would be lovely to be able to customize how the referencing works, so that \ref{MyFirstVideo} might render as Video 1. i.e. by taking the 'label' for the environment by default.

I was also interested in non-collapsible callouts as above. I guess since it's a

we cannot stop the user being able to open/close, without some javascript to block the opening/closing?

[ute]

Thank you for your suggestions, @dhodge180 , greatly appreciated😃

I also have been thinking about the option to include the label in \ref, but it should not be called \ref then, because both LaTeX and Quarto render only the number with \ref. Do you have a suggestion how to call it?
There is a LaTeX package cleverref that does this by the command \cref, but its functionality is quite impressive, therefore I am reluctant to use the same command.

It would be possible to implement disable closing in the <details><summary>, but that would leave the triangle.
I plan to provide a simple box with headline as another example with the styling mechanism, but in the meanwhile you could also check out James Balamuta's custom-callout extension, maybe it does the job.

[dhodge180]

Thanks. I know for LaTeX the hyperref package is part of the default setup from Quarto, so presumably on that side there's chance to use the \autoref{} command it provides. I was guessing that it would just be a matter or adding support for autoref in the html rendering, using lua to pull the name of the object type and rely on hyperref to do the LaTeX for us.

Thanks for pointing out custom-callout, I did have a play with that, but I found your numbering options much more useful for my project. :) I have previously written my own custom blocks via the latex-environment package (hacking together tclcolorbox code to draw them in pdf, and trying to copy the quarto callout box css plus colour customization) but your implementations mean I don't need to keep fiddling with mine.

One other thing I've been trying to do, is to add dark-mode colouring for your custom-numbered-blocks. For now I have just defined some dark-mode colours in scss which override the border-color and color of certain elements, like this:

@mixin numbered-box-dark-mode($border-color, $title-bg-color, $title-color) {
  details.fbx-default {
    > summary,
    > div {
      border-color: $border-color; // Set border color
    }

    > summary {
      background-color: $title-bg-color; // Set title background color
      color: $title-color;
    }
  }
}

Then call them from another scss file like this:

$corollary-border-color: #7fbad7;
$corollary-title-bg-color: #005398;

.Corollary {
  @include numbered-box-dark-mode($corollary-border-color, $corollary-title-bg-color, $body-color);
}

So adding an option in the metadata color definition to provide a light pair and a dark pair would be awesome.

[david-hodge]

I've actually just realized there is probably a trick to get Video 1 rather than Video 1 by doing the following.

First define a figure, and give it a label like #vidFirst, like this.

Define a custom block called 'video' in the yml, then create one.

:::{.video #vidFirst}
Put video shortcode thing here
:::

Next use this to reference it,

[Video \ref{vidFirst}](#vidFirst)

Since in HTML the labelled figure will receive the label as an id, and in PDF this will render as a hyperlink to the figure as well.

[ute]

@david-hodge, thank you so much for your input 😄

referencing

I have just implemented an extended reference mechanism, which can be called by \bref(...) instead of \ref(...).
I found that \autoref works slightly different and makes apparently use of the special form of label, as does quarto's native crossreferencing with @. I am still open for changing the name of \bref, but I kind of like it because it is a little fun doing the opposite of (french) "bref", and lies between a(uto)ref and c(lever)ref.
It is still in a branch, you can try it out by updating the not yet documented feature with

quarto add ute/custom-numbered-blocks@bref

It is also possible to change the "type" of crossreference by setting the attribute reflabel in the block description, or generally in the definition of classes.
One could then also think of if it makes sense to distinguish further options, like \Bref always starting with capital or other fancy stuff.

colors and styling

I was actually thinking of making use of predefined colors in a kind of scss way, maybe taking advantage of Quarto's newish _brand.yml method of defining colors. Also finally implement more styles for the boxes, and make the mechanism "developer-friendly" (for future self) and documented. There are still some design decisions, and also it is more time consuming than adding a further reference macro ;-)

Thank you again for commenting, and if you have further comments, I am happy to hear about them. Maybe I will put your cross-reference suggestion in an extra issue (or you can do it), because it is not related to the styling enhancements. Then we can close it when the referencing seems stable and it is decided if it should be called \bref or something else.

[ute]

@dhodge180 , nice suggestion for dark mode! A good work-around as long as there is no reasonable implemented solution.

Wouldn't it be cool to take advantage of quarto's mode switch button? It shifts out an entire style sheet that has been compiled during rendering. I think the way to go is to use named colours that are accessible to scss rather than the current way, hexadecimal. Like "myfavoritepink", which could take a different value in dark an light themes. Then the colours would be defined as e.g.

custom-numbered-blocks:
   groups:
      theoremlike:
        colors: [myfavoritepink, myfavoritepurple]

These colours would then be defined in _brand_yml or in light and dark themes. I wonder though if it is possible to access the light and dark themes inside the lua filter when rendering to pdf. This would be necessary. It does work with brand :-).

[david-hodge]

Absolutely, yes. I have played around with it but I also don't always understand at what point the scss variables are in scope or not. Personally I've done this before by setting names like this in my SCSS:

$theorem-border: #123456
$theorem-bg: #8790ab

and then does exactly as you suggest and use these names in the metadata for your/an extension. Then the Quarto global dark-mode toggle just requires defining the #hex values above for light and dark separately using the same names each time. As long as scss variables are available to the lua filter to read/set.

Though maybe you're right as we should be using names to do with the colours than the object they're applying to. It just feels weird to me that myfavouritepink might mean two different colours.

What you cannot do is put the scss definitions into the lua filter as I don't think it can parse scss files to return css values. I tried this once. Now I sometimes add a css to a filter, and add as an html_dependency, but it has to be css and use --var.

[ute]

Myfavoritepink is not two colours, for the current style one would write

color: [myfavoritepink, uglybrown] 

should have called this one colors, not color...
But yes, it is weird to use the same name for a dark and a light color, therefore semantic names would be better, as @david-hodge suggests. This could be up to the user.

I will slowly rewrite larger parts of the extension. The possibilities to make extensions modular are better than a couple of years ago. It will become more streamlined to extend the range of possible block styles, hopefully.