Merge pull request #1356 from db-ui/chore-update-angular-db-components

chore: update complete repo

Author: nmerget

angular17-example/README.md

@@ -14,10 +14,6 @@
 ```scss
 // Combined dependencies like variables, colors and tonality and all components
 @forward "@db-ui/components/build/styles/db-ui-42-rollup";
-// We use $db-spacing-fixed-md variable so we need to import the file where the variable is defined
-@use "@db-ui/foundations/build/scss/variables";
-// Color-classes are optional, we use them in the example to have easy access to colors
-@forward "@db-ui/foundations/build/css/colors/classes/all";
 ```
 
 7. Goto `src/app/app.component.html` and replace content with:
@@ -47,9 +43,9 @@
 13. `expressive`
 14. Goto browser; All texts should have different sizes
 15. Goto `src/app/app.component.html` and add `class` with those classes for each `<div>`:
-    1. `db-informational-bg`
-    2. `db-successful-bg-lvl-1`
-    3. `db-successful-bg-lvl-2`
+    1. `db-informational-bg-basic-level-1`
+    2. `db-successful-bg-basic-level-1`
+    3. `db-successful-bg-basic-level-2`
 19. Goto browser; All containers should have different background and foreground colors
 20. Goto `src/styles.scss` and append a new class:
 

angular17-example/package-lock.json

@@ -19,7 +19,7 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
-    "@db-ui/ngx-components": "^0.2.1",
+    "@db-ui/ngx-components": "^0.3.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

angular17-example/package.json

@@ -1,23 +1,23 @@
 <main>
   <div
     data-density="functional"
-    class="db-informational-bg container-with-padding"
+    class="db-informational-bg-basic-level-1 container-with-padding"
   >
     <h1>db-ui-functional</h1>
     <p>Use this as default for enterprise apps</p>
     <db-button icon="user">Test</db-button>
   </div>
   <div
     data-density="regular"
-    class="db-successful-bg-lvl-1 container-with-padding"
+    class="db-successful-bg-basic-level-1 container-with-padding"
   >
     <h1>db-ui-regular</h1>
     <p>Use this as default for consumer apps</p>
     <db-button icon="user">Test</db-button>
   </div>
   <div
     data-density="expressive"
-    class="db-successful-bg-lvl-2 container-with-padding"
+    class="db-successful-bg-basic-level-2 container-with-padding"
   >
     <h1>db-ui-expressive</h1>
     <p>Use this as default for marketing apps</p>