@db-ux/core-foundations 2.0.8 → 2.0.10-popover-d7e8b9a

package/build/styles/colors/classes/light-green.css

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

package/build/styles/colors/classes/light-green.scss

@@ -0,0 +1,6 @@
+@use "../index";
+@use "get-class";
+
+$variant: "light-green";
+
+@include get-class.init($variant);

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

@@ -178,6 +178,10 @@
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 [data-color=neutral],
 .db-color-neutral {
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

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

@@ -178,6 +178,10 @@
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 [data-color=orange],
 .db-color-orange {
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

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

@@ -178,6 +178,10 @@
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 [data-color=pink],
 .db-color-pink {
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

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

@@ -178,6 +178,10 @@
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 [data-color=red],
 .db-color-red {
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

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

@@ -178,6 +178,10 @@
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 [data-color=successful],
 .db-color-successful {
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

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

@@ -178,6 +178,10 @@
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 [data-color=turquoise],
 .db-color-turquoise {
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

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

@@ -178,6 +178,10 @@
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 [data-color=violet],
 .db-color-violet {
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

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

@@ -178,6 +178,10 @@
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 [data-color=warning],
 .db-color-warning {
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

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

@@ -178,6 +178,10 @@
 
 @layer variables {}
 
+@layer variables {}
+
+@layer variables {}
+
 [data-color=yellow],
 .db-color-yellow {
   color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

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

@@ -0,0 +1,140 @@
+$db-burgundy-bg-basic-level-1-default: var(
+	--db-burgundy-bg-basic-level-1-default
+);
+$db-burgundy-bg-basic-level-1-hovered: var(
+	--db-burgundy-bg-basic-level-1-hovered
+);
+$db-burgundy-bg-basic-level-1-pressed: var(
+	--db-burgundy-bg-basic-level-1-pressed
+);
+$db-burgundy-bg-basic-level-2-default: var(
+	--db-burgundy-bg-basic-level-2-default
+);
+$db-burgundy-bg-basic-level-2-hovered: var(
+	--db-burgundy-bg-basic-level-2-hovered
+);
+$db-burgundy-bg-basic-level-2-pressed: var(
+	--db-burgundy-bg-basic-level-2-pressed
+);
+$db-burgundy-bg-basic-level-3-default: var(
+	--db-burgundy-bg-basic-level-3-default
+);
+$db-burgundy-bg-basic-level-3-hovered: var(
+	--db-burgundy-bg-basic-level-3-hovered
+);
+$db-burgundy-bg-basic-level-3-pressed: var(
+	--db-burgundy-bg-basic-level-3-pressed
+);
+
+$db-burgundy-bg-basic-transparent-full-default: var(
+	--db-burgundy-bg-basic-transparent-full-default
+);
+$db-burgundy-bg-basic-transparent-semi-default: var(
+	--db-burgundy-bg-basic-transparent-semi-default
+);
+$db-burgundy-bg-basic-transparent-hovered: var(
+	--db-burgundy-bg-basic-transparent-hovered
+);
+$db-burgundy-bg-basic-transparent-pressed: var(
+	--db-burgundy-bg-basic-transparent-pressed
+);
+$db-burgundy-on-bg-basic-emphasis-100-default: var(
+	--db-burgundy-on-bg-basic-emphasis-100-default
+);
+$db-burgundy-on-bg-basic-emphasis-100-hovered: var(
+	--db-burgundy-on-bg-basic-emphasis-100-hovered
+);
+$db-burgundy-on-bg-basic-emphasis-100-pressed: var(
+	--db-burgundy-on-bg-basic-emphasis-100-pressed
+);
+$db-burgundy-on-bg-basic-emphasis-90-default: var(
+	--db-burgundy-on-bg-basic-emphasis-90-default
+);
+$db-burgundy-on-bg-basic-emphasis-90-hovered: var(
+	--db-burgundy-on-bg-basic-emphasis-90-hovered
+);
+$db-burgundy-on-bg-basic-emphasis-90-pressed: var(
+	--db-burgundy-on-bg-basic-emphasis-90-pressed
+);
+$db-burgundy-on-bg-basic-emphasis-80-default: var(
+	--db-burgundy-on-bg-basic-emphasis-80-default
+);
+$db-burgundy-on-bg-basic-emphasis-80-hovered: var(
+	--db-burgundy-on-bg-basic-emphasis-80-hovered
+);
+$db-burgundy-on-bg-basic-emphasis-80-pressed: var(
+	--db-burgundy-on-bg-basic-emphasis-80-pressed
+);
+$db-burgundy-on-bg-basic-emphasis-70-default: var(
+	--db-burgundy-on-bg-basic-emphasis-70-default
+);
+$db-burgundy-on-bg-basic-emphasis-70-hovered: var(
+	--db-burgundy-on-bg-basic-emphasis-70-hovered
+);
+$db-burgundy-on-bg-basic-emphasis-70-pressed: var(
+	--db-burgundy-on-bg-basic-emphasis-70-pressed
+);
+$db-burgundy-on-bg-basic-emphasis-60-default: var(
+	--db-burgundy-on-bg-basic-emphasis-60-default
+);
+$db-burgundy-on-bg-basic-emphasis-60-hovered: var(
+	--db-burgundy-on-bg-basic-emphasis-60-hovered
+);
+$db-burgundy-on-bg-basic-emphasis-60-pressed: var(
+	--db-burgundy-on-bg-basic-emphasis-60-pressed
+);
+$db-burgundy-on-bg-basic-emphasis-50-default: var(
+	--db-burgundy-on-bg-basic-emphasis-50-default
+);
+$db-burgundy-on-bg-basic-emphasis-50-hovered: var(
+	--db-burgundy-on-bg-basic-emphasis-50-hovered
+);
+$db-burgundy-on-bg-basic-emphasis-50-pressed: var(
+	--db-burgundy-on-bg-basic-emphasis-50-pressed
+);
+$db-burgundy-bg-inverted-contrast-max-default: var(
+	--db-burgundy-bg-inverted-contrast-max-default
+);
+$db-burgundy-bg-inverted-contrast-max-hovered: var(
+	--db-burgundy-bg-inverted-contrast-max-hovered
+);
+$db-burgundy-bg-inverted-contrast-max-pressed: var(
+	--db-burgundy-bg-inverted-contrast-max-pressed
+);
+$db-burgundy-bg-inverted-contrast-high-default: var(
+	--db-burgundy-bg-inverted-contrast-high-default
+);
+$db-burgundy-bg-inverted-contrast-high-hovered: var(
+	--db-burgundy-bg-inverted-contrast-high-hovered
+);
+$db-burgundy-bg-inverted-contrast-high-pressed: var(
+	--db-burgundy-bg-inverted-contrast-high-pressed
+);
+$db-burgundy-bg-inverted-contrast-low-default: var(
+	--db-burgundy-bg-inverted-contrast-low-default
+);
+$db-burgundy-bg-inverted-contrast-low-hovered: var(
+	--db-burgundy-bg-inverted-contrast-low-hovered
+);
+$db-burgundy-bg-inverted-contrast-low-pressed: var(
+	--db-burgundy-bg-inverted-contrast-low-pressed
+);
+$db-burgundy-on-bg-inverted-default: var(--db-burgundy-on-bg-inverted-default);
+$db-burgundy-on-bg-inverted-hovered: var(--db-burgundy-on-bg-inverted-hovered);
+$db-burgundy-on-bg-inverted-pressed: var(--db-burgundy-on-bg-inverted-pressed);
+$db-burgundy-origin-default: var(--db-burgundy-origin-default);
+$db-burgundy-origin-hovered: var(--db-burgundy-origin-hovered);
+$db-burgundy-origin-pressed: var(--db-burgundy-origin-pressed);
+$db-burgundy-on-origin-default: var(--db-burgundy-on-origin-default);
+$db-burgundy-on-origin-hovered: var(--db-burgundy-on-origin-hovered);
+$db-burgundy-on-origin-pressed: var(--db-burgundy-on-origin-pressed);
+
+// vibrant
+$db-burgundy-bg-vibrant-default: var(--db-burgundy-bg-vibrant-default);
+$db-burgundy-bg-vibrant-hovered: var(--db-burgundy-bg-vibrant-hovered);
+$db-burgundy-bg-vibrant-pressed: var(--db-burgundy-bg-vibrant-pressed);
+
+// on-vibrant
+$db-burgundy-on-bg-vibrant-default: var(--db-burgundy-on-bg-vibrant-default);
+$db-burgundy-on-bg-vibrant-hovered: var(--db-burgundy-on-bg-vibrant-hovered);
+$db-burgundy-on-bg-vibrant-pressed: var(--db-burgundy-on-bg-vibrant-pressed);

package/build/styles/colors/speaking-colors/additional/_light-green.speaking-colors.scss

@@ -0,0 +1,152 @@
+$db-light-green-bg-basic-level-1-default: var(
+	--db-light-green-bg-basic-level-1-default
+);
+$db-light-green-bg-basic-level-1-hovered: var(
+	--db-light-green-bg-basic-level-1-hovered
+);
+$db-light-green-bg-basic-level-1-pressed: var(
+	--db-light-green-bg-basic-level-1-pressed
+);
+$db-light-green-bg-basic-level-2-default: var(
+	--db-light-green-bg-basic-level-2-default
+);
+$db-light-green-bg-basic-level-2-hovered: var(
+	--db-light-green-bg-basic-level-2-hovered
+);
+$db-light-green-bg-basic-level-2-pressed: var(
+	--db-light-green-bg-basic-level-2-pressed
+);
+$db-light-green-bg-basic-level-3-default: var(
+	--db-light-green-bg-basic-level-3-default
+);
+$db-light-green-bg-basic-level-3-hovered: var(
+	--db-light-green-bg-basic-level-3-hovered
+);
+$db-light-green-bg-basic-level-3-pressed: var(
+	--db-light-green-bg-basic-level-3-pressed
+);
+
+$db-light-green-bg-basic-transparent-full-default: var(
+	--db-light-green-bg-basic-transparent-full-default
+);
+$db-light-green-bg-basic-transparent-semi-default: var(
+	--db-light-green-bg-basic-transparent-semi-default
+);
+$db-light-green-bg-basic-transparent-hovered: var(
+	--db-light-green-bg-basic-transparent-hovered
+);
+$db-light-green-bg-basic-transparent-pressed: var(
+	--db-light-green-bg-basic-transparent-pressed
+);
+$db-light-green-on-bg-basic-emphasis-100-default: var(
+	--db-light-green-on-bg-basic-emphasis-100-default
+);
+$db-light-green-on-bg-basic-emphasis-100-hovered: var(
+	--db-light-green-on-bg-basic-emphasis-100-hovered
+);
+$db-light-green-on-bg-basic-emphasis-100-pressed: var(
+	--db-light-green-on-bg-basic-emphasis-100-pressed
+);
+$db-light-green-on-bg-basic-emphasis-90-default: var(
+	--db-light-green-on-bg-basic-emphasis-90-default
+);
+$db-light-green-on-bg-basic-emphasis-90-hovered: var(
+	--db-light-green-on-bg-basic-emphasis-90-hovered
+);
+$db-light-green-on-bg-basic-emphasis-90-pressed: var(
+	--db-light-green-on-bg-basic-emphasis-90-pressed
+);
+$db-light-green-on-bg-basic-emphasis-80-default: var(
+	--db-light-green-on-bg-basic-emphasis-80-default
+);
+$db-light-green-on-bg-basic-emphasis-80-hovered: var(
+	--db-light-green-on-bg-basic-emphasis-80-hovered
+);
+$db-light-green-on-bg-basic-emphasis-80-pressed: var(
+	--db-light-green-on-bg-basic-emphasis-80-pressed
+);
+$db-light-green-on-bg-basic-emphasis-70-default: var(
+	--db-light-green-on-bg-basic-emphasis-70-default
+);
+$db-light-green-on-bg-basic-emphasis-70-hovered: var(
+	--db-light-green-on-bg-basic-emphasis-70-hovered
+);
+$db-light-green-on-bg-basic-emphasis-70-pressed: var(
+	--db-light-green-on-bg-basic-emphasis-70-pressed
+);
+$db-light-green-on-bg-basic-emphasis-60-default: var(
+	--db-light-green-on-bg-basic-emphasis-60-default
+);
+$db-light-green-on-bg-basic-emphasis-60-hovered: var(
+	--db-light-green-on-bg-basic-emphasis-60-hovered
+);
+$db-light-green-on-bg-basic-emphasis-60-pressed: var(
+	--db-light-green-on-bg-basic-emphasis-60-pressed
+);
+$db-light-green-on-bg-basic-emphasis-50-default: var(
+	--db-light-green-on-bg-basic-emphasis-50-default
+);
+$db-light-green-on-bg-basic-emphasis-50-hovered: var(
+	--db-light-green-on-bg-basic-emphasis-50-hovered
+);
+$db-light-green-on-bg-basic-emphasis-50-pressed: var(
+	--db-light-green-on-bg-basic-emphasis-50-pressed
+);
+$db-light-green-bg-inverted-contrast-max-default: var(
+	--db-light-green-bg-inverted-contrast-max-default
+);
+$db-light-green-bg-inverted-contrast-max-hovered: var(
+	--db-light-green-bg-inverted-contrast-max-hovered
+);
+$db-light-green-bg-inverted-contrast-max-pressed: var(
+	--db-light-green-bg-inverted-contrast-max-pressed
+);
+$db-light-green-bg-inverted-contrast-high-default: var(
+	--db-light-green-bg-inverted-contrast-high-default
+);
+$db-light-green-bg-inverted-contrast-high-hovered: var(
+	--db-light-green-bg-inverted-contrast-high-hovered
+);
+$db-light-green-bg-inverted-contrast-high-pressed: var(
+	--db-light-green-bg-inverted-contrast-high-pressed
+);
+$db-light-green-bg-inverted-contrast-low-default: var(
+	--db-light-green-bg-inverted-contrast-low-default
+);
+$db-light-green-bg-inverted-contrast-low-hovered: var(
+	--db-light-green-bg-inverted-contrast-low-hovered
+);
+$db-light-green-bg-inverted-contrast-low-pressed: var(
+	--db-light-green-bg-inverted-contrast-low-pressed
+);
+$db-light-green-on-bg-inverted-default: var(
+	--db-light-green-on-bg-inverted-default
+);
+$db-light-green-on-bg-inverted-hovered: var(
+	--db-light-green-on-bg-inverted-hovered
+);
+$db-light-green-on-bg-inverted-pressed: var(
+	--db-light-green-on-bg-inverted-pressed
+);
+$db-light-green-origin-default: var(--db-light-green-origin-default);
+$db-light-green-origin-hovered: var(--db-light-green-origin-hovered);
+$db-light-green-origin-pressed: var(--db-light-green-origin-pressed);
+$db-light-green-on-origin-default: var(--db-light-green-on-origin-default);
+$db-light-green-on-origin-hovered: var(--db-light-green-on-origin-hovered);
+$db-light-green-on-origin-pressed: var(--db-light-green-on-origin-pressed);
+
+// vibrant
+$db-light-green-bg-vibrant-default: var(--db-light-green-bg-vibrant-default);
+$db-light-green-bg-vibrant-hovered: var(--db-light-green-bg-vibrant-hovered);
+$db-light-green-bg-vibrant-pressed: var(--db-light-green-bg-vibrant-pressed);
+
+// on-vibrant
+$db-light-green-on-bg-vibrant-default: var(
+	--db-light-green-on-bg-vibrant-default
+);
+$db-light-green-on-bg-vibrant-hovered: var(
+	--db-light-green-on-bg-vibrant-hovered
+);
+$db-light-green-on-bg-vibrant-pressed: var(
+	--db-light-green-on-bg-vibrant-pressed
+);