npm - @turquoisehealth/pit-viper - Versions diffs - 2.218.1 → 2.219.0 - Mend

@turquoisehealth/pit-viper 2.218.1 → 2.219.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/_site/assets/css/pit-viper-a11y.css CHANGED Viewed

@@ -5246,6 +5246,16 @@ pv-sidebar {
   border-radius: 0.5rem !important;
 }
+.sidebar-layout-new .sidebar-toggle {
+  opacity: 1;
+  pointer-events: auto;
+  margin: 0px 0.25rem;
+}
+.sidebar-layout-new.is-collapsed .sidebar-header {
+  flex-direction: column;
+  align-items: flex-start;
+}
 .sidebar-panel {
   grid-area: sidebar;
   background-color: var(--layout-primary-sidebar-background-color);
@@ -5306,16 +5316,16 @@ pv-sidebar {
 }
 .sidebar-layout-secondary {
-  --layout-primary-sidebar-background-color: #FFFFFF;
+  --layout-primary-sidebar-background-color: #F9F8F6;
   --layout-primary-sidebar-text-color: #121313;
   --layout-primary-sidebar-border-color: #8F939E;
   --layout-primary-sidebar-shadow: -2px 0px 10px -1px rgba(0, 0, 0, 0.04) inset;
   --layout-primary-sidebar-toggle-color: #4B595C;
-  --nav-list-hover-background-color: #E8F2F4;
+  --nav-list-hover-background-color: #ECE8E2;
   --nav-list-hover-text-color: #0D5256;
-  --nav-list-active-background-color: #E8EBEB;
-  --nav-list-active-text-color: #13595D;
-  --nav-list-pressed-background-color: #C7D8DB;
+  --nav-list-active-background-color: #ECE8E2;
+  --nav-list-active-text-color: #121313;
+  --nav-list-pressed-background-color: #D8D2CA;
   --nav-list-pressed-text-color: #02363D;
   --nav-list-active-page-icon-color: #121313;
   --nav-list-hover-text-color: #121313;

package/_site/assets/css/pit-viper-v2.css CHANGED Viewed

@@ -5303,6 +5303,16 @@ pv-sidebar {
   border-radius: 0.5rem !important;
 }
+.sidebar-layout-new .sidebar-toggle {
+  opacity: 1;
+  pointer-events: auto;
+  margin: 0px 0.25rem;
+}
+.sidebar-layout-new.is-collapsed .sidebar-header {
+  flex-direction: column;
+  align-items: flex-start;
+}
 .sidebar-panel {
   grid-area: sidebar;
   background-color: var(--layout-primary-sidebar-background-color);
@@ -5363,31 +5373,34 @@ pv-sidebar {
 }
 .sidebar-layout-secondary {
-  --layout-primary-sidebar-background-color: #FFFFFF;
+  --layout-primary-sidebar-background-color: #F9F8F6;
   --layout-primary-sidebar-text-color: #121313;
   --layout-primary-sidebar-border-color: #E3E7EA;
   --layout-primary-sidebar-shadow: -2px 0px 10px -1px rgba(0, 0, 0, 0.04) inset;
   --layout-primary-sidebar-toggle-color: #4B595C;
-  --nav-list-hover-background-color: #E8F2F4;
+  --nav-list-hover-background-color: #ECE8E2;
   --nav-list-hover-text-color: #0D5256;
-  --nav-list-active-background-color: #E8EBEB;
-  --nav-list-active-text-color: #16696D;
-  --nav-list-pressed-background-color: #C7D8DB;
+  --nav-list-active-background-color: #ECE8E2;
+  --nav-list-active-text-color: #121313;
+  --nav-list-pressed-background-color: #D8D2CA;
   --nav-list-pressed-text-color: #02363D;
   --nav-list-active-page-icon-color: #121313;
   --nav-list-hover-text-color: #121313;
   --stroke-accordion-border-left: #D2D8DC;
 }
-.sidebar-layout.is-collapsed:not(.is-floating) .pv-sidebar-nav a,
+.sidebar-layout.is-collapsed:not(.is-floating) .pv-sidebar-nav a:not(.pv-popover a),
 .sidebar-layout.is-collapsed:not(.is-floating) .pv-sidebar-nav summary {
-  width: 2.5rem;
+  width: 2.5rem !important;
   padding-inline: 0;
   justify-content: center;
 }
 .sidebar-layout.is-collapsed:not(.is-floating) .pv-sidebar-nav-nested {
   display: none;
 }
+.sidebar-layout.is-collapsed:not(.is-floating) .pv-sidebar-nav summary > [data-testid=pv-icon] {
+  display: none;
+}
 .sidebar-layout-primary .pv-sidebar-nav-header,
 .sidebar-layout-primary .pv-sidebar-nav {
@@ -5399,22 +5412,38 @@ pv-sidebar {
   --sidebar-nav-pressed-bg: #02363D;
   --sidebar-nav-nested-border: rgba(227, 231, 234, 0.20);
   --popover-list-item-hover-background-color: #E8F2F4;
+  --sidebar-nav-icon-color: #6E8081;
+  --sidebar-nav-active-icon-color: #FFFFFF;
 }
 .sidebar-layout-primary .pv-sidebar-nav a:not([aria-current=page]) [class*=pv-icon],
 .sidebar-layout-primary .pv-sidebar-nav summary:not([aria-current=page]) [class*=pv-icon] {
-  color: var(--layout-primary-icon-color, #6E8081);
+  color: var(--sidebar-nav-icon-color);
+}
+.sidebar-layout-primary .pv-sidebar-nav a[aria-current=page] [class*=pv-icon],
+.sidebar-layout-primary .pv-sidebar-nav summary[aria-current=page] [class*=pv-icon] {
+  color: var(--sidebar-nav-active-icon-color);
 }
 .sidebar-layout-secondary .pv-sidebar-nav-header,
 .sidebar-layout-secondary .pv-sidebar-nav {
   --sidebar-nav-text-color: #121313;
-  --sidebar-nav-hover-bg: #E8F2F4;
+  --sidebar-nav-hover-bg: #ECE8E2;
   --sidebar-nav-hover-text: #121313;
-  --sidebar-nav-active-bg: #E8EBEB;
-  --sidebar-nav-active-text: #16696D;
-  --sidebar-nav-pressed-bg: #C7D8DB;
-  --sidebar-nav-nested-border: #D2D8DC;
+  --sidebar-nav-active-bg: #ECE8E2;
+  --sidebar-nav-active-text: #121313;
+  --sidebar-nav-pressed-bg: #D8D2CA;
+  --sidebar-nav-nested-border: #E7E2D9;
   --popover-list-item-hover-background-color: #F3F1EB;
+  --sidebar-nav-icon-color: #928C84;
+  --sidebar-nav-active-icon-color: #121313;
+}
+.sidebar-layout-secondary .pv-sidebar-nav a:not([aria-current=page]) [class*=pv-icon],
+.sidebar-layout-secondary .pv-sidebar-nav summary:not([aria-current=page]) [class*=pv-icon] {
+  color: var(--sidebar-nav-icon-color);
+}
+.sidebar-layout-secondary .pv-sidebar-nav a[aria-current=page] [class*=pv-icon],
+.sidebar-layout-secondary .pv-sidebar-nav summary[aria-current=page] [class*=pv-icon] {
+  color: var(--sidebar-nav-active-icon-color);
 }
 .pv-sidebar-nav-header {
@@ -5489,8 +5518,8 @@ pv-sidebar {
   background-color: var(--sidebar-nav-hover-bg);
   color: var(--sidebar-nav-hover-text);
 }
-.pv-sidebar-nav a:active,
-.pv-sidebar-nav summary:active {
+.pv-sidebar-nav a:active:not([aria-current=page]),
+.pv-sidebar-nav summary:active:not([aria-current=page]) {
   background-color: var(--sidebar-nav-pressed-bg);
 }
 .pv-sidebar-nav a[aria-current=page],
@@ -5529,6 +5558,10 @@ pv-sidebar {
   background-color: var(--popover-list-item-hover-background-color, #E8F2F4);
   color: #121313;
 }
+.pv-sidebar-nav .pv-popover .pv-popover-list a:active:not([aria-current=page]),
+.pv-sidebar-nav .pv-popover .pv-popover-list label:active:not([aria-current=page]) {
+  background-color: var(--sidebar-nav-pressed-bg);
+}
 .pv-layout-sidebar {
   --sidebar-width: 300px;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@turquoisehealth/pit-viper",
-  "version": "2.218.1",
+  "version": "2.219.0",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {