@eccenca/gui-elements 24.4.1 → 25.0.0-rc.1

package/src/extensions/react-flow/nodes/NodeDefault.tsx

@@ -1,21 +1,25 @@
 import React, { memo } from "react";
-import { NodeProps as ReactFlowNodeProps, Position } from "react-flow-renderer";
+import { NodeProps as ReactFlowNodeV9Props } from "react-flow-renderer";
+import { NodeProps as ReactFlowNodeV12Props, Position } from "@xyflow/react";
 
 import { Tooltip } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 import { NodeContent, NodeContentProps } from "./NodeContent";
 
-export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any>
-    extends ReacFlowVersionSupportProps,
-        ReactFlowNodeProps {
+interface NodeDefaultExtendedProps<CONTENT_PROPS = any> extends ReacFlowVersionSupportProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.
      */
-    data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>;
+    data: NodeContentProps<CONTENT_PROPS>;
 }
 
+type NodeDefaultV9Props<CONTENT_PROPS = any> = NodeDefaultExtendedProps<CONTENT_PROPS> & ReactFlowNodeV9Props;
+type NodeDefaultV12Props<CONTENT_PROPS = any> = NodeDefaultExtendedProps<CONTENT_PROPS> & Omit<ReactFlowNodeV12Props, "data">;
+
+export type NodeDefaultProps<CONTENT_PROPS = any> = NodeDefaultV9Props<CONTENT_PROPS> | NodeDefaultV12Props<CONTENT_PROPS>;
+
 /**
  * The `NodeDefault` element manages the display of React-Flow nodes.
  * This element cannot be used directly, it must be connected via a `nodeTypes` definition and all properties need to be routed through the `elements` property items inside the `ReactFlow` container.

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -6,7 +6,7 @@
         inset: -6 * $reactflow-node-border-width;
         z-index: 0;
         content: " ";
-        background-color: rgba($reactflow-edge-stroke-color-selected, 0.05);
+        background-color: eccgui-color-rgba($reactflow-edge-stroke-color-selected, 0.05);
         border-color: $reactflow-edge-stroke-color-selected;
         border-style: dotted;
         border-width: 1px;
@@ -29,6 +29,12 @@
             box-shadow: none;
         }
     }
+
+    &.selected,
+    &:focus,
+    &:focus-visible {
+        outline: none;
+    }
 }
 
 .#{$eccgui}-graphviz__node {
@@ -47,7 +53,7 @@
     border-radius: $reactflow-node-border-radius;
 
     &:hover {
-        box-shadow: 0 0 0 6 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
+        box-shadow: 0 0 0 6 * $reactflow-node-border-width eccgui-color-rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
 
     &.was-resized.is-resizable-vertical {
@@ -193,13 +199,13 @@
 
 .#{$eccgui}-graphviz__node__header-label {
     display: inline-flex;
-    flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
+    flex-direction: column;
     margin: 0 $eccgui-size-block-whitespace * 0.25;
     overflow: hidden;
-    text-align: left;
     text-overflow: ellipsis;
+    text-align: left;
     white-space: nowrap;
 }
 
@@ -242,24 +248,24 @@
 
 .#{$eccgui}-graphviz__node__resizer--cursorhandles {
     position: absolute;
-    height: 0;
-    width: 0;
-    bottom: 0;
     right: 0;
-    overflow: visible;
+    bottom: 0;
     display: none;
+    width: 0;
+    height: 0;
+    overflow: visible;
 
     & > div {
-        overflow: visible;
-        z-index: 0 !important;
-        height: $reactflow-cursor-delimiter-offset * 3 !important;
-        width: $reactflow-cursor-delimiter-offset * 3 !important;
         top: unset !important;
-        left: unset !important;
-        bottom: -1 * $reactflow-cursor-delimiter-offset !important;
         right: -1 * $reactflow-cursor-delimiter-offset !important;
-        border-bottom: $reactflow-node-border-width solid $reactflow-node-border-color;
+        bottom: -1 * $reactflow-cursor-delimiter-offset !important;
+        left: unset !important;
+        z-index: 0 !important;
+        width: $reactflow-cursor-delimiter-offset * 3 !important;
+        height: $reactflow-cursor-delimiter-offset * 3 !important;
+        overflow: visible;
         border-right: $reactflow-node-border-width solid $reactflow-node-border-color;
+        border-bottom: $reactflow-node-border-width solid $reactflow-node-border-color;
 
         .#{$eccgui}-graphviz__node__resizer--right:not(.#{$eccgui}-graphviz__node__resizer--bottom) & {
             bottom: 0 !important;
@@ -437,8 +443,8 @@
 .#{$eccgui}-graphviz__node--introduction-runs {
     animation-name: outline;
     animation-duration: var(--node-introduction-time);
-    animation-play-state: running;
     animation-timing-function: linear;
+    animation-play-state: running;
 
     &[data-introduction-animation="landing"] {
         animation-name: landing;
@@ -450,48 +456,48 @@
 
     @keyframes landing {
         0% {
-            filter: blur($eccgui-size-block-whitespace);
             outline: solid 0 rgb(0 0 0 / 0%);
             outline-offset: 0;
             opacity: 0;
+            filter: blur($eccgui-size-block-whitespace);
             transform: scale(2);
         }
 
         61% {
-            filter: blur(0);
             outline: solid 0 rgb(0 0 0 / 39%);
             outline-offset: 0;
             opacity: 1;
+            filter: blur(0);
             transform: scale(1);
         }
 
         100% {
-            filter: blur(0);
             outline: solid $eccgui-size-block-whitespace rgb(0 0 0 / 0%);
             outline-offset: 2 * $eccgui-size-block-whitespace;
             opacity: 1;
+            filter: blur(0);
             transform: scale(1);
         }
     }
 
     @keyframes outline {
         0% {
-            outline: solid 0 rgba($eccgui-color-accent, 0);
+            outline: solid 0 eccgui-color-rgba($eccgui-color-accent, 0);
             outline-offset: 0;
         }
 
         9% {
-            outline: solid 0.5 * $eccgui-size-block-whitespace rgba($eccgui-color-accent, 0.39);
+            outline: solid 0.5 * $eccgui-size-block-whitespace eccgui-color-rgba($eccgui-color-accent, 0.39);
             outline-offset: 0;
         }
 
         85% {
-            outline: solid 0.5 * $eccgui-size-block-whitespace rgba($eccgui-color-accent, 0.39);
+            outline: solid 0.5 * $eccgui-size-block-whitespace eccgui-color-rgba($eccgui-color-accent, 0.39);
             outline-offset: 0;
         }
 
         100% {
-            outline: solid 0 rgba($eccgui-color-accent, 0);
+            outline: solid 0 eccgui-color-rgba($eccgui-color-accent, 0);
             outline-offset: 2 * $eccgui-size-block-whitespace;
         }
     }

package/src/extensions/react-flow/nodes/nodeUtils.tsx

@@ -1,15 +1,23 @@
 import { CSSProperties } from "react";
-import {Node, XYPosition} from "react-flow-renderer";
+import {Node as NodeV9, XYPosition as XYPositionV9} from "react-flow-renderer";
+import {Node as NodeV12, XYPosition as XYPositionV12} from "@xyflow/react";
 import Color from "color";
 import {NodeDimensions} from "./NodeContent";
 
-/** A sticky note for display in the UI as returned from the backend. */
-export interface StickyNote {
+interface StickyNoteBase {
     id: string;
     content: string;
     color: string;
-    position: XYPosition & NodeDimensions;
 }
+interface StickyNotePositionV9 {
+    position: XYPositionV9 & NodeDimensions;
+}
+interface StickyNotePositionV12 {
+    position: XYPositionV12 & NodeDimensions;
+}
+
+/** A sticky note for display in the UI as returned from the backend. */
+export type StickyNote = (StickyNoteBase & StickyNotePositionV9) | (StickyNoteBase & StickyNotePositionV12);
 
 /**
  * converts a react-flow node with
@@ -17,7 +25,7 @@ export interface StickyNote {
  * @param node
  * @returns {StickyNote}
  */
-const transformNodeToStickyNode = (node: Node<any>): StickyNote => {
+const transformNodeToStickyNode = (node: NodeV9<any> | NodeV12<any>): StickyNote => {
     return {
         id: node.id,
         content: node.data.businessData.stickyNote!,
@@ -41,7 +49,8 @@ const generateStyleWithColor = (color: string): CSSProperties => {
             borderColor: color,
             color: colorObj.isLight() ? "#000" : "#fff",
         };
-    } catch (ex) {
+    } catch {
+        // eslint-disable-next-line no-console
         console.warn("Received invalid color for sticky note: " + color);
     }
     return style;

package/src/extensions/react-flow/nodes/stories/NodeDefault.stories.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Elements } from "react-flow-renderer";
+import { Elements, Node } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { ReactFlow } from "./../../../../cmem";
-import { NodeContent } from "./../NodeContent";
 import { NodeDefault } from "./../NodeDefault";
 import { Default as NodeContentExample } from "./NodeContent.stories";
 import { nodeTypes } from "./nodeTypes";
@@ -97,10 +96,9 @@ export default {
     },
 } as Meta<typeof NodeDefault>;
 
-const NodeDefaultExample = (args: any) => {
+const NodeDefaultExample = (args: Node) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
-    //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
 
     useEffect(() => {
         setElements([args] as Elements);
@@ -126,7 +124,7 @@ const NodeDefaultExample = (args: any) => {
     );
 };
 
-const Template: StoryFn<typeof NodeDefault> = (args) => <NodeDefaultExample {...args} /*some comment*/ />;
+const Template: StoryFn<typeof NodeDefaultExample> = (args) => <NodeDefaultExample {...args} /*some comment*/ />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/extensions/react-flow/versionsupport.ts

@@ -1,27 +1,29 @@
-import { useStoreState as getStoreStateFlowLegacy } from "react-flow-renderer";
-import { useStore as getStoreStateFlowNext } from "react-flow-renderer-lts";
-import { useStore as useStoreFlowV12 } from "@xyflow/react";
+import { useStoreState as getStoreStateFlowV9 } from "react-flow-renderer";
+import { useStore as useStoreStateFlowV12 } from "@xyflow/react";
+
+export const enum ReactFlowVersions {
+    NONE = "none", // mainly here in case some ReactFlow components are used without any react flow containr
+    V9 = "v9",
+    V12 = "v12",
+}
 
 export interface ReacFlowVersionSupportProps {
     /**
-     * Spevifies the context of the react flow renderer version that is used for the component.
-     * @deprecated (v25) `legacy` and `next` will be removed/replaced by `v##` values in future versions
+     * Specifies the context of the react flow renderer version that is used for the component.
      */
-    flowVersion?: "v12" | "legacy" | "next" | "none";
+    flowVersion?: ReactFlowVersions.V9 | ReactFlowVersions.V12 | ReactFlowVersions.NONE;
 }
 
 export const useReactFlowVersion = () => {
     try {
-        const [, , zoom] = getStoreStateFlowLegacy((state) => state.transform);
-        return zoom ? "legacy" : "none";
-    } catch {}
-    try {
-        const [, , zoom] = getStoreStateFlowNext((state) => state.transform);
-        return zoom ? "next" : "none";
+        const [, , zoom] = getStoreStateFlowV9((state) => state.transform);
+        return zoom ? ReactFlowVersions.V9 : ReactFlowVersions.NONE;
+        // eslint-disable-next-line no-empty
     } catch {}
     try {
-        const [, , zoom] = useStoreFlowV12((state) => state.transform);
-        return zoom ? "v12" : "none";
+        const [, , zoom] = useStoreStateFlowV12((state) => state.transform);
+        return zoom ? ReactFlowVersions.V12 : ReactFlowVersions.NONE;
+        // eslint-disable-next-line no-empty
     } catch {}
-    return "none";
+    return ReactFlowVersions.NONE;
 };

package/src/extensions/uppy/_fileupload.scss

@@ -4,7 +4,7 @@
 
 $eccgui-size-fileupload-border-width: $button-border-width;
 $eccgui-size-fileupload-border-radius: $button-border-radius;
-$eccgui-color-fileupload-border: rgba($black, $pt-drop-shadow-opacity);
+$eccgui-color-fileupload-border: eccgui-color-rgba($black, $pt-drop-shadow-opacity);
 $eccgui-color-fileupload-background: $eccgui-color-accordion-background-elevated;
 $eccgui-color-fileupload-text: inherit;
 
@@ -36,7 +36,7 @@ $eccgui-color-fileupload-text: inherit;
 }
 
 .uppy-DragDrop--isDraggingOver.uppy-DragDrop--isDragDropSupported {
-    background-color: rgba($eccgui-color-accent, $eccgui-opacity-ghostly);
+    background-color: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-ghostly);
     box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
 
     & > * {

package/src/includes/blueprintjs/_colormap.scss

@@ -0,0 +1,150 @@
+/**
+ * We map our color palette to the internal color variables of BlueprintJS here.
+ *
+ * blue -> identity info
+ * green -> identity success
+ * orange -> identity warning
+ * red -> identity danger
+ * vermilion -> layout vermilion
+ * rose -> layout pink
+ * violet -> layout violet
+ * indigo -> layout indigo
+ * cerulean -> layout cyan
+ * turquoise -> layout teal
+ * forest -> blueprint green
+ * lime -> layout lime
+ * gold -> extra gold
+ * sepia -> extra bronze
+ */
+
+// Gray scale
+
+$black: eccgui-color-var("identity", "text", "900") !default;
+$dark-gray1: eccgui-color-var("layout", "grey", "900") !default;
+$dark-gray2: eccgui-color-mix(
+    eccgui-color-var("layout", "grey", "900") 80%,
+    eccgui-color-var("layout", "grey", "700")
+) !default;
+$dark-gray3: eccgui-color-mix(
+    eccgui-color-var("layout", "grey", "900") 60%,
+    eccgui-color-var("layout", "grey", "700")
+) !default;
+$dark-gray4: eccgui-color-mix(
+    eccgui-color-var("layout", "grey", "900") 40%,
+    eccgui-color-var("layout", "grey", "700")
+) !default;
+$dark-gray5: eccgui-color-mix(
+    eccgui-color-var("layout", "grey", "900") 20%,
+    eccgui-color-var("layout", "grey", "700")
+) !default;
+$gray1: eccgui-color-mix(
+    eccgui-color-var("layout", "grey", "500") 33%,
+    eccgui-color-var("layout", "grey", "700")
+) !default;
+$gray2: eccgui-color-mix(
+    eccgui-color-var("layout", "grey", "500") 66%,
+    eccgui-color-var("layout", "grey", "700")
+) !default;
+$gray3: eccgui-color-var("layout", "grey", "500") !default;
+$gray4: eccgui-color-mix(
+    eccgui-color-var("layout", "grey", "500") 66%,
+    eccgui-color-var("layout", "grey", "300")
+) !default;
+$gray5: eccgui-color-mix(
+    eccgui-color-var("layout", "grey", "500") 33%,
+    eccgui-color-var("layout", "grey", "300")
+) !default;
+$light-gray1: eccgui-color-mix(
+    eccgui-color-var("layout", "grey", "100") 20%,
+    eccgui-color-var("layout", "grey", "300")
+) !default;
+$light-gray2: eccgui-color-mix(
+    eccgui-color-var("layout", "grey", "100") 40%,
+    eccgui-color-var("layout", "grey", "300")
+) !default;
+$light-gray3: eccgui-color-mix(
+    eccgui-color-var("layout", "grey", "100") 60%,
+    eccgui-color-var("layout", "grey", "300")
+) !default;
+$light-gray4: eccgui-color-mix(
+    eccgui-color-var("layout", "grey", "100") 80%,
+    eccgui-color-var("layout", "grey", "300")
+) !default;
+$light-gray5: eccgui-color-var("layout", "grey", "100") !default;
+$white: eccgui-color-var("identity", "background", "100") !default;
+
+// Core colors
+
+$blue1: eccgui-color-var("semantic", "info", "900") !default;
+$blue2: eccgui-color-var("semantic", "info", "700") !default;
+$blue3: eccgui-color-var("semantic", "info", "500") !default;
+$blue4: eccgui-color-var("semantic", "info", "300") !default;
+$blue5: eccgui-color-var("semantic", "info", "100") !default;
+$green1: eccgui-color-var("semantic", "success", "900") !default;
+$green2: eccgui-color-var("semantic", "success", "700") !default;
+$green3: eccgui-color-var("semantic", "success", "500") !default;
+$green4: eccgui-color-var("semantic", "success", "300") !default;
+$green5: eccgui-color-var("semantic", "success", "100") !default;
+$orange1: eccgui-color-var("semantic", "warning", "900") !default;
+$orange2: eccgui-color-var("semantic", "warning", "700") !default;
+$orange3: eccgui-color-var("semantic", "warning", "500") !default;
+$orange4: eccgui-color-var("semantic", "warning", "300") !default;
+$orange5: eccgui-color-var("semantic", "warning", "100") !default;
+$red1: eccgui-color-var("semantic", "danger", "900") !default;
+$red2: eccgui-color-var("semantic", "danger", "700") !default;
+$red3: eccgui-color-var("semantic", "danger", "500") !default;
+$red4: eccgui-color-var("semantic", "danger", "300") !default;
+$red5: eccgui-color-var("semantic", "danger", "100") !default;
+
+// Extended colors
+
+$vermilion1: eccgui-color-var("layout", "vermilion", "900") !default;
+$vermilion2: eccgui-color-var("layout", "vermilion", "700") !default;
+$vermilion3: eccgui-color-var("layout", "vermilion", "500") !default;
+$vermilion4: eccgui-color-var("layout", "vermilion", "300") !default;
+$vermilion5: eccgui-color-var("layout", "vermilion", "100") !default;
+$rose1: eccgui-color-var("layout", "pink", "900") !default;
+$rose2: eccgui-color-var("layout", "pink", "700") !default;
+$rose3: eccgui-color-var("layout", "pink", "500") !default;
+$rose4: eccgui-color-var("layout", "pink", "300") !default;
+$rose5: eccgui-color-var("layout", "pink", "100") !default;
+$violet1: eccgui-color-var("layout", "violet", "900") !default;
+$violet2: eccgui-color-var("layout", "violet", "700") !default;
+$violet3: eccgui-color-var("layout", "violet", "500") !default;
+$violet4: eccgui-color-var("layout", "violet", "300") !default;
+$violet5: eccgui-color-var("layout", "violet", "100") !default;
+$indigo1: eccgui-color-var("layout", "indigo", "900") !default;
+$indigo2: eccgui-color-var("layout", "indigo", "700") !default;
+$indigo3: eccgui-color-var("layout", "indigo", "500") !default;
+$indigo4: eccgui-color-var("layout", "indigo", "300") !default;
+$indigo5: eccgui-color-var("layout", "indigo", "100") !default;
+$cerulean1: eccgui-color-var("layout", "cyan", "900") !default;
+$cerulean2: eccgui-color-var("layout", "cyan", "700") !default;
+$cerulean3: eccgui-color-var("layout", "cyan", "500") !default;
+$cerulean4: eccgui-color-var("layout", "cyan", "300") !default;
+$cerulean5: eccgui-color-var("layout", "cyan", "100") !default;
+$turquoise1: eccgui-color-var("layout", "teal", "900") !default;
+$turquoise2: eccgui-color-var("layout", "teal", "700") !default;
+$turquoise3: eccgui-color-var("layout", "teal", "500") !default;
+$turquoise4: eccgui-color-var("layout", "teal", "300") !default;
+$turquoise5: eccgui-color-var("layout", "teal", "100") !default;
+$forest1: $green1 !default;
+$forest2: $green2 !default;
+$forest3: $green3 !default;
+$forest4: $green4 !default;
+$forest5: $green5 !default;
+$lime1: eccgui-color-var("layout", "lime", "900") !default;
+$lime2: eccgui-color-var("layout", "lime", "700") !default;
+$lime3: eccgui-color-var("layout", "lime", "500") !default;
+$lime4: eccgui-color-var("layout", "lime", "300") !default;
+$lime5: eccgui-color-var("layout", "lime", "100") !default;
+$gold1: eccgui-color-var("extra", "gold", "900") !default;
+$gold2: eccgui-color-var("extra", "gold", "700") !default;
+$gold3: eccgui-color-var("extra", "gold", "500") !default;
+$gold4: eccgui-color-var("extra", "gold", "300") !default;
+$gold5: eccgui-color-var("extra", "gold", "100") !default;
+$sepia1: eccgui-color-var("extra", "bronze", "900") !default;
+$sepia2: eccgui-color-var("extra", "bronze", "700") !default;
+$sepia3: eccgui-color-var("extra", "bronze", "500") !default;
+$sepia4: eccgui-color-var("extra", "bronze", "300") !default;
+$sepia5: eccgui-color-var("extra", "bronze", "100") !default;

package/src/includes/blueprintjs/_variables.scss

@@ -1,21 +1,52 @@
-@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;
 
-// Color aliases
+/**
+ * Color aliases
+ *
+ * original: https://github.com/palantir/blueprint/blob/develop/packages/core/src/common/_color-aliases.scss
+ */
 
 $pt-intent-primary: $eccgui-color-accent !default;
 $pt-intent-success: $eccgui-color-success-text !default;
 $pt-intent-warning: $eccgui-color-warning-text !default;
 $pt-intent-danger: $eccgui-color-danger-text !default;
-$pt-outline-color: rgba($eccgui-color-accent, 0.6);
-$pt-text-color: $eccgui-color-application-text !default;
+$pt-app-background-color: $eccgui-color-workspace-background !default;
+$pt-app-secondary-background-color: eccgui-color-var("identity", "background", "300") !default;
+$pt-app-elevated-background-color: eccgui-color-var("identity", "background", "500") !default;
+$pt-outline-color: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) !default;
+$pt-focus-indicator-color: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-narrow) !default;
+$pt-text-color: $eccgui-color-workspace-text !default;
+$pt-text-color-muted: eccgui-color-var("identity", "text", "500") !default;
+$pt-text-color-disabled: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled) !default;
+$pt-heading-color: $pt-text-color !default;
+$pt-link-color: $eccgui-color-accent !default;
+$pt-text-selection-color: eccgui-color-rgba(
+    eccgui-color-var("identity", "accent", "300"),
+    $eccgui-opacity-muted
+) !default;
+$pt-icon-color: $eccgui-color-workspace-text !default;
+$pt-icon-color-hover: $eccgui-color-workspace-text !default;
+$pt-icon-color-disabled: $pt-text-color-disabled !default;
+$pt-icon-color-selected: $pt-intent-primary !default;
+$pt-divider-black: eccgui-color-rgba(eccgui-color-var("identity", "text", "500"), $eccgui-opacity-ghostly) !default;
+$pt-divider-black-muted: eccgui-color-rgba(
+    eccgui-color-var("identity", "text", "300"),
+    $eccgui-opacity-ghostly
+) !default;
+$pt-code-text-color: $pt-text-color !default;
+$pt-code-background-color: $eccgui-color-workspace-background !default;
 
-// Size aliases
+/**
+ * Size aliases
+ */
 
 // easily the most important variable, so it comes up top
 // (so other variables can use it to define themselves)
@@ -26,6 +57,5 @@ $pt-font-size: $eccgui-size-typo-text !default;
 $pt-font-size-large: $eccgui-size-typo-subtitle !default;
 $pt-font-size-small: $eccgui-size-typo-caption !default;
 $pt-line-height: $eccgui-size-typo-text-lineheight !default;
-
 $pt-icon-size-standard: 20px !default;
 $pt-icon-size-large: 32px !default;

package/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;
@@ -90,16 +109,12 @@ $background-hover: $hover-ui !default;
 $layer-hover-01: $hover-ui !default;
 $field-hover-01: $hover-ui !default;
 $field-hover-02: $hover-ui !default;
-$disabled-02: rgba($text-primary, $eccgui-opacity-disabled) !default;
+$disabled-02: eccgui-color-rgba($text-primary, $eccgui-opacity-disabled) !default;
 $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";

package/src/index.scss

@@ -1,3 +1,11 @@
+// == library prefix for variables and selectors ===============================
+
+@import "./configuration/libprefix";
+
+// == load helper functions ====================================================
+
+@import "./common/scss/color-functions";
+
 // == load default configuration ===============================================
 
 @import "./configuration/variables";
@@ -16,6 +24,9 @@
 // calculate blueprintjs configuration
 @import "./includes/blueprintjs/variables";
 
+// map our palette to BLueprint colors
+@import "./includes/blueprintjs/colormap";
+
 // load blueprintjs requisists
 @import "./includes/blueprintjs/requisits";
 

package/src/index.ts

@@ -3,7 +3,6 @@ import { Classes as BlueprintClasses } from "@blueprintjs/core";
 import { ClassNames as IntentClassNames } from "./common/Intent";
 import * as Skeleton from "./components/Skeleton/classnames";
 import * as TypographyClassNames from "./components/Typography/classnames";
-import * as LegacyReplacements from "./legacy-replacements";
 
 const ClassNames = {
     Blueprint: BlueprintClasses,
@@ -18,4 +17,4 @@ export * from "./components";
 export * from "./extensions";
 export * from "./cmem";
 
-export { ClassNames, LegacyReplacements };
+export { ClassNames };

package/dist/cjs/components/AutoSuggestion/index.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExtendedCodeEditor = exports.AutoSuggestionList = void 0;
-const AutoSuggestionList_1 = require("./AutoSuggestionList");
-Object.defineProperty(exports, "AutoSuggestionList", { enumerable: true, get: function () { return AutoSuggestionList_1.AutoSuggestionList; } });
-const ExtendedCodeEditor_1 = require("./ExtendedCodeEditor");
-Object.defineProperty(exports, "ExtendedCodeEditor", { enumerable: true, get: function () { return ExtendedCodeEditor_1.ExtendedCodeEditor; } });
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/AutoSuggestion/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/AutoSuggestion/index.ts"],"names":[],"mappings":";;;AACA,6DAAmF;AAG1E,mGAHA,uCAAkB,OAGA;AAF3B,6DAAmF;AAEtD,mGAFpB,uCAAkB,OAEoB"}

package/dist/cjs/components/AutocompleteField/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/AutocompleteField/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,qEAAwE;AACxE,sDAAoC;AACpC,+CAA6B;AAChB,QAAA,sBAAsB,GAAG;IAClC,4BAA4B,EAA5B,qDAA4B;CAC/B,CAAC"}