@gitlab/ui 122.7.0 → 122.9.0

package/src/components/base/modal/modal.scss

@@ -35,20 +35,20 @@ body.modal-open {
   }
 
   .modal-content {
-    @apply gl-rounded-base;
     @apply gl-border-0;
     @apply gl-shadow-lg;
     @apply gl-text-default;
     @apply gl-bg-overlap;
+    border-radius: var(--gl-modal-border-radius);
 
     > :first-child {
-      @apply gl-rounded-tl-base;
-      @apply gl-rounded-tr-base;
+      border-top-left-radius: var(--gl-modal-border-radius);
+      border-top-right-radius: var(--gl-modal-border-radius);
     }
 
     > :last-child {
-      @apply gl-rounded-bl-base;
-      @apply gl-rounded-br-base;
+      border-bottom-left-radius: var(--gl-modal-border-radius);
+      border-bottom-right-radius: var(--gl-modal-border-radius);
     }
   }
 

package/src/components/base/new_dropdowns/dropdown.scss

@@ -11,10 +11,6 @@
     // these create the 45deg cutoff angle at the base of the caret
     border-bottom: 1px solid var(--gl-dropdown-background-color);
     border-right: 1px solid var(--gl-dropdown-background-color);
-
-    // match the dropdown border
-    border-top: 1px solid var(--gl-dropdown-border-color);
-    border-left: 1px solid var(--gl-dropdown-border-color);
     position: absolute;
   }
 
@@ -31,8 +27,7 @@
   .gl-new-dropdown-panel {
     @apply gl-hidden;
     @apply gl-bg-dropdown;
-    @apply gl-border-1 gl-border-solid gl-border-dropdown;
-    @apply gl-rounded-lg;
+    border-radius: var(--gl-dropdown-border-radius);
     @apply gl-drop-shadow-md;
     top: 0;
     left: 0;

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -103,7 +103,7 @@
   .gl-new-dropdown-item-content {
     transition: background-color $gl-transition-duration-fast $gl-easing-out-cubic,
                 box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
-    @apply gl-rounded-base;
+    @apply gl-rounded-default;
     @apply gl-border-0;
     @apply gl-w-full;
     background-color: var(--gl-dropdown-option-background-color-unselected-default);

package/src/components/base/pagination/pagination.scss

@@ -3,10 +3,10 @@
   @apply gl-text-nowrap;
 
   ul {
+    border-radius: var(--gl-action-border-radius);
     @apply gl-flex;
     @apply gl-pl-0;
     @apply gl-list-none;
-    @apply gl-rounded-base;
   }
 
   a {
@@ -15,6 +15,7 @@
 }
 
 .gl-pagination-item {
+  border-radius: var(--gl-action-border-radius);
   transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
               background-color $gl-transition-duration-medium $gl-easing-out-cubic,
               border-color $gl-transition-duration-medium $gl-easing-out-cubic,
@@ -23,7 +24,6 @@
   @apply gl-justify-center;
   @apply gl-p-3;
   @apply gl-leading-normal;
-  @apply gl-rounded-base;
   @apply gl-no-underline;
   @apply gl-min-w-7;
   @apply gl-text-center;

package/src/components/base/path/path.scss

@@ -59,8 +59,8 @@ $path-chevron-right-margin: px-to-rem(14px);
     @apply gl-z-0;
     @apply gl-font-bold;
     @apply gl-leading-normal;
-    @apply gl-rounded-tl-base;
-    @apply gl-rounded-bl-base;
+    @apply gl-rounded-tl-default;
+    @apply gl-rounded-bl-default;
     @apply gl-border-none;
     background-color: var(--gl-action-neutral-background-color-default);
     color: var(--gl-action-neutral-foreground-color-default);

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -270,7 +270,7 @@ export default {
         ref="input"
         v-model="currentValue"
         class="gl-search-box-by-click-input"
-        :class="{ '!gl-rounded-base': !showSearchButton }"
+        :class="{ '!gl-rounded-control': !showSearchButton }"
         v-bind="inputAttributes"
         :disabled="disabled"
         @focus="isFocused = true"

package/src/components/base/tabs/tabs/tabs.scss

@@ -48,7 +48,7 @@
   }
 
   &:focus {
-    border-radius: $gl-border-radius-base;
+    @apply gl-rounded-default;
   }
 
   &.disabled {

package/src/components/base/toast/toast.scss

@@ -23,7 +23,7 @@
   }
 
   .gl-toast {
-    @apply gl-rounded-base;
+    @apply gl-rounded-default;
     @apply gl-text-base;
     @apply gl-py-5;
     @apply gl-px-6;

package/src/components/base/token/token.scss

@@ -1,7 +1,7 @@
 .gl-token {
   color: var(--gl-token-foreground-color);
   background-color: var(--gl-token-background-color);
-  @apply gl-rounded-small;
+  @apply gl-rounded-sm;
   @apply gl-pl-3;
   @apply gl-inline-flex;
   @apply gl-flex-col;

package/src/components/base/tooltip/tooltip.scss

@@ -4,7 +4,7 @@
 
   .tooltip-inner {
     @apply gl-drop-shadow-md;
-    @apply gl-rounded-base;
+    @apply gl-rounded-default;
     @apply gl-leading-normal;
     @apply gl-font-normal;
     @apply gl-py-3;

package/src/components/charts/single_stat/single_stat.scss

@@ -5,7 +5,7 @@
 
   &:hover[tabindex='0'] {
     @apply gl-bg-strong;
-    @apply gl-rounded-base;
+    @apply gl-rounded-default;
   }
 
   .gl-single-stat-number {

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -201,7 +201,7 @@ export default {
 
           <gl-truncate
             v-if="hasTitle"
-            class="gl-font-bold gl-text-default"
+            class="gl-min-w-0 gl-font-bold gl-text-default"
             :text="title"
             with-tooltip
           />
@@ -209,7 +209,7 @@ export default {
           <template v-if="hasTitlePopover">
             <gl-icon
               :id="titlePopoverId"
-              class="gl-ml-2"
+              class="gl-ml-2 gl-min-w-5"
               data-testid="panel-title-popover-icon"
               name="information-o"
               variant="info"

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.vue

@@ -16,7 +16,7 @@ export default {
 <template>
   <div class="row dashboard-cards">
     <div v-for="index in cards" :key="index" class="col-12 col-md-6 col-xl-4 gl-px-3">
-      <div class="gl-rounded-t-base gl-bg-status-neutral gl-py-6"></div>
+      <div class="gl-rounded-t-default gl-bg-status-neutral gl-py-6"></div>
       <div class="dashboard-card-body card-body gl-bg-gray-50">
         <div class="row">
           <div class="col-1 gl-self-center">

package/src/scss/mixins.scss

@@ -151,7 +151,7 @@
     @error "#{$name} is not a valid breakpoint for this @container query.";
   }
   @if $min != 0 {
-    @container #{$containerName} (min-width: #{$min}) {
+    @container #{$containerName} (width >= #{$min}) {
       @if & {
         :where(html.with-gl-container-queries) & {
           @content
@@ -164,7 +164,7 @@
       }
     }
     @if $includeMQFallback {
-      @media (min-width: $min) {
+      @media (width >= $min) {
         @if & {
           :where(html:not(.with-gl-container-queries)) & {
             @content;

package/src/scss/variables.scss

@@ -179,7 +179,6 @@ $gl-border-radius-base: $gl-spacing-scale-2;
 $gl-border-radius-large: $gl-spacing-scale-3;
 $gl-border-radius-6: $gl-spacing-scale-6;
 $gl-border-radius-7: $gl-spacing-scale-7;
-$gl-border-radius-full: 50%;
 
 // component height
 $gl-button-small-size: px-to-rem(24px);

package/src/tokens/build/css/tokens.css

@@ -3,6 +3,7 @@
  */
 
 :root, .gl-light-scope {
+  --gl-border-radius-full: 9999px;
   --gl-color-alpha-0: transparent;
   --gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
   --gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
@@ -542,6 +543,18 @@
   --gl-text-primary: #28272d; /** Use text.color.default instead. */
   --gl-text-secondary: #737278; /** Use text.color.subtle instead. */
   --gl-text-tertiary: #89888d; /** Use text.color.disabled instead. */
+  --gl-border-radius-none: var(--gl-spacing-scale-0);
+  --gl-border-radius-xs: var(--gl-spacing-scale-px);
+  --gl-border-radius-sm: var(--gl-spacing-scale-1);
+  --gl-border-radius-md: var(--gl-spacing-scale-2);
+  --gl-border-radius-lg: var(--gl-spacing-scale-3);
+  --gl-border-radius-xl: var(--gl-spacing-scale-4);
+  --gl-border-radius-2xl: var(--gl-spacing-scale-5);
+  --gl-border-radius-3xl: var(--gl-spacing-scale-6);
+  --gl-border-color-default: var(--gl-color-neutral-100); /** Used for the default border color. */
+  --gl-border-color-subtle: var(--gl-color-neutral-50); /** Used for a subtle border in combination with the default background. */
+  --gl-border-color-strong: var(--gl-color-neutral-200); /** Used for a distinct border that emphasizes an edge or boundaries. */
+  --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
   --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
   --gl-alert-info-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of an info alert. */
@@ -822,10 +835,6 @@
   --gl-background-color-overlap: var(--gl-color-neutral-0); /** Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
   --gl-background-color-section: var(--gl-color-neutral-0); /** Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-background-color-overlay: var(--gl-color-alpha-dark-24); /** Used for an overlay that covers other content. */
-  --gl-border-color-default: var(--gl-color-neutral-100); /** Used for the default border color. */
-  --gl-border-color-subtle: var(--gl-color-neutral-50); /** Used for a subtle border in combination with the default background. */
-  --gl-border-color-strong: var(--gl-color-neutral-200); /** Used for a distinct border that emphasizes an edge or boundaries. */
-  --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
   --gl-control-background-color-default: var(--gl-color-neutral-0); /** Used for form control (input, radio button, checkbox, textarea) default background. */
   --gl-control-background-color-disabled: var(--gl-color-neutral-10); /** Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /** Used for the background of static content that prepends or appends a text input. */
@@ -896,6 +905,8 @@
   --gl-text-color-danger: var(--gl-color-red-600); /** Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
   --gl-text-color-success: var(--gl-color-green-600); /** Used for text indicating success, completion, approval, addition, or validity. */
   --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
+  --gl-border-radius-default: var(--gl-border-radius-md);
+  --gl-border-color-section: var(--gl-border-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
   --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */
   --gl-alert-info-title-color: var(--gl-text-color-heading); /** Used for the title color of an info alert. */
@@ -971,6 +982,7 @@
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /** Used for the datepicker date text color state indicators. */
   --gl-dropdown-background-color: var(--gl-background-color-overlap); /** Used for the background of a dropdown. */
   --gl-dropdown-border-color: var(--gl-border-color-strong); /** Used for the border of a dropdown. */
+  --gl-dropdown-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a dropdown. */
   --gl-dropdown-divider-color: var(--gl-border-color-default); /** Used for the divider of a dropdown. */
   --gl-dropdown-option-text-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the text of a dropdown option in the default state. */
   --gl-dropdown-option-text-color-disabled: var(--gl-action-disabled-foreground-color); /** Used for the text of a dropdown option in the disabled state. */
@@ -1019,7 +1031,6 @@
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /** Used for the background of a strong neutral action in the focus state. */
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /** Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /** Used for the border of a strong neutral action in the hover state. */
-  --gl-border-color-section: var(--gl-border-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
   --gl-control-placeholder-color: var(--gl-text-color-disabled); /** Used for placeholder text within inputs. */
@@ -1032,6 +1043,7 @@
   --gl-icon-color-warning: var(--gl-text-color-warning); /** Used for an icon associated with a warning. */
   --gl-icon-color-danger: var(--gl-text-color-danger); /** Used for an icon associated with an error or danger. */
   --gl-icon-color-success: var(--gl-text-color-success); /** Used for an icon associated with success or validity. */
+  --gl-alert-border-radius: var(--gl-border-radius-default); /** Used for alert border radius. */
   --gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /** Used for the background of a muted badge in the focus state. */
   --gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /** Used for the background of a neutral badge in the focus state. */
   --gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /** Used for the background of an informational badge in the focus state. */
@@ -1039,6 +1051,7 @@
   --gl-badge-warning-background-color-focus: var(--gl-badge-warning-background-color-hover); /** Used for the background of a warning badge in the focus state. */
   --gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-hover); /** Used for the background of a danger badge in the focus state. */
   --gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-hover); /** Used for the background of a tier related badge in the focus state. */
+  --gl-broadcast-banner-border-radius: var(--gl-border-radius-default); /** Used for broadcast banner border radius. */
   --gl-button-default-tertiary-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the foreground of a default borderless, tertiary button in the hover state. */
   --gl-button-default-tertiary-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the foreground of a default borderless, tertiary button in the focus state. */
   --gl-button-default-tertiary-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the foreground of a default borderless, tertiary button in the active state. */
@@ -1062,19 +1075,24 @@
   --gl-button-selected-foreground-color-focus: var(--gl-button-default-primary-foreground-color-focus); /** Used for the foreground of a selected button in the focus state. */
   --gl-button-selected-foreground-color-active: var(--gl-button-default-primary-foreground-color-active); /** Used for the foreground of a selected button in the active state. */
   --gl-button-selected-background-color-focus: var(--gl-button-default-primary-background-color-focus); /** Used for the background of a selected button in the focus state. */
+  --gl-card-border-radius: var(--gl-border-radius-default); /** Used for card border radius. */
   --gl-chart-axis-pointer-color: var(--gl-icon-color-subtle); /** Used in charts for the color of the reference line and axis value under mouse pointer. */
   --gl-chart-zoom-handle-color: var(--gl-icon-color-subtle); /** Used in charts for the handle color when zooming in on a specific area of data. */
   --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the text of a dropdown option in the hover state. */
   --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the text of a dropdown option in the focus state. */
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */
+  --gl-modal-border-radius: var(--gl-border-radius-default); /** Used for modal border radius. */
   --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /** Used for the icon color of an unchecked toggle switch in the focus state. */
   --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
+  --gl-action-border-radius: var(--gl-border-radius-default); /** Used for the border radius of an action. */
   --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */
   --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */
   --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /** Used for the border of a strong confirm action in the focus state. */
   --gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-hover); /** Used for the foreground of a strong neutral action in the focus state. */
   --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */
+  --gl-control-border-radius: var(--gl-border-radius-default); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
+  --gl-button-border-radius: var(--gl-action-border-radius); /** Used for button border radius. */
   --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the focus state. */
   --gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected action in the active state. */
   --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a strong confirm action in the active state. */

package/src/tokens/build/css/tokens.dark.css

@@ -3,6 +3,7 @@
  */
 
 :root.gl-dark, .gl-dark-scope {
+  --gl-border-radius-full: 9999px;
   --gl-color-alpha-0: transparent;
   --gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
   --gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
@@ -542,6 +543,18 @@
   --gl-text-primary: #ececef; /** Use text.color.default instead. */
   --gl-text-secondary: #89888d; /** Use text.color.subtle instead. */
   --gl-text-tertiary: #737278; /** Use text.color.disabled instead. */
+  --gl-border-radius-none: var(--gl-spacing-scale-0);
+  --gl-border-radius-xs: var(--gl-spacing-scale-px);
+  --gl-border-radius-sm: var(--gl-spacing-scale-1);
+  --gl-border-radius-md: var(--gl-spacing-scale-2);
+  --gl-border-radius-lg: var(--gl-spacing-scale-3);
+  --gl-border-radius-xl: var(--gl-spacing-scale-4);
+  --gl-border-radius-2xl: var(--gl-spacing-scale-5);
+  --gl-border-radius-3xl: var(--gl-spacing-scale-6);
+  --gl-border-color-default: var(--gl-color-neutral-700); /** Used for the default border color. */
+  --gl-border-color-subtle: var(--gl-color-neutral-800); /** Used for a subtle border in combination with the default background. */
+  --gl-border-color-strong: var(--gl-color-neutral-600); /** Used for a distinct border that emphasizes an edge or boundaries. */
+  --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
   --gl-alert-info-border-top-color: var(--gl-color-blue-400); /** Used for the border color of an info alert. */
@@ -752,7 +765,7 @@
   --gl-dropdown-option-background-color-selected-default: var(--gl-color-neutral-800); /** Used for the background of a selected dropdown option in the default state. */
   --gl-dropdown-option-background-color-selected-hover: var(--gl-color-neutral-700); /** Used for the background of a selected dropdown option in the hover state. */
   --gl-dropdown-option-background-color-selected-active: var(--gl-color-neutral-900); /** Used for the background of a selected dropdown option in the active state. */
-  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-24); /** Used for the background of a search input in a dropdown listbox. */
+  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-16); /** Used for the background of a search input in a dropdown listbox. */
   --gl-filtered-search-token-type-background-color-default: var(--gl-color-neutral-900); /** Used for the filtered search type token background color in the default state. */
   --gl-filtered-search-token-type-background-color-hover: var(--gl-color-neutral-800); /** Used for the filtered search type token background color in the hover state. */
   --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-800); /** Used for the filtered search data background color in the default state. */
@@ -822,10 +835,6 @@
   --gl-background-color-overlap: var(--gl-color-neutral-900); /** Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
   --gl-background-color-section: var(--gl-color-neutral-800); /** Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-background-color-overlay: rgba(0,0,0,0.64); /** Used for an overlay that covers other content. */
-  --gl-border-color-default: var(--gl-color-neutral-700); /** Used for the default border color. */
-  --gl-border-color-subtle: var(--gl-color-neutral-800); /** Used for a subtle border in combination with the default background. */
-  --gl-border-color-strong: var(--gl-color-neutral-600); /** Used for a distinct border that emphasizes an edge or boundaries. */
-  --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
   --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /** Used for form control (input, radio button, checkbox, textarea) default background. */
   --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /** Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /** Used for the background of static content that prepends or appends a text input. */
@@ -896,6 +905,8 @@
   --gl-text-color-danger: var(--gl-color-red-300); /** Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
   --gl-text-color-success: var(--gl-color-green-300); /** Used for text indicating success, completion, approval, addition, or validity. */
   --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
+  --gl-border-radius-default: var(--gl-border-radius-md);
+  --gl-border-color-section: var(--gl-background-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
   --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */
   --gl-alert-info-title-color: var(--gl-color-blue-300); /** Used for the title color of an info alert. */
@@ -971,6 +982,7 @@
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /** Used for the datepicker date text color state indicators. */
   --gl-dropdown-background-color: var(--gl-background-color-overlap); /** Used for the background of a dropdown. */
   --gl-dropdown-border-color: var(--gl-border-color-default); /** Used for the border of a dropdown. */
+  --gl-dropdown-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a dropdown. */
   --gl-dropdown-divider-color: var(--gl-border-color-subtle); /** Used for the divider of a dropdown. */
   --gl-dropdown-option-text-color-default: var(--gl-action-neutral-foreground-color-default); /** Used for the text of a dropdown option in the default state. */
   --gl-dropdown-option-text-color-disabled: var(--gl-action-disabled-foreground-color); /** Used for the text of a dropdown option in the disabled state. */
@@ -1019,7 +1031,6 @@
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /** Used for the background of a strong neutral action in the focus state. */
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-color-neutral-0); /** Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /** Used for the border of a strong neutral action in the hover state. */
-  --gl-border-color-section: var(--gl-background-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
   --gl-control-placeholder-color: var(--gl-text-color-disabled); /** Used for placeholder text within inputs. */
@@ -1032,6 +1043,7 @@
   --gl-icon-color-warning: var(--gl-text-color-warning); /** Used for an icon associated with a warning. */
   --gl-icon-color-danger: var(--gl-text-color-danger); /** Used for an icon associated with an error or danger. */
   --gl-icon-color-success: var(--gl-text-color-success); /** Used for an icon associated with success or validity. */
+  --gl-alert-border-radius: var(--gl-border-radius-default); /** Used for alert border radius. */
   --gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /** Used for the background of a muted badge in the focus state. */
   --gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /** Used for the background of a neutral badge in the focus state. */
   --gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /** Used for the background of an informational badge in the focus state. */
@@ -1039,6 +1051,7 @@
   --gl-badge-warning-background-color-focus: var(--gl-badge-warning-background-color-hover); /** Used for the background of a warning badge in the focus state. */
   --gl-badge-danger-background-color-focus: var(--gl-badge-danger-background-color-hover); /** Used for the background of a danger badge in the focus state. */
   --gl-badge-tier-background-color-focus: var(--gl-badge-tier-background-color-hover); /** Used for the background of a tier related badge in the focus state. */
+  --gl-broadcast-banner-border-radius: var(--gl-border-radius-default); /** Used for broadcast banner border radius. */
   --gl-button-default-tertiary-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the foreground of a default borderless, tertiary button in the hover state. */
   --gl-button-default-tertiary-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the foreground of a default borderless, tertiary button in the focus state. */
   --gl-button-default-tertiary-foreground-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the foreground of a default borderless, tertiary button in the active state. */
@@ -1062,19 +1075,24 @@
   --gl-button-selected-foreground-color-focus: var(--gl-color-neutral-950); /** Used for the foreground of a selected button in the focus state. */
   --gl-button-selected-foreground-color-active: var(--gl-color-neutral-950); /** Used for the foreground of a selected button in the active state. */
   --gl-button-selected-background-color-focus: var(--gl-color-neutral-200); /** Used for the background of a selected button in the focus state. */
+  --gl-card-border-radius: var(--gl-border-radius-default); /** Used for card border radius. */
   --gl-chart-axis-pointer-color: var(--gl-icon-color-subtle); /** Used in charts for the color of the reference line and axis value under mouse pointer. */
   --gl-chart-zoom-handle-color: var(--gl-icon-color-subtle); /** Used in charts for the handle color when zooming in on a specific area of data. */
   --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /** Used for the text of a dropdown option in the hover state. */
   --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /** Used for the text of a dropdown option in the focus state. */
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */
+  --gl-modal-border-radius: var(--gl-border-radius-default); /** Used for modal border radius. */
   --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /** Used for the icon color of an unchecked toggle switch in the focus state. */
   --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
+  --gl-action-border-radius: var(--gl-border-radius-default); /** Used for the border radius of an action. */
   --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */
   --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */
   --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /** Used for the border of a strong confirm action in the focus state. */
   --gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-hover); /** Used for the foreground of a strong neutral action in the focus state. */
   --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */
+  --gl-control-border-radius: var(--gl-border-radius-default); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
+  --gl-button-border-radius: var(--gl-action-border-radius); /** Used for button border radius. */
   --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the focus state. */
   --gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected action in the active state. */
   --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /** Used for the foreground of a strong confirm action in the active state. */