@lucca-front/scss 21.1.3 → 21.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.1.3",
+  "version": "21.1.4",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,7 +23,7 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "21.1.3",
-    "@lucca/prisme": "21.1.3"
+    "@lucca-front/icons": "21.1.4",
+    "@lucca/prisme": "21.1.4"
   }
 }

package/src/components/button/index.scss

@@ -184,14 +184,6 @@
 			&.mod-ghost {
 				@include successGhost;
 			}
-
-			&.mod-S {
-				@include successS;
-			}
-
-			&.mod-XS {
-				@include successXS;
-			}
 		}
 
 		// .disabled is deprecated

package/src/components/button/mods.scss

@@ -4,6 +4,29 @@
 @use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
 
+@mixin M {
+	@include icons.M;
+
+	--components-button-font: var(--pr-t-font-body-M);
+	--components-button-paddingBlock: var(--pr-t-spacings-100);
+	--components-button-paddingInline: var(--pr-t-spacings-150);
+	--components-button-gap: var(--pr-t-spacings-100);
+
+	.numericBadge {
+		@include numericBadge.M;
+	}
+
+	// Deprecated
+	--components-button-font-size: var(--pr-t-font-body-M-fontSize);
+	--components-button-line-height: var(--pr-t-font-body-M-lineHeight);
+
+	// status icon
+	&::after {
+		font-size: var(--pr-t-font-body-M-lineHeight);
+		block-size: var(--pr-t-font-body-M-lineHeight);
+	}
+}
+
 @mixin S {
 	@include icons.S;
 
@@ -19,6 +42,12 @@
 	// Deprecated
 	--components-button-font-size: var(--pr-t-font-body-S-fontSize);
 	--components-button-line-height: var(--pr-t-font-body-S-lineHeight);
+
+	// status icon
+	&::after {
+		font-size: var(--pr-t-font-body-S-lineHeight);
+		block-size: var(--pr-t-font-body-S-lineHeight);
+	}
 }
 
 @mixin XS {
@@ -37,6 +66,12 @@
 	// Deprecated
 	--components-button-font-size: var(--pr-t-font-body-XS-fontSize);
 	--components-button-line-height: var(--pr-t-font-body-XS-lineHeight);
+
+	// status icon
+	&::after {
+		font-size: var(--pr-t-font-body-XS-lineHeight);
+		block-size: var(--pr-t-font-body-XS-lineHeight);
+	}
 }
 
 @mixin onlyIcon {
@@ -231,7 +266,7 @@
 	}
 
 	&[aria-expanded='true'] {
-		--components-button-arrow-transform: rotate(-180deg);
+		--components-button-arrow-transform: rotate(180deg);
 	}
 }
 
@@ -264,7 +299,7 @@
 	--components-button-color: var(--palettes-neutral-0);
 
 	background-image: linear-gradient(
-		-135deg,
+		225deg,
 		color-mix(in srgb, var(--palettes-AI-500) var(--components-button-AI-background-opacity), transparent),
 		color-mix(in srgb, var(--palettes-brand-400) var(--components-button-AI-background-opacity), transparent)
 	);

package/src/components/button/states.scss

@@ -108,20 +108,6 @@
 	}
 }
 
-@mixin successS {
-	&::after {
-		font-size: var(--pr-t-font-body-S-lineHeight);
-		block-size: var(--pr-t-font-body-S-lineHeight);
-	}
-}
-
-@mixin successXS {
-	&::after {
-		font-size: var(--pr-t-font-body-XS-lineHeight);
-		block-size: var(--pr-t-font-body-XS-lineHeight);
-	}
-}
-
 @mixin successOutlined {
 	--components-button-backgroundColor: var(--palettes-neutral-0);
 	--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);

package/src/components/callout/component.scss

@@ -1,8 +1,6 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/a11y';
-@use '@lucca-front/scss/src/commons/utils/color';
-@use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
@@ -53,11 +51,6 @@
 			margin-block-start: var(--components-callout-content-description-action-marginBlockStart);
 			padding-block: var(--components-callout-content-description-action-paddingBlock);
 			padding-inline: 0;
-
-			.button {
-				@include color.palette('neutral');
-				@include button.S;
-			}
 		}
 
 		.callout-icon {

package/src/components/callout/index.scss

@@ -10,14 +10,18 @@
 		&.mod-S {
 			@include S;
 		}
-	}
 
-	&.mod-AI {
-		@include AI;
-	}
+		&.mod-AI {
+			@include AI;
+		}
 
-	&:has(.callout-content-description-actions.mod-inline) {
-		@include actionsInline;
+		&:has(.callout-content-description-actions) {
+			@include actions;
+		}
+
+		&:has(.callout-content-description-actions.mod-inline) {
+			@include actionsInline;
+		}
 	}
 }
 

package/src/components/callout/mods.scss

@@ -42,6 +42,17 @@
 	}
 }
 
+@mixin actions {
+	.button {
+		@include color.palette('neutral');
+		@include button.S;
+
+		&.mod-onlyIcon {
+			@include button.onlyIconS;
+		}
+	}
+}
+
 @mixin actionsInline {
 	--components-callout-content-description-display: flex;
 	--components-callout-content-description-action-marginBlockStart: 0;
@@ -49,9 +60,9 @@
 
 	.button {
 		@include button.XS;
-	}
 
-	.button.mod-onlyIcon {
-		@include button.onlyIconXS;
+		&.mod-onlyIcon {
+			@include button.onlyIconXS;
+		}
 	}
 }

package/src/components/calloutDisclosure/states.scss

@@ -1,5 +1,5 @@
 @mixin open {
   .calloutDisclosure-summary-chevron {
-    transform: rotate(-180deg);
+    transform: rotate(180deg);
   }
 }

package/src/components/emptyState/mods.scss

@@ -61,6 +61,5 @@
 }
 
 @mixin insideContainer {
-	--components-emptyState-container-maxWidth: none;
 	--components-emptyState-container-left: auto;
 }

package/src/components/fileEntry/index.scss

@@ -36,3 +36,9 @@
 		}
 	}
 }
+
+.fileEntry-description-divider.divider.mod-vertical {
+	@layer mods {
+		@include divider;
+	}
+}

package/src/components/fileEntry/mods.scss

@@ -35,3 +35,8 @@
 	--components-fileEntry-status-blockSize: auto;
 	--components-fileEntry-status-aspectRatio: 1;
 }
+
+@mixin divider {
+	--components-divider-marginBlock: var(--pr-t-spacings-25);
+	--components-divider-marginInline: 0;
+}

package/src/components/fileToolbar/component.scss

@@ -1,8 +1,6 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/commons/utils/reset';
 
-@use '@lucca-front/scss/src/components/button/exports' as button;
-
 @use '@lucca-front/icons/src/icon/exports' as icon;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
@@ -24,12 +22,5 @@
 			gap: var(--pr-t-spacings-50);
 			padding: var(--components-fileToolbar-list-padding);
 		}
-
-		.fileToolbar-list-item-button.button {
-			@include button.ghost;
-			@include button.S;
-
-			--components-button-padding: var(--pr-t-spacings-75) !important;
-		}
 	}
 }

package/src/components/fileToolbar/index.scss

@@ -15,4 +15,10 @@
 			}
 		}
 	}
+
+	@layer mods {
+		.fileToolbar-list-item-button.button {
+			@include button;
+		}
+	}
 }

package/src/components/fileToolbar/mods.scss

@@ -7,3 +7,11 @@
 @mixin disablePositioningS {
 	--components-fileToolbar-list-padding: 0;
 }
+
+@mixin button {
+	@include button.ghost;
+	@include button.S;
+
+	--components-button-borderRadius: 4px;
+	--components-button-padding: var(--pr-t-spacings-75);
+}

package/src/components/filterPill/states.scss

@@ -79,7 +79,7 @@
 }
 
 @mixin opened {
-	--components-filterPill-toggle-rotation: -0.5turn;
+	--components-filterPill-toggle-rotation: 180deg;
 }
 
 @mixin beginning {

package/src/components/filterPill/vars.scss

@@ -12,7 +12,7 @@
 	--components-filterPill-checkbox-borderColor: var(--palettes-neutral-700);
 	--components-filterPill-checkbox-icon-scale: 0;
 	--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(0.5, -0.5, 0.5, 0);
-	--components-filterPill-toggle-rotation: 0;
+	--components-filterPill-toggle-rotation: 0deg;
 	--components-filterPill-toggle-iconColor: var(--palettes-neutral-600);
 	--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);
 	--components-filterPill-display: flex;

package/src/components/gauge/component.scss

@@ -39,7 +39,7 @@
 			stroke-width: var(--components-gauge-circle-strokeWidth);
 			stroke-linecap: round;
 			stroke-dashoffset: 0;
-			transform: rotate(-0.25turn);
+			transform: rotate(270deg);
 			transform-origin: 50% 50%;
 			stroke-dasharray: calc(var(--components-gauge-circleP) / 100 * var(--components-gauge-value)), 9999;
 			stroke: currentColor;

package/src/components/indexTable/component.scss

@@ -222,6 +222,7 @@
 			gap: var(--pr-t-spacings-100);
 			padding: var(--pr-t-spacings-25);
 			font-weight: var(--pr-t-font-fontWeight-semibold);
+			inline-size: fit-content;
 		}
 
 

package/src/components/indexTable/mods.scss

@@ -399,5 +399,6 @@
 		content: '';
 		position: absolute;
 		inset: 0;
+		z-index: 1;
 	}
 }

package/src/components/multiSelect/states.scss

@@ -25,7 +25,7 @@
 
 @mixin expanded {
 	.multipleSelect-arrow {
-		transform: rotate(-180deg);
+		transform: rotate(180deg);
 	}
 }
 

package/src/components/navside/states.scss

@@ -9,7 +9,7 @@
 
 @mixin expanded {
 	.navSide-item-arrow {
-		transform: rotate(-90deg);
+		transform: rotate(270deg);
 	}
 }
 

package/src/components/pagination/index.scss

@@ -6,8 +6,8 @@
 		@include component;
 	}
 
-	@layer components {
-		&.mod-mods {
+	@layer mods {
+		&.mod-compact {
 			@include compact;
 		}
 	}

package/src/components/simpleSelect/states.scss

@@ -27,7 +27,7 @@
 	}
 
 	.simpleSelect-field-icon {
-		transform: rotate(-180deg);
+		transform: rotate(180deg);
 	}
 }
 

package/src/components/table/mods.scss

@@ -183,7 +183,7 @@
 		.table-body-row-cell,
 		.table-foot-row-cell {
 			&::before {
-				transform: rotate(-180deg);
+				transform: rotate(180deg);
 			}
 		}
 	}

package/src/components/textField/component.scss

@@ -12,10 +12,6 @@
 	box-shadow: 0 0 0 1px var(--component-textField-border);
 	inline-size: var(--component-textField-width);
 
-	&:hover {
-		box-shadow: 0 0 0 1px var(--component-textField-borderHover);
-	}
-
 	&:has(.textField-input-value:focus-visible) {
 		@include a11y.focusVisible($offset: 3px);
 	}

package/src/components/textField/index.scss

@@ -7,6 +7,10 @@
 	}
 
 	@layer mods {
+		&:hover {
+			@include hover;
+		}
+
 		&.mod-S {
 			@include S;
 		}
@@ -22,6 +26,10 @@
 		&.is-invalid,
 		&:has(.textField-input-value[aria-invalid='true']) {
 			@include invalid;
+
+			&:hover {
+				@include invalidHover;
+			}
 		}
 
 		&.is-disabled,

package/src/components/textField/states.scss

@@ -1,11 +1,15 @@
+@mixin hover {
+	--component-textField-border: var(--component-textField-borderHover);
+}
+
 @mixin invalid {
 	--component-textField-border: var(--pr-t-color-input-border-critical);
 	--component-textField-background: var(--pr-t-color-input-background-critical);
 	--component-textField-placeholder: var(--pr-t-color-input-text-placeholder-critical);
+}
 
-	&:hover {
-		--component-textField-border: var(--pr-t-color-input-border-critical-hover);
-	}
+@mixin invalidHover {
+	--component-textField-border: var(--pr-t-color-input-border-critical-hover);
 }
 
 @mixin disabled {