@gitlab/ui 126.1.1 → 126.3.0

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

@@ -36711,6 +36711,148 @@
           ]
         }
       }
+    },
+    "brand": {
+      "background": {
+        "color": {
+          "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"
+          ]
+        }
+      },
+      "border": {
+        "color": {
+          "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"
+          ]
+        }
+      },
+      "text": {
+        "color": {
+          "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"
+          ]
+        }
+      },
+      "icon": {
+        "color": {
+          "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"
+          ]
+        }
+      }
     }
   },
   "focus-ring": {

package/src/tokens/build/scss/_tokens.dark.scss

@@ -961,6 +961,10 @@ $gl-feedback-danger-background-color: $gl-color-red-900; // Used for the backgro
 $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-feedback-brand-background-color: $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: $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: $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: $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: $gl-color-blue-400; // Used for the outer color portion of the focus ring.
 $gl-highlight-match-background-color: $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: $gl-color-neutral-950; // Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status.

package/src/tokens/build/scss/_tokens.scss

@@ -944,6 +944,10 @@ $gl-feedback-danger-background-color: $gl-color-red-50; // Used for the backgrou
 $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-feedback-brand-background-color: $gl-color-purple-50; // Used for the background of a brand-related feedback item when highlighting information that pertains to GitLab.
+$gl-feedback-brand-border-color: $gl-color-purple-200; // Used for the border of a brand-related feedback item when highlighting information that pertains to GitLab.
+$gl-feedback-brand-text-color: $gl-color-purple-700; // Used for the text of a brand-related feedback item when highlighting information that pertains to GitLab.
+$gl-feedback-brand-icon-color: $gl-color-purple-600; // Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab.
 $gl-focus-ring-outer-color: $gl-color-blue-500; // Used for the outer color portion of the focus ring.
 $gl-highlight-match-background-color: $gl-color-orange-500; // 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: $gl-color-neutral-0; // Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -1118,6 +1118,10 @@ $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-feedback-brand-background-color: var(--gl-feedback-brand-background-color);
+$gl-feedback-brand-border-color: var(--gl-feedback-brand-border-color);
+$gl-feedback-brand-text-color: var(--gl-feedback-brand-text-color);
+$gl-feedback-brand-icon-color: var(--gl-feedback-brand-icon-color);
 $gl-focus-ring-outer-color: var(--gl-focus-ring-outer-color);
 $gl-focus-ring-inner-color: var(--gl-focus-ring-inner-color);
 $gl-highlight-match-background-color: var(--gl-highlight-match-background-color);

package/src/tokens/build/tailwind/tokens.cjs

@@ -328,6 +328,7 @@ const feedbackBackgroundColors = {
   'feedback-success': 'var(--gl-feedback-success-background-color)',
   'feedback-warning': 'var(--gl-feedback-warning-background-color)',
   'feedback-danger': 'var(--gl-feedback-danger-background-color)',
+  'feedback-brand': 'var(--gl-feedback-brand-background-color)',
 };
 const feedbackBorderColors = {
   'feedback-strong': 'var(--gl-feedback-strong-border-color)',
@@ -336,6 +337,7 @@ const feedbackBorderColors = {
   'feedback-success': 'var(--gl-feedback-success-border-color)',
   'feedback-warning': 'var(--gl-feedback-warning-border-color)',
   'feedback-danger': 'var(--gl-feedback-danger-border-color)',
+  'feedback-brand': 'var(--gl-feedback-brand-border-color)',
 };
 const feedbackTextColors = {
   'feedback-strong': 'var(--gl-feedback-strong-text-color)',
@@ -344,6 +346,7 @@ const feedbackTextColors = {
   'feedback-success': 'var(--gl-feedback-success-text-color)',
   'feedback-warning': 'var(--gl-feedback-warning-text-color)',
   'feedback-danger': 'var(--gl-feedback-danger-text-color)',
+  'feedback-brand': 'var(--gl-feedback-brand-text-color)',
 };
 const feedbackIconColors = {
   'feedback-strong': 'var(--gl-feedback-strong-icon-color)',
@@ -352,6 +355,7 @@ const feedbackIconColors = {
   'feedback-success': 'var(--gl-feedback-success-icon-color)',
   'feedback-warning': 'var(--gl-feedback-warning-icon-color)',
   'feedback-danger': 'var(--gl-feedback-danger-icon-color)',
+  'feedback-brand': 'var(--gl-feedback-brand-icon-color)',
 };
 const spacingScale = {
   0: 'var(--gl-spacing-scale-0)',

package/src/tokens/semantic/feedback.tokens.json

@@ -398,6 +398,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"
+            ]
+          }
+        }
+      }
     }
   }
 }

package/translations.js

@@ -29,8 +29,6 @@ export default {
   'GlPagination.labelPage': 'Go to page %{page}',
   'GlPagination.labelPrevPage': 'Go to previous page',
   'GlPagination.nav': 'Pagination',
-  'GlPagination.nextText': 'Next',
-  'GlPagination.prevText': 'Previous',
   'GlProgressBar.ariaLabel': 'Progress bar',
   'GlSearchBoxByType.clearButtonTitle': 'Clear',
   'GlSearchBoxByType.input.placeholder': 'Search',