@soyfri/template 1.0.6 → 1.0.8

package/README.md

@@ -3,6 +3,14 @@
 ## Description
 This package contains a Metronic template specifically designed for FRI frontend projects. It provides a set of pre-built components, styles, and utilities to streamline frontend development.
 
+## Build
+
+At this point, if the dependencies are updated, the whole project can break, be careful.
+
+```sh
+npm install
+```
+
 ## Installation
 ```bash
 npm install @soyfri/template
@@ -12,8 +20,8 @@ yarn add @soyfri/template
 
 ## Requirements
 ### Peer Dependencies
-- React >=16.8.0
-- React DOM >=16.8.0
+- React >=19.0.0
+- React DOM >=19.0.0
 
 ## Usage
 

package/dist/assets/sass/_init.scss

@@ -4,29 +4,33 @@
 
 
 // Custom functions & mixins
-@import "./core/base/functions";
-@import "./core/base/mixins";
-@import "./core/components/mixins";
-@import "./core/vendors/plugins/mixins";
+@use "./core/base/functions" as *; // Use 'as *' to make functions globally accessible
+@use "./core/base/mixins" as *;    // Use 'as *' to make mixins globally accessible
+@use "./core/components/mixins" as *; // Use 'as *' to make mixins globally accessible
+@use "./core/vendors/plugins/mixins" as *; // Use 'as *' to make mixins globally accessible
 
 // Custom variables
-@import "components/variables.custom";
-@import "./core/components/variables";
-@import "./core/components/variables-dark";
-@import "components/variables.override";
+@use "components/variables.custom" as *; // Use 'as *' to make variables globally accessible
+@use "./core/components/variables" as *; // Use 'as *' to make variables globally accessible
+@use "./core/components/variables-dark" as *; // Use 'as *' to make variables globally accessible
+@use "components/variables.override" as *; // Use 'as *' to make variables globally accessible
 
-// Bootstrap initializaton
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
+// Bootstrap initialization
+// Bootstrap modules are designed to be used with `@use`.
+// By default, many of their core components and utilities are exposed globally
+// once their respective modules are `@use`-ed. We'll use `as *` for consistency,
+// assuming you want their functions, variables, and mixins widely available.
+@use "bootstrap/scss/functions" as *;
+@use "bootstrap/scss/variables" as *;
+@use "bootstrap/scss/variables-dark" as *;
+@use "bootstrap/scss/maps" as *;
+@use "bootstrap/scss/mixins" as *;
+@use "bootstrap/scss/utilities" as *;
 
 // 3rd-Party plugins variables
-@import "./core/vendors/plugins/variables";
-@import "./core/vendors/plugins/variables-dark";
+@use "./core/vendors/plugins/variables" as *; // Use 'as *' to make variables globally accessible
+@use "./core/vendors/plugins/variables-dark" as *; // Use 'as *' to make variables globally accessible
 
 // Custom layout variables
-@import "./core/layout/base/variables";
-@import "layout/variables.custom";
+@use "./core/layout/base/variables" as *; // Use 'as *' to make variables globally accessible
+@use "layout/variables.custom" as *; // Use 'as *' to make variables globally accessible

package/dist/assets/sass/components/components.scss

@@ -3,6 +3,6 @@
 //
 
 // Import Dependencies
-@import "stepper/multistep";
-@import "landing";
-@import "btn-secondary";
+@use "stepper/multistep";
+@use "landing";
+@use "btn-secondary";

package/dist/assets/sass/core/base/_functions.scss

@@ -3,8 +3,8 @@
 //
 
 // Import Dependencies
-@import "functions/get";
-@import "functions/set";
-@import "functions/math";
-@import "functions/valueif";
-@import "functions/theme-colors";
+@use "functions/get";
+@use "functions/set";
+@use "functions/math";
+@use "functions/valueif";
+@use "functions/theme-colors";

package/dist/assets/sass/core/base/_mixins.scss

@@ -3,9 +3,9 @@
 //
 
 // Import Dependencies
-@import "mixins/property";
-@import "mixins/browsers";
-@import "mixins/fixes";
-@import "mixins/reset";
-@import "mixins/placeholder";
-@import "mixins/breakpoints";
+@use "mixins/property";
+@use "mixins/browsers";
+@use "mixins/fixes";
+@use "mixins/reset";
+@use "mixins/placeholder";
+@use "mixins/breakpoints";

package/dist/assets/sass/core/base/functions/_get.scss

@@ -1,32 +1,35 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
 //
 // Get
 //
 
 @function get($map, $keys...) {
-    @if length($keys) == 1 {
-        $keys: nth($keys, 1);
+    @if list.length($keys) == 1 {
+        $keys: list.nth($keys, 1);
     }
 
-    @if type-of($map) != 'map' or $map == null {
+    @if meta.type-of($map) != 'map' or $map == null {
         //@return false;
     }
 
-    $warn: "#{nth($keys, 1)}";
-    $length: length($keys);
-    $get: map-get($map, nth($keys, 1));
+    $warn: "#{list.nth($keys, 1)}";
+    $length: list.length($keys);
+    $get: map.get($map, list.nth($keys, 1));
 
     @if $length > 1 {
         @for $i from 2 through $length {
-            @if $get != null and type-of($get) == 'map' {
-                $warn: $warn + "->#{nth($keys, $i)}";
-                $get: map-get($get, nth($keys, $i));
+            @if $get != null and meta.type-of($get) == 'map' {
+                $warn: $warn + "->#{list.nth($keys, $i)}";
+                $get: map.get($get, list.nth($keys, $i));
 
                 @if $get == null {
                     @return null;
                 }
             }
             @else {
-                @return get-warning($warn, $get, nth($keys, $i));
+                @return get-warning($warn, $get, list.nth($keys, $i));
             }
         }
     }
@@ -35,23 +38,23 @@
 }
 
 @function has($map, $keys...) {
-    @if length($keys) == 1 {
-        $keys: nth($keys, 1);
+    @if list.length($keys) == 1 {
+        $keys: list.nth($keys, 1);
     }
 
-    @if type-of($map) != 'map' or $map == null {
+    @if meta.type-of($map) != 'map' or $map == null {
         //@return false;
     }
 
-    $warn: "#{nth($keys, 1)}";
-    $length: length($keys);
-    $get: map-get($map, nth($keys, 1));
+    $warn: "#{list.nth($keys, 1)}";
+    $length: list.length($keys);
+    $get: map.get($map, list.nth($keys, 1));
 
     @if $length > 1 {
         @for $i from 2 through $length {
-            @if $get != null and type-of($get) == 'map' {
-                $warn: $warn + "->#{nth($keys, $i)}";
-                $get: map-get($get, nth($keys, $i));
+            @if $get != null and meta.type-of($get) == 'map' {
+                $warn: $warn + "->#{list.nth($keys, $i)}";
+                $get: map.get($get, list.nth($keys, $i));
 
                 @if $get == null {
                     @return false;
@@ -75,7 +78,7 @@
     @if $get == null {
         @warn "Map has no value for key search `#{$warn}`";
     }
-    @else if type-of($get) != 'map' {
+    @else if meta.type-of($get) != 'map' {
         @warn "Non-map value found for key search `#{$warn}`, cannot search for key `#{$key}`";
     }
     @return null;

package/dist/assets/sass/core/base/functions/_math.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 //
 // Math
 //
@@ -7,7 +8,7 @@
     $x1: $x0;
 
     @for $i from 1 through 10 {
-        $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
+        $x1: $x0 - ($x0 * $x0 - math.abs($r)) / (2 * $x0);
         $x0: $x1;
     }
 

package/dist/assets/sass/core/base/functions/_set.scss

@@ -1,3 +1,6 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
 /// Deep set function to set a value in nested maps
 
 @function set($map, $keys, $value) {
@@ -6,36 +9,36 @@
 	
 	// If the last key is a map already
 	// Warn the user we will be overriding it with $value
-	@if type-of(nth($keys, -1)) == "map" {
+	@if meta.type-of(list.nth($keys, -1)) == "map" {
 		@warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
 	}
 	
 	// If $keys is a single key
 	// Just merge and return
-	@if length($keys) == 1 {
-		@return map-merge($map, ($keys: $value));
+	@if list.length($keys) == 1 {
+		@return map.merge($map, ($keys: $value));
 	}
 	
 	// Loop from the first to the second to last key from $keys
 	// Store the associated map to this key in the $maps list
 	// If the key doesn't exist, throw an error
-	@for $i from 1 through length($keys) - 1 {
-		$current-key: nth($keys, $i);
-		$current-map: nth($maps, -1);
-		$current-get: map-get($current-map, $current-key);
+	@for $i from 1 through list.length($keys) - 1 {
+		$current-key: list.nth($keys, $i);
+		$current-map: list.nth($maps, -1);
+		$current-get: map.get($current-map, $current-key);
 		@if $current-get == null {
 		@error "Key `#{$key}` doesn't exist at current level in map.";
 		}
-		$maps: append($maps, $current-get);
+		$maps: list.append($maps, $current-get);
 	}
 	
 	// Loop from the last map to the first one
 	// Merge it with the previous one
-	@for $i from length($maps) through 1 {
-		$current-map: nth($maps, $i);
-		$current-key: nth($keys, $i);
-		$current-val: if($i == length($maps), $value, $result);
-		$result: map-merge($current-map, ($current-key: $current-val));
+	@for $i from list.length($maps) through 1 {
+		$current-map: list.nth($maps, $i);
+		$current-key: list.nth($keys, $i);
+		$current-val: if($i == list.length($maps), $value, $result);
+		$result: map.merge($current-map, ($current-key: $current-val));
 	}
 	
 	// Return result

package/dist/assets/sass/core/base/functions/_theme-colors.scss

@@ -1,15 +1,17 @@
+@use "functions/get";
+
 //
 // Bootstrap extended functions
 //
 
 @function theme-inverse-color($key: "primary") {
-    @return get($theme-inverse-colors, $key);
+    @return get.get($theme-inverse-colors, $key);
 }
 
 @function theme-active-color($key: "primary") {
-    @return get($theme-active-colors, $key);
+    @return get.get($theme-active-colors, $key);
 }
 
 @function theme-light-color($key: "primary") {
-    @return get($theme-light-colors, $key);
+    @return get.get($theme-light-colors, $key);
 }

package/dist/assets/sass/core/components/_bootstrap-icon.scss

@@ -1,5 +1,6 @@
+@use "sass:map";
 .bi {
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
         @include media-breakpoint-up($breakpoint) {
             $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_buttons.scss

@@ -3,5 +3,5 @@
 //
 
 // Import Dependencies
-@import "buttons/base";
-@import "buttons/theme";
+@use "buttons/base";
+@use "buttons/theme";

package/dist/assets/sass/core/components/_card.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // Card
 //
@@ -211,7 +212,7 @@
 
 // Responsive stretch heights
 .card {
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
     	@include media-breakpoint-up($breakpoint) {
     		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_fixed.scss

@@ -1,8 +1,9 @@
+@use "sass:map";
 //
 // Fixed
 //
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_forms.scss

@@ -3,11 +3,11 @@
 //
 
 // Import Dependencies
-@import "forms/labels";
-@import "forms/form-control";
-@import "forms/floating-labels";
-@import "forms/form-select";
-@import "forms/form-check";
-@import "forms/input-group";
-@import "forms/floating-labels";
-@import "forms/required";
+@use "forms/labels";
+@use "forms/form-control";
+@use "forms/floating-labels";
+@use "forms/form-select";
+@use "forms/form-check";
+@use "forms/input-group";
+@use "forms/floating-labels";
+@use "forms/required";

package/dist/assets/sass/core/components/_helpers.scss

@@ -3,10 +3,10 @@
 //
 
 // Import Dependencies
-@import "helpers/background";
-@import "helpers/borders";
-@import "helpers/flex";
-@import "helpers/shadow";
-@import "helpers/text";
-@import "helpers/opacity";
-@import "helpers/transform";
+@use "helpers/background";
+@use "helpers/borders";
+@use "helpers/flex";
+@use "helpers/shadow";
+@use "helpers/text";
+@use "helpers/opacity";
+@use "helpers/transform";

package/dist/assets/sass/core/components/_menu.scss

@@ -3,5 +3,5 @@
 //
 
 // Import Dependencies
-@import "menu/base";
-@import "menu/theme";
+@use "menu/base";
+@use "menu/theme";

package/dist/assets/sass/core/components/_mixins.scss

@@ -3,11 +3,11 @@
 //
 
 // Import Dependencies
-@import "mixins/menu";
-@import "mixins/buttons";
-@import "mixins/ki";
-@import "mixins/symbol";
-@import "mixins/svg-icon";
-@import "mixins/svg-bg-icon";
-@import "mixins/scroll";
-@import "mixins/shape";
+@use "mixins/menu";
+@use "mixins/buttons";
+@use "mixins/ki";
+@use "mixins/symbol";
+@use "mixins/svg-icon";
+@use "mixins/svg-bg-icon";
+@use "mixins/scroll";
+@use "mixins/shape";

package/dist/assets/sass/core/components/_scroll.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // Scroll
 //
@@ -80,7 +81,7 @@
 }
 
 // Utilities
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_stepper.scss

@@ -3,6 +3,6 @@
 //
 
 // Import Dependencies
-@import "stepper/base";
-@import "stepper/pills";
-@import "stepper/links";
+@use "stepper/base";
+@use "stepper/pills";
+@use "stepper/links";

package/dist/assets/sass/core/components/_svg-icon.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // SVG Icon
 //
@@ -15,7 +16,7 @@
     }
 
     // Responsive icon sizes
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
         @include media-breakpoint-up($breakpoint) {
             $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_symbol.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // symbol
 //
@@ -69,7 +70,7 @@
     // Sizes
     @include symbol-size(get($symbol-sizes, default));
 
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
         @include media-breakpoint-up($breakpoint) {
             $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_tables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // Table
 //
@@ -197,7 +198,7 @@
 }
 
 // Cell gutters
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_utilities.scss

@@ -1,8 +1,9 @@
+@use "sass:map";
 //
 // Custom utilities
 //
 
-$utilities: map-merge(
+$utilities: map.merge(
     $utilities,
     (
         "cursor": (

package/dist/assets/sass/core/components/_variables-dark.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Bootstrap color system
 
 //
@@ -321,7 +322,7 @@ $rating-color-active-dark: #FFAD0F !default;
 // Keenthemes ribbon component 
 $ribbon-label-box-shadow-dark: 0px -1px 5px 0px rgba($white, 0.1) !default;
 $ribbon-label-bg-dark: $primary !default;
-$ribbon-label-border-color-dark: darken($primary, 20%) !default;
+$ribbon-label-border-color-dark: color.adjust($primary, $lightness: -20%) !default;
 $ribbon-clip-bg-dark: $light !default;
 
 // Engage panel

package/dist/assets/sass/core/components/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //
 // Bootstrap & Custom Variables
 // Safely override any variable in _variables.custom.scss
@@ -1257,7 +1258,7 @@ $rating-color-active: #FFAD0F !default;
 // Keenthemes ribbon component 
 $ribbon-label-box-shadow: 0px -1px 5px 0px rgba($dark, 0.1) !default;
 $ribbon-label-bg: $primary !default;
-$ribbon-label-border-color: darken($primary, 20%) !default;
+$ribbon-label-border-color: color.adjust($primary, $lightness: -20%) !default;
 $ribbon-clip-bg: $dark !default;
 
 // Keenthemes fixed component 
@@ -1278,36 +1279,36 @@ $social-colors: (
 		base: #3b5998,
 		inverse: #ffffff,
 		light: rgba(#3b5998, 0.1),
-		active: darken(#3b5998, 7.5%)
+		active: color.adjust(#3b5998, $lightness: -7.5%)
 	),
 	google: (
 		base: #dd4b39,
 		inverse: #ffffff,
 		light: rgba(#dd4b39, 0.1),
-		active: darken(#dd4b39, 7.5%)
+		active: color.adjust(#dd4b39, $lightness: -7.5%)
 	),
 	twitter: (
 		base: #1da1f2,
 		inverse: #ffffff,
 		light: rgba(#1da1f2, 0.1),
-		active: darken(#1da1f2, 7.5%)
+		active: color.adjust(#1da1f2, $lightness: -7.5%)
 	),
 	instagram: (
 		base: #e1306c,
 		inverse: #ffffff,
 		light: rgba(#e1306c, 0.1),
-		active: darken(#e1306c, 7.5%)
+		active: color.adjust(#e1306c, $lightness: -7.5%)
 	),
 	youtube: (
 		base: #ff0000,
 		inverse: #ffffff,
 		light: rgba(#ff0000, 0.1),
-		active: darken(#ff0000, 7.5%)
+		active: color.adjust(#ff0000, $lightness: -7.5%)
 	),
 	linkedin: (
 		base: #0077b5,
 		inverse: #ffffff,
 		light: rgba(#0077b5, 0.1),
-		active: darken(#0077b5, 7.5%)
+		active: color.adjust(#0077b5, $lightness: -7.5%)
 	)
 ) !default;

package/dist/assets/sass/core/components/buttons/_theme.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //
 // Buttons Theme
 //
@@ -298,10 +299,10 @@
 			$icon-color: $gray-800-dark, 
 			$border-color: null, 
 			$bg-color: $gray-400-dark,
-			$color-active: lighten($gray-800-dark, 3%), 
-			$icon-color-active: lighten($gray-800-dark, 3%), 
+			$color-active: color.adjust($gray-800-dark, $lightness: 3%), 
+			$icon-color-active: color.adjust($gray-800-dark, $lightness: 3%), 
 			$border-color-active: null, 
-			$bg-color-active: lighten($gray-400-dark, 3%),
+			$bg-color-active: color.adjust($gray-400-dark, $lightness: 3%),
 		);
 	}
 }