@db-ux/core-foundations 2.4.4 → 3.0.1

package/build/styles/absolute.css

@@ -49,6 +49,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 blockquote:not([class]), [data-mode], :is(:root, :host) {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
@@ -88,11 +90,17 @@ blockquote:not([class]), [data-mode], :is(:root, :host) {
     --db-adaptive-bg-basic-transparent-semi-default: var(
     	--db-neutral-bg-basic-transparent-semi-default
     );
-    --db-adaptive-bg-basic-transparent-hovered: var(
-    	--db-neutral-bg-basic-transparent-hovered
+    --db-adaptive-bg-basic-transparent-full-hovered: var(
+    	--db-neutral-bg-basic-transparent-full-hovered
     );
-    --db-adaptive-bg-basic-transparent-pressed: var(
-    	--db-neutral-bg-basic-transparent-pressed
+    --db-adaptive-bg-basic-transparent-full-pressed: var(
+    	--db-neutral-bg-basic-transparent-full-pressed
+    );
+    --db-adaptive-bg-basic-transparent-semi-hovered: var(
+    	--db-neutral-bg-basic-transparent-semi-hovered
+    );
+    --db-adaptive-bg-basic-transparent-semi-pressed: var(
+    	--db-neutral-bg-basic-transparent-semi-pressed
     );
     --db-adaptive-on-bg-basic-emphasis-100-default: var(
     	--db-neutral-on-bg-basic-emphasis-100-default
@@ -280,7 +288,7 @@ select,
 }
 
 [data-icon]::before,
-[data-icon-before]::before, [data-icon-after]::after {
+[data-icon-leading]::before, [data-icon-trailing]::after {
   color: var(--db-icon-color, inherit);
   display: inline-block;
   /*** icon - placeholder ***/
@@ -297,26 +305,26 @@ select,
   /* stylelint-disable-next-line declaration-property-value-no-unknown */
   speak: never;
   text-transform: none;
-  vertical-align: middle;
+  vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
   inline-size: var(--db-icon-font-size, 1.5rem);
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
   [data-icon]::before,
-  [data-icon-before]::before, [data-icon-after]::after {
+  [data-icon-leading]::before, [data-icon-trailing]::after {
     content: var(--db-icon, attr(data-icon))/"";
   }
 }
 @media aural {
   [data-icon]::before,
-  [data-icon-before]::before, [data-icon-after]::after {
+  [data-icon-leading]::before, [data-icon-trailing]::after {
     content: none;
   }
 }
 @media speech {
   [data-icon]::before,
-  [data-icon-before]::before, [data-icon-after]::after {
+  [data-icon-leading]::before, [data-icon-trailing]::after {
     content: none;
   }
 }
@@ -5930,6 +5938,60 @@ select,
   initial-value: #fcf8f9;
   inherits: true;
 }
+/* 224px */
+@property --db-container-3xs {
+  syntax: "*";
+  initial-value: 14rem;
+  inherits: true;
+}
+/* 256px */
+@property --db-container-2xs {
+  syntax: "*";
+  initial-value: 16rem;
+  inherits: true;
+}
+/* 320px */
+@property --db-container-xs {
+  syntax: "*";
+  initial-value: 20rem;
+  inherits: true;
+}
+/* 384px */
+@property --db-container-sm {
+  syntax: "*";
+  initial-value: 24rem;
+  inherits: true;
+}
+/* 448px */
+@property --db-container-md {
+  syntax: "*";
+  initial-value: 28rem;
+  inherits: true;
+}
+/* 512px */
+@property --db-container-lg {
+  syntax: "*";
+  initial-value: 32rem;
+  inherits: true;
+}
+/* 576px */
+@property --db-container-xl {
+  syntax: "*";
+  initial-value: 36rem;
+  inherits: true;
+}
+/* 672px */
+@property --db-container-2xl {
+  syntax: "*";
+  initial-value: 42rem;
+  inherits: true;
+}
+/* 768px */
+@property --db-container-3xl {
+  syntax: "*";
+  initial-value: 48rem;
+  inherits: true;
+}
 @property --db-font-family-sans {
   syntax: "*";
   initial-value: "OpenSans", helvetica, arial, sans-serif;
@@ -6063,7 +6125,7 @@ code {
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     :is(:root, :host) {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-mobile-2xs);
@@ -6076,7 +6138,7 @@ code {
       --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-mobile-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     :is(:root, :host) {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-tablet-2xs);
@@ -6122,7 +6184,7 @@ code {
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     :is(:root, :host) {
       --db-type-headline-3xs: var(--db-typography-regular-mobile-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-headline-3xs);
@@ -6153,7 +6215,7 @@ code {
       --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-headline-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     :is(:root, :host) {
       --db-type-headline-3xs: var(--db-typography-regular-tablet-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-headline-3xs);
@@ -6229,7 +6291,7 @@ code {
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
-  @media screen and (width <= 45em) {
+  @media screen and (width <= 48em) {
     :is(:root, :host) {
       --db-type-body-3xs: var(--db-typography-regular-mobile-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
@@ -6260,7 +6322,7 @@ code {
       --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
     }
   }
-  @media screen and (45em < width <= 64em) {
+  @media screen and (48em < width <= 64em) {
     :is(:root, :host) {
       --db-type-body-3xs: var(--db-typography-regular-tablet-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-body-3xs);
@@ -6512,32 +6574,32 @@ pre:not([class]):has(code) span {
   font-family: monospace;
 }
 
-a:has(code:not([class])) {
+a:has(code:not([class]):only-child) {
   background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
   color: var(--db-adaptive-on-bg-inverted-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]) {
+a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: var(--db-adaptive-on-bg-inverted-hovered);
 }
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input) {
+a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]) {
+a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]) {
   cursor: var(--db-overwrite-cursor, pointer);
   color: var(--db-adaptive-on-bg-inverted-pressed);
 }
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input) {
+a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input) {
   cursor: initial;
 }
-a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class])):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-a:has(code:not([class])) > code {
+a:has(code:not([class]):only-child) > code {
   color: inherit;
 }
 
@@ -6558,50 +6620,50 @@ blockquote:not([class]) {
 }
 
 [data-icon]:is(span),
-[data-icon-before]:is(span),
-[data-icon-after]:is(span) {
+[data-icon-leading]:is(span),
+[data-icon-trailing]:is(span) {
   display: inline-flex;
   vertical-align: baseline;
 }
 
 [data-icon]::before,
-[data-icon-before]::before {
+[data-icon-leading]::before {
   margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
 }
 
-[data-hide-icon=true]::before,
-[data-hide-icon-before=true]::before,
+[data-show-icon=false]::before,
+[data-show-icon-leading=false]::before,
 [data-icon=none]::before,
-[data-icon-before=none]::before {
+[data-icon-leading=none]::before {
   content: none;
 }
 
-[data-icon-after]::after {
+[data-icon-trailing]::after {
   margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
-  content: var(--db-icon-after, attr(data-icon-after));
+  content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
-  [data-icon-after]::after {
-    content: var(--db-icon-after, attr(data-icon-after))/"";
+  [data-icon-trailing]::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
 
-[data-hide-icon-after=true]::after,
-[data-icon-after=none]::after {
+[data-show-icon-trailing=false]::after,
+[data-icon-trailing=none]::after {
   content: none;
 }
 
-.is-icon-text-replace[data-icon], .is-icon-text-replace[data-icon-before] {
+.is-icon-text-replace[data-icon], .is-icon-text-replace[data-icon-leading] {
   font-size: 0 !important;
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.is-icon-text-replace[data-icon]::before, .is-icon-text-replace[data-icon-before]::before {
+.is-icon-text-replace[data-icon]::before, .is-icon-text-replace[data-icon-leading]::before {
   --db-icon-margin-end: 0;
 }
-.is-icon-text-replace[data-icon-after] {
+.is-icon-text-replace[data-icon-trailing] {
   font-size: 0 !important;
 }
-.is-icon-text-replace[data-icon-after]::after {
+.is-icon-text-replace[data-icon-trailing]::after {
   --db-icon-margin-start: 0;
 }
 
@@ -6748,11 +6810,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-neutral-6)),
     	color-mix(in srgb, transparent 84%, var(--db-neutral-9))
     );
-    --db-neutral-bg-basic-transparent-hovered: light-dark(
+    --db-neutral-bg-basic-transparent-semi-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-neutral-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-neutral-9))
+    );
+    --db-neutral-bg-basic-transparent-semi-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-neutral-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-neutral-9))
+    );
+    --db-neutral-bg-basic-transparent-full-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-neutral-6)),
     	color-mix(in srgb, transparent 76%, var(--db-neutral-9))
     );
-    --db-neutral-bg-basic-transparent-pressed: light-dark(
+    --db-neutral-bg-basic-transparent-full-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-neutral-6)),
     	color-mix(in srgb, transparent 68%, var(--db-neutral-9))
     );
@@ -6944,11 +7014,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-brand-6)),
     	color-mix(in srgb, transparent 84%, var(--db-brand-9))
     );
-    --db-brand-bg-basic-transparent-hovered: light-dark(
+    --db-brand-bg-basic-transparent-full-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-brand-6)),
     	color-mix(in srgb, transparent 76%, var(--db-brand-9))
     );
-    --db-brand-bg-basic-transparent-pressed: light-dark(
+    --db-brand-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-brand-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-brand-9))
+    );
+    --db-brand-bg-basic-transparent-semi-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-brand-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-brand-9))
+    );
+    --db-brand-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-brand-6)),
     	color-mix(in srgb, transparent 68%, var(--db-brand-9))
     );
@@ -7140,11 +7218,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-informational-6)),
     	color-mix(in srgb, transparent 84%, var(--db-informational-9))
     );
-    --db-informational-bg-basic-transparent-hovered: light-dark(
+    --db-informational-bg-basic-transparent-full-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-informational-6)),
     	color-mix(in srgb, transparent 76%, var(--db-informational-9))
     );
-    --db-informational-bg-basic-transparent-pressed: light-dark(
+    --db-informational-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-informational-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-informational-9))
+    );
+    --db-informational-bg-basic-transparent-semi-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-informational-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-informational-9))
+    );
+    --db-informational-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-informational-6)),
     	color-mix(in srgb, transparent 68%, var(--db-informational-9))
     );
@@ -7336,11 +7422,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-warning-6)),
     	color-mix(in srgb, transparent 84%, var(--db-warning-9))
     );
-    --db-warning-bg-basic-transparent-hovered: light-dark(
+    --db-warning-bg-basic-transparent-full-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-warning-6)),
     	color-mix(in srgb, transparent 76%, var(--db-warning-9))
     );
-    --db-warning-bg-basic-transparent-pressed: light-dark(
+    --db-warning-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-warning-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-warning-9))
+    );
+    --db-warning-bg-basic-transparent-semi-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-warning-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-warning-9))
+    );
+    --db-warning-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-warning-6)),
     	color-mix(in srgb, transparent 68%, var(--db-warning-9))
     );
@@ -7532,11 +7626,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-successful-6)),
     	color-mix(in srgb, transparent 84%, var(--db-successful-9))
     );
-    --db-successful-bg-basic-transparent-hovered: light-dark(
+    --db-successful-bg-basic-transparent-full-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-successful-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-successful-9))
+    );
+    --db-successful-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-successful-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-successful-9))
+    );
+    --db-successful-bg-basic-transparent-semi-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-successful-6)),
     	color-mix(in srgb, transparent 76%, var(--db-successful-9))
     );
-    --db-successful-bg-basic-transparent-pressed: light-dark(
+    --db-successful-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-successful-6)),
     	color-mix(in srgb, transparent 68%, var(--db-successful-9))
     );
@@ -7728,11 +7830,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-critical-6)),
     	color-mix(in srgb, transparent 84%, var(--db-critical-9))
     );
-    --db-critical-bg-basic-transparent-hovered: light-dark(
+    --db-critical-bg-basic-transparent-full-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-critical-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-critical-9))
+    );
+    --db-critical-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-critical-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-critical-9))
+    );
+    --db-critical-bg-basic-transparent-semi-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-critical-6)),
     	color-mix(in srgb, transparent 76%, var(--db-critical-9))
     );
-    --db-critical-bg-basic-transparent-pressed: light-dark(
+    --db-critical-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-critical-6)),
     	color-mix(in srgb, transparent 68%, var(--db-critical-9))
     );
@@ -7924,11 +8034,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-yellow-6)),
     	color-mix(in srgb, transparent 84%, var(--db-yellow-9))
     );
-    --db-yellow-bg-basic-transparent-hovered: light-dark(
+    --db-yellow-bg-basic-transparent-full-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-yellow-6)),
     	color-mix(in srgb, transparent 76%, var(--db-yellow-9))
     );
-    --db-yellow-bg-basic-transparent-pressed: light-dark(
+    --db-yellow-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-yellow-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-yellow-9))
+    );
+    --db-yellow-bg-basic-transparent-semi-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-yellow-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-yellow-9))
+    );
+    --db-yellow-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-yellow-6)),
     	color-mix(in srgb, transparent 68%, var(--db-yellow-9))
     );
@@ -8120,11 +8238,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-orange-6)),
     	color-mix(in srgb, transparent 84%, var(--db-orange-9))
     );
-    --db-orange-bg-basic-transparent-hovered: light-dark(
+    --db-orange-bg-basic-transparent-full-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-orange-6)),
     	color-mix(in srgb, transparent 76%, var(--db-orange-9))
     );
-    --db-orange-bg-basic-transparent-pressed: light-dark(
+    --db-orange-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-orange-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-orange-9))
+    );
+    --db-orange-bg-basic-transparent-semi-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-orange-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-orange-9))
+    );
+    --db-orange-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-orange-6)),
     	color-mix(in srgb, transparent 68%, var(--db-orange-9))
     );
@@ -8316,11 +8442,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-red-6)),
     	color-mix(in srgb, transparent 84%, var(--db-red-9))
     );
-    --db-red-bg-basic-transparent-hovered: light-dark(
+    --db-red-bg-basic-transparent-full-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-red-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-red-9))
+    );
+    --db-red-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-red-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-red-9))
+    );
+    --db-red-bg-basic-transparent-semi-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-red-6)),
     	color-mix(in srgb, transparent 76%, var(--db-red-9))
     );
-    --db-red-bg-basic-transparent-pressed: light-dark(
+    --db-red-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-red-6)),
     	color-mix(in srgb, transparent 68%, var(--db-red-9))
     );
@@ -8512,11 +8646,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-pink-6)),
     	color-mix(in srgb, transparent 84%, var(--db-pink-9))
     );
-    --db-pink-bg-basic-transparent-hovered: light-dark(
+    --db-pink-bg-basic-transparent-full-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-pink-6)),
     	color-mix(in srgb, transparent 76%, var(--db-pink-9))
     );
-    --db-pink-bg-basic-transparent-pressed: light-dark(
+    --db-pink-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-pink-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-pink-9))
+    );
+    --db-pink-bg-basic-transparent-semi-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-pink-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-pink-9))
+    );
+    --db-pink-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-pink-6)),
     	color-mix(in srgb, transparent 68%, var(--db-pink-9))
     );
@@ -8708,11 +8850,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-violet-6)),
     	color-mix(in srgb, transparent 84%, var(--db-violet-9))
     );
-    --db-violet-bg-basic-transparent-hovered: light-dark(
+    --db-violet-bg-basic-transparent-full-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-violet-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-violet-9))
+    );
+    --db-violet-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-violet-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-violet-9))
+    );
+    --db-violet-bg-basic-transparent-semi-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-violet-6)),
     	color-mix(in srgb, transparent 76%, var(--db-violet-9))
     );
-    --db-violet-bg-basic-transparent-pressed: light-dark(
+    --db-violet-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-violet-6)),
     	color-mix(in srgb, transparent 68%, var(--db-violet-9))
     );
@@ -8904,11 +9054,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-blue-6)),
     	color-mix(in srgb, transparent 84%, var(--db-blue-9))
     );
-    --db-blue-bg-basic-transparent-hovered: light-dark(
+    --db-blue-bg-basic-transparent-full-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-blue-6)),
     	color-mix(in srgb, transparent 76%, var(--db-blue-9))
     );
-    --db-blue-bg-basic-transparent-pressed: light-dark(
+    --db-blue-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-blue-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-blue-9))
+    );
+    --db-blue-bg-basic-transparent-semi-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-blue-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-blue-9))
+    );
+    --db-blue-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-blue-6)),
     	color-mix(in srgb, transparent 68%, var(--db-blue-9))
     );
@@ -9100,11 +9258,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-cyan-6)),
     	color-mix(in srgb, transparent 84%, var(--db-cyan-9))
     );
-    --db-cyan-bg-basic-transparent-hovered: light-dark(
+    --db-cyan-bg-basic-transparent-full-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-cyan-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-cyan-9))
+    );
+    --db-cyan-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-cyan-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-cyan-9))
+    );
+    --db-cyan-bg-basic-transparent-semi-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-cyan-6)),
     	color-mix(in srgb, transparent 76%, var(--db-cyan-9))
     );
-    --db-cyan-bg-basic-transparent-pressed: light-dark(
+    --db-cyan-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-cyan-6)),
     	color-mix(in srgb, transparent 68%, var(--db-cyan-9))
     );
@@ -9296,11 +9462,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-turquoise-6)),
     	color-mix(in srgb, transparent 84%, var(--db-turquoise-9))
     );
-    --db-turquoise-bg-basic-transparent-hovered: light-dark(
+    --db-turquoise-bg-basic-transparent-full-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-turquoise-6)),
     	color-mix(in srgb, transparent 76%, var(--db-turquoise-9))
     );
-    --db-turquoise-bg-basic-transparent-pressed: light-dark(
+    --db-turquoise-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-turquoise-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-turquoise-9))
+    );
+    --db-turquoise-bg-basic-transparent-semi-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-turquoise-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-turquoise-9))
+    );
+    --db-turquoise-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-turquoise-6)),
     	color-mix(in srgb, transparent 68%, var(--db-turquoise-9))
     );
@@ -9492,11 +9666,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-green-6)),
     	color-mix(in srgb, transparent 84%, var(--db-green-9))
     );
-    --db-green-bg-basic-transparent-hovered: light-dark(
+    --db-green-bg-basic-transparent-full-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-green-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-green-9))
+    );
+    --db-green-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-green-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-green-9))
+    );
+    --db-green-bg-basic-transparent-semi-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-green-6)),
     	color-mix(in srgb, transparent 76%, var(--db-green-9))
     );
-    --db-green-bg-basic-transparent-pressed: light-dark(
+    --db-green-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-green-6)),
     	color-mix(in srgb, transparent 68%, var(--db-green-9))
     );
@@ -9688,11 +9870,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-light-green-6)),
     	color-mix(in srgb, transparent 84%, var(--db-light-green-9))
     );
-    --db-light-green-bg-basic-transparent-hovered: light-dark(
+    --db-light-green-bg-basic-transparent-full-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-light-green-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-light-green-9))
+    );
+    --db-light-green-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-light-green-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-light-green-9))
+    );
+    --db-light-green-bg-basic-transparent-semi-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-light-green-6)),
     	color-mix(in srgb, transparent 76%, var(--db-light-green-9))
     );
-    --db-light-green-bg-basic-transparent-pressed: light-dark(
+    --db-light-green-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-light-green-6)),
     	color-mix(in srgb, transparent 68%, var(--db-light-green-9))
     );
@@ -9884,11 +10074,19 @@ blockquote:not([class]) {
     	color-mix(in srgb, transparent 92%, var(--db-burgundy-6)),
     	color-mix(in srgb, transparent 84%, var(--db-burgundy-9))
     );
-    --db-burgundy-bg-basic-transparent-hovered: light-dark(
+    --db-burgundy-bg-basic-transparent-full-hovered: light-dark(
+    	color-mix(in srgb, transparent 76%, var(--db-burgundy-6)),
+    	color-mix(in srgb, transparent 76%, var(--db-burgundy-9))
+    );
+    --db-burgundy-bg-basic-transparent-full-pressed: light-dark(
+    	color-mix(in srgb, transparent 68%, var(--db-burgundy-6)),
+    	color-mix(in srgb, transparent 68%, var(--db-burgundy-9))
+    );
+    --db-burgundy-bg-basic-transparent-semi-hovered: light-dark(
     	color-mix(in srgb, transparent 76%, var(--db-burgundy-6)),
     	color-mix(in srgb, transparent 76%, var(--db-burgundy-9))
     );
-    --db-burgundy-bg-basic-transparent-pressed: light-dark(
+    --db-burgundy-bg-basic-transparent-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-burgundy-6)),
     	color-mix(in srgb, transparent 68%, var(--db-burgundy-9))
     );
@@ -10168,22 +10366,22 @@ blockquote:not([class]) {
   display: list-item;
 }
 
-@property --db-breakpoint-xs {
+@property --db-screen-xs {
   syntax: "*";
   inherits: true;
-  initial-value: 22.5em;
+  initial-value: 20em;
 }
-@property --db-breakpoint-sm {
+@property --db-screen-sm {
   syntax: "*";
   inherits: true;
-  initial-value: 45em;
+  initial-value: 48em;
 }
-@property --db-breakpoint-md {
+@property --db-screen-md {
   syntax: "*";
   inherits: true;
   initial-value: 64em;
 }
-@property --db-breakpoint-xl {
+@property --db-screen-xl {
   syntax: "*";
   inherits: true;
   initial-value: 120em;