Configuration

Croma Design System provides two versatile methods for configuring typography, allowing external clients to tailor the text styles to their specific needs:

• Using a Brand: This approach allows you to set up typography for an entire brand with a single variable. By defining a brand typography variable, all font settings, such as typeface, weights, and styles—are automatically applied across the UI. This method is quick and ensures consistency.
• Full Customization: For greater control, you can individually configure the typography by setting up resource paths (e.g., font files) and adjusting specific typography variables. This option enables you to tailor every detail of the text styles to meet unique design requirements.

Using a brand

When importing the bundle or core into your SCSS project, custom icons can be configured.

If you are using the CDS npm package, we recommend using the branded bundle to easily configure your brand while having the resources from the package.

Using predefined brand

@use '@circutor/ui/scss/common/cds-circutor-bundle';

However, if your project does not use node_modules, you must specify the resources path by setting the $config-resources-path variable and set the brand via $config-brand variable.

Using predefined brand

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

Important: If you customize the $config-resources-path variable to use a different location for the resources, you must maintain the original subfolder structure and content. Modifying the structure may cause missing assets or unexpected behavior in the UI components.

Resources folder structure

/resources/
  └── /fonts/
        ├── NettoPro-Bold.otf
        └── NettoPro-Regular.otf

---

Setting the font face

This defines the variables required for the font face configuration.

These variables ensure the correct loading and application of the desired font in you application.

$config-typography-400-path: 'path/to/your/fontfile-Regular.ttf';
$config-typography-400-format: 'truetype';
$config-typography-400-font-family: 'YourTypo-Regular';
$config-typography-400-font-weight: 400;

$config-typography-700-path: 'path/to/your/fontfile-Bold.ttf';
$config-typography-700-format: 'truetype';
$config-typography-700-font-family: 'YourTypo-Bold';
$config-typography-700-font-weight: 700;

If your are using a font that is available in the system, you don't need to set the font face variables. You can set the config-font-family variables directly.

Setting the variables

This defines the font-family variables required to be used on typography mixins.

$config-font-family-400: 'YourTypo-Regular';
$config-font-family-700: 'YourTypo-Bold';
$config-font-family-code: 'Consolas', 'Courier New', monospace !default;