diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000000000000000000000000000000000000..f166060da1cbc9f216e9f5e99a1ef6074ce2a8f8
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000000000000000000000000000000000000..5c6f56c93c8621287c1f723e0fb26df7798defd5
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,50 @@
+name: Deploy Angular to GitHub Pages
+
+on:
+ push:
+ branches:
+ - main
+
+permissions:
+ contents: write
+ pages: write
+ id-token: write
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v4
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v3
+ with:
+ node-version: 18 # Adapter selon la version de ton projet
+
+ - name: Install dependencies
+ run: npm install
+
+ - name: Install Angular CLI
+ run: npm install -g @angular/cli
+
+ - name: Build Angular app
+ run: ng build --configuration production --base-href "/Quiz/" # Remplace par le nom de ton dépôt
+
+ - name: Add 404.html for GitHub Pages
+ run: |
+ echo '<!DOCTYPE html>
+ <html>
+ <head>
+ <meta http-equiv="refresh" content="0; URL='https://foucblg.github.io/Quiz/'" />
+ </head>
+ <body>
+ </body>
+ </html>' > dist/quiz/browser/404.html
+
+ - name: Deploy to GitHub Pages
+ uses: JamesIves/github-pages-deploy-action@v4
+ with:
+ branch: gh-pages # Branche de déploiement
+ folder: dist/quiz/browser # Remplace par le nom du dossier de build
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..f996257a0cd54499fc199268a187f1f10704e357
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,43 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+package-lock.json
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/angular.json b/angular.json
new file mode 100644
index 0000000000000000000000000000000000000000..73eb784ff8993e01ceea81fce1cbf77854e91acb
--- /dev/null
+++ b/angular.json
@@ -0,0 +1,106 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "Quiz": {
+ "projectType": "application",
+ "schematics": {},
+ "root": "",
+ "sourceRoot": "src",
+ "prefix": "app",
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:application",
+ "options": {
+ "outputPath": "dist/quiz",
+ "index": "src/index.html",
+ "browser": "src/main.ts",
+ "polyfills": [
+ "zone.js"
+ ],
+ "tsConfig": "tsconfig.app.json",
+ "assets": [
+ {
+ "glob": "**/*",
+ "input": "public"
+ }
+ ],
+ "styles": [
+ "src/styles.css"
+ ],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "optimization": {
+ "scripts": false,
+ "styles": false
+ },
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kB",
+ "maximumError": "5MB"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "2kB",
+ "maximumError": "4kB"
+ }
+ ],
+ "outputHashing": "all",
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.prod.ts"
+ }
+ ]
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "Quiz:build:production"
+ },
+ "development": {
+ "buildTarget": "Quiz:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n"
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "polyfills": [
+ "zone.js",
+ "zone.js/testing"
+ ],
+ "tsConfig": "tsconfig.spec.json",
+ "assets": [
+ {
+ "glob": "**/*",
+ "input": "public"
+ }
+ ],
+ "styles": [
+ "src/styles.css"
+ ],
+ "scripts": []
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..a8d7ea1a254560422e9a2ece4669b5c7a0a37a89
--- /dev/null
+++ b/package.json
@@ -0,0 +1,41 @@
+{
+ "name": "quiz",
+ "version": "0.0.0",
+ "scripts": {
+ "ng": "ng",
+ "start": "ng serve",
+ "build": "ng build",
+ "watch": "ng build --watch --configuration development",
+ "test": "ng test"
+ },
+ "private": true,
+ "dependencies": {
+ "@angular/animations": "<=19.1.6",
+ "@angular/common": "<=19.1.6",
+ "@angular/compiler": "<=19.1.6",
+ "@angular/core": "<=19.1.6",
+ "@angular/forms": "<=19.1.6",
+ "@angular/platform-browser": "<=19.1.6",
+ "@angular/platform-browser-dynamic": "<=19.1.6",
+ "@angular/router": "<=19.1.6",
+ "@primeng/themes": "^19.0.5",
+ "primeicons": "^7.0.0",
+ "primeng": "^19.0.5",
+ "rxjs": "~7.8.0",
+ "tslib": "^2.3.0",
+ "zone.js": "~0.15.0"
+ },
+ "devDependencies": {
+ "@angular-devkit/build-angular": "<=19.1.5",
+ "@angular/cli": "<=19.1.6",
+ "@angular/compiler-cli": "<=19.1.6",
+ "@types/jasmine": "~5.1.0",
+ "jasmine-core": "~5.5.0",
+ "karma": "~6.4.0",
+ "karma-chrome-launcher": "~3.2.0",
+ "karma-coverage": "~2.2.0",
+ "karma-jasmine": "~5.1.0",
+ "karma-jasmine-html-reporter": "~2.1.0",
+ "typescript": "~5.7.2"
+ }
+}
\ No newline at end of file
diff --git a/public/images/banner.png b/public/images/banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d39a063f681405a80b7088c10d100251689e9e3
Binary files /dev/null and b/public/images/banner.png differ
diff --git a/public/images/favicon.ico b/public/images/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..a4f55c1a6dbfdbebed67dc58155936c95d4bfdb0
Binary files /dev/null and b/public/images/favicon.ico differ
diff --git a/public/images/quiz_endpage_image.png b/public/images/quiz_endpage_image.png
new file mode 100644
index 0000000000000000000000000000000000000000..a90309e873d46259d6f232e2f239f22089b5ffaa
Binary files /dev/null and b/public/images/quiz_endpage_image.png differ
diff --git a/public/images/quiz_homepage_image.png b/public/images/quiz_homepage_image.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d2eb678df937f7c495abd5ae715c4149fb6c440
Binary files /dev/null and b/public/images/quiz_homepage_image.png differ
diff --git a/public/images/resin.svg b/public/images/resin.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f4080cb361a8f84e043e1478eafa3ccebca57d53
--- /dev/null
+++ b/public/images/resin.svg
@@ -0,0 +1,8 @@
+<svg width="108" height="37" viewBox="0 0 108 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M104.933 7.60039C105.747 8.22003 106.427 9.00169 106.945 9.92797C107.456 10.8602 107.705 11.9128 107.726 13.0853V31.9332C107.726 33.2027 106.576 34.2251 105.163 34.2251H105.116C103.695 34.2251 102.552 33.1963 102.552 31.9332V13.0853C102.539 12.0387 102.189 11.2629 101.482 10.7696C100.809 10.2525 99.9682 10.0058 99.0266 9.9939C98.0846 9.98795 97.2777 10.2469 96.5779 10.722C95.878 11.197 95.5345 11.9732 95.5417 13.0134L95.5816 31.9217C95.5816 33.1848 94.4378 34.2136 93.0181 34.2136C91.5984 34.2136 90.4547 33.1908 90.4547 31.9217C90.4547 30.0179 90.4604 27.5464 90.4616 27.0237C90.4618 26.9619 90.4618 26.9273 90.4618 26.9242L90.4214 12.9773C90.4142 11.7627 90.6497 10.6739 91.1545 9.76C91.6589 8.83967 92.2983 8.06989 93.1323 7.47449C93.933 6.87866 94.8479 6.42786 95.8975 6.12122C96.9475 5.82055 97.97 5.68234 99.0195 5.69425C100.069 5.70616 101.119 5.86224 102.148 6.18716C103.177 6.51803 104.092 6.98712 104.933 7.60039ZM73.465 9.35682C73.465 7.34181 71.6346 5.70616 69.3809 5.70616C67.1272 5.70616 65.2969 7.34181 65.2969 9.35682V13.0071H69.4413V13.0011C71.6689 12.9709 73.465 11.3535 73.465 9.35682ZM81.1952 5.70616C82.7834 5.70616 84.0685 6.85484 84.0685 8.27403V31.6448C84.0685 33.0645 82.7834 34.2132 81.1952 34.2132C79.6076 34.2132 78.3226 33.0645 78.3226 31.6448V8.27403C78.3226 6.85484 79.6081 5.70616 81.1952 5.70616Z"
+ fill="#E30613" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M37.694 5.2482C38.3089 4.21039 37.8663 2.92346 36.7053 2.37377C35.5443 1.82409 34.1046 2.21979 33.4896 3.2576L33.4896 3.25763C33.4891 3.2585 33.4797 3.27387 33.4577 3.30447C33.4352 3.33564 33.4038 3.37674 33.3621 3.4275C33.2781 3.5299 33.1644 3.65674 33.0207 3.80252C32.7325 4.09505 32.3557 4.43154 31.9199 4.76486C31.2055 5.31117 30.4449 5.76348 29.754 6.03653C29.5884 6.08152 29.4245 6.13163 29.2626 6.18713C28.2064 6.52395 27.3048 6.93307 26.4708 7.53442C25.6434 8.14173 24.9636 8.88173 24.4322 9.82587C23.9007 10.7704 23.6785 11.8468 23.6785 12.9951L23.6048 26.882V26.9241V26.9484C23.6048 30.2078 26.0674 33.0045 29.4178 33.8287L29.4986 33.8648L29.512 33.8708C30.434 34.1238 31.3423 34.2318 32.2029 34.2318C32.2174 34.2318 32.2318 34.2301 32.2452 34.2286C32.2568 34.2272 32.2676 34.2259 32.2772 34.2259C32.2904 34.2259 32.3022 34.2274 32.3139 34.2289L32.314 34.2289L32.3141 34.2289C32.3258 34.2304 32.3376 34.2318 32.3509 34.2318C33.4071 34.2318 34.4633 34.0936 35.4457 33.7568C36.5024 33.42 37.4035 33.0113 38.2381 32.4095C39.0316 31.8145 39.6373 31.2132 40.1487 30.2988C40.2163 30.1784 40.2834 30.0462 40.3371 29.9139C40.9699 28.4756 39.7049 26.942 37.9893 26.942C36.953 26.942 35.991 27.5013 35.6608 28.3795C35.1427 29.7327 33.8448 30.2499 32.3237 30.2499C30.9307 30.2499 29.7399 29.5341 29.148 28.4998C29.0605 28.3552 28.9934 28.1991 28.9329 28.0367C28.8183 27.7241 28.7445 27.3992 28.7445 27.056C28.7445 27.0511 28.7451 27.0466 28.7459 27.0423C28.7465 27.0389 28.7473 27.0355 28.7481 27.0322C28.7499 27.0247 28.7517 27.0173 28.7517 27.0083C28.7517 26.9962 28.7499 26.9855 28.7481 26.9749C28.7463 26.9643 28.7445 26.9539 28.7445 26.942V20.4708H32.2295C33.34 20.4708 34.4366 20.2845 35.4657 19.9298C36.4415 19.593 37.4174 19.1903 38.2447 18.5889C39.0792 17.9812 39.752 17.2416 40.2834 16.297C40.8149 15.3529 41.037 14.2765 41.037 13.1278V13.0615C41.037 13.0485 41.035 13.0356 41.0331 13.0237L41.0331 13.0237C41.0314 13.0133 41.0299 13.0036 41.0299 12.9951H41.037C41.037 11.8468 40.8082 10.7704 40.2834 9.82587C39.752 8.88173 39.0792 8.14173 38.2447 7.53442C37.7376 7.16193 37.2001 6.8417 36.6168 6.58721C37.0715 6.12274 37.4488 5.66194 37.694 5.2482ZM19.7696 9.93433C19.2515 9.00805 18.5716 8.22597 17.7575 7.60675C16.9164 6.99348 16.0019 6.52397 14.9724 6.19352C13.9428 5.8686 12.8933 5.71208 11.8437 5.70017C10.7942 5.68826 9.77174 5.82649 8.72171 6.12717C7.67216 6.43423 6.75725 6.88504 5.95653 7.48044C5.70865 7.65729 5.47798 7.84957 5.26295 8.05661C4.77815 7.66996 4.23024 7.32763 3.62332 7.03472C3.59049 7.02196 3.55103 7.00283 3.5182 6.98369C1.92151 6.26538 0.0393351 7.33159 0.00317654 8.92471L0.000330739 9.18966C-0.0163212 10.0555 0.597416 10.7943 1.47997 11.1502C1.90436 11.3186 2.25264 11.5691 2.51764 11.8894C2.90317 12.3167 3.14129 12.8116 3.2462 13.355L3.28554 26.9301L3.28532 27.0309C3.2841 27.5564 3.2784 30.0257 3.2784 31.9281C3.2784 33.1967 4.42217 34.2195 5.84235 34.2195C7.26157 34.2195 8.40577 33.1912 8.40577 31.9221L8.36535 13.0138C8.35821 11.9736 8.70171 11.1974 9.40157 10.7224C10.1014 10.2474 10.9088 9.98834 11.8503 9.99429C12.7919 10.0062 13.6331 10.2529 14.3058 10.77C14.6555 11.0167 14.9253 11.3357 15.0999 11.7201C15.4701 12.5201 16.2774 13.0917 17.2461 13.1036L17.5425 13.1095C19.3252 13.1278 20.5765 11.4798 19.8233 10.0304C19.8029 10.0003 19.7829 9.9641 19.7696 9.93433ZM34.773 15.4133C35.4529 14.9438 35.8292 14.1319 35.8292 13.1214V13.0496C35.8292 12.0391 35.4529 11.2332 34.773 10.7581C34.0194 10.2831 33.2658 10.0122 32.2838 10.0122C31.3018 10.0122 30.4744 10.2831 29.7946 10.7581C29.1152 11.2272 28.7383 12.0391 28.7383 13.0496V16.1529H32.2838C33.2658 16.1529 34.0932 15.8883 34.773 15.4133ZM57.6823 19.6653L52.1853 15.1369C51.0549 14.2225 50.6248 13.3081 50.6248 12.3461C50.6248 10.8066 51.8085 9.50776 53.6925 9.50776C55.3278 9.50776 56.2765 10.3979 56.8612 11.8171C57.1709 12.569 57.9445 13.0861 58.8394 13.0861H58.8594C60.2929 13.0861 61.2882 11.829 60.8376 10.6084C59.7881 7.76366 57.3588 5.7006 53.477 5.7006C48.6322 5.7006 45.4503 8.1545 45.4503 12.5388C45.4503 15.8101 47.1188 17.6928 49.2717 19.3289L54.6003 23.4185C56.3763 24.7654 57.13 25.9681 57.13 27.5561C57.13 29.3368 55.9995 30.491 53.9542 30.491C52.2519 30.491 51.1148 29.7634 50.3812 28.2897C49.9711 27.4719 49.1028 26.9246 48.1003 26.9246H47.9662C46.1359 26.9246 44.965 28.6385 45.759 30.1121C47.1583 32.7042 49.8359 34.2977 53.4694 34.2977C58.5825 34.2977 62.088 31.9404 62.088 27.1712C62.1027 23.6163 59.8956 21.4932 57.6823 19.6653Z"
+ fill="black" />
+</svg>
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..d24bf4439df94c3e4f24eb9727d32de70d307976
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,27 @@
+# Quiz
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.10.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
diff --git a/src/app/app.component.css b/src/app/app.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..02c938db3e93b93d7cd12a094ca614ef70ed4330
--- /dev/null
+++ b/src/app/app.component.css
@@ -0,0 +1,74 @@
+/* Conteneur principal */
+.app-container {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh; /* Prend toute la hauteur de la fenêtre */
+ height: 100%;
+}
+
+/* Navbar */
+.header-div {
+ height: 66px;
+}
+
+/* Contenu principal */
+main {
+ flex: 1; /* Prend tout l'espace disponible */
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.quiz-div {
+ flex: 1; /* Prend tout l'espace disponible */
+ min-height: 50vh; /* Hauteur minimale pour le contenu */
+ overflow: auto; /* Ajoute un défilement si le contenu est trop long */
+ height: 100%;
+ width: 100%;
+}
+
+/* Footer */
+footer {
+ height: 40px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: black;
+ color: white;
+ padding: 0 28px;
+ font-size: 12px;
+ width: 100%;
+ margin-top: auto; /* Force le footer à rester en bas */
+}
+
+footer ul {
+ list-style-type: none;
+ display: flex;
+ gap: 12px; /* Espace entre les éléments */
+}
+
+footer li {
+ display: inline-block;
+}
+
+footer li:hover{
+ text-decoration: underline;
+}
+
+footer a {
+ display: flex;
+ color: white !important;
+ align-items: center;
+ vertical-align: middle;
+}
+
+
+footer .right-section {
+ display: flex;
+ align-items: center;
+}
+
+footer .right-section img {
+ height: 20px;
+ margin-right: 5px;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..7c76533afd61a6a4da112d25ddd9d9fc31f43a8d
--- /dev/null
+++ b/src/app/app.component.html
@@ -0,0 +1,32 @@
+<div class="app-container">
+ <header>
+ <div class="header-div">
+ <app-header></app-header>
+ </div>
+ </header>
+
+ <main>
+ <div class="quiz-div">
+ <router-outlet></router-outlet>
+ </div>
+ </main>
+
+ <footer>
+ <ul>
+ <li><a href="https://resin.grandlyon.com/mentions-legales" target="_blank" rel="noopener noreferrer">Mentions légales</a></li>
+ <p>●</p>
+ <li><a href="https://resin.grandlyon.com/page/qui-sommes-nous" target="_blank" rel="noopener noreferrer">Qui sommes nous ?</a></li>
+ <p>●</p>
+ <li><a href="/accessibilite" target="_blank" rel="noopener noreferrer">Accessibilité : Non conforme</a></li>
+ </ul>
+ <div class="right-section">
+ <ul>
+ <li>
+ <a href="https://www.grandlyon.com/" target="_blank" rel="noopener noreferrer">
+ <img src="https://inclusivite-resin.grandlyon.com/app/themes/ausy-modular-theme/public/images/picto-plus.0a1d2b.png" alt="Logo">
+ <p>Un site de la Métropole de Lyon</p>
+ </a></li>
+ </ul>
+ </div>
+ </footer>
+</div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4fa39b02b24ce9ecbcd5c74dfc283077b021f769
--- /dev/null
+++ b/src/app/app.component.ts
@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import * as data from './shared/assets/data/questions_final.json';
+import { QuizData } from './shared/types/interfaces';
+import { HeaderComponent } from './views/header/header.component';
+
+@Component({
+ selector: 'app-root',
+ imports: [CommonModule, RouterOutlet, HeaderComponent],
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+ title = 'INCLUSIF: Le jeu';
+ quizData = quizData;
+}
+
+export const quizData: QuizData = data;
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c8db258ffef45c9e83f700d3b0edaa7642cbd71
--- /dev/null
+++ b/src/app/app.config.ts
@@ -0,0 +1,23 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideRouter } from '@angular/router';
+import { providePrimeNG } from 'primeng/config';
+
+import { routes } from './app.routes';
+import { MyPreset } from './app.theme';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideZoneChangeDetection({ eventCoalescing: true }),
+ provideRouter(routes),
+ provideAnimationsAsync(),
+ providePrimeNG({
+ theme: {
+ preset: MyPreset,
+ options: {
+ darkModeSelector: false,
+ }
+ }
+ }),
+ ]
+};
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ad703dd084446ab668d7c28649308deeba307e3
--- /dev/null
+++ b/src/app/app.routes.ts
@@ -0,0 +1,11 @@
+import { Routes } from '@angular/router';
+import { QuizComponent } from './views/quiz/quiz.component';
+
+export const routes: Routes = [
+ {
+ path: 'quiz', title: "Quiz Inclusif, le jeu", children: [
+ { path: '**', component: QuizComponent },
+ ],
+ },
+ { path: '', redirectTo: 'quiz/accueil', pathMatch: 'full' },
+];
diff --git a/src/app/app.theme.ts b/src/app/app.theme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fbd12cd8f80274a3f17e1e56fbdf5a4c127c1d13
--- /dev/null
+++ b/src/app/app.theme.ts
@@ -0,0 +1,5200 @@
+import { definePreset } from "@primeng/themes";
+import Material from "@primeng/themes/material";
+
+// primeNG specially configured theme
+export const MyPreset = definePreset(Material, {
+ primitive: {
+ borderRadius: {
+ none: "0",
+ xs: "2px",
+ sm: "4px",
+ md: "6px",
+ lg: "8px",
+ xl: "12px"
+ },
+ emerald: {
+ 50: "#E8F6F1",
+ 100: "#C5EBE1",
+ 200: "#9EDFCF",
+ 300: "#76D3BD",
+ 400: "#58C9AF",
+ 500: "#3BBFA1",
+ 600: "#35AF94",
+ 700: "#2D9B83",
+ 800: "#268873",
+ 900: "#1A6657",
+ 950: "#0d3329"
+ },
+ green: {
+ 50: "#E8F5E9",
+ 100: "#C8E6C9",
+ 200: "#A5D6A7",
+ 300: "#81C784",
+ 400: "#66BB6A",
+ 500: "#4CAF50",
+ 600: "#43A047",
+ 700: "#388E3C",
+ 800: "#2E7D32",
+ 900: "#1B5E20",
+ 950: "#0e2f10"
+ },
+ lime: {
+ 50: "#F9FBE7",
+ 100: "#F0F4C3",
+ 200: "#E6EE9C",
+ 300: "#DCE775",
+ 400: "#D4E157",
+ 500: "#CDDC39",
+ 600: "#C0CA33",
+ 700: "#AFB42B",
+ 800: "#9E9D24",
+ 900: "#827717",
+ 950: "#413c0c"
+ },
+ red: {
+ 50: "#fdf5f5",
+ 100: "#f6cfcf",
+ 200: "#efa9a8",
+ 300: "#e88282",
+ 400: "#e15c5b",
+ 500: "#da3635",
+ 600: "#b92e2d",
+ 700: "#992625",
+ 800: "#781e1d",
+ 900: "#571615",
+ 950: "#370e0d"
+ },
+ orange: {
+ 50: "#FFF3E0",
+ 100: "#FFE0B2",
+ 200: "#FFCC80",
+ 300: "#FFB74D",
+ 400: "#FFA726",
+ 500: "#FF9800",
+ 600: "#FB8C00",
+ 700: "#F57C00",
+ 800: "#EF6C00",
+ 900: "#E65100",
+ 950: "#732900"
+ },
+ amber: {
+ 50: "#FFF8E1",
+ 100: "#FFECB3",
+ 200: "#FFE082",
+ 300: "#FFD54F",
+ 400: "#FFCA28",
+ 500: "#FFC107",
+ 600: "#FFB300",
+ 700: "#FFA000",
+ 800: "#FF8F00",
+ 900: "#FF6F00",
+ 950: "#803800"
+ },
+ yellow: {
+ 50: "#FFFDE7",
+ 100: "#FFF9C4",
+ 200: "#FFF59D",
+ 300: "#FFF176",
+ 400: "#FFEE58",
+ 500: "#FFEB3B",
+ 600: "#FDD835",
+ 700: "#FBC02D",
+ 800: "#F9A825",
+ 900: "#F57F17",
+ 950: "#7b400c"
+ },
+ teal: {
+ 50: "#E0F2F1",
+ 100: "#B2DFDB",
+ 200: "#80CBC4",
+ 300: "#4DB6AC",
+ 400: "#26A69A",
+ 500: "#009688",
+ 600: "#00897B",
+ 700: "#00796B",
+ 800: "#00695C",
+ 900: "#004D40",
+ 950: "#002720"
+ },
+ cyan: {
+ 50: "#E0F7FA",
+ 100: "#B2EBF2",
+ 200: "#80DEEA",
+ 300: "#4DD0E1",
+ 400: "#26C6DA",
+ 500: "#00BCD4",
+ 600: "#00ACC1",
+ 700: "#0097A7",
+ 800: "#00838F",
+ 900: "#006064",
+ 950: "#003032"
+ },
+ sky: {
+ 50: "#E1F5FE",
+ 100: "#B3E5FC",
+ 200: "#81D4FA",
+ 300: "#4FC3F7",
+ 400: "#29B6F6",
+ 500: "#03A9F4",
+ 600: "#039BE5",
+ 700: "#0288D1",
+ 800: "#0277BD",
+ 900: "#01579B",
+ 950: "#012c4e"
+ },
+ blue: {
+ 50: "#E3F2FD",
+ 100: "#BBDEFB",
+ 200: "#90CAF9",
+ 300: "#64B5F6",
+ 400: "#42A5F5",
+ 500: "#2196F3",
+ 600: "#1E88E5",
+ 700: "#1976D2",
+ 800: "#1565C0",
+ 900: "#0D47A1",
+ 950: "#072451"
+ },
+ indigo: {
+ 50: "#E8EAF6",
+ 100: "#C5CAE9",
+ 200: "#9FA8DA",
+ 300: "#7986CB",
+ 400: "#5C6BC0",
+ 500: "#3F51B5",
+ 600: "#3949AB",
+ 700: "#303F9F",
+ 800: "#283593",
+ 900: "#1A237E",
+ 950: "#0d123f"
+ },
+ violet: {
+ 50: "#EDE7F6",
+ 100: "#D1C4E9",
+ 200: "#B39DDB",
+ 300: "#9575CD",
+ 400: "#7E57C2",
+ 500: "#673AB7",
+ 600: "#5E35B1",
+ 700: "#512DA8",
+ 800: "#4527A0",
+ 900: "#311B92",
+ 950: "#190e49"
+ },
+ purple: {
+ 50: "#F3E5F5",
+ 100: "#E1BEE7",
+ 200: "#CE93D8",
+ 300: "#BA68C8",
+ 400: "#AB47BC",
+ 500: "#9C27B0",
+ 600: "#8E24AA",
+ 700: "#7B1FA2",
+ 800: "#6A1B9A",
+ 900: "#4A148C",
+ 950: "#250a46"
+ },
+ fuchsia: {
+ 50: "#FDE6F3",
+ 100: "#FBC1E3",
+ 200: "#F897D1",
+ 300: "#F56DBF",
+ 400: "#F34DB2",
+ 500: "#F12DA5",
+ 600: "#E0289D",
+ 700: "#CC2392",
+ 800: "#B81E88",
+ 900: "#951777",
+ 950: "#4b0c3c"
+ },
+ pink: {
+ 50: "#FCE4EC",
+ 100: "#F8BBD0",
+ 200: "#F48FB1",
+ 300: "#F06292",
+ 400: "#EC407A",
+ 500: "#E91E63",
+ 600: "#D81B60",
+ 700: "#C2185B",
+ 800: "#AD1457",
+ 900: "#880E4F",
+ 950: "#440728"
+ },
+ rose: {
+ 50: "#FFF0F0",
+ 100: "#FFD9D9",
+ 200: "#FFC0C0",
+ 300: "#FFA7A7",
+ 400: "#FF8E8E",
+ 500: "#FF7575",
+ 600: "#FF5252",
+ 700: "#FF3838",
+ 800: "#F71C1C",
+ 900: "#D50000",
+ 950: "#3E0000"
+ },
+ slate: {
+ 50: "#f8fafc",
+ 100: "#f1f5f9",
+ 200: "#e2e8f0",
+ 300: "#cbd5e1",
+ 400: "#94a3b8",
+ 500: "#64748b",
+ 600: "#475569",
+ 700: "#334155",
+ 800: "#1e293b",
+ 900: "#0f172a",
+ 950: "#020617"
+ },
+ gray: {
+ 50: "#f9fafb",
+ 100: "#f3f4f6",
+ 200: "#e5e7eb",
+ 300: "#d1d5db",
+ 400: "#9ca3af",
+ 500: "#6b7280",
+ 600: "#4b5563",
+ 700: "#374151",
+ 800: "#1f2937",
+ 900: "#111827",
+ 950: "#030712"
+ },
+ zinc: {
+ 50: "#fafafa",
+ 100: "#f4f4f5",
+ 200: "#e4e4e7",
+ 300: "#d4d4d8",
+ 400: "#a1a1aa",
+ 500: "#71717a",
+ 600: "#52525b",
+ 700: "#3f3f46",
+ 800: "#27272a",
+ 900: "#18181b",
+ 950: "#09090b"
+ },
+ neutral: {
+ 50: "#fafafa",
+ 100: "#f5f5f5",
+ 200: "#e5e5e5",
+ 300: "#d4d4d4",
+ 400: "#a3a3a3",
+ 500: "#737373",
+ 600: "#525252",
+ 700: "#404040",
+ 800: "#262626",
+ 900: "#171717",
+ 950: "#0a0a0a"
+ },
+ stone: {
+ 50: "#fafaf9",
+ 100: "#f5f5f4",
+ 200: "#e7e5e4",
+ 300: "#d6d3d1",
+ 400: "#a8a29e",
+ 500: "#78716c",
+ 600: "#57534e",
+ 700: "#44403c",
+ 800: "#292524",
+ 900: "#1c1917",
+ 950: "#0c0a09"
+ }
+ },
+ semantic: {
+ focusRing: {
+ width: "2px",
+ style: "solid",
+ color: "#0078f3",
+ offset: "2px"
+ },
+ transitionDuration: "0.2s",
+ disabledOpacity: "0.38",
+ iconSize: "1rem",
+ anchorGutter: "0",
+ primary: {
+ 50: "#fdf5f5",
+ 100: "#f6cfcf",
+ 200: "#efa9a8",
+ 300: "#e88282",
+ 400: "#e15c5b",
+ 500: "#da3635",
+ 600: "#b92e2d",
+ 700: "#992625",
+ 800: "#781e1d",
+ 900: "#571615",
+ 950: "#370e0d"
+ },
+ formField: {
+ paddingX: "0.75rem",
+ paddingY: "0.75rem",
+ sm: {
+ fontSize: "0.875rem",
+ paddingX: "0.625rem",
+ paddingY: "0.625rem"
+ },
+ lg: {
+ fontSize: "1.5em",
+ paddingX: "0.825rem",
+ paddingY: "0.825rem"
+ },
+ borderRadius: "{border.radius.sm}",
+ focusRing: {
+ width: "2px",
+ style: "solid",
+ color: "#0078f3",
+ offset: "2px",
+ shadow: "none"
+ },
+ transitionDuration: "{transition.duration}"
+ },
+ list: {
+ padding: "0.5rem 0",
+ gap: "0",
+ header: {
+ padding: "0.75rem 1rem"
+ },
+ option: {
+ padding: "0.75rem 1rem",
+ borderRadius: "{border.radius.none}"
+ },
+ optionGroup: {
+ padding: "0.75rem 1rem",
+ fontWeight: "700"
+ }
+ },
+ content: {
+ borderRadius: "{border.radius.sm}"
+ },
+ mask: {
+ transitionDuration: "0.15s"
+ },
+ navigation: {
+ list: {
+ padding: "0.5rem 0",
+ gap: "0"
+ },
+ item: {
+ padding: "0.75rem 1rem",
+ borderRadius: "{border.radius.none}",
+ gap: "0.5rem"
+ },
+ submenuLabel: {
+ padding: "0.75rem 1rem",
+ fontWeight: "700"
+ },
+ submenuIcon: {
+ size: "0.875rem"
+ }
+ },
+ overlay: {
+ select: {
+ borderRadius: "{border.radius.sm}",
+ shadow: "0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)"
+ },
+ popover: {
+ borderRadius: "{border.radius.sm}",
+ padding: "1rem",
+ shadow: "0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)"
+ },
+ modal: {
+ borderRadius: "{border.radius.sm}",
+ padding: "1.5rem",
+ shadow: "0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)"
+ },
+ navigation: {
+ shadow: "0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12)"
+ }
+ },
+ colorScheme: {
+ light: {
+ focusRing: {
+ shadow: "0 0 1px 4px {surface.200}"
+ },
+ surface: {
+ 0: "#ffffff",
+ 50: "#f8fafc",
+ 100: "#f1f5f9",
+ 200: "#e2e8f0",
+ 300: "#cbd5e1",
+ 400: "#94a3b8",
+ 500: "#64748b",
+ 600: "#475569",
+ 700: "#334155",
+ 800: "#1e293b",
+ 900: "#0f172a",
+ 950: "#020617"
+ },
+ primary: {
+ color: "{primary.500}",
+ contrastColor: "#ffffff",
+ hoverColor: "{primary.600}",
+ activeColor: "{primary.500}"
+ },
+ highlight: {
+ background: "color-mix(in srgb, {primary.color}, transparent 88%)",
+ focusBackground: "color-mix(in srgb, {primary.color}, transparent 76%)",
+ color: "{primary.700}",
+ focusColor: "{primary.800}"
+ },
+ mask: {
+ background: "rgba(0,0,0,0.32)",
+ color: "{surface.200}"
+ },
+ formField: {
+ background: "{surface.0}",
+ disabledBackground: "{surface.300}",
+ filledBackground: "{surface.100}",
+ filledHoverBackground: "{surface.200}",
+ filledFocusBackground: "{surface.100}",
+ borderColor: "{surface.400}",
+ hoverBorderColor: "{surface.900}",
+ focusBorderColor: "{primary.color}",
+ invalidBorderColor: "{red.800}",
+ color: "{surface.900}",
+ disabledColor: "{surface.600}",
+ placeholderColor: "{surface.600}",
+ invalidPlaceholderColor: "{red.800}",
+ floatLabelColor: "{surface.600}",
+ floatLabelFocusColor: "{primary.600}",
+ floatLabelActiveColor: "{surface.600}",
+ floatLabelInvalidColor: "{form.field.invalid.placeholder.color}",
+ iconColor: "{surface.600}",
+ shadow: "none"
+ },
+ text: {
+ color: "{surface.900}",
+ hoverColor: "{surface.900}",
+ mutedColor: "{surface.600}",
+ hoverMutedColor: "{surface.600}"
+ },
+ content: {
+ background: "{surface.0}",
+ hoverBackground: "{surface.100}",
+ borderColor: "{surface.300}",
+ color: "{text.color}",
+ hoverColor: "{text.hover.color}"
+ },
+ overlay: {
+ select: {
+ background: "{surface.0}",
+ borderColor: "{surface.0}",
+ color: "{text.color}"
+ },
+ popover: {
+ background: "{surface.0}",
+ borderColor: "{surface.0}",
+ color: "{text.color}"
+ },
+ modal: {
+ background: "{surface.0}",
+ borderColor: "{surface.0}",
+ color: "{text.color}"
+ }
+ },
+ list: {
+ option: {
+ focusBackground: "{surface.100}",
+ selectedBackground: "{highlight.background}",
+ selectedFocusBackground: "{highlight.focus.background}",
+ color: "{text.color}",
+ focusColor: "{text.hover.color}",
+ selectedColor: "{highlight.color}",
+ selectedFocusColor: "{highlight.focus.color}",
+ icon: {
+ color: "{surface.600}",
+ focusColor: "{surface.600}"
+ }
+ },
+ optionGroup: {
+ background: "transparent",
+ color: "{text.color}"
+ }
+ },
+ navigation: {
+ item: {
+ focusBackground: "{surface.100}",
+ activeBackground: "{surface.200}",
+ color: "{text.color}",
+ focusColor: "{text.hover.color}",
+ activeColor: "{text.hover.color}",
+ icon: {
+ color: "{surface.600}",
+ focusColor: "{surface.600}",
+ activeColor: "{surface.600}"
+ }
+ },
+ submenuLabel: {
+ background: "transparent",
+ color: "{text.color}"
+ },
+ submenuIcon: {
+ color: "{surface.600}",
+ focusColor: "{surface.600}",
+ activeColor: "{surface.600}"
+ }
+ }
+ },
+ dark: {
+ focusRing: {
+ shadow: "0 0 1px 4px {surface.700}"
+ },
+ surface: {
+ 0: "#ffffff",
+ 50: "#fafafa",
+ 100: "#f4f4f5",
+ 200: "#e4e4e7",
+ 300: "#d4d4d8",
+ 400: "#a1a1aa",
+ 500: "#71717a",
+ 600: "#52525b",
+ 700: "#3f3f46",
+ 800: "#27272a",
+ 900: "#18181b",
+ 950: "#09090b"
+ },
+ primary: {
+ color: "{primary.400}",
+ contrastColor: "{surface.900}",
+ hoverColor: "{primary.300}",
+ activeColor: "{primary.200}"
+ },
+ highlight: {
+ background: "color-mix(in srgb, {primary.400}, transparent 84%)",
+ focusBackground: "color-mix(in srgb, {primary.400}, transparent 76%)",
+ color: "rgba(255,255,255,.87)",
+ focusColor: "rgba(255,255,255,.87)"
+ },
+ mask: {
+ background: "rgba(0,0,0,0.6)",
+ color: "{surface.200}"
+ },
+ formField: {
+ background: "{surface.950}",
+ disabledBackground: "{surface.700}",
+ filledBackground: "{surface.800}",
+ filledHoverBackground: "{surface.700}",
+ filledFocusBackground: "{surface.800}",
+ borderColor: "{surface.600}",
+ hoverBorderColor: "{surface.400}",
+ focusBorderColor: "{primary.color}",
+ invalidBorderColor: "{red.300}",
+ color: "{surface.0}",
+ disabledColor: "{surface.400}",
+ placeholderColor: "{surface.400}",
+ invalidPlaceholderColor: "{red.300}",
+ floatLabelColor: "{surface.400}",
+ floatLabelFocusColor: "{primary.color}",
+ floatLabelActiveColor: "{surface.400}",
+ floatLabelInvalidColor: "{form.field.invalid.placeholder.color}",
+ iconColor: "{surface.400}",
+ shadow: "none"
+ },
+ text: {
+ color: "{surface.0}",
+ hoverColor: "{surface.0}",
+ mutedColor: "{surface.400}",
+ hoverMutedColor: "{surface.400}"
+ },
+ content: {
+ background: "{surface.900}",
+ hoverBackground: "{surface.800}",
+ borderColor: "{surface.700}",
+ color: "{text.color}",
+ hoverColor: "{text.hover.color}"
+ },
+ overlay: {
+ select: {
+ background: "{surface.900}",
+ borderColor: "{surface.900}",
+ color: "{text.color}"
+ },
+ popover: {
+ background: "{surface.900}",
+ borderColor: "{surface.900}",
+ color: "{text.color}"
+ },
+ modal: {
+ background: "{surface.900}",
+ borderColor: "{surface.900}",
+ color: "{text.color}"
+ }
+ },
+ list: {
+ option: {
+ focusBackground: "{surface.800}",
+ selectedBackground: "{highlight.background}",
+ selectedFocusBackground: "{highlight.focus.background}",
+ color: "{text.color}",
+ focusColor: "{text.hover.color}",
+ selectedColor: "{highlight.color}",
+ selectedFocusColor: "{highlight.focus.color}",
+ icon: {
+ color: "{surface.400}",
+ focusColor: "{surface.400}"
+ }
+ },
+ optionGroup: {
+ background: "transparent",
+ color: "{text.muted.color}"
+ }
+ },
+ navigation: {
+ item: {
+ focusBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ color: "{text.color}",
+ focusColor: "{text.hover.color}",
+ activeColor: "{text.hover.color}",
+ icon: {
+ color: "{surface.400}",
+ focusColor: "{surface.400}",
+ activeColor: "{surface.400}"
+ }
+ },
+ submenuLabel: {
+ background: "transparent",
+ color: "{text.muted.color}"
+ },
+ submenuIcon: {
+ color: "{surface.400}",
+ focusColor: "{surface.400}",
+ activeColor: "{surface.400}"
+ }
+ }
+ }
+ }
+ },
+ components: {
+ accordion: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ panel: {
+ borderWidth: "0",
+ borderColor: "{content.border.color}"
+ },
+ header: {
+ color: "{text.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{text.color}",
+ padding: "1.25rem",
+ fontWeight: "600",
+ borderRadius: "0",
+ borderWidth: "0",
+ borderColor: "{content.border.color}",
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ activeBackground: "{content.background}",
+ activeHoverBackground: "{content.background}",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ },
+ toggleIcon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.muted.color}",
+ activeColor: "{text.muted.color}",
+ activeHoverColor: "{text.muted.color}"
+ },
+ first: {
+ topBorderRadius: "{content.border.radius}",
+ borderWidth: "0"
+ },
+ last: {
+ bottomBorderRadius: "{content.border.radius}",
+ activeBottomBorderRadius: "0"
+ }
+ },
+ content: {
+ borderWidth: "0",
+ borderColor: "{content.border.color}",
+ background: "{content.background}",
+ color: "{text.color}",
+ padding: "0 1.25rem 1.25rem 1.25rem"
+ }
+ },
+ autocomplete: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}"
+ },
+ overlay: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}"
+ },
+ list: {
+ padding: "{list.padding}",
+ gap: "{list.gap}"
+ },
+ option: {
+ focusBackground: "{list.option.focus.background}",
+ selectedBackground: "{list.option.selected.background}",
+ selectedFocusBackground: "{list.option.selected.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ selectedColor: "{list.option.selected.color}",
+ selectedFocusColor: "{list.option.selected.focus.color}",
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}"
+ },
+ optionGroup: {
+ background: "{list.option.group.background}",
+ color: "{list.option.group.color}",
+ fontWeight: "{list.option.group.font.weight}",
+ padding: "{list.option.group.padding}"
+ },
+ dropdown: {
+ width: "3rem",
+ sm: {
+ width: "2.5rem"
+ },
+ lg: {
+ width: "3.5rem"
+ },
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.border.color}",
+ activeBorderColor: "{form.field.border.color}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ }
+ },
+ chip: {
+ borderRadius: "{border.radius.sm}"
+ },
+ emptyMessage: {
+ padding: "{list.option.padding}"
+ },
+ colorScheme: {
+ light: {
+ chip: {
+ focusBackground: "{surface.300}",
+ focusColor: "{surface.950}"
+ },
+ dropdown: {
+ background: "{surface.100}",
+ hoverBackground: "{surface.200}",
+ activeBackground: "{surface.300}",
+ color: "{surface.600}",
+ hoverColor: "{surface.700}",
+ activeColor: "{surface.800}"
+ }
+ },
+ dark: {
+ chip: {
+ focusBackground: "{surface.600}",
+ focusColor: "{surface.0}"
+ },
+ dropdown: {
+ background: "{surface.800}",
+ hoverBackground: "{surface.700}",
+ activeBackground: "{surface.600}",
+ color: "{surface.300}",
+ hoverColor: "{surface.200}",
+ activeColor: "{surface.100}"
+ }
+ }
+ }
+ },
+ avatar: {
+ root: {
+ width: "2rem",
+ height: "2rem",
+ fontSize: "1rem",
+ background: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}"
+ },
+ icon: {
+ size: "1rem"
+ },
+ group: {
+ borderColor: "{content.background}",
+ offset: "-0.75rem"
+ },
+ lg: {
+ width: "3rem",
+ height: "3rem",
+ fontSize: "1.5rem",
+ icon: {
+ size: "1.5rem"
+ },
+ group: {
+ offset: "-1rem"
+ }
+ },
+ xl: {
+ width: "4rem",
+ height: "4rem",
+ fontSize: "2rem",
+ icon: {
+ size: "2rem"
+ },
+ group: {
+ offset: "-1.5rem"
+ }
+ }
+ },
+ badge: {
+ root: {
+ borderRadius: "{border.radius.md}",
+ padding: "0 0.5rem",
+ fontSize: "0.75rem",
+ fontWeight: "700",
+ minWidth: "1.5rem",
+ height: "1.5rem"
+ },
+ dot: {
+ size: "0.5rem"
+ },
+ sm: {
+ fontSize: "0.625rem",
+ minWidth: "1.25rem",
+ height: "1.25rem"
+ },
+ lg: {
+ fontSize: "0.875rem",
+ minWidth: "1.75rem",
+ height: "1.75rem"
+ },
+ xl: {
+ fontSize: "1rem",
+ minWidth: "2rem",
+ height: "2rem"
+ },
+ colorScheme: {
+ light: {
+ primary: {
+ background: "{primary.color}",
+ color: "{primary.contrast.color}"
+ },
+ secondary: {
+ background: "{surface.100}",
+ color: "{surface.600}"
+ },
+ success: {
+ background: "{green.500}",
+ color: "{surface.0}"
+ },
+ info: {
+ background: "{sky.500}",
+ color: "{surface.0}"
+ },
+ warn: {
+ background: "{orange.500}",
+ color: "{surface.0}"
+ },
+ danger: {
+ background: "{red.500}",
+ color: "{surface.0}"
+ },
+ contrast: {
+ background: "{surface.950}",
+ color: "{surface.0}"
+ }
+ },
+ dark: {
+ primary: {
+ background: "{primary.color}",
+ color: "{primary.contrast.color}"
+ },
+ secondary: {
+ background: "{surface.800}",
+ color: "{surface.300}"
+ },
+ success: {
+ background: "{green.400}",
+ color: "{green.950}"
+ },
+ info: {
+ background: "{sky.400}",
+ color: "{sky.950}"
+ },
+ warn: {
+ background: "{orange.400}",
+ color: "{orange.950}"
+ },
+ danger: {
+ background: "{red.400}",
+ color: "{red.950}"
+ },
+ contrast: {
+ background: "{surface.0}",
+ color: "{surface.950}"
+ }
+ }
+ }
+ },
+ blockui: {
+ root: {
+ borderRadius: "{content.border.radius}"
+ }
+ },
+ breadcrumb: {
+ root: {
+ padding: "1rem",
+ background: "{content.background}",
+ gap: "0.5rem",
+ transitionDuration: "{transition.duration}"
+ },
+ item: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ borderRadius: "{content.border.radius}",
+ gap: "{navigation.item.gap}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ hoverColor: "{navigation.item.icon.focus.color}"
+ },
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ separator: {
+ color: "{navigation.item.icon.color}"
+ }
+ },
+ button: {
+ root: {
+ borderRadius: "{form.field.border.radius}",
+ roundedBorderRadius: "2rem",
+ gap: "0.5rem",
+ paddingX: "1rem",
+ paddingY: "0.625rem",
+ iconOnlyWidth: "3rem",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ },
+ label: {
+ fontWeight: "500"
+ },
+ raisedShadow: "0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ offset: "{focus.ring.offset}",
+ color: "{focus.ring.color}",
+ },
+ badgeSize: "1rem",
+ transitionDuration: "{form.field.transition.duration}"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ primary: {
+ background: "{primary.color}",
+ hoverBackground: "{primary.hover.color}",
+ activeBackground: "{primary.active.color}",
+ borderColor: "{primary.color}",
+ hoverBorderColor: "{primary.hover.color}",
+ activeBorderColor: "{primary.active.color}",
+ color: "{primary.contrast.color}",
+ hoverColor: "{primary.contrast.color}",
+ activeColor: "{primary.contrast.color}",
+ focusRing: {
+ color: "#0078f3",
+ shadow: "none"
+ }
+ },
+ secondary: {
+ background: "{surface.100}",
+ hoverBackground: "{surface.200}",
+ activeBackground: "{surface.300}",
+ borderColor: "{surface.100}",
+ hoverBorderColor: "{surface.200}",
+ activeBorderColor: "{surface.300}",
+ color: "{surface.600}",
+ hoverColor: "{surface.700}",
+ activeColor: "{surface.800}",
+ focusRing: {
+ color: "{surface.600}",
+ shadow: "none"
+ }
+ },
+ info: {
+ background: "{sky.500}",
+ hoverBackground: "{sky.400}",
+ activeBackground: "{sky.300}",
+ borderColor: "{sky.500}",
+ hoverBorderColor: "{sky.400}",
+ activeBorderColor: "{sky.300}",
+ color: "#ffffff",
+ hoverColor: "#ffffff",
+ activeColor: "#ffffff",
+ focusRing: {
+ color: "{sky.500}",
+ shadow: "none"
+ }
+ },
+ success: {
+ background: "{green.500}",
+ hoverBackground: "{green.400}",
+ activeBackground: "{green.300}",
+ borderColor: "{green.500}",
+ hoverBorderColor: "{green.400}",
+ activeBorderColor: "{green.300}",
+ color: "#ffffff",
+ hoverColor: "#ffffff",
+ activeColor: "#ffffff",
+ focusRing: {
+ color: "{green.500}",
+ shadow: "none"
+ }
+ },
+ warn: {
+ background: "{orange.500}",
+ hoverBackground: "{orange.400}",
+ activeBackground: "{orange.300}",
+ borderColor: "{orange.500}",
+ hoverBorderColor: "{orange.400}",
+ activeBorderColor: "{orange.300}",
+ color: "#ffffff",
+ hoverColor: "#ffffff",
+ activeColor: "#ffffff",
+ focusRing: {
+ color: "{orange.500}",
+ shadow: "none"
+ }
+ },
+ help: {
+ background: "{purple.500}",
+ hoverBackground: "{purple.400}",
+ activeBackground: "{purple.300}",
+ borderColor: "{purple.500}",
+ hoverBorderColor: "{purple.400}",
+ activeBorderColor: "{purple.300}",
+ color: "#ffffff",
+ hoverColor: "#ffffff",
+ activeColor: "#ffffff",
+ focusRing: {
+ color: "{purple.500}",
+ shadow: "none"
+ }
+ },
+ danger: {
+ background: "{red.500}",
+ hoverBackground: "{red.400}",
+ activeBackground: "{red.300}",
+ borderColor: "{red.500}",
+ hoverBorderColor: "{red.400}",
+ activeBorderColor: "{red.300}",
+ color: "#ffffff",
+ hoverColor: "#ffffff",
+ activeColor: "#ffffff",
+ focusRing: {
+ color: "{red.500}",
+ shadow: "none"
+ }
+ },
+ contrast: {
+ background: "{surface.950}",
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ borderColor: "{surface.950}",
+ hoverBorderColor: "{surface.800}",
+ activeBorderColor: "{surface.700}",
+ color: "{surface.0}",
+ hoverColor: "{surface.0}",
+ activeColor: "{surface.0}",
+ focusRing: {
+ color: "{surface.950}",
+ shadow: "none"
+ }
+ }
+ },
+ outlined: {
+ primary: {
+ hoverBackground: "{primary.50}",
+ activeBackground: "{primary.100}",
+ borderColor: "{primary.color}",
+ color: "{primary.color}"
+ },
+ secondary: {
+ hoverBackground: "{surface.50}",
+ activeBackground: "{surface.100}",
+ borderColor: "{surface.600}",
+ color: "{surface.600}"
+ },
+ success: {
+ hoverBackground: "{green.50}",
+ activeBackground: "{green.100}",
+ borderColor: "{green.500}",
+ color: "{green.500}"
+ },
+ info: {
+ hoverBackground: "{sky.50}",
+ activeBackground: "{sky.100}",
+ borderColor: "{sky.500}",
+ color: "{sky.500}"
+ },
+ warn: {
+ hoverBackground: "{orange.50}",
+ activeBackground: "{orange.100}",
+ borderColor: "{orange.500}",
+ color: "{orange.500}"
+ },
+ help: {
+ hoverBackground: "{purple.50}",
+ activeBackground: "{purple.100}",
+ borderColor: "{purple.500}",
+ color: "{purple.500}"
+ },
+ danger: {
+ hoverBackground: "{red.50}",
+ activeBackground: "{red.100}",
+ borderColor: "{red.500}",
+ color: "{red.500}"
+ },
+ contrast: {
+ hoverBackground: "{surface.50}",
+ activeBackground: "{surface.100}",
+ borderColor: "{surface.950}",
+ color: "{surface.950}"
+ },
+ plain: {
+ hoverBackground: "{surface.50}",
+ activeBackground: "{surface.100}",
+ borderColor: "{surface.900}",
+ color: "{surface.900}"
+ }
+ },
+ text: {
+ primary: {
+ hoverBackground: "{primary.50}",
+ activeBackground: "{primary.100}",
+ color: "{primary.color}"
+ },
+ secondary: {
+ hoverBackground: "{surface.50}",
+ activeBackground: "{surface.100}",
+ color: "{surface.600}"
+ },
+ success: {
+ hoverBackground: "{green.50}",
+ activeBackground: "{green.100}",
+ color: "{green.500}"
+ },
+ info: {
+ hoverBackground: "{sky.50}",
+ activeBackground: "{sky.100}",
+ color: "{sky.500}"
+ },
+ warn: {
+ hoverBackground: "{orange.50}",
+ activeBackground: "{orange.100}",
+ color: "{orange.500}"
+ },
+ help: {
+ hoverBackground: "{purple.50}",
+ activeBackground: "{purple.100}",
+ color: "{purple.500}"
+ },
+ danger: {
+ hoverBackground: "{red.50}",
+ activeBackground: "{red.100}",
+ color: "{red.500}"
+ },
+ contrast: {
+ hoverBackground: "{surface.50}",
+ activeBackground: "{surface.100}",
+ color: "{surface.950}"
+ },
+ plain: {
+ hoverBackground: "{surface.50}",
+ activeBackground: "{surface.100}",
+ color: "{surface.900}"
+ }
+ },
+ link: {
+ color: "{primary.color}",
+ hoverColor: "{primary.color}",
+ activeColor: "{primary.color}"
+ }
+ },
+ dark: {
+ root: {
+ primary: {
+ background: "{primary.color}",
+ hoverBackground: "{primary.hover.color}",
+ activeBackground: "{primary.active.color}",
+ borderColor: "{primary.color}",
+ hoverBorderColor: "{primary.hover.color}",
+ activeBorderColor: "{primary.active.color}",
+ color: "{primary.contrast.color}",
+ hoverColor: "{primary.contrast.color}",
+ activeColor: "{primary.contrast.color}",
+ focusRing: {
+ color: "{primary.color}",
+ shadow: "none"
+ }
+ },
+ secondary: {
+ background: "{surface.800}",
+ hoverBackground: "{surface.700}",
+ activeBackground: "{surface.600}",
+ borderColor: "{surface.800}",
+ hoverBorderColor: "{surface.700}",
+ activeBorderColor: "{surface.600}",
+ color: "{surface.300}",
+ hoverColor: "{surface.200}",
+ activeColor: "{surface.100}",
+ focusRing: {
+ color: "{surface.300}",
+ shadow: "none"
+ }
+ },
+ info: {
+ background: "{sky.400}",
+ hoverBackground: "{sky.300}",
+ activeBackground: "{sky.200}",
+ borderColor: "{sky.400}",
+ hoverBorderColor: "{sky.300}",
+ activeBorderColor: "{sky.200}",
+ color: "{sky.950}",
+ hoverColor: "{sky.950}",
+ activeColor: "{sky.950}",
+ focusRing: {
+ color: "{sky.400}",
+ shadow: "none"
+ }
+ },
+ success: {
+ background: "{green.400}",
+ hoverBackground: "{green.300}",
+ activeBackground: "{green.200}",
+ borderColor: "{green.400}",
+ hoverBorderColor: "{green.300}",
+ activeBorderColor: "{green.200}",
+ color: "{green.950}",
+ hoverColor: "{green.950}",
+ activeColor: "{green.950}",
+ focusRing: {
+ color: "{green.400}",
+ shadow: "none"
+ }
+ },
+ warn: {
+ background: "{orange.400}",
+ hoverBackground: "{orange.300}",
+ activeBackground: "{orange.200}",
+ borderColor: "{orange.400}",
+ hoverBorderColor: "{orange.300}",
+ activeBorderColor: "{orange.200}",
+ color: "{orange.950}",
+ hoverColor: "{orange.950}",
+ activeColor: "{orange.950}",
+ focusRing: {
+ color: "{orange.400}",
+ shadow: "none"
+ }
+ },
+ help: {
+ background: "{purple.400}",
+ hoverBackground: "{purple.300}",
+ activeBackground: "{purple.200}",
+ borderColor: "{purple.400}",
+ hoverBorderColor: "{purple.300}",
+ activeBorderColor: "{purple.200}",
+ color: "{purple.950}",
+ hoverColor: "{purple.950}",
+ activeColor: "{purple.950}",
+ focusRing: {
+ color: "{purple.400}",
+ shadow: "none"
+ }
+ },
+ danger: {
+ background: "{red.400}",
+ hoverBackground: "{red.300}",
+ activeBackground: "{red.200}",
+ borderColor: "{red.400}",
+ hoverBorderColor: "{red.300}",
+ activeBorderColor: "{red.200}",
+ color: "{red.950}",
+ hoverColor: "{red.950}",
+ activeColor: "{red.950}",
+ focusRing: {
+ color: "{red.400}",
+ shadow: "none"
+ }
+ },
+ contrast: {
+ background: "{surface.0}",
+ hoverBackground: "{surface.100}",
+ activeBackground: "{surface.200}",
+ borderColor: "{surface.0}",
+ hoverBorderColor: "{surface.100}",
+ activeBorderColor: "{surface.200}",
+ color: "{surface.950}",
+ hoverColor: "{surface.950}",
+ activeColor: "{surface.950}",
+ focusRing: {
+ color: "{surface.0}",
+ shadow: "none"
+ }
+ }
+ },
+ outlined: {
+ primary: {
+ hoverBackground: "color-mix(in srgb, {primary.color}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {primary.color}, transparent 84%)",
+ borderColor: "{primary.700}",
+ color: "{primary.color}"
+ },
+ secondary: {
+ hoverBackground: "rgba(255,255,255,0.04)",
+ activeBackground: "rgba(255,255,255,0.16)",
+ borderColor: "{surface.700}",
+ color: "{surface.400}"
+ },
+ success: {
+ hoverBackground: "color-mix(in srgb, {green.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {green.400}, transparent 84%)",
+ borderColor: "{green.700}",
+ color: "{green.400}"
+ },
+ info: {
+ hoverBackground: "color-mix(in srgb, {sky.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {sky.400}, transparent 84%)",
+ borderColor: "{sky.700}",
+ color: "{sky.400}"
+ },
+ warn: {
+ hoverBackground: "color-mix(in srgb, {orange.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {orange.400}, transparent 84%)",
+ borderColor: "{orange.700}",
+ color: "{orange.400}"
+ },
+ help: {
+ hoverBackground: "color-mix(in srgb, {purple.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {purple.400}, transparent 84%)",
+ borderColor: "{purple.700}",
+ color: "{purple.400}"
+ },
+ danger: {
+ hoverBackground: "color-mix(in srgb, {red.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {red.400}, transparent 84%)",
+ borderColor: "{red.700}",
+ color: "{red.400}"
+ },
+ contrast: {
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ borderColor: "{surface.500}",
+ color: "{surface.0}"
+ },
+ plain: {
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ borderColor: "{surface.600}",
+ color: "{surface.0}"
+ }
+ },
+ text: {
+ primary: {
+ hoverBackground: "color-mix(in srgb, {primary.color}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {primary.color}, transparent 84%)",
+ color: "{primary.color}"
+ },
+ secondary: {
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ color: "{surface.400}"
+ },
+ success: {
+ hoverBackground: "color-mix(in srgb, {green.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {green.400}, transparent 84%)",
+ color: "{green.400}"
+ },
+ info: {
+ hoverBackground: "color-mix(in srgb, {sky.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {sky.400}, transparent 84%)",
+ color: "{sky.400}"
+ },
+ warn: {
+ hoverBackground: "color-mix(in srgb, {orange.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {orange.400}, transparent 84%)",
+ color: "{orange.400}"
+ },
+ help: {
+ hoverBackground: "color-mix(in srgb, {purple.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {purple.400}, transparent 84%)",
+ color: "{purple.400}"
+ },
+ danger: {
+ hoverBackground: "color-mix(in srgb, {red.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {red.400}, transparent 84%)",
+ color: "{red.400}"
+ },
+ contrast: {
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ color: "{surface.0}"
+ },
+ plain: {
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ color: "{surface.0}"
+ }
+ },
+ link: {
+ color: "{primary.color}",
+ hoverColor: "{primary.color}",
+ activeColor: "{primary.color}"
+ }
+ }
+ }
+ },
+ datepicker: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ panel: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}",
+ shadow: "{overlay.popover.shadow}",
+ padding: "0.5rem"
+ },
+ header: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ padding: "0 0 0.5rem 0"
+ },
+ title: {
+ gap: "0.5rem",
+ fontWeight: "700"
+ },
+ dropdown: {
+ width: "3rem",
+ sm: {
+ width: "2.5rem"
+ },
+ lg: {
+ width: "3.5rem"
+ },
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.border.color}",
+ activeBorderColor: "{form.field.border.color}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "nıne"
+ }
+ },
+ inputIcon: {
+ color: "{form.field.icon.color}"
+ },
+ selectMonth: {
+ hoverBackground: "{content.hover.background}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ padding: "0.5rem 0.75rem",
+ borderRadius: "{content.border.radius}"
+ },
+ selectYear: {
+ hoverBackground: "{content.hover.background}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ padding: "0.5rem 0.75rem",
+ borderRadius: "{content.border.radius}"
+ },
+ group: {
+ borderColor: "{content.border.color}",
+ gap: "{overlay.popover.padding}"
+ },
+ dayView: {
+ margin: "0.5rem 0 0 0"
+ },
+ weekDay: {
+ padding: "0.5rem",
+ fontWeight: "700",
+ color: "{content.color}"
+ },
+ date: {
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{primary.color}",
+ rangeSelectedBackground: "{highlight.background}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ selectedColor: "{primary.contrast.color}",
+ rangeSelectedColor: "{highlight.color}",
+ width: "2.5rem",
+ height: "2.5rem",
+ borderRadius: "50%",
+ padding: "0.125rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ monthView: {
+ margin: "0.5rem 0 0 0"
+ },
+ month: {
+ padding: "0.625rem",
+ borderRadius: "{content.border.radius}"
+ },
+ yearView: {
+ margin: "0.5rem 0 0 0"
+ },
+ year: {
+ padding: "0.625rem",
+ borderRadius: "{content.border.radius}"
+ },
+ buttonbar: {
+ padding: "0.5rem 0 0 0",
+ borderColor: "{content.border.color}"
+ },
+ timePicker: {
+ padding: "0.5rem 0 0 0",
+ borderColor: "{content.border.color}",
+ gap: "0.5rem",
+ buttonGap: "0.25rem"
+ },
+ colorScheme: {
+ light: {
+ dropdown: {
+ background: "{surface.100}",
+ hoverBackground: "{surface.200}",
+ activeBackground: "{surface.300}",
+ color: "{surface.600}",
+ hoverColor: "{surface.700}",
+ activeColor: "{surface.800}"
+ },
+ today: {
+ background: "{surface.200}",
+ color: "{surface.900}"
+ }
+ },
+ dark: {
+ dropdown: {
+ background: "{surface.800}",
+ hoverBackground: "{surface.700}",
+ activeBackground: "{surface.600}",
+ color: "{surface.300}",
+ hoverColor: "{surface.200}",
+ activeColor: "{surface.100}"
+ },
+ today: {
+ background: "{surface.700}",
+ color: "{surface.0}"
+ }
+ }
+ }
+ },
+ card: {
+ root: {
+ background: "{content.background}",
+ borderRadius: "{content.border.radius}",
+ color: "{content.color}",
+ shadow: "0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)"
+ },
+ body: {
+ padding: "1.5rem",
+ gap: "0.75rem"
+ },
+ caption: {
+ gap: "0.5rem"
+ },
+ title: {
+ fontSize: "1.25rem",
+ fontWeight: "500"
+ },
+ subtitle: {
+ color: "{text.muted.color}"
+ }
+ },
+ carousel: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ content: {
+ gap: "0.25rem"
+ },
+ indicatorList: {
+ padding: "1rem",
+ gap: "1rem"
+ },
+ indicator: {
+ width: "1.25rem",
+ height: "1.25rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ }
+ },
+ colorScheme: {
+ light: {
+ indicator: {
+ background: "{surface.200}",
+ hoverBackground: "{surface.300}",
+ activeBackground: "{primary.color}"
+ }
+ },
+ dark: {
+ indicator: {
+ background: "{surface.700}",
+ hoverBackground: "{surface.600}",
+ activeBackground: "{primary.color}"
+ }
+ }
+ }
+ },
+ cascadeselect: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ }
+ },
+ dropdown: {
+ width: "2.5rem",
+ color: "{form.field.icon.color}"
+ },
+ overlay: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}"
+ },
+ list: {
+ padding: "{list.padding}",
+ gap: "{list.gap}",
+ mobileIndent: "1rem"
+ },
+ option: {
+ focusBackground: "{list.option.focus.background}",
+ selectedBackground: "{list.option.selected.background}",
+ selectedFocusBackground: "{list.option.selected.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ selectedColor: "{list.option.selected.color}",
+ selectedFocusColor: "{list.option.selected.focus.color}",
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}",
+ icon: {
+ color: "{list.option.icon.color}",
+ focusColor: "{list.option.icon.focus.color}",
+ size: "0.875rem"
+ }
+ },
+ clearIcon: {
+ color: "{form.field.icon.color}"
+ }
+ },
+ checkbox: {
+ root: {
+ borderRadius: "{border.radius.xs}",
+ width: "18px",
+ height: "18px",
+ background: "{form.field.background}",
+ checkedBackground: "black",
+ checkedHoverBackground: "black",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ checkedBorderColor: "#000000",
+ checkedHoverBorderColor: "#000000",
+ checkedFocusBorderColor: "#000000",
+ checkedDisabledBorderColor: "{form.field.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ shadow: "{form.field.shadow}",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ width: "14px",
+ height: "14px"
+ },
+ lg: {
+ width: "1.5em",
+ height: "1.5em"
+ }
+ },
+ icon: {
+ size: "0.875rem",
+ color: "{form.field.color}",
+ checkedColor: "white",
+ checkedHoverColor: "white",
+ disabledColor: "{form.field.disabled.color}",
+ sm: {
+ size: "0.75rem"
+ },
+ lg: {
+ size: "1.5rem"
+ }
+ }
+ },
+ chip: {
+ root: {
+ borderRadius: "2rem",
+ paddingX: "0.75rem",
+ paddingY: "0.75rem",
+ gap: "0.5rem",
+ transitionDuration: "{transition.duration}"
+ },
+ image: {
+ width: "2.25rem",
+ height: "2.25rem"
+ },
+ icon: {
+ size: "1rem"
+ },
+ removeIcon: {
+ size: "1rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}"
+ }
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: "{surface.200}",
+ color: "{surface.900}"
+ },
+ icon: {
+ color: "{surface.600}"
+ },
+ removeIcon: {
+ color: "{surface.600}",
+ focusRing: {
+ shadow: "0 0 1px 4px {surface.300}"
+ }
+ }
+ },
+ dark: {
+ root: {
+ background: "{surface.700}",
+ color: "{surface.0}"
+ },
+ icon: {
+ color: "{surface.0}"
+ },
+ removeIcon: {
+ color: "{surface.0}",
+ focusRing: {
+ shadow: "0 0 1px 4px {surface.600}"
+ }
+ }
+ }
+ }
+ },
+ colorpicker: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ preview: {
+ width: "2rem",
+ height: "2rem",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ panel: {
+ shadow: "{overlay.popover.shadow}",
+ borderRadius: "{overlay.popover.borderRadius}"
+ },
+ colorScheme: {
+ light: {
+ panel: {
+ background: "{surface.800}",
+ borderColor: "{surface.900}"
+ },
+ handle: {
+ color: "{surface.0}"
+ }
+ },
+ dark: {
+ panel: {
+ background: "{surface.900}",
+ borderColor: "{surface.700}"
+ },
+ handle: {
+ color: "{surface.0}"
+ }
+ }
+ }
+ },
+ confirmdialog: {
+ icon: {
+ size: "2rem",
+ color: "{overlay.modal.color}"
+ },
+ content: {
+ gap: "1rem"
+ }
+ },
+ confirmpopup: {
+ root: {
+ background: "{overlay.popover.background}",
+ borderColor: "{overlay.popover.border.color}",
+ color: "{overlay.popover.color}",
+ borderRadius: "{overlay.popover.border.radius}",
+ shadow: "{overlay.popover.shadow}",
+ gutter: "10px",
+ arrowOffset: "1.25rem"
+ },
+ content: {
+ padding: "{overlay.popover.padding}",
+ gap: "1rem"
+ },
+ icon: {
+ size: "1.5rem",
+ color: "{overlay.popover.color}"
+ },
+ footer: {
+ gap: "0.5rem",
+ padding: "0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}"
+ }
+ },
+ contextmenu: {
+ root: {
+ background: "{content.background}",
+ borderColor: "transparent",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}",
+ shadow: "{overlay.navigation.shadow}",
+ transitionDuration: "{transition.duration}"
+ },
+ list: {
+ padding: "{navigation.list.padding}",
+ gap: "{navigation.list.gap}"
+ },
+ item: {
+ focusBackground: "{navigation.item.focus.background}",
+ activeBackground: "{navigation.item.active.background}",
+ color: "{navigation.item.color}",
+ focusColor: "{navigation.item.focus.color}",
+ activeColor: "{navigation.item.active.color}",
+ padding: "{navigation.item.padding}",
+ borderRadius: "{navigation.item.border.radius}",
+ gap: "{navigation.item.gap}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ focusColor: "{navigation.item.icon.focus.color}",
+ activeColor: "{navigation.item.icon.active.color}"
+ }
+ },
+ submenu: {
+ mobileIndent: "1rem"
+ },
+ submenuIcon: {
+ size: "{navigation.submenu.icon.size}",
+ color: "{navigation.submenu.icon.color}",
+ focusColor: "{navigation.submenu.icon.focus.color}",
+ activeColor: "{navigation.submenu.icon.active.color}"
+ },
+ separator: {
+ borderColor: "{content.border.color}"
+ }
+ },
+ dataview: {
+ root: {
+ borderColor: "transparent",
+ borderWidth: "0",
+ borderRadius: "0",
+ padding: "0"
+ },
+ header: {
+ background: "{content.background}",
+ color: "{content.color}",
+ borderColor: "{content.border.color}",
+ borderWidth: "0 0 1px 0",
+ padding: "0.75rem 1rem",
+ borderRadius: "0"
+ },
+ content: {
+ background: "{content.background}",
+ color: "{content.color}",
+ borderColor: "transparent",
+ borderWidth: "0",
+ padding: "0",
+ borderRadius: "0"
+ },
+ footer: {
+ background: "{content.background}",
+ color: "{content.color}",
+ borderColor: "{content.border.color}",
+ borderWidth: "1px 0 0 0",
+ padding: "0.75rem 1rem",
+ borderRadius: "0"
+ },
+ paginatorTop: {
+ borderColor: "{content.border.color}",
+ borderWidth: "0 0 1px 0"
+ },
+ paginatorBottom: {
+ borderColor: "{content.border.color}",
+ borderWidth: "1px 0 0 0"
+ }
+ },
+ datatable: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ header: {
+ background: "{content.background}",
+ borderColor: "{datatable.border.color}",
+ color: "{content.color}",
+ borderWidth: "0 0 1px 0",
+ padding: "0.75rem 1rem"
+ },
+ headerCell: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ borderColor: "{datatable.border.color}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ selectedColor: "{highlight.color}",
+ gap: "0.5rem",
+ padding: "0.75rem 1rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ columnTitle: {
+ fontWeight: "600"
+ },
+ row: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ selectedColor: "{highlight.color}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ bodyCell: {
+ borderColor: "{datatable.border.color}",
+ padding: "0.75rem 1rem"
+ },
+ footerCell: {
+ background: "{content.background}",
+ borderColor: "{datatable.border.color}",
+ color: "{content.color}",
+ padding: "0.75rem 1rem"
+ },
+ columnFooter: {
+ fontWeight: "600"
+ },
+ footer: {
+ background: "{content.background}",
+ borderColor: "{datatable.border.color}",
+ color: "{content.color}",
+ borderWidth: "0 0 1px 0",
+ padding: "0.75rem 1rem"
+ },
+ dropPoint: {
+ color: "{primary.color}"
+ },
+ columnResizerWidth: "0.5rem",
+ resizeIndicator: {
+ width: "1px",
+ color: "{primary.color}"
+ },
+ sortIcon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ size: "0.875rem"
+ },
+ loadingIcon: {
+ size: "2rem"
+ },
+ rowToggleButton: {
+ hoverBackground: "{content.hover.background}",
+ selectedHoverBackground: "{content.background}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ selectedHoverColor: "{primary.color}",
+ size: "1.75rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ filter: {
+ inlineGap: "0.5rem",
+ overlaySelect: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}"
+ },
+ overlayPopover: {
+ background: "{overlay.popover.background}",
+ borderColor: "{overlay.popover.border.color}",
+ borderRadius: "{overlay.popover.border.radius}",
+ color: "{overlay.popover.color}",
+ shadow: "{overlay.popover.shadow}",
+ padding: "{overlay.popover.padding}",
+ gap: "0.5rem"
+ },
+ rule: {
+ borderColor: "{content.border.color}"
+ },
+ constraintList: {
+ padding: "{list.padding}",
+ gap: "{list.gap}"
+ },
+ constraint: {
+ focusBackground: "{list.option.focus.background}",
+ selectedBackground: "{list.option.selected.background}",
+ selectedFocusBackground: "{list.option.selected.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ selectedColor: "{list.option.selected.color}",
+ selectedFocusColor: "{list.option.selected.focus.color}",
+ separator: {
+ borderColor: "{content.border.color}"
+ },
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}"
+ }
+ },
+ paginatorTop: {
+ borderColor: "{datatable.border.color}",
+ borderWidth: "0 0 1px 0"
+ },
+ paginatorBottom: {
+ borderColor: "{datatable.border.color}",
+ borderWidth: "0 0 1px 0"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ borderColor: "{content.border.color}"
+ },
+ row: {
+ stripedBackground: "{surface.50}"
+ },
+ bodyCell: {
+ selectedBorderColor: "{primary.100}"
+ }
+ },
+ dark: {
+ root: {
+ borderColor: "{surface.800}"
+ },
+ row: {
+ stripedBackground: "{surface.950}"
+ },
+ bodyCell: {
+ selectedBorderColor: "{primary.900}"
+ }
+ }
+ }
+ },
+ dialog: {
+ root: {
+ background: "{overlay.modal.background}",
+ borderColor: "{overlay.modal.border.color}",
+ color: "{overlay.modal.color}",
+ borderRadius: "{overlay.modal.border.radius}",
+ shadow: "{overlay.modal.shadow}"
+ },
+ header: {
+ padding: "{overlay.modal.padding}",
+ gap: "0.5rem"
+ },
+ title: {
+ fontSize: "1.25rem",
+ fontWeight: "600"
+ },
+ content: {
+ padding: "0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}"
+ },
+ footer: {
+ padding: "0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}",
+ gap: "0.5rem"
+ }
+ },
+ divider: {
+ root: {
+ borderColor: "{content.border.color}"
+ },
+ content: {
+ background: "{content.background}",
+ color: "{text.color}"
+ },
+ horizontal: {
+ margin: "1rem 0",
+ padding: "0 1rem",
+ content: {
+ padding: "0 0.5rem"
+ }
+ },
+ vertical: {
+ margin: "0 1rem",
+ padding: "0.5rem 0",
+ content: {
+ padding: "0.5rem 0"
+ }
+ }
+ },
+ dock: {
+ root: {
+ background: "rgba(255, 255, 255, 0.1)",
+ borderColor: "rgba(255, 255, 255, 0.2)",
+ padding: "0.5rem",
+ borderRadius: "{border.radius.xl}"
+ },
+ item: {
+ borderRadius: "{content.border.radius}",
+ padding: "0.5rem",
+ size: "3rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ }
+ },
+ drawer: {
+ root: {
+ background: "{overlay.modal.background}",
+ borderColor: "{overlay.modal.border.color}",
+ color: "{overlay.modal.color}",
+ shadow: "{overlay.modal.shadow}"
+ },
+ header: {
+ padding: "{overlay.modal.padding}"
+ },
+ title: {
+ fontSize: "1.5rem",
+ fontWeight: "600"
+ },
+ content: {
+ padding: "0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}"
+ },
+ footer: {
+ padding: "{overlay.modal.padding}"
+ }
+ },
+ editor: {
+ toolbar: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}"
+ },
+ toolbarItem: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{primary.color}"
+ },
+ overlay: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}",
+ padding: "{list.padding}"
+ },
+ overlayOption: {
+ focusBackground: "{list.option.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}"
+ },
+ content: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}"
+ }
+ },
+ fieldset: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ color: "{content.color}",
+ padding: "0 1.25rem 1.25rem 1.25rem",
+ transitionDuration: "{transition.duration}"
+ },
+ legend: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ borderRadius: "{content.border.radius}",
+ borderWidth: "1px",
+ borderColor: "transparent",
+ padding: "0.75rem 1rem",
+ gap: "0.5rem",
+ fontWeight: "600",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ }
+ },
+ toggleIcon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}"
+ },
+ content: {
+ padding: "0"
+ }
+ },
+ fileupload: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}",
+ transitionDuration: "{transition.duration}"
+ },
+ header: {
+ background: "transparent",
+ color: "{text.color}",
+ padding: "1.25rem",
+ borderColor: "unset",
+ borderWidth: "0",
+ borderRadius: "0",
+ gap: "0.5rem"
+ },
+ content: {
+ highlightBorderColor: "{primary.color}",
+ padding: "0 1.25rem 1.25rem 1.25rem",
+ gap: "1rem"
+ },
+ file: {
+ padding: "1rem",
+ gap: "1rem",
+ borderColor: "{content.border.color}",
+ info: {
+ gap: "0.5rem"
+ }
+ },
+ fileList: {
+ gap: "0.5rem"
+ },
+ progressbar: {
+ height: "0.25rem"
+ },
+ basic: {
+ gap: "0.5rem"
+ }
+ },
+ iftalabel: {
+ root: {
+ color: "{form.field.float.label.color}",
+ focusColor: "{form.field.float.label.focus.color}",
+ invalidColor: "{form.field.float.label.invalid.color}",
+ transitionDuration: "0.2s",
+ positionX: "{form.field.padding.x}",
+ top: "0.5rem",
+ fontSize: "0.75rem",
+ fontWeight: "400"
+ },
+ input: {
+ paddingTop: "1.5rem",
+ paddingBottom: "0.5rem"
+ }
+ },
+ floatlabel: {
+ root: {
+ color: "{form.field.float.label.color}",
+ focusColor: "{form.field.float.label.focus.color}",
+ activeColor: "{form.field.float.label.active.color}",
+ invalidColor: "{form.field.float.label.invalid.color}",
+ transitionDuration: "0.2s",
+ positionX: "{form.field.padding.x}",
+ positionY: "{form.field.padding.y}",
+ fontWeight: "500",
+ active: {
+ fontSize: "0.75rem",
+ fontWeight: "400"
+ }
+ },
+ over: {
+ active: {
+ top: "-1.25rem"
+ }
+ },
+ in: {
+ input: {
+ paddingTop: "1.5rem",
+ paddingBottom: "0.5rem"
+ },
+ active: {
+ top: "0.5rem"
+ }
+ },
+ on: {
+ borderRadius: "{border.radius.xs}",
+ active: {
+ background: "{form.field.background}",
+ padding: "0 0.125rem"
+ }
+ }
+ },
+ galleria: {
+ root: {
+ borderWidth: "1px",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ transitionDuration: "{transition.duration}"
+ },
+ navButton: {
+ background: "rgba(255, 255, 255, 0.1)",
+ hoverBackground: "rgba(255, 255, 255, 0.2)",
+ color: "{surface.100}",
+ hoverColor: "{surface.0}",
+ size: "3rem",
+ gutter: "0.5rem",
+ prev: {
+ borderRadius: "50%"
+ },
+ next: {
+ borderRadius: "50%"
+ },
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ navIcon: {
+ size: "1.5rem"
+ },
+ thumbnailsContent: {
+ background: "{content.background}",
+ padding: "1rem 0.25rem"
+ },
+ thumbnailNavButton: {
+ size: "2rem",
+ borderRadius: "50%",
+ gutter: "0.5rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ thumbnailNavButtonIcon: {
+ size: "1rem"
+ },
+ caption: {
+ background: "rgba(0, 0, 0, 0.5)",
+ color: "{surface.100}",
+ padding: "1rem"
+ },
+ indicatorList: {
+ gap: "0.5rem",
+ padding: "1rem"
+ },
+ indicatorButton: {
+ width: "1rem",
+ height: "1rem",
+ activeBackground: "{primary.color}",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ insetIndicatorList: {
+ background: "rgba(0, 0, 0, 0.5)"
+ },
+ insetIndicatorButton: {
+ background: "rgba(255, 255, 255, 0.4)",
+ hoverBackground: "rgba(255, 255, 255, 0.6)",
+ activeBackground: "rgba(255, 255, 255, 0.9)"
+ },
+ closeButton: {
+ size: "3rem",
+ gutter: "0.5rem",
+ background: "rgba(255, 255, 255, 0.1)",
+ hoverBackground: "rgba(255, 255, 255, 0.2)",
+ color: "{surface.50}",
+ hoverColor: "{surface.0}",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ closeButtonIcon: {
+ size: "1.5rem"
+ },
+ colorScheme: {
+ light: {
+ thumbnailNavButton: {
+ hoverBackground: "{surface.100}",
+ color: "{surface.600}",
+ hoverColor: "{surface.700}"
+ },
+ indicatorButton: {
+ background: "{surface.200}",
+ hoverBackground: "{surface.300}"
+ }
+ },
+ dark: {
+ thumbnailNavButton: {
+ hoverBackground: "{surface.700}",
+ color: "{surface.400}",
+ hoverColor: "{surface.0}"
+ },
+ indicatorButton: {
+ background: "{surface.700}",
+ hoverBackground: "{surface.600}"
+ }
+ }
+ }
+ },
+ iconfield: {
+ icon: {
+ color: "{form.field.icon.color}"
+ }
+ },
+ image: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ preview: {
+ icon: {
+ size: "1.5rem"
+ },
+ mask: {
+ background: "{mask.background}",
+ color: "{mask.color}"
+ }
+ },
+ toolbar: {
+ position: {
+ left: "auto",
+ right: "1rem",
+ top: "1rem",
+ bottom: "auto"
+ },
+ blur: "8px",
+ background: "rgba(255,255,255,0.1)",
+ borderColor: "rgba(255,255,255,0.2)",
+ borderWidth: "1px",
+ borderRadius: "30px",
+ padding: ".5rem",
+ gap: "0.5rem"
+ },
+ action: {
+ hoverBackground: "rgba(255,255,255,0.1)",
+ color: "{surface.50}",
+ hoverColor: "{surface.0}",
+ size: "3rem",
+ iconSize: "1.5rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ }
+ },
+ imagecompare: {
+ handle: {
+ size: "20px",
+ hoverSize: "40px",
+ background: "rgba(255,255,255,0.4)",
+ hoverBackground: "rgba(255,255,255,0.6)",
+ borderColor: "unset",
+ hoverBorderColor: "unset",
+ borderWidth: "0",
+ borderRadius: "50%",
+ transitionDuration: "{transition.duration}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "rgba(255,255,255,0.3)",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ }
+ },
+ inlinemessage: {
+ root: {
+ padding: "{form.field.padding.y} {form.field.padding.x}",
+ borderRadius: "{content.border.radius}",
+ gap: "0.5rem"
+ },
+ text: {
+ fontWeight: "500"
+ },
+ icon: {
+ size: "1rem"
+ },
+ colorScheme: {
+ light: {
+ info: {
+ background: "color-mix(in srgb, {blue.50}, transparent 5%)",
+ borderColor: "{blue.200}",
+ color: "{blue.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)"
+ },
+ success: {
+ background: "color-mix(in srgb, {green.50}, transparent 5%)",
+ borderColor: "{green.200}",
+ color: "{green.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)"
+ },
+ warn: {
+ background: "color-mix(in srgb,{yellow.50}, transparent 5%)",
+ borderColor: "{yellow.200}",
+ color: "{yellow.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)"
+ },
+ error: {
+ background: "color-mix(in srgb, {red.50}, transparent 5%)",
+ borderColor: "{red.200}",
+ color: "{red.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)"
+ },
+ secondary: {
+ background: "{surface.100}",
+ borderColor: "{surface.200}",
+ color: "{surface.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)"
+ },
+ contrast: {
+ background: "{surface.900}",
+ borderColor: "{surface.950}",
+ color: "{surface.50}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)"
+ }
+ },
+ dark: {
+ info: {
+ background: "color-mix(in srgb, {blue.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {blue.700}, transparent 64%)",
+ color: "{blue.500}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)"
+ },
+ success: {
+ background: "color-mix(in srgb, {green.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {green.700}, transparent 64%)",
+ color: "{green.500}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)"
+ },
+ warn: {
+ background: "color-mix(in srgb, {yellow.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {yellow.700}, transparent 64%)",
+ color: "{yellow.500}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)"
+ },
+ error: {
+ background: "color-mix(in srgb, {red.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {red.700}, transparent 64%)",
+ color: "{red.500}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)"
+ },
+ secondary: {
+ background: "{surface.800}",
+ borderColor: "{surface.700}",
+ color: "{surface.300}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)"
+ },
+ contrast: {
+ background: "{surface.0}",
+ borderColor: "{surface.100}",
+ color: "{surface.950}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)"
+ }
+ }
+ }
+ },
+ inplace: {
+ root: {
+ padding: "{form.field.padding.y} {form.field.padding.x}",
+ borderRadius: "{content.border.radius}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ },
+ transitionDuration: "{transition.duration}"
+ },
+ display: {
+ hoverBackground: "{content.hover.background}",
+ hoverColor: "{content.hover.color}"
+ }
+ },
+ inputchips: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}"
+ },
+ chip: {
+ borderRadius: "{border.radius.sm}"
+ },
+ colorScheme: {
+ light: {
+ chip: {
+ focusBackground: "{surface.200}",
+ color: "{surface.800}"
+ }
+ },
+ dark: {
+ chip: {
+ focusBackground: "{surface.700}",
+ color: "{surface.0}"
+ }
+ }
+ }
+ },
+ inputgroup: {
+ addon: {
+ background: "{form.field.background}",
+ borderColor: "{form.field.border.color}",
+ color: "{form.field.icon.color}",
+ borderRadius: "{form.field.border.radius}",
+ padding: "0.75rem",
+ minWidth: "3rem"
+ }
+ },
+ inputnumber: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ button: {
+ width: "3rem",
+ borderRadius: "{form.field.border.radius}",
+ verticalPadding: "{form.field.padding.y}"
+ },
+ colorScheme: {
+ light: {
+ button: {
+ background: "transparent",
+ hoverBackground: "{surface.100}",
+ activeBackground: "{surface.200}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.border.color}",
+ activeBorderColor: "{form.field.border.color}",
+ color: "{surface.400}",
+ hoverColor: "{surface.500}",
+ activeColor: "{surface.600}"
+ }
+ },
+ dark: {
+ button: {
+ background: "transparent",
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.border.color}",
+ activeBorderColor: "{form.field.border.color}",
+ color: "{surface.400}",
+ hoverColor: "{surface.300}",
+ activeColor: "{surface.200}"
+ }
+ }
+ }
+ },
+ inputotp: {
+ root: {
+ gap: "0.5rem"
+ },
+ input: {
+ width: "3rem",
+ sm: {
+ width: "2.5rem"
+ },
+ lg: {
+ width: "3.5rem"
+ }
+ }
+ },
+ inputtext: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ }
+ }
+ },
+ knob: {
+ root: {
+ transitionDuration: "{transition.duration}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ value: {
+ background: "{primary.color}"
+ },
+ range: {
+ background: "{content.border.color}"
+ },
+ text: {
+ color: "{text.muted.color}"
+ }
+ },
+ listbox: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ borderColor: "{form.field.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ shadow: "{form.field.shadow}",
+ borderRadius: "{form.field.border.radius}",
+ transitionDuration: "{form.field.transition.duration}"
+ },
+ list: {
+ padding: "{list.padding}",
+ gap: "{list.gap}",
+ header: {
+ padding: "{list.header.padding}"
+ }
+ },
+ option: {
+ focusBackground: "{list.option.focus.background}",
+ selectedBackground: "{list.option.selected.background}",
+ selectedFocusBackground: "{list.option.selected.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ selectedColor: "{list.option.selected.color}",
+ selectedFocusColor: "{list.option.selected.focus.color}",
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}"
+ },
+ optionGroup: {
+ background: "{list.option.group.background}",
+ color: "{list.option.group.color}",
+ fontWeight: "{list.option.group.font.weight}",
+ padding: "{list.option.group.padding}"
+ },
+ checkmark: {
+ color: "{list.option.color}",
+ gutterStart: "-0.375rem",
+ gutterEnd: "0.375rem"
+ },
+ emptyMessage: {
+ padding: "{list.option.padding}"
+ },
+ colorScheme: {
+ light: {
+ option: {
+ stripedBackground: "{surface.50}"
+ }
+ },
+ dark: {
+ option: {
+ stripedBackground: "{surface.900}"
+ }
+ }
+ }
+ },
+ megamenu: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ color: "{content.color}",
+ gap: "0.5rem",
+ verticalOrientation: {
+ padding: "{navigation.list.padding}",
+ gap: "{navigation.list.gap}"
+ },
+ horizontalOrientation: {
+ padding: "0.5rem 0.75rem",
+ gap: "0.5rem"
+ },
+ transitionDuration: "{transition.duration}"
+ },
+ baseItem: {
+ borderRadius: "{content.border.radius}",
+ padding: "{navigation.item.padding}"
+ },
+ item: {
+ focusBackground: "{navigation.item.focus.background}",
+ activeBackground: "{navigation.item.active.background}",
+ color: "{navigation.item.color}",
+ focusColor: "{navigation.item.focus.color}",
+ activeColor: "{navigation.item.active.color}",
+ padding: "{navigation.item.padding}",
+ borderRadius: "{navigation.item.border.radius}",
+ gap: "{navigation.item.gap}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ focusColor: "{navigation.item.icon.focus.color}",
+ activeColor: "{navigation.item.icon.active.color}"
+ }
+ },
+ overlay: {
+ padding: "0",
+ background: "{content.background}",
+ borderColor: "transparent",
+ borderRadius: "{content.border.radius}",
+ color: "{content.color}",
+ shadow: "{overlay.navigation.shadow}",
+ gap: "0.5rem"
+ },
+ submenu: {
+ padding: "{navigation.list.padding}",
+ gap: "{navigation.list.gap}"
+ },
+ submenuLabel: {
+ padding: "{navigation.submenu.label.padding}",
+ fontWeight: "{navigation.submenu.label.font.weight}",
+ background: "{navigation.submenu.label.background.}",
+ color: "{navigation.submenu.label.color}"
+ },
+ submenuIcon: {
+ size: "{navigation.submenu.icon.size}",
+ color: "{navigation.submenu.icon.color}",
+ focusColor: "{navigation.submenu.icon.focus.color}",
+ activeColor: "{navigation.submenu.icon.active.color}"
+ },
+ separator: {
+ borderColor: "{content.border.color}"
+ },
+ mobileButton: {
+ borderRadius: "50%",
+ size: "2.5rem",
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ hoverBackground: "{content.hover.background}",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ }
+ }
+ },
+ menu: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}",
+ shadow: "{overlay.navigation.shadow}",
+ transitionDuration: "{transition.duration}"
+ },
+ list: {
+ padding: "{navigation.list.padding}",
+ gap: "{navigation.list.gap}"
+ },
+ item: {
+ focusBackground: "{navigation.item.focus.background}",
+ color: "{navigation.item.color}",
+ focusColor: "{navigation.item.focus.color}",
+ padding: "{navigation.item.padding}",
+ borderRadius: "{navigation.item.border.radius}",
+ gap: "{navigation.item.gap}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ focusColor: "{navigation.item.icon.focus.color}"
+ }
+ },
+ submenuLabel: {
+ padding: "{navigation.submenu.label.padding}",
+ fontWeight: "{navigation.submenu.label.font.weight}",
+ background: "{navigation.submenu.label.background}",
+ color: "{navigation.submenu.label.color}"
+ },
+ separator: {
+ borderColor: "{content.border.color}"
+ }
+ },
+ menubar: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ color: "{content.color}",
+ gap: "0.5rem",
+ padding: "0.5rem 0.75rem",
+ transitionDuration: "{transition.duration}"
+ },
+ baseItem: {
+ borderRadius: "{content.border.radius}",
+ padding: "{navigation.item.padding}"
+ },
+ item: {
+ focusBackground: "{navigation.item.focus.background}",
+ activeBackground: "{navigation.item.active.background}",
+ color: "{navigation.item.color}",
+ focusColor: "{navigation.item.focus.color}",
+ activeColor: "{navigation.item.active.color}",
+ padding: "{navigation.item.padding}",
+ borderRadius: "{navigation.item.border.radius}",
+ gap: "{navigation.item.gap}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ focusColor: "{navigation.item.icon.focus.color}",
+ activeColor: "{navigation.item.icon.active.color}"
+ }
+ },
+ submenu: {
+ padding: "{navigation.list.padding}",
+ gap: "{navigation.list.gap}",
+ background: "{content.background}",
+ borderColor: "transparent",
+ borderRadius: "{content.border.radius}",
+ shadow: "{overlay.navigation.shadow}",
+ mobileIndent: "1rem",
+ icon: {
+ size: "{navigation.submenu.icon.size}",
+ color: "{navigation.submenu.icon.color}",
+ focusColor: "{navigation.submenu.icon.focus.color}",
+ activeColor: "{navigation.submenu.icon.active.color}"
+ }
+ },
+ separator: {
+ borderColor: "{content.border.color}"
+ },
+ mobileButton: {
+ borderRadius: "50%",
+ size: "2.5rem",
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ hoverBackground: "{content.hover.background}",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ }
+ }
+ },
+ message: {
+ root: {
+ borderRadius: "{content.border.radius}",
+ borderWidth: "0",
+ transitionDuration: "{transition.duration}"
+ },
+ content: {
+ padding: "1rem 1.25rem",
+ gap: "0.5rem",
+ sm: {
+ padding: "0.625rem 0.625rem"
+ },
+ lg: {
+ padding: "0.825rem 0.825rem"
+ }
+ },
+ text: {
+ fontSize: "1rem",
+ fontWeight: "500",
+ sm: {
+ fontSize: "0.875rem"
+ },
+ lg: {
+ fontSize: "1.125rem"
+ }
+ },
+ icon: {
+ size: "1.25rem",
+ sm: {
+ size: "1rem"
+ },
+ lg: {
+ size: "1.5rem"
+ }
+ },
+ closeButton: {
+ width: "2rem",
+ height: "2rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ offset: "{focus.ring.offset}"
+ }
+ },
+ closeIcon: {
+ size: "1rem",
+ sm: {
+ fontSize: "0.875rem"
+ },
+ lg: {
+ fontSize: "1.125rem"
+ }
+ },
+ outlined: {
+ root: {
+ borderWidth: "1px"
+ }
+ },
+ simple: {
+ content: {
+ padding: "0"
+ }
+ },
+ colorScheme: {
+ light: {
+ info: {
+ background: "color-mix(in srgb, {blue.50}, transparent 5%)",
+ borderColor: "{blue.200}",
+ color: "{blue.600}",
+ shadow: "none",
+ closeButton: {
+ hoverBackground: "{blue.100}",
+ focusRing: {
+ color: "{blue.600}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{blue.600}",
+ borderColor: "{blue.600}"
+ },
+ simple: {
+ color: "{blue.600}"
+ }
+ },
+ success: {
+ background: "color-mix(in srgb, {green.50}, transparent 5%)",
+ borderColor: "{green.200}",
+ color: "{green.600}",
+ shadow: "none",
+ closeButton: {
+ hoverBackground: "{green.100}",
+ focusRing: {
+ color: "{green.600}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{green.600}",
+ borderColor: "{green.600}"
+ },
+ simple: {
+ color: "{green.600}"
+ }
+ },
+ warn: {
+ background: "color-mix(in srgb,{yellow.50}, transparent 5%)",
+ borderColor: "{yellow.200}",
+ color: "{yellow.900}",
+ shadow: "none",
+ closeButton: {
+ hoverBackground: "{yellow.100}",
+ focusRing: {
+ color: "{yellow.600}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{yellow.900}",
+ borderColor: "{yellow.900}"
+ },
+ simple: {
+ color: "{yellow.900}"
+ }
+ },
+ error: {
+ background: "color-mix(in srgb, {red.50}, transparent 5%)",
+ borderColor: "{red.200}",
+ color: "{red.600}",
+ shadow: "none",
+ closeButton: {
+ hoverBackground: "{red.100}",
+ focusRing: {
+ color: "{red.600}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{red.600}",
+ borderColor: "{red.600}"
+ },
+ simple: {
+ color: "{red.600}"
+ }
+ },
+ secondary: {
+ background: "{surface.100}",
+ borderColor: "{surface.200}",
+ color: "{surface.600}",
+ shadow: "none",
+ closeButton: {
+ hoverBackground: "{surface.200}",
+ focusRing: {
+ color: "{surface.600}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{surface.600}",
+ borderColor: "{surface.600}"
+ },
+ simple: {
+ color: "{surface.600}"
+ }
+ },
+ contrast: {
+ background: "{surface.900}",
+ borderColor: "{surface.950}",
+ color: "{surface.50}",
+ shadow: "none",
+ closeButton: {
+ hoverBackground: "{surface.800}",
+ focusRing: {
+ color: "{surface.50}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{surface.950}",
+ borderColor: "{surface.950}"
+ },
+ simple: {
+ color: "{surface.950}"
+ }
+ }
+ },
+ dark: {
+ info: {
+ background: "color-mix(in srgb, {blue.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {blue.700}, transparent 64%)",
+ color: "{blue.500}",
+ shadow: "none",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{blue.500}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{blue.500}",
+ borderColor: "{blue.500}"
+ },
+ simple: {
+ color: "{blue.500}"
+ }
+ },
+ success: {
+ background: "color-mix(in srgb, {green.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {green.700}, transparent 64%)",
+ color: "{green.500}",
+ shadow: "none",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{green.500}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{green.500}",
+ borderColor: "{green.500}"
+ },
+ simple: {
+ color: "{green.500}"
+ }
+ },
+ warn: {
+ background: "color-mix(in srgb, {yellow.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {yellow.700}, transparent 64%)",
+ color: "{yellow.500}",
+ shadow: "none",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{yellow.500}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{yellow.500}",
+ borderColor: "{yellow.500}"
+ },
+ simple: {
+ color: "{yellow.500}"
+ }
+ },
+ error: {
+ background: "color-mix(in srgb, {red.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {red.700}, transparent 64%)",
+ color: "{red.500}",
+ shadow: "none",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{red.500}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{red.500}",
+ borderColor: "{red.500}"
+ },
+ simple: {
+ color: "{red.500}"
+ }
+ },
+ secondary: {
+ background: "{surface.800}",
+ borderColor: "{surface.700}",
+ color: "{surface.300}",
+ shadow: "none",
+ closeButton: {
+ hoverBackground: "{surface.700}",
+ focusRing: {
+ color: "{surface.300}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{surface.400}",
+ borderColor: "{surface.400}"
+ },
+ simple: {
+ color: "{surface.400}"
+ }
+ },
+ contrast: {
+ background: "{surface.0}",
+ borderColor: "{surface.100}",
+ color: "{surface.950}",
+ shadow: "none",
+ closeButton: {
+ hoverBackground: "{surface.100}",
+ focusRing: {
+ color: "{surface.950}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{surface.0}",
+ borderColor: "{surface.0}"
+ },
+ simple: {
+ color: "{surface.0}"
+ }
+ }
+ }
+ }
+ },
+ metergroup: {
+ root: {
+ borderRadius: "{content.border.radius}",
+ gap: "1rem"
+ },
+ meters: {
+ background: "{content.border.color}",
+ size: "0.5rem"
+ },
+ label: {
+ gap: "0.5rem"
+ },
+ labelMarker: {
+ size: "0.5rem"
+ },
+ labelIcon: {
+ size: "1rem"
+ },
+ labelList: {
+ verticalGap: "0.5rem",
+ horizontalGap: "1rem"
+ }
+ },
+ multiselect: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ }
+ },
+ dropdown: {
+ width: "2.5rem",
+ color: "{form.field.icon.color}"
+ },
+ overlay: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}"
+ },
+ list: {
+ padding: "{list.padding}",
+ gap: "{list.gap}",
+ header: {
+ padding: "{list.header.padding}"
+ }
+ },
+ option: {
+ focusBackground: "{list.option.focus.background}",
+ selectedBackground: "{list.option.selected.background}",
+ selectedFocusBackground: "{list.option.selected.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ selectedColor: "{list.option.selected.color}",
+ selectedFocusColor: "{list.option.selected.focus.color}",
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}",
+ gap: "0.75rem"
+ },
+ optionGroup: {
+ background: "{list.option.group.background}",
+ color: "{list.option.group.color}",
+ fontWeight: "{list.option.group.font.weight}",
+ padding: "{list.option.group.padding}"
+ },
+ chip: {
+ borderRadius: "{border.radius.sm}"
+ },
+ clearIcon: {
+ color: "{form.field.icon.color}"
+ },
+ emptyMessage: {
+ padding: "{list.option.padding}"
+ }
+ },
+ orderlist: {
+ root: {
+ gap: "1.125rem"
+ },
+ controls: {
+ gap: "0.5rem"
+ }
+ },
+ organizationchart: {
+ root: {
+ gutter: "0.75rem",
+ transitionDuration: "{transition.duration}"
+ },
+ node: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ selectedColor: "{highlight.color}",
+ hoverColor: "{content.hover.color}",
+ padding: "1rem 1.25rem",
+ toggleablePadding: "1rem 1.25rem 1.5rem 1.25rem",
+ borderRadius: "{content.border.radius}"
+ },
+ nodeToggleButton: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ borderColor: "{content.border.color}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ size: "1.75rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ connector: {
+ color: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ height: "24px"
+ }
+ },
+ overlaybadge: {
+ root: {
+ outline: {
+ width: "2px",
+ color: "{content.background}"
+ }
+ }
+ },
+ popover: {
+ root: {
+ background: "{overlay.popover.background}",
+ borderColor: "{overlay.popover.border.color}",
+ color: "{overlay.popover.color}",
+ borderRadius: "{overlay.popover.border.radius}",
+ shadow: "{overlay.popover.shadow}",
+ gutter: "10px",
+ arrowOffset: "1.25rem"
+ },
+ content: {
+ padding: "{overlay.popover.padding}"
+ }
+ },
+ paginator: {
+ root: {
+ padding: "0.5rem 1rem",
+ gap: "0.25rem",
+ borderRadius: "{content.border.radius}",
+ background: "{content.background}",
+ color: "{content.color}",
+ transitionDuration: "{transition.duration}"
+ },
+ navButton: {
+ background: "transparent",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ selectedColor: "{highlight.color}",
+ width: "2.5rem",
+ height: "2.5rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ currentPageReport: {
+ color: "{text.muted.color}"
+ },
+ jumpToPageInput: {
+ maxWidth: "2.5rem"
+ }
+ },
+ password: {
+ meter: {
+ background: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ height: ".75rem"
+ },
+ icon: {
+ color: "{form.field.icon.color}"
+ },
+ overlay: {
+ background: "{overlay.popover.background}",
+ borderColor: "{overlay.popover.border.color}",
+ borderRadius: "{overlay.popover.border.radius}",
+ color: "{overlay.popover.color}",
+ padding: "{overlay.popover.padding}",
+ shadow: "{overlay.popover.shadow}"
+ },
+ content: {
+ gap: "0.5rem"
+ },
+ colorScheme: {
+ light: {
+ strength: {
+ weakBackground: "{red.500}",
+ mediumBackground: "{amber.500}",
+ strongBackground: "{green.500}"
+ }
+ },
+ dark: {
+ strength: {
+ weakBackground: "{red.400}",
+ mediumBackground: "{amber.400}",
+ strongBackground: "{green.400}"
+ }
+ }
+ }
+ },
+ panel: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}"
+ },
+ header: {
+ background: "transparent",
+ color: "{text.color}",
+ padding: "1.25rem",
+ borderColor: "{content.border.color}",
+ borderWidth: "0",
+ borderRadius: "0"
+ },
+ toggleableHeader: {
+ padding: "0.5rem 1.25rem"
+ },
+ title: {
+ fontWeight: "600"
+ },
+ content: {
+ padding: "0 1.25rem 1.25rem 1.25rem"
+ },
+ footer: {
+ padding: "0 1.25rem 1.25rem 1.25rem"
+ }
+ },
+ panelmenu: {
+ root: {
+ gap: "0",
+ transitionDuration: "{transition.duration}"
+ },
+ panel: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderWidth: "0",
+ color: "{content.color}",
+ padding: "0",
+ borderRadius: "0",
+ first: {
+ borderWidth: "0",
+ topBorderRadius: "{content.border.radius}"
+ },
+ last: {
+ borderWidth: "0",
+ bottomBorderRadius: "{content.border.radius}"
+ }
+ },
+ item: {
+ focusBackground: "{navigation.item.focus.background}",
+ color: "{navigation.item.color}",
+ focusColor: "{navigation.item.focus.color}",
+ gap: "0.5rem",
+ padding: "{navigation.item.padding}",
+ borderRadius: "{content.border.radius}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ focusColor: "{navigation.item.icon.focus.color}"
+ }
+ },
+ submenu: {
+ indent: "1rem"
+ },
+ submenuIcon: {
+ color: "{navigation.submenu.icon.color}",
+ focusColor: "{navigation.submenu.icon.focus.color}"
+ }
+ },
+ picklist: {
+ root: {
+ gap: "1.125rem"
+ },
+ controls: {
+ gap: "0.5rem"
+ }
+ },
+ progressbar: {
+ root: {
+ background: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ height: "1rem"
+ },
+ value: {
+ background: "{primary.color}"
+ },
+ label: {
+ color: "{primary.contrast.color}",
+ fontSize: "0.75rem",
+ fontWeight: "600"
+ }
+ },
+ radiobutton: {
+ root: {
+ width: "20px",
+ height: "20px",
+ background: "{form.field.background}",
+ checkedBackground: "{primary.contrast.color}",
+ checkedHoverBackground: "{primary.contrast.color}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ checkedBorderColor: "#000000",
+ checkedHoverBorderColor: "#000000",
+ checkedFocusBorderColor: "#000000",
+ checkedDisabledBorderColor: "{form.field.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ shadow: "{form.field.shadow}",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ width: "16px",
+ height: "16px"
+ },
+ lg: {
+ width: "24px",
+ height: "24px"
+ }
+ },
+ icon: {
+ size: "10px",
+ checkedColor: "#000000",
+ checkedHoverColor: "#000000",
+ disabledColor: "{form.field.disabled.color}",
+ sm: {
+ size: "8px"
+ },
+ lg: {
+ size: "12px"
+ }
+ }
+ },
+ rating: {
+ root: {
+ gap: "0.5rem",
+ transitionDuration: "{transition.duration}",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ }
+ },
+ icon: {
+ size: "1.125rem",
+ color: "{text.muted.color}",
+ hoverColor: "{primary.color}",
+ activeColor: "{primary.color}"
+ }
+ },
+ scrollpanel: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ bar: {
+ size: "9px",
+ borderRadius: "{border.radius.sm}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ colorScheme: {
+ light: {
+ bar: {
+ background: "{surface.200}"
+ }
+ },
+ dark: {
+ bar: {
+ background: "{surface.700}"
+ }
+ }
+ }
+ },
+ select: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ }
+ },
+ dropdown: {
+ width: "2.5rem",
+ color: "{form.field.icon.color}"
+ },
+ overlay: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}"
+ },
+ list: {
+ padding: "{list.padding}",
+ gap: "{list.gap}",
+ header: {
+ padding: "{list.header.padding}"
+ }
+ },
+ option: {
+ focusBackground: "{list.option.focus.background}",
+ selectedBackground: "{list.option.selected.background}",
+ selectedFocusBackground: "{list.option.selected.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ selectedColor: "{list.option.selected.color}",
+ selectedFocusColor: "{list.option.selected.focus.color}",
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}"
+ },
+ optionGroup: {
+ background: "{list.option.group.background}",
+ color: "{list.option.group.color}",
+ fontWeight: "{list.option.group.font.weight}",
+ padding: "{list.option.group.padding}"
+ },
+ clearIcon: {
+ color: "{form.field.icon.color}"
+ },
+ checkmark: {
+ color: "{list.option.color}",
+ gutterStart: "-0.375rem",
+ gutterEnd: "0.375rem"
+ },
+ emptyMessage: {
+ padding: "{list.option.padding}"
+ }
+ },
+ selectbutton: {
+ root: {
+ borderRadius: "{form.field.border.radius}"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ invalidBorderColor: "{form.field.invalid.border.color}"
+ }
+ },
+ dark: {
+ root: {
+ invalidBorderColor: "{form.field.invalid.border.color}"
+ }
+ }
+ }
+ },
+ skeleton: {
+ root: {
+ borderRadius: "{content.border.radius}"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: "{surface.200}",
+ animationBackground: "rgba(255,255,255,0.4)"
+ }
+ },
+ dark: {
+ root: {
+ background: "rgba(255, 255, 255, 0.06)",
+ animationBackground: "rgba(255, 255, 255, 0.04)"
+ }
+ }
+ }
+ },
+ slider: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ track: {
+ background: "{content.border.color}",
+ borderRadius: "{border.radius.xs}",
+ size: "2px"
+ },
+ range: {
+ background: "{primary.color}"
+ },
+ handle: {
+ width: "18px",
+ height: "18px",
+ borderRadius: "50%",
+ background: "{primary.color}",
+ hoverBackground: "{primary.color}",
+ content: {
+ borderRadius: "50%",
+ contentBackground: "{primary.color}",
+ hoverBackground: "{primary.color}",
+ width: "18px",
+ height: "18px",
+ shadow: "0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12)"
+ },
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ }
+ }
+ },
+ speeddial: {
+ root: {
+ gap: "0.5rem",
+ transitionDuration: "{transition.duration}"
+ }
+ },
+ splitter: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ transitionDuration: "{transition.duration}"
+ },
+ gutter: {
+ background: "{content.border.color}"
+ },
+ handle: {
+ size: "24px",
+ background: "transparent",
+ borderRadius: "{content.border.radius}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ }
+ },
+ splitbutton: {
+ root: {
+ borderRadius: "{form.field.border.radius}",
+ roundedBorderRadius: "2rem",
+ raisedShadow: "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)"
+ }
+ },
+ stepper: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ separator: {
+ background: "{content.border.color}",
+ activeBackground: "{primary.color}",
+ margin: "0 0 0 1.625rem",
+ size: "2px"
+ },
+ step: {
+ padding: "0.5rem",
+ gap: "1rem"
+ },
+ stepHeader: {
+ padding: "0.75rem 1rem",
+ borderRadius: "{content.border.radius}",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ },
+ gap: "0.5rem"
+ },
+ stepTitle: {
+ color: "{text.muted.color}",
+ activeColor: "{text.color}",
+ fontWeight: "500"
+ },
+ stepNumber: {
+ activeBackground: "{primary.color}",
+ activeBorderColor: "{primary.color}",
+ activeColor: "{primary.contrast.color}",
+ size: "2rem",
+ fontSize: "1.143rem",
+ fontWeight: "500",
+ borderRadius: "50%",
+ shadow: "none"
+ },
+ steppanels: {
+ padding: "0.875rem 0.5rem 1.125rem 0.5rem"
+ },
+ steppanel: {
+ background: "{content.background}",
+ color: "{content.color}",
+ padding: "0",
+ indent: "1rem"
+ },
+ colorScheme: {
+ light: {
+ stepNumber: {
+ background: "{surface.400}",
+ borderColor: "{surface.400}",
+ color: "{surface.0}"
+ }
+ },
+ dark: {
+ stepNumber: {
+ background: "{surface.200}",
+ borderColor: "{surface.200}",
+ color: "{surface.900}"
+ }
+ }
+ }
+ },
+ steps: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ separator: {
+ background: "{content.border.color}"
+ },
+ itemLink: {
+ borderRadius: "{content.border.radius}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ },
+ gap: "0.5rem"
+ },
+ itemLabel: {
+ color: "{text.muted.color}",
+ activeColor: "{primary.color}",
+ fontWeight: "500"
+ },
+ itemNumber: {
+ background: "{content.background}",
+ activeBackground: "{content.background}",
+ borderColor: "{content.border.color}",
+ activeBorderColor: "{content.border.color}",
+ color: "{text.muted.color}",
+ activeColor: "{primary.color}",
+ size: "2rem",
+ fontSize: "1.143rem",
+ fontWeight: "500",
+ borderRadius: "50%",
+ shadow: "0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)"
+ }
+ },
+ tabmenu: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ tablist: {
+ borderWidth: "0 0 1px 0",
+ background: "{content.background}",
+ borderColor: "{content.border.color}"
+ },
+ item: {
+ background: "transparent",
+ hoverBackground: "transparent",
+ activeBackground: "transparent",
+ borderWidth: "0 0 1px 0",
+ borderColor: "{content.border.color}",
+ hoverBorderColor: "{content.border.color}",
+ activeBorderColor: "{primary.color}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{primary.color}",
+ padding: "1rem 1.125rem",
+ fontWeight: "600",
+ margin: "0 0 -1px 0",
+ gap: "0.5rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ itemIcon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{primary.color}"
+ },
+ activeBar: {
+ height: "1px",
+ bottom: "-1px",
+ background: "{primary.color}"
+ }
+ },
+ tabs: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ tablist: {
+ borderWidth: "0 0 1px 0",
+ background: "{content.background}",
+ borderColor: "{content.border.color}"
+ },
+ tab: {
+ background: "transparent",
+ hoverBackground: "{content.hover.background}",
+ activeBackground: "transparent",
+ borderWidth: "0 0 1px 0",
+ borderColor: "{content.border.color}",
+ hoverBorderColor: "{content.border.color}",
+ activeBorderColor: "{primary.color}",
+ color: "{text.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{primary.color}",
+ padding: "1rem 1.25rem",
+ fontWeight: "600",
+ margin: "0 0 -1px 0",
+ gap: "0.5rem",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ }
+ },
+ tabpanel: {
+ background: "{content.background}",
+ color: "{content.color}",
+ padding: "1.25rem 1.25rem 1.25rem 1.25rem",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ }
+ },
+ navButton: {
+ background: "{content.background}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ width: "3rem",
+ shadow: "none",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ }
+ },
+ activeBar: {
+ height: "2px",
+ bottom: "-1px",
+ background: "{primary.color}"
+ }
+ },
+ tabview: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ tabList: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}"
+ },
+ tab: {
+ borderColor: "{content.border.color}",
+ activeBorderColor: "{primary.color}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{primary.color}"
+ },
+ tabPanel: {
+ background: "{content.background}",
+ color: "{content.color}"
+ },
+ navButton: {
+ background: "{content.background}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}"
+ },
+ colorScheme: {
+ light: {
+ navButton: {
+ shadow: "0px 0px 10px 50px rgba(255, 255, 255, 0.6)"
+ }
+ },
+ dark: {
+ navButton: {
+ shadow: "0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)"
+ }
+ }
+ }
+ },
+ textarea: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ }
+ }
+ },
+ tieredmenu: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}",
+ shadow: "{overlay.navigation.shadow}",
+ transitionDuration: "{transition.duration}"
+ },
+ list: {
+ padding: "{navigation.list.padding}",
+ gap: "{navigation.list.gap}"
+ },
+ item: {
+ focusBackground: "{navigation.item.focus.background}",
+ activeBackground: "{navigation.item.active.background}",
+ color: "{navigation.item.color}",
+ focusColor: "{navigation.item.focus.color}",
+ activeColor: "{navigation.item.active.color}",
+ padding: "{navigation.item.padding}",
+ borderRadius: "{navigation.item.border.radius}",
+ gap: "{navigation.item.gap}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ focusColor: "{navigation.item.icon.focus.color}",
+ activeColor: "{navigation.item.icon.active.color}"
+ }
+ },
+ submenu: {
+ mobileIndent: "1rem"
+ },
+ submenuIcon: {
+ size: "{navigation.submenu.icon.size}",
+ color: "{navigation.submenu.icon.color}",
+ focusColor: "{navigation.submenu.icon.focus.color}",
+ activeColor: "{navigation.submenu.icon.active.color}"
+ },
+ separator: {
+ borderColor: "{content.border.color}"
+ }
+ },
+ tag: {
+ root: {
+ fontSize: "0.875rem",
+ fontWeight: "700",
+ padding: "0.25rem 0.5rem",
+ gap: "0.25rem",
+ borderRadius: "{content.border.radius}",
+ roundedBorderRadius: "{border.radius.xl}"
+ },
+ icon: {
+ size: "0.75rem"
+ },
+ colorScheme: {
+ light: {
+ primary: {
+ background: "{primary.color}",
+ color: "{primary.contrast.color}"
+ },
+ secondary: {
+ background: "{surface.100}",
+ color: "{surface.600}"
+ },
+ success: {
+ background: "{green.500}",
+ color: "{surface.0}"
+ },
+ info: {
+ background: "{sky.500}",
+ color: "{surface.0}"
+ },
+ warn: {
+ background: "{orange.500}",
+ color: "{surface.0}"
+ },
+ danger: {
+ background: "{red.500}",
+ color: "{surface.0}"
+ },
+ contrast: {
+ background: "{surface.950}",
+ color: "{surface.0}"
+ }
+ },
+ dark: {
+ primary: {
+ background: "{primary.color}",
+ color: "{primary.contrast.color}"
+ },
+ secondary: {
+ background: "{surface.800}",
+ color: "{surface.300}"
+ },
+ success: {
+ background: "{green.400}",
+ color: "{green.950}"
+ },
+ info: {
+ background: "{sky.400}",
+ color: "{sky.950}"
+ },
+ warn: {
+ background: "{orange.400}",
+ color: "{orange.950}"
+ },
+ danger: {
+ background: "{red.400}",
+ color: "{red.950}"
+ },
+ contrast: {
+ background: "{surface.0}",
+ color: "{surface.950}"
+ }
+ }
+ }
+ },
+ terminal: {
+ root: {
+ background: "{form.field.background}",
+ borderColor: "{form.field.border.color}",
+ color: "{form.field.color}",
+ height: "18rem",
+ padding: "{form.field.padding.y} {form.field.padding.x}",
+ borderRadius: "{form.field.border.radius}"
+ },
+ prompt: {
+ gap: "0.25rem"
+ },
+ commandResponse: {
+ margin: "2px 0"
+ }
+ },
+ timeline: {
+ event: {
+ minHeight: "5rem"
+ },
+ horizontal: {
+ eventContent: {
+ padding: "1rem 0"
+ }
+ },
+ vertical: {
+ eventContent: {
+ padding: "0 1rem"
+ }
+ },
+ eventMarker: {
+ size: "1.5rem",
+ borderRadius: "50%",
+ borderWidth: "2px",
+ background: "{primary.color}",
+ content: {
+ borderRadius: "50%",
+ size: "0",
+ background: "{primary.color}",
+ insetShadow: "none"
+ }
+ },
+ eventConnector: {
+ color: "{content.border.color}",
+ size: "2px"
+ },
+ colorScheme: {
+ light: {
+ eventMarker: {
+ borderColor: "{surface.0}"
+ }
+ },
+ dark: {
+ eventMarker: {
+ borderColor: "{surface.900}"
+ }
+ }
+ }
+ },
+ togglebutton: {
+ root: {
+ padding: "0.75rem 1rem",
+ borderRadius: "{form.field.border.radius}",
+ gap: "0.5rem",
+ fontWeight: "500",
+ background: "{form.field.background}",
+ borderColor: "{form.field.border.color}",
+ color: "{form.field.color}",
+ hoverColor: "{form.field.color}",
+ checkedColor: "{form.field.color}",
+ checkedBorderColor: "{form.field.border.color}",
+ disabledBackground: "{form.field.disabled.background}",
+ disabledBorderColor: "{form.field.disabled.background}",
+ disabledColor: "{form.field.disabled.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ focusRing: {
+ width: "0",
+ style: "none",
+ offset: "0",
+ color: "unset",
+ shadow: "none"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ padding: "0.625rem 0.75rem"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ padding: "0.875rem 1.25rem"
+ }
+ },
+ icon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.muted.color}",
+ checkedColor: "{text.muted.color}",
+ disabledColor: "{form.field.disabled.color}"
+ },
+ content: {
+ left: "0.25rem",
+ top: "0.25rem",
+ checkedBackground: "transparent",
+ checkedShadow: "none"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ hoverBackground: "{surface.100}",
+ checkedBackground: "{surface.200}"
+ }
+ },
+ dark: {
+ root: {
+ hoverBackground: "{surface.800}",
+ checkedBackground: "{surface.700}"
+ }
+ }
+ }
+ },
+ toggleswitch: {
+ root: {
+ width: "2.75rem",
+ height: "1rem",
+ borderRadius: "30px",
+ gap: "0px",
+ shadow: "none",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "unset",
+ offset: "0",
+ shadow: "none"
+ },
+ borderWidth: "1px",
+ borderColor: "transparent",
+ hoverBorderColor: "transparent",
+ checkedBorderColor: "transparent",
+ checkedHoverBorderColor: "transparent",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ transitionDuration: "{form.field.transition.duration}",
+ slideDuration: "0.2s"
+ },
+ handle: {
+ borderRadius: "50%",
+ size: "1.5rem"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: "{surface.300}",
+ disabledBackground: "{surface.400}",
+ hoverBackground: "{surface.300}",
+ checkedBackground: "{primary.200}",
+ checkedHoverBackground: "{primary.200}"
+ },
+ handle: {
+ background: "{surface.0}",
+ disabledBackground: "{surface.200}",
+ hoverBackground: "{surface.0}",
+ checkedBackground: "{primary.color}",
+ checkedHoverBackground: "{primary.color}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ checkedColor: "{primary.contrast.color}",
+ checkedHoverColor: "{primary.contrast.color}"
+ }
+ },
+ dark: {
+ root: {
+ background: "{surface.700}",
+ disabledBackground: "{surface.600}",
+ hoverBackground: "{surface.700}",
+ checkedBackground: "{primary.color}",
+ checkedHoverBackground: "{primary.color}"
+ },
+ handle: {
+ background: "{surface.400}",
+ disabledBackground: "{surface.500}",
+ hoverBackground: "{surface.300}",
+ checkedBackground: "{primary.200}",
+ checkedHoverBackground: "{primary.200}",
+ color: "{surface.800}",
+ hoverColor: "{surface.900}",
+ checkedColor: "{primary.contrast.color}",
+ checkedHoverColor: "{primary.contrast.color}"
+ }
+ }
+ }
+ },
+ tree: {
+ root: {
+ background: "{content.background}",
+ color: "{content.color}",
+ padding: "1rem",
+ gap: "2px",
+ indent: "2rem",
+ transitionDuration: "{transition.duration}"
+ },
+ node: {
+ padding: "0.5rem 0.75rem",
+ borderRadius: "{border.radius.xs}",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ color: "{text.color}",
+ hoverColor: "{text.hover.color}",
+ selectedColor: "{highlight.color}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ },
+ gap: "0.5rem"
+ },
+ nodeIcon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ selectedColor: "{highlight.color}"
+ },
+ nodeToggleButton: {
+ borderRadius: "50%",
+ size: "2rem",
+ hoverBackground: "{content.hover.background}",
+ selectedHoverBackground: "{content.background}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ selectedHoverColor: "{primary.color}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ loadingIcon: {
+ size: "2rem"
+ },
+ filter: {
+ margin: "0 0 0.75rem 0"
+ }
+ },
+ treeselect: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ }
+ },
+ dropdown: {
+ width: "2.5rem",
+ color: "{form.field.icon.color}"
+ },
+ overlay: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}"
+ },
+ tree: {
+ padding: "{list.padding}"
+ },
+ emptyMessage: {
+ padding: "{list.option.padding}"
+ },
+ chip: {
+ borderRadius: "{border.radius.sm}"
+ },
+ clearIcon: {
+ color: "{form.field.icon.color}"
+ }
+ },
+ treetable: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ header: {
+ background: "{content.background}",
+ borderColor: "{treetable.border.color}",
+ color: "{content.color}",
+ borderWidth: "0 0 1px 0",
+ padding: "0.75rem 1rem"
+ },
+ headerCell: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ borderColor: "{treetable.border.color}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ selectedColor: "{highlight.color}",
+ gap: "0.5rem",
+ padding: "0.75rem 1rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ columnTitle: {
+ fontWeight: "600"
+ },
+ row: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ selectedColor: "{highlight.color}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ bodyCell: {
+ borderColor: "{treetable.border.color}",
+ padding: "0.75rem 1rem",
+ gap: "0.5rem"
+ },
+ footerCell: {
+ background: "{content.background}",
+ borderColor: "{treetable.border.color}",
+ color: "{content.color}",
+ padding: "0.75rem 1rem"
+ },
+ columnFooter: {
+ fontWeight: "600"
+ },
+ footer: {
+ background: "{content.background}",
+ borderColor: "{treetable.border.color}",
+ color: "{content.color}",
+ borderWidth: "0 0 1px 0",
+ padding: "0.75rem 1rem"
+ },
+ columnResizerWidth: "0.5rem",
+ resizeIndicator: {
+ width: "1px",
+ color: "{primary.color}"
+ },
+ sortIcon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ size: "0.875rem"
+ },
+ loadingIcon: {
+ size: "2rem"
+ },
+ nodeToggleButton: {
+ hoverBackground: "{content.hover.background}",
+ selectedHoverBackground: "{content.background}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ selectedHoverColor: "{primary.color}",
+ size: "1.75rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ paginatorTop: {
+ borderColor: "{content.border.color}",
+ borderWidth: "0 0 1px 0"
+ },
+ paginatorBottom: {
+ borderColor: "{content.border.color}",
+ borderWidth: "0 0 1px 0"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ borderColor: "{content.border.color}"
+ },
+ bodyCell: {
+ selectedBorderColor: "{primary.100}"
+ }
+ },
+ dark: {
+ root: {
+ borderColor: "{surface.800}"
+ },
+ bodyCell: {
+ selectedBorderColor: "{primary.900}"
+ }
+ }
+ }
+ },
+ toast: {
+ root: {
+ width: "25rem",
+ borderRadius: "{content.border.radius}",
+ borderWidth: "0",
+ transitionDuration: "{transition.duration}"
+ },
+ icon: {
+ size: "1.25rem"
+ },
+ content: {
+ padding: "{overlay.popover.padding}",
+ gap: "0.5rem"
+ },
+ text: {
+ gap: "0.5rem"
+ },
+ summary: {
+ fontWeight: "500",
+ fontSize: "1rem"
+ },
+ detail: {
+ fontWeight: "500",
+ fontSize: "0.875rem"
+ },
+ closeButton: {
+ width: "2rem",
+ height: "2rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ offset: "{focus.ring.offset}"
+ }
+ },
+ closeIcon: {
+ size: "1rem"
+ },
+ colorScheme: {
+ light: {
+ blur: "0",
+ info: {
+ background: "{blue.50}",
+ borderColor: "{blue.200}",
+ color: "{blue.600}",
+ detailColor: "{surface.700}",
+ shadow: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+ closeButton: {
+ hoverBackground: "{blue.100}",
+ focusRing: {
+ color: "{blue.600}",
+ shadow: "none"
+ }
+ }
+ },
+ success: {
+ background: "{green.50}",
+ borderColor: "{green.200}",
+ color: "{green.600}",
+ detailColor: "{surface.700}",
+ shadow: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+ closeButton: {
+ hoverBackground: "{green.100}",
+ focusRing: {
+ color: "{green.600}",
+ shadow: "none"
+ }
+ }
+ },
+ warn: {
+ background: "{yellow.50}",
+ borderColor: "{yellow.200}",
+ color: "{yellow.900}",
+ detailColor: "{surface.700}",
+ shadow: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+ closeButton: {
+ hoverBackground: "{yellow.100}",
+ focusRing: {
+ color: "{yellow.600}",
+ shadow: "none"
+ }
+ }
+ },
+ error: {
+ background: "{red.50}",
+ borderColor: "{red.200}",
+ color: "{red.600}",
+ detailColor: "{surface.700}",
+ shadow: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+ closeButton: {
+ hoverBackground: "{red.100}",
+ focusRing: {
+ color: "{red.600}",
+ shadow: "none"
+ }
+ }
+ },
+ secondary: {
+ background: "{surface.100}",
+ borderColor: "{surface.200}",
+ color: "{surface.600}",
+ detailColor: "{surface.700}",
+ shadow: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+ closeButton: {
+ hoverBackground: "{surface.200}",
+ focusRing: {
+ color: "{surface.600}",
+ shadow: "none"
+ }
+ }
+ },
+ contrast: {
+ background: "{surface.900}",
+ borderColor: "{surface.950}",
+ color: "{surface.50}",
+ detailColor: "{surface.0}",
+ shadow: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+ closeButton: {
+ hoverBackground: "{surface.800}",
+ focusRing: {
+ color: "{surface.50}",
+ shadow: "none"
+ }
+ }
+ }
+ },
+ dark: {
+ blur: "10px",
+ info: {
+ background: "color-mix(in srgb, {blue.500}, transparent 36%)",
+ borderColor: "color-mix(in srgb, {blue.700}, transparent 64%)",
+ color: "{surface.0}",
+ detailColor: "{blue.100}",
+ shadow: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{blue.500}",
+ shadow: "none"
+ }
+ }
+ },
+ success: {
+ background: "color-mix(in srgb, {green.500}, transparent 36%)",
+ borderColor: "color-mix(in srgb, {green.700}, transparent 64%)",
+ color: "{surface.0}",
+ detailColor: "{green.100}",
+ shadow: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{green.500}",
+ shadow: "none"
+ }
+ }
+ },
+ warn: {
+ background: "color-mix(in srgb, {yellow.500}, transparent 36%)",
+ borderColor: "color-mix(in srgb, {yellow.700}, transparent 64%)",
+ color: "{surface.0}",
+ detailColor: "{yellow.50}",
+ shadow: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{yellow.500}",
+ shadow: "none"
+ }
+ }
+ },
+ error: {
+ background: "color-mix(in srgb, {red.500}, transparent 36%)",
+ borderColor: "color-mix(in srgb, {red.700}, transparent 64%)",
+ color: "{surface.0}",
+ detailColor: "{red.100}",
+ shadow: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{red.500}",
+ shadow: "none"
+ }
+ }
+ },
+ secondary: {
+ background: "{surface.800}",
+ borderColor: "{surface.700}",
+ color: "{surface.300}",
+ detailColor: "{surface.0}",
+ shadow: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+ closeButton: {
+ hoverBackground: "{surface.700}",
+ focusRing: {
+ color: "{surface.300}",
+ shadow: "none"
+ }
+ }
+ },
+ contrast: {
+ background: "{surface.0}",
+ borderColor: "{surface.100}",
+ color: "{surface.950}",
+ detailColor: "{surface.950}",
+ shadow: "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+ closeButton: {
+ hoverBackground: "{surface.100}",
+ focusRing: {
+ color: "{surface.950}",
+ shadow: "none"
+ }
+ }
+ }
+ }
+ }
+ },
+ toolbar: {
+ root: {
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}",
+ gap: "0.5rem",
+ padding: "1rem"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: "{surface.100}",
+ borderColor: "{surface.100}"
+ }
+ },
+ dark: {
+ root: {
+ root: {
+ background: "{surface.800}",
+ borderColor: "{surface.800}"
+ }
+ }
+ }
+ }
+ },
+ virtualscroller: {
+ loader: {
+ mask: {
+ background: "{content.background}",
+ color: "{text.muted.color}"
+ },
+ icon: {
+ size: "2rem"
+ }
+ }
+ },
+ tooltip: {
+ root: {
+ background: "{surface.600}",
+ color: "{surface.0}",
+ maxWidth: "12.5rem",
+ gutter: "0.25rem",
+ shadow: "{overlay.popover.shadow}",
+ padding: "0.5rem 0.75rem",
+ borderRadius: "{overlay.popover.border.radius}"
+ }
+ },
+ ripple: {
+ colorScheme: {
+ light: {
+ root: {
+ background: "rgba(0,0,0,0.1)"
+ }
+ },
+ dark: {
+ root: {
+ background: "rgba(255,255,255,0.3)"
+ }
+ }
+ }
+ }
+ }
+});
diff --git a/src/app/shared/assets/data/question_final.md b/src/app/shared/assets/data/question_final.md
new file mode 100644
index 0000000000000000000000000000000000000000..8fb6d35f9b53305f817bd4e7fa26cd12015e4ec1
--- /dev/null
+++ b/src/app/shared/assets/data/question_final.md
@@ -0,0 +1,59 @@
+# Documentation questions_final.json
+
+Le Json est composé d'un dictionnaire global avec trois clés.
+
+## question_topics
+
+Cette clé contient les différentes catégories de questions du quiz (str).
+Actuellement, il y a 4 catégories.
+
+Pour ajouter une catégorie, il suffit de rajouter le nom de la nouvelle catégorie dans la liste. Il faudra également ajouter un élément (int) dans la liste de la clé suivante. Il faudra également créer une nouvelle clé dans le dictionnaire questions, cette clé doit avoir le même nom que l'élément ajouté.
+
+La liste doit avoir le même nombre d'élements que la liste de question_cycle.
+
+## question_cycle
+
+Cette clé contient les cycles de choix de catégorie différent (int).
+Les cartes quiz apparaissent de manière aléatoire mais il doit y avoir une cohérence au niveau des catégories qui apparaissent.
+Ainsi, le premier élément de la liste concerne le premier élément de la liste de question_topics. C'est le taux d'apparition des cartes de la première catégorie sur la somme des élements de la liste question_cycle.
+
+La liste doit avoir le même nombre d'élements que la liste de question_topics.
+
+## questions
+
+Cette clé contient des dictionnaires qui correspondent aux différentes catégories de question_topics.
+
+Dans chacun des dictionnaires, il y a une liste de dictionnaires qui correspondent à chacune des cartes du jeu.
+
+### question_type
+
+Cette clé (str) sert à définir le type de questions de la carte quiz parmi les deux types suivants :
+- QCM
+- QCU
+
+### question
+
+Cette clé (str) contient la question de la carte quiz.
+
+### possible_answers
+
+Cette clé (list) sert à définir les différentes réponses affichées à l'utilisateur. Cela a été pensé pour avoir entre 2 et 4 propositions.
+C'est une liste d'élément string.
+
+Pour les QCM, il faut entrer pour la première proposition "A : " suivi de la proposition, pour la seconde, c'est "B : " suivant de la proposition, etc...
+
+### true_answers
+
+Cette clé (list) sert à définir l'indice (en commançant à 0) de la bonne réponse parmis les réponses possibles définies dans possible_answers.
+
+La liste doit-être composée d'un élément (int) unique si le question_type est QCU et est composée d'un ou plusieurs éléments (int) si le question_type est QCM.
+
+### explanation
+
+Cette clé (str) contient l'explication de la bonne réponse de la carte quiz.
+
+Pour les QCM, il faut rajouter s'il n'y a pas qu'elles sont les bonnes réponses en utilisant les lettres.
+Par exemple, si la deuxième et troisième proposition est juste, il faudra marquer avant l'explication :
+"Les bonnes réponses sont B et C. \n"
+
+De plus, s'il y a des sources dans l'explication, il faut rajouter un "\n" avant le mot "Source".
\ No newline at end of file
diff --git a/src/app/shared/assets/data/questions_final.json b/src/app/shared/assets/data/questions_final.json
new file mode 100644
index 0000000000000000000000000000000000000000..394e9b81eb6217af8c6e0ef96b3ec2b52caa7c8e
--- /dev/null
+++ b/src/app/shared/assets/data/questions_final.json
@@ -0,0 +1,566 @@
+{
+ "question_topics": [
+ "Handicap",
+ "Design",
+ "Accessibilité numérique",
+ "Inclusion numérique"
+ ],
+ "question_cycle": [
+ 1,
+ 1,
+ 1,
+ 1
+ ],
+ "questions": {
+ "Accessibilité numérique": [
+ {
+ "question_type": "QCM",
+ "question": "Pour compenser un handicap moteur, il est possible d'utiliser :",
+ "possible_answers": [
+ "A : une commande vocale",
+ "B : une commande visuelle",
+ "C : un joystick",
+ "D : une souris ergonomique"
+ ],
+ "true_answers": [
+ 0,
+ 1,
+ 2,
+ 3
+ ],
+ "explanation": "Les bonnes réponses sont A, B, C et D. \nLe handicap moteur recouvre l’ensemble des troubles pouvant entraîner une atteinte partielle ou totale de la motricité, notamment des membres supérieurs et/ou inférieurs. "
+ },
+ {
+ "question_type": "QCU",
+ "question": "L'accessibilité numérique est un concept exclusivement français ou francophone.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "L'accessibilité numérique a été pensée dès la création d'Internet.\n \"Le pouvoir du Web est dans son universalité. L’accès pour tous, quel que soit le handicap, est un aspect essentiel.\" \n Tim Berners-Lee, directeur du W3C et inventeur du World Wide Web"
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quel est le montant de la sanction financière appliquée pour un service en ligne qui ne respecte pas les obligations d'accessibilité numérique ?",
+ "possible_answers": [
+ "Jusqu'à 25 000 €",
+ "Jusqu'à 50 000 €",
+ "Jusqu'à 75 000 €"
+ ],
+ "true_answers": [
+ 2
+ ],
+ "explanation": "Pour un service en ligne et par semestre, la loi prévoit 25 000 € si le statut de conformité RGAA n’est pas affiché sur la page d’accueil et, pour le secteur public, 50 000 € pour défaut d'accessibilité."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quel est le nom de l'autorité de contrôle de l'accessibilité numérique en France ?",
+ "possible_answers": [
+ "La CNIL",
+ "La DINUM",
+ "L'ARCOM"
+ ],
+ "true_answers": [
+ 2
+ ],
+ "explanation": "Il s'agit de l'ARCOM (Autorité de régulation de la communication audiovisuelle et numérique) qui est une autorité publique indépendante."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Le RGAA est le Référentiel Général d'Amélioration de l'Accessibilité.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 0
+ ],
+ "explanation": "Il s'agit du Référentiel Général d'Amélioration de l'Accessibilité, qui définit les critères pour qu'un service numérique soit accessible au personnes handicapées.\n Au niveau international, les WCAG (Web content Accessibility Guidelines) sont les recommandations techniques pour l'accessibilité des contenus web."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Les documents bureautiques sont soumis au RGAA ?",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 0
+ ],
+ "explanation": "Les documents sont analysés par les critères 13.3 et 13.4 du RGAA, pour les structures étant soumises aux obligations d'accessibilité."
+ },
+ {
+ "question_type": "QCM",
+ "question": "Une vidéo accessible est une vidéo :",
+ "possible_answers": [
+ "A : pour laquelle l'utilisateur peut stopper et relancer la lecture",
+ "B : avec des sous-titres",
+ "C : avec une traduction en LSF (langue des signes)",
+ "D : avec une audio-description"
+ ],
+ "true_answers": [
+ 0,
+ 1,
+ 2,
+ 3
+ ],
+ "explanation": "Les bonnes réponses sont A, B, C et D. \nLa traduction en LSF peut être difficile à mettre en place, car l'image de l'interprète doit être incrustée dans la vidéo."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Un lecteur d'écran est un logiciel d’assistance technique destiné aux personnes \"empêchées de lire\" (aveugles, malvoyantes, dyslexiques).",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 0
+ ],
+ "explanation": "Un lecteur d'écran retranscrit par synthèse vocale et/ou sur un afficheur braille ce qui est affiché sur l'écran d'un ordinateur ou d'un téléphone, et permet d'interagir avec le système d’exploitation et les applications."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Dans les écoles informatiques, les formations à l'accessibilité numérique sont obligatoires.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "Les formations à l'accessibilité numérique sont proposées aux étudiants en informatique, mais restent optionnelles à ce jour."
+ }
+ ],
+ "Design": [
+ {
+ "question_type": "QCU",
+ "question": "Il y a des couleurs à éviter pour garantir l'accessibilité numérique.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "Le manque d'accessibilité d'une couleur vient d'un problème de contraste entre le texte et l'arrière-plan. Ainsi, un texte de couleur jaune sur un fond orange sera peu ou pas accessible. En revanche, un texte de couleur jaune sur fond noir sera suffisamment contrasté."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Un dark pattern est un mouvement esthétique incitant à concevoir les services numériques en mode sombre.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "Un dark pattern est une technique de design trompeuse qui manipule les utilisateurs pour les pousser à faire des actions non désirées, comme accepter des frais cachés ou s'abonner à des services"
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quelle est la principale raison d'utiliser des icônes dans une interface utilisateur ?",
+ "possible_answers": [
+ "Permettre la personnalisation des interfaces",
+ "Décorer et créer un effet visuel attrayant",
+ "Simplifier la navigation",
+ "Ajouter des informations supplémentaires au texte"
+ ],
+ "true_answers": [
+ 2
+ ],
+ "explanation": "\n Les icônes ne sont pas un élément décoratif mais permettent de renforcer visuellement certaines actions et/ou informations."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quel principe de design assure que les éléments importants d'une interface sont faciles à trouver et à utiliser ?",
+ "possible_answers": [
+ "Le contraste élevé",
+ "La hiérarchie visuelle",
+ "La saturation des couleurs",
+ "L'utilisation de différentes polices"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "La hiérarchisation visuelle est un concept qui permet d'identifier les éléments présents par ordre de priorité et/ou d'importance relative."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quelle approche de design implique de créer des maquettes interactives pour tester des idées avant de les finaliser ?",
+ "possible_answers": [
+ "L'observation",
+ "Le prototypage",
+ "La charte graphique"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "La phase de prototypage permet de tester certaines idées par un exemple incomplet et non définitif de ce que pourra être le produit ou l'objet final."
+ },
+ {
+ "question_type": "QCM",
+ "question": "Quel est le rôle des \"feedbacks\" ?",
+ "possible_answers": [
+ "A : Informer l’utilisateur des réussites et erreurs",
+ "B : Changer certains éléments pour dynamiser l'interface",
+ "C : Simplifier les interactions entre l'utilisateur et le service"
+ ],
+ "true_answers": [
+ 0,
+ 2
+ ],
+ "explanation": "Les bonnes réponses sont A et C. \nUn \"feedback\" est un retour visuel et/ou textuel suite à une action réalisée par l'utilisateur permettant d'informer l'utilisateur sur la conséquence de ses actions."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quel est le but principal du \"design responsive\" ?",
+ "possible_answers": [
+ "Créer des designs qui réagissent aux actions de l'utilisateur",
+ "Assurer que l'interface s'adapte à différentes tailles d'écran et résolutions",
+ "Ajouter des effets visuels interactifs"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "Un design responsive est un design pensé pour s'adapter aux différentes tailles d'écrans et résolutions tels que les mobiles ou ordinateurs."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Que signifie \"le design centré sur l'utilisateur\" ?",
+ "possible_answers": [
+ "Concevoir principalement pour les tendances visuelles actuelles",
+ "Créer des interfaces en fonction des besoins et des retours des utilisateurs finaux",
+ "Focaliser sur les aspects techniques du produit"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "L'approche \"centrée utilisateur\" se focalise sur une conception basée sur une étude des besoins et habitudes de l'utilisateur."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quel type d'animation est généralement recommandé pour améliorer l'expérience de l'utilisateur sans le distraire ?",
+ "possible_answers": [
+ "Des animations lentes",
+ "Aucune animation",
+ "Des animations subtiles avec un retour sur les actions réalisées"
+ ],
+ "true_answers": [
+ 2
+ ],
+ "explanation": "Si des animations (éléments en mouvement, transitions) sont présentes au sein des interfaces, il est recommandé que celles-ci soient discrètes et utiles."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quelle est la différence entre \"design inclusif\" et \"design accessible\" ?",
+ "possible_answers": [
+ "Le design inclusif est destiné à tous, le design accessible se concentre sur les personnes handicapées",
+ "Il n'y a aucune différence, les deux termes sont synonymes"
+ ],
+ "true_answers": [
+ 0
+ ],
+ "explanation": "Si un design accessible cherche à répondre aux besoins de certains handicaps, un design inclusif cherche à proposer une experience optimale pour tous."
+ }
+ ],
+ "Inclusion numérique": [
+ {
+ "question_type": "QCU",
+ "question": "Se faire accompagner par un professionnel pour résoudre une difficulté avec le numérique est payant.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "C'est généralement gratuit. Vous trouverez la liste des structures d'accompagnement sur https://cartographie.societenumerique.gouv.fr/orientation."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Après les maladies ordinaires, les troubles psychologiques sont la 2e cause d'arrêt de travail en France.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 0
+ ],
+ "explanation": "Les troubles psychologiques sont la 2e cause d'arrêt de travail en France : 20% des arrêts maladie en 2022, contre 11% en 2016. Les troubles psychologiques constituent par ailleurs le principal motif des arrêts longs : 28% en 2022 vs 14% en 2016. \nSource : Baromètre annuel Absentéisme (Malakoff Humanis)"
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quelle est la proportion des personnes sans domicile fixe équipées d'un smartphone ?",
+ "possible_answers": [
+ "31%",
+ "51%",
+ "71%"
+ ],
+ "true_answers": [
+ 2
+ ],
+ "explanation": "Source : Solinum, 2019"
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quelle proportion de français souffrent de fatigue informationnelle et se sentent donc débordés, épuisés ou oppressés par un flux constant d'information ?",
+ "possible_answers": [
+ "38%",
+ "54%",
+ "72%"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "54% des Français déclarent souffrir de fatigue informationnelle, et 38% déclarent en souffrir \"beaucoup\". \nSource : Fondation Jean Jaurès, 2022."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quelle est la tranche d'âge la plus concernée par l'illectronisme ?",
+ "possible_answers": [
+ "Plus de 65 ans",
+ "Plus de 70 ans",
+ "Plus de 75 ans"
+ ],
+ "true_answers": [
+ 2
+ ],
+ "explanation": "L'illectronisme est l'équivalent de l'illettrisme dans le domaine du numérique : la « situation d'une personne ne possédant pas les compétences numériques de base ou ne se servant pas d'Internet ». Les plus de 75 ans sont les plus touchés, avec 61,9 % en situation d'illectronisme. \nSources : Insee, 2021, Observatoire des inégalités, 2024"
+ },
+ {
+ "question_type": "QCU",
+ "question": "Il existe un lien entre numérique inclusif et numérique éco-responsable.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 0
+ ],
+ "explanation": "De nombreuses bonnes pratiques d'inclusivité numérique peuvent contribuer à produire un service numérique éco-responsable. Par exemple, le fait d'alléger les contenus pour qu'ils soient lisibles par tous permet de réduire l'impact carbone d'une page web."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Le droit à une alternative au numérique (ou droit au non numériquexiste pour tous les citoyens français aujourd'hui.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "Le droit au non numérique n'existe pas en tant que tel. Néanmoins, le principe d'égalité d'accès aux services publics induit la possibilité d'y accéder quelque soit le canal d'interaction choisi. \nSource : vie-publique.fr, 2024"
+ },
+ {
+ "question_type": "QCU",
+ "question": "Combien de Français présentent des difficultés avec le numérique ?",
+ "possible_answers": [
+ "28%",
+ "48%",
+ "68%"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "En 2022, 48% des Français ont déclaré rencontrer des difficultés avec le numérique, soit 13% de plus qu'en 2020. \nSource : Baromètre du numérique 2023"
+ },
+ {
+ "question_type": "QCU",
+ "question": "La notion d'inclusion est-elle différente de celle d'intégration ?",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 0
+ ],
+ "explanation": "Dans le cadre de la production d'un service, l'intégration consiste à prévoir une déclinaison de ce service adaptée au public à intégrer, alors que l'inclusion consiste à imaginer un service utilisable par tous les publics."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quelle est, en 2024, la proportion de sites web 100% conformes au RGAA ?",
+ "possible_answers": [
+ "0,6%",
+ "16%",
+ "46%"
+ ],
+ "true_answers": [
+ 0
+ ],
+ "explanation": "25 sites web sur 4147 contrôlés par l'Observatoire de l'Accessibilité Numérique sont totalement conformes au RGAA en septembre 2024. 351 (8%) sont partiellement conformes."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Qu'est ce qu'Aidants Connect ?",
+ "possible_answers": [
+ "Une application pour les aidants de personnes dépendantes",
+ "Un outil d'authentification d'un aidant numérique",
+ "Une application d'assistance numérique à distance"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "Aidants Connect est un outil d'authentification d'un aidant numérique dans le cadre d'un accompagnement. Il sécurise l'action éventuelle de l'aidant sur les données de la personne aidée."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Un \"dumb phone\" est un téléphone destiné aux personnes ayant des troubles cognitifs.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "Un \"dumb phone\" est, par opposition à un smartphone, un téléphone doté uniquement de fonctions de base (appels, SMS...), généralement simple à utiliser. Le marché des \"dumb phones\" ou \"feature phones\" est en relative croissance."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Combien de temps faut-il à un utilisateur pour se faire une première impression d'un service numérique ?",
+ "possible_answers": [
+ "50 millisecondes",
+ "5 secondes",
+ "5 minutes"
+ ],
+ "true_answers": [
+ 0
+ ],
+ "explanation": "Source : Taylor & Francis Online, 2006"
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quel est le pourcentage d'utilisateurs qui ne réutiliseront pas un service numérique leur ayant fait vivre une mauvaise expérience ?",
+ "possible_answers": [
+ "28%",
+ "58%",
+ "88%"
+ ],
+ "true_answers": [
+ 2
+ ],
+ "explanation": "Source : \"Why Web Performance Matters\" Gomez, 2011"
+ }
+ ],
+ "Handicap": [
+ {
+ "question_type": "QCU",
+ "question": "Une personne handicapée est forcément en situation d'exclusion numérique.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "Si les services numériques respectent les normes d'accessibilité numérique, les personnes handicapées n'ont pas de difficultés à les consulter. De plus, certains types de handicap n'impliquent pas systématiquement une situation d'exclusion numérique."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Combien de personnes ont-elles un handicap visuel en France ?",
+ "possible_answers": [
+ "700 000",
+ "1,7 millions",
+ "2,7 millions"
+ ],
+ "true_answers": [
+ 1
+ ],
+ "explanation": "Une personne aveugle ou malvoyante naît toutes les 15 heures. En France, il y a 207 000 aveugles et malvoyants profonds et 932 000 malvoyants moyens (ils ne peuvent distinguer un visage à 4 mètres et la lecture de près est impossible). \nSource : Fédération des Aveugles de France"
+ },
+ {
+ "question_type": "QCU",
+ "question": "Combien de personnes ont-elles un handicap auditif en France ?",
+ "possible_answers": [
+ "Environ 2 millions",
+ "Environ 4 millions",
+ "Environ 5 millions"
+ ],
+ "true_answers": [
+ 2
+ ],
+ "explanation": "En France, 5 182 000 personnes ont un handicap auditif, dont 303 000 souffrent d'une déficience auditive profonde ou totale. \nSource : Etude Le handicap auditif en France (DREES)"
+ },
+ {
+ "question_type": "QCU",
+ "question": "L'autisme est un handicap cognitif, au même titre que l'hyperactivité.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 0
+ ],
+ "explanation": "Un trouble cognitif correspond à une altération d’une ou plusieurs fonctions cognitives pour une raison neurologique, psychiatrique, médicamenteuse ou génétique. On peut citer par exemple :les TDA (troubles de déficit de l’attention), l'hyperactivité, les troubles DYS, l'autisme, les troubles de la mémoire ou la trisomie 21. \nSource : Haute Autorité de Santé."
+ },
+ {
+ "question_type": "QCU",
+ "question": "La schizophrénie est un handicap psychique.",
+ "possible_answers": [
+ "Vrai",
+ "Faux"
+ ],
+ "true_answers": [
+ 0
+ ],
+ "explanation": "Le handicap psychique est la conséquence d'une maladie psychique issue de changements qui affectent la pensée, l'humeur ou le comportement d'une personne, et qui lui causent de la détresse ou de la souffrance. Il n'affecte pas directement les capacités intellectuelles. On peut citer par exemple : les phobies, les addictions, la dépressions, les TOC (troubles obsessionnels compulsifs), les troubles bipolaires ou la schizophrénie. \nSource : Agefiph."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quelle est la proportion de personnes daltoniennes en France ?",
+ "possible_answers": [
+ "2% chez les hommes et 1 % chez les femmes",
+ "5% chez les hommes et 2% chez les femmes",
+ "8% chez les hommes et 0,45% chez les femmes"
+ ],
+ "true_answers": [
+ 2
+ ],
+ "explanation": "8% chez les hommes et 0,45% chez les femmes"
+ },
+ {
+ "question_type": "QCU",
+ "question": "Combien de personnes sont-elles en situation de handicap en France ?",
+ "possible_answers": [
+ "2 millions",
+ "5 millions",
+ "12 millions",
+ "17 millions"
+ ],
+ "true_answers": [
+ 2
+ ],
+ "explanation": "On peut même aller jusqu'à 20 millions en comptant les seniors."
+ },
+ {
+ "question_type": "QCU",
+ "question": "Quelle est la proportion des handicaps invisibles dans la population française en situation de handicap ?",
+ "possible_answers": [
+ "40%",
+ "60%",
+ "80%"
+ ],
+ "true_answers": [
+ 2
+ ],
+ "explanation": "Soit près de 10 millions de personnes. On peut notamment citer parmi les handicaps invisibles : les handicaps mentaux, les handicaps psychiques, les maladies invalidantes (asthme, allergies, diabète..), les troubles musculosquelettiques (lombalgies, tendinites..), ou les troubles DYS."
+ },
+ {
+ "question_type": "QCM",
+ "question": "Parmi les éléments suivants, lesquels sont des troubles spécifiques du langage et des apprentissages (ou troubles DYS) ?",
+ "possible_answers": [
+ "A : La dysacousie",
+ "B : La dyspraxie",
+ "C : La dyslexie"
+ ],
+ "true_answers": [
+ 1,
+ 2
+ ],
+ "explanation": "Les bonnes réponses sont B et C. \nLa dyspraxie est le trouble de la capacité à exécuter des mouvements déterminés. La dyslexie est le trouble de la lecture. On peut également citer : la dyscalculie : trouble dans les apprentissages numériques; la dysgraphie : difficulté à accomplir les gestes de l'écriture et du dessin; la dysorthographie : également appelé trouble de l'acquisition de l'expression écrite; la dysphasie : trouble lié au développement du langage oral."
+ }
+ ]
+ }
+}
diff --git a/src/app/shared/global-styles.css b/src/app/shared/global-styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..5856881905172dab3f0229a6d1d7e7059f57f790
--- /dev/null
+++ b/src/app/shared/global-styles.css
@@ -0,0 +1,21 @@
+:root {
+ width: 100%;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: Lato, Helvetica, sans-serif;
+}
+
+html,
+body,
+my-app {
+ height: 100%;
+ height: 100vh;
+}
+
+.subtext {
+ color: var(--text-secondary-color);
+}
diff --git a/src/app/shared/services/progress-service.ts b/src/app/shared/services/progress-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..77b8c087caf696f737981774fe8b87343f353ced
--- /dev/null
+++ b/src/app/shared/services/progress-service.ts
@@ -0,0 +1,105 @@
+import { computed, inject, Injectable, signal } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { Answer } from "../types/enums";
+import { DataService } from "./quiz-service";
+
+@Injectable({
+ providedIn: 'root'
+})
+
+export class ProgressService {
+ /* Service qui gère la navigation dans l'application */
+ router = inject(Router);
+ route = inject(ActivatedRoute);
+ dataService = inject(DataService);
+ score = signal(0);
+ questionNumber = signal(0);
+ currentAnswer = signal<number[]>([]);
+ currentAnswerValidity = computed(() => this.verifyAnswer())
+ hasEnded = signal(false);
+ answered = signal(false);
+
+ goToBegining() {
+ /* Revient à la page du début, sans oublienpmr les questions déjà posées */
+ this.score.set(0);
+ this.questionNumber.set(0);
+ this.hasEnded.set(false);
+ this.router.navigate(["quiz", "accueil"], { onSameUrlNavigation: 'ignore' });
+ }
+
+ start(nQuestions: number) {
+ /* Lance une session de quiz avec le nombre de questions sélectionnées sur la page d'accueil */
+ this.score.set(0);
+ this.questionNumber.set(0);
+ this.hasEnded.set(false);
+ this.dataService.startQuiz(nQuestions);
+ this.goToNext();
+ }
+
+ goToEnd() {
+ /* Envoie sur la page de fin */
+ this.hasEnded.set(true);
+ this.router.navigate(["quiz", "fin"], { replaceUrl: true });
+ }
+
+ goToNext() {
+ /* Si la session de quiz n'est pas finie, envoie vers la question suivante */
+ if (!this.dataService.isFinished()) {
+ this.dataService.getNewQuestion();
+ this.questionNumber.update(n => n + 1);
+ this.answered.set(false);
+ this.router.navigate(["quiz", this.questionNumber().toString()], {
+ queryParams: { thème: this.dataService.currentTopic(), thème_id: this.dataService.currentQuestionId(), répondu: "faux" },
+ replaceUrl: this.questionNumber() > 0,
+ });
+ } else {
+ this.goToEnd();
+ }
+ }
+
+ answer() {
+ if (this.currentAnswerValidity() === Answer.Empty) {
+ // Ne passe pas à la question suivante si aucune réponse n'a été sélectionnée
+ return;
+ }
+ if (this.currentAnswerValidity() === Answer.True) {
+ this.score.update(s => s + 1);
+ }
+ this.answered.set(true);
+ this.router.navigate(
+ [],
+ {
+ relativeTo: this.route,
+ queryParams: { répondu: "vrai" },
+ queryParamsHandling: 'merge', // remove to replace all query params by provided
+ replaceUrl: true,
+ }
+ );
+ }
+
+ /**
+ * Vérifie la réponse actuelle par rapport aux réponses correctes.
+ *
+ * Cette méthode récupère les réponses correctes du segment de quiz actuel et les compare
+ * avec les réponses sélectionnées par l'utilisateur. Elle retourne une valeur de l'énumération `Answer`
+ * indiquant si la réponse est correcte, incorrecte ou vide.
+ *
+ * @returns {Answer} - Le résultat de la vérification de la réponse :
+ * - `Answer.Empty` si aucune réponse n'a été sélectionnée.
+ * - `Answer.True` si les réponses sélectionnées correspondent aux réponses correctes.
+ * - `Answer.False` si les réponses sélectionnées ne correspondent pas aux réponses correctes.
+ */
+
+ private verifyAnswer(): Answer {
+ const realAnswers = this.dataService.currentSegment()?.true_answers as number[];
+ if (this.currentAnswer().length === 0) {
+ return Answer.Empty;
+ }
+ if (this.currentAnswer().sort().toString() == realAnswers.sort().toString()) {
+ return Answer.True;
+ } else {
+ return Answer.False;
+ }
+ }
+
+}
diff --git a/src/app/shared/services/quiz-service.ts b/src/app/shared/services/quiz-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b7318fe9c1bb60698c03baf622cc1ffe48156c3
--- /dev/null
+++ b/src/app/shared/services/quiz-service.ts
@@ -0,0 +1,137 @@
+import { Injectable, signal } from "@angular/core";
+import { quizData } from "../../app.component";
+import { QuizSegment } from "../types/interfaces";
+
+class RandomizedQuestionIndexQueue {
+ /* Implémente un tirage aléatoire sans remise des numéros de questions dans un thème
+ * https://gist.github.com/4skinSkywalker/f10939e0b070fe1815933730670177df
+ */
+ private remainingIndices;
+ private intialSize;
+ private currentSize;
+ constructor(size: number) {
+ this.intialSize = size;
+ this.currentSize = size;
+ this.remainingIndices = [...Array(size).keys()];
+ }
+
+ private randomId() {
+ // conversion en entier avec la comparaison BitWise OR
+ return Math.random() * (this.currentSize - 1) | 0
+ }
+
+ isEmpty() {
+ return (this.currentSize < 1)
+ }
+
+ replenish() {
+ // Réinitialise la liste des indices restants
+ this.remainingIndices = [...Array(this.intialSize).keys()];
+ this.currentSize = this.intialSize;
+ }
+
+ dequeueIndex() {
+ // Tire un index aléatoire et le retire de la liste des indices restants
+ if (this.isEmpty()) {
+ this.replenish()
+ }
+ const id = this.randomId();
+ const index = this.remainingIndices[id];
+ this.remainingIndices.splice(id, 1);
+ this.currentSize--;
+ return index;
+ }
+}
+
+
+class TopicsQueue {
+ /* Implémente la queue des thèmes à effectuer selon le nombre de questions et le cycle de thème à aborder */
+ private possibleTopics;
+ private topicsCycle;
+ private numberOfQuestionsPerCycle = 1; // valeur par défaut
+ private topics: string[] = []; // queue qui va permettre de tirer les topics
+
+ constructor(possibleTopics: string[] = [], topicsCycle: number[] = []) {
+ this.possibleTopics = possibleTopics;
+ this.topicsCycle = topicsCycle;
+ }
+
+ initialize(nQuestions: number) {
+ /* Initialise la queue pour une session de quiz */
+ this.numberOfQuestionsPerCycle = nQuestions;
+ this.topics = [];
+ this.topicsCycle.forEach((n, i) => { // n = occurrence, i = index
+ this.topics.push(...Array(n * this.numberOfQuestionsPerCycle).fill(this.possibleTopics[i]));
+ });
+ }
+
+ isEmpty() {
+ return this.topics.length < 1;
+ }
+
+ deqeue() {
+ return this.topics.shift();
+ }
+
+ getPossibleTopics() {
+ return this.possibleTopics;
+ }
+
+ getNumberOfQuestions() {
+ return this.topicsCycle.length * this.numberOfQuestionsPerCycle;
+ }
+}
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DataService {
+ /* Service qui fournit les données relatives à la question en cours de la session de quiz
+ * Les questions sont tirées aléatoirement sans remise
+ * Lorsqu'il n'y a plus de questions non faites, la liste de questions est régénèrée
+ */
+ quizSegmentTopicsQueue;
+ quizSegments = quizData["questions"]; // tous les segments de quiz possibles, groupés par thème
+ randomizedQuestionIndexQueuePool: Record<string, RandomizedQuestionIndexQueue> = {}
+ questionNumber = signal(0);
+ hasEnded = signal(false);
+ numberOfQuestions = signal(0);
+ currentSegment = signal<QuizSegment | undefined>(undefined);
+ currentTopic = signal("");
+ currentQuestionId = signal(-1);
+
+ constructor() {
+ this.quizSegmentTopicsQueue = new TopicsQueue(quizData["question_topics"], quizData["question_cycle"]);
+ for (const questionTopic of this.quizSegmentTopicsQueue.getPossibleTopics()) {
+ const rq = new RandomizedQuestionIndexQueue(this.quizSegments[questionTopic].length);
+ this.randomizedQuestionIndexQueuePool[questionTopic] = rq;
+ }
+ }
+
+ startQuiz(nQuestions: number) {
+ // Initialise une nouvelle session de quiz
+ this.questionNumber.set(0);
+ this.hasEnded.set(false);
+ this.quizSegmentTopicsQueue.initialize(nQuestions);
+ this.numberOfQuestions.set(this.quizSegmentTopicsQueue.getNumberOfQuestions());
+ }
+
+ getNewQuestion() {
+ // Récupère une nouvelle question aléatoire
+ const questionTopic = this.quizSegmentTopicsQueue.deqeue();
+ const questionId = this.randomizedQuestionIndexQueuePool[questionTopic!].dequeueIndex();
+ this.currentTopic.set(questionTopic!);
+ this.currentQuestionId.set(questionId);
+ this.currentSegment.set(this.quizSegments[questionTopic!][questionId]);
+ }
+
+ isFinished() {
+ // Vérifie si toutes les questions ont été posées
+ return this.quizSegmentTopicsQueue.isEmpty();
+ }
+
+ getNumberOfTopics() {
+ // Retourne le nombre de catégories possibles
+ return this.quizSegmentTopicsQueue.getPossibleTopics().length;
+ }
+}
diff --git a/src/app/shared/types/enums.ts b/src/app/shared/types/enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..83ccb01b9fa44c111a846d274a7adfdfe617132d
--- /dev/null
+++ b/src/app/shared/types/enums.ts
@@ -0,0 +1,5 @@
+export enum Answer {
+ True,
+ False,
+ Empty
+}
diff --git a/src/app/shared/types/interfaces.ts b/src/app/shared/types/interfaces.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a0c199ae828d9ad7a4915c2ddaffdf86f004eeb3
--- /dev/null
+++ b/src/app/shared/types/interfaces.ts
@@ -0,0 +1,13 @@
+export interface QuizData {
+ question_topics: string[],
+ question_cycle: number[],
+ questions: Record<string, QuizSegment[]>,
+}
+
+export interface QuizSegment {
+ question_type: string,
+ question: string,
+ possible_answers: string[] | never[],
+ true_answers: number[],
+ explanation: string,
+}
diff --git a/src/app/views/header/header.component.css b/src/app/views/header/header.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..9ed86a185d544656c40ec75044c2c35039a8e7cd
--- /dev/null
+++ b/src/app/views/header/header.component.css
@@ -0,0 +1,28 @@
+:host {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: start;
+ height: 100%;
+ width: 100%;
+ box-shadow: rgba(99, 99, 99, 0.16) 0px 10px 20px;
+}
+
+.title {
+ font-weight: normal;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ padding: 2px;
+ font-size: 16px;
+ color: var(--p-gray-700);
+}
+
+a {
+ text-decoration: none;
+}
+
+.logo{
+ width: 105px;
+ padding: 1px 1px 0px 53px;
+ color: #696969;
+}
diff --git a/src/app/views/header/header.component.html b/src/app/views/header/header.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..34173af214ba411d38c7e742919a605eed5e79b8
--- /dev/null
+++ b/src/app/views/header/header.component.html
@@ -0,0 +1,15 @@
+<a href="https://inclusivite-resin.grandlyon.com/" target="_blank" rel="noopener noreferrer" class="intlogo">
+ <p-image
+ src="images/resin.svg"
+ alt="Image de présentation du quiz"
+ class="logo"
+ [width] = "'116px'"
+ />
+</a>
+
+<div class="header-divider">
+ <p-divider layout="vertical" />
+</div>
+<a href="quiz/accueil">
+ <h1 class="title">Quiz<br>Inclusif, le jeu</h1>
+</a>
diff --git a/src/app/views/header/header.component.ts b/src/app/views/header/header.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1d8111dc0437047446bf24ab058be103b2c46f33
--- /dev/null
+++ b/src/app/views/header/header.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { DividerModule } from 'primeng/divider';
+import { ImageModule } from 'primeng/image';
+
+@Component({
+ selector: 'app-header',
+ imports: [ImageModule, DividerModule],
+ templateUrl: './header.component.html',
+ styleUrl: './header.component.css'
+})
+export class HeaderComponent {
+
+}
diff --git a/src/app/views/quiz/quiz-card/answer-box/answer-box.component.css b/src/app/views/quiz/quiz-card/answer-box/answer-box.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..ea150ccf57df384254bfe1521b118543af715193
--- /dev/null
+++ b/src/app/views/quiz/quiz-card/answer-box/answer-box.component.css
@@ -0,0 +1,68 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ margin-top: 5%;
+}
+
+.nb-choice {
+ color: #696969;
+ margin-bottom: 25px;
+}
+
+.answer-box {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.answer-choice {
+ display: flex;
+ align-content: center;
+ width: 100%;
+ border: 1px solid black;
+ border-radius: 8px;
+ padding: 4px;
+ margin: 0 auto;
+ align-items: center;
+ word-wrap: break-word;
+ color: #333333;
+}
+
+.explanation {
+ font-size: 16px;
+ white-space : pre-line;
+ color: #333333;
+}
+
+.choice-text {
+ font-size: 16px;
+}
+
+i {
+ font-size: 24px;
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.correct {
+ border-color: var(--p-green-500);
+}
+.correct i {
+ color: var(--p-green-500);
+}
+
+.wrong {
+ border-color: var(--p-red-500);
+}
+.wrong i {
+ color: var(--p-red-500);
+}
+
+.neutral {
+ border-color: var(--p-gray-500);
+}
+.neutral i {
+ color: var(--p-gray-500);
+}
diff --git a/src/app/views/quiz/quiz-card/answer-box/answer-box.component.html b/src/app/views/quiz/quiz-card/answer-box/answer-box.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..45a74be4f6823aa614da900ada1e9116700254ae
--- /dev/null
+++ b/src/app/views/quiz/quiz-card/answer-box/answer-box.component.html
@@ -0,0 +1,33 @@
+@if (progressService.currentAnswerValidity()){
+ <p class="nb-choice">Mauvaise réponse</p>
+}
+@else {
+ <p class="nb-choice">Bonne réponse</p>
+}
+<div class="answer-box">
+ @for (choice of quiz_segment.possible_answers; track $index) {
+ @if (quiz_segment.true_answers.includes($index)) {
+ <label class="answer-choice correct">
+ <i class="pi pi-check-circle"></i>
+ <p class="choice-text">
+ {{ choice }}
+ </p>
+ </label>
+ } @else if (progressService.currentAnswer().includes($index)) {
+ <label class="answer-choice wrong">
+ <i class="pi pi-times-circle"></i>
+ <p class="choice-text">
+ {{ choice }}
+ </p>
+ </label>
+ } @else {
+ <label class="answer-choice neutral">
+ <i class="pi pi-circle"></i>
+ <p class="choice-text">
+ {{ choice }}
+ </p>
+ </label>
+ }
+ }
+ <span class="explanation">{{ quiz_segment.explanation }}</span>
+</div>
diff --git a/src/app/views/quiz/quiz-card/answer-box/answer-box.component.ts b/src/app/views/quiz/quiz-card/answer-box/answer-box.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d7bd5d98eb47a8981fa6d9e3f3c549edade05bdb
--- /dev/null
+++ b/src/app/views/quiz/quiz-card/answer-box/answer-box.component.ts
@@ -0,0 +1,19 @@
+import { Component, inject } from "@angular/core";
+import { DataService } from "../../../../shared/services/quiz-service";
+import { ProgressService } from "../../../../shared/services/progress-service";
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { CheckboxModule } from 'primeng/checkbox';
+import { ReactiveFormsModule } from "@angular/forms";
+
+@Component({
+ selector: 'app-answer-box',
+ imports: [ReactiveFormsModule, RadioButtonModule, CheckboxModule],
+ templateUrl: './answer-box.component.html',
+ styleUrl: './answer-box.component.css'
+})
+export class AnswerBoxComponent {
+ dataService = inject(DataService);
+ progressService = inject(ProgressService);
+ quiz_segment = this.dataService.currentSegment()!;
+}
+
diff --git a/src/app/views/quiz/quiz-card/choice-box/choice-box.component.css b/src/app/views/quiz/quiz-card/choice-box/choice-box.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..3a0f64e64fdf864e7a25c3e93a496b6e5facdb8a
--- /dev/null
+++ b/src/app/views/quiz/quiz-card/choice-box/choice-box.component.css
@@ -0,0 +1,115 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ margin-top: 5%;
+}
+
+.nb-choice {
+ color: #696969;
+ margin-bottom: 25px;
+}
+
+.answer-box {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.answer-choice {
+ display: flex;
+ align-content: center;
+ width: 100%;
+ border: 1px solid #929292;
+ border-radius: 8px;
+ padding: 4px;
+ margin: 0 auto;
+ align-items: center;
+ word-wrap: break-word;
+ color: #333333;
+}
+
+.radio{
+ padding-left: 15px;
+ padding-right: 15px;
+ --p-radiobutton-icon-vertical-align: middle;
+ --p-radiobutton-vertical-align: middle;
+ --p-radiobutton-box-vertical-align: middle;
+ --p-radiobutton-icon-align-items: center;
+ --p-radiobutton-box-align-items: center;
+ --p-radiobutton-align-items: center;
+
+ --p-radiobutton-display: inline-block;
+ --p-radiobutton-height: 24px;
+ --p-radiobutton-width: 24px;
+ --p-radiobutton-icon-size: 16px;
+ --p-radiobutton-icon-checked-color:#333333;
+ --p-radiobutton-icon-checked-hover-color:#333333;
+ --p-radiobutton-border-color:#333333;
+ --p-radiobutton-hover-border-color:#333333;
+ --p-radiobutton-focus-border-color:#333333;
+ --p-radiobutton-checked-border-color:#333333;
+ --p-radiobutton-checked-hover-border-color:#333333;
+}
+
+.check{
+ padding-left: 15px;
+ padding-right: 15px;
+ --p-checkbox-border-color:#333333;
+ --p-checkbox-checked-focus-border-color:#333333;
+ --p-checkbox-checked-hover-border-color:#333333;
+ --p-checkbox-checked-border-color:#333333;
+ --p-checkbox-hover-border-color:#333333;
+ --p-checkbox-border-color:#333333;
+ --p-checkbox-checked-background:#333333;
+ --p-checkbox-checked-hover-background:#333333;
+}
+
+.answer-choice:hover{
+ border: 1px solid #333333;
+ box-shadow:
+ rgba(0, 0, 0, 0.1) 0px 12px 24px 0px;
+}
+
+.answer-choice:has(:checked) {
+ border: 1px solid #0073e9;
+ box-shadow:
+ rgba(0, 0, 0, 0.1) 0px 12px 24px 0px;
+}
+
+.answer-choice:has(:focus) {
+ border: 1px solid #0073e9;
+ box-shadow:
+ rgba(0, 0, 0, 0.1) 0px 12px 24px 0px;
+}
+
+.choice-text {
+ display: inline-block;
+ vertical-align: middle;
+ align-items: middle;
+ text-align: middle;
+ font-size: 16px;
+}
+
+.div-error{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ align-content: center;
+ vertical-align: middle;
+ color:#333333;
+ margin-top: 5px;
+}
+
+.bouton-error{
+ --p-button-padding-x: 64px;
+ --p-button-primary-active-background: #ff5d5c;
+ --p-button-primary-hover-background: #cd2524;
+ --p-button-primary-active-border-color: #ff5d5c;
+ --p-button-primary-hover-border-color: #cd2524;
+}
+
+.p-error{
+ --p-dialog-colo:#333333;
+}
\ No newline at end of file
diff --git a/src/app/views/quiz/quiz-card/choice-box/choice-box.component.html b/src/app/views/quiz/quiz-card/choice-box/choice-box.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..694afd7210af517f4763fe720fae7c106fbc3084
--- /dev/null
+++ b/src/app/views/quiz/quiz-card/choice-box/choice-box.component.html
@@ -0,0 +1,33 @@
+@if (quiz_segment()?.question_type === "QCM") {
+ <p class="nb-choice">Plusieurs réponses possibles</p>
+} @else if (quiz_segment()?.question_type === "QCU") {
+ <p class="nb-choice">Une seule réponse possible</p>
+}
+<form [formGroup]="answerForm">
+ <div class="answer-box">
+ @for (choice of quiz_segment()?.possible_answers; track $index) {
+ <label class="answer-choice">
+ @if (quiz_segment()?.question_type === "QCM") {
+ <p-checkbox [value]="$index" [formControlName]="'QCM'" size="large" class = "check" />
+ } @else if (quiz_segment()?.question_type === "QCU") {
+ <p-radiobutton [value]="$index" [formControlName]="'QCU'" class="radio"/>
+ }
+ <p class="choice-text">
+ {{ choice }}
+ </p>
+ </label>
+ }
+ </div>
+</form>
+
+<p-dialog
+ header="Veuillez choisir au moins une option."
+ [modal]="false"
+ [closable]="false"
+ [(visible)]="dialogVisible"
+ class="p-error"
+>
+ <div class="div-error">
+ <p-button label="Ok" (click)="dialogVisible = false" class ="bouton-error"/>
+ </div>
+</p-dialog>
diff --git a/src/app/views/quiz/quiz-card/choice-box/choice-box.component.ts b/src/app/views/quiz/quiz-card/choice-box/choice-box.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eae0a992d3c5fd5dc490715344842385c22e93c9
--- /dev/null
+++ b/src/app/views/quiz/quiz-card/choice-box/choice-box.component.ts
@@ -0,0 +1,50 @@
+import { Component, computed, inject, Input } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { CheckboxModule } from 'primeng/checkbox';
+import { ProgressService } from '../../../../shared/services/progress-service';
+import { DataService } from '../../../../shared/services/quiz-service';
+import { DialogModule } from 'primeng/dialog';
+import { ButtonModule } from 'primeng/button';
+import { Answer } from '../../../../shared/types/enums';
+
+@Component({
+ selector: 'app-choice-box',
+ imports: [ReactiveFormsModule, RadioButtonModule, CheckboxModule, DialogModule, ButtonModule],
+ templateUrl: './choice-box.component.html',
+ styleUrl: './choice-box.component.css'
+})
+export class ChoiceBoxComponent {
+ @Input() answered: boolean | undefined;
+ answerForm = new FormGroup({});
+ progressService = inject(ProgressService);
+ dataService = inject(DataService);
+ quiz_segment = this.dataService.currentSegment;
+ answerIsEmpty = computed(() => this.progressService.currentAnswerValidity() === Answer.Empty);
+ dialogVisible = false;
+ ngOnInit() {
+ this.answerForm!.addControl(this.quiz_segment()!.question_type, new FormControl(''))
+ this.answerForm!.reset();
+ }
+
+ tryToAnswer() {
+ if (this.quiz_segment()?.question_type === "QCM") {
+ const key = this.answerForm.get('QCM')!.value;
+ if (key != null) {
+ this.progressService.currentAnswer.set([key]);
+ } else {
+ this.progressService.currentAnswer.set([]);
+ }
+ }
+ else if (this.quiz_segment()?.question_type === "QCU") {
+ const key = this.answerForm.get('QCU')!.value;
+ if (typeof key === "number") {
+ this.progressService.currentAnswer.set([key]);
+ } else {
+ this.progressService.currentAnswer.set([]);
+ }
+ }
+ this.progressService.answer();
+ this.dialogVisible = this.answerIsEmpty();
+ }
+}
diff --git a/src/app/views/quiz/quiz-card/quiz-card.component.css b/src/app/views/quiz/quiz-card/quiz-card.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..564f45f305735081f02d7bd09b16b9df90d58d44
--- /dev/null
+++ b/src/app/views/quiz/quiz-card/quiz-card.component.css
@@ -0,0 +1,25 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 600px;
+ margin: 0 auto;
+}
+
+h1 {
+ color: #333333;
+}
+.theme {
+ justify-self: start;
+ background-color: var(--p-primary-100);
+ color: var(--p-primary-500);
+ width: fit-content;
+ padding: 4px;
+ border-radius: 4px;
+ margin-bottom: 8px;
+}
+
+.question {
+ text-align: left;
+ font-size: 24px;
+}
diff --git a/src/app/views/quiz/quiz-card/quiz-card.component.html b/src/app/views/quiz/quiz-card/quiz-card.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..13b6382ee6386737d6cd26f070aa9804ee21c4ba
--- /dev/null
+++ b/src/app/views/quiz/quiz-card/quiz-card.component.html
@@ -0,0 +1,9 @@
+<div class="theme">
+ <span> {{ dataService.currentTopic() }}</span>
+</div>
+<h1 class="question">{{ quiz_segment()?.question }}</h1>
+@if (!progressService.answered()) {
+ <app-choice-box></app-choice-box>
+} @else {
+ <app-answer-box></app-answer-box>
+}
diff --git a/src/app/views/quiz/quiz-card/quiz-card.component.ts b/src/app/views/quiz/quiz-card/quiz-card.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bad2800b344b5f8f6f9846cf9d325cd5a52e3949
--- /dev/null
+++ b/src/app/views/quiz/quiz-card/quiz-card.component.ts
@@ -0,0 +1,21 @@
+import { Component, inject, viewChild } from '@angular/core';
+import { ChoiceBoxComponent } from './choice-box/choice-box.component';
+import { ProgressService } from '../../../shared/services/progress-service';
+import { DataService } from '../../../shared/services/quiz-service';
+import { Answer } from '../../../shared/types/enums';
+import { AnswerBoxComponent } from "./answer-box/answer-box.component";
+
+@Component({
+ selector: 'app-quiz-card',
+ imports: [ChoiceBoxComponent, AnswerBoxComponent],
+ templateUrl: './quiz-card.component.html',
+ styleUrl: './quiz-card.component.css'
+})
+export class QuizCardComponent {
+ dataService = inject(DataService);
+ progressService = inject(ProgressService);
+ answerType = Answer;
+ quiz_segment = this.dataService.currentSegment;
+ choiceBox = viewChild(ChoiceBoxComponent);
+}
+
diff --git a/src/app/views/quiz/quiz-endpage/quiz-endpage.component.css b/src/app/views/quiz/quiz-endpage/quiz-endpage.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..635f3273e880755427d0327f2bbec6b4df49a24f
--- /dev/null
+++ b/src/app/views/quiz/quiz-endpage/quiz-endpage.component.css
@@ -0,0 +1,77 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ margin: auto;
+}
+
+.header{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding-top: 70px;
+}
+
+p-image {
+ padding-top: 50px;
+}
+
+span{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding-top: 50px;
+}
+
+.lower-section{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: auto;
+ position: relative;
+ bottom:0em;
+}
+
+.start-div {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+}
+
+p-divider{
+ padding-bottom: 20px;
+ width:80%;
+}
+
+.start-again{
+ margin-left: 16px;
+ margin-right: 16px;
+ --p-button-primary-active-background: #ff5d5c;
+ --p-button-primary-hover-background: #cd2524;
+ --p-button-primary-active-border-color: #ff5d5c;
+ --p-button-primary-hover-border-color: #cd2524;
+}
+
+.game{
+ margin-left: 16px;
+ margin-right: 16px;
+ --p-button-primary-active-background: #f4f4f4;
+ --p-button-primary-hover-background: #e9e9e9;
+}
+
+
+h1, h2, span, p {
+ color: #333333;
+}
+
+p {
+ font-size: 24px;
+ margin-top: 50px;
+}
\ No newline at end of file
diff --git a/src/app/views/quiz/quiz-endpage/quiz-endpage.component.html b/src/app/views/quiz/quiz-endpage/quiz-endpage.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..f65f1e2e243f8cedeb71bc0ad16b4d36e49d07a5
--- /dev/null
+++ b/src/app/views/quiz/quiz-endpage/quiz-endpage.component.html
@@ -0,0 +1,70 @@
+<div class="header">
+ <h1>Le quiz est fini !</h1>
+ @if (2*progressService.score()>=progressService.questionNumber()){
+ <h2>
+ Bravo à vous ! Votre score est de {{ progressService.score() }} /
+ {{ progressService.questionNumber() }}
+ </h2>
+ }
+ @else {
+ <h2>
+ Votre score est de {{ progressService.score() }} /
+ {{ progressService.questionNumber() }}
+ </h2>
+ }
+ @if (progressService.score()/rapport < 1){
+ <p>
+ Votre grade est E
+ </p>
+ }
+ @else if (progressService.score()/rapport < 2) {
+ <p>
+ Votre grade est D
+ </p>
+ }
+ @else if (progressService.score()/rapport < 3) {
+ <p>
+ Votre grade est C
+ </p>
+ }
+ @else if (progressService.score()/rapport < 4) {
+ <p>
+ Votre grade est B
+ </p>
+ }
+ @else {
+ <p>
+ Votre grade est A
+ </p>
+ }
+ <p-image
+ src="images/quiz_endpage_image.png"
+ alt="Image de décoration de la page finale du quiz"
+ [imageStyle]="{ objectFit: 'contain' }"
+ width="100%"
+ class = "image-outro"
+ />
+</div>
+
+
+<span>
+ Vous pouvez désormais passer à « Inclusif, le jeu », ou lancer une autre série de questions.
+</span>
+
+<div class="lower-section">
+ <p-divider/>
+ <div class="start-div">
+ <p-button
+ class = "game"
+ (click)="progressService.goToBegining()"
+ severity="secondary"
+ variant="outlined">
+ Voir Inclusif, le jeu
+ </p-button>
+ <p-button
+ class = "start-again"
+ (click)="progressService.goToBegining()">
+ Relancer une série
+ </p-button>
+ </div>
+</div>
diff --git a/src/app/views/quiz/quiz-endpage/quiz-endpage.component.ts b/src/app/views/quiz/quiz-endpage/quiz-endpage.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..85dbd8f1ec89e431cb1f530a69a05a4af5e7b99b
--- /dev/null
+++ b/src/app/views/quiz/quiz-endpage/quiz-endpage.component.ts
@@ -0,0 +1,17 @@
+import { Component, inject, viewChild } from '@angular/core';
+import { ProgressService } from '../../../shared/services/progress-service';
+import { ButtonModule } from 'primeng/button';
+import { Divider } from 'primeng/divider';
+import { ImageModule } from 'primeng/image';
+
+@Component({
+ selector: 'app-quiz-endpage',
+ imports: [ButtonModule, Divider, ImageModule],
+ templateUrl: './quiz-endpage.component.html',
+ styleUrl: './quiz-endpage.component.css'
+})
+export class QuizEndpageComponent {
+ progressService = inject(ProgressService);
+ number_questions = this.progressService.questionNumber();
+ rapport = this.number_questions/4;
+}
diff --git a/src/app/views/quiz/quiz-homepage/quiz-homepage.component.css b/src/app/views/quiz/quiz-homepage/quiz-homepage.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..e16a6dba70f079a55baf42e3c9ae2ab58fd822d1
--- /dev/null
+++ b/src/app/views/quiz/quiz-homepage/quiz-homepage.component.css
@@ -0,0 +1,112 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ margin: auto;
+}
+
+.presentation-section {
+ display: flex;
+ flex-direction: column;
+ align-content: center;
+ height: 100%;
+}
+
+.presentation-section h1 {
+ font-size: 28px;
+ font-weight: normal;
+}
+.presentation-section h2 {
+ font-size: 24px;
+ font-weight: normal;
+ margin-bottom: 50px;
+}
+
+.presentation-section p {
+ font-size: 16px;
+ font-weight: normal;
+ margin-top: 50px;
+}
+
+.lower-section{
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.n-questions-selector {
+ display: flex;
+ flex-direction: row;
+ border-radius: 8px;
+ border: 1px solid #333333;
+ align-items: center;
+ width: 200px;
+ margin-right: 16px;
+ height: 40px;
+}
+
+.start-div {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+}
+
+p-divider{
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width:80%;
+}
+
+
+.selector-buttons {
+ flex-grow: 1;
+ display: grid;
+ gap: 4px;
+ grid-auto-flow: column;
+ grid-template-columns: 1fr 1.2fr 1fr;
+ padding: 8px;
+ align-items: center;
+}
+
+.n-questions-text {
+ height: 100%;
+ width: 100%;
+ border-radius: 4px;
+ justify-content: center;
+ align-content: center;
+ height: 24px;
+ width: 24px;
+ border: 1px solid gray;
+ background-color: var(--p-gray-200);
+}
+
+::ng-deep .start-game-button button {
+ width: 200px; /* Force the width */
+ height: 40px; /* Force the height */
+ margin-left: 16px;
+}
+
+::ng-deep .selector-buttons button {
+ width: 24px; /* Force the width */
+ height: 24px; /* Force the height */
+ background-color: #333333;
+ border-color: #333333;
+}
+.game{
+ --p-button-primary-active-background: #ff5d5c;
+ --p-button-primary-hover-background: #cd2524;
+ --p-button-primary-active-border-color: #ff5d5c;
+ --p-button-primary-hover-border-color: #cd2524;
+}
+
+p, h1, h2{
+ color: #333333;
+}
\ No newline at end of file
diff --git a/src/app/views/quiz/quiz-homepage/quiz-homepage.component.html b/src/app/views/quiz/quiz-homepage/quiz-homepage.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..f3d580d7a0cde9044dc84d71152390f873b58339
--- /dev/null
+++ b/src/app/views/quiz/quiz-homepage/quiz-homepage.component.html
@@ -0,0 +1,53 @@
+<div class="presentation-section">
+ <h1>Quiz</h1>
+ <h2>Concevons nos services numériques pour tout le monde !</h2>
+ <p-image
+ src="images/banner.png"
+ alt="Image de présentation du quiz"
+ [imageStyle]="{ objectFit: 'contain' }"
+ width="80%"
+ class = "image-intro"
+ />
+ <p>Bienvenue sur le quiz de « Inclusif, le jeu ».<br>
+ Ce quiz vous permet d'aborder de manière ludique les problèmes liés à
+ l'inclusivité.
+ </p>
+</div>
+
+<div class="lower-section">
+ <p-divider/>
+ <div class="start-div">
+ <div class="n-questions-selector">
+ <p>Durée du quiz (min)</p>
+ <div class="selector-buttons">
+ <p-button
+ severity="contrast"
+ (click)="adjustNumberOfQuestions(-1)"
+ [disabled]="iNumberOfQuestions == 0"
+ aria-label="Enlever des questions"
+ icon="pi pi-minus"
+ />
+ <span class="n-questions-text">
+ {{
+ possibleNumberOfQuestionsPerTopic[iNumberOfQuestions] *
+ numberOfTopics
+ }}
+ </span>
+ <p-button
+ severity="contrast"
+ (click)="adjustNumberOfQuestions(1)"
+ [disabled]="iNumberOfQuestions == possibleNumberOfQuestionsPerTopic.length - 1"
+ aria-label="Ajouter des questions"
+ icon="pi pi-plus"/>
+ </div>
+ </div>
+ <div class = "start-game-button">
+ <p-button
+ class = "game"
+ (click)="progressService.start(possibleNumberOfQuestionsPerTopic[iNumberOfQuestions])"
+ aria-label="Commencer le quiz"
+ label = "Passer à l'action">
+ </p-button>
+ </div>
+ </div>
+</div>
diff --git a/src/app/views/quiz/quiz-homepage/quiz-homepage.component.ts b/src/app/views/quiz/quiz-homepage/quiz-homepage.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ecc12a05fa9b9ddf5639b1a097c0a2c42df7972a
--- /dev/null
+++ b/src/app/views/quiz/quiz-homepage/quiz-homepage.component.ts
@@ -0,0 +1,41 @@
+import { Component, inject } from '@angular/core';
+import { BlockUIModule } from 'primeng/blockui';
+import { ButtonModule } from 'primeng/button';
+import { DividerModule } from 'primeng/divider';
+import { ImageModule } from 'primeng/image';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { PanelModule } from 'primeng/panel';
+import { ProgressService } from '../../../shared/services/progress-service';
+import { DataService } from '../../../shared/services/quiz-service';
+
+
+@Component({
+ selector: 'app-quiz-homepage',
+ imports: [ButtonModule, DividerModule, PanelModule, InputNumberModule, BlockUIModule, ImageModule],
+ templateUrl: './quiz-homepage.component.html',
+ styleUrl: './quiz-homepage.component.css'
+})
+export class QuizHomepageComponent {
+ /* Page de présentation du quiz
+ * Permet la séléction du nombre de questions par multiples de la longueur du cycle de thèmes
+ */
+ progressService = inject(ProgressService);
+ dataService = inject(DataService);
+ numberOfTopics = this.dataService.getNumberOfTopics();
+ possibleNumberOfQuestionsPerTopic = [1, 2, 3];
+ iNumberOfQuestions = 1;
+
+ constructor(
+ ) {
+ // Au chargement du site, cette page est affichée,
+ // si l'URL n'est pas celle de la page de départ, elle est redirigée
+ this.progressService.goToBegining();
+ }
+
+ adjustNumberOfQuestions(c: number) {
+ this.iNumberOfQuestions += c;
+ }
+ getNumberOfQuestions(){
+ return this.iNumberOfQuestions
+ }
+}
diff --git a/src/app/views/quiz/quiz.component.css b/src/app/views/quiz/quiz.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..8a28d6e225e026b1543939087744810efd174215
--- /dev/null
+++ b/src/app/views/quiz/quiz.component.css
@@ -0,0 +1,61 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ padding: 16px;
+}
+
+.quiz {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 80%;
+ margin: auto;
+ align-items: center;
+ justify-content: start;
+}
+
+.progress {
+ width: 100%;
+ margin: 2% auto;
+ display: grid;
+ grid-template-columns: fit-content(100%) auto;
+ column-gap: 2%;
+ row-gap: 0%;
+ align-items: center;
+ color: var(--p-primary-500);
+}
+
+.progress-bar {
+ --p-progressbar-label-font-size: 0;
+ --p-progressbar-height: 1vh;
+}
+
+.question-text {
+ grid-column-start: 2;
+ padding: 0 0 0 2%;
+ margin: 0;
+}
+
+.next {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: auto;
+ width: 100%;
+ position: relative;
+ bottom:0px;
+}
+
+.divider{
+ padding-bottom: 20px;
+}
+
+.button-page{
+ --p-button-padding-x: 39px;
+ --p-button-primary-active-background: #ff5d5c;
+ --p-button-primary-hover-background: #cd2524;
+ --p-button-primary-active-border-color: #ff5d5c;
+ --p-button-primary-hover-border-color: #cd2524;
+}
\ No newline at end of file
diff --git a/src/app/views/quiz/quiz.component.html b/src/app/views/quiz/quiz.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..9ae7a712e774e15e690241911a5ae383c2289381
--- /dev/null
+++ b/src/app/views/quiz/quiz.component.html
@@ -0,0 +1,32 @@
+@if (progressService.questionNumber() === 0) {
+ <app-quiz-homepage></app-quiz-homepage>
+} @else if (progressService.hasEnded()) {
+ <app-quiz-endpage></app-quiz-endpage>
+} @else {
+ <div class="quiz">
+ <div class="progress">
+ <p class="question-text">
+ {{ "Question " + progressService.questionNumber() }} / {{ dataService.numberOfQuestions() }}
+ </p>
+ <p></p>
+ <p-progressbar class="progress-bar" [value]="progressPercentage()" />
+ </div>
+ <app-quiz-card></app-quiz-card>
+ <div class="next">
+ <p-divider class="divider" />
+ @if (!progressService.answered()) {
+ <p-button
+ class="button-page"
+ (click)="quizCard()!.choiceBox()!.tryToAnswer()"
+ >
+ Répondre
+ </p-button>
+ } @else {
+ <p-button class="button-page" (click)="progressService.goToNext()">
+ Suivant
+ <i class="pi pi-arrow-right"></i>
+ </p-button>
+ }
+ </div>
+ </div>
+}
diff --git a/src/app/views/quiz/quiz.component.ts b/src/app/views/quiz/quiz.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..be92dab8711e9d33187765b64fe1214ac8a1ae07
--- /dev/null
+++ b/src/app/views/quiz/quiz.component.ts
@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, inject, viewChild } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { DividerModule } from 'primeng/divider';
+import { ProgressBarModule } from 'primeng/progressbar';
+import { ToastModule } from 'primeng/toast';
+import { ProgressService } from '../../shared/services/progress-service';
+import { DataService } from '../../shared/services/quiz-service';
+import { QuizCardComponent } from './quiz-card/quiz-card.component';
+import { QuizEndpageComponent } from "./quiz-endpage/quiz-endpage.component";
+import { QuizHomepageComponent } from './quiz-homepage/quiz-homepage.component';
+
+@Component({
+ selector: 'app-quiz',
+ templateUrl: './quiz.component.html',
+ styleUrl: './quiz.component.css',
+ imports: [CommonModule, ButtonModule, ToastModule, ProgressBarModule, QuizHomepageComponent, QuizCardComponent, DividerModule, QuizEndpageComponent]
+})
+
+export class QuizComponent {
+ /* Gère les cartes quiz par rapport à l'avancement dans le quiz et affiche une barre de progression le cas échéant*/
+ progressService = inject(ProgressService);
+ dataService = inject(DataService);
+ quizCard = viewChild(QuizCardComponent);
+ progressPercentage = computed(() => this.progressService.questionNumber() / this.dataService.numberOfQuestions() * 100)
+}
diff --git a/src/app/views/views-style.css b/src/app/views/views-style.css
new file mode 100644
index 0000000000000000000000000000000000000000..c84fb13fad8618eedc3d6f6fe78ab32cdf6087d0
--- /dev/null
+++ b/src/app/views/views-style.css
@@ -0,0 +1,2 @@
+@import "header/header.component.css";
+@import "quiz/quiz.component.css";
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
new file mode 100644
index 0000000000000000000000000000000000000000..913036e16b4e040e8a43bd92e051288dfa2693b9
--- /dev/null
+++ b/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true,
+ };
\ No newline at end of file
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
new file mode 100644
index 0000000000000000000000000000000000000000..13ecad72c72ce829894e5672ea3d162b0a19ebfa
--- /dev/null
+++ b/src/environments/environment.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: false,
+ };
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..3b3e079a62a709ddec9d3415a8f8f0259ac52932
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>Quiz</title>
+ <base href="/" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="icon" type="image/x-icon" href="./images/favicon.ico" />
+ </head>
+ <body>
+ <app-root></app-root>
+ </body>
+</html>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2bdfee1846cc0fb77f1a2e88b16d8b87988d048e
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,14 @@
+
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+import { environment } from './environments/environment';
+
+import { enableProdMode } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+bootstrapApplication(AppComponent, appConfig)
+ .catch((err) => console.error(err));
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..4630ba9ef5c670dcb58e6e11ee64d3fb1f8ea274
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,17 @@
+/* You can add global styles to this file, and also import other style files */
+@import "app/views/views-style.css";
+@import "app/shared/global-styles.css";
+@import "primeicons/primeicons.css";
+
+html{
+ font-family: 'Lato', sans-serif;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+body {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000000000000000000000000000000000000..3775b37e3bbc6659e266676de37fffdd7cfebb5c
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/app",
+ "types": []
+ },
+ "files": [
+ "src/main.ts"
+ ],
+ "include": [
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..18609156c7225c80e42c29aa90ba9862c1290506
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,31 @@
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "outDir": "./dist/out-tsc",
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "skipLibCheck": true,
+ "isolatedModules": true,
+ "esModuleInterop": true,
+ "sourceMap": true,
+ "declaration": false,
+ "experimentalDecorators": true,
+ "moduleResolution": "bundler",
+ "importHelpers": true,
+ "target": "ES2022",
+ "module": "ES2022",
+ "lib": [
+ "ES2022",
+ "dom"
+ ]
+ },
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
+}
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
new file mode 100644
index 0000000000000000000000000000000000000000..5fb748d9207a99686549d6ef1415527dc544dd0f
--- /dev/null
+++ b/tsconfig.spec.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/spec",
+ "types": [
+ "jasmine"
+ ]
+ },
+ "include": [
+ "src/**/*.spec.ts",
+ "src/**/*.d.ts"
+ ]
+}