@o3r/design NPM

This package is an Otter Framework Module.

Description

Set of tools to generate CSS themes and Metadata based on the Design Token Specifications.

How to install

ng add @o3r/design

Generators

Otter Design module provides a set of code generators based on angular schematics.

Schematics	Description	How to use
add	Include Otter design module in a library / application.	`ng add @o3r/design`
generate-css	Generate CSS Theme based on Design Token Files	`ng g generate-css`

Builders

Otter Design module provides a set of builders based on angular builders.

generate-css

The generate-css builder can generate CSS and CMS Metadata based on given Design Token Json files. The following configurations are available:

Options	Default Value	Description
designTokenFilePatterns	[] Require	Path patterns to the Design Token JSON files. Files in dependencies are supported and resolved with Node Resolver.
variableType	`'css'`	Type of the variables to generate for a Design Token.
output	null	Output file where the CSS will be generated. The path specified in `o3rTargetFile` will be ignore if this option is specified
defaultStyleFile	src/theme.scss	File path to generate the variable if not determined by the specifications
metadataOutput	null	Path to generate the metadata for the CMS. The metadata will be generated only if the file path is specified.
metadataIgnorePrivate	false	Ignore the private variable in the metadata generation.
rootPath	null	Root path of files where the CSS will be generated.
failOnDuplicate	false	Determine if the process should stop in case of Token duplication.
templateFile	null	Path to a template file to apply as default configuration to a Design Token extension.
prefix	null	Prefix to append to generated variables.
prefixPrivate	null	Prefix to append to generated private variables.
watch	false	Enable Watch mode.

generate-jsonschema

The generate-jsonschema builder can generate a JSON Schema validating and providing auto-completion to a third party Design Token file implementing a theme for the current Design system. The following configurations are available:

Options	Default Value	Description
designTokenFilePatterns	[] Require	Path patterns to the Design Token JSON files. Files in dependencies are supported and resolved with Node Resolver.
output	null	Output file where the CSS will be generated. The path specified in `o3rTargetFile` will be ignored if this option is specified
failOnDuplicate	false	Determine if the process should stop in case of Token duplication.
schemaId	null	ID used in the generated JSON Schema.
schemaDescription	null	Description of the generated JSON Schema.
watch	false	Enable Watch mode.

Command Line Interfaces

o3r-build-design-token

The purpose of this CLI is to concatenate different Design Token files and check the potential duplication. Can be run with the following command:

npx -p @o3r/design o3r-build-design-token <...design-tokens> -o ./my-new-token-file.json

It comes with the following options:

Options	Alias	Description
`--output`	`-o`	Path to the file where the resulting Design Token will be generated
`--template`	`-t`	Template file to apply to the Design Token files
`--level`	`-l`	Number of key to join together when generating the Design Token nodes

Technical documentation

Documentation providing explanations on the use and customization of the Design Token parser and renderers is available in the technical documentation.