@nuvoui/core 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",

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;
-
-$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)));
+$enable-debuger: false !default;
+$enable-reduced-motion: true !default; // todo: pending
+$enable-container-queries: false !default; // todo: pending
 
-  @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;
 
 // 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,36 @@ $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;

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
@@ -172,6 +170,7 @@ a {
   }
 }
 
+// todo: add to doc
 .sr-only {
   position: absolute !important;
   width: 1px !important;
@@ -184,19 +183,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,8 +4,6 @@
 // Import base styles
 @forward "base";
 
-// Import themes
-@forward "themes";
 
 // Import layout components
 @forward "layouts";
@@ -13,4 +11,9 @@
 // Import utilities based on configuration
 @forward "utilities";
 
+
+
+// Import themes near bottom for overrides
+@forward "themes";
+
 @forward "./mixins-map";