Add theme support for code snippet

[britneywwc]

Done

• Added theme support for icons used in code snippets (get-link, linux-prompt)
• Added theme support for code snippets
• Added dark theme examples for code snippets: /dropdown-multiple-dark, /default-dark, /icon-dark

Not done

• Code snippet with syntax highlighting is currently not supported on dark theme
• Cannot use the current theme colours because the dark code background is grey and not black, doesn't have the correct contrast in colour

Fixes WD-8977

QA

• Open demo
• Go to docs/examples and check if code snippets' themes update accordingly
• Check examples:
  • Code Snippet / Dark
  • Code Snippet / Multiple dropdowns Dark
  • Code Snippet / Icon Dark

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[webteam-app]

Demo starting at https://vanilla-framework-5004.demos.haus

[bartaz]

I don't think we will need different code backgrounds, so I would treat it as a variant of background colour.

So following out naming conventions it would be $colors--light-theme--background-code instead.

Please update all the names to follow this convention.

[lyubomir-popov]

where did this code background come from?

[bartaz]

We have them defined already, this is just moving them into CSS variables in theme:

vanilla-framework/scss/_settings_colors.scss

Lines 55 to 56 in 5f97871

	$color-code-background: rgba($color-x-dark, 0.03);
	$color-code-background-dark: rgba($color-x-light, 0.3);

[bartaz]

@lyubomir-popov Is this ok from design point of view? Uses dark background for code (that we have already in Vanilla).

[lyubomir-popov]

@lyubomir-popov Is this ok from design point of view? Uses dark background for code (that we have already in Vanilla).

The background of the code snippet has a lot more contrast with the base background than in the light theme, how was that derived? I think we need to make it similar to the contrast we have in the light theme.

[bartaz]

@lyubomir-popov Is this ok from design point of view? Uses dark background for code (that we have already in Vanilla).

The background of the code snippet has a lot more contrast with the base background than in the light theme, how was that derived? I think we need to make it similar to the contrast we have in the light theme.

@lyubomir-popov This is what we have in Vanilla for a while: https://vanillaframework.io/docs/examples/base/code-inline-dark

If we need to adjust this, it's a good moment to do this. Can you suggest other values?

What should the code background be (on white, paper, dark)?
What should the code snippet header background be (in all 3 versions)?

[lyubomir-popov]

Hi I don't have capacity to do this right now, please proceed with this, and we can improve later.

[bartaz]

We probably need to look into theming rest of the syntax highlighting colours, but this can wait.

[bartaz]

Looks good, thanks for that!