@gitlab/ui 80.11.0 → 80.13.0

package/src/tokens/text.tokens.json

@@ -33,8 +33,8 @@
     "color": {
       "default": {
         "$value": {
-          "default": "#434248",
-          "dark": "#ececef"
+          "default": "{color.neutral.800}",
+          "dark": "{color.neutral.50}"
         },
         "$type": "color",
         "$description": "Used for the default text color.",
@@ -42,8 +42,8 @@
       },
       "subtle": {
         "$value": {
-          "default": "#626168",
-          "dark": "#bfbfc3"
+          "default": "{color.neutral.600}",
+          "dark": "{color.neutral.200}"
         },
         "$type": "color",
         "$description": "Used for supplemental text that doesn't need to be as prominent as other text.",
@@ -51,8 +51,8 @@
       },
       "strong": {
         "$value": {
-          "default": "#1f1e24",
-          "dark": "#fff"
+          "default": "{color.neutral.950}",
+          "dark": "{color.neutral.0}"
         },
         "$type": "color",
         "$description": "Used for text with the highest contrast.",
@@ -60,8 +60,8 @@
       },
       "heading": {
         "$value": {
-          "default": "#1f1e24",
-          "dark": "#fff"
+          "default": "{color.neutral.950}",
+          "dark": "{color.neutral.0}"
         },
         "$type": "color",
         "$description": "Used for headings level 1-6.",
@@ -69,29 +69,35 @@
       },
       "link": {
         "$value": {
-          "default": "#0b5cad",
-          "dark": "#63a6e9"
+          "default": "{color.blue.700}",
+          "dark": "{color.blue.300}"
         },
         "$type": "color",
         "$description": "Used for default text links.",
         "themeable": true
       },
       "danger": {
-        "$value": "#c91c00",
+        "$value": {
+          "default": "{color.red.600}",
+          "dark": "{color.red.300}"
+        },
         "$type": "color",
         "$description": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
         "themeable": true
       },
       "success": {
-        "$value": "#217645",
+        "$value": {
+          "default": "{color.green.600}",
+          "dark": "{color.green.300}"
+        },
         "$type": "color",
         "$description": "Used for text indicating success or validity.",
         "themeable": true
       },
       "disabled": {
         "$value": {
-          "default": "#89888d",
-          "dark": "#89888d"
+          "default": "{color.neutral.400}",
+          "dark": "{color.neutral.400}"
         },
         "$type": "color",
         "$description": "Used for disabled text.",

package/src/tokens/tokens_table.vue

@@ -101,6 +101,17 @@ export default {
         }
       });
 
+      // Sort tokensArray so deprecated items are last
+      tokensArray.sort((a, b) => {
+        if (a.deprecated && !b.deprecated) {
+          return 1;
+        }
+        if (!a.deprecated && b.deprecated) {
+          return -1;
+        }
+        return 0;
+      });
+
       return tokensArray;
     },
   },
@@ -130,8 +141,8 @@ export default {
       <template #cell(description)="{ item: { name, deprecated, description } }">
         <code class="gl-font-base gl-text-strong">
           {{ name }}
-          <gl-badge v-if="deprecated" size="sm" variant="neutral">Deprecated</gl-badge>
         </code>
+        <gl-badge v-if="deprecated" size="sm" variant="danger">Deprecated</gl-badge>
         <div v-if="description" class="gl-mt-3 gl-text-subtle">
           {{ description }}
         </div>

package/src/utils/utils.js

@@ -204,21 +204,3 @@ export function stopEvent(
 export function filterVisible(els) {
   return (els || []).filter((el) => isVisible(el));
 }
-
-/**
- * Given an element, returns a Rect object
- * with top and bottom boundaries removed.
- */
-export function getHorizontalBoundingClientRect(el) {
-  const rect = 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;
-}

package/src/utils/utils.spec.js

@@ -3,7 +3,6 @@ import {
   isElementTabbable,
   focusFirstFocusableElement,
   stopEvent,
-  getHorizontalBoundingClientRect,
 } from './utils';
 
 describe('isElementFocusable', () => {
@@ -154,55 +153,4 @@ describe('stopEvent', () => {
     expect(event.stopPropagation).not.toHaveBeenCalled();
     expect(event.stopImmediatePropagation).toHaveBeenCalledTimes(1);
   });
-
-  describe('getHorizontalBoundingClientRect', () => {
-    describe('when there is a reference element', () => {
-      let mainElement;
-
-      const [
-        MAIN_LEFT_BOUNDARY,
-        MAIN_WIDTH,
-        MAIN_TOP_BOUNDARY,
-        MAIN_HEIGHT,
-        DOCUMENT_TOP_BOUNDARY,
-        DOCUMENT_HEIGHT,
-      ] = [10, 20, 30, 40, 0, 50];
-
-      beforeEach(() => {
-        mainElement = document.createElement('main');
-        jest.spyOn(mainElement, 'getBoundingClientRect').mockImplementation(() => {
-          return {
-            x: MAIN_LEFT_BOUNDARY,
-            width: MAIN_WIDTH,
-            y: MAIN_TOP_BOUNDARY,
-            height: MAIN_HEIGHT,
-          };
-        });
-        Object.defineProperty(document.documentElement, 'clientHeight', {
-          get() {
-            return DOCUMENT_HEIGHT;
-          },
-        });
-      });
-
-      afterEach(() => {
-        mainElement = null;
-      });
-
-      it("returns the element's horizontal boundaries and the document's vertical boundaries", () => {
-        expect(getHorizontalBoundingClientRect(mainElement)).toEqual({
-          x: MAIN_LEFT_BOUNDARY,
-          width: MAIN_WIDTH,
-          y: DOCUMENT_TOP_BOUNDARY,
-          height: DOCUMENT_HEIGHT,
-        });
-      });
-    });
-
-    describe('when there is no reference element', () => {
-      it('returns `null`', () => {
-        expect(getHorizontalBoundingClientRect(null)).toEqual(null);
-      });
-    });
-  });
 });