@eccenca/gui-elements 25.1.0 → 25.2.0-featuredarkthemesupportcmem7503.0

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

@@ -3,9 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 import characters from "../../../common/utils/characters";
-import { TextFieldProps } from "../TextField";
-
-import { TextField } from "./../../../../index";
+import { TextField, TextFieldProps } from "../TextField";
 
 export default {
     title: "Forms/TextField",

package/src/components/TextField/useTextValidation.ts

@@ -65,7 +65,7 @@ export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarnin
                 }
             }
         },
-        [detectionRegex, segmenter, emojiRegex]
+        [detectionRegex, segmenter, emojiRegex],
     );
     // Checks if the value contains any problematic characters with a small delay.
     const checkValue = React.useCallback(
@@ -80,7 +80,7 @@ export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarnin
             }
             callback?.(state.current.detectedCodePoints);
         },
-        [callback, clearState, detectIssues]
+        [callback, clearState, detectIssues],
     );
     const scheduleCheck = React.useCallback(
         (value: string | ReadonlyArray<string> | number) => {
@@ -95,7 +95,7 @@ export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarnin
                 }
             }, callbackDelay ?? 500);
         },
-        [checkValue, clearState, callbackDelay]
+        [checkValue, clearState, callbackDelay],
     );
     // Do check via onChange handler
     const wrappedOnChangeHandler: ChangeEventHandler<T> = React.useCallback(
@@ -108,7 +108,7 @@ export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarnin
             }
             onChange?.(event);
         },
-        [clearState, onChange, scheduleCheck]
+        [clearState, onChange, scheduleCheck],
     );
     // No callback, return
     if (!callback) {

package/src/components/TextReducer/TextReducer.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { HtmlContentBlock, Markdown, TextReducer } from "../../../index";
+import { Markdown } from "../../cmem/markdown/Markdown";
+import { HtmlContentBlock } from "../Typography";
+
+import { TextReducer } from "./TextReducer";
 
 export default {
     title: "Components/TextReducer",

package/src/components/TextReducer/TextReducer.test.tsx

@@ -27,7 +27,7 @@ describe("TextReducer", () => {
         const { queryByText } = render(
             <TextReducer decodeHtmlEntities>
                 <Markdown>&</Markdown>&amp foo&ampbar
-            </TextReducer>
+            </TextReducer>,
         );
         textMustExist(queryByText, "& &amp foo&ampbar");
         textMustNotExist(queryByText, "& & foo&ampbar");
@@ -36,7 +36,7 @@ describe("TextReducer", () => {
         const { queryByText } = render(
             <TextReducer decodeHtmlEntities decodeHtmlEntitiesOptions={{ strict: false }}>
                 <Markdown>&</Markdown>&amp foo&ampbar
-            </TextReducer>
+            </TextReducer>,
         );
         textMustNotExist(queryByText, "& &amp foo&ampbar");
         textMustExist(queryByText, "& & foo&ampbar");

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { Tooltip } from "../../index";
 

package/src/components/Tooltip/Tooltip.test.tsx

@@ -20,19 +20,19 @@ describe("Tooltip", () => {
     });
     it("should render no placeholder automatically for html tooltip", () => {
         const { container } = render(
-            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} />
+            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} />,
         );
         checkForPlaceholderClass(container, 0);
     });
     it("should render placeholder when `usePlaceholder===true`", () => {
         const { container } = render(
-            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} usePlaceholder={true} />
+            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} usePlaceholder={true} />,
         );
         checkForPlaceholderClass(container, 1);
     });
     it("should render no placeholder when `usePlaceholder===false`", () => {
         const { container } = render(
-            <Tooltip {...TooltipStory.args} content="this is a simple text tooltip" usePlaceholder={false} />
+            <Tooltip {...TooltipStory.args} content="this is a simple text tooltip" usePlaceholder={false} />,
         );
         checkForPlaceholderClass(container, 0);
     });
@@ -68,7 +68,7 @@ describe("Tooltip", () => {
             <>
                 <button>previous element</button>
                 <Tooltip {...TooltipStory.args} usePlaceholder={false} />
-            </>
+            </>,
         );
         const user = userEvent.setup();
         await user.tab(); // focuses "previous element"
@@ -84,7 +84,7 @@ describe("Tooltip", () => {
                 <Tooltip {...TooltipStory.args} usePlaceholder={true}>
                     <button>tooltip target</button>
                 </Tooltip>
-            </>
+            </>,
         );
         const user = userEvent.setup();
         await user.tab(); // focuses "previous element"

package/src/components/Tooltip/Tooltip.tsx

@@ -77,7 +77,7 @@ export const Tooltip = ({
             otherTooltipProps.renderTarget === undefined &&
             swapDelayTime > 0 &&
             hoverOpenDelay > swapDelayTime &&
-            (usePlaceholder === true || (typeof content === "string" && usePlaceholder !== false))
+            (usePlaceholder === true || (typeof content === "string" && usePlaceholder !== false)),
     );
 
     const targetClassName =
@@ -127,12 +127,12 @@ export const Tooltip = ({
         return () => {};
     }, [!!placeholderRef.current]);
 
-    const refocus = React.useCallback((node) => {
+    const refocus = React.useCallback((node: any) => {
         if (eventMemory.current && node) {
             // we do not have a `targetRef` here, so we need to workaround it
             // const target = node.targetRef.current.children[0];
             const target = document.body.querySelector(
-                `[data-postplaceholder=id${eventMemory.current}${searchId.current}]`
+                `[data-postplaceholder=id${eventMemory.current}${searchId.current}]`,
             )?.children[0];
             if (target) {
                 switch (eventMemory.current) {
@@ -147,7 +147,7 @@ export const Tooltip = ({
                             {
                                 capture: true,
                                 once: true,
-                            }
+                            },
                         );
                         break;
                 }
@@ -173,7 +173,7 @@ export const Tooltip = ({
                 className:
                     childTarget.props.className ?? "" + (otherTooltipProps.fill ? ` ${BlueprintClasses.FILL}` : ""),
                 tabIndex: 0,
-            })
+            }),
         );
     };
 

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

@@ -17,7 +17,7 @@ const config = {
                     avgSentencesPerParagraph: 4,
                     random: false,
                 }),
-                "2 paragraphs": <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+                "2 paragraphs": <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />,
             },
             description: "Content of the element.",
         },

package/src/components/Typography/typography.scss

@@ -74,12 +74,14 @@ mark {
     line-height: $eccgui-size-typo-text-lineheight;
 }
 
-.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small {
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small,
+.#{$eccgui}-typography--small {
     font-size: $eccgui-size-typo-caption;
     line-height: $eccgui-size-typo-caption-lineheight;
 }
 
-.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large {
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large,
+.#{$eccgui}-typography--large {
     font-size: $eccgui-size-typo-subtitle;
     line-height: $eccgui-size-typo-subtitle-lineheight;
 }
@@ -199,7 +201,7 @@ pre {
     &.#{$eccgui}-typography__text {
         padding: $eccgui-size-block-whitespace * 0.5;
         overflow-x: auto;
-        background-color: $eccgui-color-workspace-background;
+        background-color: #{eccgui-color-mix(eccgui-color-var("identity", "background", "300") 50%, transparent)};
 
         & > div[style]:has(.#{$eccgui}-markdown__syntaxhighlighter) {
             // remove styles like padding and font from prism div
@@ -208,7 +210,27 @@ pre {
             font-family: inherit !important;
             font-size: inherit !important;
             line-height: inherit !important;
+            text-shadow: none !important;
             background-color: transparent !important;
+
+            span {
+                background-color: transparent !important;
+            }
+
+            @media (prefers-color-scheme: dark) {
+                span[style~="color:"] {
+                    filter: invert(1);
+                }
+            }
+            .#{$eccgui}-palette--dark :not(.#{$eccgui}-palette--light) & {
+                span[style~="color:"] {
+                    filter: invert(1);
+                }
+            }
+        }
+
+        code {
+            background-color: transparent;
         }
     }
 }

package/src/components/VisualTour/VisualTour.tsx

@@ -70,10 +70,6 @@ export const VisualTour = ({
     usableStepTarget = false,
     isOpen = false,
 }: VisualTourProps) => {
-    if (isOpen === false) {
-        return null;
-    }
-
     const [currentStepIndex, setCurrentStepIndex] = React.useState<number>(0);
     const [currentStepComponent, setCurrentStepComponent] = React.useState<React.JSX.Element | null>(null);
 
@@ -170,7 +166,7 @@ export const VisualTour = ({
                         titleOption={titleOptions}
                         actionButtons={actionButtons}
                         step={step}
-                    />
+                    />,
                 );
             } else {
                 setCurrentStepComponent(
@@ -179,7 +175,7 @@ export const VisualTour = ({
                         actionButtons={actionButtons}
                         step={step}
                         onClose={closeTour}
-                    />
+                    />,
                 );
             }
         };
@@ -234,7 +230,11 @@ export const VisualTour = ({
         };
     }, [currentStepIndex, usableStepTarget]);
 
-    return currentStepComponent;
+    if (isOpen === false) {
+        return null;
+    } else {
+        return currentStepComponent;
+    }
 };
 
 interface StepModalProps {
@@ -272,7 +272,7 @@ const StepModal = ({ step, titleOption, onClose, actionButtons }: StepModalProps
             preventSimpleClosing={true}
             onClose={onClose}
             actions={actionButtons}
-            size={step.size === "medium" ? "regular" : step.size ?? "regular"}
+            size={step.size === "medium" ? "regular" : (step.size ?? "regular")}
             overlayClassName={`${eccgui}-visual-tour__dialog`}
         >
             <StepContent step={step} />
@@ -317,7 +317,7 @@ const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: S
             }
             return;
         },
-        [highlightedElement]
+        [highlightedElement],
     );
 
     // map to only tooltip size because the `DecoupledOverlay` only supports them
@@ -354,7 +354,7 @@ const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: S
                 </Card>
             </DecoupledOverlay>
         </div>,
-        document.body
+        document.body,
     );
 };
 

package/src/components/Workspace/workspace.scss

@@ -1,6 +1 @@
 @import "header";
-
-html {
-    color: $eccgui-color-workspace-text;
-    background-color: $eccgui-color-workspace-background;
-}

package/src/components/index.ts

@@ -25,6 +25,7 @@ export * from "./Link/Link";
 export * from "./List/List";
 export * from "./Menu";
 export * from "./MultiSuggestField";
+export * from "./NotAvailable/NotAvailable";
 export * from "./Notification";
 export * from "./OverviewItem";
 export * from "./Pagination/Pagination";

package/src/configuration/_palettes.scss

@@ -1,9 +1,72 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:color";
+
+/**
+ * Switch the background color for a complete color palette.
+ */
+@function eccgui-palette-switch-background($palette, $bg_old, $bg_new) {
+    $switched-palette: ();
+
+    @each $group, $names in $palette {
+        $switched-names: ();
+
+        @each $name, $colorset in $names {
+            $switched-colorset: ();
+
+            @each $color in $colorset {
+                $switched-color: eccgui-color-switch-background($color, $bg_old, $bg_new);
+                $switched-colorset: list.append(
+                        $switched-colorset,
+                        $switched-color,
+                    $separator: space
+                );
+            }
+
+            $switched-names: map.set($switched-names, $name, $switched-colorset);
+        }
+
+        $switched-palette: map.set($switched-palette, $group, $switched-names);
+    }
+
+    @return $switched-palette;
+}
+
+/**
+ * Create dark theme based on a complete light color palette.
+ */
+@function eccgui-palette-darkify($palette) {
+    $switched-palette: ();
+
+    @each $group, $names in $palette {
+        $switched-names: ();
+
+        @each $name, $colorset in $names {
+            $switched-colorset: ();
+
+            @each $color in $colorset {
+                $switched-color: eccgui-color-darkify($color);
+                $switched-colorset: list.append(
+                        $switched-colorset,
+                        $switched-color,
+                    $separator: space
+                );
+            }
+
+            $switched-names: map.set($switched-names, $name, $switched-colorset);
+        }
+
+        $switched-palette: map.set($switched-palette, $group, $switched-names);
+    }
+
+    @return $switched-palette;
+}
+
 /**
  * Base definition for colors.
  * Can be overwritten if it is defined before this file is included.
  * You need to define all or nothing, we currently don't support overwriting only some parts of it.
  */
-
 $eccgui-color-palette-light: (
     "identity": (
         "brand": eccgui-create-color-tints(#fbead9 #f8cd99 #f6b966 #f4a533 #f29100),
@@ -30,7 +93,7 @@ $eccgui-color-palette-light: (
         "lime": eccgui-create-color-tints(#e4f3ea #d2edd6 #9dcd99 #688a55 #5a7b2c),
         "amber": eccgui-create-color-tints(#fff3d9 #ffe9c4 #f9cd8d #eeb757 #c77400),
         "vermilion": eccgui-create-color-tints(#ffe8e2 #f5b8a8 #d48772 #8c4b3a #651c09),
-        "grey": eccgui-create-color-tints(#f5f6f7 #b7b7b7 #808080 #484848 #1c2329),
+        "grey": eccgui-create-color-tints(#F6F6F6 #b7b7b7 #808080 #484848 #232323),
     ),
     "extra": (
         "gold": eccgui-create-color-tints(#fff7d5 #ebd893 #dfc670 #d3b44e #c7a22b),
@@ -38,3 +101,4 @@ $eccgui-color-palette-light: (
         "bronze": eccgui-create-color-tints(#fbe9db #f2d6bc #eac29d #e1af7e #d89b5f),
     ),
 ) !default;
+$eccgui-color-palette-dark: eccgui-palette-darkify($eccgui-color-palette-light) !default;

package/src/configuration/_variables.scss

@@ -45,7 +45,9 @@ $eccgui-font-family-sans: "Roboto", sans-serif !default;
 $eccgui-font-family-sans-condensed: "Roboto Condensed", sans-serif !default;
 $eccgui-font-family-monospace: "Roboto Mono", monospace !default;
 $eccgui-font-family-monospace-condensed: "Roboto Mono", monospace !default;
-$eccgui-font-family-cursive: #{$eccgui-font-family-serif-condensed}, cursive !default;
+$eccgui-font-family-cursive:
+    #{$eccgui-font-family-serif-condensed},
+    cursive !default;
 $eccgui-font-family-fantasy: fantasy !default;
 $eccgui-font-family-default: $eccgui-font-family-sans !default;
 $eccgui-size-typo-base: 14px !default; // size including absolute unit, preferable px

package/src/configuration/stories/customproperties.stories.tsx

@@ -3,6 +3,9 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import CssCustomProperties from "../../common/utils/CssCustomProperties";
 import {
+    Grid,
+    GridColumn,
+    GridRow,
     Section,
     SectionHeader,
     Spacing,
@@ -48,18 +51,42 @@ const groups: { title: string; filterName: (name: string) => boolean }[] = [
     },
 ];
 
-const CssCustomPropertiesOverview = () => {
+interface CssCustomPropertiesOverviewProps {
+    theme?: "auto" | "light" | "dark" | "compare";
+}
+
+const CssCustomPropertiesOverviewTemplate = ({ theme = "auto" }: CssCustomPropertiesOverviewProps) => {
+    switch (theme) {
+        case "compare":
+            return (
+                <Grid>
+                    <GridRow>
+                        <GridColumn>
+                            <CssCustomPropertiesOverview theme={"light"} />
+                        </GridColumn>
+                        <GridColumn>
+                            <CssCustomPropertiesOverview theme={"dark"} />
+                        </GridColumn>
+                    </GridRow>
+                </Grid>
+            );
+        default:
+            return <CssCustomPropertiesOverview theme={theme} />;
+    }
+};
+
+const CssCustomPropertiesOverview = ({ theme = "auto" }: CssCustomPropertiesOverviewProps) => {
     return (
-        <>
+        <div className={`${eccgui}-palette--${theme}`}>
             {groups.map(({ title, filterName }) => {
                 const properties = new CssCustomProperties({
-                    selectorText: ":root",
+                    selectorText: theme === "auto" ? ":root" : `.${eccgui}-palette--${theme}`,
                     filterName,
                     removeDashPrefix: false,
                     returnObject: false,
                 }).customProperties() as string[][];
 
-                return (
+                return properties.length > 0 ? (
                     <React.Fragment key={title}>
                         <Section>
                             <SectionHeader>
@@ -104,9 +131,9 @@ const CssCustomPropertiesOverview = () => {
                         </Section>
                         <Spacing size="large" />
                     </React.Fragment>
-                );
+                ) : null;
             })}
-        </>
+        </div>
     );
 };
 
@@ -117,6 +144,17 @@ const CssCustomPropertiesOverview = () => {
 export default {
     title: "Configuration/CSS Custom Properties",
     component: CssCustomPropertiesOverview,
+    argTypes: {
+        theme: {
+            control: "select",
+            options: ["auto", "light", "dark", "compare"],
+        },
+    },
 } as Meta<typeof CssCustomPropertiesOverview>;
 
-export const Default: StoryFn = () => <CssCustomPropertiesOverview />;
+export const Default: StoryFn<typeof CssCustomPropertiesOverview> = (args) => (
+    <CssCustomPropertiesOverviewTemplate {...args} />
+);
+Default.args = {
+    theme: "auto",
+};