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/design
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 |
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. |
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. |
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. |
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. |
Documentation providing explanations on the use and customization of the Design Token
parser and renderers is available in the technical documentation.