Changed all single styles to style directives

Author: Egor Dymov

src/ui/components/App.svelte

@@ -33,7 +33,7 @@
       {#if $isP3}
         <Tooltip>
           {#snippet trigger()}
-            <div style="mix-blend-mode: difference;" class="flex items-center">
+            <div style:mix-blend-mode="difference" class="flex items-center">
               <p
                 class="mr-3 rounded border-0.5 border-secondary-75 p-1 text-xxxs font-medium leading-[8px] text-secondary-75"
               >

src/ui/components/ColorIndicator.svelte

@@ -60,7 +60,7 @@
           <div class="mr-2">
             <ColorPreview {borderColor} {indicatorColor} {isBlended} />
           </div>
-          <span style="color: var({textColor})">{displayValue}</span>
+          <span style:color="var({textColor})">{displayValue}</span>
         </div>
       </button>
   {/snippet}

src/ui/components/InvalidBackgroundSelectionMessage.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import layersImage from '~ui/assets/layers@2x.webp';
+  const image = `url("${layersImage}")`;
 </script>
 
 <p
-  style="background-image: url({layersImage});"
+  style:background-image="url({image})"
   class="mx-auto flex h-[200px] w-[180px] select-none items-end justify-center bg-[length:180px_180px] bg-center bg-no-repeat pt-2 text-center font-martianMono text-xxs text-secondary-75"
 >
   The background layer should be a solid fill

src/ui/components/ProgressBar.svelte

@@ -41,7 +41,7 @@
 <div class="flex items-center justify-center">
   <div class="flex items-center">
     <span
-      style="color: var({ThemeVariablesKeys.secondary})"
+      style:color="var({ThemeVariablesKeys.secondary})"
       class="mr-2 text-xxs"
     >
       0
@@ -89,7 +89,7 @@
       </div>
     </div>
     <span
-      style="color: var({ThemeVariablesKeys.secondary})"
+      style:color="var({ThemeVariablesKeys.secondary})"
       class="ml-2 text-xxs"
     >
       {maxScale}

src/ui/components/Selection.svelte

@@ -56,7 +56,7 @@
         size === 'small' && isLast === true && 'px-5 py-3',
         size === 'large' && 'p-5',
       ]}
-      style="background-color: var({ThemeVariablesKeys.bg})"
+      style:background-color="var({ThemeVariablesKeys.bg})"
       id={`selection-${id}`}
     >
       <SegmentedFontStyleDefinition

src/ui/components/SelectionContent.svelte

@@ -27,7 +27,7 @@
       'flex items-center justify-between',
     ]}
   >
-    <p style="color: var({ThemeVariablesKeys.fg})" class="text-xxs">
+    <p style:color="var({ThemeVariablesKeys.fg})" class="text-xxs">
       {getConclusionByScore(Math.abs(apca))}
     </p>
 

src/ui/components/TextMetrics.svelte

@@ -21,10 +21,10 @@
 {:else if Math.abs(apca) < conclusions['Large Text']}
   <PictureIcon />
 {:else}
-  <div style="color: var({ThemeVariablesKeys.fg})" class="flex items-center">
+  <div style:color="var({ThemeVariablesKeys.fg})" class="flex items-center">
     <div class="mr-3 flex items-center">
       <p
-        style="borderColor: var({ThemeVariablesKeys.fg})"
+        style:border-color=" var({ThemeVariablesKeys.fg})"
         class="mr-2 rounded border-0.5 p-1 text-xxxs font-medium leading-[8px]"
       >
         Rg
@@ -33,7 +33,7 @@
     </div>
     <div class="flex items-center">
       <p
-        style="borderColor: var({ThemeVariablesKeys.fg})"
+        style:border-color="var({ThemeVariablesKeys.fg})"
         class="mr-2 rounded border-0.5 p-1 text-xxxs font-medium leading-[8px]"
       >
         Bd

src/ui/components/Tooltip.svelte

@@ -43,7 +43,7 @@
 
 {#if showTooltip}
   <div
-    style="position:absolute"
+    style:position="absolute"
     use:floatingContent
     class="rounded-full bg-black p-2 px-3 py-1.5 font-martianMono text-xxs font-medium text-white shadow-md dark:bg-white dark:text-black"
   >

src/ui/components/UnprocessedBlendModesSelectionMessage.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <p
-  style="backgroundImage: url({layersImage});"
+  style:background-image="url({layersImage})"
   class="mx-auto flex h-[200px] w-[250px] select-none items-end justify-center bg-[length:180px_180px] bg-center bg-no-repeat pt-2 text-center font-martianMono text-xxs text-secondary-75"
 >
   The blending mode Plus Darker is not supported