@gitlab/ui 137.1.2 → 137.2.1

package/src/tokens/build/figma/constants.dark.json

@@ -1807,12 +1807,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
-        0.984313725490196,
-        0.9803921568627451,
-        0.9921568627450981
+        0.9686274509803922,
+        0.9686274509803922,
+        0.9607843137254902
       ],
       "alpha": 1,
-      "hex": "#fbfafd"
+      "hex": "#f7f7f5"
     },
     "$type": "color",
     "$extensions": {
@@ -1824,11 +1824,11 @@
       "colorSpace": "srgb",
       "components": [
         0.9254901960784314,
-        0.9254901960784314,
-        0.9372549019607843
+        0.9215686274509803,
+        0.9176470588235294
       ],
       "alpha": 1,
-      "hex": "#ececef"
+      "hex": "#ecebea"
     },
     "$type": "color",
     "$extensions": {
@@ -1840,11 +1840,11 @@
       "colorSpace": "srgb",
       "components": [
         0.8627450980392157,
-        0.8627450980392157,
-        0.8705882352941177
+        0.8588235294117647,
+        0.8509803921568627
       ],
       "alpha": 1,
-      "hex": "#dcdcde"
+      "hex": "#dcdbd9"
     },
     "$type": "color",
     "$extensions": {
@@ -1855,12 +1855,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
+        0.7568627450980392,
         0.7490196078431373,
-        0.7490196078431373,
-        0.7647058823529411
+        0.7450980392156863
       ],
       "alpha": 1,
-      "hex": "#bfbfc3"
+      "hex": "#c1bfbe"
     },
     "$type": "color",
     "$extensions": {
@@ -1871,12 +1871,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
-        0.6431372549019608,
+        0.6470588235294118,
         0.6392156862745098,
-        0.6588235294117647
+        0.6392156862745098
       ],
       "alpha": 1,
-      "hex": "#a4a3a8"
+      "hex": "#a5a3a3"
     },
     "$type": "color",
     "$extensions": {
@@ -1887,12 +1887,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
-        0.5372549019607843,
+        0.5411764705882353,
         0.5333333333333333,
-        0.5529411764705883
+        0.5333333333333333
       ],
       "alpha": 1,
-      "hex": "#89888d"
+      "hex": "#8a8888"
     },
     "$type": "color",
     "$extensions": {
@@ -1903,12 +1903,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
-        0.45098039215686275,
+        0.4549019607843137,
         0.4470588235294118,
-        0.47058823529411764
+        0.45098039215686275
       ],
       "alpha": 1,
-      "hex": "#737278"
+      "hex": "#747273"
     },
     "$type": "color",
     "$extensions": {
@@ -1919,12 +1919,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
-        0.3843137254901961,
+        0.39215686274509803,
         0.3803921568627451,
-        0.40784313725490196
+        0.38823529411764707
       ],
       "alpha": 1,
-      "hex": "#626168"
+      "hex": "#646163"
     },
     "$type": "color",
     "$extensions": {
@@ -1935,12 +1935,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
-        0.2980392156862745,
+        0.30196078431372547,
         0.29411764705882354,
-        0.3176470588235294
+        0.3058823529411765
       ],
       "alpha": 1,
-      "hex": "#4c4b51"
+      "hex": "#4d4b4e"
     },
     "$type": "color",
     "$extensions": {
@@ -1953,10 +1953,10 @@
       "components": [
         0.22745098039215686,
         0.2196078431372549,
-        0.24705882352941178
+        0.23921568627450981
       ],
       "alpha": 1,
-      "hex": "#3a383f"
+      "hex": "#3a383d"
     },
     "$type": "color",
     "$extensions": {
@@ -2000,11 +2000,11 @@
       "colorSpace": "srgb",
       "components": [
         0.0196078431372549,
-        0.0196078431372549,
-        0.023529411764705882
+        0.01568627450980392,
+        0.03137254901960784
       ],
       "alpha": 1,
-      "hex": "#050506"
+      "hex": "#050408"
     },
     "$type": "color",
     "$extensions": {

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

@@ -1810,12 +1810,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
-        0.984313725490196,
-        0.9803921568627451,
-        0.9921568627450981
+        0.9686274509803922,
+        0.9686274509803922,
+        0.9607843137254902
       ],
       "alpha": 1,
-      "hex": "#fbfafd"
+      "hex": "#f7f7f5"
     },
     "$type": "color",
     "$extensions": {
@@ -1827,11 +1827,11 @@
       "colorSpace": "srgb",
       "components": [
         0.9254901960784314,
-        0.9254901960784314,
-        0.9372549019607843
+        0.9215686274509803,
+        0.9176470588235294
       ],
       "alpha": 1,
-      "hex": "#ececef"
+      "hex": "#ecebea"
     },
     "$type": "color",
     "$extensions": {
@@ -1843,11 +1843,11 @@
       "colorSpace": "srgb",
       "components": [
         0.8627450980392157,
-        0.8627450980392157,
-        0.8705882352941177
+        0.8588235294117647,
+        0.8509803921568627
       ],
       "alpha": 1,
-      "hex": "#dcdcde"
+      "hex": "#dcdbd9"
     },
     "$type": "color",
     "$extensions": {
@@ -1858,12 +1858,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
+        0.7568627450980392,
         0.7490196078431373,
-        0.7490196078431373,
-        0.7647058823529411
+        0.7450980392156863
       ],
       "alpha": 1,
-      "hex": "#bfbfc3"
+      "hex": "#c1bfbe"
     },
     "$type": "color",
     "$extensions": {
@@ -1874,12 +1874,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
-        0.6431372549019608,
+        0.6470588235294118,
         0.6392156862745098,
-        0.6588235294117647
+        0.6392156862745098
       ],
       "alpha": 1,
-      "hex": "#a4a3a8"
+      "hex": "#a5a3a3"
     },
     "$type": "color",
     "$extensions": {
@@ -1890,12 +1890,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
-        0.5372549019607843,
+        0.5411764705882353,
         0.5333333333333333,
-        0.5529411764705883
+        0.5333333333333333
       ],
       "alpha": 1,
-      "hex": "#89888d"
+      "hex": "#8a8888"
     },
     "$type": "color",
     "$extensions": {
@@ -1906,12 +1906,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
-        0.45098039215686275,
+        0.4549019607843137,
         0.4470588235294118,
-        0.47058823529411764
+        0.45098039215686275
       ],
       "alpha": 1,
-      "hex": "#737278"
+      "hex": "#747273"
     },
     "$type": "color",
     "$extensions": {
@@ -1922,12 +1922,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
-        0.3843137254901961,
+        0.39215686274509803,
         0.3803921568627451,
-        0.40784313725490196
+        0.38823529411764707
       ],
       "alpha": 1,
-      "hex": "#626168"
+      "hex": "#646163"
     },
     "$type": "color",
     "$extensions": {
@@ -1938,12 +1938,12 @@
     "$value": {
       "colorSpace": "srgb",
       "components": [
-        0.2980392156862745,
+        0.30196078431372547,
         0.29411764705882354,
-        0.3176470588235294
+        0.3058823529411765
       ],
       "alpha": 1,
-      "hex": "#4c4b51"
+      "hex": "#4d4b4e"
     },
     "$type": "color",
     "$extensions": {
@@ -1956,10 +1956,10 @@
       "components": [
         0.22745098039215686,
         0.2196078431372549,
-        0.24705882352941178
+        0.23921568627450981
       ],
       "alpha": 1,
-      "hex": "#3a383f"
+      "hex": "#3a383d"
     },
     "$type": "color",
     "$extensions": {
@@ -2003,11 +2003,11 @@
       "colorSpace": "srgb",
       "components": [
         0.0196078431372549,
-        0.0196078431372549,
-        0.023529411764705882
+        0.01568627450980392,
+        0.03137254901960784
       ],
       "alpha": 1,
-      "hex": "#050506"
+      "hex": "#050408"
     },
     "$type": "color",
     "$extensions": {

package/src/tokens/build/figma/mode.dark.json

@@ -123,7 +123,7 @@
     }
   },
   "🔒/alert-neutral-background-color": {
-    "$value": "{background-color-subtle}",
+    "$value": "{feedback-neutral-background-color}",
     "$type": "color",
     "$description": "Used for the background color of a neutral alert.",
     "$extensions": {
@@ -133,10 +133,20 @@
       ]
     }
   },
+  "🔒/alert-neutral-border-color": {
+    "$value": "{feedback-neutral-border-color}",
+    "$type": "color",
+    "$description": "Used for the border color of a neutral alert.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "🔒/alert-neutral-border-top-color": {
     "$value": "{color-neutral-400}",
     "$type": "color",
-    "$description": "Used for the border center color of a neutral alert.",
+    "$description": "Used for the border color of a neutral alert.",
     "$extensions": {
       "com.figma.scopes": [
         "STROKE_COLOR"
@@ -154,7 +164,7 @@
     }
   },
   "🔒/alert-info-title-color": {
-    "$value": "{color-blue-300}",
+    "$value": "{color-blue-200}",
     "$type": "color",
     "$description": "Used for the title color of an info alert.",
     "$extensions": {
@@ -164,7 +174,7 @@
     }
   },
   "🔒/alert-info-background-color": {
-    "$value": "{background-color-subtle}",
+    "$value": "{feedback-info-background-color}",
     "$type": "color",
     "$description": "Used for the background color of an info alert.",
     "$extensions": {
@@ -174,6 +184,16 @@
       ]
     }
   },
+  "🔒/alert-info-border-color": {
+    "$value": "{feedback-info-border-color}",
+    "$type": "color",
+    "$description": "Used for the border color of an info alert.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "🔒/alert-info-border-top-color": {
     "$value": "{color-blue-400}",
     "$type": "color",
@@ -190,7 +210,7 @@
     "$description": "Used for the border bottom color of an info alert."
   },
   "🔒/alert-success-title-color": {
-    "$value": "{color-green-300}",
+    "$value": "{color-green-200}",
     "$type": "color",
     "$description": "Used for the title color of a success alert.",
     "$extensions": {
@@ -200,7 +220,7 @@
     }
   },
   "🔒/alert-success-background-color": {
-    "$value": "{background-color-subtle}",
+    "$value": "{feedback-success-background-color}",
     "$type": "color",
     "$description": "Used for the background color of a success alert.",
     "$extensions": {
@@ -210,6 +230,16 @@
       ]
     }
   },
+  "🔒/alert-success-border-color": {
+    "$value": "{feedback-success-border-color}",
+    "$type": "color",
+    "$description": "Used for the border color of a success alert.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "🔒/alert-success-border-top-color": {
     "$value": "{color-green-400}",
     "$type": "color",
@@ -231,7 +261,7 @@
     }
   },
   "🔒/alert-warning-title-color": {
-    "$value": "{color-orange-300}",
+    "$value": "{color-orange-200}",
     "$type": "color",
     "$description": "Used for the title color of a warning alert.",
     "$extensions": {
@@ -241,7 +271,7 @@
     }
   },
   "🔒/alert-warning-background-color": {
-    "$value": "{background-color-subtle}",
+    "$value": "{feedback-warning-background-color}",
     "$type": "color",
     "$description": "Used for the background color of a warning alert.",
     "$extensions": {
@@ -251,6 +281,16 @@
       ]
     }
   },
+  "🔒/alert-warning-border-color": {
+    "$value": "{feedback-warning-border-color}",
+    "$type": "color",
+    "$description": "Used for the border color of a warning alert.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "🔒/alert-warning-border-top-color": {
     "$value": "{color-orange-400}",
     "$type": "color",
@@ -272,7 +312,7 @@
     }
   },
   "🔒/alert-danger-title-color": {
-    "$value": "{color-red-300}",
+    "$value": "{color-red-200}",
     "$type": "color",
     "$description": "Used for the title color of a danger alert.",
     "$extensions": {
@@ -282,7 +322,7 @@
     }
   },
   "🔒/alert-danger-background-color": {
-    "$value": "{background-color-subtle}",
+    "$value": "{feedback-danger-background-color}",
     "$type": "color",
     "$description": "Used for the background color of a danger alert.",
     "$extensions": {
@@ -292,6 +332,16 @@
       ]
     }
   },
+  "🔒/alert-danger-border-color": {
+    "$value": "{feedback-danger-border-color}",
+    "$type": "color",
+    "$description": "Used for the border color of a danger alert.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "🔒/alert-danger-border-top-color": {
     "$value": "{color-red-400}",
     "$type": "color",
@@ -6857,7 +6907,7 @@
     }
   },
   "feedback-neutral-icon-color": {
-    "$value": "{color-neutral-300}",
+    "$value": "{color-neutral-200}",
     "$type": "color",
     "$description": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.",
     "$extensions": {
@@ -6899,7 +6949,7 @@
     }
   },
   "feedback-info-icon-color": {
-    "$value": "{color-blue-300}",
+    "$value": "{color-blue-200}",
     "$type": "color",
     "$description": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
     "$extensions": {
@@ -6941,7 +6991,7 @@
     }
   },
   "feedback-success-icon-color": {
-    "$value": "{color-green-300}",
+    "$value": "{color-green-200}",
     "$type": "color",
     "$description": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.",
     "$extensions": {
@@ -6983,7 +7033,7 @@
     }
   },
   "feedback-warning-icon-color": {
-    "$value": "{color-orange-300}",
+    "$value": "{color-orange-200}",
     "$type": "color",
     "$description": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.",
     "$extensions": {
@@ -7025,7 +7075,7 @@
     }
   },
   "feedback-danger-icon-color": {
-    "$value": "{color-red-300}",
+    "$value": "{color-red-200}",
     "$type": "color",
     "$description": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
     "$extensions": {
@@ -7067,7 +7117,7 @@
     }
   },
   "feedback-brand-icon-color": {
-    "$value": "{color-purple-300}",
+    "$value": "{color-purple-200}",
     "$type": "color",
     "$description": "Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab.",
     "$extensions": {

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

@@ -133,10 +133,20 @@
       ]
     }
   },
+  "🔒/alert-neutral-border-color": {
+    "$value": "{feedback-neutral-border-color}",
+    "$type": "color",
+    "$description": "Used for the border color of a neutral alert.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "🔒/alert-neutral-border-top-color": {
     "$value": "{color-alpha-0}",
     "$type": "color",
-    "$description": "Used for the border center color of a neutral alert.",
+    "$description": "Used for the border color of a neutral alert.",
     "$extensions": {
       "com.figma.scopes": [
         "STROKE_COLOR"
@@ -174,6 +184,16 @@
       ]
     }
   },
+  "🔒/alert-info-border-color": {
+    "$value": "{feedback-info-border-color}",
+    "$type": "color",
+    "$description": "Used for the border color of an info alert.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "🔒/alert-info-border-top-color": {
     "$value": "{color-alpha-0}",
     "$type": "color",
@@ -210,6 +230,16 @@
       ]
     }
   },
+  "🔒/alert-success-border-color": {
+    "$value": "{feedback-success-border-color}",
+    "$type": "color",
+    "$description": "Used for the border color of a success alert.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "🔒/alert-success-border-top-color": {
     "$value": "{color-alpha-0}",
     "$type": "color",
@@ -251,6 +281,16 @@
       ]
     }
   },
+  "🔒/alert-warning-border-color": {
+    "$value": "{feedback-warning-border-color}",
+    "$type": "color",
+    "$description": "Used for the border color of a warning alert.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "🔒/alert-warning-border-top-color": {
     "$value": "{color-alpha-0}",
     "$type": "color",
@@ -292,6 +332,16 @@
       ]
     }
   },
+  "🔒/alert-danger-border-color": {
+    "$value": "{feedback-danger-border-color}",
+    "$type": "color",
+    "$description": "Used for the border color of a danger alert.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "🔒/alert-danger-border-top-color": {
     "$value": "{color-alpha-0}",
     "$type": "color",
@@ -5996,7 +6046,7 @@
     }
   },
   "action-danger-foreground-color-default": {
-    "$value": "{color-red-500}",
+    "$value": "{color-red-600}",
     "$type": "color",
     "$description": "Used for the foreground of a danger (destructive) action in the default state.",
     "$extensions": {
@@ -6007,7 +6057,7 @@
     }
   },
   "action-danger-foreground-color-hover": {
-    "$value": "{color-red-700}",
+    "$value": "{color-red-800}",
     "$type": "color",
     "$description": "Used for the foreground of a danger (destructive) action in the hover state.",
     "$extensions": {
@@ -6029,7 +6079,7 @@
     }
   },
   "action-danger-foreground-color-active": {
-    "$value": "{color-red-900}",
+    "$value": "{color-red-950}",
     "$type": "color",
     "$description": "Used for the foreground of a danger (destructive) action in the active state.",
     "$extensions": {