@gitlab/ui 126.1.0 → 126.1.1

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

@@ -35465,7 +35465,7 @@
           "filePath": "src/tokens/semantic/control.tokens.json",
           "isSource": true,
           "original": {
-            "$value": "{color.red.300}",
+            "$value": "{feedback.danger.border.color}",
             "$type": "color",
             "$description": "Used for invalid form control (input, textarea) border.",
             "$extensions": {
@@ -35863,6 +35863,40 @@
           ]
         }
       },
+      "border": {
+        "color": {
+          "key": "{feedback.strong.border.color}",
+          "$value": "#a4a3a8",
+          "$type": "color",
+          "$description": "Used for the border associated with strong feedback.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "filePath": "src/tokens/semantic/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.neutral.300}",
+            "$type": "color",
+            "$description": "Used for the border associated with strong feedback.",
+            "$extensions": {
+              "com.figma.scope": [
+                "STROKE_COLOR"
+              ]
+            },
+            "key": "{feedback.strong.border.color}"
+          },
+          "name": "FEEDBACK_STRONG_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "strong",
+            "border",
+            "color"
+          ]
+        }
+      },
       "text": {
         "color": {
           "key": "{feedback.strong.text.color}",
@@ -36005,6 +36039,40 @@
           ]
         }
       },
+      "border": {
+        "color": {
+          "key": "{feedback.neutral.border.color}",
+          "$value": "#626168",
+          "$type": "color",
+          "$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "filePath": "src/tokens/semantic/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.neutral.600}",
+            "$type": "color",
+            "$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency.",
+            "$extensions": {
+              "com.figma.scope": [
+                "STROKE_COLOR"
+              ]
+            },
+            "key": "{feedback.neutral.border.color}"
+          },
+          "name": "FEEDBACK_NEUTRAL_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "neutral",
+            "border",
+            "color"
+          ]
+        }
+      },
       "text": {
         "color": {
           "key": "{feedback.neutral.text.color}",
@@ -36113,6 +36181,40 @@
           ]
         }
       },
+      "border": {
+        "color": {
+          "key": "{feedback.info.border.color}",
+          "$value": "#2f68b4",
+          "$type": "color",
+          "$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "filePath": "src/tokens/semantic/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.blue.600}",
+            "$type": "color",
+            "$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
+            "$extensions": {
+              "com.figma.scope": [
+                "STROKE_COLOR"
+              ]
+            },
+            "key": "{feedback.info.border.color}"
+          },
+          "name": "FEEDBACK_INFO_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "info",
+            "border",
+            "color"
+          ]
+        }
+      },
       "text": {
         "color": {
           "key": "{feedback.info.text.color}",
@@ -36221,6 +36323,40 @@
           ]
         }
       },
+      "border": {
+        "color": {
+          "key": "{feedback.success.border.color}",
+          "$value": "#2f7549",
+          "$type": "color",
+          "$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "filePath": "src/tokens/semantic/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.green.600}",
+            "$type": "color",
+            "$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action.",
+            "$extensions": {
+              "com.figma.scope": [
+                "STROKE_COLOR"
+              ]
+            },
+            "key": "{feedback.success.border.color}"
+          },
+          "name": "FEEDBACK_SUCCESS_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "success",
+            "border",
+            "color"
+          ]
+        }
+      },
       "text": {
         "color": {
           "key": "{feedback.success.text.color}",
@@ -36329,6 +36465,40 @@
           ]
         }
       },
+      "border": {
+        "color": {
+          "key": "{feedback.warning.border.color}",
+          "$value": "#995715",
+          "$type": "color",
+          "$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "filePath": "src/tokens/semantic/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.orange.600}",
+            "$type": "color",
+            "$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information.",
+            "$extensions": {
+              "com.figma.scope": [
+                "STROKE_COLOR"
+              ]
+            },
+            "key": "{feedback.warning.border.color}"
+          },
+          "name": "FEEDBACK_WARNING_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "warning",
+            "border",
+            "color"
+          ]
+        }
+      },
       "text": {
         "color": {
           "key": "{feedback.warning.text.color}",
@@ -36437,6 +36607,40 @@
           ]
         }
       },
+      "border": {
+        "color": {
+          "key": "{feedback.danger.border.color}",
+          "$value": "#f6806d",
+          "$type": "color",
+          "$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "filePath": "src/tokens/semantic/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.red.300}",
+            "$type": "color",
+            "$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
+            "$extensions": {
+              "com.figma.scope": [
+                "STROKE_COLOR"
+              ]
+            },
+            "key": "{feedback.danger.border.color}"
+          },
+          "name": "FEEDBACK_DANGER_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "danger",
+            "border",
+            "color"
+          ]
+        }
+      },
       "text": {
         "color": {
           "key": "{feedback.danger.text.color}",

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

@@ -35465,7 +35465,7 @@
           "filePath": "src/tokens/semantic/control.tokens.json",
           "isSource": true,
           "original": {
-            "$value": "{color.red.500}",
+            "$value": "{feedback.danger.border.color}",
             "$type": "color",
             "$description": "Used for invalid form control (input, textarea) border.",
             "$extensions": {
@@ -35863,6 +35863,40 @@
           ]
         }
       },
+      "border": {
+        "color": {
+          "key": "{feedback.strong.border.color}",
+          "$value": "#050506",
+          "$type": "color",
+          "$description": "Used for the border associated with strong feedback.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "filePath": "src/tokens/semantic/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.neutral.1000}",
+            "$type": "color",
+            "$description": "Used for the border associated with strong feedback.",
+            "$extensions": {
+              "com.figma.scope": [
+                "STROKE_COLOR"
+              ]
+            },
+            "key": "{feedback.strong.border.color}"
+          },
+          "name": "FEEDBACK_STRONG_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "strong",
+            "border",
+            "color"
+          ]
+        }
+      },
       "text": {
         "color": {
           "key": "{feedback.strong.text.color}",
@@ -36005,6 +36039,40 @@
           ]
         }
       },
+      "border": {
+        "color": {
+          "key": "{feedback.neutral.border.color}",
+          "$value": "#bfbfc3",
+          "$type": "color",
+          "$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "filePath": "src/tokens/semantic/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.neutral.200}",
+            "$type": "color",
+            "$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency.",
+            "$extensions": {
+              "com.figma.scope": [
+                "STROKE_COLOR"
+              ]
+            },
+            "key": "{feedback.neutral.border.color}"
+          },
+          "name": "FEEDBACK_NEUTRAL_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "neutral",
+            "border",
+            "color"
+          ]
+        }
+      },
       "text": {
         "color": {
           "key": "{feedback.neutral.text.color}",
@@ -36113,6 +36181,40 @@
           ]
         }
       },
+      "border": {
+        "color": {
+          "key": "{feedback.info.border.color}",
+          "$value": "#9dc7f1",
+          "$type": "color",
+          "$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "filePath": "src/tokens/semantic/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.blue.200}",
+            "$type": "color",
+            "$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
+            "$extensions": {
+              "com.figma.scope": [
+                "STROKE_COLOR"
+              ]
+            },
+            "key": "{feedback.info.border.color}"
+          },
+          "name": "FEEDBACK_INFO_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "info",
+            "border",
+            "color"
+          ]
+        }
+      },
       "text": {
         "color": {
           "key": "{feedback.info.text.color}",
@@ -36221,6 +36323,40 @@
           ]
         }
       },
+      "border": {
+        "color": {
+          "key": "{feedback.success.border.color}",
+          "$value": "#91d4a8",
+          "$type": "color",
+          "$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "filePath": "src/tokens/semantic/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.green.200}",
+            "$type": "color",
+            "$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action.",
+            "$extensions": {
+              "com.figma.scope": [
+                "STROKE_COLOR"
+              ]
+            },
+            "key": "{feedback.success.border.color}"
+          },
+          "name": "FEEDBACK_SUCCESS_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "success",
+            "border",
+            "color"
+          ]
+        }
+      },
       "text": {
         "color": {
           "key": "{feedback.success.text.color}",
@@ -36329,6 +36465,40 @@
           ]
         }
       },
+      "border": {
+        "color": {
+          "key": "{feedback.warning.border.color}",
+          "$value": "#e9be74",
+          "$type": "color",
+          "$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "filePath": "src/tokens/semantic/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.orange.200}",
+            "$type": "color",
+            "$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information.",
+            "$extensions": {
+              "com.figma.scope": [
+                "STROKE_COLOR"
+              ]
+            },
+            "key": "{feedback.warning.border.color}"
+          },
+          "name": "FEEDBACK_WARNING_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "warning",
+            "border",
+            "color"
+          ]
+        }
+      },
       "text": {
         "color": {
           "key": "{feedback.warning.text.color}",
@@ -36437,6 +36607,40 @@
           ]
         }
       },
+      "border": {
+        "color": {
+          "key": "{feedback.danger.border.color}",
+          "$value": "#dd2b0e",
+          "$type": "color",
+          "$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "filePath": "src/tokens/semantic/feedback.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.red.500}",
+            "$type": "color",
+            "$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
+            "$extensions": {
+              "com.figma.scope": [
+                "STROKE_COLOR"
+              ]
+            },
+            "key": "{feedback.danger.border.color}"
+          },
+          "name": "FEEDBACK_DANGER_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "feedback",
+            "danger",
+            "border",
+            "color"
+          ]
+        }
+      },
       "text": {
         "color": {
           "key": "{feedback.danger.text.color}",

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

@@ -931,29 +931,34 @@ $gl-control-border-color-default: $gl-color-neutral-500; // Used for form contro
 $gl-control-border-color-hover: $gl-color-neutral-300; // Used for form control (input, radio button, checkbox, textarea) border on hover.
 $gl-control-border-color-focus: $gl-color-neutral-50; // Used for form control (input, radio button, checkbox, textarea) border on focus.
 $gl-control-border-color-disabled: $gl-color-neutral-800; // Used for disabled form control (input, radio button, checkbox, textarea) border.
-$gl-control-border-color-error: $gl-color-red-300; // Used for invalid form control (input, textarea) border.
 $gl-control-border-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
 $gl-control-border-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
 $gl-control-border-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
 $gl-control-indicator-color-selected: $gl-color-neutral-950; // Used for checkbox and radio button state indicators.
 $gl-control-indicator-color-disabled: $gl-color-neutral-400; // Used for disabled checkbox and radio button state indicators.
 $gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message.
+$gl-feedback-strong-border-color: $gl-color-neutral-300; // Used for the border associated with strong feedback.
 $gl-feedback-strong-text-color: $gl-color-neutral-0; // Used for text on a strong feedback background.
 $gl-feedback-strong-icon-color: $gl-color-neutral-0; // Used for an icon on a strong feedback background.
 $gl-feedback-strong-link-color: $gl-color-blue-300; // Used for a link on a strong feedback background.
 $gl-feedback-neutral-background-color: $gl-color-neutral-900; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
+$gl-feedback-neutral-border-color: $gl-color-neutral-600; // Used for the border of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-neutral-icon-color: $gl-color-neutral-300; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-info-background-color: $gl-color-blue-950; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-border-color: $gl-color-blue-600; // Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 $gl-feedback-info-text-color: $gl-color-blue-200; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 $gl-feedback-info-icon-color: $gl-color-blue-300; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 $gl-feedback-success-background-color: $gl-color-green-900; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-success-border-color: $gl-color-green-600; // Used for the border of a success feedback item when confirming the successful completion of a user-initiated action.
 $gl-feedback-success-text-color: $gl-color-green-200; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.
 $gl-feedback-success-icon-color: $gl-color-green-300; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.
 $gl-feedback-warning-background-color: $gl-color-orange-900; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-warning-border-color: $gl-color-orange-600; // Used for the border of a warning feedback item when notifying about a potential issue or sensitive information.
 $gl-feedback-warning-text-color: $gl-color-orange-200; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.
 $gl-feedback-warning-icon-color: $gl-color-orange-300; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.
 $gl-feedback-danger-background-color: $gl-color-red-900; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-danger-border-color: $gl-color-red-300; // Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 $gl-feedback-danger-text-color: $gl-color-red-200; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 $gl-feedback-danger-icon-color: $gl-color-red-300; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 $gl-focus-ring-outer-color: $gl-color-blue-400; // Used for the outer color portion of the focus ring.
@@ -1210,6 +1215,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-color-error: $gl-feedback-danger-border-color; // Used for invalid form control (input, textarea) border.
 $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.

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

@@ -914,29 +914,34 @@ $gl-control-border-color-default: $gl-color-neutral-400; // Used for form contro
 $gl-control-border-color-hover: $gl-color-neutral-600; // Used for form control (input, radio button, checkbox, textarea) border on hover.
 $gl-control-border-color-focus: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) border on focus.
 $gl-control-border-color-disabled: $gl-color-neutral-100; // Used for disabled form control (input, radio button, checkbox, textarea) border.
-$gl-control-border-color-error: $gl-color-red-500; // Used for invalid form control (input, textarea) border.
 $gl-control-border-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
 $gl-control-border-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
 $gl-control-border-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
 $gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators.
 $gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators.
 $gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message.
+$gl-feedback-strong-border-color: $gl-color-neutral-1000; // Used for the border associated with strong feedback.
 $gl-feedback-strong-text-color: $gl-color-neutral-0; // Used for text on a strong feedback background.
 $gl-feedback-strong-icon-color: $gl-color-neutral-0; // Used for an icon on a strong feedback background.
 $gl-feedback-strong-link-color: $gl-color-blue-300; // Used for a link on a strong feedback background.
 $gl-feedback-neutral-background-color: $gl-color-neutral-50; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
+$gl-feedback-neutral-border-color: $gl-color-neutral-200; // Used for the border of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-neutral-text-color: $gl-color-neutral-700; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-neutral-icon-color: $gl-color-neutral-600; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-info-background-color: $gl-color-blue-50; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-border-color: $gl-color-blue-200; // Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 $gl-feedback-info-text-color: $gl-color-blue-700; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 $gl-feedback-info-icon-color: $gl-color-blue-600; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 $gl-feedback-success-background-color: $gl-color-green-50; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
+$gl-feedback-success-border-color: $gl-color-green-200; // Used for the border of a success feedback item when confirming the successful completion of a user-initiated action.
 $gl-feedback-success-text-color: $gl-color-green-700; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.
 $gl-feedback-success-icon-color: $gl-color-green-600; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.
 $gl-feedback-warning-background-color: $gl-color-orange-50; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.
+$gl-feedback-warning-border-color: $gl-color-orange-200; // Used for the border of a warning feedback item when notifying about a potential issue or sensitive information.
 $gl-feedback-warning-text-color: $gl-color-orange-700; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.
 $gl-feedback-warning-icon-color: $gl-color-orange-600; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.
 $gl-feedback-danger-background-color: $gl-color-red-50; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+$gl-feedback-danger-border-color: $gl-color-red-500; // Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 $gl-feedback-danger-text-color: $gl-color-red-700; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 $gl-feedback-danger-icon-color: $gl-color-red-600; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 $gl-focus-ring-outer-color: $gl-color-blue-500; // Used for the outer color portion of the focus ring.
@@ -1204,6 +1209,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-color-error: $gl-feedback-danger-border-color; // Used for invalid form control (input, textarea) border.
 $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.

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

@@ -1094,22 +1094,28 @@ $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-border-color: var(--gl-feedback-strong-border-color);
 $gl-feedback-strong-text-color: var(--gl-feedback-strong-text-color);
 $gl-feedback-strong-icon-color: var(--gl-feedback-strong-icon-color);
 $gl-feedback-strong-link-color: var(--gl-feedback-strong-link-color);
 $gl-feedback-neutral-background-color: var(--gl-feedback-neutral-background-color);
+$gl-feedback-neutral-border-color: var(--gl-feedback-neutral-border-color);
 $gl-feedback-neutral-text-color: var(--gl-feedback-neutral-text-color);
 $gl-feedback-neutral-icon-color: var(--gl-feedback-neutral-icon-color);
 $gl-feedback-info-background-color: var(--gl-feedback-info-background-color);
+$gl-feedback-info-border-color: var(--gl-feedback-info-border-color);
 $gl-feedback-info-text-color: var(--gl-feedback-info-text-color);
 $gl-feedback-info-icon-color: var(--gl-feedback-info-icon-color);
 $gl-feedback-success-background-color: var(--gl-feedback-success-background-color);
+$gl-feedback-success-border-color: var(--gl-feedback-success-border-color);
 $gl-feedback-success-text-color: var(--gl-feedback-success-text-color);
 $gl-feedback-success-icon-color: var(--gl-feedback-success-icon-color);
 $gl-feedback-warning-background-color: var(--gl-feedback-warning-background-color);
+$gl-feedback-warning-border-color: var(--gl-feedback-warning-border-color);
 $gl-feedback-warning-text-color: var(--gl-feedback-warning-text-color);
 $gl-feedback-warning-icon-color: var(--gl-feedback-warning-icon-color);
 $gl-feedback-danger-background-color: var(--gl-feedback-danger-background-color);
+$gl-feedback-danger-border-color: var(--gl-feedback-danger-border-color);
 $gl-feedback-danger-text-color: var(--gl-feedback-danger-text-color);
 $gl-feedback-danger-icon-color: var(--gl-feedback-danger-icon-color);
 $gl-focus-ring-outer-color: var(--gl-focus-ring-outer-color);

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

@@ -329,6 +329,14 @@ const feedbackBackgroundColors = {
   'feedback-warning': 'var(--gl-feedback-warning-background-color)',
   'feedback-danger': 'var(--gl-feedback-danger-background-color)',
 };
+const feedbackBorderColors = {
+  'feedback-strong': 'var(--gl-feedback-strong-border-color)',
+  'feedback-neutral': 'var(--gl-feedback-neutral-border-color)',
+  'feedback-info': 'var(--gl-feedback-info-border-color)',
+  'feedback-success': 'var(--gl-feedback-success-border-color)',
+  'feedback-warning': 'var(--gl-feedback-warning-border-color)',
+  'feedback-danger': 'var(--gl-feedback-danger-border-color)',
+};
 const feedbackTextColors = {
   'feedback-strong': 'var(--gl-feedback-strong-text-color)',
   'feedback-neutral': 'var(--gl-feedback-neutral-text-color)',
@@ -504,6 +512,7 @@ const backgroundColor = {
 const borderColor = {
   ...colors,
   ...borderColors,
+  ...feedbackBorderColors,
   dropdown: 'var(--gl-dropdown-border-color)',
   'dropdown-divider': 'var(--gl-dropdown-divider-color)',
   control: {