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

package/src/components/Select/_select.scss

@@ -0,0 +1,8 @@
+@import "~@blueprintjs/select/src/components/select/select";
+
+.#{$ns}-select-popover {
+    .#{$ns}-menu {
+        max-height: unset;
+        max-width: unset;
+    }
+}

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/TabTitle.tsx

@@ -54,10 +54,8 @@ const TabTitle = ({
             tabIndex={-1}
             text={text}
             tooltip={disabled ? undefined : tooltip}
-            tooltipProperties={{
-                tooltipProps: {
-                    boundary: "window"
-                }
+            tooltipProps={{
+                rootBoundary: "viewport"
             }}
             icon={<>{titlePrefix}</>}
             rightIcon={<>{titleSuffix}</>}

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;
@@ -33,7 +33,7 @@ $tab-indicator-width: 3px !default;
     }
 
     & > .#{$ns}-button, // normal button
-    & > span > span > span > .#{$ns}-button { // button with tooltip
+    & > span > span > .#{$ns}-button { // button with tooltip
         outline: none;
         margin-bottom: $tab-indicator-width;
         max-width: 15rem;
@@ -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;
@@ -86,8 +111,6 @@ $tag-round-adjustment: 0px !default;
 .#{$ns}-tag {
     border-width: 1px;
     border-style: solid;
-    border-color: rgba($tag-default-color, 0.75);
-    background-color: rgba($tag-default-color, 0.75);
 
     &:not([class*="#{$ns}-intent-"]) {
         &.#{$eccgui}-tag--strongeremphasis {
@@ -98,6 +121,10 @@ $tag-round-adjustment: 0px !default;
             border-color: rgba($tag-default-color, 0.875);
             background-color: rgba($tag-default-color, 0.875);
         }
+        &.#{$eccgui}-tag--normalemphasis {
+            border-color: rgba($tag-default-color, 0.75);
+            background-color: rgba($tag-default-color, 0.75);
+        }
         &.#{$eccgui}-tag--weakemphasis {
             border-color: rgba($tag-default-color, 0.625);
             background-color: rgba($tag-default-color, 0.625);
@@ -106,27 +133,29 @@ $tag-round-adjustment: 0px !default;
             border-color: rgba($tag-default-color, 0.5);
             background-color: rgba($tag-default-color, 0.5);
         }
-    }
-
-    &.#{$ns}-minimal:not([class*="#{$ns}-intent-"]) {
-        border-color: rgba($tag-default-color, 0.15);
-        background-color: rgba(mix(rgba($tag-default-color, 0.15), #fff), 0.75);
 
-        &.#{$eccgui}-tag--strongeremphasis {
-            border-color: rgba($tag-default-color, 0.3);
-            background-color: rgba(mix(rgba($tag-default-color, 0.3), #fff), 1);
-        }
-        &.#{$eccgui}-tag--strongemphasis {
-            border-color: rgba($tag-default-color, 0.225);
-            background-color: rgba(mix(rgba($tag-default-color, 0.225), #fff), 0.875);
-        }
-        &.#{$eccgui}-tag--weakemphasis {
-            border-color: rgba($tag-default-color, 0.075);
-            background-color: rgba(mix(rgba($tag-default-color, 0.075), #fff), 0.625);
-        }
-        &.#{$eccgui}-tag--weakeremphasis {
-            border-color: rgba($tag-default-color, 0.15);
-            background-color: rgba(mix(rgba($tag-default-color, 0), #fff), 0.5);
+        &.#{$ns}-minimal,
+        &.#{$ns}-minimal.#{$ns}-interactive {
+            &.#{$eccgui}-tag--strongeremphasis {
+                border-color: rgba($tag-default-color, 0.3);
+                background-color: rgba(mix(rgba($tag-default-color, 0.3), #fff), 1);
+            }
+            &.#{$eccgui}-tag--strongemphasis {
+                border-color: rgba($tag-default-color, 0.225);
+                background-color: rgba(mix(rgba($tag-default-color, 0.225), #fff), 0.875);
+            }
+            &.#{$eccgui}-tag--normalemphasis {
+                border-color: rgba($tag-default-color, 0.15);
+                background-color: rgba(mix(rgba($tag-default-color, 0.15), #fff), 0.75);
+            }
+            &.#{$eccgui}-tag--weakemphasis {
+                border-color: rgba($tag-default-color, 0.075);
+                background-color: rgba(mix(rgba($tag-default-color, 0.075), #fff), 0.625);
+            }
+            &.#{$eccgui}-tag--weakeremphasis {
+                border-color: rgba($tag-default-color, 0.15);
+                background-color: rgba(mix(rgba($tag-default-color, 0), #fff), 0.5);
+            }
         }
     }
 }

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.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from "react-lorem-ipsum";
+
+import {
+  Tooltip
+} from "../../index";
+
+export default {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  argTypes: {
+  },
+} as ComponentMeta<typeof Tooltip>;
+
+const Template: ComponentStory<typeof Tooltip> = (args) => (
+    <Tooltip {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: <span>hover me</span>,
+    content: loremIpsum({
+        p: 1,
+        avgSentencesPerParagraph: 2,
+        random: false
+    }).toString(),
+    addIndicator: true,
+    // this is a workaround to prevent empty functions in code example
+    onClose: false,
+    // onClosed: false, // this somehow leads to a problem when closed with `<span>` target
+    onClosing: false,
+    onInteraction: false,
+    onOpened: false,
+    onOpening: false,
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -1,20 +1,27 @@
 import React from "react";
-import { Classes as BlueprintClassNames, Tooltip as BlueprintTooltip } from "@blueprintjs/core";
+import {
+    TOOLTIP2_INDICATOR
+} from "@blueprintjs/popover2/src/classes";
+import {
+    Tooltip2 as BlueprintTooltip,
+    Tooltip2Props as BlueprintTooltipProps
+} from "@blueprintjs/popover2";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {TooltipProps as BlueprintTooltipProps} from "@blueprintjs/core";
 
-export interface TooltipProps {
-    className?: string
-    addIndicator?: boolean
-    /** Blueprint specific tooltip props */
-    tooltipProps?: Partial<BlueprintTooltipProps>
-    /** The content that is displayed when hovering over the tooltip area. */
-    content: JSX.Element | string
-    /** The size specifies the dimension the element can maximal grow. */
-    size?: "small" | "medium" | "large"
-    children: React.ReactNode | React.ReactNode[]
-    /** @deprecated Use tooltipProps for Blueprint specific props or add concrete properties in all other cases. */
-    [key: string]: any
+export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
+    /**
+     * Add dotted underline as visual indication to the target that a tooltip is attached.
+     * Should be used together with text-only elements.
+     */
+    addIndicator?: boolean;
+    /**
+     * The size specifies the dimension the tooltip overlay element can maximal grow.
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * The tolltip will be attached to this element when it is hovered.
+     */
+    children: React.ReactNode | React.ReactNode[];
 }
 
 function Tooltip({
@@ -23,7 +30,6 @@ function Tooltip({
     className = "",
     size = "medium",
     addIndicator = false,
-    tooltipProps = {},
     ...otherProps
 }: TooltipProps) {
     return (
@@ -32,13 +38,12 @@ function Tooltip({
             hoverOpenDelay={500}
             {...otherProps}
             content={content}
-            {...tooltipProps}
             className={
                 `${eccgui}-tooltip__wrapper` +
                 (className ? " " + className : "") +
-                (addIndicator === true ? " " + BlueprintClassNames.TOOLTIP_INDICATOR : "")
+                (addIndicator === true ? " " + TOOLTIP2_INDICATOR : "")
             }
-            targetClassName={`${eccgui}-tooltip__target` + (className ? " " + className + "__target" : "")}
+            //targetClassName={`${eccgui}-tooltip__target` + (className ? " " + className + "__target" : "")}
             popoverClassName={
                 `${eccgui}-tooltip__content` +
                 ` ${eccgui}-tooltip--${size}` +

package/src/components/Tooltip/tooltip.scss

@@ -3,16 +3,16 @@ $eccgui-size-typo-tooltip: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-tooltip-lineheight: $eccgui-size-typo-caption-lineheight !default;
 $eccgui-size-tooltip-width: 20em !default;
 // library vars
-$tooltip-background-color: $eccgui-color-applicationheader-text; // !default;
-$tooltip-text-color: $eccgui-color-applicationheader-background; // !default;
+$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;
-$tooltip-padding-vertical: $eccgui-size-block-whitespace/4; // !default;
-$tooltip-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/core/src/components/tooltip/tooltip";
+@import "~@blueprintjs/popover2/src/tooltip2";
 
-.#{$ns}-tooltip {
+.#{$ns}-tooltip2 {
     font-size: $eccgui-size-typo-tooltip;
     line-height: $eccgui-size-typo-tooltip-lineheight;
     white-space: normal;
@@ -20,7 +20,7 @@ $tooltip-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;
     }
 }
@@ -209,6 +209,7 @@ table {
     white-space: nowrap;
     // display: inherit;
     max-width: 100%;
+    vertical-align: middle;
 }
 
 .#{$eccgui}-typography__overflowtext--inline {
@@ -275,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/components/interfaces.ts

@@ -1,3 +1,5 @@
 export interface TestableComponent {
     "data-test-id"?: string
-}
+}
+
+export type { ContextOverlayProps } from "./ContextOverlay/ContextOverlay";

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>
     );
-}
+};