diff --git a/source/_patterns/colors/_usage.demonstration.scss b/source/_patterns/colors/_usage.demonstration.scss new file mode 100644 index 000000000..37accd3da --- /dev/null +++ b/source/_patterns/colors/_usage.demonstration.scss @@ -0,0 +1,16 @@ +.DO-NOT-COPY-THIS-CLASS-example-color-container { + width: 100%; + + label { + font-size: 0.75rem; + line-height: 2rem; + } + + aside { + padding: 2rem; + } + + + .DO-NOT-COPY-THIS-CLASS-example-color-container { + margin-left: 1rem; + } +} diff --git a/source/_patterns/colors/colors.hbs b/source/_patterns/colors/examples.hbs similarity index 100% rename from source/_patterns/colors/colors.hbs rename to source/_patterns/colors/examples.hbs diff --git a/source/_patterns/colors/examples.md b/source/_patterns/colors/examples.md new file mode 100644 index 000000000..f5bf7d580 --- /dev/null +++ b/source/_patterns/colors/examples.md @@ -0,0 +1,3 @@ +--- +title: Color Tokens +--- diff --git a/source/_patterns/colors/intro.hbs b/source/_patterns/colors/intro.hbs new file mode 100644 index 000000000..27584fde3 --- /dev/null +++ b/source/_patterns/colors/intro.hbs @@ -0,0 +1,32 @@ +
+
+

Color System

+

DB UX Design Guidelines 3.0 introduce a complete new set of color variables that follow some rules to work with.

+

Each accent color (primary, secondary, information, etc.) is provided in a group of six compatible colors of different tones for pairing, defining emphasis, and visual expression.

+

Background colors define their own foreground color by so named on-colors. For using the DB Design System with SCSS, we provide a wide range of SCSS placeholders and utility + classes that automatically style e.g. text and links based on their current background color. For more information have a look at the usage section.

+ +

Color Scheme – Primary (Example)

+

The following example shows the available colors for the primary brand color. + Each defined color has an interactive mode which means that colors for hover and pressed states are defined.

+
+
Primary
base key color
+
On Primary
is applied to content (icons, text, etc.) that sits on top of primary
+
Primary Background-Light
background color for current key color. Only used for backrounds.
+
Primary Background Transparent
Transparent or semi transparent backgrounds for current key color, e.g. used for form field backgrounds.
+
On Primary Background
is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent).
+
On Primary Background Weak
is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent) and is a variant to weaken content on primary backgrounds.
+
+ +

Color Scheme Illustration

+
+ Color Scheme Example + Color Scheme Example +
+ +

Neutral Color Scheme

+

The neutral color palette exists of six color variants plus two on-color variants (default and weak). In contrast to key colors like primary, neutral colors can only be used for backgrounds.

+ + Neutral Color Scheme +
+
diff --git a/source/_patterns/colors/intro.json b/source/_patterns/colors/intro.json new file mode 100644 index 000000000..01258184d --- /dev/null +++ b/source/_patterns/colors/intro.json @@ -0,0 +1,3 @@ +{ + "bodyClass": "tpl-intro" +} diff --git a/source/_patterns/colors/intro.md b/source/_patterns/colors/intro.md new file mode 100644 index 000000000..5acebf430 --- /dev/null +++ b/source/_patterns/colors/intro.md @@ -0,0 +1,4 @@ +--- +title: Intro +order: -1 +--- diff --git a/source/_patterns/colors/usage.hbs b/source/_patterns/colors/usage.hbs new file mode 100644 index 000000000..f1d4ea46e --- /dev/null +++ b/source/_patterns/colors/usage.hbs @@ -0,0 +1,93 @@ +
+
+

Colors Usage

+

+ The defined color palette specifies colors in three dimensions: background, foreground (e.g. text, icons) and specific states as :hover and :active. + For each key color (primary, secondary, etc.) and each background color including neutral color palette DB UI Base provides SCSS utility classes and + placeholders to ensure correct use of defined color combinations. +

+ + + +

With SCSS placeholders

+ 
+/* ./index.scss */
+@import "@db-ui-base/build/scss/variables";
+@import "@db-ui-base/build/scss/color-placeholder";
+
+// placeholder defines background-color and color according to current key color
+.background-element-information {
+  @extend %db-bg-information;
+}
+
+// interactive mode enables :hover and :active states
+.background-element-information--interactive {
+  @extend %db-bg-information-ia;
+}
+
+// background light
+.background-element-information-light {
+  @extend %db-bg-information-light;
+}
+
+// background semi transparent
+.background-element-information-transparent-semi {
+  @extend %db-bg-information-transparent-semi;
+}
+
+// accent color (primary, success, etc.) for text only
+p {
+  @extend %db-text-success;
+}
+
+// custom interactive text elements (a elements are interactive by default)
+// ineractivity can also be reached via [data-variant="ia"]
+p.copy-text--interactive {
+  @extend %db-text-warning--ia;
+}
+
+
+ +

With utility classes

+

Applies all

+ 
+/* ./index.scss */
+@import "@db-ui-base/build/scss/variables";
+@import "@db-ui-base/build/scss/color-placeholder";
+@import "@db-ui-base/build/scss/color-classes";
+
+
+ +
+
+ + +
+
+ + +
+
+ + + +
+
+ + +
+
+ +
+
diff --git a/source/_patterns/colors/usage.md b/source/_patterns/colors/usage.md new file mode 100644 index 000000000..a59795b32 --- /dev/null +++ b/source/_patterns/colors/usage.md @@ -0,0 +1,8 @@ +--- +title: Usage +--- + +## Accessibility + +SVGs are often conveyed inconsistently to assistive technologies. The component’s accessibility is also highly contextual. +For optimal user experience, use the aria-description prop to let assistive technology users know the purpose of the loading spinner. diff --git a/source/css/db-ui-base.scss b/source/css/db-ui-base.scss index 5bb1d0835..0275cfa9a 100644 --- a/source/css/db-ui-base.scss +++ b/source/css/db-ui-base.scss @@ -1,6 +1,7 @@ @import "../../build/scss/variables"; @import "../../build/scss/font-faces"; @import "../../build/scss/typography-classes"; +@import "../../build/scss/typography-placeholder"; @import "../../build/scss/color-placeholder"; @import "../../build/scss/color-classes"; @@ -14,6 +15,8 @@ optgroup, select, textarea { font-family: $db-font-family-sans; + + @extend %db-typo-body-md; } strong, @@ -33,6 +36,7 @@ h6 { @import "../_patterns/icons/icons.demonstration"; @import "../_patterns/logo/examples.demonstration"; @import "../_patterns/spacings/examples.demonstration"; +@import "../_patterns/colors/usage.demonstration"; main { padding: $db-spacing-1 $db-spacing-3; diff --git a/source/css/pattern-scaffolding.css b/source/css/pattern-scaffolding.css index 4f8da59c3..b7f7354be 100644 --- a/source/css/pattern-scaffolding.css +++ b/source/css/pattern-scaffolding.css @@ -252,3 +252,32 @@ max-width: 20rem; } } + +/** +* Colors Documentation +**/ + +main.colors-documentation h2 { + margin-top: 3rem; +} + +main.colors-documentation h3 { + margin-top: 2rem; +} + +main.colors-documentation figure { + margin: 0; + display: grid; + grid-auto-columns: 50% 50%; + grid: 1fr 1fr; + grid-gap: 1rem; + grid-auto-flow: column; +} + +main.colors-documentation img { + height: auto; + max-width: 100%; + border-radius: 0.875rem; + box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, + rgb(60 64 67 / 15%) 0px 1px 3px 1px; +} diff --git a/source/images/documentation/colors/neutral-palette.png b/source/images/documentation/colors/neutral-palette.png new file mode 100644 index 000000000..d8b97ea80 Binary files /dev/null and b/source/images/documentation/colors/neutral-palette.png differ diff --git a/source/images/documentation/colors/primary-background.png b/source/images/documentation/colors/primary-background.png new file mode 100644 index 000000000..d21f63a93 Binary files /dev/null and b/source/images/documentation/colors/primary-background.png differ diff --git a/source/images/documentation/colors/primary.png b/source/images/documentation/colors/primary.png new file mode 100644 index 000000000..e100f26e1 Binary files /dev/null and b/source/images/documentation/colors/primary.png differ