From 1e65033616d6347fccd3182ab3eb273a73e9866d Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Wed, 5 Feb 2025 11:44:39 -0800 Subject: [PATCH] swapsies --- .vscode/extensions.json | 5 ++ .vscode/settings.json | 27 ++++++++ src/autocomplete/suggester.scss | 27 +++----- src/avatars/avatar-parent-child.scss | 3 +- src/avatars/circle-badge.scss | 3 +- src/base/base.scss | 17 ++--- src/base/kbd.scss | 14 ++-- src/base/normalize.scss | 4 +- src/base/typography-base.scss | 17 ++--- src/box/box-overlay.scss | 9 +-- src/branch-name/branch-name.scss | 12 ++-- src/buttons/button-group.scss | 36 ++++------ src/buttons/button.scss | 35 +++------- src/buttons/misc.scss | 53 +++++---------- src/forms/form-control.scss | 96 +++++++++------------------ src/forms/form-group.scss | 47 ++++--------- src/forms/form-select.scss | 9 +-- src/forms/input-group.scss | 2 - src/forms/radio-group.scss | 24 ++----- src/header/header.scss | 12 ++-- src/labels/issue-labels.scss | 5 +- src/labels/mixins.scss | 19 ++---- src/layout/page-layout.scss | 36 ++-------- src/markdown/blob-csv.scss | 15 ++--- src/markdown/code.scss | 12 +--- src/markdown/footnotes.scss | 14 ++-- src/markdown/headings.scss | 22 ++---- src/markdown/images.scss | 36 ++++------ src/markdown/lists.scss | 6 +- src/markdown/markdown-body.scss | 22 +++--- src/markdown/tables.scss | 12 ++-- src/marketing/buttons/button.scss | 22 ++---- src/marketing/links/link.scss | 2 - src/marketing/support/variables.scss | 2 +- src/marketing/type/typography.scss | 45 ++++--------- src/marketing/utilities/layout.scss | 18 ++--- src/navigation/filter-list.scss | 15 ++--- src/navigation/sidenav.scss | 11 ++- src/navigation/subnav.scss | 42 ++++-------- src/pagination/pagination.scss | 10 +-- src/select-menu/select-menu.scss | 89 ++++++++----------------- src/support/mixins/misc.scss | 6 +- src/support/mixins/typography.scss | 42 ++++-------- src/support/variables/typography.scss | 2 +- src/toasts/toasts.scss | 6 +- src/tooltips/tooltips.scss | 1 - src/utilities/typography.scss | 33 +++++---- 47 files changed, 345 insertions(+), 652 deletions(-) create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000000..3b5fba31c9 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": ["phoenisx.cssvar"], + // List of extensions recommended by VS Code that should not be recommended for users of this workspace. + "unwantedRecommendations": [] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..d0f3cc0d92 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,27 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib", + "editor.formatOnSave": true, + "[postcss]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.stylelint": "explicit" + } + }, + "stylelint.validate": [ + "css", + "scss" + ], + "cssvar.ignore": [ + // exclude all but light theme, to avoid stacking suggestions + "node_modules/@primer/primitives/dist/css/functional/themes/dark-colorblind.css", + "node_modules/@primer/primitives/dist/css/functional/themes/dark-dimmed.css", + "node_modules/@primer/primitives/dist/css/functional/themes/dark-high-contrast.css", + "node_modules/@primer/primitives/dist/css/functional/themes/dark-tritanopia.css", + "node_modules/@primer/primitives/dist/css/functional/themes/dark.css", + "node_modules/@primer/primitives/dist/css/functional/themes/light-colorblind.css", + "node_modules/@primer/primitives/dist/css/functional/themes/light-high-contrast.css", + "node_modules/@primer/primitives/dist/css/functional/themes/light-tritanopia.css" + ], + "cssvar.files": ["node_modules/@primer/primitives/dist/css/**/*.css"] +} diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss index 5384ed0a83..8425556f36 100644 --- a/src/autocomplete/suggester.scss +++ b/src/autocomplete/suggester.scss @@ -12,39 +12,30 @@ list-style: none; cursor: pointer; background: var(--overlay-bgColor, var(--color-canvas-overlay)); - // 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; + border: var(--borderWidth-default) solid var(--borderColor-default, var(--color-border-default)); + border-radius: var(--borderRadius-default); box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)); li { display: block; 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, primer/colors - border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + font-weight: var(--base-text-weight-light); + border-bottom: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); small { - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-normal; + font-weight: var(--base-text-weight-light); color: var(--fgColor-muted, var(--color-fg-muted)); } &:last-child { border-bottom: 0; - // stylelint-disable-next-line primer/borders - border-bottom-right-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-bottom-left-radius: $border-radius; + border-bottom-right-radius: var(--borderRadius-default); + border-bottom-left-radius: var(--borderRadius-default); } &:first-child { - // stylelint-disable-next-line primer/borders - border-top-left-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-top-right-radius: $border-radius; + border-top-left-radius: var(--borderRadius-default); + border-top-right-radius: var(--borderRadius-default); } &:hover { diff --git a/src/avatars/avatar-parent-child.scss b/src/avatars/avatar-parent-child.scss index 01a5c7127e..6c045d930e 100644 --- a/src/avatars/avatar-parent-child.scss +++ b/src/avatars/avatar-parent-child.scss @@ -11,7 +11,6 @@ right: -15%; bottom: -9%; background-color: var(--bgColor-default, var(--color-canvas-default)); // For transparent backgrounds - // stylelint-disable-next-line primer/borders - border-radius: $border-radius-1; + border-radius: var(--borderRadius-default);; box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow)); } diff --git a/src/avatars/circle-badge.scss b/src/avatars/circle-badge.scss index 63032cfb63..6b871b2258 100644 --- a/src/avatars/circle-badge.scss +++ b/src/avatars/circle-badge.scss @@ -45,8 +45,7 @@ left: 0; width: 100%; content: ''; - // stylelint-disable-next-line primer/borders - border-bottom: 2px dashed var(--borderColor-default, var(--color-border-default)); + border-bottom: var(--borderWidth-thick) dashed var(--borderColor-default, var(--color-border-default)); } .CircleBadge { diff --git a/src/base/base.scss b/src/base/base.scss index 8d748ad404..dfa09b101b 100644 --- a/src/base/base.scss +++ b/src/base/base.scss @@ -13,9 +13,9 @@ button { } body { - font-family: $body-font; - font-size: var(--body-font-size, $body-font-size); - line-height: $body-line-height; + font-family: var(--fontStack-sansSerif); + font-size: var(--body-font-size); + line-height: 1.5; color: var(--fgColor-default, var(--color-fg-default)); background-color: var(--bgColor-default, var(--color-canvas-default)); } @@ -31,7 +31,7 @@ a { b, strong { - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-semibold); } fieldset { @@ -41,7 +41,7 @@ fieldset { } label { - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-semibold); } // Custom styling for HTML5 validation bubbles (WebKit only) @@ -56,13 +56,11 @@ label { hr, .rule { height: 0; - // stylelint-disable-next-line primer/spacing - margin: 15px 0; + margin: var(--base-size-16) 0; overflow: hidden; background: transparent; border: 0; - // stylelint-disable-next-line primer/borders, primer/colors - border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-bottom: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); @include clearfix(); } @@ -73,7 +71,6 @@ hr, table { border-spacing: 0; - // stylelint-disable-next-line primer/borders border-collapse: collapse; } diff --git a/src/base/kbd.scss b/src/base/kbd.scss index 23ce3bc647..b5a582f3ce 100644 --- a/src/base/kbd.scss +++ b/src/base/kbd.scss @@ -4,18 +4,18 @@ kbd { display: inline-block; padding: var(--base-size-4); - // stylelint-disable-next-line primer/typography, declaration-property-value-no-unknown - font: 11px $mono-font; - // stylelint-disable-next-line primer/typography + , declaration-property-value-no-unknown + font: 11px var(--fontStack-monospace); + line-height: 10px; 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, primer/colors - border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted)); + + border: $border-style var(--borderWidth-default) 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 - border-radius: $border-radius; + + border-radius: var(--borderRadius-default); // stylelint-disable-next-line primer/box-shadow box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted)); } diff --git a/src/base/normalize.scss b/src/base/normalize.scss index 84eaa33891..a8525baccd 100644 --- a/src/base/normalize.scss +++ b/src/base/normalize.scss @@ -261,7 +261,7 @@ textarea { */ optgroup { - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-semibold); } /** @@ -304,7 +304,7 @@ html [type="button"], /* 1 */ */ fieldset { - border: $border-width $border-style #c0c0c0; + border: var(--borderWidth-default) solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em $em-spacer-6; } diff --git a/src/base/typography-base.scss b/src/base/typography-base.scss index 371921337d..0cb8473565 100644 --- a/src/base/typography-base.scss +++ b/src/base/typography-base.scss @@ -23,12 +23,13 @@ h6 { @include h6; } p { margin-top: 0; - // stylelint-disable-next-line primer/spacing + + /* stylelint-disable-next-line primer/spacing */ margin-bottom: 10px; } small { - // stylelint-disable-next-line primer/typography + /* stylelint-disable-next-line primer/typography */ font-size: 90%; } @@ -68,19 +69,15 @@ dd { tt, code, samp { - // stylelint-disable-next-line primer/typography - font-family: $mono-font; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; + font-family: var(--fontStack-monospace); + font-size: var(--text-body-size-small); } pre { margin-top: 0; margin-bottom: 0; - // stylelint-disable-next-line primer/typography - font-family: $mono-font; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; + font-family: var(--fontStack-monospace); + font-size: var(--text-body-size-small); } // Octicons diff --git a/src/box/box-overlay.scss b/src/box/box-overlay.scss index dbf2356d4b..d827f4ebb8 100644 --- a/src/box/box-overlay.scss +++ b/src/box/box-overlay.scss @@ -12,12 +12,9 @@ .Box-header { margin: 0; border-width: 0; - // stylelint-disable-next-line primer/borders - border-bottom-width: $border-width; - // stylelint-disable-next-line primer/borders - border-top-left-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-top-right-radius: $border-radius; + border-bottom-width: var(--borderWidth-default); + border-top-left-radius: var(--borderRadius-default); + border-top-right-radius: var(--borderRadius-default); } } diff --git a/src/branch-name/branch-name.scss b/src/branch-name/branch-name.scss index ce0d469ea3..906e417aea 100644 --- a/src/branch-name/branch-name.scss +++ b/src/branch-name/branch-name.scss @@ -4,18 +4,18 @@ .branch-name { display: inline-block; - // stylelint-disable-next-line primer/spacing + padding: 2px 6px; - // stylelint-disable-next-line primer/typography, declaration-property-value-no-unknown - font: 12px $mono-font; + , declaration-property-value-no-unknown + font: 12px var(--fontStack-monospace); color: var(--fgColor-muted, var(--color-fg-muted)); word-break: break-all; background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)); - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + + border-radius: var(--borderRadius-default); .octicon { - // stylelint-disable-next-line primer/spacing + margin: 1px -2px 0 0; color: var(--fgColor-muted, var(--color-fg-muted)); } diff --git a/src/buttons/button-group.scss b/src/buttons/button-group.scss index cb162735c4..c1dd61ecc3 100644 --- a/src/buttons/button-group.scss +++ b/src/buttons/button-group.scss @@ -23,19 +23,14 @@ border-radius: 0; &:first-child { - // stylelint-disable-next-line primer/borders - border-top-left-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-bottom-left-radius: $border-radius; + border-top-left-radius: var(--borderRadius-default); + border-bottom-left-radius: var(--borderRadius-default); } &:last-child { - // stylelint-disable-next-line primer/borders - border-right-width: $border-width; - // stylelint-disable-next-line primer/borders - border-top-right-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-bottom-right-radius: $border-radius; + border-right-width: var(--borderWidth-default); + border-top-right-radius: var(--borderRadius-default); + border-bottom-right-radius: var(--borderRadius-default); } &.selected, @@ -43,8 +38,7 @@ &:focus, &:active, &:hover { - // stylelint-disable-next-line primer/borders - border-right-width: $border-width; + border-right-width: var(--borderWidth-default); + .BtnGroup-item, + .BtnGroup-parent .BtnGroup-item { @@ -57,19 +51,14 @@ float: left; &:first-child .BtnGroup-item { - // stylelint-disable-next-line primer/borders - border-top-left-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-bottom-left-radius: $border-radius; + border-top-left-radius: var(--borderRadius-default); + border-bottom-left-radius: var(--borderRadius-default); } &:last-child .BtnGroup-item { - // stylelint-disable-next-line primer/borders - border-right-width: $border-width; - // stylelint-disable-next-line primer/borders - border-top-right-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-bottom-right-radius: $border-radius; + border-right-width: var(--borderWidth-default); + border-top-right-radius: var(--borderRadius-default); + border-bottom-right-radius: var(--borderRadius-default); } .BtnGroup-item { @@ -83,8 +72,7 @@ &:active, &:hover { .BtnGroup-item { - // stylelint-disable-next-line primer/borders - border-right-width: $border-width; + border-right-width: var(--borderWidth-default); } + .BtnGroup-item, diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 16f3652360..70e140a7dc 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -4,22 +4,16 @@ .btn { position: relative; display: inline-block; - // stylelint-disable-next-line primer/spacing - padding: 5px var(--base-size-16); - // stylelint-disable-next-line primer/typography - font-size: $body-font-size; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-semibold; - // stylelint-disable-next-line primer/typography + padding: var(--base-size-4) var(--base-size-16); + font-size: var(--body-font-size); + font-weight: var(--base-text-weight-light); line-height: 20px; // Specifically not inherit our `` default white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; - // stylelint-disable-next-line primer/borders, primer/colors - border: $border-width $border-style; - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + border: var(--borderWidth-default) solid; + border-radius: var(--borderRadius-default); appearance: none; // Corrects inability to style clickable `input` types in iOS. &:hover { @@ -34,8 +28,7 @@ i { font-style: normal; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-semibold; + font-weight: var(--base-text-weight-light); opacity: 0.75; } @@ -50,8 +43,7 @@ } .Counter { - // stylelint-disable-next-line primer/spacing - margin-left: 2px; + margin-left: var(--base-size-2); color: inherit; text-shadow: none; vertical-align: top; @@ -313,11 +305,8 @@ a.btn-primary { // // Tweak `line-height` to make them smaller. .btn-sm { - // stylelint-disable-next-line primer/spacing - padding: 3px 12px; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; - // stylelint-disable-next-line primer/typography + padding: var(--base-size-4) var(--base-size-12); + font-size: var(--text-body-size-small); line-height: 20px; .octicon { @@ -327,13 +316,9 @@ a.btn-primary { // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g,

.btn-large { - // stylelint-disable-next-line primer/spacing padding: $em-spacer-6 1.5em; font-size: inherit; - // stylelint-disable-next-line primer/typography - line-height: $lh-default; - - // stylelint-disable-next-line primer/borders + line-height: 1.5; border-radius: 0.5em; } diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss index a8ca09a1bf..c4e4737b1c 100644 --- a/src/buttons/misc.scss +++ b/src/buttons/misc.scss @@ -32,8 +32,7 @@ &:not(.dropdown-item) { &:focus, &:focus-visible { - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + border-radius: var(--borderRadius-default); outline-offset: 0; } } @@ -46,8 +45,7 @@ color: var(--fgColor-accent, var(--color-accent-fg)); background-color: transparent; // Reset default gradient backgrounds and colors border: 0; - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + border-radius: var(--borderRadius-default); box-shadow: none; &:hover, @@ -86,12 +84,9 @@ // Icon-only buttons .btn-octicon { display: inline-block; - // stylelint-disable-next-line primer/spacing - padding: 5px; - // stylelint-disable-next-line primer/spacing - margin-left: 5px; - // stylelint-disable-next-line primer/typography - line-height: $lh-condensed-ultra; + padding: var(--base-size-4); + margin-left: var(--base-size-4); + line-height: 1; color: var(--fgColor-muted, var(--color-fg-muted)); vertical-align: middle; @@ -106,8 +101,7 @@ &:focus, &:focus-visible { - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + border-radius: var(--borderRadius-default); } &.disabled, @@ -151,12 +145,9 @@ &.inline { position: relative; - // stylelint-disable-next-line primer/spacing top: -1px; display: inline-block; - // stylelint-disable-next-line primer/spacing - margin-left: 5px; - // stylelint-disable-next-line primer/typography + margin-left: var(--base-size-4); line-height: 0; } } @@ -165,20 +156,15 @@ .ellipsis-expander { display: inline-block; height: 12px; - // stylelint-disable-next-line primer/spacing - padding: 0 5px 5px; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; - // stylelint-disable-next-line primer/typography + padding: 0 var(--base-size-4) var(--base-size-4); + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-light); line-height: 6px; color: var(--fgColor-default, var(--color-fg-default)); text-decoration: none; vertical-align: middle; background: var(--bgColor-neutral-muted, var(--color-neutral-muted)); border: 0; - // stylelint-disable-next-line primer/borders border-radius: 1px; &:hover { @@ -212,24 +198,17 @@ .social-count { position: relative; float: left; - // stylelint-disable-next-line primer/spacing - padding: 3px 12px; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; - // stylelint-disable-next-line primer/typography + padding: var(--base-size-4) var(--base-size-12); + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-light); line-height: 20px; 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, primer/colors - border: $border-width $border-style var(--button-default-borderColor-rest, var(--color-btn-border)); + border: var(--borderWidth-default) solid var(--button-default-borderColor-rest, var(--color-btn-border)); border-left: 0; - // stylelint-disable-next-line primer/borders - border-top-right-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-bottom-right-radius: $border-radius; + border-top-right-radius: var(--borderRadius-default); + border-bottom-right-radius: var(--borderRadius-default); box-shadow: var(--shadow-resting-small, var(--color-shadow-small)), var(--shadow-highlight, var(--color-primer-shadow-highlight)); &:hover, diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index 7c2d60bec0..812032babc 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -7,21 +7,16 @@ .form-control, .form-select { - // stylelint-disable-next-line primer/spacing - padding: 5px 12px; - // stylelint-disable-next-line primer/typography - font-size: $body-font-size; - // stylelint-disable-next-line primer/typography + padding: var(--base-size-4) var(--base-size-12); + font-size: var(--body-font-size); line-height: 20px; color: var(--fgColor-default, var(--color-fg-default)); vertical-align: middle; 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, 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; + border: var(--borderWidth-default) solid var(--control-borderColor-rest, var(--color-border-default)); + border-radius: var(--borderRadius-default); box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset)); transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); transition-property: color, background-color, box-shadow, border-color; @@ -46,8 +41,7 @@ &.border-0 { &:focus, &:focus-visible { - // stylelint-disable-next-line primer/borders, primer/colors - border: $border-width $border-style var(--borderColor-accent-emphasis, var(--color-accent-fg)) !important; + border: var(--borderWidth-default) solid var(--borderColor-accent-emphasis, var(--color-accent-fg)) !important; } } @@ -66,12 +60,10 @@ // Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad @supports (-webkit-touch-callout: none) { - // stylelint-disable-next-line primer/typography - font-size: $h4-size; + font-size: var(--h4-size); @include breakpoint(md) { - // stylelint-disable-next-line primer/typography - font-size: $body-font-size; + font-size: var(--body-font-size); } } } @@ -80,8 +72,7 @@ textarea.form-control { padding-top: var(--base-size-8); padding-bottom: var(--base-size-8); - // stylelint-disable-next-line primer/typography - line-height: $lh-default; + line-height: 1.5; } // Inputs with contrast for easy light gray backgrounds against white. @@ -96,20 +87,15 @@ textarea.form-control { // Mini inputs, to match .minibutton .input-sm { min-height: $size-4; - // stylelint-disable-next-line primer/spacing - padding-top: 3px; - // stylelint-disable-next-line primer/spacing - padding-bottom: 3px; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; - // stylelint-disable-next-line primer/typography + padding-top: var(--base-size-4); + padding-bottom: var(--base-size-4); + font-size: var(--text-body-size-small); line-height: 20px; } // Large inputs .input-lg { - // stylelint-disable-next-line primer/typography - font-size: $h4-size; + font-size: var(--h4-size); } // Full-width inputs @@ -120,8 +106,7 @@ textarea.form-control { // Inputs with monospace text .input-monospace { - // stylelint-disable-next-line primer/typography - font-family: $mono-font; + font-family: var(--fontStack-monospace); } // Hide the icon that tries to autofill contact info in webkit @@ -139,40 +124,33 @@ textarea.form-control { // // For checkboxes and radio button selections. .form-checkbox { - // stylelint-disable-next-line primer/spacing - padding-left: 20px; - // stylelint-disable-next-line primer/spacing - margin: 15px 0; + padding-left: var(--base-size-20); + margin: var(--base-size-16) 0; vertical-align: middle; label { em.highlight { position: relative; left: calc(var(--base-size-4) * -1); - // stylelint-disable-next-line primer/spacing - padding: 2px var(--base-size-4); + padding: var(--base-size-2) var(--base-size-4); font-style: normal; background: var(--bgColor-attention-muted, var(--color-attention-subtle)); - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + border-radius: var(--borderRadius-default); } } input[type='checkbox'], input[type='radio'] { float: left; - // stylelint-disable-next-line primer/spacing - margin: 5px 0 0 -20px; + margin: var(--base-size-4) 0 0 -20px; vertical-align: middle; } .note { display: block; margin: 0; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-normal; + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-light); color: var(--fgColor-muted, var(--color-fg-muted)); } } @@ -196,28 +174,24 @@ textarea.form-control { // Wrap field groups in `` to lay them out horizontally - great for // the top of pages with autosave. .hfields { - // stylelint-disable-next-line primer/spacing - margin: 15px 0; + margin: var(--base-size-16) 0; @include clearfix; .form-group { float: left; - // stylelint-disable-next-line primer/spacing margin: 0 30px 0 0; dt, // TODO: Deprecate .form-group-header { label { display: inline-block; - // stylelint-disable-next-line primer/spacing - margin: 5px 0 0; + margin: var(--base-size-4) 0 0; color: var(--fgColor-muted, var(--color-fg-muted)); } img { position: relative; - // stylelint-disable-next-line primer/spacing top: -2px; } } @@ -225,13 +199,11 @@ textarea.form-control { .btn { float: left; - // stylelint-disable-next-line primer/spacing - margin: 28px 25px 0 -20px; + margin: var(--base-size-28) var(--base-size-24) 0 -20px; } .form-select { - // stylelint-disable-next-line primer/spacing - margin-top: 5px; + margin-top: var(--base-size-4); } } @@ -253,34 +225,26 @@ input::-webkit-inner-spin-button { float: right; + .btn { - // stylelint-disable-next-line primer/spacing - margin-right: 5px; + margin-right: var(--base-size-4); } } } .form-warning { - // stylelint-disable-next-line primer/spacing padding: var(--base-size-8) 10px; - // stylelint-disable-next-line primer/spacing margin: 10px 0; - // stylelint-disable-next-line primer/typography - font-size: $h5-size; + font-size: var(--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, 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; + border: var(--borderWidth-default) solid var(--borderColor-attention-emphasis, var(--color-attention-emphasis)); + border-radius: var(--borderRadius-default); p { margin: 0; - // stylelint-disable-next-line primer/typography - line-height: $lh-default; + line-height: 1.5; } a { - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-light); } } diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss index fc1b3c6266..780b62abad 100644 --- a/src/forms/form-group.scss +++ b/src/forms/form-group.scss @@ -11,8 +11,7 @@ // .form-group { - // stylelint-disable-next-line primer/spacing - margin: 15px 0; + margin: var(--base-size-16) 0; // Autocomplete with embedded icon .form-control.autocomplete-embedded-icon-wrap { @@ -26,8 +25,7 @@ // stylelint-disable-next-line primer/responsive-widths width: 440px; max-width: 100%; - // stylelint-disable-next-line primer/spacing - margin-right: 5px; + margin-right: var(--base-size-4); background-color: var(--bgColor-muted, var(--color-canvas-inset)); &:focus { @@ -65,8 +63,7 @@ // The Label dt, // TODO: Deprecate .form-group-header { - // stylelint-disable-next-line primer/spacing - margin: 0 0 6px; + margin: 0 0 var(--base-size-6); } label { @@ -78,13 +75,11 @@ &.flattened .form-group-header { float: left; margin: 0; - // stylelint-disable-next-line primer/typography line-height: 32px; } &.flattened dd, // TODO: Deprecate &.flattened .form-group-body { - // stylelint-disable-next-line primer/typography line-height: 32px; } @@ -119,8 +114,7 @@ &.required { dt label::after, // TODO: Deprecate .form-group-header label::after { - // stylelint-disable-next-line primer/spacing - padding-left: 5px; + padding-left: var(--base-size-4); color: var(--fgColor-danger, var(--color-danger-fg)); content: '*'; } @@ -134,10 +128,8 @@ .error, .indicator { display: none; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-light); } &.loading { @@ -176,41 +168,31 @@ max-width: 450px; // Keep our long errors readable padding: var(--base-size-4) var(--base-size-8); margin: var(--base-size-8) 0 0; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-normal; - // stylelint-disable-next-line primer/borders + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-light); border-style: $border-style; - // stylelint-disable-next-line primer/borders - border-width: $border-width; - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + border-width: var(--borderWidth-default); + border-radius: var(--borderRadius-default); &::after, &::before { position: absolute; bottom: 100%; - // stylelint-disable-next-line primer/spacing left: 10px; z-index: 15; width: 0; height: 0; pointer-events: none; content: ' '; - // stylelint-disable-next-line primer/borders, primer/colors border: $border-style transparent; } &::after { - // stylelint-disable-next-line primer/borders border-width: 5px; } &::before { - // stylelint-disable-next-line primer/spacing margin-left: -1px; - // stylelint-disable-next-line primer/borders border-width: 6px; } } @@ -283,15 +265,12 @@ // tooltip .note { min-height: 17px; - // stylelint-disable-next-line primer/spacing - margin: var(--base-size-4) 0 2px; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; + margin: var(--base-size-4) 0 var(--base-size-2); + font-size: var(--text-body-size-small); color: var(--fgColor-muted, var(--color-fg-muted)); .spinner { - // stylelint-disable-next-line primer/spacing - margin-right: 3px; + margin-right: var(--base-size-4); vertical-align: middle; } } diff --git a/src/forms/form-select.scss b/src/forms/form-select.scss index 3b75967dd8..dfe16c8ac6 100644 --- a/src/forms/form-select.scss +++ b/src/forms/form-select.scss @@ -33,12 +33,9 @@ .select-sm { height: $size-4; - // stylelint-disable-next-line primer/spacing - padding-top: 3px; - // stylelint-disable-next-line primer/spacing - padding-bottom: 3px; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; + padding-top: var(--base-size-4); + padding-bottom: var(--base-size-4); + font-size: var(--text-body-size-small); &[multiple] { height: auto; diff --git a/src/forms/input-group.scss b/src/forms/input-group.scss index b104e193d8..d33cd53dcf 100644 --- a/src/forms/input-group.scss +++ b/src/forms/input-group.scss @@ -60,7 +60,6 @@ } .input-group-button:first-child .btn { - // stylelint-disable-next-line primer/spacing margin-right: -1px; } @@ -76,6 +75,5 @@ } .input-group-button:last-child .btn { - // stylelint-disable-next-line primer/spacing margin-left: -1px; } diff --git a/src/forms/radio-group.scss b/src/forms/radio-group.scss index 58887cd1b5..4449756e22 100644 --- a/src/forms/radio-group.scss +++ b/src/forms/radio-group.scss @@ -6,18 +6,13 @@ .radio-label { float: left; - // stylelint-disable-next-line primer/spacing - padding: 6px var(--base-size-16) 6px calc(var(--base-size-16) + 12px + var(--base-size-8)); // 12px is the size of the radio-input - // stylelint-disable-next-line primer/spacing + padding: var(--base-size-6) var(--base-size-16) var(--base-size-6) calc(var(--base-size-16) + var(--base-size-12) + var(--base-size-8)); // 12px is the size of the radio-input margin-left: -1px; - // stylelint-disable-next-line primer/typography - font-size: $body-font-size; - // stylelint-disable-next-line primer/typography + font-size: var(--body-font-size); line-height: 20px; // Specifically not inherit our `` default color: var(--fgColor-default, var(--color-fg-default)); cursor: pointer; - // stylelint-disable-next-line primer/borders, primer/colors - border: $border-width $border-style var(--borderColor-default, var(--color-border-default)); + border: var(--borderWidth-default) solid var(--borderColor-default, var(--color-border-default)); :checked + & { position: relative; @@ -27,17 +22,13 @@ &:first-of-type { margin-left: 0; - // stylelint-disable-next-line primer/borders - border-top-left-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-bottom-left-radius: $border-radius; + border-top-left-radius: var(--borderRadius-default); + border-bottom-left-radius: var(--borderRadius-default); } &:last-of-type { - // stylelint-disable-next-line primer/borders - border-top-right-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-bottom-right-radius: $border-radius; + border-top-right-radius: var(--borderRadius-default); + border-bottom-right-radius: var(--borderRadius-default); } .octicon { @@ -49,7 +40,6 @@ .radio-input { z-index: 3; float: left; - // stylelint-disable-next-line primer/spacing margin: 10px calc(var(--base-size-32) * -1) 0 var(--base-size-16); &:disabled { diff --git a/src/header/header.scss b/src/header/header.scss index 8faec6abfe..3fce222666 100644 --- a/src/header/header.scss +++ b/src/header/header.scss @@ -2,10 +2,8 @@ z-index: 32; // TODO: Figure out z-index system display: flex; padding: var(--base-size-16); - // stylelint-disable-next-line primer/typography - font-size: $h5-size; - // stylelint-disable-next-line primer/typography - line-height: $lh-default; + font-size: var(--h5-size); + line-height: 1.5; color: var(--header-fgColor-default, var(--color-header-text)); background-color: var(--header-bgColor, var(--color-header-bg)); align-items: center; @@ -25,8 +23,7 @@ } .Header-link { - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-light); color: var(--header-fgColor-logo, var(--color-header-logo)); white-space: nowrap; @@ -40,8 +37,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, primer/colors - border: $border-width $border-style var(--headerSearch-borderColor, var(--color-header-search-border)); + border: var(--borderWidth-default) solid var(--headerSearch-borderColor, var(--color-header-search-border)); box-shadow: none; &::placeholder { diff --git a/src/labels/issue-labels.scss b/src/labels/issue-labels.scss index c99700661f..ae968e1669 100644 --- a/src/labels/issue-labels.scss +++ b/src/labels/issue-labels.scss @@ -7,13 +7,10 @@ .g-emoji { position: relative; - // stylelint-disable-next-line primer/spacing top: -0.05em; display: inline-block; - // stylelint-disable-next-line primer/typography font-size: 1em; - // stylelint-disable-next-line primer/typography - line-height: $lh-condensed-ultra; + line-height: 1; } &:hover { diff --git a/src/labels/mixins.scss b/src/labels/mixins.scss index 23c29cdc47..bb7d48cdb9 100644 --- a/src/labels/mixins.scss +++ b/src/labels/mixins.scss @@ -6,27 +6,18 @@ @mixin labels-base { display: inline-block; - // stylelint-disable-next-line primer/spacing - padding: 0 7px; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-semibold; - // stylelint-disable-next-line primer/typography + padding: 0 var(--base-size-8); + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-light); line-height: 18px; white-space: nowrap; - // stylelint-disable-next-line primer/borders, primer/colors - border: $border-width $border-style transparent; - // stylelint-disable-next-line primer/borders + border: var(--borderWidth-default) solid transparent; border-radius: 2em; } @mixin labels-large { - // stylelint-disable-next-line primer/spacing padding-right: 10px; - // stylelint-disable-next-line primer/spacing padding-left: 10px; - // stylelint-disable-next-line primer/typography line-height: 22px; } @@ -37,8 +28,6 @@ @mixin labels--inline { display: inline; - // stylelint-disable-next-line primer/spacing padding: 0.12em $em-spacer-5; - // stylelint-disable-next-line primer/typography font-size: 85%; } diff --git a/src/layout/page-layout.scss b/src/layout/page-layout.scss index 5102145277..101374388c 100644 --- a/src/layout/page-layout.scss +++ b/src/layout/page-layout.scss @@ -26,7 +26,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; @mixin Layout-line-divider { position: absolute; - // stylelint-disable-next-line primer/spacing left: calc(var(--Layout-outer-spacing-x) * -1); display: block; width: calc(100% + (var(--Layout-outer-spacing-x) * 2)); @@ -39,7 +38,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; @mixin Layout-filled-divider { position: absolute; bottom: calc(var(--base-size-8) * -1); - // stylelint-disable-next-line primer/spacing left: calc(var(--Layout-outer-spacing-x) * -1); display: block; width: calc(100% + (var(--Layout-outer-spacing-x) * 2)); @@ -52,7 +50,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; .PageLayout { display: block; - // stylelint-disable-next-line primer/spacing margin: var(--Layout-outer-spacing-y) var(--Layout-outer-spacing-x); // multi-column desktop-friendly layout @@ -76,19 +73,15 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; // header divider .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, primer/colors - border-bottom: $border-width solid $Layout-divider-color; + border-bottom: var(--borderWidth-default) solid $Layout-divider-color; } // footer divider .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, primer/colors - border-top: $border-width solid $Layout-divider-color; + border-top: var(--borderWidth-default) solid $Layout-divider-color; } // pane divider @@ -96,20 +89,16 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; &.PageLayout--hasPaneDivider { &.PageLayout--panePos-start { .PageLayout-pane { - // stylelint-disable-next-line primer/borders, primer/colors - border-right: $border-width solid $Layout-divider-color; + border-right: var(--borderWidth-default) solid $Layout-divider-color; } &:not(.PageLayout--columnGap-none) { .PageLayout-pane { - // stylelint-disable-next-line primer/spacing padding-right: calc(var(--Layout-column-gap) - #{$border-width}); - // stylelint-disable-next-line primer/spacing margin-right: calc(var(--Layout-column-gap) * -1); } .PageLayout-content { - // stylelint-disable-next-line primer/spacing margin-left: var(--Layout-column-gap); } } @@ -117,20 +106,16 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; &.PageLayout--panePos-end { .PageLayout-pane { - // stylelint-disable-next-line primer/borders, primer/colors border-left: $border-width solid $Layout-divider-color; } &:not(.PageLayout--columnGap-none) { .PageLayout-pane { - // stylelint-disable-next-line primer/spacing padding-left: calc(var(--Layout-column-gap) - #{$border-width}); - // stylelint-disable-next-line primer/spacing margin-left: calc(var(--Layout-column-gap) * -1); } .PageLayout-content { - // stylelint-disable-next-line primer/spacing margin-right: var(--Layout-column-gap); } } @@ -253,52 +238,48 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; .PageLayout-region--dividerNarrow-line-before { position: relative; - // stylelint-disable-next-line primer/spacing margin-top: var(--Layout-row-gap); &::before { @include Layout-line-divider; - // stylelint-disable-next-line primer/spacing + top: calc(#{$border-width * -1} - var(--Layout-row-gap)); } } .PageLayout-region--dividerNarrow-line-after { position: relative; - // stylelint-disable-next-line primer/spacing margin-bottom: var(--Layout-row-gap); &::after { @include Layout-line-divider; - // stylelint-disable-next-line primer/spacing + bottom: calc(#{$border-width * -1} - var(--Layout-row-gap)); } } .PageLayout-region--dividerNarrow-filled-before { position: relative; - // stylelint-disable-next-line primer/spacing margin-top: calc(var(--base-size-8) + var(--Layout-row-gap)); &::after { @include Layout-filled-divider; - // stylelint-disable-next-line primer/spacing + top: calc(calc(var(--base-size-8) * -1) - var(--Layout-row-gap)); } } .PageLayout-region--dividerNarrow-filled-after { position: relative; - // stylelint-disable-next-line primer/spacing margin-bottom: calc(var(--base-size-8) + var(--Layout-row-gap)); &::before { @include Layout-filled-divider; - // stylelint-disable-next-line primer/spacing + bottom: calc(calc(var(--base-size-8) * -1) - var(--Layout-row-gap)); } } @@ -323,9 +304,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; grid-template-areas: var(--Layout-template-areas); .PageLayout-content { - // stylelint-disable-next-line primer/spacing padding-right: var(--Layout-inner-spacing-max); - // stylelint-disable-next-line primer/spacing padding-left: var(--Layout-inner-spacing-max); grid-area: content; } @@ -412,6 +391,5 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default; .PageLayout-content, .PageLayout-pane, .PageLayout-footer { - // stylelint-disable-next-line primer/spacing padding: var(--Layout-inner-spacing-min); } diff --git a/src/markdown/blob-csv.scss b/src/markdown/blob-csv.scss index ffa122c83e..9b969396db 100644 --- a/src/markdown/blob-csv.scss +++ b/src/markdown/blob-csv.scss @@ -2,20 +2,16 @@ .markdown-body .csv-data { td, th { - // stylelint-disable-next-line primer/spacing - padding: 5px; + padding: var(--base-size-4); overflow: hidden; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - line-height: $lh-condensed-ultra; + font-size: var(--text-body-size-small); + line-height: 1; text-align: left; white-space: nowrap; } .blob-num { - // stylelint-disable-next-line primer/spacing - padding: 10px var(--base-size-8) 9px; + padding: 10px var(--base-size-8) var(--base-size-8); text-align: right; background: var(--bgColor-default, var(--color-canvas-default)); border: 0; @@ -24,8 +20,7 @@ tr { border-top: 0; } th { - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-light); background: var(--bgColor-muted, var(--color-canvas-subtle)); border-top: 0; } diff --git a/src/markdown/code.scss b/src/markdown/code.scss index 1816a97453..7b05a88c02 100644 --- a/src/markdown/code.scss +++ b/src/markdown/code.scss @@ -3,15 +3,12 @@ // Inline code snippets code, tt { - // stylelint-disable-next-line primer/spacing padding: 0.2em 0.4em; margin: 0; - // stylelint-disable-next-line primer/typography font-size: 85%; white-space: break-spaces; // keeps rendering spaces, but breaks them onto multiple lines background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted)); - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + border-radius: var(--borderRadius-default); br { display: none; } } @@ -19,7 +16,6 @@ del code { text-decoration: inherit; } samp { - // stylelint-disable-next-line primer/typography font-size: 85%; } @@ -27,7 +23,6 @@ word-wrap: normal; code { - // stylelint-disable-next-line primer/typography font-size: 100%; } @@ -55,14 +50,11 @@ pre { padding: var(--base-size-16); overflow: auto; - // stylelint-disable-next-line primer/typography font-size: 85%; - // stylelint-disable-next-line primer/typography line-height: 1.45; color: var(--fgColor-default, var(--color-fg-default)); background-color: var(--bgColor-muted, var(--color-canvas-subtle)); - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + border-radius: var(--borderRadius-default); } pre code, diff --git a/src/markdown/footnotes.scss b/src/markdown/footnotes.scss index 8b8e7bba6c..424cedb504 100644 --- a/src/markdown/footnotes.scss +++ b/src/markdown/footnotes.scss @@ -13,10 +13,10 @@ } .footnotes { - // stylelint-disable-next-line primer/typography - font-size: $h6-size; + + font-size: var(--h6-size); color: var(--fgColor-muted, var(--color-fg-muted)); - // stylelint-disable-next-line primer/borders, primer/colors + border-top: $border; ol { @@ -41,10 +41,10 @@ left: calc(var(--base-size-24) * -1); pointer-events: none; content: ''; - // stylelint-disable-next-line primer/borders, primer/colors, declaration-property-value-no-unknown + , declaration-property-value-no-unknown border: 2px $border-style var(--borderColor-accent-emphasis, var(--color-accent-emphasis)); - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + + border-radius: var(--borderRadius-default); } li:target { @@ -52,7 +52,7 @@ } .data-footnote-backref g-emoji { - // stylelint-disable-next-line primer/typography + font-family: monospace; } } diff --git a/src/markdown/headings.scss b/src/markdown/headings.scss index 880ae57b95..a02dde11c1 100644 --- a/src/markdown/headings.scss +++ b/src/markdown/headings.scss @@ -11,10 +11,8 @@ h6 { margin-top: var(--base-size-24); margin-bottom: var(--base-size-16); - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; - // stylelint-disable-next-line primer/typography - line-height: $lh-condensed; + font-weight: var(--base-text-weight-light); + line-height: 1.25; .octicon-link { color: var(--fgColor-default, var(--color-fg-default)); @@ -32,47 +30,36 @@ tt, code { - // stylelint-disable-next-line primer/spacing padding: 0 0.2em; font-size: inherit; } } h1 { - // stylelint-disable-next-line primer/spacing padding-bottom: 0.3em; - // stylelint-disable-next-line primer/typography font-size: 2em; - // stylelint-disable-next-line primer/borders, primer/colors - border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-bottom: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); } h2 { - // stylelint-disable-next-line primer/spacing padding-bottom: 0.3em; - // stylelint-disable-next-line primer/typography font-size: 1.5em; - // stylelint-disable-next-line primer/borders, primer/colors - border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-bottom: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); } h3 { - // stylelint-disable-next-line primer/typography font-size: 1.25em; } h4 { - // stylelint-disable-next-line primer/typography font-size: 1em; } h5 { - // stylelint-disable-next-line primer/typography font-size: 0.875em; } h6 { - // stylelint-disable-next-line primer/typography font-size: 0.85em; color: var(--fgColor-muted, var(--color-fg-muted)); } @@ -87,7 +74,6 @@ display: inline-block; .anchor { - // stylelint-disable-next-line primer/spacing margin-left: -40px; } } diff --git a/src/markdown/images.scss b/src/markdown/images.scss index 878e3ece97..8ca36273c5 100644 --- a/src/markdown/images.scss +++ b/src/markdown/images.scss @@ -10,13 +10,11 @@ box-sizing: content-box; &[align='right'] { - // stylelint-disable-next-line primer/spacing - padding-left: 20px; + padding-left: var(--base-size-20); } &[align='left'] { - // stylelint-disable-next-line primer/spacing - padding-right: 20px; + padding-right: var(--base-size-20); } } @@ -38,13 +36,10 @@ display: block; float: left; width: auto; - // stylelint-disable-next-line primer/spacing - padding: 7px; - // stylelint-disable-next-line primer/spacing - margin: 13px 0 0; + padding: var(--base-size-8); + margin: var(--base-size-12) 0 0; overflow: hidden; - // stylelint-disable-next-line primer/borders, primer/colors - border: $border-width $border-style var(--borderColor-default, var(--color-border-default)); + border: var(--borderWidth-default) solid var(--borderColor-default, var(--color-border-default)); } span img { @@ -54,8 +49,7 @@ span span { display: block; - // stylelint-disable-next-line primer/spacing - padding: 5px 0 0; + padding: var(--base-size-4) 0 0; clear: both; color: var(--fgColor-default, var(--color-fg-default)); } @@ -68,8 +62,7 @@ > span { display: block; - // stylelint-disable-next-line primer/spacing - margin: 13px auto 0; + margin: var(--base-size-12) auto 0; overflow: hidden; text-align: center; } @@ -87,8 +80,7 @@ > span { display: block; - // stylelint-disable-next-line primer/spacing - margin: 13px 0 0; + margin: var(--base-size-12) 0 0; overflow: hidden; text-align: right; } @@ -102,27 +94,23 @@ span.float-left { display: block; float: left; - // stylelint-disable-next-line primer/spacing - margin-right: 13px; + margin-right: var(--base-size-12); overflow: hidden; span { - // stylelint-disable-next-line primer/spacing - margin: 13px 0 0; + margin: var(--base-size-12) 0 0; } } span.float-right { display: block; float: right; - // stylelint-disable-next-line primer/spacing - margin-left: 13px; + margin-left: var(--base-size-12); overflow: hidden; > span { display: block; - // stylelint-disable-next-line primer/spacing - margin: 13px auto 0; + margin: var(--base-size-12) auto 0; overflow: hidden; text-align: right; } diff --git a/src/markdown/lists.scss b/src/markdown/lists.scss index fcee753a71..4469977224 100644 --- a/src/markdown/lists.scss +++ b/src/markdown/lists.scss @@ -5,7 +5,6 @@ // Lists, Blockquotes & Such ul, ol { - // stylelint-disable-next-line primer/spacing padding-left: 2em; &.no-list { @@ -76,7 +75,6 @@ } li + li { - // stylelint-disable-next-line primer/spacing margin-top: $em-spacer-3; } @@ -86,11 +84,9 @@ dt { padding: 0; margin-top: var(--base-size-16); - // stylelint-disable-next-line primer/typography font-size: 1em; font-style: italic; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-light); } dd { diff --git a/src/markdown/markdown-body.scss b/src/markdown/markdown-body.scss index 2e660a96f8..38b81b9850 100644 --- a/src/markdown/markdown-body.scss +++ b/src/markdown/markdown-body.scss @@ -5,12 +5,12 @@ // container with .markdown-body on it should render generally well. It also // includes some GitHub Flavored Markdown specific styling (like @mentions) .markdown-body { - // stylelint-disable-next-line primer/typography - font-family: $body-font; - // stylelint-disable-next-line primer/typography - font-size: $h4-size; - // stylelint-disable-next-line primer/typography - line-height: $body-line-height; + + var(--fontStack-sansSerif); + + font-size: var(--h4-size); + + line-height: 1.5; word-wrap: break-word; // Clearfix on the markdown body @@ -52,10 +52,10 @@ .anchor { float: left; padding-right: var(--base-size-4); - // stylelint-disable-next-line primer/spacing + margin-left: -20px; - // stylelint-disable-next-line primer/typography - line-height: $lh-condensed-ultra; + + line-height: 1; &:focus { outline: none; @@ -84,10 +84,10 @@ } blockquote { - // stylelint-disable-next-line primer/spacing + padding: 0 1em; color: var(--fgColor-muted, var(--color-fg-muted)); - // stylelint-disable-next-line primer/borders, primer/colors, declaration-property-value-no-unknown + , declaration-property-value-no-unknown 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 c421a88d82..386b6b6a62 100644 --- a/src/markdown/tables.scss +++ b/src/markdown/tables.scss @@ -11,16 +11,13 @@ font-variant: tabular-nums; th { - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-light); } th, td { - // stylelint-disable-next-line primer/spacing - padding: 6px 13px; - // stylelint-disable-next-line primer/borders, primer/colors - border: $border-width $border-style var(--borderColor-default, var(--color-border-default)); + padding: var(--base-size-6) var(--base-size-12); + border: var(--borderWidth-default) solid var(--borderColor-default, var(--color-border-default)); } td { @@ -31,8 +28,7 @@ tr { background-color: var(--bgColor-default, var(--color-canvas-default)); - // stylelint-disable-next-line primer/borders, primer/colors - border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-top: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); &:nth-child(2n) { background-color: var(--bgColor-muted, var(--color-canvas-subtle)); diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss index 1f0daa31c8..b8ff9314fd 100644 --- a/src/marketing/buttons/button.scss +++ b/src/marketing/buttons/button.scss @@ -2,13 +2,9 @@ position: relative; z-index: 1; display: inline-block; - // stylelint-disable-next-line primer/spacing - padding: 0.9rem 1.5rem 1.1rem; - // stylelint-disable-next-line primer/typography - font-size: 1rem; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; - // stylelint-disable-next-line primer/typography + padding: 0.9rem var(--base-size-24) 1.1rem; + font-size: var(--text-body-size-large); + font-weight: var(--base-text-weight-light); line-height: 1; // stylelint-disable-next-line primer/colors color: var(--bgColor-default, var(--color-canvas-default)); @@ -20,8 +16,7 @@ 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 - border-radius: 0.375rem; + border-radius: var(--borderRadius-medium); transition: box-shadow 0.2s, outline 0.2s ease; appearance: none !important; @@ -159,13 +154,10 @@ // Size modifiers .btn-small-mktg { - // stylelint-disable-next-line primer/spacing - padding: 0.625rem 1rem 0.8125rem; + padding: 0.625rem var(--base-size-16) 0.8125rem; } .btn-large-mktg { - // stylelint-disable-next-line primer/spacing - padding: 16px 30px 20px !important; - // stylelint-disable-next-line primer/typography - font-size: 1.25rem; + padding: var(--base-size-16) 30px var(--base-size-20) !important; + font-size: var(--text-subtitle-size); } diff --git a/src/marketing/links/link.scss b/src/marketing/links/link.scss index b38a5f0c63..74a3cae12f 100644 --- a/src/marketing/links/link.scss +++ b/src/marketing/links/link.scss @@ -9,7 +9,6 @@ &::after, &.link-emphasis-mktg::before { position: absolute; - // stylelint-disable-next-line primer/spacing bottom: -0.15em; left: 0; width: calc(100% - 1em); @@ -44,7 +43,6 @@ &.arrow-target-mktg { .arrow-symbol-mktg { - // stylelint-disable-next-line primer/spacing margin-left: -$em-spacer-3; } } diff --git a/src/marketing/support/variables.scss b/src/marketing/support/variables.scss index f640ab8fa1..98d47232db 100644 --- a/src/marketing/support/variables.scss +++ b/src/marketing/support/variables.scss @@ -10,7 +10,7 @@ $mktg-header-spacing-large: -0.03em !default; $mktg-header-spacing-default: -0.01em !default; $mktg-header-spacing-threshold: 48px !default; $mktg-header-weight-large: $font-weight-extrabold !default; -$mktg-header-weight-default: $font-weight-bold !default; +$mktg-header-weight-default: var(--base-text-weight-semibold) !default; $mktg-header-weight-threshold: 24px !default; // Header size steps diff --git a/src/marketing/type/typography.scss b/src/marketing/type/typography.scss index 4a6e2faa19..c5ae8524d6 100644 --- a/src/marketing/type/typography.scss +++ b/src/marketing/type/typography.scss @@ -6,11 +6,9 @@ .h4-mktg, .h5-mktg, .h6-mktg { - // stylelint-disable-next-line primer/typography font-family: $font-mktg; font-feature-settings: $mktg-font-feature-settings; - // stylelint-disable-next-line primer/typography - font-weight: $mktg-header-weight-default !important; + font-weight: var(--base-text-weight-light) !important; letter-spacing: $mktg-header-spacing-default; } @@ -20,19 +18,16 @@ $pairing-md: map-get($mktg-header-pairings, nth($sizes, 2)); $pairing-lg: map-get($mktg-header-pairings, nth($sizes, 3)); - // stylelint-disable-next-line primer/typography + font-size: map-get($pairing, 'size') !important; - // stylelint-disable-next-line primer/typography line-height: map-get($pairing, 'lh') !important; - // stylelint-disable-next-line primer/typography - @if (map-get($pairing, 'size') >= $mktg-header-weight-threshold) { font-weight: $mktg-header-weight-large !important; } + + @if (map-get($pairing, 'size') >= $mktg-header-weight-threshold) { font-weight: var(--base-text-weight-light) !important; } @if (nth($sizes, 1) != nth($sizes, 2)) { @include breakpoint(md) { - // stylelint-disable-next-line primer/typography font-size: map-get($pairing-md, 'size') !important; - // stylelint-disable-next-line primer/typography line-height: map-get($pairing-md, 'lh') !important; @if (map-get($pairing-md, 'size') >= $mktg-header-spacing-threshold and map-get($pairing, 'size') < $mktg-header-spacing-threshold) { @@ -40,17 +35,14 @@ } @if (map-get($pairing-md, 'size') >= $mktg-header-weight-threshold and map-get($pairing, 'size') < $mktg-header-weight-threshold) { - // stylelint-disable-next-line primer/typography - font-weight: $mktg-header-weight-large !important; + font-weight: var(--base-text-weight-light) !important; } } } @if (nth($sizes, 2) != nth($sizes, 3)) { @include breakpoint(lg) { - // stylelint-disable-next-line primer/typography font-size: map-get($pairing-lg, 'size') !important; - // stylelint-disable-next-line primer/typography line-height: map-get($pairing-lg, 'lh') !important; @if (map-get($pairing-lg, 'size') >= $mktg-header-spacing-threshold and map-get($pairing-md, 'size') < $mktg-header-spacing-threshold) { @@ -58,8 +50,7 @@ } @if (map-get($pairing-lg, 'size') >= $mktg-header-weight-threshold and map-get($pairing-md, 'size') < $mktg-header-weight-threshold) { - // stylelint-disable-next-line primer/typography - font-weight: $mktg-header-weight-large !important; + font-weight: var(--base-text-weight-light) !important; } } } @@ -73,11 +64,9 @@ .f4-mktg, .f5-mktg, .f6-mktg { - // stylelint-disable-next-line primer/typography font-family: $font-mktg; font-feature-settings: $mktg-font-feature-settings; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-normal; + font-weight: var(--base-text-weight-light); } @each $body, $sizes in $mktg-bodies { @@ -86,21 +75,18 @@ $pairing-md: map-get($mktg-body-pairings, nth($sizes, 2)); $pairing-lg: map-get($mktg-body-pairings, nth($sizes, 3)); - // stylelint-disable-next-line primer/typography + font-size: map-get($pairing, 'size') !important; - // stylelint-disable-next-line primer/typography line-height: map-get($pairing, 'lh') !important; @if (map-get($pairing, 'size') >= $mktg-body-spacing-threshold) { letter-spacing: $mktg-body-spacing-large; } - // stylelint-disable-next-line primer/typography - @if (map-get($pairing, 'size') >= $mktg-body-weight-threshold) { font-weight: $font-weight-semibold; } + + @if (map-get($pairing, 'size') >= $mktg-body-weight-threshold) { font-weight: var(--base-text-weight-light); } @if (nth($sizes, 1) != nth($sizes, 2)) { @include breakpoint(md) { - // stylelint-disable-next-line primer/typography font-size: map-get($pairing-md, 'size') !important; - // stylelint-disable-next-line primer/typography line-height: map-get($pairing-md, 'lh') !important; @if (map-get($pairing-md, 'size') >= $mktg-body-spacing-threshold and map-get($pairing, 'size') < $mktg-body-spacing-threshold) { @@ -108,17 +94,14 @@ } @if (map-get($pairing-md, 'size') >= $mktg-body-weight-threshold and map-get($pairing, 'size') < $mktg-body-weight-threshold) { - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-medium; + font-weight: var(--base-text-weight-light); } } } @if (nth($sizes, 2) != nth($sizes, 3)) { @include breakpoint(lg) { - // stylelint-disable-next-line primer/typography font-size: map-get($pairing-lg, 'size') !important; - // stylelint-disable-next-line primer/typography line-height: map-get($pairing-lg, 'lh') !important; @if (map-get($pairing-lg, 'size') >= $mktg-body-spacing-threshold and map-get($pairing-md, 'size') < $mktg-body-spacing-threshold) { @@ -126,8 +109,7 @@ } @if (map-get($pairing-lg, 'size') >= $mktg-body-weight-threshold and map-get($pairing-md, 'size') < $mktg-body-weight-threshold) { - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-medium; + font-weight: var(--base-text-weight-light); } } } @@ -135,6 +117,5 @@ } .text-medium { - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-medium !important; + font-weight: var(--base-text-weight-light) !important; } diff --git a/src/marketing/utilities/layout.scss b/src/marketing/utilities/layout.scss index 0343ed84f4..1a0eda007d 100644 --- a/src/marketing/utilities/layout.scss +++ b/src/marketing/utilities/layout.scss @@ -6,24 +6,24 @@ @include breakpoint($breakpoint) { @each $scale, $size in $spacer-map-extended { @if ($size != 0 or $variant != '') { - // stylelint-disable-next-line primer/spacing + .top#{$variant}-#{$scale} { top: $size !important; } - // stylelint-disable-next-line primer/spacing + .right#{$variant}-#{$scale} { right: $size !important; } - // stylelint-disable-next-line primer/spacing + .bottom#{$variant}-#{$scale} { bottom: $size !important; } - // stylelint-disable-next-line primer/spacing + .left#{$variant}-#{$scale} { left: $size !important; } } @if ($size != 0) { - // stylelint-disable-next-line primer/spacing + .top#{$variant}-n#{$scale} { top: -$size !important; } - // stylelint-disable-next-line primer/spacing + .right#{$variant}-n#{$scale} { right: -$size !important; } - // stylelint-disable-next-line primer/spacing + .bottom#{$variant}-n#{$scale} { bottom: -$size !important; } - // stylelint-disable-next-line primer/spacing + .left#{$variant}-n#{$scale} { left: -$size !important; } } } @@ -34,7 +34,7 @@ @each $breakpoint, $variant in $responsive-variants { @include breakpoint($breakpoint) { @for $offset from 1 through 7 { - // stylelint-disable-next-line primer/spacing + .offset#{$variant}-n#{$offset} { margin-left: -($offset * 0.0833333333 * 100%); } } } diff --git a/src/navigation/filter-list.scss b/src/navigation/filter-list.scss index db8c0a9feb..20f9c4cd9b 100644 --- a/src/navigation/filter-list.scss +++ b/src/navigation/filter-list.scss @@ -7,10 +7,8 @@ list-style-type: none; &.small .filter-item { - // stylelint-disable-next-line primer/spacing - padding: 6px 12px; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; + padding: var(--base-size-6) var(--base-size-12); + font-size: var(--text-body-size-small); } &.pjax-active .filter-item { @@ -30,15 +28,13 @@ padding: var(--base-size-8) var(--base-size-16); margin-bottom: var(--base-size-4); overflow: hidden; - // stylelint-disable-next-line primer/typography - font-size: $h5-size; + font-size: var(--h5-size); color: var(--fgColor-muted, var(--color-fg-muted)); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + border-radius: var(--borderRadius-default); &:hover { text-decoration: none; @@ -70,8 +66,7 @@ .count { float: right; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-light); } .bar { diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss index fb1242c6ff..0e7d85bda2 100644 --- a/src/navigation/sidenav.scss +++ b/src/navigation/sidenav.scss @@ -10,14 +10,12 @@ position: relative; display: block; width: 100%; - // stylelint-disable-next-line primer/spacing - padding: 12px var(--base-size-16); + padding: var(--base-size-12) var(--base-size-16); color: var(--fgColor-default, var(--color-fg-default)); text-align: left; background-color: transparent; border: 0; - // stylelint-disable-next-line primer/borders, primer/colors - border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-top: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); &:first-child { border-top: 0; @@ -26,7 +24,7 @@ &:last-child { // makes sure there is a "bottom border" in case the list is not long enough // stylelint-disable-next-line primer/box-shadow, declaration-property-value-no-unknown - box-shadow: 0 $border-width 0 var(--borderColor-default, var(--color-border-default)); + box-shadow: 0 var(--borderWidth-default) 0 var(--borderColor-default, var(--color-border-default)); } // Bar on the left @@ -96,7 +94,6 @@ .SideNav-subItem[aria-current]:not([aria-current='false']), .SideNav-subItem[aria-selected='true'] { - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-semibold; + font-weight: var(--base-text-weight-light); color: var(--fgColor-default, var(--color-fg-default)); } diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss index 7992fef6d0..45b72e48fe 100644 --- a/src/navigation/subnav.scss +++ b/src/navigation/subnav.scss @@ -3,17 +3,14 @@ // Needs refactoring // Sub nav .subnav { - // stylelint-disable-next-line primer/spacing - margin-bottom: 20px; + margin-bottom: var(--base-size-20); @include clearfix(); } .subnav-bordered { - // stylelint-disable-next-line primer/spacing - padding-bottom: 20px; - // stylelint-disable-next-line primer/borders, primer/colors - border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + padding-bottom: var(--base-size-20); + border-bottom: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); } .subnav-flush { @@ -23,18 +20,13 @@ .subnav-item { position: relative; float: left; - // stylelint-disable-next-line primer/spacing - padding: 5px var(--base-size-16); - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-semibold; - // stylelint-disable-next-line primer/typography + padding: var(--base-size-4) var(--base-size-16); + font-weight: var(--base-text-weight-light); line-height: 20px; color: var(--fgColor-default, var(--color-fg-default)); - // stylelint-disable-next-line primer/borders, primer/colors - border: $border-width $border-style var(--control-borderColor-rest, var(--color-border-default)); + border: var(--borderWidth-default) solid var(--control-borderColor-rest, var(--color-border-default)); + .subnav-item { - // stylelint-disable-next-line primer/spacing margin-left: -1px; } @@ -70,24 +62,19 @@ } &:first-child { - // stylelint-disable-next-line primer/borders - border-top-left-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-bottom-left-radius: $border-radius; + border-top-left-radius: var(--borderRadius-default); + border-bottom-left-radius: var(--borderRadius-default); } &:last-child { - // stylelint-disable-next-line primer/borders - border-top-right-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-bottom-right-radius: $border-radius; + border-top-right-radius: var(--borderRadius-default); + border-bottom-right-radius: var(--borderRadius-default); } } .subnav-search { position: relative; - // stylelint-disable-next-line primer/spacing - margin-left: 12px; + margin-left: var(--base-size-12); } .subnav-search-input { @@ -103,8 +90,7 @@ .subnav-search-icon { position: absolute; - // stylelint-disable-next-line primer/spacing - top: 9px; + top: var(--base-size-8); left: var(--base-size-8); display: block; color: var(--fgColor-muted, var(--color-fg-muted)); @@ -126,7 +112,6 @@ } + .subnav-search { - // stylelint-disable-next-line primer/spacing margin-left: -1px; .subnav-search-input { @@ -149,6 +134,5 @@ } .subnav-spacer-right { - // stylelint-disable-next-line primer/spacing - padding-right: 12px; + padding-right: var(--base-size-12); } diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss index feffbfec48..ad3af97331 100644 --- a/src/pagination/pagination.scss +++ b/src/pagination/pagination.scss @@ -5,10 +5,8 @@ span, em { min-width: 32px; - // stylelint-disable-next-line primer/spacing - padding: 5px 10px; + padding: var(--base-size-4) 10px; font-style: normal; - // stylelint-disable-next-line primer/typography line-height: 20px; color: var(--fgColor-default, var(--color-fg-default)); text-align: center; @@ -16,10 +14,8 @@ vertical-align: middle; cursor: pointer; user-select: none; - // stylelint-disable-next-line primer/borders, primer/colors - border: $border-width $border-style transparent; - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + border: var(--borderWidth-default) solid transparent; + border-radius: var(--borderRadius-default); transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1); &:hover, diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index f600679541..24597941a0 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -62,10 +62,8 @@ $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, 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; + border: var(--borderWidth-default) solid var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border)); + border-radius: calc(var(--borderRadius-default) * 2); box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow)); animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards; @@ -88,11 +86,9 @@ $SelectMenu-max-height: 480px !default; height: auto; max-height: $SelectMenu-max-height; margin: var(--base-size-8) 0 var(--base-size-16) 0; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; + font-size: var(--text-body-size-small); border-color: var(--borderColor-default, var(--color-border-default)); - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + border-radius: var(--borderRadius-default); box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow)); animation-name: SelectMenu-modal-animation--sm; } @@ -107,21 +103,17 @@ $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, primer/colors - border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-bottom: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); @include breakpoint(sm) { - // stylelint-disable-next-line primer/spacing - padding: 7px 7px 7px var(--base-size-16); + padding: var(--base-size-8) var(--base-size-8) var(--base-size-8) var(--base-size-16); } } .SelectMenu-title { flex: 1; - // stylelint-disable-next-line primer/typography - font-size: $body-font-size; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-size: var(--body-font-size); + font-weight: var(--base-text-weight-light); @include breakpoint(sm) { font-size: inherit; @@ -131,7 +123,6 @@ $SelectMenu-max-height: 480px !default; .SelectMenu-closeButton { padding: var(--base-size-16); margin: calc(var(--base-size-16) * -1); - // stylelint-disable-next-line primer/typography line-height: 1; color: var(--fgColor-muted, var(--color-fg-muted)); background-color: transparent; @@ -139,7 +130,6 @@ $SelectMenu-max-height: 480px !default; @include breakpoint(sm) { padding: var(--base-size-8); - // stylelint-disable-next-line primer/spacing margin: calc(var(--base-size-8) * -1) (-7px); // Using -7px fixes a :focus glitch } } @@ -151,8 +141,7 @@ $SelectMenu-max-height: 480px !default; .SelectMenu-filter { padding: var(--base-size-16); margin: 0; - // stylelint-disable-next-line primer/borders, primer/colors - border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-bottom: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); @include breakpoint(sm) { padding: var(--base-size-8); @@ -164,8 +153,7 @@ $SelectMenu-max-height: 480px !default; width: 100%; @include breakpoint(sm) { - // stylelint-disable-next-line primer/typography - font-size: $h5-size; + font-size: var(--h5-size); } } @@ -177,8 +165,7 @@ $SelectMenu-max-height: 480px !default; position: relative; padding: 0; margin: 0; - // stylelint-disable-next-line primer/spacing - margin-bottom: -$border-width; // Hides the last border in the list + margin-bottom: -var(--borderWidth-default); // Hides the last border in the list flex: auto; overflow-x: hidden; overflow-y: auto; @@ -201,14 +188,11 @@ $SelectMenu-max-height: 480px !default; cursor: pointer; background-color: var(--overlay-bgColor, var(--color-canvas-overlay)); border: 0; - // stylelint-disable-next-line primer/borders, primer/colors - border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-bottom: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); @include breakpoint(sm) { - // stylelint-disable-next-line primer/spacing - padding-top: 7px; - // stylelint-disable-next-line primer/spacing - padding-bottom: 7px; + padding-top: var(--base-size-8); + padding-bottom: var(--base-size-8); } // Borderless @@ -260,10 +244,8 @@ $SelectMenu-max-height: 480px !default; .SelectMenu-tab { flex: 1; padding: var(--base-size-8) var(--base-size-16); - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-semibold; + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-light); color: var(--fgColor-muted, var(--color-fg-muted)); text-align: center; background-color: transparent; @@ -274,13 +256,10 @@ $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, primer/colors - border: $border-width $border-style transparent; + border: var(--borderWidth-default) solid transparent; border-bottom-width: 0; - // stylelint-disable-next-line primer/borders - border-top-left-radius: $border-radius; - // stylelint-disable-next-line primer/borders - border-top-right-radius: $border-radius; + border-top-left-radius: var(--borderRadius-default); + border-top-right-radius: var(--borderRadius-default); } &[aria-selected='true'] { @@ -303,12 +282,10 @@ $SelectMenu-max-height: 480px !default; // A container used to show different kinds of text messages. .SelectMenu-message { - // stylelint-disable-next-line primer/spacing - padding: 7px var(--base-size-16); + padding: var(--base-size-8) var(--base-size-16); text-align: center; background-color: var(--overlay-bgColor, var(--color-canvas-overlay)); - // stylelint-disable-next-line primer/borders, primer/colors - border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-bottom: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); } // Blankslate and Loading @@ -329,19 +306,15 @@ $SelectMenu-max-height: 480px !default; .SelectMenu-divider { padding: var(--base-size-4) var(--base-size-16); margin: 0; - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-semibold; + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-light); color: var(--fgColor-muted, var(--color-fg-muted)); background-color: var(--bgColor-muted, var(--color-canvas-subtle)); - // stylelint-disable-next-line primer/borders, primer/colors - border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-bottom: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); // Borderless .SelectMenu-list--borderless & { - // stylelint-disable-next-line primer/borders, primer/colors - border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-top: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); &:empty { padding: 0; @@ -357,16 +330,13 @@ $SelectMenu-max-height: 480px !default; .SelectMenu-footer { z-index: 0; // Avoid top border from getting covered by the negative margin of the list padding: var(--base-size-8) var(--base-size-16); - // stylelint-disable-next-line primer/typography - font-size: $font-size-small; + font-size: var(--text-body-size-small); color: var(--fgColor-muted, var(--color-fg-muted)); text-align: center; - // stylelint-disable-next-line primer/borders, primer/colors - border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-top: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted)); @include breakpoint(sm) { - // stylelint-disable-next-line primer/spacing - padding: 7px var(--base-size-16); + padding: var(--base-size-8) var(--base-size-16); } } @@ -408,8 +378,7 @@ $SelectMenu-max-height: 480px !default; // Visible when a user clicks/taps on a list item .SelectMenu-item[aria-checked='true'] { - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-semibold; + font-weight: var(--base-text-weight-light); color: var(--fgColor-default, var(--color-fg-default)); .SelectMenu-icon--check { diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss index ecf3c453e6..b25f64ed25 100644 --- a/src/support/mixins/misc.scss +++ b/src/support/mixins/misc.scss @@ -3,8 +3,7 @@ &::after, &::before { position: absolute; - // stylelint-disable-next-line primer/spacing - top: 11px; + top: var(--base-size-12); right: 100%; left: calc(var(--base-size-8) * -1); display: block; @@ -16,8 +15,7 @@ } &::after { - // stylelint-disable-next-line primer/spacing - margin-left: 2px; + margin-left: var(--base-size-2); background-color: var(--bgColor-default, var(--color-canvas-default)); background-image: linear-gradient($background, $background); } diff --git a/src/support/mixins/typography.scss b/src/support/mixins/typography.scss index 7beaad4332..732c158bec 100644 --- a/src/support/mixins/typography.scss +++ b/src/support/mixins/typography.scss @@ -10,79 +10,61 @@ // Heading mixins for use within components // These match heading utilities in utilities/typography @mixin h1 { - // stylelint-disable-next-line primer/typography font-size: var(--h1-size, $h1-size); - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-light); } @mixin h2 { - // stylelint-disable-next-line primer/typography font-size: var(--h2-size, $h2-size); - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-light); } @mixin h3 { - // stylelint-disable-next-line primer/typography font-size: var(--h3-size, $h3-size); - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-light); } @mixin h4 { - // stylelint-disable-next-line primer/typography font-size: var(--h4-size, $h4-size); - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-light); } @mixin h5 { - // stylelint-disable-next-line primer/typography font-size: var(--h5-size, $h5-size); - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-light); } @mixin h6 { - // stylelint-disable-next-line primer/typography font-size: var(--h6-size, $h6-size); - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-light); } // Responsive heading mixins // There are no responsive mixins for h4-h6 because they are small // and don't need to be smaller on mobile. @mixin f1-responsive { - // stylelint-disable-next-line primer/typography font-size: var(--h1-size-mobile, $h1-size-mobile); // 32px on desktop @include breakpoint(md) { - // stylelint-disable-next-line primer/typography font-size: var(--h1-size, $h1-size); } } @mixin f2-responsive { - // stylelint-disable-next-line primer/typography font-size: var(--h2-size-mobile, $h2-size-mobile); // 24px on desktop @include breakpoint(md) { - // stylelint-disable-next-line primer/typography font-size: var(--h2-size, $h2-size); } } @mixin f3-responsive { - // stylelint-disable-next-line primer/typography font-size: var(--h3-size-mobile, $h3-size-mobile); // 20px on desktop @include breakpoint(md) { - // stylelint-disable-next-line primer/typography font-size: var(--h3-size, $h3-size); } } @@ -93,20 +75,20 @@ @mixin h1-responsive { @include f1-responsive; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + + font-weight: var(--base-text-weight-light); } @mixin h2-responsive { @include f2-responsive; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + + font-weight: var(--base-text-weight-light); } @mixin h3-responsive { @include f3-responsive; - // stylelint-disable-next-line primer/typography - font-weight: $font-weight-bold; + + font-weight: var(--base-text-weight-light); } diff --git a/src/support/variables/typography.scss b/src/support/variables/typography.scss index ae02718b43..cd2bcc485b 100644 --- a/src/support/variables/typography.scss +++ b/src/support/variables/typography.scss @@ -40,4 +40,4 @@ $mono-font: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Me // The base body size $body-font-size: 14px !default; -$body-line-height: $lh-default !default; +$body-line-height: 1.5 !default; diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss index b95db0e735..79b4bddcc9 100644 --- a/src/toasts/toasts.scss +++ b/src/toasts/toasts.scss @@ -5,8 +5,7 @@ margin: var(--base-size-8); color: var(--fgColor-default, var(--color-fg-default)); background-color: var(--bgColor-default, var(--color-canvas-default)); - // stylelint-disable-next-line primer/borders - border-radius: $border-radius; + border-radius: var(--borderRadius-default); box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow)); @include breakpoint(sm) { @@ -24,8 +23,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, primer/colors - border: $border-width $border-style transparent; + border: var(--borderWidth-default) solid transparent; border-right: 0; border-top-left-radius: inherit; border-bottom-left-radius: inherit; diff --git a/src/tooltips/tooltips.scss b/src/tooltips/tooltips.scss index 086231a128..ce2fc2bc17 100644 --- a/src/tooltips/tooltips.scss +++ b/src/tooltips/tooltips.scss @@ -194,7 +194,6 @@ max-width: var(--overlay-width-small, 20rem); word-wrap: break-word; white-space: pre-line; - // stylelint-disable-next-line primer/borders border-collapse: separate; } diff --git a/src/utilities/typography.scss b/src/utilities/typography.scss index 8370895120..c54902fef8 100644 --- a/src/utilities/typography.scss +++ b/src/utilities/typography.scss @@ -66,7 +66,7 @@ .h4, .h5, .h6 { - font-weight: $font-weight-bold !important; + font-weight: var(--base-text-weight-semibold) !important; } // Type utilities that match type sale @@ -120,7 +120,7 @@ /* Set the font size to 40px and weight to light */ .f00-light { font-size: var(--h00-size-mobile, $h00-size-mobile) !important; - font-weight: $font-weight-light !important; + font-weight: var(--base-text-weight-light) !important; @include breakpoint(md) { font-size: var(--h00-size, $h00-size) !important; @@ -130,7 +130,7 @@ /* Set the font size to 32px and weight to light */ .f0-light { font-size: var(--h0-size-mobile, $h0-size-mobile) !important; - font-weight: $font-weight-light !important; + font-weight: var(--base-text-weight-light) !important; @include breakpoint(md) { font-size: var(--h0-size, $h0-size) !important; @@ -140,7 +140,7 @@ /* Set the font size to 26px and weight to light */ .f1-light { font-size: var(--h1-size-mobile, $h1-size-mobile) !important; - font-weight: $font-weight-light !important; + font-weight: var(--base-text-weight-light) !important; @include breakpoint(md) { font-size: var(--h1-size, $h1-size) !important; @@ -150,7 +150,7 @@ /* Set the font size to 22px and weight to light */ .f2-light { font-size: var(--h2-size-mobile, $h2-size-mobile) !important; - font-weight: $font-weight-light !important; + font-weight: var(--base-text-weight-light) !important; @include breakpoint(md) { font-size: var(--h2-size, $h2-size) !important; @@ -161,7 +161,7 @@ /* Set the font size to 18px and weight to light */ .f3-light { font-size: var(--h3-size-mobile, $h3-size-mobile) !important; - font-weight: $font-weight-light !important; + font-weight: var(--base-text-weight-light) !important; @include breakpoint(md) { font-size: var(--h3-size, $h3-size) !important; @@ -178,10 +178,9 @@ /* Large leading paragraphs */ .lead { - // stylelint-disable-next-line primer/spacing margin-bottom: 30px; font-size: var(--h3-size, $h3-size); - font-weight: $font-weight-light; + font-weight: var(--base-text-weight-light); } // Line-height variations @@ -194,17 +193,17 @@ /* Set the line height to ultra condensed */ .lh#{$variant}-condensed-ultra { - line-height: $lh-condensed-ultra !important; + line-height: 1 !important; } /* Set the line height to condensed */ .lh#{$variant}-condensed { - line-height: $lh-condensed !important; + line-height: 1.25 !important; } /* Set the line height to default */ .lh#{$variant}-default { - line-height: $lh-default !important; + line-height: 1.5 !important; } /* Set the line height to zero */ @@ -239,20 +238,20 @@ // Text styles /* Set the font weight to normal */ .text-normal { - font-weight: $font-weight-normal !important; + font-weight: var(--base-text-weight-normal) !important; } /* Set the font weight to bold */ .text-bold { - font-weight: $font-weight-bold !important; + font-weight: var(--base-text-weight-semibold) !important; } .text-semibold { - font-weight: $font-weight-semibold !important; + font-weight: var(--base-text-weight-medium) !important; } .text-light { - font-weight: $font-weight-light !important; + font-weight: var(--base-text-weight-light) !important; } /* Set the font to italic */ @@ -309,7 +308,7 @@ } .text-emphasized { - font-weight: $font-weight-bold; + font-weight: var(--base-text-weight-semibold); } // List styles @@ -319,7 +318,7 @@ /* Set to monospace font */ .text-mono { - font-family: $mono-font !important; + font-family: var(--fontStack-monospace) !important; } /* Disallow user from selecting text */