@gitlab/ui 80.10.0 → 80.12.0

package/src/tokens/color.constant.tokens.json

@@ -0,0 +1,292 @@
+{
+  "color": {
+    "blue": {
+      "50": {
+        "$value": "#e9f3fc",
+        "$type": "color"
+      },
+      "100": {
+        "$value": "#cbe2f9",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#9dc7f1",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#63a6e9",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#428fdc",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#1f75cb",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#1068bf",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#0b5cad",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#064787",
+        "$type": "color"
+      },
+      "900": {
+        "$value": "#033464",
+        "$type": "color"
+      },
+      "950": {
+        "$value": "#002850",
+        "$type": "color"
+      }
+    },
+    "neutral": {
+      "0": {
+        "$value": "#fff",
+        "$type": "color"
+      },
+      "10": {
+        "$value": "#fbfafd",
+        "$type": "color"
+      },
+      "50": {
+        "$value": "#ececef",
+        "$type": "color"
+      },
+      "100": {
+        "$value": "#dcdcde",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#bfbfc3",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#a4a3a8",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#89888d",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#737278",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#626168",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#535158",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#434248",
+        "$type": "color"
+      },
+      "900": {
+        "$value": "#333238",
+        "$type": "color"
+      },
+      "950": {
+        "$value": "#1f1e24",
+        "$type": "color"
+      },
+      "1000": {
+        "$value": "#000",
+        "$type": "color"
+      }
+    },
+    "green": {
+      "50": {
+        "$value": "#ecf4ee",
+        "$type": "color"
+      },
+      "100": {
+        "$value": "#c3e6cd",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#91d4a8",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#52b87a",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#2da160",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#108548",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#217645",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#24663b",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#0d532a",
+        "$type": "color"
+      },
+      "900": {
+        "$value": "#0a4020",
+        "$type": "color"
+      },
+      "950": {
+        "$value": "#072b15",
+        "$type": "color"
+      }
+    },
+    "orange": {
+      "50": {
+        "$value": "#fdf1dd",
+        "$type": "color"
+      },
+      "100": {
+        "$value": "#f5d9a8",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#e9be74",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#d99530",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#c17d10",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#ab6100",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#9e5400",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#8f4700",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#703800",
+        "$type": "color"
+      },
+      "900": {
+        "$value": "#5c2900",
+        "$type": "color"
+      },
+      "950": {
+        "$value": "#421f00",
+        "$type": "color"
+      }
+    },
+    "purple": {
+      "50": {
+        "$value": "#f4f0ff",
+        "$type": "color"
+      },
+      "100": {
+        "$value": "#e1d8f9",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#cbbbf2",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#ac93e6",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#9475db",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#7b58cf",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#694cc0",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#5943b6",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#453894",
+        "$type": "color"
+      },
+      "900": {
+        "$value": "#2f2a6b",
+        "$type": "color"
+      },
+      "950": {
+        "$value": "#232150",
+        "$type": "color"
+      }
+    },
+    "red": {
+      "50": {
+        "$value": "#fcf1ef",
+        "$type": "color"
+      },
+      "100": {
+        "$value": "#fdd4cd",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#fcb5aa",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#f57f6c",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#ec5941",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#dd2b0e",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#c91c00",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#ae1800",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#8d1300",
+        "$type": "color"
+      },
+      "900": {
+        "$value": "#660e00",
+        "$type": "color"
+      },
+      "950": {
+        "$value": "#4d0a00",
+        "$type": "color"
+      }
+    }
+  }
+}

package/src/tokens/color.constant.tokens.stories.js

@@ -0,0 +1,19 @@
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import { createDesignTokenStory } from './common_story_options';
+
+export const Neutral = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.neutral });
+
+export const Blue = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.blue });
+
+export const Green = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.green });
+
+export const Orange = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.orange });
+
+export const Red = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.red });
+
+export const Purple = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.purple });
+
+// eslint-disable-next-line storybook/csf-component
+export default {
+  title: 'tokens/color/constant',
+};

package/src/tokens/color.dark.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import COMPILED_TOKENS from './build/json/tokens.dark.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({

package/src/tokens/color.data_viz.dark.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import COMPILED_TOKENS from './build/json/tokens.dark.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const DataVizGreen = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].green });

package/src/tokens/color.data_viz.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import COMPILED_TOKENS from './build/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const DataVizGreen = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].green });

package/src/tokens/color.theme.dark.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import COMPILED_TOKENS from './build/json/tokens.dark.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const ThemeIndigo = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.indigo });

package/src/tokens/color.theme.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import COMPILED_TOKENS from './build/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const ThemeIndigo = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.indigo });

package/src/tokens/color.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import COMPILED_TOKENS from './build/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({

package/src/tokens/color.transparency.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import COMPILED_TOKENS from './build/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Gray = createDesignTokenStory({ tokens: COMPILED_TOKENS['t-gray-a'] });

package/src/tokens/common_story_options.js

@@ -1,4 +1,4 @@
-import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
+import { WHITE, GRAY_950 } from './build/js/tokens';
 import TokensStory from './tokens_story.vue';
 
 export const createDesignTokenStory = ({

package/src/tokens/text.dark.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import COMPILED_TOKENS from './build/json/tokens.dark.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({

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/text.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import COMPILED_TOKENS from './build/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({

package/src/utils/charts/config.js

@@ -1,6 +1,6 @@
 import castArray from 'lodash/castArray';
 import merge from 'lodash/merge';
-import { BLUE_500 } from '../../../dist/tokens/js/tokens';
+import { BLUE_500 } from '../../tokens/build/js/tokens';
 import { GlBreakpointInstance } from '../breakpoints';
 import { columnOptions } from '../constants';
 import { areDatesEqual } from '../datetime_utility';

package/src/utils/charts/mock_data.js

@@ -1,4 +1,4 @@
-import { BLUE_500 } from '../../../dist/tokens/js/tokens';
+import { BLUE_500 } from '../../tokens/build/js/tokens';
 import { hexToRgba } from '../utils';
 import { colorFromDefaultPalette } from './theme';
 

package/src/utils/charts/theme.js

@@ -63,7 +63,7 @@ import {
   DATA_VIZ_ORANGE_800,
   DATA_VIZ_ORANGE_950,
   DATA_VIZ_ORANGE_900,
-} from '../../../dist/tokens/js/tokens';
+} from '../../tokens/build/js/tokens';
 import { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 

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);
-      });
-    });
-  });
 });