@magmonium/one 0.2.81 → 0.2.82

package/sass/mixins/_radio.sass

@@ -1,14 +1,7 @@
 @use 'flex' as flex
-@use 'sass:map'
+@use '../variables/colors' as *
 @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
 // ============================================
@@ -16,37 +9,30 @@ $radio-defaults: (size: 1em, color: #4169e1, color-contrast: #ffffff, color-oppo
 @mixin radio-container-base
   display: inline-flex
   align-items: center
-  $size: 1em
+  $size: var(--m-radio-size, calc(var(--input-size, 1em) * 1.25))
   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
+    background: var(--m-radio-background, var(--m-text-input-background, color-mix(in srgb, #{$focus} 2%, #{$background})))
     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%)
+    border: var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, #{$text} 18%, #{$background}))
     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
+    box-shadow: none
+    transition: var(--m-radio-transition, var(--m-text-input-transition, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease))
 
     // Inner dot (checked indicator)
     &::after
@@ -55,12 +41,12 @@ $radio-defaults: (size: 1em, color: #4169e1, color-contrast: #ffffff, color-oppo
       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)})
+      width: calc(#{$size} * 0.45)
+      height: calc(#{$size} * 0.45)
+      background-color: #ffffff
       border-radius: 50%
-      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease
-      will-change: transform
+      transition: transform 0.2s ease
+      box-shadow: none
 
   --m-label-margin: 0
 
@@ -69,15 +55,19 @@ $radio-defaults: (size: 1em, color: #4169e1, color-contrast: #ffffff, color-oppo
 // ============================================
 
 @mixin radio-container-states
-  $size: 1em
+  $size: var(--input-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%)
+    // Hover state (not disabled, not checked)
+    &:hover:not(:disabled):not(:checked)
+      border-color: var(--m-text-input-hover-border, color-mix(in srgb, #{$focus} 55%, #{$background}))
+      background: var(--m-text-input-hover-background, color-mix(in srgb, #{$focus} 4%, #{$background}))
+      box-shadow: none
 
     // 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%)
+    &:focus,
+    &:focus-visible
+      border-color: var(--m-text-input-focus-border, #{$focus})
+      box-shadow: var(--m-text-input-focus-shadow, var(--m-text-input-shadow, 0 0 0 3px color-mix(in srgb, #{$focus} 14%, transparent)))
       outline: none
 
     // Active/pressed state (not disabled)
@@ -86,34 +76,39 @@ $radio-defaults: (size: 1em, color: #4169e1, color-contrast: #ffffff, color-oppo
 
     // Checked state
     &:checked
-      border-color: var(--m-input-wrapper-color, #{map.get($radio-defaults, color)})
+      border-color: var(--m-radio-checked-border, #{$focus})
+      background: var(--m-radio-checked-background, #{$focus})
+      background-color: var(--m-radio-checked-background, #{$focus})
+      box-shadow: none
 
       &::after
         transform: translate(-50%, -50%) scale(1)
+        background-color: #ffffff
+        opacity: 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)
+        background: color-mix(in srgb, var(--m-radio-checked-background, #{$focus}) 88%, black 12%)
+        background-color: color-mix(in srgb, var(--m-radio-checked-background, #{$focus}) 88%, black 12%)
+        border-color: color-mix(in srgb, var(--m-radio-checked-border, #{$focus}) 88%, black 12%)
+        box-shadow: 0 0 0 3px color-mix(in srgb, #{$focus} 18%, transparent)
 
       // 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%)
+      &:focus,
+      &:focus-visible
+        box-shadow: var(--m-text-input-focus-shadow, var(--m-text-input-shadow, 0 0 0 3px color-mix(in srgb, #{$focus} 25%, transparent)))
 
     // 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%)
+      border-color: color-mix(in srgb, #{$text} 12%, #{$background})
 
       &:checked::after
-        opacity: 0.5
+        opacity: 0.7
+
+    &.error
+      border-color: $error
 
 // ============================================
 // Complete Radio Container