@turquoisehealth/pit-viper 2.68.0 → 2.70.0

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

@@ -412,8 +412,10 @@
 .pv-v2 .pv-button-secondary,
 .pv-v2 .pv-button-tertiary,
 .pv-v2 .pv-button-ghost,
+.pv-v2 .pv-button-ghost-inverse,
 .pv-v2 .pv-button-destructive,
-.pv-v2 .pv-button-ghost-destructive {
+.pv-v2 .pv-button-ghost-destructive,
+.pv-v2 .pv-button-ai {
   padding: var(--button-padding, calc(0.25rem - 1px) 0.5rem);
 }
 .pv-v2 .pv-button-primary:not(:disabled):hover, .pv-v2 .pv-button-primary:not(:disabled):focus-visible,
@@ -423,20 +425,27 @@
 .pv-v2 .pv-button-tertiary:not(:disabled):focus-visible,
 .pv-v2 .pv-button-ghost:not(:disabled):hover,
 .pv-v2 .pv-button-ghost:not(:disabled):focus-visible,
+.pv-v2 .pv-button-ghost-inverse:not(:disabled):hover,
+.pv-v2 .pv-button-ghost-inverse:not(:disabled):focus-visible,
 .pv-v2 .pv-button-destructive:not(:disabled):hover,
 .pv-v2 .pv-button-destructive:not(:disabled):focus-visible,
 .pv-v2 .pv-button-ghost-destructive:not(:disabled):hover,
-.pv-v2 .pv-button-ghost-destructive:not(:disabled):focus-visible {
+.pv-v2 .pv-button-ghost-destructive:not(:disabled):focus-visible,
+.pv-v2 .pv-button-ai:not(:disabled):hover,
+.pv-v2 .pv-button-ai:not(:disabled):focus-visible {
   text-decoration: none;
 }
 .pv-v2 .pv-button-primary:disabled,
 .pv-v2 .pv-button-secondary:disabled,
 .pv-v2 .pv-button-tertiary:disabled,
 .pv-v2 .pv-button-ghost:disabled,
+.pv-v2 .pv-button-ghost-inverse:disabled,
 .pv-v2 .pv-button-destructive:disabled,
-.pv-v2 .pv-button-ghost-destructive:disabled {
+.pv-v2 .pv-button-ghost-destructive:disabled,
+.pv-v2 .pv-button-ai:disabled {
   color: var(--button-disabled-color, #4B595C);
   background-color: var(--button-disabled-background-color, #ECECEC);
+  background-image: none;
 }
 .pv-v2 .pv-button-primary {
   color: var(--button-primary-color, #FFFFFF);
@@ -480,20 +489,28 @@
 .pv-v2 .pv-button-secondary.pv-button-inverse:not(:disabled):active {
   background-color: var(--color-background-interactive, #A8E6E1);
 }
-.pv-v2 .pv-button-tertiary {
-  background-color: var(--button-tertiary-background-color, #FFFFFF);
+.pv-v2 .pv-button-tertiary,
+.pv-v2 .pv-button-ghost-inverse {
+  background-color: var(--button-tertiary-background-color, #474C4B);
   border-color: var(--button-tertiary-border-color, transparent);
 }
-.pv-v2 .pv-button-tertiary:not(:disabled) {
-  color: var(--button-tertiary-color, #121313);
+.pv-v2 .pv-button-tertiary:not(:disabled),
+.pv-v2 .pv-button-ghost-inverse:not(:disabled) {
+  color: var(--button-tertiary-color, #FFFFFF);
 }
-.pv-v2 .pv-button-tertiary:not(:disabled):hover, .pv-v2 .pv-button-tertiary:not(:disabled):focus-visible {
-  color: var(--button-tertiary-hover-color, #121313);
-  background-color: var(--button-tertiary-hover-background-color, #E8F2F4);
+.pv-v2 .pv-button-tertiary:not(:disabled):hover, .pv-v2 .pv-button-tertiary:not(:disabled):focus-visible,
+.pv-v2 .pv-button-ghost-inverse:not(:disabled):hover,
+.pv-v2 .pv-button-ghost-inverse:not(:disabled):focus-visible {
+  color: var(--button-tertiary-hover-color, #FFFFFF);
+  background-color: var(--button-tertiary-hover-background-color, #353938);
 }
-.pv-v2 .pv-button-tertiary:not(:disabled):active {
-  background-color: var(--button-tertiary-pressed-color, #121313);
-  background-color: var(--button-tertiary-pressed-background-color, #C7D8DB);
+.pv-v2 .pv-button-tertiary:not(:disabled):active,
+.pv-v2 .pv-button-ghost-inverse:not(:disabled):active {
+  background-color: var(--button-tertiary-pressed-color, #FFFFFF);
+  background-color: var(--button-tertiary-pressed-background-color, #595F5E);
+}
+.pv-v2 .pv-button-ghost-inverse {
+  background-color: transparent;
 }
 .pv-v2 .pv-button-destructive {
   color: var(--button-destructive-color, #801A00);
@@ -531,6 +548,24 @@
 .pv-v2 .pv-button-ghost-destructive:not(:disabled):active {
   background-color: #FFAD99;
 }
+.pv-v2 .pv-button-ai {
+  background-image: var(--button-ai-background-color, linear-gradient(138deg, #F1E8FF 4.38%, #D7F3F1 99.39%));
+  border-color: var(--button-ai-border-color, transparent);
+  border-radius: var(--button-ai-radius, 2rem);
+}
+.pv-v2 .pv-button-ai:not(:disabled) {
+  color: var(--button-ai-color, #121313);
+}
+.pv-v2 .pv-button-ai:not(:disabled):hover, .pv-v2 .pv-button-ai:not(:disabled):focus-visible {
+  color: var(--button-ai-hover-color, #121313);
+  background-color: var(--button-ai-hover-background-color, #E8F2F4);
+  background-image: none;
+}
+.pv-v2 .pv-button-ai:not(:disabled):active {
+  color: var(--button-ai-pressed-color, #121313);
+  background-color: var(--button-ai-pressed-background-color, #C7D8DB);
+  background-image: none;
+}
 .pv-v2 .pv-button-primary-outline {
   border: 1px solid var(--button-primary-outline-border-color, #E3E7EA);
   color: var(--button-primary-outline-color, #121313);
@@ -1845,9 +1880,6 @@
 .pv-v2 [class*=pv-toast] p {
   flex: 1;
 }
-.pv-v2 [class*=pv-toast] svg {
-  fill: #121313;
-}
 .pv-v2 .pv-toast-info {
   background-color: #F7F8F8;
 }
@@ -1866,6 +1898,16 @@
 .pv-v2 .pv-toast-error svg:not([class*=pv-button] svg) {
   fill: #FF471A;
 }
+.pv-v2 .pv-toast-dark {
+  background-color: #242626;
+  color: #FFFFFF;
+}
+.pv-v2 .pv-toast-dark svg:not([class*=pv-button] svg) {
+  background-image: linear-gradient(138deg, #F1E8FF 4.38%, #D7F3F1 99.39%);
+  border-radius: 2rem;
+  padding: 2px;
+  fill: #121313;
+}
 .pv-v2 .pv-pulsing-dot {
   --color: #36C5BA;
   --size: 6px;
@@ -4251,6 +4293,9 @@
 .pv-v2 .pv-surface-brand-accent {
   background-color: var(--color-background-brand-accent, #E8F2F4);
 }
+.pv-v2 .pv-surface-inverse {
+  background-color: var(--color-background-inverse, #242626);
+}
 .pv-v2 .pv-surface-warning {
   background-color: #FFEED9;
 }

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

@@ -471,8 +471,10 @@
 .pv-button-secondary,
 .pv-button-tertiary,
 .pv-button-ghost,
+.pv-button-ghost-inverse,
 .pv-button-destructive,
-.pv-button-ghost-destructive {
+.pv-button-ghost-destructive,
+.pv-button-ai {
   padding: var(--button-padding, calc(0.25rem - 1px) 0.5rem);
 }
 .pv-button-primary:not(:disabled):hover, .pv-button-primary:not(:disabled):focus-visible,
@@ -482,20 +484,27 @@
 .pv-button-tertiary:not(:disabled):focus-visible,
 .pv-button-ghost:not(:disabled):hover,
 .pv-button-ghost:not(:disabled):focus-visible,
+.pv-button-ghost-inverse:not(:disabled):hover,
+.pv-button-ghost-inverse:not(:disabled):focus-visible,
 .pv-button-destructive:not(:disabled):hover,
 .pv-button-destructive:not(:disabled):focus-visible,
 .pv-button-ghost-destructive:not(:disabled):hover,
-.pv-button-ghost-destructive:not(:disabled):focus-visible {
+.pv-button-ghost-destructive:not(:disabled):focus-visible,
+.pv-button-ai:not(:disabled):hover,
+.pv-button-ai:not(:disabled):focus-visible {
   text-decoration: none;
 }
 .pv-button-primary:disabled,
 .pv-button-secondary:disabled,
 .pv-button-tertiary:disabled,
 .pv-button-ghost:disabled,
+.pv-button-ghost-inverse:disabled,
 .pv-button-destructive:disabled,
-.pv-button-ghost-destructive:disabled {
+.pv-button-ghost-destructive:disabled,
+.pv-button-ai:disabled {
   color: var(--button-disabled-color, #4B595C);
   background-color: var(--button-disabled-background-color, #ECECEC);
+  background-image: none;
 }
 
 .pv-button-primary {
@@ -543,20 +552,29 @@
   background-color: var(--color-background-interactive, #A8E6E1);
 }
 
-.pv-button-tertiary {
-  background-color: var(--button-tertiary-background-color, #FFFFFF);
+.pv-button-tertiary,
+.pv-button-ghost-inverse {
+  background-color: var(--button-tertiary-background-color, #474C4B);
   border-color: var(--button-tertiary-border-color, transparent);
 }
-.pv-button-tertiary:not(:disabled) {
-  color: var(--button-tertiary-color, #121313);
+.pv-button-tertiary:not(:disabled),
+.pv-button-ghost-inverse:not(:disabled) {
+  color: var(--button-tertiary-color, #FFFFFF);
 }
-.pv-button-tertiary:not(:disabled):hover, .pv-button-tertiary:not(:disabled):focus-visible {
-  color: var(--button-tertiary-hover-color, #121313);
-  background-color: var(--button-tertiary-hover-background-color, #E8F2F4);
+.pv-button-tertiary:not(:disabled):hover, .pv-button-tertiary:not(:disabled):focus-visible,
+.pv-button-ghost-inverse:not(:disabled):hover,
+.pv-button-ghost-inverse:not(:disabled):focus-visible {
+  color: var(--button-tertiary-hover-color, #FFFFFF);
+  background-color: var(--button-tertiary-hover-background-color, #353938);
 }
-.pv-button-tertiary:not(:disabled):active {
-  background-color: var(--button-tertiary-pressed-color, #121313);
-  background-color: var(--button-tertiary-pressed-background-color, #C7D8DB);
+.pv-button-tertiary:not(:disabled):active,
+.pv-button-ghost-inverse:not(:disabled):active {
+  background-color: var(--button-tertiary-pressed-color, #FFFFFF);
+  background-color: var(--button-tertiary-pressed-background-color, #595F5E);
+}
+
+.pv-button-ghost-inverse {
+  background-color: transparent;
 }
 
 .pv-button-destructive {
@@ -599,6 +617,25 @@
   background-color: #FFAD99;
 }
 
+.pv-button-ai {
+  background-image: var(--button-ai-background-color, linear-gradient(138deg, #F1E8FF 4.38%, #D7F3F1 99.39%));
+  border-color: var(--button-ai-border-color, transparent);
+  border-radius: var(--button-ai-radius, 2rem);
+}
+.pv-button-ai:not(:disabled) {
+  color: var(--button-ai-color, #121313);
+}
+.pv-button-ai:not(:disabled):hover, .pv-button-ai:not(:disabled):focus-visible {
+  color: var(--button-ai-hover-color, #121313);
+  background-color: var(--button-ai-hover-background-color, #E8F2F4);
+  background-image: none;
+}
+.pv-button-ai:not(:disabled):active {
+  color: var(--button-ai-pressed-color, #121313);
+  background-color: var(--button-ai-pressed-background-color, #C7D8DB);
+  background-image: none;
+}
+
 .pv-button-primary-outline {
   border: 1px solid var(--button-primary-outline-border-color, #E3E7EA);
   color: var(--button-primary-outline-color, #121313);
@@ -1994,9 +2031,6 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 [class*=pv-toast] p {
   flex: 1;
 }
-[class*=pv-toast] svg {
-  fill: #121313;
-}
 
 .pv-toast-info {
   background-color: #F7F8F8;
@@ -2019,6 +2053,17 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
   fill: #FF471A;
 }
 
+.pv-toast-dark {
+  background-color: #242626;
+  color: #FFFFFF;
+}
+.pv-toast-dark svg:not([class*=pv-button] svg) {
+  background-image: linear-gradient(138deg, #F1E8FF 4.38%, #D7F3F1 99.39%);
+  border-radius: 2rem;
+  padding: 2px;
+  fill: #121313;
+}
+
 .pv-pulsing-dot {
   --color: #36C5BA;
   --size: 6px;
@@ -4617,6 +4662,10 @@ body:has(.pv-layout-primary) {
   background-color: var(--color-background-brand-accent, #E8F2F4);
 }
 
+.pv-surface-inverse {
+  background-color: var(--color-background-inverse, #242626);
+}
+
 .pv-surface-warning {
   background-color: #FFEED9;
 }

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

@@ -476,8 +476,10 @@
 .pv-button-secondary,
 .pv-button-tertiary,
 .pv-button-ghost,
+.pv-button-ghost-inverse,
 .pv-button-destructive,
-.pv-button-ghost-destructive {
+.pv-button-ghost-destructive,
+.pv-button-ai {
   padding: var(--button-padding, 0.6875rem 1.25rem);
 }
 .pv-button-primary:not(:disabled):hover, .pv-button-primary:not(:disabled):focus-visible,
@@ -487,20 +489,27 @@
 .pv-button-tertiary:not(:disabled):focus-visible,
 .pv-button-ghost:not(:disabled):hover,
 .pv-button-ghost:not(:disabled):focus-visible,
+.pv-button-ghost-inverse:not(:disabled):hover,
+.pv-button-ghost-inverse:not(:disabled):focus-visible,
 .pv-button-destructive:not(:disabled):hover,
 .pv-button-destructive:not(:disabled):focus-visible,
 .pv-button-ghost-destructive:not(:disabled):hover,
-.pv-button-ghost-destructive:not(:disabled):focus-visible {
+.pv-button-ghost-destructive:not(:disabled):focus-visible,
+.pv-button-ai:not(:disabled):hover,
+.pv-button-ai:not(:disabled):focus-visible {
   text-decoration: none;
 }
 .pv-button-primary:disabled,
 .pv-button-secondary:disabled,
 .pv-button-tertiary:disabled,
 .pv-button-ghost:disabled,
+.pv-button-ghost-inverse:disabled,
 .pv-button-destructive:disabled,
-.pv-button-ghost-destructive:disabled {
+.pv-button-ghost-destructive:disabled,
+.pv-button-ai:disabled {
   color: var(--button-disabled-color, #6E7784);
   background-color: var(--button-disabled-background-color, #DCDFE4);
+  background-image: none;
 }
 
 .pv-button-primary {
@@ -548,22 +557,31 @@
   background-color: var(--color-background-interactive, #A8E6E1);
 }
 
-.pv-button-tertiary {
+.pv-button-tertiary,
+.pv-button-ghost-inverse {
   background-color: var(--button-tertiary-background-color, #A8E6E1);
   border-color: var(--button-tertiary-border-color, transparent);
 }
-.pv-button-tertiary:not(:disabled) {
+.pv-button-tertiary:not(:disabled),
+.pv-button-ghost-inverse:not(:disabled) {
   color: var(--button-tertiary-color, #02363D);
 }
-.pv-button-tertiary:not(:disabled):hover, .pv-button-tertiary:not(:disabled):focus-visible {
+.pv-button-tertiary:not(:disabled):hover, .pv-button-tertiary:not(:disabled):focus-visible,
+.pv-button-ghost-inverse:not(:disabled):hover,
+.pv-button-ghost-inverse:not(:disabled):focus-visible {
   color: var(--button-tertiary-hover-color, #02363D);
   background-color: var(--button-tertiary-hover-background-color, #6FD6CE);
 }
-.pv-button-tertiary:not(:disabled):active {
+.pv-button-tertiary:not(:disabled):active,
+.pv-button-ghost-inverse:not(:disabled):active {
   background-color: var(--button-tertiary-pressed-color, #02363D);
   background-color: var(--button-tertiary-pressed-background-color, #6FD6CE);
 }
 
+.pv-button-ghost-inverse {
+  background-color: transparent;
+}
+
 .pv-button-destructive {
   color: var(--button-destructive-color, #FFFFFF);
   background-color: var(--button-destructive-background-color, #DA1E28);
@@ -604,6 +622,25 @@
   background-color: #A2191F;
 }
 
+.pv-button-ai {
+  background-image: var(--button-ai-background-color, linear-gradient(138deg, #F1E8FF 4.38%, #D7F3F1 99.39%));
+  border-color: var(--button-ai-border-color, transparent);
+  border-radius: var(--button-ai-radius, 2rem);
+}
+.pv-button-ai:not(:disabled) {
+  color: var(--button-ai-color, #121313);
+}
+.pv-button-ai:not(:disabled):hover, .pv-button-ai:not(:disabled):focus-visible {
+  color: var(--button-ai-hover-color, #121313);
+  background-color: var(--button-ai-hover-background-color, #E8F2F4);
+  background-image: none;
+}
+.pv-button-ai:not(:disabled):active {
+  color: var(--button-ai-pressed-color, #121313);
+  background-color: var(--button-ai-pressed-background-color, #C7D8DB);
+  background-image: none;
+}
+
 .pv-button-primary-outline {
   border: 2px solid var(--button-primary-outline-border-color, #176F6F);
   color: var(--button-primary-outline-color, #176F6F);
@@ -1999,9 +2036,6 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 [class*=pv-toast] p {
   flex: 1;
 }
-[class*=pv-toast] svg {
-  fill: #FFFFFF;
-}
 
 .pv-toast-info {
   background-color: #F7F8F8;
@@ -2024,6 +2058,17 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
   fill: #FFFFFF;
 }
 
+.pv-toast-dark {
+  background-color: #242626;
+  color: #FFFFFF;
+}
+.pv-toast-dark svg:not([class*=pv-button] svg) {
+  background-image: linear-gradient(138deg, #F1E8FF 4.38%, #D7F3F1 99.39%);
+  border-radius: 2rem;
+  padding: 2px;
+  fill: #121313;
+}
+
 .pv-pulsing-dot {
   --color: #36C5BA;
   --size: 6px;
@@ -4622,6 +4667,10 @@ body:has(.pv-layout-primary) {
   background-color: var(--color-background-brand-accent, #F3FCFB);
 }
 
+.pv-surface-inverse {
+  background-color: var(--color-background-inverse, #242626);
+}
+
 .pv-surface-warning {
   background-color: #FAECCC;
 }

package/package.json

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