@gitlab/ui 49.8.0 → 49.9.0

package/dist/utils/use_mock_intersection_observer.js

@@ -104,4 +104,4 @@ const useMockIntersectionObserver = () => {
   };
 };
 
-export default useMockIntersectionObserver;
+export { useMockIntersectionObserver };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.8.0",
+  "version": "49.9.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -37,6 +37,9 @@
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
+    "test:unit-vue3": "VUE_VERSION=3 NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
+    "test:unit-vue3:watch": "VUE_VERSION=3 yarn test:unit --watch --notify",
+    "test:unit-vue3:debug": "VUE_VERSION=3 NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:visual": "./bin/run-visual-tests.sh 'jest ./tests/storyshots.spec.js'",
     "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
     "test:visual:update": "./bin/run-visual-tests.sh 'JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 jest ./tests/storyshots.spec.js --updateSnapshot'",
@@ -94,8 +97,12 @@
     "@storybook/addon-viewport": "6.5.13",
     "@storybook/theming": "6.5.13",
     "@storybook/vue": "6.5.13",
+    "@vue/compat": "^3.2.40",
+    "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
+    "@vue/test-utils-vue3": "npm:@vue/test-utils@2.2.0",
     "@vue/vue2-jest": "29.0.0",
+    "@vue/vue3-jest": "^29.1.1",
     "autoprefixer": "^9.7.6",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
@@ -105,7 +112,7 @@
     "bootstrap": "4.6.2",
     "cypress": "^10.11.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.26.0",
+    "eslint": "8.27.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.7",
@@ -113,9 +120,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.2.2",
-    "jest-circus": "29.2.2",
-    "jest-environment-jsdom": "29.2.2",
+    "jest": "^29.3.0",
+    "jest-circus": "29.3.0",
+    "jest-environment-jsdom": "29.3.0",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "npm-run-all": "^4.1.5",
@@ -140,11 +147,12 @@
     "start-server-and-test": "^1.10.6",
     "storybook-dark-mode": "^1.0.8",
     "stylelint": "14.9.1",
-    "stylelint-config-prettier": "9.0.3",
+    "stylelint-config-prettier": "9.0.4",
     "stylelint-prettier": "2.0.0",
     "vue": "2.7.13",
     "vue-loader": "^15.8.3",
-    "vue-template-compiler": "2.7.13"
+    "vue-template-compiler": "2.7.13",
+    "vue-test-utils-compat": "^0.0.10"
   },
   "release": {
     "branches": [

package/scss_to_js/scss_variables.js

@@ -238,11 +238,12 @@ export const darkenNormalFactor = '7%'
 export const darkenDarkFactor = '10%'
 export const darkenBorderFactor = '5%'
 export const darkenBorderDashedFactor = '25%'
-export const tGrayA02 = 'rgba(0, 0, 0, 0.02)'
-export const tGrayA04 = 'rgba(0, 0, 0, 0.04)'
-export const tGrayA06 = 'rgba(0, 0, 0, 0.06)'
-export const tGrayA08 = 'rgba(0, 0, 0, 0.08)'
-export const tGrayA24 = 'rgba(0, 0, 0, 0.24)'
+export const tGrayA02 = 'rgba(31, 30, 36, 0.02)'
+export const tGrayA04 = 'rgba(31, 30, 36, 0.04)'
+export const tGrayA06 = 'rgba(31, 30, 36, 0.06)'
+export const tGrayA08 = 'rgba(31, 30, 36, 0.08)'
+export const tGrayA16 = 'rgba(31, 30, 36, 0.16)'
+export const tGrayA24 = 'rgba(31, 30, 36, 0.24)'
 export const glTextColor = '#333238'
 export const glTextColorSecondary = '#737278'
 export const glFontWeightLight = '300'

package/scss_to_js/scss_variables.json

@@ -1229,28 +1229,33 @@
     },
     {
       "name": "$t-gray-a-02",
-      "value": "rgba($black, 0.02)",
-      "compiledValue": "rgba(0, 0, 0, 0.02)"
+      "value": "rgba($gray-950, 0.02)",
+      "compiledValue": "rgba(31, 30, 36, 0.02)"
     },
     {
       "name": "$t-gray-a-04",
-      "value": "rgba($black, 0.04)",
-      "compiledValue": "rgba(0, 0, 0, 0.04)"
+      "value": "rgba($gray-950, 0.04)",
+      "compiledValue": "rgba(31, 30, 36, 0.04)"
     },
     {
       "name": "$t-gray-a-06",
-      "value": "rgba($black, 0.06)",
-      "compiledValue": "rgba(0, 0, 0, 0.06)"
+      "value": "rgba($gray-950, 0.06)",
+      "compiledValue": "rgba(31, 30, 36, 0.06)"
     },
     {
       "name": "$t-gray-a-08",
-      "value": "rgba(#000, 0.08)",
-      "compiledValue": "rgba(0, 0, 0, 0.08)"
+      "value": "rgba($gray-950, 0.08)",
+      "compiledValue": "rgba(31, 30, 36, 0.08)"
+    },
+    {
+      "name": "$t-gray-a-16",
+      "value": "rgba($gray-950, 0.16)",
+      "compiledValue": "rgba(31, 30, 36, 0.16)"
     },
     {
       "name": "$t-gray-a-24",
-      "value": "rgba(#000, 0.24)",
-      "compiledValue": "rgba(0, 0, 0, 0.24)"
+      "value": "rgba($gray-950, 0.24)",
+      "compiledValue": "rgba(31, 30, 36, 0.24)"
     },
     {
       "name": "$gl-text-color",

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

@@ -303,13 +303,16 @@ export default {
         }
       },
     },
-  },
-  mounted() {
-    if (process.env.NODE_ENV !== 'production' && this.resetButtonLabel && !this.headerText) {
-      throw new Error(
-        'The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.'
-      );
-    }
+    resetButtonLabel: {
+      immediate: true,
+      handler(newResetButtonLabel) {
+        if (process.env.NODE_ENV !== 'production' && newResetButtonLabel && !this.headerText) {
+          throw new Error(
+            'The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.'
+          );
+        }
+      },
+    },
   },
   methods: {
     open() {

package/src/components/base/paginated_list/__snapshots__/paginated_list.spec.js.snap

@@ -597,9 +597,7 @@ exports[`Paginated List Search states renders the custom empty search message wh
   <div
     class="bs-callout bs-callout-warning mt-3 empty-message empty-search"
   >
-    
     Custom empty message
-  
   </div>
 </div>
 `;
@@ -620,9 +618,7 @@ exports[`Paginated List Search states renders the default empty search message w
   <div
     class="bs-callout bs-callout-warning mt-3 empty-message empty-search"
   >
-    
     Sorry, your filter produced no results.
-  
   </div>
 </div>
 `;
@@ -702,9 +698,7 @@ exports[`Paginated List Searchless states renders the list in an empty state wit
   <div
     class="bs-callout bs-callout-warning mt-3 empty-message empty-message"
   >
-    
     List is passed in empty
-  
   </div>
 </div>
 `;
@@ -725,9 +719,7 @@ exports[`Paginated List Searchless states renders the list in an empty state, wh
   <div
     class="bs-callout bs-callout-warning mt-3 empty-message empty-message"
   >
-    
     There are currently no items in this list.
-  
   </div>
 </div>
 `;

package/src/components/base/paginated_list/paginated_list.vue

@@ -163,13 +163,14 @@ export default {
       :total-items="pageInfo.total"
       @input="change"
     />
-
+    <!-- Prettier will insert extra line-break which will result in render differences between Vue.js 2 and Vue.js 3 -->
+    <!-- See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2004 for details -->
+    <!-- display: inline -->
     <div
       v-if="emptyList"
       class="bs-callout bs-callout-warning mt-3 empty-message"
       :class="{ 'empty-message': zeroTotal, 'empty-search': zeroSearchResults }"
+      >{{ zeroTotal ? emptyMessage : emptySearchMessage }}</div
     >
-      {{ zeroTotal ? emptyMessage : emptySearchMessage }}
-    </div>
   </div>
 </template>

package/src/components/base/path/__snapshots__/path.spec.js.snap

@@ -30,7 +30,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button gl-path-active-item-indigo"
       >
-        
         First
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -46,7 +45,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Second
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -62,7 +60,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Third
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -78,7 +75,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Fourth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -94,7 +90,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Fifth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -110,7 +105,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Sixth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -126,7 +120,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Seventh
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -144,7 +137,6 @@ exports[`Path matches the snapshot 1`] = `
         class="gl-path-button"
         disabled=""
       >
-        
         Eighth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -160,7 +152,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Ninth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -176,7 +167,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Tenth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -239,7 +229,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
           name="home"
           size="16"
         />
-        
         First
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -255,7 +244,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Second
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -271,7 +259,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Third
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -287,7 +274,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Fourth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -303,7 +289,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Fifth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -319,7 +304,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Sixth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -335,7 +319,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Seventh
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -353,7 +336,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
         class="gl-path-button"
         disabled=""
       >
-        
         Eighth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -369,7 +351,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Ninth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -385,7 +366,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Tenth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -442,7 +422,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button gl-path-active-item-indigo"
       >
-        
         First
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -458,7 +437,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Second
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -474,7 +452,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Third
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -490,7 +467,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Fourth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -506,7 +482,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Fifth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -522,7 +497,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Sixth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -538,7 +512,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Seventh
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -556,7 +529,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
         class="gl-path-button"
         disabled=""
       >
-        
         Eighth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -572,7 +544,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Ninth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -588,7 +559,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Tenth
         <span
           class="gl-font-weight-normal gl-pl-2"

package/src/components/base/path/path.vue

@@ -182,8 +182,7 @@ export default {
             :name="item.icon"
             class="gl-mr-2"
             data-testid="gl-path-item-icon"
-          />
-          {{ item.title
+          />{{ item.title
           }}<span v-if="item.metric" class="gl-font-weight-normal gl-pl-2">{{ item.metric }}</span>
         </button>
         <!--

package/src/components/charts/area/area.vue

@@ -41,7 +41,7 @@ import {
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';

package/src/components/charts/bar/bar.vue

@@ -7,7 +7,7 @@ import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba, debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';

package/src/components/charts/column/column.vue

@@ -15,7 +15,7 @@ import { TOOLTIP_LEFT_OFFSET, CHART_TYPE_LINE } from '../../../utils/charts/cons
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -7,7 +7,7 @@ import defaultChartOptions, {
 } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';

package/src/components/charts/gauge/gauge.vue

@@ -2,7 +2,7 @@
 <script>
 import { merge, isFinite, uniq, sortBy } from 'lodash';
 import { gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import Chart from '../chart/chart.vue';
 
 const AXIS_LABEL_FONT_SIZE_PX = 14;

package/src/components/charts/heatmap/heatmap.vue

@@ -7,7 +7,7 @@ import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';

package/src/components/charts/line/line.vue

@@ -44,7 +44,7 @@ import {
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';

package/src/components/charts/stacked_column/stacked_column.vue

@@ -22,7 +22,7 @@ import {
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';

package/src/components/mixins/toolbox_mixin.js

@@ -7,7 +7,7 @@
 
 import { getToolboxConfig } from '../../utils/charts/config';
 
-export default {
+export const ToolboxMixin = {
   props: {
     showToolbox: {
       type: Boolean,

package/src/components/utilities/intersection_observer/intersection_observer.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import useMockIntersectionObserver from '~/utils/use_mock_intersection_observer';
+import { useMockIntersectionObserver } from '~/utils/use_mock_intersection_observer';
 import GlIntersectionObserver from './intersection_observer.vue';
 
 const TEST_SLOT = '<p>Hello world! Lorem ipsum.</p>';

package/src/scss/utilities.scss

@@ -2081,6 +2081,30 @@
 .gl-shadow-drawer\! {
   box-shadow: -4px 0 8px $gray-200 !important
 }
+
+.gl-shadow-sm {
+  box-shadow: 0 1px 2px rgba($gray-950, 0.1)
+}
+
+.gl-shadow-sm\! {
+  box-shadow: 0 1px 2px rgba($gray-950, 0.1) !important
+}
+
+.gl-shadow-md {
+  box-shadow: 0 2px 8px rgba($gray-950, 0.16), 0 0 2px rgba($gray-950, 0.16)
+}
+
+.gl-shadow-md\! {
+  box-shadow: 0 2px 8px rgba($gray-950, 0.16), 0 0 2px rgba($gray-950, 0.16) !important
+}
+
+.gl-shadow-lg {
+  box-shadow: 0 4px 12px rgba($gray-950, 0.16), 0 0 4px rgba($gray-950, 0.16)
+}
+
+.gl-shadow-lg\! {
+  box-shadow: 0 4px 12px rgba($gray-950, 0.16), 0 0 4px rgba($gray-950, 0.16) !important
+}
 .gl-clearfix {
   &::after {
     display: block;

package/src/scss/utility-mixins/box-shadow.scss

@@ -185,3 +185,24 @@
 @mixin gl-shadow-drawer {
   box-shadow: -4px 0 8px $gray-200;
 }
+
+/**
+* New utilities to match design specs
+* Per https: //gitlab.com/gitlab-org/gitlab-ui/-/issues/615,
+* some of the above could be replaced.
+*
+* These use gray instead of black to align with
+* tinted neutrals.
+*/
+
+@mixin gl-shadow-sm {
+  box-shadow: 0 1px 2px rgba($gray-950, 0.1);
+}
+
+@mixin gl-shadow-md {
+  box-shadow: 0 2px 8px rgba($gray-950, 0.16), 0 0 2px rgba($gray-950, 0.16);
+}
+
+@mixin gl-shadow-lg {
+  box-shadow: 0 4px 12px rgba($gray-950, 0.16), 0 0 4px rgba($gray-950, 0.16);
+}

package/src/scss/variables.scss

@@ -304,11 +304,12 @@ $darken-dark-factor: 10%;
 $darken-border-factor: 5%;
 $darken-border-dashed-factor: 25%;
 
-$t-gray-a-02: rgba($black, 0.02);
-$t-gray-a-04: rgba($black, 0.04);
-$t-gray-a-06: rgba($black, 0.06);
-$t-gray-a-08: rgba(#000, 0.08);
-$t-gray-a-24: rgba(#000, 0.24);
+$t-gray-a-02: rgba($gray-950, 0.02);
+$t-gray-a-04: rgba($gray-950, 0.04);
+$t-gray-a-06: rgba($gray-950, 0.06);
+$t-gray-a-08: rgba($gray-950, 0.08);
+$t-gray-a-16: rgba($gray-950, 0.16);
+$t-gray-a-24: rgba($gray-950, 0.24);
 
 // Text
 $gl-text-color: $gray-900 !default;

package/src/utils/use_mock_intersection_observer.js

@@ -63,7 +63,7 @@ class MockIntersectionObserver extends MockObserver {
   }
 }
 
-const useMockIntersectionObserver = () => {
+export const useMockIntersectionObserver = () => {
   let instances;
   let origObserver;
 
@@ -94,5 +94,3 @@ const useMockIntersectionObserver = () => {
 
   return { getInstances, trigger };
 };
-
-export default useMockIntersectionObserver;