Merge pull request #10874 from Turbo87/composes

CSS: Remove `composes` usage

Author: Turbo87

app/components/color-scheme-menu.hbs

@@ -1,14 +1,15 @@
 <Dropdown local-class="dropdown" data-test-dark-mode-menu ...attributes as |dd|>
   <dd.Trigger @hideArrow={{true}} local-class="trigger" data-test-dark-mode-toggle>
     {{svg-jar this.icon local-class="icon"}}
-    <span local-class="trigger-label">Change color scheme</span>
+    <span class="sr-only">Change color scheme</span>
   </dd.Trigger>
 
   <dd.Menu local-class="menu" as |menu|>
     {{#each this.colorSchemes as |colorScheme|}}
       <menu.Item>
         <button
           local-class="menu-button {{if (eq colorScheme.mode this.colorScheme.scheme) 'selected'}}"
+          class="button-reset"
           type="button"
           {{on 'click' (fn this.colorScheme.set colorScheme.mode)}}
         >

app/components/color-scheme-menu.module.css

@@ -13,17 +13,12 @@
     padding: 0;
 }
 
-.trigger-label {
-    composes: sr-only from '../styles/shared/a11y.module.css'
-}
-
 .menu {
     right: 0;
     min-width: max-content;
 }
 
 .menu-button {
-    composes: button-reset from '../styles/shared/buttons.module.css';
     align-items: center;
     gap: var(--space-2xs);
     cursor: pointer;

app/components/crate-row.hbs

@@ -12,13 +12,14 @@
           @copyText='{{@crate.name}} = "{{@crate.default_version}}"'
           title="Copy Cargo.toml snippet to clipboard"
           local-class="copy-button"
+          class="button-reset"
           data-test-copy-toml-button
         >
           {{svg-jar "copy" alt="Copy Cargo.toml snippet to clipboard"}}
         </CopyButton>
       {{/if}}
     </div>
-    <div local-class="description" data-test-description>
+    <div local-class="description" class="text--small" data-test-description>
       {{ truncate-text @crate.description }}
     </div>
   </div>

app/components/crate-row.module.css

@@ -24,7 +24,6 @@
 }
 
 .copy-button {
-    composes: button-reset from '../styles/shared/buttons.module.css';
     color: var(--main-color);
     cursor: pointer;
 
@@ -66,7 +65,6 @@
 }
 
 .description {
-    composes: small from '../styles/shared/typography.module.css';
     margin-top: calc(var(--space-xs) / 2);
     line-height: 1.5;
 }

app/components/crate-sidebar.hbs

@@ -115,6 +115,7 @@
         target="_blank"
         rel="noopener noreferrer"
         local-class="playground-button"
+        class="button button--small"
         data-test-playground-button
       >
         Try on Rust Playground
@@ -125,7 +126,7 @@
         {{/if}}
       </a>
       {{#unless this.canHover}}
-        <p local-class="playground-help" data-test-playground-help>
+        <p local-class="playground-help" class="text--small" data-test-playground-help>
           The top 100 crates are available on the Rust Playground for you to
           try out directly in your browser.
         </p>
@@ -137,6 +138,7 @@
       @query={{hash inquire="crate-violation" crate=@crate.name}}
       data-test-id="link-crate-report"
       local-class="report-button"
+      class="button button--red button--small"
     >
       Report crate
     </LinkTo>

app/components/crate-sidebar.module.css

@@ -58,35 +58,22 @@
     }
 }
 
-.more-versions-link,
-.reverse-deps-link {
-    composes: small from '../styles/shared/typography.module.css';
-}
-
 .categories {
     margin: 0;
     padding-left: 20px;
     line-height: 1.5;
 }
 
-.button {
+.report-button, .playground-button {
     justify-content: center;
     width: 220px;
 }
 
-.report-button {
-    composes: button;
-    composes: red-button small from '../styles/shared/buttons.module.css';
-}
-
 .playground-button {
-    composes: button;
-    composes: yellow-button small from '../styles/shared/buttons.module.css';
     margin-bottom: var(--space-2xs);
 }
 
 .playground-help {
-    composes: small from '../styles/shared/typography.module.css';
     max-width: 220px;
     text-align: justify;
     line-height: 1.3em;

app/components/crate-sidebar/link.module.css

@@ -4,7 +4,8 @@
 }
 
 .title {
-    composes: heading from '../crate-sidebar.module.css';
+    font-size: 1.17em;
+    margin: 0 0 var(--space-s);
 }
 
 .icon {

app/components/dependency-list/row.module.css

@@ -89,7 +89,7 @@
     }
 }
 
-.metadata {
+.optional-label, .features-label {
     color: var(--grey600);
     text-transform: uppercase;
     letter-spacing: .7px;
@@ -123,14 +123,6 @@
     }
 }
 
-.optional-label {
-    composes: metadata;
-}
-
-.features-label {
-    composes: metadata;
-}
-
 .feature-list {
     padding: 0;
     margin: var(--space-2xs) var(--space-3xs);

app/components/email-input.hbs

@@ -27,6 +27,7 @@
           <button
             type='submit'
             local-class="save-button"
+            class="button button--small"
             disabled={{not this.value}}
             data-test-save-button
           >
@@ -35,7 +36,7 @@
 
           <button
             type="button"
-            local-class="cancel-button"
+            class="button button--small"
             data-test-cancel-button
             {{on "click" (fn (mut this.isEditing) false)}}
           >
@@ -60,7 +61,7 @@
       <div local-class="actions">
         <button
           type="button"
-          local-class="edit-button"
+          class="button button--small"
           data-test-edit-button
           {{on "click" this.editEmail}}
         >
@@ -79,7 +80,7 @@
         <div local-class="actions">
           <button
             type="button"
-            local-class="resend-button"
+            class="button button--small"
             disabled={{this.disableResend}}
             data-test-resend-button
             {{on "click" (perform this.resendEmailTask)}}

app/components/email-input.module.css

@@ -47,13 +47,6 @@
     align-items: center;
 }
 
-.save-button,
-.cancel-button,
-.edit-button,
-.resend-button {
-    composes: yellow-button small from '../styles/shared/buttons.module.css';
-}
-
 .save-button {
     margin-right: var(--space-2xs);
 }