@db-ux/core-foundations 2.0.0-0-custom-select-16b8cce → 2.0.1

package/build/styles/colors/_placeholder.scss

@@ -1,6 +1,7 @@
 @use "sass:string";
 @use "variables";
 @use "../helpers/functions";
+@use "../helpers/layer";
 @use "variables.additional" as additional-colors;
 
 @mixin set-current-colors($bg, $on, $hovered: false, $pressed: false) {
@@ -27,159 +28,165 @@
 
 @mixin generate-color-placeholder($variant) {
 	%db-#{$variant}-variables {
-		// bg basic
-		--db-adaptive-bg-basic-level-1-default: var(
-			--db-#{$variant}-bg-basic-level-1-default
-		);
-		--db-adaptive-bg-basic-level-1-hovered: var(
-			--db-#{$variant}-bg-basic-level-1-hovered
-		);
-		--db-adaptive-bg-basic-level-1-pressed: var(
-			--db-#{$variant}-bg-basic-level-1-pressed
-		);
-		--db-adaptive-bg-basic-level-2-default: var(
-			--db-#{$variant}-bg-basic-level-2-default
-		);
-		--db-adaptive-bg-basic-level-2-hovered: var(
-			--db-#{$variant}-bg-basic-level-2-hovered
-		);
-		--db-adaptive-bg-basic-level-2-pressed: var(
-			--db-#{$variant}-bg-basic-level-2-pressed
-		);
-		--db-adaptive-bg-basic-level-3-default: var(
-			--db-#{$variant}-bg-basic-level-3-default
-		);
-		--db-adaptive-bg-basic-level-3-hovered: var(
-			--db-#{$variant}-bg-basic-level-3-hovered
-		);
-		--db-adaptive-bg-basic-level-3-pressed: var(
-			--db-#{$variant}-bg-basic-level-3-pressed
-		);
-		--db-adaptive-bg-basic-transparent-full-default: var(
-			--db-#{$variant}-bg-basic-transparent-full-default
-		);
-		--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-pressed: var(
-			--db-#{$variant}-bg-basic-transparent-pressed
-		);
-
-		// on-bg basic
-		--db-adaptive-on-bg-basic-emphasis-100-default: var(
-			--db-#{$variant}-on-bg-basic-emphasis-100-default
-		);
-		--db-adaptive-on-bg-basic-emphasis-100-hovered: var(
-			--db-#{$variant}-on-bg-basic-emphasis-100-hovered
-		);
-		--db-adaptive-on-bg-basic-emphasis-100-pressed: var(
-			--db-#{$variant}-on-bg-basic-emphasis-100-pressed
-		);
-		--db-adaptive-on-bg-basic-emphasis-90-default: var(
-			--db-#{$variant}-on-bg-basic-emphasis-90-default
-		);
-		--db-adaptive-on-bg-basic-emphasis-90-hovered: var(
-			--db-#{$variant}-on-bg-basic-emphasis-90-hovered
-		);
-		--db-adaptive-on-bg-basic-emphasis-90-pressed: var(
-			--db-#{$variant}-on-bg-basic-emphasis-90-pressed
-		);
-		--db-adaptive-on-bg-basic-emphasis-80-default: var(
-			--db-#{$variant}-on-bg-basic-emphasis-80-default
-		);
-		--db-adaptive-on-bg-basic-emphasis-80-hovered: var(
-			--db-#{$variant}-on-bg-basic-emphasis-80-hovered
-		);
-		--db-adaptive-on-bg-basic-emphasis-80-pressed: var(
-			--db-#{$variant}-on-bg-basic-emphasis-80-pressed
-		);
-		--db-adaptive-on-bg-basic-emphasis-70-default: var(
-			--db-#{$variant}-on-bg-basic-emphasis-70-default
-		);
-		--db-adaptive-on-bg-basic-emphasis-70-hovered: var(
-			--db-#{$variant}-on-bg-basic-emphasis-70-hovered
-		);
-		--db-adaptive-on-bg-basic-emphasis-70-pressed: var(
-			--db-#{$variant}-on-bg-basic-emphasis-70-pressed
-		);
-		--db-adaptive-on-bg-basic-emphasis-60-default: var(
-			--db-#{$variant}-on-bg-basic-emphasis-60-default
-		);
-		--db-adaptive-on-bg-basic-emphasis-60-hovered: var(
-			--db-#{$variant}-on-bg-basic-emphasis-60-hovered
-		);
-		--db-adaptive-on-bg-basic-emphasis-60-pressed: var(
-			--db-#{$variant}-on-bg-basic-emphasis-60-pressed
-		);
-		--db-adaptive-on-bg-basic-emphasis-50-default: var(
-			--db-#{$variant}-on-bg-basic-emphasis-50-default
-		);
-		--db-adaptive-on-bg-basic-emphasis-50-hovered: var(
-			--db-#{$variant}-on-bg-basic-emphasis-50-hovered
-		);
-		--db-adaptive-on-bg-basic-emphasis-50-pressed: var(
-			--db-#{$variant}-on-bg-basic-emphasis-50-pressed
-		);
-
-		// inverted
-
-		--db-adaptive-bg-inverted-contrast-max-default: var(
-			--db-#{$variant}-bg-inverted-contrast-max-default
-		);
-		--db-adaptive-bg-inverted-contrast-max-hovered: var(
-			--db-#{$variant}-bg-inverted-contrast-max-hovered
-		);
-		--db-adaptive-bg-inverted-contrast-max-pressed: var(
-			--db-#{$variant}-bg-inverted-contrast-max-pressed
-		);
-		--db-adaptive-bg-inverted-contrast-high-default: var(
-			--db-#{$variant}-bg-inverted-contrast-high-default
-		);
-		--db-adaptive-bg-inverted-contrast-high-hovered: var(
-			--db-#{$variant}-bg-inverted-contrast-high-hovered
-		);
-		--db-adaptive-bg-inverted-contrast-high-pressed: var(
-			--db-#{$variant}-bg-inverted-contrast-high-pressed
-		);
-		--db-adaptive-bg-inverted-contrast-low-default: var(
-			--db-#{$variant}-bg-inverted-contrast-low-default
-		);
-		--db-adaptive-bg-inverted-contrast-low-hovered: var(
-			--db-#{$variant}-bg-inverted-contrast-low-hovered
-		);
-		--db-adaptive-bg-inverted-contrast-low-pressed: var(
-			--db-#{$variant}-bg-inverted-contrast-low-pressed
-		);
-
-		// on-bg-inverted
-		--db-adaptive-on-bg-inverted-default: var(
-			--db-#{$variant}-on-bg-inverted-default
-		);
-		--db-adaptive-on-bg-inverted-hovered: var(
-			--db-#{$variant}-on-bg-inverted-hovered
-		);
-		--db-adaptive-on-bg-inverted-pressed: var(
-			--db-#{$variant}-on-bg-inverted-pressed
-		);
-
-		// origin
-		--db-adaptive-origin-default: var(--db-#{$variant}-origin-default);
-		--db-adaptive-origin-hovered: var(--db-#{$variant}-origin-hovered);
-		--db-adaptive-origin-pressed: var(--db-#{$variant}-origin-pressed);
-
-		// on-origin
-		--db-adaptive-on-origin-default: var(
-			--db-#{$variant}-on-origin-default
-		);
-		--db-adaptive-on-origin-hovered: var(
-			--db-#{$variant}-on-origin-hovered
-		);
-		--db-adaptive-on-origin-pressed: var(
-			--db-#{$variant}-on-origin-pressed
-		);
+		/* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+		@layer #{layer.$layer-variables} {
+			// bg basic
+			--db-adaptive-bg-basic-level-1-default: var(
+				--db-#{$variant}-bg-basic-level-1-default
+			);
+			--db-adaptive-bg-basic-level-1-hovered: var(
+				--db-#{$variant}-bg-basic-level-1-hovered
+			);
+			--db-adaptive-bg-basic-level-1-pressed: var(
+				--db-#{$variant}-bg-basic-level-1-pressed
+			);
+			--db-adaptive-bg-basic-level-2-default: var(
+				--db-#{$variant}-bg-basic-level-2-default
+			);
+			--db-adaptive-bg-basic-level-2-hovered: var(
+				--db-#{$variant}-bg-basic-level-2-hovered
+			);
+			--db-adaptive-bg-basic-level-2-pressed: var(
+				--db-#{$variant}-bg-basic-level-2-pressed
+			);
+			--db-adaptive-bg-basic-level-3-default: var(
+				--db-#{$variant}-bg-basic-level-3-default
+			);
+			--db-adaptive-bg-basic-level-3-hovered: var(
+				--db-#{$variant}-bg-basic-level-3-hovered
+			);
+			--db-adaptive-bg-basic-level-3-pressed: var(
+				--db-#{$variant}-bg-basic-level-3-pressed
+			);
+			--db-adaptive-bg-basic-transparent-full-default: var(
+				--db-#{$variant}-bg-basic-transparent-full-default
+			);
+			--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-pressed: var(
+				--db-#{$variant}-bg-basic-transparent-pressed
+			);
+
+			// on-bg basic
+			--db-adaptive-on-bg-basic-emphasis-100-default: var(
+				--db-#{$variant}-on-bg-basic-emphasis-100-default
+			);
+			--db-adaptive-on-bg-basic-emphasis-100-hovered: var(
+				--db-#{$variant}-on-bg-basic-emphasis-100-hovered
+			);
+			--db-adaptive-on-bg-basic-emphasis-100-pressed: var(
+				--db-#{$variant}-on-bg-basic-emphasis-100-pressed
+			);
+			--db-adaptive-on-bg-basic-emphasis-90-default: var(
+				--db-#{$variant}-on-bg-basic-emphasis-90-default
+			);
+			--db-adaptive-on-bg-basic-emphasis-90-hovered: var(
+				--db-#{$variant}-on-bg-basic-emphasis-90-hovered
+			);
+			--db-adaptive-on-bg-basic-emphasis-90-pressed: var(
+				--db-#{$variant}-on-bg-basic-emphasis-90-pressed
+			);
+			--db-adaptive-on-bg-basic-emphasis-80-default: var(
+				--db-#{$variant}-on-bg-basic-emphasis-80-default
+			);
+			--db-adaptive-on-bg-basic-emphasis-80-hovered: var(
+				--db-#{$variant}-on-bg-basic-emphasis-80-hovered
+			);
+			--db-adaptive-on-bg-basic-emphasis-80-pressed: var(
+				--db-#{$variant}-on-bg-basic-emphasis-80-pressed
+			);
+			--db-adaptive-on-bg-basic-emphasis-70-default: var(
+				--db-#{$variant}-on-bg-basic-emphasis-70-default
+			);
+			--db-adaptive-on-bg-basic-emphasis-70-hovered: var(
+				--db-#{$variant}-on-bg-basic-emphasis-70-hovered
+			);
+			--db-adaptive-on-bg-basic-emphasis-70-pressed: var(
+				--db-#{$variant}-on-bg-basic-emphasis-70-pressed
+			);
+			--db-adaptive-on-bg-basic-emphasis-60-default: var(
+				--db-#{$variant}-on-bg-basic-emphasis-60-default
+			);
+			--db-adaptive-on-bg-basic-emphasis-50-default: var(
+				--db-#{$variant}-on-bg-basic-emphasis-50-default
+			);
+
+			// inverted
+			--db-adaptive-bg-inverted-contrast-max-default: var(
+				--db-#{$variant}-bg-inverted-contrast-max-default
+			);
+			--db-adaptive-bg-inverted-contrast-max-hovered: var(
+				--db-#{$variant}-bg-inverted-contrast-max-hovered
+			);
+			--db-adaptive-bg-inverted-contrast-max-pressed: var(
+				--db-#{$variant}-bg-inverted-contrast-max-pressed
+			);
+			--db-adaptive-bg-inverted-contrast-high-default: var(
+				--db-#{$variant}-bg-inverted-contrast-high-default
+			);
+			--db-adaptive-bg-inverted-contrast-high-hovered: var(
+				--db-#{$variant}-bg-inverted-contrast-high-hovered
+			);
+			--db-adaptive-bg-inverted-contrast-high-pressed: var(
+				--db-#{$variant}-bg-inverted-contrast-high-pressed
+			);
+			--db-adaptive-bg-inverted-contrast-low-default: var(
+				--db-#{$variant}-bg-inverted-contrast-low-default
+			);
+			--db-adaptive-bg-inverted-contrast-low-hovered: var(
+				--db-#{$variant}-bg-inverted-contrast-low-hovered
+			);
+			--db-adaptive-bg-inverted-contrast-low-pressed: var(
+				--db-#{$variant}-bg-inverted-contrast-low-pressed
+			);
+
+			// on-bg-inverted
+			--db-adaptive-on-bg-inverted-default: var(
+				--db-#{$variant}-on-bg-inverted-default
+			);
+			--db-adaptive-on-bg-inverted-hovered: var(
+				--db-#{$variant}-on-bg-inverted-hovered
+			);
+			--db-adaptive-on-bg-inverted-pressed: var(
+				--db-#{$variant}-on-bg-inverted-pressed
+			);
+
+			// origin
+			--db-adaptive-origin-default: var(--db-#{$variant}-origin-default);
+			--db-adaptive-origin-hovered: var(--db-#{$variant}-origin-hovered);
+			--db-adaptive-origin-pressed: var(--db-#{$variant}-origin-pressed);
+
+			// on-origin
+			--db-adaptive-on-origin-default: var(
+				--db-#{$variant}-on-origin-default
+			);
+
+			// vibrant
+			--db-adaptive-bg-vibrant-default: var(
+				--db-#{$variant}-bg-vibrant-default
+			);
+			--db-adaptive-bg-vibrant-hovered: var(
+				--db-#{$variant}-bg-vibrant-hovered
+			);
+			--db-adaptive-bg-vibrant-pressed: var(
+				--db-#{$variant}-bg-vibrant-pressed
+			);
+
+			// on-vibrant
+			--db-adaptive-on-bg-vibrant-default: var(
+				--db-#{$variant}-on-bg-vibrant-default
+			);
+			--db-adaptive-on-bg-vibrant-hovered: var(
+				--db-#{$variant}-on-bg-vibrant-hovered
+			);
+			--db-adaptive-on-bg-vibrant-pressed: var(
+				--db-#{$variant}-on-bg-vibrant-pressed
+			);
+		}
 	}
 
 	@each $bg in variables.$background-colors {

package/build/styles/colors/_variables.scss

@@ -1,13 +1,16 @@
-$variants: "neutral", "brand", "critical", "successful", "warning",
-	"informational";
+$variants:
+	"neutral", "brand", "critical", "successful", "warning", "informational";
 
-$variant-colors: "neutral", "critical", "successful", "warning", "informational";
+$variant-colors:
+	"neutral", "critical", "successful", "warning", "informational";
 
-$on-background-colors: "emphasis-100", "emphasis-90", "emphasis-80",
-	"emphasis-70", "emphasis-60", "emphasis-50";
+$on-background-colors:
+	"emphasis-100", "emphasis-90", "emphasis-80", "emphasis-70", "emphasis-60",
+	"emphasis-50";
 
-$background-colors: "basic-level-1", "basic-level-2", "basic-level-3",
-	"basic-transparent-semi", "basic-transparent-full";
+$background-colors:
+	"basic-level-1", "basic-level-2", "basic-level-3", "basic-transparent-semi",
+	"basic-transparent-full";
 $inverted-colors: "contrast-max", "contrast-high", "contrast-low";
 
 // adaptive colors
@@ -94,21 +97,9 @@ $db-adaptive-on-bg-basic-emphasis-70-pressed: var(
 $db-adaptive-on-bg-basic-emphasis-60-default: var(
 	--db-adaptive-on-bg-basic-emphasis-60-default
 );
-$db-adaptive-on-bg-basic-emphasis-60-hovered: var(
-	--db-adaptive-on-bg-basic-emphasis-60-hovered
-);
-$db-adaptive-on-bg-basic-emphasis-60-pressed: var(
-	--db-adaptive-on-bg-basic-emphasis-60-pressed
-);
 $db-adaptive-on-bg-basic-emphasis-50-default: var(
 	--db-adaptive-on-bg-basic-emphasis-50-default
 );
-$db-adaptive-on-bg-basic-emphasis-50-hovered: var(
-	--db-adaptive-on-bg-basic-emphasis-50-hovered
-);
-$db-adaptive-on-bg-basic-emphasis-50-pressed: var(
-	--db-adaptive-on-bg-basic-emphasis-50-pressed
-);
 
 // inverted
 
@@ -154,3 +145,13 @@ $db-adaptive-origin-pressed: var(--db-adaptive-origin-pressed);
 $db-adaptive-on-origin-default: var(--db-adaptive-on-origin-default);
 $db-adaptive-on-origin-hovered: var(--db-adaptive-on-origin-hovered);
 $db-adaptive-on-origin-pressed: var(--db-adaptive-on-origin-pressed);
+
+// vibrant
+$db-adaptive-bg-vibrant-default: var(--db-adaptive-bg-vibrant-default);
+$db-adaptive-bg-vibrant-hovered: var(--db-adaptive-bg-vibrant-hovered);
+$db-adaptive-bg-vibrant-pressed: var(--db-adaptive-bg-vibrant-pressed);
+
+// on-vibrant
+$db-adaptive-on-bg-vibrant-default: var(--db-adaptive-on-bg-vibrant-default);
+$db-adaptive-on-bg-vibrant-hovered: var(--db-adaptive-on-bg-vibrant-hovered);
+$db-adaptive-on-bg-vibrant-pressed: var(--db-adaptive-on-bg-vibrant-pressed);