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

package/package.json

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

package/src/commons/base.scss

@@ -99,7 +99,9 @@
 			}
 		}
 
-		button {
+		button, button[type] {
+			text-rendering: inherit;
+
 			&:focus-visible {
 				@include a11y.focusVisible;
 			}

package/src/commons/config.scss

@@ -116,7 +116,7 @@ $borderRadiusTokens: (
 $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';
+$palettesDefault: 'brand', 'brandContrasted', 'neutral', 'navigation', 'AI';
 $palettesProduct: 'product';
 $palettesOtherProduct: () !default;
 $palettesDecorative: 'kiwi', 'lime', 'cucumber', 'mint', 'glacier', 'lagoon', 'blueberry', 'lavender', 'grape', 'watermelon', 'pumpkin',
@@ -140,6 +140,11 @@ $fieldsWidth: 20, 30, 40, 50, 60 !default;
 
 // Palettes
 
+$ai: (
+	500: #BC6FDD,
+	600: #A440CF,
+);
+
 $brand: (
 	// text is deprecated
 	text: #ffffff,
@@ -545,6 +550,7 @@ $productsInterpolation: (
 );
 
 $palettesInterpolation: (
+	'AI': $ai,
 	'lucca': $brand,
 	'brand': $brand,
 	'brandContrasted': $brandContrasted,

package/src/commons/core.scss

@@ -29,7 +29,7 @@ $verticalAlign: 'baseline', 'sub', 'super', 'text-top', 'text-bottom', 'middle',
 $position: 'absolute', 'relative', 'static', 'fixed', 'sticky';
 $decoration: 'underline', 'line-through', 'none';
 $overflow: 'hidden', 'auto', 'visible', 'scroll';
-$cursor: 'pointer', 'auto';
+$cursor: 'pointer', 'auto', 'default', 'text';
 
 // Tokens
 

package/src/commons/utils/color.scss

@@ -30,3 +30,17 @@
 	@include core.rosetta('--palettes-success', '--palettes-successContrasted', config.$palettesShades);
 	@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)) {
+	&::before {
+		content: '';
+		pointer-events: none;
+		position: absolute;
+		inset: calc(#{$width} * -1);
+		padding: #{$width};
+		background-image: conic-gradient(from #{$angle}, #{$color1}, #{$color2}, #{$color1});
+		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,18 @@
 	--commons-font-family: '#{config.$fontFamily}', Tahoma, sans-serif;
 	--commons-font-family-brand: '#{config.$fontFamilyBrand}', sans-serif;
 
+	--commons-background-base: var(--palettes-neutral-25);
+
+	--commons-divider-color: var(--palettes-neutral-200);
+
+	--commons-container-padding: 0 var(--pr-t-spacings-200);
+	--commons-container-maxWidth: 100rem; // 100 + 0 = 100
+
+	--commons-navSide-width: 0px;
+	/* stylelint-disable-next-line property-disallowed-list */
+	--commons-navSide-compact-width: 7.5rem;
+	--commons-navSide-mobile-toggle-height: 3.5rem;
+
 	@if (config.$fontFamilyCursive) {
 		--commons-font-family-cursive: '#{config.$fontFamilyCursive}', cursive;
 	}
@@ -90,21 +102,14 @@
 		@include core.cssvars('sizes-#{$key}', $map);
 	}
 
-	--commons-background-base: var(--palettes-neutral-25);
-	--commons-divider-color: var(--palettes-neutral-200);
-
 	@each $breakpoint, $value in config.$breakpoints {
 		--commons-container-maxWidth#{$breakpoint}: #{function.pxToRem($value)};
 	}
 
-	--commons-container-padding: 0 var(--pr-t-spacings-200);
-
 	@include media.min('S') {
 		--commons-container-padding: 0 var(--pr-t-spacings-400);
 	}
 
-	--commons-container-maxWidth: 100rem; // 100 + 0 = 100
-
 	&:has(.navSide) {
 		--commons-container-maxWidth: 85rem; // 85 + 15 = 100
 	}
@@ -113,11 +118,6 @@
 		--commons-container-maxWidth: 92.5rem; // 92.5 + 7.5 = 100
 	}
 
-	--commons-navSide-width: 0px;
-	/* stylelint-disable-next-line property-disallowed-list */
-	--commons-navSide-compact-width: 7.5rem;
-	--commons-navSide-mobile-toggle-height: 3.5rem;
-
 	@media (prefers-contrast: more) {
 		@media (forced-colors: none) {
 			@include color.contrasted;

package/src/components/avatar/component.scss

@@ -5,14 +5,14 @@
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: inline-block;
 	vertical-align: middle;
-	border-radius: var(--pr-t-border-radius-full);
+	border-radius: var(--components-avatar-borderRadius);
 	inline-size: var(--components-avatar-size);
 	aspect-ratio: 1;
 
 	@at-root ($atRoot) {
 		.avatar-picture {
-			background-color: var(--palettes-neutral-200);
-			border-radius: var(--pr-t-border-radius-full);
+			background-color: var(--components-avatar-picture-background);
+			border-radius: var(--components-avatar-borderRadius);
 			background-position: center;
 			background-size: cover;
 			background-repeat: no-repeat;
@@ -31,6 +31,7 @@
 			font-family: var(--pr-t-font-family-brand);
 			line-height: 1;
 			color: var(--pr-t-color-text-reverse);
+			display: var(--components-avatar-picture-initials-display);
 		}
 
 		.avatarWrapper {

package/src/components/avatar/index.scss

@@ -37,6 +37,10 @@
 			@include placeholder;
 		}
 	}
+
+	&.mod-AI {
+		@include AI;
+	}
 }
 
 .avatarWrapper {

package/src/components/avatar/mods.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/icons/src/icon/exports' as icons;
 
 @mixin XS {
 	--components-avatar-size: 1.5rem;
@@ -72,6 +73,8 @@
 }
 
 @mixin placeholder {
+	--components-avatar-picture-initials-display: none;
+
 	.avatar-picture {
 		background-color: var(--palettes-neutral-200) !important;
 
@@ -84,7 +87,19 @@
 		}
 	}
 
-	.avatar-picture-initials {
-		display: none;
+}
+
+@mixin AI {
+	--components-avatar-borderRadius: var(--pr-t-border-radius-default);
+	--components-avatar-picture-background: var(--palettes-neutral-0);
+	--components-avatar-picture-initials-display: none;
+
+	.avatar-picture {
+		&::before {
+			@include icons.AI;
+			@include icon.generate('weather_stars');
+
+			font-size: var(--components-avatar-AI-size);
+		}
 	}
 }

package/src/components/avatar/vars.scss

@@ -5,6 +5,10 @@
 	--components-avatar-scale: 1;
 	--components-avatar-background: var(--pr-t-elevation-surface-default);
 	--components-avatar-placeholder-size: 1.25rem;
+	--components-avatar-AI-size: var(--pr-t-font-fontSize-200);
+	--components-avatar-borderRadius: var(--pr-t-border-radius-full);
+	--components-avatar-picture-background: var(--palettes-neutral-200);
+	--components-avatar-picture-initials-display: block;
 }
 
 @mixin varsWrapper {

package/src/components/box/component.scss

@@ -2,7 +2,7 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	border-radius: var(--pr-t-border-radius-default);
+	border-radius: var(--components-box-borderRadius);
 	padding: var(--components-box-padding);
 	background-color: var(--components-box-background, var(--pr-t-elevation-surface-raised));
 	display: block;

package/src/components/box/mods.scss

@@ -44,6 +44,7 @@
 
 @mixin withArrow {
 	--components-box-padding: var(--pr-t-spacings-200);
+	--components-box-borderRadius: var(--pr-t-border-radius-small) var(--pr-t-border-radius-structure) var(--pr-t-border-radius-structure);
 
 	.box-arrow {
 		--components-box-arrow-bottom: 100%;

package/src/components/box/vars.scss

@@ -2,6 +2,7 @@
 	--components-box-background: var(--pr-t-elevation-surface-raised);
 	--components-box-margin: 0 0 var(--pr-t-spacings-200);
 	--components-box-padding: var(--pr-t-spacings-300);
+	--components-box-borderRadius: var(--pr-t-border-radius-structure);
 	--components-box-toggle-arrow-size: 0.8rem;
 	--components-box-toggle-arrow-left: 2.5rem;
 }

package/src/components/button/component.scss

@@ -32,7 +32,6 @@
 	text-wrap: balance;
 	text-align: center;
 	border: 0;
-	text-rendering: inherit;
 
 	&,
 	&:is(a) {

package/src/components/button/index.scss

@@ -7,6 +7,18 @@
 	}
 
 	@layer mods {
+		&.mod-AI {
+			@include AI;
+
+			&.is-success {
+				@include successAI;
+			}
+
+			&.is-loading {
+				@include loadingAI;
+			}
+		}
+
 		&.mod-block {
 			@include block;
 		}
@@ -140,6 +152,7 @@
 				@include loadingXS;
 			}
 
+			&.mod-AI,
 			&.mod-outlined {
 				@include loadingOutlined;
 			}
@@ -160,6 +173,7 @@
 		&.success {
 			@include success;
 
+			&.mod-AI,
 			&.mod-outlined {
 				@include successOutlined;
 			}
@@ -179,7 +193,8 @@
 
 		// .disabled is deprecated
 		&.is-disabled,
-		&.disabled {
+		&.disabled,
+		&[aria-disabled] {
 			@include disabled;
 		}
 	}

package/src/components/button/mods.scss

@@ -1,6 +1,7 @@
 @use '@lucca-front/icons/src/icon/exports' as icons;
 @use '@lucca-front/icons/src/commons/utils/icon';
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
 
 @mixin S {
@@ -83,6 +84,7 @@
 @mixin ghost {
 	--components-button-backgroundColor: transparent;
 	--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));
+	--components-button-boxShadow: none;
 
 	&:hover,
 	&:focus-visible {
@@ -118,10 +120,11 @@
 	--components-button-minWidth: 2rem;
 	--components-button-padding: 0;
 
-	&::before {
+	&::after {
 		@include icon.generate('arrow_chevron_bottom');
 
 		block-size: 0;
+		order: -1;
 		vertical-align: text-top;
 	}
 }
@@ -243,3 +246,15 @@
 @mixin counterXS {
 	--components-button-paddingInlineEnd: var(--pr-t-spacings-50);
 }
+
+@mixin AI {
+	@include outlined;
+
+	&:not(:disabled) {
+		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500));
+
+		.lucca-icon {
+			@include icons.AI;
+		}
+	}
+}

package/src/components/button/states.scss

@@ -1,3 +1,4 @@
+@use '@lucca-front/icons/src/icon/exports' as icons;
 @use '@lucca-front/scss/src/commons/config';
 @use '@lucca-front/scss/src/commons/core';
 @use '@lucca-front/scss/src/commons/utils/keyframe';
@@ -22,10 +23,15 @@
 	--components-button-pointerEvents: none;
 	--components-button-color: transparent;
 	--components-button-userSelect: none;
-	--components-button-backgroundColor: var(--palettes-product-500);
-	--commons-loading-frontground: var(--palettes-product-50);
+	--components-button-boxShadow: none;
+	--components-button-backgroundColor: var(--palettes-500, var(--palettes-product-500));
+	--commons-loading-frontground: var(--palettes-50, var(--palettes-product-50));
 
 	@include loading.spinner(var(--pr-t-font-body-M-lineHeight));
+
+	.numericBadge {
+		@include numericBadge.state;
+	}
 }
 
 @mixin loadingS {
@@ -49,12 +55,15 @@
 	--commons-loading-frontground: var(--palettes-neutral-400);
 }
 
-@mixin state {
+@mixin success {
+	--components-button-backgroundColor: var(--palettes-500, var(--palettes-product-500));
 	--components-button-color: transparent;
 	--components-button-pointerEvents: none;
 	--components-button-userSelect: none;
 
 	&::after {
+		@include icon.generate('sign_confirm');
+
 		color: var(--palettes-neutral-0);
 		font-size: calc(1.5 * var(--pr-t-font-body-M-fontSize));
 		block-size: var(--pr-t-font-body-M-lineHeight);
@@ -62,15 +71,33 @@
 		margin: auto;
 		position: absolute;
 	}
+
+	.numericBadge {
+		@include numericBadge.state;
+	}
 }
 
-@mixin success {
-	--components-button-backgroundColor: var(--palettes-product-500);
+@mixin loadingAI {
+	.lucca-icon {
+		@include icons.transparent;
+	}
+
+	&::before {
+		content: none;
+	}
+}
+
+@mixin successAI {
+	.lucca-icon {
+		@include icons.transparent;
+	}
 
-	@include state;
+	&::before {
+		content: none;
+	}
 
 	&::after {
-		@include icon.generate('sign_confirm');
+		@include icons.AI;
 	}
 }
 
@@ -93,7 +120,7 @@
 	--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);
 
 	&::after {
-		color: var(--palettes-product-700);
+		color: var(--palettes-700, var(--palettes-product-700));
 	}
 }
 
@@ -102,7 +129,7 @@
 	--components-button-boxShadow: none;
 
 	&::after {
-		color: var(--palettes-product-700);
+		color: var(--palettes-700, var(--palettes-product-700));
 	}
 }
 
@@ -113,4 +140,6 @@
 	animation-name: shake;
 	animation-iteration-count: 1;
 	animation-duration: var(--commons-animations-durations-standard);
+
+	@include keyframe.shake;
 }

package/src/components/button/vars.scss

@@ -15,7 +15,7 @@
 	--components-button-width: auto;
 	--components-button-minWidth: none;
 	--components-button-userSelect: auto;
-	--components-button-boxShadow: none;
+	--components-button-boxShadow: var(--pr-t-elevation-shadow-button);
 	--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
 	--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));
 	--components-button-arrow-transform: none;

package/src/components/buttonGroup/component.scss

@@ -66,5 +66,22 @@
 
 	&:is(ul) {
 		flex-wrap: wrap;
+
+		.button.mod-more {
+			block-size: 100%;
+			min-block-size: 2.25rem;
+
+			&.mod-S {
+				min-block-size: 2rem;
+			}
+
+			&.mod-XS {
+				min-block-size: 1.5rem;
+			}
+
+			&::after {
+				content: none;
+			}
+		}
 	}
 }

package/src/components/callout/component.scss

@@ -9,9 +9,9 @@
 	align-items: flex-start;
 	position: relative;
 	border-radius: var(--pr-t-border-radius-default);
-	background-color: var(--palettes-50, var(--palettes-neutral-50));
+	background-color: var(--components-callout-backgroundColor);
 	color: var(--pr-t-color-text);
-	box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));
+	box-shadow: var(--components-callout-boxShadow);
 	gap: var(--components-callout-gap);
 	padding: var(--components-callout-padding);
 	font: var(--components-callout-font);
@@ -40,11 +40,20 @@
 			font-weight: 600;
 		}
 
+		.callout-content-description {
+			display: var(--components-callout-content-description-display);
+			justify-content: space-between;
+			gap: var(--pr-t-spacings-150);
+			align-items: flex-start;
+
+		}
+
+
 		.callout-content-description-actions {
 			display: flex;
 			gap: var(--pr-t-spacings-75);
-			margin-block-start: var(--pr-t-spacings-50);
-			padding-block: var(--pr-t-spacings-50);
+			margin-block-start: var(--components-callout-content-description-action-marginBlockStart);
+			padding-block: var(--components-callout-content-description-action-paddingBlock);
 			padding-inline: 0;
 
 			.button {

package/src/components/callout/index.scss

@@ -11,4 +11,13 @@
 			@include S;
 		}
 	}
+
+	&.mod-AI {
+		@include AI;
+	}
+
+	&:has(.callout-content-description-actions.mod-inline) {
+		@include actionsInline;
+	}
 }
+

package/src/components/callout/mods.scss

@@ -1,4 +1,5 @@
-@use '@lucca-front/icons/src/icon/exports' as icon;
+@use '@lucca-front/icons/src/icon/exports' as icons;
+@use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin S {
@@ -7,7 +8,7 @@
 	--components-callout-kill-size: 1.25rem;
 
 	.callout-icon {
-		@include icon.S;
+		@include icons.S;
 	}
 
 	.callout-content-description-actions {
@@ -26,3 +27,30 @@
 	--components-callout-display: inline-flex;
 	--components-callout-padding: var(--pr-t-spacings-100);
 }
+
+@mixin AI {
+	--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));
+
+	.callout-icon {
+		.lucca-icon {
+			@include icons.AI;
+		}
+	}
+}
+
+@mixin actionsInline {
+	--components-callout-content-description-display: flex;
+	--components-callout-content-description-action-marginBlockStart: 0;
+	--components-callout-content-description-action-paddingBlock: 0;
+
+	.button {
+		@include button.XS;
+	}
+
+	.button.mod-onlyIcon {
+		@include button.onlyIconXS;
+	}
+}

package/src/components/callout/vars.scss

@@ -4,6 +4,11 @@
 	--components-callout-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);
 	--components-callout-font: inherit;
 	--components-callout-kill-size: 1.5rem;
+	--components-callout-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));
+	--components-callout-backgroundColor: var(--palettes-50, var(--palettes-neutral-50));
+	--components-callout-content-description-display: block;
+	--components-callout-content-description-action-marginBlockStart: var(--pr-t-spacings-50);
+	--components-callout-content-description-action-paddingBlock: var(--pr-t-spacings-50);
 
 	// Deprecated
 	--components-callout-fontSize: inherit;

package/src/components/dataTable/component.scss

@@ -65,6 +65,8 @@
 			box-shadow: var(--components-dataTable-cell-shadow);
 			background-color: var(--components-dataTable-cell-background);
 			text-align: var(--components-dataTable-cell-textAlign);
+			transition-property: background-color;
+			transition-duration: var(--commons-animations-durations-fast);
 
 			&:first-child {
 				inline-size: var(--components-dataTable-cellFirst-width);

package/src/components/dataTable/index.scss

@@ -39,6 +39,22 @@
 			@include layoutFixedCells;
 		}
 	}
+
+	&.mod-hover {
+		:is(.dataTable-head-row.mod-selectable, .dataTable-body-row) {
+			&:hover {
+				@include hover;
+			}
+
+			&.mod-selectable {
+				&:has(input:checked) {
+					&:hover {
+						@include selectedHover;
+					}
+				}
+			}
+		}
+	}
 }
 
 :is(.dataTable-head-row, .dataTable-body-row, .dataTable-foot-row) {
@@ -49,6 +65,10 @@
 
 		&.mod-selectable {
 			@include selectable;
+
+			&:has(input:checked) {
+				@include selected;
+			}
 		}
 
 		&.mod-draggable {

package/src/components/dataTable/mods.scss

@@ -38,17 +38,16 @@
 @mixin group {
 	@include buttonExpand;
 
-	--components-dataTable-cell-background: var(--palettes-neutral-25);
-
 	font: var(--pr-t-font-heading-4);
+
+	&,
+	&:hover {
+		--components-dataTable-cell-background: var(--palettes-neutral-50);
+	}
 }
 
 @mixin selectable {
 	--components-dataTable-cellFirst-width: 2.5rem;
-
-	&:has(input:checked) {
-		--components-dataTable-cell-background: var(--palettes-product-50);
-	}
 }
 
 @mixin draggable {

package/src/components/dataTable/states.scss

@@ -5,3 +5,15 @@
 @mixin expanded {
 	--components-dataTable-expand-rotation: 0deg;
 }
+
+@mixin hover {
+	--components-dataTable-cell-background: var(--palettes-neutral-25);
+}
+
+@mixin selected {
+	--components-dataTable-cell-background: var(--palettes-product-50);
+}
+
+@mixin selectedHover {
+	--components-dataTable-cell-background: var(--palettes-product-100);
+}