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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "16.2.7-rc.2",
+  "version": "16.3.0-rc.1",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,6 +23,6 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "v16.2.7-rc.2"
+    "@lucca-front/icons": "v16.3.0-rc.1"
   }
 }

package/src/components/button/index.scss

@@ -30,7 +30,7 @@
 		@include XS;
 	}
 
-	&.mod-counter {
+	&.mod-counter { // deprecated
 		@include counter;
 
 		&.mod-S {

package/src/components/button/mods.scss

@@ -6,6 +6,7 @@
 	--components-button-line-height: var(--sizes-S-lineHeight);
 	--components-button-padding: .375rem .75rem;
 	--icon-size: var(--sizes-M-fontSize);
+	--components-button-gap: .375rem;
 }
 
 @mixin XS {
@@ -55,7 +56,7 @@
 		}
 	}
 
-	.button-counter {
+	.button-counter { // deprecated
 		background-color: var(--palettes-300, var(--palettes-grey-300));
 		color: var(--palettes-800, var(--palettes-grey-800));
 	}
@@ -111,7 +112,7 @@
 	--components-button-padding: var(--spacings-XS) calc(var(--spacings-XS) + var(--spacings-XXS)) var(--spacings-XS) var(--spacings-S);
 
 	@at-root ($atRoot) {
-		.button-counter {
+		.button-counter { // deprecated
 			background-color: var(--palettes-600, var(--palettes-primary-600));
 			border-radius: 1rem;
 			display: flex;
@@ -124,7 +125,7 @@
 		}
 
 		&:hover {
-			.button-counter {
+			.button-counter { // deprecated
 				background-color: var(--palettes-500, var(--palettes-primary-500));
 			}
 		}
@@ -134,7 +135,7 @@
 @mixin counterS {
 	--components-button-padding: .375rem calc(var(--spacings-XS) + var(--spacings-XXS)) .375rem var(--spacings-S);
 
-	.button-counter {
+	.button-counter { // deprecated
 		height: 1.25rem;
 		min-width: 1.25rem;
 	}
@@ -143,7 +144,7 @@
 @mixin counterXS {
 	--components-button-padding: var(--spacings-XXS) var(--spacings-XS) var(--spacings-XXS) calc(var(--spacings-XS) + var(--spacings-XXS));
 
-	.button-counter {
+	.button-counter { // deprecated
 		height: 1rem;
 		min-width: 1rem;
 	}

package/src/components/button/states.scss

@@ -7,17 +7,21 @@
 	background-color: var(--commons-disabled-background);
 	color: var(--commons-disabled-color);
 	cursor: default;
+
+	.numericBadge {
+			background-color: var(--palettes-grey-200);
+			color: var(--commons-disabled-color);
+	}
 }
 
 @mixin disabledOutlined {
 	background-color: var(--colors-white-color);
-	box-shadow: inset 0 0 0 1px var(--palettes-400, var(--palettes-grey-400));
-	color: var(--palettes-grey-500);
+	box-shadow: inset 0 0 0 1px var(--palettes-grey-200);
 	cursor: default;
 }
 
 @mixin disabledText {
-	color: var(--palettes-grey-500);
+	color: var(--commons-disabled-color);
 	background-color: transparent;
 	cursor: default;
 }

package/src/components/checkbox/mods.scss

@@ -23,7 +23,7 @@
 }
 
 @mixin noLabel {
-	height: 1.25rem;
+	height: 1rem;
 
 	.checkbox-label {
 		vertical-align: top;

package/src/components/checkboxField/component.scss

@@ -0,0 +1,85 @@
+@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) {
+		.checkboxField-label {
+			display: contents;
+		}
+
+		.checkboxField-label-input {
+			width: var(--component-checkboxField-label-input-size);
+			height: var(--component-checkboxField-label-input-size);
+			border: 2px solid var(--palettes-grey-700);
+			border-radius: var(--component-checkboxField-label-input-borderRadius);
+			position: relative;
+			top: var(--component-checkboxField-label-input-top);
+			color: var(--colors-white-color);
+			transition-property: color, border-color, background-color;
+			transition-duration: var(--commons-animations-durations-fast);
+			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-checkboxField-label-input-borderRadius);
+			}
+		}
+
+		.checkboxField-label-input-icon {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
+			transform: scale(0);
+			transition-property: transform;
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 0);
+
+			@media (prefers-reduced-motion: reduce) {
+				transition-property: none;
+			}
+
+			&::before {
+				font-weight: 400;
+				font-size: var(--component-checkboxField-label-input-icon-fontSize);
+				direction: ltr;
+				font-family: 'Lucca icons';
+				font-feature-settings: 'liga';
+				font-style: normal;
+				letter-spacing: normal;
+				line-height: 1;
+				text-transform: none;
+				white-space: nowrap;
+				word-wrap: normal;
+				content: '\e97d'; // Remove when content alternative will have a good support
+				content: '\e97d' / '';
+			}
+		}
+
+		.checkboxField-input {
+			@include a11y.mask;
+		}
+
+		.formLabel {
+			@include formLabel.label;
+		}
+
+		.inlineMessage {
+			grid-column: 2;
+		}
+	}
+}

package/src/components/checkboxField/index.scss

@@ -0,0 +1,72 @@
+@use 'exports' as *;
+
+.checkboxField {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+}
+
+.checkboxField-input {
+	&[aria-checked='mixed'] {
+		@include mixed;
+	}
+
+	&:focus-visible {
+		@include focusVisible;
+	}
+
+	&:hover {
+		@include hover;
+	}
+
+	&:active {
+		@include active;
+	}
+
+	&:disabled {
+		@include disabled;
+	}
+
+	&[aria-invalid='true'] {
+		@include invalid;
+
+		&:hover {
+			@include invalidHover;
+		}
+
+		&:active {
+			@include invalidActive;
+		}
+	}
+
+	&:checked {
+		@include checked;
+
+		&:hover {
+			@include checkedHover;
+		}
+
+		&:active {
+			@include checkedActive;
+		}
+
+		&:disabled {
+			@include checkedDisabled;
+		}
+
+		&[aria-invalid='true'] {
+			@include checkedInvalid;
+
+			&:hover {
+				@include checkedInvalidHover;
+			}
+
+			&:active {
+				@include checkedInvalidActive;
+			}
+		}
+	}
+}

package/src/components/checkboxField/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-checkboxField-label-input-size: 1rem;
+	--component-checkboxField-label-input-borderRadius: var(--commons-borderRadius-M);
+	--component-checkboxField-label-input-icon-fontSize: var(--sizes-XS-lineHeight);
+	--component-checkboxField-label-fontSize: var(--sizes-S-fontSize);
+	--component-checkboxField-label-lineHeight: var(--sizes-S-lineHeight);
+
+	.formLabel {
+		@include formLabel.S;
+	}
+
+	.inlineMessage {
+		@include inlineMessage.S;
+	}
+}

package/src/components/checkboxField/states.scss

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

package/src/components/checkboxField/vars.scss

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

package/src/components/chip/index.scss

@@ -8,14 +8,6 @@
 		@include primary;
 	}
 
-	&.mod-unkillable {
-		@include unkillable;
-	}
-
-	&.mod-clickable {
-		@include clickable;
-	}
-
 	&.is-disabled {
 		@include disabled;
 	}

package/src/components/chip/mods.scss

@@ -2,28 +2,8 @@
 
 @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/clear/index.scss

@@ -5,7 +5,7 @@
 	@include component;
 
 	&.mod-S {
-		@include s;
+		@include S;
 	}
 
 	&.palette-primary:not([disabled]) {

package/src/components/clear/mods.scss

@@ -11,7 +11,7 @@
   }
 }
 
-@mixin s {
+@mixin S {
   --components-clear-size: .75rem;
   --components-clear-icon-size: .75rem;
 }

package/src/components/footer/component.scss

@@ -0,0 +1,36 @@
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin component($atRoot: 'without: rule') {
+	background-color: var(--colors-white-color);
+	padding: var(--spacings-S) var(--spacings-M);
+	display: flex;
+	gap: var(--spacings-S);
+	align-items: center;
+	box-shadow: var(--commons-boxShadow-L);
+
+	@include media.max("XXS") {
+		flex-direction: column;
+	}
+
+	@at-root ($atRoot) {
+		.footer-actions {
+			display: flex;
+			margin-left: auto;
+			gap: var(--spacings-S);
+
+			.button {
+				margin: 0;
+			}
+
+			@include media.max("XXS") {
+				flex-direction: column;
+				margin-left: inherit;
+				width: 100%;
+
+				.button {
+					width: 100%;
+				}
+			}
+		}
+	}
+}

package/src/components/footer/exports.scss

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

package/src/components/footer/index.scss

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

package/src/components/footer/mods.scss

@@ -0,0 +1,4 @@
+@mixin sticky {
+  position: sticky;
+  bottom: 0;
+}

package/src/components/footer/vars.scss

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

package/src/components/formLabel/component.scss

@@ -0,0 +1,21 @@
+@mixin component($atRoot: 'without: rule') {
+  color: var(--components-formLabel-color);
+  display: inline-block;
+  font-size: var(--components-formLabel-fontSize);
+  line-height: var(--components-formLabel-lineHeight);
+  width: fit-content;
+
+  .lucca-icon {
+    color: var(--palettes-grey-600);
+    font-size: var(--components-formLabel-required-fontSize);
+    line-height: var(--components-formLabel-required-lineHeight);
+    margin-left: .125rem;
+    vertical-align: top;
+  }
+
+	@at-root ($atRoot) {
+    .formLabel-required {
+      color: var(--palettes-error-700);
+    }
+  }
+}

package/src/components/formLabel/exports.scss

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

package/src/components/formLabel/index.scss

@@ -0,0 +1,18 @@
+@use 'exports' as *;
+
+.formLabel {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+
+	&.mod-XS {
+		@include XS;
+	}
+
+	&.is-error { // To replace by :has as soon as it is implemented in Firefox to cover usage as legend for checkboxes and radio states.
+		@include error;
+	}
+}

package/src/components/formLabel/mods.scss

@@ -0,0 +1,17 @@
+@mixin S {
+  --components-formLabel-fontSize: var(--sizes-S-fontSize);
+  --components-formLabel-lineHeight: var(--sizes-S-lineHeight);
+  --components-formLabel-required-fontSize: var(--sizes-XS-lineHeight);
+  --components-formLabel-required-lineHeight: var(--sizes-S-lineHeight);
+}
+
+@mixin XS {
+  --components-formLabel-fontSize: var(--sizes-XS-fontSize);
+  --components-formLabel-lineHeight: var(--sizes-XS-lineHeight);
+  --components-formLabel-required-fontSize: .75rem;
+  --components-formLabel-required-lineHeight: var(--sizes-XS-lineHeight);
+}
+
+@mixin label {
+  cursor: pointer;
+}

package/src/components/formLabel/states.scss

@@ -0,0 +1,8 @@
+@mixin error {
+  --components-formLabel-color: var(--palettes-error-700);
+}
+
+@mixin disabled {
+  --components-formLabel-color: var(--palettes-grey-500);
+  pointer-events: none;
+}

package/src/components/formLabel/vars.scss

@@ -0,0 +1,7 @@
+@mixin vars {
+  --components-formLabel-fontSize: var(--sizes-M-fontSize);
+  --components-formLabel-lineHeight: var(--sizes-M-lineHeight);
+  --components-formLabel-color: var(--palettes-grey-800);
+  --components-formLabel-required-fontSize: var(--sizes-XS-lineHeight);
+  --components-formLabel-required-lineHeight: var(--sizes-M-lineHeight);
+}