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

package/build/styles/colors/classes/yellow.css

@@ -1,148 +1,182 @@
 /* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
 [data-color=yellow],
 .db-color-yellow {
-  --db-adaptive-bg-basic-level-1-default: var(
-  	--db-yellow-bg-basic-level-1-default
-  );
-  --db-adaptive-bg-basic-level-1-hovered: var(
-  	--db-yellow-bg-basic-level-1-hovered
-  );
-  --db-adaptive-bg-basic-level-1-pressed: var(
-  	--db-yellow-bg-basic-level-1-pressed
-  );
-  --db-adaptive-bg-basic-level-2-default: var(
-  	--db-yellow-bg-basic-level-2-default
-  );
-  --db-adaptive-bg-basic-level-2-hovered: var(
-  	--db-yellow-bg-basic-level-2-hovered
-  );
-  --db-adaptive-bg-basic-level-2-pressed: var(
-  	--db-yellow-bg-basic-level-2-pressed
-  );
-  --db-adaptive-bg-basic-level-3-default: var(
-  	--db-yellow-bg-basic-level-3-default
-  );
-  --db-adaptive-bg-basic-level-3-hovered: var(
-  	--db-yellow-bg-basic-level-3-hovered
-  );
-  --db-adaptive-bg-basic-level-3-pressed: var(
-  	--db-yellow-bg-basic-level-3-pressed
-  );
-  --db-adaptive-bg-basic-transparent-full-default: var(
-  	--db-yellow-bg-basic-transparent-full-default
-  );
-  --db-adaptive-bg-basic-transparent-semi-default: var(
-  	--db-yellow-bg-basic-transparent-semi-default
-  );
-  --db-adaptive-bg-basic-transparent-hovered: var(
-  	--db-yellow-bg-basic-transparent-hovered
-  );
-  --db-adaptive-bg-basic-transparent-pressed: var(
-  	--db-yellow-bg-basic-transparent-pressed
-  );
-  --db-adaptive-on-bg-basic-emphasis-100-default: var(
-  	--db-yellow-on-bg-basic-emphasis-100-default
-  );
-  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
-  	--db-yellow-on-bg-basic-emphasis-100-hovered
-  );
-  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
-  	--db-yellow-on-bg-basic-emphasis-100-pressed
-  );
-  --db-adaptive-on-bg-basic-emphasis-90-default: var(
-  	--db-yellow-on-bg-basic-emphasis-90-default
-  );
-  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
-  	--db-yellow-on-bg-basic-emphasis-90-hovered
-  );
-  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
-  	--db-yellow-on-bg-basic-emphasis-90-pressed
-  );
-  --db-adaptive-on-bg-basic-emphasis-80-default: var(
-  	--db-yellow-on-bg-basic-emphasis-80-default
-  );
-  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
-  	--db-yellow-on-bg-basic-emphasis-80-hovered
-  );
-  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
-  	--db-yellow-on-bg-basic-emphasis-80-pressed
-  );
-  --db-adaptive-on-bg-basic-emphasis-70-default: var(
-  	--db-yellow-on-bg-basic-emphasis-70-default
-  );
-  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
-  	--db-yellow-on-bg-basic-emphasis-70-hovered
-  );
-  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
-  	--db-yellow-on-bg-basic-emphasis-70-pressed
-  );
-  --db-adaptive-on-bg-basic-emphasis-60-default: var(
-  	--db-yellow-on-bg-basic-emphasis-60-default
-  );
-  --db-adaptive-on-bg-basic-emphasis-60-hovered: var(
-  	--db-yellow-on-bg-basic-emphasis-60-hovered
-  );
-  --db-adaptive-on-bg-basic-emphasis-60-pressed: var(
-  	--db-yellow-on-bg-basic-emphasis-60-pressed
-  );
-  --db-adaptive-on-bg-basic-emphasis-50-default: var(
-  	--db-yellow-on-bg-basic-emphasis-50-default
-  );
-  --db-adaptive-on-bg-basic-emphasis-50-hovered: var(
-  	--db-yellow-on-bg-basic-emphasis-50-hovered
-  );
-  --db-adaptive-on-bg-basic-emphasis-50-pressed: var(
-  	--db-yellow-on-bg-basic-emphasis-50-pressed
-  );
-  --db-adaptive-bg-inverted-contrast-max-default: var(
-  	--db-yellow-bg-inverted-contrast-max-default
-  );
-  --db-adaptive-bg-inverted-contrast-max-hovered: var(
-  	--db-yellow-bg-inverted-contrast-max-hovered
-  );
-  --db-adaptive-bg-inverted-contrast-max-pressed: var(
-  	--db-yellow-bg-inverted-contrast-max-pressed
-  );
-  --db-adaptive-bg-inverted-contrast-high-default: var(
-  	--db-yellow-bg-inverted-contrast-high-default
-  );
-  --db-adaptive-bg-inverted-contrast-high-hovered: var(
-  	--db-yellow-bg-inverted-contrast-high-hovered
-  );
-  --db-adaptive-bg-inverted-contrast-high-pressed: var(
-  	--db-yellow-bg-inverted-contrast-high-pressed
-  );
-  --db-adaptive-bg-inverted-contrast-low-default: var(
-  	--db-yellow-bg-inverted-contrast-low-default
-  );
-  --db-adaptive-bg-inverted-contrast-low-hovered: var(
-  	--db-yellow-bg-inverted-contrast-low-hovered
-  );
-  --db-adaptive-bg-inverted-contrast-low-pressed: var(
-  	--db-yellow-bg-inverted-contrast-low-pressed
-  );
-  --db-adaptive-on-bg-inverted-default: var(
-  	--db-yellow-on-bg-inverted-default
-  );
-  --db-adaptive-on-bg-inverted-hovered: var(
-  	--db-yellow-on-bg-inverted-hovered
-  );
-  --db-adaptive-on-bg-inverted-pressed: var(
-  	--db-yellow-on-bg-inverted-pressed
-  );
-  --db-adaptive-origin-default: var(--db-yellow-origin-default);
-  --db-adaptive-origin-hovered: var(--db-yellow-origin-hovered);
-  --db-adaptive-origin-pressed: var(--db-yellow-origin-pressed);
-  --db-adaptive-on-origin-default: var(
-  	--db-yellow-on-origin-default
-  );
-  --db-adaptive-on-origin-hovered: var(
-  	--db-yellow-on-origin-hovered
-  );
-  --db-adaptive-on-origin-pressed: var(
-  	--db-yellow-on-origin-pressed
-  );
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
+@layer variables {
+  [data-color=yellow],
+  .db-color-yellow {
+    --db-adaptive-bg-basic-level-1-default: var(
+    	--db-yellow-bg-basic-level-1-default
+    );
+    --db-adaptive-bg-basic-level-1-hovered: var(
+    	--db-yellow-bg-basic-level-1-hovered
+    );
+    --db-adaptive-bg-basic-level-1-pressed: var(
+    	--db-yellow-bg-basic-level-1-pressed
+    );
+    --db-adaptive-bg-basic-level-2-default: var(
+    	--db-yellow-bg-basic-level-2-default
+    );
+    --db-adaptive-bg-basic-level-2-hovered: var(
+    	--db-yellow-bg-basic-level-2-hovered
+    );
+    --db-adaptive-bg-basic-level-2-pressed: var(
+    	--db-yellow-bg-basic-level-2-pressed
+    );
+    --db-adaptive-bg-basic-level-3-default: var(
+    	--db-yellow-bg-basic-level-3-default
+    );
+    --db-adaptive-bg-basic-level-3-hovered: var(
+    	--db-yellow-bg-basic-level-3-hovered
+    );
+    --db-adaptive-bg-basic-level-3-pressed: var(
+    	--db-yellow-bg-basic-level-3-pressed
+    );
+    --db-adaptive-bg-basic-transparent-full-default: var(
+    	--db-yellow-bg-basic-transparent-full-default
+    );
+    --db-adaptive-bg-basic-transparent-semi-default: var(
+    	--db-yellow-bg-basic-transparent-semi-default
+    );
+    --db-adaptive-bg-basic-transparent-hovered: var(
+    	--db-yellow-bg-basic-transparent-hovered
+    );
+    --db-adaptive-bg-basic-transparent-pressed: var(
+    	--db-yellow-bg-basic-transparent-pressed
+    );
+    --db-adaptive-on-bg-basic-emphasis-100-default: var(
+    	--db-yellow-on-bg-basic-emphasis-100-default
+    );
+    --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
+    	--db-yellow-on-bg-basic-emphasis-100-hovered
+    );
+    --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
+    	--db-yellow-on-bg-basic-emphasis-100-pressed
+    );
+    --db-adaptive-on-bg-basic-emphasis-90-default: var(
+    	--db-yellow-on-bg-basic-emphasis-90-default
+    );
+    --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
+    	--db-yellow-on-bg-basic-emphasis-90-hovered
+    );
+    --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
+    	--db-yellow-on-bg-basic-emphasis-90-pressed
+    );
+    --db-adaptive-on-bg-basic-emphasis-80-default: var(
+    	--db-yellow-on-bg-basic-emphasis-80-default
+    );
+    --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
+    	--db-yellow-on-bg-basic-emphasis-80-hovered
+    );
+    --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
+    	--db-yellow-on-bg-basic-emphasis-80-pressed
+    );
+    --db-adaptive-on-bg-basic-emphasis-70-default: var(
+    	--db-yellow-on-bg-basic-emphasis-70-default
+    );
+    --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
+    	--db-yellow-on-bg-basic-emphasis-70-hovered
+    );
+    --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
+    	--db-yellow-on-bg-basic-emphasis-70-pressed
+    );
+    --db-adaptive-on-bg-basic-emphasis-60-default: var(
+    	--db-yellow-on-bg-basic-emphasis-60-default
+    );
+    --db-adaptive-on-bg-basic-emphasis-50-default: var(
+    	--db-yellow-on-bg-basic-emphasis-50-default
+    );
+    --db-adaptive-bg-inverted-contrast-max-default: var(
+    	--db-yellow-bg-inverted-contrast-max-default
+    );
+    --db-adaptive-bg-inverted-contrast-max-hovered: var(
+    	--db-yellow-bg-inverted-contrast-max-hovered
+    );
+    --db-adaptive-bg-inverted-contrast-max-pressed: var(
+    	--db-yellow-bg-inverted-contrast-max-pressed
+    );
+    --db-adaptive-bg-inverted-contrast-high-default: var(
+    	--db-yellow-bg-inverted-contrast-high-default
+    );
+    --db-adaptive-bg-inverted-contrast-high-hovered: var(
+    	--db-yellow-bg-inverted-contrast-high-hovered
+    );
+    --db-adaptive-bg-inverted-contrast-high-pressed: var(
+    	--db-yellow-bg-inverted-contrast-high-pressed
+    );
+    --db-adaptive-bg-inverted-contrast-low-default: var(
+    	--db-yellow-bg-inverted-contrast-low-default
+    );
+    --db-adaptive-bg-inverted-contrast-low-hovered: var(
+    	--db-yellow-bg-inverted-contrast-low-hovered
+    );
+    --db-adaptive-bg-inverted-contrast-low-pressed: var(
+    	--db-yellow-bg-inverted-contrast-low-pressed
+    );
+    --db-adaptive-on-bg-inverted-default: var(
+    	--db-yellow-on-bg-inverted-default
+    );
+    --db-adaptive-on-bg-inverted-hovered: var(
+    	--db-yellow-on-bg-inverted-hovered
+    );
+    --db-adaptive-on-bg-inverted-pressed: var(
+    	--db-yellow-on-bg-inverted-pressed
+    );
+    --db-adaptive-origin-default: var(--db-yellow-origin-default);
+    --db-adaptive-origin-hovered: var(--db-yellow-origin-hovered);
+    --db-adaptive-origin-pressed: var(--db-yellow-origin-pressed);
+    --db-adaptive-on-origin-default: var(
+    	--db-yellow-on-origin-default
+    );
+    --db-adaptive-bg-vibrant-default: var(
+    	--db-yellow-bg-vibrant-default
+    );
+    --db-adaptive-bg-vibrant-hovered: var(
+    	--db-yellow-bg-vibrant-hovered
+    );
+    --db-adaptive-bg-vibrant-pressed: var(
+    	--db-yellow-bg-vibrant-pressed
+    );
+    --db-adaptive-on-bg-vibrant-default: var(
+    	--db-yellow-on-bg-vibrant-default
+    );
+    --db-adaptive-on-bg-vibrant-hovered: var(
+    	--db-yellow-on-bg-vibrant-hovered
+    );
+    --db-adaptive-on-bg-vibrant-pressed: var(
+    	--db-yellow-on-bg-vibrant-pressed
+    );
+  }
+}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
 
 [data-color=yellow],
 .db-color-yellow {

package/build/styles/colors/speaking-colors/additional/_blue.speaking-colors.scss

@@ -110,3 +110,12 @@ $db-blue-origin-pressed: var(--db-blue-origin-pressed);
 $db-blue-on-origin-default: var(--db-blue-on-origin-default);
 $db-blue-on-origin-hovered: var(--db-blue-on-origin-hovered);
 $db-blue-on-origin-pressed: var(--db-blue-on-origin-pressed);
+// vibrant
+$db-blue-bg-vibrant-default: var(--db-blue-bg-vibrant-default);
+$db-blue-bg-vibrant-hovered: var(--db-blue-bg-vibrant-hovered);
+$db-blue-bg-vibrant-pressed: var(--db-blue-bg-vibrant-pressed);
+
+// on-vibrant
+$db-blue-on-bg-vibrant-default: var(--db-blue-on-bg-vibrant-default);
+$db-blue-on-bg-vibrant-hovered: var(--db-blue-on-bg-vibrant-hovered);
+$db-blue-on-bg-vibrant-pressed: var(--db-blue-on-bg-vibrant-pressed);

package/build/styles/colors/speaking-colors/additional/_cyan.speaking-colors.scss

@@ -110,3 +110,12 @@ $db-cyan-origin-pressed: var(--db-cyan-origin-pressed);
 $db-cyan-on-origin-default: var(--db-cyan-on-origin-default);
 $db-cyan-on-origin-hovered: var(--db-cyan-on-origin-hovered);
 $db-cyan-on-origin-pressed: var(--db-cyan-on-origin-pressed);
+// vibrant
+$db-cyan-bg-vibrant-default: var(--db-cyan-bg-vibrant-default);
+$db-cyan-bg-vibrant-hovered: var(--db-cyan-bg-vibrant-hovered);
+$db-cyan-bg-vibrant-pressed: var(--db-cyan-bg-vibrant-pressed);
+
+// on-vibrant
+$db-cyan-on-bg-vibrant-default: var(--db-cyan-on-bg-vibrant-default);
+$db-cyan-on-bg-vibrant-hovered: var(--db-cyan-on-bg-vibrant-hovered);
+$db-cyan-on-bg-vibrant-pressed: var(--db-cyan-on-bg-vibrant-pressed);

package/build/styles/colors/speaking-colors/additional/_green.speaking-colors.scss

@@ -110,3 +110,12 @@ $db-green-origin-pressed: var(--db-green-origin-pressed);
 $db-green-on-origin-default: var(--db-green-on-origin-default);
 $db-green-on-origin-hovered: var(--db-green-on-origin-hovered);
 $db-green-on-origin-pressed: var(--db-green-on-origin-pressed);
+// vibrant
+$db-green-bg-vibrant-default: var(--db-green-bg-vibrant-default);
+$db-green-bg-vibrant-hovered: var(--db-green-bg-vibrant-hovered);
+$db-green-bg-vibrant-pressed: var(--db-green-bg-vibrant-pressed);
+
+// on-vibrant
+$db-green-on-bg-vibrant-default: var(--db-green-on-bg-vibrant-default);
+$db-green-on-bg-vibrant-hovered: var(--db-green-on-bg-vibrant-hovered);
+$db-green-on-bg-vibrant-pressed: var(--db-green-on-bg-vibrant-pressed);

package/build/styles/colors/speaking-colors/additional/_orange.speaking-colors.scss

@@ -110,3 +110,12 @@ $db-orange-origin-pressed: var(--db-orange-origin-pressed);
 $db-orange-on-origin-default: var(--db-orange-on-origin-default);
 $db-orange-on-origin-hovered: var(--db-orange-on-origin-hovered);
 $db-orange-on-origin-pressed: var(--db-orange-on-origin-pressed);
+// vibrant
+$db-orange-bg-vibrant-default: var(--db-orange-bg-vibrant-default);
+$db-orange-bg-vibrant-hovered: var(--db-orange-bg-vibrant-hovered);
+$db-orange-bg-vibrant-pressed: var(--db-orange-bg-vibrant-pressed);
+
+// on-vibrant
+$db-orange-on-bg-vibrant-default: var(--db-orange-on-bg-vibrant-default);
+$db-orange-on-bg-vibrant-hovered: var(--db-orange-on-bg-vibrant-hovered);
+$db-orange-on-bg-vibrant-pressed: var(--db-orange-on-bg-vibrant-pressed);

package/build/styles/colors/speaking-colors/additional/_pink.speaking-colors.scss

@@ -110,3 +110,12 @@ $db-pink-origin-pressed: var(--db-pink-origin-pressed);
 $db-pink-on-origin-default: var(--db-pink-on-origin-default);
 $db-pink-on-origin-hovered: var(--db-pink-on-origin-hovered);
 $db-pink-on-origin-pressed: var(--db-pink-on-origin-pressed);
+// vibrant
+$db-pink-bg-vibrant-default: var(--db-pink-bg-vibrant-default);
+$db-pink-bg-vibrant-hovered: var(--db-pink-bg-vibrant-hovered);
+$db-pink-bg-vibrant-pressed: var(--db-pink-bg-vibrant-pressed);
+
+// on-vibrant
+$db-pink-on-bg-vibrant-default: var(--db-pink-on-bg-vibrant-default);
+$db-pink-on-bg-vibrant-hovered: var(--db-pink-on-bg-vibrant-hovered);
+$db-pink-on-bg-vibrant-pressed: var(--db-pink-on-bg-vibrant-pressed);

package/build/styles/colors/speaking-colors/additional/_red.speaking-colors.scss

@@ -110,3 +110,12 @@ $db-red-origin-pressed: var(--db-red-origin-pressed);
 $db-red-on-origin-default: var(--db-red-on-origin-default);
 $db-red-on-origin-hovered: var(--db-red-on-origin-hovered);
 $db-red-on-origin-pressed: var(--db-red-on-origin-pressed);
+// vibrant
+$db-red-bg-vibrant-default: var(--db-red-bg-vibrant-default);
+$db-red-bg-vibrant-hovered: var(--db-red-bg-vibrant-hovered);
+$db-red-bg-vibrant-pressed: var(--db-red-bg-vibrant-pressed);
+
+// on-vibrant
+$db-red-on-bg-vibrant-default: var(--db-red-on-bg-vibrant-default);
+$db-red-on-bg-vibrant-hovered: var(--db-red-on-bg-vibrant-hovered);
+$db-red-on-bg-vibrant-pressed: var(--db-red-on-bg-vibrant-pressed);

package/build/styles/colors/speaking-colors/additional/_turquoise.speaking-colors.scss

@@ -134,3 +134,12 @@ $db-turquoise-origin-pressed: var(--db-turquoise-origin-pressed);
 $db-turquoise-on-origin-default: var(--db-turquoise-on-origin-default);
 $db-turquoise-on-origin-hovered: var(--db-turquoise-on-origin-hovered);
 $db-turquoise-on-origin-pressed: var(--db-turquoise-on-origin-pressed);
+// vibrant
+$db-turquoise-bg-vibrant-default: var(--db-turquoise-bg-vibrant-default);
+$db-turquoise-bg-vibrant-hovered: var(--db-turquoise-bg-vibrant-hovered);
+$db-turquoise-bg-vibrant-pressed: var(--db-turquoise-bg-vibrant-pressed);
+
+// on-vibrant
+$db-turquoise-on-bg-vibrant-default: var(--db-turquoise-on-bg-vibrant-default);
+$db-turquoise-on-bg-vibrant-hovered: var(--db-turquoise-on-bg-vibrant-hovered);
+$db-turquoise-on-bg-vibrant-pressed: var(--db-turquoise-on-bg-vibrant-pressed);

package/build/styles/colors/speaking-colors/additional/_violet.speaking-colors.scss

@@ -110,3 +110,12 @@ $db-violet-origin-pressed: var(--db-violet-origin-pressed);
 $db-violet-on-origin-default: var(--db-violet-on-origin-default);
 $db-violet-on-origin-hovered: var(--db-violet-on-origin-hovered);
 $db-violet-on-origin-pressed: var(--db-violet-on-origin-pressed);
+// vibrant
+$db-violet-bg-vibrant-default: var(--db-violet-bg-vibrant-default);
+$db-violet-bg-vibrant-hovered: var(--db-violet-bg-vibrant-hovered);
+$db-violet-bg-vibrant-pressed: var(--db-violet-bg-vibrant-pressed);
+
+// on-vibrant
+$db-violet-on-bg-vibrant-default: var(--db-violet-on-bg-vibrant-default);
+$db-violet-on-bg-vibrant-hovered: var(--db-violet-on-bg-vibrant-hovered);
+$db-violet-on-bg-vibrant-pressed: var(--db-violet-on-bg-vibrant-pressed);

package/build/styles/colors/speaking-colors/additional/_yellow.speaking-colors.scss

@@ -110,3 +110,12 @@ $db-yellow-origin-pressed: var(--db-yellow-origin-pressed);
 $db-yellow-on-origin-default: var(--db-yellow-on-origin-default);
 $db-yellow-on-origin-hovered: var(--db-yellow-on-origin-hovered);
 $db-yellow-on-origin-pressed: var(--db-yellow-on-origin-pressed);
+// vibrant
+$db-yellow-bg-vibrant-default: var(--db-yellow-bg-vibrant-default);
+$db-yellow-bg-vibrant-hovered: var(--db-yellow-bg-vibrant-hovered);
+$db-yellow-bg-vibrant-pressed: var(--db-yellow-bg-vibrant-pressed);
+
+// on-vibrant
+$db-yellow-on-bg-vibrant-default: var(--db-yellow-on-bg-vibrant-default);
+$db-yellow-on-bg-vibrant-hovered: var(--db-yellow-on-bg-vibrant-hovered);
+$db-yellow-on-bg-vibrant-pressed: var(--db-yellow-on-bg-vibrant-pressed);

package/build/styles/colors/speaking-colors/semantic/_brand.speaking-colors.scss

@@ -110,3 +110,12 @@ $db-brand-origin-pressed: var(--db-brand-origin-pressed);
 $db-brand-on-origin-default: var(--db-brand-on-origin-default);
 $db-brand-on-origin-hovered: var(--db-brand-on-origin-hovered);
 $db-brand-on-origin-pressed: var(--db-brand-on-origin-pressed);
+// vibrant
+$db-brand-vibrant-default: var(--db-brand-vibrant-default);
+$db-brand-vibrant-hovered: var(--db-brand-vibrant-hovered);
+$db-brand-vibrant-pressed: var(--db-brand-vibrant-pressed);
+
+// on-vibrant
+$db-brand-on-vibrant-default: var(--db-brand-on-vibrant-default);
+$db-brand-on-vibrant-hovered: var(--db-brand-on-vibrant-hovered);
+$db-brand-on-vibrant-pressed: var(--db-brand-on-vibrant-pressed);

package/build/styles/colors/speaking-colors/semantic/_critical.speaking-colors.scss

@@ -128,3 +128,12 @@ $db-critical-origin-pressed: var(--db-critical-origin-pressed);
 $db-critical-on-origin-default: var(--db-critical-on-origin-default);
 $db-critical-on-origin-hovered: var(--db-critical-on-origin-hovered);
 $db-critical-on-origin-pressed: var(--db-critical-on-origin-pressed);
+// vibrant
+$db-critical-vibrant-default: var(--db-critical-vibrant-default);
+$db-critical-vibrant-hovered: var(--db-critical-vibrant-hovered);
+$db-critical-vibrant-pressed: var(--db-critical-vibrant-pressed);
+
+// on-vibrant
+$db-critical-on-vibrant-default: var(--db-critical-on-vibrant-default);
+$db-critical-on-vibrant-hovered: var(--db-critical-on-vibrant-hovered);
+$db-critical-on-vibrant-pressed: var(--db-critical-on-vibrant-pressed);

package/build/styles/colors/speaking-colors/semantic/_informational.speaking-colors.scss

@@ -134,3 +134,18 @@ $db-informational-origin-pressed: var(--db-informational-origin-pressed);
 $db-informational-on-origin-default: var(--db-informational-on-origin-default);
 $db-informational-on-origin-hovered: var(--db-informational-on-origin-hovered);
 $db-informational-on-origin-pressed: var(--db-informational-on-origin-pressed);
+// vibrant
+$db-informational-vibrant-default: var(--db-informational-vibrant-default);
+$db-informational-vibrant-hovered: var(--db-informational-vibrant-hovered);
+$db-informational-vibrant-pressed: var(--db-informational-vibrant-pressed);
+
+// on-vibrant
+$db-informational-on-vibrant-default: var(
+	--db-informational-on-vibrant-default
+);
+$db-informational-on-vibrant-hovered: var(
+	--db-informational-on-vibrant-hovered
+);
+$db-informational-on-vibrant-pressed: var(
+	--db-informational-on-vibrant-pressed
+);

package/build/styles/colors/speaking-colors/semantic/_neutral.speaking-colors.scss

@@ -128,3 +128,12 @@ $db-neutral-origin-pressed: var(--db-neutral-origin-pressed);
 $db-neutral-on-origin-default: var(--db-neutral-on-origin-default);
 $db-neutral-on-origin-hovered: var(--db-neutral-on-origin-hovered);
 $db-neutral-on-origin-pressed: var(--db-neutral-on-origin-pressed);
+// vibrant
+$db-neutral-vibrant-default: var(--db-neutral-vibrant-default);
+$db-neutral-vibrant-hovered: var(--db-neutral-vibrant-hovered);
+$db-neutral-vibrant-pressed: var(--db-neutral-vibrant-pressed);
+
+// on-vibrant
+$db-neutral-on-vibrant-default: var(--db-neutral-on-vibrant-default);
+$db-neutral-on-vibrant-hovered: var(--db-neutral-on-vibrant-hovered);
+$db-neutral-on-vibrant-pressed: var(--db-neutral-on-vibrant-pressed);

package/build/styles/colors/speaking-colors/semantic/_successful.speaking-colors.scss

@@ -134,3 +134,12 @@ $db-successful-origin-pressed: var(--db-successful-origin-pressed);
 $db-successful-on-origin-default: var(--db-successful-on-origin-default);
 $db-successful-on-origin-hovered: var(--db-successful-on-origin-hovered);
 $db-successful-on-origin-pressed: var(--db-successful-on-origin-pressed);
+// vibrant
+$db-successful-vibrant-default: var(--db-successful-vibrant-default);
+$db-successful-vibrant-hovered: var(--db-successful-vibrant-hovered);
+$db-successful-vibrant-pressed: var(--db-successful-vibrant-pressed);
+
+// on-vibrant
+$db-successful-on-vibrant-default: var(--db-successful-on-vibrant-default);
+$db-successful-on-vibrant-hovered: var(--db-successful-on-vibrant-hovered);
+$db-successful-on-vibrant-pressed: var(--db-successful-on-vibrant-pressed);

package/build/styles/colors/speaking-colors/semantic/_warning.speaking-colors.scss

@@ -128,3 +128,12 @@ $db-warning-origin-pressed: var(--db-warning-origin-pressed);
 $db-warning-on-origin-default: var(--db-warning-on-origin-default);
 $db-warning-on-origin-hovered: var(--db-warning-on-origin-hovered);
 $db-warning-on-origin-pressed: var(--db-warning-on-origin-pressed);
+// vibrant
+$db-warning-vibrant-default: var(--db-warning-vibrant-default);
+$db-warning-vibrant-hovered: var(--db-warning-vibrant-hovered);
+$db-warning-vibrant-pressed: var(--db-warning-vibrant-pressed);
+
+// on-vibrant
+$db-warning-on-vibrant-default: var(--db-warning-on-vibrant-default);
+$db-warning-on-vibrant-hovered: var(--db-warning-on-vibrant-hovered);
+$db-warning-on-vibrant-pressed: var(--db-warning-on-vibrant-pressed);

package/build/styles/colors/speaking-colors/vibrant.js

@@ -0,0 +1,43 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+
+const directoryPath = './';
+
+async function readDirectoryRecursive(dir) {
+	const entries = await fs.readdir(dir, { withFileTypes: true });
+	const files = await Promise.all(
+		entries.map((entry) => {
+			const res = path.resolve(dir, entry.name);
+			return entry.isDirectory() ? readDirectoryRecursive(res) : res;
+		})
+	);
+	return Array.prototype.concat(...files);
+}
+
+async function appendToFile(filePath, fileName) {
+	const namePart = fileName.split('_')[1].split('.')[0];
+	const snippet = `// vibrant
+$db-${namePart}-vibrant-default: var(--db-${namePart}-vibrant-default);
+$db-${namePart}-vibrant-hovered: var(--db-${namePart}-vibrant-hovered);
+$db-${namePart}-vibrant-pressed: var(--db-${namePart}-vibrant-pressed);
+
+// on-vibrant
+$db-${namePart}-on-vibrant-default: var(--db-${namePart}-on-vibrant-default);
+$db-${namePart}-on-vibrant-hovered: var(--db-${namePart}-on-vibrant-hovered);
+$db-${namePart}-on-vibrant-pressed: var(--db-${namePart}-on-vibrant-pressed);
+`;
+
+	await fs.appendFile(filePath, snippet);
+}
+
+async function processFiles() {
+	const files = await readDirectoryRecursive(directoryPath);
+	const scssFiles = files.filter((file) => file.endsWith('.scss'));
+
+	for (const file of scssFiles) {
+		const fileName = path.basename(file);
+		await appendToFile(file, fileName);
+	}
+}
+
+processFiles().catch(console.error);