@db-ux/core-foundations 1.0.0-test-13b991d

package/build/styles/colors/classes/all.scss

@@ -0,0 +1,18 @@
+@use "../index";
+@use "get-class";
+
+@each $variant in index.$variants {
+	@include get-class.init($variant);
+}
+
+@each $additional-variant in index.$additional-variants {
+	@include get-class.init($additional-variant);
+}
+
+@each $background-color in index.$background-colors {
+	@include get-class.init-background-colors($background-color);
+}
+
+@each $on-background-color in index.$on-background-colors {
+	@include get-class.init-on-background-colors($on-background-color);
+}

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

@@ -0,0 +1,151 @@
+/* Variants for adaptive components like input, select, notification, ... */
+[data-color=blue],
+.db-color-blue {
+  --db-adaptive-bg-basic-level-1-default: var(
+  	--db-blue-bg-basic-level-1-default
+  );
+  --db-adaptive-bg-basic-level-1-hovered: var(
+  	--db-blue-bg-basic-level-1-hovered
+  );
+  --db-adaptive-bg-basic-level-1-pressed: var(
+  	--db-blue-bg-basic-level-1-pressed
+  );
+  --db-adaptive-bg-basic-level-2-default: var(
+  	--db-blue-bg-basic-level-2-default
+  );
+  --db-adaptive-bg-basic-level-2-hovered: var(
+  	--db-blue-bg-basic-level-2-hovered
+  );
+  --db-adaptive-bg-basic-level-2-pressed: var(
+  	--db-blue-bg-basic-level-2-pressed
+  );
+  --db-adaptive-bg-basic-level-3-default: var(
+  	--db-blue-bg-basic-level-3-default
+  );
+  --db-adaptive-bg-basic-level-3-hovered: var(
+  	--db-blue-bg-basic-level-3-hovered
+  );
+  --db-adaptive-bg-basic-level-3-pressed: var(
+  	--db-blue-bg-basic-level-3-pressed
+  );
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-blue-bg-basic-transparent-full-default
+  );
+  --db-adaptive-bg-basic-transparent-semi-default: var(
+  	--db-blue-bg-basic-transparent-semi-default
+  );
+  --db-adaptive-bg-basic-transparent-hovered: var(
+  	--db-blue-bg-basic-transparent-hovered
+  );
+  --db-adaptive-bg-basic-transparent-pressed: var(
+  	--db-blue-bg-basic-transparent-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-default: var(
+  	--db-blue-on-bg-basic-emphasis-100-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
+  	--db-blue-on-bg-basic-emphasis-100-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
+  	--db-blue-on-bg-basic-emphasis-100-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-default: var(
+  	--db-blue-on-bg-basic-emphasis-90-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
+  	--db-blue-on-bg-basic-emphasis-90-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
+  	--db-blue-on-bg-basic-emphasis-90-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-default: var(
+  	--db-blue-on-bg-basic-emphasis-80-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
+  	--db-blue-on-bg-basic-emphasis-80-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
+  	--db-blue-on-bg-basic-emphasis-80-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-default: var(
+  	--db-blue-on-bg-basic-emphasis-70-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
+  	--db-blue-on-bg-basic-emphasis-70-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
+  	--db-blue-on-bg-basic-emphasis-70-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-default: var(
+  	--db-blue-on-bg-basic-emphasis-60-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-hovered: var(
+  	--db-blue-on-bg-basic-emphasis-60-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-pressed: var(
+  	--db-blue-on-bg-basic-emphasis-60-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-default: var(
+  	--db-blue-on-bg-basic-emphasis-50-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-hovered: var(
+  	--db-blue-on-bg-basic-emphasis-50-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-pressed: var(
+  	--db-blue-on-bg-basic-emphasis-50-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-max-default: var(
+  	--db-blue-bg-inverted-contrast-max-default
+  );
+  --db-adaptive-bg-inverted-contrast-max-hovered: var(
+  	--db-blue-bg-inverted-contrast-max-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-max-pressed: var(
+  	--db-blue-bg-inverted-contrast-max-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-high-default: var(
+  	--db-blue-bg-inverted-contrast-high-default
+  );
+  --db-adaptive-bg-inverted-contrast-high-hovered: var(
+  	--db-blue-bg-inverted-contrast-high-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-high-pressed: var(
+  	--db-blue-bg-inverted-contrast-high-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-low-default: var(
+  	--db-blue-bg-inverted-contrast-low-default
+  );
+  --db-adaptive-bg-inverted-contrast-low-hovered: var(
+  	--db-blue-bg-inverted-contrast-low-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-low-pressed: var(
+  	--db-blue-bg-inverted-contrast-low-pressed
+  );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-blue-on-bg-inverted-default
+  );
+  --db-adaptive-on-bg-inverted-hovered: var(
+  	--db-blue-on-bg-inverted-hovered
+  );
+  --db-adaptive-on-bg-inverted-pressed: var(
+  	--db-blue-on-bg-inverted-pressed
+  );
+  --db-adaptive-origin-default: var(--db-blue-origin-default);
+  --db-adaptive-origin-hovered: var(--db-blue-origin-hovered);
+  --db-adaptive-origin-pressed: var(--db-blue-origin-pressed);
+  --db-adaptive-on-origin-default: var(
+  	--db-blue-on-origin-default
+  );
+  --db-adaptive-on-origin-hovered: var(
+  	--db-blue-on-origin-hovered
+  );
+  --db-adaptive-on-origin-pressed: var(
+  	--db-blue-on-origin-pressed
+  );
+}
+
+[data-color=blue],
+.db-color-blue {
+  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/blue.scss

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

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

@@ -0,0 +1,151 @@
+/* Variants for adaptive components like input, select, notification, ... */
+[data-color=brand],
+.db-color-brand {
+  --db-adaptive-bg-basic-level-1-default: var(
+  	--db-brand-bg-basic-level-1-default
+  );
+  --db-adaptive-bg-basic-level-1-hovered: var(
+  	--db-brand-bg-basic-level-1-hovered
+  );
+  --db-adaptive-bg-basic-level-1-pressed: var(
+  	--db-brand-bg-basic-level-1-pressed
+  );
+  --db-adaptive-bg-basic-level-2-default: var(
+  	--db-brand-bg-basic-level-2-default
+  );
+  --db-adaptive-bg-basic-level-2-hovered: var(
+  	--db-brand-bg-basic-level-2-hovered
+  );
+  --db-adaptive-bg-basic-level-2-pressed: var(
+  	--db-brand-bg-basic-level-2-pressed
+  );
+  --db-adaptive-bg-basic-level-3-default: var(
+  	--db-brand-bg-basic-level-3-default
+  );
+  --db-adaptive-bg-basic-level-3-hovered: var(
+  	--db-brand-bg-basic-level-3-hovered
+  );
+  --db-adaptive-bg-basic-level-3-pressed: var(
+  	--db-brand-bg-basic-level-3-pressed
+  );
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-brand-bg-basic-transparent-full-default
+  );
+  --db-adaptive-bg-basic-transparent-semi-default: var(
+  	--db-brand-bg-basic-transparent-semi-default
+  );
+  --db-adaptive-bg-basic-transparent-hovered: var(
+  	--db-brand-bg-basic-transparent-hovered
+  );
+  --db-adaptive-bg-basic-transparent-pressed: var(
+  	--db-brand-bg-basic-transparent-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-default: var(
+  	--db-brand-on-bg-basic-emphasis-100-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
+  	--db-brand-on-bg-basic-emphasis-100-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
+  	--db-brand-on-bg-basic-emphasis-100-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-default: var(
+  	--db-brand-on-bg-basic-emphasis-90-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
+  	--db-brand-on-bg-basic-emphasis-90-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
+  	--db-brand-on-bg-basic-emphasis-90-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-default: var(
+  	--db-brand-on-bg-basic-emphasis-80-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
+  	--db-brand-on-bg-basic-emphasis-80-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
+  	--db-brand-on-bg-basic-emphasis-80-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-default: var(
+  	--db-brand-on-bg-basic-emphasis-70-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
+  	--db-brand-on-bg-basic-emphasis-70-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
+  	--db-brand-on-bg-basic-emphasis-70-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-default: var(
+  	--db-brand-on-bg-basic-emphasis-60-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-hovered: var(
+  	--db-brand-on-bg-basic-emphasis-60-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-pressed: var(
+  	--db-brand-on-bg-basic-emphasis-60-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-default: var(
+  	--db-brand-on-bg-basic-emphasis-50-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-hovered: var(
+  	--db-brand-on-bg-basic-emphasis-50-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-pressed: var(
+  	--db-brand-on-bg-basic-emphasis-50-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-max-default: var(
+  	--db-brand-bg-inverted-contrast-max-default
+  );
+  --db-adaptive-bg-inverted-contrast-max-hovered: var(
+  	--db-brand-bg-inverted-contrast-max-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-max-pressed: var(
+  	--db-brand-bg-inverted-contrast-max-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-high-default: var(
+  	--db-brand-bg-inverted-contrast-high-default
+  );
+  --db-adaptive-bg-inverted-contrast-high-hovered: var(
+  	--db-brand-bg-inverted-contrast-high-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-high-pressed: var(
+  	--db-brand-bg-inverted-contrast-high-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-low-default: var(
+  	--db-brand-bg-inverted-contrast-low-default
+  );
+  --db-adaptive-bg-inverted-contrast-low-hovered: var(
+  	--db-brand-bg-inverted-contrast-low-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-low-pressed: var(
+  	--db-brand-bg-inverted-contrast-low-pressed
+  );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-brand-on-bg-inverted-default
+  );
+  --db-adaptive-on-bg-inverted-hovered: var(
+  	--db-brand-on-bg-inverted-hovered
+  );
+  --db-adaptive-on-bg-inverted-pressed: var(
+  	--db-brand-on-bg-inverted-pressed
+  );
+  --db-adaptive-origin-default: var(--db-brand-origin-default);
+  --db-adaptive-origin-hovered: var(--db-brand-origin-hovered);
+  --db-adaptive-origin-pressed: var(--db-brand-origin-pressed);
+  --db-adaptive-on-origin-default: var(
+  	--db-brand-on-origin-default
+  );
+  --db-adaptive-on-origin-hovered: var(
+  	--db-brand-on-origin-hovered
+  );
+  --db-adaptive-on-origin-pressed: var(
+  	--db-brand-on-origin-pressed
+  );
+}
+
+[data-color=brand],
+.db-color-brand {
+  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/brand.scss

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

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

@@ -0,0 +1,151 @@
+/* Variants for adaptive components like input, select, notification, ... */
+[data-color=critical],
+.db-color-critical {
+  --db-adaptive-bg-basic-level-1-default: var(
+  	--db-critical-bg-basic-level-1-default
+  );
+  --db-adaptive-bg-basic-level-1-hovered: var(
+  	--db-critical-bg-basic-level-1-hovered
+  );
+  --db-adaptive-bg-basic-level-1-pressed: var(
+  	--db-critical-bg-basic-level-1-pressed
+  );
+  --db-adaptive-bg-basic-level-2-default: var(
+  	--db-critical-bg-basic-level-2-default
+  );
+  --db-adaptive-bg-basic-level-2-hovered: var(
+  	--db-critical-bg-basic-level-2-hovered
+  );
+  --db-adaptive-bg-basic-level-2-pressed: var(
+  	--db-critical-bg-basic-level-2-pressed
+  );
+  --db-adaptive-bg-basic-level-3-default: var(
+  	--db-critical-bg-basic-level-3-default
+  );
+  --db-adaptive-bg-basic-level-3-hovered: var(
+  	--db-critical-bg-basic-level-3-hovered
+  );
+  --db-adaptive-bg-basic-level-3-pressed: var(
+  	--db-critical-bg-basic-level-3-pressed
+  );
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-critical-bg-basic-transparent-full-default
+  );
+  --db-adaptive-bg-basic-transparent-semi-default: var(
+  	--db-critical-bg-basic-transparent-semi-default
+  );
+  --db-adaptive-bg-basic-transparent-hovered: var(
+  	--db-critical-bg-basic-transparent-hovered
+  );
+  --db-adaptive-bg-basic-transparent-pressed: var(
+  	--db-critical-bg-basic-transparent-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-default: var(
+  	--db-critical-on-bg-basic-emphasis-100-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
+  	--db-critical-on-bg-basic-emphasis-100-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
+  	--db-critical-on-bg-basic-emphasis-100-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-default: var(
+  	--db-critical-on-bg-basic-emphasis-90-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
+  	--db-critical-on-bg-basic-emphasis-90-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
+  	--db-critical-on-bg-basic-emphasis-90-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-default: var(
+  	--db-critical-on-bg-basic-emphasis-80-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
+  	--db-critical-on-bg-basic-emphasis-80-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
+  	--db-critical-on-bg-basic-emphasis-80-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-default: var(
+  	--db-critical-on-bg-basic-emphasis-70-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
+  	--db-critical-on-bg-basic-emphasis-70-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
+  	--db-critical-on-bg-basic-emphasis-70-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-default: var(
+  	--db-critical-on-bg-basic-emphasis-60-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-hovered: var(
+  	--db-critical-on-bg-basic-emphasis-60-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-pressed: var(
+  	--db-critical-on-bg-basic-emphasis-60-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-default: var(
+  	--db-critical-on-bg-basic-emphasis-50-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-hovered: var(
+  	--db-critical-on-bg-basic-emphasis-50-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-pressed: var(
+  	--db-critical-on-bg-basic-emphasis-50-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-max-default: var(
+  	--db-critical-bg-inverted-contrast-max-default
+  );
+  --db-adaptive-bg-inverted-contrast-max-hovered: var(
+  	--db-critical-bg-inverted-contrast-max-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-max-pressed: var(
+  	--db-critical-bg-inverted-contrast-max-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-high-default: var(
+  	--db-critical-bg-inverted-contrast-high-default
+  );
+  --db-adaptive-bg-inverted-contrast-high-hovered: var(
+  	--db-critical-bg-inverted-contrast-high-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-high-pressed: var(
+  	--db-critical-bg-inverted-contrast-high-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-low-default: var(
+  	--db-critical-bg-inverted-contrast-low-default
+  );
+  --db-adaptive-bg-inverted-contrast-low-hovered: var(
+  	--db-critical-bg-inverted-contrast-low-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-low-pressed: var(
+  	--db-critical-bg-inverted-contrast-low-pressed
+  );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-critical-on-bg-inverted-default
+  );
+  --db-adaptive-on-bg-inverted-hovered: var(
+  	--db-critical-on-bg-inverted-hovered
+  );
+  --db-adaptive-on-bg-inverted-pressed: var(
+  	--db-critical-on-bg-inverted-pressed
+  );
+  --db-adaptive-origin-default: var(--db-critical-origin-default);
+  --db-adaptive-origin-hovered: var(--db-critical-origin-hovered);
+  --db-adaptive-origin-pressed: var(--db-critical-origin-pressed);
+  --db-adaptive-on-origin-default: var(
+  	--db-critical-on-origin-default
+  );
+  --db-adaptive-on-origin-hovered: var(
+  	--db-critical-on-origin-hovered
+  );
+  --db-adaptive-on-origin-pressed: var(
+  	--db-critical-on-origin-pressed
+  );
+}
+
+[data-color=critical],
+.db-color-critical {
+  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/critical.scss

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

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

@@ -0,0 +1,151 @@
+/* Variants for adaptive components like input, select, notification, ... */
+[data-color=cyan],
+.db-color-cyan {
+  --db-adaptive-bg-basic-level-1-default: var(
+  	--db-cyan-bg-basic-level-1-default
+  );
+  --db-adaptive-bg-basic-level-1-hovered: var(
+  	--db-cyan-bg-basic-level-1-hovered
+  );
+  --db-adaptive-bg-basic-level-1-pressed: var(
+  	--db-cyan-bg-basic-level-1-pressed
+  );
+  --db-adaptive-bg-basic-level-2-default: var(
+  	--db-cyan-bg-basic-level-2-default
+  );
+  --db-adaptive-bg-basic-level-2-hovered: var(
+  	--db-cyan-bg-basic-level-2-hovered
+  );
+  --db-adaptive-bg-basic-level-2-pressed: var(
+  	--db-cyan-bg-basic-level-2-pressed
+  );
+  --db-adaptive-bg-basic-level-3-default: var(
+  	--db-cyan-bg-basic-level-3-default
+  );
+  --db-adaptive-bg-basic-level-3-hovered: var(
+  	--db-cyan-bg-basic-level-3-hovered
+  );
+  --db-adaptive-bg-basic-level-3-pressed: var(
+  	--db-cyan-bg-basic-level-3-pressed
+  );
+  --db-adaptive-bg-basic-transparent-full-default: var(
+  	--db-cyan-bg-basic-transparent-full-default
+  );
+  --db-adaptive-bg-basic-transparent-semi-default: var(
+  	--db-cyan-bg-basic-transparent-semi-default
+  );
+  --db-adaptive-bg-basic-transparent-hovered: var(
+  	--db-cyan-bg-basic-transparent-hovered
+  );
+  --db-adaptive-bg-basic-transparent-pressed: var(
+  	--db-cyan-bg-basic-transparent-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-default: var(
+  	--db-cyan-on-bg-basic-emphasis-100-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
+  	--db-cyan-on-bg-basic-emphasis-100-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
+  	--db-cyan-on-bg-basic-emphasis-100-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-default: var(
+  	--db-cyan-on-bg-basic-emphasis-90-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
+  	--db-cyan-on-bg-basic-emphasis-90-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
+  	--db-cyan-on-bg-basic-emphasis-90-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-default: var(
+  	--db-cyan-on-bg-basic-emphasis-80-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
+  	--db-cyan-on-bg-basic-emphasis-80-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
+  	--db-cyan-on-bg-basic-emphasis-80-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-default: var(
+  	--db-cyan-on-bg-basic-emphasis-70-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
+  	--db-cyan-on-bg-basic-emphasis-70-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
+  	--db-cyan-on-bg-basic-emphasis-70-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-default: var(
+  	--db-cyan-on-bg-basic-emphasis-60-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-hovered: var(
+  	--db-cyan-on-bg-basic-emphasis-60-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-60-pressed: var(
+  	--db-cyan-on-bg-basic-emphasis-60-pressed
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-default: var(
+  	--db-cyan-on-bg-basic-emphasis-50-default
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-hovered: var(
+  	--db-cyan-on-bg-basic-emphasis-50-hovered
+  );
+  --db-adaptive-on-bg-basic-emphasis-50-pressed: var(
+  	--db-cyan-on-bg-basic-emphasis-50-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-max-default: var(
+  	--db-cyan-bg-inverted-contrast-max-default
+  );
+  --db-adaptive-bg-inverted-contrast-max-hovered: var(
+  	--db-cyan-bg-inverted-contrast-max-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-max-pressed: var(
+  	--db-cyan-bg-inverted-contrast-max-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-high-default: var(
+  	--db-cyan-bg-inverted-contrast-high-default
+  );
+  --db-adaptive-bg-inverted-contrast-high-hovered: var(
+  	--db-cyan-bg-inverted-contrast-high-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-high-pressed: var(
+  	--db-cyan-bg-inverted-contrast-high-pressed
+  );
+  --db-adaptive-bg-inverted-contrast-low-default: var(
+  	--db-cyan-bg-inverted-contrast-low-default
+  );
+  --db-adaptive-bg-inverted-contrast-low-hovered: var(
+  	--db-cyan-bg-inverted-contrast-low-hovered
+  );
+  --db-adaptive-bg-inverted-contrast-low-pressed: var(
+  	--db-cyan-bg-inverted-contrast-low-pressed
+  );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-cyan-on-bg-inverted-default
+  );
+  --db-adaptive-on-bg-inverted-hovered: var(
+  	--db-cyan-on-bg-inverted-hovered
+  );
+  --db-adaptive-on-bg-inverted-pressed: var(
+  	--db-cyan-on-bg-inverted-pressed
+  );
+  --db-adaptive-origin-default: var(--db-cyan-origin-default);
+  --db-adaptive-origin-hovered: var(--db-cyan-origin-hovered);
+  --db-adaptive-origin-pressed: var(--db-cyan-origin-pressed);
+  --db-adaptive-on-origin-default: var(
+  	--db-cyan-on-origin-default
+  );
+  --db-adaptive-on-origin-hovered: var(
+  	--db-cyan-on-origin-hovered
+  );
+  --db-adaptive-on-origin-pressed: var(
+  	--db-cyan-on-origin-pressed
+  );
+}
+
+[data-color=cyan],
+.db-color-cyan {
+  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/cyan.scss

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