@gitlab/ui 123.5.0 → 123.6.0

package/dist/tokens/json/tokens.json

@@ -7880,7 +7880,7 @@
     "border": {
       "radius": {
         "key": "{alert.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for alert border radius.",
         "$extensions": {
@@ -7891,7 +7891,7 @@
         "filePath": "src/tokens/contextual/alert.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for alert border radius.",
           "$extensions": {
@@ -35071,6 +35071,39 @@
     }
   },
   "feedback": {
+    "border": {
+      "radius": {
+        "key": "{feedback.border.radius}",
+        "$value": "0.5rem",
+        "$type": "dimension",
+        "$description": "Used for the border radius of a feedback element.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "filePath": "src/tokens/semantic/feedback.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{border.radius.lg}",
+          "$type": "dimension",
+          "$description": "Used for the border radius of a feedback element.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          },
+          "key": "{feedback.border.radius}"
+        },
+        "name": "FEEDBACK_BORDER_RADIUS",
+        "attributes": {},
+        "path": [
+          "feedback",
+          "border",
+          "radius"
+        ]
+      }
+    },
     "strong": {
       "background": {
         "color": {

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

@@ -927,6 +927,7 @@ $gl-border-color-section: $gl-background-color-default; // Used for the border c
 $gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
 $gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
 $gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
+$gl-alert-border-radius: $gl-border-radius-lg; // Used for alert border radius.
 $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.
@@ -1054,6 +1055,7 @@ $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-c
 $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.
+$gl-feedback-border-radius: $gl-border-radius-lg; // Used for the border radius of a feedback element.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.
 $gl-icon-color-subtle: $gl-text-color-subtle; // Used for a static or decorational icon. Can be paired with subtle text.
@@ -1063,7 +1065,6 @@ $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.

package/dist/tokens/scss/_tokens.scss

@@ -927,6 +927,7 @@ $gl-border-color-section: $gl-border-color-default; // Used for the border color
 $gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
 $gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
 $gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
+$gl-alert-border-radius: $gl-border-radius-lg; // Used for alert border radius.
 $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.
@@ -1054,6 +1055,7 @@ $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-c
 $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.
+$gl-feedback-border-radius: $gl-border-radius-lg; // Used for the border radius of a feedback element.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.
 $gl-icon-color-subtle: $gl-text-color-subtle; // Used for a static or decorational icon. Can be paired with subtle text.
@@ -1063,7 +1065,6 @@ $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.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -1057,6 +1057,7 @@ $gl-control-text-color-valid: var(--gl-control-text-color-valid);
 $gl-control-placeholder-color: var(--gl-control-placeholder-color);
 $gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
 $gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
+$gl-feedback-border-radius: var(--gl-feedback-border-radius);
 $gl-feedback-strong-background-color: var(--gl-feedback-strong-background-color);
 $gl-feedback-strong-text-color: var(--gl-feedback-strong-text-color);
 $gl-feedback-strong-icon-color: var(--gl-feedback-strong-icon-color);

package/dist/tokens/tailwind/tokens.cjs

@@ -21,7 +21,7 @@
   const feedbackTextColors = {"feedback-strong":"var(--gl-feedback-strong-text-color)","feedback-neutral":"var(--gl-feedback-neutral-text-color)","feedback-info":"var(--gl-feedback-info-text-color)","feedback-success":"var(--gl-feedback-success-text-color)","feedback-warning":"var(--gl-feedback-warning-text-color)","feedback-danger":"var(--gl-feedback-danger-text-color)"};
   const feedbackIconColors = {"feedback-strong":"var(--gl-feedback-strong-icon-color)","feedback-neutral":"var(--gl-feedback-neutral-icon-color)","feedback-info":"var(--gl-feedback-info-icon-color)","feedback-success":"var(--gl-feedback-success-icon-color)","feedback-warning":"var(--gl-feedback-warning-icon-color)","feedback-danger":"var(--gl-feedback-danger-icon-color)"};
   const spacingScale = {"0":"var(--gl-spacing-scale-0)","1":"var(--gl-spacing-scale-1)","2":"var(--gl-spacing-scale-2)","3":"var(--gl-spacing-scale-3)","4":"var(--gl-spacing-scale-4)","5":"var(--gl-spacing-scale-5)","6":"var(--gl-spacing-scale-6)","7":"var(--gl-spacing-scale-7)","8":"var(--gl-spacing-scale-8)","9":"var(--gl-spacing-scale-9)","10":"var(--gl-spacing-scale-10)","11":"var(--gl-spacing-scale-11)","12":"var(--gl-spacing-scale-12)","13":"var(--gl-spacing-scale-13)","15":"var(--gl-spacing-scale-15)","18":"var(--gl-spacing-scale-18)","20":"var(--gl-spacing-scale-20)","26":"var(--gl-spacing-scale-26)","28":"var(--gl-spacing-scale-28)","30":"var(--gl-spacing-scale-30)","31":"var(--gl-spacing-scale-31)","33":"var(--gl-spacing-scale-33)","34":"var(--gl-spacing-scale-34)","37":"var(--gl-spacing-scale-37)","48":"var(--gl-spacing-scale-48)","62":"var(--gl-spacing-scale-62)","75":"var(--gl-spacing-scale-75)","80":"var(--gl-spacing-scale-80)","88":"var(--gl-spacing-scale-88)","px":"var(--gl-spacing-scale-px)","2-5":"var(--gl-spacing-scale-2-5)","11-5":"var(--gl-spacing-scale-11-5)"};
-  const borderRadius = {"none":"var(--gl-border-radius-none)","xs":"var(--gl-border-radius-xs)","sm":"var(--gl-border-radius-sm)","md":"var(--gl-border-radius-md)","lg":"var(--gl-border-radius-lg)","xl":"var(--gl-border-radius-xl)","2xl":"var(--gl-border-radius-2xl)","3xl":"var(--gl-border-radius-3xl)","full":"var(--gl-border-radius-full)","default":"var(--gl-border-radius-default)","control":"var(--gl-control-border-radius)"};
+  const borderRadius = {"none":"var(--gl-border-radius-none)","xs":"var(--gl-border-radius-xs)","sm":"var(--gl-border-radius-sm)","md":"var(--gl-border-radius-md)","lg":"var(--gl-border-radius-lg)","xl":"var(--gl-border-radius-xl)","2xl":"var(--gl-border-radius-2xl)","3xl":"var(--gl-border-radius-3xl)","full":"var(--gl-border-radius-full)","default":"var(--gl-border-radius-default)","control":"var(--gl-control-border-radius)","feedback":"var(--gl-feedback-border-radius)"};
   const opacity = {"0":"var(--gl-opacity-0)","1":"var(--gl-opacity-1)","2":"var(--gl-opacity-2)","3":"var(--gl-opacity-3)","4":"var(--gl-opacity-4)","5":"var(--gl-opacity-5)","6":"var(--gl-opacity-6)","7":"var(--gl-opacity-7)","8":"var(--gl-opacity-8)","9":"var(--gl-opacity-9)","10":"var(--gl-opacity-10)"};
   const zindexes = {"0":"var(--gl-zindex-0)","1":"var(--gl-zindex-1)","2":"var(--gl-zindex-2)","3":"var(--gl-zindex-3)","4":"var(--gl-zindex-4)","200":"var(--gl-zindex-200)","9999":"var(--gl-zindex-9999)"};
   const boxShadow = {"sm":"var(--gl-shadow-sm)","md":"var(--gl-shadow-md)","lg":"var(--gl-shadow-lg)"};

package/package.json

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

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

@@ -38,11 +38,11 @@ $gl-alert-top-border-size: 2px;
 }
 
 .gl-alert {
+  @apply gl-py-5;
   @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;
+  padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
+  position: relative;
 
   @media (forced-colors: active) {
     border: 1px solid transparent;

package/src/components/base/banner/banner.scss

@@ -1,4 +1,5 @@
 .gl-banner {
+  @apply gl-rounded-feedback;
   background-color: var(--gl-banner-promo-background-color);
   border-color: var(--gl-banner-promo-border-color);
 }

package/src/components/base/popover/popover.scss

@@ -4,14 +4,11 @@ $gl-popover-max-width: $grid-size * 35;
 
 .gl-popover {
   max-width: $gl-popover-max-width;
+  @apply gl-bg-overlap;
   @apply gl-border-none;
   @apply gl-drop-shadow-md;
   @apply gl-text-sm;
-
-  &,
-  .popover-header {
-    @apply gl-bg-overlap;
-  }
+  @apply gl-rounded-feedback;
 
   .popover-body {
     @apply gl-text-default;

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

@@ -23,7 +23,6 @@
   }
 
   .gl-toast {
-    @apply gl-rounded-default;
     @apply gl-text-base;
     @apply gl-py-5;
     @apply gl-px-6;
@@ -32,6 +31,7 @@
     @apply gl-items-center;
     @apply gl-justify-between;
     @apply gl-shadow-md;
+    @apply gl-rounded-feedback;
     background-color: var(--gl-feedback-strong-background-color);
     color: var(--gl-feedback-strong-text-color);
   }

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

@@ -4,11 +4,11 @@
 
   .tooltip-inner {
     @apply gl-drop-shadow-md;
-    @apply gl-rounded-default;
     @apply gl-leading-normal;
     @apply gl-font-normal;
     @apply gl-py-3;
     @apply gl-px-4;
+    @apply gl-rounded-feedback;
     background: var(--gl-feedback-strong-background-color);
     color: var(--gl-feedback-strong-text-color);
   }

package/src/scss/variables.scss

@@ -300,10 +300,8 @@ $gl-form-input-sizes: (
   xl: $grid-size * 70,
 );
 
-$popover-bg: $gl-background-color-default !default;
 $popover-arrow-width: 0.5rem;
 $popover-arrow-height: 0.25rem;
-$popover-arrow-color: $popover-bg;
 $popover-arrow-outer-color: $gl-border-color-default;
 
 $tooltip-opacity: 1;

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

@@ -929,6 +929,7 @@
   --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
   --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
   --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
+  --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */
   --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. */
@@ -1056,6 +1057,7 @@
   --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. */
+  --gl-feedback-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a feedback element. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /** Used for the inner neutral portion of the focus ring. */
   --gl-icon-color-default: var(--gl-text-color-default); /** Used for the default icon color. Can be paired with default text. */
   --gl-icon-color-subtle: var(--gl-text-color-subtle); /** Used for a static or decorational icon. Can be paired with subtle text. */
@@ -1065,7 +1067,6 @@
   --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. */

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

@@ -929,6 +929,7 @@
   --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
   --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
   --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
+  --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */
   --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. */
@@ -1056,6 +1057,7 @@
   --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. */
+  --gl-feedback-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a feedback element. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /** Used for the inner neutral portion of the focus ring. */
   --gl-icon-color-default: var(--gl-text-color-default); /** Used for the default icon color. Can be paired with default text. */
   --gl-icon-color-subtle: var(--gl-text-color-subtle); /** Used for a static or decorational icon. Can be paired with subtle text. */
@@ -1065,7 +1067,6 @@
   --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. */

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -44057,6 +44057,38 @@
         "radius"
       ],
       "cssWithValue": "var(--gl-control-border-radius)"
+    },
+    "feedback": {
+      "key": "{feedback.border.radius}",
+      "$value": "0.5rem",
+      "$type": "dimension",
+      "$description": "Used for the border radius of a feedback element.",
+      "$extensions": {
+        "com.figma.scope": [
+          "CORNER_RADIUS"
+        ]
+      },
+      "filePath": "src/tokens/semantic/feedback.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "{border.radius.lg}",
+        "$type": "dimension",
+        "$description": "Used for the border radius of a feedback element.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "key": "{feedback.border.radius}"
+      },
+      "name": "FEEDBACK_BORDER_RADIUS",
+      "attributes": {},
+      "path": [
+        "feedback",
+        "border",
+        "radius"
+      ],
+      "cssWithValue": "var(--gl-feedback-border-radius)"
     }
   },
   "opacity": {

package/src/tokens/build/docs/tokens-tailwind-docs.json

@@ -44057,6 +44057,38 @@
         "radius"
       ],
       "cssWithValue": "var(--gl-control-border-radius)"
+    },
+    "feedback": {
+      "key": "{feedback.border.radius}",
+      "$value": "0.5rem",
+      "$type": "dimension",
+      "$description": "Used for the border radius of a feedback element.",
+      "$extensions": {
+        "com.figma.scope": [
+          "CORNER_RADIUS"
+        ]
+      },
+      "filePath": "src/tokens/semantic/feedback.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "{border.radius.lg}",
+        "$type": "dimension",
+        "$description": "Used for the border radius of a feedback element.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "key": "{feedback.border.radius}"
+      },
+      "name": "FEEDBACK_BORDER_RADIUS",
+      "attributes": {},
+      "path": [
+        "feedback",
+        "border",
+        "radius"
+      ],
+      "cssWithValue": "var(--gl-feedback-border-radius)"
     }
   },
   "opacity": {

package/src/tokens/build/figma/contextual.tokens.json

@@ -2,7 +2,7 @@
   "alert": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for alert border radius.",
         "$extensions": {

package/src/tokens/build/figma/semantic.tokens.json

@@ -1484,6 +1484,18 @@
     }
   },
   "feedback": {
+    "border": {
+      "radius": {
+        "$value": "{border.radius.lg}",
+        "$type": "dimension",
+        "$description": "Used for the border radius of a feedback element.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        }
+      }
+    },
     "strong": {
       "background": {
         "color": {

package/src/tokens/build/js/tokens.dark.js

@@ -366,7 +366,7 @@ export const GL_ZINDEX_3 = '3';
 export const GL_ZINDEX_4 = '4';
 export const GL_ZINDEX_200 = '200';
 export const GL_ZINDEX_9999 = '9999';
-export const GL_ALERT_BORDER_RADIUS = '0.25rem';
+export const GL_ALERT_BORDER_RADIUS = '0.5rem';
 export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#fff';
 export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#28272d';
 export const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = '#89888d';
@@ -1116,6 +1116,7 @@ export const GL_CONTROL_TEXT_COLOR_VALID = '#52b87a';
 export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d';
 export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#18171d';
 export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#89888d';
+export const GL_FEEDBACK_BORDER_RADIUS = '0.5rem';
 export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#3a383f';
 export const GL_FEEDBACK_STRONG_TEXT_COLOR = '#fff';
 export const GL_FEEDBACK_STRONG_ICON_COLOR = '#fff';

package/src/tokens/build/js/tokens.js

@@ -366,7 +366,7 @@ export const GL_ZINDEX_3 = '3';
 export const GL_ZINDEX_4 = '4';
 export const GL_ZINDEX_200 = '200';
 export const GL_ZINDEX_9999 = '9999';
-export const GL_ALERT_BORDER_RADIUS = '0.25rem';
+export const GL_ALERT_BORDER_RADIUS = '0.5rem';
 export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#18171d';
 export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#ececef';
 export const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = 'transparent';
@@ -1116,6 +1116,7 @@ export const GL_CONTROL_TEXT_COLOR_VALID = '#2f7549';
 export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d';
 export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff';
 export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278';
+export const GL_FEEDBACK_BORDER_RADIUS = '0.5rem';
 export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#3a383f';
 export const GL_FEEDBACK_STRONG_TEXT_COLOR = '#fff';
 export const GL_FEEDBACK_STRONG_ICON_COLOR = '#fff';

package/src/tokens/build/json/tokens.dark.json

@@ -7880,7 +7880,7 @@
     "border": {
       "radius": {
         "key": "{alert.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for alert border radius.",
         "$extensions": {
@@ -7891,7 +7891,7 @@
         "filePath": "src/tokens/contextual/alert.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for alert border radius.",
           "$extensions": {
@@ -35071,6 +35071,39 @@
     }
   },
   "feedback": {
+    "border": {
+      "radius": {
+        "key": "{feedback.border.radius}",
+        "$value": "0.5rem",
+        "$type": "dimension",
+        "$description": "Used for the border radius of a feedback element.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "filePath": "src/tokens/semantic/feedback.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{border.radius.lg}",
+          "$type": "dimension",
+          "$description": "Used for the border radius of a feedback element.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          },
+          "key": "{feedback.border.radius}"
+        },
+        "name": "FEEDBACK_BORDER_RADIUS",
+        "attributes": {},
+        "path": [
+          "feedback",
+          "border",
+          "radius"
+        ]
+      }
+    },
     "strong": {
       "background": {
         "color": {

package/src/tokens/build/json/tokens.json

@@ -7880,7 +7880,7 @@
     "border": {
       "radius": {
         "key": "{alert.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for alert border radius.",
         "$extensions": {
@@ -7891,7 +7891,7 @@
         "filePath": "src/tokens/contextual/alert.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for alert border radius.",
           "$extensions": {
@@ -35071,6 +35071,39 @@
     }
   },
   "feedback": {
+    "border": {
+      "radius": {
+        "key": "{feedback.border.radius}",
+        "$value": "0.5rem",
+        "$type": "dimension",
+        "$description": "Used for the border radius of a feedback element.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "filePath": "src/tokens/semantic/feedback.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{border.radius.lg}",
+          "$type": "dimension",
+          "$description": "Used for the border radius of a feedback element.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          },
+          "key": "{feedback.border.radius}"
+        },
+        "name": "FEEDBACK_BORDER_RADIUS",
+        "attributes": {},
+        "path": [
+          "feedback",
+          "border",
+          "radius"
+        ]
+      }
+    },
     "strong": {
       "background": {
         "color": {

package/src/tokens/build/scss/_tokens.dark.scss

@@ -927,6 +927,7 @@ $gl-border-color-section: $gl-background-color-default; // Used for the border c
 $gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
 $gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
 $gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
+$gl-alert-border-radius: $gl-border-radius-lg; // Used for alert border radius.
 $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.
@@ -1054,6 +1055,7 @@ $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-c
 $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.
+$gl-feedback-border-radius: $gl-border-radius-lg; // Used for the border radius of a feedback element.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.
 $gl-icon-color-subtle: $gl-text-color-subtle; // Used for a static or decorational icon. Can be paired with subtle text.
@@ -1063,7 +1065,6 @@ $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.

package/src/tokens/build/scss/_tokens.scss

@@ -927,6 +927,7 @@ $gl-border-color-section: $gl-border-color-default; // Used for the border color
 $gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
 $gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
 $gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
+$gl-alert-border-radius: $gl-border-radius-lg; // Used for alert border radius.
 $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.
@@ -1054,6 +1055,7 @@ $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-c
 $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.
+$gl-feedback-border-radius: $gl-border-radius-lg; // Used for the border radius of a feedback element.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.
 $gl-icon-color-subtle: $gl-text-color-subtle; // Used for a static or decorational icon. Can be paired with subtle text.
@@ -1063,7 +1065,6 @@ $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.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -1057,6 +1057,7 @@ $gl-control-text-color-valid: var(--gl-control-text-color-valid);
 $gl-control-placeholder-color: var(--gl-control-placeholder-color);
 $gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
 $gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
+$gl-feedback-border-radius: var(--gl-feedback-border-radius);
 $gl-feedback-strong-background-color: var(--gl-feedback-strong-background-color);
 $gl-feedback-strong-text-color: var(--gl-feedback-strong-text-color);
 $gl-feedback-strong-icon-color: var(--gl-feedback-strong-icon-color);

package/src/tokens/build/tailwind/tokens.cjs

@@ -391,6 +391,7 @@ const borderRadius = {
   full: 'var(--gl-border-radius-full)',
   default: 'var(--gl-border-radius-default)',
   control: 'var(--gl-control-border-radius)',
+  feedback: 'var(--gl-feedback-border-radius)',
 };
 const opacity = {
   0: 'var(--gl-opacity-0)',

package/src/tokens/contextual/alert.tokens.json

@@ -2,7 +2,7 @@
   "alert": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for alert border radius.",
         "$extensions": {