@omega.js/web 0.1.0

package/themes/bootstrap/overrides/_buttons-adaptive.scss

@@ -0,0 +1,141 @@
+// =============================================================================
+// Adaptive Theme Buttons
+// =============================================================================
+// Buttons that automatically flip between light/dark styles based on theme.
+// These are universal utilities available to all omega themes.
+// Uses CSS custom properties from _color-shades.scss for hover/active states.
+
+// ============================================
+// Solid Adaptive Buttons
+// ============================================
+// Dark button in light mode, light button in dark mode
+.btn-adaptive {
+  --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: var(--bs-dark-hover);
+  --bs-btn-hover-border-color: var(--bs-dark-active);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--bs-dark-active);
+  --bs-btn-active-border-color: var(--bs-dark-active);
+}
+
+[data-bs-theme="dark"] .btn-adaptive {
+  --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: var(--bs-light-hover);
+  --bs-btn-hover-border-color: var(--bs-light-active);
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: var(--bs-light-active);
+  --bs-btn-active-border-color: var(--bs-light-active);
+}
+
+// ============================================
+// Outline Adaptive Buttons
+// ============================================
+.btn-outline-adaptive {
+  --bs-btn-color: var(--bs-dark);
+  --bs-btn-bg: transparent;
+  --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-active-color: #fff;
+  --bs-btn-active-bg: var(--bs-dark);
+  --bs-btn-active-border-color: var(--bs-dark);
+
+  color: var(--bs-body-color);
+  border-color: var(--bs-dark);
+
+  // btn-check checked state (radio/checkbox toggle buttons)
+  .btn-check:checked + & {
+    color: var(--bs-btn-active-color);
+    border-color: var(--bs-btn-active-border-color);
+  }
+}
+
+[data-bs-theme="dark"] .btn-outline-adaptive {
+  --bs-btn-color: var(--bs-light);
+  --bs-btn-bg: transparent;
+  --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-active-color: #000;
+  --bs-btn-active-bg: var(--bs-light);
+  --bs-btn-active-border-color: var(--bs-light);
+
+  border-color: var(--bs-light);
+}
+
+// ============================================
+// Inverse Adaptive Buttons
+// ============================================
+// The opposite of adaptive - light in light mode, dark in dark mode
+.btn-adaptive-inverse {
+  --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: var(--bs-light-hover);
+  --bs-btn-hover-border-color: var(--bs-light-active);
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: var(--bs-light-active);
+  --bs-btn-active-border-color: var(--bs-light-active);
+}
+
+[data-bs-theme="dark"] .btn-adaptive-inverse {
+  --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: var(--bs-dark-hover);
+  --bs-btn-hover-border-color: var(--bs-dark-active);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--bs-dark-active);
+  --bs-btn-active-border-color: var(--bs-dark-active);
+}
+
+// ============================================
+// Outline Inverse Adaptive Buttons
+// ============================================
+.btn-outline-adaptive-inverse {
+  --bs-btn-color: var(--bs-light);
+  --bs-btn-bg: transparent;
+  --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-active-color: #000;
+  --bs-btn-active-bg: var(--bs-light);
+  --bs-btn-active-border-color: var(--bs-light);
+
+  color: var(--bs-body-color);
+  border-color: var(--bs-light);
+}
+
+[data-bs-theme="dark"] .btn-outline-adaptive-inverse {
+  --bs-btn-color: var(--bs-dark);
+  --bs-btn-bg: transparent;
+  --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-active-color: #fff;
+  --bs-btn-active-bg: var(--bs-dark);
+  --bs-btn-active-border-color: var(--bs-dark);
+
+  border-color: var(--bs-dark);
+}
+
+// ============================================
+// Ghost Button
+// ============================================
+// Transparent background, no shadow - useful for subtle actions
+.btn-ghost {
+  background: transparent;
+  box-shadow: none;
+}

package/themes/bootstrap/overrides/_color-shades.scss

@@ -0,0 +1,25 @@
+// =============================================================================
+// Color Shade CSS Custom Properties
+// =============================================================================
+// Provides hover/active shade variants for light and dark colors.
+// These are used by adaptive buttons and can be reused elsewhere.
+
+:root,
+[data-bs-theme="light"] {
+  // Dark color shades (for hover/active states on dark buttons)
+  --bs-dark-hover: #3a3a44;
+  --bs-dark-active: #34343e;
+
+  // Light color shades (for hover/active states on light buttons)
+  --bs-light-hover: #d3d6db;
+  --bs-light-active: #c8ccd1;
+}
+
+[data-bs-theme="dark"] {
+  // In dark mode, the values are the same but semantic meaning is swapped
+  --bs-dark-hover: #3a3a44;
+  --bs-dark-active: #34343e;
+
+  --bs-light-hover: #d3d6db;
+  --bs-light-active: #c8ccd1;
+}

package/themes/bootstrap/overrides/_cursor-utilities.scss

@@ -0,0 +1,13 @@
+// =============================================================================
+// Cursor Utilities
+// =============================================================================
+// Cursor style utilities for interactive elements.
+// These are universal utilities available to all omega 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/themes/bootstrap/overrides/_index.scss

@@ -0,0 +1,30 @@
+// =============================================================================
+// Omega 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 'color-shades';
+@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/themes/bootstrap/overrides/_links.scss

@@ -0,0 +1,26 @@
+// =============================================================================
+// Link Utilities
+// =============================================================================
+// Custom link styles and variations.
+// These are universal utilities available to all omega 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;
+  }
+}
+
+// (The UJM-era forced underline on .nav-link.active is gone — every nav
+// component owns its active look: pills fill, tabs border, classy fills.)

package/themes/bootstrap/overrides/_soft-colors.scss

@@ -0,0 +1,99 @@
+// =============================================================================
+// Soft Color Utilities
+// =============================================================================
+// Transparent color variations for all Bootstrap theme colors.
+// These are universal utilities available to all omega 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 in $_theme-color-names {
+  // Soft background colors (50% opacity)
+  .bg-#{$color-name}-soft {
+    background-color: rgba(var(--bs-#{$color-name}-rgb), 0.5) !important;
+  }
+
+  // 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;
+    }
+  }
+}

package/themes/bootstrap/overrides/_spacing-extended.scss

@@ -0,0 +1,74 @@
+// =============================================================================
+// Extended Spacing Utilities
+// =============================================================================
+// Additional spacing utilities beyond Bootstrap's defaults.
+// These are universal utilities available to all omega 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/themes/bootstrap/overrides/_spinners.scss

@@ -0,0 +1,22 @@
+// =============================================================================
+// Extended Spinner Sizes
+// =============================================================================
+// Large spinner variants for Bootstrap spinners.
+// These are universal utilities available to all omega themes.
+
+// ============================================
+// Large Spinner - Border Variant
+// ============================================
+.spinner-border-lg {
+  --bs-spinner-width: 3rem;
+  --bs-spinner-height: 3rem;
+  --bs-spinner-border-width: 0.375rem;
+}
+
+// ============================================
+// Large Spinner - Grow Variant
+// ============================================
+.spinner-grow-lg {
+  --bs-spinner-width: 3rem;
+  --bs-spinner-height: 3rem;
+}

package/themes/bootstrap/overrides/_typography-utilities.scss

@@ -0,0 +1,40 @@
+// =============================================================================
+// Typography Utilities
+// =============================================================================
+// Font weight, letter spacing, and line height utilities.
+// These are universal utilities available to all omega 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/themes/bootstrap/scss/_accordion.scss

@@ -0,0 +1,153 @@
+//
+// Base styles
+//
+
+.accordion {
+  // scss-docs-start accordion-css-vars
+  --#{$prefix}accordion-color: #{$accordion-color};
+  --#{$prefix}accordion-bg: #{$accordion-bg};
+  --#{$prefix}accordion-transition: #{$accordion-transition};
+  --#{$prefix}accordion-border-color: #{$accordion-border-color};
+  --#{$prefix}accordion-border-width: #{$accordion-border-width};
+  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
+  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+  --#{$prefix}accordion-btn-color: #{$accordion-button-color};
+  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
+  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
+  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
+  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
+  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+  // scss-docs-end accordion-css-vars
+}
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
+  @include font-size($font-size-base);
+  color: var(--#{$prefix}accordion-btn-color);
+  text-align: left; // Reset button style
+  background-color: var(--#{$prefix}accordion-btn-bg);
+  border: 0;
+  @include border-radius(0);
+  overflow-anchor: none;
+  @include transition(var(--#{$prefix}accordion-transition));
+
+  &:not(.collapsed) {
+    color: var(--#{$prefix}accordion-active-color);
+    background-color: var(--#{$prefix}accordion-active-bg);
+    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
+
+    &::after {
+      background-image: var(--#{$prefix}accordion-btn-active-icon);
+      transform: var(--#{$prefix}accordion-btn-icon-transform);
+    }
+  }
+
+  // Accordion icon
+  &::after {
+    flex-shrink: 0;
+    width: var(--#{$prefix}accordion-btn-icon-width);
+    height: var(--#{$prefix}accordion-btn-icon-width);
+    margin-left: auto;
+    content: "";
+    background-image: var(--#{$prefix}accordion-btn-icon);
+    background-repeat: no-repeat;
+    background-size: var(--#{$prefix}accordion-btn-icon-width);
+    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    z-index: 3;
+    outline: 0;
+    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+  }
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  color: var(--#{$prefix}accordion-color);
+  background-color: var(--#{$prefix}accordion-bg);
+  border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+
+  &:first-of-type {
+    @include border-top-radius(var(--#{$prefix}accordion-border-radius));
+
+    > .accordion-header .accordion-button {
+      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
+    }
+  }
+
+  &:not(:first-of-type) {
+    border-top: 0;
+  }
+
+  // Only set a border-radius on the last item if the accordion is collapsed
+  &:last-of-type {
+    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+
+    > .accordion-header .accordion-button {
+      &.collapsed {
+        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+      }
+    }
+
+    > .accordion-collapse {
+      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+    }
+  }
+}
+
+.accordion-body {
+  padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
+}
+
+
+// Flush accordion items
+//
+// Remove borders and border-radius to keep accordion items edge-to-edge.
+
+.accordion-flush {
+  > .accordion-item {
+    border-right: 0;
+    border-left: 0;
+    @include border-radius(0);
+
+    &:first-child { border-top: 0; }
+    &:last-child { border-bottom: 0; }
+
+    // stylelint-disable selector-max-class
+    > .accordion-collapse,
+    > .accordion-header .accordion-button,
+    > .accordion-header .accordion-button.collapsed {
+      @include border-radius(0);
+    }
+    // stylelint-enable selector-max-class
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .accordion-button::after {
+      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+      --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+    }
+  }
+}