@nuvoui/core 0.2.1

package/src/styles/base/_base.scss

@@ -0,0 +1,75 @@
+@use 'sass:map';
+
+// Import variables
+@use '../utilities/variables' as *;
+
+// Base typography styles
+html {
+  font-size: 16px;
+  font-family: var(--font-family-base);
+}
+
+body {
+  font-family: var(--font-family-base);
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--text-primary);
+}
+
+// Headings
+h1, h2, h3, h4, h5, h6 {
+  margin-bottom: 0.5em;
+  font-family: var(--font-family-heading);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: map.get($font-sizes, '4xl');
+}
+
+h2 {
+  font-size: map.get($font-sizes, '3xl');
+}
+
+h3 {
+  font-size: map.get($font-sizes, '2xl');
+}
+
+h4 {
+  font-size: map.get($font-sizes, 'xl');
+}
+
+h5 {
+  font-size: map.get($font-sizes, 'lg');
+}
+
+h6 {
+  font-size: map.get($font-sizes, 'base');
+}
+
+// Paragraphs
+p {
+  margin-bottom: 1rem;
+}
+
+// Small text
+small {
+  font-size: map.get($font-sizes, 'sm');
+}
+
+// Links
+a {
+  color: var(--link-color);
+  transition: color 0.2s ease-in-out;
+
+  &:hover {
+    color: var(--link-hover-color);
+  }
+}
+
+// Lists
+ul, ol {
+  margin-bottom: 1rem;
+  padding-left: 2rem;
+}

package/src/styles/base/_reset.scss

@@ -0,0 +1,92 @@
+// Modern CSS Reset
+
+// Box sizing rules
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+// Remove default margin
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+// Set core body defaults
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+// Make images easier to work with
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+// Inherit fonts for inputs and buttons
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  transition: all 0.2s ease-in-out;
+  &:focus {
+      box-shadow: inset 0 0 7px 0px #60b0cd; /* Change this to your preferred color and width */
+      outline: 2px solid #40c1bf; /* Change this to your preferred color and width */
+  }
+}
+
+// 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;
+  }
+}
+
+// Remove list styles
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+// Set core root defaults
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+// Remove underline from links
+a {
+  text-decoration-skip-ink: auto;
+  text-decoration: none;
+  color: inherit;
+}
+
+// Make sure textareas without a rows attribute are not tiny
+textarea:not([rows]) {
+  min-height: 10em;
+}

package/src/styles/components/_button.scss

@@ -0,0 +1,247 @@
+// _button.scss
+@use 'sass:map';
+
+@use '../utilities/variables' as *;
+@use '../utilities/typography' as *;
+@use '../themes/theme' as *;
+
+// Define text size map
+$text-size-map: (
+  'xs': 0.75rem,
+  'sm': 0.875rem,
+  'md': 1rem,
+  'lg': 1.125rem,
+  'xl': 1.25rem
+);
+
+// Button Base Mixins
+@mixin btn-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
+
+  // Loading state
+  &.loading {
+    position: relative;
+    color: transparent !important;
+    pointer-events: none;
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: 1rem;
+      height: 1rem;
+      border: 1px solid;
+      border-radius: 50%;
+      border-right-color: transparent;
+      animation: spin 0.75s linear infinite;
+    }
+  }
+}
+
+// Button Variants
+@mixin btn-solid($color) {
+  background-color: theme-color($color);
+  color: white;//var(--text-inverse);
+
+  &:hover:not(:disabled) {
+    background-color: theme-color($color, 'hover');
+  }
+
+  &:active:not(:disabled) {
+    background-color: theme-color($color, 'active');
+  }
+
+  &:disabled {
+    background-color: theme-color($color, 'disabled');
+  }
+}
+
+@mixin btn-outline($color) {
+  background-color: transparent;
+  border-color: theme-color($color);
+  color: theme-color($color);
+
+  &:hover:not(:disabled) {
+    background-color: theme-color($color);
+    color: var(--text-inverse);
+  }
+
+  &:active:not(:disabled) {
+    background-color: theme-color($color, 'active');
+  }
+
+  &:disabled {
+    border-color: theme-color($color, 'disabled');
+    color: theme-color($color, 'disabled');
+  }
+}
+
+@mixin btn-ghost($color) {
+  background-color: transparent;
+  color: theme-color($color);
+
+  &:hover:not(:disabled) {
+    background-color: theme-color($color, '10');
+  }
+
+  &:active:not(:disabled) {
+    background-color: theme-color($color, '25');
+  }
+
+  &:disabled {
+    color: theme-color($color, 'disabled');
+  }
+}
+
+// Button Sizes
+@mixin btn-size($size) {
+  font-size: map.get($text-size-map, $size);
+  
+  $padding-map: (
+    'xs': 0.25rem 0.5rem,
+    'sm': 0.375rem 0.75rem,
+    'md': 0.5rem 1rem,
+    'lg': 0.75rem 1.5rem,
+    'xl': 1rem 2rem
+  );
+
+  padding: map.get($padding-map, $size);
+
+  .btn.icon {
+    $icon-sizes: (
+      'xs': 0.75rem,
+      'sm': 1rem,
+      'md': 1.25rem,
+      'lg': 1.5rem,
+      'xl': 1.75rem
+    );
+    
+    width: map.get($icon-sizes, $size);
+    height: map.get($icon-sizes, $size);
+  }
+}
+
+// Button Shapes
+@mixin btn-shape($shape) {
+  @if $shape == 'rounded' {
+    border-radius: 0.375rem;
+  } @else if $shape == 'pill' {
+    border-radius: 9999px;
+  } @else if $shape == 'square' {
+    border-radius: 0;
+  }
+}
+
+// Base Button Class
+.btn {
+  @include btn-base;
+  @include btn-size('md');
+  @include btn-shape('rounded');
+
+
+  // Outline variant
+  &.outline {
+    @include btn-outline('text-secondary'); // Default outline style
+    
+    // Color variants override
+    @each $name, $color in $colors {
+      &.#{$name} {
+        @include btn-outline($name);
+      }
+    }
+  }
+  
+  // Ghost variant
+  &.ghost {
+    @include btn-ghost('text-secondary'); // Default ghost style
+    
+    // Color variants override
+    @each $name, $color in $colors {
+      &.#{$name} {
+        @include btn-ghost($name);
+      }
+    }
+  }
+  
+  // Color variants for solid buttons
+  @each $name, $color in $colors {
+    &.#{$name} {
+      @include btn-solid($name);
+    }
+  }
+}
+
+
+// Sizes
+.btn.xs { @include btn-size('xs'); }
+.btn.sm { @include btn-size('sm'); }
+.btn.md { @include btn-size('md'); }
+.btn.lg { @include btn-size('lg'); }
+.btn.xl { @include btn-size('xl'); }
+
+// Shapes
+.btn.rounded { @include btn-shape('rounded'); }
+.btn.pill { @include btn-shape('pill'); }
+.btn.square { @include btn-shape('square'); }
+
+// Icon Only Buttons
+.btn.icon {
+  padding: 0.5rem;
+  
+  &.btn-xs { padding: 0.25rem; }
+  &.btn-sm { padding: 0.375rem; }
+  &.btn-lg { padding: 0.75rem; }
+  &.btn-xl { padding: 1rem; }
+}
+
+// Loading Animation
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/**
+
+
+<!-- Basic buttons -->
+<button class="btn primary">Primary</button>
+<button class="btn outline secondary">Secondary</button>
+<button class="btn ghost info">Info</button>
+
+<!-- Sizes -->
+<button class="btn primary xs">Extra Small</button>
+<button class="btn primary xl">Extra Large</button>
+
+<!-- Shapes -->
+<button class="btn primary pill">Pill Button</button>
+
+<!-- With Icons -->
+<button class="btn btn-primary">
+  <svg class="btn-icon"><!-- icon --></svg>
+  With Icon
+</button>
+
+<!-- Icon Only -->
+<button class="btn btn-primary btn-icon-only">
+  <svg class="btn-icon"><!-- icon --></svg>
+</button>
+
+<!-- Loading State -->
+<button class="btn btn-primary loading">Loading</button>
+
+<!-- Disabled State -->
+<button class="btn btn-primary" disabled>Disabled</button>
+
+*/

package/src/styles/components/_checkbox.scss

@@ -0,0 +1,23 @@
+// Base checkbox reset
+.checkbox {
+    @apply appearance-none cursor-pointer select-none;
+    @apply w-4 h-4 border-2 rounded;
+    @apply transition-all duration-200;
+    @apply focus-visible:outline-2 focus-visible:outline-offset-2;
+  
+    &:checked {
+      @apply bg-current border-current;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
+    }
+  
+    &:indeterminate {
+      @apply bg-current border-current;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 8a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 8z'/%3E%3C/svg%3E");
+    }
+  }
+  
+  // Size variants
+  .checkbox-sm { @apply w-3 h-3; }
+  .checkbox-md { @apply w-4 h-4; }
+  .checkbox-lg { @apply w-5 h-5; }
+  .checkbox-xl { @apply w-6 h-6; }

package/src/styles/components/_form.scss

@@ -0,0 +1,157 @@
+// _forms.scss
+@use 'sass:map';
+@use '../utilities/variables' as *;
+@use '../themes/theme' as Theme;
+
+// Form Container Mixins
+@mixin form-group {
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+
+@mixin form-inline {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+// Label Mixins
+@mixin form-label {
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: all 0.2s ease-in-out;
+  color: var(--text-secondary);
+  pointer-events: none;
+  font-size: 1rem;
+}
+
+@mixin form-label-float {
+  top: 0;
+  font-size: 0.875rem;
+  transform: translateY(-50%);
+  background: var(--bg-primary);
+  padding: 0 0.5rem;
+}
+
+// Input Mixins
+@mixin form-input {
+  width: 100%;
+  padding: 0.85rem;
+  border: 1px solid Theme.theme-color('border-color');
+  border-radius: 0.5rem;
+  background: Theme.theme-color('input-bg');
+  color: var(--text-primary);
+  font-size: 1rem;
+  transition: all 0.2s ease-in-out;
+  
+  &:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
+  }
+  
+  &:not(:placeholder-shown) + label {
+    @include form-label-float;
+  }
+  
+  &:focus + label {
+    @include form-label-float;
+    color: var(--primary);
+  }
+}
+
+// Validation Mixins
+@mixin form-valid {
+  border-color: var(--success);
+  
+  & + label {
+    color: var(--success);
+  }
+}
+
+@mixin form-invalid {
+  border-color: var(--danger);
+  
+  & + label {
+    color: var(--danger);
+  }
+}
+
+// Select Mixins
+@mixin form-select {
+  @include form-input;
+  appearance: none;
+  background-image: url("data:image/svg+xml,...");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  padding-right: 2.5rem;
+}
+
+// Checkbox & Radio Mixins
+@mixin form-check {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+@mixin form-check-input {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--border-color);
+  border-radius: 0.25rem;
+  margin-right: 0.5rem;
+  cursor: pointer;
+  
+  &:checked {
+    background-color: var(--primary);
+    border-color: var(--primary);
+    background-image: url("data:image/svg+xml,...");
+  }
+}
+
+// Classes
+.form-group { @include form-group; }
+.form-inline { @include form-inline; }
+.form-label { @include form-label; }
+.form-input { @include form-input; }
+.form-select { @include form-select; }
+.form-check { @include form-check; }
+.form-check-input { @include form-check-input; }
+
+// Validation Classes
+.is-valid { @include form-valid; }
+.is-invalid { @include form-invalid; }
+
+// Sizes
+@for $i from 0 through 5 {
+  .form-input-#{$i} {
+    @include form-input;
+    padding: $i;
+  }
+}
+
+// Dark Mode Support
+// [data-theme="dark"] {
+//   .form-input,
+//   .form-select {
+//     background-color: var(--bg-secondary);
+//     border-color: var(--border-color-dark);
+    
+//     &:focus {
+//       border-color: var(--primary-dark);
+//     }
+//   }
+// }
+
+// Accessibility
+@media (prefers-reduced-motion: reduce) {
+  .form-input,
+  .form-label {
+    transition: none;
+  }
+}