@lucca-front/scss 21.3.0-rc.5 → 22.0.0-rc.2

package/src/components/simpleSelect/index.scss

@@ -40,7 +40,6 @@
 			@include XS;
 		}
 
-		&.mod-impersonation,
 		&.mod-filterPill {
 			@include filterPill;
 		}

package/src/components/tag/mods.scss

@@ -63,7 +63,7 @@
 		--components-tag-boxShadow: none;
 		--components-tag-position: relative;
 
-		@include color.borderGradient($gradient: var(--pr-t-color-border-ai), $radius: var(--pr-t-border-radius-small));
+		@include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500), var(--pr-t-border-radius-small));
 
 		.lucca-icon {
 			@include icons.AI;

package/src/components/textFlow/component.scss

@@ -1,8 +1,6 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	overflow-wrap: anywhere;
-
 	h1 {
 		margin-block: var(--pr-t-spacings-300);
 	}

package/src/components/timepicker/component.scss

@@ -28,25 +28,6 @@
 			&:focus-within {
 				@include a11y.focusVisible($offset: 3px);
 			}
-
-			.timePicker-fieldset {
-				box-shadow: initial;
-
-				&:focus-within {
-					outline: initial;
-				}
-			}
-		}
-
-		.timePicker-arrow {
-			align-self: stretch;
-			display: flex;
-			align-items: center;
-			color: var(--pr-t-color-text-subtle);
-		}
-
-		.timePicker-arrow-icon .lucca-icon {
-			@include icons.S;
 		}
 
 		.timePicker-fieldset-groupSeparator {
@@ -66,9 +47,6 @@
 
 			~ .timePicker-fieldset-group {
 				margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
-
-				--components-timepicker-input-padding-inline: var(--components-timepicker-end) var(--components-timepicker-start);
-				--components-timepicker-display-inset-inline: var(--components-timepicker-input-padding-inline);
 			}
 		}
 
@@ -105,8 +83,7 @@
 
 		.timePicker-fieldset-group-textfield-display {
 			position: absolute;
-			inset-block: var(--components-timepicker-display-inset-block);
-			inset-inline: var(--components-timepicker-display-inset-inline);
+			inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
 			border-radius: var(--pr-t-border-radius-50);
 			pointer-events: none;
 			display: grid;
@@ -157,8 +134,8 @@
 
 		.timePicker-fieldset-meridiem {
 			box-sizing: content-box;
-			inline-size: calc(var(--pr-t-spacings-100) + 2ch);
-			padding-inline: var(--pr-t-spacings-50);
+			inline-size: calc(var(--components-timepicker-input-minInlineSize) + 2ch);
+			padding-inline: var(--components-timepicker-display-padding-block);
 			position: relative;
 			align-self: stretch;
 			margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
@@ -166,8 +143,7 @@
 			&::after {
 				content: '';
 				position: absolute;
-				inset-block: var(--components-timepicker-display-inset-block);
-				inset-inline: var(--pr-t-spacings-50);
+				inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
 				border-radius: var(--pr-t-border-radius-50);
 				display: grid;
 				place-items: center;

package/src/components/timepicker/mods.scss

@@ -1,34 +1,13 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
-@use '@lucca-front/icons/src/icon/exports' as icons;
 
 @mixin S {
 	--components-timepicker-font: var(--pr-t-font-body-S);
+	--components-timepicker-display-padding-inline: var(--pr-t-spacings-25);
+	--components-timepicker-display-padding-block: var(--pr-t-spacings-75);
+	--components-timepicker-input-padding-inline: var(--pr-t-spacings-75);
 	--components-timepicker-input-padding-block: var(--pr-t-spacings-25);
 	--components-timepicker-input-height: 1.75rem;
 	--components-timepicker-separator-left: 1.875rem;
-	--components-timepicker-start: var(--pr-t-spacings-25);
-	--components-timepicker-end: var(--pr-t-spacings-75);
-
-	.timePicker-arrow-icon .lucca-icon {
-		@include icons.XS;
-	}
-
-	.timePicker-fieldset-group {
-		--components-timepicker-input-padding-inline: var(--components-timepicker-start) var(--components-timepicker-end);
-		--components-timepicker-display-inset-inline: var(--components-timepicker-input-padding-inline);
-
-		~ .timePicker-fieldset-group {
-			--components-timepicker-input-padding-inline: var(--components-timepicker-end) var(--components-timepicker-start);
-		}
-	}
-
-	.timePicker-fieldset-meridiem {
-		inline-size: calc(var(--pr-t-spacings-50) + 2ch);
-
-		&::after {
-			inset-inline: var(--pr-t-spacings-25);
-		}
-	}
 }
 
 @mixin stepper {

package/src/components/timepicker/vars.scss

@@ -5,13 +5,10 @@
 	--components-timepicker-font: var(--pr-t-font-body-M);
 	--components-timepicker-input-height: 2rem;
 	--components-timepicker-input-minInlineSize: 0.5rem;
-	--components-timepicker-input-padding-inline: var(--components-timepicker-start) var(--components-timepicker-end);
+	--components-timepicker-input-padding-inline: var(--pr-t-spacings-100);
 	--components-timepicker-input-padding-block: var(--pr-t-spacings-50);
 	--components-timepicker-padding: 0;
-	--components-timepicker-display-inset-inline: var(--components-timepicker-input-padding-inline);
-	--components-timepicker-display-inset-block: var(--components-timepicker-input-padding-block);
+	--components-timepicker-display-padding-inline: var(--pr-t-spacings-50);
+	--components-timepicker-display-padding-block: var(--pr-t-spacings-100);
 	--components-timepicker-separator-left: 2.375rem;
-
-	--components-timepicker-start: var(--pr-t-spacings-50);
-	--components-timepicker-end: var(--pr-t-spacings-100);
 }

package/src/components/toast/component.scss

@@ -70,7 +70,6 @@
 
 		.toast-item-content-description {
 			margin: 0;
-			overflow-wrap: anywhere;
 		}
 
 		.toasts-item-kill {

package/src/components/highlightText/component.scss

@@ -1,30 +0,0 @@
-@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;
-}

package/src/components/highlightText/exports.scss

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

package/src/components/highlightText/index.scss

@@ -1,8 +0,0 @@
-@use 'exports' as *;
-
-.highlightText {
-	@layer components {
-		@include vars;
-		@include component;
-	}
-}

package/src/components/highlightText/vars.scss

@@ -1,9 +0,0 @@
-@mixin vars {
-	--components-highlightText-backgroundColor: var(--palettes-300, var(--palettes-product-300));
-	--components-highlightText-backgroundDiameter: 0.25em;
-	--components-highlightText-backgroundBlockSize: 0.5em;
-
-	--components-highlightText-backgroundRadius: calc(var(--components-highlightText-backgroundDiameter) / 2);
-	--components-highlightText-backgroundStart: var(--components-highlightText-backgroundRadius);
-	--components-highlightText-backgroundEnd: calc(100% - var(--components-highlightText-backgroundRadius));
-}

package/src/components/impersonation/component.scss

@@ -1,59 +0,0 @@
-@use '@lucca-front/scss/src/commons/config';
-@use '@lucca-front/scss/src/commons/utils/namespace';
-@use '@lucca-front/scss/src/commons/utils/reset';
-@use '@lucca-front/scss/src/components/clear/exports' as clear;
-
-@mixin component($atRoot: namespace.$defaultAtRoot) {
-	position: relative;
-	inline-size: fit-content;
-	display: block;
-
-	@at-root ($atRoot) {
-		.impersonation-trigger {
-			@include reset.button;
-
-			border: 1px solid var(--components-impersonation-trigger-borderColor);
-			background-color: var(--components-impersonation-trigger-backgroundColor);
-			border-radius: var(--pr-t-border-radius-200);
-			inline-size: fit-content;
-			display: flex;
-			align-items: center;
-			gap: var(--pr-t-spacings-100);
-			padding: var(--pr-t-spacings-50);
-			padding-inline-end: var(--pr-t-spacings-100);
-			min-block-size: var(--pr-t-spacings-500);
-			font-weight: var(--components-impersonation-trigger-fontWeight);
-			color: var(--components-impersonation-trigger-color);
-			box-shadow: var(--components-impersonation-trigger-boxShadow);
-			transition-property: box-shadow, border-color;
-			transition-duration: var(--commons-animations-durations-fast);
-		}
-
-		.impersonation-trigger-icon {
-			color: var(--components-impersonation-trigger-icon-color);
-			rotate: var(--components-impersonation-trigger-icon-rotate);
-			transition-property: rotate;
-			transition-duration: var(--commons-animations-durations-fast);
-			margin-inline-start: var(--components-impersonation-trigger-icon-marginInlineStart);
-		}
-
-		.impersonation-clear.clear {
-			position: absolute;
-			z-index: 1;
-			inset-inline-end: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-75));
-			inset-block-start: calc(var(--pr-t-spacings-150) + 1px);
-			display: var(--components-impersonation-clear-display);
-
-			@include clear.product;
-		}
-
-		.impersonation_popover-content-option {
-			display: flex;
-			color: var(--pr-t-color-text);
-
-			&.mod-me {
-				font-weight: var(--pr-t-font-fontWeight-semibold);
-			}
-		}
-	}
-}

package/src/components/impersonation/exports.scss

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

package/src/components/impersonation/index.scss

@@ -1,22 +0,0 @@
-@use 'exports' as *;
-
-.impersonation {
-	@layer components {
-		@include vars;
-		@include component;
-	}
-
-	@layer mods {
-		&:has(.impersonation-trigger.is-active) {
-			@include triggerActive;
-		}
-
-		&:has(.impersonation-trigger:hover) {
-			@include triggerHover;
-		}
-
-		&:has(.impersonation-trigger[aria-expanded='true']) {
-			@include triggerExpanded;
-		}
-	}
-}

package/src/components/impersonation/states.scss

@@ -1,18 +0,0 @@
-@mixin triggerHover {
-	--components-impersonation-trigger-borderColor: var(--palettes-product-400);
-	--components-impersonation-trigger-shadow: var(--pr-t-elevation-shadow-button);
-}
-
-@mixin triggerExpanded {
-	--components-impersonation-trigger-icon-rotate: 180deg;
-}
-
-@mixin triggerActive {
-	--components-impersonation-trigger-backgroundColor: var(--palettes-product-50);
-	--components-impersonation-trigger-borderColor: var(--palettes-product-200);
-	--components-impersonation-trigger-fontWeight: var(--pr-t-font-fontWeight-semibold);
-	--components-impersonation-trigger-color: var(--palettes-product-800);
-	--components-impersonation-trigger-icon-color: var(--palettes-product-700);
-	--components-impersonation-clear-display: grid;
-	--components-impersonation-trigger-icon-marginInlineStart: var(--pr-t-spacings-250);
-}

package/src/components/impersonation/vars.scss

@@ -1,11 +0,0 @@
-@mixin vars {
-	--components-impersonation-trigger-borderColor: var(--palettes-neutral-100);
-	--components-impersonation-trigger-icon-rotate: 0deg;
-	--components-impersonation-trigger-backgroundColor: var(--palettes-neutral-0);
-	--components-impersonation-trigger-fontWeight: var(--pr-t-font-fontWeight-regular);
-	--components-impersonation-trigger-color: var(--pr-t-color-text);
-	--components-impersonation-trigger-icon-color: var(--pr-t-color-text-subtle);
-	--components-impersonation-trigger-boxShadow: none;
-	--components-impersonation-clear-display: none;
-	--components-impersonation-trigger-icon-marginInlineStart: auto;
-}