From 5381cbb0447cde2989b0572cc4101c2b7646e7f9 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 1 Apr 2023 13:00:53 +0000 Subject: [PATCH 1/2] Bump stylelint-order from 4.1.0 to 6.0.3 Bumps [stylelint-order](https://github.com/hudochenkov/stylelint-order) from 4.1.0 to 6.0.3. - [Release notes](https://github.com/hudochenkov/stylelint-order/releases) - [Changelog](https://github.com/hudochenkov/stylelint-order/blob/master/CHANGELOG.md) - [Commits](https://github.com/hudochenkov/stylelint-order/compare/4.1.0...6.0.3) --- updated-dependencies: - dependency-name: stylelint-order dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ee6318d6b..95e220e62 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "sinon": "^15.0.1", "stylelint": "^13.13.0", "stylelint-config-standard": "^22.0.0", - "stylelint-order": "^4.0.0", + "stylelint-order": "^6.0.3", "svg-sprite-generator": "0.0.7", "svgo": "^3.0.0", "terser-webpack-plugin": "^4.1.0", From b77bcf9d6748f7c6f7c87251d710f96293edd828 Mon Sep 17 00:00:00 2001 From: Ksenia Berezina Date: Mon, 15 May 2023 15:46:26 -0400 Subject: [PATCH 2/2] No issue - bump styleint version --- .stylelintrc | 2 + package.json | 4 +- webcompat/static/css/src/filter-bar.css | 2 +- webcompat/static/css/src/form.css | 2 +- .../static/css/src/issue-wizard-popup.css | 2 +- webcompat/static/css/src/issue-wizard.css | 16 +-- webcompat/static/css/src/issue.css | 13 +- webcompat/static/css/src/label-box.css | 2 +- webcompat/static/css/src/label-editor.css | 2 +- webcompat/static/css/src/variables.css | 112 +++++++++--------- 10 files changed, 80 insertions(+), 77 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 7b4d4398c..4899a4f1c 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -18,6 +18,8 @@ "selector-attribute-operator-space-before": "always", "selector-attribute-operator-space-after": "always", "selector-attribute-brackets-space-inside": "never", + "selector-class-pattern": null, + "selector-id-pattern": null, "declaration-block-trailing-semicolon": "always", "declaration-no-important": true, "declaration-colon-space-before": "never", diff --git a/package.json b/package.json index 95e220e62..5279f0ea5 100644 --- a/package.json +++ b/package.json @@ -51,8 +51,8 @@ "postcss-url": "^10.1.1", "prettier": "2.8.3", "sinon": "^15.0.1", - "stylelint": "^13.13.0", - "stylelint-config-standard": "^22.0.0", + "stylelint": "^14.4.0", + "stylelint-config-standard": "^25.0.0", "stylelint-order": "^6.0.3", "svg-sprite-generator": "0.0.7", "svgo": "^3.0.0", diff --git a/webcompat/static/css/src/filter-bar.css b/webcompat/static/css/src/filter-bar.css index a95744c6d..c6177c78f 100644 --- a/webcompat/static/css/src/filter-bar.css +++ b/webcompat/static/css/src/filter-bar.css @@ -73,7 +73,7 @@ } .filter-bar-dropdown-listbox { - background-color: rgba(255, 255, 255, .8); + background-color: rgb(255 255 255 / 80%); display: none; left: 0; position: absolute; diff --git a/webcompat/static/css/src/form.css b/webcompat/static/css/src/form.css index d0f3734d9..fd8f8c265 100644 --- a/webcompat/static/css/src/form.css +++ b/webcompat/static/css/src/form.css @@ -237,7 +237,7 @@ label[for = "image"] { .form-upload .label-remove:not(.is-hidden) { background-color: #fff; - border: 1px solid rgba(255, 201, 0, 1); + border: 1px solid rgb(255 201 0 / 100%); border-radius: 50%; cursor: pointer; left: auto; diff --git a/webcompat/static/css/src/issue-wizard-popup.css b/webcompat/static/css/src/issue-wizard-popup.css index 9ad2a4840..dfe071f4f 100644 --- a/webcompat/static/css/src/issue-wizard-popup.css +++ b/webcompat/static/css/src/issue-wizard-popup.css @@ -18,7 +18,7 @@ } .popup-overlay { - background-color: rgba(0, 0, 0, .65); + background-color: rgb(0 0 0 / 65%); display: none; height: 100%; left: 0; diff --git a/webcompat/static/css/src/issue-wizard.css b/webcompat/static/css/src/issue-wizard.css index 12cda12f3..46b76e38f 100644 --- a/webcompat/static/css/src/issue-wizard.css +++ b/webcompat/static/css/src/issue-wizard.css @@ -50,7 +50,7 @@ } #wizard-container { - background-color: var(--base-colorDark); + background-color: var(--base-color-dark); display: flex; justify-content: space-evenly; margin-left: calc(var(--grid-outermargin-s) * -1); @@ -69,7 +69,7 @@ } #wizard-container.shadow { - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5); + box-shadow: 0 2px 4px 0 rgb(0 0 0 / 50%); } #wizard-container .grid { @@ -213,7 +213,7 @@ .step-container { background-color: var(--base-background); border-radius: 5px; - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2); + box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%); display: flex; margin-top: 23px; padding: 0; @@ -253,7 +253,7 @@ .issue-disclaimer { background-color: var(--base-background); border-radius: 5px; - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2); + box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%); font-size: 14px; line-height: 22px; margin: 16px auto -35px; @@ -938,12 +938,12 @@ .step-container.step-url { background-color: var(--base-background); - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2); + box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%); margin-top: 23px; } .input-control { - padding: 25px 20px 14px 20px; + padding: 25px 20px 14px; } .input-control .input-description { @@ -975,7 +975,7 @@ } .button-control .input-control { - padding: 25px 0 14px 0; + padding: 25px 0 14px; } .with-validation-icons.is-validated .input-wrapper::after, @@ -1020,7 +1020,7 @@ } .device-data { - padding: 45px 20px 34px 20px; + padding: 45px 20px 34px; width: 70%; } diff --git a/webcompat/static/css/src/issue.css b/webcompat/static/css/src/issue.css index 7031e3ca8..c4adbdb28 100644 --- a/webcompat/static/css/src/issue.css +++ b/webcompat/static/css/src/issue.css @@ -99,7 +99,8 @@ overflow: auto; } -/* As we can not add a class to the img in the comment right now (markup parsers are complicated), we need to use the img element */ +/* As we can not add a class to the img in the comment right now +(markup parsers are complicated), we need to use the img element */ .comment-body img, .js-Issue-comment-body img { @@ -113,13 +114,13 @@ flex-wrap: nowrap; } #issue > .x2 { - flex-basis: 66.66666%; - max-width: 66.66666%; + flex-basis: 66.6667%; + max-width: 66.6667%; min-width: 0; } #issue > .x1 { - flex-basis: 33.33333%; - max-width: 33.33333%; + flex-basis: 33.3333%; + max-width: 33.3333%; min-width: 0; } } @@ -133,7 +134,7 @@ } .issue-details-nsfw::after { - background: var(--base-colorDark); + background: var(--base-color-dark); color: var(--base-background); content: "Click to show image"; cursor: pointer; diff --git a/webcompat/static/css/src/label-box.css b/webcompat/static/css/src/label-box.css index da5cce070..6d618f3ab 100644 --- a/webcompat/static/css/src/label-box.css +++ b/webcompat/static/css/src/label-box.css @@ -33,7 +33,7 @@ } .label-box-section + .label-box-section { - margin: 2px 0 0 0; + margin: 2px 0 0; } .label-box .label { diff --git a/webcompat/static/css/src/label-editor.css b/webcompat/static/css/src/label-editor.css index 4fb9e80a9..2b5ba7c53 100644 --- a/webcompat/static/css/src/label-editor.css +++ b/webcompat/static/css/src/label-editor.css @@ -30,7 +30,7 @@ .label-editor-container { background-color: var(--color-bg-box); border-radius: 2px; - box-shadow: 0 2px 2px rgba(0, 0, 0, .24), 0 0 2px rgba(0, 0, 0, .12); + box-shadow: 0 2px 2px rgb(0 0 0 / 24%), 0 0 2px rgb(0 0 0 / 12%); padding: 1em; } diff --git a/webcompat/static/css/src/variables.css b/webcompat/static/css/src/variables.css index 2a44eacc8..610332b14 100644 --- a/webcompat/static/css/src/variables.css +++ b/webcompat/static/css/src/variables.css @@ -1,6 +1,6 @@ :root { --base-background: #fff; - --base-colorDark: #ffc900; /* Dark Yellow */ + --base-color-dark: #ffc900; /* Dark Yellow */ --grid-outermargin-s: 9px; --grid-outermargin-m: 19px; --unit-gap: 45px; @@ -19,64 +19,64 @@ --button-primary-padding: 12px 23px; --button-thanks-padding: 7px 10px; --button-disabled-color: #000; - --color-bg-page: rgba(250, 250, 250, 1); /* #fafafa; */ - --color-bg-box: rgba(255, 255, 255, 1); /* #ffffff */ - --color-bg-comment-header: rgba(245, 245, 245, 1); /* #f5f5f5 */ - --color-first: rgba(255, 201, 0, 1); /* #ffc900 */ - --color-first-contrast: rgba(255, 243, 201, .8); - --color-first-transparent: rgba(255, 201, 1, .8); /* #ffc901 20% transparency */ - --color-first-light: rgba(255, 200, 3, .55); /* ffc803 45% transparency */ - --color-second: rgba(64, 64, 64, 1); /* #404040 */ - --color-third: rgba(240, 240, 240, 1); /* #f0f0f0 */ - --color-fourth: rgba(192, 255, 238, 1); /* #c0ffee */ - --color-form: rgba(0, 0, 0, .4); /* #000000 40% transparency */ - --color-footer: rgba(0, 0, 0, .12); /* #000000 12% transparency */ - --color-default: rgba(196, 196, 196, 1); /* c4c4c4 */ - --color-error: rgba(204, 23, 23, 1); /* #CC1717 */ - --color-error-transparent: rgba(204, 23, 23, .8); /* #CC1717 20% transparency */ - --color-warning: rgba(255, 144, 0, 1); /* #ff9000 */ - --color-success: rgba(47, 153, 0, 1); /* #2f9900 */ - --label-needs-triage: rgba(255, 153, 0, 1); /* #ff9900 */ - --label-needs-diagnosis: rgba(238, 204, 119, 1) /* #EECC77 */; - --label-needs-contact: rgba(187, 238, 204, 1); /* #BBEECC */ - --label-outreach: rgba(119, 187, 238, 1); /* #77BBEE */ - --label-site-contacted: rgba(187, 221, 238, 1); /* #BBDDEE */ + --color-bg-page: rgb(250 250 250 / 100%); /* #fafafa; */ + --color-bg-box: rgb(255 255 255 / 100%); /* #ffffff */ + --color-bg-comment-header: rgb(245 245 245 / 100%); /* #f5f5f5 */ + --color-first: rgb(255 201 0 / 100%); /* #ffc900 */ + --color-first-contrast: rgb(255 243 201 / 80%); + --color-first-transparent: rgb(255 201 1 / 80%); /* #ffc901 20% transparency */ + --color-first-light: rgb(255 200 3 / 55%); /* ffc803 45% transparency */ + --color-second: rgb(64 64 64 / 100%); /* #404040 */ + --color-third: rgb(240 240 240 / 100%); /* #f0f0f0 */ + --color-fourth: rgb(192 255 238 / 100%); /* #c0ffee */ + --color-form: rgb(0 0 0 / 40%); /* #000000 40% transparency */ + --color-footer: rgb(0 0 0 / 12%); /* #000000 12% transparency */ + --color-default: rgb(196 196 196 / 100%); /* c4c4c4 */ + --color-error: rgb(204 23 23 / 100%); /* #CC1717 */ + --color-error-transparent: rgb(204 23 23 / 80%); /* #CC1717 20% transparency */ + --color-warning: rgb(255 144 0 / 100%); /* #ff9000 */ + --color-success: rgb(47 153 0 / 100%); /* #2f9900 */ + --label-needs-triage: rgb(255 153 0 / 100%); /* #ff9900 */ + --label-needs-diagnosis: rgb(238 204 119 / 100%) /* #EECC77 */; + --label-needs-contact: rgb(187 238 204 / 100%); /* #BBEECC */ + --label-outreach: rgb(119 187 238 / 100%); /* #77BBEE */ + --label-site-contacted: rgb(187 221 238 / 100%); /* #BBDDEE */ --label-closed: var(--color-default); - --label-color-type: rgba(153, 221, 221, 1); /* #99DDDD */ - --label-color-browser: rgba(255, 204, 0, 1); /* #FFCC00 */ - --label-color-status: rgba(0, 135, 255), 1; /* #0088FF */ - --label-color-priority: rgba(17, 170, 153, 1); /* #11AA99 */ - --label-color-nsfw: rgba(221, 0, 0, 1); /* #DD0000 */ - --label-color-device: rgba(188, 143, 143, 1); /* rosybrown */ - --label-color-os: rgba(102, 51, 153, 1); /* rebeccapurple */ - --label-fix-me-assign-a-status: rgba(255, 0, 0, 1); /* #ff0000 */ + --label-color-type: rgb(153 221 221 / 100%); /* #99DDDD */ + --label-color-browser: rgb(255 204 0 / 100%); /* #FFCC00 */ + --label-color-status: rgb(0 135 255), 1; /* #0088FF */ + --label-color-priority: rgb(17 170 153 / 100%); /* #11AA99 */ + --label-color-nsfw: rgb(221 0 0 / 100%); /* #DD0000 */ + --label-color-device: rgb(188 143 143 / 100%); /* rosybrown */ + --label-color-os: rgb(102 51 153 / 100%); /* rebeccapurple */ + --label-fix-me-assign-a-status: rgb(255 0 0 / 100%); /* #ff0000 */ /* Bug form redesign */ - --wizard-step-complete: rgba(86, 99, 140, 1); /* #56638c */ - --wizard-step-empty: rgba(243, 243, 247, 1); /* #f3f3f7 */ - --wizard-step-color: rgba(255, 255, 255, 1); /* #ffffff */ - --wizard-step-error: rgba(226, 40, 80, 1); /* #e22850 */ - --wizard-grey-bg: rgba(247, 247, 247, 1); /* #f7f7f7 */ - --link-color: rgba(0, 94, 255, 1); /* #005eff */ - --issue-type-bg: rgba(86, 99, 140, 1); /* #56638c */ - --issue-selected-outline: rgba(34, 181, 115, 1); /* #22b573 */ - --input-placeholder: rgba(64, 64, 64, .5); /* #404040 */ - --blowser-icon-bg: rgba(255, 255, 255, 1); /* #ffffff */ - --blowser-icon-border: rgba(64, 64, 64, .3); /* #cccccc */ - --button-box-border: rgba(228, 227, 227, 1); /* #e4e3e3 */ - --warning-border: rgba(255, 184, 158, 1); /* #ffb89e */ - --screenshot-shadow: rgba(0, 0, 0, .3); /* #000000 */ - --warm-grey: rgba(151, 151, 151, 1); /* #979797 */ - --upload-background: rgba(231, 231, 231, 1); /* #e7e7e7 */ - --dot-color: rgba(50, 60, 89, 1); /* #323c59 */ + --wizard-step-complete: rgb(86 99 140 / 100%); /* #56638c */ + --wizard-step-empty: rgb(243 243 247 / 100%); /* #f3f3f7 */ + --wizard-step-color: rgb(255 255 255 / 100%); /* #ffffff */ + --wizard-step-error: rgb(226 40 80 / 100%); /* #e22850 */ + --wizard-grey-bg: rgb(247 247 247 / 100%); /* #f7f7f7 */ + --link-color: rgb(0 94 255 / 100%); /* #005eff */ + --issue-type-bg: rgb(86 99 140 / 100%); /* #56638c */ + --issue-selected-outline: rgb(34 181 115 / 100%); /* #22b573 */ + --input-placeholder: rgb(64 64 64 / 50%); /* #404040 */ + --blowser-icon-bg: rgb(255 255 255 / 100%); /* #ffffff */ + --blowser-icon-border: rgb(64 64 64 / 30%); /* #cccccc */ + --button-box-border: rgb(228 227 227 / 100%); /* #e4e3e3 */ + --warning-border: rgb(255 184 158 / 100%); /* #ffb89e */ + --screenshot-shadow: rgb(0 0 0 / 30%); /* #000000 */ + --warm-grey: rgb(151 151 151 / 100%); /* #979797 */ + --upload-background: rgb(231 231 231 / 100%); /* #e7e7e7 */ + --dot-color: rgb(50 60 89 / 100%); /* #323c59 */ /* Console log messages */ - --level-log-border: rgba(242, 242, 244, 1); /* #F2F2F4 */ - --level-warn-background: rgba(255, 251, 214, 1); /* #FFFBD6 */ - --level-warn-border: rgba(215, 182, 0, .28); /* #D7B600 */ - --level-warn-color: rgba(113, 81, 0, 1); /* #715100 */ - --level-error-background: rgba(253, 242, 245, 1); /* #FDF2F5 */ - --level-error-border: rgba(215, 0, 34, .12); /* #D70022 */ - --level-error-color: rgba(164, 0, 15, 1); /* #A4000F */ - --log-link-color: rgba(0, 62, 170, 1); /* #003EAA */ + --level-log-border: rgb(242 242 244 / 100%); /* #F2F2F4 */ + --level-warn-background: rgb(255 251 214 / 100%); /* #FFFBD6 */ + --level-warn-border: rgb(215 182 0 / 28%); /* #D7B600 */ + --level-warn-color: rgb(113 81 0 / 100%); /* #715100 */ + --level-error-background: rgb(253 242 245 / 100%); /* #FDF2F5 */ + --level-error-border: rgb(215 0 34 / 12%); /* #D70022 */ + --level-error-color: rgb(164 0 15 / 100%); /* #A4000F */ + --log-link-color: rgb(0 62 170 / 100%); /* #003EAA */ }