@primer/css 0.0.0-1ea75fe → 0.0.0-202110100305

package/header/header.scss

@@ -0,0 +1,47 @@
+.Header {
+  z-index: 32; // TODO: Figure out z-index system
+  display: flex;
+  padding: $spacer-3;
+  font-size: $h5-size;
+  line-height: $lh-default;
+  color: var(--color-header-text);
+  background-color: var(--color-header-bg);
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.Header-item {
+  display: flex;
+  margin-right: $spacer-3;
+  align-self: stretch;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.Header-item--full {
+  flex: auto;
+}
+
+.Header-link {
+  font-weight: $font-weight-bold;
+  color: var(--color-header-logo);
+  white-space: nowrap;
+
+  &:hover,
+  &:focus {
+    color: var(--color-header-text);
+    text-decoration: none;
+  }
+}
+
+.Header-input {
+  color: var(--color-header-text);
+  background-color: var(--color-header-search-bg);
+  border: $border-width $border-style var(--color-header-search-border);
+  box-shadow: none;
+
+  &::placeholder {
+    // stylelint-disable-next-line primer/colors
+    color: rgba(255, 255, 255, 0.75);
+  }
+}

package/header/index.scss

@@ -0,0 +1,2 @@
+@import '../support/index.scss';
+@import './header.scss';

package/index.scss

@@ -1,15 +1,18 @@
 /*!
- * Primer
- * http://primer.github.io
+ * Primer CSS
+ * https://primer.style
  *
- * Released under MIT license. Copyright (c) 2019 GitHub Inc.
+ * Released under MIT license.
  */
 
-// Primer master file
+// Primer main file
 //
 // Imports all Primer files in their intended order for easy mass-inclusion.
 // Should you need specific files, you can easily use separate `@import`s.
 
+// CSS color variables
+@import "./color-modes/index.scss";
+
 // Global requirements
 @import "./core/index.scss";
 @import "./product/index.scss";

package/labels/README.md

@@ -1,37 +1,25 @@
-# Primer Labels
+---
+bundle: "labels"
+generated: true
+---
 
-> Labels add metadata or indicate status of items and navigational elements.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `labels` 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-labels/index.scss";
+@import "@primer/css/labels/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/labels](https://primer.style/css/components/labels).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/labels.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/labels/counters.scss

@@ -1,25 +1,36 @@
 // Counters are rounded-corner badges for numbers
 .Counter {
   display: inline-block;
-  padding: 2px 5px;
+  min-width: $size-2; // makes sure it's a circle with just one digit
+  // stylelint-disable-next-line primer/spacing
+  padding: 0 6px;
   font-size: $font-size-small;
-  font-weight: $font-weight-bold;
-  line-height: $lh-condensed-ultra;
-  color: $gray-600;
-  background-color: rgba($black, 0.08);
-  border-radius: 20px;
+  font-weight: $font-weight-semibold;
+  // stylelint-disable-next-line primer/typography
+  line-height: $size-2 - 2px; // remove borders
+  color: var(--color-fg-default);
+  text-align: center;
+  background-color: var(--color-neutral-muted);
+  border: $border-width $border-style transparent; // Support Firefox custom colors
+  // stylelint-disable-next-line primer/borders
+  border-radius: 2em;
 
   &:empty {
-    visibility: hidden;
+    display: none;
+  }
+
+  .octicon {
+    vertical-align: text-top;
+    opacity: 0.8;
   }
 }
 
-.Counter--gray-light {
-  color: $text-gray-dark;
-  background-color: $black-fade-15;
+.Counter--primary {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-neutral-emphasis);
 }
 
-.Counter--gray {
-  color: $white;
-  background-color: $gray;
+.Counter--secondary {
+  color: var(--color-fg-muted);
+  background-color: var(--color-neutral-subtle);
 }

package/labels/diffstat.scss

@@ -0,0 +1,37 @@
+// diffstat
+//
+// Green/red blocks showing additions and deletions
+
+.diffstat {
+  font-size: $h6-size;
+  font-weight: $font-weight-bold;
+  color: var(--color-fg-muted);
+  white-space: nowrap;
+  cursor: default;
+}
+
+.diffstat-block-deleted,
+.diffstat-block-added,
+.diffstat-block-neutral {
+  display: inline-block;
+  width: $spacer-2;
+  height: $spacer-2;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 1px;
+  outline-offset: -1px; // Support Firefox custom colors
+}
+
+.diffstat-block-deleted {
+  background-color: var(--color-danger-emphasis);
+  outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors
+}
+
+.diffstat-block-added {
+  background-color: var(--color-diffstat-addition-bg);
+  outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors
+}
+
+.diffstat-block-neutral {
+  background-color: var(--color-neutral-muted);
+  outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors
+}

package/labels/index.scss

@@ -1,4 +1,8 @@
-@import "../support/index.scss";
-@import "./labels.scss";
-@import "./states.scss";
-@import "./counters.scss";
+@import '../support/index.scss';
+@import './mixins.scss';
+
+@import './issue-labels.scss';
+@import './labels.scss';
+@import './states.scss';
+@import './counters.scss';
+@import './diffstat.scss';

package/labels/issue-labels.scss

@@ -0,0 +1,23 @@
+// Issue Labels
+
+// TODO: Replace with .Label once solid backgrounds are supported
+
+.IssueLabel {
+  @include labels-base;
+
+  .g-emoji {
+    position: relative;
+    top: -0.05em;
+    display: inline-block;
+    font-size: 1em;
+    line-height: $lh-condensed-ultra;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.IssueLabel--big {
+  @include labels-large;
+}

package/labels/labels.scss

@@ -1,63 +1,82 @@
-// Needs refactoring
-// stylelint-disable selector-no-qualifying-type
-// stylelint-disable selector-max-type
 // Labels
-//
-// Use labels to add keyword tags or phrases to issues and pull requests. These
-// are used within a list of issues/PRs, on individual issues/PRs, and within
-// the select menus that manage them.
 
 // Provide a wrapper to ensure labels stick together
 .labels {
   position: relative;
 }
 
-// Each label gets common styles
-// .label will be deprecated for .Label
-.label,
+// Default label
+
+.label, // TODO: Deprecte
 .Label {
-  display: inline-block;
-  padding: 3px $spacer-1;
-  font-size: $font-size-small;
-  font-weight: $font-weight-bold;
-  line-height: $lh-condensed-ultra; // prevent inheritance from changing proportions
-  color: $text-white;
-  border-radius: 2px;
-  box-shadow: inset 0 -1px 0 rgba($black, 0.12);
+  @include labels-base;
+  background-color: transparent !important; // TODO: Remove again
+  border-color: var(--color-border-default);
 
   &:hover {
     text-decoration: none;
   }
 }
 
-// Custom GitHub labels (not for issues/PRs/etc)
-//
-// Commonly used across the site to indicate a particular role. For example,
-// "repo owner" within code comments or role in organizations.
-.Label--gray {
-  color: $gray-600;
-  background-color: lighten($gray-200, 3%);
+// Large
+
+.Label--large {
+  @include labels-large;
+}
+
+// Inline
+
+.Label--inline {
+  @include labels--inline;
+}
+
+// Contrast
+
+.Label--primary {
+  color: var(--color-fg-default);
+  border-color: var(--color-neutral-emphasis);
+}
+
+.Label--secondary {
+  color: var(--color-fg-muted);
+  border-color: var(--color-border-default);
+}
+
+// Colors
+
+.Label--info, // TODO: deprecate
+.Label--accent {
+  color: var(--color-accent-fg);
+  border-color: var(--color-accent-emphasis);
+}
+
+.Label--success {
+  color: var(--color-success-fg);
+  border-color: var(--color-success-emphasis);
+}
+
+.Label--warning, // TODO: deprecate
+.Label--attention {
+  color: var(--color-attention-fg);
+  border-color: var(--color-attention-emphasis);
 }
 
-.Label--outline {
-  margin-top: -1px; // offsets the 1px border
-  margin-bottom: -1px; // offsets the 1px border
-  font-weight: $font-weight-normal;
-  color: $text-gray;
-  background-color: transparent;
-  border: 1px solid $black-fade-15;
-  box-shadow: none;
+.Label--severe {
+  color: var(--color-severe-fg);
+  border-color: var(--color-severe-emphasis);
 }
 
-.Label--outline-green {
-  color: $text-green;
-  border: 1px solid $border-green;
+.Label--danger {
+  color: var(--color-danger-fg);
+  border-color: var(--color-danger-emphasis);
 }
 
-.Label--gray-darker {
-  background-color: $gray;
+.Label--done {
+  color: var(--color-done-fg);
+  border-color: var(--color-done-emphasis);
 }
 
-.Label--orange {
-  background-color: $bg-orange;
+.Label--sponsors {
+  color: var(--color-sponsors-fg);
+  border-color: var(--color-sponsors-emphasis);
 }

package/labels/mixins.scss

@@ -0,0 +1,32 @@
+// Label mixins
+
+// Default: 20px
+// Large: 24px
+// Inline: em based
+
+@mixin labels-base {
+  display: inline-block;
+  padding: 0 7px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-semibold;
+  line-height: 18px;
+  border: $border-width $border-style transparent;
+  border-radius: 2em;
+}
+
+@mixin labels-large {
+  padding-right: 10px;
+  padding-left: 10px;
+  line-height: 22px;
+}
+
+// Inline
+//
+// Doesn't increase height of parent element
+// Can be used with different font-sizes
+
+@mixin labels--inline {
+  display: inline;
+  padding: 0.1667em 0.5em;
+  font-size: 0.9em;
+}

package/labels/states.scss

@@ -1,33 +1,54 @@
 // A rounded corner box containing a label "open" or "closed"
-// The default state is gray.
-//
-// open     - $green background
-// reopened - $green background
-// closed   - $red background
-// merged   - $purple background
-
-// .state to be deprecated in replace of .State
-.state,
+
+// Default 32px
+// Small 24px
+
+.state, // TODO: Deprecate
 .State {
   display: inline-block;
-  padding: $spacer-1 $spacer-2;
-  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px 12px;
+  font-size: $body-font-size;
+  font-weight: $font-weight-semibold;
+  // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: $text-white;
   text-align: center;
-  background-color: $gray-500;
-  border-radius: 3px;
+  white-space: nowrap;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 2em;
+}
+
+.state, // TODO: Deprecate
+.State,
+.State--draft {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-neutral-emphasis);
+  border: $border-width $border-style transparent;
 }
 
-.State--green { background-color: darken($green-400, 5%); }
+.State--open {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-success-emphasis);
+}
+
+.State--merged {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-done-emphasis);
+}
 
-.State--purple { background-color: $bg-purple; }
+.State--closed {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-danger-emphasis);
+}
 
-.State--red { background-color: $red-600; }
+// Small
 
 .State--small {
-  padding: $em-spacer-2 $spacer-1;
-  font-size: $h6-size;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0 10px;
+  font-size: $font-size-small;
+  // stylelint-disable-next-line primer/typography
+  line-height: $size-3;
 
   .octicon {
     width: 1em; // Ensures different icons don't change State indicator width

package/layout/README.md

@@ -1,37 +1,25 @@
-# Primer Layout
+---
+bundle: "layout"
+generated: true
+---
 
-> Primer’s layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it’s just containers, rows, and columns.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `layout` 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-layout/index.scss";
+@import "@primer/css/layout/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/objects/layout](https://primer.style/css/objects/layout).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/layout.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/layout/container.scss

@@ -1,12 +1,4 @@
 // Fixed-width, centered column for site content.
-// This will be deprecated and replaced with container-lg in future
-.container {
-  width: $container-width;
-  margin-right: auto;
-  margin-left: auto;
-  @include clearfix;
-}
-
 // Handy container styles that match our breakpoints
 
 // 544px

package/layout/grid-offset.scss

@@ -4,16 +4,16 @@
 
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    .offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }
-    .offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }
-    .offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }
-    .offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }
-    .offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }
-    .offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }
-    .offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }
-    .offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }
-    .offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }
-    .offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }
-    .offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }
+    .offset#{$variant}-1 { margin-left: (1 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-2 { margin-left: (2 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-3 { margin-left: (3 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-4 { margin-left: (4 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-5 { margin-left: (5 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-6 { margin-left: (6 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-7 { margin-left: (7 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-8 { margin-left: (8 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-9 { margin-left: (9 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-10 { margin-left: (10 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-11 { margin-left: (11 * 0.0833333333 * 100%) !important; }
   }
 }

package/layout/grid.scss

@@ -1,32 +1,32 @@
 // GRID
 
 // Columns
-.col-1 { width: (1 / 12 * 100%); }
-.col-2 { width: (2 / 12 * 100%); }
-.col-3 { width: (3 / 12 * 100%); }
-.col-4 { width: (4 / 12 * 100%); }
-.col-5 { width: (5 / 12 * 100%); }
-.col-6 { width: (6 / 12 * 100%); }
-.col-7 { width: (7 / 12 * 100%); }
-.col-8 { width: (8 / 12 * 100%); }
-.col-9 { width: (9 / 12 * 100%); }
-.col-10 { width: (10 / 12 * 100%); }
-.col-11 { width: (11 / 12 * 100%); }
+.col-1 { width: (1 * 0.0833333333 * 100%); }
+.col-2 { width: (2 * 0.0833333333 * 100%); }
+.col-3 { width: (3 * 0.0833333333 * 100%); }
+.col-4 { width: (4 * 0.0833333333 * 100%); }
+.col-5 { width: (5 * 0.0833333333 * 100%); }
+.col-6 { width: (6 * 0.0833333333 * 100%); }
+.col-7 { width: (7 * 0.0833333333 * 100%); }
+.col-8 { width: (8 * 0.0833333333 * 100%); }
+.col-9 { width: (9 * 0.0833333333 * 100%); }
+.col-10 { width: (10 * 0.0833333333 * 100%); }
+.col-11 { width: (11 * 0.0833333333 * 100%); }
 .col-12 { width: 100%; }
 
 @each $breakpoint in map-keys($breakpoints) {
   @include breakpoint($breakpoint) {
-    .col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); }
-    .col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); }
-    .col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); }
-    .col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); }
-    .col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); }
-    .col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); }
-    .col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); }
-    .col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); }
-    .col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); }
-    .col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); }
-    .col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); }
+    .col-#{$breakpoint}-1 { width: ( 1 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-2 { width: ( 2 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-3 { width: ( 3 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-4 { width: ( 4 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-5 { width: ( 5 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-6 { width: ( 6 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-7 { width: ( 7 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-8 { width: ( 8 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-9 { width: ( 9 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-10 { width: ( 10 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-11 { width: ( 11 * 0.0833333333 * 100%); }
     .col-#{$breakpoint}-12 { width: 100%; }
   }
 }
@@ -37,7 +37,7 @@
   margin-right: -$gutter-width;
   margin-left: -$gutter-width;
 
-  > [class*="col-"] {
+  > [class*='col-'] {
     padding-right: $gutter-width !important;
     padding-left: $gutter-width !important;
   }

package/layout/index.scss

@@ -1,5 +1,8 @@
-@import "../support/index.scss";
-@import "./container.scss";
-@import "./columns.scss";
-@import "./grid.scss";
-@import "./grid-offset.scss";
+@import '../support/index.scss';
+@import './mixins.scss';
+
+@import './container.scss';
+@import './grid.scss';
+@import './grid-offset.scss';
+@import './layout.scss';
+@import './layout-beta.scss';