refactor: guidelines 3.0 checkbox style

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

source/_patterns/01-elements/checkbox/_checkbox.md

@@ -0,0 +1,18 @@
+---
+title: Checkbox
+state: inevaluation
+---
+
+## Variations/configurability
+
+### Size
+
+#### SCSS (recommended)
+
+Extend the size SCSS placeholders in case that you don't want the default (medium): `%size-Small`
+
+#### 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"

source/_patterns/01-elements/checkbox/checkbox-sizes.hbs

@@ -0,0 +1,7 @@
+{{#each sizes }}
+	<!-- [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 }}
+	</p>
+{{/each }}

source/_patterns/01-elements/checkbox/checkbox-sizes.json

@@ -0,0 +1,14 @@
+{
+	"sizes": [
+		{
+			"size": "small",
+			"label": "Small"
+		},
+		{
+			"size": "medium",
+			"label": "Medium (default, data-size attribute is optional)"
+		}
+	],
+	"id": "checkbox05",
+	"label": "Checkbox"
+}

source/_patterns/01-elements/checkbox/checkbox-tonality.hbs

@@ -0,0 +1,6 @@
+<dl>
+{{#each tonality as |tonality| }}
+	<dt>{{ tonality }}:</dt>
+	<dd data-tonality="{{ tonality }}">{{> elements-checkbox id=(unique-id) label="Checkbox" }}</dd>
+{{/each }}
+</dl>

source/_patterns/01-elements/checkbox/checkbox.hbs

@@ -1,12 +1,14 @@
 <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 }}
+	{{#if required }} required{{/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 }}

source/_patterns/01-elements/checkbox/checkbox.scss

@@ -1,60 +1,64 @@
 @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 *;
 
 @import "../../../css/partials.meta";
-@import "checkbox.variables";
 
 .elm-checkbox {
-	@include icon("\00A0", 24, "outline", $partial: $partial);
+	// 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;
+
+	@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);
+
 	align-content: center;
 
 	appearance: none;
-	background-color: $checkbox---backgroundColor;
-	border: #{to-rem($pxValue: 1)} solid $checkbox---borderColor;
-	border-radius: 4px;
-	color: $checkbox---color;
+
+	aspect-ratio: 1;
+
+	border: calc(var(--checkbox-size, #{$db-sizing-sm}) / 16 + 0.5px) solid
+		currentColor;
+	border-radius: 3px;
 
 	display: inline-flex;
-	height: to-rem($pxValue: 24);
+	height: var(--checkbox-size);
 	justify-content: center;
-	width: to-rem($pxValue: 24);
 
 	&[type="checkbox"] {
-		vertical-align: top;
+		vertical-align: bottom;
 	}
 
+	// Icons font size
 	&::before {
-		--icon-font-size: 1.375rem;
-		margin-right: 0;
+		--icon-font-size: calc(var(--checkbox-size) - 2px);
 	}
 
 	&:checked {
-		background-color: $checkbox--checked-backgroundColor;
+		@extend %db-bg-secondary;
+		@extend %db-bg-secondary-ia-states;
+
+		// 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: $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(40, 45, 55, 0.14);
-		}
-	}
+	// TODO: We need to set the correct styling / color for invalid
 
 	&:indeterminate {
 		&::before {
@@ -65,11 +69,39 @@
 	&:disabled {
 		&,
 		& + label {
-			opacity: 0.5;
+			opacity: 0.25;
 		}
 	}
 
 	& + label {
-		margin-left: $db-spacing-fixed-regular-xs;
+		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;
+	}
+
+	// Sizes
+	&%size-Small {
+		--checkbox-size: calc(#{$db-sizing-sm} * 0.83333333);
+
+		// TODO: we still need to scale this
+		& + 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;
+		}
+	}
+
+	&[data-size="small"] {
+		@extend %size-Small;
+	}
+
+	&:required {
+		& + label {
+			&::after {
+				content: " *";
+			}
+		}
 	}
 }

source/_patterns/01-elements/checkbox/checkbox~required.json

@@ -0,0 +1,4 @@
+{
+	"id": "checkbox06",
+	"required": true
+}

source/_patterns/01-elements/checkbox/enterprise/_checkbox.demonstration.scss

@@ -2,19 +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 {
-	[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 {
+// }

source/_patterns/01-elements/checkbox/enterprise/checkbox.scss

@@ -1,2 +1 @@
-@import "checkbox.variables";
 @import "../checkbox";