@lucca-front/scss 16.2.7-rc.2 → 16.3.0-rc.1

package/src/components/radioField/component.scss

@@ -0,0 +1,98 @@
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component($atRoot: 'without: rule') {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-column-gap: var(--spacings-XS);
+
+	@at-root ($atRoot) {
+
+		.radioField-label {
+			display: contents;
+		}
+
+		.radioField-label-input {
+		  width: var(--component-radioField-label-input-size);
+		  height: var(--component-radioField-label-input-size);
+		  border: 2px solid var(--palettes-grey-700);
+		  border-radius: 50%;
+		  position: relative;
+		  top: .125rem;
+		  color: var(--colors-white-color);
+		  transition-property: color, border-color;
+		  transition-duration: var(--commons-animations-durations-fast);
+		  margin: var(--component-radioField-label-input-margin);
+		  display: flex;
+		  align-items: center;
+		  justify-content: center;
+		  background-color: var(--colors-white-color);
+		  cursor: pointer;
+
+		  @media (prefers-reduced-motion: reduce) {
+		    transition-property: none;
+		  }
+
+		  &::after {
+		    content: '';
+		    position: absolute;
+		    inset: -2px;
+		    outline-offset: 2px;
+		    border-radius: var(--component-radioField-label-input-borderRadius);
+		  }
+		}
+
+		.radioField-label-input-icon {
+		  display: flex;
+		  align-items: center;
+		  justify-content: center;
+		  width: calc(100% - 4px);
+		  height: calc(100% - 4px);
+			opacity: 0;
+		  transform: scale(0);
+		  transition-property: transform, background-color;
+		  transition-duration: var(--commons-animations-durations-fast);
+			transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 0);
+		  border-radius: 50%;
+		  background-color: var(--palettes-primary-700);
+
+		  @media (prefers-reduced-motion: reduce) {
+		    transition-property: none;
+		  }
+		}
+
+		.radioField-input {
+		  @include a11y.mask;
+
+		  &:focus-visible {
+		    ~ .radioField-label {
+		      .radioField-label-input {
+		        &::after {
+		          @include a11y.focusVisible();
+		        }
+		      }
+		    }
+		  }
+
+		  &:hover {
+		    ~ .radioField-label {
+		      .radioField-label-input {
+		        border-color: var(--palettes-grey-600);
+		      }
+		    }
+		  }
+
+		  &:active {
+		    ~ .radioField-label {
+		      .radioField-label-input {
+		        border-color: var(--palettes-grey-800);
+		      }
+		    }
+		  }
+		}
+
+		.inlineMessage {
+			grid-column: 2;
+		}
+	}
+}

package/src/components/radioField/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/radioField/index.scss

@@ -0,0 +1,32 @@
+@use 'exports' as *;
+
+.radioField {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+}
+
+.radioField-input {
+	&:checked {
+		@include checked;
+	}
+
+	&:disabled {
+		@include disabled;
+
+		&:checked {
+			@include checkedDisabled;
+		}
+	}
+
+	&[aria-invalid="true"] {
+		@include invalid;
+
+		&:checked {
+			@include checkedInvalid;
+		}
+	}
+}

package/src/components/radioField/mods.scss

@@ -0,0 +1,18 @@
+@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
+@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
+
+@mixin S {
+  --component-radioField-label-input-size: 1rem;
+  --component-radioField-label-input-borderRadius: var(--commons-borderRadius-M);
+  --component-radioField-label-input-icon-fontSize: var(--sizes-XS-lineHeight);
+  --component-radioField-label-fontSize: var(--sizes-S-fontSize);
+  --component-radioField-label-lineHeight: var(--sizes-S-lineHeight);
+
+  .formLabel {
+    @include formLabel.S;
+  }
+
+  .inlineMessage {
+    @include inlineMessage.S;
+  }
+}

package/src/components/radioField/states.scss

@@ -0,0 +1,122 @@
+@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
+@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
+
+@mixin checked {
+  ~ .radioField-label {
+    .radioField-label-input {
+      border-color: var(--palettes-primary-700);
+    }
+
+    .radioField-label-input-icon {
+      transform: scale(1);
+      opacity: 1;
+      transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1.5);
+    }
+  }
+
+  &:hover {
+    ~ .radioField-label {
+      .radioField-label-input {
+        border-color: var(--palettes-primary-600);
+      }
+
+      .radioField-label-input-icon {
+        background-color: var(--palettes-primary-600);
+      }
+    }
+  }
+
+  &:active {
+    ~ .radioField-label {
+      .radioField-label-input {
+        border-color: var(--palettes-primary-800);
+      }
+
+      .radioField-label-input-icon {
+        background-color: var(--palettes-primary-800);
+      }
+    }
+  }
+}
+
+@mixin disabled {
+  ~ .radioField-label {
+    color: var(--palettes-grey-500);
+
+    .formLabel {
+			@include formLabel.disabled;
+		}
+  }
+
+  ~ .radioField-label {
+    .radioField-label-input {
+      border-color: var(--palettes-grey-500);
+    }
+
+    .radioField-label-input,
+    .formLabel {
+      cursor: default;
+    }
+  }
+
+  ~ .inlineMessage {
+    @include inlineMessage.disabled;
+  }
+}
+
+@mixin checkedDisabled {
+  ~ .radioField-label {
+    .radioField-label-input {
+      border-color: var(--palettes-grey-500);
+      color: var(--palettes-grey-500);
+    }
+
+    .radioField-label-input-icon {
+      background-color: var(--palettes-grey-500);
+    }
+  }
+}
+
+@mixin invalid {
+  ~ .radioField-label {
+    .radioField-label-input {
+      border-color: var(--palettes-error-700) !important;
+    }
+
+    .formLabel {
+      @include formLabel.error;
+    }
+  }
+
+  &:hover {
+    ~ .radioField-label {
+      .radioField-label-input {
+        border-color: var(--palettes-error-600);
+      }
+
+      .radioField-label-input-icon {
+        background-color: var(--palettes-error-600);
+      }
+    }
+  }
+
+  &:active {
+    ~ .radioField-label {
+      .radioField-label-input {
+        border-color: var(--palettes-error-800);
+      }
+
+      .radioField-label-input-icon {
+        background-color: var(--palettes-error-800);
+      }
+    }
+  }
+}
+
+@mixin checkedInvalid {
+  ~ .radioField-label {
+    .radioField-label-input-icon {
+      background-color: var(--palettes-error-700);
+    }
+  }
+}

package/src/components/radioField/vars.scss

@@ -0,0 +1,7 @@
+@mixin vars {
+  --component-radioField-label-input-size: 1.25rem;
+  --component-radioField-label-input-borderRadius: 6px;
+  --component-radioField-label-input-icon-fontSize: var(--sizes-S-lineHeight);
+  --component-radioField-label-fontSize: var(--sizes-M-fontSize);
+  --component-radioField-label-lineHeight: var(--sizes-M-lineHeight);
+}

package/src/components/switchField/component.scss

@@ -0,0 +1,110 @@
+@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component($atRoot: 'without: rule') {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-column-gap: var(--spacings-XS);
+
+	@at-root ($atRoot) {
+		.switchField-label {
+		  display: contents;
+		}
+
+		.switchField-label-input {
+		  width: var(--component-switchField-label-input-width);
+		  height: var(--component-switchField-label-input-height);
+		  border: 2px solid var(--palettes-grey-500);
+		  border-radius: var(--component-switchField-label-input-height);
+		  position: relative;
+		  top: .125rem;
+		  color: var(--colors-white-color);
+		  transition-property: color, border-color, background-color;
+		  transition-duration: var(--commons-animations-durations-fast);
+		  background-color: var(--palettes-grey-500);
+		  cursor: pointer;
+
+		  @media (prefers-reduced-motion: reduce) {
+		    transition-property: none;
+		  }
+
+		  &::after {
+		    content: '';
+		    position: absolute;
+		    inset: -2px;
+		    outline-offset: 2px;
+		    border-radius: var(--component-switchField-label-input-height);
+		  }
+
+		  &::before {
+		    content: '';
+		    position: absolute;
+		    width: 50%;
+		    aspect-ratio: 1;
+		    background-color: var(--colors-white-color);
+		    border-radius: 50%;
+		    left: 0;
+		    top: 0;
+		    transition-property: left;
+		    transition-duration: var(--commons-animations-durations-fast);
+		    transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1.5);
+		    box-shadow: var(--commons-boxShadow-XS);
+		  }
+		}
+
+		.switchField-label-input-icon {
+		  display: flex;
+		  align-items: center;
+		  justify-content: center;
+		  width: 100%;
+		  height: 100%;
+
+			&::before {
+				@include icon.generate('confirm');
+				font-size: var(--component-switchField-label-input-icon-fontSize);
+			}
+
+			&::after {
+				@include icon.generate('cross');
+				font-size: var(--component-switchField-label-input-icon-fontSize);
+			}
+		}
+
+		.formLabel {
+		  grid-column: 2;
+		}
+
+		.switchField-input {
+			@include a11y.mask;
+
+		  &:focus-visible {
+		    ~ .switchField-label {
+		      .switchField-label-input {
+		        &::after {
+		          @include a11y.focusVisible();
+		        }
+		      }
+		    }
+		  }
+
+		  &:hover {
+		    ~ .switchField-label {
+		      .switchField-label-input {
+		        border-color: var(--palettes-grey-400);
+		        background-color: var(--palettes-grey-400);
+		      }
+		    }
+		  }
+
+		  &:active {
+		    ~ .switchField-label {
+		      .switchField-label-input {
+		        border-color: var(--palettes-grey-600);
+		        background-color: var(--palettes-grey-600);
+		      }
+		    }
+		  }
+		}
+	}
+}

package/src/components/switchField/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/switchField/index.scss

@@ -0,0 +1,32 @@
+@use 'exports' as *;
+
+.switchField {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+}
+
+.switchField-input {
+	&:checked {
+		@include checked;
+	}
+
+	&:disabled {
+		@include disabled;
+
+		&:checked {
+			@include checkedDisabled;
+		}
+	}
+
+	&[aria-invalid="true"] {
+		@include invalid;
+
+		&:checked {
+			@include checkedInvalid;
+		}
+	}
+}

package/src/components/switchField/mods.scss

@@ -0,0 +1,18 @@
+@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
+@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
+
+@mixin S {
+	--component-switchField-label-input-height: 1rem;
+	--component-switchField-label-input-width: 1.75rem;
+	--component-switchField-label-input-icon-fontSize: .75rem;
+	--component-switchField-label-fontSize: var(--sizes-S-fontSize);
+	--component-switchField-label-lineHeight: var(--sizes-S-lineHeight);
+
+	.formLabel {
+		@include formLabel.S;
+	}
+
+	.inlineMessage {
+		@include inlineMessage.S;
+	}
+}

package/src/components/switchField/states.scss

@@ -0,0 +1,119 @@
+@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
+@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
+
+@mixin checked {
+  ~ .switchField-label {
+    .switchField-label-input {
+      background-color: var(--palettes-primary-700);
+      border-color: var(--palettes-primary-700);
+
+      &::before {
+        left: 50%;
+      }
+    }
+  }
+
+  &:hover {
+    ~ .switchField-label {
+      .switchField-label-input {
+        background-color: var(--palettes-primary-600);
+        border-color: var(--palettes-primary-600);
+      }
+    }
+  }
+
+  &:active {
+    ~ .switchField-label {
+      .switchField-label-input {
+        background-color: var(--palettes-primary-800);
+        border-color: var(--palettes-primary-800);
+      }
+    }
+  }
+}
+
+@mixin disabled {
+  ~ .switchField-label {
+    color: var(--palettes-grey-500);
+
+    .switchField-label-input {
+      background-color: var(--palettes-grey-100);
+      border-color: var(--palettes-grey-100);
+      color: var(--palettes-grey-500);
+
+      &::before {
+        background-color: var(--palettes-grey-500);
+      }
+    }
+
+    .switchField-label-input {
+      cursor: default;
+    }
+
+    .formLabel {
+      @include formLabel.disabled;
+    }
+  }
+
+  ~ .inlineMessage {
+    @include inlineMessage.disabled;
+  }
+}
+
+@mixin checkedDisabled {
+  &:disabled {
+    ~ .switchField-label {
+      .switchField-label-input {
+        background-color: var(--palettes-grey-100);
+        border-color: var(--palettes-grey-100);
+        color: var(--palettes-grey-500);
+
+        &::before {
+          background-color: var(--palettes-grey-500);
+        }
+      }
+    }
+  }
+}
+
+@mixin invalid {
+  ~ .switchField-label {
+    .switchField-label-input {
+      background-color: var(--palettes-error-700);
+      border-color: var(--palettes-error-700);
+    }
+
+    .formLabel {
+      @include formLabel.error;
+    }
+  }
+
+  &:hover {
+    ~ .switchField-label {
+      .switchField-label-input {
+        background-color: var(--palettes-error-600);
+        border-color: var(--palettes-error-600);
+      }
+    }
+  }
+
+  &:active {
+    ~ .switchField-label {
+      .switchField-label-input {
+        background-color: var(--palettes-error-800);
+        border-color: var(--palettes-error-800);
+      }
+    }
+  }
+}
+
+@mixin checkedInvalid {
+  &:checked {
+    ~ .switchField-label {
+      .switchField-label-input {
+        background-color: var(--palettes-error-700);
+        border-color: var(--palettes-error-700);
+      }
+    }
+  }
+}

package/src/components/switchField/vars.scss

@@ -0,0 +1,7 @@
+@mixin vars {
+  --component-switchField-label-input-height: 1.25rem;
+  --component-switchField-label-input-width: 2.25rem;
+  --component-switchField-label-input-icon-fontSize: var(--sizes-XS-lineHeight);
+  --component-switchField-label-fontSize: var(--sizes-M-fontSize);
+  --component-switchField-label-lineHeight: var(--sizes-M-lineHeight);
+}

package/src/components/table/component.scss

@@ -28,9 +28,8 @@
 			font-size: var(--sizes-S-fontSize);
 			line-height: var(--sizes-S-lineHeight);
 			padding: var(--components-table-padding);
-			border-bottom-width: var(--commons-divider-width);
-			border-bottom-color: var(--commons-divider-color);
-			border-bottom-style: solid;
+			border-bottom: var(--commons-divider-width) solid var(--commons-divider-color);
+			border-top: var(--commons-divider-width) solid var(--commons-divider-color);
 			display: table-cell;
 			text-align: left;
 			font-weight: 600;
@@ -45,19 +44,10 @@
 			background-color: var(--colors-white-color);
 			display: table-row;
 
-			&:first-child {
-				.table-body-row-cell,
-				.table-foot-row-cell {
-					border-top: none;
-				}
-			}
-
 			&:last-child {
 				.table-body-row-cell,
 				.table-foot-row-cell {
-					border-bottom-width: var(--commons-divider-width);
-					border-bottom-color: var(--commons-divider-color);
-					border-bottom-style: solid;
+					border-bottom: var(--commons-divider-width) solid var(--commons-divider-color);
 				}
 			}
 		}
@@ -65,9 +55,7 @@
 		.table-body-row-cell,
 		.table-foot-row-cell {
 			padding: var(--components-table-padding);
-			border-top-width: var(--commons-divider-width);
-			border-top-color: var(--commons-divider-color);
-			border-top-style: solid;
+			border-bottom: var(--commons-divider-width) solid var(--commons-divider-color);
 			display: table-cell;
 			vertical-align: middle;
 		}

package/src/components/table/mods.scss

@@ -53,11 +53,17 @@
 @mixin card {
 	border-top: 0;
 
+	.table-head-row-cell {
+		border-top: 0;
+	}
+
 	.table-body, .table-foot {
 		&:last-child {
-			.table-body-row-cell,
-			.table-foot-row-cell {
-				border-bottom: none;
+			.table-body-row:last-child {
+				.table-body-row-cell,
+				.table-foot-row-cell {
+					border-bottom: none;
+				}
 			}
 		}
 	}

package/src/components/table/vars.scss

@@ -3,6 +3,6 @@
 	--components-table-font-size: var(--sizes-M-fontSize);
 	--components-table-line-height: var(--sizes-M-lineHeight);
 	--components-table-zebra-background: #f5f5f5;
-	--components-table-hover-background: var(--palettes-grey-50);
+	--components-table-hover-background: var(--palettes-primary-50);
 	--components-table-card-padding: var(--spacings-M);
 }