Overall Package and Code Lines update based on the angular 20 version

Author: sid-devspot

angular.json

@@ -36,7 +36,10 @@
                 "input": "public"
               }
             ],
-            "styles": ["src/styles.scss"]
+            "styles": ["src/styles.scss", "node_modules/prismjs/themes/prism.css"],
+            "scripts": [
+              "node_modules/@dev.spot/css-fusion-g/dist/cssfusion-g/js/cssfusion-g.umd.js"
+            ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -22,12 +22,17 @@
   },
   "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",
+    "@dev.spot/css-fusion-g": "^1.1.1-beta",
+    "@types/prismjs": "^1.26.5",
+    "prismjs": "^1.29.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -45,4 +50,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.9.2"
   }
-}
+}

package.json

@@ -0,0 +1,70 @@
+.mat-typography h1,
+.mat-typography h2,
+.mat-typography h3,
+.mat-typography h4,
+.mat-typography h5,
+.mat-typography h6 {
+  margin: 0;
+  padding: 0;
+  font-family: var(--app-head-font);
+}
+
+.mat-typography p {
+  margin: 0;
+  padding: 0;
+  font-family: var(--app-content-font);
+}
+
+.mat-mdc-menu-item-text {
+  font-family: var(--app-content-font) !important;
+  font-weight: 500 !important;
+  font-size: 1.4rem !important;
+}
+
+.mat-mdc-menu-item {
+  min-height: 44px !important;
+}
+
+.cdk-overlay-pane {
+  margin-top: 10px !important;
+}
+
+.mat-ripple,
+.mat-step-header-ripple,
+.mat-focus-indicator,
+.mat-step-header {
+  &:hover {
+    background-color: transparent !important;
+  }
+
+  &:active {
+    background-color: transparent !important;
+  }
+
+  &:focus {
+    background-color: transparent !important;
+  }
+}
+
+.mat-stepper-vertical,
+.mat-stepper-horizontal {
+  background-color: transparent !important;
+}
+
+.mat-step-text-label {
+  color: var(--app-font-clr) !important;
+}
+
+.mat-stepper-vertical-line::before {
+  border-left-color: var(--app-font-clr) !important;
+}
+
+.mat-step-icon {
+  background-color: var(--stepper-number-bg) !important;
+  color: #ffffff !important;
+}
+
+.mat-step-icon-selected {
+  background-color: var(--stepper-number-active-bg) !important;
+  color: #ffffff !important;
+}