@db-ux/core-foundations 2.1.0 → 2.1.2

package/build/styles/_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);

package/build/styles/absolute.css

@@ -47,6 +47,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, ... */
 blockquote:not([class]), [data-mode], :is(:root, :host) {
@@ -257,15 +258,6 @@ select,
   outline-offset: var(--db-border-width-xs);
   box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
 }
-:not([data-disable-focus=true]):not([type=radio], [role=switch]):is(a,
-button,
-input,
-textarea,
-summary,
-select,
-[tabindex]:not([tabindex="-1"])):focus-visible {
-  border-radius: var(--db-border-radius-xs);
-}
 @media screen and (prefers-reduced-motion: no-preference) {
   :not([data-disable-focus=true]):is(a,
   button,
@@ -277,6 +269,15 @@ select,
     transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
   }
 }
+:not([data-disable-focus=true]):not([type=radio], [role=switch]):is(a,
+button,
+input,
+textarea,
+summary,
+select,
+[tabindex]:not([tabindex="-1"])):focus-visible {
+  border-radius: var(--db-border-radius-xs);
+}
 
 [data-icon]::before,
 [data-icon-before]::before, [data-icon-after]::after {
@@ -3029,6 +3030,56 @@ select,
   initial-value: 0.3s cubic-bezier(0.15, 0, 0.45, 1);
   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: bolder 5rem/1.2 "OpenSans Head", helvetica, arial, sans-serif;

package/build/styles/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:

package/build/styles/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: