@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/checkboxField/states.scss

@@ -1,122 +1,122 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-@use '@lucca-front/scss/src/commons/utils/form';
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin mixed {
-	~ .checkboxField-icon {
-		.checkboxField-icon-check {
-			&::before {
-				content: '\e975'; // Remove when content alternative will have a good support
-				content: '\e975'/ '';
-			}
-		}
-	}
-}
-
-@mixin checked {
-	~ .checkboxField-icon {
-		background-color: var(--palettes-primary-700);
-		border-color: var(--palettes-primary-700);
-
-		.checkboxField-icon-check {
-			transform: scale(1);
-			transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1.5);
-		}
-	}
-}
-
-@mixin hover {
-	~ .checkboxField-icon {
-		border-color: var(--palettes-grey-600);
-	}
-}
-
-@mixin checkedHover {
-	~ .checkboxField-icon {
-		background-color: var(--palettes-primary-600);
-		border-color: var(--palettes-primary-600);
-	}
-}
-
-@mixin checkedActive {
-	~ .checkboxField-icon {
-		background-color: var(--palettes-primary-800);
-		border-color: var(--palettes-primary-800);
-	}
-}
-
-@mixin checkedDisabled {
-	~ .checkboxField-icon {
-		background-color: var(--palettes-grey-100);
-		border-color: var(--palettes-grey-100);
-		color: var(--palettes-grey-500);
-	}
-}
-
-@mixin checkedHover {
-	~ .checkboxField-icon {
-		background-color: var(--palettes-primary-600);
-		border-color: var(--palettes-primary-600);
-	}
-}
-
-@mixin checkedInvalid {
-	~ .checkboxField-icon {
-		background-color: var(--palettes-error-700);
-		border-color: var(--palettes-error-700);
-	}
-}
-
-@mixin active {
-	~ .checkboxField-icon {
-		border-color: var(--palettes-grey-800);
-	}
-}
-
-@mixin disabled {
-	cursor: default;
-
-	~ .checkboxField-icon {
-		border-color: var(--palettes-grey-500);
-	}
-}
-
-@mixin focusVisible {
-	~ .checkboxField-icon {
-		&::after {
-			@include a11y.focusVisible();
-		}
-	}
-}
-
-@mixin invalid {
-	~ .checkboxField-icon {
-		border-color: var(--palettes-error-700);
-	}
-}
-
-@mixin invalidHover {
-	~ .checkboxField-icon {
-		border-color: var(--palettes-error-600);
-	}
-}
-
-@mixin invalidActive {
-	~ .checkboxField-icon {
-		border-color: var(--palettes-error-800);
-	}
-}
-
-@mixin checkedInvalidHover {
-	~ .checkboxField-icon {
-		background-color: var(--palettes-error-600);
-		border-color: var(--palettes-error-600);
-	}
-}
-
-@mixin checkedInvalidActive {
-	~ .checkboxField-icon {
-		background-color: var(--palettes-error-800);
-		border-color: var(--palettes-error-800);
-	}
-}
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/form';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin mixed {
+	~ .checkboxField-icon {
+		.checkboxField-icon-check {
+			&::before {
+				content: '\e975'; // Remove when content alternative will have a good support
+				content: '\e975'/ '';
+			}
+		}
+	}
+}
+
+@mixin checked {
+	~ .checkboxField-icon {
+		background-color: var(--palettes-primary-700);
+		border-color: var(--palettes-primary-700);
+
+		.checkboxField-icon-check {
+			transform: scale(1);
+			transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1.5);
+		}
+	}
+}
+
+@mixin hover {
+	~ .checkboxField-icon {
+		border-color: var(--palettes-grey-600);
+	}
+}
+
+@mixin checkedHover {
+	~ .checkboxField-icon {
+		background-color: var(--palettes-primary-600);
+		border-color: var(--palettes-primary-600);
+	}
+}
+
+@mixin checkedActive {
+	~ .checkboxField-icon {
+		background-color: var(--palettes-primary-800);
+		border-color: var(--palettes-primary-800);
+	}
+}
+
+@mixin checkedDisabled {
+	~ .checkboxField-icon {
+		background-color: var(--palettes-grey-100);
+		border-color: var(--palettes-grey-100);
+		color: var(--palettes-grey-500);
+	}
+}
+
+@mixin checkedHover {
+	~ .checkboxField-icon {
+		background-color: var(--palettes-primary-600);
+		border-color: var(--palettes-primary-600);
+	}
+}
+
+@mixin checkedInvalid {
+	~ .checkboxField-icon {
+		background-color: var(--palettes-error-700);
+		border-color: var(--palettes-error-700);
+	}
+}
+
+@mixin active {
+	~ .checkboxField-icon {
+		border-color: var(--palettes-grey-800);
+	}
+}
+
+@mixin disabled {
+	cursor: default;
+
+	~ .checkboxField-icon {
+		border-color: var(--palettes-grey-500);
+	}
+}
+
+@mixin focusVisible {
+	~ .checkboxField-icon {
+		&::after {
+			@include a11y.focusVisible();
+		}
+	}
+}
+
+@mixin invalid {
+	~ .checkboxField-icon {
+		border-color: var(--palettes-error-700);
+	}
+}
+
+@mixin invalidHover {
+	~ .checkboxField-icon {
+		border-color: var(--palettes-error-600);
+	}
+}
+
+@mixin invalidActive {
+	~ .checkboxField-icon {
+		border-color: var(--palettes-error-800);
+	}
+}
+
+@mixin checkedInvalidHover {
+	~ .checkboxField-icon {
+		background-color: var(--palettes-error-600);
+		border-color: var(--palettes-error-600);
+	}
+}
+
+@mixin checkedInvalidActive {
+	~ .checkboxField-icon {
+		background-color: var(--palettes-error-800);
+		border-color: var(--palettes-error-800);
+	}
+}

package/src/components/checkboxField/vars.scss

@@ -1,6 +1,6 @@
-@mixin vars {
-	--component-checkboxField-size: 1.25rem;
-	--component-checkboxField-top: 0.125rem;
-	--component-checkboxField-borderRadius: 6px;
-	--component-checkboxField-icon-fontSize: var(--sizes-S-lineHeight);
-}
+@mixin vars {
+	--component-checkboxField-size: 1.25rem;
+	--component-checkboxField-top: 0.125rem;
+	--component-checkboxField-borderRadius: 6px;
+	--component-checkboxField-icon-fontSize: var(--sizes-S-lineHeight);
+}

package/src/components/chip/component.scss

@@ -1,56 +1,56 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin component($atRoot: 'without: rule') {
-	background-color: var(--palettes-700, var(--palettes-grey-200));
-	border-radius: var(--commons-borderRadius-M);
-	color: var(--palettes-text, var(--palettes-grey-800));
-
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacings-XS);
-	position: relative;
-	vertical-align: middle;
-	padding: calc(var(--spacings-XXS) / 2) var(--spacings-XS);
-	font-size: var(--sizes-S-fontSize);
-	line-height: var(--sizes-S-lineHeight);
-
-	@at-root ($atRoot) {
-		.chip-kill {
-			background-color: var(--palettes-text, var(--palettes-grey-700));
-			color: var(--palettes-700, var(--colors-white-color));
-			border: 0;
-			border-radius: 50%;
-			height: 0.75rem;
-			width: 0.75rem;
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: background-color;
-			padding: 0;
-			overflow: hidden;
-			cursor: pointer;
-
-			&::before {
-				@include icon.generate('sign_close');
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				line-height: 0.75rem;
-				font-size: 0.75rem;
-			}
-
-			&:hover {
-				background-color: var(--palettes-grey-600);
-				color: var(--palettes-700, var(--colors-white-color));
-			}
-
-			&:focus-visible {
-				border-radius: 50%;
-				@include a11y.focusVisible();
-			}
-
-			&:active {
-				background-color: var(--palettes-50, var(--palettes-grey-800));
-			}
-		}
-	}
-}
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component($atRoot: 'without: rule') {
+	background-color: var(--palettes-700, var(--palettes-grey-200));
+	border-radius: var(--commons-borderRadius-M);
+	color: var(--palettes-text, var(--palettes-grey-800));
+
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacings-XS);
+	position: relative;
+	vertical-align: middle;
+	padding: calc(var(--spacings-XXS) / 2) var(--spacings-XS);
+	font-size: var(--sizes-S-fontSize);
+	line-height: var(--sizes-S-lineHeight);
+
+	@at-root ($atRoot) {
+		.chip-kill {
+			background-color: var(--palettes-text, var(--palettes-grey-700));
+			color: var(--palettes-700, var(--colors-white-color));
+			border: 0;
+			border-radius: 50%;
+			height: 0.75rem;
+			width: 0.75rem;
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: background-color;
+			padding: 0;
+			overflow: hidden;
+			cursor: pointer;
+
+			&::before {
+				@include icon.generate('sign_close');
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				line-height: 0.75rem;
+				font-size: 0.75rem;
+			}
+
+			&:hover {
+				background-color: var(--palettes-grey-600);
+				color: var(--palettes-700, var(--colors-white-color));
+			}
+
+			&:focus-visible {
+				border-radius: 50%;
+				@include a11y.focusVisible();
+			}
+
+			&:active {
+				background-color: var(--palettes-50, var(--palettes-grey-800));
+			}
+		}
+	}
+}

package/src/components/chip/exports.scss

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

package/src/components/chip/index.scss

@@ -1,22 +1,22 @@
-@use 'exports' as *;
-
-.chip {
-	@include vars;
-	@include component;
-
-	&.palette-primary {
-		@include primary;
-	}
-
-	&.mod-unkillable {
-		@include unkillable;
-	}
-
-	&.mod-clickable {
-		@include clickable;
-	}
-
-	&.is-disabled {
-		@include disabled;
-	}
-}
+@use 'exports' as *;
+
+.chip {
+	@include vars;
+	@include component;
+
+	&.palette-primary {
+		@include primary;
+	}
+
+	&.mod-unkillable {
+		@include unkillable;
+	}
+
+	&.mod-clickable {
+		@include clickable;
+	}
+
+	&.is-disabled {
+		@include disabled;
+	}
+}

package/src/components/chip/mods.scss

@@ -1,29 +1,29 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin primary {
-  .chip-kill {
-
-    &:hover {
-      background-color: var(--palettes-primary-50);
-    }
-
-    &:focus-visible {
-      @include a11y.focusVisible($color: var(--colors-white-color));
-    }
-  }
-}
-
-@mixin unkillable {
-	.chip-kill {
-		display: none;
-	}
-}
-
-@mixin clickable {
-	cursor: pointer;
-	text-decoration: none;
-
-	&:hover {
-		background-color: var(--palettes-600, var(--palettes-grey-100));
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin primary {
+  .chip-kill {
+
+    &:hover {
+      background-color: var(--palettes-primary-50);
+    }
+
+    &:focus-visible {
+      @include a11y.focusVisible($color: var(--colors-white-color));
+    }
+  }
+}
+
+@mixin unkillable {
+	.chip-kill {
+		display: none;
+	}
+}
+
+@mixin clickable {
+	cursor: pointer;
+	text-decoration: none;
+
+	&:hover {
+		background-color: var(--palettes-600, var(--palettes-grey-100));
+	}
+}

package/src/components/chip/states.scss

@@ -1,8 +1,8 @@
-@mixin disabled {
-  background: var(--palettes-grey-100);
-  color: var(--palettes-grey-500);
-
-  .chip-kill {
-    display: none;
-  }
-}
+@mixin disabled {
+  background: var(--palettes-grey-100);
+  color: var(--palettes-grey-500);
+
+  .chip-kill {
+    display: none;
+  }
+}

package/src/components/chip/vars.scss

@@ -1,2 +1,2 @@
-@mixin vars {
-}
+@mixin vars {
+}

package/src/components/clear/component.scss

@@ -1,33 +1,33 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-@use '@lucca-front/scss/src/commons/utils/reset';
-
-@mixin component {
-  @include reset.button;
-  
-  align-items: center;
-  background-color: var(--palettes-grey-700);
-  border-radius: 50% !important;
-  color: var(--palettes-grey-text);
-  display: flex;
-  height: var(--components-clear-size);
-  justify-content: center;
-  text-decoration: none;
-  width: var(--components-clear-size);
-
-  .lucca-icon {
-    font-size: var(--components-clear-icon-size);
-  }
-
-  &:hover {
-    background-color: var(--palettes-grey-600);
-    color: var(--palettes-grey-text);
-  }
-
-  &:focus-visible {
-    @include a11y.focusVisible();
-  }
-
-  &:active {
-    background-color: var(--palettes-grey-800);
-  }
-}
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/reset';
+
+@mixin component {
+  @include reset.button;
+  
+  align-items: center;
+  background-color: var(--palettes-grey-700);
+  border-radius: 50% !important;
+  color: var(--palettes-grey-text);
+  display: flex;
+  height: var(--components-clear-size);
+  justify-content: center;
+  text-decoration: none;
+  width: var(--components-clear-size);
+
+  .lucca-icon {
+    font-size: var(--components-clear-icon-size);
+  }
+
+  &:hover {
+    background-color: var(--palettes-grey-600);
+    color: var(--palettes-grey-text);
+  }
+
+  &:focus-visible {
+    @include a11y.focusVisible();
+  }
+
+  &:active {
+    background-color: var(--palettes-grey-800);
+  }
+}

package/src/components/clear/exports.scss

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

package/src/components/clear/index.scss

@@ -1,19 +1,19 @@
-@use 'exports' as *;
-
-.clear {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
-	}
-
-	&.palette-primary:not([disabled]) {
-		@include primary;
-	}
-
-	&[disabled] {
-		@include disabled;
-		cursor: default;
-	}
-}
+@use 'exports' as *;
+
+.clear {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+
+	&.palette-primary:not([disabled]) {
+		@include primary;
+	}
+
+	&[disabled] {
+		@include disabled;
+		cursor: default;
+	}
+}

package/src/components/clear/mods.scss

@@ -1,17 +1,17 @@
-@mixin primary {
-  background-color: var(--colors-white-color);
-  color: var(--palettes-primary-700);
-
-  &:hover {
-    background-color: var(--palettes-primary-50);
-  }
-
-  &:active {
-    background-color: var(--palettes-primary-50);
-  }
-}
-
-@mixin S {
-  --components-clear-size: .75rem;
-  --components-clear-icon-size: .75rem;
-}
+@mixin primary {
+  background-color: var(--colors-white-color);
+  color: var(--palettes-primary-700);
+
+  &:hover {
+    background-color: var(--palettes-primary-50);
+  }
+
+  &:active {
+    background-color: var(--palettes-primary-50);
+  }
+}
+
+@mixin S {
+  --components-clear-size: .75rem;
+  --components-clear-icon-size: .75rem;
+}

package/src/components/clear/states.scss

@@ -1,4 +1,4 @@
-@mixin disabled {
-  background-color: var(--palettes-grey-300);
-  color: var(--palettes-grey-500);
-}
+@mixin disabled {
+  background-color: var(--palettes-grey-300);
+  color: var(--palettes-grey-500);
+}

package/src/components/clear/vars.scss

@@ -1,4 +1,4 @@
-@mixin vars {
-  --components-clear-size: 1rem;
-  --components-clear-icon-size: var(--sizes-XS-lineHeight);
-}
+@mixin vars {
+  --components-clear-size: 1rem;
+  --components-clear-icon-size: var(--sizes-XS-lineHeight);
+}