@db-ux/core-foundations 4.0.1 → 4.0.2

package/build/tailwind/theme/_variables.scss

@@ -26,6 +26,20 @@
 	--spacing-siz-xl: var(--db-sizing-xl);
 	--spacing-siz-2xl: var(--db-sizing-2xl);
 	--spacing-siz-3xl: var(--db-sizing-3xl);
+	--spacing-screen-xs: var(--db-screen-xs);
+	--spacing-screen-sm: var(--db-screen-sm);
+	--spacing-screen-md: var(--db-screen-md);
+	--spacing-screen-lg: var(--db-screen-lg);
+	--spacing-screen-xl: var(--db-screen-xl);
+	--spacing-container-3xs: var(--db-container-3xs);
+	--spacing-container-2xs: var(--db-container-2xs);
+	--spacing-container-xs: var(--db-container-xs);
+	--spacing-container-sm: var(--db-container-sm);
+	--spacing-container-md: var(--db-container-md);
+	--spacing-container-lg: var(--db-container-lg);
+	--spacing-container-xl: var(--db-container-xl);
+	--spacing-container-2xl: var(--db-container-2xl);
+	--spacing-container-3xl: var(--db-container-3xl);
 	--gap-3xs: var(--db-spacing-fixed-3xs);
 	--gap-2xs: var(--db-spacing-fixed-2xs);
 	--gap-xs: var(--db-spacing-fixed-xs);

package/build/tailwind/theme/colors/blue.css

@@ -0,0 +1,154 @@
+/* The prefix for variables are predefined by Tailwind, stylelint would throw an error */
+/* stylelint-disable-next-line scss/at-rule-no-unknown */
+@theme {
+	/* stylelint-disable-next-line custom-property-pattern */
+	--color-*: initial; /* 	Color utilities like */
+
+	/* Basic-Level */
+	--color-blue-bg-basic-level-1-default: var(
+		--db-blue-bg-basic-level-1-default
+	);
+	--color-blue-bg-basic-level-1-hovered: var(
+		--db-blue-bg-basic-level-1-hovered
+	);
+	--color-blue-bg-basic-level-1-pressed: var(
+		--db-blue-bg-basic-level-1-pressed
+	);
+	--color-blue-bg-basic-level-2-default: var(
+		--db-blue-bg-basic-level-2-default
+	);
+	--color-blue-bg-basic-level-2-hovered: var(
+		--db-blue-bg-basic-level-2-hovered
+	);
+	--color-blue-bg-basic-level-2-pressed: var(
+		--db-blue-bg-basic-level-2-pressed
+	);
+	--color-blue-bg-basic-level-3-default: var(
+		--db-blue-bg-basic-level-3-default
+	);
+	--color-blue-bg-basic-level-3-hovered: var(
+		--db-blue-bg-basic-level-3-hovered
+	);
+	--color-blue-bg-basic-level-3-pressed: var(
+		--db-blue-bg-basic-level-3-pressed
+	);
+
+	/* Transparent */
+	--color-blue-bg-basic-transparent-full-default: var(
+		--db-blue-bg-basic-transparent-full-default
+	);
+	--color-blue-bg-basic-transparent-semi-default: var(
+		--db-blue-bg-basic-transparent-semi-default
+	);
+	--color-blue-bg-basic-transparent-full-hovered: var(
+		--db-blue-bg-basic-transparent-full-hovered
+	);
+	--color-blue-bg-basic-transparent-full-pressed: var(
+		--db-blue-bg-basic-transparent-full-pressed
+	);
+	--color-blue-bg-basic-transparent-semi-hovered: var(
+		--db-blue-bg-basic-transparent-semi-hovered
+	);
+	--color-blue-bg-basic-transparent-semi-pressed: var(
+		--db-blue-bg-basic-transparent-semi-pressed
+	);
+
+	/* Inverted */
+	--color-blue-bg-inverted-contrast-max-default: var(
+		--db-blue-bg-inverted-contrast-max-default
+	);
+	--color-blue-bg-inverted-contrast-max-hovered: var(
+		--db-blue-bg-inverted-contrast-max-hovered
+	);
+	--color-blue-bg-inverted-contrast-max-pressed: var(
+		--db-blue-bg-inverted-contrast-max-pressed
+	);
+	--color-blue-bg-inverted-contrast-high-default: var(
+		--db-blue-bg-inverted-contrast-high-default
+	);
+	--color-blue-bg-inverted-contrast-high-hovered: var(
+		--db-blue-bg-inverted-contrast-high-hovered
+	);
+	--color-blue-bg-inverted-contrast-high-pressed: var(
+		--db-blue-bg-inverted-contrast-high-pressed
+	);
+	--color-blue-bg-inverted-contrast-low-default: var(
+		--db-blue-bg-inverted-contrast-low-default
+	);
+	--color-blue-bg-inverted-contrast-low-hovered: var(
+		--db-blue-bg-inverted-contrast-low-hovered
+	);
+	--color-blue-bg-inverted-contrast-low-pressed: var(
+		--db-blue-bg-inverted-contrast-low-pressed
+	);
+
+	/* On Colors */
+
+	--color-blue-on-bg-basic-emphasis-100-default: var(
+		--db-blue-on-bg-basic-emphasis-100-default
+	);
+	--color-blue-on-bg-basic-emphasis-100-hovered: var(
+		--db-blue-on-bg-basic-emphasis-100-hovered
+	);
+	--color-blue-on-bg-basic-emphasis-100-pressed: var(
+		--db-blue-on-bg-basic-emphasis-100-pressed
+	);
+	--color-blue-on-bg-basic-emphasis-90-default: var(
+		--db-blue-on-bg-basic-emphasis-90-default
+	);
+	--color-blue-on-bg-basic-emphasis-90-hovered: var(
+		--db-blue-on-bg-basic-emphasis-90-hovered
+	);
+	--color-blue-on-bg-basic-emphasis-90-pressed: var(
+		--db-blue-on-bg-basic-emphasis-90-pressed
+	);
+	--color-blue-on-bg-basic-emphasis-80-default: var(
+		--db-blue-on-bg-basic-emphasis-80-default
+	);
+	--color-blue-on-bg-basic-emphasis-80-hovered: var(
+		--db-blue-on-bg-basic-emphasis-80-hovered
+	);
+	--color-blue-on-bg-basic-emphasis-80-pressed: var(
+		--db-blue-on-bg-basic-emphasis-80-pressed
+	);
+	--color-blue-on-bg-basic-emphasis-70-default: var(
+		--db-blue-on-bg-basic-emphasis-70-default
+	);
+	--color-blue-on-bg-basic-emphasis-70-hovered: var(
+		--db-blue-on-bg-basic-emphasis-70-hovered
+	);
+	--color-blue-on-bg-basic-emphasis-70-pressed: var(
+		--db-blue-on-bg-basic-emphasis-70-pressed
+	);
+	--color-blue-on-bg-basic-emphasis-60-default: var(
+		--db-blue-on-bg-basic-emphasis-60-default
+	);
+	--color-blue-on-bg-basic-emphasis-60-hovered: var(
+		--db-blue-on-bg-basic-emphasis-60-hovered
+	);
+	--color-blue-on-bg-basic-emphasis-60-pressed: var(
+		--db-blue-on-bg-basic-emphasis-60-pressed
+	);
+	--color-blue-on-bg-basic-emphasis-50-default: var(
+		--db-blue-on-bg-basic-emphasis-50-default
+	);
+	--color-blue-on-bg-basic-emphasis-50-hovered: var(
+		--db-blue-on-bg-basic-emphasis-50-hovered
+	);
+	--color-blue-on-bg-basic-emphasis-50-pressed: var(
+		--db-blue-on-bg-basic-emphasis-50-pressed
+	);
+
+	/* On Inverted */
+	--color-blue-on-bg-inverted-default: var(--db-blue-on-bg-inverted-default);
+	--color-blue-on-bg-inverted-hovered: var(--db-blue-on-bg-inverted-hovered);
+	--color-blue-on-bg-inverted-pressed: var(--db-blue-on-bg-inverted-pressed);
+
+	/* On Origin */
+	--color-blue-on-origin-default: var(--db-blue-on-origin-default);
+	--color-blue-on-origin-hovered: var(--db-blue-on-origin-hovered);
+	--color-blue-on-origin-pressed: var(--db-blue-on-origin-pressed);
+	--color-blue-origin-default: var(--db-blue-origin-default);
+	--color-blue-origin-hovered: var(--db-blue-origin-hovered);
+	--color-blue-origin-pressed: var(--db-blue-origin-pressed);
+}

package/build/tailwind/theme/colors/brand.css

@@ -0,0 +1,160 @@
+/* The prefix for variables are predefined by Tailwind, stylelint would throw an error */
+/* stylelint-disable-next-line scss/at-rule-no-unknown */
+@theme {
+	/* stylelint-disable-next-line custom-property-pattern */
+	--color-*: initial; /* 	Color utilities like */
+
+	/* Basic-Level */
+	--color-brand-bg-basic-level-1-default: var(
+		--db-brand-bg-basic-level-1-default
+	);
+	--color-brand-bg-basic-level-1-hovered: var(
+		--db-brand-bg-basic-level-1-hovered
+	);
+	--color-brand-bg-basic-level-1-pressed: var(
+		--db-brand-bg-basic-level-1-pressed
+	);
+	--color-brand-bg-basic-level-2-default: var(
+		--db-brand-bg-basic-level-2-default
+	);
+	--color-brand-bg-basic-level-2-hovered: var(
+		--db-brand-bg-basic-level-2-hovered
+	);
+	--color-brand-bg-basic-level-2-pressed: var(
+		--db-brand-bg-basic-level-2-pressed
+	);
+	--color-brand-bg-basic-level-3-default: var(
+		--db-brand-bg-basic-level-3-default
+	);
+	--color-brand-bg-basic-level-3-hovered: var(
+		--db-brand-bg-basic-level-3-hovered
+	);
+	--color-brand-bg-basic-level-3-pressed: var(
+		--db-brand-bg-basic-level-3-pressed
+	);
+
+	/* Transparent */
+	--color-brand-bg-basic-transparent-full-default: var(
+		--db-brand-bg-basic-transparent-full-default
+	);
+	--color-brand-bg-basic-transparent-semi-default: var(
+		--db-brand-bg-basic-transparent-semi-default
+	);
+	--color-brand-bg-basic-transparent-full-hovered: var(
+		--db-brand-bg-basic-transparent-full-hovered
+	);
+	--color-brand-bg-basic-transparent-full-pressed: var(
+		--db-brand-bg-basic-transparent-full-pressed
+	);
+	--color-brand-bg-basic-transparent-semi-hovered: var(
+		--db-brand-bg-basic-transparent-semi-hovered
+	);
+	--color-brand-bg-basic-transparent-semi-pressed: var(
+		--db-brand-bg-basic-transparent-semi-pressed
+	);
+
+	/* Inverted */
+	--color-brand-bg-inverted-contrast-max-default: var(
+		--db-brand-bg-inverted-contrast-max-default
+	);
+	--color-brand-bg-inverted-contrast-max-hovered: var(
+		--db-brand-bg-inverted-contrast-max-hovered
+	);
+	--color-brand-bg-inverted-contrast-max-pressed: var(
+		--db-brand-bg-inverted-contrast-max-pressed
+	);
+	--color-brand-bg-inverted-contrast-high-default: var(
+		--db-brand-bg-inverted-contrast-high-default
+	);
+	--color-brand-bg-inverted-contrast-high-hovered: var(
+		--db-brand-bg-inverted-contrast-high-hovered
+	);
+	--color-brand-bg-inverted-contrast-high-pressed: var(
+		--db-brand-bg-inverted-contrast-high-pressed
+	);
+	--color-brand-bg-inverted-contrast-low-default: var(
+		--db-brand-bg-inverted-contrast-low-default
+	);
+	--color-brand-bg-inverted-contrast-low-hovered: var(
+		--db-brand-bg-inverted-contrast-low-hovered
+	);
+	--color-brand-bg-inverted-contrast-low-pressed: var(
+		--db-brand-bg-inverted-contrast-low-pressed
+	);
+
+	/* On Colors */
+
+	--color-brand-on-bg-basic-emphasis-100-default: var(
+		--db-brand-on-bg-basic-emphasis-100-default
+	);
+	--color-brand-on-bg-basic-emphasis-100-hovered: var(
+		--db-brand-on-bg-basic-emphasis-100-hovered
+	);
+	--color-brand-on-bg-basic-emphasis-100-pressed: var(
+		--db-brand-on-bg-basic-emphasis-100-pressed
+	);
+	--color-brand-on-bg-basic-emphasis-90-default: var(
+		--db-brand-on-bg-basic-emphasis-90-default
+	);
+	--color-brand-on-bg-basic-emphasis-90-hovered: var(
+		--db-brand-on-bg-basic-emphasis-90-hovered
+	);
+	--color-brand-on-bg-basic-emphasis-90-pressed: var(
+		--db-brand-on-bg-basic-emphasis-90-pressed
+	);
+	--color-brand-on-bg-basic-emphasis-80-default: var(
+		--db-brand-on-bg-basic-emphasis-80-default
+	);
+	--color-brand-on-bg-basic-emphasis-80-hovered: var(
+		--db-brand-on-bg-basic-emphasis-80-hovered
+	);
+	--color-brand-on-bg-basic-emphasis-80-pressed: var(
+		--db-brand-on-bg-basic-emphasis-80-pressed
+	);
+	--color-brand-on-bg-basic-emphasis-70-default: var(
+		--db-brand-on-bg-basic-emphasis-70-default
+	);
+	--color-brand-on-bg-basic-emphasis-70-hovered: var(
+		--db-brand-on-bg-basic-emphasis-70-hovered
+	);
+	--color-brand-on-bg-basic-emphasis-70-pressed: var(
+		--db-brand-on-bg-basic-emphasis-70-pressed
+	);
+	--color-brand-on-bg-basic-emphasis-60-default: var(
+		--db-brand-on-bg-basic-emphasis-60-default
+	);
+	--color-brand-on-bg-basic-emphasis-60-hovered: var(
+		--db-brand-on-bg-basic-emphasis-60-hovered
+	);
+	--color-brand-on-bg-basic-emphasis-60-pressed: var(
+		--db-brand-on-bg-basic-emphasis-60-pressed
+	);
+	--color-brand-on-bg-basic-emphasis-50-default: var(
+		--db-brand-on-bg-basic-emphasis-50-default
+	);
+	--color-brand-on-bg-basic-emphasis-50-hovered: var(
+		--db-brand-on-bg-basic-emphasis-50-hovered
+	);
+	--color-brand-on-bg-basic-emphasis-50-pressed: var(
+		--db-brand-on-bg-basic-emphasis-50-pressed
+	);
+
+	/* On Inverted */
+	--color-brand-on-bg-inverted-default: var(
+		--db-brand-on-bg-inverted-default
+	);
+	--color-brand-on-bg-inverted-hovered: var(
+		--db-brand-on-bg-inverted-hovered
+	);
+	--color-brand-on-bg-inverted-pressed: var(
+		--db-brand-on-bg-inverted-pressed
+	);
+
+	/* On Origin */
+	--color-brand-on-origin-default: var(--db-brand-on-origin-default);
+	--color-brand-on-origin-hovered: var(--db-brand-on-origin-hovered);
+	--color-brand-on-origin-pressed: var(--db-brand-on-origin-pressed);
+	--color-brand-origin-default: var(--db-brand-origin-default);
+	--color-brand-origin-hovered: var(--db-brand-origin-hovered);
+	--color-brand-origin-pressed: var(--db-brand-origin-pressed);
+}

package/build/tailwind/theme/colors/burgundy.css

@@ -0,0 +1,160 @@
+/* The prefix for variables are predefined by Tailwind, stylelint would throw an error */
+/* stylelint-disable-next-line scss/at-rule-no-unknown */
+@theme {
+	/* stylelint-disable-next-line custom-property-pattern */
+	--color-*: initial; /* 	Color utilities like */
+
+	/* Basic-Level */
+	--color-burgundy-bg-basic-level-1-default: var(
+		--db-burgundy-bg-basic-level-1-default
+	);
+	--color-burgundy-bg-basic-level-1-hovered: var(
+		--db-burgundy-bg-basic-level-1-hovered
+	);
+	--color-burgundy-bg-basic-level-1-pressed: var(
+		--db-burgundy-bg-basic-level-1-pressed
+	);
+	--color-burgundy-bg-basic-level-2-default: var(
+		--db-burgundy-bg-basic-level-2-default
+	);
+	--color-burgundy-bg-basic-level-2-hovered: var(
+		--db-burgundy-bg-basic-level-2-hovered
+	);
+	--color-burgundy-bg-basic-level-2-pressed: var(
+		--db-burgundy-bg-basic-level-2-pressed
+	);
+	--color-burgundy-bg-basic-level-3-default: var(
+		--db-burgundy-bg-basic-level-3-default
+	);
+	--color-burgundy-bg-basic-level-3-hovered: var(
+		--db-burgundy-bg-basic-level-3-hovered
+	);
+	--color-burgundy-bg-basic-level-3-pressed: var(
+		--db-burgundy-bg-basic-level-3-pressed
+	);
+
+	/* Transparent */
+	--color-burgundy-bg-basic-transparent-full-default: var(
+		--db-burgundy-bg-basic-transparent-full-default
+	);
+	--color-burgundy-bg-basic-transparent-semi-default: var(
+		--db-burgundy-bg-basic-transparent-semi-default
+	);
+	--color-burgundy-bg-basic-transparent-full-hovered: var(
+		--db-burgundy-bg-basic-transparent-full-hovered
+	);
+	--color-burgundy-bg-basic-transparent-full-pressed: var(
+		--db-burgundy-bg-basic-transparent-full-pressed
+	);
+	--color-burgundy-bg-basic-transparent-semi-hovered: var(
+		--db-burgundy-bg-basic-transparent-semi-hovered
+	);
+	--color-burgundy-bg-basic-transparent-semi-pressed: var(
+		--db-burgundy-bg-basic-transparent-semi-pressed
+	);
+
+	/* Inverted */
+	--color-burgundy-bg-inverted-contrast-max-default: var(
+		--db-burgundy-bg-inverted-contrast-max-default
+	);
+	--color-burgundy-bg-inverted-contrast-max-hovered: var(
+		--db-burgundy-bg-inverted-contrast-max-hovered
+	);
+	--color-burgundy-bg-inverted-contrast-max-pressed: var(
+		--db-burgundy-bg-inverted-contrast-max-pressed
+	);
+	--color-burgundy-bg-inverted-contrast-high-default: var(
+		--db-burgundy-bg-inverted-contrast-high-default
+	);
+	--color-burgundy-bg-inverted-contrast-high-hovered: var(
+		--db-burgundy-bg-inverted-contrast-high-hovered
+	);
+	--color-burgundy-bg-inverted-contrast-high-pressed: var(
+		--db-burgundy-bg-inverted-contrast-high-pressed
+	);
+	--color-burgundy-bg-inverted-contrast-low-default: var(
+		--db-burgundy-bg-inverted-contrast-low-default
+	);
+	--color-burgundy-bg-inverted-contrast-low-hovered: var(
+		--db-burgundy-bg-inverted-contrast-low-hovered
+	);
+	--color-burgundy-bg-inverted-contrast-low-pressed: var(
+		--db-burgundy-bg-inverted-contrast-low-pressed
+	);
+
+	/* On Colors */
+
+	--color-burgundy-on-bg-basic-emphasis-100-default: var(
+		--db-burgundy-on-bg-basic-emphasis-100-default
+	);
+	--color-burgundy-on-bg-basic-emphasis-100-hovered: var(
+		--db-burgundy-on-bg-basic-emphasis-100-hovered
+	);
+	--color-burgundy-on-bg-basic-emphasis-100-pressed: var(
+		--db-burgundy-on-bg-basic-emphasis-100-pressed
+	);
+	--color-burgundy-on-bg-basic-emphasis-90-default: var(
+		--db-burgundy-on-bg-basic-emphasis-90-default
+	);
+	--color-burgundy-on-bg-basic-emphasis-90-hovered: var(
+		--db-burgundy-on-bg-basic-emphasis-90-hovered
+	);
+	--color-burgundy-on-bg-basic-emphasis-90-pressed: var(
+		--db-burgundy-on-bg-basic-emphasis-90-pressed
+	);
+	--color-burgundy-on-bg-basic-emphasis-80-default: var(
+		--db-burgundy-on-bg-basic-emphasis-80-default
+	);
+	--color-burgundy-on-bg-basic-emphasis-80-hovered: var(
+		--db-burgundy-on-bg-basic-emphasis-80-hovered
+	);
+	--color-burgundy-on-bg-basic-emphasis-80-pressed: var(
+		--db-burgundy-on-bg-basic-emphasis-80-pressed
+	);
+	--color-burgundy-on-bg-basic-emphasis-70-default: var(
+		--db-burgundy-on-bg-basic-emphasis-70-default
+	);
+	--color-burgundy-on-bg-basic-emphasis-70-hovered: var(
+		--db-burgundy-on-bg-basic-emphasis-70-hovered
+	);
+	--color-burgundy-on-bg-basic-emphasis-70-pressed: var(
+		--db-burgundy-on-bg-basic-emphasis-70-pressed
+	);
+	--color-burgundy-on-bg-basic-emphasis-60-default: var(
+		--db-burgundy-on-bg-basic-emphasis-60-default
+	);
+	--color-burgundy-on-bg-basic-emphasis-60-hovered: var(
+		--db-burgundy-on-bg-basic-emphasis-60-hovered
+	);
+	--color-burgundy-on-bg-basic-emphasis-60-pressed: var(
+		--db-burgundy-on-bg-basic-emphasis-60-pressed
+	);
+	--color-burgundy-on-bg-basic-emphasis-50-default: var(
+		--db-burgundy-on-bg-basic-emphasis-50-default
+	);
+	--color-burgundy-on-bg-basic-emphasis-50-hovered: var(
+		--db-burgundy-on-bg-basic-emphasis-50-hovered
+	);
+	--color-burgundy-on-bg-basic-emphasis-50-pressed: var(
+		--db-burgundy-on-bg-basic-emphasis-50-pressed
+	);
+
+	/* On Inverted */
+	--color-burgundy-on-bg-inverted-default: var(
+		--db-burgundy-on-bg-inverted-default
+	);
+	--color-burgundy-on-bg-inverted-hovered: var(
+		--db-burgundy-on-bg-inverted-hovered
+	);
+	--color-burgundy-on-bg-inverted-pressed: var(
+		--db-burgundy-on-bg-inverted-pressed
+	);
+
+	/* On Origin */
+	--color-burgundy-on-origin-default: var(--db-burgundy-on-origin-default);
+	--color-burgundy-on-origin-hovered: var(--db-burgundy-on-origin-hovered);
+	--color-burgundy-on-origin-pressed: var(--db-burgundy-on-origin-pressed);
+	--color-burgundy-origin-default: var(--db-burgundy-origin-default);
+	--color-burgundy-origin-hovered: var(--db-burgundy-origin-hovered);
+	--color-burgundy-origin-pressed: var(--db-burgundy-origin-pressed);
+}

package/build/tailwind/theme/colors/critical.css

@@ -0,0 +1,160 @@
+/* The prefix for variables are predefined by Tailwind, stylelint would throw an error */
+/* stylelint-disable-next-line scss/at-rule-no-unknown */
+@theme {
+	/* stylelint-disable-next-line custom-property-pattern */
+	--color-*: initial; /* 	Color utilities like */
+
+	/* Basic-Level */
+	--color-critical-bg-basic-level-1-default: var(
+		--db-critical-bg-basic-level-1-default
+	);
+	--color-critical-bg-basic-level-1-hovered: var(
+		--db-critical-bg-basic-level-1-hovered
+	);
+	--color-critical-bg-basic-level-1-pressed: var(
+		--db-critical-bg-basic-level-1-pressed
+	);
+	--color-critical-bg-basic-level-2-default: var(
+		--db-critical-bg-basic-level-2-default
+	);
+	--color-critical-bg-basic-level-2-hovered: var(
+		--db-critical-bg-basic-level-2-hovered
+	);
+	--color-critical-bg-basic-level-2-pressed: var(
+		--db-critical-bg-basic-level-2-pressed
+	);
+	--color-critical-bg-basic-level-3-default: var(
+		--db-critical-bg-basic-level-3-default
+	);
+	--color-critical-bg-basic-level-3-hovered: var(
+		--db-critical-bg-basic-level-3-hovered
+	);
+	--color-critical-bg-basic-level-3-pressed: var(
+		--db-critical-bg-basic-level-3-pressed
+	);
+
+	/* Transparent */
+	--color-critical-bg-basic-transparent-full-default: var(
+		--db-critical-bg-basic-transparent-full-default
+	);
+	--color-critical-bg-basic-transparent-semi-default: var(
+		--db-critical-bg-basic-transparent-semi-default
+	);
+	--color-critical-bg-basic-transparent-full-hovered: var(
+		--db-critical-bg-basic-transparent-full-hovered
+	);
+	--color-critical-bg-basic-transparent-full-pressed: var(
+		--db-critical-bg-basic-transparent-full-pressed
+	);
+	--color-critical-bg-basic-transparent-semi-hovered: var(
+		--db-critical-bg-basic-transparent-semi-hovered
+	);
+	--color-critical-bg-basic-transparent-semi-pressed: var(
+		--db-critical-bg-basic-transparent-semi-pressed
+	);
+
+	/* Inverted */
+	--color-critical-bg-inverted-contrast-max-default: var(
+		--db-critical-bg-inverted-contrast-max-default
+	);
+	--color-critical-bg-inverted-contrast-max-hovered: var(
+		--db-critical-bg-inverted-contrast-max-hovered
+	);
+	--color-critical-bg-inverted-contrast-max-pressed: var(
+		--db-critical-bg-inverted-contrast-max-pressed
+	);
+	--color-critical-bg-inverted-contrast-high-default: var(
+		--db-critical-bg-inverted-contrast-high-default
+	);
+	--color-critical-bg-inverted-contrast-high-hovered: var(
+		--db-critical-bg-inverted-contrast-high-hovered
+	);
+	--color-critical-bg-inverted-contrast-high-pressed: var(
+		--db-critical-bg-inverted-contrast-high-pressed
+	);
+	--color-critical-bg-inverted-contrast-low-default: var(
+		--db-critical-bg-inverted-contrast-low-default
+	);
+	--color-critical-bg-inverted-contrast-low-hovered: var(
+		--db-critical-bg-inverted-contrast-low-hovered
+	);
+	--color-critical-bg-inverted-contrast-low-pressed: var(
+		--db-critical-bg-inverted-contrast-low-pressed
+	);
+
+	/* On Colors */
+
+	--color-critical-on-bg-basic-emphasis-100-default: var(
+		--db-critical-on-bg-basic-emphasis-100-default
+	);
+	--color-critical-on-bg-basic-emphasis-100-hovered: var(
+		--db-critical-on-bg-basic-emphasis-100-hovered
+	);
+	--color-critical-on-bg-basic-emphasis-100-pressed: var(
+		--db-critical-on-bg-basic-emphasis-100-pressed
+	);
+	--color-critical-on-bg-basic-emphasis-90-default: var(
+		--db-critical-on-bg-basic-emphasis-90-default
+	);
+	--color-critical-on-bg-basic-emphasis-90-hovered: var(
+		--db-critical-on-bg-basic-emphasis-90-hovered
+	);
+	--color-critical-on-bg-basic-emphasis-90-pressed: var(
+		--db-critical-on-bg-basic-emphasis-90-pressed
+	);
+	--color-critical-on-bg-basic-emphasis-80-default: var(
+		--db-critical-on-bg-basic-emphasis-80-default
+	);
+	--color-critical-on-bg-basic-emphasis-80-hovered: var(
+		--db-critical-on-bg-basic-emphasis-80-hovered
+	);
+	--color-critical-on-bg-basic-emphasis-80-pressed: var(
+		--db-critical-on-bg-basic-emphasis-80-pressed
+	);
+	--color-critical-on-bg-basic-emphasis-70-default: var(
+		--db-critical-on-bg-basic-emphasis-70-default
+	);
+	--color-critical-on-bg-basic-emphasis-70-hovered: var(
+		--db-critical-on-bg-basic-emphasis-70-hovered
+	);
+	--color-critical-on-bg-basic-emphasis-70-pressed: var(
+		--db-critical-on-bg-basic-emphasis-70-pressed
+	);
+	--color-critical-on-bg-basic-emphasis-60-default: var(
+		--db-critical-on-bg-basic-emphasis-60-default
+	);
+	--color-critical-on-bg-basic-emphasis-60-hovered: var(
+		--db-critical-on-bg-basic-emphasis-60-hovered
+	);
+	--color-critical-on-bg-basic-emphasis-60-pressed: var(
+		--db-critical-on-bg-basic-emphasis-60-pressed
+	);
+	--color-critical-on-bg-basic-emphasis-50-default: var(
+		--db-critical-on-bg-basic-emphasis-50-default
+	);
+	--color-critical-on-bg-basic-emphasis-50-hovered: var(
+		--db-critical-on-bg-basic-emphasis-50-hovered
+	);
+	--color-critical-on-bg-basic-emphasis-50-pressed: var(
+		--db-critical-on-bg-basic-emphasis-50-pressed
+	);
+
+	/* On Inverted */
+	--color-critical-on-bg-inverted-default: var(
+		--db-critical-on-bg-inverted-default
+	);
+	--color-critical-on-bg-inverted-hovered: var(
+		--db-critical-on-bg-inverted-hovered
+	);
+	--color-critical-on-bg-inverted-pressed: var(
+		--db-critical-on-bg-inverted-pressed
+	);
+
+	/* On Origin */
+	--color-critical-on-origin-default: var(--db-critical-on-origin-default);
+	--color-critical-on-origin-hovered: var(--db-critical-on-origin-hovered);
+	--color-critical-on-origin-pressed: var(--db-critical-on-origin-pressed);
+	--color-critical-origin-default: var(--db-critical-origin-default);
+	--color-critical-origin-hovered: var(--db-critical-origin-hovered);
+	--color-critical-origin-pressed: var(--db-critical-origin-pressed);
+}