From c15772cafe8d0471afcf27a9568d48ebb0e2c983 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 3 Nov 2022 12:16:26 +0100
Subject: [PATCH] chore(docs): added further comments for clarity

---
 source/css/_db-ui-core.variables.scss | 4 ++++
 source/css/_fonts.general.scss        | 4 ++++
 source/css/db-ui-core.general.scss    | 4 ++++
 source/css/db-ui-core.vars.scss       | 7 +++++++
 4 files changed, 19 insertions(+)

diff --git a/source/css/_db-ui-core.variables.scss b/source/css/_db-ui-core.variables.scss
index 6c30d3e2bb1..1a58b4b79e4 100644
--- a/source/css/_db-ui-core.variables.scss
+++ b/source/css/_db-ui-core.variables.scss
@@ -1,3 +1,7 @@
+/* *****
+	This file summarizes the general variables relevant for using DB UI Core with SCSS.
+***** */
+
 // Define the path for both image and font folders
 $icons-path: "../../icons/" !default;
 $images-path: "../../images/" !default;
diff --git a/source/css/_fonts.general.scss b/source/css/_fonts.general.scss
index 9d3828e6674..9ce26185388 100644
--- a/source/css/_fonts.general.scss
+++ b/source/css/_fonts.general.scss
@@ -1,3 +1,7 @@
+/* *****
+	SCSS placeholder for general font declarations
+***** */
+
 @import "db-ui-core.variables";
 
 %general-fonts {
diff --git a/source/css/db-ui-core.general.scss b/source/css/db-ui-core.general.scss
index 4c054b243d1..cc72d3bcbf7 100644
--- a/source/css/db-ui-core.general.scss
+++ b/source/css/db-ui-core.general.scss
@@ -1,3 +1,7 @@
+/* *****
+	This is mainly meant to get included within scoped components like e.g. within StencilJS Custom Components / DB UI Elements
+***** */
+
 @import "db-ui-core.variables";
 @import "@csstools/normalize.css/normalize";
 @import "../_patterns/00-base/init";
diff --git a/source/css/db-ui-core.vars.scss b/source/css/db-ui-core.vars.scss
index ccebd289b23..344e3c78333 100644
--- a/source/css/db-ui-core.vars.scss
+++ b/source/css/db-ui-core.vars.scss
@@ -1,3 +1,9 @@
+/* *****
+	This file is meant to get included globally on a page with a standard set of variables and font references,
+	if you're using only partials – either Web Components out of DB UI Elements or the partial CSS generated out
+	of DB UI Core for each element and component.
+***** */
+
 // Define the path for both image and font folders
 $icons-path: "../icons/" !default;
 $images-path: "../images/" !default;
@@ -12,6 +18,7 @@ $fonts-path: "../fonts/" !default;
 @import "../_patterns/00-base/icons/icons.font-faces";
 
 :root {
+	// Overwriting the referenced SVG icons as this is going to get inlined and the path would be relative to the pages URL instead of the CSS, which would break
 	--db-ic-search-24: url(#{$icons-path}functional/images/action/db_ic_search_24.svg);
 	--db-ic-expand-more-20: url(#{$icons-path}functional/images/navigation/db_ic_expand_more_20.svg);
 }