@gitlab/ui 66.8.0 → 66.10.0

package/src/scss/utility-mixins/animation.scss

@@ -11,3 +11,80 @@
 @mixin gl-spin {
   animation: gl-spinner-rotate 2s infinite linear;
 }
+
+$gl-animate-skeleton-loader-max-width: 64 * $grid-size;
+// Adds a sliding shining wave to element's background to indicate loading
+//
+// USAGE NOTES: if you're using `gl-max-w-xx` you'll need to add
+// important (e.g. `gl-max-w-20!`). This is because `.gl-animate-skeleton-loader` already
+// has a `max-width` statement, and we need to override it. You can override it
+// only with lower numbers. Width rules (`gl-w-xx`) don't need an override, you
+// can use them as-is. If you want to "synchronize" two elements next to each
+// other, try adding `animation-delay` to offset elements.
+//
+// Simple example:
+// ```html
+// <div>
+//   <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3"></div>
+//   <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3"></div>
+//   <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3"></div>
+// </div>
+// ```
+//
+// More complex example:
+// (with different shapes and an animation delay for offset elements):
+// ```html
+// <div class="gl-display-flex gl-flex-direction-column gl-gap-2 gl-w-30">
+//   <div class="gl-animate-skeleton-loader gl-h-8 gl-rounded-base gl-mb-4"></div>
+//   <div class="gl-display-flex gl-flex-direction-row gl-gap-2">
+//     <div class="gl-animate-skeleton-loader gl-h-8 gl-w-8 gl-rounded-full"></div>
+//     <div class="gl-flex-grow-1" style="animation-delay: 100ms">
+//       <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-2"></div>
+//       <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-2"></div>
+//       <div class="gl-animate-skeleton-loader gl-display-inline-block gl-h-4 gl-w-10 gl-rounded-base gl-my-2"></div>
+//       <div class="gl-animate-skeleton-loader gl-display-inline-block gl-h-4 gl-w-10 gl-rounded-base gl-my-2" style="animation-delay: 250ms"></div>
+//     </div>
+//   </div>
+// </div>
+// ```
+@mixin gl-animate-skeleton-loader {
+  $max-width: $gl-animate-skeleton-loader-max-width;
+
+  overflow: hidden;
+  max-width: $max-width;
+  background-size: $max-width 100%;
+  background-position: -$max-width 0;
+  background-color: $gray-100;
+  background-image: linear-gradient(to right,
+  $gray-100 0,
+  $gray-50 23%,
+  $gray-50 27%,
+  $gray-100 50%);
+  background-repeat: no-repeat;
+
+  // Enable animation only for users who don't have a preference
+  // for reduced animation
+  @media (prefers-reduced-motion: no-preference) {
+    animation: gl-keyframes-skeleton-loader 2.5s linear;
+    animation-delay: inherit;
+    animation-iteration-count: 3;
+  }
+}
+
+@keyframes gl-keyframes-skeleton-loader {
+  // Skeleton loader animation basically moves background from `x=-100%` to
+  // `x=+100%`, so that at the beginning and at the end of the animation loop no
+  // gradient is leaking to the visible part. But we can't use percent-based
+  // positioning, for animation speed would be different for elements with
+  // different width. So we use a predefined max-width for
+  // `.gl-animate-skeleton-loader`, and use its value for `-100%` and `+100%`
+  // positioning.
+
+  0% {
+    background-position-x: -$gl-animate-skeleton-loader-max-width;
+  }
+
+  100% {
+    background-position-x: $gl-animate-skeleton-loader-max-width;
+  }
+}

package/src/scss/utility-mixins/sizing.scss

@@ -428,10 +428,18 @@
   max-width: $gl-spacing-scale-15;
 }
 
+@mixin gl-max-w-20 {
+  max-width: $gl-spacing-scale-20;
+}
+
 @mixin gl-max-w-26 {
   max-width: $gl-spacing-scale-26;
 }
 
+@mixin gl-max-w-30 {
+  max-width: $gl-spacing-scale-30;
+}
+
 @mixin gl-max-w-34 {
   max-width: $gl-spacing-scale-34;
 }

package/src/scss/variables.scss

@@ -338,6 +338,18 @@ $gl-line-height-42: px-to-rem(42px);
 $gl-line-height-44: px-to-rem(44px);
 $gl-line-height-52: px-to-rem(52px);
 
+// Fonts
+$gl-monospace-font: 'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono',
+  'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace !default;
+$gl-regular-font: 'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans',
+  Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+  'Segoe UI Symbol', 'Noto Color Emoji' !default;
+
+$gl-fonts: (
+  'monospace': $gl-monospace-font,
+  'regular': $gl-regular-font,
+);
+
 // New UI type scale
 // Implements the type scale from https://gitlab.com/groups/gitlab-org/gitlab-services/-/epics/15
 // Old variables and styles need to be removed after intergration
@@ -345,24 +357,44 @@ $gl-line-height-52: px-to-rem(52px);
 // Font size scale
 
 // fixed scale (compact markdown)
-$gl-font-size-100-fixed: px-to-rem(12px);
-$gl-font-size-200-fixed: px-to-rem(13px);
-$gl-font-size-300-fixed: px-to-rem(14px);
-$gl-font-size-400-fixed: px-to-rem(16px);
-$gl-font-size-500-fixed: px-to-rem(18px);
-$gl-font-size-600-fixed: px-to-rem(21px);
-$gl-font-size-700-fixed: px-to-rem(24px);
-$gl-font-size-800-fixed: px-to-rem(28px);
+$gl-font-sizes-fixed: (
+  100: px-to-rem(12px),
+  200: px-to-rem(13px),
+  300: px-to-rem(14px),
+  400: px-to-rem(16px),
+  500: px-to-rem(18px),
+  600: px-to-rem(21px),
+  700: px-to-rem(24px),
+  800: px-to-rem(28px),
+);
 
 // dynamic scale (default) resizes based on viewport width
-$gl-font-size-100: $gl-font-size-100-fixed;
-$gl-font-size-200: $gl-font-size-200-fixed;
-$gl-font-size-300: $gl-font-size-300-fixed;
-$gl-font-size-400: $gl-font-size-400-fixed;
-$gl-font-size-500: #{clamp-between($gl-font-size-500-fixed, px-to-rem(20px))};
-$gl-font-size-600: #{clamp-between($gl-font-size-600-fixed, px-to-rem(25px))};
-$gl-font-size-700: #{clamp-between($gl-font-size-700-fixed, px-to-rem(30px))};
-$gl-font-size-800: #{clamp-between($gl-font-size-800-fixed, px-to-rem(36px))};
+$gl-font-sizes: (
+  100: map-get($gl-font-sizes-fixed, 100),
+  200: map-get($gl-font-sizes-fixed, 200),
+  300: map-get($gl-font-sizes-fixed, 300),
+  400: map-get($gl-font-sizes-fixed, 400),
+  500: clamp-between(map-get($gl-font-sizes-fixed, 500), px-to-rem(20px)),
+  600: clamp-between(map-get($gl-font-sizes-fixed, 600), px-to-rem(25px)),
+  700: clamp-between(map-get($gl-font-sizes-fixed, 700), px-to-rem(30px)),
+  800: clamp-between(map-get($gl-font-sizes-fixed, 800), px-to-rem(36px)),
+);
+
+// Heading variables
+// Not all are currently used, but documented here to capture intent
+$gl-font-heading: $gl-regular-font;
+$gl-font-weight-heading: 600;
+$gl-letter-spacing-heading: inherit;
+$gl-letter-spacing-heading-reduced: -0.01em;
+$gl-line-height-heading: 1.25;
+$gl-line-height-heading-display: 1.125;
+$gl-mb-heading: $gl-spacing-scale-5;
+$gl-mb-heading-display: $gl-spacing-scale-6;
+$gl-text-color-heading: $gl-text-color;
+// Not yet supported, but we'll be ready
+$gl-text-wrap-heading: pretty;
+
+// END New UI type scale
 
 // UI typescale
 
@@ -417,18 +449,6 @@ $gl-font-size-compact-markdown-h1-md: px-to-rem(20px);
 // media xl (min-width: 1200px)
 $gl-font-size-compact-markdown-h1-xl: px-to-rem(23px);
 
-// Fonts
-$gl-monospace-font: 'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono',
-  'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace !default;
-$gl-regular-font: 'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans',
-  Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-  'Segoe UI Symbol', 'Noto Color Emoji' !default;
-
-$gl-fonts: (
-  'monospace': $gl-monospace-font,
-  'regular': $gl-regular-font,
-);
-
 $border-color: $gray-100 !default;
 
 // use px for borders rather than rem