@magmonium/one 0.0.3 → 0.0.5

package/sass/mixins/_backgrounds.sass

@@ -0,0 +1,214 @@
+@use "sass:math"
+
+// Background utilities and mixins
+
+// Basic background mixins
+@mixin background($value)
+  background: $value
+
+@mixin background-color($value)
+  background-color: $value
+
+@mixin bg($value)
+  background-color: $value
+
+// Common background colors
+@mixin bg-primary
+  background-color: var(--bg-primary, #ffffff)
+
+@mixin bg-secondary
+  background-color: var(--bg-secondary, #f8f9fa)
+
+@mixin bg-surface
+  background-color: var(--bg-surface, #ffffff)
+
+@mixin bg-overlay
+  background-color: var(--bg-overlay, rgba(0, 0, 0, 0.5))
+
+@mixin bg-success
+  background-color: var(--color-success, #28a745)
+
+@mixin bg-warning
+  background-color: var(--color-warning, #ffc107)
+
+@mixin bg-error
+  background-color: var(--color-error, #dc3545)
+
+@mixin bg-info
+  background-color: var(--color-info, #17a2b8)
+
+@mixin bg-danger
+  background-color: var(--color-danger, #dc3545)
+
+// Brand background colors
+@mixin bg-brand-primary
+  background-color: var(--brand-primary, #007bff)
+
+@mixin bg-brand-secondary
+  background-color: var(--brand-secondary, #6c757d)
+
+// Gray scale backgrounds
+@mixin bg-transparent
+  background-color: transparent
+
+@mixin bg-black
+  background-color: #000000
+
+@mixin bg-white
+  background-color: #ffffff
+
+@mixin bg-gray-100
+  background-color: #f8f9fa
+
+@mixin bg-gray-200
+  background-color: #e9ecef
+
+@mixin bg-gray-300
+  background-color: #dee2e6
+
+@mixin bg-gray-400
+  background-color: #ced4da
+
+@mixin bg-gray-500
+  background-color: #adb5bd
+
+@mixin bg-gray-600
+  background-color: #6c757d
+
+@mixin bg-gray-700
+  background-color: #495057
+
+@mixin bg-gray-800
+  background-color: #343a40
+
+@mixin bg-gray-900
+  background-color: #212529
+
+// Background images
+@mixin bg-image($url)
+  background-image: url($url)
+
+@mixin bg-gradient-horizontal($start-color, $end-color)
+  background: linear-gradient(to right, $start-color, $end-color)
+
+@mixin bg-gradient-vertical($start-color, $end-color)
+  background: linear-gradient(to bottom, $start-color, $end-color)
+
+@mixin bg-gradient-diagonal($start-color, $end-color)
+  background: linear-gradient(45deg, $start-color, $end-color)
+
+@mixin bg-gradient-radial($center-color, $edge-color)
+  background: radial-gradient(circle, $center-color, $edge-color)
+
+// Background properties
+@mixin bg-cover
+  background-size: cover
+  background-repeat: no-repeat
+  background-position: center
+
+@mixin bg-contain
+  background-size: contain
+  background-repeat: no-repeat
+  background-position: center
+
+@mixin bg-repeat
+  background-repeat: repeat
+
+@mixin bg-no-repeat
+  background-repeat: no-repeat
+
+@mixin bg-repeat-x
+  background-repeat: repeat-x
+
+@mixin bg-repeat-y
+  background-repeat: repeat-y
+
+// Background position
+@mixin bg-position($value)
+  background-position: $value
+
+@mixin bg-position-center
+  background-position: center
+
+@mixin bg-position-top
+  background-position: top
+
+@mixin bg-position-bottom
+  background-position: bottom
+
+@mixin bg-position-left
+  background-position: left
+
+@mixin bg-position-right
+  background-position: right
+
+// Background size
+@mixin bg-size($value)
+  background-size: $value
+
+@mixin bg-auto
+  background-size: auto
+
+// Background attachment
+@mixin bg-fixed
+  background-attachment: fixed
+
+@mixin bg-local
+  background-attachment: local
+
+@mixin bg-scroll
+  background-attachment: scroll
+
+// Use ThemeStore CSS vars (--m-background, --m-frame, etc.) for theme-adaptive backgrounds
+@mixin bg-theme-adaptive($bg)
+  background-color: $bg
+
+// Background with opacity
+@mixin bg-opacity($color, $opacity)
+  background-color: rgba($color, $opacity)
+
+// Modern background with color-mix
+@mixin bg-mix($color1, $color2, $percentage: 50%)
+  background-color: color-mix(in srgb, #{$color1} #{$percentage}%, #{$color2} #{100 - $percentage}%)
+
+// Background transitions
+@mixin bg-transition($duration: 0.3s)
+  transition: background-color $duration ease-in-out, background-image $duration ease-in-out
+
+// Pattern backgrounds
+@mixin bg-stripes($color1, $color2, $size: 10px)
+  background: repeating-linear-gradient(45deg, $color1, $color1 $size, $color2 $size, $color2 #{$size * 2})
+
+@mixin bg-dots($color, $size: 2px, $spacing: 20px)
+  background-image: radial-gradient(circle at center, $color $size, transparent $size)
+  background-size: $spacing $spacing
+
+@mixin bg-checkerboard($color1: #ffffff, $color2: #f0f0f0, $size: 20px)
+  background-image: linear-gradient(45deg, $color1 25%, transparent 25%), linear-gradient(-45deg, $color1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $color1 75%), linear-gradient(-45deg, transparent 75%, $color1 75%)
+  background-size: $size $size
+  background-position: 0 0, 0 #{math.div($size, 2)}, #{math.div($size, 2)} #{math.div(-$size, 2)}, #{math.div(-$size, 2)} 0px
+  background-color: $color2
+
+// Glass morphism effect
+@mixin bg-glass($blur: 10px, $opacity: 0.1)
+  background-color: rgba(255, 255, 255, $opacity)
+  backdrop-filter: blur($blur)
+  -webkit-backdrop-filter: blur($blur)
+
+// Print backgrounds
+@mixin bg-print-safe
+  @media print
+    background: none !important
+    background-color: transparent !important
+
+// Background clip
+@mixin bg-clip-text
+  background-clip: text
+  -webkit-background-clip: text
+  color: transparent
+
+@mixin bg-clip-padding
+  background-clip: padding-box
+
+@mixin bg-clip-border
+  background-clip: border-box

package/sass/mixins/_borders.sass

@@ -0,0 +1,93 @@
+@use "sass:map"
+// Border Mixins - Simple mixins for internal use
+@use '../variables/borders' as *
+
+// Base border mixin - applies border width with solid style and border-color
+@mixin border($size)
+  @if map.has-key($border-widths, $size)
+    border: map.get($border-widths, $size) solid $default-border-color
+  @else
+    border: $size solid $default-border-color
+
+// Directional border mixins
+@mixin border-x($size)
+  @include border-left($size)
+  @include border-right($size)
+
+@mixin border-y($size)
+  @include border-top($size)
+  @include border-bottom($size)
+
+@mixin border-top($size)
+  @if map.has-key($border-widths, $size)
+    border-top: map.get($border-widths, $size) solid $default-border-color
+  @else
+    border-top: $size solid $default-border-color
+
+@mixin border-right($size)
+  @if map.has-key($border-widths, $size)
+    border-right: map.get($border-widths, $size) solid $default-border-color
+  @else
+    border-right: $size solid $default-border-color
+
+@mixin border-bottom($size)
+  @if map.has-key($border-widths, $size)
+    border-bottom: map.get($border-widths, $size) solid $default-border-color
+  @else
+    border-bottom: $size solid $default-border-color
+
+@mixin border-left($size)
+  @if map.has-key($border-widths, $size)
+    border-left: map.get($border-widths, $size) solid $default-border-color
+  @else
+    border-left: $size solid $default-border-color
+
+// Border radius mixins
+@mixin border-radius($size)
+  @if map.has-key($border-radius-sizes, $size)
+    border-radius: map.get($border-radius-sizes, $size)
+  @else
+    border-radius: $size
+
+@mixin border-radius-top($size)
+  @if map.has-key($border-radius-sizes, $size)
+    $value: map.get($border-radius-sizes, $size)
+    border-top-left-radius: $value
+    border-top-right-radius: $value
+  @else
+    border-top-left-radius: $size
+    border-top-right-radius: $size
+
+@mixin border-radius-bottom($size)
+  @if map.has-key($border-radius-sizes, $size)
+    $value: map.get($border-radius-sizes, $size)
+    border-bottom-left-radius: $value
+    border-bottom-right-radius: $value
+  @else
+    border-bottom-left-radius: $size
+    border-bottom-right-radius: $size
+
+@mixin border-radius-left($size)
+  @if map.has-key($border-radius-sizes, $size)
+    $value: map.get($border-radius-sizes, $size)
+    border-top-left-radius: $value
+    border-bottom-left-radius: $value
+  @else
+    border-top-left-radius: $size
+    border-bottom-left-radius: $size
+
+@mixin border-radius-right($size)
+  @if map.has-key($border-radius-sizes, $size)
+    $value: map.get($border-radius-sizes, $size)
+    border-top-right-radius: $value
+    border-bottom-right-radius: $value
+  @else
+    border-top-right-radius: $size
+    border-bottom-right-radius: $size
+
+// Convenience mixins
+@mixin no-border
+  border: none
+
+@mixin border-reset
+  @include no-border

package/sass/mixins/_breakpoints.sass

@@ -0,0 +1,68 @@
+@use "sass:map"
+// Breakpoint Mixins
+@use '../variables/spacing' as *
+
+// Media Query Mixins
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
+  $min: map.get($breakpoints, $name)
+  @if $min
+    @media (min-width: $min)
+      @content
+  @else
+    @content
+
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
+  $max: map.get($breakpoints, $name)
+  @if $max
+    @media (max-width: $max - 0.02)
+      @content
+  @else
+    @content
+
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
+  $min: map.get($breakpoints, $lower)
+  $max: map.get($breakpoints, $upper)
+
+  @if $min != null and $max != null
+    @media (min-width: $min) and (max-width: $max - 0.02)
+      @content
+  @else if $max == null
+    @include media-breakpoint-up($lower, $breakpoints)
+      @content
+  @else if $min == null
+    @include media-breakpoint-down($upper, $breakpoints)
+      @content
+
+// Container Query Mixins — resolve against nearest `m-section` container,
+// not the viewport. Grid responsiveness keys off section width (see ADR 0001).
+@mixin container-breakpoint-up($name, $breakpoints: $grid-breakpoints)
+  $min: map.get($breakpoints, $name)
+  @if $min
+    // #{} required: SASS does not evaluate vars in @container preludes like it does @media
+    @container mag-grid (min-width: #{$min})
+      @content
+  @else
+    @content
+
+@mixin container-breakpoint-down($name, $breakpoints: $grid-breakpoints)
+  $max: map.get($breakpoints, $name)
+  @if $max
+    @container mag-grid (max-width: #{$max - 0.02})
+      @content
+  @else
+    @content
+
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
+  $min: map.get($breakpoints, $name)
+  $next: map.get($breakpoints, $name)
+  $max: map.get($breakpoints, $next)
+
+  @if $min != null and $max != null
+    @media (min-width: $min) and (max-width: $max - 0.02)
+      @content
+  @else if $max == null
+    @include media-breakpoint-up($name, $breakpoints)
+      @content
+  @else if $min == null
+    @include media-breakpoint-down($next, $breakpoints)
+      @content

package/sass/mixins/_button.sass

@@ -0,0 +1,46 @@
+@use 'control' as *
+@use 'interactive' as *
+
+// Global basic reset mixin for native button elements in the monorepo
+=button-reset
+  appearance: none
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  font-family: inherit
+  font-size: inherit
+  text-decoration: none
+  cursor: pointer
+  border: none
+  background: none
+  padding: 0
+  margin: 0
+  outline: none
+  box-sizing: border-box
+  user-select: none
+  color: inherit
+  position: relative
+
+  &:disabled,
+  &[aria-disabled="true"]
+    opacity: 0.4
+    cursor: not-allowed
+    pointer-events: none
+    filter: grayscale(75%)
+
+
+// Shared button base mixin - combines control dimensions and interactive behavior
+=button-base($size, $color)
+  +control-dims($size)
+  +control-interactive($color)
+  height: auto
+  min-height: 0
+  padding: calc(#{$size} * 0.625) calc(#{$size} * 1.25)
+  gap: calc(#{$size} * 0.375)
+  border-style: solid
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  box-sizing: border-box
+  font-family: inherit
+  cursor: pointer

package/sass/mixins/_checkbox.sass

@@ -0,0 +1,128 @@
+@use 'flex' as flex
+@use '../functions/functions' as f
+
+// Base mixin using only the 4 required CSS variables
+=checkbox-container-base
+  display: inline-flex
+  align-items: center
+  $size: 1em
+  gap: #{f.derive-control-gap($size)}
+  cursor: pointer
+  user-select: none
+  position: relative
+  padding: 2px // Prevent shadow clipping
+
+  input[type="checkbox"]
+    appearance: none
+    -webkit-appearance: none
+    -moz-appearance: none
+    position: relative
+    width: #{$size}
+    height: #{$size}
+    background-color: rgba(var(--m-checkbox-bg-rgb, 255, 255, 255), 0.1)
+    backdrop-filter: blur(8px)
+    border-radius: #{f.derive-control-radius($size)}
+    border: #{f.derive-control-border($size)} solid color-mix(in srgb, var(--m-checkbox-input-color, #4169e1) 70%, transparent 30%)
+    cursor: pointer
+    outline: none
+    box-sizing: border-box
+    flex-shrink: 0
+    margin: 2px
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--m-checkbox-input-color, #4169e1) 15%, transparent 85%), 0 2px 12px -3px rgba(0, 0, 0, 0.1)
+    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, transform 0.2s ease
+    will-change: background-color, box-shadow
+
+    // Checkmark (checked indicator)
+    &::after
+      content: ''
+      position: absolute
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%) scale(0) rotate(-45deg)
+      width: calc(1em * 0.5)
+      height: calc(1em * 0.25)
+      border-left: calc(1em * 0.12) solid var(--m-checkbox-input-color, #4169e1)
+      border-bottom: calc(1em * 0.12) solid var(--m-checkbox-input-color, #4169e1)
+      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, .m-label, .label
+    font-size: calc(1em * 0.8)
+    line-height: 1.2
+    cursor: pointer
+    margin: 0
+    color: color-mix(in srgb, var(--m-checkbox-input-color, #4169e1) 70%, black 30%)
+    transition: color 0.2s ease, font-weight 0.15s ease
+
+// Interactive states using only the 4 variables
+=checkbox-container-states
+  input[type="checkbox"]
+    // Hover state
+    &:hover:not(:disabled)
+      border-color: color-mix(in srgb, var(--m-checkbox-input-color, #4169e1) 80%, transparent 20%)
+      transform: translateY(-1px)
+      box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.15), 0 0 0 1px color-mix(in srgb, var(--m-checkbox-input-color, #4169e1) 25%, transparent 75%)
+
+    // Focus state
+    &:focus
+      box-shadow: 0 0 0 calc(1em / 5) color-mix(in srgb, var(--m-checkbox-input-color, #4169e1) 25%, transparent 75%), 0 2px 12px -3px rgba(0, 0, 0, 0.1)
+      outline: none
+
+    // Active/pressed state
+    &:active:not(:disabled)
+      &::after
+        transform: translate(-50%, -50%) scale(0.85) rotate(-45deg)
+
+    // Checked state
+    &:checked
+      border-color: var(--m-checkbox-input-color, #4169e1)
+      background-color: var(--m-checkbox-input-color, #4169e1)
+      box-shadow: 0 4px 15px -3px color-mix(in srgb, var(--m-checkbox-input-color, #4169e1) 40%, transparent 60%)
+      transform: scale(1.05)
+
+      &::after
+        transform: translate(-50%, -60%) scale(1) rotate(-45deg)
+        border-color: white
+
+      &:hover:not(:disabled)
+        background-color: color-mix(in srgb, var(--m-checkbox-input-color, #4169e1) 90%, black 10%)
+        border-color: color-mix(in srgb, var(--m-checkbox-input-color, #4169e1) 90%, black 10%)
+
+      &:active:not(:disabled)
+        &::after
+          transform: translate(-50%, -60%) scale(0.85) rotate(-45deg)
+
+      &:focus
+        box-shadow: 0 0 0 calc(1em / 5) color-mix(in srgb, var(--m-checkbox-input-color, #4169e1) 25%, transparent 75%)
+
+      // Label changes when checked
+      + label
+        color: var(--m-checkbox-input-color, #4169e1)
+
+    // Indeterminate state
+    &:indeterminate
+      border-color: var(--m-checkbox-input-color, #4169e1)
+      background-color: var(--m-checkbox-input-color, #4169e1)
+
+      &::after
+        transform: translate(-50%, -50%) scale(1) rotate(0deg)
+        width: calc(1em * 0.5)
+        height: 0
+        border-left: none
+        border-bottom: calc(1em * 0.12) solid white
+
+    // Disabled state
+    &:disabled
+      opacity: 0.5
+      cursor: not-allowed
+      border-color: color-mix(in srgb, var(--m-checkbox-input-color, #4169e1) 20%, transparent 80%)
+
+      + label
+        opacity: 0.5
+        cursor: not-allowed
+
+      &:checked
+        &::after
+          opacity: 0.5
+

package/sass/mixins/_colors.sass

@@ -0,0 +1,121 @@
+// Color utilities and mixins
+
+// Text color mixins
+@mixin color($value)
+  color: $value
+
+@mixin text-color($value)
+  color: $value
+
+// Note: Basic text styling mixins have been moved to mixins/_text.sass
+// The following are color-only mixins
+
+@mixin text-success
+  color: var(--color-success, #28a745)
+
+@mixin text-warning
+  color: var(--color-warning, #ffc107)
+
+@mixin text-error
+  color: var(--color-error, #dc3545)
+
+@mixin text-info
+  color: var(--color-info, #17a2b8)
+
+@mixin text-danger
+  color: var(--color-danger, #dc3545)
+
+// Brand colors
+@mixin text-brand-primary
+  color: var(--brand-primary, #007bff)
+
+@mixin text-brand-secondary
+  color: var(--brand-secondary, #6c757d)
+
+// Semantic colors
+@mixin text-link
+  color: var(--link-color, #007bff)
+  
+  &:hover
+    color: var(--link-hover-color, #0056b3)
+
+@mixin text-link-visited
+  color: var(--link-visited-color, #663399)
+
+// Gray scale colors
+@mixin text-black
+  color: #000000
+
+@mixin text-white
+  color: #ffffff
+
+@mixin text-gray-100
+  color: #f8f9fa
+
+@mixin text-gray-200
+  color: #e9ecef
+
+@mixin text-gray-300
+  color: #dee2e6
+
+@mixin text-gray-400
+  color: #ced4da
+
+@mixin text-gray-500
+  color: #adb5bd
+
+@mixin text-gray-600
+  color: #6c757d
+
+@mixin text-gray-700
+  color: #495057
+
+@mixin text-gray-800
+  color: #343a40
+
+@mixin text-gray-900
+  color: #212529
+
+// Theme-aware colors
+@mixin text-on-light
+  color: var(--text-on-light, #333333)
+
+@mixin text-on-dark
+  color: var(--text-on-dark, #ffffff)
+
+// Opacity variations
+@mixin text-opacity($opacity: 0.8)
+  opacity: $opacity
+
+@mixin text-transparent
+  color: transparent
+
+// Color transitions
+@mixin color-transition($duration: 0.3s)
+  transition: color $duration ease-in-out
+
+// High contrast colors for accessibility
+@mixin text-high-contrast
+  color: #000000
+  background-color: #ffffff
+
+@mixin text-high-contrast-inverse
+  color: #ffffff
+  background-color: #000000
+
+// Print colors
+@mixin text-print-only
+  @media print
+    color: #000000 !important
+
+// Color utilities with CSS variables
+@mixin text-css-var($variable)
+  color: var(#{$variable})
+
+// Dynamic color mixing (modern browsers)
+@mixin text-mix($color1, $color2, $percentage: 50%)
+  color: color-mix(in srgb, #{$color1} #{$percentage}%, #{$color2} #{100 - $percentage}%)
+
+// Use ThemeStore CSS vars (--m-*) for theme-adaptive colors instead of this mixin
+@mixin text-theme-adaptive($color)
+  color: $color

package/sass/mixins/_control.sass

@@ -0,0 +1,13 @@
+@use '../functions/functions' as f
+
+// Control dimensions mixin - shared geometry for all control components
+// Uses CSS var --input-size when available, falls back to $size
+// Note: We use CSS calc() directly with the var to avoid SASS function evaluation issues
+=control-dims($size: 1em)
+  height: calc(var(--input-size, #{$size}) * 2)
+  min-height: calc(var(--input-size, #{$size}) * 2)
+  border-width: max(1px, calc(var(--input-size, #{$size}) * 0.0625))
+  border-radius: calc(var(--input-size, #{$size}) * 0.4)
+  padding: calc(var(--input-size, #{$size}) * 0.5) calc(var(--input-size, #{$size}) * 0.5)
+  gap: calc(var(--input-size, #{$size}) * 0.375)
+  font-size: var(--input-size, #{$size})

package/sass/mixins/_device.sass

@@ -0,0 +1,22 @@
+@use '../variables/spacing' as *
+
+// Responsive mixins
+@mixin tablet
+  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px})
+    @content
+
+@mixin desktop
+  @media (min-width: #{$desktop-width})
+    @content
+
+@mixin mobile
+  @media (max-width: #{$tablet-width - 1px})
+    @content
+
+@mixin tablet-and-desktop
+  @media (min-width: #{$tablet-width - 1px})
+    @content
+
+@mixin mobile-and-tablet
+  @media (max-width: #{$tablet-width})
+    @content