@quazardous/qdadm 1.19.3

package/src/styles/_variables.scss

@@ -0,0 +1,224 @@
+/**
+ * qdadm - Design System Variables
+ *
+ * Centralized SCSS variables for the entire framework.
+ * Import this file in any component that needs access to these values:
+ *   @use 'qdadm/styles/variables' as *;
+ *
+ * Note: CSS custom properties (--fad-*) are still generated for runtime theming.
+ * SCSS variables are for compile-time values (breakpoints, calculations, mixins).
+ */
+
+// =============================================================================
+// COLORS
+// =============================================================================
+// Note: Color values use CSS custom properties for runtime theming.
+// These SCSS variables are for reference/documentation only.
+
+// Primary brand color
+$color-primary: var(--p-primary-color) !default;
+$color-primary-hover: var(--p-primary-600) !default;
+
+// Status colors
+$color-success: var(--p-green-500) !default;
+$color-warning: var(--p-orange-500) !default;
+$color-danger: var(--p-red-500) !default;
+$color-info: var(--p-blue-500) !default;
+
+// =============================================================================
+// TYPOGRAPHY
+// =============================================================================
+// Modern, clean typography inspired by VSCode/Material Design.
+// Lighter weights and tighter sizes for a refined look.
+
+// Font family - Inter for modern UI, system fonts as fallback
+$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !default;
+$font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace !default;
+
+// Font sizes (rem-based for accessibility)
+// Modern compact scale - readable but efficient
+$font-size-2xs: 0.6875rem !default; // 11px - Micro text (badges, version)
+$font-size-xs: 0.75rem !default;    // 12px - Small text, section titles
+$font-size-sm: 0.875rem !default;   // 14px - Nav items, secondary text
+$font-size-md: 0.9375rem !default;  // 15px - Body text
+$font-size-lg: 1rem !default;       // 16px - Headings
+$font-size-xl: 1.125rem !default;   // 18px - Large headings
+$font-size-2xl: 1.25rem !default;   // 20px - Page titles
+
+// Font weights - prefer lighter weights for modern look
+$font-weight-light: 300 !default;     // Light text
+$font-weight-normal: 400 !default;    // Body text
+$font-weight-medium: 500 !default;    // Emphasized text
+$font-weight-semibold: 600 !default;  // Headings (use sparingly)
+$font-weight-bold: 700 !default;      // Strong emphasis (rare)
+
+// Line heights
+$line-height-tight: 1.25 !default;
+$line-height-normal: 1.5 !default;
+$line-height-relaxed: 1.75 !default;
+
+// =============================================================================
+// SPACING
+// =============================================================================
+// Compact spacing scale for modern UI.
+// More economical use of space, similar to VSCode/IDE density.
+
+$space-2xs: 0.125rem !default; // 2px  - Micro spacing
+$space-xs: 0.25rem !default;   // 4px  - Tight spacing (inline elements)
+$space-sm: 0.375rem !default;  // 6px  - Small gaps (compact)
+$space-md: 0.75rem !default;   // 12px - Default spacing (reduced from 16px)
+$space-lg: 1rem !default;      // 16px - Section spacing
+$space-xl: 1.5rem !default;    // 24px - Large sections
+$space-2xl: 2rem !default;     // 32px - Page-level spacing
+
+// =============================================================================
+// BORDERS & RADIUS
+// =============================================================================
+
+$border-width: 1px !default;
+$border-color: var(--p-surface-200) !default;
+
+$radius-sm: 0.25rem !default;   // 4px  - Subtle rounding
+$radius-md: 0.375rem !default;  // 6px  - Inputs, buttons
+$radius-lg: 0.5rem !default;    // 8px  - Cards, modals
+$radius-xl: 0.75rem !default;   // 12px - Large cards
+$radius-full: 9999px !default;  // Fully rounded (pills, avatars)
+
+// =============================================================================
+// SHADOWS
+// =============================================================================
+
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
+$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !default;
+$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !default;
+$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !default;
+
+// =============================================================================
+// TRANSITIONS
+// =============================================================================
+// Snappy transitions for responsive feel.
+// Modern UIs use shorter durations - instant feedback matters.
+
+$transition-instant: 50ms ease !default;  // Near-instant (active states)
+$transition-fast: 100ms ease !default;    // Micro-interactions (hover, focus)
+$transition-normal: 150ms ease !default;  // Standard transitions
+$transition-slow: 200ms ease !default;    // Larger animations (modals, drawers)
+
+// =============================================================================
+// Z-INDEX SCALE
+// =============================================================================
+// Layering system to ensure proper stacking.
+
+$z-dropdown: 1000 !default;       // Dropdowns, selects
+$z-sticky: 1020 !default;         // Sticky headers
+$z-fixed: 1030 !default;          // Fixed elements
+$z-modal-backdrop: 1040 !default; // Modal backdrop
+$z-modal: 1050 !default;          // Modal content
+$z-popover: 1060 !default;        // Popovers, tooltips
+$z-tooltip: 1070 !default;        // Top-level tooltips
+
+// =============================================================================
+// LAYOUT - SIDEBAR
+// =============================================================================
+// Compact sidebar dimensions for modern admin layout.
+// Inspired by VSCode's slim sidebar proportions.
+
+$sidebar-width: 15rem !default;           // 240px - Desktop sidebar
+$sidebar-width-tablet: 13rem !default;    // 208px - Tablet sidebar width (768-1023px)
+$sidebar-width-collapsed: 2.5rem !default; // 40px  - Collapsed sidebar (icon-only)
+
+// Header
+$header-height: 2.75rem !default;  // 44px - Mobile header height (compact)
+
+// Content
+$content-max-width: 87.5rem !default;  // 1400px - Maximum content width
+
+// =============================================================================
+// LAYOUT - NAVIGATION
+// =============================================================================
+// Navigation item sizing - readable but compact.
+
+$nav-item-height: 2rem !default;       // 32px - Nav item height
+$nav-item-padding-x: 0.75rem !default; // 12px - Horizontal padding
+$nav-item-padding-y: 0.5rem !default;  // 8px - Vertical padding
+$nav-icon-size: 1rem !default;         // 16px - Icon size
+$nav-section-gap: 0.5rem !default;     // 8px - Gap between sections
+
+// =============================================================================
+// BREAKPOINTS
+// =============================================================================
+// Desktop-first breakpoint system (max-width queries).
+// Usage: @include tablet { ... }
+
+$bp-desktop-lg: 1400px !default;  // Large desktop (wide monitors)
+$bp-desktop: 1200px !default;     // Standard desktop
+$bp-tablet-lg: 1024px !default;   // Large tablet / small laptop
+$bp-tablet: 768px !default;       // Tablet portrait
+$bp-mobile-lg: 576px !default;    // Large mobile (landscape)
+$bp-mobile: 480px !default;       // Standard mobile
+
+// Sidebar behavior thresholds
+$bp-sidebar-collapse: $bp-tablet-lg !default;  // Sidebar collapses below this
+$bp-sidebar-hidden: $bp-tablet !default;       // Sidebar becomes drawer below this
+
+// =============================================================================
+// BREAKPOINT MIXINS
+// =============================================================================
+// Desktop-first media query mixins (max-width).
+// Usage in components:
+//   @use 'qdadm/styles/variables' as *;
+//   .sidebar { @include tablet { width: 60px; } }
+
+@mixin desktop-lg {
+  @media (max-width: #{$bp-desktop-lg - 1px}) { @content; }
+}
+
+@mixin desktop {
+  @media (max-width: #{$bp-desktop - 1px}) { @content; }
+}
+
+@mixin tablet-lg {
+  @media (max-width: #{$bp-tablet-lg - 1px}) { @content; }
+}
+
+@mixin tablet {
+  @media (max-width: #{$bp-tablet - 1px}) { @content; }
+}
+
+@mixin mobile-lg {
+  @media (max-width: #{$bp-mobile-lg - 1px}) { @content; }
+}
+
+@mixin mobile {
+  @media (max-width: #{$bp-mobile - 1px}) { @content; }
+}
+
+// Utility mixins for visibility
+@mixin hide-below($bp) {
+  @media (max-width: #{$bp - 1px}) { display: none !important; }
+}
+
+@mixin show-below($bp) {
+  display: none !important;
+  @media (max-width: #{$bp - 1px}) { display: block !important; }
+}
+
+// Sidebar-specific mixins
+@mixin sidebar-collapsed {
+  @media (max-width: #{$bp-sidebar-collapse - 1px}) { @content; }
+}
+
+@mixin sidebar-hidden {
+  @media (max-width: #{$bp-sidebar-hidden - 1px}) { @content; }
+}
+
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+
+/// Convert pixel value to rem
+/// @param {Number} $px - Pixel value
+/// @return {Number} - Rem value (base 16px)
+@function px-to-rem($px) {
+  @return ($px / 16) * 1rem;
+}

package/src/styles/index.scss

@@ -0,0 +1,38 @@
+/**
+ * qdadm - Styles Entry Point
+ *
+ * Import this file in your main.js:
+ *   import 'qdadm/styles'
+ *
+ * Or import individual partials:
+ *   @use 'qdadm/styles/variables' as *;
+ */
+
+// Design tokens (CSS custom properties)
+@use './theme/tokens';
+
+// Theme utilities and components
+@use './theme/utilities';
+@use './theme/components';
+
+// Main framework styles
+@use './main';
+@use './forms';
+@use './stats';
+@use './states';
+@use './lists';
+@use './filter-bar';
+@use './helpers';
+
+// Component-specific styles
+@use './alerts';
+@use './buttons';
+@use './cards';
+@use './code';
+@use './dialogs';
+@use './markdown';
+@use './show-pages';
+@use './sidebar';
+
+// Responsive styles (must be last for specificity)
+@use './responsive';

package/src/styles/theme/_components.scss

@@ -0,0 +1,331 @@
+/**
+ * Component Styles
+ *
+ * Reusable component classes that can be used directly in templates
+ * or as base styles for Vue components.
+ */
+
+@use '../variables' as *;
+
+// =============================================================================
+// Cards
+// =============================================================================
+
+.fad-card {
+  background: var(--fad-surface-card);
+  border: $border-width solid var(--fad-border-color);
+  border-radius: $radius-lg;
+  padding: $space-lg;
+}
+
+.fad-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $space-md;
+  padding-bottom: $space-md;
+  border-bottom: $border-width solid var(--fad-border-color);
+}
+
+.fad-card-title {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-semibold;
+  color: var(--fad-text-primary);
+  margin: 0;
+}
+
+.fad-card-body {
+  color: var(--fad-text-primary);
+}
+
+.fad-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: $space-sm;
+  margin-top: $space-md;
+  padding-top: $space-md;
+  border-top: $border-width solid var(--fad-border-color);
+}
+
+// =============================================================================
+// Form Elements
+// =============================================================================
+
+.fad-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: $space-sm;
+  margin-bottom: $space-lg;
+}
+
+.fad-form-label {
+  font-weight: $font-weight-medium;
+  color: var(--fad-text-primary);
+  font-size: $font-size-sm;
+}
+
+.fad-form-label-required::after {
+  content: " *";
+  color: var(--fad-danger);
+}
+
+.fad-form-help {
+  font-size: $font-size-xs;
+  color: var(--fad-text-secondary);
+}
+
+.fad-form-error {
+  font-size: $font-size-xs;
+  color: var(--fad-danger);
+}
+
+.fad-form-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: $space-md;
+}
+
+.fad-form-section-title {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-semibold;
+  color: var(--fad-text-primary);
+  margin: $space-xl 0 $space-md 0;
+  padding-bottom: $space-sm;
+  border-bottom: $border-width solid var(--fad-border-color);
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+// =============================================================================
+// Form Field States
+// =============================================================================
+
+.fad-form-field--dirty {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: -8px;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: var(--fad-warning);
+    border-radius: $radius-full;
+  }
+}
+
+.fad-form-field--error .fad-form-label {
+  color: var(--fad-danger);
+}
+
+// =============================================================================
+// Page Header
+// =============================================================================
+
+.fad-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $space-lg;
+  padding-bottom: $space-md;
+}
+
+.fad-page-title {
+  font-size: $font-size-2xl;
+  font-weight: $font-weight-semibold;
+  color: var(--fad-text-primary);
+  margin: 0;
+}
+
+.fad-page-actions {
+  display: flex;
+  gap: $space-sm;
+}
+
+// =============================================================================
+// Empty State
+// =============================================================================
+
+.fad-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $space-2xl $space-md;
+  text-align: center;
+  color: var(--fad-text-secondary);
+}
+
+.fad-empty-state-icon {
+  font-size: 3rem;
+  opacity: 0.5;
+  margin-bottom: $space-md;
+}
+
+.fad-empty-state-title {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-medium;
+  color: var(--fad-text-primary);
+  margin: 0 0 $space-sm 0;
+}
+
+.fad-empty-state-description {
+  font-size: $font-size-sm;
+  max-width: 400px;
+}
+
+// =============================================================================
+// Loading State
+// =============================================================================
+
+.fad-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $space-2xl;
+}
+
+.fad-loading-spinner {
+  animation: fad-spin 1s linear infinite;
+}
+
+@keyframes fad-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+// =============================================================================
+// Status Badges
+// =============================================================================
+
+.fad-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: $space-xs $space-sm;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-medium;
+  border-radius: $radius-full;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+
+  &--success {
+    background: var(--p-green-100);
+    color: var(--p-green-700);
+  }
+
+  &--warning {
+    background: var(--p-orange-100);
+    color: var(--p-orange-700);
+  }
+
+  &--danger {
+    background: var(--p-red-100);
+    color: var(--p-red-700);
+  }
+
+  &--info {
+    background: var(--p-blue-100);
+    color: var(--p-blue-700);
+  }
+
+  &--neutral {
+    background: var(--p-surface-100);
+    color: var(--p-surface-600);
+  }
+}
+
+// =============================================================================
+// Tabs (for form tabs)
+// =============================================================================
+
+.fad-tabs {
+  display: flex;
+  gap: $space-xs;
+  border-bottom: $border-width solid var(--fad-border-color);
+  margin-bottom: $space-lg;
+}
+
+.fad-tab {
+  display: flex;
+  align-items: center;
+  gap: $space-xs;
+  padding: $space-sm $space-md;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  color: var(--fad-text-secondary);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all $transition-fast;
+  margin-bottom: -1px;
+
+  &:hover {
+    color: var(--fad-text-primary);
+  }
+
+  &--active {
+    color: var(--fad-primary);
+    border-bottom-color: var(--fad-primary);
+  }
+}
+
+.fad-tab-count {
+  background: var(--p-surface-100);
+  color: var(--fad-text-secondary);
+  padding: 0.125rem 0.375rem;
+  border-radius: $radius-full;
+  font-size: $font-size-xs;
+
+  .fad-tab--active & {
+    background: var(--p-primary-100);
+    color: var(--fad-primary);
+  }
+}
+
+// =============================================================================
+// Page Navigation (breadcrumb + navlinks)
+// =============================================================================
+
+.fad-page-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $space-sm;
+}
+
+.fad-page-nav-breadcrumb {
+  flex: 1;
+}
+
+.fad-page-nav-links {
+  display: flex;
+  align-items: center;
+  gap: $space-sm;
+  font-size: $font-size-sm;
+}
+
+.fad-page-nav-separator {
+  color: var(--fad-text-secondary);
+}
+
+.fad-page-nav-link {
+  color: var(--fad-primary);
+  text-decoration: none;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: var(--fad-primary-hover);
+    text-decoration: underline;
+  }
+
+  &--active {
+    color: var(--fad-text-primary);
+    font-weight: $font-weight-medium;
+    pointer-events: none;
+  }
+}

package/src/styles/theme/_index.scss

@@ -0,0 +1,10 @@
+/**
+ * qdadm Design System - Theme
+ *
+ * Import this file to get all theme styles.
+ * Use the fad-* classes in your components.
+ */
+
+@use 'tokens';
+@use 'utilities';
+@use 'components';