@primer/css 0.0.0-1f16d51 → 0.0.0-2021101014711

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",

package/marketing/type/typography.scss

@@ -1,81 +1,119 @@
 // Headings
-
-.h000-mktg,
-.h00-mktg,
 .h0-mktg,
 .h1-mktg,
 .h2-mktg,
 .h3-mktg,
 .h4-mktg,
 .h5-mktg,
-.h6-mktg,
-.lead-mktg {
+.h6-mktg {
   font-family: $font-mktg;
-  font-weight: $font-weight-semibold;
-}
-
-@mixin h000-mktg {
-  font-size: $h000-size-mobile !important;
-  @include breakpoint(md) { font-size: $h000-size !important; }
-}
-
-.h000-mktg { @include h000-mktg; }
-
-@mixin h00-mktg {
-  font-size: $h00-size-mobile !important;
-  @include breakpoint(md) { font-size: $h00-size !important; }
+  font-feature-settings: $mktg-font-feature-settings;
+  // stylelint-disable-next-line primer/typography
+  font-weight: $mktg-header-weight-default !important;
+  letter-spacing: $mktg-header-spacing-default !important;
 }
 
-.h00-mktg { @include h00-mktg; }
-
-@mixin h0-mktg {
-  font-size: $h0-size-mobile !important;
-  @include breakpoint(md) { font-size: $h0-size !important; }
-}
-
-.h0-mktg { @include h0-mktg; }
-
-@mixin h1-mktg {
-  font-size: $h1-size-mobile !important;
-  @include breakpoint(md) { font-size: $h1-size !important; }
-}
-
-.h1-mktg { @include h1-mktg; }
-
-@mixin h2-mktg {
-  font-size: $h2-size-mobile !important;
-  @include breakpoint(md) { font-size: $h2-size !important; }
-}
-
-.h2-mktg { @include h2-mktg; }
-
-@mixin h3-mktg {
-  font-size: $h3-size-mobile !important;
-  @include breakpoint(md) { font-size: $h3-size !important; }
-}
-
-.h3-mktg { @include h3-mktg; }
-
-.h4-mktg {
-  font-size: $h4-size !important;
+@each $header, $sizes in $mktg-headers {
+  .h#{$header}-mktg {
+    $pairing: map-get($mktg-header-pairings, nth($sizes, 1));
+    $pairing-md: map-get($mktg-header-pairings, nth($sizes, 2));
+    $pairing-lg: map-get($mktg-header-pairings, nth($sizes, 3));
+
+    font-size: map-get($pairing, "size") !important;
+    line-height: map-get($pairing, "lh") !important;
+    @if (map-get($pairing, "size") >= $mktg-header-weight-threshold) { font-weight: $mktg-header-weight-large !important; }
+
+    @if (nth($sizes, 1) != nth($sizes, 2)) {
+      @include breakpoint(md) {
+        font-size: map-get($pairing-md, "size") !important;
+        line-height: map-get($pairing-md, "lh") !important;
+
+        @if (map-get($pairing-md, "size") >= $mktg-header-spacing-threshold and map-get($pairing, "size") < $mktg-header-spacing-threshold) {
+          letter-spacing: $mktg-header-spacing-large !important;
+        }
+
+        @if (map-get($pairing-md, "size") >= $mktg-header-weight-threshold and map-get($pairing, "size") < $mktg-header-weight-threshold) {
+          font-weight: $mktg-header-weight-large !important;
+        }
+      }
+    }
+
+    @if (nth($sizes, 2) != nth($sizes, 3)) {
+      @include breakpoint(lg) {
+        font-size: map-get($pairing-lg, "size") !important;
+        line-height: map-get($pairing-lg, "lh") !important;
+
+        @if (map-get($pairing-lg, "size") >= $mktg-header-spacing-threshold and map-get($pairing-md, "size") < $mktg-header-spacing-threshold) {
+          letter-spacing: $mktg-header-spacing-large !important;
+        }
+
+        @if (map-get($pairing-lg, "size") >= $mktg-header-weight-threshold and map-get($pairing-md, "size") < $mktg-header-weight-threshold) {
+          font-weight: $mktg-header-weight-large !important;
+        }
+      }
+    }
+  }
 }
 
-.h5-mktg {
-  font-size: $h5-size !important;
+.f0-mktg,
+.f1-mktg,
+.f2-mktg,
+.f3-mktg,
+.f4-mktg,
+.f5-mktg,
+.f6-mktg {
+  font-family: $font-mktg;
+  font-feature-settings: $mktg-font-feature-settings;
+  font-weight: $font-weight-normal;
 }
 
-.h6-mktg {
-  font-size: $h6-size !important;
+@each $body, $sizes in $mktg-bodies {
+  .f#{$body}-mktg {
+    $pairing: map-get($mktg-body-pairings, nth($sizes, 1));
+    $pairing-md: map-get($mktg-body-pairings, nth($sizes, 2));
+    $pairing-lg: map-get($mktg-body-pairings, nth($sizes, 3));
+
+    font-size: map-get($pairing, "size") !important;
+    line-height: map-get($pairing, "lh") !important;
+    @if (map-get($pairing, "size") >= $mktg-body-spacing-threshold) { letter-spacing: $mktg-body-spacing-large !important; }
+    @if (map-get($pairing, "size") >= $mktg-body-weight-threshold) { font-weight: $font-weight-semibold; }
+
+    @if (nth($sizes, 1) != nth($sizes, 2)) {
+      @include breakpoint(md) {
+        font-size: map-get($pairing-md, "size") !important;
+        line-height: map-get($pairing-md, "lh") !important;
+
+        @if (map-get($pairing-md, "size") >= $mktg-body-spacing-threshold and map-get($pairing, "size") < $mktg-body-spacing-threshold) {
+          letter-spacing: $mktg-body-spacing-large !important;
+        }
+
+        @if (map-get($pairing-md, "size") >= $mktg-body-weight-threshold and map-get($pairing, "size") < $mktg-body-weight-threshold) {
+          font-weight: $font-weight-medium;
+        }
+      }
+    }
+
+    @if (nth($sizes, 2) != nth($sizes, 3)) {
+      @include breakpoint(lg) {
+        font-size: map-get($pairing-lg, "size") !important;
+        line-height: map-get($pairing-lg, "lh") !important;
+
+        @if (map-get($pairing-lg, "size") >= $mktg-body-spacing-threshold and map-get($pairing-md, "size") < $mktg-body-spacing-threshold) {
+          letter-spacing: $mktg-body-spacing-large !important;
+        }
+
+        @if (map-get($pairing-lg, "size") >= $mktg-body-weight-threshold and map-get($pairing-md, "size") < $mktg-body-weight-threshold) {
+          font-weight: $font-weight-medium;
+        }
+      }
+    }
+  }
 }
 
-// Big opening paragraphs
-@mixin lead-mktg {
-  font-size: $h3-size;
-  font-weight: $font-weight-normal;
+.text-medium {
+  font-weight: $font-weight-medium !important;
 }
 
-.lead-mktg { @include lead-mktg; }
-
 // Pullquote
 
 @mixin pullquote {
@@ -86,8 +124,8 @@
   font-family: $mono-font;
   font-size: $h4-size;
   line-height: 1.4;
-  color: $text-gray;
-  border-left: 3px solid $border-color;
+  color: var(--color-color-text-secondary);
+  border-left: 3px solid var(--color-border-default);
 
   @include breakpoint(md) {
     padding-left: $spacer * 1.5;

package/marketing/utilities/animations.scss

@@ -0,0 +1,9 @@
+// Animation utilities for marketing
+
+.hover-grow-mktg {
+  transition: transform 0.4s $ease-mktg;
+
+  &:hover {
+    transform: scale3d(1.025, 1.025, 1.025);
+  }
+}

package/marketing/utilities/index.scss

@@ -1,7 +1,6 @@
 @import "../support/index.scss";
 // utilities
-@import "./filters.scss";
+@import "./animations.scss";
 @import "./borders.scss";
+@import "./filters.scss";
 @import "./layout.scss";
-@import "./margin.scss";
-@import "./padding.scss";