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

package/src/common/scss/_color-functions.scss

@@ -19,7 +19,7 @@
         @error "Need at least 1 color to create color tints.";
     }
 
-    // we asume that it correct to give only start and end of tint weights
+    // we assume that it correct to give only start and end of tint weights
     // only echo debug message if we have a 1, 3 or 4 color values
     @if $count-colors != 2 {
         @debug "Got only #{$count-colors} tints: #{$colorset}";
@@ -92,16 +92,163 @@
     }
 
     @if $alpha > 0 {
-        @return eccgui-color-mix($color 100% * $alpha, transparent);
+        @if math.is-unitless($alpha) {
+            $alpha: 100% * $alpha;
+        }
+
+        @return eccgui-color-mix($color $alpha, transparent);
     } @else {
         // workaround: we need to prevent `0%` because it will reduced to `0` by some CSS minifiers and leads to invalid color-mix values
         @return eccgui-color-mix($color, transparent 100%);
     }
 }
 
+/**
+ * Reverse alpha compositing ("remove" a background color from a color).
+ *
+ * Given an opaque $color that visually results from compositing an unknown
+ * semi-transparent foreground color over $background, this returns that
+ * foreground color including the alpha channel, so that
+ *   compositing the result over $background reproduces $color again.
+ *
+ * For every channel the minimal alpha is determined that keeps the resulting
+ * foreground channel inside the valid [0, 255] range; the largest of these
+ * per-channel alphas is used for all channels. This yields the most
+ * transparent foreground color possible for the given $background.
+ */
+@function eccgui-color-subtract-background($color, $background) {
+    @if meta.type-of($color) != "color" or meta.type-of($background) != "color" {
+        @error "eccgui-color-subtract-background() expects SASS color values for $color and $background.";
+    }
+
+    $channels: "red" "green" "blue";
+    $alpha: 0;
+
+    // determine the minimal alpha that keeps every foreground channel in range
+    @each $channel in $channels {
+        $target: color.channel($color, $channel, $space: rgb);
+        $base: color.channel($background, $channel, $space: rgb);
+        $channel-alpha: 0;
+
+        @if $target > $base {
+            // foreground channel goes towards 255, limited by the headroom (255 - base)
+            $channel-alpha: math.div($target - $base, 255 - $base);
+        } @else if $target < $base {
+            // foreground channel goes towards 0, limited by the available range (base)
+            $channel-alpha: math.div($base - $target, $base);
+        }
+
+        @if $channel-alpha > $alpha {
+            $alpha: $channel-alpha;
+        }
+    }
+
+    @if $alpha <= 0 {
+        // $color equals $background, the foreground is fully transparent
+        @return transparent;
+    }
+
+    // recover the foreground channels: foreground = base + (target - base) / alpha
+    $foreground: ();
+
+    @each $channel in $channels {
+        $target: color.channel($color, $channel, $space: rgb);
+        $base: color.channel($background, $channel, $space: rgb);
+        $foreground: list.append($foreground, $base + math.div($target - $base, $alpha));
+    }
+
+    @return color.change(
+        rgb(list.nth($foreground, 1), list.nth($foreground, 2), list.nth($foreground, 3)),
+        $alpha: $alpha
+    );
+}
+
+/**
+ * Alpha compositing ("flatten" a semi-transparent color onto a background).
+ *
+ * Given a $color that may carry an alpha channel and an opaque $background,
+ * this composites $color over $background and returns the resulting opaque
+ * color. It is the inverse of eccgui-color-subtract-background().
+ *
+ * Per channel: result = foreground * alpha + background * (1 - alpha).
+ */
+@function eccgui-color-flatten-foreground($color, $background) {
+    @if meta.type-of($color) != "color" or meta.type-of($background) != "color" {
+        @error "eccgui-color-blend-onto-background() expects SASS color values for $color and $background.";
+    }
+
+    $alpha: color.alpha($color);
+
+    @if $alpha >= 1 {
+        // fully opaque foreground, background has no influence
+        @return color.change($color, $alpha: 1);
+    }
+
+    $channels: "red" "green" "blue";
+    $blended: ();
+
+    @each $channel in $channels {
+        $foreground: color.channel($color, $channel, $space: rgb);
+        $base: color.channel($background, $channel, $space: rgb);
+        $blended: list.append($blended, $foreground * $alpha + $base * (1 - $alpha));
+    }
+
+    @return rgb(list.nth($blended, 1), list.nth($blended, 2), list.nth($blended, 3));
+}
+
+/**
+ * Switch the background color for a color value.
+ */
+@function eccgui-color-switch-background($color, $bg_old, $bg_new) {
+    @return eccgui-color-flatten-foreground(eccgui-color-subtract-background($color, $bg_old), $bg_new);
+}
+
+/**
+ * Process a color from a light palette to get used in a dark palette.
+ */
+@function eccgui-color-darkify($color) {
+    // very simple process, only invert lightness
+    $color-dark-simple: color.change($color, $lightness: 100% - color.channel($color, "lightness", $space: hsl));
+
+    // read values for lightness and saturation
+    // use them to improve the final darkified color
+    $l: color.channel($color-dark-simple, "lightness", $space: hsl);
+    $s: color.channel($color-dark-simple, "saturation", $space: hsl);
+
+    // improve color perception
+    // for light and saturated colors bring back a bit of the original color
+    @if $l > 45% and $s > 70% {
+        $color-dark-simple: color.mix($color, $color-dark-simple, 25%);
+        $l: color.channel($color-dark-simple, "lightness", $space: hsl);
+        $s: color.channel($color-dark-simple, "saturation", $space: hsl);
+    }
+
+    // improve lightness
+    // make dark colors a bit lighter again
+    @if $l < 50% {
+        $l: $l + (10% * math.div(50% - $l, 50%));
+    }
+
+    // improve saturation
+    // decrease it gradually based on lightness and saturation to prevent straining "neon" effects
+    $s: $s * (1 - 0.1 * math.div($l, 100%) - 0.1 * math.div($s, 100%));
+
+    // return improved darkified color, round rgb values
+    $color-dark-improved: color.change($color-dark-simple, $lightness: $l, $saturation: $s);
+
+    @return color.change(
+        $color-dark-improved,
+        $red: math.round(color.channel($color-dark-improved, "red")),
+        $green: math.round(color.channel($color-dark-improved, "green")),
+        $blue: math.round(color.channel($color-dark-improved, "blue"))
+    );
+}
+
 $debug-rgba-values: "yes";
 
 /**
+ * Overwrite SCSS built-in rgba function
+ * TODO: we need to check if this is future proof, maybe this behaviour is not planned by Dart Sass library.
  * Split between rgba(red, green, blue, alpha) and rgba(color, alpha).
  */
 @function rgba($r, $g, $b: "undefined", $a: 1) {
@@ -113,15 +260,14 @@ $debug-rgba-values: "yes";
     } @else {
         // rgba(r, g, b, a) is used -> rgb(r g b / a)
         // @see https://developer.mozilla.org/de/docs/Web/CSS/color_value/rgb
-        $color-new-notation: rgb(#{$r} #{$g} #{$b} / #{$a});
+        $color-new-notation: #{"rgb(" + $r + " " + $g + " " + $b + " / " + $a + ")"};
 
         @return $color-new-notation;
     }
 }
 
 /**
- * Overwrite SCSS built-in rgba function to support colors by custom properties and CSS color methods.
- * TODO: we need to check if this is future proof, maybe this bahaviour is not planned by Dart Sass library.
+ * Support colors by custom properties and CSS color methods.
  */
 @function rgba-extended($color, $alpha) {
     @if meta.type-of($color) == "color" {

package/src/common/utils/CssCustomProperties.ts

@@ -105,7 +105,7 @@ export default class CssCustomProperties {
     };
 
     static listCustomProperties = (
-        props: getCustomPropertiesProps = {}
+        props: getCustomPropertiesProps = {},
     ): [string, string][] | Record<string, string> => {
         const { removeDashPrefix = true, returnObject = true, filterName = () => true, ...filterProps } = props;
 

package/src/common/utils/characters.ts

@@ -64,13 +64,13 @@ const invisibleZeroWidthCharacterCodePoints: InvisibleCharacter[] = internalInvi
 const createInvisibleZeroWidthCharacterCodePointsRegex = () => {
     return new RegExp(
         `([${invisibleZeroWidthCharacterCodePoints.map((cp) => `\\u{${cp.hexString}}`).join("")}])`,
-        "ug"
+        "ug",
     );
 };
 
 /** Map from codepoint to invisible character. */
 const invisibleZeroWidthCharacterCodePointsMap: Map<number, InvisibleCharacter> = new Map(
-    invisibleZeroWidthCharacterCodePoints.map((cp) => [cp.codePoint, cp])
+    invisibleZeroWidthCharacterCodePoints.map((cp) => [cp.codePoint, cp]),
 );
 
 const clearStringFromInvisibleCharacters = (inputString: string): string => {

package/src/common/utils/colorCalculateDistance.ts

@@ -1,6 +1,6 @@
-import Color from "color";
+import Color, { ColorLike } from "color";
 
-export type colorValue = Color | string;
+export type colorValue = ColorLike;
 
 export interface colorCalculateDistanceProps {
     // Color used to calculate distance to other color.

package/src/common/utils/colorDecideContrastvalue.ts

@@ -1,6 +1,6 @@
-import Color from "color";
+import Color, { ColorLike } from "color";
 
-export type colorValue = Color | string;
+export type colorValue = ColorLike;
 
 export interface decideContrastColorValueProps {
     // The color that is used to test if it need a light or dark color as contrast value.
@@ -21,7 +21,8 @@ const decideContrastColorValue = ({
         contrastColor = Color(testColor).isLight()
             ? Color(darkColor).rgb().toString()
             : Color(lightColor).rgb().toString();
-    } catch (ex) {
+    } catch {
+        // eslint-disable-next-line no-console
         console.warn("Received invalid colors", { testColor, lightColor, darkColor });
     }
     return contrastColor;

package/src/common/utils/colorHash.ts

@@ -1,11 +1,11 @@
-import Color from "color";
+import Color, { ColorInstance } from "color";
 
 import { CLASSPREFIX as eccgui, COLORMINDISTANCE } from "../../configuration/constants";
 
 import { colorCalculateDistance } from "./colorCalculateDistance";
 import CssCustomProperties from "./CssCustomProperties";
 
-type ColorOrFalse = Color | false;
+type ColorOrFalse = ColorInstance | false;
 export type ColorWeight = 100 | 300 | 500 | 700 | 900;
 export type PaletteGroup = "identity" | "semantic" | "layout" | "extra";
 
@@ -20,10 +20,10 @@ export interface getEnabledColorsProps {
     // includeMixedColors?: boolean;
 }
 
-const getEnabledColorsFromPaletteCache = new Map<string, Color[]>();
+const getEnabledColorsFromPaletteCache = new Map<string, ColorInstance[]>();
 const getEnabledColorPropertiesFromPaletteCache = new Map<string, [string, string][]>();
 
-export function getEnabledColorsFromPalette(props: getEnabledColorsProps): Color[] {
+export function getEnabledColorsFromPalette(props: getEnabledColorsProps): ColorInstance[] {
     const configId = JSON.stringify({
         includePaletteGroup: props.includePaletteGroup,
         includeColorWeight: props.includeColorWeight,
@@ -39,7 +39,7 @@ export function getEnabledColorsFromPalette(props: getEnabledColorsProps): Color
         configId,
         colorPropertiesFromPalette.map((color) => {
             return Color(color[1]);
-        })
+        }),
     );
 
     return getEnabledColorsFromPaletteCache.get(configId)!;
@@ -108,7 +108,7 @@ function getColorcode(text: string): ColorOrFalse {
 
 interface textToColorOptions {
     /** Stack of colors that are allowed to be returned. */
-    enabledColors: Color[] | "all" | getEnabledColorsProps;
+    enabledColors: ColorInstance[] | "all" | getEnabledColorsProps;
     /** Return input text if it represents a valid color string, e.g. `#000` or `black`. */
     returnValidColorsDirectly: boolean;
 }
@@ -138,7 +138,7 @@ export function textToColorHash({
     }
 
     if (!color) {
-        color = getColorcode(stringToHexColorHash(text)) as Color;
+        color = getColorcode(stringToHexColorHash(text)) as ColorInstance;
     }
 
     if (options.enabledColors === "all" && color) {
@@ -146,13 +146,9 @@ export function textToColorHash({
         return color.hex().toString();
     }
 
-    let enabledColors = [] as Color[];
-
-    if (Array.isArray(options.enabledColors)) {
-        enabledColors = options.enabledColors;
-    } else {
-        enabledColors = getEnabledColorsFromPalette(options.enabledColors as getEnabledColorsProps);
-    }
+    const enabledColors = Array.isArray(options.enabledColors)
+        ? options.enabledColors
+        : getEnabledColorsFromPalette(options.enabledColors as getEnabledColorsProps);
 
     if (enabledColors.length === 0) {
         // eslint-disable-next-line no-console
@@ -160,7 +156,7 @@ export function textToColorHash({
         return false;
     }
 
-    return nearestColorNeighbour(color, enabledColors as Color[])
+    return nearestColorNeighbour(color, enabledColors as ColorInstance[])
         .hex()
         .toString();
 }
@@ -190,7 +186,7 @@ function stringToHexColorHash(inputString: string): string {
     return integerToHexColor(integerHash);
 }
 
-function nearestColorNeighbour(color: Color, enabledColors: Color[]): Color {
+function nearestColorNeighbour(color: ColorInstance, enabledColors: ColorInstance[]): ColorInstance {
     const nearestNeighbour = enabledColors.reduce(
         (nearestColor, enabledColorsItem) => {
             const distance = colorCalculateDistance({
@@ -207,7 +203,7 @@ function nearestColorNeighbour(color: Color, enabledColors: Color[]): Color {
         {
             distance: Number.POSITIVE_INFINITY,
             color: enabledColors[0],
-        }
+        },
     );
     return nearestNeighbour.color;
 }

package/src/common/utils/getColorConfiguration.ts

@@ -57,8 +57,8 @@ const getColorConfiguration = (configId: colorconfigs): Record<string, string> =
                     } catch {
                         return [setting[0], undefined];
                     }
-                })
-            ) as Record<string, string>
+                }),
+            ) as Record<string, string>,
         );
     }
     return colorConfigurationMemo.get(configId)!;

package/src/common/utils/openInNewTab.ts

@@ -3,7 +3,7 @@
 export const openInNewTab = (
     event: React.MouseEvent<HTMLAnchorElement>,
     handler?: (e: React.MouseEvent<HTMLAnchorElement>) => void,
-    url?: string
+    url?: string,
 ) => {
     //if ctrl key or cmd key bypass click handler and delegation open in the background new tab
     if (url && (event.ctrlKey || event.metaKey)) {

package/src/common/utils/reduceToText.tsx

@@ -11,7 +11,7 @@ export interface ReduceToTextFuncType {
          *  Component or text to reduce HTML markup content to plain text.
          */
         input: React.ReactNode | React.ReactNode[] | string,
-        options?: Pick<TextReducerProps, "maxNodes" | "maxLength" | "decodeHtmlEntities" | "decodeHtmlEntitiesOptions">
+        options?: Pick<TextReducerProps, "maxNodes" | "maxLength" | "decodeHtmlEntities" | "decodeHtmlEntitiesOptions">,
     ): string;
 }
 

package/src/components/Accordion/AccordionItem.tsx

@@ -9,7 +9,8 @@ type sizeOptions = "none" | "small" | "medium" | "large";
 // workaround to get type/interface
 type CarbonAccordionItemProps = React.ComponentProps<typeof CarbonAccordionItem>;
 export interface AccordionItemProps
-    extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando">,
+    extends
+        Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando">,
         Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
     /**
      * additional user class name
@@ -18,7 +19,7 @@ export interface AccordionItemProps
     /**
      * header of accordion item
      */
-    label: string | JSX.Element;
+    label: string | React.JSX.Element;
     /**
      * use full available width for content
      */

package/src/components/Accordion/Stories/AccordionItem.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Accordion, AccordionItem, HtmlContentBlock } from "../../../../index";
+import { Accordion, AccordionItem, HtmlContentBlock } from "../../../components";
 
 export default {
     title: "Components/Accordion/AccordionItem",

package/src/components/Application/ApplicationContainer.tsx

@@ -11,20 +11,33 @@ export interface ApplicationContainerProps extends React.HTMLAttributes<HTMLDivE
      * This need to match with a `dropzone-for` data attribute on available dropzones for dragged elements.
      */
     monitorDropzonesFor?: string[];
+    /**
+     * Use a light or dark color palette for the GUI.
+     * On `auto` it depends on the system configuration.
+     */
+    themeMode?: "dark" | "light" | "auto";
 }
 
 export const ApplicationContainer = ({
     children,
     className = "",
     monitorDropzonesFor = [],
+    themeMode = "auto",
     ...otherDivProps
 }: ApplicationContainerProps) => {
-    const containerRef = React.useRef<any>(null);
+    const containerRef = React.useRef(null);
     useDropzoneMonitor(monitorDropzonesFor);
 
     return (
         <OverlaysProvider>
-            <div ref={containerRef} className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
+            <div
+                ref={containerRef}
+                className={
+                    `${eccgui}-application__container ${eccgui}-palette--${themeMode}` +
+                    (className ? ` ${className}` : "")
+                }
+                {...otherDivProps}
+            >
                 {children}
             </div>
         </OverlaysProvider>

package/src/components/Application/ApplicationSidebarNavigation.tsx

@@ -4,8 +4,12 @@ import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "@c
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ApplicationSidebarNavigationProps
-    extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
-        React.HTMLAttributes<HTMLElement> {}
+    extends
+        Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
+        React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    className?: string;
+}
 
 export const ApplicationSidebarNavigation = ({
     children,

package/src/components/Application/ApplicationTitle.tsx

@@ -60,7 +60,15 @@ export const ApplicationTitle = ({
             <span className={`${eccgui}-application__title--content`}>
                 {!!depiction && (
                     <>
-                        <span className={`${eccgui}-application__title--depiction`}>{depiction}</span>
+                        <span className={`${eccgui}-application__title--depiction`}>
+                            {React.isValidElement(depiction) ? (
+                                depiction
+                            ) : depiction instanceof HTMLElement ? (
+                                <>{depiction.outerHTML}</>
+                            ) : (
+                                depiction
+                            )}
+                        </span>
                     </>
                 )}
                 {!!prefix && (

package/src/components/Application/ApplicationToolbarAction.tsx

@@ -7,7 +7,8 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 // workaround to get type/interface
 type CarbonHeaderGlobalActionProps = React.ComponentProps<typeof CarbonHeaderGlobalAction>;
 export interface ApplicationToolbarActionProps
-    extends CarbonHeaderGlobalActionProps,
+    extends
+        CarbonHeaderGlobalActionProps,
         Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {}
 
 export const ApplicationToolbarAction = ({

package/src/components/Application/_colors.scss

@@ -1,9 +1,11 @@
 @use "sass:map";
 @use "sass:list";
 
-:root {
-    // creating css custom properties from palette colors
-    @each $palette-group-name, $palette-group-tints in $eccgui-color-palette-light {
+/**
+ * creating css custom properties from palette colors
+ */
+@mixin eccgui-custom-property-palette($color-palette) {
+    @each $palette-group-name, $palette-group-tints in $color-palette {
         @each $palette-tint-name, $palette-tint-colors in $palette-group-tints {
             @for $i from 1 through list.length($palette-tint-colors) {
                 $css-property-name: #{eccgui-color-name($palette-group-name, $palette-tint-name, ($i * 2 - 1) * 100)};
@@ -13,6 +15,16 @@
             }
         }
     }
+}
+
+:root {
+    // css custom properties for light palette
+    @include eccgui-custom-property-palette($eccgui-color-palette-light);
+
+    @media (prefers-color-scheme: dark) {
+        // css custom properties for dark palette
+        @include eccgui-custom-property-palette($eccgui-color-palette-dark);
+    }
 
     // set aliases for base colors
     --#{$eccgui}-color-primary: #{$eccgui-color-primary};
@@ -28,3 +40,15 @@
     --#{$eccgui}-color-danger-foreground: #{$eccgui-color-danger-text};
     --#{$eccgui}-color-danger-background: #{$eccgui-color-danger-background};
 }
+
+.#{$eccgui}-palette--light,
+html:has(.#{$eccgui}-application__container.#{$eccgui}-palette--light) {
+    // css custom properties for a forced light palette
+    @include eccgui-custom-property-palette($eccgui-color-palette-light);
+}
+
+.#{$eccgui}-palette--dark,
+html:has(.#{$eccgui}-application__container.#{$eccgui}-palette--dark) {
+    // css custom properties for a forced dark palette
+    @include eccgui-custom-property-palette($eccgui-color-palette-dark);
+}

package/src/components/Application/_container.scss

@@ -0,0 +1,5 @@
+html,
+.#{$eccgui}-application__container {
+    color: $eccgui-color-workspace-text;
+    background-color: $eccgui-color-workspace-background;
+}

package/src/components/Application/_header.scss

@@ -52,19 +52,22 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default;
 /// Item link
 $shell-header-link: $blue-60 !default;
 
+/// Height
+$shell-header-height: mini-units(8) !default;
+
 // load library sub component
 @import "~@carbon/react/scss/components/ui-shell/header/index";
 
 // tweak original layout
 
 .#{$prefix}--header {
-    height: mini-units(8);
+    height: $shell-header-height;
 }
 
 .#{$prefix}--header__action,
 .#{$prefix}--header__action.#{$prefix}--btn--icon-only {
-    width: mini-units(8);
-    height: mini-units(8);
+    width: $shell-header-height;
+    height: $shell-header-height;
     padding-block-start: 0;
     background-color: transparent;
 
@@ -128,7 +131,7 @@ span.#{$prefix}--header__name {
 }
 
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
-    height: mini-units(8);
+    height: $shell-header-height;
 }
 
 // tweak original colors (as long as config does not work properly)
@@ -267,15 +270,15 @@ a.#{$prefix}--header__menu-item:focus > svg {
     // adjust position of all other modal dialogs
 
     .#{$ns}-dialog-container {
-        top: mini-units(8);
-        left: mini-units(8);
-        width: calc(100% - #{mini-units(8)});
-        min-height: calc(100% - #{mini-units(8)});
+        top: $shell-header-height;
+        left: $shell-header-height;
+        width: calc(100% - #{$shell-header-height});
+        min-height: calc(100% - #{$shell-header-height});
     }
 
     .#{$eccgui}-dialog__wrapper {
-        max-width: calc(100vw - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
-        max-height: calc(100vh - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
+        max-width: calc(100vw - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace});
+        max-height: calc(100vh - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace});
         margin: 0;
     }
 }

package/src/components/Application/_sidebar.scss

@@ -26,6 +26,8 @@ $ui-02: $eccgui-color-workspace-background !default;
 
 .#{$prefix}--side-nav__navigation {
     padding: $eccgui-size-block-whitespace calc(0.5 * (#{mini-units(8)} - 30px));
+    color: eccgui-color-var("identity", "text", "900");
+    background-color: eccgui-color-var("identity", "background", "100");
     transition: none;
 }
 

package/src/components/Application/application.scss

@@ -1,5 +1,6 @@
 // @import 'config';
 @import "colors";
+@import "container";
 @import "header";
 @import "toolbar";
 

package/src/components/Application/stories/Application.stories.tsx

@@ -26,6 +26,7 @@ interface ApplicationBasicExampleProps {
     openUserMenu: boolean;
     countNotifications: number;
     colorBackgroundHeader?: string;
+    themeMode?: "light" | "dark" | "auto";
 }
 
 function ApplicationBasicExample(args: ApplicationBasicExampleProps) {
@@ -50,11 +51,15 @@ export default {
         colorBackgroundHeader: {
             control: { type: "color" },
         },
+        themeMode: {
+            control: "select",
+            options: ["auto", "light", "dark"],
+        },
     },
 } as Meta<typeof ApplicationBasicExample>;
 
 const TemplateBasicExample: StoryFn<typeof ApplicationBasicExample> = (args) => (
-    <ApplicationContainer>
+    <ApplicationContainer themeMode={args.themeMode}>
         <ApplicationHeader
             aria-label={"Application"}
             style={
@@ -147,3 +152,10 @@ BasicExample.args = {
     openUserMenu: false,
     countNotifications: 234,
 };
+BasicExample.decorators = [
+    (Story) => (
+        <div style={{ margin: "calc(-1 * var(--eccgui-size-block-whitespace) - 8px)" }}>
+            <Story />
+        </div>
+    ),
+];