@gitlab/ui 86.4.0 → 86.5.0

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

@@ -535,6 +535,10 @@
   --gl-control-background-color-selected-default: var(--gl-color-blue-500); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
   --gl-control-background-color-disabled: var(--gl-color-neutral-10); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-neutral-0); /* Used for form control (input, radio button, checkbox, textarea) default background. */
+  --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
+  --gl-spinner-segment-color-default: var(--gl-color-neutral-700); /* Used for the animated segment of a loading spinner. */
+  --gl-spinner-track-color-light: var(--gl-color-neutral-800); /* Used for the static track (background) of a loading spinner on a dark background. */
+  --gl-spinner-track-color-default: var(--gl-color-neutral-100); /* Used for the static track (background) of a loading spinner. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-50); /* Used for the animated shimmer effect in a skeleton loader. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-100); /* Used for the skeleton loader background color. */
   --gl-popover-background-color: var(--gl-color-neutral-0); /* Used for the background color of popover. */

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

@@ -535,6 +535,10 @@
   --gl-control-background-color-selected-default: var(--gl-color-blue-400); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
   --gl-control-background-color-disabled: var(--gl-color-neutral-950); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-neutral-900); /* Used for form control (input, radio button, checkbox, textarea) default background. */
+  --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
+  --gl-spinner-segment-color-default: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner. */
+  --gl-spinner-track-color-light: var(--gl-color-neutral-800); /* Used for the static track (background) of a loading spinner on a dark background. */
+  --gl-spinner-track-color-default: var(--gl-color-neutral-800); /* Used for the static track (background) of a loading spinner. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-700); /* Used for the animated shimmer effect in a skeleton loader. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-800); /* Used for the skeleton loader background color. */
   --gl-popover-background-color: var(--gl-color-neutral-900); /* Used for the background color of popover. */

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

@@ -525,6 +525,10 @@ export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER = '#1f1e24'; // Used for th
 export const GL_POPOVER_BACKGROUND_COLOR = '#333238'; // Used for the background color of popover.
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#434248'; // Used for the skeleton loader background color.
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#535158'; // Used for the animated shimmer effect in a skeleton loader.
+export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#434248'; // Used for the static track (background) of a loading spinner.
+export const GL_SPINNER_TRACK_COLOR_LIGHT = '#434248'; // Used for the static track (background) of a loading spinner on a dark background.
+export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#bfbfc3'; // Used for the animated segment of a loading spinner.
+export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animated segment of a loading spinner on a dark background.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#1f1e24'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#428fdc'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.

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

@@ -525,6 +525,10 @@ export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER = '#fff'; // Used for the s
 export const GL_POPOVER_BACKGROUND_COLOR = '#fff'; // Used for the background color of popover.
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#dcdcde'; // Used for the skeleton loader background color.
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#ececef'; // Used for the animated shimmer effect in a skeleton loader.
+export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#dcdcde'; // Used for the static track (background) of a loading spinner.
+export const GL_SPINNER_TRACK_COLOR_LIGHT = '#434248'; // Used for the static track (background) of a loading spinner on a dark background.
+export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#535158'; // Used for the animated segment of a loading spinner.
+export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animated segment of a loading spinner on a dark background.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.

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

@@ -11475,6 +11475,102 @@
       }
     }
   },
+  "spinner": {
+    "track": {
+      "color": {
+        "default": {
+          "value": "#434248",
+          "$type": "color",
+          "comment": "Used for the static track (background) of a loading spinner.",
+          "filePath": "src/tokens/contextual/spinner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.100}",
+              "dark": "{color.neutral.800}"
+            },
+            "$type": "color",
+            "comment": "Used for the static track (background) of a loading spinner."
+          },
+          "name": "SPINNER_TRACK_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "spinner",
+            "track",
+            "color",
+            "default"
+          ]
+        },
+        "light": {
+          "value": "#434248",
+          "$type": "color",
+          "comment": "Used for the static track (background) of a loading spinner on a dark background.",
+          "filePath": "src/tokens/contextual/spinner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.neutral.800}",
+            "$type": "color",
+            "comment": "Used for the static track (background) of a loading spinner on a dark background."
+          },
+          "name": "SPINNER_TRACK_COLOR_LIGHT",
+          "attributes": {},
+          "path": [
+            "spinner",
+            "track",
+            "color",
+            "light"
+          ]
+        }
+      }
+    },
+    "segment": {
+      "color": {
+        "default": {
+          "value": "#bfbfc3",
+          "$type": "color",
+          "comment": "Used for the animated segment of a loading spinner.",
+          "filePath": "src/tokens/contextual/spinner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.700}",
+              "dark": "{color.neutral.200}"
+            },
+            "$type": "color",
+            "comment": "Used for the animated segment of a loading spinner."
+          },
+          "name": "SPINNER_SEGMENT_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "spinner",
+            "segment",
+            "color",
+            "default"
+          ]
+        },
+        "light": {
+          "value": "#bfbfc3",
+          "$type": "color",
+          "comment": "Used for the animated segment of a loading spinner on a dark background.",
+          "filePath": "src/tokens/contextual/spinner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.neutral.200}",
+            "$type": "color",
+            "comment": "Used for the animated segment of a loading spinner on a dark background."
+          },
+          "name": "SPINNER_SEGMENT_COLOR_LIGHT",
+          "attributes": {},
+          "path": [
+            "spinner",
+            "segment",
+            "color",
+            "light"
+          ]
+        }
+      }
+    }
+  },
   "control": {
     "background": {
       "color": {

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

@@ -11475,6 +11475,102 @@
       }
     }
   },
+  "spinner": {
+    "track": {
+      "color": {
+        "default": {
+          "value": "#dcdcde",
+          "$type": "color",
+          "comment": "Used for the static track (background) of a loading spinner.",
+          "filePath": "src/tokens/contextual/spinner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.100}",
+              "dark": "{color.neutral.800}"
+            },
+            "$type": "color",
+            "comment": "Used for the static track (background) of a loading spinner."
+          },
+          "name": "SPINNER_TRACK_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "spinner",
+            "track",
+            "color",
+            "default"
+          ]
+        },
+        "light": {
+          "value": "#434248",
+          "$type": "color",
+          "comment": "Used for the static track (background) of a loading spinner on a dark background.",
+          "filePath": "src/tokens/contextual/spinner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.neutral.800}",
+            "$type": "color",
+            "comment": "Used for the static track (background) of a loading spinner on a dark background."
+          },
+          "name": "SPINNER_TRACK_COLOR_LIGHT",
+          "attributes": {},
+          "path": [
+            "spinner",
+            "track",
+            "color",
+            "light"
+          ]
+        }
+      }
+    },
+    "segment": {
+      "color": {
+        "default": {
+          "value": "#535158",
+          "$type": "color",
+          "comment": "Used for the animated segment of a loading spinner.",
+          "filePath": "src/tokens/contextual/spinner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.700}",
+              "dark": "{color.neutral.200}"
+            },
+            "$type": "color",
+            "comment": "Used for the animated segment of a loading spinner."
+          },
+          "name": "SPINNER_SEGMENT_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "spinner",
+            "segment",
+            "color",
+            "default"
+          ]
+        },
+        "light": {
+          "value": "#bfbfc3",
+          "$type": "color",
+          "comment": "Used for the animated segment of a loading spinner on a dark background.",
+          "filePath": "src/tokens/contextual/spinner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.neutral.200}",
+            "$type": "color",
+            "comment": "Used for the animated segment of a loading spinner on a dark background."
+          },
+          "name": "SPINNER_SEGMENT_COLOR_LIGHT",
+          "attributes": {},
+          "path": [
+            "spinner",
+            "segment",
+            "color",
+            "light"
+          ]
+        }
+      }
+    }
+  },
   "control": {
     "background": {
       "color": {

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

@@ -533,6 +533,10 @@ $gl-control-background-color-selected-hover: $gl-color-blue-200; // Used for che
 $gl-control-background-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 $gl-control-background-color-disabled: $gl-color-neutral-950; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) default background.
+$gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
+$gl-spinner-segment-color-default: $gl-color-neutral-200; // Used for the animated segment of a loading spinner.
+$gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
+$gl-spinner-track-color-default: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-700; // Used for the animated shimmer effect in a skeleton loader.
 $gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the skeleton loader background color.
 $gl-popover-background-color: $gl-color-neutral-900; // Used for the background color of popover.

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

@@ -533,6 +533,10 @@ $gl-control-background-color-selected-hover: $gl-color-blue-700; // Used for che
 $gl-control-background-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 $gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.
+$gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
+$gl-spinner-segment-color-default: $gl-color-neutral-700; // Used for the animated segment of a loading spinner.
+$gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
+$gl-spinner-track-color-default: $gl-color-neutral-100; // Used for the static track (background) of a loading spinner.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-50; // Used for the animated shimmer effect in a skeleton loader.
 $gl-skeleton-loader-background-color: $gl-color-neutral-100; // Used for the skeleton loader background color.
 $gl-popover-background-color: $gl-color-neutral-0; // Used for the background color of popover.

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

@@ -525,6 +525,10 @@ $gl-label-scoped-button-icon-color-hover: var(--gl-label-scoped-button-icon-colo
 $gl-popover-background-color: var(--gl-popover-background-color);
 $gl-skeleton-loader-background-color: var(--gl-skeleton-loader-background-color);
 $gl-skeleton-loader-shimmer-color: var(--gl-skeleton-loader-shimmer-color);
+$gl-spinner-track-color-default: var(--gl-spinner-track-color-default);
+$gl-spinner-track-color-light: var(--gl-spinner-track-color-light);
+$gl-spinner-segment-color-default: var(--gl-spinner-segment-color-default);
+$gl-spinner-segment-color-light: var(--gl-spinner-segment-color-light);
 $gl-control-background-color-default: var(--gl-control-background-color-default);
 $gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
 $gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);

package/src/tokens/contextual/spinner.tokens.json

@@ -0,0 +1,38 @@
+{
+  "spinner": {
+    "track": {
+      "color": {
+        "default": {
+          "$value": {
+            "default": "{color.neutral.100}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "$description": "Used for the static track (background) of a loading spinner."
+        },
+        "light": {
+          "$value": "{color.neutral.800}",
+          "$type": "color",
+          "$description": "Used for the static track (background) of a loading spinner on a dark background."
+        }
+      }
+    },
+    "segment": {
+      "color": {
+        "default": {
+          "$value": {
+            "default": "{color.neutral.700}",
+            "dark": "{color.neutral.200}"
+          },
+          "$type": "color",
+          "$description": "Used for the animated segment of a loading spinner."
+        },
+        "light": {
+          "$value": "{color.neutral.200}",
+          "$type": "color",
+          "$description": "Used for the animated segment of a loading spinner on a dark background."
+        }
+      }
+    }
+  }
+}

package/translations.js

@@ -6,7 +6,13 @@ export default {
   'GlKeysetPagination.navigationLabel': 'Pagination',
   'GlKeysetPagination.nextText': 'Next',
   'GlKeysetPagination.prevText': 'Previous',
+  'GlPagination.labelFirstPage': 'Go to first page',
+  'GlPagination.labelLastPage': 'Go to last page',
+  'GlPagination.labelNextPage': 'Go to next page',
   'GlPagination.labelPage': 'Go to page %{page}',
+  'GlPagination.labelPrevPage': 'Go to previous page',
+  'GlPagination.nextText': 'Next',
+  'GlPagination.prevText': 'Previous',
   'GlSearchBoxByType.clearButtonTitle': 'Clear',
   'GlSearchBoxByType.input.placeholder': 'Search',
   'GlSorting.sortAscending': 'Sort direction: ascending',