@primer/css 0.0.0-1f8274f → 0.0.0-2021101020130

package/branch-name/README.md

@@ -1,37 +1,25 @@
-# Primer / Branch Name
+---
+bundle: "branch-name"
+generated: true
+---
 
-> A nice, consistent way to display branch names.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `branch-name` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "primer-branch-name/index.scss";
+@import "@primer/css/branch-name/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/components/branch-name](https://primer.style/css/components/branch-name).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/branch-name.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/branch-name/branch-name.scss

@@ -1,20 +1,30 @@
+// stylelint-disable selector-max-type, selector-no-qualifying-type
+
 // A nice way to display branch names inside the UI. Can be a link or not.
-// stylelint-disable selector-max-type
+
 .branch-name {
   display: inline-block;
+  // stylelint-disable-next-line primer/spacing
   padding: 2px 6px;
   font: 12px $mono-font;
-  color: rgba($black, 0.6);
-  background-color: lighten($blue-100, 3%);
-  border-radius: 3px;
+  color: var(--color-fg-muted);
+  background-color: var(--color-accent-subtle);
+  border-radius: $border-radius;
 
   .octicon {
+    // stylelint-disable-next-line primer/spacing
     margin: 1px -2px 0 0;
-    color: desaturate($blue-300, 70%);
+    color: var(--color-fg-muted);
   }
 }
 
 // When a branch name is a link
-// stylelint-disable selector-no-qualifying-type
-a.branch-name { color: $text-blue; }
-// stylelint-enable selector-no-qualifying-type
+
+a.branch-name {
+  color: var(--color-accent-fg);
+  background-color: var(--color-accent-subtle);
+
+  .octicon {
+    color: var(--color-accent-fg);
+  }
+}

package/branch-name/index.scss

@@ -1,3 +1,3 @@
 // support files
-@import "../support/index.scss";
-@import "./branch-name.scss";
+@import '../support/index.scss';
+@import './branch-name.scss';

package/breadcrumb/README.md

@@ -1,21 +1,25 @@
-# Primer Breadcrumb Navigation
+---
+bundle: "breadcrumb"
+generated: true
+---
 
-> Breadcrumb navigation for GitHub's pages with parents / grandparents.
+# Primer CSS: `breadcrumb` bundle
 
-This repository is a module of the full [primer][primer] repository.
+## Usage
 
-## Documentation
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
-Find further documentation at [primer.style/css/components/breadcrumb](https://primer.style/css/components/breadcrumb).
+```scss
+@import "@primer/css/breadcrumb/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/breadcrumb.css`.
 
 ## License
 
-MIT © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[primer-support]: https://github.com/primer/css-support
-[support]: https://github.com/primer/css-support
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/breadcrumb/breadcrumb.scss

@@ -1,14 +1,18 @@
 .breadcrumb-item {
   display: inline-block;
+  // stylelint-disable-next-line primer/spacing
   margin-left: -0.35em;
   white-space: nowrap;
   list-style: none;
 
   &::after {
-    padding-right: $em-spacer-5;
-    padding-left: $em-spacer-5;
-    color: $border-gray;
-    content: "/";
+    display: inline-block;
+    height: 0.8em;
+    margin: 0 $em-spacer-5;
+    content: '';
+    // stylelint-disable-next-line primer/borders
+    border-right: 0.1em $border-style var(--color-fg-muted);
+    transform: rotate(15deg);
   }
 
   &:first-child {
@@ -16,8 +20,14 @@
   }
 }
 
-.breadcrumb-item-selected {
+.breadcrumb-item-selected,
+.breadcrumb-item[aria-current]:not([aria-current=false]) {
   &::after {
     content: none;
   }
 }
+
+// stylelint-disable selector-max-type
+.breadcrumb-item-selected a {
+  color: var(--color-fg-default);
+}

package/breadcrumb/index.scss

@@ -1,3 +1,3 @@
 // support files
-@import "../support/index.scss";
-@import "./breadcrumb.scss";
+@import '../support/index.scss';
+@import './breadcrumb.scss';

package/buttons/README.md

@@ -1,37 +1,25 @@
-# Primer Buttons
+---
+bundle: "buttons"
+generated: true
+---
 
-> Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `buttons` bundle
 
 ## Usage
 
-The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
 
 ```scss
-@import "primer-buttons/index.scss";
+@import "@primer/css/buttons/index.scss";
 ```
 
-You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
-
 ## Build
 
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
-
-```
-$ npm run build
-```
-
-## Documentation
-
-Find further documentation at [primer.style/css/components/buttons](https://primer.style/css/components/buttons).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/buttons.css`.
 
 ## License
 
-[MIT](./LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
 
-[primer]: https://github.com/primer/css
-[docs]: https://primer.style/css
-[npm]: https://www.npmjs.com/
-[install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[sass]: http://sass-lang.com/
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/buttons/button-group.scss

@@ -33,6 +33,7 @@
   }
 
   &.selected,
+  &[aria-selected=true],
   &:focus,
   &:active,
   &:hover {
@@ -65,6 +66,7 @@
   }
 
   &.selected,
+  &[aria-selected=true],
   &:focus,
   &:active,
   &:hover {

package/buttons/button.scss

@@ -1,24 +1,33 @@
-// stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors
+// stylelint-disable selector-max-type, no-duplicate-selectors
 
 // Base button styles
 .btn {
   position: relative;
   display: inline-block;
-  padding: 6px 12px;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px $spacer-3;
   font-size: $body-font-size;
-  font-weight: $font-weight-bold;
+  font-weight: $font-weight-semibold;
+  // stylelint-disable-next-line primer/typography
   line-height: 20px; // Specifically not inherit our `<body>` default
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid transparentize($black, 0.8);
-  border-radius: 0.25em;
+  border: $border-width $border-style;
+  border-radius: $border-radius;
   appearance: none; // Corrects inability to style clickable `input` types in iOS.
 
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    cursor: default;
+  }
+
   i {
     font-style: normal;
     font-weight: $font-weight-semibold;
@@ -26,143 +35,246 @@
   }
 
   .octicon {
-    vertical-align: text-top;
+    margin-right: $spacer-1;
+    color: var(--color-fg-muted);
+    vertical-align: text-bottom;
+
+    &:only-child {
+      margin-right: 0;
+    }
   }
 
-  // Darken for just a tad more contrast against the button background
   .Counter {
-    color: $gray-600;
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 2px;
+    color: inherit;
     text-shadow: none;
-    background-color: rgba($black, 0.1);
+    vertical-align: top;
+    background-color: var(--color-btn-counter-bg);
   }
 
-  &:hover {
-    text-decoration: none;
-    background-repeat: repeat-x;
+  .dropdown-caret {
+    margin-left: $spacer-1;
+    opacity: 0.8;
   }
+}
+
+// Default button
+
+.btn {
+  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;
 
-  &:focus {
-    outline: 0;
+  &: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;
+  }
+
+  &.selected,
+  &[aria-selected='true'] {
+    background-color: var(--color-btn-selected-bg);
+    box-shadow: var(--color-primer-shadow-inset);
   }
 
   &:disabled,
-  &.disabled {
-    cursor: default;
-    // Repeat `background-position` because `:hover`
-    background-position: 0 0;
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+
+    .octicon {
+      color: var(--color-primer-fg-disabled);
+    }
+  }
+}
+
+// Primary button
+
+.btn-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,
-  &.selected {
-    background-image: none;
+  &.selected,
+  &[aria-selected='true'] {
+    background-color: var(--color-btn-primary-selected-bg);
+    box-shadow: var(--color-btn-primary-selected-shadow);
   }
-}
 
-.btn         { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); }
-.btn-primary { @include btn-solid($text-white, $green-400, $green-500); }
-@warn ".btn-purple will be removed in 13.0.0. Please don't make buttons purple.";
-.btn-purple  { @include btn-solid($text-white, lighten($purple-500, 5%), darken($purple-500, 5%)); }
-.btn-blue    { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); }
-.btn-danger  { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); }
+  &: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);
+
+    .octicon {
+      color: var(--color-btn-primary-disabled-text);
+    }
+  }
+
+  .Counter {
+    color: inherit;
+    background-color: var(--color-btn-primary-counter-bg);
+  }
+
+  .octicon {
+    color: var(--color-btn-primary-icon);
+  }
+}
 
 // Outline button
-//
-// For when we need a linky-action that's not too heavy in busier
-// areas like conversation timelines.
+
 .btn-outline {
-  @include btn-outline($text-blue);
-}
+  color: var(--color-btn-outline-text);
 
-// Social button count
-.btn-with-count {
-  float: left;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
+  &: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);
 
-// Minibutton overrides
-//
-// Tweak `line-height` to make them smaller.
-.btn-sm {
-  padding: 3px 10px;
-  font-size: $font-size-small;
-  line-height: 20px;
-}
+    .Counter {
+      background-color: var(--color-btn-outline-hover-counter-bg);
+    }
 
-// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
-.btn-large {
-  padding: $em-spacer-6 1.25em;
-  font-size: inherit;
-  border-radius: 6px;
-}
+    .octicon {
+      color: inherit;
+    }
+  }
 
-// Hidden text button
-//
-// Use `.hidden-text-expander` to indicate and expand hidden text.
-.hidden-text-expander {
-  display: block;
+  &:active,
+  &.selected,
+  &[aria-selected='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;
 
-  &.inline {
-    position: relative;
-    top: -1px;
-    display: inline-block;
-    margin-left: 5px;
-    line-height: 0;
+    .Counter {
+      background-color: var(--color-btn-outline-disabled-counter-bg);
+    }
+  }
+
+  .Counter {
+    color: inherit;
+    background-color: var(--color-btn-outline-counter-bg);
   }
 }
 
-.hidden-text-expander a,
-.ellipsis-expander {
-  display: inline-block;
-  height: 12px;
-  padding: 0 5px 5px;
-  font-size: $font-size-small;
-  font-weight: $font-weight-bold;
-  line-height: 6px;
-  color: $gray-700;
-  text-decoration: none;
-  vertical-align: middle;
-  background: lighten($gray-300, 5%);
-  border: 0;
-  border-radius: 1px;
+// Danger button
 
-  &:hover {
-    text-decoration: none;
-    background-color: darken($gray-300, 4%);
+.btn-danger {
+  color: var(--color-btn-danger-text);
+
+  .octicon {
+    color: var(--color-btn-danger-icon);
   }
 
-  &:active {
-    color: $text-white;
-    background-color: $blue-400;
+  &: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);
+
+    .Counter {
+      background-color: var(--color-btn-danger-hover-counter-bg);
+    }
+
+    .octicon {
+      color: var(--color-btn-danger-hover-icon);
+    }
+  }
+
+  &:active,
+  &.selected,
+  &[aria-selected='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;
+
+    .Counter {
+      background-color: var(--color-btn-danger-disabled-counter-bg);
+    }
+
+    .octicon {
+      color: var(--color-btn-danger-disabled-text);
+    }
+  }
+
+  .Counter {
+    color: inherit;
+    background-color: var(--color-btn-danger-counter-bg);
   }
 }
 
-// Social count bubble
+// Sizes
 //
-// A container that is used for social bubbles counts.
-.social-count {
-  float: left;
-  padding: 3px 10px;
+// Tweak `line-height` to make them smaller.
+.btn-sm {
+  // stylelint-disable-next-line primer/spacing
+  padding: 3px 12px;
   font-size: $font-size-small;
-  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: $text-gray-dark;
-  vertical-align: middle;
-  background-color: $bg-white;
-  border: 1px solid transparentize($black, 0.8); // match with .btn
-  border-left: 0;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
 
-  &:hover,
-  &:active {
-    text-decoration: none;
+  .octicon {
+    vertical-align: text-top;
   }
+}
 
-  &:hover {
-    color: $text-blue;
-    cursor: pointer;
-  }
+// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
+.btn-large {
+  padding: $em-spacer-6 1.5em;
+  font-size: inherit;
+  line-height: $lh-default;
+
+  // stylelint-disable-next-line primer/borders
+  border-radius: 0.5em;
 }
 
 // Full-width button
@@ -173,41 +285,3 @@
   width: 100%;
   text-align: center;
 }
-
-// Link-like buttons
-//
-// This class is for styling <button> and <input> elements to look like links
-.btn-link {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  color: $text-blue;
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  appearance: none; // Corrects inability to style clickable `input` types in iOS.
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:disabled {
-    &,
-    &:hover {
-      color: rgba($gray-600, 0.5);
-      cursor: default;
-    }
-  }
-}
-
-.details-reset {
-  // Remove marker added by the display: list-item browser default
-  > summary { list-style: none; }
-  // Remove marker added by details polyfill
-  > summary::before { display: none; }
-  // Remove marker added by Chrome
-  > summary::-webkit-details-marker { display: none; }
-}