@lucca-front/scss 18.1.1 → 18.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "18.1.1",
+  "version": "18.1.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": "v18.1.1"
+    "@lucca-front/icons": "v18.1.2"
   }
 }

package/src/commons/config.scss

@@ -45,7 +45,7 @@ $cleemy: (
 	400: #54bbb2,
 	500: #00ada5,
 	600: #009491,
-	700: #00807d,
+	700: #007a78,
 	800: #00545c,
 	900: #00333d,
 ) !default;
@@ -87,11 +87,25 @@ $poplee: (
 	400: #7bc3ea,
 	500: #62b7e4,
 	600: #3a9ed4,
-	700: #0f7db8,
+	700: #0b77b1,
 	800: #005685,
 	900: #003c5c,
 ) !default;
 
+$coreHR: (
+	text: #ffffff,
+	50: #e6f2fe,
+	100: #cbe3fb,
+	200: #b0d3f7,
+	300: #96c4f3,
+	400: #78b2ed,
+	500: #5ea3e8,
+	600: #3387db,
+	700: #0c63bb,
+	800: #004285,
+	900: #002e5c,
+) !default;
+
 $cc: (
 	text: #ffffff,
 	50: #feecf4,
@@ -108,6 +122,7 @@ $cc: (
 
 $neutral: (
 	text: #ffffff,
+	0: #ffffff,
 	25: #f3f6fc,
 	50: #e7edf9,
 	100: #dbe3f5,
@@ -351,6 +366,7 @@ $prod: map-get(
 		'cleemy': $cleemy,
 		'timmi': $timmi,
 		'poplee': $poplee,
+		'coreHR': $coreHR,
 		'pagga': $pagga,
 		'cc': $cc,
 	),
@@ -385,6 +401,7 @@ $palettesInterpolation: (
 	'pineapple': $pineapple,
 	'pagga': $pagga,
 	'poplee': $poplee,
+	'coreHR': $coreHR,
 	'timmi': $timmi,
 	'cleemy': $cleemy,
 	'cc': $cc,

package/src/commons/core.scss

@@ -38,8 +38,7 @@ $overflow: 'hidden', 'auto', 'visible', 'scroll';
 		.pr-u-#{transform.camelize($boxModel)}#{transform.capitalize($boxDirection)}#{transform.capitalize($key)} {
 			#{$boxModel}#{if($boxDirection == '', '', '-')}#{$boxDirection}: var(--pr-t-spacings-#{$key}) #{$suffix};
 		}
-	}
-	@else {
+	} @else {
 		.u-#{transform.camelize($boxModel)}#{transform.capitalize($boxDirection)}#{transform.capitalize($key)} {
 			#{$boxModel}#{if($boxDirection == '', '', '-')}#{$boxDirection}: var(--spacings-#{$key}) #{$suffix};
 		}
@@ -49,7 +48,7 @@ $overflow: 'hidden', 'auto', 'visible', 'scroll';
 @mixin spacings($token: true) {
 	$spacings: config.$spacingsDeprecated;
 	@if $token {
-			$spacings: config.$spacings;
+		$spacings: config.$spacings;
 	}
 	@each $boxModel in $boxModel {
 		@each $boxDirection in $boxDirection {
@@ -122,18 +121,17 @@ $overflow: 'hidden', 'auto', 'visible', 'scroll';
 }
 
 @mixin rosetta($before, $after, $iterations) {
-    @if type-of($iterations) == map {
-        @each $iterationBefore, $iterationAfter in $iterations {
+	@if type-of($iterations) == map {
+		@each $iterationBefore, $iterationAfter in $iterations {
 			@if type-of($iterationAfter) == string {
-            	#{$before}-#{$iterationBefore}: var(#{$after}-#{$iterationAfter});
+				#{$before}-#{$iterationBefore}: var(#{$after}-#{$iterationAfter});
 			} @else {
 				#{$before}-#{$iterationBefore}: #{$iterationAfter};
 			}
-        }
-    }
-    @else {
-        @each $iteration in $iterations {
-            #{$before}-#{$iteration}: var(#{$after}-#{$iteration});
-        }
-    }
+		}
+	} @else {
+		@each $iteration in $iterations {
+			#{$before}-#{$iteration}: var(#{$after}-#{$iteration});
+		}
+	}
 }

package/src/commons/utils/index.scss

@@ -143,11 +143,24 @@
 	@include a11y.mask('!important');
 }
 
-.u-clearfix,
-.u-clear {
+.u-clearfix {
 	@include reset.clearfix('!important');
 }
 
+// .u-clear is deprecated
+.u-clearBoth,
+.u-clear {
+	@include reset.clear('both', '!important');
+}
+
+.u-clearLeft {
+	@include reset.clear('left', '!important');
+}
+
+.u-clearRight {
+	@include reset.clear('right', '!important');
+}
+
 .u-listReset {
 	@include reset.list('!important');
 }
@@ -310,7 +323,7 @@
 
 @each $display in core.$displays {
 	@if $display != 'none' {
-		.u-onlyPrintDisplay#{transform.capitalize($display)} {
+		.u-onlyPrintDisplay#{transform.capitalize(transform.camelize($display))} {
 			@extend %displayNone;
 		}
 	}

package/src/commons/utils/reset.scss

@@ -26,6 +26,10 @@
 	cursor: pointer #{$suffix};
 }
 
+@mixin clear($direction, $suffix: '') {
+	clear: #{$direction} #{$suffix};
+}
+
 @mixin clearfix($suffix: '') {
 	&::before,
 	&::after {

package/src/components/card/component.scss

@@ -41,6 +41,8 @@
 
 		.card-footer-right {
 			margin-left: auto;
+			display: inline-flex;
+			gap: var(--pr-t-spacings-200);
 		}
 	}
 }

package/src/components/dialog/component.scss

@@ -81,6 +81,7 @@
 			padding: var(--components-dialog-insideHeaderTitlePadding);
 			text-align: var(--components-dialog-insideHeaderTitleAlign);
 			margin: 0;
+			overflow-wrap: break-word;
 		}
 
 		.dialog_backdrop {

package/src/components/emptyState/component.scss

@@ -26,7 +26,7 @@
 
 		.emptyState-content-icon {
 			--components-emptyState-icon-background-color: var(--palettes-100, var(--palettes-product-100));
-			--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-product-600));
+			--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));
 		}
 
 		.emptyState-content-text {

package/src/components/loading/mods.scss

@@ -20,15 +20,15 @@
 	@include block;
 	@include L;
 
-	--components-loading-transform: translateY(calc((100dvh - var(--commons-banner-height)) / 2));
-	--components-loading-transformFallback: translateY(calc((100vh - var(--commons-banner-height)) / 2));
+	--components-loading-transform: translateY(30vh);
+	--components-loading-padding: 0;
 }
 
 @mixin invert {
 	--components-loading-color: var(--colors-white-color);
 
 	&::after {
-		--commons-loading-frontground: color.transparentize(var(--colors-white-color), 0.66);
+		--commons-loading-frontground: #{color.transparentize(var(--colors-white-color), 66%)};
 	}
 }
 
@@ -48,4 +48,6 @@
 @mixin drawer {
 	@include fullPage;
 	@include popin;
+
+	--components-loading-transform: translateY(35vh);
 }

package/src/components/multiSelect/component.scss

@@ -24,6 +24,10 @@
 			flex: 1;
 		}
 
+		.multipleSelect-displayer-chip {
+			min-width: 0;
+		}
+
 		.multipleSelect-displayer-chip-value {
 			max-width: 8rem;
 			white-space: nowrap;

package/src/components/multiSelect/mods.scss

@@ -4,40 +4,41 @@
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
 
 @mixin S {
-  --components-multiSelect-fontSize: var(--sizes-S-fontSize);
-  --components-multiSelect-lineHeight: var(--sizes-S-lineHeight);
-  --components-multiSelect-padding: var(--pr-t-spacings-75);
-  --components-multiSelect-gap: var(--pr-t-spacings-75);
-
-  .multipleSelect-arrow {
-    @include icon.S;
-  }
-
-  .multipleSelect-clear {
-    @include clear.S;
-  }
-
-  .multipleSelect-displayer-chip {
-    @include chip.S;
-  }
-
-  .multipleSelect-displayer-numericBadge {
-    @include numericBadge.S;
-  }
+	--components-multiSelect-fontSize: var(--sizes-S-fontSize);
+	--components-multiSelect-lineHeight: var(--sizes-S-lineHeight);
+	--components-multiSelect-padding: var(--pr-t-spacings-75);
+	--components-multiSelect-gap: var(--pr-t-spacings-75);
+
+	.multipleSelect-arrow {
+		@include icon.S;
+	}
+
+	.multipleSelect-clear {
+		@include clear.S;
+	}
+
+	.multipleSelect-displayer-chip {
+		@include chip.S;
+	}
+
+	.multipleSelect-displayer-numericBadge {
+		@include numericBadge.S;
+	}
 }
 
 @mixin displayerFilter {
-  display: grid;
-
-  .multipleSelect-displayer-filter {
-    grid-column-start: 1;
-    grid-row-start: 1;
-    display: flex;
-    gap: var(--pr-t-spacings-50);
-  }
-
-  .multipleSelect-displayer-search {
-    grid-column-start: 1;
-    grid-row-start: 1;
-  }
+	display: grid;
+
+	.multipleSelect-displayer-filter {
+		grid-column-start: 1;
+		grid-row-start: 1;
+		display: flex;
+		gap: var(--pr-t-spacings-50);
+		min-width: 0;
+	}
+
+	.multipleSelect-displayer-search {
+		grid-column-start: 1;
+		grid-row-start: 1;
+	}
 }