@nuvoui/core 1.2.3 → 1.2.4

package/src/styles/themes/_theme.scss

@@ -54,32 +54,34 @@
     scrollbar-width: thin;
     scrollbar-color: #888 var(--background);
   }
+  
+  @if $enable-dark-mode {
+    // Dark theme settings
+    [data-theme="dark"] {
+      --background: #{map.get($dark-theme, "background")};
+      --foreground: #{map.get($dark-theme, "foreground")};
+      --surface: #{map.get($dark-theme, "surface")};
+      --border: var(--gray-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);
+      --inverted-text-color: var(--gray-900);
+
+      &::-webkit-scrollbar-track {
+        background: var(--background);
+      }
 
-  // Dark theme settings
-  [data-theme="dark"] {
-    --background: #{map.get($dark-theme, "background")};
-    --foreground: #{map.get($dark-theme, "foreground")};
-    --surface: #{map.get($dark-theme, "surface")};
-    --border: var(--gray-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);
-    --inverted-text-color: var(--gray-900);
-
-    &::-webkit-scrollbar-track {
-      background: var(--background);
-    }
+      &::-webkit-scrollbar-thumb {
+        background-color: #555;
+        border: 3px solid var(--background);
+      }
 
-    &::-webkit-scrollbar-thumb {
-      background-color: #555;
-      border: 3px solid var(--background);
+      scrollbar-color: #555 var(--background);
     }
-
-    scrollbar-color: #555 var(--background);
   }
 
   // -----------------------------------------------
@@ -90,34 +92,47 @@
   // primar, secondry, warning etc.
   @each $color-name, $scale in COL.$colors {
     @each $shade, $value in $scale {
-      .bg-#{$color-name}-#{$shade} {
-        background-color: var(--#{$color-name}-#{$shade});
-      }
-
       // Automatic text contrast for backgrounds
       // todo: documentaton may add karo issay
       .text-on-#{$color-name}-#{$shade} {
         color: COL.find-text-color($value);
       }
 
-      .text-#{$color-name}-#{$shade} {
+      .text-#{$color-name}-#{$shade},
+      .hover\:text--#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      .group:hover .group-hover\:text--#{$color-name}-#{$shade} {
         color: var(--#{$color-name}-#{$shade});
       }
-      .border-#{$color-name}-#{$shade} {
+
+      .bg-#{$color-name}-#{$shade},
+      .hover\:bg-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      .group:hover .group-hover\:bg-#{$color-name}-#{$shade} {
+        background-color: var(--#{$color-name}-#{$shade});
+      }
+
+      .border-#{$color-name}-#{$shade},
+      .hover\:border-#{$color-name}-#{$shade}:hover,
+      .group:hover .group-hover\:border-#{$color-name}-#{$shade} {
         border-color: var(--#{$color-name}-#{$shade});
       }
     }
 
     // Base color classes
-    .bg-#{$color-name} {
-      background-color: var(--#{$color-name});
+    .text-#{$color-name},
+    .hover\:text--#{$color-name}:hover, // todo: improve these loops to save time
+    .group:hover .group-hover\:text--#{$color-name} {
+      color: var(--#{$color-name});
     }
 
-    .text-#{$color-name} {
-      color: var(--#{$color-name});
+    .bg-#{$color-name},
+    .hover\:bg-#{$color-name}:hover, // todo: improve these loops to save time
+    .group:hover .group-hover\:bg-#{$color-name} {
+      background-color: var(--#{$color-name});
     }
-    
-    .border-#{$color-name} {
+
+    .border-#{$color-name},
+    .hover\:border-#{$color-name}:hover,
+    .group:hover .group-hover\:border-#{$color-name} {
       border-color: var(--#{$color-name});
     }
   }
@@ -126,32 +141,45 @@
   // green, purple, pink etc. 
   @each $color-name, $scale in COL.$colors-primitives {
     @each $shade, $value in $scale {
-      .bg-#{$color-name}-#{$shade} {
-        background-color: var(--#{$color-name}-#{$shade});
-      }
-
       .text-on-#{$color-name}-#{$shade} {
         color: COL.find-text-color($value);
       }
 
-      .text-#{$color-name}-#{$shade} {
+      .text-#{$color-name}-#{$shade},
+      .hover\:text--#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      .group:hover .group-hover\:text--#{$color-name}-#{$shade} {
         color: var(--#{$color-name}-#{$shade});
       }
-      .border-#{$color-name}-#{$shade} {
+
+      .bg-#{$color-name}-#{$shade},
+      .hover\:bg-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      .group:hover .group-hover\:bg-#{$color-name}-#{$shade} {
+        background-color: var(--#{$color-name}-#{$shade});
+      }
+
+      .border-#{$color-name}-#{$shade},
+      .hover\:border-#{$color-name}-#{$shade}:hover,
+      .group:hover .group-hover\:border-#{$color-name}-#{$shade} {
         border-color: var(--#{$color-name}-#{$shade});
       }
     }
 
     // Base color classes
-    .bg-#{$color-name} {
-      background-color: var(--#{$color-name});
+    .text-#{$color-name},
+    .hover\:text--#{$color-name}:hover, // todo: improve these loops to save time
+    .group:hover .group-hover\:text--#{$color-name} {
+      color: var(--#{$color-name});
     }
 
-    .text-#{$color-name} {
-      color: var(--#{$color-name});
+    .bg-#{$color-name},
+    .hover\:bg-#{$color-name}:hover, // todo: improve these loops to save time
+    .group:hover .group-hover\:bg-#{$color-name} {
+      background-color: var(--#{$color-name});
     }
-    
-    .border-#{$color-name} {
+
+    .border-#{$color-name},
+    .hover\:border-#{$color-name}:hover,
+    .group:hover .group-hover\:border-#{$color-name} {
       border-color: var(--#{$color-name});
     }
   }
@@ -173,6 +201,14 @@
     background-color: var(--button-bg-color-hover);
   }
 
+  .bg-white {
+    background-color: white;
+  }
+
+  .bg-black {
+    background-color: black;
+  }
+
   .text-default {
     color: var(--text-primary);
   }
@@ -190,14 +226,6 @@
     color: var(--inverted-text-color);
   }
 
-  .bg-white {
-    background-color: white;
-  }
-
-  .bg-black {
-    background-color: black;
-  }
-
   .text-white {
     color: white;
   }
@@ -205,31 +233,6 @@
   .text-black {
     color: black;
   }
-
-  // Hover utilities
-  @each $color-name, $scale in COL.$colors {
-    @each $shade, $value in $scale {
-      .hover\:bg-#{$color-name}-#{$shade}:hover {
-        background-color: var(--#{$color-name}-#{$shade});
-      }
-
-      .hover\:text-#{$color-name}-#{$shade}:hover {
-        color: var(--#{$color-name}-#{$shade});
-      }
-    }
-  }
-
-  @each $color-name, $scale in COL.$colors-primitives {
-    @each $shade, $value in $scale {
-      .hover\:bg-#{$color-name}-#{$shade}:hover {
-        background-color: var(--#{$color-name}-#{$shade});
-      }
-
-      .hover\:text-#{$color-name}-#{$shade}:hover {
-        color: var(--#{$color-name}-#{$shade});
-      }
-    }
-  }
 }
 
 // Glass effects
@@ -238,7 +241,6 @@
   border: 1px solid rgb(255 255 255 / 20%);
 
   @include COL.backdrop-filter(blur(8px));
-
 }
 
 .frosted-glass {

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

@@ -73,6 +73,7 @@
   }
 }
 
+// todo: doc
 // Touch devices
 @mixin touch {
   @media (hover: none) and (pointer: coarse) {
@@ -80,6 +81,7 @@
   }
 }
 
+// todo: doc
 // Print media
 @mixin print {
   @media print {
@@ -87,6 +89,7 @@
   }
 }
 
+// todo: doc
 // Example: @include supports(display: grid) { }
 @mixin supports($property) {
   @supports (#{$property}) {
@@ -94,6 +97,7 @@
   }
 }
 
+// todo: doc
 // System preference only
 @mixin prefers-dark {
   @media (prefers-color-scheme: dark) {
@@ -101,21 +105,25 @@
   }
 }
 
+// todo: doc
 // User preference takes precedence
 @mixin dark-mode {
-  // Apply when user explicitly chooses dark
-  [data-theme="dark"] & {
-    @content;
-  }
-
-  // Apply when system is dark AND user hasn't made a choice
-  @media (prefers-color-scheme: dark) {
-    [data-theme="system"] & {
+  @if $enable-dark-mode { // todo: documentation as this will fully remove the dark mode by force
+    // Apply when user explicitly chooses dark
+    [data-theme="dark"] & {
       @content;
     }
+  
+    // Apply when system is dark AND user hasn't made a choice
+    @media (prefers-color-scheme: dark) {
+      [data-theme="system"] & {
+        @content;
+      }
+    }
   }
 }
 
+// todo: doc
 // Device orientation
 @mixin landscape {
   @media screen and (orientation: landscape) {
@@ -123,17 +131,20 @@
   }
 }
 
+// todo: doc
 @mixin portrait {
   @media screen and (orientation: portrait) {
     @content;
   }
 }
 
+// todo: doc
 // Modern aspect ratio
 @mixin aspect-ratio($ratio) {
   aspect-ratio: #{$ratio};
 }
 
+// todo: doc
 // Dynamic viewport units (modern browsers)
 @mixin dvh {
   @supports (height: 100dvh) {
@@ -145,24 +156,20 @@
   }
 }
 
+// todo: doc
 // Safe area insets (notches, home indicators)
 @mixin safe-area-inset($property, $position) {
   #{$property}: env(safe-area-inset-#{$position});
 }
 
+// todo: doc
 @mixin reduced-motion {
   @media (prefers-reduced-motion: reduce) {
     @content;
   }
 }
 
-// Data-saving mode
-@mixin save-data {
-  @media (prefers-reduced-data: reduce) {
-    @content;
-  }
-}
-
+// todo: doc
 // Mouse precision detection
 @mixin fine-pointer {
   @media (pointer: fine) {
@@ -170,6 +177,7 @@
   }
 }
 
+// todo: doc
 // Display mode for PWAs
 @mixin display-mode($mode: "standalone") {
   @media (display-mode: #{$mode}) {
@@ -177,6 +185,7 @@
   }
 }
 
+// todo: doc
 // High contrast mode
 @mixin high-contrast {
   @media (forced-colors: active) {

package/src/styles/utilities/_sizing.scss

@@ -20,14 +20,20 @@
 @mixin max-width-percent($i) { max-width: str.unquote($i + '%'); }
 @mixin max-height-percent($i) { max-height: str.unquote($i + '%'); }
 
-@mixin w-auto { width: auto; }
-@mixin w-full { width: 100%; }
-@mixin h-auto { height: auto; }
-@mixin h-full { height: 100%; }
-@mixin min-w-full { min-width: 100%; }
-@mixin max-w-full { max-width: 100%; }
-@mixin min-h-full { min-height: 100%; }
-@mixin max-h-full { max-height: 100%; }
+@mixin w-auto { @include width(auto);}
+@mixin w-full { @include width(100%);}
+@mixin h-auto { @include height(auto);}
+@mixin h-full { @include height(100%);}
+@mixin w-max { @include width(max-content);}
+@mixin h-max { @include height(max-content);}
+@mixin w-min { @include width(min-content);}
+@mixin h-min { @include height(min-content);}
+@mixin w-fit { @include width(fit-content);}
+@mixin h-fit { @include height(fit-content);}
+@mixin min-w-full { @include min-width(100%);}
+@mixin max-w-full { @include max-width(100%);}
+@mixin min-h-full { @include min-height(100%);}
+@mixin max-h-full { @include max-height(100%);}
 
 @mixin w-screen { width: 100vw; }
 @mixin h-screen { height: 100dvh; }
@@ -38,9 +44,13 @@
 
   .w-auto { @include w-auto; }
   .w-full { @include w-full; }
-
   .h-auto { @include h-auto; }
   .h-full { @include h-full; }
+  .w-min { @include w-min;}
+  .h-min { @include h-min;}
+  .w-fit { @include w-fit;}
+  .h-fit { @include h-fit;}
+  
   .min-w-full { @include min-w-full; }
   .max-w-full { @include max-w-full; }
   .min-h-full { @include min-h-full; }
@@ -73,6 +83,16 @@
     .min-w-#{$breakpoint} { @include min-width($width); }
     .max-w-#{$breakpoint} { @include max-width($width); }
 
+
+    .w-auto\@#{$breakpoint} { @include w-auto; }
+    .w-full\@#{$breakpoint} { @include w-full; }
+    .h-auto\@#{$breakpoint} { @include h-auto; }
+    .h-full\@#{$breakpoint} { @include h-full; }
+    .w-min\@#{$breakpoint}{ @include w-min;}
+    .h-min\@#{$breakpoint}{ @include h-min;}
+    .w-fit\@#{$breakpoint}{ @include w-fit;}
+    .h-fit\@#{$breakpoint}{ @include h-fit;}
+    
     @include MQ.media-up ($breakpoint) {
       // Generate utilities from spacing map
       @each $i in VAR.$percentages {

package/src/styles/utilities/_spacing.scss

@@ -127,8 +127,7 @@
 @mixin px($val) { 
   $val: format-unit-value($val); 
   
-  padding-left: $val; 
-  padding-right: $val; 
+  padding-inline: $val;
 }
 
 /**
@@ -138,9 +137,8 @@
 */
 @mixin py($val) { 
   $val: format-unit-value($val); 
-
-  padding-top: $val; 
-  padding-bottom: $val; 
+  
+  padding-block: $val;
 }
   
 /**
@@ -210,8 +208,7 @@
 @mixin mx($val) { 
   $val: format-unit-value($val); 
 
-  margin-left: $val; 
-  margin-right: $val; 
+  margin-inline: $val;
 }
 
 /**
@@ -220,10 +217,9 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin my($val) { 
-  $val: format-unit-value($val); 
+  $val: format-unit-value($val);
 
-  margin-top: $val; 
-  margin-bottom: $val; 
+  margin-block: $val;
 }
 
 /**