feat: Design Token (#1107)

## Proposed change

The purpose of this PR is to provide tools to generate a theme (CSS Var
based) from a Design Token specification.

## Included

- [x] Generation of CSS Var for the Showcase application
- [x] Generation of CMS Metadata
- [x] Schematics to access to generator
- [x] CLI to access to the generator
- [x] NgBuilder (including `watch` mode)
- [x] Documentation
- [x] Unit Tests

## Links

- Design Token Specification:
https://design-tokens.github.io/community-group/format/

<!-- Please make sure to follow the contributing guidelines on
https://github.com/amadeus-digital/Otter/blob/main/CONTRIBUTING.md -->

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn nx affected -t i18n && yarn lint-staged
+yarn lint-staged

.vscode/settings.json

@@ -5,7 +5,8 @@
     "**/dist/": true,
     "**/build/": true,
     "**/node_modules": true,
-    "**/.cache": true
+    "**/.cache": true,
+    "**/src/package.json": true,
   },
   "files.exclude": {
     "**/.git": true,

apps/showcase/package.json

@@ -79,6 +79,7 @@
     "@angular/cli": "~17.0.3",
     "@angular/compiler-cli": "~17.0.4",
     "@nx/eslint-plugin": "~17.1.1",
+    "@o3r/design": "workspace:^",
     "@o3r/eslint-config-otter": "workspace:^",
     "@o3r/eslint-plugin": "workspace:^",
     "@o3r/schematics": "workspace:^",

apps/showcase/project.json

@@ -32,6 +32,7 @@
         "extract-translations",
         "extract-components",
         "generate-translations",
+        "generate-theme",
         "compile"
       ]
     },
@@ -91,16 +92,24 @@
         }
       },
       "defaultConfiguration": "production",
-      "dependsOn": ["^build", "generate-translations"]
+      "dependsOn": [
+        "^build",
+        "generate-translations",
+        "generate-theme"
+      ]
     },
     "serve": {
       "executor": "@o3r/core:multi-watcher",
       "options": {
         "targets": [
           "showcase:generate-translations:development",
-          "showcase:serve-app"
+          "showcase:serve-app",
+          "showcase:generate-theme:watch"
         ]
-      }
+      },
+      "dependsOn": [
+        "^build-builders"
+      ]
     },
     "serve-app": {
       "executor": "@angular-devkit/build-angular:dev-server",
@@ -159,6 +168,31 @@
         "silent": true
       }
     },
+    "generate-theme": {
+      "executor": "@o3r/design:generate-css",
+      "outputs": [
+        "{options.defaultStyleFile}",
+        "{options.metadataOutput}",
+        "{projectRoot}/src/**/*.scss"
+      ],
+      "inputs": [
+        "{projectRoot}/src/style/design-token.json"
+      ],
+      "options": {
+        "metadataOutput": "apps/showcase/styling.metadata.json",
+        "defaultStyleFile": "apps/showcase/src/style/theme.scss",
+        "designTokenFilePatterns": "apps/showcase/src/style/design-token.*.json",
+        "rootPath": "apps/showcase/src"
+      },
+      "configurations": {
+        "watch": {
+          "watch": true
+        }
+      },
+      "dependsOn": [
+        "^build-builders"
+      ]
+    },
     "generate-translations": {
       "executor": "@o3r/localization:localization",
       "inputs": [

apps/showcase/src/app/run-app-locally/run-app-locally.style.scss

@@ -0,0 +1,9 @@
+o3r-run-app-locally {
+  /* --- BEGIN THEME Auto-generated --- */
+--run-app-locally-tertiary-bg: var(--color-primary-50);
+/* --- END THEME Auto-generated --- */
+
+  .bg-body-tertiary {
+    background: var(--run-app-locally-tertiary-bg);
+  }
+}

apps/showcase/src/components/showcase/basic/basic-pres.style.scss

@@ -1,4 +1,5 @@
 @mixin style {
+
   .bubble {
     border-radius: var(--bs-border-radius-xl);
 

apps/showcase/src/style/design-token.app.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "../../../../packages/@o3r/design/schemas/design-token.schema.json",
+  "bs": {
+    "primary": {
+      "$description": "Application Primary color",
+      "$type": "color",
+      "$value": "{color.primary}"
+    },
+    "nav-pills": {
+      "$extensions": {
+        "o3rScope": ".nav-pills"
+      },
+      "link-active-color": {
+        "$value": "{color.primary}"
+      }
+    },
+    "tertiary": {
+      "bg": {
+        "$extensions": {
+          "o3rImportant": true
+        },
+        "$value": "{color.neutral.gray-light}"
+      }
+    }
+  },
+  "run-app-locally": {
+    "$extensions": {
+      "o3rTargetFile": "app/run-app-locally/run-app-locally.style.scss"
+    },
+    "tertiary": {
+      "bg": {
+        "$value": "{color.primary.50}"
+      }
+    }
+  }
+}