diff --git a/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs b/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs
index b5fbef43ab07..621cef91817c 100644
--- a/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs
+++ b/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs
@@ -51,73 +51,3 @@
{{/if}}
{{/let}}
-{{!--
-{{#let
- (or @partition "default")
- (is-href "dc.partitions" @dc.Name)
- as |partition isManaging|
-}}
- {{#if (can "choose partitions" dc=@dc)}}
-
-
-
- {{if isManaging "Manage Partition" partition}}
-
-
-
-
- {{#each menu.items as |item|}}
-
-
- {{item.Name}}
-
-
- {{/each}}
-
-
-
-
- {{else}}
-
- {{"default"}}
-
- {{/if}}
-{{/let}} --}}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss
index 5def8d18858f..59f28c60258f 100644
--- a/ui/packages/consul-ui/app/components/app/index.scss
+++ b/ui/packages/consul-ui/app/components/app/index.scss
@@ -25,125 +25,3 @@
max-width: 80%;
pointer-events: auto;
}
-
-// [role='contentinfo'] {
-// @extend %footer;
-// }
-// [role='banner'] {
-// @extend %main-header-horizontal;
-// }
-// [role='banner'] > label {
-// @extend %main-nav-horizontal-toggle-button;
-// }
-// .app > input[id] {
-// @extend %main-nav-horizontal-toggle;
-// }
-// %main-header-horizontal > div {
-// @extend %main-nav-horizontal-panel;
-// }
-
-// %main-header-horizontal nav:first-of-type {
-// @extend %main-nav-vertical, %main-nav-sidebar;
-// }
-// %main-header-horizontal nav:last-of-type {
-// @extend %main-nav-horizontal;
-// margin-left: auto;
-// }
-// %main-nav-vertical-hoisted {
-// top: 18px;
-// }
-// %main-nav-vertical-hoisted [aria-label]::before {
-// display: none !important;
-// }
-// %main-nav-horizontal [aria-haspopup='menu'] ~ * {
-// position: absolute;
-// right: 0;
-// min-width: 192px;
-// }
-// %main-nav-horizontal [aria-expanded],
-// %main-nav-vertical-hoisted [aria-expanded] {
-// @extend %main-nav-horizontal-popover-menu-trigger;
-// @extend %main-nav-horizontal-action;
-// }
-// %main-nav-horizontal-popover-menu-trigger {
-// @extend %main-nav-horizontal-action-active;
-// }
-// %footer,
-// %main-nav-sidebar,
-// %main-notifications,
-// main {
-// @extend %transition-pushover;
-// }
-// %footer {
-// @extend %body-100-regular;
-// position: fixed;
-// z-index: 50;
-
-// color: var(--token-color-foreground-disabled);
-// width: 250px;
-// padding-left: 25px;
-// }
-// %footer {
-// top: calc(100vh - 42px);
-// top: calc(max(100vh, 460px) - 42px);
-// }
-// html.has-partitions.has-nspaces .app [role='contentinfo'] {
-// top: calc(100vh - 42px);
-// top: calc(max(100vh, 640px) - 42px);
-// }
-// %main-nav-sidebar {
-// z-index: 10;
-// }
-// %footer,
-// %main-nav-sidebar {
-// transition-property: left;
-// }
-// %app-notifications,
-// main {
-// margin-top: var(--chrome-height, 64px);
-// transition-property: margin-left;
-// }
-// %app-notifications {
-// transition-property: margin-left, width;
-// }
-
-// @media #{$--sidebar-open} {
-// %main-nav-horizontal-toggle ~ main .notifications {
-// width: calc(100% - var(--chrome-width));
-// }
-// %main-nav-horizontal-toggle:checked ~ main .notifications {
-// width: 100%;
-// }
-// %main-nav-horizontal-toggle ~ footer,
-// %main-nav-horizontal-toggle + header > div > nav:first-of-type {
-// left: 0;
-// }
-// %main-nav-horizontal-toggle:checked ~ footer,
-// %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
-// left: calc(var(--chrome-width, 280px) * -1);
-// }
-// %main-nav-horizontal-toggle ~ main {
-// margin-left: var(--chrome-width, 280px);
-// }
-// %main-nav-horizontal-toggle:checked ~ main .notifications,
-// %main-nav-horizontal-toggle:checked ~ main {
-// margin-left: 0;
-// }
-// }
-// @media #{$--lt-sidebar-open} {
-// %main-nav-horizontal-toggle ~ main .notifications {
-// width: 100%;
-// }
-// %main-nav-horizontal-toggle:checked ~ footer,
-// %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
-// left: 0;
-// }
-// %main-nav-horizontal-toggle ~ footer,
-// %main-nav-horizontal-toggle + header > div > nav:first-of-type {
-// left: calc(var(--chrome-width, 280px) * -1);
-// }
-// %main-nav-horizontal-toggle ~ main .notifications,
-// %main-nav-horizontal-toggle ~ main {
-// margin-left: 0;
-// }
-// }
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
index 245054ed020b..ca32e51ede8f 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
@@ -4,49 +4,6 @@
*/
%hashicorp-consul {
- // nav .dcs {
- // @extend %main-nav-vertical-hoisted;
- // left: 100px;
-
- // .dcs-message {
- // padding: 8px 12px;
- // border-bottom: 1px solid var(--token-color-foreground-disabled);
- // max-width: fit-content;
- // background-color: var(--token-color-hashicorp-brand);
- // color: var(--token-color-palette-neutral-300);
- // }
- // }
- // nav .dcs li.is-primary span,
- // nav .dcs li.is-local span {
- // @extend %menu-panel-badge;
- // }
- // nav .dcs .dc-name {
- // color: var(--token-color-foreground-faint);
- // padding: 3.25px 0px;
- // font-weight: var(--token-typography-font-weight-semibold);
- // }
- // nav .dcs .dc-name span {
- // @extend %pill-200;
- // margin-left: 1rem;
- // background-color: var(--token-color-palette-neutral-300);
- // color: var(--token-color-hashicorp-brand);
- // }
- // nav li.partitions,
- // nav li.nspaces {
- // @extend %main-nav-vertical-popover-menu;
- // }
- // nav li.dcs [aria-expanded] ~ * {
- // min-width: 250px;
- // }
- // nav li.dcs [aria-expanded] ~ * {
- // max-height: 560px;
- // --paged-row-height: 43px;
- // }
- // nav li.partitions [aria-expanded] ~ *,
- // nav li.nspaces [aria-expanded] ~ * {
- // max-height: 360px;
- // --paged-row-height: 43px;
- // }
.consul-side-nav {
li.consul-disabled-nav {
width: 100%;
diff --git a/ui/packages/consul-ui/app/components/main-header-horizontal/index.scss b/ui/packages/consul-ui/app/components/main-header-horizontal/index.scss
deleted file mode 100644
index 7b885758df3a..000000000000
--- a/ui/packages/consul-ui/app/components/main-header-horizontal/index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-@import './skin.scss';
-@import './layout.scss';
diff --git a/ui/packages/consul-ui/app/components/main-header-horizontal/layout.scss b/ui/packages/consul-ui/app/components/main-header-horizontal/layout.scss
deleted file mode 100644
index 6e46b9b88c67..000000000000
--- a/ui/packages/consul-ui/app/components/main-header-horizontal/layout.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-%main-header-horizontal {
- display: flex;
- position: fixed;
- z-index: 50;
- left: 0;
- padding: 0 25px;
- width: calc(100% - 50px);
-}
-%main-header-horizontal,
-%main-header-horizontal::before {
- height: var(--chrome-height);
-}
-%main-header-horizontal {
- align-items: center;
-}
-%main-header-horizontal::before {
- content: '';
- position: absolute;
- z-index: -1;
- left: 0;
- width: 100vw;
-}
-%main-header-horizontal > a {
- display: block;
- line-height: 0;
- font-size: 0;
-}
diff --git a/ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss b/ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss
deleted file mode 100644
index b75cfe98dfd7..000000000000
--- a/ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-%main-header-horizontal::before {
- background-color: var(--token-color-hashicorp-brand);
-}
diff --git a/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss b/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss
deleted file mode 100644
index 218935679676..000000000000
--- a/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-@import './skin';
-@import './layout';
-
-/* things that should look like nav buttons */
-%main-nav-horizontal > ul > li > a,
-%main-nav-horizontal > ul > li > span,
-%main-nav-horizontal > ul > li > button,
-%main-nav-horizontal-popover-menu-trigger,
-%main-nav-horizontal > ul > li > .popover-menu > label > button {
- @extend %main-nav-horizontal-action;
-}
-%main-nav-horizontal .popover-menu [type='checkbox']:checked + label > *,
-%main-nav-horizontal > ul > li.is-active > a,
-%main-nav-horizontal > ul > li.is-active > button {
- @extend %main-nav-horizontal-action-active;
-}
-/* Whilst we want spans to look the same as actions */
-/* we don't want them to act the same */
-%main-nav-horizontal-action:not(span):hover,
-%main-nav-horizontal-action:not(span):focus {
- @extend %main-nav-horizontal-action-intent;
-}
-%main-nav-horizontal > ul > li > span {
- cursor: default;
-}
-/**/
-
-/* menu-panels in the main navigation are treated slightly differently */
-%main-nav-horizontal .disclosure-menu button + * {
- @extend %main-nav-horizontal-menu-panel;
-}
diff --git a/ui/packages/consul-ui/app/components/main-nav-horizontal/layout.scss b/ui/packages/consul-ui/app/components/main-nav-horizontal/layout.scss
deleted file mode 100644
index 0db5e63ea0e1..000000000000
--- a/ui/packages/consul-ui/app/components/main-nav-horizontal/layout.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-%main-nav-horizontal > ul,
-%main-nav-horizontal-panel {
- display: flex;
-}
-%main-nav-horizontal-toggle-button {
- display: flex;
- align-items: center;
- height: 100%;
- padding: 0 1rem;
- padding-left: 5px;
-}
-%main-nav-horizontal-panel {
- justify-content: space-between;
- flex-grow: 1;
-}
-%main-nav-horizontal-menu-panel {
- z-index: 400;
- /* TODO: We should probably make menu-panel default to left hand side*/
- top: 28px !important;
-}
-%main-nav-horizontal-action {
- display: block;
- padding: 5px 12px;
- white-space: nowrap;
-}
-%main-nav-horizontal .popover-menu > label {
- /* Usually there is no space between buttons which is */
- /* fine as the button only highlights when its selected */
- /* therefore no two siblings are highlighted at the same time */
- /* which means you don't notice there is no space between the */
- /* buttons. popover-menu triggers on the other hand can be */
- /* at the same time as a sibling, therefore they need a little */
- /* space between it and its sibling - this is a property of */
- /* the main nav not the popover-menu */
- padding-right: 5px;
-}
-%main-nav-horizontal .popover-menu > label > * {
- /* less space as the chevron adds space */
- padding-right: 4px !important;
-}
-%main-nav-horizontal .popover-menu > label > button::after {
- top: 2px;
-}
diff --git a/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss b/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
deleted file mode 100644
index 8cd1c1e64688..000000000000
--- a/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-%main-nav-horizontal-action {
- border-radius: var(--decor-radius-200);
- cursor: pointer;
-}
-%main-nav-horizontal-action > a {
- color: inherit;
-}
-%main-nav-horizontal-popover-menu-trigger::after {
- --icon-name: icon-chevron-down;
- content: '';
-}
-%main-nav-horizontal-popover-menu-trigger[aria-expanded='true']::after {
- transform: scaleY(-100%);
-}
-
-%main-nav-horizontal-menu-panel,
-%main-nav-horizontal-menu-panel > ul[role='menu'],
-%main-nav-horizontal-menu-panel > ul[role='menu'] > li > [role='menuitem'] {
- background-color: var(--token-color-hashicorp-brand);
- color: var(--token-color-palette-neutral-300);
-}
-
-%main-nav-horizontal-menu-panel > ul[role='menu'] > li > [role='menuitem']:hover {
- background-color: var(--token-color-palette-neutral-600);
-}
-
-%main-nav-horizontal-toggle {
- display: none;
-}
-%main-nav-horizontal-toggle-button::before {
- --icon-name: icon-menu;
- --icon-color: var(--token-color-palette-neutral-300);
- content: '';
- cursor: pointer;
-}
-%main-nav-horizontal-action,
-%main-nav-horizontal-action-intent,
-%main-nav-horizontal-action-active {
- color: var(--token-color-palette-neutral-300);
-}
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx b/ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx
deleted file mode 100644
index a079e76e4127..000000000000
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
----
-class: css
----
-# MainNavVertical
-
-Used for styles of vertically orientated main application menus/navigation.
-
-Menu item active state is applied on `.is-active` `` elements. Additionally you can use the following placeholders for setting certin states manually:
-
-- `%menu-nav-vertical-action-active` The 'active' or currently selected state.
-- `%menu-nav-vertical-action-intent` The highlighted state, usually for `:hover`
- and `:focus`.
-
-`%menu-nav-vertical-hoisted` will 'hoist' an `` element to the top of the
-containing block, the containing block defaults to the current viewport. If
-you need to define a different ancestor for a containing block you can use
-`transform` (see below).
-
-```hbs preview-template
-
-```
-
-```css preview-template
-.main-nav-vertical {
- @extend %main-nav-vertical;
-}
-.main-nav-vertical li.hoisted {
- @extend %main-nav-vertical-hoisted;
-}
-.main-nav-vertical .with-intent > * {
- @extend %main-nav-vertical-action-intent;
-}
-.main-nav-vertical .custom-active > * {
- @extend %main-nav-vertical-action-active;
-}
-.wrapper {
- /* a transform is required to mark this element as the containing block */
- /* for hoisting, otherwise the viewport is the containing block */
- transform: translate(0, 0);
- background-color: var(--token-color-foreground-faint);
- padding-top: 64px;
-}
-```
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss
deleted file mode 100644
index f277042b42d8..000000000000
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-#docfy-demo-preview-main-nav-vertical {
- .main-nav-vertical {
- @extend %main-nav-vertical;
- }
- .main-nav-vertical li.hoisted {
- @extend %main-nav-vertical-hoisted;
- }
- .main-nav-vertical .with-intent > * {
- @extend %main-nav-vertical-action-intent;
- }
- .main-nav-vertical .custom-active > * {
- @extend %main-nav-vertical-action-active;
- }
- .wrapper {
- /* a transform is required to mark this element as the containing block */
- /* for hoisting, otherwise the viewport is the containing block */
- transform: translate(0, 0);
- background-color: var(--token-color-foreground-faint);
- padding-top: 64px;
- }
- // TODO: Reduce the need for these debug overrides
- .main-nav-vertical {
- position: static;
- height: auto;
- }
- .main-nav-vertical ul {
- margin-bottom: 0 !important;
- }
-}
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
deleted file mode 100644
index fd8f7cf4b562..000000000000
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-@import './skin';
-@import './layout';
-/* things that should look like nav buttons */
-
-/* items are single things that look like button */
-/* but aren't clickable */
-%main-nav-vertical > ul > li[aria-label] {
- @extend %main-nav-vertical-item;
-}
-/**/
-/* actual clickable button-y things plus states */
-%main-nav-vertical a {
- @extend %main-nav-vertical-action;
-}
-%main-nav-vertical > ul > li.is-active > a {
- @extend %main-nav-vertical-action-active;
-}
-
-%main-nav-vertical-action-active:hover:not(:active),
-%main-nav-vertical-action-active:focus:not(:active) {
- @extend %main-nav-vertical-action-active-intent;
-}
-
-%main-nav-vertical-action:hover,
-%main-nav-vertical-action:focus {
- @extend %main-nav-vertical-action-intent;
-}
-
-%main-nav-vertical > ul > li > label {
- @extend %main-nav-vertical-action;
-}
-/* menu-panels in the main navigation are treated slightly differently */
-%main-nav-vertical-popover-menu .disclosure-menu button + * {
- @extend %main-nav-vertical-menu-panel;
-}
-/**/
-%main-nav-vertical-popover-menu .disclosure-menu > button {
- @extend %main-nav-vertical-popover-menu-trigger;
- @extend %internal-button;
-}
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
deleted file mode 100644
index a63b82f951c7..000000000000
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-%main-nav-vertical {
- position: absolute;
- left: 0;
- top: var(--chrome-height, 47px);
- width: var(--chrome-width, 280px);
- height: calc(100vh - var(--chrome-height, 47px) - 35px);
- padding-top: 35px;
- overflow: auto;
-}
-// disable tabbing when not visible
-%main-nav-vertical:not(.in-viewport) {
- visibility: hidden;
-}
-%main-nav-vertical li.partition,
-%main-nav-vertical li.partitions,
-%main-nav-vertical li.nspaces {
- margin-bottom: 25px;
- padding: 0 26px;
-}
-%main-nav-vertical li.dcs {
- padding: 0 18px;
-}
-// TODO: We no longer have the rule that menu-panel buttons only contain two
-// items, left and right aligned. We should remove this and look to use
-// align-self for anything that needs right aligning instead.
-
-%main-nav-vertical [role='menuitem'] {
- justify-content: flex-start !important;
-}
-%main-nav-vertical [role='menuitem'] span {
- margin-left: 0.5rem;
-}
-%main-nav-vertical-action,
-%main-nav-vertical li:not([role='separator']) > span,
-%main-nav-vertical [role='separator'] {
- display: block;
- padding: 7px 25px;
-}
-%main-nav-vertical > ul > [role='separator'] {
- margin-top: 0.7rem;
- padding-bottom: 0;
-}
-%main-nav-vertical-popover-menu .disclosure {
- position: relative;
-}
-%main-nav-vertical-popover-menu-trigger {
- width: 100%;
- text-align: left;
- padding: 10px;
-}
-%main-nav-vertical-popover-menu-trigger::after {
- float: right;
-}
-%main-nav-vertical-menu-panel {
- position: absolute;
- z-index: 1;
- width: calc(100% - 2px);
-}
-%main-nav-vertical-hoisted {
- visibility: visible;
- position: fixed;
- z-index: 10;
-}
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
deleted file mode 100644
index bda8a2110177..000000000000
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-%main-nav-vertical-action {
- @extend %body-200-medium;
- cursor: pointer;
- border-right: var(--decor-border-400);
- border-color: transparent;
-}
-%main-nav-vertical-action > a {
- color: inherit;
- font-size: inherit;
-}
-%main-nav-vertical [role='separator'] {
- @extend %body-100-medium;
- text-transform: uppercase;
-}
-%main-nav-vertical-action-intent {
- text-decoration: underline;
-}
-%main-nav-vertical-action-active-intent {
- text-decoration: none;
-}
-%main-nav-vertical {
- background-color: var(--token-color-foreground-strong);
- color: var(--token-color-foreground-faint);
-}
-%main-nav-vertical li:not([role='separator']) > span {
- color: var(--token-color-palette-neutral-300);
-}
-%main-nav-vertical [role='separator'],
-%main-nav-vertical-hoisted [role='separator'] {
- color: var(--token-color-palette-neutral-400);
- background-color: var(--token-color-foreground-strong);
-}
-%main-nav-vertical-action {
- color: var(--token-color-palette-neutral-300);
-}
-%main-nav-vertical-item,
-%main-nav-vertical-action-intent,
-%main-nav-vertical-action-active {
- color: var(--token-color-palette-neutral-0);
-}
-%main-nav-vertical-action-active {
- background-color: var(--token-color-palette-neutral-500);
- border-color: var(--token-color-palette-neutral-0);
-}
-%main-nav-vertical [aria-label]::before {
- color: var(--token-color-palette-neutral-400);
- content: attr(aria-label);
- display: block;
- margin-top: -0.5rem;
- margin-bottom: 0.5rem;
-}
-%main-nav-vertical-popover-menu-trigger {
- border: var(--decor-border-100);
- border-color: var(--token-color-foreground-faint);
- border-radius: var(--decor-radius-100);
-
- font-weight: inherit;
-
- background-color: var(--token-color-foreground-strong);
- color: var(--token-color-palette-neutral-200);
-}
-
-%main-nav-vertical-popover-menu-trigger:hover,
-%main-nav-vertical-popover-menu-trigger:focus {
- color: var(--token-color-palette-neutral-300);
- background-color: var(--token-color-foreground-strong);
-}
-
-%main-nav-vertical ul[role='menu'] li a[role='menuitem'] {
- color: var(--token-color-palette-neutral-300);
- background-color: var(--token-color-foreground-strong);
-}
-
-%main-nav-vertical ul[role='menu']li a[role='menuitem']:hover {
- background-color: var(--token-color-palette-neutral-600);
-}
-
-%main-nav-vertical-popover-menu-trigger[aria-expanded='true'] {
- border-bottom-left-radius: var(--decor-radius-000);
- border-bottom-right-radius: var(--decor-radius-000);
-}
-
-%main-nav-horizontal %panel,
-%main-nav-horizontal %panel-separator,
-%main-nav-vertical %panel,
-%main-nav-vertical %panel-separator {
- border-color: var(--token-color-foreground-faint);
-}
-
-%main-nav-vertical-popover-menu-trigger::after {
- @extend %with-chevron-down-mask, %as-pseudo;
- width: 16px;
- height: 16px;
- position: relative;
-}
-%main-nav-vertical-popover-menu-trigger[aria-expanded='true']::after {
- @extend %with-chevron-up-mask;
-}
-%main-nav-vertical-menu-panel {
- border-top-left-radius: var(--decor-radius-000);
- border-top-right-radius: var(--decor-radius-000);
- border-top: var(--decor-border-000);
- color: var(--token-color-palette-neutral-300);
- background-color: var(--token-color-foreground-strong);
-}
-
-%main-nav-vertical-hoisted ul[role='menu'] {
- background-color: var(--token-color-hashicorp-brand);
-}
diff --git a/ui/packages/consul-ui/app/styles/app.scss b/ui/packages/consul-ui/app/styles/app.scss
index f51022ed3ddb..11597cb190df 100644
--- a/ui/packages/consul-ui/app/styles/app.scss
+++ b/ui/packages/consul-ui/app/styles/app.scss
@@ -25,7 +25,8 @@
/* more semantically (for our project) named icons */
@import 'icons';
/* global control of themeable components */
-@import 'themes';
+@import './base/color/index';
+
/* debug only, this is empty during a production build */
/* but uses the contents of ./debug.scss during dev */
@import '_debug';
diff --git a/ui/packages/consul-ui/app/styles/base/color/index.scss b/ui/packages/consul-ui/app/styles/base/color/index.scss
index 9b15c0b3187a..eea295d55623 100644
--- a/ui/packages/consul-ui/app/styles/base/color/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/index.scss
@@ -3,5 +3,5 @@
* SPDX-License-Identifier: BUSL-1.1
*/
-@import './ui/index';
@import './semantic-variables';
+@import './ui/frame-placeholders.scss';
diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/index.scss b/ui/packages/consul-ui/app/styles/base/color/ui/index.scss
deleted file mode 100644
index 9d300033e4e2..000000000000
--- a/ui/packages/consul-ui/app/styles/base/color/ui/index.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-@import './frame-placeholders';
diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss
index 5a32d0e2be6a..f4baa2ca74a4 100644
--- a/ui/packages/consul-ui/app/styles/components.scss
+++ b/ui/packages/consul-ui/app/styles/components.scss
@@ -54,9 +54,6 @@
@import 'consul-ui/components/brand-loader';
@import 'consul-ui/components/app';
/* app chrome */
-@import 'consul-ui/components/main-header-horizontal';
-@import 'consul-ui/components/main-nav-horizontal';
-@import 'consul-ui/components/main-nav-vertical';
@import 'consul-ui/components/hashicorp-consul';
/**/
@import 'consul-ui/components/menu-panel';
diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss
index 23ae675cb1ba..be80d904215a 100644
--- a/ui/packages/consul-ui/app/styles/debug.scss
+++ b/ui/packages/consul-ui/app/styles/debug.scss
@@ -6,7 +6,6 @@
@import 'prism-coldark-dark';
// temporary component debugging setup
-@import 'consul-ui/components/main-nav-vertical/debug';
@import 'consul-ui/components/badge/debug';
@import 'consul-ui/components/panel/debug';
@import 'consul-ui/components/tile/debug';
diff --git a/ui/packages/consul-ui/app/styles/themes.scss b/ui/packages/consul-ui/app/styles/themes.scss
deleted file mode 100644
index 56bee00761c1..000000000000
--- a/ui/packages/consul-ui/app/styles/themes.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-@import './base/color/ui/index';
-
-%main-nav-horizontal .dangerous button:hover,
-%main-nav-horizontal .dangerous button:focus {
- color: var(--token-color-surface-primary) !important;
-}
-
-%main-nav-vertical .menu-panel a:hover,
-%main-nav-vertical .menu-panel a:focus {
- background-color: var(--token-color-foreground-action);
-}
diff --git a/ui/packages/consul-ui/app/styles/typography.scss b/ui/packages/consul-ui/app/styles/typography.scss
index b0dac04edb3b..751b4e57287d 100644
--- a/ui/packages/consul-ui/app/styles/typography.scss
+++ b/ui/packages/consul-ui/app/styles/typography.scss
@@ -15,9 +15,6 @@ fieldset > header,
%form-element > span {
@extend %display-100-semibold;
}
-%main-nav-horizontal-action {
- @extend %body-200-medium;
-}
%definition-table dt {
line-height: var(--token-typography-body-300-line-height);
}
@@ -45,7 +42,6 @@ fieldset > header,
%empty-state-anchor,
%form-element-label,
%stats-card header a span,
-%footer,
%app-view h1 span.kind-proxy {
@extend %body-100-regular;
}