Skip to content

Commit e0b0e11

Browse files
haschekhaschek
authored
Merge pull request #372 from eccenca/feature/basicCustomProperties
Provide basic custom properties for easy access to layout configurations
2 parents 1518fd5 + eccc749 commit e0b0e11

6 files changed

Lines changed: 181 additions & 6 deletions

File tree

‎.storybook/preview.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,14 @@ export const decorators = [
1919
];
2020

2121
export const parameters = {
22-
actions: { argTypesRegex: "^on[A-Z].*" },
22+
options: {
23+
storySort: {
24+
order: ["Configuration", "Components", "Forms", "Extensions", "CMEM", "*"],
25+
},
26+
},
27+
actions: {
28+
argTypesRegex: "^on[A-Z].*",
29+
},
2330
controls: {
2431
matchers: {
2532
color: /(background|color)$/i,

‎CHANGELOG.md‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,23 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
1111
- `<ApplicationViewability />`
1212
- component for hiding elements in specific media
1313
- `<InlineText />`
14-
- force children to get displayed as inline content
14+
- force children to get displayed as inline content
1515
- `<StringPreviewContentBlobToggler />`
16-
- `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly`
16+
- `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly`
17+
- CSS custom properties
18+
- beside the color palette we now mirror the most important layout configuration variables as CSS custom properties
1719

1820
### Fixed
1921

2022
- `<Tag />`
2123
- create more whitespace inside `small` tag
2224
- reduce visual impact of border
2325
- `<StringPreviewContentBlobToggler />`
24-
- take Markdown rendering into account before testing the maximum preview length
26+
- take Markdown rendering into account before testing the maximum preview length
2527
- `<NodeContent />`
2628
- header-menu items are vertically centered now
2729
- `Typography`
28-
- adjust displaying fallback symbols in different browsers
30+
- adjust displaying fallback symbols in different browsers
2931

3032
### Changed
3133

@@ -43,7 +45,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
4345
### Deprecated
4446

4547
- `<StringPreviewContentBlobToggler />`
46-
- `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"`
48+
- `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"`
4749

4850
## [25.0.0] - 2025-12-01
4951

‎src/components/Application/_colors.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@use "sass:list";
33

44
:root {
5+
// creating css custom properties from palette colors
56
@each $palette-group-name, $palette-group-tints in $eccgui-color-palette-light {
67
@each $palette-tint-name, $palette-tint-colors in $palette-group-tints {
78
@for $i from 1 through list.length($palette-tint-colors) {
@@ -12,4 +13,18 @@
1213
}
1314
}
1415
}
16+
17+
// set aliases for base colors
18+
--#{$eccgui}-color-primary: #{$eccgui-color-primary};
19+
--#{$eccgui}-color-primary-contrast: #{$eccgui-color-primary-contrast};
20+
--#{$eccgui}-color-accent: #{$eccgui-color-accent};
21+
--#{$eccgui}-color-accent-contrast: #{$eccgui-color-accent-contrast};
22+
--#{$eccgui}-color-success-foreground: #{$eccgui-color-success-text};
23+
--#{$eccgui}-color-success-background: #{$eccgui-color-success-background};
24+
--#{$eccgui}-color-info-foreground: #{$eccgui-color-info-text};
25+
--#{$eccgui}-color-info-background: #{$eccgui-color-info-background};
26+
--#{$eccgui}-color-warning-foreground: #{$eccgui-color-warning-text};
27+
--#{$eccgui}-color-warning-background: #{$eccgui-color-warning-background};
28+
--#{$eccgui}-color-danger-foreground: #{$eccgui-color-danger-text};
29+
--#{$eccgui}-color-danger-background: #{$eccgui-color-danger-background};
1530
}

‎src/configuration/_customproperties.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* We mirror our SCSS variables here to improve availability in inline styles
3+
* and module styles without included SCSS config stack.
4+
* Colors are set in `src/components/Application/_colors.scss`.
5+
*/
6+
7+
:root {
8+
--#{$eccgui}-size-typo-caption: #{$eccgui-size-typo-caption};
9+
--#{$eccgui}-size-typo-caption-lineheight: #{$eccgui-size-typo-caption-lineheight};
10+
--#{$eccgui}-size-typo-text: #{$eccgui-size-typo-text};
11+
--#{$eccgui}-size-typo-text-lineheight: #{$eccgui-size-typo-text-lineheight};
12+
--#{$eccgui}-size-typo-subtitle: #{$eccgui-size-typo-subtitle};
13+
--#{$eccgui}-size-typo-subtitle-lineheight: #{$eccgui-size-typo-subtitle-lineheight};
14+
--#{$eccgui}-size-typo-title: #{$eccgui-size-typo-title};
15+
--#{$eccgui}-size-typo-title-lineheight: #{$eccgui-size-typo-title-lineheight};
16+
--#{$eccgui}-size-typo-headline: #{$eccgui-size-typo-headline};
17+
--#{$eccgui}-size-typo-headline-lineheight: #{$eccgui-size-typo-headline-lineheight};
18+
--#{$eccgui}-font-weight-light: #{$eccgui-font-weight-light};
19+
--#{$eccgui}-font-weight-regular: #{$eccgui-font-weight-regular};
20+
--#{$eccgui}-font-weight-bold: #{$eccgui-font-weight-bold};
21+
--#{$eccgui}-font-spacing-condensed: #{$eccgui-font-spacing-condensed};
22+
--#{$eccgui}-font-spacing-regular: #{$eccgui-font-spacing-regular};
23+
--#{$eccgui}-font-spacing-wide: #{$eccgui-font-spacing-wide};
24+
--#{$eccgui}-size-block-whitespace: #{$eccgui-size-block-whitespace};
25+
--#{$eccgui}-size-inline-whitespace: #{$eccgui-size-inline-whitespace};
26+
--#{$eccgui}-opacity-regular: #{$eccgui-opacity-regular};
27+
--#{$eccgui}-opacity-narrow: #{$eccgui-opacity-narrow};
28+
--#{$eccgui}-opacity-muted: #{$eccgui-opacity-muted};
29+
--#{$eccgui}-opacity-disabled: #{$eccgui-opacity-disabled};
30+
--#{$eccgui}-opacity-ghostly: #{$eccgui-opacity-ghostly};
31+
--#{$eccgui}-opacity-invisible: #{$eccgui-opacity-invisible};
32+
}

‎src/configuration/stories/customproperties.stories.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import React from "react";
2+
import { Meta, StoryFn } from "@storybook/react";
3+
4+
import CssCustomProperties from "../../common/utils/CssCustomProperties";
5+
import {
6+
Section,
7+
SectionHeader,
8+
Spacing,
9+
Table,
10+
TableBody,
11+
TableCell,
12+
TableContainer,
13+
TableHead,
14+
TableHeader,
15+
TableRow,
16+
TitleSubsection,
17+
} from "../../components";
18+
import { CLASSPREFIX as eccgui } from "../../index";
19+
20+
const groups: { title: string; filterName: (name: string) => boolean }[] = [
21+
{
22+
title: "Typography",
23+
filterName: (name) => name.startsWith(`--${eccgui}-size-typo`),
24+
},
25+
{
26+
title: "Font weights and spacing",
27+
filterName: (name) => name.startsWith(`--${eccgui}-font`),
28+
},
29+
{
30+
title: "Whitespace",
31+
filterName: (name) => name.startsWith(`--${eccgui}-size-block`) || name.startsWith(`--${eccgui}-size-inline`),
32+
},
33+
{
34+
title: "Color aliases",
35+
filterName: (name) => name.startsWith(`--${eccgui}-color`) && !name.startsWith(`--${eccgui}-color-palette`),
36+
},
37+
{
38+
title: "Opacity",
39+
filterName: (name) => name.startsWith(`--${eccgui}-opacity`),
40+
},
41+
{
42+
title: "Palette colors",
43+
filterName: (name) => name.startsWith(`--${eccgui}-color-palette`),
44+
},
45+
];
46+
47+
const CssCustomPropertiesOverview = () => {
48+
return (
49+
<>
50+
{groups.map(({ title, filterName }) => {
51+
const properties = new CssCustomProperties({
52+
selectorText: ":root",
53+
filterName,
54+
removeDashPrefix: false,
55+
returnObject: false,
56+
}).customProperties() as string[][];
57+
58+
return (
59+
<React.Fragment key={title}>
60+
<Section>
61+
<SectionHeader>
62+
<TitleSubsection>{title}</TitleSubsection>
63+
</SectionHeader>
64+
<Spacing size="tiny" />
65+
<TableContainer>
66+
<Table columnWidths={["60%", "40%"]}>
67+
<TableHead>
68+
<TableRow>
69+
<TableHeader>CSS custom property</TableHeader>
70+
<TableHeader>Current value</TableHeader>
71+
</TableRow>
72+
</TableHead>
73+
<TableBody>
74+
{properties.map(([name, value]) => (
75+
<TableRow key={name}>
76+
<TableCell>
77+
<code>{name}</code>
78+
</TableCell>
79+
<TableCell>
80+
{name.startsWith(`--${eccgui}-color`) && (
81+
<span
82+
style={{
83+
display: "inline-block",
84+
width: `var(--${eccgui}-size-block-whitespace)`,
85+
height: `var(--${eccgui}-size-block-whitespace)`,
86+
backgroundColor: value,
87+
verticalAlign: "middle",
88+
marginRight: `var(--${eccgui}-size-inline-whitespace)`,
89+
border: "1px solid currentColor",
90+
}}
91+
/>
92+
)}
93+
<code>{value}</code>
94+
</TableCell>
95+
</TableRow>
96+
))}
97+
</TableBody>
98+
</Table>
99+
</TableContainer>
100+
</Section>
101+
<Spacing size="large" />
102+
</React.Fragment>
103+
);
104+
})}
105+
</>
106+
);
107+
};
108+
109+
/**
110+
* We mirror our SCSS configuration variables as CSS custom vars.
111+
* This way they can be easily used for inline styles or in CSS modules without SCSS includes.
112+
*/
113+
export default {
114+
title: "Configuration/CSS Custom Properties",
115+
component: CssCustomPropertiesOverview,
116+
} as Meta<typeof CssCustomPropertiesOverview>;
117+
118+
export const Default: StoryFn = () => <CssCustomPropertiesOverview />;

‎src/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
// == load default configuration ===============================================
1010

1111
@import "./configuration/variables";
12+
@import "./configuration/customproperties"; // mirror config as custom properties
1213

1314
// == Necessary imports from libraries =========================================
1415

0 commit comments

Comments
 (0)