Added radio btn marker visibility customization in disabled state (#4151)

Signed-off-by: Oleg Solodkov <oleg.solodkov@xored.com>

packages/theme/styles/components.scss

@@ -431,6 +431,15 @@
       }
     }
   }
+  &.marker-visible.checked {
+    .marker {
+      background-color: var(--primary-button-disabled);
+
+      &::after {
+        content: '';
+      }
+    }
+  }
   &.disabled {
     cursor: not-allowed;
 

packages/ui/src/components/RadioButton.svelte

@@ -29,6 +29,7 @@
   export let action: () => void = () => {}
   export let gap: 'large' | 'small' | 'medium' | 'none' = 'none'
   export let labelGap: 'large' | 'medium' = 'medium'
+  export let isMarkerVisible: boolean = false
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -38,6 +39,7 @@
   class:disabled
   class:checked={group === value}
   tabindex="-1"
+  class:marker-visible={isMarkerVisible}
   on:click={() => {
     if (!disabled && group !== value) action()
   }}