diff --git a/angular.json b/angular.json index fb02877..00ce5e8 100644 --- a/angular.json +++ b/angular.json @@ -37,6 +37,7 @@ } ], "styles": [ + "src/custom-theme.scss", "src/styles.css" ] }, diff --git a/package-lock.json b/package-lock.json index 11dae1c..b527170 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,12 @@ "name": "infinifront", "version": "0.0.0", "dependencies": { + "@angular/cdk": "^20.2.9", "@angular/common": "^20.3.0", "@angular/compiler": "^20.3.0", "@angular/core": "^20.3.0", "@angular/forms": "^20.3.0", + "@angular/material": "^20.2.9", "@angular/platform-browser": "^20.3.0", "@angular/router": "^20.3.0", "@infinimotion/model-frontend": "^0.0.2", @@ -393,6 +395,22 @@ } } }, + "node_modules/@angular/cdk": { + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-20.2.9.tgz", + "integrity": "sha512-rbY1AMz9389WJI29iAjWp4o0QKRQHCrQQUuP0ctNQzh1tgWpwiRLx8N4yabdVdsCA846vPsyKJtBlSNwKMsjJA==", + "license": "MIT", + "peer": true, + "dependencies": { + "parse5": "^8.0.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^20.0.0 || ^21.0.0", + "@angular/core": "^20.0.0 || ^21.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/cli": { "version": "20.3.6", "dev": true, @@ -511,6 +529,7 @@ "node_modules/@angular/forms": { "version": "20.3.5", "license": "MIT", + "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -524,6 +543,23 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material": { + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-20.2.9.tgz", + "integrity": "sha512-xo/ozyRXCoJMi89XLTJI6fdPKBv2wBngWMiCrtTg23+pHbuyA/kDbk3v62eJkDD1xdhC4auXaIHu4Ddf5zTgSA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/cdk": "20.2.9", + "@angular/common": "^20.0.0 || ^21.0.0", + "@angular/core": "^20.0.0 || ^21.0.0", + "@angular/forms": "^20.0.0 || ^21.0.0", + "@angular/platform-browser": "^20.0.0 || ^21.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/platform-browser": { "version": "20.3.5", "license": "MIT", @@ -1263,8 +1299,8 @@ }, "node_modules/@infinimotion/model-frontend": { "version": "0.0.2", - "resolved": "https://git.chequeo.de/api/packages/infinimotion/npm/%40infinimotion%2Fmodel-frontend/-/0.0.2/model-frontend-0.0.2.tgz", - "integrity": "sha512-bjqYJ3SqAyfzvNtmk1SZrlU9mXAEfy7V5IhqPllkOxc6OyPqxIE0sZ5I8Ssh04hHYTBYD2GKLNlpJwxQumGanQ==", + "resolved": "https://git.infinimotion.de/api/packages/infinimotion/npm/%40infinimotion%2Fmodel-frontend/-/0.0.2/model-frontend-0.0.2.tgz", + "integrity": "sha512-EG+Z6wtLZ/+mU/j7KJpIkSCm1IBYVb30g1/k9vJhITNhGavjMLyzZXY/+Gd9zY3AZt664E9ziE3OGG5sY/Jshw==", "license": "ISC" }, "node_modules/@inquirer/ansi": { @@ -1812,8 +1848,6 @@ }, "node_modules/@lmdb/lmdb-win32-x64": { "version": "3.4.2", - "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-3.4.2.tgz", - "integrity": "sha512-IY+r3bxKW6Q6sIPiMC0L533DEfRJSXibjSI3Ft/w9Q8KQBNqEIvUFXt+09wV8S5BRk0a8uSF19YWxuRwEfI90g==", "cpu": [ "x64" ], @@ -1938,8 +1972,6 @@ }, "node_modules/@msgpackr-extract/msgpackr-extract-win32-x64": { "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.3.tgz", - "integrity": "sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ==", "cpu": [ "x64" ], @@ -6288,8 +6320,6 @@ }, "node_modules/lmdb": { "version": "3.4.2", - "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-3.4.2.tgz", - "integrity": "sha512-nwVGUfTBUwJKXd6lRV8pFNfnrCC1+l49ESJRM19t/tFb/97QfJEixe5DYRvug5JO7DSFKoKaVy7oGMt5rVqZvg==", "dev": true, "hasInstallScript": true, "license": "MIT", @@ -6737,8 +6767,6 @@ }, "node_modules/msgpackr": { "version": "1.11.5", - "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.5.tgz", - "integrity": "sha512-UjkUHN0yqp9RWKy0Lplhh+wlpdt9oQBYgULZOiFhV3VclSF1JnSQWZ5r9gORQlNYaUKQoR8itv7g7z1xDDuACA==", "dev": true, "license": "MIT", "optional": true, @@ -6748,8 +6776,6 @@ }, "node_modules/msgpackr-extract": { "version": "3.0.3", - "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-3.0.3.tgz", - "integrity": "sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==", "dev": true, "hasInstallScript": true, "license": "MIT", @@ -6803,8 +6829,6 @@ }, "node_modules/node-addon-api": { "version": "6.1.0", - "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz", - "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==", "dev": true, "license": "MIT", "optional": true @@ -6834,8 +6858,6 @@ }, "node_modules/node-gyp-build-optional-packages": { "version": "5.2.2", - "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz", - "integrity": "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==", "dev": true, "license": "MIT", "optional": true, @@ -7132,8 +7154,6 @@ }, "node_modules/ordered-binary": { "version": "1.6.0", - "resolved": "https://registry.npmjs.org/ordered-binary/-/ordered-binary-1.6.0.tgz", - "integrity": "sha512-IQh2aMfMIDbPjI/8a3Edr+PiOpcsB7yo8NdW7aHWVaoR/pcDldunMvnnwbk/auPGqmKeAdxtZl7MHX/QmPwhvQ==", "dev": true, "license": "MIT", "optional": true @@ -7309,7 +7329,6 @@ }, "node_modules/parse5": { "version": "8.0.0", - "dev": true, "license": "MIT", "dependencies": { "entities": "^6.0.0" @@ -7355,7 +7374,6 @@ }, "node_modules/parse5/node_modules/entities": { "version": "6.0.1", - "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.12" @@ -8730,8 +8748,6 @@ }, "node_modules/weak-lru-cache": { "version": "1.2.2", - "resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz", - "integrity": "sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==", "dev": true, "license": "MIT", "optional": true diff --git a/package.json b/package.json index 15a31a3..e76b557 100644 --- a/package.json +++ b/package.json @@ -22,10 +22,12 @@ }, "private": true, "dependencies": { + "@angular/cdk": "^20.2.9", "@angular/common": "^20.3.0", "@angular/compiler": "^20.3.0", "@angular/core": "^20.3.0", "@angular/forms": "^20.3.0", + "@angular/material": "^20.2.9", "@angular/platform-browser": "^20.3.0", "@angular/router": "^20.3.0", "@infinimotion/model-frontend": "^0.0.2", @@ -49,4 +51,4 @@ "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.9.2" } -} +} \ No newline at end of file diff --git a/src/custom-theme.scss b/src/custom-theme.scss new file mode 100644 index 0000000..d03b093 --- /dev/null +++ b/src/custom-theme.scss @@ -0,0 +1,35 @@ + +// Include theming for Angular Material with `mat.theme()`. +// This Sass mixin will define CSS variables that are used for styling Angular Material +// components according to the Material 3 design spec. +// Learn more about theming and how to use it for your application's +// custom components at https://material.angular.dev/guide/theming +@use '@angular/material' as mat; + +html { + @include mat.theme(( + color: ( + primary: mat.$azure-palette, + tertiary: mat.$blue-palette, + ), + typography: Roboto, + density: 0, + )); +} + +body { + // Default the application to a light color theme. This can be changed to + // `dark` to enable the dark color theme, or to `light dark` to defer to the + // user's system settings. + color-scheme: light; + + // Set a default background, font and text colors for the application using + // Angular Material's system-level CSS variables. Learn more about these + // variables at https://material.angular.dev/guide/system-variables + background-color: var(--mat-sys-surface); + color: var(--mat-sys-on-surface); + font: var(--mat-sys-body-medium); + + // Reset the user agent margin. + margin: 0; +} diff --git a/src/index.html b/src/index.html index 621d27a..4edb253 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,8 @@ + + diff --git a/src/styles.css b/src/styles.css index 680483d..cc40dde 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,2 +1,5 @@ /* You can add global styles to this file, and also import other style files */ -@import "tailwindcss" +@import "tailwindcss"; + +html, body { height: 100%; } +body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }