CSS for moving from a horizontal main menu to a side/vertical one

ui/packages/consul-ui/app/components/hashicorp-consul/index.scss

@@ -0,0 +1,83 @@
+.hashicorp-consul {
+  --chrome-width: 300px;
+  --chrome-height: 48px;
+}
+[role='banner'] {
+  @extend %main-header-horizontal;
+}
+[role="banner"] > label {
+  @extend %main-nav-horizontal-toggle-button;
+}
+.hashicorp-consul > input[id] {
+  @extend %main-nav-horizontal-toggle;
+}
+[role="banner"] a svg {
+  fill: var(--brand-600);
+}
+%theme-high-contrast {
+  [role="banner"] a svg {
+    fill: var(--gray-tone-999);
+  }
+}
+%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-horizontal .docs-link a::after {
+  @extend %with-docs-mask, %as-pseudo;
+}
+%main-nav-horizontal .learn-link a::after {
+  @extend %with-learn-mask, %as-pseudo;
+}
+%main-nav-horizontal .feedback-link a::after {
+  @extend %with-logo-github-monochrome-mask, %as-pseudo;
+}
+
+%main-nav-sidebar,
+main {
+  @extend %transition-pushover;
+}
+%main-nav-sidebar {
+  transition-property: left;
+  z-index: 10;
+}
+main {
+  transition-property: margin-left;
+}
+
+
+@media #{$--sidebar-open} {
+  %main-nav-horizontal-toggle + header > div > nav:first-of-type {
+    left: 0;
+  }
+  %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
+    left: calc(var(--chrome-width) * -1);
+  }
+  %main-nav-horizontal-toggle ~ main,
+  %main-nav-horizontal-toggle ~ footer {
+    margin-left: var(--chrome-width);
+  }
+  %main-nav-horizontal-toggle:checked ~ main,
+  %main-nav-horizontal-toggle:checked ~ footer {
+    margin-left: 0;
+  }
+}
+@media #{$--lt-sidebar-open} {
+  %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
+    left: 0;
+  }
+  %main-nav-horizontal-toggle + header > div > nav:first-of-type {
+    left: calc(var(--chrome-width) * -1);
+  }
+  %main-nav-horizontal-toggle ~ main,
+  %main-nav-horizontal-toggle ~ footer {
+    margin-left: 0;
+  }
+}

ui/packages/consul-ui/app/styles/components/main-header-horizontal/layout.scss → ui/packages/consul-ui/app/components/main-header-horizontal/layout.scss

@@ -1,17 +1,19 @@
 %main-header-horizontal {
   display: flex;
 }
+%main-header-horizontal,
+%main-header-horizontal::before {
+  height: var(--chrome-height);
+}
 %main-header-horizontal {
   align-items: center;
-  height: 48px;
 }
 %main-header-horizontal::before {
   content: '';
   position: absolute;
   z-index: -1;
   left: 0;
   width: 100vw;
-  height: 48px;
 }
 %main-header-horizontal > a {
   display: block;

ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss

@@ -0,0 +1,9 @@
+%main-header-horizontal::before {
+  background-color: var(--gray-tone-000);
+}
+
+%main-nav-horizontal-action,
+%main-nav-horizontal-toggle-button {
+  color: var(--gray-tone-600);
+}
+

ui/packages/consul-ui/app/components/main-nav-horizontal/layout.scss

@@ -0,0 +1,44 @@
+%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;
+}
+%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*/
+  left: 0;
+  right: auto;
+  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;
+}

ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss

@@ -0,0 +1,26 @@
+%main-nav-horizontal-action {
+  border-radius: $decor-radius-200;
+  cursor: pointer;
+}
+%main-nav-horizontal-action > a {
+  color: inherit;
+}
+/**/
+/* reduced size hamburger menu */
+%main-nav-horizontal-toggle {
+  display: none;
+}
+%main-nav-horizontal-toggle-button::before {
+  @extend %with-menu-mask, %as-pseudo;
+  font-size: 1.2em;
+  cursor: pointer;
+}
+%main-nav-horizontal-toggle-button::before {
+  background-color: var(--gray-tone-999);
+}
+%main-nav-horizontal-action,
+%main-nav-horizontal-action-intent,
+%main-nav-horizontal-action-active {
+  color: var(--gray-tone-999);
+}
+/**/

ui/packages/consul-ui/app/components/main-nav-vertical/index.scss

@@ -0,0 +1,40 @@
+@import './skin';
+@import './layout';
+/* things that should look like nav buttons */
+%main-nav-vertical > ul > li > a,
+%main-nav-vertical > ul > li > span {
+  @extend %main-nav-vertical-action;
+}
+%main-nav-vertical > ul > li > a:active,
+%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;
+}
+/* old dropdowns, soon to be removed */
+
+/* Whilst we want spans to look the same as actions */
+/* we don't want them to act the same */
+%main-nav-vertical-action:not(span):hover,
+%main-nav-vertical-action:not(span):focus {
+  @extend %main-nav-vertical-action-intent;
+}
+
+%main-nav-vertical > ul > li > label,
+%main-nav-vertical > ul > li > .popover-menu > label > button {
+  @extend %main-nav-vertical-action;
+}
+%main-nav-vertical > ul > li > .popover-menu .menu-panel {
+  margin-left: 10px;
+  top: 28px;
+  z-index: 100;
+}
+/* menu-panels in the main navigation are treated slightly differently */
+%main-nav-vertical label + div {
+  @extend %main-nav-vertical-menu-panel;
+}
+
+/* end old dropdowns */

ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss

@@ -0,0 +1,22 @@
+%main-nav-vertical {
+  position: absolute;
+  left: 0;
+  top: var(--chrome-height, 47px);
+  width: var(--chrome-width);
+  height: calc(100vh - var(--chrome-height, 47px) - 35px);
+  padding-top: 35px;
+}
+%main-nav-vertical li.dcs {
+  margin-bottom: 25px;
+}
+%main-nav-vertical-action {
+  display: block;
+  padding: 7px 25px;
+}
+
+%main-nav-vertical .is-local [role='menuitem'] span:last-of-type {
+  margin-right: 20px;
+}
+%main-nav-vertical-menu-panel {
+  min-width: 266px;
+}

ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss

@@ -0,0 +1,43 @@
+%main-nav-vertical .is-local span:last-of-type {
+  @extend %pill-200, %frame-gray-600;
+}
+%main-nav-vertical-action {
+  cursor: pointer;
+  border-right: $decor-border-400;
+  border-color: $transparent;
+  font-size: $typo-size-600;
+}
+%main-nav-vertical-action > a {
+  color: inherit;
+  font-size: inherit;
+}
+%main-nav-vertical-action-intent {
+  text-decoration: underline;
+}
+%main-nav-vertical-action-active-intent {
+  text-decoration: none;
+}
+%main-nav-vertical {
+  background-color: var(--gray-tone-050);
+}
+%main-nav-vertical-action {
+  color: var(--gray-tone-800);
+}
+%main-nav-vertical-action-intent,
+%main-nav-vertical-action-active {
+  color: var(--gray-tone-999);
+}
+%main-nav-vertical-action-active {
+  background-color: var(--gray-tone-150);
+  border-color: var(--gray-tone-999);
+}
+%main-nav-vertical .nspaces .menu-panel > div {
+  background-color: $gray-050;
+  padding-left: 36px;
+}
+%main-nav-vertical .nspaces .menu-panel > div::before {
+  @extend %with-info-circle-fill-mask, %as-pseudo;
+  color: $blue-500;
+  /* sizes the icon not the text */
+  font-size: 1.1em;
+}

ui/packages/consul-ui/app/styles/app.scss

@@ -15,3 +15,43 @@
 @import 'layout';
 /* pinpoint individual overwrites for those 'just on this page' problems */
 @import 'routes';
+
+:root {
+  @extend %theme-light;
+}
+:root.prefers-contrast-high {
+  @extend %theme-high-contrast;
+}
+:root.prefers-contrast-low {
+  @extend %theme-low-contrast;
+}
+:root.prefers-color-scheme-dark {
+  @extend %theme-dark;
+}
+:root.prefers-color-scheme-light {
+  @extend %theme-light;
+}
+:root.prefers-color-scheme-dark.prefers-contrast-high {
+  @extend %theme-dark-high-contrast;
+}
+:root.prefers-color-scheme-dark.prefers-contrast-low {
+  @extend %theme-dark-low-contrast;
+}
+:root.prefers-color-scheme-light.prefers-contrast-high {
+  @extend %theme-light-high-contrast;
+}
+:root.prefers-color-scheme-light.prefers-contrast-low {
+  @extend %theme-light-low-contrast;
+}
+%main-header-horizontal,
+%main-nav-vertical,
+%main-nav-horizontal {
+  @extend %theme-dark;
+}
+:root.prefers-contrast-high {
+  %main-header-horizontal,
+  %main-nav-vertical,
+  %main-nav-horizontal {
+    @extend %theme-dark-high-contrast;
+  }
+}

ui/packages/consul-ui/app/styles/base/animation/index.scss

@@ -17,3 +17,7 @@
   opacity: 1;
   pointer-events: auto;
 }
+%transition-pushover {
+  transition-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9);
+  transition-duration: 0.1s;
+}

ui/packages/consul-ui/app/styles/base/color/base-variables.scss

@@ -61,14 +61,17 @@ $cyan-900: #003346;
 $gray-010: #fbfbfc;
 $gray-050: #f7f8fa;
 $gray-100: #ebeef2;
+$gray-150: #ebeef2;
 $gray-200: #dce0e6;
 $gray-300: #bac1cc;
 $gray-400: #8e96a3;
 $gray-500: #6f7682;
 $gray-600: #626873;
 $gray-700: #525761;
 $gray-800: #373a42;
+$gray-850: #2c2e33;
 $gray-900: #1f2124;
+$gray-950: #15171c;
 $green-050: #ecf7ed;
 $green-100: #c6e9c9;
 $green-200: #a0dba5;

ui/packages/consul-ui/app/styles/base/color/index.scss

@@ -1,3 +1,4 @@
 @import './base-variables';
 @import './semantic-variables';
 @import './frame-placeholders';
+@import './theme-placeholders';