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

• add example set-ups using popular bundlers/frameworks

  • examples/rollup: SPA bundled using Rollup
  • examples/rollup-typescript: SPA bundled using Rollup with TypeScript support
  • examples/routify: SPA + static export using Routify
  • examples/sapper: SSR + static export using Sapper
  • examples/svite: SPA developed with Svite, bundled with Rollup
  • examples/webpack: SPA bundled with webpack

• revamp README guidance on consuming the library