@lucca-front/scss 21.2.3-rc.4 → 21.3.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.2.3-rc.4",
+  "version": "21.3.0-rc.1",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,7 +23,7 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "21.2.3-rc.4",
-    "@lucca/prisme": "21.2.3-rc.4"
+    "@lucca-front/icons": "21.3.0-rc.1",
+    "@lucca/prisme": "21.3.0-rc.1"
   }
 }

package/src/commons/config.scss

@@ -109,10 +109,24 @@ $borderRadiusTokens: (
 	'input': var(--pr-t-border-radius-default),
 );
 
+$colorAI: orchid, brand;
+
+$paletteAI: (
+	angle: 'to bottom right',
+	color1stop: 0%,
+	color2stop: 80%,
+);
+
+$tokenAI: (
+	border: var(--palettes-ai-300),
+	background: var(--palettes-ai-50),
+	icon: var(--palettes-ai-600),
+);
+
 $product: 'brand' !default;
 $palettesShades: text, 0, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900; // text is deprecated
 $palettesStates: 'critical', 'error', 'warning', 'success', 'successContrasted', 'warningContrasted';
-$palettesDefault: 'brand', 'brandContrasted', 'neutral', 'navigation', 'AI';
+$palettesDefault: 'brand', 'brandContrasted', 'neutral', 'navigation', 'orchid';
 $palettesProduct: 'product';
 $palettesOtherProduct: () !default;
 $palettesDecorative: 'kiwi', 'cucumber', 'mint', 'lagoon', 'blueberry', 'lavender', 'watermelon', 'pumpkin' !default;
@@ -149,9 +163,17 @@ $fieldsWidth: 20, 30, 40, 50, 60 !default;
 
 // Palettes
 
-$ai: (
-	500: #bc6fdd,
+$orchid: (
+	50: #f9ebff,
+	100: #f3d6ff,
+	200: #edc2ff,
+	300: #de9ff9,
+	400: #cc7ded,
+	500: #b95ae2,
 	600: #a440cf,
+	700: #8133a3,
+	800: #680094,
+	900: #4c006b,
 );
 
 $brand: (
@@ -559,7 +581,6 @@ $productsInterpolation: (
 );
 
 $palettesInterpolation: (
-	'AI': $ai,
 	'lucca': $brand,
 	'brand': $brand,
 	'brandContrasted': $brandContrasted,
@@ -569,6 +590,7 @@ $palettesInterpolation: (
 	'secondary': map.get($productsInterpolation, $product),
 	'product': map.get($productsInterpolation, $product),
 	'navigation': $navigation,
+	'orchid': $orchid,
 	'success': $success,
 	'successContrasted': $successContrasted,
 	'error': $critical,

package/src/commons/utils/color.scss

@@ -31,14 +31,14 @@
 	@include core.rosetta('--palettes-warning', '--palettes-warningContrasted', config.$palettesShades);
 }
 
-@mixin borderGradient($angle: 0, $color1: var(--palettes-neutral-0) , $color2:  var(--palettes-neutral-900), $radius: var(--pr-t-border-radius-default), $width: var(--commons-divider-width)) {
+@mixin borderGradient($gradient: linear-gradient(to bottom right, var(--palettes-neutral-0), var(--palettes-neutral-900)), $radius: var(--pr-t-border-radius-default), $width: var(--commons-divider-width)) {
 	&::before {
 		content: '';
 		pointer-events: none;
 		position: absolute;
 		inset: calc(#{$width} * -1);
 		padding: #{$width};
-		background-image: conic-gradient(from #{$angle}, #{$color1}, #{$color2}, #{$color1});
+		background-image: #{$gradient};
 		border-radius: calc(#{$radius} + #{$width});
 		mask: linear-gradient(var(--palettes-neutral-0)) content-box, linear-gradient(var(--palettes-neutral-0));
 		mask-composite: exclude;

package/src/commons/vars.scss

@@ -82,6 +82,20 @@
 	@include core.cssvars('colors', config.$colors, '-color');
 	@include core.cssvars('colors', config.$colorsRgb, '-rgb');
 
+	@include core.cssvars('palettes-ai', config.$paletteAI);
+	@include core.cssvars('pr-t-color', config.$tokenAI, '-ai');
+
+	@each $shade in config.$palettesShades {
+		@if $shade != text and $shade != 0 and $shade != 25 {
+			--palettes-ai-#{$shade}:
+				linear-gradient(
+					var(--palettes-ai-angle),
+					var(#{'--palettes-'}#{list.nth(config.$colorAI, 1)}-#{$shade}) var(--palettes-ai-color1stop),
+					var(#{'--palettes-'}#{list.nth(config.$colorAI, 2)}-#{max($shade - 100, 50)}) var(--palettes-ai-color2stop)
+				);
+		}
+	}
+
 	--commons-banner-height: 50px;
 	--commons-divider-width: 1px;
 	--commons-divider-style: solid;

package/src/components/avatar/index.scss

@@ -36,10 +36,38 @@
 		&.mod-placeholder {
 			@include placeholder;
 		}
-	}
 
-	&.mod-AI {
-		@include AI;
+		&.mod-AI {
+			@include AI;
+		}
+
+		&.mod-softRounded {
+			&.mod-XS {
+				@include softRoundedXS;
+			}
+
+			&.mod-S {
+				@include softRoundedS;
+			}
+
+			@include softRounded;
+
+			&.mod-L {
+				@include softRoundedL;
+			}
+
+			&.mod-XL {
+				@include softRoundedXL;
+			}
+
+			&.mod-XXL {
+				@include softRoundedXXL;
+			}
+
+			&.mod-XXXL {
+				@include softRoundedXXXL;
+			}
+		}
 	}
 }
 

package/src/components/avatar/mods.scss

@@ -102,3 +102,31 @@
 		}
 	}
 }
+
+@mixin softRoundedXXXL {
+	--components-avatar-borderRadius: var(--pr-t-border-radius-400);
+}
+
+@mixin softRoundedXXL {
+	--components-avatar-borderRadius: var(--pr-t-border-radius-300);
+}
+
+@mixin softRoundedXL {
+	--components-avatar-borderRadius: var(--pr-t-border-radius-300);
+}
+
+@mixin softRoundedL {
+	--components-avatar-borderRadius: var(--pr-t-border-radius-200);
+}
+
+@mixin softRounded {
+	--components-avatar-borderRadius: var(--pr-t-border-radius-200);
+}
+
+@mixin softRoundedS {
+	--components-avatar-borderRadius: var(--pr-t-border-radius-150);
+}
+
+@mixin softRoundedXS {
+	--components-avatar-borderRadius: var(--pr-t-border-radius-100);
+}

package/src/components/button/mods.scss

@@ -280,10 +280,12 @@
 	@include outlined;
 
 	&:not(:disabled) {
-		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500));
+		@include color.borderGradient($gradient: var(--pr-t-color-border-ai));
 
-		&:not(.mod-invert) .lucca-icon {
-			@include icons.AI;
+		&:not(.mod-invert) {
+			.lucca-icon {
+				@include icons.AI;
+			}
 		}
 	}
 }
@@ -294,9 +296,9 @@
 
 	background-image:
 		linear-gradient(
-			225deg,
-			color-mix(in srgb, var(--palettes-AI-500) var(--components-button-AI-background-opacity), transparent),
-			color-mix(in srgb, var(--palettes-brand-400) var(--components-button-AI-background-opacity), transparent)
+			var(--palettes-ai-angle),
+			color-mix(in srgb, var(--palettes-orchid-300) var(--components-button-AI-background-opacity), transparent),
+			color-mix(in srgb, var(--palettes-brand-200) var(--components-button-AI-background-opacity), transparent)
 		);
 
 	&:hover,

package/src/components/callout/mods.scss

@@ -34,7 +34,7 @@
 	--components-callout-boxShadow: var(--pr-t-elevation-shadow-button);
 	--components-callout-backgroundColor: var(--pr-t-elevation-surface-raised);
 
-	@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500));
+	@include color.borderGradient($gradient: var(--pr-t-color-border-ai));
 
 	.callout-icon {
 		.lucca-icon {

package/src/components/code/component.scss

@@ -9,4 +9,5 @@
 	padding-block: 0;
 	padding-inline: 0.3rem;
 	tab-size: 2;
+	overflow-wrap: anywhere;
 }

package/src/components/comment/component.scss

@@ -75,7 +75,7 @@
 
 		.comment-content-text {
 			margin-block-end: 0;
-			overflow-wrap: break-word;
+			overflow-wrap: anywhere;
 			font: var(--components-comment-text-font);
 		}
 

package/src/components/dataTable/component.scss

@@ -92,11 +92,16 @@
 
 			&:first-child {
 				inline-size: var(--components-dataTable-cellFirst-width);
+				inset-inline-start: 0;
 
 				.checkboxField {
 					--component-checkboxField-top: 0;
 				}
 			}
+
+			&:last-child {
+				inset-inline-end: 0;
+			}
 		}
 
 		.dataTable-body-row-cell,
@@ -131,7 +136,7 @@
 
 		.dataTable-body-row-cell-expand-button.button {
 			vertical-align: top;
-			margin-left: calc(var(--pr-t-spacings-25) * -1);
+			margin-inline-start: calc(var(--pr-t-spacings-25) * -1);
 
 			.lucca-icon {
 				transform: rotate(var(--components-dataTable-expand-rotation));

package/src/components/dialog/component.scss

@@ -108,7 +108,7 @@
 		}
 
 		.dialog-inside-header-actionOptional {
-			margin-right: calc(var(--pr-t-spacings-100) * -1);
+			margin-inline-end: calc(var(--pr-t-spacings-100) * -1);
 
 			&:empty {
 				display: none;
@@ -155,7 +155,8 @@
 			padding-block: var(--components-dialog-insideContent-paddingBlock);
 			padding-inline: var(--components-dialog-insideContent-paddingInline);
 			grid-area: overflow;
-			overflow: auto;
+			overflow: var(--components-dialog-insideContent-overflow);
+			display: block;
 			outline: none;
 		}
 

package/src/components/dialog/index.scss

@@ -62,6 +62,10 @@
 			@include withAction;
 		}
 
+		&:has(.horizontalNavigation) {
+			@include withHorizontalNavigation;
+		}
+
 		&.mod-fancy {
 			@include fancy;
 

package/src/components/dialog/mods.scss

@@ -150,3 +150,9 @@
 		--components-footer-paddingInline: var(--pr-t-spacings-150);
 	}
 }
+
+@mixin withHorizontalNavigation {
+	--components-dialog-insideContent-overflow: none;
+	--components-dialog-inside-header-boxShadow: none;
+	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200) 0;
+}

package/src/components/dialog/vars.scss

@@ -19,6 +19,7 @@
 	--components-dialog-insideContent-background: transparent;
 	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-300);
 	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-200);
+	--components-dialog-insideContent-overflow: auto;
 	--components-dialog-level: 0;
 	--components-dialog-translate-spacing: var(--pr-t-spacings-500);
 	--components-dialog-translate: calc(var(--components-dialog-translate-spacing) * var(--components-dialog-level) * -1);

package/src/components/fieldset/mods.scss

@@ -7,6 +7,8 @@
 
 @mixin horizontal {
 	grid-template-columns: 1fr auto;
+
+	--components-form-maxWidth: initial;
 }
 
 @mixin expandable {
@@ -18,6 +20,10 @@
 		&:focus-visible {
 			@include a11y.focusVisible;
 		}
+
+		.lucca-icon {
+			margin-block-start: var(--pr-t-spacings-50);
+		}
 	}
 }
 

package/src/components/fieldset/vars.scss

@@ -1,7 +1,7 @@
 @mixin vars {
 	--components-fieldset-title: var(--pr-t-font-heading-3);
 	--components-fieldset-gap: var(--pr-t-spacings-100);
-	--components-fieldset-contentMaxWidth: 40rem;
+	--components-fieldset-contentMaxWidth: var(--components-form-maxWidth, 50rem);
 	--components-fieldset-title-iconRotation: 0deg;
 	--components-fieldset-title-content-flexWrap: nowrap;
 }

package/src/components/fileEntry/component.scss

@@ -41,7 +41,7 @@
 			}
 
 			.form-field:has(.fileUpload) + & {
-				margin-top: var(--pr-t-spacings-100);
+				margin-block-start: var(--pr-t-spacings-100);
 			}
 		}
 
@@ -176,7 +176,7 @@
 		}
 
 		.fileEntry_box.box {
-			margin-top: var(--pr-t-spacings-150);
+			margin-block-start: var(--pr-t-spacings-150);
 		}
 
 		.fileEntry_box-field {

package/src/components/fileUpload/component.scss

@@ -71,7 +71,7 @@
 
 		.fileUpload-instruction-action {
 			display: block;
-			margin-bottom: var(--fileUpload-instruction-action-marginBottom);
+			margin-block-end: var(--fileUpload-instruction-action-marginBottom);
 			line-height: var(--pr-t-font-body-M-lineHeight);
 
 			span {

package/src/components/filterPill/component.scss

@@ -10,7 +10,7 @@
 @use '@lucca-front/scss/src/components/textField/exports' as textField;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	display: var(--components-filterPill-display);
+	display: flex;
 	gap: var(--components-filterPill-gap);
 	align-items: center;
 	background-color: var(--components-filterPill-backgroundColor);
@@ -24,8 +24,15 @@
 	white-space: nowrap;
 	transition-property: box-shadow;
 	transition-duration: var(--commons-animations-durations-fast);
+	border: 0;
 
 	@at-root ($atRoot) {
+		.filterPillWrapper {
+			position: relative;
+			inline-size: fit-content;
+			display: var(--components-filterPillWrapper-display);
+		}
+
 		.filterPill_popover-content.popover-contentOptional {
 			--components-dateInput-width: none;
 
@@ -96,6 +103,7 @@
 			@include reset.button;
 
 			display: flex;
+			margin-block-start: -1px;
 			margin-inline-start: var(--pr-t-spacings-50);
 			inline-size: calc(var(--pr-t-spacings-50) + var(--pr-t-spacings-200));
 			flex-shrink: 0;
@@ -108,6 +116,10 @@
 				transition-duration: var(--commons-animations-durations-fast);
 				transform: rotate(var(--components-filterPill-toggle-rotation));
 			}
+
+			.filterPill-value + & {
+				margin-inline-start: var(--components-filterPill-toggle-marginInlineStart);
+			}
 		}
 
 		.filterPill-clear.clear {
@@ -119,7 +131,16 @@
 			@include clear.product;
 		}
 
-		.filterPill-combobox {
+		.filterPill_clear.clear {
+			position: absolute;
+			z-index: 1;
+			inset-inline-end: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25));
+			inset-block-start: var(--pr-t-spacings-100);
+
+			@include clear.product;
+		}
+
+		.filterPill-value {
 			@include reset.button;
 
 			font-weight: var(--components-filterPill-label-fontWeightChecked);
@@ -130,9 +151,6 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 			cursor: var(--components-filterPill-label-cursor);
-			display: flex;
-			align-items: center;
-			gap: var(--pr-t-spacings-50);
 			max-inline-size: 15rem;
 
 			&:focus-visible {
@@ -142,6 +160,12 @@
 			.lucca-icon {
 				color: var(--components-filterPill-arrowColor);
 			}
+
+			&:has(.lucca-icon) {
+				display: flex;
+				align-items: center;
+				gap: var(--pr-t-spacings-50);
+			}
 		}
 
 		.filterPill-label-placeholder {

package/src/components/filterPill/index.scss

@@ -15,20 +15,16 @@
 			@include hover;
 		}
 
-		&:active,
-		&:has(:active) {
+		&:active {
 			@include active;
 		}
 
-		&.is-comboboxHidden {
-			@include comboboxHidden;
-		}
-
-		&:has(.filterPill-combobox:focus-visible) {
+		&:has(.filterPill-label:focus-visible),
+		&:has(.filterPill-value:focus-visible) {
 			@include focusVisible;
 		}
 
-		&:has(.filterPill-combobox[aria-expanded='true']) {
+		&[aria-expanded='true'] {
 			@include opened;
 		}
 
@@ -39,7 +35,7 @@
 				@include filledHover;
 			}
 
-			&:has(.filterPill-combobox:active) {
+			&:active {
 				@include filledActive;
 			}
 		}
@@ -51,6 +47,7 @@
 				@include focusVisible;
 			}
 
+			&[aria-pressed='true'],
 			&:has(.filterPill-checkbox-input:checked) {
 				@include checkboxChecked;
 
@@ -58,14 +55,16 @@
 					@include filledHover;
 				}
 
-				&:has(.filterPill-combobox:active) {
+				&:active {
 					@include filledActive;
 				}
 			}
 
+			&[disabled],
 			&:has(.filterPill-checkbox-input:disabled) {
 				@include checkboxDisabled;
 
+				&[aria-pressed='true'],
 				&:has(.filterPill-checkbox-input:checked) {
 					@include checkboxCheckedDisabled;
 				}
@@ -76,10 +75,14 @@
 			@include button;
 		}
 
-		&:has(.filterPill-combobox:disabled) {
+		&[disabled] {
 			@include disabled;
 		}
+	}
+}
 
+.filterPillWrapper {
+	@layer mods {
 		&.is-hidden {
 			@include hidden;
 		}

package/src/components/filterPill/states.scss

@@ -13,7 +13,7 @@
 }
 
 @mixin focusVisible {
-	@include a11y.focusVisible($offset: 3px);
+	@include a11y.focusVisible($offset: 2px);
 }
 
 @mixin hover {
@@ -67,15 +67,17 @@
 	--components-filterPill-backgroundColor: var(--palettes-product-50);
 	--components-filterPill-color: var(--palettes-product-800);
 	--components-filterPill-toggle-iconColor: var(--palettes-product-700);
+	--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
 }
 
 @mixin notFilled {
-	.filterPill-combobox {
+	.filterPill-value {
 		@include a11y.mask;
 	}
-}
 
-@mixin comboboxHidden {
+	+ .filterPill_clear.clear {
+		@include clear.hidden;
+	}
 }
 
 @mixin opened {
@@ -102,11 +104,8 @@
 	box-shadow: var(--components-filterPill-shadow);
 
 	@include clear.hidden;
-
-	// TODO
-	// --components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);
 }
 
 @mixin hidden {
-	--components-filterPill-display: none;
+	--components-filterPillWrapper-display: none;
 }

package/src/components/filterPill/vars.scss

@@ -15,7 +15,8 @@
 	--components-filterPill-toggle-rotation: 0deg;
 	--components-filterPill-toggle-iconColor: var(--palettes-neutral-600);
 	--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);
-	--components-filterPill-display: flex;
 	--components-filterPill-arrowColor: var(--palettes-product-700);
 	--components-filterPill-label-maxInlineSize: none;
+	--components-filterPill-toggle-marginInlineStart: var(--pr-t-spacings-50);
+	--components-filterPillWrapper-display: block;
 }

package/src/components/form/component.scss

@@ -5,6 +5,7 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: block;
+	max-inline-size: var(--components-form-maxWidth);
 
 	.divider:not(.mod-vertical) {
 		margin-block: var(--pr-t-spacings-300);
@@ -150,5 +151,10 @@
 				}
 			}
 		}
+
+		.option-additional {
+			font: var(--pr-t-font-body-S);
+			color: var(--pr-t-color-text-subtle);
+		}
 	}
 }

package/src/components/form/mods.scss

@@ -15,7 +15,7 @@
 @use '@lucca-front/scss/src/components/color/exports' as color;
 
 @mixin maxWidth {
-	max-inline-size: var(--components-form-maxWidth);
+	--components-form-maxWidth: 50rem;
 }
 
 @mixin inline {

package/src/components/form/vars.scss

@@ -1,5 +1,5 @@
 @mixin vars {
-	--components-form-maxWidth: 40rem;
+	--components-form-maxWidth: none;
 	--components-form-group-margin-bottom: 1.2rem;
 	--components-form-field-margin-bottom: var(--pr-t-spacings-200);
 	--components-form-field-width: auto;

package/src/components/grid/mods.scss

@@ -14,7 +14,7 @@
 
 @mixin form {
 	--grid-columns: 4;
-	--grid-maxWidth: 50rem;
+	--grid-maxWidth: var(--components-form-maxWidth, 50rem);
 }
 
 @mixin dense {

package/src/components/highlightText/component.scss

@@ -0,0 +1,30 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	padding-inline: 0.125em;
+	margin-inline: -0.125em;
+	background-repeat: no-repeat;
+	box-decoration-break: clone;
+	font-weight: inherit;
+	background-image:
+		linear-gradient(var(--components-highlightText-backgroundColor)),
+		linear-gradient(var(--components-highlightText-backgroundColor)),
+		radial-gradient(var(--components-highlightText-backgroundDiameter) circle at var(--components-highlightText-backgroundStart) var(--components-highlightText-backgroundEnd), var(--components-highlightText-backgroundColor) calc(50% - 1px), transparent 50%),
+		radial-gradient(var(--components-highlightText-backgroundDiameter) circle at var(--components-highlightText-backgroundEnd) var(--components-highlightText-backgroundEnd), var(--components-highlightText-backgroundColor) calc(50% - 1px), transparent 50%),
+		radial-gradient(var(--components-highlightText-backgroundDiameter) circle at var(--components-highlightText-backgroundStart) calc(100% - var(--components-highlightText-backgroundBlockSize) + var(--components-highlightText-backgroundRadius)), var(--components-highlightText-backgroundColor) calc(50% - 1px), transparent 50%),
+		radial-gradient(var(--components-highlightText-backgroundDiameter) circle at var(--components-highlightText-backgroundEnd) calc(100% - var(--components-highlightText-backgroundBlockSize) + var(--components-highlightText-backgroundRadius)), var(--components-highlightText-backgroundColor) calc(50% - 1px), transparent 50%);
+	background-size:
+		100% calc(var(--components-highlightText-backgroundBlockSize) - var(--components-highlightText-backgroundDiameter)),
+		calc(100% - var(--components-highlightText-backgroundDiameter)) var(--components-highlightText-backgroundBlockSize),
+		100% 100%,
+		100% 100%,
+		100% 100%,
+		100% 100%;
+	background-position:
+		50% calc(100% - var(--components-highlightText-backgroundRadius)),
+		50% 100%,
+		0 0,
+		0 0,
+		0 0,
+		0 0;
+}