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

package/build/styles/colors/_index.scss

@@ -0,0 +1,5 @@
+@forward "variables";
+@forward "variables.speaking-colors";
+@forward "variables.additional";
+@forward "variables.additional-speaking-colors";
+@forward "placeholder";

package/build/styles/colors/_placeholder.scss

@@ -0,0 +1,203 @@
+@use "sass:string";
+@use "variables";
+@use "../helpers/functions";
+@use "variables.additional" as additional-colors;
+
+@mixin set-current-colors($bg, $on, $hovered: false, $pressed: false) {
+	background-color: #{$bg};
+	color: #{$on};
+
+	&::before,
+	&::after {
+		--db-icon-color: #{$on};
+	}
+
+	@if ($hovered) {
+		@include functions.hover {
+			background-color: #{$hovered};
+		}
+	}
+
+	@if ($pressed) {
+		@include functions.active {
+			background-color: #{$pressed};
+		}
+	}
+}
+
+@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
+		);
+	}
+
+	@each $bg in variables.$background-colors {
+		%db-#{$variant}-bg-#{$bg} {
+			@extend %db-#{$variant}-variables;
+
+			@include set-current-colors(
+				var(--db-#{$variant}-bg-#{$bg}-default),
+				var(--db-#{$variant}-on-bg-basic-emphasis-100-default)
+			);
+		}
+	}
+}
+
+@each $variant in variables.$variants {
+	@include generate-color-placeholder($variant);
+}
+
+@each $variant in additional-colors.$additional-variants {
+	@include generate-color-placeholder($variant);
+}

package/build/styles/colors/_variables.additional-palette.scss

@@ -0,0 +1,285 @@
+/* Palette for additional colors */
+
+/* Note: In general you don't need this file. Use this only if you really know what you do! */
+
+// yellow
+$db-yellow-0: var(--db-yellow-0);
+$db-yellow-1: var(--db-yellow-1);
+$db-yellow-2: var(--db-yellow-2);
+$db-yellow-3: var(--db-yellow-3);
+$db-yellow-4: var(--db-yellow-4);
+$db-yellow-5: var(--db-yellow-5);
+$db-yellow-6: var(--db-yellow-6);
+$db-yellow-7: var(--db-yellow-7);
+$db-yellow-8: var(--db-yellow-8);
+$db-yellow-9: var(--db-yellow-9);
+$db-yellow-10: var(--db-yellow-10);
+$db-yellow-11: var(--db-yellow-11);
+$db-yellow-12: var(--db-yellow-12);
+$db-yellow-13: var(--db-yellow-13);
+$db-yellow-14: var(--db-yellow-14);
+$db-yellow-origin: var(--db-yellow-origin);
+$db-yellow-origin-light-default: var(--db-yellow-origin-light-default);
+$db-yellow-origin-light-hovered: var(--db-yellow-origin-light-hovered);
+$db-yellow-origin-light-pressed: var(--db-yellow-origin-light-pressed);
+$db-yellow-on-origin-light-default: var(--db-yellow-on-origin-light-default);
+$db-yellow-on-origin-light-hovered: var(--db-yellow-on-origin-light-hovered);
+$db-yellow-on-origin-light-pressed: var(--db-yellow-on-origin-light-pressed);
+$db-yellow-origin-dark-default: var(--db-yellow-origin-dark-default);
+$db-yellow-origin-dark-hovered: var(--db-yellow-origin-dark-hovered);
+$db-yellow-origin-dark-pressed: var(--db-yellow-origin-dark-pressed);
+$db-yellow-on-origin-dark-default: var(--db-yellow-on-origin-dark-default);
+$db-yellow-on-origin-dark-hovered: var(--db-yellow-on-origin-dark-hovered);
+$db-yellow-on-origin-dark-pressed: var(--db-yellow-on-origin-dark-pressed);
+
+// orange
+$db-orange-0: var(--db-orange-0);
+$db-orange-1: var(--db-orange-1);
+$db-orange-2: var(--db-orange-2);
+$db-orange-3: var(--db-orange-3);
+$db-orange-4: var(--db-orange-4);
+$db-orange-5: var(--db-orange-5);
+$db-orange-6: var(--db-orange-6);
+$db-orange-7: var(--db-orange-7);
+$db-orange-8: var(--db-orange-8);
+$db-orange-9: var(--db-orange-9);
+$db-orange-10: var(--db-orange-10);
+$db-orange-11: var(--db-orange-11);
+$db-orange-12: var(--db-orange-12);
+$db-orange-13: var(--db-orange-13);
+$db-orange-14: var(--db-orange-14);
+$db-orange-origin: var(--db-orange-origin);
+$db-orange-origin-light-default: var(--db-orange-origin-light-default);
+$db-orange-origin-light-hovered: var(--db-orange-origin-light-hovered);
+$db-orange-origin-light-pressed: var(--db-orange-origin-light-pressed);
+$db-orange-on-origin-light-default: var(--db-orange-on-origin-light-default);
+$db-orange-on-origin-light-hovered: var(--db-orange-on-origin-light-hovered);
+$db-orange-on-origin-light-pressed: var(--db-orange-on-origin-light-pressed);
+$db-orange-origin-dark-default: var(--db-orange-origin-dark-default);
+$db-orange-origin-dark-hovered: var(--db-orange-origin-dark-hovered);
+$db-orange-origin-dark-pressed: var(--db-orange-origin-dark-pressed);
+$db-orange-on-origin-dark-default: var(--db-orange-on-origin-dark-default);
+$db-orange-on-origin-dark-hovered: var(--db-orange-on-origin-dark-hovered);
+$db-orange-on-origin-dark-pressed: var(--db-orange-on-origin-dark-pressed);
+
+// red
+$db-red-0: var(--db-red-0);
+$db-red-1: var(--db-red-1);
+$db-red-2: var(--db-red-2);
+$db-red-3: var(--db-red-3);
+$db-red-4: var(--db-red-4);
+$db-red-5: var(--db-red-5);
+$db-red-6: var(--db-red-6);
+$db-red-7: var(--db-red-7);
+$db-red-8: var(--db-red-8);
+$db-red-9: var(--db-red-9);
+$db-red-10: var(--db-red-10);
+$db-red-11: var(--db-red-11);
+$db-red-12: var(--db-red-12);
+$db-red-13: var(--db-red-13);
+$db-red-14: var(--db-red-14);
+$db-red-origin: var(--db-red-origin);
+$db-red-origin-light-default: var(--db-red-origin-light-default);
+$db-red-origin-light-hovered: var(--db-red-origin-light-hovered);
+$db-red-origin-light-pressed: var(--db-red-origin-light-pressed);
+$db-red-on-origin-light-default: var(--db-red-on-origin-light-default);
+$db-red-on-origin-light-hovered: var(--db-red-on-origin-light-hovered);
+$db-red-on-origin-light-pressed: var(--db-red-on-origin-light-pressed);
+$db-red-origin-dark-default: var(--db-red-origin-dark-default);
+$db-red-origin-dark-hovered: var(--db-red-origin-dark-hovered);
+$db-red-origin-dark-pressed: var(--db-red-origin-dark-pressed);
+$db-red-on-origin-dark-default: var(--db-red-on-origin-dark-default);
+$db-red-on-origin-dark-hovered: var(--db-red-on-origin-dark-hovered);
+$db-red-on-origin-dark-pressed: var(--db-red-on-origin-dark-pressed);
+
+// pink
+$db-pink-0: var(--db-pink-0);
+$db-pink-1: var(--db-pink-1);
+$db-pink-2: var(--db-pink-2);
+$db-pink-3: var(--db-pink-3);
+$db-pink-4: var(--db-pink-4);
+$db-pink-5: var(--db-pink-5);
+$db-pink-6: var(--db-pink-6);
+$db-pink-7: var(--db-pink-7);
+$db-pink-8: var(--db-pink-8);
+$db-pink-9: var(--db-pink-9);
+$db-pink-10: var(--db-pink-10);
+$db-pink-11: var(--db-pink-11);
+$db-pink-12: var(--db-pink-12);
+$db-pink-13: var(--db-pink-13);
+$db-pink-14: var(--db-pink-14);
+$db-pink-origin: var(--db-pink-origin);
+$db-pink-origin-light-default: var(--db-pink-origin-light-default);
+$db-pink-origin-light-hovered: var(--db-pink-origin-light-hovered);
+$db-pink-origin-light-pressed: var(--db-pink-origin-light-pressed);
+$db-pink-on-origin-light-default: var(--db-pink-on-origin-light-default);
+$db-pink-on-origin-light-hovered: var(--db-pink-on-origin-light-hovered);
+$db-pink-on-origin-light-pressed: var(--db-pink-on-origin-light-pressed);
+$db-pink-origin-dark-default: var(--db-pink-origin-dark-default);
+$db-pink-origin-dark-hovered: var(--db-pink-origin-dark-hovered);
+$db-pink-origin-dark-pressed: var(--db-pink-origin-dark-pressed);
+$db-pink-on-origin-dark-default: var(--db-pink-on-origin-dark-default);
+$db-pink-on-origin-dark-hovered: var(--db-pink-on-origin-dark-hovered);
+$db-pink-on-origin-dark-pressed: var(--db-pink-on-origin-dark-pressed);
+
+// violet
+$db-violet-0: var(--db-violet-0);
+$db-violet-1: var(--db-violet-1);
+$db-violet-2: var(--db-violet-2);
+$db-violet-3: var(--db-violet-3);
+$db-violet-4: var(--db-violet-4);
+$db-violet-5: var(--db-violet-5);
+$db-violet-6: var(--db-violet-6);
+$db-violet-7: var(--db-violet-7);
+$db-violet-8: var(--db-violet-8);
+$db-violet-9: var(--db-violet-9);
+$db-violet-10: var(--db-violet-10);
+$db-violet-11: var(--db-violet-11);
+$db-violet-12: var(--db-violet-12);
+$db-violet-13: var(--db-violet-13);
+$db-violet-14: var(--db-violet-14);
+$db-violet-origin: var(--db-violet-origin);
+$db-violet-origin-light-default: var(--db-violet-origin-light-default);
+$db-violet-origin-light-hovered: var(--db-violet-origin-light-hovered);
+$db-violet-origin-light-pressed: var(--db-violet-origin-light-pressed);
+$db-violet-on-origin-light-default: var(--db-violet-on-origin-light-default);
+$db-violet-on-origin-light-hovered: var(--db-violet-on-origin-light-hovered);
+$db-violet-on-origin-light-pressed: var(--db-violet-on-origin-light-pressed);
+$db-violet-origin-dark-default: var(--db-violet-origin-dark-default);
+$db-violet-origin-dark-hovered: var(--db-violet-origin-dark-hovered);
+$db-violet-origin-dark-pressed: var(--db-violet-origin-dark-pressed);
+$db-violet-on-origin-dark-default: var(--db-violet-on-origin-dark-default);
+$db-violet-on-origin-dark-hovered: var(--db-violet-on-origin-dark-hovered);
+$db-violet-on-origin-dark-pressed: var(--db-violet-on-origin-dark-pressed);
+
+// blue
+$db-blue-0: var(--db-blue-0);
+$db-blue-1: var(--db-blue-1);
+$db-blue-2: var(--db-blue-2);
+$db-blue-3: var(--db-blue-3);
+$db-blue-4: var(--db-blue-4);
+$db-blue-5: var(--db-blue-5);
+$db-blue-6: var(--db-blue-6);
+$db-blue-7: var(--db-blue-7);
+$db-blue-8: var(--db-blue-8);
+$db-blue-9: var(--db-blue-9);
+$db-blue-10: var(--db-blue-10);
+$db-blue-11: var(--db-blue-11);
+$db-blue-12: var(--db-blue-12);
+$db-blue-13: var(--db-blue-13);
+$db-blue-14: var(--db-blue-14);
+$db-blue-origin: var(--db-blue-origin);
+$db-blue-origin-light-default: var(--db-blue-origin-light-default);
+$db-blue-origin-light-hovered: var(--db-blue-origin-light-hovered);
+$db-blue-origin-light-pressed: var(--db-blue-origin-light-pressed);
+$db-blue-on-origin-light-default: var(--db-blue-on-origin-light-default);
+$db-blue-on-origin-light-hovered: var(--db-blue-on-origin-light-hovered);
+$db-blue-on-origin-light-pressed: var(--db-blue-on-origin-light-pressed);
+$db-blue-origin-dark-default: var(--db-blue-origin-dark-default);
+$db-blue-origin-dark-hovered: var(--db-blue-origin-dark-hovered);
+$db-blue-origin-dark-pressed: var(--db-blue-origin-dark-pressed);
+$db-blue-on-origin-dark-default: var(--db-blue-on-origin-dark-default);
+$db-blue-on-origin-dark-hovered: var(--db-blue-on-origin-dark-hovered);
+$db-blue-on-origin-dark-pressed: var(--db-blue-on-origin-dark-pressed);
+
+// cyan
+$db-cyan-0: var(--db-cyan-0);
+$db-cyan-1: var(--db-cyan-1);
+$db-cyan-2: var(--db-cyan-2);
+$db-cyan-3: var(--db-cyan-3);
+$db-cyan-4: var(--db-cyan-4);
+$db-cyan-5: var(--db-cyan-5);
+$db-cyan-6: var(--db-cyan-6);
+$db-cyan-7: var(--db-cyan-7);
+$db-cyan-8: var(--db-cyan-8);
+$db-cyan-9: var(--db-cyan-9);
+$db-cyan-10: var(--db-cyan-10);
+$db-cyan-11: var(--db-cyan-11);
+$db-cyan-12: var(--db-cyan-12);
+$db-cyan-13: var(--db-cyan-13);
+$db-cyan-14: var(--db-cyan-14);
+$db-cyan-origin: var(--db-cyan-origin);
+$db-cyan-origin-light-default: var(--db-cyan-origin-light-default);
+$db-cyan-origin-light-hovered: var(--db-cyan-origin-light-hovered);
+$db-cyan-origin-light-pressed: var(--db-cyan-origin-light-pressed);
+$db-cyan-on-origin-light-default: var(--db-cyan-on-origin-light-default);
+$db-cyan-on-origin-light-hovered: var(--db-cyan-on-origin-light-hovered);
+$db-cyan-on-origin-light-pressed: var(--db-cyan-on-origin-light-pressed);
+$db-cyan-origin-dark-default: var(--db-cyan-origin-dark-default);
+$db-cyan-origin-dark-hovered: var(--db-cyan-origin-dark-hovered);
+$db-cyan-origin-dark-pressed: var(--db-cyan-origin-dark-pressed);
+$db-cyan-on-origin-dark-default: var(--db-cyan-on-origin-dark-default);
+$db-cyan-on-origin-dark-hovered: var(--db-cyan-on-origin-dark-hovered);
+$db-cyan-on-origin-dark-pressed: var(--db-cyan-on-origin-dark-pressed);
+
+// turquoise
+$db-turquoise-0: var(--db-turquoise-0);
+$db-turquoise-1: var(--db-turquoise-1);
+$db-turquoise-2: var(--db-turquoise-2);
+$db-turquoise-3: var(--db-turquoise-3);
+$db-turquoise-4: var(--db-turquoise-4);
+$db-turquoise-5: var(--db-turquoise-5);
+$db-turquoise-6: var(--db-turquoise-6);
+$db-turquoise-7: var(--db-turquoise-7);
+$db-turquoise-8: var(--db-turquoise-8);
+$db-turquoise-9: var(--db-turquoise-9);
+$db-turquoise-10: var(--db-turquoise-10);
+$db-turquoise-11: var(--db-turquoise-11);
+$db-turquoise-12: var(--db-turquoise-12);
+$db-turquoise-13: var(--db-turquoise-13);
+$db-turquoise-14: var(--db-turquoise-14);
+$db-turquoise-origin: var(--db-turquoise-origin);
+$db-turquoise-origin-light-default: var(--db-turquoise-origin-light-default);
+$db-turquoise-origin-light-hovered: var(--db-turquoise-origin-light-hovered);
+$db-turquoise-origin-light-pressed: var(--db-turquoise-origin-light-pressed);
+$db-turquoise-on-origin-light-default: var(
+	--db-turquoise-on-origin-light-default
+);
+$db-turquoise-on-origin-light-hovered: var(
+	--db-turquoise-on-origin-light-hovered
+);
+$db-turquoise-on-origin-light-pressed: var(
+	--db-turquoise-on-origin-light-pressed
+);
+$db-turquoise-origin-dark-default: var(--db-turquoise-origin-dark-default);
+$db-turquoise-origin-dark-hovered: var(--db-turquoise-origin-dark-hovered);
+$db-turquoise-origin-dark-pressed: var(--db-turquoise-origin-dark-pressed);
+$db-turquoise-on-origin-dark-default: var(
+	--db-turquoise-on-origin-dark-default
+);
+$db-turquoise-on-origin-dark-hovered: var(
+	--db-turquoise-on-origin-dark-hovered
+);
+$db-turquoise-on-origin-dark-pressed: var(
+	--db-turquoise-on-origin-dark-pressed
+);
+
+// green
+$db-green-0: var(--db-green-0);
+$db-green-1: var(--db-green-1);
+$db-green-2: var(--db-green-2);
+$db-green-3: var(--db-green-3);
+$db-green-4: var(--db-green-4);
+$db-green-5: var(--db-green-5);
+$db-green-6: var(--db-green-6);
+$db-green-7: var(--db-green-7);
+$db-green-8: var(--db-green-8);
+$db-green-9: var(--db-green-9);
+$db-green-10: var(--db-green-10);
+$db-green-11: var(--db-green-11);
+$db-green-12: var(--db-green-12);
+$db-green-13: var(--db-green-13);
+$db-green-14: var(--db-green-14);
+$db-green-origin: var(--db-green-origin);
+$db-green-origin-light-default: var(--db-green-origin-light-default);
+$db-green-origin-light-hovered: var(--db-green-origin-light-hovered);
+$db-green-origin-light-pressed: var(--db-green-origin-light-pressed);
+$db-green-on-origin-light-default: var(--db-green-on-origin-light-default);
+$db-green-on-origin-light-hovered: var(--db-green-on-origin-light-hovered);
+$db-green-on-origin-light-pressed: var(--db-green-on-origin-light-pressed);
+$db-green-origin-dark-default: var(--db-green-origin-dark-default);
+$db-green-origin-dark-hovered: var(--db-green-origin-dark-hovered);
+$db-green-origin-dark-pressed: var(--db-green-origin-dark-pressed);
+$db-green-on-origin-dark-default: var(--db-green-on-origin-dark-default);
+$db-green-on-origin-dark-hovered: var(--db-green-on-origin-dark-hovered);
+$db-green-on-origin-dark-pressed: var(--db-green-on-origin-dark-pressed);

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

@@ -0,0 +1,9 @@
+@forward "speaking-colors/additional/blue.speaking-colors";
+@forward "speaking-colors/additional/cyan.speaking-colors";
+@forward "speaking-colors/additional/green.speaking-colors";
+@forward "speaking-colors/additional/orange.speaking-colors";
+@forward "speaking-colors/additional/pink.speaking-colors";
+@forward "speaking-colors/additional/red.speaking-colors";
+@forward "speaking-colors/additional/turquoise.speaking-colors";
+@forward "speaking-colors/additional/violet.speaking-colors";
+@forward "speaking-colors/additional/yellow.speaking-colors";

package/build/styles/colors/_variables.additional.scss

@@ -0,0 +1,2 @@
+$additional-variants: "yellow", "orange", "red", "pink", "violet", "blue",
+	"cyan", "turquoise", "green";