coursecode 0.1.0

package/framework/css/utilities/accessibility-utils.css

@@ -0,0 +1,59 @@
+/* ============================================================================
+   UTILITIES - ACCESSIBILITY & UTILITIES
+   ============================================================================
+   
+   PURPOSE: Accessibility utilities and common utility patterns
+   
+   INCLUDES:
+   - Screen reader only content (.sr-only)
+   - Missing alt text warning styling
+   - Text utility classes
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   
+   USED BY: All components for accessibility enhancements
+   
+   ============================================================================ */
+
+/* Modern Accessibility Features */
+img[alt=""] {
+  outline: 2px dashed var(--color-warning);
+  position: relative;
+}
+
+img[alt=""]::after {
+  content: '⚠️ Missing alt text';
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background: var(--color-warning);
+  color: var(--text-primary);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Modern Screen Reader Only Content */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Text utilities */
+.text-muted {
+  color: var(--text-muted);
+}
+
+.text-primary {
+  color: var(--text-primary);
+}

package/framework/css/utilities/animations.css

@@ -0,0 +1,419 @@
+/* ============================================================================
+   ANIMATION UTILITIES - Entrance, attention, and micro-interaction animations
+   ============================================================================
+   
+   PURPOSE: Utility classes for adding animations to elements
+   
+   INCLUDES:
+   - Entrance animations (fade, slide, scale)
+   - Attention animations (pulse, bounce, wiggle, glow)
+   - Animation delay utilities for staggering
+   - Reduced motion support
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for animation timing tokens)
+   
+   USAGE:
+   - Add animation classes to elements for entrance effects
+   - Use delay utilities for staggered animations
+   - Combine with .animate-on-visible for scroll-triggered animations
+   
+   ACCESSIBILITY:
+   - All animations respect prefers-reduced-motion
+   - Animations are subtle and non-distracting
+   
+   ============================================================================ */
+
+/* ========================================
+   KEYFRAME DEFINITIONS
+   ======================================== */
+
+/* Fade In */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Fade Up - Fade in while sliding up */
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Fade Down - Fade in while sliding down */
+@keyframes fadeDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Slide Left - Slide in from right */
+@keyframes slideLeft {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Slide Right - Slide in from left */
+@keyframes slideRight {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Scale In - Scale up from small */
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Pop - Quick pop-in effect with overshoot */
+@keyframes pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  70% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Pulse - Gentle pulsing for attention */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+/* Bounce - Bouncing effect */
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  25% {
+    transform: translateY(-8px);
+  }
+  50% {
+    transform: translateY(0);
+  }
+  75% {
+    transform: translateY(-4px);
+  }
+}
+
+/* Wiggle - Side-to-side shake */
+@keyframes wiggle {
+  0%, 100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-3deg);
+  }
+  75% {
+    transform: rotate(3deg);
+  }
+}
+
+/* Glow - Glowing shadow effect */
+@keyframes glow {
+  0%, 100% {
+    box-shadow: 0 0 5px var(--color-primary-alpha-20);
+  }
+  50% {
+    box-shadow: 0 0 20px var(--color-primary-alpha-40), 0 0 30px var(--color-primary-alpha-20);
+  }
+}
+
+/* Spin - Continuous rotation */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+/* ========================================
+   ENTRANCE ANIMATION UTILITIES
+   ======================================== */
+
+.animate-fade-in {
+  animation: fadeIn var(--animation-duration-normal) var(--animation-easing-default) both;
+}
+
+.animate-fade-up {
+  animation: fadeUp var(--animation-duration-normal) var(--animation-easing-default) both;
+}
+
+.animate-fade-down {
+  animation: fadeDown var(--animation-duration-normal) var(--animation-easing-default) both;
+}
+
+.animate-slide-left {
+  animation: slideLeft var(--animation-duration-normal) var(--animation-easing-default) both;
+}
+
+.animate-slide-right {
+  animation: slideRight var(--animation-duration-normal) var(--animation-easing-default) both;
+}
+
+.animate-scale-in {
+  animation: scaleIn var(--animation-duration-normal) var(--animation-easing-default) both;
+}
+
+.animate-pop {
+  animation: pop var(--animation-duration-normal) var(--animation-easing-bounce) both;
+}
+
+
+/* ========================================
+   ATTENTION ANIMATION UTILITIES
+   ======================================== */
+
+.animate-pulse {
+  animation: pulse 2s var(--animation-easing-default) infinite;
+}
+
+.animate-bounce {
+  animation: bounce 1s var(--animation-easing-default) infinite;
+}
+
+.animate-wiggle {
+  animation: wiggle 0.5s var(--animation-easing-default) infinite;
+}
+
+.animate-glow {
+  animation: glow 2s var(--animation-easing-default) infinite;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+
+/* ========================================
+   ANIMATION DELAY UTILITIES
+   For staggered animations
+   ======================================== */
+
+.delay-100 {
+  animation-delay: 100ms;
+}
+
+.delay-200 {
+  animation-delay: 200ms;
+}
+
+.delay-300 {
+  animation-delay: 300ms;
+}
+
+.delay-400 {
+  animation-delay: 400ms;
+}
+
+.delay-500 {
+  animation-delay: 500ms;
+}
+
+.delay-700 {
+  animation-delay: 700ms;
+}
+
+.delay-1000 {
+  animation-delay: 1000ms;
+}
+
+
+/* ========================================
+   ANIMATION DURATION MODIFIERS
+   ======================================== */
+
+.animate-fast {
+  animation-duration: var(--animation-duration-fast);
+}
+
+.animate-slow {
+  animation-duration: var(--animation-duration-slow);
+}
+
+
+/* ========================================
+   ANIMATION PLAY STATE
+   ======================================== */
+
+.animate-paused {
+  animation-play-state: paused;
+}
+
+.animate-running {
+  animation-play-state: running;
+}
+
+
+/* ========================================
+   SCROLL-TRIGGERED ANIMATIONS
+   Elements start hidden and animate when visible
+   ======================================== */
+
+/* Initial hidden state for scroll-triggered animations */
+.animate-on-visible {
+  opacity: 0;
+}
+
+.animate-on-visible.animate-fade-up {
+  transform: translateY(20px);
+}
+
+.animate-on-visible.animate-fade-down {
+  transform: translateY(-20px);
+}
+
+.animate-on-visible.animate-slide-left {
+  transform: translateX(30px);
+}
+
+.animate-on-visible.animate-slide-right {
+  transform: translateX(-30px);
+}
+
+.animate-on-visible.animate-scale-in {
+  transform: scale(0.9);
+}
+
+/* When visible (class added by JS intersection observer) */
+.animate-on-visible.is-visible {
+  opacity: 1;
+  transform: none;
+  transition: opacity var(--animation-duration-normal) var(--animation-easing-default),
+              transform var(--animation-duration-normal) var(--animation-easing-default);
+}
+
+
+/* ========================================
+   HOVER ANIMATION UTILITIES
+   Apply animation on hover
+   ======================================== */
+
+.hover-bounce:hover {
+  animation: bounce 0.5s var(--animation-easing-default);
+}
+
+.hover-wiggle:hover {
+  animation: wiggle 0.3s var(--animation-easing-default);
+}
+
+.hover-pop:hover {
+  animation: pop 0.3s var(--animation-easing-bounce);
+}
+
+.hover-glow:hover {
+  animation: glow 0.5s var(--animation-easing-default);
+}
+
+/* Scale on hover (no animation, just transition) */
+.hover-scale {
+  transition: transform var(--transition-fast);
+}
+
+.hover-scale:hover {
+  transform: scale(1.05);
+}
+
+/* Lift on hover with shadow */
+.hover-lift {
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.hover-lift:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+
+/* ========================================
+   REDUCED MOTION SUPPORT
+   Respect user preferences for reduced motion
+   ======================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  /* Disable all animations */
+  .animate-fade-in,
+  .animate-fade-up,
+  .animate-fade-down,
+  .animate-slide-left,
+  .animate-slide-right,
+  .animate-scale-in,
+  .animate-pop,
+  .animate-pulse,
+  .animate-bounce,
+  .animate-wiggle,
+  .animate-glow,
+  .animate-spin,
+  .hover-bounce:hover,
+  .hover-wiggle:hover,
+  .hover-pop:hover,
+  .hover-glow:hover {
+    animation: none;
+  }
+  
+  /* Keep elements visible but without motion */
+  .animate-on-visible,
+  .animate-on-visible.is-visible {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  
+  /* Disable hover transforms */
+  .hover-scale,
+  .hover-lift {
+    transition: none;
+  }
+  
+  .hover-scale:hover,
+  .hover-lift:hover {
+    transform: none;
+  }
+}

package/framework/css/utilities/borders.css

@@ -0,0 +1,72 @@
+/* ============================================================================
+   BORDER UTILITIES - Border styling and radius classes
+   ============================================================================
+   
+   PURPOSE: Utility classes for borders and border radius
+   
+   INCLUDES:
+   - Border width classes
+   - Border color classes
+   - Border radius classes
+   - Left border accent classes
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for color and radius variables)
+   
+   USAGE:
+   <div class="border rounded">Basic border with rounded corners</div>
+   <div class="border-2 border-primary">Thick primary border</div>
+   <div class="border-accent-left">Left accent border</div>
+   
+   ============================================================================ */
+
+/* Border Utilities */
+.border { border: 1px solid var(--color-gray-300); }
+.border-2 { border: 2px solid var(--color-gray-300); }
+.border-primary { border-color: var(--color-primary); }
+.border-secondary { border-color: var(--color-secondary); }
+.border-accent { border-color: var(--color-accent); }
+
+.rounded-sm { border-radius: var(--radius-sm); }
+.rounded { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-xl { border-radius: var(--radius-xl); }
+.rounded-full { border-radius: var(--radius-full); }
+
+/* Shadow Utilities */
+.shadow-sm { box-shadow: var(--shadow-sm); }
+.shadow { box-shadow: var(--shadow-md); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+.shadow-xl { box-shadow: var(--shadow-xl); }
+.shadow-none { box-shadow: none; }
+
+/* Border Utility Classes - Reusable left border accents */
+.border-accent-left {
+  border-left: 4px solid var(--color-accent);
+}
+
+.border-warning-left {
+  border-left: 4px solid var(--color-warning);
+}
+
+.border-info-left {
+  border-left: 4px solid var(--color-info);
+}
+
+.border-secondary-left {
+  border-left: 4px solid var(--color-secondary);
+}
+
+.border-primary-left {
+  border-left: 4px solid var(--color-primary);
+}
+
+/* Directional borders */
+.border-bottom {
+  border-bottom: 1px solid var(--color-gray-300);
+}
+
+.border-l-4 {
+  border-left: 4px solid var(--color-gray-300);
+}

package/framework/css/utilities/colors.css

@@ -0,0 +1,76 @@
+/* ============================================================================
+   COLOR UTILITIES - Text and background color classes
+   ============================================================================
+   
+   PURPOSE: Utility classes for applying colors
+   
+   INCLUDES:
+   - Text colors (brand and semantic colors)
+   - Background colors
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for color variables)
+   
+   USAGE:
+   <p class="text-primary">Primary colored text</p>
+   <div class="bg-accent">Accent background</div>
+   <span class="text-muted">Muted text</span>
+   
+   ============================================================================ */
+
+/* Color Utilities - Text (semantic) */
+.text-primary { color: var(--color-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-accent { color: var(--color-accent); }
+.text-success { color: var(--color-success-text); }
+.text-warning { color: var(--color-warning-text); }
+.text-danger { color: var(--color-danger-text); }
+.text-info { color: var(--color-info-text); }
+.text-muted { color: var(--text-muted); }
+.text-body { color: var(--text-body); }
+.text-white { color: var(--color-white); }
+.text-dark { color: var(--color-gray-900); }
+.text-inherit { color: inherit; }
+
+/* Color Utilities - Text (gray scale) */
+.text-gray-50 { color: var(--color-gray-50); }
+.text-gray-100 { color: var(--color-gray-100); }
+.text-gray-200 { color: var(--color-gray-200); }
+.text-gray-300 { color: var(--color-gray-300); }
+.text-gray-400 { color: var(--color-gray-400); }
+.text-gray-500 { color: var(--color-gray-500); }
+.text-gray-600 { color: var(--color-gray-600); }
+.text-gray-700 { color: var(--color-gray-700); }
+.text-gray-800 { color: var(--color-gray-800); }
+.text-gray-900 { color: var(--color-gray-900); }
+
+/* Color Utilities - Background (semantic) */
+.bg-primary { background: var(--color-primary); }
+.bg-secondary { background: var(--color-secondary); }
+.bg-accent { background: var(--color-accent); }
+.bg-success { background: var(--color-success); }
+.bg-warning { background: var(--color-warning); }
+.bg-danger { background: var(--color-danger); }
+.bg-info { background: var(--color-info); }
+.bg-white { background: var(--color-white); }
+
+/* Color Utilities - Background (gray scale) */
+.bg-gray-50 { background: var(--color-gray-50); }
+.bg-gray-100 { background: var(--color-gray-100); }
+.bg-gray-200 { background: var(--color-gray-200); }
+.bg-gray-300 { background: var(--color-gray-300); }
+.bg-gray-400 { background: var(--color-gray-400); }
+.bg-gray-500 { background: var(--color-gray-500); }
+.bg-gray-600 { background: var(--color-gray-600); }
+.bg-gray-700 { background: var(--color-gray-700); }
+.bg-gray-800 { background: var(--color-gray-800); }
+.bg-gray-900 { background: var(--color-gray-900); }
+
+/* Subtle Background Utilities - Light tinted backgrounds for semantic colors */
+.bg-primary-subtle { background: var(--color-primary-light); }
+.bg-secondary-subtle { background: var(--color-secondary-light); }
+.bg-accent-subtle { background: var(--color-accent-light); }
+.bg-success-subtle { background: var(--color-success-light); }
+.bg-warning-subtle { background: var(--color-warning-light); }
+.bg-danger-subtle { background: var(--color-danger-light); }
+.bg-info-subtle { background: var(--color-info-light); }

package/framework/css/utilities/container.css

@@ -0,0 +1,46 @@
+/* ============================================================================
+   CONTAINER UTILITIES - Content width constraints
+   ============================================================================
+   
+   PURPOSE: Utility classes for constraining content width and centering
+   
+   INCLUDES:
+   - .container (constrained width, centered)
+   - .container-fluid (full width with padding)
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for --container-* and --space-* variables)
+   
+   USAGE:
+   <div class="container">...</div>
+   <div class="container-fluid">...</div>
+   
+   AI DEBUGGING TIPS:
+   - Content too narrow? Check max-width variable in design-tokens.css
+   - Not centered? Ensure margin: auto is present (automatic from container class)
+   - Padding not visible? Check --container-padding-x variable
+   
+   ============================================================================ */
+
+/* -------------------------------------------------------------------------- */
+/*  Container - Constrained Width & Centered
+/*
+    - Constrains content width for readability.
+    - Centers content on the page.
+    - Adds consistent horizontal padding.
+/* -------------------------------------------------------------------------- */
+
+.container {
+    width: 100%;
+    max-width: var(--container-max-width, 1200px);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--container-padding-x, var(--space-4));
+    padding-right: var(--container-padding-x, var(--space-4));
+}
+
+.container-fluid {
+    width: 100%;
+    padding-left: var(--container-padding-x, var(--space-4));
+    padding-right: var(--container-padding-x, var(--space-4));
+}