coursecode 0.1.0

package/framework/css/utilities/flexbox.css

@@ -0,0 +1,80 @@
+/* ============================================================================
+   FLEXBOX UTILITIES - Flex layout helper classes
+   ============================================================================
+   
+   PURPOSE: Utility classes for flexbox layouts
+   
+   INCLUDES:
+   - Flex display and direction
+   - Alignment and justification
+   - Flex wrap and gaps
+   - Common flex patterns
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for --space-* variables)
+   
+   USAGE:
+   <div class="flex items-center justify-between">...</div>
+   <div class="flex flex-col gap-4">...</div>
+   <div class="flex-center">Centered content</div>
+   
+   ============================================================================ */
+
+/* Layout Utilities - Display & Flex */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-start {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-start { justify-content: flex-start; }
+.justify-end { justify-content: flex-end; }
+
+.self-center { align-self: center; }
+.self-start { align-self: flex-start; }
+.self-end { align-self: flex-end; }
+
+/* Flex Grow */
+.flex-1 { flex: 1; }
+.flex-grow { flex-grow: 1; }
+.flex-shrink { flex-shrink: 1; }
+.flex-shrink-0 { flex-shrink: 0; }
+
+.gap-0 { gap: 0; }
+.gap-1 { gap: var(--space-1); }
+.gap-2 { gap: var(--space-2); }
+.gap-3 { gap: var(--space-3); }
+.gap-4 { gap: var(--space-4); }
+.gap-5 { gap: var(--space-5); }
+.gap-6 { gap: var(--space-6); }
+.gap-8 { gap: var(--space-8); }
+.gap-10 { gap: var(--space-10); }
+.gap-12 { gap: var(--space-12); }
+.gap-16 { gap: var(--space-16); }
+.gap-20 { gap: var(--space-20); }
+.gap-24 { gap: var(--space-24); }
+

package/framework/css/utilities/grid.css

@@ -0,0 +1,69 @@
+/* ============================================================================
+   GRID UTILITIES - CSS Grid column and layout utilities
+   ============================================================================
+   
+   PURPOSE: Utility classes for grid-based layouts
+   
+   INCLUDES:
+   - .grid (display: grid with 12-column template)
+   - .col-* (column span: 1-12 and full)
+   - .col-start-* (column start positions: 1-12)
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for --grid-gap and --space-* variables)
+   
+   USAGE:
+   <div class="grid">
+     <div class="col-6">Half width</div>
+     <div class="col-6">Half width</div>
+   </div>
+   
+   AI DEBUGGING TIPS:
+   - Columns not aligning? Check .grid has display: grid
+   - Columns wrapping? Verify col-* classes sum to 12 or use col-start-*
+   - Gap too small? Check --grid-gap variable in design-tokens.css
+   - Column starting position wrong? Use .col-start-{1-12}
+   
+   ============================================================================ */
+
+/* -------------------------------------------------------------------------- */
+/*  Grid System - 12 Column Layout
+/*
+    - A simple, powerful 12-column CSS Grid system.
+    - Use `.grid` as the container and `.col-*` for columns.
+/* -------------------------------------------------------------------------- */
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: var(--grid-gap, var(--space-4));
+}
+
+/* Column spans */
+.col-1 { grid-column: span 1; }
+.col-2 { grid-column: span 2; }
+.col-3 { grid-column: span 3; }
+.col-4 { grid-column: span 4; }
+.col-5 { grid-column: span 5; }
+.col-6 { grid-column: span 6; }
+.col-7 { grid-column: span 7; }
+.col-8 { grid-column: span 8; }
+.col-9 { grid-column: span 9; }
+.col-10 { grid-column: span 10; }
+.col-11 { grid-column: span 11; }
+.col-12 { grid-column: span 12; }
+.col-full { grid-column: 1 / -1; }
+
+/* Column start positions */
+.col-start-1 { grid-column-start: 1; }
+.col-start-2 { grid-column-start: 2; }
+.col-start-3 { grid-column-start: 3; }
+.col-start-4 { grid-column-start: 4; }
+.col-start-5 { grid-column-start: 5; }
+.col-start-6 { grid-column-start: 6; }
+.col-start-7 { grid-column-start: 7; }
+.col-start-8 { grid-column-start: 8; }
+.col-start-9 { grid-column-start: 9; }
+.col-start-10 { grid-column-start: 10; }
+.col-start-11 { grid-column-start: 11; }
+.col-start-12 { grid-column-start: 12; }

package/framework/css/utilities/icons.css

@@ -0,0 +1,534 @@
+/* ============================================================================
+   ICON UTILITIES - Sizing, coloring, and layout utilities for icons
+   ============================================================================
+   
+   PURPOSE: Provide consistent icon styling across the framework
+   
+   INCLUDES:
+   - Icon sizing utilities (.icon-xs through .icon-2xl)
+   - Icon color utilities (.icon-primary, .icon-success, etc.)
+   - Icon + text layout utilities (.icon-text, .icon-before, etc.)
+   - Icon animation utilities (.icon-spin, .icon-pulse, etc.)
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   
+   USAGE:
+   Works with SVGs generated by iconManager and icon fonts.
+   
+   // In JavaScript:
+   import { iconManager } from '../js/utilities/icons.js';
+   container.innerHTML = `
+     <span class="icon-text">
+       ${iconManager.getIcon('info', { size: 'md', class: 'icon-primary' })}
+       <span>Label text</span>
+     </span>
+   `;
+   
+   AI DEBUGGING TIPS:
+   - Icon not visible? Check if SVG has fill/stroke set
+   - Wrong size? Ensure icon-* class is applied to the SVG/icon element
+   - Color not applying? For SVG, ensure fill="currentColor" or stroke="currentColor"
+   
+   LAST UPDATED: 2024-12-04
+   ============================================================================ */
+
+/* ============================================================================
+   BASE ICON STYLES
+   ============================================================================
+   
+   Base styles for all SVG icons generated by iconManager.
+   The .icon class is automatically added to all generated icons.
+   ============================================================================ */
+
+.icon {
+  /* Default size - can be overridden by .icon-sm, .icon-lg, etc. */
+  width: 1em;
+  height: 1em;
+  /* Inline alignment */
+  display: inline-block;
+  vertical-align: middle;
+  /* Prevent shrinking in flex containers */
+  flex-shrink: 0;
+}
+
+/* ============================================================================
+   ICON SIZING UTILITIES
+   ============================================================================
+   
+   Consistent sizing for icons. Works with SVG and icon fonts.
+   iconManager generates SVGs with viewBox but no inline width/height,
+   allowing these CSS classes to control sizing.
+   ============================================================================ */
+
+.icon-xs {
+  width: 0.75rem;   /* 12px - Inline with small text */
+  height: 0.75rem;
+  min-width: 0.75rem;
+  min-height: 0.75rem;
+  font-size: 0.75rem;
+}
+
+.icon-sm {
+  width: 1rem;      /* 16px - Inline with body text */
+  height: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+  font-size: 1rem;
+}
+
+.icon-md {
+  width: 1.25rem;   /* 20px - Default, buttons */
+  height: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  font-size: 1.25rem;
+}
+
+.icon-lg {
+  width: 1.5rem;    /* 24px - Emphasized icons */
+  height: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  font-size: 1.5rem;
+}
+
+.icon-xl {
+  width: 2rem;      /* 32px - Feature icons */
+  height: 2rem;
+  min-width: 2rem;
+  min-height: 2rem;
+  font-size: 2rem;
+}
+
+.icon-2xl {
+  width: 3rem;      /* 48px - Hero/display icons */
+  height: 3rem;
+  min-width: 3rem;
+  min-height: 3rem;
+  font-size: 3rem;
+}
+
+.icon-3xl {
+  width: 4rem;      /* 64px - Extra large display */
+  height: 4rem;
+  min-width: 4rem;
+  min-height: 4rem;
+  font-size: 4rem;
+}
+
+/* ============================================================================
+   EMOJI & ICON FONT UTILITIES
+   ============================================================================
+   
+   For text-based icons (emojis, icon fonts) that use font-size instead of 
+   width/height. Use with sizing classes (.icon-sm, .icon-lg, etc.)
+   
+   Example: <span class="emoji icon-2xl">📖</span>
+   Example: <span class="emoji icon-lg">🎯</span>
+   ============================================================================ */
+
+.emoji {
+  display: inline-block;
+  line-height: 1;
+  vertical-align: middle;
+  /* Override width/height from sizing classes - emojis use font-size */
+  width: auto !important;
+  height: auto !important;
+  min-width: unset !important;
+  min-height: unset !important;
+}
+
+/* ============================================================================
+   ICON COLOR UTILITIES
+   ============================================================================
+   
+   Apply color to icons using CSS custom properties.
+   For SVG icons, set fill="currentColor" or stroke="currentColor".
+   ============================================================================ */
+
+.icon-primary {
+  color: var(--color-primary);
+}
+
+.icon-secondary {
+  color: var(--color-secondary);
+}
+
+.icon-accent {
+  color: var(--color-accent);
+}
+
+.icon-success {
+  color: var(--color-success);
+}
+
+.icon-warning {
+  color: var(--color-warning);
+}
+
+.icon-danger {
+  color: var(--color-danger);
+}
+
+.icon-info {
+  color: var(--color-info);
+}
+
+.icon-muted {
+  color: var(--text-muted);
+}
+
+.icon-white {
+  color: var(--color-white);
+}
+
+.icon-dark {
+  color: var(--color-gray-800);
+}
+
+.icon-inherit {
+  color: inherit;
+}
+
+/* Icon color hover variants */
+.icon-primary-hover:hover {
+  color: var(--color-primary-hover);
+}
+
+.icon-secondary-hover:hover {
+  color: var(--color-secondary-hover);
+}
+
+.icon-accent-hover:hover {
+  color: var(--color-accent-hover);
+}
+
+/* ============================================================================
+   ICON + TEXT LAYOUT UTILITIES
+   ============================================================================
+   
+   Common patterns for combining icons with text labels.
+   ============================================================================ */
+
+/* Base container for icon + text - flex row by default */
+.icon-text {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* Larger gap between icon and text */
+.icon-text-lg {
+  gap: var(--space-3);
+}
+
+/* Smaller gap */
+.icon-text-sm {
+  gap: var(--space-1);
+}
+
+/* Icon positioned after text */
+.icon-after {
+  flex-direction: row-reverse;
+}
+
+/* Icon stacked above text (centered) */
+.icon-above {
+  flex-direction: column;
+  text-align: center;
+}
+
+/* Icon stacked below text (centered) */
+.icon-below {
+  flex-direction: column-reverse;
+  text-align: center;
+}
+
+/* Icon inline within text flow (for mid-sentence icons) */
+.icon-inline {
+  display: inline;
+  vertical-align: middle;
+  margin: 0 0.15em;
+}
+
+/* Ensure icon doesn't shrink in flex context */
+.icon-text > svg,
+.icon-text > [class*="icon-"] {
+  flex-shrink: 0;
+}
+
+/* ============================================================================
+   ICON BACKGROUND UTILITIES
+   ============================================================================
+   
+   Add background shapes behind icons for emphasis.
+   ============================================================================ */
+
+.icon-circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  padding: var(--space-2);
+}
+
+.icon-circle-sm {
+  padding: var(--space-1);
+}
+
+.icon-circle-lg {
+  padding: var(--space-3);
+}
+
+.icon-square {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  padding: var(--space-2);
+}
+
+/* Background color variants for icon containers */
+.icon-bg-primary {
+  background-color: var(--color-primary-alpha-10);
+}
+
+.icon-bg-secondary {
+  background-color: var(--color-secondary-alpha-10);
+}
+
+.icon-bg-accent {
+  background-color: var(--color-accent-alpha-10);
+}
+
+.icon-bg-success {
+  background-color: var(--color-success-light);
+}
+
+.icon-bg-warning {
+  background-color: var(--color-warning-light);
+}
+
+.icon-bg-danger {
+  background-color: var(--color-danger-light);
+}
+
+.icon-bg-info {
+  background-color: var(--color-info-light);
+}
+
+.icon-bg-muted {
+  background-color: var(--bg-muted);
+}
+
+/* Solid background variants */
+.icon-bg-primary-solid {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.icon-bg-secondary-solid {
+  background-color: var(--color-secondary);
+  color: var(--color-gray-900);
+}
+
+.icon-bg-accent-solid {
+  background-color: var(--color-accent);
+  color: var(--color-gray-900);
+}
+
+/* ============================================================================
+   ICON ANIMATION UTILITIES
+   ============================================================================
+   
+   Animation effects specifically for icons.
+   All animations respect prefers-reduced-motion.
+   ============================================================================ */
+
+/* Continuous rotation - for loading spinners */
+.icon-spin {
+  animation: icon-spin 1s linear infinite;
+}
+
+@keyframes icon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Pulsing opacity - for attention */
+.icon-pulse {
+  animation: icon-pulse 2s ease-in-out infinite;
+}
+
+@keyframes icon-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Bouncing effect - for notifications */
+.icon-bounce {
+  animation: icon-bounce 1s ease infinite;
+}
+
+@keyframes icon-bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-25%);
+  }
+}
+
+/* Shake effect - for errors/warnings */
+.icon-shake {
+  animation: icon-shake 0.5s ease-in-out;
+}
+
+@keyframes icon-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+
+/* Ping effect - like a notification badge */
+.icon-ping {
+  position: relative;
+}
+
+.icon-ping::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0.3;
+  animation: icon-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@keyframes icon-ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+/* Scale on hover */
+.icon-hover-scale {
+  transition: transform var(--transition-fast);
+}
+
+.icon-hover-scale:hover {
+  transform: scale(1.15);
+}
+
+/* Rotate on hover */
+.icon-hover-rotate {
+  transition: transform var(--transition-normal);
+}
+
+.icon-hover-rotate:hover {
+  transform: rotate(15deg);
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .icon-spin,
+  .icon-pulse,
+  .icon-bounce,
+  .icon-shake,
+  .icon-ping::after {
+    animation: none;
+  }
+  
+  .icon-hover-scale:hover,
+  .icon-hover-rotate:hover {
+    transform: none;
+  }
+}
+
+/* ============================================================================
+   ICON CLICKABLE STYLES
+   ============================================================================
+   
+   Styles for icons used as clickable links/buttons.
+   NOTE: Class renamed from .icon-link to .icon-clickable to avoid collision
+   with the 'link' icon name (which generates .icon-link automatically).
+   ============================================================================ */
+
+.icon-clickable {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-gray-600);
+  transition: color var(--transition-fast), transform var(--transition-fast);
+  cursor: pointer;
+}
+
+.icon-clickable:hover {
+  color: var(--color-primary);
+}
+
+.icon-clickable:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+  border-radius: var(--radius-sm);
+}
+
+/* Icon button - icon in a clickable button container */
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2);
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-md);
+  color: var(--color-gray-600);
+  cursor: pointer;
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+}
+
+.icon-button:hover {
+  background-color: var(--bg-muted);
+  color: var(--color-primary);
+}
+
+.icon-button:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.icon-button:active {
+  background-color: var(--bg-inset);
+}
+
+/* Icon button variants */
+.icon-button-primary:hover {
+  background-color: var(--color-primary-alpha-10);
+  color: var(--color-primary);
+}
+
+.icon-button-danger:hover {
+  background-color: var(--color-danger-light);
+  color: var(--color-danger);
+}
+
+.icon-button-success:hover {
+  background-color: var(--color-success-light);
+  color: var(--color-success);
+}