theme - export two more css variable about code block color

[cderv]

This PR just export two more CSS variables to pass the information about color used for code blocks.
This complements the other variables already defined for extension.

closes #10717 for quarto side. quarto-live will need to do the rest. cc @georgestagg

This needs to be checked against various example to see if that is enough to handle all themes.
So opening as a draft

[cderv]

It seems like this is not the right place to export those variables 🤔

[cderv]

Now doing this right where the variables are defined, which avoid the problem.

This adds new :root { definition elsewhere in the CSS. Not sure this is the right place to do this.

We do export in several ways. One of theme is even for typescript extra addition also

quarto-cli/src/format/html/format-html-shared.ts

Lines 222 to 231 in 4bd31bc

	export const quartoGlobalCssVariableRules = () => {
	return `
	$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
	/*! quarto-variables-start */
	:root {
	--quarto-font-monospace: #{inspect($font-family-monospace)};
	}
	/*! quarto-variables-end */
	`;
	};

Anyhow, discussed with @cscheid : We should export all SCSS variable as CSS variable, namespaced properly.

So I'll leave this as draft, and we can probably do the export of everything really soon.

[cscheid]

Yes. Specifically, well use the cssVarsBlock code from a branch:

https://github.com/quarto-dev/quarto-cli/blob/feature/sass-analyzer/src/core/sass/add-css-vars.ts#L18-L31

[cscheid]

This pull request will make all SCSS color variables available for CSS under the --quarto-scss-export- prefix, see https://github.com/quarto-dev/quarto-cli/pull/10727/files#diff-2b4c198af19970ab5cb8ebcc2ad79da82d5f13f3ed648ed3891b46d72ba84aab. I think we can close this, then?

[cderv]

@georgestagg I think you can now check for existence and value for

• --quarto-scss-export-code-block-bg
• --quarto-scss-export-code-block-color

You can try highlight-style: breezedark to have both.

@cscheid I did find those variable using an example and looking at the .css file.

Initially I would have expected the value to be the one in SCSS, which is $code-block-bg-color, but it seems we use the -color.

$code-block-bg exists indeed, but can be true, false or a color from our doc. It is used to drive different if condition in scss. I understood our --quarto-scss-export was for color variable only for now.

Just sharing as feedback in case this is not expected.

[cscheid]

$code-block-bg exists indeed, but can be true, false or a color from our doc. It is used to drive different if condition in scss. I understood our --quarto-scss-export was for color variable only for now.

Your understanding is correct.

My analyzer won't guarantee that a variable with potentially different types will be exposed. Ideally, we'd write our SCSS to have more stable types, and then the analyzer accurately detects what's going on. It's possible that the analyzer is getting confused with the different types happening and it's emitting bad CSS. If that's the case, it's a bug I should fix. If it's emitting correct CSS but with a weird, unexpected CSS variable, then I think it's an annoyance rather than a bug.

[cderv]

If that's the case, it's a bug I should fix. If it's emitting correct CSS but with a weird, unexpected CSS variable, then I think it's an annoyance rather than a bug.

For now I only identified the latter. I'll watch out for the former in cases where $code-block-bg is set to something specific;

Thanks for the clarification !