@nuvoui/core 1.1.8 → 1.2.0

package/src/styles/abstracts/_config.scss

@@ -0,0 +1,157 @@
+@use "sass:map";
+@use "sass:math";
+
+// Framework Configuration Options
+$generate-utility-classes: true !default;
+$enable-dark-mode: true !default;
+$enable-rtl: true !default;
+$enable-reduced-motion: true !default;
+$enable-container-queries: false !default;
+
+$base-size: 16;
+
+@function rem($px) {
+  @if $px == 0 {
+    @return 0;
+  }
+
+  // Strip units if $px has any
+  $value: if(math.unit($px) == "", $px, math.div($px, math.unit($px)));
+
+  @return math.div($value, $base-size) * 1rem;
+}
+
+// Global variables that might be used across different modules
+$enable-debuger: false !default;
+$enable-dark-mode: true !default;
+$enable-rtl: true !default;
+$enable-reduced-motion: true !default;
+$column-count: 12 !default;
+
+$default-container-name: nuvoui-container !default;
+$nuvoui-container-queries: false !default;
+
+$primary: #007bff !default;
+$secondary: #6c757d !default;
+$success: #28a745 !default;
+$danger: #dc3545 !default;
+$warning: #ffc107 !default;
+$info: #17a2b8 !default;
+
+$color-primitives: (
+  "gray": #6b7280,
+  "red": #ef4444,
+  "blue": #3b82f6,
+  "green": #22c55e,
+  "yellow": #eab308,
+  "purple": #a855f7,
+  "pink": #ec4899,
+) !default;
+
+$theme-tokens: ("background", "foreground", "surface", "border", "text-primary", "text-secondary") !default;
+
+// Default theme config (can be overridden)
+$light-theme: (
+  "background": #fafafa,
+  "foreground": #1a1a1a,
+  "surface": #fff,
+  "border": #e5e7eb,
+  "text-primary": #1a1a1a,
+  "text-secondary": #4b5563,
+) !default;
+
+$dark-theme: (
+  "background": #1a1a1a,
+  "foreground": #f1f1f1,
+  "surface": #2e2e2e,
+  "border": #2e2e2e,
+  "text-primary": #f1f1f1,
+  "text-secondary": #a3a3a3,
+) !default;
+
+$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: (
+  // 12px
+  "xs": 0.75rem,
+  // 14px
+  "sm": 0.875rem,
+  // 16px
+  "md": 1rem,
+  // 20px
+  "lg": 1.25rem,
+  // 24px
+  "xl": 1.5rem,
+  // 28px
+  "2xl": 1.75rem,
+  // 32px
+  "3xl": 2rem,
+  // 40px
+  "4xl": 2.5rem 
+) !default;
+
+// Updated spacing map
+$spacings: (
+  // 0rem
+  0: 0,
+  // 0.25rem
+  1: rem(4),
+  // 0.5rem
+  2: rem(8),
+  // 0.75rem
+  3: rem(12),
+  // 1rem
+  4: rem(16),
+  // 1.25rem
+  5: rem(20),
+  // 1.5rem
+  6: rem(24),
+  // 2rem
+  8: rem(32),
+  // 2.5rem
+  10: rem(40),
+  // 3rem
+  12: rem(48),
+  // 4rem
+  16: rem(64),
+  // 5rem
+  20: rem(80),
+  // 6rem
+  24: rem(96),
+  // 8rem
+  32: rem(128),
+  // 10rem
+  40: rem(160),
+  // 12rem
+  48: rem(192),
+  // 14rem
+  56: rem(224),
+  // 16rem
+  64: rem(256)
+);
+
+$percentages: (0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100) !default;

package/src/styles/abstracts/_functions.scss

@@ -0,0 +1,81 @@
+@use "sass:string";
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+@use "config" as *;
+
+@function str-replace($string, $search, $replace: " ") {
+  $index: string.index($string, $search);
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+  @return $string;
+}
+
+@function get-breakpoint-value($bp) {
+  @if map.has-key($breakpoints, $bp) {
+    @return map.get($breakpoints, $bp);
+  } @else if meta.type-of($bp) == number {
+    @return $bp;
+  } @else {
+    @warn 'Invalid breakpoint: #{$bp}';
+    @return null;
+  }
+}
+
+@function strip-unit($value) {
+  @return math.div($value, ($value * 0 + 1));
+}
+
+@function safe-unit-name($unit) {
+  @if $unit == "%" {
+    @return "per";
+  } @else if $unit == "." {
+    @return "dot";
+  } @else {
+    @return $unit;
+  }
+}
+
+@function get-unit($value) {
+  $value-str: #{$value};
+
+  // Relative length units
+  @if string.index($value-str, "em") {
+    @return "em";
+  } @else if string.index($value-str, "rem") {
+    @return "rem";
+  } @else if string.index($value-str, "%") {
+    @return "%";
+  }
+
+  // Viewport units
+  @else if string.index($value-str, "vw") {
+    @return "vw";
+  } @else if string.index($value-str, "vh") {
+    @return "vh";
+  } @else if string.index($value-str, "vmin") {
+    @return "vmin";
+  } @else if string.index($value-str, "vmax") {
+    @return "vmax";
+  }
+
+  // Absolute length units
+  @else if string.index($value-str, "px") {
+    @return "px";
+  } @else if string.index($value-str, "cm") {
+    @return "cm";
+  } @else if string.index($value-str, "mm") {
+    @return "mm";
+  } @else if string.index($value-str, "in") {
+    @return "in";
+  } @else if string.index($value-str, "pt") {
+    @return "pt";
+  } @else if string.index($value-str, "pc") {
+    @return "pc";
+  }
+
+  // Return empty string if no unit found
+  @return "";
+}

package/src/styles/abstracts/_index.scss

@@ -0,0 +1,2 @@
+@forward "config";
+@forward "functions";

package/src/styles/base/_base.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 
 /* Import variables */
-@use '../utilities/variables' as *;
+@use '../abstracts'  as *;
 @use '../utilities/media-queries' as media;
   
 :root {
@@ -10,7 +10,7 @@
 
 // Base typography styles
 html {
-  font-size: 16px;
+  font-size: 16px; 
   font-family: var(--font-family-base);
 }
 

package/src/styles/base/_index.scss

@@ -0,0 +1,2 @@
+@forward "base";
+@forward "reset";

package/src/styles/base/_reset.scss

@@ -1,7 +1,9 @@
 // Modern CSS Reset
 
 // Box sizing rules
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -32,7 +34,7 @@ body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: 'Courier New', Courier, monospace;
+  font-family: var(--font-family-base);
 }
 
 // Make images easier to work with
@@ -72,10 +74,10 @@ ol {
   list-style: none;
   margin: 0;
   padding: 0;
-  
+
   // Modern properties
-  padding-inline-start: 0;  // Replaces padding-left
-  margin-block: 0;          // Replaces margin-top/bottom
+  padding-inline-start: 0; // Replaces padding-left
+  margin-block: 0; // Replaces margin-top/bottom
 }
 
 li {
@@ -99,4 +101,4 @@ a {
 // Make sure textareas without a rows attribute are not tiny
 textarea:not([rows]) {
   min-height: 10em;
-}
+}

package/src/styles/index.scss

@@ -1,35 +1,16 @@
-/* Forward all modules for external use */
-@forward 'utilities/variables';
+// Import abstracts first (configuration)
+@forward "abstracts";
 
-// Base styles
-@forward 'base/reset';
-@forward 'base/base';
+// Import base styles
+@forward "base";
 
-// Layouts
-@forward 'layouts/container';
-@forward 'layouts/flex';
-@forward 'layouts/grid';
+// Import themes
+@forward "themes";
 
-// Utilities
-@forward 'utilities/alignment';
-@forward 'utilities/animations';
-@forward 'utilities/borders';
-@forward 'utilities/colors';
-@forward 'utilities/opacity';
-@forward 'utilities/position';
-@forward 'utilities/media-queries';
-@forward 'utilities/shadows';
-@forward 'utilities/sizing';
-@forward 'utilities/spacing';
-@forward 'utilities/transitions';
-@forward 'utilities/typography';
-@forward 'utilities/tooltips';
-@forward 'utilities/display';
+// Import layout components
+@forward "layouts";
 
-@forward 'utilities/helpers';
+// Import utilities based on configuration
+@forward "utilities";
 
-
-// Theme
-@forward 'themes/theme';
-
-@forward './mixins-map';
+@forward "./mixins-map";

package/src/styles/layouts/_container.scss

@@ -1,5 +1,5 @@
-@use 'sass:map';
-@use '../utilities/variables' as VAR;
+@use "sass:map";
+@use "../abstracts/config" as VAR;
 
 // Base container styles
 @mixin container-base {
@@ -15,7 +15,6 @@
   }
 }
 
-
 // Responsive container mixin
 @mixin container($display: block) {
   display: $display;
@@ -32,21 +31,3 @@
 .container {
   @include container;
 }
-
-.container-flex {
-  @include container(flex);
-}
-
-.container-grid {
-  @include container(grid);
-}
-
-.container-fluid {
-  @include container-base;
-  @include container-padding(1rem);
-}
-
-.container-no-padding {
-  @include container;
-  @include container-padding(0);
-}

package/src/styles/layouts/_flex.scss

@@ -1,5 +1,6 @@
 // Section: Layout
 // Module: Flex | Flex Inline
+// Note: Gap utilities are defined in _spacing.scss
 
 /**
  * @component Flex
@@ -44,8 +45,8 @@
  
 @use 'sass:math';
 @use '../utilities/media-queries' as MC;
-@use '../utilities/variables' as VAR;
-@use '../utilities/functions' as FN;
+@use '../abstracts'  as VAR;
+@use '../abstracts/functions' as FN;
 
 /**
  * @description Establishes a flex container.
@@ -312,7 +313,7 @@
   &.wrap { flex-wrap: wrap; }
   &.nowrap { flex-wrap: nowrap; }
   &.wrap-reverse { flex-wrap: wrap-reverse; }
-  
+
   // Justify modifiers
   &.start { justify-content: flex-start; }
   &.end { justify-content: flex-end; }

package/src/styles/layouts/_grid.scss

@@ -1,9 +1,10 @@
 // Section: Layout
 // Module: Grid | Grid Inline
+// Note: Gap utilities are defined in _spacing.scss
 
 @use 'sass:math';
-@use '../utilities/functions' as FN;
-@use '../utilities/variables' as VAR;
+@use '../abstracts/functions' as FN;
+@use '../abstracts'  as VAR;
 
 /**
  * @description Establishes a grid container.
@@ -87,10 +88,6 @@
   grid-row: $row;
 }
 
-@mixin grid-gap($value) { gap: $value; }
-@mixin col-gap($value) { column-gap: $value; }
-@mixin row-gap($value) { row-gap: $value; }
-
 // Classes
 .grid { @include grid; }
 .grid.inline { @include grid-inline; }
@@ -113,35 +110,6 @@
 }
 
 
-// Add corresponding classes
-.grid-gap-1 { @include grid-gap(0.25rem); }
-.grid-gap-2 { @include grid-gap(0.5rem); }
-.grid-gap-4 { @include grid-gap(1rem); }
-.col-gap-1 { @include col-gap(0.25rem); }
-.col-gap-2 { @include col-gap(0.5rem); }
-.col-gap-4 { @include col-gap(1rem); }
-.row-gap-1 { @include row-gap(0.25rem); }
-.row-gap-2 { @include row-gap(0.5rem); }
-.row-gap-4 { @include row-gap(1rem); }
-
-// Responsive grid gaps
-@each $breakpoint, $width in VAR.$breakpoints {
-  @media (min-width: #{$width}) {
-    .grid-gap-1\@#{$breakpoint} { @include grid-gap(0.25rem); }
-    .grid-gap-2\@#{$breakpoint} { @include grid-gap(0.5rem); }
-    .grid-gap-4\@#{$breakpoint} { @include grid-gap(1rem); }
-
-    .col-gap-1\@#{$breakpoint} { @include col-gap(0.25rem); }
-    .col-gap-2\@#{$breakpoint} { @include col-gap(0.5rem); }
-    .col-gap-4\@#{$breakpoint} { @include col-gap(1rem); }
-    
-    .row-gap-1\@#{$breakpoint} { @include row-gap(0.25rem); }
-    .row-gap-2\@#{$breakpoint} { @include row-gap(0.5rem); }
-    .row-gap-4\@#{$breakpoint} { @include row-gap(1rem); }
-  }
-}
-
-
 // Generate Column Span Classes with Responsive Variants
 @for $i from 1 through VAR.$column-count {
   .span-col-#{$i} {

package/src/styles/layouts/_index.scss

@@ -0,0 +1,3 @@
+@forward "container";
+@forward "flex";
+@forward "grid";