Skip to main content
Version: Previous

Customisation (general)

Our design systems and components are highly configurable. Let's have a look at how you can take advantage.

Design system can be shared across multiple applications. When performing customisations, you can control the scope as follows:

  • General - applied to the design system itself, affecting all applications that use the system. This is described below.
  • Application-specific - this is only applied to a single application. Other applications using the same system are not affected.

Configuring defaults

The starting point for making general customisations is the src/_config folder:

alpha-design-system
├── dist
├── node_modules
├── src
│ ├── _config
│ │ ├── styles
│ │ │ ├── colors.ts
│ │ │ └── index.ts
│ │ ├── tokens
│ │ │ ├── custom.ts
│ │ │ ├── default.ts
│ │ │ └── index.ts
│ │ ├── values
│ │ │ ├── color.ts
│ │ │ ├── index.ts
│ │ │ ├── misc.ts
│ │ │ ├── sizing.ts
│ │ │ └── typography.ts
│ │ └── index.ts

It contains configuration files that set default values for various design tokens, as well as a few other settings.

You can achieve major visual changes simply by modifying token defaults. There are several categories of token available:

  • Colour: base colours, dark/light mode, colour variants for interactive states (hover etc.)
  • Typography: default font family, font size and line height hierarchy
  • Sizing: component sizing, spacing and border style
  • Miscellaneous: other configuration options, such as the naming prefix (e.g. alpha)
tip

To help you visualise how modifying tokens impacts the component look and feel, we have created a live configuration preview.

Overriding default implementation

To go beyond adjusting token values, you can override the default component implementation. You can choose only to override certain aspects of a component (such as template, styles or shadow DOM options) or provide a completely custom implementation.

By default, components in your design simply re-export components from the underlying foundation design system as is (exact code can vary):

import {foundationButton} from '@genesislcap/foundation-ui';

export const alphaButton = () => foundationButton();

Instead of re-exporting the default, you can provide your own custom implementation:

import {css, FoundationElement, FoundationElementDefinition, html} from '@genesislcap/foundation-ui';

export const styles = css`
/* CSS */
`;

export const template = html<AlphaButton>`
/* Template */
`;

interface ButtonDefinition extends FoundationElementDefinition {
/* Any properties */
}

export class Button extends FoundationElement {
/* Any custom logic */
}

export const alphaButton = Button.compose<ButtonDefinition>({
baseName: 'button',
template,
styles
});