Remove rose badge styles (#1473)

* chore: 🤖 remove rose badge stylesheets

addons/rose/app/styles/rose/components/_badge.scss

@@ -1,91 +0,0 @@
-@use '../utilities/type';
-@use '../variables/sizing';
-
-.rose-badge {
-  @include type.type(s, semibold);
-
-  padding: sizing.rems(xxxs) sizing.rems(xxs);
-  border-radius: sizing.rems(xxxs);
-  border-width: sizing.rems(xxxxs);
-  border-style: solid;
-  display: inline-block;
-
-  --color: var(--ui-gray-starker-1);
-  --border-color: transparent;
-  --background-color: var(--ui-gray-subtler-4);
-
-  color: var(--color);
-  border-color: var(--border-color);
-  background-color: var(--background-color);
-
-  &.rose-badge-outline {
-    --border-color: var(--ui-gray-starker-1);
-    --background-color: none;
-  }
-
-  &.rose-badge-dark {
-    --color: var(--ui-gray-subtler-6);
-    --border-color: var(--ui-gray-starker-1);
-    --background-color: var(--ui-gray-starker-1);
-  }
-
-  &.rose-badge-active {
-    --color: var(--info);
-  }
-
-  &.rose-badge-informational {
-    --color: var(--info-starker-1);
-    --border-color: var(--info-subtler-2);
-    --background-color: var(--info-subtler-2);
-  }
-
-  &.rose-badge-informational-outline {
-    --color: var(--info-starker-1);
-    --border-color: var(--info-starker-1);
-    --background-color: none;
-  }
-
-  &.rose-badge-alert {
-    --color: var(--alert-starker-1);
-    --background-color: var(--alert-subtler-1);
-  }
-
-  &.rose-badge-alert-outline {
-    --color: var(--alert-starker-1);
-    --border-color: var(--alert-starker-1);
-    --background-color: none;
-  }
-
-  &.rose-badge-error {
-    --color: var(--failure-starker-1);
-    --background-color: var(--failure-subtler-1);
-  }
-
-  &.rose-badge-error-outline {
-    --color: var(--failure-starker-1);
-    --border-color: var(--failure-starker-1);
-    --background-color: none;
-  }
-
-  &.rose-badge-success {
-    --color: var(--success-starker-1);
-    --background-color: var(--success-subtler-1);
-  }
-
-  &.rose-badge-success-outline {
-    --color: var(--success-starker-1);
-    --border-color: var(--success-starker-1);
-    --background-color: none;
-  }
-
-  &.rose-badge-warning {
-    --color: var(--warning-starker-1);
-    --background-color: var(--warning-subtler-1);
-  }
-
-  &.rose-badge-warning-outline {
-    --color: var(--warning-starker-1);
-    --border-color: var(--warning-starker-1);
-    --background-color: none;
-  }
-}

addons/rose/app/styles/rose/components/_index.scss

@@ -17,6 +17,5 @@
 @import 'table';
 @import 'message';
 @import 'link-button';
-@import 'badge';
 @import 'toolbar';
 @import 'code-editor';

addons/rose/app/styles/rose/components/dropdown/_dropdown.scss

@@ -41,11 +41,6 @@ $chevron-grey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%236
     border-radius: sizing.rems(xxxs);
     white-space: nowrap;
 
-    .rose-badge {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
     // Hide default twistie triangle
     // Webkit / Chromium
     &::-webkit-details-marker {
@@ -97,10 +92,6 @@ $chevron-grey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%236
 
   &[open] > .rose-dropdown-trigger {
     background-color: var(--ui-gray-subtler-4);
-
-    .rose-badge {
-      --background-color: var(--ui-gray-subtler-3);
-    }
   }
 
   .rose-dropdown-content {

ui/desktop/tests/end2end/targets.spec.js

@@ -110,7 +110,7 @@ test.describe('Targets end to end test suite', async () => {
       'div.rose-layout-page-body >> table >> tbody >> tr >> nth=0 >> td >> nth=1 >> .copyable-content'
     );
     const currentStatus = await boundaryWindow.innerText(
-      'div.rose-layout-page-body >> table >> tbody >> tr >> nth=0 >> td >> nth=3 >> .rose-badge-body'
+      'div.rose-layout-page-body >> table >> tbody >> tr >> nth=0 >> td >> nth=3 >> .hds-badge'
     );
 
     expect(await persistedProxy).toEqual(await currentProxy);