@nuvoui/core 1.2.4 → 1.2.6

package/src/styles/themes/_theme.scss

@@ -2,10 +2,11 @@
 @use "sass:color";
 @use "sass:map";
 @use "../utilities/colors" as COL;
-@use "../abstracts" as *;
+@use "../abstracts/config" as VAR;
 
-@if $generate-utility-classes {
-  :root {
+@if VAR.$generate-utility-classes {
+  :root,
+  #{VAR.$parent-selector} [data-theme="light"] {
     // Theme color CSS variables
     @each $color-name, $scale in COL.$colors {
       --#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
@@ -22,54 +23,53 @@
       }
     }
 
+    @each $token in VAR.$theme-tokens {
+      --#{$token}: #{map.get(VAR.$light-theme, $token)};
+    }
+
+    --button-text-color: #{map.get(VAR.$dark-theme, "text-default")};
+    --inverted-text-color: #{map.get(VAR.$dark-theme, "text-default")};
+
     // Light theme variables
-    --background: #{map.get($light-theme, "background")};
-    --foreground: #{map.get($light-theme, "foreground")};
-    --surface: #{map.get($light-theme, "surface")};
-    --border: var(--gray-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: var(--primary-600);
-    --inverted-text-color: var(--gray-100);
 
-    // Scrollbar styling
-    &::-webkit-scrollbar {
-      width: 12px;
-    }
+    // #{VAR.$parent-selector} {
+    //   // Scrollbar styling
+    //   &::-webkit-scrollbar {
+    //     width: 12px;
+    //   }
 
-    &::-webkit-scrollbar-track {
-      background: var(--background);
-    }
+    //   &::-webkit-scrollbar-track {
+    //     background: var(--background);
+    //   }
 
-    &::-webkit-scrollbar-thumb {
-      background-color: #888;
-      border-radius: 6px;
-      border: 3px solid var(--background);
-    }
+    //   &::-webkit-scrollbar-thumb {
+    //     background-color: #888;
+    //     border-radius: 6px;
+    //     border: 3px solid var(--background);
+    //   }
 
-    scrollbar-width: thin;
-    scrollbar-color: #888 var(--background);
+    //   scrollbar-width: thin;
+    //   scrollbar-color: #888 var(--background);
+    // }
   }
-  
-  @if $enable-dark-mode {
+
+  @if VAR.$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);
+      @each $token in VAR.$theme-tokens {
+        --#{$token}: #{map.get(VAR.$dark-theme, $token)};
+      }
+
+      --button-text-color: #{map.get(VAR.$light-theme, "text-default")};
+      --inverted-text-color: #{map.get(VAR.$light-theme, "text-default")};
       --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);
@@ -94,158 +94,147 @@
     @each $shade, $value in $scale {
       // Automatic text contrast for backgrounds
       // todo: documentaton may add karo issay
-      .text-on-#{$color-name}-#{$shade} {
+      #{VAR.$parent-selector} .text-on-#{$color-name}-#{$shade} {
         color: COL.find-text-color($value);
       }
 
-      .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} {
+      #{VAR.$parent-selector} .text-#{$color-name}-#{$shade},
+      #{VAR.$parent-selector} .hover\:text-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      #{VAR.$parent-selector} .group:hover .group-hover\:text-#{$color-name}-#{$shade} {
         color: var(--#{$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} {
+      #{VAR.$parent-selector} .bg-#{$color-name}-#{$shade},
+      #{VAR.$parent-selector} .hover\:bg-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      #{VAR.$parent-selector} .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} {
+      #{VAR.$parent-selector} .border-#{$color-name}-#{$shade},
+      #{VAR.$parent-selector} .hover\:border-#{$color-name}-#{$shade}:hover,
+      #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$color-name}-#{$shade} {
         border-color: var(--#{$color-name}-#{$shade});
       }
     }
 
     // Base color classes
-    .text-#{$color-name},
-    .hover\:text--#{$color-name}:hover, // todo: improve these loops to save time
-    .group:hover .group-hover\:text--#{$color-name} {
+    #{VAR.$parent-selector} .text-#{$color-name},
+    #{VAR.$parent-selector} .hover\:text-#{$color-name}:hover, // todo: improve these loops to save time
+    #{VAR.$parent-selector} .group:hover .group-hover\: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} {
+    #{VAR.$parent-selector} .bg-#{$color-name},
+    #{VAR.$parent-selector} .hover\:bg-#{$color-name}:hover, // todo: improve these loops to save time
+    #{VAR.$parent-selector} .group:hover .group-hover\:bg-#{$color-name} {
       background-color: var(--#{$color-name});
     }
 
-    .border-#{$color-name},
-    .hover\:border-#{$color-name}:hover,
-    .group:hover .group-hover\:border-#{$color-name} {
+    #{VAR.$parent-selector} .border-#{$color-name},
+    #{VAR.$parent-selector} .hover\:border-#{$color-name}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$color-name} {
       border-color: var(--#{$color-name});
     }
   }
 
   // Primitive color utilities
-  // green, purple, pink etc. 
+  // green, purple, pink etc.
   @each $color-name, $scale in COL.$colors-primitives {
     @each $shade, $value in $scale {
-      .text-on-#{$color-name}-#{$shade} {
+      #{VAR.$parent-selector} .text-on-#{$color-name}-#{$shade} {
         color: COL.find-text-color($value);
       }
 
-      .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} {
+      #{VAR.$parent-selector} .text-#{$color-name}-#{$shade},
+      #{VAR.$parent-selector} .hover\:text-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      #{VAR.$parent-selector} .group:hover .group-hover\:text-#{$color-name}-#{$shade} {
         color: var(--#{$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} {
+      #{VAR.$parent-selector} .bg-#{$color-name}-#{$shade},
+      #{VAR.$parent-selector} .hover\:bg-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      #{VAR.$parent-selector} .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} {
+      #{VAR.$parent-selector} .border-#{$color-name}-#{$shade},
+      #{VAR.$parent-selector} .hover\:border-#{$color-name}-#{$shade}:hover,
+      #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$color-name}-#{$shade} {
         border-color: var(--#{$color-name}-#{$shade});
       }
     }
 
     // Base color classes
-    .text-#{$color-name},
-    .hover\:text--#{$color-name}:hover, // todo: improve these loops to save time
-    .group:hover .group-hover\:text--#{$color-name} {
+    #{VAR.$parent-selector} .text-#{$color-name},
+    #{VAR.$parent-selector} .hover\:text-#{$color-name}:hover, // todo: improve these loops to save time
+    #{VAR.$parent-selector} .group:hover .group-hover\: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} {
+    #{VAR.$parent-selector} .bg-#{$color-name},
+    #{VAR.$parent-selector} .hover\:bg-#{$color-name}:hover, // todo: improve these loops to save time
+    #{VAR.$parent-selector} .group:hover .group-hover\:bg-#{$color-name} {
       background-color: var(--#{$color-name});
     }
 
-    .border-#{$color-name},
-    .hover\:border-#{$color-name}:hover,
-    .group:hover .group-hover\:border-#{$color-name} {
+    #{VAR.$parent-selector} .border-#{$color-name},
+    #{VAR.$parent-selector} .hover\:border-#{$color-name}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$color-name} {
       border-color: var(--#{$color-name});
     }
   }
 
   // Semantic color utilities
-  .bg-page {
+  #{VAR.$parent-selector} .bg-page {
     background-color: var(--background);
   }
 
-  .bg-card {
+  #{VAR.$parent-selector} .bg-surface {
     background-color: var(--surface);
   }
 
-  .bg-active {
+  #{VAR.$parent-selector} .bg-active {
     background-color: var(--button-bg-color);
   }
 
-  .bg-hover {
+  #{VAR.$parent-selector} .bg-hover {
     background-color: var(--button-bg-color-hover);
   }
 
-  .bg-white {
+  #{VAR.$parent-selector} .bg-white,
+  .hover\:bg-white:hover {
     background-color: white;
   }
 
-  .bg-black {
+  #{VAR.$parent-selector} .bg-black,
+  .hover\:bg-black:hover {
     background-color: black;
   }
 
-  .text-default {
-    color: var(--text-primary);
+  #{VAR.$parent-selector} .text-default {
+    color: var(--text-default);
   }
 
-  .text-muted {
-    color: var(--text-secondary);
+  #{VAR.$parent-selector} .text-muted {
+    color: var(--text-muted);
   }
 
-  .text-subtle {
-    color: var(--text-secondary);
-    opacity: 0.7;
-  }
-
-  .text-inverted {
+  #{VAR.$parent-selector} .text-inverted {
     color: var(--inverted-text-color);
   }
 
-  .text-white {
+  #{VAR.$parent-selector} .text-white,
+  #{VAR.$parent-selector} .hover\:text-white:hover {
     color: white;
   }
 
-  .text-black {
+  #{VAR.$parent-selector} .text-black,
+  #{VAR.$parent-selector} .hover\:text-black:hover {
     color: black;
   }
-}
 
-// Glass effects
-.glass-effect {
-  background-color: rgb(255 255 255 / 10%);
-  border: 1px solid rgb(255 255 255 / 20%);
-
-  @include COL.backdrop-filter(blur(8px));
-}
-
-.frosted-glass {
-  background-color: rgb(255 255 255 / 70%);
-  border: 1px solid rgb(255 255 255 / 80%);
-
-  @include COL.backdrop-filter(blur(15px));
+  #{VAR.$parent-selector} .text-subtle {
+    color: var(--text-muted);
+    opacity: 0.7;
+  }
 }

package/src/styles/utilities/_alignment.scss

@@ -1,22 +1,49 @@
-@use '../abstracts'  as VAR;
+@use "../abstracts/config" as VAR;
 
-@mixin align-baseline { & { vertical-align: baseline; } }
-@mixin align-top { & { vertical-align: top; } }
-@mixin align-middle { & { vertical-align: middle; } }
-@mixin align-bottom { & { vertical-align: bottom; } }
+@mixin align-baseline {
+  vertical-align: baseline;
+}
+@mixin align-top {
+  vertical-align: top;
+}
+@mixin align-middle {
+  vertical-align: middle;
+}
+@mixin align-bottom {
+  vertical-align: bottom;
+}
 
 @if VAR.$generate-utility-classes {
-  .align-baseline { @include align-baseline; }
-  .align-top { @include align-top; }
-  .align-middle { @include align-middle; }
-  .align-bottom { @include align-bottom; }
+  #{VAR.$parent-selector} .align-baseline {
+    @include align-baseline;
+  }
+
+  #{VAR.$parent-selector} .align-top {
+    @include align-top;
+  }
+
+  #{VAR.$parent-selector} .align-middle {
+    @include align-middle;
+  }
+
+  #{VAR.$parent-selector} .align-bottom {
+    @include align-bottom;
+  }
 
   @each $breakpoint, $width in VAR.$breakpoints {
     @media (min-width: #{$width}) {
-      .align-baseline\@#{$breakpoint} { @include align-baseline; }
-      .align-top\@#{$breakpoint} { @include align-top; }
-      .align-middle\@#{$breakpoint} { @include align-middle; }
-      .align-bottom\@#{$breakpoint} { @include align-bottom; }
+      #{VAR.$parent-selector} .align-baseline\@#{$breakpoint} {
+        @include align-baseline;
+      }
+      #{VAR.$parent-selector} .align-top\@#{$breakpoint} {
+        @include align-top;
+      }
+      #{VAR.$parent-selector} .align-middle\@#{$breakpoint} {
+        @include align-middle;
+      }
+      #{VAR.$parent-selector} .align-bottom\@#{$breakpoint} {
+        @include align-bottom;
+      }
     }
   }
 }