From c20d076b74be35e825ac25654797c24ec25033a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Wed, 26 Mar 2025 00:06:08 +0100
Subject: [PATCH] Refactor `border-radius` in components to use CSS variables
 (#2240)

---
 .changeset/mighty-clocks-wonder.md        |  5 +++++
 core/scss/ui/_signature.scss              |  6 ++++--
 core/scss/ui/forms/_form-colorinput.scss  |  2 +-
 core/scss/ui/forms/_form-imagecheck.scss  | 11 ++++++-----
 core/scss/ui/forms/_form-selectgroup.scss |  2 +-
 core/scss/utils/_colors.scss              |  2 +-
 core/scss/vendor/_coloris.scss            |  5 +++++
 core/scss/vendor/_litepicker.scss         |  1 +
 8 files changed, 24 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/mighty-clocks-wonder.md

diff --git a/.changeset/mighty-clocks-wonder.md b/.changeset/mighty-clocks-wonder.md
new file mode 100644
index 000000000..214ad3e5a
--- /dev/null
+++ b/.changeset/mighty-clocks-wonder.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactor `border-radius` in components to use CSS variables
diff --git a/core/scss/ui/_signature.scss b/core/scss/ui/_signature.scss
index 092f09ab4..a8d71601b 100644
--- a/core/scss/ui/_signature.scss
+++ b/core/scss/ui/_signature.scss
@@ -1,12 +1,14 @@
 .signature {
+  --#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
+  --#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
   border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
-  padding: var(--#{$prefix}spacer-1);
+  padding: var(--#{$prefix}signature-padding);
   border-radius: var(--#{$prefix}border-radius);
 }
 
 .signature-canvas {
   border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
-  border-radius: var(--#{$prefix}border-radius-sm);
+  border-radius: calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding));
   display: block;
   cursor: crosshair;
   width: 100%;
diff --git a/core/scss/ui/forms/_form-colorinput.scss b/core/scss/ui/forms/_form-colorinput.scss
index d8ea2079f..fe3985297 100644
--- a/core/scss/ui/forms/_form-colorinput.scss
+++ b/core/scss/ui/forms/_form-colorinput.scss
@@ -21,7 +21,7 @@ Color Input
   height: 1.5rem;
   color: $white;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent;
-  border-radius: 3px;
+  border-radius: var(--#{$prefix}border-radius);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
 
   &:before {
diff --git a/core/scss/ui/forms/_form-imagecheck.scss b/core/scss/ui/forms/_form-imagecheck.scss
index 8c7be8946..1cd3f23b8 100644
--- a/core/scss/ui/forms/_form-imagecheck.scss
+++ b/core/scss/ui/forms/_form-imagecheck.scss
@@ -2,6 +2,7 @@
 Image check
  */
 .form-imagecheck {
+  --#{$prefix}form-imagecheck-radius: var(--#{$prefix}border-radius);
   position: relative;
   margin: 0;
   cursor: pointer;
@@ -19,7 +20,7 @@ Image check
   margin: 0;
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  border-radius: 3px;
+  border-radius: var(--#{$prefix}form-imagecheck-radius);
 
   .form-imagecheck-input:focus ~ & {
     border-color: var(--#{$prefix}primary);
@@ -73,13 +74,13 @@ Image check
   @include transition(opacity $transition-time);
 
   &:first-child {
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+    border-top-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
+    border-top-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
   }
 
   &:last-child {
-    border-bottom-right-radius: 2px;
-    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
+    border-bottom-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
   }
 
   .form-imagecheck:hover &,
diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss
index 16586b504..f49939c6d 100644
--- a/core/scss/ui/forms/_form-selectgroup.scss
+++ b/core/scss/ui/forms/_form-selectgroup.scss
@@ -42,7 +42,7 @@ Select group
   cursor: pointer;
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
-  border-radius: 3px;
+  border-radius: var(--#{$prefix}border-radius);
   box-shadow: $input-box-shadow;
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
diff --git a/core/scss/utils/_colors.scss b/core/scss/utils/_colors.scss
index 7286fe0a1..94cd1d103 100644
--- a/core/scss/utils/_colors.scss
+++ b/core/scss/utils/_colors.scss
@@ -96,5 +96,5 @@
 }
 
 .bg-surface-backdrop {
-  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !important;
+  background-color: color-transparent($modal-backdrop-bg, $modal-backdrop-opacity) !important;
 }
\ No newline at end of file
diff --git a/core/scss/vendor/_coloris.scss b/core/scss/vendor/_coloris.scss
index 66c56671d..f4b45314e 100644
--- a/core/scss/vendor/_coloris.scss
+++ b/core/scss/vendor/_coloris.scss
@@ -1,6 +1,11 @@
 .clr-picker {
   box-shadow: var(--#{$prefix}shadow-dropdown);
   background-color: var(--#{$prefix}bg-surface);
+  border-radius: var(--#{$prefix}border-radius);
+}
+
+.clr-gradient {
+  border-radius: var(--#{$prefix}border-radius) var(--#{$prefix}border-radius) 0 0;
 }
 
 input.clr-color {
diff --git a/core/scss/vendor/_litepicker.scss b/core/scss/vendor/_litepicker.scss
index a2011de2e..2431ef3fd 100644
--- a/core/scss/vendor/_litepicker.scss
+++ b/core/scss/vendor/_litepicker.scss
@@ -62,6 +62,7 @@
     .container__months {
       box-shadow: none;
       background-color: var(--#{$prefix}bg-forms);
+      border-radius: calc(var(--#{$prefix}border-radius) - 1px);
     }
   }
 }