From b50c0bdb12d933b6a6c5592820d1df27ea3d5ff5 Mon Sep 17 00:00:00 2001 From: wenincode Date: Thu, 26 Oct 2023 16:24:46 -0600 Subject: [PATCH] Remove unused styles --- .../consul/partition/selector/index.hbs | 70 ---------- .../consul-ui/app/components/app/index.scss | 122 ------------------ .../components/hashicorp-consul/index.scss | 43 ------ .../main-header-horizontal/index.scss | 7 - .../main-header-horizontal/layout.scss | 32 ----- .../main-header-horizontal/skin.scss | 8 -- .../components/main-nav-horizontal/index.scss | 36 ------ .../main-nav-horizontal/layout.scss | 48 ------- .../components/main-nav-horizontal/skin.scss | 45 ------- .../components/main-nav-vertical/README.mdx | 71 ---------- .../components/main-nav-vertical/debug.scss | 34 ----- .../components/main-nav-vertical/index.scss | 45 ------- .../components/main-nav-vertical/layout.scss | 68 ---------- .../components/main-nav-vertical/skin.scss | 114 ---------------- ui/packages/consul-ui/app/styles/app.scss | 3 +- .../app/styles/base/color/index.scss | 2 +- .../app/styles/base/color/ui/index.scss | 6 - .../consul-ui/app/styles/components.scss | 3 - ui/packages/consul-ui/app/styles/debug.scss | 1 - ui/packages/consul-ui/app/styles/themes.scss | 16 --- .../consul-ui/app/styles/typography.scss | 4 - 21 files changed, 3 insertions(+), 775 deletions(-) delete mode 100644 ui/packages/consul-ui/app/components/main-header-horizontal/index.scss delete mode 100644 ui/packages/consul-ui/app/components/main-header-horizontal/layout.scss delete mode 100644 ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss delete mode 100644 ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss delete mode 100644 ui/packages/consul-ui/app/components/main-nav-horizontal/layout.scss delete mode 100644 ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss delete mode 100644 ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx delete mode 100644 ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss delete mode 100644 ui/packages/consul-ui/app/components/main-nav-vertical/index.scss delete mode 100644 ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss delete mode 100644 ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss delete mode 100644 ui/packages/consul-ui/app/styles/base/color/ui/index.scss delete mode 100644 ui/packages/consul-ui/app/styles/themes.scss 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; }