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

package/base/normalize.scss

@@ -39,7 +39,8 @@ header,
 main, /* 2 */
 menu,
 nav,
-section { /* 1 */
+section {
+  /* 1 */
   display: block;
 }
 
@@ -96,16 +97,6 @@ a {
   background-color: transparent; /* 1 */
 }
 
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
 /* Text-level semantics
    ========================================================================== */
 
@@ -162,7 +153,7 @@ h1 {
 
 mark {
   background-color: #ff0;
-  color: #000;
+  color: var(--color-text-primary);
 }
 
 /**
@@ -234,7 +225,7 @@ samp {
  */
 
 figure {
-  margin: 1em 40px;
+  margin: 1em $spacer-6;
 }
 
 /**
@@ -269,7 +260,7 @@ textarea {
  */
 
 optgroup {
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 }
 
 /**
@@ -278,7 +269,8 @@ optgroup {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -288,7 +280,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -305,37 +298,14 @@ html [type="button"], /* 1 */
   -webkit-appearance: button; /* 2 */
 }
 
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 /**
  * Change the border, margin, and padding in all browsers (opinionated).
  */
 
 fieldset {
-  border: 1px solid #c0c0c0;
+  border: $border-width $border-style #c0c0c0;
   margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+  padding: 0.35em 0.625em $em-spacer-6;
 }
 
 /**
@@ -367,8 +337,8 @@ textarea {
  * 2. Remove the padding in IE 10-.
  */
 
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -377,27 +347,17 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
 /**
  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
  */
 
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 

package/base/octicons.scss

@@ -0,0 +1,6 @@
+.octicon {
+  display: inline-block;
+  overflow: visible !important;
+  vertical-align: text-bottom;
+  fill: currentColor;
+}

package/base/typography-base.scss

@@ -23,10 +23,12 @@ h6 { @include h6; }
 
 p {
   margin-top: 0;
+  // stylelint-disable-next-line primer/spacing
   margin-bottom: 10px;
 }
 
 small {
+  // stylelint-disable-next-line primer/typography
   font-size: 90%;
 }
 

package/blankslate/README.md

@@ -1,37 +1,25 @@
-# Primer Blankslate
+---
+bundle: "blankslate"
+generated: true
+---
 
-> Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn’t there. Be sure to provide an action to add content as well.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `blankslate` 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-blankslate/index.scss";
+@import "@primer/css/blankslate/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/blankslate](https://primer.style/css/components/blankslate).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/blankslate.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/blankslate/blankslate.scss

@@ -3,17 +3,23 @@
   position: relative;
   padding: $spacer-5;
   text-align: center;
-  background-color: $gray-000;
-  border: 1px solid $gray-200;
-  border-radius: 3px;
-  box-shadow: inset 0 0 10px rgba($black, 0.05);
+
+  p {
+    color: var(--color-fg-muted);
+  }
 
   code {
+    // stylelint-disable-next-line primer/spacing
     padding: 2px 5px 3px;
     font-size: $h5-size;
-    background: $bg-white;
-    border: 1px solid $border-gray-light;
-    border-radius: 3px;
+    background: var(--color-canvas-default);
+    border: $border-width $border-style var(--color-border-muted);
+    border-radius: $border-radius;
+  }
+
+  img {
+    width: 56px;
+    height: 56px;
   }
 }
 
@@ -21,14 +27,15 @@
   margin-right: $spacer-1;
   margin-bottom: $spacer-2;
   margin-left: $spacer-1;
-  color: lighten($gray-400, 5%);
+  color: var(--color-fg-muted);
 }
 
 .blankslate-capped {
-  border-radius: 0 0 3px 3px;
+  border-radius: 0 0 $border-radius $border-radius;
 }
 
 .blankslate-spacious {
+  // stylelint-disable-next-line primer/spacing
   padding: ($spacer-6 * 2) $spacer-6;
 }
 
@@ -38,10 +45,17 @@
 }
 
 // was .large-format
+// QUESTION: should we deprecate this?
 .blankslate-large {
+  img {
+    width: 80px;
+    height: 80px;
+  }
+
   h3 {
     margin: $spacer-3 0;
-    font-size: $h3-size;
+    //font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size?
+    font-size: $h2-size;
   }
 
   p {
@@ -50,8 +64,7 @@
 }
 
 // was .clean-background
+// TO DO: deprecate this and use utility instead
 .blankslate-clean-background {
-  background: none;
   border: 0;
-  box-shadow: none;
 }

package/blankslate/index.scss

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

package/box/README.md

@@ -1,37 +1,25 @@
-# Primer box
+---
+bundle: "box"
+generated: true
+---
 
-> Box is a module for creating rounded-corner boxes with a white background and gray borders. Box has optional element styles for headers, lists, and footers.
-
-This repository is a module of the full [primer][primer] repository.
+# Primer CSS: `box` 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-box/index.scss";
+@import "@primer/css/box/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/box](https://primer.style/css/components/box).
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/box.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/box/box.scss

@@ -2,8 +2,10 @@
 // Intended to replace simple-box, boxed-group, and table-list
 
 .Box {
-  background-color: $white;
-  border: $border-width $border-style $border-gray-dark;
+  background-color: var(--color-canvas-default);
+  border-color: var(--color-border-default);
+  border-style: $border-style;
+  border-width: $border-width;
   border-radius: $border-radius;
 }
 
@@ -26,6 +28,7 @@
   .Box-btn-octicon {
     &.btn-octicon {
       padding: $spacer-2 $spacer-3;
+      // stylelint-disable-next-line primer/spacing
       margin: (-$spacer-2) (-$spacer-3);
       line-height: $lh-condensed;
     }
@@ -34,7 +37,6 @@
   .Box-row {
     padding: $spacer-2 $spacer-3;
   }
-
 }
 
 .Box--spacious {
@@ -58,6 +60,7 @@
   .Box-btn-octicon {
     &.btn-octicon {
       padding: $spacer-4;
+      // stylelint-disable-next-line primer/spacing
       margin: (-$spacer-4) (-$spacer-4);
     }
   }
@@ -65,14 +68,14 @@
   .Box-row {
     padding: $spacer-4;
   }
-
 }
 
 .Box-header {
   padding: $spacer-3;
+  // stylelint-disable-next-line primer/spacing
   margin: (-$border-width) (-$border-width) 0;
-  background-color: $bg-gray;
-  border-color: $border-gray-dark;
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-default);
   border-style: $border-style;
   border-width: $border-width;
   border-top-left-radius: $border-radius;
@@ -86,32 +89,35 @@
 
 .Box-body {
   padding: $spacer-3;
-  border-bottom: $border-width $border-style $border-gray;
+  border-bottom: $border-width $border-style var(--color-border-default);
 
   // Ensures bottom-border doesn't poke out when .Box-body used without box-footer
   &:last-of-type {
+    // stylelint-disable-next-line primer/spacing
     margin-bottom: -$border-width;
-    border-bottom-right-radius: 2px;
-    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
   }
 }
 
 // Box rows
 .Box-row {
   padding: $spacer-3;
+  // stylelint-disable-next-line primer/spacing
   margin-top: -1px;
   list-style-type: none; // To account for applying Box component to a list
-  border-top: $border-width $border-style $border-gray;
+  border-top-color: var(--color-border-muted);
+  border-top-style: $border-style;
+  border-top-width: $border-width;
 
   &:first-of-type {
-    border-top-color: transparent;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
   }
 
   &:last-of-type {
-    border-bottom-right-radius: 2px;
-    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
   }
 
   // Adds a blue vertical line to the left of the row
@@ -119,13 +125,14 @@
   &.Box-row--unread,
   // .unread to be deprecated with .Box-row-unread
   &.unread {
-    box-shadow: 2px 0 0 $blue inset;
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
   }
 
   &.navigation-focus {
     // Focus styles for when drag icon
     .Box-row--drag-button {
-      color: $text-blue;
+      color: var(--color-accent-fg);
       cursor: grab;
       opacity: 100;
     }
@@ -137,43 +144,42 @@
 
     // Row dragging styles
     &.sortable-chosen {
-      background-color: $bg-gray-light;
+      background-color: var(--color-canvas-subtle);
     }
 
     // Makes dragging row background gray
     &.sortable-ghost {
-      background-color: $bg-gray;
+      background-color: var(--color-canvas-subtle);
 
       // Hides contents of row while dragging so row looks solid gray
       .Box-row--drag-hide {
         opacity: 0;
       }
     }
-
   }
 }
 
 .Box-row--focus-gray {
   &.navigation-focus {
-    background-color: $bg-gray;
+    background-color: var(--color-canvas-subtle);
   }
 }
 
 .Box-row--focus-blue {
   &.navigation-focus {
-    background-color: $bg-blue-light;
+    background-color: var(--color-accent-subtle);
   }
 }
 
 .Box-row--hover-gray {
   &:hover {
-    background-color: $bg-gray;
+    background-color: var(--color-canvas-subtle);
   }
 }
 
 .Box-row--hover-blue {
   &:hover {
-    background-color: $bg-blue-light;
+    background-color: var(--color-accent-subtle);
   }
 }
 
@@ -182,15 +188,13 @@
 // and links are dark-gray with blue hover on desktop.
 .Box-row-link {
   @include breakpoint(md) {
-
-    color: $text-gray-dark;
+    color: var(--color-fg-default);
     text-decoration: none;
 
     &:hover {
-      color: $text-blue;
+      color: var(--color-accent-fg);
       text-decoration: none;
     }
-
   }
 }
 
@@ -202,8 +206,12 @@
 
 .Box-footer {
   padding: $spacer-3;
+  // stylelint-disable-next-line primer/spacing
   margin-top: -1px; // prevents double border when used with .Box-body
-  border-top: $border-width $border-style $border-gray;
+  border-top-color: var(--color-border-default);
+  border-top-style: $border-style;
+  border-top-width: $border-width;
+  border-radius: 0 0 $border-radius $border-radius;
 }
 
 // Option for a box with scrolling content
@@ -215,69 +223,69 @@
 // Box themes
 
 .Box--blue {
-  border-color: $border-blue-light;
+  border-color: var(--color-accent-muted);
 
   .Box-header {
-    background-color: $bg-blue-light;
-    border-color: $border-blue-light;
+    background-color: var(--color-accent-subtle);
+    border-color: var(--color-accent-muted);
   }
 
   .Box-body {
-    border-color: $border-blue-light;
+    border-color: var(--color-accent-muted);
   }
 
   .Box-row {
-    border-color: $border-blue-light;
+    border-color: var(--color-accent-muted);
   }
 
   .Box-footer {
-    border-color: $border-blue-light;
+    border-color: var(--color-accent-muted);
   }
 }
 
 // Applies and red border to the outside of the box,
 // but not to the border separating rows.
 .Box--danger {
-  border-color: $border-red;
+  border-color: var(--color-danger-emphasis);
 
   .Box-row {
     &:first-of-type {
-      border-color: $border-red;
+      border-color: var(--color-danger-emphasis);
     }
   }
 
   .Box-body {
     &:last-of-type {
-      border-color: $border-red;
+      border-color: var(--color-danger-emphasis);
     }
   }
 }
 
 .Box-header--blue {
-  background-color: $bg-blue-light;
-  border-color: $border-blue-light;
+  background-color: var(--color-accent-subtle);
+  border-color: var(--color-accent-muted);
 }
 
 // Box row highlight themes
 
 .Box-row--yellow {
-  background-color: $yellow-100;
+  background-color: var(--color-attention-subtle);
 }
 
 .Box-row--blue {
-  background-color: $bg-blue-light;
+  background-color: var(--color-accent-subtle);
 }
 
 .Box-row--gray {
-  background-color: $bg-gray;
+  background-color: var(--color-canvas-subtle);
 }
 
 //Box with btn-octicon
 .Box-btn-octicon {
-
   // Increase specificity when btn-octicon is used because comes after .Box in the cascade
   &.btn-octicon {
     padding: $spacer-3 $spacer-3;
+    // stylelint-disable-next-line primer/spacing
     margin: (-$spacer-3) (-$spacer-3);
     line-height: $lh-default; // override btn-octicon line-height
   }

package/box/index.scss

@@ -1,2 +1,2 @@
-@import "../support/index.scss";
-@import "./box.scss";
+@import '../support/index.scss';
+@import './box.scss';