coursecode 0.1.0

package/framework/css/utilities/lists.css

@@ -0,0 +1,190 @@
+/* ============================================================================
+   LISTS - Generic List Style Utilities (NOT Assessment-Specific)
+   ============================================================================
+   
+   PURPOSE: Simple utilities for controlling bullet/number styles
+   
+   CLASSES:
+   .list-none       - Remove list bullets/numbers
+   .list-disc       - Disc bullets
+   .list-decimal    - Decimal numbering
+   .list-styled     - Enhanced styled bullets with colors and spacing
+   .list-numbered   - Enhanced numbered lists with colors and spacing
+   
+   NOTE: Assessment-specific list containers (.assessment-list, .assessment-list-item, etc.)
+   are defined in components/assessments.css - NOT in this generic utilities file
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   
+   ============================================================================ */
+
+/* ============================================================================
+   LIST STYLE UTILITIES - Control list bullet/numbering styles
+   ============================================================================ */
+
+/* List Style Control */
+.list-none {
+  list-style: none;
+}
+
+.list-disc {
+  list-style: disc;
+}
+
+.list-decimal {
+  list-style: decimal;
+}
+
+/* ============================================================================
+   STYLED LISTS - Enhanced spacing and visual hierarchy
+   ============================================================================ */
+
+.list-styled,
+.list-numbered {
+  margin: 0;
+  padding-left: var(--space-6);
+}
+
+.list-styled li,
+.list-numbered li {
+  padding-left: var(--space-2);
+  line-height: 1.6;
+}
+
+.list-styled {
+  list-style: disc;
+}
+
+.list-styled li::marker {
+  color: var(--color-primary);
+  font-size: 1.2em;
+}
+
+.list-numbered {
+  list-style: decimal;
+  counter-reset: list-counter;
+}
+
+.list-numbered li::marker {
+  color: var(--color-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Nested list styling */
+.list-styled ul,
+.list-numbered ul,
+.list-styled ol,
+.list-numbered ol {
+  padding-left: var(--space-5);
+}
+
+.list-styled ul li::marker {
+  content: '◦';
+  font-size: 1.4em;
+}
+
+/* ============================================================================
+   LIST MODIFIERS - Stackable variants
+   ============================================================================ */
+
+/* Dark/Neutral markers - black bullets/numbers instead of primary color */
+.list-dark li::marker,
+.list-styled.list-dark li::marker,
+.list-numbered.list-dark li::marker {
+  color: var(--color-text);
+}
+
+.list-dark ul li::marker,
+.list-styled.list-dark ul li::marker,
+.list-numbered.list-dark ul li::marker {
+  color: var(--color-text);
+}
+
+/* Compact - reduced spacing for dense content */
+.list-compact,
+.list-styled.list-compact,
+.list-numbered.list-compact {
+  padding-left: var(--space-4);
+}
+
+.list-compact li,
+.list-styled.list-compact li,
+.list-numbered.list-compact li {
+  padding-left: var(--space-1);
+  line-height: 1.4;
+}
+
+.list-styled.list-compact li::marker {
+  font-size: 0.9em;
+}
+
+.list-numbered.list-compact li::marker {
+  font-size: 0.95em;
+}
+
+/* Compact nested lists */
+.list-compact ul,
+.list-compact ol,
+.list-styled.list-compact ul,
+.list-styled.list-compact ol,
+.list-numbered.list-compact ul,
+.list-numbered.list-compact ol {
+  padding-left: var(--space-4);
+}
+
+/* Light markers - white bullets/numbers for dark backgrounds */
+.list-light li::marker,
+.list-styled.list-light li::marker,
+.list-numbered.list-light li::marker {
+  color: #fff;
+}
+
+.list-light ul li::marker,
+.list-styled.list-light ul li::marker,
+.list-numbered.list-light ul li::marker {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* ============================================================================
+   CONTEXTUAL AUTO-STYLING - Smart marker colors based on container
+   ============================================================================
+   Lists inside light-background containers (callouts, cards with light bg)
+   automatically get dark markers for better contrast.
+   ============================================================================ */
+
+/* Callouts with light backgrounds - use dark markers */
+.callout-warning .list-styled li::marker,
+.callout-warning .list-numbered li::marker,
+.callout-info .list-styled li::marker,
+.callout-info .list-numbered li::marker,
+.callout-success .list-styled li::marker,
+.callout-success .list-numbered li::marker,
+.callout-danger .list-styled li::marker,
+.callout-danger .list-numbered li::marker {
+  color: var(--color-gray-700);
+}
+
+/* Nested lists in callouts */
+.callout-warning .list-styled ul li::marker,
+.callout-warning .list-numbered ul li::marker,
+.callout-info .list-styled ul li::marker,
+.callout-info .list-numbered ul li::marker,
+.callout-success .list-styled ul li::marker,
+.callout-success .list-numbered ul li::marker,
+.callout-danger .list-styled ul li::marker,
+.callout-danger .list-numbered ul li::marker {
+  color: var(--color-gray-600);
+}
+
+/* Alerts with light backgrounds */
+.alert-warning .list-styled li::marker,
+.alert-warning .list-numbered li::marker,
+.alert-info .list-styled li::marker,
+.alert-info .list-numbered li::marker,
+.alert-success .list-styled li::marker,
+.alert-success .list-numbered li::marker,
+.alert-danger .list-styled li::marker,
+.alert-danger .list-numbered li::marker {
+  color: var(--color-gray-700);
+}

package/framework/css/utilities/spacing.css

@@ -0,0 +1,167 @@
+/* ============================================================================
+   SPACING UTILITIES - Margin and padding classes
+   ============================================================================
+   
+   PURPOSE: Utility classes for controlling element spacing
+   
+   INCLUDES:
+   - Margin utilities (m, mt, mb, ml, mr, mx, my)
+   - Padding utilities (p, pt, pb, pl, pr, px, py)
+   - Spacing scale from 0-6 (0, 4px, 8px, 12px, 16px, 24px, 32px)
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for --space-* variables)
+   
+   USAGE:
+   <div class="m-4">Margin 16px all sides</div>
+   <div class="mt-2 mb-4">Margin top 8px, bottom 16px</div>
+   <div class="p-3 px-4">Padding 12px all, 16px horizontal</div>
+   
+   ============================================================================ */
+
+/* Spacing Utilities - Margin */
+.m-0 { margin: 0; }
+.m-1 { margin: var(--space-1); }
+.m-2 { margin: var(--space-2); }
+.m-3 { margin: var(--space-3); }
+.m-4 { margin: var(--space-4); }
+.m-5 { margin: var(--space-5); }
+.m-6 { margin: var(--space-6); }
+
+.mx-0 { margin-left: 0; margin-right: 0; }
+.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
+.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
+.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
+.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
+.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
+.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+.my-0 { margin-top: 0; margin-bottom: 0; }
+.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
+.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
+.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
+.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
+.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
+.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
+.my-auto { margin-top: auto; margin-bottom: auto; }
+
+/* Auto margins for flexbox layouts */
+.mt-auto { margin-top: auto; }
+.mb-auto { margin-bottom: auto; }
+.ml-auto { margin-left: auto; }
+.mr-auto { margin-right: auto; }
+
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: var(--space-1); }
+.mt-2 { margin-top: var(--space-2); }
+.mt-3 { margin-top: var(--space-3); }
+.mt-4 { margin-top: var(--space-4); }
+.mt-5 { margin-top: var(--space-5); }
+.mt-6 { margin-top: var(--space-6); }
+
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: var(--space-1); }
+.mb-2 { margin-bottom: var(--space-2); }
+.mb-3 { margin-bottom: var(--space-3); }
+.mb-4 { margin-bottom: var(--space-4); }
+.mb-5 { margin-bottom: var(--space-5); }
+.mb-6 { margin-bottom: var(--space-6); }
+
+.ml-0 { margin-left: 0; }
+.ml-1 { margin-left: var(--space-1); }
+.ml-2 { margin-left: var(--space-2); }
+.ml-3 { margin-left: var(--space-3); }
+.ml-4 { margin-left: var(--space-4); }
+.ml-5 { margin-left: var(--space-5); }
+.ml-6 { margin-left: var(--space-6); }
+
+.mr-0 { margin-right: 0; }
+.mr-1 { margin-right: var(--space-1); }
+.mr-2 { margin-right: var(--space-2); }
+.mr-3 { margin-right: var(--space-3); }
+.mr-4 { margin-right: var(--space-4); }
+.mr-5 { margin-right: var(--space-5); }
+.mr-6 { margin-right: var(--space-6); }
+
+/* Spacing Utilities - Padding */
+.p-0 { padding: 0; }
+.p-1 { padding: var(--space-1); }
+.p-2 { padding: var(--space-2); }
+.p-3 { padding: var(--space-3); }
+.p-4 { padding: var(--space-4); }
+.p-5 { padding: var(--space-5); }
+.p-6 { padding: var(--space-6); }
+
+.px-0 { padding-left: 0; padding-right: 0; }
+.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
+.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
+.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
+.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
+.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
+
+.py-0 { padding-top: 0; padding-bottom: 0; }
+.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
+.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
+.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
+.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
+.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
+.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
+
+.pt-0 { padding-top: 0; }
+.pt-1 { padding-top: var(--space-1); }
+.pt-2 { padding-top: var(--space-2); }
+.pt-3 { padding-top: var(--space-3); }
+.pt-4 { padding-top: var(--space-4); }
+.pt-5 { padding-top: var(--space-5); }
+.pt-6 { padding-top: var(--space-6); }
+
+.pb-0 { padding-bottom: 0; }
+.pb-1 { padding-bottom: var(--space-1); }
+.pb-2 { padding-bottom: var(--space-2); }
+.pb-3 { padding-bottom: var(--space-3); }
+.pb-4 { padding-bottom: var(--space-4); }
+.pb-5 { padding-bottom: var(--space-5); }
+.pb-6 { padding-bottom: var(--space-6); }
+
+.pl-0 { padding-left: 0; }
+.pl-1 { padding-left: var(--space-1); }
+.pl-2 { padding-left: var(--space-2); }
+.pl-3 { padding-left: var(--space-3); }
+.pl-4 { padding-left: var(--space-4); }
+.pl-5 { padding-left: var(--space-5); }
+.pl-6 { padding-left: var(--space-6); }
+
+.pr-0 { padding-right: 0; }
+.pr-1 { padding-right: var(--space-1); }
+.pr-2 { padding-right: var(--space-2); }
+.pr-3 { padding-right: var(--space-3); }
+.pr-4 { padding-right: var(--space-4); }
+.pr-5 { padding-right: var(--space-5); }
+.pr-6 { padding-right: var(--space-6); }
+
+/* Spacing Utilities - Gap (for flex/grid containers) */
+.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); }
+
+.row-gap-0 { row-gap: 0; }
+.row-gap-1 { row-gap: var(--space-1); }
+.row-gap-2 { row-gap: var(--space-2); }
+.row-gap-3 { row-gap: var(--space-3); }
+.row-gap-4 { row-gap: var(--space-4); }
+.row-gap-5 { row-gap: var(--space-5); }
+.row-gap-6 { row-gap: var(--space-6); }
+
+.col-gap-0 { column-gap: 0; }
+.col-gap-1 { column-gap: var(--space-1); }
+.col-gap-2 { column-gap: var(--space-2); }
+.col-gap-3 { column-gap: var(--space-3); }
+.col-gap-4 { column-gap: var(--space-4); }
+.col-gap-5 { column-gap: var(--space-5); }
+.col-gap-6 { column-gap: var(--space-6); }

package/framework/css/utilities/tables.css

@@ -0,0 +1,81 @@
+/* ============================================================================
+   TABLES - Simple table styling for data presentation
+   ============================================================================
+   
+   PURPOSE: Clean, accessible table styling for displaying tabular data
+   
+   INCLUDES:
+   - Header styling with background
+   - Body row styling with borders
+   - Hover states for interactivity
+   - Responsive padding and alignment
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   
+   USED BY: Data displays, results tables, comparison tables
+   
+   USAGE:
+   <table class="table">
+     <thead>
+       <tr>
+         <th>Header 1</th>
+         <th>Header 2</th>
+       </tr>
+     </thead>
+     <tbody>
+       <tr>
+         <td>Data 1</td>
+         <td>Data 2</td>
+       </tr>
+     </tbody>
+   </table>
+   
+   ============================================================================ */
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-base);
+}
+
+.table thead {
+  background-color: var(--bg-muted);
+  border-bottom: 2px solid var(--color-gray-300);
+}
+
+.table thead th {
+  padding: var(--space-3);
+  text-align: left;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-900);
+  border-right: 1px solid var(--color-gray-200);
+}
+
+.table thead th:last-child {
+  border-right: none;
+}
+
+.table tbody td {
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-gray-200);
+  border-right: 1px solid var(--color-gray-200);
+  color: var(--color-gray-800);
+}
+
+.table tbody td:last-child {
+  border-right: none;
+}
+
+.table tbody tr:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Striped table variant */
+.table-striped tbody tr:nth-child(even) {
+  background-color: var(--bg-muted);
+}

package/framework/css/utilities/typography.css

@@ -0,0 +1,159 @@
+/* ============================================================================
+   TYPOGRAPHY UTILITIES - Font weights, text transform, decoration, line clamp
+   ============================================================================
+   
+   PURPOSE: Utility classes for text styling and formatting
+   
+   INCLUDES:
+   - Font weights (light, normal, medium, semibold, bold)
+   - Text transform (uppercase, lowercase, capitalize)
+   - Text decoration (underline, no-underline)
+   - Line clamp (truncate text with ellipsis)
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for font-weight variables)
+   
+   USAGE: Apply classes directly to elements for quick styling
+   
+   ============================================================================ */
+
+/* Font Family */
+.font-mono { font-family: var(--font-family-mono, ui-monospace, monospace); }
+
+/* Font Weights */
+.font-light { font-weight: 300; }
+.font-normal { font-weight: 400; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+
+/* Font Size */
+.text-xs { font-size: var(--font-size-xs); }
+.text-sm { font-size: var(--font-size-sm); }
+.text-base { font-size: var(--font-size-base); }
+.text-lg { font-size: var(--font-size-lg); }
+.text-xl { font-size: var(--font-size-xl); }
+
+/* Text Align */
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-justify { text-align: justify; }
+
+/* Text Transform */
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+.capitalize { text-transform: capitalize; }
+
+/* Text Decoration */
+.no-underline { text-decoration: none; }
+.underline { text-decoration: underline; }
+
+/* Text Truncation */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ============================================================================
+   HEADING STYLE VARIANTS
+   ============================================================================
+   
+   Use data-heading-style attribute on a container to apply heading styles
+   to all headings within, or apply classes directly to individual headings.
+   
+   USAGE:
+   <div data-heading-style="subtle">
+     <h2>This heading is subtle</h2>
+   </div>
+   
+   Or directly:
+   <h2 class="heading-accent">Accented Heading</h2>
+   ============================================================================ */
+
+/* Bold - Default colored headings (for reference/explicit use) */
+[data-heading-style="bold"] h1,
+[data-heading-style="bold"] h2,
+[data-heading-style="bold"] h3,
+.heading-bold {
+  color: var(--color-primary);
+  font-weight: var(--font-weight-bold);
+}
+
+/* Subtle - Gray, lighter weight headings */
+[data-heading-style="subtle"] h1,
+[data-heading-style="subtle"] h2,
+[data-heading-style="subtle"] h3,
+.heading-subtle {
+  color: var(--color-gray-600);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Accent - Headings with accent color underline */
+[data-heading-style="accent"] h1,
+[data-heading-style="accent"] h2,
+[data-heading-style="accent"] h3,
+.heading-accent {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-bold);
+  padding-bottom: var(--space-2);
+  border-bottom: 3px solid var(--color-accent);
+  display: inline-block;
+}
+
+/* Caps - Uppercase with letter-spacing */
+[data-heading-style="caps"] h1,
+[data-heading-style="caps"] h2,
+[data-heading-style="caps"] h3,
+.heading-caps {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-700);
+}
+
+/* ============================================================================
+   TEXT DECORATION UTILITIES
+   ============================================================================
+   
+   Special text effects for emphasis and visual interest.
+   ============================================================================ */
+
+/* Gradient text effect using primary colors */
+.text-gradient {
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Subtle text shadow for readability on busy backgrounds */
+.text-shadow {
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/* Stronger text shadow for light text on images */
+.text-shadow-lg {
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Outlined/stroke text effect (works best on large display text) */
+.text-outlined {
+  color: transparent;
+  -webkit-text-stroke: 2px var(--color-primary);
+}

package/framework/css/utilities/visibility.css

@@ -0,0 +1,117 @@
+/* ============================================================================
+   VISIBILITY UTILITIES - Show/Hide and conditional display helpers
+   ============================================================================
+   
+   PURPOSE: Utility classes for visibility state management
+   
+   INCLUDES:
+   - Conditional display with visibility transitions
+   - Show/hide animations
+   - Pointer events management
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   
+   USED BY:
+   - Modal visibility toggling
+   - Conditional content display
+   - Animation-based transitions
+   
+   AI DEBUGGING TIPS:
+   - Elements appearing when hidden? Check opacity and pointer-events
+   - Animation not smooth? Verify transition timing in design-tokens
+   - Touch areas wrong? Check pointer-events: none/auto
+   - Mobile jerky? Check @media (prefers-reduced-motion: reduce)
+   
+   ============================================================================ */
+
+/* Conditional Display - Hidden State */
+.conditional-hidden {
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+  pointer-events: none;
+}
+
+/* Conditional Display - Visible State */
+.conditional-visible {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
+  pointer-events: auto;
+}
+
+/* Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+
+  .conditional-hidden,
+  .conditional-visible {
+    transition: none;
+    transform: none;
+  }
+}
+
+/* ============================================================================
+   LAYOUT-BASED VISIBILITY - Show/hide elements per layout type
+   ============================================================================
+   Usage: Add class to any element to control visibility per layout.
+   
+   Hide in specific layout:
+     <div class="hide-on-focused">Hidden only in focused layout</div>
+   
+   Show only in specific layout:
+     <div class="show-only-article">Visible only in article layout</div>
+   ============================================================================ */
+
+/* Hide in specific layouts */
+[data-layout="traditional"] .hide-on-traditional {
+  display: none !important;
+}
+
+[data-layout="article"] .hide-on-article {
+  display: none !important;
+}
+
+[data-layout="focused"] .hide-on-focused {
+  display: none !important;
+}
+
+[data-layout="presentation"] .hide-on-presentation {
+  display: none !important;
+}
+
+/* Show only in traditional layout */
+.show-only-traditional {
+  display: none !important;
+}
+
+[data-layout="traditional"] .show-only-traditional {
+  display: block !important;
+}
+
+/* Show only in article layout */
+.show-only-article {
+  display: none !important;
+}
+
+[data-layout="article"] .show-only-article {
+  display: block !important;
+}
+
+/* Show only in focused layout */
+.show-only-focused {
+  display: none !important;
+}
+
+[data-layout="focused"] .show-only-focused {
+  display: block !important;
+}
+
+/* Show only in presentation layout */
+.show-only-presentation {
+  display: none !important;
+}
+
+[data-layout="presentation"] .show-only-presentation {
+  display: block !important;
+}