@magmonium/one 0.0.3 → 0.0.5

package/sass/mixins/_radio.sass

@@ -0,0 +1,205 @@
+@use 'flex' as flex
+@use 'sass:map'
+@use '../functions/functions' as f
+
+// ============================================
+// Configuration & Variables
+// ============================================
+
+// Default CSS custom properties (can be overridden)
+$radio-defaults: (size: 1em, color: #4169e1, color-contrast: #ffffff, color-opposite: #e1b941)
+
+// ============================================
+// Base Radio Container
+// ============================================
+
+@mixin radio-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="radio"]
+    // Reset default styles
+    appearance: none
+    -webkit-appearance: none
+    -moz-appearance: none
+    margin: 0
+    padding: 0
+
+    // Positioning & dimensions
+    position: relative
+    width: #{$size}
+    height: #{$size}
+    flex-shrink: 0
+    box-sizing: border-box
+
+    // Styling
+    background-color: transparent
+    border-radius: 50%
+    border: #{f.derive-control-border($size)} solid color-mix(in srgb, var(--m-input-wrapper-color, #{map.get($radio-defaults, color)}) 40%, transparent 60%)
+    cursor: pointer
+    outline: none
+
+    // Transitions
+    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, border-color
+
+    // Inner dot (checked indicator)
+    &::after
+      content: ''
+      position: absolute
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%) scale(0)
+      width: calc(#{$size} * 0.5)
+      height: calc(#{$size} * 0.5)
+      background-color: var(--m-input-wrapper-color, #{map.get($radio-defaults, color)})
+      border-radius: 50%
+      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease
+      will-change: transform
+
+  label
+    font-size: calc(#{$size} * 0.8)
+    line-height: 1.2
+    cursor: pointer
+    margin: 0
+    color: color-mix(in srgb, var(--m-input-wrapper-color, #{map.get($radio-defaults, color)}) 70%, black 30%)
+    transition: color 0.2s ease, font-weight 0.15s ease
+
+// ============================================
+// Interactive States
+// ============================================
+
+@mixin radio-container-states
+  $size: 1em
+  input[type="radio"]
+    // Hover state (not disabled)
+    &:hover:not(:disabled)
+      border-color: color-mix(in srgb, var(--m-input-wrapper-color, #{map.get($radio-defaults, color)}) 60%, transparent 40%)
+
+    // Focus state (accessibility)
+    &:focus
+      box-shadow: 0 0 0 calc(#{$size} * 0.2) color-mix(in srgb, var(--m-input-wrapper-color, #{map.get($radio-defaults, color)}) 20%, transparent 80%)
+      outline: none
+
+    // Active/pressed state (not disabled)
+    &:active:not(:disabled)::after
+      transform: translate(-50%, -50%) scale(0.85)
+
+    // Checked state
+    &:checked
+      border-color: var(--m-input-wrapper-color, #{map.get($radio-defaults, color)})
+
+      &::after
+        transform: translate(-50%, -50%) scale(1)
+
+      // Hover when checked
+      &:hover:not(:disabled)
+        border-color: color-mix(in srgb, var(--m-input-wrapper-color, #{map.get($radio-defaults, color)}) 90%, black 10%)
+
+        &::after
+          background-color: color-mix(in srgb, var(--m-input-wrapper-color, #{map.get($radio-defaults, color)}) 90%, black 10%)
+
+      // Active when checked
+      &:active:not(:disabled)::after
+        transform: translate(-50%, -50%) scale(0.85)
+
+      // Focus when checked
+      &:focus
+        box-shadow: 0 0 0 calc(#{$size} * 0.2) color-mix(in srgb, var(--m-input-wrapper-color, #{map.get($radio-defaults, color)}) 25%, transparent 75%)
+
+      // Label styling when checked
+      + label
+        color: var(--m-input-wrapper-color, #{map.get($radio-defaults, color)})
+
+    // Disabled state
+    &:disabled
+      opacity: 0.5
+      cursor: not-allowed
+      border-color: color-mix(in srgb, var(--m-input-wrapper-color, #{map.get($radio-defaults, color)}) 20%, transparent 80%)
+
+      + label
+        opacity: 0.5
+        cursor: not-allowed
+
+      &:checked::after
+        opacity: 0.5
+
+// ============================================
+// Complete Radio Container
+// ============================================
+
+@mixin radio-container
+  @include radio-container-base
+  @include radio-container-states
+
+// ============================================
+// Label Position Variants
+// ============================================
+
+@mixin radio-container-label-left
+  flex-direction: row-reverse
+
+@mixin radio-container-label-right
+  flex-direction: row
+
+@mixin radio-container-label-top
+  flex-direction: column-reverse
+  align-items: flex-start
+
+@mixin radio-container-label-bottom
+  flex-direction: column
+  align-items: flex-start
+
+// ============================================
+// Radio with Icons/Text Inside
+// ============================================
+
+@mixin radio-container-with-icons
+  $size: 1em
+  input[type="radio"]
+    // Icon before (unchecked state)
+    &::before
+      content: attr(data-icon-off)
+      position: absolute
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%)
+      font-size: calc(#{$size} * 0.4)
+      color: color-mix(in srgb, var(--m-input-wrapper-color, #{map.get($radio-defaults, color)}) 60%, black 40%)
+      opacity: 0.7
+      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease, font-size 0.2s ease
+      z-index: 1
+      pointer-events: none
+
+    // Hide the dot when using icons
+    &::after
+      z-index: 2
+      width: 0
+      height: 0
+      box-shadow: none
+
+    // Icon when checked
+    &:checked::before
+      content: attr(data-icon-on)
+      opacity: 1
+      color: var(--m-input-wrapper-color, #{map.get($radio-defaults, color)})
+      font-size: calc(#{$size} * 0.6)
+
+    // Icon hover state
+    &:hover:not(:disabled)::before
+      opacity: 0.9
+
+// ============================================
+// Radio with Opposite Color Dot
+// ============================================
+
+@mixin radio-container-opposite-dot
+  $size: 1em
+  input[type="radio"]:checked::after
+    background-color: var(--m-input-wrapper-color-opposite, #{map.get($radio-defaults, color-opposite)})
+    box-shadow: 0 calc(#{$size} * 0.1) calc(#{$size} * 0.167) color-mix(in srgb, var(--m-input-wrapper-color-opposite, #{map.get($radio-defaults, color-opposite)}) 30%, black 70%), 0 calc(#{$size} * 0.05) calc(#{$size} * 0.083) rgba(0, 0, 0, 0.1)

package/sass/mixins/_sizing.sass

@@ -0,0 +1,181 @@
+// Sizing utilities and mixins for width and height
+
+// Width mixins
+@mixin width($value)
+  width: $value
+
+@mixin min-width($value)
+  min-width: $value
+
+@mixin max-width($value)
+  max-width: $value
+
+@mixin width-zero
+  width: 0%
+
+@mixin width-full
+  width: 100%
+
+@mixin width-half
+  width: 50%
+
+@mixin width-quarter
+  width: 25%
+
+@mixin width-three-quarters
+  width: 75%
+
+@mixin width-auto
+  width: auto
+
+@mixin width-fit
+  width: fit-content
+
+@mixin width-min
+  width: min-content
+
+@mixin width-max
+  width: max-content
+
+// Viewport width mixins (using Container Query units for better isolation in remote components)
+@mixin width-vw($value)
+  width: #{$value}cqw
+
+@mixin width-100vw
+  width: 100cqw
+
+@mixin width-50vw
+  width: 50cqw
+
+@mixin width-33vw
+  width: 33.333cqw
+
+@mixin width-66vw
+  width: 66.666cqw
+
+@mixin width-75vw
+  width: 75cqw
+
+@mixin width-25vw
+  width: 25cqw
+
+// Height mixins
+@mixin height($value)
+  height: $value
+
+@mixin min-height($value)
+  min-height: $value
+
+@mixin max-height($value)
+  max-height: $value
+
+@mixin height-full
+  height: 100%
+
+@mixin height-half
+  height: 50%
+
+@mixin height-quarter
+  height: 25%
+
+@mixin height-three-quarters
+  height: 75%
+
+@mixin height-auto
+  height: auto
+
+@mixin height-fit
+  height: fit-content
+
+@mixin height-min
+  height: min-content
+
+@mixin height-max
+  height: max-content
+
+// Viewport height mixins (using Container Query units for better isolation in remote components)
+@mixin height-vh($value)
+  height: #{$value}cqh
+
+@mixin height-100vh
+  height: 100cqh
+
+@mixin height-50vh
+  height: 50cqh
+
+@mixin height-33vh
+  height: 33.333cqh
+
+@mixin height-66vh
+  height: 66.666cqh
+
+@mixin height-75vh
+  height: 75cqh
+
+@mixin height-25vh
+  height: 25cqh
+
+// Dynamic viewport height mixins (for mobile browsers)
+@mixin height-100dvh
+  height: 100cqh
+
+@mixin height-100lvh
+  height: 100cqh
+
+@mixin height-100svh
+  height: 100cqh
+
+// Combined width and height mixins
+@mixin size($width, $height: $width)
+  width: $width
+  height: $height
+
+@mixin size-full
+  width: 100%
+  height: 100%
+
+@mixin size-viewport
+  width: 100cqw
+  height: 100cqh
+
+@mixin size-square($size)
+  width: $size
+  height: $size
+
+// Note: Aspect ratio mixins have been moved to mixins/_layout.sass for comprehensive responsive behavior
+
+// Container query sizing
+@mixin width-cqw($value)
+  width: #{$value}cqw
+
+@mixin height-cqh($value)
+  height: #{$value}cqh
+
+@mixin width-100cqw
+  width: 100cqw
+
+@mixin height-100cqh
+  height: 100cqh
+
+// Responsive sizing helpers
+@mixin responsive-size($mobile-width: 100%, $mobile-height: auto, $desktop-width: auto, $desktop-height: auto)
+  width: $mobile-width
+  height: $mobile-height
+
+  @media (min-width: 769px)
+    width: $desktop-width
+    height: $desktop-height
+
+// Common sizing patterns
+@mixin full-screen
+  width: 100cqw
+  height: 100cqh
+
+@mixin full-container
+  width: 100%
+  height: 100%
+
+@mixin center-size($width, $height: $width)
+  width: $width
+  height: $height
+  margin: 0 auto

package/sass/mixins/_spacing.sass

@@ -0,0 +1,59 @@
+@use "sass:map"
+// Spacing Mixins - Efficient padding and margin utilities
+@use '../variables/spacing' as *
+
+// Base spacing mixin - applies to any CSS property
+@mixin spacing($property, $size)
+  @if map.has-key($spacers, $size)
+    #{$property}: map.get($spacers, $size)
+  @else
+    #{$property}: $size
+
+// Directional spacing mixins
+@mixin spacing-x($property, $size)
+  @include spacing(#{$property}-left, $size)
+  @include spacing(#{$property}-right, $size)
+
+@mixin spacing-y($property, $size)
+  @include spacing(#{$property}-top, $size)
+  @include spacing(#{$property}-bottom, $size)
+
+@mixin spacing-all($property, $size)
+  @include spacing($property, $size)
+
+@mixin spacing-directional($property, $top, $right: $top, $bottom: $top, $left: $right)
+  @include spacing(#{$property}-top, $top)
+  @include spacing(#{$property}-right, $right)
+  @include spacing(#{$property}-bottom, $bottom)
+  @include spacing(#{$property}-left, $left)
+
+// Convenience mixins for common use cases
+@mixin margin-x($size)
+  @include spacing-x(margin, $size)
+
+@mixin margin-y($size)
+  @include spacing-y(margin, $size)
+
+@mixin margin-all($size)
+  @include spacing-all(margin, $size)
+
+@mixin padding-x($size)
+  @include spacing-x(padding, $size)
+
+@mixin padding-y($size)
+  @include spacing-y(padding, $size)
+
+@mixin padding-all($size)
+  @include spacing-all(padding, $size)
+
+// Advanced spacing mixins
+@mixin margin-auto
+  margin-left: auto
+  margin-right: auto
+
+@mixin no-spacing
+  margin: 0
+  padding: 0
+
+@mixin spacing-reset
+  @include no-spacing

package/sass/mixins/_text.sass

@@ -0,0 +1,159 @@
+// Enhanced Text Mixins - Typography utilities
+@use '../variables/typography' as *
+@use '../variables/colors' as *
+@use '../variables/spacing' as *
+
+// Base text mixin - foundation for all text styling
+@mixin text-base($size: $font-size-base, $weight: $font-weight-base, $line-height: $line-height-base)
+  font-size: inherit
+  font-weight: $weight
+  line-height: $line-height
+  font-family: $font-family-base
+
+// Text variants - predefined text styles
+@mixin text-body
+  @include text-base($font-size-base, $font-weight-normal, $line-height-base)
+  color: $text
+
+@mixin text-lead
+  @include text-base($font-size-lg, $font-weight-normal, $line-height-sm)
+  color: $text
+
+@mixin text-small
+  @include text-base($font-size-sm, $font-weight-normal, $line-height-base)
+  color: $text-secondary
+
+@mixin text-muted
+  @include text-base($font-size-base, $font-weight-normal, $line-height-base)
+  color: $text-tertiary
+
+@mixin text-caption
+  @include text-base($font-size-sm, $font-weight-normal, $line-height-sm)
+  color: $text-quaternary
+
+// Responsive text sizing
+@mixin text-responsive($mobile-size, $desktop-size, $breakpoint: 768px)
+  font-size: $mobile-size
+  
+  @media (min-width: $breakpoint)
+    font-size: $desktop-size
+
+// Text truncation utilities
+@mixin text-truncate
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+@mixin text-truncate-lines($lines: 2)
+  display: -webkit-box
+  -webkit-line-clamp: $lines
+  -webkit-box-orient: vertical
+  overflow: hidden
+  text-overflow: ellipsis
+
+// Text overflow with custom indicator
+@mixin text-fade-out($height: 1.5em)
+  position: relative
+  max-height: $height
+  overflow: hidden
+  
+  &::after
+    content: ''
+    position: absolute
+    bottom: 0
+    right: 0
+    width: 3em
+    height: 1.2em
+    background: linear-gradient(to right, transparent, $background 70%)
+    pointer-events: none
+
+// Text alignment utilities
+@mixin text-align($alignment)
+  text-align: $alignment
+
+@mixin text-center
+  @include text-align(center)
+
+@mixin text-left
+  @include text-align(left)
+
+@mixin text-right
+  @include text-align(right)
+
+@mixin text-justify
+  @include text-align(justify)
+
+// Text transform utilities
+@mixin text-transform($transform)
+  text-transform: $transform
+
+@mixin text-uppercase
+  @include text-transform(uppercase)
+
+@mixin text-lowercase
+  @include text-transform(lowercase)
+
+@mixin text-capitalize
+  @include text-transform(capitalize)
+
+// Text spacing utilities
+@mixin text-spacing($letter-spacing: 0, $word-spacing: 0)
+  letter-spacing: $letter-spacing
+  word-spacing: $word-spacing
+
+@mixin text-tracked
+  @include text-spacing(0.05em)
+
+@mixin text-tight
+  @include text-spacing(-0.025em)
+
+// Text selection styling
+@mixin text-selection($background: $highlight, $color: $text)
+  &::selection
+    background: $background
+    color: $color
+  
+  &::-moz-selection
+    background: $background
+    color: $color
+
+// Text with icon integration
+@mixin text-with-icon($position: 'left', $gap: 0.5rem)
+  display: inline-flex
+  align-items: center
+  gap: $gap
+  
+  .text-icon
+    @if $position == 'left'
+      order: -1
+    @else if $position == 'right'
+      order: 1
+    
+    display: inline-flex
+    align-items: center
+
+// Text emphasis utilities
+@mixin text-emphasis($color: $mm, $weight: $font-weight-semibold)
+  color: $color
+  font-weight: $weight
+
+@mixin text-highlight($background: $highlight, $padding: 0.125em 0.25em)
+  background: $background
+  padding: $padding
+  border-radius: 2px
+
+// Code text styling
+@mixin text-code
+  font-family: $font-family-code
+  font-size: 0.875em
+  background: $frame
+  padding: 0.125em 0.25em
+  border-radius: 3px
+  border: 1px solid $border
+
+// Text with background for readability
+@mixin text-overlay($background: rgba(0, 0, 0, 0.7), $color: white)
+  background: $background
+  color: $color
+  padding: 0.5rem 1rem
+  border-radius: 4px