@magmonium/one 0.0.4 → 0.0.7

package/sass/animations/background/_particle.sass

@@ -0,0 +1,122 @@
+// Particle/Object Background Animations
+// Contains: particles, geometric, crystal
+
+// Animation: Floating Particles
+@mixin particles-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%)
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      border-radius: 50%
+      background: rgba(255, 255, 255, 0.1)
+      animation: floatParticles 12s infinite linear
+
+    &::before
+      width: 20px
+      height: 20px
+      top: 20%
+      left: 10%
+      animation-delay: 0s
+
+    &::after
+      width: 15px
+      height: 15px
+      top: 70%
+      right: 20%
+      animation-delay: -6s
+
+// Animation: Geometric Shapes
+@mixin geometric-animation()
+  .m-jumbotron__background
+    background: linear-gradient(60deg, #f093fb 0%, #f5576c 100%)
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      border: 2px solid rgba(255, 255, 255, 0.2)
+      animation: rotateGeometric 15s linear infinite
+
+    &::before
+      width: 100px
+      height: 100px
+      top: 10%
+      left: 15%
+      transform-origin: center
+
+    &::after
+      width: 60px
+      height: 60px
+      bottom: 20%
+      right: 15%
+      border-radius: 50%
+      animation-direction: reverse
+
+// Animation: Crystal Formation
+@mixin crystal-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #667db6 0%, #0082c8 25%, #667db6 50%, #0082c8 75%, #667db6 100%)
+    background-size: 200% 200%
+    animation: crystalShimmer 12s ease-in-out infinite
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
+      background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent)
+      animation: crystalGrow 8s ease-in-out infinite
+
+    &::before
+      width: 60px
+      height: 60px
+      top: 15%
+      left: 15%
+      animation-delay: 0s
+
+    &::after
+      width: 40px
+      height: 40px
+      bottom: 20%
+      right: 20%
+      animation-delay: -4s
+
+// Keyframe animations for particle effects
+@keyframes floatParticles
+  0%
+    transform: translateY(100vh) rotate(0deg)
+    opacity: 0
+  10%
+    opacity: 1
+  90%
+    opacity: 1
+  100%
+    transform: translateY(-100px) rotate(360deg)
+    opacity: 0
+
+@keyframes rotateGeometric
+  0%
+    transform: rotate(0deg) scale(1)
+  50%
+    transform: rotate(180deg) scale(1.2)
+  100%
+    transform: rotate(360deg) scale(1)
+
+@keyframes crystalShimmer
+  0%, 100%
+    background-position: 0% 50%
+    filter: brightness(1)
+  50%
+    background-position: 100% 50%
+    filter: brightness(1.3)
+
+@keyframes crystalGrow
+  0%, 100%
+    transform: scale(1) rotate(0deg)
+    opacity: 0.2
+  50%
+    transform: scale(1.5) rotate(45deg)
+    opacity: 0.6

package/sass/animations/background/_tech.sass

@@ -0,0 +1,124 @@
+// Tech-themed Background Animations
+// Contains: matrix, cyber, hologram
+
+// Animation: Matrix Rain
+@mixin matrix-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #0d1117 0%, #1a1f2e 100%)
+
+    &::before,
+    &::after
+      content: '01101010'
+      position: absolute
+      color: rgba(0, 255, 0, 0.1)
+      font-family: 'Courier New', monospace
+      font-size: 12px
+      line-height: 1
+      white-space: pre
+      animation: matrixRain 15s linear infinite
+
+    &::before
+      top: -100px
+      left: 10%
+      animation-delay: 0s
+
+    &::after
+      top: -100px
+      right: 20%
+      animation-delay: -7s
+
+// Animation: Cyberpunk Grid
+@mixin cyber-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%)
+
+    &::before
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px)
+      background-size: 50px 50px
+      animation: cyberGrid 20s linear infinite
+
+    &::after
+      content: ''
+      position: absolute
+      width: 100%
+      height: 2px
+      top: 30%
+      left: 0
+      background: linear-gradient(90deg, transparent, #00ffff, transparent)
+      animation: cyberScan 6s ease-in-out infinite
+
+// Animation: Hologram Effect
+@mixin hologram-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #001122 0%, #003366 50%, #004488 100%)
+
+    &::before
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 255, 0.03) 2px, rgba(0, 255, 255, 0.03) 4px)
+      animation: hologramScan 3s linear infinite
+
+    &::after
+      content: ''
+      position: absolute
+      width: 100%
+      height: 100%
+      top: 0
+      left: 0
+      background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent)
+      transform: translateX(-100%)
+      animation: hologramSweep 8s ease-in-out infinite
+
+// Keyframe animations for tech effects
+@keyframes matrixRain
+  0%
+    transform: translateY(-100px)
+    opacity: 0
+  10%
+    opacity: 1
+  90%
+    opacity: 1
+  100%
+    transform: translateY(calc(100vh + 100px))
+    opacity: 0
+
+@keyframes cyberGrid
+  0%
+    transform: translate(0, 0)
+  100%
+    transform: translate(50px, 50px)
+
+@keyframes cyberScan
+  0%, 100%
+    transform: translateX(-100%)
+    opacity: 0
+  10%
+    opacity: 1
+  90%
+    opacity: 1
+  100%
+    transform: translateX(100%)
+
+@keyframes hologramScan
+  0%
+    transform: translateY(-100%)
+  100%
+    transform: translateY(100vh)
+
+@keyframes hologramSweep
+  0%
+    transform: translateX(-100%)
+  50%
+    transform: translateX(0%)
+  100%
+    transform: translateX(100%)

package/sass/functions/_functions.sass

@@ -0,0 +1,107 @@
+// Utility Functions
+@use 'sass:math'
+@use 'sass:map'
+@use 'sass:string'
+@use '../variables' as *
+
+// Color Functions
+@function tint-color($color, $weight)
+  @return mix(white, $color, $weight)
+
+@function shade-color($color, $weight)
+  @return mix(black, $color, $weight)
+
+@function shift-color($color, $weight)
+  @if $weight > 0
+    @return shade-color($color, $weight)
+  @else
+    @return tint-color($color, -$weight)
+
+// Map Functions
+@function map-deep-get($map, $keys...)
+  @each $key in $keys
+    $map: map.get($map, $key)
+  @return $map
+
+// String Functions
+@function str-replace($string, $search, $replace: '')
+  $index: string.index($string, $search)
+
+  @if $index
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace)
+
+  @return $string
+
+// Unit Functions
+@function strip-unit($value)
+  @if type-of($value) != 'number'
+    @return $value
+  @return math.div($value, ($value * 0 + 1))
+
+@function to-rem($value, $base: 16)
+  @if unit($value) == 'rem'
+    @return $value
+  @if unit($value) == 'px'
+    @return math.div(strip-unit($value), $base) * 1rem
+  @return $value
+
+@function to-px($value, $base: 16)
+  @if unit($value) == 'px'
+    @return $value
+  @if unit($value) == 'rem'
+    @return strip-unit($value) * $base * 1px
+  @return $value
+
+// Spacing Functions
+@function spacer($key)
+  @return map.get($spacers, $key)
+
+// Breakpoint Functions
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints)
+  $min: map.get($breakpoints, $name)
+  @if $min != 0
+    @return $min
+  @else
+    @return null
+
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints)
+  $max: map.get($breakpoints, $name)
+  @if $max and $max > 0
+    @return $max - 0.02
+  @else
+    @return null
+
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints)
+  @if breakpoint-min($name, $breakpoints) == null
+    @return ''
+  @else
+    @return '-#{$name}'
+
+// Control Sizing Functions
+@function derive-control-height($size)
+  @return calc(#{$size} * 2)
+
+@function derive-control-radius($size)
+  @return calc(#{$size} * 0.4)
+
+@function derive-control-border($size)
+  @return max(1px, calc(#{$size} * 0.0625))
+
+@function derive-control-gap($size)
+  @return calc(#{$size} * 0.375)
+
+@function derive-control-margin($size)
+  @return calc(#{$size} * 0.5)
+
+@function derive-control-icon-size($size)
+  @return calc(#{$size} * 1.1)
+
+@function derive-control-padding-x($size, $scale: 1)
+  @return calc(#{$size} * 1.25 * #{$scale})
+
+@function derive-control-padding-y($size, $scale: 1)
+  @return calc(#{$size} * 0.625 * #{$scale})
+
+@function derive-badge-size($size)
+  @return calc(#{$size} * 0.6)
+

package/sass/mixins/_backdrops.sass

@@ -0,0 +1,230 @@
+// Backdrop utilities and mixins
+@use '../variables/colors' as colors
+
+// Basic backdrop mixins
+@mixin backdrop-filter($value)
+  backdrop-filter: $value
+  -webkit-backdrop-filter: $value
+
+@mixin backdrop($blur: 10px, $opacity: 0.8, $color: colors.$backdrop-standard)
+  backdrop-filter: blur($blur)
+  -webkit-backdrop-filter: blur($blur)
+  background-color: $color
+  opacity: $opacity
+
+// Standard backdrop effects (theme-aware)
+@mixin standard-backdrop
+  backdrop-filter: blur(20px)
+  -webkit-backdrop-filter: blur(20px)
+  background-color: colors.$backdrop-standard
+  border: 1px solid colors.$backdrop-border
+
+@mixin glass-backdrop
+  backdrop-filter: blur(16px) saturate(180%)
+  -webkit-backdrop-filter: blur(16px) saturate(180%)
+  background-color: colors.$backdrop-glass
+  border: 1px solid colors.$backdrop-border
+
+@mixin frosted-backdrop
+  backdrop-filter: blur(12px) brightness(1.1)
+  -webkit-backdrop-filter: blur(12px) brightness(1.1)
+  background-color: colors.$backdrop-frosted
+
+@mixin theme-backdrop
+  backdrop-filter: blur(20px)
+  -webkit-backdrop-filter: blur(20px)
+  background-color: colors.$backdrop-theme
+  border: 1px solid colors.$backdrop-border
+
+@mixin tinted-backdrop($color: colors.$backdrop-mm)
+  backdrop-filter: blur(15px)
+  -webkit-backdrop-filter: blur(15px)
+  background-color: $color
+
+// Blur variations
+@mixin backdrop-blur-none
+  backdrop-filter: blur(0px)
+  -webkit-backdrop-filter: blur(0px)
+
+@mixin backdrop-blur-sm
+  backdrop-filter: blur(4px)
+  -webkit-backdrop-filter: blur(4px)
+
+@mixin backdrop-blur
+  backdrop-filter: blur(8px)
+  -webkit-backdrop-filter: blur(8px)
+
+@mixin backdrop-blur-md
+  backdrop-filter: blur(12px)
+  -webkit-backdrop-filter: blur(12px)
+
+@mixin backdrop-blur-lg
+  backdrop-filter: blur(16px)
+  -webkit-backdrop-filter: blur(16px)
+
+@mixin backdrop-blur-xl
+  backdrop-filter: blur(24px)
+  -webkit-backdrop-filter: blur(24px)
+
+@mixin backdrop-blur-2xl
+  backdrop-filter: blur(40px)
+  -webkit-backdrop-filter: blur(40px)
+
+@mixin backdrop-blur-3xl
+  backdrop-filter: blur(64px)
+  -webkit-backdrop-filter: blur(64px)
+
+// Brightness variations
+@mixin backdrop-brightness($value: 1.0)
+  backdrop-filter: brightness($value)
+  -webkit-backdrop-filter: brightness($value)
+
+@mixin backdrop-brightness-50
+  backdrop-filter: brightness(0.5)
+  -webkit-backdrop-filter: brightness(0.5)
+
+@mixin backdrop-brightness-75
+  backdrop-filter: brightness(0.75)
+  -webkit-backdrop-filter: brightness(0.75)
+
+@mixin backdrop-brightness-125
+  backdrop-filter: brightness(1.25)
+  -webkit-backdrop-filter: brightness(1.25)
+
+@mixin backdrop-brightness-150
+  backdrop-filter: brightness(1.5)
+  -webkit-backdrop-filter: brightness(1.5)
+
+// Contrast variations
+@mixin backdrop-contrast($value: 1.0)
+  backdrop-filter: contrast($value)
+  -webkit-backdrop-filter: contrast($value)
+
+@mixin backdrop-contrast-50
+  backdrop-filter: contrast(0.5)
+  -webkit-backdrop-filter: contrast(0.5)
+
+@mixin backdrop-contrast-75
+  backdrop-filter: contrast(0.75)
+  -webkit-backdrop-filter: contrast(0.75)
+
+@mixin backdrop-contrast-125
+  backdrop-filter: contrast(1.25)
+  -webkit-backdrop-filter: contrast(1.25)
+
+@mixin backdrop-contrast-150
+  backdrop-filter: contrast(1.5)
+  -webkit-backdrop-filter: contrast(1.5)
+
+// Saturation variations
+@mixin backdrop-saturate($value: 1.0)
+  backdrop-filter: saturate($value)
+  -webkit-backdrop-filter: saturate($value)
+
+@mixin backdrop-saturate-50
+  backdrop-filter: saturate(0.5)
+  -webkit-backdrop-filter: saturate(0.5)
+
+@mixin backdrop-saturate-150
+  backdrop-filter: saturate(1.5)
+  -webkit-backdrop-filter: saturate(1.5)
+
+@mixin backdrop-saturate-200
+  backdrop-filter: saturate(2.0)
+  -webkit-backdrop-filter: saturate(2.0)
+
+// Combined theme-aware effects
+@mixin backdrop-glass-enhanced
+  backdrop-filter: blur(10px) brightness(1.1) saturate(1.5)
+  -webkit-backdrop-filter: blur(10px) brightness(1.1) saturate(1.5)
+  background-color: colors.$backdrop-theme
+
+@mixin backdrop-frosted-glass
+  backdrop-filter: blur(16px) brightness(1.1) saturate(1.8) contrast(1.1)
+  -webkit-backdrop-filter: blur(16px) brightness(1.1) saturate(1.8) contrast(1.1)
+  background-color: colors.$backdrop-glass
+  border: 1px solid colors.$backdrop-border
+
+// Use ThemeStore CSS vars (--m-backdrop-*) for theme-adaptive backdrops instead
+@mixin backdrop-theme-adaptive($bg: colors.$backdrop-standard)
+  backdrop-filter: blur(20px)
+  -webkit-backdrop-filter: blur(20px)
+  background-color: $bg
+
+// Modal and overlay backdrops (theme-aware)
+@mixin modal-backdrop
+  backdrop-filter: blur(5px) brightness(0.5)
+  -webkit-backdrop-filter: blur(5px) brightness(0.5)
+  background-color: colors.$backdrop-modal
+
+@mixin premium-backdrop
+  backdrop-filter: blur(24px) saturate(180%)
+  -webkit-backdrop-filter: blur(24px) saturate(180%)
+  // rgba() cannot wrap a var() color — guaranteed solid base, gradient on top
+  background-color: colors.$backdrop-modal
+  background-image: radial-gradient(circle at center, color-mix(in srgb, #{colors.$backdrop-modal} 40%, transparent) 0%, color-mix(in srgb, #{colors.$backdrop-modal} 80%, transparent) 100%)
+
+@mixin overlay-backdrop
+  backdrop-filter: blur(3px)
+  -webkit-backdrop-filter: blur(3px)
+  background-color: colors.$backdrop-overlay
+
+@mixin popup-backdrop
+  backdrop-filter: blur(8px)
+  -webkit-backdrop-filter: blur(8px)
+  background-color: colors.$backdrop-popup
+  border: 1px solid colors.$backdrop-border
+  box-shadow: 0 8px 32px colors.$backdrop-shadow
+
+// Navigation backdrops (theme-aware)
+@mixin nav-backdrop
+  backdrop-filter: blur(15px) saturate(1.2)
+  -webkit-backdrop-filter: blur(15px) saturate(1.2)
+  background-color: colors.$backdrop-nav
+  border-bottom: 1px solid colors.$backdrop-border
+
+@mixin sidebar-backdrop
+  backdrop-filter: blur(20px) brightness(1.05)
+  -webkit-backdrop-filter: blur(20px) brightness(1.05)
+  background-color: colors.$backdrop-overlay
+  border-right: 1px solid colors.$backdrop-border
+
+// Card and surface backdrops (theme-aware)
+@mixin card-backdrop
+  backdrop-filter: blur(12px) saturate(1.3)
+  -webkit-backdrop-filter: blur(12px) saturate(1.3)
+  background-color: colors.$backdrop-card
+  border: 1px solid colors.$backdrop-border
+  box-shadow: 0 4px 16px colors.$backdrop-shadow
+
+@mixin surface-backdrop
+  backdrop-filter: blur(8px)
+  -webkit-backdrop-filter: blur(8px)
+  background-color: colors.$backdrop-surface
+
+// Fallback for unsupported browsers
+@mixin backdrop-fallback($fallback-bg: rgba(255, 255, 255, 0.9))
+  background-color: $fallback-bg
+
+  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
+    background-color: rgba(255, 255, 255, 0.1)
+    backdrop-filter: blur(10px)
+    -webkit-backdrop-filter: blur(10px)
+
+// Disable backdrop filters (for performance)
+@mixin backdrop-none
+  backdrop-filter: none
+  -webkit-backdrop-filter: none
+
+// Conditional backdrop based on user preferences
+@mixin backdrop-reduced-motion
+  @media (prefers-reduced-motion: reduce)
+    backdrop-filter: none
+    -webkit-backdrop-filter: none
+
+// Print-friendly backdrops
+@mixin backdrop-print-safe
+  @media print
+    backdrop-filter: none !important
+    -webkit-backdrop-filter: none !important
+    background-color: transparent !important