@lucca-front/scss 22.0.3 → 22.1.0-rc.1

package/package.json

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

package/src/commons/base.scss

@@ -24,29 +24,11 @@
 @mixin base($atRoot: namespace.$defaultAtRoot) {
 	@at-root ($atRoot) {
 		@if config.$fontFamily {
-			@include core.fontFace(
-				config.$fontFamily,
-				config.$fontWeights,
-				config.$fontStyles,
-				$unicodeRange: config.$fontCoreRange
-			);
-			@include core.fontFace(
-				config.$fontFamily,
-				config.$fontWeights,
-				config.$fontStyles,
-				$unicodeRange: config.$fontExtendedRange,
-				$filenameSuffix: '-extended'
-			);
+			@include core.fontFace(config.$fontFamily, config.$fontWeights, config.$fontStyles);
 		}
 
 		@if config.$fontFamilyBrand {
-			@include core.fontFace(
-				config.$fontFamilyBrand,
-				config.$fontWeightsBrand,
-				config.$fontStylesBrand,
-				$path: config.$fontPathBrand,
-				$unicodeRangeFolder: config.$fontUnicodeRangeFolderBrand
-			);
+			@include core.fontFace(config.$fontFamilyBrand, config.$fontWeightsBrand, config.$fontStylesBrand);
 		}
 
 		@if config.$fontFamilyCursive {

package/src/commons/config.scss

@@ -13,35 +13,6 @@ $deprecatedUtilityPrefix: false !default;
 $prefersContrast: 'no-preference' !default;
 
 $fontFamily: 'SourceSans' !default;
-
-$fontPath: '//cdn.lucca.fr/transverse/fonts' !default;
-
-$fontPathBrand: $fontPath !default;
-
-$fontUnicodeRangeFolder: 'unicode-range' !default;
-
-$fontUnicodeRangeFolderBrand: $fontUnicodeRangeFolder !default;
-
-// Covers fr/en/de/es/it/nl/pt/ca on their own: ASCII
-// + Latin-1 Supplement (letters/punctuation/currency), Œ œ Ÿ,
-// and common typographic punctuation.
-
-// ¡ ¢ £ ¥ ¨ © ª « ® ° ± ´ · ¸ º » ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý ß à á â ã ä å æ ç è
-// é ê ë ì í î ï ñ ò ó ô õ ö ÷ ø ù ú û ü ý ÿ Œ œ Ÿ – — ‘ ’ ‚ “ ” „ • … ‰ ‹ › ⁄ € ™ − fi fl (+ a thin space, U+2009)
-
-$fontCoreRange: 'U+0020-007E, U+00A0-00A3, U+00A5, U+00A8-00AB, U+00AE, U+00B0-00B1, U+00B4, U+00B7-00B8, U+00BA-00BB, U+00BF-00CF, U+00D1-00DD, U+00DF-00EF, U+00F1-00FD, U+00FF, U+0152-0153, U+0178, U+2009, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+202F-2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02' !default;
-
-// Only fetched by the browser when a page actually renders one of these glyphs:
-// Central/Eastern European Latin
-// Extended-A/B (pl/cs/hr/ro/hu/tr),
-// Vietnamese-style tilde/grave vowels and ẞ found in LuccaSans,
-// spacing modifiers, and arrows.
-
-// Ă ă Ą ą Ć ć Č č Ď ď Đ đ Ę ę Ě ě Ğ ğ Ĩ ĩ İ ı Ł ł Ń ń Ň ň Ő ő Ř ř Ś ś Ş ş Š š Ť ť Ũ ũ Ů ů Ű ű Ŷ ŷ Ź ź Ż ż Ž ž Ș ș
-// Ț ț ˆ ˜ ô ẞ Ẽ ẽ Ỳ ỳ Ỹ ỹ ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ≈ ≠ ≤ ≥
-
-$fontExtendedRange: 'U+0102-0107, U+010C-0111, U+0118-011B, U+011E-011F, U+0128-0129, U+0130-0131, U+0141-0144, U+0147-0148, U+0150-0151, U+0158-015B, U+015E-0161, U+0164-0165, U+0168-0169, U+016E-0171, U+0176-0177, U+0179-017E, U+0218-021B, U+02C6, U+02DC, U+0302, U+1E9E, U+1EBC-1EBD, U+1EF2-1EF3, U+1EF8-1EF9, U+2190-2199, U+2248, U+2260, U+2264-2265' !default;
-
 $fontFamilyBrand: 'LuccaSans' !default;
 $fontWeights: (
 	'regular': 400,

package/src/commons/core.scss

@@ -157,46 +157,28 @@ $cursor: 'pointer', 'auto', 'default', 'text';
 	}
 }
 
-@mixin fontFace(
-	$family,
-	$weights,
-	$styles,
-	$path: config.$fontPath,
-	$unicodeRange: null,
-	$filenameSuffix: '',
-	$unicodeRangeFolder: config.$fontUnicodeRangeFolder
-) {
-	$familyPath: '#{$path}/#{$family}';
-
-	@if $unicodeRange {
-		$familyPath: '#{$familyPath}/#{$unicodeRangeFolder}';
-	}
-
+@mixin fontFace($family, $weights, $styles, $path: '//cdn.lucca.fr/transverse/fonts') {
 	@each $keyword, $number in $weights {
 		@each $style in $styles {
 			@if $style == 'normal' {
 				@font-face {
 					font-family: '#{$family}';
-					src: url('#{$familyPath}/#{$keyword}#{$filenameSuffix}.woff2') format('woff2');
+					src:
+						url('#{$path}/#{$family}/#{$keyword}.woff2') format('woff2'),
+						url('#{$path}/#{$family}/#{$keyword}.woff') format('woff');
 					font-weight: #{$number};
 					font-style: #{$style};
 					font-display: swap;
-
-					@if $unicodeRange {
-						unicode-range: #{$unicodeRange};
-					}
 				}
 			} @else {
 				@font-face {
 					font-family: '#{$family}';
-					src: url('#{$familyPath}/#{$keyword}#{$filenameSuffix}-#{$style}.woff2') format('woff2');
+					src:
+						url('#{$path}/#{$family}/#{$keyword}-#{$style}.woff2') format('woff2'),
+						url('#{$path}/#{$family}/#{$keyword}-#{$style}.woff') format('woff');
 					font-weight: #{$number};
 					font-style: #{$style};
 					font-display: swap;
-
-					@if $unicodeRange {
-						unicode-range: #{$unicodeRange};
-					}
 				}
 			}
 		}

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

@@ -13,6 +13,7 @@
 	.bubbleIcon,
 	.softwareIcon,
 	.lucca-icon,
+	.icon,
 
 	// Texts
 	.code,
@@ -147,7 +148,7 @@
 	lu-bubble-illustration .bubbleIllustration,
 	lu-bubble-icon,
 	lu-software-icon .softwareIcon,
-	lu-icon .lucca-icon,
+	lu-icon .icon,
 
 	// Texts
 	lu-code .code,

package/src/commons/vars.scss

@@ -11,17 +11,7 @@
 	// TOKENS : TYPO
 
 	--pr-t-font-family: '#{config.$fontFamily}', Tahoma, sans-serif;
-	--pr-t-font-family-brand: var(--pr-t-font-family);
-
-	&:lang(fr),
-	&:lang(en),
-	&:lang(de),
-	&:lang(nl),
-	&:lang(it),
-	&:lang(pt),
-	&:lang(es) {
-		--pr-t-font-family-brand: '#{config.$fontFamilyBrand}', Tahoma, sans-serif;
-	}
+	--pr-t-font-family-brand: '#{config.$fontFamilyBrand}', Tahoma, sans-serif;
 
 	@if (config.$fontFamilyCursive) {
 		--pr-t-font-family-cursive: '#{config.$fontFamilyCursive}', cursive;

package/src/components/activityFeed/component.scss

@@ -32,7 +32,6 @@
 		.activityFeed-step-state,
 		.activityFeed-step-avatar {
 			margin-block: var(--pr-t-spacings-75);
-			flex-shrink: 0;
 		}
 
 		.activityFeed-step-state {

package/src/components/bubbleIcon/mods.scss

@@ -3,25 +3,19 @@
 @mixin XS {
 	--components-bubbleIcon-size: var(--pr-t-spacings-300);
 
-	.lucca-icon {
-		@include icon.XS;
-	}
+	@include icon.XS;
 }
 
 @mixin S {
 	--components-bubbleIcon-size: var(--pr-t-spacings-400);
 
-	.lucca-icon {
-		@include icon.S;
-	}
+	@include icon.S;
 }
 
 @mixin L {
 	--components-bubbleIcon-size: var(--pr-t-spacings-600);
 
-	.lucca-icon {
-		@include icon.L;
-	}
+	@include icon.L;
 }
 
 @mixin left {

package/src/components/button/mods.scss

@@ -1,11 +1,12 @@
-@use '@lucca-front/icons/src/icon/exports' as icons;
-@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/icons/src/icon/exports' as luccaIcon;
+@use '@lucca-front/icons/src/commons/utils/icon' as utilsIcon;
+@use '@lucca-front/scss/src/components/icon/exports' as icon;
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
 
 @mixin M {
-	@include icons.M;
+	@include luccaIcon.M;
 
 	--components-button-font: var(--pr-t-font-body-M);
 	--components-button-paddingBlock: var(--pr-t-spacings-100);
@@ -22,7 +23,7 @@
 }
 
 @mixin S {
-	@include icons.S;
+	@include luccaIcon.S;
 
 	--components-button-font: var(--pr-t-font-body-S);
 	--components-button-paddingBlock: var(--pr-t-spacings-75);
@@ -45,7 +46,7 @@
 }
 
 @mixin XS {
-	@include icons.XS;
+	@include luccaIcon.XS;
 
 	--components-button-font: var(--pr-t-font-body-XS);
 	--components-button-paddingBlock: var(--pr-t-spacings-50);
@@ -150,7 +151,7 @@
 	--components-button-padding: 0;
 
 	&::after {
-		@include icon.generate('arrow_chevron_bottom');
+		@include utilsIcon.generate('arrow_chevron_bottom');
 
 		block-size: 0;
 		order: -1;
@@ -283,8 +284,12 @@
 		@include color.borderGradient($gradient: var(--pr-t-color-border-ai));
 
 		&:not(.mod-invert) {
-			.lucca-icon {
-				@include icons.AI;
+			@include icon.whenRawIcon {
+				@include luccaIcon.AI;
+			}
+
+			@include icon.whenIconComponent {
+				@include icon.AI;
 			}
 		}
 	}

package/src/components/callout/mods.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/icons/src/icon/exports' as icons;
+@use '@lucca-front/scss/src/components/icon/exports' as icon;
 @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;
@@ -37,9 +38,13 @@
 	@include color.borderGradient($gradient: var(--pr-t-color-border-ai));
 
 	.callout-icon {
-		.lucca-icon {
+		@include icon.whenRawIcon {
 			@include icons.AI;
 		}
+
+		@include icon.whenIconComponent {
+			@include icon.AI;
+		}
 	}
 }
 

package/src/components/dataTable/component.scss

@@ -160,8 +160,6 @@
 
 	.statusBadge,
 	.tag,
-	lu-tag,
-	pr-tag,
 	.avatar {
 		vertical-align: top;
 	}

package/src/components/dialog/component.scss

@@ -108,7 +108,6 @@
 		}
 
 		.dialog-inside-header-actionOptional {
-			grid-area: action;
 			margin-inline-end: calc(var(--pr-t-spacings-100) * -1);
 
 			&:empty {

package/src/components/icon/component.scss

@@ -0,0 +1,8 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	block-size: var(--components-icon-size, var(--icon-size, var(--components-icon-sizeDefault)));
+	inline-size: var(--components-icon-size, var(--icon-size, var(--components-icon-sizeDefault)));
+	color: var(--components-icon-color);
+	fill: currentColor;
+}

package/src/components/icon/exports.scss

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

package/src/components/icon/index.scss

@@ -0,0 +1,67 @@
+@use 'exports' as *;
+
+// where is for specificity here
+:where(lu-icon, pr-icon) .lucca-icon {
+	@layer components {
+		@include vars;
+		@include component;
+	}
+
+	@layer mods {
+		&.mod-XXS {
+			@include XXS;
+		}
+
+		&.mod-XS {
+			@include XS;
+		}
+
+		&.mod-S {
+			@include S;
+		}
+
+		&.mod-M {
+			@include M;
+		}
+
+		&.mod-L {
+			@include L;
+		}
+
+		&.mod-XL {
+			@include XL;
+		}
+
+		&.mod-XXL {
+			@include XXL;
+		}
+
+		&.icon-color-product {
+			@include colorProduct;
+		}
+
+		&.icon-color-error {
+			@include colorError;
+		}
+
+		&.icon-color-warning {
+			@include colorWarning;
+		}
+
+		&.icon-color-success {
+			@include colorSuccess;
+		}
+
+		&.icon-color-light {
+			@include colorLight;
+		}
+
+		&.icon-color-placeholder {
+			@include colorPlaceholder;
+		}
+
+		&.mod-AI {
+			@include AI;
+		}
+	}
+}

package/src/components/icon/mods.scss

@@ -0,0 +1,67 @@
+@mixin XXS {
+	--components-icon-size: 0.75rem;
+}
+
+@mixin XS {
+	--components-icon-size: 1rem;
+}
+
+@mixin S {
+	--components-icon-size: 1.25rem;
+}
+
+@mixin M {
+	--components-icon-size: 1.5rem;
+}
+
+@mixin L {
+	--components-icon-size: 1.75rem;
+}
+
+@mixin XL {
+	--components-icon-size: 2rem;
+}
+
+@mixin XXL {
+	--components-icon-size: 2.5rem;
+}
+
+@mixin colorProduct {
+	--components-icon-color: var(--palettes-product-700);
+}
+
+@mixin colorError {
+	--components-icon-color: var(--palettes-error-700);
+}
+
+@mixin colorWarning {
+	--components-icon-color: var(--palettes-warning-700);
+}
+
+@mixin colorSuccess {
+	--components-icon-color: var(--palettes-success-700);
+}
+
+@mixin colorLight {
+	--components-icon-color: var(--palettes-neutral-600);
+}
+
+@mixin colorPlaceholder {
+	--components-icon-color: var(--palettes-neutral-400);
+}
+
+@mixin AI {
+	fill: url('#lu-icon-ai-gradient');
+}
+
+@mixin whenIconComponent {
+	:where(lu-icon, pr-icon) .lucca-icon {
+		@content;
+	}
+}
+
+@mixin whenRawIcon {
+	.lucca-icon:where(:not(:where(lu-icon, pr-icon) .lucca-icon)) {
+		@content;
+	}
+}

package/src/components/icon/vars.scss

@@ -0,0 +1,4 @@
+@mixin vars {
+	--components-icon-color: inherit;
+	--components-icon-sizeDefault: 1.5rem;
+}

package/src/components/index.scss

@@ -116,6 +116,7 @@
 @forward 'bubbleIllustration';
 @forward 'bubbleIcon';
 @forward 'softwareIcon';
+@forward 'icon';
 @forward 'progressStepper';
 @forward 'activityFeed';
 @forward 'impersonation';

package/src/components/indexTable/component.scss

@@ -277,8 +277,6 @@
 
 	.statusBadge,
 	.tag,
-	lu-tag,
-	pr-tag,
 	.avatar {
 		vertical-align: top;
 	}

package/src/components/listboxOption/component.scss

@@ -66,11 +66,6 @@
 			}
 		}
 
-		.listboxOption-content-value {
-			flex-grow: 1;
-			min-inline-size: 0;
-		}
-
 		.listboxOption-content-checkboxField.checkboxField {
 			margin-block-start: var(--pr-t-spacings-25);
 			display: var(--components-listboxOption-content-checkboxField-display);

package/src/components/tag/component.scss

@@ -6,13 +6,11 @@
 	border-radius: var(--pr-t-border-radius-small);
 	padding-block: 0;
 	padding-inline: var(--pr-t-spacings-50);
-
-	/* autoprefixer: off */
 	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

@@ -41,5 +41,15 @@
 		&:has(.lucca-icon) {
 			@include withIcon;
 		}
+
+		&:has(.tag-content:empty) {
+			&:not(:has(.lucca-icon)) {
+				@include empty;
+			}
+		}
+
+		&:empty {
+			@include empty;
+		}
 	}
 }

package/src/components/tag/mods.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/icons/src/icon/exports' as icons;
+@use '@lucca-front/scss/src/components/icon/exports' as icon;
 @use '@lucca-front/scss/src/commons/utils/color';
 
 @mixin clickable {
@@ -69,9 +70,13 @@
 			$pseudo: '::after',
 		);
 
-		.lucca-icon {
+		@include icon.whenRawIcon {
 			@include icons.AI;
 		}
+
+		@include icon.whenIconComponent {
+			@include icon.AI;
+		}
 	}
 }
 

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,7 @@
 	--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;
 
 	// Deprecated
 	--components-tag-fontSize: var(--pr-t-font-body-S-fontSize);

package/src/components/tooltip/component.scss

@@ -13,25 +13,13 @@
 	margin: var(--components-tooltip-margin);
 	text-align: center;
 	inline-size: fit-content;
-	animation-name: scaleIn, tooltipPointerEventsIn;
-	animation-delay: var(--components-tooltip-animationDelay);
+	animation-name: scaleIn;
 	animation-duration: var(--commons-animations-durations-fast);
 	animation-iteration-count: 1;
-	animation-fill-mode: backwards;
 	overflow-wrap: break-word;
 
 	@include keyframe.scaleIn;
 
-	@keyframes tooltipPointerEventsIn {
-		0% {
-			pointer-events: none;
-		}
-
-		1% {
-			pointer-events: auto;
-		}
-	}
-
 	&:empty {
 		display: none;
 	}

package/src/components/tooltip/vars.scss

@@ -4,5 +4,4 @@
 	--components-tooltip-max-width: 15rem;
 	--components-tooltip-transformOrigin: center;
 	--components-tooltip-margin: 0;
-	--components-tooltip-animationDelay: 300ms;
 }