From 754ef21f0e3c79eab141ecfd62f10504cb843477 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 30 Sep 2022 09:08:49 +0200
Subject: [PATCH 01/30] refactor: added sizes and restyling

---
 .../01-elements/checkbox/checkbox-sizes.hbs   |  6 ++
 .../01-elements/checkbox/checkbox-sizes.json  | 18 ++++++
 .../01-elements/checkbox/checkbox.hbs         |  9 +--
 .../01-elements/checkbox/checkbox.scss        | 55 +++++++++++++++++--
 4 files changed, 79 insertions(+), 9 deletions(-)
 create mode 100644 source/_patterns/01-elements/checkbox/checkbox-sizes.hbs
 create mode 100644 source/_patterns/01-elements/checkbox/checkbox-sizes.json

diff --git a/source/_patterns/01-elements/checkbox/checkbox-sizes.hbs b/source/_patterns/01-elements/checkbox/checkbox-sizes.hbs
new file mode 100644
index 00000000000..e20439501e6
--- /dev/null
+++ b/source/_patterns/01-elements/checkbox/checkbox-sizes.hbs
@@ -0,0 +1,6 @@
+{{#each sizes }}
+	<h2>{{ label }}</h2>
+	<p>
+		{{> elements-checkbox id=../id }}
+	</p>
+{{/each }}
diff --git a/source/_patterns/01-elements/checkbox/checkbox-sizes.json b/source/_patterns/01-elements/checkbox/checkbox-sizes.json
new file mode 100644
index 00000000000..4fe2b47b95e
--- /dev/null
+++ b/source/_patterns/01-elements/checkbox/checkbox-sizes.json
@@ -0,0 +1,18 @@
+{
+	"sizes": [
+		{
+			"size": "small",
+			"label": "Small"
+		},
+		{
+			"size": "medium",
+			"label": "Medium (default, data-size attribute is optional)"
+		},
+		{
+			"size": "large",
+			"label": "Large"
+		}
+	],
+	"id": "checkbox05",
+	"label": "Checkbox"
+}
diff --git a/source/_patterns/01-elements/checkbox/checkbox.hbs b/source/_patterns/01-elements/checkbox/checkbox.hbs
index 0fd79520b0f..13e65713cf1 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.hbs
+++ b/source/_patterns/01-elements/checkbox/checkbox.hbs
@@ -1,12 +1,13 @@
 <input type="checkbox"
 	class="elm-checkbox {{ styleModifier }}"
-	id="{{ id }}"{{#if checked}} checked{{/if }}
+	id="{{ id }}{{#if size }}-{{ size }}{{/if }}"{{#if checked}} checked{{/if }}
 	{{#if disabled}} disabled{{/if }}
 	value="{{ value }}"
-	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}>
-<label class="elm-label" for="{{ id }}">{{ label }}</label>
+	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
+	{{#if size }} data-size="{{ size }}"{{/if }}>
+<label class="elm-label" for="{{ id }}{{#if size }}-{{ size }}{{/if }}">{{ label }}</label>
 {{#if indeterminate}}
 <script>
-	document.querySelector('#{{ id }}').indeterminate = true;
+	document.querySelector('#{{ id }}{{#if size }}-{{ size }}{{/if }}').indeterminate = true;
 </script>
 {{/if }}
diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index d4d770a23ef..e9106910e99 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -4,18 +4,25 @@
 @import "checkbox.variables";
 
 .elm-checkbox {
-	@include icon("\00A0", 24, "outline", $partial: $partial);
+	// $checkbox-size: 16;
+	// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
+	$checkbox-size: 20;
+	&:before {
+		font-size: 16px;
+	}
+
+	@include icon("\00A0", $checkbox-size, "outline", $partial: $partial);
 
 	appearance: none;
 	background-color: $checkbox---backgroundColor;
 	border: #{to-rem($pxValue: 1)} solid $checkbox---borderColor;
-	border-radius: 4px;
+	border-radius: 2.5px;
 	color: $checkbox---color;
-	height: to-rem($pxValue: 24);
+	height: to-rem($pxValue: $checkbox-size);
 	&[type="checkbox"] {
-		vertical-align: top;
+		vertical-align: middle;
 	}
-	width: to-rem($pxValue: 24);
+	width: to-rem($pxValue: $checkbox-size);
 
 	display: inline-flex;
 	justify-content: center;
@@ -64,5 +71,43 @@
 
 	& + label {
 		margin-left: $db-spacing-xs;
+
+		font-size: to-rem($pxValue: 12);
+	}
+
+	// Sizes
+	&%size-Small {
+		$checkbox-size: 16;
+		// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
+		&:before {
+			font-size: 16px;
+		}
+
+		height: to-rem($pxValue: $checkbox-size);
+		width: to-rem($pxValue: $checkbox-size);
+		// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
+		// @include iconMeta($checkbox-size);
+		@include iconMeta(20);
+	}
+	&%size-Large {
+		$checkbox-size: 24;
+		&:before {
+			font-size: 24px;
+		}
+
+		height: to-rem($pxValue: $checkbox-size);
+		width: to-rem($pxValue: $checkbox-size);
+		@include iconMeta($checkbox-size);
+
+		& + label {
+			font-size: to-rem($pxValue: 16);
+		}
+	}
+
+	&[data-size="small"] {
+		@extend %size-Small;
+	}
+	&[data-size="large"] {
+		@extend %size-Large;
 	}
 }

From 24c247ebf38b3daf680374e89bc5b4754f2403c1 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 30 Sep 2022 09:11:04 +0200
Subject: [PATCH 02/30] docs(checkbox): added sizes documentation

---
 .../01-elements/checkbox/_checkbox.md          | 18 ++++++++++++++++++
 .../_patterns/01-elements/checkbox/checkbox.md |  6 ------
 2 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 source/_patterns/01-elements/checkbox/_checkbox.md
 delete mode 100644 source/_patterns/01-elements/checkbox/checkbox.md

diff --git a/source/_patterns/01-elements/checkbox/_checkbox.md b/source/_patterns/01-elements/checkbox/_checkbox.md
new file mode 100644
index 00000000000..e8cf9031ac6
--- /dev/null
+++ b/source/_patterns/01-elements/checkbox/_checkbox.md
@@ -0,0 +1,18 @@
+---
+title: Checkbox
+state: inevaluation
+---
+
+## Variations/configurability
+
+### Size
+
+#### SCSS (recommended)
+
+Extend one of the size SCSS placeholders in case that you don't want the default (medium): `%size-Small` or `%size-Large`
+
+#### HTML attribute
+
+You could set the different button sizes via the `data-size` attribute, the default is "medium" and in that case is optional.
+
+[inspirational sources for this page]: # "https://www.uiguideline.com/components/checkbox"
diff --git a/source/_patterns/01-elements/checkbox/checkbox.md b/source/_patterns/01-elements/checkbox/checkbox.md
deleted file mode 100644
index 7b3ec8b057d..00000000000
--- a/source/_patterns/01-elements/checkbox/checkbox.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Checkbox
-state: complete
----
-
-[inspirational sources for this page]: # "https://www.uiguideline.com/components/checkbox"

From b4cc4b63e4dc4fbf13411c7c311d18808a62affe Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Mon, 3 Oct 2022 23:08:59 +0200
Subject: [PATCH 03/30] feat(checkbox): added required states styles

---
 source/_patterns/01-elements/checkbox/checkbox.hbs        | 3 ++-
 source/_patterns/01-elements/checkbox/checkbox.scss       | 8 ++++++++
 .../_patterns/01-elements/checkbox/checkbox~required.json | 4 ++++
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 source/_patterns/01-elements/checkbox/checkbox~required.json

diff --git a/source/_patterns/01-elements/checkbox/checkbox.hbs b/source/_patterns/01-elements/checkbox/checkbox.hbs
index 13e65713cf1..23c49c7a64d 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.hbs
+++ b/source/_patterns/01-elements/checkbox/checkbox.hbs
@@ -4,7 +4,8 @@
 	{{#if disabled}} disabled{{/if }}
 	value="{{ value }}"
 	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
-	{{#if size }} data-size="{{ size }}"{{/if }}>
+	{{#if size }} data-size="{{ size }}"{{/if }}
+	{{#if required }} required{{/if }}>
 <label class="elm-label" for="{{ id }}{{#if size }}-{{ size }}{{/if }}">{{ label }}</label>
 {{#if indeterminate}}
 <script>
diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index e9106910e99..45b2f8c9fac 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -110,4 +110,12 @@
 	&[data-size="large"] {
 		@extend %size-Large;
 	}
+
+	&:required {
+		& + label {
+			&::after {
+				content: " *";
+			}
+		}
+	}
 }
diff --git a/source/_patterns/01-elements/checkbox/checkbox~required.json b/source/_patterns/01-elements/checkbox/checkbox~required.json
new file mode 100644
index 00000000000..14cafc4d8bf
--- /dev/null
+++ b/source/_patterns/01-elements/checkbox/checkbox~required.json
@@ -0,0 +1,4 @@
+{
+	"id": "checkbox06",
+	"required": true
+}

From 57a74ecd5e71d5b2035aeb42ec28407785a7403e Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Mon, 3 Oct 2022 23:11:44 +0200
Subject: [PATCH 04/30] chore: further styling adaptions

---
 source/_patterns/01-elements/checkbox/checkbox.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 45b2f8c9fac..fe37901e445 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -8,15 +8,15 @@
 	// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
 	$checkbox-size: 20;
 	&:before {
-		font-size: 16px;
+		font-size: 18px;
 	}
 
 	@include icon("\00A0", $checkbox-size, "outline", $partial: $partial);
 
 	appearance: none;
 	background-color: $checkbox---backgroundColor;
-	border: #{to-rem($pxValue: 1)} solid $checkbox---borderColor;
-	border-radius: 2.5px;
+	border: 1px solid $checkbox---borderColor;
+	border-radius: 3px;
 	color: $checkbox---color;
 	height: to-rem($pxValue: $checkbox-size);
 	&[type="checkbox"] {
@@ -52,7 +52,7 @@
 			}
 		}
 		&:active {
-			background-color: rgba(40, 45, 55, 0.14);
+			background-color: rgba(0, 0, 0, 0.24);
 		}
 	}
 
@@ -65,7 +65,7 @@
 	&:disabled {
 		&,
 		& + label {
-			opacity: 0.5;
+			opacity: 0.25;
 		}
 	}
 
@@ -80,7 +80,7 @@
 		$checkbox-size: 16;
 		// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
 		&:before {
-			font-size: 16px;
+			font-size: 14px;
 		}
 
 		height: to-rem($pxValue: $checkbox-size);

From 4cc9fbe3cf4550c1ee468d7a21f5347e01291040 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Mon, 3 Oct 2022 23:17:07 +0200
Subject: [PATCH 05/30] chore: adapted to (and reduced) test URL list

---
 .pa11yci            |  7 +++++--
 tests/backstop.json | 50 +++++++++------------------------------------
 2 files changed, 15 insertions(+), 42 deletions(-)

diff --git a/.pa11yci b/.pa11yci
index c7079c2e4dd..6b789441889 100644
--- a/.pa11yci
+++ b/.pa11yci
@@ -91,13 +91,16 @@
 		"http://127.0.0.1:8080/patterns/elements-buttons-06-button-tertiary-plain/elements-buttons-06-button-tertiary-plain.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-buttons-09-button-sizes/elements-buttons-09-button-sizes.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-checked/elements-checkbox-checkbox-checked.rendered.html",
-		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-disabled-checked/elements-checkbox-checkbox-disabled-checked.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-disabled/elements-checkbox-checkbox-disabled.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-disabled-checked/elements-checkbox-checkbox-disabled-checked.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-indeterminate/elements-checkbox-checkbox-indeterminate.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background/elements-checkbox-checkbox-on-dark-background.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-checked/elements-checkbox-checkbox-on-dark-background-checked.rendered.html",
-		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-disabled-checked/elements-checkbox-checkbox-on-dark-background-disabled-checked.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-disabled/elements-checkbox-checkbox-on-dark-background-disabled.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-disabled-checked/elements-checkbox-checkbox-on-dark-background-disabled-checked.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-indeterminate/elements-checkbox-checkbox-on-dark-background-indeterminate.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-required/elements-checkbox-checkbox-required.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-sizes/elements-checkbox-checkbox-sizes.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-checkbox-checkbox/elements-checkbox-checkbox.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-image-image-avif/elements-image-image-avif.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-image-image-lazy-loading/elements-image-image-lazy-loading.rendered.html",
diff --git a/tests/backstop.json b/tests/backstop.json
index d71276a0b23..3c222f05211 100644
--- a/tests/backstop.json
+++ b/tests/backstop.json
@@ -539,48 +539,18 @@
 		},
 		{
 			"label": "Checkbox",
-			"url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox/elements-checkbox-checkbox.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox/elements-checkbox-checkbox.rendered.html"
+			"url": "http://127.0.0.1:8080/patterns/elements-checkbox/index.html",
+			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox/index.html"
 		},
 		{
-			"label": "Checkbox Checked",
-			"url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-checked/elements-checkbox-checkbox-checked.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-checked/elements-checkbox-checkbox-checked.rendered.html"
-		},
-		{
-			"label": "Checkbox Disabled",
-			"url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-disabled/elements-checkbox-checkbox-disabled.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-disabled/elements-checkbox-checkbox-disabled.rendered.html"
-		},
-		{
-			"label": "Checkbox Disabled Checked",
-			"url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-disabled-checked/elements-checkbox-checkbox-disabled-checked.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-disabled-checked/elements-checkbox-checkbox-disabled-checked.rendered.html"
-		},
-		{
-			"label": "Checkbox Indeterminate",
-			"url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-indeterminate/elements-checkbox-checkbox-indeterminate.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-indeterminate/elements-checkbox-checkbox-indeterminate.rendered.html"
-		},
-		{
-			"label": "Checkbox Indeterminate Checked",
-			"url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-indeterminate/elements-checkbox-checkbox-on-dark-background-indeterminate.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-on-dark-background-indeterminate/elements-checkbox-checkbox-on-dark-background-indeterminate.rendered.html"
-		},
-		{
-			"label": "Checkbox On Dark Background Checked",
-			"url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-checked/elements-checkbox-checkbox-on-dark-background-checked.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-on-dark-background-checked/elements-checkbox-checkbox-on-dark-background-checked.rendered.html"
-		},
-		{
-			"label": "Checkbox On Dark Background Disabled",
-			"url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-disabled/elements-checkbox-checkbox-on-dark-background-disabled.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-on-dark-background-disabled/elements-checkbox-checkbox-on-dark-background-disabled.rendered.html"
-		},
-		{
-			"label": "Checkbox On Dark Background Disabled Checked",
-			"url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-disabled-checked/elements-checkbox-checkbox-on-dark-background-disabled-checked.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-on-dark-background-disabled-checked/elements-checkbox-checkbox-on-dark-background-disabled-checked.rendered.html"
+			"label": "Checkbox - hovered",
+			"url": "http://127.0.0.1:8080/patterns/elements-checkbox/index.html",
+			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox/index.html",
+			"hoverSelectors": [
+				".elm-checkbox"
+			],
+			"postInteractionWait": 1000,
+			"onReadyScript": "puppet/clickAndHoverHelper.js"
 		},
 		{
 			"label": "Image",

From b156778b6e824e365d36a0f41c33b05252449105 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 21 Oct 2022 09:23:17 +0200
Subject: [PATCH 06/30] chore: stylelint fix

---
 .../01-elements/checkbox/checkbox.scss        | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 97fd89707f8..fef9138ee28 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -7,26 +7,29 @@
 	// $checkbox-size: 16;
 	// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
 	$checkbox-size: 20;
-	&:before {
-		font-size: 18px;
-	}
 
 	@include icon("\00A0", $checkbox-size, "outline", $partial: $partial);
+	align-content: center;
 
 	appearance: none;
 	background-color: $checkbox---backgroundColor;
 	border: 1px solid $checkbox---borderColor;
 	border-radius: 3px;
 	color: $checkbox---color;
+
+	display: inline-flex;
 	height: to-rem($pxValue: $checkbox-size);
+	justify-content: center;
+	width: to-rem($pxValue: $checkbox-size);
+
+	// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
+	&::before {
+		font-size: 18px;
+	}
+
 	&[type="checkbox"] {
 		vertical-align: middle;
 	}
-	width: to-rem($pxValue: $checkbox-size);
-
-	display: inline-flex;
-	justify-content: center;
-	align-content: center;
 
 	&::before {
 		--icon-font-size: 1.375rem;
@@ -72,34 +75,35 @@
 	}
 
 	& + label {
-		margin-left: $db-spacing-0-5;
-
 		font-size: to-rem($pxValue: 12);
+		margin-left: $db-spacing-0-5;
 	}
 
 	// Sizes
 	&%size-Small {
 		$checkbox-size: 16;
 		// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
-		&:before {
-			font-size: 14px;
-		}
+		// @include iconMeta($checkbox-size);
+		@include iconMeta(20);
 
 		height: to-rem($pxValue: $checkbox-size);
 		width: to-rem($pxValue: $checkbox-size);
 		// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
-		// @include iconMeta($checkbox-size);
-		@include iconMeta(20);
+		&::before {
+			font-size: 14px;
+		}
 	}
+
 	&%size-Large {
 		$checkbox-size: 24;
-		&:before {
-			font-size: 24px;
-		}
+		@include iconMeta($checkbox-size);
 
 		height: to-rem($pxValue: $checkbox-size);
 		width: to-rem($pxValue: $checkbox-size);
-		@include iconMeta($checkbox-size);
+
+		&::before {
+			font-size: 24px;
+		}
 
 		& + label {
 			font-size: to-rem($pxValue: 16);
@@ -109,6 +113,7 @@
 	&[data-size="small"] {
 		@extend %size-Small;
 	}
+
 	&[data-size="large"] {
 		@extend %size-Large;
 	}

From 1e8013da628094ade0bfc0163a88d223330bc518 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 4 Nov 2022 07:56:56 +0100
Subject: [PATCH 07/30] refactor: simplified sizing by using aspect-ratio

---
 source/_patterns/01-elements/checkbox/checkbox.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index fef9138ee28..6c0d39c6bf5 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -12,6 +12,9 @@
 	align-content: center;
 
 	appearance: none;
+
+	aspect-ratio: 1;
+
 	background-color: $checkbox---backgroundColor;
 	border: 1px solid $checkbox---borderColor;
 	border-radius: 3px;
@@ -20,7 +23,6 @@
 	display: inline-flex;
 	height: to-rem($pxValue: $checkbox-size);
 	justify-content: center;
-	width: to-rem($pxValue: $checkbox-size);
 
 	// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
 	&::before {
@@ -87,7 +89,6 @@
 		@include iconMeta(20);
 
 		height: to-rem($pxValue: $checkbox-size);
-		width: to-rem($pxValue: $checkbox-size);
 		// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
 		&::before {
 			font-size: 14px;
@@ -99,7 +100,6 @@
 		@include iconMeta($checkbox-size);
 
 		height: to-rem($pxValue: $checkbox-size);
-		width: to-rem($pxValue: $checkbox-size);
 
 		&::before {
 			font-size: 24px;

From 5801e957b33a82ffb83f1e0a184533d0234c9477 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 4 Nov 2022 07:58:55 +0100
Subject: [PATCH 08/30] chore: added a comment

---
 source/_patterns/01-elements/checkbox/checkbox.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 6c0d39c6bf5..dc10d36b777 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -63,6 +63,8 @@
 		}
 	}
 
+	// TODO: We need to set the correct styling / color for invalid
+
 	&:indeterminate {
 		&::before {
 			content: glyph(minus);

From c11970f33ba31c5304375a3a5b45b5657412e159 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 4 Nov 2022 08:00:44 +0100
Subject: [PATCH 09/30] refactor: rework on the sizes available

---
 .../01-elements/checkbox/_checkbox.md         |  2 +-
 .../01-elements/checkbox/checkbox.scss        | 23 ++-----------------
 2 files changed, 3 insertions(+), 22 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/_checkbox.md b/source/_patterns/01-elements/checkbox/_checkbox.md
index e8cf9031ac6..ede2a3c1993 100644
--- a/source/_patterns/01-elements/checkbox/_checkbox.md
+++ b/source/_patterns/01-elements/checkbox/_checkbox.md
@@ -9,7 +9,7 @@ state: inevaluation
 
 #### SCSS (recommended)
 
-Extend one of the size SCSS placeholders in case that you don't want the default (medium): `%size-Small` or `%size-Large`
+Extend the size SCSS placeholders in case that you don't want the default (medium): `%size-Small`
 
 #### HTML attribute
 
diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index dc10d36b777..5b0b49607d5 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -6,7 +6,7 @@
 .elm-checkbox {
 	// $checkbox-size: 16;
 	// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
-	$checkbox-size: 20;
+	$checkbox-size: 24;
 
 	@include icon("\00A0", $checkbox-size, "outline", $partial: $partial);
 	align-content: center;
@@ -26,7 +26,7 @@
 
 	// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
 	&::before {
-		font-size: 18px;
+		font-size: 20px;
 	}
 
 	&[type="checkbox"] {
@@ -97,29 +97,10 @@
 		}
 	}
 
-	&%size-Large {
-		$checkbox-size: 24;
-		@include iconMeta($checkbox-size);
-
-		height: to-rem($pxValue: $checkbox-size);
-
-		&::before {
-			font-size: 24px;
-		}
-
-		& + label {
-			font-size: to-rem($pxValue: 16);
-		}
-	}
-
 	&[data-size="small"] {
 		@extend %size-Small;
 	}
 
-	&[data-size="large"] {
-		@extend %size-Large;
-	}
-
 	&:required {
 		& + label {
 			&::after {

From 52c9942d18896a2f2bd64b38ce16e52b89af2146 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 10 Nov 2022 08:38:05 +0100
Subject: [PATCH 10/30] refactor: removed the obsolete large checkbox size

---
 source/_patterns/01-elements/checkbox/checkbox-sizes.json | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox-sizes.json b/source/_patterns/01-elements/checkbox/checkbox-sizes.json
index 4fe2b47b95e..99007f953da 100644
--- a/source/_patterns/01-elements/checkbox/checkbox-sizes.json
+++ b/source/_patterns/01-elements/checkbox/checkbox-sizes.json
@@ -7,10 +7,6 @@
 		{
 			"size": "medium",
 			"label": "Medium (default, data-size attribute is optional)"
-		},
-		{
-			"size": "large",
-			"label": "Large"
 		}
 	],
 	"id": "checkbox05",

From 744a2ec1f492239469712bb2ebbbed632269c325 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 10 Nov 2022 08:39:54 +0100
Subject: [PATCH 11/30] refactor: checkbox styling

---
 .../01-elements/checkbox/checkbox.scss        | 25 +++++--------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 5b0b49607d5..4e1897229db 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -4,11 +4,9 @@
 @import "checkbox.variables";
 
 .elm-checkbox {
-	// $checkbox-size: 16;
-	// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
 	$checkbox-size: 24;
 
-	@include icon("\00A0", $checkbox-size, "outline", $partial: $partial);
+	@include icon("\00A0", 20, "outline", $partial: $partial);
 	align-content: center;
 
 	appearance: none;
@@ -24,17 +22,11 @@
 	height: to-rem($pxValue: $checkbox-size);
 	justify-content: center;
 
-	// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
-	&::before {
-		font-size: 20px;
-	}
-
 	&[type="checkbox"] {
 		vertical-align: middle;
 	}
 
 	&::before {
-		--icon-font-size: 1.375rem;
 		margin-right: 0;
 	}
 
@@ -79,21 +71,16 @@
 	}
 
 	& + label {
-		font-size: to-rem($pxValue: 12);
-		margin-left: $db-spacing-0-5;
+		margin-left: $db-spacing-fixed-normal-xs;
 	}
 
 	// Sizes
 	&%size-Small {
-		$checkbox-size: 16;
-		// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
-		// @include iconMeta($checkbox-size);
-		@include iconMeta(20);
+		@include iconMeta(16);
+		height: to-rem($pxValue: 20);
 
-		height: to-rem($pxValue: $checkbox-size);
-		// TODO: Replace this ugly hack as soon as we've got this as an icon font as well
-		&::before {
-			font-size: 14px;
+		& + label {
+			font-size: to-rem($pxValue: 14);
 		}
 	}
 

From 8f794bbedd3fc9685eb6f0ce136ab4eebde14a1d Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 10 Nov 2022 10:23:21 +0100
Subject: [PATCH 12/30] fix: checkbox spacings

---
 source/_patterns/01-elements/checkbox/checkbox.hbs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.hbs b/source/_patterns/01-elements/checkbox/checkbox.hbs
index 23c49c7a64d..98aef34bf3f 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.hbs
+++ b/source/_patterns/01-elements/checkbox/checkbox.hbs
@@ -5,8 +5,8 @@
 	value="{{ value }}"
 	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
 	{{#if size }} data-size="{{ size }}"{{/if }}
-	{{#if required }} required{{/if }}>
-<label class="elm-label" for="{{ id }}{{#if size }}-{{ size }}{{/if }}">{{ label }}</label>
+	{{#if required }} required{{/if }}
+><label class="elm-label" for="{{ id }}{{#if size }}-{{ size }}{{/if }}">{{ label }}</label>
 {{#if indeterminate}}
 <script>
 	document.querySelector('#{{ id }}{{#if size }}-{{ size }}{{/if }}').indeterminate = true;

From de3d2564947e82711d443d7297d109eed6bbe542 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 11 Nov 2022 07:54:17 +0100
Subject: [PATCH 13/30] refactor: we even need to differentiate the font-size
 on sized icons at some points

---
 .../00-base/icons/_icons.helpers.scss          |  9 +++++++--
 .../01-elements/checkbox/checkbox.scss         | 18 +++++++++++-------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/source/_patterns/00-base/icons/_icons.helpers.scss b/source/_patterns/00-base/icons/_icons.helpers.scss
index 2884e301d65..26adc5aaae5 100644
--- a/source/_patterns/00-base/icons/_icons.helpers.scss
+++ b/source/_patterns/00-base/icons/_icons.helpers.scss
@@ -89,10 +89,15 @@
 }
 
 // Icon meta data mixin
-@mixin iconMeta($size: $icon-size, $style: $icon-style, $position: "before") {
+@mixin iconMeta(
+	$size: $icon-size,
+	$style: $icon-style,
+	$position: "before",
+	$font-size: $icon-size
+) {
 	&::#{$position} {
 		--icon-font-family: "#{"icons-" + $size + "-" + $style}",
 			"missing-icons" !important;
-		--icon-font-size: #{to-rem($pxValue: $size)};
+		--icon-font-size: #{to-rem($pxValue: $font-size)};
 	}
 }
diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 4e1897229db..1443de8449d 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -6,7 +6,8 @@
 .elm-checkbox {
 	$checkbox-size: 24;
 
-	@include icon("\00A0", 20, "outline", $partial: $partial);
+	@include icon("\00A0", $checkbox-size, "outline", $partial: $partial);
+	@include iconMeta($font-size: $checkbox-size - 2);
 	align-content: center;
 
 	appearance: none;
@@ -23,12 +24,10 @@
 	justify-content: center;
 
 	&[type="checkbox"] {
-		vertical-align: middle;
+		vertical-align: sub;
 	}
 
-	&::before {
-		margin-right: 0;
-	}
+	--icon-margin-after: 0;
 
 	&:checked {
 		background-color: $checkbox--checked-backgroundColor;
@@ -76,8 +75,13 @@
 
 	// Sizes
 	&%size-Small {
-		@include iconMeta(16);
-		height: to-rem($pxValue: 20);
+		$checkbox-size: 20;
+
+		@include iconMeta(
+			$size: $checkbox-size,
+			$font-size: $checkbox-size - 2
+		);
+		height: to-rem($pxValue: $checkbox-size);
 
 		& + label {
 			font-size: to-rem($pxValue: 14);

From c0cc9b8bca7a59d62261ffabae81e48deb313af5 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 16 Dec 2022 09:30:15 +0100
Subject: [PATCH 14/30] test: fix html validate feedback

---
 source/_patterns/01-elements/checkbox/checkbox-sizes.hbs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/_patterns/01-elements/checkbox/checkbox-sizes.hbs b/source/_patterns/01-elements/checkbox/checkbox-sizes.hbs
index e20439501e6..a0222c793bc 100644
--- a/source/_patterns/01-elements/checkbox/checkbox-sizes.hbs
+++ b/source/_patterns/01-elements/checkbox/checkbox-sizes.hbs
@@ -1,4 +1,5 @@
 {{#each sizes }}
+	<!-- [html-validate-disable-next heading-level -- the h1 is already provided by the general pattern] -->
 	<h2>{{ label }}</h2>
 	<p>
 		{{> elements-checkbox id=../id }}

From 9f20547d7bff553ae08cf8e39fdd4019633ad223 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 16 Dec 2022 09:35:34 +0100
Subject: [PATCH 15/30] chore: stylelint order feedback

---
 source/_patterns/01-elements/checkbox/checkbox.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 3c6bfd370f5..84a7d15e794 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -8,6 +8,8 @@
 @import "checkbox.variables";
 
 .elm-checkbox {
+	--icon-margin-after: 0;
+
 	$checkbox-size: 24;
 
 	@include icon("\00A0", $checkbox-size, "outline", $partial: $partial);
@@ -31,8 +33,6 @@
 		vertical-align: sub;
 	}
 
-	--icon-margin-after: 0;
-
 	&:checked {
 		background-color: $checkbox--checked-backgroundColor;
 

From 9c0c6da33eec272e5ec24a1129a28b2ad4110924 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 16 Dec 2022 09:49:08 +0100
Subject: [PATCH 16/30] refactor: needed to update DB UI Base with an enhanced
 mixin

---
 package-lock.json                                  | 14 +++++++-------
 package.json                                       |  2 +-
 .../_patterns/01-elements/checkbox/checkbox.scss   |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a583bb23312..6c46fd2e0d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@csstools/normalize.css": "^12.0.0",
-        "@db-ui/base": "2.0.0-18-812537f"
+        "@db-ui/base": "2.0.0-19-be865bb"
       },
       "devDependencies": {
         "@babel/cli": "^7.19.3",
@@ -2216,9 +2216,9 @@
       }
     },
     "node_modules/@db-ui/base": {
-      "version": "2.0.0-18-812537f",
-      "resolved": "https://registry.npmjs.org/@db-ui/base/-/base-2.0.0-18-812537f.tgz",
-      "integrity": "sha512-1Yyhd713xlKk2uPriA47HH/wKHcQDCM0Ac7uFPUEGuNNpPMzYZCgsegSCgdg779dTq5xBCAzXmiTctDCmjfSWw==",
+      "version": "2.0.0-19-be865bb",
+      "resolved": "https://registry.npmjs.org/@db-ui/base/-/base-2.0.0-19-be865bb.tgz",
+      "integrity": "sha512-qd1y11EsKU3NVjF3V3UIri0AYgCPax8xybzOW19FiKvRCZ2KO0oE2SGb63WMcNJM8sC+OSoiXcm8PwnDbhhHlQ==",
       "dependencies": {
         "@csstools/normalize.css": "^12.0.0"
       }
@@ -18614,9 +18614,9 @@
       "requires": {}
     },
     "@db-ui/base": {
-      "version": "2.0.0-18-812537f",
-      "resolved": "https://registry.npmjs.org/@db-ui/base/-/base-2.0.0-18-812537f.tgz",
-      "integrity": "sha512-1Yyhd713xlKk2uPriA47HH/wKHcQDCM0Ac7uFPUEGuNNpPMzYZCgsegSCgdg779dTq5xBCAzXmiTctDCmjfSWw==",
+      "version": "2.0.0-19-be865bb",
+      "resolved": "https://registry.npmjs.org/@db-ui/base/-/base-2.0.0-19-be865bb.tgz",
+      "integrity": "sha512-qd1y11EsKU3NVjF3V3UIri0AYgCPax8xybzOW19FiKvRCZ2KO0oE2SGb63WMcNJM8sC+OSoiXcm8PwnDbhhHlQ==",
       "requires": {
         "@csstools/normalize.css": "^12.0.0"
       }
diff --git a/package.json b/package.json
index 73ee3e7f3e5..b098b1ab8e6 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@csstools/normalize.css": "^12.0.0",
-    "@db-ui/base": "2.0.0-18-812537f"
+    "@db-ui/base": "2.0.0-19-be865bb"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 84a7d15e794..613c3a79594 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -13,7 +13,7 @@
 	$checkbox-size: 24;
 
 	@include icon("\00A0", $checkbox-size, "outline", $partial: $partial);
-	@include iconMeta($font-size: $checkbox-size - 2);
+	@include icon-meta($font-size: $checkbox-size - 2);
 	align-content: center;
 
 	appearance: none;
@@ -81,7 +81,7 @@
 	&%size-Small {
 		$checkbox-size: 20;
 
-		@include iconMeta(
+		@include icon-meta(
 			$size: $checkbox-size,
 			$font-size: $checkbox-size - 2
 		);

From c9d322c86ebf591d250297ba312694ee9d37763d Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 13 Jan 2023 23:27:57 +0100
Subject: [PATCH 17/30] refactor: aligned tonality display

---
 source/_data/enterprise/data.json             |  3 ++-
 .../00-base/_init.demonstration.scss          | 11 +++++++++
 .../checkbox/checkbox-tonality.hbs            |  7 ++++++
 .../01-elements/input/input-sizes.hbs         |  6 -----
 .../01-elements/input/input-sizes.json        | 19 ---------------
 .../01-elements/input/input-sizes.md          |  4 ----
 .../01-elements/input/input-tonality.hbs      |  6 +++++
 .../01-elements/input/input-tonality.json     |  5 ++++
 .../01-elements/input/input-tonality.md       |  4 ++++
 .../01-elements/input/input-variations.hbs    | 14 +++++------
 .../01-elements/link/links-tonality.hbs       | 10 ++++++++
 .../_patterns/01-elements/link/tonality.hbs   | 24 -------------------
 12 files changed, 51 insertions(+), 62 deletions(-)
 create mode 100644 source/_patterns/01-elements/checkbox/checkbox-tonality.hbs
 delete mode 100644 source/_patterns/01-elements/input/input-sizes.hbs
 delete mode 100644 source/_patterns/01-elements/input/input-sizes.json
 delete mode 100644 source/_patterns/01-elements/input/input-sizes.md
 create mode 100644 source/_patterns/01-elements/input/input-tonality.hbs
 create mode 100644 source/_patterns/01-elements/input/input-tonality.json
 create mode 100644 source/_patterns/01-elements/input/input-tonality.md
 create mode 100644 source/_patterns/01-elements/link/links-tonality.hbs
 delete mode 100644 source/_patterns/01-elements/link/tonality.hbs

diff --git a/source/_data/enterprise/data.json b/source/_data/enterprise/data.json
index 854445673fb..e6730eee15b 100644
--- a/source/_data/enterprise/data.json
+++ b/source/_data/enterprise/data.json
@@ -17,5 +17,6 @@
 	},
 	"href": "#",
 	"title": "Title text",
-	"alt": "Alt text - not tag ! ;-)"
+	"alt": "Alt text - not tag ! ;-)",
+	"tonality": ["functional", "regular", "expressive"]
 }
diff --git a/source/_patterns/00-base/_init.demonstration.scss b/source/_patterns/00-base/_init.demonstration.scss
index d8815b9e923..4139662af46 100644
--- a/source/_patterns/00-base/_init.demonstration.scss
+++ b/source/_patterns/00-base/_init.demonstration.scss
@@ -10,3 +10,14 @@ body.styleguide {
 	margin: -1rem -0.5rem;
 	padding: 1rem 0.5rem;
 }
+
+dl.variations {
+	dd {
+		&[data-tonality="regular"],
+		&[data-tonality="functional"] {
+			& + dt {
+				visibility: hidden;
+			}
+		}
+	}
+}
diff --git a/source/_patterns/01-elements/checkbox/checkbox-tonality.hbs b/source/_patterns/01-elements/checkbox/checkbox-tonality.hbs
new file mode 100644
index 00000000000..f18c7280893
--- /dev/null
+++ b/source/_patterns/01-elements/checkbox/checkbox-tonality.hbs
@@ -0,0 +1,7 @@
+{{#each tonality as |tonality| }}
+	<!-- [html-validate-disable-next heading-level -- the h1 is already provided by the general pattern] -->
+	<h2>{{ tonality }}</h2>
+	<p data-tonality="{{ tonality }}">
+		{{> elements-checkbox id=(unique-id) label="Checkbox" }}
+	</p>
+{{/each }}
diff --git a/source/_patterns/01-elements/input/input-sizes.hbs b/source/_patterns/01-elements/input/input-sizes.hbs
deleted file mode 100644
index b8cef535224..00000000000
--- a/source/_patterns/01-elements/input/input-sizes.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<dl>
-{{#each sizes}}
-	<dt>{{size}}:</dt>
-	<dd class="db-ui-{{size}}">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
-{{/each }}
-</dl>
diff --git a/source/_patterns/01-elements/input/input-sizes.json b/source/_patterns/01-elements/input/input-sizes.json
deleted file mode 100644
index 5cf164d2f47..00000000000
--- a/source/_patterns/01-elements/input/input-sizes.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-	"sizes": [
-		{
-			"size": "functional",
-			"label": "Functional"
-		},
-		{
-			"size": "regular",
-			"label": "Regular (default, data-size attribute is optional)"
-		},
-		{
-			"size": "expressive",
-			"label": "Expressive"
-		}
-	],
-	"type": "text",
-	"placeholder": "e.g. DB User",
-	"label": "Textlabel"
-}
diff --git a/source/_patterns/01-elements/input/input-sizes.md b/source/_patterns/01-elements/input/input-sizes.md
deleted file mode 100644
index 8a5277013a5..00000000000
--- a/source/_patterns/01-elements/input/input-sizes.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Input sizes
-order: 1
----
diff --git a/source/_patterns/01-elements/input/input-tonality.hbs b/source/_patterns/01-elements/input/input-tonality.hbs
new file mode 100644
index 00000000000..604ce57ce66
--- /dev/null
+++ b/source/_patterns/01-elements/input/input-tonality.hbs
@@ -0,0 +1,6 @@
+<dl>
+{{#each tonality as |tonality| }}
+	<dt>{{ tonality }}:</dt>
+	<dd data-tonality="{{ tonality }}">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
+{{/each }}
+</dl>
diff --git a/source/_patterns/01-elements/input/input-tonality.json b/source/_patterns/01-elements/input/input-tonality.json
new file mode 100644
index 00000000000..0d8a5e30cda
--- /dev/null
+++ b/source/_patterns/01-elements/input/input-tonality.json
@@ -0,0 +1,5 @@
+{
+	"type": "text",
+	"placeholder": "e.g. DB User",
+	"label": "Textlabel"
+}
diff --git a/source/_patterns/01-elements/input/input-tonality.md b/source/_patterns/01-elements/input/input-tonality.md
new file mode 100644
index 00000000000..f5b073e6231
--- /dev/null
+++ b/source/_patterns/01-elements/input/input-tonality.md
@@ -0,0 +1,4 @@
+---
+title: Input tonality
+order: 1
+---
diff --git a/source/_patterns/01-elements/input/input-variations.hbs b/source/_patterns/01-elements/input/input-variations.hbs
index 3dbfb4691e3..b18a37cb543 100644
--- a/source/_patterns/01-elements/input/input-variations.hbs
+++ b/source/_patterns/01-elements/input/input-variations.hbs
@@ -1,10 +1,8 @@
-<dl class="db-ui-normal">
-{{#each variations}}
-	<dt>{{variant}}:</dt>
-	<dd class="db-ui-functional">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
-	<dt>&nbsp;</dt>
-	<dd class="db-ui-normal">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
-	<dt>&nbsp;</dt>
-	<dd class="db-ui-expressive">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
+<dl data-tonality="regular" class="variations">
+{{#each variations }}
+	{{#each ../tonality }}
+		<dt>{{ ../variant }}:</dt>
+		<dd data-tonality="{{ this }}">{{> elements-input variant=../variant message=../message description=../description type=../../type label=../../label placeholder=../../placeholder id=(unique-id) }}</dd>
+	{{/each }}
 {{/each }}
 </dl>
diff --git a/source/_patterns/01-elements/link/links-tonality.hbs b/source/_patterns/01-elements/link/links-tonality.hbs
new file mode 100644
index 00000000000..6c7665b3c33
--- /dev/null
+++ b/source/_patterns/01-elements/link/links-tonality.hbs
@@ -0,0 +1,10 @@
+<dl>
+{{#each tonality as |tonality| }}
+	<dt>{{ tonality }}:</dt>
+	<dd data-tonality="{{ tonality }}">
+		{{> elements-link href='#' value='Internal link' data-content='internal' }}
+		{{> elements-link href='#' value='External link' data-content='external' }}
+		{{> elements-link href='#' value='Internal link small' data-content='internal' size="small" }}
+		{{> elements-link href='#' value='External link small' data-content='external' size="small" }}</dd>
+{{/each }}
+</dl>
diff --git a/source/_patterns/01-elements/link/tonality.hbs b/source/_patterns/01-elements/link/tonality.hbs
deleted file mode 100644
index ee3f4764d1e..00000000000
--- a/source/_patterns/01-elements/link/tonality.hbs
+++ /dev/null
@@ -1,24 +0,0 @@
-
-<p class="db-ui-functional">
-	{{> elements-link href='#' value='Internal link functional' data-content='internal' }}
-	{{> elements-link href='#' value='External link functional' data-content='external' }}
-	{{> elements-link href='#' value='Internal link functional small' data-content='internal' size="small" }}
-	{{> elements-link href='#' value='External link functional small' data-content='external' size="small" }}
-</p>
-
-
-<p class="db-ui-regular">
-	{{> elements-link href='#' value='Internal link regular (Default)' data-content='internal' }}
-	{{> elements-link href='#' value='External link regular (Default)' data-content='external' }}
-	{{> elements-link href='#' value='Internal link regular (Default) small' data-content='internal' size="small" }}
-	{{> elements-link href='#' value='External link regular (Default) small' data-content='external' size="small" }}
-</p>
-
-
-
-<p class="db-ui-expressive">
-	{{> elements-link href='#' value='Internal link expressive' data-content='internal' }}
-	{{> elements-link href='#' value='External link expressive' data-content='external' }}
-	{{> elements-link href='#' value='Internal link expressive small' data-content='internal' size="small" }}
-	{{> elements-link href='#' value='External link expressive small' data-content='external' size="small" }}
-</p>

From 32dcf4d4b68dc9c789348dda23edcdb653e063bb Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 13 Jan 2023 23:37:40 +0100
Subject: [PATCH 18/30] refactor: tonality display

---
 .../_patterns/01-elements/checkbox/checkbox-tonality.hbs | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox-tonality.hbs b/source/_patterns/01-elements/checkbox/checkbox-tonality.hbs
index f18c7280893..6415edbf979 100644
--- a/source/_patterns/01-elements/checkbox/checkbox-tonality.hbs
+++ b/source/_patterns/01-elements/checkbox/checkbox-tonality.hbs
@@ -1,7 +1,6 @@
+<dl>
 {{#each tonality as |tonality| }}
-	<!-- [html-validate-disable-next heading-level -- the h1 is already provided by the general pattern] -->
-	<h2>{{ tonality }}</h2>
-	<p data-tonality="{{ tonality }}">
-		{{> elements-checkbox id=(unique-id) label="Checkbox" }}
-	</p>
+	<dt>{{ tonality }}:</dt>
+	<dd data-tonality="{{ tonality }}">{{> elements-checkbox id=(unique-id) label="Checkbox" }}</dd>
 {{/each }}
+</dl>

From 1b4c88a4edd669668c99650f743ca54e0f6de827 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 27 Jan 2023 05:40:05 +0100
Subject: [PATCH 19/30] chore: regenerated lock file

---
 package-lock.json | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b7cd71ffaf9..d7adca5e141 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@csstools/normalize.css": "^12.0.0",
-        "@db-ui/base": "^0.19.4"
+        "@db-ui/base": "2.0.0-20-58c8a10"
       },
       "devDependencies": {
         "@babel/cli": "^7.20.7",
@@ -2221,9 +2221,12 @@
       }
     },
     "node_modules/@db-ui/base": {
-      "version": "0.19.4",
-      "resolved": "https://registry.npmjs.org/@db-ui/base/-/base-0.19.4.tgz",
-      "integrity": "sha512-bTP4d3FxxSRI0T3dzGDVHU30eY+q46qiKxy4+1WQ4sbXoyfPOeqDDo/ImNqhyO/C4aujgPczqfWHnqEM2VD/Aw=="
+      "version": "2.0.0-20-58c8a10",
+      "resolved": "https://registry.npmjs.org/@db-ui/base/-/base-2.0.0-20-58c8a10.tgz",
+      "integrity": "sha512-y8sCmlJeqF2/0mlaEZ3UMSdIHSz+kwQ50x4Ojq3sxZExjjn31gVMMAq6ZJa/2+ROPhsOjoK9HgF9ROhKleDZow==",
+      "dependencies": {
+        "@csstools/normalize.css": "^12.0.0"
+      }
     },
     "node_modules/@eslint/eslintrc": {
       "version": "1.4.1",
@@ -19537,9 +19540,12 @@
       "requires": {}
     },
     "@db-ui/base": {
-      "version": "0.19.4",
-      "resolved": "https://registry.npmjs.org/@db-ui/base/-/base-0.19.4.tgz",
-      "integrity": "sha512-bTP4d3FxxSRI0T3dzGDVHU30eY+q46qiKxy4+1WQ4sbXoyfPOeqDDo/ImNqhyO/C4aujgPczqfWHnqEM2VD/Aw=="
+      "version": "2.0.0-20-58c8a10",
+      "resolved": "https://registry.npmjs.org/@db-ui/base/-/base-2.0.0-20-58c8a10.tgz",
+      "integrity": "sha512-y8sCmlJeqF2/0mlaEZ3UMSdIHSz+kwQ50x4Ojq3sxZExjjn31gVMMAq6ZJa/2+ROPhsOjoK9HgF9ROhKleDZow==",
+      "requires": {
+        "@csstools/normalize.css": "^12.0.0"
+      }
     },
     "@eslint/eslintrc": {
       "version": "1.4.1",

From 06d281e5c1ad8ebdceab59fadc588a4a09ac2f59 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 27 Jan 2023 06:51:54 +0100
Subject: [PATCH 20/30] refactor: corrected the sizes

---
 .../01-elements/checkbox/checkbox-sizes.hbs   |  2 +-
 .../01-elements/checkbox/checkbox.scss        | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox-sizes.hbs b/source/_patterns/01-elements/checkbox/checkbox-sizes.hbs
index a0222c793bc..c29b07dfebd 100644
--- a/source/_patterns/01-elements/checkbox/checkbox-sizes.hbs
+++ b/source/_patterns/01-elements/checkbox/checkbox-sizes.hbs
@@ -1,5 +1,5 @@
 {{#each sizes }}
-	<!-- [html-validate-disable-next heading-level -- the h1 is already provided by the general pattern] -->
+	<!-- [html-validate-disable-next heading-level, no-unused-disable -- the h1 is already provided by the general pattern] -->
 	<h2>{{ label }}</h2>
 	<p>
 		{{> elements-checkbox id=../id }}
diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 613c3a79594..460b67c3992 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -9,11 +9,13 @@
 
 .elm-checkbox {
 	--icon-margin-after: 0;
+	--checkbox-size: #{$db-sizing-sm};
 
 	$checkbox-size: 24;
 
 	@include icon("\00A0", $checkbox-size, "outline", $partial: $partial);
 	@include icon-meta($font-size: $checkbox-size - 2);
+
 	align-content: center;
 
 	appearance: none;
@@ -26,11 +28,16 @@
 	color: $checkbox---color;
 
 	display: inline-flex;
-	height: to-rem($pxValue: $checkbox-size);
+	height: var(--checkbox-size);
 	justify-content: center;
 
 	&[type="checkbox"] {
-		vertical-align: sub;
+		vertical-align: bottom;
+	}
+
+	// Icons font size
+	&::before {
+		--icon-font-size: calc(var(--checkbox-size) - 2px);
 	}
 
 	&:checked {
@@ -79,13 +86,7 @@
 
 	// Sizes
 	&%size-Small {
-		$checkbox-size: 20;
-
-		@include icon-meta(
-			$size: $checkbox-size,
-			$font-size: $checkbox-size - 2
-		);
-		height: to-rem($pxValue: $checkbox-size);
+		--checkbox-size: calc(#{$db-sizing-sm} * 0.83333333);
 
 		& + label {
 			font-size: to-rem($pxValue: 14);

From 51b655c54d468b85f9124e3cee8fde3c6f8850ea Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Fri, 27 Jan 2023 07:18:55 +0100
Subject: [PATCH 21/30] Update checkbox.scss

---
 source/_patterns/01-elements/checkbox/checkbox.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 460b67c3992..87db27e2147 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -88,6 +88,7 @@
 	&%size-Small {
 		--checkbox-size: calc(#{$db-sizing-sm} * 0.83333333);
 
+		// TODO: we still need to scale this
 		& + label {
 			font-size: to-rem($pxValue: 14);
 		}

From 9a4f8e4fcf30217aca3affeea6ec8eece445af39 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 27 Jan 2023 07:27:52 +0100
Subject: [PATCH 22/30] docs: added entry to migrationguide

---
 docs/migrationGuide.adoc | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/migrationGuide.adoc b/docs/migrationGuide.adoc
index eb6c80b1633..006f1ae6762 100644
--- a/docs/migrationGuide.adoc
+++ b/docs/migrationGuide.adoc
@@ -38,7 +38,7 @@ We've remove the deprecated previous HTML implementation of the label by an `out
 
 === `input`
 
-- The input background style variations `semitransparent`, `solid`, `white` and `outline` have been removed. Input fields have only one background style left. 
+- The input background style variations `semitransparent`, `solid`, `white` and `outline` have been removed. Input fields have only one background style left.
 - Introducing 3 different sizes of input fields according to our `tonality` introduction: `functional`, `regular`, `expressive
 - Integration of `data-icon-before` and `data-icon-after` property for enabling use of custom icons in input fields
 - Introducing new variations: `error`, `warning`, `success` and `information` following the new guidelines 3.0 color system
@@ -50,6 +50,11 @@ We've remove the deprecated previous HTML implementation of the label by an `out
 - Changed use of `data-variant` to use with `primary` and used `data-content` attribute for differentiation between `internal` and `external`
 - Font-size definition has moved to DB UI Base due to our `tonality` introduction (default and for `data-size=small`)
 
+=== `checkbox`
+
+- Introducing 3 different sizes of checkbox elements according to our `tonality` introduction: `functional`, `regular`, `expressive
+- Additionally to set the size via `tonality`, we've even also introduced a `size` setting for the radios, with which you could decrease the size by one level
+
 == DB UI Core 2.2.0 Migration Guide
 
 === progress element

From dda5fb9e3037f04a67fc1e4f8950b145ae1fd028 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Tue, 31 Jan 2023 09:05:51 +0100
Subject: [PATCH 23/30] refactor: added necessary references

---
 source/_patterns/01-elements/checkbox/checkbox.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 87db27e2147..4917cb77f5a 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -1,6 +1,7 @@
 @charset "utf-8";
 
 @use "@db-ui/base/build/scss/variables" as *;
+@use "@db-ui/base/build/scss/variables.global" as *;
 @use "@db-ui/base/build/scss/helpers/functions" as *;
 @use "@db-ui/base/build/scss/icon/icons.helpers" as *;
 

From 7e98f8d22d07ddaed841c993207ddc9fd9b93762 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 10 Feb 2023 06:20:45 +0100
Subject: [PATCH 24/30] refactor: corrected typography declarations

---
 source/_patterns/01-elements/checkbox/checkbox.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 4917cb77f5a..a48d943be46 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -17,6 +17,9 @@
 	@include icon("\00A0", $checkbox-size, "outline", $partial: $partial);
 	@include icon-meta($font-size: $checkbox-size - 2);
 
+	font-size: $db-typography-regular-desktop-body-medium-font-size;
+	line-height: $db-typography-regular-desktop-body-medium-line-height;
+
 	align-content: center;
 
 	appearance: none;
@@ -91,7 +94,8 @@
 
 		// TODO: we still need to scale this
 		& + label {
-			font-size: to-rem($pxValue: 14);
+			font-size: $db-typography-regular-desktop-body-small-font-size;
+			line-height: $db-typography-regular-desktop-body-small-line-height;
 		}
 	}
 

From 938fa7e587cdb093a81acba4060b08cd4b11286c Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 10 Feb 2023 06:22:45 +0100
Subject: [PATCH 25/30] refactor: using variables for the margin here

---
 source/_patterns/01-elements/checkbox/checkbox.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index a48d943be46..f63ff00742d 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -85,7 +85,7 @@
 	}
 
 	& + label {
-		margin-left: $db-spacing-fixed-regular-xs;
+		margin-inline-start: $db-spacing-fixed-regular-xs;
 	}
 
 	// Sizes
@@ -96,6 +96,7 @@
 		& + label {
 			font-size: $db-typography-regular-desktop-body-small-font-size;
 			line-height: $db-typography-regular-desktop-body-small-line-height;
+			margin-inline-start: $db-spacing-fixed-regular-2xs;
 		}
 	}
 

From 8346d65debabb9a79c83c8438f581d786ab6a041 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 10 Feb 2023 06:57:54 +0100
Subject: [PATCH 26/30] style: further optimizations

---
 .../checkbox/_checkbox.variables.scss           |  2 +-
 .../01-elements/checkbox/checkbox.scss          | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
index e568d6e27a1..daff8e70a83 100644
--- a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
+++ b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
@@ -1,7 +1,7 @@
 @use "@db-ui/base/build/scss/variables" as *;
 @use "@db-ui/base/build/scss/icon/icons.helpers" as *;
 
-$checkbox---backgroundColor: rgba(255, 255, 255, 0.1) !default;
+$checkbox---backgroundColor: $db-colors-neutral-on-bg-enabled !default;
 $checkbox---borderColor: $db-colors-secondary-enabled !default;
 $checkbox---color: $db-colors-secondary-enabled !default;
 
diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index f63ff00742d..985f28663bb 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -9,7 +9,9 @@
 @import "checkbox.variables";
 
 .elm-checkbox {
+	// We need to reset the general icons margin, as we want to use it in a tiny space
 	--icon-margin-after: 0;
+	// Using another CSS variable for the size to differentiate for the small variant later
 	--checkbox-size: #{$db-sizing-sm};
 
 	$checkbox-size: 24;
@@ -17,9 +19,6 @@
 	@include icon("\00A0", $checkbox-size, "outline", $partial: $partial);
 	@include icon-meta($font-size: $checkbox-size - 2);
 
-	font-size: $db-typography-regular-desktop-body-medium-font-size;
-	line-height: $db-typography-regular-desktop-body-medium-line-height;
-
 	align-content: center;
 
 	appearance: none;
@@ -27,10 +26,12 @@
 	aspect-ratio: 1;
 
 	background-color: $checkbox---backgroundColor;
-	border: 1px solid $checkbox---borderColor;
-	border-radius: 3px;
 	color: $checkbox---color;
 
+	border: calc(var(--checkbox-size, #{$db-sizing-sm}) / 16 + 0.5px) solid
+		$checkbox---borderColor;
+	border-radius: 3px;
+
 	display: inline-flex;
 	height: var(--checkbox-size);
 	justify-content: center;
@@ -47,6 +48,8 @@
 	&:checked {
 		background-color: $checkbox--checked-backgroundColor;
 
+		border: 0;
+
 		&::before {
 			color: $checkbox--checked-color;
 			content: glyph(done);
@@ -85,6 +88,9 @@
 	}
 
 	& + label {
+		font-size: $db-typography-regular-desktop-body-medium-font-size;
+		line-height: $db-typography-regular-desktop-body-medium-line-height;
+
 		margin-inline-start: $db-spacing-fixed-regular-xs;
 	}
 
@@ -96,6 +102,7 @@
 		& + label {
 			font-size: $db-typography-regular-desktop-body-small-font-size;
 			line-height: $db-typography-regular-desktop-body-small-line-height;
+
 			margin-inline-start: $db-spacing-fixed-regular-2xs;
 		}
 	}

From 21acb8227ca78713f18083bca03aa0df6f9a5a27 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 10 Feb 2023 06:59:35 +0100
Subject: [PATCH 27/30] refactor: removed checkboxes on dark background

as those aren't necessary at the moment
---
 .../01-elements/checkbox/_checkbox.variables.scss |  5 -----
 .../checkbox~on-dark-background-checked.json      |  4 ----
 ...ckbox~on-dark-background-disabled-checked.json |  5 -----
 .../checkbox~on-dark-background-disabled.json     |  4 ----
 ...checkbox~on-dark-background-indeterminate.json |  4 ----
 .../checkbox~on-dark-background-indeterminate.md  | 13 -------------
 .../checkbox/checkbox~on-dark-background.json     |  3 ---
 .../enterprise/_checkbox.demonstration.scss       | 15 ++-------------
 8 files changed, 2 insertions(+), 51 deletions(-)
 delete mode 100644 source/_patterns/01-elements/checkbox/checkbox~on-dark-background-checked.json
 delete mode 100644 source/_patterns/01-elements/checkbox/checkbox~on-dark-background-disabled-checked.json
 delete mode 100644 source/_patterns/01-elements/checkbox/checkbox~on-dark-background-disabled.json
 delete mode 100644 source/_patterns/01-elements/checkbox/checkbox~on-dark-background-indeterminate.json
 delete mode 100644 source/_patterns/01-elements/checkbox/checkbox~on-dark-background-indeterminate.md
 delete mode 100644 source/_patterns/01-elements/checkbox/checkbox~on-dark-background.json

diff --git a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
index daff8e70a83..97c248613ff 100644
--- a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
+++ b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
@@ -9,8 +9,3 @@ $checkbox--checked-backgroundColor: $db-colors-secondary-enabled !default;
 $checkbox--checked-color: #fff !default;
 
 $checkbox-hover-checked-backgroundColor: #52575f !default;
-
-// On dark background
-$checkbox-onDarkBackground--backgroundColor: transparent !default;
-$checkbox-onDarkBackground--borderColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color
-$checkbox-onDarkBackground--color: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color
diff --git a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-checked.json b/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-checked.json
deleted file mode 100644
index 4d0abb12254..00000000000
--- a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-checked.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-	"id": "checkbox16",
-	"checked": true
-}
diff --git a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-disabled-checked.json b/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-disabled-checked.json
deleted file mode 100644
index 92b7c9ae7b8..00000000000
--- a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-disabled-checked.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-	"id": "checkbox18",
-	"checked": true,
-	"disabled": true
-}
diff --git a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-disabled.json b/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-disabled.json
deleted file mode 100644
index b03c0ade2cb..00000000000
--- a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-disabled.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-	"id": "checkbox17",
-	"disabled": true
-}
diff --git a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-indeterminate.json b/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-indeterminate.json
deleted file mode 100644
index e3b61252b15..00000000000
--- a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-indeterminate.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-	"id": "checkbox04",
-	"indeterminate": true
-}
diff --git a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-indeterminate.md b/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-indeterminate.md
deleted file mode 100644
index 48d25c1c8b0..00000000000
--- a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-indeterminate.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Checkbox - indeterminate on dark background
----
-
-## State: indeterminate
-
-Please keep in mind, that the special state of an indeterminate element is necessary to get set programatically with JavaScript:
-
-```js
-inputInstance.indeterminate = true;
-```
-
-MDN has some more information on this topic: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox#indeterminate_state_checkboxes>
diff --git a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background.json b/source/_patterns/01-elements/checkbox/checkbox~on-dark-background.json
deleted file mode 100644
index f1c3214dfea..00000000000
--- a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"id": "checkbox15"
-}
diff --git a/source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss b/source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss
index 9ff0f5c2107..19090eaf4df 100644
--- a/source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss
+++ b/source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss
@@ -5,16 +5,5 @@
 @import "checkbox.variables";
 @import "../checkbox.variables";
 
-.pl-js-pattern-example {
-	[id^="elements-checkbox-on-dark-background"] & {
-		background-color: $db-colors-secondary-enabled;
-		color: $db-colors-secondary-on-enabled;
-		padding: to-rem($pxValue: 16);
-
-		.elm-checkbox {
-			background-color: $checkbox-onDarkBackground--backgroundColor;
-			border-color: $checkbox-onDarkBackground--borderColor;
-			color: $checkbox-onDarkBackground--color;
-		}
-	}
-}
+// .pl-js-pattern-example {
+// }

From 33370ff7ec2713a7beae8ee7831302850ad5b5d5 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 10 Feb 2023 07:49:44 +0100
Subject: [PATCH 28/30] refactor: we don't need those variables files anymore

---
 .../01-elements/checkbox/_checkbox.variables.scss     | 11 -----------
 source/_patterns/01-elements/checkbox/checkbox.scss   |  1 -
 .../checkbox/enterprise/_checkbox.demonstration.scss  |  2 --
 .../checkbox/enterprise/_checkbox.variables.scss      |  2 --
 .../01-elements/checkbox/enterprise/checkbox.scss     |  1 -
 5 files changed, 17 deletions(-)
 delete mode 100644 source/_patterns/01-elements/checkbox/_checkbox.variables.scss
 delete mode 100644 source/_patterns/01-elements/checkbox/enterprise/_checkbox.variables.scss

diff --git a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
deleted file mode 100644
index 97c248613ff..00000000000
--- a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use "@db-ui/base/build/scss/variables" as *;
-@use "@db-ui/base/build/scss/icon/icons.helpers" as *;
-
-$checkbox---backgroundColor: $db-colors-neutral-on-bg-enabled !default;
-$checkbox---borderColor: $db-colors-secondary-enabled !default;
-$checkbox---color: $db-colors-secondary-enabled !default;
-
-$checkbox--checked-backgroundColor: $db-colors-secondary-enabled !default;
-$checkbox--checked-color: #fff !default;
-
-$checkbox-hover-checked-backgroundColor: #52575f !default;
diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 985f28663bb..0ea7d046131 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -6,7 +6,6 @@
 @use "@db-ui/base/build/scss/icon/icons.helpers" as *;
 
 @import "../../../css/partials.meta";
-@import "checkbox.variables";
 
 .elm-checkbox {
 	// We need to reset the general icons margin, as we want to use it in a tiny space
diff --git a/source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss b/source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss
index 19090eaf4df..daaeebaaefc 100644
--- a/source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss
+++ b/source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss
@@ -2,8 +2,6 @@
 
 @use "@db-ui/base/build/scss/variables" as *;
 @use "@db-ui/base/build/scss/helpers/functions" as *;
-@import "checkbox.variables";
-@import "../checkbox.variables";
 
 // .pl-js-pattern-example {
 // }
diff --git a/source/_patterns/01-elements/checkbox/enterprise/_checkbox.variables.scss b/source/_patterns/01-elements/checkbox/enterprise/_checkbox.variables.scss
deleted file mode 100644
index 3ce76cef648..00000000000
--- a/source/_patterns/01-elements/checkbox/enterprise/_checkbox.variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use "@db-ui/base/build/scss/variables" as *;
-@use "@db-ui/base/build/scss/icon/icons.variables" as *;
diff --git a/source/_patterns/01-elements/checkbox/enterprise/checkbox.scss b/source/_patterns/01-elements/checkbox/enterprise/checkbox.scss
index 8609216073f..6b978054c70 100644
--- a/source/_patterns/01-elements/checkbox/enterprise/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/enterprise/checkbox.scss
@@ -1,2 +1 @@
-@import "checkbox.variables";
 @import "../checkbox";

From 472d7c5646cf9374eac10637ce900d909f80d734 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 10 Feb 2023 07:50:45 +0100
Subject: [PATCH 29/30] refactor: switched to new colors placeholders

---
 .../01-elements/checkbox/checkbox.scss        | 29 +++++--------------
 1 file changed, 7 insertions(+), 22 deletions(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 0ea7d046131..11364fbca56 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -15,6 +15,9 @@
 
 	$checkbox-size: 24;
 
+	@extend %db-bg-neutral-0;
+	@extend %db-bg-neutral-0-ia-states;
+
 	@include icon("\00A0", $checkbox-size, "outline", $partial: $partial);
 	@include icon-meta($font-size: $checkbox-size - 2);
 
@@ -24,11 +27,8 @@
 
 	aspect-ratio: 1;
 
-	background-color: $checkbox---backgroundColor;
-	color: $checkbox---color;
-
 	border: calc(var(--checkbox-size, #{$db-sizing-sm}) / 16 + 0.5px) solid
-		$checkbox---borderColor;
+		currentColor;
 	border-radius: 3px;
 
 	display: inline-flex;
@@ -45,32 +45,17 @@
 	}
 
 	&:checked {
-		background-color: $checkbox--checked-backgroundColor;
+		@extend %db-bg-secondary;
+		@extend %db-bg-secondary-ia-states;
 
 		border: 0;
 
 		&::before {
-			color: $checkbox--checked-color;
+			color: inherit;
 			content: glyph(done);
 		}
 	}
 
-	&:not(:disabled) {
-		&:hover {
-			background-color: rgba(40, 45, 55, 0.14);
-		}
-
-		&:checked {
-			&:hover {
-				background-color: $checkbox-hover-checked-backgroundColor;
-			}
-		}
-
-		&:active {
-			background-color: rgba(0, 0, 0, 0.24);
-		}
-	}
-
 	// TODO: We need to set the correct styling / color for invalid
 
 	&:indeterminate {

From 99f93cccd32e2f0510607e72e8f16c6def35f488 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 10 Feb 2023 07:51:14 +0100
Subject: [PATCH 30/30] refactor: need to make some fine adjustments regarding
 the icon and checkbox size itself

---
 source/_patterns/01-elements/checkbox/checkbox.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
index 11364fbca56..bf3b9298faa 100644
--- a/source/_patterns/01-elements/checkbox/checkbox.scss
+++ b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -48,7 +48,9 @@
 		@extend %db-bg-secondary;
 		@extend %db-bg-secondary-ia-states;
 
-		border: 0;
+		// The icon within the checkbox has the same dimensions as the checkbox itself and that for there can't be any border
+		border-width: 0;
+		padding: 1px;
 
 		&::before {
 			color: inherit;