@gitlab/ui 84.1.0 → 85.0.0

package/dist/vendor/bootstrap-vue/src/utils/router.js

@@ -0,0 +1,136 @@
+import { RX_ENCODE_REVERSE, RX_ENCODED_COMMA, RX_QUERY_START, RX_PLUS } from '../constants/regex';
+import { isTag } from './dom';
+import { isPlainObject, isUndefined, isNull, isArray, isString } from './inspect';
+import { keys } from './object';
+import { safeVueInstance } from './safe-vue-instance';
+import { toString } from './string';
+
+const ANCHOR_TAG = 'a';
+
+// Method to replace reserved chars
+const encodeReserveReplacer = c => '%' + c.charCodeAt(0).toString(16);
+
+// Fixed encodeURIComponent which is more conformant to RFC3986:
+// - escapes [!'()*]
+// - preserve commas
+const encode = str => encodeURIComponent(toString(str)).replace(RX_ENCODE_REVERSE, encodeReserveReplacer).replace(RX_ENCODED_COMMA, ',');
+const decode = decodeURIComponent;
+
+// Stringifies an object of query parameters
+// See: https://github.com/vuejs/vue-router/blob/dev/src/util/query.js
+const stringifyQueryObj = obj => {
+  if (!isPlainObject(obj)) {
+    return '';
+  }
+  const query = keys(obj).map(key => {
+    const value = obj[key];
+    if (isUndefined(value)) {
+      return '';
+    } else if (isNull(value)) {
+      return encode(key);
+    } else if (isArray(value)) {
+      return value.reduce((results, value2) => {
+        if (isNull(value2)) {
+          results.push(encode(key));
+        } else if (!isUndefined(value2)) {
+          // Faster than string interpolation
+          results.push(encode(key) + '=' + encode(value2));
+        }
+        return results;
+      }, []).join('&');
+    }
+    // Faster than string interpolation
+    return encode(key) + '=' + encode(value);
+  })
+  /* must check for length, as we only want to filter empty strings, not things that look falsey! */.filter(x => x.length > 0).join('&');
+  return query ? `?${query}` : '';
+};
+const parseQuery = query => {
+  const parsed = {};
+  query = toString(query).trim().replace(RX_QUERY_START, '');
+  if (!query) {
+    return parsed;
+  }
+  query.split('&').forEach(param => {
+    const parts = param.replace(RX_PLUS, ' ').split('=');
+    const key = decode(parts.shift());
+    const value = parts.length > 0 ? decode(parts.join('=')) : null;
+    if (isUndefined(parsed[key])) {
+      parsed[key] = value;
+    } else if (isArray(parsed[key])) {
+      parsed[key].push(value);
+    } else {
+      parsed[key] = [parsed[key], value];
+    }
+  });
+  return parsed;
+};
+const isLink = props => !!(props.href || props.to);
+const isRouterLink = tag => !!(tag && !isTag(tag, 'a'));
+const computeTag = (_ref, thisOrParent) => {
+  let {
+    to,
+    disabled,
+    routerComponentName
+  } = _ref;
+  const hasRouter = !!safeVueInstance(thisOrParent).$router;
+  const hasNuxt = !!safeVueInstance(thisOrParent).$nuxt;
+  if (!hasRouter || hasRouter && (disabled || !to)) {
+    return ANCHOR_TAG;
+  }
+
+  // TODO:
+  //   Check registered components for existence of user supplied router link component name
+  //   We would need to check PascalCase, kebab-case, and camelCase versions of name:
+  //   const name = routerComponentName
+  //   const names = [name, PascalCase(name), KebabCase(name), CamelCase(name)]
+  //   exists = names.some(name => !!thisOrParent.$options.components[name])
+  //   And may want to cache the result for performance or we just let the render fail
+  //   if the component is not registered
+  return routerComponentName || (hasNuxt ? 'nuxt-link' : 'router-link');
+};
+const computeRel = function () {
+  let {
+    target,
+    rel
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return target === '_blank' && isNull(rel) ? 'noopener' : rel || null;
+};
+const computeHref = function () {
+  let {
+    href,
+    to
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let tag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ANCHOR_TAG;
+  let fallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '#';
+  let toFallback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '/';
+  // Return `href` when explicitly provided
+  if (href) {
+    return href;
+  }
+
+  // We've checked for `$router` in `computeTag()`, so `isRouterLink()` indicates a live router
+  // When deferring to Vue Router's `<router-link>`, don't use the `href` attribute at all
+  // We return `null`, and then remove `href` from the attributes passed to `<router-link>`
+  if (isRouterLink(tag)) {
+    return null;
+  }
+
+  // Fallback to `to` prop (if `to` is a string)
+  if (isString(to)) {
+    return to || toFallback;
+  }
+  // Fallback to `to.path' + `to.query` + `to.hash` prop (if `to` is an object)
+  if (isPlainObject(to) && (to.path || to.query || to.hash)) {
+    const path = toString(to.path);
+    const query = stringifyQueryObj(to.query);
+    let hash = toString(to.hash);
+    hash = !hash || hash.charAt(0) === '#' ? hash : `#${hash}`;
+    return `${path}${query}${hash}` || toFallback;
+  }
+
+  // If nothing is provided return the fallback
+  return fallback;
+};
+
+export { computeHref, computeRel, computeTag, isLink, isRouterLink, parseQuery, stringifyQueryObj };

package/dist/vendor/bootstrap-vue/src/utils/safe-vue-instance.js

@@ -0,0 +1,14 @@
+import { isVue3 } from '../vue';
+
+function safeVueInstance(target) {
+  if (!isVue3) {
+    return target;
+  }
+  return new Proxy(target, {
+    get(target, prop) {
+      return prop in target ? target[prop] : undefined;
+    }
+  });
+}
+
+export { safeVueInstance };

package/dist/vendor/bootstrap-vue/src/utils/stable-sort.js

@@ -0,0 +1,28 @@
+/*
+ * Consistent and stable sort function across JavaScript platforms
+ *
+ * Inconsistent sorts can cause SSR problems between client and server
+ * such as in <b-table> if sortBy is applied to the data on server side render.
+ * Chrome and V8 native sorts are inconsistent/unstable
+ *
+ * This function uses native sort with fallback to index compare when the a and b
+ * compare returns 0
+ *
+ * Algorithm based on:
+ * https://stackoverflow.com/questions/1427608/fast-stable-sorting-algorithm-implementation-in-javascript/45422645#45422645
+ *
+ * @param {array} array to sort
+ * @param {function} sort compare function
+ * @return {array}
+ */
+const stableSort = (array, compareFn) => {
+  // Using `.bind(compareFn)` on the wrapped anonymous function improves
+  // performance by avoiding the function call setup. We don't use an arrow
+  // function here as it binds `this` to the `stableSort` context rather than
+  // the `compareFn` context, which wouldn't give us the performance increase.
+  return array.map((a, index) => [index, a]).sort(function (a, b) {
+    return this(a[1], b[1]) || a[0] - b[0];
+  }.bind(compareFn)).map(e => e[1]);
+};
+
+export { stableSort };

package/dist/vendor/bootstrap-vue/src/utils/string.js

@@ -0,0 +1,62 @@
+import { RX_HYPHENATE, RX_UN_KEBAB, RX_UNDERSCORE, RX_LOWER_UPPER, RX_START_SPACE_WORD, RX_REGEXP_REPLACE, RX_TRIM_LEFT, RX_TRIM_RIGHT } from '../constants/regex';
+import { isString, isUndefinedOrNull, isArray, isPlainObject } from './inspect';
+
+// String utilities
+
+// --- Utilities ---
+
+// Converts PascalCase or camelCase to kebab-case
+const kebabCase = str => {
+  return str.replace(RX_HYPHENATE, '-$1').toLowerCase();
+};
+
+// Converts a kebab-case or camelCase string to PascalCase
+const pascalCase = str => {
+  str = kebabCase(str).replace(RX_UN_KEBAB, (_, c) => c ? c.toUpperCase() : '');
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+// Converts a string, including strings in camelCase or snake_case, into Start Case
+// It keeps original single quote and hyphen in the word
+// https://github.com/UrbanCompass/to-start-case
+const startCase = str => str.replace(RX_UNDERSCORE, ' ').replace(RX_LOWER_UPPER, (str, $1, $2) => $1 + ' ' + $2).replace(RX_START_SPACE_WORD, (str, $1, $2) => $1 + $2.toUpperCase());
+
+// Lowercases the first letter of a string and returns a new string
+const lowerFirst = str => {
+  str = isString(str) ? str.trim() : String(str);
+  return str.charAt(0).toLowerCase() + str.slice(1);
+};
+
+// Uppercases the first letter of a string and returns a new string
+const upperFirst = str => {
+  str = isString(str) ? str.trim() : String(str);
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+// Escape characters to be used in building a regular expression
+const escapeRegExp = str => str.replace(RX_REGEXP_REPLACE, '\\$&');
+
+// Convert a value to a string that can be rendered
+// `undefined`/`null` will be converted to `''`
+// Plain objects and arrays will be JSON stringified
+const toString = function (val) {
+  let spaces = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  return isUndefinedOrNull(val) ? '' : isArray(val) || isPlainObject(val) && val.toString === Object.prototype.toString ? JSON.stringify(val, null, spaces) : String(val);
+};
+
+// Remove leading white space from a string
+const trimLeft = str => toString(str).replace(RX_TRIM_LEFT, '');
+
+// Remove Trailing white space from a string
+const trimRight = str => toString(str).replace(RX_TRIM_RIGHT, '');
+
+// Remove leading and trailing white space from a string
+const trim = str => toString(str).trim();
+
+// Lower case a string
+const lowerCase = str => toString(str).toLowerCase();
+
+// Upper case a string
+const upperCase = str => toString(str).toUpperCase();
+
+export { escapeRegExp, kebabCase, lowerCase, lowerFirst, pascalCase, startCase, toString, trim, trimLeft, trimRight, upperCase, upperFirst };

package/dist/vendor/bootstrap-vue/src/utils/stringify-object-values.js

@@ -0,0 +1,31 @@
+import { isUndefinedOrNull, isObject, isDate } from './inspect';
+import { keys } from './object';
+import { toString } from './string';
+
+// Recursively stringifies the values of an object, space separated, in an
+// SSR safe deterministic way (keys are sorted before stringification)
+//
+//   ex:
+//     { b: 3, c: { z: 'zzz', d: null, e: 2 }, d: [10, 12, 11], a: 'one' }
+//   becomes
+//     'one 3 2 zzz 10 12 11'
+//
+// Strings are returned as-is
+// Numbers get converted to string
+// `null` and `undefined` values are filtered out
+// Dates are converted to their native string format
+const stringifyObjectValues = value => {
+  if (isUndefinedOrNull(value)) {
+    return '';
+  }
+  // Arrays are also object, and keys just returns the array indexes
+  // Date objects we convert to strings
+  if (isObject(value) && !isDate(value)) {
+    return keys(value).sort() // Sort to prevent SSR issues on pre-rendered sorted tables
+    .map(k => stringifyObjectValues(value[k])).filter(v => !!v) // Ignore empty strings
+    .join(' ');
+  }
+  return toString(value);
+};
+
+export { stringifyObjectValues };

package/dist/vendor/bootstrap-vue/src/utils/warn.js

@@ -0,0 +1,60 @@
+import { IS_BROWSER, HAS_PROMISE_SUPPORT, HAS_MUTATION_OBSERVER_SUPPORT } from '../constants/env';
+import { getNoWarn } from './env';
+
+/**
+ * Log a warning message to the console with BootstrapVue formatting
+ * @param {string} message
+ */
+const warn = function (message) /* istanbul ignore next */{
+  let source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  if (!getNoWarn()) {
+    console.warn(`[BootstrapVue warn]: ${source ? `${source} - ` : ''}${message}`);
+  }
+};
+
+/**
+ * Warn when no Promise support is given
+ * @param {string} source
+ * @returns {boolean} warned
+ */
+const warnNotClient = source => {
+  /* istanbul ignore else */
+  if (IS_BROWSER) {
+    return false;
+  } else {
+    warn(`${source}: Can not be called during SSR.`);
+    return true;
+  }
+};
+
+/**
+ * Warn when no Promise support is given
+ * @param {string} source
+ * @returns {boolean} warned
+ */
+const warnNoPromiseSupport = source => {
+  /* istanbul ignore else */
+  if (HAS_PROMISE_SUPPORT) {
+    return false;
+  } else {
+    warn(`${source}: Requires Promise support.`);
+    return true;
+  }
+};
+
+/**
+ * Warn when no MutationObserver support is given
+ * @param {string} source
+ * @returns {boolean} warned
+ */
+const warnNoMutationObserverSupport = source => {
+  /* istanbul ignore else */
+  if (HAS_MUTATION_OBSERVER_SUPPORT) {
+    return false;
+  } else {
+    warn(`${source}: Requires MutationObserver support.`);
+    return true;
+  }
+};
+
+export { warn, warnNoMutationObserverSupport, warnNoPromiseSupport, warnNotClient };

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

@@ -0,0 +1,103 @@
+import Vue from 'vue';
+export { default as Vue } from 'vue';
+export { mergeData } from 'vue-functional-data-merge';
+
+// --- Constants ---
+const COMPONENT_UID_KEY = '_uid';
+const isVue3 = Vue.version.startsWith('3');
+const REF_FOR_KEY = isVue3 ? 'ref_for' : 'refInFor';
+const ALLOWED_FIELDS_IN_DATA = ['class', 'staticClass', 'style', 'attrs', 'props', 'domProps', 'on', 'nativeOn', 'directives', 'scopedSlots', 'slot', 'key', 'ref', 'refInFor'];
+let extend = Vue.extend.bind(Vue);
+if (isVue3) {
+  const {
+    extend: originalExtend
+  } = Vue;
+  const KNOWN_COMPONENTS = ['router-link', 'transition', 'transition-group'];
+  const originalVModelDynamicCreated = Vue.vModelDynamic.created;
+  const originalVModelDynamicBeforeUpdate = Vue.vModelDynamic.beforeUpdate;
+
+  // See https://github.com/vuejs/vue-next/pull/4121 for details
+  Vue.vModelDynamic.created = function (el, binding, vnode) {
+    originalVModelDynamicCreated.call(this, el, binding, vnode);
+    if (!el._assign) {
+      el._assign = () => {};
+    }
+  };
+  Vue.vModelDynamic.beforeUpdate = function (el, binding, vnode) {
+    originalVModelDynamicBeforeUpdate.call(this, el, binding, vnode);
+    if (!el._assign) {
+      el._assign = () => {};
+    }
+  };
+  extend = function patchedBootstrapVueExtend(definition) {
+    if (typeof definition === 'object' && definition.render && !definition.__alreadyPatched) {
+      const originalRender = definition.render;
+      definition.__alreadyPatched = true;
+      definition.render = function (h) {
+        const patchedH = function (tag, dataObjOrChildren, rawSlots) {
+          const slots = rawSlots === undefined ? [] : [Array.isArray(rawSlots) ? rawSlots.filter(Boolean) : rawSlots];
+          const isTag = typeof tag === 'string' && !KNOWN_COMPONENTS.includes(tag);
+          const isSecondArgumentDataObject = dataObjOrChildren && typeof dataObjOrChildren === 'object' && !Array.isArray(dataObjOrChildren);
+          if (!isSecondArgumentDataObject) {
+            return h(tag, dataObjOrChildren, ...slots);
+          }
+          const {
+            attrs,
+            props,
+            ...restData
+          } = dataObjOrChildren;
+          const normalizedData = {
+            ...restData,
+            attrs,
+            props: isTag ? {} : props
+          };
+          if (tag === 'router-link' && !normalizedData.slots && !normalizedData.scopedSlots) {
+            // terrible workaround to fix router-link rendering with compat vue-router
+            normalizedData.scopedSlots = {
+              $hasNormal: () => {}
+            };
+          }
+          return h(tag, normalizedData, ...slots);
+        };
+        if (definition.functional) {
+          var _ctx$children, _ctx$children$default;
+          const ctx = arguments[1];
+          const patchedCtx = {
+            ...ctx
+          };
+          patchedCtx.data = {
+            attrs: {
+              ...(ctx.data.attrs || {})
+            },
+            props: {
+              ...(ctx.data.props || {})
+            }
+          };
+          Object.keys(ctx.data || {}).forEach(key => {
+            if (ALLOWED_FIELDS_IN_DATA.includes(key)) {
+              patchedCtx.data[key] = ctx.data[key];
+            } else if (key in ctx.props) {
+              patchedCtx.data.props[key] = ctx.data[key];
+            } else if (!key.startsWith('on')) {
+              patchedCtx.data.attrs[key] = ctx.data[key];
+            }
+          });
+          const IGNORED_CHILDREN_KEYS = ['_ctx'];
+          const children = ((_ctx$children = ctx.children) === null || _ctx$children === void 0 ? void 0 : (_ctx$children$default = _ctx$children.default) === null || _ctx$children$default === void 0 ? void 0 : _ctx$children$default.call(_ctx$children)) || ctx.children;
+          if (children && Object.keys(patchedCtx.children).filter(k => !IGNORED_CHILDREN_KEYS.includes(k)).length === 0) {
+            delete patchedCtx.children;
+          } else {
+            patchedCtx.children = children;
+          }
+          patchedCtx.data.on = ctx.listeners;
+          return originalRender.call(this, patchedH, patchedCtx);
+        }
+        return originalRender.call(this, patchedH);
+      };
+    }
+    return originalExtend.call(this, definition);
+  }.bind(Vue);
+}
+const nextTick = Vue.nextTick;
+
+export { COMPONENT_UID_KEY, REF_FOR_KEY, extend, isVue3, nextTick };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "84.1.0",
+  "version": "85.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -20,6 +20,7 @@
     "translations.js",
     "tailwind.defaults.js",
     "!src/vendor",
+    "src/vendor/bootstrap-vue/src/**/*.{js,scss}",
     "!*.stories.js",
     "!*.snap",
     "!*.spec.{js,scss}"
@@ -76,13 +77,14 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.4.3",
-    "bootstrap-vue": "2.23.1",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
     "marked": "^12.0.0",
     "marked-bidi": "^1.0.8",
-    "portal-vue": "^2.1.6",
+    "popper.js": "^1.16.1",
+    "portal-vue": "^2.1.7",
+    "vue-functional-data-merge": "^3.1.0",
     "vue-runtime-helpers": "^1.1.2"
   },
   "peerDependencies": {
@@ -143,7 +145,7 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
-    "cypress": "13.11.0",
+    "cypress": "13.12.0",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",

package/src/components/base/accordion/accordion_item.vue

@@ -1,6 +1,6 @@
 <script>
-import { BCollapse } from 'bootstrap-vue';
 import uniqueId from 'lodash/uniqueId';
+import { BCollapse } from '../../../vendor/bootstrap-vue/src/components/collapse/collapse';
 import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button.vue';
 

package/src/components/base/badge/badge.scss

@@ -92,93 +92,93 @@ $badge-min-width: 2.5 * $grid-size;
 
 @include gl-badge-variant(
   $variant: muted,
-  $color: $gray-600,
-  $icon-color: $gray-500,
-  $bg: $gray-50,
-  $hover-color: $gray-700,
-  $hover-icon-color: $gray-600,
-  $border-color: $gray-200,
-  $active-color: $gray-800,
-  $active-icon-color: $gray-700,
-  $active-bg: $gray-100
+  $color: var(--gl-status-muted-text-color-default),
+  $icon-color: var(--gl-status-muted-icon-color-default),
+  $bg: var(--gl-status-muted-background-color-default),
+  $hover-color: var(--gl-status-muted-text-color-hover),
+  $hover-icon-color: var(--gl-status-muted-icon-color-hover),
+  $border-color: var(--gl-status-muted-border-color-hover),
+  $active-color: var(--gl-status-muted-text-color-active),
+  $active-icon-color:var(--gl-status-muted-icon-color-active),
+  $active-bg: var(--gl-status-muted-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: neutral,
-  $color: $gray-700,
-  $icon-color: $gray-500,
-  $bg: $gray-100,
-  $hover-color: $gray-800,
-  $hover-icon-color: $gray-600,
-  $border-color: $gray-200,
-  $active-color: $gray-900,
-  $active-icon-color: $gray-700,
-  $active-bg: $gray-200
+  $color: var(--gl-status-neutral-text-color-default),
+  $icon-color: var(--gl-status-neutral-icon-color-default),
+  $bg: var(--gl-status-neutral-background-color-default),
+  $hover-color: var(--gl-status-neutral-text-color-hover),
+  $hover-icon-color: var(--gl-status-neutral-icon-color-hover),
+  $border-color: var(--gl-status-neutral-border-color-hover),
+  $active-color: var(--gl-status-neutral-text-color-active),
+  $active-icon-color:var(--gl-status-neutral-icon-color-active),
+  $active-bg: var(--gl-status-neutral-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: info,
-  $color: $blue-700,
-  $icon-color: $blue-500,
-  $bg: $blue-100,
-  $hover-color: $blue-800,
-  $hover-icon-color: $blue-600,
-  $border-color: $blue-200,
-  $active-color: $blue-900,
-  $active-icon-color: $blue-700,
-  $active-bg: $blue-200
+  $color: var(--gl-status-info-text-color-default),
+  $icon-color: var(--gl-status-info-icon-color-default),
+  $bg: var(--gl-status-info-background-color-default),
+  $hover-color: var(--gl-status-info-text-color-hover),
+  $hover-icon-color: var(--gl-status-info-icon-color-hover),
+  $border-color: var(--gl-status-info-border-color-hover),
+  $active-color: var(--gl-status-info-text-color-active),
+  $active-icon-color:var(--gl-status-info-icon-color-active),
+  $active-bg: var(--gl-status-info-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: success,
-  $color: $green-700,
-  $icon-color: $green-500,
-  $bg: $green-100,
-  $hover-color: $green-800,
-  $hover-icon-color: $green-600,
-  $border-color: $green-200,
-  $active-color: $green-900,
-  $active-icon-color: $green-700,
-  $active-bg: $green-200
+  $color: var(--gl-status-success-text-color-default),
+  $icon-color: var(--gl-status-success-icon-color-default),
+  $bg: var(--gl-status-success-background-color-default),
+  $hover-color: var(--gl-status-success-text-color-hover),
+  $hover-icon-color: var(--gl-status-success-icon-color-hover),
+  $border-color: var(--gl-status-success-border-color-hover),
+  $active-color: var(--gl-status-success-text-color-active),
+  $active-icon-color:var(--gl-status-success-icon-color-active),
+  $active-bg: var(--gl-status-success-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: warning,
-  $color: $orange-700,
-  $icon-color: $orange-500,
-  $bg: $orange-100,
-  $hover-color: $orange-800,
-  $hover-icon-color: $orange-600,
-  $border-color: $orange-200,
-  $active-color: $orange-900,
-  $active-icon-color: $orange-700,
-  $active-bg: $orange-200
+  $color: var(--gl-status-warning-text-color-default),
+  $icon-color: var(--gl-status-warning-icon-color-default),
+  $bg: var(--gl-status-warning-background-color-default),
+  $hover-color: var(--gl-status-warning-text-color-hover),
+  $hover-icon-color: var(--gl-status-warning-icon-color-hover),
+  $border-color: var(--gl-status-warning-border-color-hover),
+  $active-color: var(--gl-status-warning-text-color-active),
+  $active-icon-color:var(--gl-status-warning-icon-color-active),
+  $active-bg: var(--gl-status-warning-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: danger,
-  $color: $red-700,
-  $icon-color: $red-500,
-  $bg: $red-100,
-  $hover-color: $red-800,
-  $hover-icon-color: $red-600,
-  $border-color: $red-200,
-  $active-color: $red-900,
-  $active-icon-color: $red-700,
-  $active-bg: $red-200
+  $color: var(--gl-status-danger-text-color-default),
+  $icon-color: var(--gl-status-danger-icon-color-default),
+  $bg: var(--gl-status-danger-background-color-default),
+  $hover-color: var(--gl-status-danger-text-color-hover),
+  $hover-icon-color: var(--gl-status-danger-icon-color-hover),
+  $border-color: var(--gl-status-danger-border-color-hover),
+  $active-color: var(--gl-status-danger-text-color-active),
+  $active-icon-color:var(--gl-status-danger-icon-color-active),
+  $active-bg: var(--gl-status-danger-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: tier,
-  $color: $purple-700,
-  $icon-color: $purple-500,
-  $bg: $purple-100,
-  $hover-color: $purple-800,
-  $hover-icon-color: $purple-600,
-  $border-color: $purple-200,
-  $active-color: $purple-900,
-  $active-icon-color: $purple-700,
-  $active-bg: $purple-200
+  $color: var(--gl-status-brand-text-color-default),
+  $icon-color: var(--gl-status-brand-icon-color-default),
+  $bg: var(--gl-status-brand-background-color-default),
+  $hover-color: var(--gl-status-brand-text-color-hover),
+  $hover-icon-color: var(--gl-status-brand-icon-color-hover),
+  $border-color: var(--gl-status-brand-border-color-hover),
+  $active-color: var(--gl-status-brand-text-color-active),
+  $active-icon-color:var(--gl-status-brand-icon-color-active),
+  $active-bg: var(--gl-status-brand-background-color-active)
 );
 
 // overriding Bootstap's `.btn .badge {top: -1px}` as the badge is not vertically centered otherwise

package/src/components/base/badge/badge.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { BBadge } from 'bootstrap-vue';
+import { BBadge } from '../../../vendor/bootstrap-vue/src/components/badge/badge';
 import { badgeVariantOptions, badgeIconSizeOptions } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { BBreadcrumb } from 'bootstrap-vue';
 import debounce from 'lodash/debounce';
+import { BBreadcrumb } from '../../../vendor/bootstrap-vue/src/components/breadcrumb/breadcrumb';
 import { translate } from '../../../utils/i18n';
 import GlAvatar from '../avatar/avatar.vue';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';