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

package/src/components/simpleSelect/index.scss

@@ -1,55 +1,63 @@
 @use 'exports' as *;
 
 .simpleSelect {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&:has(.simpleSelect-field-input:focus-visible) {
-		@include focused;
+	@layer states {
+		&:has(.simpleSelect-field-input:focus-visible) {
+			@include focused;
 
-		&:has(.simpleSelect-field-input[aria-expanded='true']) {
-			@include focusedExpanded;
+			&:has(.simpleSelect-field-input[aria-expanded='true']) {
+				@include focusedExpanded;
+			}
 		}
-	}
 
-	&:not(.mod-noClueIcon) {
-		&:has(.simpleSelect-field-input:focus-visible),
-		&:has(.simpleSelect-field-input[aria-expanded='true']) {
-			&:not(:has(.simpleSelect-field-input:read-only)) {
-				@include searchable;
+		&:not(.mod-noClueIcon) {
+			&:has(.simpleSelect-field-input:focus-visible),
+			&:has(.simpleSelect-field-input[aria-expanded='true']) {
+				&:not(:has(.simpleSelect-field-input:read-only)) {
+					@include searchable;
+				}
 			}
 		}
-	}
 
-	&:has(.simpleSelect-field-input[aria-invalid='true']) {
-		@include invalid;
-	}
+		&:has(.simpleSelect-field-input[aria-invalid='true']) {
+			@include invalid;
+		}
 
-	&:has(.simpleSelect-field-input:disabled) {
-		@include disabled;
+		&:has(.simpleSelect-field-input:disabled) {
+			@include disabled;
+		}
 	}
 
-	&.mod-S {
-		@include S;
-	}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-XS {
-		@include XS;
-	}
+		&.mod-XS {
+			@include XS;
+		}
 
-	&.mod-filterPill {
-		@include filterPill;
+		&.mod-filterPill {
+			@include filterPill;
+		}
 	}
 
-	&.is-searchFilled {
-		@include searchFilled;
-	}
+	@layer states {
+		&.is-searchFilled {
+			@include searchFilled;
+		}
 
-	&.is-selected {
-		@include selected;
+		&.is-selected {
+			@include selected;
 
-		&.is-searchFilled {
-			@include selectedSearchFilled;
+			&.is-searchFilled {
+				@include selectedSearchFilled;
+			}
 		}
 	}
 }

package/src/components/skeleton/index.scss

@@ -1,57 +1,63 @@
 @use 'exports' as *;
 
 .skeleton {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
 	// .mod-dark can be applied to .skeleton or .skeleton-item
-	&.mod-dark {
-		@include dark;
+	@layer mods {
+		&.mod-dark {
+			@include dark;
+		}
 	}
 
-	&.is-loading {
-		@include loading;
+	@layer states {
+		&.is-loading {
+			@include loading;
 
-		.skeleton-item {
-			// .mod-dark can be applied to .skeleton or .skeleton-item
-			&.mod-dark {
-				@include dark;
-			}
+			.skeleton-item {
+				// .mod-dark can be applied to .skeleton or .skeleton-item
+				&.mod-dark {
+					@include dark;
+				}
 
-			&.mod-square {
-				@include square;
-			}
+				&.mod-square {
+					@include square;
+				}
 
-			&.mod-circle {
-				@include circle;
-			}
+				&.mod-circle {
+					@include circle;
+				}
 
-			&.mod-XS {
-				@include XS;
-			}
+				&.mod-XS {
+					@include XS;
+				}
 
-			&.mod-S {
-				@include S;
-			}
+				&.mod-S {
+					@include S;
+				}
 
-			&.mod-L {
-				@include L;
-			}
+				&.mod-L {
+					@include L;
+				}
 
-			&.mod-XL {
-				@include XL;
-			}
+				&.mod-XL {
+					@include XL;
+				}
 
-			&.mod-XXL {
-				@include XXL;
-			}
+				&.mod-XXL {
+					@include XXL;
+				}
 
-			&.mod-alignRight {
-				@include alignRight;
-			}
+				&.mod-alignRight {
+					@include alignRight;
+				}
 
-			&.mod-alignCenter {
-				@include alignCenter;
+				&.mod-alignCenter {
+					@include alignCenter;
+				}
 			}
 		}
 	}

package/src/components/skipLinks/index.scss

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

package/src/components/sortableList/index.scss

@@ -1,16 +1,22 @@
 @use 'exports' as *;
 
 .sortableList {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-S {
-		@include S;
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 	}
 }
 
 .sortableList-item {
-	&.mod-clickable {
-		@include clickable;
+	@layer mods {
+		&.mod-clickable {
+			@include clickable;
+		}
 	}
 }

package/src/components/statusBadge/index.scss

@@ -1,10 +1,14 @@
 @use 'exports' as *;
 
 .statusBadge {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-L {
-		@include L;
+	@layer mods {
+		&.mod-L {
+			@include L;
+		}
 	}
 }

package/src/components/suggestion/component.scss

@@ -0,0 +1,19 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--pr-t-spacings-50);
+
+	@at-root ($atRoot) {
+		.suggestion-form-field {
+			z-index: 1;
+			position: relative;
+		}
+
+		.suggestion-callout-text {
+			text-decoration: var(--components-suggestion-textDecoration);
+			color: var(--components-suggestion-color);
+		}
+	}
+}

package/src/components/suggestion/exports.scss

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

package/src/components/suggestion/index.scss

@@ -0,0 +1,16 @@
+@use 'exports' as *;
+
+.suggestion {
+	@include vars;
+	@include component;
+
+	&:has(.suggestion-callout-accept:hover),
+	&:has(.suggestion-callout-accept:focus-visible) {
+		@include accept;
+	}
+
+	&:has(.suggestion-callout-reject:hover),
+	&:has(.suggestion-callout-reject:focus-visible) {
+		@include reject;
+	}
+}

package/src/components/suggestion/states.scss

@@ -0,0 +1,12 @@
+@use '@lucca-front/scss/src/components/textField/exports' as textField;
+
+@mixin reject {
+	--components-suggestion-textDecoration: line-through;
+	--components-suggestion-color: var(--pr-t-color-text-subtle);
+}
+
+@mixin accept {
+	.textField {
+		@include textField.lineThrough;
+	}
+}

package/src/components/suggestion/vars.scss

@@ -0,0 +1,4 @@
+@mixin vars {
+	--components-suggestion-textDecoration: none;
+	--components-suggestion-color: inherit;
+}

package/src/components/switch/index.scss

@@ -1,48 +1,54 @@
 @use 'exports' as *;
 
 .switch {
-	@include vars;
-	@include component;
-
-	&.mod-inline {
-		@include inline;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-S {
-		@include S;
+	@layer mods {
+		&.mod-inline {
+			@include inline;
+		}
+
+		&.mod-S {
+			@include S;
+		}
 	}
 }
 
-.switch-input {
-	&:is(:checked) {
-		@include checked;
+@layer states {
+	.switch-input {
+		&:is(:checked) {
+			@include checked;
 
-		&:hover {
-			@include checkedHover;
-		}
+			&:hover {
+				@include checkedHover;
+			}
 
-		&:active {
-			@include checkedActive;
+			&:active {
+				@include checkedActive;
+			}
 		}
-	}
 
-	&:is(:hover) {
-		@include hover;
-	}
+		&:is(:hover) {
+			@include hover;
+		}
 
-	&:is(:focus-visible) {
-		@include focus;
-	}
+		&:is(:focus-visible) {
+			@include focus;
+		}
 
-	&:is(:active) {
-		@include active;
-	}
+		&:is(:active) {
+			@include active;
+		}
 
-	&:is([disabled], [readonly]) {
-		@include disabled;
+		&:is([disabled], [readonly]) {
+			@include disabled;
 
-		&:is(:checked) {
-			@include disabledChecked;
+			&:is(:checked) {
+				@include disabledChecked;
+			}
 		}
 	}
 }

package/src/components/switchField/index.scss

@@ -1,32 +1,38 @@
 @use 'exports' as *;
 
 .switchField {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-S {
-		@include S;
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 	}
 }
 
 .switchField-input {
-	&:checked {
-		@include checked;
-	}
+	@layer states {
+		&:checked {
+			@include checked;
+		}
 
-	&:disabled {
-		@include disabled;
+		&:disabled {
+			@include disabled;
 
-		&:checked {
-			@include checkedDisabled;
+			&:checked {
+				@include checkedDisabled;
+			}
 		}
-	}
 
-	&[aria-invalid='true'] {
-		@include invalid;
+		&[aria-invalid='true'] {
+			@include invalid;
 
-		&:checked {
-			@include checkedInvalid;
+			&:checked {
+				@include checkedInvalid;
+			}
 		}
 	}
 }

package/src/components/table/index.scss

@@ -1,68 +1,74 @@
 @use 'exports' as *;
 
 .table {
-	@include vars;
-	@include component;
-
-	&.mod-zebra {
-		@include zebra;
+	@layer components {
+		@include vars;
+		@include component;
+
+		button.tableSortable {
+			--components-sortable-fontWeight: 600;
+			--components-sortable-fontSize: var(--pr-t-font-body-S-fontSize);
+			--components-sortable-lineHeight: var(--pr-t-font-body-S-lineHeight);
+			--components-sortable-arrowsOffset: var(--pr-t-spacings-25);
+		}
 	}
 
-	&.mod-alignTop {
-		@include alignTop;
-	}
+	@layer mods {
+		&.mod-zebra {
+			@include zebra;
+		}
 
-	&.mod-clickable {
-		@include clickable;
+		&.mod-alignTop {
+			@include alignTop;
+		}
+
+		&.mod-clickable {
+			@include clickable;
 
-		.table-head-row,
-		.table-body-row,
-		.table-foot-row {
-			&.mod-selectable {
-				@include clickableSelectable;
+			.table-head-row,
+			.table-body-row,
+			.table-foot-row {
+				&.mod-selectable {
+					@include clickableSelectable;
+				}
 			}
 		}
-	}
-
-	&.mod-card {
-		@include card;
-	}
 
-	&.mod-S {
-		@include S;
-	}
+		&.mod-card {
+			@include card;
+		}
 
-	&.mod-noOffset {
-		@include noOffset;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-borderless {
-		@include borderless;
-	}
+		&.mod-noOffset {
+			@include noOffset;
+		}
 
-	button.tableSortable {
-		--components-sortable-fontWeight: 600;
-		--components-sortable-fontSize: var(--pr-t-font-body-S-fontSize);
-		--components-sortable-lineHeight: var(--pr-t-font-body-S-lineHeight);
-		--components-sortable-arrowsOffset: var(--pr-t-spacings-25);
+		&.mod-borderless {
+			@include borderless;
+		}
 	}
 }
 
 .table-body-row,
 .table-foot-row {
-	&.mod-header {
-		@include header;
-	}
+	@layer mods {
+		&.mod-header {
+			@include header;
+		}
 
-	&.mod-child {
-		@include child;
-	}
+		&.mod-child {
+			@include child;
+		}
 
-	&.mod-parent {
-		@include parent;
+		&.mod-parent {
+			@include parent;
 
-		&.mod-collapsable {
-			@include collapsable;
+			&.mod-collapsable {
+				@include collapsable;
+			}
 		}
 	}
 }
@@ -70,45 +76,53 @@
 .table-head-row,
 .table-body-row,
 .table-foot-row {
-	&.mod-selectable {
-		@include selectable;
-	}
+	@layer mods {
+		&.mod-selectable {
+			@include selectable;
+		}
 
-	&.mod-draggable {
-		@include draggable;
+		&.mod-draggable {
+			@include draggable;
+		}
 	}
 }
 
 .table-head-row {
-	&.mod-twoLines {
-		@include twoLines;
+	@layer mods {
+		&.mod-twoLines {
+			@include twoLines;
+		}
 	}
 }
 
 .table-body-row-cell,
 .table-foot-row-cell {
-	&.mod-avatar {
-		@include avatar;
+	@layer mods {
+		&.mod-avatar {
+			@include avatar;
+		}
 	}
 }
 
 .table-head-row-cell,
 .table-body-row-cell,
 .table-foot-row-cell {
-	&.mod-actions {
-		@include actions;
+	@layer mods {
+		&.mod-actions {
+			@include actions;
 
-		// .mod-actionsHidden is deprecated
-		&.mod-actionsHidden {
-			@include actionsHidden;
+			// .mod-actionsHidden is deprecated
+			&.mod-actionsHidden {
+				@include actionsHidden;
+			}
 		}
-	}
 
-	&.mod-alignCenter {
-		@include alignCenter;
-	}
+		&.mod-alignCenter {
+			@include alignCenter;
+		}
 
-	&.mod-alignRight {
-		@include alignRight;
+		&.mod-alignRight {
+			@include alignRight;
+		}
 	}
 }

package/src/components/tableFixed/index.scss

@@ -1,18 +1,20 @@
 @use 'exports' as *;
 
 .table {
-	// 1 - Layout fixed
-	&.mod-layoutFixed {
-		@include layoutFixed;
-	}
+	@layer mods {
+		// 1 - Layout fixed
+		&.mod-layoutFixed {
+			@include layoutFixed;
+		}
 
-	// 2 - Layout fixed starting at breakpoint
-	&[class*='mod-layoutFixedAtMediaMin'] {
-		@include layoutFixedWithBreakpoint;
-	}
+		// 2 - Layout fixed starting at breakpoint
+		&[class*='mod-layoutFixedAtMediaMin'] {
+			@include layoutFixedWithBreakpoint;
+		}
 
-	// Cells management for 1 & 2
-	&[class*='mod-layoutFixed'] {
-		@include layoutFixedCells;
+		// Cells management for 1 & 2
+		&[class*='mod-layoutFixed'] {
+			@include layoutFixedCells;
+		}
 	}
 }