@gitlab/ui 122.8.0 → 122.9.0

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,7 @@
 
 // Do not edit directly, this file was auto-generated.
 
+$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);
@@ -540,6 +541,18 @@ $gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); // Used for
 $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: $gl-spacing-scale-0;
+$gl-border-radius-xs: $gl-spacing-scale-px;
+$gl-border-radius-sm: $gl-spacing-scale-1;
+$gl-border-radius-md: $gl-spacing-scale-2;
+$gl-border-radius-lg: $gl-spacing-scale-3;
+$gl-border-radius-xl: $gl-spacing-scale-4;
+$gl-border-radius-2xl: $gl-spacing-scale-5;
+$gl-border-radius-3xl: $gl-spacing-scale-6;
+$gl-border-color-default: $gl-color-neutral-700; // Used for the default border color.
+$gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
+$gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
+$gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
 $gl-alert-info-border-top-color: $gl-color-blue-400; // Used for the border color of an info alert.
@@ -820,10 +833,6 @@ $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disa
 $gl-background-color-overlap: $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: $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: $gl-color-neutral-700; // Used for the default border color.
-$gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
-$gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
-$gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
@@ -894,6 +903,8 @@ $gl-text-color-warning: $gl-color-orange-300; // Used for text that requires cau
 $gl-text-color-danger: $gl-color-red-300; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
 $gl-text-color-success: $gl-color-green-300; // Used for text indicating success, completion, approval, addition, or validity.
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
+$gl-border-radius-default: $gl-border-radius-md;
+$gl-border-color-section: $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: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-info-title-color: $gl-color-blue-300; // Used for the title color of an info alert.
@@ -969,6 +980,7 @@ $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-dropdown-border-color: $gl-border-color-default; // Used for the border of a dropdown.
+$gl-dropdown-border-radius: $gl-border-radius-lg; // Used for the border radius of a dropdown.
 $gl-dropdown-divider-color: $gl-border-color-subtle; // Used for the divider of a dropdown.
 $gl-dropdown-option-text-color-default: $gl-action-neutral-foreground-color-default; // Used for the text of a dropdown option in the default state.
 $gl-dropdown-option-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
@@ -1017,7 +1029,6 @@ $gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-c
 $gl-action-strong-neutral-background-color-focus: $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: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
-$gl-border-color-section: $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: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
@@ -1030,6 +1041,7 @@ $gl-icon-color-link: $gl-text-color-link; // Used for an icon within a link.
 $gl-icon-color-warning: $gl-text-color-warning; // Used for an icon associated with a warning.
 $gl-icon-color-danger: $gl-text-color-danger; // Used for an icon associated with an error or danger.
 $gl-icon-color-success: $gl-text-color-success; // Used for an icon associated with success or validity.
+$gl-alert-border-radius: $gl-border-radius-default; // Used for alert border radius.
 $gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
 $gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
 $gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
@@ -1037,6 +1049,7 @@ $gl-badge-success-background-color-focus: $gl-badge-success-background-color-hov
 $gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hover; // Used for the background of a warning badge in the focus state.
 $gl-badge-danger-background-color-focus: $gl-badge-danger-background-color-hover; // Used for the background of a danger badge in the focus state.
 $gl-badge-tier-background-color-focus: $gl-badge-tier-background-color-hover; // Used for the background of a tier related badge in the focus state.
+$gl-broadcast-banner-border-radius: $gl-border-radius-default; // Used for broadcast banner border radius.
 $gl-button-default-tertiary-foreground-color-hover: $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: $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: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default borderless, tertiary button in the active state.
@@ -1060,19 +1073,24 @@ $gl-button-selected-foreground-color-hover: $gl-color-neutral-950; // Used for t
 $gl-button-selected-foreground-color-focus: $gl-color-neutral-950; // Used for the foreground of a selected button in the focus state.
 $gl-button-selected-foreground-color-active: $gl-color-neutral-950; // Used for the foreground of a selected button in the active state.
 $gl-button-selected-background-color-focus: $gl-color-neutral-200; // Used for the background of a selected button in the focus state.
+$gl-card-border-radius: $gl-border-radius-default; // Used for card border radius.
 $gl-chart-axis-pointer-color: $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: $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: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
+$gl-modal-border-radius: $gl-border-radius-default; // Used for modal border radius.
 $gl-toggle-switch-icon-color-unchecked-focus: $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: $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: $gl-border-radius-default; // Used for the border radius of an action.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $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: $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: $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: $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: $gl-action-strong-neutral-border-color-hover; // Used for the border of a strong neutral action in the focus state.
+$gl-control-border-radius: $gl-border-radius-default; // Used for form control (input, radio button, checkbox, textarea) default border radius.
+$gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
 $gl-button-confirm-primary-foreground-color-focus: $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: $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: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,7 @@
 
 // Do not edit directly, this file was auto-generated.
 
+$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);
@@ -540,6 +541,18 @@ $gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); // Used for t
 $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: $gl-spacing-scale-0;
+$gl-border-radius-xs: $gl-spacing-scale-px;
+$gl-border-radius-sm: $gl-spacing-scale-1;
+$gl-border-radius-md: $gl-spacing-scale-2;
+$gl-border-radius-lg: $gl-spacing-scale-3;
+$gl-border-radius-xl: $gl-spacing-scale-4;
+$gl-border-radius-2xl: $gl-spacing-scale-5;
+$gl-border-radius-3xl: $gl-spacing-scale-6;
+$gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
+$gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
+$gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries.
+$gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
 $gl-alert-info-border-top-color: $gl-color-alpha-0; // Used for the border color of an info alert.
@@ -820,10 +833,6 @@ $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disab
 $gl-background-color-overlap: $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: $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: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
-$gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
-$gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
-$gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries.
-$gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
@@ -894,6 +903,8 @@ $gl-text-color-warning: $gl-color-orange-600; // Used for text that requires cau
 $gl-text-color-danger: $gl-color-red-600; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
 $gl-text-color-success: $gl-color-green-600; // Used for text indicating success, completion, approval, addition, or validity.
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
+$gl-border-radius-default: $gl-border-radius-md;
+$gl-border-color-section: $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: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-info-title-color: $gl-text-color-heading; // Used for the title color of an info alert.
@@ -969,6 +980,7 @@ $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-dropdown-border-color: $gl-border-color-strong; // Used for the border of a dropdown.
+$gl-dropdown-border-radius: $gl-border-radius-lg; // Used for the border radius of a dropdown.
 $gl-dropdown-divider-color: $gl-border-color-default; // Used for the divider of a dropdown.
 $gl-dropdown-option-text-color-default: $gl-action-neutral-foreground-color-default; // Used for the text of a dropdown option in the default state.
 $gl-dropdown-option-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
@@ -1017,7 +1029,6 @@ $gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-c
 $gl-action-strong-neutral-background-color-focus: $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: $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: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
-$gl-border-color-section: $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: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
@@ -1030,6 +1041,7 @@ $gl-icon-color-link: $gl-text-color-link; // Used for an icon within a link.
 $gl-icon-color-warning: $gl-text-color-warning; // Used for an icon associated with a warning.
 $gl-icon-color-danger: $gl-text-color-danger; // Used for an icon associated with an error or danger.
 $gl-icon-color-success: $gl-text-color-success; // Used for an icon associated with success or validity.
+$gl-alert-border-radius: $gl-border-radius-default; // Used for alert border radius.
 $gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
 $gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
 $gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
@@ -1037,6 +1049,7 @@ $gl-badge-success-background-color-focus: $gl-badge-success-background-color-hov
 $gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hover; // Used for the background of a warning badge in the focus state.
 $gl-badge-danger-background-color-focus: $gl-badge-danger-background-color-hover; // Used for the background of a danger badge in the focus state.
 $gl-badge-tier-background-color-focus: $gl-badge-tier-background-color-hover; // Used for the background of a tier related badge in the focus state.
+$gl-broadcast-banner-border-radius: $gl-border-radius-default; // Used for broadcast banner border radius.
 $gl-button-default-tertiary-foreground-color-hover: $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: $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: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default borderless, tertiary button in the active state.
@@ -1060,19 +1073,24 @@ $gl-button-selected-foreground-color-hover: $gl-button-default-primary-foregroun
 $gl-button-selected-foreground-color-focus: $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: $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: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
+$gl-card-border-radius: $gl-border-radius-default; // Used for card border radius.
 $gl-chart-axis-pointer-color: $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: $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: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
+$gl-modal-border-radius: $gl-border-radius-default; // Used for modal border radius.
 $gl-toggle-switch-icon-color-unchecked-focus: $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: $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: $gl-border-radius-default; // Used for the border radius of an action.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $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: $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: $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: $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: $gl-action-strong-neutral-border-color-hover; // Used for the border of a strong neutral action in the focus state.
+$gl-control-border-radius: $gl-border-radius-default; // Used for form control (input, radio button, checkbox, textarea) default border radius.
+$gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
 $gl-button-confirm-primary-foreground-color-focus: $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: $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: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -2,6 +2,21 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+$gl-border-radius-none: var(--gl-border-radius-none);
+$gl-border-radius-xs: var(--gl-border-radius-xs);
+$gl-border-radius-sm: var(--gl-border-radius-sm);
+$gl-border-radius-md: var(--gl-border-radius-md);
+$gl-border-radius-lg: var(--gl-border-radius-lg);
+$gl-border-radius-xl: var(--gl-border-radius-xl);
+$gl-border-radius-2xl: var(--gl-border-radius-2xl);
+$gl-border-radius-3xl: var(--gl-border-radius-3xl);
+$gl-border-radius-full: var(--gl-border-radius-full);
+$gl-border-radius-default: var(--gl-border-radius-default);
+$gl-border-color-default: var(--gl-border-color-default);
+$gl-border-color-subtle: var(--gl-border-color-subtle);
+$gl-border-color-strong: var(--gl-border-color-strong);
+$gl-border-color-section: var(--gl-border-color-section);
+$gl-border-color-transparent: var(--gl-border-color-transparent);
 $gl-color-alpha-0: var(--gl-color-alpha-0);
 $gl-color-alpha-dark-2: var(--gl-color-alpha-dark-2);
 $gl-color-alpha-dark-4: var(--gl-color-alpha-dark-4);
@@ -270,6 +285,7 @@ $gl-spacing-scale-88: var(--gl-spacing-scale-88);
 $gl-spacing-scale-px: var(--gl-spacing-scale-px);
 $gl-spacing-scale-2-5: var(--gl-spacing-scale-2-5);
 $gl-spacing-scale-11-5: var(--gl-spacing-scale-11-5);
+$gl-alert-border-radius: var(--gl-alert-border-radius);
 $gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
 $gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);
 $gl-alert-neutral-border-top-color: var(--gl-alert-neutral-border-top-color);
@@ -440,6 +456,7 @@ $gl-broadcast-banner-border-color-lightgreen: var(--gl-broadcast-banner-border-c
 $gl-broadcast-banner-border-color-lightindigo: var(--gl-broadcast-banner-border-color-lightindigo);
 $gl-broadcast-banner-border-color-lightred: var(--gl-broadcast-banner-border-color-lightred);
 $gl-broadcast-banner-border-color-red: var(--gl-broadcast-banner-border-color-red);
+$gl-broadcast-banner-border-radius: var(--gl-broadcast-banner-border-radius);
 $gl-broadcast-banner-icon-color-blue: var(--gl-broadcast-banner-icon-color-blue);
 $gl-broadcast-banner-icon-color-dark: var(--gl-broadcast-banner-icon-color-dark);
 $gl-broadcast-banner-icon-color-green: var(--gl-broadcast-banner-icon-color-green);
@@ -460,6 +477,7 @@ $gl-broadcast-banner-text-color-lightgreen: var(--gl-broadcast-banner-text-color
 $gl-broadcast-banner-text-color-lightindigo: var(--gl-broadcast-banner-text-color-lightindigo);
 $gl-broadcast-banner-text-color-lightred: var(--gl-broadcast-banner-text-color-lightred);
 $gl-broadcast-banner-text-color-red: var(--gl-broadcast-banner-text-color-red);
+$gl-button-border-radius: var(--gl-button-border-radius);
 $gl-button-default-primary-foreground-color-default: var(--gl-button-default-primary-foreground-color-default);
 $gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-hover);
 $gl-button-default-primary-foreground-color-focus: var(--gl-button-default-primary-foreground-color-focus);
@@ -579,6 +597,7 @@ $gl-button-selected-border-color-active: var(--gl-button-selected-border-color-a
 $gl-button-disabled-foreground-color: var(--gl-button-disabled-foreground-color);
 $gl-button-disabled-background-color: var(--gl-button-disabled-background-color);
 $gl-button-disabled-border-color: var(--gl-button-disabled-border-color);
+$gl-card-border-radius: var(--gl-card-border-radius);
 $gl-chart-axis-pointer-color: var(--gl-chart-axis-pointer-color);
 $gl-chart-axis-line-color: var(--gl-chart-axis-line-color);
 $gl-chart-axis-text-color: var(--gl-chart-axis-text-color);
@@ -590,6 +609,7 @@ $gl-datepicker-background-color: var(--gl-datepicker-background-color);
 $gl-datepicker-date-text-color-selected: var(--gl-datepicker-date-text-color-selected);
 $gl-dropdown-background-color: var(--gl-dropdown-background-color);
 $gl-dropdown-border-color: var(--gl-dropdown-border-color);
+$gl-dropdown-border-radius: var(--gl-dropdown-border-radius);
 $gl-dropdown-divider-color: var(--gl-dropdown-divider-color);
 $gl-dropdown-option-text-color-default: var(--gl-dropdown-option-text-color-default);
 $gl-dropdown-option-text-color-hover: var(--gl-dropdown-option-text-color-hover);
@@ -663,6 +683,7 @@ $gl-link-mention-text-color-default: var(--gl-link-mention-text-color-default);
 $gl-link-mention-text-color-current: var(--gl-link-mention-text-color-current);
 $gl-link-mention-background-color-default: var(--gl-link-mention-background-color-default);
 $gl-link-mention-background-color-current: var(--gl-link-mention-background-color-current);
+$gl-modal-border-radius: var(--gl-modal-border-radius);
 $gl-progress-bar-indicator-color-default: var(--gl-progress-bar-indicator-color-default);
 $gl-progress-bar-indicator-color-success: var(--gl-progress-bar-indicator-color-success);
 $gl-progress-bar-indicator-color-warning: var(--gl-progress-bar-indicator-color-warning);
@@ -909,6 +930,7 @@ $t-white-a-02: var(--t-white-a-02);
 $t-white-a-04: var(--t-white-a-04);
 $t-white-a-06: var(--t-white-a-06);
 $t-white-a-08: var(--t-white-a-08);
+$gl-action-border-radius: var(--gl-action-border-radius);
 $gl-action-disabled-foreground-color: var(--gl-action-disabled-foreground-color);
 $gl-action-disabled-background-color: var(--gl-action-disabled-background-color);
 $gl-action-disabled-border-color: var(--gl-action-disabled-border-color);
@@ -991,11 +1013,6 @@ $gl-background-color-disabled: var(--gl-background-color-disabled);
 $gl-background-color-overlap: var(--gl-background-color-overlap);
 $gl-background-color-section: var(--gl-background-color-section);
 $gl-background-color-overlay: var(--gl-background-color-overlay);
-$gl-border-color-default: var(--gl-border-color-default);
-$gl-border-color-subtle: var(--gl-border-color-subtle);
-$gl-border-color-strong: var(--gl-border-color-strong);
-$gl-border-color-section: var(--gl-border-color-section);
-$gl-border-color-transparent: var(--gl-border-color-transparent);
 $gl-control-background-color-default: var(--gl-control-background-color-default);
 $gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
 $gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);
@@ -1011,6 +1028,7 @@ $gl-control-border-color-error: var(--gl-control-border-color-error);
 $gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
 $gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
 $gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
+$gl-control-border-radius: var(--gl-control-border-radius);
 $gl-control-text-color-error: var(--gl-control-text-color-error);
 $gl-control-text-color-valid: var(--gl-control-text-color-valid);
 $gl-control-placeholder-color: var(--gl-control-placeholder-color);

package/dist/tokens/tailwind/tokens.cjs

@@ -21,6 +21,7 @@
   const feedbackTextColors = {"feedback-strong":"var(--gl-feedback-strong-text-color, var(--gl-color-neutral-0, #fff))","feedback-neutral":"var(--gl-feedback-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))","feedback-info":"var(--gl-feedback-info-text-color, var(--gl-color-blue-700, #2f5ca0))","feedback-success":"var(--gl-feedback-success-text-color, var(--gl-color-green-700, #306440))","feedback-warning":"var(--gl-feedback-warning-text-color, var(--gl-color-orange-700, #894b16))","feedback-danger":"var(--gl-feedback-danger-text-color, var(--gl-color-red-700, #a32c12))"};
   const feedbackIconColors = {"feedback-strong":"var(--gl-feedback-strong-icon-color, var(--gl-color-neutral-0, #fff))","feedback-neutral":"var(--gl-feedback-neutral-icon-color, var(--gl-color-neutral-600, #626168))","feedback-info":"var(--gl-feedback-info-icon-color, var(--gl-color-blue-600, #2f68b4))","feedback-success":"var(--gl-feedback-success-icon-color, var(--gl-color-green-600, #2f7549))","feedback-warning":"var(--gl-feedback-warning-icon-color, var(--gl-color-orange-600, #995715))","feedback-danger":"var(--gl-feedback-danger-icon-color, var(--gl-color-red-600, #c02f12))"};
   const spacingScale = {"0":"var(--gl-spacing-scale-0, 0)","1":"var(--gl-spacing-scale-1, 0.125rem)","2":"var(--gl-spacing-scale-2, 0.25rem)","3":"var(--gl-spacing-scale-3, 0.5rem)","4":"var(--gl-spacing-scale-4, 0.75rem)","5":"var(--gl-spacing-scale-5, 1rem)","6":"var(--gl-spacing-scale-6, 1.5rem)","7":"var(--gl-spacing-scale-7, 2rem)","8":"var(--gl-spacing-scale-8, 2.5rem)","9":"var(--gl-spacing-scale-9, 3rem)","10":"var(--gl-spacing-scale-10, 3.5rem)","11":"var(--gl-spacing-scale-11, 4rem)","12":"var(--gl-spacing-scale-12, 5rem)","13":"var(--gl-spacing-scale-13, 6rem)","15":"var(--gl-spacing-scale-15, 7.5rem)","18":"var(--gl-spacing-scale-18, 9rem)","20":"var(--gl-spacing-scale-20, 10rem)","26":"var(--gl-spacing-scale-26, 13rem)","28":"var(--gl-spacing-scale-28, 14rem)","30":"var(--gl-spacing-scale-30, 15rem)","31":"var(--gl-spacing-scale-31, 15.5rem)","33":"var(--gl-spacing-scale-33, 16.5rem)","34":"var(--gl-spacing-scale-34, 17rem)","37":"var(--gl-spacing-scale-37, 18.5rem)","48":"var(--gl-spacing-scale-48, 24rem)","62":"var(--gl-spacing-scale-62, 31rem)","75":"var(--gl-spacing-scale-75, 37.5rem)","80":"var(--gl-spacing-scale-80, 40rem)","88":"var(--gl-spacing-scale-88, 44rem)","px":"var(--gl-spacing-scale-px, 1px)","2-5":"var(--gl-spacing-scale-2-5, 0.375rem)","11-5":"var(--gl-spacing-scale-11-5, 4.5rem)"};
+  const borderRadius = {"none":"var(--gl-border-radius-none, var(--gl-spacing-scale-0, 0))","xs":"var(--gl-border-radius-xs, var(--gl-spacing-scale-px, 1px))","sm":"var(--gl-border-radius-sm, var(--gl-spacing-scale-1, 0.125rem))","md":"var(--gl-border-radius-md, var(--gl-spacing-scale-2, 0.25rem))","lg":"var(--gl-border-radius-lg, var(--gl-spacing-scale-3, 0.5rem))","xl":"var(--gl-border-radius-xl, var(--gl-spacing-scale-4, 0.75rem))","2xl":"var(--gl-border-radius-2xl, var(--gl-spacing-scale-5, 1rem))","3xl":"var(--gl-border-radius-3xl, var(--gl-spacing-scale-6, 1.5rem))","full":"var(--gl-border-radius-full, 9999px)","default":"var(--gl-border-radius-default, var(--gl-border-radius-md, 0.25rem))","control":"var(--gl-control-border-radius, var(--gl-border-radius-default, 0.25rem))"};
 
   const colors = {
     inherit: 'inherit',
@@ -101,5 +102,6 @@
     textColor,
     fill,
     spacing: spacingScale,
+    borderRadius,
   }
   

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "122.8.0",
+  "version": "122.9.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/alert/alert.scss

@@ -41,8 +41,8 @@ $gl-alert-top-border-size: 2px;
   @apply gl-text-base;
   position: relative;
   padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
+  border-radius: var(--gl-alert-border-radius);
   @apply gl-py-5;
-  @apply gl-rounded-base;
 
   @media (forced-colors: active) {
     border: 1px solid transparent;

package/src/components/base/avatar/avatar.scss

@@ -36,21 +36,21 @@ $gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
   @apply gl-w-5;
   @apply gl-h-5;
   font-size: map.get($gl-font-sizes, 100);
-  @apply gl-rounded-small;
+  @apply gl-rounded-sm;
 }
 
 @mixin gl-avatar-s24 {
   @apply gl-w-6;
   @apply gl-h-6;
   font-size: map.get($gl-font-sizes, 400);
-  @apply gl-rounded-base;
+  @apply gl-rounded-md;
 }
 
 @mixin gl-avatar-s32 {
   @apply gl-w-7;
   @apply gl-h-7;
   font-size: map.get($gl-font-sizes, 500);
-  @apply gl-rounded-base;
+  @apply gl-rounded-md;
 }
 
 @mixin gl-avatar-s48 {

package/src/components/base/avatars_inline/avatars_inline.scss

@@ -59,6 +59,6 @@
 
   &.lg {
     @apply gl-text-base;
-    @apply gl-rounded-6;
+    @apply gl-rounded-3xl;
   }
 }

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -28,7 +28,7 @@ $breadcrumb-max-width: $grid-size * 16;
 
   > a {
     @apply gl-inline-block;
-    border-radius: $gl-border-radius-base;
+    @apply gl-rounded-default;
     @apply gl-text-subtle;
     text-decoration-thickness: auto;
     text-decoration-style: solid;

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -235,7 +235,7 @@ export default {
           :src="item.avatarPath"
           :size="avatarSize"
           aria-hidden="true"
-          class="gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-base"
+          class="gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default"
           shape="rect"
           data-testid="avatar"
         /><span class="gl-align-middle">{{ item.text }}</span>

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -99,11 +99,11 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
   }
 
   &.notification {
-    @apply gl-rounded-base;
     @apply gl-border;
     @apply gl-shadow-md;
     @apply gl-bg-overlap;
     @apply gl-text-default;
+    border-radius: var(--gl-broadcast-banner-border-radius);
     max-width: $gl-broadcast-message-notification-max-width;
   }
 

package/src/components/base/button/button.scss

@@ -64,7 +64,7 @@
 }
 
 .gl-button.gl-button {
-  @apply gl-rounded-base;
+  border-radius: var(--gl-button-border-radius);
   @apply gl-px-4;
   background-color: var(--gl-button-default-primary-background-color-default);
   @apply gl-leading-normal;

package/src/components/base/card/card.scss

@@ -1,12 +1,12 @@
 .gl-card {
   @apply gl-bg-subtle;
   @apply gl-border-solid;
-  @apply gl-rounded-base;
   @apply gl-flex;
   @apply gl-flex-col;
   @apply gl-break-words;
   @apply gl-relative;
   @apply gl-text-base;
+  border-radius: var(--gl-card-border-radius);
 }
 
 .gl-card,
@@ -25,15 +25,15 @@
 
 .gl-card-header {
   @apply gl-border-b-solid;
-  border-top-left-radius: calc($gl-border-radius-base - $gl-border-size-1);
-  border-top-right-radius: calc($gl-border-radius-base - $gl-border-size-1);
+  border-top-left-radius: calc(var(--gl-card-border-radius) - $gl-border-size-1);
+  border-top-right-radius: calc(var(--gl-card-border-radius) - $gl-border-size-1);
   @apply gl-text-heading;
 }
 
 .gl-card-footer {
   @apply gl-border-t-solid;
-  border-bottom-left-radius: calc($gl-border-radius-base - $gl-border-size-1);
-  border-bottom-right-radius: calc($gl-border-radius-base - $gl-border-size-1);
+  border-bottom-left-radius: calc(var(--gl-card-border-radius) - $gl-border-size-1);
+  border-bottom-right-radius: calc(var(--gl-card-border-radius) - $gl-border-size-1);
 }
 
 .gl-card-header,

package/src/components/base/datepicker/datepicker.scss

@@ -39,8 +39,8 @@ $pd-week-color: var(--gl-text-color-subtle);
 .gl-datepicker-theme {
   @apply gl-font-regular;
   @apply gl-border-none;
-  @apply gl-rounded-base;
   @apply gl-mt-3;
+  border-radius: var(--gl-dropdown-border-radius);
   background-color: var(--gl-datepicker-background-color);
 
   &.is-bound {
@@ -56,7 +56,7 @@ $pd-week-color: var(--gl-text-color-subtle);
     @apply gl-pt-5;
     @apply gl-px-3;
     @apply gl-pb-3;
-    @apply gl-rounded-base;
+    @apply gl-rounded-default;
   }
 
   .pika-title {
@@ -187,7 +187,7 @@ $pd-week-color: var(--gl-text-color-subtle);
   }
 
   .pika-button {
-    @apply gl-rounded-base;
+    border-radius: var(--gl-action-border-radius);
     @apply gl-shadow-none;
     @apply gl-py-3;
     @apply gl-text-center;

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

@@ -1,12 +1,12 @@
 .gl-dropdown {
   .dropdown-menu {
     @apply gl-border-1 gl-border-dropdown;
-    @apply gl-rounded-base;
     @apply gl-bg-dropdown;
     @apply gl-mt-2;
     @apply gl-mb-2;
     @apply gl-p-0;
     @apply gl-shadow-x0-y2-b4-s0;
+    border-radius: var(--gl-dropdown-border-radius);
     width: $gl-dropdown-width;
 
     .gl-search-box-by-type {

package/src/components/base/filtered_search/filtered_search.scss

@@ -8,7 +8,7 @@
   @apply gl-pl-4;
   @apply gl-pr-7;
   @apply gl-border-none;
-  @apply gl-rounded-base;
+  @apply gl-rounded-default;
   box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-default);
   background-color: var(--gl-control-background-color-default);
 

package/src/components/base/filtered_search/filtered_search_suggestion_list.scss

@@ -19,7 +19,7 @@
   .gl-filtered-search-suggestion,
   .gl-filtered-search-suggestion > a,
   .gl-filtered-search-suggestion > button {
-    border-radius: $gl-border-radius-base !important;
+    @apply gl-rounded-default #{!important};
   }
 
   .gl-dropdown-divider {

package/src/components/base/form/form_input/form_input.scss

@@ -3,6 +3,7 @@
   appearance: none;
   box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-default);
   background: var(--gl-control-background-color-default);
+  @apply gl-rounded-control;
   @apply gl-font-regular;
   @apply gl-text-base;
   @apply gl-leading-normal;

package/src/components/base/form/form_select/form_select.scss

@@ -19,6 +19,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @apply gl-truncate;
   @apply gl-bg-no-repeat;
   @apply gl-border-none;
+  @apply gl-rounded-control;
   appearance: none;
   background-color: var(--gl-control-background-color-default);
   background-image: none;

package/src/components/base/form/input_group_text/input_group_text.scss

@@ -1,7 +1,8 @@
 .input-group-text {
-    background-color: var(--gl-control-background-color-concatenation);
-    border-color: var(--gl-control-border-color-default);
-    @apply gl-text-default;
-    @apply gl-text-base;
-    @apply gl-leading-normal;
+  background-color: var(--gl-control-background-color-concatenation);
+  border-color: var(--gl-control-border-color-default);
+  @apply gl-text-default;
+  @apply gl-text-base;
+  @apply gl-leading-normal;
+  @apply gl-rounded-control;
 }

package/src/components/base/keyset_pagination/keyset_pagination.scss

@@ -3,6 +3,6 @@
   // for the reasoning behind the double .gl-button.gl-button
   .gl-button.gl-button {
     @apply gl-px-3;
-    @apply gl-rounded-base;
+    border-radius: var(--gl-action-border-radius);
   }
 }

package/src/components/base/link/link.scss

@@ -51,7 +51,7 @@
 .gl-link-mention,
 .gl-link-mention-current {
   @apply gl-px-1;
-  @apply gl-rounded-base;
+  @apply gl-rounded-default;
   @apply gl-no-underline;
 
   &:hover {

package/src/components/base/markdown/markdown.scss

@@ -81,7 +81,7 @@
   }
 
   .idiff {
-    @apply gl-rounded-base;
+    @apply gl-rounded-default;
     @apply gl-inline-flex;
     @apply gl-px-2;
   }
@@ -95,7 +95,7 @@
   }
 
   code {
-    @apply gl-rounded-base;
+    @apply gl-rounded-default;
     @apply gl-bg-strong;
     @apply gl-text-strong;
     @apply gl-px-2;
@@ -103,7 +103,7 @@
   }
 
   pre {
-    @apply gl-rounded-base;
+    @apply gl-rounded-default;
     @apply gl-py-3;
     @apply gl-px-4;
     box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-border-color-default);