@lucca-front/scss 21.0.3 → 21.1.0-rc.1

package/package.json

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

package/src/commons/base.scss

@@ -6,7 +6,7 @@
 @use '@lucca-front/scss/src/commons/utils/color';
 
 @mixin body {
-	background-color: var(--pr-t-elevation-surface-default);
+	background-color: var(--commons-background-base);
 	color: var(--pr-t-color-text);
 	font: var(--pr-t-font-body-M);
 	text-rendering: geometricPrecision;

package/src/commons/config.scss

@@ -523,16 +523,16 @@ $pumpkin: (
 ) !default;
 
 $pineapple: (
-	50: #fdf8e3,
-	100: #faf2c6,
-	200: #f8eaa5,
+	50: #fef7d7,
+	100: #fbf1b6,
+	200: #fae999,
 	300: #f9e16c,
 	400: #f8dc4f,
 	500: #e7c623,
 	600: #d6b300,
-	700: #c29e00,
-	800: #9e8100,
-	900: #7a6400,
+	700: #b89600,
+	800: #8a7000,
+	900: #665400,
 ) !default;
 
 // https://sass-lang.com/documentation/variables/#advanced-variable-functions
@@ -613,7 +613,7 @@ $colorInput: (
 	icon-disabled: var(--palettes-neutral-500),
 	background: var(--palettes-neutral-0),
 	background-critical: var(--palettes-critical-50),
-	background-disabled: var(--palettes-neutral-100),
+	background-disabled: var(--palettes-neutral-50),
 	border: var(--palettes-neutral-300),
 	border-hover: var(--palettes-neutral-400),
 	border-checked: var(--palettes-product-400),

package/src/commons/vars.scss

@@ -82,7 +82,7 @@
 	--commons-font-family: '#{config.$fontFamily}', Tahoma, sans-serif;
 	--commons-font-family-brand: '#{config.$fontFamilyBrand}', sans-serif;
 
-	--commons-background-base: var(--palettes-neutral-25);
+	--commons-background-base: var(--pr-t-elevation-surface-default);
 
 	--commons-divider-color: var(--palettes-neutral-200);
 
@@ -90,6 +90,7 @@
 	--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;

package/src/components/bubbleIcon/component.scss

@@ -0,0 +1,54 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	color: var(--components-bubbleIcon-color);
+	inline-size: var(--components-bubbleIcon-size);
+	block-size: var(--components-bubbleIcon-size);
+	display: inline-grid;
+
+	@at-root ($atRoot) {
+		.bubbleIcon-icon,
+		.bubbleIcon-bubble {
+			grid-column-start: 1;
+			grid-row-start: 1;
+		}
+
+		.bubbleIcon-bubble {
+			scale: var(--components-bubbleIcon-bubble-scale);
+			inline-size: 100%;
+			block-size: 100%;
+		}
+
+		.bubbleIcon-bubble-pathBlock,
+		.bubbleIcon-bubble-pathInline {
+			fill: var(--components-bubbleIcon-bubble-path-fill);
+		}
+
+		.bubbleIcon-bubble-pathBlock {
+			display: var(--components-bubbleIcon-bubble-pathBlock-display);
+		}
+
+		.bubbleIcon-bubble-pathInline {
+			display: var(--components-bubbleIcon-bubble-pathInline-display);
+		}
+
+		.bubbleIcon-icon {
+			display: flex;
+			isolation: isolate;
+			position: relative;
+			inset-block-start: var(--components-bubbleIcon-icon-insetBlockStart);
+			inset-block-end: var(--components-bubbleIcon-icon-insetBlockEnd);
+			inset-inline-start: var(--components-bubbleIcon-icon-insetInlineStart);
+			inset-inline-end: var(--components-bubbleIcon-icon-insetInlineEnd);
+
+			lu-icon,
+			.lucca-icon {
+				margin: auto;
+
+				.lucca-icon {
+					margin: 0;
+				}
+			}
+		}
+	}
+}

package/src/components/bubbleIcon/exports.scss

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

package/src/components/bubbleIcon/index.scss

@@ -0,0 +1,48 @@
+
+
+@use 'exports' as *;
+
+.bubbleIcon {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
+
+		&.mod-L {
+			@include L;
+		}
+
+		&.is-success {
+			@include success;
+		}
+
+		&.is-critical {
+			@include critical;
+		}
+
+		&.is-warning {
+			@include warning;
+		}
+
+		&.mod-top {
+			@include top ;
+		}
+
+		&.mod-bottom {
+			@include bottom;
+		}
+
+		&.mod-left {
+			@include left;
+		}
+
+		&.mod-right {
+			@include right;
+		}
+	}
+}

package/src/components/bubbleIcon/mods.scss

@@ -0,0 +1,39 @@
+@use '@lucca-front/icons/src/icon/exports' as icon;
+
+@mixin S {
+	--components-bubbleIcon-size: var(--pr-t-spacings-400);
+
+	.lucca-icon {
+		@include icon.XS;
+	}
+}
+
+@mixin L {
+	--components-bubbleIcon-size: var(--pr-t-spacings-600);
+
+	.lucca-icon {
+		@include icon.L;
+	}
+}
+
+@mixin left {
+	--components-bubbleIcon-icon-insetInlineStart: var(--components-bubbleIcon-icon-insetOffset);
+}
+
+@mixin right {
+	--components-bubbleIcon-icon-insetInlineEnd: var(--components-bubbleIcon-icon-insetOffset);
+	--components-bubbleIcon-bubble-scale: -1 -1;
+}
+
+@mixin top {
+	--components-bubbleIcon-icon-insetBlockStart: var(--components-bubbleIcon-icon-insetOffset);
+	--components-bubbleIcon-bubble-pathBlock-display: inherit;
+	--components-bubbleIcon-bubble-pathInline-display: none;
+}
+
+@mixin bottom {
+	--components-bubbleIcon-icon-insetBlockEnd: var(--components-bubbleIcon-icon-insetOffset);
+	--components-bubbleIcon-bubble-pathBlock-display: inherit;
+	--components-bubbleIcon-bubble-pathInline-display: none;
+	--components-bubbleIcon-bubble-scale: -1 -1;
+}

package/src/components/bubbleIcon/states.scss

@@ -0,0 +1,13 @@
+@use '@lucca-front/scss/src/commons/utils/color';
+
+@mixin success {
+	@include color.palette('success');
+}
+
+@mixin critical {
+	@include color.palette('critical');
+}
+
+@mixin warning {
+	@include color.palette('warning');
+}

package/src/components/bubbleIcon/vars.scss

@@ -0,0 +1,13 @@
+@mixin vars {
+	--components-bubbleIcon-size: var(--pr-t-spacings-500);
+	--components-bubbleIcon-color: var(--palettes-600, var(--palettes-product-600));
+	--components-bubbleIcon-bubble-path-fill: var(--palettes-100, var(--palettes-product-100));
+	--components-bubbleIcon-bubble-pathBlock-display: none;
+	--components-bubbleIcon-bubble-pathInline-display: inherit;
+	--components-bubbleIcon-bubble-scale: 1;
+	--components-bubbleIcon-icon-insetOffset: 1px;
+	--components-bubbleIcon-icon-insetBlockStart: auto;
+	--components-bubbleIcon-icon-insetBlockEnd: auto;
+	--components-bubbleIcon-icon-insetInlineStart: auto;
+	--components-bubbleIcon-icon-insetInlineEnd: auto;
+}

package/src/components/bubbleIllustration/component.scss

@@ -0,0 +1,20 @@
+
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	display: inline-block;
+	inline-size: var(--components-bubbleIllustration-size);
+	block-size: var(--components-bubbleIllustration-size);
+
+	svg {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	@at-root ($atRoot) {
+		.bubbleIllustration-action {
+			display: var(--components-bubbleIllustration-action-display);
+		}
+	}
+}

package/src/components/bubbleIllustration/exports.scss

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

package/src/components/bubbleIllustration/index.scss

@@ -0,0 +1,34 @@
+@use 'exports' as *;
+
+.bubbleIllustration {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
+
+		&.mod-L {
+			@include L;
+		}
+
+		&.is-success {
+			@include success;
+		}
+
+		&.is-critical {
+			@include critical;
+		}
+
+		&.is-warning {
+			@include warning;
+		}
+
+		&:not(.mod-action) {
+			@include noAction;
+		}
+	}
+}

package/src/components/bubbleIllustration/mods.scss

@@ -0,0 +1,11 @@
+@mixin S {
+	--components-bubbleIllustration-size: var(--pr-t-spacings-400);
+}
+
+@mixin L {
+	--components-bubbleIllustration-size: var(--pr-t-spacings-600);
+}
+
+@mixin noAction {
+	--components-bubbleIllustration-action-display: none;
+}

package/src/components/bubbleIllustration/states.scss

@@ -0,0 +1,14 @@
+@use '@lucca-front/scss/src/commons/utils/color';
+
+
+@mixin success {
+	@include color.palette('success');
+}
+
+@mixin critical {
+	@include color.palette('critical');
+}
+
+@mixin warning {
+	@include color.palette('warning');
+}

package/src/components/bubbleIllustration/vars.scss

@@ -0,0 +1,4 @@
+@mixin vars {
+	--components-bubbleIllustration-action-display: block;
+	--components-bubbleIllustration-size: var(--pr-t-spacings-500);
+}

package/src/components/color/component.scss

@@ -0,0 +1,82 @@
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/text';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	display: flex;
+	align-items: center;
+	gap: var(--pr-t-spacings-100);
+
+	.color-value {
+		inline-size: var(--components-color-value-inlineSize);
+		aspect-ratio: 1;
+		background: var(--components-color-value-backgroundColor);
+		color: rgb(from var(--components-color-value-backgroundColor) var(--components-color-value-channel) var(--components-color-value-channel) var(--components-color-value-channel));
+		border-radius: var(--pr-t-border-radius-small);
+		box-shadow: inset 0 0 0 1px var(--components-color-value-boxShadowColor);
+		scale: var(--components-color-value-scale);
+		transition-property: scale;
+		transition-duration: var(--commons-animations-durations-fast);
+		flex-shrink: 0;
+
+		&::before {
+			@include icon.generate('sign_confirm');
+
+			display: var(--components-color-value-before-display);
+			position: absolute;
+			inset: 0;
+			place-items: center;
+			font-size: 1.5rem;
+		}
+	}
+
+	@at-root ($atRoot) {
+		.color-name {
+			@include text.ellipsis;
+		}
+	}
+}
+
+@mixin componentPicker($atRoot: namespace.$defaultAtRoot) {
+	inline-size: var(--components-colorPicker-inlineSize);
+
+	.simpleSelect-field-value {
+		padding: 1px;
+		margin: -1px;
+		min-inline-size: 0;
+	}
+
+	.simpleSelect-field-input {
+		padding-inline-start: var(--components-colorPicker-input-paddingInlineStart);
+		color: transparent;
+	}
+}
+
+@mixin componentPanel($atRoot: namespace.$defaultAtRoot) {
+	.lu-picker-content {
+		.cdk-overlay-pane:has(&) {
+			min-inline-size: 0 !important;
+			inline-size: 17rem;
+		}
+	}
+
+	[role="listbox"] {
+		display: flex;
+		flex-wrap: wrap;
+		padding: var(--pr-t-spacings-100);
+	}
+
+	.color {
+		padding: var(--pr-t-spacings-50);
+	}
+
+	@at-root ($atRoot) {
+		.colorPanel-highlighted {
+			display: flex;
+			padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
+			margin: 0 var(--pr-t-spacings-100) var(--pr-t-spacings-100);
+			gap: var(--pr-t-spacings-50);
+		}
+	}
+}

package/src/components/color/exports.scss

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

package/src/components/color/index.scss

@@ -0,0 +1,74 @@
+@use 'exports' as *;
+
+.color {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+		&.mod-M {
+			@include M;
+		}
+
+		&.mod-L {
+			@include L;
+		}
+
+		&.mod-XL {
+			@include XL;
+		}
+
+		[aria-selected="true"] & {
+			@include selected;
+		}
+
+		.optionItem.is-highlighted &,
+		[role="listbox"] .optionItem:hover & {
+			@include highlighted;
+		}
+	}
+}
+
+.colorPicker {
+	@layer components {
+		@include varsPicker;
+		@include componentPicker;
+	}
+
+	@layer mods {
+		&.mod-compact {
+			@include compact;
+
+			.form-field.mod-S & {
+				@include compactS;
+			}
+
+			&.is-clearable {
+				@include compactClearable;
+
+				.form-field.mod-S & {
+					@include compactClearableS;
+				}
+			}
+		}
+
+		&.is-selected:not(.is-searchFilled) {
+			@include selectedNotFilled;
+
+			.form-field.mod-S & {
+				@include selectedNotFilledS;
+			}
+		}
+	}
+}
+
+.colorPanel {
+	@layer components {
+		@include componentPanel;
+	}
+
+	@layer mods {
+		@include childrenReset;
+	}
+}

package/src/components/color/mods.scss

@@ -0,0 +1,48 @@
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin M {
+	--components-color-value-inlineSize: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50));
+}
+
+@mixin L {
+	--components-color-value-inlineSize: var(--pr-t-spacings-300);
+}
+
+@mixin XL {
+	--components-color-value-inlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
+}
+
+@mixin compact {
+	--components-colorPicker-inlineSize: 4.625rem;
+
+	.color-name {
+		@include a11y.mask;
+	}
+}
+
+@mixin compactS {
+	--components-colorPicker-inlineSize: 3.75rem;
+}
+
+@mixin compactClearable {
+	--components-colorPicker-inlineSize: 6.125rem;
+}
+
+@mixin compactClearableS {
+	--components-colorPicker-inlineSize: 4.875rem;
+}
+
+@mixin childrenReset {
+	.lu-picker-content {
+		padding: 0;
+	}
+
+	.optionItem-value {
+		padding: 0;
+		background-color: transparent !important;
+
+		&::before {
+			display: none;
+		}
+	}
+}

package/src/components/color/states.scss

@@ -0,0 +1,15 @@
+@mixin selected {
+	--components-color-value-before-display: grid;
+}
+
+@mixin highlighted {
+	--components-color-value-scale: calc(7/6);
+}
+
+@mixin selectedNotFilled {
+	--components-colorPicker-input-paddingInlineStart: var(--pr-t-spacings-400);
+}
+
+@mixin selectedNotFilledS {
+	--components-colorPicker-input-paddingInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
+}

package/src/components/color/vars.scss

@@ -0,0 +1,13 @@
+@mixin vars {
+	--components-color-value-before-display: none;
+	--components-color-value-scale: 1;
+	--components-color-value-inlineSize: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50));
+	--components-color-value-boxShadowColor: transparent;
+	--components-color-value-backgroundColor: transparent;
+	--components-color-value-channel: clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255);
+}
+
+@mixin varsPicker {
+	--components-colorPicker-input-paddingInlineStart: 0;
+	--components-colorPicker-inlineSize: auto;
+}

package/src/components/container/index.scss

@@ -12,6 +12,7 @@
 			@include center;
 		}
 
+		// deprecated
 		&.mod-S {
 			@include S;
 		}

package/src/components/container/mods.scss

@@ -2,8 +2,9 @@
 	--commons-container-marginInline: auto;
 }
 
+// deprecated
 @mixin S {
-	--commons-container-padding: var(--pr-t-spacings-200);
+	--commons-container-padding: 0 var(--pr-t-spacings-200);
 }
 
 @mixin maxM {

package/src/components/emptyState/component.scss

@@ -18,12 +18,7 @@
 			inset-inline-start: var(--components-emptyState-container-left);
 			padding: 0;
 			inline-size: 100%;
-			position: sticky;
-
-			.container & {
-				--components-emptyState-container-maxWidth: none;
-				--components-emptyState-container-left: auto;
-			}
+			position: var(--components-emptyState-container-position);
 		}
 
 		.emptyState-content {

package/src/components/emptyState/index.scss

@@ -14,5 +14,15 @@
 		&.mod-center {
 			@include center;
 		}
+
+		.table &,
+		.indexTable &,
+		.dataTable & {
+			@include insideTable;
+		}
+
+		.container & {
+			@include insideContainer;
+		}
 	}
 }

package/src/components/emptyState/mods.scss

@@ -55,3 +55,12 @@
 		justify-content: center;
 	}
 }
+
+@mixin insideTable {
+	--components-emptyState-container-position: sticky;
+}
+
+@mixin insideContainer {
+	--components-emptyState-container-maxWidth: none;
+	--components-emptyState-container-left: auto;
+}

package/src/components/emptyState/vars.scss

@@ -1,6 +1,7 @@
 @mixin vars {
 	--components-emptyState-container-maxWidth: calc(100vw - var(--commons-navSide-width) - 7rem);
-	--components-emptyState-container-left: calc(var(--commons-navSide-width) + 3.5rem);
+	--components-emptyState-container-left: calc(var(--commons-navSide-width) + var(--pr-t-spacings-400));
+	--components-emptyState-container-position: static;
 
 	--components-emptyState-background-color: var(--pr-t-elevation-surface-default);
 	--components-emptyState-illustration-top-right-offset-left: min(

package/src/components/form/index.scss

@@ -101,6 +101,12 @@
 				@include withArrowS;
 			}
 		}
+
+		&:has(.formLabel.pr-u-mask) {
+			&:not(:has(.inlineMessage)) {
+				@include hiddenLabel;
+			}
+		}
 	}
 }