@gitlab/ui 123.8.0 → 123.9.1

package/dist/tokens/json/tokens.json

@@ -15033,7 +15033,7 @@
     "border": {
       "radius": {
         "key": "{button.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for button border radius.",
         "$extensions": {
@@ -18720,6 +18720,40 @@
       }
     },
     "link": {
+      "border": {
+        "radius": {
+          "key": "{button.link.border.radius}",
+          "$value": "0.25rem",
+          "$type": "dimension",
+          "$description": "Used for link button border radius.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          },
+          "filePath": "src/tokens/contextual/button.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{border.radius.md}",
+            "$type": "dimension",
+            "$description": "Used for link button border radius.",
+            "$extensions": {
+              "com.figma.scope": [
+                "CORNER_RADIUS"
+              ]
+            },
+            "key": "{button.link.border.radius}"
+          },
+          "name": "BUTTON_LINK_BORDER_RADIUS",
+          "attributes": {},
+          "path": [
+            "button",
+            "link",
+            "border",
+            "radius"
+          ]
+        }
+      },
       "text": {
         "color": {
           "default": {
@@ -19442,7 +19476,7 @@
     "border": {
       "radius": {
         "key": "{card.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for card border radius.",
         "$extensions": {
@@ -19453,7 +19487,7 @@
         "filePath": "src/tokens/contextual/card.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for card border radius.",
           "$extensions": {
@@ -22623,7 +22657,7 @@
     "border": {
       "radius": {
         "key": "{modal.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for modal border radius.",
         "$extensions": {
@@ -22634,7 +22668,7 @@
         "filePath": "src/tokens/contextual/modal.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for modal border radius.",
           "$extensions": {
@@ -30433,7 +30467,7 @@
     "border": {
       "radius": {
         "key": "{action.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for the border radius of an action.",
         "$extensions": {
@@ -30444,7 +30478,7 @@
         "filePath": "src/tokens/semantic/action.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for the border radius of an action.",
           "$extensions": {
@@ -33903,7 +33937,7 @@
       },
       "radius": {
         "key": "{control.border.radius}",
-        "$value": "0.25rem",
+        "$value": "0.5rem",
         "$type": "dimension",
         "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
         "$extensions": {
@@ -33914,7 +33948,7 @@
         "filePath": "src/tokens/semantic/control.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.default}",
+          "$value": "{border.radius.lg}",
           "$type": "dimension",
           "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
           "$extensions": {

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

@@ -1016,8 +1016,10 @@ $gl-button-danger-tertiary-background-color-focus: $gl-action-danger-background-
 $gl-button-danger-tertiary-border-color-default: $gl-action-danger-border-color-default; // Used for the border of a borderless, tertiary danger (destructive) button in the default state.
 $gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
 $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
+$gl-button-link-border-radius: $gl-border-radius-md; // Used for link button border radius.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
+$gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
 $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $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.
@@ -1032,6 +1034,7 @@ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color
 $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
+$gl-modal-border-radius: $gl-border-radius-lg; // Used for modal border radius.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -1046,6 +1049,7 @@ $gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background
 $gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
 $gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
+$gl-action-border-radius: $gl-border-radius-lg; // Used for the border radius of an action.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
@@ -1070,6 +1074,7 @@ $gl-action-strong-confirm-foreground-color-hover: $gl-action-strong-confirm-fore
 $gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-color-default; // Used for the border of a strong confirm action in the hover state.
 $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-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
+$gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $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.
@@ -1091,6 +1096,7 @@ $gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hov
 $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-border-radius: $gl-action-border-radius; // Used for button 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.
@@ -1110,23 +1116,18 @@ $gl-button-danger-tertiary-border-color-active: $gl-action-danger-border-color-a
 $gl-button-link-text-color-hover: $gl-button-link-text-color-default; // Used for the text of a link button in the hover state.
 $gl-button-link-text-color-focus: $gl-button-link-text-color-default; // Used for the text of a link button in the focus state.
 $gl-button-link-text-color-active: $gl-button-link-text-color-default; // Used for the text of a link button in the active 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-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

@@ -1006,11 +1006,13 @@ $gl-button-danger-tertiary-background-color-focus: $gl-action-danger-background-
 $gl-button-danger-tertiary-border-color-default: $gl-action-danger-border-color-default; // Used for the border of a borderless, tertiary danger (destructive) button in the default state.
 $gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
 $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
+$gl-button-link-border-radius: $gl-border-radius-md; // Used for link button border radius.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
 $gl-button-selected-foreground-color-default: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a selected button in the default state.
 $gl-button-selected-background-color-hover: $gl-button-default-primary-background-color-hover; // Used for the background of a selected button in the hover state.
 $gl-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
+$gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
 $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $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.
@@ -1025,6 +1027,7 @@ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color
 $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
+$gl-modal-border-radius: $gl-border-radius-lg; // Used for modal border radius.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -1039,6 +1042,7 @@ $gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background
 $gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
 $gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
+$gl-action-border-radius: $gl-border-radius-lg; // Used for the border radius of an action.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
@@ -1064,6 +1068,7 @@ $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-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $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.
@@ -1085,6 +1090,7 @@ $gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hov
 $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-border-radius: $gl-action-border-radius; // Used for button 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.
@@ -1108,24 +1114,19 @@ $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

@@ -612,6 +612,7 @@ $gl-button-dashed-border-color-default: var(--gl-button-dashed-border-color-defa
 $gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-hover);
 $gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-focus);
 $gl-button-dashed-border-color-active: var(--gl-button-dashed-border-color-active);
+$gl-button-link-border-radius: var(--gl-button-link-border-radius);
 $gl-button-link-text-color-default: var(--gl-button-link-text-color-default);
 $gl-button-link-text-color-hover: var(--gl-button-link-text-color-hover);
 $gl-button-link-text-color-focus: var(--gl-button-link-text-color-focus);

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)","feedback":"var(--gl-feedback-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)","action":"var(--gl-action-border-radius)","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.8.0",
+  "version": "123.9.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -415,8 +415,9 @@
     @apply gl-border-0;
     @apply gl-text-base;
     @apply gl-leading-normal;
-    color: var(--gl-button-link-text-color-default);
     @apply gl-px-0;
+    border-radius: var(--gl-button-link-border-radius);
+    color: var(--gl-button-link-text-color-default);
     min-height: auto;
     min-width: auto;
     text-decoration-thickness: auto;

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

@@ -155,7 +155,7 @@ export default {
     },
     bodyClasses() {
       return this.loading
-        ? 'gl-flex gl-flex-wrap gl-content-center gl-text-center'
+        ? 'gl-flex gl-flex-wrap gl-content-center gl-text-center gl-flex-grow'
         : `gl-grow gl-overflow-y-auto gl-overflow-x-hidden ${this.bodyContentClass}`;
     },
     hasTitleIcon() {

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

@@ -1008,11 +1008,13 @@
   --gl-button-danger-tertiary-border-color-default: var(--gl-action-danger-border-color-default); /** Used for the border of a borderless, tertiary danger (destructive) button in the default state. */
   --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the hover state. */
   --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the focus state. */
+  --gl-button-link-border-radius: var(--gl-border-radius-md); /** Used for link button border radius. */
   --gl-button-link-text-color-default: var(--gl-text-color-link); /** Used for the text of a link button in the default state. */
   --gl-button-selected-foreground-color-default: var(--gl-button-default-primary-foreground-color-default); /** Used for the foreground of a selected button in the default state. */
   --gl-button-selected-background-color-hover: var(--gl-button-default-primary-background-color-hover); /** Used for the background of a selected button in the hover state. */
   --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /** Used for the background of a selected button in the active state. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /** Used for the border of a selected button in the focus state. */
+  --gl-card-border-radius: var(--gl-border-radius-lg); /** Used for card border radius. */
   --gl-chart-axis-text-color: var(--gl-text-color-subtle); /** Used in charts for the text color of axis titles and labels. */
   --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. */
@@ -1027,6 +1029,7 @@
   --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */
   --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of an unselected dropdown option in the focus state. */
   --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */
+  --gl-modal-border-radius: var(--gl-border-radius-lg); /** Used for modal border radius. */
   --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
@@ -1041,6 +1044,7 @@
   --gl-toggle-switch-icon-color-checked-active: var(--gl-action-strong-confirm-background-color-active); /** Used for the icon color of a checked toggle switch in the active state. */
   --gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /** Used for the icon color of a disabled toggle switch. */
   --gl-token-foreground-color: var(--gl-text-color-default); /** Used for the token foreground color. */
+  --gl-action-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of an action. */
   --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /** Used for the foreground of a selected action in the hover state. */
   --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /** Used for the background of a selected action in the focus state. */
   --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /** Used for the border of a selected action in the default state. */
@@ -1066,6 +1070,7 @@
   --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-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
   --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. */
@@ -1087,6 +1092,7 @@
   --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-border-radius: var(--gl-action-border-radius); /** Used for button 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. */
@@ -1110,24 +1116,19 @@
   --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

@@ -1018,8 +1018,10 @@
   --gl-button-danger-tertiary-border-color-default: var(--gl-action-danger-border-color-default); /** Used for the border of a borderless, tertiary danger (destructive) button in the default state. */
   --gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the hover state. */
   --gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-default); /** Used for the border of a dashed button in the focus state. */
+  --gl-button-link-border-radius: var(--gl-border-radius-md); /** Used for link button border radius. */
   --gl-button-link-text-color-default: var(--gl-text-color-link); /** Used for the text of a link button in the default state. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /** Used for the border of a selected button in the focus state. */
+  --gl-card-border-radius: var(--gl-border-radius-lg); /** Used for card border radius. */
   --gl-chart-axis-text-color: var(--gl-text-color-subtle); /** Used in charts for the text color of axis titles and labels. */
   --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. */
@@ -1034,6 +1036,7 @@
   --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */
   --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of an unselected dropdown option in the focus state. */
   --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */
+  --gl-modal-border-radius: var(--gl-border-radius-lg); /** Used for modal border radius. */
   --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
@@ -1048,6 +1051,7 @@
   --gl-toggle-switch-icon-color-checked-active: var(--gl-action-strong-confirm-background-color-active); /** Used for the icon color of a checked toggle switch in the active state. */
   --gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /** Used for the icon color of a disabled toggle switch. */
   --gl-token-foreground-color: var(--gl-text-color-default); /** Used for the token foreground color. */
+  --gl-action-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of an action. */
   --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /** Used for the foreground of a selected action in the hover state. */
   --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /** Used for the background of a selected action in the focus state. */
   --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /** Used for the border of a selected action in the default state. */
@@ -1072,6 +1076,7 @@
   --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /** Used for the border of a strong confirm action in the hover state. */
   --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-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-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
   --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. */
@@ -1093,6 +1098,7 @@
   --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-border-radius: var(--gl-action-border-radius); /** Used for button 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. */
@@ -1112,23 +1118,18 @@
   --gl-button-link-text-color-hover: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the hover state. */
   --gl-button-link-text-color-focus: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the focus state. */
   --gl-button-link-text-color-active: var(--gl-button-link-text-color-default); /** Used for the text of a link button in the active 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-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/docs/tokens-tailwind-docs.dark.json

@@ -40867,9 +40867,41 @@
       ],
       "cssWithValue": "var(--gl-border-radius-default)"
     },
+    "action": {
+      "key": "{action.border.radius}",
+      "$value": "0.5rem",
+      "$type": "dimension",
+      "$description": "Used for the border radius of an action.",
+      "$extensions": {
+        "com.figma.scope": [
+          "CORNER_RADIUS"
+        ]
+      },
+      "filePath": "src/tokens/semantic/action.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "{border.radius.lg}",
+        "$type": "dimension",
+        "$description": "Used for the border radius of an action.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "key": "{action.border.radius}"
+      },
+      "name": "ACTION_BORDER_RADIUS",
+      "attributes": {},
+      "path": [
+        "action",
+        "border",
+        "radius"
+      ],
+      "cssWithValue": "var(--gl-action-border-radius)"
+    },
     "control": {
       "key": "{control.border.radius}",
-      "$value": "0.25rem",
+      "$value": "0.5rem",
       "$type": "dimension",
       "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
       "$extensions": {
@@ -40880,7 +40912,7 @@
       "filePath": "src/tokens/semantic/control.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
         "$extensions": {

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

@@ -40867,9 +40867,41 @@
       ],
       "cssWithValue": "var(--gl-border-radius-default)"
     },
+    "action": {
+      "key": "{action.border.radius}",
+      "$value": "0.5rem",
+      "$type": "dimension",
+      "$description": "Used for the border radius of an action.",
+      "$extensions": {
+        "com.figma.scope": [
+          "CORNER_RADIUS"
+        ]
+      },
+      "filePath": "src/tokens/semantic/action.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "{border.radius.lg}",
+        "$type": "dimension",
+        "$description": "Used for the border radius of an action.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "key": "{action.border.radius}"
+      },
+      "name": "ACTION_BORDER_RADIUS",
+      "attributes": {},
+      "path": [
+        "action",
+        "border",
+        "radius"
+      ],
+      "cssWithValue": "var(--gl-action-border-radius)"
+    },
     "control": {
       "key": "{control.border.radius}",
-      "$value": "0.25rem",
+      "$value": "0.5rem",
       "$type": "dimension",
       "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
       "$extensions": {
@@ -40880,7 +40912,7 @@
       "filePath": "src/tokens/semantic/control.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
         "$extensions": {

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

@@ -3856,6 +3856,18 @@
       }
     },
     "link": {
+      "border": {
+        "radius": {
+          "$value": "{border.radius.md}",
+          "$type": "dimension",
+          "$description": "Used for link button border radius.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          }
+        }
+      },
       "text": {
         "color": {
           "default": {
@@ -4154,7 +4166,7 @@
   "card": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for card border radius.",
         "$extensions": {
@@ -5497,7 +5509,7 @@
   "modal": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for modal border radius.",
         "$extensions": {