From 43e22eeb9b1641d030aa8a7280e1f82fcc0d818e Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Bjerrome Date: Mon, 19 Apr 2021 17:05:03 +0200 Subject: [PATCH 01/13] Update button styles --- src/marketing/buttons/button.scss | 138 +++++++++------------------ src/marketing/support/index.scss | 1 + src/marketing/support/mixins.scss | 80 ++++++++++++++++ src/marketing/support/variables.scss | 9 ++ 4 files changed, 137 insertions(+), 91 deletions(-) create mode 100644 src/marketing/support/mixins.scss diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss index 19376bb73e..6d696cb486 100644 --- a/src/marketing/buttons/button.scss +++ b/src/marketing/buttons/button.scss @@ -1,117 +1,73 @@ .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: var(--color-mktg-btn-text); + appearance: none !important; + padding: rem(($spacer-3) * 0.9) rem($spacer-4) rem(($spacer-3) * 1.1); + font-size: 1rem; + font-weight: $font-weight-bold; + line-height: 1; white-space: nowrap; vertical-align: middle; - cursor: pointer; user-select: none; - background-color: var(--color-mktg-btn-bg); - border: $border-width $border-style var(--color-mktg-btn-border); - border-radius: $border-radius; - transition-duration: $transition-time / 2; - transition-property: background-color, border-color, box-shadow; - appearance: none; // Corrects inability to style clickable `input` types in iOS. + border: 0; + border-radius: rem(6px); + + @include btn-solid-mktg( + var(--color-text-white), + lighten($primary-blue-mktg, 5%), + $primary-blue-mktg, + lighten($secondary-blue-mktg, 5%), + $secondary-blue-mktg + ); + + &::before { + background-blend-mode: overlay, normal; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + content: ""; + border-radius: rem(6px); + opacity: 0; + transition: opacity 0.4s; + } &:hover { text-decoration: none; - background-color: var(--color-mktg-btn-hover-bg); - border-color: var(--color-mktg-btn-hover-border); - } - - &:focus { - outline: 0; - box-shadow: var(--color-mktg-btn-focus-shadow); - } - &:disabled, - &.disabled, - &[aria-disabled=true] { - color: var(--color-mktg-btn-disabled-text); - pointer-events: none; // Disable hover styles - cursor: default; - background-color: var(--color-mktg-btn-disabled-bg); - border-color: var(--color-mktg-btn-disabled-border); + &::before { + opacity: 1; + transition: opacity 0.4s; + } } } .btn-primary-mktg { - color: var(--color-mktg-btn-primary-text); - background-color: var(--color-mktg-btn-primary-bg); - border-color: var(--color-mktg-btn-primary-border); - - &:hover { - background-color: var(--color-mktg-btn-primary-hover-bg); - border-color: var(--color-mktg-btn-primary-hover-border); - } - - &:focus { - box-shadow: var(--color-mktg-btn-primary-focus-shadow); - } - - &:disabled, - &.disabled, - &[aria-disabled=true] { - color: var(--color-mktg-btn-primary-disabled-text); - background-color: var(--color-mktg-btn-primary-disabled-bg); - border-color: var(--color-mktg-btn-primary-disabled-border); - } + @include btn-solid-mktg( + var(--color-text-white), + lighten($primary-green-mktg, 5%), + $primary-green-mktg, + lighten($secondary-green-mktg, 5%), + $secondary-green-mktg + ); } .btn-outline-mktg { - color: var(--color-mktg-btn-outline-text); - background-color: var(--color-mktg-btn-outline-bg); - border-color: var(--color-mktg-btn-outline-border); - - &:hover { - color: var(--color-mktg-btn-outline-hover-text); - background-color: var(--color-mktg-btn-outline-hover-bg); - border-color: var(--color-mktg-btn-outline-hover-border); - } - - &:focus { - box-shadow: var(--color-mktg-btn-outline-focus-shadow); - } - - &:disabled, - &.disabled, - &[aria-disabled=true] { - color: var(--color-mktg-btn-outline-disabled-text); - background-color: var(--color-mktg-btn-outline-disabled-bg); - border-color: var(--color-mktg-btn-outline-disabled-border); - } + @include btn-outline-mktg($primary-blue-mktg, $secondary-blue-mktg, $primary-blue-mktg); + transition: box-shadow 0.4s, color 0.4s; } .btn-transparent { - color: var(--color-mktg-btn-dark-text); - background-color: var(--color-mktg-btn-dark-bg); - border-color: var(--color-mktg-btn-dark-border); - - &:hover { - color: var(--color-mktg-btn-dark-hover-text); - background-color: var(--color-mktg-btn-dark-hover-bg); - border-color: var(--color-mktg-btn-dark-hover-border); - } - - &:focus { - box-shadow: var(--color-mktg-btn-dark-focus-shadow); - } - - &:disabled, - &.disabled, - &[aria-disabled=true] { - color: var(--color-mktg-btn-dark-disabled-text); - background-color: var(--color-mktg-btn-dark-disabled-bg); - border-color: var(--color-mktg-btn-dark-disabled-border); - } + @include btn-outline-mktg($static-color-white, $static-color-white, $static-color-white); + transition: box-shadow 0.4s, color 0.4s; } // Large .btn-large-mktg { // stylelint-disable-next-line primer/spacing - padding: 20px $spacer-5; - font-size: $h4-size; + padding: 20px 30px 22px !important; } diff --git a/src/marketing/support/index.scss b/src/marketing/support/index.scss index 8c8e4790ee..8edca2624a 100644 --- a/src/marketing/support/index.scss +++ b/src/marketing/support/index.scss @@ -1,2 +1,3 @@ @import "../../support/index.scss"; +@import "./mixins.scss"; @import "./variables.scss"; diff --git a/src/marketing/support/mixins.scss b/src/marketing/support/mixins.scss new file mode 100644 index 0000000000..c7da896ae3 --- /dev/null +++ b/src/marketing/support/mixins.scss @@ -0,0 +1,80 @@ +@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"] { + opacity: 0.5; + cursor: default; + pointer-events: none; + } +} + +@mixin btn-outline-mktg($color, $color2, $bg) { + color: $color; + background: none; + box-shadow: 0 0 0 1px rgba($bg, 0.3) inset; + + &::before { + display: none; + } + + &:hover, + &.hover, + &:active, + &.selected, + &[aria-selected="true"], + [open] > & { + color: $color2; + background: none; + box-shadow: 0 0 0 2px rgba($bg, 0.5) inset; + } + + &:focus, + &.focus { + outline: 0; + box-shadow: 0 0 0 2px rgba($bg, 1) inset, 0 0 0 4px rgba($bg, 0.5); + } + + &:disabled, + &.disabled, + &[aria-disabled="true"] { + opacity: 0.5; + } +} + +$browser-context: 16; + +@function rem($pixels, $context: $browser-context) { + @if (unitless($pixels)) { + $pixels: $pixels * 1px; + } + + @if (unitless($context)) { + $context: $context * 1px; + } + + @return $pixels / $context * 1rem; +} diff --git a/src/marketing/support/variables.scss b/src/marketing/support/variables.scss index 2028f834a7..e4eff1aae5 100644 --- a/src/marketing/support/variables.scss +++ b/src/marketing/support/variables.scss @@ -6,6 +6,15 @@ $font-mktg: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Ari $h000-size: 64px !default; $h000-size-mobile: 48px !default; +// Colors +$primary-blue-mktg: #4969ed; +$secondary-blue-mktg: #3355e0; +$primary-green-mktg: #2ea44f; +$secondary-green-mktg: #22863a; +$primary-purple-mktg: #6f57ff; +$secondary-purple-mktg: #614eda; +$static-color-white: #fff; + // Animations $transition-time: 0.4s !default; $ease-mktg: cubic-bezier(0.16, 1, 0.3, 1) !default; From 802321a1ca40d970562ad13c0185a691128a696c Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Bjerrome Date: Mon, 19 Apr 2021 17:08:56 +0200 Subject: [PATCH 02/13] Linting --- src/marketing/buttons/button.scss | 4 ++++ src/marketing/support/mixins.scss | 6 +++--- src/marketing/support/variables.scss | 14 +++++++------- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss index 6d696cb486..eeeae427ae 100644 --- a/src/marketing/buttons/button.scss +++ b/src/marketing/buttons/button.scss @@ -3,7 +3,9 @@ z-index: 1; display: inline-block; appearance: none !important; + // stylelint-disable-next-line primer/spacing padding: rem(($spacer-3) * 0.9) rem($spacer-4) rem(($spacer-3) * 1.1); + // stylelint-disable-next-line primer/typography font-size: 1rem; font-weight: $font-weight-bold; line-height: 1; @@ -11,6 +13,7 @@ vertical-align: middle; user-select: none; border: 0; + // stylelint-disable-next-line primer/borders border-radius: rem(6px); @include btn-solid-mktg( @@ -30,6 +33,7 @@ left: 0; z-index: -1; content: ""; + // stylelint-disable-next-line primer/borders border-radius: rem(6px); opacity: 0; transition: opacity 0.4s; diff --git a/src/marketing/support/mixins.scss b/src/marketing/support/mixins.scss index c7da896ae3..6eabb466f3 100644 --- a/src/marketing/support/mixins.scss +++ b/src/marketing/support/mixins.scss @@ -26,9 +26,9 @@ &:disabled, &.disabled, &[aria-disabled="true"] { - opacity: 0.5; - cursor: default; pointer-events: none; + cursor: default; + opacity: 0.5; } } @@ -65,7 +65,7 @@ } } -$browser-context: 16; +$browser-context: 16 !default; @function rem($pixels, $context: $browser-context) { @if (unitless($pixels)) { diff --git a/src/marketing/support/variables.scss b/src/marketing/support/variables.scss index e4eff1aae5..392b2e79a8 100644 --- a/src/marketing/support/variables.scss +++ b/src/marketing/support/variables.scss @@ -7,13 +7,13 @@ $h000-size: 64px !default; $h000-size-mobile: 48px !default; // Colors -$primary-blue-mktg: #4969ed; -$secondary-blue-mktg: #3355e0; -$primary-green-mktg: #2ea44f; -$secondary-green-mktg: #22863a; -$primary-purple-mktg: #6f57ff; -$secondary-purple-mktg: #614eda; -$static-color-white: #fff; +$primary-blue-mktg: #4969ed !default; +$secondary-blue-mktg: #3355e0 !default; +$primary-green-mktg: #2ea44f !default; +$secondary-green-mktg: #22863a !default; +$primary-purple-mktg: #6f57ff !default; +$secondary-purple-mktg: #614eda !default; +$static-color-white: #fff !default; // Animations $transition-time: 0.4s !default; From 6d1b94c21ea534a3ced8c3d0086c5865d65053e5 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Bjerrome Date: Mon, 19 Apr 2021 17:25:09 +0200 Subject: [PATCH 03/13] Add small variant, and update documentation --- docs/content/components/marketing-buttons.md | 13 +++++++++---- src/marketing/buttons/button.scss | 9 +++++++-- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/docs/content/components/marketing-buttons.md b/docs/content/components/marketing-buttons.md index ed8ab324a6..2769bad55b 100644 --- a/docs/content/components/marketing-buttons.md +++ b/docs/content/components/marketing-buttons.md @@ -25,14 +25,19 @@ The solid blue and solid green buttons have more visual emphasis than the blue o ## Sizes -Available in two sizes, marketing buttons have a default size and a large size. +Available in three sizes, marketing buttons have a default size and a large size. ```html live + + + +
- - - + + + +
``` diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss index eeeae427ae..a8f0478ce5 100644 --- a/src/marketing/buttons/button.scss +++ b/src/marketing/buttons/button.scss @@ -69,9 +69,14 @@ transition: box-shadow 0.4s, color 0.4s; } -// Large +// Size modifiers -.btn-large-mktg { +.btn-sm-mktg { + // stylelint-disable-next-line primer/spacing + padding: rem(10px) rem($spacer-4) rem(12px); +} + +.btn-lg-mktg { // stylelint-disable-next-line primer/spacing padding: 20px 30px 22px !important; } From 2605b43c2f69ba46f8e9ab0ee3ad715f1163906e Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Bjerrome Date: Mon, 19 Apr 2021 17:41:58 +0200 Subject: [PATCH 04/13] Add purple variant --- docs/content/components/marketing-buttons.md | 5 ++++- src/marketing/buttons/button.scss | 10 ++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/content/components/marketing-buttons.md b/docs/content/components/marketing-buttons.md index 2769bad55b..8fdfd1dc91 100644 --- a/docs/content/components/marketing-buttons.md +++ b/docs/content/components/marketing-buttons.md @@ -17,6 +17,7 @@ The solid blue and solid green buttons have more visual emphasis than the blue o ```html live +
@@ -30,14 +31,16 @@ Available in three sizes, marketing buttons have a default size and a large size ```html live +
+
+ -
``` diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss index a8f0478ce5..03d2044825 100644 --- a/src/marketing/buttons/button.scss +++ b/src/marketing/buttons/button.scss @@ -59,6 +59,16 @@ ); } +.btn-purple-mktg { + @include btn-solid-mktg( + var(--color-text-white), + lighten($primary-purple-mktg, 5%), + $primary-purple-mktg, + lighten($secondary-purple-mktg, 5%), + $secondary-purple-mktg + ); +} + .btn-outline-mktg { @include btn-outline-mktg($primary-blue-mktg, $secondary-blue-mktg, $primary-blue-mktg); transition: box-shadow 0.4s, color 0.4s; From b1bd8d1130d12945fe552a2ab689834c6eb78c60 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 20 Apr 2021 08:52:12 -0700 Subject: [PATCH 05/13] Create itchy-goats-cough.md --- .changeset/itchy-goats-cough.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/itchy-goats-cough.md diff --git a/.changeset/itchy-goats-cough.md b/.changeset/itchy-goats-cough.md new file mode 100644 index 0000000000..8ccb6e9547 --- /dev/null +++ b/.changeset/itchy-goats-cough.md @@ -0,0 +1,5 @@ +--- +"@primer/css": minor +--- + +Update marketing button styles From 3c9dc821d894201993e1d1e264fef5ae1901edf3 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Bjerrome Date: Wed, 21 Apr 2021 21:28:18 +0200 Subject: [PATCH 06/13] Use new vars from primitives --- src/marketing/buttons/button.scss | 28 +++++++++++++++++++++------- src/marketing/support/mixins.scss | 8 ++++---- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss index 03d2044825..2e481886c2 100644 --- a/src/marketing/buttons/button.scss +++ b/src/marketing/buttons/button.scss @@ -51,11 +51,11 @@ .btn-primary-mktg { @include btn-solid-mktg( - var(--color-text-white), - lighten($primary-green-mktg, 5%), - $primary-green-mktg, - lighten($secondary-green-mktg, 5%), - $secondary-green-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), ); } @@ -70,12 +70,26 @@ } .btn-outline-mktg { - @include btn-outline-mktg($primary-blue-mktg, $secondary-blue-mktg, $primary-blue-mktg); + @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; } .btn-transparent { - @include btn-outline-mktg($static-color-white, $static-color-white, $static-color-white); + @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; } diff --git a/src/marketing/support/mixins.scss b/src/marketing/support/mixins.scss index 6eabb466f3..89421a8f5e 100644 --- a/src/marketing/support/mixins.scss +++ b/src/marketing/support/mixins.scss @@ -32,10 +32,10 @@ } } -@mixin btn-outline-mktg($color, $color2, $bg) { +@mixin btn-outline-mktg($color, $color2, $border, $borderHover, $borderFocus, $borderFocusInset) { color: $color; background: none; - box-shadow: 0 0 0 1px rgba($bg, 0.3) inset; + box-shadow: 0 0 0 1px $border inset; &::before { display: none; @@ -49,13 +49,13 @@ [open] > & { color: $color2; background: none; - box-shadow: 0 0 0 2px rgba($bg, 0.5) inset; + box-shadow: 0 0 0 2px $borderHover inset; } &:focus, &.focus { outline: 0; - box-shadow: 0 0 0 2px rgba($bg, 1) inset, 0 0 0 4px rgba($bg, 0.5); + box-shadow: 0 0 0 2px $borderFocus inset, 0 0 0 4px $borderFocusInset; } &:disabled, From 296cbd7d3b882ee3f3ed94bf3ca7e83235429556 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Bjerrome Date: Wed, 21 Apr 2021 21:32:12 +0200 Subject: [PATCH 07/13] Move enterprise button over to vars --- docs/content/components/marketing-buttons.md | 8 ++++---- src/marketing/buttons/button.scss | 12 ++++++------ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/content/components/marketing-buttons.md b/docs/content/components/marketing-buttons.md index 8fdfd1dc91..fe81dc64af 100644 --- a/docs/content/components/marketing-buttons.md +++ b/docs/content/components/marketing-buttons.md @@ -17,7 +17,7 @@ The solid blue and solid green buttons have more visual emphasis than the blue o ```html live - +
@@ -31,16 +31,16 @@ Available in three sizes, marketing buttons have a default size and a large size ```html live - +
- +
- + ``` diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss index 2e481886c2..b37fc68b46 100644 --- a/src/marketing/buttons/button.scss +++ b/src/marketing/buttons/button.scss @@ -59,13 +59,13 @@ ); } -.btn-purple-mktg { +.btn-enterprise-mktg { @include btn-solid-mktg( - var(--color-text-white), - lighten($primary-purple-mktg, 5%), - $primary-purple-mktg, - lighten($secondary-purple-mktg, 5%), - $secondary-purple-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), ); } From ebc2e4df0142704e1ac5df087ce324a95416dc56 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Bjerrome Date: Thu, 22 Apr 2021 11:20:32 +0200 Subject: [PATCH 08/13] Use Primatives variables for all buttons --- src/marketing/buttons/button.scss | 10 +++++----- src/marketing/support/variables.scss | 9 --------- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss index b37fc68b46..a3f0f5165a 100644 --- a/src/marketing/buttons/button.scss +++ b/src/marketing/buttons/button.scss @@ -17,11 +17,11 @@ border-radius: rem(6px); @include btn-solid-mktg( - var(--color-text-white), - lighten($primary-blue-mktg, 5%), - $primary-blue-mktg, - lighten($secondary-blue-mktg, 5%), - $secondary-blue-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), ); &::before { diff --git a/src/marketing/support/variables.scss b/src/marketing/support/variables.scss index 392b2e79a8..2028f834a7 100644 --- a/src/marketing/support/variables.scss +++ b/src/marketing/support/variables.scss @@ -6,15 +6,6 @@ $font-mktg: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Ari $h000-size: 64px !default; $h000-size-mobile: 48px !default; -// Colors -$primary-blue-mktg: #4969ed !default; -$secondary-blue-mktg: #3355e0 !default; -$primary-green-mktg: #2ea44f !default; -$secondary-green-mktg: #22863a !default; -$primary-purple-mktg: #6f57ff !default; -$secondary-purple-mktg: #614eda !default; -$static-color-white: #fff !default; - // Animations $transition-time: 0.4s !default; $ease-mktg: cubic-bezier(0.16, 1, 0.3, 1) !default; From 498fb5a30eb21f38472d1f9472bb2bc6f2b68868 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Bjerrome Date: Thu, 22 Apr 2021 11:31:09 +0200 Subject: [PATCH 09/13] Tweak size modifier spacing --- src/marketing/buttons/button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss index a3f0f5165a..5635c85895 100644 --- a/src/marketing/buttons/button.scss +++ b/src/marketing/buttons/button.scss @@ -97,10 +97,10 @@ .btn-sm-mktg { // stylelint-disable-next-line primer/spacing - padding: rem(10px) rem($spacer-4) rem(12px); + padding: rem(10px) rem($spacer-3) rem(13px); } .btn-lg-mktg { // stylelint-disable-next-line primer/spacing - padding: 20px 30px 22px !important; + padding: 20px 30px 23px !important; } From a7ca0e934aa433081cca55a8ad48e87dac2ba2e6 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 22 Apr 2021 20:25:22 +0900 Subject: [PATCH 10/13] yarn add @primer/primitives@latest --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 9f409cf79e..146ede8b9b 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ }, "dependencies": { "@primer/octicons": "13.0.0", - "@primer/primitives": "4.2.1" + "@primer/primitives": "4.3.0" }, "devDependencies": { "@changesets/changelog-github": "0.4.0", diff --git a/yarn.lock b/yarn.lock index c70244612a..18d6c544bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -767,10 +767,10 @@ dependencies: object-assign "^4.1.1" -"@primer/primitives@4.2.1": - version "4.2.1" - resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-4.2.1.tgz#e8fac9b4b78eb81d81384ce5fcfe32bbb4115861" - integrity sha512-sI0Bw/PMCZ1kfPX1MRwoNYD6RWdvU0sGk9YYD8euYASwrr4E6aNH9dutMmHTRVe/N3/coBN7QUkV79GMt0UKyQ== +"@primer/primitives@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-4.3.0.tgz#446e868cd1c48437cbc3340c52b159ec2e015b78" + integrity sha512-djXxll2yVTufmhnHA1H9bMT8I3S0ID6GlSewAJvKHlv80I+5AoZASVBF+WedtH/SyloLM5wyk+Tqj1ZNmy2+RQ== "@sinonjs/commons@^1.7.0": version "1.8.2" From b4950e395867b558e63b5bb4d46d93f75f35e38e Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 22 Apr 2021 20:37:55 +0900 Subject: [PATCH 11/13] Create tiny-eagles-repair.md --- .changeset/tiny-eagles-repair.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tiny-eagles-repair.md diff --git a/.changeset/tiny-eagles-repair.md b/.changeset/tiny-eagles-repair.md new file mode 100644 index 0000000000..719d7797ba --- /dev/null +++ b/.changeset/tiny-eagles-repair.md @@ -0,0 +1,5 @@ +--- +"@primer/css": major +--- + +Update marketing button styles From ea876401b0b1f456236d058c3261986a08209a10 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 22 Apr 2021 20:55:32 +0900 Subject: [PATCH 12/13] yarn add @primer/primitives@latest --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 77a795b36c..2dcee1e770 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ }, "dependencies": { "@primer/octicons": "13.0.0", - "@primer/primitives": "4.2.2" + "@primer/primitives": "4.3.0" }, "devDependencies": { "@changesets/changelog-github": "0.4.0", diff --git a/yarn.lock b/yarn.lock index 628fb5a45e..52fa9760f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -767,10 +767,10 @@ dependencies: object-assign "^4.1.1" -"@primer/primitives@4.2.2": - version "4.2.2" - resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-4.2.2.tgz#3d4400c125bad85e9a4de35832dbe2af98ba1c45" - integrity sha512-PHuDnaaYI5+SjK5RaLGXxYxgDkSqx3DJJCOxwVvrcA8pPUdfJ4ifFrZxly+NA/5DyHNVTzkjnaRa9V35ff9Lgg== +"@primer/primitives@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-4.3.0.tgz#446e868cd1c48437cbc3340c52b159ec2e015b78" + integrity sha512-djXxll2yVTufmhnHA1H9bMT8I3S0ID6GlSewAJvKHlv80I+5AoZASVBF+WedtH/SyloLM5wyk+Tqj1ZNmy2+RQ== "@sinonjs/commons@^1.7.0": version "1.8.2" From 2cc4dbb8c2349aeb283b91557d7e55a13377ff10 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 22 Apr 2021 21:33:31 +0900 Subject: [PATCH 13/13] Delete itchy-goats-cough.md --- .changeset/itchy-goats-cough.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/itchy-goats-cough.md diff --git a/.changeset/itchy-goats-cough.md b/.changeset/itchy-goats-cough.md deleted file mode 100644 index 8ccb6e9547..0000000000 --- a/.changeset/itchy-goats-cough.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/css": minor ---- - -Update marketing button styles