@db-ux/core-foundations 2.1.1 → 2.2.0

package/build/styles/density/classes/all.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/styles/density/classes/expressive.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/styles/density/classes/functional.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/styles/density/classes/regular.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/styles/fonts/classes/all.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/styles/fonts/classes/body/2xl.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/styles/fonts/classes/body/2xs.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/styles/fonts/classes/body/3xl.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/styles/fonts/classes/body/3xs.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/styles/fonts/classes/body/all.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/styles/fonts/classes/body/lg.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/styles/fonts/classes/body/md.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/styles/fonts/classes/body/sm.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/styles/fonts/classes/body/xl.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/styles/fonts/classes/body/xs.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/styles/fonts/classes/headline/2xl.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/styles/fonts/classes/headline/2xs.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/styles/fonts/classes/headline/3xl.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/styles/fonts/classes/headline/3xs.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/styles/fonts/classes/headline/all.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/styles/fonts/classes/headline/lg.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/styles/fonts/classes/headline/md.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/styles/fonts/classes/headline/sm.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/styles/fonts/classes/headline/xl.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/styles/fonts/classes/headline/xs.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/styles/helpers/classes/all.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/styles/helpers/classes/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/styles/helpers/classes/focus.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/styles/index.css

@@ -204,6 +204,7 @@ blockquote:not([class])::before, blockquote:not([class])::after {
 paddings/gaps in an application e.g. the <main> should have a responsive padding. */
 /* Elevation */
 /* Border */
+/* Opacity */
 /* Transitions */
 /* Use this file if you want the default color and density in your project */
 :not([data-disable-focus=true]):is(a,

package/build/styles/relative.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) {
@@ -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/rollup.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) {
@@ -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/webpack.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) {
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/core-foundations",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "type": "module",
   "description": "Provides basic tokens and assets based on DB UX Design System (Version 3).",
   "repository": {