Auto merge of #4367 - Turbo87:body-class, r=Turbo87

Replace `ember-set-body-class` addon

We can achieve the same thing with data attributes, with a bit less code :)

Author: bors

app/helpers/set-theme.js

@@ -0,0 +1,11 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function ([theme]) {
+  if (window.document) {
+    if (theme) {
+      window.document.documentElement.dataset.theme = theme;
+    } else {
+      delete window.document.documentElement.dataset.theme;
+    }
+  }
+});

app/styles/application.module.css

@@ -29,7 +29,7 @@
     --placeholder-bg2: hsl(213, 16%, 75%);
 }
 
-:global(.new-design) {
+:root[data-theme="new-design"] {
     --header-bg-color: var(--violet800);
     --main-bg: white;
     --footer-bg-color: var(--grey900);

app/templates/application.hbs

@@ -1,6 +1,7 @@
 <HeadLayout />
 
 {{page-title "crates.io: Rust Package Registry" separator=' - ' prepend=true}}
+{{set-theme (if this.design.useNewDesign "new-design")}}
 
 <ProgressBar/>
 <NotificationContainer @position="top-right"/>
@@ -19,7 +20,4 @@
   <button type="button" local-class="toggle-design-button" {{on "click" this.design.toggle}}>
     Toggle Design
   </button>
-{{/if}}
-{{#if this.design.useNewDesign}}
-  {{set-body-class "new-design"}}
 {{/if}}

package.json

@@ -101,7 +101,6 @@
     "ember-qunit": "5.1.5",
     "ember-resolver": "8.0.3",
     "ember-router-scroll": "4.1.2",
-    "ember-set-body-class": "1.0.2",
     "ember-source": "3.28.8",
     "ember-svg-jar": "2.3.3",
     "ember-template-lint": "3.15.0",

tests/helpers/index.js

@@ -10,18 +10,15 @@ export function setupApplicationTest(hooks, options) {
   upstreamSetupApplicationTest(hooks, options);
   setupMirage(hooks);
   setupSentryMock(hooks);
-  setupAppTestBodyClass(hooks);
+  setupAppTestDataAttr(hooks);
 }
 
-function setupAppTestBodyClass(hooks) {
-  const ID = 'app-test';
-
+function setupAppTestDataAttr(hooks) {
   hooks.beforeEach(function () {
-    this.bodyClass = this.owner.lookup('service:body-class');
-    this.bodyClass.register(ID, ['app-test']);
+    document.documentElement.dataset.appTest = '';
   });
 
   hooks.afterEach(function () {
-    this.bodyClass.deregister(ID);
+    delete document.documentElement.dataset.appTest;
   });
 }

vendor/qunit.css

@@ -1,3 +1,3 @@
-body.app-test .ember-application {
+[data-app-test] .ember-application {
   background-color: var(--header-bg-color);
 }

yarn.lock

@@ -6970,13 +6970,6 @@ ember-router-scroll@4.1.2:
     ember-cli-babel "^7.26.6"
     ember-compatibility-helpers "^1.2.5"
 
-ember-set-body-class@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/ember-set-body-class/-/ember-set-body-class-1.0.2.tgz#a970933f00e57ece6b6a88b96daf22f2374c3c34"
-  integrity sha512-SEsTwFp9SHTg4LgebhkUuLgYWg1VZD7I1QcrV2sTY583wu216OThoSs5szvS/KgSc1xD1Z22TFvOb848t2hGfw==
-  dependencies:
-    ember-cli-babel "^7.22.1"
-
 ember-source-channel-url@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ember-source-channel-url/-/ember-source-channel-url-3.0.0.tgz#bcd5be72c63fa0b8c390b3121783b462063e2a1b"