From 90737f7e09901ccb339d3b0cf3587a1aff42997f Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 31 Mar 2020 15:39:04 +0900 Subject: [PATCH 01/17] Reduce transparency of icons and carets --- src/buttons/button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 8a1806807b..bb91df4f42 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -62,7 +62,7 @@ .dropdown-caret { margin-left: $spacer-1; - opacity: 0.6; + opacity: 0.8; } } @@ -169,7 +169,7 @@ } .octicon { - color: inherit; + color: rgba($text-white, 0.8); } } From 12e9ce7eea6fa29cdb910a36c4a9b7954a19ec6b Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 31 Mar 2020 15:41:56 +0900 Subject: [PATCH 02/17] Update green of btn-primary --- src/buttons/button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index bb91df4f42..643bc6526c 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -114,8 +114,8 @@ // Primary button .btn-primary { - $bg-default: #159739; // custom green - $bg-hover: #138934; // custom green + $bg-default: #2ea44f; // custom green + $bg-hover: #2c974b; // custom green $bg-active: darken($bg-hover, 2%); $bg-disabled: #94d3a2; // custom green From 338d1e569a4c6b8ea3ceafba3de3762e4c9e4fca Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 31 Mar 2020 17:25:33 +0900 Subject: [PATCH 03/17] Increase shadow for .btn-primary --- src/buttons/button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 643bc6526c..b9a3d68eb2 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -123,7 +123,7 @@ $border-hover: $green-700; $shadow: $green-900; - $box-shadow: $box-shadow, inset 0 1px 0 rgba($white, 0.03); + $box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03); color: $text-white; background-color: $bg-default; From 1bbc010297e078c873485eda5cb3fb8afcc5cbca Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 31 Mar 2020 17:49:48 +0900 Subject: [PATCH 04/17] Update button borders --- src/buttons/button.scss | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index b9a3d68eb2..817a430bfc 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -119,22 +119,19 @@ $bg-active: darken($bg-hover, 2%); $bg-disabled: #94d3a2; // custom green - $border-default: $green-600; - $border-hover: $green-700; - $shadow: $green-900; $box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03); color: $text-white; background-color: $bg-default; - border-color: $border-default; + // stylelint-disable-next-line primer/borders + border-color: rgba($black, 0.15); box-shadow: $box-shadow; &:hover, &.hover, [open] > & { background-color: $bg-hover; - border-color: $border-hover; } &:active, @@ -152,7 +149,7 @@ color: rgba($text-white, 0.8); background-color: $bg-disabled; // stylelint-disable-next-line primer/borders - border-color: rgba($border-default, 0.1); + border-color: rgba($black, 0.1); box-shadow: $box-shadow; } @@ -175,7 +172,7 @@ // Mixin: btn-inverse-on-hover -@mixin btn-inverse-on-hover( $color, $bg-hover, $bg-active, $border-hover, $border-active, $shadow ) { +@mixin btn-inverse-on-hover( $color, $bg-hover, $bg-active, $shadow ) { color: $color; transition: none; @@ -183,7 +180,7 @@ [open] > & { color: $text-white; background-color: $bg-hover; - border-color: $border-hover; + border-color: rgba($black, 0.15); box-shadow: 0 1px 0 rgba($shadow, 0.1), inset 0 1px 0 rgba($white, 0.03); .Counter { @@ -200,7 +197,7 @@ &[aria-selected=true] { color: $text-white; background-color: $bg-active; - border-color: $border-active; + border-color: rgba($black, 0.15); box-shadow: inset 0 1px 0 rgba($shadow, 0.2); } @@ -234,8 +231,6 @@ $color: $text-red, $bg-hover: $red-600, $bg-active: darken($red-600, 3%), - $border-hover: $red-700, - $border-active: $red-800, $shadow: $red-900 ); } @@ -247,8 +242,6 @@ $color: $blue-500, $bg-hover: $blue-500, $bg-active: darken($blue-500, 3%), - $border-hover: $blue-600, - $border-active: rgba($blue-700, 0.5), $shadow: $blue-900 ); } From 844abe00b9a1def2609ca36491cf3fc3b8a0ffa2 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 31 Mar 2020 18:00:48 +0900 Subject: [PATCH 05/17] Update btn border --- src/support/variables/misc.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss index 4c1b847bf9..c4c0477ffa 100644 --- a/src/support/variables/misc.scss +++ b/src/support/variables/misc.scss @@ -22,7 +22,7 @@ $box-shadow-inset: inset 0 1px 0 rgba($border-color, 0.2) !default; // top inner $box-shadow-focus: 0 0 0 3px rgba($border-blue, 0.3) !default; // blue focus ring // Button variables -$border-color-button: $border-color !default; +$border-color-button: rgba($black, 0.12) !default; $btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate? // Form variables From 77f3e5e282ad99e4bb07cc5af3af7b210d59668f Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 31 Mar 2020 18:01:21 +0900 Subject: [PATCH 06/17] Update $box-shadow --- src/support/variables/misc.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss index c4c0477ffa..b7b43090d8 100644 --- a/src/support/variables/misc.scss +++ b/src/support/variables/misc.scss @@ -12,7 +12,7 @@ $border-radius-2: 6px !default; $border-radius: $border-radius-2 !default; // Box shadow -$box-shadow: 0 1px 0 rgba($gray-400, 0.1) !default; +$box-shadow: 0 1px 0 rgba($black, 0.04) !default; $box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default; $box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !default; $box-shadow-extra-large: 0 12px 48px rgba($gray-400, 0.3) !default; From 34368b76ff55808c650fbfcd20ed0aeb55ea5979 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 31 Mar 2020 20:09:42 +0900 Subject: [PATCH 07/17] Lint --- src/buttons/button.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 817a430bfc..a9e20a3fdd 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -166,6 +166,7 @@ } .octicon { + // stylelint-disable-next-line primer/colors color: rgba($text-white, 0.8); } } From 481b80c0a2275cd6ccc7cfaf2a146c9b19d71970 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 1 Apr 2020 10:09:31 +0900 Subject: [PATCH 08/17] Use black shadow --- src/buttons/button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index a9e20a3fdd..a2a52f3a2e 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -182,7 +182,7 @@ color: $text-white; background-color: $bg-hover; border-color: rgba($black, 0.15); - box-shadow: 0 1px 0 rgba($shadow, 0.1), inset 0 1px 0 rgba($white, 0.03); + box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03); .Counter { background-color: rgba($bg-white, 0.2); From 823d3b389c297c6922361bf84459632f50f5fec2 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 1 Apr 2020 21:14:23 +0900 Subject: [PATCH 09/17] Add padding back to buttons --- src/buttons/button.scss | 15 +++++++++------ src/buttons/misc.scss | 4 ++-- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index a2a52f3a2e..351408cbbf 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -4,11 +4,11 @@ .btn { position: relative; display: inline-block; - padding: 0 $spacer-3; + padding: 5px $spacer-3; font-size: $body-font-size; font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography - line-height: height-without-border($size-5); + line-height: 20px; // Specifically not inherit our `` default white-space: nowrap; vertical-align: middle; cursor: pointer; @@ -56,6 +56,7 @@ margin-left: 2px; color: inherit; text-shadow: none; + vertical-align: top; // stylelint-disable-next-line primer/colors background-color: rgba($black, 0.08); // Darken for just a tad more contrast against the button background } @@ -263,12 +264,14 @@ // Tweak `line-height` to make them smaller. .btn-sm { // stylelint-disable-next-line primer/spacing - padding-right: 12px; - // stylelint-disable-next-line primer/spacing - padding-left: 12px; + padding: 3px 12px; font-size: $font-size-small; // stylelint-disable-next-line primer/typography - line-height: height-without-border($size-4); + line-height: 20px; + + .octicon { + vertical-align: text-top; + } } // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g,

diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss index 26814ccad4..70a9dcf66f 100644 --- a/src/buttons/misc.scss +++ b/src/buttons/misc.scss @@ -169,11 +169,11 @@ position: relative; float: left; // stylelint-disable-next-line primer/spacing - padding: 0 12px; + padding: 3px 12px; font-size: $font-size-small; font-weight: $font-weight-bold; // stylelint-disable-next-line primer/typography - line-height: height-without-border($size-4); + line-height: 20px; color: $text-gray-dark; vertical-align: middle; background-color: $bg-white; From a204260c17931dec2b7840658ef23c88d3d38317 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 1 Apr 2020 21:14:34 +0900 Subject: [PATCH 10/17] Update labels.md --- docs/content/components/labels.md | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md index 6bc97edbe9..13a89076f7 100644 --- a/docs/content/components/labels.md +++ b/docs/content/components/labels.md @@ -190,22 +190,6 @@ You can also have icons and emoji in counters. Or use utilities for counters wit 22 ``` -## Small counters - -Use the `Counter--small` modifier class to reduce the size of a counter. - -```html live -1 -23 -456 -1.5K -
-1 -23 -456 -1.5K -``` - ## Diffstat Diffstats show how many deletions or additions a diff has. It's typically a row of 5 blocks that get colored with green or red. From e3c49ea7805769a76f018cf53c29ce100c98ad8d Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 1 Apr 2020 23:04:24 +0900 Subject: [PATCH 11/17] Lint --- src/buttons/button.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 351408cbbf..6aba527d3d 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -4,6 +4,7 @@ .btn { position: relative; display: inline-block; + // stylelint-disable-next-line primer/spacing padding: 5px $spacer-3; font-size: $body-font-size; font-weight: $font-weight-semibold; From 6448c76480a11a8e77b0cebe507f569bbc98a270 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 1 Apr 2020 23:51:56 +0900 Subject: [PATCH 12/17] Add padding to form controls --- src/forms/form-control.scss | 13 ++++++++----- src/forms/form-select.scss | 7 ++++--- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index 6fc13d8eef..84b2204a41 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -18,10 +18,10 @@ label { .form-control, .form-select { // stylelint-disable-next-line primer/spacing - padding: 0 12px; + padding: 5px 12px; font-size: $body-font-size; // stylelint-disable-next-line primer/typography - line-height: height-without-border($size-5); + line-height: 20px; color: $text-gray-dark; vertical-align: middle; background-color: $bg-white; @@ -72,6 +72,7 @@ textarea.form-control { // stylelint-disable-next-line primer/colors background-color: $white-fade-15; border-color: transparent; + box-shadow: none; &::placeholder { color: inherit; @@ -94,15 +95,17 @@ textarea.form-control { // Mini inputs, to match .minibutton .input-sm { + // stylelint-disable-next-line primer/spacing + padding-top: 3px; + // stylelint-disable-next-line primer/spacing + padding-bottom: 3px; font-size: $font-size-small; // stylelint-disable-next-line primer/typography - line-height: height-without-border($size-4); + line-height: 20px; } // Large inputs .input-lg { - padding-right: $spacer-3; - padding-left: $spacer-3; font-size: $h4-size; } diff --git a/src/forms/form-select.scss b/src/forms/form-select.scss index db0e7e3a4c..32985c24a8 100644 --- a/src/forms/form-select.scss +++ b/src/forms/form-select.scss @@ -25,10 +25,11 @@ .select-sm { height: $size-4; - min-height: $size-4; + // stylelint-disable-next-line primer/spacing + padding-top: 3px; + // stylelint-disable-next-line primer/spacing + padding-bottom: 3px; font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - line-height: height-without-border($size-4); &[multiple] { height: auto; From 2d25f7756dad6a067eb1aad36c76f51b99c988e3 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 2 Apr 2020 00:02:18 +0900 Subject: [PATCH 13/17] Add padding to subnav --- src/navigation/subnav.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss index eb53e5478f..9c647ff996 100644 --- a/src/navigation/subnav.scss +++ b/src/navigation/subnav.scss @@ -20,10 +20,11 @@ .subnav-item { position: relative; float: left; - padding: 0 $spacer-3; + // stylelint-disable-next-line primer/spacing + padding: 5px $spacer-3; font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography - line-height: height-without-border($size-5); + line-height: 20px; color: $text-gray-dark; border: $border; From 60bc0447af6e005800e4fe9c71e85763a8c1c159 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 2 Apr 2020 00:47:43 +0900 Subject: [PATCH 14/17] Add padding to states --- src/labels/states.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/labels/states.scss b/src/labels/states.scss index 3b2a9ed45e..63ba20eaf1 100644 --- a/src/labels/states.scss +++ b/src/labels/states.scss @@ -13,11 +13,11 @@ .State { display: inline-block; // stylelint-disable-next-line primer/spacing - padding: 0 12px; + padding: 6px 12px; font-size: $body-font-size; font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography - line-height: $size-5; + line-height: 20px; color: $text-white; text-align: center; white-space: nowrap; @@ -43,8 +43,8 @@ // Small .State--small { - padding-right: $spacer-2; - padding-left: $spacer-2; + // stylelint-disable-next-line primer/spacing + padding: 0 10px; font-size: $font-size-small; // stylelint-disable-next-line primer/typography line-height: $size-3; From f61be7548acaa41530b800f030e0e87acdc43bca Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 2 Apr 2020 09:29:49 +0900 Subject: [PATCH 15/17] :fire: Remove height-without-border() --- src/support/mixins/typography.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/support/mixins/typography.scss b/src/support/mixins/typography.scss index 8687aed570..23ec0e3ecf 100644 --- a/src/support/mixins/typography.scss +++ b/src/support/mixins/typography.scss @@ -1,10 +1,3 @@ -// height-without-border -// -// Removes top/bottom border from the total height -@function height-without-border($height) { - @return $height - ($border-width * 2); -} - // Text hiding for image based text replacement. // Higher performance than -9999px because it only renders // the size of the actual text, not a full 9999px box. From c7bfa67c1ccf1e053d91de489b8e863caa9825d6 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 2 Apr 2020 10:03:18 +0900 Subject: [PATCH 16/17] Update counters.scss --- src/labels/counters.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/labels/counters.scss b/src/labels/counters.scss index 22ea1e3164..4f9243e5f9 100644 --- a/src/labels/counters.scss +++ b/src/labels/counters.scss @@ -20,7 +20,8 @@ } .octicon { - opacity: 0.5; + opacity: 0.8; + vertical-align: text-top; } } From c5821d56f7e85328a93c02232513067866d06078 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 2 Apr 2020 11:15:32 +0900 Subject: [PATCH 17/17] Lint --- src/labels/counters.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/labels/counters.scss b/src/labels/counters.scss index 4f9243e5f9..4872cc2294 100644 --- a/src/labels/counters.scss +++ b/src/labels/counters.scss @@ -20,8 +20,8 @@ } .octicon { - opacity: 0.8; vertical-align: text-top; + opacity: 0.8; } }