@lucca-front/scss 20.3.3 → 20.4.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "20.3.3",
+  "version": "20.4.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": "20.3.3"
+    "@lucca-front/icons": "20.4.0-rc.1"
   }
 }

package/src/components/button/index.scss

@@ -8,8 +8,13 @@
 
 	@layer mods {
 		&.mod-AI {
+			&:not(.invert) {
 			@include AI;
 
+			&.mod-invert {
+				@include invertIA;
+			}
+
 			&.is-success {
 				@include successAI;
 			}
@@ -17,6 +22,7 @@
 			&.is-loading {
 				@include loadingAI;
 			}
+			}
 		}
 
 		&.mod-block {

package/src/components/button/mods.scss

@@ -253,8 +253,29 @@
 	&:not(:disabled) {
 		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500));
 
-		.lucca-icon {
+		&:not(.mod-invert) .lucca-icon {
 			@include icons.AI;
 		}
 	}
 }
+
+@mixin invertIA {
+	--components-button-backgroundColor: transparent;
+	--components-button-color: var(--palettes-neutral-0);
+
+	background-image: linear-gradient(
+		-135deg,
+		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)
+	);
+
+	&:hover,
+	&:focus-visible {
+		--components-button-AI-background-opacity: 15%;
+		--components-button-color: var(--palettes-neutral-0);
+	}
+
+	&:active {
+		--components-button-AI-background-opacity: 5%;
+	}
+}

package/src/components/button/vars.scss

@@ -19,6 +19,7 @@
 	--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
 	--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));
 	--components-button-arrow-transform: none;
+	--components-button-AI-background-opacity: 25%;
 
 	// Deprecated
 	--components-button-font-size: var(--pr-t-font-body-M-fontSize);

package/src/components/checkboxField/component.scss

@@ -56,9 +56,7 @@
 				font-weight: var(--pr-t-font-fontWeight-regular);
 				font-size: var(--component-checkboxField-icon-fontSize);
 				direction: ltr;
-
-				// stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- This font is for icons and should not have fallback.
-				font-family: 'Lucca icons';
+				font-family: var(--icon-fontFamily);
 				font-feature-settings: 'liga';
 				font-style: normal;
 				letter-spacing: normal;

package/src/components/dataTable/index.scss

@@ -75,10 +75,6 @@
 		&:has([selectable]),
 		&.mod-selectable {
 			@include selectable;
-
-			&:has(input:checked) {
-				@include selected;
-			}
 		}
 
 		&.mod-draggable {
@@ -86,6 +82,15 @@
 		}
 	}
 
+		:is(.dataTable-body-row, .dataTable-foot-row) {
+		&:has([selectable]),
+		&.mod-selectable {
+			&:has(input:checked) {
+				@include selected;
+			}
+		}
+	}
+
 	:is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
 		&.mod-actions {
 			@include actions;

package/src/components/dialog/component.scss

@@ -76,19 +76,6 @@
 			}
 		}
 
-		.dialog-inside-header-button {
-			&.button {
-				@include button.ghost;
-				@include button.S;
-				@include button.onlyIconS;
-
-				align-self: start;
-				justify-self: end;
-				grid-area: close;
-				display: var(--components-dialog-insideHeaderButtonDisplay);
-			}
-		}
-
 		.dialog-inside-header-actionOptional {
 			margin-right: calc(var(--pr-t-spacings-100) * -1);
 
@@ -138,7 +125,7 @@
 			padding: var(--components-dialog-insideHeaderTitlePadding);
 			text-align: var(--components-dialog-insideHeaderTitleAlign);
 			margin: 0;
-			overflow-wrap: break-word;
+			overflow-wrap: anywhere;
 		}
 
 		.dialog_backdrop {

package/src/components/dialog/index.scss

@@ -56,5 +56,9 @@
 		&.mod-fullScreen {
 			@include fullScreen;
 		}
+
+		&:has(.dialog-inside-header-button) {
+			@include withCloseButton;
+		}
 	}
 }

package/src/components/dialog/mods.scss

@@ -1,3 +1,4 @@
+@use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/components/title/exports' as title;
 @use '@lucca-front/scss/src/commons/utils/keyframe';
@@ -68,3 +69,17 @@
 @mixin neutralBackground {
 	--components-dialog-insideContent-background: var(--pr-t-elevation-surface-default);
 }
+
+@mixin withCloseButton {
+	.dialog-inside-header-button.button {
+		@include button.ghost;
+		@include button.S;
+		@include button.onlyIconS;
+
+		align-self: start;
+		justify-self: end;
+		grid-area: close;
+		display: var(--components-dialog-insideHeaderButtonDisplay);
+	}
+}
+

package/src/components/filterBar/component.scss

@@ -12,7 +12,7 @@
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
 	align-items: flex-start;
-	flex-wrap: wrap;
+	flex-wrap: var(--components-filterBar-flexWrap);
 	gap: var(--pr-t-spacings-100);
 
 	.textField {

package/src/components/filterBar/mods.scss

@@ -15,17 +15,13 @@
 }
 
 @mixin notCompact {
+	--components-filterBar-flexWrap: nowrap;
+
 	.filterBar-divider.divider {
 		margin-inline: var(--pr-t-spacings-50);
 
 		@include divider.vertical;
 	}
-
-	.filterBar-scrollBox.scrollBox {
-		&:has(.filterBar-scrollBox-export) {
-			flex-wrap: nowrap;
-		}
-	}
 }
 
 @mixin touch {

package/src/components/filterBar/vars.scss

@@ -1,4 +1,5 @@
 @mixin vars {
 	--components-filterBar-scrollBox-flexGrow: 0;
 	--components-filterBar-scrollBox-group-flexWrap: wrap;
+	--components-filterBar-flexWrap: wrap;
 }

package/src/components/filterPill/component.scss

@@ -182,9 +182,7 @@
 				font-weight: var(--pr-t-font-fontWeight-regular);
 				font-size: 1rem;
 				direction: ltr;
-
-				// stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- This font is for icons and should not have fallback.
-				font-family: 'Lucca icons';
+				font-family: var(--icon-fontFamily);
 				font-feature-settings: 'liga';
 				font-style: normal;
 				letter-spacing: normal;