Theme v11

[theetrain]

• Set up v11 styles with Theme
• Ensure Carbon themes can be provided easily with prebuilt CSS
• Ensure CSS variables can be overridden easily, and are prerenderable
• Ensure nested/child components can be themed; closes Support for inline theming? #1648
• Explore unloading (or conditionally importing) component styles so that users may provide their own

Notes

Core styles and fonts

• Users consuming carbon-components-svelte need to run SCSS that has Carbon's core styles (reset, globals, fonts, etc) applied like this:

@use '@carbon/styles' with (
  $font-path: '@ibm/plex'
);

The $font-path is necessary otherwise font files will load with 404s. We may want to precompile this for convenience, that way users can import one file instead without worrying about configuration:

+layout.svelte

<script>
  import 'carbon-components-svelte/css/core.css'
</script>

Though we can document the SCSS way for advanced use.

Add themes

The custom way to add themes is to include this SCSS

@use '@carbon/themes/scss/themes' as *;
@use '@carbon/themes';

:root {
  @include themes.theme($white);
}

[data-carbon-theme='g10'] {
  @include themes.theme($g10);
}

[data-carbon-theme='g90'] {
  @include themes.theme($g90);
}

[data-carbon-theme='g100'] {
  @include themes.theme($g100);
}

We should include all of this in a precompiled .css file for developers consuming Carbon as-is (the "happy path") and provide documentation for those who want to override themes via SCSS.