Add css variables for border radius (#26491)

webapp/channels/src/components/widgets/admin_console/admin_panel.scss

@@ -1,11 +1,13 @@
 @import 'utils/module';
 
 .AdminPanel {
+    overflow: hidden;
     padding: 0;
-    border: solid 1px alpha-color($black, 0.1);
+    border: solid 1px rgba(var(--center-channel-color-rgb), 0.12);
-    border-radius: $border-rad;
+    border-radius: var(--radius-s);
     margin: 2em 0 1em;
-    box-shadow: 0 1px 2px 0 alpha-color($black, 0.5);
+    background-color: var(--center-channel-bg);
+    box-shadow: var(--elevation-1);
     font-size: 0.95em;
 
     .AdminPanel__content {
@@ -35,6 +37,7 @@
         align-items: center;
         justify-content: space-between;
         padding: 20px;
+        border-radius: var(--radius-s) var(--radius-s) 0 0;
         background: $white;
 
         h3 {

webapp/channels/src/sass/base/_css_variables.scss

@@ -78,6 +78,14 @@
     --elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12);
     --elevation-6: 0 20px 32px 0 rgba(0, 0, 0, 0.12);
 
+    //Corner Radius variables
+    --radius-xs: 2px;
+    --radius-s: 4px;
+    --radius-m: 8px;
+    --radius-l: 12px;
+    --radius-xl: 16px;
+    --radius-full: 50%;
+
     // Global Header variables
     --global-header-background: var(--sidebar-teambar-bg);
     --global-header-text: var(--sidebar-header-text-color);

webapp/channels/src/sass/components/_alerts.scss

@@ -2,7 +2,7 @@
 
 .alert {
     padding: 8px 12px;
-    border-radius: $border-rad;
+    border-radius: var(--radius-s);
 
     .alert-transparent {
         border-color: rgba(var(--center-channel-color-rgb), 0.12);

webapp/channels/src/sass/components/_buttons.scss

@@ -26,7 +26,7 @@ button {
         display: inline-block;
         width: 8px;
         height: 8px;
-        border-radius: 50%;
+        border-radius: var(--radius-full);
         margin: 0 0 0 40px;
         background: #f74343;
     }
@@ -40,7 +40,7 @@ button {
     justify-content: center;
     padding: 0 20px;
     border: none;
-    border-radius: $border-rad * 2;
+    border-radius: var(--radius-s);
     font-size: 14px;
     font-weight: 600;
     gap: 8px;

webapp/channels/src/sass/components/_dnd-pickers-dropdown-menu.scss

@@ -16,7 +16,7 @@
     .btn {
         height: 4rem;
         padding: 0 2rem;
-        border-radius: $border-rad * 2;
+        border-radius: var(--radius-s);
         font-size: 14px;
         font-weight: 600;
     }

webapp/channels/src/sass/components/_edit-post-time-limit-button.scss

@@ -2,7 +2,7 @@
     height: 26px;
     padding: 0 8px;
     border-color: #5b6672;
-    border-radius: $border-rad * 2;
+    border-radius: var(--radius-s);
     background: transparent;
     color: #5b6672;
     transition: all 0.15s ease;

webapp/channels/src/sass/components/_emoticons.scss

@@ -90,8 +90,7 @@
     width: 350px;
     flex-direction: column;
     border: 1px solid;
-    border-radius: $border-rad;
+    border-radius: var(--radius-s);
-    border-radius: 4px;
     margin-right: 3px;
     background: var(--center-channel-bg);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

webapp/channels/src/sass/components/_inputs.scss

@@ -30,7 +30,7 @@
 }
 
 .form-control {
-    border-radius: $border-rad;
+    border-radius: var(--radius-xs);
     text-align: left;
 
     &:focus {

webapp/channels/src/sass/components/_popover.scss

@@ -14,7 +14,7 @@
 
 .popover {
     padding: 0;
-    border-radius: $border-rad * 2;
+    border-radius: var(--radius-s);
     background: var(--center-channel-bg);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
     color: var(--center-channel-color);

webapp/channels/src/sass/components/_scrollbar.scss

@@ -10,7 +10,7 @@
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: $border-rad * 2;
+    border-radius: var(--radius-s);
     background: rgba(var(--center-channel-color-rgb), 0.4);
 }
 

webapp/channels/src/sass/routes/_about-modal.scss

@@ -2,7 +2,7 @@
 
 .modal {
     .modal-content {
-        border-radius: $border-rad;
+        border-radius: var(--radius-s);
         box-shadow: 0 0 10px rgba($black, 0.5);
     }
 

webapp/channels/src/sass/routes/_admin-console.scss

@@ -491,7 +491,7 @@
             height: 34px;
             align-items: center;
             justify-content: center;
-            border-radius: $border-rad;
+            border-radius: var(--radius-s);
             margin: 0 10px 0 0;
             text-decoration: none;
             transition: all 0.15s ease;

webapp/channels/src/sass/utils/_variables.scss

@@ -26,7 +26,6 @@ $announcement-bar-height: 40px;
 $backstage-bar-height: 43px;
 
 // Random variables
-$border-rad: 2px;
 $emoji-per-row: 9; // needs to match variable `EMOJI_PER_ROW` in emoji_picker.jsx
 
 // Transition timing defaults