@gitlab/ui 49.7.0 → 49.9.0

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

@@ -150,6 +150,19 @@ $gray-800: #434248 !default;
 $gray-900: #333238 !default;
 $gray-950: #1f1e24 !default;
 
+// Brand colours https://design.gitlab.com/brand-design/color
+$brand-charcoal: #171321 !default;
+$brand-orange-01: #fca326 !default;
+$brand-orange-02: #fc6d26 !default;
+$brand-orange-03: #e24329 !default;
+$brand-purple-01: #a989f5 !default;
+$brand-purple-02: #7759c2 !default;
+$brand-gray-01: #d1d0d3 !default;
+$brand-gray-02: #a2a1a6 !default;
+$brand-gray-03: #74717a !default;
+$brand-gray-04: #45424d !default;
+$brand-gray-05: #2b2838 !default;
+
 // The indigo light and indigo dark use $theme-indigo variables.
 $theme-indigo-50: #f1f1ff !default;
 $theme-indigo-100: #dbdbf8 !default;
@@ -291,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;