✨ Refactor icon components to use CSS variables for colors and improve consistency

HassanZahirnia · HassanZahirnia · commit 2c6401c96e31 · 2025-08-25T13:46:23.000+03:30
diff --git a/resources/views/components/home/explainer.blade.php b/resources/views/components/home/explainer.blade.php
@@ -445,10 +445,14 @@ class="flex items-center gap-3 rounded-2xl bg-white/50 py-3 pr-5 pl-3 font-mediu
                     <div
                         class="grid size-10 shrink-0 place-items-center rounded-xl bg-blue-100 dark:bg-blue-500/20"
                     >
-                        <x-icons.home.document
-                            class="size-5"
-                            aria-hidden="true"
-                        />
+                        <div
+                            class="[--icon-bg:#F9FBF0] [--icon-dot:#BEDBFF] [--icon-stroke:#155DFC] dark:[--icon-bg:--alpha(var(--color-blue-400)/30%)] dark:[--icon-dot:--alpha(var(--color-blue-400)/70%)] dark:[--icon-stroke:--alpha(var(--color-blue-300)/80%)]"
+                        >
+                            <x-icons.home.document
+                                class="size-5"
+                                aria-hidden="true"
+                            />
+                        </div>
                     </div>
                     <span class="text-gray-400 dark:text-zinc-400">1.</span>
                     <span class="text-gray-800 dark:text-white">
@@ -461,10 +465,14 @@ class="flex items-center gap-3 rounded-2xl bg-white/50 py-3 pr-5 pl-3 font-mediu
                     <div
                         class="grid size-10 shrink-0 place-items-center rounded-xl bg-violet-100 dark:bg-violet-500/20"
                     >
-                        <x-icons.home.browser
-                            class="size-5"
-                            aria-hidden="true"
-                        />
+                        <div
+                            class="[--icon-bg:#fff] [--icon-dot:#DDD6FF] [--icon-stroke:#7F22FE] dark:[--icon-bg:--alpha(var(--color-violet-400)/30%)] dark:[--icon-dot:--alpha(var(--color-violet-400)/70%)] dark:[--icon-stroke:--alpha(var(--color-violet-300)/80%)]"
+                        >
+                            <x-icons.home.browser
+                                class="size-5"
+                                aria-hidden="true"
+                            />
+                        </div>
                     </div>
                     <span class="text-gray-400 dark:text-zinc-400">2.</span>
                     <span class="text-gray-800 dark:text-white">
@@ -477,10 +485,14 @@ class="flex items-center gap-3 rounded-2xl bg-white/50 py-3 pr-5 pl-3 font-mediu
                     <div
                         class="grid size-10 shrink-0 place-items-center rounded-xl bg-cyan-100 dark:bg-cyan-500/20"
                     >
-                        <x-icons.home.startup
-                            class="size-5"
-                            aria-hidden="true"
-                        />
+                        <div
+                            class="[--icon-bg:#fff] [--icon-dot:#CEFAFE] [--icon-stroke:#0092B8] dark:[--icon-bg:--alpha(var(--color-sky-400)/30%)] dark:[--icon-dot:--alpha(var(--color-sky-400)/70%)] dark:[--icon-stroke:--alpha(var(--color-sky-300)/80%)]"
+                        >
+                            <x-icons.home.startup
+                                class="size-5"
+                                aria-hidden="true"
+                            />
+                        </div>
                     </div>
                     <span class="text-gray-400 dark:text-zinc-400">3.</span>
                     <span class="text-gray-800 dark:text-white">
diff --git a/resources/views/components/icons/home/browser.blade.php b/resources/views/components/icons/home/browser.blade.php
@@ -6,36 +6,42 @@
 >
     <path
         d="M2.44403 14.861C2.64958 16.7833 4.19483 18.3294 6.11516 18.5435C9.06482 18.8724 11.9335 18.8724 14.8831 18.5435C16.8035 18.3294 18.3487 16.7833 18.5543 14.861C18.8677 11.9304 18.8677 9.06965 18.5543 6.13893C18.3487 4.21672 16.8035 2.67071 14.8831 2.45655C11.9335 2.1276 9.06482 2.1276 6.11516 2.45655C4.19483 2.67071 2.64958 4.21672 2.44403 6.13893C2.13064 9.06965 2.13064 11.9304 2.44403 14.861Z"
-        fill="white"
+        fill="currentColor"
+        class="text-[var(--icon-bg)]"
     />
     <path
         d="M2.44403 14.861C2.64958 16.7833 4.19483 18.3294 6.11516 18.5435C9.06482 18.8724 11.9335 18.8724 14.8831 18.5435C16.8035 18.3294 18.3487 16.7833 18.5543 14.861C18.8677 11.9304 18.8677 9.06965 18.5543 6.13893C18.3487 4.21672 16.8035 2.67071 14.8831 2.45655C11.9335 2.1276 9.06482 2.1276 6.11516 2.45655C4.19483 2.67071 2.64958 4.21672 2.44403 6.13893C2.13064 9.06965 2.13064 11.9304 2.44403 14.861Z"
-        stroke="#7F22FE"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M18.5918 6.49723H2.40625C2.4186 6.37753 2.43117 6.2581 2.44392 6.13893C2.64947 4.21672 4.19472 2.67071 6.11504 2.45655C9.0647 2.1276 11.9334 2.1276 14.883 2.45655C16.8034 2.67071 18.3487 4.21672 18.5542 6.13893C18.5669 6.2581 18.5795 6.37753 18.5918 6.49723Z"
-        fill="#DDD6FF"
+        fill="currentColor"
+        class="text-[var(--icon-dot)]"
     />
     <path
         d="M18.5918 6.49723H2.40625C2.4186 6.37753 2.43117 6.2581 2.44392 6.13893C2.64947 4.21672 4.19472 2.67071 6.11504 2.45655C9.0647 2.1276 11.9334 2.1276 14.883 2.45655C16.8034 2.67071 18.3487 4.21672 18.5542 6.13893C18.5669 6.2581 18.5795 6.37753 18.5918 6.49723Z"
-        stroke="#7F22FE"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M11.9315 12.3135H15.4749"
-        stroke="#7F22FE"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M6.29297 14.9968C7.36629 14.4602 8.43961 13.3869 8.97627 12.3136C8.43961 11.2402 7.36629 10.1669 6.29297 9.63025"
-        stroke="#7F22FE"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
diff --git a/resources/views/components/icons/home/document.blade.php b/resources/views/components/icons/home/document.blade.php
@@ -8,36 +8,42 @@
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M17.4125 2.39445C14.357 2.15444 10.2704 2.14265 7.2276 2.39325C6.60573 2.44447 6.11779 2.93951 6.0675 3.56146C5.80814 6.7693 5.84035 9.93441 6.16412 13.1529V13.6738C8.62109 13.6062 11.2628 13.6843 13.2927 13.9083C12.3444 16.1322 13.3767 18.7236 15.8563 18.7889H16.0375C17.4352 18.7889 18.5962 17.7048 18.6601 16.3087C18.8546 12.0708 18.8311 7.85195 18.59 3.60947C18.5533 2.96602 18.055 2.44492 17.4125 2.39445Z"
-        fill="white"
+        fill="currentColor"
+        class="text-[var(--icon-bg)]"
     />
     <path
         d="M2.49515 13.9083C2.08213 15.4289 1.59128 18.7902 5.14725 18.7902H15.9531C13.4041 18.7902 12.3328 16.1608 13.2933 13.9083C10.1752 13.5643 5.61329 13.5643 2.49515 13.9083Z"
-        fill="#BEDBFF"
+        fill="currentColor"
+        class="text-[var(--icon-dot)]"
     />
     <path
         d="M2.49515 13.9083C2.08213 15.4289 1.59128 18.7902 5.14725 18.7902H15.9531C13.4041 18.7902 12.3328 16.1608 13.2933 13.9083C10.1752 13.5643 5.61329 13.5643 2.49515 13.9083Z"
-        stroke="#155DFC"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M9.63275 6.40674H15.0519"
-        stroke="#155DFC"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M9.63275 9.93005H15.0519"
-        stroke="#155DFC"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M14.3498 18.7889H16.0375C17.4352 18.7889 18.5962 17.7048 18.6601 16.3087C18.8546 12.0708 18.8311 7.85195 18.59 3.60947C18.5533 2.96602 18.055 2.44492 17.4125 2.39445C14.357 2.15444 10.2704 2.14265 7.2276 2.39325C6.60573 2.44447 6.11779 2.93951 6.0675 3.56146C5.80814 6.7693 5.84035 9.93441 6.16412 13.1529"
-        stroke="#155DFC"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
diff --git a/resources/views/components/icons/home/startup.blade.php b/resources/views/components/icons/home/startup.blade.php
@@ -6,51 +6,60 @@
 >
     <path
         d="M6.16893 18.0078C5.75859 18.404 4.67333 18.78 3.64212 19.0668C2.58061 19.3619 1.63867 18.4199 1.93378 17.3583C2.22046 16.3272 2.5966 15.2419 2.99281 14.8316C3.19855 14.6108 3.44665 14.4337 3.7223 14.3109C3.99796 14.1881 4.29555 14.122 4.59728 14.1167C4.89902 14.1114 5.19875 14.1669 5.47858 14.2799C5.7584 14.3929 6.01258 14.5612 6.22598 14.7746C6.43937 14.9879 6.6076 15.2422 6.72063 15.5219C6.83366 15.8018 6.88917 16.1016 6.88383 16.4032C6.87852 16.7049 6.81247 17.0026 6.68964 17.2782C6.56682 17.5539 6.38973 17.802 6.16893 18.0078Z"
-        fill="white"
+        fill="currentColor"
+        class="text-[var(--icon-bg)]"
     />
     <path
         d="M6.01172 11.3994L6.04533 11.4202C7.4944 12.3146 8.71272 13.5373 9.60188 14.9895C12.474 13.269 15.739 11.6026 17.2293 10.0582C20.4537 6.83382 18.5841 2.41724 18.5841 2.41724C18.5841 2.41724 14.1675 0.547643 10.9431 3.77201C9.39866 5.26227 7.71874 8.54084 6.01172 11.3994Z"
-        fill="#CEFAFE"
+        fill="currentColor"
+        class="text-[var(--icon-dot)]"
     />
     <path
         d="M9.59375 14.9947L11.8052 18.9945C14.8518 17.3982 15.5942 14.2674 14.928 11.8473L9.59375 14.9947Z"
-        fill="white"
+        fill="currentColor"
+        class="text-[var(--icon-bg)]"
     />
     <path
         d="M6.01152 11.4129L2.01172 9.20144C3.60574 6.1446 6.74458 5.40485 9.1664 6.07704L6.01152 11.4129Z"
-        fill="white"
+        fill="currentColor"
+        class="text-[var(--icon-bg)]"
     />
     <path
         d="M6.01152 11.4129L2.01172 9.20144C3.60574 6.1446 6.74458 5.40485 9.1664 6.07704"
-        stroke="#0092B8"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M9.59375 14.9947L11.8052 18.9945C14.8518 17.3982 15.5942 14.2674 14.928 11.8473"
-        stroke="#0092B8"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M6.01172 11.3994L6.04533 11.4202C7.4944 12.3146 8.71272 13.5373 9.60188 14.9895C12.474 13.269 15.739 11.6026 17.2293 10.0582C20.4537 6.83382 18.5841 2.41724 18.5841 2.41724C18.5841 2.41724 14.1675 0.547643 10.9431 3.77201C9.39866 5.26227 7.71874 8.54084 6.01172 11.3994Z"
-        stroke="#0092B8"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M6.16893 18.0078C5.75859 18.404 4.67333 18.78 3.64212 19.0668C2.58061 19.3619 1.63867 18.4199 1.93378 17.3583C2.22046 16.3272 2.5966 15.2419 2.99281 14.8316C3.19855 14.6108 3.44665 14.4337 3.7223 14.3109C3.99796 14.1881 4.29555 14.122 4.59728 14.1167C4.89902 14.1114 5.19875 14.1669 5.47858 14.2799C5.7584 14.3929 6.01258 14.5612 6.22598 14.7746C6.43937 14.9879 6.60761 15.2422 6.72063 15.5219C6.83366 15.8018 6.88917 16.1016 6.88383 16.4032C6.87852 16.7049 6.81247 17.0026 6.68964 17.2782C6.56682 17.5539 6.38973 17.802 6.16893 18.0078Z"
-        stroke="#0092B8"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M14.2949 6.70558L14.793 6.20752"
-        stroke="#0092B8"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
