@nuvoui/core 1.1.7 → 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,33 +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/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/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,41 +1,33 @@
-@use 'sass:map';
-@use '../utilities/variables' as *;
+@use "sass:map";
+@use "../abstracts/config" as VAR;
 
 // Base container styles
 @mixin container-base {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
+}
+
+@mixin container-padding($padding) {
+  & {
+    padding-top: $padding;
+    padding-bottom: $padding;
+  }
 }
 
 // Responsive container mixin
 @mixin container($display: block) {
-  @include container-base;
-  
   display: $display;
-
-  @each $breakpoint, $width in $container-max-widths {
-    @media (min-width: map.get($breakpoints, $breakpoint)) {
-      max-width: $width;
+  @include container-base;
+  @each $breakpoint, $width in VAR.$breakpoints {
+    @media (min-width: $width) {
+      max-width: $width - 100px;
     }
   }
+  @include container-padding(1rem);
 }
 
 // Container classes
 .container {
   @include container;
 }
-
-.container-flex {
-  @include container(flex);
-}
-
-.container-grid {
-  @include container(grid);
-}
-
-.container-fluid {
-  @include container-base;
-}

package/src/styles/layouts/_flex.scss

@@ -1,10 +1,52 @@
 // Section: Layout
 // Module: Flex | Flex Inline
-
+// Note: Gap utilities are defined in _spacing.scss
+
+/**
+ * @component Flex
+ * @description Flexbox layout system for creating flexible page layouts
+ *
+ * @example
+ * <div class="flex row between x-center">
+ *   <div class="w-6">Left column (6 units)</div>
+ *   <div class="w-6">Right column (6 units)</div>
+ * </div>
+ * 
+ * <div class="flex col@md row@lg">
+ *   <!-- Changes direction based on breakpoint -->
+ * </div>
+ *
+ * @classes
+ * Base:
+ * - flex: Creates a flex container
+ * 
+ * Direction:
+ * - row: Sets flex-direction to row
+ * - col: Sets flex-direction to column
+ * - row-reverse: Reverses row direction
+ * - col-reverse: Reverses column direction
+ * 
+ * Alignment:
+ * - start/end/center: Controls justify-content
+ * - x-start/x-end/x-center: Controls align-items
+ * 
+ * Child elements:
+ * - w-{1-12}: Sets width based on column count
+ * - grow: Allows item to grow
+ * - shrink/shrink-0: Controls shrink behavior
+ *
+ * @responsive
+ * All classes support responsive variants using @breakpoint suffix:
+ * - row@md: Row direction on medium screens and up
+ * - between@lg: Space-between on large screens
+ *
+ * @see grid
+ */
+ 
 @use 'sass:math';
 @use '../utilities/media-queries' as MC;
-@use '../utilities/variables' as *;
-@use '../utilities/functions' as FN;
+@use '../abstracts'  as VAR;
+@use '../abstracts/functions' as FN;
 
 /**
  * @description Establishes a flex container.
@@ -250,11 +292,11 @@
 @mixin no-grow { flex: none; }
 
 /**
- * @description Sets how many columns this would take using percentage of $column-count.
+ * @description Sets how many columns this would take using percentage of VAR.$column-count.
  * @param {Number} $size - The number of columns to span.
  */
 @mixin w-col($size) {
-  flex: 0 0 math.percentage(math.div($size, $column-count));
+  flex: 0 0 math.percentage(math.div($size, VAR.$column-count));
 }
 
 // Base flex container
@@ -271,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; }
@@ -296,8 +338,8 @@
   &.x-content-stretch { align-content: stretch; }
 
   // Child flex items (using column count)
-  > .w-auto { @include f-w-auto }
-  > .w-full { @include f-w-full }
+  > .w-auto { @include f-w-auto; }
+  > .w-full { @include f-w-full; }
   > .grow { @include grow; }
   > .no-grow { @include no-grow; }
 
@@ -308,20 +350,18 @@
   > .shrink { @include shrink; }
   > .shrink-0 { @include shrink-0; }
   > .shrink-2 { @include shrink-2; }
-  @for $i from 1 through $column-count {
-    > .w-#{$i} { @include w-col($i) }
+  @for $i from 1 through VAR.$column-count {
+    > .w-#{$i} { @include w-col($i); }
     > .order-#{$i} { order: $i; }
   }
 }
 
-@each $breakpoint, $width in $breakpoints {
+@each $breakpoint, $width in VAR.$breakpoints {
   // Get breakpoint value using FN function
   $bp-val: FN.get-breakpoint-value($breakpoint);
   
   @media (min-width: #{$bp-val}) {
     .flex {
-      display: flex;
-
       // Direction
       &.row\@#{$breakpoint} { flex-direction: row; }
       &.row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
@@ -364,12 +404,14 @@
       & > .order-first\@#{$breakpoint} { order: -1; }
       & > .order-last\@#{$breakpoint} { order: 9999; }
       & > .order-none\@#{$breakpoint} { order: 0; }
-      @for $i from 1 through $column-count {
-        & > .w-#{$i}\@#{$breakpoint} { @include w-col($i) }
+      & > .shrink\@#{$breakpoint} { @include shrink; }
+      & > .shrink-0\@#{$breakpoint} { @include shrink-0; }
+      & > .shrink-2\@#{$breakpoint} { @include shrink-2; }
+
+      @for $i from 1 through VAR.$column-count {
+        & > .w-#{$i}\@#{$breakpoint} { @include w-col($i); }
+        & > .col-#{$i}\@#{$breakpoint} { @include w-col($i); }
         & > .order-#{$i}\@#{$breakpoint} { order: $i; }
-        & > .shrink\@#{$breakpoint} { @include shrink; }
-        & > .shrink-0\@#{$breakpoint} { @include shrink-0; }
-        & > .shrink-2\@#{$breakpoint} { @include shrink-2; }
       }
     }
   }

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 *;
+@use '../abstracts/functions' as FN;
+@use '../abstracts'  as VAR;
 
 /**
  * @description Establishes a grid container.
@@ -19,6 +20,19 @@
 @mixin cols($count) {grid-template-columns: repeat($count, minmax(0, 1fr));}
 @mixin rows($count) {grid-template-rows: repeat($count, minmax(0, 1fr));}
 
+
+/**
+* @description Establishes a grid container with a specified number of columns.
+* @param {number} $count - The number of columns.
+
+/// EXAMPLE USAGE
+.custom-grid {
+  display: grid;
+  @include cols-custom("1fr_auto_1fr");
+}
+
+*/
+
 @mixin cols-custom($template) {
   // Convert underscores to spaces so "1fr_auto" becomes "1fr auto"
   $converted: FN.str-replace($template, "_", " ");
@@ -68,42 +82,36 @@
   grid-row: $row;
 }
 @mixin position-col($col) {
-  grid-column: $start;
+  grid-column: $col;
 }
 @mixin position-row($row) {
   grid-row: $row;
 }
 
-
-/// EXAMPLE USAGE
-.custom-grid {
-  display: grid;
-  @include cols-custom("1fr_auto_1fr");
-}
-
 // Classes
 .grid { @include grid; }
 .grid.inline { @include grid-inline; }
 
+
+@for $i from 1 through VAR.$column-count {
+  .grid.cols-#{$i} { @include cols($i); }
+  .grid.rows-#{$i} { @include rows($i); }
+}
+
 // Grid Template Classes
-@each $breakpoint, $width in $breakpoints {
-    // Responsive grid columns
-    @media (min-width: #{$width}) {
-      .grid { @include grid; }
-
-      @for $i from 1 through $column-count {
-        .grid.cols-#{$i} { @include cols($i); }
-        .grid.rows-#{$i} { @include rows($i); }
-    
-      .grid.cols-#{$i}\@#{$breakpoint} {
-        @include cols($i);
-      }
+@each $breakpoint, $width in VAR.$breakpoints {
+  // Responsive grid columns
+  @media (min-width: #{$width}) {
+    @for $i from 1 through VAR.$column-count {
+      .grid.cols-#{$i}\@#{$breakpoint} { @include cols($i); }
+      .grid.rows-#{$i}\@#{$breakpoint} { @include rows($i); }
     }
   }
 }
 
+
 // Generate Column Span Classes with Responsive Variants
-@for $i from 1 through $column-count {
+@for $i from 1 through VAR.$column-count {
   .span-col-#{$i} {
     @include span-col($i);
   }
@@ -112,7 +120,7 @@
     @include span-row($i);
   }
 
-  @each $breakpoint, $width in $breakpoints {
+  @each $breakpoint, $width in VAR.$breakpoints {
     @media (min-width: #{$width}) {
       .span-col-#{$i}\@#{$breakpoint} {
         @include span-col($i);
@@ -127,9 +135,9 @@
 
 
 // Auto-fit/fill Classes
-@each $breakpoint, $width in $breakpoints {
-  .grid.auto-fit-#{$breakpoint} { @include auto-fit($width); }
-  .grid.auto-fill-#{$breakpoint} { @include auto-fill($width); }
+@each $size, $width in VAR.$grid-item-sizes {
+  .grid.auto-fit-#{$size} { @include auto-fit($width); }
+  .grid.auto-fill-#{$size} { @include auto-fill($width); }
 }
 
 // Flow Classes
@@ -150,7 +158,7 @@ $alignments: (
   .align-items-#{$name} { align-items: $value; }
   .place-items-#{$name} { place-items: $value; }
 
-  @each $breakpoint, $width in $breakpoints {
+  @each $breakpoint, $width in VAR.$breakpoints {
     @media (min-width: #{$width}) {
       .justify-items-#{$name}\@#{$breakpoint} {
         justify-items: $value;

package/src/styles/layouts/_index.scss

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