feat: add dynamic colors to change them via css-properties (#1396)

* feat: add dynamic colors to change them via css-properties

* fix: remaining issues with colors

* fix: color issues for radio and checkbox

* fix: issue with focus color

* fix: issue with code-colors

* fix: issue with critical input

packages/components/src/components/alert/alert.scss

@@ -54,7 +54,6 @@
 }
 
 .db-alert {
-	@extend %db-bg-neutral-0;
 	@extend %component-border;
 	@extend %grid-layout;
 	display: grid;

packages/components/src/components/card/card.scss

@@ -10,10 +10,7 @@
 	@extend %color-variants;
 	@extend %default-card;
 
-	background-color: var(
-		--db-current-background-color,
-		$db-colors-neutral-bg-0-enabled
-	);
+	background-color: $db-colors-neutral-bg;
 
 	display: flex;
 	flex-direction: column;

packages/components/src/components/checkbox/checkbox.scss

@@ -10,7 +10,6 @@
 $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height));
 
 .db-checkbox {
-	@extend %default-color;
 	@extend %bg-transparent-interactive;
 
 	align-content: center;
@@ -42,7 +41,7 @@ $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height));
 	}
 
 	&:checked {
-		@extend %db-secondary-component-ia;
+		@extend %db-bg-inverted-ia;
 
 		// Check icon
 		@include icon(glyph(done), 24, "outline");

packages/components/src/components/code-docs/code-docs.scss

@@ -5,6 +5,8 @@
 @use "@db-ui/foundations/build/scss/color-placeholder" as *;
 @use "@db-ui/foundations/build/scss/tonality" as *;
 
+/* TODO: Adapt this colors as well */
+
 %code-docs {
 	@extend %db-bg-neutral-1;
 	min-block-size: $db-sizing-3xl;
@@ -38,7 +40,7 @@
 		}
 
 		.code {
-			@extend %db-bg-secondary;
+			@extend %db-bg-neutral-4;
 			overflow: auto;
 			position: absolute;
 			inset-inline-end: 0;

packages/components/src/components/drawer/drawer.scss

@@ -108,7 +108,7 @@ $spacings: (
 		@extend %spacing-drawer;
 		display: flex;
 		flex-direction: column;
-		background-color: $db-colors-neutral-bg-0-enabled;
+		background-color: $db-colors-neutral-bg;
 		block-size: 100%;
 		inline-size: 100%;
 		position: fixed;

packages/components/src/components/header/header.scss

@@ -3,7 +3,7 @@
 @use "@db-ui/foundations/build/scss/helpers/functions" as *;
 
 .db-header {
-	background-color: $db-colors-neutral-bg-0-enabled;
+	background-color: $db-colors-neutral-bg;
 	box-shadow: $db-elevation-4;
 	display: flex;
 	justify-content: space-between;

packages/components/src/components/icon/icon-web-component.scss

@@ -1,2 +1 @@
-@forward "@db-ui/foundations/scss/icon/icons";
 @forward "icon";

packages/components/src/components/input/input.scss

@@ -43,8 +43,9 @@
 		(
 				var(--db-input-padding-end-icon-after) +
 					var(--db-input-padding-end-datalist)
-			) * #{$db-sizing-md} + #{$db-spacing-fixed-sm} -
-			var(--db-input-padding-end-datalist) * #{$db-spacing-fixed-sm} - var(
+			) * #{$db-sizing-md} + #{$db-spacing-fixed-sm} - var(
+				--db-input-padding-end-datalist
+			) * #{$db-spacing-fixed-sm} - var(
 				--db-input-padding-end-icon-after
 			) * #{$db-spacing-fixed-sm}
 	);
@@ -68,6 +69,43 @@
 	}
 }
 
+%input-color-variants {
+	@each $name, $colors in $component-variants {
+		@if ($name == "critical") {
+			&[data-variant="critical"] {
+				color: map.get($colors, "on-bg");
+			}
+		}
+
+		&[data-variant="#{$name}"] input {
+			--db-current-border-color: #{map.get($colors, "border")};
+			@if ($name == "critical") {
+				@extend %adaptive-critical-component;
+			} @else if ($name == "informational") {
+				@extend %adaptive-informational-component;
+			} @else if ($name == "warning") {
+				@extend %adaptive-warning-component;
+			} @else if ($name == "successful") {
+				@extend %adaptive-successful-component;
+			}
+
+			& + label {
+				color: map.get($colors, "on-bg");
+			}
+
+			& ~ .db-icon {
+				color: map.get($colors, "on-bg");
+			}
+
+			& ~ .description,
+			& ~ .icon-state,
+			& ~ .icon-state .db-icon {
+				color: map.get($colors, "element");
+			}
+		}
+	}
+}
+
 .db-input {
 	--db-input-padding-inline-start: #{$db-spacing-fixed-sm};
 	--db-input-padding-end-icon-after: 0;
@@ -76,6 +114,8 @@
 	--icon-margin-after: 0;
 	--db-input-label-max-width: 80%;
 
+	@extend %input-color-variants;
+
 	position: relative;
 
 	// padding-inline-end according to current amount of icons
@@ -157,8 +197,9 @@
 
 	.icon-after {
 		margin-inline-end: calc(
-			#{$db-spacing-fixed-sm} + var(--db-input-padding-end-datalist) * #{$db-sizing-md} -
-				var(--db-input-padding-end-datalist) * #{$db-spacing-fixed-sm}
+			#{$db-spacing-fixed-sm} + var(--db-input-padding-end-datalist) * #{$db-sizing-md} - var(
+					--db-input-padding-end-datalist
+				) * #{$db-spacing-fixed-sm}
 		);
 	}
 
@@ -172,7 +213,6 @@
 	}
 
 	label {
-		@extend %default-color;
 		position: absolute;
 		display: flex;
 		align-items: center;
@@ -377,41 +417,6 @@
 	input[aria-invalid="true"] {
 		@extend %adaptive-critical-component;
 	}
-
-	@each $name, $colors in $component-variants {
-		@if ($name == "critical") {
-			&[data-variant="critical"] {
-				color: nth($colors, 3);
-			}
-		}
-
-		&[data-variant="#{$name}"] input {
-			--db-current-border-color: #{map.get($colors, "border")};
-			@if ($name == "critical") {
-				@extend %adaptive-critical-component;
-			} @else if ($name == "informational") {
-				@extend %adaptive-informational-component;
-			} @else if ($name == "warning") {
-				@extend %adaptive-warning-component;
-			} @else if ($name == "successful") {
-				@extend %adaptive-successful-component;
-			}
-
-			& + label {
-				color: map.get($colors, "on-bg");
-			}
-
-			& ~ .db-icon {
-				color: $db-colors-informational-on-bg-enabled;
-			}
-
-			& ~ .description,
-			& ~ .icon-state,
-			& ~ .icon-state .db-icon {
-				color: map.get($colors, "element");
-			}
-		}
-	}
 }
 
 .db-ui-regular,

packages/components/src/components/link/link.scss

@@ -15,7 +15,6 @@
 }
 
 .db-link {
-	@extend %default-color;
 	@extend %db-link-height;
 	inline-size: fit-content;
 	align-items: center;
@@ -30,15 +29,19 @@
 		outline 0.06s,
 		color $db-transition-color;
 
+	&:hover {
+		color: color-mix(in srgb, transparent 25%, $db-colors-neutral-on-bg);
+	}
+
+	&:active {
+		color: color-mix(in srgb, transparent 50%, $db-colors-neutral-on-bg);
+	}
+
 	a {
 		// Workaround for angular
 		@extend %db-link-height;
 	}
 
-	&:hover {
-		color: inherit;
-	}
-
 	// "disabled" links
 	&[aria-disabled="true"] {
 		// TODO: probably move these to the tokens as well
@@ -62,7 +65,7 @@
 
 	&[data-content="internal"],
 	&[data-content="external"] {
-		--icon-margin-before: var(--db-spacing-fixed-2xs);
+		--icon-margin-before: #{$db-spacing-fixed-2xs};
 
 		&:focus-visible {
 			outline-offset: var(--db-focus-outline-offset, 1px);
@@ -74,12 +77,20 @@
 	}
 
 	&[data-variant="primary"] {
-		@extend %db-primary-text-ia;
+		color: $db-colors-primary;
+
+		&:hover {
+			color: $db-colors-primary-hover;
+		}
+
+		&:active {
+			color: $db-colors-primary-pressed;
+		}
 	}
 
 	&[data-size="small"] {
 		--icon-font-size: var(--db-base-icon-font-size);
-		--icon-margin-before: var(--db-spacing-fixed-3xs);
+		--icon-margin-before: #{$db-spacing-fixed-3xs};
 		@extend %db-overwrite-font-size-sm;
 	}
 }

packages/components/src/components/radio/radio.scss

@@ -9,14 +9,13 @@
 $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height));
 
 .db-radio {
-	@extend %default-color;
 	@extend %bg-transparent-interactive;
 
 	appearance: none;
 
 	aspect-ratio: 1;
 
-	border: max(calc(#{$font-size-height} / 16 + 0.5px), 2px) solid currentColor;
+	border: max(calc(#{$font-size-height} / 16 + 0.5px), 2px) solid #{$db-colors-neutral-on-bg};
 	// Full rounded
 	border-radius: 100px;
 
@@ -47,17 +46,10 @@ $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height));
 	&:is(:user-invalid),
 	&[aria-invalid="true"] {
 		@extend %db-bg-critical-transparent-semi;
-		@extend %db-bg-critical-transparent-semi-hover-state;
-		border-color: var(
-			--db-colors-critical-element-enabled,
-			$db-colors-critical-element-enabled
-		);
+		border-color: $db-colors-critical-border-weak;
 
 		& + label {
-			color: var(
-				--db-colors-critical-enabled,
-				$db-colors-critical-enabled
-			);
+			color: $db-colors-critical;
 		}
 	}
 

packages/components/src/styles/_dialog-init.scss

@@ -1,6 +1,6 @@
-@use "@db-ui/foundations/build/scss/variables" as *;
+@use "@db-ui/foundations/build/scss/variables.global" as *;
 
-$backdrop-color: $db-colors-neutral-on-bg-enabled;
+$backdrop-color: $db-colors-neutral-on-bg;
 
 %backdrop {
 	background-color: $backdrop-color;

packages/foundations/scripts/color-classes-generator.js

@@ -16,6 +16,14 @@ const generateBGVariants = (value, variant) => {
 .${prefix}-bg-${value}${nameEnding} {
     @extend %${prefix}-bg-${value}${nameEnding};
 
+    &-transparent-full {
+        @extend %${prefix}-bg-${value}${nameEnding}-transparent-full;
+    }
+
+    &-transparent-semi {
+        @extend %${prefix}-bg-${value}${nameEnding}-transparent-semi;
+    }
+
     &-ia,
     &[data-variant="interactive"] {
         @extend %${prefix}-bg-${value}${nameEnding}-ia;
@@ -52,15 +60,6 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 			// Default text and background colors (former 'light' tone)
 			output += generateBGVariants(value);
 		}
-
-		// Transparent tones
-		const transparentTones = ['full', 'semi'];
-		for (const transparentTone of transparentTones) {
-			output += generateBGVariants(
-				value,
-				`transparent-${transparentTone}`
-			);
-		}
 	}
 
 	return output;