@gitlab/ui 126.0.2 → 126.1.1

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

@@ -21412,6 +21412,41 @@
       }
     }
   },
+  "drawer": {
+    "border": {
+      "radius": {
+        "key": "{drawer.border.radius}",
+        "$value": "1rem",
+        "$type": "dimension",
+        "$description": "Used for drawer border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "filePath": "src/tokens/contextual/drawer.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{border.radius.2xl}",
+          "$type": "dimension",
+          "$description": "Used for drawer border radius.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          },
+          "key": "{drawer.border.radius}"
+        },
+        "name": "DRAWER_BORDER_RADIUS",
+        "attributes": {},
+        "path": [
+          "drawer",
+          "border",
+          "radius"
+        ]
+      }
+    }
+  },
   "dropdown": {
     "background": {
       "color": {
@@ -24240,7 +24275,7 @@
     "border": {
       "radius": {
         "key": "{modal.border.radius}",
-        "$value": "0.5rem",
+        "$value": "1rem",
         "$type": "dimension",
         "$description": "Used for modal border radius.",
         "$extensions": {
@@ -24251,7 +24286,7 @@
         "filePath": "src/tokens/contextual/modal.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.lg}",
+          "$value": "{border.radius.2xl}",
           "$type": "dimension",
           "$description": "Used for modal border radius.",
           "$extensions": {
@@ -35430,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": {
@@ -35828,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}",
@@ -35970,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}",
@@ -36078,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}",
@@ -36186,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}",
@@ -36294,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}",
@@ -36402,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.
@@ -1157,6 +1162,7 @@ $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover;
 $gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
 $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
+$gl-drawer-border-radius: $gl-border-radius-2xl; // Used for drawer border radius.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-dropdown-border-color: $gl-border-color-default; // Used for the border of a dropdown.
 $gl-dropdown-border-radius: $gl-border-radius-lg; // Used for the border radius of a dropdown.
@@ -1169,7 +1175,7 @@ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color
 $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
-$gl-modal-border-radius: $gl-border-radius-lg; // Used for modal border radius.
+$gl-modal-border-radius: $gl-border-radius-2xl; // Used for modal border radius.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -1209,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.
@@ -1150,6 +1155,7 @@ $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover;
 $gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
 $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
+$gl-drawer-border-radius: $gl-border-radius-2xl; // Used for drawer border radius.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-dropdown-border-color: $gl-border-color-strong; // Used for the border of a dropdown.
 $gl-dropdown-border-radius: $gl-border-radius-lg; // Used for the border radius of a dropdown.
@@ -1162,7 +1168,7 @@ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color
 $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
-$gl-modal-border-radius: $gl-border-radius-lg; // Used for modal border radius.
+$gl-modal-border-radius: $gl-border-radius-2xl; // Used for modal border radius.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -1203,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

@@ -663,6 +663,7 @@ $gl-chart-zoom-filler-color: var(--gl-chart-zoom-filler-color);
 $gl-chart-zoom-handle-color: var(--gl-chart-zoom-handle-color);
 $gl-datepicker-background-color: var(--gl-datepicker-background-color);
 $gl-datepicker-date-text-color-selected: var(--gl-datepicker-date-text-color-selected);
+$gl-drawer-border-radius: var(--gl-drawer-border-radius);
 $gl-dropdown-background-color: var(--gl-dropdown-background-color);
 $gl-dropdown-border-color: var(--gl-dropdown-border-color);
 $gl-dropdown-border-radius: var(--gl-dropdown-border-radius);
@@ -1093,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: {

package/src/tokens/contextual/drawer.tokens.json

@@ -0,0 +1,16 @@
+{
+  "drawer": {
+    "border": {
+      "radius": {
+        "$value": "{border.radius.2xl}",
+        "$type": "dimension",
+        "$description": "Used for drawer border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        }
+      }
+    }
+  }
+}

package/src/tokens/contextual/modal.tokens.json

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

package/src/tokens/semantic/control.tokens.json

@@ -159,10 +159,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": {