WIP

VERSION

@@ -1 +1 @@
-0.0.21
+0.0.22

src/scss/dev/_modules.scss

@@ -2,49 +2,23 @@
 // StyleScape | Development | Modules
 // ============================================================================
 
-// $icongl_font_dir: "~icon.gl/src/font";
-
-@use "~unit.gl/scss/index.scss" as *;
-
-@use "~hue.gl/scss/index.scss" as *;
-
-@use "~icon.gl/scss/index.scss" as *;
-
-// @use "~icon.gl/scss/index.scss" as * with (
-//     // $icongl_font_dir: "~icon.gl/font/",
-//     $icongl_font_dir: "../../../node-modules/icon.gl/font/",
-// );
-
-
-
-// @forward "unitgl";
-// @forward "huegl";
-// @forward "icongl";
-
-
-@forward "~unit.gl/scss/index.scss";
-@forward "~hue.gl/scss/index.scss";
-@forward "~icon.gl/scss/index.scss";
-
-
-
-// @import "~unit.gl/src/scss/index.scss";
-// @import "~hue.gl/src/scss/index.scss";
-// $icongl_font_dir: "~icon.gl/src/font" !default;
-// @import "~icon.gl/src/scss/index.scss";
-
-
-
-
-
-@include icon_face(
-    "~icon.gl/font/icongl",
-    "icongl",
-    "",
-    //   600,
-    //   "normal",
-    //   "#{$icon_name} SemiBold",
-    //   "#{$icon_name}-SemiBold",
-    "ttf",
-    //   "otf"
-);
+@use "../../../node_modules/unit.gl/scss/index.scss" as *;
+@use "../../../node_modules/hue.gl/scss/index.scss" as *;
+// @use "../../../node_modules/icon.gl/scss/index.scss" as *;
+
+@forward "../../../node_modules/unit.gl/scss/index.scss";
+@forward "../../../node_modules/hue.gl/scss/index.scss";
+// @forward "../../../node_modules/icon.gl/scss/index.scss";
+
+
+// @include icon_face(
+//     "../../../node_modules/icon.gl/font/icongl",
+//     "icongl",
+//     "",
+//     //   600,
+//     //   "normal",
+//     //   "#{$icon_name} SemiBold",
+//     //   "#{$icon_name}-SemiBold",
+//     "ttf",
+//     //   "otf"
+// );

src/scss/effects/_filter.scss

@@ -34,60 +34,60 @@
 
 // Mixin for blur effect
 @mixin blur($radius) {
-  filter: blur($radius);
+    filter: blur($radius);
 }
 
 // Mixin for grayscale effect
 @mixin grayscale($amount: 100%) {
-  filter: grayscale($amount);
+    filter: grayscale($amount);
 }
 
 // Mixin for brightness effect
 @mixin brightness($amount: 100%) {
-  filter: brightness($amount);
+    filter: brightness($amount);
 }
 
 // Mixin for contrast effect
 @mixin contrast($amount: 100%) {
-  filter: contrast($amount);
+    filter: contrast($amount);
 }
 
 // Mixin for sepia effect
 @mixin sepia($amount: 100%) {
-  filter: sepia($amount);
+    filter: sepia($amount);
 }
 
 // Mixin for combining multiple filters
 @mixin combine-filters($filters...) {
-  filter: $filters;
+    filter: $filters;
 }
 // Applying Filter Mixins
 // You can apply these mixins to your elements to achieve the desired effects:
 
 
 .image-blur {
-  @include blur(4px);
+    @include blur(4px);
 }
 
 .image-grayscale {
-  @include grayscale(50%);
+    @include grayscale(50%);
 }
 
 .image-brightness {
-  @include brightness(150%);
+    @include brightness(150%);
 }
 
 .image-contrast {
-  @include contrast(200%);
+    @include contrast(200%);
 }
 
 .image-sepia {
-  @include sepia(60%);
+    @include sepia(60%);
 }
 
 // Combining multiple filter effects
 .image-combined {
-  @include combine-filters(brightness(130%), contrast(120%), sepia(30%));
+    @include combine-filters(brightness(130%), contrast(120%), sepia(30%));
 }
 // Advanced Usage with Dynamic Values
 // SCSS variables and functions can be used to dynamically adjust filter values, which is particularly useful for themes or interactive elements:
@@ -97,36 +97,36 @@ $default-blur: 2px;
 $hover-blur: 4px;
 
 .image-interactive {
-  @include blur($default-blur);
+    @include blur($default-blur);
 
-  &:hover {
-    @include blur($hover-blur);
-  }
+    &:hover {
+        @include blur($hover-blur);
+    }
 }
 
 // Function to calculate contrast based on a light or dark theme
 @function theme-contrast($theme) {
-  @if $theme == 'dark' {
-    @return 150%;
-  } @else {
-    @return 100%;
-  }
+    @if $theme == 'dark' {
+        @return 150%;
+    } @else {
+        @return 100%;
+    }
 }
 
 .image-theme {
-  $current-theme: 'dark'; // Example variable that might be dynamically set
-  @include contrast(theme-contrast($current-theme));
+    $current-theme: 'dark'; // Example variable that might be dynamically set
+    @include contrast(theme-contrast($current-theme));
 }
 // Responsive Filters
 // You can also use media queries within SCSS to apply different filters based on viewport sizes, enhancing responsive design:
 
 
 .image-responsive {
-  @include grayscale(100%);
+    @include grayscale(100%);
 
-  @media (min-width: 768px) {
-    @include grayscale(0%);
-  }
+    @media (min-width: 768px) {
+        @include grayscale(0%);
+    }
 }
 
 
@@ -137,46 +137,46 @@ $hover-blur: 4px;
 
 // Define themes with specific filter values
 $themes: (
-  light: (
-    brightness: 100%,
-    contrast: 90%
-  ),
-  dark: (
-    brightness: 80%,
-    contrast: 110%
-  )
+    light: (
+        brightness: 100%,
+        contrast: 90%
+    ),
+    dark: (
+        brightness: 80%,
+        contrast: 110%
+    )
 );
 
 // Apply theme-based filters using a mixin
 @mixin apply-theme($theme-name) {
-  $theme: map-get($themes, $theme-name);
-  filter: brightness(map-get($theme, brightness)) contrast(map-get($theme, contrast));
+    $theme: map-get($themes, $theme-name);
+    filter: brightness(map-get($theme, brightness)) contrast(map-get($theme, contrast));
 }
 
 .element {
-  // Example usage with a light theme
-  @include apply-theme(light);
+// Example usage with a light theme
+@include apply-theme(light);
 
-  &:hover {
+&:hover {
     // Darken on hover for the light theme
     @include apply-theme(dark);
-  }
+}
 }
 // Animated Filter Transitions
 // SCSS can be used to create smooth transitions between filter states, adding a dynamic and interactive feel to your elements.
 
 
 @mixin filter-transition($duration: 0.3s, $easing: ease) {
-  transition: filter $duration $easing;
+    transition: filter $duration $easing;
 }
 
 .element-with-transition {
-  @include grayscale(0%);
-  @include filter-transition(0.5s, ease-in-out);
+    @include grayscale(0%);
+    @include filter-transition(0.5s, ease-in-out);
 
-  &:hover {
-    @include grayscale(100%);
-  }
+    &:hover {
+        @include grayscale(100%);
+    }
 }
 // Generating Multiple Filter Classes with Loops
 // SCSS loops can be incredibly powerful for generating a series of classes that apply varying levels of a specific filter effect, such as a range of blur or grayscale values.
@@ -196,25 +196,25 @@ $themes: (
 
 
 @mixin artistic-effect($blur-radius, $saturate-level, $sepia-level) {
-  filter: blur($blur-radius) saturate($saturate-level) sepia($sepia-level);
+    filter: blur($blur-radius) saturate($saturate-level) sepia($sepia-level);
 }
 
 .element-artistic {
-  @include artistic-effect(2px, 200%, 50%);
+    @include artistic-effect(2px, 200%, 50%);
 }
 // Utilizing Functions for Dynamic Filter Values
 // SCSS functions can calculate and return dynamic filter values based on certain conditions or inputs, offering a high degree of flexibility.
 
 
 @function calculate-brightness($light-mode) {
-  @if $light-mode {
-    @return 120%;
-  } @else {
-    @return 80%;
-  }
+    @if $light-mode {
+        @return 120%;
+    } @else {
+        @return 80%;
+    }
 }
 
 .element-dynamic-brightness {
-  $is-light-mode: true; // Example condition
-  filter: brightness(calculate-brightness($is-light-mode));
+    $is-light-mode: true; // Example condition
+    filter: brightness(calculate-brightness($is-light-mode));
 }

src/scss/elements/_tooltip.scss

@@ -149,31 +149,18 @@ $tooltip_unit: 5px;
 
 .tooltip:before {
   @include tooltip_box_right;
-
-
   // z-index: 9999;
-
-
-
-
   // margin-left: -60px;
   // font-size: 0.70em;
-
-
-
   // top: -5px;
   // left: 105%;
 }
 
-
-
 // arrow for the tooltip
 .tooltip:after {
   @include tooltip_arrow_left;
 }
 
-
-
 .tooltip:hover:before, 
 .tooltip:hover:after {
   opacity: 1;

src/scss/index.scss

@@ -65,5 +65,5 @@
 // @include banner("");
 
 
-$font_dir: '~icon.gl/fonts';
-@import "~icon.gl/scss/index.scss";
+// $font_dir: '~icon.gl/fonts';
+// @import "~icon.gl/scss/index.scss";