Learn how to use CSS to match your branding or achieve a unique look on your storefront
The Marketing site allows you to setup your storefront's content, theme and component settings. It's been designed to meet most common needs. However if you have greater needs for customisation, Cubby components can be styled with CSS code
CSS Variables
Cubby components are built using Custom HTML Elements. Because their content is in the Shadow DOM, it cannot directly be manipulated through CSS. However CSS Variables have the ability to penetrate into the Shadow DOM and thus are an ideal candidate for manipulating styles within custom elements.
Cubby exposes a variety of CSS variables which can be added to your page to apply a global effect or used with more narrow CSS Selectors to do targeted styling.
/* All cubby components on this page will now have a blue primary color */
:root {
--cubby-primary-color: blue;
}
/* Only cubby-facility elements will have a red secondary color */
cubby-facility {
--cubby-secondary-color: red;
}
/* You can still use any other pseudo selectors to narrow down the target element */
cubby-facility:nth-child(even) {
--cubby-secondary-color: green;
/* Cubby components themselves are not in the shadow DOM so their
styles can be manipulated, just not those of their children */
width: 200px;
}
Basic variables
These variables are direct overrides of the styles set in the Marketing site -> Styleguide section. Most components make use of at least some of them.
|
--cubby-density
|
Density between elements in content |
|
--cubby-spacing
|
The space between individual elements in a collection (for example the space between grid cells in a Cubby Facility component) |
|
--cubby-primary-color
|
Used for buttons, links and other actions |
|
--cubby-on-primary-color
|
The text color used when background color is --cubby-primary-color |
|
--cubby-secondary-color
|
Used to highlight important information or notices |
| --cubby-on-secondary-color | The text color used when background color is --cubby-secondary-color |
| --cubby-surface-color | Applied to all "backgrounds" such as the back of cards, list items and forms |
| --cubby-on-surface-color | The text color used when background color is --cubby-surface-color |
|
--cubby-success-color
|
Used to indicate an operation was successful |
|
--cubby-outline-color
|
Color of borders around elements |
| --cubby-outline-width | Width of borders around element in any compatible unit |
| --cubby-divider-color | Color of borders used as dividers |
| --cubby-divider-color | Width of borders around element in any compatible unit. |
| --cubby-radius | The border radius of elements such as cards, buttons and background |
| --cubby-shadow-color | This property will interact with the shadow style you've selected in the Marketing site |
| --cubby-shadow | A full shadow override using a custom CSS shadow declaration |
|
--cubby-heading-font
|
The font family to be used in heading and title elements |
|
--cubby-body-font
|
The font family used in the body and content of elements |
Color variables like --cubby-primary-color can take any valid, such as hex, rgb, hsl and more.
While it is possible to apply something more complex like a linear-gradient to color variables, note that due to how interaction states are computed it may not be possible to show hover effects on buttons for example.
Additional CSS Variables
Some Cubby components offer additional CSS variables for fine-grain control of their styles, they are documented on the corresponding component page.
CSS parts
While normally targeting elements within the shadow DOM with CSS selectors is impossible, the ::part pseudo-element allows access to all marked content within a web component.
For example, you may want to set custom CSS rules on each individual element within a Cubby Facility component
cubby-facility::part(card) {
background-image: url('brand_background.png');
transition: transform .15s;
}
/* Once the individual part is selected you can refine the selector too */
cubby-facility::part(card):hover {
transform: scale(1.15);
}
There are no CSS parts shared by all components, so to see available options you can visit the corresponding component page where all of its parts are listed.