@nuvoui/core 1.3.5 → 1.4.0

package/package.json

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

package/src/styles/base/_base.scss

@@ -1,218 +1,219 @@
 @use "sass:map";
 
 // Import variables
-@use "../abstracts/config" as *;
-@use "../utilities/media-queries" as media;
+@use "../config/typography" as config-typo;
+@use "../config/feature-flags" as config-flags;
+@use "../tools/accessibility" as tool-accessibility;
 
 :root {
-  --font-family-base: #{$font-family};
+    --font-family-base: #{config-typo.$font-family};
 }
 
-// Base typography styles
+// Base config-typo styles
 html {
-  font-size: $base-size;
+    font-size: config-typo.$base-size;
 }
 
-body#{$parent-selector} {
-  font-family: var(--font-family-base);
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--text-default);
+body#{config-flags.$parent-selector} {
+    font-family: var(--font-family-base);
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--text-default);
 }
 
 // Headings
-#{$parent-selector} h1,
-#{$parent-selector} h2,
-#{$parent-selector} h3,
-#{$parent-selector} h4,
-#{$parent-selector} h5,
-#{$parent-selector} h6 {
-  margin-bottom: 0.5em;
-  font-family: var(--font-family-base);
-  font-weight: 700;
-  line-height: 1.2;
+#{config-flags.$parent-selector} h1,
+#{config-flags.$parent-selector} h2,
+#{config-flags.$parent-selector} h3,
+#{config-flags.$parent-selector} h4,
+#{config-flags.$parent-selector} h5,
+#{config-flags.$parent-selector} h6 {
+    margin-bottom: 0.5em;
+    font-family: var(--font-family-base);
+    font-weight: 700;
+    line-height: 1.2;
 }
 
-#{$parent-selector} h1 {
-  font-size: map.get($font-sizes, "4xl");
+#{config-flags.$parent-selector} h1 {
+    font-size: map.get(config-typo.$font-sizes, "4xl");
 }
 
-#{$parent-selector} h2 {
-  font-size: map.get($font-sizes, "3xl");
+#{config-flags.$parent-selector} h2 {
+    font-size: map.get(config-typo.$font-sizes, "3xl");
 }
 
-#{$parent-selector} h3 {
-  font-size: map.get($font-sizes, "2xl");
+#{config-flags.$parent-selector} h3 {
+    font-size: map.get(config-typo.$font-sizes, "2xl");
 }
 
-#{$parent-selector} h4 {
-  font-size: map.get($font-sizes, "xl");
+#{config-flags.$parent-selector} h4 {
+    font-size: map.get(config-typo.$font-sizes, "xl");
 }
 
-#{$parent-selector} h5 {
-  font-size: map.get($font-sizes, "lg");
+#{config-flags.$parent-selector} h5 {
+    font-size: map.get(config-typo.$font-sizes, "lg");
 }
 
-#{$parent-selector} h6 {
-  font-size: map.get($font-sizes, "base");
+#{config-flags.$parent-selector} h6 {
+    font-size: map.get(config-typo.$font-sizes, "base");
 }
 
 // Paragraphs
-#{$parent-selector} p {
-  margin-bottom: 1rem;
+#{config-flags.$parent-selector} p {
+    margin-bottom: 1rem;
 }
 
 // Small text
-#{$parent-selector} small {
-  font-size: map.get($font-sizes, "sm");
+#{config-flags.$parent-selector} small {
+    font-size: map.get(config-typo.$font-sizes, "sm");
 }
 
 // Buttons
-#{$parent-selector} button {
-  padding: 0.5rem 1rem;
-  border: 0;
-  border-radius: 0.25rem;
-  font-family: var(--font-family-base);
-  cursor: pointer;
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:disabled {
-    background-color: #e0e0e0; // Disabled button color
-    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);
+#{config-flags.$parent-selector} button {
+    padding: 0.5rem 1rem;
+    border: 0;
+    border-radius: 0.25rem;
+    font-family: var(--font-family-base);
+    cursor: pointer;
+    transition:
+        background-color 0.2s ease-in-out,
+        color 0.2s ease-in-out;
+
+    &:focus {
+        outline: none;
+    }
+
+    &:disabled {
+        background-color: #e0e0e0; // Disabled button color
+        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
-#{$parent-selector} input[type="text"],
-#{$parent-selector} input[type="email"],
-#{$parent-selector} input[type="password"],
-#{$parent-selector} input[type="number"],
-#{$parent-selector} input[type="search"],
-#{$parent-selector} textarea {
-  padding: 0.5rem;
-  border: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
-  border-radius: 0.25rem;
-  width: 100%; // Full width
-  font-family: var(--font-family-base);
-  transition: border 0.2s ease-in-out;
-
-  &:focus {
-    border-color: var(--link-color);
-    outline: none;
-  }
+#{config-flags.$parent-selector} input[type="text"],
+#{config-flags.$parent-selector} input[type="email"],
+#{config-flags.$parent-selector} input[type="password"],
+#{config-flags.$parent-selector} input[type="number"],
+#{config-flags.$parent-selector} input[type="search"],
+#{config-flags.$parent-selector} textarea {
+    padding: 0.5rem;
+    border: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
+    border-radius: 0.25rem;
+    width: 100%; // Full width
+    font-family: var(--font-family-base);
+    transition: border 0.2s ease-in-out;
+
+    &:focus {
+        border-color: var(--link-color);
+        outline: none;
+    }
 }
 
 // Checkboxes and Radio Buttons
-#{$parent-selector} input[type="checkbox"],
-#{$parent-selector} input[type="radio"] {
-  margin-right: 0.5rem; // Space between input and label
+#{config-flags.$parent-selector} input[type="checkbox"],
+#{config-flags.$parent-selector} input[type="radio"] {
+    margin-right: 0.5rem; // Space between input and label
 }
 
 // Selects
-#{$parent-selector} select {
-  padding: 0.5rem;
-  border: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
-  border-radius: 0.25rem;
-  width: 100%; // Full width
-  font-family: var(--font-family-base);
-  transition: border 0.2s ease-in-out;
-
-  &:focus {
-    border-color: var(--link-color);
-    outline: none;
-  }
+#{config-flags.$parent-selector} select {
+    padding: 0.5rem;
+    border: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
+    border-radius: 0.25rem;
+    width: 100%; // Full width
+    font-family: var(--font-family-base);
+    transition: border 0.2s ease-in-out;
+
+    &:focus {
+        border-color: var(--link-color);
+        outline: none;
+    }
 }
 
 // Blockquotes
-#{$parent-selector} blockquote {
-  margin: 1rem 0;
-  padding: 0.5rem 1rem;
-  border-left: var(--border-size, 4px) var(--border-style, solid) var(--border-base, var(--secondary));
-  font-style: italic;
+#{config-flags.$parent-selector} blockquote {
+    margin: 1rem 0;
+    padding: 0.5rem 1rem;
+    border-left: var(--border-size, 4px) var(--border-style, solid) var(--border-base, var(--secondary));
+    font-style: italic;
 }
 
 // Horizontal Rule
-#{$parent-selector} hr {
-  border: none;
-  border-top: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
-  margin: 1rem 0;
+#{config-flags.$parent-selector} hr {
+    border: none;
+    border-top: var(--border-size, 1px) var(--border-style, solid) var(--border-base, var(--secondary));
+    margin: 1rem 0;
 }
 
 // Images
-#{$parent-selector} img {
-  max-width: 100%; // Responsive images
-  height: auto;
+#{config-flags.$parent-selector} img {
+    max-width: 100%; // Responsive images
+    height: auto;
 }
 
 // Figures and Captions
-#{$parent-selector} figure {
-  margin: 1rem 0;
+#{config-flags.$parent-selector} figure {
+    margin: 1rem 0;
 }
 
-#{$parent-selector} figcaption {
-  font-size: 0.875rem; // Smaller font for captions
-  color: var(--text-muted, #666); // Optional secondary text color
+#{config-flags.$parent-selector} figcaption {
+    font-size: 0.875rem; // Smaller font for captions
+    color: var(--text-muted, #666); // Optional secondary text color
 }
 
 // Links
-#{$parent-selector} a {
-  transition: color 0.2s ease-in-out;
+#{config-flags.$parent-selector} a {
+    transition: color 0.2s ease-in-out;
 
-  &:not([class*="text-"]) {
-    // document: if no hover or normal text provided it will use the default link color
-    color: var(--link-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);
+        &:hover {
+            color: var(--link-hover-color);
+        }
     }
-  }
 }
 
 // Labels
-#{$parent-selector} label[for] {
-  cursor: pointer;
+#{config-flags.$parent-selector} label[for] {
+    cursor: pointer;
 }
 
 // todo: add to doc
-#{$parent-selector} .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;
-}
-
-#{$parent-selector} code {
-  font-family: "Courier New", Courier, monospace;
-  background-color: #f8f8f8;
-  color: #d63384;
-  padding: 2px 6px;
-  border-radius: 3px;
-  white-space: nowrap;
-
-  @include media.dark-mode {
-    background-color: #333;
-    color: #f8f8f2;
-  }
+#{config-flags.$parent-selector} .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;
+}
+
+#{config-flags.$parent-selector} code {
+    font-family: "Courier New", Courier, monospace;
+    background-color: #f8f8f8;
+    color: #d63384;
+    padding: 2px 6px;
+    border-radius: 3px;
+    white-space: nowrap;
+
+    @include tool-accessibility.dark-mode {
+        background-color: #333;
+        color: #f8f8f2;
+    }
 }

package/src/styles/base/_reset.scss

@@ -4,9 +4,7 @@
 ::after,
 ::backdrop,
 ::file-selector-button {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+    box-sizing: border-box;
 }
 
 // Remove default margin and padding
@@ -22,28 +20,28 @@ figure,
 blockquote,
 dl,
 dd {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 // Prevent font size inflation
 html {
-  text-size-adjust: none;
+    text-size-adjust: none;
 }
 
 // Set core root defaults
 html:focus-within {
-  scroll-behavior: smooth;
+    scroll-behavior: smooth;
 }
 
 // Set core body defaults
 body {
-  min-height: 100vh;
-  min-height: 100dvh;
-  text-rendering: optimizespeed;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    min-height: 100vh;
+    min-height: 100dvh;
+    text-rendering: optimizespeed;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 // Set shorter line heights on headings and interactive elements
@@ -54,7 +52,7 @@ h4,
 button,
 input,
 label {
-  line-height: 1.1;
+    line-height: 1.1;
 }
 
 // Make images easier to work with
@@ -67,16 +65,16 @@ audio,
 iframe,
 embed,
 object {
-  display: block;
-  vertical-align: middle;
+    display: block;
+    vertical-align: middle;
 }
 
 img,
 picture,
 video,
 svg {
-  max-width: 100%;
-  height: auto;
+    max-width: 100%;
+    height: auto;
 }
 
 // Inherit fonts for inputs and buttons
@@ -84,57 +82,51 @@ input,
 button,
 textarea,
 select {
-  font: inherit;
-  cursor: pointer;
+    font: inherit;
+    cursor: pointer;
 
-  &:disabled {
-    cursor: not-allowed;
-  }
+    &:disabled {
+        cursor: not-allowed;
+    }
 }
 
 // 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;
-
-  // Modern properties
-  padding-inline-start: 0; // Replaces padding-left
-  margin-block: 0; // Replaces margin-top/bottom
+    list-style: none;
+    padding-inline-start: 0; // Replaces padding-left
+    margin-block: 0; // Replaces margin-top/bottom
 
-  & > li {
-    margin: 0;
-    padding: 0;
-    margin-block: 0;
-  }
+    & > li {
+        margin-block: 0;
+    }
 }
 
 // Remove underline from links
 a {
-  text-decoration-skip-ink: auto;
-  text-decoration: none;
-  color: inherit;
+    text-decoration-skip-ink: auto;
+    text-decoration: none;
+    color: inherit;
 }
 
-// Make sure textareas without a rows attribute are not tiny
+// Make sure text areas without a rows attribute are not tiny
 textarea:not([rows]) {
-  min-height: 10em;
+    min-height: 10em;
 }
 
 // Anything that has been anchored to should have extra scroll margin
 :target {
-  scroll-margin-block: 5ex;
+    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;
-  }
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
 }

package/src/styles/build.scss

@@ -1,3 +1,27 @@
+/*!
+ * NuvoUI SCSS Framework
+ * MIT License
+ *
+ * Copyright (c) 2025 NuvoUI
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
 @use "./index.scss" as NuvoUI with (
-  $generate-utility-classes: true
+    $generate-utility-classes: true
 );