@eccenca/gui-elements 23.0.0 → 23.1.0-easynav.0

package/src/components/Typography/index.ts

@@ -0,0 +1,25 @@
+import Highlighter, { HighlighterProps } from "./Highlighter";
+import { extractSearchWords, matchesAllWords, createMultiWordRegex } from "./Highlighter";
+import HtmlContentBlock, { HtmlContentBlockProps } from "./HtmlContentBlock";
+import OverflowText, { OverflowTextProps } from "./OverflowText";
+import WhiteSpaceContainer, { WhiteSpaceContainerProps } from "./WhiteSpaceContainer";
+
+export type {
+    HighlighterProps,
+    HtmlContentBlockProps,
+    OverflowTextProps,
+    WhiteSpaceContainerProps
+};
+
+export {
+    Highlighter,
+    HtmlContentBlock,
+    OverflowText,
+    WhiteSpaceContainer,
+};
+
+export const HighlighterFunctions = {
+    extractSearchWords,
+    matchesAllWords,
+    createMultiWordRegex,
+};

package/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from "react-lorem-ipsum";
+import { WhiteSpaceContainer as WhiteSpaceContainerElement } from "../../../index";
+
+const whiteSpaceSizeOptions = {
+    control: "select",
+    options: {
+        "not set": undefined,
+        "tiny": "tiny",
+        "small": "small",
+        "regular": "regular",
+        "large": "large",
+        "xlarge": "xlarge"
+    }
+}
+
+export default {
+    title: "Components/Typography",
+    component: WhiteSpaceContainerElement,
+    argTypes: {
+        children: { control: "none" },
+        marginTop: {...whiteSpaceSizeOptions},
+        marginRight: {...whiteSpaceSizeOptions},
+        marginBottom: {...whiteSpaceSizeOptions},
+        marginLeft: {...whiteSpaceSizeOptions},
+        paddingTop: {...whiteSpaceSizeOptions},
+        paddingRight: {...whiteSpaceSizeOptions},
+        paddingBottom: {...whiteSpaceSizeOptions},
+        paddingLeft: {...whiteSpaceSizeOptions},
+    },
+} as ComponentMeta<typeof WhiteSpaceContainerElement>;
+
+const Template: ComponentStory<typeof WhiteSpaceContainerElement> = (args) => (
+    <WhiteSpaceContainerElement {...args} style={{background: "#eee"}}/>
+);
+
+const testContent = loremIpsum({
+    p: 2,
+    avgSentencesPerParagraph: 4,
+    random: false
+}).toString()
+
+export const WhiteSpaceContainer = Template.bind({});
+WhiteSpaceContainer.args = {
+    children: [
+        <p>{ testContent }</p>,
+        <p><strong>{ testContent.replaceAll(" ", "") }</strong></p>,
+        <p>{ testContent }</p>
+    ],
+    paddingTop: "tiny",
+    paddingRight: "small",
+    paddingBottom: "regular",
+    paddingLeft: "large",
+}

package/src/components/Typography/typography.scss

@@ -205,7 +205,7 @@ table {
 .#{$eccgui}-typography__overflowtext--passdown * {
     overflow: hidden;
     text-overflow: ellipsis;
-    word-wrap: normal;
+    overflow-wrap: normal;
     white-space: nowrap;
     // display: inherit;
     max-width: 100%;
@@ -254,7 +254,8 @@ table {
 }
 
 .#{$eccgui}-typography--forcelinebreak {
-    word-break: break-all;
+    word-break: normal;
+    overflow-wrap: anywhere;
 }
 
 .#{$eccgui}-typography--preventlinebreak {

package/src/components/Workspace/WorkspaceContent.tsx

@@ -12,7 +12,7 @@ function WorkspaceContent({ children, className = '', ...restProps }: any) {
             className={`${eccgui}-workspace__content ` + className}
             fullWidth={true}
         >
-            <GridRow>
+            <GridRow dontWrapColumns={false}>
                 { children }
             </GridRow>
         </Grid>

package/src/components/index.scss

@@ -0,0 +1,5 @@
+@import "./Badge/badge";
+@import "./Depiction/depiction";
+@import "./Icon/icon";
+@import "./Tree/tree";
+@import "./Typography/typography";

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./Badge/Badge";
+export * from "./Depiction/Depiction";
+export * from "./Icon";
+export * from "./Tree/Tree";
+export * from "./Typography";

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -1,29 +1,50 @@
 import React, {memo} from 'react';
 import {
-    HandleProps as ReactFlowHandleProps,
-    Handle,
+    HandleProps as ReactFlowHandleLegacyProps,
+    Handle as HandleLegacy,
 } from "react-flow-renderer";
+import {
+    HandleProps as ReactFlowHandleNextProps,
+    Handle as HandleNext,
+} from "react-flow-renderer-lts";
 import { HandleContent, HandleContentProps } from "./HandleContent";
+import { ReacFlowVersionSupportProps } from "../versionsupport";
 
-export interface HandleProps extends ReactFlowHandleProps {
+interface HandleExtensionProps extends ReacFlowVersionSupportProps {
     data?: HandleContentProps;
     tooltip?: string;
     children?: JSX.Element | string;
+    onClick?: () => void;
+}
+
+export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {
+}
+
+export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {
 }
 
 export const HandleDefault = memo(({
+    flowVersion = "legacy",
     data,
     tooltip,
     children,
     ...handleProps
-}: HandleProps) => {
+}: HandleProps | HandleNextProps) => {
     const tooltipTitle = !!tooltip ? { title: tooltip } : {};
 
-    return (
-        <Handle {...handleProps} {...tooltipTitle}>
-            <HandleContent {...data}>
-                { children }
-            </HandleContent>
-        </Handle>
+    const handleContent = (
+        <HandleContent {...data}>
+            { children }
+        </HandleContent>
+    );
+
+    return flowVersion === "legacy" ? (
+        <HandleLegacy {...handleProps} {...tooltipTitle}>
+            { handleContent }
+        </HandleLegacy>
+    ) : (
+        <HandleNext {...handleProps} {...tooltipTitle}>
+            { handleContent }
+        </HandleNext>
     );
 });

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

@@ -1,9 +1,12 @@
 import React from "react";
-import { Position, useStoreState } from "react-flow-renderer";
-import { Icon, Tooltip } from "../../../index";
+import { Position, useStoreState as useStoreStateFlowLegacy } from "react-flow-renderer";
+import { useStore as useStoreStateFlowNext } from "react-flow-renderer-lts";
+import { Icon, Depiction } from "../../../index";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { HandleDefault, HandleProps } from "./../handles/HandleDefault";
+import { DepictionProps } from "../../../components/Depiction/Depiction";
+import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { HandleDefault, HandleProps, HandleNextProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { Resizable } from "re-resizable";
@@ -14,6 +17,10 @@ export interface IHandleProps extends HandleProps {
     category?: "configuration";
 }
 
+interface NodeContentHandleNextProps extends HandleNextProps {
+    category?: "configuration";
+}
+
 export type NodeDimensions = {
     width: number;
     height: number;
@@ -26,9 +33,14 @@ interface NodeContentData<CONTENT_PROPS = any> {
      */
     iconName?: ValidIconName;
     /**
-     * Valid and accessible URL or `data-uri` for an image that should be displayed before the node label.
+     * Depiction element that should be displayed before the node label.
+     * As alternative a valid and accessible URL or `data-uri` for an image can be set, then the Depiction element is created automatically.
+     */
+    depiction?: string | React.ReactElement<DepictionProps>;
+    /**
+     * Any element that should be displayed as depiction before the node label.
      */
-    depiction?: string;
+    leftElement?: JSX.Element;
     /**
      * Label that is displayed in the node header.
      */
@@ -48,7 +60,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
 }
 
 export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
-    extends NodeContentData,
+    extends NodeContentData, ReacFlowVersionSupportProps,
         React.HTMLAttributes<HTMLDivElement> {
     /**
      * Size of the node.
@@ -90,7 +102,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * Array of property definition objects for `Handle` components that need to be created for the node.
      * @see https://reactflow.dev/docs/api/handle/
      */
-    handles?: IHandleProps[];
+    handles?: IHandleProps[] | NodeContentHandleNextProps[];
     /**
      * Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
      */
@@ -153,13 +165,22 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
     nodeDimensions?: NodeDimensions;
 }
 
-interface MemoHandlerProps extends HandleProps {
+interface MemoHandlerLegacyProps extends HandleProps {
     posdirection: string;
     style: {
         [key: string]: string | undefined;
     };
 }
 
+interface MemoHandlerNextProps extends HandleNextProps {
+    posdirection: string;
+    style: {
+        [key: string]: string | undefined;
+    };
+}
+
+type MemoHandlerProps = MemoHandlerLegacyProps | MemoHandlerNextProps;
+
 const defaultHandles = [{ type: "target" }, { type: "source" }] as IHandleProps[];
 
 const getDefaultMinimalTooltipData = (node: any) => {
@@ -171,7 +192,7 @@ const getDefaultMinimalTooltipData = (node: any) => {
     };
 };
 
-const addHandles = (handles: any, position: any, posDirection: any, isConnectable: any, nodeStyle: any) => {
+const addHandles = (handles: any, position: any, posDirection: any, isConnectable: any, nodeStyle: any, flowVersion: any = "legacy") => {
     return handles[position].map((handle: any, idx: any) => {
         const { className, style = {}, category } = handle;
         const styleAdditions: { [key: string]: string } = {
@@ -191,22 +212,10 @@ const addHandles = (handles: any, position: any, posDirection: any, isConnectabl
                     : className,
             },
         };
-        return <MemoHandler {...handleProperties} key={"handle" + idx} />;
+        return <MemoHandler flowVersion={flowVersion} {...handleProperties} key={"handle" + idx} />;
     });
 };
 
-const imgWithTooltip = (imgEl: any, tooltipText: any) => {
-    if (!!tooltipText) {
-        return (
-            <Tooltip content={tooltipText}>
-                <span>{imgEl}</span>
-            </Tooltip>
-        );
-    }
-
-    return imgEl;
-};
-
 export const gethighlightedStateClasses = (state: any, baseClassName: any) => {
     let hightlights = typeof state === "string" ? [state] : state;
     //@ts-ignore
@@ -226,8 +235,10 @@ const MemoHandler = React.memo(
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
 export function NodeContent<CONTENT_PROPS = any>({
+    flowVersion = "legacy",
     iconName,
     depiction,
+    leftElement,
     typeLabel,
     label,
     showExecutionButtons = true,
@@ -261,14 +272,16 @@ export function NodeContent<CONTENT_PROPS = any>({
 }: NodeContentProps<any>) {
     const [width, setWidth] = React.useState<number>(nodeDimensions?.width ?? 0);
     const [height, setHeight] = React.useState<number>(nodeDimensions?.height ?? 0);
-    const [, , zoom] = useStoreState((state) => state.transform);
+    const [, , zoom] = flowVersion === "legacy"
+        ? useStoreStateFlowLegacy((state) => state.transform)
+        : useStoreStateFlowNext((state) => state.transform);
     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({});
     const nodeContentRef = React.useRef<any>();
-    const handleStack: { [key: string]: IHandleProps[] } = {};
-    handleStack[Position.Top] = [] as IHandleProps[];
-    handleStack[Position.Right] = [] as IHandleProps[];
-    handleStack[Position.Bottom] = [] as IHandleProps[];
-    handleStack[Position.Left] = [] as IHandleProps[];
+    const handleStack = flowVersion==="legacy" ? {} as { [key: string]: IHandleProps[] } : {} as { [key: string]: NodeContentHandleNextProps[] };
+    handleStack[Position.Top] = flowVersion==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
+    handleStack[Position.Right] = flowVersion==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
+    handleStack[Position.Bottom] = flowVersion==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
+    handleStack[Position.Left] = flowVersion==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
 
     // initial dimension before resize
     React.useEffect(() => {
@@ -342,14 +355,31 @@ export function NodeContent<CONTENT_PROPS = any>({
                 }
             >
                 <header className={`${eccgui}-graphviz__node__header`}>
-                    {(!!iconName || !!depiction) && (
+                    {(!!iconName || !!depiction || !!leftElement) && (
                         <span className={`${eccgui}-graphviz__node__header-depiction`}>
-                            {!!depiction &&
-                                imgWithTooltip(
-                                    <img src={depiction} alt="" />,
-                                    minimalShape === "none" || selected ? typeLabel : undefined
-                                )}
-                            {!!iconName && !depiction && (
+                            { leftElement }
+                            {!!depiction && !leftElement && typeof depiction === "string" && (
+                                <Depiction
+                                    image={<img src={depiction} alt="" />}
+                                    caption={minimalShape === "none" || selected ? typeLabel : undefined}
+                                    captionPosition="tooltip"
+                                    padding="tiny"
+                                    ratio="1:1"
+                                    resizing="contain"
+                                    forceInlineSvg
+                                />
+                            )}
+                            {!!depiction && !leftElement && typeof depiction !== "string" && (
+                                React.cloneElement(depiction, {
+                                    caption: minimalShape === "none" || selected ? typeLabel : undefined,
+                                    captionPosition: "tooltip",
+                                    padding: "tiny",
+                                    ratio: "1:1",
+                                    resizing: "contain",
+                                    forceInlineSvg: true,
+                                })
+                            )}
+                            {!!iconName && !leftElement && !depiction && (
                                 <Icon
                                     name={iconName}
                                     tooltipText={minimalShape === "none" || selected ? typeLabel : undefined}
@@ -383,10 +413,10 @@ export function NodeContent<CONTENT_PROPS = any>({
             </section>
             {!!handles && (
                 <>
-                    {addHandles(handleStack, Position.Top, "left", isConnectable, style)}
-                    {addHandles(handleStack, Position.Right, "top", isConnectable, style)}
-                    {addHandles(handleStack, Position.Bottom, "left", isConnectable, style)}
-                    {addHandles(handleStack, Position.Left, "top", isConnectable, style)}
+                    {addHandles(handleStack, Position.Top, "left", isConnectable, style, flowVersion)}
+                    {addHandles(handleStack, Position.Right, "top", isConnectable, style, flowVersion)}
+                    {addHandles(handleStack, Position.Bottom, "left", isConnectable, style, flowVersion)}
+                    {addHandles(handleStack, Position.Left, "top", isConnectable, style, flowVersion)}
                 </>
             )}
         </>

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

@@ -5,8 +5,9 @@ import {
 } from "react-flow-renderer";
 import { Tooltip } from "../../../index";
 import { NodeContent, NodeContentProps } from "./NodeContent";
+import { ReacFlowVersionSupportProps } from "../versionsupport";
 
-export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReactFlowNodeProps {
+export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.
@@ -22,6 +23,7 @@ export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReactFlo
 export const NodeDefault = memo(
     (node: NodeProps<any>) => {
         const {
+            flowVersion,
             data,
             targetPosition = Position.Left,
             sourcePosition = Position.Right,
@@ -29,7 +31,7 @@ export const NodeDefault = memo(
             selected
         } = node;
 
-        const nodeEl = <NodeContent {...{...data, targetPosition, sourcePosition, isConnectable, selected}} />
+        const nodeEl = <NodeContent {...{flowVersion, ...data, targetPosition, sourcePosition, isConnectable, selected}} />
 
         if (!selected && data?.minimalShape !== "none" && !!data?.getMinimalTooltipData) {
             const tooltipData = data?.getMinimalTooltipData(node);

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

@@ -151,13 +151,19 @@
     justify-content: center;
     align-items: center;
 
-    img {
-        max-width: calc(2 * (#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width}));
-        max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
-        height: auto;
-        width: auto;
-        display: inline-block;
-        pointer-events: none;
+    & .#{$eccgui}-depiction {
+        flex-grow: 0;
+        flex-shrink: 0;
+        align-self: stretch;
+
+        /*
+        Fix for Firefox,
+        the width of .#{$eccgui}-depiction container is not reduced to its content
+        when .#{$eccgui}-depiction__image updated to the available height.
+        */
+        .#{$eccgui}-depiction__image {
+            height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
+        }
     }
 }
 

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

@@ -6,6 +6,7 @@ import {
     OverflowText,
     HtmlContentBlock,
 } from "./../../../../index";
+import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
 
 import { NodeContent } from "./../NodeContent";
 import { nodeTypes } from "./../nodeTypes";
@@ -29,6 +30,10 @@ export default {
                 "Slide out example": <NodeContentExtension {...ContentExtensionExampleSlideOut.args} />,
             },
         },
+        iconName: {
+            control: "select",
+            options: [...(Object.keys(canonicalIcons))],
+        },
         content: { control: "none" },
         footerContent: { control: "none" },
         isConnectable: { table: { disable: true } },

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

@@ -0,0 +1,6 @@
+export interface ReacFlowVersionSupportProps {
+    /**
+     * Spevifies the context of the react flow renderer version that is used for the component.
+     */
+    flowVersion?: "legacy" | "next";
+}

package/src/includes/carbon-components/_components.scss

@@ -0,0 +1,11 @@
+/*
+    FIXME:
+    it's probably not necessary to include those elements because they should be included by
+    the Carbon components itself when they are necessary as sub components. We may remove this
+    file later when we haven't experiences any problems.
+*/
+// @use "~@carbon/styles/scss/components/select/index" as select;
+// @use "~@carbon/styles/scss/components/list-box/index" as list-box;
+// @use "~@carbon/styles/scss/components/dropdown/index" as dropdown;
+
+@use "~@carbon/styles/scss/components/popover/index" as popover; // necessary for pagination

package/src/includes/carbon-components/_requisits.scss

@@ -0,0 +1,18 @@
+@use "~@carbon/styles/scss/config" with (
+    $css--body: $css--body,
+    $css--font-face: $css--font-face,
+    $css--reset: $css--reset,
+    $css--default-type: $css--default-type,
+    $prefix: $prefix,
+    $flex-grid-columns: $flex-grid-columns,
+    $use-flexbox-grid: $use-flexbox-grid
+);
+@use "~@carbon/styles/scss/utilities/_visually-hidden";
+@import "~@carbon/styles/scss/feature-flags";
+@import "~@carbon/styles/scss/colors";
+@import "~@carbon/styles/scss/theme";
+:root {
+    @include theme;
+}
+@import "~@carbon/styles/scss/spacing";
+@import "~@carbon/styles/scss/utilities/z-index";

package/src/includes/carbon-components/_variables.scss

@@ -3,6 +3,11 @@
 // Stack of Carbon variables that are necessary to use their framework
 // TODO: calculate them from own configuration variables, all unchanged variables are commented out
 
+$prefix: "cds" !default;
+
+$flex-grid-columns: 16 !default;
+$use-flexbox-grid: true !default;
+
 /// If true, includes font face mixins in `_css--font-face.scss` depending on the `css--plex` feature flag
 $css--font-face: false !default;
 
@@ -24,86 +29,78 @@ $css--default-type: false !default;
 /// Used with `css--font-face` feature flag, if true, uses Plex font families instead of Helvetica
 $css--plex: false !default;
 
-$feature-flags: (
-    ui-shell: true,
-    grid-columns-16: true,
-    // not necessary, we include 16 columns grid directly
-) !default;
-
-// Manage deprecations
-$deprecations--entry: true;
-$deprecations--reasons: ();
-$deprecations--message: "Deprecated code was found, this code will be removed before the next release of Carbon.";
+$base-font-size: $eccgui-size-typo-base !default;
+@import "~@carbon/styles/scss/utilities/convert";
 
-$carbon--base-font-size: $eccgui-size-typo-base !default;
-@import "~carbon-components/scss/globals/scss/vendor/@carbon/type/scss/vendor/@carbon/layout/convert";
-
-$caption-01: (
-    font-size: carbon--rem($eccgui-size-typo-caption),
-    line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
-) !default;
 $label-01: (
-    font-size: carbon--rem($eccgui-size-typo-caption),
+    font-size: rem($eccgui-size-typo-caption),
     line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
 ) !default;
 $helper-text-01: (
-    font-size: carbon--rem($eccgui-size-typo-caption),
+    font-size: rem($eccgui-size-typo-caption),
     line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
 ) !default;
 $body-short-01: (
-    font-size: carbon--rem($eccgui-size-typo-text),
-    line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
-) !default;
-$body-long-01: (
-    font-size: carbon--rem($eccgui-size-typo-text),
-    line-height: $eccgui-size-typo-text-lineheight,
-) !default;
-$code-01: (
-    font-family: $eccgui-font-family-monospace,
-    font-size: carbon--rem($eccgui-size-typo-caption),
+    font-size: rem($eccgui-size-typo-text),
     line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
 ) !default;
-$heading-01: (
-    font-size: carbon--rem($eccgui-size-typo-text),
-    font-weight: 600,
+$body-short-02: (
+    font-size: rem($eccgui-size-typo-subtitle),
     line-height: $eccgui-size-typo-text-lineheight,
 ) !default;
-
-$body-short-02: (
-    font-size: carbon--rem($eccgui-size-typo-subtitle),
+$body-long-01: (
+    font-size: rem($eccgui-size-typo-text),
     line-height: $eccgui-size-typo-text-lineheight,
 ) !default;
 $body-long-02: (
-    font-size: carbon--rem($eccgui-size-typo-subtitle),
+    font-size: rem($eccgui-size-typo-subtitle),
     line-height: $eccgui-size-typo-text-lineheight * $eccgui-size-type-levelratio,
 ) !default;
+$code-01: (
+    font-family: $eccgui-font-family-monospace,
+    font-size: rem($eccgui-size-typo-caption),
+    line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
+) !default;
 $code-02: (
     font-family: $eccgui-font-family-monospace,
-    font-size: carbon--rem($eccgui-size-typo-text),
+    font-size: rem($eccgui-size-typo-text),
+    line-height: $eccgui-size-typo-text-lineheight,
+) !default;
+$heading-01: (
+    font-size: rem($eccgui-size-typo-text),
+    font-weight: 600,
     line-height: $eccgui-size-typo-text-lineheight,
 ) !default;
 $heading-02: (
-    font-size: carbon--rem($eccgui-size-typo-subtitle),
+    font-size: rem($eccgui-size-typo-subtitle),
     font-weight: 600,
     line-height: $eccgui-size-typo-text-lineheight * $eccgui-size-type-levelratio,
 ) !default;
 
-$ui-01: transparent !default;
-$ui-02: $eccgui-color-workspace-background !default;
+$layer-01: transparent !default;
+$layer-02: $eccgui-color-workspace-background !default;
 $ui-03: $pt-divider-black !default;
-$text-01: $eccgui-color-applicationheader-text !default;
-$text-02: $eccgui-color-workspace-text !default;
-$link-01: $eccgui-color-accent !default;
-$hover-primary-text: $eccgui-color-info-text !default;
-$hover-field: $button-background-color-hover !default;
-$hover-ui: $hover-field !default;
-$visited-link: purple !default;
-$disabled-02: rgba($text-01, $eccgui-opacity-disabled) !default;
-
-$layout-04: carbon--rem(
-    $eccgui-size-block-whitespace * 2 * $eccgui-size-type-levelratio
-) !default; // regular height of text input
-$spacing-05: carbon--rem($eccgui-size-inline-whitespace) !default;
+$layer-accent-01: $ui-03 !default;
+$border-subtle-01: $ui-03 !default;
+$text-primary: $eccgui-color-applicationheader-text !default;
+$text-secondary: $eccgui-color-workspace-text !default;
+$link-primary: $eccgui-color-accent !default;
+$link-primary-hover: $eccgui-color-info-text !default;
+$link-visited: purple !default;
+$hover-ui: $button-background-color-hover !default;
+$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;
+$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