diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss index 9fe124f4eb..5384ed0a83 100644 --- a/src/autocomplete/suggester.scss +++ b/src/autocomplete/suggester.scss @@ -12,7 +12,7 @@ list-style: none; cursor: pointer; background: var(--overlay-bgColor, var(--color-canvas-overlay)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style var(--borderColor-default, var(--color-border-default)); // stylelint-disable-next-line primer/borders border-radius: $border-radius; @@ -23,7 +23,7 @@ padding: var(--base-size-4) var(--base-size-8); // stylelint-disable-next-line primer/typography font-weight: $font-weight-semibold; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); small { diff --git a/src/base/base.scss b/src/base/base.scss index 404ada7e92..8d748ad404 100644 --- a/src/base/base.scss +++ b/src/base/base.scss @@ -61,7 +61,7 @@ hr, overflow: hidden; background: transparent; border: 0; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); @include clearfix(); diff --git a/src/base/kbd.scss b/src/base/kbd.scss index 9f8e28edf8..dc400a494c 100644 --- a/src/base/kbd.scss +++ b/src/base/kbd.scss @@ -11,7 +11,7 @@ kbd { color: var(--fgColor-default, var(--color-fg-default)); vertical-align: middle; background-color: var(--bgColor-muted, var(--color-canvas-subtle)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted)); border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted)); // stylelint-disable-next-line primer/borders diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 59d820e4ef..16f3652360 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -16,7 +16,7 @@ vertical-align: middle; cursor: pointer; user-select: none; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style; // stylelint-disable-next-line primer/borders border-radius: $border-radius; diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss index 5ac076b7b7..a8ca09a1bf 100644 --- a/src/buttons/misc.scss +++ b/src/buttons/misc.scss @@ -223,7 +223,7 @@ color: var(--fgColor-default, var(--color-fg-default)); vertical-align: middle; background-color: var(--bgColor-default, var(--color-canvas-default)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style var(--button-default-borderColor-rest, var(--color-btn-border)); border-left: 0; // stylelint-disable-next-line primer/borders diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index 083ece7ee6..7c2d60bec0 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -18,7 +18,7 @@ background-color: var(--bgColor-default, var(--color-canvas-default)); background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc) background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically. - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style var(--control-borderColor-rest, var(--color-border-default)); // stylelint-disable-next-line primer/borders border-radius: $border-radius; @@ -46,7 +46,7 @@ &.border-0 { &:focus, &:focus-visible { - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style var(--borderColor-accent-emphasis, var(--color-accent-fg)) !important; } } @@ -268,7 +268,7 @@ input::-webkit-inner-spin-button { font-size: $h5-size; color: var(--fgColor-attention, var(--color-attention-fg)); background: var(--bgColor-attention-muted, var(--color-attention-subtle)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style var(--borderColor-attention-emphasis, var(--color-attention-emphasis)); // stylelint-disable-next-line primer/borders border-radius: $border-radius; diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss index 5e159f421d..fc1b3c6266 100644 --- a/src/forms/form-group.scss +++ b/src/forms/form-group.scss @@ -198,7 +198,7 @@ height: 0; pointer-events: none; content: ' '; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-style transparent; } diff --git a/src/forms/radio-group.scss b/src/forms/radio-group.scss index e078582bb2..58887cd1b5 100644 --- a/src/forms/radio-group.scss +++ b/src/forms/radio-group.scss @@ -16,7 +16,7 @@ line-height: 20px; // Specifically not inherit our `` default color: var(--fgColor-default, var(--color-fg-default)); cursor: pointer; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style var(--borderColor-default, var(--color-border-default)); :checked + & { diff --git a/src/header/header.scss b/src/header/header.scss index a36e8646a0..8faec6abfe 100644 --- a/src/header/header.scss +++ b/src/header/header.scss @@ -40,7 +40,7 @@ .Header-input { color: var(--header-fgColor-default, var(--color-header-text)); background-color: var(--headerSearch-bgColor, var(--color-header-search-bg)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style var(--headerSearch-borderColor, var(--color-header-search-border)); box-shadow: none; diff --git a/src/labels/mixins.scss b/src/labels/mixins.scss index c33ba955fa..23c29cdc47 100644 --- a/src/labels/mixins.scss +++ b/src/labels/mixins.scss @@ -15,7 +15,7 @@ // stylelint-disable-next-line primer/typography line-height: 18px; white-space: nowrap; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style transparent; // stylelint-disable-next-line primer/borders border-radius: 2em; diff --git a/src/layout/app-frame.scss b/src/layout/app-frame.scss index f282d3723d..c10024d045 100644 --- a/src/layout/app-frame.scss +++ b/src/layout/app-frame.scss @@ -65,6 +65,7 @@ overflow: hidden; text-indent: var(--base-size-128, 128px); pointer-events: none; + // stylelint-disable-next-line primer/colors background: var(--borderColor-default, var(--color-border-default)); border-radius: var(--borderRadius-full, 100vh); } diff --git a/src/layout/page-layout.scss b/src/layout/page-layout.scss index ec62f92d47..5102145277 100644 --- a/src/layout/page-layout.scss +++ b/src/layout/page-layout.scss @@ -32,6 +32,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; width: calc(100% + (var(--Layout-outer-spacing-x) * 2)); height: 1px; content: ''; + // stylelint-disable-next-line primer/colors background-color: $Layout-divider-color; } @@ -77,7 +78,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; .PageLayout-header--hasDivider { // stylelint-disable-next-line primer/spacing padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-bottom: $border-width solid $Layout-divider-color; } @@ -86,7 +87,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; .PageLayout-footer--hasDivider { // stylelint-disable-next-line primer/spacing padding-top: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-top: $border-width solid $Layout-divider-color; } @@ -95,7 +96,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; &.PageLayout--hasPaneDivider { &.PageLayout--panePos-start { .PageLayout-pane { - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-right: $border-width solid $Layout-divider-color; } @@ -116,7 +117,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; &.PageLayout--panePos-end { .PageLayout-pane { - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-left: $border-width solid $Layout-divider-color; } diff --git a/src/markdown/footnotes.scss b/src/markdown/footnotes.scss index afde2d5c1b..acbede9c32 100644 --- a/src/markdown/footnotes.scss +++ b/src/markdown/footnotes.scss @@ -16,7 +16,7 @@ // stylelint-disable-next-line primer/typography font-size: $h6-size; color: var(--fgColor-muted, var(--color-fg-muted)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-top: $border; ol { @@ -41,7 +41,7 @@ left: calc(var(--base-size-24) * -1); pointer-events: none; content: ''; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: 2px $border-style var(--borderColor-accent-emphasis, var(--color-accent-emphasis)); // stylelint-disable-next-line primer/borders border-radius: $border-radius; diff --git a/src/markdown/headings.scss b/src/markdown/headings.scss index 309ffd4049..880ae57b95 100644 --- a/src/markdown/headings.scss +++ b/src/markdown/headings.scss @@ -43,7 +43,7 @@ padding-bottom: 0.3em; // stylelint-disable-next-line primer/typography font-size: 2em; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); } @@ -52,7 +52,7 @@ padding-bottom: 0.3em; // stylelint-disable-next-line primer/typography font-size: 1.5em; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); } diff --git a/src/markdown/images.scss b/src/markdown/images.scss index 7cc05513f0..878e3ece97 100644 --- a/src/markdown/images.scss +++ b/src/markdown/images.scss @@ -43,7 +43,7 @@ // stylelint-disable-next-line primer/spacing margin: 13px 0 0; overflow: hidden; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style var(--borderColor-default, var(--color-border-default)); } diff --git a/src/markdown/markdown-body.scss b/src/markdown/markdown-body.scss index 85e645744e..a53b36d417 100644 --- a/src/markdown/markdown-body.scss +++ b/src/markdown/markdown-body.scss @@ -78,6 +78,7 @@ height: $em-spacer-3; padding: 0; margin: var(--base-size-24) 0; + // stylelint-disable-next-line primer/colors background-color: var(--borderColor-default, var(--color-border-default)); border: 0; } @@ -86,7 +87,7 @@ // stylelint-disable-next-line primer/spacing padding: 0 1em; color: var(--fgColor-muted, var(--color-fg-muted)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-left: 0.25em $border-style var(--borderColor-default, var(--color-border-default)); > :first-child { diff --git a/src/markdown/tables.scss b/src/markdown/tables.scss index 245dfa4fe4..72e6635587 100644 --- a/src/markdown/tables.scss +++ b/src/markdown/tables.scss @@ -18,7 +18,7 @@ td { // stylelint-disable-next-line primer/spacing padding: 6px 13px; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style var(--borderColor-default, var(--color-border-default)); } @@ -30,7 +30,7 @@ tr { background-color: var(--bgColor-default, var(--color-canvas-default)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); &:nth-child(2n) { diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss index 80942ecf04..1f0daa31c8 100644 --- a/src/marketing/buttons/button.scss +++ b/src/marketing/buttons/button.scss @@ -10,13 +10,14 @@ font-weight: $font-weight-bold; // stylelint-disable-next-line primer/typography line-height: 1; + // stylelint-disable-next-line primer/colors color: var(--bgColor-default, var(--color-canvas-default)); text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; background: - linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%), + linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%), // stylelint-disable-line primer/colors var(--color-mktg-btn-bg) !important; border: 0; // stylelint-disable-next-line primer/borders diff --git a/src/marketing/links/link.scss b/src/marketing/links/link.scss index e8f9757097..b38a5f0c63 100644 --- a/src/marketing/links/link.scss +++ b/src/marketing/links/link.scss @@ -16,7 +16,6 @@ height: 2px; pointer-events: none; content: ''; - // stylelint-disable-next-line primer/colors background-color: currentColor; transform: scaleX(0); transform-origin: 0 0; diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss index ecdd7f5ac3..33e7da1931 100644 --- a/src/navigation/sidenav.scss +++ b/src/navigation/sidenav.scss @@ -16,7 +16,7 @@ text-align: left; background-color: transparent; border: 0; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); &:first-child { @@ -59,6 +59,7 @@ // Bar on the left &::before { + // stylelint-disable-next-line primer/colors background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active)); } } diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss index 2d5a9f1270..7992fef6d0 100644 --- a/src/navigation/subnav.scss +++ b/src/navigation/subnav.scss @@ -12,7 +12,7 @@ .subnav-bordered { // stylelint-disable-next-line primer/spacing padding-bottom: 20px; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); } @@ -30,7 +30,7 @@ // stylelint-disable-next-line primer/typography line-height: 20px; color: var(--fgColor-default, var(--color-fg-default)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style var(--control-borderColor-rest, var(--color-border-default)); + .subnav-item { diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss index 789aad82e7..feffbfec48 100644 --- a/src/pagination/pagination.scss +++ b/src/pagination/pagination.scss @@ -16,7 +16,7 @@ vertical-align: middle; cursor: pointer; user-select: none; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style transparent; // stylelint-disable-next-line primer/borders border-radius: $border-radius; @@ -68,7 +68,6 @@ height: 16px; vertical-align: text-bottom; content: ''; - // stylelint-disable-next-line primer/colors background-color: currentColor; } diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index 6622ecfe8d..f600679541 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -62,7 +62,7 @@ $SelectMenu-max-height: 480px !default; pointer-events: auto; flex-direction: column; background-color: var(--overlay-bgColor, var(--color-canvas-overlay)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border)); // stylelint-disable-next-line primer/borders border-radius: $border-radius * 2; @@ -107,7 +107,7 @@ $SelectMenu-max-height: 480px !default; padding: var(--base-size-16); flex: none; // fixes header from getting squeezed in Safari iOS align-items: center; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); @include breakpoint(sm) { @@ -151,7 +151,7 @@ $SelectMenu-max-height: 480px !default; .SelectMenu-filter { padding: var(--base-size-16); margin: 0; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); @include breakpoint(sm) { @@ -201,7 +201,7 @@ $SelectMenu-max-height: 480px !default; cursor: pointer; background-color: var(--overlay-bgColor, var(--color-canvas-overlay)); border: 0; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); @include breakpoint(sm) { @@ -274,7 +274,7 @@ $SelectMenu-max-height: 480px !default; @include breakpoint(sm) { flex: none; padding: var(--base-size-4) var(--base-size-16); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style transparent; border-bottom-width: 0; // stylelint-disable-next-line primer/borders @@ -307,7 +307,7 @@ $SelectMenu-max-height: 480px !default; padding: 7px var(--base-size-16); text-align: center; background-color: var(--overlay-bgColor, var(--color-canvas-overlay)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); } @@ -335,12 +335,12 @@ $SelectMenu-max-height: 480px !default; font-weight: $font-weight-semibold; color: var(--fgColor-muted, var(--color-fg-muted)); background-color: var(--bgColor-muted, var(--color-canvas-subtle)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); // Borderless .SelectMenu-list--borderless & { - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); &:empty { @@ -361,7 +361,7 @@ $SelectMenu-max-height: 480px !default; font-size: $font-size-small; color: var(--fgColor-muted, var(--color-fg-muted)); text-align: center; - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); @include breakpoint(sm) { diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss index 01c10c0527..ecf3c453e6 100644 --- a/src/support/mixins/misc.scss +++ b/src/support/mixins/misc.scss @@ -23,6 +23,7 @@ } &::before { + // stylelint-disable-next-line primer/colors background-color: $border; } } @@ -31,6 +32,7 @@ // inset box-shadow for form controls @mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) { + // stylelint-disable-next-line primer/colors border-color: var(--focus-outlineColor, var(--color-accent-fg)); outline: none; // stylelint-disable-next-line primer/box-shadow diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index a5799207d6..b95db0e735 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -24,7 +24,7 @@ flex-shrink: 0; color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)); - // stylelint-disable-next-line primer/borders + // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style transparent; border-right: 0; border-top-left-radius: inherit; diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss index 849eee3732..4056b46715 100644 --- a/src/utilities/borders.scss +++ b/src/utilities/borders.scss @@ -3,13 +3,17 @@ /* Add a gray border to the left and right */ .border-x { + // stylelint-disable-next-line primer/colors border-right: $border-rem !important; + // stylelint-disable-next-line primer/colors border-left: $border-rem !important; } /* Add a gray border to the top and bottom */ .border-y { + // stylelint-disable-next-line primer/colors border-top: $border-rem !important; + // stylelint-disable-next-line primer/colors border-bottom: $border-rem !important; } @@ -17,12 +21,17 @@ @each $breakpoint, $variant in $responsive-variants { @include breakpoint($breakpoint) { /* Add a gray border on all sides at/above this breakpoint */ + // stylelint-disable-next-line primer/colors .border#{$variant} { border: $border-rem !important; } .border#{$variant}-0 { border: 0 !important; } + // stylelint-disable-next-line primer/colors .border#{$variant}-top { border-top: $border-rem !important; } + // stylelint-disable-next-line primer/colors .border#{$variant}-right { border-right: $border-rem !important; } + // stylelint-disable-next-line primer/colors .border#{$variant}-bottom { border-bottom: $border-rem !important; } + // stylelint-disable-next-line primer/colors .border#{$variant}-left { border-left: $border-rem !important; } .border#{$variant}-top-0 { border-top: 0 !important; }