@db-ux/core-foundations 2.4.3 → 3.0.0

package/build/styles/colors/_default-color-mappings.scss

@@ -140,11 +140,19 @@
 			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))
 		);
@@ -336,11 +344,19 @@
 			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))
 		);
@@ -532,11 +548,19 @@
 			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))
 		);
@@ -728,11 +752,19 @@
 			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))
 		);
@@ -924,11 +956,19 @@
 			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))
 		);
@@ -1120,11 +1160,19 @@
 			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))
 		);
@@ -1316,11 +1364,19 @@
 			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))
 		);
@@ -1512,11 +1568,19 @@
 			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-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-pressed: light-dark(
+		--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))
 		);
@@ -1708,11 +1772,19 @@
 			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))
 		);
@@ -1904,11 +1976,19 @@
 			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))
 		);
@@ -2100,11 +2180,19 @@
 			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))
 		);
@@ -2296,11 +2384,19 @@
 			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))
 		);
@@ -2492,11 +2588,19 @@
 			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-pressed: light-dark(
+		--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-semi-pressed: light-dark(
 			color-mix(in srgb, transparent 68%, var(--db-cyan-6)),
 			color-mix(in srgb, transparent 68%, var(--db-cyan-9))
 		);
@@ -2688,11 +2792,19 @@
 			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-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-pressed: light-dark(
+		--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))
 		);
@@ -2884,11 +2996,19 @@
 			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))
 		);
@@ -3080,11 +3200,19 @@
 			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-pressed: light-dark(
+		--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-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))
 		);
@@ -3276,11 +3404,19 @@
 			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))
 		);

package/build/styles/colors/_placeholder.scss

@@ -64,11 +64,17 @@
 			--db-adaptive-bg-basic-transparent-semi-default: var(
 				--db-#{$variant}-bg-basic-transparent-semi-default
 			);
-			--db-adaptive-bg-basic-transparent-hovered: var(
-				--db-#{$variant}-bg-basic-transparent-hovered
+			--db-adaptive-bg-basic-transparent-full-hovered: var(
+				--db-#{$variant}-bg-basic-transparent-full-hovered
 			);
-			--db-adaptive-bg-basic-transparent-pressed: var(
-				--db-#{$variant}-bg-basic-transparent-pressed
+			--db-adaptive-bg-basic-transparent-full-pressed: var(
+				--db-#{$variant}-bg-basic-transparent-full-pressed
+			);
+			--db-adaptive-bg-basic-transparent-semi-hovered: var(
+				--db-#{$variant}-bg-basic-transparent-semi-hovered
+			);
+			--db-adaptive-bg-basic-transparent-semi-pressed: var(
+				--db-#{$variant}-bg-basic-transparent-semi-pressed
 			);
 
 			// on-bg basic

package/build/styles/colors/_variables.scss

@@ -50,11 +50,17 @@ $db-adaptive-bg-basic-transparent-full-default: var(
 $db-adaptive-bg-basic-transparent-semi-default: var(
 	--db-adaptive-bg-basic-transparent-semi-default
 );
-$db-adaptive-bg-basic-transparent-hovered: var(
-	--db-adaptive-bg-basic-transparent-hovered
+$db-adaptive-bg-basic-transparent-full-hovered: var(
+	--db-adaptive-bg-basic-transparent-full-hovered
 );
-$db-adaptive-bg-basic-transparent-pressed: var(
-	--db-adaptive-bg-basic-transparent-pressed
+$db-adaptive-bg-basic-transparent-full-pressed: var(
+	--db-adaptive-bg-basic-transparent-full-pressed
+);
+$db-adaptive-bg-basic-transparent-semi-hovered: var(
+	--db-adaptive-bg-basic-transparent-semi-hovered
+);
+$db-adaptive-bg-basic-transparent-semi-pressed: var(
+	--db-adaptive-bg-basic-transparent-semi-pressed
 );
 
 // on-bg basic