From 69975a28052ecb00b09a8a01da3318d68f84790a Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 29 Jun 2020 16:07:31 +0900 Subject: [PATCH 1/9] Increase contrast for placeholders --- src/forms/form-control.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index 84b2204a..fb0cc9b8 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -91,6 +91,7 @@ textarea.form-control { // Custom styling for HTML5 validation bubbles (WebKit only) ::placeholder { color: $text-gray-light; + opacity: 1; // override opacity in normalize.css } // Mini inputs, to match .minibutton From 3b5869364450656f033ba76bebf83bd61d09c550 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 29 Jun 2020 21:09:36 +0900 Subject: [PATCH 2/9] Add support for Firefox custom colors --- docs/content/components/progress.md | 12 ++++++------ src/progress/progress.scss | 5 +++++ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/docs/content/components/progress.md b/docs/content/components/progress.md index f4ab7cf6..8ada032b 100644 --- a/docs/content/components/progress.md +++ b/docs/content/components/progress.md @@ -6,11 +6,11 @@ source: 'https://github.com/primer/css/tree/master/src/progress' bundle: progress --- -Use progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children should be individually colored with [background utilities](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped. +Use progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children (`Progress-item`) should be individually colored with [background utilities](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped. ```html live - + ``` @@ -20,7 +20,7 @@ Large progress bars are slightly taller than the default. ```html live - + ``` @@ -30,7 +30,7 @@ Large progress bars are shorter than the default. ```html live - + ``` @@ -41,7 +41,7 @@ For inline progress indicators, use the `Progress` and `d-inline-flex` with an i ```html live 4 of 16 -
+
``` @@ -52,7 +52,7 @@ In cases where it's not possible to describe the progress in text, provide an `a ```html live
- +
``` diff --git a/src/progress/progress.scss b/src/progress/progress.scss index 14098e9a..2a651cc8 100644 --- a/src/progress/progress.scss +++ b/src/progress/progress.scss @@ -7,6 +7,7 @@ // stylelint-disable-next-line primer/colors background-color: $gray-200; border-radius: $border-radius; + outline: 1px solid transparent; // Support Firfox custom colors } .Progress--large { @@ -17,6 +18,10 @@ height: 5px; } +.Progress-item { + outline: 2px solid transparent; // Support Firfox custom colors +} + .Progress-item + .Progress-item { // stylelint-disable-next-line primer/spacing margin-left: 2px; From 5abfb0f4efdcab6ac0520278d3e0948bc80dd41e Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 29 Jun 2020 22:18:34 +0900 Subject: [PATCH 3/9] Increse contrast for $text-green --- docs/content/utilities/colors.mdx | 1 - src/support/variables/colors.scss | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/content/utilities/colors.mdx b/docs/content/utilities/colors.mdx index 9256cf6e..bca879c7 100644 --- a/docs/content/utilities/colors.mdx +++ b/docs/content/utilities/colors.mdx @@ -82,7 +82,6 @@ You can set the color inheritance on an element by using the `text-inherit` clas
.text-green - ⚠️
.text-purple diff --git a/src/support/variables/colors.scss b/src/support/variables/colors.scss index ae0b4edc..36231563 100644 --- a/src/support/variables/colors.scss +++ b/src/support/variables/colors.scss @@ -46,7 +46,7 @@ $text-blue: $blue-500 !default; $text-gray-dark: $gray-900 !default; $text-gray-light: $gray-500 !default; $text-gray: $gray-600 !default; -$text-green: $green-500 !default; +$text-green: $green-600 !default; $text-orange: $orange-900 !default; $text-orange-light: $orange-600 !default; $text-purple: $purple !default; From 24977f24b882da1f345e000fc5f83cad973246d4 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 29 Jun 2020 23:14:13 +0900 Subject: [PATCH 4/9] Add transparent border --- src/labels/states.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/labels/states.scss b/src/labels/states.scss index 84a133c7..553dca07 100644 --- a/src/labels/states.scss +++ b/src/labels/states.scss @@ -13,7 +13,7 @@ .State { display: inline-block; // stylelint-disable-next-line primer/spacing - padding: 6px 12px; + padding: 5px 12px; font-size: $body-font-size; font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography @@ -23,6 +23,7 @@ white-space: nowrap; // stylelint-disable-next-line primer/colors background-color: $gray-500; + border: $border-width $border-style transparent; // Support Firfox custom colors // stylelint-disable-next-line primer/borders border-radius: 2em; } From b1ae26fa926f7d033060aba15355a5d3050d4060 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 1 Jul 2020 12:01:14 +0900 Subject: [PATCH 5/9] Add transparent border to Counter --- 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 9913e2e8..33a113a7 100644 --- a/src/labels/counters.scss +++ b/src/labels/counters.scss @@ -7,11 +7,12 @@ font-size: $font-size-small; font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography - line-height: $size-2; + line-height: $size-2 - 2px; // remove borders color: $text-gray-dark; text-align: center; // stylelint-disable-next-line primer/colors background-color: rgba($gray-300, 0.5); + border: $border-width $border-style transparent; // Support Firfox custom colors // stylelint-disable-next-line primer/borders border-radius: 2em; From 3b01f1285ed0bdccf09e7f171044e87ce7713f2e Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 1 Jul 2020 12:15:26 +0900 Subject: [PATCH 6/9] Add transparent outlines to diffstat --- src/labels/diffstat.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/labels/diffstat.scss b/src/labels/diffstat.scss index 69feb407..a8b59766 100644 --- a/src/labels/diffstat.scss +++ b/src/labels/diffstat.scss @@ -18,16 +18,20 @@ height: $spacer-2; // stylelint-disable-next-line primer/spacing margin-left: 1px; + outline-offset: -1px; // Support Firfox custom colors } .diffstat-block-deleted { background-color: $bg-diffstat-deleted; + outline: 1px dashed transparent; // Support Firfox custom colors } .diffstat-block-added { background-color: $bg-diffstat-added; + outline: 1px solid transparent; // Support Firfox custom colors } .diffstat-block-neutral { background-color: $bg-diffstat-neutral; + outline: 1px dotted transparent; // Support Firfox custom colors } From 9098d503e2a4e35116f08a5f005fe68a5110d6b2 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 1 Jul 2020 13:27:45 +0900 Subject: [PATCH 7/9] Add transparent outline to .btn when focused --- src/buttons/button.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 6aba527d..74c5f7be 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -109,6 +109,8 @@ // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons &:focus, &.focus { + outline: 1px dotted transparent; // Support Firfox custom colors + outline-offset: 2px; box-shadow: $box-shadow-focus; } } From 5afc7eb2990e44f221c3a6ca16ad45250d4f8376 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 1 Jul 2020 13:46:29 +0900 Subject: [PATCH 8/9] Remove unused style --- src/buttons/button.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 74c5f7be..07d2a8d2 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -22,10 +22,6 @@ text-decoration: none; } - &:focus { - outline: 0; - } - &:disabled, &.disabled, &[aria-disabled=true] { From 1f0d1ccf46b6abd0559499a9c3a41f3bfd4ebb34 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 1 Jul 2020 14:55:45 +0900 Subject: [PATCH 9/9] Add transparent outline to UnderlineNav --- src/navigation/underline-nav.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss index a73c3ebe..83b3acdf 100644 --- a/src/navigation/underline-nav.scss +++ b/src/navigation/underline-nav.scss @@ -29,6 +29,8 @@ &:focus { text-decoration: none; border-bottom-color: $border-gray-dark; + outline: 1px dotted transparent; // Support Firfox custom colors + outline-offset: -1px; transition-timing-function: ease-out; transition-duration: 0.12s; } @@ -39,6 +41,8 @@ font-weight: $font-weight-bold; // stylelint-disable-next-line primer/borders border-bottom-color: #f9826c; // custom coral + outline: 1px dotted transparent; // Support Firfox custom colors + outline-offset: -1px; .UnderlineNav-octicon { color: $text-gray;