@nuvoui/core 1.3.4 → 1.4.0

package/src/styles/utilities/_z-index.scss

@@ -5,8 +5,9 @@
 @use "sass:meta";
 
 // Import variables
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+@use "../functions/feature-flags" as fn-flags;
 
 // Z-Index Utilities
 // Classes:
@@ -17,121 +18,121 @@
 
 // Z-index values map (can be moved to variables)
 $z-indexes: (
-  "auto": auto,
-  "0": 0,
-  "10": 10,
-  "20": 20,
-  "30": 30,
-  "40": 40,
-  "50": 50,
-  "60": 60,
-  "70": 70,
-  "80": 80,
-  "90": 90,
-  "100": 100,
-  "200": 200,
-  "500": 500,
-  "1000": 1000,
+    "auto": auto,
+    "0": 0,
+    "10": 10,
+    "20": 20,
+    "30": 30,
+    "40": 40,
+    "50": 50,
+    "60": 60,
+    "70": 70,
+    "80": 80,
+    "90": 90,
+    "100": 100,
+    "200": 200,
+    "500": 500,
+    "1000": 1000,
 );
 
 // Named z-index levels (can be moved to variables)
 $z-index-levels: (
-  "base": 0,
-  "hover": 10,
-  "dropdown": 100,
-  "sticky": 200,
-  "fixed": 300,
-  "overlay": 400,
-  "drawer": 500,
-  "modal": 600,
-  "popover": 700,
-  "tooltip": 800,
-  "toast": 900,
-  "max": 9999,
+    "base": 0,
+    "hover": 10,
+    "dropdown": 100,
+    "sticky": 200,
+    "fixed": 300,
+    "overlay": 400,
+    "drawer": 500,
+    "modal": 600,
+    "popover": 700,
+    "tooltip": 800,
+    "toast": 900,
+    "max": 9999,
 );
 
 // Apply a z-index value
 // @param {Number|String} $value - Z-index value or key
 @mixin z-index($value) {
-  @if map.has-key($z-indexes, $value) {
-    z-index: map.get($z-indexes, $value);
-  } @else if map.has-key($z-index-levels, $value) {
-    z-index: map.get($z-index-levels, $value);
-  } @else {
-    z-index: $value;
-  }
+    @if map.has-key($z-indexes, $value) {
+        z-index: map.get($z-indexes, $value);
+    } @else if map.has-key($z-index-levels, $value) {
+        z-index: map.get($z-index-levels, $value);
+    } @else {
+        z-index: $value;
+    }
 }
 
 // Generate z-index utility classes
 // @param {String} $breakpoint - Optional breakpoint name for responsive variants
 @mixin z-index-utilities($breakpoint: null) {
-  $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
+    $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
 
-  // Standard numbered z-index utilities
-  @each $key, $value in $z-indexes {
-    #{VAR.$parent-selector} .z-#{$key}#{$suffix} {
-      @include z-index($key);
+    // Standard numbered z-index utilities
+    @each $key, $value in $z-indexes {
+        #{config-flags.$parent-selector} .z-#{$key}#{$suffix} {
+            @include z-index($key);
+        }
     }
-  }
 
-  // Named semantic z-index utilities
-  @each $key, $value in $z-index-levels {
-    #{VAR.$parent-selector} .z-#{$key}#{$suffix} {
-      @include z-index($value);
+    // Named semantic z-index utilities
+    @each $key, $value in $z-index-levels {
+        #{config-flags.$parent-selector} .z-#{$key}#{$suffix} {
+            @include z-index($value);
+        }
     }
-  }
 }
 
 // Create specific named utilities as mixins for use in other files
 @mixin z-base {
-  @include z-index("base");
+    @include z-index("base");
 }
 @mixin z-hover {
-  @include z-index("hover");
+    @include z-index("hover");
 }
 @mixin z-dropdown {
-  @include z-index("dropdown");
+    @include z-index("dropdown");
 }
 @mixin z-sticky {
-  @include z-index("sticky");
+    @include z-index("sticky");
 }
 @mixin z-fixed {
-  @include z-index("fixed");
+    @include z-index("fixed");
 }
 @mixin z-drawer {
-  @include z-index("drawer");
+    @include z-index("drawer");
 }
 @mixin z-modal {
-  @include z-index("modal");
+    @include z-index("modal");
 }
 @mixin z-popover {
-  @include z-index("popover");
+    @include z-index("popover");
 }
 @mixin z-tooltip {
-  @include z-index("tooltip");
+    @include z-index("tooltip");
 }
 @mixin z-overlay {
-  @include z-index("overlay");
+    @include z-index("overlay");
 }
 @mixin z-toast {
-  @include z-index("toast");
+    @include z-index("toast");
 }
 @mixin z-max {
-  @include z-index("max");
+    @include z-index("max");
 }
 @mixin z-auto {
-  @include z-index("auto");
+    @include z-index("auto");
 }
 
 // Generate utility classes
-@if FN.feature-enabled("z-index") {
-  // Generate base utilities
-  @include z-index-utilities;
+@if fn-flags.feature-enabled("z-index") {
+    // Generate base utilities
+    @include z-index-utilities;
 
-  // Generate responsive variants
-  @each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-      @include z-index-utilities($breakpoint);
+    // Generate responsive variants
+    @each $breakpoint, $width in config-breakpoint.$breakpoints {
+        @media (min-width: #{$width}) {
+            @include z-index-utilities($breakpoint);
+        }
     }
-  }
 }

package/src/styles/abstracts/_config.scss

@@ -1,253 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-@use "sass:list";
-
-$feature-flags: (
-  "alignments": true,
-  "animations": true,
-  "backdrops": true,
-  "borders": true,
-  "container-queries": true,
-  "cursors": true,
-  "displays": true,
-  "flex": true,
-  "grid": true,
-  "opacity": true,
-  "position": true,
-  "shadows": true,
-  "sizing": true,
-  "spacing": true,
-  "tooltips": true,
-  "theme": true,
-  "transforms": true,
-  "transitions": true,
-  "typography": true,
-  "z-index": true,
-) !default;
-
-// Framework Configuration Options
-$generate-utility-classes: false !default;
-$enable-dark-mode: true !default;
-
-$enable-debugger: false !default;
-
-// if just a number passed, it will be assumed as px
-$default-unit: px !default;
-
-// Text
-$base-size: 16px !default;
-$font-family:
-  system-ui,
-  -apple-system,
-  "BlinkMacSystemFont",
-  "Segoe UI",
-  "Roboto",
-  "Oxygen",
-  "Ubuntu",
-  "Cantarell",
-  sans-serif !default;
-
-// Global variables that might be used across different modules
-$column-count: 12 !default; // todo: pending
-
-$default-container-name: nuvoui-container !default; // todo: pending
-
-// Accessible color palette
-$primary: #007bff !default;
-$secondary: #6c757d !default;
-$success: #28a745 !default;
-$danger: #dc3545 !default;
-$warning: #ffc107 !default;
-$info: #17a2b8 !default;
-
-// Color palette
-$color-primitives: (
-  "gray": #6b7280,
-  "red": #ef4444,
-  "blue": #3b82f6,
-  "green": #22c55e,
-  "yellow": #eab308,
-  "purple": #a855f7,
-  "pink": #ec4899,
-) !default;
-
-// Default theme config (can be overridden)
-$light-theme: (
-  "bg-base": #fbfafc,
-  "bg-alternate": #1a1a1a,
-  "bg-surface": #fff,
-  "border-base": #d3d5d9,
-  "text-color": #1a1a1a,
-  "text-muted": #1a1a1a8a,
-  "text-subtle": #1a1a1a50,
-  "text-inverted": #f1f1f1,
-) !default;
-
-// Extract theme tokens from light theme keys
-// Users can still override this if they want to use only a subset
-$theme-tokens: map.keys($light-theme) !default;
-
-$dark-theme: (
-  "bg-base": #1a1a1a,
-  "bg-alternate": #f1f1f1,
-  "bg-surface": #2e2e2e,
-  "border-base": #2e2e2e,
-  "text-color": #f1f1f1,
-  "text-muted": #f1f1f18a,
-  "text-subtle": #f1f1f150,
-  "text-inverted": #1a1a1a,
-) !default;
-
-$basic-colors: (
-  "black": #000,
-  "white": #fff,
-  "transparent": transparent,
-) !default;
-
-$semantic-colors: ("primary", "secondary", "success", "danger", "warning", "info");
-$primitive-color-names: map.keys($color-primitives);
-$color-names: list.join($semantic-colors, $primitive-color-names);
-$color-names-with-basic: list.join($color-names, map.keys($basic-colors));
-
-@function validate-theme-tokens($theme-map, $required-tokens) {
-  $missing-tokens: ();
-
-  @each $token in $required-tokens {
-    @if not map.has-key($theme-map, $token) {
-      $missing-tokens: list.append($missing-tokens, $token, comma);
-    }
-  }
-
-  @if list.length($missing-tokens) > 0 {
-    @error "Theme is missing required tokens: #{$missing-tokens}";
-  }
-
-  @return list.length($missing-tokens) == 0;
-}
-
-// Validate both themes
-@mixin validate-tokens {
-  @if not validate-theme-tokens($light-theme, $theme-tokens) {
-    @error "Light theme is missing required tokens.";
-  }
-  @if not validate-theme-tokens($dark-theme, $theme-tokens) {
-    @error "Dark theme is missing required tokens.";
-  }
-}
-
-@include validate-tokens;
-
-$shadow-colors: (
-  "default": rgb(0 0 0 / 10%),
-  "dark": rgb(0 0 0 / 20%),
-  "darker": rgb(0 0 0 / 35%),
-  "darkest": rgb(0 0 0 / 50%),
-) !default;
-
-// Breakpoints
-$breakpoints: (
-  "xs": 480px,
-  "sm": 640px,
-  "md": 768px,
-  "lg": 1024px,
-  "xl": 1280px,
-  "2xl": 1536px,
-) !default;
-
-$grid-item-sizes: (
-  "xs": 200px,
-  "sm": 250px,
-  "md": 300px,
-  "lg": 350px,
-  "xl": 400px,
-) !default;
-
-// _variables.scss
-$font-sizes: (
-  "xs": 0.75rem,
-  // 12px
-  "sm": 0.875rem,
-  // 14px
-  "md": 1rem,
-  "base": 1rem,
-  // 16px
-  "lg": 1.25rem,
-  // 20px
-  "xl": 1.5rem,
-  // 24px
-  "2xl": 1.75rem,
-  // 28px
-  "3xl": 2rem,
-  // 32px
-  "4xl": 2.5rem, // 40px
-) !default;
-
-// Updated spacing map
-$spacings: (
-  0: 0,
-  1: 0.25rem,
-  // 4px
-  2: 0.5rem,
-  // 8px
-  3: 0.75rem,
-  // 12px
-  4: 1rem,
-  // 16px
-  5: 1.25rem,
-  // 20px
-  6: 1.5rem,
-  // 24px
-  8: 2rem,
-  // 32px
-  10: 2.5rem,
-  // 40px
-  12: 3rem,
-  // 48px
-  16: 4rem,
-  // 64px
-  20: 5rem,
-  // 80px
-  24: 6rem,
-  // 96px
-  32: 8rem,
-  // 128px
-  40: 10rem,
-  // 160px
-  48: 12rem,
-  // 192px
-  56: 14rem,
-  // 224px
-  64: 16rem, // 256px
-) !default;
-
-$percentages: (0, 5, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100) !default;
-
-// Common border width values that are most useful
-$border-widths: (0, 1, 2, 4, 8) !default;
-
-// Common border radius values that are most useful
-$border-radii: (
-  "xs": 0.25rem,
-  "sm": 0.375rem,
-  "md": 0.5rem,
-  "lg": 0.75rem,
-  "xl": 1rem,
-  "2xl": 1.25rem,
-  "full": 50%,
-  "none": 0,
-) !default;
-
-// Font weight map
-$font-weights: (
-  "thin": 100,
-  "extralight": 200,
-  "light": 300,
-  "normal": 400,
-  "medium": 500,
-  "semibold": 600,
-  "bold": 700,
-  "extrabold": 800,
-  "black": 900,
-) !default;
-
-$parent-selector: "" !default;