browser-extension-manager 1.0.13 → 1.1.0

package/dist/assets/themes/classy/css/base/_backgrounds.scss

@@ -0,0 +1,191 @@
+// Classy Background Utilities
+// Background gradients, patterns, and visual effects
+
+// ============================================
+// Gradient Backgrounds
+// ============================================
+.bg-gradient-primary {
+  background-image: $classy-gradient-primary !important;
+  background-size: 300% 300% !important;
+}
+
+.bg-gradient-dark {
+  background-image: $classy-gradient-dark !important;
+  background-size: 300% 300% !important;
+}
+
+.bg-gradient-light {
+  background-image: $classy-gradient-light !important;
+  background-size: 300% 300% !important;
+}
+
+.bg-gradient-sunset {
+  background-image: $classy-gradient-sunset !important;
+  background-size: 300% 300% !important;
+}
+
+.bg-gradient-aurora {
+  background-image: $classy-gradient-aurora !important;
+  background-size: 300% 300% !important;
+}
+
+.bg-gradient-rainbow {
+  background-image: $classy-gradient-rainbow !important;
+  background-size: 300% 300% !important;
+}
+
+// Grain texture modifier - add this class alongside bg-gradient-* to add grain effect
+.gradient-grain {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+    opacity: 0.6;
+    mix-blend-mode: overlay;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  // Ensure content stays above the grain overlay
+  > * {
+    position: relative;
+    z-index: 2;
+  }
+}
+
+// @keyframes gradient-shift {
+//   0%, 100% {
+//     background-position: 0% 50%, 0% 0%;
+//   }
+//   25% {
+//     background-position: 100% 50%, 100% 100%;
+//   }
+//   50% {
+//     background-position: 100% 0%, 50% 50%;
+//   }
+//   75% {
+//     background-position: 0% 100%, 100% 0%;
+//   }
+// }
+
+// .bg-gradient-rainbow {
+//   position: relative;
+//   background:
+//     linear-gradient(
+//       to bottom right,
+//       rgba(0, 255, 209, 0.5),
+//       rgba(170, 70, 252, 0.69)
+//     ),
+//     radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5)) !important;
+//   background-size: 200% 200%, 200% 200% !important;
+//   animation: gradient-shift 15s ease infinite;
+
+//   &::before {
+//     content: '';
+//     position: absolute;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+//     opacity: 1;
+//     mix-blend-mode: overlay;
+//     pointer-events: none;
+//     z-index: 1;
+//     filter: contrast(110%) brightness(105%);
+//   }
+
+//   // Ensure content stays above the grain overlay
+//   > * {
+//     position: relative;
+//     z-index: 2;
+//   }
+// }
+
+
+
+// ============================================
+// Glass Morphism Mixin
+// ============================================
+@mixin glassy-effect {
+  background: transparent !important;
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+  position: relative;
+
+  // Glass effect overlay with body color using custom property
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--bs-body-bg);
+    opacity: var(--navbar-before-opacity, 0.25);
+    border-radius: inherit;
+    z-index: -1;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+  }
+
+  // Dark mode adjustments
+  [data-bs-theme="dark"] & {
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  }
+}
+
+// ============================================
+// Glass Morphism Classes
+// ============================================
+.bg-glassy {
+  @include glassy-effect;
+}
+
+// ============================================
+// Pattern Overlays
+// ============================================
+.bg-pattern {
+  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235B47FB' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+
+// ============================================
+// Blur Effects
+// ============================================
+.blur-sm {
+  filter: blur(4px);
+}
+
+.blur-md {
+  filter: blur(8px);
+}
+
+.blur-lg {
+  filter: blur(16px);
+}
+
+// ============================================
+// Filter Effects
+// ============================================
+.grayscale {
+  filter: grayscale(100%);
+
+  &:hover {
+    filter: grayscale(0);
+  }
+}
+
+// ============================================
+// Adaptive Inverse Background
+// ============================================
+.bg-adaptive-inverse {
+  @extend .bg-dark;
+}
+
+[data-bs-theme="dark"] .bg-adaptive-inverse {
+  @extend .bg-light;
+}

package/dist/assets/themes/classy/css/base/_borders.scss

@@ -0,0 +1,65 @@
+// Classy Border Utilities
+// Border styles, gradients, and decorative dividers
+
+// ============================================
+// Border Radius
+// ============================================
+.rounded-sm { border-radius: $classy-radius-sm !important; }
+.rounded-md { border-radius: $classy-radius-md !important; }
+.rounded-lg { border-radius: $classy-radius-lg !important; }
+.rounded-xl { border-radius: $classy-radius-xl !important; }
+.rounded-2xl { border-radius: $classy-radius-2xl !important; }
+.rounded-full { border-radius: $classy-radius-full !important; }
+
+// ============================================
+// Gradient Borders
+// ============================================
+.border-gradient-rainbow {
+  --bs-border-width: 3px;
+  position: relative;
+  border: none !important;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: calc(var(--bs-border-width) * -1);
+    border-radius: inherit;
+    background: $classy-gradient-rainbow;
+    background-size: 300% 300%;
+    z-index: -1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: inherit;
+    z-index: -1;
+  }
+
+  // Override Bootstrap border width classes to work with gradient border
+  &.border-0 { --bs-border-width: 0; }
+  &.border-1 { --bs-border-width: 1px; }
+  &.border-2 { --bs-border-width: 2px; }
+  &.border-3 { --bs-border-width: 3px; }
+  &.border-4 { --bs-border-width: 4px; }
+  &.border-5 { --bs-border-width: 5px; }
+}
+
+// ============================================
+// Divider Styles
+// ============================================
+.divider {
+  height: 1px;
+  background: $classy-gray-lighter;
+  margin: $classy-spacing-2xl 0;
+
+  &.divider-gradient {
+    background: $classy-gradient-primary;
+  }
+
+  &.divider-fade {
+    background: linear-gradient(to right, transparent, $classy-gray-lighter 20%, $classy-gray-lighter 80%, transparent);
+  }
+}

package/dist/assets/themes/classy/css/base/_root.scss

@@ -0,0 +1,58 @@
+// Classy Theme CSS Custom Properties
+// Converts SCSS variables to CSS custom properties for runtime theming
+// These override Bootstrap's CSS variables and allow dynamic theme switching
+
+// ============================================
+// Light Mode (Default)
+// ============================================
+:root,
+[data-bs-theme="light"] {
+  // Background colors
+  --bs-body-bg: #{$classy-bg-light};
+  --bs-body-bg-rgb: #{red($classy-bg-light)}, #{green($classy-bg-light)}, #{blue($classy-bg-light)};
+
+  --bs-secondary-bg: #{$classy-bg-light-secondary};
+  --bs-secondary-bg-rgb: #{red($classy-bg-light-secondary)}, #{green($classy-bg-light-secondary)}, #{blue($classy-bg-light-secondary)};
+
+  --bs-tertiary-bg: #{$classy-bg-light-tertiary};
+  --bs-tertiary-bg-rgb: #{red($classy-bg-light-tertiary)}, #{green($classy-bg-light-tertiary)}, #{blue($classy-bg-light-tertiary)};
+
+  // Component backgrounds - use secondary bg for elevated surfaces
+  // --bs-card-bg: #{$classy-bg-light-secondary};
+  // --bs-dropdown-bg: #{$classy-bg-light-secondary};
+  // --bs-modal-bg: #{$classy-bg-light-secondary};
+  // --bs-popover-bg: #{$classy-bg-light-secondary};
+  // --bs-offcanvas-bg: #{$classy-bg-light-secondary};
+  // --bs-accordion-bg: #{$classy-bg-light-secondary};
+
+  // Add more Bootstrap overrides here as needed
+  // Examples:
+  // --bs-body-color: #212529;
+  // --bs-border-color: #dee2e6;
+  // --bs-link-color: #{$primary};
+}
+
+// ============================================
+// Dark Mode
+// ============================================
+[data-bs-theme="dark"] {
+  // Background colors
+  --bs-body-bg: #{$classy-bg-dark};
+  --bs-body-bg-rgb: #{red($classy-bg-dark)}, #{green($classy-bg-dark)}, #{blue($classy-bg-dark)};
+
+  --bs-secondary-bg: #{$classy-bg-dark-secondary};
+  --bs-secondary-bg-rgb: #{red($classy-bg-dark-secondary)}, #{green($classy-bg-dark-secondary)}, #{blue($classy-bg-dark-secondary)};
+
+  --bs-tertiary-bg: #{$classy-bg-dark-tertiary};
+  --bs-tertiary-bg-rgb: #{red($classy-bg-dark-tertiary)}, #{green($classy-bg-dark-tertiary)}, #{blue($classy-bg-dark-tertiary)};
+
+  // Component backgrounds - use secondary bg for elevated surfaces
+  // --bs-card-bg: #{$classy-bg-dark-secondary};
+  // --bs-dropdown-bg: #{$classy-bg-dark-secondary};
+  // --bs-modal-bg: #{$classy-bg-dark-secondary};
+  // --bs-popover-bg: #{$classy-bg-dark-secondary};
+  // --bs-offcanvas-bg: #{$classy-bg-dark-secondary};
+  // --bs-accordion-bg: #{$classy-bg-dark-secondary};
+
+  // Add more Bootstrap overrides here as needed
+}

package/dist/assets/themes/classy/css/base/_soft-colors.scss

@@ -0,0 +1,92 @@
+// 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 Generation Loop
+// ============================================
+@each $color-name, $color-value in $theme-colors {
+  // 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/dist/assets/themes/classy/css/base/_spacing.scss

@@ -0,0 +1,64 @@
+// 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; }
+
+// 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/base/_typography.scss

@@ -0,0 +1,179 @@
+// Classy Typography
+// Modern font system with responsive headings and utilities
+
+// ============================================
+// CSS Custom Properties
+// ============================================
+:root {
+  --bs-font-sans-serif: #{$font-family-sans-serif};
+  --bs-font-monospace: #{$classy-font-mono};
+
+  // Custom CSS variables for easy access
+  --classy-font-primary: #{$font-family-sans-serif};
+  --classy-font-mono: #{$classy-font-mono};
+}
+
+// ============================================
+// Base Typography
+// ============================================
+body {
+  font-family: $font-family-sans-serif;
+  font-size: $classy-font-size-base;
+  font-weight: 400;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// ============================================
+// Heading Styles
+// ============================================
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  font-family: $font-family-sans-serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+}
+
+h1, .h1 {
+  font-size: clamp(2.5rem, 5vw, $classy-font-size-6xl);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+
+  @media (max-width: $classy-breakpoint-md) {
+    font-size: $classy-font-size-4xl;
+  }
+}
+
+h2, .h2 {
+  font-size: clamp(2rem, 4vw, $classy-font-size-5xl);
+  font-weight: 700;
+
+  @media (max-width: $classy-breakpoint-md) {
+    font-size: $classy-font-size-3xl;
+  }
+}
+
+h3, .h3 {
+  font-size: clamp(1.5rem, 3vw, $classy-font-size-4xl);
+  font-weight: 600;
+
+  @media (max-width: $classy-breakpoint-md) {
+    font-size: $classy-font-size-2xl;
+  }
+}
+
+h4, .h4 {
+  font-size: $classy-font-size-2xl;
+  font-weight: 600;
+}
+
+h5, .h5 {
+  font-size: $classy-font-size-xl;
+  font-weight: 500;
+}
+
+h6, .h6 {
+  font-size: $classy-font-size-lg;
+  font-weight: 500;
+}
+
+// ============================================
+// Display Typography
+// ============================================
+.display-1 {
+  font-size: clamp(3rem, 7vw, 5rem);
+  font-weight: 900;
+  letter-spacing: -0.04em;
+  line-height: 1;
+}
+
+.display-2 {
+  font-size: clamp(2.5rem, 6vw, 4rem);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+}
+
+// ============================================
+// Lead Text
+// ============================================
+.lead {
+  font-size: $classy-font-size-xl;
+  font-weight: 400;
+  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
+// ============================================
+code, kbd, pre, samp {
+  font-family: $classy-font-mono;
+}
+
+code {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.875em;
+  border-radius: $classy-radius-sm;
+}
+
+pre {
+  padding: $classy-spacing-lg;
+  border-radius: $classy-radius-lg;
+  overflow-x: auto;
+
+  code {
+    padding: 0;
+    font-size: inherit;
+    border-radius: 0;
+  }
+}
+
+// ============================================
+// Blockquotes
+// ============================================
+blockquote {
+  padding-left: $classy-spacing-lg;
+  border-left-width: 4px;
+  border-left-style: solid;
+  font-size: $classy-font-size-lg;
+  font-style: italic;
+}
+