@nuvoui/core 1.1.8 → 1.2.1

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;
@@ -28,25 +27,10 @@
   @include container-padding(1rem);
 }
 
-// Container classes
-.container {
-  @include container;
-}
-
-.container-flex {
-  @include container(flex);
-}
-
-.container-grid {
-  @include container(grid);
-}
 
-.container-fluid {
-  @include container-base;
-  @include container-padding(1rem);
+@if VAR.$generate-utility-classes {
+  // Container classes
+  .container {
+    @include container;
+  }
 }
-
-.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.
@@ -298,119 +299,121 @@
   flex: 0 0 math.percentage(math.div($size, VAR.$column-count));
 }
 
-// Base flex container
-.flex {
-  display: flex;
-  
-  // Direction modifiers
-  &.row { flex-direction: row; }
-  &.row-reverse { flex-direction: row-reverse; }
-  &.col { flex-direction: column; }
-  &.col-reverse { flex-direction: column-reverse; }
-  
-  // Wrap modifiers
-  &.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; }
-  &.center { justify-content: center; }
-  &.between { justify-content: space-between; }
-  &.around { justify-content: space-around; }
-  &.evenly { justify-content: space-evenly; }
-  
-  // Align modifiers
-  &.x-start { align-items: flex-start; }
-  &.x-end { align-items: flex-end; }
-  &.x-center { align-items: center; }
-  &.x-baseline { align-items: baseline; }
-  &.x-stretch { align-items: stretch; }
-  
-  &.x-content-start { align-content: flex-start; }
-  &.x-content-end { align-content: flex-end; }
-  &.x-content-center { align-content: center; }
-  &.x-content-between { align-content: space-between; }
-  &.x-content-around { align-content: space-around; }
-  &.x-content-evenly { align-content: space-evenly; }
-  &.x-content-stretch { align-content: stretch; }
-
-  // Child flex items (using column count)
-  > .w-auto { @include f-w-auto; }
-  > .w-full { @include f-w-full; }
-  > .grow { @include grow; }
-  > .no-grow { @include no-grow; }
-
-  > .order-first { order: -1; }
-  > .order-last { order: 9999; }
-  > .order-none { order: 0; }
-
-  > .shrink { @include shrink; }
-  > .shrink-0 { @include shrink-0; }
-  > .shrink-2 { @include shrink-2; }
-  @for $i from 1 through VAR.$column-count {
-    > .w-#{$i} { @include w-col($i); }
-    > .order-#{$i} { order: $i; }
+@if VAR.$generate-utility-classes {
+  // Base flex container
+  .flex {
+    display: flex;
+    
+    // Direction modifiers
+    &.row { flex-direction: row; }
+    &.row-reverse { flex-direction: row-reverse; }
+    &.col { flex-direction: column; }
+    &.col-reverse { flex-direction: column-reverse; }
+    
+    // Wrap modifiers
+    &.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; }
+    &.center { justify-content: center; }
+    &.between { justify-content: space-between; }
+    &.around { justify-content: space-around; }
+    &.evenly { justify-content: space-evenly; }
+    
+    // Align modifiers
+    &.x-start { align-items: flex-start; }
+    &.x-end { align-items: flex-end; }
+    &.x-center { align-items: center; }
+    &.x-baseline { align-items: baseline; }
+    &.x-stretch { align-items: stretch; }
+    
+    &.x-content-start { align-content: flex-start; }
+    &.x-content-end { align-content: flex-end; }
+    &.x-content-center { align-content: center; }
+    &.x-content-between { align-content: space-between; }
+    &.x-content-around { align-content: space-around; }
+    &.x-content-evenly { align-content: space-evenly; }
+    &.x-content-stretch { align-content: stretch; }
+
+    // Child flex items (using column count)
+    > .w-auto { @include f-w-auto; }
+    > .w-full { @include f-w-full; }
+    > .grow { @include grow; }
+    > .no-grow { @include no-grow; }
+
+    > .order-first { order: -1; }
+    > .order-last { order: 9999; }
+    > .order-none { order: 0; }
+
+    > .shrink { @include shrink; }
+    > .shrink-0 { @include shrink-0; }
+    > .shrink-2 { @include shrink-2; }
+    @for $i from 1 through VAR.$column-count {
+      > .w-#{$i} { @include w-col($i); }
+      > .order-#{$i} { order: $i; }
+    }
   }
-}
 
-@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 {
-      // Direction
-      &.row\@#{$breakpoint} { flex-direction: row; }
-      &.row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
-      &.col\@#{$breakpoint} { flex-direction: column; }
-      &.col-reverse\@#{$breakpoint} { flex-direction: column-reverse; }
-      
-      // Wrap
-      &.wrap\@#{$breakpoint} { flex-wrap: wrap; }
-      &.nowrap\@#{$breakpoint} { flex-wrap: nowrap; }
-      &.wrap-reverse\@#{$breakpoint} { flex-wrap: wrap-reverse; }
-      
-      // Justify
-      &.start\@#{$breakpoint} { justify-content: flex-start; }
-      &.end\@#{$breakpoint} { justify-content: flex-end; }
-      &.center\@#{$breakpoint} { justify-content: center; }
-      &.between\@#{$breakpoint} { justify-content: space-between; }
-      &.around\@#{$breakpoint} { justify-content: space-around; }
-      &.evenly\@#{$breakpoint} { justify-content: space-evenly; }
-
-      // Align
-      &.x-start\@#{$breakpoint} { align-items: flex-start; }
-      &.x-end\@#{$breakpoint} { align-items: flex-end; }
-      &.x-center\@#{$breakpoint} { align-items: center; }
-      &.x-baseline\@#{$breakpoint} { align-items: baseline; }
-      &.x-stretch\@#{$breakpoint} { align-items: stretch; }
-
-      &.x-content-start\@#{$breakpoint} { align-content: flex-start; }
-      &.x-content-end\@#{$breakpoint} { align-content: flex-end; }
-      &.x-content-center\@#{$breakpoint} { align-content: center; }
-      &.x-content-between\@#{$breakpoint} { align-content: space-between; }
-      &.x-content-around\@#{$breakpoint} { align-content: space-around; }
-      &.x-content-evenly\@#{$breakpoint} { align-content: space-evenly; }
-      &.x-content-stretch\@#{$breakpoint} { align-content: stretch; }
-      
-      // Width (using column count)
-      & > .w-auto\@#{$breakpoint} { @include f-w-auto; }
-      & > .w-full\@#{$breakpoint} { @include f-w-full; }
-      & > .grow\@#{$breakpoint} { @include grow; }
-      & > .no-grow\@#{$breakpoint} { @include no-grow; }
-      & > .order-first\@#{$breakpoint} { order: -1; }
-      & > .order-last\@#{$breakpoint} { order: 9999; }
-      & > .order-none\@#{$breakpoint} { order: 0; }
-      & > .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; }
+  @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 {
+        // Direction
+        &.row\@#{$breakpoint} { flex-direction: row; }
+        &.row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
+        &.col\@#{$breakpoint} { flex-direction: column; }
+        &.col-reverse\@#{$breakpoint} { flex-direction: column-reverse; }
+        
+        // Wrap
+        &.wrap\@#{$breakpoint} { flex-wrap: wrap; }
+        &.nowrap\@#{$breakpoint} { flex-wrap: nowrap; }
+        &.wrap-reverse\@#{$breakpoint} { flex-wrap: wrap-reverse; }
+        
+        // Justify
+        &.start\@#{$breakpoint} { justify-content: flex-start; }
+        &.end\@#{$breakpoint} { justify-content: flex-end; }
+        &.center\@#{$breakpoint} { justify-content: center; }
+        &.between\@#{$breakpoint} { justify-content: space-between; }
+        &.around\@#{$breakpoint} { justify-content: space-around; }
+        &.evenly\@#{$breakpoint} { justify-content: space-evenly; }
+
+        // Align
+        &.x-start\@#{$breakpoint} { align-items: flex-start; }
+        &.x-end\@#{$breakpoint} { align-items: flex-end; }
+        &.x-center\@#{$breakpoint} { align-items: center; }
+        &.x-baseline\@#{$breakpoint} { align-items: baseline; }
+        &.x-stretch\@#{$breakpoint} { align-items: stretch; }
+
+        &.x-content-start\@#{$breakpoint} { align-content: flex-start; }
+        &.x-content-end\@#{$breakpoint} { align-content: flex-end; }
+        &.x-content-center\@#{$breakpoint} { align-content: center; }
+        &.x-content-between\@#{$breakpoint} { align-content: space-between; }
+        &.x-content-around\@#{$breakpoint} { align-content: space-around; }
+        &.x-content-evenly\@#{$breakpoint} { align-content: space-evenly; }
+        &.x-content-stretch\@#{$breakpoint} { align-content: stretch; }
+        
+        // Width (using column count)
+        & > .w-auto\@#{$breakpoint} { @include f-w-auto; }
+        & > .w-full\@#{$breakpoint} { @include f-w-full; }
+        & > .grow\@#{$breakpoint} { @include grow; }
+        & > .no-grow\@#{$breakpoint} { @include no-grow; }
+        & > .order-first\@#{$breakpoint} { order: -1; }
+        & > .order-last\@#{$breakpoint} { order: 9999; }
+        & > .order-none\@#{$breakpoint} { order: 0; }
+        & > .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; }
+        }
       }
     }
   }