fix(docs): renamed some tonality leftovers (#3093)

* fix(docs): renamed some tonality leftovers

* refactor(test): updated screenshots

* refactor(test): updated screenshots

* refactor: reverted that screenshot

docs/how-to-develop-a-component.md

@@ -22,7 +22,7 @@
 Starting with `packages/components/src/components/my-awesome-component/my-awesome-component.scss` there are something you should know:
 
 1. The most important dependency are the `variables` included via `@use "@db-ui/foundations/build/scss/variables";`. They enable you to use e.g. `$db-spacing-fixed-md` for paddings, margins etc.
-2. A lot of times you have to force another `font-size` / `line-height`, you can do it with `@use "@db-ui/foundations/build/scss/tonality/font;` and the corresponding placeholder extend: `@extend %db-overwrite-font-size-sm;`.
+2. A lot of times you have to force another `font-size` / `line-height`, you can do it with `@use "@db-ui/foundations/build/scss/density/font;` and the corresponding placeholder extend: `@extend %db-overwrite-font-size-sm;`.
 3. Some components have an 'adaptive' styling. We exclude it in an own file `@use "@db-ui/components/build/scss/styles/component";` so you might use this dependency. As a reference look at another component e.g. [`packages/components/src/components/button/button.scss`](../packages/components/src/components/button/button.scss).
 4. If you have to set a specific color (informational, warning, etc.) directly you can use `@use "@db-ui/foundations/build/scss/colors";`. You can take a look at the `notification` component for an example `packages/components/src/components/notification/notification.scss` you might use the `@each` to reduce the amount of code for color-variants.
 5. To set a fixed icon you might use `@use "@db-ui/foundations/build/scss/icon/icons.helpers" as icons;` as dependency and e.g. `@include icons.icon("arrow_forward"), "after");`. For a dynamic icon you could prefer integrating it in HTML code with the `data-icon` attribute.

showcases/screen-reader/tests/header.spec.ts

@@ -8,7 +8,7 @@ test.describe('DBHeader', () => {
 		title: 'default',
 		description:
 			'should have links, an inline text, a navigation with a list and links, buttons (next())',
-		url: './#/01/header?page=tonality',
+		url: './#/01/header?page=density',
 		async testFn(voiceOver, nvda) {
 			if (nvda) {
 				await nvda?.previous(); // Link "Imprint"

showcases/shared/brand.json

@@ -1,6 +1,6 @@
 [
 	{
-		"name": "Tonality",
+		"name": "Density",
 		"examples": [
 			{
 				"name": "Functional",

showcases/shared/header.json

@@ -1,6 +1,6 @@
 [
 	{
-		"name": "Tonality",
+		"name": "Density",
 		"children": [
 			{
 				"name": "brand",

showcases/shared/page.json

@@ -1,6 +1,6 @@
 [
 	{
-		"name": "Tonality",
+		"name": "Density",
 		"examples": [
 			{
 				"name": "Functional",

showcases/shared/tabs.json

@@ -1,6 +1,6 @@
 [
 	{
-		"name": "Tonality",
+		"name": "Density",
 		"children": [
 			{
 				"name": "tab-list",