Styling
Branding, dark mode, CSS custom properties and parts.
Branding
The colour and name come from the widget's own branding in the back office, else from the sWidget app's branding in My Apps, else from the client's name with the default colour. data-accent replaces the colour on one page.
Light and dark
data-theme="dark" draws the widget on a dark surface; data-theme="auto" follows the visitor's system setting. Without the attribute the widget is light and has no background of its own, as before.
CSS custom properties
Set them on the widget's container or any element above it. They pass into the widget's shadow DOM and take the place of the branding values.
| Property | Meaning |
|---|---|
--swidget-primary | Main colour: primary buttons, links, focus outline. |
--swidget-on-primary | Text on the main colour. |
--swidget-surface | Background of fields (and of the widget in dark mode). |
--swidget-text | Text colour. |
--swidget-muted | Secondary text and field borders. |
--swidget-danger | Errors and the required mark. |
--swidget-success | Confirmations. |
--swidget-radius | Corner radius of fields and buttons. |
--swidget-radius-large | Corner radius of cards and groups. |
--swidget-font | Font family (the page's own by default). |
--swidget-font-size | Base font size. |
#swidget-k2m9x7q4ab1c {
--swidget-primary: #0055aa;
--swidget-radius: 4px;
--swidget-font: "Inter", sans-serif;
}Parts
The widget element has the class swidget. Its inner pieces are styled from the page with ::part():
| Part | Meaning |
|---|---|
::part(root) | The widget's outer box. |
::part(field) | A field with its label. |
::part(label) | A field label. |
::part(input) | A text field, select or radio button. |
::part(button) | Every button; primary, outline and link name its kind. |
::part(group) | A group of fields (sender, recipient, a package, the services). |
::part(list) | The list of pickup points or of shipments. |
::part(option) | One pickup point in the list. |
::part(message) | A status or error message. |
::part(hint) | The note on required fields. |
::part(result) | A price or a shipment. |
::part(confirm) | The confirmation before cancelling. |
.swidget::part(button primary) { text-transform: uppercase; }
.swidget::part(input) { border-width: 2px; }
.swidget::part(option):hover { background: #f4f6fb; }