diff --git a/_theme-colors.scss b/_theme-colors.scss new file mode 100644 index 0000000..6086626 --- /dev/null +++ b/_theme-colors.scss @@ -0,0 +1,137 @@ +// This file was generated by running 'ng generate @angular/material:theme-color'. +// Proceed with caution if making changes to this file. + +@use 'sass:map'; +@use '@angular/material' as mat; + +// Note: Color palettes are generated from primary: f4acb7 +$_palettes: ( + primary: ( + 0: #000000, + 10: #360c17, + 20: #50212b, + 25: #5e2c36, + 30: #6b3741, + 35: #79424c, + 40: #874e58, + 50: #a36670, + 60: #c07f89, + 70: #de98a3, + 80: #fcb3be, + 90: #ffd9de, + 95: #ffecee, + 98: #fff8f7, + 99: #fffbff, + 100: #ffffff, + ), + secondary: ( + 0: #000000, + 10: #2b1519, + 20: #422a2e, + 25: #4e3538, + 30: #5a4044, + 35: #674b4f, + 40: #74575b, + 50: #8e6f73, + 60: #aa888d, + 70: #c6a2a7, + 80: #e3bdc2, + 90: #ffd9de, + 95: #ffecee, + 98: #fff8f7, + 99: #fffbff, + 100: #ffffff, + ), + tertiary: ( + 0: #000000, + 10: #2b1700, + 20: #472a00, + 25: #563403, + 30: #633f0e, + 35: #704b1a, + 40: #7e5624, + 50: #9a6f3a, + 60: #b68851, + 70: #d4a269, + 80: #f2bd81, + 90: #ffddb9, + 95: #ffeedf, + 98: #fff8f4, + 99: #fffbff, + 100: #ffffff, + ), + neutral: ( + 0: #000000, + 10: #201a1b, + 20: #352f2f, + 25: #413a3a, + 30: #4c4546, + 35: #585151, + 40: #645c5d, + 50: #7e7575, + 60: #988e8f, + 70: #b3a9a9, + 80: #cfc4c4, + 90: #ece0e0, + 95: #faeeee, + 98: #fff8f7, + 99: #fffbff, + 100: #ffffff, + 4: #120d0e, + 6: #171213, + 12: #241e1f, + 17: #2f2829, + 22: #3a3334, + 24: #3e3838, + 87: #e3d7d8, + 92: #f1e5e6, + 94: #f7ebeb, + 96: #fdf1f1, + ), + neutral-variant: ( + 0: #000000, + 10: #24191a, + 20: #3a2d2f, + 25: #46383a, + 30: #514345, + 35: #5e4f50, + 40: #6a5b5c, + 50: #847375, + 60: #9e8c8e, + 70: #baa7a8, + 80: #d6c2c3, + 90: #f3dddf, + 95: #ffecee, + 98: #fff8f7, + 99: #fffbff, + 100: #ffffff, + ), + error: ( + 0: #000000, + 10: #410002, + 20: #690005, + 25: #7e0007, + 30: #93000a, + 35: #a80710, + 40: #ba1a1a, + 50: #de3730, + 60: #ff5449, + 70: #ff897d, + 80: #ffb4ab, + 90: #ffdad6, + 95: #ffedea, + 98: #fff8f7, + 99: #fffbff, + 100: #ffffff, + ), +); + +$_rest: ( + secondary: map.get($_palettes, secondary), + neutral: map.get($_palettes, neutral), + neutral-variant: map.get($_palettes, neutral-variant), + error: map.get($_palettes, error), +); + +$primary-palette: map.merge(map.get($_palettes, primary), $_rest); +$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5879e60..3fc8450 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,12 @@ "version": "0.0.0", "dependencies": { "@angular/animations": "^19.1.0", + "@angular/cdk": "^19.1.5", "@angular/common": "^19.1.0", "@angular/compiler": "^19.1.0", "@angular/core": "^19.1.0", "@angular/forms": "^19.1.0", + "@angular/material": "^19.1.5", "@angular/platform-browser": "^19.1.0", "@angular/platform-browser-dynamic": "^19.1.0", "@angular/router": "^19.1.0", @@ -575,6 +577,23 @@ } } }, + "node_modules/@angular/cdk": { + "version": "19.1.5", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.1.5.tgz", + "integrity": "sha512-+g20LIvYHThKBD6oXTYWVL6+ecaOWtPJu08R5xIfGrwXoj0l/9prLwuSW8GlIATI3mDkSesyhQsomb9jAUzKwQ==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "optionalDependencies": { + "parse5": "^7.1.2" + }, + "peerDependencies": { + "@angular/common": "^19.0.0 || ^20.0.0", + "@angular/core": "^19.0.0 || ^20.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/cli": { "version": "19.1.8", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.1.8.tgz", @@ -708,6 +727,24 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material": { + "version": "19.1.5", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.1.5.tgz", + "integrity": "sha512-Fi04Toe+z0qorfpZkQ5rIRE9cVgBOHdgCig5oFrHpycSDW2LMTrvZtSV/qMwrIe5GPn49EXE2jCGcSpgumW4KA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/animations": "^19.0.0 || ^20.0.0", + "@angular/cdk": "19.1.5", + "@angular/common": "^19.0.0 || ^20.0.0", + "@angular/core": "^19.0.0 || ^20.0.0", + "@angular/forms": "^19.0.0 || ^20.0.0", + "@angular/platform-browser": "^19.0.0 || ^20.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/platform-browser": { "version": "19.1.7", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.1.7.tgz", @@ -8213,7 +8250,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, + "devOptional": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.12" @@ -12658,7 +12695,7 @@ "version": "7.2.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz", "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "entities": "^4.5.0" diff --git a/package.json b/package.json index aa972d1..5609789 100644 --- a/package.json +++ b/package.json @@ -13,10 +13,12 @@ "private": true, "dependencies": { "@angular/animations": "^19.1.0", + "@angular/cdk": "^19.1.5", "@angular/common": "^19.1.0", "@angular/compiler": "^19.1.0", "@angular/core": "^19.1.0", "@angular/forms": "^19.1.0", + "@angular/material": "^19.1.5", "@angular/platform-browser": "^19.1.0", "@angular/platform-browser-dynamic": "^19.1.0", "@angular/router": "^19.1.0", @@ -43,4 +45,4 @@ "typescript": "~5.7.2", "typescript-eslint": "8.23.0" } -} +} \ No newline at end of file diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 7afc797..53c99f7 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -2,7 +2,8 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; +import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)], + providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync()], }; diff --git a/src/index.html b/src/index.html index 6d1b4a3..861efa6 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,13 @@ - + + + + + + + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..329550c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,28 @@ -/* You can add global styles to this file, and also import other style files */ +// Custom Theming for Angular Material +// For more information: https://material.angular.io/guide/theming +@use "@angular/material" as mat; +@use "../theme-colors" as rc-theme; + +html { + @include mat.theme( + ( + color: ( + theme-type: light, + primary: rc-theme.$primary-palette, + tertiary: rc-theme.$tertiary-palette, + ), + typography: Inter, + density: 0, + ) + ); +} /* You can add global styles to this file, and also import other style files */ + +html, +body { + height: 100%; +} +body { + margin: 0; + font-family: Inter, sans-serif; + background-color: var(--mat-sys-surface); +}