@lucca-front/scss 15.0.3 → 15.1.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "15.0.3",
+  "version": "15.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": "v15.0.3"
+    "@lucca-front/icons": "v15.1.0-rc.1"
   }
 }

package/src/commons/base.scss

@@ -3,8 +3,8 @@
 
 @use '@lucca-front/scss/src/commons/config';
 
-@mixin base {
-	@at-root {
+@mixin base($atRoot: 'without: rule') {
+	@at-root ($atRoot) {
 		@if config.$fontVariable {
 			@font-face {
 				font-family: 'Source Sans Pro';
@@ -17,7 +17,23 @@
 					url('//cdn.lucca.fr/fonts/SourceSans/SourceSans3VF-Roman.ttf') format('truetype');
 			}
 		} @else {
-			@import url('//fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
+			@font-face {
+				font-family: 'Source Sans Pro';
+				src: url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-regular.woff2') format('woff2'),
+					url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-regular.woff') format('woff');
+				font-weight: 400;
+				font-style: normal;
+				font-display: swap;
+			}
+
+			@font-face {
+				font-family: 'Source Sans Pro';
+				src: url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-semibold.woff2') format('woff2'),
+					url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-semibold.woff') format('woff');
+				font-weight: 600;
+				font-style: normal;
+				font-display: swap;
+			}
 		}
 
 		*,
@@ -34,8 +50,9 @@
 			background-color: var(--commons-background-base);
 			color: var(--palettes-grey-800);
 			font-family: var(--commons-font-family);
-			font-size: var(--sizes-standard-font-size);
-			line-height: var(--sizes-standard-line-height);
+			font-size: var(--sizes-M-fontSize);
+			line-height: var(--sizes-M-lineHeight);
+			scrollbar-gutter: stable;
 
 			@supports (-webkit-touch-callout: none) {
 				min-height: -webkit-fill-available;
@@ -43,7 +60,7 @@
 		}
 
 		p {
-			margin: 0 0 var(--spacings-small);
+			margin: 0 0 var(--spacings-S);
 		}
 
 		abbr {

package/src/commons/config.scss

@@ -97,69 +97,69 @@ $colorsRgb: (
 ) !default;
 
 $breakpoints: (
-	xxxs: 320px,
-	xxs: 480px,
-	xs: 640px,
-	s: 800px,
-	m: 1024px,
-	l: 1280px,
-	xl: 1366px,
-	xxl: 1600px,
-	xxxl: 1920px,
+	XXXS: 320px,
+	XXS: 480px,
+	XS: 640px,
+	S: 800px,
+	M: 1024px,
+	L: 1280px,
+	XL: 1366px,
+	XXL: 1600px,
+	XXXL: 1920px,
 );
 
 $spacings: (
-	reset: 0,
-	smallest: 0.25rem,
-	smaller: 0.5rem,
-	small: 1rem,
-	standard: 1.5rem,
-	big: 2rem,
-	bigger: 3rem,
-	biggest: 4rem,
+	'0': 0,
+	XXS: 0.25rem,
+	XS: 0.5rem,
+	S: 1rem,
+	M: 1.5rem,
+	L: 2rem,
+	XL: 3rem,
+	XXL: 4rem,
 );
 
 $sizes: (
-	smaller: (
-		font-size: 0.75rem,
-		line-height: 1rem,
-		vertical-padding: 0,
+	XS: (
+		fontSize: 0.75rem,
+		lineHeight: 1rem,
+		verticalPadding: 0,
 	),
-	small: (
-		font-size: 0.875rem,
-		line-height: 1.25rem,
-		vertical-padding: 0.125rem,
+	S: (
+		fontSize: 0.875rem,
+		lineHeight: 1.25rem,
+		verticalPadding: 0.125rem,
 	),
-	standard: (
-		font-size: 1rem,
-		line-height: 1.5rem,
-		vertical-padding: 0.125rem,
+	M: (
+		fontSize: 1rem,
+		lineHeight: 1.5rem,
+		verticalPadding: 0.125rem,
 	),
-	big: (
-		font-size: 1.125rem,
-		line-height: 1.5rem,
-		vertical-padding: 0.25rem,
+	L: (
+		fontSize: 1.125rem,
+		lineHeight: 1.5rem,
+		verticalPadding: 0.25rem,
 	),
-	bigger: (
-		font-size: 1.375rem,
-		line-height: 1.75rem,
-		vertical-padding: 0.5rem,
+	XL: (
+		fontSize: 1.375rem,
+		lineHeight: 1.75rem,
+		verticalPadding: 0.5rem,
 	),
-	biggest: (
-		font-size: 1.75rem,
-		line-height: 2rem,
-		vertical-padding: 0.25rem,
+	XXL: (
+		fontSize: 1.75rem,
+		lineHeight: 2rem,
+		verticalPadding: 0.25rem,
 	),
-	headline: (
-		font-size: 2.25rem,
-		line-height: 2.5rem,
-		vertical-padding: 0.5rem,
+	XXXL: (
+		fontSize: 2.25rem,
+		lineHeight: 2.5rem,
+		verticalPadding: 0.5rem,
 	),
 );
 
 $borderRadius: (
-	'': 4px,
-	'big': 8px,
+	'M': 4px,
+	'L': 8px,
 );
 
 $elevations: (
@@ -177,20 +177,19 @@ $elevations: (
 );
 
 $boxShadows: (
-	'hard': 'var(--commons-box-shadow-xxs)',
-	'xxs': '0 2px 8px rgba(var(--colors-grey-900-rgb), .2), 0 1px 2px rgba(var(--colors-grey-900-rgb), 0.15)',
-	'xs': '0 1px 2px rgba(var(--colors-grey-900-rgb), 0.06), 0 2px 8px rgba(var(--colors-grey-900-rgb), 0.04)',
-	's': 'var(--commons-elevations-elevation-2)',
-	'm': 'var(--commons-elevations-elevation-3)',
-	'l': 'var(--commons-elevations-elevation-4)',
-	'xl': 'var(--commons-elevations-elevation-5)',
-	'xxl': 'var(--commons-elevations-elevation-6)',
+	'XXS': '0 2px 8px rgba(var(--colors-grey-900-rgb), .2), 0 1px 2px rgba(var(--colors-grey-900-rgb), 0.15)',
+	'XS': '0 1px 2px rgba(var(--colors-grey-900-rgb), 0.06), 0 2px 8px rgba(var(--colors-grey-900-rgb), 0.04)',
+	'S': 'var(--commons-elevations-elevation-2)',
+	'M': 'var(--commons-elevations-elevation-3)',
+	'L': 'var(--commons-elevations-elevation-4)',
+	'XL': 'var(--commons-elevations-elevation-5)',
+	'XXL': 'var(--commons-elevations-elevation-6)',
 );
 
 $disabled: (
 	'opacity': 0.4,
 	'background': 'var(--palettes-grey-100)',
-	'color': 'var(--palettes-grey-600)',
+	'color': 'var(--palettes-grey-500)',
 	'placeholder': 'var(--palettes-grey-400)',
 );
 
@@ -201,7 +200,7 @@ $animations: (
 );
 
 $durations: (
-	'fast': 100ms,
+	'fast': 150ms,
 	'standard': 250ms,
 	'slow': 350ms,
 );
@@ -213,6 +212,7 @@ $loading: (
 );
 
 $textLink: (
-	color: #00b2ed,
-	hover: #16c5fe,
+	color: var(--palettes-primary-700),
+	hover: var(--palettes-primary-600),
+	disabled: var(--palettes-grey-500),
 );

package/src/commons/core.scss

@@ -28,7 +28,7 @@ $whiteSpace: 'normal', 'nowrap';
 $float: 'left', 'right';
 $verticalAlign: 'baseline', 'sub', 'super', 'text-top', 'text-bottom', 'middle', 'top', 'bottom';
 $position: 'absolute', 'relative', 'static', 'fixed', 'sticky';
-$decoration: 'underline', 'none';
+$decoration: 'underline', 'line-trough', 'none';
 
 @mixin cssvars($name, $properties, $after: '') {
 	@each $key, $value in $properties {
@@ -81,8 +81,8 @@ $decoration: 'underline', 'none';
 @mixin sizes($suffix: '!important') {
 	@each $key, $value in config.$sizes {
 		.u-text#{transform.capitalize($key)} {
-			font-size: var(--sizes-#{$key}-font-size) #{$suffix};
-			line-height: var(--sizes-#{$key}-line-height) #{$suffix};
+			font-size: var(--sizes-#{$key}-fontSize) #{$suffix};
+			line-height: var(--sizes-#{$key}-lineHeight) #{$suffix};
 		}
 	}
 }

package/src/commons/utils/media.scss

@@ -4,7 +4,7 @@
 
 @use '@lucca-front/scss/src/commons/config';
 
-@mixin largerThan($breakpoint, $reversed: false) {
+@mixin min($breakpoint, $reversed: false) {
 	$reverse: '';
 
 	@if $reversed {
@@ -28,8 +28,8 @@
 	}
 }
 
-@mixin smallerThan($breakpoint) {
-	@include largerThan($breakpoint, $reversed: true) {
+@mixin max($breakpoint) {
+	@include min($breakpoint, $reversed: true) {
 		@content;
 	}
 }

package/src/commons/vars.scss

@@ -2,7 +2,7 @@
 @use '@lucca-front/scss/src/commons/core';
 
 @mixin vars {
-	@include core.cssvars('commons-border-radius', config.$borderRadius);
+	@include core.cssvars('commons-borderRadius', config.$borderRadius);
 	@include core.cssvars('commons-animations', config.$animations);
 	@include core.cssvars('commons-animations-durations', config.$durations);
 	@include core.cssvars('commons-disabled', config.$disabled);
@@ -20,7 +20,7 @@
 	@include core.cssvars('spacings', config.$spacings);
 
 	@include core.cssvars('commons-elevations-elevation', config.$elevations);
-	@include core.cssvars('commons-box-shadow', config.$boxShadows);
+	@include core.cssvars('commons-boxShadow', config.$boxShadows);
 
 	@each $key, $map in config.$sizes {
 		@include core.cssvars('sizes-#{$key}', $map);
@@ -32,7 +32,6 @@
 	--commons-background-base: #f5f5f5;
 	--commons-banner-height: 50px;
 	--commons-font-family: 'Source Sans Pro', Tahoma, sans-serif;
-	--commons-transition: all 150ms ease;
 	--commons-divider-width: 1px;
 	--commons-divider-color: var(--palettes-grey-200);
 	--commons-divider-style: solid;

package/src/components/actionIcon/component.scss

@@ -1,7 +1,7 @@
 @mixin component {
 	background-color: transparent;
 	border: 0;
-	border-radius: var(--commons-border-radius);
+	border-radius: var(--commons-borderRadius-M);
 	color: var(--palettes-700, var(--components-actionIcon-color));
 	height: 2.5rem;
 	width: 2.5rem;

package/src/components/actionIcon/index.scss

@@ -20,8 +20,8 @@
 		}
 	}
 
-	&.mod-small {
-		@include small;
+	&.mod-S {
+		@include S;
 	}
 
 	&:is(.is-disabled, .disabled, [disabled]) {

package/src/components/actionIcon/mods.scss

@@ -22,7 +22,7 @@
 	}
 
 	&:hover {
-		box-shadow: 0 0 0 1px var(--palettes-grey-400), var(--commons-box-shadow-xs);
+		box-shadow: 0 0 0 1px var(--palettes-grey-400), var(--commons-boxShadow-XS);
 	}
 
 	&:focus {
@@ -55,7 +55,7 @@
 
 @mixin outlinedDelete {
 	&:hover {
-		box-shadow: 0 0 0 1px var(--palettes-error-400), var(--commons-box-shadow-xs);
+		box-shadow: 0 0 0 1px var(--palettes-error-400), var(--commons-boxShadow-XS);
 	}
 
 	&:focus {
@@ -67,7 +67,7 @@
 	}
 }
 
-@mixin small {
+@mixin S {
 	height: 2rem;
 	width: 2rem;
 }

package/src/components/box/component.scss

@@ -1,4 +1,4 @@
-@mixin component {
+@mixin component($atRoot: 'without: rule') {
 	border-radius: var(--components-box-border-radius);
 	margin: var(--components-box-margin);
 	padding: var(--components-box-padding);
@@ -6,12 +6,12 @@
 	display: block;
 	position: relative;
 
-	@at-root {
+	@at-root ($atRoot) {
 		.box-close {
 			position: absolute;
-			font-size: var(--sizes-standard-font-size);
-			right: var(--spacings-smallest);
-			top: var(--spacings-smallest);
+			font-size: var(--sizes-M-fontSize);
+			right: var(--spacings-XXS);
+			top: var(--spacings-XXS);
 			z-index: 1;
 		}
 	}

package/src/components/box/vars.scss

@@ -1,8 +1,8 @@
 @mixin vars {
 	--components-box-background: #f3f5fc;
 	--components-box-border-radius: 8px;
-	--components-box-margin: 0 0 var(--spacings-small);
-	--components-box-padding: var(--spacings-standard);
+	--components-box-margin: 0 0 var(--spacings-S);
+	--components-box-padding: var(--spacings-M);
 	--components-box-toggle-arrow-size: 0.8rem;
 	--components-box-toggle-arrow-left: 2.5rem;
 }

package/src/components/breadcrumbs/component.scss

@@ -1,7 +1,7 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
 
-@mixin component {
-	@at-root {
+@mixin component($atRoot: 'without: rule') {
+	@at-root ($atRoot) {
 		.breadcrumbs-list {
 			display: flex;
 			flex-wrap: wrap;
@@ -11,8 +11,8 @@
 		}
 
 		.breadcrumbs-list-item {
-			font-size: var(--sizes-small-font-size);
-			line-height: var(--sizes-small-line-height);
+			font-size: var(--sizes-S-fontSize);
+			line-height: var(--sizes-S-lineHeight);
 			align-items: center;
 			display: flex;
 
@@ -20,7 +20,7 @@
 				&::before {
 					@include icon.generate('chevron_east');
 
-					padding: 0 var(--spacings-smallest);
+					padding: 0 var(--spacings-XXS);
 				}
 			}
 		}

package/src/components/breadcrumbs/mods.scss

@@ -17,7 +17,7 @@
 					&::before {
 						@include icon.generate('format_undo');
 
-						padding-right: var(--spacings-smallest);
+						padding-right: var(--spacings-XXS);
 					}
 				}
 			}

package/src/components/button/component.scss

@@ -1,15 +1,19 @@
 @mixin component {
-	border-radius: var(--components-button-border-radius);
-	font-family: var(--components-button-font-family);
+	border-radius: var(--commons-borderRadius-M);
+	font-family: var(--commons-font-family);
 	font-size: var(--components-button-font-size);
-	font-weight: var(--components-button-font-weight);
+	font-weight: 600;
 	line-height: var(--components-button-line-height);
 	margin: var(--components-button-margin);
 	padding: var(--components-button-padding);
-	transition: var(--components-button-transition);
-
+	transition-property: background-color, color, border-color, box-shadow;
+	transition-duration: var(--commons-animations-durations-fast);
+	transition-timing-function: ease;
 	border: 0;
-	display: inline-block;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--components-button-gap);
 	position: relative;
 	text-decoration: none;
 	vertical-align: baseline;
@@ -19,14 +23,10 @@
 	color: var(--palettes-text, var(--palettes-primary-text));
 	cursor: pointer;
 
-	.lucca-icon {
+	.button-icon, .lucca-icon { // .lucca-icon legacy
 		font-size: var(--icon-size, 1.25rem);
 	}
 
-	&:first-of-type {
-		margin-left: 0;
-	}
-
 	&:last-of-type {
 		margin-right: 0;
 	}
@@ -34,12 +34,12 @@
 	&:not([disabled], .is-disabled) {
 		&:hover {
 			background-color: var(--palettes-600, var(--palettes-primary-600));
-			box-shadow: var(--commons-box-shadow-xs);
+			box-shadow: var(--commons-boxShadow-XS);
 			color: var(--palettes-text, var(--palettes-primary-text));
 		}
 
 		&:focus {
-			box-shadow: var(--commons-box-shadow-xs), 0 0 0 4px var(--palettes-200, var(--palettes-primary-200));
+			box-shadow: var(--commons-boxShadow-XS), 0 0 0 4px var(--palettes-200, var(--palettes-primary-200));
 			outline: none;
 			background-color: var(--palettes-600, var(--palettes-primary-600));
 		}

package/src/components/button/index.scss

@@ -18,32 +18,31 @@
 		@include block;
 	}
 
-	&.mod-small {
-		@include small;
+	&.mod-S {
+		@include S;
 	}
 
-	&.mod-smaller {
-		@include smaller;
+	&.mod-XS {
+		@include XS;
 	}
 
 	&.mod-counter {
 		@include counter;
 
-		&.mod-small,
-		&.mod-smaller {
-			@include counterSmall;
+		&.mod-S {
+			@include counterS;
+		}
+
+		&.mod-XS {
+			@include counterXS;
 		}
 	}
 
 	&.mod-icon {
 		@include icon;
 
-		&.mod-small {
-			@include iconSmall;
-		}
-
-		&.mod-smaller {
-			@include iconSmaller;
+		&.mod-XS {
+			@include iconXS;
 		}
 	}
 
@@ -53,13 +52,17 @@
 
 	&.mod-more {
 		@include more;
+
+		&.mod-S {
+			@include moreS;
+		}
 	}
 
 	&:is(.loading, .is-loading) {
 		@include loading;
 
-		&.mod-small {
-			@include loadingSmall;
+		&.mod-S {
+			@include loadingS;
 		}
 	}