@magmonium/one 0.0.4 → 0.0.7

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/variables/_animations.sass

@@ -0,0 +1,5 @@
+// Animation Variables
+$standard-curve: cubic-bezier(0.4, 0, 0.2, 1) !default
+$ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1) !default
+$standard-bezier: $standard-curve
+$transition-base: all 0.3s $ease-out-expo

package/sass/variables/_borders.sass

@@ -0,0 +1,25 @@
+// Border Variables
+@use './colors' as *
+
+// Border widths map following spacing pattern
+$border-widths: (0: 0, 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px)
+
+// Border radius sizes
+$border-radius-sizes: (
+  0: 0, 
+  1: 0.125rem, 
+  2: 0.25rem, 
+  3: 0.375rem, 
+  4: 0.5rem, 
+  5: 1rem, 
+  pill: 50rem, 
+  circle: 50%
+)
+
+// Border styles (excluding solid since it's default)
+$border-styles: (dashed, dotted, double, groove, ridge, inset, outset, none)
+
+// Default border configuration
+$default-border-width: 1px
+$default-border-color: $border-color
+$default-border-style: solid

package/sass/variables/_colors.sass

@@ -0,0 +1,93 @@
+// Magmonium Color Variables
+// Single source of truth: ThemeStore writes --m-* CSS custom properties to :root.
+// SASS vars are pure aliases — no fallbacks, no hardcoded values.
+// To change a color, update the theme asset file (mag_assets/theme/*.ts), not here.
+
+// Base
+$background: var(--m-background)
+$border: var(--m-border)
+$frame: var(--m-frame)
+$background-lite: var(--m-background-lite)
+$highlight: var(--m-highlight)
+
+// Text
+$text: var(--m-text)
+$inverse-text: var(--m-inverse-text)
+$text-secondary: var(--m-text-secondary)
+$text-tertiary: var(--m-text-tertiary)
+$text-quaternary: var(--m-text-quaternary)
+$text-quinary: var(--m-text-quinary)
+$text-senary: var(--m-text-senary)
+$text-septenary: var(--m-text-septenary)
+$text-octonary: var(--m-text-octonary)
+$text-nonary: var(--m-text-nonary)
+
+// Brand
+$mm: var(--m-mm)
+$mm-lite: var(--m-mm-lite)
+$mm-dark: var(--m-mm-dark)
+$focus: var(--m-focus)
+$header: var(--m-header)
+
+// Status
+$error: var(--m-error)
+$error-light: var(--m-error-light)
+$warning: var(--m-warning)
+$warning-lite: var(--m-warning-lite)
+$success: var(--m-success)
+$success-lite: var(--m-success-lite)
+$info: var(--m-info)
+$info-lite: var(--m-info-lite)
+$fade: var(--m-fade)
+$wealth: var(--m-wealth)
+$gold: var(--m-gold)
+
+// Backgrounds
+$page: var(--m-page)
+$page-dark: var(--m-page-dark)
+$bg-focus: var(--m-bg-focus)
+$focus-bg: var(--m-focus-bg)
+
+// Interactive
+$click-effect: var(--m-click-effect)
+$modal-background: var(--m-modal-background)
+$tooltip-bg: var(--m-tool-tip-bg)
+$tooltip-col: var(--m-tool-tip-col)
+
+// Backdrop
+$backdrop-standard: var(--m-backdrop-standard)
+$backdrop-glass: var(--m-backdrop-glass)
+$backdrop-frosted: var(--m-backdrop-frosted)
+$backdrop-theme: var(--m-backdrop-theme)
+$backdrop-border: var(--m-backdrop-border)
+$backdrop-frame: var(--m-backdrop-frame)
+$backdrop-modal: var(--m-modal-background)
+$backdrop-overlay: var(--m-backdrop-overlay)
+$backdrop-popup: var(--m-backdrop-popup)
+$backdrop-nav: var(--m-backdrop-nav)
+$backdrop-sidebar: var(--m-backdrop-sidebar)
+$backdrop-card: var(--m-backdrop-card)
+$backdrop-surface: var(--m-backdrop-surface)
+$backdrop-mm: var(--m-backdrop-mm)
+$backdrop-error: var(--m-backdrop-error)
+$backdrop-warning: var(--m-backdrop-warning)
+$backdrop-success: var(--m-backdrop-success)
+$backdrop-shadow: var(--m-backdrop-shadow)
+$backdrop-gold: var(--m-backdrop-gold)
+$backdrop-focus: var(--m-focus-bg)
+$backdrop-click: var(--m-click-effect)
+
+// Aliases
+$primary: $mm
+$primary-lite: $mm-lite
+$primary-dark: $mm-dark
+$secondary: $text-secondary
+$danger: $error
+$danger-lite: $error-light
+
+// Legacy aliases (backward compatibility)
+$background-color: $background
+$white: white
+$primary-color: $mm
+$border-color: $border
+$frame-color: $frame

package/sass/variables/_index.sass

@@ -0,0 +1,6 @@
+@forward "number"
+@forward "colors"
+@forward "spacing"
+@forward "typography"
+@forward "borders"
+@forward "animations"

package/sass/variables/_number.sass

@@ -0,0 +1 @@
+$base-z-index: 526

package/sass/variables/_spacing.sass

@@ -0,0 +1,28 @@
+// Spacing Variables
+@use './colors' as *
+
+$spacer: 1rem
+$spacers: (0: 0, 1: $spacer * 0.25, 2: $spacer * 0.5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3)
+
+// Margins and Paddings
+$margin-base: $spacer
+$padding-base: $spacer
+
+// Container Padding
+$container-padding-x: $spacer
+
+// Component Spacing
+$component-active-color: $white
+$component-active-bg: $primary-color
+
+// Grid System
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
+
+$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px)
+
+// Grid Gutter
+$grid-gutter-width: 1.5rem
+$grid-row-columns: 6
+
+$desktop-width: 1200px
+$tablet-width: 768px

package/sass/variables/_typography.sass

@@ -0,0 +1,40 @@
+// Typography Variables
+@use './spacing' as *
+
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
+
+$font-family-base: $font-family-sans-serif
+$font-family-code: $font-family-monospace
+
+// Font Sizes
+$font-size-root: null
+$font-size-base: 1rem
+$font-size-sm: $font-size-base * 0.875
+$font-size-lg: $font-size-base * 1.25
+
+$font-sizes: (1: $font-size-base * 2.5, 2: $font-size-base * 2, 3: $font-size-base * 1.75, 4: $font-size-base * 1.5, 5: $font-size-base * 1.25, 6: $font-size-base)
+
+// Font Weights
+$font-weight-lighter: lighter
+$font-weight-light: 300
+$font-weight-normal: 400
+$font-weight-medium: 500
+$font-weight-semibold: 600
+$font-weight-bold: 700
+$font-weight-bolder: bolder
+
+$font-weight-base: $font-weight-normal
+
+// Line Heights
+$line-height-base: 1.5
+$line-height-sm: 1.25
+$line-height-lg: 2
+
+// Headings
+$headings-margin-bottom: $spacer * 0.5
+$headings-font-family: null
+$headings-font-style: null
+$headings-font-weight: 500
+$headings-line-height: 1.2
+$headings-color: inherit