primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-19 04:37:38 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1370 from primer/replace-border-overlay

Browse Source 
Replace border-overlay with border-primary
This commit is contained in:
simurai 2021-04-28 13:14:44 +09:00 committed by GitHub
commit 517e94458a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/khaki-lizards-report.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": major
---
Replace border-overlay with border-primary

2
docs/content/support/v16-migration.mdx
View File

@ -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 |

2
src/autocomplete/autocomplete.scss
View File

@ -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);
}

2
src/autocomplete/suggester.scss
View File

@ -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);

12
src/dropdown/dropdown.scss
View File

@ -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;

8
src/popover/popover.scss
View File

@ -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 {

2
src/select-menu/select-menu.scss
View File

@ -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;

1
src/utilities/colors.scss
View File

@ -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; }