primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-10-26 17:34:39 +03:00
Code Issues Projects Releases Wiki Activity

Update borders, states and more

Browse Source 
Follows the changes from https://github.com/primer/primitives/pull/21/files
This commit is contained in:
simurai 2020-10-07 15:29:40 +09:00
parent cc7f219534
commit 805cfbd7c8
16 changed files with 33 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -2680,9 +2680,9 @@
}
},
"@primer/primitives": {
"version": "0.0.0-e66591e",
"resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-e66591e.tgz",
"integrity": "sha512-HBRA0WnUDY56L3cjStiq4dC1elei/7b1WfB2yOeFlbi924UxJJkV+R0eLgWshkUo4+Mr+q/1qLHf/O3Pb4AcWw=="
"version": "0.0.0-4813158",
"resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-4813158.tgz",
"integrity": "sha512-GTIs1uOeukZY0L+cjvDy4iVkcYHL7iSSvYN1FGm+O5UPP0Use7lI7F8Oca5O0kxxc/ASmRIR/Ls7XJlrkWtAjw=="
},
"@reach/router": {
"version": "1.3.3",

2
package.json
View File

@ -41,7 +41,7 @@
},
"dependencies": {
"@primer/octicons": "^9.1.1",
"@primer/primitives": "0.0.0-e66591e"
"@primer/primitives": "0.0.0-4813158"
},
"devDependencies": {
"@octokit/rest": "^16.34.0",

2
src/autocomplete/autocomplete.scss
View File

@ -38,7 +38,7 @@
&.navigation-focus {
color: var(--color-text-inverse);
text-decoration: none;
background-color: var(--color-bg-selected);
background-color: var(--color-state-selected-primary-bg);
// Inherit color on all child elements to ensure enough contrast
* {

4
src/autocomplete/suggester.scss
View File

@ -20,7 +20,7 @@
display: block;
padding: $spacer-1 $spacer-2;
font-weight: $font-weight-semibold;
border-bottom: $border-width $border-style var(--color-border-primary-light);
border-bottom: $border-width $border-style var(--color-border-secondary);
small {
font-weight: $font-weight-normal;
@ -43,7 +43,7 @@
&.navigation-focus {
color: var(--color-text-inverse);
text-decoration: none;
background: var(--color-bg-selected);
background: var(--color-state-selected-primary-bg);
small {
color: var(--color-text-inverse);

2
src/base/base.scss
View File

@ -45,7 +45,7 @@ hr,
overflow: hidden;
background: transparent;
border: 0;
border-bottom: $border-width $border-style var(--color-border-secondary);
border-bottom: $border-width $border-style var(--color-border-tertiary);
@include clearfix();
}

6
src/base/kbd.scss
View File

@ -13,9 +13,9 @@ kbd {
vertical-align: middle;
background-color: var(--color-bg-tertiary);
// stylelint-disable-next-line primer/borders
border: $border-style $border-width var(--color-border-secondary);
border-bottom-color: var(--color-border-secondary);
border: $border-style $border-width var(--color-border-tertiary);
border-bottom-color: var(--color-border-tertiary);
border-radius: $border-radius;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 -1px 0 var(--color-border-secondary);
box-shadow: inset 0 -1px 0 var(--color-border-tertiary);
}

2
src/blankslate/blankslate.scss
View File

@ -9,7 +9,7 @@
padding: 2px 5px 3px;
font-size: $h5-size;
background: var(--color-bg-canvas);
border: $border-width $border-style var(--color-border-tertiary);
border: $border-width $border-style var(--color-auto-gray-0);
border-radius: $border-radius;
}

4
src/markdown/headings.scss
View File

@ -39,7 +39,7 @@
padding-bottom: 0.3em;
// stylelint-disable-next-line primer/typography
font-size: 2em;
border-bottom: $border-width $border-style var(--color-border-primary-light);
border-bottom: $border-width $border-style var(--color-border-secondary);
}
h2 {
@ -47,7 +47,7 @@
padding-bottom: 0.3em;
// stylelint-disable-next-line primer/typography
font-size: 1.5em;
border-bottom: $border-width $border-style var(--color-border-primary-light);
border-bottom: $border-width $border-style var(--color-border-secondary);
}
h3 {

4
src/navigation/menu.scss
View File

@ -15,7 +15,7 @@
display: block;
padding: $spacer-2 $spacer-3;
color: var(--color-text-primary);
border-bottom: $border-width $border-style var(--color-border-primary-light);
border-bottom: $border-width $border-style var(--color-border-secondary);
&:first-child {
border-top: 0;
@ -100,7 +100,7 @@
font-size: inherit;
font-weight: $font-weight-bold;
color: var(--color-text-primary);
border-bottom: $border-width $border-style var(--color-border-primary-light);
border-bottom: $border-width $border-style var(--color-border-secondary);
&:hover {
text-decoration: none;

2
src/navigation/sidenav.scss
View File

@ -16,7 +16,7 @@
text-align: left;
background-color: transparent;
border: 0;
border-top: $border-width $border-style var(--color-border-primary-light);
border-top: $border-width $border-style var(--color-border-secondary);
&:first-child {
border-top: 0;

2
src/navigation/subnav.scss
View File

@ -10,7 +10,7 @@
.subnav-bordered {
// stylelint-disable-next-line primer/spacing
padding-bottom: 20px;
border-bottom: $border-width $border-style var(--color-border-primary-light);
border-bottom: $border-width $border-style var(--color-border-secondary);
}
.subnav-flush {

4
src/navigation/underline-nav.scss
View File

@ -28,7 +28,7 @@
&:hover,
&:focus {
text-decoration: none;
border-bottom-color: var(--color-border-secondary);
border-bottom-color: var(--color-border-tertiary);
outline: 1px dotted transparent; // Support Firfox custom colors
outline-offset: -1px;
transition-timing-function: ease-out;
@ -45,7 +45,7 @@
outline-offset: -1px;
.UnderlineNav-octicon {
color: var(--color-text-secondary);
color: var(--color-text-tertiary);
}
}
}

2
src/pagination/pagination.scss
View File

@ -30,7 +30,7 @@
}
&:active {
border-color: var(--color-border-primary-light);
border-color: var(--color-border-secondary);
transition: none;
}
}

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

@ -103,7 +103,7 @@ $SelectMenu-max-height: 480px !default;
padding: $spacer-3;
flex: none; // fixes header from getting squeezed in Safari iOS
align-items: center;
border-bottom: $border-width $border-style var(--color-border-primary-light);
border-bottom: $border-width $border-style var(--color-border-secondary);
@include breakpoint(sm) {
// stylelint-disable-next-line primer/spacing
@ -144,7 +144,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-filter {
padding: $spacer-3;
margin: 0;
border-bottom: $border-width $border-style var(--color-border-primary-light);
border-bottom: $border-width $border-style var(--color-border-secondary);
@include breakpoint(sm) {
padding: $spacer-2;
@ -192,7 +192,7 @@ $SelectMenu-max-height: 480px !default;
cursor: pointer;
background-color: var(--color-bg-primary);
border: 0;
border-bottom: $border-width $border-style var(--color-border-primary-light);
border-bottom: $border-width $border-style var(--color-border-secondary);
@include breakpoint(sm) {
// stylelint-disable-next-line primer/spacing
@ -234,7 +234,7 @@ $SelectMenu-max-height: 480px !default;
overflow-x: auto;
overflow-y: hidden;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 -1px 0 var(--color-border-primary-light);
box-shadow: inset 0 -1px 0 var(--color-border-secondary);
-webkit-overflow-scrolling: touch;
// Hide scrollbar so it doesn't cover the text
@ -257,7 +257,7 @@ $SelectMenu-max-height: 480px !default;
background-color: transparent;
border: 0;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 -1px 0 var(--color-border-primary-light);
box-shadow: inset 0 -1px 0 var(--color-border-secondary);
@include breakpoint(sm) {
flex: none;
@ -274,10 +274,10 @@ $SelectMenu-max-height: 480px !default;
cursor: default;
background-color: var(--color-bg-primary);
// stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 0 1px var(--color-border-primary-light);
box-shadow: 0 0 0 1px var(--color-border-secondary);
@include breakpoint(sm) {
border-color: var(--color-border-primary-light);
border-color: var(--color-border-secondary);
box-shadow: none;
}
}
@ -292,7 +292,7 @@ $SelectMenu-max-height: 480px !default;
padding: 7px $spacer-3;
text-align: center;
background-color: var(--color-bg-primary);
border-bottom: $border-width $border-style var(--color-border-primary-light);
border-bottom: $border-width $border-style var(--color-border-secondary);
}
// Blankslate and Loading
@ -317,11 +317,11 @@ $SelectMenu-max-height: 480px !default;
font-weight: $font-weight-semibold;
color: var(--color-text-tertiary);
background-color: var(--color-bg-secondary);
border-bottom: $border-width $border-style var(--color-border-primary-light);
border-bottom: $border-width $border-style var(--color-border-secondary);
// Borderless
.SelectMenu-list--borderless & {
border-top: $border-width $border-style var(--color-border-primary-light);
border-top: $border-width $border-style var(--color-border-secondary);
&:empty {
padding: 0;
@ -340,7 +340,7 @@ $SelectMenu-max-height: 480px !default;
font-size: $font-size-small;
color: var(--color-text-tertiary);
text-align: center;
border-top: $border-width $border-style var(--color-border-primary-light);
border-top: $border-width $border-style var(--color-border-secondary);
@include breakpoint(sm) {
// stylelint-disable-next-line primer/spacing

2
src/support/variables/colors.scss
View File

@ -13,7 +13,7 @@ $border-black-fade: $black-fade-15 !default;
$border-white-fade: $white-fade-15 !default;
$border-gray-dark: $gray-300 !default;
$border-gray-darker: $gray-700 !default;
$border-gray-light: var(--color-border-primary-light) !default; // lighten($gray-200, 3%)
$border-gray-light: var(--color-border-secondary) !default; // lighten($gray-200, 3%)
$border-gray: $gray-200 !default;
$border-blue: $blue-500 !default;
$border-blue-light: $blue-200 !default;

2
src/utilities/colors.scss
View File

@ -25,7 +25,6 @@
// Border colors
.border-primary { border-color: var(--color-border-primary) !important; }
.border-primary-light { border-color: var(--color-border-primary-light) !important; }
.border-secondary { border-color: var(--color-border-secondary) !important; }
.border-tertiary { border-color: var(--color-border-tertiary) !important; }
.border-inverse { border-color: var(--color-border-inverse) !important; }
@ -41,7 +40,6 @@
.bg-secondary { background-color: var(--color-bg-secondary) !important; }
.bg-tertiary { background-color: var(--color-bg-tertiary) !important; }
.bg-overlay { background-color: var(--color-bg-overlay) !important; }
.bg-selected { background-color: var(--color-bg-selected) !important; }
.bg-info { background-color: var(--color-bg-info) !important; }
.bg-info-inverse { background-color: var(--color-bg-info-inverse) !important; }
.bg-danger { background-color: var(--color-bg-danger) !important; }