Skip to main content

Styling & CSS variables

Styling Contribe Plugins with CSS variables and custom override

Updated over 9 months ago

Styling Our Components with CSS Variables

Our components are designed to be easily customizable via CSS variables. By using custom properties, you can change everything from colors and fonts to spacing and animations without modifying the component’s underlying CSS. This guide explains the available variables, their default settings, and usage examples.

Tip: To override any variable, simply redeclare it in a parent element or within your component’s host. For example:

:host { 
  --contribe-primary-color: #007bff; /* Change primary color to blue */ 
}

Global Settings

These variables control the overall look and feel of our components:

Variable

Default Value

Description

--contribe-line-height

1.5

The default line height for the component host.

--contribe-primary-color

#000

Primary color used for text, icons, and various highlights.

--contribe-secondary-color

#fff

Secondary color typically used for backgrounds or contrasts.

--contribe-border

1px solid #000

Default border style applied to various elements.

--contribe-border-radius

1px

Border radius used by multiple components.

--contribe-font

inherit

Base font family.

--contribe-font-large

max(0.9rem, 11px)

Font size for larger text elements.

--contribe-font-small

max(0.8rem, 10px)

Font size for smaller text elements.

Container Settings

These variables customize the main container that wraps our component:

Variable

Default Value

Description

--contribe-container-color

var(--contribe-primary-color)

Container text or element color (linked to the primary color by default).

--contribe-container-background

inherit

Background color of the container.

--contribe-container-border-radius

var(--contribe-border-radius)

Border radius applied to the container.

--contribe-container-border

var(--contribe-border)

Border style for the container.

--contribe-container-padding

10px

Padding inside the container.

--contribe-container-max-width

900px

Maximum width of the container.

--contribe-container-min-width

200px

Minimum width of the container.

--contribe-container-font-size

inherit

Font size within the container.

Project Button Settings

These variables control the appearance and behavior of project buttons and related elements:

Button Colors and States

Variable

Default Value

Description

--contribe-project-color

var(--contribe-primary-color)

Text (and default icon) color for project buttons.

--contribe-project-active-color

var(--contribe-primary-color)

Text color for an active project button.

--contribe-project-active-background

var(--contribe-secondary-color)

Background color when a project is active.

--contribe-project-active-icon-color

inherit

Icon color in the active state.

--contribe-project-hover-background-default

Uses color-mix(in srgb, var(--contribe-project-active-background), white 20%)

Default hover background by mixing the active background with white.

--contribe-project-hover-background-color

Falls back to --contribe-project-hover-background-default

Hover background color for project buttons; override this to customize hover behavior.

--contribe-project-background

inherit

Default background color for project buttons.

--contribe-project-border

var(--contribe-border)

Border style for project buttons.

--contribe-project-border-radius

var(--contribe-border-radius)

Border radius for project buttons.

--contribe-project-padding

2px

Padding within project buttons.

Project Icons

Variable

Default Value

Description

--contribe-project-icon-size

100%

Icon size within the project button.

--contribe-project-icon-color

var(--contribe-primary-color)

Default color for project icons.

Project Text

Variable

Default Value

Description

--contribe-project-text-padding

5px

Padding around the project button’s text.

--contribe-project-text-size

var(--contribe-font-small)

Font size for the project text.

Project Description

Variable

Default Value

Description

--contribe-project-header-font-size

var(--contribe-font-small)

Font size for the header text in project descriptions.

--contribe-project-description-font-size

var(--contribe-font-small)

Font size for the description text.

--contribe-project-description-padding

5px

Padding for the project description container.

--contribe-project-description-color

var(--contribe-primary-color)

Text color in the project description.

--contribe-project-description-background

var(--contribe-secondary-color)

Background color for the project description.

--contribe-project-description-border-radius

var(--contribe-border-radius)

Border radius for the description box.

--contribe-project-description-border

var(--contribe-border)

Border style for the project description.

--contribe-project-description-margin

0 0

Margin around the project description.

--contribe-project-link-color

inherit

Color for any links within the project description.

Selector & Text Settings

These variables determine the typography and color for header and descriptive texts:

Variable

Default Value

Description

--contribe-selector-header-title-font-size

var(--contribe-font-large)

Font size for the selector header title.

--contribe-selector-header-description-font-size

var(--contribe-font-small)

Font size for the selector header description.

--contribe-selector-header

var(--contribe-primary-color)

Overall color for the selector header.

--contribe-selector-header-checkbox

var(--contribe-primary-color)

Color for checkboxes in the header.

--contribe-selector-header-title

var(--contribe-primary-color)

Color for the header title text.

--contribe-selector-header-description

var(--contribe-primary-color)

Color for the header description text.

--contribe-selector-project-description-title

var(--contribe-primary-color)

Color for the title text within project descriptions.

--contribe-selector-project-description-description

var(--contribe-primary-color)

Color for the description text within project descriptions.

Custom Overrides Using styleOverride

In addition to CSS variables, our LIT components support direct style overrides via the styleOverride attribute. This allows you to apply custom styles dynamically without modifying global styles or redefining CSS variables.

Internally
​

How to Use styleOverride

To override styles for a specific instance of a component, set the styleOverride attribute with the desired CSS rules. The styles you provide will be injected into the component’s shadow DOM.

Example Usage

If we want to override the color of any html element within the plugin like the color of a project button, we can simply write css as follows

.contribe-selector-project-button {
  color: red !important;
}

and then pass it as an attribute to the plugin as follows

<contribe-plugin styleOverride=".contribe-selector-project-button {color: red !important;}"/>

When to Use styleOverride

  • When you need instance-specific styling without modifying global styles.

  • When using dynamic styles generated at runtime.

  • When customizing third-party components without modifying their source code.

Did this answer your question?