chore: update components

db-ui · Jul 31, 2024 · 8771c0c · 8771c0c
1 parent 2a35910
commit 8771c0c
Show file tree

Hide file tree

Showing 60 changed files with 1,508 additions and 988 deletions.
diff --git a/packages/components/src/README.md b/packages/components/src/README.md
@@ -52,16 +52,18 @@ Main use-case to overwrite a color or change colors by `data-variant`. Example:
 
 .db-xxx {
 	@include helpers.hover {
-		background-color: colors.$db-current-color-bg-transparent-hover;
+		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
 	}
 
 	@include helpers.active {
-		background-color: colors.$db-current-color-bg-transparent-pressed;
+		background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
 	}
 
 	@each $name in colors.$variant-colors {
 		&[data-variant="#{$name}"] {
-			--db-current-color-border: var(--db-#{$name}-contrast-low-enabled);
+			--db-adaptive-on-bg-basic-emphasis-60-default: var(
+				--db-#{$name}-on-bg-basic-emphasis-70-default
+			);
 		}
 	}
 }

diff --git a/packages/components/src/components/accordion-item/accordion-item.scss b/packages/components/src/components/accordion-item/accordion-item.scss
@@ -26,7 +26,7 @@ $db-accordion-item-border-radius: variables.$db-border-radius-sm;
 		@extend %dropdown-icon;
 		@extend %db-overwrite-font-size-md;
 
-		background-color: colors.$db-current-color-bg-transparent-full-enabled;
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 		list-style: none;
 		display: flex;
 		justify-content: space-between;
@@ -35,19 +35,19 @@ $db-accordion-item-border-radius: variables.$db-border-radius-sm;
 		border-radius: $db-accordion-item-border-radius;
 
 		@include helpers.hover {
-			background-color: colors.$db-current-color-bg-transparent-hover;
+			background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
 		}
 
 		@include helpers.active {
-			background-color: colors.$db-current-color-bg-transparent-pressed;
+			background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
 		}
 
 		@include helpers.hover {
-			background-color: colors.$db-current-color-bg-transparent-hover;
+			background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
 		}
 
 		@include helpers.active {
-			background-color: colors.$db-current-color-bg-transparent-pressed;
+			background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
 		}
 
 		&::-webkit-details-marker {

diff --git a/packages/components/src/components/brand/brand.scss b/packages/components/src/components/brand/brand.scss
@@ -13,7 +13,7 @@
 	&::before {
 		--db-icon-font-size: #{variables.$db-sizing-md};
 		--db-icon-margin-end: 0;
-		--db-icon-color: #{colors.$db-brand-origin-enabled};
+		--db-icon-color: #{colors.$db-brand-origin-default};
 	}
 
 	img {

diff --git a/packages/components/src/components/button/button.scss b/packages/components/src/components/button/button.scss
@@ -13,7 +13,7 @@
 	@extend %default-button;
 	@extend %db-overwrite-font-size-md;
 
-	color: colors.$db-current-color-on-bg-enabled;
+	color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
 	block-size: variables.$db-sizing-md;
 	inline-size: fit-content;
 	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
@@ -22,11 +22,11 @@
 	text-decoration: none;
 
 	@include helpers.hover {
-		background-color: colors.$db-current-color-bg-transparent-hover;
+		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
 	}
 
 	@include helpers.active {
-		background-color: colors.$db-current-color-bg-transparent-pressed;
+		background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
 	}
 
 	// Square icon only buttons
@@ -66,17 +66,18 @@
 	}
 
 	&[data-variant="brand"] {
-		@extend %transparent-border;
-
-		background-color: colors.$db-brand-origin-enabled;
-		color: colors.$db-brand-on-enabled;
+		background-color: colors.$db-brand-origin-default;
+		color: colors.$db-brand-on-origin-default;
+		border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
 
 		@include helpers.hover {
-			background-color: colors.$db-brand-origin-hover;
+			background-color: colors.$db-brand-origin-hovered;
+			border-color: colors.$db-brand-on-bg-basic-emphasis-70-hovered;
 		}
 
 		@include helpers.active {
 			background-color: colors.$db-brand-origin-pressed;
+			border-color: colors.$db-brand-on-bg-basic-emphasis-70-pressed;
 		}
 	}
 
@@ -88,11 +89,11 @@
 	&[data-variant="outlined"],
 	&:not([data-variant]),
 	&[data-variant="ghost"] {
-		background-color: colors.$db-current-color-bg-transparent-full-enabled;
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 	}
 
 	&[data-variant="filled"] {
-		background-color: colors.$db-current-color-bg-transparent-semi-enabled;
+		background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
 	}
 
 	&:disabled {

diff --git a/packages/components/src/components/card/card.scss b/packages/components/src/components/card/card.scss
@@ -24,43 +24,43 @@
 
 	&[data-elevation-level="1"],
 	&:not([data-elevation-level]) {
-		background-color: colors.$db-current-color-bg-lvl-1-enabled;
+		background-color: colors.$db-adaptive-bg-basic-level-1-default;
 
 		&[data-behaviour="interactive"] {
 			@include helpers.hover {
-				background-color: colors.$db-current-color-bg-lvl-1-hover;
+				background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
 			}
 
 			@include helpers.active {
-				background-color: colors.$db-current-color-bg-lvl-1-pressed;
+				background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
 			}
 		}
 	}
 
 	&[data-elevation-level="2"] {
-		background-color: colors.$db-current-color-bg-lvl-2-enabled;
+		background-color: colors.$db-adaptive-bg-basic-level-2-default;
 
 		&[data-behaviour="interactive"] {
 			@include helpers.hover {
-				background-color: colors.$db-current-color-bg-lvl-2-hover;
+				background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
 			}
 
 			@include helpers.active {
-				background-color: colors.$db-current-color-bg-lvl-2-pressed;
+				background-color: colors.$db-adaptive-bg-basic-level-2-pressed;
 			}
 		}
 	}
 
 	&[data-elevation-level="3"] {
-		background-color: colors.$db-current-color-bg-lvl-3-enabled;
+		background-color: colors.$db-adaptive-bg-basic-level-3-default;
 
 		&[data-behaviour="interactive"] {
 			@include helpers.hover {
-				background-color: colors.$db-current-color-bg-lvl-3-hover;
+				background-color: colors.$db-adaptive-bg-basic-level-3-hovered;
 			}
 
 			@include helpers.active {
-				background-color: colors.$db-current-color-bg-lvl-3-pressed;
+				background-color: colors.$db-adaptive-bg-basic-level-3-pressed;
 			}
 		}
 	}

diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss
@@ -26,10 +26,10 @@
 			// Check icon
 			@include icons.set-icon("check");
 			@include colors.set-current-colors(
-				colors.$db-current-color-on-bg-enabled,
-				colors.$db-current-color-bg-lvl-1-enabled,
-				colors.$db-current-color-on-bg-hover,
-				colors.$db-current-color-on-bg-pressed
+				colors.$db-adaptive-bg-inverted-contrast-max-default,
+				colors.$db-adaptive-on-bg-inverted-default,
+				colors.$db-adaptive-bg-inverted-contrast-max-hovered,
+				colors.$db-adaptive-bg-inverted-contrast-max-pressed
 			);
 
 			// The icon within the checkbox has the same dimensions as the checkbox itself and that for there can't be any border
@@ -43,7 +43,7 @@
 		@media (forced-colors: active) {
 			&:indeterminate,
 			&:checked {
-				--db-check-element-border-color: #{colors.$db-current-color-on-bg-enabled};
+				--db-check-element-border-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};
 
 				border-width: form-components.$check-border-size;
 

diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss
@@ -114,7 +114,7 @@ $spacings: (
 
 		display: flex;
 		flex-direction: column;
-		background-color: colors.$db-current-color-bg-lvl-1-enabled;
+		background-color: colors.$db-adaptive-bg-basic-level-1-default;
 		block-size: 100%;
 		inline-size: 100%;
 		position: fixed;

diff --git a/packages/components/src/components/header/header.scss b/packages/components/src/components/header/header.scss
@@ -6,13 +6,13 @@
 @use "../../styles/component";
 
 .db-header {
-	background-color: colors.$db-current-color-bg-lvl-1-enabled;
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
 	display: flex;
 	flex-direction: column;
 	position: relative;
 	min-block-size: component.$default-mobile-header-height;
 	border-block-end: variables.$db-border-height-3xs solid
-		colors.$db-current-color-border;
+		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
 
 	@include screen-sizes.screen("md") {
 		--db-drawer-max-width: #{screen-sizes.$db-breakpoint-sm};
@@ -70,7 +70,7 @@
 	flex-direction: column;
 	gap: variables.$db-spacing-fixed-sm;
 	justify-content: flex-end;
-	background-color: colors.$db-current-color-bg-lvl-2-enabled;
+	background-color: colors.$db-adaptive-bg-basic-level-2-default;
 	padding: variables.$db-spacing-fixed-md;
 
 	@include screen-sizes.screen("md") {

diff --git a/packages/components/src/components/infotext/infotext.scss b/packages/components/src/components/infotext/infotext.scss
@@ -22,21 +22,23 @@
 
 	&[data-semantic="adaptive"],
 	&:not([data-semantic]) {
-		color: colors.$db-current-color-contrast-high-enabled;
+		color: colors.$db-adaptive-bg-inverted-contrast-high-default;
 
 		&::before {
-			--db-icon-color: #{colors.$db-current-color-contrast-low-enabled};
+			--db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
 		}
 	}
 
 	@each $name, $colors in colors.$variant-colors {
 		&[data-semantic="#{$name}"] {
 			@include icons.variant-icons($name);
 
-			color: var(--db-#{$name}-contrast-high-enabled);
+			color: var(--db-#{$name}-bg-inverted-contrast-high-default);
 
 			&::before {
-				--db-icon-color: var(--db-#{$name}-contrast-low-enabled);
+				--db-icon-color: var(
+					--db-#{$name}-on-bg-basic-emphasis-70-default
+				);
 			}
 		}
 	}

diff --git a/packages/components/src/components/link/link.scss b/packages/components/src/components/link/link.scss
@@ -42,14 +42,14 @@
 
 	// We couldn't extend any existing SCSS placeholders, as this is a special construct
 	&[data-variant="brand"] {
-		color: colors.$db-brand-contrast-high-enabled;
+		color: colors.$db-brand-bg-inverted-contrast-high-default;
 
 		@include helpers.hover {
-			color: #{colors.$db-brand-contrast-high-hover};
+			color: #{colors.$db-brand-bg-inverted-contrast-high-hovered};
 		}
 
 		@include helpers.active {
-			color: #{colors.$db-brand-contrast-high-pressed};
+			color: #{colors.$db-brand-bg-inverted-contrast-high-pressed};
 		}
 	}
 

diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -51,7 +51,7 @@
 	@extend %transparent-border;
 	@extend %db-overwrite-font-size-md;
 
-	background-color: colors.$db-current-color-bg-transparent-full-enabled;
+	background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 	cursor: pointer;
 	inline-size: 100%;
 	display: inline-flex;
@@ -62,15 +62,15 @@
 	align-items: center; // Centering the content vertically and horizontally
 
 	@include helpers.hover {
-		background-color: colors.$db-current-color-bg-transparent-hover;
+		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
 	}
 
 	@include helpers.active {
-		background-color: colors.$db-current-color-bg-transparent-pressed;
+		background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
 	}
 
 	&:has(~ .db-sub-navigation:is(:hover, :focus)) {
-		background-color: colors.$db-current-color-bg-transparent-hover;
+		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
 	}
 }
 
@@ -175,7 +175,7 @@
 	flex-direction: column;
 	z-index: 70;
 	inset-inline-start: 0;
-	background-color: colors.$db-current-color-bg-lvl-1-enabled;
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
 	visibility: hidden;
 
 	@include screen-sizes.screen("md", "max") {
@@ -297,7 +297,7 @@
 
 	display: flex;
 	font-weight: normal;
-	background-color: colors.$db-current-color-bg-lvl-1-enabled;
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
 	padding-block-end: variables.$db-spacing-fixed-md;
 	margin-block-end: variables.$db-spacing-fixed-md;
 }
diff --git a/packages/components/src/components/notification/notification.scss b/packages/components/src/components/notification/notification.scss
@@ -31,10 +31,10 @@
 	padding: variables.$db-spacing-fixed-md;
 	gap: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
 	inline-size: inherit;
-	background-color: colors.$db-current-color-bg-lvl-2-enabled;
+	background-color: colors.$db-adaptive-bg-basic-level-2-default;
 
 	&::before {
-		--db-icon-color: #{colors.$db-current-color-contrast-low-enabled};
+		--db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
 	}
 
 	a {

diff --git a/packages/components/src/components/radio/radio.scss b/packages/components/src/components/radio/radio.scss
@@ -17,7 +17,7 @@
 		&:checked {
 			// The radio element still has the default background for the dot on :hover when in checked state
 			&:not(:disabled):is(:hover, :focus) {
-				background-color: colors.$db-current-color-bg-transparent-full-enabled;
+				background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 			}
 
 			&:not([data-size="small"]) {

diff --git a/packages/components/src/components/select/select.scss b/packages/components/src/components/select/select.scss
@@ -38,7 +38,7 @@ $has-before-padding: calc(
 
 	// Most likely this wouldn't work on MacOS, but we're still progressively enhancing Windows by this
 	option {
-		background-color: colors.$db-current-color-bg-transparent-semi-enabled;
+		background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
 	}
 
 	&[data-variant="hidden"] {