@nuvoui/core 1.3.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "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

@@ -104,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: ();
 

package/src/styles/base/_base.scss

@@ -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/layouts/_flex.scss

@@ -46,16 +46,6 @@
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
-// @description Establishes a flex container.
-@mixin flex {
-  display: flex;
-}
-
-// @description Establishes a flex-inline container.
-@mixin flex-inline {
-  display: inline-flex;
-}
-
 // @description Sets flex-direction to row.
 // @dependencies flex | flex-inline
 @mixin row {
@@ -321,12 +311,6 @@
 
   // Apply base flex styles to all flex variants at once
   #{$flex-selectors} {
-    @include flex;
-
-    &.inline {
-      @include flex-inline;
-    }
-
     // Direction modifiers
     &.row {
       @include row;
@@ -513,7 +497,7 @@
 
   // Handle responsive variants
   @each $breakpoint, $width in VAR.$breakpoints {
-    $bp-val: FN.get-breakpoint-value($breakpoint);
+    $bp-val: FN.get-breakpoint-value($breakpoint); // todo: why get-breakpoint-value?
 
     @media (min-width: #{$bp-val}) {
       #{$flex-selectors} {
@@ -664,12 +648,6 @@
           }
         }
       }
-
-      // Special case for inline@breakpoint
-      #{VAR.$parent-selector} .flex.inline\@#{$breakpoint},
-      #{VAR.$parent-selector} .flex\@#{$breakpoint}.inline\@#{$breakpoint} {
-        @include flex-inline;
-      }
     }
   }
 }

package/src/styles/layouts/_grid.scss

@@ -6,16 +6,6 @@
 @use "../abstracts/functions" as FN;
 @use "../abstracts/config" as VAR;
 
-// @description Establishes a grid container.
-@mixin grid {
-  display: grid;
-}
-
-// @description Establishes a inline-grid container.
-@mixin grid-inline {
-  display: inline-grid;
-}
-
 // Grid Template Mixins
 @mixin cols($count) {
   grid-template-columns: repeat($count, minmax(0, 1fr));
@@ -129,12 +119,6 @@ $alignments: (
 
   // Apply base grid styles to all grid variants at once
   #{$all-grid-selectors} {
-    @include grid;
-
-    &.inline {
-      @include grid-inline;
-    }
-
     // Auto-fit/fill Classes
     @each $size, $width in VAR.$grid-item-sizes {
       &.auto-fit-#{$size} {

package/src/styles/themes/refactored_borders.ipynb

@@ -0,0 +1,37 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "initial_id",
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [],
+   "source": [
+    ""
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 2
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython2",
+   "version": "2.7.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

package/src/styles/utilities/_borders.scss

@@ -5,6 +5,8 @@
 @use "sass:map";
 @use "sass:meta";
 @use "sass:string" as str;
+@use "sass:list";
+
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
@@ -38,13 +40,18 @@ $border-styles: (solid, dashed, dotted, double, none);
 
 // Core Border Mixins - improved to include style and color by default
 // SKIP Documentation
-@mixin border($val, $style: solid, $color: var(--border-base)) {
+@mixin border($val, $style: solid, $color: var(--border-color)) {
   $val: FN.fix-units($val);
 
+  --border-size: #{$val};
+
   border-width: $val;
   @if $val != 0 {
     border-style: $style;
     border-color: $color;
+
+    --border-style: #{$style};
+    --border-color: #{$color};
   }
 }
 
@@ -53,8 +60,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 
   border-top-width: $val;
   @if $val != 0 {
-    border-top-style: solid;
-    border-top-color: var(--border);
+    border-top-style: var(--border-style, solid);
+    border-top-color: var(--border-color);
   }
 }
 
@@ -63,8 +70,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 
   border-right-width: $val;
   @if $val != 0 {
-    border-right-style: solid;
-    border-right-color: var(--border);
+    border-right-style: var(--border-style, solid);
+    border-right-color: var(--border-color);
   }
 }
 
@@ -73,8 +80,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 
   border-bottom-width: $val;
   @if $val != 0 {
-    border-bottom-style: solid;
-    border-bottom-color: var(--border);
+    border-bottom-style: var(--border-style, solid);
+    border-bottom-color: var(--border-color);
   }
 }
 
@@ -83,8 +90,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 
   border-left-width: $val;
   @if $val != 0 {
-    border-left-style: solid;
-    border-left-color: var(--border);
+    border-left-style: var(--border-style, solid);
+    border-left-color: var(--border-color);
   }
 }
 
@@ -160,319 +167,124 @@ $border-styles: (solid, dashed, dotted, double, none);
 
 @mixin pill {
   @include rounded(9999px);
-} // todo: doc missing
+}
 
-// -----------------------------------------------
-// UTILITY CLASSES
-// -----------------------------------------------
 @if FN.feature-enabled("borders") {
   // Basic border classes (all sides)
-  .border {
+  #{VAR.$parent-selector} .border {
     @include border(1);
   }
 
-  .border-0 {
+  // Common shortcuts for single-side borders
+  #{VAR.$parent-selector} .border-0 {
     @include border(0);
   }
 
-  // All sides border width
-  @each $width in VAR.$border-widths {
-    .border-#{$width} {
-      @include border($width);
-    }
+  #{VAR.$parent-selector} .border-t {
+    @include border-top(1);
+  }
+
+  #{VAR.$parent-selector} .border-r {
+    @include border-right(1);
+  }
+
+  #{VAR.$parent-selector} .border-b {
+    @include border-bottom(1);
+  }
+
+  #{VAR.$parent-selector} .border-l {
+    @include border-left(1);
   }
 
   // Directional border width
   @each $width in VAR.$border-widths {
-    .border-t-#{$width} {
+    #{VAR.$parent-selector} .border-#{$width},
+    #{VAR.$parent-selector} .hover\:border-#{$width}:hover,
+    #{VAR.$parent-selector} .active\:border-#{$width}:active,
+    #{VAR.$parent-selector} .focus\:border-#{$width}:focus,
+    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$width} {
+      @include border($width);
+    }
+    #{VAR.$parent-selector} .border-t-#{$width} {
       @include border-top($width);
     }
-    .border-r-#{$width} {
+    #{VAR.$parent-selector} .border-r-#{$width} {
       @include border-right($width);
     }
-    .border-b-#{$width} {
+    #{VAR.$parent-selector} .border-b-#{$width} {
       @include border-bottom($width);
     }
-    .border-l-#{$width} {
+    #{VAR.$parent-selector} .border-l-#{$width} {
       @include border-left($width);
     }
   }
 
-  // Common shortcuts for single-side borders
-  .border-t {
-    @include border-top(1);
-  }
-
-  .border-r {
-    @include border-right(1);
-  }
-
-  .border-b {
-    @include border-bottom(1);
-  }
-
-  .border-l {
-    @include border-left(1);
-  }
-
   // Border radius classes
-  .rounded {
+  #{VAR.$parent-selector} .rounded {
     @include rounded;
-  } // Default rounded
-  .square {
+  }
+  #{VAR.$parent-selector} .square {
     @include rounded(0);
   } // Alias for no radius
 
   @each $name, $value in VAR.$border-radii {
-    .rounded-#{$name} {
+    #{VAR.$parent-selector} .rounded-#{$name} {
       @include rounded($value);
     }
-  }
-
-  // Directional border radius
-  @each $name, $value in VAR.$border-radii {
-    .rounded-t-#{$name} {
+    #{VAR.$parent-selector} .rounded-t-#{$name} {
       @include rounded-t($value);
     }
-    .rounded-r-#{$name} {
+    #{VAR.$parent-selector} .rounded-r-#{$name} {
       @include rounded-r($value);
     }
-    .rounded-b-#{$name} {
+    #{VAR.$parent-selector} .rounded-b-#{$name} {
       @include rounded-b($value);
     }
-    .rounded-l-#{$name} {
+    #{VAR.$parent-selector} .rounded-l-#{$name} {
       @include rounded-l($value);
     }
 
     // Individual corners
-    .rounded-tl-#{$name} {
+    #{VAR.$parent-selector} .rounded-tl-#{$name} {
       @include rounded-tl($value);
     }
-    .rounded-tr-#{$name} {
+    #{VAR.$parent-selector} .rounded-tr-#{$name} {
       @include rounded-tr($value);
     }
-    .rounded-br-#{$name} {
+    #{VAR.$parent-selector} .rounded-br-#{$name} {
       @include rounded-br($value);
     }
-    .rounded-bl-#{$name} {
+    #{VAR.$parent-selector} .rounded-bl-#{$name} {
       @include rounded-bl($value);
     }
   }
 
   // Pill shape (alias for full radius)
-  .pill {
+  #{VAR.$parent-selector} .pill {
     @include pill;
   }
 
   // Border styles - these override the default solid style if needed
   @each $style in $border-styles {
-    .border-#{$style} {
+    #{VAR.$parent-selector} .border-#{$style},
+    #{VAR.$parent-selector} .hover\:border-#{$style}:hover,
+    #{VAR.$parent-selector} .active\:border-#{$style}:active,
+    #{VAR.$parent-selector} .focus\:border-#{$style}:focus,
+    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$style} {
       @include border-style($style);
     }
   }
 
-  // Border colors - these override the default color if needed
-  .border-default {
-    @include border-color(var(--border));
-  }
-
-  .border-light {
-    @include border-color(var(--border-light-color));
-  }
-
-  .border-dark {
-    @include border-color(var(--border-dark-color));
-  }
-
-  .border-primary {
-    @include border-color(var(--primary));
-  }
-
-  .border-secondary {
-    @include border-color(var(--secondary));
-  }
-
-  .border-success {
-    @include border-color(var(--success));
-  }
-
-  .border-danger {
-    @include border-color(var(--danger));
-  }
-
-  .border-warning {
-    @include border-color(var(--warning));
-  }
-
-  .border-info {
-    @include border-color(var(--info));
-  }
-
-  // Common combined border utilities (style + color)
-  .border-primary-solid {
-    @include border-style(solid);
-    @include border-color(var(--primary));
-  }
-
-  .border-danger-dashed {
-    @include border-style(dashed);
-    @include border-color(var(--danger));
-  }
-
-  // -----------------------------------------------
-  // HOVER, ACTIVE, AND FOCUS STATES
-  // -----------------------------------------------
-
-  // Hover state border classes
-  @each $width in VAR.$border-widths {
-    .hover\:border-#{$width}:hover {
-      @include border($width);
-    }
-  }
-
-  @each $style in $border-styles {
-    .hover\:border-#{$style}:hover {
-      @include border-style($style);
+  @each $color-name in VAR.$color-names {
+    #{VAR.$parent-selector} .border-#{$color-name},
+    #{VAR.$parent-selector} .hover\:border-#{$color-name}:hover,
+    #{VAR.$parent-selector} .active\:border-#{$color-name}:active,
+    #{VAR.$parent-selector} .focus\:border-#{$color-name}:focus,
+    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$color-name} {
+      @include border-color(var(--#{$color-name}));
     }
   }
 
-  // Border colors on hover
-  .hover\:border-default:hover {
-    @include border-color(var(--border));
-  }
-
-  .hover\:border-light:hover {
-    @include border-color(var(--border-light-color));
-  }
-
-  .hover\:border-dark:hover {
-    @include border-color(var(--border-dark-color));
-  }
-
-  .hover\:border-primary:hover {
-    @include border-color(var(--primary));
-  }
-
-  .hover\:border-secondary:hover {
-    @include border-color(var(--secondary));
-  }
-
-  .hover\:border-success:hover {
-    @include border-color(var(--success));
-  }
-
-  .hover\:border-danger:hover {
-    @include border-color(var(--danger));
-  }
-
-  .hover\:border-warning:hover {
-    @include border-color(var(--warning));
-  }
-
-  .hover\:border-info:hover {
-    @include border-color(var(--info));
-  }
-
-  // Active state border classes
-  @each $width in VAR.$border-widths {
-    .active\:border-#{$width}:active {
-      @include border($width);
-    }
-  }
-
-  @each $style in $border-styles {
-    .active\:border-#{$style}:active {
-      @include border-style($style);
-    }
-  }
-
-  // Border colors on active state
-  .active\:border-default:active {
-    @include border-color(var(--border));
-  }
-
-  .active\:border-light:active {
-    @include border-color(var(--border-light-color));
-  }
-
-  .active\:border-dark:active {
-    @include border-color(var(--border-dark-color));
-  }
-
-  .active\:border-primary:active {
-    @include border-color(var(--primary));
-  }
-
-  .active\:border-secondary:active {
-    @include border-color(var(--secondary));
-  }
-
-  .active\:border-success:active {
-    @include border-color(var(--success));
-  }
-
-  .active\:border-danger:active {
-    @include border-color(var(--danger));
-  }
-
-  .active\:border-warning:active {
-    @include border-color(var(--warning));
-  }
-
-  .active\:border-info:active {
-    @include border-color(var(--info));
-  }
-
-  // Focus state border classes
-  @each $width in VAR.$border-widths {
-    .focus\:border-#{$width}:focus {
-      @include border($width);
-    }
-  }
-
-  @each $style in $border-styles {
-    .focus\:border-#{$style}:focus {
-      @include border-style($style);
-    }
-  }
-
-  // Border colors on focus
-  .focus\:border-default:focus {
-    @include border-color(var(--border));
-  }
-
-  .focus\:border-light:focus {
-    @include border-color(var(--border-light-color));
-  }
-
-  .focus\:border-dark:focus {
-    @include border-color(var(--border-dark-color));
-  }
-
-  .focus\:border-primary:focus {
-    @include border-color(var(--primary));
-  }
-
-  .focus\:border-secondary:focus {
-    @include border-color(var(--secondary));
-  }
-
-  .focus\:border-success:focus {
-    @include border-color(var(--success));
-  }
-
-  .focus\:border-danger:focus {
-    @include border-color(var(--danger));
-  }
-
-  .focus\:border-warning:focus {
-    @include border-color(var(--warning));
-  }
-
-  .focus\:border-info:focus {
-    @include border-color(var(--info));
-  }
-
   // -----------------------------------------------
   // RESPONSIVE CLASSES
   // -----------------------------------------------
@@ -481,33 +293,33 @@ $border-styles: (solid, dashed, dotted, double, none);
     @media (min-width: #{$width}) {
       // Border width responsive
       @each $val in VAR.$border-widths {
-        .border-#{$val}\@#{$breakpoint} {
+        #{VAR.$parent-selector} .border-#{$val}\@#{$breakpoint} {
           @include border($val);
         }
       }
 
       // Common shortcuts for responsive
-      .border\@#{$breakpoint} {
+      #{VAR.$parent-selector} .border\@#{$breakpoint} {
         @include border(1);
       }
-      .border-0\@#{$breakpoint} {
+      #{VAR.$parent-selector} .border-0\@#{$breakpoint} {
         @include border(0);
       }
 
       // Border radius responsive
       @each $name, $value in VAR.$border-radii {
-        .rounded-#{$name}\@#{$breakpoint} {
+        #{VAR.$parent-selector} .rounded-#{$name}\@#{$breakpoint} {
           @include rounded($value);
         }
       }
 
-      .rounded\@#{$breakpoint} {
+      #{VAR.$parent-selector} .rounded\@#{$breakpoint} {
         @include rounded;
       }
-      .square\@#{$breakpoint} {
+      #{VAR.$parent-selector} .square\@#{$breakpoint} {
         @include rounded(0);
       }
-      .pill\@#{$breakpoint} {
+      #{VAR.$parent-selector} .pill\@#{$breakpoint} {
         @include pill;
       }
     }