@nuvoui/core 0.3.1 → 1.1.2

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@nuvoui/core",
-  "version": "0.3.1",
+  "version": "1.1.2",
   "description": "NuvoUI Core SCSS Library",
-  "main": "dist/index.css",
+  "main": "dist/nuvoui.css",
   "module": "src/styles/index.scss",
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
-    "dev": "vite",
-    "build": "vite build && npm run build:scss",
-    "build:scss": "sass src/styles/index.scss:dist/index.css --style compressed",
-    "prepare": "npm run build",
+    "build": "vite build",
+    "docs:dev": "vite --config vite.config.docs.mjs",
+    "docs:build": "vite build --config vite.config.docs.mjs",
+    "docs:preview": "vite preview --config vite.config.docs.mjs",
+    "prepare": "node build.js && npm run build",
     "lint": "stylelint \"src/**/*.scss\"",
     "format": "prettier --write \"src/**/*.{scss,js,json}\"",
     "clean": "rimraf dist"
@@ -44,12 +45,18 @@
   },
   "devDependencies": {
     "cssnano": "^7.0.6",
+    "glob": "^11.0.0",
     "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "postcss-nested": "^7.0.2",
+    "prettier": "^3.3.3",
     "sass": "^1.81.0",
-    "vite": "^5.4.11"
+    "stylelint": "^16.10.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "vite": "^5.4.11",
+    "vite-plugin-html-inject": "^1.1.2",
+    "vite-plugin-static-copy": "^2.1.0"
   },
   "peerDependencies": {
     "sass": "^1.x"

package/src/styles/base/_base.scss

@@ -1,8 +1,12 @@
 @use 'sass:map';
 
-// Import variables
+/* Import variables */
 @use '../utilities/variables' as *;
 
+:root {
+  --font-family-base: system-ui, -apple-system, "BlinkMacSystemFont", 'Segoe UI', "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
+}
+
 // Base typography styles
 html {
   font-size: 16px;
@@ -66,4 +70,24 @@ a {
   &:hover {
     color: var(--link-hover-color);
   }
-}
+}
+
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  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

@@ -26,7 +26,8 @@ dd {
 // Set core body defaults
 body {
   min-height: 100vh;
-  text-rendering: optimizeSpeed;
+  min-height: 100dvh;
+  text-rendering: optimizespeed;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -50,8 +51,9 @@ textarea,
 select {
   font: inherit;
   transition: all 0.2s ease-in-out;
+  
   &:focus {
-      box-shadow: inset 0 0 7px 0px #60b0cd; /* Change this to your preferred color and width */
+      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 */
   }
 }
@@ -74,6 +76,7 @@ ol {
   list-style: none;
   margin: 0;
   padding: 0;
+  
   // Modern properties
   padding-inline-start: 0;  // Replaces padding-left
   margin-block: 0;          // Replaces margin-top/bottom

package/src/styles/index.scss

@@ -1,6 +1,5 @@
-// Forward all modules for external use
+/* Forward all modules for external use */
 @forward 'utilities/variables';
-@forward './global';
 
 // Base styles
 @forward 'base/reset';
@@ -8,12 +7,14 @@
 
 // Utilities
 @forward 'utilities/animations';
+@forward 'utilities/borders';
 @forward 'utilities/colors';
 @forward 'utilities/display';
-@forward 'utilities/hamburger';
+@forward 'utilities/opacity';
 @forward 'utilities/position';
-@forward 'utilities/responsive';
+@forward 'utilities/media-queries';
 @forward 'utilities/shadows';
+@forward 'utilities/sizing';
 @forward 'utilities/spacing';
 @forward 'utilities/typography';
 @forward 'utilities/tooltips';
@@ -28,10 +29,4 @@
 @forward 'themes/dark';
 @forward 'themes/theme';
 
-// Components
-@forward 'components/button';
-@forward 'components/navbar';
-@forward 'components/form';
-
-// Local usage
-@use './global' as *;
+@forward './mixins-map';

package/src/styles/layouts/_container.scss

@@ -12,6 +12,7 @@
 
 @mixin container {
   @include container-base;
+  
   & {
     @each $breakpoint, $width in $container-max-widths {
       @media (min-width: map.get($breakpoints, $breakpoint)) {

package/src/styles/layouts/_flex.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @use '../utilities/variables' as *;
+@use '../utilities/functions' as *;
 
 // Flex Container Mixins
 @mixin flex {display: flex;}
@@ -38,14 +39,18 @@
 @mixin self-center {align-self: center;}
 @mixin self-stretch {align-self: stretch;}
 
+@mixin shrink {flex-shrink: 1;}
+@mixin shrink-0 {flex-shrink: 0;}
+@mixin shrink-2 {flex-shrink: 2;}
+
 // Flex Child Mixins
-@mixin w-full {flex: 0 0 100%;}
-@mixin w-auto {flex: 1 1 auto;}
+@mixin f-w-full {flex: 0 0 100%;}
+@mixin f-w-auto {flex: 1 1 auto;}
 @mixin grow { flex: 1 1 0%; }
 @mixin no-grow { flex: none; }
 
 @mixin w-col($size) {
-  flex: 0 0 math.percentage(math.div($size, $column-count));
+  flex: 0 0 math.percentage(math.div($size, $column-count)) !important;
 }
 
 // Base flex container
@@ -79,10 +84,18 @@
   &.items-stretch { align-items: stretch; }
   
   // Child flex items (using column count)
-  > .w-auto { @include w-auto }
-  > .w-full { @include w-full }
+  > .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 $column-count {
     > .w-#{$i} { @include w-col($i) }
     > .order-#{$i} { order: $i; }
@@ -121,13 +134,19 @@
       &.items-stretch\@#{$breakpoint} { align-items: stretch; }
 
       // Width (using column count)
-      & > .w-auto\@#{$breakpoint} { flex: 1 1 auto; }
-      & > .w-full\@#{$breakpoint} { flex: 0 0 100%; }
+      & > .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; }
       @for $i from 1 through $column-count {
         & > .w-#{$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

@@ -82,15 +82,13 @@
   // Responsive grid columns
   @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
-      .grid.#{$breakpoint}\:cols-#{$i} {
+      .grid.cols-#{$i}#{$breakpoint} {
         @include grid-cols($i);
       }
     }
   }
 }
 
-
-
 // Generate Column Span Classes with Responsive Variants
 @for $i from 1 through $column-count {
   .col-span-#{$i} {
@@ -99,7 +97,7 @@
 
   @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
-      .#{$breakpoint}\:col-span-#{$i} {
+      .col-span-#{$i}\@#{$breakpoint} {
         @include col-span($i);
       }
     }
@@ -108,7 +106,7 @@
 
 
 // Auto-fit/fill Classes
-@each $breakpoint, $width in $column-widths {
+@each $breakpoint, $width in $breakpoints {
   .grid.auto-fit-#{$breakpoint} { @include grid-auto-fit($width); }
   .grid.auto-fill-#{$breakpoint} { @include grid-auto-fill($width); }
 }
@@ -133,13 +131,13 @@ $alignments: (
 
   @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
-      .#{$breakpoint}\:justify-items-#{$name} {
+      .justify-items-#{$name}\@#{$breakpoint} {
         justify-items: $value;
       }
-      .#{$breakpoint}\:align-items-#{$name} {
+      .align-items-#{$name}\@#{$breakpoint} {
         align-items: $value;
       }
-      .#{$breakpoint}\:place-items-#{$name} {
+      .place-items-#{$name}\@#{$breakpoint} {
         place-items: $value;
       }
     }