@gitlab/ui 126.1.0 → 126.2.0

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

@@ -933,31 +933,40 @@
   --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-feedback-brand-background-color: var(--gl-color-purple-950); /** Used for the background of a brand-related feedback item when highlighting information that pertains to GitLab. */
+  --gl-feedback-brand-border-color: var(--gl-color-purple-600); /** Used for the border of a brand-related feedback item when highlighting information that pertains to GitLab. */
+  --gl-feedback-brand-text-color: var(--gl-color-purple-200); /** Used for the text of a brand-related feedback item when highlighting information that pertains to GitLab. */
+  --gl-feedback-brand-icon-color: var(--gl-color-purple-300); /** Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab. */
   --gl-focus-ring-outer-color: var(--gl-color-blue-400); /** Used for the outer color portion of the focus ring. */
   --gl-highlight-match-background-color: var(--gl-color-orange-200); /** Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning. */
   --gl-highlight-match-text-color: var(--gl-color-neutral-950); /** Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status. */
@@ -1212,6 +1221,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

@@ -8047,6 +8047,41 @@
           "color"
         ],
         "cssWithValue": "var(--gl-feedback-danger-background-color)"
+      },
+      "brand": {
+        "key": "{feedback.brand.background.color}",
+        "$value": "#27243e",
+        "$type": "color",
+        "$description": "Used for the background of a brand-related feedback item when highlighting information that pertains to GitLab.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/feedback.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{color.purple.950}",
+          "$type": "color",
+          "$description": "Used for the background of a brand-related feedback item when highlighting information that pertains to GitLab.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          },
+          "key": "{feedback.brand.background.color}"
+        },
+        "name": "FEEDBACK_BRAND_BACKGROUND_COLOR",
+        "attributes": {},
+        "path": [
+          "feedback",
+          "brand",
+          "background",
+          "color"
+        ],
+        "cssWithValue": "var(--gl-feedback-brand-background-color)"
       }
     },
     "dropdown": {
@@ -15774,6 +15809,239 @@
         "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)"
+      },
+      "brand": {
+        "key": "{feedback.brand.border.color}",
+        "$value": "#6a4fb4",
+        "$type": "color",
+        "$description": "Used for the border of a brand-related feedback item when highlighting information that pertains to GitLab.",
+        "$extensions": {
+          "com.figma.scope": [
+            "STROKE_COLOR"
+          ]
+        },
+        "filePath": "src/tokens/semantic/feedback.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{color.purple.600}",
+          "$type": "color",
+          "$description": "Used for the border of a brand-related feedback item when highlighting information that pertains to GitLab.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "key": "{feedback.brand.border.color}"
+        },
+        "name": "FEEDBACK_BRAND_BORDER_COLOR",
+        "attributes": {},
+        "path": [
+          "feedback",
+          "brand",
+          "border",
+          "color"
+        ],
+        "cssWithValue": "var(--gl-feedback-brand-border-color)"
+      }
+    },
     "dropdown": {
       "key": "{dropdown.border.color}",
       "$value": "#4c4b51",
@@ -15924,7 +16192,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": {
@@ -24062,6 +24330,41 @@
           "color"
         ],
         "cssWithValue": "var(--gl-feedback-danger-icon-color)"
+      },
+      "brand": {
+        "key": "{feedback.brand.icon.color}",
+        "$value": "#ac93e6",
+        "$type": "color",
+        "$description": "Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab.",
+        "$extensions": {
+          "com.figma.scope": [
+            "SHAPE_FILL",
+            "TEXT_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/feedback.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{color.purple.300}",
+          "$type": "color",
+          "$description": "Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab.",
+          "$extensions": {
+            "com.figma.scope": [
+              "SHAPE_FILL",
+              "TEXT_FILL"
+            ]
+          },
+          "key": "{feedback.brand.icon.color}"
+        },
+        "name": "FEEDBACK_BRAND_ICON_COLOR",
+        "attributes": {},
+        "path": [
+          "feedback",
+          "brand",
+          "icon",
+          "color"
+        ],
+        "cssWithValue": "var(--gl-feedback-brand-icon-color)"
       }
     }
   },
@@ -32139,6 +32442,39 @@
           "color"
         ],
         "cssWithValue": "var(--gl-feedback-danger-text-color)"
+      },
+      "brand": {
+        "key": "{feedback.brand.text.color}",
+        "$value": "#cbbbf2",
+        "$type": "color",
+        "$description": "Used for the text of a brand-related feedback item when highlighting information that pertains to GitLab.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/feedback.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{color.purple.200}",
+          "$type": "color",
+          "$description": "Used for the text of a brand-related feedback item when highlighting information that pertains to GitLab.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          },
+          "key": "{feedback.brand.text.color}"
+        },
+        "name": "FEEDBACK_BRAND_TEXT_COLOR",
+        "attributes": {},
+        "path": [
+          "feedback",
+          "brand",
+          "text",
+          "color"
+        ],
+        "cssWithValue": "var(--gl-feedback-brand-text-color)"
       }
     },
     "primary": {