diff --git a/package-lock.json b/package-lock.json
index 7fd93762d66..498e4ba92ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11375,8 +11375,7 @@
"node_modules/@types/prop-types": {
"version": "15.7.12",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
- "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
- "dev": true
+ "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
},
"node_modules/@types/pug": {
"version": "2.0.10",
@@ -11400,7 +11399,6 @@
"version": "18.3.3",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
"integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
- "dev": true,
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
@@ -30067,6 +30065,16 @@
"node": ">= 6"
}
},
+ "node_modules/prop-types": {
+ "version": "15.8.1",
+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+ "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+ "dependencies": {
+ "loose-envify": "^1.4.0",
+ "object-assign": "^4.1.1",
+ "react-is": "^16.13.1"
+ }
+ },
"node_modules/property-information": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
@@ -30527,6 +30535,20 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-archer": {
+ "version": "4.4.0",
+ "resolved": "https://registry.npmjs.org/react-archer/-/react-archer-4.4.0.tgz",
+ "integrity": "sha512-m9mEpGHphwWZW7mzk7UVGJVwom353lAbDQ/DJIYH59LnEpEVyaE3KxZKBChB5WYipyOl3HhRlVQk+TknJbGfSQ==",
+ "dependencies": {
+ "react-fast-compare": "^2.0.4",
+ "resize-observer-polyfill": "1.5.0"
+ },
+ "peerDependencies": {
+ "@types/react": "^16.8.8 || ^17 || ^18",
+ "prop-types": "^15.6.2",
+ "react": "^16.9.0 || ^17 || ^18"
+ }
+ },
"node_modules/react-docgen": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-7.0.3.tgz",
@@ -30581,6 +30603,16 @@
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==",
"dev": true
},
+ "node_modules/react-fast-compare": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+ "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+ },
+ "node_modules/react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ },
"node_modules/react-refresh": {
"version": "0.14.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -31417,6 +31449,11 @@
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
"dev": true
},
+ "node_modules/resize-observer-polyfill": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
+ "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
+ },
"node_modules/resolve": {
"version": "1.22.8",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -38341,7 +38378,7 @@
},
"showcases/next-showcase": {
"dependencies": {
- "next": "*",
+ "next": "latest",
"react": "18.3.1",
"react-dom": "18.3.1"
},
@@ -38372,6 +38409,7 @@
"highlight.js": "^11.10.0",
"next": "14.2.5",
"react": "18.3.1",
+ "react-archer": "^4.4.0",
"react-dom": "18.3.1",
"rehype-slug": "6.0.0",
"remark-gfm": "4.0.0"
diff --git a/showcases/patternhub/data/routes.tsx b/showcases/patternhub/data/routes.tsx
index 0c0a71d229b..55022630cd5 100644
--- a/showcases/patternhub/data/routes.tsx
+++ b/showcases/patternhub/data/routes.tsx
@@ -171,6 +171,10 @@ export const ROUTES: NavigationItem[] = [
{
label: 'Color Schemes',
path: '/foundations/colors/color-schemes'
+ },
+ {
+ label: 'Color Usage Guide',
+ path: '/foundations/colors/color-usage-guide'
}
]
},
diff --git a/showcases/patternhub/package.json b/showcases/patternhub/package.json
index 56e4828fede..734f72a6cc0 100644
--- a/showcases/patternhub/package.json
+++ b/showcases/patternhub/package.json
@@ -26,6 +26,7 @@
"highlight.js": "^11.10.0",
"next": "14.2.5",
"react": "18.3.1",
+ "react-archer": "^4.4.0",
"react-dom": "18.3.1",
"rehype-slug": "6.0.0",
"remark-gfm": "4.0.0"
diff --git a/showcases/patternhub/pages/_app.tsx b/showcases/patternhub/pages/_app.tsx
index 6dac8551b71..63049a96fea 100644
--- a/showcases/patternhub/pages/_app.tsx
+++ b/showcases/patternhub/pages/_app.tsx
@@ -4,6 +4,7 @@ import type { AppProps } from 'next/app';
import Head from 'next/head';
import '../styles/globals.scss';
import '../styles/highlight.scss';
+import '../styles/decision-tree.scss';
import '../../showcase-styles.css';
import LinkHeader from '../components/link-header';
diff --git a/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx b/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx
new file mode 100644
index 00000000000..7624a608c0c
--- /dev/null
+++ b/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx
@@ -0,0 +1,417 @@
+import { ArcherContainer, ArcherElement } from 'react-archer';
+import Link from 'next/link';
+import DefaultPage from '../../../components/default-page';
+import {
+ DBLink,
+ DBIcon,
+ DBCard,
+ DBSection
+} from '../../../../../output/react/src';
+import { SEMANTICS } from '../../../../../packages/components/src/shared/constants';
+
+const ColorUsageGuide = () => {
+ return (
+
+ How to apply colors
+
+ This decision tree can help you to find out which method is the
+ most suitable and easiest to color layouts, elements or
+ components in your project.
+
+
+
+
+
+
+
+
+
+
+
+ What would you like to color?
+
+
+
+
+
+
+
+
+
+
+
+
+ Coloring using the DST layout
+
+
+
+
+
+
+
+
+
+ Advanced and detailed coloring
+
+
+
+
+
+
+
+
+
+
+ Change semantic / contextual
+ container color
+
+
+
+
+
+
+
Backgrounds or texts and icons
+
+
+
+
+
+
Parts of custom components
+
+
+
+
+
+
+
+
+ This will change the whole semantic
+ / contextual color set used by
+ backgrounds, texts, icons and DST
+ Components (using adaptive colors)
+ within a container.
+
+
+
+
+
+
+
+
+ Change background {' '}
+ or text and icon {' '}
+ color gradation within a container
+ or for an certain element.
+
+
+ {' '}
+ Only colors that are permitted for
+ the corresponding purposes can be
+ selected here.
+
+
+
+
+
+
+
+ Parts of custom components (texts,
+ backgrounds, borders, interactive
+ states, etc.) are colored in the css
+ / scss with variables.
+
+
+
+
+
+
+
+
+
+
+
+
+ Background color
+
+
+
+ Changes the elevation or
+ transparency of a container.
+
+
+
+
+
+
+
+
+ Text and icon color
+
+
+
+
+
+
+
+
+
+
+
+
+ Default: Adaptive colors
+
+
+
+ Adaptive to surrounding semantic
+ container color and dark mode
+
+
+
+
+
+
+
+
+ Optional: Explicit colors
+
+
+
Still adaptive to dark mode
+
+
+
+
+
+
+
+
+
+ Use container color class
+
+
+
+
+
+
+
+
+
+
+
+ Use background color
+ modifier classes
+
+
+
+
+
+
+
+
+
+ Use on-background color
+ modifier classes
+
+
+
+
+
+
+
+
+
+
+
+ Use adaptive color variables (link
+ will follow)
+
+
+
+
+
+
+ Use explicit color variables (link
+ will follow)
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ColorUsageGuide;
diff --git a/showcases/patternhub/pages/foundations/colors/overview.tsx b/showcases/patternhub/pages/foundations/colors/overview.tsx
index 6fe8a41c144..5e98a974df1 100644
--- a/showcases/patternhub/pages/foundations/colors/overview.tsx
+++ b/showcases/patternhub/pages/foundations/colors/overview.tsx
@@ -52,7 +52,7 @@ const ColorOverview = () => {
db-on-bg-color-[ color ]
- 1. Container color
+ 1. Container color
These classes define the{' '}
monochromatic adaptive color scheme for a
@@ -96,7 +96,9 @@ const ColorOverview = () => {
prefixClass="db-container-color-"
dataAttributeName="data-container-color"
/>
-
2. Background color modifier
+
+ 2. Background color modifier
+
These classes define the type of background color for a
container. The exact color tone then results from the
@@ -109,7 +111,9 @@ const ColorOverview = () => {
prefixClass="db-bg-color-"
dataAttributeName="data-bg-color"
/>
-
3. On background color modifier
+
+ 3. On background color modifier
+
This class is used to define the contrast for{' '}
texts and icons . As with
diff --git a/showcases/patternhub/styles/decision-tree.scss b/showcases/patternhub/styles/decision-tree.scss
new file mode 100644
index 00000000000..620d8c81928
--- /dev/null
+++ b/showcases/patternhub/styles/decision-tree.scss
@@ -0,0 +1,45 @@
+@use "@db-ui/foundations/build/scss/variables";
+
+.decision-tree {
+ display: flex;
+ flex-direction: column;
+ gap: variables.$db-spacing-fixed-3xl;
+ text-align: center;
+
+ h2 {
+ font-size: var(--db-type-headline-font-size-3xs);
+ line-height: var(--db-type-headline-line-height-3xs);
+ margin-block: var(--db-spacing-fixed-3xs);
+ }
+
+ .db-link {
+ white-space: break-spaces;
+ }
+
+ .card-inner {
+ margin-block: auto;
+ }
+}
+
+.decision-tree-row {
+ display: grid;
+ justify-content: center;
+ gap: variables.$db-spacing-fixed-md;
+
+ &.grid-1-1-1 {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+
+ &.grid-1-1 {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ > .column-1-3 {
+ grid-column-start: 1;
+ grid-column-end: 3;
+ }
+
+ > a > div {
+ height: 100%;
+ }
+}