@gitlab/duo-ui 0.1.0

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

@@ -0,0 +1,699 @@
+/*
+ * 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;
+  }
+}