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

package/markdown/images.scss

@@ -1,5 +1,5 @@
 // Need to target base styles
-// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type, primer/selector-no-utility
+// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type
 // stylelint-disable selector-max-type
 .markdown-body {
   // Images & Stuff
@@ -8,13 +8,15 @@
     // because we put padding on the images to hide header lines, and some people
     // specify the width of their images in their markdown.
     box-sizing: content-box;
-    background-color: $bg-white;
+    background-color: var(--color-canvas-default);
 
     &[align=right] {
+      // stylelint-disable-next-line primer/spacing
       padding-left: 20px;
     }
 
     &[align=left] {
+      // stylelint-disable-next-line primer/spacing
       padding-right: 20px;
     }
   }
@@ -37,10 +39,12 @@
       display: block;
       float: left;
       width: auto;
+      // stylelint-disable-next-line primer/spacing
       padding: 7px;
+      // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
       overflow: hidden;
-      border: 1px solid lighten($gray-300, 5%);
+      border: $border-width $border-style var(--color-border-default);
     }
 
     span img {
@@ -50,9 +54,10 @@
 
     span span {
       display: block;
+      // stylelint-disable-next-line primer/spacing
       padding: 5px 0 0;
       clear: both;
-      color: $text-gray-dark;
+      color: var(--color-fg-default);
     }
   }
 
@@ -63,6 +68,7 @@
 
     > span {
       display: block;
+      // stylelint-disable-next-line primer/spacing
       margin: 13px auto 0;
       overflow: hidden;
       text-align: center;
@@ -81,6 +87,7 @@
 
     > span {
       display: block;
+      // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
       overflow: hidden;
       text-align: right;
@@ -95,10 +102,12 @@
   span.float-left {
     display: block;
     float: left;
+    // stylelint-disable-next-line primer/spacing
     margin-right: 13px;
     overflow: hidden;
 
     span {
+      // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
     }
   }
@@ -106,11 +115,13 @@
   span.float-right {
     display: block;
     float: right;
+    // stylelint-disable-next-line primer/spacing
     margin-left: 13px;
     overflow: hidden;
 
     > span {
       display: block;
+      // stylelint-disable-next-line primer/spacing
       margin: 13px auto 0;
       overflow: hidden;
       text-align: right;

package/markdown/index.scss

@@ -1,8 +1,9 @@
-@import "../support/index.scss";
-@import "./markdown-body.scss";
-@import "./headings.scss";
-@import "./lists.scss";
-@import "./tables.scss";
-@import "./images.scss";
-@import "./code.scss";
-@import "./blob-csv.scss";
+@import '../support/index.scss';
+@import './markdown-body.scss';
+@import './headings.scss';
+@import './lists.scss';
+@import './tables.scss';
+@import './images.scss';
+@import './code.scss';
+@import './blob-csv.scss';
+@import './footnotes.scss';

package/markdown/lists.scss

@@ -2,10 +2,10 @@
 // stylelint-disable selector-no-qualifying-type
 // stylelint-disable selector-max-type
 .markdown-body {
-
   // Lists, Blockquotes & Such
   ul,
   ol {
+    // stylelint-disable-next-line primer/spacing
     padding-left: 2em;
 
     &.no-list {
@@ -14,6 +14,24 @@
     }
   }
 
+  ol[type='1'] {
+    list-style-type: decimal;
+  }
+
+  ol[type='a'] {
+    list-style-type: lower-alpha;
+  }
+
+  ol[type='i'] {
+    list-style-type: lower-roman;
+  }
+
+  // Reset <ol> style to decimal (HTML default) specifically for AsciiDoc
+  // <div><ol> construction (doesn't affect MarkDown)
+  div > ol:not([type]) {
+    list-style-type: decimal;
+  }
+
   // Did someone complain about list spacing? Encourage them
   // to create the spacing with their markdown formatting.
   // List behavior should be controled by the markup, not the css.
@@ -45,10 +63,6 @@
     margin-bottom: 0;
   }
 
-  li {
-    word-wrap: break-all;
-  }
-
   li > p {
     margin-top: $spacer-3;
   }

package/markdown/markdown-body.scss

@@ -13,13 +13,13 @@
   // Clearfix on the markdown body
   &::before {
     display: table;
-    content: "";
+    content: '';
   }
 
   &::after {
     display: table;
     clear: both;
-    content: "";
+    content: '';
   }
 
   > *:first-child {
@@ -43,12 +43,13 @@
 
   // Link Colors
   .absent {
-    color: $red-600;
+    color: var(--color-danger-fg);
   }
 
   .anchor {
     float: left;
     padding-right: $spacer-1;
+    // stylelint-disable-next-line primer/spacing
     margin-left: -20px;
     line-height: $lh-condensed-ultra;
 
@@ -73,14 +74,16 @@
     height: $em-spacer-3;
     padding: 0;
     margin: $spacer-4 0;
-    background-color: $gray-200;
+    background-color: var(--color-border-default);
     border: 0;
   }
 
   blockquote {
+    // stylelint-disable-next-line primer/spacing
     padding: 0 1em;
-    color: $gray-500;
-    border-left: 0.25em solid lighten($gray-300, 5%);
+    color: var(--color-fg-muted);
+    // stylelint-disable-next-line primer/borders
+    border-left: 0.25em $border-style var(--color-border-default);
 
     > :first-child {
       margin-top: 0;
@@ -91,17 +94,11 @@
     }
   }
 
-  kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    font-size: 11px;
-    line-height: 10px;
-    color: $gray-700;
-    vertical-align: middle;
-    background-color: $gray-000;
-    border: solid 1px darken($gray-300, 4%);
-    border-bottom-color: $gray-400;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 $gray-400;
+  sup > a::before {
+    content: '[';
+  }
+
+  sup > a::after {
+    content: ']';
   }
 }

package/markdown/tables.scss

@@ -4,7 +4,9 @@
   // Tables
   table {
     display: block;
-    width: 100%;
+    width: 100%; // keep for backwards compatibility
+    width: max-content;
+    max-width: 100%;
     overflow: auto;
 
     th {
@@ -13,16 +15,17 @@
 
     th,
     td {
+      // stylelint-disable-next-line primer/spacing
       padding: 6px 13px;
-      border: 1px solid lighten($gray-300, 5%);
+      border: $border-width $border-style var(--color-border-default);
     }
 
     tr {
-      background-color: $bg-white;
-      border-top: 1px solid darken($gray-300, 4%);
+      background-color: var(--color-canvas-default);
+      border-top: $border-width $border-style var(--color-border-muted);
 
       &:nth-child(2n) {
-        background-color: $gray-100;
+        background-color: var(--color-canvas-subtle);
       }
     }
 

package/marketing/README.md

@@ -1,37 +1,25 @@
-# Primer marketing
+---
+bundle: "marketing"
+generated: true
+---
 
-> Primer marketing is one of 3 meta-packages that belong to the Primer framework. Primer marketing contains packages that are used on GitHub marketing websites.
-
-This repository is a compilation of [several CSS packages](https://github.com/primer/css). You can break it down into smaller sections using npm.
+# Primer CSS: `marketing` 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-marketing/index.scss";
+@import "@primer/css/marketing/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
-
-You can read more about primer in the [docs][docs].
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/marketing.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/marketing/buttons/button.scss

@@ -1,85 +1,106 @@
 .btn-mktg {
+  position: relative;
+  z-index: 1;
   display: inline-block;
-  padding: $spacer-3 $spacer-4;
-  font-size: $h5-size;
-  font-weight: $font-weight-semibold;
-  color: $white;
+  appearance: none !important;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0.9rem 1.5rem 1.1rem;
+  // stylelint-disable-next-line primer/typography
+  font-size: 1rem;
+  font-weight: $font-weight-bold;
+  line-height: 1;
   white-space: nowrap;
   vertical-align: middle;
-  cursor: pointer;
   user-select: none;
-  background-color: $blue-mktg;
-  border: 1px solid $blue-mktg;
-  border-radius: $border-radius;
-  transition: $transition-time / 2;
-  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+  border: 0;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 0.375rem;
 
-  &:hover {
-    text-decoration: none;
-    background-color: $blue-500;
-    border-color: $blue-500;
-  }
+  @include btn-solid-mktg(
+    var(--color-mktg-btn-text),
+    var(--color-mktg-btn-bg-top),
+    var(--color-mktg-btn-bg-bottom),
+    var(--color-mktg-btn-bg-overlay-top),
+    var(--color-mktg-btn-bg-overlay-bottom),
+  );
 
-  &:focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2em rgba($blue-500, 0.3);
+  &::before {
+    background-blend-mode: overlay, normal;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    content: "";
+    // stylelint-disable-next-line primer/borders
+    border-radius: 0.375rem;
+    opacity: 0;
+    transition: opacity 0.4s;
   }
 
-  &:disabled,
-  &.disabled {
-    pointer-events: none; // Disable hover styles
-    cursor: default;
-    opacity: 0.65;
+  &:hover {
+    text-decoration: none;
+
+    &::before {
+      opacity: 1;
+      transition: opacity 0.4s;
+    }
   }
 }
 
 .btn-primary-mktg {
-  background-color: $green-mktg;
-  border-color: $green-mktg;
-
-  &:hover {
-    background-color: $green-500;
-    border-color: $green-500;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 0.2em rgba($green-500, 0.3);
-  }
+  @include btn-solid-mktg(
+    var(--color-mktg-btn-primary-text),
+    var(--color-mktg-btn-primary-bg-top),
+    var(--color-mktg-btn-primary-bg-bottom),
+    var(--color-mktg-btn-primary-bg-overlay-top),
+    var(--color-mktg-btn-primary-bg-overlay-bottom),
+  );
 }
 
-.btn-large-mktg {
-  padding: 20px $spacer-5;
-  font-size: $h4-size;
+.btn-enterprise-mktg {
+  @include btn-solid-mktg(
+    var(--color-mktg-btn-enterprise-text),
+    var(--color-mktg-btn-enterprise-bg-top),
+    var(--color-mktg-btn-enterprise-bg-bottom),
+    var(--color-mktg-btn-enterprise-bg-overlay-top),
+    var(--color-mktg-btn-enterprise-bg-overlay-bottom),
+  );
 }
 
 .btn-outline-mktg {
-  color: $blue-mktg;
-  background-color: rgba($white, 0);
-  border-color: rgba($blue-mktg, 0.5);
-
-  &:hover {
-    color: $blue-500;
-    text-decoration: none;
-    background-color: rgba($white, 0);
-    border-color: rgba($blue-mktg, 1);
-  }
+  @include btn-outline-mktg(
+    var(--color-mktg-btn-outline-text),
+    var(--color-mktg-btn-outline-hover-text),
+    var(--color-mktg-btn-outline-border),
+    var(--color-mktg-btn-outline-hover-border),
+    var(--color-mktg-btn-outline-focus-border),
+    var(--color-mktg-btn-outline-focus-border-inset)
+  );
+  transition: box-shadow 0.4s, color 0.4s;
 }
 
-@mixin btn-transparent-active {
-  color: $gray-800;
-  background-color: $white;
-  background-image: none;
-  border-color: $white;
+.btn-transparent {
+  @include btn-outline-mktg(
+    var(--color-mktg-btn-dark-text),
+    var(--color-mktg-btn-dark-hover-text),
+    var(--color-mktg-btn-dark-border),
+    var(--color-mktg-btn-dark-hover-border),
+    var(--color-mktg-btn-dark-focus-border),
+    var(--color-mktg-btn-dark-focus-border-inset)
+  );
+  transition: box-shadow 0.4s, color 0.4s;
 }
 
-.btn-transparent {
-  color: $white;
-  background-color: transparent;
-  background-image: none;
-  border: $border-width $border-style $white-fade-50;
+// Size modifiers
 
-  &:hover,
-  &:active {
-    @include btn-transparent-active;
-  }
+.btn-small-mktg {
+  // stylelint-disable-next-line primer/spacing
+  padding: 0.625rem 1rem 0.8125rem;
+}
+
+.btn-large-mktg {
+  // stylelint-disable-next-line primer/spacing
+  padding: 20px 30px 23px !important;
 }

package/marketing/index.scss

@@ -1,19 +1,14 @@
 /*!
- * Primer-marketing
- * http://primer.github.io
+ * @primer/css/marketing
+ * http://primer.style/css
  *
  * Released under MIT license. Copyright (c) 2019 GitHub Inc.
  */
 
-// Primer master 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.
-
 // Global requirements
-@import "./support/index.scss";
+@import './support/index.scss';
 
 // marketing specific css modules
-@import "./type/index.scss";
-@import "./buttons/index.scss";
-@import "./utilities/index.scss";
+@import './type/index.scss';
+@import './buttons/index.scss';
+@import './utilities/index.scss';

package/marketing/support/index.scss

@@ -1,2 +1,3 @@
 @import "../../support/index.scss";
+@import "./mixins.scss";
 @import "./variables.scss";

package/marketing/support/mixins.scss

@@ -0,0 +1,66 @@
+@mixin btn-solid-mktg($color, $bg, $bg2, $bg3, $bg4) {
+  color: $color;
+  background-color: $bg2;
+  background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
+
+  &::before {
+    background-image: linear-gradient(-180deg, $bg3 0%, $bg4 100%);
+  }
+
+  &:hover,
+  &.hover,
+  &:active,
+  &.selected,
+  &[aria-selected=true],
+  [open] > & {
+    background-color: $bg2;
+    background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
+  }
+
+  &:focus,
+  &.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2em rgba($bg2, 0.4);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled=true] {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.5;
+  }
+}
+
+@mixin btn-outline-mktg($color, $color2, $border, $borderHover, $borderFocus, $borderFocusInset) {
+  color: $color;
+  background: none;
+  box-shadow: 0 0 0 1px $border inset;
+
+  &::before {
+    display: none;
+  }
+
+  &:hover,
+  &.hover,
+  &:active,
+  &.selected,
+  &[aria-selected=true],
+  [open] > & {
+    color: $color2;
+    background: none;
+    box-shadow: 0 0 0 2px $borderHover inset;
+  }
+
+  &:focus,
+  &.focus {
+    outline: 0;
+    box-shadow: 0 0 0 2px $borderFocus inset, 0 0 0 4px $borderFocusInset;
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled=true] {
+    opacity: 0.5;
+  }
+}