@gitlab/ui 126.0.2 → 126.1.1

package/src/tokens/build/js/tokens.dark.js

@@ -749,6 +749,7 @@ export const GL_CHART_ZOOM_FILLER_COLOR = 'rgba(255, 255, 255, 0.16)';
 export const GL_CHART_ZOOM_HANDLE_COLOR = '#bfbfc3';
 export const GL_DATEPICKER_BACKGROUND_COLOR = '#28272d';
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#18171d';
+export const GL_DRAWER_BORDER_RADIUS = '1rem';
 export const GL_DROPDOWN_BACKGROUND_COLOR = '#28272d';
 export const GL_DROPDOWN_BORDER_COLOR = '#4c4b51';
 export const GL_DROPDOWN_BORDER_RADIUS = '0.5rem';
@@ -825,7 +826,7 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#cbe2f9';
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#f5d9a8';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#284779';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#693c14';
-export const GL_MODAL_BORDER_RADIUS = '0.5rem';
+export const GL_MODAL_BORDER_RADIUS = '1rem';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#63a6e9';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#52b87a';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#d99530';
@@ -1179,22 +1180,28 @@ export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#18171d';
 export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#89888d';
 export const GL_FEEDBACK_BORDER_RADIUS = '0.5rem';
 export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#3a383f';
+export const GL_FEEDBACK_STRONG_BORDER_COLOR = '#a4a3a8';
 export const GL_FEEDBACK_STRONG_TEXT_COLOR = '#fff';
 export const GL_FEEDBACK_STRONG_ICON_COLOR = '#fff';
 export const GL_FEEDBACK_STRONG_LINK_COLOR = '#63a6e9';
 export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#28272d';
+export const GL_FEEDBACK_NEUTRAL_BORDER_COLOR = '#626168';
 export const GL_FEEDBACK_NEUTRAL_TEXT_COLOR = '#bfbfc3';
 export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#a4a3a8';
 export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#1d283e';
+export const GL_FEEDBACK_INFO_BORDER_COLOR = '#2f68b4';
 export const GL_FEEDBACK_INFO_TEXT_COLOR = '#9dc7f1';
 export const GL_FEEDBACK_INFO_ICON_COLOR = '#63a6e9';
 export const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#1e3e28';
+export const GL_FEEDBACK_SUCCESS_BORDER_COLOR = '#2f7549';
 export const GL_FEEDBACK_SUCCESS_TEXT_COLOR = '#91d4a8';
 export const GL_FEEDBACK_SUCCESS_ICON_COLOR = '#52b87a';
 export const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#532e16';
+export const GL_FEEDBACK_WARNING_BORDER_COLOR = '#995715';
 export const GL_FEEDBACK_WARNING_TEXT_COLOR = '#e9be74';
 export const GL_FEEDBACK_WARNING_ICON_COLOR = '#d99530';
 export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#582014';
+export const GL_FEEDBACK_DANGER_BORDER_COLOR = '#f6806d';
 export const GL_FEEDBACK_DANGER_TEXT_COLOR = '#fcb5aa';
 export const GL_FEEDBACK_DANGER_ICON_COLOR = '#f6806d';
 export const GL_FOCUS_RING_OUTER_COLOR = '#428fdc';

package/src/tokens/build/js/tokens.js

@@ -749,6 +749,7 @@ export const GL_CHART_ZOOM_FILLER_COLOR = 'rgba(05, 05, 06, 0.08)';
 export const GL_CHART_ZOOM_HANDLE_COLOR = '#626168';
 export const GL_DATEPICKER_BACKGROUND_COLOR = '#fff';
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#fff';
+export const GL_DRAWER_BORDER_RADIUS = '1rem';
 export const GL_DROPDOWN_BACKGROUND_COLOR = '#fff';
 export const GL_DROPDOWN_BORDER_COLOR = '#bfbfc3';
 export const GL_DROPDOWN_BORDER_RADIUS = '0.5rem';
@@ -825,7 +826,7 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#284779';
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#693c14';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#cbe2f9';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#f5d9a8';
-export const GL_MODAL_BORDER_RADIUS = '0.5rem';
+export const GL_MODAL_BORDER_RADIUS = '1rem';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#1f75cb';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#108548';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#ab6100';
@@ -1179,22 +1180,28 @@ export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff';
 export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278';
 export const GL_FEEDBACK_BORDER_RADIUS = '0.5rem';
 export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#3a383f';
+export const GL_FEEDBACK_STRONG_BORDER_COLOR = '#050506';
 export const GL_FEEDBACK_STRONG_TEXT_COLOR = '#fff';
 export const GL_FEEDBACK_STRONG_ICON_COLOR = '#fff';
 export const GL_FEEDBACK_STRONG_LINK_COLOR = '#63a6e9';
 export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#ececef';
+export const GL_FEEDBACK_NEUTRAL_BORDER_COLOR = '#bfbfc3';
 export const GL_FEEDBACK_NEUTRAL_TEXT_COLOR = '#4c4b51';
 export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#626168';
 export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#e9f3fc';
+export const GL_FEEDBACK_INFO_BORDER_COLOR = '#9dc7f1';
 export const GL_FEEDBACK_INFO_TEXT_COLOR = '#2f5ca0';
 export const GL_FEEDBACK_INFO_ICON_COLOR = '#2f68b4';
 export const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#ecf4ee';
+export const GL_FEEDBACK_SUCCESS_BORDER_COLOR = '#91d4a8';
 export const GL_FEEDBACK_SUCCESS_TEXT_COLOR = '#306440';
 export const GL_FEEDBACK_SUCCESS_ICON_COLOR = '#2f7549';
 export const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#fdf1dd';
+export const GL_FEEDBACK_WARNING_BORDER_COLOR = '#e9be74';
 export const GL_FEEDBACK_WARNING_TEXT_COLOR = '#894b16';
 export const GL_FEEDBACK_WARNING_ICON_COLOR = '#995715';
 export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#fcf1ef';
+export const GL_FEEDBACK_DANGER_BORDER_COLOR = '#dd2b0e';
 export const GL_FEEDBACK_DANGER_TEXT_COLOR = '#a32c12';
 export const GL_FEEDBACK_DANGER_ICON_COLOR = '#c02f12';
 export const GL_FOCUS_RING_OUTER_COLOR = '#1f75cb';

package/src/tokens/build/json/tokens.dark.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.300}",
+            "$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": "#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}",
@@ -35970,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}",
@@ -36078,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}",
@@ -36186,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}",
@@ -36294,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}",
@@ -36402,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}",