@db-ux/core-foundations 2.4.3 → 3.0.0

package/build/styles/index.css

@@ -39,11 +39,17 @@ blockquote:not([class]), :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
@@ -206,6 +212,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Opacity */
 /* Transitions */
+/* Screen sizes */
+/* Container sizes */
 /* Use this file if you want the default color and density in your project */
 :not([data-disable-focus=true]):is(a,
 button,
@@ -362,7 +370,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);
@@ -375,7 +383,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);
@@ -421,7 +429,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);
@@ -452,7 +460,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);
@@ -528,7 +536,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);
@@ -559,7 +567,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);
@@ -811,32 +819,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;
 }
 
@@ -857,7 +865,7 @@ blockquote:not([class]) {
 }
 
 [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 ***/
@@ -874,75 +882,75 @@ blockquote:not([class]) {
   /* 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;
   }
 }
 
 [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;
 }
 
@@ -1089,11 +1097,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-pressed: light-dark(
+    --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-full-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-neutral-6)),
     	color-mix(in srgb, transparent 68%, var(--db-neutral-9))
     );
@@ -1285,11 +1301,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-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-pressed: light-dark(
+    --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))
     );
@@ -1481,11 +1505,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-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-pressed: light-dark(
+    --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))
     );
@@ -1677,11 +1709,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-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-pressed: light-dark(
+    --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))
     );
@@ -1873,11 +1913,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-pressed: light-dark(
+    --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-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-successful-6)),
     	color-mix(in srgb, transparent 68%, var(--db-successful-9))
     );
@@ -2069,11 +2117,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-pressed: light-dark(
+    --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-semi-pressed: light-dark(
     	color-mix(in srgb, transparent 68%, var(--db-critical-6)),
     	color-mix(in srgb, transparent 68%, var(--db-critical-9))
     );
@@ -2265,11 +2321,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-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-pressed: light-dark(
+    --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))
     );
@@ -2461,11 +2525,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))
     );
@@ -2657,11 +2729,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))
     );
@@ -2853,11 +2933,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))
     );
@@ -3049,11 +3137,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))
     );
@@ -3245,11 +3341,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))
     );
@@ -3441,11 +3545,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))
     );
@@ -3637,11 +3749,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))
     );
@@ -3833,11 +3953,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))
     );
@@ -4029,11 +4157,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))
     );
@@ -4225,11 +4361,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))
     );
@@ -4509,22 +4653,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;