@db-ux/core-components 2.1.1 → 2.1.2

package/build/components/accordion/accordion.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/accordion-item/accordion-item.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -285,7 +286,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 }
 .db-accordion-item > details[aria-disabled=true] {
   pointer-events: none;
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-accordion-item > details > summary + div {

package/build/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) {

package/build/components/badge/badge.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/brand/brand.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/button/button.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
@@ -236,7 +237,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
 }
 .db-button:disabled {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
 }
 .db-button[data-state=loading] {
   font-size: 0 !important;

package/build/components/button/button.scss

@@ -98,7 +98,7 @@
 	}
 
 	&:disabled {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 	}
 
 	// States (currently only "loading")

package/build/components/card/card.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/checkbox/checkbox.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -218,7 +219,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 .db-checkbox:has(input:disabled) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
 }
 .db-checkbox:is(label),
 .db-checkbox > label {

package/build/components/custom-select/custom-select.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-custom-select[data-hide-label=true] > label, .db-visually-hidden,
@@ -768,14 +769,13 @@ dialog[data-variant=inside]:not([data-backdrop=none])::before {
   inset: 0;
 }
 dialog:not([data-backdrop=none])::backdrop, dialog:not([data-backdrop=none])::before {
-  background-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  opacity: 0.64;
+  background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
 }
 dialog:not([data-backdrop=none])[data-backdrop=invisible]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=invisible]::before {
-  opacity: 0;
+  background-color: transparent;
 }
 dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=weak]::before {
-  opacity: 0.32;
+  background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-sm));
 }
 
 [data-placement^=top].db-custom-select .db-custom-select-dropdown:not([data-outside-vy=top]), .db-custom-select:not([data-placement]) .db-custom-select-dropdown[data-outside-vy=bottom], [data-placement^=bottom].db-custom-select .db-custom-select-dropdown[data-outside-vy=bottom] {
@@ -849,7 +849,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   --db-label-visible-above: 0;
 }
 .db-custom-select[data-variant=floating] > label {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   position: absolute;
   z-index: 2;
   inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
@@ -888,7 +888,7 @@ summary:is(input, textarea):not(:placeholder-shown),
 > select option:checked:not([hidden]),
 input[type=checkbox]:checked,
 input[type=radio]:checked) [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
   /* stylelint-disable-next-line db-ux/use-spacings */
@@ -1030,7 +1030,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 }
 .db-custom-select summary::placeholder,
 .db-custom-select [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
@@ -1076,7 +1076,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 .db-custom-select:has(summary:disabled,
 summary[data-disabled=true],
 summary[aria-disabled=true]) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 .db-custom-select::after, .db-custom-select::before {
@@ -1163,8 +1163,8 @@ summary[aria-disabled=true]) {
   inset: 0;
   content: "";
   cursor: default;
-  background-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  opacity: 0.64;
+  background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
+  opacity: var(--db-opacity-lg);
 }
 @media screen and (max-width: 44.9375em) {
   .db-custom-select > details[open] > summary::before {
@@ -1173,8 +1173,8 @@ summary[aria-disabled=true]) {
     inset: 0;
     content: "";
     cursor: default;
-    background-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
-    opacity: 0.64;
+    background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
+    opacity: var(--db-opacity-lg);
   }
 }
 .db-custom-select[data-variant=floating] .db-custom-select-form-field > span {

package/build/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;
 				}
 			}
 		}

package/build/components/custom-select-dropdown/custom-select-dropdown.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,

package/build/components/custom-select-form-field/custom-select-form-field.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-visually-hidden,
 [data-visually-hidden=true] {

package/build/components/custom-select-list/custom-select-list.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-custom-select-list > legend, .db-visually-hidden,
 [data-visually-hidden=true] {

package/build/components/custom-select-list-item/custom-select-list-item.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,

package/build/components/divider/divider.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/drawer/drawer.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
@@ -142,14 +143,13 @@ dialog[data-variant=inside]:not([data-backdrop=none])::before {
   inset: 0;
 }
 dialog:not([data-backdrop=none])::backdrop, dialog:not([data-backdrop=none])::before {
-  background-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  opacity: 0.64;
+  background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-lg));
 }
 dialog:not([data-backdrop=none])[data-backdrop=invisible]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=invisible]::before {
-  opacity: 0;
+  background-color: transparent;
 }
 dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=weak]::before {
-  opacity: 0.32;
+  background-color: color(from var(--db-adaptive-on-bg-basic-emphasis-100-default) srgb r g b/var(--db-opacity-sm));
 }
 
 .db-drawer .db-drawer-container {

package/build/components/header/header.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/icon/icon.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/infotext/infotext.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/input/input.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-input[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
@@ -572,7 +573,7 @@ input[type=radio]:checked) > label {
   --db-label-visible-above: 0;
 }
 .db-input[data-variant=floating] > label {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   position: absolute;
   z-index: 2;
   inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
@@ -611,7 +612,7 @@ input:is(input, textarea):not(:placeholder-shown),
 > select option:checked:not([hidden]),
 input[type=checkbox]:checked,
 input[type=radio]:checked) [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
@@ -751,7 +752,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 }
 .db-input input::placeholder,
 .db-input [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
@@ -797,7 +798,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 .db-input:has(input:disabled,
 input[data-disabled=true],
 input[aria-disabled=true]) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 .db-input::after, .db-input::before {

package/build/components/link/link.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
@@ -291,7 +292,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-xs);
 }
 [aria-disabled=true].db-link {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 

package/build/components/navigation/navigation.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-visually-hidden,
 [data-visually-hidden=true] {

package/build/components/navigation-item/navigation-item.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
@@ -432,7 +433,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-icon-margin-start: auto;
 }
 .db-navigation-item[aria-disabled=true] {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 

package/build/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;
 	}
 }

package/build/components/notification/notification.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-notification[data-semantic=neutral] {
@@ -1053,7 +1054,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-xs);
 }
 .db-notification a[aria-disabled=true] {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 

package/build/components/page/page.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-page-document {
   block-size: 100%;

package/build/components/popover/popover.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/radio/radio.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
@@ -162,7 +163,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 .db-radio:has(input:disabled) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
 }
 .db-radio:is(label),
 .db-radio > label {

package/build/components/section/section.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/select/select.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-select[data-hide-label=true] > label, .db-visually-hidden,
@@ -618,7 +619,7 @@ input[type=radio]:checked) > label {
   --db-label-visible-above: 0;
 }
 .db-select[data-variant=floating] > label {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   position: absolute;
   z-index: 2;
   inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
@@ -657,7 +658,7 @@ select:is(input, textarea):not(:placeholder-shown),
 > select option:checked:not([hidden]),
 input[type=checkbox]:checked,
 input[type=radio]:checked) [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
   /* stylelint-disable-next-line db-ux/use-spacings */
@@ -799,7 +800,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 }
 .db-select select::placeholder,
 .db-select [id$=-placeholder] {
-  opacity: 0.75;
+  opacity: var(--db-opacity-xl);
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
@@ -845,7 +846,7 @@ input[type=radio]:checked) [id$=-placeholder] {
 .db-select:has(select:disabled,
 select[data-disabled=true],
 select[aria-disabled=true]) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 .db-select::after, .db-select::before {

package/build/components/stack/stack-web-component.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/stack/stack.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}

package/build/components/switch/switch.css

@@ -5,6 +5,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
@@ -513,7 +514,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   }
 }
 .db-switch:has(input:disabled) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
 }
 .db-switch:is(label),
 .db-switch > label {

package/build/components/tab-item/tab-item.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,
@@ -144,7 +145,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   border-radius: var(--db-border-radius-sm);
 }
 .db-tab-item:has(input:disabled) {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
 }
 .db-tab-item label {
   background-color: var(--db-adaptive-bg-basic-transparent-full-default);

package/build/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 {

package/build/components/tab-list/tab-list.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,

package/build/components/tab-panel/tab-panel.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-tab-panel {
   display: none;

package/build/components/tabs/tabs.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
 .db-visually-hidden,

package/build/components/tag/tag.css

@@ -4,6 +4,7 @@
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 .db-tag label, .db-tag a {
   transition: outline var(--db-transition-duration-extra-fast), border-color var(--db-transition-straight-emotional), background-color var(--db-transition-straight-emotional);
@@ -1512,7 +1513,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   block-size: inherit;
 }
 .db-tag:has(:disabled), .db-tag[data-disabled=true] {
-  opacity: 0.4;
+  opacity: var(--db-opacity-md);
   pointer-events: none;
 }
 .db-tag[data-overflow=true] {

package/build/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;
 	}