Customization

ELIXIR Cloud Components (ECC) provides a flexible and powerful customization system that allows you to adapt components to match your design requirements. The system is built on CSS custom properties (tokens), inspired by the excellent design patterns from shadcn/ui (opens in a new tab).

This page focuses on the global design tokens that can be used with any ECC package, be it a service package (like WES, TRS, etc.) or the design utility package.

CSS Custom Properties (Design Tokens)

All ECC components use CSS custom properties with the --ecc- prefix. You can override these in your application's CSS to customize the appearance of all components.

Available Tokens

Here are all the available design tokens you can customize:

Color Tokens

Card Tokens

Chart Colors

Layout Tokens

Sidebar Tokens

Customizing Design Tokens

To customize the appearance of ECC components, override the CSS custom properties in your application's CSS:

Basic Token Customization

:root {
  /* Change the primary color to blue */
  --ecc-primary: oklch(0.6 0.25 250);
  --ecc-primary-foreground: oklch(1 0 0);
  
  /* Customize border radius */
  --ecc-radius: 1rem;
  
  /* Update accent colors */
  --ecc-accent: oklch(0.95 0.02 250);
  --ecc-accent-foreground: oklch(0.2 0 250);
}

Theme-Specific Customization

You can also provide different values for dark mode:

:root {
  /* Light theme */
  --ecc-primary: oklch(0.4 0.25 250);
  --ecc-background: oklch(1 0 0);
}
 
.dark {
  /* Dark theme */
  --ecc-primary: oklch(0.7 0.25 250);
  --ecc-background: oklch(0.1 0 0);
}

Credits

This customization system is inspired by the excellent work of shadcn/ui (opens in a new tab), which pioneered many of the patterns we use for component architecture and theming. We've adapted their approach to work seamlessly with Web Components and the ECC ecosystem.