@nuvoui/core 1.2.7 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.2.7",
+  "version": "1.3.1",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",
@@ -36,12 +36,12 @@
     "lint": "stylelint \"src/**/*.scss\"",
     "format": "prettier --write \"src/**/*.{scss,js,json}\"",
     "clean": "node -e \"const fs=require('fs');if(fs.existsSync('dist')) fs.rmSync('dist',{recursive:true})\"",
-    "build:scss": "sass src/styles/index.scss:dist/nuvoui.css --style expanded",
+    "build:scss": "sass src/styles/build.scss:dist/nuvoui.css --style expanded",
     "build:minify": "postcss dist/nuvoui.css -o dist/nuvoui.min.css --use cssnano --map",
     "prebuild": "npm run clean",
     "build": "npm run build:scss && npm run build:minify",
     "dev": "sass src/styles/index.scss:dist/nuvoui.css --watch",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run lint && npm run format && npm run build"
   },
   "repository": {
     "type": "git",

package/src/styles/abstracts/_config.scss

@@ -2,13 +2,34 @@
 @use "sass:math";
 @use "sass:list";
 
+$feature-flags: (
+  "alignments": true,
+  "animations": true,
+  "backdrops": true,
+  "borders": true,
+  "container-queries": true,
+  "cursors": true,
+  "displays": true,
+  "flex": true,
+  "grid": true,
+  "opacity": true,
+  "position": true,
+  "shadows": true,
+  "sizing": true,
+  "spacing": true,
+  "tooltips": true,
+  "theme": true,
+  "transforms": true,
+  "transitions": true,
+  "typography": true,
+  "z-index": true,
+) !default;
+
 // Framework Configuration Options
-$generate-utility-classes: true !default;
+$generate-utility-classes: false !default;
 $enable-dark-mode: true !default;
-$enable-rtl: true !default;
+
 $enable-debugger: false !default;
-$enable-reduced-motion: true !default; // todo: pending
-$enable-container-queries: false !default; // todo: pending
 
 // if just a number passed, it will be assumed as px
 $default-unit: px !default;
@@ -100,9 +121,16 @@ $basic-colors: (
 }
 
 // Validate both themes
-@debug validate-theme-tokens($light-theme, $theme-tokens);
+@mixin validate-tokens {
+  @if not validate-theme-tokens($light-theme, $theme-tokens) {
+    @error "Light theme is missing required tokens.";
+  }
+  @if not validate-theme-tokens($dark-theme, $theme-tokens) {
+    @error "Dark theme is missing required tokens.";
+  }
+}
 
-@debug validate-theme-tokens($dark-theme, $theme-tokens);
+@include validate-tokens;
 
 $shadow-colors: (
   "default": rgb(0 0 0 / 10%),
@@ -187,7 +215,7 @@ $spacings: (
   64: 16rem, // 256px
 ) !default;
 
-$percentages: (0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100) !default;
+$percentages: (0, 5, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100) !default;
 
 // Common border width values that are most useful
 $border-widths: (0, 1, 2, 4, 8) !default;
@@ -200,7 +228,7 @@ $border-radii: (
   "lg": 0.75rem,
   "xl": 1rem,
   "2xl": 1.25rem,
-  "full": 9999px,
+  "full": 50%,
   "none": 0,
 ) !default;
 

package/src/styles/abstracts/_functions.scss

@@ -41,11 +41,9 @@
   }
 }
 
-/**
- * Ensures a value has a unit, adding $default-unit if none exists
- * @param {Number|String} $val - The value to check
- * @return {String} - The value with units
- */
+// Ensures a value has a unit, adding $default-unit if none exists
+// @param {Number|String} $val - The value to check
+// @return {String} - The value with units
 @function fix-units($val, $unit: $default-unit, $debug: null) {
   @if meta.type-of($val) != number and meta.type-of($val) != string {
     @error "fix-units() requires a number or string value";
@@ -112,3 +110,16 @@
 
   @return list.append($result, str-trim($string));
 }
+
+// Helper function to check if a feature is enabled
+@function feature-enabled($feature) {
+  @if not $generate-utility-classes {
+    @return false;
+  }
+
+  @if not map.has-key($feature-flags, $feature) {
+    @return true; // Default to enabled if not specified
+  }
+
+  @return map.get($feature-flags, $feature);
+}

package/src/styles/base/_base.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 
-/* Import variables */
+// Import variables
 @use "../abstracts/config" as *;
 @use "../utilities/media-queries" as media;
 
@@ -28,7 +28,7 @@ body#{$parent-selector} {
 #{$parent-selector} h5,
 #{$parent-selector} h6 {
   margin-bottom: 0.5em;
-  font-family: var(--font-family-heading);
+  font-family: var(--font-family-base);
   font-weight: 700;
   line-height: 1.2;
 }

package/src/styles/base/_reset.scss

@@ -28,8 +28,6 @@ dd {
 
 // Prevent font size inflation
 html {
-  -moz-text-size-adjust: none; /* stylelint-disable-line */
-  -webkit-text-size-adjust: none; /* stylelint-disable-line */
   text-size-adjust: none;
 }
 

package/src/styles/build.scss

@@ -0,0 +1,3 @@
+@use "./index.scss" as NuvoUI with (
+  $generate-utility-classes: true
+);

package/src/styles/layouts/_container.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
 // Base container styles
 @mixin container-base {
@@ -27,9 +28,15 @@
   @include container-padding(1rem);
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("container-queries") {
   // Container classes
   #{VAR.$parent-selector} .container {
     @include container;
   }
+  #{VAR.$parent-selector} .container.flex {
+    @include container(flex);
+  }
+  #{VAR.$parent-selector} .container.grid {
+    @include container(grid);
+  }
 }