@eccenca/gui-elements 23.7.0-rc.1 → 23.7.0-rc.2

package/src/components/TextField/TextArea.tsx

@@ -1,35 +1,63 @@
 import React from "react";
 import {
+    Classes as BlueprintClassNames,
     Intent as BlueprintIntent,
+    MaybeElement,
     TextArea as BlueprintTextArea,
     TextAreaProps as BlueprintTextAreaProps,
 } from "@blueprintjs/core";
 
+import { Definitions as IntentDefinitions, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Icon } from "../Icon";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 
 import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
 
-export interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
+export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
     /**
      * when set to true the input takes a blue border color
+     * @deprecated Use the `intent` property.
      */
     hasStatePrimary?: boolean;
     /**
      * when set to true the input takes a green border color
+     * @deprecated Use the `intent` property.
      */
     hasStateSuccess?: boolean;
     /**
      * when set to true the input takes an orange border color
+     * @deprecated Use the `intent` property.
      */
     hasStateWarning?: boolean;
     /**
      * when set to true the input takes a red border color
+     * @deprecated Use the `intent` property.
      */
     hasStateDanger?: boolean;
+    /**
+     * Intent state of the text area.
+     */
+    intent?: IntentTypes | "edited" | "removed";
     /**
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
     invisibleCharacterWarning?: InvisibleCharacterWarningProps;
+    /**
+     * Left aligned icon, can be a canonical icon name or an `Icon` element.
+     * This will update left padding on the text area.
+     */
+    leftIcon?: ValidIconName | MaybeElement;
+    /**
+     * Element to render on right side of text area. Should be not too large.
+     * This will update right padding on the text area.
+     */
+    rightElement?: JSX.Element;
+    /**
+     * Add HTML properties to the wrapper element.
+     * The element wraps `TextArea` in case of a given `wrapperDivProps`, `leftIcon` or `rightElement` property.
+     */
+    wrapperDivProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
 }
 
 export const TextArea = ({
@@ -40,38 +68,172 @@ export const TextArea = ({
     hasStateDanger = false,
     rows = 5,
     invisibleCharacterWarning,
+    leftIcon,
+    rightElement,
+    wrapperDivProps,
     ...otherProps
 }: TextAreaProps) => {
-    let intent;
+    const textAreaCallback = React.useCallback(
+        (textAreaElement: HTMLTextAreaElement) => {
+            if (textAreaElement && typeof textAreaElement === "object") {
+                let textAreaStyle: CSSStyleDeclaration;
+                if (!textAreaElement.dataset.processed) {
+                    textAreaStyle = getComputedStyle(textAreaElement);
+                    textAreaElement.dataset.processed = "yes";
+                    textAreaElement.dataset.paddingtop = textAreaStyle.paddingTop ?? "0px";
+                    textAreaElement.dataset.paddingleft = textAreaStyle.paddingLeft ?? "0px";
+                    textAreaElement.dataset.paddingright = textAreaStyle.paddingRight ?? "0px";
+                } else {
+                    textAreaStyle = {
+                        paddingTop: textAreaElement.dataset.paddingtop ?? "0px",
+                        paddingLeft: textAreaElement.dataset.paddingleft ?? "0px",
+                        paddingRight: textAreaElement.dataset.paddingright ?? "0px",
+                    } as CSSStyleDeclaration;
+                }
+                const textAreaElementRect = textAreaElement.getBoundingClientRect();
+                const wrapperElement = textAreaElement.parentElement;
+
+                if (leftIcon && wrapperElement) {
+                    const leftIconElement = wrapperElement.querySelector(`.${eccgui}-textarea__icon`) as HTMLElement;
+                    const leftIconElementRect = leftIconElement.getBoundingClientRect();
+                    if (
+                        parseInt(textAreaStyle.paddingTop, 10) * 2 + (leftIconElementRect.height ?? 0) <=
+                        (textAreaElementRect.height ?? 0)
+                    ) {
+                        leftIconElement.style.setProperty("top", textAreaStyle.paddingTop);
+                    } else {
+                        leftIconElement.style.setProperty(
+                            "top",
+                            `${((textAreaElementRect.height ?? 0) - (leftIconElementRect.height ?? 0)) * 0.5}px`
+                        );
+                    }
+                    leftIconElement.style.setProperty("left", textAreaStyle.paddingLeft);
+                    textAreaElement.style.setProperty(
+                        "padding-left",
+                        `calc(${leftIconElementRect.width ? 2 : 1} * ${textAreaStyle.paddingLeft} + ${
+                            leftIconElementRect.width ?? 0
+                        }px)`
+                    );
+                    leftIconElement.addEventListener("click", (_event: MouseEvent) => {
+                        textAreaElement.focus();
+                    }); //onclick((_event: MouseEvent) => {textAreaElement.dispatchEvent("click")})
+                }
+
+                if (rightElement && wrapperElement) {
+                    const rightElementElement = wrapperElement.querySelector(
+                        `.${eccgui}-textarea__options`
+                    ) as HTMLElement;
+                    const rightElementElementRect = rightElementElement.getBoundingClientRect();
+                    if (
+                        parseInt(textAreaStyle.paddingTop, 10) * 2 + (rightElementElementRect.height ?? 0) <=
+                        (textAreaElementRect.height ?? 0)
+                    ) {
+                        rightElementElement.style.setProperty("top", textAreaStyle.paddingTop);
+                    } else {
+                        rightElementElement.style.setProperty(
+                            "top",
+                            `${((textAreaElementRect.height ?? 0) - (rightElementElementRect.height ?? 0)) * 0.5}px`
+                        );
+                    }
+                    rightElementElement.style.setProperty("right", textAreaStyle.paddingRight);
+                    textAreaElement.style.setProperty(
+                        "padding-right",
+                        `calc(${rightElementElementRect.width ? 2 : 1} * ${textAreaStyle.paddingRight} + ${
+                            rightElementElementRect.width ?? 0
+                        }px)`
+                    );
+                }
+            }
+        },
+        [leftIcon, rightElement]
+    );
+
+    let deprecatedIntent;
     switch (true) {
         case hasStatePrimary:
-            intent = BlueprintIntent.PRIMARY;
+            deprecatedIntent = IntentDefinitions.PRIMARY;
             break;
         case hasStateSuccess:
-            intent = BlueprintIntent.SUCCESS;
+            deprecatedIntent = IntentDefinitions.SUCCESS;
             break;
         case hasStateWarning:
-            intent = BlueprintIntent.WARNING;
+            deprecatedIntent = IntentDefinitions.WARNING;
             break;
         case hasStateDanger:
-            intent = BlueprintIntent.DANGER;
+            deprecatedIntent = IntentDefinitions.DANGER;
             break;
         default:
             break;
     }
 
-    const maybeWrappedOnChange = useTextValidation({ ...otherProps, invisibleCharacterWarning });
+    const { intent = deprecatedIntent, ...otherBlueprintTextAreaProps } = otherProps;
 
-    return (
+    let iconIntent;
+    switch (intent) {
+        case "edited":
+            iconIntent = IntentDefinitions.INFO;
+            break;
+        case "removed":
+            iconIntent = IntentDefinitions.DANGER;
+            break;
+        default:
+            iconIntent = intent as IntentTypes;
+            break;
+    }
+
+    const maybeWrappedOnChange = useTextValidation({ ...otherBlueprintTextAreaProps, invisibleCharacterWarning });
+
+    const textarea = (
         <BlueprintTextArea
-            className={`${eccgui}-textarea ` + className}
-            intent={intent}
-            rows={rows ? rows : undefined}
-            {...otherProps}
+            inputRef={textAreaCallback}
+            className={
+                `${eccgui}-textarea` +
+                (intent ? ` ${eccgui}-intent--${intent}` : "") +
+                (className ? ` ${className}` : "")
+            }
+            intent={
+                intent && !["info", "edited", "removed", "neutral"].includes(intent)
+                    ? (intent as BlueprintIntent)
+                    : undefined
+            }
+            spellCheck={intent === "removed" ? false : undefined}
+            rows={
+                rows && !otherBlueprintTextAreaProps.autoResize && !otherBlueprintTextAreaProps.growVertically
+                    ? rows
+                    : 1
+            }
+            {...otherBlueprintTextAreaProps}
             dir={"auto"}
             onChange={maybeWrappedOnChange}
         />
     );
+
+    const { className: wrapperClassName, ...otherWrapperDivProps } = wrapperDivProps ?? {};
+
+    return wrapperDivProps || leftIcon || rightElement ? (
+        <div
+            className={`${eccgui}-textarea__wrapper` + (wrapperClassName ? ` ${wrapperClassName}` : "")}
+            {...otherWrapperDivProps}
+        >
+            {textarea}
+            {leftIcon && (
+                <div className={`${eccgui}-textarea__icon`}>
+                    {typeof leftIcon === "string" ? (
+                        <Icon
+                            name={leftIcon as ValidIconName}
+                            className={BlueprintClassNames.ICON}
+                            intent={iconIntent as IntentTypes | undefined}
+                        />
+                    ) : (
+                        <span className={BlueprintClassNames.ICON}>{leftIcon}</span>
+                    )}
+                </div>
+            )}
+            {rightElement && <div className={`${eccgui}-textarea__options`}>{rightElement}</div>}
+        </div>
+    ) : (
+        textarea
+    );
 };
 
 export default TextArea;

package/src/components/TextField/stories/TextArea.stories.tsx

@@ -1,22 +1,49 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
-import { TextArea as CustomTextArea } from "./../../../../index";
-type TextAreaType = typeof CustomTextArea;
+import { helpersArgTypes } from "../../../../.storybook/helpers";
+
+import { Button, IconButton, TextArea } from "./../../../../index";
+type TextAreaType = typeof TextArea;
 
 export default {
     title: "Forms/TextArea",
-    component: CustomTextArea,
-    argTypes: {},
-} as ComponentMeta<TextAreaType>;
+    component: TextArea,
+    argTypes: {
+        leftIcon: {
+            ...helpersArgTypes.exampleIcon,
+        },
+        rightElement: {
+            control: helpersArgTypes.exampleIcon.control,
+            options: [...helpersArgTypes.exampleIcon.options, "Button element", "2 Icon buttons"],
+            mapping: {
+                ...helpersArgTypes.exampleIcon.mapping,
+                "Button element": (
+                    <Button small onClick={() => alert("clicked")}>
+                        Button label
+                    </Button>
+                ),
+                "2 Icon buttons": (
+                    <>
+                        <IconButton name={"item-comment"} onClick={() => alert("1 clicked")} text="Button 1" />
+                        <IconButton name={"item-edit"} onClick={() => alert("2 clicked")} text="Button 2" />
+                    </>
+                ),
+            },
+        },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
+    },
+} as Meta<TextAreaType>;
 
-const Template: ComponentStory<TextAreaType> = (args) => <CustomTextArea {...args}></CustomTextArea>;
+const Template: StoryFn<TextAreaType> = (args) => <TextArea {...args}></TextArea>;
 
 export const Default = Template.bind({});
 Default.args = {
-    hasStatePrimary: false,
-    hasStateSuccess: false,
-    hasStateWarning: false,
-    hasStateDanger: false,
-    rows: 5,
+    rows: 10,
+    wrapperDivProps: {
+        "data-test-id": "textarea-test-id",
+        "data-testid": "textarea-testid",
+    },
 };

package/src/components/TextField/textfield.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:color";
 
 // own vars
 $eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
@@ -57,23 +58,31 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 
 // enhancements
 
-@mixin intent-state-flash($state, $bgcolor, $mixratio: 24%) {
+$eccgui-map-intent-bgcolors: (
+    "primary": $eccgui-color-info-background,
+    "success": $eccgui-color-success-background,
+    "warning": $eccgui-color-warning-background,
+    "danger": $eccgui-color-danger-background,
+);
+
+@mixin intent-state-flash-animation($state, $bgcolor, $mixratio: 24%) {
     @keyframes intent-state-flash-#{$state} {
         0% {
-            background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+            background-color: color.mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
         }
+
         39% {
             background-color: $bgcolor;
         }
+
         100% {
-            background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+            background-color: color.mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
         }
     }
+}
 
-    .#{$ns}-input-group.#{$ns}-intent-#{$state} & {
-        background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
-        animation-name: intent-state-flash-#{$state};
-    }
+@each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
+    @include intent-state-flash-animation($each-intent, $each-bgcolor);
 }
 
 .#{$ns}-input {
@@ -82,10 +91,12 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
         animation-delay: 0.5s;
     }
 
-    @include intent-state-flash("primary", $eccgui-color-info-background);
-    @include intent-state-flash("success", $eccgui-color-success-background);
-    @include intent-state-flash("warning", $eccgui-color-warning-background);
-    @include intent-state-flash("danger", $eccgui-color-danger-background);
+    @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
+        .#{$ns}-input-group.#{$ns}-intent-#{$each-intent} & {
+            background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+            animation-name: intent-state-flash-#{$each-intent};
+        }
+    }
 
     .#{$ns}-input-group.#{$eccgui}-intent--info & {
         @include pt-input-intent($eccgui-color-info-text);
@@ -114,6 +125,62 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 
 .#{$eccgui}-textarea {
     width: 100%;
+
+    &[class*="#{$eccgui}-intent--"] {
+        animation-duration: 1s;
+        animation-delay: 0.5s;
+    }
+
+    @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
+        &.#{$eccgui}-intent--#{$each-intent} {
+            background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+            animation-name: intent-state-flash-#{$each-intent};
+        }
+    }
+
+    &.#{$eccgui}-intent--info {
+        @include pt-input-intent($eccgui-color-info-text);
+    }
+
+    &.#{$eccgui}-intent--accent {
+        @include pt-input-intent($eccgui-color-primary);
+    }
+
+    &.#{$eccgui}-intent--neutral {
+        @include pt-input-intent($eccgui-color-workspace-text);
+    }
+
+    &.#{$eccgui}-intent--edited {
+        @include pt-input-intent($eccgui-color-info-text);
+
+        color: $eccgui-color-info-text;
+    }
+
+    &.#{$eccgui}-intent--removed {
+        @include pt-input-intent($eccgui-color-danger-text);
+
+        text-decoration: line-through $eccgui-color-danger-text 2px;
+    }
+
+    &.#{$ns}-text-area-auto-resize {
+        height: unset;
+    }
+}
+
+.#{$eccgui}-textarea__wrapper {
+    position: relative;
+}
+
+.#{$eccgui}-textarea__icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.#{$eccgui}-textarea__options {
+    position: absolute;
+    top: 0;
+    right: 0;
 }
 
 .#{$eccgui}-textfield--justifyclearance {

package/src/includes/blueprintjs/_requisits.scss

@@ -1,5 +1,5 @@
 @import "~@blueprintjs/colors/src/colors";
-@import "~@blueprintjs/core/src/common/variables";
+@import "~@blueprintjs/core/src/common/variables-extended";
 
 // future home for $icon-classes var @import "~@blueprintjs/core/src/common/variables-extended";
 @import "~@blueprintjs/core/src/common/react-transition";

package/src/includes/blueprintjs/_variables.scss

@@ -1,83 +1,21 @@
 @use "sass:math";
 
 // Stack of BlueprintJS variables that are necessary to use their framework
-// TODO: calculate them from own configuration variables, all unchanged variables are commented out
+// calculate them from own configuration variables here
+// see blueprint import for variables that need to be overwritten with other values
 
 $icon-font-path: "~@blueprintjs/icons/resources/icons" !default;
 
-// Gray scale
-
-// $black: #10161a !default;
-
-// $dark-gray1: #182026 !default;
-// $dark-gray2: #202b33 !default;
-// $dark-gray3: #293742 !default;
-// $dark-gray4: #30404d !default;
-// $dark-gray5: #394b59 !default;
-
-// $gray1: #5c7080 !default;
-// $gray2: #738694 !default;
-// $gray3: #8a9ba8 !default;
-// $gray4: #a7b6c2 !default;
-// $gray5: #bfccd6 !default;
-
-// $light-gray1: #ced9e0 !default;
-// $light-gray2: #d8e1e8 !default;
-// $light-gray3: #e1e8ed !default;
-// $light-gray4: #ebf1f5 !default;
-// $light-gray5: #f5f8fa !default;
-
-// $white: #ffffff !default;
-
-// Other colors
-// @import '~@blueprintjs/core/src/common/colors';
-
 // Color aliases
 
 $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-app-background-color: $light-gray5 !default;
-// $pt-dark-app-background-color: $dark-gray3 !default;
-
 $pt-outline-color: rgba($eccgui-color-accent, 0.6);
 $pt-text-color: $eccgui-color-application-text !default;
 
-// $pt-text-color-muted: $gray1 !default;
-// $pt-text-color-disabled: rgba($pt-text-color-muted, 0.6) !default;
-// $pt-heading-color: $pt-text-color !default;
-// $pt-link-color: $pt-intent-primary !default;
-// $pt-dark-text-color: $light-gray5 !default;
-// $pt-dark-text-color-muted: $gray4 !default;
-// $pt-dark-text-color-disabled: rgba($pt-dark-text-color-muted, 0.6) !default;
-// $pt-dark-heading-color: $pt-dark-text-color !default;
-// $pt-dark-link-color: $blue5 !default;
-// Default text selection color using #7dbcff
-// $pt-text-selection-color: rgba(125, 188, 255, 0.6) !default;
-
-// $pt-icon-color: $pt-text-color-muted !default;
-// $pt-icon-color-hover: $pt-text-color !default;
-// $pt-icon-color-disabled: $pt-text-color-disabled !default;
-// $pt-icon-color-selected: $pt-intent-primary !default;
-// $pt-dark-icon-color: $pt-dark-text-color-muted !default;
-// $pt-dark-icon-color-hover: $pt-dark-text-color !default;
-// $pt-dark-icon-color-disabled: $pt-dark-text-color-disabled !default;
-// $pt-dark-icon-color-selected: $pt-intent-primary !default;
-
-// $pt-divider-black: rgba($black, 0.15) !default;
-// $pt-dark-divider-black: rgba($black, 0.4) !default;
-// $pt-dark-divider-white: rgba($white, 0.15) !default;
-
-// $pt-code-text-color: $pt-text-color-muted !default;
-// $pt-dark-code-text-color: $pt-dark-text-color-muted !default;
-// $pt-code-background-color: rgba($white, 0.7) !default;
-// $pt-dark-code-background-color: rgba($black, 0.3) !default;
-
-// Namespace appended to the beginning of each CSS class: `.#{$ns}-button`.
-// Do not quote this value, for Less consumers.
-$ns: bp5 !default;
+// Size aliases
 
 // easily the most important variable, so it comes up top
 // (so other variables can use it to define themselves)
@@ -89,112 +27,5 @@ $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;
 
-// tag: (font-size, line-height)
-
-/*
-$headings: (
-  "h1": (36px, 40px),
-  "h2": (28px, 32px),
-  "h3": (22px, 25px),
-  "h4": (18px, 21px),
-  "h5": (16px, 19px),
-  "h6": (14px, 16px)
-) !default;
-*/
-
-// Icon variables
-// $icons16-family: "Icons16" !default;
-// $icons20-family: "Icons20" !default;
 $pt-icon-size-standard: 20px !default;
 $pt-icon-size-large: 32px !default;
-
-// Grids & dimensions
-
-// $pt-border-radius: floor($pt-grid-size / 3) !default;
-
-// Buttons
-// $pt-button-height: $pt-grid-size * 3 !default;
-// $pt-button-height-small: $pt-grid-size * 2.4 !default;
-// $pt-button-height-smaller: $pt-grid-size * 2 !default;
-// $pt-button-height-large: $pt-grid-size * 4 !default;
-
-// Inputs
-// $pt-input-height: $pt-grid-size * 3 !default;
-// $pt-input-height-large: $pt-grid-size * 4 !default;
-// $pt-input-height-small: $pt-grid-size * 2.4 !default;
-
-// Others
-// $pt-navbar-height: $pt-grid-size * 5 !default;
-
-// Z-indices
-// $pt-z-index-base: 0 !default;
-// $pt-z-index-content: $pt-z-index-base + 10 !default;
-// $pt-z-index-overlay: $pt-z-index-content + 10 !default;
-
-// Shadow opacities
-// $pt-border-shadow-opacity: 0.1 !default;
-// $pt-drop-shadow-opacity: 0.2 !default;
-// $pt-dark-border-shadow-opacity: $pt-border-shadow-opacity * 2 !default;
-// $pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2 !default;
-
-// Elevations
-// all shadow lists must be the same length to avoid flicker in transitions.
-
-/*
-$pt-elevation-shadow-0: 0 0 0 1px $pt-divider-black,
-                        0 0 0 rgba($black, 0),
-                        0 0 0 rgba($black, 0) !default;
-$pt-elevation-shadow-1: border-shadow($pt-border-shadow-opacity),
-                        0 0 0 rgba($black, 0),
-                        0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
-$pt-elevation-shadow-2: border-shadow($pt-border-shadow-opacity),
-                        0 1px 1px rgba($black, $pt-drop-shadow-opacity),
-                        0 2px 6px rgba($black, $pt-drop-shadow-opacity) !default;
-$pt-elevation-shadow-3: border-shadow($pt-border-shadow-opacity),
-                        0 2px 4px rgba($black, $pt-drop-shadow-opacity),
-                        0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default;
-$pt-elevation-shadow-4: border-shadow($pt-border-shadow-opacity),
-                        0 4px 8px rgba($black, $pt-drop-shadow-opacity),
-                        0 18px 46px 6px rgba($black, $pt-drop-shadow-opacity) !default;
-
-$pt-dark-elevation-shadow-0: 0 0 0 1px $pt-dark-divider-black,
-                             0 0 0 rgba($black, 0),
-                             0 0 0 rgba($black, 0) !default;
-$pt-dark-elevation-shadow-1: border-shadow($pt-dark-border-shadow-opacity),
-                             0 0 0 rgba($black, 0),
-                             0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-$pt-dark-elevation-shadow-2: border-shadow($pt-dark-border-shadow-opacity),
-                             0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity),
-                             0 2px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-$pt-dark-elevation-shadow-3: border-shadow($pt-dark-border-shadow-opacity),
-                             0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity),
-                             0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-$pt-dark-elevation-shadow-4: border-shadow($pt-dark-border-shadow-opacity),
-                             0 4px 8px rgba($black, $pt-dark-drop-shadow-opacity),
-                             0 18px 46px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-*/
-
-// Transitions
-// $pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9) !default;
-// $pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11) !default;
-// $pt-transition-duration: 100ms !default;
-
-// Light theme styles
-
-/*
-$pt-input-box-shadow: inset border-shadow(0.15),
-                      inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
-*/
-// $pt-dialog-box-shadow: $pt-elevation-shadow-4 !default;
-// $pt-popover-box-shadow: $pt-elevation-shadow-3 !default;
-// $pt-tooltip-box-shadow: $pt-popover-box-shadow !default;
-
-// Dark theme styles
-
-/*
-$pt-dark-input-box-shadow: inset border-shadow(0.3),
-                           inset 0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-*/
-// $pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-4 !default;
-// $pt-dark-popover-box-shadow: $pt-dark-elevation-shadow-3 !default;
-// $pt-dark-tooltip-box-shadow: $pt-dark-popover-box-shadow !default;

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

@@ -8,6 +8,7 @@
     $use-flexbox-grid: $use-flexbox-grid
 );
 @use "~@carbon/styles/scss/utilities/_visually-hidden";
+@import "~@carbon/styles/scss/components/ui-shell/functions";
 @import "~@carbon/styles/scss/feature-flags";
 @import "~@carbon/styles/scss/colors";
 @import "~@carbon/styles/scss/theme";