From 3b2b9381f75e6fccb8c479661de4bc29b6475183 Mon Sep 17 00:00:00 2001
From: sdejonge <sdejonge@gitlab.com>
Date: Mon, 8 Sep 2025 14:41:43 +1000
Subject: [PATCH] Use rem for border radius SCSS variables

In preparation of border radius design tokens inheriting values from
spacing scales rem values update existing SCSS variables to support
rem values to avoid CSS stylesheet compile errors
---
 app/assets/stylesheets/framework/awards.scss         | 2 +-
 app/assets/stylesheets/framework/ds_experiments.scss | 8 ++++----
 app/assets/stylesheets/framework/variables.scss      | 8 ++++----
 app/assets/stylesheets/page_bundles/tree.scss        | 4 ++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index bcf67b5346f9a1..50fa8686b8accf 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -299,7 +299,7 @@
 }
 
 .add-reaction-search {
-  $input-focus-ring-border-radius: calc(#{$gl-border-radius-large} - #{$gl-border-size-1});
+  $input-focus-ring-border-radius: $gl-border-radius-lg-inner;
 
   input {
     border-top-left-radius: $input-focus-ring-border-radius !important;
diff --git a/app/assets/stylesheets/framework/ds_experiments.scss b/app/assets/stylesheets/framework/ds_experiments.scss
index 21db68d716c98b..18e466fca0e3f9 100644
--- a/app/assets/stylesheets/framework/ds_experiments.scss
+++ b/app/assets/stylesheets/framework/ds_experiments.scss
@@ -78,19 +78,19 @@
   table.tree-table tbody tr:last-child {
     td, th {
       &:first-child {
-        border-bottom-left-radius: calc(#{$gl-border-radius-lg} - 1px) !important;
+        border-bottom-left-radius: $gl-border-radius-lg-inner !important;
       }
 
       &:last-child {
-        border-bottom-right-radius: calc(#{$gl-border-radius-lg} - 1px) !important;
+        border-bottom-right-radius: $gl-border-radius-lg-inner !important;
       }
     }
   }
 
   // File title
   .file-title-flex-parent, .file-holder .file-title-flex-parent {
-    border-top-left-radius: #{$gl-border-radius-lg - 1px} !important;
-    border-top-right-radius: #{$gl-border-radius-lg - 1px} !important;
+    border-top-left-radius: $gl-border-radius-lg-inner !important;
+    border-top-right-radius: $gl-border-radius-lg-inner !important;
   }
 
   // Discussion file comment
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 7245c521668c4a..f7e98aabed0551 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -136,10 +136,10 @@ $limited-layout-width: 1006px;
 $fixed-layout-width: 1296px;
 $container-margin: $gl-padding;
 $container-margin-xl: $gl-padding-24;
-$gl-border-radius-base: 4px;
-$gl-border-radius-base-inner: $gl-border-radius-base - 1px;
-$gl-border-radius-lg: 8px;
-$gl-border-radius-lg-inner: $gl-border-radius-lg - 1px;
+$gl-border-radius-base: 0.25rem;
+$gl-border-radius-base-inner: calc(#{$gl-border-radius-base} - 1px);
+$gl-border-radius-lg: 0.5rem;
+$gl-border-radius-lg-inner: calc(#{$gl-border-radius-lg} - 1px);
 $border-radius-small: 2px;
 $border-radius-large: 8px;
 $default-icon-size: 16px;
diff --git a/app/assets/stylesheets/page_bundles/tree.scss b/app/assets/stylesheets/page_bundles/tree.scss
index 9df06ecc098bab..fe1777918add09 100644
--- a/app/assets/stylesheets/page_bundles/tree.scss
+++ b/app/assets/stylesheets/page_bundles/tree.scss
@@ -166,13 +166,13 @@ $bottom-padding: $gl-spacing-scale-6;
             &:first-child {
               box-shadow: inset 1px 0 0 0 var(--gl-action-selected-border-color-default),
                 inset 0 -1px 0 0 var(--gl-action-selected-border-color-default);
-              border-bottom-left-radius: calc(#{$gl-border-radius-base} - 1px);
+              border-bottom-left-radius: $gl-border-radius-base-inner;
             }
 
             &:last-child {
               box-shadow: inset -1px 0 0 0 var(--gl-action-selected-border-color-default),
                 inset 0 -1px 0 0 var(--gl-action-selected-border-color-default);
-              border-bottom-right-radius: calc(#{$gl-border-radius-base} - 1px);
+              border-bottom-right-radius: $gl-border-radius-base-inner;
             }
           }
         }
-- 
GitLab