@gitlab/ui 97.3.0 → 98.1.0

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

@@ -1,12 +1,11 @@
 import { extend } from '../../vue';
 import { NAME_COLLAPSE } from '../../constants/components';
 import { CLASS_NAME_SHOW } from '../../constants/classes';
-import { IS_BROWSER } from '../../constants/env';
-import { EVENT_OPTIONS_NO_CAPTURE, EVENT_NAME_SHOW, EVENT_NAME_SHOWN, EVENT_NAME_HIDE, EVENT_NAME_HIDDEN } from '../../constants/events';
+import { EVENT_NAME_SHOW, EVENT_NAME_SHOWN, EVENT_NAME_HIDE, EVENT_NAME_HIDDEN } from '../../constants/events';
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props';
 import { SLOT_NAME_DEFAULT } from '../../constants/slots';
 import { hasClass, removeClass, getCS, addClass, matches, closest } from '../../utils/dom';
-import { getRootActionEventName, getRootEventName, eventOnOff } from '../../utils/events';
+import { getRootActionEventName, getRootEventName } from '../../utils/events';
 import { makeModelMixin } from '../../utils/model';
 import { sortKeys } from '../../utils/object';
 import { makePropsConfigurable, makeProp } from '../../utils/props';
@@ -40,7 +39,6 @@ const props = makePropsConfigurable(sortKeys({
   // If `true` (and `visible` is `true` on mount), animate initially visible
   accordion: makeProp(PROP_TYPE_STRING),
   appear: makeProp(PROP_TYPE_BOOLEAN, false),
-  isNav: makeProp(PROP_TYPE_BOOLEAN, false),
   tag: makeProp(PROP_TYPE_STRING, 'div')
 }), NAME_COLLAPSE);
 
@@ -63,7 +61,6 @@ const BCollapse = /*#__PURE__*/extend({
         transitioning
       } = this;
       return {
-        'navbar-collapse': this.isNav,
         collapse: !transitioning,
         show: this.show && !transitioning
       };
@@ -98,11 +95,6 @@ const BCollapse = /*#__PURE__*/extend({
     this.listenOnRoot(ROOT_ACTION_EVENT_NAME_TOGGLE, this.handleToggleEvent);
     // Listen to other collapses for accordion events
     this.listenOnRoot(ROOT_EVENT_NAME_ACCORDION, this.handleAccordionEvent);
-    if (this.isNav) {
-      // Set up handlers
-      this.setWindowEvents(true);
-      this.handleResize();
-    }
     this.$nextTick(() => {
       this.emitState();
     });
@@ -119,31 +111,11 @@ const BCollapse = /*#__PURE__*/extend({
     // It is emitted regardless if the visible state changes
     this.emitSync();
   },
-  /* istanbul ignore next */
-  deactivated() {
-    if (this.isNav) {
-      this.setWindowEvents(false);
-    }
-  },
-  /* istanbul ignore next */
-  activated() {
-    if (this.isNav) {
-      this.setWindowEvents(true);
-    }
-    this.emitSync();
-  },
   beforeDestroy() {
     // Trigger state emit if needed
     this.show = false;
-    if (this.isNav && IS_BROWSER) {
-      this.setWindowEvents(false);
-    }
   },
   methods: {
-    setWindowEvents(on) {
-      eventOnOff(on, window, 'resize', this.handleResize, EVENT_OPTIONS_NO_CAPTURE);
-      eventOnOff(on, window, 'orientationchange', this.handleResize, EVENT_OPTIONS_NO_CAPTURE);
-    },
     toggle() {
       this.show = !this.show;
     },
@@ -205,9 +177,8 @@ const BCollapse = /*#__PURE__*/extend({
       const {
         target: el
       } = event;
-      // If we are in a nav/navbar, close the collapse when non-disabled link clicked
       /* istanbul ignore next: can't test `getComputedStyle()` in JSDOM */
-      if (!this.isNav || !el || getCS(this.$el).display !== 'block') {
+      if (!el || getCS(this.$el).display !== 'block') {
         return;
       }
       // Only close the collapse if it is not forced to be `display: block !important`
@@ -234,10 +205,6 @@ const BCollapse = /*#__PURE__*/extend({
       if (isThis && !show || !isThis && show) {
         this.toggle();
       }
-    },
-    handleResize() {
-      // Handler for orientation/resize to set collapsed state in nav/navbar
-      this.show = getCS(this.$el).display === 'block';
     }
   },
   render(h) {

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

@@ -165,7 +165,7 @@ const BVTabButton = /*#__PURE__*/extend({
 
 // --- Props ---
 
-const navProps = omit(props$1, ['tabs', 'isNavBar', 'cardHeader']);
+const navProps = omit(props$1, ['tabs', 'cardHeader']);
 const props = makePropsConfigurable(sortKeys({
   ...props$2,
   ...modelProps,

package/dist/vendor/bootstrap-vue/src/components/transition/bv-transition.js

@@ -36,6 +36,7 @@ const props = {
   // For user supplied transitions (if needed)
   transProps: makeProp(PROP_TYPE_OBJECT)
 };
+const hasAnimateSupport = Boolean(Element.prototype.animate);
 
 // --- Main component ---
 
@@ -67,8 +68,17 @@ const BVTransition = /*#__PURE__*/extend({
     transProps = {
       mode: props.mode,
       ...transProps,
-      // We always need `css` true
-      css: true
+      /*
+       bootstrap-vue says: We always need `css` true
+        @gitlab/ui says: OMG. THE FREAKING TRANSITIONS.
+       So apparently jsdom doesn't implement animations (who can blame them)
+       but a Vue Transition relies on the native animationend/transitionend
+       events in order to fire onAfterLeave. jsdom will never fire the `onAfterLeave`
+       which is relied on by e.g. the tooltip component to do it's `hidden` logic.
+        So if in specs, we set `css: false`, everything will work as expected.
+       The best way we have found is to do a feature detection on `Element.prototype.animate`
+       */
+      css: hasAnimateSupport
     };
     const dataCopy = {
       ...data

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

@@ -39,8 +39,6 @@ const NAME_INPUT_GROUP_TEXT = 'BInputGroupText';
 const NAME_LINK = 'BLink';
 const NAME_MODAL = 'BModal';
 const NAME_NAV = 'BNav';
-const NAME_NAVBAR = 'BNavbar';
-const NAME_NAVBAR_BRAND = 'BNavbarBrand';
 const NAME_NAV_ITEM = 'BNavItem';
 const NAME_NAV_ITEM_DROPDOWN = 'BNavItemDropdown';
 const NAME_POPOVER = 'BPopover';
@@ -74,4 +72,4 @@ const NAME_TRANSITION = 'BVTransition';
 const NAME_TRANSPORTER = 'BVTransporter';
 const NAME_TRANSPORTER_TARGET = 'BVTransporterTarget';
 
-export { NAME_BADGE, NAME_BREADCRUMB, NAME_BREADCRUMB_ITEM, NAME_BREADCRUMB_LINK, NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_BUTTON_GROUP, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INPUT, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_INPUT_GROUP, NAME_INPUT_GROUP_ADDON, NAME_INPUT_GROUP_APPEND, NAME_INPUT_GROUP_PREPEND, NAME_INPUT_GROUP_TEXT, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAVBAR, NAME_NAVBAR_BRAND, NAME_NAV_ITEM, NAME_NAV_ITEM_DROPDOWN, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };
+export { NAME_BADGE, NAME_BREADCRUMB, NAME_BREADCRUMB_ITEM, NAME_BREADCRUMB_LINK, NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_BUTTON_GROUP, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INPUT, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_INPUT_GROUP, NAME_INPUT_GROUP_ADDON, NAME_INPUT_GROUP_APPEND, NAME_INPUT_GROUP_PREPEND, NAME_INPUT_GROUP_TEXT, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAV_ITEM, NAME_NAV_ITEM_DROPDOWN, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };

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

@@ -33,7 +33,6 @@ const HAS_PASSIVE_EVENT_SUPPORT = (() => {
   }
   return passiveEventSupported;
 })();
-const HAS_TOUCH_SUPPORT = IS_BROWSER && ('ontouchstart' in DOCUMENT.documentElement || NAVIGATOR.maxTouchPoints > 0);
 const HAS_POINTER_EVENT_SUPPORT = IS_BROWSER && Boolean(WINDOW.PointerEvent || WINDOW.MSPointerEvent);
 
 /* istanbul ignore next: JSDOM only checks for 'IntersectionObserver' */
@@ -43,4 +42,4 @@ const HAS_INTERACTION_OBSERVER_SUPPORT = IS_BROWSER && 'IntersectionObserver' in
 // 'isIntersecting' in window.IntersectionObserverEntry.prototype &&
 'intersectionRatio' in WINDOW.IntersectionObserverEntry.prototype;
 
-export { DOCUMENT, HAS_DOCUMENT_SUPPORT, HAS_INTERACTION_OBSERVER_SUPPORT, HAS_MUTATION_OBSERVER_SUPPORT, HAS_NAVIGATOR_SUPPORT, HAS_PASSIVE_EVENT_SUPPORT, HAS_POINTER_EVENT_SUPPORT, HAS_TOUCH_SUPPORT, HAS_WINDOW_SUPPORT, IS_BROWSER, IS_IE, IS_JSDOM, NAVIGATOR, USER_AGENT, WINDOW };
+export { DOCUMENT, HAS_DOCUMENT_SUPPORT, HAS_INTERACTION_OBSERVER_SUPPORT, HAS_MUTATION_OBSERVER_SUPPORT, HAS_NAVIGATOR_SUPPORT, HAS_PASSIVE_EVENT_SUPPORT, HAS_POINTER_EVENT_SUPPORT, HAS_WINDOW_SUPPORT, IS_BROWSER, IS_IE, IS_JSDOM, NAVIGATOR, USER_AGENT, WINDOW };

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

@@ -43,8 +43,6 @@ export { BModal } from './components/modal/modal';
 export { BNav } from './components/nav/nav';
 export { BNavItem } from './components/nav/nav-item';
 export { BNavItemDropdown } from './components/nav/nav-item-dropdown';
-export { BNavbar } from './components/navbar/navbar';
-export { BNavbarBrand } from './components/navbar/navbar-brand';
 export { BPopover } from './components/popover/popover';
 export { BTable } from './components/table/table';
 export { BTableLite } from './components/table/table-lite';

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

@@ -1,7 +1,6 @@
 import Popper from 'popper.js';
 import { extend } from '../vue';
 import { NAME_DROPDOWN } from '../constants/components';
-import { HAS_TOUCH_SUPPORT } from '../constants/env';
 import { EVENT_NAME_SHOWN, EVENT_NAME_HIDDEN, EVENT_NAME_TOGGLE, EVENT_NAME_CLICK, EVENT_NAME_SHOW, EVENT_NAME_HIDE } from '../constants/events';
 import { CODE_ENTER, CODE_SPACE, CODE_DOWN, CODE_ESC, CODE_UP } from '../constants/key-codes';
 import { PLACEMENT_TOP_END, PLACEMENT_TOP_START, PLACEMENT_BOTTOM_START, PLACEMENT_RIGHT_START, PLACEMENT_LEFT_START, PLACEMENT_BOTTOM_END } from '../constants/popper';
@@ -10,7 +9,6 @@ import { HTMLElement } from '../constants/safe-types';
 import { BvEvent } from '../utils/bv-event.class';
 import { requestAF, contains, closest, attemptFocus, selectAll, isVisible } from '../utils/dom';
 import { getRootEventName, stopEvent } from '../utils/events';
-import { isNull } from '../utils/inspect';
 import { sortKeys, mergeDeep } from '../utils/object';
 import { makePropsConfigurable, makeProp } from '../utils/props';
 import { warn } from '../utils/warn';
@@ -68,11 +66,6 @@ const dropdownMixin = extend({
       getBvDropdown: () => this
     };
   },
-  inject: {
-    getBvNavbar: {
-      default: () => () => null
-    }
-  },
   props,
   data() {
     return {
@@ -81,12 +74,6 @@ const dropdownMixin = extend({
     };
   },
   computed: {
-    bvNavbar() {
-      return this.getBvNavbar();
-    },
-    inNavbar() {
-      return !isNull(this.bvNavbar);
-    },
     toggler() {
       const {
         toggle
@@ -107,10 +94,7 @@ const dropdownMixin = extend({
       // Position `static` is needed to allow menu to "breakout" of the `scrollParent`
       // boundaries when boundary is anything other than `scrollParent`
       // See: https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
-      return this.boundary !== 'scrollParent' && !this.inNavbar ? 'position-static' : '';
-    },
-    hideDelay() {
-      return this.inNavbar ? HAS_TOUCH_SUPPORT ? 300 : 50 : 0;
+      return this.boundary !== 'scrollParent' ? 'position-static' : '';
     }
   },
   watch: {
@@ -154,7 +138,6 @@ const dropdownMixin = extend({
   created() {
     // Create private non-reactive props
     this.$_popper = null;
-    this.$_hideTimeout = null;
   },
   /* istanbul ignore next */
   deactivated() {
@@ -170,7 +153,6 @@ const dropdownMixin = extend({
     this.visible = false;
     this.whileOpenListen(false);
     this.destroyPopper();
-    this.clearHideTimeout();
     removeElementToInstance(this.$el);
   },
   methods: {
@@ -187,20 +169,16 @@ const dropdownMixin = extend({
         /* istanbul ignore next */
         return;
       }
-
-      // Only instantiate Popper.js when dropdown is not in `<b-navbar>`
-      if (!this.inNavbar) {
-        if (typeof Popper === 'undefined') {
-          /* istanbul ignore next */
-          warn('Popper.js not found. Falling back to CSS positioning', NAME_DROPDOWN);
-        } else {
-          // For dropup with alignment we use the parent element as popper container
-          let el = this.dropup && this.right || this.split ? this.$el : this.$refs.toggle;
-          // Make sure we have a reference to an element, not a component!
-          el = el.$el || el;
-          // Instantiate Popper.js
-          this.createPopper(el);
-        }
+      if (typeof Popper === 'undefined') {
+        /* istanbul ignore next */
+        warn('Popper.js not found. Falling back to CSS positioning', NAME_DROPDOWN);
+      } else {
+        // For dropup with alignment we use the parent element as popper container
+        let el = this.dropup && this.right || this.split ? this.$el : this.$refs.toggle;
+        // Make sure we have a reference to an element, not a component!
+        el = el.$el || el;
+        // Instantiate Popper.js
+        this.createPopper(el);
       }
 
       // Ensure other menus are closed
@@ -239,10 +217,6 @@ const dropdownMixin = extend({
         this.$_popper.scheduleUpdate();
       } catch {}
     },
-    clearHideTimeout() {
-      clearTimeout(this.$_hideTimeout);
-      this.$_hideTimeout = null;
-    },
     getPopperConfig() {
       let placement = PLACEMENT_BOTTOM_START;
       if (this.dropup) {
@@ -393,8 +367,7 @@ const dropdownMixin = extend({
         target
       } = event;
       if (this.visible && !contains(this.$refs.menu, target) && !contains(this.toggler, target)) {
-        this.clearHideTimeout();
-        this.$_hideTimeout = setTimeout(() => this.hide(), this.hideDelay);
+        this.hide();
       }
     },
     // Document click-out listener

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "97.3.0",
+  "version": "98.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -204,6 +204,7 @@
     "vue": "2.7.16",
     "vue-loader": "^15.8.3",
     "vue-loader-vue3": "npm:vue-loader@17",
+    "vue-router": "^3.5.1",
     "vue-template-compiler": "2.7.16",
     "vue-test-utils-compat": "^0.0.10",
     "webpack": "^5.9.0",

package/src/index.js

@@ -18,7 +18,6 @@ export { default as GlNav } from './components/base/nav/nav.vue';
 export { default as GlNavItem } from './components/base/nav/nav_item.vue';
 export { default as GlFormCheckboxTree } from './components/base/form/form_checkbox_tree/form_checkbox_tree.vue';
 export { default as GlMarkdown } from './components/base/markdown/markdown.vue';
-export { default as GlNavbar } from './components/base/navbar/navbar.vue';
 export { default as GlIntersectionObserver } from './components/utilities/intersection_observer/intersection_observer.vue';
 export { default as GlLink, default as GlDeprecatedLink } from './components/base/link/link.vue';
 export { default as GlIcon } from './components/base/icon/icon.vue';

package/src/scss/bootstrap_vue.scss

@@ -16,7 +16,6 @@ $bv-enable-popover-variants: false;
 @import '../vendor/bootstrap-vue/src/components/input-group/index.scss';
 @import '../vendor/bootstrap-vue/src/components/modal/index.scss';
 @import '../vendor/bootstrap-vue/src/components/nav/index.scss';
-@import '../vendor/bootstrap-vue/src/components/navbar/index.scss';
 @import '../vendor/bootstrap-vue/src/components/popover/index.scss';
 @import '../vendor/bootstrap-vue/src/components/table/index.scss';
 @import '../vendor/bootstrap-vue/src/components/toast/index.scss';

package/src/scss/components.scss

@@ -53,7 +53,6 @@
 @import '../components/base/markdown/markdown';
 @import '../components/base/modal/modal';
 @import '../components/base/nav/nav';
-@import '../components/base/navbar/navbar';
 @import '../components/base/button/button';
 @import '../components/base/pagination/pagination';
 @import '../components/base/path/path';

package/src/tokens/action.tokens.json

@@ -210,7 +210,7 @@
           "default": {
             "$value": {
               "default": "{color.blue.500}",
-              "dark": "{color.blue.400}"
+              "dark": "{color.blue.200}"
             },
             "$type": "color",
             "$description": "Used for the foreground of a confirm (positive) action in the default state."
@@ -218,7 +218,7 @@
           "hover": {
             "$value": {
               "default": "{color.blue.700}",
-              "dark": "{color.blue.200}"
+              "dark": "{color.blue.100}"
             },
             "$type": "color",
             "$description": "Used for the foreground of a confirm (positive) action in the hover state."
@@ -231,7 +231,7 @@
           "active": {
             "$value": {
               "default": "{color.blue.900}",
-              "dark": "{color.blue.50}"
+              "dark": "{color.blue.100}"
             },
             "$type": "color",
             "$description": "Used for the foreground of a confirm (positive) action in the active state."
@@ -302,7 +302,7 @@
           "default": {
             "$value": {
               "default": "{color.red.500}",
-              "dark": "{color.red.400}"
+              "dark": "{color.red.200}"
             },
             "$type": "color",
             "$description": "Used for the foreground of a danger (destructive) action in the default state."
@@ -310,7 +310,7 @@
           "hover": {
             "$value": {
               "default": "{color.red.700}",
-              "dark": "{color.red.200}"
+              "dark": "{color.red.100}"
             },
             "$type": "color",
             "$description": "Used for the foreground of a danger (destructive) action in the hover state."
@@ -323,7 +323,7 @@
           "active": {
             "$value": {
               "default": "{color.red.900}",
-              "dark": "{color.red.50}"
+              "dark": "{color.red.100}"
             },
             "$type": "color",
             "$description": "Used for the foreground of a danger (destructive) action in the active state."
@@ -395,7 +395,7 @@
             "default": {
               "$value": {
                 "default": "{color.blue.500}",
-                "dark": "{color.blue.400}"
+                "dark": "{color.blue.300}"
               },
               "$type": "color",
               "$description": "Used for the background of a strong confirm action in the default state."
@@ -403,7 +403,7 @@
             "hover": {
               "$value": {
                 "default": "{color.blue.600}",
-                "dark": "{color.blue.300}"
+                "dark": "{color.blue.200}"
               },
               "$type": "color",
               "$description": "Used for the background of a strong confirm action in the hover state."
@@ -416,7 +416,7 @@
             "active": {
               "$value": {
                 "default": "{color.blue.700}",
-                "dark": "{color.blue.200}"
+                "dark": "{color.blue.400}"
               },
               "$type": "color",
               "$description": "Used for the background of a strong confirm action in the active state."
@@ -520,17 +520,26 @@
               "$description": "Used for the foreground of a strong neutral action in the default state."
             },
             "hover": {
-              "$value": "{action.strong.neutral.foreground.color.default}",
+              "$value": {
+                "default": "{action.strong.neutral.foreground.color.default}",
+                "dark": "{color.neutral.0}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a strong neutral action in the hover state."
             },
             "focus": {
-              "$value": "{action.strong.neutral.foreground.color.hover}",
+              "$value": {
+                "default": "{action.strong.neutral.foreground.color.hover}",
+                "dark": "{color.neutral.0}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a strong neutral action in the focus state."
             },
             "active": {
-              "$value": "{action.strong.neutral.foreground.color.focus}",
+              "$value": {
+                "default": "{action.strong.neutral.foreground.color.focus}",
+                "dark": "{color.neutral.0}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a strong neutral action in the active state."
             }

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

@@ -579,6 +579,7 @@
   --gl-button-confirm-primary-border-color-active: var(--gl-color-blue-900); /* Used for the border of a confirm (positive) primary button in the active state. */
   --gl-button-confirm-primary-border-color-hover: var(--gl-color-blue-800); /* Used for the border of a confirm (positive) primary button in the hover state. */
   --gl-button-confirm-primary-border-color-default: var(--gl-color-blue-600); /* Used for the border of a confirm (positive) primary button in the default state. */
+  --gl-button-confirm-primary-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a confirm (positive) primary button in the default state. */
   --gl-button-default-tertiary-background-color-active: var(--gl-action-neutral-background-color-active); /* Used for the background of a default borderless, tertiary button in the active state. */
   --gl-button-default-tertiary-background-color-hover: var(--gl-action-neutral-background-color-hover); /* Used for the background of a default borderless, tertiary button in the hover state. */
   --gl-button-default-tertiary-background-color-default: var(--gl-action-neutral-background-color-default); /* Used for the background of a default borderless, tertiary button in the default state. */
@@ -835,7 +836,6 @@
   --gl-button-confirm-primary-background-color-active: var(--gl-action-strong-confirm-background-color-active); /* Used for the background of a confirm (positive) primary button in the active state. */
   --gl-button-confirm-primary-background-color-hover: var(--gl-action-strong-confirm-background-color-hover); /* Used for the background of a confirm (positive) primary button in the hover state. */
   --gl-button-confirm-primary-background-color-default: var(--gl-action-strong-confirm-background-color-default); /* Used for the background of a confirm (positive) primary button in the default state. */
-  --gl-button-confirm-primary-foreground-color-default: var(--gl-action-strong-confirm-foreground-color-default); /* Used for the foreground of a confirm (positive) primary button in the default state. */
   --gl-button-default-tertiary-border-color-default: var(--gl-action-neutral-border-color-default); /* Used for the border of a default borderless, tertiary button in the default state. */
   --gl-button-default-tertiary-background-color-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of a default borderless, tertiary button in the focus state. */
   --gl-button-default-tertiary-foreground-color-default: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a default borderless, tertiary button in the default state. */