From 9050bd7e7e2482797c3454b92d6f88681172d6a9 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 26 Feb 2026 12:46:22 +0100 Subject: [PATCH 1/6] mirror base config variables as css custom property, set aliases for some plattte colors --- src/components/Application/_colors.scss | 15 ++++++++++ src/configuration/_customproperties.scss | 38 ++++++++++++++++++++++++ src/index.scss | 1 + 3 files changed, 54 insertions(+) create mode 100644 src/configuration/_customproperties.scss diff --git a/src/components/Application/_colors.scss b/src/components/Application/_colors.scss index 6cd103d1..6a16bd7d 100644 --- a/src/components/Application/_colors.scss +++ b/src/components/Application/_colors.scss @@ -2,6 +2,7 @@ @use "sass:list"; :root { + // creating css custom properties from palette colors @each $palette-group-name, $palette-group-tints in $eccgui-color-palette-light { @each $palette-tint-name, $palette-tint-colors in $palette-group-tints { @for $i from 1 through list.length($palette-tint-colors) { @@ -12,4 +13,18 @@ } } } + + // set aliases for base colors + --#{$eccgui}-color-primary: #{$eccgui-color-primary}; + --#{$eccgui}-color-primary-contrast: #{$eccgui-color-primary-contrast}; + --#{$eccgui}-color-accent: #{$eccgui-color-accent}; + --#{$eccgui}-color-accent-contrast: #{$eccgui-color-accent-contrast}; + --#{$eccgui}-color-success-foreground: #{$eccgui-color-success-text}; + --#{$eccgui}-color-success-background: #{$eccgui-color-success-background}; + --#{$eccgui}-color-info-foreground: #{$eccgui-color-info-text}; + --#{$eccgui}-color-info-background: #{$eccgui-color-info-background}; + --#{$eccgui}-color-warning-foreground: #{$eccgui-color-warning-text}; + --#{$eccgui}-color-warning-background: #{$eccgui-color-warning-background}; + --#{$eccgui}-color-danger-foreground: #{$eccgui-color-danger-text}; + --#{$eccgui}-color-danger-background: #{$eccgui-color-danger-background}; } diff --git a/src/configuration/_customproperties.scss b/src/configuration/_customproperties.scss new file mode 100644 index 00000000..7a537895 --- /dev/null +++ b/src/configuration/_customproperties.scss @@ -0,0 +1,38 @@ +/** + * We mirror our SCSS variables here to improve availability in inline styles + * and module styles without included SCSS config stack. + * Colors are set in `src/components/Application/_colors.scss`. + */ + +:root { + --eccgui-size-typo-caption: #{$eccgui-size-typo-caption}; + --eccgui-size-typo-caption-lineheight: #{$eccgui-size-typo-caption-lineheight}; + --eccgui-size-typo-text: #{$eccgui-size-typo-text}; + --eccgui-size-typo-text-lineheight: #{$eccgui-size-typo-text-lineheight}; + --eccgui-size-typo-subtitle: #{$eccgui-size-typo-subtitle}; + --eccgui-size-typo-subtitle-lineheight: #{$eccgui-size-typo-subtitle-lineheight}; + --eccgui-size-typo-title: #{$eccgui-size-typo-title}; + --eccgui-size-typo-title-lineheight: #{$eccgui-size-typo-title-lineheight}; + --eccgui-size-typo-headline: #{$eccgui-size-typo-headline}; + --eccgui-size-typo-headline-lineheight: #{$eccgui-size-typo-headline-lineheight}; + --eccgui-size-typo-display-1: #{$eccgui-size-typo-display-1}; + --eccgui-size-typo-display-1-lineheight: #{$eccgui-size-typo-display-1-lineheight}; + --eccgui-size-typo-display-2: #{$eccgui-size-typo-display-2}; + --eccgui-size-typo-display-2-lineheight: #{$eccgui-size-typo-display-2-lineheight}; + --eccgui-size-typo-display-3: #{$eccgui-size-typo-display-3}; + --eccgui-size-typo-display-3-lineheight: #{$eccgui-size-typo-display-3-lineheight}; + --eccgui-font-weight-light: #{$eccgui-font-weight-light}; + --eccgui-font-weight-regular: #{$eccgui-font-weight-regular}; + --eccgui-font-weight-bold: #{$eccgui-font-weight-bold}; + --eccgui-font-spacing-condensed: #{$eccgui-font-spacing-condensed}; + --eccgui-font-spacing-regular: #{$eccgui-font-spacing-regular}; + --eccgui-font-spacing-wide: #{$eccgui-font-spacing-wide}; + --eccgui-size-block-whitespace: #{$eccgui-size-block-whitespace}; + --eccgui-size-inline-whitespace: #{$eccgui-size-inline-whitespace}; + --eccgui-opacity-regular: #{$eccgui-opacity-regular}; + --eccgui-opacity-narrow: #{$eccgui-opacity-narrow}; + --eccgui-opacity-muted: #{$eccgui-opacity-muted}; + --eccgui-opacity-disabled: #{$eccgui-opacity-disabled}; + --eccgui-opacity-ghostly: #{$eccgui-opacity-ghostly}; + --eccgui-opacity-invisible: #{$eccgui-opacity-invisible}; +} diff --git a/src/index.scss b/src/index.scss index f6707112..ad01bc16 100644 --- a/src/index.scss +++ b/src/index.scss @@ -9,6 +9,7 @@ // == load default configuration =============================================== @import "./configuration/variables"; +@import "./configuration/customproperties"; // mirror config as custom properties // == Necessary imports from libraries ========================================= From eace425bff6fda14a952a383e019ddfbbc2b1c9d Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 26 Feb 2026 12:52:22 +0100 Subject: [PATCH 2/6] use var to create custom property name --- src/configuration/_customproperties.scss | 60 ++++++++++++------------ 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/configuration/_customproperties.scss b/src/configuration/_customproperties.scss index 7a537895..00a923de 100644 --- a/src/configuration/_customproperties.scss +++ b/src/configuration/_customproperties.scss @@ -5,34 +5,34 @@ */ :root { - --eccgui-size-typo-caption: #{$eccgui-size-typo-caption}; - --eccgui-size-typo-caption-lineheight: #{$eccgui-size-typo-caption-lineheight}; - --eccgui-size-typo-text: #{$eccgui-size-typo-text}; - --eccgui-size-typo-text-lineheight: #{$eccgui-size-typo-text-lineheight}; - --eccgui-size-typo-subtitle: #{$eccgui-size-typo-subtitle}; - --eccgui-size-typo-subtitle-lineheight: #{$eccgui-size-typo-subtitle-lineheight}; - --eccgui-size-typo-title: #{$eccgui-size-typo-title}; - --eccgui-size-typo-title-lineheight: #{$eccgui-size-typo-title-lineheight}; - --eccgui-size-typo-headline: #{$eccgui-size-typo-headline}; - --eccgui-size-typo-headline-lineheight: #{$eccgui-size-typo-headline-lineheight}; - --eccgui-size-typo-display-1: #{$eccgui-size-typo-display-1}; - --eccgui-size-typo-display-1-lineheight: #{$eccgui-size-typo-display-1-lineheight}; - --eccgui-size-typo-display-2: #{$eccgui-size-typo-display-2}; - --eccgui-size-typo-display-2-lineheight: #{$eccgui-size-typo-display-2-lineheight}; - --eccgui-size-typo-display-3: #{$eccgui-size-typo-display-3}; - --eccgui-size-typo-display-3-lineheight: #{$eccgui-size-typo-display-3-lineheight}; - --eccgui-font-weight-light: #{$eccgui-font-weight-light}; - --eccgui-font-weight-regular: #{$eccgui-font-weight-regular}; - --eccgui-font-weight-bold: #{$eccgui-font-weight-bold}; - --eccgui-font-spacing-condensed: #{$eccgui-font-spacing-condensed}; - --eccgui-font-spacing-regular: #{$eccgui-font-spacing-regular}; - --eccgui-font-spacing-wide: #{$eccgui-font-spacing-wide}; - --eccgui-size-block-whitespace: #{$eccgui-size-block-whitespace}; - --eccgui-size-inline-whitespace: #{$eccgui-size-inline-whitespace}; - --eccgui-opacity-regular: #{$eccgui-opacity-regular}; - --eccgui-opacity-narrow: #{$eccgui-opacity-narrow}; - --eccgui-opacity-muted: #{$eccgui-opacity-muted}; - --eccgui-opacity-disabled: #{$eccgui-opacity-disabled}; - --eccgui-opacity-ghostly: #{$eccgui-opacity-ghostly}; - --eccgui-opacity-invisible: #{$eccgui-opacity-invisible}; + --#{$eccgui}-size-typo-caption: #{$eccgui-size-typo-caption}; + --#{$eccgui}-size-typo-caption-lineheight: #{$eccgui-size-typo-caption-lineheight}; + --#{$eccgui}-size-typo-text: #{$eccgui-size-typo-text}; + --#{$eccgui}-size-typo-text-lineheight: #{$eccgui-size-typo-text-lineheight}; + --#{$eccgui}-size-typo-subtitle: #{$eccgui-size-typo-subtitle}; + --#{$eccgui}-size-typo-subtitle-lineheight: #{$eccgui-size-typo-subtitle-lineheight}; + --#{$eccgui}-size-typo-title: #{$eccgui-size-typo-title}; + --#{$eccgui}-size-typo-title-lineheight: #{$eccgui-size-typo-title-lineheight}; + --#{$eccgui}-size-typo-headline: #{$eccgui-size-typo-headline}; + --#{$eccgui}-size-typo-headline-lineheight: #{$eccgui-size-typo-headline-lineheight}; + --#{$eccgui}-size-typo-display-1: #{$eccgui-size-typo-display-1}; + --#{$eccgui}-size-typo-display-1-lineheight: #{$eccgui-size-typo-display-1-lineheight}; + --#{$eccgui}-size-typo-display-2: #{$eccgui-size-typo-display-2}; + --#{$eccgui}-size-typo-display-2-lineheight: #{$eccgui-size-typo-display-2-lineheight}; + --#{$eccgui}-size-typo-display-3: #{$eccgui-size-typo-display-3}; + --#{$eccgui}-size-typo-display-3-lineheight: #{$eccgui-size-typo-display-3-lineheight}; + --#{$eccgui}-font-weight-light: #{$eccgui-font-weight-light}; + --#{$eccgui}-font-weight-regular: #{$eccgui-font-weight-regular}; + --#{$eccgui}-font-weight-bold: #{$eccgui-font-weight-bold}; + --#{$eccgui}-font-spacing-condensed: #{$eccgui-font-spacing-condensed}; + --#{$eccgui}-font-spacing-regular: #{$eccgui-font-spacing-regular}; + --#{$eccgui}-font-spacing-wide: #{$eccgui-font-spacing-wide}; + --#{$eccgui}-size-block-whitespace: #{$eccgui-size-block-whitespace}; + --#{$eccgui}-size-inline-whitespace: #{$eccgui-size-inline-whitespace}; + --#{$eccgui}-opacity-regular: #{$eccgui-opacity-regular}; + --#{$eccgui}-opacity-narrow: #{$eccgui-opacity-narrow}; + --#{$eccgui}-opacity-muted: #{$eccgui-opacity-muted}; + --#{$eccgui}-opacity-disabled: #{$eccgui-opacity-disabled}; + --#{$eccgui}-opacity-ghostly: #{$eccgui-opacity-ghostly}; + --#{$eccgui}-opacity-invisible: #{$eccgui-opacity-invisible}; } From 88c45a7fed23834bbba635824e4b51284100a7af Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 26 Feb 2026 13:43:33 +0100 Subject: [PATCH 3/6] remove properties for config values that are not used anyway atm --- src/configuration/_customproperties.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/configuration/_customproperties.scss b/src/configuration/_customproperties.scss index 00a923de..e72ba008 100644 --- a/src/configuration/_customproperties.scss +++ b/src/configuration/_customproperties.scss @@ -15,12 +15,6 @@ --#{$eccgui}-size-typo-title-lineheight: #{$eccgui-size-typo-title-lineheight}; --#{$eccgui}-size-typo-headline: #{$eccgui-size-typo-headline}; --#{$eccgui}-size-typo-headline-lineheight: #{$eccgui-size-typo-headline-lineheight}; - --#{$eccgui}-size-typo-display-1: #{$eccgui-size-typo-display-1}; - --#{$eccgui}-size-typo-display-1-lineheight: #{$eccgui-size-typo-display-1-lineheight}; - --#{$eccgui}-size-typo-display-2: #{$eccgui-size-typo-display-2}; - --#{$eccgui}-size-typo-display-2-lineheight: #{$eccgui-size-typo-display-2-lineheight}; - --#{$eccgui}-size-typo-display-3: #{$eccgui-size-typo-display-3}; - --#{$eccgui}-size-typo-display-3-lineheight: #{$eccgui-size-typo-display-3-lineheight}; --#{$eccgui}-font-weight-light: #{$eccgui-font-weight-light}; --#{$eccgui}-font-weight-regular: #{$eccgui-font-weight-regular}; --#{$eccgui}-font-weight-bold: #{$eccgui-font-weight-bold}; From 2800a93d50b428fb21c575a48a4809eb8b8c816f Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 26 Feb 2026 13:47:26 +0100 Subject: [PATCH 4/6] add overview about available css custom properties to the storybook --- .../stories/customproperties.stories.tsx | 114 ++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 src/configuration/stories/customproperties.stories.tsx diff --git a/src/configuration/stories/customproperties.stories.tsx b/src/configuration/stories/customproperties.stories.tsx new file mode 100644 index 00000000..b511cf1e --- /dev/null +++ b/src/configuration/stories/customproperties.stories.tsx @@ -0,0 +1,114 @@ +import React from "react"; +import { Meta, StoryFn } from "@storybook/react"; + +import CssCustomProperties from "../../common/utils/CssCustomProperties"; +import { + Section, + SectionHeader, + Spacing, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableHeader, + TableRow, + TitleSubsection, +} from "../../components"; +import { CLASSPREFIX as eccgui } from "../../index"; + +const groups: { title: string; filterName: (name: string) => boolean }[] = [ + { + title: "Typography", + filterName: (name) => name.startsWith(`--${eccgui}-size-typo`), + }, + { + title: "Font weights and spacing", + filterName: (name) => name.startsWith(`--${eccgui}-font`), + }, + { + title: "Whitespace", + filterName: (name) => name.startsWith(`--${eccgui}-size-block`) || name.startsWith(`--${eccgui}-size-inline`), + }, + { + title: "Color aliases", + filterName: (name) => name.startsWith(`--${eccgui}-color`) && !name.startsWith(`--${eccgui}-color-palette`), + }, + { + title: "Opacity", + filterName: (name) => name.startsWith(`--${eccgui}-opacity`), + }, + { + title: "Palette colors", + filterName: (name) => name.startsWith(`--${eccgui}-color-palette`), + }, +]; + +const CssCustomPropertiesOverview = () => { + return ( + <> + {groups.map(({ title, filterName }) => { + const properties = new CssCustomProperties({ + selectorText: ":root", + filterName, + removeDashPrefix: false, + returnObject: false, + }).customProperties() as string[][]; + + return ( + +
+ + {title} + + + + + + + CSS custom property + Current value + + + + {properties.map(([name, value]) => ( + + + {name} + + + {name.startsWith(`--${eccgui}-color`) && ( + + )} + {value} + + + ))} + +
+ +
+ + + ); + })} + + ); +}; + +export default { + title: "Configuration/CSS Custom Properties", + component: CssCustomPropertiesOverview, +} as Meta; + +export const Default: StoryFn = () => ; From 861352bdcdc12342d95d0f453dc2686c1cf03ed5 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 26 Feb 2026 14:04:15 +0100 Subject: [PATCH 5/6] re-order storybook sidebar --- .storybook/preview.js | 9 ++++++++- src/configuration/stories/customproperties.stories.tsx | 4 ++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index fc432f30..fd350e4b 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -19,7 +19,14 @@ export const decorators = [ ]; export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, + options: { + storySort: { + order: ["Configuration", "Components", "Forms", "Extensions", "CMEM", "*"], + }, + }, + actions: { + argTypesRegex: "^on[A-Z].*", + }, controls: { matchers: { color: /(background|color)$/i, diff --git a/src/configuration/stories/customproperties.stories.tsx b/src/configuration/stories/customproperties.stories.tsx index b511cf1e..93722ed8 100644 --- a/src/configuration/stories/customproperties.stories.tsx +++ b/src/configuration/stories/customproperties.stories.tsx @@ -106,6 +106,10 @@ const CssCustomPropertiesOverview = () => { ); }; +/** + * We mirror our SCSS configuration variables as CSS custom vars. + * This way they can be easily used for inline styles or in CSS modules without SCSS includes. + */ export default { title: "Configuration/CSS Custom Properties", component: CssCustomPropertiesOverview, From eccc749b99c7fd739c87c7364f10933110142949 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 26 Feb 2026 15:32:55 +0100 Subject: [PATCH 6/6] update changelog --- CHANGELOG.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f61ca14a..628cb853 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,9 +11,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `` - component for hiding elements in specific media - `` - - force children to get displayed as inline content + - force children to get displayed as inline content - `` - - `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly` + - `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly` +- CSS custom properties + - beside the color palette we now mirror the most important layout configuration variables as CSS custom properties ### Fixed @@ -21,11 +23,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - create more whitespace inside `small` tag - reduce visual impact of border - `` - - take Markdown rendering into account before testing the maximum preview length + - take Markdown rendering into account before testing the maximum preview length - `` - header-menu items are vertically centered now - `Typography` - - adjust displaying fallback symbols in different browsers + - adjust displaying fallback symbols in different browsers ### Changed @@ -43,7 +45,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ### Deprecated - `` - - `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"` + - `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"` ## [25.0.0] - 2025-12-01