@nuvoui/core 1.1.3 → 1.1.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.1.3",
-  "description": "NuvoUI Core SCSS Library",
+  "version": "1.1.4",
+  "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "main": "dist/nuvoui.css",
   "module": "src/styles/index.scss",
   "files": [
@@ -25,12 +25,18 @@
   "keywords": [
     "scss",
     "css",
+    "framework",
     "nuvoui",
     "ui-library",
     "design-system",
-    "frontend",
     "responsive",
-    "modern"
+    "animations",
+    "frontend",
+    "modern-ui",
+    "web-development",
+    "responsive-design",
+    "developer-friendly",
+    "mixins"
   ],
   "author": {
     "name": "AALA IT Solutions",
@@ -40,6 +46,7 @@
   "bugs": {
     "url": "https://github.com/NuvoUI/core/issues"
   },
+  "homepage": "https://nuvoui.io/",
   "publishConfig": {
     "access": "public"
   },

package/src/styles/base/_base.scss

@@ -18,6 +18,7 @@ body {
   font-weight: 400;
   line-height: 1.5;
   color: var(--text-primary);
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 // Headings
@@ -62,6 +63,102 @@ small {
   font-size: map.get($font-sizes, 'sm');
 }
 
+// Buttons
+button {
+  padding: 0.5rem 1rem;
+  border: 0;
+  border-radius: 0.25rem;
+  background-color: var(--button-bg-color, #007bff); // Default button color
+  color: var(--button-text-color, #ffffff);
+  font-family: var(--font-family-base);
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+
+  &:hover {
+    background-color: var(--button-bg-color-hover, #0056b3); // Hover button color
+  }
+  
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: #e0e0e0; // Disabled button color
+    color: #a0a0a0; // Disabled text color
+    cursor: not-allowed;
+  }
+}
+
+// Inputs
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="search"],
+textarea {
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  width: 100%; // Full width
+  font-family: var(--font-family-base);
+  transition: border 0.2s ease-in-out;
+  &:focus {
+    border-color: var(--link-color);
+    outline: none;
+  }
+}
+
+// Checkboxes and Radio Buttons
+input[type="checkbox"],
+input[type="radio"] {
+  margin-right: 0.5rem; // Space between input and label
+}
+
+// Selects
+select {
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  width: 100%; // Full width
+  font-family: var(--font-family-base);
+  transition: border 0.2s ease-in-out;
+  &:focus {
+    border-color: var(--link-color);
+    outline: none;
+  }
+}
+
+// Blockquotes
+blockquote {
+  margin: 1rem 0;
+  padding: 0.5rem 1rem;
+  border-left: 4px solid var(--border);
+  font-style: italic;
+}
+
+// Horizontal Rule
+hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1rem 0;
+}
+
+// Images
+img {
+  max-width: 100%; // Responsive images
+  height: auto;
+}
+
+// Figures and Captions
+figure {
+  margin: 1rem 0;
+}
+
+figcaption {
+  font-size: 0.875rem; // Smaller font for captions
+  color: var(--text-secondary, #666); // Optional secondary text color
+}
+
 // Links
 a {
   color: var(--link-color);
@@ -84,10 +181,3 @@ a {
   border: 0 !important;
 }
 
-.focus\:outline-none:focus {
-  outline: none;
-}
-
-.focus\:ring:focus {
-  box-shadow: 0 0 0 3px rgb(66 153 225 / 50%);
-}

package/src/styles/base/_reset.scss

@@ -7,7 +7,7 @@
   padding: 0;
 }
 
-// Remove default margin
+// Remove default margin and padding
 body,
 h1,
 h2,
@@ -21,6 +21,7 @@ blockquote,
 dl,
 dd {
   margin: 0;
+  padding: 0;
 }
 
 // Set core body defaults
@@ -51,11 +52,6 @@ textarea,
 select {
   font: inherit;
   transition: all 0.2s ease-in-out;
-  
-  &:focus {
-      box-shadow: inset 0 0 7px 0 #60b0cd; /* Change this to your preferred color and width */
-      outline: 2px solid #40c1bf; /* Change this to your preferred color and width */
-  }
 }
 
 // Remove all animations and transitions for people that prefer not to see them

package/src/styles/index.scss

@@ -24,9 +24,7 @@
 @forward 'layouts/flex';
 @forward 'layouts/grid';
 
-// Themes
-@forward 'themes/light';
-@forward 'themes/dark';
+// Theme
 @forward 'themes/theme';
 
 @forward './mixins-map';

package/src/styles/layouts/_flex.scss

@@ -50,7 +50,7 @@
 @mixin no-grow { flex: none; }
 
 @mixin w-col($size) {
-  flex: 0 0 math.percentage(math.div($size, $column-count)) !important;
+  flex: 0 0 math.percentage(math.div($size, $column-count));
 }
 
 // Base flex container

package/src/styles/mixins-map.scss

@@ -4,8 +4,6 @@
 @use 'layouts/container' as *;
 @use 'layouts/flex' as *;
 @use 'layouts/grid' as *;
-@use 'themes/dark' as *;
-@use 'themes/light' as *;
 @use 'themes/theme' as *;
 @use 'utilities/animations' as *;
 @use 'utilities/borders' as *;
@@ -336,11 +334,6 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include row-end(str.unquote($value));
-        } @else if str.index($mixin-str, 'generate-theme-colors(') == 1 {
-          $start: str.index($mixin-str, '(') + 1;
-          $end: str.length($mixin-str) - 1;
-          $value: str.slice($mixin-str, $start, $end);
-          @include generate-theme-colors(str.unquote($value));
         } @else if str.index($mixin-str, 'generate-bounce-keyframes(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -897,11 +890,6 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include row-end(str.unquote($value));
-        } @else if str.index($mixin-str, 'generate-theme-colors(') == 1 {
-          $start: str.index($mixin-str, '(') + 1;
-          $end: str.length($mixin-str) - 1;
-          $value: str.slice($mixin-str, $start, $end);
-          @include generate-theme-colors(str.unquote($value));
         } @else if str.index($mixin-str, 'generate-bounce-keyframes(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;

package/src/styles/themes/_theme.scss

@@ -1,135 +1,84 @@
 // _theme.scss
 @use 'sass:color';
 @use 'sass:map';
+@use '../utilities/colors' as *;
 @use '../utilities/variables' as *;
 
 
-// Color variations percentage
-$color-variations: (
-  'lighter': 15%,
-  'light': 10%,
-  'dark': -10%,
-  'darker': -15%
-);
+ 
 
-$opacity-levels: (
-  '10': 0.1,
-  '25': 0.25,
-  '50': 0.5,
-  '75': 0.75
-);
+// Generate scales for primitives
+$colors-primitives: ();
 
-
-@function theme-color($color-name, $variant: 'base') {
-  @return var(--#{$color-name}#{if($variant == 'base', '', '-' + $variant)});
+@each $name, $color in $color-primitives {
+    $colors-primitives: map.set($colors-primitives, $name, create-color-scale($color));
 }
 
-@mixin generate-theme-colors($theme) {
-  @each $name, $color in $colors {
-    // Base color
-    --#{$name}: #{$color};
-    
-    // Variations
-    @each $variant, $percentage in $color-variations {
-      --#{$name}-#{$variant}: #{if($theme == 'light',
-        color.scale($color, $lightness: $percentage),
-        color.scale($color, $lightness: $percentage * -1)
-      )};
-    }
-    
-    // Opacity variations
-    @each $level, $opacity in $opacity-levels {
-      --#{$name}-#{$level}: #{rgba($color, $opacity)};
+:root {
+  @each $color-name, $scale in $colors {
+    --#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
+    @each $shade, $value in $scale {
+      --#{$color-name}-#{$shade}: #{color.adjust($value, $alpha: 1)};
     }
-    
-    // State variations
-    --#{$name}-hover: var(--#{$name}-#{if($theme == 'light', 'dark', 'light')});
-    --#{$name}-active: var(--#{$name}-#{if($theme == 'light', 'darker', 'lighter')});
-    --#{$name}-disabled: var(--#{$name}-50);
-  }
-
-   // Background & Border
-   @if $theme == 'light' {
-    --bg-primary: var(--light);
-    --bg-secondary: #{color.scale(map.get($colors, 'light'), $lightness: -5%)};
-    --bg-tertiary: #{color.scale(map.get($colors, 'light'), $lightness: -10%)};
-    --border-color: #{rgba(map.get($colors, 'dark'), 0.1)};
-    --border-color-dark: #{rgba(map.get($colors, 'dark'), 0.2)};
-  } @else {
-    --bg-primary: var(--dark);
-    --bg-secondary: #{color.scale(map.get($colors, 'dark'), $lightness: 5%)};
-    --bg-tertiary: #{color.scale(map.get($colors, 'dark'), $lightness: 10%)};
-    --border-color: #{rgba(map.get($colors, 'light'), 0.07)};
-    --border-color-dark: #{rgba(map.get($colors, 'light'), 0.15)};
   }
 
-    
-  // Text Colors
-  @if $theme == 'light' {
-    --text-primary: var(--dark);
-    --text-secondary: #{rgba(map.get($colors, 'dark'), 0.7)};
-    --text-tertiary: #{rgba(map.get($colors, 'dark'), 0.5)};
-    --text-disabled: #{rgba(map.get($colors, 'dark'), 0.3)};
-    --text-inverse: var(--light);
-  } @else {
-    --text-primary: var(--light);
-    --text-secondary: #{rgba(map.get($colors, 'light'), 0.7)};
-    --text-tertiary: #{rgba(map.get($colors, 'light'), 0.5)};
-    --text-disabled: #{rgba(map.get($colors, 'light'), 0.3)};
-    --text-inverse: var(--dark);
+  @each $color-name, $scale in $colors-primitives {
+    --#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
+    @each $shade, $value in $scale {
+      --#{$color-name}-#{$shade}: #{color.adjust($value, $alpha: 1)};
+    }
   }
 
-
-  // Link Colors
+  --background: #{map.get($light-theme, 'background')};
+  --foreground: #{map.get($light-theme, 'foreground')};
+  --surface: #{map.get($light-theme, 'surface')};
+  --border: var(--primary-600);
+  --text-primary: var(--gray-900);
+  --text-secondary: var(--gray-600);
+  --button-bg-color: var(--primary);
+  --button-bg-color-hover: var(--primary-600);
+  --button-text-color: var(--gray-100);
   --link-color: var(--primary);
-  --link-hover-color: #{color.scale(map.get($colors, 'primary'), $lightness: if($theme == 'light', -10%, 10%))};
-  --link-active-color: #{color.scale(map.get($colors, 'primary'), $lightness: if($theme == 'light', -20%, 20%))};
-  --link-visited-color: #{color.scale(map.get($colors, 'primary'), $saturation: -20%)};
+  --link-hover-color: var(--primary-600);
+}
 
-  // Navigation
-  --nav-bg: var(--bg-primary);
-  --nav-hover: var(--bg-secondary);
-  --nav-active: var(--bg-tertiary);
-  --nav-text: var(--text-primary);
-  --nav-text-hover: var(--primary);
-  --nav-border: var(--border-color);
+[data-theme="dark"] {
+  --background: #{map.get($dark-theme, 'background')};
+  --foreground: #{map.get($dark-theme, 'foreground')};
+  --surface: #{map.get($dark-theme, 'surface')};
+  --border: var(--primary-400);
+  --text-primary: var(--gray-100);
+  --text-secondary: var(--gray-400);
+  --button-bg-color: var(--primary);
+  --button-bg-color-hover: var(--primary-400);
+  --button-text-color: var(--gray-200);
+  --link-color: var(--primary);
+  --link-hover-color: var(--primary-400);
+}
 
-  // Tooltip
-  --tooltip-bg: var(--dark);
-  --tooltip-text: var(--light);
-  --tooltip-shadow-color: rgb(0 0 0 / 40%);
-  --microtip-transition-duration: 0.518s;
-  --microtip-transition-delay: .2s;
-  --microtip-transition-easing: cubic-bezier(0.16, 1, 0.9, 1);
-  --microtip-font-size: 0.875rem;
-  --microtip-font-weight: 300;
-  --microtip-text-transform: none;
+// --font-family-heading: var(--font-family-base);
+// --text-primary: #{map.get($colors, 'dark')};
+// --link-color: #{map.get($colors, 'primary')};
+// --link-hover-color: #{color.scale(map.get($colors, 'primary'), $lightness: -10%)};
 
-  // Shadow
-  // --shadow-color: #{if($theme == 'light', '0,0,0', '255,255,255')};
-  // --shadow-opacity: #{if($theme == 'light', 0.1, 0.5)};
-}
+// --nav-bg: #{map.get($colors, 'light')};
+// // --nav-hover: #{color.scale(map.get($colors, 'light'), $lightness: -10%)};
+// --nav-hover: white;
+// --nav-text: #{map.get($colors, 'dark')};
 
-/**
-.btn-primary {
-  background-color: theme-color('primary');
-  
-  &:hover {
-    background-color: theme-color('primary', 'hover');
-  }
-  
-  &:disabled {
-    background-color: theme-color('primary', 'disabled');
-  }
-}
+//   // Link Colors
+//   --link-color: var(--primary);
+//   --link-hover-color: #{color.scale(map.get($colors, 'primary'), $lightness: if($theme == 'light', -10%, 10%))};
+//   --link-active-color: #{color.scale(map.get($colors, 'primary'), $lightness: if($theme == 'light', -20%, 20%))};
+//   --link-visited-color: #{color.scale(map.get($colors, 'primary'), $saturation: -20%)};
 
-.form-input {
-  border-color: var(--border-color);
-  color: var(--text-primary);
-  
-  &:focus {
-    border-color: theme-color('primary');
-    box-shadow: 0 0 0 4px theme-color('primary', '25');
-  }
-}
- */
+//   // Tooltip
+//   --tooltip-bg: var(--dark);
+//   --tooltip-text: var(--light);
+//   --tooltip-shadow-color: rgb(0 0 0 / 40%);
+//   --microtip-transition-duration: 0.518s;
+//   --microtip-transition-delay: .2s;
+//   --microtip-transition-easing: cubic-bezier(0.16, 1, 0.9, 1);
+//   --microtip-font-size: 0.875rem;
+//   --microtip-font-weight: 300;
+//   --microtip-text-transform: none;

package/src/styles/utilities/_borders.scss

@@ -14,14 +14,10 @@
     .border-#{$i} { @include border($i); }
 }
 
-@each $color-name, $color-value in $colors {
-    .border-#{$color-name} { border-color: $color-value; }
-}
-
 .rounded { @include rounded(0.25rem); }
 .square { @include rounded(0) }
 .pill { @include rounded(9999px); }
-
+  
 // Responsive Position Classes
 @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {

package/src/styles/utilities/_colors.scss

@@ -6,82 +6,40 @@
 
 @use './variables' as *;
 
-
-// todo: only functions and may be not needed
-
-@each $color-name, $color-value in $colors {
-    .text-#{$color-name} { color: $color-value; }
-    .bg-#{$color-name} { background-color: $color-value; }
-}
-
-// Modern Color System 
 // Color Validation
 @function is-valid-color($color) {
     @return meta.type-of($color) == 'color';
 }
 
-// Modern Color Spaces
-@function to-lch($color) {
-    @if not is-valid-color($color) {
-        @error "Invalid color provided to to-lch";
-    }
-    @return color.adjust($color, $space: lch);
-}
-
-@function adaptive-color($color, $lightness-shift) {
-    @return color.adjust($color, $space: lch, $lightness: $lightness-shift);
-}
-
-// Semantic Color System
-@function get-surface-color($color, $elevation) {
-    $lch-color: to-lch($color);
-    @return color.adjust($lch-color, 
-        $lightness: if($elevation > 0, 5 * $elevation, 0)
-    );
-}
-
-// Color Harmony Generation
-@function complementary($color) {
-    @return color.adjust($color, 180);
-}
-
-@function triadic($color) {
-    @return (
-        $color,
-        color.adjust($color, 120),
-        color.adjust($color, 240)
+@function create-color-scale($color) {
+    $scale: ();
+    $stops: (
+      50: 95%,
+      100: 85%,
+      200: 75%,
+      300: 65%,
+      400: 55%,
+      500: 50%, // Base color
+      600: 45%,
+      700: 35%,
+      800: 25%,
+      900: 15%
     );
-}
-
-@function split-complementary($color) {
-    @return (
+  
+    @each $stop, $mix in $stops {
+      $value: if($stop == 500,
         $color,
-        color.adjust($color, 150),
-        color.adjust($color, 210)
-    );
-}
-
-@function get-accent-palette($primary, $accent-angle: 45deg) {
-    $lch: to-lch($primary);
-    @return (
-        subtle: color.adjust($lch, $lightness: 15%, $hue: $accent-angle),
-        vibrant: color.adjust($lch, $saturation: 20%, $hue: $accent-angle * 2)
-    );
-}
-
-// Color Scale Generation
-@function create-scale($color, $steps: 9) {
-    $scale: ();
-    $lch-color: to-lch($color);
-    
-    @for $i from 0 through $steps {
-        $lightness: 95 - ($i * (90 / $steps));
-        $new-color: color.adjust($lch-color, $lightness: $lightness);
-        $scale: list.append($scale, $new-color);
+        if($stop < 500,
+          color.mix(white, $color, $mix),
+          color.mix(black, $color, (100% - $mix))
+        )
+      );
+      $scale: map.set($scale, $stop, $value);
     }
     
     @return $scale;
-}
+  }
+
 
 // Color Relationship Functions
 @function find-text-color($background) {
@@ -102,19 +60,6 @@
     @return $r * 0.2126 + $g * 0.7152 + $b * 0.0722;
 }
 
-// Contrast Calculations
-@function get-contrast-ratio($foreground, $background) {
-    $l1: luminance($foreground) + 0.05;
-    $l2: luminance($background) + 0.05;
-    @return if($l1 > $l2, $l1 / $l2, $l2 / $l1);
-}
-
-// Color Validation
-@function has-sufficient-contrast($text, $background) {
-    $contrast: get-contrast-ratio($text, $background);
-    @return $contrast >= 4.5;
-}
-
 // Context-Aware Colors
 @mixin adaptive-contrast($background) {
     background: $background;
@@ -136,6 +81,15 @@
     filter: $value;
 }
 
+$colors: (
+  'primary': create-color-scale($primary),
+  'secondary': create-color-scale($secondary),
+  'success': create-color-scale($success),
+  'danger': create-color-scale($danger),
+  'warning': create-color-scale($warning),
+  'info': create-color-scale($info)
+); 
+
 // Glass Effect Utilities
 .glass-effect {
     @include backdrop-filter(blur(10px));

package/src/styles/utilities/_media-queries.scss

@@ -94,7 +94,7 @@
 // Mixin: Dark Mode
 // Applies styles when the user prefers a dark color scheme.
 @mixin dark-mode {
-  @media (prefers-color-scheme: dark) {
+  [data-theme='dark'] & {
     @content;
   }
 }

package/src/styles/utilities/_shadows.scss

@@ -81,7 +81,7 @@ $shadow-sizes: (
 
 // Utility Classes
 .shadow-none {
-  box-shadow: none;
+  box-shadow: none !important;
 }
 
 @each $size, $values in $shadow-sizes {

package/src/styles/utilities/_spacing.scss

@@ -16,28 +16,27 @@
 
    // Convert value to string for unit checking
   $value-str: if(meta.type-of($value) == 'string', string.unquote($value), #{$value});
-  @debug string.unquote( $value-str); // .widget:hover
   
   @return $value-str;
 }
 
 // Padding mixins
-@mixin p($val) { padding: format-unit-value($val) !important; }
-@mixin px($val) { $val: format-unit-value($val); padding-left: $val !important; padding-right: $val !important; }
-@mixin py($val) { $val: format-unit-value($val); padding-top: $val !important; padding-bottom: $val !important; }
-@mixin pt($val) { $val: format-unit-value($val); padding-top: $val !important; }
-@mixin pr($val) { $val: format-unit-value($val); padding-right: $val !important; }
-@mixin pb($val) { $val: format-unit-value($val); padding-bottom: $val !important; }
-@mixin pl($val) { $val: format-unit-value($val); padding-left: $val !important; }
+@mixin p($val) { padding: format-unit-value($val); }
+@mixin px($val) { $val: format-unit-value($val); padding-left: $val; padding-right: $val; }
+@mixin py($val) { $val: format-unit-value($val); padding-top: $val; padding-bottom: $val; }
+@mixin pt($val) { $val: format-unit-value($val); padding-top: $val; }
+@mixin pr($val) { $val: format-unit-value($val); padding-right: $val; }
+@mixin pb($val) { $val: format-unit-value($val); padding-bottom: $val; }
+@mixin pl($val) { $val: format-unit-value($val); padding-left: $val; }
 
 // Margin mixins
-@mixin m($val) { $val: format-unit-value($val); margin: $val !important; }
-@mixin mx($val) { $val: format-unit-value($val); margin-left: $val !important; margin-right: $val !important; }
-@mixin my($val) { $val: format-unit-value($val); margin-top: $val !important; margin-bottom: $val !important; }
-@mixin mt($val) { $val: format-unit-value($val); margin-top: $val !important; }
-@mixin mr($val) { $val: format-unit-value($val); margin-right: $val !important; }
-@mixin mb($val) { $val: format-unit-value($val); margin-bottom: $val !important; }
-@mixin ml($val) { $val: format-unit-value($val); margin-left: $val !important; }
+@mixin m($val) { $val: format-unit-value($val); margin: $val; }
+@mixin mx($val) { $val: format-unit-value($val); margin-left: $val; margin-right: $val; }
+@mixin my($val) { $val: format-unit-value($val); margin-top: $val; margin-bottom: $val; }
+@mixin mt($val) { $val: format-unit-value($val); margin-top: $val; }
+@mixin mr($val) { $val: format-unit-value($val); margin-right: $val; }
+@mixin mb($val) { $val: format-unit-value($val); margin-bottom: $val; }
+@mixin ml($val) { $val: format-unit-value($val); margin-left: $val; }
 
 // Auto margin utilities
 @mixin ml-auto { margin-left: auto; }