fix: all colors in components to work with dark-mode

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

@@ -115,8 +115,6 @@
 				@extend %db-bg-successful;
 			}
 
-			--db-current-border-color: #{map.get($colors, "border")};
-
 			&::before {
 				color: map.get($colors, "element");
 			}

packages/components/src/components/badge/badge.scss

@@ -5,49 +5,8 @@
 @use "@db-ui/foundations/build/scss/color/color-variants" as *;
 @use "@db-ui/foundations/build/scss/helpers/component" as *;
 @use "@db-ui/foundations/build/scss/helpers/font" as *;
-@use "../../styles/button-components";
-
-@mixin get-tag-colors() {
-	@extend %db-bg-neutral-4;
-
-	&[data-emphasis="strong"] {
-		@extend %db-neutral-component;
-	}
-
-	@each $name, $colors in $component-variants {
-		&[data-variant="#{$name}"] {
-			@if ($name == "critical") {
-				@extend %db-bg-critical;
-
-				&[data-emphasis="strong"] {
-					@extend %db-critical-component;
-				}
-			} @else if ($name == "informational") {
-				@extend %db-bg-informational;
-
-				&[data-emphasis="strong"] {
-					@extend %db-informational-component;
-				}
-			} @else if ($name == "warning") {
-				@extend %db-bg-warning;
-
-				&[data-emphasis="strong"] {
-					@extend %db-warning-component;
-				}
-			} @else if ($name == "successful") {
-				@extend %db-bg-successful;
-
-				&[data-emphasis="strong"] {
-					@extend %db-successful-component;
-				}
-			}
-
-			&:not(&[data-emphasis="strong"]) {
-				--db-current-border-color: #{map.get($colors, "border")};
-			}
-		}
-	}
-}
+@use "../../styles/button-components" as *;
+@use "../../styles/tag-components" as *;
 
 %absolute-badge {
 	position: absolute;

packages/components/src/components/button/button.scss

@@ -9,14 +9,12 @@
 @use "../../styles/button-components";
 
 .db-button {
-	// Including a loading indicator
-	--loadingIndicator---color: currentColor;
-
 	@extend %default-interactive-component;
-	@extend %default-background-transition;
 	@extend %bg-transparent-interactive;
 	@extend %default-button;
 
+	color: $db-colors-neutral-on-bg;
+
 	block-size: $db-sizing-md;
 	padding: $db-spacing-fixed-xs $db-spacing-fixed-md;
 

packages/components/src/components/card/card.spec.tsx

@@ -9,12 +9,9 @@ const defaultComp = <DBCard>Test</DBCard>;
 
 // TODO: Get variants from https://github.com/db-ui/mono/blob/feat-unify-showcases/packages/components/src/shared/constants.ts when feat-unify branch is merged
 const colorVariants = [
-	'neutral-0',
-	'neutral-1',
-	'neutral-3',
-	'neutral-4',
+	'neutral',
+	'neutral-strong',
 	'primary',
-	'secondary',
 	'critical',
 	'successful',
 	'warning',

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

@@ -18,7 +18,8 @@ $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height));
 
 	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;
 	border-radius: $default-border-radius;
 
 	display: inline-flex;

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

@@ -4,11 +4,12 @@
 @use "@db-ui/foundations/build/scss/variables.global" as *;
 @use "@db-ui/foundations/build/scss/color-placeholder" as *;
 @use "@db-ui/foundations/build/scss/tonality" as *;
+@use "@db-ui/foundations/build/scss/color/color-variants" as *;
 
 /* TODO: Adapt this colors as well */
 
 %code-docs {
-	@extend %db-bg-neutral-1;
+	@extend %db-bg-neutral-transparent-semi;
 	min-block-size: $db-sizing-3xl;
 	align-items: center;
 	justify-content: center;
@@ -40,7 +41,7 @@
 		}
 
 		.code {
-			@extend %db-bg-neutral-4;
+			@extend %db-bg-inverted;
 			overflow: auto;
 			position: absolute;
 			inset-inline-end: 0;

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

@@ -45,13 +45,13 @@
 }
 
 .db-header-meta-navigation {
+	@extend %db-bg-neutral-transparent-semi;
 	@extend %db-ui-functional;
 	@include divider("top");
 	display: flex;
 	flex-direction: column;
 	gap: $db-spacing-fixed-sm;
 	justify-content: end;
-	background-color: $db-colors-neutral-bg-2-enabled;
 
 	padding: $db-spacing-fixed-md;
 

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

@@ -77,6 +77,11 @@
 			}
 		}
 
+		&[data-variant="#{$name}"] {
+			--db-current-color: #{map.get($colors, "on-bg")};
+			color: map.get($colors, "on-bg");
+		}
+
 		&[data-variant="#{$name}"] input {
 			--db-current-border-color: #{map.get($colors, "border")};
 			@if ($name == "critical") {
@@ -94,13 +99,14 @@
 			}
 
 			& ~ .db-icon {
-				color: map.get($colors, "on-bg");
+				--db-current-color: #{map.get($colors, "on-bg")};
 			}
 
 			& ~ .description,
 			& ~ .icon-state,
 			& ~ .icon-state .db-icon {
-				color: map.get($colors, "element");
+				--db-current-color: #{map.get($colors, "element")};
+				color: var(--db-current-color);
 			}
 		}
 	}
@@ -260,6 +266,8 @@
 		@extend %component-border;
 		@include get-variant-bg-color(0.08);
 
+		color: $db-colors-neutral-on-bg;
+
 		block-size: $db-sizing-md;
 		max-inline-size: 100%;
 		inline-size: 100%;

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

@@ -24,11 +24,6 @@
 	text-underline-position: from-font;
 	text-decoration-thickness: to-rem($pxValue: 1);
 
-	// Changing color on hover should be animated by a transition
-	transition:
-		outline 0.06s,
-		color $db-transition-color;
-
 	&:hover {
 		color: color-mix(in srgb, transparent 25%, $db-colors-neutral-on-bg);
 	}
@@ -76,15 +71,17 @@
 		}
 	}
 
+	// We couldn't extend any existing SCSS placeholders, as this is a special construct
 	&[data-variant="primary"] {
-		color: $db-colors-primary;
+		--db-current-color: #{$db-colors-primary-text};
+		color: var(--db-current-color);
 
 		&:hover {
-			color: $db-colors-primary-hover;
+			--db-current-color: #{$db-colors-primary-text-hover};
 		}
 
 		&:active {
-			color: $db-colors-primary-pressed;
+			--db-current-color: #{$db-colors-primary-text-pressed};
 		}
 	}
 

packages/components/src/components/navigation-item/navigation-item.scss

@@ -74,7 +74,6 @@
 
 %navigation-item {
 	@extend %default-interactive-component;
-	@extend %default-background-transition;
 	@extend %transparent-border;
 
 	@include get-variant-bg-color(0);
@@ -177,7 +176,7 @@
 	flex-direction: column;
 	z-index: 70;
 	inset-inline-start: 0;
-	background-color: $db-colors-neutral-bg-0-enabled;
+	background-color: $db-colors-neutral-bg;
 
 	visibility: hidden;
 

packages/components/src/components/select/select.scss

@@ -150,6 +150,11 @@
 		margin-block: $db-spacing-fixed-2xs 0;
 	}
 
+	// Most likely this wouldn't work on MacOS, but we're still progressively enhancing Windows by this
+	option {
+		background-color: var(--db-current-bg-color);
+	}
+
 	@each $name, $colors in $component-variants {
 		&[data-variant="#{$name}"] {
 			--db-current-border-color: #{map.get($colors, "border")};
@@ -168,7 +173,8 @@
 			& ~ .description,
 			.icon-state,
 			.icon-state .db-icon {
-				color: map.get($colors, "element");
+				--db-current-color: #{map.get($colors, "element")};
+				color: var(--db-current-color);
 			}
 		}
 	}

packages/components/src/components/tag/model.ts

@@ -10,7 +10,8 @@ import {
 	IconProps,
 	IconState,
 	FormCheckProps,
-	InitializedState
+	InitializedState,
+	EmphasisProps
 } from '../../shared/model';
 
 export interface DBTagDefaultProps {
@@ -39,10 +40,6 @@ export interface DBTagDefaultProps {
 	 * The removeButton attribute shows the cancel button.
 	 */
 	removeButton?: string;
-	/**
-	 * The type attribute divides in between a weak or strong importance.
-	 */
-	type?: 'weak' | 'strong';
 	/**
 	 * If "interactive" is set to true, you can pass a value to the underlying checkbox or radio input.
 	 */
@@ -55,7 +52,8 @@ export type DBTagProps = DBTagDefaultProps &
 	FormProps &
 	FormCheckProps &
 	IconProps &
-	DefaultVariantProps;
+	DefaultVariantProps &
+	EmphasisProps;
 
 export interface DBTagDefaultState {
 	getRemoveButtonText?: () => string;

packages/components/src/components/tag/tag.lite.tsx

@@ -123,7 +123,7 @@ export default function DBTag(props: DBTagProps) {
 			data-interactive={state.isInteractive()}
 			data-disabled={props.disabled}
 			data-variant={props.variant}
-			data-type={props.type}>
+			data-emphasis={props.emphasis}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>