@gitlab/ui 123.8.0 → 123.9.1

package/dist/tokens/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/dist/tokens/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/dist/tokens/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/dist/tokens/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/dist/tokens/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": {

package/dist/tokens/figma/semantic.tokens.json

@@ -2,7 +2,7 @@
   "action": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for the border radius of an action.",
         "$extensions": {
@@ -1404,7 +1404,7 @@
         }
       },
       "radius": {
-        "$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/js/tokens.dark.js

@@ -597,7 +597,7 @@ export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTGREEN = "#fff";
 export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTINDIGO = "#fff";
 export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTRED = "#fff";
 export const GL_BROADCAST_BANNER_TEXT_COLOR_RED = "#fff";
-export const GL_BUTTON_BORDER_RADIUS = "0.25rem";
+export const GL_BUTTON_BORDER_RADIUS = "0.5rem";
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_DEFAULT = "#ececef";
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_HOVER = "#ececef";
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_FOCUS = "#ececef";
@@ -722,6 +722,7 @@ export const GL_BUTTON_DASHED_BORDER_COLOR_DEFAULT = "#89888d";
 export const GL_BUTTON_DASHED_BORDER_COLOR_HOVER = "#89888d";
 export const GL_BUTTON_DASHED_BORDER_COLOR_FOCUS = "#89888d";
 export const GL_BUTTON_DASHED_BORDER_COLOR_ACTIVE = "#a4a3a8";
+export const GL_BUTTON_LINK_BORDER_RADIUS = "0.25rem";
 export const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = "#9dc7f1";
 export const GL_BUTTON_LINK_TEXT_COLOR_HOVER = "#9dc7f1";
 export const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = "#9dc7f1";
@@ -742,7 +743,7 @@ export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = "#89888d";
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = "rgba(137, 136, 141, 0.16)";
 export const GL_BUTTON_DISABLED_BORDER_COLOR = "transparent";
 export const GL_BUTTON_COUNT_BACKGROUND_COLOR = "rgba(255, 255, 255, 0.16)";
-export const GL_CARD_BORDER_RADIUS = "0.25rem";
+export const GL_CARD_BORDER_RADIUS = "0.5rem";
 export const GL_CHART_AXIS_POINTER_COLOR = "#bfbfc3";
 export const GL_CHART_AXIS_LINE_COLOR = "#4c4b51";
 export const GL_CHART_AXIS_TEXT_COLOR = "#bfbfc3";
@@ -834,7 +835,7 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = "#cbe2f9";
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = "#f5d9a8";
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = "#284779";
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = "#693c14";
-export const GL_MODAL_BORDER_RADIUS = "0.25rem";
+export const GL_MODAL_BORDER_RADIUS = "0.5rem";
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = "#63a6e9";
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = "#52b87a";
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = "#d99530";
@@ -1082,7 +1083,7 @@ export const T_WHITE_A_02 = "rgba(255, 255, 255, 0.02)";
 export const T_WHITE_A_04 = "rgba(255, 255, 255, 0.04)";
 export const T_WHITE_A_06 = "rgba(255, 255, 255, 0.06)";
 export const T_WHITE_A_08 = "rgba(255, 255, 255, 0.08)";
-export const GL_ACTION_BORDER_RADIUS = "0.25rem";
+export const GL_ACTION_BORDER_RADIUS = "0.5rem";
 export const GL_ACTION_DISABLED_FOREGROUND_COLOR = "#737278";
 export const GL_ACTION_DISABLED_BACKGROUND_COLOR = "#28272d";
 export const GL_ACTION_DISABLED_BORDER_COLOR = "#3a383f";
@@ -1191,7 +1192,7 @@ export const GL_CONTROL_BORDER_COLOR_ERROR = "#f6806d";
 export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = "#428fdc";
 export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = "#9dc7f1";
 export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = "#9dc7f1";
-export const GL_CONTROL_BORDER_RADIUS = "0.25rem";
+export const GL_CONTROL_BORDER_RADIUS = "0.5rem";
 export const GL_CONTROL_TEXT_COLOR_ERROR = "#f6806d";
 export const GL_CONTROL_TEXT_COLOR_VALID = "#52b87a";
 export const GL_CONTROL_PLACEHOLDER_COLOR = "#89888d";

package/dist/tokens/js/tokens.js

@@ -597,7 +597,7 @@ export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTGREEN = "#fff";
 export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTINDIGO = "#fff";
 export const GL_BROADCAST_BANNER_TEXT_COLOR_LIGHTRED = "#fff";
 export const GL_BROADCAST_BANNER_TEXT_COLOR_RED = "#fff";
-export const GL_BUTTON_BORDER_RADIUS = "0.25rem";
+export const GL_BUTTON_BORDER_RADIUS = "0.5rem";
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_DEFAULT = "#3a383f";
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_HOVER = "#3a383f";
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_FOCUS = "#3a383f";
@@ -710,6 +710,7 @@ export const GL_BUTTON_DASHED_BORDER_COLOR_DEFAULT = "#89888d";
 export const GL_BUTTON_DASHED_BORDER_COLOR_HOVER = "#89888d";
 export const GL_BUTTON_DASHED_BORDER_COLOR_FOCUS = "#89888d";
 export const GL_BUTTON_DASHED_BORDER_COLOR_ACTIVE = "#626168";
+export const GL_BUTTON_LINK_BORDER_RADIUS = "0.25rem";
 export const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = "#2f5ca0";
 export const GL_BUTTON_LINK_TEXT_COLOR_HOVER = "#2f5ca0";
 export const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = "#2f5ca0";
@@ -730,7 +731,7 @@ export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = "#737278";
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = "#fbfafd";
 export const GL_BUTTON_DISABLED_BORDER_COLOR = "#dcdcde";
 export const GL_BUTTON_COUNT_BACKGROUND_COLOR = "rgba(05, 05, 06, 0.08)";
-export const GL_CARD_BORDER_RADIUS = "0.25rem";
+export const GL_CARD_BORDER_RADIUS = "0.5rem";
 export const GL_CHART_AXIS_POINTER_COLOR = "#626168";
 export const GL_CHART_AXIS_LINE_COLOR = "#bfbfc3";
 export const GL_CHART_AXIS_TEXT_COLOR = "#626168";
@@ -822,7 +823,7 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = "#284779";
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = "#693c14";
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = "#cbe2f9";
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = "#f5d9a8";
-export const GL_MODAL_BORDER_RADIUS = "0.25rem";
+export const GL_MODAL_BORDER_RADIUS = "0.5rem";
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = "#1f75cb";
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = "#108548";
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = "#ab6100";
@@ -1070,7 +1071,7 @@ export const T_WHITE_A_02 = "rgba(255, 255, 255, 0.02)";
 export const T_WHITE_A_04 = "rgba(255, 255, 255, 0.04)";
 export const T_WHITE_A_06 = "rgba(255, 255, 255, 0.06)";
 export const T_WHITE_A_08 = "rgba(255, 255, 255, 0.08)";
-export const GL_ACTION_BORDER_RADIUS = "0.25rem";
+export const GL_ACTION_BORDER_RADIUS = "0.5rem";
 export const GL_ACTION_DISABLED_FOREGROUND_COLOR = "#89888d";
 export const GL_ACTION_DISABLED_BACKGROUND_COLOR = "#ececef";
 export const GL_ACTION_DISABLED_BORDER_COLOR = "#dcdcde";
@@ -1180,7 +1181,7 @@ export const GL_CONTROL_BORDER_COLOR_ERROR = "#dd2b0e";
 export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = "#1f75cb";
 export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = "#2f5ca0";
 export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = "#2f5ca0";
-export const GL_CONTROL_BORDER_RADIUS = "0.25rem";
+export const GL_CONTROL_BORDER_RADIUS = "0.5rem";
 export const GL_CONTROL_TEXT_COLOR_ERROR = "#c02f12";
 export const GL_CONTROL_TEXT_COLOR_VALID = "#2f7549";
 export const GL_CONTROL_PLACEHOLDER_COLOR = "#89888d";

package/dist/tokens/json/tokens.dark.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": {