A default theme of colors, styles, and fonts is applied to the widget out-of-the-box. These are defined utilizing CSS variables which you can override with your brand styles. You can pick and choose what you override, you don't need to modify all the values.
Try it out
Visualize your widget in a live preview and try different colors for the theme. Click here to open the previewer in a web page.
| Iframe | ||||||
|---|---|---|---|---|---|---|
|
Storybook Widget Previewer
Demo
Theming
To use CSS variables you'll need to add variables to your stylesheet or <style> tag in your HTML document. In the examples below we’ve used <style> tags. Add the style tag to the <head> of your document.
| Code Block | ||
|---|---|---|
| ||
// Open the style tag
<style>
// select the widget element
sm-widget {
// List all your css variables
--<css-variable-name>: <value>;
}
// Close the style tag
</style> |
Changing the font
There are two types of fonts you can use, web-safe fonts and custom fonts. Web safe fonts are ones that are already included on most computers. They do not require any font installation. Custom fonts will require you to install the font. You can list multiple fonts, it will try and use the first one defined and fall back to the others.
Usage
| Code Block | ||
|---|---|---|
| ||
<style>
sm-widget {
--sm-font-family-primary: 'Times, "Times New Roman", Georgia, serif';
}
</style> |
Palette
The widget uses the following colors for control buttons, backgrounds, and content cards.
| Code Block | ||
|---|---|---|
| ||
<style>
sm-widget {
--sm-color-gray-lightest: #eaeaea;
--sm-color-gray-light: #d3d3d3;
--sm-color-primary-lightest: #e8ebef;
--sm-color-primary-light: #97b7d7;
--sm-color-primary-base: #1e5b98;
--sm-color-primary-dark: #234973;
--sm-color-secondary-base: #a3bef5;
--sm-color-tertiary-base: #ed5645;
--sm-color-tertiary-dark: #bd2920;
}
} |
Box shadow
We've used four different shadow levels, sm, md, lg, and xl.
Usage
| Code Block | ||
|---|---|---|
| ||
--sm-box-shadow-sm: 0px 2px 20px rgba(0, 0, 0, 0.04), 0px 2px 12px rgba(0, 0, 0, 0.04);
--sm-box-shadow-md: 0px 2px 10px rgba(0, 0, 0, 0.04), 0px 6px 24px rgba(0, 0, 0, 0.1);
--sm-box-shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.06), 0px 12px 28px rgba(0, 0, 0, 0.12);
--sm-box-shadow-xl: 0px 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.12),
0px 16px 32px rgba(0, 0, 0, 0.12); |
Contents
| Table of Contents | ||||
|---|---|---|---|---|
|