From e178ef0687c93bf73cb6cc320f6fe60ed0af3cdb Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Thu, 1 Aug 2024 09:19:11 +0200 Subject: [PATCH 1/2] docs: adds decision tree for color usage --- package-lock.json | 46 +- showcases/patternhub/data/routes.tsx | 4 + showcases/patternhub/package.json | 1 + showcases/patternhub/pages/_app.tsx | 1 + .../foundations/colors/color-usage-guide.tsx | 417 ++++++++++++++++++ .../pages/foundations/colors/overview.tsx | 10 +- .../patternhub/styles/decision-tree.scss | 45 ++ 7 files changed, 517 insertions(+), 7 deletions(-) create mode 100644 showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx create mode 100644 showcases/patternhub/styles/decision-tree.scss diff --git a/package-lock.json b/package-lock.json index 8e98e45a3d7..75359898d1b 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 768b9040223..9aa16257f0d 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%; + } +} From d45b76f42b09e028f80b23da1b3958c969391d76 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Thu, 1 Aug 2024 14:37:46 +0200 Subject: [PATCH 2/2] fix: replaces hex stroke color by css var --- .../patternhub/pages/foundations/colors/color-usage-guide.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx b/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx index 7624a608c0c..cb739b0fd55 100644 --- a/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx +++ b/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx @@ -20,7 +20,7 @@ const ColorUsageGuide = () => {