style: fix switch color and use sass helper

Yizack · Nov 25, 2024 · 28dddea · 28dddea
1 parent 3f63676
commit 28dddea
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 22 deletions.
diff --git a/app/assets/scss/_helpers.scss b/app/assets/scss/_helpers.scss
@@ -0,0 +1,19 @@
+@use "sass:string";
+
+@function encode-hash($color) {
+  $string-color: "#{$color}";
+  $length: string.length($string-color);
+  $result: "";
+
+  @for $i from 1 through $length {
+    $char: string.slice($string-color, $i, $i);
+
+    @if $char == "#" {
+      $result: $result + "%23";
+    } @else {
+      $result: $result + $char;
+    }
+  }
+
+  @return $result;
+}
diff --git a/app/assets/scss/_main.scss b/app/assets/scss/_main.scss
@@ -1,5 +1,3 @@
-@use "sass:string";
-
 @font-face {
   font-family: Fredoka;
   src: url("/fonts/Fredoka-Regular.ttf") format("truetype");
@@ -163,21 +161,3 @@ td, th {
 .scale-hover:hover img {
   transform: scale(1.1);
 }
-
-@function encode-hash($color) {
-  $string-color: "#{$color}";
-  $length: string.length($string-color);
-  $result: "";
-
-  @for $i from 1 through $length {
-    $char: string.slice($string-color, $i, $i);
-
-    @if $char == "#" {
-      $result: $result + "%23";
-    } @else {
-      $result: $result + $char;
-    }
-  }
-
-  @return $result;
-}
diff --git a/app/assets/scss/_theme-dark.scss b/app/assets/scss/_theme-dark.scss
@@ -1,4 +1,5 @@
 @use "bootstrap" as bs;
+@use "helpers" as h;
 
 $body-color: #e9ecef;
 $primary: #ffafa9;
@@ -41,7 +42,7 @@ $success: #a9ffaf;
   --bs-tertiary-bg-rgb: #{bs.to-rgb($tertiary-bg)};
   --bs-success: #{$success};
   --bs-success-rgb: #{bs.to-rgb($success)};
-  --switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{encode-hash($primary)}'/%3e%3c/svg%3e");
+  --switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{h.encode-hash($primary)}'/%3e%3c/svg%3e");
 
   a {
     text-decoration: none;

diff --git a/app/assets/scss/_theme-light.scss b/app/assets/scss/_theme-light.scss
@@ -1,4 +1,5 @@
 @use "bootstrap" as bs;
+@use "helpers" as h;
 
 $body-color: #443c47;
 $primary: #c25050;
@@ -34,5 +35,5 @@ $success: #409b6e;
   --bs-dark-rgb: var(--bs-body-color-rgb);
   --bs-success: #{$success};
   --bs-success-rgb: #{bs.to-rgb($success)};
-  --switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{encode-hash($primary)}'/%3e%3c/svg%3e");
+  --switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{h.encode-hash($primary)}'/%3e%3c/svg%3e");
 }