@lucca-front/scss 21.1.1 → 21.1.2-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.1.1",
+  "version": "21.1.2-rc.1",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,7 +23,7 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "21.1.1",
-    "@lucca/prisme": "21.1.1"
+    "@lucca-front/icons": "21.1.2-rc.1",
+    "@lucca/prisme": "21.1.2-rc.1"
   }
 }

package/src/commons/config.scss

@@ -183,7 +183,7 @@ $cleemy: (
 	200: #a4e0da,
 	300: #7acdc6,
 	400: #54bbb2,
-	500: #00ada5,
+	500: #00a39c,
 	600: #009491,
 	700: #007a78,
 	800: #00545c,
@@ -231,8 +231,8 @@ $poplee: (
 	200: #b1def6,
 	300: #98d2f1,
 	400: #7bc3ea,
-	500: #62b7e4,
-	600: #3a9ed4,
+	500: #48abe0,
+	600: #2b8fc5,
 	700: #0b77b1,
 	800: #005685,
 	900: #003c5c
@@ -663,6 +663,7 @@ $spacings: (
 	'100': 0.5rem,
 	'150': 0.75rem,
 	'200': 1rem,
+	'250': 1.25rem,
 	'300': 1.5rem,
 	'400': 2rem,
 	'500': 2.5rem,

package/src/commons/utils/highlight-prisme.scss

@@ -0,0 +1,272 @@
+.pr-u-highlightPrisme {
+	// HTML COMPONENTS OUTSIDE
+
+	// Actions
+	.button,
+	.buttonGroup,
+	.link,
+
+	// Icons
+	.bubbleIllustration,
+	.bubbleIcon,
+	.softwareIcon,
+	.lucca-icon,
+
+	// Texts
+	.code,
+	.comment,
+	.newBadge,
+	.numericBadge,
+	.plgPush,
+	.readMore,
+	.statusBadge,
+	.tag,
+	.textFlow,
+	.mobilePush,
+	.presentation,
+
+	// Lists
+	.chip,
+	.indexTable,
+	.sortableList,
+	.listing,
+
+	// Forms
+	.calendar,
+	.color,
+	.textField,
+	.checkboxField,
+	.switchField,
+	.radioField,
+	.clear,
+	.dateField,
+	.dateRangeField,
+	.timepicker,
+	.form,
+	.fieldset,
+	.fileUpload,
+	.fileEntry,
+	.fileToolbar,
+	.formLabel,
+	.inlineMessage,
+	.inputFramed,
+	.richText,
+	.simpleSelect,
+	.multiSelect,
+	.listboxOption,
+
+	// Feedback
+	.callout,
+	.calloutDisclosure,
+	.calloutPopover,
+	.calloutPopover-overlay,
+	.calloutFeedbackList,
+	.errorPage,
+	.gauge,
+	.toast,
+
+	// Navigation
+	.breadcrumbs,
+	.mobileNavigation,
+	.navside,
+	.pagination,
+	.segmentedControl,
+	.skipLinks,
+	.horizontalNavigation,
+	.timeline,
+	.tableOfContent,
+	.verticalNavigation,
+
+	// Overlays
+	.popover,
+	.dropdown,
+	.dialog,
+	.tooltip,
+
+	// Structure
+	.box,
+	.card,
+	.container,
+	.divider,
+	.emptyState,
+	.fancyBox,
+	.filterPill,
+	.filterBar,
+	.footer,
+	.grid,
+	.highlightData,
+	.mobileHeader,
+	.pageHeader,
+	.resourceCard,
+	.appLayout,
+	.mainLayout,
+
+	// Users
+	.avatar,
+	.userPopover,
+	.userTile,
+
+	// Loaders
+	.loading,
+	.progress,
+	.skeleton,
+
+	// Misc & oldies
+	.scrollBox,
+	.suggestion,
+	.section,
+	.collapse,
+	.titleSection,
+	.contentSection {
+		outline: 2px dashed springgreen;
+		outline-offset: 3px;
+	}
+
+	// HTML COMPONENTS INSIDE
+
+	.dataTable {
+		outline: 2px dashed springgreen;
+		outline-offset: -3px;
+	}
+
+	// ANGULAR COMPONENTS
+
+	[luButton],
+	[luLink],
+
+	// Icons
+	lu-bubble-illustration,
+	lu-bubble-icon,
+	lu-software-icon .softwareIcon,
+	lu-icon .lucca-icon,
+
+	// Texts
+	lu-code .code,
+	lu-comment,
+	lu-new-badge,
+	lu-numeric-badge,
+	lu-plg-push,
+	lu-read-more,
+	lu-status-badge,
+	lu-tag .tag,
+	lu-text-flow,
+	lu-mobile-push,
+	lu-data-presentation,
+
+	// Lists
+	lu-chip, [luChip]
+	lu-data-table .dataTable,
+	lu-index-table,
+	lu-sortable-list .sortableList,
+	lu-listing-item,
+
+	// Forms
+	lu-form-field,
+	lu-color-input,
+	lu-text-input,
+	lu-checkbox-input,
+	lu-switch-input,
+	lu-radio-input,
+	lu-clear,
+	lu-date-input,
+	lu-date-range-input,
+	lu-time-picker,
+	lu-duration-picker,
+	[luForm],
+	lu-fieldset,
+	lu-single-file-upload,
+	lu-multi-file-upload,
+	lu-file-entry,
+	lu-inline-message,
+	lu-input-framed,
+	lu-rich-text-input,
+	lu-simple-select,
+	lu-multi-select,
+	lu-listbox-option,
+
+	// Feedback
+	lu-callout .callout,
+	lu-callout-disclosure,
+	lu-callout-popover,
+	lu-callout-feedback-list,
+	lu-gauge .gauge,
+	lu-toasts,
+
+	// Navigation
+	lu-breadcrumbs,
+	lu-mobile-navigation,
+	lu-pagination,
+	lu-segmented-control,
+	lu-skip-links,
+	lu-horizontal-navigation,
+	lu-table-of-content,
+	lu-vertical-navigation,
+
+	// Overlays
+	lu-popover-content,
+	lu-dropdown-item,
+	lu-dialog,
+	lu-dialog-header,
+	lu-dialog-content,
+	lu-dialog-footer,
+	lu-tooltip-panel,
+
+	// Structure
+	lu-box,
+	lu-container,
+	lu-divider,
+	lu-empty-state-page,
+	lu-empty-state-section,
+	lu-fancy-box,
+	lu-filter-pill,
+	lu-filter-bar,
+	lu-footer,
+	lu-grid,
+	lu-highlight-data,
+	lu-mobile-header,
+	lu-page-header,
+	lu-resource-card,
+	lu-app-layout,
+	lu-main-layout,
+
+	// Users
+	lu-user-picture,
+	lu-user-tile,
+
+	// Loaders
+	lu-loading,
+	lu-progress-bar .progress,
+	lu-skeleton-button,
+	lu-skeleton-field,
+	lu-skeleton-header,
+	lu-skeleton-index-table,
+	lu-skeleton-data-table,
+
+	// Misc & oldies
+	lu-scroll-box {
+		outline: 2px solid springgreen !important;
+		outline-offset: 3px;
+	}
+
+	// DEPRECATED COMPONENTS
+
+	.checkbox,
+	.switch,
+	.radio,
+	.file,
+	.list,
+	.label,
+	.radioButtons,
+	.textfield,
+	.table,
+	.main,
+	.filters,
+	.notchBox,
+	.layout,
+	.header,
+	.filterBarDeprecated,
+	lu-skeleton-table {
+		outline: 2px solid red;
+		outline-offset: 3px;
+	}
+}

package/src/commons/utils/index.scss

@@ -4,6 +4,7 @@
 @use '@lucca-front/icons/src/commons/core' as transform;
 @use '@lucca-front/scss/src/commons/core';
 
+@use '@lucca-front/scss/src/commons/utils/highlight-prisme';
 @use '@lucca-front/scss/src/commons/utils/keyframe';
 @use '@lucca-front/scss/src/commons/utils/reset';
 @use '@lucca-front/scss/src/commons/utils/text';

package/src/components/color/mods.scss

@@ -1,7 +1,7 @@
 @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));
+	--components-color-value-inlineSize: var(--pr-t-spacings-250);
 }
 
 @mixin L {

package/src/components/color/vars.scss

@@ -1,7 +1,7 @@
 @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-inlineSize: var(--pr-t-spacings-250);
 	--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);

package/src/components/fancyBox/index.scss

@@ -11,9 +11,9 @@
 		@include media.max('XS') {
 			@include narrow;
 		}
-	}
 
-	&.mod-S {
-		@include S;
+		&.mod-S {
+			@include S;
+		}
 	}
 }

package/src/components/fileUpload/component.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/color';
 
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/components/button/exports' as button;
@@ -89,6 +90,11 @@
 		.fileUpload-button.button {
 			visibility: var(--components-fileUpload-button-visibility);
 			display: var(--components-fileUpload-button-display);
+
+			&:not(.mod-filled) {
+				@include button.outlined;
+				@include color.palette('product');
+			}
 		}
 
 		.fileUpload-instruction-filename {

package/src/components/listing/component.scss

@@ -34,7 +34,7 @@
 		}
 
 		.listing-item-icon {
-			inline-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50));
+			inline-size: var(--pr-t-spacings-250);
 			aspect-ratio: 1;
 			margin-top: var(--pr-t-spacings-25);
 			background-color: var(--components-listing-item-icon-backgroundColor);

package/src/components/mainLayout/index.scss

@@ -13,13 +13,11 @@
 
 	@layer mods {
 		&:has(.mainLayout-content-inside-header.mod-sticky) {
-			@include stickyHeader;
-			@include stickyTop;
+			@include stickyHeaderVertical;
 		}
 
 		&:has(.mainLayout-content-inside-footer.mod-sticky) {
-			@include stickyFooter;
-			@include stickyBottom;
+			@include stickyFooterVertical;
 		}
 	}
 }
@@ -28,11 +26,11 @@
 	.mainLayout-content-inside {
 		&:has(.mainLayout-content-inside-block.mod-overflow) {
 			.mainLayout-content-inside-header {
-				@include stickyHeader;
+				@include stickyHeaderHorizontal;
 			}
 
 			.mainLayout-content-inside-footer {
-				@include stickyFooter;
+				@include stickyFooterHorizontal;
 			}
 
 			.mainLayout-content-inside-block:not(.mod-overflow) {

package/src/components/mainLayout/mods.scss

@@ -2,24 +2,26 @@
 	--components-mainLayout-flexDirection: row;
 }
 
-@mixin stickyHeader {
+@mixin stickyHeaderHorizontal {
 	--components-mainLayout-content-inside-header-position: sticky;
-	--components-mainLayout-content-inside-header-backgroundColor: var(--commons-background-base);
 }
 
-@mixin stickyFooter {
+@mixin stickyFooterHorizontal {
 	--components-mainLayout-content-inside-footer-position: sticky;
-	--components-mainLayout-content-inside-footer-backgroundColor: var(--commons-background-base);
 }
 
-@mixin stickyBlock {
-	--components-mainLayout-content-inside-block-position: sticky;
-}
-
-@mixin stickyTop {
+@mixin stickyHeaderVertical {
+	--components-mainLayout-content-inside-header-position: sticky;
 	--components-mainLayout-content-inside-header-insetBlockStart: 0;
+	--components-mainLayout-content-inside-header-backgroundColor: var(--commons-background-base);
 }
 
-@mixin stickyBottom {
+@mixin stickyFooterVertical {
+	--components-mainLayout-content-inside-footer-position: sticky;
 	--components-mainLayout-content-inside-footer-insetBlockEnd: 0;
+	--components-mainLayout-content-inside-footer-backgroundColor: var(--commons-background-base);
+}
+
+@mixin stickyBlock {
+	--components-mainLayout-content-inside-block-position: sticky;
 }

package/src/components/timeline/mods.scss

@@ -117,7 +117,7 @@
 	}
 
 	.timeline-step-description {
-		padding-inline-start: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50));
+		padding-inline-start: var(--pr-t-spacings-250);
 	}
 }