@soyfri/template 1.0.8 → 1.0.10-beta.0

package/README.md

@@ -8,7 +8,7 @@ This package contains a Metronic template specifically designed for FRI frontend
 At this point, if the dependencies are updated, the whole project can break, be careful.
 
 ```sh
-npm install
+npm install --legacy-peer-deps
 ```
 
 ## Installation
@@ -20,8 +20,8 @@ yarn add @soyfri/template
 
 ## Requirements
 ### Peer Dependencies
-- React >=19.0.0
-- React DOM >=19.0.0
+- React >=16.8.0
+- React DOM >=16.8.0
 
 ## Usage
 

package/dist/assets/sass/_init.scss

@@ -4,33 +4,29 @@
 
 
 // Custom functions & 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
+@import "./core/base/functions";
+@import "./core/base/mixins";
+@import "./core/components/mixins";
+@import "./core/vendors/plugins/mixins";
 
 // Custom variables
-@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
+@import "components/variables.custom";
+@import "./core/components/variables";
+@import "./core/components/variables-dark";
+@import "components/variables.override";
 
-// 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 *;
+// 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";
 
 // 3rd-Party plugins variables
-@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
+@import "./core/vendors/plugins/variables";
+@import "./core/vendors/plugins/variables-dark";
 
 // Custom layout variables
-@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
+@import "./core/layout/base/variables";
+@import "layout/variables.custom";

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

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

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

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

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

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

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

@@ -1,35 +1,32 @@
-@use "sass:list";
-@use "sass:map";
-@use "sass:meta";
 //
 // Get
 //
 
 @function get($map, $keys...) {
-    @if list.length($keys) == 1 {
-        $keys: list.nth($keys, 1);
+    @if length($keys) == 1 {
+        $keys: nth($keys, 1);
     }
 
-    @if meta.type-of($map) != 'map' or $map == null {
+    @if type-of($map) != 'map' or $map == null {
         //@return false;
     }
 
-    $warn: "#{list.nth($keys, 1)}";
-    $length: list.length($keys);
-    $get: map.get($map, list.nth($keys, 1));
+    $warn: "#{nth($keys, 1)}";
+    $length: length($keys);
+    $get: map-get($map, nth($keys, 1));
 
     @if $length > 1 {
         @for $i from 2 through $length {
-            @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 and type-of($get) == 'map' {
+                $warn: $warn + "->#{nth($keys, $i)}";
+                $get: map-get($get, nth($keys, $i));
 
                 @if $get == null {
                     @return null;
                 }
             }
             @else {
-                @return get-warning($warn, $get, list.nth($keys, $i));
+                @return get-warning($warn, $get, nth($keys, $i));
             }
         }
     }
@@ -38,23 +35,23 @@
 }
 
 @function has($map, $keys...) {
-    @if list.length($keys) == 1 {
-        $keys: list.nth($keys, 1);
+    @if length($keys) == 1 {
+        $keys: nth($keys, 1);
     }
 
-    @if meta.type-of($map) != 'map' or $map == null {
+    @if type-of($map) != 'map' or $map == null {
         //@return false;
     }
 
-    $warn: "#{list.nth($keys, 1)}";
-    $length: list.length($keys);
-    $get: map.get($map, list.nth($keys, 1));
+    $warn: "#{nth($keys, 1)}";
+    $length: length($keys);
+    $get: map-get($map, nth($keys, 1));
 
     @if $length > 1 {
         @for $i from 2 through $length {
-            @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 and type-of($get) == 'map' {
+                $warn: $warn + "->#{nth($keys, $i)}";
+                $get: map-get($get, nth($keys, $i));
 
                 @if $get == null {
                     @return false;
@@ -78,7 +75,7 @@
     @if $get == null {
         @warn "Map has no value for key search `#{$warn}`";
     }
-    @else if meta.type-of($get) != 'map' {
+    @else if 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,4 +1,3 @@
-@use "sass:math";
 //
 // Math
 //
@@ -8,7 +7,7 @@
     $x1: $x0;
 
     @for $i from 1 through 10 {
-        $x1: $x0 - ($x0 * $x0 - math.abs($r)) / (2 * $x0);
+        $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
         $x0: $x1;
     }
 

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

@@ -1,6 +1,3 @@
-@use "sass:list";
-@use "sass:map";
-@use "sass:meta";
 /// Deep set function to set a value in nested maps
 
 @function set($map, $keys, $value) {
@@ -9,36 +6,36 @@
 	
 	// If the last key is a map already
 	// Warn the user we will be overriding it with $value
-	@if meta.type-of(list.nth($keys, -1)) == "map" {
+	@if type-of(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 list.length($keys) == 1 {
-		@return map.merge($map, ($keys: $value));
+	@if 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 list.length($keys) - 1 {
-		$current-key: list.nth($keys, $i);
-		$current-map: list.nth($maps, -1);
-		$current-get: map.get($current-map, $current-key);
+	@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);
 		@if $current-get == null {
 		@error "Key `#{$key}` doesn't exist at current level in map.";
 		}
-		$maps: list.append($maps, $current-get);
+		$maps: append($maps, $current-get);
 	}
 	
 	// Loop from the last map to the first one
 	// Merge it with the previous one
-	@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));
+	@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));
 	}
 	
 	// Return result

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

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

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

@@ -1,6 +1,5 @@
-@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
-@use "buttons/base";
-@use "buttons/theme";
+@import "buttons/base";
+@import "buttons/theme";

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

@@ -1,4 +1,3 @@
-@use "sass:map";
 //
 // Card
 //
@@ -212,7 +211,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,9 +1,8 @@
-@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
-@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";
+@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";

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

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

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

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

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

@@ -3,11 +3,11 @@
 //
 
 // Import Dependencies
-@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";
+@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";

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

@@ -1,4 +1,3 @@
-@use "sass:map";
 //
 // Scroll
 //
@@ -81,7 +80,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
-@use "stepper/base";
-@use "stepper/pills";
-@use "stepper/links";
+@import "stepper/base";
+@import "stepper/pills";
+@import "stepper/links";

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

@@ -1,4 +1,3 @@
-@use "sass:map";
 //
 // SVG Icon
 //
@@ -16,7 +15,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,4 +1,3 @@
-@use "sass:map";
 //
 // symbol
 //
@@ -70,7 +69,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,4 +1,3 @@
-@use "sass:map";
 //
 // Table
 //
@@ -198,7 +197,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,9 +1,8 @@
-@use "sass:map";
 //
 // Custom utilities
 //
 
-$utilities: map.merge(
+$utilities: map-merge(
     $utilities,
     (
         "cursor": (

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

@@ -1,4 +1,3 @@
-@use "sass:color";
 // Bootstrap color system
 
 //
@@ -322,7 +321,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: color.adjust($primary, $lightness: -20%) !default;
+$ribbon-label-border-color-dark: darken($primary, 20%) !default;
 $ribbon-clip-bg-dark: $light !default;
 
 // Engage panel

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

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

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

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