@lucca-front/scss 19.0.0 → 19.1.0

package/package.json

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

package/src/commons/base.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@use 'sass:list';
-
+@use '@lucca-front/scss/src/commons/core';
 @use '@lucca-front/scss/src/commons/config';
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/color';
 
 @mixin body {
 	background-color: var(--pr-t-elevation-surface-default);
@@ -23,86 +23,10 @@
 
 @mixin base($atRoot: namespace.$defaultAtRoot) {
 	@at-root ($atRoot) {
-		@if config.$fontFamily != 'Source Sans Pro' {
-			@font-face {
-				font-family: '#{config.$fontFamily}';
-				src:
-					url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/regular.woff2') format('woff2'),
-					url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/regular.woff') format('woff');
-				font-weight: 400;
-				font-style: normal;
-				font-display: swap;
-			}
-
-			@font-face {
-				font-family: '#{config.$fontFamily}';
-				src:
-					url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/semibold.woff2') format('woff2'),
-					url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/semibold.woff') format('woff');
-				font-weight: 600;
-				font-style: normal;
-				font-display: swap;
-			}
+		@include core.fontFace(config.$fontFamily, config.$fontWeights);
 
-			@font-face {
-				font-family: '#{config.$fontFamily}';
-				src:
-					url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/bold.woff2') format('woff2'),
-					url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/bold.woff') format('woff');
-				font-weight: 700;
-				font-style: normal;
-				font-display: swap;
-			}
-
-			@font-face {
-				font-family: '#{config.$fontFamily}';
-				src:
-					url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/black.woff2') format('woff2'),
-					url('//cdn.lucca.fr/fonts/#{config.$fontFamily}/black.woff') format('woff');
-				font-weight: 900;
-				font-style: normal;
-				font-display: swap;
-			}
-		} @else {
-			@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;
-			}
-
-			@font-face {
-				font-family: 'Source Sans Pro';
-				src:
-					url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-bold.woff2') format('woff2'),
-					url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-bold.woff') format('woff');
-				font-weight: 700;
-				font-style: normal;
-				font-display: swap;
-			}
-
-			@font-face {
-				font-family: 'Source Sans Pro';
-				src:
-					url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-black.woff2') format('woff2'),
-					url('//cdn.lucca.fr/fonts/SourceSans/sourcesanspro-black.woff') format('woff');
-				font-weight: 900;
-				font-style: normal;
-				font-display: swap;
-			}
+		@if config.$fontFamilyCursive {
+			@include core.fontFace(config.$fontFamilyCursive, config.$fontWeightsCursive);
 		}
 
 		*,
@@ -171,11 +95,7 @@
 
 			@if $paletteExists {
 				.palette-#{$palette} {
-					@each $shade in config.$palettesShades {
-						@if map.get($paletteExists, $shade) {
-							--palettes-#{$shade}: var(--palettes-#{$palette}-#{$shade});
-						}
-					}
+					@include color.palette($name: $palette, $palette: $paletteExists);
 				}
 			}
 		}

package/src/commons/config.scss

@@ -1,10 +1,21 @@
 @use 'sass:list';
-@use '@lucca-front/scss/src/commons/utils/color';
 
-$importDeprecatedSpacings: true !default;
 $isNamespaced: false !default;
 
-$fontFamily: 'Source Sans Pro' !default;
+$fontFamily: 'SourceSans' !default;
+$fontWeights: (
+	'regular': 400,
+	'semibold': 600,
+	'bold': 700,
+	'black': 800,
+) !default;
+
+$fontFamilyCursive: false !default;
+$fontWeightsCursive: (
+	'regular': 400,
+	'bold': 700,
+) !default;
+
 $product: 'brand' !default;
 $palettesShades: text, 0, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900; // text is deprecated
 $palettesStates: 'critical', 'error', 'warning', 'success';
@@ -23,6 +34,8 @@ $palettesAll: list.join(
 	$palettesDeprecated
 );
 
+// Palettes
+
 $brand: (
 	// text is deprecated
 	text: #ffffff,
@@ -368,21 +381,6 @@ $pineapple: (
 	900: #7a6400,
 ) !default;
 
-// $colors are deprecated
-$colors: (
-	'white': #ffffff,
-	'black': #121212,
-);
-
-// $colorsRgb are deprecated
-$colorsRgb: (
-	'white': '255, 255, 255',
-	'neutral-400': '172, 187, 215',
-	'neutral-900': '19, 29, 53',
-	'grey-400': '172, 187, 215',
-	'grey-900': '19, 29, 53',
-) !default;
-
 // switch case
 $prod: map-get(
 	(
@@ -431,6 +429,42 @@ $palettesInterpolation: (
 	'cc': $cc,
 );
 
+// Tokens : Elevation
+$elevation: (
+	surface: (
+		'sunken': var(--palettes-neutral-50),
+		'default': var(--palettes-neutral-25),
+		'raised': var(--palettes-neutral-0),
+		'backdrop': color-mix(in srgb, var(--palettes-neutral-400) 40%, transparent),
+	),
+	shadow: (
+		'raised':
+			'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent), 0 1px 2px color-mix(in srgb, var(--palettes-neutral-400) 4%, transparent), 0 2px 4px color-mix(in srgb, var(--palettes-neutral-400) 2%, transparent)',
+		'overflow':
+			'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent), 0 0 4px color-mix(in srgb, var(--palettes-neutral-400) 32%, transparent), 0 0 8px color-mix(in srgb, var(--palettes-neutral-400) 24%, transparent)',
+		'overlay':
+			'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent), 0 4px 8px color-mix(in srgb, var(--palettes-neutral-400) 24%, transparent), 0 4px 12px 2px color-mix(in srgb, var(--palettes-neutral-400) 8%, transparent)',
+	),
+);
+
+// Tokens : Colors
+$colorInput: (
+	text: var(--palettes-neutral-800),
+	text-placeholder: var(--palettes-neutral-400),
+	text-placeholder-critical: var(--palettes-critical-400),
+	text-suffix: var(--palettes-neutral-600),
+	text-disabled: var(--palettes-neutral-700),
+	icon: var(--palettes-neutral-600),
+	icon-disabled: var(--palettes-neutral-500),
+	background: var(--palettes-neutral-0),
+	background-critical: var(--palettes-critical-50),
+	background-disabled: var(--palettes-neutral-100),
+	border: var(--palettes-neutral-300),
+	border-hover: var(--palettes-neutral-400),
+	border-critical: var(--palettes-critical-400),
+	border-critical-hover: var(--palettes-critical-600),
+);
+
 $breakpoints: (
 	XXXS: 320px,
 	XXS: 480px,
@@ -459,17 +493,6 @@ $spacings: (
 	'800': 4rem,
 ) !default;
 
-$spacingsDeprecated: (
-	'0': 0,
-	XXS: 0.25rem,
-	XS: 0.5rem,
-	S: 1rem,
-	M: 1.5rem,
-	L: 2rem,
-	XL: 3rem,
-	XXL: 4rem,
-) !default;
-
 $sizes: (
 	XS: (
 		fontSize: 0.75rem,
@@ -515,57 +538,6 @@ $borderRadius: (
 	'full': 9999px,
 ) !default;
 
-// $elevations are deprecated
-$elevations: (
-	'1':
-		'0 1px 2px #{color.transparentize(var(--palettes-neutral-900), 0.06)}, 0px 2px 8px #{color.transparentize(var(--palettes-neutral-900), 0.04)}',
-	'2':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 1px 2px #{color.transparentize(var(--palettes-neutral-900), 0.02)}, 0 2px 6px #{color.transparentize(var(--palettes-neutral-900), 0.05)}',
-	'3':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 2px 4px #{color.transparentize(var(--palettes-neutral-900), 0.02)}, 0 4px 10px #{color.transparentize(var(--palettes-neutral-900), 0.06)}',
-	'4':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 3px 6px #{color.transparentize(var(--palettes-neutral-900), 0.04)}, 0 4px 16px #{color.transparentize(var(--palettes-neutral-900), 0.08)}',
-	'5':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 4px 8px #{color.transparentize(var(--palettes-neutral-900), 0.06)}, 0 12px 32px #{color.transparentize(var(--palettes-neutral-900), 0.08)}',
-	'6':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, -2px 2px 8px #{color.transparentize(var(--palettes-neutral-900), 0.04)}, -12px 6px 24px #{color.transparentize(var(--palettes-neutral-900), 0.06)}',
-);
-
-// $boxShadows are deprecated
-$boxShadows: (
-	'XXS':
-		'0 2px 8px #{color.transparentize(var(--palettes-neutral-900), 0.2)}, 0 1px 2px #{color.transparentize(var(--palettes-neutral-900), 0.15)}',
-	'XS':
-		'0 1px 2px #{color.transparentize(var(--palettes-neutral-900), 0.06)}, 0 2px 8px #{color.transparentize(var(--palettes-neutral-900), 0.04)}',
-	'S':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 1px 2px #{color.transparentize(var(--palettes-neutral-900), 0.02)}, 0 2px 6px #{color.transparentize(var(--palettes-neutral-900), 0.06)}',
-	'M':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 2px 4px #{color.transparentize(var(--palettes-neutral-900), 0.02)}, 0 4px 10px #{color.transparentize(var(--palettes-neutral-900), 0.06)}',
-	'L':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 3px 6px #{color.transparentize(var(--palettes-neutral-900), 0.04)}, 0 4px 16px #{color.transparentize(var(--palettes-neutral-900), 0.08)}',
-	'XL':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, 0 4px 8px #{color.transparentize(var(--palettes-neutral-900), 0.06)}, 0 12px 32px #{color.transparentize(var(--palettes-neutral-900), 0.08)}',
-	'XXL':
-		'0 0 0 1px #{color.transparentize(var(--palettes-neutral-900), 0.03)}, -2px 2px 8px #{color.transparentize(var(--palettes-neutral-900), 0.04)}, -12px 6px 24px #{color.transparentize(var(--palettes-neutral-900), 0.06)}',
-);
-
-$elevation: (
-	surface: (
-		'sunken': var(--palettes-neutral-50),
-		'default': var(--palettes-neutral-25),
-		'raised': var(--palettes-neutral-0),
-		'backdrop': color.transparentize(var(--palettes-neutral-400), 0.4),
-	),
-	shadow: (
-		'raised':
-			'0 0 0 1px #{color.transparentize(var(--palettes-neutral-400), 0.08)}, 0 1px 2px #{color.transparentize(var(--palettes-neutral-400), 0.4)}, 0 2px 4px #{color.transparentize(var(--palettes-neutral-400), 0.2)}',
-		'overflow':
-			'0 0 0 1px #{color.transparentize(var(--palettes-neutral-400), 0.08)}, 0 0 4px #{color.transparentize(var(--palettes-neutral-400), 0.32)}, 0 0 8px #{color.transparentize(var(--palettes-neutral-400), 0.24)}',
-		'overlay':
-			'0 0 0 1px #{color.transparentize(var(--palettes-neutral-400), 0.08)}, 0 4px 8px #{color.transparentize(var(--palettes-neutral-400), 0.24)}, 0 4px 12px 2px #{color.transparentize(var(--palettes-neutral-400), 0.08)}',
-	),
-);
-
 // opacity is deprecated
 $disabled: (
 	'opacity': 0.4,
@@ -587,13 +559,30 @@ $durations: (
 );
 
 $loading: (
-	'frontground': var(--palettes-product-500),
+	'frontground': var(--palettes-500, var(--palettes-product-500)),
 	'speed': 600ms,
+	'borderWidth': 3px,
 );
 
 $textLink: (
 	color: var(--palettes-product-700),
 	hover: var(--palettes-product-600),
-	disabled: var(--palettes-neutral-500),
-	// disabled token candidate
+	disabled: var(--palettes-neutral-500), // disabled token candidate
 );
+
+// Deprecated
+
+// $colors are deprecated
+$colors: (
+	'white': #ffffff,
+	'black': #121212,
+);
+
+// $colorsRgb are deprecated
+$colorsRgb: (
+	'white': '255, 255, 255',
+	'neutral-400': '172, 187, 215',
+	'neutral-900': '19, 29, 53',
+	'grey-400': '172, 187, 215',
+	'grey-900': '19, 29, 53',
+) !default;

package/src/commons/core.scss

@@ -34,40 +34,30 @@ $overflow: 'hidden', 'auto', 'visible', 'scroll';
 
 /* Tokens */
 
-@mixin spacing($boxModel, $boxDirection, $key, $value, $suffix: '!important', $token: true) {
-	@if $token {
-		.pr-u-#{transform.camelize($boxModel)}#{transform.capitalize($boxDirection)}#{transform.capitalize($key)} {
-			#{$boxModel}#{if($boxDirection == '', '', '-')}#{$boxDirection}: var(--pr-t-spacings-#{$key}) #{$suffix};
-		}
-	} @else {
-		.u-#{transform.camelize($boxModel)}#{transform.capitalize($boxDirection)}#{transform.capitalize($key)} {
-			#{$boxModel}#{if($boxDirection == '', '', '-')}#{$boxDirection}: var(--spacings-#{$key}) #{$suffix};
-		}
+@mixin spacing($boxModel, $boxDirection, $key, $value, $suffix: '!important') {
+	.pr-u-#{transform.camelize($boxModel)}#{transform.capitalize($boxDirection)}#{transform.capitalize($key)} {
+		#{$boxModel}#{if($boxDirection == '', '', '-')}#{$boxDirection}: var(--pr-t-spacings-#{$key}) #{$suffix};
 	}
 }
 
-@mixin spacings($token: true) {
-	$spacings: config.$spacingsDeprecated;
-	@if $token {
-		$spacings: config.$spacings;
-	}
+@mixin spacings() {
 	@each $boxModel in $boxModel {
 		@each $boxDirection in $boxDirection {
-			@each $key, $value in $spacings {
+			@each $key, $value in config.$spacings {
 				@if $boxModel != 'border' or $value == 0 {
-					@include spacing($boxModel, $boxDirection, $key, $value, $token: $token);
+					@include spacing($boxModel, $boxDirection, $key, $value);
 				}
 			}
 
 			@if $boxModel == 'margin' {
-				@include spacing($boxModel, $boxDirection, $key: 'auto', $value: auto, $token: $token);
+				@include spacing($boxModel, $boxDirection, $key: 'auto', $value: auto);
 			}
 		}
 	}
 
 	@each $gap in $gaps {
-		@each $key, $value in $spacings {
-			@include spacing($gap, $boxDirection: '', $key: $key, $value: $value, $token: $token);
+		@each $key, $value in config.$spacings {
+			@include spacing($gap, $boxDirection: '', $key: $key, $value: $value);
 		}
 	}
 }
@@ -140,3 +130,17 @@ $overflow: 'hidden', 'auto', 'visible', 'scroll';
 @function pxToRem($value) {
 	@return math.div($value, 16px) * 1rem;
 }
+
+@mixin fontFace($family, $weights, $path: '//cdn.lucca.fr/fonts', $style: normal) {
+	@each $keyword, $number in $weights {
+		@font-face {
+			font-family: '#{$family}';
+			src:
+				url('#{$path}/#{$family}/#{$keyword}.woff2') format('woff2'),
+				url('#{$path}/#{$family}/#{$keyword}.woff') format('woff');
+			font-weight: #{$number};
+			font-style: #{$style};
+			font-display: swap;
+		}
+	}
+}

package/src/commons/utils/color.scss

@@ -1,6 +1,22 @@
+@use 'sass:map';
+@use 'sass:math';
+@use '@lucca-front/scss/src/commons/config';
+
 @function transparentize($color, $amount: 50%, $space: var(--commons-colorSpace, srgb)) {
-	@if unit($amount) != '%' {
+	@if math.unit($amount) != '%' {
 		$amount: $amount * 100%;
 	}
 	@return color-mix(in $space, $color $amount, transparent);
 }
+
+@mixin palette($name, $shades: config.$palettesShades, $palette: false) {
+	@each $shade in $shades {
+		@if $palette {
+			@if map.get($palette, $shade) {
+				--palettes-#{$shade}: var(--palettes-#{$name}-#{$shade});
+			}
+		} @else {
+			--palettes-#{$shade}: var(--palettes-#{$name}-#{$shade});
+		}
+	}
+}

package/src/commons/utils/index.scss

@@ -1,8 +1,6 @@
 @use 'sass:list';
 
 @use '@lucca-front/icons/src/commons/core' as transform;
-
-@use '@lucca-front/scss/src/commons/config';
 @use '@lucca-front/scss/src/commons/core';
 
 @use '@lucca-front/scss/src/commons/utils/keyframe';
@@ -169,6 +167,10 @@
 	@include reset.list($list: 'dl', $suffix: '!important');
 }
 
+.u-summaryReset {
+	@include reset.summary('!important');
+}
+
 .u-buttonReset {
 	@include reset.button('!important');
 }
@@ -241,20 +243,6 @@
 	color: var(--palettes-neutral-700) !important;
 }
 
-// .u-unit is deprecated
-.u-unit {
-	font-size: 0.66em !important;
-}
-
-// .u-comma is deprecated
-.u-comma {
-	&:not(:last-child) {
-		&::after {
-			content: ', ' !important;
-		}
-	}
-}
-
 .u-fontWeightRegular {
 	font-weight: 400 !important;
 }
@@ -266,21 +254,20 @@
 .u-noSpinButtons {
 	&::-webkit-outer-spin-button,
 	&::-webkit-inner-spin-button {
-		-webkit-appearance: none;
+		-webkit-appearance: none !important;
 	}
 
 	&[type='number'] {
-		-moz-appearance: textfield;
+		-moz-appearance: textfield !important;
 	}
 }
 
-@each $elevation in config.$elevations {
-	$index: list.index(config.$elevations, $elevation);
+.u-fontFamily {
+	font-family: var(--commons-font-family) !important;
+}
 
-	// .u-elevate* is deprecated
-	.u-elevate#{$index} {
-		box-shadow: var(--commons-elevations-elevation-#{$index});
-	}
+.u-fontFamilyCursive {
+	font-family: var(--commons-font-family-cursive) !important;
 }
 
 @include core.classes('float', core.$float);
@@ -354,9 +341,6 @@
 }
 
 @include core.spacings;
-@if (config.$importDeprecatedSpacings) {
-	@include core.spacings($token: false);
-}
 @include core.sizes;
 @include core.borderRadius;
 @include core.palettes;

package/src/commons/utils/loading.scss

@@ -6,11 +6,12 @@
 		@include keyframe.rotate;
 
 		content: '';
+		
 		width: $size;
 		height: $size;
 		border-radius: var(--commons-borderRadius-full);
 		line-height: 0.8rem;
-		border-width: 3px;
+		border-width: var(--commons-loading-borderWidth);
 		inset: 0;
 		margin: auto;
 		position: absolute;

package/src/commons/utils/reset.scss

@@ -33,11 +33,19 @@
 @mixin clearfix($suffix: '') {
 	&::before,
 	&::after {
-		content: ' ';
-		display: table;
+		content: ' ' #{$suffix};
+		display: table #{$suffix};
 	}
 
 	&:after {
-		clear: both;
+		clear: both #{$suffix};
+	}
+}
+
+@mixin summary($suffix: '') {
+	list-style: none #{$suffix};
+
+	&::-webkit-details-marker {
+		display: none #{$suffix};
 	}
 }

package/src/commons/vars.scss

@@ -14,6 +14,8 @@
 	@include core.cssvars('pr-t-spacings', config.$spacings);
 	--pr-t-spacings-auto: auto;
 
+	@include core.cssvars('pr-t-color-input', config.$colorInput);
+
 	// VARIABLES
 
 	@include core.cssvars('commons-borderRadius', config.$borderRadius);
@@ -28,13 +30,6 @@
 	}
 
 	@include core.cssvars('breakpoints', config.$breakpoints, '-breakAt');
-	@if (config.$importDeprecatedSpacings) {
-		@include core.cssvars('spacings', config.$spacingsDeprecated);
-		--spacings-auto: auto;
-	}
-
-	@include core.cssvars('commons-elevations-elevation', config.$elevations);
-	@include core.cssvars('commons-boxShadow', config.$boxShadows); // deprecated
 
 	@each $key, $map in config.$sizes {
 		@include core.cssvars('sizes-#{$key}', $map);
@@ -51,6 +46,10 @@
 	--commons-border-100: var(--palettes-neutral-100);
 	--commons-border-200: var(--palettes-neutral-200);
 
+	@if (config.$fontFamilyCursive) {
+		--commons-font-family-cursive: '#{config.$fontFamilyCursive}', cursive;
+	}
+
 	// Deprecated
 	--commons-background-base: var(--palettes-neutral-25);
 	--commons-divider-color: var(--palettes-neutral-200);

package/src/components/button/index.scss

@@ -44,9 +44,7 @@
 		}
 	}
 
-	// .mod-icon is deprecated
-	&.mod-withIcon,
-	&.mod-icon {
+	&.mod-withIcon {
 		@include withIcon;
 
 		&.mod-S {