Theming in the UI Kit
This chapter delves into the theming capabilities of our UI kit. It explains how design palettes are abstracted using CSS variables, outlines the process for creating and integrating new palettes, and provides guidelines for testing and deployment.
Palette Abstraction
- Overview:
For each White Label item, a design palette is created—a set of CSS variables that encapsulate the customer’s brand colors and styling. - Examples:
- Base Variables:
For example,--p-10: #390b00;defines a primary color. - Component Variables:
For example,--on-primary: var(--p-100);is used to style text or elements placed over the primary color.
- Base Variables:
Process for Implementing a New Palette
- Palette Creation:
- A designer develops a new palette based on the customer's branding requirements.
- The palette includes all necessary CSS variables reflecting the desired colors and styles.
- Exporting the Palette:
- Once approved, the palette is exported as a CSS file containing the full set of variables.
- Integration into White Label:
- File Upload: The CSS file is uploaded to the corresponding White Label item.
- Direct Insertion: Alternatively, the CSS code can be pasted into the Custom CSS field.
- The system then automatically applies the new variables to all related UI kit components.
Limitations and Recommendations
- Limited Integration:
The theming functionality via the UI kit is not implemented in every part of our micro-frontend application (for example, the portal project has minimal integration). - Testing Guidelines:
- Thoroughly test the new palette across all sections of the application.
- Confirm that all CSS variables are applied correctly and that the design aligns with the customer’s specifications.
- Automation:
Once the new CSS file or custom code is implemented, the system automatically updates the UI kit components by replacing the old variables with the new ones.