Theme
How to use the theme color system.
Usage
Styles
sass
@use "~@iraiser/biscuit-design-components/components/theme/styles";
Main colors
| Name | Default |
|---|---|
primary | #59c77f |
on-primary | #fff |
secondary | #2e9df7 |
on-secondary | #fff |
tertiary | #f16061 |
on-tertiary | #fff |
surface | #142133 |
success | #4fcb53 |
on-success | #fff |
warning | #ff902a |
on-warning | #fff |
invalid | #f5402c |
on-invalid | #fff |
Theming
Theming with CSS custom properties
Set custom styles on global...
sass
:root {
--bdc-theme-primary: #0971b3;
}
...or on a specific element:
sass
.foo-button {
--bdc-theme-primary: #0971b3;
}
Theming with Sass variables
Set global theme colors in your Sass file:
sass
@use "~@iraiser/biscuit-design-components/components/theme" with (
$primary: #0971b3
);
This new declaration will override the default primary value.
Style customization
The variable {style} in the documentation correspond with the list of colors, do not hesitate to
check it for more examples!
CSS classes
| CSS Class | Description |
|---|---|
bdc-theme--{style} | Set the selected style. |
CSS custom properties
| CSS Custom property | Description |
|---|---|
--bdc-theme-{style} | Override the selected style. |
Sass variables
| Variable | Description |
|---|---|
${style} | Set the selected style value. |
Sass mixins
| Mixin | Description |
|---|---|
property($property, $style, $important: false) | Set CSS theme property, with optional !important. |
no-touch-screen | Set CSS only for no touch screen. |
set-disabled-state | Set element at disabled style. |
Sass functions
| Function | Description |
|---|---|
set-var($name, $fallback) | Set CSS Custom Property with auto var(--...) wrapper. |
Usage
sass
@use "~@iraiser/biscuit-design-components/components/theme";
.foo {
@include theme.property(font-family, "Open Sans");
}