@gitlab/ui 126.1.0 → 126.2.0

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

@@ -8047,6 +8047,41 @@
           "color"
         ],
         "cssWithValue": "var(--gl-feedback-danger-background-color)"
+      },
+      "brand": {
+        "key": "{feedback.brand.background.color}",
+        "$value": "#f4f0ff",
+        "$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.50}",
+          "$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": "#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)"
+      },
+      "brand": {
+        "key": "{feedback.brand.border.color}",
+        "$value": "#cbbbf2",
+        "$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.200}",
+          "$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": "#bfbfc3",
@@ -15924,7 +16192,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": {
@@ -24062,6 +24330,41 @@
           "color"
         ],
         "cssWithValue": "var(--gl-feedback-danger-icon-color)"
+      },
+      "brand": {
+        "key": "{feedback.brand.icon.color}",
+        "$value": "#6a4fb4",
+        "$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.600}",
+          "$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": "#5c47a6",
+        "$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.700}",
+          "$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": {

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": {
@@ -1782,6 +1869,70 @@
           }
         }
       }
+    },
+    "brand": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.purple.50}",
+            "dark": "{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"
+            ]
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "$value": {
+            "default": "{color.purple.200}",
+            "dark": "{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"
+            ]
+          }
+        }
+      },
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.purple.700}",
+            "dark": "{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"
+            ]
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "$value": {
+            "default": "{color.purple.600}",
+            "dark": "{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"
+            ]
+          }
+        }
+      }
     }
   },
   "focus-ring": {

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

@@ -1180,24 +1180,34 @@ 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_FEEDBACK_BRAND_BACKGROUND_COLOR = '#27243e';
+export const GL_FEEDBACK_BRAND_BORDER_COLOR = '#6a4fb4';
+export const GL_FEEDBACK_BRAND_TEXT_COLOR = '#cbbbf2';
+export const GL_FEEDBACK_BRAND_ICON_COLOR = '#ac93e6';
 export const GL_FOCUS_RING_OUTER_COLOR = '#428fdc';
 export const GL_FOCUS_RING_INNER_COLOR = '#18171d';
 export const GL_HIGHLIGHT_MATCH_BACKGROUND_COLOR = '#e9be74';

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

@@ -1180,24 +1180,34 @@ 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_FEEDBACK_BRAND_BACKGROUND_COLOR = '#f4f0ff';
+export const GL_FEEDBACK_BRAND_BORDER_COLOR = '#cbbbf2';
+export const GL_FEEDBACK_BRAND_TEXT_COLOR = '#5c47a6';
+export const GL_FEEDBACK_BRAND_ICON_COLOR = '#6a4fb4';
 export const GL_FOCUS_RING_OUTER_COLOR = '#1f75cb';
 export const GL_FOCUS_RING_INNER_COLOR = '#fff';
 export const GL_HIGHLIGHT_MATCH_BACKGROUND_COLOR = '#ab6100';