Page Comparison

...

Naming conventions

Packages

Each component must be created as a separate package and contain package.json file with its name, version and other information.

• the package must be in one of the folders: components, blocks, foundations and have the same name as the package name.

• package name should contain scope (design-system) and name in the kebab-case format. e.q.: @design-system/my-awesome-component.

• component name should be in the PascalCase format. e.q.: MyAwesomeComponent.

• story title should be in the human-readable case format. e.q.: My Awesome Component.

• story id should be in the camelCase format. e.q.: myAwesomeComponent.

Classes methods

Component css class should have prefix cds- (Chameleon Design System).

Variables

Should be in the camelCase.

Tokens

There are 2 layers of tokens:

• Global tokens. Located in design-tokens/src folder. That define the standards for the entire site.

• Component tokens. Located in component package src/*.tokens.scss. Which can override the values of global tokens for a component.

Tokens should have prefix cds- (Chameleon Design System).

File and folder naming and organization

...