@lucca-front/scss 18.3.0-rc.2 → 18.3.0-rc.3

package/package.json

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

package/src/commons/utils/container.scss

@@ -1,77 +1,117 @@
+@use 'sass:string';
 @use '@lucca-front/scss/src/commons/utils/media';
 
-// dans cette page tous les mixins sont des raccourcis vers media.query et media.queries
+@mixin auto($containerName) {
+	*:has(> .#{$containerName}:not(.rwd-disableAutoContainer)) {
+		container-type: inline-size;
+		container-name: string.unquote($containerName);
+	}
+}
+
+// dans ce qui suit tous les mixins sont des raccourcis vers media.query et media.queries
 
 // les raccourcis des requêtes simples et multiples
 
-@mixin query($breakpoint, $property: 'width', $max: false, $name: '') {
-	@include media.query($breakpoint: $breakpoint, $property: $property, $max: $max, $at: 'container', $name: $name) {
-		@content;
+@mixin query($breakpoint, $breakpoint2, $axis: 'width', $inverted: false, $containerName: '') {
+	// si on breakpoint supplémentaire est passé, c’est queries qu’il faut appeler
+	@if $breakpoint2 != null {
+		@include queries(
+			$breakpoint1: $breakpoint,
+			$breakpoint2: $breakpoint2,
+			$axis: $axis,
+			$at: 'container',
+			$containerName: $containerName,
+			$inverted: $inverted
+		) {
+			@content;
+		}
+	} @else {
+		@include media.query($breakpoint: $breakpoint, $axis: $axis, $inverted: $inverted, $at: 'container', $containerName: $containerName) {
+			@content;
+		}
 	}
 }
 
-@mixin queries($breakpoint1, $breakpoint2, $property: 'width', $name: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $property: $property, $at: 'container', $name: $name) {
+@mixin queries($breakpoint1, $breakpoint2, $inverted: false, $axis: 'width', $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $inverted: $inverted, $axis: $axis, $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-// les raccourcis pour min/max/between
+// les raccourcis pour min/max/inside/outside
+
+@mixin min($breakpoint, $axis: 'width', $containerName: '') {
+	@include media.query($breakpoint: $breakpoint, $axis: $axis, $at: 'container', $containerName: $containerName) {
+		@content;
+	}
+}
 
-@mixin min($breakpoint, $property: 'width', $name: '') {
-	@include media.query($breakpoint: $breakpoint, $property: $property, $at: 'container', $name: $name) {
+@mixin max($breakpoint, $axis: 'width', $containerName: '') {
+	@include media.query($breakpoint, $axis: $axis, $inverted: true, $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-@mixin max($breakpoint, $property: 'width', $name: '') {
-	@include media.query($breakpoint, $property: $property, $max: true, $at: 'container', $name: $name) {
+@mixin inside($breakpoint1, $breakpoint2, $axis: 'width', $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $axis: $axis, $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-@mixin between($breakpoint1, $breakpoint2, $property: 'width', $name: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $property: $property, $at: 'container', $name: $name) {
+@mixin outside($breakpoint1, $breakpoint2, $axis: 'width', $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $axis: $axis, $at: 'container', $containerName: $containerName, $inverted: true) {
 		@content;
 	}
 }
 
-// les raccourcis pour minWidth/maxWidth/betweenWidths
+// les raccourcis pour minWidth/maxWidth/insideWidths/outsideWidths
 
-@mixin minWidth($breakpoint, $name: '') {
-	@include media.query($breakpoint, $at: 'container', $name: $name) {
+@mixin minWidth($breakpoint, $containerName: '') {
+	@include media.query($breakpoint, $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-@mixin maxWidth($breakpoint, $name: '') {
-	@include media.query($breakpoint, $max: true, $at: 'container', $name: $name) {
+@mixin maxWidth($breakpoint, $containerName: '') {
+	@include media.query($breakpoint, $inverted: true, $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-@mixin betweenWidths($breakpoint1, $breakpoint2, $name: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $at: 'container', $name: $name) {
+@mixin insideWidths($breakpoint1, $breakpoint2, $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-// les raccourcis pour minHeight/maxHeight/betweenHeights
+@mixin outsideWidths($breakpoint1, $breakpoint2, $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $at: 'container', $containerName: $containerName, $inverted: true) {
+		@content;
+	}
+}
+
+// les raccourcis pour minHeight/maxHeight/insideHeights/outsideHeights
+
+@mixin minHeight($breakpoint, $containerName: '') {
+	@include media.query($breakpoint, $axis: 'height', $at: 'container', $containerName: $containerName) {
+		@content;
+	}
+}
 
-@mixin minHeight($breakpoint, $name: '') {
-	@include media.query($breakpoint, $property: 'height', $at: 'container', $name: $name) {
+@mixin maxHeight($breakpoint, $containerName: '') {
+	@include media.query($breakpoint, $inverted: true, $axis: 'height', $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-@mixin maxHeight($breakpoint, $name: '') {
-	@include media.query($breakpoint, $max: true, $property: 'height', $at: 'container', $name: $name) {
+@mixin insideHeights($breakpoint1, $breakpoint2, $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $axis: 'height', $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-@mixin betweenHeights($breakpoint1, $breakpoint2, $name: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $property: 'height', $at: 'container', $name: $name) {
+@mixin outsideHeights($breakpoint1, $breakpoint2, $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $axis: 'height', $at: 'container', $containerName: $containerName, $inverted: true) {
 		@content;
 	}
 }

package/src/commons/utils/media.scss

@@ -13,33 +13,55 @@
 
 // les requêtes simples et multiples
 
-@mixin query($breakpoint, $property: 'width', $max: false, $at: 'media', $name: '') {
-	$reversed: '';
+@mixin query($breakpoint, $breakpoint2: null, $axis: 'width', $inverted: false, $at: 'media', $containerName: '') {
+	// si on breakpoint supplémentaire est passé, c’est queries qu’il faut appeler
+	@if $breakpoint2 != null {
+		@include queries(
+			$breakpoint1: $breakpoint,
+			$breakpoint2: $breakpoint2,
+			$axis: $axis,
+			$at: $at,
+			$containerName: $containerName,
+			$inverted: $inverted
+		) {
+			@content;
+		}
+	} @else {
+		$reversed: '';
 
-	@if $max {
-		$reversed: 'not all and';
+		@if $inverted {
+			$reversed: 'not all and';
 
-		@if $at == 'container' {
-			$reversed: 'not';
+			@if $at == 'container' {
+				$reversed: 'not';
+			}
 		}
-	}
 
-	@if map.get(config.$breakpoints, $breakpoint) {
-		$breakpoint: pxToEm(map.get(config.$breakpoints, $breakpoint));
-	}
+		@if $at == 'media' {
+			$containerName: '';
+		}
 
-	@#{$at} #{$name} #{$reversed} (min-#{$property}: #{$breakpoint}) {
-		@content;
+		@if map.get(config.$breakpoints, $breakpoint) {
+			$breakpoint: pxToEm(map.get(config.$breakpoints, $breakpoint));
+		}
+
+		@#{$at} #{$containerName} #{$reversed} (min-#{$axis}: #{$breakpoint}) {
+			@content;
+		}
 	}
 }
 
-@mixin queries($breakpoint1, $breakpoint2, $property: 'width', $at: 'media', $name: '') {
+@mixin queries($breakpoint1, $breakpoint2, $axis: 'width', $at: 'media', $containerName: '', $inverted: false) {
 	$reversed: 'not all and';
 
 	@if $at == 'container' {
 		$reversed: 'not';
 	}
 
+	@if $at == 'media' {
+		$containerName: '';
+	}
+
 	@if map.get(config.$breakpoints, $breakpoint1) {
 		$breakpoint1: pxToEm(map.get(config.$breakpoints, $breakpoint1));
 	}
@@ -55,34 +77,49 @@
 		$breakpoint1: $breakpointTmp;
 	}
 
-	@#{$at} #{$name} (min-#{$property}: #{$breakpoint1}) {
-		@#{$at} #{$name} #{$reversed} (min-#{$property}: #{$breakpoint2}) {
+	// si on souhaite inverser, ce sont deux queries combinées (or)
+	@if $inverted == true {
+		@#{$at} #{$containerName} #{$reversed} (min-#{$axis}: #{$breakpoint1}), (min-#{$axis}: #{$breakpoint2}) {
 			@content;
 		}
 	}
+	// sinon, ce sont deux queries imbriquées (and)
+	@else {
+		@#{$at} #{$containerName} (min-#{$axis}: #{$breakpoint1}) {
+			@#{$at} #{$containerName} #{$reversed} (min-#{$axis}: #{$breakpoint2}) {
+				@content;
+			}
+		}
+	}
 }
 
-// les raccourcis vers les requêtes pour min/max/between
+// les raccourcis vers les requêtes pour min/max/inside/outside
 
-@mixin min($breakpoint, $property: 'width', $at: 'media') {
-	@include query($breakpoint, $property: $property, $at: $at) {
+@mixin min($breakpoint, $axis: 'width', $at: 'media') {
+	@include query($breakpoint, $axis: $axis, $at: $at) {
 		@content;
 	}
 }
 
-@mixin max($breakpoint, $property: 'width', $at: 'media') {
-	@include query($breakpoint, $property: $property, $max: true, $at: $at) {
+@mixin max($breakpoint, $axis: 'width', $at: 'media') {
+	@include query($breakpoint, $axis: $axis, $inverted: true, $at: $at) {
 		@content;
 	}
 }
 
-@mixin between($breakpoint1, $breakpoint2, $property: 'width', $at: 'media') {
-	@include queries($breakpoint1, $breakpoint2, $property: $property, $at: $at) {
+@mixin inside($breakpoint1, $breakpoint2, $axis: 'width', $at: 'media') {
+	@include queries($breakpoint1, $breakpoint2, $axis: $axis, $at: $at) {
 		@content;
 	}
 }
 
-// les raccourcis vers les requêtes pour minWidth/maxWidth/betweenWidths
+@mixin outside($breakpoint1, $breakpoint2, $axis: 'width', $at: 'media', $inverted: true) {
+	@include queries($breakpoint1, $breakpoint2, $axis: $axis, $at: $at) {
+		@content;
+	}
+}
+
+// les raccourcis vers les requêtes pour minWidth/maxWidth/insideWidths/outsideWidths
 
 @mixin minWidth($breakpoint, $at: 'media') {
 	@include query($breakpoint, $at: $at) {
@@ -91,18 +128,24 @@
 }
 
 @mixin maxWidth($breakpoint, $at: 'media') {
-	@include query($breakpoint, $max: true, $at: $at) {
+	@include query($breakpoint, $inverted: true, $at: $at) {
+		@content;
+	}
+}
+
+@mixin insideWidths($breakpoint1, $breakpoint2, $at: 'media') {
+	@include queries($breakpoint1, $breakpoint2, $at: $at) {
 		@content;
 	}
 }
 
-@mixin betweenWidths($breakpoint1, $breakpoint2, $at: 'media') {
-    @include queries($breakpoint1, $breakpoint2, $at: $at) {
-        @content;
-    }
+@mixin outsideWidths($breakpoint1, $breakpoint2, $at: 'media') {
+	@include queries($breakpoint1, $breakpoint2, $at: $at, $inverted: true) {
+		@content;
+	}
 }
 
-// les raccourcis vers les requêtes pour minHeight/maxHeight/betweenHeights
+// les raccourcis vers les requêtes pour minHeight/maxHeight/insideHeights/outsideHeights
 
 @mixin minHeight($breakpoint, $at: 'media') {
 	@include query($breakpoint, 'height', $at: $at) {
@@ -111,15 +154,21 @@
 }
 
 @mixin maxHeight($breakpoint, $at: 'media') {
-	@include query($breakpoint, $max: true, $property: 'height', $at: $at) {
+	@include query($breakpoint, $inverted: true, $axis: 'height', $at: $at) {
 		@content;
 	}
 }
 
-@mixin betweenHeights($breakpoint1, $breakpoint2, $at: 'media') {
-    @include queries($breakpoint1, $breakpoint2, $property: 'height', $at: $at) {
-        @content;
-    }
+@mixin insideHeights($breakpoint1, $breakpoint2, $at: 'media') {
+	@include queries($breakpoint1, $breakpoint2, $axis: 'height', $at: $at) {
+		@content;
+	}
+}
+
+@mixin outsideHeights($breakpoint1, $breakpoint2, $at: 'media') {
+	@include queries($breakpoint1, $breakpoint2, $axis: 'height', $at: $at, $inverted: true) {
+		@content;
+	}
 }
 
 // Touch detection
@@ -133,4 +182,4 @@
 	@media not (any-pointer: coarse) {
 		@content;
 	}
-}
+}

package/src/commons/vars.scss

@@ -63,6 +63,6 @@
 	--commons-container-padding: 3.5rem;
 
 	--commons-navSide-width: 0rem; // unit is required for calc
-	--commons-navSide-compact-width: 7.5rem;
+	--commons-navSide-compact-width: 7.5rem; // deprecated
 	--commons-navSide-mobile-toggle-height: 3.5rem;
 }

package/src/components/_sample/exports.scss

@@ -5,4 +5,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/_sample/index.scss

@@ -1,9 +1,12 @@
 // This file contains all the connections required to make the component functional.
 // The component’s mixins are requested, then assigned to classes.
-// To add the component to the list of all existing components, call it from `components/index` with `@forward 'sample';`.
-// Modifiers and states are optional and must be prefixed by `.mod-` and `.is-`.
+// To add the component to the list of all existing components, call it from `components/index` with `@use 'sample';`.
+// Modifiers and states are optional and must be prefixed by `.mod-`, `.rwd-` and `.is-`.
+// A responsive mixin and varible define the default behaviour but can be overridden. All this settings must be preserved.
 
 @use 'exports' as *;
+@use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/utils/container';
 
 .sample {
 	@include vars;
@@ -17,3 +20,37 @@
 		@include sampleStateA;
 	}
 }
+
+@mixin responsive(
+	$breakpoint: 'M',
+	$breakpoint2: null,
+	$inverted: false,
+	$at: 'container',
+	$containerName: 'sample',
+	$responsiveSelector: null,
+	$axis: 'width',
+	$selector: '.sample'
+) {
+	@if ($at == 'container') {
+		@include container.auto($containerName);
+	}
+
+	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
+		@include media.query(
+			$breakpoint: $breakpoint,
+			$breakpoint2: $breakpoint2,
+			$inverted: $inverted,
+			$at: $at,
+			$containerName: $containerName,
+			$axis: $axis
+		) {
+			@include sampleBehaviour;
+		}
+	}
+}
+
+$defaultResponsive: true !default;
+
+@if $defaultResponsive {
+	@include responsive;
+}

package/src/components/_sample/responsive.scss

@@ -0,0 +1,7 @@
+// All responsive behaviours are defined in this file through various mixins.
+// The file may be empty but must be present.
+// All property values modified by a responsive behaviour are modified through a CSS variable.
+
+@mixin sampleBehaviour {
+	--components-sample-property1: otherValue;
+}

package/src/components/actionIcon/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/avatar/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/box/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/breadcrumbs/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/button/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/buttonGroup/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/calendar/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/callout/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/calloutAccordion/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/calloutDisclosure/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/calloutFeedbackList/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/calloutPopover/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/card/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/checkbox/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/checkboxField/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/chip/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/clear/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/code/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/collapse/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/comment/component.scss

@@ -3,7 +3,6 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	container: comment / inline-size;
 	display: flex;
 	flex-direction: column;
 	gap: var(--pr-t-spacings-50);

package/src/components/comment/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';