@eccenca/gui-elements 23.0.0-rc.2 → 23.0.0-rc.3-unofficial.0

package/src/components/Icon/icon.scss

@@ -27,7 +27,7 @@ svg.#{$eccgui}-icon {
 
 .#{$ns}-button .#{$eccgui}-icon:first-child:last-child,
 .#{$ns}-button .#{$ns}-spinner + .#{$eccgui}-icon:last-child {
-    margin: 0 (-($pt-button-height - $pt-icon-size-standard) / 2);
+    margin: 0 (-($pt-button-height - $pt-icon-size-standard) * 0.5);
 }
 
 .#{$eccgui}-menu__item {

package/src/components/Label/label.scss

@@ -41,7 +41,7 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     }
 
     .#{$eccgui}-label__text + & {
-        margin-left: $eccgui-size-inline-whitespace / 2;
+        margin-left: $eccgui-size-inline-whitespace * 0.5;
     }
 
     .#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {
@@ -58,7 +58,7 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
 
     .#{$eccgui}-label__text + &,
     .#{$eccgui}-label__info + & {
-        margin-left: $eccgui-size-inline-whitespace / 2;
+        margin-left: $eccgui-size-inline-whitespace * 0.5;
     }
 
     .#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {

package/src/components/Menu/menu.scss

@@ -26,16 +26,16 @@ $minimal-button-background-color-active: rgba($gray2, 0.3) !default;
 $dark-minimal-button-background-color-hover: rgba($gray3, 0.15) !default;
 $dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default;
 
-// $half-grid-size: $pt-grid-size / 2 !default;
+// $half-grid-size: $pt-grid-size * 0.5 !default;
 // $menu-item-border-radius: $pt-border-radius - 1 !default;
 // $menu-item-line-height-factor: 1.4;
 // $menu-item-line-height: round($pt-font-size * $menu-item-line-height-factor);
 // $menu-item-line-height-large: round($pt-font-size-large * $menu-item-line-height-factor);
 $menu-min-width: 0 !default;
-// $menu-item-padding: ($pt-button-height - $pt-icon-size-standard) / 2 !default;
-// $menu-item-padding-large: ($pt-button-height-large - $pt-icon-size-large) / 2 !default;
-// $menu-item-padding-vertical: ($pt-button-height - $menu-item-line-height) / 2 !default;
-// $menu-item-padding-vertical-large: ($pt-button-height-large - $menu-item-line-height-large) / 2 !default;
+// $menu-item-padding: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
+// $menu-item-padding-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
+// $menu-item-padding-vertical: ($pt-button-height - $menu-item-line-height) * 0.5 !default;
+// $menu-item-padding-vertical-large: ($pt-button-height-large - $menu-item-line-height-large) * 0.5 !default;
 $menu-background-color: transparent !default;
 // $dark-menu-background-color: $dark-gray4 !default;
 // $menu-item-color-hover: $minimal-button-background-color-hover !default;
@@ -49,7 +49,7 @@ $menu-background-color: transparent !default;
     padding: 0;
 
     .#{$ns}-popover2-content > & {
-        padding: $eccgui-size-inline-whitespace / 2;
+        padding: $eccgui-size-inline-whitespace * 0.5;
         min-width: 10em;
         max-width: 20em;
     }

package/src/components/Notification/notification.scss

@@ -1,5 +1,7 @@
 // TODO: add vars and process them
 
+@use "sass:math";
+
 @import "~@blueprintjs/core/src/components/toast/toast";
 
 .#{$eccgui}-notification {
@@ -10,7 +12,7 @@
     background-color: $eccgui-color-application-background;
     font-size: 1rem;
     line-height: $eccgui-size-typo-base-lineheight;
-    min-width: 4/16 * 100vw;
+    min-width: math.div(4, 16) * 100vw;
     width: 100%;
     max-width: 40rem;
     margin-top: $eccgui-size-block-whitespace;

package/src/components/OverviewItem/overviewitem.scss

@@ -1,5 +1,5 @@
 $eccgui-color-overviewitem-divider: $ui-03 !default;
-$eccgui-size-overviewitem-spacing: $eccgui-size-typo-base/2 !default;
+$eccgui-size-overviewitem-spacing: $eccgui-size-typo-base * 0.5 !default;
 
 $eccgui-color-overviewitem-depiction-background: $eccgui-color-workspace-text !default;
 $eccgui-color-overviewitem-depiction-text: $eccgui-color-workspace-background !default;
@@ -17,7 +17,7 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     align-items: stretch;
 
     & > li {
-        width: calc(1/2 * 100% - #{$eccgui-size-overviewitem-spacing});
+        width: calc(50% - #{$eccgui-size-overviewitem-spacing});
 
         &:nth-child(odd) {
             margin-right: $eccgui-size-overviewitem-spacing;
@@ -25,12 +25,12 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     }
 
     &.#{$eccgui}-overviewitem__list--hasspacing {
-        margin-left: -1 * $eccgui-size-overviewitem-spacing/2;
-        margin-right: -1 * $eccgui-size-overviewitem-spacing/2;
+        margin-left: -1 * $eccgui-size-overviewitem-spacing * 0.5;
+        margin-right: -1 * $eccgui-size-overviewitem-spacing * 0.5;
 
         & > li {
             box-sizing: border-box;
-            padding: $eccgui-size-overviewitem-spacing/2;
+            padding: $eccgui-size-overviewitem-spacing * 0.5;
         }
     }
 }
@@ -40,10 +40,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 }
 
 .#{$eccgui}-overviewitem__list--hasspacing:not(.#{$eccgui}-overviewitem__list--hascolumns) > li:not(:first-child) {
-    padding-top: $eccgui-size-overviewitem-spacing/2;
+    padding-top: $eccgui-size-overviewitem-spacing * 0.5;
 }
 .#{$eccgui}-overviewitem__list--hasspacing:not(.#{$eccgui}-overviewitem__list--hascolumns) > li:not(:last-child) {
-    padding-bottom: $eccgui-size-overviewitem-spacing/2;
+    padding-bottom: $eccgui-size-overviewitem-spacing * 0.5;
 }
 
 .#{$eccgui}-overviewitem__item {
@@ -83,7 +83,7 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__item--hasspacing {
     box-sizing: content-box;
-    padding: $eccgui-size-overviewitem-spacing/2;
+    padding: $eccgui-size-overviewitem-spacing * 0.5;
 
     &.#{$eccgui}-overviewitem__item--highdensity,
     .#{$eccgui}-overviewitem__list--highdensity > li > & {

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .#{$eccgui}-propertyvalue__list {
     display: block;
 }
@@ -13,11 +15,11 @@
     }
     &.#{$eccgui}-propertyvalue__pair--hasspacing {
         &:not(:last-child) {
-            padding-bottom: $eccgui-size-block-whitespace / 2;
-            margin-bottom: $eccgui-size-block-whitespace / 2;
+            padding-bottom: $eccgui-size-block-whitespace * 0.5;
+            margin-bottom: $eccgui-size-block-whitespace * 0.5;
         }
         .#{$eccgui}-propertyvalue__pair + & {
-            margin-top: $eccgui-size-block-whitespace / 2;
+            margin-top: $eccgui-size-block-whitespace * 0.5;
         }
     }
 }
@@ -32,7 +34,7 @@
 
 .#{$eccgui}-propertyvalue__property {
     float: left;
-    width: 3/16 * 100%;
+    width: math.div(3, 16) * 100%;
     overflow: hidden;
 
     & > div {
@@ -41,7 +43,7 @@
 }
 
 .#{$eccgui}-propertyvalue__value {
-    margin-left: 3/16 * 100%;
+    margin-left: math.div(3, 16) * 100%;
     box-sizing: content-box;
 
     &:not(:last-child) {
@@ -49,8 +51,8 @@
             border-bottom: solid 1px $pt-divider-black;
         }
         .#{$eccgui}-propertyvalue__pair--hasspacing > & {
-            padding-bottom: $eccgui-size-block-whitespace / 2;
-            margin-bottom: $eccgui-size-block-whitespace / 2;
+            padding-bottom: $eccgui-size-block-whitespace * 0.5;
+            margin-bottom: $eccgui-size-block-whitespace * 0.5;
         }
     }
 }

package/src/components/Separation/separation.scss

@@ -25,15 +25,15 @@ $eccgui-color-separation-divider: $pt-divider-black !default;
     }
 
     &.#{$eccgui}-separation__spacing--tiny {
-        margin: $eccgui-size-separation-spacing-medium/8 0;
+        margin: $eccgui-size-separation-spacing-medium * 0.125 0;
     }
 
     &.#{$eccgui}-separation__spacing--small {
-        margin: $eccgui-size-separation-spacing-medium/4 0;
+        margin: $eccgui-size-separation-spacing-medium * 0.25 0;
     }
 
     &.#{$eccgui}-separation__spacing--medium {
-        margin: $eccgui-size-separation-spacing-medium/2 0;
+        margin: $eccgui-size-separation-spacing-medium * 0.5 0;
     }
 
     &.#{$eccgui}-separation__spacing--large {
@@ -56,15 +56,15 @@ $eccgui-color-separation-divider: $pt-divider-black !default;
     }
 
     &.#{$eccgui}-separation__spacing--tiny {
-        margin: 0 $eccgui-size-separation-spacing-medium/8;
+        margin: 0 $eccgui-size-separation-spacing-medium * 0.125;
     }
 
     &.#{$eccgui}-separation__spacing--small {
-        margin: 0 $eccgui-size-separation-spacing-medium/4;
+        margin: 0 $eccgui-size-separation-spacing-medium * 0.25;
     }
 
     &.#{$eccgui}-separation__spacing--medium {
-        margin: 0 $eccgui-size-separation-spacing-medium/2;
+        margin: 0 $eccgui-size-separation-spacing-medium * 0.5;
     }
 
     &.#{$eccgui}-separation__spacing--large {

package/src/components/SimpleTable/simpletable.scss

@@ -1,10 +1,10 @@
 // own vars
 $eccgui-size-tablecell-height-regular: mini-units(5) !default;
-$eccgui-size-tablecell-padding-regular: ($eccgui-size-tablecell-height-regular - carbon--rem($eccgui-size-typo-text)) / 2 !default;
+$eccgui-size-tablecell-padding-regular: ($eccgui-size-tablecell-height-regular - carbon--rem($eccgui-size-typo-text)) * 0.5 !default;
 $eccgui-size-tablecell-height-compact: mini-units(4) !default;
-$eccgui-size-tablecell-padding-compact: ($eccgui-size-tablecell-height-compact - carbon--rem($eccgui-size-typo-text)) / 2 !default;
+$eccgui-size-tablecell-padding-compact: ($eccgui-size-tablecell-height-compact - carbon--rem($eccgui-size-typo-text)) * 0.5 !default;
 $eccgui-size-tablecell-height-tall: mini-units(6) !default;
-$eccgui-size-tablecell-padding-tall: ($eccgui-size-tablecell-height-tall - carbon--rem($eccgui-size-typo-text)) / 2 !default;
+$eccgui-size-tablecell-padding-tall: ($eccgui-size-tablecell-height-tall - carbon--rem($eccgui-size-typo-text)) * 0.5 !default;
 $eccgui-size-tablecell-font-weight: $eccgui-font-weight-regular !default;
 $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
 
@@ -67,8 +67,8 @@ $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
 
 .#{$prefix}--data-table {
     thead th, tbody td, tbody th {
-        padding-left: $eccgui-size-block-whitespace / 2;
-        padding-right: $eccgui-size-block-whitespace / 2;
+        padding-left: $eccgui-size-block-whitespace * 0.5;
+        padding-right: $eccgui-size-block-whitespace * 0.5;
     }
 }
 

package/src/components/Tabs/tabs.scss

@@ -16,7 +16,7 @@ $tab-indicator-width: 3px !default;
     border-bottom: solid 1px $pt-divider-black;
     max-width: 100%;
     overflow: auto;
-    column-gap: $eccgui-size-block-whitespace / 4;
+    column-gap: $eccgui-size-block-whitespace * 0.25;
 
     & > *:not(:last-child) {
         margin-right: 0;
@@ -49,7 +49,7 @@ $tab-indicator-width: 3px !default;
         }
 
         &::before, & > *:not(:last-child) {
-            margin-right: $eccgui-size-block-whitespace / 4;
+            margin-right: $eccgui-size-block-whitespace * 0.25;
         }
     }
 

package/src/components/Tag/Tag.tsx

@@ -37,6 +37,10 @@ interface TagProps extends Omit<
      * display tag in a small version
      */
     small?: boolean;
+    /**
+     * display tag in a large version
+     */
+    large?: boolean;
 
     // deprecated
 
@@ -52,6 +56,7 @@ function Tag({
     emphasis = "normal",
     minimal = true,
     small = false,
+    large = false,
     backgroundColor,
     ...otherProps
 }: TagProps) {
@@ -79,6 +84,7 @@ function Tag({
             className={
                 `${eccgui}-tag__item ${eccgui}-tag--${emphasis}emphasis` +
                 (small ? ` ${eccgui}-tag--small` : '') +
+                (large ? ` ${eccgui}-tag--large` : '') +
                 (className ? ' ' + className : '')
             }
             minimal={minimal}

package/src/components/Tag/tag.scss

@@ -3,21 +3,24 @@ $eccgui-size-typo-tag: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-tag-lineheight: $eccgui-size-typo-caption-lineheight !default;
 $eccgui-size-typo-tag-large: $eccgui-size-typo-text !default;
 $eccgui-size-typo-tag-large-lineheight: $eccgui-size-typo-text-lineheight !default;
-$eccgui-size-margin-tag: $eccgui-size-inline-whitespace / 2 !default;
+$eccgui-size-margin-tag: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-color-tag-background-emphasized: $eccgui-color-workspace-text !default;
 // lib vars
 $tag-default-color: $eccgui-color-tag-background-emphasized; // !default;
 // $dark-tag-default-color: $gray5 !default;
 $tag-height: $eccgui-size-typo-tag * $eccgui-size-typo-tag-lineheight; // !default;
 $tag-line-height: $eccgui-size-typo-tag; // !default;
-$tag-padding-top: ($tag-height - $tag-line-height) / 2; // !default;
+$tag-padding-top: ($tag-height - $tag-line-height) * 0.5; // !default;
 $tag-padding: $tag-padding-top * 2; // !default;
 $tag-margin: 0; // !default;
+$tag-height-small: $eccgui-size-typo-tag; // !default;
+$tag-line-height-small: $tag-height-small; // !default;
+$tag-padding-small: $tag-padding * 0.5; // !default;
 $tag-height-large: $eccgui-size-typo-tag-large * $eccgui-size-typo-tag-large-lineheight; // !default;
 $tag-line-height-large: $eccgui-size-typo-tag-large; // !default;
 $tag-padding-large: ($tag-height-large - $tag-line-height-large); // !default;
-// $tag-icon-spacing: ($tag-height - 12px) / 2 !default;
-// $tag-icon-spacing-large: ($tag-height-large - $pt-icon-size-standard) / 2 !default;
+// $tag-icon-spacing: ($tag-height - 12px) * 0.5 !default;
+// $tag-icon-spacing-large: ($tag-height-large - $pt-icon-size-standard) * 0.5 !default;
 $tag-round-adjustment: 0px !default;
 
 @import "~@blueprintjs/core/src/components/tag/tag";
@@ -25,18 +28,40 @@ $tag-round-adjustment: 0px !default;
 .#{$eccgui}-tag__item {
     flex-shrink: 0;
     flex-grow: 0;
+    max-height: calc(#{$tag-height} - 2px);
+    min-height: calc(#{$tag-height} - 2px);
+
+    &.#{$ns}-round {
+        border-radius: $tag-height * 0.5;
+    }
 
     .#{$eccgui}-overviewitem__description > & {
         max-width: 39%;
     }
 
     &.#{$eccgui}-tag--small {
-        font-size: $eccgui-size-typo-caption;
-        line-height: $eccgui-size-typo-caption-lineheight;
-        max-height: calc(#{$eccgui-size-typo-caption-lineheight * $eccgui-size-typo-caption} - 2px);
-        min-height: 0;
-        padding-top: 0;
-        padding-bottom: 0;
+        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        min-width: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        line-height: calc(#{$tag-height-small} - 2px);
+        padding: $tag-padding-small * 0.5 $tag-padding-small;
+
+        &.#{$ns}-round {
+            border-radius: $tag-height-small * 0.5;
+        }
+    }
+
+    &.#{$eccgui}-tag--large {
+        max-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
+        min-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
+        min-width: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
+        line-height: calc(#{$tag-height-large} - 2px);
+        font-size: $eccgui-size-typo-tag-large;
+        padding: $tag-padding-large * 0.5 $tag-padding-large;
+
+        &.#{$ns}-round {
+            border-radius: $tag-height-large * 0.5;
+        }
     }
 
     svg {
@@ -50,7 +75,7 @@ $tag-round-adjustment: 0px !default;
 .#{$eccgui}-tag__list,
 .#{$eccgui}-tag__list-item {
     display: inline;
-    vertical-align: baseline;
+    vertical-align: middle;
     font-size: $eccgui-size-typo-tag;
     line-height: $eccgui-size-typo-tag-lineheight;
     font-weight: $eccgui-font-weight-regular;

package/src/components/TextField/textfield.scss

@@ -1,10 +1,12 @@
+@use "sass:math";
+
 // own vars
 $eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
 $eccgui-size-textfield-height-regular: $eccgui-size-textfield-height-small * $eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio *
     $eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
-$eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace / 2 !default;
+$eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;
 $eccgui-color-textfield-text: $eccgui-color-application-text !default;
 $eccgui-color-textfield-background: white !default; // TODO define global var for it
@@ -24,9 +26,9 @@ $input-background-color: $eccgui-color-textfield-background; // !default;
 // $input-shadow-color-focus: $pt-intent-primary !default;
 // $pt-input-box-shadow: inset border-shadow(0.15), inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
 // $input-box-shadow-focus: inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
-$input-button-height: $eccgui-size-textfield-height-regular / $eccgui-size-type-levelratio; // !default;
-$input-button-height-large: $eccgui-size-textfield-height-large / $eccgui-size-type-levelratio; // !default;
-$input-button-height-small: $eccgui-size-textfield-height-small / $eccgui-size-type-levelratio; // !default;
+$input-button-height: math.div($eccgui-size-textfield-height-regular, $eccgui-size-type-levelratio); // !default;
+$input-button-height-large: math.div($eccgui-size-textfield-height-large, $eccgui-size-type-levelratio); // !default;
+$input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgui-size-type-levelratio); // !default;
 // lib includes
 @import "~@blueprintjs/core/src/components/forms/input-group";
 @import "~@blueprintjs/core/src/components/forms/input";

package/src/components/Tooltip/tooltip.scss

@@ -7,8 +7,8 @@ $tooltip2-background-color: $eccgui-color-applicationheader-text; // !default;
 $tooltip2-text-color: $eccgui-color-applicationheader-background; // !default;
 // $dark-tooltip-background-color: $light-gray3 !default;
 // $dark-tooltip-text-color: $dark-gray5 !default;
-$tooltip2-padding-vertical: $eccgui-size-block-whitespace/4; // !default;
-$tooltip2-padding-horizontal: $eccgui-size-block-whitespace/2; // !default;
+$tooltip2-padding-vertical: $eccgui-size-block-whitespace * 0.25; // !default;
+$tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
 
 @import "~@blueprintjs/popover2/src/tooltip2";
 
@@ -20,7 +20,7 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace/2; // !default;
 }
 
 .#{$eccgui}-tooltip--small {
-    max-width: $eccgui-size-tooltip-width / 2;
+    max-width: $eccgui-size-tooltip-width * 0.5;
 }
 .#{$eccgui}-tooltip--medium {
     max-width: $eccgui-size-tooltip-width;

package/src/components/Typography/typography.scss

@@ -161,7 +161,7 @@ li {
     &.#{$eccgui}-typography__text {
         margin-left: $eccgui-size-block-whitespace * 2;
         &:not(:last-child) {
-            margin-bottom: $eccgui-size-block-whitespace / 2;
+            margin-bottom: $eccgui-size-block-whitespace * 0.5;
         }
     }
 }
@@ -181,7 +181,7 @@ pre {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         background-color: $eccgui-color-workspace-background;
-        padding: $eccgui-size-block-whitespace / 2;
+        padding: $eccgui-size-block-whitespace * 0.5;
         overflow-x: auto;
     }
 }
@@ -276,8 +276,8 @@ table {
         @each $whitespaceSizeName,
             $whitespaceSizeValue
                 in (
-                    "tiny": $eccgui-size-typography-whitespace-regular/4,
-                    "small": $eccgui-size-typography-whitespace-regular/2,
+                    "tiny": $eccgui-size-typography-whitespace-regular * 0.25,
+                    "small": $eccgui-size-typography-whitespace-regular * 0.5,
                     "regular": $eccgui-size-typography-whitespace-regular,
                     "large": $eccgui-size-typography-whitespace-regular * 1.5,
                     "xlarge": $eccgui-size-typography-whitespace-regular * 2

package/src/configuration/_variables.scss

@@ -11,6 +11,8 @@
      variables to overwrite the default look of the application.
 */
 
+@use "sass:math";
+
 $eccgui: "eccgui" !default;
 
 // -- Configuration stack of colors --------------------------------------------
@@ -50,7 +52,7 @@ $eccgui-font-family-fantasy: fantasy !default;
 $eccgui-font-family-default: $eccgui-font-family-sans !default;
 $eccgui-size-typo-base: 14px !default; // size including absolute unit, preferable px
 $eccgui-size-typo-base-lineheight: 1.39 !default; // only ratio to font size, no unit!
-$eccgui-size-type-levelratio: 7/6 !default; // ratio without unit! used to calculate different text sizes, etc ...
+$eccgui-size-type-levelratio: math.div(7, 6) !default; // ratio without unit! used to calculate different text sizes, etc ...
 
 $eccgui-font-weight-light: 300 !default;
 $eccgui-font-weight-regular: 400 !default;
@@ -62,7 +64,7 @@ $eccgui-font-spacing-wide: 0.5px !default;
 // -- Configuration stack of sizes ---------------------------------------------
 
 $eccgui-size-block-whitespace: $eccgui-size-typo-base !default;
-$eccgui-size-inline-whitespace: $eccgui-size-typo-base / 2 !default;
+$eccgui-size-inline-whitespace: $eccgui-size-typo-base * 0.5 !default;
 
 // -- Configuration stack of opacities -----------------------------------------
 
@@ -79,7 +81,7 @@ $eccgui-opacity-invisible: 0 !default;
     it is not recommended to do so.
 */
 
-$eccgui-size-typo-caption: 1 / $eccgui-size-type-levelratio *
+$eccgui-size-typo-caption: math.div(1, $eccgui-size-type-levelratio) *
     $eccgui-size-typo-base !default;
 $eccgui-size-typo-caption-lineheight: max(
     $eccgui-size-type-levelratio * $eccgui-size-typo-base-lineheight,
@@ -93,37 +95,37 @@ $eccgui-size-typo-text-lineheight: max(
 $eccgui-size-typo-subtitle: $eccgui-size-type-levelratio *
     $eccgui-size-typo-text !default;
 $eccgui-size-typo-subtitle-lineheight: max(
-    1 / $eccgui-size-type-levelratio * $eccgui-size-typo-text-lineheight,
+    math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-text-lineheight,
     1
 ) !default;
 $eccgui-size-typo-title: $eccgui-size-type-levelratio *
     $eccgui-size-typo-subtitle !default;
 $eccgui-size-typo-title-lineheight: max(
-    1 / $eccgui-size-type-levelratio * $eccgui-size-typo-subtitle-lineheight,
+    math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-subtitle-lineheight,
     1
 ) !default;
 $eccgui-size-typo-headline: $eccgui-size-type-levelratio *
     $eccgui-size-typo-title !default;
 $eccgui-size-typo-headline-lineheight: max(
-    1 / $eccgui-size-type-levelratio * $eccgui-size-typo-title-lineheight,
+    math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-title-lineheight,
     1
 ) !default;
 $eccgui-size-typo-display-1: $eccgui-size-type-levelratio *
     $eccgui-size-typo-headline !default;
 $eccgui-size-typo-display-1-lineheight: max(
-    1 / $eccgui-size-type-levelratio * $eccgui-size-typo-headline-lineheight,
+    math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-headline-lineheight,
     1
 ) !default;
 $eccgui-size-typo-display-2: $eccgui-size-type-levelratio *
     $eccgui-size-typo-display-1 !default;
 $eccgui-size-typo-display-2-lineheight: max(
-    1 / $eccgui-size-type-levelratio * $eccgui-size-typo-display-1-lineheight,
+    math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-display-1-lineheight,
     1
 ) !default;
 $eccgui-size-typo-display-3: $eccgui-size-type-levelratio *
     $eccgui-size-typo-display-2 !default;
 $eccgui-size-typo-display-3-lineheight: max(
-    1 / $eccgui-size-type-levelratio * $eccgui-size-typo-display-2-lineheight,
+    math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-display-2-lineheight,
     1
 ) !default;
 

package/src/extensions/codemirror/CodeMirror.tsx

@@ -31,6 +31,10 @@ export interface CodeEditorProps {
      * Default value used first when the editor is instanciated.
      */
     defaultValue?: any;
+    /**
+     * If enabled the code editor won't show numbers before each line.
+     */
+    preventLineNumbers?: boolean;
 }
 
 /**
@@ -41,7 +45,8 @@ export const CodeEditor = ({
     name,
     id,
     mode = "undefined",
-    defaultValue
+    preventLineNumbers = false,
+    defaultValue,
 }: CodeEditorProps) => {
     const domRef = useRef<HTMLTextAreaElement>(null);
 
@@ -49,7 +54,7 @@ export const CodeEditor = ({
         const editorInstance = CodeMirror.fromTextArea(domRef.current!, {
             mode: mode === "undefined" ? undefined : mode,
             lineWrapping: true,
-            lineNumbers: true,
+            lineNumbers: !preventLineNumbers,
             tabSize: 2,
             theme: "xq-light",
         });
@@ -61,7 +66,7 @@ export const CodeEditor = ({
         return function cleanup() {
             editorInstance.toTextArea();
         };
-    }, [onChange, mode]);
+    }, [onChange, mode, preventLineNumbers]);
 
     return (
         <div className={`${eccgui}-codeeditor`}>
@@ -79,4 +84,4 @@ export const CodeEditor = ({
             />
         </div>
     );
-}
+};

package/src/extensions/react-flow/edges/_edges.scss

@@ -3,7 +3,7 @@
     path, rect {
         shape-rendering: optimizeSpeed;
         /* TODO: transitions currently do not work like expected
-        transition: $reactflow-transition-time/2 $reactflow-transition-function;
+        transition: $reactflow-transition-time * 0.5 $reactflow-transition-function;
         */
         stroke-opacity: $reactflow-edge-stroke-opacity;
     }
@@ -72,7 +72,7 @@ path.react-flow__edge-path-glow {
 
 .react-flow__edge-textwrapper {
     /* TODO: transitions currently do not work like expected
-    transition: $reactflow-transition-time/2 $reactflow-transition-function;
+    transition: $reactflow-transition-time * 0.5 $reactflow-transition-function;
     */
 }
 
@@ -135,7 +135,7 @@ path.react-flow__edge-path-glow {
 }
 
 .#{$eccgui}-graphviz__edgetools-content {
-    padding: $eccgui-size-block-whitespace / 2;
+    padding: $eccgui-size-block-whitespace * 0.5;
     max-width: $reactflow-node-basesize * 8;
     min-width: $reactflow-node-basesize;
     max-height: $reactflow-node-basesize * 13;