From c9254b4463933cdc9e22b78d645e97c8dece5a77 Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Thu, 17 Nov 2022 10:44:04 -0800
Subject: [PATCH] Remove rose badge styles (#1473)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 🤖 remove rose badge stylesheets
---
 .../app/styles/rose/components/_badge.scss    | 91 -------------------
 .../app/styles/rose/components/_index.scss    |  1 -
 .../rose/components/dropdown/_dropdown.scss   |  9 --
 ui/desktop/tests/end2end/targets.spec.js      |  2 +-
 4 files changed, 1 insertion(+), 102 deletions(-)
 delete mode 100644 addons/rose/app/styles/rose/components/_badge.scss

diff --git a/addons/rose/app/styles/rose/components/_badge.scss b/addons/rose/app/styles/rose/components/_badge.scss
deleted file mode 100644
index d1c66c9b8..000000000
--- a/addons/rose/app/styles/rose/components/_badge.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/addons/rose/app/styles/rose/components/_index.scss b/addons/rose/app/styles/rose/components/_index.scss
index eaa43f53b..9c20a3a3c 100644
--- a/addons/rose/app/styles/rose/components/_index.scss
+++ b/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';
diff --git a/addons/rose/app/styles/rose/components/dropdown/_dropdown.scss b/addons/rose/app/styles/rose/components/dropdown/_dropdown.scss
index 245a24374..bb60db84e 100644
--- a/addons/rose/app/styles/rose/components/dropdown/_dropdown.scss
+++ b/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 {
diff --git a/ui/desktop/tests/end2end/targets.spec.js b/ui/desktop/tests/end2end/targets.spec.js
index a037084ad..44b86e119 100644
--- a/ui/desktop/tests/end2end/targets.spec.js
+++ b/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);