@lucca-front/scss 21.0.0-rc.8 → 21.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.0.0-rc.8",
+  "version": "21.0.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": "21.0.0-rc.8"
+    "@lucca-front/icons": "21.0.1"
   }
 }

package/src/commons/utils/index.scss

@@ -274,6 +274,10 @@
 		}
 	}
 
+	%placeItemsCenter {
+		place-items: center;
+	}
+
 
 
 	[data-content-before] {
@@ -438,6 +442,10 @@
 		@extend %focusVisible;
 	}
 
+	.pr-u-placeItemsCenter {
+		@extend %placeItemsCenter;
+	}
+
 	@include core.classes('float', core.$float);
 	@include core.classes('vertical-align', core.$verticalAlign);
 	@include core.classes('white-space', core.$whiteSpace);

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

@@ -79,10 +79,6 @@
 		&:has([selectable]),
 		&.mod-selectable {
 			@include selectable;
-
-			&:has(input:checked) {
-				@include selected;
-			}
 		}
 
 		&.mod-draggable {
@@ -95,6 +91,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/fancyBox/mods.scss

@@ -6,7 +6,6 @@
 }
 
 @mixin S {
-	--components-fancyBox-contentMinBlockSize: 9.75rem;
 	--components-fancyBox-offsetInline: -9rem;
 	--components-fancyBox-offsetBlock: -0.75rem;
 	--components-fancyBox-imageWidth: 9.375rem;

package/src/components/fancyBox/vars.scss

@@ -3,7 +3,7 @@
   --components-fancyBox-marginInline: auto;
 
 	// Content
-	--components-fancyBox-contentMinBlockSize: 11.25rem;
+	--components-fancyBox-contentMinBlockSize: 7rem;
 	--components-fancyBox-contentMinInlineSize: min(22rem, 100%);
   --components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-300);
   --components-fancyBox-contentPaddingInline: var(--pr-t-spacings-700);

package/src/components/filterPill/component.scss

@@ -181,9 +181,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;

package/src/components/index.scss

@@ -109,6 +109,7 @@
 @forward 'mainLayout';
 @forward 'listboxOption';
 @forward 'suggestion';
+@forward 'resourceCard';
 
 @forward 'filterBarDeprecated';
 @forward 'tableFixedDeprecated';

package/src/components/resourceCard/component.scss

@@ -0,0 +1,140 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/reset';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	border-radius: var(--components-resourceCard-borderRadius);
+	position: relative;
+	color: var(--components-resourceCard-color);
+	display: block;
+	align-self: stretch;
+	justify-self: stretch;
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset: var(--components-resourceCard-before-inset);
+		background-color: var(--pr-t-elevation-surface-raised);
+		box-shadow: var(--components-resourceCard-before-boxShadow);
+		border-radius: var(--components-resourceCard-borderRadius);
+		transition-duration: var(--commons-animations-durations-fast);
+		transition-property: inset, box-shadow;
+	}
+
+	@at-root ($atRoot) {
+		.resourceCardWrapper {
+			grid-template-columns: repeat(auto-fill, minmax(var(--components-resourceCardWrapper-gridTemplateColumnsMin), 1fr));
+			display: var(--components-resourceCardWrapper-display);
+			flex-direction: column;
+			gap: var(--pr-t-spacings-100);
+			background-color: var(--pr-t-elevation-surface-sunken);
+			padding: var(--pr-t-spacings-100);
+			border-radius: var(--components-resourceCardWrapper-borderRadius);
+			align-items: start;
+			justify-items: start;
+		}
+
+		.resourceCard-layout {
+			isolation: isolate;
+			padding: var(--pr-t-spacings-100);
+			display: grid;
+			grid-template: var(--components-resourceCard-layout-gridTemplate);
+			align-items: var(--components-resourceCard-layout-alignItems);
+		}
+
+		.resourceCard-layout-header {
+			display: flex;
+			align-items: var(--components-resourceCard-layout-header-alignItems);
+			flex-direction: var(--components-resourceCard-layout-header-flexDirection);
+			gap: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
+			grid-area: header;
+			padding-block-start: var(--components-resourceCard-layout-header-paddingBlockStart);
+			padding-block-end: var(--components-resourceCard-layout-header-paddingBlockEnd);
+			padding-inline: var(--pr-t-spacings-100);
+			min-inline-size: 0;
+		}
+
+		.resourceCard-layout-header-infos {
+			display: flex;
+			align-items: center;
+			gap: var(--pr-t-spacings-100);
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		.resourceCard-layout-header-title {
+			font: var(--components-resourceCard-layout-header-title-font);
+			display: flex;
+			gap: var(--pr-t-spacings-100);
+			align-items: center;
+			min-inline-size: 0;
+			max-inline-size: 100%;
+		}
+
+		.resourceCard-layout-header-title-action {
+			@include reset.button;
+
+			color: var(--components-resourceCard-layout-header-title-action-color);
+			text-decoration: none;
+			outline: none;
+			cursor: var(--components-resourceCard-layout-header-title-action-cursor);
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+
+			&::after {
+				content: '';
+				position: absolute;
+				inset: var(--components-resourceCard-layout-header-title-action-after-inset);
+				border-radius: var(--components-resourceCard-borderRadius);
+				transition-duration: var(--commons-animations-durations-fast);
+				transition-property: inset;
+				z-index: 1;
+			}
+		}
+
+		.resourceCard-layout-before {
+			grid-area: before;
+			display: flex;
+			align-items: center;
+		}
+
+		.resourceCard-layout-before-illustration {
+			&:not(:empty) {
+				min-block-size: var(--components-resourceCard-layout-before-illustration-minSize);
+				min-inline-size: var(--components-resourceCard-layout-before-illustration-minSize);
+				margin: var(--pr-t-spacings-100) var(--pr-t-spacings-50) var(--pr-t-spacings-100) var(--pr-t-spacings-100);
+				display: grid;
+				place-items: center;
+			}
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		.resourceCard-layout-after {
+			grid-area: after;
+			margin-block: var(--components-resourceCard-layout-after-marginBlock);
+		}
+
+		.resourceCard-layout-content {
+			grid-area: content;
+			font: var(--components-resourceCard-layout-content-font);
+
+			&:not(:empty) {
+				padding: var(--components-resourceCard-layout-content-paddingBlockStart) var(--pr-t-spacings-100) var(--pr-t-spacings-50);
+			}
+		}
+
+		.resourceCard-layout-content a,
+		.resourceCard-layout-content button,
+		.resourceCard-layout-content [tabindex],
+		.resourceCard-layout-before-button,
+		.resourceCard-layout-after {
+			position: relative;
+			z-index: 2;
+		}
+	}
+}

package/src/components/resourceCard/exports.scss

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

package/src/components/resourceCard/index.scss

@@ -0,0 +1,104 @@
+@use 'exports' as *;
+
+.resourceCard {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+		&:hover {
+			@include hover;
+		}
+
+		&:has(.resourceCard-layout-header-title-action:focus-visible) {
+			@include focusVisible;
+		}
+
+		&:has(.resourceCard-layout-header-title-action:active) {
+			@include active;
+		}
+
+		&:has(.resourceCard-layout-header-title-action.is-disabled),
+		&:has(.resourceCard-layout-header-title-action:disabled) {
+			@include disabled;
+		}
+
+		&:has(.resourceCard-layout-before-button) {
+			@include hasDrag;
+		}
+
+		&:has(.resourceCard-layout-header-title .numericBadge) {
+			@include hasNumericBadge;
+		}
+
+		&:has(.resourceCard-layout-content:not(:empty)) {
+			&:not(.mod-grid),
+			&:not(.resourceCardWrapper.mod-grid &) {
+				@include hasContentNoGrid;
+
+				&:has(.resourceCard-layout-before-illustration:not(:empty)) {
+					@include hasContentNoGridHasIllustration;
+
+					&.mod-S {
+						@include hasContentNoGridHasIllustrationS;
+					}
+				}
+			}
+		}
+
+		&:has(.resourceCard-layout-content:empty),
+		&:not(:has(.resourceCard-layout-content)) {
+			&:has(.resourceCard-layout-before-illustration:not(:empty)) {
+				&:not(.mod-grid),
+				.resourceCardWrapper.mod-grid & {
+					@include hasNoContentHasIllustrationNoGrid;
+				}
+			}
+		}
+
+		&:has(.resourceCard-layout-after:not(:empty)) {
+			@include hasAction;
+		}
+
+		&:has(.resourceCard-layout-before-illustration:not(:empty)) {
+			&.mod-grid,
+			.resourceCardWrapper.mod-grid & {
+				@include hasIllustrationGrid;
+
+				&.mod-S {
+					@include hasIllustrationGridS;
+				}
+			}
+		}
+
+		&.mod-S {
+			@include S;
+		}
+
+		&.mod-grid,
+		.resourceCardWrapper.mod-grid & {
+			@include grid;
+		}
+	}
+}
+
+.resourceCardWrapper {
+	@layer components {
+		@include varsWrapper;
+	}
+
+	@layer mods {
+		.resourceCard {
+			@include wrapped;
+		}
+
+		&.mod-grid {
+			@include gridWrapper;
+		}
+
+		&:has(> .button) {
+			@include add;
+		}
+	}
+}

package/src/components/resourceCard/mods.scss

@@ -0,0 +1,89 @@
+@use '@lucca-front/scss/src/commons/utils/color';
+@use '@lucca-front/scss/src/components/button/exports' as button;
+@use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
+
+@mixin gridWrapper {
+	--components-resourceCardWrapper-display: grid;
+}
+
+@mixin grid {
+	--components-resourceCard-layout-content-paddingBlockStart: var(--pr-t-spacings-50);
+	--components-resourceCard-layout-header-alignItems: start;
+	--components-resourceCard-layout-header-flexDirection: column;
+	--components-resourceCard-layout-gridTemplate: "before  header  after"   auto
+																								 "content content content" auto
+																								 /auto    1fr     auto;
+}
+
+@mixin wrapped {
+	--components-resourceCard-borderRadius: var(--pr-t-border-radius-default);
+}
+
+@mixin S {
+	--components-resourceCard-layout-content-font: var(--pr-t-font-body-S);
+	--components-resourceCard-layout-header-title-font: var(--pr-t-font-heading-4);
+	--components-resourceCard-layout-before-illustration-minSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
+}
+
+@mixin hasIllustrationGridS {
+	--components-resourceCard-layout-header-paddingBlockStart: 0;
+	--components-resourceCard-layout-header-paddingBlockEnd: 0;
+}
+
+@mixin hasNoContentHasIllustrationNoGrid {
+	--components-resourceCard-layout-alignItems: center;
+	--components-resourceCard-layout-gridTemplate: "before  header  after"  1fr
+																								 /auto    1fr     auto;
+}
+
+@mixin hasContentNoGridHasIllustration {
+	--components-resourceCard-layout-after-marginBlock: var(--pr-t-spacings-150);
+}
+
+@mixin hasIllustrationGrid {
+	--components-resourceCard-layout-alignItems: center;
+}
+
+@mixin hasContentNoGridHasIllustrationS {
+	--components-resourceCard-layout-after-marginBlock: 0.625rem;
+}
+
+@mixin hasContentNoGrid {
+	--components-resourceCard-layout-header-paddingBlockEnd: 0;
+}
+
+@mixin hasAction {
+	.resourceCard-layout-after .button {
+			@include button.S;
+			@include button.ghost;
+
+			&:has(> lu-icon:only-child, > .lucca-icon:only-child, > .lucca-icon:first-child + .pr-u-mask:last-child) {
+				@include button.onlyIcon;
+				@include button.onlyIconS;
+			}
+		}
+}
+
+@mixin hasDrag {
+	.resourceCard-layout-before-button.button {
+			@include button.S;
+			@include button.ghost;
+			@include button.onlyIcon;
+			@include button.onlyIconS;
+		}
+}
+
+@mixin hasNumericBadge {
+	.resourceCard-layout-header-title {
+		.numericBadge {
+			@include numericBadge.S;
+		}
+	}
+}
+
+@mixin add {
+	> .button {
+		@include button.outlined;
+		@include color.palette('product');
+	}
+}

package/src/components/resourceCard/states.scss

@@ -0,0 +1,28 @@
+@use '@lucca-front/scss/src/components/button/exports' as button;
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin hover {
+	--components-resourceCard-before-inset: -4px;
+	--components-resourceCard-before-boxShadow: var(--pr-t-elevation-shadow-overlay);
+}
+
+@mixin focusVisible {
+	.resourceCard-layout-header-title-action {
+		&::after {
+			@include a11y.focusVisible;
+		}
+	}
+}
+
+@mixin disabled {
+	--components-resourceCard-layout-header-title-action-cursor: default;
+	--components-resourceCard-before-inset: 0;
+	--components-resourceCard-color: var(--palettes-neutral-500);
+	--components-resourceCard-layout-header-title-action-color: var(--palettes-neutral-500);
+	--components-resourceCard-before-boxShadow: 0 0 0 1px var(--palettes-neutral-50);
+}
+
+@mixin active {
+	--components-resourceCard-layout-header-title-action-color: var(--palettes-product-700);
+	--components-resourceCard-before-boxShadow: 0 0 0 1px var(--palettes-product-400);
+}

package/src/components/resourceCard/vars.scss

@@ -0,0 +1,34 @@
+@mixin vars {
+	--components-resourceCard-color: inherit;
+	--components-resourceCard-borderRadius: var(--pr-t-border-radius-structure);
+
+	--components-resourceCard-before-inset: 0;
+	--components-resourceCard-before-boxShadow: var(--pr-t-elevation-shadow-raised);
+
+	--components-resourceCard-layout-alignItems: start;
+	--components-resourceCard-layout-content-font: var(--pr-t-font-body-M);
+	--components-resourceCard-layout-content-paddingBlockStart: 0;
+
+	--components-resourceCard-layout-before-illustration-minSize: var(--pr-t-spacings-500);
+
+	--components-resourceCard-layout-after-marginBlock: 0;
+
+	--components-resourceCard-layout-header-title-action-cursor: pointer;
+	--components-resourceCard-layout-header-title-action-color: inherit;
+	--components-resourceCard-layout-header-title-action-after-inset: var(--components-resourceCard-before-inset);
+	--components-resourceCard-layout-header-title-font: var(--pr-t-font-heading-3);
+	--components-resourceCard-layout-header-alignItems: center;
+	--components-resourceCard-layout-header-flexDirection: row;
+	--components-resourceCard-layout-header-paddingBlockStart: var(--pr-t-spacings-50);
+	--components-resourceCard-layout-header-paddingBlockEnd: var(--pr-t-spacings-50);
+
+	--components-resourceCard-layout-gridTemplate: "before header  after" auto
+																								 "before content after" 1fr
+																								/ auto   1fr     auto;
+}
+
+@mixin varsWrapper {
+	--components-resourceCardWrapper-gridTemplateColumnsMin: 20rem;
+	--components-resourceCardWrapper-display: flex;
+	--components-resourceCardWrapper-borderRadius: var(--pr-t-border-radius-structure);
+}

package/src/components/statusBadge/component.scss

@@ -14,6 +14,7 @@
 	padding-inline: var(--pr-t-spacings-75) var(--pr-t-spacings-100);
 	white-space: nowrap;
 	max-inline-size: 100%;
+	color: var(--pr-t-color-text);
 
 	&::before {
 		background-color: var(--palettes-700, var(--palettes-product-700));