From 4b7698f99334a544ed33c64651c75a6315c62c19 Mon Sep 17 00:00:00 2001
From: sdejonge <sdejonge@gitlab.com>
Date: Thu, 18 Sep 2025 10:35:00 +1000
Subject: [PATCH] Use CSS custom property design token overrides

Use CSS custom property design token overrides
---
 .../stylesheets/framework/ds_experiments.scss | 46 -------------------
 .../framework/ds_experiments_tokens.scss      |  9 ++++
 2 files changed, 9 insertions(+), 46 deletions(-)

diff --git a/app/assets/stylesheets/framework/ds_experiments.scss b/app/assets/stylesheets/framework/ds_experiments.scss
index 64d0d50239f7a5..404a491ee15a5a 100644
--- a/app/assets/stylesheets/framework/ds_experiments.scss
+++ b/app/assets/stylesheets/framework/ds_experiments.scss
@@ -6,40 +6,12 @@
 
  :where(.application-chrome) {
 
-  // Form elements and buttons
-  .gl-button,
-  .gl-button.gl-button,
-  .form-control:not(.gl-search-box-by-type-input-borderless),
-  .gl-form-input,
-  .gl-form-input.form-control:not(.gl-search-box-by-type-input-borderless):not(.input-group-prepend + .gl-form-input):not(.gl-search-box-by-click-input),
-  .gl-form-select,
-  .input-group-text,
-  &.application-chrome .filtered-search-box {
-    @apply gl-rounded-lg;
-  }
-
   // Decrease spacing between buttons
   // to align with optical spacing
   .gl-gap-3:has(> .gl-button) {
     @apply gl-gap-[0.375rem]; // 6px
   }
 
-  // Filtered search button
-  .input-group-prepend > div,
-  .filtered-search-history-dropdown-toggle-button.gl-button,
-  .input-group-prepend .btn {
-    @apply gl-rounded-l-lg #{!important};
-  }
-
-  .input-group-append .btn:not(.gl-rounded-full):not(.\!gl-rounded-full) {
-    @apply gl-rounded-r-lg #{!important};
-  }
-
-  // Increased border radii for GlModal
-  .gl-modal .modal-content {
-    @apply gl-rounded-[1rem] #{!important};
-  }
-
   // Increased border radii for drawers
   .gl-drawer {
     @apply gl-rounded-l-[1rem];
@@ -49,24 +21,6 @@
     }
   }
 
-  // Increased border radii for GlAlert
-  .gl-alert {
-    @apply gl-rounded-lg;
-  }
-
-  // Increased border radii for GlCard
-  .gl-card {
-    @apply gl-rounded-lg;
-  }
-
-  .gl-card-header {
-    @apply gl-rounded-t-lg;
-  }
-
-  .gl-card-footer {
-    @apply gl-rounded-b-lg;
-  }
-
   // Increased border radii for more components
   .info-well,
   .file-holder,
diff --git a/app/assets/stylesheets/framework/ds_experiments_tokens.scss b/app/assets/stylesheets/framework/ds_experiments_tokens.scss
index a965bb01a3bb11..d542f15a6477d4 100644
--- a/app/assets/stylesheets/framework/ds_experiments_tokens.scss
+++ b/app/assets/stylesheets/framework/ds_experiments_tokens.scss
@@ -6,6 +6,15 @@
 
 :root.application-chrome {
 
+  --gl-action-border-radius: var(--gl-border-radius-lg);
+  --gl-alert-border-radius: var(--gl-border-radius-lg);
+  --gl-broadcast-banner-border-radius: var(--gl-border-radius-lg);
+  --gl-button-border-radius: var(--gl-border-radius-lg);
+  --gl-card-border-radius: var(--gl-border-radius-lg);
+  --gl-control-border-radius: var(--gl-border-radius-lg);
+  --gl-dropdown-border-radius: var(--gl-border-radius-lg);
+  --gl-modal-border-radius: var(--gl-border-radius-2xl);
+
   --gl-button-confirm-primary-background-color-default: var(--gl-color-neutral-800);
   --gl-button-confirm-primary-background-color-hover: var(--gl-color-neutral-950);
   --gl-button-confirm-primary-background-color-focus: var(--gl-color-neutral-950);
-- 
GitLab