@nuvoui/core 1.2.3 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",
@@ -75,16 +75,15 @@
     "last 2 versions",
     "not dead"
   ],
- 
   "devDependencies": {
     "cssnano": "^7.0.6",
-    "postcss": "^8.4.49",
-    "postcss-cli": "^11.0.0",
+    "postcss": "^8.5.3",
+    "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.0",
     "postcss-nested": "^7.0.2",
-    "prettier": "^3.3.3",
-    "sass": "^1.81.0",
-    "stylelint": "^16.10.0",
+    "prettier": "^3.5.3",
+    "sass": "^1.85.1",
+    "stylelint": "^16.16.0",
     "stylelint-config-standard-scss": "^13.1.0"
   },
   "peerDependencies": {

package/src/styles/abstracts/_config.scss

@@ -5,32 +5,20 @@
 $generate-utility-classes: true !default;
 $enable-dark-mode: true !default;
 $enable-rtl: true !default;
-$enable-reduced-motion: true !default;
-$enable-container-queries: false !default;
+$enable-debugger: false !default; // todo: spell mistake
+$enable-reduced-motion: true !default; // todo: pending
+$enable-container-queries: false !default; // todo: pending
 
-$base-size: 16;
-
-@function rem($px) {
-  @if $px == 0 {
-    @return 0;
-  }
-
-  // Strip units if $px has any
-  $value: if(math.unit($px) == "", $px, math.div($px, math.unit($px)));
-
-  @return math.div($value, $base-size) * 1rem;
-}
+// Text
+$base-size: 16 !default; 
+$font-family: system-ui, -apple-system, "BlinkMacSystemFont", 'Segoe UI', "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif !default;
 
 // Global variables that might be used across different modules
-$enable-debuger: false !default;
-$enable-dark-mode: true !default;
-$enable-rtl: true !default;
-$enable-reduced-motion: true !default;
-$column-count: 12 !default;
+$column-count: 12 !default; // todo: pending
 
-$default-container-name: nuvoui-container !default;
-$nuvoui-container-queries: false !default;
+$default-container-name: nuvoui-container !default; // todo: pending
 
+// Accessible color palette
 $primary: #007bff !default;
 $secondary: #6c757d !default;
 $success: #28a745 !default;
@@ -38,6 +26,7 @@ $danger: #dc3545 !default;
 $warning: #ffc107 !default;
 $info: #17a2b8 !default;
 
+// Color palette
 $color-primitives: (
   "gray": #6b7280,
   "red": #ef4444,
@@ -96,44 +85,55 @@ $grid-item-sizes: (
 
 // _variables.scss
 $font-sizes: (
-  // 12px
-  "xs": 0.75rem,
-  // 14px
-  "sm": 0.875rem,
-  // 16px
-  "md": 1rem,
-  // 20px
-  "lg": 1.25rem,
-  // 24px
-  "xl": 1.5rem,
-  // 28px
-  "2xl": 1.75rem,
-  // 32px
-  "3xl": 2rem,
-  // 40px
-  "4xl": 2.5rem 
+  "xs": 0.75rem,  // 12px
+  "sm": 0.875rem, // 14px
+  "md": 1rem,     // 16px
+  "lg": 1.25rem,  // 20px
+  "xl": 1.5rem,   // 24px
+  "2xl": 1.75rem, // 28px
+  "3xl": 2rem,    // 32px
+  "4xl": 2.5rem   // 40px
 ) !default;
 
 // Updated spacing map
 $spacings: (
   0: 0,
-  1: 0.25rem,    // 4px
-  2: 0.5rem,     // 8px
-  3: 0.75rem,    // 12px
-  4: 1rem,       // 16px
-  5: 1.25rem,    // 20px
-  6: 1.5rem,     // 24px
-  8: 2rem,       // 32px
-  10: 2.5rem,    // 40px
-  12: 3rem,      // 48px
-  16: 4rem,      // 64px
-  20: 5rem,      // 80px
-  24: 6rem,      // 96px
-  32: 8rem,      // 128px
-  40: 10rem, 
-  48: 12rem, 
-  56: 14rem, 
-  64: 16rem, 
+  1: 0.25rem,   // 4px
+  2: 0.5rem,    // 8px
+  3: 0.75rem,   // 12px
+  4: 1rem,      // 16px
+  5: 1.25rem,   // 20px
+  6: 1.5rem,    // 24px
+  8: 2rem,      // 32px
+  10: 2.5rem,   // 40px
+  12: 3rem,     // 48px
+  16: 4rem,     // 64px
+  20: 5rem,     // 80px
+  24: 6rem,     // 96px
+  32: 8rem,     // 128px
+  40: 10rem,    // 160px
+  48: 12rem,    // 192px 
+  56: 14rem,    // 224px   
+  64: 16rem,    // 256px
 )  !default;
 
 $percentages: (0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100) !default;
+
+
+// if just a number passed, it will be assumed as px
+$default-unit: px !default;
+
+// Common border width values that are most useful
+$border-widths: (0, 1, 2, 4, 8) !default;
+
+// Common border radius values that are most useful
+$border-radii: (
+  'xs': 0.25rem,
+  'sm': 0.375rem,
+  'md': 0.5rem,
+  'lg': 0.75rem,
+  'xl': 1rem,
+  '2xl': 1.25rem,
+  'full': 9999px,
+  'none': 0
+) !default;

package/src/styles/abstracts/_functions.scss

@@ -79,3 +79,76 @@
   // Return empty string if no unit found
   @return "";
 }
+
+/**
+ * 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) {
+  
+  @if meta.type-of($val) != number and meta.type-of($val) != string{
+    @error "fix-units() requires a number or string value";
+    @return null;
+  }
+
+  @if meta.type-of($val) == number {
+    @if string.length(math.unit($val)) == 0 {
+      @return string.unquote($val + $unit);
+    }
+    @return $val;
+  }
+
+  $val: strip-quotes($val);
+
+  @if $val == auto or $val == inherit or $val == initial or
+    $val == 'min-content' or $val == 'max-content' or $val == 'fit-content' {
+      @return string.unquote($val);
+  }
+
+  @if string.index($val, "px") or string.index($val, "em") or string.index($val, "rem") or
+      string.index($val, "%") or string.index($val, "vh") or string.index($val, "vw") or
+      string.index($val, "vmin") or string.index($val, "vmax") {
+    @return string.unquote($val);
+  }
+
+  @return string.unquote($val) + $unit;
+}
+
+
+@function strip-quotes($string) {
+  @if meta.type-of($string) == string {
+    @if string.slice($string, 1, 1) == '"' and string.slice($string, -1) == '"' {
+      @return string.slice($string, 2, -2);
+    } @else if string.slice($string, 1, 1) == "'" and string.slice($string, -1) == "'" {
+      @return string.slice($string, 2, -2);
+    }
+  }
+
+  @return $string;
+}
+
+@function str-trim($string) {
+  @while string.length($string) > 0 and string.slice($string, 1, 1) == " " {
+    $string: string.slice($string, 2);
+  }
+
+  @while string.length($string) > 0 and string.slice($string, -1) == " " {
+    $string: string.slice($string, 1, string.length($string) - 1);
+  }
+
+  @return $string;
+}
+
+@function split($string, $delimiter) {
+  $result: ();
+  $index: string.index($string, $delimiter);
+  @while $index != null {
+    $item: string.slice($string, 1, $index - 1);
+    $result: list.append($result, str-trim(string.unquote(strip-quotes($item))));
+    $string: string.slice($string, $index + string.length($delimiter));
+    $index: string.index($string, $delimiter);
+  }
+
+  @return list.append($result, str-trim($string)); 
+}

package/src/styles/abstracts/_index.scss

@@ -1,2 +1 @@
 @forward "config";
-@forward "functions";

package/src/styles/base/_base.scss

@@ -5,13 +5,12 @@
 @use '../utilities/media-queries' as media;
   
 :root {
-  --font-family-base: system-ui, -apple-system, "BlinkMacSystemFont", 'Segoe UI', "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
+  --font-family-base: #{$font-family};
 }
 
 // Base typography styles
 html {
-  font-size: 16px; 
-  font-family: var(--font-family-base);
+  font-size: $base-size; 
 }
 
 body {
@@ -19,7 +18,6 @@ body {
   font-weight: 400;
   line-height: 1.5;
   color: var(--text-primary);
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 // Headings
@@ -69,15 +67,9 @@ button {
   padding: 0.5rem 1rem;
   border: 0;
   border-radius: 0.25rem;
-  background-color: var(--button-bg-color, #007BFF); // Default button color
-  color: var(--button-text-color, #FFF);
   font-family: var(--font-family-base);
   cursor: pointer;
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-
-  &:hover {
-    background-color: var(--button-bg-color-hover, #0056B3); // Hover button color
-  }
   
   &:focus {
     outline: none;
@@ -88,6 +80,16 @@ button {
     color: #A0A0A0; // Disabled text color
     cursor: not-allowed;
   }
+
+   // Default styling when no bg-* class is present
+   &:not([class*="bg-"]) {
+    background-color: var(--button-bg-color, #007BFF); // Default button color
+    color: var(--button-text-color, #FFF);
+    
+    &:hover {
+      background-color: var(--button-bg-color-hover, #0056B3);
+    }
+  }
 }
 
 // Inputs
@@ -164,14 +166,23 @@ figcaption {
 
 // Links
 a {
-  color: var(--link-color);
   transition: color 0.2s ease-in-out;
 
-  &:hover {
-    color: var(--link-hover-color);
+  &:not([class*="text-"]){ // document: if no hover or normal text provided it will use the default link color
+    color: var(--link-color);
+
+    &:hover {
+      color: var(--link-hover-color);
+    }
   }
 }
 
+// Labels
+label[for] {
+  cursor: pointer;
+}
+
+// todo: add to doc
 .sr-only {
   position: absolute !important;
   width: 1px !important;
@@ -184,19 +195,16 @@ a {
   border: 0 !important;
 }
 
-
-
 code {
   font-family: 'Courier New', Courier, monospace; 
   background-color: #f8f8f8; 
   color: #d63384; 
   padding: 2px 6px;
   border-radius: 3px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
   white-space: nowrap;
 
   @include media.dark-mode {
     background-color: #333; 
     color: #f8f8f2; 
   }
-}
+}

package/src/styles/base/_index.scss

@@ -1,2 +1,2 @@
-@forward "base";
 @forward "reset";
+@forward "base";

package/src/styles/base/_reset.scss

@@ -1,14 +1,15 @@
-// Modern CSS Reset
-
 // Box sizing rules
 *,
-*::before,
-*::after {
+::before,
+::after,
+::backdrop,
+::file-selector-button {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
+
 // Remove default margin and padding
 body,
 h1,
@@ -26,6 +27,18 @@ dd {
   padding: 0;
 }
 
+// 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;
+}
+
+// Set core root defaults
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
 // Set core body defaults
 body {
   min-height: 100vh;
@@ -34,7 +47,12 @@ body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: var(--font-family-base);
+}
+
+// Set shorter line heights on headings and interactive elements
+h1, h2, h3, h4,
+button, input, label {
+  line-height: 1.1;
 }
 
 // Make images easier to work with
@@ -42,9 +60,21 @@ img,
 picture,
 video,
 canvas,
-svg {
+svg,
+audio,
+iframe,
+embed,
+object {
   display: block;
+  vertical-align: middle;
+}
+
+img,
+picture,
+video,
+svg {
   max-width: 100%;
+  height: auto;
 }
 
 // Inherit fonts for inputs and buttons
@@ -53,24 +83,16 @@ button,
 textarea,
 select {
   font: inherit;
-  transition: all 0.2s ease-in-out;
-}
+  cursor: pointer;
 
-// Remove all animations and transitions for people that prefer not to see them
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
+  &:disabled {
+    cursor: not-allowed;
   }
 }
 
-// Remove list styles
-ul,
-ol {
+// Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed
+ul[role='list'],
+ol[role='list'] {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -78,17 +100,12 @@ ol {
   // Modern properties
   padding-inline-start: 0; // Replaces padding-left
   margin-block: 0; // Replaces margin-top/bottom
-}
-
-li {
-  margin: 0;
-  padding: 0;
-  margin-block: 0;
-}
-
-// Set core root defaults
-html:focus-within {
-  scroll-behavior: smooth;
+  
+  & > li {
+    margin: 0;
+    padding: 0;
+    margin-block: 0;
+  }
 }
 
 // Remove underline from links
@@ -102,3 +119,21 @@ a {
 textarea:not([rows]) {
   min-height: 10em;
 }
+
+// Anything that has been anchored to should have extra scroll margin
+:target {
+  scroll-margin-block: 5ex;
+}
+
+
+// Remove all animations and transitions for people that prefer not to see them
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/styles/index.scss

@@ -4,6 +4,8 @@
 // Import base styles
 @forward "base";
 
+// Import themes near bottom for overrides
+@forward "themes";
 
 // Import layout components
 @forward "layouts";
@@ -11,9 +13,4 @@
 // Import utilities based on configuration
 @forward "utilities";
 
-
-
-// Import themes near bottom for overrides
-@forward "themes";
-
 @forward "./mixins-map";