Skip to content

v0.12.0

Choose a tag to compare

@metonym metonym released this 13 Sep 21:21
· 2195 commits to master since this release

Features

  • ship precompiled CSS StyleSheets for each Carbon theme, available in the css folder (70e0875)

    • css/white.css: Default Carbon theme (light)
    • css/g10.css: Gray 10 theme (light)
    • css/g90.css: Gray 90 theme (dark)
    • css/g100.css: Gray 100 theme (dark)
    • css/all.css: All themes (White, Gray 10, Gray 90, Gray 100) using CSS variables

Using precompiled CSS

  1. svelte-preprocess

The easiest way to import a StyleSheet is with svelte-preprocess.

const svelteOptions = {
  preprocess: require("svelte-preprocess")(),
};
<!-- App.svelte -->
<style global>
  /** Gray 10 theme **/
  @import "carbon-components-svelte/css/g10";
</style>
  1. JavaScript import

Importing a CSS file in a JavaScript file will require the appropriate file loader(s).

import "carbon-components-svelte/css/all.css";
import App from "./App.svelte";

const app = new App({ target: document.body });

export default app;

See webpack.config.js in examples/webpack.

Documentation