@nuvoui/core 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",
@@ -36,7 +36,7 @@
     "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",

package/src/styles/abstracts/_config.scss

@@ -2,8 +2,31 @@
 @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-debugger: false !default;
@@ -81,6 +104,11 @@ $basic-colors: (
   "transparent": transparent,
 ) !default;
 
+$semantic-colors: ("primary", "secondary", "success", "danger", "warning", "info");
+$primitive-color-names: map.keys($color-primitives);
+$color-names: list.join($semantic-colors, $primitive-color-names);
+$color-names: list.join($color-names, map.keys($basic-colors));
+
 @function validate-theme-tokens($theme-map, $required-tokens) {
   $missing-tokens: ();
 
@@ -205,7 +233,7 @@ $border-radii: (
   "lg": 0.75rem,
   "xl": 1rem,
   "2xl": 1.25rem,
-  "circle": 50%,
+  "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;
 }
@@ -107,7 +107,7 @@ body#{$parent-selector} {
 #{$parent-selector} input[type="search"],
 #{$parent-selector} textarea {
   padding: 0.5rem;
-  border: 1px solid var(--border);
+  border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
   border-radius: 0.25rem;
   width: 100%; // Full width
   font-family: var(--font-family-base);
@@ -128,7 +128,7 @@ body#{$parent-selector} {
 // Selects
 #{$parent-selector} select {
   padding: 0.5rem;
-  border: 1px solid var(--border);
+  border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
   border-radius: 0.25rem;
   width: 100%; // Full width
   font-family: var(--font-family-base);
@@ -144,14 +144,14 @@ body#{$parent-selector} {
 #{$parent-selector} blockquote {
   margin: 1rem 0;
   padding: 0.5rem 1rem;
-  border-left: 4px solid var(--border);
+  border-left: var(--border-size, 4px) var(--border-style, solid) var(--border-color, var(--secondary));
   font-style: italic;
 }
 
 // Horizontal Rule
 #{$parent-selector} hr {
   border: none;
-  border-top: 1px solid var(--border);
+  border-top: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
   margin: 1rem 0;
 }
 

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);
+  }
 }