Dynamically set contrast the gutter icon's background if its dominant color matches the IDE's theme color

egorikftp · egorikftp · commit cbf7b89ee263 · 2025-10-14T12:01:56.000+03:00
diff --git a/components/ir/api/ir.api b/components/ir/api/ir.api
@@ -116,10 +116,6 @@ public final class io/github/composegears/valkyrie/ir/IrImageVector {
 	public fun toString ()Ljava/lang/String;
 }
 
-public final class io/github/composegears/valkyrie/ir/IrImageVectorKt {
-	public static final fun getAspectRatio (Lio/github/composegears/valkyrie/ir/IrImageVector;)F
-}
-
 public final class io/github/composegears/valkyrie/ir/IrPathFillType : java/lang/Enum {
 	public static final field EvenOdd Lio/github/composegears/valkyrie/ir/IrPathFillType;
 	public static final field NonZero Lio/github/composegears/valkyrie/ir/IrPathFillType;
@@ -513,11 +509,6 @@ public final class io/github/composegears/valkyrie/ir/IrVectorNode$IrPath : io/g
 	public fun toString ()Ljava/lang/String;
 }
 
-public final class io/github/composegears/valkyrie/ir/util/ColorClassification {
-	public static final field INSTANCE Lio/github/composegears/valkyrie/ir/util/ColorClassification;
-	public final fun from (Ljava/util/List;)Lio/github/composegears/valkyrie/ir/util/DominantShade;
-}
-
 public final class io/github/composegears/valkyrie/ir/util/DominantShade : java/lang/Enum {
 	public static final field Black Lio/github/composegears/valkyrie/ir/util/DominantShade;
 	public static final field Mixed Lio/github/composegears/valkyrie/ir/util/DominantShade;
@@ -527,8 +518,9 @@ public final class io/github/composegears/valkyrie/ir/util/DominantShade : java/
 	public static fun values ()[Lio/github/composegears/valkyrie/ir/util/DominantShade;
 }
 
-public final class io/github/composegears/valkyrie/ir/util/IrImageVectorColorKt {
-	public static final fun iconColors (Lio/github/composegears/valkyrie/ir/IrImageVector;)Ljava/util/List;
+public final class io/github/composegears/valkyrie/ir/util/IrImageVectorExtensionsKt {
+	public static final fun getAspectRatio (Lio/github/composegears/valkyrie/ir/IrImageVector;)F
+	public static final fun getDominantShadeColor (Lio/github/composegears/valkyrie/ir/IrImageVector;)Lio/github/composegears/valkyrie/ir/util/DominantShade;
 }
 
 public final class io/github/composegears/valkyrie/ir/util/PathNodeKt {
diff --git a/components/ir/api/ir.klib.api b/components/ir/api/ir.klib.api
@@ -654,12 +654,9 @@ final value class io.github.composegears.valkyrie.ir/IrColor { // io.github.comp
     }
 }
 
-final object io.github.composegears.valkyrie.ir.util/ColorClassification { // io.github.composegears.valkyrie.ir.util/ColorClassification|null[0]
-    final fun from(kotlin.collections/List<io.github.composegears.valkyrie.ir/IrColor>): io.github.composegears.valkyrie.ir.util/DominantShade // io.github.composegears.valkyrie.ir.util/ColorClassification.from|from(kotlin.collections.List<io.github.composegears.valkyrie.ir.IrColor>){}[0]
-}
-
-final val io.github.composegears.valkyrie.ir/aspectRatio // io.github.composegears.valkyrie.ir/aspectRatio|@io.github.composegears.valkyrie.ir.IrImageVector{}aspectRatio[0]
-    final fun (io.github.composegears.valkyrie.ir/IrImageVector).<get-aspectRatio>(): kotlin/Float // io.github.composegears.valkyrie.ir/aspectRatio.<get-aspectRatio>|<get-aspectRatio>@io.github.composegears.valkyrie.ir.IrImageVector(){}[0]
+final val io.github.composegears.valkyrie.ir.util/aspectRatio // io.github.composegears.valkyrie.ir.util/aspectRatio|@io.github.composegears.valkyrie.ir.IrImageVector{}aspectRatio[0]
+    final fun (io.github.composegears.valkyrie.ir/IrImageVector).<get-aspectRatio>(): kotlin/Float // io.github.composegears.valkyrie.ir.util/aspectRatio.<get-aspectRatio>|<get-aspectRatio>@io.github.composegears.valkyrie.ir.IrImageVector(){}[0]
+final val io.github.composegears.valkyrie.ir.util/dominantShadeColor // io.github.composegears.valkyrie.ir.util/dominantShadeColor|@io.github.composegears.valkyrie.ir.IrImageVector{}dominantShadeColor[0]
+    final fun (io.github.composegears.valkyrie.ir/IrImageVector).<get-dominantShadeColor>(): io.github.composegears.valkyrie.ir.util/DominantShade // io.github.composegears.valkyrie.ir.util/dominantShadeColor.<get-dominantShadeColor>|<get-dominantShadeColor>@io.github.composegears.valkyrie.ir.IrImageVector(){}[0]
 
-final fun (io.github.composegears.valkyrie.ir/IrImageVector).io.github.composegears.valkyrie.ir.util/iconColors(): kotlin.collections/List<io.github.composegears.valkyrie.ir/IrColor> // io.github.composegears.valkyrie.ir.util/iconColors|iconColors@io.github.composegears.valkyrie.ir.IrImageVector(){}[0]
 final fun (kotlin/Char).io.github.composegears.valkyrie.ir.util/toPathNodes(kotlin/FloatArray): kotlin.collections/List<io.github.composegears.valkyrie.ir/IrPathNode> // io.github.composegears.valkyrie.ir.util/toPathNodes|toPathNodes@kotlin.Char(kotlin.FloatArray){}[0]
diff --git a/components/ir/src/commonMain/kotlin/io/github/composegears/valkyrie/ir/IrImageVector.kt b/components/ir/src/commonMain/kotlin/io/github/composegears/valkyrie/ir/IrImageVector.kt
@@ -9,10 +9,3 @@ data class IrImageVector(
     val viewportHeight: Float,
     val nodes: List<IrVectorNode>,
 )
-
-val IrImageVector.aspectRatio: Float
-    get() = if (viewportHeight != 0f && viewportWidth != 0f) {
-        viewportWidth / viewportHeight
-    } else {
-        1f
-    }
diff --git a/components/ir/src/commonMain/kotlin/io/github/composegears/valkyrie/ir/util/ColorClassification.kt b/components/ir/src/commonMain/kotlin/io/github/composegears/valkyrie/ir/util/ColorClassification.kt
@@ -11,7 +11,7 @@ enum class DominantShade {
     Mixed,
 }
 
-object ColorClassification {
+internal object ColorClassification {
 
     private const val BLACK_THRESHOLD = 0.2f
     private const val WHITE_THRESHOLD = 0.8f
diff --git a/components/ir/src/commonMain/kotlin/io/github/composegears/valkyrie/ir/util/IrImageVectorColor.kt b/components/ir/src/commonMain/kotlin/io/github/composegears/valkyrie/ir/util/IrImageVectorColor.kt
@@ -6,7 +6,7 @@ import io.github.composegears.valkyrie.ir.IrImageVector
 import io.github.composegears.valkyrie.ir.IrStroke
 import io.github.composegears.valkyrie.ir.IrVectorNode
 
-fun IrImageVector.iconColors(): List<IrColor> {
+internal fun IrImageVector.iconColors(): List<IrColor> {
     val colors = mutableSetOf<IrColor>()
 
     nodes.onEach { node ->
diff --git a/components/ir/src/commonMain/kotlin/io/github/composegears/valkyrie/ir/util/IrImageVectorExtensions.kt b/components/ir/src/commonMain/kotlin/io/github/composegears/valkyrie/ir/util/IrImageVectorExtensions.kt
@@ -0,0 +1,13 @@
+package io.github.composegears.valkyrie.ir.util
+
+import io.github.composegears.valkyrie.ir.IrImageVector
+
+val IrImageVector.aspectRatio: Float
+    get() = if (viewportHeight != 0f && viewportWidth != 0f) {
+        viewportWidth / viewportHeight
+    } else {
+        1f
+    }
+
+val IrImageVector.dominantShadeColor: DominantShade
+    get() = ColorClassification.from(iconColors())
diff --git a/tools/idea-plugin/CHANGELOG.md b/tools/idea-plugin/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Added
 
 - Setup of changelog plugin
+- Dynamically set the gutter icon's background to maintain contrast when its dominant color matches the IDE theme color
 
 ## [0.17.2](https://github.com/ComposeGears/Valkyrie/releases/tag/0.17.2) - 2025-10-11
 
diff --git a/tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/completion/ImageVectorCompletionContributor.kt b/tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/completion/ImageVectorCompletionContributor.kt
@@ -8,7 +8,8 @@ import com.intellij.codeInsight.lookup.LookupElementDecorator
 import com.intellij.codeInsight.lookup.LookupElementPresentation
 import com.intellij.psi.util.CachedValueProvider
 import com.intellij.psi.util.CachedValuesManager
-import io.github.composegears.valkyrie.ir.aspectRatio
+import io.github.composegears.valkyrie.ir.util.aspectRatio
+import io.github.composegears.valkyrie.ir.util.dominantShadeColor
 import io.github.composegears.valkyrie.ir.xml.toVectorXmlString
 import io.github.composegears.valkyrie.psi.imagevector.ImageVectorPsiParser
 import io.github.composegears.valkyrie.sdk.core.extensions.safeAs
@@ -65,6 +66,7 @@ class ImageVectorCompletionContributor : CompletionContributor() {
         return ImageVectorIcon(
             vectorXml = vectorXml,
             aspectRatio = irImageVector.aspectRatio,
+            dominantShade = irImageVector.dominantShadeColor,
         )
     }
 
diff --git a/tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/completion/ImageVectorIcon.kt b/tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/completion/ImageVectorIcon.kt
@@ -2,6 +2,9 @@ package io.github.composegears.valkyrie.completion
 
 import com.android.ide.common.vectordrawable.VdPreview
 import com.intellij.openapi.diagnostic.Logger
+import com.intellij.ui.JBColor
+import io.github.composegears.valkyrie.ir.util.DominantShade
+import java.awt.Color
 import java.awt.Component
 import java.awt.Graphics
 import java.awt.Graphics2D
@@ -12,13 +15,15 @@ class ImageVectorIcon(
     private val vectorXml: String,
     private val size: Int = 16,
     private val aspectRatio: Float,
+    private val dominantShade: DominantShade,
 ) : Icon {
 
     @Volatile
     private var cachedImage: Image? = null
 
     override fun paintIcon(c: Component?, g: Graphics?, x: Int, y: Int) {
         if (g !is Graphics2D) return
+        drawBackground(g = g, x = x, y = y)
 
         if (cachedImage == null) {
             cachedImage = renderImage()
@@ -38,6 +43,20 @@ class ImageVectorIcon(
         g.drawImage(img, offsetX, offsetY, width, height, null)
     }
 
+    private fun drawBackground(g: Graphics2D, x: Int, y: Int) {
+        when (dominantShade) {
+            DominantShade.Black -> {
+                g.color = blackIconBackgroundColor
+                g.fillRoundRect(x, y, size, size, 2, 2)
+            }
+            DominantShade.White -> {
+                g.color = whiteIconBackgroundColor
+                g.fillRoundRect(x, y, size, size, 2, 2)
+            }
+            DominantShade.Mixed -> {}
+        }
+    }
+
     private fun renderImage(): Image? {
         val maxDimension = ICON_SCALE_FACTOR * size
         val errorLog = StringBuilder()
@@ -61,5 +80,8 @@ class ImageVectorIcon(
 
     companion object {
         private const val ICON_SCALE_FACTOR = 4
+
+        private val blackIconBackgroundColor = JBColor(Color(0, 0, 0, 0), Color.WHITE)
+        private val whiteIconBackgroundColor = JBColor(Color.DARK_GRAY, Color(0, 0, 0, 0))
     }
 }
diff --git a/tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/gutter/ImageVectorGutterProvider.kt b/tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/gutter/ImageVectorGutterProvider.kt
@@ -11,7 +11,8 @@ import com.intellij.psi.util.CachedValueProvider
 import com.intellij.psi.util.CachedValuesManager
 import io.github.composegears.valkyrie.completion.ImageVectorIcon
 import io.github.composegears.valkyrie.ir.IrImageVector
-import io.github.composegears.valkyrie.ir.aspectRatio
+import io.github.composegears.valkyrie.ir.util.aspectRatio
+import io.github.composegears.valkyrie.ir.util.dominantShadeColor
 import io.github.composegears.valkyrie.ir.xml.toVectorXmlString
 import io.github.composegears.valkyrie.psi.imagevector.ImageVectorPsiParser
 import io.github.composegears.valkyrie.sdk.core.extensions.safeAs
@@ -87,6 +88,7 @@ class ImageVectorGutterProvider : LineMarkerProvider {
         return ImageVectorIcon(
             vectorXml = vectorXml,
             aspectRatio = irImageVector.aspectRatio,
+            dominantShade = irImageVector.dominantShadeColor,
         )
     }
 
diff --git a/tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/components/previewer/ImageVectorPreviewPanel.kt b/tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/components/previewer/ImageVectorPreviewPanel.kt
@@ -27,9 +27,8 @@ import io.github.composegears.valkyrie.compose.core.layout.VerticalSpacer
 import io.github.composegears.valkyrie.compose.core.rememberMutableState
 import io.github.composegears.valkyrie.ir.IrImageVector
 import io.github.composegears.valkyrie.ir.compose.toComposeImageVector
-import io.github.composegears.valkyrie.ir.util.ColorClassification
 import io.github.composegears.valkyrie.ir.util.DominantShade
-import io.github.composegears.valkyrie.ir.util.iconColors
+import io.github.composegears.valkyrie.ir.util.dominantShadeColor
 import io.github.composegears.valkyrie.ui.domain.model.PreviewType
 import io.github.composegears.valkyrie.ui.foundation.previewbg.BgType
 import io.github.composegears.valkyrie.ui.foundation.previewbg.PreviewBackground
@@ -64,10 +63,10 @@ fun ImageVectorPreviewPanel(
             PreviewType.Black -> BgType.Black
             PreviewType.White -> BgType.White
             PreviewType.Pixel -> BgType.PixelGrid
-            PreviewType.Auto -> when (ColorClassification.from(irImageVector?.iconColors().orEmpty())) {
+            PreviewType.Auto -> when (irImageVector?.dominantShadeColor) {
                 DominantShade.Black -> BgType.White
                 DominantShade.White -> BgType.Black
-                DominantShade.Mixed -> BgType.PixelGrid
+                DominantShade.Mixed, null -> BgType.PixelGrid
             }
         }
     }
diff --git a/tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/mode/iconpack/conversion/ui/batch/ui/IconPreviewBox.kt b/tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/mode/iconpack/conversion/ui/batch/ui/IconPreviewBox.kt
@@ -19,9 +19,8 @@ import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.unit.dp
 import io.github.composegears.valkyrie.ir.IrImageVector
 import io.github.composegears.valkyrie.ir.compose.toComposeImageVector
-import io.github.composegears.valkyrie.ir.util.ColorClassification
 import io.github.composegears.valkyrie.ir.util.DominantShade
-import io.github.composegears.valkyrie.ir.util.iconColors
+import io.github.composegears.valkyrie.ir.util.dominantShadeColor
 import io.github.composegears.valkyrie.ui.domain.model.PreviewType
 import io.github.composegears.valkyrie.ui.foundation.previewbg.BgType
 import io.github.composegears.valkyrie.ui.foundation.previewbg.PreviewBackground
@@ -40,7 +39,7 @@ fun IconPreviewBox(
                 PreviewType.Black -> BgType.Black
                 PreviewType.White -> BgType.White
                 PreviewType.Pixel -> BgType.PixelGrid
-                PreviewType.Auto -> when (ColorClassification.from(irImageVector.iconColors())) {
+                PreviewType.Auto -> when (irImageVector.dominantShadeColor) {
                     DominantShade.Black -> BgType.White
                     DominantShade.White -> BgType.Black
                     DominantShade.Mixed -> BgType.PixelGrid

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ enum class DominantShade {`
`11`	`11`	`Mixed,`
`12`	`12`	`}`
`13`	`13`
`14`		`-object ColorClassification {`
	`14`	`+internal object ColorClassification {`
`15`	`15`
`16`	`16`	`private const val BLACK_THRESHOLD = 0.2f`
`17`	`17`	`private const val WHITE_THRESHOLD = 0.8f`