@lucca-front/scss 20.3.1-rc.1 → 20.3.1-rc.3

package/package.json

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

package/src/commons/config.scss

@@ -5,9 +5,6 @@
 
 $layers: 'reset, base, components, mods, product, utils' !default;
 
-/* stylelint-disable-next-line layer-name-pattern */
-@layer #{$layers};
-
 $isNamespaced: false !default;
 $deprecatedSpacings: false !default;
 $deprecatedCardBoxMargin: false !default;

package/src/commons/index.scss

@@ -1,7 +1,11 @@
 @use "sass:meta";
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/config';
 @use 'exports' as *;
 
+/* stylelint-disable-next-line layer-name-pattern */
+@layer #{config.$layers};
+
 @layer reset {
 	@include meta.load-css('normalize.css/normalize');
 }

package/src/commons/utils/index.scss

@@ -26,6 +26,108 @@
 		}
 	}
 
+	%animated {
+		&FadeIn,
+		&FadeOut {
+			animation-name: fadeIn;
+
+			@include keyframe.fadeIn;
+		}
+
+		&ScaleIn,
+		&ScaleOut {
+			animation-name: scaleIn;
+
+			@include keyframe.scaleIn;
+		}
+
+		&ScaleInTop,
+		&ScaleOutTop {
+			animation-name: scaleInTop;
+
+			@include keyframe.scaleIn;
+		}
+
+		&ScaleInRight,
+		&ScaleOutRight {
+			animation-name: scaleInRight;
+
+			@include keyframe.scaleInRight;
+		}
+
+		&ScaleInBottom,
+		&ScaleOutBottom {
+			animation-name: scaleInBottom;
+
+			@include keyframe.scaleInBottom;
+		}
+
+		&ScaleInLeft,
+		&ScaleOutLeft {
+			animation-name: scaleInLeft;
+
+			@include keyframe.scaleInLeft;
+		}
+
+		&SlideIn,
+		&SlideInTop,
+		&SlideOut,
+		&SlideOutTop {
+			animation-name: slideIn;
+
+			@include keyframe.slideIn;
+		}
+
+		&SlideInRight,
+		&SlideOutRight {
+			animation-name: slideInRight;
+
+			@include keyframe.slideInRight;
+		}
+
+		&SlideInBottom,
+		&SlideOutBottom {
+			animation-name: slideInBottom;
+
+			@include keyframe.slideInBottom;
+		}
+
+		&SlideInLeft,
+		&SlideOutLeft {
+			animation-name: slideInLeft;
+
+			@include keyframe.slideInLeft;
+		}
+
+		&Shake {
+			animation-name: shake;
+
+			@include keyframe.shake;
+		}
+
+		&Pulse {
+			animation-name: pulse;
+			animation-direction: alternate;
+			animation-iteration-count: var(--commons-animations-iteration-count);
+
+			@include keyframe.pulse;
+		}
+
+		&FadeOut,
+		&SlideOut,
+		&SlideOutTop,
+		&SlideOutRight,
+		&SlideOutBottom,
+		&SlideOutLeft,
+		&ScaleOut,
+		&ScaleOutTop,
+		&ScaleOutRight,
+		&ScaleOutBottom,
+		&ScaleOutLeft {
+			animation-direction: reverse;
+		}
+	}
+
 	%mask {
 		@include a11y.mask('!important');
 	}
@@ -191,105 +293,7 @@
 	}
 
 	.pr-u-animated {
-		&FadeIn,
-		&FadeOut {
-			animation-name: fadeIn;
-
-			@include keyframe.fadeIn;
-		}
-
-		&ScaleIn,
-		&ScaleOut {
-			animation-name: scaleIn;
-
-			@include keyframe.scaleIn;
-		}
-
-		&ScaleInTop,
-		&ScaleOutTop {
-			animation-name: scaleInTop;
-
-			@include keyframe.scaleIn;
-		}
-
-		&ScaleInRight,
-		&ScaleOutRight {
-			animation-name: scaleInRight;
-
-			@include keyframe.scaleInRight;
-		}
-
-		&ScaleInBottom,
-		&ScaleOutBottom {
-			animation-name: scaleInBottom;
-
-			@include keyframe.scaleInBottom;
-		}
-
-		&ScaleInLeft,
-		&ScaleOutLeft {
-			animation-name: scaleInLeft;
-
-			@include keyframe.scaleInLeft;
-		}
-
-		&SlideIn,
-		&SlideInTop,
-		&SlideOut,
-		&SlideOutTop {
-			animation-name: slideIn;
-
-			@include keyframe.slideIn;
-		}
-
-		&SlideInRight,
-		&SlideOutRight {
-			animation-name: slideInRight;
-
-			@include keyframe.slideInRight;
-		}
-
-		&SlideInBottom,
-		&SlideOutBottom {
-			animation-name: slideInBottom;
-
-			@include keyframe.slideInBottom;
-		}
-
-		&SlideInLeft,
-		&SlideOutLeft {
-			animation-name: slideInLeft;
-
-			@include keyframe.slideInLeft;
-		}
-
-		&Shake {
-			animation-name: shake;
-
-			@include keyframe.shake;
-		}
-
-		&Pulse {
-			animation-name: pulse;
-			animation-direction: alternate;
-			animation-iteration-count: var(--commons-animations-iteration-count);
-
-			@include keyframe.pulse;
-		}
-
-		&FadeOut,
-		&SlideOut,
-		&SlideOutTop,
-		&SlideOutRight,
-		&SlideOutBottom,
-		&SlideOutLeft,
-		&ScaleOut,
-		&ScaleOutTop,
-		&ScaleOutRight,
-		&ScaleOutBottom,
-		&ScaleOutLeft {
-			animation-direction: reverse;
-		}
+		@extend %animated;
 	}
 
 	.pr-u-mask {
@@ -554,106 +558,7 @@
 		}
 
 		.u-animated {
-			&FadeIn,
-			&FadeOut {
-				animation-name: fadeIn;
-
-
-				@include keyframe.fadeIn;
-			}
-
-			&ScaleIn,
-			&ScaleOut {
-				animation-name: scaleIn;
-
-				@include keyframe.scaleIn;
-			}
-
-			&ScaleInTop,
-			&ScaleOutTop {
-				animation-name: scaleInTop;
-
-				@include keyframe.scaleIn;
-			}
-
-			&ScaleInRight,
-			&ScaleOutRight {
-				animation-name: scaleInRight;
-
-				@include keyframe.scaleInRight;
-			}
-
-			&ScaleInBottom,
-			&ScaleOutBottom {
-				animation-name: scaleInBottom;
-
-				@include keyframe.scaleInBottom;
-			}
-
-			&ScaleInLeft,
-			&ScaleOutLeft {
-				animation-name: scaleInLeft;
-
-				@include keyframe.scaleInLeft;
-			}
-
-			&SlideIn,
-			&SlideInTop,
-			&SlideOut,
-			&SlideOutTop {
-				animation-name: slideIn;
-
-				@include keyframe.slideIn;
-			}
-
-			&SlideInRight,
-			&SlideOutRight {
-				animation-name: slideInRight;
-
-				@include keyframe.slideInRight;
-			}
-
-			&SlideInBottom,
-			&SlideOutBottom {
-				animation-name: slideInBottom;
-
-				@include keyframe.slideInBottom;
-			}
-
-			&SlideInLeft,
-			&SlideOutLeft {
-				animation-name: slideInLeft;
-
-				@include keyframe.slideInLeft;
-			}
-
-			&Shake {
-				animation-name: shake;
-
-				@include keyframe.shake;
-			}
-
-			&Pulse {
-				animation-name: pulse;
-				animation-direction: alternate;
-				animation-iteration-count: var(--commons-animations-iteration-count);
-
-				@include keyframe.pulse;
-			}
-
-			&FadeOut,
-			&SlideOut,
-			&SlideOutTop,
-			&SlideOutRight,
-			&SlideOutBottom,
-			&SlideOutLeft,
-			&ScaleOut,
-			&ScaleOutTop,
-			&ScaleOutRight,
-			&ScaleOutBottom,
-			&ScaleOutLeft {
-				animation-direction: reverse;
-			}
+			@extend %animated;
 		}
 
 		.u-mask {

package/src/components/chip/component.scss

@@ -4,9 +4,9 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	background-color: var(--palettes-700, var(--palettes-neutral-200));
+	background-color: var(--components-chip-backgroundColor);
 	border-radius: var(--components-chip-borderRadius);
-	color: var(--palettes-0, var(--palettes-text, var(--pr-t-color-text)));
+	color: var(--components-chip-color);
 	display: inline-flex;
 	align-items: center;
 	gap: var(--pr-t-spacings-100);

package/src/components/chip/states.scss

@@ -1,6 +1,6 @@
 @mixin disabled {
-	background-color: var(--commons-disabled-background);
-	color: var(--pr-t-color-text-disabled);
+	--components-chip-backgroundColor: var(--commons-disabled-background);
+	--components-chip-color: var(--pr-t-color-text-disabled);
 
 	.chip-kill {
 		display: none;

package/src/components/chip/vars.scss

@@ -1,5 +1,7 @@
 @mixin vars {
 	--components-chip-font: var(--pr-t-font-body-S);
+	--components-chip-backgroundColor: var(--palettes-700, var(--palettes-neutral-200));
+	--components-chip-color: var(--palettes-0, var(--palettes-text, var(--pr-t-color-text)));
 	--components-chip-borderRadius: var(--pr-t-border-radius-default);
 	--components-chip-kill-size: 0.75rem;
 	--components-chip-kill-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E");

package/src/components/dataTable/component.scss

@@ -29,6 +29,14 @@
 			}
 		}
 
+		.dataTableWrapper-pagination {
+			border-block-start: 1px solid var(--commons-border-200);
+
+			&:empty {
+				display: none;
+			}
+		}
+
 		.dataTable-head-row-cell {
 			color: var(--pr-t-color-text-subtle);
 			padding: var(--components-dataTable-cell-padding);

package/src/components/dialog/component.scss

@@ -19,6 +19,7 @@
 	position: fixed !important;
 	max-inline-size: var(--components-dialog-maxWidth) !important;
 	max-block-size: var(--components-dialog-maxHeight) !important;
+	overflow: hidden;
 
 	@supports not (height: 1dvh) {
 		--components-dialog-maxHeight: var(--components-dialog-maxHeightFallback);

package/src/components/inputFramed/component.scss

@@ -52,7 +52,6 @@
 			position: relative;
 			flex-grow: 1;
 			display: flex;
-			flex-wrap: wrap;
 			justify-content: space-between;
 			align-content: flex-start;
 			gap: var(--pr-t-spacings-100);

package/src/components/navside/component.scss

@@ -19,16 +19,6 @@
 	inline-size: var(--commons-navSide-width);
 	scroll-margin-block-start: var(--commons-banner-height);
 
-	.appLayout-navSide & {
-		position: relative;
-		padding-block-start: 0;
-		block-size: var(--commons-navSide-mobile-toggle-height);
-
-		@include media.min('S') {
-			block-size: 100%;
-		}
-	}
-
 	.numericBadge {
 		@include numericBadge.S;
 		@include numericBadge.brand;

package/src/components/navside/index.scss

@@ -6,8 +6,12 @@
 	@layer components {
 		@include vars;
 		@include component;
+	}
 
+	@layer mods {
 		.appLayout-navSide & {
+			@include inAppLayout;
+
 			@include media.min('S') {
 				@include inAppLayoutWide;
 			}
@@ -16,9 +20,7 @@
 				@include inAppLayoutNarrow;
 			}
 		}
-	}
 
-	@layer mods {
 		&.mod-withBanner {
 			@include banner;
 		}

package/src/components/navside/mods.scss

@@ -147,6 +147,12 @@
 	}
 }
 
+@mixin inAppLayout {
+	position: relative;
+	padding-block-start: 0;
+	block-size: var(--commons-navSide-mobile-toggle-height);
+}
+
 @mixin inAppLayoutWide {
 	position: static;
 	block-size: 100%;

package/src/components/richText/component.scss

@@ -64,6 +64,7 @@
 
 	@at-root ($atRoot) {
 		.richTextField-toolbar {
+			display: var(--components-richTextField-toolbar-display);
 			background-color: var(--components-richTextField-toolbar-backgroundColor);
 			border-radius: 0 0 var(--pr-t-border-radius-input) var(--pr-t-border-radius-input);
 			padding: var(--pr-t-spacings-100);
@@ -148,6 +149,11 @@
 			&:focus-visible {
 				@include a11y.focusVisible;
 			}
+
+			&.is-disabled {
+				--components-chip-backgroundColor: var(--palettes-neutral-200);
+				--components-chip-color: var(--pr-t-color-input-text-disabled);
+			}
 		}
 
 		.richTextField-content-placeholder {

package/src/components/richText/states.scss

@@ -5,6 +5,7 @@
 @mixin disabled {
 	--components-richTextField-backgroundColor: var(--pr-t-color-input-background-disabled);
 	--components-richTextField-toolbar-backgroundColor: var(--pr-t-color-input-background-disabled);
+	--components-richTextField-toolbar-display: none;
 	--components-richTextField-color: var(--pr-t-color-input-text-disabled);
 	--components-richTextField-borderColor: var(--pr-t-color-input-border);
 }

package/src/components/richText/vars.scss

@@ -3,6 +3,7 @@
 	--components-richTextField-backgroundColor: var(--pr-t-color-input-background);
 	--components-richTextField-color: var(--pr-t-color-input-text);
 	--components-richTextField-toolbar-backgroundColor: var(--palettes-neutral-25);
+	--components-richTextField-toolbar-display: block;
 	--components-richTextField-resize: vertical;
 	--components-richTextField-height: 3lh;
 	--components-richTextField-minHeight: 2lh;