@gitlab/ui 94.10.0 → 95.0.0

package/dist/tokens/scss/_tokens.dark.scss

@@ -503,6 +503,7 @@ $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static tra
 $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-progress-bar-track-color: $gl-color-neutral-700; // Used for the track color for all progress-bar variants.
 $gl-link-mention-background-color-current: $gl-color-orange-800; // Used for the mention link background when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-800; // Used for the mention link default background.
 $gl-link-mention-text-color-current: $gl-color-orange-100; // Used for the mention link text color when referencing the current user.
@@ -779,6 +780,10 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
+$gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
+$gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
+$gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-indicator-color-selected-focus: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the focus state.

package/dist/tokens/scss/_tokens.scss

@@ -503,6 +503,7 @@ $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static tra
 $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-progress-bar-track-color: $gl-color-neutral-200; // Used for the track color for all progress-bar variants.
 $gl-link-mention-background-color-current: $gl-color-orange-100; // Used for the mention link background when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-100; // Used for the mention link default background.
 $gl-link-mention-text-color-current: $gl-color-orange-800; // Used for the mention link text color when referencing the current user.
@@ -779,6 +780,10 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
+$gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
+$gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
+$gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -668,6 +668,11 @@ $gl-link-mention-text-color-default: var(--gl-link-mention-text-color-default);
 $gl-link-mention-text-color-current: var(--gl-link-mention-text-color-current);
 $gl-link-mention-background-color-default: var(--gl-link-mention-background-color-default);
 $gl-link-mention-background-color-current: var(--gl-link-mention-background-color-current);
+$gl-progress-bar-indicator-color-default: var(--gl-progress-bar-indicator-color-default);
+$gl-progress-bar-indicator-color-success: var(--gl-progress-bar-indicator-color-success);
+$gl-progress-bar-indicator-color-warning: var(--gl-progress-bar-indicator-color-warning);
+$gl-progress-bar-indicator-color-danger: var(--gl-progress-bar-indicator-color-danger);
+$gl-progress-bar-track-color: var(--gl-progress-bar-track-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);

package/dist/utils/constants.js

@@ -1,11 +1,5 @@
 import { POSITION } from '../components/utilities/truncate/constants';
 
-function appendDefaultOption(options) {
-  return {
-    ...options,
-    default: ''
-  };
-}
 const COMMA = ',';
 const CONTRAST_LEVELS = [{
   grade: 'F',
@@ -26,15 +20,11 @@ const CONTRAST_LEVELS = [{
 }];
 const HEX_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 const LEFT_MOUSE_BUTTON = 0;
-const variantOptions = {
+const progressBarVariantOptions = {
   primary: 'primary',
-  secondary: 'secondary',
   success: 'success',
   warning: 'warning',
-  danger: 'danger',
-  info: 'info',
-  light: 'light',
-  dark: 'dark'
+  danger: 'danger'
 };
 const badgeSizeOptions = {
   sm: 'sm',
@@ -251,7 +241,6 @@ const tabsButtonDefaults = {
 };
 const tokenVariants = ['default', 'search-type', 'search-value'];
 const resizeDebounceTime = 200;
-const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
 
 // Datetime constants
 const defaultDateFormat = 'YYYY-MM-DD';
@@ -305,4 +294,4 @@ const loadingIconVariants = {
   dots: 'dots'
 };
 
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };

package/dist/vendor/bootstrap-vue/src/components/modal/modal.js

@@ -71,9 +71,7 @@ const props = makePropsConfigurable(sortKeys({
   autoFocusButton: makeProp(PROP_TYPE_STRING, null, /* istanbul ignore next */value => {
     return isUndefinedOrNull(value) || arrayIncludes(BUTTONS, value);
   }),
-  bodyBgVariant: makeProp(PROP_TYPE_STRING),
   bodyClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  bodyTextVariant: makeProp(PROP_TYPE_STRING),
   busy: makeProp(PROP_TYPE_BOOLEAN, false),
   buttonSize: makeProp(PROP_TYPE_STRING),
   cancelDisabled: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -83,19 +81,12 @@ const props = makePropsConfigurable(sortKeys({
   centered: makeProp(PROP_TYPE_BOOLEAN, false),
   contentClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   dialogClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  footerBgVariant: makeProp(PROP_TYPE_STRING),
-  footerBorderVariant: makeProp(PROP_TYPE_STRING),
   footerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   footerTag: makeProp(PROP_TYPE_STRING, 'footer'),
-  footerTextVariant: makeProp(PROP_TYPE_STRING),
-  headerBgVariant: makeProp(PROP_TYPE_STRING),
-  headerBorderVariant: makeProp(PROP_TYPE_STRING),
   headerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   headerCloseContent: makeProp(PROP_TYPE_STRING, '×'),
   headerCloseLabel: makeProp(PROP_TYPE_STRING, 'Close'),
-  headerCloseVariant: makeProp(PROP_TYPE_STRING),
   headerTag: makeProp(PROP_TYPE_STRING, 'header'),
-  headerTextVariant: makeProp(PROP_TYPE_STRING),
   // TODO: Rename to `noBackdrop` and deprecate `hideBackdrop`
   hideBackdrop: makeProp(PROP_TYPE_BOOLEAN, false),
   // TODO: Rename to `noFooter` and deprecate `hideFooter`
@@ -209,31 +200,11 @@ const BModal = /*#__PURE__*/extend({
         'modal-dialog-scrollable': this.scrollable
       }, this.dialogClass];
     },
-    headerClasses() {
-      return [{
-        [`bg-${this.headerBgVariant}`]: this.headerBgVariant,
-        [`text-${this.headerTextVariant}`]: this.headerTextVariant,
-        [`border-${this.headerBorderVariant}`]: this.headerBorderVariant
-      }, this.headerClass];
-    },
     titleClasses() {
       return [{
         'sr-only': this.titleSrOnly
       }, this.titleClass];
     },
-    bodyClasses() {
-      return [{
-        [`bg-${this.bodyBgVariant}`]: this.bodyBgVariant,
-        [`text-${this.bodyTextVariant}`]: this.bodyTextVariant
-      }, this.bodyClass];
-    },
-    footerClasses() {
-      return [{
-        [`bg-${this.footerBgVariant}`]: this.footerBgVariant,
-        [`text-${this.footerTextVariant}`]: this.footerTextVariant,
-        [`border-${this.footerBorderVariant}`]: this.footerBorderVariant
-      }, this.footerClass];
-    },
     modalOuterStyle() {
       // Styles needed for proper stacking of modals
       return {
@@ -706,8 +677,7 @@ const BModal = /*#__PURE__*/extend({
               props: {
                 content: this.headerCloseContent,
                 disabled: this.isTransitioning,
-                ariaLabel: this.headerCloseLabel,
-                textVariant: this.headerCloseVariant || this.headerTextVariant
+                ariaLabel: this.headerCloseLabel
               },
               on: {
                 click: this.onClose
@@ -731,7 +701,7 @@ const BModal = /*#__PURE__*/extend({
         }
         $header = h(this.headerTag, {
           staticClass: 'modal-header',
-          class: this.headerClasses,
+          class: this.headerClass,
           attrs: {
             id: this.modalHeaderId
           },
@@ -742,7 +712,7 @@ const BModal = /*#__PURE__*/extend({
       // Modal body
       const $body = h('div', {
         staticClass: 'modal-body',
-        class: this.bodyClasses,
+        class: this.bodyClass,
         attrs: {
           id: this.modalBodyId
         },
@@ -792,7 +762,7 @@ const BModal = /*#__PURE__*/extend({
         }
         $footer = h(this.footerTag, {
           staticClass: 'modal-footer',
-          class: this.footerClasses,
+          class: this.footerClass,
           attrs: {
             id: this.modalFooterId
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "94.10.0",
+  "version": "95.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/progress_bar/progress_bar.scss

@@ -0,0 +1,19 @@
+.gl-progress-bar {
+  background-color: var(--gl-progress-bar-track-color);
+
+  .bg-primary {
+    background-color: var(--gl-progress-bar-indicator-color-default) !important;
+  }
+
+  .bg-success {
+    background-color: var(--gl-progress-bar-indicator-color-success) !important;
+  }
+
+  .bg-warning {
+    background-color: var(--gl-progress-bar-indicator-color-warning) !important;
+  }
+
+  .bg-danger {
+    background-color: var(--gl-progress-bar-indicator-color-danger) !important;
+  }
+}

package/src/components/base/progress_bar/progress_bar.vue

@@ -11,5 +11,5 @@ export default {
 </script>
 
 <template>
-  <b-progress v-bind="$attrs" />
+  <b-progress v-bind="$attrs" class="gl-progress-bar" />
 </template>

package/src/scss/components.scss

@@ -58,6 +58,7 @@
 @import '../components/base/pagination/pagination';
 @import '../components/base/path/path';
 @import '../components/base/popover/popover';
+@import '../components/base/progress_bar/progress_bar';
 @import '../components/base/search_box_by_type/search_box_by_type';
 @import '../components/base/search_box_by_click/search_box_by_click';
 @import '../components/base/segmented_control/segmented_control';

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

@@ -505,6 +505,7 @@
   --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-progress-bar-track-color: var(--gl-color-neutral-200); /* Used for the track color for all progress-bar variants. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-100); /* Used for the mention link background when referencing the current user. */
   --gl-link-mention-background-color-default: var(--gl-color-blue-100); /* Used for the mention link default background. */
   --gl-link-mention-text-color-current: var(--gl-color-orange-800); /* Used for the mention link text color when referencing the current user. */
@@ -781,6 +782,10 @@
   --gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
+  --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /* Used for the indicator color for the danger progress-bar variant. */
+  --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /* Used for the indicator color for the warning progress-bar variant. */
+  --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /* Used for the indicator color for the success progress-bar variant. */
+  --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /* Used for the indicator color for the primary progress-bar variant. */
   --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /* Used for the background of a selected dropdown option in the focus state. */
   --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of an unselected dropdown option in the focus state. */
   --gl-dropdown-option-indicator-color-selected-focus: var(--gl-control-background-color-selected-focus); /* Used for the dropdown selected option indicator in the focus state. */

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

@@ -505,6 +505,7 @@
   --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-progress-bar-track-color: var(--gl-color-neutral-700); /* Used for the track color for all progress-bar variants. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-800); /* Used for the mention link background when referencing the current user. */
   --gl-link-mention-background-color-default: var(--gl-color-blue-800); /* Used for the mention link default background. */
   --gl-link-mention-text-color-current: var(--gl-color-orange-100); /* Used for the mention link text color when referencing the current user. */
@@ -781,6 +782,10 @@
   --gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
+  --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /* Used for the indicator color for the danger progress-bar variant. */
+  --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /* Used for the indicator color for the warning progress-bar variant. */
+  --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /* Used for the indicator color for the success progress-bar variant. */
+  --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /* Used for the indicator color for the primary progress-bar variant. */
   --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /* Used for the background of a selected dropdown option in the focus state. */
   --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of an unselected dropdown option in the focus state. */
   --gl-dropdown-option-indicator-color-selected-focus: var(--gl-color-neutral-0); /* Used for the dropdown selected option indicator in the focus state. */

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

@@ -668,6 +668,11 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#9dc7f1'; // Used for the men
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#f5d9a8'; // Used for the mention link text color when referencing the current user.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#064787'; // Used for the mention link default background.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#703800'; // Used for the mention link background when referencing the current user.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#428fdc'; // Used for the indicator color for the primary progress-bar variant.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#2da160'; // Used for the indicator color for the success progress-bar variant.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#c17d10'; // Used for the indicator color for the warning progress-bar variant.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#ec5941'; // Used for the indicator color for the danger progress-bar variant.
+export const GL_PROGRESS_BAR_TRACK_COLOR = '#4c4b51'; // Used for the track color for all progress-bar variants.
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#3a383f'; // Used for the skeleton loader background color.
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#4c4b51'; // Used for the animated shimmer effect in a skeleton loader.
 export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#3a383f'; // Used for the static track (background) of a loading spinner.

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

@@ -668,6 +668,11 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#0b5cad'; // Used for the men
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#703800'; // Used for the mention link text color when referencing the current user.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#cbe2f9'; // Used for the mention link default background.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#f5d9a8'; // Used for the mention link background when referencing the current user.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#1f75cb'; // Used for the indicator color for the primary progress-bar variant.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#108548'; // Used for the indicator color for the success progress-bar variant.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#ab6100'; // Used for the indicator color for the warning progress-bar variant.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#dd2b0e'; // Used for the indicator color for the danger progress-bar variant.
+export const GL_PROGRESS_BAR_TRACK_COLOR = '#bfbfc3'; // Used for the track color for all progress-bar variants.
 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.

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

@@ -14793,6 +14793,116 @@
       }
     }
   },
+  "progress-bar": {
+    "indicator": {
+      "color": {
+        "default": {
+          "value": "#428fdc",
+          "$type": "color",
+          "comment": "Used for the indicator color for the primary progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.info.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the primary progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "default"
+          ]
+        },
+        "success": {
+          "value": "#2da160",
+          "$type": "color",
+          "comment": "Used for the indicator color for the success progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.success.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the success progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_SUCCESS",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "success"
+          ]
+        },
+        "warning": {
+          "value": "#c17d10",
+          "$type": "color",
+          "comment": "Used for the indicator color for the warning progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.warning.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the warning progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_WARNING",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "warning"
+          ]
+        },
+        "danger": {
+          "value": "#ec5941",
+          "$type": "color",
+          "comment": "Used for the indicator color for the danger progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.danger.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the danger progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_DANGER",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "danger"
+          ]
+        }
+      }
+    },
+    "track": {
+      "color": {
+        "value": "#4c4b51",
+        "$type": "color",
+        "comment": "Used for the track color for all progress-bar variants.",
+        "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.200}",
+            "dark": "{color.neutral.700}"
+          },
+          "$type": "color",
+          "comment": "Used for the track color for all progress-bar variants."
+        },
+        "name": "PROGRESS_BAR_TRACK_COLOR",
+        "attributes": {},
+        "path": [
+          "progress-bar",
+          "track",
+          "color"
+        ]
+      }
+    }
+  },
   "skeleton-loader": {
     "background": {
       "color": {

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

@@ -14793,6 +14793,116 @@
       }
     }
   },
+  "progress-bar": {
+    "indicator": {
+      "color": {
+        "default": {
+          "value": "#1f75cb",
+          "$type": "color",
+          "comment": "Used for the indicator color for the primary progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.info.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the primary progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "default"
+          ]
+        },
+        "success": {
+          "value": "#108548",
+          "$type": "color",
+          "comment": "Used for the indicator color for the success progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.success.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the success progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_SUCCESS",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "success"
+          ]
+        },
+        "warning": {
+          "value": "#ab6100",
+          "$type": "color",
+          "comment": "Used for the indicator color for the warning progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.warning.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the warning progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_WARNING",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "warning"
+          ]
+        },
+        "danger": {
+          "value": "#dd2b0e",
+          "$type": "color",
+          "comment": "Used for the indicator color for the danger progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.danger.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the danger progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_DANGER",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "danger"
+          ]
+        }
+      }
+    },
+    "track": {
+      "color": {
+        "value": "#bfbfc3",
+        "$type": "color",
+        "comment": "Used for the track color for all progress-bar variants.",
+        "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.200}",
+            "dark": "{color.neutral.700}"
+          },
+          "$type": "color",
+          "comment": "Used for the track color for all progress-bar variants."
+        },
+        "name": "PROGRESS_BAR_TRACK_COLOR",
+        "attributes": {},
+        "path": [
+          "progress-bar",
+          "track",
+          "color"
+        ]
+      }
+    }
+  },
   "skeleton-loader": {
     "background": {
       "color": {

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

@@ -503,6 +503,7 @@ $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static tra
 $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-progress-bar-track-color: $gl-color-neutral-700; // Used for the track color for all progress-bar variants.
 $gl-link-mention-background-color-current: $gl-color-orange-800; // Used for the mention link background when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-800; // Used for the mention link default background.
 $gl-link-mention-text-color-current: $gl-color-orange-100; // Used for the mention link text color when referencing the current user.
@@ -779,6 +780,10 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
+$gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
+$gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
+$gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-indicator-color-selected-focus: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the focus state.

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

@@ -503,6 +503,7 @@ $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static tra
 $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-progress-bar-track-color: $gl-color-neutral-200; // Used for the track color for all progress-bar variants.
 $gl-link-mention-background-color-current: $gl-color-orange-100; // Used for the mention link background when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-100; // Used for the mention link default background.
 $gl-link-mention-text-color-current: $gl-color-orange-800; // Used for the mention link text color when referencing the current user.
@@ -779,6 +780,10 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
+$gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
+$gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
+$gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.

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

@@ -668,6 +668,11 @@ $gl-link-mention-text-color-default: var(--gl-link-mention-text-color-default);
 $gl-link-mention-text-color-current: var(--gl-link-mention-text-color-current);
 $gl-link-mention-background-color-default: var(--gl-link-mention-background-color-default);
 $gl-link-mention-background-color-current: var(--gl-link-mention-background-color-current);
+$gl-progress-bar-indicator-color-default: var(--gl-progress-bar-indicator-color-default);
+$gl-progress-bar-indicator-color-success: var(--gl-progress-bar-indicator-color-success);
+$gl-progress-bar-indicator-color-warning: var(--gl-progress-bar-indicator-color-warning);
+$gl-progress-bar-indicator-color-danger: var(--gl-progress-bar-indicator-color-danger);
+$gl-progress-bar-track-color: var(--gl-progress-bar-track-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);

package/src/tokens/contextual/progress-bar.tokens.json

@@ -0,0 +1,38 @@
+{
+  "progress-bar": {
+    "indicator": {
+      "color": {
+        "default": {
+          "$value": "{status.info.icon.color}",
+          "$type": "color",
+          "$description": "Used for the indicator color for the primary progress-bar variant."
+        },
+        "success": {
+          "$value": "{status.success.icon.color}",
+          "$type": "color",
+          "$description": "Used for the indicator color for the success progress-bar variant."
+        },
+        "warning": {
+          "$value": "{status.warning.icon.color}",
+          "$type": "color",
+          "$description": "Used for the indicator color for the warning progress-bar variant."
+        },
+        "danger": {
+          "$value": "{status.danger.icon.color}",
+          "$type": "color",
+          "$description": "Used for the indicator color for the danger progress-bar variant."
+        }
+      }
+    },
+    "track": {
+      "color": {
+        "$value": {
+          "default": "{color.neutral.200}",
+          "dark": "{color.neutral.700}"
+        },
+        "$type": "color",
+        "$description": "Used for the track color for all progress-bar variants."
+      }
+    }
+  }
+}