npm - ultimate-jekyll-manager - Versions diffs - 0.0.189 → 0.0.190 - Mend

ultimate-jekyll-manager 0.0.189 → 0.0.190

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/CLAUDE.md CHANGED Viewed

@@ -558,6 +558,70 @@ data-lazy="@type value"
 **Implementation:** `src/assets/js/core/lazy-loading.js`
+## Appearance Switching System
+Ultimate Jekyll supports dark/light/system theme switching with user preference persistence.
+### Supported Modes
+- `dark` - Force dark mode
+- `light` - Force light mode
+- `system` - Auto-detect from OS preference (`prefers-color-scheme`)
+### JavaScript API
+```javascript
+// Get/set preference
+webManager.uj().appearance.get();        // Returns 'dark', 'light', 'system', or null
+webManager.uj().appearance.set('dark');  // Save and apply preference
+webManager.uj().appearance.getResolved(); // Returns actual theme: 'dark' or 'light'
+// Utilities
+webManager.uj().appearance.toggle();     // Toggle between dark/light
+webManager.uj().appearance.cycle();      // Cycle: dark → light → system → dark
+webManager.uj().appearance.clear();      // Clear saved preference
+```
+### HTML Data Attributes
+```html
+<!-- Buttons to set appearance (auto-gets 'active' class) -->
+<button data-appearance-set="light">Light</button>
+<button data-appearance-set="dark">Dark</button>
+<button data-appearance-set="system">System</button>
+<!-- Display current mode as text -->
+<span data-appearance-current></span>
+<!-- Show/hide icons based on current mode -->
+<span data-appearance-icon="light" hidden>☀️</span>
+<span data-appearance-icon="dark" hidden>🌙</span>
+<span data-appearance-icon="system" hidden>💻</span>
+```
+### Dropdown Example
+```html
+<div class="dropdown">
+  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">
+    <span data-appearance-icon="light" hidden>{% uj_icon "sun", "fa-md me-2" %}</span>
+    <span data-appearance-icon="dark" hidden>{% uj_icon "moon-stars", "fa-md me-2" %}</span>
+    <span data-appearance-icon="system" hidden>{% uj_icon "circle-half-stroke", "fa-md me-2" %}</span>
+    <span data-appearance-current></span>
+  </button>
+  <ul class="dropdown-menu">
+    <li><a class="dropdown-item" href="#" data-appearance-set="light">Light</a></li>
+    <li><a class="dropdown-item" href="#" data-appearance-set="dark">Dark</a></li>
+    <li><a class="dropdown-item" href="#" data-appearance-set="system">System</a></li>
+  </ul>
+</div>
+```
+### Implementation
+- **Inline script:** `src/defaults/dist/_includes/core/body.html` - Runs immediately to prevent flash
+- **Module:** `src/assets/js/core/appearance.js` - API and UI handling
+- **Storage:** Saved under `_manager.appearance.preference` in localStorage
+- **Test page:** `/test/libraries/appearance`
 ## JavaScript Libraries
 ### WebManager

package/README.md CHANGED Viewed

@@ -256,6 +256,35 @@ The `<html>` element has data attributes for JavaScript/CSS targeting:
 | `data-runtime` | `web`, `extension`, `electron`, `node` |
 | `aria-busy` | `true` (loading), `false` (ready) |
+### Appearance Switching
+Ultimate Jekyll supports dark/light/system theme switching with user preference persistence.
+**JavaScript API:**
+```javascript
+webManager.uj().appearance.get();        // Returns 'dark', 'light', 'system', or null
+webManager.uj().appearance.set('dark');  // Save and apply preference
+webManager.uj().appearance.toggle();     // Toggle dark/light
+webManager.uj().appearance.cycle();      // Cycle: dark → light → system
+```
+**HTML Dropdown Example:**
+```html
+<div class="dropdown">
+  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">
+    <span data-appearance-icon="light" hidden>{% uj_icon "sun" %}</span>
+    <span data-appearance-icon="dark" hidden>{% uj_icon "moon-stars" %}</span>
+    <span data-appearance-icon="system" hidden>{% uj_icon "circle-half-stroke" %}</span>
+    <span data-appearance-current></span>
+  </button>
+  <ul class="dropdown-menu">
+    <li><a href="#" data-appearance-set="light">Light</a></li>
+    <li><a href="#" data-appearance-set="dark">Dark</a></li>
+    <li><a href="#" data-appearance-set="system">System</a></li>
+  </ul>
+</div>
+```
 ### Page Loading Protection System
 Ultimate Jekyll includes an automatic protection system that prevents users from clicking buttons before JavaScript is fully loaded, eliminating race conditions and errors.

package/TODO.md CHANGED Viewed

@@ -8,6 +8,8 @@ NEW TODO
 - form manager should NOT submit if the button that was clicked is disabled (class or attribute)
 - GLOBAL FIXES FOR ALL UJM PROJECTS: nav.json should ahve class only not color
+/authentication-required
+* ithink this is leftover from Electron Manager auth system??? but lots on proxifly. need to make a version of it for UJM2.0
 Make an admin dashboard backend

package/dist/assets/themes/bootstrap/_theme.scss CHANGED Viewed

@@ -1,232 +1,11 @@
-// Import the theme entry point
-@use './scss/bootstrap.scss' as *;
-// Add any custom code here
-// ...
-// Adaptive button that uses light styles in light mode and dark styles in dark mode
-.btn-adaptive {
-  @extend .btn-dark;
-}
-[data-bs-theme="dark"] .btn-adaptive {
-  @extend .btn-light;
-}
-// Do the same for btn-outline-light, btn-outline-dark,
-.btn-outline-adaptive {
-  @extend .btn-outline-dark;
-}
-[data-bs-theme="dark"] .btn-outline-adaptive {
-  @extend .btn-outline-light;
-}
-// If nav-link is active, give it an underline
-.nav-link.active {
-  text-decoration: underline !important;
-}
-// Make a link-muted class that looks like text-muted
-.link-muted {
-  --bs-text-opacity: 1;
-  color: var(--bs-secondary-color) !important;
-  text-decoration: none;
-  transition: opacity 0.15s ease-in-out;
-  &:hover,
-  &:focus {
-    color: var(--bs-secondary-color) !important;
-    text-decoration: underline;
-    opacity: 0.75;
-  }
-}
-// Padding - Extend to p-8
-$spacer: 1rem;
-@for $i from 6 through 8 {
-  $size: if($i == 6, 4, if($i == 7, 4.5, 5));
-  .p-#{$i} { padding: $spacer * $size !important; }
-  .pt-#{$i} { padding-top: $spacer * $size !important; }
-  .pb-#{$i} { padding-bottom: $spacer * $size !important; }
-  .ps-#{$i} { padding-left: $spacer * $size !important; }
-  .pe-#{$i} { padding-right: $spacer * $size !important; }
-  .px-#{$i} {
-    padding-left: $spacer * $size !important;
-    padding-right: $spacer * $size !important;
-  }
-  .py-#{$i} {
-    padding-top: $spacer * $size !important;
-    padding-bottom: $spacer * $size !important;
-  }
-}
-// Avatar sizes map
-$avatar-sizes: (
-  null: 3rem,    // default
-  xs: 1.5rem,
-  sm: 2rem,
-  md: 2.5rem,
-  lg: 3.5rem,
-  xl: 5rem,
-  xxl: 7.5rem
-);
-// Avatar base styles
-.avatar {
-  display: inline-block;
-  height: map-get($avatar-sizes, null);
-  position: relative;
-  width: map-get($avatar-sizes, null);
-  img {
-    height: 100%;
-    -o-object-fit: cover;
-    object-fit: cover;
-    width: 100%;
-  }
-}
-// Generate avatar size classes
-@each $size, $dimension in $avatar-sizes {
-  @if $size != null {
-    .avatar-#{$size} {
-      height: $dimension;
-      width: $dimension;
-    }
-  }
-}
-// Soft color utilities for all theme colors
-$theme-colors: (
-  "primary": var(--bs-primary),
-  "secondary": var(--bs-secondary),
-  "success": var(--bs-success),
-  "info": var(--bs-info),
-  "warning": var(--bs-warning),
-  "danger": var(--bs-danger),
-  "light": var(--bs-light),
-  "dark": var(--bs-dark)
-);
-@each $color-name, $color-value in $theme-colors {
-  // Soft background colors (10% opacity)
-  .bg-#{$color-name}-soft {
-    background-color: rgba(var(--bs-#{$color-name}-rgb), 0.5) !important;
-  }
+// =============================================================================
+// UJ Bootstrap Theme
+// =============================================================================
+// Base Bootstrap theme with universal overrides.
+// All UJ themes that extend Bootstrap inherit these utilities.
-  // Soft text colors (more vibrant for readability)
-  .text-#{$color-name}-soft {
-    color: rgba(var(--bs-#{$color-name}-rgb), 0.8) !important;
-  }
-  // Soft border colors
-  .border-#{$color-name}-soft {
-    border-color: rgba(var(--bs-#{$color-name}-rgb), 0.2) !important;
-  }
-  // Soft buttons - background with hover states
-  .btn-#{$color-name}-soft {
-    color: var(--bs-#{$color-name});
-    background-color: rgba(var(--bs-#{$color-name}-rgb), 0.1);
-    border-color: rgba(var(--bs-#{$color-name}-rgb), 0.1);
-    &:hover {
-      color: var(--bs-#{$color-name});
-      background-color: rgba(var(--bs-#{$color-name}-rgb), 0.2);
-      border-color: rgba(var(--bs-#{$color-name}-rgb), 0.2);
-    }
-    &:focus,
-    &:active,
-    &.active {
-      color: var(--bs-#{$color-name});
-      background-color: rgba(var(--bs-#{$color-name}-rgb), 0.25);
-      border-color: rgba(var(--bs-#{$color-name}-rgb), 0.25);
-      box-shadow: 0 0 0 0.25rem rgba(var(--bs-#{$color-name}-rgb), 0.15);
-    }
-    &:disabled,
-    &.disabled {
-      color: rgba(var(--bs-#{$color-name}-rgb), 0.5);
-      background-color: rgba(var(--bs-#{$color-name}-rgb), 0.05);
-      border-color: rgba(var(--bs-#{$color-name}-rgb), 0.05);
-    }
-  }
-  // Soft outline buttons
-  .btn-outline-#{$color-name}-soft {
-    color: var(--bs-#{$color-name});
-    background-color: transparent;
-    border-color: rgba(var(--bs-#{$color-name}-rgb), 0.3);
-    &:hover {
-      color: var(--bs-#{$color-name});
-      background-color: rgba(var(--bs-#{$color-name}-rgb), 0.1);
-      border-color: rgba(var(--bs-#{$color-name}-rgb), 0.4);
-    }
-    &:focus,
-    &:active,
-    &.active {
-      color: var(--bs-#{$color-name});
-      background-color: rgba(var(--bs-#{$color-name}-rgb), 0.15);
-      border-color: rgba(var(--bs-#{$color-name}-rgb), 0.5);
-      box-shadow: 0 0 0 0.25rem rgba(var(--bs-#{$color-name}-rgb), 0.15);
-    }
-  }
-  // Soft badges
-  .badge-#{$color-name}-soft {
-    color: var(--bs-#{$color-name});
-    background-color: rgba(var(--bs-#{$color-name}-rgb), 0.1);
-  }
-  // Soft alerts
-  .alert-#{$color-name}-soft {
-    color: var(--bs-#{$color-name});
-    background-color: rgba(var(--bs-#{$color-name}-rgb), 0.1);
-    border-color: rgba(var(--bs-#{$color-name}-rgb), 0.2);
-    .alert-link {
-      color: var(--bs-#{$color-name});
-      text-decoration: underline;
-    }
-  }
-}
-/* Blog post card image height only - using Bootstrap's object-fit-cover class */
-.blog-post-card-image {
-  height: 240px;
-  width: 100%;
-}
-@media (max-width: 991.98px) {
-  .blog-post-card-image {
-    height: 240px;
-  }
-}
-@media (max-width: 575.98px) {
-  .blog-post-card-image {
-    height: 200px;
-  }
-}
-/* Blog post image height only - using Bootstrap's object-fit-cover class */
-.blog-post-image {
-  max-height: 480px;
-  width: 100%;
-}
+// Import Bootstrap
+@use './scss/bootstrap.scss' as *;
-@media (max-width: 991.98px) {
-  .blog-post-image {
-    max-height: 360px;
-  }
-}
-@media (max-width: 575.98px) {
-  .blog-post-image {
-    max-height: 240px;
-  }
-}
+// Import UJ universal overrides
+@use './overrides' as *;

package/dist/assets/themes/bootstrap/overrides/_accordion.scss ADDED Viewed

@@ -0,0 +1,21 @@
+// =============================================================================
+// Accordion Enhancements
+// =============================================================================
+// Theme-aware accordion icons (plus/minus style).
+// These are universal utilities available to all UJ themes.
+// ============================================
+// Light Mode Accordion Icons
+// ============================================
+.accordion-button::after {
+  --bs-accordion-btn-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23212529'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23212529'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");
+}
+// ============================================
+// Dark Mode Accordion Icons
+// ============================================
+[data-bs-theme="dark"] .accordion-button::after {
+  --bs-accordion-btn-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");
+}

package/dist/assets/themes/{classy/css/components → bootstrap/overrides}/_avatars.scss RENAMED Viewed

@@ -1,6 +1,21 @@
-// Classy Avatar Components
-// Circular profile images with responsive sizing
-// Uses $avatar-sizes map from config
+// =============================================================================
+// Avatar Components
+// =============================================================================
+// Circular profile images with responsive sizing.
+// These are universal utilities available to all UJ themes.
+// ============================================
+// Avatar Size Map
+// ============================================
+$avatar-sizes: (
+  null: 3rem,    // default
+  xs: 1.5rem,
+  sm: 2rem,
+  md: 2.5rem,
+  lg: 3.5rem,
+  xl: 5rem,
+  xxl: 7.5rem
+) !default;
 // ============================================
 // Base Avatar Styles

package/dist/assets/themes/bootstrap/overrides/_blog-images.scss ADDED Viewed

@@ -0,0 +1,45 @@
+// =============================================================================
+// Blog Image Sizing
+// =============================================================================
+// Default blog post image dimensions.
+// These are universal utilities available to all UJ themes.
+// ============================================
+// Blog Post Card Image
+// ============================================
+.blog-post-card-image {
+  height: 240px;
+  width: 100%;
+}
+@media (max-width: 991.98px) {
+  .blog-post-card-image {
+    height: 240px;
+  }
+}
+@media (max-width: 575.98px) {
+  .blog-post-card-image {
+    height: 200px;
+  }
+}
+// ============================================
+// Blog Post Image
+// ============================================
+.blog-post-image {
+  max-height: 480px;
+  width: 100%;
+}
+@media (max-width: 991.98px) {
+  .blog-post-image {
+    max-height: 360px;
+  }
+}
+@media (max-width: 575.98px) {
+  .blog-post-image {
+    max-height: 240px;
+  }
+}

package/dist/assets/themes/bootstrap/overrides/_buttons-adaptive.scss ADDED Viewed

@@ -0,0 +1,122 @@
+// =============================================================================
+// Adaptive Theme Buttons
+// =============================================================================
+// Buttons that automatically flip between light/dark styles based on theme.
+// These are universal utilities available to all UJ themes.
+// Note: Cannot use @extend with Bootstrap classes due to module scoping,
+// so we use CSS custom properties directly.
+// ============================================
+// Button Style Mixins (DRY)
+// ============================================
+@mixin btn-dark-styles {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: var(--bs-dark);
+  --bs-btn-border-color: var(--bs-dark);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #1c1c1c;
+  --bs-btn-hover-border-color: #1a1a1a;
+  --bs-btn-focus-shadow-rgb: 66, 70, 73;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #1a1a1a;
+  --bs-btn-active-border-color: #181818;
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: var(--bs-dark);
+  --bs-btn-disabled-border-color: var(--bs-dark);
+}
+@mixin btn-light-styles {
+  --bs-btn-color: #000;
+  --bs-btn-bg: var(--bs-light);
+  --bs-btn-border-color: var(--bs-light);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #e9ecef;
+  --bs-btn-hover-border-color: #e2e6ea;
+  --bs-btn-focus-shadow-rgb: 211, 212, 213;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #e2e6ea;
+  --bs-btn-active-border-color: #dae0e5;
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: var(--bs-light);
+  --bs-btn-disabled-border-color: var(--bs-light);
+}
+@mixin btn-outline-dark-styles {
+  --bs-btn-color: var(--bs-dark);
+  --bs-btn-border-color: var(--bs-dark);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-dark);
+  --bs-btn-hover-border-color: var(--bs-dark);
+  --bs-btn-focus-shadow-rgb: 33, 37, 41;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--bs-dark);
+  --bs-btn-active-border-color: var(--bs-dark);
+  --bs-btn-disabled-color: var(--bs-dark);
+  --bs-btn-disabled-border-color: var(--bs-dark);
+}
+@mixin btn-outline-light-styles {
+  --bs-btn-color: var(--bs-light);
+  --bs-btn-border-color: var(--bs-light);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: var(--bs-light);
+  --bs-btn-hover-border-color: var(--bs-light);
+  --bs-btn-focus-shadow-rgb: 248, 249, 250;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: var(--bs-light);
+  --bs-btn-active-border-color: var(--bs-light);
+  --bs-btn-disabled-color: var(--bs-light);
+  --bs-btn-disabled-border-color: var(--bs-light);
+}
+// ============================================
+// Solid Adaptive Buttons
+// ============================================
+// Dark button in light mode, light button in dark mode
+.btn-adaptive {
+  @include btn-dark-styles;
+}
+[data-bs-theme="dark"] .btn-adaptive {
+  @include btn-light-styles;
+}
+// ============================================
+// Outline Adaptive Buttons
+// ============================================
+.btn-outline-adaptive {
+  @include btn-outline-dark-styles;
+}
+[data-bs-theme="dark"] .btn-outline-adaptive {
+  @include btn-outline-light-styles;
+}
+// ============================================
+// Inverse Adaptive Buttons
+// ============================================
+// The opposite of adaptive - light in light mode, dark in dark mode
+.btn-adaptive-inverse {
+  @include btn-light-styles;
+}
+[data-bs-theme="dark"] .btn-adaptive-inverse {
+  @include btn-dark-styles;
+}
+.btn-outline-adaptive-inverse {
+  @include btn-outline-light-styles;
+}
+[data-bs-theme="dark"] .btn-outline-adaptive-inverse {
+  @include btn-outline-dark-styles;
+}
+// ============================================
+// Ghost Button
+// ============================================
+// Transparent background, no shadow - useful for subtle actions
+.btn-ghost {
+  background: transparent;
+  box-shadow: none;
+}

package/dist/assets/themes/bootstrap/overrides/_cursor-utilities.scss ADDED Viewed

@@ -0,0 +1,13 @@
+// =============================================================================
+// Cursor Utilities
+// =============================================================================
+// Cursor style utilities for interactive elements.
+// These are universal utilities available to all UJ themes.
+.cursor-default { cursor: default !important; }
+.cursor-pointer { cursor: pointer !important; }
+.cursor-help { cursor: help !important; }
+.cursor-move { cursor: move !important; }
+.cursor-grab { cursor: grab !important; }
+.cursor-not-allowed { cursor: not-allowed !important; }
+.cursor-crosshair { cursor: crosshair !important; }

package/dist/assets/themes/bootstrap/overrides/_index.scss ADDED Viewed

@@ -0,0 +1,29 @@
+// =============================================================================
+// UJ Bootstrap Overrides - Index
+// =============================================================================
+// Universal utilities and components that extend Bootstrap.
+// All themes inheriting from Bootstrap will get these automatically.
+// Buttons
+@use 'buttons-adaptive';
+// Colors
+@use 'soft-colors';
+// Components
+@use 'avatars';
+@use 'accordion';
+@use 'spinners';
+// Spacing & Layout
+@use 'spacing-extended';
+// Typography
+@use 'typography-utilities';
+// Utilities
+@use 'cursor-utilities';
+@use 'links';
+// Blog
+@use 'blog-images';

package/dist/assets/themes/bootstrap/overrides/_links.scss ADDED Viewed

@@ -0,0 +1,31 @@
+// =============================================================================
+// Link Utilities
+// =============================================================================
+// Custom link styles and variations.
+// These are universal utilities available to all UJ themes.
+// ============================================
+// Muted Link Style
+// ============================================
+// A link that looks like muted text but has hover effects
+.link-muted {
+  --bs-text-opacity: 1;
+  color: var(--bs-secondary-color) !important;
+  text-decoration: none;
+  transition: opacity 0.15s ease-in-out;
+  &:hover,
+  &:focus {
+    color: var(--bs-secondary-color) !important;
+    text-decoration: underline;
+    opacity: 0.75;
+  }
+}
+// ============================================
+// Active Nav Link Underline
+// ============================================
+// Adds underline to active nav links for better visibility
+.nav-link.active {
+  text-decoration: underline !important;
+}

package/dist/assets/themes/{classy/css/base → bootstrap/overrides}/_soft-colors.scss RENAMED Viewed

@@ -1,11 +1,18 @@
-// Classy Soft Color Utilities
-// Transparent color variations for all Bootstrap theme colors
-// Uses Bootstrap's $theme-colors map which is available via config
+// =============================================================================
+// Soft Color Utilities
+// =============================================================================
+// Transparent color variations for all Bootstrap theme colors.
+// These are universal utilities available to all UJ themes.
+// ============================================
+// Theme Colors (local definition for loop)
+// ============================================
+$_theme-color-names: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark";
 // ============================================
 // Soft Color Generation Loop
 // ============================================
-@each $color-name, $color-value in $theme-colors {
+@each $color-name in $_theme-color-names {
   // Soft background colors (50% opacity)
   .bg-#{$color-name}-soft {
     background-color: rgba(var(--bs-#{$color-name}-rgb), 0.5) !important;

package/dist/assets/themes/bootstrap/overrides/_spacing-extended.scss ADDED Viewed

@@ -0,0 +1,74 @@
+// =============================================================================
+// Extended Spacing Utilities
+// =============================================================================
+// Additional spacing utilities beyond Bootstrap's defaults.
+// These are universal utilities available to all UJ themes.
+// ============================================
+// Spacer (local definition - matches Bootstrap default)
+// ============================================
+$_spacer: 1rem;
+// ============================================
+// Extended Padding & Margin Classes (6-10)
+// ============================================
+// Size mapping: 6=4rem, 7=5rem, 8=6rem, 9=8rem, 10=10rem
+@for $i from 6 through 10 {
+  $size: if($i == 6, 4, if($i == 7, 5, if($i == 8, 6, if($i == 9, 8, 10))));
+  // Padding
+  .p-#{$i} { padding: $_spacer * $size !important; }
+  .pt-#{$i} { padding-top: $_spacer * $size !important; }
+  .pb-#{$i} { padding-bottom: $_spacer * $size !important; }
+  .ps-#{$i} { padding-left: $_spacer * $size !important; }
+  .pe-#{$i} { padding-right: $_spacer * $size !important; }
+  .px-#{$i} {
+    padding-left: $_spacer * $size !important;
+    padding-right: $_spacer * $size !important;
+  }
+  .py-#{$i} {
+    padding-top: $_spacer * $size !important;
+    padding-bottom: $_spacer * $size !important;
+  }
+  // Margin
+  .m-#{$i} { margin: $_spacer * $size !important; }
+  .mt-#{$i} { margin-top: $_spacer * $size !important; }
+  .mb-#{$i} { margin-bottom: $_spacer * $size !important; }
+  .ms-#{$i} { margin-left: $_spacer * $size !important; }
+  .me-#{$i} { margin-right: $_spacer * $size !important; }
+  .mx-#{$i} {
+    margin-left: $_spacer * $size !important;
+    margin-right: $_spacer * $size !important;
+  }
+  .my-#{$i} {
+    margin-top: $_spacer * $size !important;
+    margin-bottom: $_spacer * $size !important;
+  }
+}
+// ============================================
+// Viewport Height Utilities
+// ============================================
+.vh-50 { height: 50vh !important; }
+.vh-75 { height: 75vh !important; }
+.vh-80 { height: 80vh !important; }
+.vh-90 { height: 90vh !important; }
+.vh-100 { height: 100vh !important; }
+// Min-Height utilities using viewport height (vh) units
+.min-vh-50 { min-height: 50vh !important; }
+.min-vh-75 { min-height: 75vh !important; }
+.min-vh-80 { min-height: 80vh !important; }
+.min-vh-90 { min-height: 90vh !important; }
+.min-vh-100 { min-height: 100vh !important; }
+// ============================================
+// Max Width Utilities (Bootstrap Breakpoints)
+// ============================================
+// Max width utility classes based on Bootstrap grid breakpoints
+.mw-sm { max-width: 576px !important; }
+.mw-md { max-width: 768px !important; }
+.mw-lg { max-width: 992px !important; }
+.mw-xl { max-width: 1200px !important; }
+.mw-xxl { max-width: 1400px !important; }

package/dist/assets/themes/{classy/css/components → bootstrap/overrides}/_spinners.scss RENAMED Viewed

@@ -1,5 +1,8 @@
-// Classy Spinner Components
-// Custom spinner size variants for Bootstrap spinners
+// =============================================================================
+// Extended Spinner Sizes
+// =============================================================================
+// Large spinner variants for Bootstrap spinners.
+// These are universal utilities available to all UJ themes.
 // ============================================
 // Large Spinner - Border Variant
@@ -16,4 +19,4 @@
 .spinner-grow-lg {
   --bs-spinner-width: 3rem;
   --bs-spinner-height: 3rem;
-}
+}

package/dist/assets/themes/bootstrap/overrides/_typography-utilities.scss ADDED Viewed

@@ -0,0 +1,40 @@
+// =============================================================================
+// Typography Utilities
+// =============================================================================
+// Font weight, letter spacing, and line height utilities.
+// These are universal utilities available to all UJ themes.
+// ============================================
+// Font Weight Utilities
+// ============================================
+.fw-300 { font-weight: 300 !important; }
+.fw-400 { font-weight: 400 !important; }
+.fw-500 { font-weight: 500 !important; }
+.fw-600 { font-weight: 600 !important; }
+.fw-700 { font-weight: 700 !important; }
+.fw-800 { font-weight: 800 !important; }
+.fw-900 { font-weight: 900 !important; }
+// ============================================
+// Letter Spacing Utilities
+// ============================================
+.ls-tighter { letter-spacing: -0.04em !important; }
+.ls-tight { letter-spacing: -0.02em !important; }
+.ls-normal { letter-spacing: 0 !important; }
+.ls-wide { letter-spacing: 0.02em !important; }
+.ls-wider { letter-spacing: 0.04em !important; }
+// ============================================
+// Line Height Utilities
+// ============================================
+.lh-1 { line-height: 1 !important; }
+.lh-tight { line-height: 1.2 !important; }
+.lh-normal { line-height: 1.6 !important; }
+.lh-relaxed { line-height: 1.8 !important; }
+.lh-loose { line-height: 2 !important; }
+// ============================================
+// Text Decoration Utilities
+// ============================================
+.text-decoration-dotted { text-decoration-style: dotted !important; }
+.text-decoration-dashed { text-decoration-style: dashed !important; }

package/dist/assets/themes/classy/_theme.js CHANGED Viewed

@@ -1,5 +1,6 @@
 // Import the theme entry point
-import bootstrap from '../bootstrap/js/index.umd.js';
+// __main_assets__ is a webpack alias that resolves to UJM's dist/assets
+import bootstrap from '__main_assets__/themes/bootstrap/js/index.umd.js';
 import { ready as domReady } from 'web-manager/modules/dom.js';
 // Make Bootstrap available globally

package/dist/assets/themes/classy/_theme.scss CHANGED Viewed

@@ -9,8 +9,6 @@
 @import 'css/base/animations';
 @import 'css/base/backgrounds';
 @import 'css/base/borders';
-@import 'css/base/soft-colors';
-@import 'css/base/spacing';
 @import 'css/base/typography';
 @import 'css/base/utilities';
@@ -22,13 +20,14 @@
 // Import component styles
 @import 'css/components/accordion';
-@import 'css/components/avatars';
 @import 'css/components/badges';
 @import 'css/components/buttons';
 @import 'css/components/cards';
 @import 'css/components/carousel';
 @import 'css/components/forms';
-@import 'css/components/links';
 @import 'css/components/infinite-scroll';
-@import 'css/components/spinners';
 @import 'css/components/text';
+// Import universal Bootstrap overrides (shared across all UJ themes)
+// Must come AFTER Bootstrap is loaded via config to use @extend
+@import '../bootstrap/overrides';

package/dist/assets/themes/classy/css/base/_typography.scss CHANGED Viewed

@@ -110,37 +110,6 @@ h6, .h6 {
   line-height: 1.6;
 }
-// ============================================
-// Font Weight Utilities
-// ============================================
-.fw-300 { font-weight: 300 !important; }
-.fw-400 { font-weight: 400 !important; }
-.fw-500 { font-weight: 500 !important; }
-.fw-600 { font-weight: 600 !important; }
-.fw-700 { font-weight: 700 !important; }
-.fw-800 { font-weight: 800 !important; }
-.fw-900 { font-weight: 900 !important; }
-// ============================================
-// Letter Spacing
-// ============================================
-.ls-tight { letter-spacing: -0.02em !important; }
-.ls-tighter { letter-spacing: -0.04em !important; }
-.ls-normal { letter-spacing: 0 !important; }
-.ls-wide { letter-spacing: 0.02em !important; }
-.ls-wider { letter-spacing: 0.04em !important; }
-// ============================================
-// Line Height Utilities
-// ============================================
-.lh-1 { line-height: 1 !important; }
-.lh-tight { line-height: 1.2 !important; }
-.lh-normal { line-height: 1.6 !important; }
-.lh-relaxed { line-height: 1.8 !important; }
-.lh-loose { line-height: 2 !important; }
 // ============================================
 // Code Blocks
 // ============================================

package/dist/assets/themes/classy/css/base/_utilities.scss CHANGED Viewed

@@ -2,7 +2,7 @@
 // Custom helper classes and theme-specific utilities
 // ============================================
-// Shadow Utilities
+// Shadow Utilities (Classy-specific)
 // ============================================
 .shadow-xs { box-shadow: $classy-shadow-xs !important; }
 .shadow-sm { box-shadow: $classy-shadow-sm !important; }
@@ -13,16 +13,3 @@
 .shadow-glow { box-shadow: $classy-shadow-glow !important; }
 .shadow-none { box-shadow: none !important; }
-// ============================================
-// Cursor Utilities
-// ============================================
-.cursor-default { cursor: default !important; }
-.cursor-pointer { cursor: pointer !important; }
-.cursor-help { cursor: help !important; }
-.cursor-move { cursor: move !important; }
-.cursor-grab { cursor: grab !important; }
-.cursor-not-allowed { cursor: not-allowed !important; }
-.cursor-crosshair { cursor: crosshair !important; }
-// .cursor-wait { cursor: wait !important; }

package/dist/assets/themes/classy/css/components/_buttons.scss CHANGED Viewed

@@ -208,78 +208,6 @@
   }
 }
-// ============================================
-// Ghost Button
-// ============================================
-.btn-ghost {
-  background: transparent;
-  box-shadow: none;
-}
-// ============================================
-// Soft Buttons
-// ============================================
-.btn-soft-primary {
-  background: rgba($primary, 0.1);
-  color: $primary;
-  &:hover {
-    background: rgba($primary, 0.2);
-    color: $primary;
-    box-shadow: $classy-shadow-md;
-  }
-}
-.btn-soft-secondary {
-  background: rgba($secondary, 0.1);
-  color: $secondary;
-  &:hover {
-    background: rgba($secondary, 0.2);
-    color: $secondary;
-  }
-}
-.btn-soft-success {
-  background: rgba($success, 0.1);
-  color: $success;
-  &:hover {
-    background: rgba($success, 0.2);
-    color: $success;
-  }
-}
-.btn-soft-danger {
-  background: rgba($danger, 0.1);
-  color: $danger;
-  &:hover {
-    background: rgba($danger, 0.2);
-    color: $danger;
-  }
-}
-.btn-soft-warning {
-  background: rgba($warning, 0.1);
-  color: $warning;
-  &:hover {
-    background: rgba($warning, 0.2);
-    color: $warning;
-  }
-}
-.btn-soft-info {
-  background: rgba($info, 0.1);
-  color: $info;
-  &:hover {
-    background: rgba($info, 0.2);
-    color: $info;
-  }
-}
 // ============================================
 // Button Groups
 // ============================================
@@ -311,67 +239,6 @@
   }
 }
-// ============================================
-// Adaptive Theme Buttons
-// ============================================
-.btn-adaptive {
-  @extend .btn-dark;
-}
-[data-bs-theme="dark"] .btn-adaptive {
-  @extend .btn-light;
-}
-.btn-outline-adaptive {
-  @extend .btn-outline-dark;
-  color: var(--bs-body-color) !important;
-  &:hover {
-    color: white !important;
-  }
-  &.active,
-  &:active {
-    background: $dark !important;
-    border-color: $dark !important;
-    color: white !important;
-  }
-}
-[data-bs-theme="dark"] .btn-outline-adaptive {
-  @extend .btn-outline-light;
-  color: var(--bs-body-color) !important;
-  &:hover {
-    color: $dark !important;
-  }
-  &.active,
-  &:active {
-    background: $light !important;
-    border-color: $light !important;
-    color: $dark !important;
-  }
-}
-// ============================================
-// Adaptive Inverse Buttons
-// ============================================
-.btn-adaptive-inverse {
-  @extend .btn-light;
-}
-[data-bs-theme="dark"] .btn-adaptive-inverse {
-  @extend .btn-dark;
-}
-.btn-outline-adaptive-inverse {
-  @extend .btn-outline-light;
-}
-[data-bs-theme="dark"] .btn-outline-adaptive-inverse {
-  @extend .btn-outline-dark;
-}
 // ============================================
 // Gradient Rainbow Button
 // ============================================

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ultimate-jekyll-manager",
-  "version": "0.0.189",
+  "version": "0.0.190",
   "description": "Ultimate Jekyll dependency manager",
   "main": "dist/index.js",
   "exports": {

package/dist/assets/themes/classy/css/base/_spacing.scss DELETED Viewed

@@ -1,68 +0,0 @@
-// Classy Extended Spacing
-// Additional spacing utilities beyond Bootstrap's defaults
-// Uses Bootstrap's $spacer variable which is available via config
-// ============================================
-// Extended Padding Classes
-// ============================================
-@for $i from 6 through 10 {
-  $size: if($i == 6, 4, if($i == 7, 5, if($i == 8, 6, if($i == 9, 8, 10))));
-  .p-#{$i} { padding: $spacer * $size !important; }
-  .pt-#{$i} { padding-top: $spacer * $size !important; }
-  .pb-#{$i} { padding-bottom: $spacer * $size !important; }
-  .ps-#{$i} { padding-left: $spacer * $size !important; }
-  .pe-#{$i} { padding-right: $spacer * $size !important; }
-  .px-#{$i} {
-    padding-left: $spacer * $size !important;
-    padding-right: $spacer * $size !important;
-  }
-  .py-#{$i} {
-    padding-top: $spacer * $size !important;
-    padding-bottom: $spacer * $size !important;
-  }
-}
-// ============================================
-// VH classes
-// ============================================
-// Height utilities using viewport height (vh) units
-.vh-50 { height: 50vh !important; }
-.vh-75 { height: 75vh !important; }
-.vh-80 { height: 80vh !important; }
-.vh-90 { height: 90vh !important; }
-.vh-100 { height: 100vh !important; }
-// Min-Height utilities using viewport height (vh) units
-.min-vh-50 { min-height: 50vh !important; }
-.min-vh-75 { min-height: 75vh !important; }
-.min-vh-80 { min-height: 80vh !important; }
-.min-vh-90 { min-height: 90vh !important; }
-.min-vh-100 { min-height: 100vh !important; }
-// ============================================
-// Max Width Utilities (Bootstrap Breakpoints)
-// ============================================
-// Max width utility classes based on Bootstrap grid breakpoints
-// Usage: mw-sm, mw-md, mw-lg, mw-xl, mw-xxl
-// These set the max-width to match Bootstrap's container breakpoints
-.mw-sm {
-  max-width: 576px !important;
-}
-.mw-md {
-  max-width: 768px !important;
-}
-.mw-lg {
-  max-width: 992px !important;
-}
-.mw-xl {
-  max-width: 1200px !important;
-}
-.mw-xxl {
-  max-width: 1400px !important;
-}

package/dist/assets/themes/classy/css/components/_links.scss DELETED Viewed

@@ -1,19 +0,0 @@
-// Classy Link Components
-// Custom link styles and variations
-// ============================================
-// Muted Link Style
-// ============================================
-.link-muted {
-  --bs-text-opacity: 1;
-  color: var(--bs-secondary-color) !important;
-  text-decoration: none;
-  transition: opacity 0.15s ease-in-out;
-  &:hover,
-  &:focus {
-    color: var(--bs-secondary-color) !important;
-    text-decoration: underline;
-    opacity: 0.75;
-  }
-}