@rhavenside/baseline-ui 1.0.0

package/src/tokens/_spacing.scss

@@ -0,0 +1,31 @@
+// ============================================================================
+// Spacing Tokens
+// ============================================================================
+
+// Base spacing unit: 4px (0.25rem)
+$spacing-base: 0.25rem; // 4px
+
+// Spacing scale (8px base system)
+$spacing-xs: 0.25rem;   // 4px
+$spacing-sm: 0.5rem;    // 8px
+$spacing-md: 1rem;      // 16px
+$spacing-lg: 1.5rem;    // 24px
+$spacing-xl: 2rem;      // 32px
+$spacing-2xl: 3rem;     // 48px
+$spacing-3xl: 4rem;     // 64px
+$spacing-4xl: 6rem;     // 96px
+$spacing-5xl: 8rem;     // 128px
+
+// Export as CSS Custom Properties
+:root {
+  --spacing-xs: #{$spacing-xs};
+  --spacing-sm: #{$spacing-sm};
+  --spacing-md: #{$spacing-md};
+  --spacing-lg: #{$spacing-lg};
+  --spacing-xl: #{$spacing-xl};
+  --spacing-2xl: #{$spacing-2xl};
+  --spacing-3xl: #{$spacing-3xl};
+  --spacing-4xl: #{$spacing-4xl};
+  --spacing-5xl: #{$spacing-5xl};
+}
+

package/src/tokens/_tokens.scss

@@ -0,0 +1,14 @@
+// ============================================================================
+// Design Tokens - Main Export
+// ============================================================================
+
+@forward 'colors';
+@forward 'spacing';
+@forward 'typography';
+@forward 'borders';
+@forward 'shadows';
+@forward 'z-index';
+@forward 'transitions';
+@forward 'forms';
+@forward 'glassmorphism';
+

package/src/tokens/_transitions.scss

@@ -0,0 +1,42 @@
+// ============================================================================
+// Transition Tokens (Mechanical, Linear)
+// ============================================================================
+
+// Transition Durations (shorter, mechanical)
+$transition-duration-fast: 100ms;
+$transition-duration-base: 150ms;
+$transition-duration-slow: 200ms;
+$transition-duration-slower: 300ms;
+
+// Transition Timing Functions (all linear - mechanical)
+$transition-ease-linear: linear;
+$transition-ease-in: linear;
+$transition-ease-out: linear;
+$transition-ease-in-out: linear;
+
+// Common Transitions (all linear)
+$transition-base: all $transition-duration-base $transition-ease-linear;
+$transition-colors: color $transition-duration-base $transition-ease-linear, background-color $transition-duration-base $transition-ease-linear, border-color $transition-duration-base $transition-ease-linear;
+$transition-opacity: opacity $transition-duration-base $transition-ease-linear;
+$transition-transform: transform $transition-duration-base $transition-ease-linear;
+
+// Export as CSS Custom Properties
+:root {
+  // Durations
+  --transition-duration-fast: #{$transition-duration-fast};
+  --transition-duration-base: #{$transition-duration-base};
+  --transition-duration-slow: #{$transition-duration-slow};
+  --transition-duration-slower: #{$transition-duration-slower};
+
+  // Timing Functions (all linear)
+  --transition-ease-linear: #{$transition-ease-linear};
+  --transition-ease-in: #{$transition-ease-in};
+  --transition-ease-out: #{$transition-ease-out};
+  --transition-ease-in-out: #{$transition-ease-in-out};
+
+  // Common Transitions
+  --transition-base: #{$transition-base};
+  --transition-colors: #{$transition-colors};
+  --transition-opacity: #{$transition-opacity};
+  --transition-transform: #{$transition-transform};
+}

package/src/tokens/_typography.scss

@@ -0,0 +1,89 @@
+// ============================================================================
+// Typography Tokens
+// ============================================================================
+
+// Font Families
+$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", "Courier New", monospace;
+$font-family-serif: Georgia, "Times New Roman", Times, serif;
+
+// Font Sizes (Modular Scale: 1.125, 1.25, 1.5, 1.875, 2.25)
+$font-size-xs: 0.75rem;     // 12px
+$font-size-sm: 0.875rem;    // 14px
+$font-size-base: 1rem;      // 16px
+$font-size-lg: 1.125rem;    // 18px
+$font-size-xl: 1.25rem;      // 20px
+$font-size-2xl: 1.5rem;      // 24px
+$font-size-3xl: 1.875rem;    // 30px
+$font-size-4xl: 2.25rem;     // 36px
+$font-size-5xl: 3rem;        // 48px
+$font-size-6xl: 3.75rem;     // 60px
+
+// Line Heights
+$line-height-none: 1;
+$line-height-tight: 1.25;
+$line-height-snug: 1.375;
+$line-height-base: 1.5;
+$line-height-relaxed: 1.75;
+$line-height-loose: 2;
+
+// Font Weights
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extrabold: 800;
+
+// Letter Spacing
+$letter-spacing-tighter: -0.05em;
+$letter-spacing-tight: -0.025em;
+$letter-spacing-normal: 0;
+$letter-spacing-wide: 0.025em;
+$letter-spacing-wider: 0.05em;
+$letter-spacing-widest: 0.1em;
+
+// Export as CSS Custom Properties
+:root {
+  // Font Families
+  --font-family-base: #{$font-family-base};
+  --font-family-mono: #{$font-family-mono};
+  --font-family-serif: #{$font-family-serif};
+
+  // Font Sizes
+  --font-size-xs: #{$font-size-xs};
+  --font-size-sm: #{$font-size-sm};
+  --font-size-base: #{$font-size-base};
+  --font-size-lg: #{$font-size-lg};
+  --font-size-xl: #{$font-size-xl};
+  --font-size-2xl: #{$font-size-2xl};
+  --font-size-3xl: #{$font-size-3xl};
+  --font-size-4xl: #{$font-size-4xl};
+  --font-size-5xl: #{$font-size-5xl};
+  --font-size-6xl: #{$font-size-6xl};
+
+  // Line Heights
+  --line-height-none: #{$line-height-none};
+  --line-height-tight: #{$line-height-tight};
+  --line-height-snug: #{$line-height-snug};
+  --line-height-base: #{$line-height-base};
+  --line-height-relaxed: #{$line-height-relaxed};
+  --line-height-loose: #{$line-height-loose};
+
+  // Font Weights
+  --font-weight-light: #{$font-weight-light};
+  --font-weight-normal: #{$font-weight-normal};
+  --font-weight-medium: #{$font-weight-medium};
+  --font-weight-semibold: #{$font-weight-semibold};
+  --font-weight-bold: #{$font-weight-bold};
+  --font-weight-extrabold: #{$font-weight-extrabold};
+
+  // Letter Spacing
+  --letter-spacing-tighter: #{$letter-spacing-tighter};
+  --letter-spacing-tight: #{$letter-spacing-tight};
+  --letter-spacing-normal: #{$letter-spacing-normal};
+  --letter-spacing-wide: #{$letter-spacing-wide};
+  --letter-spacing-wider: #{$letter-spacing-wider};
+  --letter-spacing-widest: #{$letter-spacing-widest};
+}
+

package/src/tokens/_z-index.scss

@@ -0,0 +1,26 @@
+// ============================================================================
+// Z-Index Tokens (Layer System)
+// ============================================================================
+
+// Z-Index Layers
+$z-index-base: 0;
+$z-index-dropdown: 1000;
+$z-index-sticky: 1020;
+$z-index-fixed: 1030;
+$z-index-modal-backdrop: 1040;
+$z-index-modal: 1050;
+$z-index-popover: 1060;
+$z-index-tooltip: 1070;
+
+// Export as CSS Custom Properties
+:root {
+  --z-index-base: #{$z-index-base};
+  --z-index-dropdown: #{$z-index-dropdown};
+  --z-index-sticky: #{$z-index-sticky};
+  --z-index-fixed: #{$z-index-fixed};
+  --z-index-modal-backdrop: #{$z-index-modal-backdrop};
+  --z-index-modal: #{$z-index-modal};
+  --z-index-popover: #{$z-index-popover};
+  --z-index-tooltip: #{$z-index-tooltip};
+}
+

package/src/utilities/_accessibility.scss

@@ -0,0 +1,76 @@
+// ============================================================================
+// Accessibility Utilities
+// ============================================================================
+
+// Screen Reader Only
+.bl-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.bl-sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: inherit;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+// Skip Link
+.bl-skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  z-index: var(--z-index-tooltip);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--color-primary);
+  color: var(--color-text-inverse);
+  text-decoration: none;
+  border-radius: var(--border-radius-md);
+
+  &:focus {
+    top: var(--spacing-sm);
+    outline: 2px solid var(--color-border-focus);
+    outline-offset: 2px;
+  }
+}
+
+// Focus Visible (for keyboard navigation)
+.bl-focus-visible:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+// High Contrast Mode Support
+@media (prefers-contrast: high) {
+  * {
+    border-color: currentColor !important;
+  }
+
+  .bl-skip-link {
+    border: 2px solid currentColor;
+  }
+}
+
+// Reduced Motion
+@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;
+  }
+}
+

package/src/utilities/_animations.scss

@@ -0,0 +1,177 @@
+// ============================================================================
+// Animation Utilities
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+// Transition
+.bl-transition {
+  transition: var(--transition-base);
+}
+
+.bl-transition-colors {
+  transition: var(--transition-colors);
+}
+
+.bl-transition-opacity {
+  transition: var(--transition-opacity);
+}
+
+.bl-transition-transform {
+  transition: var(--transition-transform);
+}
+
+.bl-transition-none {
+  transition: none;
+}
+
+// Duration
+.bl-duration-fast {
+  transition-duration: var(--transition-duration-fast);
+}
+
+.bl-duration-base {
+  transition-duration: var(--transition-duration-base);
+}
+
+.bl-duration-slow {
+  transition-duration: var(--transition-duration-slow);
+}
+
+.bl-duration-slower {
+  transition-duration: var(--transition-duration-slower);
+}
+
+// Easing
+.bl-ease-linear {
+  transition-timing-function: var(--transition-ease-linear);
+}
+
+.bl-ease-in {
+  transition-timing-function: var(--transition-ease-in);
+}
+
+.bl-ease-out {
+  transition-timing-function: var(--transition-ease-out);
+}
+
+.bl-ease-in-out {
+  transition-timing-function: var(--transition-ease-in-out);
+}
+
+// Fade Animations
+@keyframes bl-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bl-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.bl-fade-in {
+  animation: bl-fade-in var(--transition-duration-base) var(--transition-ease-out);
+}
+
+.bl-fade-out {
+  animation: bl-fade-out var(--transition-duration-base) var(--transition-ease-out);
+}
+
+// Slide Animations
+@keyframes bl-slide-up {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes bl-slide-down {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes bl-slide-left {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes bl-slide-right {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.bl-slide-up {
+  animation: bl-slide-up var(--transition-duration-base) var(--transition-ease-out);
+}
+
+.bl-slide-down {
+  animation: bl-slide-down var(--transition-duration-base) var(--transition-ease-out);
+}
+
+.bl-slide-left {
+  animation: bl-slide-left var(--transition-duration-base) var(--transition-ease-out);
+}
+
+.bl-slide-right {
+  animation: bl-slide-right var(--transition-duration-base) var(--transition-ease-out);
+}
+
+// Spin Animation
+@keyframes bl-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.bl-animate-spin {
+  animation: bl-spin 1s linear infinite;
+}
+
+// Pulse Animation
+@keyframes bl-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.bl-animate-pulse {
+  animation: bl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+

package/src/utilities/_display.scss

@@ -0,0 +1,89 @@
+// ============================================================================
+// Display Utilities
+// ============================================================================
+
+.bl-d-none {
+  display: none;
+}
+
+.bl-d-inline {
+  display: inline;
+}
+
+.bl-d-inline-block {
+  display: inline-block;
+}
+
+.bl-d-block {
+  display: block;
+}
+
+.bl-d-table {
+  display: table;
+}
+
+.bl-d-table-row {
+  display: table-row;
+}
+
+.bl-d-table-cell {
+  display: table-cell;
+}
+
+.bl-d-flex {
+  display: flex;
+}
+
+.bl-d-inline-flex {
+  display: inline-flex;
+}
+
+.bl-d-grid {
+  display: grid;
+}
+
+.bl-d-inline-grid {
+  display: inline-grid;
+}
+
+// Responsive Display Utilities
+@media (min-width: 640px) {
+  .bl-d-sm-none { display: none; }
+  .bl-d-sm-inline { display: inline; }
+  .bl-d-sm-inline-block { display: inline-block; }
+  .bl-d-sm-block { display: block; }
+  .bl-d-sm-flex { display: flex; }
+  .bl-d-sm-inline-flex { display: inline-flex; }
+  .bl-d-sm-grid { display: grid; }
+}
+
+@media (min-width: 768px) {
+  .bl-d-md-none { display: none; }
+  .bl-d-md-inline { display: inline; }
+  .bl-d-md-inline-block { display: inline-block; }
+  .bl-d-md-block { display: block; }
+  .bl-d-md-flex { display: flex; }
+  .bl-d-md-inline-flex { display: inline-flex; }
+  .bl-d-md-grid { display: grid; }
+}
+
+@media (min-width: 1024px) {
+  .bl-d-lg-none { display: none; }
+  .bl-d-lg-inline { display: inline; }
+  .bl-d-lg-inline-block { display: inline-block; }
+  .bl-d-lg-block { display: block; }
+  .bl-d-lg-flex { display: flex; }
+  .bl-d-lg-inline-flex { display: inline-flex; }
+  .bl-d-lg-grid { display: grid; }
+}
+
+@media (min-width: 1280px) {
+  .bl-d-xl-none { display: none; }
+  .bl-d-xl-inline { display: inline; }
+  .bl-d-xl-inline-block { display: inline-block; }
+  .bl-d-xl-block { display: block; }
+  .bl-d-xl-flex { display: flex; }
+  .bl-d-xl-inline-flex { display: inline-flex; }
+  .bl-d-xl-grid { display: grid; }
+}
+

package/src/utilities/_position.scss

@@ -0,0 +1,105 @@
+// ============================================================================
+// Position Utilities
+// ============================================================================
+
+.bl-static {
+  position: static;
+}
+
+.bl-fixed {
+  position: fixed;
+}
+
+.bl-absolute {
+  position: absolute;
+}
+
+.bl-relative {
+  position: relative;
+}
+
+.bl-sticky {
+  position: sticky;
+}
+
+// Top, Right, Bottom, Left
+.bl-top-0 {
+  top: 0;
+}
+
+.bl-right-0 {
+  right: 0;
+}
+
+.bl-bottom-0 {
+  bottom: 0;
+}
+
+.bl-left-0 {
+  left: 0;
+}
+
+.bl-top-auto {
+  top: auto;
+}
+
+.bl-right-auto {
+  right: auto;
+}
+
+.bl-bottom-auto {
+  bottom: auto;
+}
+
+.bl-left-auto {
+  left: auto;
+}
+
+// Insets
+.bl-inset-0 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.bl-inset-auto {
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+}
+
+// Z-Index
+.bl-z-0 {
+  z-index: var(--z-index-base);
+}
+
+.bl-z-dropdown {
+  z-index: var(--z-index-dropdown);
+}
+
+.bl-z-sticky {
+  z-index: var(--z-index-sticky);
+}
+
+.bl-z-fixed {
+  z-index: var(--z-index-fixed);
+}
+
+.bl-z-modal-backdrop {
+  z-index: var(--z-index-modal-backdrop);
+}
+
+.bl-z-modal {
+  z-index: var(--z-index-modal);
+}
+
+.bl-z-popover {
+  z-index: var(--z-index-popover);
+}
+
+.bl-z-tooltip {
+  z-index: var(--z-index-tooltip);
+}
+