@lucca-front/scss 20.2.2 → 20.3.0-rc.2

package/package.json

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

package/src/commons/config.scss

@@ -3,6 +3,11 @@
 
 @use '@lucca-front/scss/src/commons/function';
 
+$layers: 'reset, base, components, mods, states, product, utils' !default;
+
+/* stylelint-disable-next-line layer-name-pattern */
+@layer #{$layers};
+
 $isNamespaced: false !default;
 $deprecatedSpacings: false !default;
 $deprecatedCardBoxMargin: false !default;
@@ -111,7 +116,7 @@ $borderRadiusTokens: (
 $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', 'successContrasted', 'warningContrasted';
-$palettesDefault: 'brand', 'brandContrasted', 'neutral', 'navigation';
+$palettesDefault: 'brand', 'brandContrasted', 'neutral', 'navigation', 'AI';
 $palettesProduct: 'product';
 $palettesOtherProduct: () !default;
 $palettesDecorative: 'kiwi', 'lime', 'cucumber', 'mint', 'glacier', 'lagoon', 'blueberry', 'lavender', 'grape', 'watermelon', 'pumpkin',
@@ -135,6 +140,11 @@ $fieldsWidth: 20, 30, 40, 50, 60 !default;
 
 // Palettes
 
+$ai: (
+	500: #BC6FDD,
+	600: #A440CF,
+);
+
 $brand: (
 	// text is deprecated
 	text: #ffffff,
@@ -540,6 +550,7 @@ $productsInterpolation: (
 );
 
 $palettesInterpolation: (
+	'AI': $ai,
 	'lucca': $brand,
 	'brand': $brand,
 	'brandContrasted': $brandContrasted,

package/src/commons/core.scss

@@ -31,7 +31,7 @@ $decoration: 'underline', 'line-through', 'none';
 $overflow: 'hidden', 'auto', 'visible', 'scroll';
 $cursor: 'pointer', 'auto', 'default', 'text';
 
-/* Tokens */
+// Tokens
 
 @mixin spacing($boxModel, $boxDirection, $key, $value, $suffix: '!important') {
 	@if $boxModel != 'inset' or ($boxDirection != 'top' and $boxDirection != 'bottom' and $boxDirection != 'left' and $boxDirection != 'right') {
@@ -71,7 +71,7 @@ $cursor: 'pointer', 'auto', 'default', 'text';
 	}
 }
 
-/* Variables */
+// Variables
 
 @mixin cssvars($name, $properties, $after: '') {
 	@each $key, $value in $properties {
@@ -166,7 +166,7 @@ $cursor: 'pointer', 'auto', 'default', 'text';
 	}
 }
 
-/* DEPRECATED */
+// DEPRECATED
 
 @mixin sizes($suffix: '!important') {
 	@each $key, $value in config.$sizes {

package/src/commons/exports.scss

@@ -1,4 +1,3 @@
-@forward 'normalize.css/normalize';
 @forward 'vars';
 @forward 'base';
 @forward 'utils';

package/src/commons/index.scss

@@ -1,7 +1,14 @@
+@use "sass:meta";
 @use '@lucca-front/scss/src/commons/utils/namespace';
 @use 'exports' as *;
 
+@layer reset {
+	@include meta.load-css('normalize.css/normalize');
+}
+
 @include namespace.appendRootVars {
-	@include vars;
-	@include base;
+	@layer base {
+		@include vars;
+		@include base;
+	}
 }

package/src/commons/utils/color.scss

@@ -30,3 +30,17 @@
 	@include core.rosetta('--palettes-success', '--palettes-successContrasted', config.$palettesShades);
 	@include core.rosetta('--palettes-warning', '--palettes-warningContrasted', config.$palettesShades);
 }
+
+@mixin borderGradient($angle: 0, $color1: var(--palettes-neutral-0) , $color2:  var(--palettes-neutral-900), $radius: var(--pr-t-border-radius-default), $width: var(--commons-divider-width)) {
+	&::before {
+		content: '';
+		pointer-events: none;
+		position: absolute;
+		inset: calc(#{$width} * -1);
+		padding: #{$width};
+		background-image: conic-gradient(from #{$angle}, #{$color1}, #{$color2}, #{$color1});
+		border-radius: calc(#{$radius} + #{$width});
+		mask: linear-gradient(var(--palettes-neutral-0)) content-box, linear-gradient(var(--palettes-neutral-0));
+		mask-composite: exclude;
+	}
+}