@lucca-front/scss 21.1.0-rc.0 → 21.1.0-rc.2

package/src/components/form/mods.scss

@@ -12,6 +12,7 @@
 @use '@lucca-front/scss/src/components/multiSelect/exports' as multiSelect;
 @use '@lucca-front/scss/src/components/timepicker/exports' as timepicker;
 @use '@lucca-front/scss/src/components/box/exports' as box;
+@use '@lucca-front/scss/src/components/color/exports' as color;
 
 @mixin maxWidth {
 	max-inline-size: var(--components-form-maxWidth);
@@ -115,6 +116,10 @@
 	.timePicker {
 		@include timepicker.S;
 	}
+
+	.color {
+		@include color.M;
+	}
 }
 
 @mixin XS {
@@ -369,3 +374,7 @@
 		content: '*' / '';
 	}
 }
+
+@mixin hiddenLabel {
+	gap: 0;
+}

package/src/components/horizontalNavigation/component.scss

@@ -32,7 +32,7 @@
 		.horizontalNavigation-containerOptional,
 		.menu-containerOptional {
 			max-inline-size: var(--commons-container-maxWidth);
-			padding-inline: var(--commons-container-padding);
+			padding: var(--commons-container-padding);
 		}
 
 		// .menu-list is deprecated

package/src/components/index.scss

@@ -110,7 +110,9 @@
 @forward 'listboxOption';
 @forward 'suggestion';
 @forward 'resourceCard';
-@forward 'formPresentation';
+@forward 'color';
+@forward 'bubbleIllustration';
+@forward 'bubbleIcon';
 
 @forward 'filterBarDeprecated';
 @forward 'tableFixedDeprecated';

package/src/components/mainLayout/component.scss

@@ -95,6 +95,7 @@
 			z-index: 1;
 			inset-block-start: var(--components-mainLayout-content-inside-header-insetBlockStart);
 			inset-inline-start: 0;
+			background-color: var(--components-mainLayout-content-inside-header-backgroundColor);
 
 			&:empty {
 				display: none;
@@ -106,6 +107,7 @@
 			inset-block-end: var(--components-mainLayout-content-inside-footer-insetBlockEnd);
 			inset-inline-start: 0;
 			margin-block-start: auto;
+			background-color: var(--components-mainLayout-content-inside-footer-backgroundColor);
 
 			&:empty {
 				display: none;

package/src/components/mainLayout/mods.scss

@@ -4,10 +4,12 @@
 
 @mixin stickyHeader {
 	--components-mainLayout-content-inside-header-position: sticky;
+	--components-mainLayout-content-inside-header-backgroundColor: var(--commons-background-base);
 }
 
 @mixin stickyFooter {
 	--components-mainLayout-content-inside-footer-position: sticky;
+	--components-mainLayout-content-inside-footer-backgroundColor: var(--commons-background-base);
 }
 
 @mixin stickyBlock {

package/src/components/mainLayout/vars.scss

@@ -7,4 +7,6 @@
 	--components-mainLayout-content-inside-header-insetBlockStart: auto;
 	--components-mainLayout-content-inside-footer-insetBlockEnd: auto;
 	--components-mainLayout-content-inside-block-firstLastOfType-marginBlock: var(--pr-t-spacings-200);
+	--components-mainLayout-content-inside-header-backgroundColor: transparent;
+	--components-mainLayout-content-inside-footer-backgroundColor: transparent;
 }

package/src/components/resourceCard/mods.scss

@@ -1,6 +1,8 @@
 @use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
+@use '@lucca-front/scss/src/components/bubbleIllustration/exports' as bubbleIllustration;
+@use '@lucca-front/scss/src/components/bubbleIcon/exports' as bubbleIcon;
 
 @mixin gridWrapper {
 	--components-resourceCardWrapper-display: grid;
@@ -23,6 +25,14 @@
 	--components-resourceCard-layout-content-font: var(--pr-t-font-body-S);
 	--components-resourceCard-layout-header-title-font: var(--pr-t-font-heading-4);
 	--components-resourceCard-layout-before-illustration-minSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
+
+	.bubbleIllustration {
+		@include bubbleIllustration.S;
+  }
+  
+	.bubbleIcon {
+		@include bubbleIcon.S;
+	}
 }
 
 @mixin hasIllustrationGridS {

package/src/components/resourceCard/states.scss

@@ -20,6 +20,16 @@
 	--components-resourceCard-color: var(--palettes-neutral-500);
 	--components-resourceCard-layout-header-title-action-color: var(--palettes-neutral-500);
 	--components-resourceCard-before-boxShadow: 0 0 0 1px var(--palettes-neutral-50);
+
+
+	.bubbleIllustration {
+		--palettes-brand-600: var(--pr-t-color-input-icon-disabled);
+  }
+  
+	.bubbleIcon {
+		--components-bubbleIcon-color: var(--pr-t-color-input-icon-disabled);
+		--components-bubbleIcon-bubble-path-fill: var(--pr-t-color-input-background-disabled);
+	}
 }
 
 @mixin active {

package/src/components/formPresentation/component.scss

@@ -1,18 +0,0 @@
-@use '@lucca-front/scss/src/commons/utils/namespace';
-
-@mixin component($atRoot: namespace.$defaultAtRoot) {
-	@at-root ($atRoot) {
-		.formPresentation-description {
-			margin: 0;
-		}
-
-		.formPresentation-description-term {
-			display: var(--components-formPresentation-description-term-display);
-		}
-
-		.formPresentation-description-definition {
-			display: var(--components-formPresentation-description-definition-display);
-			margin: 0;
-		}
-	}
-}

package/src/components/formPresentation/index.scss

@@ -1,14 +0,0 @@
-@use 'exports' as *;
-
-.formPresentation {
-	@layer components {
-		@include vars;
-		@include component;
-	}
-
-	@layer mods {
-		&.mod-checkable{
-			@include checkable;
-		}
-	}
-}

package/src/components/formPresentation/mods.scss

@@ -1,3 +0,0 @@
-@mixin checkable {
-	--components-formPresentation-description-child-display: inline-block
-}

package/src/components/formPresentation/vars.scss

@@ -1,5 +0,0 @@
-@mixin vars {
-	--components-formPresentation-description-child-display: block;
-	--components-formPresentation-description-term-display: var(--components-formPresentation-description-child-display);
-	--components-formPresentation-description-definition-display: var(--components-formPresentation-description-child-display);
-}