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

package/src/components/index.scss

@@ -32,18 +32,22 @@
 @forward 'actionIcon'; // 3 Ko
 @forward 'menu'; // 4 Ko
 @forward 'radio'; // 4 Ko
+@forward 'radioField'; // new component for radio
 @forward 'switch'; // 4 Ko
+@forward 'switchField'; // new component for switch
 @forward 'file'; // 5 Ko
 @forward 'toast'; // 5 Ko
 @forward 'layout'; // 5 Ko
 @forward 'radioButtons'; // 5 Ko
 @forward 'table'; // 7 Ko
 @forward 'checkbox'; // 7 Ko
+@forward 'checkboxField'; // new component for checkbox
 @forward 'keyframe'; // 8 Ko
 @forward 'tableSorted'; // 9 Ko
 @forward 'timeline'; // 10 Ko
 @forward 'button'; // 12 Ko
-@forward 'textfield'; // 13 Ko
+@forward 'textfields'; // 13 Ko
+@forward 'textField'; // new component for checkbox
 @forward 'util'; // 14 Ko
 @forward 'navside'; // 15 Ko
 @forward 'form'; // 25 Ko
@@ -57,5 +61,12 @@
 @forward 'timepicker'; //
 @forward 'notchBox';
 @forward 'statusBadge';
+@forward 'mobileHeader';
 @forward 'clear';
-@forward 'sortableList';
+@forward 'newBadge';
+@forward 'inlineMessage';
+@forward 'numericBadge';
+@forward 'mobileNavigation';
+@forward 'footer';
+@forward 'formLabel';
+@forward 'verticalNavigation';

package/src/components/inlineMessage/component.scss

@@ -0,0 +1,13 @@
+@mixin component {
+  display: flex;
+  gap: var(--components-inlineMessage-gap);
+  font-size: var(--components-inlineMessage-fontSize);
+  line-height: var(--components-inlineMessage-lineHeight);
+  color: var(--components-inlineMessage-color);
+
+  .lucca-icon {
+    font-size: var(--components-inlineMessage-icon-fontSize);
+    color: var(--components-inlineMessage-icon-color);
+    margin-top: 2px;
+  }
+}

package/src/components/inlineMessage/exports.scss

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

package/src/components/inlineMessage/index.scss

@@ -0,0 +1,22 @@
+@use 'exports' as *;
+
+.inlineMessage {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+
+	&.is-success {
+		@include success
+	}
+
+	&.is-warning {
+		@include warning
+	}
+
+	&.is-error {
+		@include error
+	}
+}

package/src/components/inlineMessage/mods.scss

@@ -0,0 +1,5 @@
+@mixin S {
+	--components-inlineMessage-fontSize: var(--sizes-XS-fontSize);
+	--components-inlineMessage-lineHeight: var(--sizes-XS-lineHeight);
+	--components-inlineMessage-icon-fontSize: .75rem;
+}

package/src/components/inlineMessage/states.scss

@@ -0,0 +1,41 @@
+@mixin success {
+  --components-inlineMessage-icon-color: var(--palettes-success-700);
+  --components-inlineMessage-gap: var(--spacings-XXS);
+
+  .lucca-icon {
+    &::before {
+			content: '\e9ed'; // Remove when content alternative will have a good support
+			content: '\e9ed' / '';
+		}
+  }
+}
+
+@mixin warning {
+  --components-inlineMessage-icon-color: var(--palettes-warning-700);
+  --components-inlineMessage-gap: var(--spacings-XXS);
+
+  .lucca-icon {
+    &::before {
+      content: '\e992'; // Remove when content alternative will have a good support
+      content: '\e992' / '';
+    }
+  }
+}
+
+@mixin error {
+  --components-inlineMessage-icon-color: var(--palettes-error-700);
+  --components-inlineMessage-color: var(--palettes-error-700);
+  --components-inlineMessage-gap: var(--spacings-XXS);
+
+  .lucca-icon {
+    &::before {
+			content: '\e92c'; // Remove when content alternative will have a good support
+			content: '\e92c' / '';
+		}
+  }
+}
+
+@mixin disabled {
+  --components-inlineMessage-icon-color: var(--palettes-grey-500);
+  --components-inlineMessage-color: var(--palettes-grey-500);
+}

package/src/components/inlineMessage/vars.scss

@@ -0,0 +1,7 @@
+@mixin vars {
+  --components-inlineMessage-fontSize: var(--sizes-S-fontSize);
+  --components-inlineMessage-lineHeight: var(--sizes-S-lineHeight);
+  --components-inlineMessage-icon-fontSize: var(--sizes-XS-lineHeight);
+  --components-inlineMessage-color: var(--palettes-grey-700);
+  --components-inlineMessage-icon-color: var(--palettes-grey-600);
+}

package/src/components/list/component.scss

@@ -1,6 +1,7 @@
 @mixin component($atRoot: 'without: rule') {
 	background-color: var(--colors-white-color);
-	box-shadow: var(--commons-elevations-elevation-1);
+	border: var(--commons-divider-width) solid var(--commons-divider-color);
+	border-radius: var(--commons-borderRadius-M);
 	margin-bottom: var(--components-list-margin-bottom);
 	list-style: none;
 	padding: 0;
@@ -11,10 +12,12 @@
 			border-bottom-color: var(--commons-divider-color);
 			color: var(--palettes-grey-800);
 			border-bottom-style: solid;
-			align-items: center;
 			display: flex;
 			position: relative;
 			text-decoration: none;
+			gap: var(--spacings-XS);
+			padding: var(--spacings-XS) .75rem;
+
 
 			&:last-child {
 				border: 0;
@@ -22,7 +25,6 @@
 		}
 
 		.list-item-content {
-			padding: var(--components-list-padding);
 			color: var(--palettes-grey-800);
 			text-decoration: none;
 			width: 100%;
@@ -36,13 +38,21 @@
 			margin: 0;
 		}
 
+		.list-item-content-helper {
+			margin: 0;
+			color: var(--palettes-grey-600);
+			font-size: var(--sizes-S-fontSize);
+			line-height: var(--sizes-S-lineHeight);
+		}
+
 		.list-item-actions {
-			padding: var(--components-list-padding);
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: all;
 			margin-left: auto;
 			white-space: nowrap;
 			padding-left: 0;
 		}
+
+		.list-clear {
+			margin-top: var(--spacings-XXS);
+		}
 	}
 }

package/src/components/list/mods.scss

@@ -19,15 +19,14 @@
 }
 
 @mixin draggable {
-	padding-left: var(--spacings-S);
+	padding: var(--spacings-XS);
+	padding-right: .75rem;
 
 	.list-item-handler {
-		color: var(--palettes-grey-400);
-		font-size: 1.3rem;
+		color: var(--palettes-grey-600);
+		font-size: var(--sizes-M-lineHeight);
 		left: 0;
-		width: 2.4rem;
 		text-align: center;
-		position: absolute;
 		cursor: move;
 
 		&::before {

package/src/components/menu/component.scss

@@ -22,7 +22,7 @@
 		}
 	}
 
-	.label {
+	.label { // deprecated
 		margin-right: 0;
 		background-color: var(--palettes-grey-100);
 		color: var(--palettes-grey-700);
@@ -77,7 +77,7 @@
 						color: var(--palettes-grey-900);
 					}
 
-					.label {
+					.label { // deprecated
 						background-color: var(--palettes-100, var(--palettes-primary-100));
 						color: var(--palettes-700, var(--palettes-primary-700));
 					}

package/src/components/menu/mods.scss

@@ -11,7 +11,7 @@
 		padding: 0.75rem 0;
 	}
 
-	.label {
+	.label { // deprecated
 		height: var(--sizes-S-lineHeight);
 		min-width: var(--sizes-S-lineHeight);
 		line-height: var(--sizes-S-lineHeight);

package/src/components/menu/states.scss

@@ -1,7 +1,7 @@
 @mixin active {
 	color: var(--palettes-700, var(--palettes-primary-700));
 
-	.label {
+	.label { // deprecated
 		background-color: var(--palettes-100, var(--palettes-primary-100));
 		color: var(--palettes-700, var(--palettes-primary-700));
 	}
@@ -16,12 +16,22 @@
 			transform: scale(0.75, 1);
 		}
 	}
+
+	.numericBadge {
+		--components-numericBadge-background: var(--palettes-primary-200);
+		--components-numericBadge-color: var(--palettes-primary-800);
+	}
 }
 
 @mixin disabled {
 	&,
-	.label {
+	.label { // deprecated
 		color: var(--palettes-grey-500);
 		pointer-events: none;
 	}
+
+	.numericBadge {
+		--components-numericBadge-background: var(--palettes-grey-200);
+		--components-numericBadge-color: var(--palettes-grey-500);
+	}
 }

package/src/components/mobileHeader/component.scss

@@ -0,0 +1,30 @@
+@mixin component($atRoot: 'without: rule') {
+	display: flex;
+	align-items: center;
+	gap: var(--spacings-XS);
+	background-color: var(--colors-white-color);
+	box-shadow: 0 1px 0 var(--commons-border-100);
+	padding: .375rem .75rem;
+	min-height: 3.5rem;
+
+	@at-root ($atRoot) {
+		.mobileHeader-title {
+			flex: 1;
+			text-align: center;
+		}
+
+		.mobileHeader-title-main {
+			margin: 0;
+			padding: 0;
+			font-size: var(--sizes-M-fontSize);
+			line-height: var(--sizes-M-lineHeight);
+			color: var(--palettes-grey-900);
+		}
+
+		.mobileHeader-title-sub {
+			font-size: var(--sizes-S-fontSize);
+			line-height: var(--sizes-S-lineHeight);
+			color: var(--palettes-grey-700);
+		}
+	}
+}

package/src/components/mobileHeader/exports.scss

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

package/src/components/mobileHeader/index.scss

@@ -0,0 +1,10 @@
+@use 'exports' as *;
+
+.mobileHeader {
+	@include vars;
+	@include component;
+
+	&.mod-largeTitle {
+		@include largeTitle;
+	}
+}

package/src/components/mobileHeader/mods.scss

@@ -0,0 +1,23 @@
+@mixin largeTitle {
+	flex-wrap: wrap;
+
+	.mobileHeader-actions {
+		margin-left: auto;
+	}
+
+	.mobileHeader-title {
+		order: 2;
+		flex: 100%;
+		text-align: inherit;
+	}
+
+	.mobileHeader-title-main {
+		font-size: var(--sizes-XXL-fontSize);
+		line-height: var(--sizes-XXL-lineHeight);
+	}
+
+	.mobileHeader-title-sub {
+		font-size: var(--sizes-M-fontSize);
+		line-height: var(--sizes-M-lineHeight);
+	}
+}

package/src/components/mobileHeader/vars.scss

@@ -0,0 +1,3 @@
+@mixin vars {
+
+}

package/src/components/mobileNavigation/component.scss

@@ -0,0 +1,56 @@
+@use '@lucca-front/scss/src/commons/utils/reset';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component($atRoot: 'without: rule') {
+	background-color: var(--colors-white-color);
+	bottom: 0;
+	box-shadow: var(--commons-boxShadow-S);
+	padding: 0 var(--spacings-XS);
+	position: sticky;
+
+	@at-root ($atRoot) {
+		.mobileNavigation-list {
+			@include reset.list;
+			display: flex;
+		}
+
+		.mobileNavigation-list-item {
+			flex-grow: 1;
+			text-align: center;
+		}
+
+		.mobileNavigation-list-item-link {
+			color: var(--palettes-grey-700);
+			display: flex;
+			flex-direction: column;
+			font-size: var(--sizes-XS-fontSize);
+			gap: var(--spacings-XXS);
+			line-height: var(--sizes-XS-lineHeight);
+			padding: var(--spacings-XS) var(--spacings-XXS);
+			position: relative;
+			text-decoration: none;
+
+			&:focus-visible {
+				@include a11y.focusVisible($offset: 0px);
+			}
+
+			.lucca-icon {
+				font-size: var(--sizes-M-lineHeight);
+			}
+
+			&[aria-current="page"] {
+				color: var(--palettes-primary-700);
+				font-weight: 600;
+			}
+		}
+
+		.mobileNavigation-list-item-link-counter {
+			--components-numericBadge-background: var(--palettes-primary-200);
+			--components-numericBadge-color: var(--palettes-primary-800);
+			box-shadow: 0 0 0 2px var(--colors-white-color);
+			position: absolute;
+			left: calc(50% + 5px);
+			top: 5px;
+		}
+	}
+}

package/src/components/mobileNavigation/exports.scss

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

package/src/components/mobileNavigation/index.scss

@@ -0,0 +1,10 @@
+@use 'exports' as *;
+
+.mobileNavigation {
+	@include vars;
+	@include component;
+
+	// &.mod-L {
+	// 	@include l;
+	// }
+}

package/src/components/mobileNavigation/mods.scss

@@ -0,0 +1,5 @@
+// @mixin outlined {
+// 	color: var(--palettes-600, var(--palettes-grey-600));
+// 	background-color: var(--colors-white-color);
+// 	box-shadow: 0 0 0 1px var(--palettes-300, var(--palettes-grey-300));
+// }

package/src/components/mobileNavigation/vars.scss

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

package/src/components/navside/component.scss

@@ -107,7 +107,11 @@
 			font-weight: 600;
 		}
 
-		.navSide-item-alert {
+		.numericBadge {
+			margin-left: auto;
+		}
+
+		.navSide-item-alert { // deprecated
 			font-size: var(--sizes-XS-fontSize);
 			font-weight: 600;
 			background-color: var(--components-navSide-fullwidth-palette-alert-color);
@@ -122,7 +126,6 @@
 			padding: 0 var(--spacings-XXS);
 			min-width: 1.25rem;
 			text-align: center;
-			flex-shrink: 0;
 		}
 
 		.navSide-item-arrow {
@@ -180,7 +183,7 @@
 				}
 			}
 
-			.navSide-item-alert {
+			.navSide-item-alert { // deprecated
 				background-color: var(--components-navSide-bottom-section-palette-alert-color);
 				color: var(--components-navSide-bottom-section-palette-alert-text);
 			}

package/src/components/navside/mods.scss

@@ -26,7 +26,10 @@
 		display: none;
 	}
 
-	.navSide-item-alert {
+	.navSide-item-alert { // deprecated
+		background-color: var(--components-navSide-compact-palette-alert-color);
+		color: var(--components-navSide-compact-palette-alert-text);
+		padding: 0 var(--spacings-XS);
 		margin: auto;
 		position: relative;
 	}
@@ -75,6 +78,11 @@
 	background-color: var(--components-navSide-compact-palette-selected-bg);
 	color: var(--components-navSide-compact-palette-selected-text);
 	opacity: 1;
+
+	.navSide-item-alert { // deprecated
+		background-color: var(--components-navSide-compact-palette-selected-alert-color);
+		color: var(--components-navSide-compact-palette-selected-alert-text);
+	}
 }
 
 @mixin banner {

package/src/components/navside/states.scss

@@ -3,7 +3,7 @@
 	color: var(--components-navSide-fullwidth-palette-selected-text);
 	opacity: 1;
 
-	.navSide-item-alert {
+	.navSide-item-alert { // deprecated
 		background-color: var(--components-navSide-fullwidth-palette-selected-alert-text);
 		color: var(--components-navSide-fullwidth-palette-selected-alert-color);
 	}

package/src/components/newBadge/component.scss

@@ -0,0 +1,10 @@
+@mixin component {
+  display: inline-flex;
+  font-size: var(--sizes-XS-fontSize);
+  line-height: var(--sizes-XS-lineHeight);
+  font-weight: 600;
+  background-color: var(--palettes-primary-700);
+  color: var(--palettes-primary-text);
+  padding: 0 var(--spacings-XXS);
+  border-radius: var(--commons-borderRadius-M);
+}

package/src/components/newBadge/exports.scss

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

package/src/components/newBadge/index.scss

@@ -0,0 +1,6 @@
+@use 'exports' as *;
+
+.newBadge {
+	@include vars;
+	@include component;
+}

package/src/components/newBadge/vars.scss

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

package/src/components/numericBadge/component.scss

@@ -0,0 +1,17 @@
+@mixin component {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	height: var(--components-numericBadge-size);
+	min-width: var(--components-numericBadge-size);
+	padding: var(--spacings-XXS);
+	font-size: var(--components-numericBadge-fontSize);
+	line-height: var(--components-numericBadge-lineHeight);
+	font-weight: 600;
+	background-color: var(--components-numericBadge-background);
+	color: var(--components-numericBadge-color);
+	border-radius: var(--components-numericBadge-borderRadius);
+	transition-property: background-color, color;
+	transition-duration: var(--commons-animations-durations-fast);
+	transition-timing-function: ease;
+}

package/src/components/numericBadge/exports.scss

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

package/src/components/numericBadge/index.scss

@@ -0,0 +1,14 @@
+@use 'exports' as *;
+
+.numericBadge {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include s;
+	}
+
+	&.mod-XS {
+		@include xs;
+	}
+}

package/src/components/numericBadge/mods.scss

@@ -0,0 +1,13 @@
+@mixin s {
+  --components-numericBadge-size: 1.25rem;
+  --components-numericBadge-borderRadius: 6px;
+  --components-numericBadge-fontSize: var(--sizes-XS-fontSize);
+  --components-numericBadge-lineHeight: var(--sizes-XS-lineHeight);
+}
+
+@mixin xs {
+  --components-numericBadge-size: 1rem;
+  --components-numericBadge-borderRadius: var(--commons-borderRadius-M);
+  --components-numericBadge-fontSize: var(--sizes-XS-fontSize);
+  --components-numericBadge-lineHeight: var(--sizes-XS-lineHeight);
+}

package/src/components/numericBadge/vars.scss

@@ -0,0 +1,8 @@
+@mixin vars {
+  --components-numericBadge-background: var(--palettes-200, var(--palettes-grey-200));
+  --components-numericBadge-color: var(--palettes-800, var(--palettes-grey-700));
+  --components-numericBadge-size: 1.5rem;
+  --components-numericBadge-fontSize: var(--sizes-S-fontSize);
+  --components-numericBadge-lineHeight: var(--sizes-S-lineHeight);
+  --components-numericBadge-borderRadius: var(--commons-borderRadius-L);
+}

package/src/components/pagination/component.scss

@@ -2,7 +2,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	padding: var(--spacings-XS) .75rem;
-	justify-content: end;
+	justify-content: flex-end;
 
 	> *:not(:last-child) {
 		margin-right: var(--spacings-XS);

package/src/components/radioButtons/component.scss

@@ -70,6 +70,11 @@
 						background-color: var(--palettes-primary-50);
 						box-shadow: inset 0 0 0 var(--commons-divider-width) var(--palettes-primary-500);
 						color: var(--palettes-primary-800);
+
+						.numericBadge {
+							--components-numericBadge-background: var(--palettes-primary-200);
+							--components-numericBadge-color: var(--palettes-primary-800);
+						}
 					}
 				}
 			}