UI Customization

Easyteam Embedded provides comprehensive theming capabilities to match your platform's design system.

Theme Structure

All components can inherit styles from a global theme while allowing component-specific overrides.

To define your theme:

Design tokens that define your core design system values

Component-specific styling that applies these tokens to individual elements

Component styling inherit from the tokens you define and each component can have additional specific styling on each of its elements for maximum control.

Basic Implementation

Design Tokens

Design tokens define the fundamental values of your design system. Tokens can be direct values OR token references.
You can use direct values (e.g., #ffffff) or reference tokens (e.g., primary.main).

These tokens will automatically apply to all components by default, allowing you to define the theme once across the full app.

Common Elements

All components share some basic styling capabilities:

Text Elements

Button Styling

Button Variants

Each button type can be customized: primary, secondary, small, outline, link-button, destructive

Table Styling

Referencing Nested Tokens

When tokens are nested (like colors.primary.main), you can reference them using dot notation:

Styling Inheritance

Styles apply in this order:

Base/global styles are applied first

Common element styles (button, table, etc.) are applied next

Component-specific styles are applied last and override previous styles

Component-Specific Themes

Each component accepts specific styling options. Components inherit the global theme but can be overridden with component-specific themes.
When defining the styling for a specific component, you can still refer to the globally defined tokens, colors and fonts.

Read each component's reference page for the customization options.

Custom Strings

Many components allow customization of text strings.
Custom strings allows you to override any of the texts on the component with your own texts.

Custom Strings are currently in beta.

💡

Can't find the theme property you need? Our support team can assist and open access to other customization options.

Theme Structure#

Basic Implementation#

Design Tokens#

Common Elements#

Text Elements#

Button Styling#

Button Variants#

Table Styling#

Referencing Nested Tokens#

Styling Inheritance#

Component-Specific Themes#

Custom Strings#