Skip to main content

Styling

Styling for all PC4W elements is done in a top-down fashion using css variables.

Each variable below applies to all PC4W elements in an HTML document unless overidden by defining the variable for a specific element.

Variables

--bldn-background default: inherit

--bldn-font-size-small default: 1rem

--bldn-font-size-medium default: 1.25rem

--bldn-font-size-large default: 1.5rem

--bldn-font-family default: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif

--bldn-color-primary default: (65, 105, 225)

--bldn-color-positive default: (9, 185, 70)

--bldn-color-negative default: (209, 53, 13)

--bldn-color-warning default: (244, 144, 30)

--bldn-color-lightest default: (224, 224, 224)

--bldn-color-light default: (200, 200, 200)

--bldn-color-medium default: (151, 151, 151)

--bldn-color-dark default: (91, 91, 91)

--bldn-color-darkest default: (31, 31, 31)

Example

If there is a <bldn-priv-request> and <bldn-data-consum> element in an HTML document, the following CSS will give both elements (and all subsequent PC4W elements) a red background:

--bldn-background: red;

To have the <bldn-priv-request> use a different background than all other PC4W elements, use:

--bldn-background: red;
--bldn-priv-request-background: blue;