Merge pull request #117 from db-ui/main

Auto Update from main

Author: github-actions[bot]

docs/getStarted.adoc

@@ -58,7 +58,7 @@ This should add a new entry to your `package.json` file:
 @import "@db-ui/core/sources/css/enterprise/db-ui-core";
 ----
 
-### SCSS: `node_modules include path / load path
+### SCSS: node_modules include path / load path
 
 Please keep in mind, that you would need to set your `include path` also known as `load path` depending on your setup for the sass compiler to find the correct `node_modules` folder, e.g. like the following (this is similar to how other frameworks and libraries like link:https://github.com/twbs/bootstrap-npm-starter/blob/main/package.json#L18[Bootstrap] are handling this):
 
@@ -172,6 +172,24 @@ If you want to use the compiled CSS directly, you can refence the css files in y
 <link rel="stylesheet" href="css/enterprise/db-ui-core.css" type="text/css">
 ----
 
+## Example 2: how to use DB UI Core in Create React app
+
+Create React App offers only limited access to the configuration of the production build. While it uses webpack under the hood, the webpack configuration is not exposed to the user. 
+To manage your CRA to work with SASS include Path you have to update or create your _.env_ file:
+
+----
+SASS_PATH=node_modules
+----
+
+In addition to get the asset paths working you have to load them separately. Further description is written above within the section _webpack based bundlers_.
+
+[source,scss]
+----
+@import "@db-ui/core/sources/css/webpack.assets-paths";
+@import "@db-ui/core/sources/css/enterprise/db-ui-core";
+----
+
+
 ## Documentation
 
 Please find our Architectural Decision Records within the link:adr/[adr subfolder].

package-lock.json

@@ -80,7 +80,7 @@
     "dialog-polyfill": "^0.5.6",
     "dotenv": "^16.0.3",
     "find-versions-cli": "^4.0.0",
-    "html-validate": "^7.7.0",
+    "html-validate": "^7.7.1",
     "html5-boilerplate": "^8.0.0",
     "husky": "^8.0.1",
     "iframe-resizer": "^4.3.2",

package.json

@@ -1,6 +1,7 @@
 // @import "icons.variables";
 
 @import "icons.variables";
+@import "icons.attributes-mappings";
 @import "icons.helpers";
 @import "icons.custom-properties";
 @import "icons.font-faces";

source/_patterns/00-base/icons/_icons.scss

@@ -1,6 +1,5 @@
 @import "icons.variables";
 
-@import "../icons.attributes-mappings";
 @import "icons.custom-properties";
 @import "icons.font-faces";
 @import "../icons";

source/_patterns/00-base/icons/enterprise/icons.scss

@@ -3,6 +3,7 @@
 @import "../../00-base/icons/icons.helpers";
 
 $header-big-link-paddingTop: 32 * 0.0625 !default;
+$header---backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color
 
 // * reduced height
 // $header-big-link-paddingTop: 19*0.0625 !default;

source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss

@@ -36,7 +36,7 @@
 		@include icon(glyph(menu), 24, "outline", $partial: $partial);
 		@include icon(glyph(close), 24, "outline", "after", $partial: $partial);
 
-		background-color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color
+		background-color: $header---backgroundColor; // TODO: This would need to get replaced by the correct (semantic) color
 
 		border-bottom: 1px solid $db-colors-secondary-enabled;
 
@@ -79,7 +79,7 @@
 	}
 
 	ul {
-		background-color: #fff;
+		background-color: $header---backgroundColor;
 	}
 
 	// Multiple level navigation

source/_patterns/02-components/mainnavigation/mainnavigation.scss

@@ -13,5 +13,3 @@ $header---borderBottom: #{to-rem(
 $header---marginBottom: to-rem(
 	$pxValue: 16
 ) !default;
-
-$header---backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color