@lucca-front/scss 20.3.0 → 20.3.1-rc.2

package/package.json

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

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

@@ -8,7 +8,8 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/text';
 @use '@lucca-front/scss/src/commons/utils/a11y';
-
+@use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/utils/container';
 @use '@lucca-front/scss/src/components/title/exports' as title;
 
 @layer utils {
@@ -489,6 +490,32 @@
 		}
 	}
 
+	@each $breakpoint, $value in config.$breakpoints {
+		@include media.min($breakpoint) {
+			.pr-u-displayNoneAtMediaMin#{$breakpoint} {
+				display: none !important;
+			}
+		}
+
+		@include media.max($breakpoint) {
+			.pr-u-displayNoneAtMediaMax#{$breakpoint} {
+				display: none !important;
+			}
+		}
+
+		@include container.min($breakpoint) {
+			.pr-u-displayNoneAtContainerMin#{$breakpoint} {
+				display: none !important;
+			}
+		}
+
+		@include container.max($breakpoint) {
+			.pr-u-displayNoneAtContainerMax#{$breakpoint} {
+				display: none !important;
+			}
+		}
+	}
+
 	%inset0 {
 		inset: 0 !important;
 	}

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;