From fd5571c58438c21ecd77bbe41a89ccd4c28ca9a3 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 27 Apr 2021 21:18:28 +0900 Subject: [PATCH 1/2] Replace border-overlay with border-primary --- docs/content/support/v16-migration.mdx | 2 -- src/autocomplete/autocomplete.scss | 2 +- src/autocomplete/suggester.scss | 2 +- src/dropdown/dropdown.scss | 12 ++++++------ src/popover/popover.scss | 8 ++++---- src/select-menu/select-menu.scss | 2 +- src/utilities/colors.scss | 1 - 7 files changed, 13 insertions(+), 16 deletions(-) diff --git a/docs/content/support/v16-migration.mdx b/docs/content/support/v16-migration.mdx index 34a72282..c5c6e7e8 100644 --- a/docs/content/support/v16-migration.mdx +++ b/docs/content/support/v16-migration.mdx @@ -100,7 +100,6 @@ See [color utility classes](/utilities/colors) for a list of all the functional | `.border-yellow` | `.color-border-warning` | | `.border-red` | `.color-border-danger` | | `.border-white` | `.color-border-inverse` | -| n/a | `.color-border-overlay` | | `.border-gray-darker` | n/a | | `.border-blue-light` | n/a | | `.border-red-light` | n/a | @@ -217,7 +216,6 @@ See [color system](/support/color-system) for a list of all the functional CSS v | `$border-green` (`$green-400`) | `var(--color-border-success)` | | `$border-red` (`$red-500`) | `var(--color-border-danger)` | | `$border-yellow` (`$yellow-600`) | `var(--color-border-warning)` | -| n/a | `var(--color-border-overlay)` | | `$border-gray-darker` (`$gray-700`) | n/a | | `$border-blue-light` (`$blue-200`) | n/a | | `$border-red-light` (`$red-300`) | n/a | diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss index 40bb7d60..19db0647 100644 --- a/src/autocomplete/autocomplete.scss +++ b/src/autocomplete/autocomplete.scss @@ -9,7 +9,7 @@ font-size: 13px; list-style: none; background: var(--color-bg-overlay); - border: $border-width $border-style var(--color-border-overlay); + border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; box-shadow: var(--color-autocomplete-shadow); } diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss index 2af728d6..526c6afa 100644 --- a/src/autocomplete/suggester.scss +++ b/src/autocomplete/suggester.scss @@ -12,7 +12,7 @@ list-style: none; cursor: pointer; background: var(--color-bg-overlay); - border: $border-width $border-style var(--color-border-overlay); + border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; box-shadow: var(--color-autocomplete-shadow); diff --git a/src/dropdown/dropdown.scss b/src/dropdown/dropdown.scss index fe473b65..23810484 100644 --- a/src/dropdown/dropdown.scss +++ b/src/dropdown/dropdown.scss @@ -32,7 +32,7 @@ list-style: none; background-color: var(--color-bg-overlay); background-clip: padding-box; - border: $border-width $border-style var(--color-border-overlay); + border: $border-width $border-style var(--color-border-primary); border-radius: $border-radius; box-shadow: var(--color-dropdown-shadow); @@ -47,7 +47,7 @@ &::before { // stylelint-disable-next-line primer/borders border: $spacer-2 $border-style transparent; - border-bottom-color: var(--color-border-overlay); + border-bottom-color: var(--color-border-primary); } // caret background (should match dropdown background) @@ -113,7 +113,7 @@ display: block; height: 0; margin: $spacer-2 0; - border-top: $border-width $border-style var(--color-border-overlay); + border-top: $border-width $border-style var(--color-border-primary); } .dropdown-header { @@ -144,7 +144,7 @@ right: -$spacer-3; left: auto; border-color: transparent; - border-left-color: var(--color-border-overlay); + border-left-color: var(--color-border-primary); } &::after { @@ -168,7 +168,7 @@ top: 10px; left: -$spacer-3; border-color: transparent; - border-right-color: var(--color-border-overlay); + border-right-color: var(--color-border-primary); } &::after { @@ -197,7 +197,7 @@ bottom: -$spacer-2; left: 9px; // stylelint-disable-next-line primer/borders - border-top: $spacer-2 $border-style var(--color-border-overlay); + border-top: $spacer-2 $border-style var(--color-border-primary); // stylelint-disable-next-line primer/borders border-right: $spacer-2 $border-style transparent; border-bottom: 0; diff --git a/src/popover/popover.scss b/src/popover/popover.scss index 1afe293e..a1bf0b13 100644 --- a/src/popover/popover.scss +++ b/src/popover/popover.scss @@ -24,7 +24,7 @@ margin-left: -9px; // stylelint-disable-next-line primer/borders border: $spacer-2 $border-style transparent; - border-bottom-color: var(--color-border-overlay); + border-bottom-color: var(--color-border-primary); } &::after { @@ -54,7 +54,7 @@ &::before { bottom: -$spacer-3; - border-top-color: var(--color-border-overlay); + border-top-color: var(--color-border-primary); } &::after { @@ -133,7 +133,7 @@ .Popover-message--right-bottom { &::before { right: -$spacer-3; - border-left-color: var(--color-border-overlay); + border-left-color: var(--color-border-primary); } &::after { @@ -149,7 +149,7 @@ .Popover-message--left-bottom { &::before { left: -$spacer-3; - border-right-color: var(--color-border-overlay); + border-right-color: var(--color-border-primary); } &::after { diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index 50aafbdb..fe382d96 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -88,7 +88,7 @@ $SelectMenu-max-height: 480px !default; max-height: $SelectMenu-max-height; margin: $spacer-2 0 $spacer-3 0; font-size: $font-size-small; - border-color: var(--color-border-overlay); + border-color: var(--color-border-primary); border-radius: $border-radius; box-shadow: var(--color-shadow-large); animation-name: SelectMenu-modal-animation--sm; diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss index 423b7e13..b2088993 100644 --- a/src/utilities/colors.scss +++ b/src/utilities/colors.scss @@ -24,7 +24,6 @@ .color-border-primary { border-color: var(--color-border-primary) !important; } .color-border-secondary { border-color: var(--color-border-secondary) !important; } .color-border-tertiary { border-color: var(--color-border-tertiary) !important; } -.color-border-overlay { border-color: var(--color-border-overlay) !important; } .color-border-inverse { border-color: var(--color-border-inverse) !important; } .color-border-info { border-color: var(--color-border-info) !important; } .color-border-success { border-color: var(--color-border-success) !important; } From cc0049c2ad1ad609dc672e12f751245fbecc5d65 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 27 Apr 2021 21:20:39 +0900 Subject: [PATCH 2/2] Create khaki-lizards-report.md --- .changeset/khaki-lizards-report.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/khaki-lizards-report.md diff --git a/.changeset/khaki-lizards-report.md b/.changeset/khaki-lizards-report.md new file mode 100644 index 00000000..bb104570 --- /dev/null +++ b/.changeset/khaki-lizards-report.md @@ -0,0 +1,5 @@ +--- +"@primer/css": major +--- + +Replace border-overlay with border-primary