@lucca-front/scss 19.3.0-rc.2 → 19.3.0-rc.4

package/package.json

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

package/src/commons/base.scss

@@ -23,10 +23,16 @@
 
 @mixin base($atRoot: namespace.$defaultAtRoot) {
 	@at-root ($atRoot) {
-		@include core.fontFace(config.$fontFamily, config.$fontWeights);
+		@if config.$fontFamily {
+			@include core.fontFace(config.$fontFamily, config.$fontWeights, config.$fontStyles);
+		}
 
 		@if config.$fontFamilyCursive {
-			@include core.fontFace(config.$fontFamilyCursive, config.$fontWeightsCursive);
+			@include core.fontFace(config.$fontFamilyCursive, config.$fontWeightsCursive, config.$fontStylesCursive);
+		}
+
+		@if config.$fontFamilyBrand {
+			@include core.fontFace(config.$fontFamilyBrand, config.$fontWeightsBrand, config.$fontStylesBrand);
 		}
 
 		*,
@@ -56,6 +62,7 @@
 
 		p {
 			margin: 0;
+
 			@if config.$deprecatedSpacings {
 				margin-block-end: var(--pr-t-spacings-150);
 			}
@@ -65,6 +72,7 @@
 		ol {
 			margin: 0;
 			padding-inline-start: var(--pr-t-spacings-400);
+
 			@if config.$deprecatedSpacings {
 				margin-block-end: var(--pr-t-spacings-150);
 			}
@@ -93,7 +101,7 @@
 
 		button {
 			&:focus-visible {
-				@include a11y.focusVisible();
+				@include a11y.focusVisible;
 			}
 		}
 

package/src/commons/config.scss

@@ -13,12 +13,22 @@ $fontWeights: (
 	'bold': 700,
 	'black': 800,
 ) !default;
+$fontStyles: ('normal') !default;
+
+$fontFamilyBrand: false !default;
+$fontWeightsBrand: (
+	'regular': 400,
+	'bold': 700,
+	'black': 800,
+) !default;
+$fontStylesBrand: ('normal', 'italic') !default;
 
 $fontFamilyCursive: false !default;
 $fontWeightsCursive: (
 	'regular': 400,
 	'bold': 700,
 ) !default;
+$fontStylesCursive: ('normal') !default;
 
 $product: 'brand' !default;
 $palettesShades: text, 0, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900; // text is deprecated
@@ -573,7 +583,7 @@ $loading: (
 
 $textLink: (
 	color: var(--palettes-product-700),
-	hover: var(--palettes-product-600),
+	hover: var(--palettes-product-800),
 	disabled: var(--palettes-neutral-500), // disabled token candidate
 );
 

package/src/commons/core.scss

@@ -6,10 +6,8 @@
 
 $contents: '100\\%', 'fit-content';
 $boxModel: 'margin', 'padding', 'border';
-$boxDirection:
-	'', 'top', 'bottom', 'left', 'right', 'inline', 'block', 'block-start', 'block-end', 'inline-start', 'inline-end'; // top, bottom, left and right are deprecated
-$corners:
-	'', 'top-left-', 'top-right-', 'bottom-left-', 'bottom-right-', 'start-start-', 'start-end-', 'end-start-', 'end-end-'; // top-left, top-right, bottom-left and bottom-right are deprecated
+$boxDirection: '', 'top', 'bottom', 'left', 'right', 'inline', 'block', 'block-start', 'block-end', 'inline-start', 'inline-end'; // top, bottom, left and right are deprecated
+$corners: '', 'top-left-', 'top-right-', 'bottom-left-', 'bottom-right-', 'start-start-', 'start-end-', 'end-start-', 'end-end-'; // top-left, top-right, bottom-left and bottom-right are deprecated
 $gaps: 'column-gap', 'row-gap', 'gap';
 $displays: 'block', 'flex', 'grid', 'inline', 'inline-flex', 'inline-block', 'inline-grid', 'contents', 'none';
 $direction: 'column', 'column-reverse', 'row', 'row-reverse';
@@ -127,16 +125,30 @@ $overflow: 'hidden', 'auto', 'visible', 'scroll';
 	}
 }
 
-@mixin fontFace($family, $weights, $path: '//cdn.lucca.fr/transverse/fonts', $style: normal) {
+@mixin fontFace($family, $weights, $styles, $path: '//cdn.lucca.fr/transverse/fonts') {
 	@each $keyword, $number in $weights {
-		@font-face {
-			font-family: '#{$family}';
-			src:
-				url('#{$path}/#{$family}/#{$keyword}.woff2') format('woff2'),
-				url('#{$path}/#{$family}/#{$keyword}.woff') format('woff');
-			font-weight: #{$number};
-			font-style: #{$style};
-			font-display: swap;
+		@each $style in $styles {
+			@if $style == 'normal' {
+				@font-face {
+					font-family: '#{$family}';
+					src:
+						url('#{$path}/#{$family}/#{$keyword}.woff2') format('woff2'),
+						url('#{$path}/#{$family}/#{$keyword}.woff') format('woff');
+					font-weight: #{$number};
+					font-style: #{$style};
+					font-display: swap;
+				}
+			} @else {
+				@font-face {
+					font-family: '#{$family}';
+					src:
+						url('#{$path}/#{$family}/#{$keyword}-#{$style}.woff2') format('woff2'),
+						url('#{$path}/#{$family}/#{$keyword}-#{$style}.woff') format('woff');
+					font-weight: #{$number};
+					font-style: #{$style};
+					font-display: swap;
+				}
+			}
 		}
 	}
 }

package/src/commons/utils/color.scss

@@ -2,10 +2,12 @@
 @use 'sass:math';
 @use '@lucca-front/scss/src/commons/config';
 
+// stylelint-disable-next-line scss/no-global-function-names -- This is a redefinition of a deprecated SCSS function.
 @function transparentize($color, $amount: 50%, $space: var(--commons-colorSpace, srgb)) {
 	@if math.unit($amount) != '%' {
 		$amount: $amount * 100%;
 	}
+
 	@return color-mix(in $space, $color $amount, transparent);
 }
 

package/src/commons/utils/index.scss

@@ -258,11 +258,11 @@
 .u-noSpinButtons {
 	&::-webkit-outer-spin-button,
 	&::-webkit-inner-spin-button {
-		-webkit-appearance: none !important;
+		appearance: none !important;
 	}
 
 	&[type='number'] {
-		-moz-appearance: textfield !important;
+		appearance: textfield !important;
 	}
 }
 
@@ -274,6 +274,10 @@
 	font-family: var(--commons-font-family-cursive) !important;
 }
 
+.u-fontFamilyBrand {
+	font-family: var(--commons-font-family-brand) !important;
+}
+
 .pr-u-focusVisible {
 	&:focus-visible {
 		@include a11y.focusVisible;

package/src/commons/utils/keyframe.scss

@@ -177,6 +177,7 @@
 		0% {
 			transform: rotate(0deg);
 		}
+
 		100% {
 			transform: rotate(360deg);
 		}

package/src/commons/utils/loading.scss

@@ -13,7 +13,6 @@
 		margin: auto;
 		position: absolute;
 		border-style: solid;
-
 		animation-name: rotate;
 		animation-duration: var(--commons-loading-speed);
 		animation-timing-function: linear;
@@ -40,6 +39,7 @@
 		0% {
 			background-position: 100% 0%;
 		}
+
 		100% {
 			background-position: -100% 0%;
 		}

package/src/commons/utils/media.scss

@@ -28,6 +28,7 @@
 		$breakpoint: pxToEm(map.get(config.$breakpoints, $breakpoint));
 	}
 
+	// stylelint-disable-next-line scss/at-rule-no-unknown
 	@#{$at} #{$name} #{$reversed} (min-#{$property}: #{$breakpoint}) {
 		@content;
 	}
@@ -55,11 +56,13 @@
 		$breakpoint1: $breakpointTmp;
 	}
 
+	// stylelint-disable scss/at-rule-no-unknown
 	@#{$at} #{$name} (min-#{$property}: #{$breakpoint1}) {
 		@#{$at} #{$name} #{$reversed} (min-#{$property}: #{$breakpoint2}) {
 			@content;
 		}
 	}
+	// stylelint-enable
 }
 
 // les raccourcis vers les requêtes pour min/max/between
@@ -123,6 +126,7 @@
 }
 
 @mixin pointer($query, $any: false, $reversed: false) {
+	// stylelint-disable-next-line scss/at-rule-no-unknown
 	@#{if($reversed, 'media not', 'media')} (#{if($any, 'any-', '')}pointer: #{$query}) {
 		@content;
 	}

package/src/commons/utils/reset.scss

@@ -37,7 +37,7 @@
 		display: table #{$suffix};
 	}
 
-	&:after {
+	&::after {
 		clear: both #{$suffix};
 	}
 }

package/src/commons/vars.scss

@@ -47,10 +47,18 @@
 	--commons-border-100: var(--palettes-neutral-100);
 	--commons-border-200: var(--palettes-neutral-200);
 
+	@if (config.$fontFamily) {
+		--commons-font-family: '#{config.$fontFamily}', Tahoma, sans-serif;
+	}
+
 	@if (config.$fontFamilyCursive) {
 		--commons-font-family-cursive: '#{config.$fontFamilyCursive}', cursive;
 	}
 
+	@if (config.$fontFamilyBrand) {
+		--commons-font-family-brand: '#{config.$fontFamilyBrand}', sans-serif;
+	}
+
 	// Deprecated
 	--commons-background-base: var(--palettes-neutral-25);
 	--commons-divider-color: var(--palettes-neutral-200);

package/src/components/_sample/component.scss

@@ -5,12 +5,12 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	property: value;
-	property: var(--components-sample-property1);
+	// property: value;
+	// property: var(--components-sample-property1);
 
 	@at-root ($atRoot) {
 		.sample-subComponent {
-			property: var(--components-sample-property2);
+			// property: var(--components-sample-property2);
 		}
 	}
 }

package/src/components/avatar/component.scss

@@ -60,7 +60,6 @@
 
 			display: flex;
 			text-decoration: none;
-			color: var(--palettes-neutral-800);
 			transition: transform var(--commons-animations-durations-fast);
 			transform: scale(var(--components-avatarWrapper-scale));
 			color: currentColor;

package/src/components/avatar/mods.scss

@@ -79,6 +79,7 @@
 
 		&::before {
 			@include icon.generate('people_person');
+
 			color: var(--palettes-neutral-600);
 			font-weight: 400;
 			font-size: var(--components-avatar-placeholder-size);

package/src/components/box/index.scss

@@ -19,3 +19,7 @@
 		@include toggle;
 	}
 }
+
+.box-arrow {
+	@include arrow;
+}

package/src/components/box/mods.scss

@@ -46,6 +46,11 @@
 @mixin withArrow {
 	--components-box-border-radius: var(--commons-borderRadius-M);
 	--components-box-padding: var(--pr-t-spacings-200);
+
+	.box-arrow {
+		--components-box-arrow-bottom: 100%;
+		--components-box-arrow-left: var(--pr-t-spacings-75);
+	}
 }
 
 @mixin arrowS {

package/src/components/button/component.scss

@@ -56,7 +56,7 @@
 
 	&:hover {
 		--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
-		--components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600));
+		--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800));
 	}
 
 	&:focus-visible {
@@ -64,7 +64,7 @@
 	}
 
 	&:active {
-		--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800));
+		--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900));
 	}
 
 	&:disabled {

package/src/components/calendar/component.scss

@@ -88,6 +88,7 @@
 			&::-webkit-scrollbar {
 				display: none;
 			}
+
 			&:focus-visible {
 				@include a11y.focusVisible;
 			}
@@ -228,6 +229,7 @@
 			&:disabled,
 			&[aria-disabled='true'] {
 				--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-500);
+
 				text-decoration: line-through;
 				cursor: default;
 			}

package/src/components/calendar/states.scss

@@ -82,6 +82,7 @@
 
 	&::before {
 		inset-inline-start: var(--pr-t-spacings-75);
+
 		--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: var(--commons-borderRadius-L) 0 0 var(--commons-borderRadius-L);
 	}
 }
@@ -91,6 +92,7 @@
 
 	&::before {
 		inset-inline-end: var(--pr-t-spacings-75);
+
 		--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: 0 var(--commons-borderRadius-L) var(--commons-borderRadius-L) 0;
 	}
 }
@@ -118,6 +120,7 @@
 
 	&::before {
 		inset-inline-end: 0;
+
 		--components-calendar-table-body-row-cellSelectedBeforeContent: '';
 		--components-calendar-table-body-row-cellSelectedBeforeBorderRadius: var(--commons-borderRadius-L) 0 0 var(--commons-borderRadius-L);
 	}
@@ -161,7 +164,6 @@
 }
 
 @mixin overflow {
-	.calendar-table-body-row-cell-action,
 	.calendar-table-body-row-cell-action {
 		--components-calendar-table-body-row-cell-actionColor: var(--palettes-neutral-600);
 	}

package/src/components/callout/component.scss

@@ -24,7 +24,7 @@
 	a,
 	.link {
 		--commons-text-link-color: var(--palettes-neutral-800);
-		--commons-text-link-hover: var(--palettes-neutral-700);
+		--commons-text-link-hover: var(--palettes-neutral-900);
 	}
 
 	@at-root ($atRoot) {

package/src/components/calloutAccordion/component.scss

@@ -14,7 +14,7 @@
 	a,
 	.link {
 		--commons-text-link-color: var(--palettes-neutral-800);
-		--commons-text-link-hover: var(--palettes-neutral-700);
+		--commons-text-link-hover: var(--palettes-neutral-900);
 	}
 
 	@at-root ($atRoot) {

package/src/components/calloutAccordion/mods.scss

@@ -20,10 +20,6 @@
 		@include icon.S;
 	}
 
-	.calloutAccordion-details {
-		margin-inline-start: 2.75rem;
-	}
-
 	.calloutFeedbackList {
 		@include calloutFeedbackList.S;
 	}

package/src/components/calloutDisclosure/component.scss

@@ -12,7 +12,7 @@
 	a,
 	.link {
 		--commons-text-link-color: var(--palettes-neutral-800);
-		--commons-text-link-hover: var(--palettes-neutral-700);
+		--commons-text-link-hover: var(--palettes-neutral-900);
 	}
 
 	@at-root ($atRoot) {

package/src/components/calloutPopover/component.scss

@@ -19,7 +19,7 @@
 	}
 
 	&:focus-visible {
-		@include a11y.focusVisible();
+		@include a11y.focusVisible;
 	}
 
 	@at-root ($atRoot) {
@@ -47,6 +47,7 @@
 
 		.calloutPopover-overlay-head-icon {
 			@include icon.M;
+
 			color: var(--palettes-700, var(--palettes-neutral-700));
 		}
 

package/src/components/card/mods.scss

@@ -16,7 +16,7 @@
 	}
 
 	&:focus-visible {
-		@include a11y.focusVisible();
+		@include a11y.focusVisible;
 	}
 }
 

package/src/components/checkbox/mods.scss

@@ -6,6 +6,7 @@
 
 @mixin S {
 	--components-checkbox-input-size: 1rem;
+
 	line-height: var(--sizes-S-lineHeight);
 
 	.checkbox-label {

package/src/components/checkboxField/component.scss

@@ -6,7 +6,6 @@
 	position: relative;
 	inline-size: fit-content;
 	block-size: fit-content;
-
 	display: grid;
 	grid-template-areas: 'checkbox';
 	grid-template-columns: var(--component-checkboxField-size);
@@ -56,6 +55,8 @@
 				font-weight: 400;
 				font-size: var(--component-checkboxField-icon-fontSize);
 				direction: ltr;
+
+				// stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- This font is for icons and should not have fallback.
 				font-family: 'Lucca icons';
 				font-feature-settings: 'liga';
 				font-style: normal;

package/src/components/checkboxField/states.scss

@@ -31,13 +31,6 @@
 	}
 }
 
-@mixin checkedHover {
-	~ .checkboxField-icon {
-		background-color: var(--palettes-product-600);
-		border-color: var(--palettes-product-600);
-	}
-}
-
 @mixin checkedActive {
 	~ .checkboxField-icon {
 		background-color: var(--palettes-product-800);
@@ -84,7 +77,7 @@
 @mixin focusVisible {
 	~ .checkboxField-icon {
 		&::after {
-			@include a11y.focusVisible();
+			@include a11y.focusVisible;
 		}
 	}
 }

package/src/components/clear/component.scss

@@ -46,7 +46,7 @@
 		--components-clear-background: var(--palettes-neutral-800);
 	}
 
-	//to prevent breaking change. lucca-icon is no longer needed.
+	// to prevent breaking change. lucca-icon is no longer needed.
 	.lucca-icon {
 		display: none;
 	}

package/src/components/comment/component.scss

@@ -78,6 +78,8 @@
 		.comment-content-text {
 			margin-block-end: 0;
 			overflow-wrap: break-word;
+			font-size: var(--components-comment-text-fontSize);
+			line-height: var(--components-comment-text-lineHeight);
 		}
 
 		// .comment-content-textContainer is deprecated
@@ -93,11 +95,6 @@
 				margin: 0;
 			}
 		}
-
-		.comment-content-text {
-			font-size: var(--components-comment-text-fontSize);
-			line-height: var(--components-comment-text-lineHeight);
-		}
 	}
 }
 

package/src/components/dataTable/mods.scss

@@ -87,13 +87,6 @@
 	text-align: end;
 	white-space: nowrap;
 
-	&:is(.dataTable-head-row-cell) {
-		.button {
-			position: relative;
-			inset-block-end: var(--pr-t-spacings-50);
-		}
-	}
-
 	.button {
 		@include button.S;
 		@include button.onlyIcon;

package/src/components/dataTableSticked/mods.scss

@@ -110,6 +110,18 @@
 
 	:is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
 		&.mod-stickyColumn {
+			position: sticky;
+
+			&:first-child {
+				inset-inline-start: 0;
+			}
+
+			&:last-child {
+				inset-inline-end: 0;
+
+				--components-dataTable-cell-shadow: 0 1px inset var(--commons-border-200), 1px 0 var(--palettes-neutral-0); // white shadow is for Chrome
+			}
+
 			&:has(~ :is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell):not(.mod-stickyColumn)) {
 				transform: translateX(-1px);
 
@@ -139,21 +151,6 @@
 			}
 		}
 	}
-
-	:is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
-		&.mod-stickyColumn {
-			position: sticky;
-
-			&:first-child {
-				inset-inline-start: 0;
-			}
-
-			&:last-child {
-				inset-inline-end: 0;
-				--components-dataTable-cell-shadow: 0 1px inset var(--commons-border-200), 1px 0 var(--palettes-neutral-0); // white shadow is for Chrome
-			}
-		}
-	}
 }
 
 @mixin stickyColumnBorder {

package/src/components/dateRangeField/vars.scss

@@ -6,7 +6,7 @@
 
 	--components-dateRangeField-maxWidthDayS: 16.5rem;
 	--components-dateRangeField-maxWidthMonthS: 13.5rem; // 12.75rem;
-	--components-dateRangeField-maxWidthYearS: 10.25rem; //9.75rem;
+	--components-dateRangeField-maxWidthYearS: 10.25rem; // 9.75rem;
 
 	--components-dateRangeField-content-inlineStart: calc(var(--pr-t-spacings-100) + var(--pr-t-spacings-25));
 	--components-dateRangeField-content-width: calc(50% + var(--pr-t-spacings-300) + var(--pr-t-spacings-50));

package/src/components/dialog/mods.scss

@@ -41,7 +41,6 @@
 	--components-dialog-maxWidth: none;
 	--components-dialog-inset: auto 0 0 0;
 	--components-dialog-borderRadius: var(--commons-borderRadius-L) var(--commons-borderRadius-L) 0 0;
-
 	--components-dialog-width: 100%;
 	--components-dialog-height: fit-content;
 

package/src/components/divider/component.scss

@@ -38,6 +38,8 @@
 
 		.lucca-icon {
 			color: var(--palettes-neutral-600);
+			position: relative;
+			inset-block-end: var(--components-divider-iconBottom);
 		}
 
 		&:not(.mod-vertical) {
@@ -47,11 +49,6 @@
 				min-inline-size: var(--components-divider-minSize);
 			}
 		}
-
-		.lucca-icon {
-			position: relative;
-			inset-block-end: var(--components-divider-iconBottom);
-		}
 	}
 
 	.button {

package/src/components/dropdown/component.scss

@@ -56,6 +56,7 @@
 
 			.lucca-icon {
 				@include icon.S;
+
 				margin-block-start: var(--pr-t-spacings-25);
 			}
 
@@ -74,7 +75,7 @@
 			}
 
 			&:focus-visible {
-				@include a11y.focusVisible();
+				@include a11y.focusVisible;
 			}
 		}
 	}

package/src/components/emptyState/component.scss

@@ -48,6 +48,7 @@
 			@include title.h3;
 
 			margin-block-end: var(--pr-t-spacings-50);
+
 			@if config.$deprecatedSpacings {
 				margin-block-end: 0;
 			}