@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/components/base/button/button.scss

@@ -1,699 +0,0 @@
-/*
- * Button-specific utilities
- */
-@mixin gl-button-border($color) {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $color;
-}
-
-@mixin gl-button-hover-border($color) {
-  box-shadow: inset 0 0 0 $gl-border-size-2 $color;
-}
-
-@mixin gl-button-selected-border($color, $focus-ring: null) {
-  @if $focus-ring {
-    box-shadow: inset 0 0 0 $gl-border-size-2 $color, $focus-ring;
-  } @else {
-    box-shadow: inset 0 0 0 $gl-border-size-2 $color;
-  }
-}
-
-@mixin gl-button-theme(
-  $color: null,
-  $background-color: null,
-  $border-color: null,
-  $hover-color: null,
-  $hover-background-color: null,
-  $hover-border-color: null,
-  $focus-color: null,
-  $focus-background-color: null,
-  $focus-border-color: null,
-  $active-color: null,
-  $active-background-color: null,
-  $active-border-color: null,
-) {
-  color: $color;
-  background-color: $background-color;
-  @if $feature-button-border {
-    border-color: $border-color;
-  } @else {
-    @include gl-button-border($border-color);
-  }
-
-  &:hover {
-    color: $hover-color;
-    background-color: $hover-background-color;
-    @if $feature-button-border {
-      border-color: $hover-border-color;
-    } @else {
-      @include gl-button-hover-border($hover-border-color);
-    }
-  }
-
-  &:focus {
-    color: $focus-color;
-    background-color: $focus-background-color;
-    @if $feature-button-border {
-      border-color: $focus-border-color;
-    } @else {
-      @include gl-focus($color: $focus-border-color);
-    }
-  }
-
-  &:active,
-  &.active {
-    color: $active-color;
-    background-color: $active-background-color;
-    @if $feature-button-border {
-      border-color: $active-border-color;
-    } @else {
-      @include gl-focus($color: $focus-border-color);
-    }
-
-    @if $feature-button-border {
-      :focus,
-      &:focus:active {
-        @apply gl-focus;
-      }
-    } @else {
-      &:focus {
-        @include gl-focus($color: $active-border-color);
-      }
-    }
-  }
-}
-
-// low specificity so that display can be overridden to hide buttons
-.gl-button {
-  @apply gl-inline-flex;
-}
-
-.gl-button:not(.btn-link) {
-  &:focus,
-  &:active,
-  &:focus:active {
-    @apply gl-no-underline;
-  }
-}
-
-.gl-button.gl-button {
-  @apply gl-rounded-base;
-  @apply gl-px-4;
-  background-color: var(--gl-button-default-primary-background-color-default);
-  @apply gl-leading-normal;
-  color: var(--gl-button-default-primary-foreground-color-default);
-  @apply gl-fill-current;
-  @apply gl-justify-center;
-  @apply gl-items-center;
-  @apply gl-text-base;
-
-  @if $feature-button-border {
-    @apply gl-py-0;
-    border: $gl-border-size-1 solid var(--gl-button-default-primary-border-color-default);
-    min-height: $gl-button-medium-size;
-    min-width: $gl-button-medium-size;
-    @include gl-prefers-reduced-motion-transition;
-    transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
-                background-color $gl-transition-duration-medium $gl-easing-out-cubic,
-                border-color $gl-transition-duration-medium $gl-easing-out-cubic,
-                box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
-                text-decoration-color $gl-transition-duration-medium $gl-easing-out-cubic;
-  } @else {
-    @apply gl-border-0;
-    @apply gl-py-3;
-    @include gl-button-border(var(--gl-button-default-primary-border-color-default));
-  }
-
-  @if $feature-button-border {
-    &:focus,
-    &:focus:active {
-      @apply gl-focus;
-    }
-  } @else {
-    @media (forced-colors: active) {
-      border: 1px solid;
-    }
-  }
-
-  .gl-button-text {
-    @apply gl-overflow-hidden;
-    @apply gl-text-ellipsis;
-    @apply gl-whitespace-nowrap;
-    // Added to address a FF bug which causes cut off text: https://bugzilla.mozilla.org/show_bug.cgi?id=1406552
-    padding-top: 1px;
-    padding-bottom: 1px;
-    margin-top: -1px;
-    margin-bottom: -1px;
-  }
-
-  .gl-button-icon {
-    @apply gl-h-5;
-    @apply gl-w-5;
-    @apply gl-shrink-0;
-    @apply gl-mr-2;
-    top: auto;
-  }
-
-  gl-emoji {
-    @apply gl-mr-2;
-    position: relative;
-    @apply gl-text-lg;
-  }
-
-  &.btn-default,
-  &.btn-default-secondary {
-    @include gl-button-theme(
-      $color: var(--gl-button-default-primary-foreground-color-default),
-      $background-color: var(--gl-button-default-primary-background-color-default),
-      $border-color: var(--gl-button-default-primary-border-color-default),
-      $hover-color: var(--gl-button-default-primary-foreground-color-hover),
-      $hover-background-color: var(--gl-button-default-primary-background-color-hover),
-      $hover-border-color: var(--gl-button-default-primary-border-color-hover),
-      $focus-color: var(--gl-button-default-primary-foreground-color-focus),
-      $focus-background-color: var(--gl-button-default-primary-background-color-focus),
-      $focus-border-color: var(--gl-button-default-primary-border-color-focus),
-      $active-color: var(--gl-button-default-primary-foreground-color-active),
-      $active-background-color: var(--gl-button-default-primary-background-color-active),
-      $active-border-color: var(--gl-button-default-primary-border-color-active),
-    );
-
-    &.selected {
-      color: var(--gl-button-selected-foreground-color-default);
-      background-color: var(--gl-button-selected-background-color-default);
-      @if $feature-button-border {
-        border-width: $gl-border-size-2;
-        border-color: var(--gl-button-selected-border-color-default);
-      } @else {
-        @include gl-button-selected-border(var(--gl-button-selected-border-color-default));
-      }
-
-      &:hover {
-        color: var(--gl-button-selected-foreground-color-hover);
-        background-color: var(--gl-button-selected-background-color-hover);
-        @if $feature-button-border {
-          border-color: var(--gl-button-selected-border-color-hover);
-        } @else {
-          @include gl-button-selected-border(var(--gl-button-selected-border-color-hover));
-        }
-      }
-
-      &:focus {
-        color: var(--gl-button-selected-foreground-color-focus);
-        background-color: var(--gl-button-selected-background-color-focus);
-        @if $feature-button-border {
-          border-color: var(--gl-button-selected-border-color-focus);
-        } @else {
-          @include gl-button-selected-border(var(--gl-button-selected-border-color-focus), $focus-ring);
-        }
-      }
-
-      &:active,
-      &.active {
-        color: var(--gl-button-selected-foreground-color-active);
-        background-color: var(--gl-button-selected-background-color-active);
-        @if $feature-button-border {
-          border-color: var(--gl-button-selected-border-color-active);
-        } @else {
-          @include gl-button-selected-border(var(--gl-button-selected-border-color-active), $focus-ring);
-
-          &:focus {
-            @include gl-button-selected-border(var(--gl-button-selected-border-color-active), $focus-ring);
-          }
-        }
-      }
-    }
-  }
-
-  &.btn-default-tertiary,
-  &.btn-dashed {
-    @include gl-button-theme(
-      $color: var(--gl-button-default-tertiary-foreground-color-default),
-      $background-color: var(--gl-button-default-tertiary-background-color-default),
-      $border-color: var(--gl-button-default-tertiary-border-color-default),
-      $hover-color: var(--gl-button-default-tertiary-foreground-color-hover),
-      $hover-background-color: var(--gl-button-default-tertiary-background-color-hover),
-      $hover-border-color: var(--gl-button-default-tertiary-border-color-hover),
-      $focus-color: var(--gl-button-default-tertiary-foreground-color-focus),
-      $focus-background-color: var(--gl-button-default-tertiary-background-color-focus),
-      $focus-border-color: var(--gl-button-default-tertiary-border-color-focus),
-      $active-color: var(--gl-button-default-tertiary-foreground-color-active),
-      $active-background-color: var(--gl-button-default-tertiary-background-color-active),
-      $active-border-color: var(--gl-button-default-tertiary-border-color-active),
-    );
-  }
-
-  &.btn-confirm,
-  &.btn-info {
-    @include gl-button-theme(
-      $color: var(--gl-button-confirm-primary-foreground-color-default),
-      $background-color: var(--gl-button-confirm-primary-background-color-default),
-      $border-color: var(--gl-button-confirm-primary-border-color-default),
-      $hover-color: var(--gl-button-confirm-primary-foreground-color-hover),
-      $hover-background-color: var(--gl-button-confirm-primary-background-color-hover),
-      $hover-border-color: var(--gl-button-confirm-primary-border-color-hover),
-      $focus-color: var(--gl-button-confirm-primary-foreground-color-focus),
-      $focus-background-color: var(--gl-button-confirm-primary-background-color-focus),
-      $focus-border-color: var(--gl-button-confirm-primary-border-color-focus),
-      $active-color: var(--gl-button-confirm-primary-foreground-color-active),
-      $active-background-color: var(--gl-button-confirm-primary-background-color-active),
-      $active-border-color: var(--gl-button-confirm-primary-border-color-active),
-    );
-  }
-
-  &.btn-confirm-secondary,
-  &.btn-info-secondary {
-    @include gl-button-theme(
-      $color: var(--gl-button-confirm-secondary-foreground-color-default),
-      $background-color: var(--gl-button-confirm-secondary-background-color-default),
-      $border-color: var(--gl-button-confirm-secondary-border-color-default),
-      $hover-color: var(--gl-button-confirm-secondary-foreground-color-hover),
-      $hover-background-color: var(--gl-button-confirm-secondary-background-color-hover),
-      $hover-border-color: var(--gl-button-confirm-secondary-border-color-hover),
-      $focus-color: var(--gl-button-confirm-secondary-foreground-color-focus),
-      $focus-background-color: var(--gl-button-confirm-secondary-background-color-focus),
-      $focus-border-color: var(--gl-button-confirm-secondary-border-color-focus),
-      $active-color: var(--gl-button-confirm-secondary-foreground-color-active),
-      $active-background-color: var(--gl-button-confirm-secondary-background-color-active),
-      $active-border-color: var(--gl-button-confirm-secondary-border-color-active),
-    );
-  }
-
-  &.btn-confirm-tertiary,
-  &.btn-info-tertiary {
-    @include gl-button-theme(
-      $color: var(--gl-button-confirm-tertiary-foreground-color-default),
-      $background-color: var(--gl-button-confirm-tertiary-background-color-default),
-      $border-color: var(--gl-button-confirm-tertiary-border-color-default),
-      $hover-color: var(--gl-button-confirm-tertiary-foreground-color-hover),
-      $hover-background-color: var(--gl-button-confirm-tertiary-background-color-hover),
-      $hover-border-color: var(--gl-button-confirm-tertiary-border-color-hover),
-      $focus-color: var(--gl-button-confirm-tertiary-foreground-color-focus),
-      $focus-background-color: var(--gl-button-confirm-tertiary-background-color-focus),
-      $focus-border-color: var(--gl-button-confirm-tertiary-border-color-focus),
-      $active-color: var(--gl-button-confirm-tertiary-foreground-color-active),
-      $active-background-color: var(--gl-button-confirm-tertiary-background-color-active),
-      $active-border-color: var(--gl-button-confirm-tertiary-border-color-active),
-    );
-  }
-
-  &.btn-danger {
-    @include gl-button-theme(
-      $color: var(--gl-button-danger-primary-foreground-color-default),
-      $background-color: var(--gl-button-danger-primary-background-color-default),
-      $border-color: var(--gl-button-danger-primary-border-color-default),
-      $hover-color: var(--gl-button-danger-primary-foreground-color-hover),
-      $hover-background-color: var(--gl-button-danger-primary-background-color-hover),
-      $hover-border-color: var(--gl-button-danger-primary-border-color-hover),
-      $focus-color: var(--gl-button-danger-primary-foreground-color-focus),
-      $focus-background-color: var(--gl-button-danger-primary-background-color-focus),
-      $focus-border-color: var(--gl-button-danger-primary-border-color-focus),
-      $active-color: var(--gl-button-danger-primary-foreground-color-active),
-      $active-background-color: var(--gl-button-danger-primary-background-color-active),
-      $active-border-color: var(--gl-button-danger-primary-border-color-active),
-    );
-  }
-
-  &.btn-danger-secondary {
-    @include gl-button-theme(
-      $color: var(--gl-button-danger-secondary-foreground-color-default),
-      $background-color: var(--gl-button-danger-secondary-background-color-default),
-      $border-color: var(--gl-button-danger-secondary-border-color-default),
-      $hover-color: var(--gl-button-danger-secondary-foreground-color-hover),
-      $hover-background-color: var(--gl-button-danger-secondary-background-color-hover),
-      $hover-border-color: var(--gl-button-danger-secondary-border-color-hover),
-      $focus-color: var(--gl-button-danger-secondary-foreground-color-focus),
-      $focus-background-color: var(--gl-button-danger-secondary-background-color-focus),
-      $focus-border-color: var(--gl-button-danger-secondary-border-color-focus),
-      $active-color: var(--gl-button-danger-secondary-foreground-color-active),
-      $active-background-color: var(--gl-button-danger-secondary-background-color-active),
-      $active-border-color: var(--gl-button-danger-secondary-border-color-active),
-    );
-  }
-
-  &.btn-danger-tertiary {
-    @include gl-button-theme(
-      $color: var(--gl-button-danger-tertiary-foreground-color-default),
-      $background-color: var(--gl-button-danger-tertiary-background-color-default),
-      $border-color: var(--gl-button-danger-tertiary-border-color-default),
-      $hover-color: var(--gl-button-danger-tertiary-foreground-color-hover),
-      $hover-background-color: var(--gl-button-danger-tertiary-background-color-hover),
-      $hover-border-color: var(--gl-button-danger-tertiary-border-color-hover),
-      $focus-color: var(--gl-button-danger-tertiary-foreground-color-focus),
-      $focus-background-color: var(--gl-button-danger-tertiary-background-color-focus),
-      $focus-border-color: var(--gl-button-danger-tertiary-border-color-focus),
-      $active-color: var(--gl-button-danger-tertiary-foreground-color-active),
-      $active-background-color: var(--gl-button-danger-tertiary-background-color-active),
-      $active-border-color: var(--gl-button-danger-tertiary-border-color-active),
-    );
-  }
-
-  &.btn-default-secondary,
-  &.btn-dashed-secondary,
-  &.btn-confirm-secondary,
-  &.btn-info-secondary,
-  &.btn-success-secondary,
-  &.btn-danger-secondary,
-  &.btn-reset-secondary,
-  &.btn-reset-tertiary {
-    @media (forced-colors: active) {
-      color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-      border: 1px solid LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-    }
-  }
-
-  &.btn-default,
-  &.btn-dashed,
-  &.btn-confirm,
-  &.btn-info,
-  &.btn-success,
-  &.btn-danger {
-    &-tertiary {
-      @if not $feature-button-border {
-        @apply gl-shadow-none;
-      }
-
-      @media (forced-colors: active) {
-        color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-        mix-blend-mode: initial;
-        border: 0;
-      }
-
-      @if not $feature-button-border {
-        &:hover {
-          @apply gl-shadow-none;
-        }
-
-        &:active,
-        &:focus,
-        &:focus:active {
-          @apply gl-focus;
-        }
-      }
-    }
-  }
-
-  &.btn-default-tertiary,
-  &.btn-confirm-tertiary,
-  &.btn-danger-tertiary {
-    @media (forced-colors: active) {
-      color: $black;
-      border: 0;
-    }
-  }
-
-  &.btn-success {
-    color: var(--gl-color-neutral-0); // The text is white in light and dark mode
-    @apply gl-bg-green-500;
-    @if $feature-button-border {
-      border-color: $green-600;
-    } @else {
-      @include gl-inset-border-1-green-600;
-    }
-
-    &:hover {
-      @if $feature-button-border {
-        border-color: $green-800;
-        background-color: $green-600;
-      } @else {
-        @include gl-button-hover-border($green-800);
-        background-color: $green-600;
-      }
-    }
-
-    &:focus {
-      @if $feature-button-border {
-        border-color: $green-800;
-        background-color: $green-600;
-      } @else {
-        @include gl-focus($color: $green-800);
-        @apply gl-bg-green-600;
-      }
-    }
-
-    &:active,
-    &.active {
-      @apply gl-bg-green-700;
-
-      @if $feature-button-border {
-        border-color: $green-900;
-      } @else {
-        @include gl-focus($color: $green-900);
-
-        &:focus {
-          @include gl-focus($color: $green-900);
-        }
-      }
-    }
-  }
-
-  &.btn-success-secondary {
-    @apply gl-bg-white;
-  }
-
-  &.btn-success-secondary,
-  &.btn-success-tertiary {
-    @apply gl-bg-transparent;
-    @apply gl-text-green-500;
-    @apply gl-font-normal;
-    @if $feature-button-border {
-      border-color: $green-500;
-    } @else {
-      @include gl-inset-border-1-green-500;
-    }
-
-    &:hover {
-      @if $feature-button-border {
-        @apply gl-text-green-700;
-        border-color: $green-700;
-        background-color: $green-50;
-      } @else {
-        @apply gl-text-green-700;
-        @include gl-button-hover-border($green-700);
-        background-color: $green-50;
-      }
-    }
-
-    &:focus {
-      @apply gl-text-green-700;
-      @if $feature-button-border {
-        border-color: $green-700;
-        background-color: $green-50;
-      } @else {
-        @include gl-focus($color: $green-700);
-        @apply gl-bg-green-50;
-      }
-    }
-
-    &:active,
-    &.active {
-      @apply gl-text-green-900;
-      @apply gl-bg-green-100;
-      @if $feature-button-border {
-        border-color: $green-900;
-      } @else {
-        @include gl-focus($color: $green-900);
-
-        &:focus {
-          @include gl-focus($color: $green-900);
-        }
-      }
-    }
-  }
-
-  &.btn-sm {
-    @apply gl-px-3;
-    @apply gl-leading-normal;
-    @apply gl-text-base;
-    @if $feature-button-border {
-      min-height: $gl-button-small-size;
-      min-width: $gl-button-small-size;
-    } @else {
-      @apply gl-py-2;
-    }
-
-    gl-emoji {
-      @apply gl-text-sm;
-    }
-  }
-
-  &.btn-dashed,
-  &.btn-dashed-tertiary {
-    @if $feature-button-border {
-      border-style: dashed;
-      border-color: var(--gl-button-dashed-border-color-default);
-    } @else {
-      @include gl-button-border(var(--gl-button-dashed-border-color-default));
-      outline: 3px dotted var(--gl-background-color-default);
-      outline-offset: (-$gl-border-size-1);
-    }
-
-    &:hover {
-      @if $feature-button-border {
-        border-color: var(--gl-button-dashed-border-color-hover);
-      } @else {
-        @include gl-button-border($color: var(--gl-button-dashed-border-color-hover));
-        outline: 3px dotted var(--gl-background-color-default);
-        outline-offset: (-$gl-border-size-1);
-      }
-    }
-
-    &:focus {
-      @if $feature-button-border {
-        border-color: var(--gl-button-dashed-border-color-focus);
-      } @else {
-        @include gl-focus($color: var(--gl-button-dashed-border-color-focus));
-        outline: 3px dotted var(--gl-background-color-default);
-        outline-offset: (-$gl-border-size-1);
-      }
-    }
-
-    &:active,
-    &.active {
-      @if $feature-button-border {
-        border-color: var(--gl-button-dashed-border-color-active);
-      } @else {
-        @include gl-focus($color: var(--gl-button-dashed-border-color-active));
-        outline: 3px dotted var(--gl-background-color-default);
-        outline-offset: (-$gl-border-size-1);
-
-        &:focus {
-          @include gl-focus($color: var(--gl-button-dashed-border-color-active));
-          outline: 3px dotted var(--gl-background-color-default);
-          outline-offset: (-$gl-border-size-1);
-        }
-      }
-    }
-  }
-
-  &.btn-icon {
-    @apply gl-leading-normal;
-    @if $feature-button-border {
-      @apply gl-p-0;
-    } @else {
-      @apply gl-p-3;
-    }
-
-    .gl-button-icon {
-      @apply gl-mr-0;
-    }
-
-    @if not $feature-button-border {
-      &.btn-sm {
-        @apply gl-p-2;
-      }
-    }
-  }
-
-  &.button-ellipsis-horizontal,
-  &.button-ellipsis-horizontal.btn-sm {
-    @apply gl-px-2;
-    @if $feature-button-border {
-      min-height: auto;
-      min-width: auto;
-    } @else {
-      @apply gl-py-0;
-    }
-
-    svg {
-      @apply gl-h-5;
-      @apply gl-w-5;
-      @apply gl-m-0;
-    }
-  }
-
-  &.btn-label,
-  &.btn-label:hover,
-  &.btn-label:focus,
-  &.btn-label:active {
-    background-color: var(--gl-background-color-subtle);
-    @apply gl-cursor-default;
-    user-select: text;
-  }
-
-  &.btn-link {
-    @apply gl-bg-transparent;
-    @apply gl-border-0;
-    @apply gl-text-base;
-    @apply gl-leading-normal;
-    color: var(--gl-button-link-text-color-default);
-    @if $feature-button-border {
-      @apply gl-px-0;
-      min-height: auto;
-      min-width: auto;
-      text-decoration-thickness: auto;
-      text-decoration-style: solid;
-      text-decoration-color: transparent;
-    } @else {
-      @apply gl-py-0;
-      @apply gl-px-0;
-      @apply gl-shadow-none;
-    }
-
-    &:hover {
-      @apply gl-bg-transparent;
-      color: var(--gl-button-link-text-color-hover);
-      @if $feature-button-border {
-        text-decoration-color: var(--gl-button-link-text-color-hover);
-      }
-    }
-
-    &:active {
-      color: var(--gl-button-link-text-color-active);
-      @if $feature-button-border {
-        text-decoration-color: var(--gl-button-link-text-color-active);
-      } @else {
-        @apply gl-underline;
-      }
-    }
-
-    &:active,
-    &:focus,
-    &:focus:active {
-      @apply gl-bg-transparent;
-      @if not $feature-button-border {
-        @apply gl-focus;
-      }
-    }
-
-    &.disabled,
-    &[disabled] {
-      @apply gl-bg-transparent;
-      @apply gl-shadow-none;
-    }
-  }
-
-  &.btn-block {
-    @apply gl-w-full;
-
-    // Vertically space out multiple block buttons
-    + .btn-block {
-      @apply gl-mt-2;
-    }
-  }
-
-  &.disabled,
-  &.disabled:hover,
-  &.disabled:focus,
-  &.disabled:active,
-  &.disabled.selected,
-  &[disabled],
-  &[disabled]:hover,
-  &[disabled]:focus,
-  &[disabled]:active,
-  &[disabled].selected {
-    background-color: var(--gl-button-disabled-background-color);
-    color: var(--gl-button-disabled-foreground-color);
-    opacity: 1;
-    cursor: not-allowed !important;
-    @if $feature-button-border {
-      border-color: var(--gl-button-disabled-border-color);
-    } @else {
-      @include gl-button-border(var(--gl-button-disabled-border-color));
-    }
-  }
-
-  &.disabled[class*='-tertiary'],
-  &[disabled][class*='-tertiary'] {
-    @apply gl-bg-transparent;
-    @apply gl-shadow-none;
-  }
-}