@primer/css 0.0.0-1f49d76 → 0.0.0-20211010195643

package/markdown/lists.scss

@@ -2,7 +2,6 @@
 // stylelint-disable selector-no-qualifying-type
 // stylelint-disable selector-max-type
 .markdown-body {
-
   // Lists, Blockquotes & Such
   ul,
   ol {
@@ -15,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.
@@ -46,10 +63,6 @@
     margin-bottom: 0;
   }
 
-  li {
-    word-wrap: break-all;
-  }
-
   li > p {
     margin-top: $spacer-3;
   }

package/markdown/markdown-body.scss

@@ -10,18 +10,16 @@
   line-height: $body-line-height;
   word-wrap: break-word;
 
-  @import "../base/kbd.scss"; // adds support for keyboard shortcuts
-
   // Clearfix on the markdown body
   &::before {
     display: table;
-    content: "";
+    content: '';
   }
 
   &::after {
     display: table;
     clear: both;
-    content: "";
+    content: '';
   }
 
   > *:first-child {
@@ -45,7 +43,7 @@
 
   // Link Colors
   .absent {
-    color: $text-red;
+    color: var(--color-danger-fg);
   }
 
   .anchor {
@@ -76,17 +74,16 @@
     height: $em-spacer-3;
     padding: 0;
     margin: $spacer-4 0;
-    // stylelint-disable-next-line primer/colors
-    background-color: $gray-200;
+    background-color: var(--color-border-default);
     border: 0;
   }
 
   blockquote {
     // stylelint-disable-next-line primer/spacing
     padding: 0 1em;
-    color: $text-gray-light;
+    color: var(--color-fg-muted);
     // stylelint-disable-next-line primer/borders
-    border-left: 0.25em $border-style lighten($gray-300, 5%);
+    border-left: 0.25em $border-style var(--color-border-default);
 
     > :first-child {
       margin-top: 0;
@@ -96,4 +93,12 @@
       margin-bottom: 0;
     }
   }
+
+  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 {
@@ -15,17 +17,15 @@
     td {
       // stylelint-disable-next-line primer/spacing
       padding: 6px 13px;
-      // stylelint-disable-next-line primer/borders
-      border: $border-width $border-style lighten($gray-300, 5%);
+      border: $border-width $border-style var(--color-border-default);
     }
 
     tr {
-      background-color: $bg-white;
-      // stylelint-disable-next-line primer/borders
-      border-top: $border-width $border-style 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: $bg-gray;
+        background-color: var(--color-canvas-subtle);
       }
     }
 

package/marketing/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss

package/marketing/buttons/button.scss

@@ -1,100 +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: $text-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;
-  // stylelint-disable-next-line primer/colors
-  background-color: $blue-mktg;
+  border: 0;
   // stylelint-disable-next-line primer/borders
-  border: $border-width $border-style $blue-mktg;
-  border-radius: $border-radius;
-  transition: $transition-time / 2;
-  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+  border-radius: 0.375rem;
 
-  &:hover {
-    text-decoration: none;
-    background-color: $bg-blue;
-    border-color: $border-blue;
-  }
+  @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;
-    // stylelint-disable-next-line primer/box-shadow
-    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,
-  &[aria-disabled=true] {
-    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 {
-  // stylelint-disable-next-line primer/colors
-  background-color: $green-mktg;
-  // stylelint-disable-next-line primer/borders
-  border-color: $green-mktg;
-
-  &:hover {
-    background-color: $bg-green;
-    // stylelint-disable-next-line primer/borders
-    border-color: $green-500;
-  }
-
-  &:focus {
-    // stylelint-disable-next-line primer/box-shadow
-    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 {
-  // stylelint-disable-next-line primer/spacing
-  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 {
-  // stylelint-disable-next-line primer/colors
-  color: $blue-mktg;
-  // stylelint-disable-next-line primer/colors
-  background-color: rgba($white, 0);
-  // stylelint-disable-next-line primer/borders
-  border-color: rgba($blue-mktg, 0.5);
-
-  &:hover {
-    color: $text-blue;
-    text-decoration: none;
-    // stylelint-disable-next-line primer/colors
-    background-color: rgba($white, 0);
-    // stylelint-disable-next-line primer/borders
-    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: $text-white;
-  background-color: transparent;
-  background-image: none;
-  // stylelint-disable-next-line primer/borders
-  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

@@ -6,9 +6,9 @@
  */
 
 // 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;
+  }
+}

package/marketing/support/variables.scss

@@ -1,75 +1,126 @@
+// stylelint-disable unit-no-unknown
+// Typography
 $marketing-font-path: "/fonts/" !default;
 
-// Type
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: $font-weight-normal;
-  src: local("Inter"), local("Inter-Regular"), url("#{$marketing-font-path}Inter-Regular.woff") format("woff");
-  font-display: swap;
-}
+$font-mktg: $body-font !default;
+$font-weight-medium: 450 !default;
+$font-weight-extrabold: 800 !default;
 
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: $font-weight-semibold;
-  src: local("Inter Medium"), local("Inter-Medium"), url("#{$marketing-font-path}Inter-Medium.woff") format("woff");
-  font-display: swap;
-}
+$mktg-font-feature-settings: 'ss02' on, 'ss01' on !default;
+$mktg-header-spacing-large: -0.03em !default;
+$mktg-header-spacing-default: -0.01em !default;
+$mktg-header-spacing-threshold: 48px !default;
+$mktg-header-weight-large: $font-weight-extrabold !default;
+$mktg-header-weight-default: $font-weight-bold !default;
+$mktg-header-weight-threshold: 24px !default;
 
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: $font-weight-bold;
-  src: local("Inter Bold"), local("Inter-Bold"), url("#{$marketing-font-path}Inter-Bold.woff") format("woff");
-  font-display: swap;
-}
+// Header size steps
+$mktg-h-size-0:  96px !default;
+$mktg-h-size-1:  72px !default;
+$mktg-h-size-2:  64px !default;
+$mktg-h-size-3:  56px !default;
+$mktg-h-size-4:  48px !default;
+$mktg-h-size-5:  40px !default;
+$mktg-h-size-6:  32px !default;
+$mktg-h-size-7:  28px !default;
+$mktg-h-size-8:  24px !default;
+$mktg-h-size-9:  20px !default;
+$mktg-h-size-10: 16px !default;
 
-$font-mktg: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+// Header Line-height steps
+$mktg-h-lh-0:  100px !default;
+$mktg-h-lh-1:  76px !default;
+$mktg-h-lh-2:  68px !default;
+$mktg-h-lh-3:  60px !default;
+$mktg-h-lh-4:  52px !default;
+$mktg-h-lh-5:  44px !default;
+$mktg-h-lh-6:  36px !default;
+$mktg-h-lh-7:  32px !default;
+$mktg-h-lh-8:  28px !default;
+$mktg-h-lh-9:  24px !default;
+$mktg-h-lh-10: 20px !default;
 
-// Builds upon @primer/css/support/variables/typography.scss
-$h000-size: 64px !default;
-$h000-size-mobile: 48px !default;
+$mktg-header-pairings: (
+  0:  (size: $mktg-h-size-0,  lh: $mktg-h-lh-0),
+  1:  (size: $mktg-h-size-1,  lh: $mktg-h-lh-1),
+  2:  (size: $mktg-h-size-2,  lh: $mktg-h-lh-2),
+  3:  (size: $mktg-h-size-3,  lh: $mktg-h-lh-3),
+  4:  (size: $mktg-h-size-4,  lh: $mktg-h-lh-4),
+  5:  (size: $mktg-h-size-5,  lh: $mktg-h-lh-5),
+  6:  (size: $mktg-h-size-6,  lh: $mktg-h-lh-6),
+  7:  (size: $mktg-h-size-7,  lh: $mktg-h-lh-7),
+  8:  (size: $mktg-h-size-8,  lh: $mktg-h-lh-8),
+  9:  (size: $mktg-h-size-9,  lh: $mktg-h-lh-9),
+  10: (size: $mktg-h-size-10, lh: $mktg-h-lh-10)
+) !default;
 
-// Colors
-$green-mktg: mix($green-500, $green-400, 50%) !default;
-$blue-mktg: mix($blue-400, $blue-500, 42%) !default;
+// Responsive headers, where first number is mobile (default), second is tablet/md, and third is desktop/lg
+$mktg-headers: (
+  0: [4, 1, 0],
+  1: [5, 3, 1],
+  2: [6, 4, 2],
+  3: [7, 5, 4],
+  4: [8, 7, 6],
+  5: [9, 8, 8],
+  6: [10, 9, 9]
+) !default;
 
-// Animations
-$transition-time: 0.4s !default;
+// Body content
+$mktg-body-spacing-threshold: 28px !default;
+$mktg-body-weight-threshold: 24px !default;
+$mktg-body-spacing-large: -0.01em !default;
+
+// Body size steps
+$mktg-body-size-0:  48px !default;
+$mktg-body-size-1:  40px !default;
+$mktg-body-size-2:  32px !default;
+$mktg-body-size-3:  28px !default;
+$mktg-body-size-4:  24px !default;
+$mktg-body-size-5:  20px !default;
+$mktg-body-size-6:  16px !default;
+$mktg-body-size-7:  14px !default;
+$mktg-body-size-8:  12px !default;
 
-// Increases the core spacing scale first by 8px for $spacer-7, then by 16px
-// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,
-// 80, 96, etc.
-$spacer-7:  $spacer * 6 !default;  // 48px
-$spacer-8:  $spacer * 8 !default;  // 64px
-$spacer-9:  $spacer * 10 !default; // 80px
-$spacer-10: $spacer * 12 !default; // 96px
-$spacer-11: $spacer * 14 !default; // 112px
-$spacer-12: $spacer * 16 !default; // 128px
+// Body line-height steps
+$mktg-body-lh-0:  64px !default;
+$mktg-body-lh-1:  52px !default;
+$mktg-body-lh-2:  44px !default;
+$mktg-body-lh-3:  40px !default;
+$mktg-body-lh-4:  32px !default;
+$mktg-body-lh-5:  28px !default;
+$mktg-body-lh-6:  24px !default;
+$mktg-body-lh-7:  20px !default;
+$mktg-body-lh-8:  20px !default;
 
-$marketing-spacers: (
-  7: $spacer-7,
-  8: $spacer-8,
-  9: $spacer-9,
-  10: $spacer-10,
-  11: $spacer-11,
-  12: $spacer-12,
+$mktg-body-pairings: (
+  0:  (size: $mktg-body-size-0,  lh: $mktg-body-lh-0),
+  1:  (size: $mktg-body-size-1,  lh: $mktg-body-lh-1),
+  2:  (size: $mktg-body-size-2,  lh: $mktg-body-lh-2),
+  3:  (size: $mktg-body-size-3,  lh: $mktg-body-lh-3),
+  4:  (size: $mktg-body-size-4,  lh: $mktg-body-lh-4),
+  5:  (size: $mktg-body-size-5,  lh: $mktg-body-lh-5),
+  6:  (size: $mktg-body-size-6,  lh: $mktg-body-lh-6),
+  7:  (size: $mktg-body-size-7,  lh: $mktg-body-lh-7),
+  8:  (size: $mktg-body-size-8,  lh: $mktg-body-lh-8)
 ) !default;
 
-$marketing-all-spacers: map-merge(
-  (
-    0: 0,
-    1: $spacer-1,
-    2: $spacer-2,
-    3: $spacer-3,
-    4: $spacer-4,
-    5: $spacer-5,
-    6: $spacer-6,
-  ),
-  $marketing-spacers,
+// Responsive body content, where first number is mobile (default), second is tablet/md, and third is desktop/lg
+$mktg-body-spacing-large: -0.01em !default;
+
+$mktg-bodies: (
+  0: [3, 1, 0],
+  1: [4, 3, 2],
+  2: [5, 5, 4],
+  3: [6, 5, 5],
+  4: [6, 6, 6],
+  5: [7, 7, 7],
+  6: [8, 8, 8]
 ) !default;
 
+// Animations
+$transition-time: 0.4s !default;
+$ease-mktg: cubic-bezier(0.16, 1, 0.3, 1) !default;
+
 $marketing-position-variants: (
   "": "",
   md: "-md",