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

package/src/components/gauge/component.scss

@@ -1,24 +1,81 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	border-radius: var(--pr-t-border-radius-full);
-	block-size: var(--components-gauge-height);
-	overflow: hidden;
-	position: relative;
+	border-radius: var(--components-gauge-borderRadius);
+	block-size: var(--components-gauge-blockSize);
+	inline-size: var(--components-gauge-inlineSize);
 	background-color: var(--components-gauge-background);
+	display: block;
+	color: var(--components-gauge-color);
+
+	&::before {
+		content: '';
+		display: block;
+
+		@extend %gaugeBar;
+	}
+
+	&:has(.gauge-bar) {
+		&::before {
+			content: none;
+		}
+	}
 
 	@at-root ($atRoot) {
 		.gauge-bar {
-			color: var(--palettes-700, var(--palettes-product-700));
-			border-block-end-width: var(--components-gauge-height);
-			transition-duration: var(--commons-animations-durations-standard);
-			transition-property: border-color, width, height;
-			inset-block-start: 0;
-			inset-inline-start: 0;
-			position: absolute;
-			border-block-end-style: solid;
-			border-color: currentColor;
-			border-radius: var(--pr-t-border-radius-full);
+			@extend %gaugeBar;
 		}
+
+		.gauge-circleBackground {
+			fill: transparent;
+			stroke-width: var(--components-gauge-circle-strokeWidth);
+			stroke: var(--components-gauge-circle-background);
+		}
+
+		.gauge-circleBar {
+			fill: transparent;
+			stroke-width: var(--components-gauge-circle-strokeWidth);
+			stroke-linecap: round;
+			stroke-dashoffset: 0;
+			transform: rotate(-1/4 * 1turn);
+			transform-origin: 50% 50%;
+			stroke-dasharray: calc(var(--components-gauge-circleP) / 100 * var(--components-gauge-value)), 9999;
+			stroke: currentColor;
+			animation-name: var(--components-gauge-animationName);
+			animation-duration: var(--components-gauge-animationDuration);
+			animation-timing-function: var(--components-gauge-animationTimingFunction);
+
+			@media (prefers-reduced-motion: reduce) {
+				--components-gauge-animationDuration: var(--commons-animations-durations-fast);
+				--components-gauge-animationTimingFunction: ease;
+			}
+		}
+
+		@keyframes gauge-fill {
+			from {
+				stroke-dasharray: 0, 9999;
+				inline-size: 0;
+			}
+		}
+	}
+}
+
+%gaugeBar {
+	color: currentColor;
+	transition-duration: var(--commons-animations-durations-standard);
+	transition-property: background-color, inline-size, block-size;
+	block-size: var(--components-gauge-blockSize);
+	inline-size: var(--components-gauge-value);
+	background-color: currentColor;
+	border-radius: var(--pr-t-border-radius-full);
+	min-inline-size: var(--components-gauge-before-minInlineSize);
+	min-block-size: var(--components-gauge-before-minInlineSize);
+	animation-name: var(--components-gauge-animationName);
+	animation-duration: var(--components-gauge-animationDuration);
+	animation-timing-function: var(--components-gauge-animationTimingFunction);
+
+	@media (prefers-reduced-motion: reduce) {
+		--components-gauge-animationDuration: var(--commons-animations-durations-fast);
+		--components-gauge-animationTimingFunction: ease;
 	}
 }

package/src/components/gauge/index.scss

@@ -1,14 +1,39 @@
 @use 'exports' as *;
 
 .gauge {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+		&.mod-thin {
+			@include thin;
+		}
+
+		&:has(.gauge-circleBackground) {
+			@include circular;
+		}
 
-	&.mod-thin {
-		@include thin;
+		// .mod-vertical is deprecated
+		&.mod-vertical {
+			@include vertical;
+
+			&.mod-thin {
+				@include verticalThin;
+			}
+		}
 	}
 
-	&.mod-vertical {
-		@include vertical;
+	@layer states {
+		&.is-zero,
+		&:not([style]),
+		&[style*='--components-gauge-value: 0%'] {
+			@include zero;
+		}
+
+		&.is-animated {
+			@include animated;
+		}
 	}
 }

package/src/components/gauge/mods.scss

@@ -1,14 +1,28 @@
 @mixin thin {
-	--components-gauge-height: var(--pr-t-spacings-50);
+	--components-gauge-blockSize: var(--pr-t-spacings-50);
+	--components-gauge-circle-strokeWidth: var(--pr-t-spacings-50);
 }
 
+// @mixin vertical is deprecated
 @mixin vertical {
-	inline-size: var(--components-gauge-height);
-	block-size: 100%;
+	--components-gauge-blockSize: 100%;
+	--components-gauge-inlineSize: var(--components-gauge-height, var(--pr-t-spacings-100));
+	--components-gauge-before-minInlineSize: var(--components-gauge-inlineSize);
 
-	.gauge-bar {
-		border-inline-start-width: var(--components-gauge-height);
-		border-inline-start-style: solid;
-		border-block-end-width: 0;
+	.gauge-bar,
+	&::before {
+		inline-size: 100%;
+		block-size: var(--components-gauge-value);
 	}
 }
+
+// @mixin verticalThin is deprecated
+@mixin verticalThin {
+	--components-gauge-inlineSize: var(--pr-t-spacings-50);
+}
+
+@mixin circular {
+	--components-gauge-borderRadius: 0;
+	--components-gauge-blockSize: auto;
+	--components-gauge-background: transparent;
+}

package/src/components/gauge/states.scss

@@ -0,0 +1,8 @@
+@mixin zero {
+	--components-gauge-before-minInlineSize: 0;
+	--components-gauge-color: var(--components-gauge-background);
+}
+
+@mixin animated {
+	--components-gauge-animationName: gauge-fill;
+}

package/src/components/gauge/vars.scss

@@ -1,4 +1,19 @@
+// --components-gauge-height is deprecated
 @mixin vars {
-	--components-gauge-height: 0.5rem;
+	--components-gauge-blockSize: var(--components-gauge-height, var(--pr-t-spacings-100));
+	--components-gauge-inlineSize: auto;
 	--components-gauge-background: var(--palettes-neutral-100);
+	--components-gauge-before-minInlineSize: var(--components-gauge-blockSize);
+	--components-gauge-value: 0;
+	--components-gauge-borderRadius: var(--pr-t-border-radius-full);
+	--components-gauge-color:	var(--palettes-700, var(--palettes-product-700));
+	--components-gauge-animationName: name;
+	--components-gauge-animationDuration: var(--commons-animations-durations-slow);
+	--components-gauge-animationTimingFunction: cubic-bezier(.9,.9,.9,1.1);
+
+	--components-gauge-circle-background: var(--palettes-neutral-100);
+	--components-gauge-circle-strokeWidth: var(--pr-t-spacings-100);
+	--components-gauge-circleR: 76px;
+	--components-gauge-circleP: calc(2 * pi * var(--components-gauge-circleR));
+
 }

package/src/components/grid/index.scss

@@ -4,36 +4,40 @@
 @use 'exports' as *;
 
 .grid {
-	@include vars;
-	@include component;
-
-	&.mod-auto {
-		@include auto;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	@each $breakpoint, $value in config.$breakpoints {
-		&.mod-autoAtMediaMin#{$breakpoint} {
-			@include autoAt;
+	@layer mods {
+		&.mod-auto {
+			@include auto;
+		}
+
+		@each $breakpoint, $value in config.$breakpoints {
+			&.mod-autoAtMediaMin#{$breakpoint} {
+				@include autoAt;
 
-			@include media.min($breakpoint) {
-				@include auto;
+				@include media.min($breakpoint) {
+					@include auto;
+				}
 			}
-		}
 
-		&.mod-autoAtContainerMin#{$breakpoint} {
-			@include autoAt;
+			&.mod-autoAtContainerMin#{$breakpoint} {
+				@include autoAt;
 
-			@include container.min($breakpoint, $name: grid) {
-				@include auto;
+				@include container.min($breakpoint, $name: grid) {
+					@include auto;
+				}
 			}
 		}
-	}
 
-	&.mod-form {
-		@include form;
-	}
+		&.mod-form {
+			@include form;
+		}
 
-	&.mod-dense {
-		@include dense;
+		&.mod-dense {
+			@include dense;
+		}
 	}
 }

package/src/components/header/index.scss

@@ -1,23 +1,29 @@
 @use 'exports' as *;
 
 .header {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-sticky {
-		@include sticky;
+	@layer mods {
+		&.mod-sticky {
+			@include sticky;
 
-		.navSide ~ .main-content &,
-		.mod-withMenu .main-content & {
-			@include left;
+			.navSide ~ .main-content &,
+			.mod-withMenu .main-content & {
+				@include left;
+			}
 		}
-	}
 
-	&.mod-nav {
-		@include nav;
+		&.mod-nav {
+			@include nav;
+		}
 	}
 
-	&:is(.is-loading, .loading) {
-		@include loading;
+	@layer states {
+		&:is(.is-loading, .loading) {
+			@include loading;
+		}
 	}
 }

package/src/components/highlightData/index.scss

@@ -1,38 +1,42 @@
 @use 'exports' as *;
 
 .highlightData {
-	@include vars;
-	@include component;
-
-	&.mod-light {
-		@include light;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-dark {
-		@include dark;
-	}
+	@layer mods {
+		&.mod-light {
+			@include light;
+		}
 
-	&.mod-valueFirst {
-		@include valueFirst;
-	}
+		&.mod-dark {
+			@include dark;
+		}
 
-	&.mod-S {
-		@include S;
-	}
+		&.mod-valueFirst {
+			@include valueFirst;
+		}
 
-	&.mod-XS {
-		@include XS;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-nested {
-		@include nested;
-	}
+		&.mod-XS {
+			@include XS;
+		}
 
-	&:has(.highlightData-illustrations) {
-		@include illustrations;
+		&.mod-nested {
+			@include nested;
+		}
 
-		&.mod-valueFirst {
-			@include valueFirstIllustrations;
+		&:has(.highlightData-illustrations) {
+			@include illustrations;
+
+			&.mod-valueFirst {
+				@include valueFirstIllustrations;
+			}
 		}
 	}
 }

package/src/components/horizontalNavigation/index.scss

@@ -3,35 +3,39 @@
 // .menu is deprecated
 .horizontalNavigation,
 .menu {
-	@include vars;
-	@include component;
-
-	&.mod-header {
-		@include header;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-S {
-		@include S;
-	}
+	@layer mods {
+		&.mod-header {
+			@include header;
+		}
 
-	&.mod-noBorder {
-		@include noBorder;
-	}
+		&.mod-S {
+			@include S;
+		}
+
+		&.mod-noBorder {
+			@include noBorder;
+		}
 
-	&.mod-vertical {
-		@include vertical;
+		&.mod-vertical {
+			@include vertical;
 
-		// .menu-list-item-action is deprecated
-		.horizontalNavigation-list-item-action,
-		.menu-list-item-action {
-			&[aria-current='page'],
-			&.is-active {
-				@include activeVertical;
+			// .menu-list-item-action is deprecated
+			.horizontalNavigation-list-item-action,
+			.menu-list-item-action {
+				&[aria-current='page'],
+				&.is-active {
+					@include activeVertical;
+				}
 			}
-		}
 
-		&.mod-S {
-			@include verticalS;
+			&.mod-S {
+				@include verticalS;
+			}
 		}
 	}
 }
@@ -39,20 +43,22 @@
 // .menu-link is deprecated
 // .menu-list-item-action is deprecated
 .horizontalNavigation-list-item-action,
-.menu-list-item-action,
-.menu-link {
-	// .active is deprecated
-	&[aria-current='page'],
-	&.is-active,
-	&.active {
-		@include active;
-	}
+.menu-link,
+.menu-list-item-action {
+	@layer states {
+		// .active is deprecated
+		&[aria-current='page'],
+		&.is-active,
+		&.active {
+			@include active;
+		}
 
-	// .disabled is deprecated
-	// [disabled] is deprecated
-	&.is-disabled,
-	&.disabled,
-	&[disabled] {
-		@include disabled;
+		// .disabled is deprecated
+		// [disabled] is deprecated
+		&.is-disabled,
+		&.disabled,
+		&[disabled] {
+			@include disabled;
+		}
 	}
 }

package/src/components/index.scss

@@ -1,61 +1,62 @@
-@forward 'field'; //
-@forward 'box'; // 1 Ko
-@forward 'tag'; // 1 Ko
-@forward 'main'; // 1 Ko
-@forward 'code'; // 1 Ko
-@forward 'link'; // 1 Ko
-@forward 'chip'; // 1 Ko
-@forward 'title'; // 1 Ko
-@forward 'label'; // 1 Ko
-@forward 'filterBarDeprecated'; // 1 Ko
-@forward 'filters'; // 1 Ko
-@forward 'divider'; // 1 Ko
-@forward 'section'; // 1 Ko
-@forward 'collapse'; // 1 Ko
-@forward 'container'; // 1 Ko
-@forward 'errorPage'; // 1 Ko
-@forward 'pageHeader'; // 1 Ko
-@forward 'pagination'; // 1 Ko
-@forward 'titleSection'; // 1 Ko
-@forward 'contentSection'; // 1 Ko
-@forward 'tableOfContent'; // 1 Ko
-@forward 'list'; // 2 Ko
-@forward 'card'; // 2 Ko
-@forward 'gauge'; // 2 Ko
-@forward 'callout'; // 2 Ko
-@forward 'loading'; // 2 Ko
-@forward 'progress'; // 2 Ko
-@forward 'breadcrumbs'; // 2 Ko
-@forward 'buttonGroup'; // 2 Ko
-@forward 'header'; // 3 Ko
-@forward 'horizontalNavigation'; // 4 Ko
-@forward 'radio'; // 4 Ko
-@forward 'radioField'; // new component for radio
-@forward 'switch'; // 4 Ko
-@forward 'switchField'; // new component for switch
-@forward 'file'; // 5 Ko
-@forward 'layout'; // 5 Ko
-@forward 'radioButtons'; // 5 Ko
-@forward 'table'; // 7 Ko
-@forward 'checkbox'; // 7 Ko
-@forward 'checkboxField'; // new component for checkbox
-@forward 'timeline'; // 10 Ko
-@forward 'button'; // 12 Ko
-@forward 'textfields'; // 13 Ko
+@forward 'field';
+
+@forward 'box';
+@forward 'tag';
+@forward 'main';
+@forward 'code';
+@forward 'link';
+@forward 'chip';
+@forward 'title';
+@forward 'label';
+@forward 'filters';
+@forward 'divider';
+@forward 'section';
+@forward 'collapse';
+@forward 'container';
+@forward 'errorPage';
+@forward 'pageHeader';
+@forward 'pagination';
+@forward 'titleSection';
+@forward 'contentSection';
+@forward 'tableOfContent';
+@forward 'list';
+@forward 'card';
+@forward 'gauge';
+@forward 'callout';
+@forward 'loading';
+@forward 'progress';
+@forward 'breadcrumbs';
+@forward 'buttonGroup';
+@forward 'header';
+@forward 'horizontalNavigation';
+
+@forward 'textfields';
+@forward 'checkbox';
+@forward 'switch';
+@forward 'radio';
+
 @forward 'textField'; // new component for checkbox
-@forward 'navside'; // 15 Ko
-@forward 'form'; // 25 Ko
-@forward 'tableFixed'; // 33 Ko
+@forward 'checkboxField'; // new component for checkbox
+@forward 'switchField'; // new component for switch
+@forward 'radioField'; // new component for radio
+
+@forward 'file';
+@forward 'layout';
+@forward 'radioButtons';
+@forward 'table';
+@forward 'timeline';
+@forward 'button';
+@forward 'navside';
+@forward 'form';
+@forward 'tableFixed';
 @forward 'segmentedControl';
 @forward 'calendar';
 @forward 'skipLinks';
 @forward 'fancyBox';
 @forward 'inputFramed';
-
-// caution: the two components cannot be loaded at the same time
 @forward 'grid';
-@forward 'tableSticked'; // 8 Ko
-@forward 'timepicker'; //
+@forward 'tableSticked';
+@forward 'timepicker';
 @forward 'notchBox';
 @forward 'statusBadge';
 @forward 'mobileHeader';
@@ -84,7 +85,7 @@
 @forward 'userPopover';
 @forward 'scrollBox';
 @forward 'comment';
-@forward 'toast'; // 5 Ko
+@forward 'toast';
 @forward 'popover';
 @forward 'userTile';
 @forward 'mobilePush';
@@ -107,7 +108,9 @@
 @forward 'appLayout';
 @forward 'mainLayout';
 @forward 'listboxOption';
+@forward 'suggestion';
+
+@forward 'filterBarDeprecated';
+@forward 'tableFixedDeprecated';
+@forward 'tableStickedDeprecated';
 
-// Deprecated CSS components
-// @forward 'tableFixedDeprecated'; // 33 Ko
-// @forward 'tableStickedDeprecated'; // 67 Ko