@lucca-front/scss 16.0.0 → 16.1.0

package/src/components/switch/states.scss

@@ -1,17 +1,18 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/a11y';
 
 @mixin checked {
 	~ .switch-label {
 		&::before {
-			@include icon.generate('tick');
+			@include icon.generate('confirm');
 
 			display: flex;
-			background-color: var(--palettes-700, var(--components-switch-default-palette-700));
-			padding-left: var(--components-switch-icon-left);
+			background-color: var(--palettes-700, var(--palettes-primary-700));
+			padding-left: var(--components-switch-handler-offset);
 		}
 
 		&::after {
-			left: calc(1rem - 2px);
+			left: calc(var(--components-switch-width) - var(--components-switch-slider-size) - var(--components-switch-handler-offset));
 		}
 	}
 }
@@ -20,17 +21,7 @@
 	&:not([disabled], [readonly]) {
 		~ .switch-label {
 			&::before {
-				background-color: var(--palettes-600, var(--components-switch-default-palette-600));
-			}
-		}
-	}
-}
-@mixin checkedFocus {
-	&:not([disabled], [readonly]) {
-		~ .switch-label {
-			&::before {
-				background-color: var(--palettes-600, var(--components-switch-default-palette-600));
-				box-shadow: 0 0 0 4px var(--palettes-200, var(--components-switch-default-palette-200));
+				background-color: var(--palettes-600, var(--palettes-primary-600));
 			}
 		}
 	}
@@ -40,25 +31,12 @@
 	&:not([disabled], [readonly]) {
 		~ .switch-label {
 			&::before {
-				background-color: var(--palettes-800, var(--components-switch-default-palette-800));
-				box-shadow: 0 0 0 4px var(--palettes-300, var(--components-switch-default-palette-300));
+				background-color: var(--palettes-800, var(--palettes-primary-800));
 			}
 		}
 	}
 }
 
-@mixin checkedS {
-	~ .switch-label {
-		&::before {
-			font-size: var(--sizes-XS-fontSize);
-		}
-
-		&::after {
-			left: calc(var(--sizes-S-fontSize) - 2px);
-		}
-	}
-}
-
 @mixin hover {
 	~ .switch-label {
 		&::before {
@@ -72,7 +50,6 @@
 		~ .switch-label {
 			&::before {
 				background-color: var(--palettes-grey-600);
-				box-shadow: 0 0 0 4px var(--palettes-grey-300);
 			}
 		}
 	}
@@ -82,7 +59,7 @@
 	&:not([disabled], [readonly]) {
 		~ .switch-label {
 			&::before {
-				box-shadow: 0 0 0 4px var(--palettes-grey-200);
+				@include a11y.focusVisible;
 			}
 		}
 	}
@@ -94,7 +71,7 @@
 		cursor: default;
 
 		&::before {
-			background-color: var(--palettes-grey-200);
+			background-color: var(--palettes-grey-100);
 			color: var(--palettes-grey-500);
 		}
 
@@ -108,7 +85,7 @@
 @mixin disabledChecked {
 	~ .switch-label {
 		&::before {
-			background-color: var(--palettes-grey-200);
+			background-color: var(--palettes-grey-100);
 		}
 	}
 }

package/src/components/switch/vars.scss

@@ -1,20 +1,12 @@
 @mixin vars {
-	--components-switch-default-palette-50: var(--palettes-primary-50);
-	--components-switch-default-palette-100: var(--palettes-primary-100);
-	--components-switch-default-palette-200: var(--palettes-primary-200);
-	--components-switch-default-palette-300: var(--palettes-primary-300);
-	--components-switch-default-palette-400: var(--palettes-primary-400);
-	--components-switch-default-palette-500: var(--palettes-primary-500);
-	--components-switch-default-palette-600: var(--palettes-primary-600);
-	--components-switch-default-palette-700: var(--palettes-primary-700);
-	--components-switch-default-palette-800: var(--palettes-primary-800);
-	--components-switch-default-palette-900: var(--palettes-primary-900);
-
-	--components-switch-top: 1px;
-	--components-switch-icon-top: 1px;
-	--components-switch-icon-left: 2px;
-	--components-switch-icon-right: calc(2px + 0.75rem);
-	--components-switch-S-top: 2px;
-	--components-switch-S-icon-left: 1px;
-	--components-switch-S-icon-right: calc(3px + 0.5rem);
+	--components-switch-offset-top: 2px;
+	--components-switch-handler-offset: 2px;
+	--components-switch-height: 1.25rem;
+	--components-switch-width: 2.25rem;
+	--components-switch-slider-size: 1rem;
+	--components-switch-icon-size: var(--sizes-XS-lineHeight);
+	--components-switch-lineHeight: var(--sizes-M-lineHeight);
+	--components-switch-fontSize: var(--sizes-M-fontSize);
+	--components-switch-helper-lineHeight: var(--sizes-S-lineHeight);
+	--components-switch-helper-fontSize: var(--sizes-S-fontSize);
 }

package/src/components/textfield/component.scss

@@ -6,16 +6,17 @@
 		.textfield-input {
 			min-width: 0;
 			border: 0;
+			box-shadow: 0 0 0 1px var(--palettes-grey-300);
 			line-height: var(--sizes-M-lineHeight);
 			-webkit-appearance: none;
-			background-color: var(--components-textfield-background);
+			background-color: var(--colors-white-color);
 			border-radius: var(--components-textfield-border-radius);
 			padding: var(--components-textfield-input-padding-vertical) var(--components-textfield-input-padding-horizontal);
 			transition-property: box-shadow, background-color, color;
 			transition-duration: var(--commons-animations-durations-fast);
 
 			&::placeholder {
-				color: var(--palettes-400, var(--components-textfield-input-placeholder));
+				color: var(--palettes-grey-400);
 				transition-property: color;
 				transition-duration: var(--commons-animations-durations-fast);
 				opacity: 1;
@@ -30,6 +31,7 @@
 		}
 
 		.textfield-suffix {
+			color: var(--palettes-grey-600);
 			top: calc(var(--components-textfield-suffix-top) + var(--components-textfield-input-padding-vertical));
 			right: var(--components-textfield-input-padding-horizontal);
 			position: absolute;

package/src/components/textfield/index.scss

@@ -51,10 +51,6 @@
 				@include searchClearableXS;
 			}
 		}
-
-		&.mod-outlined {
-			@include outlinedSearch;
-		}
 	}
 
 	&.mod-clearable {
@@ -89,24 +85,8 @@
 		}
 	}
 
-	&.mod-white {
-		@include white;
-
-		.textfield-input {
-			&:is(:focus) {
-				@include whiteInputFocus;
-			}
-		}
-	}
-
 	&.mod-invert {
 		@include invert;
-
-		.textfield-input {
-			&:is(:focus) {
-				@include invertInputFocus;
-			}
-		}
 	}
 
 	&.mod-radio {
@@ -271,40 +251,6 @@
 			@include materialValid;
 		}
 	}
-
-	&.mod-outlined {
-		@include outlined;
-
-		&:hover {
-			@include outlinedHover;
-		}
-
-		&:is(.is-focused, .focused) .textfield-input,
-		.textfield-input:is(:focus, .is-focused, .focused) {
-			@include outlinedFocus;
-		}
-
-		.textfield-input {
-			&:is(.is-disabled, .disabled, [disabled], .is-readonly, .readonly, [readonly]) {
-				&,
-				&:is(:focus, .is-focused, .focused) {
-					@include outlinedInputDisabled;
-				}
-			}
-
-			&:is(.is-error, .error, .palette-error) {
-				@include outlinedError;
-
-				&:hover {
-					@include outlinedErrorHover;
-				}
-
-				&:is(:focus-within) {
-					@include outlinedErrorFocus;
-				}
-			}
-		}
-	}
 }
 
 .textfield-input {
@@ -312,7 +258,7 @@
 		@include inputHover;
 	}
 
-	&:is(:focus, .is-focused, .focused) {
+	&:is(:focus-visible, .is-focused, .focused) {
 		@include inputFocus;
 	}
 }

package/src/components/textfield/mods.scss

@@ -23,27 +23,28 @@
 
 @mixin clearable {
 	.textfield-input {
-		padding-right: 3rem;
+		padding-right: 2rem;
 	}
 
 	.textfield-actionClear {
 		text-align: center;
 		position: absolute;
-		bottom: .5rem;
+		bottom: .75rem;
 		right: var(--spacings-XS);
-		width: 1.5rem;
-		height: 1.5rem;
+		width: 1rem;
+		height: 1rem;
 		padding: 0;
 		line-height: 0;
-	}
+		background-color: var(--palettes-grey-700);
+		border-radius: 50%;
 
-	&:not(.mod-outlined) {
-		.textfield-actionClear {
-			color: var(--palettes-700, var(--palettes-primary-700));
+		.lucca-icon {
+			font-size: var(--sizes-XS-lineHeight);
+			color: white;
+		}
 
-			&:hover {
-				background: var(--palettes-100, var(--palettes-primary-100));
-			}
+		&:hover {
+			background-color: var(--palettes-grey-600) !important;
 		}
 	}
 }
@@ -81,9 +82,15 @@
 }
 
 @mixin S {
+	.textfield-label {
+		line-height: var(--sizes-S-lineHeight);
+		font-size: var(--sizes-S-fontSize);
+	}
+
 	.textfield-input {
-		line-height: var(--sizes-XS-lineHeight);
+		line-height: var(--sizes-S-lineHeight);
 		font-size: var(--sizes-S-fontSize);
+		padding: .375rem;
 	}
 
 	.textfield-suffix {
@@ -97,11 +104,15 @@
 }
 
 @mixin XS {
+	.textfield-label {
+		line-height: var(--sizes-XS-lineHeight);
+		font-size: var(--sizes-XS-fontSize);
+	}
+
 	.textfield-input {
 		line-height: var(--sizes-XS-lineHeight);
 		font-size: var(--sizes-XS-fontSize);
-		padding-bottom: var(--spacings-XXS);
-		padding-top: var(--spacings-XXS);
+		padding: var(--spacings-XXS);
 	}
 
 	.textfield-suffix {
@@ -113,6 +124,16 @@
 			font-size: calc(var(--sizes-XS-fontSize) * 1.25);
 		}
 	}
+
+	.textfield-messages {
+		font-size: var(--sizes-XS-fontSize);
+		line-height: var(--sizes-XS-lineHeight);
+
+		.lucca-icon {
+			font-size: .75rem;
+			line-height: var(--sizes-XS-lineHeight);
+		}
+	}
 }
 
 @mixin noLabelXS {
@@ -152,26 +173,7 @@
 	}
 }
 
-@mixin white {
-	.textfield-input {
-		background-color: var(--colors-white-color);
-		box-shadow: 0 0 0 1px var(--palettes-500, var(--palettes-primary-500)) inset;
-
-		&::placeholder {
-			color: var(--palettes-300, var(--components-textfield-focus-placeholder));
-		}
-	}
-}
-
 @mixin invert {
-	.textfield-input {
-		background-color: var(--colors-white-color);
-
-		&::placeholder {
-			color: var(--palettes-300, var(--components-textfield-focus-placeholder));
-		}
-	}
-
 	.textfield-label {
 		color: var(--colors-white-color);
 	}
@@ -179,7 +181,11 @@
 
 @mixin materialSearchBlockClearableInput {
 	.textfield-input {
-		padding-right: 3rem;
+		padding-right: 3.75rem;
+	}
+
+	.textfield-actionClear {
+		right: 2rem;
 	}
 }
 
@@ -187,13 +193,13 @@
 	&::after {
 		@include icon.generate('search');
 
-		color: var(--palettes-primary-600);
+		color: var(--palettes-grey-600);
 		position: absolute;
 		pointer-events: none;
 		bottom: var(--spacings-XS);
-		font-size: var(--sizes-S-lineHeight);
+		font-size: var(--sizes-M-lineHeight);
 		line-height: var(--sizes-M-lineHeight);
-		right: 0.33rem;
+		right: var(--spacings-XS);
 	}
 
 	.textfield-input {
@@ -207,32 +213,39 @@
 	}
 }
 
-@mixin outlinedSearch {
-	&::after {
-		color: var(--palettes-grey-600);
-	}
-}
-
 @mixin searchClearable {
 	.textfield-input {
-		padding-right: 3rem;
+		padding-right: 4rem;
 	}
 
 	.textfield-actionClear {
-		right: 1.5rem;
+		right: 2.5rem;
 	}
 }
 
 @mixin searchS {
 	&::after {
-		line-height: var(--sizes-XS-lineHeight);
-		font-size: var(--sizes-XS-lineHeight);
+		line-height: var(--sizes-S-lineHeight);
+		font-size: var(--sizes-S-lineHeight);
+		bottom: .375rem;
+		right: .375rem;
 	}
 }
 
 @mixin searchClearableS {
+	.textfield-input {
+		padding-right: 3.5rem;
+	}
+
 	.textfield-actionClear {
-		right: 1.5rem;
+		right: 2.125rem;
+		bottom: .625rem;
+		width: .75rem;
+		height: .75rem;
+
+		.lucca-icon {
+			font-size: .75rem;
+		}
 	}
 }
 
@@ -241,12 +254,24 @@
 		line-height: var(--sizes-XS-lineHeight);
 		font-size: var(--sizes-XS-lineHeight);
 		bottom: var(--spacings-XXS);
+		right: var(--spacings-XXS);
 	}
 }
 
 @mixin searchClearableXS {
+	.textfield-input {
+		padding-right: 3rem;
+	}
+
 	.textfield-actionClear {
-		right: 1.25rem;
+		right: 1.75rem;
+		bottom: .375rem;
+		width: .75rem;
+		height: .75rem;
+
+		.lucca-icon {
+			font-size: .75rem;
+		}
 	}
 }
 
@@ -287,6 +312,7 @@
 		// todo: déplacer dans filters ?
 		height: var(--components-filters-height);
 		border-radius: 0;
+		box-shadow: none;
 
 		&::after {
 			bottom: var(--spacings-XS);
@@ -357,6 +383,7 @@
 		padding: var(--components-field-framed-top-padding) var(--components-field-framed-side-padding)
 			var(--components-field-framed-bottom-padding);
 		line-height: var(--sizes-M-lineHeight);
+		outline: none;
 
 		&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
 			background-color: var(--colors-white-color);
@@ -371,6 +398,8 @@
 		top: 0;
 		z-index: 10;
 		line-height: var(--sizes-M-lineHeight);
+		font-size: var(--sizes-S-fontSize);
+		color: var(--palettes-grey-600);
 	}
 
 	.textfield-messages,
@@ -556,14 +585,3 @@
 		padding-right: var(--spacings-M);
 	}
 }
-
-@mixin outlined {
-	.textfield-input {
-		box-shadow: inset 0 0 0 var(--components-textfield-outlined-border-width) var(--components-textfield-outlined-border-default-color);
-		background-color: var(--colors-white-color);
-
-		&::placeholder {
-			color: var(--palettes-grey-400);
-		}
-	}
-}

package/src/components/textfield/states.scss

@@ -1,27 +1,18 @@
 @use '@lucca-front/scss/src/commons/utils/form';
+@use '@lucca-front/scss/src/commons/utils/a11y';
 
 @mixin inputHover {
-	background-color: var(--palettes-100, var(--components-textfield-hover-background));
-
-	&::placeholder {
-		color: var(--palettes-400, var(--components-textfield-hover-placeholder));
-	}
+	box-shadow: 0 0 0 1px var(--palettes-grey-400);
 }
 
 @mixin inputFocus {
-	background-color: var(--colors-white-color);
-	box-shadow: 0 0 0 4px var(--palettes-200, var(--components-textfield-focus-shadow-color)),
-		inset 0 0 0 1px var(--palettes-600, var(--components-textfield-focus-border-color));
-
-	&::placeholder {
-		color: var(--palettes-300, var(--components-textfield-focus-placeholder));
-	}
+	@include a11y.focusVisible($offset: 3px);
 }
 
 @mixin inputDisabled {
 	background-color: var(--components-textfield-disabled-background);
 	color: var(--components-textfield-disabled-color);
-	box-shadow: none;
+	box-shadow: 0 0 0 1px var(--palettes-grey-300);
 	cursor: default;
 
 	&::placeholder {
@@ -34,22 +25,6 @@
 	}
 }
 
-@mixin whiteInputFocus {
-	box-shadow: 0 0 0 4px var(--palettes-primary-200), 0 0 0 1px var(--palettes-primary-500) inset;
-
-	&::placeholder {
-		color: var(--palettes-300, var(--components-textfield-focus-placeholder));
-	}
-}
-
-@mixin invertInputFocus {
-	box-shadow: 0 0 0 4px var(--palettes-primary-700), 0 0 0 1px var(--palettes-primary-500) inset;
-
-	&::placeholder {
-		color: var(--palettes-300, var(--components-textfield-focus-placeholder));
-	}
-}
-
 @mixin filterHover {
 	background-color: var(--commons-background-base);
 }
@@ -186,6 +161,8 @@
 }
 
 @mixin materialInputFocus {
+	outline: none;
+
 	&::placeholder {
 		opacity: 1;
 	}
@@ -242,58 +219,6 @@
 	}
 }
 
-@mixin outlinedHover {
-	.textfield-input {
-		&:not(.is-disabled, .disabled, [disabled], [readonly], .is-readonly, .readonly) {
-			box-shadow: inset 0 0 0 var(--components-textfield-outlined-border-width) var(--palettes-400, var(--palettes-grey-400));
-		}
-	}
-}
-
-@mixin outlinedFocus {
-	&:not(.is-disabled, .disabled, [disabled], [readonly], .is-readonly, .readonly) {
-		background-color: var(--colors-white-color);
-		box-shadow: 0 0 0 4px var(--palettes-200, var(--palettes-primary-200)),
-			inset 0 0 0 var(--components-textfield-outlined-border-width) var(--palettes-600, var(--palettes-primary-600));
-
-		&::placeholder {
-			color: var(--palettes-grey-300);
-		}
-	}
-}
-
-@mixin outlinedError {
-	&:not(.is-disabled, .disabled, [disabled], [readonly], .is-readonly, .readonly) {
-		background-color: var(--palettes-error-50);
-		box-shadow: inset 0 0 0 var(--components-textfield-outlined-border-width) var(--palettes-error-600);
-	}
-}
-
-@mixin outlinedErrorHover {
-	&:not(.is-disabled, .disabled, [disabled], [readonly], .is-readonly, .readonly) {
-		background-color: var(--palettes-error-100);
-		box-shadow: inset 0 0 0 var(--components-textfield-outlined-border-width) var(--palettes-error-600);
-	}
-}
-
-@mixin outlinedErrorFocus {
-	&:not(.is-disabled, .disabled, [disabled], [readonly], .is-readonly, .readonly) {
-		background-color: var(--colors-white-color);
-		box-shadow: 0 0 0 4px var(--palettes-error-200), inset 0 0 0 1px var(--palettes-error-700);
-
-		&::placeholder {
-			color: var(--palettes-error-300);
-		}
-	}
-}
-
-@mixin outlinedInputDisabled {
-	background-color: var(--components-textfield-disabled-background);
-	color: var(--components-textfield-disabled-color);
-	box-shadow: inset 0 0 0 var(--components-textfield-outlined-border-width) var(--components-textfield-outlined-border-default-color);
-	cursor: default;
-}
-
 @mixin entryHover {
 	background-color: var(--palettes-primary-50);
 }

package/src/components/textfield/vars.scss

@@ -1,5 +1,4 @@
 @mixin vars {
-	--components-textfield-background: var(--palettes-primary-50);
 	--components-textfield-border-radius: 4px;
 	--components-textfield-input-padding-horizontal: var(--spacings-XS);
 	--components-textfield-input-padding-vertical: var(--spacings-XS);
@@ -11,8 +10,8 @@
 	--components-textfield-focus-border-color: var(--palettes-primary-600);
 	--components-textfield-disabled-background: var(--commons-disabled-background);
 	--components-textfield-disabled-color: var(--palettes-grey-600);
-	--components-textfield-suffix-top: 1.5rem;
-	--components-textfield-suffix-padding-right: var(--spacings-M);
+	--components-textfield-suffix-top: 1.75rem;
+	--components-textfield-suffix-padding-right: var(--spacings-L);
 	--components-textfield-sizes-shortest: 3rem;
 	--components-textfield-sizes-shorter: 6rem;
 	--components-textfield-sizes-short: 9rem;
@@ -38,8 +37,5 @@
 	--components-textfield-compact-label-sizes-long: 9rem;
 	--components-textfield-compact-label-sizes-longer: 11rem;
 
-	--components-textfield-outlined-border-width: 1px;
-	--components-textfield-outlined-border-default-color: var(--palettes-grey-200);
-
 	--components-textfield-filter-width: 18rem;
 }

package/src/components/title/mods.scss

@@ -2,40 +2,47 @@
 	--sizes-verticalPadding: var(--sizes-XXXL-verticalPadding);
 	--sizes-fontSize: var(--sizes-XXXL-fontSize);
 	--sizes-lineHeight: var(--sizes-XXXL-lineHeight);
+	--components-title-weight: 900;
 }
 
 @mixin h1 {
 	--sizes-verticalPadding: var(--sizes-XXL-verticalPadding);
 	--sizes-fontSize: var(--sizes-XXL-fontSize);
 	--sizes-lineHeight: var(--sizes-XXL-lineHeight);
+	--components-title-weight: 900;
 }
 
 @mixin h2 {
 	--sizes-verticalPadding: var(--sizes-XL-verticalPadding);
 	--sizes-fontSize: var(--sizes-XL-fontSize);
 	--sizes-lineHeight: var(--sizes-XL-lineHeight);
+	--components-title-weight: 700;
 }
 
 @mixin h3 {
 	--sizes-verticalPadding: var(--sizes-L-verticalPadding);
 	--sizes-fontSize: var(--sizes-L-fontSize);
 	--sizes-lineHeight: var(--sizes-L-lineHeight);
+	--components-title-weight: 700;
 }
 
 @mixin h4 {
 	--sizes-verticalPadding: var(--sizes-M-verticalPadding);
 	--sizes-fontSize: var(--sizes-M-fontSize);
 	--sizes-lineHeight: var(--sizes-M-lineHeight);
+	--components-title-weight: 600;
 }
 
 @mixin h5 {
 	--sizes-verticalPadding: var(--sizes-S-verticalPadding);
 	--sizes-fontSize: var(--sizes-S-fontSize);
 	--sizes-lineHeight: var(--sizes-S-lineHeight);
+	--components-title-weight: 600;
 }
 
 @mixin h6 {
 	--sizes-verticalPadding: var(--sizes-XS-verticalPadding);
 	--sizes-fontSize: var(--sizes-XS-fontSize);
 	--sizes-lineHeight: var(--sizes-XS-lineHeight);
+	--components-title-weight: 600;
 }