@gitlab/ui 80.11.0 → 80.12.0

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

@@ -2,15 +2,43 @@
 // Automatically generated
 // Do not edit directly
 
-$gl-text-color-disabled: #89888d !default; // Used for disabled text.
-$gl-text-color-link: #63a6e9 !default; // Used for default text links.
-$gl-text-color-heading: #fff !default; // Used for headings level 1-6.
-$gl-text-color-strong: #fff !default; // Used for text with the highest contrast.
-$gl-text-color-subtle: #bfbfc3 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
-$gl-text-color-default: #ececef !default; // Used for the default text color.
 $gl-text-tertiary: #737278 !default; // Use text.color.disabled instead
 $gl-text-secondary: #89888d !default; // Use text.color.subtle instead
 $gl-text-primary: #ececef !default; // Use text.color.default instead
+$gl-line-height-52: 3.25rem;
+$gl-line-height-44: 2.75rem;
+$gl-line-height-42: 2.625rem;
+$gl-line-height-36: 2.25rem;
+$gl-line-height-32: 2rem;
+$gl-line-height-28: 1.75rem;
+$gl-line-height-24: 1.5rem;
+$gl-line-height-20: 1.25rem;
+$gl-line-height-16: 1rem;
+$gl-line-height-12: 0.75rem;
+$t-white-a-08: rgba(255, 255, 255, 0.08) !default;
+$t-white-a-06: rgba(255, 255, 255, 0.06) !default;
+$t-white-a-04: rgba(255, 255, 255, 0.04) !default;
+$t-white-a-02: rgba(255, 255, 255, 0.02) !default;
+$t-white-a-36: rgba(255, 255, 255, 0.36) !default;
+$t-white-a-24: rgba(255, 255, 255, 0.24) !default;
+$t-white-a-16: rgba(255, 255, 255, 0.16) !default;
+$t-gray-a-08: rgba(31, 30, 36, 0.08) !default;
+$t-gray-a-06: rgba(31, 30, 36, 0.06) !default;
+$t-gray-a-04: rgba(31, 30, 36, 0.04) !default;
+$t-gray-a-02: rgba(31, 30, 36, 0.02) !default;
+$t-gray-a-24: rgba(31, 30, 36, 0.24) !default;
+$t-gray-a-16: rgba(31, 30, 36, 0.16) !default;
+$brand-gray-05: #2b2838 !default;
+$brand-gray-04: #45424d !default;
+$brand-gray-03: #74717a !default;
+$brand-gray-02: #a2a1a6 !default;
+$brand-gray-01: #d1d0d3 !default;
+$brand-purple-02: #7759c2 !default;
+$brand-purple-01: #a989f5 !default;
+$brand-orange-03: #e24329 !default;
+$brand-orange-02: #fc6d26 !default;
+$brand-orange-01: #fca326 !default;
+$brand-charcoal: #171321 !default;
 $red-950: #fff4f3 !default;
 $red-900: #fcf1ef !default;
 $red-800: #fdd4cd !default;
@@ -207,3 +235,80 @@ $data-viz-green-300: #366800 !default;
 $data-viz-green-200: #275600 !default;
 $data-viz-green-100: #1a4500 !default;
 $data-viz-green-50: #133a03 !default;
+$gl-color-red-950: #4d0a00;
+$gl-color-red-900: #660e00;
+$gl-color-red-800: #8d1300;
+$gl-color-red-700: #ae1800;
+$gl-color-red-600: #c91c00;
+$gl-color-red-500: #dd2b0e;
+$gl-color-red-400: #ec5941;
+$gl-color-red-300: #f57f6c;
+$gl-color-red-200: #fcb5aa;
+$gl-color-red-100: #fdd4cd;
+$gl-color-red-50: #fcf1ef;
+$gl-color-purple-950: #232150;
+$gl-color-purple-900: #2f2a6b;
+$gl-color-purple-800: #453894;
+$gl-color-purple-700: #5943b6;
+$gl-color-purple-600: #694cc0;
+$gl-color-purple-500: #7b58cf;
+$gl-color-purple-400: #9475db;
+$gl-color-purple-300: #ac93e6;
+$gl-color-purple-200: #cbbbf2;
+$gl-color-purple-100: #e1d8f9;
+$gl-color-purple-50: #f4f0ff;
+$gl-color-orange-950: #421f00;
+$gl-color-orange-900: #5c2900;
+$gl-color-orange-800: #703800;
+$gl-color-orange-700: #8f4700;
+$gl-color-orange-600: #9e5400;
+$gl-color-orange-500: #ab6100;
+$gl-color-orange-400: #c17d10;
+$gl-color-orange-300: #d99530;
+$gl-color-orange-200: #e9be74;
+$gl-color-orange-100: #f5d9a8;
+$gl-color-orange-50: #fdf1dd;
+$gl-color-green-950: #072b15;
+$gl-color-green-900: #0a4020;
+$gl-color-green-800: #0d532a;
+$gl-color-green-700: #24663b;
+$gl-color-green-600: #217645;
+$gl-color-green-500: #108548;
+$gl-color-green-400: #2da160;
+$gl-color-green-300: #52b87a;
+$gl-color-green-200: #91d4a8;
+$gl-color-green-100: #c3e6cd;
+$gl-color-green-50: #ecf4ee;
+$gl-color-neutral-1000: #000;
+$gl-color-neutral-950: #1f1e24;
+$gl-color-neutral-900: #333238;
+$gl-color-neutral-800: #434248;
+$gl-color-neutral-700: #535158;
+$gl-color-neutral-600: #626168;
+$gl-color-neutral-500: #737278;
+$gl-color-neutral-400: #89888d;
+$gl-color-neutral-300: #a4a3a8;
+$gl-color-neutral-200: #bfbfc3;
+$gl-color-neutral-100: #dcdcde;
+$gl-color-neutral-50: #ececef;
+$gl-color-neutral-10: #fbfafd;
+$gl-color-neutral-0: #fff;
+$gl-color-blue-950: #002850;
+$gl-color-blue-900: #033464;
+$gl-color-blue-800: #064787;
+$gl-color-blue-700: #0b5cad;
+$gl-color-blue-600: #1068bf;
+$gl-color-blue-500: #1f75cb;
+$gl-color-blue-400: #428fdc;
+$gl-color-blue-300: #63a6e9;
+$gl-color-blue-200: #9dc7f1;
+$gl-color-blue-100: #cbe2f9;
+$gl-color-blue-50: #e9f3fc;
+$gl-text-color-disabled: $gl-color-neutral-400 !default; // Used for disabled text.
+$gl-text-color-success: $gl-color-green-300 !default; // Used for text indicating success or validity.
+$gl-text-color-danger: $gl-color-red-300 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+$gl-text-color-link: $gl-color-blue-300 !default; // Used for default text links.
+$gl-text-color-heading: $gl-color-neutral-0 !default; // Used for headings level 1-6.
+$gl-text-color-strong: $gl-color-neutral-0 !default; // Used for text with the highest contrast.
+$gl-text-color-subtle: $gl-color-neutral-200 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
+$gl-text-color-default: $gl-color-neutral-50 !default; // Used for the default text color.

package/dist/tokens/scss/_tokens.scss

@@ -2,14 +2,6 @@
 // Automatically generated
 // Do not edit directly
 
-$gl-text-color-disabled: #89888d !default; // Used for disabled text.
-$gl-text-color-success: #217645 !default; // Used for text indicating success or validity.
-$gl-text-color-danger: #c91c00 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-$gl-text-color-link: #0b5cad !default; // Used for default text links.
-$gl-text-color-heading: #1f1e24 !default; // Used for headings level 1-6.
-$gl-text-color-strong: #1f1e24 !default; // Used for text with the highest contrast.
-$gl-text-color-subtle: #626168 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
-$gl-text-color-default: #434248 !default; // Used for the default text color.
 $gl-text-tertiary: #89888d !default; // Use text.color.disabled instead
 $gl-text-secondary: #737278 !default; // Use text.color.subtle instead
 $gl-text-primary: #333238 !default; // Use text.color.default instead
@@ -243,3 +235,80 @@ $data-viz-green-300: #94c25e !default;
 $data-viz-green-200: #b0d97b !default;
 $data-viz-green-100: #c6ed94 !default;
 $data-viz-green-50: #ddfab7 !default;
+$gl-color-red-950: #4d0a00;
+$gl-color-red-900: #660e00;
+$gl-color-red-800: #8d1300;
+$gl-color-red-700: #ae1800;
+$gl-color-red-600: #c91c00;
+$gl-color-red-500: #dd2b0e;
+$gl-color-red-400: #ec5941;
+$gl-color-red-300: #f57f6c;
+$gl-color-red-200: #fcb5aa;
+$gl-color-red-100: #fdd4cd;
+$gl-color-red-50: #fcf1ef;
+$gl-color-purple-950: #232150;
+$gl-color-purple-900: #2f2a6b;
+$gl-color-purple-800: #453894;
+$gl-color-purple-700: #5943b6;
+$gl-color-purple-600: #694cc0;
+$gl-color-purple-500: #7b58cf;
+$gl-color-purple-400: #9475db;
+$gl-color-purple-300: #ac93e6;
+$gl-color-purple-200: #cbbbf2;
+$gl-color-purple-100: #e1d8f9;
+$gl-color-purple-50: #f4f0ff;
+$gl-color-orange-950: #421f00;
+$gl-color-orange-900: #5c2900;
+$gl-color-orange-800: #703800;
+$gl-color-orange-700: #8f4700;
+$gl-color-orange-600: #9e5400;
+$gl-color-orange-500: #ab6100;
+$gl-color-orange-400: #c17d10;
+$gl-color-orange-300: #d99530;
+$gl-color-orange-200: #e9be74;
+$gl-color-orange-100: #f5d9a8;
+$gl-color-orange-50: #fdf1dd;
+$gl-color-green-950: #072b15;
+$gl-color-green-900: #0a4020;
+$gl-color-green-800: #0d532a;
+$gl-color-green-700: #24663b;
+$gl-color-green-600: #217645;
+$gl-color-green-500: #108548;
+$gl-color-green-400: #2da160;
+$gl-color-green-300: #52b87a;
+$gl-color-green-200: #91d4a8;
+$gl-color-green-100: #c3e6cd;
+$gl-color-green-50: #ecf4ee;
+$gl-color-neutral-1000: #000;
+$gl-color-neutral-950: #1f1e24;
+$gl-color-neutral-900: #333238;
+$gl-color-neutral-800: #434248;
+$gl-color-neutral-700: #535158;
+$gl-color-neutral-600: #626168;
+$gl-color-neutral-500: #737278;
+$gl-color-neutral-400: #89888d;
+$gl-color-neutral-300: #a4a3a8;
+$gl-color-neutral-200: #bfbfc3;
+$gl-color-neutral-100: #dcdcde;
+$gl-color-neutral-50: #ececef;
+$gl-color-neutral-10: #fbfafd;
+$gl-color-neutral-0: #fff;
+$gl-color-blue-950: #002850;
+$gl-color-blue-900: #033464;
+$gl-color-blue-800: #064787;
+$gl-color-blue-700: #0b5cad;
+$gl-color-blue-600: #1068bf;
+$gl-color-blue-500: #1f75cb;
+$gl-color-blue-400: #428fdc;
+$gl-color-blue-300: #63a6e9;
+$gl-color-blue-200: #9dc7f1;
+$gl-color-blue-100: #cbe2f9;
+$gl-color-blue-50: #e9f3fc;
+$gl-text-color-disabled: $gl-color-neutral-400 !default; // Used for disabled text.
+$gl-text-color-success: $gl-color-green-600 !default; // Used for text indicating success or validity.
+$gl-text-color-danger: $gl-color-red-600 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+$gl-text-color-link: $gl-color-blue-700 !default; // Used for default text links.
+$gl-text-color-heading: $gl-color-neutral-950 !default; // Used for headings level 1-6.
+$gl-text-color-strong: $gl-color-neutral-950 !default; // Used for text with the highest contrast.
+$gl-text-color-subtle: $gl-color-neutral-600 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
+$gl-text-color-default: $gl-color-neutral-800 !default; // Used for the default text color.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -3,6 +3,75 @@
  * Do not edit directly
  */
 
+$gl-color-blue-50: var(--gl-color-blue-50);
+$gl-color-blue-100: var(--gl-color-blue-100);
+$gl-color-blue-200: var(--gl-color-blue-200);
+$gl-color-blue-300: var(--gl-color-blue-300);
+$gl-color-blue-400: var(--gl-color-blue-400);
+$gl-color-blue-500: var(--gl-color-blue-500);
+$gl-color-blue-600: var(--gl-color-blue-600);
+$gl-color-blue-700: var(--gl-color-blue-700);
+$gl-color-blue-800: var(--gl-color-blue-800);
+$gl-color-blue-900: var(--gl-color-blue-900);
+$gl-color-blue-950: var(--gl-color-blue-950);
+$gl-color-neutral-0: var(--gl-color-neutral-0);
+$gl-color-neutral-10: var(--gl-color-neutral-10);
+$gl-color-neutral-50: var(--gl-color-neutral-50);
+$gl-color-neutral-100: var(--gl-color-neutral-100);
+$gl-color-neutral-200: var(--gl-color-neutral-200);
+$gl-color-neutral-300: var(--gl-color-neutral-300);
+$gl-color-neutral-400: var(--gl-color-neutral-400);
+$gl-color-neutral-500: var(--gl-color-neutral-500);
+$gl-color-neutral-600: var(--gl-color-neutral-600);
+$gl-color-neutral-700: var(--gl-color-neutral-700);
+$gl-color-neutral-800: var(--gl-color-neutral-800);
+$gl-color-neutral-900: var(--gl-color-neutral-900);
+$gl-color-neutral-950: var(--gl-color-neutral-950);
+$gl-color-neutral-1000: var(--gl-color-neutral-1000);
+$gl-color-green-50: var(--gl-color-green-50);
+$gl-color-green-100: var(--gl-color-green-100);
+$gl-color-green-200: var(--gl-color-green-200);
+$gl-color-green-300: var(--gl-color-green-300);
+$gl-color-green-400: var(--gl-color-green-400);
+$gl-color-green-500: var(--gl-color-green-500);
+$gl-color-green-600: var(--gl-color-green-600);
+$gl-color-green-700: var(--gl-color-green-700);
+$gl-color-green-800: var(--gl-color-green-800);
+$gl-color-green-900: var(--gl-color-green-900);
+$gl-color-green-950: var(--gl-color-green-950);
+$gl-color-orange-50: var(--gl-color-orange-50);
+$gl-color-orange-100: var(--gl-color-orange-100);
+$gl-color-orange-200: var(--gl-color-orange-200);
+$gl-color-orange-300: var(--gl-color-orange-300);
+$gl-color-orange-400: var(--gl-color-orange-400);
+$gl-color-orange-500: var(--gl-color-orange-500);
+$gl-color-orange-600: var(--gl-color-orange-600);
+$gl-color-orange-700: var(--gl-color-orange-700);
+$gl-color-orange-800: var(--gl-color-orange-800);
+$gl-color-orange-900: var(--gl-color-orange-900);
+$gl-color-orange-950: var(--gl-color-orange-950);
+$gl-color-purple-50: var(--gl-color-purple-50);
+$gl-color-purple-100: var(--gl-color-purple-100);
+$gl-color-purple-200: var(--gl-color-purple-200);
+$gl-color-purple-300: var(--gl-color-purple-300);
+$gl-color-purple-400: var(--gl-color-purple-400);
+$gl-color-purple-500: var(--gl-color-purple-500);
+$gl-color-purple-600: var(--gl-color-purple-600);
+$gl-color-purple-700: var(--gl-color-purple-700);
+$gl-color-purple-800: var(--gl-color-purple-800);
+$gl-color-purple-900: var(--gl-color-purple-900);
+$gl-color-purple-950: var(--gl-color-purple-950);
+$gl-color-red-50: var(--gl-color-red-50);
+$gl-color-red-100: var(--gl-color-red-100);
+$gl-color-red-200: var(--gl-color-red-200);
+$gl-color-red-300: var(--gl-color-red-300);
+$gl-color-red-400: var(--gl-color-red-400);
+$gl-color-red-500: var(--gl-color-red-500);
+$gl-color-red-600: var(--gl-color-red-600);
+$gl-color-red-700: var(--gl-color-red-700);
+$gl-color-red-800: var(--gl-color-red-800);
+$gl-color-red-900: var(--gl-color-red-900);
+$gl-color-red-950: var(--gl-color-red-950);
 $data-viz-green-50: var(--data-viz-green-50);
 $data-viz-green-100: var(--data-viz-green-100);
 $data-viz-green-200: var(--data-viz-green-200);

package/dist/tokens/tailwind/tokens.cjs

@@ -204,14 +204,15 @@ const dataVizColors = {
   'data-viz-orange-950': 'var(--data-viz-orange-950, #4b2707)',
 };
 const textColors = {
-  default: 'var(--gl-text-color-default, #434248)',
-  subtle: 'var(--gl-text-color-subtle, #626168)',
-  strong: 'var(--gl-text-color-strong, #1f1e24)',
-  heading: 'var(--gl-text-color-heading, #1f1e24)',
-  link: 'var(--gl-text-color-link, #0b5cad)',
-  danger: 'var(--gl-text-color-danger, #c91c00)',
-  success: 'var(--gl-text-color-success, #217645)',
-  disabled: 'var(--gl-text-color-disabled, #89888d)',
+  default: 'var(--gl-text-color-default, var(--gl-color-neutral-800, #434248))',
+  subtle: 'var(--gl-text-color-subtle, var(--gl-color-neutral-600, #626168))',
+  strong: 'var(--gl-text-color-strong, var(--gl-color-neutral-950, #1f1e24))',
+  heading: 'var(--gl-text-color-heading, var(--gl-color-neutral-950, #1f1e24))',
+  link: 'var(--gl-text-color-link, var(--gl-color-blue-700, #0b5cad))',
+  danger: 'var(--gl-text-color-danger, var(--gl-color-red-600, #c91c00))',
+  success: 'var(--gl-text-color-success, var(--gl-color-green-600, #217645))',
+  disabled:
+    'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',
 };
 
 const colors = {

package/dist/utils/utils.js

@@ -194,22 +194,4 @@ function filterVisible(els) {
   return (els || []).filter(el => isVisible(el));
 }
 
-/**
- * Given an element, returns a Rect object
- * with top and bottom boundaries removed.
- */
-function getHorizontalBoundingClientRect(el) {
-  const rect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
-  if (rect) {
-    return {
-      x: rect.x,
-      width: rect.width,
-      y: 0,
-      // top of the document
-      height: document.documentElement.clientHeight // bottom of the document
-    };
-  }
-  return null;
-}
-
-export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, getColorContrast, getHorizontalBoundingClientRect, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };
+export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, getColorContrast, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };

package/package.json

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

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -100,36 +100,6 @@ describe('base dropdown', () => {
         autoUpdate.mockImplementation(jest.requireActual('@floating-ui/dom').autoUpdate);
       });
 
-      it('initializes Floating UI with a default boundary', async () => {
-        document.body.innerHTML = '<main><div></div></main>';
-
-        buildWrapper(undefined, {
-          attachTo: document.querySelector('main div'),
-        });
-        await findDefaultDropdownToggle().trigger('click');
-
-        expect(computePosition).toHaveBeenCalledWith(
-          findDefaultDropdownToggle().element,
-          findDropdownMenu().element,
-          {
-            placement: 'bottom-start',
-            strategy: 'absolute',
-            middleware: [
-              offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement(expect.any(Function)),
-              shift(),
-            ],
-          }
-        );
-        expect(autoPlacement.mock.calls[0][0]()).toEqual({
-          alignment: 'start',
-          boundary: { x: 0, y: 0, width: 0, height: 0 },
-          allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
-        });
-
-        document.body.innerHTML = '';
-      });
-
       it('initializes Floating UI with reference and floating elements and config for left-aligned menu', async () => {
         buildWrapper();
         await findDefaultDropdownToggle().trigger('click');
@@ -142,16 +112,14 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement(expect.any(Function)),
+              autoPlacement({
+                alignment: 'start',
+                allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+              }),
               shift(),
             ],
           }
         );
-        expect(autoPlacement.mock.calls[0][0]()).toEqual({
-          alignment: 'start',
-          boundary: 'clippingAncestors',
-          allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
-        });
       });
 
       it('initializes Floating UI with reference and floating elements and config for center-aligned menu', async () => {
@@ -166,16 +134,14 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement(expect.any(Function)),
+              autoPlacement({
+                alignment: undefined,
+                allowedPlacements: ['bottom', 'top'],
+              }),
               shift(),
             ],
           }
         );
-        expect(autoPlacement.mock.calls[0][0]()).toEqual({
-          alignment: undefined,
-          boundary: 'clippingAncestors',
-          allowedPlacements: ['bottom', 'top'],
-        });
       });
 
       it('initializes Floating UI with reference and floating elements and config for right-aligned menu', async () => {
@@ -190,16 +156,14 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement(expect.any(Function)),
+              autoPlacement({
+                alignment: 'end',
+                allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+              }),
               shift(),
             ],
           }
         );
-        expect(autoPlacement.mock.calls[0][0]()).toEqual({
-          alignment: 'end',
-          boundary: 'clippingAncestors',
-          allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
-        });
       });
 
       it('initializes Floating UI with reference and floating elements and config for `right-start` aligned menu', async () => {
@@ -214,16 +178,14 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement(expect.any(Function)),
+              autoPlacement({
+                alignment: 'start',
+                allowedPlacements: ['right-start', 'right-end', 'left-start', 'left-end'],
+              }),
               shift(),
             ],
           }
         );
-        expect(autoPlacement.mock.calls[0][0]()).toEqual({
-          alignment: 'start',
-          boundary: 'clippingAncestors',
-          allowedPlacements: ['right-start', 'right-end', 'left-start', 'left-end'],
-        });
       });
 
       it("passes custom offset to Floating UI's middleware", async () => {
@@ -240,7 +202,7 @@ describe('base dropdown', () => {
           {
             placement: 'bottom-end',
             strategy: 'absolute',
-            middleware: [offset(customOffset), autoPlacement(expect.any(Function)), shift()],
+            middleware: [offset(customOffset), autoPlacement(expect.any(Object)), shift()],
           }
         );
       });

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

@@ -9,7 +9,6 @@ import {
   dropdownVariantOptions,
 } from '../../../../utils/constants';
 import {
-  GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR,
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
   GL_DROPDOWN_BEFORE_CLOSE,
@@ -21,12 +20,7 @@ import {
   POSITION_ABSOLUTE,
   POSITION_FIXED,
 } from '../constants';
-import {
-  logWarning,
-  isElementTabbable,
-  isElementFocusable,
-  getHorizontalBoundingClientRect,
-} from '../../../../utils/utils';
+import { logWarning, isElementTabbable, isElementFocusable } from '../../../../utils/utils';
 
 import GlButton from '../../button/button.vue';
 import GlIcon from '../../icon/icon.vue';
@@ -276,15 +270,9 @@ export default {
         strategy: this.positioningStrategy,
         middleware: [
           offset(this.offset),
-          autoPlacement(() => {
-            const autoHorizontalBoundary = getHorizontalBoundingClientRect(
-              this.$el.closest(GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR)
-            );
-            return {
-              alignment,
-              boundary: autoHorizontalBoundary || 'clippingAncestors',
-              allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
-            };
+          autoPlacement({
+            alignment,
+            allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
           }),
           shift(),
           size({

package/src/components/base/new_dropdowns/constants.js

@@ -1,5 +1,4 @@
 // base dropdown events
-export const GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR = 'main';
 export const GL_DROPDOWN_SHOWN = 'shown';
 export const GL_DROPDOWN_HIDDEN = 'hidden';
 export const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -343,31 +343,3 @@ export default {
     startOpened: true,
   },
 };
-
-export const InMainWrapper = (args, { argTypes }) => ({
-  toggleId: TOGGLE_ID,
-  props: Object.keys(argTypes),
-  components: {
-    GlDisclosureDropdown,
-    GlTooltip,
-  },
-  template: `
-    <div>
-      ${template()}
-      <gl-tooltip :target="$options.toggleId" placement="right">
-        Automatic placement to stay inside &lt;main&gt; boundary
-      </gl-tooltip>
-    </div>
-  `,
-});
-InMainWrapper.args = {
-  items: mockItems,
-  icon: 'ellipsis_v',
-  noCaret: true,
-  toggleText: 'Disclosure',
-  textSrOnly: true,
-  toggleId: TOGGLE_ID,
-};
-InMainWrapper.decorators = [
-  makeContainer({ backgroundColor: '#efefef', textAlign: 'right', height: '200px' }, 'main'),
-];

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

@@ -4,14 +4,6 @@
  */
 
 :root {
-  --gl-text-color-disabled: #89888d; /* Used for disabled text. */
-  --gl-text-color-success: #217645; /* Used for text indicating success or validity. */
-  --gl-text-color-danger: #c91c00; /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
-  --gl-text-color-link: #0b5cad; /* Used for default text links. */
-  --gl-text-color-heading: #1f1e24; /* Used for headings level 1-6. */
-  --gl-text-color-strong: #1f1e24; /* Used for text with the highest contrast. */
-  --gl-text-color-subtle: #626168; /* Used for supplemental text that doesn't need to be as prominent as other text. */
-  --gl-text-color-default: #434248; /* Used for the default text color. */
   --gl-text-tertiary: #89888d; /* Use text.color.disabled instead */
   --gl-text-secondary: #737278; /* Use text.color.subtle instead */
   --gl-text-primary: #333238; /* Use text.color.default instead */
@@ -245,4 +237,81 @@
   --data-viz-green-200: #b0d97b;
   --data-viz-green-100: #c6ed94;
   --data-viz-green-50: #ddfab7;
+  --gl-color-red-950: #4d0a00;
+  --gl-color-red-900: #660e00;
+  --gl-color-red-800: #8d1300;
+  --gl-color-red-700: #ae1800;
+  --gl-color-red-600: #c91c00;
+  --gl-color-red-500: #dd2b0e;
+  --gl-color-red-400: #ec5941;
+  --gl-color-red-300: #f57f6c;
+  --gl-color-red-200: #fcb5aa;
+  --gl-color-red-100: #fdd4cd;
+  --gl-color-red-50: #fcf1ef;
+  --gl-color-purple-950: #232150;
+  --gl-color-purple-900: #2f2a6b;
+  --gl-color-purple-800: #453894;
+  --gl-color-purple-700: #5943b6;
+  --gl-color-purple-600: #694cc0;
+  --gl-color-purple-500: #7b58cf;
+  --gl-color-purple-400: #9475db;
+  --gl-color-purple-300: #ac93e6;
+  --gl-color-purple-200: #cbbbf2;
+  --gl-color-purple-100: #e1d8f9;
+  --gl-color-purple-50: #f4f0ff;
+  --gl-color-orange-950: #421f00;
+  --gl-color-orange-900: #5c2900;
+  --gl-color-orange-800: #703800;
+  --gl-color-orange-700: #8f4700;
+  --gl-color-orange-600: #9e5400;
+  --gl-color-orange-500: #ab6100;
+  --gl-color-orange-400: #c17d10;
+  --gl-color-orange-300: #d99530;
+  --gl-color-orange-200: #e9be74;
+  --gl-color-orange-100: #f5d9a8;
+  --gl-color-orange-50: #fdf1dd;
+  --gl-color-green-950: #072b15;
+  --gl-color-green-900: #0a4020;
+  --gl-color-green-800: #0d532a;
+  --gl-color-green-700: #24663b;
+  --gl-color-green-600: #217645;
+  --gl-color-green-500: #108548;
+  --gl-color-green-400: #2da160;
+  --gl-color-green-300: #52b87a;
+  --gl-color-green-200: #91d4a8;
+  --gl-color-green-100: #c3e6cd;
+  --gl-color-green-50: #ecf4ee;
+  --gl-color-neutral-1000: #000;
+  --gl-color-neutral-950: #1f1e24;
+  --gl-color-neutral-900: #333238;
+  --gl-color-neutral-800: #434248;
+  --gl-color-neutral-700: #535158;
+  --gl-color-neutral-600: #626168;
+  --gl-color-neutral-500: #737278;
+  --gl-color-neutral-400: #89888d;
+  --gl-color-neutral-300: #a4a3a8;
+  --gl-color-neutral-200: #bfbfc3;
+  --gl-color-neutral-100: #dcdcde;
+  --gl-color-neutral-50: #ececef;
+  --gl-color-neutral-10: #fbfafd;
+  --gl-color-neutral-0: #fff;
+  --gl-color-blue-950: #002850;
+  --gl-color-blue-900: #033464;
+  --gl-color-blue-800: #064787;
+  --gl-color-blue-700: #0b5cad;
+  --gl-color-blue-600: #1068bf;
+  --gl-color-blue-500: #1f75cb;
+  --gl-color-blue-400: #428fdc;
+  --gl-color-blue-300: #63a6e9;
+  --gl-color-blue-200: #9dc7f1;
+  --gl-color-blue-100: #cbe2f9;
+  --gl-color-blue-50: #e9f3fc;
+  --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
+  --gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success or validity. */
+  --gl-text-color-danger: var(--gl-color-red-600); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
+  --gl-text-color-link: var(--gl-color-blue-700); /* Used for default text links. */
+  --gl-text-color-heading: var(--gl-color-neutral-950); /* Used for headings level 1-6. */
+  --gl-text-color-strong: var(--gl-color-neutral-950); /* Used for text with the highest contrast. */
+  --gl-text-color-subtle: var(--gl-color-neutral-600); /* Used for supplemental text that doesn't need to be as prominent as other text. */
+  --gl-text-color-default: var(--gl-color-neutral-800); /* Used for the default text color. */
 }