chore: fixes wordings and semantic tags

showcases/patternhub/pages/foundations/colors/overview.tsx

@@ -175,19 +175,20 @@ const ColorOverview = () => {
 			<div>
 				<h1>Color classes</h1>
 				<p>
-					These <b>classes</b> (or data-attributes) can be used to{' '}
-					apply a <b>monochromatic adaptive color scheme</b> or a{' '}
-					<b>color modifier</b> (background color, on-background
-					color) to containers and elements.
+					These <strong>classes</strong> (or data-attributes) can be
+					used to apply a{' '}
+					<strong>monochromatic adaptive color scheme</strong> or a{' '}
+					<strong>color modifier</strong> (background color,
+					on-background color) to containers and elements.
 				</p>
 				<p>
 					<i>
 						These classes are <u>not</u> intended for individual
-						styling of your own components. The corresponding custom
-						properties should be used for this.
+						styling of your own components. The corresponding CSS
+						Custom Properties should be used for this.
 					</i>
 				</p>
-				<b>How to use:</b>
+				<strong>How to use:</strong>
 				<br />
 				<br />
 				<DBInfotext semantic="informational">
@@ -197,51 +198,53 @@ const ColorOverview = () => {
 				<ol>
 					<li>
 						Should an entire container be given an{' '}
-						<b>adaptive color scheme</b>? Then use a{' '}
+						<strong>adaptive color scheme</strong>? Then use a{' '}
 						<code>db-container-color-[ color ]</code> class.
 					</li>
 					<li>
-						The <b>background color</b>, in particular the{' '}
-						<b>elevation level</b>, can be modified with a{' '}
+						The <strong>background color</strong>, in particular the{' '}
+						<strong>elevation level</strong>, can be modified with a{' '}
 						<code>db-bg-color-[ color ]</code> class.
 					</li>
 					<li>
-						The contrast of the <b>text</b> and <b>icon color</b>{' '}
-						can be changed with the <b>on-background</b> classes:{' '}
+						The contrast of the <strong>text</strong> and{' '}
+						<strong>icon color</strong> can be changed with the{' '}
+						<strong>on-background</strong> classes:{' '}
 						<code>db-on-bg-color-[ color ]</code>
 					</li>
 				</ol>
 				<h2>1. Container color</h2>
 				<p>
 					These classes define the{' '}
-					<b>monochromatic adaptive color scheme</b> for a container.
-					Texts, icons and backgrounds in it then automatically adapt
-					to the color set.
+					<strong>monochromatic adaptive color scheme</strong> for a
+					container. Texts, icons and backgrounds in it then
+					automatically adapt to the color set.
 				</p>
 				<p>
 					Each container color class functions as a shorthand and
 					applies the following by default:
 				</p>
 				<ul>
 					<li>
-						A bunch of css custom-properties to apply the{' '}
-						<b>monochromatic adaptive color scheme</b>
+						A bunch of CSS Custom Properties to apply the{' '}
+						<strong>monochromatic adaptive color scheme</strong>
 					</li>
 					<li>
-						Background color modifier <b>db-bg-color-lvl-1</b>{' '}
-						(Level 1 background by default)
+						Background color modifier{' '}
+						<strong>db-bg-color-lvl-1</strong> (Level 1 background
+						by default)
 					</li>
 					<li>
 						On background color modifier{' '}
-						<b>db-on-bg-color-default</b> (highest text contrast by
-						default)
+						<strong>db-on-bg-color-default</strong> (highest text
+						contrast by default)
 					</li>
 				</ul>
 				<h3>Semantic container color</h3>
 				<p>
 					These semantic colours are used to give a container a
-					corresponding meaning. <b>Neutral</b> stands for the regular
-					colour scheme, which is usually applied to root.
+					corresponding meaning. <strong>Neutral</strong> stands for
+					the regular colour scheme, which is usually applied to root.
 				</p>
 				<ColorsOverviewTabs
 					values={semanticColors}
@@ -258,9 +261,9 @@ const ColorOverview = () => {
 				<p>
 					These classes define the type of background color for a
 					container. The exact color tone then results from the
-					current semantics (in root <b>neutral</b> by default). This
-					means that each of these background types exists for each
-					semantic color.
+					current semantics (in root <strong>neutral</strong> by
+					default). This means that each of these background types
+					exists for each semantic color.
 				</p>
 				<ColorsOverviewTabs
 					values={backgroundColors}
@@ -269,15 +272,16 @@ const ColorOverview = () => {
 				/>
 				<h2>3. On background color modifier</h2>
 				<p>
-					This class is used to define the contrast for <b>texts</b>{' '}
-					and <b>icons</b>. As with the background colors, these are
-					displayed according to the current color scheme.
+					This class is used to define the contrast for{' '}
+					<strong>texts</strong> and <strong>icons</strong>. As with
+					the background colors, these are displayed according to the
+					current color scheme.
 				</p>
 				<p>
-					<b>
+					<strong>
 						* These colors do not have sufficient contrast. They are
 						therefore not permitted as text colors.
-					</b>
+					</strong>
 				</p>
 				<ColorsOverviewTabs
 					values={onBackgroundColors}