@turquoisehealth/pit-viper 2.45.0 → 2.46.0

package/_site/assets/css/pit-viper-v2-scoped.css

@@ -1,6 +1,4 @@
 @charset "UTF-8";
-/* toggle color styles should align with secondary and tertiary buttons */
-/* toggle color styles should align with secondary and tertiary buttons */
 @font-face {
   font-family: "Inter";
   src: url(https://static.turquoise.health/static/fonts/Inter-Regular.woff2) format("woff2");
@@ -9,14 +7,14 @@
 }
 @font-face {
   font-family: "Inter";
-  src: url(https://static.turquoise.health/static/fonts/Inter-SemiBold.woff2) format("woff2");
-  font-weight: 600;
+  src: url(https://static.turquoise.health/static/fonts/Inter-Medium.woff2) format("woff2");
+  font-weight: 500;
   font-style: normal;
 }
 @font-face {
   font-family: "Inter";
-  src: url(https://static.turquoise.health/static/fonts/Inter-Bold.woff2) format("woff2");
-  font-weight: 700;
+  src: url(https://static.turquoise.health/static/fonts/Inter-SemiBold.woff2) format("woff2");
+  font-weight: 600;
   font-style: normal;
 }
 .pv-v2 {
@@ -28,8 +26,6 @@
   background-color: var(--color-background-body, #FFFFFF);
   -webkit-font-smoothing: antialiased;
   /* Remove all animations and transitions for people that prefer not to see them */
-  /* naming aligns with the corresponding button styles.
-     default = secondary. there is no "primary". */
 }
 .pv-v2 :where(*) {
   box-sizing: border-box;
@@ -1257,61 +1253,6 @@
   border-radius: var(--selectable-label-small-radius, 4px);
   padding: var(--selectable-label-small-padding, 0.5rem);
 }
-.pv-v2 [class*=pv-toggle] {
-  cursor: pointer;
-  background-color: #FFFFFF;
-  border: 2px solid #E3E7EA;
-  border-radius: var(--button-radius, 4px);
-  color: #121313;
-  font-size: var(--button-font-size, 0.75rem);
-  font-weight: var(--button-font-weight, 500);
-  padding: 0.25rem 0.5rem;
-  transition-duration: 0.125s;
-  transition-timing-function: ease-in;
-  transition-property: border-color, color;
-}
-.pv-v2 [class*=pv-toggle]:hover, .pv-v2 [class*=pv-toggle]:focus-within {
-  background-color: #E8F2F4;
-  border-color: #E8F2F4;
-  color: #121313;
-}
-.pv-v2 [class*=pv-toggle]:active {
-  background-color: #C7D8DB;
-  border-color: #C7D8DB;
-  color: #121313;
-}
-.pv-v2 [class*=pv-toggle]:focus-within input {
-  outline: none;
-}
-.pv-v2 [class*=pv-toggle]:has(:checked) {
-  background-color: #16696D;
-  border-color: #16696D;
-  color: #FFFFFF;
-}
-.pv-v2 [class*=pv-toggle]:has(:checked):hover, .pv-v2 [class*=pv-toggle]:has(:checked):focus-within {
-  background-color: #0D5256;
-  border-color: #0D5256;
-}
-.pv-v2 [class*=pv-toggle]:has(:checked):active {
-  background-color: #02363D;
-  border-color: #02363D;
-}
-.pv-v2 [class*=pv-toggle]:has(:disabled), .pv-v2 [class*=pv-toggle]:has(:disabled):hover, .pv-v2 [class*=pv-toggle]:has(:disabled):focus-within, .pv-v2 [class*=pv-toggle]:has(:disabled):active {
-  cursor: auto;
-  pointer-events: none;
-  background-color: #ECECEC;
-  border-color: #ECECEC;
-  color: #7D898D;
-}
-.pv-v2 .pv-toggle-tertiary {
-  background-color: #DCDFE4;
-}
-.pv-v2 .pv-toggle-round {
-  border-radius: 2rem;
-}
-.pv-v2 .pv-toggle-icon {
-  padding: 0.25rem;
-}
 .pv-v2 .pv-input-small {
   padding: var(--text-input-small-padding, calc(0.25rem - 1px) 0.5rem);
 }
@@ -3890,6 +3831,71 @@
   background-color: var(--banner-tertiary-background-color, #F7F8F8);
   border: 1px solid var(--banner-tertiary-border-color, transparent);
 }
+.pv-v2 [class*=pv-toggle] {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--toggle-gap, 0.25rem);
+  white-space: nowrap;
+  background-color: var(--toggle-background-color, #FFFFFF);
+  border: var(--toggle-border, 1px solid #E3E7EA);
+  border-radius: var(--toggle-radius, 4px);
+  color: var(--toggle-color, #121313);
+  font-size: var(--toggle-font-size, 0.75rem);
+  font-weight: var(--toggle-font-weight, 500);
+  line-height: var(--toggle-line-height, 1.33333333);
+  padding: var(--toggle-padding, calc(0.5rem - 1px) 0.75rem);
+}
+.pv-v2 [class*=pv-toggle] input {
+  display: none;
+}
+.pv-v2 [class*=pv-toggle]:hover, .pv-v2 [class*=pv-toggle]:focus-within {
+  background-color: var(--toggle-hover-background-color, #E8F2F4);
+  border-color: var(--toggle-hover-border-color, transparent);
+  color: var(--toggle-hover-color, inherit);
+}
+.pv-v2 [class*=pv-toggle]:active {
+  background-color: var(--toggle-pressed-background-color, #C7D8DB);
+  border-color: var(--toggle-pressed-border-color, transparent);
+  color: var(--toggle-pressed-color, inherit);
+}
+.pv-v2 [class*=pv-toggle]:has(:checked) {
+  background-color: var(--toggle-selected-background-color, #16696D);
+  border-color: var(--toggle-selected-border-color, #16696D);
+  color: var(--toggle-selected-color, #FFFFFF);
+}
+.pv-v2 [class*=pv-toggle]:has(:checked):hover, .pv-v2 [class*=pv-toggle]:has(:checked):focus-within {
+  background-color: var(--toggle-selected-hover-background-color, #0D5256);
+  border-color: var(--toggle-selected-hover-border-color, transparent);
+}
+.pv-v2 [class*=pv-toggle]:has(:checked):active {
+  background-color: var(--toggle-selected-pressed-background-color, #02363D);
+  border-color: var(--toggle-selected-pressed-border-color, transparent);
+}
+.pv-v2 [class*=pv-toggle]:has(:disabled), .pv-v2 [class*=pv-toggle]:has(:disabled):hover, .pv-v2 [class*=pv-toggle]:has(:disabled):focus-within, .pv-v2 [class*=pv-toggle]:has(:disabled):active {
+  cursor: auto;
+  pointer-events: none;
+  background-color: var(--toggle-disabled-background-color, #ECECEC);
+  border-color: var(--toggle-disabled-border-color, transparent);
+  color: var(--toggle-disabled-color, #4B595C);
+}
+.pv-v2 .pv-toggle-tertiary {
+  background-color: var(--toggle-tertiary-background-color, #F0F2F2);
+  border-color: var(--toggle-tertiary-border-color, transparent);
+}
+.pv-v2 .pv-toggle-round {
+  border-radius: var(--toggle-round-radius, 2rem);
+}
+.pv-v2 .pv-toggle-small {
+  padding: var(--toggle-small-padding, calc(0.25rem - 1px) 0.5rem);
+}
+.pv-v2 .pv-toggle-icon {
+  padding: var(--toggle-icon-only-padding, calc(0.5rem - 1px));
+}
+.pv-v2 .pv-toggle-icon.pv-toggle-small {
+  padding: var(--toggle-small-icon-only-padding, calc(0.25rem - 1px));
+}
 .pv-v2 .pv-layout-primary,
 .pv-v2 .pv-layout-primary[data-collapsed] {
   font-family: var(--layout-primary-sidebar-font-family, Inter, sans-serif);

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

@@ -1,6 +1,4 @@
 @charset "UTF-8";
-/* toggle color styles should align with secondary and tertiary buttons */
-/* toggle color styles should align with secondary and tertiary buttons */
 @font-face {
   font-family: "Inter";
   src: url(https://static.turquoise.health/static/fonts/Inter-Regular.woff2) format("woff2");
@@ -9,14 +7,14 @@
 }
 @font-face {
   font-family: "Inter";
-  src: url(https://static.turquoise.health/static/fonts/Inter-SemiBold.woff2) format("woff2");
-  font-weight: 600;
+  src: url(https://static.turquoise.health/static/fonts/Inter-Medium.woff2) format("woff2");
+  font-weight: 500;
   font-style: normal;
 }
 @font-face {
   font-family: "Inter";
-  src: url(https://static.turquoise.health/static/fonts/Inter-Bold.woff2) format("woff2");
-  font-weight: 700;
+  src: url(https://static.turquoise.health/static/fonts/Inter-SemiBold.woff2) format("woff2");
+  font-weight: 600;
   font-style: normal;
 }
 :where(*) {
@@ -1360,67 +1358,6 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   padding: var(--selectable-label-small-padding, 0.5rem);
 }
 
-[class*=pv-toggle] {
-  cursor: pointer;
-  background-color: #FFFFFF;
-  border: 2px solid #E3E7EA;
-  border-radius: var(--button-radius, 4px);
-  color: #121313;
-  font-size: var(--button-font-size, 0.75rem);
-  font-weight: var(--button-font-weight, 500);
-  padding: 0.25rem 0.5rem;
-  transition-duration: 0.125s;
-  transition-timing-function: ease-in;
-  transition-property: border-color, color;
-}
-[class*=pv-toggle]:hover, [class*=pv-toggle]:focus-within {
-  background-color: #E8F2F4;
-  border-color: #E8F2F4;
-  color: #121313;
-}
-[class*=pv-toggle]:active {
-  background-color: #C7D8DB;
-  border-color: #C7D8DB;
-  color: #121313;
-}
-[class*=pv-toggle]:focus-within input {
-  outline: none;
-}
-[class*=pv-toggle]:has(:checked) {
-  background-color: #16696D;
-  border-color: #16696D;
-  color: #FFFFFF;
-}
-[class*=pv-toggle]:has(:checked):hover, [class*=pv-toggle]:has(:checked):focus-within {
-  background-color: #0D5256;
-  border-color: #0D5256;
-}
-[class*=pv-toggle]:has(:checked):active {
-  background-color: #02363D;
-  border-color: #02363D;
-}
-[class*=pv-toggle]:has(:disabled), [class*=pv-toggle]:has(:disabled):hover, [class*=pv-toggle]:has(:disabled):focus-within, [class*=pv-toggle]:has(:disabled):active {
-  cursor: auto;
-  pointer-events: none;
-  background-color: #ECECEC;
-  border-color: #ECECEC;
-  color: #7D898D;
-}
-
-/* naming aligns with the corresponding button styles.
-   default = secondary. there is no "primary". */
-.pv-toggle-tertiary {
-  background-color: #DCDFE4;
-}
-
-.pv-toggle-round {
-  border-radius: 2rem;
-}
-
-.pv-toggle-icon {
-  padding: 0.25rem;
-}
-
 .pv-input-small {
   padding: var(--text-input-small-padding, calc(0.25rem - 1px) 0.5rem);
 }
@@ -4220,6 +4157,77 @@ pv-data-grid.ag-theme-pv {
   border: 1px solid var(--banner-tertiary-border-color, transparent);
 }
 
+[class*=pv-toggle] {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--toggle-gap, 0.25rem);
+  white-space: nowrap;
+  background-color: var(--toggle-background-color, #FFFFFF);
+  border: var(--toggle-border, 1px solid #E3E7EA);
+  border-radius: var(--toggle-radius, 4px);
+  color: var(--toggle-color, #121313);
+  font-size: var(--toggle-font-size, 0.75rem);
+  font-weight: var(--toggle-font-weight, 500);
+  line-height: var(--toggle-line-height, 1.33333333);
+  padding: var(--toggle-padding, calc(0.5rem - 1px) 0.75rem);
+}
+[class*=pv-toggle] input {
+  display: none;
+}
+[class*=pv-toggle]:hover, [class*=pv-toggle]:focus-within {
+  background-color: var(--toggle-hover-background-color, #E8F2F4);
+  border-color: var(--toggle-hover-border-color, transparent);
+  color: var(--toggle-hover-color, inherit);
+}
+[class*=pv-toggle]:active {
+  background-color: var(--toggle-pressed-background-color, #C7D8DB);
+  border-color: var(--toggle-pressed-border-color, transparent);
+  color: var(--toggle-pressed-color, inherit);
+}
+[class*=pv-toggle]:has(:checked) {
+  background-color: var(--toggle-selected-background-color, #16696D);
+  border-color: var(--toggle-selected-border-color, #16696D);
+  color: var(--toggle-selected-color, #FFFFFF);
+}
+[class*=pv-toggle]:has(:checked):hover, [class*=pv-toggle]:has(:checked):focus-within {
+  background-color: var(--toggle-selected-hover-background-color, #0D5256);
+  border-color: var(--toggle-selected-hover-border-color, transparent);
+}
+[class*=pv-toggle]:has(:checked):active {
+  background-color: var(--toggle-selected-pressed-background-color, #02363D);
+  border-color: var(--toggle-selected-pressed-border-color, transparent);
+}
+[class*=pv-toggle]:has(:disabled), [class*=pv-toggle]:has(:disabled):hover, [class*=pv-toggle]:has(:disabled):focus-within, [class*=pv-toggle]:has(:disabled):active {
+  cursor: auto;
+  pointer-events: none;
+  background-color: var(--toggle-disabled-background-color, #ECECEC);
+  border-color: var(--toggle-disabled-border-color, transparent);
+  color: var(--toggle-disabled-color, #4B595C);
+}
+
+.pv-toggle-tertiary {
+  background-color: var(--toggle-tertiary-background-color, #F0F2F2);
+  border-color: var(--toggle-tertiary-border-color, transparent);
+}
+
+.pv-toggle-round {
+  border-radius: var(--toggle-round-radius, 2rem);
+}
+
+.pv-toggle-small {
+  padding: var(--toggle-small-padding, calc(0.25rem - 1px) 0.5rem);
+}
+
+.pv-toggle-icon {
+  padding: var(--toggle-icon-only-padding, calc(0.5rem - 1px));
+}
+
+.pv-toggle-icon.pv-toggle-small {
+  padding: var(--toggle-small-icon-only-padding, calc(0.25rem - 1px));
+}
+
 .pv-layout-primary,
 .pv-layout-primary[data-collapsed] {
   font-family: var(--layout-primary-sidebar-font-family, Inter, sans-serif);

package/_site/assets/css/pit-viper.css

@@ -1,4 +1,3 @@
-/* toggle color styles should align with secondary and tertiary buttons */
 @font-face {
   font-family: "HK Grotesk";
   src: url(https://static.turquoise.health/static/fonts/HKGrotesk-Regular.woff2) format("woff2");
@@ -1364,67 +1363,6 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   padding: var(--selectable-label-small-padding, 0.75rem 1.5rem);
 }
 
-[class*=pv-toggle] {
-  cursor: pointer;
-  background-color: #FFFFFF;
-  border: 2px solid #DCDFE4;
-  border-radius: var(--button-radius, 2rem);
-  color: #02363D;
-  font-size: var(--button-font-size, 1rem);
-  font-weight: var(--button-font-weight, 600);
-  padding: 0.6875rem 1.25rem;
-  transition-duration: 0.125s;
-  transition-timing-function: ease-in;
-  transition-property: border-color, color;
-}
-[class*=pv-toggle]:hover, [class*=pv-toggle]:focus-within {
-  background-color: #0D5256;
-  border-color: #0D5256;
-  color: #FFFFFF;
-}
-[class*=pv-toggle]:active {
-  background-color: #218C88;
-  border-color: #218C88;
-  color: #FFFFFF;
-}
-[class*=pv-toggle]:focus-within input {
-  outline: none;
-}
-[class*=pv-toggle]:has(:checked) {
-  background-color: #02363D;
-  border-color: #02363D;
-  color: #FFFFFF;
-}
-[class*=pv-toggle]:has(:checked):hover, [class*=pv-toggle]:has(:checked):focus-within {
-  background-color: #02363D;
-  border-color: #02363D;
-}
-[class*=pv-toggle]:has(:checked):active {
-  background-color: #02363D;
-  border-color: #02363D;
-}
-[class*=pv-toggle]:has(:disabled), [class*=pv-toggle]:has(:disabled):hover, [class*=pv-toggle]:has(:disabled):focus-within, [class*=pv-toggle]:has(:disabled):active {
-  cursor: auto;
-  pointer-events: none;
-  background-color: #DCDFE4;
-  border-color: #DCDFE4;
-  color: #6E7784;
-}
-
-/* naming aligns with the corresponding button styles.
-   default = secondary. there is no "primary". */
-.pv-toggle-tertiary {
-  background-color: #DCDFE4;
-}
-
-.pv-toggle-round {
-  border-radius: 2rem;
-}
-
-.pv-toggle-icon {
-  padding: 0.25rem;
-}
-
 .pv-input-small {
   padding: var(--text-input-small-padding, 0.25rem 0.5rem);
 }
@@ -4224,6 +4162,77 @@ pv-data-grid.ag-theme-pv {
   border: 1px solid var(--banner-tertiary-border-color, transparent);
 }
 
+[class*=pv-toggle] {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--toggle-gap, 8px);
+  white-space: nowrap;
+  background-color: var(--toggle-background-color, #FFFFFF);
+  border: var(--toggle-border, 2px solid #DCDFE4);
+  border-radius: var(--toggle-radius, 2rem);
+  color: var(--toggle-color, #02363D);
+  font-size: var(--toggle-font-size, 1rem);
+  font-weight: var(--toggle-font-weight, 600);
+  line-height: var(--toggle-line-height, inherit);
+  padding: var(--toggle-padding, 0.6875rem 1.25rem);
+}
+[class*=pv-toggle] input {
+  display: none;
+}
+[class*=pv-toggle]:hover, [class*=pv-toggle]:focus-within {
+  background-color: var(--toggle-hover-background-color, #0D5256);
+  border-color: var(--toggle-hover-border-color, transparent);
+  color: var(--toggle-hover-color, #FFFFFF);
+}
+[class*=pv-toggle]:active {
+  background-color: var(--toggle-pressed-background-color, #218C88);
+  border-color: var(--toggle-pressed-border-color, transparent);
+  color: var(--toggle-pressed-color, #FFFFFF);
+}
+[class*=pv-toggle]:has(:checked) {
+  background-color: var(--toggle-selected-background-color, #02363D);
+  border-color: var(--toggle-selected-border-color, #02363D);
+  color: var(--toggle-selected-color, #FFFFFF);
+}
+[class*=pv-toggle]:has(:checked):hover, [class*=pv-toggle]:has(:checked):focus-within {
+  background-color: var(--toggle-selected-hover-background-color, #02363D);
+  border-color: var(--toggle-selected-hover-border-color, transparent);
+}
+[class*=pv-toggle]:has(:checked):active {
+  background-color: var(--toggle-selected-pressed-background-color, #02363D);
+  border-color: var(--toggle-selected-pressed-border-color, transparent);
+}
+[class*=pv-toggle]:has(:disabled), [class*=pv-toggle]:has(:disabled):hover, [class*=pv-toggle]:has(:disabled):focus-within, [class*=pv-toggle]:has(:disabled):active {
+  cursor: auto;
+  pointer-events: none;
+  background-color: var(--toggle-disabled-background-color, #DCDFE4);
+  border-color: var(--toggle-disabled-border-color, transparent);
+  color: var(--toggle-disabled-color, #6E7784);
+}
+
+.pv-toggle-tertiary {
+  background-color: var(--toggle-tertiary-background-color, #DCDFE4);
+  border-color: var(--toggle-tertiary-border-color, transparent);
+}
+
+.pv-toggle-round {
+  border-radius: var(--toggle-round-radius, 2rem);
+}
+
+.pv-toggle-small {
+  padding: var(--toggle-small-padding, 0.25rem);
+}
+
+.pv-toggle-icon {
+  padding: var(--toggle-icon-only-padding, 0.25rem);
+}
+
+.pv-toggle-icon.pv-toggle-small {
+  padding: var(--toggle-small-icon-only-padding, 0.25rem);
+}
+
 .pv-layout-primary,
 .pv-layout-primary[data-collapsed] {
   font-family: var(--layout-primary-sidebar-font-family, HK Grotesk, sans-serif);