@gitlab/ui 127.1.1 → 128.1.0

package/src/components/base/form/form_checkbox/form_checkbox_group.vue

@@ -1,44 +1,171 @@
 <script>
+import uniqueId from 'lodash/uniqueId';
+import isBoolean from 'lodash/isBoolean';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
+import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
 import { formOptionsMixin } from '../../../../vendor/bootstrap-vue/src/mixins/form-options';
-import { BFormCheckboxGroup } from '../../../../vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox-group';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormCheckbox from './form_checkbox.vue';
 
+// Attributes to pass down to checks/radios instead of applying them to the group
+const PASS_DOWN_ATTRS = ['aria-describedby', 'aria-labelledby'];
+
 export default {
   name: 'GlFormCheckboxGroup',
-  components: { BFormCheckboxGroup, GlFormCheckbox },
+  components: { GlFormCheckbox },
   directives: {
     SafeHtml,
   },
   mixins: [formOptionsMixin],
+  provide() {
+    return {
+      getGroup: () => this,
+    };
+  },
   inheritAttrs: false,
   model: {
     prop: 'checked',
     event: 'input',
   },
+  props: {
+    /**
+     * Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed.
+     */
+    id: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * The current value of the checkbox.
+     */
+    checked: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    /**
+     * Array of items to render in the component
+     */
+    options: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    /**
+     * When set to `true`, disables the component's functionality and places it in a disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Sets the value of the `name` attribute on the form control.
+     */
+    name: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Adds the `required` attribute to the form control.
+     */
+    required: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state.
+     */
+    state: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
+    /**
+     * Optional value to set for the 'aria-invalid' attribute. Supported values are 'true' and 'false'. If not set, the 'state' prop will dictate the value
+     */
+    ariaInvalid: {
+      type: [Boolean, String],
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      internalId: this.id ? this.id : uniqueId('gitlab_ui_checkbox_group_'),
+      localChecked: this.checked,
+    };
+  },
+  computed: {
+    computedState() {
+      return isBoolean(this.state) ? this.state : null;
+    },
+    stateClass() {
+      if (this.computedState === true) return 'is-valid';
+      if (this.computedState === false) return 'is-invalid';
+      return null;
+    },
+    computedAriaInvalid() {
+      const { ariaInvalid } = this;
+      if (ariaInvalid === true || ariaInvalid === 'true' || ariaInvalid === '') {
+        return 'true';
+      }
+      return this.computedState === false ? 'true' : ariaInvalid;
+    },
+    computedAttrs() {
+      return {
+        ...omit(this.$attrs, PASS_DOWN_ATTRS),
+        id: this.internalId,
+        'aria-invalid': this.computedAriaInvalid,
+        'aria-required': this.required || null,
+      };
+    },
+    passDownAttrs() {
+      return pick(this.$attrs, PASS_DOWN_ATTRS);
+    },
+    groupName() {
+      // Checks/Radios tied to the same model must have the same name,
+      // especially for ARIA accessibility
+      return this.name || this.internalId;
+    },
+  },
+  watch: {
+    checked(newValue) {
+      if (!looseEqual(newValue, this.localChecked)) {
+        this.localChecked = newValue;
+      }
+    },
+    localChecked(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        this.$emit('input', newValue);
+      }
+    },
+  },
 };
 </script>
 
 <template>
-  <div>
-    <b-form-checkbox-group
-      v-bind="$attrs"
-      class="gl-form-checkbox-group"
-      stacked
-      @change="$emit('change', $event)"
-      @input="$emit('input', $event)"
+  <div
+    v-bind="computedAttrs"
+    role="group"
+    tabindex="-1"
+    class="gl-form-checkbox-group gl-outline-none"
+  >
+    <slot name="first"></slot>
+    <gl-form-checkbox
+      v-for="(option, idx) in formOptions"
+      v-bind="passDownAttrs"
+      :key="idx"
+      :value="option.value"
+      :disabled="option.disabled"
     >
-      <slot name="first"></slot>
-      <gl-form-checkbox
-        v-for="(option, idx) in formOptions"
-        :key="idx"
-        :value="option.value"
-        :disabled="option.disabled"
-      >
-        <span v-if="option.html" v-safe-html="option.html"></span>
-        <span v-else>{{ option.text }}</span>
-      </gl-form-checkbox>
-      <slot></slot>
-    </b-form-checkbox-group>
+      <span v-if="option.html" v-safe-html="option.html"></span>
+      <span v-else>{{ option.text }}</span>
+    </gl-form-checkbox>
+    <slot></slot>
   </div>
 </template>

package/src/components/base/form/form_group/form_group.vue

@@ -8,6 +8,9 @@ export default {
   components: {
     BFormGroup,
   },
+  provide: {
+    isInFormGroup: true,
+  },
   inheritAttrs: false,
   props: {
     /**

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -138,6 +138,26 @@ export default {
         return ['menu', 'listbox', 'tree', 'grid', 'dialog', true, false].includes(value);
       },
     },
+    activeItemId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    hasExternalLabel: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    hasSearchableListbox: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDisclosure: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     /**
      * Id that will be referenced by `aria-labelledby` attribute of the dropdown content`
      */
@@ -145,6 +165,15 @@ export default {
       type: String,
       required: true,
     },
+    /**
+     * Span Id that will be referenced by listbox `aria-labelledby` if there's an external label.
+     * This prop will only be defined by `GlCollapsibleListbox` when `isInFormGroup` injected is true.
+     */
+    listboxId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     /**
      * The `aria-labelledby` attribute value for the  toggle `button`
      */
@@ -187,6 +216,10 @@ export default {
     };
   },
   computed: {
+    ariaActiveDescendant() {
+      if (!this.isDisclosure && this.visible) return this.activeItemId;
+      return undefined;
+    },
     hasNoVisibleToggleText() {
       return !this.toggleText?.length || this.textSrOnly;
     },
@@ -199,12 +232,47 @@ export default {
     isCaretOnly() {
       return !this.noCaret && !this.icon && this.hasNoVisibleToggleText;
     },
-    ariaAttributes() {
+    isDefaultToggle() {
+      return !this.$scopedSlots.toggle;
+    },
+    isToggleCombobox() {
+      if (this.hasSearchableListbox || this.isDisclosure) {
+        return false;
+      }
+      return true;
+    },
+    isToggleLabelledExternally() {
+      if (this.hasExternalLabel && this.toggleId) return true;
+      return false;
+    },
+    computedToggleId() {
+      if (this.isDisclosure) {
+        return this.isDefaultToggle ? this.toggleId : undefined;
+      }
+      if (this.isToggleLabelledExternally) {
+        return this.isDefaultToggle ? this.toggleId : undefined;
+      }
+      if (this.hasSearchableListbox) {
+        return this.toggleId;
+      }
+      return undefined;
+    },
+    computedToggleInnerId() {
+      if (this.isToggleCombobox && !this.isToggleLabelledExternally) {
+        return this.toggleId;
+      }
+      if (this.isToggleCombobox && this.isToggleLabelledExternally) {
+        return this.listboxId;
+      }
+      return undefined;
+    },
+    toggleAriaAttributes() {
       return {
-        'aria-haspopup': this.ariaHaspopup,
-        'aria-expanded': String(this.visible),
         'aria-controls': this.baseDropdownId,
+        'aria-expanded': String(this.visible),
+        'aria-haspopup': this.ariaHaspopup,
         'aria-labelledby': this.toggleLabelledBy,
+        'aria-activedescendant': this.ariaActiveDescendant,
       };
     },
     toggleButtonClasses() {
@@ -223,10 +291,28 @@ export default {
       return this.block ? 'gl-w-full' : '';
     },
     toggleLabelledBy() {
+      if (this.isToggleCombobox) {
+        if (this.ariaLabelledby) {
+          return `${this.ariaLabelledby} ${this.toggleId}`;
+        }
+        return this.toggleId;
+      }
+
+      // For non-combobox toggles, combine IDs or use the button's own text
       return this.ariaLabelledby ? `${this.ariaLabelledby} ${this.toggleId}` : undefined;
     },
-    isDefaultToggle() {
-      return !this.$scopedSlots.toggle;
+    toggleRole() {
+      if (this.isToggleCombobox) {
+        return 'combobox';
+      }
+      return undefined;
+    },
+    toggleAccessibilityAttributes() {
+      return {
+        ...this.toggleAriaAttributes,
+        id: this.toggleId,
+        role: this.toggleRole,
+      };
     },
     toggleOptions() {
       if (this.isDefaultToggle) {
@@ -241,7 +327,8 @@ export default {
           disabled: this.disabled,
           loading: this.loading,
           class: this.toggleButtonClasses,
-          ...this.ariaAttributes,
+          role: this.toggleRole,
+          ...this.toggleAriaAttributes,
           listeners: {
             keydown: (event) => this.onKeydown(event),
             click: (event) => this.toggle(event),
@@ -264,7 +351,6 @@ export default {
 
     toggleAttributes() {
       const { listeners, is, ...attributes } = this.toggleOptions;
-
       return attributes;
     },
     toggleComponent() {
@@ -325,18 +411,6 @@ export default {
       };
     },
   },
-  watch: {
-    ariaAttributes: {
-      deep: true,
-      handler(ariaAttributes) {
-        if (this.$scopedSlots.toggle) {
-          Object.keys(ariaAttributes).forEach((key) => {
-            this.toggleElement.setAttribute(key, ariaAttributes[key]);
-          });
-        }
-      },
-    },
-  },
   mounted() {
     this.checkToggleFocusable();
   },
@@ -593,14 +667,19 @@ export default {
     <component
       :is="toggleComponent"
       v-bind="toggleAttributes"
-      :id="toggleId"
+      :id="computedToggleId"
       ref="toggle"
       data-testid="base-dropdown-toggle"
       v-on="toggleListeners"
     >
       <!-- @slot Custom toggle button content -->
-      <slot name="toggle">
-        <span class="gl-new-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
+      <slot name="toggle" :accessibility-attributes="toggleAccessibilityAttributes">
+        <span
+          :id="computedToggleInnerId"
+          class="gl-new-dropdown-button-text"
+          :class="{ 'gl-sr-only': textSrOnly }"
+          data-testid="base-dropdown-span"
+        >
           {{ toggleText }}
         </span>
         <gl-icon

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -389,14 +389,15 @@ export default {
     :fluid-width="fluidWidth"
     :positioning-strategy="positioningStrategy"
     class="gl-disclosure-dropdown"
+    is-disclosure
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
     @[$options.events.GL_DROPDOWN_BEFORE_CLOSE]="onBeforeClose"
     @[$options.events.GL_DROPDOWN_FOCUS_CONTENT]="onKeydown"
   >
-    <template v-if="hasCustomToggle" #toggle>
+    <template v-if="hasCustomToggle" #toggle="slotProps">
       <!-- @slot Custom toggle content -->
-      <slot name="toggle"></slot>
+      <slot name="toggle" v-bind="slotProps"></slot>
     </template>
 
     <!-- @slot Content to display in dropdown header -->

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -11,6 +11,7 @@ import {
   ARROW_DOWN,
   ARROW_UP,
   GL_DROPDOWN_CONTENTS_CLASS,
+  GL_DROPDOWN_FOCUS_CONTENT,
   POSITION_ABSOLUTE,
   POSITION_FIXED,
 } from '../constants';
@@ -53,6 +54,7 @@ export default {
   events: {
     GL_DROPDOWN_SHOWN,
     GL_DROPDOWN_HIDDEN,
+    GL_DROPDOWN_FOCUS_CONTENT,
   },
   components: {
     GlBaseDropdown,
@@ -64,6 +66,11 @@ export default {
     GlLoadingIcon,
     GlIntersectionObserver,
   },
+  inject: {
+    isInFormGroup: {
+      default: false,
+    },
+  },
   model: {
     prop: 'selected',
     event: 'select',
@@ -211,7 +218,7 @@ export default {
     },
     /**
      * The `aria-labelledby` attribute value for the toggle button
-     * Provide the string of ids seperated by space
+     * Provide the string of IDs seperated by space
      */
     toggleAriaLabelledBy: {
       type: String,
@@ -220,7 +227,7 @@ export default {
     },
     /**
      * The `aria-labelledby` attribute value for the list of options
-     * Provide the string of ids seperated by space
+     * Provide the string of IDs seperated by space
      */
     listAriaLabelledBy: {
       type: String,
@@ -382,15 +389,42 @@ export default {
     };
   },
   computed: {
-    ariaLabelledByID() {
-      if (this.searchable) {
-        return this.searchInputId;
-      }
+    /**
+     * Determines the `aria-labelledby` attribute value for the listbox by
+     * evaluating a series of conditions in priority order. The returned ID
+     * references the element that best describes the listbox content, with
+     * preference given to headers in searchable lists, followed by search
+     * input, form labels, and finally fallback options.
+     */
+    listboxAriaLabelledByID() {
+      // Listbox is labelled by closest heading, creating a meaningful relationship
+      if (this.headerId && this.searchable) return `${this.headerId}`;
+
+      // Listbox is labelled by the search input with role="combobox"
+      if (this.searchable) return this.searchInputId;
+
+      // Listbox is labelledy by the text inside an externally labelled button
+      if (this.isInFormGroup) return this.listboxIdComputed;
+
+      // Fallback. Return a header ID or the toggle button ID.
       return this.listAriaLabelledBy || this.headerId || this.toggleIdComputed;
     },
     toggleIdComputed() {
       return this.toggleId || uniqueId('dropdown-toggle-btn-');
     },
+    // Generate a custom listbox ID when inside GlFormGroup
+    listboxIdComputed() {
+      if (this.isInFormGroup) {
+        if (this.listAriaLabelledBy) {
+          return this.listAriaLabelledBy;
+        }
+        if (this.toggleId) {
+          return `${this.toggleId}-span`;
+        }
+        return uniqueId('dropdown-toggle-span-');
+      }
+      return undefined;
+    },
     listboxTag() {
       if (!this.hasItems || isOption(this.items[0])) return 'ul';
       return 'div';
@@ -606,6 +640,10 @@ export default {
     this.scrollObserver?.disconnect();
   },
   methods: {
+    onFocusContent(event) {
+      event.preventDefault();
+      this.open();
+    },
     open() {
       this.$refs.baseDropdown.open();
     },
@@ -922,8 +960,12 @@ export default {
   <gl-base-dropdown
     ref="baseDropdown"
     aria-haspopup="listbox"
+    :active-item-id="activeItemId"
     :aria-labelledby="toggleAriaLabelledBy"
     :block="block"
+    :has-searchable-listbox="searchable"
+    :has-external-label="isInFormGroup"
+    :listbox-id="listboxIdComputed"
     :toggle-id="toggleIdComputed"
     :toggle-text="listboxToggleText"
     :toggle-class="toggleButtonClasses"
@@ -939,12 +981,13 @@ export default {
     :offset="dropdownOffset"
     :fluid-width="fluidWidth"
     :positioning-strategy="positioningStrategy"
+    @[$options.events.GL_DROPDOWN_FOCUS_CONTENT]="onFocusContent"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
   >
-    <template v-if="hasCustomToggle" #toggle>
+    <template v-if="hasCustomToggle" #toggle="slotProps">
       <!-- @slot Custom toggle content -->
-      <slot name="toggle"></slot>
+      <slot name="toggle" v-bind="slotProps"></slot>
     </template>
 
     <template #default="{ visible }">
@@ -1013,7 +1056,7 @@ export default {
         :id="listboxId"
         ref="list"
         :aria-busy="isBusy"
-        :aria-labelledby="ariaLabelledByID"
+        :aria-labelledby="listboxAriaLabelledByID"
         :aria-multiselectable="multiple ? 'true' : undefined"
         role="listbox"
         class="gl-new-dropdown-contents gl-new-dropdown-contents-with-scrim-overlay"

package/src/scss/bootstrap_vue.scss

@@ -7,7 +7,6 @@ $bv-enable-popover-variants: false;
 @import '../vendor/bootstrap-vue/src/utilities.scss';
 
 @import '../vendor/bootstrap-vue/src/components/dropdown/index.scss';
-@import '../vendor/bootstrap-vue/src/components/form-checkbox/index.scss';
 @import '../vendor/bootstrap-vue/src/components/form-input/index.scss';
 @import '../vendor/bootstrap-vue/src/components/form-radio/index.scss';
 @import '../vendor/bootstrap-vue/src/components/modal/index.scss';

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

@@ -4,14 +4,14 @@
 
 :root, .gl-light-scope {
   --gl-border-radius-full: 9999px;
-  --gl-color-alpha-0: transparent;
-  --gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
-  --gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
-  --gl-color-alpha-dark-6: rgba(05, 05, 06, 0.06);
-  --gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
-  --gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
-  --gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
-  --gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
+  --gl-color-alpha-0: rgba(0, 0, 0, 0);
+  --gl-color-alpha-dark-2: rgba(5, 5, 6, 0.02);
+  --gl-color-alpha-dark-4: rgba(5, 5, 6, 0.04);
+  --gl-color-alpha-dark-6: rgba(5, 5, 6, 0.06);
+  --gl-color-alpha-dark-8: rgba(5, 5, 6, 0.08);
+  --gl-color-alpha-dark-16: rgba(5, 5, 6, 0.16);
+  --gl-color-alpha-dark-24: rgba(5, 5, 6, 0.24);
+  --gl-color-alpha-dark-40: rgba(5, 5, 6, 0.4);
   --gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
   --gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
   --gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
@@ -316,13 +316,13 @@
   --gl-zindex-4: 4;
   --gl-zindex-200: 200;
   --gl-zindex-9999: 9999;
-  --gl-avatar-fallback-background-color-red: #fcb5aa3d; /** Red background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-purple: #cbbbf23d; /** Purple background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-blue: #9dc7f13d; /** Blue background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-green: #91d4a83d; /** Green background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-orange: #e9be743d; /** Orange background for avatar fallback with no particular meaning. */
-  --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /** Neutral background for avatar fallback with no particular meaning. */
-  --gl-chart-threshold-area-color: rgba(221,43,14,0.1); /** Used in charts to delineate a threshold area in a chart. */
+  --gl-avatar-fallback-background-color-red: rgba(252, 181, 170, 0.23921568627450981); /** Red background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-purple: rgba(203, 187, 242, 0.23921568627450981); /** Purple background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-blue: rgba(157, 199, 241, 0.23921568627450981); /** Blue background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-green: rgba(145, 212, 168, 0.23921568627450981); /** Green background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-orange: rgba(233, 190, 116, 0.23921568627450981); /** Orange background for avatar fallback with no particular meaning. */
+  --gl-avatar-fallback-background-color-neutral: rgba(191, 191, 195, 0.23921568627450981); /** Neutral background for avatar fallback with no particular meaning. */
+  --gl-chart-threshold-area-color: rgba(221, 43, 14, 0.1); /** Used in charts to delineate a threshold area in a chart. */
   --gl-illustration-stroke-color-default: #171321; /** Default stroke color to define shape and provide essential detail. */
   --gl-illustration-stroke-width-default: 2; /** Default stroke width to define shape and provide essential detail. */
   --gl-illustration-fill-color-default: #fff; /** Default fill color for an element where specific meaning or emphasis is not required. */
@@ -562,12 +562,12 @@
   --brand-gray-03: #74717a; /** Use color.brand-gray.03 instead. */
   --brand-gray-04: #45424d; /** Use color.brand-gray.04 instead. */
   --brand-gray-05: #2b2838; /** Use color.brand-gray.05 instead. */
-  --t-gray-a-16: rgba(05, 05, 06, 0.16); /** Use color.alpha.dark.16 instead. */
-  --t-gray-a-24: rgba(05, 05, 06, 0.24); /** Use color.alpha.dark.24 instead. */
-  --t-gray-a-02: rgba(05, 05, 06, 0.02); /** Use color.alpha.dark.2 instead. */
-  --t-gray-a-04: rgba(05, 05, 06, 0.04); /** Use color.alpha.dark.4 instead. */
-  --t-gray-a-06: rgba(05, 05, 06, 0.06); /** Use color.alpha.dark.6 instead. */
-  --t-gray-a-08: rgba(05, 05, 06, 0.08); /** Use color.alpha.dark.8 instead. */
+  --t-gray-a-16: rgba(5, 5, 6, 0.16); /** Use color.alpha.dark.16 instead. */
+  --t-gray-a-24: rgba(5, 5, 6, 0.24); /** Use color.alpha.dark.24 instead. */
+  --t-gray-a-02: rgba(5, 5, 6, 0.02); /** Use color.alpha.dark.2 instead. */
+  --t-gray-a-04: rgba(5, 5, 6, 0.04); /** Use color.alpha.dark.4 instead. */
+  --t-gray-a-06: rgba(5, 5, 6, 0.06); /** Use color.alpha.dark.6 instead. */
+  --t-gray-a-08: rgba(5, 5, 6, 0.08); /** Use color.alpha.dark.8 instead. */
   --t-white-a-16: rgba(255, 255, 255, 0.16); /** Use color.alpha.light.16 instead. */
   --t-white-a-24: rgba(255, 255, 255, 0.24); /** Use color.alpha.light.24 instead. */
   --t-white-a-36: rgba(255, 255, 255, 0.36); /** Use color.alpha.light.36 instead. */
@@ -575,13 +575,13 @@
   --t-white-a-04: rgba(255, 255, 255, 0.04); /** Use color.alpha.light.4 instead. */
   --t-white-a-06: rgba(255, 255, 255, 0.06); /** Use color.alpha.light.6 instead. */
   --t-white-a-08: rgba(255, 255, 255, 0.08); /** Use color.alpha.light.8 instead. */
-  --gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); /** Used for the background of a neutral action in the default state. */
+  --gl-action-neutral-background-color-default: rgba(164, 163, 168, 0); /** Used for the background of a neutral action in the default state. */
   --gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); /** Used for the background of a neutral action in the hover state. */
   --gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); /** Used for the background of a neutral action in the active state. */
-  --gl-action-confirm-background-color-default: rgba(99, 166, 233, 0.0); /** Used for the background of a confirm (positive) action in the default state. */
+  --gl-action-confirm-background-color-default: rgba(99, 166, 233, 0); /** Used for the background of a confirm (positive) action in the default state. */
   --gl-action-confirm-background-color-hover: rgba(99, 166, 233, 0.16); /** Used for the background of a confirm (positive) action in the hover state. */
   --gl-action-confirm-background-color-active: rgba(11, 92, 173, 0.24); /** Used for the background of a confirm (positive) action in the active state. */
-  --gl-action-danger-background-color-default: rgba(245, 127, 108, 0.0); /** Used for the background of a danger (destructive) action in the default state. */
+  --gl-action-danger-background-color-default: rgba(245, 127, 108, 0); /** Used for the background of a danger (destructive) action in the default state. */
   --gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); /** Used for the background of a danger (destructive) action in the hover state. */
   --gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); /** Used for the background of a danger (destructive) action in the active state. */
   --gl-letter-spacing-heading: -0.01em;