From 94eb9b1bf8c19c4e771f31adbe94c089b1cdab9b Mon Sep 17 00:00:00 2001 From: Gabriel De Los Rios Date: Tue, 20 Jan 2026 20:29:50 -0300 Subject: [PATCH] build: ad material --- package-lock.json | 37 +++++++++++++++++++++++++++++++++++-- package.json | 4 +++- src/index.html | 4 ++++ src/styles.scss | 37 +++++++++++++++++++++++++++++++++++++ 4 files changed, 79 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index fe8a2a5..a4bbc6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,12 @@ "name": "groceries-price-tracker", "version": "0.0.0", "dependencies": { + "@angular/cdk": "^21.1.0", "@angular/common": "^21.0.0", "@angular/compiler": "^21.0.0", "@angular/core": "^21.0.0", "@angular/forms": "^21.0.0", + "@angular/material": "^21.1.0", "@angular/platform-browser": "^21.0.0", "@angular/router": "^21.0.0", "@angular/service-worker": "^21.0.6", @@ -422,6 +424,22 @@ } } }, + "node_modules/@angular/cdk": { + "version": "21.1.0", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-21.1.0.tgz", + "integrity": "sha512-zvV37HPKhtu0bOfuK0IhjKKq++Xb57Z11uZYZJI34BZnZ5y1TPhJpcmrHhjb2uKUNfDvePUqhlnIlKAXHSBIhw==", + "license": "MIT", + "dependencies": { + "parse5": "^8.0.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^21.0.0 || ^22.0.0", + "@angular/core": "^21.0.0 || ^22.0.0", + "@angular/platform-browser": "^21.0.0 || ^22.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/cli": { "version": "21.0.4", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-21.0.4.tgz", @@ -563,6 +581,23 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material": { + "version": "21.1.0", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-21.1.0.tgz", + "integrity": "sha512-VFWUQMU5Rm8w6uW5+FcMbsDvHMmhviVxPsKAFdinJ4ySbm5c6z9c64nhlYCNRswRgLB1VcoVxEWitP77LUagYg==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/cdk": "21.1.0", + "@angular/common": "^21.0.0 || ^22.0.0", + "@angular/core": "^21.0.0 || ^22.0.0", + "@angular/forms": "^21.0.0 || ^22.0.0", + "@angular/platform-browser": "^21.0.0 || ^22.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/platform-browser": { "version": "21.0.6", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.0.6.tgz", @@ -7278,7 +7313,6 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz", "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==", - "dev": true, "license": "MIT", "dependencies": { "entities": "^6.0.0" @@ -7332,7 +7366,6 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz", "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==", - "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.12" diff --git a/package.json b/package.json index 07cec7a..2a38b8f 100644 --- a/package.json +++ b/package.json @@ -23,10 +23,12 @@ "private": true, "packageManager": "npm@11.5.1", "dependencies": { + "@angular/cdk": "^21.1.0", "@angular/common": "^21.0.0", "@angular/compiler": "^21.0.0", "@angular/core": "^21.0.0", "@angular/forms": "^21.0.0", + "@angular/material": "^21.1.0", "@angular/platform-browser": "^21.0.0", "@angular/router": "^21.0.0", "@angular/service-worker": "^21.0.6", @@ -43,4 +45,4 @@ "typescript": "~5.9.2", "vitest": "^4.0.8" } -} +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 055e367..957f536 100644 --- a/src/index.html +++ b/src/index.html @@ -7,6 +7,10 @@ + + + + diff --git a/src/styles.scss b/src/styles.scss index 61c8368..b536290 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,3 +1,40 @@ + +// 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 { + height: 100%; + @include mat.theme(( + color: ( + primary: mat.$magenta-palette, + tertiary: mat.$violet-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: dark; + + // 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; + height: 100%; +} html, body { margin: 0 0; height: 100%;