feat: foundation update

docs/migration/v1.x.x-to-v2.0.0.md

@@ -1,6 +1,17 @@
 ## Migration Beta (1.x.x) ➡ 2.0.0
 
-### Global
+## Foundation
+
+### Token
+
+- Removed `--db-adaptive-on-origin-hovered`
+- Removed `--db-adaptive-on-origin-pressed`
+- Removed `--db-adaptive-on-bg-basic-emphasis-60-hovered`
+- Removed `--db-adaptive-on-bg-basic-emphasis-60-pressed`
+- Removed `--db-adaptive-on-bg-basic-emphasis-50-hovered`
+- Removed `--db-adaptive-on-bg-basic-emphasis-50-pressed`
+
+## Global
 
 - Renamed all `border-height` props to `border-width`
 

package.json

@@ -63,7 +63,7 @@
     "@axe-core/playwright": "^4.10.1",
     "@commitlint/cli": "19.8.0",
     "@commitlint/config-conventional": "19.8.0",
-    "@db-ux/db-theme": "1.0.2",
+    "@db-ux/db-theme": "1.0.2-2.0.0-release-htoo7nxl",
     "@double-great/stylelint-a11y": "3.0.4",
     "@guidepup/guidepup": "0.24.0",
     "@guidepup/playwright": "^0.14.2",

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

@@ -44,6 +44,7 @@
 	&[data-size="small"] {
 		@extend %db-overwrite-font-size-sm;
 
+		font-weight: 700;
 		block-size: variables.$db-sizing-sm;
 
 		&:not([data-no-text="true"]) {
@@ -72,12 +73,12 @@
 
 		@include helpers.hover {
 			background-color: colors.$db-brand-origin-hovered;
-			border-color: colors.$db-brand-on-bg-basic-emphasis-70-hovered;
+			border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
 		}
 
 		@include helpers.active {
 			background-color: colors.$db-brand-origin-pressed;
-			border-color: colors.$db-brand-on-bg-basic-emphasis-70-pressed;
+			border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
 		}
 	}
 

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

@@ -41,14 +41,14 @@
 
 	// We couldn't extend any existing SCSS placeholders, as this is a special construct
 	&[data-variant="brand"] {
-		color: colors.$db-brand-bg-inverted-contrast-high-default;
+		color: colors.$db-brand-on-bg-basic-emphasis-80-default;
 
 		@include helpers.hover {
-			color: #{colors.$db-brand-bg-inverted-contrast-high-hovered};
+			color: #{colors.$db-brand-on-bg-basic-emphasis-80-hovered};
 		}
 
 		@include helpers.active {
-			color: #{colors.$db-brand-bg-inverted-contrast-high-pressed};
+			color: #{colors.$db-brand-on-bg-basic-emphasis-80-pressed};
 		}
 	}
 

packages/components/src/components/notification/notification.scss

@@ -63,7 +63,6 @@
 	// headline
 	header {
 		grid-area: head;
-		font-weight: 700;
 
 		&,
 		h1,
@@ -72,10 +71,9 @@
 		h4,
 		h5,
 		h6 {
-			font-family: var(--db-font-family-sans);
 			margin: 0;
-			line-height: var(--db-type-body-line-height-md);
-			font-size: var(--db-type-body-font-size-md);
+			font: var(--db-type-body-md);
+			font-weight: 700;
 
 			&::before,
 			&::after {

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

@@ -49,21 +49,24 @@ $has-before-padding: calc(
 	}
 
 	[id$="-placeholder"] {
+		--label-block-start: calc(
+			(
+				#{form-components.$label-size-height-xs} +
+					#{variables.$db-spacing-fixed-xs}
+			)
+		);
+		--label-block-start-half: calc(-1 * var(--label-block-start) / 2);
+
 		@extend %db-overwrite-font-size-md;
 
 		position: absolute;
 		pointer-events: none;
 		// we use the top of the element, the size of the label+label-margin-bottom and the font-size of the select/2
 		// for functional we have some rounding issues for rem, so we need 1px less
+		transform: translateY(var(--label-block-start-half));
 		inset-block-start: calc(
-			0% +
-				(
-					#{form-components.$label-size-height-xs} +
-						#{variables.$db-spacing-fixed-xs}
-				) *
-				var(--db-label-visible-height, 1) +
-				var(--db-type-body-font-size-md) /
-				2 - var(--db-density-functional, 0) * 1px
+			var(--label-block-start) * var(--db-label-visible-height, 1) +
+				#{variables.$db-sizing-md} / 2
 		);
 		inset-inline: $has-before-padding;
 		margin-inline-start: variables.$db-spacing-fixed-sm;

packages/components/src/components/switch/switch.scss

@@ -76,7 +76,7 @@ $checked-active-transition-size: calc(
 
 		// thumb
 		&::before {
-			content: "O";
+			content: "°";
 			text-align: center;
 			align-content: center;
 			aspect-ratio: 1;

packages/components/src/styles/internal/_form-components.scss

@@ -106,8 +106,7 @@ $check-border-size: min(#{variables.$db-border-width-2xs}, 2px);
 			} @else {
 				// font-size label which is 2xs + smallest spacing
 				padding-block-start: calc(
-					var(--db-type-body-font-size-2xs) +
-						#{variables.$db-spacing-fixed-3xs}
+					var(--db-base-body-icon-font-size-2xs)
 				);
 			}
 		}

packages/foundations/dev/colors.html

@@ -2,63 +2,66 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>(Web) Fonts</title>
-		<link rel="stylesheet" href="/build/styles/absolute.css" />
-		<link
-			rel="stylesheet"
-			href="/build/styles/defaults/default-theme.css"
-		/>
+		<link rel="stylesheet" href="/dev/index.css" />
 		<link rel="stylesheet" href="/build/styles/colors/classes/all.css" />
 	</head>
 
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<div>
-			<div class="db-neutral-bg-basic-level-1">
+			<div data-color="neutral" data-bg-color="basic-level-1">
 				neutral-bg-basic-level-1
 			</div>
-			<div class="db-neutral-bg-basic-level-2">
+			<div data-color="neutral" data-bg-color="basic-level-2">
 				neutral-bg-basic-level-2
 			</div>
-			<div class="db-neutral-bg-basic-level-3">
+			<div data-color="neutral" data-bg-color="basic-level-3">
 				neutral-bg-basic-level-3
 			</div>
-			<div class="db-brand-bg-basic-level-1">brand-bg-basic-level-1</div>
-			<div class="db-brand-bg-basic-level-2">brand-bg-basic-level-2</div>
-			<div class="db-brand-bg-basic-level-3">brand-bg-basic-level-3</div>
-			<div class="db-critical-bg-basic-level-1">
+			<div data-color="brand" data-bg-color="basic-level-1">
+				brand-bg-basic-level-1
+			</div>
+			<div data-color="brand" data-bg-color="basic-level-2">
+				brand-bg-basic-level-2
+			</div>
+			<div data-color="brand" data-bg-color="basic-level-3">
+				brand-bg-basic-level-3
+			</div>
+			<div data-color="critical" data-bg-color="basic-level-1">
 				critical-bg-basic-level-1
 			</div>
-			<div class="db-critical-bg-basic-level-2">
+			<div data-color="critical" data-bg-color="basic-level-2">
 				critical-bg-basic-level-2
 			</div>
-			<div class="db-critical-bg-basic-level-3">
+			<div data-color="critical" data-bg-color="basic-level-3">
 				critical-bg-basic-level-3
 			</div>
-			<div class="db-warning-bg-basic-level-1">
+			<div data-color="warning" data-bg-color="basic-level-1">
 				warning-bg-basic-level-1
 			</div>
-			<div class="db-warning-bg-basic-level-2">
+			<div data-color="warning" data-bg-color="basic-level-2">
 				warning-bg-basic-level-2
 			</div>
-			<div class="db-warning-bg-basic-level-3">
+			<div data-color="warning" data-bg-color="basic-level-3">
 				warning-bg-basic-level-3
 			</div>
-			<div class="db-successful-bg-basic-level-1">
+			<div data-color="successful" data-bg-color="basic-level-1">
 				successful-bg-basic-level-1
 			</div>
-			<div class="db-successful-bg-basic-level-2">
+			<div data-color="successful" data-bg-color="basic-level-2">
 				successful-bg-basic-level-2
 			</div>
-			<div class="db-successful-bg-basic-level-3">
+			<div data-color="successful" data-bg-color="basic-level-3">
 				successful-bg-basic-level-3
 			</div>
-			<div class="db-informational-bg-basic-level-1">
+			<div data-color="informational" data-bg-color="basic-level-1">
 				informational-bg-basic-level-1
 			</div>
-			<div class="db-informational-bg-basic-level-2">
+			<div data-color="informational" data-bg-color="basic-level-2">
 				informational-bg-basic-level-2
 			</div>
-			<div class="db-informational-bg-basic-level-3">
+			<div data-color="informational" data-bg-color="basic-level-3">
 				informational-bg-basic-level-3
 			</div>
 		</div>

packages/foundations/dev/fonts.html

@@ -2,12 +2,9 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>(Web) Fonts</title>
-		<link rel="stylesheet" href="/build/styles/absolute.css" />
-		<link
-			rel="stylesheet"
-			href="/build/styles/defaults/default-theme.css"
-		/>
+		<link rel="stylesheet" href="/dev/index.css" />
 		<link rel="stylesheet" href="/build/styles/fonts/absolute.css" />
 		<style>
 			body {

packages/foundations/dev/icons.html

@@ -3,9 +3,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Icon Overview</title>
-    <link rel="stylesheet" href="/build/styles/absolute.css" />
-    <link rel="stylesheet" href="/build/styles/defaults/default-theme.css" />
+    <link rel="stylesheet" href="/dev/index.css" />
     <link rel="stylesheet" href="/build/styles/icons/absolute.css" />
     <style>
       .db-infotext {

packages/foundations/dev/index.css

@@ -0,0 +1,4 @@
+@layer db-ux-core-foundations, db-ux-theme;
+
+@import url("/build/styles/absolute.css") layer(db-ux-core-foundations);
+@import url("/build/styles/defaults/default-theme.css") layer(db-ux-theme);

packages/foundations/scripts/local/generate-icon-overview.ts

@@ -14,12 +14,9 @@ const generateIconOverview = async () => {
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Icon Overview</title>
-		<link
-			rel="stylesheet"
-			href="/build/styles/absolute.css"
-		/>
-		<link rel="stylesheet" href="/build/styles/defaults/default-theme.css" />
+		<link rel="stylesheet" href="/dev/index.css" />
 		<link rel="stylesheet" href="/build/styles/icons/absolute.css" />
 		<style>
 			.db-infotext {