@lucca-front/scss 21.0.0-rc.5 → 21.0.0-rc.6

package/package.json

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

package/src/commons/config.scss

@@ -632,15 +632,15 @@ $colorInputContrasted: (
 );
 
 $colorText: (
-	'': var(--palettes-neutral-800),
-	heading: var(--palettes-neutral-900),
-	highlight: var(--palettes-neutral-900),
-	subtle: var(--palettes-neutral-600),
-	disabled: var(--palettes-neutral-500),
-	reverse: var(--palettes-neutral-0),
-	success: var(--palettes-success-700),
-	warning: var(--palettes-warning-700),
-	critical: var(--palettes-critical-700),
+	text: var(--palettes-neutral-800),
+	text-heading: var(--palettes-neutral-900),
+	text-highlight: var(--palettes-neutral-900),
+	text-subtle: var(--palettes-neutral-600),
+	text-disabled: var(--palettes-neutral-500),
+	text-reverse: var(--palettes-neutral-0),
+	text-success: var(--palettes-success-700),
+	text-warning: var(--palettes-warning-700),
+	text-critical: var(--palettes-critical-700),
 );
 
 $breakpoints: (

package/src/commons/core.scss

@@ -108,8 +108,9 @@ $cursor: 'pointer', 'auto', 'default', 'text';
 }
 
 @mixin palettes($suffix: '!important') {
+	// .pr-u-text is deprecated
 	@each $palette in config.$palettesAll {
-		.pr-u-text#{transform.capitalize($palette)} {
+		.pr-u-text#{transform.capitalize($palette)}, .pr-u-colorText#{transform.capitalize($palette)} {
 			color: var(--palettes-#{$palette}-700) #{$suffix};
 		}
 

package/src/commons/utils/index.scss

@@ -395,14 +395,17 @@
 		@extend %textCenter;
 	}
 
+	// textLight is deprecated
 	.pr-u-textLight {
 		@extend %textLight;
 	}
 
-	.pr-u-textPlaceholder {
+	// textPlaceholder is deprecated
+	.pr-u-textPlaceholder, .pr-u-colorInputTextPlaceholder {
 		@extend %textPlaceholder;
 	}
 
+	// textDefault is deprecated
 	.pr-u-textDefault {
 		@extend %textDefault;
 	}
@@ -516,6 +519,12 @@
 		}
 	}
 
+	@each $colorText, $value in config.$colorText {
+		.pr-u-color#{transform.capitalize(transform.camelize($colorText))} {
+			color: var(--pr-t-color-#{$colorText}) !important
+		}
+	}
+
 	%inset0 {
 		inset: 0 !important;
 	}

package/src/commons/vars.scss

@@ -52,7 +52,7 @@
 	// TOKENS : COLORS
 
 	@include core.cssvars('pr-t-color-input', config.$colorInput);
-	@include core.cssvars('pr-t-color-text', config.$colorText);
+	@include core.cssvars('pr-t-color', config.$colorText);
 
 	// VARIABLES
 

package/src/components/dialog/component.scss

@@ -19,7 +19,11 @@
 	position: fixed !important;
 	max-inline-size: var(--components-dialog-maxWidth) !important;
 	max-block-size: var(--components-dialog-maxHeight) !important;
+	transition-property: scale, translate, inline-size, block-size, inset;
+	transition-duration: var(--commons-animations-durations-standard);
 	overflow: hidden;
+	translate: var(--components-dialog-translateX) var(--components-dialog-translateY);
+	scale: var(--components-dialog-scale);
 
 	@supports not (height: 1dvh) {
 		--components-dialog-maxHeight: var(--components-dialog-maxHeightFallback);

package/src/components/dialog/index.scss

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

package/src/components/dialog/mods.scss

@@ -31,10 +31,13 @@
 	--components-dialog-animationOpening: slideFromRight;
 	--components-dialog-maxHeight: none;
 	--components-dialog-maxHeightFallback: var(--components-dialog-maxHeight);
-	--components-dialog-height: 100%;
+	--components-dialog-height: calc(100% - var(--pr-t-spacings-100) * 2);
 	--components-dialog-maxWidth: calc(100vw - var(--pr-t-spacings-200));
-	--components-dialog-borderRadius: var(--pr-t-border-radius-structure) 0 0 var(--pr-t-border-radius-structure);
-	--components-dialog-inset: 0 0 0 auto;
+	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
+	--components-dialog-inset: var(--pr-t-spacings-100) var(--pr-t-spacings-100) var(--pr-t-spacings-100) auto;
+	--components-dialog-translateX: var(--components-dialog-translate);
+	--components-dialog-translateY: 0;
+	--components-dialog-translate-spacing: calc(var(--pr-t-spacings-500) * 2);
 
 	@include keyframe.slideFromRight;
 }
@@ -44,26 +47,30 @@
 	--components-dialog-maxHeight: calc(100dvh - var(--pr-t-spacings-200));
 	--components-dialog-maxHeightFallback: calc(100vh - var(--pr-t-spacings-200));
 	--components-dialog-maxWidth: none;
-	--components-dialog-inset: auto 0 0 0;
-	--components-dialog-borderRadius: var(--pr-t-border-radius-structure) var(--pr-t-border-radius-structure) 0 0;
-	--components-dialog-width: 100%;
+	--components-dialog-inset: auto var(--pr-t-spacings-100) var(--pr-t-spacings-100) var(--pr-t-spacings-100);
+	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
+	--components-dialog-width: calc(100% - var(--pr-t-spacings-100) * 2);
 	--components-dialog-height: fit-content;
+	--components-dialog-translateX: 0;
+	--components-dialog-translateY: var(--components-dialog-translate);
+	--components-dialog-translate-spacing: var(--pr-t-spacings-500);
 
 	@include keyframe.slideFromBottom;
 }
 
 @mixin maxContent {
 	--components-dialog-size: 100%;
-	--components-dialog-height: 100%;
+	--components-dialog-height: calc(100% - var(--pr-t-spacings-100) * 2);
 }
 
 @mixin fullScreen {
 	--components-dialog-height: 100%;
-	--components-dialog-size: 100%;
+	--components-dialog-width: 100%;
 	--components-dialog-maxWidth: none;
 	--components-dialog-maxHeight: none;
 	--components-dialog-maxHeightFallback: var(--components-dialog-maxHeight);
 	--components-dialog-borderRadius: 0;
+	--components-dialog-inset: 0;
 }
 
 @mixin neutralBackground {
@@ -83,3 +90,6 @@
 	}
 }
 
+@mixin stacked {
+
+}

package/src/components/dialog/vars.scss

@@ -15,4 +15,10 @@
 	--components-dialog-insideHeaderLinkDisplay: none;
 	--components-dialog-insideHeaderColumns: 1fr auto auto;
 	--components-dialog-insideContent-background: transparent;
+	--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);
+	--components-dialog-translateX: 0;
+	--components-dialog-translateY: var(--components-dialog-translate);
+	--components-dialog-scale: calc(1 - (var(--components-dialog-level) * 0.05));
 }

package/src/components/filterBar/component.scss

@@ -8,11 +8,12 @@
 @use '@lucca-front/scss/src/components/clear/exports' as clear;
 @use '@lucca-front/scss/src/components/segmentedControl/exports' as segmentedControl;
 @use '@lucca-front/scss/src/components/textField/exports' as textField;
+@use '@lucca-front/scss/src/components/divider/exports' as divider;
 
 @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 {
@@ -21,6 +22,10 @@
 
 	@at-root ($atRoot) {
 		.filterBar-divider.divider {
+			@include divider.vertical;
+
+			margin-inline: var(--pr-t-spacings-50);
+
 			&:last-child {
 				display: none;
 			}
@@ -39,6 +44,7 @@
 			gap: var(--pr-t-spacings-100);
 			flex-wrap: var(--components-filterBar-scrollBox-group-flexWrap);
 			flex-grow: 1;
+			flex-shrink: 1 !important;
 		}
 
 		.filterBar-scrollBox-export {

package/src/components/filterBar/index.scss

@@ -8,12 +8,8 @@
 	}
 
 	@layer mods {
-		@include media.max(XXS) {
-			@include compact;
-		}
-
-		@include media.min(XXS) {
-			@include notCompact;
+		@include media.max(XS) {
+			@include narrow;
 		}
 
 		@include media.pointer(coarse) {

package/src/components/filterBar/mods.scss

@@ -1,9 +1,9 @@
 @use '@lucca-front/scss/src/commons/utils/overflow';
-
-@use '@lucca-front/scss/src/components/divider/exports' as divider;
 @use '@lucca-front/scss/src/components/scrollBox/exports' as scrollBox;
 
-@mixin compact {
+@mixin narrow {
+	--components-filterBar-flexWrap: wrap;
+
 	.filterBar-segmentedControl.segmentedControl {
 		--components-segmentedControl-direction: row;
 		--components-segmentedControl-width: 100%;
@@ -14,20 +14,6 @@
 	}
 }
 
-@mixin notCompact {
-	.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 {
 	--components-filterBar-scrollBox-flexGrow: 1;
 	--components-filterBar-scrollBox-group-flexWrap: nowrap;

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: nowrap;
 }

package/src/components/popover/component.scss

@@ -10,7 +10,6 @@
 	position: relative;
 	min-block-size: var(--pr-t-spacings-500);
 	min-inline-size: var(--pr-t-spacings-500);
-	max-inline-size:  var(--components-popover-maxInlineSize);
 	animation: popup var(--commons-animations-durations-fast) ease 1 forwards;
 
 	// need of a higher specificity

package/src/components/popover/vars.scss

@@ -1,4 +1,3 @@
 @mixin vars {
 	--components-popover-padding: var(--pr-t-spacings-100);
-	--components-popover-maxInlineSize: 25rem;
 }

package/src/components/scrollBox/component.scss

@@ -32,6 +32,7 @@
 		flex-shrink: 0;
 		inline-size: var(--components-scrollBox-shadowSize);
 		inset-block: 0;
+		inset-inline: calc(var(--components-scrollBox-paddingInline) * -1);
 		margin-block: calc(var(--components-scrollBox-paddingBlock) * -1);
 		background-repeat: no-repeat;
 		z-index: 10;
@@ -44,8 +45,8 @@
 
 	&::before {
 		opacity: var(--components-scrollBox-beforeOpacity);
-		inset-inline-start: calc(var(--components-scrollBox-paddingInline) * -1);
-		margin-inline-end: calc(var(--components-scrollBox-shadowSize) * -1 - var(--components-scrollBox-gap));
+		margin-inline-start: calc(var(--components-scrollBox-paddingInline) * -1);
+		margin-inline-end: calc(var(--components-scrollBox-paddingInline) - var(--components-scrollBox-shadowSize) - var(--components-scrollBox-gap));
 		background-position: 0% 50%;
 		background-image: radial-gradient(
 				farthest-side at 0% 50%,
@@ -66,8 +67,8 @@
 
 	&::after {
 		opacity: var(--components-scrollBox-afterOpacity);
-		inset-inline-end: calc(var(--components-scrollBox-paddingInline) * -1);
-		margin-inline-start: calc(var(--components-scrollBox-shadowSize) * -1 - var(--components-scrollBox-gap));
+		margin-inline-start: calc(var(--components-scrollBox-paddingInline) - var(--components-scrollBox-shadowSize) - var(--components-scrollBox-gap));
+		margin-inline-end: calc(var(--components-scrollBox-paddingInline) * -1);
 		background-position: 100% 50%;
 		background-image: radial-gradient(
 				farthest-side at 100% 50%,