PatternLab (1.0.18)

Appearance

Patternlab Themes ​

Themes are managed within the src/core/themes directory. The system uses a centralized theme engine to swap primary and accent colors dynamically based on a parent CSS class (e.g., .theme-plausi).

Background: pharma4u uses different primary colors for the website than for LabXpert. The LabXpert theme is available for the pharma4u website, but it is not the default theme.

Demo ​

Select a theme from the dropdown in the header to apply a theme on these Primary Buttons:

html
<button type="button" class="c-btn -primary">button outside of .theme-plausi</button>
html
<div class="theme-plausi">
    <button type="button" class="c-btn -primary">button inside .theme-plausi</button>
</div>

TIP

Use .theme-plausi on a surrounding container (e.g. .tx-plausi) if you want to use the LabXpert theme within the pharma4u website.

Theme Configuration ​

The system relies on two main map structures to define the color palette:

  1. $themePrimary: The default (fallback) color map.
  2. $themes: A nested map containing overrides for specific products. Each key (e.g., plausi) corresponds to a CSS class prefix.

Key Variables ​

Both maps expect the following keys for consistency:

  • primaryColor (including variants: Dark, Light, Lightest, etc.)
  • formAccentColor (including variants)

Technical Implementation ​

The engine consists of a "themify" mixin and a getter function that handles the context switching.

1. The themify Mixin ​

This mixin iterates through the $themes map. It generates a scoped selector that overrides properties only when the element is a child of a theme class.

2. The primaryColor Mixin (Recommended Usage) ​

To ensure a property is theme-aware, use the primaryColor mixin. It automatically sets the default value and generates the necessary themed overrides.

Syntax: @include primaryColor($property, $color-key, $important: false);

Usage Example ​

Instead of hardcoding a color variable, use the mixin to make the component "themeable."

SCSS ​

scss
.c-btn.-primary {
  // Sets 'background-color' using 'primaryColor' from the maps
  @include primaryColor('background-color', 'primaryColor');
}

2026 - Pharma4u