table part 3 & checkbox

Author: BF150

packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss

@@ -1,6 +1,7 @@
 @use '../../mixins/to-rem' as *;
 @use '../mixins/alert' as *;
 @use '../mixins/required' as *;
+@use '../mixins/checkbox' as *;
 
 @layer kol-theme-component {
 	@include alert;
@@ -41,39 +42,12 @@
 		}
 	}
 
+	.kol-input-checkbox__field-control--variant-default {
+		@include checkbox('kol-checkbox');
+	}
+
 	.kol-checkbox {
 		.kol-input {
-			color: var(--color-grey);
-			background-color: var(--color-white);
-			border-color: var(--color-grey-75);
-			border-style: solid;
-			border-width: 2px;
-
-			line-height: 1.5;
-
-			&:focus {
-				outline-color: var(--color-blue);
-				outline-style: solid;
-				outline-width: 2px;
-				outline-offset: 2px;
-			}
-
-			&:checked {
-				background-color: var(--color-blue);
-				border-color: var(--color-blue);
-			}
-
-			&:not(:disabled):hover {
-				border-color: var(--color-blue);
-			}
-
-			&:checked {
-				&:not(:disabled):hover {
-					background-color: var(--color-blue-130);
-					border-color: var(--color-blue-130);
-				}
-			}
-
 			&--error {
 				border-color: var(--color-red);
 
@@ -96,15 +70,6 @@
 		}
 	}
 
-	.kol-checkbox--variant-default {
-		width: unset;
-		min-width: unset;
-
-		&.kol-checkbox--checked .kol-icon {
-			color: var(--color-white);
-		}
-	}
-
 	.kol-checkbox--variant-switch {
 		.kol-icon {
 			color: var(--color-white);

packages/themes/ecl/src/ecl-ec/mixins/checkbox.scss

@@ -0,0 +1,42 @@
+@use '../../mixins/to-rem' as *;
+@use './icon' as *;
+
+@mixin checkbox($block-classname) {
+	.#{$block-classname} {
+		min-width: var(--a11y-min-size);
+		min-height: var(--a11y-min-size);
+		justify-content: center;
+
+		&:focus-within::before,
+		&:hover:not(&--disabled)::before {
+			content: '';
+			position: absolute;
+
+			background-color: var(--ecl-color-primary-20);
+			border-radius: 100%;
+			width: to-rem(38);
+			height: to-rem(38);
+		}
+
+		&__icon {
+			@include icon;
+			color: var(--ecl-color-white);
+		}
+
+		input {
+			position: relative;
+			border-color: var(--ecl-color-dark-80);
+			border-radius: 2px;
+
+			&:checked,
+			&:indeterminate {
+				background-color: var(--ecl-color-primary);
+				border-color: var(--ecl-color-primary);
+			}
+
+			&:focus {
+				outline: transparent;
+			}
+		}
+	}
+}

packages/themes/ecl/src/ecl-ec/mixins/table.scss

@@ -3,6 +3,8 @@
 @use './icon' as *;
 @use './pagination' as *;
 @use './table-settings' as *;
+@use './button' as *;
+@use './checkbox' as *;
 
 @mixin table {
 	@include alert;
@@ -76,59 +78,51 @@
 			}
 		}
 
+		&__cell-actions {
+			gap: to-rem(4);
+			@include button('kol-button');
+			//	@include link('kol-link');
+		}
+
 		&__selection {
 			display: flex;
 			gap: 0.5em;
 			align-items: center;
 			grid-template-columns: 1fr auto;
 		}
 
-		&__selection-input {
-			&:focus {
-				outline-color: var(--color-blue);
-				outline-style: solid;
-				outline-width: 2px;
-				border-color: var(--color-blue);
-				outline-offset: 2px;
-			}
-
-			// CHECKBOX
-			&--checkbox {
-				border-color: var(--color-grey-75);
-
-				&:checked {
-					background-color: var(--color-blue);
-					border-color: var(--color-blue);
-				}
-			}
+		&:has(.kol-table__selection-input--checkbox) {
+			@include checkbox('kol-table__selection');
+		}
 
+		&__selection-input {
 			// RADIO
 			&--radio {
-				border-color: var(--color-grey-75);
+				border-color: var(--ecl-color-dark-80);
 				display: block;
 
 				&:not(:disabled):hover {
-					border-color: var(--color-blue);
+					border-color: var(--ecl-color-primary);
 				}
 
 				&:checked {
-					border-color: var(--color-blue);
+					border-color: var(--ecl-color-primary);
 					border-width: 7px;
 
 					&:before {
-						background-color: var(--color-white);
+						background-color: var(--ecl-color-white);
 					}
 				}
 			}
 		}
 
 		&__selection-icon {
-			color: var(--color-white);
+			color: var(--ecl-color-white);
 		}
 
 		.kol-icon:hover ~ &__selection-input--checkbox:not(:disabled),
 		&__selection-input--checkbox:not(:disabled):hover {
-			border-color: var(--color-blue);
+			border-color: var(--ecl-color-primary);
 		}
 	}
 }