From e8d5402a26f0e4428cb0cd0694569da3c2ed505e Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 8 Dec 2021 11:39:38 -0800 Subject: [PATCH] Updating and autofixing stylelint (#1765) * Updating and autofixing stylelint * Moving config to primer/stylelint-config * Removing unused disables from css * Stylelint auto-fixes * @primer/stylelint-config@12.2.0 * Remove these from workfow * Use reusable release_canary workflow (#1811) * Use reusable release_canary workflow * Install with yarn Co-authored-by: Jon Rohan * Use counter-border for LHC (#1792) * Use counter-border for LHC * Create orange-ties-sin.md * Remove fallback * UnderlineNav `:focus` styles (#1764) * add pseudo selectors * adjustments * add stories, cleanup * update mixin * fix mixin * lint * add back overflow styles * adjust focus for better overflow state, scrollsnap * post test adjustments, move hacks to primer css * Stylelint auto-fixes * hover state desktop only * document data-content hack * Create nice-days-jog.md Co-authored-by: Actions Auto Build Co-authored-by: simurai * Add note about loading the "latest" Primer CSS version (#1784) * Add stashing * Stylelint auto-fixes Co-authored-by: Actions Auto Build Co-authored-by: Cole Bemis Co-authored-by: simurai Co-authored-by: Katie Langerman --- .github/workflows/ci.yml | 2 ++ package.json | 3 +-- src/actionlist/action-list-item.scss | 2 +- src/autocomplete/autocomplete.scss | 2 +- src/base/base.scss | 1 + src/base/index.scss | 1 - src/blankslate/index.scss | 1 - src/breadcrumb/breadcrumb.scss | 2 +- src/buttons/button-group.scss | 5 ++-- src/buttons/button.scss | 18 ++++++------- src/buttons/misc.scss | 11 ++++---- src/color-modes/native.scss | 1 + src/color-modes/themes/dark.scss | 1 - src/color-modes/themes/dark_colorblind.scss | 1 - src/color-modes/themes/dark_dimmed.scss | 1 - .../themes/dark_high_contrast.scss | 1 - src/color-modes/themes/light.scss | 1 - src/color-modes/themes/light_colorblind.scss | 1 - .../themes/light_high_contrast.scss | 1 - src/forms/form-control.scss | 2 ++ src/labels/index.scss | 1 - src/labels/labels.scss | 1 + src/layout/index.scss | 1 - src/layout/layout.scss | 6 +---- src/layout/mixins.scss | 6 ++--- src/markdown/images.scss | 4 +-- src/marketing/type/typography.scss | 3 +++ src/navigation/filter-list.scss | 4 +-- src/navigation/menu.scss | 4 +-- src/navigation/sidenav.scss | 4 +-- src/navigation/subnav.scss | 4 +-- src/navigation/tabnav.scss | 4 +-- src/navigation/underline-nav.scss | 1 + src/pagination/pagination.scss | 6 ++--- src/select-menu/select-menu.scss | 4 +-- src/support/mixins/color-modes.scss | 3 +++ src/support/mixins/typography.scss | 5 ++-- stylelint.config.cjs | 13 ++-------- yarn.lock | 26 ++++++++++++++----- 39 files changed, 81 insertions(+), 77 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index fd069c59..333eb0d3 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -26,11 +26,13 @@ jobs: if [ $? -eq 0 ] then set -e + git stash git remote update git fetch git checkout --track origin/$GITHUB_HEAD_REF git config --local user.email "actions@github.com" git config --local user.name "Actions Auto Build" + git stash pop git add src git commit -m "Stylelint auto-fixes" git push diff --git a/package.json b/package.json index 66367a25..118bc603 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "@changesets/cli": "2.18.1", "@github/prettier-config": "0.0.4", "@koddsson/postcss-sass": "5.0.0", - "@primer/stylelint-config": "12.1.1", + "@primer/stylelint-config": "12.2.0", "autoprefixer": "10.4.0", "cssstats": "4.0.2", "eslint": "8.4.0", @@ -64,7 +64,6 @@ "prettier": "2.5.1", "semver": "7.3.5", "stylelint": "14.1.0", - "stylelint-scss": "4.0.0", "table": "6.7.5" }, "jest": { diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss index fee87969..f715e5fc 100644 --- a/src/actionlist/action-list-item.scss +++ b/src/actionlist/action-list-item.scss @@ -204,7 +204,7 @@ visibility: hidden; opacity: 0; transition: - visibility 0 linear $actionList-item-checkmark-transition-timing, + visibility 0 linear $actionList-item-checkmark-transition-timing, opacity $actionList-item-checkmark-transition-timing; } diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss index f543397c..62051f5c 100644 --- a/src/autocomplete/autocomplete.scss +++ b/src/autocomplete/autocomplete.scss @@ -44,7 +44,7 @@ } &.selected, - &[aria-selected=true], + &[aria-selected='true'], &.navigation-focus { color: var(--color-fg-on-emphasis); text-decoration: none; diff --git a/src/base/base.scss b/src/base/base.scss index 47f6fd73..c0772e87 100644 --- a/src/base/base.scss +++ b/src/base/base.scss @@ -46,6 +46,7 @@ hr, background: transparent; border: 0; border-bottom: $border-width $border-style var(--color-border-muted); + @include clearfix(); } diff --git a/src/base/index.scss b/src/base/index.scss index c9a0de1b..67372269 100644 --- a/src/base/index.scss +++ b/src/base/index.scss @@ -1,5 +1,4 @@ @import '../support/index.scss'; - @import './normalize.scss'; @import './base.scss'; @import './kbd.scss'; diff --git a/src/blankslate/index.scss b/src/blankslate/index.scss index 46b7f4c7..80af2579 100644 --- a/src/blankslate/index.scss +++ b/src/blankslate/index.scss @@ -1,3 +1,2 @@ @import '../support/index.scss'; - @import './blankslate.scss'; diff --git a/src/breadcrumb/breadcrumb.scss b/src/breadcrumb/breadcrumb.scss index 5a30b671..c71c74b2 100644 --- a/src/breadcrumb/breadcrumb.scss +++ b/src/breadcrumb/breadcrumb.scss @@ -21,7 +21,7 @@ } .breadcrumb-item-selected, -.breadcrumb-item[aria-current]:not([aria-current=false]) { +.breadcrumb-item[aria-current]:not([aria-current='false']) { &::after { content: none; } diff --git a/src/buttons/button-group.scss b/src/buttons/button-group.scss index 429fad94..2bb803cb 100644 --- a/src/buttons/button-group.scss +++ b/src/buttons/button-group.scss @@ -6,6 +6,7 @@ .BtnGroup { display: inline-block; vertical-align: middle; + @include clearfix(); // Proper spacing for multiple button groups (a la, gollum editor) @@ -33,7 +34,7 @@ } &.selected, - &[aria-selected=true], + &[aria-selected='true'], &:focus, &:active, &:hover { @@ -66,7 +67,7 @@ } &.selected, - &[aria-selected=true], + &[aria-selected='true'], &:focus, &:active, &:hover { diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 0f239aca..0a4f19a0 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -24,7 +24,7 @@ &:disabled, &.disabled, - &[aria-disabled=true] { + &[aria-disabled='true'] { cursor: default; } @@ -84,14 +84,14 @@ } &.selected, - &[aria-selected=true] { + &[aria-selected='true'] { background-color: var(--color-btn-selected-bg); box-shadow: var(--color-primer-shadow-inset); } &:disabled, &.disabled, - &[aria-disabled=true] { + &[aria-disabled='true'] { color: var(--color-primer-fg-disabled); background-color: var(--color-btn-bg); border-color: var(--color-btn-border); @@ -127,14 +127,14 @@ &:active, &.selected, - &[aria-selected=true] { + &[aria-selected='true'] { background-color: var(--color-btn-primary-selected-bg); box-shadow: var(--color-btn-primary-selected-shadow); } &:disabled, &.disabled, - &[aria-disabled=true] { + &[aria-disabled='true'] { color: var(--color-btn-primary-disabled-text); background-color: var(--color-btn-primary-disabled-bg); border-color: var(--color-btn-primary-disabled-border); @@ -184,7 +184,7 @@ &:active, &.selected, - &[aria-selected=true] { + &[aria-selected='true'] { color: var(--color-btn-outline-selected-text); background-color: var(--color-btn-outline-selected-bg); border-color: var(--color-btn-outline-selected-border); @@ -193,7 +193,7 @@ &:disabled, &.disabled, - &[aria-disabled=true] { + &[aria-disabled='true'] { color: var(--color-btn-outline-disabled-text); background-color: var(--color-btn-outline-disabled-bg); border-color: var(--color-btn-border); @@ -242,7 +242,7 @@ &:active, &.selected, - &[aria-selected=true] { + &[aria-selected='true'] { color: var(--color-btn-danger-selected-text); background-color: var(--color-btn-danger-selected-bg); border-color: var(--color-btn-danger-selected-border); @@ -251,7 +251,7 @@ &:disabled, &.disabled, - &[aria-disabled=true] { + &[aria-disabled='true'] { color: var(--color-btn-danger-disabled-text); background-color: var(--color-btn-danger-disabled-bg); border-color: var(--color-btn-border); diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss index df048fad..bc42d675 100644 --- a/src/buttons/misc.scss +++ b/src/buttons/misc.scss @@ -21,7 +21,7 @@ } &:disabled, - &[aria-disabled=true] { + &[aria-disabled='true'] { &, &:hover { color: var(--color-primer-fg-disabled); @@ -50,7 +50,7 @@ &:active, &:focus, &.selected, - &[aria-selected=true], + &[aria-selected='true'], &.zeroclipboard-is-active { color: var(--color-accent-fg); background-color: none; @@ -59,14 +59,13 @@ box-shadow: var(--color-btn-focus-shadow); } - &:active - &.zeroclipboard-is-active { + &:active &.zeroclipboard-is-active { background-color: var(--color-btn-selected-bg); } &:disabled, &.disabled, - &[aria-disabled=true] { + &[aria-disabled='true'] { color: var(--color-primer-fg-disabled); background-color: transparent; } @@ -93,7 +92,7 @@ &:hover { color: var(--color-accent-fg); } &.disabled, - &[aria-disabled=true] { + &[aria-disabled='true'] { color: var(--color-primer-fg-disabled); cursor: default; diff --git a/src/color-modes/native.scss b/src/color-modes/native.scss index 0855fc86..2bc1c8be 100644 --- a/src/color-modes/native.scss +++ b/src/color-modes/native.scss @@ -2,6 +2,7 @@ // Enables color modes for native elements @include color-mode(light) { color-scheme: light; } + @include color-mode(dark) { color-scheme: dark; } [data-color-mode] { diff --git a/src/color-modes/themes/dark.scss b/src/color-modes/themes/dark.scss index 5390a9e5..fdeda058 100644 --- a/src/color-modes/themes/dark.scss +++ b/src/color-modes/themes/dark.scss @@ -1,5 +1,4 @@ @import '../../support/index.scss'; - @import '@primer/primitives/dist/scss/colors/_dark.scss'; @include color-mode-theme(dark) { diff --git a/src/color-modes/themes/dark_colorblind.scss b/src/color-modes/themes/dark_colorblind.scss index 01634919..057a9f3d 100644 --- a/src/color-modes/themes/dark_colorblind.scss +++ b/src/color-modes/themes/dark_colorblind.scss @@ -1,5 +1,4 @@ @import '../../support/index.scss'; - @import '@primer/primitives/dist/scss/colors/_dark_colorblind.scss'; @include color-mode-theme(dark_colorblind) { diff --git a/src/color-modes/themes/dark_dimmed.scss b/src/color-modes/themes/dark_dimmed.scss index 04fff339..6f9de214 100644 --- a/src/color-modes/themes/dark_dimmed.scss +++ b/src/color-modes/themes/dark_dimmed.scss @@ -1,5 +1,4 @@ @import '../../support/index.scss'; - @import '@primer/primitives/dist/scss/colors/_dark_dimmed.scss'; @include color-mode-theme(dark_dimmed) { diff --git a/src/color-modes/themes/dark_high_contrast.scss b/src/color-modes/themes/dark_high_contrast.scss index c1a46d22..8203dd8e 100644 --- a/src/color-modes/themes/dark_high_contrast.scss +++ b/src/color-modes/themes/dark_high_contrast.scss @@ -1,5 +1,4 @@ @import '../../support/index.scss'; - @import '@primer/primitives/dist/scss/colors/_dark_high_contrast.scss'; @include color-mode-theme(dark_high_contrast) { diff --git a/src/color-modes/themes/light.scss b/src/color-modes/themes/light.scss index 5190756d..9aa84f2f 100644 --- a/src/color-modes/themes/light.scss +++ b/src/color-modes/themes/light.scss @@ -1,5 +1,4 @@ @import '../../support/index.scss'; - @import '@primer/primitives/dist/scss/colors/_light.scss'; @include color-mode-theme(light, true) { diff --git a/src/color-modes/themes/light_colorblind.scss b/src/color-modes/themes/light_colorblind.scss index 64ad6b2f..dd043514 100644 --- a/src/color-modes/themes/light_colorblind.scss +++ b/src/color-modes/themes/light_colorblind.scss @@ -1,5 +1,4 @@ @import '../../support/index.scss'; - @import '@primer/primitives/dist/scss/colors/_light_colorblind.scss'; @include color-mode-theme(light_colorblind) { diff --git a/src/color-modes/themes/light_high_contrast.scss b/src/color-modes/themes/light_high_contrast.scss index 7664fc48..3ff08538 100644 --- a/src/color-modes/themes/light_high_contrast.scss +++ b/src/color-modes/themes/light_high_contrast.scss @@ -1,5 +1,4 @@ @import '../../support/index.scss'; - @import '@primer/primitives/dist/scss/colors/_light_high_contrast.scss'; @include color-mode-theme(light_high_contrast) { diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index ffa5cd1a..b7b2ee32 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -54,6 +54,7 @@ label { // Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad @supports (-webkit-touch-callout: none) { font-size: $h4-size; + @include breakpoint(md) { font-size: $body-font-size; } @@ -181,6 +182,7 @@ textarea.form-control { .hfields { // stylelint-disable-next-line primer/spacing margin: 15px 0; + @include clearfix; .form-group { diff --git a/src/labels/index.scss b/src/labels/index.scss index ee15ed5a..2e33e896 100644 --- a/src/labels/index.scss +++ b/src/labels/index.scss @@ -1,6 +1,5 @@ @import '../support/index.scss'; @import './mixins.scss'; - @import './issue-labels.scss'; @import './labels.scss'; @import './states.scss'; diff --git a/src/labels/labels.scss b/src/labels/labels.scss index 7ada9873..6e2f76a3 100644 --- a/src/labels/labels.scss +++ b/src/labels/labels.scss @@ -10,6 +10,7 @@ .label, // TODO: Deprecte .Label { @include labels-base; + border-color: var(--color-border-default); &:hover { diff --git a/src/layout/index.scss b/src/layout/index.scss index 7172a370..70d2e2e1 100644 --- a/src/layout/index.scss +++ b/src/layout/index.scss @@ -1,6 +1,5 @@ @import '../support/index.scss'; @import './mixins.scss'; - @import './container.scss'; @import './grid.scss'; @import './grid-offset.scss'; diff --git a/src/layout/layout.scss b/src/layout/layout.scss index 44c261a1..37c273d1 100644 --- a/src/layout/layout.scss +++ b/src/layout/layout.scss @@ -2,6 +2,7 @@ .Layout { display: grid; + --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')}; --Layout-gutter: 16px; @@ -25,7 +26,6 @@ grid-auto-flow: column; grid-template-columns: auto 0 1fr; // sidebar column, separator, main column - // stylelint-disable-next-line primer/no-undefined-vars grid-gap: var(--Layout-gutter); .Layout-sidebar { @@ -146,7 +146,6 @@ } .Layout-sidebar { - // stylelint-disable-next-line primer/no-undefined-vars width: var(--Layout-sidebar-width); } @@ -169,17 +168,14 @@ } .Layout-main-centered-md { - // stylelint-disable-next-line primer/no-undefined-vars max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter)); } .Layout-main-centered-lg { - // stylelint-disable-next-line primer/no-undefined-vars max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter)); } .Layout-main-centered-xl { - // stylelint-disable-next-line primer/no-undefined-vars max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter)); } } diff --git a/src/layout/mixins.scss b/src/layout/mixins.scss index ab9a57f6..6c59ba97 100644 --- a/src/layout/mixins.scss +++ b/src/layout/mixins.scss @@ -7,9 +7,9 @@ .Layout-sidebar, .Layout-divider, .Layout-main { - width: 100% !important; - grid-column: 1 !important; - } + width: 100% !important; + grid-column: 1 !important; + } &.Layout--sidebarPosition-flowRow-start { .Layout-sidebar { diff --git a/src/markdown/images.scss b/src/markdown/images.scss index 694085e6..aeeddb11 100644 --- a/src/markdown/images.scss +++ b/src/markdown/images.scss @@ -10,12 +10,12 @@ box-sizing: content-box; background-color: var(--color-canvas-default); - &[align=right] { + &[align='right'] { // stylelint-disable-next-line primer/spacing padding-left: 20px; } - &[align=left] { + &[align='left'] { // stylelint-disable-next-line primer/spacing padding-right: 20px; } diff --git a/src/marketing/type/typography.scss b/src/marketing/type/typography.scss index 8520fd2a..2f82267b 100644 --- a/src/marketing/type/typography.scss +++ b/src/marketing/type/typography.scss @@ -21,6 +21,7 @@ font-size: map-get($pairing, 'size') !important; line-height: map-get($pairing, 'lh') !important; + @if (map-get($pairing, 'size') >= $mktg-header-weight-threshold) { font-weight: $mktg-header-weight-large !important; } @if (nth($sizes, 1) != nth($sizes, 2)) { @@ -75,7 +76,9 @@ font-size: map-get($pairing, 'size') !important; line-height: map-get($pairing, 'lh') !important; + @if (map-get($pairing, 'size') >= $mktg-body-spacing-threshold) { letter-spacing: $mktg-body-spacing-large !important; } + @if (map-get($pairing, 'size') >= $mktg-body-weight-threshold) { font-weight: $font-weight-semibold; } @if (nth($sizes, 1) != nth($sizes, 2)) { diff --git a/src/navigation/filter-list.scss b/src/navigation/filter-list.scss index fe447f83..68a317cb 100644 --- a/src/navigation/filter-list.scss +++ b/src/navigation/filter-list.scss @@ -41,8 +41,8 @@ } &.selected, - &[aria-selected=true], - &[aria-current]:not([aria-current=false]) { + &[aria-selected='true'], + &[aria-current]:not([aria-current='false']) { color: var(--color-fg-on-emphasis); background-color: var(--color-accent-emphasis); } diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss index 5159b494..ef921593 100644 --- a/src/navigation/menu.scss +++ b/src/navigation/menu.scss @@ -49,8 +49,8 @@ } &.selected, - &[aria-selected=true], - &[aria-current]:not([aria-current=false]) { + &[aria-selected='true'], + &[aria-current]:not([aria-current='false']) { cursor: default; background-color: var(--color-menu-bg-active); diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss index 27552797..7fb8a90d 100644 --- a/src/navigation/sidenav.scss +++ b/src/navigation/sidenav.scss @@ -59,7 +59,7 @@ background-color: var(--color-canvas-subtle); } -.SideNav-item[aria-current]:not([aria-current=false]), +.SideNav-item[aria-current]:not([aria-current='false']), .SideNav-item[aria-selected='true'] { background-color: var(--color-sidenav-selected-bg); @@ -101,7 +101,7 @@ outline: none; } -.SideNav-subItem[aria-current]:not([aria-current=false]), +.SideNav-subItem[aria-current]:not([aria-current='false']), .SideNav-subItem[aria-selected='true'] { font-weight: $font-weight-semibold; color: var(--color-fg-default); diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss index 1f83a4a4..89e03e8f 100644 --- a/src/navigation/subnav.scss +++ b/src/navigation/subnav.scss @@ -40,8 +40,8 @@ } &.selected, - &[aria-selected=true], - &[aria-current]:not([aria-current=false]) { + &[aria-selected='true'], + &[aria-current]:not([aria-current='false']) { z-index: 2; color: var(--color-fg-on-emphasis); background-color: var(--color-accent-emphasis); diff --git a/src/navigation/tabnav.scss b/src/navigation/tabnav.scss index caf2c0b0..5d52cc56 100644 --- a/src/navigation/tabnav.scss +++ b/src/navigation/tabnav.scss @@ -28,8 +28,8 @@ transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1); &.selected, - &[aria-selected=true], - &[aria-current]:not([aria-current=false]) { + &[aria-selected='true'], + &[aria-current]:not([aria-current='false']) { color: var(--color-fg-default); background-color: var(--color-canvas-default); // cover bottom border border-color: var(--color-border-default); diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss index c6cb37cd..e824ef9d 100644 --- a/src/navigation/underline-nav.scss +++ b/src/navigation/underline-nav.scss @@ -83,6 +83,7 @@ $nav-height: $spacer-3 * 3 !default; // 48px &.focus, &:focus { @include focusOutline; + outline-offset: -2px; } diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss index 541efb68..1ba48457 100644 --- a/src/pagination/pagination.scss +++ b/src/pagination/pagination.scss @@ -42,7 +42,7 @@ .current, .current:hover, - [aria-current]:not([aria-current=false]) { + [aria-current]:not([aria-current='false']) { color: var(--color-fg-on-emphasis); background-color: var(--color-accent-emphasis); border-color: transparent; @@ -50,10 +50,10 @@ .gap, .disabled, - [aria-disabled=true], + [aria-disabled='true'], .gap:hover, .disabled:hover, - [aria-disabled=true]:hover { + [aria-disabled='true']:hover { color: var(--color-primer-fg-disabled); cursor: default; border-color: transparent; diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index 1c78e650..1a9d50df 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -386,7 +386,7 @@ $SelectMenu-max-height: 480px !default; // // Visible when a user clicks/taps on a list item -.SelectMenu-item[aria-checked=true] { +.SelectMenu-item[aria-checked='true'] { font-weight: $font-weight-semibold; color: var(--color-fg-default); @@ -402,7 +402,7 @@ $SelectMenu-max-height: 480px !default; // Prevent list items to be selected .SelectMenu-item:disabled, -.SelectMenu-item[aria-disabled=true] { +.SelectMenu-item[aria-disabled='true'] { color: var(--color-primer-fg-disabled); pointer-events: none; } diff --git a/src/support/mixins/color-modes.scss b/src/support/mixins/color-modes.scss index e4ad958a..6383c279 100644 --- a/src/support/mixins/color-modes.scss +++ b/src/support/mixins/color-modes.scss @@ -8,6 +8,7 @@ /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331 } } + @else { [data-color-mode="light"][data-light-theme="#{$theme-name}"], [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] { @@ -36,6 +37,7 @@ @content; } } + @else { [data-color-mode="light"][data-light-theme*="#{$mode}"], [data-color-mode="dark"][data-dark-theme*="#{$mode}"] { @@ -84,6 +86,7 @@ @if $type == dark { $dark-colors: append($dark-colors, (--color-#{$name}, #{$color})); } + @else { $light-colors: append($light-colors, (--color-#{$name}, #{$color})); } diff --git a/src/support/mixins/typography.scss b/src/support/mixins/typography.scss index 23ec0e3e..cc5e8583 100644 --- a/src/support/mixins/typography.scss +++ b/src/support/mixins/typography.scss @@ -47,7 +47,6 @@ // 32px on desktop @include breakpoint(md) { font-size: $h1-size; } - } @mixin f2-responsive { @@ -62,7 +61,6 @@ // 20px on desktop @include breakpoint(md) { font-size: $h3-size; } - } // These use the mixins from above for responsive heading sizes. @@ -70,15 +68,18 @@ // couple the responsive font-size with the font-weight. @mixin h1-responsive { @include f1-responsive; + font-weight: $font-weight-bold; } @mixin h2-responsive { @include f2-responsive; + font-weight: $font-weight-bold; } @mixin h3-responsive { @include f3-responsive; + font-weight: $font-weight-bold; } diff --git a/stylelint.config.cjs b/stylelint.config.cjs index 3f69dfb7..6f1df8cd 100644 --- a/stylelint.config.cjs +++ b/stylelint.config.cjs @@ -1,16 +1,7 @@ module.exports = { extends: ['@primer/stylelint-config'], - plugins: ['stylelint-scss'], - customSyntax: require('postcss-scss'), - ignoreFiles: ['src/fonts/**/*'], + ignoreFiles: ['**/*.js', '**/*.cjs'], rules: { - 'scss/dollar-variable-default': [true, {ignore: 'local'}], - 'primer/no-override': false, - 'primer/colors': true, - 'primer/borders': true, - 'primer/spacing': true, - 'primer/typography': true, - 'primer/box-shadow': true, - 'primer/no-undefined-vars': [true, {files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}] + 'primer/no-override': false } } diff --git a/yarn.lock b/yarn.lock index 59c0d644..9878273c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -970,16 +970,18 @@ resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.2.0.tgz#049fc6d2fef20ea7fa517e583671aa0a8a26e9e9" integrity sha512-7HkPAn7gnCcKPfDrqJc9OCUttPwBcoJRj2JR78obUbCkSfRV4I7cZiMS8tf9rYJ9HV69u+km8ab2Jrf4eOnVBg== -"@primer/stylelint-config@12.1.1": - version "12.1.1" - resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.1.1.tgz#d4508c1e8db259482d45b88c54ecd261168ed087" - integrity sha512-GJjN0YV8WZFNFdB4NwJwW1Jv71m4KEFhMGzLXn8jeTVcjIXwoME1U17t5Ibo2WS6Ot2B1+7aKQwAWD/LB7at2w== +"@primer/stylelint-config@12.2.0": + version "12.2.0" + resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.2.0.tgz#361e60e09838b088a3f012edf260b52f3cdda90b" + integrity sha512-TzQR+8UNS39jqao2tCQOrjSiGSjWTaLyc4omEZpHhvSbVvYO1M+EmEQvK/1uoDK8IUSQpIRKvuDiQsHObpgD4Q== dependencies: anymatch "^3.1.1" globby "^11.0.1" lodash.kebabcase "^4.1.1" + postcss-scss "^4.0.2" postcss-value-parser "^4.0.2" string.prototype.matchall "^4.0.2" + stylelint-config-standard "24.0.0" stylelint-no-unsupported-browser-features "^5.0.1" stylelint-order "^5.0.0" stylelint-scss "^4.0.0" @@ -4574,7 +4576,7 @@ postcss-safe-parser@^6.0.0: resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1" integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ== -postcss-scss@4.0.2: +postcss-scss@4.0.2, postcss-scss@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.2.tgz#39ddcc0ab32f155d5ab328ee91353d67a52d537b" integrity sha512-xfdkU128CkKKKVAwkyt0M8OdnelJ3MRcIRAPPQkRpoPeuzWY3RIeg7piRCpZ79MK7Q16diLXMMAD9dN5mauPlQ== @@ -5241,6 +5243,18 @@ style-search@^0.1.0: resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI= +stylelint-config-recommended@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz#fd2523a322836005ad9bf473d3e5534719c09f9d" + integrity sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw== + +stylelint-config-standard@24.0.0: + version "24.0.0" + resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-24.0.0.tgz#6823f207ab997ae0b641f9a636d007cc44d77541" + integrity sha512-+RtU7fbNT+VlNbdXJvnjc3USNPZRiRVp/d2DxOF/vBDDTi0kH5RX2Ny6errdtZJH3boO+bmqIYEllEmok4jiuw== + dependencies: + stylelint-config-recommended "^6.0.0" + stylelint-no-unsupported-browser-features@^5.0.1: version "5.0.2" resolved "https://registry.yarnpkg.com/stylelint-no-unsupported-browser-features/-/stylelint-no-unsupported-browser-features-5.0.2.tgz#f253d5a9258cfd1a62f7751396e274dc6e4b29e3" @@ -5258,7 +5272,7 @@ stylelint-order@^5.0.0: postcss "^8.3.11" postcss-sorting "^7.0.1" -stylelint-scss@4.0.0, stylelint-scss@^4.0.0: +stylelint-scss@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.0.0.tgz#4901ced92b9c68e37649799a39defbd5f2ac5bcd" integrity sha512-lIRhPqtI6I065EJ6aI4mWKsmQt8Krnu6aF9XSL9s8Nd2f/cDKImST0T9TfjnUul3ReKYWozkG9dlpNTZH2FB9w==