@gitlab/duo-ui 0.1.0 → 0.2.0

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

@@ -1,19 +0,0 @@
-// See https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss
-
-@mixin gl-sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-@mixin gl-sr-only-focusable {
-  &:not(:focus) {
-    @include gl-sr-only();
-  }
-}

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

@@ -1,90 +0,0 @@
-@keyframes gl-spinner-rotate {
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@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/background.scss

@@ -1,421 +0,0 @@
-/**
-* Background color utilities.
-*
-* naming convention: gl-bg-{color-palette-variable-name}
-* notes:
-* - Strictly based design system color palette. See variables.scss
-* for a comprehensive list.
-*/
-@mixin gl-bg-transparent($hover: true) {
-  background-color: transparent;
-}
-
-@mixin gl-bg-current-color {
-  background-color: currentColor;
-}
-
-@mixin gl-bg-white {
-  background-color: $white;
-}
-
-@mixin gl-bg-black {
-  background-color: $black;
-}
-
-@mixin gl-reset-bg {
-  background-color: inherit;
-}
-
-@mixin gl-bg-gray-10 {
-  background-color: $gray-10;
-}
-
-@mixin gl-bg-gray-50($active: true, $focus: true, $hover: true) {
-  background-color: $gray-50;
-}
-
-@mixin gl-bg-gray-100 {
-  background-color: $gray-100;
-}
-
-@mixin gl-bg-gray-200 {
-  background-color: $gray-200;
-}
-
-@mixin gl-bg-gray-300 {
-  background-color: $gray-300;
-}
-
-@mixin gl-bg-gray-400 {
-  background-color: $gray-400;
-}
-
-@mixin gl-bg-gray-500 {
-  background-color: $gray-500;
-}
-
-@mixin gl-bg-gray-600 {
-  background-color: $gray-600;
-}
-
-@mixin gl-bg-gray-700 {
-  background-color: $gray-700;
-}
-
-@mixin gl-bg-gray-900 {
-  background-color: $gray-900;
-}
-
-@mixin gl-bg-gray-950 {
-  background-color: $gray-950;
-}
-
-@mixin gl-bg-blue-50($hover: true) {
-  background-color: $blue-50;
-}
-
-@mixin gl-bg-blue-100 {
-  background-color: $blue-100;
-}
-
-@mixin gl-bg-blue-200 {
-  background-color: $blue-200;
-}
-
-@mixin gl-bg-blue-500 {
-  background-color: $blue-500;
-}
-
-@mixin gl-bg-blue-600 {
-  background-color: $blue-600;
-}
-
-@mixin gl-bg-blue-700 {
-  background-color: $blue-700;
-}
-
-@mixin gl-bg-green-50 {
-  background-color: $green-50;
-}
-
-@mixin gl-bg-green-100 {
-  background-color: $green-100;
-}
-
-@mixin gl-bg-green-200 {
-  background-color: $green-200;
-}
-
-@mixin gl-bg-green-500 {
-  background-color: $green-500;
-}
-
-@mixin gl-bg-green-600 {
-  background-color: $green-600;
-}
-
-@mixin gl-bg-green-700 {
-  background-color: $green-700;
-}
-
-@mixin gl-bg-theme-green-100 {
-  background-color: $theme-green-100;
-}
-
-@mixin gl-bg-orange-50 {
-  background-color: $orange-50;
-}
-
-@mixin gl-bg-orange-100 {
-  background-color: $orange-100;
-}
-
-@mixin gl-bg-orange-200 {
-  background-color: $orange-200;
-}
-
-@mixin gl-bg-orange-500 {
-  background-color: $orange-500;
-}
-
-@mixin gl-bg-orange-600 {
-  background-color: $orange-600;
-}
-
-@mixin gl-bg-orange-700 {
-  background-color: $orange-700;
-}
-
-@mixin gl-bg-purple-50 {
-  background-color: $purple-50;
-}
-
-@mixin gl-bg-purple-500 {
-  background-color: $purple-500;
-}
-
-@mixin gl-bg-purple-800 {
-  background-color: $purple-800;
-}
-
-@mixin gl-bg-red-50 {
-  background-color: $red-50;
-}
-
-@mixin gl-bg-red-100 {
-  background-color: $red-100;
-}
-
-@mixin gl-bg-red-200 {
-  background-color: $red-200;
-}
-
-@mixin gl-bg-red-500 {
-  background-color: $red-500;
-}
-
-@mixin gl-bg-red-600 {
-  background-color: $red-600;
-}
-
-@mixin gl-bg-red-700 {
-  background-color: $red-700;
-}
-
-@mixin gl-bg-t-gray-a-08($hover: true, $focus: true, $active: true) {
-  background-color: $t-gray-a-08;
-}
-
-@mixin gl-bg-theme-indigo-50 {
-  background-color: $theme-indigo-50;
-}
-
-@mixin gl-bg-theme-indigo-500 {
-  background-color: $theme-indigo-500;
-}
-
-@mixin gl-bg-theme-indigo-700 {
-  background-color: $theme-indigo-700;
-}
-
-@mixin gl-bg-theme-indigo-900 {
-  background-color: $theme-indigo-900;
-}
-
-@mixin gl-bg-theme-blue-500 {
-  background-color: $theme-blue-500;
-}
-
-@mixin gl-bg-theme-blue-700 {
-  background-color: $theme-blue-700;
-}
-
-@mixin gl-bg-theme-blue-900 {
-  background-color: $theme-blue-900;
-}
-
-@mixin gl-bg-theme-green-500 {
-  background-color: $theme-green-500;
-}
-
-@mixin gl-bg-theme-green-700 {
-  background-color: $theme-green-700;
-}
-
-@mixin gl-bg-theme-green-900 {
-  background-color: $theme-green-900;
-}
-
-@mixin gl-bg-theme-red-500 {
-  background-color: $theme-red-500;
-}
-
-@mixin gl-bg-theme-red-700 {
-  background-color: $theme-red-700;
-}
-
-@mixin gl-bg-theme-red-900 {
-  background-color: $theme-red-900;
-}
-
-@mixin gl-bg-data-viz-blue-500 {
-  background-color: $data-viz-blue-500;
-}
-
-@mixin gl-bg-data-viz-blue-600 {
-  background-color: $data-viz-blue-600;
-}
-
-@mixin gl-bg-data-viz-blue-700 {
-  background-color: $data-viz-blue-700;
-}
-
-@mixin gl-bg-data-viz-blue-800 {
-  background-color: $data-viz-blue-800;
-}
-
-@mixin gl-bg-data-viz-blue-900 {
-  background-color: $data-viz-blue-900;
-}
-
-@mixin gl-bg-data-viz-blue-950 {
-  background-color: $data-viz-blue-950;
-}
-
-@mixin gl-bg-data-viz-orange-500 {
-  background-color: $data-viz-orange-500;
-}
-
-@mixin gl-bg-data-viz-orange-600 {
-  background-color: $data-viz-orange-600;
-}
-
-@mixin gl-bg-data-viz-orange-700 {
-  background-color: $data-viz-orange-700;
-}
-
-@mixin gl-bg-data-viz-orange-800 {
-  background-color: $data-viz-orange-800;
-}
-
-@mixin gl-bg-data-viz-orange-900 {
-  background-color: $data-viz-orange-900;
-}
-
-@mixin gl-bg-data-viz-orange-950 {
-  background-color: $data-viz-orange-950;
-}
-
-@mixin gl-bg-data-viz-aqua-500 {
-  background-color: $data-viz-aqua-500;
-}
-
-@mixin gl-bg-data-viz-aqua-600 {
-  background-color: $data-viz-aqua-600;
-}
-
-@mixin gl-bg-data-viz-aqua-700 {
-  background-color: $data-viz-aqua-700;
-}
-
-@mixin gl-bg-data-viz-aqua-800 {
-  background-color: $data-viz-aqua-800;
-}
-
-@mixin gl-bg-data-viz-aqua-900 {
-  background-color: $data-viz-aqua-900;
-}
-
-@mixin gl-bg-data-viz-aqua-950 {
-  background-color: $data-viz-aqua-950;
-}
-
-@mixin gl-bg-data-viz-green-500 {
-  background-color: $data-viz-green-500;
-}
-
-@mixin gl-bg-data-viz-green-600 {
-  background-color: $data-viz-green-600;
-}
-
-@mixin gl-bg-data-viz-green-700 {
-  background-color: $data-viz-green-700;
-}
-
-@mixin gl-bg-data-viz-green-800 {
-  background-color: $data-viz-green-800;
-}
-
-@mixin gl-bg-data-viz-green-900 {
-  background-color: $data-viz-green-900;
-}
-
-@mixin gl-bg-data-viz-green-950 {
-  background-color: $data-viz-green-950;
-}
-
-@mixin gl-bg-data-viz-magenta-500 {
-  background-color: $data-viz-magenta-500;
-}
-
-@mixin gl-bg-data-viz-magenta-600 {
-  background-color: $data-viz-magenta-600;
-}
-
-@mixin gl-bg-data-viz-magenta-700 {
-  background-color: $data-viz-magenta-700;
-}
-
-@mixin gl-bg-data-viz-magenta-800 {
-  background-color: $data-viz-magenta-800;
-}
-
-@mixin gl-bg-data-viz-magenta-900 {
-  background-color: $data-viz-magenta-900;
-}
-
-@mixin gl-bg-data-viz-magenta-950 {
-  background-color: $data-viz-magenta-950;
-}
-
-@mixin gl-bg-none {
-  background: none;
-}
-
-/**
-* Background position utilities.
-*
-* naming convention: gl-bg-{position}
-*/
-@mixin gl-bg-center {
-  background-position: center;
-}
-
-/**
-* Background size utilities.
-*
-* naming convention: gl-bg-{repeat-pattern}
-*/
-@mixin gl-bg-size-100p {
-  background-size: 100% 100%;
-}
-
-@mixin gl-bg-size-cover {
-  background-size: cover;
-}
-
-/**
-* Background repeat utilities.
-*
-* naming convention: gl-bg-{repeat-pattern}
-*/
-@mixin gl-bg-no-repeat {
-  background-repeat: no-repeat;
-}
-
-/**
-* Background image utilities.
-*
-* naming convention: gl-bg-{image-name}
-*/
-@mixin gl-bg-chevron-left {
-  background-image: url('#{$gl-icon-chevron-left}');
-}
-
-@mixin gl-bg-chevron-right {
-  background-image: url('#{$gl-icon-chevron-right}');
-}
-
-@mixin gl-bg-chevron-down {
-  background-image: url('#{$gl-icon-chevron-down}');
-}
-
-/**
-* Backdrop filter utilities
-*
-* naming convention: gl-filter-{filter-type}-{filter-intensity}
-*/
-
-@mixin gl-backdrop-filter-blur-1 {
-  backdrop-filter: blur($gl-spacing-scale-1);
-}