@turquoisehealth/pit-viper 2.68.0 → 2.69.0

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

@@ -413,7 +413,8 @@
 .pv-v2 .pv-button-tertiary,
 .pv-v2 .pv-button-ghost,
 .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,
@@ -426,7 +427,9 @@
 .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,
@@ -434,9 +437,11 @@
 .pv-v2 .pv-button-tertiary:disabled,
 .pv-v2 .pv-button-ghost: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);
@@ -481,19 +486,19 @@
   background-color: var(--color-background-interactive, #A8E6E1);
 }
 .pv-v2 .pv-button-tertiary {
-  background-color: var(--button-tertiary-background-color, #FFFFFF);
+  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);
+  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);
+  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);
+  background-color: var(--button-tertiary-pressed-color, #FFFFFF);
+  background-color: var(--button-tertiary-pressed-background-color, #595F5E);
 }
 .pv-v2 .pv-button-destructive {
   color: var(--button-destructive-color, #801A00);
@@ -531,6 +536,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);
@@ -1866,6 +1889,24 @@
 .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-toast-dark [class*=pv-button] svg {
+  fill: #FFFFFF;
+}
+.pv-v2 .pv-toast-dark [class*=pv-button]:hover svg,
+.pv-v2 .pv-toast-dark [class*=pv-button]:focus-visible svg,
+.pv-v2 .pv-toast-dark [class*=pv-button]:active svg {
+  fill: #121313;
+}
 .pv-v2 .pv-pulsing-dot {
   --color: #36C5BA;
   --size: 6px;

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

@@ -472,7 +472,8 @@
 .pv-button-tertiary,
 .pv-button-ghost,
 .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,
@@ -485,7 +486,9 @@
 .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,
@@ -493,9 +496,11 @@
 .pv-button-tertiary:disabled,
 .pv-button-ghost: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 {
@@ -544,19 +549,19 @@
 }
 
 .pv-button-tertiary {
-  background-color: var(--button-tertiary-background-color, #FFFFFF);
+  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);
+  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);
+  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);
+  background-color: var(--button-tertiary-pressed-color, #FFFFFF);
+  background-color: var(--button-tertiary-pressed-background-color, #595F5E);
 }
 
 .pv-button-destructive {
@@ -599,6 +604,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);
@@ -2019,6 +2043,25 @@ 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-toast-dark [class*=pv-button] svg {
+  fill: #FFFFFF;
+}
+.pv-toast-dark [class*=pv-button]:hover svg,
+.pv-toast-dark [class*=pv-button]:focus-visible svg,
+.pv-toast-dark [class*=pv-button]:active svg {
+  fill: #121313;
+}
+
 .pv-pulsing-dot {
   --color: #36C5BA;
   --size: 6px;

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

@@ -477,7 +477,8 @@
 .pv-button-tertiary,
 .pv-button-ghost,
 .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,
@@ -490,7 +491,9 @@
 .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,
@@ -498,9 +501,11 @@
 .pv-button-tertiary:disabled,
 .pv-button-ghost: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 {
@@ -604,6 +609,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);
@@ -2024,6 +2048,25 @@ 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-toast-dark [class*=pv-button] svg {
+  fill: #FFFFFF;
+}
+.pv-toast-dark [class*=pv-button]:hover svg,
+.pv-toast-dark [class*=pv-button]:focus-visible svg,
+.pv-toast-dark [class*=pv-button]:active svg {
+  fill: #121313;
+}
+
 .pv-pulsing-dot {
   --color: #36C5BA;
   --size: 6px;

package/package.json

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