@nuvoui/core 0.2.1

package/src/styles/components/_navbar.scss

@@ -0,0 +1,125 @@
+// _navbar.scss
+
+@use '../utilities/variables' as *;
+@use '../utilities/shadows' as *;
+@use '../layouts/container' as Container;
+@use '../layouts/flex' as Flex;
+@use '../layouts/grid' as Grid;
+
+:root {
+    --shadow-color: 255, 0, 0;
+}
+
+.navbar {
+
+    @include Flex.between;
+    @include Container.container-flex;
+
+    // @include Grid.grid-flow-row;
+    // @include Grid.grid-flow-col;
+    // @include Grid.grid-cols(2);
+    // @include Container.container-grid;
+
+    & {
+        @include Flex.align-center;
+        // @include shadow('md', 'colored');
+
+        background-color: var(--nav-bg);
+
+        &:hover {
+            @include shadow('lg', 'dark');
+        }
+
+        .logo {
+            img {
+                max-height: 40px;
+                width: auto;
+            }
+        }
+
+        .menu {
+            @include Flex.flex;
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            li {
+                position: relative;
+
+                a {
+                    display: block;
+                    padding: 1rem;
+                    text-decoration: none;
+                    color: var(--nav-text);
+                    transition: background-color 0.2s ease-in-out;
+
+                    &:hover {
+                        background-color: var(--nav-hover);
+                    }
+                }
+
+                // Dropdown styles
+                &:hover>.submenu {
+                    display: block;
+                    visibility: visible;
+                    opacity: 1;
+                    pointer-events: auto; // Re-enable interactions
+                }
+            }
+        }
+
+        .submenu {
+            background-color: white;
+            display: block;
+            visibility: hidden; // Use visibility instead of display
+            pointer-events: none; // Prevents interaction when hidden
+            opacity: 0;
+
+            position: absolute;
+            top: 100%;
+            left: 0;
+            min-width: 200px;
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            background-color: var(--nav-bg);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+
+            // Animation
+            transition:
+                opacity 0.2s ease-in-out,
+                visibility 0.2s ease-in-out;
+
+            li {
+                a {
+                    padding: 0.75rem 1rem;
+                }
+            }
+
+            // Nested dropdowns
+            .submenu {
+                top: 0;
+                left: 100%;
+            }
+        }
+
+        @media (max-width: 768px) {
+            flex-direction: column;
+
+            .menu {
+                flex-direction: column;
+                width: 100%;
+
+                .submenu {
+                    position: static;
+                    display: none;
+                    width: 100%;
+
+                    li a {
+                        padding-left: 2rem;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/styles/index.scss

@@ -0,0 +1,34 @@
+// Forward all modules for external use
+@forward 'utilities/variables';
+@forward './global';
+
+// Base styles
+@forward 'base/reset';
+@forward 'base/base';
+
+// Utilities
+@forward 'utilities/animations';
+@forward 'utilities/colors';
+@forward 'utilities/position';
+@forward 'utilities/shadows';
+@forward 'utilities/spacing';
+@forward 'utilities/typography';
+@forward 'utilities/tooltips';
+
+// Layouts
+@forward 'layouts/container';
+@forward 'layouts/flex';
+@forward 'layouts/grid';
+
+// Themes
+@forward 'themes/light';
+@forward 'themes/dark';
+@forward 'themes/theme';
+
+// Components
+@forward 'components/button';
+@forward 'components/navbar';
+@forward 'components/form';
+
+// Local usage
+@use './global' as *;

package/src/styles/layouts/_container.scss

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@use '../utilities/variables' as *;
+
+// Container mixins
+@mixin container-base {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@mixin container {
+  @include container-base;
+  & {
+    @each $breakpoint, $width in $container-max-widths {
+      @media (min-width: map.get($breakpoints, $breakpoint)) {
+          max-width: $width;
+      }
+    }
+  }
+}
+
+@mixin container-flex {
+  display: flex;
+  @include container;
+}
+
+@mixin container-grid {
+  display: grid;
+  @include container;
+}
+
+// Container classes
+.container {
+  @include container;
+}
+
+.container-flex {
+  @include container-flex;
+}
+
+.container-grid {
+  @include container-grid;
+}
+
+.container-fluid {
+  @include container-base;
+}

package/src/styles/layouts/_flex.scss

@@ -0,0 +1,138 @@
+@use 'sass:math';
+@use '../utilities/variables' as *;
+
+// Flex Container Mixins
+@mixin flex {display: flex;}
+@mixin flex-inline {display: inline-flex;}
+
+// Direction Mixins
+@mixin row {flex-direction: row;}
+@mixin row-reverse {flex-direction: row-reverse;}
+@mixin col {flex-direction: column;}
+@mixin col-reverse {flex-direction: column-reverse;}
+
+// Wrap Mixins
+@mixin wrap {flex-wrap: wrap;}
+@mixin nowrap {flex-wrap: nowrap;}
+@mixin wrap-reverse {flex-wrap: wrap-reverse;}
+
+// Main Axis Alignment Mixins
+@mixin start {justify-content: flex-start;}
+@mixin end {justify-content: flex-end;}
+@mixin center {justify-content: center;}
+@mixin between {justify-content: space-between;}
+@mixin around {justify-content: space-around;}
+@mixin evenly {justify-content: space-evenly;}
+
+// Cross Axis Alignment Mixins
+@mixin align-start {align-items: flex-start;}
+@mixin align-end {align-items: flex-end;}
+@mixin align-center {align-items: center;}
+@mixin align-stretch {align-items: stretch;}
+@mixin align-baseline {align-items: baseline;}
+
+// Self Alignment Mixins
+@mixin self-auto {align-self: auto;}
+@mixin self-start {align-self: flex-start;}
+@mixin self-end {align-self: flex-end;}
+@mixin self-center {align-self: center;}
+@mixin self-stretch {align-self: stretch;}
+
+// Flex Child Mixins
+@mixin w-full {flex: 0 0 100%;}
+@mixin w-auto {flex: 1 1 auto;}
+
+// Base flex container
+.flex {
+  display: flex;
+  
+  // Direction modifiers
+  &.row { flex-direction: row; }
+  &.row-reverse { flex-direction: row-reverse; }
+  &.col { flex-direction: column; }
+  &.col-reverse { flex-direction: column-reverse; }
+  
+  // Wrap modifiers
+  &.wrap { flex-wrap: wrap; }
+  &.nowrap { flex-wrap: nowrap; }
+  &.wrap-reverse { flex-wrap: wrap-reverse; }
+  
+  // Justify modifiers
+  &.start { justify-content: flex-start; }
+  &.end { justify-content: flex-end; }
+  &.center { justify-content: center; }
+  &.between { justify-content: space-between; }
+  &.around { justify-content: space-around; }
+  &.evenly { justify-content: space-evenly; }
+  
+  // Align modifiers
+  &.items-start { align-items: flex-start; }
+  &.items-end { align-items: flex-end; }
+  &.items-center { align-items: center; }
+  &.items-baseline { align-items: baseline; }
+  &.items-stretch { align-items: stretch; }
+  
+  // Gap modifiers
+  @for $i from 0 through 8 {
+    &.gap-#{$i} { gap: #{$i * 0.25}rem; }
+  }
+  
+  // Child flex items (using column count)
+  > .w-auto { flex: 1 1 auto; }
+  > .w-full { flex: 0 0 100%; }
+  
+  @for $i from 1 through $column-count {
+    > .w-#{$i} {
+      flex: 0 0 math.percentage( math.div($i, $column-count));
+    }
+  }
+}
+
+
+// Responsive variants
+@each $breakpoint, $width in $breakpoints {
+  @media (min-width: $width) {
+    .#{$breakpoint}\: {
+      // Direction
+      &row { flex-direction: row; }
+      &row-reverse { flex-direction: row-reverse; }
+      &col { flex-direction: column; }
+      &col-reverse { flex-direction: column-reverse; }
+      
+      // Wrap
+      &wrap { flex-wrap: wrap; }
+      &nowrap { flex-wrap: nowrap; }
+      &wrap-reverse { flex-wrap: wrap-reverse; }
+      
+      // Justify
+      &start { justify-content: flex-start; }
+      &end { justify-content: flex-end; }
+      &center { justify-content: center; }
+      &between { justify-content: space-between; }
+      &around { justify-content: space-around; }
+      &evenly { justify-content: space-evenly; }
+      
+      // Align
+      &items-start { align-items: flex-start; }
+      &items-end { align-items: flex-end; }
+      &items-center { align-items: center; }
+      &items-baseline { align-items: baseline; }
+      &items-stretch { align-items: stretch; }
+      
+      // Width (using column count)
+      &w-auto { flex: 1 1 auto; }
+      &w-full { flex: 0 0 100%; }
+      
+      @for $i from 1 through $column-count {
+        &w-#{$i} {
+          flex: 0 0 math.percentage(math.div($i, $column-count));
+        }
+      }
+      
+      // Gap
+      @for $i from 0 through 8 {
+        &gap-#{$i} { gap: #{$i * 0.25}rem; }
+      }
+    }
+  }
+}

package/src/styles/layouts/_grid.scss

@@ -0,0 +1,147 @@
+@use '../utilities/variables' as *;
+
+// Grid Container Mixins
+@mixin grid {
+  display: grid;
+}
+
+@mixin grid-inline {
+  display: inline-grid;
+}
+
+// Grid Template Mixins
+@mixin grid-cols($count) {
+  grid-template-columns: repeat($count, minmax(0, 1fr));
+}
+
+@mixin grid-rows($count) {
+  grid-template-rows: repeat($count, minmax(0, 1fr));
+}
+
+// Auto-fit/fill Mixins
+@mixin grid-auto-fit($min-width) {
+  grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
+}
+
+@mixin grid-auto-fill($min-width) {
+  grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr));
+}
+
+// Grid Flow Mixins
+@mixin grid-flow-row { grid-auto-flow: row; }
+@mixin grid-flow-col { grid-auto-flow: column; }
+@mixin grid-flow-dense { grid-auto-flow: dense; }
+
+// Grid Alignment Mixins
+@mixin justify-items($value) {
+  justify-items: $value;
+}
+
+@mixin align-items($value) {
+  align-items: $value;
+}
+
+@mixin place-items($value) {
+  place-items: $value;
+}
+
+// Grid Item Placement Mixins
+@mixin col-span($span) {
+  grid-column: span $span / span $span;
+}
+
+@mixin row-span($span) {
+  grid-row: span $span / span $span;
+}
+
+@mixin col-start($start) {
+  grid-column-start: $start;
+}
+
+@mixin col-end($end) {
+  grid-column-end: $end;
+}
+
+@mixin row-start($start) {
+  grid-row-start: $start;
+}
+
+@mixin row-end($end) {
+  grid-row-end: $end;
+}
+
+// Classes
+.grid { @include grid; }
+.grid.inline { @include grid-inline; }
+
+// Grid Template Classes
+@for $i from 1 through $column-count {
+  .grid.cols-#{$i} { @include grid-cols($i); }
+  .grid.rows-#{$i} { @include grid-rows($i); }
+
+  // Responsive grid columns
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: $width) {
+      .grid.#{$breakpoint}\:cols-#{$i} {
+        @include grid-cols($i);
+      }
+    }
+  }
+}
+
+
+
+// Generate Column Span Classes with Responsive Variants
+@for $i from 1 through $column-count {
+  .col-span-#{$i} {
+    @include col-span($i);
+  }
+
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: $width) {
+      .#{$breakpoint}\:col-span-#{$i} {
+        @include col-span($i);
+      }
+    }
+  }
+}
+
+
+// Auto-fit/fill Classes
+@each $breakpoint, $width in $column-widths {
+  .grid.auto-fit-#{$breakpoint} { @include grid-auto-fit($width); }
+  .grid.auto-fill-#{$breakpoint} { @include grid-auto-fill($width); }
+}
+
+// Flow Classes
+.grid.flow-row { @include grid-flow-row; }
+.grid.flow-col { @include grid-flow-col; }
+.grid.flow-dense { @include grid-flow-dense; }
+
+// Alignment Classes
+$alignments: (
+  'start': start,
+  'end': end,
+  'center': center,
+  'stretch': stretch
+);
+
+@each $name, $value in $alignments {
+  .justify-items-#{$name} { justify-items: $value; }
+  .align-items-#{$name} { align-items: $value; }
+  .place-items-#{$name} { place-items: $value; }
+
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: $width) {
+      .#{$breakpoint}\:justify-items-#{$name} {
+        justify-items: $value;
+      }
+      .#{$breakpoint}\:align-items-#{$name} {
+        align-items: $value;
+      }
+      .#{$breakpoint}\:place-items-#{$name} {
+        place-items: $value;
+      }
+    }
+  }
+}

package/src/styles/themes/_dark.scss

@@ -0,0 +1,26 @@
+@use 'sass:color';
+@use 'sass:map';
+@use './theme' as *;
+@use '../utilities/variables' as *;
+
+[data-theme="dark"] {
+  // ... other dark theme variables ...
+  @include generate-theme-colors('dark');
+  
+  --font-family-heading: var(--font-family-base);
+  $base-dark-color: map.get($colors, 'dark');
+
+  --input-bg: #{color.scale($base-dark-color, $lightness: -20%)};
+  
+  // --text-primary: #{map.get($colors, 'light')};
+  // --link-color: #{color.scale(map.get($colors, 'primary'), $lightness: 10%)};
+  // --link-hover-color: #{color.scale(map.get($colors, 'primary'), $lightness: 20%)};
+
+
+  // --nav-bg: #{map.get($colors, 'dark')};
+  // // --nav-hover: #{color.scale(map.get($colors, 'light'), $lightness: -10%)};
+  // --nav-hover: black;
+  // --nav-text: #{map.get($colors, 'white')};
+
+
+}

package/src/styles/themes/_light.scss

@@ -0,0 +1,23 @@
+@use 'sass:color';
+@use 'sass:map';
+@use './theme' as *;
+@use '../utilities/variables' as *;
+
+[data-theme="light"] {
+  // ... other light theme variables ...
+  @include generate-theme-colors('light');
+ 
+  $base-dark-color: map.get($colors, 'light');
+
+  --input-bg: #{color.scale($base-dark-color, $lightness: 20%)};
+
+  // --font-family-heading: var(--font-family-base);
+  // --text-primary: #{map.get($colors, 'dark')};
+  // --link-color: #{map.get($colors, 'primary')};
+  // --link-hover-color: #{color.scale(map.get($colors, 'primary'), $lightness: -10%)};
+  
+  // --nav-bg: #{map.get($colors, 'light')};
+  // // --nav-hover: #{color.scale(map.get($colors, 'light'), $lightness: -10%)};
+  // --nav-hover: white;
+  // --nav-text: #{map.get($colors, 'dark')};
+}

package/src/styles/themes/_theme.scss

@@ -0,0 +1,136 @@
+// _theme.scss
+@use 'sass:color';
+@use 'sass:map';
+@use '../utilities/variables' as *;
+
+
+// Color variations percentage
+$color-variations: (
+  'lighter': 15%,
+  'light': 10%,
+  'dark': -10%,
+  'darker': -15%
+);
+
+$opacity-levels: (
+  '10': 0.1,
+  '25': 0.25,
+  '50': 0.5,
+  '75': 0.75
+);
+
+
+@function theme-color($color-name, $variant: 'base') {
+  @return var(--#{$color-name}#{if($variant == 'base', '', '-' + $variant)});
+}
+
+@mixin generate-theme-colors($theme) {
+  @each $name, $color in $colors {
+    // Base color
+    --#{$name}: #{$color};
+    --#{$name}-rgb: #{color.channel($color, 'red')}, #{color.channel($color, 'green')}, #{color.channel($color, 'blue')};
+    
+    // Variations
+    @each $variant, $percentage in $color-variations {
+      --#{$name}-#{$variant}: #{if($theme == 'light',
+        color.scale($color, $lightness: $percentage),
+        color.scale($color, $lightness: $percentage * -1)
+      )};
+    }
+    
+    // Opacity variations
+    @each $level, $opacity in $opacity-levels {
+      --#{$name}-#{$level}: #{rgba($color, $opacity)};
+    }
+    
+    // State variations
+    --#{$name}-hover: var(--#{$name}-#{if($theme == 'light', 'dark', 'light')});
+    --#{$name}-active: var(--#{$name}-#{if($theme == 'light', 'darker', 'lighter')});
+    --#{$name}-disabled: var(--#{$name}-50);
+  }
+
+   // Background & Border
+   @if $theme == 'light' {
+    --bg-primary: var(--light);
+    --bg-secondary: #{color.scale(map.get($colors, 'light'), $lightness: -5%)};
+    --bg-tertiary: #{color.scale(map.get($colors, 'light'), $lightness: -10%)};
+    --border-color: #{rgba(map.get($colors, 'dark'), 0.1)};
+    --border-color-dark: #{rgba(map.get($colors, 'dark'), 0.2)};
+  } @else {
+    --bg-primary: var(--dark);
+    --bg-secondary: #{color.scale(map.get($colors, 'dark'), $lightness: 5%)};
+    --bg-tertiary: #{color.scale(map.get($colors, 'dark'), $lightness: 10%)};
+    --border-color: #{rgba(map.get($colors, 'light'), 0.07)};
+    --border-color-dark: #{rgba(map.get($colors, 'light'), 0.15)};
+  }
+
+    
+  // Text Colors
+  @if $theme == 'light' {
+    --text-primary: var(--dark);
+    --text-secondary: #{rgba(map.get($colors, 'dark'), 0.7)};
+    --text-tertiary: #{rgba(map.get($colors, 'dark'), 0.5)};
+    --text-disabled: #{rgba(map.get($colors, 'dark'), 0.3)};
+    --text-inverse: var(--light);
+  } @else {
+    --text-primary: var(--light);
+    --text-secondary: #{rgba(map.get($colors, 'light'), 0.7)};
+    --text-tertiary: #{rgba(map.get($colors, 'light'), 0.5)};
+    --text-disabled: #{rgba(map.get($colors, 'light'), 0.3)};
+    --text-inverse: var(--dark);
+  }
+
+
+  // Link Colors
+  --link-color: var(--primary);
+  --link-hover-color: #{color.scale(map.get($colors, 'primary'), $lightness: if($theme == 'light', -10%, 10%))};
+  --link-active-color: #{color.scale(map.get($colors, 'primary'), $lightness: if($theme == 'light', -20%, 20%))};
+  --link-visited-color: #{color.scale(map.get($colors, 'primary'), $saturation: -20%)};
+
+  // Navigation
+  --nav-bg: var(--bg-primary);
+  --nav-hover: var(--bg-secondary);
+  --nav-active: var(--bg-tertiary);
+  --nav-text: var(--text-primary);
+  --nav-text-hover: var(--primary);
+  --nav-border: var(--border-color);
+
+  // Tooltip
+  --tooltip-bg: var(--dark);
+  --tooltip-text: var(--light);
+  --tooltip-shadow-color: rgba(0,0,0,0.4);
+  --microtip-transition-duration: 0.518s;
+  --microtip-transition-delay: .2s;
+  --microtip-transition-easing: cubic-bezier(0.16, 1, 0.9, 1);
+  --microtip-font-size: 0.875rem;
+  --microtip-font-weight: 300;
+  --microtip-text-transform: none;
+
+  // Shadow
+  // --shadow-color: #{if($theme == 'light', '0,0,0', '255,255,255')};
+  // --shadow-opacity: #{if($theme == 'light', 0.1, 0.5)};
+}
+
+/**
+.btn-primary {
+  background-color: theme-color('primary');
+  
+  &:hover {
+    background-color: theme-color('primary', 'hover');
+  }
+  
+  &:disabled {
+    background-color: theme-color('primary', 'disabled');
+  }
+}
+
+.form-input {
+  border-color: var(--border-color);
+  color: var(--text-primary);
+  
+  &:focus {
+    border-color: theme-color('primary');
+    box-shadow: 0 0 0 4px theme-color('primary', '25');
+  }
+}
+ */