This package is an Otter Framework Module.
Set of tools to generate CSS themes and Metadata based on the Design Token Specifications.
ng add @o3r/designOtter 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 |
Otter Design module provides a set of builders based on angular builders.
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. |
| 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. |
| 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. |
| prefix | null | Prefix to append to generated variables. |
| watch | false | Enable Watch mode. |
Documentation providing explanations on the use and customization of the Design Token parser and renderers is available in the technical documentation.