@lucca-front/scss 22.0.5 → 22.1.0-rc.2

package/src/components/priorityLevels/component.scss

@@ -0,0 +1,38 @@
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	display: flex;
+	align-items: center;
+	color: var(--pr-t-color-text);
+	font: var(--components-priorityLevels-font);
+	gap: var(--components-priorityLevels-gap);
+	min-block-size: var(--components-priorityLevels-minBlockSize);
+
+	@at-root ($atRoot) {
+		.priorityLevels-icon {
+			display: inline-flex;
+
+			&:focus-visible {
+				@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-small));
+			}
+		}
+
+		.priorityLevels-icon .lucca-icon {
+			&::before {
+				background:
+					linear-gradient(
+						to right,
+						var(--components-priorityLevels-icon-color1) 0%,
+						var(--components-priorityLevels-icon-color1) calc(100% / 3),
+						var(--components-priorityLevels-icon-color2) calc(100% / 3),
+						var(--components-priorityLevels-icon-color2) calc(100% / 3 * 2),
+						var(--components-priorityLevels-icon-color3) calc(100% / 3 * 2),
+						var(--components-priorityLevels-icon-color3) 100%
+					);
+				background-clip: text;
+				color: transparent;
+			}
+		}
+	}
+}

package/src/components/priorityLevels/exports.scss

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

package/src/components/priorityLevels/index.scss

@@ -0,0 +1,30 @@
+@use 'exports' as *;
+
+.priorityLevels {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+		&.mod-low {
+			@include low;
+		}
+
+		&.mod-medium {
+			@include medium;
+		}
+
+		&.mod-high {
+			@include high;
+		}
+
+		&.mod-S {
+			@include S;
+		}
+
+		&.mod-L {
+			@include L;
+		}
+	}
+}

package/src/components/priorityLevels/mods.scss

@@ -0,0 +1,28 @@
+@mixin low {
+	--components-priorityLevels-icon-color1: var(--pr-t-color-text);
+	--components-priorityLevels-icon-color2: var(--palettes-neutral-400);
+	--components-priorityLevels-icon-color3: var(--palettes-neutral-400);
+}
+
+@mixin medium {
+	--components-priorityLevels-icon-color1: var(--palettes-warning-800);
+	--components-priorityLevels-icon-color2: var(--palettes-warning-800);
+	--components-priorityLevels-icon-color3: var(--palettes-neutral-400);
+}
+
+@mixin high {
+	--components-priorityLevels-icon-color1: var(--palettes-critical-800);
+	--components-priorityLevels-icon-color2: var(--palettes-critical-800);
+	--components-priorityLevels-icon-color3: var(--palettes-critical-800);
+}
+
+@mixin S {
+	--components-priorityLevels-font: var(--pr-t-font-body-XS);
+	--components-priorityLevels-minBlockSize: var(--pr-t-font-body-XS-lineHeight);
+	--components-priorityLevels-gap: var(--pr-t-spacings-25);
+}
+
+@mixin L {
+	--components-priorityLevels-font: var(--pr-t-font-body-M);
+	--components-priorityLevels-minBlockSize: var(--pr-t-font-body-M-lineHeight);
+}

package/src/components/priorityLevels/vars.scss

@@ -0,0 +1,8 @@
+@mixin vars {
+	--components-priorityLevels-font: var(--pr-t-font-body-S);
+	--components-priorityLevels-minBlockSize: var(--pr-t-font-body-S-lineHeight);
+	--components-priorityLevels-gap: var(--pr-t-spacings-50);
+	--components-priorityLevels-icon-color1: var(--palettes-neutral-400);
+	--components-priorityLevels-icon-color2: var(--palettes-neutral-400);
+	--components-priorityLevels-icon-color3: var(--palettes-neutral-400);
+}

package/src/components/simpleSelect/component.scss

@@ -3,6 +3,7 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: block;
+	inline-size: var(--components-simpleSelect-width);
 
 	@at-root ($atRoot) {
 		.simpleSelect-field {
@@ -48,6 +49,28 @@
 			&::placeholder {
 				color: var(--components-simpleSelect-placeholder);
 			}
+
+			// Below the S breakpoint the trigger is a button instead of a text input, so the native
+			// button chrome (centred text, rounded corners on iOS) has to be stripped for it to keep
+			// sitting on the value the way the input did. An empty button would collapse to no height
+			// and stop covering the value it triggers, hence the stretch.
+			&.mod-button {
+				appearance: none;
+				text-align: start;
+				align-self: stretch;
+				display: flex;
+				align-items: center;
+			}
+		}
+
+		// Stands in for the input placeholder, which a button trigger has no equivalent of. It sets its
+		// own colour rather than inheriting so it survives `colorPicker` making the trigger transparent.
+		.simpleSelect-field-placeholder {
+			color: var(--components-simpleSelect-placeholder);
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: block;
 		}
 
 		.simpleSelect-field-value {

package/src/components/simpleSelect/index.scss

@@ -1,3 +1,5 @@
+@use '@lucca-front/scss/src/commons/config';
+
 @use 'exports' as *;
 
 .simpleSelect {
@@ -26,12 +28,22 @@
 
 		&:has(.simpleSelect-field-input[aria-invalid='true']) {
 			@include invalid;
+
+			.simpleSelect-field:hover {
+				@include invalidHover;
+			}
 		}
 
 		&:has(.simpleSelect-field-input:disabled) {
 			@include disabled;
 		}
 
+		@each $value in config.$fieldsWidth {
+			&.mod-width#{$value} {
+				@include width($value);
+			}
+		}
+
 		&.mod-S {
 			@include S;
 		}
@@ -58,3 +70,9 @@
 		}
 	}
 }
+
+@layer mods {
+	.dialog.mod-select {
+		@include select;
+	}
+}

package/src/components/simpleSelect/mods.scss

@@ -1,6 +1,11 @@
+@use 'sass:math';
 @use '@lucca-front/icons/src/icon/exports' as icon;
 @use '@lucca-front/scss/src/components/clear/exports' as clear;
 
+@mixin width($value) {
+	--components-simpleSelect-width: #{math.div($value, 2) * 1rem};
+}
+
 @mixin S {
 	--components-simpleSelect-font: var(--pr-t-font-body-S);
 	--components-simpleSelect-padding: var(--pr-t-spacings-75);
@@ -65,3 +70,18 @@
 		margin: var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1);
 	}
 }
+
+@mixin select {
+	--components-dialog-animationDuration: 0s;
+	--components-dialog-insideHeaderTitleAlign: center;
+	--components-dialog-insideHeaderTitleFont: var(--pr-t-font-heading-4);
+	--components-dialog-insideHeaderColumns: 1fr auto 1fr;
+	--components-dialog-inside-header-button-justifySelf: end;
+	--components-dialog-insideHeaderAreas:
+		'spacer  container close  '
+		'content content   content';
+	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-200);
+	--components-dialog-inside-header-content-paddingBlockStart: var(--pr-t-spacings-100);
+	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-50);
+	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-50);
+}

package/src/components/simpleSelect/states.scss

@@ -63,6 +63,10 @@
 	--components-simpleSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical);
 }
 
+@mixin invalidHover {
+	--components-simpleSelect-border-color: var(--pr-t-color-input-border-critical-hover);
+}
+
 @mixin disabled {
 	--components-simpleSelect-background: var(--pr-t-color-input-background-disabled);
 	--components-simpleSelect-placeholder: var(--commons-disabled-placeholder); // Deprecated: no placeholder with disabled state

package/src/components/simpleSelect/vars.scss

@@ -1,4 +1,5 @@
 @mixin vars {
+	--components-simpleSelect-width: auto;
 	--components-simpleSelect-font: var(--pr-t-font-body-M);
 	--components-simpleSelect-padding: var(--pr-t-spacings-100);
 	--components-simpleSelect-gap: var(--pr-t-spacings-100);

package/src/components/tag/component.scss

@@ -5,14 +5,12 @@
 	background-color: var(--components-tag-background);
 	border-radius: var(--pr-t-border-radius-small);
 	padding-block: 0;
-	padding-inline: var(--pr-t-spacings-50);
-
-	/* autoprefixer: off */
+	padding-inline: var(--components-tag-padding-inline);
 	text-decoration: var(--components-tag-decoration);
 	box-shadow: 0 0 0 1px var(--components-tag-shadow);
 	gap: var(--components-tag-gap);
 	cursor: var(--components-tag-cursor);
-	display: inline-flex;
+	display: var(--components-tag-display);
 	align-items: center;
 	text-align: center;
 	vertical-align: baseline;
@@ -42,9 +40,11 @@
 	@at-root ($atRoot) {
 		.tag-content {
 			outline: none;
-
-			/* autoprefixer: off */
 			text-decoration: var(--components-tag-decoration);
+
+			&:empty {
+				display: none;
+			}
 		}
 	}
 }

package/src/components/tag/index.scss

@@ -40,6 +40,23 @@
 
 		&:has(.lucca-icon) {
 			@include withIcon;
+
+			// mask condition is necessary for hiddenLabel
+			&:not(:has(.tag-content)),
+			&:has(.tag-content:empty),
+			&:has(.tag-content.pr-u-mask) {
+				@include onlyIcon;
+			}
+		}
+
+		&:has(.tag-content:empty) {
+			&:not(:has(.lucca-icon)) {
+				@include empty;
+			}
+		}
+
+		&:empty {
+			@include empty;
 		}
 	}
 }

package/src/components/tag/mods.scss

@@ -78,3 +78,7 @@
 @mixin withIcon {
 	--components-tag-before-content: ' ';
 }
+
+@mixin onlyIcon {
+	--components-tag-padding-inline: var(--pr-t-spacings-25);
+}

package/src/components/tag/states.scss

@@ -8,3 +8,7 @@
 @mixin focusVisible {
 	@include a11y.focusVisible;
 }
+
+@mixin empty {
+	--components-tag-display: none;
+}

package/src/components/tag/vars.scss

@@ -9,6 +9,8 @@
 	--components-tag-boxShadow: 0 0 0 1px var(--components-tag-shadow);
 	--components-tag-position: static;
 	--components-tag-before-content: none;
+	--components-tag-display: inline-flex;
+	--components-tag-padding-inline: var(--pr-t-spacings-50);
 
 	// Deprecated
 	--components-tag-fontSize: var(--pr-t-font-body-S-fontSize);

package/src/components/textField/index.scss

@@ -1,3 +1,5 @@
+@use '@lucca-front/scss/src/commons/config';
+
 @use 'exports' as *;
 
 .textField {
@@ -23,6 +25,12 @@
 			@include XS;
 		}
 
+		@each $value in config.$fieldsWidth {
+			&.mod-width#{$value} {
+				@include width($value);
+			}
+		}
+
 		&.mod-valueAlignRight {
 			@include valueAlignRight;
 		}

package/src/components/textField/mods.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '@lucca-front/scss/src/components/clear/exports' as clear;
 @use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/icons/src/icon/exports' as icon;
@@ -64,6 +65,10 @@
 	}
 }
 
+@mixin width($value) {
+	--component-textField-width: #{math.div($value, 2) * 1rem};
+}
+
 @mixin valueAlignRight {
 	.textField-input-value {
 		text-align: end;

package/src/components/userPopover/component.scss

@@ -42,15 +42,17 @@
 		}
 
 		.userPopover-details-info-name-linkOptional {
-			color: currentColor;
-			text-decoration: underline;
 			text-decoration-thickness: 0.75px;
 			text-underline-offset: 3px;
 
 			&:hover {
-				color: currentColor;
 				text-decoration-thickness: 1.5px;
 			}
+
+			&.link {
+				--components-link-color: var(--pr-t-color-text-highlight);
+				--components-link-color-hover: var(--pr-t-color-text-highlight);
+			}
 		}
 
 		.userPopover-details-info-detail {
@@ -62,19 +64,6 @@
 			display: flex;
 			align-items: flex-start;
 			gap: var(--pr-t-spacings-50);
-			color: currentColor;
-			text-decoration: none;
-
-			&:is(a, button) {
-				&:hover,
-				&:focus {
-					color: currentColor;
-
-					.userPopover-details-info-detail-workplace-state {
-						text-decoration: underline;
-					}
-				}
-			}
 		}
 	}