@eccenca/gui-elements 24.4.1-featurechatcomponentscmem6775.3 → 24.4.1-featurepreparefinalnextcmem6943.0

package/src/components/Chat/ChatContentCollapsed.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import { Markdown } from "../../cmem/markdown/Markdown";
+import { IconButton } from "../Icon/IconButton";
+import { TextReducer, TextReducerProps } from "../TextReducer/TextReducer";
+
+import { ChatContentProps } from "./ChatContent";
+
+export interface ChatContentCollapsedProps {
+    children: React.ReactElement<ChatContentProps>;
+    /**
+     * Set this to `false` if the compoment should initally start in an expanded state.
+     */
+    collapsed?: boolean;
+    /**
+     * Use this to set extra `TextReducer` properties.
+     * This is used to create the collapsed variant of the given content.
+     */
+    textReducerProps?: Omit<TextReducerProps, "children">;
+    /**
+     * Text for collapse button.
+     */
+    textCollapse?: string;
+    /**
+     * Text for expand button.
+     */
+    textExpand?: string;
+}
+
+/**
+ * Adds an auto collapsing feature for convenience to `ChatContent`.
+ */
+export const ChatContentCollapsed = ({
+    children,
+    collapsed = true,
+    textReducerProps = {},
+    textCollapse = "Collapse",
+    textExpand = "Expand",
+}: ChatContentCollapsedProps) => {
+    const [displayCollapsed, setDispayCollapsed] = React.useState<boolean>(collapsed);
+
+    const childrenAsTextline = (
+        <TextReducer useOverflowTextWrapper {...textReducerProps}>
+            {typeof children.props.children === "string" ? (
+                <Markdown>{children.props.children}</Markdown>
+            ) : (
+                children.props.children
+            )}
+        </TextReducer>
+    );
+
+    return React.cloneElement(children, {
+        children: displayCollapsed ? childrenAsTextline : children.props.children,
+        actionButton: (
+            <IconButton
+                text={displayCollapsed ? textExpand : textCollapse}
+                name={displayCollapsed ? "toggler-showmore" : "toggler-showless"}
+                onClick={() => setDispayCollapsed(!displayCollapsed)}
+            />
+        ),
+    });
+};
+
+export default ChatContentCollapsed;

package/src/components/Chat/ChatField.tsx

@@ -21,7 +21,14 @@ export interface ChatFieldProps extends TextAreaProps, TestableComponent {
  * Component to input chat text.
  * Based on `TextArea` component.
  */
-export const ChatField = ({ className, onTextSubmit, rightElement, ...otherTextAreaProps }: ChatFieldProps) => {
+export const ChatField = ({
+    className,
+    onTextSubmit,
+    onChange,
+    onKeyDown,
+    rightElement,
+    ...otherTextAreaProps
+}: ChatFieldProps) => {
     const chatvalue = React.useRef<string>(otherTextAreaProps.children ?? "");
 
     const onContentChange = (value: string) => {
@@ -29,6 +36,7 @@ export const ChatField = ({ className, onTextSubmit, rightElement, ...otherTextA
     };
 
     const onEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (onKeyDown) onKeyDown(e);
         if (e.keyCode === 13 && e.shiftKey === false && onTextSubmit) {
             e.preventDefault();
             onTextSubmit(chatvalue.current);
@@ -40,10 +48,15 @@ export const ChatField = ({ className, onTextSubmit, rightElement, ...otherTextA
             fill
             autoResize
             className={`${eccgui}-chat__inputfield` + (className ? ` ${className}` : "")}
-            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
-                onContentChange(e.target.value);
-            }}
-            onKeyDown={onTextSubmit ? onEnter : undefined}
+            onChange={
+                onTextSubmit
+                    ? (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                          onContentChange(e.target.value);
+                          if (onChange) onChange(e);
+                      }
+                    : onChange
+            }
+            onKeyDown={onTextSubmit ? onEnter : onKeyDown}
             rightElement={
                 (onTextSubmit || rightElement) && (
                     <>

package/src/components/Chat/index.ts

@@ -1,3 +1,4 @@
 export * from "./ChatArea";
 export * from "./ChatContent";
+export * from "./ChatContentCollapsed";
 export * from "./ChatField";

package/src/components/Chat/stories/ChatArea.stories.tsx

@@ -1,8 +1,17 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { ChatArea, ChatContent, ChatField } from "../../../index";
+import {
+    ChatArea,
+    ChatContent,
+    ChatContentCollapsed,
+    ChatField,
+    ContentGroup,
+    Spacing,
+    TitleSubsection,
+} from "../../../index";
 
+import { BasicExample as ContentGroupExample } from "./../../ContentGroup/ContentGroup.stories";
 import { Default as ShortChatBubble, LongChatBubble } from "./ChatContent.stories";
 import { Default as ChatFieldExample } from "./ChatField.stories";
 
@@ -24,9 +33,25 @@ Default.args = {
     chatField: <ChatField {...ChatFieldExample.args} />,
     children: [
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
-        <ChatContent {...ShortChatBubble.args} avatar={undefined} displayType="free" />,
+        <ChatContentCollapsed textReducerProps={{ maxNodes: 1 }}>
+            <ChatContent
+                avatar={undefined}
+                displayType="free"
+                statusLine={
+                    <>
+                        <strong>Bot</strong> right now
+                    </>
+                }
+            >
+                <TitleSubsection>Some technical content</TitleSubsection>
+                <Spacing size="small" />
+                <ContentGroup {...ContentGroupExample.args} style={{ marginRight: "2px" }} />
+            </ChatContent>
+        </ChatContentCollapsed>,
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
-        <ChatContent {...LongChatBubble.args} autoShrink />,
+        <ChatContentCollapsed>
+            <ChatContent {...LongChatBubble.args} />
+        </ChatContentCollapsed>,
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
         <ChatContent {...ShortChatBubble.args} />,
     ],

package/src/components/Chat/stories/ChatContent.stories.tsx

@@ -45,15 +45,16 @@ Default.args = {
             <strong>Username</strong> 25 minutes ago
         </OverflowText>
     ),
-    onToggleSize: undefined,
 };
 
 export const LongChatBubble = TemplateFull.bind({});
 LongChatBubble.args = {
     ...Default.args,
+    avatar: undefined,
+    displayType: "simple",
     children: (
         <HtmlContentBlock>
-            <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
+            <LoremIpsum p={7} avgSentencesPerParagraph={7} random={false} />
         </HtmlContentBlock>
     ),
     limitHeight: true,

package/src/components/Chat/stories/ChatContentCollapsed.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatContent, ChatContentCollapsed } from "../../../index";
+
+import { LongChatBubble } from "./ChatContent.stories";
+
+export default {
+    title: "Components/Chat/ChatContentCollapsed",
+    component: ChatContentCollapsed,
+    argTypes: {},
+} as Meta<typeof ChatContentCollapsed>;
+
+let update = 0;
+const TemplateFull: StoryFn<typeof ChatContentCollapsed> = (args) => (
+    <div key={update++}>
+        <ChatContentCollapsed {...args} />
+    </div>
+);
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: <ChatContent {...LongChatBubble.args} />,
+};

package/src/components/Checkbox/checkbox.scss

@@ -24,9 +24,9 @@ $control-indicator-spacing: $eccgui-size-inline-whitespace !default;
 // $switch-background-color-active: rgba($gray1, 0.5) !default;
 // $switch-background-color-disabled: $button-background-color-disabled !default;
 $switch-checked-background-color: $eccgui-color-accent !default;
-$switch-checked-background-color-hover: rgba($switch-checked-background-color, $eccgui-opacity-narrow) !default;
+$switch-checked-background-color-hover: eccgui-color-rgba($switch-checked-background-color, $eccgui-opacity-narrow) !default;
 $switch-checked-background-color-active: $switch-checked-background-color-hover !default;
-$switch-checked-background-color-disabled: rgba($switch-checked-background-color, $eccgui-opacity-disabled) !default;
+$switch-checked-background-color-disabled: eccgui-color-rgba($switch-checked-background-color, $eccgui-opacity-disabled) !default;
 
 @import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch
 

package/src/components/CodeAutocompleteField/index.ts

@@ -1 +1,8 @@
-export * from "./CodeAutocompleteField";
+import { AutoSuggestionList, AutoSuggestionListProps } from "./../AutoSuggestion/AutoSuggestionList";
+import { ExtendedCodeEditor, ExtendedCodeEditorProps } from "./../AutoSuggestion/ExtendedCodeEditor";
+
+export * from "./../AutoSuggestion/AutoSuggestion";
+
+export { AutoSuggestionList, ExtendedCodeEditor };
+
+export type { AutoSuggestionListProps, ExtendedCodeEditorProps };

package/src/components/ContentGroup/_contentgroup.scss

@@ -1,5 +1,11 @@
-$eccgui-color-scontentgroup-border-main: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted) !default;
-$eccgui-color-scontentgroup-border-sub: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled) !default;
+$eccgui-color-scontentgroup-border-main: eccgui-color-rgba(
+    $eccgui-color-workspace-text,
+    $eccgui-opacity-muted
+) !default;
+$eccgui-color-scontentgroup-border-sub: eccgui-color-rgba(
+    $eccgui-color-workspace-text,
+    $eccgui-opacity-disabled
+) !default;
 
 .#{$eccgui}-contentgroup {
     --#{$eccgui}-color-contentgroup-border-main: #{$eccgui-color-scontentgroup-border-main};

package/src/components/Dialog/Modal.tsx

@@ -10,6 +10,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
 import { Card } from "./../Card";
+import {preventReactFlowActionsClasses} from "../../cmem";
 
 export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     children: React.ReactNode | React.ReactNode[];
@@ -20,7 +21,7 @@ export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     /**
      * Size of the modal.
      */
-    size?: "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
+    size?: ModalSize;
     /**
      * Prevents that a backdrop area is displayed behind the modal elements.
      */
@@ -44,6 +45,8 @@ export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     forceTopPosition?: boolean;
 }
 
+export type ModalSize = "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen"
+
 /**
  * Displays contents on top of other elements, used to create dialogs.
  * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficient.
@@ -114,7 +117,7 @@ export const Modal = ({
         <BlueprintOverlay
             {...otherProps}
             backdropProps={backdropProps}
-            className={overlayClassName}
+            className={`${overlayClassName} ${preventReactFlowActionsClasses}`}
             backdropClassName={`${eccgui}-dialog__backdrop`}
             canOutsideClickClose={canOutsideClickClose}
             canEscapeKeyClose={canEscapeKeyClose}

package/src/components/Dialog/SimpleDialog.tsx

@@ -136,7 +136,8 @@ export const modalPreventEvents = {
     onDrag: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onDragStart: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onDragEnd: (event: BaseSyntheticEvent) => event.stopPropagation(),
-    onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    // The following prevents some drop-downs to not close anymore when clicking outside of them
+    // onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onMouseUp: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onClick: (event: BaseSyntheticEvent) => event.stopPropagation(),
 };

package/src/components/Dialog/dialog.scss

@@ -11,7 +11,10 @@ $eccgui-size-modal-large-width: math.div(9, 16) * 100vw !default;
 $eccgui-size-modal-large-height: math.div(6, 9) * 100vh !default;
 $eccgui-size-modal-xlarge-width: math.div(12, 16) * 100vw !default;
 $eccgui-size-modal-xlarge-height: math.div(7, 9) * 100vh !default;
-$eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0.69) !default;
+$eccgui-color-modal-backdrop: eccgui-color-rgba(
+    eccgui-color-var("identity", "background", "900"),
+    $eccgui-opacity-muted
+) !default;
 
 @import "~@blueprintjs/core/src/components/dialog/dialog";
 

package/src/components/Form/FieldItem.tsx

@@ -6,7 +6,7 @@ import { TestableComponent } from "../interfaces";
 import Label, { LabelProps } from "../Label/Label";
 
 /*
-    FIXME: Improve development convenience and prevent development errors
+    TODO: Improve development convenience and prevent development errors
 
     * disabled state could be automatically forwarded to inserted input element,
       currently this need to be dome explicitly .
@@ -15,30 +15,6 @@ import Label, { LabelProps } from "../Label/Label";
 */
 
 export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
-    /**
-     * Set primary state.
-     * This is not routed through automatically.
-     * @deprecated (v25) use `intent="primary"` instead.
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * Set success state.
-     * This is not routed through automatically.
-     * @deprecated (v25) use `intent="success"` instead.
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * Set warning state.
-     * This is not routed through automatically.
-     * @deprecated (v25) use `intent="warning"` instead.
-     */
-    hasStateWarning?: boolean;
-    /**
-     * Set danger state.
-     * This is not routed through automatically.
-     * @deprecated (v25) use `intent="danger"` instead.
-     */
-    hasStateDanger?: boolean;
     /**
      * Intent state of the field item.
      */
@@ -69,10 +45,6 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
  * Form element that manages the combination of label, helper texts, input element and feedback messages.
  */
 export const FieldItem = ({
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     children,
     className,
     disabled,
@@ -82,24 +54,6 @@ export const FieldItem = ({
     intent,
     ...otherProps
 }: FieldItemProps) => {
-    let classIntent = "";
-    switch (true) {
-        case hasStatePrimary:
-            classIntent = " " + IntentClassNames.PRIMARY;
-            break;
-        case hasStateSuccess:
-            classIntent = " " + IntentClassNames.SUCCESS;
-            break;
-        case hasStateWarning:
-            classIntent = " " + IntentClassNames.WARNING;
-            break;
-        case hasStateDanger:
-            classIntent = " " + IntentClassNames.DANGER;
-            break;
-        default:
-            break;
-    }
-
     const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
 
     const label = <Label {...labelProps} disabled={disabled} />;
@@ -117,9 +71,9 @@ export const FieldItem = ({
     const notification =
         messageText &&
         (typeof messageText === "string" ? (
-            <p className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</p>
+            <p className={`${eccgui}-fielditem__message` + intentClass}>{messageText}</p>
         ) : (
-            <div className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</div>
+            <div className={`${eccgui}-fielditem__message` + intentClass}>{messageText}</div>
         ));
 
     return (

package/src/components/Form/FieldSet.tsx

@@ -9,26 +9,6 @@ export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFie
      * Background color of the box is set automatically regarding the set intent state.
      */
     boxed?: boolean;
-    /**
-     * The fieldsetsection is displayed with primary color scheme.
-     * @deprecated (v25) use `intent="primary"` instead.
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * The fieldset section is displayed with success (some type of green) color scheme.
-     * @deprecated (v25) use `intent="success"` instead.
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * The fieldset section is displayed with warning (some type of orange) color scheme.
-     * @deprecated (v25) use `intent="warning"` instead.
-     */
-    hasStateWarning?: boolean;
-    /**
-     * The fieldsetsection is displayed with danger (some type of red) color scheme.
-     * @deprecated (v25) use `intent="danger"` instead.
-     */
-    hasStateDanger?: boolean;
     /**
      * Intent state of the field item.
      */
@@ -56,36 +36,12 @@ export const FieldSet = ({
     boxed = false,
     children,
     className,
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     intent,
     helperText,
     messageText,
     title,
     ...otherProps
 }: FieldSetProps) => {
-    let classIntent = "";
-    switch (true) {
-        case hasStatePrimary:
-            classIntent = " " + IntentClassNames.PRIMARY;
-            break;
-        case hasStateSuccess:
-            classIntent = " " + IntentClassNames.SUCCESS;
-            break;
-        case hasStateWarning:
-            classIntent = " " + IntentClassNames.WARNING;
-            break;
-        case hasStateDanger:
-            classIntent = " " + IntentClassNames.DANGER;
-            break;
-        default:
-            break;
-    }
-
-    const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
-
     const userhelp =
         helperText &&
         (typeof helperText === "string" ? (
@@ -109,7 +65,7 @@ export const FieldSet = ({
             className={
                 `${eccgui}-fieldset` +
                 (className ? " " + className : "") +
-                (intentClass || classIntent) +
+                (intent ? " " + IntentClassNames[intent.toUpperCase()] : "") +
                 (boxed ? ` ${eccgui}-fieldset--boxed` : "")
             }
             {...otherProps}

package/src/components/Form/form.scss

@@ -1,6 +1,6 @@
 $eccgui-size-typo-formitem: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-formitem-lineheight: $eccgui-size-typo-caption-lineheight !default;
-$eccgui-color-formitem-text: rgba($eccgui-color-workspace-text, $eccgui-opacity-narrow);
+$eccgui-color-formitem-text: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-narrow);
 
 @import "~@blueprintjs/core/src/components/forms/common";
 @import "~@blueprintjs/core/src/components/forms/control-group";
@@ -39,7 +39,7 @@ form {
     color: $eccgui-color-formitem-text;
 
     .#{$eccgui}-fielditem--disabled > & {
-        color: rgba($eccgui-color-formitem-text, 1) !important;
+        color: $eccgui-color-workspace-text !important;
         opacity: $eccgui-opacity-disabled !important;
     }
 }

package/src/components/Icon/BaseIcon.tsx

@@ -32,19 +32,10 @@ export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "descripti
      * Additional CSS classes.
      */
     className?: string;
-    /**
-     * Description for icon as accessibility fallback.
-     * @deprecated (v25) Use `title` as replacement.
-     */
-    description?: string;
     /**
      * Additonal tooltip properties, e.g. `hoverOpenDelay`.
      */
     tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
-    /**
-     * @deprecated (v25) Use `title` as replacement.
-     */
-    iconTitle?: CarbonIconProps["title"];
 }
 
 /**
@@ -58,8 +49,6 @@ function BaseIcon({
     tooltipText,
     tooltipProps,
     intent,
-    description,
-    iconTitle,
     tabIndex,
     ...restProps
 }: BaseIconProps) {
@@ -70,9 +59,6 @@ function BaseIcon({
 
     const icon = (
         <CarbonIconNamed
-            title={
-                iconTitle || description ? (iconTitle ? iconTitle : description ? description : undefined) : undefined
-            }
             {...restProps}
             {...sizeConfig}
             className={

package/src/components/Icon/IconButton.tsx

@@ -6,9 +6,10 @@ import Button, { ButtonProps } from "../Button/Button";
 import { ValidIconName } from "./canonicalIconNames";
 import Icon, { IconProps } from "./Icon";
 import { TestIconProps } from "./TestIcon";
+import {TestableComponent} from "../interfaces";
 
 interface ExtendedButtonProps
-    extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+    extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip">, TestableComponent {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.

package/src/components/Icon/canonicalIconNames.tsx

@@ -23,6 +23,8 @@ const canonicalIcons = {
     "artefact-task-pivot": icons.Transpose,
     "artefact-task-unpivot": icons.Transpose,
     "artefact-task-concatenatetofile": icons.DocumentExport,
+    "artefact-task-sqlupdatequeryoperator": icons.Sql,
+    "artefact-task-customsqlexecution": icons.Sql,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
     "artefact-dataset-excel": icons.Xls,

package/src/components/Label/label.scss

@@ -1,7 +1,7 @@
 $eccgui-size-typo-label: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-label-lineheight: $eccgui-size-typo-caption-lineheight !default;
 $eccgui-color-label-text: $eccgui-color-workspace-text;
-$eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
+$eccgui-color-label-info: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
 
 .#{$eccgui}-label {
     display: block;

package/src/components/Link/link.scss

@@ -11,7 +11,7 @@
     }
 
     &:focus-visible {
-        outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
+        outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
         outline-offset: 1px;
     }
 }

package/src/components/Menu/menu.scss

@@ -1,30 +1,7 @@
-// uses button colors, we can remove it if we decide to use the blueprint buttons
-$button-intents: (
-    "primary": (
-        $pt-intent-primary,
-        $blue2,
-        $blue1,
-    ),
-    "success": (
-        $pt-intent-success,
-        $green2,
-        $green1,
-    ),
-    "warning": (
-        $pt-intent-warning,
-        $orange2,
-        $orange1,
-    ),
-    "danger": (
-        $pt-intent-danger,
-        $red2,
-        $red1,
-    ),
-) !default;
-$minimal-button-background-color-hover: rgba($gray4, 0.3) !default;
-$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;
+$minimal-button-background-color-hover: eccgui-color-rgba($gray4, 0.3) !default;
+$minimal-button-background-color-active: eccgui-color-rgba($gray2, 0.3) !default;
+$dark-minimal-button-background-color-hover: eccgui-color-rgba($gray3, 0.15) !default;
+$dark-minimal-button-background-color-active: eccgui-color-rgba($gray3, 0.3) !default;
 
 // $half-grid-size: $pt-grid-size * 0.5 !default;
 // $menu-item-border-radius: $pt-border-radius - 1 !default;