@papillonbits/components 0.17.0 → 0.18.0

package/build/primer/Button/ButtonGroup.scss

@@ -0,0 +1,96 @@
+@import '../../index.scss';
+
+// stylelint-disable no-descending-specificity
+
+// Button group
+//
+// A button group is a series of buttons laid out next to each other, all part
+// of one visual button, but separated by rules to be separate.
+
+.BtnGroup {
+  display: inline-block;
+  vertical-align: middle;
+
+  @include clearfix();
+
+  // Proper spacing for multiple button groups (a la, gollum editor)
+  + .BtnGroup,
+  + .btn {
+    margin-left: $spacer-1;
+  }
+}
+
+.BtnGroup-item {
+  position: relative;
+  float: left;
+  border-right-width: 0;
+  border-radius: 0;
+
+  &:first-child {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child {
+    border-right-width: $border-width;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &:focus,
+  &:active,
+  &:hover {
+    border-right-width: $border-width;
+
+    + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item {
+      border-left-width: 0;
+    }
+  }
+}
+
+.BtnGroup-parent {
+  float: left;
+
+  &:first-child .BtnGroup-item {
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child .BtnGroup-item {
+    border-right-width: $border-width;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  .BtnGroup-item {
+    border-right-width: 0;
+    border-radius: 0;
+  }
+
+  &.selected,
+  &[aria-selected='true'],
+  &:focus,
+  &:active,
+  &:hover {
+    .BtnGroup-item {
+      border-right-width: $border-width;
+    }
+
+    + .BtnGroup-item,
+    + .BtnGroup-parent .BtnGroup-item {
+      border-left-width: 0;
+    }
+  }
+}
+
+// ensure that the focus ring sits above the adjacent buttons
+.BtnGroup-item,
+.BtnGroup-parent {
+  &:focus,
+  &:active {
+    z-index: 1;
+  }
+}

package/build/primer/Button/misc.scss

@@ -1,3 +1,4 @@
+// stylelint-disable no-descending-specificity
 // stylelint-disable selector-max-type, function-no-unknown
 
 // Link-like buttons
@@ -7,7 +8,7 @@
   display: inline-block;
   padding: 0;
   font-size: inherit;
-  color: $text-blue;
+  color: var(--color-accent-fg);
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
@@ -24,34 +25,58 @@
   &[aria-disabled='true'] {
     &,
     &:hover {
-      // stylelint-disable-next-line primer/colors
-      color: rgba($gray-600, 0.5);
+      color: var(--color-primer-fg-disabled);
       cursor: default;
     }
   }
+
+  &:not(.dropdown-item) {
+    &:focus,
+    &:focus-visible {
+      border-radius: $border-radius;
+      outline-offset: 0;
+    }
+  }
 }
 
 // Invisible button
 //
 // Typically used as a "cancel" button next to a .btn
 .btn-invisible {
-  color: $text-blue;
+  color: var(--color-accent-fg);
   background-color: transparent; // Reset default gradient backgrounds and colors
   border: 0;
-  border-radius: 0;
+  border-radius: $border-radius;
   box-shadow: none;
 
   &:hover,
+  &.zeroclipboard-is-hover {
+    color: var(--color-accent-fg);
+    background-color: var(--color-btn-hover-bg);
+    outline: none;
+    box-shadow: none;
+  }
+
   &:active,
-  &:focus,
   &.selected,
   &[aria-selected='true'],
-  &.zeroclipboard-is-hover,
   &.zeroclipboard-is-active {
-    color: $text-blue;
+    color: var(--color-accent-fg);
     background: none;
-    outline: none;
-    box-shadow: none;
+    border-color: var(--color-btn-active-border);
+
+    @include focusOutline;
+  }
+
+  &:active &.zeroclipboard-is-active {
+    background-color: var(--color-btn-selected-bg);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    background-color: transparent;
   }
 }
 
@@ -65,32 +90,36 @@
   // stylelint-disable-next-line primer/spacing
   margin-left: 5px;
   line-height: $lh-condensed-ultra;
-  color: $text-gray;
+  color: var(--color-fg-muted);
   vertical-align: middle;
 
   // For `<button>` elements
   background: transparent;
   border: 0;
+  box-shadow: none;
 
   &:hover {
-    color: $text-blue;
+    color: var(--color-accent-fg);
+  }
+
+  &:focus,
+  &:focus-visible {
+    border-radius: $border-radius;
   }
 
   &.disabled,
   &[aria-disabled='true'] {
-    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
+    color: var(--color-primer-fg-disabled);
     cursor: default;
 
-    // stylelint-disable-next-line primer/colors
     &:hover {
-      color: $gray-400;
+      color: var(--color-primer-fg-disabled);
     }
   }
 }
 
 .btn-octicon-danger:hover {
-  color: $text-red;
+  color: var(--color-danger-fg);
 }
 
 // Close button
@@ -98,9 +127,17 @@
 // Typically used with an octicon-x
 .close-button {
   padding: 0;
+  color: var(--color-fg-muted);
   background: transparent;
   border: 0;
-  outline: none;
+
+  &:hover {
+    color: var(--color-fg-default);
+  }
+
+  &:active {
+    @include focusOutline;
+  }
 }
 
 // Hidden text button
@@ -129,26 +166,22 @@
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
   line-height: 6px;
-  // stylelint-disable-next-line primer/colors
-  color: $gray-700;
+  color: var(--color-fg-default);
   text-decoration: none;
   vertical-align: middle;
-  // stylelint-disable-next-line primer/colors
-  background: lighten($gray-300, 5%);
+  background: var(--color-neutral-muted);
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 1px;
 
   &:hover {
     text-decoration: none;
-    // stylelint-disable-next-line primer/colors
-    background-color: darken($gray-300, 4%);
+    background-color: var(--color-accent-muted);
   }
 
   &:active {
-    color: $text-white;
-    // stylelint-disable-next-line primer/colors
-    background-color: $blue-400;
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
   }
 }
 
@@ -178,14 +211,14 @@
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: $text-gray-dark;
+  color: var(--color-fg-default);
   vertical-align: middle;
-  background-color: $bg-white;
-  border: $border-width $border-style $border-color-button;
+  background-color: var(--color-canvas-default);
+  border: $border-width $border-style var(--color-btn-border);
   border-left: 0;
   border-top-right-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
-  box-shadow: $box-shadow, $box-shadow-highlight;
+  box-shadow: var(--color-shadow-small), var(--color-primer-shadow-highlight);
 
   &:hover,
   &:active {
@@ -193,13 +226,7 @@
   }
 
   &:hover {
-    color: $text-blue;
+    color: var(--color-accent-fg);
     cursor: pointer;
   }
-
-  &:focus {
-    z-index: 1;
-    outline: 0;
-    box-shadow: $box-shadow-focus;
-  }
 }