@gitlab/ui 126.0.2 → 126.1.1

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

@@ -933,29 +933,34 @@
   --gl-control-border-color-hover: var(--gl-color-neutral-300); /** Used for form control (input, radio button, checkbox, textarea) border on hover. */
   --gl-control-border-color-focus: var(--gl-color-neutral-50); /** Used for form control (input, radio button, checkbox, textarea) border on focus. */
   --gl-control-border-color-disabled: var(--gl-color-neutral-800); /** Used for disabled form control (input, radio button, checkbox, textarea) border. */
-  --gl-control-border-color-error: var(--gl-color-red-300); /** Used for invalid form control (input, textarea) border. */
   --gl-control-border-color-selected-default: var(--gl-color-blue-400); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
   --gl-control-border-color-selected-hover: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
   --gl-control-border-color-selected-focus: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-950); /** Used for checkbox and radio button state indicators. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-400); /** Used for disabled checkbox and radio button state indicators. */
   --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /** Used for a background associated with strong feedback like a tooltip or toast message. */
+  --gl-feedback-strong-border-color: var(--gl-color-neutral-300); /** Used for the border associated with strong feedback. */
   --gl-feedback-strong-text-color: var(--gl-color-neutral-0); /** Used for text on a strong feedback background. */
   --gl-feedback-strong-icon-color: var(--gl-color-neutral-0); /** Used for an icon on a strong feedback background. */
   --gl-feedback-strong-link-color: var(--gl-color-blue-300); /** Used for a link on a strong feedback background. */
   --gl-feedback-neutral-background-color: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-color-blue-400); /** Used for the outer color portion of the focus ring. */
@@ -1159,6 +1164,7 @@
   --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-drawer-border-radius: var(--gl-border-radius-2xl); /** Used for drawer border radius. */
   --gl-dropdown-background-color: var(--gl-background-color-overlap); /** Used for the background of a dropdown. */
   --gl-dropdown-border-color: var(--gl-border-color-default); /** Used for the border of a dropdown. */
   --gl-dropdown-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a dropdown. */
@@ -1171,7 +1177,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-modal-border-radius: var(--gl-border-radius-2xl); /** 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. */
@@ -1211,6 +1217,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-color-error: var(--gl-feedback-danger-border-color); /** Used for invalid form control (input, textarea) border. */
   --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. */

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

@@ -15774,6 +15774,206 @@
         "cssWithValue": "var(--gl-border-color-section)"
       }
     },
+    "feedback": {
+      "strong": {
+        "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"
+        ],
+        "cssWithValue": "var(--gl-feedback-strong-border-color)"
+      },
+      "neutral": {
+        "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"
+        ],
+        "cssWithValue": "var(--gl-feedback-neutral-border-color)"
+      },
+      "info": {
+        "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"
+        ],
+        "cssWithValue": "var(--gl-feedback-info-border-color)"
+      },
+      "success": {
+        "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"
+        ],
+        "cssWithValue": "var(--gl-feedback-success-border-color)"
+      },
+      "warning": {
+        "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"
+        ],
+        "cssWithValue": "var(--gl-feedback-warning-border-color)"
+      },
+      "danger": {
+        "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"
+        ],
+        "cssWithValue": "var(--gl-feedback-danger-border-color)"
+      }
+    },
     "dropdown": {
       "key": "{dropdown.border.color}",
       "$value": "#4c4b51",
@@ -15924,7 +16124,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": {

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

@@ -15774,6 +15774,206 @@
         "cssWithValue": "var(--gl-border-color-section)"
       }
     },
+    "feedback": {
+      "strong": {
+        "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"
+        ],
+        "cssWithValue": "var(--gl-feedback-strong-border-color)"
+      },
+      "neutral": {
+        "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"
+        ],
+        "cssWithValue": "var(--gl-feedback-neutral-border-color)"
+      },
+      "info": {
+        "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"
+        ],
+        "cssWithValue": "var(--gl-feedback-info-border-color)"
+      },
+      "success": {
+        "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"
+        ],
+        "cssWithValue": "var(--gl-feedback-success-border-color)"
+      },
+      "warning": {
+        "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"
+        ],
+        "cssWithValue": "var(--gl-feedback-warning-border-color)"
+      },
+      "danger": {
+        "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"
+        ],
+        "cssWithValue": "var(--gl-feedback-danger-border-color)"
+      }
+    },
     "dropdown": {
       "key": "{dropdown.border.color}",
       "$value": "#bfbfc3",
@@ -15924,7 +16124,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": {

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

@@ -4321,6 +4321,23 @@
       "com.gitlab.locked": true
     }
   },
+  "drawer": {
+    "border": {
+      "radius": {
+        "$value": "{border.radius.2xl}",
+        "$type": "dimension",
+        "$description": "Used for drawer border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        }
+      }
+    },
+    "$extensions": {
+      "com.gitlab.locked": true
+    }
+  },
   "dropdown": {
     "background": {
       "color": {
@@ -5509,7 +5526,7 @@
   "modal": {
     "border": {
       "radius": {
-        "$value": "{border.radius.lg}",
+        "$value": "{border.radius.2xl}",
         "$type": "dimension",
         "$description": "Used for modal border radius.",
         "$extensions": {

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

@@ -1339,10 +1339,7 @@
           }
         },
         "error": {
-          "$value": {
-            "default": "{color.red.500}",
-            "dark": "{color.red.300}"
-          },
+          "$value": "{feedback.danger.border.color}",
           "$type": "color",
           "$description": "Used for invalid form control (input, textarea) border.",
           "$extensions": {
@@ -1500,6 +1497,21 @@
           }
         }
       },
+      "border": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.1000}",
+            "dark": "{color.neutral.300}"
+          },
+          "$type": "color",
+          "$description": "Used for the border associated with strong feedback.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          }
+        }
+      },
       "text": {
         "color": {
           "$value": "{color.neutral.0}",
@@ -1555,6 +1567,21 @@
           }
         }
       },
+      "border": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.200}",
+            "dark": "{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"
+            ]
+          }
+        }
+      },
       "text": {
         "color": {
           "$value": {
@@ -1604,6 +1631,21 @@
           }
         }
       },
+      "border": {
+        "color": {
+          "$value": {
+            "default": "{color.blue.200}",
+            "dark": "{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"
+            ]
+          }
+        }
+      },
       "text": {
         "color": {
           "$value": {
@@ -1653,6 +1695,21 @@
           }
         }
       },
+      "border": {
+        "color": {
+          "$value": {
+            "default": "{color.green.200}",
+            "dark": "{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"
+            ]
+          }
+        }
+      },
       "text": {
         "color": {
           "$value": {
@@ -1702,6 +1759,21 @@
           }
         }
       },
+      "border": {
+        "color": {
+          "$value": {
+            "default": "{color.orange.200}",
+            "dark": "{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"
+            ]
+          }
+        }
+      },
       "text": {
         "color": {
           "$value": {
@@ -1751,6 +1823,21 @@
           }
         }
       },
+      "border": {
+        "color": {
+          "$value": {
+            "default": "{color.red.500}",
+            "dark": "{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"
+            ]
+          }
+        }
+      },
       "text": {
         "color": {
           "$value": {