@primer/css 0.0.0-20220114013357 → 0.0.0-20220114215001

package/dropdown/dropdown.scss

@@ -82,12 +82,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &:focus,
   &:hover {
     color: var(--color-fg-on-emphasis);
     text-decoration: none;
     background-color: var(--color-accent-emphasis);
-    outline: none;
 
     > .octicon {
       color: inherit;

package/forms/form-control.scss

@@ -29,16 +29,8 @@ label {
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
   border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
-  outline: none;
   box-shadow: var(--color-primer-shadow-inset);
 
-  &.focus,
-  &:focus {
-    border-color: var(--color-accent-emphasis);
-    outline: none;
-    box-shadow: var(--color-primer-shadow-focus);
-  }
-
   &[disabled] {
     color: var(--color-primer-fg-disabled);
     background-color: var(--color-input-disabled-bg);

package/forms/form-group.scss

@@ -26,11 +26,17 @@
       background-color: var(--color-canvas-default);
     }
 
-    &.shorter { width: 130px; }
+    &.shorter {
+      width: 130px;
+    }
 
-    &.short { width: 250px; }
+    &.short {
+      width: 250px;
+    }
 
-    &.long { width: 100%; }
+    &.long {
+      width: 100%;
+    }
   }
 
   // Textarea
@@ -81,9 +87,13 @@
     h4 {
       margin: $spacer-1 0 0;
 
-      &.is-error { color: var(--color-danger-fg); }
+      &.is-error {
+        color: var(--color-danger-fg);
+      }
 
-      &.is-success { color: var(--color-success-fg); }
+      &.is-success {
+        color: var(--color-success-fg);
+      }
 
       + .note {
         margin-top: 0;
@@ -195,13 +205,18 @@
       background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
       border-color: var(--color-success-muted);
 
-      &::after { border-bottom-color: var(--color-success-subtle); }
-      &::before { border-bottom-color: var(--color-success-muted); }
+      &::after {
+        border-bottom-color: var(--color-success-subtle);
+      }
+
+      &::before {
+        border-bottom-color: var(--color-success-muted);
+      }
     }
   }
 
   &.warn {
-    .form-control {
+    .form-control:not(:focus, :focus-visible) {
       border-color: var(--color-attention-emphasis);
     }
 
@@ -211,13 +226,18 @@
       background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
       border-color: var(--color-attention-muted);
 
-      &::after { border-bottom-color: var(--color-attention-subtle); }
-      &::before { border-bottom-color: var(--color-attention-muted); }
+      &::after {
+        border-bottom-color: var(--color-attention-subtle);
+      }
+
+      &::before {
+        border-bottom-color: var(--color-attention-muted);
+      }
     }
   }
 
   &.errored {
-    .form-control {
+    .form-control:not(:focus, :focus-visible) {
       border-color: var(--color-danger-emphasis);
     }
 
@@ -231,8 +251,13 @@
       background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
       border-color: var(--color-danger-muted);
 
-      &::after { border-bottom-color: var(--color-danger-subtle); }
-      &::before { border-bottom-color: var(--color-danger-muted); }
+      &::after {
+        border-bottom-color: var(--color-danger-subtle);
+      }
+
+      &::before {
+        border-bottom-color: var(--color-danger-muted);
+      }
     }
   }
 }

package/forms/input-group.scss

@@ -18,6 +18,14 @@
   &.inline {
     display: inline-table;
   }
+
+  // within input group, if button exists change focus styles to match input (no offset)
+  &:focus-within {
+    // stylelint-disable-next-line selector-max-type
+    button {
+      outline-offset: 0;
+    }
+  }
 }
 
 .input-group .form-control,

package/marketing/buttons/button.scss

@@ -13,7 +13,9 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%), var(--color-mktg-btn-bg) !important;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+    var(--color-mktg-btn-bg) !important;
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 0.375rem;
@@ -42,29 +44,16 @@
     box-shadow: var(--color-mktg-btn-shadow-hover) !important;
   }
 
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: var(--color-mktg-btn-shadow-focus), var(--color-mktg-btn-shadow-hover) !important;
-  }
-
   &:hover,
   &:focus,
+  &:focus-visible,
   &.focus {
     &::before {
       opacity: 1;
     }
-
-    &:disabled {
-      box-shadow: none !important;
-    }
   }
 
   &:active {
-    outline: none;
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 transparent;
-
     &::before {
       opacity: 0.5 !important;
     }
@@ -91,11 +80,6 @@
     box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
   }
 
-  &:focus,
-  &.focus {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
-  }
-
   &:active {
     // stylelint-disable-next-line primer/box-shadow
     box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
@@ -119,11 +103,6 @@
   &:hover {
     box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
   }
-
-  &:focus,
-  .focus {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
-  }
 }
 
 .btn-signup-mktg {
@@ -136,11 +115,6 @@
     // stylelint-disable-next-line primer/colors
     background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
   }
-
-  &:focus {
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: rgba(46, 164, 79, 0.45) 0 0 0 4px !important;
-  }
 }
 
 // Size modifiers

package/marketing/links/link.scss

@@ -6,10 +6,6 @@
     text-decoration: none;
   }
 
-  &:active {
-    outline: none;
-  }
-
   &::after,
   &.link-emphasis-mktg::before {
     position: absolute;
@@ -36,6 +32,7 @@
 
   &:hover,
   &:focus,
+  &:focus-visible,
   &:active {
     &::after {
       transform: scaleX(1);

package/navigation/menu.scss

@@ -22,7 +22,9 @@
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
 
-    &::before { border-top-left-radius: $border-radius; }
+    &::before {
+      border-top-left-radius: $border-radius;
+    }
   }
 
   &:last-child {
@@ -30,13 +32,9 @@
     border-bottom-right-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
 
-    &::before { border-bottom-left-radius: $border-radius; }
-  }
-
-  &:focus {
-    z-index: 1;
-    outline: none;
-    box-shadow: var(--color-primer-shadow-focus);
+    &::before {
+      border-bottom-left-radius: $border-radius;
+    }
   }
 
   &:hover {

package/navigation/sidenav.scss

@@ -43,16 +43,9 @@
 
 // States
 
-.SideNav-item:focus {
-  z-index: 1;
-  outline: none;
-  box-shadow: var(--color-primer-shadow-focus);
-}
-
 .SideNav-item:hover {
   text-decoration: none;
   background-color: var(--color-neutral-subtle);
-  outline: none;
 }
 
 .SideNav-item:active {
@@ -94,11 +87,9 @@
   border: 0;
 }
 
-.SideNav-subItem:hover,
-.SideNav-subItem:focus {
+.SideNav-subItem:hover {
   color: var(--color-fg-default);
   text-decoration: none;
-  outline: none;
 }
 
 .SideNav-subItem[aria-current]:not([aria-current='false']),

package/navigation/tabnav.scss

@@ -40,13 +40,17 @@
     }
   }
 
-  &:hover,
-  &:focus {
+  &:hover {
     color: var(--color-fg-default);
     text-decoration: none;
     transition-duration: 0.1s;
   }
 
+  &:focus,
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+
   &:active {
     color: var(--color-fg-muted);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "0.0.0-20220114013357",
+  "version": "0.0.0-20220114215001",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",

package/support/mixins/misc.scss

@@ -24,3 +24,10 @@
     background-color: $border;
   }
 }
+
+// global focus styles
+
+@mixin focusOutline {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: 2px;
+}

package/toasts/toasts.scss

@@ -40,9 +40,7 @@
   background-color: transparent;
   border: 0;
 
-  &:focus,
   &:hover {
-    outline: none;
     opacity: 0.7;
   }
 
@@ -119,6 +117,11 @@
 }
 
 @keyframes Toast--spinner {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }

package/utilities/details.scss

@@ -20,9 +20,46 @@
 
 .details-reset {
   // Remove marker added by the display: list-item browser default
-  > summary { list-style: none; }
+  > summary {
+    list-style: none;
+    // fallback :focus state
+    &:focus {
+      @include focusOutline;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutline;
+    }
+  }
   // Remove marker added by details polyfill
-  > summary::before { display: none; }
+  > summary::before {
+    display: none;
+  }
   // Remove marker added by Chrome
-  > summary::-webkit-details-marker { display: none; }
+  > summary::-webkit-details-marker {
+    display: none;
+  }
+}
+
+.details-overlay > summary {
+  // fallback :focus state
+  &:focus {
+    @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline;
+  }
 }

package/button-refactor/ButtonsLinksAPI.md

@@ -1,68 +0,0 @@
-# Button and Link component APIs
-Button and Link has been discussed in a number of issues and discussions over past few years. I went through the list below, took note of their purpose and started compiling a new API spec. This doc is is meant to be collaborative and accompany Storybook docs while we work through a final API recommendation. Once we have a solid plan, this can move into an issue and be delegated across frameworks.
-
-Existing issues
-[x] https://github.com/github/primer/issues/141
-- Accessory button component, should reconcile with reaction button (sister component to Button)
-[x] https://github.com/github/primer/issues/220
-- Tracking issue, mentions Button in the context of API consistency
-[x] https://github.com/github/primer/issues/253
-- Button audit, anatomy spec, design considerations, some button link discussion, icon buttons (this issue is very informative!)
-[x] https://github.com/github/primer/issues/263
-- More design discussion, particularly focused on outline button
-[x] https://github.com/github/primer/issues/272
-- Make icon only buttons square
-[x] https://github.com/github/primer/issues/321
-- Super specific button use case?
-[x] https://github.com/github/primer/issues/350
-- a11y audit with task list for PVC
-[x] https://github.com/github/primer/issues/382
-- React button refactor
-[x] https://github.com/github/primer/issues/468
-- Visual bugs (colors, state)
-[x] https://github.com/github/primer/discussions/87
-- Discussion about accessory buttons
-[x] https://github.com/github/primer/discussions/211
-- Open ended discussion about primary button as dropdown
-[x] https://github.com/github/primer/discussions/459
-- Allie's thoughts on limiting icon only buttons and working towards encouraging visual labels
-[x] https://github.com/github/primer/discussions/477
-- Buttons styled as links, links styled as buttons
-
-## Specific notes from previous bugs to keep in mind
-[] Check all button variants have shadow present
-[] Ensure icon colors are consistent in hover states
-[] Ensure icon colors are consistent with variants in all states
-[] Ensure disabled colors are consistent across frameworks
-
-## Component list
-A few discussions were about naming and prop drilling (source here). We found that for Button to handle all of its use cases, we would need a large number of props– some conditional and dependent on one another. When that happens, it's typically a sign that the logic should be separated into another component.
-
-| Component | Description |
-| -- | -- |
-| Button | standard `button` with variants, size, visual slots |
-| IconButton | `button` with icon only (square) and required `aria-label` |
-| ButtonStyledAsLink | `button` that visually looks like a link |
-| ReactionButton | `button` snowflake with specific styles/interaction design |
-| ButtonGroup | wrapper to handle grouping buttons |
-| Link | `a` with variants, optional trailing visuals |
-| LinkStyledAsButton | `a` with button variants, required trailing visuals |
-
-## Component API breakdown
-
-### Button
-
-| prop | type | options | default | notes |
-| -- | -- | -- | -- | -- |
-| `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `secondary` | |
-| `size` | one-of string | `small` `default` `large` | `default | |
-| `label` | string | button description | null | |
-| `aria-label` | string | button description for screen readers | null | |
-| `aria-pressed` | boolean | `true/false` | `false` | |
-| `leadingVisual` | children (slot) | octicon | null | |
-| `trailingVisual` | children (slot) | octicon | null | |
-| `trailingAction` | children (slot) | octicon | null | slot for caret to maintain leading/trailing visuals if they exist |
-| `fullWidth` | boolean | `true/false` | `false` | |
-| `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | lock icon to the text label or to the button container |
-
-## Component design specs

package/button-refactor/button.scss

@@ -1,181 +0,0 @@
-.Button {
-  position: relative;
-  font-size: $body-font-size;
-  font-weight: $font-weight-semibold;
-  cursor: pointer;
-  user-select: none;
-  border: $border-width $border-style;
-  border-radius: $border-radius;
-  color: var(--color-btn-text);
-  background-color: var(--color-btn-bg);
-  border-color: var(--color-btn-border);
-  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  transition-property: color, background-color, border-color;
-  height: 32px;
-  padding: 0 16px;
-  display: grid;
-  grid-template-areas: 'leadingIcon text trailingIcon trailingAction';
-  grid-template-columns: min-content minmax(0, auto) min-content min-content;
-  align-items: center;
-
-  // column-gap persists with empty grid-areas, margin applies only when children exist
-  > :not(:last-child) {
-    margin-right: $spacer-2;
-  }
-
-  &:hover,
-  &.hover,
-  [open] > & {
-    background-color: var(--color-btn-hover-bg);
-    border-color: var(--color-btn-hover-border);
-    transition-duration: 0.1s;
-  }
-
-  &:active {
-    background-color: var(--color-btn-active-bg);
-    border-color: var(--color-btn-active-border);
-    transition: none;
-  }
-
-  &.Button--pressed,
-  &[aria-pressed='true'] {
-    background-color: var(--color-btn-selected-bg);
-    box-shadow: var(--color-primer-shadow-inset);
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-btn-bg);
-    border-color: var(--color-btn-border);
-    fill: var(--color-primer-fg-disabled);
-  }
-
-  &.Button-small {
-    height: 28px;
-    font-size: $font-size-small;
-  }
-
-  &.Button-large {
-  }
-
-  &.Button-primary {
-    color: var(--color-btn-primary-text);
-    background-color: var(--color-btn-primary-bg);
-    border-color: var(--color-btn-primary-border);
-    box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
-
-    &:hover,
-    &.hover,
-    [open] > & {
-      background-color: var(--color-btn-primary-hover-bg);
-      border-color: var(--color-btn-primary-hover-border);
-    }
-
-    &:active,
-    &.Button--pressed,
-    &[aria-pressed='true'] {
-      background-color: var(--color-btn-primary-selected-bg);
-      box-shadow: var(--color-btn-primary-selected-shadow);
-    }
-
-    &:disabled,
-    &.disabled,
-    &[aria-disabled='true'] {
-      color: var(--color-btn-primary-disabled-text);
-      background-color: var(--color-btn-primary-disabled-bg);
-      border-color: var(--color-btn-primary-disabled-border);
-      fill: var(--color-btn-primary-disabled-text);
-    }
-  }
-
-  &.Button-secondary {
-  }
-
-  &.Button-outline {
-    color: var(--color-btn-outline-text);
-
-    &:hover,
-    [open] > & {
-      color: var(--color-btn-outline-hover-text);
-      background-color: var(--color-btn-outline-hover-bg);
-      border-color: var(--color-btn-outline-hover-border);
-      box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
-    }
-
-    &:active,
-    &.Button--pressed,
-    &[aria-pressed='true'] {
-      color: var(--color-btn-outline-selected-text);
-      background-color: var(--color-btn-outline-selected-bg);
-      border-color: var(--color-btn-outline-selected-border);
-      box-shadow: var(--color-btn-outline-selected-shadow);
-    }
-
-    &:disabled,
-    &.disabled,
-    &[aria-disabled='true'] {
-      color: var(--color-btn-outline-disabled-text);
-      background-color: var(--color-btn-outline-disabled-bg);
-      border-color: var(--color-btn-border);
-      box-shadow: none;
-    }
-  }
-
-  &.Button-danger {
-    color: var(--color-btn-danger-text);
-
-    .octicon {
-      color: var(--color-btn-danger-icon);
-    }
-
-    &:hover,
-    [open] > & {
-      color: var(--color-btn-danger-hover-text);
-      background-color: var(--color-btn-danger-hover-bg);
-      border-color: var(--color-btn-danger-hover-border);
-      box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
-    }
-
-    &:active,
-    &.Button--pressed,
-    &[aria-pressed='true'] {
-      color: var(--color-btn-danger-selected-text);
-      background-color: var(--color-btn-danger-selected-bg);
-      border-color: var(--color-btn-danger-selected-border);
-      box-shadow: var(--color-btn-danger-selected-shadow);
-    }
-
-    &:disabled,
-    &.disabled,
-    &[aria-disabled='true'] {
-      color: var(--color-btn-danger-disabled-text);
-      background-color: var(--color-btn-danger-disabled-bg);
-      border-color: var(--color-btn-border);
-      box-shadow: none;
-    }
-  }
-}
-
-.Button--label {
-  grid-area: 'text';
-  white-space: nowrap;
-}
-
-.Button--visual {
-  display: flex;
-}
-
-.Button--leadingVisual {
-  grid-area: 'leadingVisual';
-}
-
-.Button--trailingVisual {
-  grid-area: 'trailingVisual';
-}
-
-.Button--trailingAction {
-  grid-area: 'leadingAction';
-}