Skip to main content

Customization

We recommend using the brand configuration directly to maintain consistency across products. However, Croma Design System allows some customization through specific parameters.

If you need to customize your project, you must use the bundle and set the brand setting its variable, as shown in the following example:

@use '@circutor/ui/scss/common/cds-bundle.scss' with (
    $config-brand: 'circutor',
);

Customizing the Resources Path​

By default, the design system reads resources like typography and icons from node_modules. If there are issues or specific requirements, you can customize the resource path using the resources-path variables:

@use '@circutor/ui/scss/common/cds-bundle' with (
    $config-brand: 'circutor',
    $config-resources-path: 'your/resources/path',
);
Important

Please note that the resources folder must contain the following subfolders: fonts, icons, and logos.

Customizing Roundness​

Each brand already has a predefined roundness style. You can override it globally or for specific components.

Global Roundness​

You can select from three predefined roundness styles:

  • sharp – Very light rounding
  • soft – Soft rounding
  • pill – Fully rounded (capsule shape)

Example of overriding the global roundness:

@use '@circutor/ui/scss/common/cds-bundle' with (
    $config-brand: 'circutor',
    $brand-style-border-radius: 'sharp',
);

Component Roundness​

If you want to keep the brand's default roundness (or set yours) globally but customize it for a specific component (e.g., avatars), you can use the component-specific variable.

@use '@circutor/ui/scss/common/cds-bundle' with (
    $config-brand: 'circutor',
    $_cds-avatar-border-radius: 0.5rem,
);

By using these configuration options, you can fine-tune the design system while maintaining alignment with brand guidelines. here you can find the list of varibles that you can customize:

$_cds-avatar-border-radius
$_cds-button-border-radius
$_cds-navigation-item-border-radius
$_cds-badge-border-radius
$_cds-toggle-border-radius
$_cds-banner-border-radius
$_cds-toast-border-radius
$_cds-chip-border-radius
$_cds-textfield-border-radius
$_cds-tag-border-radius
$_cds-tooltip-border-radius
$_cds-modal-border-radius