@lucca-front/scss 21.2.0 → 21.2.1-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.2.0",
+  "version": "21.2.1-rc.1",
   "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.2.0",
-    "@lucca/prisme": "21.2.0"
+    "@lucca-front/icons": "21.2.1-rc.1",
+    "@lucca/prisme": "21.2.1-rc.1"
   }
 }

package/src/commons/config.scss

@@ -3,7 +3,7 @@
 
 @use '@lucca-front/scss/src/commons/function';
 
-$layers: 'reset, base, components, mods, product, utils' !default;
+$layers: 'reset, base, components, mods, product, utils';
 
 $isNamespaced: false !default;
 $deprecatedSpacings: false !default;

package/src/commons/utils/highlight-prisme.scss

@@ -30,8 +30,11 @@
 	// Lists
 	.chip,
 	.indexTable,
+	.indexTable-body-row,
 	.sortableList,
 	.listing,
+	.activityFeed,
+	.activityFeed-step,
 
 	// Forms
 	.calendar,
@@ -48,7 +51,6 @@
 	.fieldset,
 	.fileUpload,
 	.fileEntry,
-	.fileToolbar,
 	.formLabel,
 	.inlineMessage,
 	.inputFramed,
@@ -72,17 +74,15 @@
 	.mobileNavigation,
 	.navside,
 	.pagination,
+	.progressStepper,
 	.segmentedControl,
 	.skipLinks,
-	.horizontalNavigation,
 	.timeline,
 	.tableOfContent,
-	.verticalNavigation,
 
 	// Overlays
 	.popover,
 	.dropdown,
-	.dialog,
 	.tooltip,
 
 	// Structure
@@ -94,7 +94,6 @@
 	.fancyBox,
 	.filterPill,
 	.filterBar,
-	.footer,
 	.grid,
 	.highlightData,
 	.mobileHeader,
@@ -111,7 +110,6 @@
 	// Loaders
 	.loading,
 	.progress,
-	.skeleton,
 
 	// Misc & oldies
 	.scrollBox,
@@ -126,19 +124,25 @@
 
 	// HTML COMPONENTS INSIDE
 
-	.dataTable {
+	.dialog,
+	.dataTable-head-row,
+	.dataTable-body-row,
+	.dataTable-foot-row,
+	.footer,
+	.horizontalNavigation,
+	.verticalNavigation {
 		outline: 2px dashed springgreen;
 		outline-offset: -3px;
 	}
 
-	// ANGULAR COMPONENTS
+	// ANGULAR COMPONENTS OUTSIDE
 
 	[luButton],
 	[luLink],
 
 	// Icons
-	lu-bubble-illustration,
-	lu-bubble-icon,
+	lu-bubble-illustration .bubbleIllustration,
+	lu-bubble-icon .bubbleIcon,
 	lu-software-icon .softwareIcon,
 	lu-icon .lucca-icon,
 
@@ -147,7 +151,7 @@
 	lu-comment,
 	lu-new-badge,
 	lu-numeric-badge,
-	lu-plg-push,
+	lu-plg-push .plgPush,
 	lu-read-more,
 	lu-status-badge,
 	lu-tag .tag,
@@ -158,15 +162,19 @@
 	// Lists
 	lu-chip,
 	[luChip],
-	lu-data-table .dataTable,
 	lu-index-table,
+	[luindextablerow],
 	lu-sortable-list .sortableList,
 	lu-listing-item,
+	lu-activity-feed,
+	lu-activity-feed-step,
 
 	// Forms
+	[luFormLabel],
 	lu-form-field,
+	[luFormLabel],
 	lu-color-input,
-	lu-text-input,
+	lu-text-input .textField,
 	lu-checkbox-input,
 	lu-switch-input,
 	lu-radio-input,
@@ -177,9 +185,9 @@
 	lu-duration-picker,
 	[luForm],
 	lu-fieldset,
-	lu-single-file-upload,
-	lu-multi-file-upload,
-	lu-file-entry,
+	lu-single-file-upload .fileUpload,
+	lu-multi-file-upload .fileUpload,
+	lu-file-entry .fileEntry,
 	lu-inline-message,
 	lu-input-framed,
 	lu-rich-text-input,
@@ -192,6 +200,7 @@
 	lu-callout-disclosure,
 	lu-callout-popover,
 	lu-callout-feedback-list,
+	lu-error-page,
 	lu-gauge .gauge,
 	lu-toasts,
 
@@ -199,19 +208,15 @@
 	lu-breadcrumbs,
 	lu-mobile-navigation,
 	lu-pagination,
+	lu-progress-stepper,
 	lu-segmented-control,
 	lu-skip-links,
-	lu-horizontal-navigation,
 	lu-table-of-content,
-	lu-vertical-navigation,
 
 	// Overlays
 	lu-popover-content,
+	lu-dropdown-menu .dropdown,
 	lu-dropdown-item,
-	lu-dialog,
-	lu-dialog-header,
-	lu-dialog-content,
-	lu-dialog-footer,
 	lu-tooltip-panel,
 
 	// Structure
@@ -219,11 +224,10 @@
 	lu-container,
 	lu-divider,
 	lu-empty-state-page,
-	lu-empty-state-section,
+	lu-empty-state-section .emptyState,
 	lu-fancy-box,
 	lu-filter-pill,
 	lu-filter-bar,
-	lu-footer,
 	lu-grid,
 	lu-highlight-data,
 	lu-mobile-header,
@@ -251,6 +255,20 @@
 		outline-offset: 3px;
 	}
 
+	// ANGULAR COMPONENTS INSIDE
+
+	lu-dialog,
+	lu-dialog-header,
+	lu-dialog-content,
+	lu-dialog-footer,
+	lu-footer .footer,
+	lu-horizontal-navigation,
+	lu-vertical-navigation,
+	[luDataTableRow] {
+		outline: 2px solid springgreen;
+		outline-offset: -4px;
+	}
+
 	// DEPRECATED COMPONENTS
 
 	.checkbox,

package/src/components/callout/component.scss

@@ -49,6 +49,7 @@
 			display: flex;
 			gap: var(--pr-t-spacings-75);
 			margin-block-start: var(--components-callout-content-description-action-marginBlockStart);
+			margin-block-end: var(--components-callout-content-description-action-marginBlockEnd);
 			padding-block: var(--components-callout-content-description-action-paddingBlock);
 			padding-inline: 0;
 		}

package/src/components/callout/index.scss

@@ -21,6 +21,10 @@
 
 		&:has(.callout-content-description-actions.mod-inline) {
 			@include actionsInline;
+
+			&.mod-S {
+				@include actionsInlineS;
+			}
 		}
 	}
 }

package/src/components/callout/mods.scss

@@ -1,5 +1,6 @@
 @use '@lucca-front/icons/src/icon/exports' as icons;
 @use '@lucca-front/scss/src/commons/utils/color';
+@use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin S {
@@ -47,6 +48,13 @@
 		@include color.palette('neutral');
 		@include button.S;
 
+		&.mod-outlined,
+		&.mod-ghost {
+			&:focus-visible {
+				@include a11y.focusVisible($offset: 3px, $color: var(--palettes-product-700));
+			}
+		}
+
 		&.mod-onlyIcon {
 			@include button.onlyIconS;
 		}
@@ -66,3 +74,8 @@
 		}
 	}
 }
+
+@mixin actionsInlineS {
+	--components-callout-content-description-action-marginBlockStart: calc(var(--pr-t-spacings-25) * -1);
+	--components-callout-content-description-action-marginBlockEnd: calc(var(--pr-t-spacings-25) * -1);
+}

package/src/components/callout/vars.scss

@@ -8,6 +8,7 @@
 	--components-callout-backgroundColor: var(--palettes-50, var(--palettes-neutral-50));
 	--components-callout-content-description-display: block;
 	--components-callout-content-description-action-marginBlockStart: var(--pr-t-spacings-50);
+	--components-callout-content-description-action-marginBlockEnd: 0;
 	--components-callout-content-description-action-paddingBlock: var(--pr-t-spacings-50);
 
 	// Deprecated

package/src/components/dateRangeField/component.scss

@@ -40,7 +40,7 @@
 			}
 
 			&.mod-start {
-				--components-dateRangeField-content-width: calc(50% - var(--pr-t-spacings-250));
+				--components-dateRangeField-content-width: calc(50% - var(--pr-t-spacings-300) - var(--pr-t-spacings-50));
 				--components-dateRangeField-content-inlineEnd: var(--pr-t-spacings-250);
 			}
 		}

package/src/components/dialog/component.scss

@@ -145,7 +145,7 @@
 		.dialog-inside-content {
 			background-color: var(--components-dialog-insideContent-background);
 			padding-block: var(--components-dialog-insideContent-paddingBlock);
-			padding-inline: var(--pr-t-spacings-300);
+			padding-inline: var(--components-dialog-insideContent-paddingInline);
 			grid-area: overflow;
 			overflow: auto;
 			outline: none;

package/src/components/dialog/mods.scss

@@ -98,23 +98,29 @@
 @mixin fancy {
 	// padding and minimum height are in pixels because they correspond to the size of the image
 	--components-dialog-inside-paddingInlineEnd: 224px;
-	--components-dialog-minBlockSize: 288px;
+	--components-dialog-minBlockSize: calc(288px + var(--pr-t-spacings-400));
 	--components-dialog-inside-gridTemplateRows: auto auto auto;
 	--components-dialog-inside-alignContent: center;
 	--components-dialog-inside-header-boxShadow: none;
 	--components-dialog-inside-header-position: static;
 	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200) 0;
-	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-50) var(--pr-t-spacings-200);
 	--components-dialog-inside-header-button-position: absolute;
 	--components-dialog-inside-header-button-insetBlockStart: var(--pr-t-spacings-100);
 	--components-dialog-inside-header-button-insetInlineEnd: var(--pr-t-spacings-100);
+	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-50) var(--pr-t-spacings-200);
+	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-700) var(--pr-t-spacings-400);
+	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-700) var(--pr-t-spacings-400);
 
 	.dialog-inside-footer {
-		@include footer.fancy;
+		--components-footer-actions-margin: 0;
+		--components-footer-boxShadow: none;
+		--components-footer-paddingBlock: 0 var(--pr-t-spacings-150);
+		--components-footer-overflow: visible;
+		--components-footer-paddingInline: var(--pr-t-spacings-700) var(--pr-t-spacings-400);
 	}
 
 	.dialog-inside-header {
-		@include header.fancy;
+		--components-header-position: static;
 	}
 
 	.dialog-inside-header-button.button {
@@ -126,12 +132,19 @@
 @mixin fancySmall {
 	// padding and minimum height are in pixels because they correspond to the size of the image
 	--components-dialog-inside-paddingInlineEnd: 168px;
-	--components-dialog-minBlockSize: 216px;
+	--components-dialog-minBlockSize: calc(216px + var(--pr-t-spacings-400));
 }
 
 @mixin fancyNarrow {
 	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200);
-	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-300) calc(var(--pr-t-spacings-800) + var(--pr-t-spacings-250));
+	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-150) calc(var(--pr-t-spacings-800) + var(--pr-t-spacings-250));
 	--components-dialog-inside-paddingInlineEnd: 0px;
 	--components-dialog-minBlockSize: 0px;
+	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-150);
+	--components-dialog-inside-header-button-insetBlockStart: calc(var(--pr-t-spacings-150) + var(--pr-t-spacings-25));
+	--components-dialog-inside-header-button-insetInlineEnd: var(--pr-t-spacings-150);
+
+	.dialog-inside-footer {
+		--components-footer-paddingInline: var(--pr-t-spacings-150);
+	}
 }

package/src/components/dialog/vars.scss

@@ -15,6 +15,8 @@
 	--components-dialog-insideHeaderLinkDisplay: none;
 	--components-dialog-insideHeaderColumns: 1fr auto;
 	--components-dialog-insideContent-background: transparent;
+	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-300);
+	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-200);
 	--components-dialog-level: 0;
 	--components-dialog-translate-spacing: var(--pr-t-spacings-500);
 	--components-dialog-translate: calc(var(--components-dialog-translate-spacing) * var(--components-dialog-level) * -1);
@@ -25,7 +27,6 @@
 	--components-dialog-inside-header-position: relative;
 	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200);
 	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-300);
-	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-200);
 	--components-dialog-inside-header-button-position: static;
 	--components-dialog-inside-backgroundImage: none;
 	--components-dialog-minBlockSize: 0px;

package/src/components/footer/mods.scss

@@ -10,13 +10,6 @@
 	--components-footer-actions-margin: 0;
 }
 
-@mixin fancy {
-	--components-footer-actions-margin: 0;
-	--components-footer-boxShadow: none;
-	--components-footer-paddingBlock: 0 var(--pr-t-spacings-150);
-	--components-footer-overflow: visible;
-}
-
 @mixin insideDialog {
 	--components-footer-paddingInline: var(--pr-t-spacings-300);
 	--commons-container-padding: 0;

package/src/components/header/mods.scss

@@ -24,8 +24,3 @@
 		inset-block-start: var(--commons-navSide-mobile-toggle-height);
 	}
 }
-
-@mixin fancy {
-	--components-header-position: static;
-	--components-header-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200) 0;
-}

package/src/components/indexTable/component.scss

@@ -263,11 +263,11 @@
 				margin-inline-end: var(--pr-t-spacings-100);
 			}
 		}
-	}
 
-	.indexTableWrapper-pagination {
-		&:empty {
-			display: none;
+		.indexTableWrapper-pagination {
+			&:empty {
+				display: none;
+			}
 		}
 	}
 

package/src/components/richText/component.scss

@@ -124,6 +124,7 @@
 		.richTextField-content-placeholder {
 			position: absolute;
 			pointer-events: none;
+			inset-block-start: 0;
 			padding: var(--pr-t-spacings-100);
 			user-select: none;
 			color: var(--components-richTextField-placeholder-color);