improve documentation for overwriten variables of Carbon and BlueprintJS

src/includes/blueprintjs/_variables.scss

@@ -1,8 +1,10 @@
-@use "sass:math";
+/**
+ * Stack of BlueprintJS variables that are necessary to use their framework
+ * - calculate them from own configuration variables here
+ * - see blueprint import for variables that need to be overwritten with other values
+ */
 
-// Stack of BlueprintJS variables that are necessary to use their framework
-// calculate them from own configuration variables here
-// see blueprint import for variables that need to be overwritten with other values
+@use "sass:math";
 
 $icon-font-path: "~@blueprintjs/icons/resources/icons" !default;
 

src/includes/carbon-components/_variables.scss

@@ -1,7 +1,12 @@
-@use "sass:math";
+/**
+ * Stack of Carbon variables that are necessary to use their framework
+ * - calculate them from own configuration variables here
+ * - see blueprint import for variables that need to be overwritten with other values
+ */
 
-// Stack of Carbon variables that are necessary to use their framework
-// TODO: calculate them from own configuration variables, all unchanged variables are commented out
+ @use "sass:math";
+
+// Configuration
 
 $prefix: "cds" !default;
 $flex-grid-columns: 16 !default;
@@ -31,6 +36,8 @@ $base-font-size: $eccgui-size-typo-base !default;
 
 @import "~@carbon/react/scss/utilities/convert";
 
+// Typography
+
 $label-01: (
     font-size: rem($eccgui-size-typo-caption),
     line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
@@ -75,6 +82,18 @@ $heading-02: (
     font-weight: 600,
     line-height: $eccgui-size-typo-text-lineheight * $eccgui-size-type-levelratio,
 ) !default;
+
+// Sizes
+
+$spacing-05: rem($eccgui-size-inline-whitespace) !default;
+$spacing-09: rem($eccgui-size-block-whitespace * 2 * $eccgui-size-type-levelratio) !default;
+
+// Colors
+// original:
+// - node_modules/@carbon/themes/scss/compat/generated/_tokens.scss
+// - node_modules/@carbon/themes/scss/generated/_tokens.scss
+// FIXME: for some unknown reasons it is not possible to set the $layer* vars here, for example they are used to color the tables
+
 $layer-01: transparent !default;
 $layer-02: $eccgui-color-workspace-background !default;
 $ui-03: $pt-divider-black !default;
@@ -95,11 +114,7 @@ $text-disabled: $disabled-02 !default;
 $icon-disabled: $disabled-02 !default;
 $button-disabled: $disabled-02 !default;
 $border-disabled: $disabled-02 !default;
-$spacing-05: rem($eccgui-size-inline-whitespace) !default;
-$spacing-09: rem($eccgui-size-block-whitespace * 2 * $eccgui-size-type-levelratio) !default;
 $data-table-zebra-color: $layer-02 !default;
 
-// FIXME: for some unknown reasons it is not possible to set the $layer* vars here, for example they are used to color the tables
-
 // fetch some imports even earlier than normally necessary to have them ready before auto-included by library elements
 @import "./../../components/Button/button";