@magmonium/one 0.0.4 → 0.0.5

package/sass/mixins/_toggle.sass

@@ -0,0 +1,240 @@
+@use 'flex' as flex
+@use '../functions/functions' as f
+
+// Base mixin using only the 4 required CSS variables
+=toggle-container-base
+  display: inline-flex
+  align-items: center
+  $size: 1em
+  gap: #{f.derive-control-gap($size)}
+  cursor: pointer
+  user-select: none
+  position: relative
+
+  input[type="checkbox"]
+    appearance: none
+    -webkit-appearance: none
+    -moz-appearance: none
+    position: relative
+    width: calc(#{$size} * 1.6)
+    height: #{$size}
+    background-color: color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 15%, transparent 85%)
+    border-radius: calc(#{$size} / 2)
+    border: #{f.derive-control-border($size)} solid color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 20%, transparent 80%)
+    cursor: pointer
+    outline: none
+    box-sizing: content-box
+    flex-shrink: 0
+    margin: 0
+    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease
+    will-change: background-color, box-shadow
+
+    // Thumb (slider button)
+    &::after
+      content: ''
+      position: absolute
+      top: calc(1em / 8)
+      left: calc(1em / 8)
+      width: calc(1em * 0.75)
+      height: calc(1em * 0.75)
+      background-color: var(--m-toggle-input-color-contrast, #ffffff)
+      border-radius: 50%
+      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease
+      will-change: transform
+      box-shadow: 0 calc(1em / 10) calc(1em / 6) rgba(0, 0, 0, 0.2), 0 calc(1em / 20) calc(1em / 12) rgba(0, 0, 0, 0.1)
+
+  label
+    font-size: calc(1em * 0.8)
+    line-height: 1.2
+    cursor: pointer
+    margin: 0
+    color: color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 70%, black 30%)
+    transition: color 0.2s ease, font-weight 0.15s ease
+
+// Interactive states using only the 4 variables
+=toggle-container-states
+  input[type="checkbox"]
+    // Hover state
+    &:hover:not(:disabled)
+      background-color: color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 25%, transparent 75%)
+      border-color: color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 40%, transparent 60%)
+
+      &::after
+        box-shadow: 0 calc(1em / 8) calc(1em / 5) rgba(0, 0, 0, 0.25), 0 calc(1em / 16) calc(1em / 10) rgba(0, 0, 0, 0.15)
+
+    // Focus state
+    &:focus
+      box-shadow: 0 0 0 calc(1em / 5) color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 20%, transparent 80%)
+      outline: none
+
+    // Active/pressed state
+    &:active:not(:disabled)
+      &::after
+        transform: scaleX(1.15)
+
+    // Checked state
+    &:checked
+      background-color: var(--m-toggle-input-color, #4169e1)
+      border-color: var(--m-toggle-input-color, #4169e1)
+
+      &::after
+        transform: translateX(calc(1em * 0.6))
+        background-color: var(--m-toggle-input-color-contrast, #ffffff)
+
+      &:hover:not(:disabled)
+        background-color: color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 90%, black 10%)
+        border-color: color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 90%, black 10%)
+
+      &:active:not(:disabled)
+        &::after
+          transform: translateX(calc(1em * 0.6)) scaleX(1.15)
+
+      &:focus
+        box-shadow: 0 0 0 calc(1em / 5) color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 25%, transparent 75%)
+
+      // Label changes when checked
+      + label
+        color: var(--m-toggle-input-color, #4169e1)
+
+    // Disabled state
+    &:disabled
+      opacity: 0.5
+      cursor: not-allowed
+      background-color: color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 10%, transparent 90%)
+      border-color: color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 15%, transparent 85%)
+
+      + label
+        opacity: 0.5
+        cursor: not-allowed
+
+      &:checked
+        background-color: color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 50%, transparent 50%)
+
+// Complete toggle container mixin
+=toggle-container
+  +toggle-container-base
+  +toggle-container-states
+
+// Label position variants
+=toggle-container-label-left
+  flex-direction: row-reverse
+
+=toggle-container-label-right
+  flex-direction: row
+
+=toggle-container-label-top
+  flex-direction: column-reverse
+  align-items: flex-start
+
+=toggle-container-label-bottom
+  flex-direction: column
+  align-items: flex-start
+
+// Toggle with icons
+=toggle-container-with-icons
+  input[type="checkbox"]
+    &::before
+      content: attr(data-icon-off)
+      position: absolute
+      left: calc(1em / 3.5)
+      top: 50%
+      transform: translateY(-50%)
+      font-size: calc(1em * 0.5)
+      opacity: 0.7
+      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease
+      z-index: 1
+      pointer-events: none
+      color: color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 60%, black 40%)
+
+    &::after
+      z-index: 2
+
+    &:checked::before
+      content: attr(data-icon-on)
+      left: auto
+      right: calc(1em / 3.5)
+      opacity: 1
+      color: var(--m-toggle-input-color-contrast, #ffffff)
+
+    &:hover:not(:disabled)::before
+      opacity: 0.9
+
+// Toggle with opposite color thumb when checked
+=toggle-container-opposite-thumb
+  input[type="checkbox"]
+    &:checked
+      &::after
+        background-color: var(--m-toggle-input-color-opposite, #e1b941)
+        box-shadow: 0 calc(1em / 10) calc(1em / 6) color-mix(in srgb, var(--m-toggle-input-color-opposite, #e1b941) 30%, black 70%), 0 calc(1em / 20) calc(1em / 12) rgba(0, 0, 0, 0.1)
+
+      &:hover:not(:disabled)::after
+        background-color: color-mix(in srgb, var(--m-toggle-input-color-opposite, #e1b941) 95%, white 5%)
+
+// Toggle with gradient background
+=toggle-container-gradient
+  input[type="checkbox"]
+    &:checked
+      background: linear-gradient(135deg, var(--m-toggle-input-color, #4169e1) 0%, color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 70%, var(--m-toggle-input-color-opposite, #e1b941) 30%) 100%)
+      border-color: transparent
+
+      &:hover:not(:disabled)
+        background: linear-gradient(135deg, color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 90%, black 10%) 0%, color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 65%, var(--m-toggle-input-color-opposite, #e1b941) 35%) 100%)
+
+// Opposite color track when unchecked
+=toggle-container-opposite-track
+  input[type="checkbox"]
+    &:not(:checked)
+      background-color: color-mix(in srgb, var(--m-toggle-input-color-opposite, #e1b941) 15%, transparent 85%)
+      border-color: color-mix(in srgb, var(--m-toggle-input-color-opposite, #e1b941) 20%, transparent 80%)
+
+      &:hover:not(:disabled)
+        background-color: color-mix(in srgb, var(--m-toggle-input-color-opposite, #e1b941) 25%, transparent 75%)
+        border-color: color-mix(in srgb, var(--m-toggle-input-color-opposite, #e1b941) 40%, transparent 60%)
+
+// Animated toggle with smooth transitions
+=toggle-container-animated
+  input[type="checkbox"]
+    &:checked
+      animation: toggle-pulse 0.4s cubic-bezier(0.4, 0, 0.2, 1)
+
+      &::after
+        animation: thumb-slide 0.3s cubic-bezier(0.4, 0, 0.2, 1)
+
+@keyframes toggle-pulse
+  0%, 100%
+    transform: scale(1)
+  50%
+    transform: scale(1.02)
+
+@keyframes thumb-slide
+  0%
+    transform: translateX(0) scale(1)
+  50%
+    transform: translateX(calc(1em * 0.3)) scale(0.9)
+  100%
+    transform: translateX(calc(1em * 0.6)) scale(1)
+
+// Toggle with enhanced shadow using input color
+=toggle-container-shadow
+  input[type="checkbox"]
+    &:checked
+      box-shadow: 0 calc(1em / 10) calc(1em / 5) color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 30%, transparent 70%)
+
+      &:hover:not(:disabled)
+        box-shadow: 0 calc(1em / 8) calc(1em / 4) color-mix(in srgb, var(--m-toggle-input-color, #4169e1) 35%, transparent 65%)
+
+// Pill-shaped toggle with rounder appearance
+=toggle-container-pill
+  input[type="checkbox"]
+    width: calc(1em * 2)
+    border-radius: calc(1em * 0.6)
+
+    &::after
+      border-radius: calc(1em * 0.4)
+      width: calc(1em * 0.8)
+      height: calc(1em * 0.8)
+      top: calc(1em * 0.1)
+      left: calc(1em * 0.1)
+
+    &:checked::after
+      transform: translateX(calc(1em * 1))

package/sass/mixins/_typography.sass

@@ -0,0 +1,6 @@
+@use '../variables' as v
+
+
+=text($size: 14px)
+  font-family: v.$font-family-base
+  font-size: $size

package/sass/mixins/_utilities.sass

@@ -0,0 +1,70 @@
+@use 'sass:color'
+// Utility Mixins
+@use '../variables/colors' as *
+@use '../variables/spacing' as *
+
+// Note: Flexbox utilities have been moved to mixins/_flex.sass
+
+// Note: Text utilities have been moved to mixins/_text.sass
+
+// Visual Utilities
+@mixin box-shadow($shadow: 0 0.125rem 0.25rem rgba($black, 0.075))
+  box-shadow: $shadow
+
+@mixin transition($property: all, $duration: 0.15s, $timing-function: ease-in-out)
+  transition: $property $duration $timing-function
+
+// Note: Position utilities have been moved to mixins/_position.sass
+// Note: Size utilities have been moved to mixins/_sizing.sass
+
+// Spacing Utilities
+@mixin margin($top: 0, $right: 0, $bottom: 0, $left: 0)
+  margin: $top $right $bottom $left
+
+@mixin padding($top: 0, $right: 0, $bottom: 0, $left: 0)
+  padding: $top $right $bottom $left
+
+// Button Utilities
+@mixin button-variant($color, $background, $border)
+  color: $color
+  background-color: $background
+  border-color: $border
+
+  &:hover
+    color: $color
+    background-color: color.adjust($background, $lightness: -7.5%)
+    border-color: color.adjust($border, $lightness: -10%)
+
+  &:focus,
+  &.focus
+    color: $color
+    background-color: color.adjust($background, $lightness: -7.5%)
+    border-color: color.adjust($border, $lightness: -10%)
+    box-shadow: 0 0 0 0.2rem rgba($border, 0.5)
+
+  &:active,
+  &.active
+    color: $color
+    background-color: color.adjust($background, $lightness: -10%)
+    border-color: color.adjust($border, $lightness: -12.5%)
+
+  &:disabled,
+  &.disabled
+    color: $color
+    background-color: $background
+    border-color: $border
+    opacity: 0.65
+
+// Opacity Utility
+@mixin opacity($value)
+  opacity: $value
+
+// Note: Backdrop utilities have been moved to mixins/_backdrops.sass
+
+=rounded($radius)
+  border-radius: $radius
+
+=center
+  display: flex
+  align-items: center
+  justify-content: center

package/sass/utilities/_backdrops.sass

@@ -0,0 +1,228 @@
+// Backdrop utility classes derived from mixins
+@use '../mixins/backdrops' as backdrop
+
+// Standard backdrop effects
+.standard-backdrop
+  @include backdrop.standard-backdrop
+
+.glass-backdrop
+  @include backdrop.glass-backdrop
+
+.frosted-backdrop
+  @include backdrop.frosted-backdrop
+
+.theme-backdrop
+  @include backdrop.theme-backdrop
+
+.tinted-backdrop
+  @include backdrop.tinted-backdrop
+
+// Blur variations
+.backdrop-blur-none
+  @include backdrop.backdrop-blur-none
+
+.backdrop-blur-sm
+  @include backdrop.backdrop-blur-sm
+
+.backdrop-blur
+  @include backdrop.backdrop-blur
+
+.backdrop-blur-md
+  @include backdrop.backdrop-blur-md
+
+.backdrop-blur-lg
+  @include backdrop.backdrop-blur-lg
+
+.backdrop-blur-xl
+  @include backdrop.backdrop-blur-xl
+
+.backdrop-blur-2xl
+  @include backdrop.backdrop-blur-2xl
+
+.backdrop-blur-3xl
+  @include backdrop.backdrop-blur-3xl
+
+// Brightness variations
+.backdrop-brightness-50
+  @include backdrop.backdrop-brightness-50
+
+.backdrop-brightness-75
+  @include backdrop.backdrop-brightness-75
+
+.backdrop-brightness-125
+  @include backdrop.backdrop-brightness-125
+
+.backdrop-brightness-150
+  @include backdrop.backdrop-brightness-150
+
+// Contrast variations
+.backdrop-contrast-50
+  @include backdrop.backdrop-contrast-50
+
+.backdrop-contrast-75
+  @include backdrop.backdrop-contrast-75
+
+.backdrop-contrast-125
+  @include backdrop.backdrop-contrast-125
+
+.backdrop-contrast-150
+  @include backdrop.backdrop-contrast-150
+
+// Saturation variations
+.backdrop-saturate-50
+  @include backdrop.backdrop-saturate-50
+
+.backdrop-saturate-150
+  @include backdrop.backdrop-saturate-150
+
+.backdrop-saturate-200
+  @include backdrop.backdrop-saturate-200
+
+// Combined glass effects
+.backdrop-glass-enhanced
+  @include backdrop.backdrop-glass-enhanced
+
+.backdrop-frosted-glass
+  @include backdrop.backdrop-frosted-glass
+
+// Modal and overlay backdrops
+.modal-backdrop
+  @include backdrop.modal-backdrop
+
+.overlay-backdrop
+  @include backdrop.overlay-backdrop
+
+.popup-backdrop
+  @include backdrop.popup-backdrop
+
+// Navigation backdrops
+.nav-backdrop
+  @include backdrop.nav-backdrop
+
+.sidebar-backdrop
+  @include backdrop.sidebar-backdrop
+
+// Card and surface backdrops
+.card-backdrop
+  @include backdrop.card-backdrop
+
+.surface-backdrop
+  @include backdrop.surface-backdrop
+
+// Themed backdrops
+.backdrop-adaptive
+  @include backdrop.backdrop-theme-adaptive
+
+.backdrop-adaptive-light
+  @include backdrop.backdrop-theme-adaptive(rgba(255, 255, 255, 0.3))
+
+.backdrop-adaptive-heavy
+  @include backdrop.backdrop-theme-adaptive(rgba(255, 255, 255, 0.5))
+
+// Disable backdrop
+.backdrop-none
+  @include backdrop.backdrop-none
+
+// Fallback for unsupported browsers
+.backdrop-fallback
+  @include backdrop.backdrop-fallback
+
+.backdrop-fallback-light
+  @include backdrop.backdrop-fallback(rgba(255, 255, 255, 0.95))
+
+.backdrop-fallback-dark
+  @include backdrop.backdrop-fallback(rgba(0, 0, 0, 0.85))
+
+// Print safe backdrops
+.backdrop-print-safe
+  @include backdrop.backdrop-print-safe
+
+// Reduced motion backdrops
+.backdrop-reduced-motion
+  @include backdrop.backdrop-reduced-motion
+
+// Component-specific backdrops
+.menu-backdrop
+  @include backdrop.sidebar-backdrop
+
+.dropdown-backdrop
+  @include backdrop.popup-backdrop
+
+.dialog-backdrop
+  @include backdrop.modal-backdrop
+
+.toast-backdrop
+  @include backdrop.glass-backdrop
+
+.tooltip-backdrop
+  @include backdrop.surface-backdrop
+
+// Intensity variations
+.backdrop-subtle
+  @include backdrop.backdrop(5px, 0.9, rgba(255, 255, 255, 0.05))
+
+.backdrop-medium
+  @include backdrop.backdrop(12px, 0.8, rgba(255, 255, 255, 0.15))
+
+.backdrop-strong
+  @include backdrop.backdrop(25px, 0.7, rgba(255, 255, 255, 0.25))
+
+// Color-themed backdrops
+.backdrop-blue
+  @include backdrop.tinted-backdrop(rgba(0, 123, 255, 0.1))
+
+.backdrop-green
+  @include backdrop.tinted-backdrop(rgba(40, 167, 69, 0.1))
+
+.backdrop-red
+  @include backdrop.tinted-backdrop(rgba(220, 53, 69, 0.1))
+
+.backdrop-yellow
+  @include backdrop.tinted-backdrop(rgba(255, 193, 7, 0.1))
+
+.backdrop-purple
+  @include backdrop.tinted-backdrop(rgba(102, 16, 242, 0.1))
+
+// Interactive states
+.backdrop-hover
+  transition: all 0.3s ease-in-out
+
+  &:hover
+    @include backdrop.glass-backdrop
+
+.backdrop-focus
+  &:focus
+    @include backdrop.frosted-backdrop
+
+// Responsive backdrops
+@media (max-width: 768px)
+  .backdrop-mobile-only
+    @include backdrop.standard-backdrop
+
+  .backdrop-mobile-light
+    @include backdrop.backdrop(8px, 0.9, rgba(255, 255, 255, 0.1))
+
+@media (min-width: 769px)
+  .backdrop-desktop-only
+    @include backdrop.glass-backdrop
+
+  .backdrop-desktop-strong
+    @include backdrop.frosted-backdrop
+
+// Animation classes (for JavaScript control)
+.backdrop-animate-in
+  opacity: 0
+  backdrop-filter: blur(0px)
+  transition: all 0.3s ease-out
+
+  &.active
+    opacity: 1
+    @include backdrop.standard-backdrop
+
+.backdrop-animate-out
+  @include backdrop.standard-backdrop
+  transition: all 0.3s ease-in
+
+  &.hiding
+    opacity: 0
+    backdrop-filter: blur(0px)