refactor: backdrop opacity to use new opacity token for documentation (#4269)

nmerget · mfranzke · web-flow · commit fdacb4c61f05 · 2025-05-28T12:20:16.000Z
* refactor: backdrop opacity to use new opacity token for documentation

* fix: wrong path for backdrop.mdx

* docs: update patternhub components section with misc

---------

Co-authored-by: Maximilian Franzke &lt;787658+mfranzke@users.noreply.github.com&gt;
diff --git a/packages/components/docs/Backdrop.md b/packages/components/docs/Backdrop.md
@@ -0,0 +1,49 @@
+# Backdrop
+
+There is no `Backdrop` component.
+If you need a backdrop like the one in `DBDrawer` you sould apply those styles:
+
+## CSS
+
+```css
+.my-backdrop {
+	background-color: color(
+		from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b /
+			var(--db-opacity-lg)
+	);
+}
+
+/* OR */
+
+dialog::backdrop {
+	background-color: color(
+		from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b /
+			var(--db-opacity-lg)
+	);
+}
+```
+
+## SCSS
+
+```scss
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/variables";
+
+.my-backdrop {
+	background-color: color(
+		from #{colors.$db-adaptive-on-bg-basic-emphasis-100-default} srgb r g
+			b / #{variables.$db-opacity-lg}
+	);
+}
+
+/* OR */
+
+dialog::backdrop {
+	background-color: color(
+		from #{colors.$db-adaptive-on-bg-basic-emphasis-100-default} srgb r g
+			b / #{variables.$db-opacity-lg}
+	);
+}
+```
+
+> **NOTE:** If you want to use the `weak` variant you should use the `db-opacity-sm` variable.
diff --git a/packages/components/src/components/accordion-item/accordion-item.scss b/packages/components/src/components/accordion-item/accordion-item.scss
@@ -26,7 +26,7 @@
 
 		&[aria-disabled="true"] {
 			pointer-events: none;
-			opacity: component.$default-disabled;
+			opacity: variables.$db-opacity-md;
 		}
 
 		@media screen and (prefers-reduced-motion: no-preference) {
diff --git a/packages/components/src/components/button/button.scss b/packages/components/src/components/button/button.scss
@@ -98,7 +98,7 @@
 	}
 
 	&:disabled {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 	}
 
 	// States (currently only "loading")
diff --git a/packages/components/src/components/custom-select/custom-select.scss b/packages/components/src/components/custom-select/custom-select.scss
@@ -162,8 +162,8 @@
 					inset: 0;
 					content: "";
 					cursor: default;
-					background-color: dialog-init.$backdrop-color;
-					opacity: dialog-init.$backdrop-opacity-strong;
+					background-color: dialog-init.$backdrop-color-strong;
+					opacity: variables.$db-opacity-lg;
 				}
 			}
 		}
diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -161,7 +161,7 @@
 	}
 
 	&[aria-disabled="true"] {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 		pointer-events: none;
 	}
 }
diff --git a/packages/components/src/components/tab-item/tab-item.scss b/packages/components/src/components/tab-item/tab-item.scss
@@ -18,7 +18,7 @@ $with-icon-padding-calc: calc(
 	border-radius: variables.$db-border-radius-sm;
 
 	&:has(input:disabled) {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 	}
 
 	label {
diff --git a/packages/components/src/components/tag/tag.scss b/packages/components/src/components/tag/tag.scss
@@ -209,7 +209,7 @@
 
 	&:has(:disabled),
 	&[data-disabled="true"] {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 		pointer-events: none;
 	}
 
diff --git a/packages/components/src/styles/dialog-init.scss b/packages/components/src/styles/dialog-init.scss
@@ -1,9 +1,15 @@
 @use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/variables";
 
-$backdrop-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};
+$backdrop-color-strong: color(
+	from #{colors.$db-adaptive-on-bg-basic-emphasis-100-default} srgb r g b /
+		#{variables.$db-opacity-lg}
+);
 
-$backdrop-opacity-strong: 0.64;
-$backdrop-opacity-weak: 0.32;
+$backdrop-color-weak: color(
+	from #{colors.$db-adaptive-on-bg-basic-emphasis-100-default} srgb r g b /
+		#{variables.$db-opacity-sm}
+);
 
 %dialog-container {
 	position: fixed;
@@ -36,21 +42,20 @@ dialog {
 	&:not([data-backdrop="none"]) {
 		&::backdrop,
 		&::before {
-			background-color: $backdrop-color;
-			opacity: $backdrop-opacity-strong;
+			background-color: $backdrop-color-strong;
 		}
 
 		&[data-backdrop="invisible"] {
 			&::backdrop,
 			&::before {
-				opacity: 0;
+				background-color: transparent;
 			}
 		}
 
 		&[data-backdrop="weak"] {
 			&::backdrop,
 			&::before {
-				opacity: $backdrop-opacity-weak;
+				background-color: $backdrop-color-weak;
 			}
 		}
 	}
diff --git a/packages/components/src/styles/internal/_component.scss b/packages/components/src/styles/internal/_component.scss
@@ -7,9 +7,6 @@ $min-mobile-header-height: calc(
 	#{variables.$db-sizing-md} + 2 * #{variables.$db-spacing-fixed-xs}
 );
 
-$default-disabled: 0.4;
-$placeholder-disabled: 0.75;
-
 $component-border: variables.$db-border-width-3xs solid
 	colors.$db-adaptive-on-bg-basic-emphasis-60-default;
 
diff --git a/packages/components/src/styles/internal/_form-components.scss b/packages/components/src/styles/internal/_form-components.scss
@@ -79,7 +79,7 @@ $db-min-inline-size: var(
 		> label {
 			@extend %db-overwrite-font-size-md;
 
-			opacity: component.$placeholder-disabled;
+			opacity: variables.$db-opacity-xl;
 			position: absolute;
 			z-index: 2;
 			inset-block-start: calc(
@@ -138,7 +138,7 @@ $db-min-inline-size: var(
 			}
 
 			@include placeholder-content($selector) {
-				opacity: component.$placeholder-disabled;
+				opacity: variables.$db-opacity-xl;
 				font-family: var(--db-font-family-sans);
 				font-style: italic;
 
@@ -332,7 +332,7 @@ $input-valid-types:
 	}
 
 	@include placeholder-content($selector) {
-		opacity: component.$placeholder-disabled;
+		opacity: variables.$db-opacity-xl;
 		font-family: var(--db-font-family-sans);
 		font-style: italic;
 	}
@@ -401,7 +401,7 @@ $input-valid-types:
 			#{$selector}[aria-disabled="true"]
 		) {
 		// Decided against cursor: not-allowed, compare to e.g. https://phabricator.wikimedia.org/T121960
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 		pointer-events: none;
 	}
 
@@ -484,7 +484,7 @@ $input-valid-types:
 	@include set-required-label(input);
 
 	&:has(input:disabled) {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 	}
 
 	&:is(label),
diff --git a/packages/components/src/styles/internal/_link-components.scss b/packages/components/src/styles/internal/_link-components.scss
@@ -56,7 +56,7 @@
 
 	// "disabled" links
 	&[aria-disabled="true"] {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 		pointer-events: none;
 	}
 }
diff --git a/packages/foundations/scss/_variables.scss b/packages/foundations/scss/_variables.scss
@@ -61,6 +61,19 @@ $db-border-radius-2xl: var(--db-border-radius-2xl);
 $db-border-radius-3xl: var(--db-border-radius-3xl);
 $db-border-radius-full: var(--db-border-radius-full);
 
+/* Opacity */
+
+$db-opacity-3xs: var(--db-opacity-3xs);
+$db-opacity-2xs: var(--db-opacity-2xs);
+$db-opacity-xs: var(--db-opacity-xs);
+$db-opacity-sm: var(--db-opacity-sm);
+$db-opacity-md: var(--db-opacity-md);
+$db-opacity-lg: var(--db-opacity-lg);
+$db-opacity-xl: var(--db-opacity-xl);
+$db-opacity-2xl: var(--db-opacity-2xl);
+$db-opacity-3xl: var(--db-opacity-3xl);
+$db-opacity-full: var(--db-opacity-full);
+
 /* Transitions */
 
 $db-transition-duration-extra-slow: var(--db-transition-duration-extra-slow);
diff --git a/packages/foundations/scss/defaults/_default-properties.scss b/packages/foundations/scss/defaults/_default-properties.scss
@@ -2989,6 +2989,66 @@
 	inherits: true;
 }
 
+@property --db-opacity-3xs {
+	syntax: "<number>";
+	initial-value: 0.08;
+	inherits: true;
+}
+
+@property --db-opacity-2xs {
+	syntax: "<number>";
+	initial-value: 0.16;
+	inherits: true;
+}
+
+@property --db-opacity-xs {
+	syntax: "<number>";
+	initial-value: 0.24;
+	inherits: true;
+}
+
+@property --db-opacity-sm {
+	syntax: "<number>";
+	initial-value: 0.32;
+	inherits: true;
+}
+
+@property --db-opacity-md {
+	syntax: "<number>";
+	initial-value: 0.4;
+	inherits: true;
+}
+
+@property --db-opacity-lg {
+	syntax: "<number>";
+	initial-value: 0.68;
+	inherits: true;
+}
+
+@property --db-opacity-xl {
+	syntax: "<number>";
+	initial-value: 0.76;
+	inherits: true;
+}
+
+@property --db-opacity-2xl {
+	syntax: "<number>";
+	initial-value: 0.84;
+	inherits: true;
+}
+
+@property --db-opacity-3xl {
+	syntax: "<number>";
+	initial-value: 0.92;
+	inherits: true;
+}
+
+@property --db-opacity-full {
+	syntax: "<number>";
+	initial-value: 1;
+	inherits: true;
+}
+
 @property --db-typography-regular-desktop-headline-3xl {
 	syntax: "*";
 	initial-value:
diff --git a/packages/foundations/scss/defaults/_default-variables.scss b/packages/foundations/scss/defaults/_default-variables.scss
@@ -505,6 +505,16 @@
 		both;
 	--db-transition-straight-emotional: 0.3s cubic-bezier(0.27, 0.05, 0.4, 0.95);
 	--db-transition-straight-functional: 0.3s cubic-bezier(0.15, 0, 0.45, 1);
+	--db-opacity-3xs: 0.08;
+	--db-opacity-2xs: 0.16;
+	--db-opacity-xs: 0.24;
+	--db-opacity-sm: 0.32;
+	--db-opacity-md: 0.4;
+	--db-opacity-lg: 0.68;
+	--db-opacity-xl: 0.76;
+	--db-opacity-2xl: 0.84;
+	--db-opacity-3xl: 0.92;
+	--db-opacity-full: 1;
 	--db-typography-regular-desktop-headline-3xl:
 		bolder 5rem/1.2 "OpenSans Head", helvetica, arial, sans-serif;
 	--db-typography-regular-desktop-headline-2xl:
diff --git a/showcases/patternhub/.gitignore b/showcases/patternhub/.gitignore
@@ -38,12 +38,10 @@ public/docs
 
 styles/db-ux-components.scss
 scripts/generated
+!pages/components/misc
 pages/components/
 components/src
 components/code-docs/
-!pages/components/readme.mdx
-!pages/components/validation.mdx
-!pages/components/router-usage.mdx
 !pages/components/[[...slug]].tsx
 !components/src/tsconfig.json
 !components/component-parser
diff --git a/showcases/patternhub/data/routes.tsx b/showcases/patternhub/data/routes.tsx
@@ -246,8 +246,6 @@ export const ROUTES: NavigationItem[] = [
 		path: '/components',
 		subNavigation: [
 			{ label: 'Readme', path: '/components/readme' },
-			{ label: 'Router usage', path: '/components/router-usage' },
-			{ label: 'Validation', path: '/components/validation' },
 			...componentChildren.map((category) => ({
 				...category,
 				subNavigation: category?.subNavigation?.map(
@@ -276,7 +274,22 @@ export const ROUTES: NavigationItem[] = [
 						]
 					})
 				)
-			}))
+			})),
+			{
+				label: 'Misc',
+				path: '/components/misc',
+				subNavigation: [
+					{
+						label: 'Router usage',
+						path: '/components/misc/router-usage'
+					},
+					{
+						label: 'Validation',
+						path: '/components/misc/validation'
+					},
+					{ label: 'Backdrop', path: '/components/misc/backdrop' }
+				]
+			}
 		]
 	}
 ];
diff --git a/showcases/patternhub/pages/components/misc/backdrop.mdx b/showcases/patternhub/pages/components/misc/backdrop.mdx
@@ -0,0 +1,6 @@
+import DefaultPage from "../../../components/default-page";
+import Readme from "../../../../../packages/components/docs/Backdrop.md";
+
+<Readme />
+
+export default ({ children }) => <DefaultPage>{children}</DefaultPage>;
diff --git a/showcases/patternhub/pages/components/misc/router-usage.mdx b/showcases/patternhub/pages/components/misc/router-usage.mdx
@@ -0,0 +1,6 @@
+import DefaultPage from "../../../components/default-page";
+import RouterUsage from "../../../../../packages/components/docs/router-usage.md";
+
+<RouterUsage />
+
+export default ({ children }) => <DefaultPage>{children}</DefaultPage>;
diff --git a/showcases/patternhub/pages/components/misc/validation.mdx b/showcases/patternhub/pages/components/misc/validation.mdx
@@ -0,0 +1,9 @@
+import DefaultPage from "../../../components/default-page";
+import Readme from "../../../../../packages/components/docs/Validation.md";
+import ValidationExample from "../../../components/validation-example";
+
+<Readme />
+
+<ValidationExample />
+
+export default ({ children }) => <DefaultPage>{children}</DefaultPage>;
diff --git a/showcases/patternhub/pages/components/router-usage.mdx b/showcases/patternhub/pages/components/router-usage.mdx
diff --git a/showcases/patternhub/pages/components/validation.mdx b/showcases/patternhub/pages/components/validation.mdx

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`
`27`	`27`	`&[aria-disabled="true"] {`
`28`	`28`	`pointer-events: none;`
`29`		`- opacity: component.$default-disabled;`
	`29`	`+ opacity: variables.$db-opacity-md;`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`@media screen and (prefers-reduced-motion: no-preference) {`
Original file line number	Diff line number	Diff line change
`@@ -98,7 +98,7 @@`
`98`	`98`	`}`
`99`	`99`
`100`	`100`	`&:disabled {`
`101`		`- opacity: component.$default-disabled;`
	`101`	`+ opacity: variables.$db-opacity-md;`
`102`	`102`	`}`
`103`	`103`
`104`	`104`	`// States (currently only "loading")`
Original file line number	Diff line number	Diff line change
`@@ -162,8 +162,8 @@`
`162`	`162`	`inset: 0;`
`163`	`163`	`content: "";`
`164`	`164`	`cursor: default;`
`165`		`- background-color: dialog-init.$backdrop-color;`
`166`		`- opacity: dialog-init.$backdrop-opacity-strong;`
	`165`	`+ background-color: dialog-init.$backdrop-color-strong;`
	`166`	`+ opacity: variables.$db-opacity-lg;`
`167`	`167`	`}`
`168`	`168`	`}`
`169`	`169`	`}`
Original file line number	Diff line number	Diff line change
`@@ -161,7 +161,7 @@`
`161`	`161`	`}`
`162`	`162`
`163`	`163`	`&[aria-disabled="true"] {`
`164`		`- opacity: component.$default-disabled;`
	`164`	`+ opacity: variables.$db-opacity-md;`
`165`	`165`	`pointer-events: none;`
`166`	`166`	`}`
`167`	`167`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ $with-icon-padding-calc: calc(`
`18`	`18`	`border-radius: variables.$db-border-radius-sm;`
`19`	`19`
`20`	`20`	`&:has(input:disabled) {`
`21`		`- opacity: component.$default-disabled;`
	`21`	`+ opacity: variables.$db-opacity-md;`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`label {`
Original file line number	Diff line number	Diff line change
`@@ -209,7 +209,7 @@`
`209`	`209`
`210`	`210`	`&:has(:disabled),`
`211`	`211`	`&[data-disabled="true"] {`
`212`		`- opacity: component.$default-disabled;`
	`212`	`+ opacity: variables.$db-opacity-md;`
`213`	`213`	`pointer-events: none;`
`214`	`214`	`}`
`215`	`215`